@tetrascience-npm/tetrascience-react-ui 0.7.0 → 1.0.0

package/dist/ui/code-block.cjs

@@ -0,0 +1,4 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),b=require("lucide-react"),c=require("react"),w=require("./button.cjs"),f=require("./select.cjs"),T=require("../lib/shiki.cjs"),l=require("../lib/utils.cjs"),N=e=>e&&e&1,L=e=>e&&e&2,I=e=>e&&e&4,R=e=>e.map((t,o)=>({key:`line-${o}`,tokens:t.map((n,i)=>({key:`line-${o}-${i}`,token:n}))})),E=({token:e})=>s.jsx("span",{className:"dark:!bg-[var(--shiki-dark-bg)] dark:!text-[var(--shiki-dark)]",style:{backgroundColor:e.bgColor,color:e.color,fontStyle:N(e.fontStyle)?"italic":void 0,fontWeight:L(e.fontStyle)?"bold":void 0,textDecoration:I(e.fontStyle)?"underline":void 0,...e.htmlStyle},children:e.content}),_=l.cn("block","before:content-[counter(line)]","before:inline-block","before:[counter-increment:line]","before:w-8","before:mr-4","before:text-right","before:text-muted-foreground/50","before:font-mono","before:select-none"),M=({keyedLine:e,showLineNumbers:t})=>s.jsx("span",{className:t?_:"block",children:e.tokens.length===0?`
+`:e.tokens.map(({token:o,key:n})=>s.jsx(E,{token:o},n))}),v=c.createContext({code:""}),q={"github-light":{"#24292e":"var(--shiki-fg)","#6a737d":"var(--shiki-comment)","#586069":"var(--shiki-comment)","#d73a49":"var(--shiki-keyword)","#b31d28":"var(--shiki-keyword)","#005cc5":"var(--shiki-constant)","#6f42c1":"var(--shiki-entity)","#22863a":"var(--shiki-tag)","#032f62":"var(--shiki-string)","#e36209":"var(--shiki-variable)"},"github-dark":{"#e1e4e8":"var(--shiki-fg)","#6a737d":"var(--shiki-comment)","#d1d5da":"var(--shiki-comment)","#f97583":"var(--shiki-keyword)","#fdaeb7":"var(--shiki-keyword)","#79b8ff":"var(--shiki-constant)","#b392f0":"var(--shiki-entity)","#85e89d":"var(--shiki-tag)","#9ecbff":"var(--shiki-string)","#dbedff":"var(--shiki-string)","#ffab70":"var(--shiki-variable)"}},x=new Map,h=new Map,m=100,z=(e,t)=>{const o=e.slice(0,m),n=e.length>m?e.slice(-m):"";return`${t}:${e.length}:${o}:${n}`},A=e=>({bg:"transparent",fg:"inherit",tokens:e.split(`
+`).map(t=>t===""?[]:[{color:"inherit",content:t}])}),C=(e,t,o)=>{const n=z(e,t),i=x.get(n);return i||(o&&(h.has(n)||h.set(n,new Set),h.get(n)?.add(o)),T.getCodeBlockHighlighter(t).then(({highlighter:d,lang:r})=>{const a=d.codeToTokens(e,{colorReplacements:q,lang:r,themes:{dark:"github-dark",light:"github-light"}}),u={bg:a.bg??"transparent",fg:a.fg??"inherit",tokens:a.tokens};x.set(n,u);const k=h.get(n);if(k){for(const g of k)g(u);h.delete(n)}}).catch(d=>{console.error("Failed to highlight code:",d),h.delete(n)}),null)},B=c.memo(({tokenized:e,showLineNumbers:t,className:o})=>{const n=c.useMemo(()=>R(e.tokens),[e.tokens]);return s.jsx("pre",{className:l.cn("!bg-[var(--shiki-bg)] !text-[var(--shiki-fg)] m-0 p-4 text-sm",o),children:s.jsx("code",{className:l.cn("font-mono text-sm",t&&"[counter-increment:line_0] [counter-reset:line]"),children:n.map(i=>s.jsx(M,{keyedLine:i,showLineNumbers:t},i.key))})})},(e,t)=>e.tokenized===t.tokenized&&e.showLineNumbers===t.showLineNumbers&&e.className===t.className);B.displayName="CodeBlockBody";const y=({className:e,language:t,style:o,...n})=>s.jsx("div",{className:l.cn("group relative w-full overflow-hidden rounded-md border bg-background text-foreground",e),"data-language":t,style:{containIntrinsicSize:"auto 200px",contentVisibility:"auto",...o},...n}),$=({children:e,className:t,...o})=>s.jsx("div",{className:l.cn("flex items-center justify-between border-b bg-muted/80 px-3 py-2 text-muted-foreground text-xs",t),...o,children:e}),H=({children:e,className:t,...o})=>s.jsx("div",{className:l.cn("flex items-center gap-2",t),...o,children:e}),K=({children:e,className:t,...o})=>s.jsx("span",{className:l.cn("font-mono",t),...o,children:e}),V=({children:e,className:t,...o})=>s.jsx("div",{className:l.cn("-my-1 -mr-1 flex items-center gap-2",t),...o,children:e}),p=({code:e,language:t,showLineNumbers:o=!1})=>{const n=c.useMemo(()=>A(e),[e]),i=c.useMemo(()=>C(e,t)??n,[e,t,n]),[d,r]=c.useState(null),a=c.useRef({code:e,language:t});(a.current.code!==e||a.current.language!==t)&&(a.current={code:e,language:t},r(null)),c.useEffect(()=>{let k=!1;return C(e,t,g=>{k||r(g)}),()=>{k=!0}},[e,t]);const u=d??i;return s.jsx("div",{className:"relative overflow-auto",tabIndex:0,children:s.jsx(B,{showLineNumbers:o,tokenized:u})})},F=({code:e,language:t,showLineNumbers:o=!1,className:n,children:i,...d})=>{const r=c.useMemo(()=>({code:e}),[e]);return s.jsx(v.Provider,{value:r,children:s.jsxs(y,{className:n,language:t,...d,children:[i,s.jsx(p,{code:e,language:t,showLineNumbers:o})]})})},O=({onCopy:e,onError:t,timeout:o=2e3,children:n,className:i,...d})=>{const[r,a]=c.useState(!1),u=c.useRef(0),{code:k}=c.useContext(v),g=c.useCallback(async()=>{if(typeof window>"u"||!navigator?.clipboard?.writeText){t?.(new Error("Clipboard API not available"));return}try{r||(await navigator.clipboard.writeText(k),a(!0),e?.(),u.current=window.setTimeout(()=>a(!1),o))}catch(j){t?.(j)}},[k,e,t,o,r]);c.useEffect(()=>()=>{window.clearTimeout(u.current)},[]);const S=r?b.CheckIcon:b.CopyIcon;return s.jsx(w.Button,{"aria-label":"Copy code",className:l.cn("shrink-0",i),onClick:g,size:"icon",variant:"ghost",...d,children:n??s.jsx(S,{size:14})})},U=e=>s.jsx(f.Select,{...e}),D=({className:e,...t})=>s.jsx(f.SelectTrigger,{"aria-label":"Select language",className:l.cn("h-7 border-none bg-transparent px-2 text-xs shadow-none",e),size:"sm",...t}),G=e=>s.jsx(f.SelectValue,{...e}),W=({align:e="end",...t})=>s.jsx(f.SelectContent,{align:e,...t}),Y=e=>s.jsx(f.SelectItem,{...e});exports.CodeBlock=F;exports.CodeBlockActions=V;exports.CodeBlockContainer=y;exports.CodeBlockContent=p;exports.CodeBlockCopyButton=O;exports.CodeBlockFilename=K;exports.CodeBlockHeader=$;exports.CodeBlockLanguageSelector=U;exports.CodeBlockLanguageSelectorContent=W;exports.CodeBlockLanguageSelectorItem=Y;exports.CodeBlockLanguageSelectorTrigger=D;exports.CodeBlockLanguageSelectorValue=G;exports.CodeBlockTitle=H;exports.highlightCode=C;
+//# sourceMappingURL=code-block.cjs.map

