@llui/components 0.0.1

package/dist/components/timer.d.ts

@@ -0,0 +1,131 @@
+import type { Send } from '@llui/dom';
+/**
+ * Timer — counts elapsed time up from zero, or down from a configured
+ * target. The machine is pure: it doesn't own the ticking interval.
+ * The consumer runs `setInterval(() => send({type:'tick', now: Date.now()}), 100)`
+ * (or whatever granularity) while the timer is running, and dispatches
+ * `start` / `pause` / `reset` in response to user input.
+ *
+ * Typical display:
+ *
+ *   const t = timer.connect<State>(s => s.timer, msg => send({type: 'timer', msg}))
+ *   div({ ...t.root }, [
+ *     div({ ...t.display }, [text(s => timer.formatMs(timer.display(s.timer), 'mm:ss'))]),
+ *     button({ ...t.startTrigger }, [text('Start')]),
+ *     button({ ...t.pauseTrigger }, [text('Pause')]),
+ *     button({ ...t.resetTrigger }, [text('Reset')]),
+ *   ])
+ */
+export type Direction = 'up' | 'down';
+export interface TimerState {
+    running: boolean;
+    direction: Direction;
+    /** Target in milliseconds for countdown (0 = no target, runs indefinitely). */
+    targetMs: number;
+    /** Accumulated elapsed time, excluding the current running interval. */
+    elapsedMs: number;
+    /** Timestamp when the current running interval started (null when paused). */
+    startedAt: number | null;
+}
+export type TimerMsg = {
+    type: 'start';
+    now: number;
+} | {
+    type: 'pause';
+    now: number;
+} | {
+    type: 'reset';
+} | {
+    type: 'tick';
+    now: number;
+} | {
+    type: 'setTarget';
+    targetMs: number;
+};
+export interface TimerInit {
+    direction?: Direction;
+    targetMs?: number;
+    elapsedMs?: number;
+}
+export declare function init(opts?: TimerInit): TimerState;
+export declare function update(state: TimerState, msg: TimerMsg): [TimerState, never[]];
+/** Returns the display value in ms (elapsed for count-up, remaining for count-down). */
+export declare function display(state: TimerState): number;
+export declare function isComplete(state: TimerState): boolean;
+/** Breaks a ms value into `{ hours, minutes, seconds, ms }` parts for rendering. */
+export declare function parts(ms: number): {
+    hours: number;
+    minutes: number;
+    seconds: number;
+    ms: number;
+};
+/**
+ * Format a ms value using a simple template. Supported tokens:
+ *   HH / H  — hours (2-digit / unpadded)
+ *   mm / m  — minutes
+ *   ss / s  — seconds
+ *   SSS / S — milliseconds (3-digit / unpadded)
+ *
+ * Example: formatMs(125_500, 'mm:ss.SSS') → "02:05.500"
+ */
+export declare function formatMs(ms: number, template: string): string;
+export interface TimerParts<S> {
+    root: {
+        'data-scope': 'timer';
+        'data-part': 'root';
+        'data-running': (s: S) => '' | undefined;
+        'data-direction': (s: S) => Direction;
+    };
+    display: {
+        role: 'timer';
+        'aria-live': 'off' | 'polite';
+        'data-scope': 'timer';
+        'data-part': 'display';
+    };
+    startTrigger: {
+        type: 'button';
+        'aria-label': string;
+        'data-scope': 'timer';
+        'data-part': 'start-trigger';
+        disabled: (s: S) => boolean;
+        onClick: (e: MouseEvent) => void;
+    };
+    pauseTrigger: {
+        type: 'button';
+        'aria-label': string;
+        'data-scope': 'timer';
+        'data-part': 'pause-trigger';
+        disabled: (s: S) => boolean;
+        onClick: (e: MouseEvent) => void;
+    };
+    resetTrigger: {
+        type: 'button';
+        'aria-label': string;
+        'data-scope': 'timer';
+        'data-part': 'reset-trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+}
+export interface ConnectOptions {
+    startLabel?: string;
+    pauseLabel?: string;
+    resetLabel?: string;
+    /**
+     * aria-live politeness for the display element. `'polite'` announces
+     * updates to assistive tech; `'off'` (default) keeps it silent — use
+     * 'polite' sparingly to avoid spamming screen reader users with
+     * every tick.
+     */
+    ariaLive?: 'off' | 'polite';
+}
+export declare function connect<S>(get: (s: S) => TimerState, send: Send<TimerMsg>, opts?: ConnectOptions): TimerParts<S>;
+export declare const timer: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    display: typeof display;
+    isComplete: typeof isComplete;
+    parts: typeof parts;
+    formatMs: typeof formatMs;
+};
+//# sourceMappingURL=timer.d.ts.map

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

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

package/dist/components/timer.js

@@ -0,0 +1,117 @@
+export function init(opts = {}) {
+    return {
+        running: false,
+        direction: opts.direction ?? 'up',
+        targetMs: opts.targetMs ?? 0,
+        elapsedMs: opts.elapsedMs ?? 0,
+        startedAt: null,
+    };
+}
+export function update(state, msg) {
+    switch (msg.type) {
+        case 'start':
+            if (state.running)
+                return [state, []];
+            return [{ ...state, running: true, startedAt: msg.now }, []];
+        case 'pause': {
+            if (!state.running || state.startedAt === null)
+                return [state, []];
+            const elapsed = state.elapsedMs + (msg.now - state.startedAt);
+            return [{ ...state, running: false, elapsedMs: elapsed, startedAt: null }, []];
+        }
+        case 'reset':
+            return [{ ...state, running: false, elapsedMs: 0, startedAt: null }, []];
+        case 'tick': {
+            if (!state.running || state.startedAt === null)
+                return [state, []];
+            const elapsed = state.elapsedMs + (msg.now - state.startedAt);
+            // Countdown: auto-stop at target.
+            if (state.direction === 'down' && state.targetMs > 0 && elapsed >= state.targetMs) {
+                return [{ ...state, running: false, elapsedMs: state.targetMs, startedAt: null }, []];
+            }
+            return [{ ...state, elapsedMs: elapsed, startedAt: msg.now }, []];
+        }
+        case 'setTarget':
+            return [{ ...state, targetMs: msg.targetMs }, []];
+    }
+}
+/** Returns the display value in ms (elapsed for count-up, remaining for count-down). */
+export function display(state) {
+    if (state.direction === 'up')
+        return state.elapsedMs;
+    return Math.max(0, state.targetMs - state.elapsedMs);
+}
+export function isComplete(state) {
+    return state.direction === 'down' && state.targetMs > 0 && state.elapsedMs >= state.targetMs;
+}
+/** Breaks a ms value into `{ hours, minutes, seconds, ms }` parts for rendering. */
+export function parts(ms) {
+    const total = Math.max(0, Math.floor(ms));
+    const hours = Math.floor(total / 3_600_000);
+    const minutes = Math.floor((total % 3_600_000) / 60_000);
+    const seconds = Math.floor((total % 60_000) / 1000);
+    const rem = total % 1000;
+    return { hours, minutes, seconds, ms: rem };
+}
+const pad = (n, width) => String(n).padStart(width, '0');
+/**
+ * Format a ms value using a simple template. Supported tokens:
+ *   HH / H  — hours (2-digit / unpadded)
+ *   mm / m  — minutes
+ *   ss / s  — seconds
+ *   SSS / S — milliseconds (3-digit / unpadded)
+ *
+ * Example: formatMs(125_500, 'mm:ss.SSS') → "02:05.500"
+ */
+export function formatMs(ms, template) {
+    const p = parts(ms);
+    return template
+        .replace(/HH/g, pad(p.hours, 2))
+        .replace(/H/g, String(p.hours))
+        .replace(/mm/g, pad(p.minutes, 2))
+        .replace(/m/g, String(p.minutes))
+        .replace(/ss/g, pad(p.seconds, 2))
+        .replace(/s/g, String(p.seconds))
+        .replace(/SSS/g, pad(p.ms, 3))
+        .replace(/S/g, String(p.ms));
+}
+export function connect(get, send, opts = {}) {
+    return {
+        root: {
+            'data-scope': 'timer',
+            'data-part': 'root',
+            'data-running': (s) => (get(s).running ? '' : undefined),
+            'data-direction': (s) => get(s).direction,
+        },
+        display: {
+            role: 'timer',
+            'aria-live': opts.ariaLive ?? 'off',
+            'data-scope': 'timer',
+            'data-part': 'display',
+        },
+        startTrigger: {
+            type: 'button',
+            'aria-label': opts.startLabel ?? 'Start timer',
+            'data-scope': 'timer',
+            'data-part': 'start-trigger',
+            disabled: (s) => get(s).running,
+            onClick: () => send({ type: 'start', now: Date.now() }),
+        },
+        pauseTrigger: {
+            type: 'button',
+            'aria-label': opts.pauseLabel ?? 'Pause timer',
+            'data-scope': 'timer',
+            'data-part': 'pause-trigger',
+            disabled: (s) => !get(s).running,
+            onClick: () => send({ type: 'pause', now: Date.now() }),
+        },
+        resetTrigger: {
+            type: 'button',
+            'aria-label': opts.resetLabel ?? 'Reset timer',
+            'data-scope': 'timer',
+            'data-part': 'reset-trigger',
+            onClick: () => send({ type: 'reset' }),
+        },
+    };
+}
+export const timer = { init, update, connect, display, isComplete, parts, formatMs };

package/dist/components/toast.d.ts

@@ -0,0 +1,119 @@
+import type { Send } from '@llui/dom';
+/**
+ * Toast — ephemeral non-modal notifications rendered in a fixed region.
+ * Multiple toasts can be active at once. Each has a duration after which
+ * it auto-dismisses (unless paused or persistent).
+ *
+ * Architecture:
+ *   - `toast.toaster` state manages a collection of toasts.
+ *   - Duration countdown is handled externally — the consumer schedules
+ *     a `dismiss` message via setTimeout (or uses the `scheduleDismiss`
+ *     effect-style helper in your onEffect handler).
+ */
+export type ToastType = 'info' | 'success' | 'warning' | 'error' | 'loading' | 'custom';
+export type ToastPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+export interface Toast {
+    id: string;
+    type: ToastType;
+    title?: string;
+    description?: string;
+    /** ms until auto-dismiss. Use Infinity for persistent. */
+    duration: number;
+    /** Whether the toast can be manually dismissed. */
+    dismissable: boolean;
+    /** Optional pause flag — consumer sets while user hovers. */
+    paused: boolean;
+}
+export interface ToasterState {
+    toasts: Toast[];
+    max: number;
+    placement: ToastPlacement;
+}
+export type ToasterMsg = {
+    type: 'create';
+    toast: Omit<Toast, 'paused'> & {
+        paused?: boolean;
+    };
+} | {
+    type: 'dismiss';
+    id: string;
+} | {
+    type: 'dismissAll';
+} | {
+    type: 'update';
+    id: string;
+    patch: Partial<Toast>;
+} | {
+    type: 'pause';
+    id: string;
+} | {
+    type: 'resume';
+    id: string;
+} | {
+    type: 'pauseAll';
+} | {
+    type: 'resumeAll';
+};
+export interface ToasterInit {
+    max?: number;
+    placement?: ToastPlacement;
+}
+export declare function init(opts?: ToasterInit): ToasterState;
+export declare function update(state: ToasterState, msg: ToasterMsg): [ToasterState, never[]];
+export declare function nextToastId(): string;
+export interface ToastItemParts<_S> {
+    root: {
+        role: 'status';
+        'aria-atomic': 'true';
+        'aria-live': 'polite' | 'assertive';
+        id: string;
+        'data-scope': 'toast';
+        'data-part': 'root';
+        'data-type': ToastType;
+        'data-id': string;
+        onPointerEnter: (e: PointerEvent) => void;
+        onPointerLeave: (e: PointerEvent) => void;
+        onFocus: (e: FocusEvent) => void;
+        onBlur: (e: FocusEvent) => void;
+    };
+    title: {
+        id: string;
+        'data-scope': 'toast';
+        'data-part': 'title';
+    };
+    description: {
+        id: string;
+        'data-scope': 'toast';
+        'data-part': 'description';
+    };
+    closeTrigger: {
+        type: 'button';
+        'aria-label': string;
+        'data-scope': 'toast';
+        'data-part': 'close-trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+}
+export interface ToasterParts<S> {
+    region: {
+        role: 'region';
+        'aria-label': string;
+        tabIndex: -1;
+        'data-scope': 'toast';
+        'data-part': 'region';
+        'data-placement': (s: S) => ToastPlacement;
+    };
+    toast: (toast: Toast) => ToastItemParts<S>;
+}
+export interface ConnectOptions {
+    regionLabel?: string;
+    closeLabel?: string;
+}
+export declare function connect<S>(_get: (s: S) => ToasterState, send: Send<ToasterMsg>, opts?: ConnectOptions): ToasterParts<S>;
+export declare const toast: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    nextToastId: typeof nextToastId;
+};
+//# sourceMappingURL=toast.d.ts.map

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

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

package/dist/components/toast.js

@@ -0,0 +1,102 @@
+export function init(opts = {}) {
+    return {
+        toasts: [],
+        max: opts.max ?? 5,
+        placement: opts.placement ?? 'bottom-end',
+    };
+}
+export function update(state, msg) {
+    switch (msg.type) {
+        case 'create': {
+            const toast = { paused: false, ...msg.toast };
+            const toasts = [...state.toasts, toast];
+            // Enforce max — drop oldest
+            const trimmed = toasts.length > state.max ? toasts.slice(-state.max) : toasts;
+            return [{ ...state, toasts: trimmed }, []];
+        }
+        case 'dismiss':
+            return [{ ...state, toasts: state.toasts.filter((t) => t.id !== msg.id) }, []];
+        case 'dismissAll':
+            return [{ ...state, toasts: [] }, []];
+        case 'update':
+            return [
+                {
+                    ...state,
+                    toasts: state.toasts.map((t) => (t.id === msg.id ? { ...t, ...msg.patch } : t)),
+                },
+                [],
+            ];
+        case 'pause':
+            return [
+                {
+                    ...state,
+                    toasts: state.toasts.map((t) => (t.id === msg.id ? { ...t, paused: true } : t)),
+                },
+                [],
+            ];
+        case 'resume':
+            return [
+                {
+                    ...state,
+                    toasts: state.toasts.map((t) => (t.id === msg.id ? { ...t, paused: false } : t)),
+                },
+                [],
+            ];
+        case 'pauseAll':
+            return [{ ...state, toasts: state.toasts.map((t) => ({ ...t, paused: true })) }, []];
+        case 'resumeAll':
+            return [{ ...state, toasts: state.toasts.map((t) => ({ ...t, paused: false })) }, []];
+    }
+}
+let toastIdCounter = 0;
+export function nextToastId() {
+    return `toast-${++toastIdCounter}`;
+}
+export function connect(_get, send, opts = {}) {
+    const regionLabel = opts.regionLabel ?? 'Notifications';
+    const closeLabel = opts.closeLabel ?? 'Dismiss notification';
+    return {
+        region: {
+            role: 'region',
+            'aria-label': regionLabel,
+            tabIndex: -1,
+            'data-scope': 'toast',
+            'data-part': 'region',
+            'data-placement': (s) => _get(s).placement,
+        },
+        toast: (toast) => ({
+            root: {
+                role: 'status',
+                'aria-atomic': 'true',
+                'aria-live': toast.type === 'error' ? 'assertive' : 'polite',
+                id: `${toast.id}:root`,
+                'data-scope': 'toast',
+                'data-part': 'root',
+                'data-type': toast.type,
+                'data-id': toast.id,
+                onPointerEnter: () => send({ type: 'pause', id: toast.id }),
+                onPointerLeave: () => send({ type: 'resume', id: toast.id }),
+                onFocus: () => send({ type: 'pause', id: toast.id }),
+                onBlur: () => send({ type: 'resume', id: toast.id }),
+            },
+            title: {
+                id: `${toast.id}:title`,
+                'data-scope': 'toast',
+                'data-part': 'title',
+            },
+            description: {
+                id: `${toast.id}:description`,
+                'data-scope': 'toast',
+                'data-part': 'description',
+            },
+            closeTrigger: {
+                type: 'button',
+                'aria-label': closeLabel,
+                'data-scope': 'toast',
+                'data-part': 'close-trigger',
+                onClick: () => send({ type: 'dismiss', id: toast.id }),
+            },
+        }),
+    };
+}
+export const toast = { init, update, connect, nextToastId };

package/dist/components/toc.d.ts

@@ -0,0 +1,119 @@
+import type { Send } from '@llui/dom';
+/**
+ * Table of contents — a navigation list that tracks which heading is
+ * currently visible in the main scroll area and highlights it. The
+ * state machine tracks the flat list of heading ids and the currently
+ * active one; the view layer installs an IntersectionObserver in
+ * onMount to detect which heading is on screen and dispatches
+ * `setActive`.
+ *
+ * Typical setup in onMount:
+ *
+ *   const headings = document.querySelectorAll('h2[id], h3[id]')
+ *   const io = new IntersectionObserver((entries) => {
+ *     for (const e of entries) {
+ *       if (e.isIntersecting) send({ type: 'setActive', id: e.target.id })
+ *     }
+ *   }, { rootMargin: '0px 0px -80% 0px' })
+ *   headings.forEach((h) => io.observe(h))
+ *   return () => io.disconnect()
+ */
+export interface TocEntry {
+    id: string;
+    label: string;
+    /** Nesting level (1 = top-level). */
+    level: number;
+}
+export interface TocState {
+    items: TocEntry[];
+    activeId: string | null;
+    /** Ids of entries the user has manually expanded (for collapsible sub-levels). */
+    expanded: string[];
+}
+export type TocMsg = {
+    type: 'setItems';
+    items: TocEntry[];
+} | {
+    type: 'setActive';
+    id: string | null;
+} | {
+    type: 'toggleExpanded';
+    id: string;
+} | {
+    type: 'expandAll';
+} | {
+    type: 'collapseAll';
+};
+export interface TocInit {
+    items?: TocEntry[];
+    activeId?: string | null;
+    expanded?: string[];
+}
+export declare function init(opts?: TocInit): TocState;
+export declare function update(state: TocState, msg: TocMsg): [TocState, never[]];
+export declare function isActive(state: TocState, id: string): boolean;
+export declare function isExpanded(state: TocState, id: string): boolean;
+export interface TocItemParts<S> {
+    item: {
+        'data-scope': 'toc';
+        'data-part': 'item';
+        'data-level': string;
+        'data-active': (s: S) => '' | undefined;
+        'data-value': string;
+    };
+    link: {
+        href: string;
+        'aria-current': (s: S) => 'location' | undefined;
+        'data-scope': 'toc';
+        'data-part': 'link';
+        'data-active': (s: S) => '' | undefined;
+    };
+    expandTrigger: {
+        type: 'button';
+        'aria-expanded': (s: S) => boolean;
+        'aria-label': string;
+        'data-scope': 'toc';
+        'data-part': 'expand-trigger';
+        'data-state': (s: S) => 'open' | 'closed';
+        onClick: (e: MouseEvent) => void;
+    };
+}
+export interface TocParts<S> {
+    root: {
+        role: 'navigation';
+        'aria-label': string;
+        'data-scope': 'toc';
+        'data-part': 'root';
+    };
+    list: {
+        role: 'list';
+        'data-scope': 'toc';
+        'data-part': 'list';
+    };
+    item: (entry: TocEntry) => TocItemParts<S>;
+}
+export interface ConnectOptions {
+    label?: string;
+    /** Prefix for href targets (default: '#'). */
+    hrefPrefix?: string;
+    expandLabel?: string;
+}
+export declare function connect<S>(get: (s: S) => TocState, send: Send<TocMsg>, opts?: ConnectOptions): TocParts<S>;
+/**
+ * Install an IntersectionObserver that watches heading elements and
+ * dispatches `setActive` as the user scrolls. Call from onMount and
+ * invoke the returned function on unmount.
+ *
+ * `rootMargin` defaults to '0px 0px -80% 0px' — a heading is considered
+ * active once its top edge enters the top 20% of the viewport.
+ */
+export declare function watchActiveHeading(send: Send<TocMsg>, selector?: string, rootMargin?: string): () => void;
+export declare const toc: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    isActive: typeof isActive;
+    isExpanded: typeof isExpanded;
+    watchActiveHeading: typeof watchActiveHeading;
+};
+//# sourceMappingURL=toc.d.ts.map

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

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