@llui/components 0.0.1

package/dist/components/carousel.js

@@ -0,0 +1,131 @@
+export function init(opts = {}) {
+    return {
+        current: opts.current ?? 0,
+        count: opts.count ?? 0,
+        loop: opts.loop ?? true,
+        autoplay: opts.autoplay ?? false,
+        interval: opts.interval ?? 5000,
+        paused: false,
+        direction: 'forward',
+    };
+}
+function clampIndex(state, next) {
+    if (state.count === 0)
+        return 0;
+    if (state.loop)
+        return ((next % state.count) + state.count) % state.count;
+    return Math.max(0, Math.min(state.count - 1, next));
+}
+export function update(state, msg) {
+    switch (msg.type) {
+        case 'goTo': {
+            const next = clampIndex(state, msg.index);
+            return [
+                { ...state, current: next, direction: next >= state.current ? 'forward' : 'backward' },
+                [],
+            ];
+        }
+        case 'next': {
+            const next = clampIndex(state, state.current + 1);
+            return [{ ...state, current: next, direction: 'forward' }, []];
+        }
+        case 'prev': {
+            const prev = clampIndex(state, state.current - 1);
+            return [{ ...state, current: prev, direction: 'backward' }, []];
+        }
+        case 'setCount': {
+            const current = Math.min(state.current, Math.max(0, msg.count - 1));
+            return [{ ...state, count: msg.count, current }, []];
+        }
+        case 'pause':
+            return [{ ...state, paused: true }, []];
+        case 'resume':
+            return [{ ...state, paused: false }, []];
+        case 'setAutoplay':
+            return [{ ...state, autoplay: msg.autoplay }, []];
+    }
+}
+export function canGoNext(state) {
+    if (state.loop)
+        return state.count > 0;
+    return state.current < state.count - 1;
+}
+export function canGoPrev(state) {
+    if (state.loop)
+        return state.count > 0;
+    return state.current > 0;
+}
+export function connect(get, send, opts) {
+    const label = opts.label ?? 'Carousel';
+    const indicatorLabel = opts.indicatorLabel ?? 'Slide indicators';
+    const nextLabel = opts.nextLabel ?? 'Next slide';
+    const prevLabel = opts.prevLabel ?? 'Previous slide';
+    const slideLabelFn = opts.slideLabel;
+    const slideId = (i) => `${opts.id}:slide:${i}`;
+    return {
+        root: {
+            role: 'region',
+            'aria-roledescription': 'carousel',
+            'aria-label': label,
+            'data-scope': 'carousel',
+            'data-part': 'root',
+            'data-paused': (s) => (get(s).paused ? '' : undefined),
+            onPointerEnter: () => send({ type: 'pause' }),
+            onPointerLeave: () => send({ type: 'resume' }),
+            onFocus: () => send({ type: 'pause' }),
+            onBlur: () => send({ type: 'resume' }),
+        },
+        viewport: {
+            'data-scope': 'carousel',
+            'data-part': 'viewport',
+        },
+        indicatorGroup: {
+            role: 'tablist',
+            'aria-label': indicatorLabel,
+            'data-scope': 'carousel',
+            'data-part': 'indicator-group',
+        },
+        nextTrigger: {
+            type: 'button',
+            'aria-label': nextLabel,
+            disabled: (s) => !canGoNext(get(s)),
+            'data-scope': 'carousel',
+            'data-part': 'next-trigger',
+            onClick: () => send({ type: 'next' }),
+        },
+        prevTrigger: {
+            type: 'button',
+            'aria-label': prevLabel,
+            disabled: (s) => !canGoPrev(get(s)),
+            'data-scope': 'carousel',
+            'data-part': 'prev-trigger',
+            onClick: () => send({ type: 'prev' }),
+        },
+        slide: (index) => ({
+            slide: {
+                role: 'tabpanel',
+                id: slideId(index),
+                'aria-roledescription': 'slide',
+                'aria-label': slideLabelFn ? slideLabelFn(index, 0) : `Slide ${index + 1}`,
+                'data-scope': 'carousel',
+                'data-part': 'slide',
+                'data-index': String(index),
+                'data-active': (s) => (get(s).current === index ? '' : undefined),
+                hidden: (s) => get(s).current !== index,
+            },
+            indicator: {
+                type: 'button',
+                role: 'tab',
+                'aria-label': `Go to slide ${index + 1}`,
+                'aria-selected': (s) => get(s).current === index,
+                'aria-controls': slideId(index),
+                'data-scope': 'carousel',
+                'data-part': 'indicator',
+                'data-index': String(index),
+                'data-active': (s) => (get(s).current === index ? '' : undefined),
+                onClick: () => send({ type: 'goTo', index }),
+            },
+        }),
+    };
+}
+export const carousel = { init, update, connect, canGoNext, canGoPrev };

