@ruckc/truss-ui 1.2.0 → 1.4.0

package/dist/grid-layout.js

@@ -0,0 +1,100 @@
+/**
+ * Pure layout engine behind GridLayout: integer grid cells, collision resolution, vertical compaction,
+ * size clamping and responsive column mapping. Nothing here touches the DOM and no function mutates its input.
+ */
+const int = (n, fallback = 0) => (Number.isFinite(n) ? Math.round(n) : fallback);
+const between = (n, lo, hi) => Math.min(Math.max(n, lo), Math.max(lo, hi));
+/** Whether two items overlap (touching edges do not count). */
+export function collides(a, b) {
+    return a.id !== b.id && a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
+}
+/** Number of rows the layout occupies. */
+export function bottom(items) {
+    return items.reduce((m, i) => Math.max(m, i.y + i.h), 0);
+}
+/** Clamp one item into `cols` columns: size within its min/max (and the grid), position inside the grid. */
+export function clampItem(item, cols) {
+    const c = Math.max(1, int(cols, 1));
+    const minW = between(int(item.minW ?? 1, 1), 1, c);
+    const maxW = between(int(item.maxW ?? c, c), minW, c);
+    const minH = Math.max(1, int(item.minH ?? 1, 1));
+    const maxH = Math.max(minH, int(item.maxH ?? Infinity, Infinity) || Infinity);
+    const w = between(int(item.w, minW), minW, maxW);
+    const h = between(int(item.h, minH), minH, maxH);
+    return { ...item, w, h, x: between(int(item.x), 0, c - w), y: Math.max(0, int(item.y)) };
+}
+const byPosition = (a, b) => a.y - b.y || a.x - b.x;
+/**
+ * Settle a layout. Static items and `anchorId` keep their cells; every other item is pushed down past
+ * whatever it collides with, then pulled up as far as it can go (vertical compaction). The anchor itself
+ * is not compacted, so a tile being dragged stays where it was put. When the anchor moved down (`fromY` is where
+ * it started), a tile that was below that start and now collides with it hops above the anchor if there is
+ * room, so a tile can be dragged down past its neighbours (a swap) instead of shoving them ahead of it.
+ */
+function settle(layout, anchorId, fromY = Infinity) {
+    const anchor = layout.find((i) => i.id === anchorId);
+    const placed = layout.filter((i) => i.static || i.id === anchorId);
+    const rest = layout.filter((i) => !(i.static || i.id === anchorId)).sort(byPosition);
+    const hit = (it) => placed.find((p) => collides(it, p));
+    for (const it of rest) {
+        const first = hit(it);
+        if (first && first === anchor && it.y >= fromY && anchor.y > fromY && anchor.y - it.h >= 0) {
+            const y = it.y;
+            it.y = anchor.y - it.h;
+            if (hit(it))
+                it.y = y;
+        }
+        for (let c = hit(it); c; c = hit(it))
+            it.y = c.y + c.h;
+        while (it.y > 0) {
+            it.y -= 1;
+            if (hit(it)) {
+                it.y += 1;
+                break;
+            }
+        }
+        placed.push(it);
+    }
+    return layout;
+}
+/** Clamp every item and compact the layout vertically. */
+export function compact(items, cols) {
+    return settle(items.map((i) => clampItem(i, cols)));
+}
+/** Fit a layout to a (possibly narrower) column count: clamp, resolve collisions, compact. */
+export const fitToCols = compact;
+function change(items, id, cols, edit) {
+    const layout = items.map((i) => clampItem(i, cols));
+    const at = layout.findIndex((i) => i.id === id);
+    if (at < 0 || layout[at].static)
+        return settle(layout);
+    const from = layout[at].y;
+    const next = clampItem(edit(layout[at]), cols);
+    if (layout.some((o) => o.static && collides(next, o)))
+        return settle(layout); // a static tile is an obstacle, not something to push
+    layout[at] = next;
+    return settle(layout, id, from);
+}
+/** Move an item to (x, y): clamped to the grid, colliding items are pushed down, the rest compact around it. */
+export function moveItem(items, id, x, y, cols) {
+    return change(items, id, cols, (i) => ({ ...i, x, y }));
+}
+/** Resize an item to w by h cells, within its min/max and the grid edge; colliding items are pushed down. */
+export function resizeItem(items, id, w, h, cols) {
+    return change(items, id, cols, (i) => ({ ...i, w: Math.min(w, Math.max(1, cols - i.x)), h })); // grow towards the edge, never shift
+}
+/**
+ * Columns for a container width. `breakpoints` maps a minimum width in px to a column count; the largest
+ * key not above `width` wins, and a width below every key uses the smallest key. Without breakpoints it is `fallback`.
+ */
+export function colsFor(width, breakpoints, fallback) {
+    const keys = Object.keys(breakpoints ?? {}).map(Number).filter(Number.isFinite).sort((a, b) => a - b);
+    if (!breakpoints || !keys.length)
+        return fallback;
+    const key = [...keys].reverse().find((k) => k <= width) ?? keys[0];
+    return Math.max(1, int(breakpoints[key], fallback));
+}
+/** Whether two layouts place every item identically. */
+export function sameLayout(a, b) {
+    return a.length === b.length && a.every((i, n) => i.id === b[n].id && i.x === b[n].x && i.y === b[n].y && i.w === b[n].w && i.h === b[n].h);
+}

