{
  "name": "code-surface",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "code-surface.tsx",
      "content": "\"use client\";\r\n\r\nimport { css, themeVars as theme } from \"@yugnex/core\";\r\nimport { useState, type ReactNode } from \"react\";\r\n\r\nconst rootClass = css({\r\n  borderRadius: theme.radius.md,\r\n  border: `1px solid ${theme.color.border}`,\r\n  backgroundColor: theme.color.muted,\r\n  overflow: \"hidden\",\r\n  fontFamily: theme.fontFamily.mono,\r\n});\r\n\r\nconst headerClass = css({\r\n  display: \"flex\",\r\n  alignItems: \"center\",\r\n  justifyContent: \"space-between\",\r\n  gap: theme.space[2],\r\n  padding: `${theme.space[2]} ${theme.space[3]}`,\r\n  borderBottom: `1px solid ${theme.color.border}`,\r\n  fontSize: theme.fontSize.xs,\r\n  color: theme.color.mutedForeground,\r\n});\r\n\r\nconst filenameClass = css({\r\n  overflow: \"hidden\",\r\n  textOverflow: \"ellipsis\",\r\n  whiteSpace: \"nowrap\",\r\n});\r\n\r\nconst copyButtonClass = css({\r\n  display: \"inline-flex\",\r\n  alignItems: \"center\",\r\n  gap: theme.space[1],\r\n  padding: `${theme.space[1]} ${theme.space[2]}`,\r\n  borderRadius: theme.radius.sm,\r\n  border: `1px solid ${theme.color.border}`,\r\n  backgroundColor: theme.color.card,\r\n  color: theme.color.foreground,\r\n  fontFamily: theme.fontFamily.sans,\r\n  fontSize: theme.fontSize.xs,\r\n  cursor: \"pointer\",\r\n  flexShrink: 0,\r\n  transitionProperty: \"background-color, border-color\",\r\n  transitionDuration: theme.duration.fast,\r\n  \"&:hover\": { borderColor: theme.color.ring },\r\n  \"&:focus-visible\": { outline: `2px solid ${theme.color.ring}`, outlineOffset: \"1px\" },\r\n});\r\n\r\nconst scrollClass = css({\r\n  overflowX: \"auto\",\r\n  padding: theme.space[3],\r\n});\r\n\r\nconst preClass = css({\r\n  margin: 0,\r\n  fontSize: theme.fontSize.xs,\r\n  lineHeight: 1.6,\r\n  color: theme.color.foreground,\r\n});\r\n\r\nconst lineClass = css({\r\n  display: \"grid\",\r\n  gridTemplateColumns: \"auto 1fr\",\r\n  gap: theme.space[3],\r\n});\r\n\r\nconst lineNoClass = css({\r\n  userSelect: \"none\",\r\n  textAlign: \"right\",\r\n  color: theme.color.mutedForeground,\r\n  fontVariantNumeric: \"tabular-nums\",\r\n});\r\n\r\nexport interface CodeSurfaceProps {\r\n  code: string;\r\n  /** Shown in the header, e.g. \"app/page.tsx\". */\r\n  filename?: ReactNode;\r\n  /** Shown on the right of the header when no filename is set, e.g. \"bash\". */\r\n  language?: string;\r\n  showLineNumbers?: boolean;\r\n  showCopy?: boolean;\r\n  className?: string;\r\n}\r\n\r\n/**\r\n * A code display surface with a filename header, optional line numbers, and a\r\n * copy button — the shape LLM answers and docs both need.\r\n *\r\n * Deliberately does **not** syntax highlight: doing that properly means\r\n * shipping a grammar/tokenizer, which would dwarf this component and drag a\r\n * dependency into a library that has none. Highlight upstream (Shiki server-side,\r\n * for instance) and pass the result into `children` of your own wrapper, or use\r\n * this as-is for plain, readable code.\r\n */\r\nexport function CodeSurface({\r\n  code,\r\n  filename,\r\n  language,\r\n  showLineNumbers = false,\r\n  showCopy = true,\r\n  className,\r\n}: CodeSurfaceProps) {\r\n  const [copied, setCopied] = useState(false);\r\n  const lines = code.replace(/\\n$/, \"\").split(\"\\n\");\r\n\r\n  async function copy() {\r\n    try {\r\n      await navigator.clipboard.writeText(code);\r\n      setCopied(true);\r\n      setTimeout(() => setCopied(false), 1600);\r\n    } catch {\r\n      // Clipboard can reject (insecure context, denied permission). Leave the\r\n      // label unchanged rather than claiming a copy that did not happen.\r\n    }\r\n  }\r\n\r\n  const showHeader = Boolean(filename || language || showCopy);\r\n\r\n  return (\r\n    <div className={className ? `${rootClass} ${className}` : rootClass}>\r\n      {showHeader ? (\r\n        <div className={headerClass}>\r\n          <span className={filenameClass}>{filename ?? language ?? \"\"}</span>\r\n          {showCopy ? (\r\n            <button type=\"button\" className={copyButtonClass} onClick={copy}>\r\n              {copied ? \"Copied\" : \"Copy\"}\r\n            </button>\r\n          ) : null}\r\n        </div>\r\n      ) : null}\r\n      <div className={scrollClass}>\r\n        <pre className={preClass}>\r\n          <code>\r\n            {showLineNumbers\r\n              ? lines.map((line, i) => (\r\n                  <span className={lineClass} key={i}>\r\n                    <span className={lineNoClass}>{i + 1}</span>\r\n                    <span>{line || \" \"}</span>\r\n                  </span>\r\n                ))\r\n              : code}\r\n          </code>\r\n        </pre>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ]
}