@llui/components 0.0.1

package/dist/components/select.js

@@ -0,0 +1,333 @@
+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: false,
+        value: opts.value ?? [],
+        items: opts.items ?? [],
+        disabledItems: opts.disabledItems ?? [],
+        selectionMode: opts.selectionMode ?? 'single',
+        highlightedIndex: null,
+        disabled: opts.disabled ?? false,
+        required: opts.required ?? false,
+        typeahead: '',
+        typeaheadExpiresAt: 0,
+    };
+}
+function firstEnabledIndex(items, disabled) {
+    for (let i = 0; i < items.length; i++) {
+        if (!disabled.includes(items[i]))
+            return i;
+    }
+    return null;
+}
+function lastEnabledIndex(items, disabled) {
+    for (let i = items.length - 1; i >= 0; i--) {
+        if (!disabled.includes(items[i]))
+            return i;
+    }
+    return null;
+}
+function nextEnabledIndex(items, disabled, from, delta) {
+    if (items.length === 0)
+        return null;
+    const start = from === null ? (delta === 1 ? -1 : items.length) : from;
+    const n = items.length;
+    for (let i = 1; i <= n; i++) {
+        const idx = (start + delta * i + n * n) % n;
+        if (!disabled.includes(items[idx]))
+            return idx;
+    }
+    return null;
+}
+function applySelection(state, value) {
+    if (state.disabledItems.includes(value))
+        return state.value;
+    if (state.selectionMode === 'single')
+        return [value];
+    const isActive = state.value.includes(value);
+    return isActive ? state.value.filter((v) => v !== value) : [...state.value, value];
+}
+/** Index of the first selected item, or null. */
+function firstSelectedIndex(state) {
+    if (state.value.length === 0)
+        return null;
+    const idx = state.items.indexOf(state.value[0]);
+    return idx === -1 ? null : idx;
+}
+export function update(state, msg) {
+    if (state.disabled && msg.type !== 'setItems')
+        return [state, []];
+    switch (msg.type) {
+        case 'open': {
+            const highlightedIndex = firstSelectedIndex(state) ?? firstEnabledIndex(state.items, state.disabledItems);
+            return [{ ...state, open: true, highlightedIndex }, []];
+        }
+        case 'close':
+            return [{ ...state, open: false, highlightedIndex: null }, []];
+        case 'toggle':
+            return state.open
+                ? [{ ...state, open: false, highlightedIndex: null }, []]
+                : [
+                    {
+                        ...state,
+                        open: true,
+                        highlightedIndex: firstSelectedIndex(state) ?? firstEnabledIndex(state.items, state.disabledItems),
+                    },
+                    [],
+                ];
+        case 'selectOption': {
+            const value = applySelection(state, msg.value);
+            // Single mode closes on selection; multi stays open
+            const open = state.selectionMode === 'single' ? false : state.open;
+            const highlightedIndex = open ? state.highlightedIndex : null;
+            return [{ ...state, value, open, highlightedIndex }, []];
+        }
+        case 'setValue':
+            return [{ ...state, value: msg.value }, []];
+        case 'clear':
+            return [{ ...state, value: [] }, []];
+        case 'highlight':
+            return [{ ...state, highlightedIndex: msg.index }, []];
+        case 'highlightNext':
+            return [
+                {
+                    ...state,
+                    highlightedIndex: nextEnabledIndex(state.items, state.disabledItems, state.highlightedIndex, 1),
+                },
+                [],
+            ];
+        case 'highlightPrev':
+            return [
+                {
+                    ...state,
+                    highlightedIndex: nextEnabledIndex(state.items, state.disabledItems, state.highlightedIndex, -1),
+                },
+                [],
+            ];
+        case 'highlightFirst':
+            return [
+                { ...state, highlightedIndex: firstEnabledIndex(state.items, state.disabledItems) },
+                [],
+            ];
+        case 'highlightLast':
+            return [
+                { ...state, highlightedIndex: lastEnabledIndex(state.items, state.disabledItems) },
+                [],
+            ];
+        case 'selectHighlighted': {
+            if (state.highlightedIndex === null)
+                return [state, []];
+            const v = state.items[state.highlightedIndex];
+            if (v === undefined)
+                return [state, []];
+            const value = applySelection(state, v);
+            const open = state.selectionMode === 'single' ? false : state.open;
+            return [{ ...state, value, open, highlightedIndex: open ? state.highlightedIndex : null }, []];
+        }
+        case 'setItems': {
+            const disabled = msg.disabled ?? state.disabledItems;
+            const value = state.value.filter((v) => msg.items.includes(v) && !disabled.includes(v));
+            return [{ ...state, items: msg.items, disabledItems: disabled, value }, []];
+        }
+        case 'typeahead': {
+            const acc = typeaheadAccumulate(state.typeahead, msg.char, msg.now, state.typeaheadExpiresAt);
+            const match = typeaheadMatchByItems(state.items, state.disabledItems, acc, state.highlightedIndex);
+            return [
+                {
+                    ...state,
+                    typeahead: acc,
+                    typeaheadExpiresAt: msg.now + TYPEAHEAD_TIMEOUT_MS,
+                    highlightedIndex: match ?? state.highlightedIndex,
+                },
+                [],
+            ];
+        }
+    }
+}
+const HIDDEN_STYLE = 'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;';
+export function connect(get, send, opts) {
+    const base = opts.id;
+    const triggerId = `${base}:trigger`;
+    const contentId = `${base}:content`;
+    const itemId = (index) => `${base}:item:${index}`;
+    const placeholder = opts.placeholder ?? '';
+    const separator = opts.separator ?? ', ';
+    const handleTriggerKey = (e) => {
+        switch (e.key) {
+            case 'ArrowDown':
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                send({ type: 'open' });
+                return;
+            case 'ArrowUp':
+                e.preventDefault();
+                send({ type: 'open' });
+                send({ type: 'highlightLast' });
+                return;
+        }
+    };
+    const handleContentKey = (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',
+            role: 'combobox',
+            'aria-haspopup': 'listbox',
+            'aria-expanded': (s) => get(s).open,
+            'aria-controls': contentId,
+            'aria-activedescendant': (s) => {
+                const idx = get(s).highlightedIndex;
+                return idx === null ? undefined : itemId(idx);
+            },
+            'aria-disabled': (s) => (get(s).disabled ? 'true' : undefined),
+            'aria-required': (s) => (get(s).required ? 'true' : undefined),
+            id: triggerId,
+            disabled: (s) => get(s).disabled,
+            'data-state': (s) => (get(s).open ? 'open' : 'closed'),
+            'data-scope': 'select',
+            'data-part': 'trigger',
+            onClick: () => send({ type: 'toggle' }),
+            onKeyDown: handleTriggerKey,
+        },
+        positioner: {
+            'data-scope': 'select',
+            'data-part': 'positioner',
+            style: 'position:absolute;top:0;left:0;',
+        },
+        content: {
+            role: 'listbox',
+            id: contentId,
+            'aria-multiselectable': (s) => (get(s).selectionMode === 'multiple' ? 'true' : undefined),
+            'aria-labelledby': triggerId,
+            tabIndex: -1,
+            'data-state': (s) => (get(s).open ? 'open' : 'closed'),
+            'data-scope': 'select',
+            'data-part': 'content',
+            onKeyDown: handleContentKey,
+        },
+        hiddenSelect: {
+            'aria-hidden': 'true',
+            tabIndex: -1,
+            style: HIDDEN_STYLE,
+            disabled: (s) => get(s).disabled,
+            multiple: (s) => get(s).selectionMode === 'multiple',
+            required: (s) => get(s).required,
+            'data-scope': 'select',
+            'data-part': 'hidden-select',
+        },
+        item: (value, index) => ({
+            item: {
+                role: 'option',
+                id: itemId(index),
+                'aria-selected': (s) => get(s).value.includes(value),
+                'aria-disabled': (s) => (get(s).disabledItems.includes(value) ? 'true' : undefined),
+                'data-state': (s) => (get(s).value.includes(value) ? 'selected' : undefined),
+                'data-highlighted': (s) => (get(s).highlightedIndex === index ? '' : undefined),
+                'data-disabled': (s) => (get(s).disabledItems.includes(value) ? '' : undefined),
+                'data-scope': 'select',
+                'data-part': 'item',
+                'data-value': value,
+                'data-index': String(index),
+                onClick: () => send({ type: 'selectOption', value }),
+                onPointerMove: () => send({ type: 'highlight', index }),
+            },
+        }),
+        valueText: (s) => {
+            const v = get(s).value;
+            if (v.length === 0)
+                return placeholder;
+            return v.join(separator);
+        },
+    };
+}
+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 sameWidth = opts.sameWidth !== 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;
+                    if (sameWidth) {
+                        floatingEl.style.minWidth = `${triggerEl.offsetWidth}px`;
+                    }
+                    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();
+                        },
+                    }));
+                    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 select = { init, update, connect, overlay };

