@llui/components 0.0.1

package/dist/components/angle-slider.js

@@ -0,0 +1,145 @@
+function clamp(v, min, max) {
+    return Math.max(min, Math.min(max, v));
+}
+function roundToStep(value, step, min) {
+    if (step <= 0)
+        return value;
+    return min + Math.round((value - min) / step) * step;
+}
+export function init(opts = {}) {
+    const min = opts.min ?? 0;
+    const max = opts.max ?? 360;
+    const step = opts.step ?? 1;
+    return {
+        value: clamp(roundToStep(opts.value ?? 0, step, min), min, max),
+        min,
+        max,
+        step,
+        disabled: opts.disabled ?? false,
+        readOnly: opts.readOnly ?? false,
+    };
+}
+export function update(state, msg) {
+    if (state.disabled || state.readOnly) {
+        if (msg.type === 'setValue' || msg.type === 'increment' || msg.type === 'decrement') {
+            return [state, []];
+        }
+    }
+    switch (msg.type) {
+        case 'setValue': {
+            const v = clamp(roundToStep(msg.value, state.step, state.min), state.min, state.max);
+            return [{ ...state, value: v }, []];
+        }
+        case 'increment': {
+            const steps = msg.steps ?? 1;
+            const v = clamp(state.value + state.step * steps, state.min, state.max);
+            return [{ ...state, value: v }, []];
+        }
+        case 'decrement': {
+            const steps = msg.steps ?? 1;
+            const v = clamp(state.value - state.step * steps, state.min, state.max);
+            return [{ ...state, value: v }, []];
+        }
+        case 'setMin':
+            return [{ ...state, min: msg.min, value: clamp(state.value, msg.min, state.max) }, []];
+        case 'setMax':
+            return [{ ...state, max: msg.max, value: clamp(state.value, state.min, msg.max) }, []];
+    }
+}
+/**
+ * Compute the angle in degrees from the center of a rect to a point.
+ * 0° = up (12 o'clock), increases clockwise. Result is in 0..360.
+ *
+ * Useful inside a pointermove handler:
+ *   const rect = control.getBoundingClientRect()
+ *   const angle = angleFromPoint(rect, e.clientX, e.clientY)
+ *   send({ type: 'setValue', value: angle })
+ */
+export function angleFromPoint(rect, x, y) {
+    const cx = rect.left + rect.width / 2;
+    const cy = rect.top + rect.height / 2;
+    const dx = x - cx;
+    const dy = y - cy;
+    // atan2 gives 0° at east growing counter-clockwise; we want 0° at north
+    // growing clockwise, so rotate by 90° and negate.
+    const rad = Math.atan2(dy, dx);
+    let deg = (rad * 180) / Math.PI + 90;
+    if (deg < 0)
+        deg += 360;
+    return deg % 360;
+}
+/** Convert an angle to (x, y) on a unit circle (radius 1 at origin). */
+export function pointFromAngle(angleDeg) {
+    const rad = ((angleDeg - 90) * Math.PI) / 180;
+    return { x: Math.cos(rad), y: Math.sin(rad) };
+}
+export function connect(get, send, opts = {}) {
+    const fmt = opts.format ?? ((v) => `${Math.round(v)}°`);
+    return {
+        root: {
+            role: 'slider',
+            'aria-valuemin': (s) => get(s).min,
+            'aria-valuemax': (s) => get(s).max,
+            'aria-valuenow': (s) => get(s).value,
+            'aria-valuetext': (s) => fmt(get(s).value),
+            'aria-orientation': 'horizontal',
+            'aria-disabled': (s) => (get(s).disabled ? 'true' : undefined),
+            'aria-readonly': (s) => (get(s).readOnly ? 'true' : undefined),
+            tabIndex: (s) => (get(s).disabled ? -1 : 0),
+            'data-scope': 'angle-slider',
+            'data-part': 'root',
+            'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+            onKeyDown: (e) => {
+                switch (e.key) {
+                    case 'ArrowRight':
+                    case 'ArrowUp':
+                        e.preventDefault();
+                        send({ type: 'increment' });
+                        return;
+                    case 'ArrowLeft':
+                    case 'ArrowDown':
+                        e.preventDefault();
+                        send({ type: 'decrement' });
+                        return;
+                    case 'PageUp':
+                        e.preventDefault();
+                        send({ type: 'increment', steps: 10 });
+                        return;
+                    case 'PageDown':
+                        e.preventDefault();
+                        send({ type: 'decrement', steps: 10 });
+                        return;
+                    case 'Home':
+                        e.preventDefault();
+                        send({ type: 'setValue', value: -Infinity });
+                        return;
+                    case 'End':
+                        e.preventDefault();
+                        send({ type: 'setValue', value: Infinity });
+                        return;
+                }
+            },
+        },
+        control: {
+            'data-scope': 'angle-slider',
+            'data-part': 'control',
+        },
+        thumb: {
+            'data-scope': 'angle-slider',
+            'data-part': 'thumb',
+            'data-value': (s) => String(get(s).value),
+        },
+        valueText: {
+            'data-scope': 'angle-slider',
+            'data-part': 'value-text',
+        },
+        hiddenInput: {
+            type: 'hidden',
+            value: (s) => String(get(s).value),
+            ...(opts.name !== undefined ? { name: opts.name } : {}),
+            'data-scope': 'angle-slider',
+            'data-part': 'hidden-input',
+        },
+    };
+}
+export const angleSlider = { init, update, connect, angleFromPoint, pointFromAngle };