package/dist/ui/code-block.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.cjs","sources":["../../src/components/ui/code-block.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from \"lucide-react\";\nimport {\n  createContext,\n  memo,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { ComponentProps, CSSProperties, HTMLAttributes } from \"react\";\nimport type { BundledLanguage, ThemedToken } from \"shiki\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { getCodeBlockHighlighter } from \"@/lib/shiki\";\nimport { cn } from \"@/lib/utils\";\n\n\n\n\n// Shiki uses bitflags for font styles: 1=italic, 2=bold, 4=underline\n// oxlint-disable-next-line eslint(no-bitwise)\nconst isItalic = (fontStyle: number | undefined) => fontStyle && fontStyle & 1;\n// oxlint-disable-next-line eslint(no-bitwise)\nconst isBold = (fontStyle: number | undefined) => fontStyle && fontStyle & 2;\nconst isUnderline = (fontStyle: number | undefined) =>\n  // oxlint-disable-next-line eslint(no-bitwise)\n  fontStyle && fontStyle & 4;\n\n// Transform tokens to include pre-computed keys to avoid noArrayIndexKey lint\ninterface KeyedToken {\n  token: ThemedToken;\n  key: string;\n}\ninterface KeyedLine {\n  tokens: KeyedToken[];\n  key: string;\n}\n\nconst addKeysToTokens = (lines: ThemedToken[][]): KeyedLine[] =>\n  lines.map((line, lineIdx) => ({\n    key: `line-${lineIdx}`,\n    tokens: line.map((token, tokenIdx) => ({\n      key: `line-${lineIdx}-${tokenIdx}`,\n      token,\n    })),\n  }));\n\n// Token rendering component\nconst TokenSpan = ({ token }: { token: ThemedToken }) => (\n  <span\n    className=\"dark:!bg-[var(--shiki-dark-bg)] dark:!text-[var(--shiki-dark)]\"\n    style={\n      {\n        backgroundColor: token.bgColor,\n        color: token.color,\n        fontStyle: isItalic(token.fontStyle) ? \"italic\" : undefined,\n        fontWeight: isBold(token.fontStyle) ? \"bold\" : undefined,\n        textDecoration: isUnderline(token.fontStyle) ? \"underline\" : undefined,\n        ...token.htmlStyle,\n      } as CSSProperties\n    }\n  >\n    {token.content}\n  </span>\n);\n\n// Line number styles using CSS counters\nconst LINE_NUMBER_CLASSES = cn(\n  \"block\",\n  \"before:content-[counter(line)]\",\n  \"before:inline-block\",\n  \"before:[counter-increment:line]\",\n  \"before:w-8\",\n  \"before:mr-4\",\n  \"before:text-right\",\n  \"before:text-muted-foreground/50\",\n  \"before:font-mono\",\n  \"before:select-none\"\n);\n\n// Line rendering component\nconst LineSpan = ({\n  keyedLine,\n  showLineNumbers,\n}: {\n  keyedLine: KeyedLine;\n  showLineNumbers: boolean;\n}) => (\n  <span className={showLineNumbers ? LINE_NUMBER_CLASSES : \"block\"}>\n    {keyedLine.tokens.length === 0\n      ? \"\\n\"\n      : keyedLine.tokens.map(({ token, key }) => (\n          <TokenSpan key={key} token={token} />\n        ))}\n  </span>\n);\n\n// Types\ntype CodeBlockProps = HTMLAttributes<HTMLDivElement> & {\n  code: string;\n  language: BundledLanguage;\n  showLineNumbers?: boolean;\n};\n\ninterface TokenizedCode {\n  tokens: ThemedToken[][];\n  fg: string;\n  bg: string;\n}\n\ninterface CodeBlockContextType {\n  code: string;\n}\n\n// Context\nconst CodeBlockContext = createContext<CodeBlockContextType>({\n  code: \"\",\n});\n\n// Maps every github-light/github-dark token color onto a --shiki-* CSS\n// variable backed by the design-token palette (defined in index.tailwind.css\n// for :root and .dark), so code colors follow the active theme and meet\n// WCAG AA contrast on --shiki-bg in both modes.\nconst SHIKI_COLOR_REPLACEMENTS: Record<string, Record<string, string>> = {\n  \"github-light\": {\n    \"#24292e\": \"var(--shiki-fg)\",\n    \"#6a737d\": \"var(--shiki-comment)\",\n    \"#586069\": \"var(--shiki-comment)\",\n    \"#d73a49\": \"var(--shiki-keyword)\",\n    \"#b31d28\": \"var(--shiki-keyword)\",\n    \"#005cc5\": \"var(--shiki-constant)\",\n    \"#6f42c1\": \"var(--shiki-entity)\",\n    \"#22863a\": \"var(--shiki-tag)\",\n    \"#032f62\": \"var(--shiki-string)\",\n    \"#e36209\": \"var(--shiki-variable)\",\n  },\n  \"github-dark\": {\n    \"#e1e4e8\": \"var(--shiki-fg)\",\n    \"#6a737d\": \"var(--shiki-comment)\",\n    \"#d1d5da\": \"var(--shiki-comment)\",\n    \"#f97583\": \"var(--shiki-keyword)\",\n    \"#fdaeb7\": \"var(--shiki-keyword)\",\n    \"#79b8ff\": \"var(--shiki-constant)\",\n    \"#b392f0\": \"var(--shiki-entity)\",\n    \"#85e89d\": \"var(--shiki-tag)\",\n    \"#9ecbff\": \"var(--shiki-string)\",\n    \"#dbedff\": \"var(--shiki-string)\",\n    \"#ffab70\": \"var(--shiki-variable)\",\n  },\n};\n\n// Token cache\nconst tokensCache = new Map<string, TokenizedCode>();\n\n// Subscribers for async token updates\nconst subscribers = new Map<string, Set<(result: TokenizedCode) => void>>();\n\nconst CACHE_KEY_SLICE_LENGTH = 100;\n\nconst getTokensCacheKey = (code: string, language: BundledLanguage) => {\n  const start = code.slice(0, CACHE_KEY_SLICE_LENGTH);\n  const end = code.length > CACHE_KEY_SLICE_LENGTH ? code.slice(-CACHE_KEY_SLICE_LENGTH) : \"\";\n  return `${language}:${code.length}:${start}:${end}`;\n};\n\n// Create raw tokens for immediate display while highlighting loads\nconst createRawTokens = (code: string): TokenizedCode => ({\n  bg: \"transparent\",\n  fg: \"inherit\",\n  tokens: code.split(\"\\n\").map((line) =>\n    line === \"\"\n      ? []\n      : [\n          {\n            color: \"inherit\",\n            content: line,\n          } as ThemedToken,\n        ]\n  ),\n});\n\n// Synchronous highlight with callback for async results\nexport const highlightCode = (\n  code: string,\n  language: BundledLanguage,\n  // oxlint-disable-next-line eslint-plugin-promise(prefer-await-to-callbacks)\n  callback?: (result: TokenizedCode) => void\n): TokenizedCode | null => {\n  const tokensCacheKey = getTokensCacheKey(code, language);\n\n  // Return cached result if available\n  const cached = tokensCache.get(tokensCacheKey);\n  if (cached) {\n    return cached;\n  }\n\n  // Subscribe callback if provided\n  if (callback) {\n    if (!subscribers.has(tokensCacheKey)) {\n      subscribers.set(tokensCacheKey, new Set());\n    }\n    subscribers.get(tokensCacheKey)?.add(callback);\n  }\n\n  // Start highlighting in background - fire-and-forget async pattern.\n  // The shared slim highlighter (SW-2007) loads shiki/core, the grammar, and\n  // the themes through dynamic imports; unsupported languages fall back to\n  // plaintext via the resolved `lang`.\n  getCodeBlockHighlighter(language)\n    // oxlint-disable-next-line eslint-plugin-promise(prefer-await-to-then)\n    .then(({ highlighter, lang }) => {\n      const result = highlighter.codeToTokens(code, {\n        colorReplacements: SHIKI_COLOR_REPLACEMENTS,\n        lang,\n        themes: {\n          dark: \"github-dark\",\n          light: \"github-light\",\n        },\n      });\n\n      const tokenized: TokenizedCode = {\n        bg: result.bg ?? \"transparent\",\n        fg: result.fg ?? \"inherit\",\n        tokens: result.tokens,\n      };\n\n      // Cache the result\n      tokensCache.set(tokensCacheKey, tokenized);\n\n      // Notify all subscribers\n      const subs = subscribers.get(tokensCacheKey);\n      if (subs) {\n        for (const sub of subs) {\n          sub(tokenized);\n        }\n        subscribers.delete(tokensCacheKey);\n      }\n    })\n    // oxlint-disable-next-line eslint-plugin-promise(prefer-await-to-then), eslint-plugin-promise(prefer-await-to-callbacks)\n    .catch((error) => {\n      console.error(\"Failed to highlight code:\", error);\n      subscribers.delete(tokensCacheKey);\n    });\n\n  return null;\n};\n\nconst CodeBlockBody = memo(\n  ({\n    tokenized,\n    showLineNumbers,\n    className,\n  }: {\n    tokenized: TokenizedCode;\n    showLineNumbers: boolean;\n    className?: string;\n  }) => {\n    const keyedLines = useMemo(\n      () => addKeysToTokens(tokenized.tokens),\n      [tokenized.tokens]\n    );\n\n    return (\n      <pre\n        className={cn(\n          // Shiki's dual-theme codeToTokens() returns \"transparent\"/\"inherit\"\n          // for the top-level bg/fg in multi-theme mode — the real per-theme\n          // colors only exist per-token (read via CSS vars in TokenSpan).\n          // --shiki-bg/--shiki-fg re-resolve under .dark, so no dark: variant\n          // is needed here.\n          \"!bg-[var(--shiki-bg)] !text-[var(--shiki-fg)] m-0 p-4 text-sm\",\n          className\n        )}\n      >\n        <code\n          className={cn(\n            \"font-mono text-sm\",\n            showLineNumbers && \"[counter-increment:line_0] [counter-reset:line]\"\n          )}\n        >\n          {keyedLines.map((keyedLine) => (\n            <LineSpan\n              key={keyedLine.key}\n              keyedLine={keyedLine}\n              showLineNumbers={showLineNumbers}\n            />\n          ))}\n        </code>\n      </pre>\n    );\n  },\n  (prevProps, nextProps) =>\n    prevProps.tokenized === nextProps.tokenized &&\n    prevProps.showLineNumbers === nextProps.showLineNumbers &&\n    prevProps.className === nextProps.className\n);\n\nCodeBlockBody.displayName = \"CodeBlockBody\";\n\nexport const CodeBlockContainer = ({\n  className,\n  language,\n  style,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & { language: string }) => (\n  <div\n    className={cn(\n      \"group relative w-full overflow-hidden rounded-md border bg-background text-foreground\",\n      className\n    )}\n    data-language={language}\n    style={{\n      containIntrinsicSize: \"auto 200px\",\n      contentVisibility: \"auto\",\n      ...style,\n    }}\n    {...props}\n  />\n);\n\nexport const CodeBlockHeader = ({\n  children,\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex items-center justify-between border-b bg-muted/80 px-3 py-2 text-muted-foreground text-xs\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nexport const CodeBlockTitle = ({\n  children,\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn(\"flex items-center gap-2\", className)} {...props}>\n    {children}\n  </div>\n);\n\nexport const CodeBlockFilename = ({\n  children,\n  className,\n  ...props\n}: HTMLAttributes<HTMLSpanElement>) => (\n  <span className={cn(\"font-mono\", className)} {...props}>\n    {children}\n  </span>\n);\n\nexport const CodeBlockActions = ({\n  children,\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"-my-1 -mr-1 flex items-center gap-2\", className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nexport const CodeBlockContent = ({\n  code,\n  language,\n  showLineNumbers = false,\n}: {\n  code: string;\n  language: BundledLanguage;\n  showLineNumbers?: boolean;\n}) => {\n  // Memoized raw tokens for immediate display\n  const rawTokens = useMemo(() => createRawTokens(code), [code]);\n\n  // Synchronous cache lookup — avoids setState in effect for cached results\n  const syncTokens = useMemo(\n    () => highlightCode(code, language) ?? rawTokens,\n    [code, language, rawTokens]\n  );\n\n  // Async highlighting result (populated after shiki loads)\n  const [asyncTokens, setAsyncTokens] = useState<TokenizedCode | null>(null);\n  const asyncKeyRef = useRef({ code, language });\n\n  // Invalidate stale async tokens synchronously during render\n  if (\n    asyncKeyRef.current.code !== code ||\n    asyncKeyRef.current.language !== language\n  ) {\n    asyncKeyRef.current = { code, language };\n    setAsyncTokens(null);\n  }\n\n  useEffect(() => {\n    let cancelled = false;\n\n    highlightCode(code, language, (result) => {\n      if (!cancelled) {\n        setAsyncTokens(result);\n      }\n    });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [code, language]);\n\n  const tokenized = asyncTokens ?? syncTokens;\n\n  return (\n    <div className=\"relative overflow-auto\" tabIndex={0}>\n      <CodeBlockBody showLineNumbers={showLineNumbers} tokenized={tokenized} />\n    </div>\n  );\n};\n\nexport const CodeBlock = ({\n  code,\n  language,\n  showLineNumbers = false,\n  className,\n  children,\n  ...props\n}: CodeBlockProps) => {\n  const contextValue = useMemo(() => ({ code }), [code]);\n\n  return (\n    <CodeBlockContext.Provider value={contextValue}>\n      <CodeBlockContainer className={className} language={language} {...props}>\n        {children}\n        <CodeBlockContent\n          code={code}\n          language={language}\n          showLineNumbers={showLineNumbers}\n        />\n      </CodeBlockContainer>\n    </CodeBlockContext.Provider>\n  );\n};\n\nexport type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {\n  onCopy?: () => void;\n  onError?: (error: Error) => void;\n  timeout?: number;\n};\n\nexport const CodeBlockCopyButton = ({\n  onCopy,\n  onError,\n  timeout = 2000,\n  children,\n  className,\n  ...props\n}: CodeBlockCopyButtonProps) => {\n  const [isCopied, setIsCopied] = useState(false);\n  const timeoutRef = useRef<number>(0);\n  const { code } = useContext(CodeBlockContext);\n\n  const copyToClipboard = useCallback(async () => {\n    if (typeof window === \"undefined\" || !navigator?.clipboard?.writeText) {\n      onError?.(new Error(\"Clipboard API not available\"));\n      return;\n    }\n\n    try {\n      if (!isCopied) {\n        await navigator.clipboard.writeText(code);\n        setIsCopied(true);\n        onCopy?.();\n        timeoutRef.current = window.setTimeout(\n          () => setIsCopied(false),\n          timeout\n        );\n      }\n    } catch (error) {\n      onError?.(error as Error);\n    }\n  }, [code, onCopy, onError, timeout, isCopied]);\n\n  useEffect(\n    () => () => {\n      window.clearTimeout(timeoutRef.current);\n    },\n    []\n  );\n\n  const Icon = isCopied ? CheckIcon : CopyIcon;\n\n  return (\n    <Button\n      aria-label=\"Copy code\"\n      className={cn(\"shrink-0\", className)}\n      onClick={copyToClipboard}\n      size=\"icon\"\n      variant=\"ghost\"\n      {...props}\n    >\n      {children ?? <Icon size={14} />}\n    </Button>\n  );\n};\n\nexport type CodeBlockLanguageSelectorProps = ComponentProps<typeof Select>;\n\nexport const CodeBlockLanguageSelector = (\n  props: CodeBlockLanguageSelectorProps\n) => <Select {...props} />;\n\nexport type CodeBlockLanguageSelectorTriggerProps = ComponentProps<\n  typeof SelectTrigger\n>;\n\nexport const CodeBlockLanguageSelectorTrigger = ({\n  className,\n  ...props\n}: CodeBlockLanguageSelectorTriggerProps) => (\n  <SelectTrigger\n    aria-label=\"Select language\"\n    className={cn(\n      \"h-7 border-none bg-transparent px-2 text-xs shadow-none\",\n      className\n    )}\n    size=\"sm\"\n    {...props}\n  />\n);\n\nexport type CodeBlockLanguageSelectorValueProps = ComponentProps<\n  typeof SelectValue\n>;\n\nexport const CodeBlockLanguageSelectorValue = (\n  props: CodeBlockLanguageSelectorValueProps\n) => <SelectValue {...props} />;\n\nexport type CodeBlockLanguageSelectorContentProps = ComponentProps<\n  typeof SelectContent\n>;\n\nexport const CodeBlockLanguageSelectorContent = ({\n  align = \"end\",\n  ...props\n}: CodeBlockLanguageSelectorContentProps) => (\n  <SelectContent align={align} {...props} />\n);\n\nexport type CodeBlockLanguageSelectorItemProps = ComponentProps<\n  typeof SelectItem\n>;\n\nexport const CodeBlockLanguageSelectorItem = (\n  props: CodeBlockLanguageSelectorItemProps\n) => <SelectItem {...props} />;\n"],"names":["isItalic","fontStyle","isBold","isUnderline","addKeysToTokens","lines","line","lineIdx","token","tokenIdx","TokenSpan","jsx","LINE_NUMBER_CLASSES","cn","LineSpan","keyedLine","showLineNumbers","key","CodeBlockContext","createContext","SHIKI_COLOR_REPLACEMENTS","tokensCache","subscribers","CACHE_KEY_SLICE_LENGTH","getTokensCacheKey","code","language","start","end","createRawTokens","highlightCode","callback","tokensCacheKey","cached","getCodeBlockHighlighter","highlighter","lang","result","tokenized","subs","sub","error","CodeBlockBody","memo","className","keyedLines","useMemo","prevProps","nextProps","CodeBlockContainer","style","props","CodeBlockHeader","children","CodeBlockTitle","CodeBlockFilename","CodeBlockActions","CodeBlockContent","rawTokens","syncTokens","asyncTokens","setAsyncTokens","useState","asyncKeyRef","useRef","useEffect","cancelled","CodeBlock","contextValue","jsxs","CodeBlockCopyButton","onCopy","onError","timeout","isCopied","setIsCopied","timeoutRef","useContext","copyToClipboard","useCallback","Icon","CheckIcon","CopyIcon","Button","CodeBlockLanguageSelector","Select","CodeBlockLanguageSelectorTrigger","SelectTrigger","CodeBlockLanguageSelectorValue","SelectValue","CodeBlockLanguageSelectorContent","align","SelectContent","CodeBlockLanguageSelectorItem","SelectItem"],"mappings":"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"}

