@llui/components 0.0.1

package/dist/components/toc.js

@@ -0,0 +1,107 @@
+export function init(opts = {}) {
+    return {
+        items: opts.items ?? [],
+        activeId: opts.activeId ?? null,
+        expanded: opts.expanded ?? [],
+    };
+}
+export function update(state, msg) {
+    switch (msg.type) {
+        case 'setItems':
+            return [{ ...state, items: msg.items }, []];
+        case 'setActive':
+            if (state.activeId === msg.id)
+                return [state, []];
+            return [{ ...state, activeId: msg.id }, []];
+        case 'toggleExpanded': {
+            const expanded = state.expanded.includes(msg.id)
+                ? state.expanded.filter((id) => id !== msg.id)
+                : [...state.expanded, msg.id];
+            return [{ ...state, expanded }, []];
+        }
+        case 'expandAll':
+            return [{ ...state, expanded: state.items.map((i) => i.id) }, []];
+        case 'collapseAll':
+            return [{ ...state, expanded: [] }, []];
+    }
+}
+export function isActive(state, id) {
+    return state.activeId === id;
+}
+export function isExpanded(state, id) {
+    return state.expanded.includes(id);
+}
+export function connect(get, send, opts = {}) {
+    const prefix = opts.hrefPrefix ?? '#';
+    const expandLabel = opts.expandLabel ?? 'Toggle section';
+    return {
+        root: {
+            role: 'navigation',
+            'aria-label': opts.label ?? 'Table of contents',
+            'data-scope': 'toc',
+            'data-part': 'root',
+        },
+        list: {
+            role: 'list',
+            'data-scope': 'toc',
+            'data-part': 'list',
+        },
+        item: (entry) => ({
+            item: {
+                'data-scope': 'toc',
+                'data-part': 'item',
+                'data-level': String(entry.level),
+                'data-active': (s) => (isActive(get(s), entry.id) ? '' : undefined),
+                'data-value': entry.id,
+            },
+            link: {
+                href: `${prefix}${entry.id}`,
+                'aria-current': (s) => (isActive(get(s), entry.id) ? 'location' : undefined),
+                'data-scope': 'toc',
+                'data-part': 'link',
+                'data-active': (s) => (isActive(get(s), entry.id) ? '' : undefined),
+            },
+            expandTrigger: {
+                type: 'button',
+                'aria-expanded': (s) => isExpanded(get(s), entry.id),
+                'aria-label': expandLabel,
+                'data-scope': 'toc',
+                'data-part': 'expand-trigger',
+                'data-state': (s) => (isExpanded(get(s), entry.id) ? 'open' : 'closed'),
+                onClick: () => send({ type: 'toggleExpanded', id: entry.id }),
+            },
+        }),
+    };
+}
+/**
+ * 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 function watchActiveHeading(send, selector = '[id][data-toc]', rootMargin = '0px 0px -80% 0px') {
+    const headings = Array.from(document.querySelectorAll(selector));
+    if (headings.length === 0)
+        return () => { };
+    const io = new IntersectionObserver((entries) => {
+        for (const e of entries) {
+            if (e.isIntersecting) {
+                send({ type: 'setActive', id: e.target.id });
+                return;
+            }
+        }
+    }, { rootMargin });
+    for (const h of headings)
+        io.observe(h);
+    return () => io.disconnect();
+}
+export const toc = {
+    init,
+    update,
+    connect,
+    isActive,
+    isExpanded,
+    watchActiveHeading,
+};

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

@@ -0,0 +1,80 @@
+import type { Send } from '@llui/dom';
+/**
+ * Toggle group — a set of toggle buttons. `type: 'single'` enforces
+ * one-active-at-a-time (like a radio group but visually toggles).
+ * `type: 'multiple'` allows any subset to be pressed.
+ */
+export type Orientation = 'horizontal' | 'vertical';
+export interface ToggleGroupState {
+    value: string[];
+    type: 'single' | 'multiple';
+    items: string[];
+    disabledItems: string[];
+    disabled: boolean;
+    orientation: Orientation;
+    /** In single mode, whether the active item can be deselected. */
+    deselectable: boolean;
+}
+export type ToggleGroupMsg = {
+    type: 'toggle';
+    value: string;
+} | {
+    type: 'setValue';
+    value: string[];
+} | {
+    type: 'setItems';
+    items: string[];
+    disabled?: string[];
+} | {
+    type: 'focusNext';
+    from: string;
+} | {
+    type: 'focusPrev';
+    from: string;
+};
+export interface ToggleGroupInit {
+    value?: string[];
+    type?: 'single' | 'multiple';
+    items?: string[];
+    disabledItems?: string[];
+    disabled?: boolean;
+    orientation?: Orientation;
+    deselectable?: boolean;
+}
+export declare function init(opts?: ToggleGroupInit): ToggleGroupState;
+export declare function update(state: ToggleGroupState, msg: ToggleGroupMsg): [ToggleGroupState, never[]];
+export interface ToggleGroupItemParts<S> {
+    root: {
+        type: 'button';
+        role: 'button';
+        'aria-pressed': (s: S) => boolean;
+        'aria-disabled': (s: S) => 'true' | undefined;
+        disabled: (s: S) => boolean;
+        'data-state': (s: S) => 'on' | 'off';
+        'data-disabled': (s: S) => '' | undefined;
+        'data-scope': 'toggle-group';
+        'data-part': 'item';
+        'data-value': string;
+        onClick: (e: MouseEvent) => void;
+        onKeyDown: (e: KeyboardEvent) => void;
+    };
+}
+export interface ToggleGroupParts<S> {
+    root: {
+        role: 'group';
+        'aria-orientation': (s: S) => Orientation;
+        'aria-disabled': (s: S) => 'true' | undefined;
+        'data-scope': 'toggle-group';
+        'data-part': 'root';
+        'data-orientation': (s: S) => Orientation;
+        'data-disabled': (s: S) => '' | undefined;
+    };
+    item: (value: string) => ToggleGroupItemParts<S>;
+}
+export declare function connect<S>(get: (s: S) => ToggleGroupState, send: Send<ToggleGroupMsg>): ToggleGroupParts<S>;
+export declare const toggleGroup: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+};
+//# sourceMappingURL=toggle-group.d.ts.map

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

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

