@elabs-ai/components-ai 4.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Manuel Reimitz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,133 @@
+<!-- brand-ui:gen:readme:start -->
+<!-- Generated by scripts/gen-package-readmes.mjs — do not edit inside these markers. -->
+
+# `@elabs-ai/components-ai`
+
+> ChatShell, Conversation, Message, PromptInput, Tool, Reasoning, citations.
+
+Part of **brand-ui**, a source-owned, token-driven React component system.
+These packages are **private** and are not published to any registry — they are
+consumed from this workspace. See `docs/CONSUMING.md`.
+
+## Install
+
+Inside this monorepo the packages resolve as workspace dependencies:
+
+```json
+"@elabs-ai/components-ai": "workspace:*"
+```
+
+## Set up styling (do not skip)
+
+Components are Tailwind v4 classes backed by semantic tokens. Two lines in
+your CSS entry, or **everything renders unstyled** — the single most common
+mistake:
+
+```css
+@import "@elabs-ai/components-tokens/styles.css";
+@source "../node_modules/@elabs-ai/components-ai/dist";
+```
+
+The `@source` line is required because Tailwind ignores `node_modules`. Add
+one per brand-ui package you render. Then wrap your app once:
+
+```tsx
+import { ThemeProvider } from "@elabs-ai/components-tokens";
+
+<ThemeProvider defaultTheme="light">{children}</ThemeProvider>;
+```
+
+## This package specifically
+
+- `ai` (Vercel AI SDK) `^6` is a **types-only** peer — your app owns the model calls.
+- `@xyflow/react` is a peer too, if you render the agent canvas.
+
+## What's in it
+
+443 exported components — including `Agent`, `AgentContent`, `AgentHeader`, `AgentInstructions`, `AgentMessage`.
+
+Don't guess the API — ask the CLI:
+
+```bash
+pnpm add -D @elabs-ai/components-cli
+pnpm exec brand-ui search <query>   # find a component
+pnpm exec brand-ui docs <Name>      # its real props, from source
+```
+
+## Using an AI coding agent?
+
+For Claude Code, install the plugin from this repo's checkout:
+
+```
+/plugin marketplace add .
+/plugin install brand-ui
+```
+
+`brand-ui docs <Name>` returns intent, composition, state→token mappings and
+anti-patterns — tell your agent to run it instead of guessing a prop. The CLI
+also runs as an MCP server (`brand-ui mcp`).
+
+## Full guide
+
+Tailwind and Next.js wiring, per-package extras, agent enablement and a
+prompt for migrating an existing project: `docs/CONSUMING.md`.
+
+## License
+
+UNLICENSED — private.
+
+<!-- brand-ui:gen:readme:end -->
+
+---
+
+## Package detail
+
+Presentational AI/chat components — `ChatShell`, `Conversation`, `Message`,
+`PromptInput`/`Composer`, `Tool`, `Reasoning`, `Sources`, `Artifact`,
+`ContextPanel`, and the workspace/agent set.
+
+The components render the AI SDK `UIMessage` data model. **Your app owns the model
+calls** (`useChat`, transport, providers) — `@elabs-ai/components-ai` imports the `ai` SDK as
+**types only**, never at runtime (D6 / ADR-0008). See `docs/DECISIONS.md` §D5.
+
+Usage, props and composition patterns live in Storybook and
+`docs/component-inventory.md`. This file covers only what you need to know when
+**deploying** it.
+
+## Network egress
+
+Two components reach third-party origins at runtime, and several link out. Under a
+restrictive CSP these fail — usually silently.
+
+| What                               | Origin                                                        | Directive         | Escape hatch                                                    |
+| ---------------------------------- | ------------------------------------------------------------- | ----------------- | --------------------------------------------------------------- |
+| `ModelSelectorLogo` provider logos | `models.dev`                                                  | `img-src`         | `src` for a self-hosted asset, or `fallback`                    |
+| `Persona` Rive artwork             | `*.public.blob.vercel-storage.com`                            | `connect-src`     | self-host and pass `src`; blocked loads render a fallback orb   |
+| `OpenIn*` deep links               | chatgpt.com, claude.ai, cursor.com, scira.ai, t3.chat, v0.app | none (navigation) | don't render the component — note the prompt travels in the URL |
+
+Full detail, the exact CSP snippet, and the offline checklist:
+**[`docs/CSP-AND-NETWORK.md`](../../docs/CSP-AND-NETWORK.md)**.
+
+## Trusted Types
+
+Under `require-trusted-types-for 'script'`, two transitive markdown dependencies
+resolve to `innerHTML`/`DOMParser` builds and blank content (a message containing
+`&amp;` renders empty), and Mermaid's DOMPurify installs a pass-through policy
+named `dompurify`.
+
+A library cannot fix this for you — it is export-condition selection in **your**
+bundler. The copy-pasteable alias snippet and the CSP directives are in
+[`docs/CSP-AND-NETWORK.md`](../../docs/CSP-AND-NETWORK.md) §2, and this repo
+dogfoods them in `apps/playground` and `apps/docs`.
+
+## Bundle size
+
+Heavy engines load on demand rather than riding in your entry chunk:
+
+- **Mermaid** (plus d3 and DOMPurify) loads on the first diagram render. Call
+  `preloadMermaid()` to warm it early on a surface you know renders diagrams.
+- **The Rive WebGL2 runtime** loads only when a `Persona` mounts.
+
+Both are enforced by `pnpm heavy-deps:check`. See ADR 0019. The remaining eager
+engines (React Flow, xterm, media-chrome) are tracked in that gate's baseline
+(the React Flow canvas set is a separate, intentional surface — see ADR 0018).

