@elabs-ai/components-ai 4.2.0 → 5.0.0

package/dist/chunk-TCB6O74A.js

@@ -0,0 +1,137 @@
+"use client";
+import {
+  AgentStep,
+  AgentTimeline
+} from "./chunk-UCJ6IUFS.js";
+
+// src/chain-of-thought.tsx
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { Badge } from "@elabs-ai/components-ui";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { BrainIcon, ChevronDownIcon } from "lucide-react";
+import { createContext, memo, useContext, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ChainOfThoughtContext = createContext(null);
+var useChainOfThought = () => {
+  const context = useContext(ChainOfThoughtContext);
+  if (!context) {
+    throw new Error("ChainOfThought components must be used within ChainOfThought");
+  }
+  return context;
+};
+var ChainOfThought = memo(
+  ({
+    className,
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    children,
+    ...props
+  }) => {
+    const [isOpen, setIsOpen] = useControllableState({
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+      prop: open
+    });
+    const chainOfThoughtContext = useMemo(() => ({ isOpen, setIsOpen }), [isOpen, setIsOpen]);
+    return /* @__PURE__ */ jsx(ChainOfThoughtContext.Provider, { value: chainOfThoughtContext, children: /* @__PURE__ */ jsx("div", { className: cn("not-prose w-full space-y-4", className), ...props, children }) });
+  }
+);
+var ChainOfThoughtHeader = memo(
+  ({ className, children, ...props }) => {
+    const { isOpen, setIsOpen } = useChainOfThought();
+    return /* @__PURE__ */ jsx(Collapsible, { onOpenChange: setIsOpen, open: isOpen, children: /* @__PURE__ */ jsxs(
+      CollapsibleTrigger,
+      {
+        className: cn(
+          "flex w-full items-center gap-2 text-body text-muted-foreground transition-colors hover:text-foreground",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(BrainIcon, { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 text-start", children: children ?? "Chain of Thought" }),
+          /* @__PURE__ */ jsx(
+            ChevronDownIcon,
+            {
+              className: cn("size-4 transition-transform", isOpen ? "rotate-180" : "rotate-0")
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+var stepStatusToCanonical = {
+  active: "running",
+  complete: "complete",
+  pending: "pending"
+};
+var ChainOfThoughtStep = memo(
+  ({ label, description, status = "complete", ...props }) => /* @__PURE__ */ jsx(
+    AgentStep,
+    {
+      hideBadge: true,
+      name: label,
+      status: stepStatusToCanonical[status],
+      summary: description,
+      ...props
+    }
+  )
+);
+var ChainOfThoughtSearchResults = memo(
+  ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center gap-2", className), ...props })
+);
+var ChainOfThoughtSearchResult = memo(
+  ({ className, children, ...props }) => /* @__PURE__ */ jsx(
+    Badge,
+    {
+      className: cn("gap-1 px-2 py-0.5 text-meta font-normal", className),
+      variant: "secondary",
+      ...props,
+      children
+    }
+  )
+);
+var ChainOfThoughtContent = memo(
+  ({ className, children, ...props }) => {
+    const { isOpen } = useChainOfThought();
+    return /* @__PURE__ */ jsx(Collapsible, { open: isOpen, children: /* @__PURE__ */ jsx(
+      CollapsibleContent,
+      {
+        className: cn(
+          "mt-2 space-y-3",
+          "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=open]:[--tw-ease:var(--ease-entrance)] data-[state=closed]:[--tw-ease:var(--ease-exit)]",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(AgentTimeline, { children })
+      }
+    ) });
+  }
+);
+var ChainOfThoughtImage = memo(
+  ({ className, children, caption, ...props }) => /* @__PURE__ */ jsxs("div", { className: cn("mt-2 space-y-2", className), ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: "relative flex max-h-[22rem] items-center justify-center overflow-hidden rounded-lg bg-muted p-3", children }),
+    caption && /* @__PURE__ */ jsx("p", { className: "text-meta text-muted-foreground", children: caption })
+  ] })
+);
+ChainOfThought.displayName = "ChainOfThought";
+ChainOfThoughtHeader.displayName = "ChainOfThoughtHeader";
+ChainOfThoughtStep.displayName = "ChainOfThoughtStep";
+ChainOfThoughtSearchResults.displayName = "ChainOfThoughtSearchResults";
+ChainOfThoughtSearchResult.displayName = "ChainOfThoughtSearchResult";
+ChainOfThoughtContent.displayName = "ChainOfThoughtContent";
+ChainOfThoughtImage.displayName = "ChainOfThoughtImage";
+
+export {
+  ChainOfThought,
+  ChainOfThoughtHeader,
+  ChainOfThoughtStep,
+  ChainOfThoughtSearchResults,
+  ChainOfThoughtSearchResult,
+  ChainOfThoughtContent,
+  ChainOfThoughtImage
+};
+//# sourceMappingURL=chunk-TCB6O74A.js.map

package/dist/chunk-TCB6O74A.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/chain-of-thought.tsx"],"sourcesContent":["\"use client\";\n\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport { Badge, type Status } from \"@elabs-ai/components-ui\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport { BrainIcon, ChevronDownIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport type { ComponentProps } from \"react\";\nimport { createContext, memo, useContext, useMemo } from \"react\";\n\nimport { AgentStep, AgentTimeline, type AgentStepProps } from \"./agent-timeline\";\n\ninterface ChainOfThoughtContextValue {\n  isOpen: boolean;\n  setIsOpen: (open: boolean) => void;\n}\n\nconst ChainOfThoughtContext = createContext<ChainOfThoughtContextValue | null>(null);\n\nconst useChainOfThought = () => {\n  const context = useContext(ChainOfThoughtContext);\n  if (!context) {\n    throw new Error(\"ChainOfThought components must be used within ChainOfThought\");\n  }\n  return context;\n};\n\nexport type ChainOfThoughtProps = ComponentProps<\"div\"> & {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n};\n\nexport const ChainOfThought = memo(\n  ({\n    className,\n    open,\n    defaultOpen = false,\n    onOpenChange,\n    children,\n    ...props\n  }: ChainOfThoughtProps) => {\n    const [isOpen, setIsOpen] = useControllableState({\n      defaultProp: defaultOpen,\n      onChange: onOpenChange,\n      prop: open,\n    });\n\n    const chainOfThoughtContext = useMemo(() => ({ isOpen, setIsOpen }), [isOpen, setIsOpen]);\n\n    return (\n      <ChainOfThoughtContext.Provider value={chainOfThoughtContext}>\n        <div className={cn(\"not-prose w-full space-y-4\", className)} {...props}>\n          {children}\n        </div>\n      </ChainOfThoughtContext.Provider>\n    );\n  },\n);\n\nexport type ChainOfThoughtHeaderProps = ComponentProps<typeof CollapsibleTrigger>;\n\nexport const ChainOfThoughtHeader = memo(\n  ({ className, children, ...props }: ChainOfThoughtHeaderProps) => {\n    const { isOpen, setIsOpen } = useChainOfThought();\n\n    return (\n      <Collapsible onOpenChange={setIsOpen} open={isOpen}>\n        <CollapsibleTrigger\n          className={cn(\n            \"flex w-full items-center gap-2 text-body text-muted-foreground transition-colors hover:text-foreground\",\n            className,\n          )}\n          {...props}\n        >\n          <BrainIcon className=\"size-4\" />\n          <span className=\"flex-1 text-start\">{children ?? \"Chain of Thought\"}</span>\n          <ChevronDownIcon\n            className={cn(\"size-4 transition-transform\", isOpen ? \"rotate-180\" : \"rotate-0\")}\n          />\n        </CollapsibleTrigger>\n      </Collapsible>\n    );\n  },\n);\n\nexport type ChainOfThoughtStepProps = Omit<\n  AgentStepProps,\n  \"name\" | \"summary\" | \"status\" | \"hideBadge\"\n> & {\n  label: ReactNode;\n  description?: ReactNode;\n  status?: \"complete\" | \"active\" | \"pending\";\n};\n\n/**\n * Step status → the canonical 7-state vocabulary (#189, research 10 §B.1):\n * `active` is a running step.\n */\nconst stepStatusToCanonical: Record<NonNullable<ChainOfThoughtStepProps[\"status\"]>, Status> = {\n  active: \"running\",\n  complete: \"complete\",\n  pending: \"pending\",\n};\n\n/**\n * @deprecated Compose `AgentStep` (agent-timeline.tsx) directly. Since #192\n * this is a thin alias mapping the legacy `label`/`description`/3-state\n * `status` props onto the canonical rail (`AgentTimeline` + `AgentStep`); the\n * pre-#192 hand-rolled connector + text-opacity status idiom is gone\n * (research 10 §B.3). The badge stays hidden here — the rail node carries the\n * status — keeping the quiet prose-rail look.\n */\nexport const ChainOfThoughtStep = memo(\n  ({ label, description, status = \"complete\", ...props }: ChainOfThoughtStepProps) => (\n    <AgentStep\n      hideBadge\n      name={label}\n      status={stepStatusToCanonical[status]}\n      summary={description}\n      {...props}\n    />\n  ),\n);\n\nexport type ChainOfThoughtSearchResultsProps = ComponentProps<\"div\">;\n\nexport const ChainOfThoughtSearchResults = memo(\n  ({ className, ...props }: ChainOfThoughtSearchResultsProps) => (\n    <div className={cn(\"flex flex-wrap items-center gap-2\", className)} {...props} />\n  ),\n);\n\nexport type ChainOfThoughtSearchResultProps = ComponentProps<typeof Badge>;\n\nexport const ChainOfThoughtSearchResult = memo(\n  ({ className, children, ...props }: ChainOfThoughtSearchResultProps) => (\n    <Badge\n      className={cn(\"gap-1 px-2 py-0.5 text-meta font-normal\", className)}\n      variant=\"secondary\"\n      {...props}\n    >\n      {children}\n    </Badge>\n  ),\n);\n\nexport type ChainOfThoughtContentProps = ComponentProps<typeof CollapsibleContent>;\n\nexport const ChainOfThoughtContent = memo(\n  ({ className, children, ...props }: ChainOfThoughtContentProps) => {\n    const { isOpen } = useChainOfThought();\n\n    return (\n      <Collapsible open={isOpen}>\n        <CollapsibleContent\n          className={cn(\n            \"mt-2 space-y-3\",\n            \"data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=open]:[--tw-ease:var(--ease-entrance)] data-[state=closed]:[--tw-ease:var(--ease-exit)]\",\n            className,\n          )}\n          {...props}\n        >\n          <AgentTimeline>{children}</AgentTimeline>\n        </CollapsibleContent>\n      </Collapsible>\n    );\n  },\n);\n\nexport type ChainOfThoughtImageProps = ComponentProps<\"div\"> & {\n  caption?: string;\n};\n\nexport const ChainOfThoughtImage = memo(\n  ({ className, children, caption, ...props }: ChainOfThoughtImageProps) => (\n    <div className={cn(\"mt-2 space-y-2\", className)} {...props}>\n      <div className=\"relative flex max-h-[22rem] items-center justify-center overflow-hidden rounded-lg bg-muted p-3\">\n        {children}\n      </div>\n      {caption && <p className=\"text-meta text-muted-foreground\">{caption}</p>}\n    </div>\n  ),\n);\n\nChainOfThought.displayName = \"ChainOfThought\";\nChainOfThoughtHeader.displayName = \"ChainOfThoughtHeader\";\nChainOfThoughtStep.displayName = \"ChainOfThoughtStep\";\nChainOfThoughtSearchResults.displayName = \"ChainOfThoughtSearchResults\";\nChainOfThoughtSearchResult.displayName = \"ChainOfThoughtSearchResult\";\nChainOfThoughtContent.displayName = \"ChainOfThoughtContent\";\nChainOfThoughtImage.displayName = \"ChainOfThoughtImage\";\n"],"mappings":"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","names":[]}

package/dist/chunk-TTEYPO6X.js

@@ -0,0 +1,57 @@
+"use client";
+
+// src/use-audio-level.ts
+import { useEffect, useState } from "react";
+var DEFAULT_FFT_SIZE = 64;
+var DEFAULT_SMOOTHING_TIME_CONSTANT = 0.6;
+function resolveAudioContextConstructor() {
+  if (typeof window === "undefined") return null;
+  const w = window;
+  return w.AudioContext ?? w.webkitAudioContext ?? null;
+}
+function useAudioLevel(stream, options = {}) {
+  const { fftSize = DEFAULT_FFT_SIZE, smoothingTimeConstant = DEFAULT_SMOOTHING_TIME_CONSTANT } = options;
+  const [levels, setLevels] = useState([]);
+  const [level, setLevel] = useState(0);
+  useEffect(() => {
+    if (!stream) {
+      setLevels([]);
+      setLevel(0);
+      return void 0;
+    }
+    const AudioContextConstructor = resolveAudioContextConstructor();
+    if (!AudioContextConstructor) {
+      return void 0;
+    }
+    const audioContext = new AudioContextConstructor();
+    const source = audioContext.createMediaStreamSource(stream);
+    const analyser = audioContext.createAnalyser();
+    analyser.fftSize = fftSize;
+    analyser.smoothingTimeConstant = smoothingTimeConstant;
+    source.connect(analyser);
+    const buffer = new Uint8Array(analyser.frequencyBinCount);
+    let rafId = 0;
+    const tick = () => {
+      analyser.getByteFrequencyData(buffer);
+      const normalized = Array.from(buffer, (value) => value / 255);
+      setLevels(normalized);
+      setLevel(normalized.reduce((sum, value) => sum + value, 0) / (normalized.length || 1));
+      rafId = requestAnimationFrame(tick);
+    };
+    rafId = requestAnimationFrame(tick);
+    return () => {
+      cancelAnimationFrame(rafId);
+      source.disconnect();
+      analyser.disconnect();
+      if (audioContext.state !== "closed") {
+        void audioContext.close();
+      }
+    };
+  }, [stream, fftSize, smoothingTimeConstant]);
+  return { level, levels };
+}
+
+export {
+  useAudioLevel
+};
+//# sourceMappingURL=chunk-TTEYPO6X.js.map

package/dist/chunk-TTEYPO6X.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-audio-level.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/**\n * The OPT-IN analyser-plumbing hook for `AudioVisualizer` (issue #21). It is a\n * separate export a consumer may ignore entirely — `AudioVisualizer` itself\n * never imports or calls this. brand-ui is a presentation layer (D5): this\n * hook never calls `getUserMedia` and never creates an `AudioContext` until a\n * `MediaStream` the CONSUMER already obtained is actually passed in.\n */\n\nexport interface UseAudioLevelOptions {\n  /** `AnalyserNode.fftSize` — controls how many frequency bins `levels` has\n   * (`fftSize / 2`). Must be a power of two in [32, 32768]. */\n  fftSize?: number;\n  /** `AnalyserNode.smoothingTimeConstant` (0–1) — the analyser's OWN frame-to-frame\n   * smoothing, independent of `AudioVisualizer`'s reduced-motion smoothing. */\n  smoothingTimeConstant?: number;\n}\n\nexport interface UseAudioLevelResult {\n  /** Normalized 0–1 frequency-bin samples for the current frame — feed this\n   * directly to `<AudioVisualizer levels={levels} />`. Empty while `stream`\n   * is `null`/`undefined` or the Web Audio API is unavailable. */\n  levels: number[];\n  /** The mean of `levels` — a single 0–1 scalar for a simple level meter. */\n  level: number;\n}\n\nconst DEFAULT_FFT_SIZE = 64;\nconst DEFAULT_SMOOTHING_TIME_CONSTANT = 0.6;\n\ntype AudioContextCtor = new () => AudioContext;\n\n/** Feature-detects the Web Audio API — absent under SSR, in a test runner\n * with no Web Audio shim, and in older Safari (`webkitAudioContext`). */\nfunction resolveAudioContextConstructor(): AudioContextCtor | null {\n  if (typeof window === \"undefined\") return null;\n  const w = window as typeof window & { webkitAudioContext?: AudioContextCtor };\n  return w.AudioContext ?? w.webkitAudioContext ?? null;\n}\n\n/**\n * Polls a `MediaStream` the caller already obtained (their own `getUserMedia`\n * call — this hook never requests one) via a Web Audio `AnalyserNode`, on a\n * `requestAnimationFrame` loop, and returns normalized levels.\n *\n * Pass `null`/`undefined` for `stream` (e.g. before the user grants mic\n * permission) and the hook is a no-op returning empty levels — safe to call\n * unconditionally, including with no stream ever provided at all.\n */\nexport function useAudioLevel(\n  stream: MediaStream | null | undefined,\n  options: UseAudioLevelOptions = {},\n): UseAudioLevelResult {\n  const { fftSize = DEFAULT_FFT_SIZE, smoothingTimeConstant = DEFAULT_SMOOTHING_TIME_CONSTANT } =\n    options;\n  const [levels, setLevels] = useState<number[]>([]);\n  const [level, setLevel] = useState(0);\n\n  useEffect(() => {\n    if (!stream) {\n      setLevels([]);\n      setLevel(0);\n      return undefined;\n    }\n\n    const AudioContextConstructor = resolveAudioContextConstructor();\n    if (!AudioContextConstructor) {\n      return undefined;\n    }\n\n    const audioContext = new AudioContextConstructor();\n    const source = audioContext.createMediaStreamSource(stream);\n    const analyser = audioContext.createAnalyser();\n    analyser.fftSize = fftSize;\n    analyser.smoothingTimeConstant = smoothingTimeConstant;\n    source.connect(analyser);\n\n    const buffer = new Uint8Array(analyser.frequencyBinCount);\n    let rafId = 0;\n\n    const tick = () => {\n      analyser.getByteFrequencyData(buffer);\n      const normalized = Array.from(buffer, (value) => value / 255);\n      setLevels(normalized);\n      setLevel(normalized.reduce((sum, value) => sum + value, 0) / (normalized.length || 1));\n      rafId = requestAnimationFrame(tick);\n    };\n    rafId = requestAnimationFrame(tick);\n\n    return () => {\n      cancelAnimationFrame(rafId);\n      source.disconnect();\n      analyser.disconnect();\n      if (audioContext.state !== \"closed\") {\n        void audioContext.close();\n      }\n    };\n  }, [stream, fftSize, smoothingTimeConstant]);\n\n  return { level, levels };\n}\n"],"mappings":";;;AAEA,SAAS,WAAW,gBAAgB;AA4BpC,IAAM,mBAAmB;AACzB,IAAM,kCAAkC;AAMxC,SAAS,iCAA0D;AACjE,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,QAAM,IAAI;AACV,SAAO,EAAE,gBAAgB,EAAE,sBAAsB;AACnD;AAWO,SAAS,cACd,QACA,UAAgC,CAAC,GACZ;AACrB,QAAM,EAAE,UAAU,kBAAkB,wBAAwB,gCAAgC,IAC1F;AACF,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAmB,CAAC,CAAC;AACjD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AAEpC,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ;AACX,gBAAU,CAAC,CAAC;AACZ,eAAS,CAAC;AACV,aAAO;AAAA,IACT;AAEA,UAAM,0BAA0B,+BAA+B;AAC/D,QAAI,CAAC,yBAAyB;AAC5B,aAAO;AAAA,IACT;AAEA,UAAM,eAAe,IAAI,wBAAwB;AACjD,UAAM,SAAS,aAAa,wBAAwB,MAAM;AAC1D,UAAM,WAAW,aAAa,eAAe;AAC7C,aAAS,UAAU;AACnB,aAAS,wBAAwB;AACjC,WAAO,QAAQ,QAAQ;AAEvB,UAAM,SAAS,IAAI,WAAW,SAAS,iBAAiB;AACxD,QAAI,QAAQ;AAEZ,UAAM,OAAO,MAAM;AACjB,eAAS,qBAAqB,MAAM;AACpC,YAAM,aAAa,MAAM,KAAK,QAAQ,CAAC,UAAU,QAAQ,GAAG;AAC5D,gBAAU,UAAU;AACpB,eAAS,WAAW,OAAO,CAAC,KAAK,UAAU,MAAM,OAAO,CAAC,KAAK,WAAW,UAAU,EAAE;AACrF,cAAQ,sBAAsB,IAAI;AAAA,IACpC;AACA,YAAQ,sBAAsB,IAAI;AAElC,WAAO,MAAM;AACX,2BAAqB,KAAK;AAC1B,aAAO,WAAW;AAClB,eAAS,WAAW;AACpB,UAAI,aAAa,UAAU,UAAU;AACnC,aAAK,aAAa,MAAM;AAAA,MAC1B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,SAAS,qBAAqB,CAAC;AAE3C,SAAO,EAAE,OAAO,OAAO;AACzB;","names":[]}

package/dist/chunk-TWPHAJNM.js

@@ -0,0 +1,462 @@
+"use client";
+import {
+  Shimmer
+} from "./chunk-3YPT3V7L.js";
+import {
+  getThemeScope,
+  useThemeScopeRevision
+} from "./chunk-3TDHPXZZ.js";
+import {
+  buildCodeBlockTheme,
+  codeBlockThemeId,
+  getThemeScopeKey
+} from "./chunk-SSKZ2AED.js";
+
+// src/code-block.tsx
+import { Button, useCopyToClipboard, useLocale } from "@elabs-ai/components-ui";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import {
+  createContext,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState
+} from "react";
+import { createHighlighter } from "shiki";
+import { jsx, jsxs } from "react/jsx-runtime";
+var isItalic = (fontStyle) => fontStyle && fontStyle & 1;
+var isBold = (fontStyle) => fontStyle && fontStyle & 2;
+var isUnderline = (fontStyle) => (
+  // oxlint-disable-next-line eslint(no-bitwise)
+  fontStyle && fontStyle & 4
+);
+var addKeysToTokens = (lines) => lines.map((line, lineIdx) => ({
+  key: `line-${lineIdx}`,
+  tokens: line.map((token, tokenIdx) => ({
+    key: `line-${lineIdx}-${tokenIdx}`,
+    token
+  }))
+}));
+var TokenSpan = ({ token }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    style: {
+      backgroundColor: token.bgColor,
+      color: token.color,
+      fontStyle: isItalic(token.fontStyle) ? "italic" : void 0,
+      fontWeight: isBold(token.fontStyle) ? "bold" : void 0,
+      textDecoration: isUnderline(token.fontStyle) ? "underline" : void 0,
+      ...token.htmlStyle
+    },
+    children: token.content
+  }
+);
+var LINE_NUMBER_CLASSES = cn(
+  "block",
+  "before:content-[counter(line)]",
+  "before:inline-block",
+  "before:[counter-increment:line]",
+  "before:w-8",
+  "before:me-4",
+  "before:text-end",
+  "before:text-muted-foreground/50",
+  "before:font-mono",
+  "before:select-none"
+);
+var LineSpan = ({
+  keyedLine,
+  showLineNumbers
+}) => /* @__PURE__ */ jsx("span", { className: showLineNumbers ? LINE_NUMBER_CLASSES : "block", children: keyedLine.tokens.length === 0 ? "\n" : keyedLine.tokens.map(({ token, key }) => /* @__PURE__ */ jsx(TokenSpan, { token }, key)) });
+var CodeBlockContext = createContext({
+  code: ""
+});
+var highlighterCache = /* @__PURE__ */ new Map();
+var MAX_TOKENS_CACHE_ENTRIES = 200;
+var tokensCache = /* @__PURE__ */ new Map();
+var tokensCacheGet = (key) => {
+  const value = tokensCache.get(key);
+  if (value === void 0) return void 0;
+  tokensCache.delete(key);
+  tokensCache.set(key, value);
+  return value;
+};
+var tokensCacheSet = (key, value) => {
+  tokensCache.delete(key);
+  tokensCache.set(key, value);
+  while (tokensCache.size > MAX_TOKENS_CACHE_ENTRIES) {
+    const oldestKey = tokensCache.keys().next().value;
+    if (oldestKey === void 0) break;
+    tokensCache.delete(oldestKey);
+  }
+};
+var subscribers = /* @__PURE__ */ new Map();
+var hashCode = (value) => {
+  let hash = 2166136261;
+  for (let i = 0; i < value.length; i++) {
+    hash ^= value.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return (hash >>> 0).toString(36);
+};
+var getTokensCacheKey = (code, language, themeId) => `${themeId}:${language}:${code.length}:${hashCode(code)}`;
+var getHighlighter = (language) => {
+  const cached = highlighterCache.get(language);
+  if (cached) {
+    return cached;
+  }
+  const highlighterPromise = createHighlighter({
+    langs: [language],
+    themes: []
+  });
+  highlighterCache.set(language, highlighterPromise);
+  return highlighterPromise;
+};
+var createRawTokens = (code) => ({
+  bg: "transparent",
+  fg: "inherit",
+  tokens: code.split("\n").map(
+    (line) => line === "" ? [] : [
+      {
+        color: "inherit",
+        content: line
+      }
+    ]
+  )
+});
+var highlightCode = (code, language, callback, el, skipCache = false) => {
+  const themeId = codeBlockThemeId(getThemeScopeKey(el));
+  const tokensCacheKey = getTokensCacheKey(code, language, themeId);
+  const cached = tokensCacheGet(tokensCacheKey);
+  if (cached) {
+    return cached;
+  }
+  if (callback) {
+    if (!subscribers.has(tokensCacheKey)) {
+      subscribers.set(tokensCacheKey, /* @__PURE__ */ new Set());
+    }
+    subscribers.get(tokensCacheKey)?.add(callback);
+  }
+  getHighlighter(language).then((highlighter) => {
+    const availableLangs = highlighter.getLoadedLanguages();
+    const langToUse = availableLangs.includes(language) ? language : "text";
+    const result = highlighter.codeToTokens(code, {
+      lang: langToUse,
+      theme: buildCodeBlockTheme(el)
+    });
+    const tokenized = {
+      bg: result.bg ?? "transparent",
+      fg: result.fg ?? "inherit",
+      tokens: result.tokens
+    };
+    if (!skipCache) {
+      tokensCacheSet(tokensCacheKey, tokenized);
+    }
+    const subs = subscribers.get(tokensCacheKey);
+    if (subs) {
+      for (const sub of subs) {
+        sub(tokenized);
+      }
+      subscribers.delete(tokensCacheKey);
+    }
+  }).catch((error) => {
+    console.error("Failed to highlight code:", error);
+    subscribers.delete(tokensCacheKey);
+  });
+  return null;
+};
+var CodeBlockBody = memo(
+  ({
+    tokenized,
+    showLineNumbers,
+    wrap,
+    className
+  }) => {
+    const preStyle = useMemo(
+      () => ({
+        backgroundColor: tokenized.bg,
+        color: tokenized.fg
+      }),
+      [tokenized.bg, tokenized.fg]
+    );
+    const keyedLines = useMemo(() => addKeysToTokens(tokenized.tokens), [tokenized.tokens]);
+    return /* @__PURE__ */ jsx(
+      "pre",
+      {
+        className: cn("m-0 p-4 text-body", wrap && "whitespace-pre-wrap break-words", className),
+        style: preStyle,
+        children: /* @__PURE__ */ jsx(
+          "code",
+          {
+            className: cn(
+              "font-mono text-body",
+              showLineNumbers && "[counter-increment:line_0] [counter-reset:line]"
+            ),
+            children: keyedLines.map((keyedLine) => /* @__PURE__ */ jsx(LineSpan, { keyedLine, showLineNumbers }, keyedLine.key))
+          }
+        )
+      }
+    );
+  },
+  (prevProps, nextProps) => prevProps.tokenized === nextProps.tokenized && prevProps.showLineNumbers === nextProps.showLineNumbers && prevProps.wrap === nextProps.wrap && prevProps.className === nextProps.className
+);
+CodeBlockBody.displayName = "CodeBlockBody";
+var CodeBlockContainer = ({
+  className,
+  language,
+  style,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "group relative w-full overflow-hidden rounded-md border bg-background text-foreground",
+      className
+    ),
+    "data-language": language,
+    style: {
+      containIntrinsicSize: "auto 200px",
+      contentVisibility: "auto",
+      ...style
+    },
+    ...props
+  }
+);
+var CodeBlockHeader = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex items-center justify-between border-b bg-muted/80 px-3 py-2 text-muted-foreground text-meta",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var CodeBlockTitle = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-2", className), ...props, children });
+var CodeBlockFilename = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("span", { className: cn("font-mono", className), ...props, children });
+var CodeBlockActions = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("-my-1 -me-1 flex items-center gap-2", className), ...props, children });
+var STREAM_HIGHLIGHT_THROTTLE_MS = 200;
+var CodeBlockContent = ({
+  code,
+  language,
+  showLineNumbers = false,
+  wrap = false,
+  isStreaming = false
+}) => {
+  const scopeRef = useRef(null);
+  const [, forceMountRerender] = useReducer((tick) => tick + 1, 0);
+  useLayoutEffect(() => {
+    forceMountRerender();
+  }, []);
+  const scopeEl = getThemeScope(scopeRef.current);
+  const themeRevision = useThemeScopeRevision(scopeRef.current);
+  const themeScopeKey = useMemo(
+    () => getThemeScopeKey(scopeEl),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- themeRevision is the trigger; scopeEl's own identity already changes across the post-mount re-render above.
+    [themeRevision, scopeEl]
+  );
+  const rawTokens = useMemo(() => createRawTokens(code), [code]);
+  const themeId = codeBlockThemeId(themeScopeKey);
+  const tokensCacheKey = getTokensCacheKey(code, language, themeId);
+  const syncTokens = tokensCache.get(tokensCacheKey) ?? rawTokens;
+  const [asyncTokens, setAsyncTokens] = useState(null);
+  const asyncKeyRef = useRef({ code, language, themeScopeKey });
+  if (asyncKeyRef.current.code !== code || asyncKeyRef.current.language !== language || asyncKeyRef.current.themeScopeKey !== themeScopeKey) {
+    asyncKeyRef.current = { code, language, themeScopeKey };
+    setAsyncTokens(null);
+  }
+  const lastHighlightAtRef = useRef(0);
+  useEffect(() => {
+    let cancelled = false;
+    let timeoutId;
+    const runHighlight = () => {
+      lastHighlightAtRef.current = Date.now();
+      const cached = highlightCode(
+        code,
+        language,
+        (result) => {
+          if (!cancelled) {
+            setAsyncTokens(result);
+          }
+        },
+        scopeEl,
+        isStreaming
+      );
+      if (cached && !cancelled) {
+        setAsyncTokens(cached);
+      }
+    };
+    if (!isStreaming) {
+      runHighlight();
+    } else {
+      const elapsed = Date.now() - lastHighlightAtRef.current;
+      if (elapsed >= STREAM_HIGHLIGHT_THROTTLE_MS) {
+        runHighlight();
+      } else {
+        timeoutId = setTimeout(runHighlight, STREAM_HIGHLIGHT_THROTTLE_MS - elapsed);
+      }
+    }
+    return () => {
+      cancelled = true;
+      if (timeoutId !== void 0) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [code, language, themeScopeKey, scopeEl, isStreaming]);
+  const tokenized = asyncTokens ?? syncTokens;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: scopeRef,
+      className: cn(
+        "relative overflow-auto",
+        // Discoverable horizontal-scroll affordance in non-wrap mode, so a narrow
+        // embed doesn't silently clip long lines. Hidden when wrapping (no overflow).
+        !wrap && "[scrollbar-width:thin] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border"
+      ),
+      children: /* @__PURE__ */ jsx(CodeBlockBody, { showLineNumbers, tokenized, wrap })
+    }
+  );
+};
+var CodeBlock = ({
+  code,
+  language,
+  showLineNumbers = false,
+  wrap = false,
+  isStreaming = false,
+  className,
+  children,
+  ...props
+}) => {
+  const contextValue = useMemo(() => ({ code }), [code]);
+  const { t } = useLocale();
+  return /* @__PURE__ */ jsx(CodeBlockContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(CodeBlockContainer, { className, language, ...props, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      CodeBlockContent,
+      {
+        code,
+        language,
+        showLineNumbers,
+        wrap,
+        isStreaming
+      }
+    ),
+    isStreaming ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex items-center gap-2 border-t bg-muted/80 px-3 py-1.5 text-caption text-muted-foreground",
+        role: "status",
+        "aria-live": "polite",
+        children: /* @__PURE__ */ jsx(Shimmer, { children: t("ai.codeBlock.generating") })
+      }
+    ) : null
+  ] }) });
+};
+var CodeBlockCopyButton = ({
+  onCopy,
+  onError,
+  timeout,
+  children,
+  className,
+  ...props
+}) => {
+  const { t } = useLocale();
+  const { code } = useContext(CodeBlockContext);
+  const { copied: isCopied, copy } = useCopyToClipboard(
+    timeout === void 0 ? void 0 : { resetAfterMs: timeout }
+  );
+  const copyToClipboard = useCallback(async () => {
+    const ok = await copy(code);
+    if (ok) {
+      onCopy?.();
+    } else {
+      onError?.(new Error("Clipboard API not available"));
+    }
+  }, [copy, code, onCopy, onError]);
+  const Icon = isCopied ? CheckIcon : CopyIcon;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": t("copy"),
+      className: cn("shrink-0", className),
+      onClick: copyToClipboard,
+      size: "icon",
+      variant: "ghost",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "flex animate-in fade-in-0 zoom-in-95 duration-fast ease-entrance",
+          children: /* @__PURE__ */ jsx(Icon, { size: 14 })
+        },
+        isCopied ? "check" : "copy"
+      )
+    }
+  );
+};
+var CodeBlockLanguageSelector = (props) => /* @__PURE__ */ jsx(Select, { ...props });
+var CodeBlockLanguageSelectorTrigger = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  SelectTrigger,
+  {
+    className: cn("h-7 border-none bg-transparent px-2 text-meta shadow-none", className),
+    size: "sm",
+    ...props
+  }
+);
+var CodeBlockLanguageSelectorValue = (props) => /* @__PURE__ */ jsx(SelectValue, { ...props });
+var CodeBlockLanguageSelectorContent = ({
+  align = "end",
+  ...props
+}) => /* @__PURE__ */ jsx(SelectContent, { align, ...props });
+var CodeBlockLanguageSelectorItem = (props) => /* @__PURE__ */ jsx(SelectItem, { ...props });
+
+export {
+  highlightCode,
+  CodeBlockContainer,
+  CodeBlockHeader,
+  CodeBlockTitle,
+  CodeBlockFilename,
+  CodeBlockActions,
+  CodeBlockContent,
+  CodeBlock,
+  CodeBlockCopyButton,
+  CodeBlockLanguageSelector,
+  CodeBlockLanguageSelectorTrigger,
+  CodeBlockLanguageSelectorValue,
+  CodeBlockLanguageSelectorContent,
+  CodeBlockLanguageSelectorItem
+};
+//# sourceMappingURL=chunk-TWPHAJNM.js.map