package/dist/components/signature-pad.d.ts

@@ -0,0 +1,138 @@
+import type { Send } from '@llui/dom';
+/**
+ * Signature pad — capture free-form strokes on a canvas. The state
+ * machine tracks strokes as arrays of points; the view renders them
+ * onto a <canvas> element (consumer owns the canvas drawing, typically
+ * by redrawing all strokes in an onMount effect whenever `state.strokes`
+ * changes, or by drawing incrementally on each `addPoint` message).
+ *
+ * Pointer event wiring in the view layer:
+ *
+ *   onPointerDown: (e) => {
+ *     canvas.setPointerCapture(e.pointerId)
+ *     send({ type: 'strokeStart', x: e.offsetX, y: e.offsetY })
+ *   }
+ *   onPointerMove: (e) => {
+ *     if (state.drawing) send({ type: 'strokePoint', x: e.offsetX, y: e.offsetY })
+ *   }
+ *   onPointerUp: () => send({ type: 'strokeEnd' })
+ */
+export interface Point {
+    x: number;
+    y: number;
+    /** Pressure 0..1 (optional; from PointerEvent.pressure). */
+    pressure?: number;
+}
+export type Stroke = Point[];
+export interface SignaturePadState {
+    strokes: Stroke[];
+    /** Stroke currently being drawn, or null. */
+    current: Stroke | null;
+    drawing: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+}
+export type SignaturePadMsg = {
+    type: 'strokeStart';
+    x: number;
+    y: number;
+    pressure?: number;
+} | {
+    type: 'strokePoint';
+    x: number;
+    y: number;
+    pressure?: number;
+} | {
+    type: 'strokeEnd';
+} | {
+    type: 'strokeCancel';
+} | {
+    type: 'undo';
+} | {
+    type: 'redo';
+    stroke: Stroke;
+} | {
+    type: 'clear';
+} | {
+    type: 'setStrokes';
+    strokes: Stroke[];
+};
+export interface SignaturePadInit {
+    strokes?: Stroke[];
+    disabled?: boolean;
+    readOnly?: boolean;
+}
+export declare function init(opts?: SignaturePadInit): SignaturePadState;
+export declare function update(state: SignaturePadState, msg: SignaturePadMsg): [SignaturePadState, never[]];
+export declare function isEmpty(state: SignaturePadState): boolean;
+/** Total number of points across all strokes + current. */
+export declare function pointCount(state: SignaturePadState): number;
+/**
+ * Compute the axis-aligned bounding box of all strokes, or null if empty.
+ * Useful for cropping the exported signature tightly.
+ */
+export declare function getBounds(state: SignaturePadState): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+} | null;
+export interface SignaturePadParts<S> {
+    root: {
+        role: 'application';
+        'aria-label': string;
+        'data-scope': 'signature-pad';
+        'data-part': 'root';
+        'data-disabled': (s: S) => '' | undefined;
+        'data-readonly': (s: S) => '' | undefined;
+        'data-drawing': (s: S) => '' | undefined;
+    };
+    control: {
+        'data-scope': 'signature-pad';
+        'data-part': 'control';
+    };
+    clearTrigger: {
+        type: 'button';
+        'aria-label': string;
+        disabled: (s: S) => boolean;
+        'data-scope': 'signature-pad';
+        'data-part': 'clear-trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+    undoTrigger: {
+        type: 'button';
+        'aria-label': string;
+        disabled: (s: S) => boolean;
+        'data-scope': 'signature-pad';
+        'data-part': 'undo-trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+    guide: {
+        'data-scope': 'signature-pad';
+        'data-part': 'guide';
+        'aria-hidden': 'true';
+    };
+    hiddenInput: {
+        type: 'hidden';
+        value: (s: S) => string;
+        name?: string;
+        'data-scope': 'signature-pad';
+        'data-part': 'hidden-input';
+    };
+}
+export interface ConnectOptions {
+    label?: string;
+    clearLabel?: string;
+    undoLabel?: string;
+    name?: string;
+}
+export declare function connect<S>(get: (s: S) => SignaturePadState, send: Send<SignaturePadMsg>, opts?: ConnectOptions): SignaturePadParts<S>;
+export declare const signaturePad: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    isEmpty: typeof isEmpty;
+    pointCount: typeof pointCount;
+    getBounds: typeof getBounds;
+};
+//# sourceMappingURL=signature-pad.d.ts.map