package/dist/components/toggle-group.js

@@ -0,0 +1,93 @@
+export function init(opts = {}) {
+    return {
+        value: opts.value ?? [],
+        type: opts.type ?? 'single',
+        items: opts.items ?? [],
+        disabledItems: opts.disabledItems ?? [],
+        disabled: opts.disabled ?? false,
+        orientation: opts.orientation ?? 'horizontal',
+        deselectable: opts.deselectable ?? true,
+    };
+}
+export function update(state, msg) {
+    if (state.disabled)
+        return [state, []];
+    switch (msg.type) {
+        case 'toggle': {
+            if (state.disabledItems.includes(msg.value))
+                return [state, []];
+            const isActive = state.value.includes(msg.value);
+            if (state.type === 'multiple') {
+                const next = isActive
+                    ? state.value.filter((v) => v !== msg.value)
+                    : [...state.value, msg.value];
+                return [{ ...state, value: next }, []];
+            }
+            // single
+            if (isActive) {
+                if (!state.deselectable)
+                    return [state, []];
+                return [{ ...state, value: [] }, []];
+            }
+            return [{ ...state, value: [msg.value] }, []];
+        }
+        case 'setValue':
+            return [{ ...state, value: msg.value }, []];
+        case 'setItems':
+            return [
+                { ...state, items: msg.items, disabledItems: msg.disabled ?? state.disabledItems },
+                [],
+            ];
+        case 'focusNext':
+        case 'focusPrev':
+            return [state, []];
+    }
+}
+export function connect(get, send) {
+    return {
+        root: {
+            role: 'group',
+            'aria-orientation': (s) => get(s).orientation,
+            'aria-disabled': (s) => (get(s).disabled ? 'true' : undefined),
+            'data-scope': 'toggle-group',
+            'data-part': 'root',
+            'data-orientation': (s) => get(s).orientation,
+            'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+        },
+        item: (value) => ({
+            root: {
+                type: 'button',
+                role: 'button',
+                'aria-pressed': (s) => get(s).value.includes(value),
+                'aria-disabled': (s) => get(s).disabled || get(s).disabledItems.includes(value) ? 'true' : undefined,
+                disabled: (s) => get(s).disabled || get(s).disabledItems.includes(value),
+                'data-state': (s) => (get(s).value.includes(value) ? 'on' : 'off'),
+                'data-disabled': (s) => get(s).disabled || get(s).disabledItems.includes(value) ? '' : undefined,
+                'data-scope': 'toggle-group',
+                'data-part': 'item',
+                'data-value': value,
+                onClick: () => send({ type: 'toggle', value }),
+                onKeyDown: (e) => {
+                    switch (e.key) {
+                        case 'ArrowRight':
+                        case 'ArrowDown':
+                            e.preventDefault();
+                            send({ type: 'focusNext', from: value });
+                            return;
+                        case 'ArrowLeft':
+                        case 'ArrowUp':
+                            e.preventDefault();
+                            send({ type: 'focusPrev', from: value });
+                            return;
+                        case ' ':
+                        case 'Enter':
+                            e.preventDefault();
+                            send({ type: 'toggle', value });
+                            return;
+                    }
+                },
+            },
+        }),
+    };
+}
+export const toggleGroup = { init, update, connect };

package/dist/components/toggle.d.ts

@@ -0,0 +1,47 @@
+import type { Send } from '@llui/dom';
+/**
+ * Toggle button — a button that can be pressed or not. Unlike a checkbox,
+ * a toggle represents an action that is applied immediately (e.g. "bold" in
+ * a text editor toolbar).
+ */
+export interface ToggleState {
+    pressed: boolean;
+    disabled: boolean;
+}
+export type ToggleMsg = {
+    type: 'toggle';
+} | {
+    type: 'setPressed';
+    pressed: boolean;
+} | {
+    type: 'setDisabled';
+    disabled: boolean;
+};
+export interface ToggleInit {
+    pressed?: boolean;
+    disabled?: boolean;
+}
+export declare function init(opts?: ToggleInit): ToggleState;
+export declare function update(state: ToggleState, msg: ToggleMsg): [ToggleState, never[]];
+export interface ToggleParts<S> {
+    root: {
+        type: 'button';
+        role: 'button';
+        'aria-pressed': (s: S) => boolean;
+        'aria-disabled': (s: S) => 'true' | undefined;
+        disabled: (s: S) => boolean;
+        'data-state': (s: S) => 'on' | 'off';
+        'data-disabled': (s: S) => '' | undefined;
+        'data-scope': 'toggle';
+        'data-part': 'root';
+        onClick: (e: MouseEvent) => void;
+        onKeyDown: (e: KeyboardEvent) => void;
+    };
+}
+export declare function connect<S>(get: (s: S) => ToggleState, send: Send<ToggleMsg>): ToggleParts<S>;
+export declare const toggle: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+};
+//# sourceMappingURL=toggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/components/toggle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAErC;;;;GAIG;AAEH,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,MAAM,SAAS,GACjB;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAClB;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,GACxC;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,CAAA;AAE9C,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,IAAI,CAAC,IAAI,GAAE,UAAe,GAAG,WAAW,CAKvD;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,SAAS,GAAG,CAAC,WAAW,EAAE,KAAK,EAAE,CAAC,CAUjF;AAED,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ,CAAA;QACd,IAAI,EAAE,QAAQ,CAAA;QACd,cAAc,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;QACjC,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAA;QAC7C,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;QAC3B,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,GAAG,KAAK,CAAA;QACpC,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,SAAS,CAAA;QACzC,YAAY,EAAE,QAAQ,CAAA;QACtB,WAAW,EAAE,MAAM,CAAA;QACnB,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;QAChC,SAAS,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAA;KACtC,CAAA;CACF;AAED,wBAAgB,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAqB5F;AAED,eAAO,MAAM,MAAM;;;;CAA4B,CAAA"}

