@llui/components 0.0.1

package/dist/components/progress.js

@@ -0,0 +1,80 @@
+export function init(opts = {}) {
+    return {
+        value: 'value' in opts ? opts.value : 0,
+        min: opts.min ?? 0,
+        max: opts.max ?? 100,
+        orientation: opts.orientation ?? 'horizontal',
+    };
+}
+export function update(state, msg) {
+    switch (msg.type) {
+        case 'setValue':
+            return [{ ...state, value: msg.value }, []];
+        case 'setMax':
+            return [{ ...state, max: msg.max }, []];
+    }
+}
+export function percent(state) {
+    if (state.value === null)
+        return null;
+    const range = state.max - state.min;
+    if (range <= 0)
+        return 0;
+    return ((state.value - state.min) / range) * 100;
+}
+export function valueState(state) {
+    if (state.value === null)
+        return 'indeterminate';
+    if (state.value >= state.max)
+        return 'complete';
+    return 'loading';
+}
+export function connect(get, _send, opts = {}) {
+    const label = opts.label;
+    const format = opts.format ?? defaultFormat;
+    return {
+        root: {
+            role: 'progressbar',
+            'aria-valuemin': (s) => get(s).min,
+            'aria-valuemax': (s) => get(s).max,
+            'aria-valuenow': (s) => get(s).value ?? undefined,
+            'aria-label': label,
+            'data-state': (s) => valueState(get(s)),
+            'data-orientation': (s) => get(s).orientation,
+            'data-scope': 'progress',
+            'data-part': 'root',
+        },
+        track: {
+            'data-state': (s) => valueState(get(s)),
+            'data-orientation': (s) => get(s).orientation,
+            'data-scope': 'progress',
+            'data-part': 'track',
+        },
+        range: {
+            'data-state': (s) => valueState(get(s)),
+            'data-orientation': (s) => get(s).orientation,
+            'data-scope': 'progress',
+            'data-part': 'range',
+            style: (s) => rangeStyle(get(s)),
+        },
+        label: {
+            'data-scope': 'progress',
+            'data-part': 'label',
+        },
+        valueText: (s) => format(get(s).value, get(s).max),
+    };
+}
+function defaultFormat(value, max) {
+    if (value === null)
+        return 'Loading…';
+    const pct = Math.round((value / max) * 100);
+    return `${pct}%`;
+}
+function rangeStyle(state) {
+    const p = percent(state);
+    if (p === null)
+        return '';
+    const clamped = Math.max(0, Math.min(100, p));
+    return state.orientation === 'horizontal' ? `width:${clamped}%;` : `height:${clamped}%;`;
+}
+export const progress = { init, update, connect, percent, valueState };

package/dist/components/qr-code.d.ts

