63:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollBar"] 67:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 69:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:"#22863a" 54:["$","div","code-token-punctuation",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","code-token-punctuation",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#24292e"}]]}] 55:["$","div","code-token-definition",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","code-token-definition",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#24292e"}]]}] 56:["$","div","code-token-function",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","code-token-function",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#6f42c1"}]]}] 57:["$","div","code-token-string",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","code-token-string",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#032f62"}]]}] 58:["$","div","code-token-static",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","code-token-static",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#005cc5"}]]}] 59:["$","div","code-token-variable",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","code-token-variable",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#e36209"}]]}] 5a:["$","div","code-token-builtin",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","code-token-builtin",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#d73a49"}]]}] 5b:["$","div","code-token-class-name",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","code-token-class-name",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#6f42c1"}]]}] 5c:["$","div","copy-button-hover-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","copy-button-hover-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"color-mix(in oklab, var(--code-fg) 7%, var(--code-bg))"}]]}] 5d:["$","div","copy-button-rest-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","copy-button-rest-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"color-mix(in oklab, var(--code-fg) 10%, var(--code-bg))"}]]}] 5e:["$","$L63",null,{"orientation":"horizontal"}] 5f:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L52",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","code-token-comment",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","code-token-comment",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#757575"}]]}],["$","div","code-token-keyword",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","code-token-keyword",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#77b7d7"}]]}],["$","div","code-token-property",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","code-token-property",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#77b7d7"}]]}],["$","div","code-token-tag",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","code-token-tag",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#dfab5c"}]]}],["$","div","code-token-punctuation",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","code-token-punctuation",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}],["$","div","code-token-definition",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","code-token-definition",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#86d9ca"}]]}],["$","div","code-token-function",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","code-token-function",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#86d9ca"}]]}],["$","div","code-token-string",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","code-token-string",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#977cdc"}]]}],["$","div","code-token-static",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","code-token-static",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ff6658"}]]}],["$","div","code-token-variable",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","code-token-variable",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}],["$","div","code-token-builtin",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","code-token-builtin",":"]}]}],"$L64"]}],"$L65"]}],"$L66"]}]}]]}] 60:null 68:T5ac,.code-adaptive-theme { --code-fg: var(--code-fg-l); --code-bg: var(--code-bg-l); --code-token-comment: var(--code-token-comment-l); --code-token-keyword: var(--code-token-keyword-l); --code-token-property: var(--code-token-property-l); --code-token-tag: var(--code-token-tag-l); --code-token-punctuation: var(--code-token-punctuation-l); --code-token-definition: var(--code-token-definition-l); --code-token-function: var(--code-token-function-l); --code-token-string: var(--code-token-string-l); --code-token-static: var(--code-token-static-l); --code-token-variable: var(--code-token-variable-l); --code-token-builtin: var(--code-token-builtin-l); --code-token-class-name: var(--code-token-class-name-l); } .dark .code-adaptive-theme { --code-fg: var(--code-fg-d); --code-bg: var(--code-bg-d); --code-token-comment: var(--code-token-comment-d); --code-token-keyword: var(--code-token-keyword-d); --code-token-property: var(--code-token-property-d); --code-token-tag: var(--code-token-tag-d); --code-token-punctuation: var(--code-token-punctuation-d); --code-token-definition: var(--code-token-definition-d); --code-token-function: var(--code-token-function-d); --code-token-string: var(--code-token-string-d); --code-token-static: var(--code-token-static-d); --code-token-variable: var(--code-token-variable-d); --code-token-builtin: var(--code-token-builtin-d); --code-token-class-name: var(--code-token-class-name-d); }61:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L67",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"$68"}]}]]}] 6a:T7512,"use client" import * as React from "react" import { useEffect, useState } from "react" import { Highlight } from "prism-react-renderer" import type { PrismTheme } from "prism-react-renderer" // Side-effect import: registers extra Prism grammars (bash, docker, // java, ruby, php, …) on the shared instance. Must come before any // ```` usage in this module. import "@/lib/prism-languages" import { cn } from "@/lib/utils" import { copyToClipboard } from "@/lib/clipboard" import { getIconForFile } from "@/components/ui/code-icons" import { Button } from "@/components/ui/button" type PackageManager = "npm" | "yarn" | "pnpm" | "bun" /** Every group the two built-in Prism palettes used to carry as hardcoded hex, * now a named slot in the CSS palette (`--code-token-`, declared in * globals.css §8). One list drives two things: the built-in theme below * (each group's color is just `var(--code-token-)`, resolved by the * `.dark` class with no JS), and `resolveGroupColor` — which walks a * consumer-supplied `adaptiveTheme` palette to find the color it assigns * each group, so that palette can be resolved the same CSS-only way. */ const tokenGroups: { key: string; types: string[]; fontStyle?: "italic" }[] = [ { key: "comment", types: ["comment"], fontStyle: "italic" }, { key: "keyword", types: ["keyword"] }, { key: "property", types: ["property", "property-access", "attr-name"] }, { key: "tag", types: ["tag"] }, { key: "punctuation", types: ["punctuation", "symbol", "dom", "operator"] }, { key: "definition", types: ["definition"] }, { key: "function", types: ["function"] }, { key: "string", types: ["string", "char", "attr-value"] }, { key: "static", types: ["static", "number"] }, { key: "variable", types: ["variable", "parameter"] }, { key: "builtin", types: ["builtin", "function-definition"] }, { key: "class-name", types: ["class-name"] }, ] /** The built-in syntax palette. Every color is a CSS variable reference — * light values on `:root`, dark overrides on `.dark` (globals.css §8) — so * the right palette is already in effect before this ever renders. Merging * the old separate dark/light `PrismTheme`s into one is what makes that * possible: previously the choice of *which* theme object to use lived in * React state, guaranteeing a light-palette frame on every mount. */ const builtinTheme: PrismTheme = { plain: { color: "var(--code-fg)", backgroundColor: "var(--code-bg)" }, styles: tokenGroups.map(({ key, types, fontStyle }) => ({ types, style: { color: `var(--code-token-${key})`, ...(fontStyle ? { fontStyle } : {}), }, })), } /** The color a `PrismTheme` assigns a token group, mirroring how * prism-react-renderer resolves overlapping style entries: the last one * naming the type wins. Falls back to the theme's own plain color for a * group it doesn't style at all — used to project a consumer's * `adaptiveTheme` onto the same `--code-token-*` slots the built-in palette * uses. */ function resolveGroupColor(theme: PrismTheme, types: string[]): string { for (let i = theme.styles.length - 1; i >= 0; i--) { const entry = theme.styles[i] if (types.some((t) => entry.types.includes(t))) return entry.style.color ?? theme.plain?.color ?? "" } return theme.plain?.color ?? "" } interface CodeProps extends Omit, "children"> { npm?: string yarn?: string pnpm?: string bun?: string defaultPackageManager?: PackageManager code?: string css?: string language?: string defaultLanguage?: string filename?: string showLineNumbers?: boolean theme?: PrismTheme adaptiveTheme?: { light: PrismTheme dark: PrismTheme } /** Paint the header and code surface from the Prism theme's own background * instead of the page's card token. Defaults to true whenever `theme` or * `adaptiveTheme` is supplied — a palette brought from elsewhere carries its * own ground, and pairing its colours with the page's card is what makes a * dark theme read washed out on a light page. */ useThemeBackground?: boolean scrollbar?: boolean expandable?: boolean defaultExpanded?: boolean collapsedHeight?: string /** Label on the affordance that opens a collapsed block. Docs previews say * "View code"; a bare code block says "Expand". Expanding is one-way — * there is no collapse control, so a reader never has to re-open what they * just opened. A page load starts collapsed again. */ expandLabel?: string } /** The code's own type size, set on the block's ROOT rather than on the * `

