{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "code-card",
  "type": "registry:ui",
  "title": "Code card",
  "description": "Code as a glass object: numbered, tinted lines (at most 18) on a dark screen under a CODE · LANG · N LINES tag.",
  "dependencies": [],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/blocks/code-card/code-card.tsx",
      "type": "registry:ui",
      "target": "components/metalui/blocks/code-card/code-card.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { GlassFace } from '../../components/glass-face/glass-face';\nimport { Chip } from '../../components/chip/chip';\n\n/* ─────────────────────────────────────────────────────────\n * CODE CARD (the reference design's .codeobj): a custom block\n *   GlassFace › Screen (the code-card recipe) › Chip(glass, LED code) CODE · LANG · N LINES + numbered, tinted lines\n * Custom because the tinted code is drawn by no component. At most 18 lines show; the tag counts all.\n * A diff fence tints whole lines: added a faint green band, removed a faint red one, each with its\n * sign in the band's colour. The classes come from the core (one per line); without them a diff\n * fence is classed the core's way here (+ adds, - removes, +++ and --- are headers).\n * ───────────────────────────────────────────────────────── */\n\n/* The screen replaces the glass face's; the code is the recipe's type and ink, and its tinted spans\n * (written by tintCode) take the recipe's tints. */\nconst CARD = 'mu-codecard min-w-code-card-min-width max-w-code-card-max-width';\nconst SCREEN = 'mu-codecard-screen pt-code-card-screen-pad-top px-code-card-screen-pad-x pb-code-card-screen-pad-bottom !recipe-code-card-screen';\nconst TAG = 'mu-codecard-tag !absolute left-code-card-chip-inset top-code-card-chip-inset';\nconst CODE = 'mu-codecard-code m-0 overflow-hidden whitespace-pre type-code-card-code text-code-card-code-ink [&_.mu-code-ln]:inline-block [&_.mu-code-ln]:w-code-card-code-number [&_.mu-code-ln]:text-code-card-tint-line [&_.mu-code-kw]:text-code-card-tint-keyword [&_.mu-code-ty]:text-code-card-tint-type [&_.mu-code-st]:text-code-card-tint-string [&_.mu-code-cm]:text-code-card-tint-comment [&_.mu-code-nu]:text-code-card-tint-number [&_.mu-code-row]:block [&_.mu-code-row[data-diff=add]]:bg-code-card-diff-add-bg [&_.mu-code-row[data-diff=remove]]:bg-code-card-diff-remove-bg [&_[data-diff=add]_.mu-code-sign]:text-code-card-diff-add-ink [&_[data-diff=remove]_.mu-code-sign]:text-code-card-diff-remove-ink';\n\nconst KEYWORDS = /\\b(func|let|var|if|else|return|for|in|while|const|function|import|export|from|class|struct|enum|case|switch|guard|def|async|await|new|true|false|nil|null|self|this)\\b/g;\nconst esc = (s: string) => s.replace(/[&<>\"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '\"': '&quot;', \"'\": '&#39;' })[c]!);\n\n/** The reference tinting, on escaped text: strings, a trailing comment, keywords, types, numbers. */\n/* One pass over each escaped line: every token is tinted once, so no pattern can match inside the\n * markup another inserted. Order is priority: a string or a comment wins over what is inside it. */\nconst TOKEN = new RegExp(\n  [\n    '(&quot;.*?&quot;|&#39;.*?&#39;)', // 1 string\n    '(\\\\/\\\\/.*$|#(?![\\\\d]).*$)', // 2 comment\n    `${KEYWORDS.source}`, // 3 keyword\n    '\\\\b([A-Z][A-Za-z0-9]+)\\\\b', // 4 type\n    '(?<![\\\\w#&])(\\\\d+(?:\\\\.\\\\d+)?)\\\\b', // 5 number (not an entity's digits)\n  ].join('|'),\n  'g',\n);\nconst CLASS = ['', 'mu-code-st', 'mu-code-cm', 'mu-code-kw', 'mu-code-ty', 'mu-code-nu'];\n\nexport type DiffClass = 'add' | 'remove' | 'context';\n\n/** The core's diff classes, for a host without the core: + adds, - removes, +++ and --- are headers. */\nexport function diffClasses(code: string): DiffClass[] {\n  return code.split('\\n').map((l) => (l.startsWith('+') && !l.startsWith('+++') ? 'add' : l.startsWith('-') && !l.startsWith('---') ? 'remove' : 'context'));\n}\n\n/** Each line as a row: its number, then its tinted text; a diff line carries its class. */\nexport function tintCode(code: string, maxLines = 18, diff?: DiffClass[]) {\n  return code\n    .split('\\n')\n    .slice(0, maxLines)\n    .map((l, i) => {\n      const d = diff?.[i];\n      const signed = d && d !== 'context';\n      const body = signed ? l.slice(1) : l;\n      const h = esc(body).replace(TOKEN, (m, ...groups) => {\n        const k = groups.slice(0, 5).findIndex((g) => g !== undefined) + 1;\n        return k ? `<span class=\"${CLASS[k]}\">${m}</span>` : m;\n      });\n      const sign = signed ? `<span class=\"mu-code-sign\">${esc(l[0])}</span>` : '';\n      return `<span class=\"mu-code-row\"${d ? ` data-diff=\"${d}\"` : ''}><span class=\"mu-code-ln\">${i + 1}</span>${sign}${h || ' '}</span>`;\n    })\n    .join('');\n}\n\nexport interface CodeCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  code: string;\n  /** The language, shown in the tag: \"swift\". */\n  lang?: string;\n  /** Lines shown (the tag counts all). Default 18. */\n  maxLines?: number;\n  /** The tag's text. Default: CODE · LANG · N LINES. */\n  tag?: string;\n  /** A diff fence's class per line, from the core. Default for lang \"diff\": classed here the core's way. */\n  diff?: DiffClass[];\n}\n\n/** Code as a glass object: numbered, tinted lines under a tag. */\nexport const CodeCard = React.forwardRef<HTMLDivElement, CodeCardProps>(function CodeCard({ code, lang, maxLines = 18, tag, diff, className, ...props }, ref) {\n  const n = code.split('\\n').length;\n  const label = tag ?? `CODE${lang ? ' · ' + lang.toUpperCase() : ''} · ${n} ${n === 1 ? 'LINE' : 'LINES'}`;\n  return (\n    <GlassFace.Root ref={ref} className={className ? `${CARD} ${className}` : CARD} {...props}>\n      <GlassFace.Screen className={SCREEN}>\n        <Chip variant=\"glass\" className={TAG}>\n          <Chip.Lead led=\"code\" />\n          <Chip.Text>{label}</Chip.Text>\n        </Chip>\n        <pre className={CODE} dangerouslySetInnerHTML={{ __html: tintCode(code, maxLines, diff ?? (lang === 'diff' ? diffClasses(code) : undefined)) }} />\n      </GlassFace.Screen>\n    </GlassFace.Root>\n  );\n});\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/code-card.md. SwiftUI: MetalCodeCard in the MetalUI Swift package."
}