package/dist/_audio-player-media-chrome-KA5DY54G.js

@@ -0,0 +1,81 @@
+"use client";
+"use client";
+
+// src/_audio-player-media-chrome.tsx
+import { Button, ButtonGroup, ButtonGroupText } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import {
+  MediaControlBar,
+  MediaController,
+  MediaDurationDisplay,
+  MediaMuteButton,
+  MediaPlayButton,
+  MediaSeekBackwardButton,
+  MediaSeekForwardButton,
+  MediaTimeDisplay,
+  MediaTimeRange,
+  MediaVolumeRange
+} from "media-chrome/react";
+import { jsx } from "react/jsx-runtime";
+var AudioPlayer = ({ children, style, ...props }) => /* @__PURE__ */ jsx(
+  MediaController,
+  {
+    audio: true,
+    style: {
+      "--media-background-color": "transparent",
+      "--media-button-icon-height": "1rem",
+      "--media-button-icon-width": "1rem",
+      "--media-control-background": "transparent",
+      "--media-control-hover-background": "var(--color-accent)",
+      "--media-control-padding": "0",
+      "--media-font": "var(--font-sans)",
+      "--media-font-size": "10px",
+      "--media-icon-color": "currentColor",
+      "--media-preview-time-background": "var(--color-background)",
+      "--media-preview-time-border-radius": "var(--radius-md)",
+      "--media-preview-time-text-shadow": "none",
+      "--media-primary-color": "var(--color-primary)",
+      "--media-range-bar-color": "var(--color-primary)",
+      "--media-range-track-background": "var(--color-secondary)",
+      "--media-secondary-color": "var(--color-secondary)",
+      "--media-text-color": "var(--color-foreground)",
+      "--media-tooltip-arrow-display": "none",
+      "--media-tooltip-background": "var(--color-background)",
+      "--media-tooltip-border-radius": "var(--radius-md)",
+      ...style
+    },
+    ...props,
+    children
+  }
+);
+var AudioPlayerControlBar = ({ children, ...props }) => /* @__PURE__ */ jsx(MediaControlBar, { ...props, children: /* @__PURE__ */ jsx(ButtonGroup, { orientation: "horizontal", children }) });
+var AudioPlayerPlayButton = ({ className, ...props }) => /* @__PURE__ */ jsx(Button, { asChild: true, size: "icon-sm", variant: "outline", children: /* @__PURE__ */ jsx(MediaPlayButton, { className: cn("bg-transparent", className), ...props }) });
+var AudioPlayerSeekBackwardButton = ({
+  seekOffset = 10,
+  ...props
+}) => /* @__PURE__ */ jsx(Button, { asChild: true, size: "icon-sm", variant: "outline", children: /* @__PURE__ */ jsx(MediaSeekBackwardButton, { seekOffset, ...props }) });
+var AudioPlayerSeekForwardButton = ({
+  seekOffset = 10,
+  ...props
+}) => /* @__PURE__ */ jsx(Button, { asChild: true, size: "icon-sm", variant: "outline", children: /* @__PURE__ */ jsx(MediaSeekForwardButton, { seekOffset, ...props }) });
+var AudioPlayerTimeDisplay = ({ className, ...props }) => /* @__PURE__ */ jsx(ButtonGroupText, { asChild: true, className: "bg-transparent", children: /* @__PURE__ */ jsx(MediaTimeDisplay, { className: cn("tabular-nums", className), ...props }) });
+var AudioPlayerTimeRange = ({ className, ...props }) => /* @__PURE__ */ jsx(ButtonGroupText, { asChild: true, className: "bg-transparent", children: /* @__PURE__ */ jsx(MediaTimeRange, { className: cn("", className), ...props }) });
+var AudioPlayerDurationDisplay = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(ButtonGroupText, { asChild: true, className: "bg-transparent", children: /* @__PURE__ */ jsx(MediaDurationDisplay, { className: cn("tabular-nums", className), ...props }) });
+var AudioPlayerMuteButton = ({ className, ...props }) => /* @__PURE__ */ jsx(ButtonGroupText, { asChild: true, className: "bg-transparent", children: /* @__PURE__ */ jsx(MediaMuteButton, { className: cn("", className), ...props }) });
+var AudioPlayerVolumeRange = ({ className, ...props }) => /* @__PURE__ */ jsx(ButtonGroupText, { asChild: true, className: "bg-transparent", children: /* @__PURE__ */ jsx(MediaVolumeRange, { className: cn("", className), ...props }) });
+export {
+  AudioPlayer,
+  AudioPlayerControlBar,
+  AudioPlayerDurationDisplay,
+  AudioPlayerMuteButton,
+  AudioPlayerPlayButton,
+  AudioPlayerSeekBackwardButton,
+  AudioPlayerSeekForwardButton,
+  AudioPlayerTimeDisplay,
+  AudioPlayerTimeRange,
+  AudioPlayerVolumeRange
+};
+//# sourceMappingURL=_audio-player-media-chrome-KA5DY54G.js.map

