@elabs-ai/components-ai 4.1.0 → 5.0.0

package/dist/artifact.js

@@ -0,0 +1,23 @@
+"use client";
+"use client";
+import {
+  Artifact,
+  ArtifactAction,
+  ArtifactActions,
+  ArtifactClose,
+  ArtifactContent,
+  ArtifactDescription,
+  ArtifactHeader,
+  ArtifactTitle
+} from "./chunk-DDG5JHQT.js";
+export {
+  Artifact,
+  ArtifactAction,
+  ArtifactActions,
+  ArtifactClose,
+  ArtifactContent,
+  ArtifactDescription,
+  ArtifactHeader,
+  ArtifactTitle
+};
+//# sourceMappingURL=artifact.js.map

package/dist/artifact.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/asset-preview.js

@@ -0,0 +1,22 @@
+"use client";
+"use client";
+import {
+  AssetPreview
+} from "./chunk-RB7G65JC.js";
+import "./chunk-V4DORGWJ.js";
+import "./chunk-NPUCMAG2.js";
+import "./chunk-TWPHAJNM.js";
+import "./chunk-3YPT3V7L.js";
+import "./chunk-DDG5JHQT.js";
+import "./chunk-PQBF6ZIQ.js";
+import "./chunk-VLNBTOH6.js";
+import "./chunk-PG7ERDOD.js";
+import "./chunk-SEVN656N.js";
+import "./chunk-DZW6LM22.js";
+import "./chunk-3TDHPXZZ.js";
+import "./chunk-SSKZ2AED.js";
+import "./chunk-QUDZOTRV.js";
+export {
+  AssetPreview
+};
+//# sourceMappingURL=asset-preview.js.map

package/dist/asset-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/attachments.js

@@ -0,0 +1,33 @@
+"use client";
+"use client";
+import {
+  Attachment,
+  AttachmentEmpty,
+  AttachmentHoverCard,
+  AttachmentHoverCardContent,
+  AttachmentHoverCardTrigger,
+  AttachmentInfo,
+  AttachmentPreview,
+  AttachmentRemove,
+  Attachments,
+  getAttachmentLabel,
+  getMediaCategory,
+  useAttachmentContext,
+  useAttachmentsContext
+} from "./chunk-7RL6KZDF.js";
+export {
+  Attachment,
+  AttachmentEmpty,
+  AttachmentHoverCard,
+  AttachmentHoverCardContent,
+  AttachmentHoverCardTrigger,
+  AttachmentInfo,
+  AttachmentPreview,
+  AttachmentRemove,
+  Attachments,
+  getAttachmentLabel,
+  getMediaCategory,
+  useAttachmentContext,
+  useAttachmentsContext
+};
+//# sourceMappingURL=attachments.js.map

package/dist/attachments.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/audio-player.js

@@ -0,0 +1,30 @@
+"use client";
+"use client";
+import {
+  AudioPlayer,
+  AudioPlayerControlBar,
+  AudioPlayerDurationDisplay,
+  AudioPlayerElement,
+  AudioPlayerMuteButton,
+  AudioPlayerPlayButton,
+  AudioPlayerSeekBackwardButton,
+  AudioPlayerSeekForwardButton,
+  AudioPlayerTimeDisplay,
+  AudioPlayerTimeRange,
+  AudioPlayerVolumeRange
+} from "./chunk-NSCLRHES.js";
+import "./chunk-S3ISPW3A.js";
+export {
+  AudioPlayer,
+  AudioPlayerControlBar,
+  AudioPlayerDurationDisplay,
+  AudioPlayerElement,
+  AudioPlayerMuteButton,
+  AudioPlayerPlayButton,
+  AudioPlayerSeekBackwardButton,
+  AudioPlayerSeekForwardButton,
+  AudioPlayerTimeDisplay,
+  AudioPlayerTimeRange,
+  AudioPlayerVolumeRange
+};
+//# sourceMappingURL=audio-player.js.map

package/dist/audio-player.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/audio-visualizer.js

@@ -0,0 +1,9 @@
+"use client";
+"use client";
+import {
+  AudioVisualizer
+} from "./chunk-IQJG4IDX.js";
+export {
+  AudioVisualizer
+};
+//# sourceMappingURL=audio-visualizer.js.map

package/dist/audio-visualizer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/canvas.js

@@ -0,0 +1,10 @@
+"use client";
+"use client";
+import {
+  Canvas
+} from "./chunk-BA3AEMOU.js";
+import "./chunk-NMVNNO3L.js";
+export {
+  Canvas
+};
+//# sourceMappingURL=canvas.js.map

package/dist/canvas.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chain-of-thought.js

