@elabs-ai/components-ai 4.2.0 → 5.1.0

package/dist/chunk-ADOYAGGK.js

@@ -0,0 +1,482 @@
+"use client";
+import {
+  getStreamdownPluginsKey,
+  useStreamdownMermaidOptions,
+  useStreamdownPlugins,
+  useStreamdownTranslations
+} from "./chunk-PQBF6ZIQ.js";
+import {
+  stripSanitizerOverrides,
+  warnOnTrustedPluginSlots
+} from "./chunk-DZW6LM22.js";
+
+// src/message.tsx
+import { Avatar, AvatarFallback, AvatarImage, Button } from "@elabs-ai/components-ui";
+import { ButtonGroup, ButtonGroupText, Skeleton } from "@elabs-ai/components-ui";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { useLocale } from "@elabs-ai/components-ui";
+import { cva } from "class-variance-authority";
+import { BotIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { Streamdown } from "streamdown";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Message = ({ className, from, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "group flex w-full max-w-[95%] flex-col gap-2",
+      // NOTE `is-user` / `is-assistant` are LOAD-BEARING, not decorative: they
+      // are what `MessageContent`'s `group-[.is-user]:…` selectors compile
+      // against (`.group.is-user &`). `data-role` below is their semantic twin
+      // for querying/testing — don't dedupe the two, removing the class would
+      // silently kill the `--chat-user` fill in every theme.
+      from === "user" ? "is-user ms-auto justify-end" : "is-assistant",
+      className
+    ),
+    "data-role": from,
+    "data-slot": "message",
+    ...props
+  }
+);
+var MessageContent = ({ children, className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-hidden text-body",
+      // The user turn is the 08 fill channel: the revalued `--chat-user` tint +
+      // its AA-validated foreground (research 11 §B.1 MSG-1). The assistant
+      // branch stays bare — its separation is the AgentMessage rail.
+      "group-[.is-user]:ms-auto group-[.is-user]:rounded-lg group-[.is-user]:bg-chat-user group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-chat-user-foreground",
+      "group-[.is-assistant]:text-foreground",
+      className
+    ),
+    "data-slot": "message-content",
+    ...props,
+    children
+  }
+);
+var MessageHeader = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex items-center gap-2 text-meta text-muted-foreground", className),
+    "data-slot": "message-header",
+    ...props
+  }
+);
+var MessageAvatar = ({
+  src,
+  name,
+  role = "user",
+  className,
+  children,
+  ...props
+}) => {
+  if (role === "agent") {
+    return /* @__PURE__ */ jsxs(
+      Avatar,
+      {
+        "aria-label": name ? `${name} (agent)` : "Agent",
+        role: "img",
+        className: cn("size-6 bg-primary text-primary-foreground", className),
+        "data-role": "agent",
+        "data-slot": "message-avatar",
+        ...props,
+        children: [
+          src ? /* @__PURE__ */ jsx(AvatarImage, { alt: name ?? "", src }) : null,
+          /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(BotIcon, { "aria-hidden": "true", size: 14 }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Avatar,
+    {
+      className: cn("size-6", className),
+      "data-role": role,
+      "data-slot": "message-avatar",
+      ...props,
+      children: [
+        src ? /* @__PURE__ */ jsx(AvatarImage, { alt: name ?? "", src }) : null,
+        /* @__PURE__ */ jsx(AvatarFallback, { className: "text-meta", children: children ?? name?.slice(0, 1).toUpperCase() ?? "?" })
+      ]
+    }
+  );
+};
+var UserMessage = (props) => /* @__PURE__ */ jsx(Message, { from: "user", ...props });
+var agentMessageVariants = cva("", {
+  variants: {
+    /**
+     * "Final answer" is a VISUAL axis, not a behavioural mode (research 11
+     * §B.2): `answer` applies the 08 green left rail. It sits on the message
+     * wrapper — never on `MessageContent`, whose `overflow-hidden` would clip
+     * it (research 11 §G.1).
+     */
+    emphasis: {
+      default: "",
+      answer: "border-s-4 border-s-primary ps-4"
+    }
+  },
+  defaultVariants: { emphasis: "default" }
+});
+var AgentMessage = ({ className, emphasis, ...props }) => /* @__PURE__ */ jsx(
+  Message,
+  {
+    from: "assistant",
+    className: cn(agentMessageVariants({ emphasis }), className),
+    ...props
+  }
+);
+var messageActionsVariants = cva(
+  [
+    "flex items-center gap-1",
+    // Follow the bubble to the right on a user turn — the SAME selector
+    // `MessageContent` uses for the `--chat-user` fill above. Without it the row
+    // sits at the flex-column's cross-start (left) edge while the bubble it acts
+    // on is `ms-auto`'d to the right, so a `bar` pill renders under the PREVIOUS
+    // (assistant) message: "Edit" appears to edit the agent's answer. It was
+    // invisible before only because a `plain` row stretched full-width and had
+    // no drawn box; `w-fit` is what made the misplacement visible.
+    "group-[.is-user]:ms-auto"
+  ],
+  {
+    variants: {
+      /**
+       * How the row presents itself. Two VISUAL values, per `cva`'s remit — no
+       * behaviour forks on this axis.
+       * - `plain` (default): a bare inline row, the pre-#existing shape. Unchanged
+       *   for every consumer that never sets the prop.
+       * - `bar`: a floating pill that reads as chrome sitting ABOVE the transcript
+       *   rather than as more message content. Per ADR 0020 a floating surface
+       *   takes `shadow-ring-*` and NO border — the ring bakes the 1px edge in as
+       *   the shadow's last layer, so there is no second crisp stroke beside it,
+       *   and because the hairline sits OUTSIDE `--shadow-strength` the pill keeps
+       *   a drawn edge at high decoration / `data-decoration="8|9|10"` where the lift
+       *   is zeroed.
+       */
+      appearance: {
+        plain: "",
+        bar: "w-fit rounded-full bg-popover p-0.5 shadow-ring-sm"
+      },
+      /**
+       * When the row is visible.
+       * - `always` (default): in flow, always shown.
+       * - `hover`: faded out at rest, revealed when the pointer is anywhere over
+       *   the parent `Message`, when focus lands inside the row, or while a menu
+       *   inside it is open.
+       */
+      reveal: {
+        always: "",
+        hover: [
+          "transition-opacity duration-fast ease-standard motion-reduce:transition-none",
+          // Hover-reveal is gated on the POINTER, not on a breakpoint: a touch
+          // device has no hover state at all, so hiding the row there would make
+          // it unreachable (you cannot tap what you cannot see, and there is no
+          // gesture that reveals it first). `pointer-coarse` therefore never
+          // takes the `opacity-0` at all and the row stays visible. Note this is
+          // a stronger guarantee than the `md:` breakpoint proxy used by the
+          // `@elabs-ai/components-ui` Sidebar — a ≥md tablet is
+          // exactly the case that proxy gets wrong.
+          "pointer-fine:opacity-0",
+          // Reveal on: the parent Message (`Message` sets the bare `group` class
+          // — see the load-bearing note there), the row itself, keyboard focus
+          // landing inside it, and an open menu launched from it (a `⋯ more`
+          // trigger carries `data-state="open"`; without this the row fades out
+          // from under the menu the moment the pointer travels to it).
+          "pointer-fine:group-hover:opacity-100",
+          "pointer-fine:hover:opacity-100",
+          "pointer-fine:focus-within:opacity-100",
+          "pointer-fine:has-[[data-state=open]]:opacity-100"
+        ]
+      }
+    },
+    defaultVariants: { appearance: "plain", reveal: "always" }
+  }
+);
+var MessageActions = ({
+  appearance,
+  className,
+  children,
+  label,
+  reveal,
+  ...props
+}) => {
+  const { t } = useLocale();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": label ?? t("ai.message.actions"),
+      className: cn(messageActionsVariants({ appearance, reveal }), className),
+      "data-slot": "message-actions",
+      role: "group",
+      ...props,
+      children
+    }
+  );
+};
+var MessageAction = ({
+  tooltip,
+  children,
+  label,
+  variant = "ghost",
+  size = "icon-sm",
+  ...props
+}) => {
+  const button = /* @__PURE__ */ jsxs(Button, { "data-slot": "message-action", size, type: "button", variant, ...props, children: [
+    children,
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: label || tooltip })
+  ] });
+  if (tooltip) {
+    return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: tooltip }) })
+    ] }) });
+  }
+  return button;
+};
+var MessageBranchContext = createContext(null);
+var useMessageBranch = () => {
+  const context = useContext(MessageBranchContext);
+  if (!context) {
+    throw new Error("MessageBranch components must be used within MessageBranch");
+  }
+  return context;
+};
+var MessageBranch = ({
+  branch: branchProp,
+  defaultBranch = 0,
+  onBranchChange,
+  className,
+  ...props
+}) => {
+  const isControlled = branchProp !== void 0;
+  const [internalBranch, setInternalBranch] = useState(defaultBranch);
+  const currentBranch = isControlled ? branchProp : internalBranch;
+  const [branches, setBranches] = useState([]);
+  const handleBranchChange = useCallback(
+    (newBranch) => {
+      if (!isControlled) setInternalBranch(newBranch);
+      onBranchChange?.(newBranch);
+    },
+    [isControlled, onBranchChange]
+  );
+  const goToPrevious = useCallback(() => {
+    const newBranch = currentBranch > 0 ? currentBranch - 1 : branches.length - 1;
+    handleBranchChange(newBranch);
+  }, [currentBranch, branches.length, handleBranchChange]);
+  const goToNext = useCallback(() => {
+    const newBranch = currentBranch < branches.length - 1 ? currentBranch + 1 : 0;
+    handleBranchChange(newBranch);
+  }, [currentBranch, branches.length, handleBranchChange]);
+  const contextValue = useMemo(
+    () => ({
+      branches,
+      currentBranch,
+      goToNext,
+      goToPrevious,
+      setBranches,
+      totalBranches: branches.length
+    }),
+    [branches, currentBranch, goToNext, goToPrevious]
+  );
+  return /* @__PURE__ */ jsx(MessageBranchContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("grid w-full gap-2 [&>div]:pb-0", className),
+      "data-slot": "message-branch",
+      ...props
+    }
+  ) });
+};
+var MessageBranchContent = ({ children, id, ...props }) => {
+  const { currentBranch, setBranches } = useMessageBranch();
+  const childrenArray = useMemo(
+    () => Array.isArray(children) ? children : [children],
+    [children]
+  );
+  useEffect(() => {
+    setBranches(childrenArray);
+  }, [childrenArray, setBranches]);
+  return childrenArray.map((branch, index) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid gap-2 overflow-hidden [&>div]:pb-0",
+        index === currentBranch ? "block" : "hidden"
+      ),
+      "data-slot": "message-branch-content",
+      id: id ? `${id}-${index}` : void 0,
+      ...props,
+      children: branch
+    },
+    branch.key
+  ));
+};
+var MessageBranchSelector = ({ className, ...props }) => {
+  const { totalBranches } = useMessageBranch();
+  if (totalBranches <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    ButtonGroup,
+    {
+      className: cn(
+        "[&>*:not(:first-child)]:rounded-s-md [&>*:not(:last-child)]:rounded-e-md",
+        className
+      ),
+      "data-slot": "message-branch-selector",
+      orientation: "horizontal",
+      ...props
+    }
+  );
+};
+var MessageBranchPrevious = ({ children, ...props }) => {
+  const { t } = useLocale();
+  const { goToPrevious, totalBranches } = useMessageBranch();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": t("ai.message.previousBranch"),
+      "data-slot": "message-branch-previous",
+      disabled: totalBranches <= 1,
+      onClick: goToPrevious,
+      size: "icon-sm",
+      type: "button",
+      variant: "ghost",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(ChevronLeftIcon, { size: 14, "data-rtl-flip": true })
+    }
+  );
+};
+var MessageBranchNext = ({ children, ...props }) => {
+  const { t } = useLocale();
+  const { goToNext, totalBranches } = useMessageBranch();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": t("ai.message.nextBranch"),
+      "data-slot": "message-branch-next",
+      disabled: totalBranches <= 1,
+      onClick: goToNext,
+      size: "icon-sm",
+      type: "button",
+      variant: "ghost",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, { size: 14, "data-rtl-flip": true })
+    }
+  );
+};
+var MessageBranchPage = ({ className, ...props }) => {
+  const { currentBranch, totalBranches } = useMessageBranch();
+  return /* @__PURE__ */ jsxs(
+    ButtonGroupText,
+    {
+      className: cn("border-none bg-transparent text-muted-foreground shadow-none", className),
+      "data-slot": "message-branch-page",
+      ...props,
+      children: [
+        currentBranch + 1,
+        " of ",
+        totalBranches
+      ]
+    }
+  );
+};
+var MessageResponse = memo(
+  ({ className, loading = false, plugins: pluginOverrides, ...props }) => {
+    stripSanitizerOverrides(props);
+    const translations = useStreamdownTranslations();
+    const { t } = useLocale();
+    const internalPlugins = useStreamdownPlugins(
+      typeof props.children === "string" ? props.children : ""
+    );
+    const plugins = useMemo(() => {
+      warnOnTrustedPluginSlots(pluginOverrides, internalPlugins);
+      return { ...internalPlugins, ...pluginOverrides };
+    }, [internalPlugins, pluginOverrides]);
+    const mermaidOptions = useStreamdownMermaidOptions();
+    if (loading) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn("space-y-2", className),
+          "data-slot": "message-response",
+          role: "status",
+          "aria-live": "polite",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("loading") }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-64" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-52" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-40" })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Streamdown,
+      {
+        className: cn(
+          "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+          // Brand prose scale (research 11 §B.1 MSG-3): map the streamed markdown
+          // element tree onto the 07 type roles. Descendant-selector className —
+          // NOT a `components` map — so streaming stays cheap.
+          "[&_h1]:text-title [&_h2]:text-subtitle [&_h3]:text-subtitle",
+          "[&_p]:text-body [&_li]:text-body [&_code]:text-code",
+          className
+        ),
+        "data-slot": "message-response",
+        plugins,
+        translations,
+        mermaid: mermaidOptions,
+        ...props
+      },
+      getStreamdownPluginsKey(internalPlugins)
+    );
+  },
+  // A hand-picked field list (`children`/`isAnimating`/`loading`) silently
+  // went stale as `MessageResponseProps` grew: `className`, `components`,
+  // `plugins`, `mode` and every other `Streamdown` prop passed through
+  // `...props` were never compared, so a caller-driven change to any of them
+  // (e.g. toggling `mode="static"`/`"streaming"`, swapping `components`, or
+  // overriding a `plugins` slot) rendered stale content until an unrelated
+  // prop also changed. Compare every own key on BOTH sides with `Object.is`
+  // instead, so a newly added prop is covered for free.
+  (prevProps, nextProps) => {
+    const prevKeys = Object.keys(prevProps);
+    const nextKeys = Object.keys(nextProps);
+    if (prevKeys.length !== nextKeys.length) return false;
+    return prevKeys.every((key) => Object.is(prevProps[key], nextProps[key]));
+  }
+);
+MessageResponse.displayName = "MessageResponse";
+var MessageToolbar = ({ className, children, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("mt-4 flex w-full items-center justify-between gap-4", className),
+    "data-slot": "message-toolbar",
+    ...props,
+    children
+  }
+);
+
+export {
+  Message,
+  MessageContent,
+  MessageHeader,
+  MessageAvatar,
+  UserMessage,
+  agentMessageVariants,
+  AgentMessage,
+  messageActionsVariants,
+  MessageActions,
+  MessageAction,
+  MessageBranch,
+  MessageBranchContent,
+  MessageBranchSelector,
+  MessageBranchPrevious,
+  MessageBranchNext,
+  MessageBranchPage,
+  MessageResponse,
+  MessageToolbar
+};
+//# sourceMappingURL=chunk-ADOYAGGK.js.map