package/dist/components/toggle.js

@@ -0,0 +1,41 @@
+export function init(opts = {}) {
+    return {
+        pressed: opts.pressed ?? false,
+        disabled: opts.disabled ?? false,
+    };
+}
+export function update(state, msg) {
+    switch (msg.type) {
+        case 'toggle':
+            if (state.disabled)
+                return [state, []];
+            return [{ ...state, pressed: !state.pressed }, []];
+        case 'setPressed':
+            return [{ ...state, pressed: msg.pressed }, []];
+        case 'setDisabled':
+            return [{ ...state, disabled: msg.disabled }, []];
+    }
+}
+export function connect(get, send) {
+    return {
+        root: {
+            type: 'button',
+            role: 'button',
+            'aria-pressed': (s) => get(s).pressed,
+            'aria-disabled': (s) => (get(s).disabled ? 'true' : undefined),
+            disabled: (s) => get(s).disabled,
+            'data-state': (s) => (get(s).pressed ? 'on' : 'off'),
+            'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+            'data-scope': 'toggle',
+            'data-part': 'root',
+            onClick: () => send({ type: 'toggle' }),
+            onKeyDown: (e) => {
+                if (e.key === ' ' || e.key === 'Enter') {
+                    e.preventDefault();
+                    send({ type: 'toggle' });
+                }
+            },
+        },
+    };
+}
+export const toggle = { init, update, connect };

