{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "code-snippet",
  "title": "Code Snippet",
  "description": "Code Snippet from the Get IT Done design system.",
  "dependencies": [
    "class-variance-authority@^0.7.0",
    "lucide-react@^0.379.0"
  ],
  "registryDependencies": [
    "https://zero-design.itdone.de/r/code-highlight.json",
    "https://zero-design.itdone.de/r/labels-context.json",
    "https://zero-design.itdone.de/r/utils.json",
    "https://zero-design.itdone.de/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ui/code-snippet.tsx",
      "content": "'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Check, Copy } from 'lucide-react';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { codeTokenClasses, tokenizeCode, type CodeLanguage } from '@/components/ui/code-highlight';\nimport { useLabels } from '@/components/ui/labels-context';\n\n// Figma \"Code snippet\": Type Block (multi line, line numbers) | Inline (one line + copy), Color Primary | Gray, Theme Light | Dark.\nconst snippetVariants = cva('relative flex rounded-surface border border-solid', {\n  variants: {\n    tone: {\n      default: 'border-border-default bg-muted text-foreground',\n      inverse: 'border-transparent bg-foreground text-background',\n    },\n  },\n  defaultVariants: { tone: 'default' },\n});\n\n// One row of the terminal variant. `cmd` is a typed command, `meta` a quiet note, `agent` a name with a status column and an optional note, `route` an indented hand-over line.\nexport type CodeSnippetTerminalLine =\n  | { type: 'cmd'; text: React.ReactNode }\n  | { type: 'meta'; text: React.ReactNode }\n  | { type: 'agent'; name: React.ReactNode; status: React.ReactNode; note?: React.ReactNode; tone?: 'muted' | 'success' | 'warning' }\n  | { type: 'route'; text: React.ReactNode };\n\nexport interface CodeSnippetProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,\n    VariantProps<typeof snippetVariants> {\n  // Source text for `block` and `inline`. The `terminal` variant renders `lines` instead.\n  code?: string;\n  // `block` shows every line with an optional gutter; `inline` is a single line with the copy button. `terminal` is an illustrated terminal window with structured rows (see `lines`).\n  variant?: 'block' | 'inline' | 'terminal';\n  // Terminal only. The rows of the window.\n  terminalLines?: CodeSnippetTerminalLine[];\n  // Terminal only. Title in the title bar, in mono.\n  terminalTitle?: React.ReactNode;\n  // Terminal only. Slot at the right end of the title bar, for example a Badge.\n  terminalAction?: React.ReactNode;\n  // Terminal only. Caption under the rows.\n  terminalCaption?: React.ReactNode;\n  // Terminal only. Sizes the name column of agent rows to its content (up to 24rem) and aligns the status column across rows. Default is a fixed 160px name column.\n  terminalWide?: boolean;\n  // Terminal only. Rows fade in once, one after the other (90 ms apart). Default on, skipped for reduced motion.\n  terminalAnimate?: boolean;\n  // Accessible name of the code region, for example \"TypeScript example\". Defaults to \"Code\".\n  language?: string;\n  lineNumbers?: boolean;\n  // Hides the copy button.\n  copy?: boolean;\n  copyLabel?: string;\n  copiedLabel?: string;\n  onCopied?: (code: string) => void;\n  // Opt-in syntax highlighting for the given language. Omit for plain code.\n  highlight?: CodeLanguage;\n  // Block only. Shows a header row with this label on the left and the copy button on the right (Figma Sheet block Code block).\n  label?: React.ReactNode;\n  // Block only. `block` uses the code block type role (12/19, Figma Code block). `compact` keeps the earlier smaller code size.\n  textSize?: 'block' | 'compact';\n}\n\n// The snippet clips its content (overflow-hidden), so the focus ring of the scrollable code area is drawn inside it.\nconst focusRingInset = ['focus-visible:outline-none', 'focus-visible:ring-focus', 'focus-visible:ring-inset', 'focus-visible:ring-ring-default'];\n\nconst terminalTone = {\n  muted: 'text-text-subtle',\n  success: 'text-text-success',\n  warning: 'text-text-warning',\n} as const;\n\ninterface CodeSnippetTerminalProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {\n  lines: CodeSnippetTerminalLine[];\n  title?: React.ReactNode;\n  titleSlot?: React.ReactNode;\n  caption?: React.ReactNode;\n  wide: boolean;\n  animate: boolean;\n}\n\n// Staggered fade-in per row. Reduced motion shows every row at once (motion-safe only).\nconst rowMotion = 'motion-safe:animate-in motion-safe:fade-in-0 motion-safe:fill-mode-backwards motion-safe:duration-300';\nconst ROW_STAGGER_MS = 90;\n\nconst CodeSnippetTerminal = React.forwardRef<HTMLElement, CodeSnippetTerminalProps>(\n  ({ className, lines, title, titleSlot, caption, wide, animate, ...props }, ref) => (\n    <figure\n      ref={ref}\n      data-variant=\"terminal\"\n      className={cn('m-0 flex flex-col overflow-hidden rounded-card border border-solid border-border-default bg-background-subtle text-foreground', className)}\n      {...props}\n    >\n      <div className=\"flex min-h-control-md items-center gap-3 border-0 border-b border-solid border-border-subtle px-4 py-2\">\n        <span aria-hidden=\"true\" className=\"flex shrink-0 gap-2\">\n          <span className=\"h-2 w-2 rounded-full bg-border-default\" />\n          <span className=\"h-2 w-2 rounded-full bg-border-default\" />\n          <span className=\"h-2 w-2 rounded-full bg-border-default\" />\n        </span>\n        <span className=\"typography-code min-w-0 flex-1 truncate text-text-subtle\">{title}</span>\n        {titleSlot ? <span className=\"shrink-0\">{titleSlot}</span> : null}\n      </div>\n      <ol className={cn('typography-code m-0 flex list-none flex-col gap-2 p-4', wide && 'sm:grid sm:[grid-template-columns:fit-content(24rem)_auto_minmax(0,1fr)]')}>\n        {lines.map((line, index) => {\n          const motion = animate ? rowMotion : undefined;\n          const style = animate ? { animationDelay: `${index * ROW_STAGGER_MS}ms` } : undefined;\n          if (line.type === 'agent') {\n            return (\n              <li key={index} data-line=\"agent\" style={style} className={cn('flex flex-wrap items-baseline gap-x-4', wide && 'sm:col-span-full sm:grid sm:[grid-template-columns:subgrid]', motion)}>\n                <span className={cn('min-w-0 flex-1 text-foreground sm:flex-none', !wide && 'sm:w-40')}>{line.name}</span>\n                <span className={cn('text-right sm:text-left', wide ? 'sm:min-w-16' : 'sm:w-16', terminalTone[line.tone ?? 'muted'])}>{line.status}</span>\n                {line.note ? <span className=\"basis-full pl-4 text-text-subtle sm:min-w-0 sm:flex-1 sm:basis-0 sm:pl-0\">{line.note}</span> : null}\n              </li>\n            );\n          }\n          if (line.type === 'route') {\n            return (\n              <li key={index} data-line=\"route\" style={style} className={cn('pl-4 text-text-warning', wide && 'sm:col-span-full', motion)}>\n                {line.text}\n              </li>\n            );\n          }\n          if (line.type === 'meta') {\n            return (\n              <li key={index} data-line=\"meta\" style={style} className={cn('text-text-subtle', wide && 'sm:col-span-full', motion)}>\n                {line.text}\n              </li>\n            );\n          }\n          return (\n            <li key={index} data-line=\"cmd\" style={style} className={cn('text-foreground', wide && 'sm:col-span-full', motion)}>\n              <span aria-hidden=\"true\" className=\"text-text-subtle\">\n                {'> '}\n              </span>\n              {line.text}\n            </li>\n          );\n        })}\n      </ol>\n      {caption ? <figcaption className=\"typography-text-extra-small border-0 border-t border-solid border-border-subtle px-4 py-2 text-text-subtle\">{caption}</figcaption> : null}\n    </figure>\n  ),\n);\nCodeSnippetTerminal.displayName = 'CodeSnippetTerminal';\n\nconst CodeSnippet = React.forwardRef<HTMLDivElement, CodeSnippetProps>(\n  (\n    {\n      className,\n      code: codeProp,\n      variant = 'block',\n      terminalLines,\n      terminalTitle,\n      terminalAction,\n      terminalCaption,\n      terminalWide = false,\n      terminalAnimate = true,\n      tone,\n      language,\n      lineNumbers = true,\n      copy = true,\n      copyLabel: copyLabelProp,\n      copiedLabel: copiedLabelProp,\n      onCopied,\n      highlight,\n      label,\n      textSize = 'block',\n      ...props\n    },\n    ref,\n  ) => {\n    const code = codeProp ?? '';\n    const l = useLabels();\n    const copyLabel = copyLabelProp ?? l.copyCode;\n    const copiedLabel = copiedLabelProp ?? l.copied;\n    const [copied, setCopied] = React.useState(false);\n    const timer = React.useRef<ReturnType<typeof setTimeout>>();\n    React.useEffect(() => () => clearTimeout(timer.current), []);\n\n    const handleCopy = async () => {\n      try {\n        await navigator.clipboard?.writeText(code);\n      } catch {\n        return;\n      }\n      onCopied?.(code);\n      setCopied(true);\n      clearTimeout(timer.current);\n      timer.current = setTimeout(() => setCopied(false), 2000);\n    };\n\n    if (variant === 'terminal') {\n      return (\n        <CodeSnippetTerminal\n          ref={ref as React.Ref<HTMLElement>}\n          className={className}\n          lines={terminalLines ?? []}\n          title={terminalTitle}\n          titleSlot={terminalAction}\n          caption={terminalCaption}\n          wide={terminalWide}\n          animate={terminalAnimate}\n          {...(props as React.HTMLAttributes<HTMLElement>)}\n        />\n      );\n    }\n\n    const inverse = tone === 'inverse';\n    const content = highlight\n      ? tokenizeCode(code, highlight).map((token, index) => (\n          <span\n            key={index}\n            data-token={token.type}\n            className={codeTokenClasses[inverse ? 'inverse' : 'default'][token.type] || undefined}\n          >\n            {token.text}\n          </span>\n        ))\n      : code;\n    const button = copy ? (\n      <button\n        type=\"button\"\n        onClick={handleCopy}\n        aria-label={copied ? copiedLabel : copyLabel}\n        className={cn(\n          'inline-flex h-control-sm w-control-sm shrink-0 items-center justify-center rounded-item transition-colors motion-reduce:transition-none',\n          inverse\n            ? 'text-background hover:bg-background/10'\n            : 'text-icon-subtle hover:bg-background hover:text-icon-default',\n          focusRingInset,\n        )}\n      >\n        {copied ? (\n          <Check aria-hidden=\"true\" className=\"h-icon-xs w-icon-xs\" />\n        ) : (\n          <Copy aria-hidden=\"true\" className=\"h-icon-xs w-icon-xs\" />\n        )}\n      </button>\n    ) : null;\n    const status = (\n      <span role=\"status\" className=\"sr-only\">\n        {copied ? copiedLabel : ''}\n      </span>\n    );\n\n    if (variant === 'inline') {\n      return (\n        <div\n          ref={ref}\n          data-variant=\"inline\"\n          className={cn(snippetVariants({ tone }), 'items-center gap-2 px-3 py-1', className)}\n          {...props}\n        >\n          <code\n            className={cn('min-w-0 flex-1 overflow-x-auto whitespace-nowrap rounded-item typography-code font-normal', focusRingInset)}\n            tabIndex={0}\n            aria-label={language ?? l.code}\n          >\n            {content}\n          </code>\n          {button}\n          {status}\n        </div>\n      );\n    }\n\n    const lines = code.split('\\n');\n    const typeRole = textSize === 'compact' ? 'typography-code' : 'typography-code-block';\n    const hasHeader = label !== undefined && label !== null && label !== false;\n    const gutter = lineNumbers ? (\n      <pre\n        aria-hidden=\"true\"\n        data-gutter=\"\"\n        className={cn(\n          'select-none border-0 border-r border-solid px-3 py-4 text-right font-normal tabular-nums',\n          typeRole,\n          inverse\n            ? 'border-background/20 text-text-inverse-subtle'\n            : 'border-border-default bg-background-neutral-subtle text-text-subtle-on-muted',\n        )}\n      >\n        {lines.map((_, index) => index + 1).join('\\n')}\n      </pre>\n    ) : null;\n    const codeArea = (\n      <pre\n        tabIndex={0}\n        aria-label={language ?? l.code}\n        className={cn(\n          'min-w-0 flex-1 overflow-x-auto py-4 pl-4 font-normal',\n          typeRole,\n          hasHeader ? 'pr-4' : 'pr-12',\n          focusRingInset,\n        )}\n      >\n        <code>{content}</code>\n      </pre>\n    );\n\n    if (hasHeader) {\n      return (\n        <div\n          ref={ref}\n          data-variant=\"block\"\n          data-header=\"\"\n          className={cn(snippetVariants({ tone }), 'flex-col overflow-hidden', className)}\n          {...props}\n        >\n          <div\n            className={cn(\n              'flex h-control-md items-center gap-2 border-0 border-b border-solid pl-4 pr-2',\n              inverse ? 'border-background/20' : 'border-border-default',\n            )}\n          >\n            <span\n              data-code-label=\"\"\n              className={cn('typography-text-extra-small min-w-0 flex-1 truncate', inverse ? 'text-text-inverse-subtle' : 'text-text-subtle-on-muted')}\n            >\n              {label}\n            </span>\n            {button}\n          </div>\n          <div className=\"flex min-w-0 items-stretch\">\n            {gutter}\n            {codeArea}\n          </div>\n          {status}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        data-variant=\"block\"\n        className={cn(snippetVariants({ tone }), 'items-stretch overflow-hidden', className)}\n        {...props}\n      >\n        {gutter}\n        {codeArea}\n        {button ? <div className=\"absolute right-2 top-2\">{button}</div> : null}\n        {status}\n      </div>\n    );\n  },\n);\nCodeSnippet.displayName = 'CodeSnippet';\n\nexport { CodeSnippet, snippetVariants };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}