@bergetai/ui 0.17.0 → 0.18.0

package/dist/components/code-block/CodeBlock.cjs

@@ -1,61 +1,63 @@
 "use client";
 const require_utils = require("../../lib/utils.cjs");
-const require_shiki = require("../../lib/shiki.cjs");
-let react = require("react");
+const require_code_block = require("../../primitives/code-block.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
-let lucide_react = require("lucide-react");
 //#region src/components/code-block/CodeBlock.tsx
-function CodeBlock({ code, language = "text", title, className }) {
-	const [html, setHtml] = (0, react.useState)(null);
-	const [copied, setCopied] = (0, react.useState)(false);
-	(0, react.useEffect)(() => {
-		require_shiki.getHighlighter().then((highlighter) => {
-			const lang = highlighter.getLoadedLanguages().includes(language) ? language : "text";
-			setHtml(highlighter.codeToHtml(code, {
-				lang,
-				theme: "berget"
-			}));
-		});
-	}, [code, language]);
-	const handleCopy = (0, react.useCallback)(async () => {
-		await navigator.clipboard.writeText(code);
-		setCopied(true);
-		setTimeout(() => setCopied(false), 2e3);
-	}, [code]);
-	const copyButton = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		onClick: handleCopy,
-		className: "\n        flex size-6 items-center justify-center text-berget-muted-foreground\n        transition-colors\n        hover:text-berget-foreground\n      ",
-		"aria-label": "Copy code",
-		children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "size-3.5" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, { className: "size-3.5" })
+/**
+* Compound code block built on the shadcn base `code-block` primitive. The
+* parts add Berget styling and nothing else — compose them the way shadcn
+* documents (ui.shadcn.com/docs/components/base/code-block):
+*
+*   <CodeBlock>
+*     <CodeBlockHeader>
+*       <CodeBlockTitle>file.ts</CodeBlockTitle>
+*       <CodeBlockActions>
+*         <CodeBlockCopyButton value={code} />
+*       </CodeBlockActions>
+*     </CodeBlockHeader>
+*     <CodeBlockContent wrap lineNumbers>
+*       {code}
+*     </CodeBlockContent>
+*   </CodeBlock>
+*
+* For syntax highlighting, pass `useHighlightedCode(code, language)` output
+* through `CodeBlockLine` elements. Highlighting is optional; a string child
+* renders as plain text.
+*/
+function CodeBlock({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_code_block.CodeBlock, {
+		className: require_utils.cn(`
+          rounded-berget-xs border-berget-border bg-berget-codeblock-bg
+          backdrop-blur-md
+          dark:bg-berget-codeblock-bg
+        `, className),
+		...props
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+}
+function CodeBlockHeader({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_code_block.CodeBlockHeader, {
 		className: require_utils.cn(`
-          relative isolate overflow-hidden rounded-berget-xs border
-          border-berget-border bg-berget-codeblock-bg backdrop-blur-md
+          h-10 shrink-0 gap-2 border-b border-berget-border
+          bg-berget-codeblock-header-bg px-4 pt-0
+          dark:bg-berget-codeblock-header-bg
         `, className),
-		children: [
-			title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "\n            flex h-10! items-center border-b border-berget-border\n            bg-berget-codeblock-header-bg px-4! text-xs/normal!\n          ",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-berget-muted-foreground",
-					children: title
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "absolute top-2 right-2 z-10",
-				children: copyButton
-			}),
-			html ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "\n            [&_.shiki]:m-0! [&_.shiki]:overflow-x-auto [&_.shiki]:bg-transparent\n            [&_.shiki]:p-4! [&_.shiki]:text-caption/relaxed!\n          ",
-				dangerouslySetInnerHTML: { __html: html }
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-				className: "\n            m-0! overflow-x-auto p-4! text-caption/relaxed!\n            text-berget-muted-foreground\n          ",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: code })
-			})
-		]
+		...props
+	});
+}
+function CodeBlockTitle({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_code_block.CodeBlockTitle, {
+		className: require_utils.cn("text-berget-muted-foreground", className),
+		...props
 	});
 }
 //#endregion
 exports.CodeBlock = CodeBlock;
+exports.CodeBlockActions = require_code_block.CodeBlockActions;
+exports.CodeBlockContent = require_code_block.CodeBlockContent;
+exports.CodeBlockCopyButton = require_code_block.CodeBlockCopyButton;
+exports.CodeBlockFooter = require_code_block.CodeBlockFooter;
+exports.CodeBlockHeader = CodeBlockHeader;
+exports.CodeBlockLine = require_code_block.CodeBlockLine;
+exports.CodeBlockTitle = CodeBlockTitle;
 
 //# sourceMappingURL=CodeBlock.cjs.map

