@adea-ai/ui 0.63.3 → 0.64.0

package/README.md

@@ -153,6 +153,52 @@ The toolbar switches theme, accent, typeface and density live, which is the
 fastest way to see how a component behaves across the catalogue rather than in
 one theme.
 
+## Busy composer action
+
+Square icon controls use the control-height tokens through the Tailwind `--size`
+mapping; `--spacing-control-*` remains the separate inline-padding ladder.
+Text controls, icon buttons and toggles share the same height in both densities.
+Dimensions remain rem-based and follow the consumer's root font size. The browser
+geometry lane checks all six rungs, heights and padding under both themes/densities.
+
+`BusySendButton` translates KiroCrew's split fire/mode-picker composition. Pass
+controlled `mode`, `onModeChange` and `onFire`. `disabled` prevents firing while
+leaving mode choice available before typing; `selectionDisabled` gates choosing.
+Inject `unavailable` reasons for unsupported or unauthorized modes: rows remain
+visible, and the selected action cannot fire. Supply `alternateActionHint` only
+when the host implements the described keyboard chord. The component adds no
+keyboard chord, preference storage, runtime command or queue. Persistence and
+same-session preference synchronization remain application-owned.
+
+Kobalte owns the menu and focus lifecycle. Its Tab prevention lacks row cycling,
+so a menu-scoped donor translation cycles enabled rows without a document listener.
+Stories cover before-typing, working,
+unavailable and read-only states. `bun run test:components` checks the isolated
+Solid composition headlessly in Chromium and WebKit. Full Chat composition,
+packed distribution and real consumer/native acceptance remain separate gates.
+
+## Transcript follow
+
+`ConversationSurface` follows streamed text, earlier-row growth, turn collapse
+and pane resizing using the KiroCrew plain-scroller decision contract. A
+deliberate upward scroll releases follow, including small moves near the bottom.
+Returning to the bottom or choosing **Jump to latest** re-arms it; the action
+does not estimate unread messages from pixel distance. Instant pins keep
+self-scroll attribution synchronized. Keyboard jumping returns focus to the
+transcript when its jump control disappears; automatic pins never move focus.
+
+`threshold` controls jump-button visibility (80px by default), independently of
+follow intent. `follow={false}` is fully inert: positioning belongs to the host,
+with no observer or mount pin. Re-enabling it explicitly re-arms at the bottom;
+it is not an automatic restore-and-resume flag. An optional `resetKey` also
+re-arms follow when that identity changes. Canonical
+session identity, durable restoration and virtualized transcript windows remain
+application-owned. `ref` and `onScroll` still reach the inner scroller.
+
+`bun run test:components` checks the built component in Chromium and WebKit.
+The `SurfaceFollowing` story exercises streaming, collapse and pane resizing;
+source/license/test provenance is recorded in `NOTICE`.
+
 ## Composer keyboard behavior
 
 `MessageComposer` preserves native IME candidate commits and suppresses sending

package/dist/NOTICE

@@ -49,6 +49,60 @@ Origin UI / coss (AGPL-3.0-or-later) was consulted for visual ideas only. No
 code, class string, or asset from that project is reproduced here, because its
 licence is incompatible with this distribution.
 
+Busy composer action translated from KiroCrew
+--------------------------------------------
+Original: website/src/components/BusySendButton.tsx
+Also translated: website/src/hooks/useMenuKeyboard.ts (enabled-row Tab cycle)
+Revision: 283e136c0f902e965a535a7c9548c57c7504fed0
+Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+This product includes software developed at Amazon.com, Inc.
+Apache License, Version 2.0 (see LICENSE).
+Destination: packages/ui/src/components/conversation/busy-send-button.tsx
+
+The split fire/mode-picker structure, descriptions, independent disabled-fire
+state, selected radio treatment and conditional alternate-action hint are
+substantially translated to Solid and the shared design system. Kobalte owns
+portal positioning, arrow navigation, dismissal and focus restoration. Its
+Tab prevention lacks row cycling, so the donor cycle is translated as a scoped
+menu handler over enabled rows; no document listener or manual focus trap.
+Donor per-slot storage/migration/broadcast, i18n/platform lookup, React runtime,
+manual portal and document listeners are not copied. Applications inject mode,
+action and unavailable reasons. No runtime queue or force-reset authority added.
+Nearest tests: BusySendButton.menuKeyboard.test.tsx and
+BusySendButton.slotScope.test.tsx; controlled mode replaces donor storage tests,
+while keyboard/focus expectations are exercised in Chromium and WebKit.
+
+## Plain transcript follow translated from KiroCrew
+
+`packages/ui/src/components/conversation/scroll-follow-core.ts`,
+`scroll-follow.ts` and ConversationSurface substantially translate the plain
+scroller lifecycle in `website/src/app-sdk/useChatScrollFollow.ts` and its pure
+`website/src/hooks/virtualizer/FollowController.ts` decisions, pinned at
+`283e136c0f902e965a535a7c9548c57c7504fed0`.
+
+    Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+    This product includes software developed at Amazon.com, Inc.
+    (https://www.amazon.com/). Licensed under the Apache License, Version 2.0.
+
+Retained: separate follow intent and jump visibility, synchronous scroll-up race
+fencing, direction-aware re-engagement, self-scroll attribution, DPR tolerance,
+content growth/collapse and viewport shrink/growth distinctions, instant pins,
+explicit disabled/reset behavior and content/viewport observer cleanup. Solid
+ownership replaces React refs/effects. Applications retain identity, durable
+scroll restoration and virtualized row measurement/anchor authority.
+
+The jump label follows `website/src/app-sdk/ChatScrollChrome.tsx`'s action-only
+contract; pixel distance cannot establish an unread message count. The existing
+shared button appearance and configurable 80px visibility default are retained.
+Keyboard jumping returns focus to the focusable transcript as its jump control
+disappears; this hardens a donor edge case without moving focus during automatic
+pins. No donor edge-fade styling, React runtime, virtualizer, asset, font or session
+store is copied. Tests translate applicable cases from
+`website/src/test/useChatScrollFollow.test.tsx` and `FollowController.test.ts`;
+Bun/browser integration and deterministic bounded grids replace React/jsdom,
+Vitest and fast-check without adding dependencies. The full Chat product
+composition and application adoption remain separate gates.
+
 ## Composer IME input ownership translated from KiroCrew
 
 `packages/ui/src/components/conversation/ime-guard.ts` and its MessageComposer

package/dist/components/conversation/busy-send-button.d.ts

@@ -0,0 +1,28 @@
+export type BusySendMode = 'steer' | 'queue';
+export type BusySendButtonProps = {
+    mode: BusySendMode;
+    onModeChange: (mode: BusySendMode) => void;
+    /** Executes only the selected action. The host owns the draft and command. */
+    onFire: () => void;
+    /** An empty draft or pending delivery disables fire, but not choosing a mode. */
+    disabled?: boolean;
+    /** Disable mode selection when the host has no authority to change preferences. */
+    selectionDisabled?: boolean;
+    /** Host capability/authority failures: unavailable rows remain visible. */
+    unavailable?: Partial<Record<BusySendMode, string>>;
+    /** Supply only when the host implements this alternate-action keyboard chord. */
+    alternateActionHint?: string;
+};
+/**
+ * Kiro's split action/menu composition, with app-owned mode and availability.
+ * Picking a mode never fires it. Persistence, migration and same-session
+ * broadcasts belong to the consumer; this component has no storage or global listeners.
+ * Kobalte replaces the donor manual portal/positioning and document listeners:
+ * arrows wrap and selection/Escape return focus. Kobalte 0.13.14 prevents Tab
+ * without moving focus, so a menu-scoped translation of the donor Tab cycle
+ * fills that gap. It discovers enabled radio rows only; no document trap.
+ * No force-reset timer or runtime authority is translated from the adjacent
+ * donor stop flow.
+ */
+export declare function BusySendButton(props: BusySendButtonProps): import("solid-js").JSX.Element;
+//# sourceMappingURL=busy-send-button.d.ts.map

package/dist/components/conversation/busy-send-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"busy-send-button.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/busy-send-button.tsx"],"names":[],"mappings":"AAmBA,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,OAAO,CAAA;AAC5C,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,YAAY,CAAA;IAClB,YAAY,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;IAC1C,8EAA8E;IAC9E,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mFAAmF;IACnF,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,2EAA2E;IAC3E,WAAW,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAA;IACnD,iFAAiF;IACjF,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B,CAAA;AASD;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,kCA2GxD"}