@@ -0,0 +1,22 @@
+"use client";
+"use client";
+import {
+  ChainOfThought,
+  ChainOfThoughtContent,
+  ChainOfThoughtHeader,
+  ChainOfThoughtImage,
+  ChainOfThoughtSearchResult,
+  ChainOfThoughtSearchResults,
+  ChainOfThoughtStep
+} from "./chunk-TCB6O74A.js";
+import "./chunk-UCJ6IUFS.js";
+export {
+  ChainOfThought,
+  ChainOfThoughtContent,
+  ChainOfThoughtHeader,
+  ChainOfThoughtImage,
+  ChainOfThoughtSearchResult,
+  ChainOfThoughtSearchResults,
+  ChainOfThoughtStep
+};
+//# sourceMappingURL=chain-of-thought.js.map

package/dist/chain-of-thought.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chat-greeting.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  ChatGreeting
+} from "./chunk-RPHAOR7P.js";
+export {
+  ChatGreeting
+};
+//# sourceMappingURL=chat-greeting.js.map

package/dist/chat-greeting.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chat-shell.js

@@ -0,0 +1,9 @@
+"use client";
+"use client";
+import {
+  ChatShell
+} from "./chunk-4CBTII2I.js";
+export {
+  ChatShell
+};
+//# sourceMappingURL=chat-shell.js.map

package/dist/chat-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/checkpoint.js

@@ -0,0 +1,13 @@
+"use client";
+"use client";
+import {
+  Checkpoint,
+  CheckpointIcon,
+  CheckpointTrigger
+} from "./chunk-DJODXO7I.js";
+export {
+  Checkpoint,
+  CheckpointIcon,
+  CheckpointTrigger
+};
+//# sourceMappingURL=checkpoint.js.map

package/dist/checkpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-2XOIG5TG.js

@@ -0,0 +1,72 @@
+"use client";
+
+// src/model-provider-logo.tsx
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { resolveThemeIsDark } from "@elabs-ai/components-tokens";
+import { BotIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+function useIsDarkTheme() {
+  const [isDark, setIsDark] = useState(false);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const el = document.documentElement;
+    const read = () => setIsDark(resolveThemeIsDark(el));
+    read();
+    const obs = new MutationObserver(read);
+    obs.observe(el, { attributes: true, attributeFilter: ["data-theme"] });
+    return () => obs.disconnect();
+  }, []);
+  return isDark;
+}
+var MODEL_PROVIDER_LOGO_BASE_URL = "https://models.dev/logos";
+var ModelProviderLogo = ({
+  provider,
+  className,
+  src,
+  fallback,
+  onError,
+  ...props
+}) => {
+  const [failed, setFailed] = useState(false);
+  const isDark = useIsDarkTheme();
+  if (failed) {
+    return /* @__PURE__ */ jsx(Fragment, { children: fallback ?? /* @__PURE__ */ jsx(BotIcon, { "aria-label": `${provider} logo`, className: cn("size-3", className), role: "img" }) });
+  }
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      ...props,
+      alt: `${provider} logo`,
+      className: cn("size-3", isDark && "invert", className),
+      height: 12,
+      onError: (event) => {
+        setFailed(true);
+        onError?.(event);
+      },
+      src: src ?? `${MODEL_PROVIDER_LOGO_BASE_URL}/${provider}.svg`,
+      width: 12
+    }
+  );
+};
+var ModelProviderLogoGroup = ({ className, ...props }) => {
+  const isDark = useIsDarkTheme();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex shrink-0 items-center -space-x-1 [&>img]:rounded-full [&>img]:p-px [&>img]:ring-1",
+        isDark ? "[&>img]:bg-foreground" : "[&>img]:bg-background",
+        className
+      ),
+      ...props
+    }
+  );
+};
+
+export {
+  MODEL_PROVIDER_LOGO_BASE_URL,
+  ModelProviderLogo,
+  ModelProviderLogoGroup
+};
+//# sourceMappingURL=chunk-2XOIG5TG.js.map