package/dist/ui/code-block.js

@@ -0,0 +1,324 @@
+import { jsx as s, jsxs as B } from "react/jsx-runtime";
+import { CheckIcon as T, CopyIcon as N } from "lucide-react";
+import { createContext as I, memo as L, useMemo as f, useState as C, useRef as v, useEffect as p, useContext as E, useCallback as z } from "react";
+import { Button as R } from "./button.js";
+import { Select as _, SelectContent as $, SelectItem as A, SelectTrigger as K, SelectValue as H } from "./select.js";
+import { getCodeBlockHighlighter as M } from "../lib/shiki.js";
+import { cn as a } from "../lib/utils.js";
+const V = (e) => e && e & 1, j = (e) => e && e & 2, F = (e) => (
+  // oxlint-disable-next-line eslint(no-bitwise)
+  e && e & 4
+), O = (e) => e.map((t, o) => ({
+  key: `line-${o}`,
+  tokens: t.map((n, r) => ({
+    key: `line-${o}-${r}`,
+    token: n
+  }))
+})), U = ({ token: e }) => /* @__PURE__ */ s(
+  "span",
+  {
+    className: "dark:!bg-[var(--shiki-dark-bg)] dark:!text-[var(--shiki-dark)]",
+    style: {
+      backgroundColor: e.bgColor,
+      color: e.color,
+      fontStyle: V(e.fontStyle) ? "italic" : void 0,
+      fontWeight: j(e.fontStyle) ? "bold" : void 0,
+      textDecoration: F(e.fontStyle) ? "underline" : void 0,
+      ...e.htmlStyle
+    },
+    children: e.content
+  }
+), D = a(
+  "block",
+  "before:content-[counter(line)]",
+  "before:inline-block",
+  "before:[counter-increment:line]",
+  "before:w-8",
+  "before:mr-4",
+  "before:text-right",
+  "before:text-muted-foreground/50",
+  "before:font-mono",
+  "before:select-none"
+), G = ({
+  keyedLine: e,
+  showLineNumbers: t
+}) => /* @__PURE__ */ s("span", { className: t ? D : "block", children: e.tokens.length === 0 ? `
+` : e.tokens.map(({ token: o, key: n }) => /* @__PURE__ */ s(U, { token: o }, n)) }), y = I({
+  code: ""
+}), W = {
+  "github-light": {
+    "#24292e": "var(--shiki-fg)",
+    "#6a737d": "var(--shiki-comment)",
+    "#586069": "var(--shiki-comment)",
+    "#d73a49": "var(--shiki-keyword)",
+    "#b31d28": "var(--shiki-keyword)",
+    "#005cc5": "var(--shiki-constant)",
+    "#6f42c1": "var(--shiki-entity)",
+    "#22863a": "var(--shiki-tag)",
+    "#032f62": "var(--shiki-string)",
+    "#e36209": "var(--shiki-variable)"
+  },
+  "github-dark": {
+    "#e1e4e8": "var(--shiki-fg)",
+    "#6a737d": "var(--shiki-comment)",
+    "#d1d5da": "var(--shiki-comment)",
+    "#f97583": "var(--shiki-keyword)",
+    "#fdaeb7": "var(--shiki-keyword)",
+    "#79b8ff": "var(--shiki-constant)",
+    "#b392f0": "var(--shiki-entity)",
+    "#85e89d": "var(--shiki-tag)",
+    "#9ecbff": "var(--shiki-string)",
+    "#dbedff": "var(--shiki-string)",
+    "#ffab70": "var(--shiki-variable)"
+  }
+}, g = /* @__PURE__ */ new Map(), h = /* @__PURE__ */ new Map(), u = 100, Y = (e, t) => {
+  const o = e.slice(0, u), n = e.length > u ? e.slice(-u) : "";
+  return `${t}:${e.length}:${o}:${n}`;
+}, q = (e) => ({
+  bg: "transparent",
+  fg: "inherit",
+  tokens: e.split(`
+`).map(
+    (t) => t === "" ? [] : [
+      {
+        color: "inherit",
+        content: t
+      }
+    ]
+  )
+}), b = (e, t, o) => {
+  const n = Y(e, t), r = g.get(n);
+  return r || (o && (h.has(n) || h.set(n, /* @__PURE__ */ new Set()), h.get(n)?.add(o)), M(t).then(({ highlighter: l, lang: i }) => {
+    const c = l.codeToTokens(e, {
+      colorReplacements: W,
+      lang: i,
+      themes: {
+        dark: "github-dark",
+        light: "github-light"
+      }
+    }), k = {
+      bg: c.bg ?? "transparent",
+      fg: c.fg ?? "inherit",
+      tokens: c.tokens
+    };
+    g.set(n, k);
+    const d = h.get(n);
+    if (d) {
+      for (const m of d)
+        m(k);
+      h.delete(n);
+    }
+  }).catch((l) => {
+    console.error("Failed to highlight code:", l), h.delete(n);
+  }), null);
+}, w = L(
+  ({
+    tokenized: e,
+    showLineNumbers: t,
+    className: o
+  }) => {
+    const n = f(
+      () => O(e.tokens),
+      [e.tokens]
+    );
+    return /* @__PURE__ */ s(
+      "pre",
+      {
+        className: a(
+          // Shiki's dual-theme codeToTokens() returns "transparent"/"inherit"
+          // for the top-level bg/fg in multi-theme mode — the real per-theme
+          // colors only exist per-token (read via CSS vars in TokenSpan).
+          // --shiki-bg/--shiki-fg re-resolve under .dark, so no dark: variant
+          // is needed here.
+          "!bg-[var(--shiki-bg)] !text-[var(--shiki-fg)] m-0 p-4 text-sm",
+          o
+        ),
+        children: /* @__PURE__ */ s(
+          "code",
+          {
+            className: a(
+              "font-mono text-sm",
+              t && "[counter-increment:line_0] [counter-reset:line]"
+            ),
+            children: n.map((r) => /* @__PURE__ */ s(
+              G,
+              {
+                keyedLine: r,
+                showLineNumbers: t
+              },
+              r.key
+            ))
+          }
+        )
+      }
+    );
+  },
+  (e, t) => e.tokenized === t.tokenized && e.showLineNumbers === t.showLineNumbers && e.className === t.className
+);
+w.displayName = "CodeBlockBody";
+const J = ({
+  className: e,
+  language: t,
+  style: o,
+  ...n
+}) => /* @__PURE__ */ s(
+  "div",
+  {
+    className: a(
+      "group relative w-full overflow-hidden rounded-md border bg-background text-foreground",
+      e
+    ),
+    "data-language": t,
+    style: {
+      containIntrinsicSize: "auto 200px",
+      contentVisibility: "auto",
+      ...o
+    },
+    ...n
+  }
+), se = ({
+  children: e,
+  className: t,
+  ...o
+}) => /* @__PURE__ */ s(
+  "div",
+  {
+    className: a(
+      "flex items-center justify-between border-b bg-muted/80 px-3 py-2 text-muted-foreground text-xs",
+      t
+    ),
+    ...o,
+    children: e
+  }
+), re = ({
+  children: e,
+  className: t,
+  ...o
+}) => /* @__PURE__ */ s("div", { className: a("flex items-center gap-2", t), ...o, children: e }), ie = ({
+  children: e,
+  className: t,
+  ...o
+}) => /* @__PURE__ */ s("span", { className: a("font-mono", t), ...o, children: e }), ce = ({
+  children: e,
+  className: t,
+  ...o
+}) => /* @__PURE__ */ s(
+  "div",
+  {
+    className: a("-my-1 -mr-1 flex items-center gap-2", t),
+    ...o,
+    children: e
+  }
+), Q = ({
+  code: e,
+  language: t,
+  showLineNumbers: o = !1
+}) => {
+  const n = f(() => q(e), [e]), r = f(
+    () => b(e, t) ?? n,
+    [e, t, n]
+  ), [l, i] = C(null), c = v({ code: e, language: t });
+  return (c.current.code !== e || c.current.language !== t) && (c.current = { code: e, language: t }, i(null)), p(() => {
+    let d = !1;
+    return b(e, t, (m) => {
+      d || i(m);
+    }), () => {
+      d = !0;
+    };
+  }, [e, t]), /* @__PURE__ */ s("div", { className: "relative overflow-auto", tabIndex: 0, children: /* @__PURE__ */ s(w, { showLineNumbers: o, tokenized: l ?? r }) });
+}, ae = ({
+  code: e,
+  language: t,
+  showLineNumbers: o = !1,
+  className: n,
+  children: r,
+  ...l
+}) => {
+  const i = f(() => ({ code: e }), [e]);
+  return /* @__PURE__ */ s(y.Provider, { value: i, children: /* @__PURE__ */ B(J, { className: n, language: t, ...l, children: [
+    r,
+    /* @__PURE__ */ s(
+      Q,
+      {
+        code: e,
+        language: t,
+        showLineNumbers: o
+      }
+    )
+  ] }) });
+}, le = ({
+  onCopy: e,
+  onError: t,
+  timeout: o = 2e3,
+  children: n,
+  className: r,
+  ...l
+}) => {
+  const [i, c] = C(!1), k = v(0), { code: d } = E(y), m = z(async () => {
+    if (typeof window > "u" || !navigator?.clipboard?.writeText) {
+      t?.(new Error("Clipboard API not available"));
+      return;
+    }
+    try {
+      i || (await navigator.clipboard.writeText(d), c(!0), e?.(), k.current = window.setTimeout(
+        () => c(!1),
+        o
+      ));
+    } catch (S) {
+      t?.(S);
+    }
+  }, [d, e, t, o, i]);
+  p(
+    () => () => {
+      window.clearTimeout(k.current);
+    },
+    []
+  );
+  const x = i ? T : N;
+  return /* @__PURE__ */ s(
+    R,
+    {
+      "aria-label": "Copy code",
+      className: a("shrink-0", r),
+      onClick: m,
+      size: "icon",
+      variant: "ghost",
+      ...l,
+      children: n ?? /* @__PURE__ */ s(x, { size: 14 })
+    }
+  );
+}, de = (e) => /* @__PURE__ */ s(_, { ...e }), ke = ({
+  className: e,
+  ...t
+}) => /* @__PURE__ */ s(
+  K,
+  {
+    "aria-label": "Select language",
+    className: a(
+      "h-7 border-none bg-transparent px-2 text-xs shadow-none",
+      e
+    ),
+    size: "sm",
+    ...t
+  }
+), he = (e) => /* @__PURE__ */ s(H, { ...e }), me = ({
+  align: e = "end",
+  ...t
+}) => /* @__PURE__ */ s($, { align: e, ...t }), fe = (e) => /* @__PURE__ */ s(A, { ...e });
+export {
+  ae as CodeBlock,
+  ce as CodeBlockActions,
+  J as CodeBlockContainer,
+  Q as CodeBlockContent,
+  le as CodeBlockCopyButton,
+  ie as CodeBlockFilename,
+  se as CodeBlockHeader,
+  de as CodeBlockLanguageSelector,
+  me as CodeBlockLanguageSelectorContent,
+  fe as CodeBlockLanguageSelectorItem,
+  ke as CodeBlockLanguageSelectorTrigger,
+  he as CodeBlockLanguageSelectorValue,
+  re as CodeBlockTitle,
+  b as highlightCode
+};
+//# sourceMappingURL=code-block.js.map

