@rtzll/reflow 0.2.0 → 0.4.0

package/README.md

@@ -11,7 +11,7 @@ import { Button, Dialog, Sidebar, Switch } from '@rtzll/reflow'
 Serve `@rtzll/reflow/styles.css` with your app and enable Remix's browser runtime for interactive controls.
 
 - [Installation and runtime setup](https://github.com/rtzll/reflow/blob/main/docs/integration.md)
-- [All 35 components and known gaps](https://github.com/rtzll/reflow/blob/main/docs/coverage.md)
+- [Components and roadmap](https://github.com/rtzll/reflow/blob/main/docs/components.md)
 - [Customization](https://github.com/rtzll/reflow/blob/main/docs/customization.md)
 - [Standalone Remix starter](https://github.com/rtzll/reflow/tree/main/examples/starter)
 

package/dist/basic.js

@@ -13,7 +13,7 @@ export function Button(handle) {
         const iconOnly = props.size === 'icon' || props.size === 'icon-compact';
         const leading = iconOnly ? undefined : props.leadingIcon;
         const trailing = iconOnly ? undefined : props.trailingIcon;
-        const content = (_jsxs(_Fragment, { children: [_jsxs("span", { class: "rf-button-content", children: [leading && (_jsx("span", { class: "rf-button-icon", "aria-hidden": "true", children: leading })), _jsx("span", { class: "rf-button-label", children: props.children }), trailing && (_jsx("span", { class: "rf-button-icon", "aria-hidden": "true", children: trailing }))] }), props.loading && (_jsx("svg", { class: "rf-button-spinner", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M12 12C14 8.5 19 8.5 19 12C19 15.5 14 15.5 12 12C10 8.5 5 8.5 5 12C5 15.5 10 15.5 12 12Z", stroke: "currentColor", "stroke-width": "1.125", "stroke-linecap": "round", pathLength: "100" }) }))] }));
+        const content = (_jsxs(_Fragment, { children: [_jsxs("span", { class: "rf-button-content", children: [leading && (_jsx("span", { class: "rf-button-icon", "aria-hidden": "true", children: leading })), _jsx("span", { class: "rf-button-label", children: props.children }), trailing && (_jsx("span", { class: "rf-button-icon", "aria-hidden": "true", children: trailing }))] }), props.loading && (_jsx("svg", { class: "rf-button-spinner", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("g", { children: _jsx("circle", { cx: "8", cy: "8", r: "6.25", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", pathLength: "100", transform: "rotate(-90 8 8)" }) }) }))] }));
         const appearance = {
             class: classNames,
             'data-slot': 'button',

package/dist/breadcrumb.css

@@ -33,6 +33,16 @@
   font-size: var(--rf-text-body);
   line-height: var(--rf-leading-body);
 }
+.rf-breadcrumb-measure {
+  position: absolute;
+  inline-size: 0;
+  block-size: 0;
+  overflow: clip;
+  visibility: hidden;
+}
+.rf-breadcrumb-measure > .rf-breadcrumb-list {
+  inline-size: max-content;
+}
 
 /* Steps keep their width; only the current page gives way and truncates. */
 .rf-breadcrumb-item {

package/dist/breadcrumb.js

@@ -1,7 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "remix/component/jsx-runtime";
-import { on, ref } from 'remix/component';
+import { attrs, on, ref } from 'remix/component';
 import { Icon } from './icon.js';
 import { Dropdown, fluidHover } from './interactive.js';
+import { Tooltip } from './overlays.js';
 const fallbackEllipsisWidth = 44;
 /**
  * A trail of links to the current page, as in the reference. Every step shares
@@ -10,10 +11,12 @@ const fallbackEllipsisWidth = 44;
  */
 export function Breadcrumb(handle) {
     let list = null;
-    let hidden = 0;
+    let hidden;
     // Natural widths per step, remembered so a hidden step returns as soon as it fits.
     let widths = [];
     let ellipsisWidth = 0;
+    // Steps whose label is cut, by index, read as the pointer or keyboard focus arrives.
+    let cut = new Set();
     const listRef = ref((node, signal) => {
         if (!(node instanceof HTMLOListElement))
             return;
@@ -39,34 +42,39 @@ export function Breadcrumb(handle) {
     }
     function measure() {
         const nav = list?.parentElement;
-        if (!list || !nav)
+        if (!list || !nav || !handle.props.collapse)
             return;
         const count = handle.props.items.length;
+        const maxHidden = Math.max(0, count - 3);
         const items = Array.from(list.children);
         const steps = items.filter((item) => !item.hasAttribute('data-ellipsis'));
         const ellipsis = items.find((item) => item.hasAttribute('data-ellipsis'));
         if (ellipsis)
             ellipsisWidth = naturalWidth(ellipsis);
-        // The rendered steps are 0, then hidden + 1 onward.
-        steps.forEach((item, i) => {
-            const index = hidden > 0 && i > 0 ? i + hidden : i;
-            if (index < count)
-                widths[index] = naturalWidth(item);
-        });
+        const measuring = nav.querySelector('.rf-breadcrumb-measure > ol');
+        if (measuring) {
+            widths = Array.from(measuring.children, (item) => item.getBoundingClientRect().width);
+        }
+        else {
+            // The rendered steps are 0, then hidden + 1 onward.
+            const hiddenCount = Math.min(hidden ?? 0, maxHidden);
+            steps.forEach((item, i) => {
+                const index = i === 0 ? i : i + hiddenCount;
+                if (index < count)
+                    widths[index] = naturalWidth(item);
+            });
+        }
         let next = 0;
-        if (handle.props.collapse) {
-            const available = nav.clientWidth;
-            const width = (i) => widths[i] ?? 0;
-            let total = 0;
-            for (let i = 0; i < count; i++)
-                total += width(i);
-            const maxHidden = Math.max(0, count - 3);
-            if (total > available + 0.5) {
-                let shown = total + (ellipsisWidth || fallbackEllipsisWidth);
-                while (next < maxHidden && shown > available + 0.5) {
-                    shown -= width(1 + next);
-                    next++;
-                }
+        const available = nav.clientWidth;
+        const width = (i) => widths[i] ?? 0;
+        let total = 0;
+        for (let i = 0; i < count; i++)
+            total += width(i);
+        if (total > available + 0.5) {
+            let shown = total + (ellipsisWidth || fallbackEllipsisWidth);
+            while (next < maxHidden && shown > available + 0.5) {
+                shown -= width(1 + next);
+                next++;
             }
         }
         if (next !== hidden) {
@@ -74,37 +82,55 @@ export function Breadcrumb(handle) {
             void handle.update();
         }
     }
-    // Show the full name of a cut step on hover and focus.
-    function showFullName(event) {
-        const crumb = event.target instanceof Element
-            ? event.target.closest('.rf-breadcrumb-crumb')
-            : null;
+    // Whether a step's label is cut, read as the pointer or keyboard focus
+    // arrives: cheap, and current when its tooltip could show.
+    function checkCut(event) {
+        const crumb = event.target instanceof Element ? event.target.closest('[data-rf-step]') : null;
         const label = crumb?.querySelector('.rf-breadcrumb-label');
         if (!crumb || !label)
             return;
-        if (label.scrollWidth > label.clientWidth + 0.5)
-            crumb.title = label.textContent ?? '';
+        const index = Number(crumb.dataset.rfStep);
+        const isCut = label.scrollWidth > label.clientWidth + 0.5;
+        if (isCut === cut.has(index))
+            return;
+        cut = new Set(cut);
+        if (isCut)
+            cut.add(index);
         else
-            crumb.removeAttribute('title');
+            cut.delete(index);
+        void handle.update();
     }
     return () => {
         const { items, label = 'Breadcrumb', size, separator, collapse, openOnHover } = handle.props;
         widths.length = items.length;
-        const hide = collapse ? Math.min(hidden, Math.max(0, items.length - 3)) : 0;
+        const maxHidden = Math.max(0, items.length - 3);
+        if (!collapse)
+            hidden = undefined;
+        // Start with the shortest usable trail, then restore the steps that fit.
+        const hide = collapse ? Math.min(hidden ?? maxHidden, maxHidden) : 0;
         // Every render: a label change can change a step's width.
         if (collapse)
             handle.queueTask(() => measure());
         const trailing = separator === null ? null : (_jsx("span", { class: "rf-breadcrumb-separator", "aria-hidden": "true", children: separator ?? _jsx(Icon, { name: "chevron-right" }) }));
         const content = (item) => (_jsxs(_Fragment, { children: [item.icon, _jsx("span", { class: "rf-breadcrumb-label", children: item.label })] }));
+        // The full name of a cut step, in the library tooltip under it, as in
+        // the reference. The step is described by the tooltip only while its name is cut.
+        const withFullName = (item, index, render) => (_jsx(Tooltip, { content: item.label, side: "bottom", open: cut.has(index) ? undefined : false, renderTrigger: (props) => render(cut.has(index) ? props : { 'aria-describedby': '', mix: props.mix }) }));
+        const described = (trigger) => trigger['aria-describedby'] || undefined;
         const step = (item, index) => {
             const last = index === items.length - 1;
             if (last) {
-                return (_jsx("span", { class: "rf-breadcrumb-crumb rf-breadcrumb-page", role: "link", "aria-disabled": "true", "aria-current": "page", children: content(item) }));
+                return withFullName(item, index, (trigger) => (_jsx("span", { class: "rf-breadcrumb-crumb rf-breadcrumb-page", role: "link", "aria-disabled": "true", "aria-current": "page", "aria-describedby": described(trigger), "data-rf-step": index, mix: trigger.mix, children: content(item) })));
             }
-            if (item.menu) {
-                return (_jsx(Dropdown, { label: item.label, variant: "bare", triggerClass: "rf-breadcrumb-crumb", size: size, openOnHover: openOnHover, items: item.menu, onSelect: item.onMenuSelect, triggerContent: _jsxs(_Fragment, { children: [content(item), trailing] }) }));
+            const menu = item.menu;
+            if (menu) {
+                return withFullName(item, index, (trigger) => (_jsx(Dropdown, { label: item.label, variant: "bare", triggerClass: "rf-breadcrumb-crumb", triggerMix: [
+                        trigger.mix,
+                        attrs({ 'data-rf-step': String(index) }),
+                        described(trigger) && attrs({ 'aria-describedby': described(trigger) }),
+                    ], size: size, openOnHover: openOnHover, items: menu, onSelect: item.onMenuSelect, triggerContent: _jsxs(_Fragment, { children: [content(item), trailing] }) })));
             }
-            return (_jsxs("a", { class: "rf-breadcrumb-crumb", href: item.href, children: [content(item), trailing] }));
+            return withFullName(item, index, (trigger) => (_jsxs("a", { class: "rf-breadcrumb-crumb", href: item.href, "aria-describedby": described(trigger), "data-rf-step": index, mix: trigger.mix, children: [content(item), trailing] })));
         };
         const hiddenItems = items.slice(1, 1 + hide);
         const visible = items
@@ -126,8 +152,11 @@ export function Breadcrumb(handle) {
         ]);
         return (_jsxs("nav", { class: "rf-breadcrumb", "aria-label": label, "data-density": size, "data-separator": separator === undefined ? 'chevron' : undefined, mix: [
                 fluidHover({ axis: 'x', focusSelector: ':has(:focus-visible)' }),
-                on('pointerover', showFullName),
-                on('focusin', showFullName),
-            ], children: [_jsx("span", { class: "rf-highlight rf-breadcrumb-hover", "aria-hidden": "true", "data-rf-hover-layer": true }), _jsx("span", { class: "rf-highlight rf-focus-ring", "aria-hidden": "true", "data-rf-focus-layer": true }), _jsx("ol", { class: "rf-breadcrumb-list", mix: listRef, children: rows })] }));
+                on('pointerover', checkCut),
+                on('focusin', checkCut),
+            ], children: [_jsx("span", { class: "rf-highlight rf-breadcrumb-hover", "aria-hidden": "true", "data-rf-hover-layer": true }), _jsx("span", { class: "rf-highlight rf-focus-ring", "aria-hidden": "true", "data-rf-focus-layer": true }), _jsx("ol", { class: "rf-breadcrumb-list", mix: listRef, children: rows }), collapse && hidden === undefined && maxHidden > 0 && (_jsx("div", { class: "rf-breadcrumb-measure", "aria-hidden": "true", inert: true, children: _jsx("ol", { class: "rf-breadcrumb-list", children: items.map((item, index) => {
+                            const last = index === items.length - 1;
+                            return (_jsx("li", { class: "rf-breadcrumb-item", children: _jsxs("span", { class: last ? 'rf-breadcrumb-crumb rf-breadcrumb-page' : 'rf-breadcrumb-crumb', children: [content(item), !last && trailing] }) }, index));
+                        }) }) }))] }));
     };
 }

package/dist/color-picker.css

@@ -297,6 +297,22 @@
   cursor: ew-resize;
 }
 
+/* The drawn cursor of a locked-pointer scrub. */
+.rf-scrub-cursor {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  overflow: visible;
+  background: transparent;
+  pointer-events: none;
+  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.4));
+}
+.rf-scrub-cursor > svg {
+  display: block;
+}
+
 .rf-color-field[data-editing] .rf-color-field-body {
   cursor: text;
 }

package/dist/color-picker.js

@@ -375,11 +375,64 @@ function FormatMenu(handle) {
                                     }), children: _jsx("span", { class: "rf-menu-label", "data-label": formatLabels[format], children: _jsx("span", { children: formatLabels[format] }) }) }, format)))] }) })] }) }));
     };
 }
+// The stand-in for the OS cursor while a channel scrub holds the pointer lock,
+// as in the reference: a black ↔ arrow with a white stroke and a drop shadow,
+// legible on any surface. It lives in the top layer so it also shows over a
+// ColorPicker inside a popover.
+function scrubCursor(doc) {
+    let cursor = doc.querySelector(':scope > body > .rf-scrub-cursor');
+    if (cursor)
+        return cursor;
+    cursor = doc.createElement('div');
+    cursor.className = 'rf-scrub-cursor';
+    cursor.setAttribute('popover', 'manual');
+    cursor.setAttribute('aria-hidden', 'true');
+    cursor.innerHTML =
+        '<svg width="24" height="14" viewBox="0 0 24 14" fill="#000" stroke="#fff" stroke-width="1"><path d="M0.5 7l5-5v3.5h13V2l5 5-5 5V8.5h-13V12l-5-5z"/></svg>';
+    doc.body.append(cursor);
+    return cursor;
+}
 function ColorField(handle) {
     let draft;
     let editing = false;
     let scrubbing;
     let input = null;
+    // Drag travel is unbounded under the pointer lock; the drawn cursor wraps
+    // at the viewport edges instead of stopping.
+    function placeCursor(scrub, element) {
+        const doc = element.ownerDocument;
+        const cursor = scrubCursor(doc);
+        const width = doc.documentElement.clientWidth;
+        const x = (((scrub.x + scrub.travel) % width) + width) % width;
+        cursor.style.left = `${x - 12}px`;
+        cursor.style.top = `${scrub.y - 7}px`;
+    }
+    function lockPointer(scrub, element) {
+        const doc = element.ownerDocument;
+        if (scrub.lock || !scrub.mouse || !element.requestPointerLock)
+            return;
+        scrub.lock = new AbortController();
+        doc.addEventListener('pointerlockchange', () => {
+            const cursor = scrubCursor(doc);
+            if (doc.pointerLockElement === element && scrubbing === scrub) {
+                placeCursor(scrub, element);
+                cursor.showPopover?.();
+            }
+            else {
+                cursor.hidePopover?.();
+                scrub.lock?.abort();
+            }
+        }, { signal: scrub.lock.signal });
+        // Without the lock (refused, or unsupported) the scrub carries on with the
+        // OS cursor.
+        void Promise.resolve(element.requestPointerLock()).catch(() => scrub.lock?.abort());
+    }
+    function endScrub(element) {
+        const doc = element.ownerDocument;
+        if (doc.pointerLockElement === element)
+            doc.exitPointerLock();
+        doc.querySelector(':scope > body > .rf-scrub-cursor')?.hidePopover?.();
+    }
     const inputRef = ref((node, signal) => {
         if (!(node instanceof HTMLInputElement))
             return;
@@ -436,26 +489,46 @@ function ColorField(handle) {
                                 return;
                             scrubbing = {
                                 id: event.pointerId,
-                                x: event.clientX,
                                 start: numeric(value),
+                                x: event.clientX,
+                                y: event.clientY,
+                                lastX: event.clientX,
+                                travel: 0,
                                 moved: false,
+                                mouse: event.pointerType === 'mouse',
+                                locked: false,
                             };
                             event.currentTarget.setPointerCapture(event.pointerId);
                         }),
                         on('pointermove', (event) => {
-                            if (!scrubbing || scrubbing.id !== event.pointerId)
+                            const scrub = scrubbing;
+                            if (!scrub || scrub.id !== event.pointerId)
                                 return;
-                            const travel = event.clientX - scrubbing.x;
-                            if (!scrubbing.moved && Math.abs(travel) < 2)
+                            const element = event.currentTarget;
+                            // Under the pointer lock clientX stands still; movementX carries the travel.
+                            const locked = element.ownerDocument.pointerLockElement === element;
+                            // The move that crosses into or out of the lock is not travel:
+                            // granting the lock can warp the cursor, and leaving it lets
+                            // clientX jump back to where the cursor really is.
+                            if (locked === scrub.locked) {
+                                scrub.travel += locked ? event.movementX : event.clientX - scrub.lastX;
+                            }
+                            scrub.locked = locked;
+                            scrub.lastX = event.clientX;
+                            if (!scrub.moved && Math.abs(scrub.travel) < 2)
                                 return;
-                            scrubbing.moved = true;
-                            if (Number.isNaN(scrubbing.start))
+                            scrub.moved = true;
+                            lockPointer(scrub, element);
+                            if (locked)
+                                placeCursor(scrub, element);
+                            if (Number.isNaN(scrub.start))
                                 return;
-                            commitNumber(scrubbing.start + Math.round(travel) * step);
+                            commitNumber(scrub.start + Math.round(scrub.travel) * step);
                         }),
-                        on('pointerup', () => {
+                        on('pointerup', (event) => {
                             const moved = scrubbing?.moved;
                             scrubbing = undefined;
+                            endScrub(event.currentTarget);
                             if (moved)
                                 return;
                             editing = true;
@@ -465,8 +538,9 @@ function ColorField(handle) {
                                 input?.select();
                             });
                         }),
-                        on('pointercancel', () => {
+                        on('pointercancel', (event) => {
                             scrubbing = undefined;
+                            endScrub(event.currentTarget);
                         }),
                     ]
                     : undefined, children: [prefix && (_jsx("span", { class: "rf-color-field-prefix", "aria-hidden": "true", children: prefix })), _jsx("input", { type: "text", "aria-label": ariaLabel, inputMode: scrub ? 'numeric' : 'text', autocomplete: "off", spellcheck: false, disabled: disabled, value: shown, mix: [

package/dist/compositions.css

@@ -730,10 +730,12 @@ html[data-rf-message-transition]::view-transition-old(root) {
   column-gap: 10px;
   min-height: 0;
   overflow: clip;
+  /* As in the reference: the step opens its height on the slow spring, and
+     its icon and text fade in once that space starts opening. */
+  animation: rf-thinking-step-enter 240ms ease-out 80ms both;
 }
 .rf-thinking-timeline-row {
   padding: 6px 8px 6px 0;
-  animation: rf-thinking-step-enter 240ms ease-out var(--rf-step-delay, 0ms) both;
 }
 .rf-thinking-timeline > li {
   padding-inline-start: 8px;
@@ -748,7 +750,8 @@ html[data-rf-message-transition]::view-transition-old(root) {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 8px;
+  /* The connector stops where the step's text ends, as in the reference. */
+  padding-block: 8px 6px;
   color: var(--rf-muted);
 }
 .rf-thinking-timeline-icon > svg {
@@ -843,7 +846,6 @@ html[data-rf-message-transition]::view-transition-old(root) {
 @keyframes rf-thinking-step-enter {
   from {
     opacity: 0;
-    translate: 0 -3px;
   }
 }
 
@@ -1051,18 +1053,36 @@ html[data-rf-message-transition]::view-transition-old(root) {
   color: var(--rf-muted);
   font: var(--rf-text-caption) / var(--rf-leading-caption) var(--rf-font);
 }
-.rf-thinking-step-source,
+/* As in the reference: a source chip scales up on the moderate spring as it
+   unblurs; an image fades in as it unblurs. */
+.rf-thinking-step-source {
+  animation:
+    rf-thinking-source-enter var(--rf-spring-moderate) var(--rf-thinking-part-delay, 0ms) both,
+    rf-thinking-part-unblur 120ms ease-out var(--rf-thinking-part-delay, 0ms) both;
+}
 .rf-thinking-step-image {
-  animation: rf-thinking-part-enter 200ms ease-out var(--rf-thinking-part-delay, 0ms) both;
+  animation:
+    rf-thinking-part-fade 200ms ease-out var(--rf-thinking-part-delay, 0ms) both,
+    rf-thinking-part-unblur 150ms ease-out var(--rf-thinking-part-delay, 0ms) both;
 }
-@keyframes rf-thinking-part-enter {
+@keyframes rf-thinking-source-enter {
   from {
     opacity: 0;
+    scale: 0.85;
+  }
+}
+@keyframes rf-thinking-part-fade {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes rf-thinking-part-unblur {
+  from {
     filter: blur(4px);
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .rf-thinking-timeline-row,
+  .rf-thinking-step-body,
   .rf-thinking-step-source,
   .rf-thinking-step-image {
     animation: none;

package/dist/compositions.js

@@ -2,10 +2,12 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "remix/compone
 import { Icon } from './icon.js';
 import { messageTransitionName, transitionMessage } from './message-transition.js';
 import { on, ref } from 'remix/component';
+import { prefersReducedMotion } from '@remix-run/ui/animation';
 import { Badge, Button, Textarea } from './basic.js';
 import { Accordion } from './groups.js';
 import { QueuedStack } from './queued-stack.js';
 import { fluidHover } from './interactive.js';
+import { motion } from './systems.js';
 import { Tooltip } from './overlays.js';
 export function CarouselDots(handle) {
     const trackVisibility = ref((element, signal) => {
@@ -23,9 +25,72 @@ export function CarouselDots(handle) {
     };
 }
 export function ChatMessage(handle) {
+    // As in the reference, a message glides to its new place when the
+    // conversation re-renders around it, such as earlier messages moving up as a
+    // new one is sent and the transcript scrolls to it. Its place is read before
+    // the update lands and again on the next frame, once the transcript has
+    // scrolled. A message still playing its entrance does not glide.
+    let element = null;
+    let entered = false;
+    let glide;
+    const track = ref((node, signal) => {
+        if (!(node instanceof HTMLElement))
+            return;
+        element = node;
+        entered = !node.hasAttribute('data-animate') || node.getAnimations().length === 0;
+        const settle = (event) => {
+            if (event.target === node)
+                entered = true;
+        };
+        node.addEventListener('animationend', settle, { signal });
+        node.addEventListener('animationcancel', settle, { signal });
+        signal.addEventListener('abort', () => {
+            glide?.cancel();
+            if (element === node)
+                element = null;
+        }, { once: true });
+    });
+    function followMove() {
+        const node = element;
+        if (!node ||
+            !entered ||
+            !node.isConnected ||
+            prefersReducedMotion() ||
+            document.documentElement.hasAttribute('data-rf-message-transition'))
+            return;
+        // Where the message shows now, a glide in flight included.
+        const before = node.getBoundingClientRect().top;
+        const glideFrom = (shown) => {
+            if (element !== node || !node.isConnected)
+                return;
+            glide?.cancel();
+            const offset = shown - node.getBoundingClientRect().top;
+            if (Math.abs(offset) < 0.5)
+                return;
+            glide = node.animate([{ transform: `translateY(${offset}px)` }, { transform: 'none' }], motion.moderate);
+            // A starting animation holds its first frame from now, not from its
+            // first tick, so the next paint already shows the old place.
+            glide.currentTime = 0;
+        };
+        // Glide as soon as the update lands, so no frame shows the jump. If the
+        // transcript scrolls before the next frame, the glide restarts from the
+        // same place against the scrolled layout.
+        handle.queueTask(() => {
+            glideFrom(before);
+            const started = glide;
+            const shown = node.getBoundingClientRect().top;
+            requestAnimationFrame(() => {
+                // The message has not been painted elsewhere yet, so a restart is seamless.
+                if (glide === started && Math.abs(node.getBoundingClientRect().top - shown) >= 0.5) {
+                    glideFrom(before);
+                }
+            });
+        });
+    }
     return () => {
         const { role, label, attachments, children, size, time, actions, animate = true } = handle.props;
-        return (_jsxs("article", { class: "rf-chat-message", "data-role": role, "data-size": size, "data-animate": animate ? '' : undefined, "aria-label": label ?? (role === 'user' ? 'You' : 'Assistant'), children: [attachments?.length ? (_jsx("ul", { class: "rf-chat-attachments", "aria-label": "Attachments", children: attachments.map((attachment, index) => (_jsxs("li", { class: "rf-chat-thumb", title: attachment.detail ? `${attachment.name} (${attachment.detail})` : undefined, children: [attachment.previewUrl ? (_jsx("img", { src: attachment.previewUrl, alt: attachment.name })) : (_jsx("span", { class: "rf-chat-thumb-glyph", role: "img", "aria-label": attachment.name, children: _jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", children: [_jsx("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }), _jsx("path", { d: "M14 3v5h5" })] }) })), attachment.url && _jsx("a", { href: attachment.url, "aria-label": attachment.name })] }, index))) })) : null, children != null && children !== '' && (_jsx("div", { class: "rf-chat-body", style: handle.props.transitionId
+        followMove();
+        return (_jsxs("article", { class: "rf-chat-message", "data-role": role, "data-size": size, "data-animate": animate ? '' : undefined, "aria-label": label ?? (role === 'user' ? 'You' : 'Assistant'), mix: track, children: [attachments?.length ? (_jsx("ul", { class: "rf-chat-attachments", "aria-label": "Attachments", children: attachments.map((attachment, index) => (_jsxs("li", { class: "rf-chat-thumb", title: attachment.detail ? `${attachment.name} (${attachment.detail})` : undefined, children: [attachment.previewUrl ? (_jsx("img", { src: attachment.previewUrl, alt: attachment.name })) : (_jsx("span", { class: "rf-chat-thumb-glyph", role: "img", "aria-label": attachment.name, children: _jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", children: [_jsx("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }), _jsx("path", { d: "M14 3v5h5" })] }) })), attachment.url && _jsx("a", { href: attachment.url, "aria-label": attachment.name })] }, index))) })) : null, children != null && children !== '' && (_jsx("div", { class: "rf-chat-body", style: handle.props.transitionId
                         ? { viewTransitionName: messageTransitionName(handle.props.transitionId) }
                         : undefined, children: children })), ((role === 'user' && time) || actions) && (_jsxs("div", { class: "rf-chat-meta", children: [role === 'user' && time && _jsx("span", { class: "rf-chat-time", children: time }), actions != null && _jsx("span", { class: "rf-chat-actions", children: actions })] }))] }));
     };
@@ -428,7 +493,7 @@ export function ThinkingSteps(handle) {
         const list = children ??
             (timeline ? (_jsx("ol", { class: "rf-thinking-timeline", children: steps
                     .filter((step) => step.status !== 'pending')
-                    .map((step, index) => (_jsx("li", { "data-status": step.status ?? 'complete', style: { '--rf-step-delay': `${Math.min(index, 6) * 24}ms` }, children: _jsxs("div", { class: "rf-thinking-step-body", children: [_jsx("span", { class: "rf-thinking-timeline-icon", "aria-hidden": "true", children: step.icon ?? _jsx("span", { class: "rf-thinking-timeline-dot" }) }), _jsxs("div", { class: "rf-thinking-timeline-row", children: [_jsxs("span", { class: "rf-thinking-timeline-title", children: [step.title, step.status === 'active' && !step.title.endsWith('…') ? '…' : ''] }), _jsxs("span", { class: "rf-basic-sr-only", children: [" (", step.status ?? 'complete', ")"] }), step.description && (_jsx("span", { class: "rf-thinking-timeline-description", children: step.description })), step.content != null && (_jsx("div", { class: "rf-thinking-timeline-content", children: step.content }))] })] }) }, step.value))) })) : (_jsx(Accordion, { defaultValue: defaultValue, items: steps.map((step) => ({
+                    .map((step) => (_jsx("li", { "data-status": step.status ?? 'complete', children: _jsxs("div", { class: "rf-thinking-step-body", children: [_jsx("span", { class: "rf-thinking-timeline-icon", "aria-hidden": "true", children: step.icon ?? _jsx("span", { class: "rf-thinking-timeline-dot" }) }), _jsxs("div", { class: "rf-thinking-timeline-row", children: [_jsxs("span", { class: "rf-thinking-timeline-title", children: [step.title, step.status === 'active' && !step.title.endsWith('…') ? '…' : ''] }), _jsxs("span", { class: "rf-basic-sr-only", children: [" (", step.status ?? 'complete', ")"] }), step.description && (_jsx("span", { class: "rf-thinking-timeline-description", children: step.description })), step.content != null && (_jsx("div", { class: "rf-thinking-timeline-content", children: step.content }))] })] }) }, step.value))) })) : (_jsx(Accordion, { defaultValue: defaultValue, items: steps.map((step) => ({
                     ...step,
                     content: step.content,
                     title: (_jsxs("span", { class: "rf-step-title", "data-status": step.status ?? 'pending', children: [_jsx("span", { "aria-hidden": "true", children: step.status === 'complete' ? '✓' : '○' }), step.title, _jsxs("span", { class: "rf-basic-sr-only", children: [" (", step.status ?? 'pending', ")"] })] })),