package/dist/components/cascade-select.d.ts

@@ -0,0 +1,95 @@
+import type { Send } from '@llui/dom';
+/**
+ * Cascade select — a series of dependent selects where each level's
+ * choice filters the options of the next. Classic example: country
+ * → state → city. The machine stores a flat list of selections
+ * (one per level, or null) and the options at each level; filtering
+ * logic is left to the view/consumer.
+ *
+ * Level shape: the consumer passes an array of Level descriptors on
+ * setLevels, each with its own options. Selecting at level N clears
+ * selections at levels > N.
+ */
+export interface CascadeLevel {
+    id: string;
+    label: string;
+    options: Array<{
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }>;
+}
+export interface CascadeSelectState {
+    levels: CascadeLevel[];
+    /** Parallel to levels: one value per level, or null. */
+    values: (string | null)[];
+    disabled: boolean;
+}
+export type CascadeSelectMsg = {
+    type: 'setLevels';
+    levels: CascadeLevel[];
+} | {
+    type: 'setValue';
+    levelIndex: number;
+    value: string | null;
+} | {
+    type: 'clear';
+};
+export interface CascadeSelectInit {
+    levels?: CascadeLevel[];
+    values?: (string | null)[];
+    disabled?: boolean;
+}
+export declare function init(opts?: CascadeSelectInit): CascadeSelectState;
+export declare function update(state: CascadeSelectState, msg: CascadeSelectMsg): [CascadeSelectState, never[]];
+export declare function isLevelReady(state: CascadeSelectState, levelIndex: number): boolean;
+export declare function isComplete(state: CascadeSelectState): boolean;
+export declare function completeValues(state: CascadeSelectState): string[] | null;
+export interface CascadeLevelParts<S> {
+    label: {
+        for: string;
+        'data-scope': 'cascade-select';
+        'data-part': 'level-label';
+    };
+    select: {
+        id: string;
+        disabled: (s: S) => boolean;
+        value: (s: S) => string;
+        'data-scope': 'cascade-select';
+        'data-part': 'level-select';
+        'data-level': string;
+        'data-ready': (s: S) => '' | undefined;
+        onChange: (e: Event) => void;
+    };
+}
+export interface CascadeSelectParts<S> {
+    root: {
+        'data-scope': 'cascade-select';
+        'data-part': 'root';
+        'data-disabled': (s: S) => '' | undefined;
+        'data-complete': (s: S) => '' | undefined;
+    };
+    clearTrigger: {
+        type: 'button';
+        'aria-label': string;
+        disabled: (s: S) => boolean;
+        'data-scope': 'cascade-select';
+        'data-part': 'clear-trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+    level: (index: number) => CascadeLevelParts<S>;
+}
+export interface ConnectOptions {
+    id: string;
+    clearLabel?: string;
+}
+export declare function connect<S>(get: (s: S) => CascadeSelectState, send: Send<CascadeSelectMsg>, opts: ConnectOptions): CascadeSelectParts<S>;
+export declare const cascadeSelect: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    isLevelReady: typeof isLevelReady;
+    isComplete: typeof isComplete;
+    completeValues: typeof completeValues;
+};
+//# sourceMappingURL=cascade-select.d.ts.map