package/dist/components/async-list.d.ts

@@ -0,0 +1,104 @@
+import type { Send } from '@llui/dom';
+/**
+ * Async list — paginated/infinite-scroll list that accumulates pages.
+ * The machine is generic over the item type; the consumer runs the
+ * actual fetch in response to `loadMore` (via a custom handler or
+ * effect) and dispatches `pageLoaded`/`pageFailed` when the request
+ * completes.
+ *
+ * Typical flow in consumer's update handler:
+ *
+ *   (state, msg) => {
+ *     if (msg.type === 'loadMore') {
+ *       fetch(`/api/items?page=${state.list.page + 1}`)
+ *         .then(r => r.json())
+ *         .then(items => send({type: 'pageLoaded', items, hasMore: items.length === PAGE_SIZE}))
+ *         .catch(e => send({type: 'pageFailed', error: String(e)}))
+ *     }
+ *   }
+ */
+export type AsyncStatus = 'idle' | 'loading' | 'loaded' | 'error';
+export interface AsyncListState<T = unknown> {
+    items: T[];
+    page: number;
+    hasMore: boolean;
+    status: AsyncStatus;
+    error: string | null;
+}
+export type AsyncListMsg<T = unknown> = {
+    type: 'loadMore';
+} | {
+    type: 'pageLoaded';
+    items: T[];
+    hasMore: boolean;
+} | {
+    type: 'pageFailed';
+    error: string;
+} | {
+    type: 'reset';
+} | {
+    type: 'setItems';
+    items: T[];
+    hasMore?: boolean;
+} | {
+    type: 'retry';
+};
+export interface AsyncListInit<T = unknown> {
+    items?: T[];
+    page?: number;
+    hasMore?: boolean;
+}
+export declare function init<T = unknown>(opts?: AsyncListInit<T>): AsyncListState<T>;
+export declare function update<T>(state: AsyncListState<T>, msg: AsyncListMsg<T>): [AsyncListState<T>, never[]];
+export declare function isLoading<T>(state: AsyncListState<T>): boolean;
+export declare function isError<T>(state: AsyncListState<T>): boolean;
+export declare function isEmpty<T>(state: AsyncListState<T>): boolean;
+export interface AsyncListParts<S, _T> {
+    root: {
+        'data-scope': 'async-list';
+        'data-part': 'root';
+        'data-status': (s: S) => AsyncStatus;
+    };
+    sentinel: {
+        'data-scope': 'async-list';
+        'data-part': 'sentinel';
+        'aria-hidden': 'true';
+    };
+    loadMoreTrigger: {
+        type: 'button';
+        disabled: (s: S) => boolean;
+        'data-scope': 'async-list';
+        'data-part': 'load-more-trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+    retryTrigger: {
+        type: 'button';
+        'data-scope': 'async-list';
+        'data-part': 'retry-trigger';
+        hidden: (s: S) => boolean;
+        onClick: (e: MouseEvent) => void;
+    };
+    errorText: {
+        role: 'alert';
+        'aria-live': 'polite';
+        'data-scope': 'async-list';
+        'data-part': 'error-text';
+        hidden: (s: S) => boolean;
+    };
+}
+export declare function connect<S, T>(get: (s: S) => AsyncListState<T>, send: Send<AsyncListMsg<T>>): AsyncListParts<S, T>;
+/**
+ * Install an IntersectionObserver on the sentinel element that auto-dispatches
+ * `loadMore` whenever the sentinel scrolls into view. Call from onMount.
+ */
+export declare function watchSentinel<T>(send: Send<AsyncListMsg<T>>, sentinel: Element, rootMargin?: string): () => void;
+export declare const asyncList: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    isLoading: typeof isLoading;
+    isError: typeof isError;
+    isEmpty: typeof isEmpty;
+    watchSentinel: typeof watchSentinel;
+};
+//# sourceMappingURL=async-list.d.ts.map

