@elabs-ai/components-ai 4.1.0 → 5.0.0

package/dist/chunk-5VGYZ62I.js

@@ -0,0 +1,264 @@
+"use client";
+import {
+  Shimmer
+} from "./chunk-3YPT3V7L.js";
+
+// src/message-compare.tsx
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  use,
+  Children,
+  Fragment
+} from "react";
+import { AlertTriangleIcon } from "lucide-react";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  useIsMobile,
+  useLocale
+} from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MessageCompareContext = createContext(null);
+function useMessageCompare() {
+  const ctx = use(MessageCompareContext);
+  if (!ctx) {
+    throw new Error("useMessageCompare must be used within a MessageCompareProvider.");
+  }
+  return ctx;
+}
+var MessageCompareInternalContext = createContext(null);
+function useMessageCompareInternal() {
+  const ctx = use(MessageCompareInternalContext);
+  if (!ctx) {
+    throw new Error("MessageCompareColumn must be used within a MessageCompare.");
+  }
+  return ctx;
+}
+function MessageCompareProvider({
+  children,
+  columns,
+  syncScroll: syncScrollProp,
+  defaultSyncScroll = false,
+  onSyncScrollChange
+}) {
+  const isControlled = syncScrollProp !== void 0;
+  const [internalSyncScroll, setInternalSyncScroll] = useState(defaultSyncScroll);
+  const syncScroll = isControlled ? syncScrollProp : internalSyncScroll;
+  const isMobile = useIsMobile();
+  const setSyncScroll = useCallback(
+    (value) => {
+      if (!isControlled) setInternalSyncScroll(value);
+      onSyncScrollChange?.(value);
+    },
+    [isControlled, onSyncScrollChange]
+  );
+  const columnsRef = useRef(/* @__PURE__ */ new Map());
+  const syncScrollRef = useRef(syncScroll);
+  useEffect(() => {
+    syncScrollRef.current = syncScroll;
+  }, [syncScroll]);
+  const registerColumn = useCallback((id, node) => {
+    if (node) columnsRef.current.set(id, { node, suppressNextScroll: false });
+    else columnsRef.current.delete(id);
+  }, []);
+  const reportScroll = useCallback((id) => {
+    const entry = columnsRef.current.get(id);
+    if (!entry) return;
+    if (entry.suppressNextScroll) {
+      entry.suppressNextScroll = false;
+      return;
+    }
+    if (!syncScrollRef.current) return;
+    const { node } = entry;
+    const range = node.scrollHeight - node.clientHeight;
+    const ratio = range > 0 ? node.scrollTop / range : 0;
+    columnsRef.current.forEach((other, otherId) => {
+      if (otherId === id) return;
+      const otherRange = other.node.scrollHeight - other.node.clientHeight;
+      if (otherRange <= 0) return;
+      const previousScrollTop = other.node.scrollTop;
+      other.node.scrollTop = ratio * otherRange;
+      if (other.node.scrollTop !== previousScrollTop) {
+        other.suppressNextScroll = true;
+      }
+    });
+  }, []);
+  const state = useMemo(() => ({ syncScroll }), [syncScroll]);
+  const actions = useMemo(() => ({ setSyncScroll }), [setSyncScroll]);
+  const meta = useMemo(() => ({ columns, isMobile }), [columns, isMobile]);
+  const contextValue = useMemo(
+    () => ({ state, actions, meta }),
+    [state, actions, meta]
+  );
+  const internalValue = useMemo(
+    () => ({ registerColumn, reportScroll }),
+    [registerColumn, reportScroll]
+  );
+  return /* @__PURE__ */ jsx(MessageCompareContext, { value: contextValue, children: /* @__PURE__ */ jsx(MessageCompareInternalContext, { value: internalValue, children }) });
+}
+function columnKey(child, index) {
+  return child.key ?? String(index);
+}
+var MessageCompare = forwardRef(
+  function MessageCompare2({
+    children,
+    columns,
+    syncScroll,
+    defaultSyncScroll,
+    onSyncScrollChange,
+    tabsLabel,
+    className,
+    ...props
+  }, ref) {
+    return /* @__PURE__ */ jsx(
+      MessageCompareProvider,
+      {
+        columns,
+        defaultSyncScroll,
+        onSyncScrollChange,
+        syncScroll,
+        children: /* @__PURE__ */ jsx(MessageCompareLayout, { ref, className, tabsLabel, ...props, children })
+      }
+    );
+  }
+);
+var MessageCompareLayout = forwardRef(
+  function MessageCompareLayout2({ children, tabsLabel, className, ...props }, ref) {
+    const { meta } = useMessageCompare();
+    const { t } = useLocale();
+    const items = Children.toArray(children);
+    if (meta.isMobile) {
+      const firstKey = items[0] ? columnKey(items[0], 0) : void 0;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className: cn("flex h-full min-h-0 flex-col", className),
+          "data-slot": "message-compare",
+          ...props,
+          children: /* @__PURE__ */ jsxs(Tabs, { className: "flex h-full min-h-0 flex-col", defaultValue: firstKey, children: [
+            /* @__PURE__ */ jsx(
+              TabsList,
+              {
+                "aria-label": tabsLabel ?? t("ai.messageCompare.tabs"),
+                className: "w-full shrink-0",
+                children: items.map((child, index) => {
+                  const key = columnKey(child, index);
+                  const props2 = child.props;
+                  return /* @__PURE__ */ jsx(TabsTrigger, { className: "flex-1", value: key, children: props2.model?.name ?? key }, key);
+                })
+              }
+            ),
+            items.map((child, index) => {
+              const key = columnKey(child, index);
+              return /* @__PURE__ */ jsx(
+                TabsContent,
+                {
+                  className: "mt-2 min-h-0 flex-1 data-[state=active]:flex",
+                  forceMount: true,
+                  value: key,
+                  children: child
+                },
+                key
+              );
+            })
+          ] })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("h-full min-h-0", className),
+        "data-slot": "message-compare",
+        ...props,
+        children: /* @__PURE__ */ jsx(ResizablePanelGroup, { direction: "horizontal", children: items.map((child, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          index > 0 && /* @__PURE__ */ jsx(ResizableHandle, { withHandle: true }),
+          /* @__PURE__ */ jsx(ResizablePanel, { defaultSize: 100 / items.length, minSize: 15, children: child })
+        ] }, columnKey(child, index))) })
+      }
+    );
+  }
+);
+var MessageCompareColumn = forwardRef(
+  function MessageCompareColumn2({ model, status, children, className, id: idProp, ...props }, ref) {
+    const { registerColumn, reportScroll } = useMessageCompareInternal();
+    const { t } = useLocale();
+    const generatedId = useId();
+    const id = idProp ?? generatedId;
+    const setScrollRef = useCallback(
+      (node) => registerColumn(id, node),
+      [id, registerColumn]
+    );
+    const handleScroll = useCallback(() => reportScroll(id), [id, reportScroll]);
+    const isBusy = status === "streaming" || status === "submitted";
+    const isError = status === "error";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "aria-label": model.name,
+        className: cn("flex h-full min-h-0 min-w-0 flex-col", className),
+        "data-slot": "message-compare-column",
+        id,
+        role: "region",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex shrink-0 items-center justify-between gap-2 border-b px-3 py-2",
+              "data-slot": "message-compare-column-header",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "truncate text-body font-medium", children: model.name }),
+                isBusy && /* @__PURE__ */ jsx("span", { className: "shrink-0", role: "status", "aria-live": "polite", children: /* @__PURE__ */ jsx(Shimmer, { as: "span", className: "text-meta", duration: 1.5, children: t("loading") }) }),
+                isError && /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "flex shrink-0 items-center gap-1 text-meta text-destructive-text",
+                    role: "alert",
+                    children: [
+                      /* @__PURE__ */ jsx(AlertTriangleIcon, { "aria-hidden": "true", className: "size-3.5" }),
+                      t("ai.messageCompare.error")
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "min-h-0 flex-1 overflow-y-auto p-4 focus-ring-inset",
+              "data-slot": "message-compare-column-body",
+              onScroll: handleScroll,
+              ref: setScrollRef,
+              tabIndex: 0,
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export {
+  MessageCompare,
+  MessageCompareColumn
+};
+//# sourceMappingURL=chunk-5VGYZ62I.js.map

package/dist/chunk-5VGYZ62I.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/message-compare.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * MessageCompare — side-by-side comparison of 2-4 model responses to the same\n * prompt (issue #23). The one-at-a-time sibling of `MessageBranch`\n * (`message.tsx`): `MessageBranch` switches between responses; `MessageCompare`\n * shows several at once, each with its own status, its own scroll position, and\n * its own `MessageFeedback`.\n *\n * Architecture (lifted state, INTERNAL-ONLY — not the ChartFrame/PromptInputProvider\n * PUBLIC-provider shape): `MessageCompareProvider` + `useMessageCompare()` hold the\n * `state`/`actions`/`meta` that back the grid, but both are unexported implementation\n * details, like `ChartFrameProvider` (`.claude/rules/chart-components.md` — \"not\n * exported publicly\"). `MessageCompare` always mounts its own private instance and\n * treats every child as a column (`Children.toArray`), so there is no seam where an\n * ambient provider or a sibling control could attach to that SAME instance without\n * corrupting the grid (an extra `ResizablePanel`, or a spurious tab with no model\n * name). The supported way to add a \"Sync scroll\" toggle beside the grid is the\n * ordinary controlled-prop pattern — external `useState` plus `syncScroll`/\n * `onSyncScrollChange` on `MessageCompare` (see `SyncedScrollDemo` in\n * `message-compare.stories.tsx`) — which needs neither export. Column registration\n * and the scroll-sync broadcast live on a second, also-unexported context — the same\n * internal-context-splitting shape `context-panel.tsx` uses for its own refs.\n *\n * Independent streaming/scroll (the issue's core requirement): a column never\n * auto-scrolls itself or a sibling — there is no shared \"stick to bottom\"\n * driver here (that's `Conversation`'s job for a single transcript). Content\n * growing in one column therefore cannot move a sibling's scroll position by\n * construction; the only way scroll moves across columns is the opt-in\n * `syncScroll` broadcast below.\n *\n * Responsive collapse: under the `md` breakpoint (768px, the same threshold\n * `useIsMobile` already drives for `ContextPanel`'s Sheet fallback) the\n * side-by-side grid becomes a `Tabs` strip, per the issue. Every column stays\n * mounted (`forceMount` + Radix's own `hidden` attribute on the inactive\n * panel) rather than unmounting on tab switch, so a column's scroll position\n * survives flipping between tabs.\n */\n\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  use,\n  Children,\n  Fragment,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport type { ChatStatus } from \"ai\";\nimport { AlertTriangleIcon } from \"lucide-react\";\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n  useIsMobile,\n  useLocale,\n} from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport { Shimmer } from \"./shimmer\";\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\n/** The minimum a column needs to identify itself — mainly its accessible name. */\nexport interface MessageCompareModel {\n  /** Rendered in the column header AND used as the region's `aria-label`. */\n  name: string;\n  /** Optional stable id, e.g. for analytics — not used for layout or a11y. */\n  id?: string;\n}\n\n/** `MessageCompare` supports 2-4 side-by-side responses (issue #23). */\nexport type MessageCompareColumnsCount = 2 | 3 | 4;\n\ninterface MessageCompareState {\n  syncScroll: boolean;\n}\n\ninterface MessageCompareActions {\n  setSyncScroll: (value: boolean) => void;\n}\n\ninterface MessageCompareMeta {\n  columns: MessageCompareColumnsCount;\n  isMobile: boolean;\n}\n\ninterface MessageCompareContextValue {\n  state: MessageCompareState;\n  actions: MessageCompareActions;\n  meta: MessageCompareMeta;\n}\n\n// ── Internal state context (NOT exported — see the file's architecture comment) ─\n\nconst MessageCompareContext = createContext<MessageCompareContextValue | null>(null);\n\n/**\n * INTERNAL — reads the `state`/`actions`/`meta` `MessageCompareProvider` computes.\n * Not exported: `MessageCompare` always owns a private `MessageCompareProvider`\n * instance, so there is no ambient instance for an outside caller to read.\n */\nfunction useMessageCompare(): MessageCompareContextValue {\n  const ctx = use(MessageCompareContext);\n  if (!ctx) {\n    throw new Error(\"useMessageCompare must be used within a MessageCompareProvider.\");\n  }\n  return ctx;\n}\n\n// ── Internal context (column registry + scroll broadcast — not public API) ───\n\ninterface MessageCompareColumnEntry {\n  node: HTMLDivElement;\n  /** Set right before a programmatic scroll so the column's own handler knows\n   *  to swallow the resulting `scroll` event instead of re-broadcasting it. */\n  suppressNextScroll: boolean;\n}\n\ninterface MessageCompareInternalValue {\n  registerColumn: (id: string, node: HTMLDivElement | null) => void;\n  reportScroll: (id: string) => void;\n}\n\nconst MessageCompareInternalContext = createContext<MessageCompareInternalValue | null>(null);\n\nfunction useMessageCompareInternal(): MessageCompareInternalValue {\n  const ctx = use(MessageCompareInternalContext);\n  if (!ctx) {\n    throw new Error(\"MessageCompareColumn must be used within a MessageCompare.\");\n  }\n  return ctx;\n}\n\n// ── Provider (INTERNAL — not exported; see the file's architecture comment) ────\n\ninterface MessageCompareProviderProps {\n  children: ReactNode;\n  columns: MessageCompareColumnsCount;\n  /** Controlled sync-scroll flag. Omit for the uncontrolled default. */\n  syncScroll?: boolean;\n  /** Uncontrolled initial value. @default false */\n  defaultSyncScroll?: boolean;\n  onSyncScrollChange?: (value: boolean) => void;\n}\n\nfunction MessageCompareProvider({\n  children,\n  columns,\n  syncScroll: syncScrollProp,\n  defaultSyncScroll = false,\n  onSyncScrollChange,\n}: MessageCompareProviderProps) {\n  const isControlled = syncScrollProp !== undefined;\n  const [internalSyncScroll, setInternalSyncScroll] = useState(defaultSyncScroll);\n  const syncScroll = isControlled ? syncScrollProp : internalSyncScroll;\n  const isMobile = useIsMobile();\n\n  const setSyncScroll = useCallback(\n    (value: boolean) => {\n      if (!isControlled) setInternalSyncScroll(value);\n      onSyncScrollChange?.(value);\n    },\n    [isControlled, onSyncScrollChange],\n  );\n\n  // A ref, not state: scroll happens far too often to route through a render.\n  const columnsRef = useRef<Map<string, MessageCompareColumnEntry>>(new Map());\n  const syncScrollRef = useRef(syncScroll);\n  useEffect(() => {\n    syncScrollRef.current = syncScroll;\n  }, [syncScroll]);\n\n  const registerColumn = useCallback((id: string, node: HTMLDivElement | null) => {\n    if (node) columnsRef.current.set(id, { node, suppressNextScroll: false });\n    else columnsRef.current.delete(id);\n  }, []);\n\n  const reportScroll = useCallback((id: string) => {\n    const entry = columnsRef.current.get(id);\n    if (!entry) return;\n\n    // This scroll was OUR OWN programmatic write (a broadcast landing on this\n    // column) — swallow it once rather than re-broadcasting, which is what\n    // would otherwise ping-pong two synced columns back and forth.\n    if (entry.suppressNextScroll) {\n      entry.suppressNextScroll = false;\n      return;\n    }\n\n    if (!syncScrollRef.current) return;\n\n    const { node } = entry;\n    const range = node.scrollHeight - node.clientHeight;\n    const ratio = range > 0 ? node.scrollTop / range : 0;\n\n    columnsRef.current.forEach((other, otherId) => {\n      if (otherId === id) return;\n      const otherRange = other.node.scrollHeight - other.node.clientHeight;\n      if (otherRange <= 0) return;\n      // Assign first, THEN compare the browser's actual (possibly rounded)\n      // scrollTop to what it was before — never predict equality from the\n      // unrounded `ratio * otherRange` math, since scrollTop is an integer\n      // pixel value and the destination can already sit at that pixel. Only\n      // arm suppression when the write really changed something: if it\n      // didn't, no scroll event will fire to clear the flag, and the\n      // destination's NEXT real user scroll (a single keyboard PageDown/Home\n      // in particular) would otherwise be silently swallowed instead of\n      // propagating to its siblings (#12/#53 review, P2).\n      const previousScrollTop = other.node.scrollTop;\n      other.node.scrollTop = ratio * otherRange;\n      if (other.node.scrollTop !== previousScrollTop) {\n        other.suppressNextScroll = true;\n      }\n    });\n  }, []);\n\n  const state = useMemo<MessageCompareState>(() => ({ syncScroll }), [syncScroll]);\n  const actions = useMemo<MessageCompareActions>(() => ({ setSyncScroll }), [setSyncScroll]);\n  const meta = useMemo<MessageCompareMeta>(() => ({ columns, isMobile }), [columns, isMobile]);\n  const contextValue = useMemo<MessageCompareContextValue>(\n    () => ({ state, actions, meta }),\n    [state, actions, meta],\n  );\n  const internalValue = useMemo<MessageCompareInternalValue>(\n    () => ({ registerColumn, reportScroll }),\n    [registerColumn, reportScroll],\n  );\n\n  return (\n    <MessageCompareContext value={contextValue}>\n      <MessageCompareInternalContext value={internalValue}>\n        {children}\n      </MessageCompareInternalContext>\n    </MessageCompareContext>\n  );\n}\n\n// ── MessageCompare (layout) ───────────────────────────────────────────────────\n\nfunction columnKey(child: ReactElement, index: number): string {\n  return child.key ?? String(index);\n}\n\nexport type MessageCompareProps = Omit<HTMLAttributes<HTMLDivElement>, \"children\"> & {\n  /** `MessageCompareColumn` elements — 2 to 4. */\n  children: ReactNode;\n  columns: MessageCompareColumnsCount;\n  /** Controlled sync-scroll flag. Omit for the uncontrolled default (off). */\n  syncScroll?: boolean;\n  /** Uncontrolled initial value. @default false */\n  defaultSyncScroll?: boolean;\n  onSyncScrollChange?: (value: boolean) => void;\n  /** aria-label for the narrow-viewport tab strip. Defaults to microcopy. */\n  tabsLabel?: string;\n};\n\n/**\n * Responsive side-by-side comparison of 2-4 `MessageCompareColumn`s. Desktop:\n * resizable columns (`ResizablePanelGroup`). Under `md`: a `Tabs` strip, per\n * the issue's named narrow-viewport treatment.\n */\nexport const MessageCompare = forwardRef<HTMLDivElement, MessageCompareProps>(\n  function MessageCompare(\n    {\n      children,\n      columns,\n      syncScroll,\n      defaultSyncScroll,\n      onSyncScrollChange,\n      tabsLabel,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    return (\n      <MessageCompareProvider\n        columns={columns}\n        defaultSyncScroll={defaultSyncScroll}\n        onSyncScrollChange={onSyncScrollChange}\n        syncScroll={syncScroll}\n      >\n        <MessageCompareLayout ref={ref} className={className} tabsLabel={tabsLabel} {...props}>\n          {children}\n        </MessageCompareLayout>\n      </MessageCompareProvider>\n    );\n  },\n);\n\ntype MessageCompareLayoutProps = Omit<HTMLAttributes<HTMLDivElement>, \"children\"> & {\n  children: ReactNode;\n  tabsLabel?: string;\n};\n\nconst MessageCompareLayout = forwardRef<HTMLDivElement, MessageCompareLayoutProps>(\n  function MessageCompareLayout({ children, tabsLabel, className, ...props }, ref) {\n    const { meta } = useMessageCompare();\n    const { t } = useLocale();\n    const items = Children.toArray(children) as ReactElement[];\n\n    if (meta.isMobile) {\n      const firstKey = items[0] ? columnKey(items[0], 0) : undefined;\n      return (\n        <div\n          ref={ref}\n          className={cn(\"flex h-full min-h-0 flex-col\", className)}\n          data-slot=\"message-compare\"\n          {...props}\n        >\n          <Tabs className=\"flex h-full min-h-0 flex-col\" defaultValue={firstKey}>\n            <TabsList\n              aria-label={tabsLabel ?? t(\"ai.messageCompare.tabs\")}\n              className=\"w-full shrink-0\"\n            >\n              {items.map((child, index) => {\n                const key = columnKey(child, index);\n                const props = child.props as { model?: MessageCompareModel };\n                return (\n                  <TabsTrigger className=\"flex-1\" key={key} value={key}>\n                    {props.model?.name ?? key}\n                  </TabsTrigger>\n                );\n              })}\n            </TabsList>\n            {items.map((child, index) => {\n              const key = columnKey(child, index);\n              return (\n                <TabsContent\n                  className=\"mt-2 min-h-0 flex-1 data-[state=active]:flex\"\n                  forceMount\n                  key={key}\n                  value={key}\n                >\n                  {child}\n                </TabsContent>\n              );\n            })}\n          </Tabs>\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"h-full min-h-0\", className)}\n        data-slot=\"message-compare\"\n        {...props}\n      >\n        <ResizablePanelGroup direction=\"horizontal\">\n          {items.map((child, index) => (\n            <Fragment key={columnKey(child, index)}>\n              {index > 0 && <ResizableHandle withHandle />}\n              <ResizablePanel defaultSize={100 / items.length} minSize={15}>\n                {child}\n              </ResizablePanel>\n            </Fragment>\n          ))}\n        </ResizablePanelGroup>\n      </div>\n    );\n  },\n);\n\n// ── MessageCompareColumn ──────────────────────────────────────────────────────\n\nexport type MessageCompareColumnProps = Omit<HTMLAttributes<HTMLDivElement>, \"children\"> & {\n  /** Identifies the column — its `name` becomes the region's accessible name. */\n  model: MessageCompareModel;\n  /** In-flight state for this column's OWN response, independent of siblings. */\n  status?: ChatStatus;\n  /** The consumer's own `Message`/`MessageResponse` composition for this column. */\n  children?: ReactNode;\n};\n\n/**\n * One labelled, independently-scrolling response column. `role=\"region\"` +\n * `aria-label={model.name}` so a screen-reader user can tell which answer\n * they're in (issue #23 a11y requirement).\n */\nexport const MessageCompareColumn = forwardRef<HTMLDivElement, MessageCompareColumnProps>(\n  function MessageCompareColumn({ model, status, children, className, id: idProp, ...props }, ref) {\n    const { registerColumn, reportScroll } = useMessageCompareInternal();\n    const { t } = useLocale();\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n\n    const setScrollRef = useCallback(\n      (node: HTMLDivElement | null) => registerColumn(id, node),\n      [id, registerColumn],\n    );\n    const handleScroll = useCallback(() => reportScroll(id), [id, reportScroll]);\n\n    const isBusy = status === \"streaming\" || status === \"submitted\";\n    const isError = status === \"error\";\n\n    return (\n      <div\n        ref={ref}\n        aria-label={model.name}\n        className={cn(\"flex h-full min-h-0 min-w-0 flex-col\", className)}\n        data-slot=\"message-compare-column\"\n        id={id}\n        role=\"region\"\n        {...props}\n      >\n        {/* header-band-exempt: a column header inside the comparison grid, not shell chrome */}\n        <div\n          className=\"flex shrink-0 items-center justify-between gap-2 border-b px-3 py-2\"\n          data-slot=\"message-compare-column-header\"\n        >\n          <span className=\"truncate text-body font-medium\">{model.name}</span>\n          {isBusy && (\n            <span className=\"shrink-0\" role=\"status\" aria-live=\"polite\">\n              <Shimmer as=\"span\" className=\"text-meta\" duration={1.5}>\n                {t(\"loading\")}\n              </Shimmer>\n            </span>\n          )}\n          {isError && (\n            <span\n              className=\"flex shrink-0 items-center gap-1 text-meta text-destructive-text\"\n              role=\"alert\"\n            >\n              <AlertTriangleIcon aria-hidden=\"true\" className=\"size-3.5\" />\n              {t(\"ai.messageCompare.error\")}\n            </span>\n          )}\n        </div>\n        <div\n          className=\"min-h-0 flex-1 overflow-y-auto p-4 focus-ring-inset\"\n          data-slot=\"message-compare-column-body\"\n          onScroll={handleScroll}\n          ref={setScrollRef}\n          tabIndex={0}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":"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","names":["MessageCompare","MessageCompareLayout","props","MessageCompareColumn"]}

package/dist/chunk-6IQPH2OS.js

@@ -0,0 +1,21 @@
+"use client";
+import {
+  lazyFlowPart
+} from "./chunk-NMVNNO3L.js";
+
+// src/edge.tsx
+import { Suspense } from "react";
+import { jsx } from "react/jsx-runtime";
+var AnimatedImpl = lazyFlowPart((m) => m.EdgeAnimated);
+var TemporaryImpl = lazyFlowPart((m) => m.EdgeTemporary);
+var Animated = (props) => /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(AnimatedImpl, { ...props }) });
+var Temporary = (props) => /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(TemporaryImpl, { ...props }) });
+var Edge = {
+  Animated,
+  Temporary
+};
+
+export {
+  Edge
+};
+//# sourceMappingURL=chunk-6IQPH2OS.js.map