package/dist/components/code-block/CodeBlock.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.cjs","names":["useState","useCallback","Check","Copy","cn"],"sources":["../../../src/components/code-block/CodeBlock.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useCallback } from 'react';\nimport { Copy, Check } from 'lucide-react';\nimport { cn } from '../../lib/utils';\nimport { getHighlighter } from '../../lib/shiki';\n\nexport interface CodeBlockProps {\n  code: string;\n  language?: string;\n  title?: string;\n  className?: string;\n}\n\nexport function CodeBlock({ code, language = 'text', title, className }: CodeBlockProps) {\n  const [html, setHtml] = useState<string | null>(null);\n  const [copied, setCopied] = useState(false);\n\n  useEffect(() => {\n    getHighlighter().then((highlighter) => {\n      const loadedLangs = highlighter.getLoadedLanguages();\n      const lang = loadedLangs.includes(language) ? language : 'text';\n      setHtml(highlighter.codeToHtml(code, { lang, theme: 'berget' }));\n    });\n  }, [code, language]);\n\n  const handleCopy = useCallback(async () => {\n    await navigator.clipboard.writeText(code);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  }, [code]);\n\n  const copyButton = (\n    <button\n      onClick={handleCopy}\n      className=\"\n        flex size-6 items-center justify-center text-berget-muted-foreground\n        transition-colors\n        hover:text-berget-foreground\n      \"\n      aria-label=\"Copy code\"\n    >\n      {copied ? <Check className=\"size-3.5\" /> : <Copy className=\"size-3.5\" />}\n    </button>\n  );\n\n  return (\n    <div\n      className={cn(\n        `\n          relative isolate overflow-hidden rounded-berget-xs border\n          border-berget-border bg-berget-codeblock-bg backdrop-blur-md\n        `,\n        className,\n      )}\n    >\n      {title && (\n        <div\n          className=\"\n            flex h-10! items-center border-b border-berget-border\n            bg-berget-codeblock-header-bg px-4! text-xs/normal!\n          \"\n        >\n          <span className=\"text-berget-muted-foreground\">{title}</span>\n        </div>\n      )}\n      <div className=\"absolute top-2 right-2 z-10\">{copyButton}</div>\n      {html ? (\n        <div\n          className=\"\n            [&_.shiki]:m-0! [&_.shiki]:overflow-x-auto [&_.shiki]:bg-transparent\n            [&_.shiki]:p-4! [&_.shiki]:text-caption/relaxed!\n          \"\n          dangerouslySetInnerHTML={{ __html: html }}\n        />\n      ) : (\n        <pre\n          className=\"\n            m-0! overflow-x-auto p-4! text-caption/relaxed!\n            text-berget-muted-foreground\n          \"\n        >\n          <code>{code}</code>\n        </pre>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAcA,SAAgB,UAAU,EAAE,MAAM,WAAW,QAAQ,OAAO,aAA6B;CACvF,MAAM,CAAC,MAAM,YAAA,GAAWA,MAAAA,SAAAA,CAAwB,IAAI;CACpD,MAAM,CAAC,QAAQ,cAAA,GAAaA,MAAAA,SAAAA,CAAS,KAAK;CAE1C,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,cAAA,eAAe,CAAC,CAAC,MAAM,gBAAgB;GAErC,MAAM,OADc,YAAY,mBACT,CAAC,CAAC,SAAS,QAAQ,IAAI,WAAW;GACzD,QAAQ,YAAY,WAAW,MAAM;IAAE;IAAM,OAAO;GAAS,CAAC,CAAC;EACjE,CAAC;CACH,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,MAAM,cAAA,GAAaC,MAAAA,YAAAA,CAAY,YAAY;EACzC,MAAM,UAAU,UAAU,UAAU,IAAI;EACxC,UAAU,IAAI;EACd,iBAAiB,UAAU,KAAK,GAAG,GAAI;CACzC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,aACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACE,SAAS;EACT,WAAU;EAKV,cAAW;EAEV,UAAA,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,OAAD,EAAO,WAAU,WAAY,CAAA,IAAI,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,MAAD,EAAM,WAAU,WAAY,CAAA;CACjE,CAAA;CAGV,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,WAAWC,cAAAA,GACT;;;WAIA,SACF;EAPF,UAAA;GASG,SACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,WAAU;IAKV,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;KAAM,WAAU;KAAgC,UAAA;IAAY,CAAA;GACzD,CAAA;GAEP,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAU;IAA+B,UAAA;GAAgB,CAAA;GAC7D,OACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,WAAU;IAIV,yBAAyB,EAAE,QAAQ,KAAK;GACzC,CAAA,IAED,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,WAAU;IAKV,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAA,UAAO,KAAW,CAAA;GACf,CAAA;EAEJ;;AAET"}
+{"version":3,"file":"CodeBlock.cjs","names":["CodeBlockPrimitive","cn","CodeBlockHeaderPrimitive","CodeBlockTitlePrimitive"],"sources":["../../../src/components/code-block/CodeBlock.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps } from 'react';\nimport {\n  CodeBlock as CodeBlockPrimitive,\n  CodeBlockHeader as CodeBlockHeaderPrimitive,\n  CodeBlockTitle as CodeBlockTitlePrimitive,\n} from '../../primitives/code-block';\nimport { cn } from '../../lib/utils';\n\n/**\n * Compound code block built on the shadcn base `code-block` primitive. The\n * parts add Berget styling and nothing else — compose them the way shadcn\n * documents (ui.shadcn.com/docs/components/base/code-block):\n *\n *   <CodeBlock>\n *     <CodeBlockHeader>\n *       <CodeBlockTitle>file.ts</CodeBlockTitle>\n *       <CodeBlockActions>\n *         <CodeBlockCopyButton value={code} />\n *       </CodeBlockActions>\n *     </CodeBlockHeader>\n *     <CodeBlockContent wrap lineNumbers>\n *       {code}\n *     </CodeBlockContent>\n *   </CodeBlock>\n *\n * For syntax highlighting, pass `useHighlightedCode(code, language)` output\n * through `CodeBlockLine` elements. Highlighting is optional; a string child\n * renders as plain text.\n */\n\nexport function CodeBlock({ className, ...props }: ComponentProps<typeof CodeBlockPrimitive>) {\n  return (\n    <CodeBlockPrimitive\n      className={cn(\n        `\n          rounded-berget-xs border-berget-border bg-berget-codeblock-bg\n          backdrop-blur-md\n          dark:bg-berget-codeblock-bg\n        `,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function CodeBlockHeader({\n  className,\n  ...props\n}: ComponentProps<typeof CodeBlockHeaderPrimitive>) {\n  return (\n    <CodeBlockHeaderPrimitive\n      className={cn(\n        `\n          h-10 shrink-0 gap-2 border-b border-berget-border\n          bg-berget-codeblock-header-bg px-4 pt-0\n          dark:bg-berget-codeblock-header-bg\n        `,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function CodeBlockTitle({\n  className,\n  ...props\n}: ComponentProps<typeof CodeBlockTitlePrimitive>) {\n  return (\n    <CodeBlockTitlePrimitive className={cn('text-berget-muted-foreground', className)} {...props} />\n  );\n}\n\nexport {\n  CodeBlockActions,\n  CodeBlockContent,\n  CodeBlockCopyButton,\n  CodeBlockFooter,\n  CodeBlockLine,\n} from '../../primitives/code-block';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAgB,UAAU,EAAE,WAAW,GAAG,SAAoD;CAC5F,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,mBAAAA,WAAD;EACE,WAAWC,cAAAA,GACT;;;;WAKA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,gBAAgB,EAC9B,WACA,GAAG,SAC+C;CAClD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,iBAAD;EACE,WAAWD,cAAAA,GACT;;;;WAKA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,eAAe,EAC7B,WACA,GAAG,SAC8C;CACjD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACE,mBAAAA,gBAAD;EAAyB,WAAWF,cAAAA,GAAG,gCAAgC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEnG"}

package/dist/components/code-block/CodeBlock.d.cts

@@ -1,10 +1,30 @@
+import { CodeBlock as CodeBlock$1, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader as CodeBlockHeader$1, CodeBlockLine, CodeBlockTitle as CodeBlockTitle$1 } from "../../primitives/code-block.cjs";
+import { ComponentProps } from "react";
 //#region src/components/code-block/CodeBlock.d.ts
-export interface CodeBlockProps {
-  code: string;
-  language?: string;
-  title?: string;
-  className?: string;
-}
-export declare function CodeBlock({ code, language, title, className }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Compound code block built on the shadcn base `code-block` primitive. The
+ * parts add Berget styling and nothing else — compose them the way shadcn
+ * documents (ui.shadcn.com/docs/components/base/code-block):
+ *
+ *   <CodeBlock>
+ *     <CodeBlockHeader>
+ *       <CodeBlockTitle>file.ts</CodeBlockTitle>
+ *       <CodeBlockActions>
+ *         <CodeBlockCopyButton value={code} />
+ *       </CodeBlockActions>
+ *     </CodeBlockHeader>
+ *     <CodeBlockContent wrap lineNumbers>
+ *       {code}
+ *     </CodeBlockContent>
+ *   </CodeBlock>
+ *
+ * For syntax highlighting, pass `useHighlightedCode(code, language)` output
+ * through `CodeBlockLine` elements. Highlighting is optional; a string child
+ * renders as plain text.
+ */
+export declare function CodeBlock({ className, ...props }: ComponentProps<typeof CodeBlock$1>): import("react/jsx-runtime").JSX.Element;
+export declare function CodeBlockHeader({ className, ...props }: ComponentProps<typeof CodeBlockHeader$1>): import("react/jsx-runtime").JSX.Element;
+export declare function CodeBlockTitle({ className, ...props }: ComponentProps<typeof CodeBlockTitle$1>): import("react/jsx-runtime").JSX.Element;
 //#endregion
+export { CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockLine };
 //# sourceMappingURL=CodeBlock.d.cts.map

package/dist/components/code-block/CodeBlock.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.d.cts","names":[],"sources":["../../../src/components/code-block/CodeBlock.tsx"],"mappings":";iBAOiB;EACf;EACA;EACA;EACA;;wBAGc,YAAY,MAAM,UAAmB,OAAO,aAAa,6CAAc,IAAA"}
+{"version":3,"file":"CodeBlock.d.cts","names":["CodeBlockPrimitive","CodeBlockHeaderPrimitive","CodeBlockTitlePrimitive"],"sources":["../../../src/components/code-block/CodeBlock.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;wBAgCgB,YAAY,cAAc,SAAS,sBAAsBA,2CAAmB,IAAA;wBAgB5E,kBACd,cACG,SACF,sBAAsBC,iDAAyB,IAAA;wBAgBlC,iBACd,cACG,SACF,sBAAsBC,gDAAwB,IAAA"}

package/dist/components/code-block/CodeBlock.d.mts

@@ -1,10 +1,30 @@
+import { CodeBlock as CodeBlock$1, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader as CodeBlockHeader$1, CodeBlockLine, CodeBlockTitle as CodeBlockTitle$1 } from "../../primitives/code-block.mjs";
+import { ComponentProps } from "react";
 //#region src/components/code-block/CodeBlock.d.ts
-export interface CodeBlockProps {
-  code: string;
-  language?: string;
-  title?: string;
-  className?: string;
-}
-export declare function CodeBlock({ code, language, title, className }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Compound code block built on the shadcn base `code-block` primitive. The
+ * parts add Berget styling and nothing else — compose them the way shadcn
+ * documents (ui.shadcn.com/docs/components/base/code-block):
+ *
+ *   <CodeBlock>
+ *     <CodeBlockHeader>
+ *       <CodeBlockTitle>file.ts</CodeBlockTitle>
+ *       <CodeBlockActions>
+ *         <CodeBlockCopyButton value={code} />
+ *       </CodeBlockActions>
+ *     </CodeBlockHeader>
+ *     <CodeBlockContent wrap lineNumbers>
+ *       {code}
+ *     </CodeBlockContent>
+ *   </CodeBlock>
+ *
+ * For syntax highlighting, pass `useHighlightedCode(code, language)` output
+ * through `CodeBlockLine` elements. Highlighting is optional; a string child
+ * renders as plain text.
+ */
+export declare function CodeBlock({ className, ...props }: ComponentProps<typeof CodeBlock$1>): import("react/jsx-runtime").JSX.Element;
+export declare function CodeBlockHeader({ className, ...props }: ComponentProps<typeof CodeBlockHeader$1>): import("react/jsx-runtime").JSX.Element;
+export declare function CodeBlockTitle({ className, ...props }: ComponentProps<typeof CodeBlockTitle$1>): import("react/jsx-runtime").JSX.Element;
 //#endregion
+export { CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockLine };
 //# sourceMappingURL=CodeBlock.d.mts.map

package/dist/components/code-block/CodeBlock.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.d.mts","names":[],"sources":["../../../src/components/code-block/CodeBlock.tsx"],"mappings":";iBAOiB;EACf;EACA;EACA;EACA;;wBAGc,YAAY,MAAM,UAAmB,OAAO,aAAa,6CAAc,IAAA"}
+{"version":3,"file":"CodeBlock.d.mts","names":["CodeBlockPrimitive","CodeBlockHeaderPrimitive","CodeBlockTitlePrimitive"],"sources":["../../../src/components/code-block/CodeBlock.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;wBAgCgB,YAAY,cAAc,SAAS,sBAAsBA,2CAAmB,IAAA;wBAgB5E,kBACd,cACG,SACF,sBAAsBC,iDAAyB,IAAA;wBAgBlC,iBACd,cACG,SACF,sBAAsBC,gDAAwB,IAAA"}

package/dist/components/code-block/CodeBlock.mjs

@@ -1,61 +1,56 @@
 "use client";
 import { cn } from "../../lib/utils.mjs";
-import { getHighlighter } from "../../lib/shiki.mjs";
-import { useCallback, useEffect, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Check, Copy } from "lucide-react";
+import { CodeBlock as CodeBlock$1, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader as CodeBlockHeader$1, CodeBlockLine, CodeBlockTitle as CodeBlockTitle$1 } from "../../primitives/code-block.mjs";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/code-block/CodeBlock.tsx
-function CodeBlock({ code, language = "text", title, className }) {
-	const [html, setHtml] = useState(null);
-	const [copied, setCopied] = useState(false);
-	useEffect(() => {
-		getHighlighter().then((highlighter) => {
-			const lang = highlighter.getLoadedLanguages().includes(language) ? language : "text";
-			setHtml(highlighter.codeToHtml(code, {
-				lang,
-				theme: "berget"
-			}));
-		});
-	}, [code, language]);
-	const handleCopy = useCallback(async () => {
-		await navigator.clipboard.writeText(code);
-		setCopied(true);
-		setTimeout(() => setCopied(false), 2e3);
-	}, [code]);
-	const copyButton = /* @__PURE__ */ jsx("button", {
-		onClick: handleCopy,
-		className: "\n        flex size-6 items-center justify-center text-berget-muted-foreground\n        transition-colors\n        hover:text-berget-foreground\n      ",
-		"aria-label": "Copy code",
-		children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3.5" })
+/**
+* Compound code block built on the shadcn base `code-block` primitive. The
+* parts add Berget styling and nothing else — compose them the way shadcn
+* documents (ui.shadcn.com/docs/components/base/code-block):
+*
+*   <CodeBlock>
+*     <CodeBlockHeader>
+*       <CodeBlockTitle>file.ts</CodeBlockTitle>
+*       <CodeBlockActions>
+*         <CodeBlockCopyButton value={code} />
+*       </CodeBlockActions>
+*     </CodeBlockHeader>
+*     <CodeBlockContent wrap lineNumbers>
+*       {code}
+*     </CodeBlockContent>
+*   </CodeBlock>
+*
+* For syntax highlighting, pass `useHighlightedCode(code, language)` output
+* through `CodeBlockLine` elements. Highlighting is optional; a string child
+* renders as plain text.
+*/
+function CodeBlock({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CodeBlock$1, {
+		className: cn(`
+          rounded-berget-xs border-berget-border bg-berget-codeblock-bg
+          backdrop-blur-md
+          dark:bg-berget-codeblock-bg
+        `, className),
+		...props
 	});
-	return /* @__PURE__ */ jsxs("div", {
+}
+function CodeBlockHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CodeBlockHeader$1, {
 		className: cn(`
-          relative isolate overflow-hidden rounded-berget-xs border
-          border-berget-border bg-berget-codeblock-bg backdrop-blur-md
+          h-10 shrink-0 gap-2 border-b border-berget-border
+          bg-berget-codeblock-header-bg px-4 pt-0
+          dark:bg-berget-codeblock-header-bg
         `, className),
-		children: [
-			title && /* @__PURE__ */ jsx("div", {
-				className: "\n            flex h-10! items-center border-b border-berget-border\n            bg-berget-codeblock-header-bg px-4! text-xs/normal!\n          ",
-				children: /* @__PURE__ */ jsx("span", {
-					className: "text-berget-muted-foreground",
-					children: title
-				})
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "absolute top-2 right-2 z-10",
-				children: copyButton
-			}),
-			html ? /* @__PURE__ */ jsx("div", {
-				className: "\n            [&_.shiki]:m-0! [&_.shiki]:overflow-x-auto [&_.shiki]:bg-transparent\n            [&_.shiki]:p-4! [&_.shiki]:text-caption/relaxed!\n          ",
-				dangerouslySetInnerHTML: { __html: html }
-			}) : /* @__PURE__ */ jsx("pre", {
-				className: "\n            m-0! overflow-x-auto p-4! text-caption/relaxed!\n            text-berget-muted-foreground\n          ",
-				children: /* @__PURE__ */ jsx("code", { children: code })
-			})
-		]
+		...props
+	});
+}
+function CodeBlockTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CodeBlockTitle$1, {
+		className: cn("text-berget-muted-foreground", className),
+		...props
 	});
 }
 //#endregion
-export { CodeBlock };
+export { CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle };
 
 //# sourceMappingURL=CodeBlock.mjs.map

package/dist/components/code-block/CodeBlock.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.mjs","names":[],"sources":["../../../src/components/code-block/CodeBlock.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useCallback } from 'react';\nimport { Copy, Check } from 'lucide-react';\nimport { cn } from '../../lib/utils';\nimport { getHighlighter } from '../../lib/shiki';\n\nexport interface CodeBlockProps {\n  code: string;\n  language?: string;\n  title?: string;\n  className?: string;\n}\n\nexport function CodeBlock({ code, language = 'text', title, className }: CodeBlockProps) {\n  const [html, setHtml] = useState<string | null>(null);\n  const [copied, setCopied] = useState(false);\n\n  useEffect(() => {\n    getHighlighter().then((highlighter) => {\n      const loadedLangs = highlighter.getLoadedLanguages();\n      const lang = loadedLangs.includes(language) ? language : 'text';\n      setHtml(highlighter.codeToHtml(code, { lang, theme: 'berget' }));\n    });\n  }, [code, language]);\n\n  const handleCopy = useCallback(async () => {\n    await navigator.clipboard.writeText(code);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  }, [code]);\n\n  const copyButton = (\n    <button\n      onClick={handleCopy}\n      className=\"\n        flex size-6 items-center justify-center text-berget-muted-foreground\n        transition-colors\n        hover:text-berget-foreground\n      \"\n      aria-label=\"Copy code\"\n    >\n      {copied ? <Check className=\"size-3.5\" /> : <Copy className=\"size-3.5\" />}\n    </button>\n  );\n\n  return (\n    <div\n      className={cn(\n        `\n          relative isolate overflow-hidden rounded-berget-xs border\n          border-berget-border bg-berget-codeblock-bg backdrop-blur-md\n        `,\n        className,\n      )}\n    >\n      {title && (\n        <div\n          className=\"\n            flex h-10! items-center border-b border-berget-border\n            bg-berget-codeblock-header-bg px-4! text-xs/normal!\n          \"\n        >\n          <span className=\"text-berget-muted-foreground\">{title}</span>\n        </div>\n      )}\n      <div className=\"absolute top-2 right-2 z-10\">{copyButton}</div>\n      {html ? (\n        <div\n          className=\"\n            [&_.shiki]:m-0! [&_.shiki]:overflow-x-auto [&_.shiki]:bg-transparent\n            [&_.shiki]:p-4! [&_.shiki]:text-caption/relaxed!\n          \"\n          dangerouslySetInnerHTML={{ __html: html }}\n        />\n      ) : (\n        <pre\n          className=\"\n            m-0! overflow-x-auto p-4! text-caption/relaxed!\n            text-berget-muted-foreground\n          \"\n        >\n          <code>{code}</code>\n        </pre>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAcA,SAAgB,UAAU,EAAE,MAAM,WAAW,QAAQ,OAAO,aAA6B;CACvF,MAAM,CAAC,MAAM,WAAW,SAAwB,IAAI;CACpD,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,gBAAgB;EACd,eAAe,CAAC,CAAC,MAAM,gBAAgB;GAErC,MAAM,OADc,YAAY,mBACT,CAAC,CAAC,SAAS,QAAQ,IAAI,WAAW;GACzD,QAAQ,YAAY,WAAW,MAAM;IAAE;IAAM,OAAO;GAAS,CAAC,CAAC;EACjE,CAAC;CACH,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,MAAM,aAAa,YAAY,YAAY;EACzC,MAAM,UAAU,UAAU,UAAU,IAAI;EACxC,UAAU,IAAI;EACd,iBAAiB,UAAU,KAAK,GAAG,GAAI;CACzC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,aACJ,oBAAC,UAAD;EACE,SAAS;EACT,WAAU;EAKV,cAAW;EAEV,UAAA,SAAS,oBAAC,OAAD,EAAO,WAAU,WAAY,CAAA,IAAI,oBAAC,MAAD,EAAM,WAAU,WAAY,CAAA;CACjE,CAAA;CAGV,OACE,qBAAC,OAAD;EACE,WAAW,GACT;;;WAIA,SACF;EAPF,UAAA;GASG,SACC,oBAAC,OAAD;IACE,WAAU;IAKV,UAAA,oBAAC,QAAD;KAAM,WAAU;KAAgC,UAAA;IAAY,CAAA;GACzD,CAAA;GAEP,oBAAC,OAAD;IAAK,WAAU;IAA+B,UAAA;GAAgB,CAAA;GAC7D,OACC,oBAAC,OAAD;IACE,WAAU;IAIV,yBAAyB,EAAE,QAAQ,KAAK;GACzC,CAAA,IAED,oBAAC,OAAD;IACE,WAAU;IAKV,UAAA,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA;GACf,CAAA;EAEJ;;AAET"}
+{"version":3,"file":"CodeBlock.mjs","names":["CodeBlockPrimitive","CodeBlockHeaderPrimitive","CodeBlockTitlePrimitive"],"sources":["../../../src/components/code-block/CodeBlock.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps } from 'react';\nimport {\n  CodeBlock as CodeBlockPrimitive,\n  CodeBlockHeader as CodeBlockHeaderPrimitive,\n  CodeBlockTitle as CodeBlockTitlePrimitive,\n} from '../../primitives/code-block';\nimport { cn } from '../../lib/utils';\n\n/**\n * Compound code block built on the shadcn base `code-block` primitive. The\n * parts add Berget styling and nothing else — compose them the way shadcn\n * documents (ui.shadcn.com/docs/components/base/code-block):\n *\n *   <CodeBlock>\n *     <CodeBlockHeader>\n *       <CodeBlockTitle>file.ts</CodeBlockTitle>\n *       <CodeBlockActions>\n *         <CodeBlockCopyButton value={code} />\n *       </CodeBlockActions>\n *     </CodeBlockHeader>\n *     <CodeBlockContent wrap lineNumbers>\n *       {code}\n *     </CodeBlockContent>\n *   </CodeBlock>\n *\n * For syntax highlighting, pass `useHighlightedCode(code, language)` output\n * through `CodeBlockLine` elements. Highlighting is optional; a string child\n * renders as plain text.\n */\n\nexport function CodeBlock({ className, ...props }: ComponentProps<typeof CodeBlockPrimitive>) {\n  return (\n    <CodeBlockPrimitive\n      className={cn(\n        `\n          rounded-berget-xs border-berget-border bg-berget-codeblock-bg\n          backdrop-blur-md\n          dark:bg-berget-codeblock-bg\n        `,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function CodeBlockHeader({\n  className,\n  ...props\n}: ComponentProps<typeof CodeBlockHeaderPrimitive>) {\n  return (\n    <CodeBlockHeaderPrimitive\n      className={cn(\n        `\n          h-10 shrink-0 gap-2 border-b border-berget-border\n          bg-berget-codeblock-header-bg px-4 pt-0\n          dark:bg-berget-codeblock-header-bg\n        `,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function CodeBlockTitle({\n  className,\n  ...props\n}: ComponentProps<typeof CodeBlockTitlePrimitive>) {\n  return (\n    <CodeBlockTitlePrimitive className={cn('text-berget-muted-foreground', className)} {...props} />\n  );\n}\n\nexport {\n  CodeBlockActions,\n  CodeBlockContent,\n  CodeBlockCopyButton,\n  CodeBlockFooter,\n  CodeBlockLine,\n} from '../../primitives/code-block';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAgB,UAAU,EAAE,WAAW,GAAG,SAAoD;CAC5F,OACE,oBAACA,aAAD;EACE,WAAW,GACT;;;;WAKA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,gBAAgB,EAC9B,WACA,GAAG,SAC+C;CAClD,OACE,oBAACC,mBAAD;EACE,WAAW,GACT;;;;WAKA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,eAAe,EAC7B,WACA,GAAG,SAC8C;CACjD,OACE,oBAACC,kBAAD;EAAyB,WAAW,GAAG,gCAAgC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEnG"}

package/dist/components/code-block/index.d.cts

@@ -0,0 +1,3 @@
+import { CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockLine } from "../../primitives/code-block.cjs";
+import { CodeBlock, CodeBlockHeader, CodeBlockTitle } from "./CodeBlock.cjs";
+export { CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle };

package/dist/components/code-block/index.d.mts

@@ -0,0 +1,3 @@
+import { CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockLine } from "../../primitives/code-block.mjs";
+import { CodeBlock, CodeBlockHeader, CodeBlockTitle } from "./CodeBlock.mjs";
+export { CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle };

package/dist/components/container/Container.d.cts

@@ -3,8 +3,8 @@ import { VariantProps } from "class-variance-authority";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/container/Container.d.ts
 declare const containerVariants: (props?: ({
-  size?: "sm" | "lg" | "md" | "xl" | "full" | null | undefined;
-  padding?: "none" | "sm" | "lg" | "md" | null | undefined;
+  size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
+  padding?: "none" | "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ContainerProps extends useRender.ComponentProps<'div'>, VariantProps<typeof containerVariants> {
   children?: React.ReactNode;

package/dist/components/container/Container.d.mts

@@ -3,8 +3,8 @@ import { VariantProps } from "class-variance-authority";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/container/Container.d.ts
 declare const containerVariants: (props?: ({
-  size?: "sm" | "lg" | "md" | "xl" | "full" | null | undefined;
-  padding?: "none" | "sm" | "lg" | "md" | null | undefined;
+  size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
+  padding?: "none" | "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ContainerProps extends useRender.ComponentProps<'div'>, VariantProps<typeof containerVariants> {
   children?: React.ReactNode;

package/dist/hooks/use-highlighted-code.cjs

@@ -0,0 +1,58 @@
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+const require_highlighter = require("../lib/highlighter.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+//#region src/hooks/use-highlighted-code.ts
+function useHighlightedCode(value, language) {
+	const code = value.endsWith("\n") ? value.slice(0, -1) : value;
+	const [loaded, setLoaded] = react.useState(null);
+	const highlighter = loaded?.language === language ? loaded.highlighter : null;
+	react.useEffect(() => {
+		let cancelled = false;
+		require_highlighter.loadHighlighter(language).then((next) => {
+			if (!cancelled) setLoaded({
+				language,
+				highlighter: next
+			});
+		}).catch(() => {});
+		return () => {
+			cancelled = true;
+		};
+	}, [language]);
+	const [done, setDone] = react.useState({
+		highlighter: null,
+		text: "",
+		lines: []
+	});
+	let next = done;
+	if (next.highlighter !== highlighter || !code.startsWith(next.text)) next = {
+		highlighter,
+		text: "",
+		lines: []
+	};
+	const end = code.lastIndexOf("\n") + 1;
+	if (highlighter && end > next.text.length) {
+		const result = highlighter.highlight(code.slice(next.text.length, end - 1), next.state);
+		next = {
+			highlighter,
+			text: code.slice(0, end),
+			lines: [...next.lines, ...result.lines],
+			state: result.state
+		};
+	}
+	if (next !== done) setDone(next);
+	const tail = code.slice(end);
+	return react.useMemo(() => {
+		if (!highlighter) return code.split("\n");
+		return [...next.lines, highlighter.highlight(tail, next.state).lines[0]];
+	}, [
+		code,
+		highlighter,
+		next,
+		tail
+	]);
+}
+//#endregion
+exports.useHighlightedCode = useHighlightedCode;
+
+//# sourceMappingURL=use-highlighted-code.cjs.map

package/dist/hooks/use-highlighted-code.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-highlighted-code.cjs","names":["React"],"sources":["../../src/hooks/use-highlighted-code.ts"],"sourcesContent":["// BERGET: upstream uses an intentional mutate-during-render streaming pattern\n// (see the init/render loop below); the React Compiler skips this file, which\n// is safe and expected. Keep this minimal when replaying upstream updates.\n/* eslint-disable react-hooks/preserve-manual-memoization */\nimport * as React from 'react';\n\nimport { loadHighlighter } from '@/lib/highlighter';\n\nexport function useHighlightedCode(value: string, language: string) {\n  // A trailing newline would render as an extra empty line.\n  const code = value.endsWith('\\n') ? value.slice(0, -1) : value;\n  const [loaded, setLoaded] = React.useState<{\n    language: string;\n    highlighter: Awaited<ReturnType<typeof loadHighlighter>>;\n  } | null>(null);\n  const highlighter = loaded?.language === language ? loaded.highlighter : null;\n\n  React.useEffect(() => {\n    let cancelled = false;\n\n    loadHighlighter(language)\n      .then((next) => {\n        if (!cancelled) {\n          setLoaded({ language, highlighter: next });\n        }\n      })\n      .catch(() => {});\n\n    return () => {\n      cancelled = true;\n    };\n  }, [language]);\n\n  // The complete lines, highlighted. While the code streams, only the new\n  // lines are tokenized, starting from the grammar state of the last one.\n  const [done, setDone] = React.useState<{\n    highlighter: typeof highlighter;\n    text: string;\n    lines: React.ReactNode[];\n    state?: Parameters<NonNullable<typeof highlighter>['highlight']>[1];\n  }>({ highlighter: null, text: '', lines: [] });\n\n  let next = done;\n\n  if (next.highlighter !== highlighter || !code.startsWith(next.text)) {\n    next = { highlighter, text: '', lines: [] };\n  }\n\n  const end = code.lastIndexOf('\\n') + 1;\n\n  if (highlighter && end > next.text.length) {\n    const result = highlighter.highlight(code.slice(next.text.length, end - 1), next.state);\n\n    next = {\n      highlighter,\n      text: code.slice(0, end),\n      lines: [...next.lines, ...result.lines],\n      state: result.state,\n    };\n  }\n\n  if (next !== done) {\n    setDone(next);\n  }\n\n  // The last line is still being written, so it is tokenized on every render.\n  const tail = code.slice(end);\n\n  return React.useMemo(() => {\n    if (!highlighter) {\n      return code.split('\\n');\n    }\n\n    return [...next.lines, highlighter.highlight(tail, next.state).lines[0]];\n  }, [code, highlighter, next, tail]);\n}\n"],"mappings":";;;;;AAQA,SAAgB,mBAAmB,OAAe,UAAkB;CAElE,MAAM,OAAO,MAAM,SAAS,IAAI,IAAI,MAAM,MAAM,GAAG,EAAE,IAAI;CACzD,MAAM,CAAC,QAAQ,aAAaA,MAAM,SAGxB,IAAI;CACd,MAAM,cAAc,QAAQ,aAAa,WAAW,OAAO,cAAc;CAEzE,MAAM,gBAAgB;EACpB,IAAI,YAAY;EAEhB,oBAAA,gBAAgB,QAAQ,CAAC,CACtB,MAAM,SAAS;GACd,IAAI,CAAC,WACH,UAAU;IAAE;IAAU,aAAa;GAAK,CAAC;EAE7C,CAAC,CAAC,CACD,YAAY,CAAC,CAAC;EAEjB,aAAa;GACX,YAAY;EACd;CACF,GAAG,CAAC,QAAQ,CAAC;CAIb,MAAM,CAAC,MAAM,WAAWA,MAAM,SAK3B;EAAE,aAAa;EAAM,MAAM;EAAI,OAAO,CAAC;CAAE,CAAC;CAE7C,IAAI,OAAO;CAEX,IAAI,KAAK,gBAAgB,eAAe,CAAC,KAAK,WAAW,KAAK,IAAI,GAChE,OAAO;EAAE;EAAa,MAAM;EAAI,OAAO,CAAC;CAAE;CAG5C,MAAM,MAAM,KAAK,YAAY,IAAI,IAAI;CAErC,IAAI,eAAe,MAAM,KAAK,KAAK,QAAQ;EACzC,MAAM,SAAS,YAAY,UAAU,KAAK,MAAM,KAAK,KAAK,QAAQ,MAAM,CAAC,GAAG,KAAK,KAAK;EAEtF,OAAO;GACL;GACA,MAAM,KAAK,MAAM,GAAG,GAAG;GACvB,OAAO,CAAC,GAAG,KAAK,OAAO,GAAG,OAAO,KAAK;GACtC,OAAO,OAAO;EAChB;CACF;CAEA,IAAI,SAAS,MACX,QAAQ,IAAI;CAId,MAAM,OAAO,KAAK,MAAM,GAAG;CAE3B,OAAOA,MAAM,cAAc;EACzB,IAAI,CAAC,aACH,OAAO,KAAK,MAAM,IAAI;EAGxB,OAAO,CAAC,GAAG,KAAK,OAAO,YAAY,UAAU,MAAM,KAAK,KAAK,CAAC,CAAC,MAAM,EAAE;CACzE,GAAG;EAAC;EAAM;EAAa;EAAM;CAAI,CAAC;AACpC"}

package/dist/hooks/use-highlighted-code.d.cts

@@ -0,0 +1,5 @@
+import * as React from "react";
+//#region src/hooks/use-highlighted-code.d.ts
+export declare function useHighlightedCode(value: string, language: string): (string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element[] | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined)[];
+//#endregion
+//# sourceMappingURL=use-highlighted-code.d.cts.map

package/dist/hooks/use-highlighted-code.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-highlighted-code.d.cts","names":[],"sources":["../../src/hooks/use-highlighted-code.ts"],"mappings":";;wBAQgB,mBAAmB,eAAe,qFAAgB,IAAA,YAAA,MAAA,+BAAA,MAAA,8BAAA,SAAA,MAAA,aAAA,6CAAA,MAAA,cAAA,MAAA,+BAAA,MAAA,8BAAA,SAAA,MAAA"}

package/dist/hooks/use-highlighted-code.d.mts

@@ -0,0 +1,5 @@
+import * as React from "react";
+//#region src/hooks/use-highlighted-code.d.ts
+export declare function useHighlightedCode(value: string, language: string): (string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element[] | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined)[];
+//#endregion
+//# sourceMappingURL=use-highlighted-code.d.mts.map

package/dist/hooks/use-highlighted-code.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-highlighted-code.d.mts","names":[],"sources":["../../src/hooks/use-highlighted-code.ts"],"mappings":";;wBAQgB,mBAAmB,eAAe,qFAAgB,IAAA,YAAA,MAAA,+BAAA,MAAA,8BAAA,SAAA,MAAA,aAAA,6CAAA,MAAA,cAAA,MAAA,+BAAA,MAAA,8BAAA,SAAA,MAAA"}

package/dist/hooks/use-highlighted-code.mjs

@@ -0,0 +1,56 @@
+import { loadHighlighter } from "../lib/highlighter.mjs";
+import * as React from "react";
+//#region src/hooks/use-highlighted-code.ts
+function useHighlightedCode(value, language) {
+	const code = value.endsWith("\n") ? value.slice(0, -1) : value;
+	const [loaded, setLoaded] = React.useState(null);
+	const highlighter = loaded?.language === language ? loaded.highlighter : null;
+	React.useEffect(() => {
+		let cancelled = false;
+		loadHighlighter(language).then((next) => {
+			if (!cancelled) setLoaded({
+				language,
+				highlighter: next
+			});
+		}).catch(() => {});
+		return () => {
+			cancelled = true;
+		};
+	}, [language]);
+	const [done, setDone] = React.useState({
+		highlighter: null,
+		text: "",
+		lines: []
+	});
+	let next = done;
+	if (next.highlighter !== highlighter || !code.startsWith(next.text)) next = {
+		highlighter,
+		text: "",
+		lines: []
+	};
+	const end = code.lastIndexOf("\n") + 1;
+	if (highlighter && end > next.text.length) {
+		const result = highlighter.highlight(code.slice(next.text.length, end - 1), next.state);
+		next = {
+			highlighter,
+			text: code.slice(0, end),
+			lines: [...next.lines, ...result.lines],
+			state: result.state
+		};
+	}
+	if (next !== done) setDone(next);
+	const tail = code.slice(end);
+	return React.useMemo(() => {
+		if (!highlighter) return code.split("\n");
+		return [...next.lines, highlighter.highlight(tail, next.state).lines[0]];
+	}, [
+		code,
+		highlighter,
+		next,
+		tail
+	]);
+}
+//#endregion
+export { useHighlightedCode };
+
+//# sourceMappingURL=use-highlighted-code.mjs.map

package/dist/hooks/use-highlighted-code.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-highlighted-code.mjs","names":[],"sources":["../../src/hooks/use-highlighted-code.ts"],"sourcesContent":["// BERGET: upstream uses an intentional mutate-during-render streaming pattern\n// (see the init/render loop below); the React Compiler skips this file, which\n// is safe and expected. Keep this minimal when replaying upstream updates.\n/* eslint-disable react-hooks/preserve-manual-memoization */\nimport * as React from 'react';\n\nimport { loadHighlighter } from '@/lib/highlighter';\n\nexport function useHighlightedCode(value: string, language: string) {\n  // A trailing newline would render as an extra empty line.\n  const code = value.endsWith('\\n') ? value.slice(0, -1) : value;\n  const [loaded, setLoaded] = React.useState<{\n    language: string;\n    highlighter: Awaited<ReturnType<typeof loadHighlighter>>;\n  } | null>(null);\n  const highlighter = loaded?.language === language ? loaded.highlighter : null;\n\n  React.useEffect(() => {\n    let cancelled = false;\n\n    loadHighlighter(language)\n      .then((next) => {\n        if (!cancelled) {\n          setLoaded({ language, highlighter: next });\n        }\n      })\n      .catch(() => {});\n\n    return () => {\n      cancelled = true;\n    };\n  }, [language]);\n\n  // The complete lines, highlighted. While the code streams, only the new\n  // lines are tokenized, starting from the grammar state of the last one.\n  const [done, setDone] = React.useState<{\n    highlighter: typeof highlighter;\n    text: string;\n    lines: React.ReactNode[];\n    state?: Parameters<NonNullable<typeof highlighter>['highlight']>[1];\n  }>({ highlighter: null, text: '', lines: [] });\n\n  let next = done;\n\n  if (next.highlighter !== highlighter || !code.startsWith(next.text)) {\n    next = { highlighter, text: '', lines: [] };\n  }\n\n  const end = code.lastIndexOf('\\n') + 1;\n\n  if (highlighter && end > next.text.length) {\n    const result = highlighter.highlight(code.slice(next.text.length, end - 1), next.state);\n\n    next = {\n      highlighter,\n      text: code.slice(0, end),\n      lines: [...next.lines, ...result.lines],\n      state: result.state,\n    };\n  }\n\n  if (next !== done) {\n    setDone(next);\n  }\n\n  // The last line is still being written, so it is tokenized on every render.\n  const tail = code.slice(end);\n\n  return React.useMemo(() => {\n    if (!highlighter) {\n      return code.split('\\n');\n    }\n\n    return [...next.lines, highlighter.highlight(tail, next.state).lines[0]];\n  }, [code, highlighter, next, tail]);\n}\n"],"mappings":";;;AAQA,SAAgB,mBAAmB,OAAe,UAAkB;CAElE,MAAM,OAAO,MAAM,SAAS,IAAI,IAAI,MAAM,MAAM,GAAG,EAAE,IAAI;CACzD,MAAM,CAAC,QAAQ,aAAa,MAAM,SAGxB,IAAI;CACd,MAAM,cAAc,QAAQ,aAAa,WAAW,OAAO,cAAc;CAEzE,MAAM,gBAAgB;EACpB,IAAI,YAAY;EAEhB,gBAAgB,QAAQ,CAAC,CACtB,MAAM,SAAS;GACd,IAAI,CAAC,WACH,UAAU;IAAE;IAAU,aAAa;GAAK,CAAC;EAE7C,CAAC,CAAC,CACD,YAAY,CAAC,CAAC;EAEjB,aAAa;GACX,YAAY;EACd;CACF,GAAG,CAAC,QAAQ,CAAC;CAIb,MAAM,CAAC,MAAM,WAAW,MAAM,SAK3B;EAAE,aAAa;EAAM,MAAM;EAAI,OAAO,CAAC;CAAE,CAAC;CAE7C,IAAI,OAAO;CAEX,IAAI,KAAK,gBAAgB,eAAe,CAAC,KAAK,WAAW,KAAK,IAAI,GAChE,OAAO;EAAE;EAAa,MAAM;EAAI,OAAO,CAAC;CAAE;CAG5C,MAAM,MAAM,KAAK,YAAY,IAAI,IAAI;CAErC,IAAI,eAAe,MAAM,KAAK,KAAK,QAAQ;EACzC,MAAM,SAAS,YAAY,UAAU,KAAK,MAAM,KAAK,KAAK,QAAQ,MAAM,CAAC,GAAG,KAAK,KAAK;EAEtF,OAAO;GACL;GACA,MAAM,KAAK,MAAM,GAAG,GAAG;GACvB,OAAO,CAAC,GAAG,KAAK,OAAO,GAAG,OAAO,KAAK;GACtC,OAAO,OAAO;EAChB;CACF;CAEA,IAAI,SAAS,MACX,QAAQ,IAAI;CAId,MAAM,OAAO,KAAK,MAAM,GAAG;CAE3B,OAAO,MAAM,cAAc;EACzB,IAAI,CAAC,aACH,OAAO,KAAK,MAAM,IAAI;EAGxB,OAAO,CAAC,GAAG,KAAK,OAAO,YAAY,UAAU,MAAM,KAAK,KAAK,CAAC,CAAC,MAAM,EAAE;CACzE,GAAG;EAAC;EAAM;EAAa;EAAM;CAAI,CAAC;AACpC"}

package/dist/index.cjs

@@ -58,7 +58,9 @@ const require_Grid = require("./components/grid/Grid.cjs");
 const require_Box = require("./components/box/Box.cjs");
 const require_LanguageSelect = require("./components/language-select/LanguageSelect.cjs");
 const require_List = require("./components/list/List.cjs");
+const require_code_block = require("./primitives/code-block.cjs");
 const require_CodeBlock = require("./components/code-block/CodeBlock.cjs");
+const require_use_highlighted_code = require("./hooks/use-highlighted-code.cjs");
 const require_WindowFrame = require("./components/window-frame/WindowFrame.cjs");
 const require_FogIllustration = require("./components/fog-illustration/FogIllustration.cjs");
 let _shadcn_react_message_scroller = require("@shadcn/react/message-scroller");
@@ -95,6 +97,13 @@ exports.CardHeader = require_card.CardHeader;
 exports.CardTitle = require_card.CardTitle;
 exports.Checkbox = require_Checkbox.Checkbox;
 exports.CodeBlock = require_CodeBlock.CodeBlock;
+exports.CodeBlockActions = require_code_block.CodeBlockActions;
+exports.CodeBlockContent = require_code_block.CodeBlockContent;
+exports.CodeBlockCopyButton = require_code_block.CodeBlockCopyButton;
+exports.CodeBlockFooter = require_code_block.CodeBlockFooter;
+exports.CodeBlockHeader = require_CodeBlock.CodeBlockHeader;
+exports.CodeBlockLine = require_code_block.CodeBlockLine;
+exports.CodeBlockTitle = require_CodeBlock.CodeBlockTitle;
 exports.Combobox = require_combobox.Combobox;
 exports.ComboboxClear = require_combobox.ComboboxClear;
 exports.ComboboxContent = require_combobox.ComboboxContent;
@@ -295,6 +304,7 @@ exports.switchThumbVariants = require_Switch.switchThumbVariants;
 exports.tabsListVariants = require_Tabs.tabsListVariants;
 exports.tabsTriggerVariants = require_Tabs.tabsTriggerVariants;
 exports.typographyVariants = require_Typography.typographyVariants;
+exports.useHighlightedCode = require_use_highlighted_code.useHighlightedCode;
 Object.defineProperty(exports, "useMessageScroller", {
 	enumerable: true,
 	get: function() {