@llui/components 0.0.1

package/dist/components/menu.js

@@ -0,0 +1,262 @@
+import { show, portal, onMount, div } from '@llui/dom';
+import { pushDismissable } from '../utils/dismissable';
+import { attachFloating } from '../utils/floating';
+import { typeaheadAccumulate, typeaheadMatchByItems, isTypeaheadKey, TYPEAHEAD_TIMEOUT_MS, } from '../utils/typeahead';
+export function init(opts = {}) {
+    return {
+        open: opts.open ?? false,
+        items: opts.items ?? [],
+        disabledItems: opts.disabledItems ?? [],
+        highlighted: opts.highlighted ?? null,
+        typeahead: '',
+        typeaheadExpiresAt: 0,
+    };
+}
+function firstEnabled(items, disabled) {
+    for (const v of items)
+        if (!disabled.includes(v))
+            return v;
+    return null;
+}
+function lastEnabled(items, disabled) {
+    for (let i = items.length - 1; i >= 0; i--) {
+        const v = items[i];
+        if (!disabled.includes(v))
+            return v;
+    }
+    return null;
+}
+function nextEnabled(items, disabled, from, delta) {
+    if (items.length === 0)
+        return null;
+    const start = from === null ? -1 : items.indexOf(from);
+    const n = items.length;
+    for (let i = 1; i <= n; i++) {
+        const idx = start === -1 && delta === 1 ? i - 1 : (start + delta * i + n * n) % n;
+        const v = items[idx];
+        if (!disabled.includes(v))
+            return v;
+    }
+    return null;
+}
+export function update(state, msg) {
+    switch (msg.type) {
+        case 'open': {
+            const highlighted = state.highlighted ?? firstEnabled(state.items, state.disabledItems);
+            return [{ ...state, open: true, highlighted }, []];
+        }
+        case 'close':
+            return [{ ...state, open: false, highlighted: null, typeahead: '' }, []];
+        case 'toggle':
+            if (state.open) {
+                return [{ ...state, open: false, highlighted: null, typeahead: '' }, []];
+            }
+            return [
+                {
+                    ...state,
+                    open: true,
+                    highlighted: state.highlighted ?? firstEnabled(state.items, state.disabledItems),
+                },
+                [],
+            ];
+        case 'highlight':
+            if (msg.value !== null && state.disabledItems.includes(msg.value))
+                return [state, []];
+            return [{ ...state, highlighted: msg.value }, []];
+        case 'highlightNext': {
+            const to = nextEnabled(state.items, state.disabledItems, state.highlighted, 1);
+            return [{ ...state, highlighted: to }, []];
+        }
+        case 'highlightPrev': {
+            const to = nextEnabled(state.items, state.disabledItems, state.highlighted, -1);
+            return [{ ...state, highlighted: to }, []];
+        }
+        case 'highlightFirst':
+            return [{ ...state, highlighted: firstEnabled(state.items, state.disabledItems) }, []];
+        case 'highlightLast':
+            return [{ ...state, highlighted: lastEnabled(state.items, state.disabledItems) }, []];
+        case 'selectHighlighted':
+            if (state.highlighted === null)
+                return [state, []];
+            return [{ ...state, open: false, highlighted: null, typeahead: '' }, []];
+        case 'select':
+            if (state.disabledItems.includes(msg.value))
+                return [state, []];
+            return [{ ...state, open: false, highlighted: null, typeahead: '' }, []];
+        case 'setItems': {
+            const disabled = msg.disabled ?? state.disabledItems;
+            const highlighted = state.highlighted &&
+                msg.items.includes(state.highlighted) &&
+                !disabled.includes(state.highlighted)
+                ? state.highlighted
+                : null;
+            return [{ ...state, items: msg.items, disabledItems: disabled, highlighted }, []];
+        }
+        case 'typeahead': {
+            const acc = typeaheadAccumulate(state.typeahead, msg.char, msg.now, state.typeaheadExpiresAt);
+            const startIdx = state.highlighted ? state.items.indexOf(state.highlighted) : null;
+            const matchIdx = typeaheadMatchByItems(state.items, state.disabledItems, acc, startIdx);
+            const match = matchIdx === null ? null : state.items[matchIdx];
+            return [
+                {
+                    ...state,
+                    typeahead: acc,
+                    typeaheadExpiresAt: msg.now + TYPEAHEAD_TIMEOUT_MS,
+                    highlighted: match ?? state.highlighted,
+                },
+                [],
+            ];
+        }
+    }
+}
+export function connect(get, send, opts) {
+    const base = opts.id;
+    const triggerId = `${base}:trigger`;
+    const contentId = `${base}:content`;
+    const itemId = (v) => `${base}:item:${v}`;
+    const handleMenuKey = (e) => {
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                send({ type: 'highlightNext' });
+                return;
+            case 'ArrowUp':
+                e.preventDefault();
+                send({ type: 'highlightPrev' });
+                return;
+            case 'Home':
+                e.preventDefault();
+                send({ type: 'highlightFirst' });
+                return;
+            case 'End':
+                e.preventDefault();
+                send({ type: 'highlightLast' });
+                return;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                send({ type: 'selectHighlighted' });
+                return;
+            case 'Escape':
+                e.preventDefault();
+                send({ type: 'close' });
+                return;
+            default:
+                if (isTypeaheadKey(e)) {
+                    send({ type: 'typeahead', char: e.key, now: Date.now() });
+                }
+        }
+    };
+    return {
+        trigger: {
+            type: 'button',
+            'aria-haspopup': 'menu',
+            'aria-expanded': (s) => get(s).open,
+            'aria-controls': contentId,
+            id: triggerId,
+            'data-state': (s) => (get(s).open ? 'open' : 'closed'),
+            'data-scope': 'menu',
+            'data-part': 'trigger',
+            onClick: () => send({ type: 'toggle' }),
+            onKeyDown: (e) => {
+                if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    send({ type: 'open' });
+                }
+                else if (e.key === 'ArrowUp') {
+                    e.preventDefault();
+                    send({ type: 'open' });
+                    send({ type: 'highlightLast' });
+                }
+            },
+        },
+        positioner: {
+            'data-scope': 'menu',
+            'data-part': 'positioner',
+            style: 'position:absolute;top:0;left:0;',
+        },
+        content: {
+            role: 'menu',
+            id: contentId,
+            'aria-labelledby': triggerId,
+            tabIndex: -1,
+            'data-state': (s) => (get(s).open ? 'open' : 'closed'),
+            'data-scope': 'menu',
+            'data-part': 'content',
+            onKeyDown: handleMenuKey,
+        },
+        item: (value) => ({
+            item: {
+                role: 'menuitem',
+                id: itemId(value),
+                'aria-disabled': (s) => (get(s).disabledItems.includes(value) ? 'true' : undefined),
+                'data-state': (s) => (get(s).highlighted === value ? 'highlighted' : undefined),
+                'data-disabled': (s) => (get(s).disabledItems.includes(value) ? '' : undefined),
+                'data-scope': 'menu',
+                'data-part': 'item',
+                'data-value': value,
+                tabIndex: -1,
+                onClick: () => {
+                    send({ type: 'select', value });
+                    opts.onSelect?.(value);
+                },
+                onPointerMove: () => send({ type: 'highlight', value }),
+            },
+        }),
+    };
+}
+export function overlay(opts) {
+    const target = opts.target ?? 'body';
+    const placement = opts.placement ?? 'bottom-start';
+    const offset = opts.offset ?? 4;
+    const flip = opts.flip !== false;
+    const shift = opts.shift !== false;
+    const parts = opts.parts;
+    const contentId = parts.content.id;
+    const triggerId = parts.trigger.id;
+    return show({
+        when: (s) => opts.get(s).open,
+        render: () => portal({
+            target,
+            render: () => {
+                onMount(() => {
+                    const contentEl = document.getElementById(contentId);
+                    const triggerEl = document.getElementById(triggerId);
+                    if (!contentEl || !triggerEl)
+                        return;
+                    const cleanups = [];
+                    const positioner = contentEl.closest('[data-part="positioner"]');
+                    const floatingEl = positioner ?? contentEl;
+                    cleanups.push(attachFloating({
+                        anchor: triggerEl,
+                        floating: floatingEl,
+                        placement,
+                        offset,
+                        flip,
+                        shift,
+                    }));
+                    cleanups.push(pushDismissable({
+                        element: contentEl,
+                        ignore: () => [triggerEl],
+                        onDismiss: () => {
+                            opts.send({ type: 'close' });
+                            triggerEl.focus();
+                        },
+                    }));
+                    // Auto-focus content so keyboard navigation works immediately.
+                    // preventScroll avoids a page jump when the portaled content
+                    // is briefly at position (0,0) before floating-ui positions it.
+                    contentEl.focus({ preventScroll: true });
+                    return () => {
+                        for (let i = cleanups.length - 1; i >= 0; i--)
+                            cleanups[i]();
+                    };
+                });
+                return [div(parts.positioner, opts.content())];
+            },
+        }),
+        enter: opts.transition?.enter,
+        leave: opts.transition?.leave,
+    });
+}
+export const menu = { init, update, connect, overlay };