package/dist/chunk-2XOIG5TG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/model-provider-logo.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport { resolveThemeIsDark } from \"@elabs-ai/components-tokens\";\nimport { BotIcon } from \"lucide-react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { useEffect, useState } from \"react\";\n\n/**\n * Tracks the ACTIVE theme's own `color-scheme` (`resolveThemeIsDark`), not the\n * two shipped `light`/`dark` themes — a consumer-authored dark theme still\n * gets an inverted (visible) logo with no registration step (theming.md:\n * \"Use semantic tokens, not `dark:` — `@custom-variant dark` covers only the\n * themes shipped HERE\"). Mirrors `Toaster`'s `useDocumentThemeMode`\n * (`packages/ui/src/components/sonner/sonner.tsx`).\n */\nfunction useIsDarkTheme(): boolean {\n  const [isDark, setIsDark] = useState(false);\n  useEffect(() => {\n    if (typeof document === \"undefined\") return;\n    const el = document.documentElement;\n    const read = () => setIsDark(resolveThemeIsDark(el));\n    read();\n    const obs = new MutationObserver(read);\n    obs.observe(el, { attributes: true, attributeFilter: [\"data-theme\"] });\n    return () => obs.disconnect();\n  }, []);\n  return isDark;\n}\n\n/**\n * Where provider logos are fetched from by default.\n *\n * This is a REMOTE origin: a deployment with a restrictive `img-src` blocks it.\n * Self-host the SVGs and pass `src` (or set a `fallback`) — see\n * `docs/CSP-AND-NETWORK.md`.\n */\nexport const MODEL_PROVIDER_LOGO_BASE_URL = \"https://models.dev/logos\";\n\nexport type ModelProviderLogoProps = Omit<ComponentProps<\"img\">, \"alt\"> & {\n  /**\n   * Override the logo URL — point at a self-hosted or bundled asset when a CSP\n   * blocks `models.dev`. Defaults to `${MODEL_PROVIDER_LOGO_BASE_URL}/<provider>.svg`.\n   */\n  src?: string;\n  /**\n   * Rendered when the logo fails to load (blocked, offline, or unknown\n   * provider). Defaults to a neutral Lucide glyph, so the row never collapses\n   * to a broken image.\n   */\n  fallback?: ReactNode;\n  provider:\n    | \"moonshotai-cn\"\n    | \"lucidquery\"\n    | \"moonshotai\"\n    | \"zai-coding-plan\"\n    | \"alibaba\"\n    | \"xai\"\n    | \"vultr\"\n    | \"nvidia\"\n    | \"upstage\"\n    | \"groq\"\n    | \"github-copilot\"\n    | \"mistral\"\n    | \"vercel\"\n    | \"nebius\"\n    | \"deepseek\"\n    | \"alibaba-cn\"\n    | \"google-vertex-anthropic\"\n    | \"venice\"\n    | \"chutes\"\n    | \"cortecs\"\n    | \"github-models\"\n    | \"togetherai\"\n    | \"azure\"\n    | \"baseten\"\n    | \"huggingface\"\n    | \"opencode\"\n    | \"fastrouter\"\n    | \"google\"\n    | \"google-vertex\"\n    | \"cloudflare-workers-ai\"\n    | \"inception\"\n    | \"wandb\"\n    | \"openai\"\n    | \"zhipuai-coding-plan\"\n    | \"perplexity\"\n    | \"openrouter\"\n    | \"zenmux\"\n    | \"v0\"\n    | \"iflowcn\"\n    | \"synthetic\"\n    | \"deepinfra\"\n    | \"zhipuai\"\n    | \"submodel\"\n    | \"zai\"\n    | \"inference\"\n    | \"requesty\"\n    | \"morph\"\n    | \"lmstudio\"\n    | \"anthropic\"\n    | \"aihubmix\"\n    | \"fireworks-ai\"\n    | \"modelscope\"\n    | \"llama\"\n    | \"scaleway\"\n    | \"amazon-bedrock\"\n    | \"cerebras\"\n    // oxlint-disable-next-line typescript-eslint(ban-types) -- intentional pattern for autocomplete-friendly string union\n    | (string & {});\n};\n\n/**\n * The mark of an AI model provider (`anthropic`, `openai`, `google`, …), sized\n * for a row in a model list.\n *\n * **`ModelProviderLogo` vs `ServiceLogo` (`@elabs-ai/components-icons`).** An AI\n * provider mark with a zero-config remote default — name the provider and a logo\n * appears, no registration step — is this component. Any other third-party\n * service mark, resolved from a registry the app supplies and never fetched, is\n * `ServiceLogo`. The two are not interchangeable: `ServiceLogo` has no\n * per-instance `src` and no `onError`, and this one reaches a remote origin by\n * default (see `docs/CSP-AND-NETWORK.md`).\n */\nexport const ModelProviderLogo = ({\n  provider,\n  className,\n  src,\n  fallback,\n  onError,\n  ...props\n}: ModelProviderLogoProps) => {\n  const [failed, setFailed] = useState(false);\n  const isDark = useIsDarkTheme();\n\n  // A blocked/missing logo must not leave a broken-image glyph in the row.\n  if (failed) {\n    return (\n      <>\n        {fallback ?? (\n          <BotIcon aria-label={`${provider} logo`} className={cn(\"size-3\", className)} role=\"img\" />\n        )}\n      </>\n    );\n  }\n\n  return (\n    <img\n      {...props}\n      alt={`${provider} logo`}\n      className={cn(\"size-3\", isDark && \"invert\", className)}\n      height={12}\n      onError={(event) => {\n        setFailed(true);\n        onError?.(event);\n      }}\n      // AFTER the spread, so the caller's `src` wins via the destructured\n      // default rather than being silently overwritten.\n      src={src ?? `${MODEL_PROVIDER_LOGO_BASE_URL}/${provider}.svg`}\n      width={12}\n    />\n  );\n};\n\nexport type ModelProviderLogoGroupProps = ComponentProps<\"div\">;\n\nexport const ModelProviderLogoGroup = ({ className, ...props }: ModelProviderLogoGroupProps) => {\n  // Same active-theme signal as the single logo above (not the two shipped\n  // `light`/`dark` themes) — the backdrop swaps to `--foreground` so a\n  // transparent-background SVG still reads against a dark chip in ANY dark\n  // theme a consumer registers.\n  const isDark = useIsDarkTheme();\n  return (\n    <div\n      className={cn(\n        \"flex shrink-0 items-center -space-x-1 [&>img]:rounded-full [&>img]:p-px [&>img]:ring-1\",\n        isDark ? \"[&>img]:bg-foreground\" : \"[&>img]:bg-background\",\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;AAEA,SAAS,UAAU;AACnB,SAAS,0BAA0B;AACnC,SAAS,eAAe;AAExB,SAAS,WAAW,gBAAgB;AAoI9B,mBAEI,WAFJ;AA1HN,SAAS,iBAA0B;AACjC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,YAAU,MAAM;AACd,QAAI,OAAO,aAAa,YAAa;AACrC,UAAM,KAAK,SAAS;AACpB,UAAM,OAAO,MAAM,UAAU,mBAAmB,EAAE,CAAC;AACnD,SAAK;AACL,UAAM,MAAM,IAAI,iBAAiB,IAAI;AACrC,QAAI,QAAQ,IAAI,EAAE,YAAY,MAAM,iBAAiB,CAAC,YAAY,EAAE,CAAC;AACrE,WAAO,MAAM,IAAI,WAAW;AAAA,EAC9B,GAAG,CAAC,CAAC;AACL,SAAO;AACT;AASO,IAAM,+BAA+B;AAuFrC,IAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA8B;AAC5B,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,SAAS,eAAe;AAG9B,MAAI,QAAQ;AACV,WACE,gCACG,sBACC,oBAAC,WAAQ,cAAY,GAAG,QAAQ,SAAS,WAAW,GAAG,UAAU,SAAS,GAAG,MAAK,OAAM,GAE5F;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK,GAAG,QAAQ;AAAA,MAChB,WAAW,GAAG,UAAU,UAAU,UAAU,SAAS;AAAA,MACrD,QAAQ;AAAA,MACR,SAAS,CAAC,UAAU;AAClB,kBAAU,IAAI;AACd,kBAAU,KAAK;AAAA,MACjB;AAAA,MAGA,KAAK,OAAO,GAAG,4BAA4B,IAAI,QAAQ;AAAA,MACvD,OAAO;AAAA;AAAA,EACT;AAEJ;AAIO,IAAM,yBAAyB,CAAC,EAAE,WAAW,GAAG,MAAM,MAAmC;AAK9F,QAAM,SAAS,eAAe;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS,0BAA0B;AAAA,QACnC;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/chunk-34CQ2VHM.js