package/dist/components/cascade-select.d.ts.map

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

package/dist/components/cascade-select.js

@@ -0,0 +1,100 @@
+export function init(opts = {}) {
+    const levels = opts.levels ?? [];
+    const values = opts.values ?? new Array(levels.length).fill(null);
+    // Normalize: pad or trim values array to match levels length
+    const normalized = [];
+    for (let i = 0; i < levels.length; i++) {
+        normalized.push(values[i] ?? null);
+    }
+    return {
+        levels,
+        values: normalized,
+        disabled: opts.disabled ?? false,
+    };
+}
+export function update(state, msg) {
+    if (state.disabled && msg.type !== 'clear')
+        return [state, []];
+    switch (msg.type) {
+        case 'setLevels': {
+            const values = new Array(msg.levels.length).fill(null);
+            return [{ ...state, levels: msg.levels, values }, []];
+        }
+        case 'setValue': {
+            if (msg.levelIndex < 0 || msg.levelIndex >= state.levels.length)
+                return [state, []];
+            // Setting a level clears all levels below it.
+            const next = state.values.slice();
+            next[msg.levelIndex] = msg.value;
+            for (let i = msg.levelIndex + 1; i < next.length; i++) {
+                next[i] = null;
+            }
+            return [{ ...state, values: next }, []];
+        }
+        case 'clear':
+            return [{ ...state, values: new Array(state.levels.length).fill(null) }, []];
+    }
+}
+export function isLevelReady(state, levelIndex) {
+    // A level is ready to accept input if all prior levels have values.
+    for (let i = 0; i < levelIndex; i++) {
+        if (state.values[i] === null)
+            return false;
+    }
+    return true;
+}
+export function isComplete(state) {
+    return state.values.every((v) => v !== null);
+}
+export function completeValues(state) {
+    if (!isComplete(state))
+        return null;
+    return state.values;
+}
+export function connect(get, send, opts) {
+    const levelId = (i) => `${opts.id}:level:${i}`;
+    return {
+        root: {
+            'data-scope': 'cascade-select',
+            'data-part': 'root',
+            'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+            'data-complete': (s) => (isComplete(get(s)) ? '' : undefined),
+        },
+        clearTrigger: {
+            type: 'button',
+            'aria-label': opts.clearLabel ?? 'Clear selection',
+            disabled: (s) => get(s).values.every((v) => v === null),
+            'data-scope': 'cascade-select',
+            'data-part': 'clear-trigger',
+            onClick: () => send({ type: 'clear' }),
+        },
+        level: (index) => ({
+            label: {
+                for: levelId(index),
+                'data-scope': 'cascade-select',
+                'data-part': 'level-label',
+            },
+            select: {
+                id: levelId(index),
+                disabled: (s) => get(s).disabled || !isLevelReady(get(s), index),
+                value: (s) => get(s).values[index] ?? '',
+                'data-scope': 'cascade-select',
+                'data-part': 'level-select',
+                'data-level': String(index),
+                'data-ready': (s) => (isLevelReady(get(s), index) ? '' : undefined),
+                onChange: (e) => {
+                    const el = e.target;
+                    send({ type: 'setValue', levelIndex: index, value: el.value || null });
+                },
+            },
+        }),
+    };
+}
+export const cascadeSelect = {
+    init,
+    update,
+    connect,
+    isLevelReady,
+    isComplete,
+    completeValues,
+};

package/dist/components/checkbox.d.ts