@@ -0,0 +1,114 @@
+import type { Send } from '@llui/dom';
+/**
+ * QR code — renders a QR matrix as SVG. llui does not bundle a QR
+ * encoder (encoders are sizable and consumer apps typically already
+ * have one); instead, the consumer provides the encoded matrix via
+ * `setMatrix` (or through the optional `encode` callback on
+ * ConnectOptions, invoked when the value changes).
+ *
+ * Minimum usage with a BYOE (bring-your-own-encoder) library — the
+ * consumer dispatches `setMatrix` with the encoded bits from their
+ * update handler:
+ *
+ *   import QRCode from 'qrcode-generator'
+ *
+ *   update: (state, msg) => {
+ *     if (msg.type === 'updateQr') {
+ *       const q = QRCode(0, state.qr.errorCorrection)
+ *       q.addData(msg.value); q.make()
+ *       const n = q.getModuleCount()
+ *       const matrix: boolean[][] = []
+ *       for (let y = 0; y < n; y++) {
+ *         const row: boolean[] = []
+ *         for (let x = 0; x < n; x++) row.push(q.isDark(y, x))
+ *         matrix.push(row)
+ *       }
+ *       return [{ ...state, qr: { ...state.qr, value: msg.value, matrix } }, []]
+ *     }
+ *   }
+ */
+export type ErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H';
+export interface QrCodeState {
+    value: string;
+    /** NxN boolean matrix — true means dark (filled) module. */
+    matrix: boolean[][];
+    errorCorrection: ErrorCorrectionLevel;
+}
+export type QrCodeMsg = {
+    type: 'setValue';
+    value: string;
+} | {
+    type: 'setMatrix';
+    matrix: boolean[][];
+} | {
+    type: 'setErrorCorrection';
+    level: ErrorCorrectionLevel;
+};
+export interface QrCodeInit {
+    value?: string;
+    matrix?: boolean[][];
+    errorCorrection?: ErrorCorrectionLevel;
+}
+export declare function init(opts?: QrCodeInit): QrCodeState;
+export declare function update(state: QrCodeState, msg: QrCodeMsg): [QrCodeState, never[]];
+/** Matrix side length (in modules). Returns 0 for empty matrix. */
+export declare function size(state: QrCodeState): number;
+/**
+ * Compute an SVG path string that fills every dark module. Each dark
+ * module becomes a unit-sized square at (col, row) coordinates in module
+ * space; the caller scales via `viewBox` or CSS. Using a single path
+ * is vastly more performant than rendering N² individual <rect>s.
+ */
+export declare function toSvgPath(matrix: boolean[][]): string;
+/**
+ * Encode the matrix as a monochrome 1-bit-per-pixel PNG-ish URL. This
+ * is a helper for <img src> consumption — it generates a `data:image/svg+xml`
+ * URL (SVG is simpler and scales losslessly).
+ */
+export declare function toDataUrl(matrix: boolean[][], foreground?: string, background?: string): string;
+export interface QrCodeParts<S> {
+    root: {
+        'data-scope': 'qr-code';
+        'data-part': 'root';
+        'aria-label': string;
+    };
+    svg: {
+        'data-scope': 'qr-code';
+        'data-part': 'svg';
+        role: 'img';
+        viewBox: (s: S) => string;
+        'shape-rendering': 'crispEdges';
+    };
+    background: {
+        'data-scope': 'qr-code';
+        'data-part': 'background';
+    };
+    foreground: {
+        'data-scope': 'qr-code';
+        'data-part': 'foreground';
+        d: (s: S) => string;
+    };
+    downloadTrigger: {
+        type: 'button';
+        'aria-label': string;
+        'data-scope': 'qr-code';
+        'data-part': 'download-trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+}
+export interface ConnectOptions {
+    label?: string;
+    downloadLabel?: string;
+    /** Filename for the downloaded SVG. */
+    downloadFilename?: string;
+}
+export declare function connect<S>(get: (s: S) => QrCodeState, send: Send<QrCodeMsg>, opts?: ConnectOptions): QrCodeParts<S>;
+export declare const qrCode: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    size: typeof size;
+    toSvgPath: typeof toSvgPath;
+    toDataUrl: typeof toDataUrl;
+};
+//# sourceMappingURL=qr-code.d.ts.map

package/dist/components/qr-code.d.ts.map

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

package/dist/components/qr-code.js

@@ -0,0 +1,108 @@
+export function init(opts = {}) {
+    return {
+        value: opts.value ?? '',
+        matrix: opts.matrix ?? [],
+        errorCorrection: opts.errorCorrection ?? 'M',
+    };
+}
+export function update(state, msg) {
+    switch (msg.type) {
+        case 'setValue':
+            return [{ ...state, value: msg.value }, []];
+        case 'setMatrix':
+            return [{ ...state, matrix: msg.matrix }, []];
+        case 'setErrorCorrection':
+            return [{ ...state, errorCorrection: msg.level }, []];
+    }
+}
+/** Matrix side length (in modules). Returns 0 for empty matrix. */
+export function size(state) {
+    return state.matrix.length;
+}
+/**
+ * Compute an SVG path string that fills every dark module. Each dark
+ * module becomes a unit-sized square at (col, row) coordinates in module
+ * space; the caller scales via `viewBox` or CSS. Using a single path
+ * is vastly more performant than rendering N² individual <rect>s.
+ */
+export function toSvgPath(matrix) {
+    const parts = [];
+    for (let y = 0; y < matrix.length; y++) {
+        const row = matrix[y];
+        for (let x = 0; x < row.length; x++) {
+            if (row[x])
+                parts.push(`M${x},${y}h1v1h-1z`);
+        }
+    }
+    return parts.join('');
+}
+/**
+ * Encode the matrix as a monochrome 1-bit-per-pixel PNG-ish URL. This
+ * is a helper for <img src> consumption — it generates a `data:image/svg+xml`
+ * URL (SVG is simpler and scales losslessly).
+ */
+export function toDataUrl(matrix, foreground = '#000', background = '#fff') {
+    const s = matrix.length;
+    if (s === 0)
+        return '';
+    const path = toSvgPath(matrix);
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${s} ${s}" shape-rendering="crispEdges">` +
+        `<rect width="${s}" height="${s}" fill="${background}"/>` +
+        `<path d="${path}" fill="${foreground}"/>` +
+        `</svg>`;
+    return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+}
+export function connect(get, send, opts = {}) {
+    const label = opts.label ?? 'QR code';
+    const filename = opts.downloadFilename ?? 'qrcode.svg';
+    return {
+        root: {
+            'data-scope': 'qr-code',
+            'data-part': 'root',
+            'aria-label': label,
+        },
+        svg: {
+            'data-scope': 'qr-code',
+            'data-part': 'svg',
+            role: 'img',
+            viewBox: (s) => {
+                const n = size(get(s));
+                return n > 0 ? `0 0 ${n} ${n}` : '0 0 1 1';
+            },
+            'shape-rendering': 'crispEdges',
+        },
+        background: {
+            'data-scope': 'qr-code',
+            'data-part': 'background',
+        },
+        foreground: {
+            'data-scope': 'qr-code',
+            'data-part': 'foreground',
+            d: (s) => toSvgPath(get(s).matrix),
+        },
+        downloadTrigger: {
+            type: 'button',
+            'aria-label': opts.downloadLabel ?? 'Download QR code',
+            'data-scope': 'qr-code',
+            'data-part': 'download-trigger',
+            onClick: () => {
+                // Generate an SVG blob and trigger a download via a hidden link.
+                // State isn't accessible here; caller should use the current value
+                // in a DOM query or run this inside a closure with state access.
+                // We dispatch a best-effort via the document for now.
+                const root = document.querySelector('[data-scope="qr-code"][data-part="svg"]');
+                if (!root)
+                    return;
+                const xml = new XMLSerializer().serializeToString(root);
+                const blob = new Blob([xml], { type: 'image/svg+xml' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = filename;
+                a.click();
+                URL.revokeObjectURL(url);
+            },
+        },
+    };
+}
+export const qrCode = { init, update, connect, size, toSvgPath, toDataUrl };

package/dist/components/radio-group.d.ts

@@ -0,0 +1,89 @@
+import type { Send } from '@llui/dom';
+/**
+ * Radio group — a set of mutually-exclusive options. Users select one value
+ * at a time. Supports keyboard arrow navigation and disabled items.
+ */
+export type Orientation = 'horizontal' | 'vertical';
+export interface RadioGroupState {
+    value: string | null;
+    items: string[];
+    disabledItems: string[];
+    disabled: boolean;
+    orientation: Orientation;
+}
+export type RadioGroupMsg = {
+    type: 'setValue';
+    value: string;
+} | {
+    type: 'setItems';
+    items: string[];
+    disabled?: string[];
+} | {
+    type: 'selectNext';
+    from: string;
+} | {
+    type: 'selectPrev';
+    from: string;
+} | {
+    type: 'selectFirst';
+} | {
+    type: 'selectLast';
+};
+export interface RadioGroupInit {
+    value?: string | null;
+    items?: string[];
+    disabledItems?: string[];
+    disabled?: boolean;
+    orientation?: Orientation;
+}
+export declare function init(opts?: RadioGroupInit): RadioGroupState;
+export declare function update(state: RadioGroupState, msg: RadioGroupMsg): [RadioGroupState, never[]];
+export interface RadioItemParts<S> {
+    root: {
+        role: 'radio';
+        id: string;
+        'aria-checked': (s: S) => boolean;
+        'aria-disabled': (s: S) => 'true' | undefined;
+        'data-state': (s: S) => 'checked' | 'unchecked';
+        'data-disabled': (s: S) => '' | undefined;
+        'data-scope': 'radio-group';
+        'data-part': 'item';
+        'data-value': string;
+        tabIndex: (s: S) => number;
+        onClick: (e: MouseEvent) => void;
+        onKeyDown: (e: KeyboardEvent) => void;
+    };
+    label: {
+        'data-scope': 'radio-group';
+        'data-part': 'label';
+        'data-value': string;
+        for: string;
+    };
+    indicator: {
+        'data-state': (s: S) => 'checked' | 'unchecked';
+        'data-scope': 'radio-group';
+        'data-part': 'indicator';
+    };
+}
+export interface RadioGroupParts<S> {
+    root: {
+        role: 'radiogroup';
+        'aria-orientation': (s: S) => Orientation;
+        'aria-disabled': (s: S) => 'true' | undefined;
+        'data-scope': 'radio-group';
+        'data-part': 'root';
+        'data-orientation': (s: S) => Orientation;
+        'data-disabled': (s: S) => '' | undefined;
+    };
+    item: (value: string) => RadioItemParts<S>;
+}
+export interface ConnectOptions {
+    id: string;
+}
+export declare function connect<S>(get: (s: S) => RadioGroupState, send: Send<RadioGroupMsg>, opts: ConnectOptions): RadioGroupParts<S>;
+export declare const radioGroup: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+};
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/components/radio-group.d.ts.map

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

package/dist/components/radio-group.js

@@ -0,0 +1,161 @@
+export function init(opts = {}) {
+    return {
+        value: opts.value ?? null,
+        items: opts.items ?? [],
+        disabledItems: opts.disabledItems ?? [],
+        disabled: opts.disabled ?? false,
+        orientation: opts.orientation ?? 'vertical',
+    };
+}
+function nextEnabled(items, disabled, from, delta) {
+    if (items.length === 0)
+        return null;
+    const idx = items.indexOf(from);
+    if (idx === -1)
+        return null;
+    const n = items.length;
+    for (let i = 1; i <= n; i++) {
+        const next = items[(idx + delta * i + n * n) % n];
+        if (!disabled.includes(next))
+            return next;
+    }
+    return null;
+}
+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;
+}
+export function update(state, msg) {
+    if (state.disabled)
+        return [state, []];
+    switch (msg.type) {
+        case 'setValue':
+            if (state.disabledItems.includes(msg.value))
+                return [state, []];
+            return [{ ...state, value: msg.value }, []];
+        case 'setItems': {
+            const disabled = msg.disabled ?? state.disabledItems;
+            const value = state.value && msg.items.includes(state.value) && !disabled.includes(state.value)
+                ? state.value
+                : null;
+            return [{ ...state, items: msg.items, disabledItems: disabled, value }, []];
+        }
+        case 'selectNext': {
+            const to = nextEnabled(state.items, state.disabledItems, msg.from, 1);
+            return to === null ? [state, []] : [{ ...state, value: to }, []];
+        }
+        case 'selectPrev': {
+            const to = nextEnabled(state.items, state.disabledItems, msg.from, -1);
+            return to === null ? [state, []] : [{ ...state, value: to }, []];
+        }
+        case 'selectFirst': {
+            const to = firstEnabled(state.items, state.disabledItems);
+            return to === null ? [state, []] : [{ ...state, value: to }, []];
+        }
+        case 'selectLast': {
+            const to = lastEnabled(state.items, state.disabledItems);
+            return to === null ? [state, []] : [{ ...state, value: to }, []];
+        }
+    }
+}
+export function connect(get, send, opts) {
+    const itemId = (v) => `${opts.id}:item:${v}`;
+    return {
+        root: {
+            role: 'radiogroup',
+            'aria-orientation': (s) => get(s).orientation,
+            'aria-disabled': (s) => (get(s).disabled ? 'true' : undefined),
+            'data-scope': 'radio-group',
+            'data-part': 'root',
+            'data-orientation': (s) => get(s).orientation,
+            'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+        },
+        item: (value) => ({
+            root: {
+                role: 'radio',
+                id: itemId(value),
+                'aria-checked': (s) => get(s).value === value,
+                'aria-disabled': (s) => get(s).disabledItems.includes(value) || get(s).disabled ? 'true' : undefined,
+                'data-state': (s) => (get(s).value === value ? 'checked' : 'unchecked'),
+                'data-disabled': (s) => get(s).disabledItems.includes(value) || get(s).disabled ? '' : undefined,
+                'data-scope': 'radio-group',
+                'data-part': 'item',
+                'data-value': value,
+                // Only currently-selected (or first if none selected) is tab-stop
+                tabIndex: (s) => {
+                    const st = get(s);
+                    if (st.disabled || st.disabledItems.includes(value))
+                        return -1;
+                    if (st.value === value)
+                        return 0;
+                    if (st.value === null) {
+                        const first = firstEnabled(st.items, st.disabledItems);
+                        return first === value ? 0 : -1;
+                    }
+                    return -1;
+                },
+                onClick: () => send({ type: 'setValue', value }),
+                onKeyDown: (e) => {
+                    const isVertical = e.currentTarget?.closest('[data-orientation="vertical"]') !==
+                        null;
+                    switch (e.key) {
+                        case 'ArrowDown':
+                            if (isVertical) {
+                                e.preventDefault();
+                                send({ type: 'selectNext', from: value });
+                            }
+                            return;
+                        case 'ArrowUp':
+                            if (isVertical) {
+                                e.preventDefault();
+                                send({ type: 'selectPrev', from: value });
+                            }
+                            return;
+                        case 'ArrowRight':
+                            e.preventDefault();
+                            send({ type: 'selectNext', from: value });
+                            return;
+                        case 'ArrowLeft':
+                            e.preventDefault();
+                            send({ type: 'selectPrev', from: value });
+                            return;
+                        case 'Home':
+                            e.preventDefault();
+                            send({ type: 'selectFirst' });
+                            return;
+                        case 'End':
+                            e.preventDefault();
+                            send({ type: 'selectLast' });
+                            return;
+                        case ' ':
+                            e.preventDefault();
+                            send({ type: 'setValue', value });
+                            return;
+                    }
+                },
+            },
+            label: {
+                'data-scope': 'radio-group',
+                'data-part': 'label',
+                'data-value': value,
+                for: itemId(value),
+            },
+            indicator: {
+                'data-state': (s) => (get(s).value === value ? 'checked' : 'unchecked'),
+                'data-scope': 'radio-group',
+                'data-part': 'indicator',
+            },
+        }),
+    };
+}
+export const radioGroup = { init, update, connect };

package/dist/components/rating-group.d.ts

@@ -0,0 +1,88 @@
+import type { Send } from '@llui/dom';
+/**
+ * Rating group — a sequence of clickable items (stars) representing a
+ * discrete rating. Supports half-step ratings and keyboard navigation.
+ */
+export interface RatingGroupState {
+    value: number;
+    count: number;
+    /** If true, allows values like 1.5 (half-stars). */
+    allowHalf: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    hoveredValue: number | null;
+}
+export type RatingGroupMsg = {
+    type: 'setValue';
+    value: number;
+} | {
+    type: 'hover';
+    value: number | null;
+} | {
+    type: 'clickItem';
+    index: number;
+    isLeftHalf: boolean;
+} | {
+    type: 'hoverItem';
+    index: number;
+    isLeftHalf: boolean;
+} | {
+    type: 'incrementValue';
+    step?: number;
+} | {
+    type: 'decrementValue';
+    step?: number;
+} | {
+    type: 'toEnd';
+};
+export interface RatingGroupInit {
+    value?: number;
+    count?: number;
+    allowHalf?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+}
+export declare function init(opts?: RatingGroupInit): RatingGroupState;
+export declare function update(state: RatingGroupState, msg: RatingGroupMsg): [RatingGroupState, never[]];
+export type ItemFill = 'full' | 'half' | 'empty';
+export declare function itemFill(state: RatingGroupState, index: number): ItemFill;
+export interface RatingItemParts<S> {
+    root: {
+        role: 'radio';
+        'aria-checked': (s: S) => boolean;
+        'data-fill': (s: S) => ItemFill;
+        'data-scope': 'rating-group';
+        'data-part': 'item';
+        'data-value': string;
+        'data-disabled': (s: S) => '' | undefined;
+        tabIndex: (s: S) => number;
+        onClick: (e: MouseEvent) => void;
+        onPointerMove: (e: PointerEvent) => void;
+        onPointerLeave: (e: PointerEvent) => void;
+        onKeyDown: (e: KeyboardEvent) => void;
+    };
+}
+export interface RatingGroupParts<S> {
+    root: {
+        role: 'radiogroup';
+        'aria-label': string | undefined;
+        'aria-disabled': (s: S) => 'true' | undefined;
+        'aria-readonly': (s: S) => 'true' | undefined;
+        'data-scope': 'rating-group';
+        'data-part': 'root';
+        'data-disabled': (s: S) => '' | undefined;
+        'data-readonly': (s: S) => '' | undefined;
+    };
+    item: (index: number) => RatingItemParts<S>;
+}
+export interface ConnectOptions {
+    label?: string;
+}
+export declare function connect<S>(get: (s: S) => RatingGroupState, send: Send<RatingGroupMsg>, opts?: ConnectOptions): RatingGroupParts<S>;
+export declare const ratingGroup: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    itemFill: typeof itemFill;
+};
+//# sourceMappingURL=rating-group.d.ts.map

package/dist/components/rating-group.d.ts.map

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