package/dist/ui/code-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.js","sources":["../../src/components/ui/code-block.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from \"lucide-react\";\nimport {\n  createContext,\n  memo,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { ComponentProps, CSSProperties, HTMLAttributes } from \"react\";\nimport type { BundledLanguage, ThemedToken } from \"shiki\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { getCodeBlockHighlighter } from \"@/lib/shiki\";\nimport { cn } from \"@/lib/utils\";\n\n\n\n\n// Shiki uses bitflags for font styles: 1=italic, 2=bold, 4=underline\n// oxlint-disable-next-line eslint(no-bitwise)\nconst isItalic = (fontStyle: number | undefined) => fontStyle && fontStyle & 1;\n// oxlint-disable-next-line eslint(no-bitwise)\nconst isBold = (fontStyle: number | undefined) => fontStyle && fontStyle & 2;\nconst isUnderline = (fontStyle: number | undefined) =>\n  // oxlint-disable-next-line eslint(no-bitwise)\n  fontStyle && fontStyle & 4;\n\n// Transform tokens to include pre-computed keys to avoid noArrayIndexKey lint\ninterface KeyedToken {\n  token: ThemedToken;\n  key: string;\n}\ninterface KeyedLine {\n  tokens: KeyedToken[];\n  key: string;\n}\n\nconst addKeysToTokens = (lines: ThemedToken[][]): KeyedLine[] =>\n  lines.map((line, lineIdx) => ({\n    key: `line-${lineIdx}`,\n    tokens: line.map((token, tokenIdx) => ({\n      key: `line-${lineIdx}-${tokenIdx}`,\n      token,\n    })),\n  }));\n\n// Token rendering component\nconst TokenSpan = ({ token }: { token: ThemedToken }) => (\n  <span\n    className=\"dark:!bg-[var(--shiki-dark-bg)] dark:!text-[var(--shiki-dark)]\"\n    style={\n      {\n        backgroundColor: token.bgColor,\n        color: token.color,\n        fontStyle: isItalic(token.fontStyle) ? \"italic\" : undefined,\n        fontWeight: isBold(token.fontStyle) ? \"bold\" : undefined,\n        textDecoration: isUnderline(token.fontStyle) ? \"underline\" : undefined,\n        ...token.htmlStyle,\n      } as CSSProperties\n    }\n  >\n    {token.content}\n  </span>\n);\n\n// Line number styles using CSS counters\nconst LINE_NUMBER_CLASSES = cn(\n  \"block\",\n  \"before:content-[counter(line)]\",\n  \"before:inline-block\",\n  \"before:[counter-increment:line]\",\n  \"before:w-8\",\n  \"before:mr-4\",\n  \"before:text-right\",\n  \"before:text-muted-foreground/50\",\n  \"before:font-mono\",\n  \"before:select-none\"\n);\n\n// Line rendering component\nconst LineSpan = ({\n  keyedLine,\n  showLineNumbers,\n}: {\n  keyedLine: KeyedLine;\n  showLineNumbers: boolean;\n}) => (\n  <span className={showLineNumbers ? LINE_NUMBER_CLASSES : \"block\"}>\n    {keyedLine.tokens.length === 0\n      ? \"\\n\"\n      : keyedLine.tokens.map(({ token, key }) => (\n          <TokenSpan key={key} token={token} />\n        ))}\n  </span>\n);\n\n// Types\ntype CodeBlockProps = HTMLAttributes<HTMLDivElement> & {\n  code: string;\n  language: BundledLanguage;\n  showLineNumbers?: boolean;\n};\n\ninterface TokenizedCode {\n  tokens: ThemedToken[][];\n  fg: string;\n  bg: string;\n}\n\ninterface CodeBlockContextType {\n  code: string;\n}\n\n// Context\nconst CodeBlockContext = createContext<CodeBlockContextType>({\n  code: \"\",\n});\n\n// Maps every github-light/github-dark token color onto a --shiki-* CSS\n// variable backed by the design-token palette (defined in index.tailwind.css\n// for :root and .dark), so code colors follow the active theme and meet\n// WCAG AA contrast on --shiki-bg in both modes.\nconst SHIKI_COLOR_REPLACEMENTS: Record<string, Record<string, string>> = {\n  \"github-light\": {\n    \"#24292e\": \"var(--shiki-fg)\",\n    \"#6a737d\": \"var(--shiki-comment)\",\n    \"#586069\": \"var(--shiki-comment)\",\n    \"#d73a49\": \"var(--shiki-keyword)\",\n    \"#b31d28\": \"var(--shiki-keyword)\",\n    \"#005cc5\": \"var(--shiki-constant)\",\n    \"#6f42c1\": \"var(--shiki-entity)\",\n    \"#22863a\": \"var(--shiki-tag)\",\n    \"#032f62\": \"var(--shiki-string)\",\n    \"#e36209\": \"var(--shiki-variable)\",\n  },\n  \"github-dark\": {\n    \"#e1e4e8\": \"var(--shiki-fg)\",\n    \"#6a737d\": \"var(--shiki-comment)\",\n    \"#d1d5da\": \"var(--shiki-comment)\",\n    \"#f97583\": \"var(--shiki-keyword)\",\n    \"#fdaeb7\": \"var(--shiki-keyword)\",\n    \"#79b8ff\": \"var(--shiki-constant)\",\n    \"#b392f0\": \"var(--shiki-entity)\",\n    \"#85e89d\": \"var(--shiki-tag)\",\n    \"#9ecbff\": \"var(--shiki-string)\",\n    \"#dbedff\": \"var(--shiki-string)\",\n    \"#ffab70\": \"var(--shiki-variable)\",\n  },\n};\n\n// Token cache\nconst tokensCache = new Map<string, TokenizedCode>();\n\n// Subscribers for async token updates\nconst subscribers = new Map<string, Set<(result: TokenizedCode) => void>>();\n\nconst CACHE_KEY_SLICE_LENGTH = 100;\n\nconst getTokensCacheKey = (code: string, language: BundledLanguage) => {\n  const start = code.slice(0, CACHE_KEY_SLICE_LENGTH);\n  const end = code.length > CACHE_KEY_SLICE_LENGTH ? code.slice(-CACHE_KEY_SLICE_LENGTH) : \"\";\n  return `${language}:${code.length}:${start}:${end}`;\n};\n\n// Create raw tokens for immediate display while highlighting loads\nconst createRawTokens = (code: string): TokenizedCode => ({\n  bg: \"transparent\",\n  fg: \"inherit\",\n  tokens: code.split(\"\\n\").map((line) =>\n    line === \"\"\n      ? []\n      : [\n          {\n            color: \"inherit\",\n            content: line,\n          } as ThemedToken,\n        ]\n  ),\n});\n\n// Synchronous highlight with callback for async results\nexport const highlightCode = (\n  code: string,\n  language: BundledLanguage,\n  // oxlint-disable-next-line eslint-plugin-promise(prefer-await-to-callbacks)\n  callback?: (result: TokenizedCode) => void\n): TokenizedCode | null => {\n  const tokensCacheKey = getTokensCacheKey(code, language);\n\n  // Return cached result if available\n  const cached = tokensCache.get(tokensCacheKey);\n  if (cached) {\n    return cached;\n  }\n\n  // Subscribe callback if provided\n  if (callback) {\n    if (!subscribers.has(tokensCacheKey)) {\n      subscribers.set(tokensCacheKey, new Set());\n    }\n    subscribers.get(tokensCacheKey)?.add(callback);\n  }\n\n  // Start highlighting in background - fire-and-forget async pattern.\n  // The shared slim highlighter (SW-2007) loads shiki/core, the grammar, and\n  // the themes through dynamic imports; unsupported languages fall back to\n  // plaintext via the resolved `lang`.\n  getCodeBlockHighlighter(language)\n    // oxlint-disable-next-line eslint-plugin-promise(prefer-await-to-then)\n    .then(({ highlighter, lang }) => {\n      const result = highlighter.codeToTokens(code, {\n        colorReplacements: SHIKI_COLOR_REPLACEMENTS,\n        lang,\n        themes: {\n          dark: \"github-dark\",\n          light: \"github-light\",\n        },\n      });\n\n      const tokenized: TokenizedCode = {\n        bg: result.bg ?? \"transparent\",\n        fg: result.fg ?? \"inherit\",\n        tokens: result.tokens,\n      };\n\n      // Cache the result\n      tokensCache.set(tokensCacheKey, tokenized);\n\n      // Notify all subscribers\n      const subs = subscribers.get(tokensCacheKey);\n      if (subs) {\n        for (const sub of subs) {\n          sub(tokenized);\n        }\n        subscribers.delete(tokensCacheKey);\n      }\n    })\n    // oxlint-disable-next-line eslint-plugin-promise(prefer-await-to-then), eslint-plugin-promise(prefer-await-to-callbacks)\n    .catch((error) => {\n      console.error(\"Failed to highlight code:\", error);\n      subscribers.delete(tokensCacheKey);\n    });\n\n  return null;\n};\n\nconst CodeBlockBody = memo(\n  ({\n    tokenized,\n    showLineNumbers,\n    className,\n  }: {\n    tokenized: TokenizedCode;\n    showLineNumbers: boolean;\n    className?: string;\n  }) => {\n    const keyedLines = useMemo(\n      () => addKeysToTokens(tokenized.tokens),\n      [tokenized.tokens]\n    );\n\n    return (\n      <pre\n        className={cn(\n          // Shiki's dual-theme codeToTokens() returns \"transparent\"/\"inherit\"\n          // for the top-level bg/fg in multi-theme mode — the real per-theme\n          // colors only exist per-token (read via CSS vars in TokenSpan).\n          // --shiki-bg/--shiki-fg re-resolve under .dark, so no dark: variant\n          // is needed here.\n          \"!bg-[var(--shiki-bg)] !text-[var(--shiki-fg)] m-0 p-4 text-sm\",\n          className\n        )}\n      >\n        <code\n          className={cn(\n            \"font-mono text-sm\",\n            showLineNumbers && \"[counter-increment:line_0] [counter-reset:line]\"\n          )}\n        >\n          {keyedLines.map((keyedLine) => (\n            <LineSpan\n              key={keyedLine.key}\n              keyedLine={keyedLine}\n              showLineNumbers={showLineNumbers}\n            />\n          ))}\n        </code>\n      </pre>\n    );\n  },\n  (prevProps, nextProps) =>\n    prevProps.tokenized === nextProps.tokenized &&\n    prevProps.showLineNumbers === nextProps.showLineNumbers &&\n    prevProps.className === nextProps.className\n);\n\nCodeBlockBody.displayName = \"CodeBlockBody\";\n\nexport const CodeBlockContainer = ({\n  className,\n  language,\n  style,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & { language: string }) => (\n  <div\n    className={cn(\n      \"group relative w-full overflow-hidden rounded-md border bg-background text-foreground\",\n      className\n    )}\n    data-language={language}\n    style={{\n      containIntrinsicSize: \"auto 200px\",\n      contentVisibility: \"auto\",\n      ...style,\n    }}\n    {...props}\n  />\n);\n\nexport const CodeBlockHeader = ({\n  children,\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex items-center justify-between border-b bg-muted/80 px-3 py-2 text-muted-foreground text-xs\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nexport const CodeBlockTitle = ({\n  children,\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn(\"flex items-center gap-2\", className)} {...props}>\n    {children}\n  </div>\n);\n\nexport const CodeBlockFilename = ({\n  children,\n  className,\n  ...props\n}: HTMLAttributes<HTMLSpanElement>) => (\n  <span className={cn(\"font-mono\", className)} {...props}>\n    {children}\n  </span>\n);\n\nexport const CodeBlockActions = ({\n  children,\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"-my-1 -mr-1 flex items-center gap-2\", className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nexport const CodeBlockContent = ({\n  code,\n  language,\n  showLineNumbers = false,\n}: {\n  code: string;\n  language: BundledLanguage;\n  showLineNumbers?: boolean;\n}) => {\n  // Memoized raw tokens for immediate display\n  const rawTokens = useMemo(() => createRawTokens(code), [code]);\n\n  // Synchronous cache lookup — avoids setState in effect for cached results\n  const syncTokens = useMemo(\n    () => highlightCode(code, language) ?? rawTokens,\n    [code, language, rawTokens]\n  );\n\n  // Async highlighting result (populated after shiki loads)\n  const [asyncTokens, setAsyncTokens] = useState<TokenizedCode | null>(null);\n  const asyncKeyRef = useRef({ code, language });\n\n  // Invalidate stale async tokens synchronously during render\n  if (\n    asyncKeyRef.current.code !== code ||\n    asyncKeyRef.current.language !== language\n  ) {\n    asyncKeyRef.current = { code, language };\n    setAsyncTokens(null);\n  }\n\n  useEffect(() => {\n    let cancelled = false;\n\n    highlightCode(code, language, (result) => {\n      if (!cancelled) {\n        setAsyncTokens(result);\n      }\n    });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [code, language]);\n\n  const tokenized = asyncTokens ?? syncTokens;\n\n  return (\n    <div className=\"relative overflow-auto\" tabIndex={0}>\n      <CodeBlockBody showLineNumbers={showLineNumbers} tokenized={tokenized} />\n    </div>\n  );\n};\n\nexport const CodeBlock = ({\n  code,\n  language,\n  showLineNumbers = false,\n  className,\n  children,\n  ...props\n}: CodeBlockProps) => {\n  const contextValue = useMemo(() => ({ code }), [code]);\n\n  return (\n    <CodeBlockContext.Provider value={contextValue}>\n      <CodeBlockContainer className={className} language={language} {...props}>\n        {children}\n        <CodeBlockContent\n          code={code}\n          language={language}\n          showLineNumbers={showLineNumbers}\n        />\n      </CodeBlockContainer>\n    </CodeBlockContext.Provider>\n  );\n};\n\nexport type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {\n  onCopy?: () => void;\n  onError?: (error: Error) => void;\n  timeout?: number;\n};\n\nexport const CodeBlockCopyButton = ({\n  onCopy,\n  onError,\n  timeout = 2000,\n  children,\n  className,\n  ...props\n}: CodeBlockCopyButtonProps) => {\n  const [isCopied, setIsCopied] = useState(false);\n  const timeoutRef = useRef<number>(0);\n  const { code } = useContext(CodeBlockContext);\n\n  const copyToClipboard = useCallback(async () => {\n    if (typeof window === \"undefined\" || !navigator?.clipboard?.writeText) {\n      onError?.(new Error(\"Clipboard API not available\"));\n      return;\n    }\n\n    try {\n      if (!isCopied) {\n        await navigator.clipboard.writeText(code);\n        setIsCopied(true);\n        onCopy?.();\n        timeoutRef.current = window.setTimeout(\n          () => setIsCopied(false),\n          timeout\n        );\n      }\n    } catch (error) {\n      onError?.(error as Error);\n    }\n  }, [code, onCopy, onError, timeout, isCopied]);\n\n  useEffect(\n    () => () => {\n      window.clearTimeout(timeoutRef.current);\n    },\n    []\n  );\n\n  const Icon = isCopied ? CheckIcon : CopyIcon;\n\n  return (\n    <Button\n      aria-label=\"Copy code\"\n      className={cn(\"shrink-0\", className)}\n      onClick={copyToClipboard}\n      size=\"icon\"\n      variant=\"ghost\"\n      {...props}\n    >\n      {children ?? <Icon size={14} />}\n    </Button>\n  );\n};\n\nexport type CodeBlockLanguageSelectorProps = ComponentProps<typeof Select>;\n\nexport const CodeBlockLanguageSelector = (\n  props: CodeBlockLanguageSelectorProps\n) => <Select {...props} />;\n\nexport type CodeBlockLanguageSelectorTriggerProps = ComponentProps<\n  typeof SelectTrigger\n>;\n\nexport const CodeBlockLanguageSelectorTrigger = ({\n  className,\n  ...props\n}: CodeBlockLanguageSelectorTriggerProps) => (\n  <SelectTrigger\n    aria-label=\"Select language\"\n    className={cn(\n      \"h-7 border-none bg-transparent px-2 text-xs shadow-none\",\n      className\n    )}\n    size=\"sm\"\n    {...props}\n  />\n);\n\nexport type CodeBlockLanguageSelectorValueProps = ComponentProps<\n  typeof SelectValue\n>;\n\nexport const CodeBlockLanguageSelectorValue = (\n  props: CodeBlockLanguageSelectorValueProps\n) => <SelectValue {...props} />;\n\nexport type CodeBlockLanguageSelectorContentProps = ComponentProps<\n  typeof SelectContent\n>;\n\nexport const CodeBlockLanguageSelectorContent = ({\n  align = \"end\",\n  ...props\n}: CodeBlockLanguageSelectorContentProps) => (\n  <SelectContent align={align} {...props} />\n);\n\nexport type CodeBlockLanguageSelectorItemProps = ComponentProps<\n  typeof SelectItem\n>;\n\nexport const CodeBlockLanguageSelectorItem = (\n  props: CodeBlockLanguageSelectorItemProps\n) => <SelectItem {...props} />;\n"],"names":["isItalic","fontStyle","isBold","isUnderline","addKeysToTokens","lines","line","lineIdx","token","tokenIdx","TokenSpan","jsx","LINE_NUMBER_CLASSES","cn","LineSpan","keyedLine","showLineNumbers","key","CodeBlockContext","createContext","SHIKI_COLOR_REPLACEMENTS","tokensCache","subscribers","CACHE_KEY_SLICE_LENGTH","getTokensCacheKey","code","language","start","end","createRawTokens","highlightCode","callback","tokensCacheKey","cached","getCodeBlockHighlighter","highlighter","lang","result","tokenized","subs","sub","error","CodeBlockBody","memo","className","keyedLines","useMemo","prevProps","nextProps","CodeBlockContainer","style","props","CodeBlockHeader","children","CodeBlockTitle","CodeBlockFilename","CodeBlockActions","CodeBlockContent","rawTokens","syncTokens","asyncTokens","setAsyncTokens","useState","asyncKeyRef","useRef","useEffect","cancelled","CodeBlock","contextValue","jsxs","CodeBlockCopyButton","onCopy","onError","timeout","isCopied","setIsCopied","timeoutRef","useContext","copyToClipboard","useCallback","Icon","CheckIcon","CopyIcon","Button","CodeBlockLanguageSelector","Select","CodeBlockLanguageSelectorTrigger","SelectTrigger","CodeBlockLanguageSelectorValue","SelectValue","CodeBlockLanguageSelectorContent","align","SelectContent","CodeBlockLanguageSelectorItem","SelectItem"],"mappings":";;;;;;;AA+BA,MAAMA,IAAW,CAACC,MAAkCA,KAAaA,IAAY,GAEvEC,IAAS,CAACD,MAAkCA,KAAaA,IAAY,GACrEE,IAAc,CAACF;AAAA;AAAA,EAEnBA,KAAaA,IAAY;AAAA,GAYrBG,IAAkB,CAACC,MACvBA,EAAM,IAAI,CAACC,GAAMC,OAAa;AAAA,EAC5B,KAAK,QAAQA,CAAO;AAAA,EACpB,QAAQD,EAAK,IAAI,CAACE,GAAOC,OAAc;AAAA,IACrC,KAAK,QAAQF,CAAO,IAAIE,CAAQ;AAAA,IAChC,OAAAD;AAAA,EAAA,EACA;AACJ,EAAE,GAGEE,IAAY,CAAC,EAAE,OAAAF,EAAA,MACnB,gBAAAG;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,OACE;AAAA,MACE,iBAAiBH,EAAM;AAAA,MACvB,OAAOA,EAAM;AAAA,MACb,WAAWR,EAASQ,EAAM,SAAS,IAAI,WAAW;AAAA,MAClD,YAAYN,EAAOM,EAAM,SAAS,IAAI,SAAS;AAAA,MAC/C,gBAAgBL,EAAYK,EAAM,SAAS,IAAI,cAAc;AAAA,MAC7D,GAAGA,EAAM;AAAA,IAAA;AAAA,IAIZ,UAAAA,EAAM;AAAA,EAAA;AACT,GAIII,IAAsBC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAGMC,IAAW,CAAC;AAAA,EAChB,WAAAC;AAAA,EACA,iBAAAC;AACF,MAIE,gBAAAL,EAAC,QAAA,EAAK,WAAWK,IAAkBJ,IAAsB,SACtD,UAAAG,EAAU,OAAO,WAAW,IACzB;AAAA,IACAA,EAAU,OAAO,IAAI,CAAC,EAAE,OAAAP,GAAO,KAAAS,EAAA,wBAC5BP,GAAA,EAAoB,OAAAF,EAAA,GAALS,CAAmB,CACpC,EAAA,CACP,GAqBIC,IAAmBC,EAAoC;AAAA,EAC3D,MAAM;AACR,CAAC,GAMKC,IAAmE;AAAA,EACvE,gBAAgB;AAAA,IACd,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,EAAA;AAAA,EAEb,eAAe;AAAA,IACb,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,EAAA;AAEf,GAGMC,wBAAkB,IAAA,GAGlBC,wBAAkB,IAAA,GAElBC,IAAyB,KAEzBC,IAAoB,CAACC,GAAcC,MAA8B;AACrE,QAAMC,IAAQF,EAAK,MAAM,GAAGF,CAAsB,GAC5CK,IAAMH,EAAK,SAASF,IAAyBE,EAAK,MAAM,CAACF,CAAsB,IAAI;AACzF,SAAO,GAAGG,CAAQ,IAAID,EAAK,MAAM,IAAIE,CAAK,IAAIC,CAAG;AACnD,GAGMC,IAAkB,CAACJ,OAAiC;AAAA,EACxD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,QAAQA,EAAK,MAAM;AAAA,CAAI,EAAE;AAAA,IAAI,CAACnB,MAC5BA,MAAS,KACL,KACA;AAAA,MACE;AAAA,QACE,OAAO;AAAA,QACP,SAASA;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAER,IAGawB,IAAgB,CAC3BL,GACAC,GAEAK,MACyB;AACzB,QAAMC,IAAiBR,EAAkBC,GAAMC,CAAQ,GAGjDO,IAASZ,EAAY,IAAIW,CAAc;AAC7C,SAAIC,MAKAF,MACGT,EAAY,IAAIU,CAAc,KACjCV,EAAY,IAAIU,GAAgB,oBAAI,IAAA,CAAK,GAE3CV,EAAY,IAAIU,CAAc,GAAG,IAAID,CAAQ,IAO/CG,EAAwBR,CAAQ,EAE7B,KAAK,CAAC,EAAE,aAAAS,GAAa,MAAAC,QAAW;AAC/B,UAAMC,IAASF,EAAY,aAAaV,GAAM;AAAA,MAC5C,mBAAmBL;AAAA,MACnB,MAAAgB;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT,CACD,GAEKE,IAA2B;AAAA,MAC/B,IAAID,EAAO,MAAM;AAAA,MACjB,IAAIA,EAAO,MAAM;AAAA,MACjB,QAAQA,EAAO;AAAA,IAAA;AAIjB,IAAAhB,EAAY,IAAIW,GAAgBM,CAAS;AAGzC,UAAMC,IAAOjB,EAAY,IAAIU,CAAc;AAC3C,QAAIO,GAAM;AACR,iBAAWC,KAAOD;AAChB,QAAAC,EAAIF,CAAS;AAEf,MAAAhB,EAAY,OAAOU,CAAc;AAAA,IACnC;AAAA,EACF,CAAC,EAEA,MAAM,CAACS,MAAU;AAChB,YAAQ,MAAM,6BAA6BA,CAAK,GAChDnB,EAAY,OAAOU,CAAc;AAAA,EACnC,CAAC,GAEI;AACT,GAEMU,IAAgBC;AAAA,EACpB,CAAC;AAAA,IACC,WAAAL;AAAA,IACA,iBAAAtB;AAAA,IACA,WAAA4B;AAAA,EAAA,MAKI;AACJ,UAAMC,IAAaC;AAAA,MACjB,MAAM1C,EAAgBkC,EAAU,MAAM;AAAA,MACtC,CAACA,EAAU,MAAM;AAAA,IAAA;AAGnB,WACE,gBAAA3B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMT;AAAA,UACA+B;AAAA,QAAA;AAAA,QAGF,UAAA,gBAAAjC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE;AAAA,cACT;AAAA,cACAG,KAAmB;AAAA,YAAA;AAAA,YAGpB,UAAA6B,EAAW,IAAI,CAAC9B,MACf,gBAAAJ;AAAA,cAACG;AAAA,cAAA;AAAA,gBAEC,WAAAC;AAAA,gBACA,iBAAAC;AAAA,cAAA;AAAA,cAFKD,EAAU;AAAA,YAAA,CAIlB;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AAAA,EACA,CAACgC,GAAWC,MACVD,EAAU,cAAcC,EAAU,aAClCD,EAAU,oBAAoBC,EAAU,mBACxCD,EAAU,cAAcC,EAAU;AACtC;AAEAN,EAAc,cAAc;AAErB,MAAMO,IAAqB,CAAC;AAAA,EACjC,WAAAL;AAAA,EACA,UAAAlB;AAAA,EACA,OAAAwB;AAAA,EACA,GAAGC;AACL,MACE,gBAAAxC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWE;AAAA,MACT;AAAA,MACA+B;AAAA,IAAA;AAAA,IAEF,iBAAelB;AAAA,IACf,OAAO;AAAA,MACL,sBAAsB;AAAA,MACtB,mBAAmB;AAAA,MACnB,GAAGwB;AAAA,IAAA;AAAA,IAEJ,GAAGC;AAAA,EAAA;AACN,GAGWC,KAAkB,CAAC;AAAA,EAC9B,UAAAC;AAAA,EACA,WAAAT;AAAA,EACA,GAAGO;AACL,MACE,gBAAAxC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWE;AAAA,MACT;AAAA,MACA+B;AAAA,IAAA;AAAA,IAED,GAAGO;AAAA,IAEH,UAAAE;AAAA,EAAA;AACH,GAGWC,KAAiB,CAAC;AAAA,EAC7B,UAAAD;AAAA,EACA,WAAAT;AAAA,EACA,GAAGO;AACL,MACE,gBAAAxC,EAAC,SAAI,WAAWE,EAAG,2BAA2B+B,CAAS,GAAI,GAAGO,GAC3D,UAAAE,EAAA,CACH,GAGWE,KAAoB,CAAC;AAAA,EAChC,UAAAF;AAAA,EACA,WAAAT;AAAA,EACA,GAAGO;AACL,MACE,gBAAAxC,EAAC,UAAK,WAAWE,EAAG,aAAa+B,CAAS,GAAI,GAAGO,GAC9C,UAAAE,EAAA,CACH,GAGWG,KAAmB,CAAC;AAAA,EAC/B,UAAAH;AAAA,EACA,WAAAT;AAAA,EACA,GAAGO;AACL,MACE,gBAAAxC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWE,EAAG,uCAAuC+B,CAAS;AAAA,IAC7D,GAAGO;AAAA,IAEH,UAAAE;AAAA,EAAA;AACH,GAGWI,IAAmB,CAAC;AAAA,EAC/B,MAAAhC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAV,IAAkB;AACpB,MAIM;AAEJ,QAAM0C,IAAYZ,EAAQ,MAAMjB,EAAgBJ,CAAI,GAAG,CAACA,CAAI,CAAC,GAGvDkC,IAAab;AAAA,IACjB,MAAMhB,EAAcL,GAAMC,CAAQ,KAAKgC;AAAA,IACvC,CAACjC,GAAMC,GAAUgC,CAAS;AAAA,EAAA,GAItB,CAACE,GAAaC,CAAc,IAAIC,EAA+B,IAAI,GACnEC,IAAcC,EAAO,EAAE,MAAAvC,GAAM,UAAAC,GAAU;AAG7C,UACEqC,EAAY,QAAQ,SAAStC,KAC7BsC,EAAY,QAAQ,aAAarC,OAEjCqC,EAAY,UAAU,EAAE,MAAAtC,GAAM,UAAAC,EAAA,GAC9BmC,EAAe,IAAI,IAGrBI,EAAU,MAAM;AACd,QAAIC,IAAY;AAEhB,WAAApC,EAAcL,GAAMC,GAAU,CAACW,MAAW;AACxC,MAAK6B,KACHL,EAAexB,CAAM;AAAA,IAEzB,CAAC,GAEM,MAAM;AACX,MAAA6B,IAAY;AAAA,IACd;AAAA,EACF,GAAG,CAACzC,GAAMC,CAAQ,CAAC,GAKjB,gBAAAf,EAAC,OAAA,EAAI,WAAU,0BAAyB,UAAU,GAChD,UAAA,gBAAAA,EAAC+B,GAAA,EAAc,iBAAA1B,GAAkC,WAJnC4C,KAAeD,EAIoB,CAAsB,EAAA,CACzE;AAEJ,GAEaQ,KAAY,CAAC;AAAA,EACxB,MAAA1C;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAV,IAAkB;AAAA,EAClB,WAAA4B;AAAA,EACA,UAAAS;AAAA,EACA,GAAGF;AACL,MAAsB;AACpB,QAAMiB,IAAetB,EAAQ,OAAO,EAAE,MAAArB,MAAS,CAACA,CAAI,CAAC;AAErD,SACE,gBAAAd,EAACO,EAAiB,UAAjB,EAA0B,OAAOkD,GAChC,UAAA,gBAAAC,EAACpB,GAAA,EAAmB,WAAAL,GAAsB,UAAAlB,GAAqB,GAAGyB,GAC/D,UAAA;AAAA,IAAAE;AAAA,IACD,gBAAA1C;AAAA,MAAC8C;AAAA,MAAA;AAAA,QACC,MAAAhC;AAAA,QACA,UAAAC;AAAA,QACA,iBAAAV;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,EAAA,CACF,EAAA,CACF;AAEJ,GAQasD,KAAsB,CAAC;AAAA,EAClC,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAApB;AAAA,EACA,WAAAT;AAAA,EACA,GAAGO;AACL,MAAgC;AAC9B,QAAM,CAACuB,GAAUC,CAAW,IAAIb,EAAS,EAAK,GACxCc,IAAaZ,EAAe,CAAC,GAC7B,EAAE,MAAAvC,EAAA,IAASoD,EAAW3D,CAAgB,GAEtC4D,IAAkBC,EAAY,YAAY;AAC9C,QAAI,OAAO,SAAW,OAAe,CAAC,WAAW,WAAW,WAAW;AACrE,MAAAP,IAAU,IAAI,MAAM,6BAA6B,CAAC;AAClD;AAAA,IACF;AAEA,QAAI;AACF,MAAKE,MACH,MAAM,UAAU,UAAU,UAAUjD,CAAI,GACxCkD,EAAY,EAAI,GAChBJ,IAAA,GACAK,EAAW,UAAU,OAAO;AAAA,QAC1B,MAAMD,EAAY,EAAK;AAAA,QACvBF;AAAA,MAAA;AAAA,IAGN,SAAShC,GAAO;AACd,MAAA+B,IAAU/B,CAAc;AAAA,IAC1B;AAAA,EACF,GAAG,CAAChB,GAAM8C,GAAQC,GAASC,GAASC,CAAQ,CAAC;AAE7C,EAAAT;AAAA,IACE,MAAM,MAAM;AACV,aAAO,aAAaW,EAAW,OAAO;AAAA,IACxC;AAAA,IACA,CAAA;AAAA,EAAC;AAGH,QAAMI,IAAON,IAAWO,IAAYC;AAEpC,SACE,gBAAAvE;AAAA,IAACwE;AAAA,IAAA;AAAA,MACC,cAAW;AAAA,MACX,WAAWtE,EAAG,YAAY+B,CAAS;AAAA,MACnC,SAASkC;AAAA,MACT,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAG3B;AAAA,MAEH,UAAAE,KAAY,gBAAA1C,EAACqE,GAAA,EAAK,MAAM,GAAA,CAAI;AAAA,IAAA;AAAA,EAAA;AAGnC,GAIaI,KAA4B,CACvCjC,MACG,gBAAAxC,EAAC0E,GAAA,EAAQ,GAAGlC,EAAA,CAAO,GAMXmC,KAAmC,CAAC;AAAA,EAC/C,WAAA1C;AAAA,EACA,GAAGO;AACL,MACE,gBAAAxC;AAAA,EAAC4E;AAAA,EAAA;AAAA,IACC,cAAW;AAAA,IACX,WAAW1E;AAAA,MACT;AAAA,MACA+B;AAAA,IAAA;AAAA,IAEF,MAAK;AAAA,IACJ,GAAGO;AAAA,EAAA;AACN,GAOWqC,KAAiC,CAC5CrC,MACG,gBAAAxC,EAAC8E,GAAA,EAAa,GAAGtC,EAAA,CAAO,GAMhBuC,KAAmC,CAAC;AAAA,EAC/C,OAAAC,IAAQ;AAAA,EACR,GAAGxC;AACL,MACE,gBAAAxC,EAACiF,GAAA,EAAc,OAAAD,GAAe,GAAGxC,EAAA,CAAO,GAO7B0C,KAAgC,CAC3C1C,MACG,gBAAAxC,EAACmF,GAAA,EAAY,GAAG3C,EAAA,CAAO;"}