package/dist/_audio-player-media-chrome-KA5DY54G.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/_audio-player-media-chrome.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * The media-chrome half of `AudioPlayer`, split out so it can be `lazy()`-loaded.\n *\n * `media-chrome` declares no `sideEffects`, so a static import from\n * `audio-player.tsx` put the whole custom-element library (and the\n * `media-chrome/react` wrappers that register it) into the entry chunk of every\n * `@elabs-ai/components-ai` consumer — including the vast majority that\n * never render an `AudioPlayer`. Keeping every media-chrome *value* import in\n * this module, reached only through\n * `lazy(() => import(\"./_audio-player-media-chrome\"))`, confines it to its own\n * chunk. `audio-player.tsx` still owns the public prop types and imports the\n * media-chrome element types with `import type` (types erase).\n *\n * See ADR 0019 and `pnpm heavy-deps:check`.\n *\n * @lazy-boundary This module must only ever be reached via `import()`. The gate\n * fails if anything imports it statically, which would put media-chrome back in\n * the entry chunk and make the `lazy()` pointless.\n */\nimport { Button, ButtonGroup, ButtonGroupText } from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport {\n  MediaControlBar,\n  MediaController,\n  MediaDurationDisplay,\n  MediaMuteButton,\n  MediaPlayButton,\n  MediaSeekBackwardButton,\n  MediaSeekForwardButton,\n  MediaTimeDisplay,\n  MediaTimeRange,\n  MediaVolumeRange,\n} from \"media-chrome/react\";\nimport type { CSSProperties } from \"react\";\n\nimport type {\n  AudioPlayerControlBarProps,\n  AudioPlayerDurationDisplayProps,\n  AudioPlayerMuteButtonProps,\n  AudioPlayerPlayButtonProps,\n  AudioPlayerProps,\n  AudioPlayerSeekBackwardButtonProps,\n  AudioPlayerSeekForwardButtonProps,\n  AudioPlayerTimeDisplayProps,\n  AudioPlayerTimeRangeProps,\n  AudioPlayerVolumeRangeProps,\n} from \"./audio-player\";\n\nexport const AudioPlayer = ({ children, style, ...props }: AudioPlayerProps) => (\n  <MediaController\n    audio\n    style={\n      {\n        \"--media-background-color\": \"transparent\",\n        \"--media-button-icon-height\": \"1rem\",\n        \"--media-button-icon-width\": \"1rem\",\n        \"--media-control-background\": \"transparent\",\n        \"--media-control-hover-background\": \"var(--color-accent)\",\n        \"--media-control-padding\": \"0\",\n        \"--media-font\": \"var(--font-sans)\",\n        \"--media-font-size\": \"10px\",\n        \"--media-icon-color\": \"currentColor\",\n        \"--media-preview-time-background\": \"var(--color-background)\",\n        \"--media-preview-time-border-radius\": \"var(--radius-md)\",\n        \"--media-preview-time-text-shadow\": \"none\",\n        \"--media-primary-color\": \"var(--color-primary)\",\n        \"--media-range-bar-color\": \"var(--color-primary)\",\n        \"--media-range-track-background\": \"var(--color-secondary)\",\n        \"--media-secondary-color\": \"var(--color-secondary)\",\n        \"--media-text-color\": \"var(--color-foreground)\",\n        \"--media-tooltip-arrow-display\": \"none\",\n        \"--media-tooltip-background\": \"var(--color-background)\",\n        \"--media-tooltip-border-radius\": \"var(--radius-md)\",\n        ...style,\n      } as CSSProperties\n    }\n    {...props}\n  >\n    {children}\n  </MediaController>\n);\n\nexport const AudioPlayerControlBar = ({ children, ...props }: AudioPlayerControlBarProps) => (\n  <MediaControlBar {...props}>\n    <ButtonGroup orientation=\"horizontal\">{children}</ButtonGroup>\n  </MediaControlBar>\n);\n\nexport const AudioPlayerPlayButton = ({ className, ...props }: AudioPlayerPlayButtonProps) => (\n  <Button asChild size=\"icon-sm\" variant=\"outline\">\n    <MediaPlayButton className={cn(\"bg-transparent\", className)} {...props} />\n  </Button>\n);\n\nexport const AudioPlayerSeekBackwardButton = ({\n  seekOffset = 10,\n  ...props\n}: AudioPlayerSeekBackwardButtonProps) => (\n  <Button asChild size=\"icon-sm\" variant=\"outline\">\n    <MediaSeekBackwardButton seekOffset={seekOffset} {...props} />\n  </Button>\n);\n\nexport const AudioPlayerSeekForwardButton = ({\n  seekOffset = 10,\n  ...props\n}: AudioPlayerSeekForwardButtonProps) => (\n  <Button asChild size=\"icon-sm\" variant=\"outline\">\n    <MediaSeekForwardButton seekOffset={seekOffset} {...props} />\n  </Button>\n);\n\nexport const AudioPlayerTimeDisplay = ({ className, ...props }: AudioPlayerTimeDisplayProps) => (\n  <ButtonGroupText asChild className=\"bg-transparent\">\n    <MediaTimeDisplay className={cn(\"tabular-nums\", className)} {...props} />\n  </ButtonGroupText>\n);\n\nexport const AudioPlayerTimeRange = ({ className, ...props }: AudioPlayerTimeRangeProps) => (\n  <ButtonGroupText asChild className=\"bg-transparent\">\n    <MediaTimeRange className={cn(\"\", className)} {...props} />\n  </ButtonGroupText>\n);\n\nexport const AudioPlayerDurationDisplay = ({\n  className,\n  ...props\n}: AudioPlayerDurationDisplayProps) => (\n  <ButtonGroupText asChild className=\"bg-transparent\">\n    <MediaDurationDisplay className={cn(\"tabular-nums\", className)} {...props} />\n  </ButtonGroupText>\n);\n\nexport const AudioPlayerMuteButton = ({ className, ...props }: AudioPlayerMuteButtonProps) => (\n  <ButtonGroupText asChild className=\"bg-transparent\">\n    <MediaMuteButton className={cn(\"\", className)} {...props} />\n  </ButtonGroupText>\n);\n\nexport const AudioPlayerVolumeRange = ({ className, ...props }: AudioPlayerVolumeRangeProps) => (\n  <ButtonGroupText asChild className=\"bg-transparent\">\n    <MediaVolumeRange className={cn(\"\", className)} {...props} />\n  </ButtonGroupText>\n);\n"],"mappings":";;;;AAqBA,SAAS,QAAQ,aAAa,uBAAuB;AACrD,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAiBL;AADK,IAAM,cAAc,CAAC,EAAE,UAAU,OAAO,GAAG,MAAM,MACtD;AAAA,EAAC;AAAA;AAAA,IACC,OAAK;AAAA,IACL,OACE;AAAA,MACE,4BAA4B;AAAA,MAC5B,8BAA8B;AAAA,MAC9B,6BAA6B;AAAA,MAC7B,8BAA8B;AAAA,MAC9B,oCAAoC;AAAA,MACpC,2BAA2B;AAAA,MAC3B,gBAAgB;AAAA,MAChB,qBAAqB;AAAA,MACrB,sBAAsB;AAAA,MACtB,mCAAmC;AAAA,MACnC,sCAAsC;AAAA,MACtC,oCAAoC;AAAA,MACpC,yBAAyB;AAAA,MACzB,2BAA2B;AAAA,MAC3B,kCAAkC;AAAA,MAClC,2BAA2B;AAAA,MAC3B,sBAAsB;AAAA,MACtB,iCAAiC;AAAA,MACjC,8BAA8B;AAAA,MAC9B,iCAAiC;AAAA,MACjC,GAAG;AAAA,IACL;AAAA,IAED,GAAG;AAAA,IAEH;AAAA;AACH;AAGK,IAAM,wBAAwB,CAAC,EAAE,UAAU,GAAG,MAAM,MACzD,oBAAC,mBAAiB,GAAG,OACnB,8BAAC,eAAY,aAAY,cAAc,UAAS,GAClD;AAGK,IAAM,wBAAwB,CAAC,EAAE,WAAW,GAAG,MAAM,MAC1D,oBAAC,UAAO,SAAO,MAAC,MAAK,WAAU,SAAQ,WACrC,8BAAC,mBAAgB,WAAW,GAAG,kBAAkB,SAAS,GAAI,GAAG,OAAO,GAC1E;AAGK,IAAM,gCAAgC,CAAC;AAAA,EAC5C,aAAa;AAAA,EACb,GAAG;AACL,MACE,oBAAC,UAAO,SAAO,MAAC,MAAK,WAAU,SAAQ,WACrC,8BAAC,2BAAwB,YAAyB,GAAG,OAAO,GAC9D;AAGK,IAAM,+BAA+B,CAAC;AAAA,EAC3C,aAAa;AAAA,EACb,GAAG;AACL,MACE,oBAAC,UAAO,SAAO,MAAC,MAAK,WAAU,SAAQ,WACrC,8BAAC,0BAAuB,YAAyB,GAAG,OAAO,GAC7D;AAGK,IAAM,yBAAyB,CAAC,EAAE,WAAW,GAAG,MAAM,MAC3D,oBAAC,mBAAgB,SAAO,MAAC,WAAU,kBACjC,8BAAC,oBAAiB,WAAW,GAAG,gBAAgB,SAAS,GAAI,GAAG,OAAO,GACzE;AAGK,IAAM,uBAAuB,CAAC,EAAE,WAAW,GAAG,MAAM,MACzD,oBAAC,mBAAgB,SAAO,MAAC,WAAU,kBACjC,8BAAC,kBAAe,WAAW,GAAG,IAAI,SAAS,GAAI,GAAG,OAAO,GAC3D;AAGK,IAAM,6BAA6B,CAAC;AAAA,EACzC;AAAA,EACA,GAAG;AACL,MACE,oBAAC,mBAAgB,SAAO,MAAC,WAAU,kBACjC,8BAAC,wBAAqB,WAAW,GAAG,gBAAgB,SAAS,GAAI,GAAG,OAAO,GAC7E;AAGK,IAAM,wBAAwB,CAAC,EAAE,WAAW,GAAG,MAAM,MAC1D,oBAAC,mBAAgB,SAAO,MAAC,WAAU,kBACjC,8BAAC,mBAAgB,WAAW,GAAG,IAAI,SAAS,GAAI,GAAG,OAAO,GAC5D;AAGK,IAAM,yBAAyB,CAAC,EAAE,WAAW,GAAG,MAAM,MAC3D,oBAAC,mBAAgB,SAAO,MAAC,WAAU,kBACjC,8BAAC,oBAAiB,WAAW,GAAG,IAAI,SAAS,GAAI,GAAG,OAAO,GAC7D;","names":[]}