package/dist/components/async-list.d.ts.map

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

package/dist/components/async-list.js

@@ -0,0 +1,117 @@
+export function init(opts = {}) {
+    return {
+        items: opts.items ?? [],
+        page: opts.page ?? 0,
+        hasMore: opts.hasMore ?? true,
+        status: 'idle',
+        error: null,
+    };
+}
+export function update(state, msg) {
+    switch (msg.type) {
+        case 'loadMore':
+        case 'retry':
+            if (state.status === 'loading' || !state.hasMore)
+                return [state, []];
+            return [{ ...state, status: 'loading', error: null }, []];
+        case 'pageLoaded':
+            return [
+                {
+                    ...state,
+                    items: [...state.items, ...msg.items],
+                    page: state.page + 1,
+                    hasMore: msg.hasMore,
+                    status: 'loaded',
+                    error: null,
+                },
+                [],
+            ];
+        case 'pageFailed':
+            return [{ ...state, status: 'error', error: msg.error }, []];
+        case 'reset':
+            return [{ items: [], page: 0, hasMore: true, status: 'idle', error: null }, []];
+        case 'setItems':
+            return [
+                {
+                    ...state,
+                    items: msg.items,
+                    hasMore: msg.hasMore ?? state.hasMore,
+                    status: 'loaded',
+                    error: null,
+                },
+                [],
+            ];
+    }
+}
+export function isLoading(state) {
+    return state.status === 'loading';
+}
+export function isError(state) {
+    return state.status === 'error';
+}
+export function isEmpty(state) {
+    return state.items.length === 0;
+}
+export function connect(get, send) {
+    return {
+        root: {
+            'data-scope': 'async-list',
+            'data-part': 'root',
+            'data-status': (s) => get(s).status,
+        },
+        sentinel: {
+            'data-scope': 'async-list',
+            'data-part': 'sentinel',
+            'aria-hidden': 'true',
+        },
+        loadMoreTrigger: {
+            type: 'button',
+            disabled: (s) => {
+                const st = get(s);
+                return st.status === 'loading' || !st.hasMore;
+            },
+            'data-scope': 'async-list',
+            'data-part': 'load-more-trigger',
+            onClick: () => send({ type: 'loadMore' }),
+        },
+        retryTrigger: {
+            type: 'button',
+            'data-scope': 'async-list',
+            'data-part': 'retry-trigger',
+            hidden: (s) => get(s).status !== 'error',
+            onClick: () => send({ type: 'retry' }),
+        },
+        errorText: {
+            role: 'alert',
+            'aria-live': 'polite',
+            'data-scope': 'async-list',
+            'data-part': 'error-text',
+            hidden: (s) => get(s).status !== 'error',
+        },
+    };
+}
+/**
+ * Install an IntersectionObserver on the sentinel element that auto-dispatches
+ * `loadMore` whenever the sentinel scrolls into view. Call from onMount.
+ */
+export function watchSentinel(send, sentinel, rootMargin = '200px') {
+    const io = new IntersectionObserver((entries) => {
+        for (const e of entries) {
+            if (e.isIntersecting) {
+                send({ type: 'loadMore' });
+                return;
+            }
+        }
+    }, { rootMargin });
+    io.observe(sentinel);
+    return () => io.disconnect();
+}
+export const asyncList = {
+    init,
+    update,
+    connect,
+    isLoading,
+    isError,
+    isEmpty,
+    watchSentinel,
+};

package/dist/components/avatar.d.ts

