@elabs-ai/components-ai 4.2.0 → 5.1.0

package/dist/chunk-VLNBTOH6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/_lazy-math.ts"],"sourcesContent":["\"use client\";\n\n/**\n * Lazy-loaded replacement for `@streamdown/math`'s eager `math` export.\n *\n * Why this exists\n * ----------------\n * `@streamdown/math` bundles KaTeX (~600 KB unminified) plus `remark-math` and\n * `rehype-katex`. `useStreamdownPlugins()` (`_streamdown-i18n.ts`) used to\n * import it statically, so every consumer of `MessageResponse`/`MarkdownView`/\n * `ReasoningContent` paid for KaTeX in their entry chunk whether or not a\n * single conversation ever contains `$…$`.\n *\n * How it stays correct\n * ---------------------\n * Unlike Mermaid (`_lazy-mermaid.ts`), a remark/rehype `Pluggable` cannot be\n * wrapped in a lazy accessor: `remark-math`'s micromark extension has to be\n * registered on the unified processor BEFORE it parses, so there is no way to\n * hand Streamdown a present-but-deferred math plugin the way `DiagramPlugin`\n * defers its render. Instead:\n *\n *  1. `needsMathPlugin(text)` cheaply sniffs the RAW markdown source for `$…$`\n *     / `\\(…\\)` / `\\[…\\]` delimiters — no parsing, just a regex.\n *  2. `useLazyMathPlugin(text)` returns `undefined` until that sniff is true,\n *     at which point it kicks off `import(\"@streamdown/math\")` and returns the\n *     loaded plugin once it resolves, triggering a re-render.\n *\n * The one user-visible cost: a message whose FIRST rendered chunk already\n * contains math delimiters shows literal `$x^2$` for one paint before the\n * import resolves (typically well under a frame from a warm cache, since the\n * chunk is tiny next to KaTeX's own parse/layout work). Every subsequent\n * message reuses the module-level cache and never re-pays it.\n */\nimport type { MathPlugin } from \"@streamdown/math\";\nimport { useEffect, useState } from \"react\";\n\n/** Cheap, over-inclusive sniff — a false positive just means an unneeded fetch. */\nconst MATH_DELIMITER_RE = /\\$\\$[\\s\\S]*?\\$\\$|\\$[^\\s$][^$\\n]*\\$|\\\\\\(|\\\\\\)|\\\\\\[|\\\\\\]/;\n\n/** Does `text` look like it contains LaTeX math delimiters? */\nexport function needsMathPlugin(text: string): boolean {\n  return MATH_DELIMITER_RE.test(text);\n}\n\n/** Module-level singleton: the plugin (and its KaTeX bytes) load at most once. */\nlet cachedPlugin: MathPlugin | undefined;\nlet loadPromise: Promise<MathPlugin> | undefined;\n\nfunction loadMathPlugin(): Promise<MathPlugin> {\n  loadPromise ??= import(\"@streamdown/math\").then((mod) => {\n    cachedPlugin = mod.math;\n    return cachedPlugin;\n  });\n  return loadPromise;\n}\n\n/**\n * Start fetching the math plugin ahead of time (e.g. once a conversation is\n * known to contain math, or on route entry). Optional; rendering math loads\n * it either way.\n */\nexport const preloadMath = (): void => {\n  void loadMathPlugin();\n};\n\n/**\n * Returns the loaded `MathPlugin` once `text` needs one, else `undefined`\n * (Streamdown treats an absent `plugins.math` slot as \"no math support\" — the\n * delimiters render as literal text until the plugin arrives).\n */\nexport function useLazyMathPlugin(text: string): MathPlugin | undefined {\n  const needed = needsMathPlugin(text);\n  const [plugin, setPlugin] = useState<MathPlugin | undefined>(cachedPlugin);\n\n  useEffect(() => {\n    if (!needed || cachedPlugin) return;\n    let cancelled = false;\n    loadMathPlugin().then((loaded) => {\n      if (!cancelled) setPlugin(loaded);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [needed]);\n\n  if (!needed) return undefined;\n  // `cachedPlugin` covers the case where another instance finished loading\n  // between this component's mount and this render (state update pending).\n  return plugin ?? cachedPlugin;\n}\n"],"mappings":";;;AAkCA,SAAS,WAAW,gBAAgB;AAGpC,IAAM,oBAAoB;AAGnB,SAAS,gBAAgB,MAAuB;AACrD,SAAO,kBAAkB,KAAK,IAAI;AACpC;AAGA,IAAI;AACJ,IAAI;AAEJ,SAAS,iBAAsC;AAC7C,kBAAgB,OAAO,kBAAkB,EAAE,KAAK,CAAC,QAAQ;AACvD,mBAAe,IAAI;AACnB,WAAO;AAAA,EACT,CAAC;AACD,SAAO;AACT;AAOO,IAAM,cAAc,MAAY;AACrC,OAAK,eAAe;AACtB;AAOO,SAAS,kBAAkB,MAAsC;AACtE,QAAM,SAAS,gBAAgB,IAAI;AACnC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAiC,YAAY;AAEzE,YAAU,MAAM;AACd,QAAI,CAAC,UAAU,aAAc;AAC7B,QAAI,YAAY;AAChB,mBAAe,EAAE,KAAK,CAAC,WAAW;AAChC,UAAI,CAAC,UAAW,WAAU,MAAM;AAAA,IAClC,CAAC;AACD,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,MAAI,CAAC,OAAQ,QAAO;AAGpB,SAAO,UAAU;AACnB;","names":[]}

package/dist/chunk-WMDSMSPL.js