package/dist/_flow-boundary-D63PJ65S.js

@@ -0,0 +1,186 @@
+"use client";
+"use client";
+
+// src/_flow-boundary.tsx
+import { Card } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import {
+  Background,
+  BaseEdge,
+  Controls as ControlsPrimitive,
+  getBezierPath,
+  getSimpleBezierPath,
+  Handle,
+  NodeToolbar,
+  Panel as PanelPrimitive,
+  Position,
+  ReactFlow,
+  useInternalNode
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var deleteKeyCode = ["Backspace", "Delete"];
+var proOptions = { hideAttribution: true };
+var Canvas = ({ children, ...props }) => /* @__PURE__ */ jsxs(
+  ReactFlow,
+  {
+    deleteKeyCode,
+    fitView: true,
+    panOnDrag: false,
+    panOnScroll: true,
+    proOptions,
+    selectionOnDrag: true,
+    zoomOnDoubleClick: false,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(Background, { bgColor: "var(--sidebar)" }),
+      children
+    ]
+  }
+);
+var Controls = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  ControlsPrimitive,
+  {
+    className: cn(
+      "gap-px overflow-hidden rounded-md border bg-card p-1 shadow-none!",
+      "[&>button]:rounded-md [&>button]:border-none! [&>button]:bg-transparent! [&>button]:hover:bg-secondary!",
+      className
+    ),
+    ...props
+  }
+);
+var EdgeTemporary = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition
+}) => {
+  const [edgePath] = getSimpleBezierPath({
+    sourcePosition,
+    sourceX,
+    sourceY,
+    targetPosition,
+    targetX,
+    targetY
+  });
+  return /* @__PURE__ */ jsx(
+    BaseEdge,
+    {
+      className: "stroke-1 stroke-ring",
+      id,
+      path: edgePath,
+      style: {
+        strokeDasharray: "5, 5"
+      }
+    }
+  );
+};
+var getHandleCoordsByPosition = (node, handlePosition) => {
+  const handleType = handlePosition === Position.Left ? "target" : "source";
+  const handle = node.internals.handleBounds?.[handleType]?.find(
+    (h) => h.position === handlePosition
+  );
+  if (!handle) {
+    return [0, 0];
+  }
+  let offsetX = handle.width / 2;
+  let offsetY = handle.height / 2;
+  switch (handlePosition) {
+    case Position.Left: {
+      offsetX = 0;
+      break;
+    }
+    case Position.Right: {
+      offsetX = handle.width;
+      break;
+    }
+    case Position.Top: {
+      offsetY = 0;
+      break;
+    }
+    case Position.Bottom: {
+      offsetY = handle.height;
+      break;
+    }
+    default: {
+      throw new Error(`Invalid handle position: ${handlePosition}`);
+    }
+  }
+  const x = node.internals.positionAbsolute.x + handle.x + offsetX;
+  const y = node.internals.positionAbsolute.y + handle.y + offsetY;
+  return [x, y];
+};
+var getEdgeParams = (source, target) => {
+  const sourcePos = Position.Right;
+  const [sx, sy] = getHandleCoordsByPosition(source, sourcePos);
+  const targetPos = Position.Left;
+  const [tx, ty] = getHandleCoordsByPosition(target, targetPos);
+  return {
+    sourcePos,
+    sx,
+    sy,
+    targetPos,
+    tx,
+    ty
+  };
+};
+var EdgeAnimated = ({ id, source, target, markerEnd, style }) => {
+  const sourceNode = useInternalNode(source);
+  const targetNode = useInternalNode(target);
+  if (!(sourceNode && targetNode)) {
+    return null;
+  }
+  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);
+  const [edgePath] = getBezierPath({
+    sourcePosition: sourcePos,
+    sourceX: sx,
+    sourceY: sy,
+    targetPosition: targetPos,
+    targetX: tx,
+    targetY: ty
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(BaseEdge, { id, markerEnd, path: edgePath, style }),
+    /* @__PURE__ */ jsx("circle", { fill: "var(--primary)", r: "4", children: /* @__PURE__ */ jsx("animateMotion", { dur: "2s", path: edgePath, repeatCount: "indefinite" }) })
+  ] });
+};
+var Node = ({ handles, className, ...props }) => /* @__PURE__ */ jsxs(
+  Card,
+  {
+    className: cn("node-container relative size-full h-auto w-sm gap-0 rounded-md p-0", className),
+    ...props,
+    children: [
+      handles.target && /* @__PURE__ */ jsx(Handle, { position: Position.Left, type: "target" }),
+      handles.source && /* @__PURE__ */ jsx(Handle, { position: Position.Right, type: "source" }),
+      props.children
+    ]
+  }
+);
+var Panel = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  PanelPrimitive,
+  {
+    className: cn("m-4 overflow-hidden rounded-md border bg-card p-1", className),
+    ...props
+  }
+);
+var Toolbar = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  NodeToolbar,
+  {
+    className: cn("flex items-center gap-1 rounded-sm border bg-background p-1.5", className),
+    position: Position.Bottom,
+    ...props
+  }
+);
+export {
+  Canvas,
+  Controls,
+  EdgeAnimated,
+  EdgeTemporary,
+  Node,
+  Panel,
+  Toolbar
+};
+//# sourceMappingURL=_flow-boundary-D63PJ65S.js.map