package/dist/chunk-6IQPH2OS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/edge.tsx"],"sourcesContent":["\"use client\";\n\nimport type { EdgeProps } from \"@xyflow/react\";\nimport { Suspense } from \"react\";\n\nimport { lazyFlowPart } from \"./_flow-lazy\";\n\n/**\n * React Flow lives behind a dynamic import — see `_flow-lazy.ts` and ADR 0019.\n * `EdgeProps` above is a TYPE import and erases.\n */\nconst AnimatedImpl = lazyFlowPart<EdgeProps>((m) => m.EdgeAnimated);\nconst TemporaryImpl = lazyFlowPart<EdgeProps>((m) => m.EdgeTemporary);\n\n// Edges render inside React Flow's `<svg>`, so the fallback must be `null` —\n// there is no box to reserve, and the engine chunk is the one the surrounding\n// `<Canvas>` already fetched.\nconst Animated = (props: EdgeProps) => (\n  <Suspense fallback={null}>\n    <AnimatedImpl {...props} />\n  </Suspense>\n);\n\nconst Temporary = (props: EdgeProps) => (\n  <Suspense fallback={null}>\n    <TemporaryImpl {...props} />\n  </Suspense>\n);\n\nexport const Edge = {\n  Animated,\n  Temporary,\n};\n"],"mappings":";;;;;;AAGA,SAAS,gBAAgB;AAgBrB;AARJ,IAAM,eAAe,aAAwB,CAAC,MAAM,EAAE,YAAY;AAClE,IAAM,gBAAgB,aAAwB,CAAC,MAAM,EAAE,aAAa;AAKpE,IAAM,WAAW,CAAC,UAChB,oBAAC,YAAS,UAAU,MAClB,8BAAC,gBAAc,GAAG,OAAO,GAC3B;AAGF,IAAM,YAAY,CAAC,UACjB,oBAAC,YAAS,UAAU,MAClB,8BAAC,iBAAe,GAAG,OAAO,GAC5B;AAGK,IAAM,OAAO;AAAA,EAClB;AAAA,EACA;AACF;","names":[]}