package/dist/components/tooltip.d.ts

@@ -0,0 +1,92 @@
+import type { Send, TransitionOptions } from '@llui/dom';
+import { type Placement } from '../utils/floating';
+/**
+ * Tooltip — hover / focus-triggered, positioned. Opens after a short delay
+ * to avoid flicker from passing pointers, closes immediately on blur or
+ * after a grace period on pointer leave.
+ *
+ * Pure reducer handles only the boolean `open` state; timing (delays,
+ * debouncing) lives in the event handlers returned from `connect()`, which
+ * close over per-instance timers.
+ */
+export interface TooltipState {
+    open: boolean;
+}
+export type TooltipMsg = {
+    type: 'show';
+} | {
+    type: 'hide';
+} | {
+    type: 'toggle';
+} | {
+    type: 'setOpen';
+    open: boolean;
+};
+export interface TooltipInit {
+    open?: boolean;
+}
+export declare function init(opts?: TooltipInit): TooltipState;
+export declare function update(state: TooltipState, msg: TooltipMsg): [TooltipState, never[]];
+export interface TooltipParts<S> {
+    trigger: {
+        id: string;
+        'aria-describedby': (s: S) => string | undefined;
+        'data-state': (s: S) => 'open' | 'closed';
+        'data-scope': 'tooltip';
+        'data-part': 'trigger';
+        onPointerEnter: (e: PointerEvent) => void;
+        onPointerLeave: (e: PointerEvent) => void;
+        onFocus: (e: FocusEvent) => void;
+        onBlur: (e: FocusEvent) => void;
+        onKeyDown: (e: KeyboardEvent) => void;
+    };
+    positioner: {
+        'data-scope': 'tooltip';
+        'data-part': 'positioner';
+        style: string;
+    };
+    content: {
+        role: 'tooltip';
+        id: string;
+        'data-state': (s: S) => 'open' | 'closed';
+        'data-scope': 'tooltip';
+        'data-part': 'content';
+        onPointerEnter: (e: PointerEvent) => void;
+        onPointerLeave: (e: PointerEvent) => void;
+    };
+    arrow: {
+        'data-scope': 'tooltip';
+        'data-part': 'arrow';
+    };
+}
+export interface ConnectOptions {
+    id: string;
+    /** ms to wait before opening (default: 300). */
+    delayOpen?: number;
+    /** ms to wait before closing after pointer leaves (default: 100). */
+    delayClose?: number;
+    /** Open immediately on focus without delay (default: true). */
+    openOnFocus?: boolean;
+}
+export declare function connect<S>(get: (s: S) => TooltipState, send: Send<TooltipMsg>, opts: ConnectOptions): TooltipParts<S>;
+export interface OverlayOptions<S> {
+    get: (s: S) => TooltipState;
+    send: Send<TooltipMsg>;
+    parts: TooltipParts<S>;
+    content: () => Node[];
+    placement?: Placement;
+    offset?: number;
+    flip?: boolean;
+    shift?: boolean;
+    transition?: TransitionOptions;
+    target?: string | HTMLElement;
+    arrowSelector?: string;
+}
+export declare function overlay<S>(opts: OverlayOptions<S>): Node[];
+export declare const tooltip: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    overlay: typeof overlay;
+};
+//# sourceMappingURL=tooltip.d.ts.map

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

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

package/dist/components/tooltip.js

