@llui/components 0.0.1

package/dist/components/rating-group.js

@@ -0,0 +1,122 @@
+export function init(opts = {}) {
+    return {
+        value: opts.value ?? 0,
+        count: opts.count ?? 5,
+        allowHalf: opts.allowHalf ?? false,
+        disabled: opts.disabled ?? false,
+        readOnly: opts.readOnly ?? false,
+        hoveredValue: null,
+    };
+}
+function clamp(n, min, max) {
+    return Math.max(min, Math.min(max, n));
+}
+export function update(state, msg) {
+    if (state.disabled || state.readOnly) {
+        if (msg.type === 'hover')
+            return [{ ...state, hoveredValue: null }, []];
+        return [state, []];
+    }
+    switch (msg.type) {
+        case 'setValue':
+            return [{ ...state, value: clamp(msg.value, 0, state.count) }, []];
+        case 'hover':
+            return [{ ...state, hoveredValue: msg.value }, []];
+        case 'clickItem': {
+            const base = msg.index + 1;
+            const v = state.allowHalf && msg.isLeftHalf ? base - 0.5 : base;
+            return [{ ...state, value: clamp(v, 0, state.count) }, []];
+        }
+        case 'hoverItem': {
+            const base = msg.index + 1;
+            const v = state.allowHalf && msg.isLeftHalf ? base - 0.5 : base;
+            return [{ ...state, hoveredValue: v }, []];
+        }
+        case 'incrementValue': {
+            const step = msg.step ?? (state.allowHalf ? 0.5 : 1);
+            return [{ ...state, value: clamp(state.value + step, 0, state.count) }, []];
+        }
+        case 'decrementValue': {
+            const step = msg.step ?? (state.allowHalf ? 0.5 : 1);
+            return [{ ...state, value: clamp(state.value - step, 0, state.count) }, []];
+        }
+        case 'toEnd':
+            return [{ ...state, value: state.count }, []];
+    }
+}
+export function itemFill(state, index) {
+    const reference = state.hoveredValue ?? state.value;
+    const itemValue = index + 1;
+    if (reference >= itemValue)
+        return 'full';
+    if (state.allowHalf && reference >= itemValue - 0.5)
+        return 'half';
+    return 'empty';
+}
+export function connect(get, send, opts = {}) {
+    return {
+        root: {
+            role: 'radiogroup',
+            'aria-label': opts.label,
+            'aria-disabled': (s) => (get(s).disabled ? 'true' : undefined),
+            'aria-readonly': (s) => (get(s).readOnly ? 'true' : undefined),
+            'data-scope': 'rating-group',
+            'data-part': 'root',
+            'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+            'data-readonly': (s) => (get(s).readOnly ? '' : undefined),
+        },
+        item: (index) => ({
+            root: {
+                role: 'radio',
+                'aria-checked': (s) => Math.ceil(get(s).value) === index + 1,
+                'data-fill': (s) => itemFill(get(s), index),
+                'data-scope': 'rating-group',
+                'data-part': 'item',
+                'data-value': String(index + 1),
+                'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+                tabIndex: (s) => {
+                    const st = get(s);
+                    if (st.disabled || st.readOnly)
+                        return -1;
+                    // Only current active item is tab stop
+                    const active = Math.ceil(st.value) || 1;
+                    return active === index + 1 ? 0 : -1;
+                },
+                onClick: (e) => {
+                    const rect = e.currentTarget.getBoundingClientRect();
+                    const isLeftHalf = e.clientX - rect.left < rect.width / 2;
+                    send({ type: 'clickItem', index, isLeftHalf });
+                },
+                onPointerMove: (e) => {
+                    const rect = e.currentTarget.getBoundingClientRect();
+                    const isLeftHalf = e.clientX - rect.left < rect.width / 2;
+                    send({ type: 'hoverItem', index, isLeftHalf });
+                },
+                onPointerLeave: () => send({ type: 'hover', value: null }),
+                onKeyDown: (e) => {
+                    switch (e.key) {
+                        case 'ArrowRight':
+                        case 'ArrowUp':
+                            e.preventDefault();
+                            send({ type: 'incrementValue' });
+                            return;
+                        case 'ArrowLeft':
+                        case 'ArrowDown':
+                            e.preventDefault();
+                            send({ type: 'decrementValue' });
+                            return;
+                        case 'Home':
+                            e.preventDefault();
+                            send({ type: 'setValue', value: 0 });
+                            return;
+                        case 'End':
+                            e.preventDefault();
+                            send({ type: 'toEnd' });
+                            return;
+                    }
+                },
+            },
+        }),
+    };
+}
+export const ratingGroup = { init, update, connect, itemFill };