@@ -0,0 +1,58 @@
+import type { Send } from '@llui/dom';
+/**
+ * Avatar — image with automatic fallback. Tracks image load status so
+ * consumers can render the image, a fallback (initials, icon), or a
+ * loading placeholder.
+ */
+export type ImageStatus = 'idle' | 'loading' | 'loaded' | 'error';
+export interface AvatarState {
+    status: ImageStatus;
+}
+export type AvatarMsg = {
+    type: 'loadStart';
+} | {
+    type: 'loaded';
+} | {
+    type: 'error';
+} | {
+    type: 'reset';
+};
+export interface AvatarInit {
+    status?: ImageStatus;
+}
+export declare function init(opts?: AvatarInit): AvatarState;
+export declare function update(state: AvatarState, msg: AvatarMsg): [AvatarState, never[]];
+export interface AvatarParts<S> {
+    root: {
+        'data-scope': 'avatar';
+        'data-part': 'root';
+        'data-status': (s: S) => ImageStatus;
+    };
+    image: {
+        'data-scope': 'avatar';
+        'data-part': 'image';
+        'data-status': (s: S) => ImageStatus;
+        hidden: (s: S) => boolean;
+        alt: string;
+        onLoad: (e: Event) => void;
+        onError: (e: Event) => void;
+        onLoadStart: (e: Event) => void;
+    };
+    fallback: {
+        'data-scope': 'avatar';
+        'data-part': 'fallback';
+        'data-status': (s: S) => ImageStatus;
+        hidden: (s: S) => boolean;
+        'aria-hidden': (s: S) => 'true' | undefined;
+    };
+}
+export interface ConnectOptions {
+    alt?: string;
+}
+export declare function connect<S>(get: (s: S) => AvatarState, send: Send<AvatarMsg>, opts?: ConnectOptions): AvatarParts<S>;
+export declare const avatar: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+};
+//# sourceMappingURL=avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/components/avatar.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAErC;;;;GAIG;AAEH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;AAEjE,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,WAAW,CAAA;CACpB;AAED,MAAM,MAAM,SAAS,GACjB;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,GACrB;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAClB;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GACjB;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAA;AAErB,MAAM,WAAW,UAAU;IACzB,MAAM,CAAC,EAAE,WAAW,CAAA;CACrB;AAED,wBAAgB,IAAI,CAAC,IAAI,GAAE,UAAe,GAAG,WAAW,CAEvD;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,SAAS,GAAG,CAAC,WAAW,EAAE,KAAK,EAAE,CAAC,CAWjF;AAED,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,IAAI,EAAE;QACJ,YAAY,EAAE,QAAQ,CAAA;QACtB,WAAW,EAAE,MAAM,CAAA;QACnB,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,WAAW,CAAA;KACrC,CAAA;IACD,KAAK,EAAE;QACL,YAAY,EAAE,QAAQ,CAAA;QACtB,WAAW,EAAE,OAAO,CAAA;QACpB,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,WAAW,CAAA;QACpC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;QACzB,GAAG,EAAE,MAAM,CAAA;QACX,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAA;QAC1B,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAA;QAC3B,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAA;KAChC,CAAA;IACD,QAAQ,EAAE;QACR,YAAY,EAAE,QAAQ,CAAA;QACtB,WAAW,EAAE,UAAU,CAAA;QACvB,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,WAAW,CAAA;QACpC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;QACzB,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAA;KAC5C,CAAA;CACF;AAED,MAAM,WAAW,cAAc;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,wBAAgB,OAAO,CAAC,CAAC,EACvB,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,WAAW,EAC1B,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,EACrB,IAAI,GAAE,cAAmB,GACxB,WAAW,CAAC,CAAC,CAAC,CA0BhB;AAED,eAAO,MAAM,MAAM;;;;CAA4B,CAAA"}

package/dist/components/avatar.js

@@ -0,0 +1,43 @@
+export function init(opts = {}) {
+    return { status: opts.status ?? 'idle' };
+}
+export function update(state, msg) {
+    switch (msg.type) {
+        case 'loadStart':
+            return [{ ...state, status: 'loading' }, []];
+        case 'loaded':
+            return [{ ...state, status: 'loaded' }, []];
+        case 'error':
+            return [{ ...state, status: 'error' }, []];
+        case 'reset':
+            return [{ ...state, status: 'idle' }, []];
+    }
+}
+export function connect(get, send, opts = {}) {
+    const alt = opts.alt ?? '';
+    return {
+        root: {
+            'data-scope': 'avatar',
+            'data-part': 'root',
+            'data-status': (s) => get(s).status,
+        },
+        image: {
+            'data-scope': 'avatar',
+            'data-part': 'image',
+            'data-status': (s) => get(s).status,
+            hidden: (s) => get(s).status !== 'loaded',
+            alt,
+            onLoad: () => send({ type: 'loaded' }),
+            onError: () => send({ type: 'error' }),
+            onLoadStart: () => send({ type: 'loadStart' }),
+        },
+        fallback: {
+            'data-scope': 'avatar',
+            'data-part': 'fallback',
+            'data-status': (s) => get(s).status,
+            hidden: (s) => get(s).status === 'loaded',
+            'aria-hidden': (s) => (get(s).status === 'loaded' ? 'true' : undefined),
+        },
+    };
+}
+export const avatar = { init, update, connect };