package/dist/_flow-boundary-D63PJ65S.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/_flow-boundary.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * The React Flow half of `@elabs-ai/components-ai`'s in-chat agent\n * workspace graph — `Canvas`, `Controls`, `Edge`, `Node`, `Panel`, `Toolbar` —\n * split out so the engine can be `lazy()`-loaded.\n *\n * `@xyflow/react` declares no `sideEffects`, so the six static imports it used to\n * have (one per public module, plus `@xyflow/react/dist/style.css`) put the whole\n * engine into the entry chunk of every consumer, canvas rendered or not. **The\n * stylesheet import has to live here too**: a bare\n * `import \"@xyflow/react/dist/style.css\"` in `canvas.tsx` keeps the edge alive on\n * its own.\n *\n * This is ONE boundary for all six parts on purpose (see `_flow-lazy.ts`): six\n * boundaries would be six chunks all pulling the same engine. The public modules\n * keep their `import type { … } from \"@xyflow/react\"` lines (types erase) and\n * their prop types, and render a `lazy()` wrapper over the implementations here.\n * `connection.tsx` is type-only already and needs no boundary.\n *\n * See ADR 0019 and `pnpm heavy-deps:check`.\n *\n * @lazy-boundary This module must only ever be reached via `import()`. The gate\n * fails if anything imports it statically, which would put React Flow back in\n * the entry chunk and make the `lazy()` pointless.\n */\nimport { Card } from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport type { EdgeProps, InternalNode, Node as FlowNode } from \"@xyflow/react\";\nimport {\n  Background,\n  BaseEdge,\n  Controls as ControlsPrimitive,\n  getBezierPath,\n  getSimpleBezierPath,\n  Handle,\n  NodeToolbar,\n  Panel as PanelPrimitive,\n  Position,\n  ReactFlow,\n  useInternalNode,\n} from \"@xyflow/react\";\n\nimport \"@xyflow/react/dist/style.css\";\n\nimport type { CanvasProps } from \"./canvas\";\nimport type { ControlsProps } from \"./controls\";\nimport type { NodeProps } from \"./node\";\nimport type { PanelProps } from \"./panel\";\nimport type { ToolbarProps } from \"./toolbar\";\n\nconst deleteKeyCode = [\"Backspace\", \"Delete\"];\n\n/**\n * The React Flow attribution badge is hidden on both canvas surfaces (here and\n * `@elabs-ai/components-flow`'s `CanvasShell`). `@xyflow/react` is\n * MIT — the licence requires the notice in source copies, not a rendered badge —\n * and xyflow asks that the badge only be hidden under a React Flow Pro\n * subscription. Keeping it is therefore a product/commercial decision, and this\n * repo's is to hide it. A consumer can restore it per-canvas with\n * `proOptions={{ hideAttribution: false }}`, which still wins via `...props`.\n */\nconst proOptions = { hideAttribution: true };\n\nexport const Canvas = ({ children, ...props }: CanvasProps) => (\n  <ReactFlow\n    deleteKeyCode={deleteKeyCode}\n    fitView\n    panOnDrag={false}\n    panOnScroll\n    proOptions={proOptions}\n    selectionOnDrag={true}\n    zoomOnDoubleClick={false}\n    {...props}\n  >\n    <Background bgColor=\"var(--sidebar)\" />\n    {children}\n  </ReactFlow>\n);\n\nexport const Controls = ({ className, ...props }: ControlsProps) => (\n  <ControlsPrimitive\n    className={cn(\n      \"gap-px overflow-hidden rounded-md border bg-card p-1 shadow-none!\",\n      \"[&>button]:rounded-md [&>button]:border-none! [&>button]:bg-transparent! [&>button]:hover:bg-secondary!\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport const EdgeTemporary = ({\n  id,\n  sourceX,\n  sourceY,\n  targetX,\n  targetY,\n  sourcePosition,\n  targetPosition,\n}: EdgeProps) => {\n  const [edgePath] = getSimpleBezierPath({\n    sourcePosition,\n    sourceX,\n    sourceY,\n    targetPosition,\n    targetX,\n    targetY,\n  });\n\n  return (\n    <BaseEdge\n      className=\"stroke-1 stroke-ring\"\n      id={id}\n      path={edgePath}\n      style={{\n        strokeDasharray: \"5, 5\",\n      }}\n    />\n  );\n};\n\nconst getHandleCoordsByPosition = (node: InternalNode<FlowNode>, handlePosition: Position) => {\n  // Choose the handle type based on position - Left is for target, Right is for source\n  const handleType = handlePosition === Position.Left ? \"target\" : \"source\";\n\n  const handle = node.internals.handleBounds?.[handleType]?.find(\n    (h) => h.position === handlePosition,\n  );\n\n  if (!handle) {\n    return [0, 0] as const;\n  }\n\n  let offsetX = handle.width / 2;\n  let offsetY = handle.height / 2;\n\n  // this is a tiny detail to make the markerEnd of an edge visible.\n  // The handle position that gets calculated has the origin top-left, so depending which side we are using, we add a little offset\n  // when the handlePosition is Position.Right for example, we need to add an offset as big as the handle itself in order to get the correct position\n  switch (handlePosition) {\n    case Position.Left: {\n      offsetX = 0;\n      break;\n    }\n    case Position.Right: {\n      offsetX = handle.width;\n      break;\n    }\n    case Position.Top: {\n      offsetY = 0;\n      break;\n    }\n    case Position.Bottom: {\n      offsetY = handle.height;\n      break;\n    }\n    default: {\n      throw new Error(`Invalid handle position: ${handlePosition}`);\n    }\n  }\n\n  const x = node.internals.positionAbsolute.x + handle.x + offsetX;\n  const y = node.internals.positionAbsolute.y + handle.y + offsetY;\n\n  return [x, y] as const;\n};\n\nconst getEdgeParams = (source: InternalNode<FlowNode>, target: InternalNode<FlowNode>) => {\n  const sourcePos = Position.Right;\n  const [sx, sy] = getHandleCoordsByPosition(source, sourcePos);\n  const targetPos = Position.Left;\n  const [tx, ty] = getHandleCoordsByPosition(target, targetPos);\n\n  return {\n    sourcePos,\n    sx,\n    sy,\n    targetPos,\n    tx,\n    ty,\n  };\n};\n\nexport const EdgeAnimated = ({ id, source, target, markerEnd, style }: EdgeProps) => {\n  const sourceNode = useInternalNode(source);\n  const targetNode = useInternalNode(target);\n\n  if (!(sourceNode && targetNode)) {\n    return null;\n  }\n\n  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);\n\n  const [edgePath] = getBezierPath({\n    sourcePosition: sourcePos,\n    sourceX: sx,\n    sourceY: sy,\n    targetPosition: targetPos,\n    targetX: tx,\n    targetY: ty,\n  });\n\n  return (\n    <>\n      <BaseEdge id={id} markerEnd={markerEnd} path={edgePath} style={style} />\n      <circle fill=\"var(--primary)\" r=\"4\">\n        <animateMotion dur=\"2s\" path={edgePath} repeatCount=\"indefinite\" />\n      </circle>\n    </>\n  );\n};\n\nexport const Node = ({ handles, className, ...props }: NodeProps) => (\n  <Card\n    className={cn(\"node-container relative size-full h-auto w-sm gap-0 rounded-md p-0\", className)}\n    {...props}\n  >\n    {handles.target && <Handle position={Position.Left} type=\"target\" />}\n    {handles.source && <Handle position={Position.Right} type=\"source\" />}\n    {props.children}\n  </Card>\n);\n\nexport const Panel = ({ className, ...props }: PanelProps) => (\n  <PanelPrimitive\n    className={cn(\"m-4 overflow-hidden rounded-md border bg-card p-1\", className)}\n    {...props}\n  />\n);\n\nexport const Toolbar = ({ className, ...props }: ToolbarProps) => (\n  <NodeToolbar\n    className={cn(\"flex items-center gap-1 rounded-sm border bg-background p-1.5\", className)}\n    position={Position.Bottom}\n    {...props}\n  />\n);\n"],"mappings":"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","names":[]}

