@elabs-ai/components-ai 4.2.0 → 5.0.0

package/src/templates-ai-assistant.stories.tsx

@@ -1,6 +1,7 @@
 /**
- * AI assistant template — the canonical full-screen AI assistant composition
- * (app-shell + chat shell: Conversation + PromptInput). This story is the
+ * AI assistant template — the canonical full-screen AI assistant composition:
+ * app-shell nav, an immersive `ChatShell` (transcript scrolls behind a floating
+ * `Composer`, one centred reading column) and the `ContextPanel` right rail. This story is the
  * single source of truth: `pnpm gen:templates` derives the consumer template
  * source (`docs/playbooks/templates/ai-assistant.tsx`) from it.
  * Verify across both themes with globals=theme:<slug>.
@@ -10,8 +11,10 @@ import { useState } from "react";
 import { AppIcon } from "@elabs-ai/components-icons";
 import {
   Button,
+  NavUser,
   Sidebar,
   SidebarContent,
+  SidebarFooter,
   SidebarGroup,
   SidebarGroupContent,
   SidebarHeader,
@@ -23,7 +26,16 @@ import {
   SidebarTrigger,
 } from "@elabs-ai/components-ui";
 import {
+  AssetPreview,
+  ChatShell,
   Composer,
+  ContextPanel,
+  ContextPanelBody,
+  ContextPanelDetail,
+  ContextPanelHeader,
+  ContextPanelProvider,
+  ContextPanelSection,
+  ContextPanelTrigger,
   Conversation,
   ConversationContent,
   ConversationEmptyState,
@@ -31,6 +43,9 @@ import {
   Message,
   MessageContent,
   MessageResponse,
+  ProducedAssetTree,
+  useContextPanel,
+  type ContextAsset,
 } from "./index";
 import { Bot, History, Home, MessageSquare, Settings } from "lucide-react";
 
@@ -47,10 +62,36 @@ const nav = [
   { id: "settings", label: "Settings", icon: Settings },
 ];
 
+/** Right rail root — what the assistant produced; selecting one drills in. */
+function ContextRailRoot({ assets }: { assets: ContextAsset[] }) {
+  const { state, actions } = useContextPanel();
+  return (
+    <ContextPanelSection label="Produced assets">
+      <ProducedAssetTree
+        assets={assets}
+        selectedId={state.selectedAsset?.id}
+        onSelect={actions.openDetail}
+      />
+    </ContextPanelSection>
+  );
+}
+
+/** Right rail detail — the focused asset, with Back in the panel header. */
+function ContextRailDetail() {
+  const { state } = useContextPanel();
+  return (
+    <ContextPanelDetail>
+      {state.selectedAsset ? <AssetPreview asset={state.selectedAsset} /> : null}
+    </ContextPanelDetail>
+  );
+}
+
 function AiAssistantTemplate() {
   const [active, setActive] = useState("chat");
   const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [status, setStatus] = useState<"ready" | "submitted">("ready");
+  // Files the assistant produced — wire to your runtime's tool outputs.
+  const [assets] = useState<ContextAsset[]>([]);
 
   function send(text: string) {
     setMessages((m) => [...m, { id: crypto.randomUUID(), role: "user", text }]);
@@ -61,98 +102,121 @@ function AiAssistantTemplate() {
   }
 
   return (
-    <SidebarProvider>
-      <Sidebar collapsible="icon">
-        <SidebarHeader className="px-3 py-2">
-          <div className="flex items-center gap-2">
-            <AppIcon height={20} aria-hidden />
-            <span className="truncate font-semibold group-data-[collapsible=icon]:hidden">
-              Assistant
-            </span>
-          </div>
-        </SidebarHeader>
-        <SidebarContent>
-          <SidebarGroup>
-            <SidebarGroupContent>
-              <SidebarMenu>
-                {nav.map((n) => (
-                  <SidebarMenuItem key={n.id}>
-                    <SidebarMenuButton
-                      isActive={active === n.id}
-                      tooltip={n.label}
-                      onClick={() => setActive(n.id)}
-                    >
-                      <n.icon aria-hidden="true" />
-                      <span>{n.label}</span>
-                    </SidebarMenuButton>
-                  </SidebarMenuItem>
-                ))}
-              </SidebarMenu>
-            </SidebarGroupContent>
-          </SidebarGroup>
-        </SidebarContent>
-      </Sidebar>
-      <SidebarInset className="flex flex-col overflow-hidden">
-        <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4">
-          <SidebarTrigger />
-          <h1 className="text-body font-medium">AI Assistant</h1>
-        </header>
-        <div className="flex flex-1 flex-col overflow-hidden">
-          <Conversation className="flex-1">
-            <ConversationContent>
-              {messages.length === 0 ? (
-                <ConversationEmptyState
-                  icon={<MessageSquare className="size-8" aria-hidden="true" />}
-                  title="Start the conversation"
-                  description="Ask anything to begin."
-                  actions={
-                    <>
-                      <Button
-                        onClick={() => send("What can you help me with?")}
-                        size="sm"
-                        variant="outline"
+    // The provider wraps the whole shell so the header trigger and the right
+    // rail share one open/closed state.
+    <ContextPanelProvider>
+      <SidebarProvider className="h-svh min-h-0">
+        <Sidebar collapsible="icon">
+          <SidebarHeader className="px-3 py-2">
+            <div className="flex items-center gap-2">
+              <AppIcon height={20} aria-hidden />
+              <span className="truncate font-semibold group-data-[collapsible=icon]:hidden">
+                Assistant
+              </span>
+            </div>
+          </SidebarHeader>
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {nav.map((n) => (
+                    <SidebarMenuItem key={n.id}>
+                      <SidebarMenuButton
+                        isActive={active === n.id}
+                        tooltip={n.label}
+                        onClick={() => setActive(n.id)}
                       >
-                        What can you help me with?
-                      </Button>
-                      <Button
-                        onClick={() => send("Summarize my recent activity")}
-                        size="sm"
-                        variant="outline"
-                      >
-                        Summarize my recent activity
-                      </Button>
-                    </>
-                  }
+                        <n.icon aria-hidden="true" />
+                        <span>{n.label}</span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+          <SidebarFooter>
+            <NavUser user={{ name: "Avery Rao", email: "avery@example.com" }} />
+          </SidebarFooter>
+        </Sidebar>
+        <SidebarInset className="flex min-w-0 flex-col overflow-hidden">
+          <header className="flex h-header shrink-0 items-center gap-2 border-b px-4">
+            <SidebarTrigger />
+            <h1 className="text-body font-medium">AI Assistant</h1>
+            <ContextPanelTrigger className="ms-auto" />
+          </header>
+          {/* `bare`: the transcript scrolls behind the floating composer and
+              both share one centred reading column. */}
+          <div className="min-h-0 flex-1">
+            <ChatShell
+              variant="bare"
+              composer={
+                <Composer
+                  placeholder="Send a message…"
+                  status={status === "submitted" ? "Generating…" : "Awaiting your input"}
+                  sendStatus={status}
+                  onSubmit={(message) => {
+                    const text = message.text?.trim();
+                    if (text) send(text);
+                  }}
                 />
-              ) : (
-                messages.map((m) => (
-                  <Message from={m.role} key={m.id}>
-                    <MessageContent>
-                      <MessageResponse>{m.text}</MessageResponse>
-                    </MessageContent>
-                  </Message>
-                ))
-              )}
-            </ConversationContent>
-            <ConversationScrollButton />
-          </Conversation>
-          <Composer
-            placeholder="Send a message…"
-            status={status === "submitted" ? "Generating…" : "Awaiting your input"}
-            sendStatus={status}
-            onSubmit={(message) => {
-              const text = message.text?.trim();
-              if (text) send(text);
-            }}
+              }
+            >
+              <Conversation className="flex-1">
+                <ConversationContent>
+                  {messages.length === 0 ? (
+                    <ConversationEmptyState
+                      icon={<MessageSquare className="size-8" aria-hidden="true" />}
+                      title="Start the conversation"
+                      description="Ask anything to begin."
+                      actions={
+                        <>
+                          <Button
+                            onClick={() => send("What can you help me with?")}
+                            size="sm"
+                            variant="outline"
+                          >
+                            What can you help me with?
+                          </Button>
+                          <Button
+                            onClick={() => send("Summarize my recent activity")}
+                            size="sm"
+                            variant="outline"
+                          >
+                            Summarize my recent activity
+                          </Button>
+                        </>
+                      }
+                    />
+                  ) : (
+                    messages.map((m) => (
+                      <Message from={m.role} key={m.id}>
+                        <MessageContent>
+                          <MessageResponse>{m.text}</MessageResponse>
+                        </MessageContent>
+                      </Message>
+                    ))
+                  )}
+                </ConversationContent>
+                <ConversationScrollButton />
+              </Conversation>
+            </ChatShell>
+          </div>
+        </SidebarInset>
+        <ContextPanel>
+          <ContextPanelHeader title="Context" />
+          <ContextPanelBody
+            root={<ContextRailRoot assets={assets} />}
+            detail={<ContextRailDetail />}
           />
-        </div>
-      </SidebarInset>
-    </SidebarProvider>
+        </ContextPanel>
+      </SidebarProvider>
+    </ContextPanelProvider>
   );
 }
 
 const meta = {
-  title: "Patterns/Templates/AI Assistant",
+  title: "Patterns/Templates/Starters/AI Assistant",
   parameters: { layout: "fullscreen" },
   tags: ["autodocs"],
 } satisfies Meta;

package/src/tool.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent } from "storybook/test";
 import {
   Tool,
   ToolContent,
@@ -68,3 +69,41 @@ export const Streaming: Story = {
     );
   },
 };
+
+/**
+ * Focus indicator on ToolDetails trigger (#313): Tab to the disclosure
+ * trigger and assert the compound indicator's OUTLINE layer. The prior
+ * version read `buttons[0]` — but `ToolHeader` (rendered before `ToolDetails`
+ * in the DOM) is ALSO a `CollapsibleTrigger` (`tool.tsx:98`, the outer
+ * `Tool` row's own disclosure) with no focus styling of its own, so it is
+ * `buttons[0]` and receives the first Tab, not the `ToolDetails` trigger
+ * this issue is about (`tool.tsx:152`). Query the actual trigger by its
+ * accessible name (`t("ai.tool.showTechnicalDetails")`) instead of by index.
+ */
+export const FocusIndicator: Story = {
+  render: () => (
+    // defaultOpen on the OUTER Tool — its ToolContent (and so ToolDetails'
+    // trigger) is hidden/unmounted when the outer Collapsible starts closed,
+    // as it does without this prop (see Default story). Without it the
+    // ToolDetails trigger this test targets isn't in the accessibility tree
+    // at all, and `getByRole` throws before ever reaching the focus check.
+    <Tool defaultOpen className="max-w-prose">
+      <ToolHeader type="tool-fetch" state="output-available" summary="Fetched data" />
+      <ToolContent>
+        <ToolDetails>
+          <ToolInput input={{ url: "https://example.com" }} />
+          <ToolOutput output={{ status: "ok" }} />
+        </ToolDetails>
+      </ToolContent>
+    </Tool>
+  ),
+  play: async ({ canvas }) => {
+    const trigger = canvas.getByRole("button", { name: /show technical details/i });
+    trigger.focus();
+    await expect(trigger).toHaveFocus();
+    const focused = getComputedStyle(trigger);
+    await expect(focused.boxShadow).not.toBe("none");
+    await expect(focused.outlineStyle).toBe("solid");
+    await expect(parseFloat(focused.outlineWidth)).toBeGreaterThan(0);
+  },
+};

package/src/tool.tsx

@@ -149,7 +149,7 @@ export const ToolDetails = ({
       defaultOpen={defaultOpen}
       {...props}
     >
-      <CollapsibleTrigger className="flex items-center gap-1 rounded-sm text-meta text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+      <CollapsibleTrigger className="flex items-center gap-1 rounded-sm text-meta text-muted-foreground transition-colors hover:text-foreground focus-ring">
         <ChevronDownIcon className="size-3.5 transition-transform group-data-[state=open]/tool-details:rotate-180" />
         {label ?? t("ai.tool.showTechnicalDetails")}
       </CollapsibleTrigger>
@@ -166,7 +166,7 @@ export const ToolInput = ({ className, input, ...props }: ToolInputProps) => {
   const { t } = useLocale();
   return (
     <div className={cn("space-y-2 overflow-hidden", className)} {...props}>
-      <h4 className="text-meta uppercase text-muted-foreground">
+      <h4 className="text-eyebrow uppercase text-muted-foreground">
         {t("ai.schemaDisplay.parameters")}
       </h4>
       <div className="rounded-md bg-muted/50">
@@ -250,7 +250,7 @@ export const ToolOutput = ({
 
   return (
     <div className={cn("space-y-2", className)} {...props}>
-      <h4 className="text-meta uppercase text-muted-foreground">
+      <h4 className="text-eyebrow uppercase text-muted-foreground">
         {showError ? t("ai.tool.error") : t("ai.tool.result")}
       </h4>
       {pending ? (

package/src/toolbar.tsx

@@ -32,13 +32,3 @@ export const NodeToolbar = (props: NodeToolbarProps) => (
     <NodeToolbarImpl data-slot="node-toolbar" {...props} />
   </Suspense>
 );
-
-/**
- * @deprecated Renamed to {@link NodeToolbar}. `Toolbar` is now the WAI-ARIA
- * toolbar in `@elabs-ai/components-ui`. This alias will be removed in
- * the next major.
- */
-export const Toolbar = NodeToolbar;
-
-/** @deprecated Renamed to {@link NodeToolbarProps}. */
-export type ToolbarProps = NodeToolbarProps;

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

@@ -1 +0,0 @@
-{"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\n/**\n * The point on `node` where an edge of `handleType` should attach, plus the side\n * it leaves from.\n *\n * Read from React Flow's **measured** `handleBounds` — the DOM box of the\n * painted dot — and taken at the box's OUTER edge, which is React Flow's own\n * convention (the anchor lands on the dot's rim, which keeps a `markerEnd`\n * visible).\n *\n * The two fallbacks matter as much as the happy path. `preferred` is only a\n * preference: `nodeTypes` is an open prop, so a consumer node may legitimately\n * put its handles on the top and bottom, and the shipped `Node`'s left/right\n * pair is a convenience rather than a constraint. And `handleBounds` is empty\n * until React Flow's first measurement pass, which on this canvas is a real\n * window because the engine arrives in a lazy chunk (ADR 0019). Both used to\n * resolve to `[0, 0]` — the CANVAS ORIGIN — so the edge was drawn hundreds of\n * pixels from either node (measured at 498.8px in the `VerticalHandles` story).\n * Falling back to any handle of the right type, and then to the node's own\n * border, keeps the line on the node in every case.\n */\nconst getHandleAnchor = (\n  node: InternalNode<FlowNode>,\n  handleType: \"source\" | \"target\",\n  preferred: Position,\n) => {\n  const bounds = node.internals.handleBounds?.[handleType] ?? [];\n  const handle = bounds.find((h) => h.position === preferred) ?? bounds[0];\n  const origin = node.internals.positionAbsolute;\n\n  if (handle) {\n    // Offset to the handle box's outer edge on its own side; the other axis is\n    // centred.\n    const offsetX =\n      handle.position === Position.Left\n        ? 0\n        : handle.position === Position.Right\n          ? handle.width\n          : handle.width / 2;\n    const offsetY =\n      handle.position === Position.Top\n        ? 0\n        : handle.position === Position.Bottom\n          ? handle.height\n          : handle.height / 2;\n\n    return {\n      position: handle.position,\n      x: origin.x + handle.x + offsetX,\n      y: origin.y + handle.y + offsetY,\n    };\n  }\n\n  // No measured handle at all — anchor on the node's own border midpoint.\n  const width = node.measured.width ?? 0;\n  const height = node.measured.height ?? 0;\n  switch (preferred) {\n    case Position.Left:\n      return { position: preferred, x: origin.x, y: origin.y + height / 2 };\n    case Position.Right:\n      return { position: preferred, x: origin.x + width, y: origin.y + height / 2 };\n    case Position.Top:\n      return { position: preferred, x: origin.x + width / 2, y: origin.y };\n    default:\n      return { position: preferred, x: origin.x + width / 2, y: origin.y + height };\n  }\n};\n\nconst getEdgeParams = (source: InternalNode<FlowNode>, target: InternalNode<FlowNode>) => {\n  const from = getHandleAnchor(source, \"source\", Position.Right);\n  const to = getHandleAnchor(target, \"target\", Position.Left);\n\n  return {\n    sourcePos: from.position,\n    sx: from.x,\n    sy: from.y,\n    targetPos: to.position,\n    tx: to.x,\n    ty: to.y,\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/_persona-rive-JEG44YHX.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/_persona-rive.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * The Rive half of `Persona`, split out so it can be `lazy()`-loaded.\n *\n * `@rive-app/react-webgl2` declares no `sideEffects`, so a static import from\n * `persona.tsx` put the whole WebGL2 runtime (and its `rive.wasm`) into the entry\n * chunk of every `@elabs-ai/components-ai` consumer — including the vast majority that never\n * render a `Persona`. Keeping every Rive *value* import in this module, reached\n * only through `lazy(() => import(\"./_persona-rive\"))`, confines it to its own\n * chunk. `persona.tsx` may still `import type` from Rive (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 Rive back in the\n * entry chunk and make the `lazy()` pointless.\n */\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport { useReducedMotion } from \"@elabs-ai/components-tokens\";\nimport type { RiveParameters } from \"@rive-app/react-webgl2\";\n// `import type` from an optional peer is safe HERE ONLY because this module is\n// reached exclusively through `lazy(() => import(\"./_persona-rive\"))` — it is\n// never statically imported, so nothing in this file reaches the barrel's\n// `.d.ts` declaration graph. `persona.tsx`'s PUBLIC types must never do this\n// (issue #101) — see its module doc comment and `PersonaRiveEvent`/\n// `PersonaRiveEventCallback`, which this module imports below and proves\n// conformant against the real peer type at the bottom of this file.\n// A NAMED import (`import { useRive } from \"@rive-app/react-webgl2\"`) is a\n// static ESM binding a bundler must resolve at build time. Now that\n// `@rive-app/react-webgl2` is a genuinely optional peer (issue #33), a\n// consumer who has not installed it hits that resolution at the worst\n// possible time: Vite's own optional-peer-dependency handling swaps in a\n// build-time stub with no exports, and Rollup's static named-export check\n// then fails the WHOLE APP BUILD — not a runtime error `LazyEngineBoundary`\n// could ever see (confirmed against `fixtures/consumer-smoke`'s real Vite\n// build). A namespace import defers every one of these to a plain property\n// lookup, which Rollup does not statically validate, so the build always\n// succeeds; a genuinely missing peer instead resolves the destructured hooks\n// below to `undefined`, and the guard turns that into the render-phase throw\n// `LazyEngineBoundary` (see `persona.tsx`) already catches.\nimport * as RiveModule from \"@rive-app/react-webgl2\";\nimport type { ReactNode } from \"react\";\nimport { memo, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport type { AssertAssignable } from \"./_lazy-boundary-conformance\";\nimport type { PersonaRiveEventCallback } from \"./persona\";\nimport type { PersonaSource, PersonaState } from \"./persona-sources\";\n\nconst {\n  useRive,\n  useStateMachineInput,\n  useViewModel,\n  useViewModelInstance,\n  useViewModelInstanceColor,\n} = RiveModule;\n\nif (!useRive) {\n  throw new Error(\"Cannot find module '@rive-app/react-webgl2'\");\n}\n\n// Delays Rive initialization by one frame so that React Strict Mode's\n// immediate unmount cycle never creates a WebGL2 context. Only the\n// second (real) mount will initialise, avoiding context exhaustion.\nconst useStrictModeSafeInit = () => {\n  const [ready, setReady] = useState(false);\n\n  useEffect(() => {\n    const id = requestAnimationFrame(() => setReady(true));\n    return () => {\n      cancelAnimationFrame(id);\n      setReady(false);\n    };\n  }, []);\n\n  return ready;\n};\n\n// The state machine name is always 'default' for Elements AI visuals\nconst stateMachine = \"default\";\n\nconst getCurrentTheme = (): \"light\" | \"dark\" => {\n  if (typeof window !== \"undefined\") {\n    if (document.documentElement.classList.contains(\"dark\")) {\n      return \"dark\";\n    }\n    if (window.matchMedia?.(\"(prefers-color-scheme: dark)\").matches) {\n      return \"dark\";\n    }\n  }\n  return \"light\";\n};\n\nconst useTheme = (enabled: boolean) => {\n  const [theme, setTheme] = useState<\"light\" | \"dark\">(getCurrentTheme);\n\n  useEffect(() => {\n    // Skip if not enabled (avoids unnecessary observers for non-dynamic-color variants)\n    if (!enabled) {\n      return;\n    }\n\n    // Watch for classList changes\n    const observer = new MutationObserver(() => {\n      setTheme(getCurrentTheme());\n    });\n\n    observer.observe(document.documentElement, {\n      attributeFilter: [\"class\"],\n      attributes: true,\n    });\n\n    // Watch for OS-level theme changes\n    let mql: MediaQueryList | null = null;\n    const handleMediaChange = () => {\n      setTheme(getCurrentTheme());\n    };\n\n    if (window.matchMedia) {\n      mql = window.matchMedia(\"(prefers-color-scheme: dark)\");\n      mql.addEventListener(\"change\", handleMediaChange);\n    }\n\n    return () => {\n      observer.disconnect();\n      if (mql) {\n        mql.removeEventListener(\"change\", handleMediaChange);\n      }\n    };\n  }, [enabled]);\n\n  return theme;\n};\n\ninterface PersonaWithModelProps {\n  rive: ReturnType<typeof useRive>[\"rive\"];\n  source: PersonaSource;\n  children: ReactNode;\n}\n\nconst PersonaWithModel = memo(({ rive, source, children }: PersonaWithModelProps) => {\n  const theme = useTheme(source.dynamicColor);\n  const viewModel = useViewModel(rive, { useDefault: true });\n  const viewModelInstance = useViewModelInstance(viewModel, {\n    rive,\n    useDefault: true,\n  });\n  const viewModelInstanceColor = useViewModelInstanceColor(\"color\", viewModelInstance);\n\n  useEffect(() => {\n    if (!(viewModelInstanceColor && source.dynamicColor)) {\n      return;\n    }\n\n    const [r, g, b] = theme === \"dark\" ? [255, 255, 255] : [0, 0, 0];\n    viewModelInstanceColor.setRgb(r, g, b);\n  }, [viewModelInstanceColor, theme, source.dynamicColor]);\n\n  return children;\n});\n\nPersonaWithModel.displayName = \"PersonaWithModel\";\n\nconst PersonaWithoutModel = memo(({ children }: { children: ReactNode }) => children);\n\nPersonaWithoutModel.displayName = \"PersonaWithoutModel\";\n\nexport interface PersonaRiveProps {\n  className?: string;\n  onLoad?: PersonaRiveEventCallback;\n  onLoadError?: PersonaRiveEventCallback;\n  onPause?: PersonaRiveEventCallback;\n  onPlay?: PersonaRiveEventCallback;\n  onReady?: () => void;\n  onStop?: PersonaRiveEventCallback;\n  source: PersonaSource;\n  /** Resolved `.riv` URL — `Persona`'s `src` override, or the variant default. */\n  src: string;\n  state: PersonaState;\n}\n\nconst PersonaRive = ({\n  className,\n  onLoad,\n  onLoadError,\n  onPause,\n  onPlay,\n  onReady,\n  onStop,\n  source,\n  src,\n  state,\n}: PersonaRiveProps) => {\n  // Stabilize callbacks to prevent useRive from reinitializing\n  const callbacksRef = useRef({ onLoad, onLoadError, onPause, onPlay, onReady, onStop });\n\n  useEffect(() => {\n    callbacksRef.current = { onLoad, onLoadError, onPause, onPlay, onReady, onStop };\n  }, [onLoad, onLoadError, onPause, onPlay, onReady, onStop]);\n\n  const stableCallbacks = useMemo(\n    () => ({\n      onLoad: ((loadedRive) =>\n        callbacksRef.current.onLoad?.(loadedRive)) as RiveParameters[\"onLoad\"],\n      onLoadError: ((err) =>\n        callbacksRef.current.onLoadError?.(err)) as RiveParameters[\"onLoadError\"],\n      onPause: ((event) => callbacksRef.current.onPause?.(event)) as RiveParameters[\"onPause\"],\n      onPlay: ((event) => callbacksRef.current.onPlay?.(event)) as RiveParameters[\"onPlay\"],\n      onReady: () => callbacksRef.current.onReady?.(),\n      onStop: ((event) => callbacksRef.current.onStop?.(event)) as RiveParameters[\"onStop\"],\n    }),\n    [],\n  );\n\n  // Delay initialisation by one frame to avoid creating (and leaking)\n  // a WebGL2 context during React Strict Mode's first throw-away mount.\n  const ready = useStrictModeSafeInit();\n  const prefersReducedMotion = useReducedMotion();\n\n  const { rive, RiveComponent } = useRive(\n    ready\n      ? {\n          autoplay: !prefersReducedMotion,\n          onLoad: stableCallbacks.onLoad,\n          onLoadError: stableCallbacks.onLoadError,\n          onPause: stableCallbacks.onPause,\n          onPlay: stableCallbacks.onPlay,\n          onRiveReady: stableCallbacks.onReady,\n          onStop: stableCallbacks.onStop,\n          src,\n          stateMachines: stateMachine,\n        }\n      : null,\n  );\n\n  // `autoplay` only governs the INITIAL mount — honor a mid-session\n  // reduced-motion preference change by pausing/resuming the running\n  // instance. The state-machine inputs below keep updating either way, so\n  // the artwork still shows the correct resting pose while paused.\n  useEffect(() => {\n    if (!rive) return;\n    if (prefersReducedMotion) {\n      rive.pause();\n    } else {\n      rive.play();\n    }\n  }, [rive, prefersReducedMotion]);\n\n  const listeningInput = useStateMachineInput(rive, stateMachine, \"listening\");\n  const thinkingInput = useStateMachineInput(rive, stateMachine, \"thinking\");\n  const speakingInput = useStateMachineInput(rive, stateMachine, \"speaking\");\n  const asleepInput = useStateMachineInput(rive, stateMachine, \"asleep\");\n\n  // Rive state machine inputs are mutable objects that must be set via direct\n  // property assignment — this is the intended Rive API, not a React anti-pattern.\n  useEffect(() => {\n    if (listeningInput) {\n      listeningInput.value = state === \"listening\";\n    }\n    if (thinkingInput) {\n      thinkingInput.value = state === \"thinking\";\n    }\n    if (speakingInput) {\n      speakingInput.value = state === \"speaking\";\n    }\n    if (asleepInput) {\n      asleepInput.value = state === \"asleep\";\n    }\n  }, [state, listeningInput, thinkingInput, speakingInput, asleepInput]);\n\n  const Wrapper = source.hasModel ? PersonaWithModel : PersonaWithoutModel;\n\n  return (\n    <Wrapper rive={rive} source={source}>\n      <RiveComponent className={cn(\"size-16 shrink-0\", className)} />\n    </Wrapper>\n  );\n};\n\nexport default PersonaRive;\n\n/**\n * Conformance assertion (issue #101): compile-time proof that the owned\n * `PersonaRiveEventCallback` (declared in `persona.tsx`, structurally free of\n * `@rive-app/react-webgl2`/`@rive-app/webgl2`) is still assignable to the REAL\n * `RiveParameters[\"onLoad\"]` — and, since `onLoad`/`onLoadError`/`onPause`/\n * `onPlay`/`onStop` all share Rive's one `EventCallback` type, this single\n * check covers all five. `AssertAssignable`'s type parameter is constrained\n * (`TOwned extends TReal`), so if a future Rive release changes `Event`'s\n * shape in a way `PersonaRiveEvent` no longer satisfies, this line fails to\n * typecheck — caught by `pnpm --filter @elabs-ai/components-ai typecheck`\n * locally, never shipped as a silent mismatch to a consumer.\n *\n * `AssertAssignable` itself is shared with `_audio-player-media-chrome.tsx`\n * via `_lazy-boundary-conformance.ts` — see that module's doc comment for\n * what this check can and cannot prove (it is one-directional: it cannot\n * catch the owned type being NARROWER than the real one, which is exactly\n * what `PersonaRiveEvent[\"data\"]` is — see the CHANGELOG's \"Breaking (types)\"\n * entry).\n */\nexport type _PersonaRiveEventCallbackConformance = AssertAssignable<\n  PersonaRiveEventCallback,\n  NonNullable<RiveParameters[\"onLoad\"]>\n>;\n"],"mappings":"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","names":[]}