package/dist/hotkeys.svelte.d.ts

@@ -0,0 +1,45 @@
+import { type Combo } from './keys.js';
+export type HotkeyOptions = {
+    /** Where the binding is live. `'global'` (default) is suppressed while a modal scope is on top (see `hotkeys.pushScope`). */
+    scope?: string;
+    /** Fire even while the user is typing in an input, textarea, select or contenteditable element. Off by default. */
+    allowInInput?: boolean;
+    /** Human-readable label; bindings with one are listed by `<ShortcutSheet>`. */
+    description?: string;
+    /** Heading to list the shortcut under in `<ShortcutSheet>`. */
+    group?: string;
+    /** Checked on every key press; return false to leave the binding inactive. */
+    when?: () => boolean;
+    /** Call `preventDefault()` on the event when the binding fires. Default true. */
+    preventDefault?: boolean;
+};
+export type Hotkey = Required<Pick<HotkeyOptions, 'scope' | 'allowInInput' | 'preventDefault'>> & Pick<HotkeyOptions, 'description' | 'group' | 'when'> & {
+    id: number;
+    /** The shortcut as registered, e.g. `mod+k` or `g h`. */
+    shortcut: string;
+    steps: Combo[];
+    handler: (e: KeyboardEvent) => void;
+};
+/** Whether keystrokes from this element are text entry. */
+export declare function isTyping(t: EventTarget | null): boolean;
+/**
+ * The single keyboard shortcut registry. One `keydown` listener on `window` is installed when the first binding is registered
+ * and removed with the last. Safe to import during SSR: nothing touches `window` until `register` runs in the browser.
+ */
+declare class HotkeyStore {
+    #private;
+    /** Every live binding, in registration order. */
+    bindings: Hotkey[];
+    /** Modal scopes, innermost last. Empty means only `'global'` bindings are live. */
+    scopes: string[];
+    /** The scope currently receiving shortcuts. */
+    get scope(): string;
+    /** Bindings that have a description, for display (`<ShortcutSheet>`). */
+    get described(): Hotkey[];
+    /** Bind a shortcut (`mod+k`, `shift+/`, or a sequence like `g h`). Returns the function that removes it. */
+    register(shortcut: string, handler: (e: KeyboardEvent) => void, o?: HotkeyOptions): () => void;
+    /** Make `name` the active scope (for a modal, say): `'global'` bindings pause until the returned function is called. */
+    pushScope(name: string): () => void;
+}
+export declare const hotkeys: HotkeyStore;
+export {};

package/dist/hotkeys.svelte.js