@@ -0,0 +1,172 @@
+"use client";
+
+// src/queue.tsx
+import { Button } from "@elabs-ai/components-ui";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@elabs-ai/components-ui";
+import { ScrollArea } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { ChevronDownIcon, PaperclipIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var QueueItem = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "li",
+  {
+    className: cn(
+      "group flex flex-col gap-1 rounded-md px-3 py-1 text-body transition-colors hover:bg-muted",
+      className
+    ),
+    ...props
+  }
+);
+var QueueItemIndicator = ({
+  completed = false,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn(
+      "mt-0.5 inline-block size-2.5 rounded-full border",
+      completed ? "border-muted-foreground/20 bg-muted-foreground/10" : "border-muted-foreground/50",
+      className
+    ),
+    ...props
+  }
+);
+var QueueItemContent = ({
+  completed = false,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn(
+      "line-clamp-1 grow break-words",
+      completed ? "text-muted-foreground/50 line-through" : "text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+);
+var QueueItemDescription = ({
+  completed = false,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "ms-6 text-meta",
+      completed ? "text-muted-foreground/40 line-through" : "text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+);
+var QueueItemActions = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex gap-1", className), ...props });
+var QueueItemAction = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  Button,
+  {
+    className: cn(
+      "size-auto rounded p-1 text-muted-foreground opacity-0 transition-opacity hover:bg-muted-foreground/10 hover:text-foreground group-hover:opacity-100",
+      className
+    ),
+    size: "icon",
+    type: "button",
+    variant: "ghost",
+    ...props
+  }
+);
+var QueueItemAttachment = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("mt-1 flex flex-wrap gap-2", className), ...props });
+var QueueItemImage = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "img",
+  {
+    alt: "",
+    className: cn("h-8 w-8 rounded border object-cover", className),
+    height: 32,
+    width: 32,
+    ...props
+  }
+);
+var QueueItemFile = ({ children, className, ...props }) => /* @__PURE__ */ jsxs(
+  "span",
+  {
+    className: cn("flex items-center gap-1 rounded border bg-muted px-2 py-1 text-meta", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(PaperclipIcon, { size: 12 }),
+      /* @__PURE__ */ jsx("span", { className: "max-w-[100px] truncate", children })
+    ]
+  }
+);
+var QueueList = ({ children, className, ...props }) => /* @__PURE__ */ jsx(ScrollArea, { className: cn("mt-2 -mb-1", className), ...props, children: /* @__PURE__ */ jsx("div", { className: "max-h-40 pe-4", children: /* @__PURE__ */ jsx("ul", { children }) }) });
+var QueueSection = ({ className, defaultOpen = true, ...props }) => /* @__PURE__ */ jsx(Collapsible, { className: cn(className), defaultOpen, ...props });
+var QueueSectionTrigger = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+  "button",
+  {
+    className: cn(
+      "group flex w-full items-center justify-between rounded-md bg-muted/40 px-3 py-2 text-start font-medium text-muted-foreground text-body transition-colors hover:bg-muted",
+      className
+    ),
+    type: "button",
+    ...props,
+    children
+  }
+) });
+var QueueSectionLabel = ({
+  count,
+  label,
+  icon,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs("span", { className: cn("flex items-center gap-2", className), ...props, children: [
+  /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 transition-transform group-data-[state=closed]:-rotate-90" }),
+  icon,
+  /* @__PURE__ */ jsxs("span", { children: [
+    count,
+    " ",
+    label
+  ] })
+] });
+var QueueSectionContent = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  CollapsibleContent,
+  {
+    className: cn(
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:slide-in-from-top-2 data-[state=closed]:slide-out-to-top-2 data-[state=closed]:fade-out-0 data-[state=open]:[--tw-ease:var(--ease-entrance)] data-[state=closed]:[--tw-ease:var(--ease-exit)] outline-none",
+      className
+    ),
+    ...props
+  }
+);
+var Queue = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col gap-2 rounded-xl border border-border bg-background px-3 pt-2 pb-2 shadow-xs",
+      className
+    ),
+    ...props
+  }
+);
+
+export {
+  QueueItem,
+  QueueItemIndicator,
+  QueueItemContent,
+  QueueItemDescription,
+  QueueItemActions,
+  QueueItemAction,
+  QueueItemAttachment,
+  QueueItemImage,
+  QueueItemFile,
+  QueueList,
+  QueueSection,
+  QueueSectionTrigger,
+  QueueSectionLabel,
+  QueueSectionContent,
+  Queue
+};
+//# sourceMappingURL=chunk-34CQ2VHM.js.map

