@llui/components 0.0.1

package/dist/components/drawer.d.ts

@@ -0,0 +1,106 @@
+import type { Send, TransitionOptions } from '@llui/dom';
+/**
+ * Drawer — a panel that slides in from a screen edge. Structurally
+ * identical to dialog (portal + focus trap + dismissable + aria-hidden +
+ * scroll lock), but adds a `side` so styling can animate from that edge.
+ */
+export type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
+export interface DrawerState {
+    open: boolean;
+}
+export type DrawerMsg = {
+    type: 'open';
+} | {
+    type: 'close';
+} | {
+    type: 'toggle';
+} | {
+    type: 'setOpen';
+    open: boolean;
+};
+export interface DrawerInit {
+    open?: boolean;
+}
+export declare function init(opts?: DrawerInit): DrawerState;
+export declare function update(state: DrawerState, msg: DrawerMsg): [DrawerState, never[]];
+export interface DrawerParts<S> {
+    trigger: {
+        type: 'button';
+        'aria-haspopup': 'dialog';
+        'aria-expanded': (s: S) => boolean;
+        'aria-controls': string;
+        id: string;
+        'data-state': (s: S) => 'open' | 'closed';
+        'data-scope': 'drawer';
+        'data-part': 'trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+    backdrop: {
+        'data-state': (s: S) => 'open' | 'closed';
+        'data-scope': 'drawer';
+        'data-part': 'backdrop';
+        'aria-hidden': 'true';
+    };
+    positioner: {
+        'data-scope': 'drawer';
+        'data-part': 'positioner';
+        'data-side': DrawerSide;
+    };
+    content: {
+        role: 'dialog';
+        id: string;
+        'aria-modal': 'true';
+        'aria-labelledby': string;
+        tabIndex: -1;
+        'data-state': (s: S) => 'open' | 'closed';
+        'data-scope': 'drawer';
+        'data-part': 'content';
+        'data-side': DrawerSide;
+    };
+    title: {
+        id: string;
+        'data-scope': 'drawer';
+        'data-part': 'title';
+    };
+    description: {
+        id: string;
+        'data-scope': 'drawer';
+        'data-part': 'description';
+    };
+    closeTrigger: {
+        type: 'button';
+        'aria-label': string;
+        'data-scope': 'drawer';
+        'data-part': 'close-trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+}
+export interface ConnectOptions {
+    id: string;
+    side?: DrawerSide;
+    closeLabel?: string;
+}
+export declare function connect<S>(get: (s: S) => DrawerState, send: Send<DrawerMsg>, opts: ConnectOptions): DrawerParts<S>;
+export interface OverlayOptions<S> {
+    get: (s: S) => DrawerState;
+    send: Send<DrawerMsg>;
+    parts: DrawerParts<S>;
+    content: () => Node[];
+    transition?: TransitionOptions;
+    closeOnEscape?: boolean;
+    closeOnOutsideClick?: boolean;
+    trapFocus?: boolean;
+    lockScroll?: boolean;
+    hideSiblings?: boolean;
+    target?: string | HTMLElement;
+    initialFocus?: Element | (() => Element | null);
+    restoreFocus?: boolean;
+}
+export declare function overlay<S>(opts: OverlayOptions<S>): Node[];
+export declare const drawer: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    overlay: typeof overlay;
+};
+//# sourceMappingURL=drawer.d.ts.map

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

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

package/dist/components/drawer.js

@@ -0,0 +1,136 @@
+import { show, portal, onMount, div } from '@llui/dom';
+import { pushDismissable } from '../utils/dismissable';
+import { pushFocusTrap } from '../utils/focus-trap';
+import { setAriaHiddenOutside } from '../utils/aria-hidden';
+import { lockBodyScroll } from '../utils/remove-scroll';
+export function init(opts = {}) {
+    return { open: opts.open ?? false };
+}
+export function update(state, msg) {
+    switch (msg.type) {
+        case 'open':
+            return [{ ...state, open: true }, []];
+        case 'close':
+            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 side = opts.side ?? 'right';
+    const base = opts.id;
+    const contentId = `${base}:content`;
+    const titleId = `${base}:title`;
+    const descId = `${base}:description`;
+    const triggerId = `${base}:trigger`;
+    const closeLabel = opts.closeLabel ?? 'Close';
+    return {
+        trigger: {
+            type: 'button',
+            'aria-haspopup': 'dialog',
+            'aria-expanded': (s) => get(s).open,
+            'aria-controls': contentId,
+            id: triggerId,
+            'data-state': (s) => (get(s).open ? 'open' : 'closed'),
+            'data-scope': 'drawer',
+            'data-part': 'trigger',
+            onClick: () => send({ type: 'open' }),
+        },
+        backdrop: {
+            'data-state': (s) => (get(s).open ? 'open' : 'closed'),
+            'data-scope': 'drawer',
+            'data-part': 'backdrop',
+            'aria-hidden': 'true',
+        },
+        positioner: {
+            'data-scope': 'drawer',
+            'data-part': 'positioner',
+            'data-side': side,
+        },
+        content: {
+            role: 'dialog',
+            id: contentId,
+            'aria-modal': 'true',
+            'aria-labelledby': titleId,
+            tabIndex: -1,
+            'data-state': (s) => (get(s).open ? 'open' : 'closed'),
+            'data-scope': 'drawer',
+            'data-part': 'content',
+            'data-side': side,
+        },
+        title: {
+            id: titleId,
+            'data-scope': 'drawer',
+            'data-part': 'title',
+        },
+        description: {
+            id: descId,
+            'data-scope': 'drawer',
+            'data-part': 'description',
+        },
+        closeTrigger: {
+            type: 'button',
+            'aria-label': closeLabel,
+            'data-scope': 'drawer',
+            'data-part': 'close-trigger',
+            onClick: () => send({ type: 'close' }),
+        },
+    };
+}
+export function overlay(opts) {
+    const target = opts.target ?? 'body';
+    const closeOnEscape = opts.closeOnEscape !== false;
+    const closeOnOutsideClick = opts.closeOnOutsideClick !== false;
+    const trapFocus = opts.trapFocus !== false;
+    const lockScroll = opts.lockScroll !== false;
+    const hideSiblings = opts.hideSiblings !== false;
+    const restoreFocus = opts.restoreFocus !== 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);
+                    if (!contentEl)
+                        return;
+                    const triggerEl = document.getElementById(triggerId);
+                    const cleanups = [];
+                    if (lockScroll)
+                        cleanups.push(lockBodyScroll());
+                    if (hideSiblings)
+                        cleanups.push(setAriaHiddenOutside(contentEl));
+                    if (trapFocus) {
+                        cleanups.push(pushFocusTrap({
+                            container: contentEl,
+                            initialFocus: opts.initialFocus,
+                            restoreFocus,
+                        }));
+                    }
+                    if (closeOnEscape || closeOnOutsideClick) {
+                        cleanups.push(pushDismissable({
+                            element: contentEl,
+                            ignore: () => (triggerEl ? [triggerEl] : []),
+                            disableEscape: !closeOnEscape,
+                            disableOutside: !closeOnOutsideClick,
+                            onDismiss: () => opts.send({ type: 'close' }),
+                        }));
+                    }
+                    return () => {
+                        for (let i = cleanups.length - 1; i >= 0; i--)
+                            cleanups[i]();
+                    };
+                });
+                return [div(parts.positioner, opts.content())];
+            },
+        }),
+        enter: opts.transition?.enter,
+        leave: opts.transition?.leave,
+    });
+}
+export const drawer = { init, update, connect, overlay };