package/dist/ui/code-editor.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),_=require("@monaco-editor/react"),h=require("lucide-react"),i=require("react"),m=require("./button.cjs"),o=require("./tooltip.cjs"),k=require("../hooks/use-code-editor-theme.cjs"),N=require("../lib/utils.cjs"),R={light:"vs",dark:"vs-dark"},p=({value:r,onChange:f,language:x="python",theme:c,height:j=400,width:C="100%",options:T={},onCopy:l,onLaunch:n,disabled:t=!1})=>{const y=k.useCodeEditorTheme(),E=i.useRef(null),[v,a]=i.useState("Copy"),[S,u]=i.useState("Launch"),d=1e3,g=i.useCallback(s=>{l&&!t&&(l(s),a("Copied"),setTimeout(()=>{a("Copy")},d))},[l,t]),b=i.useCallback(s=>{n&&!t&&(n(s),u("Launched"),setTimeout(()=>{u("Launch")},d))},[n,t]),q=async s=>{E.current=s},M={minimap:{enabled:!1},scrollBeyondLastLine:!1,lineNumbers:"on",padding:{top:12,bottom:12,left:20,right:20},scrollbar:{vertical:"hidden",verticalScrollbarSize:0},readOnly:t,...T};return e.jsxs("div",{className:N.cn("rounded-2xl overflow-hidden relative border",t&&"opacity-60 cursor-not-allowed"),children:[e.jsxs("div",{className:"ml-auto flex gap-2 px-4 py-2 absolute top-0 right-0 z-[1]",children:[l&&e.jsxs(o.Tooltip,{children:[e.jsx(o.TooltipTrigger,{asChild:!0,children:e.jsx("div",{className:"w-8 h-8 flex items-center justify-center",children:e.jsx(m.Button,{className:"w-full h-full",variant:"outline",size:"icon-sm",onClick:()=>g(r),disabled:t,"aria-label":"Copy code",children:e.jsx(h.Copy,{})})})}),e.jsx(o.TooltipContent,{side:"bottom",children:v})]}),n&&e.jsxs(o.Tooltip,{children:[e.jsx(o.TooltipTrigger,{asChild:!0,children:e.jsx("div",{className:"w-8 h-8 flex items-center justify-center",children:e.jsx(m.Button,{className:"w-full h-full",variant:"outline",size:"icon-sm",onClick:()=>b(r),disabled:t,"aria-label":"Launch code",children:e.jsx(h.Rocket,{})})})}),e.jsx(o.TooltipContent,{side:"bottom",children:S})]})]}),e.jsx(_,{value:r,onChange:f,language:x,theme:c?R[c]:y.monacoTheme,height:j,width:C,options:M,beforeMount:q})]})};exports.CodeEditor=p;exports.default=p;
+//# sourceMappingURL=code-editor.cjs.map