package/dist/chunk-34CQ2VHM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/queue.tsx"],"sourcesContent":["\"use client\";\n\nimport { Button } from \"@elabs-ai/components-ui\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@elabs-ai/components-ui\";\nimport { ScrollArea } from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport { ChevronDownIcon, PaperclipIcon } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\n\nexport interface QueueMessagePart {\n  type: string;\n  text?: string;\n  url?: string;\n  filename?: string;\n  mediaType?: string;\n}\n\nexport interface QueueMessage {\n  id: string;\n  parts: QueueMessagePart[];\n}\n\nexport interface QueueTodo {\n  id: string;\n  title: string;\n  description?: string;\n  status?: \"pending\" | \"completed\";\n}\n\nexport type QueueItemProps = ComponentProps<\"li\">;\n\nexport const QueueItem = ({ className, ...props }: QueueItemProps) => (\n  <li\n    className={cn(\n      \"group flex flex-col gap-1 rounded-md px-3 py-1 text-body transition-colors hover:bg-muted\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport type QueueItemIndicatorProps = ComponentProps<\"span\"> & {\n  completed?: boolean;\n};\n\nexport const QueueItemIndicator = ({\n  completed = false,\n  className,\n  ...props\n}: QueueItemIndicatorProps) => (\n  <span\n    className={cn(\n      \"mt-0.5 inline-block size-2.5 rounded-full border\",\n      completed\n        ? \"border-muted-foreground/20 bg-muted-foreground/10\"\n        : \"border-muted-foreground/50\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport type QueueItemContentProps = ComponentProps<\"span\"> & {\n  completed?: boolean;\n};\n\nexport const QueueItemContent = ({\n  completed = false,\n  className,\n  ...props\n}: QueueItemContentProps) => (\n  <span\n    className={cn(\n      \"line-clamp-1 grow break-words\",\n      completed ? \"text-muted-foreground/50 line-through\" : \"text-muted-foreground\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport type QueueItemDescriptionProps = ComponentProps<\"div\"> & {\n  completed?: boolean;\n};\n\nexport const QueueItemDescription = ({\n  completed = false,\n  className,\n  ...props\n}: QueueItemDescriptionProps) => (\n  <div\n    className={cn(\n      \"ms-6 text-meta\",\n      completed ? \"text-muted-foreground/40 line-through\" : \"text-muted-foreground\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport type QueueItemActionsProps = ComponentProps<\"div\">;\n\nexport const QueueItemActions = ({ className, ...props }: QueueItemActionsProps) => (\n  <div className={cn(\"flex gap-1\", className)} {...props} />\n);\n\nexport type QueueItemActionProps = Omit<ComponentProps<typeof Button>, \"variant\" | \"size\">;\n\nexport const QueueItemAction = ({ className, ...props }: QueueItemActionProps) => (\n  <Button\n    className={cn(\n      \"size-auto rounded p-1 text-muted-foreground opacity-0 transition-opacity hover:bg-muted-foreground/10 hover:text-foreground group-hover:opacity-100\",\n      className,\n    )}\n    size=\"icon\"\n    type=\"button\"\n    variant=\"ghost\"\n    {...props}\n  />\n);\n\nexport type QueueItemAttachmentProps = ComponentProps<\"div\">;\n\nexport const QueueItemAttachment = ({ className, ...props }: QueueItemAttachmentProps) => (\n  <div className={cn(\"mt-1 flex flex-wrap gap-2\", className)} {...props} />\n);\n\nexport type QueueItemImageProps = ComponentProps<\"img\">;\n\nexport const QueueItemImage = ({ className, ...props }: QueueItemImageProps) => (\n  <img\n    alt=\"\"\n    className={cn(\"h-8 w-8 rounded border object-cover\", className)}\n    height={32}\n    width={32}\n    {...props}\n  />\n);\n\nexport type QueueItemFileProps = ComponentProps<\"span\">;\n\nexport const QueueItemFile = ({ children, className, ...props }: QueueItemFileProps) => (\n  <span\n    className={cn(\"flex items-center gap-1 rounded border bg-muted px-2 py-1 text-meta\", className)}\n    {...props}\n  >\n    <PaperclipIcon size={12} />\n    <span className=\"max-w-[100px] truncate\">{children}</span>\n  </span>\n);\n\nexport type QueueListProps = ComponentProps<typeof ScrollArea>;\n\nexport const QueueList = ({ children, className, ...props }: QueueListProps) => (\n  <ScrollArea className={cn(\"mt-2 -mb-1\", className)} {...props}>\n    <div className=\"max-h-40 pe-4\">\n      <ul>{children}</ul>\n    </div>\n  </ScrollArea>\n);\n\n// QueueSection - collapsible section container\nexport type QueueSectionProps = ComponentProps<typeof Collapsible>;\n\nexport const QueueSection = ({ className, defaultOpen = true, ...props }: QueueSectionProps) => (\n  <Collapsible className={cn(className)} defaultOpen={defaultOpen} {...props} />\n);\n\n// QueueSectionTrigger - section header/trigger\nexport type QueueSectionTriggerProps = ComponentProps<\"button\">;\n\nexport const QueueSectionTrigger = ({\n  children,\n  className,\n  ...props\n}: QueueSectionTriggerProps) => (\n  <CollapsibleTrigger asChild>\n    <button\n      className={cn(\n        \"group flex w-full items-center justify-between rounded-md bg-muted/40 px-3 py-2 text-start font-medium text-muted-foreground text-body transition-colors hover:bg-muted\",\n        className,\n      )}\n      type=\"button\"\n      {...props}\n    >\n      {children}\n    </button>\n  </CollapsibleTrigger>\n);\n\n// QueueSectionLabel - label content with icon and count\nexport type QueueSectionLabelProps = ComponentProps<\"span\"> & {\n  count?: number;\n  label: string;\n  icon?: React.ReactNode;\n};\n\nexport const QueueSectionLabel = ({\n  count,\n  label,\n  icon,\n  className,\n  ...props\n}: QueueSectionLabelProps) => (\n  <span className={cn(\"flex items-center gap-2\", className)} {...props}>\n    <ChevronDownIcon className=\"size-4 transition-transform group-data-[state=closed]:-rotate-90\" />\n    {icon}\n    <span>\n      {count} {label}\n    </span>\n  </span>\n);\n\n// QueueSectionContent - collapsible content area\nexport type QueueSectionContentProps = ComponentProps<typeof CollapsibleContent>;\n\nexport const QueueSectionContent = ({ className, ...props }: QueueSectionContentProps) => (\n  <CollapsibleContent\n    className={cn(\n      \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:slide-in-from-top-2 data-[state=closed]:slide-out-to-top-2 data-[state=closed]:fade-out-0 data-[state=open]:[--tw-ease:var(--ease-entrance)] data-[state=closed]:[--tw-ease:var(--ease-exit)] outline-none\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport type QueueProps = ComponentProps<\"div\">;\n\nexport const Queue = ({ className, ...props }: QueueProps) => (\n  <div\n    className={cn(\n      \"flex flex-col gap-2 rounded-xl border border-border bg-background px-3 pt-2 pb-2 shadow-xs\",\n      className,\n    )}\n    {...props}\n  />\n);\n"],"mappings":"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","names":[]}