package/dist/components/scroll-area.d.ts

@@ -0,0 +1,124 @@
+import type { Send } from '@llui/dom';
+/**
+ * Scroll area — custom-styled scroll container with scrollbars that
+ * can be hidden/shown based on scroll activity or hover. The state
+ * machine tracks scroll position + overflow flags (whether content
+ * actually overflows each axis); the view layer installs listeners
+ * that populate these via `setScroll` / `setOverflow`.
+ *
+ * This component is primarily a structural shell — the real scrolling
+ * is done by the browser (overflow: auto) on the viewport element.
+ * The machine just tracks position so the view can render custom
+ * thumbs positioned proportionally.
+ *
+ * Typical onMount wiring:
+ *
+ *   const viewport = root.querySelector('[data-part="viewport"]')
+ *   const sync = () => send({type:'setScroll', ...dimsOf(viewport)})
+ *   viewport.addEventListener('scroll', sync)
+ *   const ro = new ResizeObserver(sync); ro.observe(viewport); ro.observe(content)
+ *   sync()  // initial
+ */
+export type ScrollbarVisibility = 'auto' | 'always' | 'hover' | 'scroll';
+export interface ScrollDims {
+    scrollTop: number;
+    scrollLeft: number;
+    scrollWidth: number;
+    scrollHeight: number;
+    clientWidth: number;
+    clientHeight: number;
+}
+export interface ScrollAreaState extends ScrollDims {
+    overflowX: boolean;
+    overflowY: boolean;
+    /** Whether the user is currently scrolling (set/cleared by the consumer
+     *  via a debounced scroll handler). */
+    scrolling: boolean;
+    /** Whether the pointer is over the scroll area. */
+    hovered: boolean;
+    visibility: ScrollbarVisibility;
+}
+export type ScrollAreaMsg = {
+    type: 'setScroll';
+    scrollTop: number;
+    scrollLeft: number;
+    scrollWidth: number;
+    scrollHeight: number;
+    clientWidth: number;
+    clientHeight: number;
+} | {
+    type: 'setScrolling';
+    scrolling: boolean;
+} | {
+    type: 'setHovered';
+    hovered: boolean;
+};
+export interface ScrollAreaInit {
+    visibility?: ScrollbarVisibility;
+}
+export declare function init(opts?: ScrollAreaInit): ScrollAreaState;
+export declare function update(state: ScrollAreaState, msg: ScrollAreaMsg): [ScrollAreaState, never[]];
+/** Whether the scrollbars should be visible given the state. */
+export declare function showScrollbars(state: ScrollAreaState, axis: 'x' | 'y'): boolean;
+/** Thumb position as a proportion (0..1) along the track. */
+export declare function thumbPosition(state: ScrollAreaState, axis: 'x' | 'y'): number;
+/** Thumb size as a proportion (0..1) of the track. */
+export declare function thumbSize(state: ScrollAreaState, axis: 'x' | 'y'): number;
+export interface ScrollAreaParts<S> {
+    root: {
+        'data-scope': 'scroll-area';
+        'data-part': 'root';
+        'data-scrolling': (s: S) => '' | undefined;
+        'data-hovered': (s: S) => '' | undefined;
+        onMouseEnter: (e: MouseEvent) => void;
+        onMouseLeave: (e: MouseEvent) => void;
+    };
+    viewport: {
+        'data-scope': 'scroll-area';
+        'data-part': 'viewport';
+        onScroll: (e: Event) => void;
+    };
+    content: {
+        'data-scope': 'scroll-area';
+        'data-part': 'content';
+    };
+    scrollbarX: {
+        'data-scope': 'scroll-area';
+        'data-part': 'scrollbar';
+        'data-axis': 'x';
+        'data-visible': (s: S) => '' | undefined;
+    };
+    scrollbarY: {
+        'data-scope': 'scroll-area';
+        'data-part': 'scrollbar';
+        'data-axis': 'y';
+        'data-visible': (s: S) => '' | undefined;
+    };
+    thumbX: {
+        'data-scope': 'scroll-area';
+        'data-part': 'thumb';
+        'data-axis': 'x';
+        style: (s: S) => string;
+    };
+    thumbY: {
+        'data-scope': 'scroll-area';
+        'data-part': 'thumb';
+        'data-axis': 'y';
+        style: (s: S) => string;
+    };
+    corner: {
+        'data-scope': 'scroll-area';
+        'data-part': 'corner';
+        'data-visible': (s: S) => '' | undefined;
+    };
+}
+export declare function connect<S>(get: (s: S) => ScrollAreaState, send: Send<ScrollAreaMsg>): ScrollAreaParts<S>;
+export declare const scrollArea: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    showScrollbars: typeof showScrollbars;
+    thumbPosition: typeof thumbPosition;
+    thumbSize: typeof thumbSize;
+};
+//# sourceMappingURL=scroll-area.d.ts.map

