@adea-ai/ui 0.63.3 → 0.63.4

package/dist/components/conversation/scroll-follow-core.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-follow-core.js","names":[],"sources":["../../../src/components/conversation/scroll-follow-core.ts"],"sourcesContent":["/*\n * Substantially translated from KiroCrew website/src/hooks/virtualizer/FollowController.ts\n * (plain-scroller decision units), pinned at\n * 283e136c0f902e965a535a7c9548c57c7504fed0.\n * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n * This product includes software developed at Amazon.com, Inc.\n * (https://www.amazon.com/).\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n * http://www.apache.org/licenses/LICENSE-2.0\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * Pure plain-scroller decisions retained from FollowController; virtual row\n * measurement, persisted anchor resolution and restore settling are excluded.\n */\n/** Default distance (px) from the bottom within which `isAtBottom` is true. */\nexport const DEFAULT_BOTTOM_THRESHOLD = 100\n\n/**\n * Tolerance (px) for treating a scroll position as \"the same\" as a value we\n * wrote programmatically. Covers sub-pixel rounding and 1px momentum overshoot.\n * Must stay small so a deliberate user scroll of even a few px is still seen as\n * a user scroll.\n */\nexport const SELF_SCROLL_EPSILON = 2\n\n/**\n * \"At the bottom\" tolerance (px) for deciding whether an auto-pin still has\n * work to do. A flat 0.5 is UNDER one device pixel at fractional device-pixel\n * ratios (0.67 CSS px at 150% zoom, 0.8 at 125%): the scroller's resting\n * maximum scrollTop lands on a fractional value, so `|scrollTop - target|`\n * stays just above 0.5 even when the viewport is visually pinned to the\n * bottom — making the pin re-fire on every ResizeObserver tick. Scaling the\n * epsilon to the device pixel (never below 1 CSS px) absorbs that fractional\n * resting error. `devicePixelRatio` is read defensively so a jsdom / SSR\n * environment that leaves it undefined falls back to 1 (→ 1.5px).\n */\nexport function atBottomEpsilon(): number {\n  const dpr =\n    typeof window !== 'undefined' &&\n    typeof window.devicePixelRatio === 'number' &&\n    window.devicePixelRatio > 0\n      ? window.devicePixelRatio\n      : 1\n  return Math.max(1, 1 / dpr + 0.5)\n}\n\n/** Live scroll geometry snapshot read from the scroller element. */\nexport interface ScrollGeom {\n  scrollTop: number\n  scrollHeight: number\n  clientHeight: number\n}\n\n/** scrollTop that places the viewport exactly at the bottom (never negative). */\nexport function bottomTarget(geom: ScrollGeom): number {\n  return Math.max(0, geom.scrollHeight - geom.clientHeight)\n}\n\n/** Pixels between the current scroll position and the bottom. */\nexport function distanceFromBottom(geom: ScrollGeom): number {\n  return geom.scrollHeight - geom.scrollTop - geom.clientHeight\n}\n\n/** Whether the scroller is within `threshold` px of the bottom. */\nexport function computeAtBottom(geom: ScrollGeom, threshold: number): boolean {\n  return distanceFromBottom(geom) <= threshold\n}\n\n/**\n * Recognise a `scroll` event caused by our own programmatic write rather than\n * by the user. `lastWriteTop < 0` means \"we have not written this session\", so\n * any scroll is treated as the user's.\n */\nexport function isSelfScroll(\n  scrollTop: number,\n  lastWriteTop: number,\n  epsilon: number = SELF_SCROLL_EPSILON\n): boolean {\n  return lastWriteTop >= 0 && Math.abs(scrollTop - lastWriteTop) <= epsilon\n}\n\n/**\n * Distance (px) from the true bottom within which a user scroll RE-ENGAGES\n * follow. Deliberately much tighter than DEFAULT_BOTTOM_THRESHOLD: that 100px\n * band drives the jump-to-bottom pill's visibility, and reusing it for follow\n * meant a deliberate 3-99px scroll-up kept `stick` armed — the next content\n * change then yanked the reader back to the bottom. Re-engaging only when the\n * user has returned essentially to the bottom keeps \"scrolled up to read\"\n * positions belonging to the user.\n */\nexport const FOLLOW_REENGAGE_PX = 16\n\n/**\n * Direction-aware `stick` decision for a *user-initiated* scroll (self-scrolls\n * filtered out by the caller via `isSelfScroll`):\n *\n *   1. At the true bottom (within the DPR-aware epsilon) → follow. This also\n *      absorbs the layout engine's clamp: a mid-stream content SHRINK drops\n *      scrollTop (which reads as an upward move) but lands exactly at the new\n *      bottom — releasing there froze streaming follow for the rest of the\n *      turn.\n *   2. Any other upward move → release, regardless of distance from the\n *      bottom. The scroll position now belongs to the user; only returning to\n *      the bottom (3) re-engages.\n *   3. A genuine DOWNWARD move that arrives within FOLLOW_REENGAGE_PX of the\n *      bottom → re-engage. A neutral event inside the band does NOT: that is\n *      how content collapsing under a still reader re-armed follow.\n *   4. Otherwise (downward/neutral, still away from the bottom) → keep the\n *      previous state.\n *\n * `prevScrollTop < 0` means \"no prior observation this session\". Direction is\n * unknowable then, so the decision is position-only and CONSERVATIVE: follow\n * only within the re-engage band. Keeping a stale `stick` on an unattributable\n * away-from-bottom scroll is how a reader gets yanked.\n */\nexport function resolveUserScrollStick(args: {\n  stick: boolean\n  followOutput: boolean\n  scrollTop: number\n  prevScrollTop: number\n  geom: ScrollGeom\n  /** Change in the scroller's own height since the previous scroll event.\n   *\n   *  Positive = the viewport GREW (the composer shrank under a deletion, the\n   *  keyboard closed). That growth lowers the maximum scrollTop, so the engine\n   *  clamps any reader parked closer to the bottom than the growth — with no\n   *  application write anywhere. The clamp then arrives here as an ordinary\n   *  scroll event sitting at distance ~0, which rule 1 below used to read as\n   *  \"the reader came back to the bottom\" and re-arm follow for someone who\n   *  never touched the scroller. The next turn to start then took them to the\n   *  end. Rule 1 exists to absorb a CONTENT-shrink clamp mid-stream, and content\n   *  shrink moves `scrollHeight`, not `clientHeight` — so the two are\n   *  distinguishable, and this is the delta that tells them apart. */\n  viewportGrowth?: number\n}): boolean {\n  const { stick, followOutput, scrollTop, prevScrollTop, geom } = args\n  if (!followOutput) return false\n  const dist = distanceFromBottom(geom)\n  // A viewport growth large enough to explain the reader's arrival at the bottom\n  // is the engine's clamp, not the reader. Leave `stick` exactly as it was.\n  // A native clamp only ever LOWERS scrollTop, so a downward move concurrent with\n  // the growth is the user's own and must still re-engage follow. Without the\n  // direction term a reader who deliberately scrolls down while the keyboard\n  // closes is refused their re-engagement.\n  const clampedByViewport =\n    (args.viewportGrowth ?? 0) > atBottomEpsilon() && scrollTop <= prevScrollTop + atBottomEpsilon()\n  if (dist <= atBottomEpsilon()) return clampedByViewport ? stick : true\n  if (prevScrollTop < 0) return dist <= FOLLOW_REENGAGE_PX\n  if (scrollTop < prevScrollTop - 0.5) return false\n  // Re-engagement requires a genuine DOWNWARD move, not merely a non-upward\n  // event that finds the reader inside the band. A neutral event (identical\n  // scrollTop -- the tail of an iOS momentum run, or any scroll fired while the\n  // reader is at rest) used to satisfy this, so a reader sitting mid-transcript\n  // could be re-armed by CONTENT rather than by their own hand: when rows\n  // outside the window reprice smaller than their estimates, the remaining\n  // content collapses under them and the bottom band arrives at the reader\n  // instead of the reader arriving at it. Follow re-engaged, and the next pin\n  // took them to the end -- reported as scrolling along and suddenly landing at\n  // the bottom. Distance alone cannot tell those apart; the direction of the\n  // reader's own move can.\n  if (scrollTop > prevScrollTop + 0.5 && dist <= FOLLOW_REENGAGE_PX) return true\n  return stick\n}\n\n/** Result of an automatic (RO / append) pin evaluation. */\nexport interface AutoPinResult {\n  /** Whether to write `el.scrollTop = target` now. */\n  pin: boolean\n  /** Next value for `stick` (released to false if the user scrolled up). */\n  stick: boolean\n  /** The bottom scrollTop the caller should write when `pin` is true. */\n  target: number\n}\n\n/**\n * Decide an automatic pin at the moment content changed (RO callback / append\n * layout effect / its follow-up rAF), reading LIVE geometry.\n *\n *   - Not sticking → never pin.\n *   - Sticking but the user has scrolled up since our last write\n *     (`scrollTop < lastWriteTop - epsilon`) → release stick, don't pin.\n *     This is the synchronous, race-proof guard.\n *   - Otherwise → pin to the bottom (only actually move if not already there).\n *\n * `lastWriteTop < 0` disables the scroll-up guard (used right after a slot\n * switch, before we have written anything this session).\n *\n * `viewportShrink` (px, default 0) is how much the SCROLLER'S OWN BOX has\n * shrunk since that reference was recorded — chrome mounting below the\n * transcript (a queue band, an attachment strip, a tip card), often\n * spring-animated over several frames. Our own shrink inflates\n * `distanceFromBottom` with no user input, so without this allowance the\n * distance guard reads it as \"meaningfully away from the bottom\". Paired with\n * a content SHRINK in the same commit window — a tail-row remount clamping\n * scrollTop below `lastWriteTop` — that produced a full user-scroll-up\n * signature out of two of our own layout changes: follow released mid\n * animation and the content settled a card-height low. Judging the distance\n * against the box we were last a bottom FOR keeps the guard measuring the\n * user's move rather than our own. Only the shrink's own pixels are forgiven,\n * so a genuine drag inside the same tick still releases.\n */\nexport function evaluateAutoPin(args: {\n  stick: boolean\n  geom: ScrollGeom\n  lastWriteTop: number\n  epsilon?: number\n  viewportShrink?: number\n  /** Is a turn actually producing output right now?\n   *\n   *  Follow means \"keep me at the end of a LIVE turn\". With nothing running there\n   *  is no output to follow, so a reader sitting above the bottom is not\n   *  following — and an automatic pin there is a yank with no cause, reported\n   *  from a phone as the transcript springing back after scrolling up about a\n   *  hundred pixels with nothing streaming.\n   *\n   *  Defaults to `true` = assume a run is live, which keeps the behaviour of a\n   *  caller that has no run signal to give (the app-SDK chat surface). The chat\n   *  transcript passes the real thing. */\n  runActive?: boolean\n  /** Is an anchor restore currently OWNING the scroll position?\n   *\n   *  A restore places the reader at an absolute offset and then re-lands it as\n   *  measurements arrive. An automatic pin during that window is a second owner\n   *  writing the same scroller, and the two fight: captured on a phone as\n   *  `WRITE autopin 3091->4245` answered by `WRITE settle 4245->3091`, twice in\n   *  120ms, 1,154px each way. The settle won those rounds, but only because its\n   *  budget had not expired yet -- which is why the same switch sometimes landed\n   *  at the bottom and sometimes did not.\n   *\n   *  Released rather than merely skipped, for the reason the idle branch below\n   *  gives: skipping leaves follow armed, so the next growth yanks the reader\n   *  from wherever the restore just put them. */\n  restoreGate?: boolean\n  /** Has hardware input -- wheel / touch / pointer / a scrolling key -- reached\n   *  the scroller since we last placed the reader at the bottom?\n   *\n   *  False means the reader has done nothing, so a gap that opened while they\n   *  rest on our last write was opened by content -- a row settling from its\n   *  estimate, a code-block stand-in swapping for the highlighted block, the\n   *  top spacer repricing -- and is a gap WE owe them, not one they chose.\n   *\n   *  The idle rule below cannot tell those apart from distance alone, and it\n   *  errs toward release, which was invisible wherever the browser's native\n   *  scroll anchoring quietly carried the reader through the growth. WebKit has\n   *  no scroll anchoring at all, so on an iPhone every entry into an idle\n   *  session paid the whole post-pin reprice as a displacement and then had\n   *  follow released on top of it: the transcript opened a viewport or more\n   *  above the end with nothing streaming to bring it back.\n   *\n   *  Defaults to `true` = assume the reader may have moved, which is the\n   *  release-leaning legacy behaviour for a caller that has no input signal. */\n  readerMovedSinceWrite?: boolean\n}): AutoPinResult {\n  const { stick, geom, lastWriteTop } = args\n  const epsilon = args.epsilon ?? SELF_SCROLL_EPSILON\n  const viewportShrink = Math.max(0, args.viewportShrink ?? 0)\n  const runActive = args.runActive ?? true\n  const readerMovedSinceWrite = args.readerMovedSinceWrite ?? true\n  const target = bottomTarget(geom)\n  if (args.restoreGate) return { pin: false, stick: false, target }\n  if (!stick) return { pin: false, stick: false, target }\n  // The reader is resting exactly where we last put them and has given no input\n  // since, so any gap is content settling under them -- carry them back, live\n  // turn or not. Both conditions are load-bearing. Position alone would read our\n  // own write as consent for a reader who wheeled up and happened to stop on it;\n  // input alone would drag back a programmatic reveal -- a search hit, a pinned\n  // prompt, find-in-page -- whose scroll event has not dispatched yet when a\n  // height commit lands, since none of those touch the scroller's input\n  // listeners. A reveal moves scrollTop off our write; a reprice does not.\n  const restingOnOurWrite = lastWriteTop >= 0 && Math.abs(geom.scrollTop - lastWriteTop) <= epsilon\n  if (!readerMovedSinceWrite && restingOnOurWrite) {\n    return { pin: distanceFromBottom(geom) > atBottomEpsilon(), stick: true, target }\n  }\n  // Idle: release rather than merely skip the pin. Skipping would leave follow\n  // armed, so the next turn to start would yank this reader to the bottom from\n  // wherever they had settled — the same defect one event later.\n  //\n  // But distance alone cannot say WHO opened that gap, and the two causes want\n  // opposite answers: a reader who scrolled up should be released, while a\n  // reader the CONTENT moved away from should be carried back.\n  if (!runActive && distanceFromBottom(geom) > atBottomEpsilon()) {\n    // Released. The question this branch cannot answer from geometry -- did the\n    // reader open this gap, or did the content -- is answered ABOVE by\n    // `readerMovedSinceWrite`: reaching here means input or an unexplained\n    // scroll has been seen since our last positioning, so a reader who is now\n    // above the bottom while nothing runs is one who left it. Reading our own\n    // last write as consent would be an automatic action authorizing itself;\n    // the only evidence that the reader never moved is the absence of input,\n    // and that is what the branch above requires.\n    return { pin: false, stick: false, target }\n  }\n  // Release only on a genuine user scroll-UP: scrollTop dropped below our last\n  // write AND we are now meaningfully away from the bottom. A pure content\n  // SHRINK mid-stream (a partial markdown line re-parsing, a code fence opening\n  // and reclassifying the block) clamps scrollTop below lastWriteTop too, but\n  // leaves us still AT the new bottom (distance ~0). Without the distance guard\n  // that shrink looked like a scroll-up and froze streaming follow — once\n  // released, nothing re-armed stick for the rest of the response.\n  if (\n    lastWriteTop >= 0 &&\n    geom.scrollTop < lastWriteTop - epsilon &&\n    distanceFromBottom(geom) - viewportShrink > epsilon\n  ) {\n    return { pin: false, stick: false, target }\n  }\n  return { pin: Math.abs(geom.scrollTop - target) > atBottomEpsilon(), stick: true, target }\n}\n"],"mappings":";;;;;;;;;;;AA2CA,SAAgB,kBAA0B;CACxC,MAAM,MACJ,OAAO,WAAW,eAClB,OAAO,OAAO,qBAAqB,YACnC,OAAO,mBAAmB,IACtB,OAAO,mBACP;CACN,OAAO,KAAK,IAAI,GAAG,IAAI,MAAM,EAAG;AAClC;;AAUA,SAAgB,aAAa,MAA0B;CACrD,OAAO,KAAK,IAAI,GAAG,KAAK,eAAe,KAAK,YAAY;AAC1D;;AAGA,SAAgB,mBAAmB,MAA0B;CAC3D,OAAO,KAAK,eAAe,KAAK,YAAY,KAAK;AACnD;;AAGA,SAAgB,gBAAgB,MAAkB,WAA4B;CAC5E,OAAO,mBAAmB,IAAI,KAAK;AACrC;;;;;;AAOA,SAAgB,aACd,WACA,cACA,UAAA,GACS;CACT,OAAO,gBAAgB,KAAK,KAAK,IAAI,YAAY,YAAY,KAAK;AACpE;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAgB,uBAAuB,MAmB3B;CACV,MAAM,EAAE,OAAO,cAAc,WAAW,eAAe,SAAS;CAChE,IAAI,CAAC,cAAc,OAAO;CAC1B,MAAM,OAAO,mBAAmB,IAAI;CAOpC,MAAM,qBACH,KAAK,kBAAkB,KAAK,gBAAgB,KAAK,aAAa,gBAAgB,gBAAgB;CACjG,IAAI,QAAQ,gBAAgB,GAAG,OAAO,oBAAoB,QAAQ;CAClE,IAAI,gBAAgB,GAAG,OAAO,QAAA;CAC9B,IAAI,YAAY,gBAAgB,IAAK,OAAO;CAY5C,IAAI,YAAY,gBAAgB,MAAO,QAAA,IAA4B,OAAO;CAC1E,OAAO;AACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,SAAgB,gBAAgB,MAmDd;CAChB,MAAM,EAAE,OAAO,MAAM,iBAAiB;CACtC,MAAM,UAAU,KAAK,WAAA;CACrB,MAAM,iBAAiB,KAAK,IAAI,GAAG,KAAK,kBAAkB,CAAC;CAC3D,MAAM,YAAY,KAAK,aAAa;CACpC,MAAM,wBAAwB,KAAK,yBAAyB;CAC5D,MAAM,SAAS,aAAa,IAAI;CAChC,IAAI,KAAK,aAAa,OAAO;EAAE,KAAK;EAAO,OAAO;EAAO;CAAO;CAChE,IAAI,CAAC,OAAO,OAAO;EAAE,KAAK;EAAO,OAAO;EAAO;CAAO;CAStD,MAAM,oBAAoB,gBAAgB,KAAK,KAAK,IAAI,KAAK,YAAY,YAAY,KAAK;CAC1F,IAAI,CAAC,yBAAyB,mBAC5B,OAAO;EAAE,KAAK,mBAAmB,IAAI,IAAI,gBAAgB;EAAG,OAAO;EAAM;CAAO;CASlF,IAAI,CAAC,aAAa,mBAAmB,IAAI,IAAI,gBAAgB,GAS3D,OAAO;EAAE,KAAK;EAAO,OAAO;EAAO;CAAO;CAS5C,IACE,gBAAgB,KAChB,KAAK,YAAY,eAAe,WAChC,mBAAmB,IAAI,IAAI,iBAAiB,SAE5C,OAAO;EAAE,KAAK;EAAO,OAAO;EAAO;CAAO;CAE5C,OAAO;EAAE,KAAK,KAAK,IAAI,KAAK,YAAY,MAAM,IAAI,gBAAgB;EAAG,OAAO;EAAM;CAAO;AAC3F"}

package/dist/components/conversation/scroll-follow.d.ts

@@ -0,0 +1,13 @@
+/** Internal plain-scroller binding; host-owned restoration can disable follow. */
+export declare function createScrollFollow(options: {
+    enabled: () => boolean;
+    resetKey: () => string | undefined;
+    threshold: () => number;
+}): {
+    atBottom: import("solid-js").Accessor<boolean>;
+    onScroll: () => void;
+    jump: () => void;
+    bindScroller: (element: HTMLDivElement) => void;
+    bindContent: (element: HTMLDivElement) => void;
+};
+//# sourceMappingURL=scroll-follow.d.ts.map

package/dist/components/conversation/scroll-follow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-follow.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/scroll-follow.ts"],"names":[],"mappings":"AA8BA,kFAAkF;AAClF,wBAAgB,kBAAkB,CAAC,OAAO,EAAE;IAC1C,OAAO,EAAE,MAAM,OAAO,CAAA;IACtB,QAAQ,EAAE,MAAM,MAAM,GAAG,SAAS,CAAA;IAClC,SAAS,EAAE,MAAM,MAAM,CAAA;CACxB;;;;4BA0F2B,cAAc;2BAGf,cAAc;EAIxC"}

package/dist/components/conversation/scroll-follow.js

@@ -0,0 +1,102 @@
+import { bottomTarget, computeAtBottom, evaluateAutoPin, isSelfScroll, resolveUserScrollStick } from "./scroll-follow-core.js";
+import { createEffect, createSignal, onCleanup } from "solid-js";
+//#region src/components/conversation/scroll-follow.ts
+var geometry = (element) => ({
+	scrollTop: element.scrollTop,
+	scrollHeight: element.scrollHeight,
+	clientHeight: element.clientHeight
+});
+/** Internal plain-scroller binding; host-owned restoration can disable follow. */
+function createScrollFollow(options) {
+	const [atBottom, setAtBottom] = createSignal(true);
+	let scroller;
+	let content;
+	let stick = true;
+	let lastWriteTop = -1;
+	let lastWriteClientHeight = -1;
+	let previousTop = -1;
+	let lastScrollClientHeight = 0;
+	const writePin = (element, target) => {
+		element.scrollTop = target;
+		lastWriteTop = target;
+		lastWriteClientHeight = element.clientHeight;
+		previousTop = target;
+	};
+	const pinAuto = () => {
+		if (!scroller || !options.enabled()) return;
+		const geom = geometry(scroller);
+		const result = evaluateAutoPin({
+			stick,
+			geom,
+			lastWriteTop,
+			viewportShrink: lastWriteClientHeight >= 0 ? lastWriteClientHeight - geom.clientHeight : 0
+		});
+		stick = result.stick;
+		if (result.pin) writePin(scroller, result.target);
+		else if (result.stick) {
+			lastWriteTop = result.target;
+			lastWriteClientHeight = geom.clientHeight;
+		}
+		setAtBottom(computeAtBottom(geometry(scroller), options.threshold()));
+	};
+	const onScroll = () => {
+		if (!scroller || !options.enabled()) return;
+		const geom = geometry(scroller);
+		setAtBottom(computeAtBottom(geom, options.threshold()));
+		if (!isSelfScroll(geom.scrollTop, lastWriteTop)) {
+			stick = resolveUserScrollStick({
+				stick,
+				followOutput: true,
+				scrollTop: geom.scrollTop,
+				prevScrollTop: previousTop,
+				geom,
+				viewportGrowth: lastScrollClientHeight > 0 ? geom.clientHeight - lastScrollClientHeight : 0
+			});
+			if (!stick) {
+				lastWriteTop = -1;
+				lastWriteClientHeight = -1;
+			}
+		}
+		previousTop = geom.scrollTop;
+		lastScrollClientHeight = geom.clientHeight;
+	};
+	const jump = () => {
+		if (!scroller || !options.enabled()) return;
+		stick = true;
+		writePin(scroller, bottomTarget(geometry(scroller)));
+		setAtBottom(true);
+		scroller.focus({ preventScroll: true });
+	};
+	createEffect(() => {
+		options.resetKey();
+		const enabled = options.enabled();
+		stick = true;
+		lastWriteTop = -1;
+		lastWriteClientHeight = -1;
+		previousTop = -1;
+		lastScrollClientHeight = 0;
+		setAtBottom(true);
+		if (!enabled || !scroller) return;
+		writePin(scroller, bottomTarget(geometry(scroller)));
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(pinAuto);
+		observer.observe(scroller);
+		if (content) observer.observe(content);
+		onCleanup(() => observer.disconnect());
+	});
+	return {
+		atBottom,
+		onScroll,
+		jump,
+		bindScroller: (element) => {
+			scroller = element;
+		},
+		bindContent: (element) => {
+			content = element;
+		}
+	};
+}
+//#endregion
+export { createScrollFollow };
+
+//# sourceMappingURL=scroll-follow.js.map

package/dist/components/conversation/scroll-follow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-follow.js","names":[],"sources":["../../../src/components/conversation/scroll-follow.ts"],"sourcesContent":["/*\n * Substantially translated from KiroCrew website/src/app-sdk/useChatScrollFollow.ts,\n * pinned at 283e136c0f902e965a535a7c9548c57c7504fed0.\n * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n * This product includes software developed at Amazon.com, Inc. (https://www.amazon.com/).\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy at http://www.apache.org/licenses/LICENSE-2.0\n * Unless required by applicable law or agreed to in writing, software distributed\n * under the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR\n * CONDITIONS OF ANY KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations under the License.\n * Solid owner effects replace React refs/effects; native geometry and the\n * content/viewport observer contract are retained. No session store is copied.\n */\nimport { createEffect, createSignal, onCleanup } from 'solid-js'\nimport {\n  bottomTarget,\n  computeAtBottom,\n  evaluateAutoPin,\n  isSelfScroll,\n  resolveUserScrollStick,\n} from './scroll-follow-core'\n\nconst geometry = (element: HTMLDivElement) => ({\n  scrollTop: element.scrollTop,\n  scrollHeight: element.scrollHeight,\n  clientHeight: element.clientHeight,\n})\n\n/** Internal plain-scroller binding; host-owned restoration can disable follow. */\nexport function createScrollFollow(options: {\n  enabled: () => boolean\n  resetKey: () => string | undefined\n  threshold: () => number\n}) {\n  const [atBottom, setAtBottom] = createSignal(true)\n  let scroller: HTMLDivElement | undefined\n  let content: HTMLDivElement | undefined\n  let stick = true\n  let lastWriteTop = -1\n  let lastWriteClientHeight = -1\n  let previousTop = -1\n  let lastScrollClientHeight = 0\n\n  const writePin = (element: HTMLDivElement, target: number) => {\n    // Instant writes keep the self-scroll reference synchronized. A smooth\n    // animation would produce intermediate positions that resemble user input.\n    element.scrollTop = target\n    lastWriteTop = target\n    lastWriteClientHeight = element.clientHeight\n    previousTop = target\n  }\n  const pinAuto = () => {\n    if (!scroller || !options.enabled()) return\n    const geom = geometry(scroller)\n    const result = evaluateAutoPin({\n      stick,\n      geom,\n      lastWriteTop,\n      viewportShrink: lastWriteClientHeight >= 0 ? lastWriteClientHeight - geom.clientHeight : 0,\n    })\n    stick = result.stick\n    if (result.pin) writePin(scroller, result.target)\n    else if (result.stick) {\n      lastWriteTop = result.target\n      lastWriteClientHeight = geom.clientHeight\n    }\n    setAtBottom(computeAtBottom(geometry(scroller), options.threshold()))\n  }\n  const onScroll = () => {\n    if (!scroller || !options.enabled()) return\n    const geom = geometry(scroller)\n    setAtBottom(computeAtBottom(geom, options.threshold()))\n    if (!isSelfScroll(geom.scrollTop, lastWriteTop)) {\n      stick = resolveUserScrollStick({\n        stick,\n        followOutput: true,\n        scrollTop: geom.scrollTop,\n        prevScrollTop: previousTop,\n        geom,\n        viewportGrowth: lastScrollClientHeight > 0 ? geom.clientHeight - lastScrollClientHeight : 0,\n      })\n      if (!stick) {\n        lastWriteTop = -1\n        lastWriteClientHeight = -1\n      }\n    }\n    previousTop = geom.scrollTop\n    // This baseline belongs only to scroll events, not observer callbacks.\n    // Advancing it during resize would erase the viewport-clamp evidence.\n    lastScrollClientHeight = geom.clientHeight\n  }\n  const jump = () => {\n    if (!scroller || !options.enabled()) return\n    stick = true\n    writePin(scroller, bottomTarget(geometry(scroller)))\n    setAtBottom(true)\n    // The jump control disappears at the bottom. Return its keyboard focus to\n    // the transcript instead of leaving the reader on a detached button.\n    scroller.focus({ preventScroll: true })\n  }\n\n  createEffect(() => {\n    options.resetKey()\n    const enabled = options.enabled()\n    stick = true\n    lastWriteTop = -1\n    lastWriteClientHeight = -1\n    previousTop = -1\n    lastScrollClientHeight = 0\n    setAtBottom(true)\n    if (!enabled || !scroller) return\n    writePin(scroller, bottomTarget(geometry(scroller)))\n    if (typeof ResizeObserver === 'undefined') return\n    const observer = new ResizeObserver(pinAuto)\n    observer.observe(scroller)\n    if (content) observer.observe(content)\n    onCleanup(() => observer.disconnect())\n  })\n\n  return {\n    atBottom,\n    onScroll,\n    jump,\n    bindScroller: (element: HTMLDivElement) => {\n      scroller = element\n    },\n    bindContent: (element: HTMLDivElement) => {\n      content = element\n    },\n  }\n}\n"],"mappings":";;;AAwBA,IAAM,YAAY,aAA6B;CAC7C,WAAW,QAAQ;CACnB,cAAc,QAAQ;CACtB,cAAc,QAAQ;AACxB;;AAGA,SAAgB,mBAAmB,SAIhC;CACD,MAAM,CAAC,UAAU,eAAe,aAAa,IAAI;CACjD,IAAI;CACJ,IAAI;CACJ,IAAI,QAAQ;CACZ,IAAI,eAAe;CACnB,IAAI,wBAAwB;CAC5B,IAAI,cAAc;CAClB,IAAI,yBAAyB;CAE7B,MAAM,YAAY,SAAyB,WAAmB;EAG5D,QAAQ,YAAY;EACpB,eAAe;EACf,wBAAwB,QAAQ;EAChC,cAAc;CAChB;CACA,MAAM,gBAAgB;EACpB,IAAI,CAAC,YAAY,CAAC,QAAQ,QAAQ,GAAG;EACrC,MAAM,OAAO,SAAS,QAAQ;EAC9B,MAAM,SAAS,gBAAgB;GAC7B;GACA;GACA;GACA,gBAAgB,yBAAyB,IAAI,wBAAwB,KAAK,eAAe;EAC3F,CAAC;EACD,QAAQ,OAAO;EACf,IAAI,OAAO,KAAK,SAAS,UAAU,OAAO,MAAM;OAC3C,IAAI,OAAO,OAAO;GACrB,eAAe,OAAO;GACtB,wBAAwB,KAAK;EAC/B;EACA,YAAY,gBAAgB,SAAS,QAAQ,GAAG,QAAQ,UAAU,CAAC,CAAC;CACtE;CACA,MAAM,iBAAiB;EACrB,IAAI,CAAC,YAAY,CAAC,QAAQ,QAAQ,GAAG;EACrC,MAAM,OAAO,SAAS,QAAQ;EAC9B,YAAY,gBAAgB,MAAM,QAAQ,UAAU,CAAC,CAAC;EACtD,IAAI,CAAC,aAAa,KAAK,WAAW,YAAY,GAAG;GAC/C,QAAQ,uBAAuB;IAC7B;IACA,cAAc;IACd,WAAW,KAAK;IAChB,eAAe;IACf;IACA,gBAAgB,yBAAyB,IAAI,KAAK,eAAe,yBAAyB;GAC5F,CAAC;GACD,IAAI,CAAC,OAAO;IACV,eAAe;IACf,wBAAwB;GAC1B;EACF;EACA,cAAc,KAAK;EAGnB,yBAAyB,KAAK;CAChC;CACA,MAAM,aAAa;EACjB,IAAI,CAAC,YAAY,CAAC,QAAQ,QAAQ,GAAG;EACrC,QAAQ;EACR,SAAS,UAAU,aAAa,SAAS,QAAQ,CAAC,CAAC;EACnD,YAAY,IAAI;EAGhB,SAAS,MAAM,EAAE,eAAe,KAAK,CAAC;CACxC;CAEA,mBAAmB;EACjB,QAAQ,SAAS;EACjB,MAAM,UAAU,QAAQ,QAAQ;EAChC,QAAQ;EACR,eAAe;EACf,wBAAwB;EACxB,cAAc;EACd,yBAAyB;EACzB,YAAY,IAAI;EAChB,IAAI,CAAC,WAAW,CAAC,UAAU;EAC3B,SAAS,UAAU,aAAa,SAAS,QAAQ,CAAC,CAAC;EACnD,IAAI,OAAO,mBAAmB,aAAa;EAC3C,MAAM,WAAW,IAAI,eAAe,OAAO;EAC3C,SAAS,QAAQ,QAAQ;EACzB,IAAI,SAAS,SAAS,QAAQ,OAAO;EACrC,gBAAgB,SAAS,WAAW,CAAC;CACvC,CAAC;CAED,OAAO;EACL;EACA;EACA;EACA,eAAe,YAA4B;GACzC,WAAW;EACb;EACA,cAAc,YAA4B;GACxC,UAAU;EACZ;CACF;AACF"}

package/dist/r/conversation.json

@@ -45,6 +45,16 @@
       "type": "registry:ui",
       "target": "components/conversation/message-row.tsx"
     },
+    {
+      "path": "src/components/conversation/scroll-follow-core.ts",
+      "type": "registry:ui",
+      "target": "components/conversation/scroll-follow-core.ts"
+    },
+    {
+      "path": "src/components/conversation/scroll-follow.ts",
+      "type": "registry:ui",
+      "target": "components/conversation/scroll-follow.ts"
+    },
     {
       "path": "src/components/conversation/thread-panel.tsx",
       "type": "registry:ui",

package/dist/r/registry.json

@@ -1818,6 +1818,16 @@
           "type": "registry:ui",
           "target": "components/conversation/message-row.tsx"
         },
+        {
+          "path": "src/components/conversation/scroll-follow-core.ts",
+          "type": "registry:ui",
+          "target": "components/conversation/scroll-follow-core.ts"
+        },
+        {
+          "path": "src/components/conversation/scroll-follow.ts",
+          "type": "registry:ui",
+          "target": "components/conversation/scroll-follow.ts"
+        },
         {
           "path": "src/components/conversation/thread-panel.tsx",
           "type": "registry:ui",

package/dist/r/src/components/conversation/conversation-surface.tsx

@@ -1,8 +1,9 @@
 import { ArrowDown } from 'lucide-solid'
 import type { ComponentProps, JSX } from 'solid-js'
-import { Show, createSignal, onCleanup, splitProps } from 'solid-js'
+import { Show, splitProps } from 'solid-js'
 import { cn } from '../../lib/utils'
 import { Button } from '../ui/button/button'
+import { createScrollFollow } from './scroll-follow'
 
 /**
  * ConversationSurface.
@@ -15,7 +16,7 @@ import { Button } from '../ui/button/button'
  *     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.
@@ -23,48 +24,42 @@ import { Button } from '../ui/button/button'
 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. */
   header?: JSX.Element
 }
 
-/** How far the reader is from the end of the transcript, in px. */
-function distanceFromBottom(element: HTMLDivElement): number {
-  return element.scrollHeight - element.scrollTop - element.clientHeight
-}
-
 export function ConversationSurface(props: ConversationSurfaceProps) {
-  const [local, rest] = splitProps(props, ['class', 'threshold', 'empty', 'header', 'children'])
-
-  const [atBottom, setAtBottom] = createSignal(true)
-  const [missed, setMissed] = createSignal(0)
-  let scroller: HTMLDivElement | undefined
-
-  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)
-  }
-
-  // An arriving message while the reader is at the bottom should follow it. While
-  // they are not, it must not.
-  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 [local, rest] = splitProps(props, [
+    'class',
+    'threshold',
+    'follow',
+    'resetKey',
+    'empty',
+    'header',
+    'children',
+    'onScroll',
+    'ref',
+    'tabindex',
+  ])
+  // Kobalte provides the control's semantics; transcript follow is a native
+  // geometry contract. KiroCrew's plain-scroller controller handles streaming,
+  // content collapse and pane resizing without treating them as user consent.
+  const follow = createScrollFollow({
+    enabled: () => local.follow !== false,
+    resetKey: () => local.resetKey,
+    threshold: () => local.threshold ?? 80,
+  })
+  const onScroll: JSX.EventHandlerUnion<HTMLDivElement, Event> = (event) => {
+    follow.onScroll()
+    const handler = local.onScroll
+    if (typeof handler === 'function') handler(event)
+    else if (handler) handler[0](handler[1], event)
   }
 
   return (
@@ -74,31 +69,33 @@ export function ConversationSurface(props: ConversationSurfaceProps) {
     >
       <div
         ref={(element) => {
-          scroller = element
-          observer()
+          follow.bindScroller(element)
+          if (typeof local.ref === 'function') local.ref(element)
         }}
         onScroll={onScroll}
+        tabindex={local.tabindex ?? 0}
         class="min-h-0 flex-1 overflow-y-auto overscroll-contain"
         {...rest}
       >
-        <Show when={local.header}>{local.header}</Show>
-        <Show when={local.children} fallback={<div class="p-4">{local.empty}</div>}>
-          {local.children}
-        </Show>
+        <div ref={follow.bindContent} data-slot="conversation-content">
+          <Show when={local.header}>{local.header}</Show>
+          <Show when={local.children} fallback={<div class="p-4">{local.empty}</div>}>
+            {local.children}
+          </Show>
+        </div>
       </div>
 
-      <Show when={!atBottom()}>
+      <Show when={!follow.atBottom()}>
         <div class="pointer-events-none absolute inset-x-0 bottom-3 flex justify-center">
           <Button
+            type="button"
             size="sm"
             variant="secondary"
             class="pointer-events-auto gap-1.5 shadow-md"
-            onClick={jumpToLatest}
+            onClick={follow.jump}
           >
             <ArrowDown />
-            <Show when={missed() > 0} fallback={<>Jump to latest</>}>
-              {missed()} new
-            </Show>
+            Jump to latest
           </Button>
         </div>
       </Show>