package/dist/components/conversation/busy-send-button.js

@@ -0,0 +1,184 @@
+import { Button } from "../ui/button/button.js";
+import { ButtonGroup } from "../ui/button-group/button-group.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../ui/dropdown-menu/dropdown-menu.js";
+import { createComponent, insert, setAttribute, template } from "solid-js/web";
+import { ArrowUpFromLine, ChevronDown, Target } from "lucide-solid";
+import { For, Show, createUniqueId } from "solid-js";
+//#region src/components/conversation/busy-send-button.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<p class="text-muted-foreground px-2 py-1 text-xs">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div data-slot=busy-send-button class="flex w-fit flex-col gap-1">`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div class="flex min-w-0 flex-col gap-1"><span></span><span class="text-muted-foreground text-xs">`);
+var _tmpl$4 = /*#__PURE__*/ template(`<span class="text-muted-foreground text-xs">`);
+var _tmpl$5 = /*#__PURE__*/ template(`<p class="text-muted-foreground text-xs">`);
+var modes = ["steer", "queue"];
+var labels = {
+	steer: "Steer",
+	queue: "Queue"
+};
+var descriptions = {
+	steer: "Act on this right away",
+	queue: "Run after the current work finishes"
+};
+/**
+* Kiro's split action/menu composition, with app-owned mode and availability.
+* Picking a mode never fires it. Persistence, migration and same-session
+* broadcasts belong to the consumer; this component has no storage or global listeners.
+* Kobalte replaces the donor manual portal/positioning and document listeners:
+* arrows wrap and selection/Escape return focus. Kobalte 0.13.14 prevents Tab
+* without moving focus, so a menu-scoped translation of the donor Tab cycle
+* fills that gap. It discovers enabled radio rows only; no document trap.
+* No force-reset timer or runtime authority is translated from the adjacent
+* donor stop flow.
+*/
+function BusySendButton(props) {
+	const reasonId = createUniqueId();
+	const reason = () => props.unavailable?.[props.mode];
+	const variant = () => props.mode === "steer" ? "default" : "secondary";
+	return (() => {
+		var _el$ = _tmpl$2();
+		insert(_el$, createComponent(DropdownMenu, {
+			placement: "top-end",
+			modal: false,
+			get children() {
+				return [createComponent(ButtonGroup, {
+					label: "Send while busy",
+					get children() {
+						return [createComponent(Button, {
+							type: "button",
+							size: "icon-sm",
+							get variant() {
+								return variant();
+							},
+							get ["aria-label"]() {
+								return props.mode === "steer" ? "Steer" : "Queue message";
+							},
+							get ["aria-describedby"]() {
+								return reason() ? reasonId : void 0;
+							},
+							get disabled() {
+								return props.disabled || !!reason();
+							},
+							onClick: () => {
+								if (!props.disabled && !reason()) props.onFire();
+							},
+							get children() {
+								return createComponent(Show, {
+									get when() {
+										return props.mode === "steer";
+									},
+									get fallback() {
+										return createComponent(ArrowUpFromLine, {});
+									},
+									get children() {
+										return createComponent(Target, {});
+									}
+								});
+							}
+						}), createComponent(DropdownMenuTrigger, {
+							as: Button,
+							type: "button",
+							size: "icon-sm",
+							get variant() {
+								return variant();
+							},
+							"aria-label": "Send options",
+							get disabled() {
+								return props.selectionDisabled;
+							},
+							get children() {
+								return createComponent(ChevronDown, {});
+							}
+						})];
+					}
+				}), createComponent(DropdownMenuContent, {
+					hideArrow: true,
+					get children() {
+						return [createComponent(DropdownMenuRadioGroup, {
+							"on:keydown": (event) => {
+								if (event.key !== "Tab" || event.isComposing || !(event.currentTarget instanceof HTMLElement)) return;
+								const rows = Array.from(event.currentTarget.querySelectorAll("[role=\"menuitemradio\"]:not([aria-disabled=\"true\"])"));
+								if (!rows.length) return;
+								event.preventDefault();
+								event.stopPropagation();
+								const active = document.activeElement;
+								const index = active instanceof HTMLElement ? rows.indexOf(active) : -1;
+								rows[index < 0 ? event.shiftKey ? rows.length - 1 : 0 : (index + (event.shiftKey ? -1 : 1) + rows.length) % rows.length]?.focus();
+							},
+							get value() {
+								return props.mode;
+							},
+							onChange: (value) => {
+								if ((value === "steer" || value === "queue") && !props.selectionDisabled && !props.unavailable?.[value]) props.onModeChange(value);
+							},
+							get children() {
+								return createComponent(For, {
+									each: modes,
+									children: (mode) => createComponent(DropdownMenuRadioItem, {
+										value: mode,
+										closeOnSelect: true,
+										get disabled() {
+											return props.selectionDisabled || !!props.unavailable?.[mode];
+										},
+										get children() {
+											return [createComponent(Show, {
+												when: mode === "steer",
+												get fallback() {
+													return createComponent(ArrowUpFromLine, {});
+												},
+												get children() {
+													return createComponent(Target, {});
+												}
+											}), (() => {
+												var _el$3 = _tmpl$3(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
+												insert(_el$4, () => labels[mode]);
+												insert(_el$5, () => descriptions[mode]);
+												insert(_el$3, createComponent(Show, {
+													get when() {
+														return props.unavailable?.[mode];
+													},
+													children: (message) => (() => {
+														var _el$6 = _tmpl$4();
+														insert(_el$6, message);
+														return _el$6;
+													})()
+												}), null);
+												return _el$3;
+											})()];
+										}
+									})
+								});
+							}
+						}), createComponent(Show, {
+							get when() {
+								return props.alternateActionHint;
+							},
+							get children() {
+								return [createComponent(DropdownMenuSeparator, {}), (() => {
+									var _el$2 = _tmpl$();
+									insert(_el$2, () => props.alternateActionHint);
+									return _el$2;
+								})()];
+							}
+						})];
+					}
+				})];
+			}
+		}), null);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return reason();
+			},
+			children: (message) => (() => {
+				var _el$7 = _tmpl$5();
+				setAttribute(_el$7, "id", reasonId);
+				insert(_el$7, message);
+				return _el$7;
+			})()
+		}), null);
+		return _el$;
+	})();
+}
+//#endregion
+export { BusySendButton };
+
+//# sourceMappingURL=busy-send-button.js.map

