{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "documentation-provider",
  "title": "Documentation Provider",
  "description": "Info icon trigger with a right drawer that renders API content as GitHub-flavored markdown (images, tables, fenced code) and safe HTML (e.g. video).",
  "dependencies": [
    "@radix-ui/react-dialog",
    "lucide-react",
    "react-markdown",
    "remark-gfm",
    "rehype-raw",
    "rehype-sanitize"
  ],
  "files": [
    {
      "path": "registry/components/documentation-provider.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Info, X } from \"lucide-react\"\n\nimport { DocumentationMarkdown } from \"./documentation-provider/markdown\"\nimport { useDocumentation } from \"./documentation-provider/use-documentation\"\n\ntype DocumentationProviderProps = {\n  productKey?: string\n  placementKey?: string\n  endpoint?: string\n  hoverText?: string\n}\n\nfunction DocumentationProvider({\n  productKey = \"lms\",\n  placementKey = \"test-media\",\n  endpoint = \"https://drive.masaischool.com/api/document\",\n  hoverText,\n}: DocumentationProviderProps) {\n  const [open, setOpen] = React.useState(false)\n  const hoverTextId = React.useId()\n  const panelWidthPx = 420\n  const { data, isLoading, error } = useDocumentation({\n    productKey,\n    placementKey,\n    endpoint,\n    enabled: open,\n  })\n  const heading = data?.heading ?? \"Documentation\"\n  const markdown = data?.content ?? \"\"\n\n  React.useEffect(() => {\n    if (typeof window === \"undefined\") return\n\n    const isDesktop = window.matchMedia(\"(min-width: 1024px)\").matches\n    if (!isDesktop) return\n\n    const body = document.body\n    const previousMarginRight = body.style.marginRight\n    const previousTransition = body.style.transition\n\n    body.style.transition = previousTransition\n      ? `${previousTransition}, margin-right 220ms ease`\n      : \"margin-right 220ms ease\"\n    body.style.marginRight = open ? `${panelWidthPx}px` : \"0px\"\n\n    return () => {\n      body.style.marginRight = previousMarginRight\n      body.style.transition = previousTransition\n    }\n  }, [open])\n\n  React.useEffect(() => {\n    if (!open) return\n\n    function handleEscape(event: KeyboardEvent) {\n      if (event.key === \"Escape\") {\n        setOpen(false)\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleEscape)\n    return () => {\n      window.removeEventListener(\"keydown\", handleEscape)\n    }\n  }, [open])\n\n  return (\n    <>\n      <div className=\"group relative inline-flex\">\n        <button\n          type=\"button\"\n          aria-label=\"Open documentation\"\n          aria-describedby={hoverText ? hoverTextId : undefined}\n          onClick={() => setOpen(true)}\n          className=\"cursor-pointer inline-flex size-9 items-center justify-center text-foreground transition-colors hover:text-accent-foreground\"\n        >\n          <Info className=\"size-full\" />\n        </button>\n        {hoverText ? (\n          <span\n            id={hoverTextId}\n            role=\"tooltip\"\n            className=\"pointer-events-none absolute -top-2 left-1/2 z-50 -translate-x-1/2 -translate-y-full whitespace-nowrap rounded-md bg-foreground px-2 py-1 text-xs text-background opacity-0 shadow-sm transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100\"\n          >\n            {hoverText}\n          </span>\n        ) : null}\n      </div>\n\n      <aside\n        aria-hidden={!open}\n        className={`fixed top-0 right-0 z-[9999] h-full w-full max-w-[420px] border-l bg-white p-6 shadow-xl transition-transform duration-200 ${open ? \"translate-x-0\" : \"translate-x-full\"\n          }`}\n      >\n        <div className=\"mb-4 flex items-center justify-between gap-2\">\n          <h2 className=\"text-lg font-semibold\">{heading}</h2>\n          <button\n            type=\"button\"\n            aria-label=\"Close documentation\"\n            onClick={() => setOpen(false)}\n            className=\"inline-flex size-8 items-center justify-center rounded-md border transition-colors hover:bg-accent hover:text-accent-foreground\"\n          >\n            <X className=\"size-4\" />\n          </button>\n        </div>\n\n        {isLoading ? (\n          <p className=\"text-sm leading-6 text-muted-foreground\">Loading documentation...</p>\n        ) : error ? (\n          <p className=\"text-sm leading-6 text-red-600\">{error}</p>\n        ) : markdown ? (\n          <DocumentationMarkdown\n            markdown={markdown}\n            className=\"max-w-none text-sm leading-6 text-foreground [&_h1]:mt-6 [&_h1]:mb-3 [&_h1]:text-3xl [&_h1]:font-bold [&_h2]:mt-5 [&_h2]:mb-2 [&_h2]:text-2xl [&_h2]:font-semibold [&_h3]:mt-4 [&_h3]:mb-2 [&_h3]:text-xl [&_h3]:font-semibold [&_p]:my-2 [&_strong]:font-semibold [&_ul]:my-3 [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:my-3 [&_ol]:list-decimal [&_ol]:pl-6 [&_li]:my-1 [&_a]:text-blue-600 [&_a]:underline [&_img]:my-3 [&_img]:max-w-full [&_img]:rounded-md [&_img]:border [&_video]:my-3 [&_video]:max-w-full [&_video]:rounded-md [&_blockquote]:border-l-2 [&_blockquote]:pl-4 [&_blockquote]:text-muted-foreground [&_pre]:my-3 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:border [&_pre]:bg-muted/40 [&_pre]:p-3 [&_code]:rounded [&_code]:bg-muted/60 [&_code]:px-1 [&_code]:py-0.5 [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_table]:my-3 [&_table]:w-full [&_table]:border-collapse [&_th]:border [&_th]:bg-muted/50 [&_th]:px-2 [&_th]:py-1.5 [&_th]:text-left [&_td]:border [&_td]:px-2 [&_td]:py-1.5\"\n          />\n        ) : (\n          <p className=\"text-sm leading-6 text-muted-foreground\">\n            No documentation content available.\n          </p>\n        )}\n      </aside>\n    </>\n  )\n}\n\nexport { DocumentationProvider }\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/components/documentation-provider/markdown.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport ReactMarkdown from \"react-markdown\"\nimport rehypeRaw from \"rehype-raw\"\nimport rehypeSanitize, { defaultSchema } from \"rehype-sanitize\"\nimport remarkGfm from \"remark-gfm\"\nimport type { Options as SanitizeOptions } from \"rehype-sanitize\"\n\n/** Extends GitHub-style defaults with `<video>` and `<source>` for embedded media. */\nconst documentationSanitizeSchema: SanitizeOptions = {\n  ...defaultSchema,\n  tagNames: [...(defaultSchema.tagNames ?? []), \"video\"],\n  attributes: {\n    ...(defaultSchema.attributes ?? {}),\n    video: [\n      \"src\",\n      \"controls\",\n      \"poster\",\n      \"preload\",\n      \"playsInline\",\n      \"muted\",\n      \"loop\",\n      \"width\",\n      \"height\",\n    ],\n    source: [...(defaultSchema.attributes?.source ?? []), \"src\", \"type\"],\n  },\n}\n\nfunction decodeMarkdownPayload(content: string): string {\n  if (!content) return \"\"\n\n  // Some APIs return escaped markup (&lt;video ...&gt;). Decode so markdown/HTML parses.\n  if (content.includes(\"&lt;\") || content.includes(\"&gt;\")) {\n    const parser = new DOMParser()\n    const decoded = parser.parseFromString(content, \"text/html\").documentElement.textContent\n    return decoded ?? content\n  }\n\n  return content\n}\n\ntype DocumentationMarkdownProps = {\n  markdown: string\n  className?: string\n}\n\nfunction DocumentationMarkdown({ markdown, className }: DocumentationMarkdownProps) {\n  const decoded = React.useMemo(() => decodeMarkdownPayload(markdown), [markdown])\n\n  return (\n    <div className={className}>\n      <ReactMarkdown\n        remarkPlugins={[remarkGfm]}\n        rehypePlugins={[rehypeRaw, [rehypeSanitize, documentationSanitizeSchema]]}\n      >\n        {decoded}\n      </ReactMarkdown>\n    </div>\n  )\n}\n\nexport { DocumentationMarkdown, decodeMarkdownPayload }\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/components/documentation-provider/api.ts",
      "content": "import { DocumentationApiResponse } from \"./types\"\n\ntype FetchDocumentationInput = {\n  productKey: string\n  placementKey: string\n  endpoint: string\n  signal?: AbortSignal\n}\n\nasync function fetchDocumentation({\n  productKey,\n  placementKey,\n  endpoint,\n  signal,\n}: FetchDocumentationInput): Promise<DocumentationApiResponse> {\n  const url = new URL(endpoint, window.location.origin)\n  url.searchParams.set(\"productKey\", productKey)\n  url.searchParams.set(\"placementKey\", placementKey)\n\n  const response = await fetch(url.toString(), {\n    method: \"GET\",\n    signal,\n  })\n\n  if (!response.ok) {\n    throw new Error(\"Unable to fetch documentation content.\")\n  }\n\n  return (await response.json()) as DocumentationApiResponse\n}\n\nexport { fetchDocumentation }\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/components/documentation-provider/types.ts",
      "content": "export type DocumentationApiResponse = {\n  id: string\n  productKey: string\n  heading: string\n  /** GitHub-flavored markdown; may include inline HTML (e.g. `<video>`). */\n  content: string\n  placementKey: string\n  version: number\n  updatedAt: string\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/components/documentation-provider/use-documentation.ts",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { fetchDocumentation } from \"./api\"\nimport { DocumentationApiResponse } from \"./types\"\n\ntype UseDocumentationInput = {\n  productKey: string\n  placementKey: string\n  endpoint: string\n  enabled: boolean\n}\n\nfunction useDocumentation({\n  productKey,\n  placementKey,\n  endpoint,\n  enabled,\n}: UseDocumentationInput) {\n  const [data, setData] = React.useState<DocumentationApiResponse | null>(null)\n  const [isLoading, setIsLoading] = React.useState(false)\n  const [error, setError] = React.useState<string | null>(null)\n  const requestKey = `${endpoint}::${productKey}::${placementKey}`\n\n  React.useEffect(() => {\n    if (!enabled) return\n\n    const controller = new AbortController()\n\n    async function run() {\n      setIsLoading(true)\n      setError(null)\n      setData(null)\n\n      try {\n        const result = await fetchDocumentation({\n          productKey,\n          placementKey,\n          endpoint,\n          signal: controller.signal,\n        })\n        setData(result)\n      } catch (err) {\n        if (controller.signal.aborted) return\n        setError(err instanceof Error ? err.message : \"Failed to load documentation.\")\n      } finally {\n        if (!controller.signal.aborted) {\n          setIsLoading(false)\n        }\n      }\n    }\n\n    run()\n\n    return () => {\n      controller.abort()\n    }\n  }, [enabled, requestKey, productKey, placementKey, endpoint])\n\n  return { data, isLoading, error }\n}\n\nexport { useDocumentation }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}