`, so every part of the block inherits it — the highlighted source,
 *  the line-number gutter, the filename bar and the package-manager tabs. That
 *  is what makes a single `text-sm` in `className` resize the whole block:
 *  tailwind-merge drops this default in favour of the caller's utility, where
 *  a size declared further down would have won on specificity and left the
 *  parts at different sizes. */
const CODE_TEXT_SIZE = "text-[14px]"

const monoFontFamily =
  'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'

function parseMarkdownCodeBlock(input: string): {
  code: string
  language: string | null
} {
  const markdownRegex = /^```(\w+)?\n?([\s\S]*?)```$/
  const match = input.trim().match(markdownRegex)

  if (match) {
    return {
      language: match[1] || null,
      code: match[2]?.trim() || "",
    }
  }

  return { code: input, language: null }
}

const languageAliases: Record = {
  py: "python",
  js: "javascript",
  ts: "typescript",
  tsx: "tsx",
  jsx: "jsx",
  rb: "ruby",
  rs: "rust",
  sh: "bash",
  shell: "bash",
  zsh: "bash",
  console: "bash",
  yml: "yaml",
  md: "markdown",
  dockerfile: "docker",
  Dockerfile: "docker",
  ps1: "powershell",
  ps: "powershell",
}

const packageManagerCommands: Record = {
  npx: "npm",
  npm: "npm",
  yarn: "yarn",
  pnpm: "pnpm",
  bunx: "bun",
  bun: "bun",
}

function resolveLanguage(lang: string): string {
  return languageAliases[lang.toLowerCase()] || lang.toLowerCase()
}

function detectPackageManagerFromMarkdown(input: string): {
  isPackageManager: boolean
  command: string
  manager: PackageManager
} | null {
  const parsed = parseMarkdownCodeBlock(input)
  if (!parsed.language) return null

  const lang = parsed.language.toLowerCase()
  const manager = packageManagerCommands[lang]

  if (manager) {
    return {
      isPackageManager: true,
      command: parsed.code,
      manager,
    }
  }

  return null
}

function convertNpxToPackageManagers(npxCommand: string): {
  npm: string
  yarn: string
  pnpm: string
  bun: string
} {
  // Handle patterns like "npx shadcn@latest add button" or just "shadcn@latest add button"
  let command = npxCommand.trim()

  // Remove leading "npx " if present
  if (command.startsWith("npx ")) {
    command = command.slice(4)
  }

  return {
    npm: `npx ${command}`,
    yarn: `yarn dlx ${command}`,
    pnpm: `pnpm dlx ${command}`,
    bun: `bunx ${command}`,
  }
}


/* ------------------------------------------------------------------
 * Icons
 * ------------------------------------------------------------------
 * Inlined rather than imported from lucide-react. Three glyphs are not worth
 * an install-time dependency on a consumer's project: the registry item lists
 * what `shadcn add` installs, and every package there is one the reader did
 * not choose. The paths are lucide's own (ISC), drawn at its 24px grid so they
 * sit correctly beside icons a consumer does bring from it.
 */

interface IconProps {
  className?: string
  style?: React.CSSProperties
}

function iconProps({ className, style }: IconProps) {
  return {
    className,
    style,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: 2,
    strokeLinecap: "round" as const,
    strokeLinejoin: "round" as const,
    "aria-hidden": true,
  }
}

function CopyIcon(props: IconProps) {
  return (
    
  )
}

function CheckIcon(props: IconProps) {
  return (
    
  )
}

function TerminalIcon(props: IconProps) {
  return (
    
  )
}

/** The tone every piece of chrome sitting ON the code surface shares — the
 *  copy glyph, the filename and its file badge, the package-manager tabs — so
 *  they read as one set rather than several separately-tuned greys.
 *
 *  Opacity on the INHERITED colour, never a colour of its own. 60% of a
 *  surface's own foreground IS the muted token: measured against both
 *  palettes it lands within 1/255 of `--muted-foreground` over `--card`, in
 *  light and in dark alike. This used to be two branches saying the same
 *  thing twice — the app's muted token when the block sat on the page's card,
 *  an opacity when it painted from its own palette — and only the opacity
 *  form follows the surface underneath it. Riding the inherited colour means
 *  a palette brought from elsewhere, AND a consumer recolouring the header
 *  with a className, both carry the chrome with them rather than stranding it
 *  on the page's grey.
 *
 *  Hover is the only thing that brightens it — deliberately not touch. A phone
 *  never hovers, so pinning it to full strength there (which is what this used
 *  to do) left the copy glyph permanently darker than the filename it shares a
 *  row with.
 *
 *  Both are complete literal class strings. Tailwind generates utilities by
 *  scanning source text, so a class assembled as `${modifier}:opacity-100`
 *  never reaches the stylesheet — a hover written that way here once did
 *  nothing at all. Keep them literal. */
const CHROME_REST = "opacity-60"
const CHROME_HOVER = "group-hover:opacity-100"

/** Copy-to-clipboard control for a code surface.
 *
 *  Transparent at rest so it doesn't sit on the code as a visible chip; the
 *  ground arrives on hover, mixed against the block's own `--code-fg`/
 *  `--code-bg` (globals.css §8) rather than an app token, because a block
 *  carries its own light/dark palette independent of the page. Both vars are
 *  set once on the block's outer wrapper and inherited here, so this needs no
 *  colour prop of its own.
 *
 *  A floating button (no filename bar to sit in) also gets that ground at
 *  rest on a touch device — there's no hover to reveal it otherwise, so
 *  without a resting ground the glyph lands on top of whatever the first
 *  line happens to be. The two in-header buttons already sit on a bar and
 *  stay transparent until touched or hovered. */
function CopyButton({
  value,
  className,
  floating = false,
}: {
  value: string
  className?: string
  /** Floats over the code with no header/figcaption underneath it. */
  floating?: boolean
}) {
  const [hasCopied, setHasCopied] = useState(false)

  useEffect(() => {
    if (!hasCopied) return
    const timer = setTimeout(() => setHasCopied(false), 2000)
    return () => clearTimeout(timer)
  }, [hasCopied])

  return (
    
  )
}

/** The highlighted source itself, with optional gutter line numbers. Shared by
 *  the expandable and plain wrappers so the two can't drift. */
function HighlightedCode({
  code,
  language,
  theme,
  showLineNumbers,
}: {
  code: string
  language: string
  theme: PrismTheme
  showLineNumbers: boolean
}) {
  const lineNumberColor = theme.plain?.color
    ? `color-mix(in srgb, ${theme.plain.color} 35%, transparent)`
    : "rgba(128, 128, 128, 0.35)"

  return (
    
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
                  {tokens.map((line, i) => (
            
              {showLineNumbers && (
                // Sticky so the gutter survives a horizontal scroll; it paints
                // the block background so code scrolls *under* it, not through.
                
                  {i + 1}
                
              )}
              
                {line.map((token, key) => (
                  
                ))}
              
            
          ))}
        
      )}
    
  )
}

const COLLAPSED_ROW_CAP = 40

export function Code({
  npm,
  yarn,
  pnpm,
  bun,
  defaultPackageManager = "npm",
  code,
  css,
  language = "typescript",
  defaultLanguage,
  filename,
  showLineNumbers = true,
  theme,
  adaptiveTheme,
  useThemeBackground,
  className,
  scrollbar = true,
  expandable = false,
  defaultExpanded = false,
  collapsedHeight = "12rem",
  expandLabel = "Expand",
  style,
  ...props
}: CodeProps) {
  const [packageManager, setPackageManager] = React.useState(
    defaultPackageManager
  )
  const [isExpanded, setIsExpanded] = useState(defaultExpanded)

  // A caller-supplied palette brings its own background; the built-in pair is
  // designed to sit flush with --card, so only that one defaults to the token.
  const paintFromTheme = useThemeBackground ?? Boolean(theme || adaptiveTheme)

  const pageSurfaceVars = { color: "var(--foreground)", backgroundColor: "var(--card)" }

  // `adaptiveTheme` is the one case that still varies by resolved theme, but
  // the choice is made by the `.dark` class (see `wrapperVars` below), not by
  // reading which theme is on screen — so `selectedTheme` itself never
  // branches on light vs. dark.
  //
  // Without the theme's ground, its plain colour can't be trusted against the
  // page surface either — a dark palette's near-white body text would land on
  // a light card. Tokens keep their colours; unstyled text falls back.
  const selectedTheme =
    theme && !paintFromTheme
      ? { ...theme, plain: { ...theme.plain, ...pageSurfaceVars } }
      : theme || builtinTheme

  // The palette's foreground/background, set once on the outer wrapper so the
  // copy button's resting/hover ground (globals.css §8) can mix against a
  // block's real surface instead of `transparent`. `adaptiveTheme` sets both
  // halves of every pair here too, and `.code-adaptive-theme` (also in §8)
  // is what lets `.dark` pick between them without JS.
  const wrapperVars: Record = adaptiveTheme
    ? {
        "--code-fg-l": adaptiveTheme.light.plain?.color ?? "",
        "--code-fg-d": adaptiveTheme.dark.plain?.color ?? "",
        "--code-bg-l": adaptiveTheme.light.plain?.backgroundColor ?? "",
        "--code-bg-d": adaptiveTheme.dark.plain?.backgroundColor ?? "",
        ...Object.fromEntries(
          tokenGroups.flatMap(({ key, types }) => [
            [`--code-token-${key}-l`, resolveGroupColor(adaptiveTheme.light, types)],
            [`--code-token-${key}-d`, resolveGroupColor(adaptiveTheme.dark, types)],
          ])
        ),
      }
    : {
        "--code-fg": theme?.plain?.color ?? "var(--foreground)",
        "--code-bg": theme?.plain?.backgroundColor ?? "var(--card)",
      }

  // The code surface paints straight from `--code-bg`, so turning the theme
  // ground off has to move the variable itself — the header alone would leave
  // the two halves of the block on different surfaces. Inline vars outrank the
  // `.code-adaptive-theme` class rules, so this covers the adaptive pair too.
  if (!paintFromTheme) {
    wrapperVars["--code-fg"] = pageSurfaceVars.color
    wrapperVars["--code-bg"] = pageSurfaceVars.backgroundColor
  }

  const packageManagerFromMarkdown = code
    ? detectPackageManagerFromMarkdown(code)
    : null

  const parsedMarkdown = code ? parseMarkdownCodeBlock(code) : null
  const actualCode = css || (parsedMarkdown?.code ?? code)
  const actualLanguage = css
    ? "css"
    : parsedMarkdown?.language
      ? resolveLanguage(parsedMarkdown.language)
      : defaultLanguage || language

  // Two ways to get a package-manager block: an explicit npm/yarn/pnpm/bun
  // prop set, or a ```npx fenced command we expand into all four. They render
  // the same tab strip, so they resolve to one shape here rather than forking
  // the JSX.
  const explicit: Partial> = {
    npm,
    yarn,
    pnpm,
    bun,
  }
  const hasExplicit = Object.values(explicit).some(Boolean)
  const pmCommands = packageManagerFromMarkdown
    ? convertNpxToPackageManagers(packageManagerFromMarkdown.command)
    : hasExplicit
      ? explicit
      : null

  if (pmCommands) {
    const keys = (["npm", "yarn", "pnpm", "bun"] as PackageManager[]).filter(
      (key) => pmCommands[key]
    )
    const active = pmCommands[packageManager] ? packageManager : keys[0]
    const surfaceStyle = paintFromTheme
      ? {
          backgroundColor: selectedTheme.plain?.backgroundColor,
          color: selectedTheme.plain?.color,
        }
      : undefined

    return (
      
        
          
            
            
              {keys.map((key) => (
                
              ))}
            
          
          
        
        
          
            
              {({
                className: highlightClassName,
                style,
                tokens,
                getLineProps,
                getTokenProps,
              }) => (
                                  {tokens.map((line, i) => (
                    
                      {line.map((token, key) => (
                        
                      ))}
                    
                  ))}
                
              )}
            
          
        
      
    )
  }

  if (!actualCode) return null

  // A collapsed block shows a handful of rows under `collapsedHeight`, and
  // tokenising and mounting the other hundreds — several hundred milliseconds
  // for a long source file — is what froze a tab switch that revealed one.
  // Until it is expanded only the rows that can be seen are rendered; the
  // copy button still carries the whole thing.
  // ponytail: 40 rows covers a collapsedHeight of ~4× the default; derive
  // the count from the height if a caller ever collapses taller than that.
  const collapsed = expandable && !isExpanded
  const visibleCode = collapsed
    ? actualCode.split("\n").slice(0, COLLAPSED_ROW_CAP).join("\n")
    : actualCode

  const highlighted = (
    
  )

  return (
    
      {filename && (
        
          
            {/* The file badge is a solid shape where the name beside it is
                13px text, so at one shared colour it out-weighs the name it
                belongs to and pulls the eye off both the label and the copy
                button. The token stays the same; a notch of transparency is
                what evens the three optically. */}
            
              {getIconForFile(filename)}
            
            {filename}
          
          
            
          
        
      )}

      
        {/* With no filename bar to live in, the controls float over the code.
            The row is pointer-transparent so it doesn't eat text selection;
            only the controls themselves take pointer events back. */}
        {!filename && (
          
            
              
            
          
        )}

        {expandable ? (
          
            {highlighted}
          
        ) : (
          
            {highlighted}
          
        )}

        {expandable && !isExpanded && (
          
            
          
        )}
      
    
  )
}
6b:T2c77,import type React from "react"