package/dist/ui/code-editor.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-editor.cjs","sources":["../../src/components/ui/code-editor.tsx"],"sourcesContent":["import MonacoEditor from \"@monaco-editor/react\";\nimport { Copy, Rocket } from \"lucide-react\";\nimport React, { useCallback, useRef, useState } from \"react\";\n\nimport type { Monaco, OnChange } from \"@monaco-editor/react\";\nimport type { editor } from \"monaco-editor\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/ui/tooltip\";\nimport { useCodeEditorTheme } from \"@/hooks/use-code-editor-theme\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface CodeEditorProps {\n  value: string;\n  onChange: OnChange;\n  language?: string;\n  theme?: \"light\" | \"dark\";\n  height?: string | number;\n  width?: string | number;\n  options?: Record<string, unknown>;\n  label?: string;\n  onCopy?: (code: string) => void;\n  onLaunch?: (code: string) => void;\n  disabled?: boolean;\n}\n\n// Theme mapping for explicit theme prop overrides\nconst THEME_MAP = {\n  light: \"vs\" as const,\n  dark: \"vs-dark\" as const,\n};\n\nconst CodeEditor: React.FC<CodeEditorProps> = ({\n  value,\n  onChange,\n  language = \"python\",\n  theme: themeProp,\n  height = 400,\n  width = \"100%\",\n  options = {},\n  onCopy,\n  onLaunch,\n  disabled = false,\n}) => {\n  const editorTheme = useCodeEditorTheme();\n\n  const monacoRef = useRef<Monaco | null>(null);\n  const [copyState, setCopyState] = useState<\"Copy\" | \"Copied\">(\"Copy\");\n  const [launchState, setLaunchState] = useState<\"Launch\" | \"Launched\">(\n    \"Launch\"\n  );\n  /** Feedback reset delay in milliseconds */\n  const FEEDBACK_RESET_DELAY_MS = 1000;\n\n  const handleCopy = useCallback(\n    (code: string) => {\n      if (onCopy && !disabled) {\n        onCopy(code);\n        setCopyState(\"Copied\");\n        setTimeout(() => {\n          setCopyState(\"Copy\");\n        }, FEEDBACK_RESET_DELAY_MS);\n      }\n    },\n    [onCopy, disabled]\n  );\n\n  const handleLaunch = useCallback(\n    (code: string) => {\n      if (onLaunch && !disabled) {\n        onLaunch(code);\n        setLaunchState(\"Launched\");\n        setTimeout(() => {\n          setLaunchState(\"Launch\");\n        }, FEEDBACK_RESET_DELAY_MS);\n      }\n    },\n    [onLaunch, disabled]\n  );\n\n  const handleEditorWillMount = async (monaco: Monaco) => {\n    monacoRef.current = monaco;\n  };\n\n  const defaultOptions = {\n    minimap: { enabled: false },\n    scrollBeyondLastLine: false,\n    lineNumbers: \"on\" as editor.LineNumbersType,\n    padding: { top: 12, bottom: 12, left: 20, right: 20 },\n    scrollbar: {\n      vertical: \"hidden\" as const,\n      verticalScrollbarSize: 0,\n    },\n    readOnly: disabled,\n    ...options,\n  };\n\n\n\n  return (\n    <div className={cn(\"rounded-2xl overflow-hidden relative border\", disabled && \"opacity-60 cursor-not-allowed\")}>\n      <div className=\"ml-auto flex gap-2 px-4 py-2 absolute top-0 right-0 z-[1]\">\n        {onCopy && (\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <div className=\"w-8 h-8 flex items-center justify-center\">\n                <Button\n                  className=\"w-full h-full\"\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  onClick={() => handleCopy(value)}\n                  disabled={disabled}\n                  aria-label=\"Copy code\"\n                >\n                  <Copy />\n                </Button>\n              </div>\n            </TooltipTrigger>\n            <TooltipContent side=\"bottom\">\n              {copyState}\n            </TooltipContent>\n          </Tooltip>\n        )}\n        {onLaunch && (\n          <Tooltip >\n            <TooltipTrigger asChild>\n              <div className=\"w-8 h-8 flex items-center justify-center\">\n                <Button\n                  className=\"w-full h-full\"\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  onClick={() => handleLaunch(value)}\n                  disabled={disabled}\n                  aria-label=\"Launch code\"\n                >\n                  <Rocket />\n                </Button>\n              </div>\n            </TooltipTrigger>\n            <TooltipContent side=\"bottom\">\n              {launchState}\n            </TooltipContent>\n          </Tooltip>\n        )}\n      </div>\n      <MonacoEditor\n        value={value}\n        onChange={onChange}\n        language={language}\n        theme={themeProp ? THEME_MAP[themeProp] : editorTheme.monacoTheme}\n        height={height}\n        width={width}\n        options={defaultOptions}\n        beforeMount={handleEditorWillMount}\n      />\n    </div>\n  );\n};\n\nexport { CodeEditor };\nexport default CodeEditor;\n"],"names":["THEME_MAP","CodeEditor","value","onChange","language","themeProp","height","width","options","onCopy","onLaunch","disabled","editorTheme","useCodeEditorTheme","monacoRef","useRef","copyState","setCopyState","useState","launchState","setLaunchState","FEEDBACK_RESET_DELAY_MS","handleCopy","useCallback","code","handleLaunch","handleEditorWillMount","monaco","defaultOptions","cn","jsxs","Tooltip","jsx","TooltipTrigger","Button","Copy","TooltipContent","Rocket","MonacoEditor"],"mappings":"mWA2BMA,EAAY,CAChB,MAAO,KACP,KAAM,SACR,EAEMC,EAAwC,CAAC,CAC7C,MAAAC,EACA,SAAAC,EACA,SAAAC,EAAW,SACX,MAAOC,EACP,OAAAC,EAAS,IACT,MAAAC,EAAQ,OACR,QAAAC,EAAU,CAAA,EACV,OAAAC,EACA,SAAAC,EACA,SAAAC,EAAW,EACb,IAAM,CACJ,MAAMC,EAAcC,EAAAA,mBAAA,EAEdC,EAAYC,EAAAA,OAAsB,IAAI,EACtC,CAACC,EAAWC,CAAY,EAAIC,EAAAA,SAA4B,MAAM,EAC9D,CAACC,EAAaC,CAAc,EAAIF,EAAAA,SACpC,QAAA,EAGIG,EAA0B,IAE1BC,EAAaC,EAAAA,YAChBC,GAAiB,CACZf,GAAU,CAACE,IACbF,EAAOe,CAAI,EACXP,EAAa,QAAQ,EACrB,WAAW,IAAM,CACfA,EAAa,MAAM,CACrB,EAAGI,CAAuB,EAE9B,EACA,CAACZ,EAAQE,CAAQ,CAAA,EAGbc,EAAeF,EAAAA,YAClBC,GAAiB,CACZd,GAAY,CAACC,IACfD,EAASc,CAAI,EACbJ,EAAe,UAAU,EACzB,WAAW,IAAM,CACfA,EAAe,QAAQ,CACzB,EAAGC,CAAuB,EAE9B,EACA,CAACX,EAAUC,CAAQ,CAAA,EAGfe,EAAwB,MAAOC,GAAmB,CACtDb,EAAU,QAAUa,CACtB,EAEMC,EAAiB,CACrB,QAAS,CAAE,QAAS,EAAA,EACpB,qBAAsB,GACtB,YAAa,KACb,QAAS,CAAE,IAAK,GAAI,OAAQ,GAAI,KAAM,GAAI,MAAO,EAAA,EACjD,UAAW,CACT,SAAU,SACV,sBAAuB,CAAA,EAEzB,SAAUjB,EACV,GAAGH,CAAA,EAKL,cACG,MAAA,CAAI,UAAWqB,EAAAA,GAAG,8CAA+ClB,GAAY,+BAA+B,EAC3G,SAAA,CAAAmB,EAAAA,KAAC,MAAA,CAAI,UAAU,4DACZ,SAAA,CAAArB,UACEsB,UAAA,CACC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,gBAAe,QAAO,GACrB,SAAAD,MAAC,MAAA,CAAI,UAAU,2CACb,SAAAA,EAAAA,IAACE,EAAAA,OAAA,CACC,UAAU,gBACV,QAAQ,UACR,KAAK,UACL,QAAS,IAAMZ,EAAWpB,CAAK,EAC/B,SAAAS,EACA,aAAW,YAEX,eAACwB,EAAAA,KAAA,CAAA,CAAK,CAAA,CAAA,EAEV,CAAA,CACF,EACAH,EAAAA,IAACI,EAAAA,eAAA,CAAe,KAAK,SAClB,SAAApB,CAAA,CACH,CAAA,EACF,EAEDN,UACEqB,UAAA,CACC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,gBAAe,QAAO,GACrB,SAAAD,MAAC,MAAA,CAAI,UAAU,2CACb,SAAAA,EAAAA,IAACE,EAAAA,OAAA,CACC,UAAU,gBACV,QAAQ,UACR,KAAK,UACL,QAAS,IAAMT,EAAavB,CAAK,EACjC,SAAAS,EACA,aAAW,cAEX,eAAC0B,EAAAA,OAAA,CAAA,CAAO,CAAA,CAAA,EAEZ,CAAA,CACF,EACAL,EAAAA,IAACI,EAAAA,eAAA,CAAe,KAAK,SAClB,SAAAjB,CAAA,CACH,CAAA,CAAA,CACF,CAAA,EAEJ,EACAa,EAAAA,IAACM,EAAA,CACC,MAAApC,EACA,SAAAC,EACA,SAAAC,EACA,MAAOC,EAAYL,EAAUK,CAAS,EAAIO,EAAY,YACtD,OAAAN,EACA,MAAAC,EACA,QAASqB,EACT,YAAaF,CAAA,CAAA,CACf,EACF,CAEJ"}

