@rtzll/reflow 0.1.0 → 0.3.0

package/dist/interactive.js

@@ -250,7 +250,86 @@ export function Tabs(handle) {
                         ], children: [_jsx("span", { class: "rf-highlight rf-tab-selection", "aria-hidden": "true", "data-rf-selection-layer": true }), _jsx("span", { class: "rf-highlight rf-tab-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.map((item) => (_jsxs("button", { class: "rf-tab", type: "button", "aria-label": item.label, "data-rf-hover-item": true, "data-active-label": activeLabel && item.icon != null ? '' : undefined, mix: tabs.tab({ name: item.value, disabled: item.disabled }), children: [item.icon != null && (_jsx("span", { class: "rf-tab-icon", "aria-hidden": "true", children: item.icon })), _jsx("span", { class: "rf-tab-label", "data-label": item.label, children: _jsx("span", { children: item.label }) })] }, item.value)))] }), items.map((item) => (_jsx("div", { class: "rf-tab-panel", tabIndex: item.panel != null ? 0 : undefined, mix: tabs.panel({ name: item.value }), children: item.panel }, item.value)))] }) }));
     };
 }
+/**
+ * One timer shared by a hover-opening trigger and its menu surface, as in the
+ * reference. A menu opened by hover closes when the pointer leaves both; one
+ * opened by a click or the keyboard, or pinned by a click, stays until it is
+ * dismissed as usual. A hover open is a preview, so it leaves focus in place.
+ */
+function createHoverControl(signal) {
+    let timer;
+    let menu;
+    // True while the open menu is one the hover timer opened.
+    let hoverOpened = false;
+    const cancel = () => clearTimeout(timer);
+    signal.addEventListener('abort', cancel, { once: true });
+    return {
+        attach(next) {
+            menu = next;
+        },
+        cancel,
+        enter(delay) {
+            cancel();
+            const open = () => {
+                // A menu already open from a click or a pin stays the reader's.
+                if (!menu || menu.isOpen)
+                    return;
+                // The menu ignores opens while a close is still settling; keep
+                // asking while the pointer rests on the trigger.
+                if (menu.state !== 'idle') {
+                    timer = setTimeout(open, 16);
+                    return;
+                }
+                hoverOpened = true;
+                void menu.open({ strategy: 'none' });
+            };
+            timer = setTimeout(open, delay);
+        },
+        leave(closeDelay) {
+            cancel();
+            timer = setTimeout(() => {
+                if (!menu || !hoverOpened)
+                    return;
+                hoverOpened = false;
+                if (menu.isOpen)
+                    void menu.closeAll({ focusRoot: false });
+            }, closeDelay);
+        },
+        /** A click on a hover-opened trigger pins the menu instead of closing it. Returns true when it pinned. */
+        pin() {
+            cancel();
+            const pinned = hoverOpened && !!menu?.isOpen;
+            hoverOpened = false;
+            return pinned;
+        },
+        /** Any other open (click, keyboard) belongs to the reader. */
+        release() {
+            hoverOpened = false;
+        },
+    };
+}
+function hoverTrigger(hover, delay, closeDelay) {
+    return [
+        on('pointerenter', (event) => {
+            if (event.pointerType === 'mouse')
+                hover.enter(delay);
+        }),
+        on('pointerleave', (event) => {
+            if (event.pointerType === 'mouse')
+                hover.leave(closeDelay);
+        }),
+        // Capture runs before the menu trigger's own click toggle.
+        on('click', (event) => {
+            if (!hover.pin())
+                return;
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }, true),
+        on('keydown', () => hover.release()),
+    ];
+}
 export function Dropdown(handle) {
+    const hover = createHoverControl(handle.signal);
     let query = '';
     let created = [];
     const createValue = `${handle.id}-create`;
@@ -261,7 +340,9 @@ export function Dropdown(handle) {
         void handle.update();
     }
     return () => {
-        const { label, items, size, align = 'start', variant = 'outline', searchable, searchPlaceholder = 'Search…', } = handle.props;
+        const { label, items, size, align = 'start', variant = 'outline', searchable, searchPlaceholder = 'Search…', delay = 100, closeDelay = 150, } = handle.props;
+        const hovering = !!handle.props.openOnHover && !handle.props.inline;
+        const hoverMix = hovering ? hoverTrigger(hover, delay, closeDelay) : undefined;
         const allItems = [
             ...items,
             ...created.filter((entry) => !items.some((item) => item.value === entry.value)),
@@ -289,13 +370,21 @@ export function Dropdown(handle) {
                     return;
                 }
                 handle.props.onSelect?.(event.item.value ?? event.item.name, event.item.checked);
-            }), children: _jsxs(menu.Context, { label: label, children: [!handle.props.inline && variant === 'bare' && (_jsx("button", { type: "button", "aria-label": label, class: `rf-dropdown-trigger ${handle.props.triggerClass ?? ''}`, mix: menu.trigger({
-                            placement: `${handle.props.side ?? 'bottom'}-${align}`,
-                            offset: 6,
-                        }), 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,
-                        }), children: handle.props.triggerContent ?? label })), _jsx(DropdownSurface, { inline: handle.props.inline, items: displayedItems, emptyMessage: handle.props.emptyMessage, search: searchable || handle.props.creatable
+            }), children: _jsxs(menu.Context, { label: label, children: [!handle.props.inline && variant === 'bare' && (_jsx("button", { type: "button", "aria-label": label, class: `rf-dropdown-trigger ${handle.props.triggerClass ?? ''}`, mix: [
+                            menu.trigger({
+                                placement: `${handle.props.side ?? 'bottom'}-${align}`,
+                                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 })] }) }));
     };
@@ -306,6 +395,7 @@ function matchesMenuQuery(item, query) {
 }
 function DropdownSurface(handle) {
     const context = handle.context.get(menu.Context);
+    handle.props.hover?.control.attach(context);
     const highlight = fluidHover({ highlightedSelector: '[data-highlighted]' });
     const checked = new Map();
     // Remix UI 0.13.1 unconditionally closes after its activation path. Keep
@@ -361,6 +451,20 @@ function DropdownSurface(handle) {
             : handle.props.items;
         return (_jsxs("div", { class: "rf-menu-surface rf-dropdown-surface", "data-inline": handle.props.inline || undefined, mix: [
                 !handle.props.inline && menu.popover(),
+                // A hover-opened menu stays while the pointer is over it, submenus
+                // included (they render inside this surface), and closes once the
+                // pointer leaves both the menu and its trigger.
+                handle.props.hover && [
+                    on('pointerenter', (event) => {
+                        if (event.pointerType === 'mouse')
+                            handle.props.hover?.control.cancel();
+                    }),
+                    on('pointerleave', (event) => {
+                        const hover = handle.props.hover;
+                        if (event.pointerType === 'mouse' && hover)
+                            hover.control.leave(hover.closeDelay);
+                    }),
+                ],
                 search &&
                     on('toggle', (event) => {
                         if (event.newState === 'open')
@@ -415,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/dist/styles.css

@@ -9,4 +9,5 @@
 @import './flows.css';
 @import './range-color.css';
 @import './color-picker.css';
+@import './breadcrumb.css';
 @import './systems.css';

package/package.json

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