package/dist/chunk-ADOYAGGK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/message.tsx"],"sourcesContent":["\"use client\";\n\nimport { Avatar, AvatarFallback, AvatarImage, Button } from \"@elabs-ai/components-ui\";\nimport { ButtonGroup, ButtonGroupText, Skeleton } from \"@elabs-ai/components-ui\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport { useLocale } from \"@elabs-ai/components-ui\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { stripSanitizerOverrides, warnOnTrustedPluginSlots } from \"./_streamdown-safety\";\nimport {\n  getStreamdownPluginsKey,\n  useStreamdownMermaidOptions,\n  useStreamdownPlugins,\n  useStreamdownTranslations,\n} from \"./_streamdown-i18n\";\nimport type { UIMessage } from \"ai\";\nimport { BotIcon, ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport type { ComponentProps, HTMLAttributes, ReactElement } from \"react\";\nimport { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from \"react\";\nimport { Streamdown } from \"streamdown\";\n\nexport type MessageProps = HTMLAttributes<HTMLDivElement> & {\n  from: UIMessage[\"role\"];\n};\n\nexport const Message = ({ className, from, ...props }: MessageProps) => (\n  <div\n    className={cn(\n      \"group flex w-full max-w-[95%] flex-col gap-2\",\n      // NOTE `is-user` / `is-assistant` are LOAD-BEARING, not decorative: they\n      // are what `MessageContent`'s `group-[.is-user]:…` selectors compile\n      // against (`.group.is-user &`). `data-role` below is their semantic twin\n      // for querying/testing — don't dedupe the two, removing the class would\n      // silently kill the `--chat-user` fill in every theme.\n      from === \"user\" ? \"is-user ms-auto justify-end\" : \"is-assistant\",\n      className,\n    )}\n    data-role={from}\n    data-slot=\"message\"\n    {...props}\n  />\n);\n\nexport type MessageContentProps = HTMLAttributes<HTMLDivElement>;\n\nexport const MessageContent = ({ children, className, ...props }: MessageContentProps) => (\n  <div\n    className={cn(\n      \"flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-hidden text-body\",\n      // The user turn is the 08 fill channel: the revalued `--chat-user` tint +\n      // its AA-validated foreground (research 11 §B.1 MSG-1). The assistant\n      // branch stays bare — its separation is the AgentMessage rail.\n      \"group-[.is-user]:ms-auto group-[.is-user]:rounded-lg group-[.is-user]:bg-chat-user group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-chat-user-foreground\",\n      \"group-[.is-assistant]:text-foreground\",\n      className,\n    )}\n    data-slot=\"message-content\"\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nexport type MessageHeaderProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * Optional identity row above the bubble — avatar + name + timestamp\n * (research 11 §B.1 MSG-2). A slot, not baked structure.\n */\nexport const MessageHeader = ({ className, ...props }: MessageHeaderProps) => (\n  <div\n    className={cn(\"flex items-center gap-2 text-meta text-muted-foreground\", className)}\n    data-slot=\"message-header\"\n    {...props}\n  />\n);\n\nexport type MessageAvatarProps = ComponentProps<typeof Avatar> & {\n  /** Image source for the participant. */\n  src?: string;\n  /** Participant name — drives the image alt + the fallback initial, and the accessible label. */\n  name?: string;\n  /**\n   * Visual identity role.\n   * - `\"user\"` (default): shows the initial letter as a fallback.\n   * - `\"agent\"`: shows a branded Bot icon on a primary (green) ground instead\n   *   of a text initial, matching the agent identity convention.\n   */\n  role?: \"user\" | \"agent\";\n};\n\n/**\n * Thin preset over the `@elabs-ai/components-ui` Avatar sized for inline chat (NOT a new\n * avatar primitive — research 11 §B.1 MSG-2).\n *\n * When `role=\"agent\"`, renders a filled primary-green circle with a centered\n * Bot icon (lucide-react `BotIcon`) and an accessible label derived from\n * `name`. The primary/primary-foreground token pair is the agent identity\n * colour across both themes (green on light/dark; theme-adapted\n * on others).\n */\nexport const MessageAvatar = ({\n  src,\n  name,\n  role = \"user\",\n  className,\n  children,\n  ...props\n}: MessageAvatarProps) => {\n  if (role === \"agent\") {\n    return (\n      <Avatar\n        aria-label={name ? `${name} (agent)` : \"Agent\"}\n        // `role=\"img\"` is LOAD-BEARING, not decoration (#386). Radix's\n        // `Avatar.Root` renders a plain `<span>`, whose implicit role is\n        // `generic` — and ARIA PROHIBITS `aria-label` on `generic`, so axe's\n        // `aria-prohibited-attr` reds the story AND assistive tech never\n        // announces the name. `img` is the role permitted to carry a name for a\n        // graphic whose contents (the Bot glyph) are not text — the same\n        // precedent a titled `@elabs-ai/components-icons` `Icon`\n        // uses (.claude/rules/icons.md). Only the agent branch takes it: the\n        // user branch's fallback initial is real text content, so naming it too\n        // would add an `img` per message for no gain.\n        role=\"img\"\n        className={cn(\"size-6 bg-primary text-primary-foreground\", className)}\n        data-role=\"agent\"\n        data-slot=\"message-avatar\"\n        {...props}\n      >\n        {src ? <AvatarImage alt={name ?? \"\"} src={src} /> : null}\n        <AvatarFallback className=\"bg-primary text-primary-foreground\">\n          <BotIcon aria-hidden=\"true\" size={14} />\n        </AvatarFallback>\n      </Avatar>\n    );\n  }\n\n  return (\n    <Avatar\n      className={cn(\"size-6\", className)}\n      data-role={role}\n      data-slot=\"message-avatar\"\n      {...props}\n    >\n      {src ? <AvatarImage alt={name ?? \"\"} src={src} /> : null}\n      <AvatarFallback className=\"text-meta\">\n        {children ?? name?.slice(0, 1).toUpperCase() ?? \"?\"}\n      </AvatarFallback>\n    </Avatar>\n  );\n};\n\nexport type UserMessageProps = Omit<MessageProps, \"from\">;\n\n/**\n * Named front door for a user turn (research 11 §B.2) — a thin preset over\n * `Message from=\"user\"`; the chat-user fill comes from `MessageContent`.\n */\nexport const UserMessage = (props: UserMessageProps) => <Message from=\"user\" {...props} />;\n\nexport const agentMessageVariants = cva(\"\", {\n  variants: {\n    /**\n     * \"Final answer\" is a VISUAL axis, not a behavioural mode (research 11\n     * §B.2): `answer` applies the 08 green left rail. It sits on the message\n     * wrapper — never on `MessageContent`, whose `overflow-hidden` would clip\n     * it (research 11 §G.1).\n     */\n    emphasis: {\n      default: \"\",\n      answer: \"border-s-4 border-s-primary ps-4\",\n    },\n  },\n  defaultVariants: { emphasis: \"default\" },\n});\n\nexport type AgentMessageEmphasis = NonNullable<\n  VariantProps<typeof agentMessageVariants>[\"emphasis\"]\n>;\n\nexport type AgentMessageProps = Omit<MessageProps, \"from\"> &\n  VariantProps<typeof agentMessageVariants>;\n\n/**\n * Named front door for an assistant turn (research 11 §B.2). KPI band / prose /\n * footer are COMPOSED children (`MetricGrid` + `MessageResponse` +\n * `SourceList`), not baked-in layout.\n */\nexport const AgentMessage = ({ className, emphasis, ...props }: AgentMessageProps) => (\n  <Message\n    from=\"assistant\"\n    className={cn(agentMessageVariants({ emphasis }), className)}\n    {...props}\n  />\n);\n\nexport const messageActionsVariants = cva(\n  [\n    \"flex items-center gap-1\",\n    // Follow the bubble to the right on a user turn — the SAME selector\n    // `MessageContent` uses for the `--chat-user` fill above. Without it the row\n    // sits at the flex-column's cross-start (left) edge while the bubble it acts\n    // on is `ms-auto`'d to the right, so a `bar` pill renders under the PREVIOUS\n    // (assistant) message: \"Edit\" appears to edit the agent's answer. It was\n    // invisible before only because a `plain` row stretched full-width and had\n    // no drawn box; `w-fit` is what made the misplacement visible.\n    \"group-[.is-user]:ms-auto\",\n  ],\n  {\n    variants: {\n      /**\n       * How the row presents itself. Two VISUAL values, per `cva`'s remit — no\n       * behaviour forks on this axis.\n       * - `plain` (default): a bare inline row, the pre-#existing shape. Unchanged\n       *   for every consumer that never sets the prop.\n       * - `bar`: a floating pill that reads as chrome sitting ABOVE the transcript\n       *   rather than as more message content. Per ADR 0020 a floating surface\n       *   takes `shadow-ring-*` and NO border — the ring bakes the 1px edge in as\n       *   the shadow's last layer, so there is no second crisp stroke beside it,\n       *   and because the hairline sits OUTSIDE `--shadow-strength` the pill keeps\n       *   a drawn edge at high decoration / `data-decoration=\"8|9|10\"` where the lift\n       *   is zeroed.\n       */\n      appearance: {\n        plain: \"\",\n        bar: \"w-fit rounded-full bg-popover p-0.5 shadow-ring-sm\",\n      },\n      /**\n       * When the row is visible.\n       * - `always` (default): in flow, always shown.\n       * - `hover`: faded out at rest, revealed when the pointer is anywhere over\n       *   the parent `Message`, when focus lands inside the row, or while a menu\n       *   inside it is open.\n       */\n      reveal: {\n        always: \"\",\n        hover: [\n          \"transition-opacity duration-fast ease-standard motion-reduce:transition-none\",\n          // Hover-reveal is gated on the POINTER, not on a breakpoint: a touch\n          // device has no hover state at all, so hiding the row there would make\n          // it unreachable (you cannot tap what you cannot see, and there is no\n          // gesture that reveals it first). `pointer-coarse` therefore never\n          // takes the `opacity-0` at all and the row stays visible. Note this is\n          // a stronger guarantee than the `md:` breakpoint proxy used by the\n          // `@elabs-ai/components-ui` Sidebar — a ≥md tablet is\n          // exactly the case that proxy gets wrong.\n          \"pointer-fine:opacity-0\",\n          // Reveal on: the parent Message (`Message` sets the bare `group` class\n          // — see the load-bearing note there), the row itself, keyboard focus\n          // landing inside it, and an open menu launched from it (a `⋯ more`\n          // trigger carries `data-state=\"open\"`; without this the row fades out\n          // from under the menu the moment the pointer travels to it).\n          \"pointer-fine:group-hover:opacity-100\",\n          \"pointer-fine:hover:opacity-100\",\n          \"pointer-fine:focus-within:opacity-100\",\n          \"pointer-fine:has-[[data-state=open]]:opacity-100\",\n        ],\n      },\n    },\n    defaultVariants: { appearance: \"plain\", reveal: \"always\" },\n  },\n);\n\nexport type MessageActionsProps = ComponentProps<\"div\"> &\n  VariantProps<typeof messageActionsVariants> & {\n    /**\n     * Accessible name for the group. Defaults to the `ai.message.actions`\n     * microcopy key. Naming matters more here than on an always-visible row:\n     * assistive tech reaches these controls whether or not a pointer ever\n     * revealed them, so the group has to say what they act on.\n     */\n    label?: string;\n  };\n\n/**\n * A row of per-message controls (copy, pin, retry, a `⋯` menu, …).\n *\n * **Presentational only** — it lays the controls out and decides when they are\n * visible; it ships no clipboard call, no pin state and no persistence. Every\n * `MessageAction` inside it is a bare `Button`: give it an `onClick`, and for a\n * toggle (pin, bookmark) an `aria-pressed` the host owns. That is the D5\n * boundary (`docs/DECISIONS.md` §D5) — brand-ui renders, the app acts.\n *\n * `reveal=\"hover\"` reads the parent `Message`'s `group` class, so the row must\n * be rendered INSIDE a `Message` for pointer-reveal to fire. Standing alone it\n * still reveals on its own hover and on focus-within, but not from the bubble.\n */\nexport const MessageActions = ({\n  appearance,\n  className,\n  children,\n  label,\n  reveal,\n  ...props\n}: MessageActionsProps) => {\n  const { t } = useLocale();\n\n  return (\n    <div\n      aria-label={label ?? t(\"ai.message.actions\")}\n      className={cn(messageActionsVariants({ appearance, reveal }), className)}\n      data-slot=\"message-actions\"\n      role=\"group\"\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport type MessageActionProps = ComponentProps<typeof Button> & {\n  tooltip?: string;\n  label?: string;\n};\n\nexport const MessageAction = ({\n  tooltip,\n  children,\n  label,\n  variant = \"ghost\",\n  size = \"icon-sm\",\n  ...props\n}: MessageActionProps) => {\n  const button = (\n    <Button data-slot=\"message-action\" size={size} type=\"button\" variant={variant} {...props}>\n      {children}\n      <span className=\"sr-only\">{label || tooltip}</span>\n    </Button>\n  );\n\n  if (tooltip) {\n    return (\n      <TooltipProvider>\n        <Tooltip>\n          <TooltipTrigger asChild>{button}</TooltipTrigger>\n          <TooltipContent>\n            <p>{tooltip}</p>\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    );\n  }\n\n  return button;\n};\n\ninterface MessageBranchContextType {\n  currentBranch: number;\n  totalBranches: number;\n  goToPrevious: () => void;\n  goToNext: () => void;\n  branches: ReactElement[];\n  setBranches: (branches: ReactElement[]) => void;\n}\n\nconst MessageBranchContext = createContext<MessageBranchContextType | null>(null);\n\nconst useMessageBranch = () => {\n  const context = useContext(MessageBranchContext);\n\n  if (!context) {\n    throw new Error(\"MessageBranch components must be used within MessageBranch\");\n  }\n\n  return context;\n};\n\nexport type MessageBranchProps = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Controlled current branch index. When set, `MessageBranch` no longer\n   * tracks its own state — the host owns it and must update `branch` from\n   * `onBranchChange` (or elsewhere) to move the selection. Omit for the\n   * uncontrolled default (see `defaultBranch`).\n   */\n  branch?: number;\n  defaultBranch?: number;\n  onBranchChange?: (branchIndex: number) => void;\n};\n\nexport const MessageBranch = ({\n  branch: branchProp,\n  defaultBranch = 0,\n  onBranchChange,\n  className,\n  ...props\n}: MessageBranchProps) => {\n  // Derived once and never flipped, per the repo's controlled/uncontrolled\n  // convention (component-api.md) — mirrors MessageFeedback/MessageEdit.\n  const isControlled = branchProp !== undefined;\n  const [internalBranch, setInternalBranch] = useState(defaultBranch);\n  const currentBranch = isControlled ? branchProp : internalBranch;\n  const [branches, setBranches] = useState<ReactElement[]>([]);\n\n  const handleBranchChange = useCallback(\n    (newBranch: number) => {\n      if (!isControlled) setInternalBranch(newBranch);\n      onBranchChange?.(newBranch);\n    },\n    [isControlled, onBranchChange],\n  );\n\n  const goToPrevious = useCallback(() => {\n    const newBranch = currentBranch > 0 ? currentBranch - 1 : branches.length - 1;\n    handleBranchChange(newBranch);\n  }, [currentBranch, branches.length, handleBranchChange]);\n\n  const goToNext = useCallback(() => {\n    const newBranch = currentBranch < branches.length - 1 ? currentBranch + 1 : 0;\n    handleBranchChange(newBranch);\n  }, [currentBranch, branches.length, handleBranchChange]);\n\n  const contextValue = useMemo<MessageBranchContextType>(\n    () => ({\n      branches,\n      currentBranch,\n      goToNext,\n      goToPrevious,\n      setBranches,\n      totalBranches: branches.length,\n    }),\n    [branches, currentBranch, goToNext, goToPrevious],\n  );\n\n  return (\n    <MessageBranchContext.Provider value={contextValue}>\n      <div\n        className={cn(\"grid w-full gap-2 [&>div]:pb-0\", className)}\n        data-slot=\"message-branch\"\n        {...props}\n      />\n    </MessageBranchContext.Provider>\n  );\n};\n\nexport type MessageBranchContentProps = HTMLAttributes<HTMLDivElement>;\n\nexport const MessageBranchContent = ({ children, id, ...props }: MessageBranchContentProps) => {\n  const { currentBranch, setBranches } = useMessageBranch();\n  const childrenArray = useMemo(\n    () => (Array.isArray(children) ? children : [children]),\n    [children],\n  );\n\n  // Always resync — an earlier length-gate (`branches.length !==\n  // childrenArray.length`) skipped this when a branch's CONTENT changed\n  // (e.g. an edited message) without the branch COUNT changing, leaving\n  // `context.branches` stale relative to what is actually rendered.\n  useEffect(() => {\n    setBranches(childrenArray);\n  }, [childrenArray, setBranches]);\n\n  return childrenArray.map((branch, index) => (\n    <div\n      className={cn(\n        \"grid gap-2 overflow-hidden [&>div]:pb-0\",\n        index === currentBranch ? \"block\" : \"hidden\",\n      )}\n      data-slot=\"message-branch-content\"\n      // Spreading a caller-supplied `id` onto every mapped branch produced\n      // duplicate DOM ids (one per branch); suffix it per index instead so\n      // each branch keeps a unique, stable id.\n      id={id ? `${id}-${index}` : undefined}\n      key={branch.key}\n      {...props}\n    >\n      {branch}\n    </div>\n  ));\n};\n\nexport type MessageBranchSelectorProps = ComponentProps<typeof ButtonGroup>;\n\nexport const MessageBranchSelector = ({ className, ...props }: MessageBranchSelectorProps) => {\n  const { totalBranches } = useMessageBranch();\n\n  // Don't render if there's only one branch\n  if (totalBranches <= 1) {\n    return null;\n  }\n\n  return (\n    <ButtonGroup\n      className={cn(\n        \"[&>*:not(:first-child)]:rounded-s-md [&>*:not(:last-child)]:rounded-e-md\",\n        className,\n      )}\n      data-slot=\"message-branch-selector\"\n      orientation=\"horizontal\"\n      {...props}\n    />\n  );\n};\n\nexport type MessageBranchPreviousProps = ComponentProps<typeof Button>;\n\nexport const MessageBranchPrevious = ({ children, ...props }: MessageBranchPreviousProps) => {\n  const { t } = useLocale();\n  const { goToPrevious, totalBranches } = useMessageBranch();\n\n  return (\n    <Button\n      aria-label={t(\"ai.message.previousBranch\")}\n      data-slot=\"message-branch-previous\"\n      disabled={totalBranches <= 1}\n      onClick={goToPrevious}\n      size=\"icon-sm\"\n      type=\"button\"\n      variant=\"ghost\"\n      {...props}\n    >\n      {children ?? <ChevronLeftIcon size={14} data-rtl-flip />}\n    </Button>\n  );\n};\n\nexport type MessageBranchNextProps = ComponentProps<typeof Button>;\n\nexport const MessageBranchNext = ({ children, ...props }: MessageBranchNextProps) => {\n  const { t } = useLocale();\n  const { goToNext, totalBranches } = useMessageBranch();\n\n  return (\n    <Button\n      aria-label={t(\"ai.message.nextBranch\")}\n      data-slot=\"message-branch-next\"\n      disabled={totalBranches <= 1}\n      onClick={goToNext}\n      size=\"icon-sm\"\n      type=\"button\"\n      variant=\"ghost\"\n      {...props}\n    >\n      {children ?? <ChevronRightIcon size={14} data-rtl-flip />}\n    </Button>\n  );\n};\n\nexport type MessageBranchPageProps = HTMLAttributes<HTMLSpanElement>;\n\nexport const MessageBranchPage = ({ className, ...props }: MessageBranchPageProps) => {\n  const { currentBranch, totalBranches } = useMessageBranch();\n\n  return (\n    <ButtonGroupText\n      className={cn(\"border-none bg-transparent text-muted-foreground shadow-none\", className)}\n      data-slot=\"message-branch-page\"\n      {...props}\n    >\n      {currentBranch + 1} of {totalBranches}\n    </ButtonGroupText>\n  );\n};\n\n/**\n * `rehypePlugins` is NOT exposed on `MessageResponse` (#36, fixed). This\n * renders untrusted, streamed model output — the type-level `Omit` below plus\n * a runtime `stripSanitizerOverrides()` call before the `{...props}` spread\n * onto `<Streamdown>` keep Streamdown's default sanitiser chain (rehype-raw →\n * rehype-sanitize → rehype-harden) non-overridable, even through a JS consumer\n * or a force-cast.\n *\n * `remarkPlugins` IS supported: the remark stage runs upstream of that chain\n * and cannot bypass it (PR #74 review, round 1). See `MarkdownView`'s TSDoc and\n * `packages/ai/src/_streamdown-safety.ts` for the full security model.\n */\nexport type MessageResponseProps = Omit<ComponentProps<typeof Streamdown>, \"rehypePlugins\"> & {\n  /**\n   * No content has arrived yet (loading-states.md `loading`) — renders\n   * skeleton lines at the body line-height instead of `<Streamdown>`, so the\n   * bubble reserves its space before the first token.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Custom renderers for markdown elements. **Semantics differ from\n   * `MarkdownView`:** `components` here REPLACES (not merges) per key against\n   * Streamdown's own defaults, since `MessageResponse` has no internal\n   * component map to merge with. See `MarkdownView` for merge-over-defaults\n   * semantics and `#10` for details.\n   */\n  components?: ComponentProps<typeof Streamdown>[\"components\"];\n  /**\n   * Streamdown plugin-slot overrides (`cjk`/`code`/`math`/`mermaid`/\n   * `renderers`), **merged** per key over the internal defaults, so a\n   * consumer's entry wins for its key; every key the consumer does not set\n   * keeps the reactive, i18n-aware internal default. Same semantics as\n   * `MarkdownView` (#10 fix round).\n   *\n   * **This narrow `plugins` prop can only APPEND — it can never displace\n   * Streamdown's default `rehypePlugins` chain** (`rehype-raw` →\n   * `rehype-sanitize` → `rehype-harden`). `MessageResponse` never sets\n   * `rehypePlugins` itself, and nothing in `PluginConfig` removes a member of\n   * that pipeline. But two of the five slots are **not** upstream of it and\n   * must be treated as TRUSTED CODE (#76):\n   * - **`math.rehypePlugin` runs AFTER `rehype-sanitize`/`rehype-harden`** —\n   *   it is appended to the end of the rehype pipeline (verified against\n   *   `streamdown@2.5.0`'s `dist/chunk-BO2N2NFS.js`), so its output is never\n   *   re-sanitised. Replacing it emits a dev-only `console.warn`; the plugin\n   *   still runs (the seam is deliberate, not a hole to close). The sharp\n   *   edge in practice is KaTeX's `trust` option — it disables KaTeX's own\n   *   sanitisation, so leave it off for model-authored content.\n   * - **`mermaid` never enters the rehype/remark pipeline at all.** Its\n   *   render output is written via `dangerouslySetInnerHTML` (streamdown's\n   *   only such sink); brand-ui's default pins mermaid's strict security\n   *   level, and a replacement must sanitise its own SVG. Also dev-warned.\n   * - `cjk` (remark-stage, re-sanitised downstream), `code` (feeds\n   *   `shikiTheme` only) and `renderers` (ordinary React components) do not\n   *   bypass sanitisation and are never warned about.\n   *\n   * See `docs/CSP-AND-NETWORK.md` §1 and\n   * `packages/ai/src/_streamdown-safety.ts`; `MarkdownView`'s TSDoc carries\n   * the same model for the sibling surface.\n   */\n  plugins?: ComponentProps<typeof Streamdown>[\"plugins\"];\n};\n\nexport const MessageResponse = memo(\n  ({ className, loading = false, plugins: pluginOverrides, ...props }: MessageResponseProps) => {\n    // Streamdown installs [rehypeRaw, rehypeSanitize, harden] as the DEFAULT VALUE of\n    // `rehypePlugins`; a supplied array REPLACES it. This component renders untrusted,\n    // streamed model output, so the chain is not overridable. Widen with `allowedTags` /\n    // `literalTagContent`, which merge into the sanitize schema. See issue #36.\n    // `remarkPlugins` is deliberately left alone — it runs upstream of the rehype\n    // chain and cannot bypass it (PR #74 review; see `_streamdown-safety.ts`).\n    stripSanitizerOverrides(props);\n    // Streamdown renders its own chrome (code copy, table menus, Mermaid\n    // toolbar); route its labels through the locale seam (#310). Spread AFTER\n    // so an explicit `translations` prop still wins (ADR 0017 override chain).\n    const translations = useStreamdownTranslations();\n    const { t } = useLocale();\n    // Brand-token-derived `code` plugin, not the package's static github-*\n    // default (#315 follow-up) — re-derives when the active theme changes.\n    // `math`/`cjk` are lazy-loaded off the raw markdown source (#perf-5, see\n    // `_streamdown-i18n.ts`) — pass `props.children` so they load only when\n    // this message actually needs them.\n    const internalPlugins = useStreamdownPlugins(\n      typeof props.children === \"string\" ? props.children : \"\",\n    );\n    // MERGED per key over the internal defaults — the same semantics as\n    // `MarkdownView`'s `plugins` prop (#10 fix round, M4): a consumer entry\n    // wins for its key; every key the consumer does not set keeps the\n    // reactive, i18n-aware internal default. Previously this component\n    // REPLACED `plugins` wholesale (`{...props}` spread after `plugins=`),\n    // the opposite of `MarkdownView` for the same prop on a sibling\n    // Streamdown surface — aligned so both components mean the same thing by\n    // \"override a plugin slot\".\n    // `math.rehypePlugin`/`mermaid` are the two slots that land in the DOM\n    // after (or outside) the sanitiser chain, so replacing one is a\n    // TRUSTED-CODE decision. The runtime half of that documented boundary is a\n    // dev warning — the plugin still runs; stripping it would break the\n    // legitimate use (#76).\n    const plugins = useMemo(() => {\n      warnOnTrustedPluginSlots(pluginOverrides, internalPlugins);\n      return { ...internalPlugins, ...pluginOverrides };\n    }, [internalPlugins, pluginOverrides]);\n    // The TOP-LEVEL Streamdown `mermaid` prop — catches a failed diagram\n    // render, including a missing `mermaid` optional peer (issue #33).\n    const mermaidOptions = useStreamdownMermaidOptions();\n\n    if (loading) {\n      return (\n        <div\n          className={cn(\"space-y-2\", className)}\n          data-slot=\"message-response\"\n          role=\"status\"\n          aria-live=\"polite\"\n        >\n          <span className=\"sr-only\">{t(\"loading\")}</span>\n          {/* Fixed (not percentage) widths: MessageContent is `w-fit`, so a\n              skeleton row sized in `%` has nothing definite to shrink-wrap\n              around and collapses to zero width. */}\n          <Skeleton className=\"h-5 w-64\" />\n          <Skeleton className=\"h-5 w-52\" />\n          <Skeleton className=\"h-5 w-40\" />\n        </div>\n      );\n    }\n\n    return (\n      <Streamdown\n        className={cn(\n          \"size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0\",\n          // Brand prose scale (research 11 §B.1 MSG-3): map the streamed markdown\n          // element tree onto the 07 type roles. Descendant-selector className —\n          // NOT a `components` map — so streaming stays cheap.\n          \"[&_h1]:text-title [&_h2]:text-subtitle [&_h3]:text-subtitle\",\n          \"[&_p]:text-body [&_li]:text-body [&_code]:text-code\",\n          className,\n        )}\n        // Forces a remount the first time the lazy math/cjk slot resolves —\n        // see `getStreamdownPluginsKey`'s doc in `_streamdown-i18n.ts` for why.\n        key={getStreamdownPluginsKey(internalPlugins)}\n        data-slot=\"message-response\"\n        plugins={plugins}\n        translations={translations}\n        mermaid={mermaidOptions}\n        {...props}\n      />\n    );\n  },\n  // A hand-picked field list (`children`/`isAnimating`/`loading`) silently\n  // went stale as `MessageResponseProps` grew: `className`, `components`,\n  // `plugins`, `mode` and every other `Streamdown` prop passed through\n  // `...props` were never compared, so a caller-driven change to any of them\n  // (e.g. toggling `mode=\"static\"`/`\"streaming\"`, swapping `components`, or\n  // overriding a `plugins` slot) rendered stale content until an unrelated\n  // prop also changed. Compare every own key on BOTH sides with `Object.is`\n  // instead, so a newly added prop is covered for free.\n  (prevProps, nextProps) => {\n    const prevKeys = Object.keys(prevProps) as (keyof MessageResponseProps)[];\n    const nextKeys = Object.keys(nextProps) as (keyof MessageResponseProps)[];\n    if (prevKeys.length !== nextKeys.length) return false;\n    return prevKeys.every((key) => Object.is(prevProps[key], nextProps[key]));\n  },\n);\n\nMessageResponse.displayName = \"MessageResponse\";\n\nexport type MessageToolbarProps = ComponentProps<\"div\">;\n\nexport const MessageToolbar = ({ className, children, ...props }: MessageToolbarProps) => (\n  <div\n    className={cn(\"mt-4 flex w-full items-center justify-between gap-4\", className)}\n    data-slot=\"message-toolbar\"\n    {...props}\n  >\n    {children}\n  </div>\n);\n"],"mappings":"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","names":[]}

