@rtzll/reflow 0.2.0 → 0.3.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/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
@@ -14,6 +15,10 @@ export function Breadcrumb(handle) {
     // 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; and the step whose menu is open, whose full name stays hidden.
+    let cut = new Set();
+    let menuOpen;
     const listRef = ref((node, signal) => {
         if (!(node instanceof HTMLOListElement))
             return;
@@ -21,8 +26,18 @@ export function Breadcrumb(handle) {
         const observer = new ResizeObserver(() => measure());
         if (node.parentElement)
             observer.observe(node.parentElement);
+        const menus = new MutationObserver(() => {
+            const open = node.querySelector('[data-rf-step][aria-expanded="true"]');
+            const next = open ? Number(open.dataset.rfStep) : undefined;
+            if (next === menuOpen)
+                return;
+            menuOpen = next;
+            void handle.update();
+        });
+        menus.observe(node, { subtree: true, attributeFilter: ['aria-expanded'] });
         signal.addEventListener('abort', () => {
             observer.disconnect();
+            menus.disconnect();
             if (list === node)
                 list = null;
         });
@@ -74,18 +89,23 @@ 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;
@@ -96,15 +116,26 @@ export function Breadcrumb(handle) {
             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. It stays closed while the name fits and while the
+        // step's own menu is open, so it never stacks on the menu. 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) && menuOpen !== 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 +157,8 @@ 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),
+                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 })] }));
     };
 }

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', ")"] })] })),

package/dist/dates.css

@@ -31,6 +31,42 @@
     'opsz' 18;
 }
 
+/* With week numbers, the title belongs to the days: it starts past the
+   week column. */
+.rf-calendar[data-week-numbers] .rf-calendar-header {
+  padding-inline-start: calc(var(--rf-date-cell) * 0.75 + 8px);
+}
+
+/* Months side by side, as in the reference: each title centered over its
+   days, previous at the far left, next at the far right. */
+.rf-calendar-header[data-centered] {
+  position: relative;
+  justify-content: center;
+  padding-inline: 0;
+}
+.rf-calendar[data-week-numbers] .rf-calendar-header[data-centered] {
+  padding-inline-start: calc(var(--rf-date-cell) * 0.75);
+}
+.rf-calendar-header[data-centered] .rf-calendar-months-label {
+  margin-inline-end: 0;
+  text-align: center;
+}
+.rf-calendar-header[data-centered] .rf-calendar-nav {
+  position: absolute;
+  inset-block-start: 0;
+}
+.rf-calendar-header[data-centered] .rf-calendar-nav[data-direction='previous'] {
+  inset-inline-start: 0;
+}
+.rf-calendar[data-week-numbers]
+  .rf-calendar-header[data-centered]
+  .rf-calendar-nav[data-direction='previous'] {
+  inset-inline-start: calc(var(--rf-date-cell) * 0.75);
+}
+.rf-calendar-header[data-centered] .rf-calendar-nav[data-direction='next'] {
+  inset-inline-end: 0;
+}
+
 .rf-calendar-nav,
 .rf-calendar-day {
   appearance: none;
@@ -102,6 +138,46 @@
   gap: 4px;
 }
 