@@ -0,0 +1,303 @@
+"use client";
+import {
+  PromptInputCommand,
+  PromptInputCommandEmpty,
+  PromptInputCommandItem,
+  PromptInputCommandList,
+  PromptInputTextarea
+} from "./chunk-SSGJ6MEM.js";
+
+// src/prompt-input-slash.tsx
+import {
+  createContext,
+  forwardRef,
+  use,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  cn,
+  defaultSlashCommandFilter,
+  findTriggerQuery,
+  replaceTriggerRun,
+  stepIndex,
+  useLocale
+} from "@elabs-ai/components-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TRIGGER = "/";
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    }
+  };
+}
+var PromptInputSlashWiringContext = createContext(null);
+var PromptInputSlash = forwardRef(
+  function PromptInputSlash2({
+    commands,
+    value,
+    textareaRef,
+    lineStartOnly = true,
+    filter = defaultSlashCommandFilter,
+    onValueChange,
+    onSelect,
+    onOpenChange,
+    className,
+    children,
+    ...props
+  }, ref) {
+    const { t } = useLocale();
+    const rootRef = useRef(null);
+    const mergedRootRef = useMemo(() => mergeRefs(ref, rootRef), [ref]);
+    const [caret, setCaret] = useState(() => value.length);
+    const pendingCaretRef = useRef(null);
+    const syncCaret = useCallback((element) => {
+      setCaret(element.selectionStart ?? 0);
+    }, []);
+    useLayoutEffect(() => {
+      const position = pendingCaretRef.current;
+      if (position === null) return;
+      pendingCaretRef.current = null;
+      textareaRef.current?.setSelectionRange(position, position);
+    });
+    const boundary = lineStartOnly ? "line-start" : "word";
+    const queryInfo = useMemo(
+      () => findTriggerQuery(value, caret, TRIGGER, { boundary }),
+      [value, caret, boundary]
+    );
+    const [dismissedStart, setDismissedStart] = useState(null);
+    useEffect(() => {
+      if (queryInfo === null && dismissedStart !== null) setDismissedStart(null);
+    }, [queryInfo, dismissedStart]);
+    const open = queryInfo !== null && dismissedStart !== queryInfo.start;
+    const query = open && queryInfo ? queryInfo.query : null;
+    const setOpen = useCallback(
+      (next) => {
+        onOpenChange?.(next);
+        if (!next) setDismissedStart(queryInfo?.start ?? null);
+      },
+      [onOpenChange, queryInfo]
+    );
+    const filtered = useMemo(
+      () => query !== null ? commands.filter((command) => filter(command, query)) : [],
+      [query, commands, filter]
+    );
+    const [activeIndexState, setActiveIndexState] = useState(0);
+    const activeIndex = useMemo(() => {
+      if (filtered.length === 0) return -1;
+      if (activeIndexState < 0 || activeIndexState >= filtered.length) return 0;
+      return activeIndexState;
+    }, [filtered, activeIndexState]);
+    useEffect(() => {
+      setActiveIndexState(0);
+    }, [query]);
+    const activeCommand = activeIndex >= 0 ? filtered[activeIndex] : void 0;
+    const [activeDomId, setActiveDomId] = useState(void 0);
+    useEffect(() => {
+      if (!open) setActiveDomId(void 0);
+    }, [open]);
+    const [listDomId, setListDomId] = useState(void 0);
+    const handleListRef = useCallback((node) => {
+      setListDomId(node?.id);
+    }, []);
+    const handleActiveValueChange = useCallback(
+      (nextValue) => {
+        const index = filtered.findIndex((command) => command.name === nextValue);
+        if (index >= 0) setActiveIndexState(index);
+      },
+      [filtered]
+    );
+    const select = useCallback(
+      (command) => {
+        if (!queryInfo) return;
+        const insertText = `${TRIGGER}${command.name} `;
+        const result = replaceTriggerRun(value, queryInfo.start, caret, insertText);
+        pendingCaretRef.current = result.caret;
+        onValueChange(result);
+        onSelect?.(command);
+      },
+      [queryInfo, value, caret, onValueChange, onSelect]
+    );
+    const close = useCallback(() => setOpen(false), [setOpen]);
+    const handleKeyDown = useCallback(
+      (event) => {
+        if (!open) return;
+        switch (event.key) {
+          case "ArrowDown":
+            event.preventDefault();
+            setActiveIndexState(stepIndex(filtered.length, activeIndex, 1));
+            return;
+          case "ArrowUp":
+            event.preventDefault();
+            setActiveIndexState(stepIndex(filtered.length, activeIndex < 0 ? 0 : activeIndex, -1));
+            return;
+          case "Home":
+            event.preventDefault();
+            setActiveIndexState(0);
+            return;
+          case "End":
+            event.preventDefault();
+            setActiveIndexState(filtered.length - 1);
+            return;
+          case "Enter":
+          case "Tab": {
+            if (activeCommand) {
+              event.preventDefault();
+              select(activeCommand);
+            }
+            return;
+          }
+          case "Escape":
+            event.preventDefault();
+            close();
+            textareaRef.current?.focus();
+            return;
+          default:
+            return;
+        }
+      },
+      [open, filtered.length, activeIndex, activeCommand, select, close, textareaRef]
+    );
+    const wiring = useMemo(
+      () => ({
+        open,
+        listDomId,
+        activeId: activeDomId,
+        textareaRef,
+        syncCaret,
+        onKeyDown: handleKeyDown
+      }),
+      [open, listDomId, activeDomId, textareaRef, syncCaret, handleKeyDown]
+    );
+    return /* @__PURE__ */ jsx(PromptInputSlashWiringContext, { value: wiring, children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: (next) => !next && setOpen(false), children: [
+      /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: mergedRootRef,
+          "data-slot": "prompt-input-slash",
+          className: cn("relative", className),
+          ...props,
+          children
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          "data-slot": "prompt-input-slash-content",
+          role: "presentation",
+          align: "start",
+          side: "top",
+          sideOffset: 8,
+          className: "w-72 p-0",
+          onOpenAutoFocus: (event) => event.preventDefault(),
+          onCloseAutoFocus: (event) => event.preventDefault(),
+          onPointerDownOutside: (event) => {
+            const target = event.detail.originalEvent.target;
+            if (target && textareaRef.current?.contains(target)) event.preventDefault();
+          },
+          children: /* @__PURE__ */ jsx(
+            PromptInputCommand,
+            {
+              shouldFilter: false,
+              value: activeCommand?.name ?? "",
+              onValueChange: handleActiveValueChange,
+              onActiveItemIdChange: setActiveDomId,
+              "data-slot": "prompt-input-slash-command",
+              children: /* @__PURE__ */ jsx(
+                PromptInputCommandList,
+                {
+                  ref: handleListRef,
+                  label: t("ai.promptInputSlash.listLabel"),
+                  "data-slot": "prompt-input-slash-list",
+                  children: filtered.length === 0 ? /* @__PURE__ */ jsx(PromptInputCommandEmpty, { "data-slot": "prompt-input-slash-empty", children: t("ai.promptInputSlash.empty") }) : filtered.map((command) => /* @__PURE__ */ jsxs(
+                    PromptInputCommandItem,
+                    {
+                      value: command.name,
+                      "data-slot": "prompt-input-slash-item",
+                      onSelect: () => select(command),
+                      onMouseDown: (event) => event.preventDefault(),
+                      children: [
+                        command.icon ? /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            "aria-hidden": "true",
+                            className: "flex size-5 shrink-0 items-center justify-center text-muted-foreground [&_svg]:size-4",
+                            children: command.icon
+                          }
+                        ) : null,
+                        /* @__PURE__ */ jsxs("span", { className: "w-28 shrink-0 truncate text-body", children: [
+                          TRIGGER,
+                          command.name
+                        ] }),
+                        command.description ? /* @__PURE__ */ jsx("span", { className: "truncate text-meta text-muted-foreground", children: command.description }) : null
+                      ]
+                    },
+                    command.name
+                  ))
+                }
+              )
+            }
+          )
+        }
+      )
+    ] }) });
+  }
+);
+var PromptInputSlashTextarea = forwardRef(function PromptInputSlashTextarea2({ onChange, onKeyDown, onSelect, onKeyUp, onClick, className, ...props }, ref) {
+  const wiring = use(PromptInputSlashWiringContext);
+  if (!wiring) {
+    throw new Error("PromptInputSlashTextarea must be used inside a <PromptInputSlash>.");
+  }
+  const mergedRef = useMemo(
+    () => mergeRefs(ref, wiring.textareaRef),
+    [ref, wiring.textareaRef]
+  );
+  return /* @__PURE__ */ jsx(
+    PromptInputTextarea,
+    {
+      ref: mergedRef,
+      "data-slot": "prompt-input-slash-textarea",
+      "aria-autocomplete": "list",
+      "aria-haspopup": "listbox",
+      "aria-controls": wiring.open ? wiring.listDomId : void 0,
+      "aria-activedescendant": wiring.activeId,
+      className: cn("relative z-0", className),
+      ...props,
+      onChange: (event) => {
+        wiring.syncCaret(event.currentTarget);
+        onChange?.(event);
+      },
+      onKeyDown: (event) => {
+        wiring.onKeyDown(event);
+        onKeyDown?.(event);
+      },
+      onSelect: (event) => {
+        wiring.syncCaret(event.currentTarget);
+        onSelect?.(event);
+      },
+      onKeyUp: (event) => {
+        wiring.syncCaret(event.currentTarget);
+        onKeyUp?.(event);
+      },
+      onClick: (event) => {
+        wiring.syncCaret(event.currentTarget);
+        onClick?.(event);
+      }
+    }
+  );
+});
+
+export {
+  PromptInputSlash,
+  PromptInputSlashTextarea
+};
+//# sourceMappingURL=chunk-WMDSMSPL.js.map