@@ -0,0 +1,108 @@
+import { untrack } from 'svelte';
+import { matches, parseSequence } from './keys.js';
+/** How long a sequence waits for its next key. */
+const SEQUENCE_TIMEOUT = 1000;
+const MODIFIER_KEYS = new Set(['Shift', 'Control', 'Alt', 'Meta', 'AltGraph', 'CapsLock']);
+const snap = (e) => ({ key: e.key, ctrlKey: e.ctrlKey, metaKey: e.metaKey, altKey: e.altKey, shiftKey: e.shiftKey });
+/** Whether keystrokes from this element are text entry. */
+export function isTyping(t) {
+    if (!(t instanceof HTMLElement))
+        return false;
+    if (t.isContentEditable)
+        return true;
+    if (t instanceof HTMLTextAreaElement || t instanceof HTMLSelectElement)
+        return true;
+    return t instanceof HTMLInputElement && !['checkbox', 'radio', 'button', 'submit', 'reset', 'range', 'color', 'file', 'image'].includes(t.type);
+}
+/**
+ * The single keyboard shortcut registry. One `keydown` listener on `window` is installed when the first binding is registered
+ * and removed with the last. Safe to import during SSR: nothing touches `window` until `register` runs in the browser.
+ */
+class HotkeyStore {
+    /** Every live binding, in registration order. */
+    bindings = $state.raw([]);
+    /** Modal scopes, innermost last. Empty means only `'global'` bindings are live. */
+    scopes = $state.raw([]);
+    #next = 1;
+    #buffer = [];
+    #timer;
+    #installed = false;
+    /** The scope currently receiving shortcuts. */
+    get scope() { return this.scopes[this.scopes.length - 1] ?? 'global'; }
+    /** Bindings that have a description, for display (`<ShortcutSheet>`). */
+    get described() { return this.bindings.filter((b) => b.description); }
+    /** Bind a shortcut (`mod+k`, `shift+/`, or a sequence like `g h`). Returns the function that removes it. */
+    register(shortcut, handler, o = {}) {
+        const steps = parseSequence(shortcut);
+        if (!steps.length || steps.some((s) => !s.key))
+            throw new Error(`Invalid shortcut: "${shortcut}"`);
+        const b = { id: this.#next++, shortcut, steps, handler, scope: o.scope ?? 'global', allowInInput: o.allowInInput ?? false, preventDefault: o.preventDefault ?? true, description: o.description, group: o.group, when: o.when };
+        const key = JSON.stringify(steps);
+        // register/pushScope are called from effects: reading the lists they then write must not subscribe the caller
+        const cur = untrack(() => this.bindings);
+        if (isDev() && cur.some((x) => x.scope === b.scope && JSON.stringify(x.steps) === key))
+            console.warn(`[truss] shortcut "${shortcut}" is already bound in scope "${b.scope}"; the most recent binding wins.`);
+        this.bindings = [...cur, b];
+        this.#install();
+        return () => {
+            this.bindings = untrack(() => this.bindings).filter((x) => x !== b);
+            if (!this.bindings.length)
+                this.#uninstall();
+        };
+    }
+    /** Make `name` the active scope (for a modal, say): `'global'` bindings pause until the returned function is called. */
+    pushScope(name) {
+        this.scopes = [...untrack(() => this.scopes), name];
+        return () => {
+            const cur = untrack(() => this.scopes);
+            const i = cur.lastIndexOf(name);
+            if (i >= 0)
+                this.scopes = cur.filter((_, j) => j !== i);
+        };
+    }
+    #install() {
+        if (this.#installed || typeof window === 'undefined')
+            return;
+        window.addEventListener('keydown', this.#onKey);
+        this.#installed = true;
+    }
+    #uninstall() {
+        if (!this.#installed)
+            return;
+        window.removeEventListener('keydown', this.#onKey);
+        this.#installed = false;
+        this.#reset();
+    }
+    #reset() { clearTimeout(this.#timer); this.#buffer = []; }
+    #onKey = (e) => {
+        if (e.isComposing || e.repeat || MODIFIER_KEYS.has(e.key))
+            return;
+        const typing = isTyping(e.target);
+        const scope = this.scope;
+        const live = this.bindings.filter((b) => b.scope === scope && (!typing || b.allowInInput) && (!b.when || b.when()));
+        const candidates = (buf) => live.filter((b) => b.steps.length >= buf.length && buf.every((s, i) => matches(s, b.steps[i])));
+        let buf = [...this.#buffer, snap(e)];
+        let found = candidates(buf);
+        if (!found.length && this.#buffer.length) {
+            buf = [snap(e)];
+            found = candidates(buf);
+        } // a stray key restarts the sequence
+        clearTimeout(this.#timer);
+        const exact = found.filter((b) => b.steps.length === buf.length);
+        if (exact.length) {
+            this.#buffer = [];
+            const b = exact[exact.length - 1];
+            if (b.preventDefault)
+                e.preventDefault();
+            b.handler(e);
+        }
+        else if (found.length) {
+            this.#buffer = buf;
+            this.#timer = setTimeout(() => (this.#buffer = []), SEQUENCE_TIMEOUT);
+        }
+        else
+            this.#buffer = [];
+    };
+}
+const isDev = () => !!import.meta.env?.DEV;
+export const hotkeys = new HotkeyStore();

package/dist/index.d.ts

@@ -23,6 +23,8 @@ export { default as Tabs } from './components/Tabs.svelte';
 export { default as Accordion } from './components/Accordion.svelte';
 export { default as SplitPane } from './components/SplitPane.svelte';
 export { default as Tooltip } from './components/Tooltip.svelte';
+export { default as Kbd } from './components/Kbd.svelte';
+export { default as HoverCard } from './components/HoverCard.svelte';
 export { default as Spinner } from './components/Spinner.svelte';
 export { default as ProgressBar } from './components/ProgressBar.svelte';
 export { default as Skeleton } from './components/Skeleton.svelte';
@@ -41,16 +43,22 @@ export { default as Image } from './components/Image.svelte';
 export { default as DescriptionList } from './components/DescriptionList.svelte';
 export { default as DescriptionTerm } from './components/DescriptionTerm.svelte';
 export { default as DescriptionDetail } from './components/DescriptionDetail.svelte';
+export { default as List } from './components/List.svelte';
+export { default as ListItem } from './components/ListItem.svelte';
 export { default as Container } from './components/Container.svelte';
 export { default as Stack } from './components/Stack.svelte';
 export { default as Cluster } from './components/Cluster.svelte';
 export { default as Grid } from './components/Grid.svelte';
+export { default as GridLayout } from './components/GridLayout.svelte';
+export type { GridItem } from './grid-layout';
 export { default as Band } from './components/Band.svelte';
 export { default as Hero } from './components/Hero.svelte';
 export { default as Avatar } from './components/Avatar.svelte';
 export { default as AvatarGroup } from './components/AvatarGroup.svelte';
 export { default as ButtonGroup } from './components/ButtonGroup.svelte';
 export { default as SegmentedControl } from './components/SegmentedControl.svelte';
+export { default as Toolbar } from './components/Toolbar.svelte';
+export { default as ToolbarSeparator } from './components/ToolbarSeparator.svelte';
 export { default as Card } from './components/Card.svelte';
 export { default as Panel } from './components/Panel.svelte';
 /** @deprecated use Panel */
@@ -84,12 +92,23 @@ export { default as DataTable } from './components/DataTable.svelte';
 export { default as Dialog } from './components/Dialog.svelte';
 export { default as Toaster } from './components/Toaster.svelte';
 export { default as DialogHost } from './components/DialogHost.svelte';
+export { default as CommandPalette } from './components/CommandPalette.svelte';
+export { default as ShortcutSheet } from './components/ShortcutSheet.svelte';
 export { default as Icon } from './icons/Icon.svelte';
 export { toasts } from './toast.svelte.js';
 export { dialogs } from './dialogs.svelte.js';
+export { hotkeys } from './hotkeys.svelte.js';
+export { commands, registerCommand, fuzzyScore } from './commands.svelte.js';
+export { parseCombo, matches, formatCombo, formatShortcut, ariaKeyShortcuts, isApple } from './keys.js';
 export type { IconName, IconDef } from './icons/paths.js';
-export type { ColumnFilters, SortState, TreeNode, UploadItem, MenuEntry, Option, DateRange, Column, MenuItem, Intent, IconSource } from './types.js';
-export type { Toast, ToastIntent } from './toast.svelte.js';
+export type { ColumnFilters, SortState, TreeNode, UploadItem, MenuEntry, Option, DateRange, Column, ColumnType, MenuItem, Intent, IconSource } from './types.js';
+export { serializeRows, toCsv, toTsv, toJson, displayValue } from './table-export.js';
+export type { ExportFormat, ExportOptions, ExportSerializer } from './table-export.js';
+export type { Combo } from './keys.js';
+export type { Hotkey, HotkeyOptions } from './hotkeys.svelte.js';
+export type { Command } from './commands.svelte.js';
+export type { PaletteItem, PaletteProvider } from './components/CommandPalette.svelte';
+export type { Toast, ToastIntent, ToastAction } from './toast.svelte.js';
 export type { AlertOptions, ConfirmOptions, PromptOptions, DialogIntent, DialogKind } from './dialogs.svelte.js';
 export { parseDuration, formatDuration } from './duration.js';
 export type { DurationUnit } from './duration.js';

package/dist/index.js

@@ -23,6 +23,8 @@ export { default as Tabs } from './components/Tabs.svelte';
 export { default as Accordion } from './components/Accordion.svelte';
 export { default as SplitPane } from './components/SplitPane.svelte';
 export { default as Tooltip } from './components/Tooltip.svelte';
+export { default as Kbd } from './components/Kbd.svelte';
+export { default as HoverCard } from './components/HoverCard.svelte';
 export { default as Spinner } from './components/Spinner.svelte';
 export { default as ProgressBar } from './components/ProgressBar.svelte';
 export { default as Skeleton } from './components/Skeleton.svelte';
@@ -41,16 +43,21 @@ export { default as Image } from './components/Image.svelte';
 export { default as DescriptionList } from './components/DescriptionList.svelte';
 export { default as DescriptionTerm } from './components/DescriptionTerm.svelte';
 export { default as DescriptionDetail } from './components/DescriptionDetail.svelte';
+export { default as List } from './components/List.svelte';
+export { default as ListItem } from './components/ListItem.svelte';
 export { default as Container } from './components/Container.svelte';
 export { default as Stack } from './components/Stack.svelte';
 export { default as Cluster } from './components/Cluster.svelte';
 export { default as Grid } from './components/Grid.svelte';
+export { default as GridLayout } from './components/GridLayout.svelte';
 export { default as Band } from './components/Band.svelte';
 export { default as Hero } from './components/Hero.svelte';
 export { default as Avatar } from './components/Avatar.svelte';
 export { default as AvatarGroup } from './components/AvatarGroup.svelte';
 export { default as ButtonGroup } from './components/ButtonGroup.svelte';
 export { default as SegmentedControl } from './components/SegmentedControl.svelte';
+export { default as Toolbar } from './components/Toolbar.svelte';
+export { default as ToolbarSeparator } from './components/ToolbarSeparator.svelte';
 export { default as Card } from './components/Card.svelte';
 export { default as Panel } from './components/Panel.svelte';
 /** @deprecated use Panel */
@@ -84,8 +91,14 @@ export { default as DataTable } from './components/DataTable.svelte';
 export { default as Dialog } from './components/Dialog.svelte';
 export { default as Toaster } from './components/Toaster.svelte';
 export { default as DialogHost } from './components/DialogHost.svelte';
+export { default as CommandPalette } from './components/CommandPalette.svelte';
+export { default as ShortcutSheet } from './components/ShortcutSheet.svelte';
 export { default as Icon } from './icons/Icon.svelte';
 export { toasts } from './toast.svelte.js';
 export { dialogs } from './dialogs.svelte.js';
+export { hotkeys } from './hotkeys.svelte.js';
+export { commands, registerCommand, fuzzyScore } from './commands.svelte.js';
+export { parseCombo, matches, formatCombo, formatShortcut, ariaKeyShortcuts, isApple } from './keys.js';
+export { serializeRows, toCsv, toTsv, toJson, displayValue } from './table-export.js';
 export { parseDuration, formatDuration } from './duration.js';
 export { parseHex, toHex, contrast } from './color.js';

package/dist/keys.d.ts

@@ -0,0 +1,25 @@
+/** A single parsed key combination, e.g. `mod+shift+k`. `mod` is Cmd on Apple platforms and Ctrl elsewhere. */
+export type Combo = {
+    key: string;
+    mod: boolean;
+    ctrl: boolean;
+    meta: boolean;
+    alt: boolean;
+    shift: boolean;
+};
+/** True on macOS and iOS. SSR-safe: false when there is no `navigator`. */
+export declare function isApple(): boolean;
+/** Parse `'mod+shift+k'` (case-insensitive; `esc`, `space`, `up`... are accepted). A lone `+` key is written `plus`. */
+export declare function parseCombo(combo: string): Combo;
+/** Split a shortcut into its steps: `'g h'` is a two-step sequence, `'mod+k'` a single step. */
+export declare const parseSequence: (shortcut: string) => Combo[];
+/** Whether a keyboard event is exactly this combo. Shift is not required for symbol keys such as `?`. */
+export declare function matches(e: Pick<KeyboardEvent, 'key' | 'ctrlKey' | 'metaKey' | 'altKey' | 'shiftKey'>, combo: Combo | string, apple?: boolean): boolean;
+type Platform = 'apple' | 'other' | boolean;
+/** The labels to show for a combo, one per key: `['⌘', '⇧', 'K']` on Apple, `['Ctrl', 'Shift', 'K']` elsewhere. */
+export declare function formatCombo(combo: Combo | string, platform?: Platform): string[];
+/** Format a whole shortcut: one array of key labels per sequence step. */
+export declare const formatShortcut: (shortcut: string, platform?: Platform) => string[][];
+/** The `aria-keyshortcuts` value for a shortcut (`Control+K`, `Meta+Shift+K`), or undefined for sequences, which ARIA cannot express. */
+export declare function ariaKeyShortcuts(shortcut: string, platform?: Platform): string | undefined;
+export {};

package/dist/keys.js

@@ -0,0 +1,88 @@
+const ALIASES = {
+    esc: 'escape', return: 'enter', space: ' ', spacebar: ' ', del: 'delete', up: 'arrowup', down: 'arrowdown', left: 'arrowleft', right: 'arrowright',
+    plus: '+', comma: ',', period: '.', slash: '/', cmd: 'meta', command: 'meta', win: 'meta', super: 'meta', control: 'ctrl', option: 'alt', opt: 'alt'
+};
+const MODIFIERS = new Set(['mod', 'ctrl', 'meta', 'alt', 'shift']);
+/** True on macOS and iOS. SSR-safe: false when there is no `navigator`. */
+export function isApple() {
+    if (typeof navigator === 'undefined')
+        return false;
+    const p = navigator.userAgentData?.platform ?? navigator.platform ?? navigator.userAgent ?? '';
+    return /mac|iphone|ipad|ipod/i.test(p);
+}
+/** Parse `'mod+shift+k'` (case-insensitive; `esc`, `space`, `up`... are accepted). A lone `+` key is written `plus`. */
+export function parseCombo(combo) {
+    const c = { key: '', mod: false, ctrl: false, meta: false, alt: false, shift: false };
+    const parts = combo.trim().split('+');
+    for (let i = 0; i < parts.length; i++) {
+        let p = parts[i].trim().toLowerCase();
+        if (!p && i === parts.length - 1 && i > 0)
+            p = '+'; // "ctrl++": the key is "+"
+        if (!p)
+            continue;
+        p = ALIASES[p] ?? p;
+        if (MODIFIERS.has(p) && i < parts.length - 1)
+            c[p] = true;
+        else
+            c.key = p;
+    }
+    return c;
+}
+/** Split a shortcut into its steps: `'g h'` is a two-step sequence, `'mod+k'` a single step. */
+export const parseSequence = (shortcut) => shortcut.trim().split(/\s+/).filter(Boolean).map(parseCombo);
+/** Whether a keyboard event is exactly this combo. Shift is not required for symbol keys such as `?`. */
+export function matches(e, combo, apple = isApple()) {
+    const c = typeof combo === 'string' ? parseCombo(combo) : combo;
+    if (!c.key)
+        return false;
+    const wantCtrl = c.ctrl || (c.mod && !apple);
+    const wantMeta = c.meta || (c.mod && apple);
+    if (e.ctrlKey !== wantCtrl || e.metaKey !== wantMeta || e.altKey !== c.alt)
+        return false;
+    const symbol = c.key.length === 1 && !/[a-z0-9]/i.test(c.key) && c.key !== ' ';
+    if (!symbol && e.shiftKey !== c.shift)
+        return false;
+    if (symbol && c.shift && !e.shiftKey)
+        return false;
+    return (ALIASES[e.key.toLowerCase()] ?? e.key.toLowerCase()) === c.key;
+}
+const GLYPHS = { arrowup: '↑', arrowdown: '↓', arrowleft: '←', arrowright: '→', enter: '↵', escape: 'Esc', ' ': 'Space', backspace: '⌫', delete: 'Del', tab: 'Tab' };
+const isMac = (p) => p === true || p === 'apple';
+/** The labels to show for a combo, one per key: `['⌘', '⇧', 'K']` on Apple, `['Ctrl', 'Shift', 'K']` elsewhere. */
+export function formatCombo(combo, platform = isApple()) {
+    const c = typeof combo === 'string' ? parseCombo(combo) : combo;
+    const apple = isMac(platform);
+    const out = [];
+    if (c.ctrl || (c.mod && !apple))
+        out.push(apple ? '⌃' : 'Ctrl');
+    if (c.alt)
+        out.push(apple ? '⌥' : 'Alt');
+    if (c.shift)
+        out.push(apple ? '⇧' : 'Shift');
+    if (c.meta || (c.mod && apple))
+        out.push(apple ? '⌘' : 'Win');
+    if (c.key)
+        out.push(GLYPHS[c.key] ?? (c.key.length === 1 ? c.key.toUpperCase() : c.key));
+    return out;
+}
+/** Format a whole shortcut: one array of key labels per sequence step. */
+export const formatShortcut = (shortcut, platform) => parseSequence(shortcut).map((c) => formatCombo(c, platform));
+/** The `aria-keyshortcuts` value for a shortcut (`Control+K`, `Meta+Shift+K`), or undefined for sequences, which ARIA cannot express. */
+export function ariaKeyShortcuts(shortcut, platform = isApple()) {
+    const steps = parseSequence(shortcut);
+    if (steps.length !== 1 || !steps[0].key)
+        return undefined;
+    const c = steps[0];
+    const apple = isMac(platform);
+    const out = [];
+    if (c.ctrl || (c.mod && !apple))
+        out.push('Control');
+    if (c.meta || (c.mod && apple))
+        out.push('Meta');
+    if (c.alt)
+        out.push('Alt');
+    if (c.shift)
+        out.push('Shift');
+    out.push(c.key === ' ' ? 'Space' : c.key.length === 1 ? c.key.toUpperCase() : c.key[0].toUpperCase() + c.key.slice(1));
+    return out.join('+');
+}

package/dist/roving.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Roving tabindex over the focusable descendants of a container: exactly one item is in the tab order,
+ * arrow keys / Home / End move between items, disabled and hidden items are skipped.
+ * Shared by Toolbar and the document variant of Tabs.
+ */
+export type RovingOptions = {
+    orientation?: 'horizontal' | 'vertical';
+    /** Which descendants are items (default: every focusable element, minus `[data-roving-skip]`). */
+    selector?: string;
+    /** Wrap from the last item to the first (default true). */
+    wrap?: boolean;
+};
+/** The items in DOM order. */
+export declare function rovingItems(root: HTMLElement, o?: RovingOptions): HTMLElement[];
+/**
+ * Resolve a keydown to the item that should receive focus (null when the key is not ours).
+ * Does not move focus; callers do that, so they can also activate.
+ */
+export declare function rovingTarget(e: KeyboardEvent, root: HTMLElement, o?: RovingOptions): HTMLElement | null;
+/** Make `active` the only tab stop among the items (all others get tabindex -1). */
+export declare function setRovingActive(root: HTMLElement, active: HTMLElement | undefined, o?: RovingOptions): void;
+/** Svelte action: roving focus for a container (keyboard, focus tracking, and re-sync when its content changes). */
+export declare function roving(node: HTMLElement, getOptions?: () => RovingOptions): {
+    destroy(): void;
+};

package/dist/roving.js

@@ -0,0 +1,129 @@
+const FOCUSABLE = 'a[href], button, input:not([type="hidden"]), select, textarea, summary, [tabindex], [contenteditable=""], [contenteditable="true"]';
+/** Nested composite widgets keep their own arrow-key handling; the container treats each as one item. */
+const COMPOSITE = '[role="radiogroup"], [role="tablist"], [role="listbox"]';
+const usable = (el) => !el.matches(':disabled, [aria-disabled="true"], [data-roving-skip], [inert] *, [hidden] *') && !el.hidden && el.getClientRects().length > 0;
+/** The items in DOM order. */
+export function rovingItems(root, o = {}) {
+    const all = [...root.querySelectorAll(o.selector ?? FOCUSABLE)].filter(usable);
+    if (o.selector)
+        return all;
+    // one representative per nested composite widget (its selected member, else the first)
+    const reps = new Map();
+    const out = [];
+    for (const el of all) {
+        const group = el.parentElement?.closest(COMPOSITE);
+        if (!group || !root.contains(group) || group === root) {
+            out.push(el);
+            continue;
+        }
+        const rep = reps.get(group);
+        if (!rep) {
+            reps.set(group, el);
+            out.push(el);
+        }
+        else if (el.matches('[aria-checked="true"], [aria-selected="true"]')) {
+            out[out.indexOf(rep)] = el;
+            reps.set(group, el);
+        }
+    }
+    return out;
+}
+const isText = (el) => el.isContentEditable ||
+    el instanceof HTMLTextAreaElement ||
+    (el instanceof HTMLInputElement && !/^(button|checkbox|radio|range|color|file|image|reset|submit)$/.test(el.type));
+/** True when the caret sits at the edge of a text field in the direction of travel (the arrow key has nothing left to do there). */
+function textEdge(el, dir) {
+    if (el.isContentEditable)
+        return false;
+    const f = el;
+    try {
+        if (f.selectionStart !== f.selectionEnd)
+            return false;
+        return dir < 0 ? f.selectionStart === 0 : f.selectionStart === f.value.length;
+    }
+    catch {
+        return false; // input types without a caret (number, email…) never give the arrow key up
+    }
+}
+/**
+ * Resolve a keydown to the item that should receive focus (null when the key is not ours).
+ * Does not move focus; callers do that, so they can also activate.
+ */
+export function rovingTarget(e, root, o = {}) {
+    if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)
+        return null;
+    const vertical = o.orientation === 'vertical';
+    const rtl = !vertical && getComputedStyle(root).direction === 'rtl';
+    const next = vertical ? 'ArrowDown' : rtl ? 'ArrowLeft' : 'ArrowRight';
+    const prev = vertical ? 'ArrowUp' : rtl ? 'ArrowRight' : 'ArrowLeft';
+    if (e.key !== next && e.key !== prev && e.key !== 'Home' && e.key !== 'End')
+        return null;
+    const els = rovingItems(root, o);
+    const target = e.target;
+    const from = els.findIndex((x) => x === target || x.contains(target));
+    if (from < 0)
+        return null;
+    const dir = e.key === next ? 1 : -1;
+    // text fields keep Home/End and their own caret movement
+    if (isText(target) && (e.key === 'Home' || e.key === 'End' || !textEdge(target, dir)))
+        return null;
+    const n = els.length;
+    let to;
+    if (e.key === 'Home')
+        to = 0;
+    else if (e.key === 'End')
+        to = n - 1;
+    else if (o.wrap === false)
+        to = Math.min(n - 1, Math.max(0, from + dir));
+    else
+        to = (from + dir + n) % n;
+    return els[to] ?? null;
+}
+/** Make `active` the only tab stop among the items (all others get tabindex -1). */
+export function setRovingActive(root, active, o = {}) {
+    const els = rovingItems(root, o);
+    const keep = active && els.includes(active) ? active : els[0];
+    for (const el of els)
+        el.tabIndex = el === keep ? 0 : -1;
+    // non-representative members of nested composites stay out of the tab order too
+    if (!o.selector)
+        for (const g of root.querySelectorAll(COMPOSITE))
+            for (const el of g.querySelectorAll(FOCUSABLE))
+                if (!els.includes(el))
+                    el.tabIndex = -1;
+}
+/** Svelte action: roving focus for a container (keyboard, focus tracking, and re-sync when its content changes). */
+export function roving(node, getOptions = () => ({})) {
+    let active;
+    const sync = () => setRovingActive(node, active && node.contains(active) ? active : undefined, getOptions());
+    const onKey = (e) => {
+        const to = rovingTarget(e, node, getOptions());
+        if (!to)
+            return;
+        e.preventDefault();
+        active = to;
+        sync();
+        to.focus();
+    };
+    const onFocusIn = (e) => {
+        const t = e.target;
+        const item = rovingItems(node, getOptions()).find((x) => x === t || x.contains(t));
+        if (!item)
+            return;
+        active = item;
+        sync();
+        t.tabIndex = 0; // a nested composite's own focused member stays reachable
+    };
+    node.addEventListener('keydown', onKey);
+    node.addEventListener('focusin', onFocusIn);
+    const mo = new MutationObserver(sync);
+    mo.observe(node, { childList: true, subtree: true, attributes: true, attributeFilter: ['disabled', 'hidden', 'aria-disabled'] });
+    sync();
+    return {
+        destroy() {
+            node.removeEventListener('keydown', onKey);
+            node.removeEventListener('focusin', onFocusIn);
+            mo.disconnect();
+        }
+    };
+}

package/dist/styles/base.css

@@ -8,6 +8,8 @@ body {
 	-webkit-font-smoothing: antialiased;
 }
 body { margin: 0; }
+/* A density subtree re-bases its own type (the root is already covered by body) */
+[data-density]:not(:root) { font-size: var(--tr-text-md); }
 *,
 *::before,
 *::after {