package/dist/chunk-3TDHPXZZ.js

@@ -0,0 +1,60 @@
+"use client";
+
+// src/_theme-scope-store.ts
+import { useCallback, useSyncExternalStore } from "react";
+function getThemeScope(el) {
+  return el?.closest("[data-theme]") ?? (typeof document !== "undefined" ? document.documentElement : null);
+}
+var scopes = /* @__PURE__ */ new Map();
+function subscribe(scope, onStoreChange) {
+  if (!scope) return () => {
+  };
+  let entry = scopes.get(scope);
+  if (!entry) {
+    const created = {
+      listeners: /* @__PURE__ */ new Set(),
+      observer: new MutationObserver(() => {
+        created.revision += 1;
+        for (const listener of created.listeners) listener();
+      }),
+      revision: 0
+    };
+    created.observer.observe(scope, { attributeFilter: ["data-theme"], attributes: true });
+    scopes.set(scope, created);
+    entry = created;
+  }
+  entry.listeners.add(onStoreChange);
+  return () => {
+    const current = scopes.get(scope);
+    if (!current) return;
+    current.listeners.delete(onStoreChange);
+    if (current.listeners.size === 0) {
+      current.observer.disconnect();
+      scopes.delete(scope);
+    }
+  };
+}
+function getSnapshot(scope) {
+  if (!scope) return 0;
+  return scopes.get(scope)?.revision ?? 0;
+}
+var getServerSnapshot = () => 0;
+function useThemeScopeRevision(el) {
+  const scope = getThemeScope(el);
+  const subscribeToScope = useCallback(
+    (onStoreChange) => subscribe(scope, onStoreChange),
+    [scope]
+  );
+  const getScopeSnapshot = useCallback(() => getSnapshot(scope), [scope]);
+  return useSyncExternalStore(subscribeToScope, getScopeSnapshot, getServerSnapshot);
+}
+function _debugActiveThemeScopeCount() {
+  return scopes.size;
+}
+
+export {
+  getThemeScope,
+  useThemeScopeRevision,
+  _debugActiveThemeScopeCount
+};
+//# sourceMappingURL=chunk-3TDHPXZZ.js.map