package/dist/components/scroll-area.d.ts.map

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

package/dist/components/scroll-area.js

@@ -0,0 +1,152 @@
+export function init(opts = {}) {
+    return {
+        scrollTop: 0,
+        scrollLeft: 0,
+        scrollWidth: 0,
+        scrollHeight: 0,
+        clientWidth: 0,
+        clientHeight: 0,
+        overflowX: false,
+        overflowY: false,
+        scrolling: false,
+        hovered: false,
+        visibility: opts.visibility ?? 'hover',
+    };
+}
+export function update(state, msg) {
+    switch (msg.type) {
+        case 'setScroll':
+            return [
+                {
+                    ...state,
+                    scrollTop: msg.scrollTop,
+                    scrollLeft: msg.scrollLeft,
+                    scrollWidth: msg.scrollWidth,
+                    scrollHeight: msg.scrollHeight,
+                    clientWidth: msg.clientWidth,
+                    clientHeight: msg.clientHeight,
+                    overflowX: msg.scrollWidth > msg.clientWidth,
+                    overflowY: msg.scrollHeight > msg.clientHeight,
+                },
+                [],
+            ];
+        case 'setScrolling':
+            return [{ ...state, scrolling: msg.scrolling }, []];
+        case 'setHovered':
+            return [{ ...state, hovered: msg.hovered }, []];
+    }
+}
+/** Whether the scrollbars should be visible given the state. */
+export function showScrollbars(state, axis) {
+    const overflow = axis === 'x' ? state.overflowX : state.overflowY;
+    if (!overflow)
+        return false;
+    switch (state.visibility) {
+        case 'always':
+            return true;
+        case 'auto':
+            return overflow;
+        case 'hover':
+            return state.hovered;
+        case 'scroll':
+            return state.scrolling;
+    }
+}
+/** Thumb position as a proportion (0..1) along the track. */
+export function thumbPosition(state, axis) {
+    if (axis === 'x') {
+        const max = state.scrollWidth - state.clientWidth;
+        return max > 0 ? state.scrollLeft / max : 0;
+    }
+    const max = state.scrollHeight - state.clientHeight;
+    return max > 0 ? state.scrollTop / max : 0;
+}
+/** Thumb size as a proportion (0..1) of the track. */
+export function thumbSize(state, axis) {
+    if (axis === 'x') {
+        return state.scrollWidth > 0 ? Math.max(0.05, state.clientWidth / state.scrollWidth) : 0;
+    }
+    return state.scrollHeight > 0 ? Math.max(0.05, state.clientHeight / state.scrollHeight) : 0;
+}
+export function connect(get, send) {
+    return {
+        root: {
+            'data-scope': 'scroll-area',
+            'data-part': 'root',
+            'data-scrolling': (s) => (get(s).scrolling ? '' : undefined),
+            'data-hovered': (s) => (get(s).hovered ? '' : undefined),
+            onMouseEnter: () => send({ type: 'setHovered', hovered: true }),
+            onMouseLeave: () => send({ type: 'setHovered', hovered: false }),
+        },
+        viewport: {
+            'data-scope': 'scroll-area',
+            'data-part': 'viewport',
+            onScroll: (e) => {
+                const el = e.target;
+                send({
+                    type: 'setScroll',
+                    scrollTop: el.scrollTop,
+                    scrollLeft: el.scrollLeft,
+                    scrollWidth: el.scrollWidth,
+                    scrollHeight: el.scrollHeight,
+                    clientWidth: el.clientWidth,
+                    clientHeight: el.clientHeight,
+                });
+            },
+        },
+        content: {
+            'data-scope': 'scroll-area',
+            'data-part': 'content',
+        },
+        scrollbarX: {
+            'data-scope': 'scroll-area',
+            'data-part': 'scrollbar',
+            'data-axis': 'x',
+            'data-visible': (s) => (showScrollbars(get(s), 'x') ? '' : undefined),
+        },
+        scrollbarY: {
+            'data-scope': 'scroll-area',
+            'data-part': 'scrollbar',
+            'data-axis': 'y',
+            'data-visible': (s) => (showScrollbars(get(s), 'y') ? '' : undefined),
+        },
+        thumbX: {
+            'data-scope': 'scroll-area',
+            'data-part': 'thumb',
+            'data-axis': 'x',
+            style: (s) => {
+                const st = get(s);
+                const pos = thumbPosition(st, 'x');
+                const size = thumbSize(st, 'x');
+                return `left:${(pos * (1 - size) * 100).toFixed(2)}%;width:${(size * 100).toFixed(2)}%;`;
+            },
+        },
+        thumbY: {
+            'data-scope': 'scroll-area',
+            'data-part': 'thumb',
+            'data-axis': 'y',
+            style: (s) => {
+                const st = get(s);
+                const pos = thumbPosition(st, 'y');
+                const size = thumbSize(st, 'y');
+                return `top:${(pos * (1 - size) * 100).toFixed(2)}%;height:${(size * 100).toFixed(2)}%;`;
+            },
+        },
+        corner: {
+            'data-scope': 'scroll-area',
+            'data-part': 'corner',
+            'data-visible': (s) => {
+                const st = get(s);
+                return showScrollbars(st, 'x') && showScrollbars(st, 'y') ? '' : undefined;
+            },
+        },
+    };
+}
+export const scrollArea = {
+    init,
+    update,
+    connect,
+    showScrollbars,
+    thumbPosition,
+    thumbSize,
+};