package/dist/components/navigation-menu.d.ts

@@ -0,0 +1,111 @@
+import type { Send } from '@llui/dom';
+/**
+ * Navigation menu — multi-level menu bar with hover/focus-triggered
+ * submenus. Unlike `menu` (a single dropdown), navigation-menu supports
+ * nested submenus arbitrarily deep and is typically used for primary
+ * site navigation.
+ *
+ * State tracks the currently focused item id and the ids of all
+ * currently-open branches. The consumer provides the tree structure
+ * (items with optional children); the machine doesn't index the
+ * hierarchy itself — it just maintains open-paths and lets the view
+ * handle traversal.
+ *
+ * Typical interaction model (delay-based):
+ *   - Pointer enter on a branch → openBranch after openDelay
+ *   - Pointer leave of the whole tree → closeAll after closeDelay
+ *   - Click/keyboard activation → toggleBranch immediately
+ *
+ * The consumer is responsible for debouncing via setTimeout; the machine
+ * just responds to the dispatched messages.
+ */
+export interface NavMenuState {
+    /** Ids of open branches, in open order (root-first). Closing an
+     *  ancestor automatically closes its descendants. */
+    open: string[];
+    focused: string | null;
+    disabled: boolean;
+}
+export type NavMenuMsg = {
+    type: 'openBranch';
+    id: string;
+    ancestorIds: string[];
+} | {
+    type: 'closeBranch';
+    id: string;
+} | {
+    type: 'toggleBranch';
+    id: string;
+    ancestorIds: string[];
+} | {
+    type: 'closeAll';
+} | {
+    type: 'focus';
+    id: string | null;
+};
+export interface NavMenuInit {
+    open?: string[];
+    focused?: string | null;
+    disabled?: boolean;
+}
+export declare function init(opts?: NavMenuInit): NavMenuState;
+export declare function update(state: NavMenuState, msg: NavMenuMsg): [NavMenuState, never[]];
+export declare function isOpen(state: NavMenuState, id: string): boolean;
+export interface NavItemParts<S> {
+    trigger: {
+        type: 'button';
+        role: 'menuitem';
+        id: string;
+        'aria-haspopup': 'menu' | undefined;
+        'aria-expanded': (s: S) => boolean | undefined;
+        'data-scope': 'navigation-menu';
+        'data-part': 'trigger';
+        'data-state': (s: S) => 'open' | 'closed';
+        'data-value': string;
+        tabIndex: (s: S) => number;
+        onClick: (e: MouseEvent) => void;
+        onPointerEnter: (e: PointerEvent) => void;
+        onFocus: (e: FocusEvent) => void;
+    };
+    content: {
+        role: 'menu';
+        id: string;
+        'aria-labelledby': string;
+        'data-scope': 'navigation-menu';
+        'data-part': 'content';
+        'data-state': (s: S) => 'open' | 'closed';
+        hidden: (s: S) => boolean;
+    };
+}
+export interface NavMenuParts<S> {
+    root: {
+        role: 'menubar';
+        'aria-label': string;
+        'data-scope': 'navigation-menu';
+        'data-part': 'root';
+        'data-disabled': (s: S) => '' | undefined;
+        onPointerLeave: (e: PointerEvent) => void;
+    };
+    item: (id: string, options: {
+        isBranch: boolean;
+        ancestorIds?: string[];
+    }) => NavItemParts<S>;
+}
+export interface ConnectOptions {
+    id: string;
+    label?: string;
+    /**
+     * Whether pointer-leaving the whole menu closes everything. Default: true.
+     * The consumer can inject their own close delay by intercepting
+     * onPointerLeave + calling setTimeout + dispatching closeAll.
+     */
+    closeOnLeave?: boolean;
+}
+export declare function connect<S>(get: (s: S) => NavMenuState, send: Send<NavMenuMsg>, opts: ConnectOptions): NavMenuParts<S>;
+export declare const navigationMenu: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    isOpen: typeof isOpen;
+};
+//# sourceMappingURL=navigation-menu.d.ts.map