package/dist/ui/code-editor.js

@@ -0,0 +1,106 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import j from "@monaco-editor/react";
+import { Copy as z, Rocket as R } from "lucide-react";
+import { useRef as _, useState as d, useCallback as h } from "react";
+import { Button as u } from "./button.js";
+import { Tooltip as f, TooltipTrigger as p, TooltipContent as C } from "./tooltip.js";
+import { useCodeEditorTheme as A } from "../hooks/use-code-editor-theme.js";
+import { cn as B } from "../lib/utils.js";
+const D = {
+  light: "vs",
+  dark: "vs-dark"
+}, I = ({
+  value: n,
+  onChange: y,
+  language: E = "python",
+  theme: c,
+  height: T = 400,
+  width: v = "100%",
+  options: S = {},
+  onCopy: r,
+  onLaunch: i,
+  disabled: t = !1
+}) => {
+  const x = A(), g = _(null), [N, a] = d("Copy"), [b, s] = d(
+    "Launch"
+  ), m = 1e3, k = h(
+    (o) => {
+      r && !t && (r(o), a("Copied"), setTimeout(() => {
+        a("Copy");
+      }, m));
+    },
+    [r, t]
+  ), w = h(
+    (o) => {
+      i && !t && (i(o), s("Launched"), setTimeout(() => {
+        s("Launch");
+      }, m));
+    },
+    [i, t]
+  ), L = async (o) => {
+    g.current = o;
+  }, M = {
+    minimap: { enabled: !1 },
+    scrollBeyondLastLine: !1,
+    lineNumbers: "on",
+    padding: { top: 12, bottom: 12, left: 20, right: 20 },
+    scrollbar: {
+      vertical: "hidden",
+      verticalScrollbarSize: 0
+    },
+    readOnly: t,
+    ...S
+  };
+  return /* @__PURE__ */ l("div", { className: B("rounded-2xl overflow-hidden relative border", t && "opacity-60 cursor-not-allowed"), children: [
+    /* @__PURE__ */ l("div", { className: "ml-auto flex gap-2 px-4 py-2 absolute top-0 right-0 z-[1]", children: [
+      r && /* @__PURE__ */ l(f, { children: [
+        /* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "w-8 h-8 flex items-center justify-center", children: /* @__PURE__ */ e(
+          u,
+          {
+            className: "w-full h-full",
+            variant: "outline",
+            size: "icon-sm",
+            onClick: () => k(n),
+            disabled: t,
+            "aria-label": "Copy code",
+            children: /* @__PURE__ */ e(z, {})
+          }
+        ) }) }),
+        /* @__PURE__ */ e(C, { side: "bottom", children: N })
+      ] }),
+      i && /* @__PURE__ */ l(f, { children: [
+        /* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "w-8 h-8 flex items-center justify-center", children: /* @__PURE__ */ e(
+          u,
+          {
+            className: "w-full h-full",
+            variant: "outline",
+            size: "icon-sm",
+            onClick: () => w(n),
+            disabled: t,
+            "aria-label": "Launch code",
+            children: /* @__PURE__ */ e(R, {})
+          }
+        ) }) }),
+        /* @__PURE__ */ e(C, { side: "bottom", children: b })
+      ] })
+    ] }),
+    /* @__PURE__ */ e(
+      j,
+      {
+        value: n,
+        onChange: y,
+        language: E,
+        theme: c ? D[c] : x.monacoTheme,
+        height: T,
+        width: v,
+        options: M,
+        beforeMount: L
+      }
+    )
+  ] });
+};
+export {
+  I as CodeEditor,
+  I as default
+};
+//# sourceMappingURL=code-editor.js.map