package/dist/components/editable.d.ts

@@ -0,0 +1,92 @@
+import type { Send } from '@llui/dom';
+/**
+ * Editable — inline text editor. Click preview to enter edit mode, Enter
+ * to commit, Escape to cancel. Reports the committed value via `onSubmit`.
+ */
+export interface EditableState {
+    value: string;
+    editing: boolean;
+    draft: string;
+    disabled: boolean;
+}
+export type EditableMsg = {
+    type: 'edit';
+} | {
+    type: 'setDraft';
+    draft: string;
+} | {
+    type: 'submit';
+} | {
+    type: 'cancel';
+} | {
+    type: 'setValue';
+    value: string;
+};
+export interface EditableInit {
+    value?: string;
+    editing?: boolean;
+    disabled?: boolean;
+}
+export declare function init(opts?: EditableInit): EditableState;
+export declare function update(state: EditableState, msg: EditableMsg): [EditableState, never[]];
+export interface EditableParts<S> {
+    root: {
+        'data-scope': 'editable';
+        'data-part': 'root';
+        'data-editing': (s: S) => '' | undefined;
+        'data-disabled': (s: S) => '' | undefined;
+    };
+    preview: {
+        tabIndex: (s: S) => number;
+        'aria-disabled': (s: S) => 'true' | undefined;
+        'data-scope': 'editable';
+        'data-part': 'preview';
+        hidden: (s: S) => boolean;
+        onClick: (e: MouseEvent) => void;
+        onFocus: (e: FocusEvent) => void;
+        onKeyDown: (e: KeyboardEvent) => void;
+    };
+    input: {
+        'data-scope': 'editable';
+        'data-part': 'input';
+        hidden: (s: S) => boolean;
+        value: (s: S) => string;
+        disabled: (s: S) => boolean;
+        onInput: (e: Event) => void;
+        onKeyDown: (e: KeyboardEvent) => void;
+        onBlur: (e: FocusEvent) => void;
+    };
+    submitTrigger: {
+        type: 'button';
+        'data-scope': 'editable';
+        'data-part': 'submit-trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+    cancelTrigger: {
+        type: 'button';
+        'data-scope': 'editable';
+        'data-part': 'cancel-trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+    editTrigger: {
+        type: 'button';
+        'data-scope': 'editable';
+        'data-part': 'edit-trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+}
+export interface ConnectOptions {
+    /** Activate edit mode on preview focus (default: false — requires click). */
+    activateOnFocus?: boolean;
+    /** Submit on blur (default: true). False = blur cancels. */
+    submitOnBlur?: boolean;
+    /** Validate the draft text before committing. Non-empty array blocks submit. */
+    validate?: (value: string) => string[] | null;
+}
+export declare function connect<S>(get: (s: S) => EditableState, send: Send<EditableMsg>, opts?: ConnectOptions): EditableParts<S>;
+export declare const editable: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+};
+//# sourceMappingURL=editable.d.ts.map

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

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

package/dist/components/editable.js

@@ -0,0 +1,112 @@
+export function init(opts = {}) {
+    const value = opts.value ?? '';
+    return {
+        value,
+        editing: opts.editing ?? false,
+        draft: value,
+        disabled: opts.disabled ?? false,
+    };
+}
+export function update(state, msg) {
+    if (state.disabled && msg.type !== 'setValue')
+        return [state, []];
+    switch (msg.type) {
+        case 'edit':
+            return [{ ...state, editing: true, draft: state.value }, []];
+        case 'setDraft':
+            return [{ ...state, draft: msg.draft }, []];
+        case 'submit':
+            return [{ ...state, editing: false, value: state.draft }, []];
+        case 'cancel':
+            return [{ ...state, editing: false, draft: state.value }, []];
+        case 'setValue':
+            return [{ ...state, value: msg.value, draft: msg.value }, []];
+    }
+}
+export function connect(get, send, opts = {}) {
+    const activateOnFocus = opts.activateOnFocus === true;
+    const submitOnBlur = opts.submitOnBlur !== false;
+    const validate = opts.validate;
+    let currentDraft = '';
+    const trySubmit = () => {
+        if (validate) {
+            const errors = validate(currentDraft);
+            if (errors && errors.length > 0)
+                return;
+        }
+        send({ type: 'submit' });
+    };
+    return {
+        root: {
+            'data-scope': 'editable',
+            'data-part': 'root',
+            'data-editing': (s) => (get(s).editing ? '' : undefined),
+            'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+        },
+        preview: {
+            tabIndex: (s) => (get(s).disabled ? -1 : 0),
+            'aria-disabled': (s) => (get(s).disabled ? 'true' : undefined),
+            'data-scope': 'editable',
+            'data-part': 'preview',
+            hidden: (s) => get(s).editing,
+            onClick: () => send({ type: 'edit' }),
+            onFocus: () => {
+                if (activateOnFocus)
+                    send({ type: 'edit' });
+            },
+            onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ' || e.key === 'F2') {
+                    e.preventDefault();
+                    send({ type: 'edit' });
+                }
+            },
+        },
+        input: {
+            'data-scope': 'editable',
+            'data-part': 'input',
+            hidden: (s) => !get(s).editing,
+            value: (s) => get(s).draft,
+            disabled: (s) => get(s).disabled,
+            onInput: (e) => {
+                const draft = e.target.value;
+                currentDraft = draft;
+                send({ type: 'setDraft', draft });
+            },
+            onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    trySubmit();
+                }
+                else if (e.key === 'Escape') {
+                    e.preventDefault();
+                    send({ type: 'cancel' });
+                }
+            },
+            onBlur: () => {
+                if (submitOnBlur)
+                    trySubmit();
+                else
+                    send({ type: 'cancel' });
+            },
+        },
+        submitTrigger: {
+            type: 'button',
+            'data-scope': 'editable',
+            'data-part': 'submit-trigger',
+            onClick: () => trySubmit(),
+        },
+        cancelTrigger: {
+            type: 'button',
+            'data-scope': 'editable',
+            'data-part': 'cancel-trigger',
+            onClick: () => send({ type: 'cancel' }),
+        },
+        editTrigger: {
+            type: 'button',
+            'data-scope': 'editable',
+            'data-part': 'edit-trigger',
+            onClick: () => send({ type: 'edit' }),
+        },
+    };
+}
+export const editable = { init, update, connect };