package/dist/components/navigation-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu.d.ts","sourceRoot":"","sources":["../../src/components/navigation-menu.ts"],"names":[],"mappings":"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"}

package/dist/components/navigation-menu.js

@@ -0,0 +1,102 @@
+export function init(opts = {}) {
+    return {
+        open: opts.open ?? [],
+        focused: opts.focused ?? null,
+        disabled: opts.disabled ?? false,
+    };
+}
+export function update(state, msg) {
+    if (state.disabled)
+        return [state, []];
+    switch (msg.type) {
+        case 'openBranch': {
+            // Close any siblings of `id` at the same ancestor path, then add it.
+            // Sibling detection: an entry is a sibling if its ancestor set matches
+            // msg.ancestorIds and it isn't msg.id. We don't track ancestors in
+            // state, so: filter `open` to keep only entries that are themselves
+            // an ancestor of msg.id, plus msg.id.
+            const keep = new Set([...msg.ancestorIds, msg.id]);
+            const open = state.open.filter((o) => keep.has(o));
+            if (!open.includes(msg.id))
+                open.push(msg.id);
+            return [{ ...state, open }, []];
+        }
+        case 'closeBranch': {
+            // Close this branch and any descendants that follow it in the open
+            // list. Since open is ordered root-first, descendants come after.
+            const idx = state.open.indexOf(msg.id);
+            if (idx === -1)
+                return [state, []];
+            const open = state.open.slice(0, idx);
+            return [{ ...state, open }, []];
+        }
+        case 'toggleBranch':
+            if (state.open.includes(msg.id)) {
+                return update(state, { type: 'closeBranch', id: msg.id });
+            }
+            return update(state, { type: 'openBranch', id: msg.id, ancestorIds: msg.ancestorIds });
+        case 'closeAll':
+            return [{ ...state, open: [] }, []];
+        case 'focus':
+            return [{ ...state, focused: msg.id }, []];
+    }
+}
+export function isOpen(state, id) {
+    return state.open.includes(id);
+}
+export function connect(get, send, opts) {
+    const triggerId = (v) => `${opts.id}:trigger:${v}`;
+    const contentId = (v) => `${opts.id}:content:${v}`;
+    const closeOnLeave = opts.closeOnLeave !== false;
+    return {
+        root: {
+            role: 'menubar',
+            'aria-label': opts.label ?? 'Main navigation',
+            'data-scope': 'navigation-menu',
+            'data-part': 'root',
+            'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+            onPointerLeave: () => {
+                if (closeOnLeave)
+                    send({ type: 'closeAll' });
+            },
+        },
+        item: (id, options) => {
+            const ancestorIds = options.ancestorIds ?? [];
+            return {
+                trigger: {
+                    type: 'button',
+                    role: 'menuitem',
+                    id: triggerId(id),
+                    'aria-haspopup': options.isBranch ? 'menu' : undefined,
+                    'aria-expanded': (s) => (options.isBranch ? isOpen(get(s), id) : undefined),
+                    'data-scope': 'navigation-menu',
+                    'data-part': 'trigger',
+                    'data-state': (s) => (isOpen(get(s), id) ? 'open' : 'closed'),
+                    'data-value': id,
+                    tabIndex: (s) => (get(s).focused === id ? 0 : -1),
+                    onClick: () => {
+                        if (options.isBranch) {
+                            send({ type: 'toggleBranch', id, ancestorIds });
+                        }
+                    },
+                    onPointerEnter: () => {
+                        if (options.isBranch) {
+                            send({ type: 'openBranch', id, ancestorIds });
+                        }
+                    },
+                    onFocus: () => send({ type: 'focus', id }),
+                },
+                content: {
+                    role: 'menu',
+                    id: contentId(id),
+                    'aria-labelledby': triggerId(id),
+                    'data-scope': 'navigation-menu',
+                    'data-part': 'content',
+                    'data-state': (s) => (isOpen(get(s), id) ? 'open' : 'closed'),
+                    hidden: (s) => !isOpen(get(s), id),
+                },
+            };
+        },
+    };
+}
+export const navigationMenu = { init, update, connect, isOpen };