package/dist/components/select.d.ts

@@ -0,0 +1,161 @@
+import type { Send, TransitionOptions } from '@llui/dom';
+import { type Placement } from '../utils/floating';
+/**
+ * Select — a trigger button that opens a listbox dropdown. Value(s) are
+ * visible on the trigger. Supports single or multiple selection.
+ * Positioned relative to the trigger via `@floating-ui/dom`.
+ */
+export type SelectionMode = 'single' | 'multiple';
+export interface SelectState {
+    open: boolean;
+    value: string[];
+    items: string[];
+    disabledItems: string[];
+    selectionMode: SelectionMode;
+    highlightedIndex: number | null;
+    disabled: boolean;
+    required: boolean;
+    typeahead: string;
+    typeaheadExpiresAt: number;
+}
+export type SelectMsg = {
+    type: 'open';
+} | {
+    type: 'close';
+} | {
+    type: 'toggle';
+} | {
+    type: 'selectOption';
+    value: string;
+} | {
+    type: 'setValue';
+    value: string[];
+} | {
+    type: 'clear';
+} | {
+    type: 'highlight';
+    index: number | null;
+} | {
+    type: 'highlightNext';
+} | {
+    type: 'highlightPrev';
+} | {
+    type: 'highlightFirst';
+} | {
+    type: 'highlightLast';
+} | {
+    type: 'selectHighlighted';
+} | {
+    type: 'setItems';
+    items: string[];
+    disabled?: string[];
+} | {
+    type: 'typeahead';
+    char: string;
+    now: number;
+};
+export interface SelectInit {
+    value?: string[];
+    items?: string[];
+    disabledItems?: string[];
+    selectionMode?: SelectionMode;
+    disabled?: boolean;
+    required?: boolean;
+}
+export declare function init(opts?: SelectInit): SelectState;
+export declare function update(state: SelectState, msg: SelectMsg): [SelectState, never[]];
+export interface SelectItemParts<S> {
+    item: {
+        role: 'option';
+        id: string;
+        'aria-selected': (s: S) => boolean;
+        'aria-disabled': (s: S) => 'true' | undefined;
+        'data-state': (s: S) => 'selected' | undefined;
+        'data-highlighted': (s: S) => '' | undefined;
+        'data-disabled': (s: S) => '' | undefined;
+        'data-scope': 'select';
+        'data-part': 'item';
+        'data-value': string;
+        'data-index': string;
+        onClick: (e: MouseEvent) => void;
+        onPointerMove: (e: PointerEvent) => void;
+    };
+}
+export interface SelectParts<S> {
+    trigger: {
+        type: 'button';
+        role: 'combobox';
+        'aria-haspopup': 'listbox';
+        'aria-expanded': (s: S) => boolean;
+        'aria-controls': string;
+        'aria-activedescendant': (s: S) => string | undefined;
+        'aria-disabled': (s: S) => 'true' | undefined;
+        'aria-required': (s: S) => 'true' | undefined;
+        id: string;
+        disabled: (s: S) => boolean;
+        'data-state': (s: S) => 'open' | 'closed';
+        'data-scope': 'select';
+        'data-part': 'trigger';
+        onClick: (e: MouseEvent) => void;
+        onKeyDown: (e: KeyboardEvent) => void;
+    };
+    positioner: {
+        'data-scope': 'select';
+        'data-part': 'positioner';
+        style: string;
+    };
+    content: {
+        role: 'listbox';
+        id: string;
+        'aria-multiselectable': (s: S) => 'true' | undefined;
+        'aria-labelledby': string;
+        tabIndex: -1;
+        'data-state': (s: S) => 'open' | 'closed';
+        'data-scope': 'select';
+        'data-part': 'content';
+        onKeyDown: (e: KeyboardEvent) => void;
+    };
+    hiddenSelect: {
+        'aria-hidden': 'true';
+        tabIndex: -1;
+        style: string;
+        disabled: (s: S) => boolean;
+        multiple: (s: S) => boolean;
+        required: (s: S) => boolean;
+        'data-scope': 'select';
+        'data-part': 'hidden-select';
+    };
+    item: (value: string, index: number) => SelectItemParts<S>;
+    /** Selected value(s) — use for rendering the trigger label. */
+    valueText: (s: S) => string;
+}
+export interface ConnectOptions {
+    id: string;
+    /** Text to show in trigger when empty. */
+    placeholder?: string;
+    /** Join multi-value labels with this separator. */
+    separator?: string;
+}
+export declare function connect<S>(get: (s: S) => SelectState, send: Send<SelectMsg>, opts: ConnectOptions): SelectParts<S>;
+export interface OverlayOptions<S> {
+    get: (s: S) => SelectState;
+    send: Send<SelectMsg>;
+    parts: SelectParts<S>;
+    content: () => Node[];
+    placement?: Placement;
+    offset?: number;
+    flip?: boolean;
+    shift?: boolean;
+    /** Match content width to trigger width (default: true). */
+    sameWidth?: boolean;
+    transition?: TransitionOptions;
+    target?: string | HTMLElement;
+}
+export declare function overlay<S>(opts: OverlayOptions<S>): Node[];
+export declare const select: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    overlay: typeof overlay;
+};
+//# sourceMappingURL=select.d.ts.map

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

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