package/dist/ui/code-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-editor.js","sources":["../../src/components/ui/code-editor.tsx"],"sourcesContent":["import MonacoEditor from \"@monaco-editor/react\";\nimport { Copy, Rocket } from \"lucide-react\";\nimport React, { useCallback, useRef, useState } from \"react\";\n\nimport type { Monaco, OnChange } from \"@monaco-editor/react\";\nimport type { editor } from \"monaco-editor\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/ui/tooltip\";\nimport { useCodeEditorTheme } from \"@/hooks/use-code-editor-theme\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface CodeEditorProps {\n  value: string;\n  onChange: OnChange;\n  language?: string;\n  theme?: \"light\" | \"dark\";\n  height?: string | number;\n  width?: string | number;\n  options?: Record<string, unknown>;\n  label?: string;\n  onCopy?: (code: string) => void;\n  onLaunch?: (code: string) => void;\n  disabled?: boolean;\n}\n\n// Theme mapping for explicit theme prop overrides\nconst THEME_MAP = {\n  light: \"vs\" as const,\n  dark: \"vs-dark\" as const,\n};\n\nconst CodeEditor: React.FC<CodeEditorProps> = ({\n  value,\n  onChange,\n  language = \"python\",\n  theme: themeProp,\n  height = 400,\n  width = \"100%\",\n  options = {},\n  onCopy,\n  onLaunch,\n  disabled = false,\n}) => {\n  const editorTheme = useCodeEditorTheme();\n\n  const monacoRef = useRef<Monaco | null>(null);\n  const [copyState, setCopyState] = useState<\"Copy\" | \"Copied\">(\"Copy\");\n  const [launchState, setLaunchState] = useState<\"Launch\" | \"Launched\">(\n    \"Launch\"\n  );\n  /** Feedback reset delay in milliseconds */\n  const FEEDBACK_RESET_DELAY_MS = 1000;\n\n  const handleCopy = useCallback(\n    (code: string) => {\n      if (onCopy && !disabled) {\n        onCopy(code);\n        setCopyState(\"Copied\");\n        setTimeout(() => {\n          setCopyState(\"Copy\");\n        }, FEEDBACK_RESET_DELAY_MS);\n      }\n    },\n    [onCopy, disabled]\n  );\n\n  const handleLaunch = useCallback(\n    (code: string) => {\n      if (onLaunch && !disabled) {\n        onLaunch(code);\n        setLaunchState(\"Launched\");\n        setTimeout(() => {\n          setLaunchState(\"Launch\");\n        }, FEEDBACK_RESET_DELAY_MS);\n      }\n    },\n    [onLaunch, disabled]\n  );\n\n  const handleEditorWillMount = async (monaco: Monaco) => {\n    monacoRef.current = monaco;\n  };\n\n  const defaultOptions = {\n    minimap: { enabled: false },\n    scrollBeyondLastLine: false,\n    lineNumbers: \"on\" as editor.LineNumbersType,\n    padding: { top: 12, bottom: 12, left: 20, right: 20 },\n    scrollbar: {\n      vertical: \"hidden\" as const,\n      verticalScrollbarSize: 0,\n    },\n    readOnly: disabled,\n    ...options,\n  };\n\n\n\n  return (\n    <div className={cn(\"rounded-2xl overflow-hidden relative border\", disabled && \"opacity-60 cursor-not-allowed\")}>\n      <div className=\"ml-auto flex gap-2 px-4 py-2 absolute top-0 right-0 z-[1]\">\n        {onCopy && (\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <div className=\"w-8 h-8 flex items-center justify-center\">\n                <Button\n                  className=\"w-full h-full\"\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  onClick={() => handleCopy(value)}\n                  disabled={disabled}\n                  aria-label=\"Copy code\"\n                >\n                  <Copy />\n                </Button>\n              </div>\n            </TooltipTrigger>\n            <TooltipContent side=\"bottom\">\n              {copyState}\n            </TooltipContent>\n          </Tooltip>\n        )}\n        {onLaunch && (\n          <Tooltip >\n            <TooltipTrigger asChild>\n              <div className=\"w-8 h-8 flex items-center justify-center\">\n                <Button\n                  className=\"w-full h-full\"\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  onClick={() => handleLaunch(value)}\n                  disabled={disabled}\n                  aria-label=\"Launch code\"\n                >\n                  <Rocket />\n                </Button>\n              </div>\n            </TooltipTrigger>\n            <TooltipContent side=\"bottom\">\n              {launchState}\n            </TooltipContent>\n          </Tooltip>\n        )}\n      </div>\n      <MonacoEditor\n        value={value}\n        onChange={onChange}\n        language={language}\n        theme={themeProp ? THEME_MAP[themeProp] : editorTheme.monacoTheme}\n        height={height}\n        width={width}\n        options={defaultOptions}\n        beforeMount={handleEditorWillMount}\n      />\n    </div>\n  );\n};\n\nexport { CodeEditor };\nexport default CodeEditor;\n"],"names":["THEME_MAP","CodeEditor","value","onChange","language","themeProp","height","width","options","onCopy","onLaunch","disabled","editorTheme","useCodeEditorTheme","monacoRef","useRef","copyState","setCopyState","useState","launchState","setLaunchState","FEEDBACK_RESET_DELAY_MS","handleCopy","useCallback","code","handleLaunch","handleEditorWillMount","monaco","defaultOptions","cn","jsxs","Tooltip","jsx","TooltipTrigger","Button","Copy","TooltipContent","Rocket","MonacoEditor"],"mappings":"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"}

package/dist/ui/collapsible.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.cjs","sources":["../../src/components/ui/collapsible.tsx"],"sourcesContent":["\"use client\"\n\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\"\n\nfunction Collapsible({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />\n}\n\nfunction CollapsibleTrigger({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {\n  return (\n    <CollapsiblePrimitive.CollapsibleTrigger\n      data-slot=\"collapsible-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction CollapsibleContent({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {\n  return (\n    <CollapsiblePrimitive.CollapsibleContent\n      data-slot=\"collapsible-content\"\n      {...props}\n    />\n  )\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n"],"names":["Collapsible","props","CollapsiblePrimitive","CollapsibleTrigger","jsx","CollapsibleContent"],"mappings":"2IAIA,SAASA,EAAY,CACnB,GAAGC,CACL,EAA2D,CACzD,aAAQC,EAAAA,YAAqB,KAArB,CAA0B,YAAU,cAAe,GAAGD,EAAO,CACvE,CAEA,SAASE,EAAmB,CAC1B,GAAGF,CACL,EAAyE,CACvE,OACEG,EAAAA,IAACF,EAAAA,YAAqB,mBAArB,CACC,YAAU,sBACT,GAAGD,CAAA,CAAA,CAGV,CAEA,SAASI,EAAmB,CAC1B,GAAGJ,CACL,EAAyE,CACvE,OACEG,EAAAA,IAACF,EAAAA,YAAqB,mBAArB,CACC,YAAU,sBACT,GAAGD,CAAA,CAAA,CAGV"}

package/dist/ui/collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.js","sources":["../../src/components/ui/collapsible.tsx"],"sourcesContent":["\"use client\"\n\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\"\n\nfunction Collapsible({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />\n}\n\nfunction CollapsibleTrigger({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {\n  return (\n    <CollapsiblePrimitive.CollapsibleTrigger\n      data-slot=\"collapsible-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction CollapsibleContent({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {\n  return (\n    <CollapsiblePrimitive.CollapsibleContent\n      data-slot=\"collapsible-content\"\n      {...props}\n    />\n  )\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n"],"names":["Collapsible","props","CollapsiblePrimitive","CollapsibleTrigger","jsx","CollapsibleContent"],"mappings":";;AAIA,SAASA,EAAY;AAAA,EACnB,GAAGC;AACL,GAA2D;AACzD,2BAAQC,EAAqB,MAArB,EAA0B,aAAU,eAAe,GAAGD,GAAO;AACvE;AAEA,SAASE,EAAmB;AAAA,EAC1B,GAAGF;AACL,GAAyE;AACvE,SACE,gBAAAG;AAAA,IAACF,EAAqB;AAAA,IAArB;AAAA,MACC,aAAU;AAAA,MACT,GAAGD;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASI,EAAmB;AAAA,EAC1B,GAAGJ;AACL,GAAyE;AACvE,SACE,gBAAAG;AAAA,IAACF,EAAqB;AAAA,IAArB;AAAA,MACC,aAAU;AAAA,MACT,GAAGD;AAAA,IAAA;AAAA,EAAA;AAGV;"}