@@ -0,0 +1,74 @@
+import type { Send } from '@llui/dom';
+/**
+ * Checkbox — a tri-state form control (checked / unchecked / indeterminate).
+ * The `indeterminate` state is a visual-only state used to represent "partial"
+ * selection (e.g. a parent whose children are mixed checked).
+ *
+ * Rendering typically uses two elements: a visual indicator (the styled box)
+ * and a hidden native `<input type="checkbox">` for form participation +
+ * accessibility. `connect()` returns props for both.
+ */
+export type CheckedState = boolean | 'indeterminate';
+export interface CheckboxState {
+    checked: CheckedState;
+    disabled: boolean;
+    required: boolean;
+}
+export type CheckboxMsg = {
+    type: 'toggle';
+} | {
+    type: 'setChecked';
+    checked: CheckedState;
+} | {
+    type: 'setDisabled';
+    disabled: boolean;
+};
+export interface CheckboxInit {
+    checked?: CheckedState;
+    disabled?: boolean;
+    required?: boolean;
+}
+export declare function init(opts?: CheckboxInit): CheckboxState;
+export declare function update(state: CheckboxState, msg: CheckboxMsg): [CheckboxState, never[]];
+export interface CheckboxParts<S> {
+    /** The visual box/container — `role="checkbox"` for accessibility. */
+    root: {
+        role: 'checkbox';
+        'aria-checked': (s: S) => 'true' | 'false' | 'mixed';
+        'aria-disabled': (s: S) => 'true' | undefined;
+        'aria-required': (s: S) => 'true' | undefined;
+        'data-state': (s: S) => 'checked' | 'unchecked' | 'indeterminate';
+        'data-disabled': (s: S) => '' | undefined;
+        'data-scope': 'checkbox';
+        'data-part': 'root';
+        tabIndex: (s: S) => number;
+        onClick: (e: MouseEvent) => void;
+        onKeyDown: (e: KeyboardEvent) => void;
+    };
+    /** A native hidden input for form participation. */
+    hiddenInput: {
+        type: 'checkbox';
+        'aria-hidden': 'true';
+        tabIndex: -1;
+        style: string;
+        checked: (s: S) => boolean;
+        indeterminate: (s: S) => boolean;
+        disabled: (s: S) => boolean;
+        required: (s: S) => boolean;
+        'data-scope': 'checkbox';
+        'data-part': 'hidden-input';
+    };
+    /** Optional indicator child (the checkmark). */
+    indicator: {
+        'data-state': (s: S) => 'checked' | 'unchecked' | 'indeterminate';
+        'data-scope': 'checkbox';
+        'data-part': 'indicator';
+    };
+}
+export declare function connect<S>(get: (s: S) => CheckboxState, send: Send<CheckboxMsg>): CheckboxParts<S>;
+export declare const checkbox: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+};
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/components/checkbox.d.ts.map

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

package/dist/components/checkbox.js

@@ -0,0 +1,73 @@
+export function init(opts = {}) {
+    return {
+        checked: opts.checked ?? false,
+        disabled: opts.disabled ?? false,
+        required: opts.required ?? false,
+    };
+}
+export function update(state, msg) {
+    switch (msg.type) {
+        case 'toggle':
+            if (state.disabled)
+                return [state, []];
+            // Tri-state toggle: indeterminate → checked, otherwise flip boolean
+            if (state.checked === 'indeterminate')
+                return [{ ...state, checked: true }, []];
+            return [{ ...state, checked: !state.checked }, []];
+        case 'setChecked':
+            return [{ ...state, checked: msg.checked }, []];
+        case 'setDisabled':
+            return [{ ...state, disabled: msg.disabled }, []];
+    }
+}
+function ariaChecked(c) {
+    if (c === 'indeterminate')
+        return 'mixed';
+    return c ? 'true' : 'false';
+}
+function dataState(c) {
+    if (c === 'indeterminate')
+        return 'indeterminate';
+    return c ? 'checked' : 'unchecked';
+}
+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) {
+    return {
+        root: {
+            role: 'checkbox',
+            'aria-checked': (s) => ariaChecked(get(s).checked),
+            'aria-disabled': (s) => (get(s).disabled ? 'true' : undefined),
+            'aria-required': (s) => (get(s).required ? 'true' : undefined),
+            'data-state': (s) => dataState(get(s).checked),
+            'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+            'data-scope': 'checkbox',
+            'data-part': 'root',
+            tabIndex: (s) => (get(s).disabled ? -1 : 0),
+            onClick: () => send({ type: 'toggle' }),
+            onKeyDown: (e) => {
+                if (e.key === ' ') {
+                    e.preventDefault();
+                    send({ type: 'toggle' });
+                }
+            },
+        },
+        hiddenInput: {
+            type: 'checkbox',
+            'aria-hidden': 'true',
+            tabIndex: -1,
+            style: HIDDEN_STYLE,
+            checked: (s) => get(s).checked === true,
+            indeterminate: (s) => get(s).checked === 'indeterminate',
+            disabled: (s) => get(s).disabled,
+            required: (s) => get(s).required,
+            'data-scope': 'checkbox',
+            'data-part': 'hidden-input',
+        },
+        indicator: {
+            'data-state': (s) => dataState(get(s).checked),
+            'data-scope': 'checkbox',
+            'data-part': 'indicator',
+        },
+    };
+}
+export const checkbox = { init, update, connect };