type IconProps = React.HTMLAttributes

export const Icons = {
  ts: (props: IconProps) => (
    
  ),
  css: (props: IconProps) => (
    
  ),
  json: (props: IconProps) => (
    
  ),
  python: (props: IconProps) => (
    
  ),
  rust: (props: IconProps) => (
    
  ),
  bash: (props: IconProps) => (
    
  ),
  html: (props: IconProps) => (
    
  ),
  react: (props: IconProps) => (
    
  ),
  go: (props: IconProps) => (
    
  ),
  markdown: (props: IconProps) => (
    
  ),
  file: (props: IconProps) => (
    
  ),
}

export function getIconForFile(filename: string) {
  const extension = filename.split(".").pop()?.toLowerCase()

  switch (extension) {
    case "json":
      return 
    case "css":
      return 
    case "ts":
    case "tsx":
    case "typescript":
      return 
    case "js":
    case "jsx":
      return 
    case "py":
    case "python":
      return 
    case "rs":
    case "rust":
      return 
    case "sh":
    case "bash":
    case "zsh":
      return 
    case "html":
    case "htm":
      return 
    case "go":
      return 
    case "md":
    case "mdx":
      return 
    default:
      return 
  }
}
6c:T883,/**
 * Register additional Prism grammars on the shared instance used by
 * ``prism-react-renderer``.
 *
 * ``prism-react-renderer`` ships with a small built-in set (JS/TS,
 * Python, Go, Rust, JSON, YAML, CSS/HTML, SQL, Swift, Kotlin, etc.)
 * and silently falls back to a plain-text render for anything not on
 * that list. Each language-component file from ``prismjs/components``
 * self-registers on ``globalThis.Prism`` as a side effect of being
 * imported — so we expose the renderer's Prism instance there once,
 * then ``require`` each grammar we want to support.
 *
 * Importing this module anywhere in the app is enough; the
 * registrations are global and idempotent. Keep this file
 * side-effect-only: no exports, no React, no SSR-unsafe globals.
 */

