{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "markdown-block",
  "type": "registry:component",
  "title": "MarkdownBlock",
  "description": "Assistant markdown output rendered to prose, with a header and copy-source action.",
  "dependencies": [],
  "registryDependencies": [
    "https://control-ui.dev/r/code.json",
    "https://control-ui.dev/r/core.json",
    "https://control-ui.dev/r/markdown.json",
    "https://control-ui.dev/r/use-copy-to-clipboard.json"
  ],
  "files": [
    {
      "path": "src/registry/knob-contracts/markdown-block-knobs.ts",
      "target": "@components/control-ui/knob-contracts/markdown-block-knobs.ts",
      "type": "registry:component",
      "content": "// Generated from src/registry/sources/control-ui/recipes/markdown-block.css by scripts/gen-knob-contracts.ts — run `bun run sync:knobs`.\nexport const markdownBlockKnobs = [\n  \"--cui-markdown-block-radius\",\n  \"--cui-markdown-block-background\",\n  \"--cui-markdown-block-border-color\",\n  \"--cui-markdown-block-shadow\",\n  \"--cui-markdown-block-header-border-color\",\n  \"--cui-markdown-block-icon-background\",\n] as const;\nexport type MarkdownBlockKnobStyle = Partial<Record<(typeof markdownBlockKnobs)[number], string>>;\n"
    },
    {
      "path": "src/registry/sources/control-ui/markdown-block.tsx",
      "target": "@components/control-ui/markdown-block.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\nimport type { ComponentProps, CSSProperties } from \"react\";\nimport { createContext, useContext } from \"react\";\nimport type { MarkdownBlockKnobStyle } from \"@/components/control-ui/knob-contracts/markdown-block-knobs\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\nimport { CodeCopy, type CodeCopyProps } from \"@/components/control-ui/ui/code\";\nimport { Markdown } from \"@/components/control-ui/ui/markdown\";\n\nconst MarkdownBlockContext = createContext<string | null>(null);\n\nfunction useMarkdownBlockContext() {\n  const code = useContext(MarkdownBlockContext);\n  if (code === null) throw new Error(\"MarkdownBlock compound components must be rendered inside <MarkdownBlock>.\");\n  return code;\n}\n\nexport type MarkdownBlockProps = Omit<ComponentProps<\"figure\">, \"style\"> & {\n  code: string;\n  style?: CSSProperties & MarkdownBlockKnobStyle;\n};\n\nexport function MarkdownBlock({ code, className, children, ...props }: MarkdownBlockProps) {\n  return (\n    <MarkdownBlockContext.Provider value={code}>\n      <figure\n        data-control-ui=\"markdown-block\"\n        data-control-family=\"markdown-block\"\n        data-slot=\"root\"\n        data-surface=\"panel\"\n        className={cn(\"my-4 overflow-hidden\", className)}\n        {...props}\n      >\n        {children}\n      </figure>\n    </MarkdownBlockContext.Provider>\n  );\n}\n\nexport type MarkdownBlockHeaderProps = Omit<ComponentProps<\"figcaption\">, \"style\"> & {\n  style?: CSSProperties & MarkdownBlockKnobStyle;\n};\n\nexport function MarkdownBlockHeader({ className, ...props }: MarkdownBlockHeaderProps) {\n  return (\n    <figcaption\n      data-control-ui=\"markdown-block\"\n      data-control-family=\"markdown-block\"\n      data-slot=\"header\"\n      className={cn(\"sticky top-0 z-10 flex items-center justify-between gap-3 px-4 py-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type MarkdownBlockTitleProps = Omit<ComponentProps<\"div\">, \"style\"> & {\n  style?: CSSProperties & MarkdownBlockKnobStyle;\n};\n\nexport function MarkdownBlockTitle({ children = \"Markdown\", className, ...props }: MarkdownBlockTitleProps) {\n  return (\n    <div\n      data-control-ui=\"markdown-block\"\n      data-control-family=\"markdown-block\"\n      data-slot=\"title\"\n      className={cn(\"flex min-w-0 items-center gap-2\", className)}\n      {...props}\n    >\n      <span\n        aria-hidden=\"true\"\n        data-control-ui=\"markdown-block\"\n        data-control-family=\"markdown-block\"\n        data-slot=\"title-icon\"\n        className=\"flex size-5 items-center justify-center\"\n      >\n        MD\n      </span>\n      <span className=\"truncate\">{children}</span>\n    </div>\n  );\n}\n\nexport type MarkdownBlockCopyProps = Omit<CodeCopyProps, \"value\">;\n\n// IS CodeCopy, so markdown block's copy and a code block's copy can never drift\nexport function MarkdownBlockCopy({ \"aria-label\": ariaLabel = \"Copy markdown\", ...props }: MarkdownBlockCopyProps) {\n  const code = useMarkdownBlockContext();\n  return <CodeCopy value={code} aria-label={ariaLabel} {...props} />;\n}\n\nexport type MarkdownBlockContentProps = ComponentProps<\"div\"> & { style?: CSSProperties & MarkdownBlockKnobStyle };\n\nexport function MarkdownBlockContent({ children, className, ...props }: MarkdownBlockContentProps) {\n  const code = useMarkdownBlockContext();\n\n  return (\n    <div\n      data-control-ui=\"markdown-block\"\n      data-control-family=\"markdown-block\"\n      data-slot=\"content\"\n      className={cn(\"max-h-[420px] overflow-auto mask-y-from-[calc(100%_-_var(--scroll-fade-size))] p-4\", className)}\n      {...props}\n    >\n      {children ?? <Markdown content={code} />}\n    </div>\n  );\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/markdown-block.css",
      "target": "@components/control-ui/styles/recipes/markdown-block.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"markdown-block\"][data-slot=\"root\"]) {\n    --cui-markdown-block-radius: var(--radius-panel);\n    --cui-markdown-block-background: var(--background);\n    --cui-markdown-block-border-color: var(--border);\n    --cui-markdown-block-shadow: var(--shadow-sm);\n    --cui-markdown-block-header-border-color: var(--border);\n    --cui-markdown-block-icon-background: oklch(from var(--foreground) l c h / 0.08);\n    background: var(--cui-markdown-block-background);\n    border: 1px solid var(--cui-markdown-block-border-color);\n    border-radius: var(--cui-markdown-block-radius);\n    box-shadow: var(--cui-markdown-block-shadow);\n  }\n\n  :where([data-control-family=\"markdown-block\"][data-slot=\"header\"]) {\n    border-bottom: 1px solid var(--cui-markdown-block-header-border-color);\n  }\n\n  :where([data-control-family=\"markdown-block\"][data-slot=\"title\"]) {\n    font-size: var(--text-sm);\n    font-weight: var(--font-weight-medium);\n  }\n\n  :where([data-control-family=\"markdown-block\"][data-slot=\"title-icon\"]) {\n    background: var(--cui-markdown-block-icon-background);\n    border-radius: var(--radius-md);\n    font-size: var(--text-micro);\n  }\n}\n\n@property --cui-markdown-block-radius {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-markdown-block-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-markdown-block-border-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-markdown-block-shadow {\n  syntax: \"*\";\n  inherits: true;\n}\n\n@property --cui-markdown-block-header-border-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-markdown-block-icon-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n"
    }
  ],
  "css": {
    "@import \"../components/control-ui/styles/recipes/markdown-block.css\"": {}
  },
  "meta": {}
}