package/dist/_interactive-terminal-xterm-ATJ5EW3G.js

@@ -0,0 +1,11 @@
+"use client";
+
+// src/_interactive-terminal-xterm.ts
+import "@xterm/xterm/css/xterm.css";
+import { FitAddon } from "@xterm/addon-fit";
+import { Terminal } from "@xterm/xterm";
+export {
+  FitAddon,
+  Terminal as XTerm
+};
+//# sourceMappingURL=_interactive-terminal-xterm-ATJ5EW3G.js.map

package/dist/_interactive-terminal-xterm-ATJ5EW3G.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/_interactive-terminal-xterm.ts"],"sourcesContent":["/**\n * The xterm.js half of `InteractiveTerminal`, split out so it can be reached\n * through a dynamic `import()`.\n *\n * `@xterm/xterm` declares no `sideEffects`, so a static import from\n * `interactive-terminal.tsx` put the whole emulator — plus its stylesheet — into\n * the entry chunk of every `@elabs-ai/components-ai` consumer, including\n * the vast majority that never render a terminal. The **stylesheet import has to\n * live here too**: a bare `import \"@xterm/xterm/css/xterm.css\"` in the public\n * module keeps the edge alive on its own.\n *\n * Unlike `_persona-rive.tsx` (a `lazy()` component boundary), this one follows\n * `_lazy-mermaid.ts`: the engine is reached through a **late-called interface**.\n * `InteractiveTerminal` only ever constructs xterm inside its mount effect —\n * never during render — so the public component keeps its `forwardRef`, its\n * imperative handle and its container `<div>` unchanged, and awaits this module\n * inside that effect. No `Suspense` seam, no skeleton swap, no change to the box\n * the terminal paints into (the container is sized by the consumer either way).\n *\n * `ITheme` and the two constructor types stay `import type` in the public module\n * (types erase), which is what keeps `buildInteractiveTerminalTheme` public.\n *\n * See ADR 0019 and `pnpm heavy-deps:check`.\n *\n * @lazy-boundary This module must only ever be reached via `import()`. The gate\n * fails if anything imports it statically, which would put xterm back in the\n * entry chunk and make the dynamic import pointless.\n */\nimport \"@xterm/xterm/css/xterm.css\";\n\nexport { FitAddon } from \"@xterm/addon-fit\";\nexport { Terminal as XTerm } from \"@xterm/xterm\";\n"],"mappings":";;;AA4BA,OAAO;AAEP,SAAS,gBAAgB;AACzB,SAAqB,gBAAa;","names":[]}