package/dist/components/clipboard.d.ts

@@ -0,0 +1,72 @@
+import type { Send } from '@llui/dom';
+/**
+ * Clipboard — copy-to-clipboard with transient "copied" feedback. The
+ * actual clipboard write is performed by the consumer via an effect (or
+ * inline in the trigger's onClick handler). Reducer tracks the success
+ * state flag and an auto-reset timestamp.
+ */
+export interface ClipboardState {
+    value: string;
+    copied: boolean;
+}
+export type ClipboardMsg = {
+    type: 'setValue';
+    value: string;
+} | {
+    type: 'copy';
+} | {
+    type: 'copied';
+} | {
+    type: 'reset';
+};
+export interface ClipboardInit {
+    value?: string;
+}
+export declare function init(opts?: ClipboardInit): ClipboardState;
+export declare function update(state: ClipboardState, msg: ClipboardMsg): [ClipboardState, never[]];
+/**
+ * Attempt to copy the value to the clipboard. Returns a Promise that resolves
+ * on success. Consumer dispatches `copied` or `reset` based on the result.
+ */
+export declare function copyToClipboard(value: string): Promise<void>;
+export interface ClipboardParts<S> {
+    root: {
+        'data-scope': 'clipboard';
+        'data-part': 'root';
+        'data-copied': (s: S) => '' | undefined;
+    };
+    trigger: {
+        type: 'button';
+        'aria-label': string;
+        'data-scope': 'clipboard';
+        'data-part': 'trigger';
+        'data-copied': (s: S) => '' | undefined;
+        onClick: (e: MouseEvent) => void;
+    };
+    input: {
+        type: 'text';
+        readOnly: true;
+        value: (s: S) => string;
+        'data-scope': 'clipboard';
+        'data-part': 'input';
+        onFocus: (e: FocusEvent) => void;
+    };
+    indicator: {
+        'data-scope': 'clipboard';
+        'data-part': 'indicator';
+        'data-copied': (s: S) => '' | undefined;
+        'aria-live': 'polite';
+    };
+}
+export interface ConnectOptions {
+    copyLabel?: string;
+    onCopy?: (value: string) => void;
+}
+export declare function connect<S>(get: (s: S) => ClipboardState, send: Send<ClipboardMsg>, opts?: ConnectOptions): ClipboardParts<S>;
+export declare const clipboard: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    copyToClipboard: typeof copyToClipboard;
+};
+//# sourceMappingURL=clipboard.d.ts.map