package/dist/components/carousel.d.ts

@@ -0,0 +1,128 @@
+import type { Send } from '@llui/dom';
+/**
+ * Carousel — sliding content viewer with pagination. Tracks active slide
+ * index, optional autoplay with pause-on-hover, and wraparound navigation.
+ */
+export interface CarouselState {
+    current: number;
+    count: number;
+    loop: boolean;
+    autoplay: boolean;
+    interval: number;
+    paused: boolean;
+    /** Direction of the last transition — useful for entry animations. */
+    direction: 'forward' | 'backward';
+}
+export type CarouselMsg = {
+    type: 'goTo';
+    index: number;
+} | {
+    type: 'next';
+} | {
+    type: 'prev';
+} | {
+    type: 'setCount';
+    count: number;
+} | {
+    type: 'pause';
+} | {
+    type: 'resume';
+} | {
+    type: 'setAutoplay';
+    autoplay: boolean;
+};
+export interface CarouselInit {
+    current?: number;
+    count?: number;
+    loop?: boolean;
+    autoplay?: boolean;
+    interval?: number;
+}
+export declare function init(opts?: CarouselInit): CarouselState;
+export declare function update(state: CarouselState, msg: CarouselMsg): [CarouselState, never[]];
+export declare function canGoNext(state: CarouselState): boolean;
+export declare function canGoPrev(state: CarouselState): boolean;
+export interface CarouselSlideParts<S> {
+    slide: {
+        role: 'tabpanel';
+        id: string;
+        'aria-roledescription': 'slide';
+        'aria-label': string;
+        'data-scope': 'carousel';
+        'data-part': 'slide';
+        'data-index': string;
+        'data-active': (s: S) => '' | undefined;
+        hidden: (s: S) => boolean;
+    };
+    indicator: {
+        type: 'button';
+        role: 'tab';
+        'aria-label': string;
+        'aria-selected': (s: S) => boolean;
+        'aria-controls': string;
+        'data-scope': 'carousel';
+        'data-part': 'indicator';
+        'data-index': string;
+        'data-active': (s: S) => '' | undefined;
+        onClick: (e: MouseEvent) => void;
+    };
+}
+export interface CarouselParts<S> {
+    root: {
+        role: 'region';
+        'aria-roledescription': 'carousel';
+        'aria-label': string;
+        'data-scope': 'carousel';
+        'data-part': 'root';
+        'data-paused': (s: S) => '' | undefined;
+        onPointerEnter: (e: PointerEvent) => void;
+        onPointerLeave: (e: PointerEvent) => void;
+        onFocus: (e: FocusEvent) => void;
+        onBlur: (e: FocusEvent) => void;
+    };
+    viewport: {
+        'data-scope': 'carousel';
+        'data-part': 'viewport';
+    };
+    indicatorGroup: {
+        role: 'tablist';
+        'aria-label': string;
+        'data-scope': 'carousel';
+        'data-part': 'indicator-group';
+    };
+    nextTrigger: {
+        type: 'button';
+        'aria-label': string;
+        disabled: (s: S) => boolean;
+        'data-scope': 'carousel';
+        'data-part': 'next-trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+    prevTrigger: {
+        type: 'button';
+        'aria-label': string;
+        disabled: (s: S) => boolean;
+        'data-scope': 'carousel';
+        'data-part': 'prev-trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+    slide: (index: number) => CarouselSlideParts<S>;
+}
+export interface ConnectOptions {
+    id: string;
+    label?: string;
+    indicatorLabel?: string;
+    nextLabel?: string;
+    prevLabel?: string;
+    /** Builder for each slide's aria-label. Receives index + known count. */
+    slideLabel?: (index: number, count: number) => string;
+}
+export declare function connect<S>(get: (s: S) => CarouselState, send: Send<CarouselMsg>, opts: ConnectOptions): CarouselParts<S>;
+export declare const carousel: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    canGoNext: typeof canGoNext;
+    canGoPrev: typeof canGoPrev;
+};
+//# sourceMappingURL=carousel.d.ts.map

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

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