package/dist/chunk-BA3AEMOU.js

@@ -0,0 +1,21 @@
+"use client";
+import {
+  lazyFlowPart
+} from "./chunk-NMVNNO3L.js";
+
+// src/canvas.tsx
+import { Skeleton } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { Suspense } from "react";
+import { jsx } from "react/jsx-runtime";
+var CanvasImpl = lazyFlowPart((m) => m.Canvas);
+var Canvas = ({ className, ...props }) => (
+  // The canvas fills the box its parent gives it, so the skeleton reserves the
+  // same space and the engine chunk arrives without a layout shift.
+  /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Skeleton, { className: cn("size-full", className) }), children: /* @__PURE__ */ jsx(CanvasImpl, { className, ...props }) })
+);
+
+export {
+  Canvas
+};
+//# sourceMappingURL=chunk-BA3AEMOU.js.map

package/dist/chunk-BA3AEMOU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/canvas.tsx"],"sourcesContent":["\"use client\";\n\nimport { Skeleton } from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport type { ReactFlowProps } from \"@xyflow/react\";\nimport type { ReactNode } from \"react\";\nimport { Suspense } from \"react\";\n\nimport { lazyFlowPart } from \"./_flow-lazy\";\n\nexport type CanvasProps = ReactFlowProps & {\n  children?: ReactNode;\n};\n\n/**\n * React Flow — and its stylesheet — is reached through a dynamic import: it\n * declares no `sideEffects`, so a static import would put the whole engine in\n * every consumer's entry chunk, a canvas rendered or not. `ReactFlowProps` above\n * is a TYPE import and erases. See ADR 0019 and `pnpm heavy-deps:check`.\n */\nconst CanvasImpl = lazyFlowPart<CanvasProps>((m) => m.Canvas);\n\nexport const Canvas = ({ className, ...props }: CanvasProps) => (\n  // The canvas fills the box its parent gives it, so the skeleton reserves the\n  // same space and the engine chunk arrives without a layout shift.\n  <Suspense fallback={<Skeleton className={cn(\"size-full\", className)} />}>\n    <CanvasImpl className={className} {...props} />\n  </Suspense>\n);\n"],"mappings":";;;;;;AAEA,SAAS,gBAAgB;AACzB,SAAS,UAAU;AAGnB,SAAS,gBAAgB;AAmBH;AALtB,IAAM,aAAa,aAA0B,CAAC,MAAM,EAAE,MAAM;AAErD,IAAM,SAAS,CAAC,EAAE,WAAW,GAAG,MAAM;AAAA;AAAA;AAAA,EAG3C,oBAAC,YAAS,UAAU,oBAAC,YAAS,WAAW,GAAG,aAAa,SAAS,GAAG,GACnE,8BAAC,cAAW,WAAuB,GAAG,OAAO,GAC/C;AAAA;","names":[]}