@@ -0,0 +1,147 @@
+import { show, portal, onMount, div } from '@llui/dom';
+import { attachFloating } from '../utils/floating';
+export function init(opts = {}) {
+    return { open: opts.open ?? false };
+}
+export function update(state, msg) {
+    switch (msg.type) {
+        case 'show':
+            return [{ ...state, open: true }, []];
+        case 'hide':
+            return [{ ...state, open: false }, []];
+        case 'toggle':
+            return [{ ...state, open: !state.open }, []];
+        case 'setOpen':
+            return [{ ...state, open: msg.open }, []];
+    }
+}
+export function connect(get, send, opts) {
+    const base = opts.id;
+    const triggerId = `${base}:trigger`;
+    const contentId = `${base}:content`;
+    const delayOpen = opts.delayOpen ?? 300;
+    const delayClose = opts.delayClose ?? 100;
+    const openOnFocus = opts.openOnFocus !== false;
+    let openTimer = null;
+    let closeTimer = null;
+    const clearTimers = () => {
+        if (openTimer) {
+            clearTimeout(openTimer);
+            openTimer = null;
+        }
+        if (closeTimer) {
+            clearTimeout(closeTimer);
+            closeTimer = null;
+        }
+    };
+    const scheduleShow = (delay) => {
+        clearTimers();
+        if (delay <= 0) {
+            send({ type: 'show' });
+            return;
+        }
+        openTimer = setTimeout(() => {
+            openTimer = null;
+            send({ type: 'show' });
+        }, delay);
+    };
+    const scheduleHide = (delay) => {
+        clearTimers();
+        if (delay <= 0) {
+            send({ type: 'hide' });
+            return;
+        }
+        closeTimer = setTimeout(() => {
+            closeTimer = null;
+            send({ type: 'hide' });
+        }, delay);
+    };
+    return {
+        trigger: {
+            id: triggerId,
+            'aria-describedby': (s) => (get(s).open ? contentId : undefined),
+            'data-state': (s) => (get(s).open ? 'open' : 'closed'),
+            'data-scope': 'tooltip',
+            'data-part': 'trigger',
+            onPointerEnter: () => scheduleShow(delayOpen),
+            onPointerLeave: () => scheduleHide(delayClose),
+            onFocus: () => {
+                if (openOnFocus)
+                    scheduleShow(0);
+            },
+            onBlur: () => scheduleHide(0),
+            onKeyDown: (e) => {
+                if (e.key === 'Escape') {
+                    clearTimers();
+                    send({ type: 'hide' });
+                }
+            },
+        },
+        positioner: {
+            'data-scope': 'tooltip',
+            'data-part': 'positioner',
+            style: 'position:absolute;top:0;left:0;pointer-events:none;',
+        },
+        content: {
+            role: 'tooltip',
+            id: contentId,
+            'data-state': (s) => (get(s).open ? 'open' : 'closed'),
+            'data-scope': 'tooltip',
+            'data-part': 'content',
+            // Allow pointer to enter content without closing (for interactive tooltips)
+            onPointerEnter: () => {
+                if (closeTimer) {
+                    clearTimeout(closeTimer);
+                    closeTimer = null;
+                }
+            },
+            onPointerLeave: () => scheduleHide(delayClose),
+        },
+        arrow: {
+            'data-scope': 'tooltip',
+            'data-part': 'arrow',
+        },
+    };
+}
+export function overlay(opts) {
+    const target = opts.target ?? 'body';
+    const placement = opts.placement ?? 'top';
+    const offset = opts.offset ?? 6;
+    const flip = opts.flip !== false;
+    const shift = opts.shift !== false;
+    const parts = opts.parts;
+    const contentId = parts.content.id;
+    const triggerId = parts.trigger.id;
+    return show({
+        when: (s) => opts.get(s).open,
+        render: () => portal({
+            target,
+            render: () => {
+                onMount(() => {
+                    const contentEl = document.getElementById(contentId);
+                    const triggerEl = document.getElementById(triggerId);
+                    if (!contentEl || !triggerEl)
+                        return;
+                    const positioner = contentEl.closest('[data-part="positioner"]');
+                    const floatingEl = positioner ?? contentEl;
+                    const arrow = opts.arrowSelector
+                        ? contentEl.querySelector(opts.arrowSelector)
+                        : null;
+                    return attachFloating({
+                        anchor: triggerEl,
+                        floating: floatingEl,
+                        placement,
+                        offset,
+                        flip,
+                        shift,
+                        arrow: arrow ?? undefined,
+                    });
+                });
+                return [div(parts.positioner, opts.content())];
+            },
+        }),
+        enter: opts.transition?.enter,
+        leave: opts.transition?.leave,
+    });
+}
+export const tooltip = { init, update, connect, overlay };