package/dist/components/number-input.d.ts

@@ -0,0 +1,106 @@
+import type { Send } from '@llui/dom';
+/**
+ * Number input — numeric field with increment/decrement buttons. Clamps
+ * to min/max and snaps to step. Keyboard: Arrow Up/Down, PageUp/PageDown,
+ * Home/End.
+ */
+export interface NumberInputState {
+    value: number | null;
+    min: number;
+    max: number;
+    step: number;
+    disabled: boolean;
+    readOnly: boolean;
+    /** Allow a free-text input value while the user is typing. */
+    rawText: string;
+}
+export type NumberInputMsg = {
+    type: 'setValue';
+    value: number | null;
+} | {
+    type: 'setRawText';
+    text: string;
+} | {
+    type: 'commit';
+} | {
+    type: 'increment';
+    multiplier?: number;
+} | {
+    type: 'decrement';
+    multiplier?: number;
+} | {
+    type: 'toMin';
+} | {
+    type: 'toMax';
+} | {
+    type: 'setDisabled';
+    disabled: boolean;
+};
+export interface NumberInputInit {
+    value?: number | null;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+}
+export declare function init(opts?: NumberInputInit): NumberInputState;
+export declare function update(state: NumberInputState, msg: NumberInputMsg): [NumberInputState, never[]];
+export interface NumberInputParts<S> {
+    root: {
+        'data-scope': 'number-input';
+        'data-part': 'root';
+        'data-disabled': (s: S) => '' | undefined;
+    };
+    input: {
+        type: 'text';
+        role: 'spinbutton';
+        inputMode: 'decimal';
+        'aria-valuemin': (s: S) => number | undefined;
+        'aria-valuemax': (s: S) => number | undefined;
+        'aria-valuenow': (s: S) => number | undefined;
+        'aria-disabled': (s: S) => 'true' | undefined;
+        'aria-readonly': (s: S) => 'true' | undefined;
+        disabled: (s: S) => boolean;
+        readOnly: (s: S) => boolean;
+        value: (s: S) => string;
+        'data-scope': 'number-input';
+        'data-part': 'input';
+        onInput: (e: Event) => void;
+        onBlur: (e: FocusEvent) => void;
+        onKeyDown: (e: KeyboardEvent) => void;
+    };
+    increment: {
+        type: 'button';
+        'aria-label': string;
+        'aria-disabled': (s: S) => 'true' | undefined;
+        disabled: (s: S) => boolean;
+        'data-scope': 'number-input';
+        'data-part': 'increment';
+        tabIndex: -1;
+        onClick: (e: MouseEvent) => void;
+    };
+    decrement: {
+        type: 'button';
+        'aria-label': string;
+        'aria-disabled': (s: S) => 'true' | undefined;
+        disabled: (s: S) => boolean;
+        'data-scope': 'number-input';
+        'data-part': 'decrement';
+        tabIndex: -1;
+        onClick: (e: MouseEvent) => void;
+    };
+}
+export interface ConnectOptions {
+    incrementLabel?: string;
+    decrementLabel?: string;
+    /** Validate the numeric value before committing. Non-empty array blocks setValue. */
+    validate?: (value: number) => string[] | null;
+}
+export declare function connect<S>(get: (s: S) => NumberInputState, send: Send<NumberInputMsg>, opts?: ConnectOptions): NumberInputParts<S>;
+export declare const numberInput: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+};
+//# sourceMappingURL=number-input.d.ts.map

package/dist/components/number-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../src/components/number-input.ts"],"names":[],"mappings":"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"}