package/dist/components/signature-pad.d.ts.map

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

package/dist/components/signature-pad.js

@@ -0,0 +1,142 @@
+export function init(opts = {}) {
+    return {
+        strokes: opts.strokes ?? [],
+        current: null,
+        drawing: false,
+        disabled: opts.disabled ?? false,
+        readOnly: opts.readOnly ?? false,
+    };
+}
+function makePoint(x, y, pressure) {
+    return pressure !== undefined ? { x, y, pressure } : { x, y };
+}
+export function update(state, msg) {
+    if (state.disabled || state.readOnly) {
+        // Allow reads (undo/clear are still useful for clearing a disabled pad).
+        if (msg.type === 'strokeStart' || msg.type === 'strokePoint' || msg.type === 'strokeEnd') {
+            return [state, []];
+        }
+    }
+    switch (msg.type) {
+        case 'strokeStart': {
+            const current = [makePoint(msg.x, msg.y, msg.pressure)];
+            return [{ ...state, current, drawing: true }, []];
+        }
+        case 'strokePoint': {
+            if (!state.drawing || state.current === null)
+                return [state, []];
+            const current = [...state.current, makePoint(msg.x, msg.y, msg.pressure)];
+            return [{ ...state, current }, []];
+        }
+        case 'strokeEnd': {
+            if (!state.drawing || state.current === null)
+                return [state, []];
+            // Drop 1-point strokes (accidental taps).
+            const strokes = state.current.length > 1 ? [...state.strokes, state.current] : state.strokes;
+            return [{ ...state, strokes, current: null, drawing: false }, []];
+        }
+        case 'strokeCancel':
+            return [{ ...state, current: null, drawing: false }, []];
+        case 'undo': {
+            if (state.strokes.length === 0)
+                return [state, []];
+            return [{ ...state, strokes: state.strokes.slice(0, -1) }, []];
+        }
+        case 'redo':
+            return [{ ...state, strokes: [...state.strokes, msg.stroke] }, []];
+        case 'clear':
+            return [{ ...state, strokes: [], current: null, drawing: false }, []];
+        case 'setStrokes':
+            return [{ ...state, strokes: msg.strokes }, []];
+    }
+}
+export function isEmpty(state) {
+    return state.strokes.length === 0 && state.current === null;
+}
+/** Total number of points across all strokes + current. */
+export function pointCount(state) {
+    let n = state.current?.length ?? 0;
+    for (const s of state.strokes)
+        n += s.length;
+    return n;
+}
+/**
+ * Compute the axis-aligned bounding box of all strokes, or null if empty.
+ * Useful for cropping the exported signature tightly.
+ */
+export function getBounds(state) {
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    const all = state.current ? [...state.strokes, state.current] : state.strokes;
+    for (const stroke of all) {
+        for (const p of stroke) {
+            if (p.x < minX)
+                minX = p.x;
+            if (p.y < minY)
+                minY = p.y;
+            if (p.x > maxX)
+                maxX = p.x;
+            if (p.y > maxY)
+                maxY = p.y;
+        }
+    }
+    if (minX === Infinity)
+        return null;
+    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+export function connect(get, send, opts = {}) {
+    return {
+        root: {
+            role: 'application',
+            'aria-label': opts.label ?? 'Signature pad',
+            'data-scope': 'signature-pad',
+            'data-part': 'root',
+            'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+            'data-readonly': (s) => (get(s).readOnly ? '' : undefined),
+            'data-drawing': (s) => (get(s).drawing ? '' : undefined),
+        },
+        control: {
+            'data-scope': 'signature-pad',
+            'data-part': 'control',
+        },
+        clearTrigger: {
+            type: 'button',
+            'aria-label': opts.clearLabel ?? 'Clear signature',
+            disabled: (s) => isEmpty(get(s)),
+            'data-scope': 'signature-pad',
+            'data-part': 'clear-trigger',
+            onClick: () => send({ type: 'clear' }),
+        },
+        undoTrigger: {
+            type: 'button',
+            'aria-label': opts.undoLabel ?? 'Undo last stroke',
+            disabled: (s) => get(s).strokes.length === 0,
+            'data-scope': 'signature-pad',
+            'data-part': 'undo-trigger',
+            onClick: () => send({ type: 'undo' }),
+        },
+        guide: {
+            'data-scope': 'signature-pad',
+            'data-part': 'guide',
+            'aria-hidden': 'true',
+        },
+        hiddenInput: {
+            type: 'hidden',
+            // Serialize strokes as JSON for form submission.
+            value: (s) => JSON.stringify(get(s).strokes),
+            ...(opts.name !== undefined ? { name: opts.name } : {}),
+            'data-scope': 'signature-pad',
+            'data-part': 'hidden-input',
+        },
+    };
+}
+export const signaturePad = {
+    init,
+    update,
+    connect,
+    isEmpty,
+    pointCount,
+    getBounds,
+};