+/* Stacked months, as in the reference: one weekday row above them, kept in
+   view while a short popup scrolls, 16px between the months, and arrows that
+   page up and down. */
+.rf-calendar[data-stacked] .rf-calendar-months {
+  gap: 16px;
+}
+.rf-calendar-weekdays {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 3;
+  display: flex;
+  margin-block-end: 16px;
+  background: inherit;
+  color: var(--rf-muted);
+  font-size: var(--rf-text-caption, 12px);
+  line-height: var(--rf-leading-caption, 16px);
+}
+.rf-calendar-weekdays > span {
+  display: grid;
+  flex: none;
+  place-items: center;
+  inline-size: var(--rf-date-cell);
+  block-size: calc(var(--rf-date-cell) * 0.8);
+  block-size: round(down, calc(var(--rf-date-cell) * 0.8), 1px);
+}
+.rf-calendar-weekdays > .rf-calendar-weekdays-week {
+  inline-size: calc(var(--rf-date-cell) * 0.75);
+}
+.rf-calendar[data-stacked] .rf-calendar-grid thead {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.rf-calendar[data-stacked] .rf-calendar-nav svg {
+  rotate: 90deg;
+}
+
 .rf-calendar-grid {
   border-collapse: separate;
   border-spacing: 0;
@@ -186,13 +262,42 @@
   color: var(--rf-bg);
 }
 
+/* Picking a range's end, as in the reference: the proposed end is filled
+   like a selected day and glides to the pointer, with a faint ring 1px inside
+   it that goes solid while pressed. Its number draws above the fill. */
 .rf-calendar-preview-end {
   z-index: 1;
-  box-shadow: inset 0 0 0 1px var(--rf-accent, #6b97ff);
+  background: var(--rf-fg);
+}
+.rf-calendar-preview-end::before {
+  content: '';
+  position: absolute;
+  inset: 1px;
+  border: 1px solid var(--rf-bg);
+  border-radius: max(0px, calc(var(--rf-radius, 8px) - 1px));
+  opacity: 0.4;
+  transition: opacity 80ms ease;
+}
+.rf-calendar-months:has(.rf-calendar-day[data-rf-selected]:active)
+  .rf-calendar-preview-end::before {
+  opacity: 1;
+}
+.rf-calendar-day {
+  z-index: 2;
+}
+.rf-calendar-day[data-rf-selected] {
+  color: var(--rf-bg);
 }
-
 .rf-calendar-months:not([data-rf-has-selection]) .rf-calendar-day[data-rf-selected] {
-  box-shadow: inset 0 0 0 1px var(--rf-accent, #6b97ff);
+  background: var(--rf-fg);
+}
+/* The same faint ring marks a filled day under the pointer. */
+.rf-calendar-day[data-selected][data-rf-hovered] {
+  outline: 1px solid color-mix(in oklab, var(--rf-bg) 40%, transparent);
+  outline-offset: -2px;
+}
+.rf-calendar-day[data-selected][data-rf-hovered]:active {
+  outline-color: var(--rf-bg);
 }
 
 @media (forced-colors: active) {

package/dist/dates.js

@@ -255,7 +255,7 @@ export function Calendar(handle) {
         }
         function monthButton(direction, disabled) {
             const label = direction === 'left' ? 'Previous month' : 'Next month';
-            return (_jsx(Tooltip, { content: label, side: "bottom", renderTrigger: (trigger) => (_jsx("button", { ...trigger, type: "button", class: "rf-calendar-nav", "data-rf-hover-item": true, "aria-label": label, disabled: disabled, mix: [trigger.mix, on('click', () => moveMonth(direction === 'left' ? -1 : 1))], children: _jsx(DateArrow, { direction: direction }) })) }));
+            return (_jsx(Tooltip, { content: label, side: "bottom", renderTrigger: (trigger) => (_jsx("button", { ...trigger, type: "button", class: "rf-calendar-nav", "data-direction": direction === 'left' ? 'previous' : 'next', "data-rf-hover-item": true, "aria-label": label, disabled: disabled, mix: [trigger.mix, on('click', () => moveMonth(direction === 'left' ? -1 : 1))], children: _jsx(DateArrow, { direction: direction }) })) }));
         }
         function onDayKey(event, day) {
             let next;
@@ -300,9 +300,19 @@ export function Calendar(handle) {
             event.preventDefault();
             focusDay(next);
         }
-        return (_jsxs("section", { class: "rf-calendar", "aria-label": label, "data-orientation": orientation, style: cellSize && Number.isFinite(cellSize) && cellSize > 0
+        // As in the reference: side by side, each title is centered over its
+        // month, previous sits at the far left and next at the far right. One
+        // month, or months stacked, keep the title left and both arrows together
+        // on the first month's right.
+        const sideBySide = months.length > 1 && orientation !== 'vertical';
+        // Stacked months share one weekday row above them, as in the reference;
+        // each month's own header stays in its table for screen readers.
+        const stacked = months.length > 1 && orientation === 'vertical';
+        const previousDisabled = firstMonth <= monthStart(min);
+        const nextDisabled = firstMonth >= monthStart(max);
+        return (_jsxs("section", { class: "rf-calendar", "aria-label": label, "data-orientation": orientation, "data-week-numbers": showWeekNumbers ? '' : undefined, "data-stacked": stacked ? '' : undefined, style: cellSize && Number.isFinite(cellSize) && cellSize > 0
                 ? { '--rf-date-cell-size': `${cellSize}px` }
-                : undefined, children: [_jsxs("div", { class: "rf-calendar-months", mix: [
+                : undefined, children: [stacked && (_jsxs("div", { class: "rf-calendar-weekdays", "aria-hidden": "true", children: [showWeekNumbers && _jsx("span", { class: "rf-calendar-weekdays-week" }), weekdays.map((weekday) => (_jsx("span", { children: weekday.slice(0, 2) }, weekday)))] })), _jsxs("div", { class: "rf-calendar-months", mix: [
                         gridRef,
                         hover,
                         on('pointerleave', () => {
@@ -318,8 +328,9 @@ export function Calendar(handle) {
                             const weekCount = Math.ceil((firstDayOffset + daysInMonth) / 7);
                             const weeks = Array.from({ length: weekCount }, (_, row) => Array.from({ length: 7 }, (_, column) => addDays(start, row * 7 + column)));
                             const monthIso = iso(month).slice(0, 7);
-                            return (_jsxs("div", { class: "rf-calendar-month", children: [_jsxs("div", { class: "rf-calendar-header", children: [index === 0 && monthButton('left', firstMonth <= monthStart(min)), _jsx("div", { class: "rf-calendar-months-label", "aria-live": index === 0 ? 'polite' : undefined, "aria-atomic": index === 0 ? 'true' : undefined, children: monthLabel.format(month) }), index === months.length - 1 &&
-                                                monthButton('right', firstMonth >= monthStart(max))] }), _jsxs("table", { class: "rf-calendar-grid", role: "grid", "aria-label": monthLabel.format(month), children: [_jsx("thead", { children: _jsxs("tr", { children: [showWeekNumbers && (_jsx("th", { scope: "col", class: "rf-calendar-week", abbr: "Week number", children: _jsx("span", { class: "rf-basic-sr-only", children: "Week number" }) })), weekdays.map((weekday) => (_jsx("th", { scope: "col", abbr: weekday, children: weekday.slice(0, 2) }, weekday)))] }) }), _jsx("tbody", { children: weeks.map((week) => (_jsxs("tr", { children: [showWeekNumbers && (_jsx("th", { scope: "row", class: "rf-calendar-week", children: getWeekNumber(week[0]) })), week.map((day) => {
+                            return (_jsxs("div", { class: "rf-calendar-month", children: [_jsxs("div", { class: "rf-calendar-header", "data-centered": sideBySide ? '' : undefined, children: [sideBySide && index === 0 && monthButton('left', previousDisabled), _jsx("div", { class: "rf-calendar-months-label", "aria-live": index === 0 ? 'polite' : undefined, "aria-atomic": index === 0 ? 'true' : undefined, children: monthLabel.format(month) }), sideBySide
+                                                ? index === months.length - 1 && monthButton('right', nextDisabled)
+                                                : index === 0 && (_jsxs(_Fragment, { children: [monthButton('left', previousDisabled), monthButton('right', nextDisabled)] }))] }), _jsxs("table", { class: "rf-calendar-grid", role: "grid", "aria-label": monthLabel.format(month), children: [_jsx("thead", { children: _jsxs("tr", { children: [showWeekNumbers && (_jsx("th", { scope: "col", class: "rf-calendar-week", abbr: "Week number", children: _jsx("span", { class: "rf-basic-sr-only", children: "Week number" }) })), weekdays.map((weekday) => (_jsx("th", { scope: "col", abbr: weekday, children: weekday.slice(0, 2) }, weekday)))] }) }), _jsx("tbody", { children: weeks.map((week) => (_jsxs("tr", { children: [showWeekNumbers && (_jsx("th", { scope: "row", class: "rf-calendar-week", children: getWeekNumber(week[0]) })), week.map((day) => {
                                                             const dayIso = iso(day);
                                                             const outside = !dayIso.startsWith(monthIso);
                                                             if (!dayIso || (months.length > 1 && outside))

package/dist/flows.css

@@ -141,7 +141,10 @@
    rows continue below and goes at the end, which is why the footer draws no
    line of its own. Without a footer the list is the panel's last child and
    that line would double the panel edge, so it is dropped. The lines ride the
-   scroll root because the viewport's fade mask would erase them. */
+   scroll root because the viewport's fade mask would erase them.
+   This follows the reference's intent, not its pixels: there the stronger
+   line sits on the root's border, which the root's overflow clip hides, so
+   its header line never strengthens. Keep the strengthening. */
 .rf-command-scroll::before,
 .rf-command-scroll::after {
   content: '';

package/dist/groups.css

@@ -243,6 +243,40 @@
 .rf-choice-group-list[data-orientation='horizontal'] .rf-choice-group-row {
   border-radius: var(--rf-radius);
 }
+/* Once hydrated, a vertical group draws its checked fill as moving blocks, one
+   per run of checked rows, under the hover fill; the rows draw none. */
+.rf-choice-runs {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  pointer-events: none;
+}
+.rf-choice-run {
+  position: absolute;
+  background: var(--rf-active);
+  transition:
+    top var(--rf-spring-moderate),
+    left var(--rf-spring-moderate),
+    width var(--rf-spring-moderate),
+    height var(--rf-spring-moderate),
+    border-radius var(--rf-spring-moderate) var(--rf-corner-delay, 0ms),
+    opacity 80ms ease;
+}
+.rf-choice-run[data-instant] {
+  transition: none;
+}
+.rf-choice-run[data-leaving] {
+  opacity: 0;
+  transition: opacity var(--rf-exit-moderate);
+}
+.rf-choice-group-list[data-rf-selection-blocks] > .rf-choice-group-row:has(input:checked) {
+  background: transparent;
+}
+@media (prefers-reduced-motion: reduce) {
+  .rf-choice-run:not([data-leaving]) {
+    transition: opacity 80ms ease;
+  }
+}
 .rf-choice-group-row[aria-disabled='true'] {
   opacity: 0.45;
 }

package/dist/groups.js

@@ -4,6 +4,7 @@ import * as accordion from '@remix-run/ui/accordion';
 import { on } from 'remix/component';
 import { Checkbox } from './basic.js';
 import { fluidHover } from './interactive.js';
+import { selectionRuns } from './selection-runs.js';
 export function Accordion(handle) {
     return () => {
         const { items, variant = 'grouped', highlight = 'item', headingLevel = 3, children: _children, ...props } = handle.props;
@@ -12,9 +13,16 @@ export function Accordion(handle) {
     };
 }
 export function CheckboxGroup(handle) {
+    // The checked fill moves with the selection, as in the reference. A
+    // controlled value changes without a change event, so each render resyncs.
+    const runs = selectionRuns();
     return () => {
         const { options, label, hideLabel, name, disabled, value, defaultValue, onValueChange, orientation = 'vertical', } = handle.props;
+        const vertical = orientation !== 'horizontal';
+        if (vertical)
+            handle.queueTask(runs.sync);
         return (_jsxs("fieldset", { class: "rf-choice-group", disabled: disabled, children: [_jsx("legend", { class: hideLabel ? 'rf-basic-sr-only' : undefined, children: label }), _jsxs("div", { class: "rf-choice-group-list", "data-orientation": orientation, mix: [
+                        vertical && runs.mix,
                         fluidHover({
                             axis: orientation === 'horizontal' ? 'x' : 'y',
                             focusSelector: ':has(input:focus-visible)',
@@ -43,7 +51,7 @@ export function CheckboxGroup(handle) {
                                 const selected = event.currentTarget.querySelectorAll('input[type="checkbox"]:checked');
                                 onValueChange(Array.from(selected, (input) => input.value));
                             }),
-                    ], children: [_jsx("div", { class: "rf-highlight", "aria-hidden": "true", "data-rf-hover-layer": true }), _jsx("div", { class: "rf-highlight rf-focus-ring", "aria-hidden": "true", "data-rf-focus-layer": true }), options.map((option) => (_jsx("div", { class: "rf-choice-group-row", "data-rf-hover-item": true, "aria-disabled": disabled || option.disabled || undefined, children: _jsx(Checkbox, { name: name, value: option.value, disabled: option.disabled, checked: value?.includes(option.value), defaultChecked: value === undefined ? defaultValue?.includes(option.value) : undefined, label: _jsxs(_Fragment, { children: [option.label, option.description && _jsx("small", { children: option.description })] }) }) }, option.value)))] })] }));
+                    ], children: [vertical && _jsx("div", { class: "rf-choice-runs", "aria-hidden": "true", "data-rf-selection-runs": true }), _jsx("div", { class: "rf-highlight", "aria-hidden": "true", "data-rf-hover-layer": true }), _jsx("div", { class: "rf-highlight rf-focus-ring", "aria-hidden": "true", "data-rf-focus-layer": true }), options.map((option) => (_jsx("div", { class: "rf-choice-group-row", "data-rf-hover-item": true, "aria-disabled": disabled || option.disabled || undefined, children: _jsx(Checkbox, { name: name, value: option.value, disabled: option.disabled, checked: value?.includes(option.value), defaultChecked: value === undefined ? defaultValue?.includes(option.value) : undefined, label: _jsxs(_Fragment, { children: [option.label, option.description && _jsx("small", { children: option.description })] }) }) }, option.value)))] })] }));
     };
 }
 export function RadioGroup(handle) {

package/dist/icon-data.d.ts

@@ -281,6 +281,19 @@ export declare const defaultIcons: {
     }], readonly ['path', {
         readonly d: 'M12 5v14';
     }]];
+    readonly pause: readonly [readonly ['rect', {
+        readonly x: '14';
+        readonly y: '3';
+        readonly width: '5';
+        readonly height: '18';
+        readonly rx: '1';
+    }], readonly ['rect', {
+        readonly x: '5';
+        readonly y: '3';
+        readonly width: '5';
+        readonly height: '18';
+        readonly rx: '1';
+    }]];
     readonly 'rotate-ccw': readonly [readonly ['path', {
         readonly d: 'M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8';
     }], readonly ['path', {

package/dist/icon-data.js

@@ -246,6 +246,10 @@ export const defaultIcons = {
         ['path', { d: 'M5 12h14' }],
         ['path', { d: 'M12 5v14' }],
     ],
+    pause: [
+        ['rect', { x: '14', y: '3', width: '5', height: '18', rx: '1' }],
+        ['rect', { x: '5', y: '3', width: '5', height: '18', rx: '1' }],
+    ],
     'rotate-ccw': [
         ['path', { d: 'M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8' }],
         ['path', { d: 'M3 3v5h5' }],

package/dist/interactive.d.ts

@@ -1,4 +1,4 @@
-import type { Handle, RemixNode } from 'remix/component';
+import type { Handle, MixInput, RemixNode } from 'remix/component';
 export interface FluidHoverOptions {
     /** Track the pointer on one axis or across a two-dimensional grid. */
     axis?: 'x' | 'y' | 'both';
@@ -62,6 +62,8 @@ export interface DropdownProps {
     /** `bare` renders an unstyled button trigger that takes its look from `triggerClass`, for sidebar rows and actions. */
     variant?: 'outline' | 'ghost' | 'bare';
     triggerClass?: string;
+    /** Extra behavior on the trigger, such as a Tooltip's trigger props. */
+    triggerMix?: MixInput;
     /** Which side of the trigger the menu opens on. Default bottom. */
     side?: 'top' | 'bottom';
     searchable?: boolean;

package/dist/interactive.js

@@ -376,12 +376,14 @@ export function Dropdown(handle) {
                                 offset: 6,
                             }),
                             hoverMix,
+                            handle.props.triggerMix,
                         ], children: handle.props.triggerContent ?? label })), !handle.props.inline && variant !== 'bare' && (_jsx(Button, { class: "rf-dropdown-trigger", variant: variant === 'ghost' ? 'ghost' : 'tertiary', size: size, trailingIcon: handle.props.chevron === false ? undefined : (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "m4 6 4 4 4-4", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }) })), mix: [
                             menu.trigger({
                                 placement: `${handle.props.side ?? 'bottom'}-${align}`,
                                 offset: 6,
                             }),
                             hoverMix,
+                            handle.props.triggerMix,
                         ], children: handle.props.triggerContent ?? label })), _jsx(DropdownSurface, { inline: handle.props.inline, hover: hovering ? { control: hover, closeDelay } : undefined, items: displayedItems, emptyMessage: handle.props.emptyMessage, search: searchable || handle.props.creatable
                             ? { query, setQuery, placeholder: searchPlaceholder }
                             : undefined })] }) }));
@@ -517,7 +519,7 @@ function DropdownSurface(handle) {
                                     ? search.query.slice(0, -1)
                                     : search.query + event.key);
                             }, true),
-                    ], children: [_jsx("span", { class: "rf-highlight rf-menu-hover", "aria-hidden": "true", "data-rf-hover-layer": true }), handle.props.inline && (_jsx("span", { class: "rf-highlight rf-focus-ring", "aria-hidden": "true", "data-rf-focus-layer": true })), items.length === 0 && search && (_jsx("div", { class: "rf-menu-empty", role: "status", children: handle.props.emptyMessage ?? 'No results' })), items.map((item, index) => (_jsxs("div", { role: "none", class: "rf-menu-entry", children: [item.separatorBefore && (index > 0 || !normalized) && (_jsx("div", { class: "rf-menu-separator", role: "separator" })), item.group && item.group !== items[index - 1]?.group && (_jsx("div", { class: "rf-menu-group-label", children: item.group })), item.children && item.children.length > 0 ? (_jsxs(menu.Context, { label: item.label, children: [_jsx("div", { class: "rf-menu-item", "data-rf-hover-item": true, mix: menu.submenuTrigger({
+                    ], children: [_jsx("span", { class: "rf-highlight rf-menu-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 }), items.length === 0 && search && (_jsx("div", { class: "rf-menu-empty", role: "status", children: handle.props.emptyMessage ?? 'No results' })), items.map((item, index) => (_jsxs("div", { role: "none", class: "rf-menu-entry", children: [item.separatorBefore && (index > 0 || !normalized) && (_jsx("div", { class: "rf-menu-separator", role: "separator" })), item.group && item.group !== items[index - 1]?.group && (_jsx("div", { class: "rf-menu-group-label", children: item.group })), item.children && item.children.length > 0 ? (_jsxs(menu.Context, { label: item.label, children: [_jsx("div", { class: "rf-menu-item", "data-rf-hover-item": true, mix: menu.submenuTrigger({
                                                 value: item.value,
                                                 label: item.label,
                                                 disabled: item.disabled,

package/dist/selection-runs.d.ts

@@ -0,0 +1,4 @@
+export declare function selectionRuns(): {
+    mix: import("remix/component").MixinDescriptor<Element, [callback: (node: Element, signal: AbortSignal) => void], import("remix/component").ElementProps>;
+    sync: () => void;
+};

package/dist/selection-runs.js

@@ -0,0 +1,221 @@
+import { ref } from 'remix/component';
+// The reference's merged-background timing: the inner corners trail the edges
+// by 70ms, and a merge commits once the halves have met.
+const cornerDelay = 70;
+const springMs = 200;
+const convergeMs = springMs + cornerDelay + 80;
+/** Groups sorted row indices into runs, keeping each run's id while any of its rows had one. */
+function assignRuns(sorted, previous, last) {
+    const spans = [];
+    for (const index of sorted) {
+        const span = spans[spans.length - 1];
+        if (span && index === span.end + 1)
+            span.end = index;
+        else
+            spans.push({ start: index, end: index });
+    }
+    const used = new Set();
+    const byRow = new Map();
+    const runs = spans.map((span) => {
+        let id;
+        for (let i = span.start; i <= span.end && id === undefined; i++) {
+            const prior = previous.get(i);
+            if (prior !== undefined && !used.has(prior))
+                id = prior;
+        }
+        id ??= ++last.id;
+        used.add(id);
+        for (let i = span.start; i <= span.end; i++)
+            byRow.set(i, id);
+        return { ...span, id };
+    });
+    return { runs, byRow };
+}
+/** Two runs inside `outer`, separated by exactly one row: the shape one click merges or splits. */
+function bridge(outer, runs) {
+    const inside = runs
+        .filter((run) => run.start >= outer.start && run.end <= outer.end)
+        .sort((a, b) => a.start - b.start);
+    if (inside.length !== 2)
+        return null;
+    const [up, low] = inside;
+    return low.start === up.end + 2 ? { up, low, gap: up.end + 1 } : null;
+}
+export function selectionRuns() {
+    let host = null;
+    let layer = null;
+    let runs = [];
+    let byRow = new Map();
+    const last = { id: 0 };
+    const blocks = new Map();
+    // Halves absorbed by a merge, dropped when the merge commits.
+    const ghosts = new Set();
+    let commit;
+    let frame = 0;
+    function rowBoxes(rows) {
+        const parent = host.getBoundingClientRect();
+        // Translate back into local CSS pixels when a preview scales its contents.
+        const scaleX = parent.width / host.offsetWidth || 1;
+        const scaleY = parent.height / host.offsetHeight || 1;
+        return rows.map((row) => {
+            const rect = row.getBoundingClientRect();
+            return {
+                top: (rect.top - parent.top) / scaleY - host.clientTop,
+                left: (rect.left - parent.left) / scaleX - host.clientLeft,
+                width: rect.width / scaleX,
+                height: rect.height / scaleY,
+            };
+        });
+    }
+    function paint(block, box, radii, { instant = false, delayCorners = false } = {}) {
+        block.toggleAttribute('data-instant', instant);
+        block.style.setProperty('--rf-corner-delay', delayCorners ? `${cornerDelay}ms` : '0ms');
+        block.style.top = `${box.top}px`;
+        block.style.left = `${box.left}px`;
+        block.style.width = `${box.width}px`;
+        block.style.height = `${box.height}px`;
+        block.style.borderRadius = radii.map((r) => `${r}px`).join(' ');
+        if (instant)
+            void block.offsetWidth;
+    }
+    function create() {
+        const block = host.ownerDocument.createElement('span');
+        block.className = 'rf-choice-run';
+        block.setAttribute('data-instant', '');
+        layer.append(block);
+        return block;
+    }
+    function drop(block, instant) {
+        ghosts.delete(block);
+        if (instant) {
+            block.remove();
+            return;
+        }
+        block.setAttribute('data-leaving', '');
+        setTimeout(() => block.remove(), 200);
+    }
+    function sync() {
+        frame = 0;
+        if (!host || !layer)
+            return;
+        const rows = Array.from(host.querySelectorAll(':scope > .rf-choice-group-row'));
+        const checked = rows.flatMap((row, index) => row.querySelector('input:checked') ? [index] : []);
+        const previous = runs;
+        const next = assignRuns(checked, byRow, last);
+        runs = next.runs;
+        byRow = next.byRow;
+        const boxes = rowBoxes(rows);
+        const radius = parseFloat(getComputedStyle(rows[0] ?? host).borderTopLeftRadius) || 0;
+        const full = [radius, radius, radius, radius];
+        const span = (run) => {
+            const start = boxes[run.start];
+            const end = boxes[run.end];
+            return {
+                top: start.top,
+                left: Math.min(start.left, end.left),
+                width: Math.max(start.width, end.width),
+                height: end.top + end.height - start.top,
+            };
+        };
+        // A merge in flight that this change undid leaves its ghost behind.
+        clearTimeout(commit);
+        for (const ghost of ghosts)
+            drop(ghost, true);
+        // Runs that are gone fade out, unless a merge absorbs them below.
+        const live = new Set(runs.map((run) => run.id));
+        const merges = runs.flatMap((run) => {
+            const pair = bridge(run, previous);
+            return pair && (pair.up.id === run.id || pair.low.id === run.id) ? [{ run, ...pair }] : [];
+        });
+        const splits = previous.flatMap((run) => {
+            const pair = bridge(run, runs);
+            return pair ? [{ run, ...pair }] : [];
+        });
+        const absorbed = new Set(merges.map(({ run, up, low }) => (run.id === up.id ? low.id : up.id)));
+        // Blocks of runs a merge absorbed, kept to glide in as the lower half.
+        const retired = new Map();
+        for (const [id, block] of blocks) {
+            if (live.has(id))
+                continue;
+            blocks.delete(id);
+            if (absorbed.has(id))
+                retired.set(id, block);
+            else
+                drop(block, false);
+        }
+        for (const run of runs) {
+            const fresh = !blocks.has(run.id);
+            const block = blocks.get(run.id) ?? create();
+            blocks.set(run.id, block);
+            if (fresh)
+                paint(block, span(run), full, { instant: true });
+            else
+                paint(block, span(run), full);
+        }
+        for (const { run, up, low, gap } of merges) {
+            const otherId = run.id === up.id ? low.id : up.id;
+            const ghost = retired.get(otherId);
+            const survivor = blocks.get(run.id);
+            const box = span(run);
+            const middle = boxes[gap].top + boxes[gap].height / 2;
+            // The halves glide to the middle of the bridge row, inner corners straightening.
+            paint(survivor, { ...box, height: middle - box.top }, [radius, radius, 0, 0], {
+                delayCorners: true,
+            });
+            if (ghost) {
+                ghosts.add(ghost);
+                paint(ghost, { ...box, top: middle, height: box.top + box.height - middle }, [0, 0, radius, radius], { delayCorners: true });
+            }
+            commit = setTimeout(() => {
+                // One block over the whole run, swapped in without visible motion.
+                paint(survivor, span(run), full, { instant: true });
+                for (const ghost of ghosts)
+                    drop(ghost, true);
+            }, convergeMs);
+        }
+        for (const { run, up, low, gap } of splits) {
+            const upper = blocks.get(up.id);
+            const lower = blocks.get(low.id);
+            if (!upper || !lower)
+                continue;
+            const box = span(run);
+            const middle = boxes[gap].top + boxes[gap].height / 2;
+            // Snap into two abutting halves at the seam, then glide apart.
+            paint(upper, { ...box, height: middle - box.top }, [radius, radius, 0, 0], {
+                instant: true,
+            });
+            paint(lower, { ...box, top: middle, height: box.top + box.height - middle }, [0, 0, radius, radius], { instant: true });
+            paint(upper, span(up), full);
+            paint(lower, span(low), full);
+        }
+    }
+    function schedule() {
+        if (!frame)
+            frame = requestAnimationFrame(sync);
+    }
+    const mix = ref((element, signal) => {
+        if (!(element instanceof HTMLElement))
+            return;
+        host = element;
+        layer = element.querySelector(':scope > [data-rf-selection-runs]');
+        if (!layer)
+            return;
+        host.setAttribute('data-rf-selection-blocks', '');
+        const size = new ResizeObserver(schedule);
+        size.observe(element);
+        element.addEventListener('change', () => sync(), { signal });
+        element.closest('form')?.addEventListener('reset', () => setTimeout(sync), { signal });
+        sync();
+        signal.addEventListener('abort', () => {
+            size.disconnect();
+            cancelAnimationFrame(frame);
+            clearTimeout(commit);
+            if (host === element) {
+                host.removeAttribute('data-rf-selection-blocks');
+                host = null;
+                layer = null;
+            }
+        });
+    });
+    return { mix, sync: schedule };
+}

package/dist/sidebar.css

@@ -184,6 +184,14 @@
     }
   }
 }
+/* These menus mark keyboard focus with the row highlight, not the moving ring. */
+:is(.rf-sidebar-header, .rf-sidebar-footer)
+  .rf-sidebar-row
+  + .rf-dropdown-surface
+  > .rf-menu-list
+  > .rf-focus-ring {
+  display: none;
+}
 .rf-sidebar-row {
   position: relative;
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rtzll/reflow",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "files": [
     "dist",