package/dist/_persona-rive-RFR2EUWP.js

@@ -0,0 +1,164 @@
+"use client";
+"use client";
+
+// src/_persona-rive.tsx
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { useReducedMotion } from "@elabs-ai/components-tokens";
+import {
+  useRive,
+  useStateMachineInput,
+  useViewModel,
+  useViewModelInstance,
+  useViewModelInstanceColor
+} from "@rive-app/react-webgl2";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var useStrictModeSafeInit = () => {
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    const id = requestAnimationFrame(() => setReady(true));
+    return () => {
+      cancelAnimationFrame(id);
+      setReady(false);
+    };
+  }, []);
+  return ready;
+};
+var stateMachine = "default";
+var getCurrentTheme = () => {
+  if (typeof window !== "undefined") {
+    if (document.documentElement.classList.contains("dark")) {
+      return "dark";
+    }
+    if (window.matchMedia?.("(prefers-color-scheme: dark)").matches) {
+      return "dark";
+    }
+  }
+  return "light";
+};
+var useTheme = (enabled) => {
+  const [theme, setTheme] = useState(getCurrentTheme);
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const observer = new MutationObserver(() => {
+      setTheme(getCurrentTheme());
+    });
+    observer.observe(document.documentElement, {
+      attributeFilter: ["class"],
+      attributes: true
+    });
+    let mql = null;
+    const handleMediaChange = () => {
+      setTheme(getCurrentTheme());
+    };
+    if (window.matchMedia) {
+      mql = window.matchMedia("(prefers-color-scheme: dark)");
+      mql.addEventListener("change", handleMediaChange);
+    }
+    return () => {
+      observer.disconnect();
+      if (mql) {
+        mql.removeEventListener("change", handleMediaChange);
+      }
+    };
+  }, [enabled]);
+  return theme;
+};
+var PersonaWithModel = memo(({ rive, source, children }) => {
+  const theme = useTheme(source.dynamicColor);
+  const viewModel = useViewModel(rive, { useDefault: true });
+  const viewModelInstance = useViewModelInstance(viewModel, {
+    rive,
+    useDefault: true
+  });
+  const viewModelInstanceColor = useViewModelInstanceColor("color", viewModelInstance);
+  useEffect(() => {
+    if (!(viewModelInstanceColor && source.dynamicColor)) {
+      return;
+    }
+    const [r, g, b] = theme === "dark" ? [255, 255, 255] : [0, 0, 0];
+    viewModelInstanceColor.setRgb(r, g, b);
+  }, [viewModelInstanceColor, theme, source.dynamicColor]);
+  return children;
+});
+PersonaWithModel.displayName = "PersonaWithModel";
+var PersonaWithoutModel = memo(({ children }) => children);
+PersonaWithoutModel.displayName = "PersonaWithoutModel";
+var PersonaRive = ({
+  className,
+  onLoad,
+  onLoadError,
+  onPause,
+  onPlay,
+  onReady,
+  onStop,
+  source,
+  src,
+  state
+}) => {
+  const callbacksRef = useRef({ onLoad, onLoadError, onPause, onPlay, onReady, onStop });
+  useEffect(() => {
+    callbacksRef.current = { onLoad, onLoadError, onPause, onPlay, onReady, onStop };
+  }, [onLoad, onLoadError, onPause, onPlay, onReady, onStop]);
+  const stableCallbacks = useMemo(
+    () => ({
+      onLoad: ((loadedRive) => callbacksRef.current.onLoad?.(loadedRive)),
+      onLoadError: ((err) => callbacksRef.current.onLoadError?.(err)),
+      onPause: ((event) => callbacksRef.current.onPause?.(event)),
+      onPlay: ((event) => callbacksRef.current.onPlay?.(event)),
+      onReady: () => callbacksRef.current.onReady?.(),
+      onStop: ((event) => callbacksRef.current.onStop?.(event))
+    }),
+    []
+  );
+  const ready = useStrictModeSafeInit();
+  const prefersReducedMotion = useReducedMotion();
+  const { rive, RiveComponent } = useRive(
+    ready ? {
+      autoplay: !prefersReducedMotion,
+      onLoad: stableCallbacks.onLoad,
+      onLoadError: stableCallbacks.onLoadError,
+      onPause: stableCallbacks.onPause,
+      onPlay: stableCallbacks.onPlay,
+      onRiveReady: stableCallbacks.onReady,
+      onStop: stableCallbacks.onStop,
+      src,
+      stateMachines: stateMachine
+    } : null
+  );
+  useEffect(() => {
+    if (!rive) return;
+    if (prefersReducedMotion) {
+      rive.pause();
+    } else {
+      rive.play();
+    }
+  }, [rive, prefersReducedMotion]);
+  const listeningInput = useStateMachineInput(rive, stateMachine, "listening");
+  const thinkingInput = useStateMachineInput(rive, stateMachine, "thinking");
+  const speakingInput = useStateMachineInput(rive, stateMachine, "speaking");
+  const asleepInput = useStateMachineInput(rive, stateMachine, "asleep");
+  useEffect(() => {
+    if (listeningInput) {
+      listeningInput.value = state === "listening";
+    }
+    if (thinkingInput) {
+      thinkingInput.value = state === "thinking";
+    }
+    if (speakingInput) {
+      speakingInput.value = state === "speaking";
+    }
+    if (asleepInput) {
+      asleepInput.value = state === "asleep";
+    }
+  }, [state, listeningInput, thinkingInput, speakingInput, asleepInput]);
+  const Wrapper = source.hasModel ? PersonaWithModel : PersonaWithoutModel;
+  return /* @__PURE__ */ jsx(Wrapper, { rive, source, children: /* @__PURE__ */ jsx(RiveComponent, { className: cn("size-16 shrink-0", className) }) });
+};
+var persona_rive_default = PersonaRive;
+export {
+  persona_rive_default as default
+};
+//# sourceMappingURL=_persona-rive-RFR2EUWP.js.map