package/dist/components/conversation/busy-send-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"busy-send-button.js","names":["ArrowUpFromLine","ChevronDown","Target","For","Show","createUniqueId","Button","ButtonGroup","DropdownMenu","DropdownMenuContent","DropdownMenuRadioGroup","DropdownMenuRadioItem","DropdownMenuSeparator","DropdownMenuTrigger","BusySendMode","BusySendButtonProps","mode","onModeChange","onFire","disabled","selectionDisabled","unavailable","Partial","Record","alternateActionHint","modes","labels","steer","queue","descriptions","BusySendButton","props","reasonId","reason","variant","const","_el$","_tmpl$2","_$insert","_$createComponent","placement","modal","children","label","type","size","aria-label","aria-describedby","undefined","onClick","when","fallback","as","hideArrow","on:keydown","event","KeyboardEvent","key","isComposing","currentTarget","HTMLElement","rows","Array","from","querySelectorAll","length","preventDefault","stopPropagation","active","document","activeElement","index","indexOf","next","shiftKey","focus","value","onChange","each","closeOnSelect","_el$3","_tmpl$3","_el$4","firstChild","_el$5","nextSibling","message","_el$6","_tmpl$4","_el$2","_tmpl$","_el$7","_tmpl$5","_$setAttribute","_$createComponent"],"sources":["../../../src/components/conversation/busy-send-button.tsx"],"sourcesContent":["/*\n * Substantially translated from KiroCrew website/src/components/BusySendButton.tsx\n * at 283e136c0f902e965a535a7c9548c57c7504fed0.\n * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n * Licensed under Apache-2.0; see LICENSE and NOTICE.\n */\nimport { ArrowUpFromLine, ChevronDown, Target } from 'lucide-solid'\nimport { For, Show, createUniqueId } from 'solid-js'\nimport { Button } from '../ui/button/button'\nimport { ButtonGroup } from '../ui/button-group/button-group'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../ui/dropdown-menu/dropdown-menu'\n\nexport type BusySendMode = 'steer' | 'queue'\nexport type BusySendButtonProps = {\n  mode: BusySendMode\n  onModeChange: (mode: BusySendMode) => void\n  /** Executes only the selected action. The host owns the draft and command. */\n  onFire: () => void\n  /** An empty draft or pending delivery disables fire, but not choosing a mode. */\n  disabled?: boolean\n  /** Disable mode selection when the host has no authority to change preferences. */\n  selectionDisabled?: boolean\n  /** Host capability/authority failures: unavailable rows remain visible. */\n  unavailable?: Partial<Record<BusySendMode, string>>\n  /** Supply only when the host implements this alternate-action keyboard chord. */\n  alternateActionHint?: string\n}\n\nconst modes: BusySendMode[] = ['steer', 'queue']\nconst labels = { steer: 'Steer', queue: 'Queue' }\nconst descriptions = {\n  steer: 'Act on this right away',\n  queue: 'Run after the current work finishes',\n}\n\n/**\n * Kiro's split action/menu composition, with app-owned mode and availability.\n * Picking a mode never fires it. Persistence, migration and same-session\n * broadcasts belong to the consumer; this component has no storage or global listeners.\n * Kobalte replaces the donor manual portal/positioning and document listeners:\n * arrows wrap and selection/Escape return focus. Kobalte 0.13.14 prevents Tab\n * without moving focus, so a menu-scoped translation of the donor Tab cycle\n * fills that gap. It discovers enabled radio rows only; no document trap.\n * No force-reset timer or runtime authority is translated from the adjacent\n * donor stop flow.\n */\nexport function BusySendButton(props: BusySendButtonProps) {\n  const reasonId = createUniqueId()\n  const reason = () => props.unavailable?.[props.mode]\n  const variant = () => (props.mode === 'steer' ? ('default' as const) : ('secondary' as const))\n  return (\n    <div data-slot=\"busy-send-button\" class=\"flex w-fit flex-col gap-1\">\n      <DropdownMenu placement=\"top-end\" modal={false}>\n        <ButtonGroup label=\"Send while busy\">\n          <Button\n            type=\"button\"\n            size=\"icon-sm\"\n            variant={variant()}\n            aria-label={props.mode === 'steer' ? 'Steer' : 'Queue message'}\n            aria-describedby={reason() ? reasonId : undefined}\n            disabled={props.disabled || !!reason()}\n            onClick={() => {\n              if (!props.disabled && !reason()) props.onFire()\n            }}\n          >\n            <Show when={props.mode === 'steer'} fallback={<ArrowUpFromLine />}>\n              <Target />\n            </Show>\n          </Button>\n          <DropdownMenuTrigger\n            as={Button}\n            type=\"button\"\n            size=\"icon-sm\"\n            variant={variant()}\n            aria-label=\"Send options\"\n            disabled={props.selectionDisabled}\n          >\n            <ChevronDown />\n          </DropdownMenuTrigger>\n        </ButtonGroup>\n        <DropdownMenuContent hideArrow>\n          <DropdownMenuRadioGroup\n            on:keydown={(event: KeyboardEvent) => {\n              if (\n                event.key !== 'Tab' ||\n                event.isComposing ||\n                !(event.currentTarget instanceof HTMLElement)\n              )\n                return\n              const rows = Array.from(\n                event.currentTarget.querySelectorAll<HTMLElement>(\n                  '[role=\"menuitemradio\"]:not([aria-disabled=\"true\"])'\n                )\n              )\n              if (!rows.length) return\n              event.preventDefault()\n              event.stopPropagation()\n              const active = document.activeElement\n              const index = active instanceof HTMLElement ? rows.indexOf(active) : -1\n              const next =\n                index < 0\n                  ? event.shiftKey\n                    ? rows.length - 1\n                    : 0\n                  : (index + (event.shiftKey ? -1 : 1) + rows.length) % rows.length\n              rows[next]?.focus()\n            }}\n            value={props.mode}\n            onChange={(value) => {\n              if (\n                (value === 'steer' || value === 'queue') &&\n                !props.selectionDisabled &&\n                !props.unavailable?.[value]\n              )\n                props.onModeChange(value)\n            }}\n          >\n            <For each={modes}>\n              {(mode) => (\n                <DropdownMenuRadioItem\n                  value={mode}\n                  closeOnSelect\n                  disabled={props.selectionDisabled || !!props.unavailable?.[mode]}\n                >\n                  <Show when={mode === 'steer'} fallback={<ArrowUpFromLine />}>\n                    <Target />\n                  </Show>\n                  <div class=\"flex min-w-0 flex-col gap-1\">\n                    <span>{labels[mode]}</span>\n                    <span class=\"text-muted-foreground text-xs\">{descriptions[mode]}</span>\n                    <Show when={props.unavailable?.[mode]}>\n                      {(message) => <span class=\"text-muted-foreground text-xs\">{message()}</span>}\n                    </Show>\n                  </div>\n                </DropdownMenuRadioItem>\n              )}\n            </For>\n          </DropdownMenuRadioGroup>\n          <Show when={props.alternateActionHint}>\n            <DropdownMenuSeparator />\n            <p class=\"text-muted-foreground px-2 py-1 text-xs\">{props.alternateActionHint}</p>\n          </Show>\n        </DropdownMenuContent>\n      </DropdownMenu>\n      <Show when={reason()}>\n        {(message) => (\n          <p id={reasonId} class=\"text-muted-foreground text-xs\">\n            {message()}\n          </p>\n        )}\n      </Show>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/components/conversation/conversation-surface.d.ts

@@ -10,7 +10,7 @@ import type { ComponentProps, JSX } from 'solid-js';
  *     to the end by an arriving message, and that is the single most common way a
  *     chat surface is made unusable.
  *   - **Offer a way back.** Once the reader is not at the bottom, a control appears
- *     that returns them and says how much they have missed.
+ *     that returns them. Pixel distance cannot prove an unread message count.
  *   - **`overscroll-contain`.** The transcript scrolls to its end and stops, rather
  *     than dragging the pane behind it — which in a desktop shell means the whole
  *     window moves.
@@ -18,6 +18,10 @@ import type { ComponentProps, JSX } from 'solid-js';
 export type ConversationSurfaceProps = ComponentProps<'div'> & {
     /** How far from the bottom still counts as "at the bottom", in px. */
     threshold?: number;
+    /** Disable automatic positioning while the host owns scroll restoration. */
+    follow?: boolean;
+    /** Optional conversation identity: changing it re-arms follow at the bottom. */
+    resetKey?: string;
     /** Rendered above the transcript when there is nothing in it. */
     empty?: JSX.Element;
     /** A header that scrolls with the transcript, e.g. a day divider or a banner. */

package/dist/components/conversation/conversation-surface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-surface.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/conversation-surface.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAKnD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7D,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iEAAiE;IACjE,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,iFAAiF;IACjF,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACrB,CAAA;AAOD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,eAsElE"}
+{"version":3,"file":"conversation-surface.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/conversation-surface.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAMnD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7D,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iEAAiE;IACjE,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,iFAAiF;IACjF,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACrB,CAAA;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,eAmElE"}

package/dist/components/conversation/conversation-surface.js

@@ -1,63 +1,50 @@
 import { cn } from "../../lib/utils.js";
 import { Button } from "../ui/button/button.js";
-import { className, createComponent, effect, insert, memo, spread, template, use } from "solid-js/web";
+import { createScrollFollow } from "./scroll-follow.js";
+import { className, createComponent, effect, insert, mergeProps, spread, template, use } from "solid-js/web";
 import { ArrowDown } from "lucide-solid";
-import { Show, createSignal, onCleanup, splitProps } from "solid-js";
+import { Show, splitProps } from "solid-js";
 //#region src/components/conversation/conversation-surface.tsx
 var _tmpl$ = /*#__PURE__*/ template(`<div class="pointer-events-none absolute inset-x-0 bottom-3 flex justify-center">`);
-var _tmpl$2 = /*#__PURE__*/ template(`<div data-slot=conversation-surface><div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div data-slot=conversation-surface><div class="min-h-0 flex-1 overflow-y-auto overscroll-contain"><div data-slot=conversation-content>`);
 var _tmpl$3 = /*#__PURE__*/ template(`<div class=p-4>`);
-/** How far the reader is from the end of the transcript, in px. */
-function distanceFromBottom(element) {
-	return element.scrollHeight - element.scrollTop - element.clientHeight;
-}
 function ConversationSurface(props) {
 	const [local, rest] = splitProps(props, [
 		"class",
 		"threshold",
+		"follow",
+		"resetKey",
 		"empty",
 		"header",
-		"children"
+		"children",
+		"onScroll",
+		"ref",
+		"tabindex"
 	]);
-	const [atBottom, setAtBottom] = createSignal(true);
-	const [missed, setMissed] = createSignal(0);
-	let scroller;
-	const onScroll = () => {
-		if (!scroller) return;
-		const distance = distanceFromBottom(scroller);
-		const threshold = local.threshold ?? 80;
-		setAtBottom(distance <= threshold);
-		setMissed(distance <= threshold ? 0 : Math.round(distance / 96));
-	};
-	const jumpToLatest = () => {
-		scroller?.scrollTo({
-			top: scroller.scrollHeight,
-			behavior: "smooth"
-		});
-		setAtBottom(true);
-		setMissed(0);
-	};
-	const observer = () => {
-		if (!scroller) return;
-		const mutation = new MutationObserver(() => {
-			if (atBottom()) scroller?.scrollTo({ top: scroller.scrollHeight });
-			else onScroll();
-		});
-		mutation.observe(scroller, {
-			childList: true,
-			subtree: true
-		});
-		onCleanup(() => mutation.disconnect());
+	const follow = createScrollFollow({
+		enabled: () => local.follow !== false,
+		resetKey: () => local.resetKey,
+		threshold: () => local.threshold ?? 80
+	});
+	const onScroll = (event) => {
+		follow.onScroll();
+		const handler = local.onScroll;
+		if (typeof handler === "function") handler(event);
+		else if (handler) handler[0](handler[1], event);
 	};
 	return (() => {
-		var _el$ = _tmpl$2(), _el$2 = _el$.firstChild;
+		var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
 		_el$2.addEventListener("scroll", onScroll);
 		use((element) => {
-			scroller = element;
-			observer();
+			follow.bindScroller(element);
+			if (typeof local.ref === "function") local.ref(element);
 		}, _el$2);
-		spread(_el$2, rest, false, true);
-		insert(_el$2, createComponent(Show, {
+		spread(_el$2, mergeProps({ get tabindex() {
+			return local.tabindex ?? 0;
+		} }, rest), false, true);
+		var _ref$ = follow.bindContent;
+		typeof _ref$ === "function" ? use(_ref$, _el$3) : follow.bindContent = _el$3;
+		insert(_el$3, createComponent(Show, {
 			get when() {
 				return local.header;
 			},
@@ -65,15 +52,15 @@ function ConversationSurface(props) {
 				return local.header;
 			}
 		}), null);
-		insert(_el$2, createComponent(Show, {
+		insert(_el$3, createComponent(Show, {
 			get when() {
 				return local.children;
 			},
 			get fallback() {
 				return (() => {
-					var _el$4 = _tmpl$3();
-					insert(_el$4, () => local.empty);
-					return _el$4;
+					var _el$5 = _tmpl$3();
+					insert(_el$5, () => local.empty);
+					return _el$5;
 				})();
 			},
 			get children() {
@@ -82,30 +69,23 @@ function ConversationSurface(props) {
 		}), null);
 		insert(_el$, createComponent(Show, {
 			get when() {
-				return !atBottom();
+				return !follow.atBottom();
 			},
 			get children() {
-				var _el$3 = _tmpl$();
-				insert(_el$3, createComponent(Button, {
+				var _el$4 = _tmpl$();
+				insert(_el$4, createComponent(Button, {
+					type: "button",
 					size: "sm",
 					variant: "secondary",
 					"class": "pointer-events-auto gap-1.5 shadow-md",
-					onClick: jumpToLatest,
+					get onClick() {
+						return follow.jump;
+					},
 					get children() {
-						return [createComponent(ArrowDown, {}), createComponent(Show, {
-							get when() {
-								return missed() > 0;
-							},
-							get fallback() {
-								return "Jump to latest";
-							},
-							get children() {
-								return [memo(() => missed()), " new"];
-							}
-						})];
+						return [createComponent(ArrowDown, {}), "Jump to latest"];
 					}
 				}));
-				return _el$3;
+				return _el$4;
 			}
 		}), null);
 		effect(() => className(_el$, cn("relative flex min-h-0 flex-1 flex-col", local.class)));

package/dist/components/conversation/conversation-surface.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-surface.js","names":["ArrowDown","ComponentProps","JSX","Show","createSignal","onCleanup","splitProps","cn","Button","ConversationSurfaceProps","threshold","empty","Element","header","distanceFromBottom","element","HTMLDivElement","scrollHeight","scrollTop","clientHeight","ConversationSurface","props","local","rest","atBottom","setAtBottom","missed","setMissed","scroller","onScroll","distance","Math","round","jumpToLatest","scrollTo","top","behavior","observer","mutation","MutationObserver","observe","childList","subtree","disconnect","_el$","_tmpl$2","_el$2","firstChild","addEventListener","_$use","_$spread","_$insert","_$createComponent","when","children","fallback","_el$4","_tmpl$3","_el$3","_tmpl$","size","variant","onClick","_$memo","_$effect","_$className","class","_$createComponent","_$memo","_$className"],"sources":["../../../src/components/conversation/conversation-surface.tsx"],"sourcesContent":["import { ArrowDown } from 'lucide-solid'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { Show, createSignal, onCleanup, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\nimport { Button } from '../ui/button/button'\n\n/**\n * ConversationSurface.\n *\n * The scrolling transcript. Its job is small and it is the difference between a\n * transcript that stays readable as it grows and one that fights the reader:\n *\n *   - **Stick to the bottom.** New messages scroll into view only when the reader is\n *     already at the bottom. Someone reading back through history must not be yanked\n *     to the end by an arriving message, and that is the single most common way a\n *     chat surface is made unusable.\n *   - **Offer a way back.** Once the reader is not at the bottom, a control appears\n *     that returns them and says how much they have missed.\n *   - **`overscroll-contain`.** The transcript scrolls to its end and stops, rather\n *     than dragging the pane behind it — which in a desktop shell means the whole\n *     window moves.\n */\nexport type ConversationSurfaceProps = ComponentProps<'div'> & {\n  /** How far from the bottom still counts as \"at the bottom\", in px. */\n  threshold?: number\n  /** Rendered above the transcript when there is nothing in it. */\n  empty?: JSX.Element\n  /** A header that scrolls with the transcript, e.g. a day divider or a banner. */\n  header?: JSX.Element\n}\n\n/** How far the reader is from the end of the transcript, in px. */\nfunction distanceFromBottom(element: HTMLDivElement): number {\n  return element.scrollHeight - element.scrollTop - element.clientHeight\n}\n\nexport function ConversationSurface(props: ConversationSurfaceProps) {\n  const [local, rest] = splitProps(props, ['class', 'threshold', 'empty', 'header', 'children'])\n\n  const [atBottom, setAtBottom] = createSignal(true)\n  const [missed, setMissed] = createSignal(0)\n  let scroller: HTMLDivElement | undefined\n\n  const onScroll = () => {\n    if (!scroller) return\n    const distance = distanceFromBottom(scroller)\n    const threshold = local.threshold ?? 80\n    setAtBottom(distance <= threshold)\n    setMissed(distance <= threshold ? 0 : Math.round(distance / 96))\n  }\n\n  const jumpToLatest = () => {\n    scroller?.scrollTo({ top: scroller.scrollHeight, behavior: 'smooth' })\n    setAtBottom(true)\n    setMissed(0)\n  }\n\n  // An arriving message while the reader is at the bottom should follow it. While\n  // they are not, it must not.\n  const observer = () => {\n    if (!scroller) return\n    const mutation = new MutationObserver(() => {\n      if (atBottom()) scroller?.scrollTo({ top: scroller.scrollHeight })\n      else onScroll()\n    })\n    mutation.observe(scroller, { childList: true, subtree: true })\n    onCleanup(() => mutation.disconnect())\n  }\n\n  return (\n    <div\n      data-slot=\"conversation-surface\"\n      class={cn('relative flex min-h-0 flex-1 flex-col', local.class)}\n    >\n      <div\n        ref={(element) => {\n          scroller = element\n          observer()\n        }}\n        onScroll={onScroll}\n        class=\"min-h-0 flex-1 overflow-y-auto overscroll-contain\"\n        {...rest}\n      >\n        <Show when={local.header}>{local.header}</Show>\n        <Show when={local.children} fallback={<div class=\"p-4\">{local.empty}</div>}>\n          {local.children}\n        </Show>\n      </div>\n\n      <Show when={!atBottom()}>\n        <div class=\"pointer-events-none absolute inset-x-0 bottom-3 flex justify-center\">\n          <Button\n            size=\"sm\"\n            variant=\"secondary\"\n            class=\"pointer-events-auto gap-1.5 shadow-md\"\n            onClick={jumpToLatest}\n          >\n            <ArrowDown />\n            <Show when={missed() > 0} fallback={<>Jump to latest</>}>\n              {missed()} new\n            </Show>\n          </Button>\n        </div>\n      </Show>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;AAgCA,SAASc,mBAAmBC,SAAiC;CAC3D,OAAOA,QAAQE,eAAeF,QAAQG,YAAYH,QAAQI;AAC5D;AAEA,SAAgBC,oBAAoBC,OAAiC;CACnE,MAAM,CAACC,OAAOC,QAAQjB,WAAWe,OAAO;EAAC;EAAS;EAAa;EAAS;EAAU;CAAU,CAAC;CAE7F,MAAM,CAACG,UAAUC,eAAerB,aAAa,IAAI;CACjD,MAAM,CAACsB,QAAQC,aAAavB,aAAa,CAAC;CAC1C,IAAIwB;CAEJ,MAAMC,iBAAiB;EACrB,IAAI,CAACD,UAAU;EACf,MAAME,WAAWhB,mBAAmBc,QAAQ;EAC5C,MAAMlB,YAAYY,MAAMZ,aAAa;EACrCe,YAAYK,YAAYpB,SAAS;EACjCiB,UAAUG,YAAYpB,YAAY,IAAIqB,KAAKC,MAAMF,WAAW,EAAE,CAAC;CACjE;CAEA,MAAMG,qBAAqB;EACzBL,UAAUM,SAAS;GAAEC,KAAKP,SAASX;GAAcmB,UAAU;EAAS,CAAC;EACrEX,YAAY,IAAI;EAChBE,UAAU,CAAC;CACb;CAIA,MAAMU,iBAAiB;EACrB,IAAI,CAACT,UAAU;EACf,MAAMU,WAAW,IAAIC,uBAAuB;GAC1C,IAAIf,SAAS,GAAGI,UAAUM,SAAS,EAAEC,KAAKP,SAASX,aAAa,CAAC;QAC5DY,SAAS;EAChB,CAAC;EACDS,SAASE,QAAQZ,UAAU;GAAEa,WAAW;GAAMC,SAAS;EAAK,CAAC;EAC7DrC,gBAAgBiC,SAASK,WAAW,CAAC;CACvC;CAEA,cAAA;EAAA,IAAAC,OAAAC,QAAA,GAAAC,QAAAF,KAAAG;EAAAD,MAAAE,iBAAA,UAUgBnB,QAAQ;EAAAoB,KAJZlC,YAAY;GAChBa,WAAWb;GACXsB,SAAS;EACX,GAACS,KAAA;EAAAI,OAAAJ,OAGGvB,MAAI,OAAA,IAAA;EAAA4B,OAAAL,OAAAM,gBAEPjD,MAAI;GAAA,IAACkD,OAAI;IAAA,OAAE/B,MAAMT;GAAM;GAAA,IAAAyC,WAAA;IAAA,OAAGhC,MAAMT;GAAM;EAAA,CAAA,GAAA,IAAA;EAAAsC,OAAAL,OAAAM,gBACtCjD,MAAI;GAAA,IAACkD,OAAI;IAAA,OAAE/B,MAAMgC;GAAQ;GAAA,IAAEC,WAAQ;IAAA,cAAA;KAAA,IAAAC,QAAAC,QAAA;KAAAN,OAAAK,aAAoBlC,MAAMX,KAAK;KAAA,OAAA6C;IAAA,EAAA,CAAA;GAAA;GAAA,IAAAF,WAAA;IAAA,OAChEhC,MAAMgC;GAAQ;EAAA,CAAA,GAAA,IAAA;EAAAH,OAAAP,MAAAQ,gBAIlBjD,MAAI;GAAA,IAACkD,OAAI;IAAA,OAAE,CAAC7B,SAAS;GAAC;GAAA,IAAA8B,WAAA;IAAA,IAAAI,QAAAC,OAAA;IAAAR,OAAAO,OAAAN,gBAElB5C,QAAM;KACLoD,MAAI;KACJC,SAAO;KAAA,SAAA;KAEPC,SAAS7B;KAAY,IAAAqB,WAAA;MAAA,OAAA,CAAAF,gBAEpBpD,WAAS,CAAA,CAAA,GAAAoD,gBACTjD,MAAI;OAAA,IAACkD,OAAI;QAAA,OAAE3B,OAAO,IAAI;OAAC;OAAA,IAAE6B,WAAQ;QAAA,OAAA;OAAA;OAAA,IAAAD,WAAA;QAAA,OAAA,CAAAS,WAC/BrC,OAAO,CAAC,GAAA,MAAA;OAAA;MAAA,CAAA,CAAA;KAAA;IAAA,CAAA,CAAA;IAAA,OAAAgC;GAAA;EAAA,CAAA,GAAA,IAAA;EAAAM,aAAAC,UAAArB,MA3BVrC,GAAG,yCAAyCe,MAAM4C,KAAK,CAAC,CAAA;EAAA,OAAAtB;CAAA,EAAA,CAAA;AAkCrE"}
+{"version":3,"file":"conversation-surface.js","names":["ArrowDown","ComponentProps","JSX","Show","splitProps","cn","Button","createScrollFollow","ConversationSurfaceProps","threshold","follow","resetKey","empty","Element","header","ConversationSurface","props","local","rest","enabled","onScroll","EventHandlerUnion","HTMLDivElement","Event","event","handler","_el$","_tmpl$2","_el$2","firstChild","_el$3","addEventListener","_$use","element","bindScroller","ref","_$spread","_$mergeProps","tabindex","_ref$","bindContent","_$insert","_$createComponent","when","children","fallback","_el$5","_tmpl$3","atBottom","_el$4","_tmpl$","type","size","variant","onClick","jump","_$effect","_$className","class","_$mergeProps","_$use","_$createComponent","_$className"],"sources":["../../../src/components/conversation/conversation-surface.tsx"],"sourcesContent":["import { ArrowDown } from 'lucide-solid'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\nimport { Button } from '../ui/button/button'\nimport { createScrollFollow } from './scroll-follow'\n\n/**\n * ConversationSurface.\n *\n * The scrolling transcript. Its job is small and it is the difference between a\n * transcript that stays readable as it grows and one that fights the reader:\n *\n *   - **Stick to the bottom.** New messages scroll into view only when the reader is\n *     already at the bottom. Someone reading back through history must not be yanked\n *     to the end by an arriving message, and that is the single most common way a\n *     chat surface is made unusable.\n *   - **Offer a way back.** Once the reader is not at the bottom, a control appears\n *     that returns them. Pixel distance cannot prove an unread message count.\n *   - **`overscroll-contain`.** The transcript scrolls to its end and stops, rather\n *     than dragging the pane behind it — which in a desktop shell means the whole\n *     window moves.\n */\nexport type ConversationSurfaceProps = ComponentProps<'div'> & {\n  /** How far from the bottom still counts as \"at the bottom\", in px. */\n  threshold?: number\n  /** Disable automatic positioning while the host owns scroll restoration. */\n  follow?: boolean\n  /** Optional conversation identity: changing it re-arms follow at the bottom. */\n  resetKey?: string\n  /** Rendered above the transcript when there is nothing in it. */\n  empty?: JSX.Element\n  /** A header that scrolls with the transcript, e.g. a day divider or a banner. */\n  header?: JSX.Element\n}\n\nexport function ConversationSurface(props: ConversationSurfaceProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'threshold',\n    'follow',\n    'resetKey',\n    'empty',\n    'header',\n    'children',\n    'onScroll',\n    'ref',\n    'tabindex',\n  ])\n  // Kobalte provides the control's semantics; transcript follow is a native\n  // geometry contract. KiroCrew's plain-scroller controller handles streaming,\n  // content collapse and pane resizing without treating them as user consent.\n  const follow = createScrollFollow({\n    enabled: () => local.follow !== false,\n    resetKey: () => local.resetKey,\n    threshold: () => local.threshold ?? 80,\n  })\n  const onScroll: JSX.EventHandlerUnion<HTMLDivElement, Event> = (event) => {\n    follow.onScroll()\n    const handler = local.onScroll\n    if (typeof handler === 'function') handler(event)\n    else if (handler) handler[0](handler[1], event)\n  }\n\n  return (\n    <div\n      data-slot=\"conversation-surface\"\n      class={cn('relative flex min-h-0 flex-1 flex-col', local.class)}\n    >\n      <div\n        ref={(element) => {\n          follow.bindScroller(element)\n          if (typeof local.ref === 'function') local.ref(element)\n        }}\n        onScroll={onScroll}\n        tabindex={local.tabindex ?? 0}\n        class=\"min-h-0 flex-1 overflow-y-auto overscroll-contain\"\n        {...rest}\n      >\n        <div ref={follow.bindContent} data-slot=\"conversation-content\">\n          <Show when={local.header}>{local.header}</Show>\n          <Show when={local.children} fallback={<div class=\"p-4\">{local.empty}</div>}>\n            {local.children}\n          </Show>\n        </div>\n      </div>\n\n      <Show when={!follow.atBottom()}>\n        <div class=\"pointer-events-none absolute inset-x-0 bottom-3 flex justify-center\">\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            variant=\"secondary\"\n            class=\"pointer-events-auto gap-1.5 shadow-md\"\n            onClick={follow.jump}\n          >\n            <ArrowDown />\n            Jump to latest\n          </Button>\n        </div>\n      </Show>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;AAoCA,SAAgBe,oBAAoBC,OAAiC;CACnE,MAAM,CAACC,OAAOC,QAAQd,WAAWY,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX;CAID,MAAMN,SAASH,mBAAmB;EAChCY,eAAeF,MAAMP,WAAW;EAChCC,gBAAgBM,MAAMN;EACtBF,iBAAiBQ,MAAMR,aAAa;CACtC,CAAC;CACD,MAAMW,YAA0DI,UAAU;EACxEd,OAAOU,SAAS;EAChB,MAAMK,UAAUR,MAAMG;EACtB,IAAI,OAAOK,YAAY,YAAYA,QAAQD,KAAK;OAC3C,IAAIC,SAASA,QAAQ,EAAE,CAACA,QAAQ,IAAID,KAAK;CAChD;CAEA,cAAA;EAAA,IAAAE,OAAAC,QAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAC;EAAAD,MAAAG,iBAAA,UAUgBX,QAAQ;EAAAY,KAJZC,YAAY;GAChBvB,OAAOwB,aAAaD,OAAO;GAC3B,IAAI,OAAOhB,MAAMkB,QAAQ,YAAYlB,MAAMkB,IAAIF,OAAO;EACxD,GAACL,KAAA;EAAAQ,OAAAR,OAAAS,WAAA,EAAA,IAEDC,WAAQ;GAAA,OAAErB,MAAMqB,YAAY;EAAC,EAAA,GAEzBpB,IAAI,GAAA,OAAA,IAAA;EAAA,IAAAqB,QAEE7B,OAAO8B;EAAW,OAAAD,UAAA,aAAAP,IAAAO,OAAAT,KAAA,IAAlBpB,OAAO8B,cAAWV;EAAAW,OAAAX,OAAAY,gBACzBvC,MAAI;GAAA,IAACwC,OAAI;IAAA,OAAE1B,MAAMH;GAAM;GAAA,IAAA8B,WAAA;IAAA,OAAG3B,MAAMH;GAAM;EAAA,CAAA,GAAA,IAAA;EAAA2B,OAAAX,OAAAY,gBACtCvC,MAAI;GAAA,IAACwC,OAAI;IAAA,OAAE1B,MAAM2B;GAAQ;GAAA,IAAEC,WAAQ;IAAA,cAAA;KAAA,IAAAC,QAAAC,QAAA;KAAAN,OAAAK,aAAoB7B,MAAML,KAAK;KAAA,OAAAkC;IAAA,EAAA,CAAA;GAAA;GAAA,IAAAF,WAAA;IAAA,OAChE3B,MAAM2B;GAAQ;EAAA,CAAA,GAAA,IAAA;EAAAH,OAAAf,MAAAgB,gBAKpBvC,MAAI;GAAA,IAACwC,OAAI;IAAA,OAAE,CAACjC,OAAOsC,SAAS;GAAC;GAAA,IAAAJ,WAAA;IAAA,IAAAK,QAAAC,OAAA;IAAAT,OAAAQ,OAAAP,gBAEzBpC,QAAM;KACL6C,MAAI;KACJC,MAAI;KACJC,SAAO;KAAA,SAAA;KAAA,IAEPC,UAAO;MAAA,OAAE5C,OAAO6C;KAAI;KAAA,IAAAX,WAAA;MAAA,OAAA,CAAAF,gBAEnB1C,WAAS,CAAA,CAAA,GAAA,gBAAA;KAAA;IAAA,CAAA,CAAA;IAAA,OAAAiD;GAAA;EAAA,CAAA,GAAA,IAAA;EAAAO,aAAAC,UAAA/B,MA7BTrB,GAAG,yCAAyCY,MAAMyC,KAAK,CAAC,CAAA;EAAA,OAAAhC;CAAA,EAAA,CAAA;AAoCrE"}

package/dist/components/conversation/index.d.ts

@@ -1,3 +1,4 @@
+export { BusySendButton, type BusySendMode, type BusySendButtonProps } from './busy-send-button';
 export { ConversationAvatar, type ConversationAvatarKind, type ConversationAvatarProps, } from './conversation-avatar';
 export { ConversationSurface, type ConversationSurfaceProps } from './conversation-surface';
 export { ComposerAttachmentButton, ComposerHint, MessageComposer, type MessageComposerProps, } from './message-composer';

package/dist/components/conversation/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,GAC7B,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,wBAAwB,CAAA;AAC3F,OAAO,EACL,wBAAwB,EACxB,YAAY,EACZ,eAAe,EACf,KAAK,oBAAoB,GAC1B,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,UAAU,EACV,KAAK,eAAe,GACrB,MAAM,eAAe,CAAA;AACtB,OAAO,EACL,cAAc,EACd,WAAW,EACX,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,GACtB,MAAM,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,YAAY,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AAChG,OAAO,EACL,kBAAkB,EAClB,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,GAC7B,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,wBAAwB,CAAA;AAC3F,OAAO,EACL,wBAAwB,EACxB,YAAY,EACZ,eAAe,EACf,KAAK,oBAAoB,GAC1B,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,UAAU,EACV,KAAK,eAAe,GACrB,MAAM,eAAe,CAAA;AACtB,OAAO,EACL,cAAc,EACd,WAAW,EACX,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,GACtB,MAAM,gBAAgB,CAAA"}

package/dist/components/conversation/index.js

@@ -1,6 +1,7 @@
+import { BusySendButton } from "./busy-send-button.js";
 import { ConversationAvatar } from "./conversation-avatar.js";
 import { ConversationSurface } from "./conversation-surface.js";
 import { ComposerAttachmentButton, ComposerHint, MessageComposer } from "./message-composer.js";
 import { MessageBody, MessageDayDivider, MessageGroup, MessageRow } from "./message-row.js";
 import { AttachmentCard, ThreadPanel } from "./thread-panel.js";
-export { AttachmentCard, ComposerAttachmentButton, ComposerHint, ConversationAvatar, ConversationSurface, MessageBody, MessageComposer, MessageDayDivider, MessageGroup, MessageRow, ThreadPanel };
+export { AttachmentCard, BusySendButton, ComposerAttachmentButton, ComposerHint, ConversationAvatar, ConversationSurface, MessageBody, MessageComposer, MessageDayDivider, MessageGroup, MessageRow, ThreadPanel };