package/dist/chunk-WMDSMSPL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/prompt-input-slash.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * PromptInputSlash — a slash-command palette for the chat composer.\n *\n * Reuses the generic trigger machinery `@elabs-ai/components-ui` ships at\n * `lib/trigger-query.ts` (`findTriggerQuery` / `replaceTriggerRun`) with\n * `trigger: \"/\"` and `boundary: \"line-start\"` — the same algorithm\n * `MentionInput` runs with `trigger: \"@\"` and the `\"word\"` boundary. See\n * docs/decisions/2026-09-01-brainless-adoption-architecture.md § 5: this\n * package NEVER re-implements trigger detection, and never imports the\n * markdown-scoped slash menu in `@elabs-ai/components-editor` (that would be\n * a sideways edge in the one-way dependency graph).\n *\n * Rendering goes through the existing `PromptInputCommand*` parts (thin\n * `cmdk` wrappers), controlled rather than driven by `cmdk`'s own keyboard\n * handling — the caret must stay in the composer's `<textarea>` the whole\n * time, so every keystroke (Arrow/Home/End/Enter/Escape) is intercepted on\n * the textarea itself and only the *highlighted* `value` is pushed into\n * `PromptInputCommand`. `aria-activedescendant` is read back via\n * `PromptInputCommand`'s existing `onActiveItemIdChange` seam (the doc-block\n * on `PromptInputCommandItem` names this exact composition) rather than by\n * guessing a DOM id — `cmdk` assigns each item's `id` internally and\n * overwrites any id a consumer passes.\n *\n * `SlashCommand`, `defaultSlashCommandFilter` and the index-stepping helper\n * (`stepIndex`, formerly this file's private `step`) are promoted to\n * `@elabs-ai/components-ui` (T0 — the terminal CLI look-alike family's own\n * palette, issue #117, reuses the same model; `ui` is the one legal shared\n * home for two layer-2 DAG siblings — see\n * docs/decisions/2026-09-01-brainless-adoption-architecture.md § 4).\n */\nimport {\n  createContext,\n  forwardRef,\n  use,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ForwardedRef,\n  type HTMLAttributes,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n  type RefObject,\n} from \"react\";\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  cn,\n  defaultSlashCommandFilter,\n  findTriggerQuery,\n  replaceTriggerRun,\n  stepIndex,\n  useLocale,\n  type SlashCommand,\n  type TriggerBoundary,\n} from \"@elabs-ai/components-ui\";\n\nimport {\n  PromptInputCommand,\n  PromptInputCommandEmpty,\n  PromptInputCommandItem,\n  PromptInputCommandList,\n  PromptInputTextarea,\n  type PromptInputTextareaProps,\n} from \"./prompt-input\";\n\nconst TRIGGER = \"/\";\n\n// ---------------------------------------------------------------------------\n// Small local helpers (deliberately NOT shared — see the doc-comments below)\n// ---------------------------------------------------------------------------\n\n/**\n * Merge multiple refs into one callback ref. A private, ~10-line copy rather\n * than a cross-package import: `mergeRefs` lives in `@elabs-ai/components-ui`'s\n * `lib/` but is not exported from its barrel or any subpath today, and adding\n * one is a subpath-export decision this change is not scoped to make (see\n * `.claude/rules/component-api.md` § \"Subpath exports\"). Ordinary React\n * ref-composition boilerplate, not the trigger algorithm this file exists to\n * avoid re-implementing.\n */\ntype MaybeRef<T> = ForwardedRef<T> | undefined;\n\n// prettier-ignore\nfunction mergeRefs<T>(\n  ...refs: Array<MaybeRef<T>>\n) {\n  return (node: T | null) => {\n    for (const ref of refs) {\n      if (typeof ref === \"function\") ref(node);\n      else if (ref) (ref as { current: T | null }).current = node;\n    }\n  };\n}\n\n// ---------------------------------------------------------------------------\n// Public types\n// ---------------------------------------------------------------------------\n//\n// `SlashCommand` and `defaultSlashCommandFilter` moved to\n// `@elabs-ai/components-ui` (`lib/slash-command.ts`) — see the promotion\n// note at the top of this file.\n\nexport interface PromptInputSlashProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"onSelect\" | \"children\"\n> {\n  /** The registered commands the palette offers. */\n  commands: SlashCommand[];\n  /** The composer's current text — must match what the wrapped textarea renders. */\n  value: string;\n  /** Ref to the composer's `<textarea>` (usually the one `PromptInputSlashTextarea` renders). */\n  textareaRef: RefObject<HTMLTextAreaElement | null>;\n  /**\n   * Only trigger at the start of a line (index 0, or right after `\"\\n\"`).\n   * `false` falls back to `MentionInput`'s word-boundary rule.\n   * @default true\n   */\n  lineStartOnly?: boolean;\n  /** Which commands survive the current query. @default defaultSlashCommandFilter */\n  filter?: (command: SlashCommand, query: string) => boolean;\n  /**\n   * A command was chosen — apply the spliced `{ text, caret }` to your own\n   * controlled value (the same shape `replaceTriggerRun` returns). The\n   * splice inserts `\"/\" + command.name + \" \"` in place of the typed query.\n   */\n  onValueChange: (next: { text: string; caret: number }) => void;\n  /** A command was chosen (fires alongside, not instead of, `onValueChange`). */\n  onSelect?: (command: SlashCommand) => void;\n  /** The popup opened or closed. */\n  onOpenChange?: (open: boolean) => void;\n  children: ReactNode;\n}\n\n// ---------------------------------------------------------------------------\n// Wiring context — private plumbing between the root and its `Textarea` part\n// (component-api.md: \"compound components share a context, not props\").\n// ---------------------------------------------------------------------------\n\ninterface PromptInputSlashWiring {\n  open: boolean;\n  /**\n   * The REAL DOM id `cmdk` assigned to the listbox, read back off the\n   * rendered node — `cmdk`'s `CommandList` forces its own internally\n   * generated `id` after spreading consumer props (the same override\n   * `CMDK_OVERRIDDEN_ITEM_PROPS` documents for `CommandItem`), so a\n   * self-minted id passed as a prop is silently dropped.\n   */\n  listDomId?: string;\n  /** DOM id of the highlighted `PromptInputCommandItem`, from `onActiveItemIdChange`. */\n  activeId?: string;\n  textareaRef: RefObject<HTMLTextAreaElement | null>;\n  syncCaret: (element: HTMLTextAreaElement) => void;\n  onKeyDown: (event: ReactKeyboardEvent<HTMLTextAreaElement>) => void;\n}\n\nconst PromptInputSlashWiringContext = createContext<PromptInputSlashWiring | null>(null);\n\n// ---------------------------------------------------------------------------\n// PromptInputSlash (root — provider + Popover, mirrors MentionInput's shape)\n// ---------------------------------------------------------------------------\n\n/**\n * PromptInputSlash — wrap the composer's textarea (rendered via\n * `PromptInputSlashTextarea`) to add a `/`-triggered command palette.\n *\n * ```tsx\n * const textareaRef = useRef<HTMLTextAreaElement>(null);\n * const [text, setText] = useState(\"\");\n *\n * <PromptInputSlash\n *   commands={commands}\n *   value={text}\n *   textareaRef={textareaRef}\n *   onValueChange={({ text }) => setText(text)}\n * >\n *   <PromptInputSlashTextarea value={text} onChange={(e) => setText(e.target.value)} />\n * </PromptInputSlash>\n * ```\n */\nexport const PromptInputSlash = forwardRef<HTMLDivElement, PromptInputSlashProps>(\n  function PromptInputSlash(\n    {\n      commands,\n      value,\n      textareaRef,\n      lineStartOnly = true,\n      filter = defaultSlashCommandFilter,\n      onValueChange,\n      onSelect,\n      onOpenChange,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) {\n    const { t } = useLocale();\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const mergedRootRef = useMemo(() => mergeRefs<HTMLDivElement>(ref, rootRef), [ref]);\n\n    // ------------------------------------------------------------------\n    // Caret — tracked from the wrapped textarea's own DOM events, exactly\n    // like `MentionInput`'s `syncCaret`/`applyCaret` pair.\n    // ------------------------------------------------------------------\n    const [caret, setCaret] = useState(() => value.length);\n    const pendingCaretRef = useRef<number | null>(null);\n\n    const syncCaret = useCallback((element: HTMLTextAreaElement) => {\n      setCaret(element.selectionStart ?? 0);\n    }, []);\n\n    // Post-commit pass: only after `value` has actually re-rendered into the\n    // DOM can the caret be restored — see MentionInput's identical comment.\n    useLayoutEffect(() => {\n      const position = pendingCaretRef.current;\n      if (position === null) return;\n      pendingCaretRef.current = null;\n      // `setSelectionRange` fires a native `select` event, which\n      // `PromptInputSlashTextarea`'s `onSelect` handler already routes to\n      // `syncCaret` — no need to call `setCaret` here too (mirrors\n      // `MentionInput`'s identical caret-restore effect).\n      textareaRef.current?.setSelectionRange(position, position);\n    });\n\n    // ------------------------------------------------------------------\n    // Query / open state\n    // ------------------------------------------------------------------\n    const boundary: TriggerBoundary = lineStartOnly ? \"line-start\" : \"word\";\n\n    const queryInfo = useMemo(\n      () => findTriggerQuery(value, caret, TRIGGER, { boundary }),\n      [value, caret, boundary],\n    );\n\n    // Escape (and an outside dismissal) suppress the popup for the run it was\n    // dismissed on, without touching the text — same rationale as MentionInput.\n    const [dismissedStart, setDismissedStart] = useState<number | null>(null);\n    useEffect(() => {\n      if (queryInfo === null && dismissedStart !== null) setDismissedStart(null);\n    }, [queryInfo, dismissedStart]);\n\n    const open = queryInfo !== null && dismissedStart !== queryInfo.start;\n    const query = open && queryInfo ? queryInfo.query : null;\n\n    const setOpen = useCallback(\n      (next: boolean) => {\n        onOpenChange?.(next);\n        if (!next) setDismissedStart(queryInfo?.start ?? null);\n      },\n      [onOpenChange, queryInfo],\n    );\n\n    // ------------------------------------------------------------------\n    // Filtering + highlight\n    // ------------------------------------------------------------------\n    const filtered = useMemo(\n      () => (query !== null ? commands.filter((command) => filter(command, query)) : []),\n      [query, commands, filter],\n    );\n\n    const [activeIndexState, setActiveIndexState] = useState(0);\n\n    // Resolved DURING render, never repaired in an effect, so a stale index\n    // from before a filter keystroke can never reach the DOM — see the\n    // identical rationale in `MentionInput`'s `activeIndex` docblock.\n    const activeIndex = useMemo(() => {\n      if (filtered.length === 0) return -1;\n      if (activeIndexState < 0 || activeIndexState >= filtered.length) return 0;\n      return activeIndexState;\n    }, [filtered, activeIndexState]);\n\n    useEffect(() => {\n      setActiveIndexState(0);\n    }, [query]);\n\n    const activeCommand = activeIndex >= 0 ? filtered[activeIndex] : undefined;\n    const [activeDomId, setActiveDomId] = useState<string | undefined>(undefined);\n\n    // The listbox lives inside `PopoverContent`, which UNMOUNTS on close — its\n    // `onActiveItemIdChange` never fires again to report \"no active item\", so\n    // without this the textarea would keep pointing `aria-activedescendant`\n    // at a node that no longer exists.\n    useEffect(() => {\n      if (!open) setActiveDomId(undefined);\n    }, [open]);\n\n    // The REAL DOM id `cmdk` assigns to the listbox (see `listDomId`'s\n    // docblock on `PromptInputSlashWiring`) — read off the rendered node\n    // rather than trusted from a prop we pass in, since `cmdk` overwrites it.\n    const [listDomId, setListDomId] = useState<string | undefined>(undefined);\n    const handleListRef = useCallback((node: HTMLDivElement | null) => {\n      setListDomId(node?.id);\n    }, []);\n\n    // `PromptInputCommand` is controlled (`value=`), so `cmdk`'s own pointer\n    // hover / mount-time auto-select report back here instead of self-applying\n    // — keep mouse and keyboard highlighting as one source of truth.\n    const handleActiveValueChange = useCallback(\n      (nextValue: string) => {\n        const index = filtered.findIndex((command) => command.name === nextValue);\n        if (index >= 0) setActiveIndexState(index);\n      },\n      [filtered],\n    );\n\n    // ------------------------------------------------------------------\n    // Actions\n    // ------------------------------------------------------------------\n    const select = useCallback(\n      (command: SlashCommand) => {\n        if (!queryInfo) return;\n        const insertText = `${TRIGGER}${command.name} `;\n        const result = replaceTriggerRun(value, queryInfo.start, caret, insertText);\n        pendingCaretRef.current = result.caret;\n        onValueChange(result);\n        onSelect?.(command);\n      },\n      [queryInfo, value, caret, onValueChange, onSelect],\n    );\n\n    const close = useCallback(() => setOpen(false), [setOpen]);\n\n    const handleKeyDown = useCallback(\n      (event: ReactKeyboardEvent<HTMLTextAreaElement>) => {\n        if (!open) return;\n        switch (event.key) {\n          case \"ArrowDown\":\n            event.preventDefault();\n            setActiveIndexState(stepIndex(filtered.length, activeIndex, 1));\n            return;\n          case \"ArrowUp\":\n            event.preventDefault();\n            setActiveIndexState(stepIndex(filtered.length, activeIndex < 0 ? 0 : activeIndex, -1));\n            return;\n          case \"Home\":\n            event.preventDefault();\n            setActiveIndexState(0);\n            return;\n          case \"End\":\n            event.preventDefault();\n            setActiveIndexState(filtered.length - 1);\n            return;\n          case \"Enter\":\n          case \"Tab\": {\n            if (activeCommand) {\n              event.preventDefault();\n              select(activeCommand);\n            }\n            return;\n          }\n          case \"Escape\":\n            event.preventDefault();\n            close();\n            textareaRef.current?.focus();\n            return;\n          default:\n            return;\n        }\n      },\n      [open, filtered.length, activeIndex, activeCommand, select, close, textareaRef],\n    );\n\n    const wiring = useMemo<PromptInputSlashWiring>(\n      () => ({\n        open,\n        listDomId,\n        activeId: activeDomId,\n        textareaRef,\n        syncCaret,\n        onKeyDown: handleKeyDown,\n      }),\n      [open, listDomId, activeDomId, textareaRef, syncCaret, handleKeyDown],\n    );\n\n    return (\n      <PromptInputSlashWiringContext value={wiring}>\n        <Popover open={open} onOpenChange={(next) => !next && setOpen(false)}>\n          <PopoverAnchor asChild>\n            <div\n              ref={mergedRootRef}\n              data-slot=\"prompt-input-slash\"\n              className={cn(\"relative\", className)}\n              {...props}\n            >\n              {children}\n            </div>\n          </PopoverAnchor>\n          <PopoverContent\n            data-slot=\"prompt-input-slash-content\"\n            // A plain container, not a dialog — the listbox inside carries all\n            // the semantics (same rationale as `MentionInputContent`).\n            role=\"presentation\"\n            align=\"start\"\n            side=\"top\"\n            sideOffset={8}\n            className=\"w-72 p-0\"\n            onOpenAutoFocus={(event) => event.preventDefault()}\n            onCloseAutoFocus={(event) => event.preventDefault()}\n            onPointerDownOutside={(event) => {\n              // Clicking the field itself only moves the caret; it must not\n              // count as a dismissal, or the popup would fight the caret it\n              // depends on (same rationale as `MentionInputContent`).\n              const target = event.detail.originalEvent.target as Node | null;\n              if (target && textareaRef.current?.contains(target)) event.preventDefault();\n            }}\n          >\n            <PromptInputCommand\n              shouldFilter={false}\n              value={activeCommand?.name ?? \"\"}\n              onValueChange={handleActiveValueChange}\n              onActiveItemIdChange={setActiveDomId}\n              data-slot=\"prompt-input-slash-command\"\n            >\n              <PromptInputCommandList\n                ref={handleListRef}\n                // `cmdk`'s `CommandList` reads its accessible name off its own\n                // `label` prop (defaulting to \"Suggestions\"), not `aria-label`\n                // — an `aria-label` prop would land in the spread `cmdk`\n                // overwrites, same as the `id` it also owns.\n                label={t(\"ai.promptInputSlash.listLabel\")}\n                data-slot=\"prompt-input-slash-list\"\n              >\n                {filtered.length === 0 ? (\n                  <PromptInputCommandEmpty data-slot=\"prompt-input-slash-empty\">\n                    {t(\"ai.promptInputSlash.empty\")}\n                  </PromptInputCommandEmpty>\n                ) : (\n                  filtered.map((command) => (\n                    <PromptInputCommandItem\n                      key={command.name}\n                      value={command.name}\n                      data-slot=\"prompt-input-slash-item\"\n                      onSelect={() => select(command)}\n                      // The field keeps focus — select on mousedown, before a\n                      // click on a non-focusable row could ever move it.\n                      onMouseDown={(event) => event.preventDefault()}\n                    >\n                      {command.icon ? (\n                        <span\n                          aria-hidden=\"true\"\n                          className=\"flex size-5 shrink-0 items-center justify-center text-muted-foreground [&_svg]:size-4\"\n                        >\n                          {command.icon}\n                        </span>\n                      ) : null}\n                      {/* Fixed-width name column: the selection moving never\n                          shifts the description text under the user's eyes. */}\n                      <span className=\"w-28 shrink-0 truncate text-body\">\n                        {TRIGGER}\n                        {command.name}\n                      </span>\n                      {command.description ? (\n                        <span className=\"truncate text-meta text-muted-foreground\">\n                          {command.description}\n                        </span>\n                      ) : null}\n                    </PromptInputCommandItem>\n                  ))\n                )}\n              </PromptInputCommandList>\n            </PromptInputCommand>\n          </PopoverContent>\n        </Popover>\n      </PromptInputSlashWiringContext>\n    );\n  },\n);\n\n// ---------------------------------------------------------------------------\n// PromptInputSlashTextarea\n// ---------------------------------------------------------------------------\n\nexport type PromptInputSlashTextareaProps = PromptInputTextareaProps;\n\n/**\n * The composer's `<textarea>`, carrying the combobox semantics the palette\n * needs. A thin wrapper around `PromptInputTextarea` — every prop you'd pass\n * that component still works; this one additionally merges in the palette's\n * `ref`, caret tracking and `aria-activedescendant`.\n *\n * Must be rendered inside a `<PromptInputSlash>`.\n */\nexport const PromptInputSlashTextarea = forwardRef<\n  HTMLTextAreaElement,\n  PromptInputSlashTextareaProps\n>(function PromptInputSlashTextarea(\n  { onChange, onKeyDown, onSelect, onKeyUp, onClick, className, ...props },\n  ref,\n) {\n  const wiring = use(PromptInputSlashWiringContext);\n  if (!wiring) {\n    throw new Error(\"PromptInputSlashTextarea must be used inside a <PromptInputSlash>.\");\n  }\n  const mergedRef = useMemo(\n    () => mergeRefs<HTMLTextAreaElement>(ref, wiring.textareaRef),\n    [ref, wiring.textareaRef],\n  );\n\n  return (\n    <PromptInputTextarea\n      ref={mergedRef}\n      data-slot=\"prompt-input-slash-textarea\"\n      aria-autocomplete=\"list\"\n      aria-haspopup=\"listbox\"\n      // Only while the popup is mounted: the listbox lives in a Radix portal\n      // that unmounts on close, and an `aria-controls` pointing at a removed\n      // node is a dangling reference (same rationale as `MentionInputTextarea`).\n      aria-controls={wiring.open ? wiring.listDomId : undefined}\n      aria-activedescendant={wiring.activeId}\n      className={cn(\"relative z-0\", className)}\n      {...props}\n      onChange={(event) => {\n        wiring.syncCaret(event.currentTarget);\n        onChange?.(event);\n      }}\n      onKeyDown={(event) => {\n        wiring.onKeyDown(event);\n        onKeyDown?.(event);\n      }}\n      onSelect={(event) => {\n        wiring.syncCaret(event.currentTarget);\n        onSelect?.(event);\n      }}\n      onKeyUp={(event) => {\n        wiring.syncCaret(event.currentTarget);\n        onKeyUp?.(event);\n      }}\n      onClick={(event) => {\n        wiring.syncCaret(event.currentTarget);\n        onClick?.(event);\n      }}\n    />\n  );\n});\n"],"mappings":"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","names":["PromptInputSlash","PromptInputSlashTextarea"]}

package/dist/chunk-WU5BLGTF.js

@@ -0,0 +1,149 @@
+"use client";
+import {
+  Reasoning,
+  ReasoningContent,
+  ReasoningTrigger
+} from "./chunk-X47QMM6K.js";
+import {
+  Tool,
+  ToolContent,
+  ToolHeader,
+  ToolInput,
+  ToolOutput,
+  statusFromToolState
+} from "./chunk-PTWCTSZL.js";
+import {
+  buildPartGroups,
+  defaultPartStatus,
+  groupPartByType,
+  partsFingerprint
+} from "./chunk-YSKD7UXX.js";
+
+// src/grouped-parts.tsx
+import { Fragment, useMemo } from "react";
+import { BrainIcon, ChevronDownIcon } from "lucide-react";
+import {
+  Badge,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+function DefaultGroup({
+  status,
+  count,
+  children
+}) {
+  const running = status === "running";
+  return /* @__PURE__ */ jsxs(Collapsible, { defaultOpen: running, className: "not-prose w-full rounded-md border border-border", children: [
+    /* @__PURE__ */ jsxs(
+      CollapsibleTrigger,
+      {
+        className: cn(
+          "group flex w-full items-center gap-2 p-3 text-body text-muted-foreground",
+          "transition-colors duration-fast ease-standard hover:text-foreground motion-reduce:transition-none",
+          "focus-ring-inset"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(BrainIcon, { "aria-hidden": "true", className: "size-4 shrink-0" }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 text-start", children: running ? "Working\u2026" : "Thought process" }),
+          count > 0 && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "shrink-0", children: count }),
+          /* @__PURE__ */ jsx(
+            ChevronDownIcon,
+            {
+              "aria-hidden": "true",
+              className: "size-4 shrink-0 transition-transform group-data-[state=open]:rotate-180 motion-reduce:transition-none"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(CollapsibleContent, { className: "space-y-3 p-3 pt-0", children })
+  ] });
+}
+function defaultRenderPart(args) {
+  if (args.isGroup) {
+    return /* @__PURE__ */ jsx(DefaultGroup, { status: args.status, count: args.indices?.length ?? 0, children: args.children });
+  }
+  const part = args.part;
+  const streaming = args.status === "running";
+  if (part.type === "reasoning" || part.type.startsWith("reasoning")) {
+    const text = typeof part.text === "string" ? part.text : "";
+    return /* @__PURE__ */ jsxs(Reasoning, { isStreaming: streaming, defaultOpen: streaming, children: [
+      /* @__PURE__ */ jsx(ReasoningTrigger, {}),
+      /* @__PURE__ */ jsx(ReasoningContent, { children: text })
+    ] });
+  }
+  if (part.type.startsWith("tool-") || part.type === "dynamic-tool") {
+    const p = part;
+    const headerProps = {
+      type: p.type,
+      state: p.state ?? "input-available",
+      toolName: p.type === "dynamic-tool" ? p.toolName : void 0
+    };
+    const toolStreaming = statusFromToolState(p.state ?? "input-available") === "pending";
+    return /* @__PURE__ */ jsxs(Tool, { children: [
+      /* @__PURE__ */ jsx(ToolHeader, { ...headerProps }),
+      /* @__PURE__ */ jsxs(ToolContent, { children: [
+        p.input !== void 0 && /* @__PURE__ */ jsx(ToolInput, { input: p.input }),
+        (toolStreaming || p.output !== void 0 || Boolean(p.errorText)) && /* @__PURE__ */ jsx(
+          ToolOutput,
+          {
+            output: p.output,
+            errorText: p.errorText ?? void 0,
+            isStreaming: toolStreaming
+          }
+        )
+      ] })
+    ] });
+  }
+  if (part.type === "text") {
+    const text = typeof part.text === "string" ? part.text : "";
+    return /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-body text-foreground", children: text });
+  }
+  return null;
+}
+function GroupedParts({
+  parts,
+  groupBy = groupPartByType(),
+  getStatus,
+  children,
+  className,
+  ...props
+}) {
+  const fingerprint = partsFingerprint(parts, getStatus);
+  const tree = useMemo(
+    () => buildPartGroups(parts, groupBy, getStatus),
+    // Rebuild only on a structural change; `parts`/`groupBy`/`getStatus` identity
+    // may churn per render, but the fingerprint is the real dependency.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [fingerprint, groupBy, getStatus]
+  );
+  const renderPart = children ?? defaultRenderPart;
+  const statusOf = (part) => getStatus?.(part) ?? defaultPartStatus(part);
+  const renderNode = (node) => {
+    if (node.kind === "leaf") {
+      return /* @__PURE__ */ jsx(Fragment, { children: renderPart({
+        part: node.part,
+        isGroup: false,
+        status: statusOf(node.part),
+        index: node.index
+      }) }, node.key);
+    }
+    const kids = node.children.map(renderNode);
+    return /* @__PURE__ */ jsx(Fragment, { children: renderPart({
+      part: node.group,
+      isGroup: true,
+      status: node.group.status,
+      indices: node.group.indices,
+      children: /* @__PURE__ */ jsx(Fragment2, { children: kids })
+    }) }, node.key);
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col gap-3", className), ...props, children: tree.map(renderNode) });
+}
+
+export {
+  GroupedParts
+};
+//# sourceMappingURL=chunk-WU5BLGTF.js.map

package/dist/chunk-WU5BLGTF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/grouped-parts.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * GroupedParts — renders an ordered part list, folding adjacent reasoning/tool\n * parts into collapsible traces (see `part-groups.ts` for the pure engine).\n *\n * A render-prop switches on `part.type`. Group nodes arrive as synthetic\n * `{ type: \"group-…\", status, indices }` with their rendered `children`; real\n * parts arrive as leaves. When no render-prop is given, sensible defaults\n * integrate the existing `Reasoning` / `Tool` components (and a collapsible\n * trace for groups). It is presentational only — the grouping is a client-side\n * view transform, never a model output format.\n *\n * NOTE: this is a generic function component (not `forwardRef`) because the\n * render-prop is generic over the part type `T`; `forwardRef` erases generics.\n */\n\nimport { Fragment, useMemo, type ComponentProps, type HTMLAttributes, type ReactNode } from \"react\";\nimport { BrainIcon, ChevronDownIcon } from \"lucide-react\";\nimport {\n  Badge,\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\n\nimport { Reasoning, ReasoningContent, ReasoningTrigger } from \"./reasoning\";\nimport {\n  Tool,\n  ToolContent,\n  ToolHeader,\n  ToolInput,\n  ToolOutput,\n  statusFromToolState,\n  type ToolPart,\n} from \"./tool\";\nimport {\n  buildPartGroups,\n  defaultPartStatus,\n  groupPartByType,\n  partsFingerprint,\n  type GetPartStatus,\n  type GroupablePart,\n  type GroupBy,\n  type GroupedNode,\n  type GroupStatus,\n  type PartGroupNode,\n} from \"./part-groups\";\n\n// ─── Render-prop args ─────────────────────────────────────────────────────────\n\nexport interface GroupedPartRenderArgs<T extends GroupablePart> {\n  /** The real part (leaf) or the synthetic group node. */\n  part: T | PartGroupNode;\n  /** True when `part` is a synthetic group node. */\n  isGroup: boolean;\n  /** The rendered subtree — group nodes only. */\n  children?: ReactNode;\n  /** Rolled-up status (groups) or the part's status (leaves). */\n  status: GroupStatus;\n  /** Original part indices under this group (groups only). */\n  indices?: number[];\n  /** Original part index (leaves only). */\n  index?: number;\n}\n\nexport type GroupedPartRenderer<T extends GroupablePart> = (\n  args: GroupedPartRenderArgs<T>,\n) => ReactNode;\n\n// ─── Default renderers ────────────────────────────────────────────────────────\n\nfunction DefaultGroup({\n  status,\n  count,\n  children,\n}: {\n  status: GroupStatus;\n  count: number;\n  children: ReactNode;\n}) {\n  const running = status === \"running\";\n  return (\n    <Collapsible defaultOpen={running} className=\"not-prose w-full rounded-md border border-border\">\n      <CollapsibleTrigger\n        className={cn(\n          \"group flex w-full items-center gap-2 p-3 text-body text-muted-foreground\",\n          \"transition-colors duration-fast ease-standard hover:text-foreground motion-reduce:transition-none\",\n          \"focus-ring-inset\",\n        )}\n      >\n        <BrainIcon aria-hidden=\"true\" className=\"size-4 shrink-0\" />\n        <span className=\"flex-1 text-start\">{running ? \"Working…\" : \"Thought process\"}</span>\n        {count > 0 && (\n          <Badge variant=\"secondary\" className=\"shrink-0\">\n            {count}\n          </Badge>\n        )}\n        <ChevronDownIcon\n          aria-hidden=\"true\"\n          className=\"size-4 shrink-0 transition-transform group-data-[state=open]:rotate-180 motion-reduce:transition-none\"\n        />\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"space-y-3 p-3 pt-0\">{children}</CollapsibleContent>\n    </Collapsible>\n  );\n}\n\nfunction defaultRenderPart<T extends GroupablePart>(args: GroupedPartRenderArgs<T>): ReactNode {\n  if (args.isGroup) {\n    return (\n      <DefaultGroup status={args.status} count={args.indices?.length ?? 0}>\n        {args.children}\n      </DefaultGroup>\n    );\n  }\n\n  const part = args.part as GroupablePart;\n  const streaming = args.status === \"running\";\n\n  // Reasoning → the branded Reasoning disclosure.\n  if (part.type === \"reasoning\" || part.type.startsWith(\"reasoning\")) {\n    const text = typeof part.text === \"string\" ? part.text : \"\";\n    return (\n      <Reasoning isStreaming={streaming} defaultOpen={streaming}>\n        <ReasoningTrigger />\n        <ReasoningContent>{text}</ReasoningContent>\n      </Reasoning>\n    );\n  }\n\n  // Tool call → the branded Tool disclosure (defensive: parts are plain objects).\n  if (part.type.startsWith(\"tool-\") || part.type === \"dynamic-tool\") {\n    const p = part as Record<string, unknown>;\n    const headerProps = {\n      type: p.type,\n      state: p.state ?? \"input-available\",\n      toolName: p.type === \"dynamic-tool\" ? p.toolName : undefined,\n    } as ComponentProps<typeof ToolHeader>;\n    // The output area must reflect an in-flight call, not just a settled one\n    // (loading-states.md / #269): a `tool-*` part in `input-streaming` (or\n    // `input-available`, before output/error land) is \"pending\", so\n    // `ToolOutput` renders its skeleton instead of nothing.\n    const toolStreaming =\n      statusFromToolState((p.state as ToolPart[\"state\"]) ?? \"input-available\") === \"pending\";\n    return (\n      <Tool>\n        <ToolHeader {...headerProps} />\n        <ToolContent>\n          {p.input !== undefined && <ToolInput input={p.input} />}\n          {(toolStreaming || p.output !== undefined || Boolean(p.errorText)) && (\n            <ToolOutput\n              output={p.output}\n              errorText={(p.errorText as string) ?? undefined}\n              isStreaming={toolStreaming}\n            />\n          )}\n        </ToolContent>\n      </Tool>\n    );\n  }\n\n  // Text → plain prose (consumers usually override with a markdown renderer).\n  if (part.type === \"text\") {\n    const text = typeof part.text === \"string\" ? part.text : \"\";\n    return <div className=\"whitespace-pre-wrap text-body text-foreground\">{text}</div>;\n  }\n\n  // Unknown leaf types: nothing by default (supply a render-prop for coverage).\n  return null;\n}\n\n// ─── GroupedParts ─────────────────────────────────────────────────────────────\n\nexport interface GroupedPartsProps<T extends GroupablePart> extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"children\"\n> {\n  /** The ordered message parts to render. */\n  parts: readonly T[];\n  /** How to group parts. @default `groupPartByType()` */\n  groupBy?: GroupBy<T>;\n  /** Extract a part's status (drives group rollup + streaming affordances). */\n  getStatus?: GetPartStatus<T>;\n  /** Render-prop switching on `part.type`. Omit to use the default renderers. */\n  children?: GroupedPartRenderer<T>;\n}\n\n/**\n * Renders `parts`, coalescing adjacent grouped parts into collapsible traces.\n * The tree only rebuilds when the parts' identity/type/status fingerprint\n * changes, so streaming token updates don't remount rows.\n */\nexport function GroupedParts<T extends GroupablePart>({\n  parts,\n  groupBy = groupPartByType<T>(),\n  getStatus,\n  children,\n  className,\n  ...props\n}: GroupedPartsProps<T>) {\n  const fingerprint = partsFingerprint(parts, getStatus);\n  const tree = useMemo<GroupedNode<T>[]>(\n    () => buildPartGroups(parts, groupBy, getStatus),\n    // Rebuild only on a structural change; `parts`/`groupBy`/`getStatus` identity\n    // may churn per render, but the fingerprint is the real dependency.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [fingerprint, groupBy, getStatus],\n  );\n\n  const renderPart = children ?? defaultRenderPart<T>;\n  const statusOf = (part: T): GroupStatus => getStatus?.(part) ?? defaultPartStatus(part);\n\n  const renderNode = (node: GroupedNode<T>): ReactNode => {\n    if (node.kind === \"leaf\") {\n      return (\n        <Fragment key={node.key}>\n          {renderPart({\n            part: node.part,\n            isGroup: false,\n            status: statusOf(node.part),\n            index: node.index,\n          })}\n        </Fragment>\n      );\n    }\n    const kids = node.children.map(renderNode);\n    return (\n      <Fragment key={node.key}>\n        {renderPart({\n          part: node.group,\n          isGroup: true,\n          status: node.group.status,\n          indices: node.group.indices,\n          children: <>{kids}</>,\n        })}\n      </Fragment>\n    );\n  };\n\n  return (\n    <div className={cn(\"flex w-full flex-col gap-3\", className)} {...props}>\n      {tree.map(renderNode)}\n    </div>\n  );\n}\n"],"mappings":"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","names":["Fragment"]}