package/dist/components/clipboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard.d.ts","sourceRoot":"","sources":["../../src/components/clipboard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAErC;;;;;GAKG;AAEH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,OAAO,CAAA;CAChB;AAED,MAAM,MAAM,YAAY,GACpB;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GACnC;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAClB;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAA;AAErB,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,IAAI,CAAC,IAAI,GAAE,aAAkB,GAAG,cAAc,CAE7D;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,YAAY,GAAG,CAAC,cAAc,EAAE,KAAK,EAAE,CAAC,CAU1F;AAED;;;GAGG;AACH,wBAAsB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAiBlE;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,IAAI,EAAE;QACJ,YAAY,EAAE,WAAW,CAAA;QACzB,WAAW,EAAE,MAAM,CAAA;QACnB,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,SAAS,CAAA;KACxC,CAAA;IACD,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ,CAAA;QACd,YAAY,EAAE,MAAM,CAAA;QACpB,YAAY,EAAE,WAAW,CAAA;QACzB,WAAW,EAAE,SAAS,CAAA;QACtB,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,SAAS,CAAA;QACvC,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;KACjC,CAAA;IACD,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAA;QACZ,QAAQ,EAAE,IAAI,CAAA;QACd,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;QACvB,YAAY,EAAE,WAAW,CAAA;QACzB,WAAW,EAAE,OAAO,CAAA;QACpB,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;KACjC,CAAA;IACD,SAAS,EAAE;QACT,YAAY,EAAE,WAAW,CAAA;QACzB,WAAW,EAAE,WAAW,CAAA;QACxB,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,SAAS,CAAA;QACvC,WAAW,EAAE,QAAQ,CAAA;KACtB,CAAA;CACF;AAED,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACjC;AAED,wBAAgB,OAAO,CAAC,CAAC,EACvB,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,cAAc,EAC7B,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,EACxB,IAAI,GAAE,cAAmB,GACxB,cAAc,CAAC,CAAC,CAAC,CAkCnB;AAED,eAAO,MAAM,SAAS;;;;;CAA6C,CAAA"}

package/dist/components/clipboard.js

@@ -0,0 +1,73 @@
+export function init(opts = {}) {
+    return { value: opts.value ?? '', copied: false };
+}
+export function update(state, msg) {
+    switch (msg.type) {
+        case 'setValue':
+            return [{ ...state, value: msg.value, copied: false }, []];
+        case 'copy':
+        case 'copied':
+            return [{ ...state, copied: true }, []];
+        case 'reset':
+            return [{ ...state, copied: false }, []];
+    }
+}
+/**
+ * Attempt to copy the value to the clipboard. Returns a Promise that resolves
+ * on success. Consumer dispatches `copied` or `reset` based on the result.
+ */
+export async function copyToClipboard(value) {
+    if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(value);
+        return;
+    }
+    // Fallback: ephemeral textarea
+    const textarea = document.createElement('textarea');
+    textarea.value = value;
+    textarea.style.position = 'fixed';
+    textarea.style.opacity = '0';
+    document.body.appendChild(textarea);
+    textarea.select();
+    try {
+        document.execCommand('copy');
+    }
+    finally {
+        document.body.removeChild(textarea);
+    }
+}
+export function connect(get, send, opts = {}) {
+    const copyLabel = opts.copyLabel ?? 'Copy to clipboard';
+    return {
+        root: {
+            'data-scope': 'clipboard',
+            'data-part': 'root',
+            'data-copied': (s) => (get(s).copied ? '' : undefined),
+        },
+        trigger: {
+            type: 'button',
+            'aria-label': copyLabel,
+            'data-scope': 'clipboard',
+            'data-part': 'trigger',
+            'data-copied': (s) => (get(s).copied ? '' : undefined),
+            onClick: () => {
+                send({ type: 'copy' });
+                opts.onCopy?.('');
+            },
+        },
+        input: {
+            type: 'text',
+            readOnly: true,
+            value: (s) => get(s).value,
+            'data-scope': 'clipboard',
+            'data-part': 'input',
+            onFocus: (e) => e.currentTarget.select(),
+        },
+        indicator: {
+            'data-scope': 'clipboard',
+            'data-part': 'indicator',
+            'data-copied': (s) => (get(s).copied ? '' : undefined),
+            'aria-live': 'polite',
+        },
+    };
+}
+export const clipboard = { init, update, connect, copyToClipboard };