package/dist/chunk-3TDHPXZZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/_theme-scope-store.ts"],"sourcesContent":["\"use client\";\n\n/**\n * Shared, ref-counted `data-theme` observation (perf review §3.3).\n *\n * `code-block.tsx`'s `CodeBlockContent` and `_streamdown-i18n.ts`'s\n * `useReactiveCodePlugin` each used to instantiate their OWN\n * `MutationObserver` to notice a `data-theme` flip and re-derive the Shiki\n * theme — one observer PER rendered `CodeBlock`/`MessageResponse`/\n * `MarkdownView` instance, all typically watching the exact same ancestor. In\n * a message-dense conversation that is dozens of redundant observers doing\n * the same job.\n *\n * This module keeps exactly ONE `MutationObserver` per distinct scope\n * element (ref-counted: the observer is created on the first subscriber and\n * disconnected when the last one unsubscribes), and exposes it through\n * `useSyncExternalStore` so React's own re-render batching applies.\n */\nimport { useCallback, useSyncExternalStore } from \"react\";\n\n/**\n * Nearest ancestor (inclusive) carrying `data-theme`, defaulting to `<html>`.\n * Lets a themed surface rendered inside a region-scoped\n * `<div data-theme=\"…\">` (a supported `ThemeProvider`/decorator pattern —\n * see @.claude/rules/theming.md) resolve THAT region's tokens instead of\n * always the document root's.\n */\nexport function getThemeScope(el: Element | null): Element | null {\n  return (\n    el?.closest(\"[data-theme]\") ??\n    (typeof document !== \"undefined\" ? document.documentElement : null)\n  );\n}\n\ninterface ScopeEntry {\n  observer: MutationObserver;\n  revision: number;\n  listeners: Set<() => void>;\n}\n\nconst scopes = new Map<Element, ScopeEntry>();\n\nfunction subscribe(scope: Element | null, onStoreChange: () => void): () => void {\n  if (!scope) return () => {};\n\n  let entry = scopes.get(scope);\n  if (!entry) {\n    // `entry` is assigned before `observer` fires, but TypeScript can't see\n    // that through the closure — the callback only ever runs after this\n    // function returns and `entry` has been set, and every existing\n    // subscriber to this scope uses the SAME entry.\n    const created: ScopeEntry = {\n      listeners: new Set(),\n      observer: new MutationObserver(() => {\n        created.revision += 1;\n        for (const listener of created.listeners) listener();\n      }),\n      revision: 0,\n    };\n    created.observer.observe(scope, { attributeFilter: [\"data-theme\"], attributes: true });\n    scopes.set(scope, created);\n    entry = created;\n  }\n\n  entry.listeners.add(onStoreChange);\n  return () => {\n    const current = scopes.get(scope);\n    if (!current) return;\n    current.listeners.delete(onStoreChange);\n    if (current.listeners.size === 0) {\n      current.observer.disconnect();\n      scopes.delete(scope);\n    }\n  };\n}\n\nfunction getSnapshot(scope: Element | null): number {\n  if (!scope) return 0;\n  return scopes.get(scope)?.revision ?? 0;\n}\n\nconst getServerSnapshot = () => 0;\n\n/**\n * Subscribes to `data-theme` mutations on `el`'s closest `[data-theme]`\n * ancestor (default `<html>`) and returns a revision number that increments\n * on each mutation. Any number of callers scoped to the SAME ancestor share\n * one `MutationObserver`.\n */\nexport function useThemeScopeRevision(el: Element | null): number {\n  const scope = getThemeScope(el);\n  const subscribeToScope = useCallback(\n    (onStoreChange: () => void) => subscribe(scope, onStoreChange),\n    [scope],\n  );\n  const getScopeSnapshot = useCallback(() => getSnapshot(scope), [scope]);\n  return useSyncExternalStore(subscribeToScope, getScopeSnapshot, getServerSnapshot);\n}\n\n/** Test-only: the number of scope elements currently under observation. */\nexport function _debugActiveThemeScopeCount(): number {\n  return scopes.size;\n}\n"],"mappings":";;;AAkBA,SAAS,aAAa,4BAA4B;AAS3C,SAAS,cAAc,IAAoC;AAChE,SACE,IAAI,QAAQ,cAAc,MACzB,OAAO,aAAa,cAAc,SAAS,kBAAkB;AAElE;AAQA,IAAM,SAAS,oBAAI,IAAyB;AAE5C,SAAS,UAAU,OAAuB,eAAuC;AAC/E,MAAI,CAAC,MAAO,QAAO,MAAM;AAAA,EAAC;AAE1B,MAAI,QAAQ,OAAO,IAAI,KAAK;AAC5B,MAAI,CAAC,OAAO;AAKV,UAAM,UAAsB;AAAA,MAC1B,WAAW,oBAAI,IAAI;AAAA,MACnB,UAAU,IAAI,iBAAiB,MAAM;AACnC,gBAAQ,YAAY;AACpB,mBAAW,YAAY,QAAQ,UAAW,UAAS;AAAA,MACrD,CAAC;AAAA,MACD,UAAU;AAAA,IACZ;AACA,YAAQ,SAAS,QAAQ,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,KAAK,CAAC;AACrF,WAAO,IAAI,OAAO,OAAO;AACzB,YAAQ;AAAA,EACV;AAEA,QAAM,UAAU,IAAI,aAAa;AACjC,SAAO,MAAM;AACX,UAAM,UAAU,OAAO,IAAI,KAAK;AAChC,QAAI,CAAC,QAAS;AACd,YAAQ,UAAU,OAAO,aAAa;AACtC,QAAI,QAAQ,UAAU,SAAS,GAAG;AAChC,cAAQ,SAAS,WAAW;AAC5B,aAAO,OAAO,KAAK;AAAA,IACrB;AAAA,EACF;AACF;AAEA,SAAS,YAAY,OAA+B;AAClD,MAAI,CAAC,MAAO,QAAO;AACnB,SAAO,OAAO,IAAI,KAAK,GAAG,YAAY;AACxC;AAEA,IAAM,oBAAoB,MAAM;AAQzB,SAAS,sBAAsB,IAA4B;AAChE,QAAM,QAAQ,cAAc,EAAE;AAC9B,QAAM,mBAAmB;AAAA,IACvB,CAAC,kBAA8B,UAAU,OAAO,aAAa;AAAA,IAC7D,CAAC,KAAK;AAAA,EACR;AACA,QAAM,mBAAmB,YAAY,MAAM,YAAY,KAAK,GAAG,CAAC,KAAK,CAAC;AACtE,SAAO,qBAAqB,kBAAkB,kBAAkB,iBAAiB;AACnF;AAGO,SAAS,8BAAsC;AACpD,SAAO,OAAO;AAChB;","names":[]}