import { Prism } from "prism-react-renderer";

// ``prismjs`` grammars read from ``global.Prism`` (Node) or
// ``window.Prism`` (browser). ``globalThis`` resolves to whichever is
// available, so this works on both the server and the client.
(globalThis as typeof globalThis & { Prism?: typeof Prism }).Prism = Prism;

// Each ``require`` mutates ``globalThis.Prism.languages`` and returns
// nothing useful — the side effect is the point. Using ``require``
// rather than ``import`` because the grammar files are CommonJS and
// expect a synchronous registration order.
/* eslint-disable @typescript-eslint/no-require-imports */
// ``prism-markup-templating`` defines ``Prism.languages.markup-templating``
// and helpers (``tokenizePlaceholders``) that PHP / Smarty / Twig /
// EJS / ERB grammars look up at registration time. It must load
// **before** any of those.
require("prismjs/components/prism-markup-templating");
require("prismjs/components/prism-bash");
require("prismjs/components/prism-diff");
require("prismjs/components/prism-docker");
require("prismjs/components/prism-ini");
require("prismjs/components/prism-java");
require("prismjs/components/prism-nginx");
require("prismjs/components/prism-php");
require("prismjs/components/prism-powershell");
require("prismjs/components/prism-ruby");
require("prismjs/components/prism-toml");
/* eslint-enable @typescript-eslint/no-require-imports */
62:["$","$L69",null,{"files":[{"path":"registry/ui/code.tsx","content":"$6a","type":"registry:ui","target":"components/ui/code.tsx"},{"path":"registry/ui/code-icons.tsx","content":"$6b","type":"registry:ui","target":"components/ui/code-icons.tsx"},{"path":"registry/lib/prism-languages.ts","content":"$6c","type":"registry:lib","target":"lib/prism-languages.ts"}],"className":"h-[70svh] min-h-80"}]