@llui/components 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Franco Ponticelli
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,143 @@
+# @llui/components
+
+54 headless UI components for [LLui](../../README.md). Pure state machines with no DOM opinions — you own the markup and styling via `data-scope` / `data-part` attributes.
+
+## Install
+
+```bash
+pnpm add @llui/components
+```
+
+Peer dependency: `@llui/dom`.
+
+## Usage
+
+Each component exports `init`, `update`, `connect`, and a barrel object:
+
+```typescript
+import { component, div, button } from '@llui/dom'
+import { tabs } from '@llui/components/tabs'
+
+type State = { tabs: tabs.TabsState }
+type Msg = { type: 'tabs'; msg: tabs.TabsMsg }
+
+const App = component<State, Msg, never>({
+  name: 'App',
+  init: () => [{ tabs: tabs.init({ items: ['a', 'b', 'c'], value: 'a' }) }, []],
+  update: (s, m) => {
+    const [t] = tabs.update(s.tabs, m.msg)
+    return [{ tabs: t }, []]
+  },
+  view: ({ send, text }) => {
+    const t = tabs.connect<State>(
+      (s) => s.tabs,
+      (m) => send({ type: 'tabs', msg: m }),
+      { id: 'demo' },
+    )
+    return [
+      div({ ...t.root }, [
+        div({ ...t.list }, [
+          button({ ...t.item('a').trigger }, [text('Tab A')]),
+          button({ ...t.item('b').trigger }, [text('Tab B')]),
+          button({ ...t.item('c').trigger }, [text('Tab C')]),
+        ]),
+        div({ ...t.item('a').panel }, [text('Content A')]),
+        div({ ...t.item('b').panel }, [text('Content B')]),
+        div({ ...t.item('c').panel }, [text('Content C')]),
+      ]),
+    ]
+  },
+})
+```
+
+### Pattern
+
+1. **`init(opts?)`** — creates the initial state
+2. **`update(state, msg)`** — pure reducer, returns `[newState, effects[]]`
+3. **`connect(get, send, opts?)`** — returns parts objects with reactive props, ARIA attributes, and event handlers. Spread parts onto your elements: `div({ ...parts.root }, [...])`
+4. **Overlay helpers** (dialog, popover, menu, etc.) — `overlay()` wires up portals, focus traps, dismiss layers, and positioning
+
+### Composition with `sliceHandler`
+
+```typescript
+import { mergeHandlers, sliceHandler } from '@llui/dom'
+
+const update = mergeHandlers<State, Msg, never>(
+  sliceHandler({
+    get: (s) => s.tabs,
+    set: (s, v) => ({ ...s, tabs: v }),
+    narrow: (m) => (m.type === 'tabs' ? m.msg : null),
+    sub: tabs.update,
+  }),
+  // ... more slices
+)
+```
+
+## Components (54)
+
+### Form controls
+
+accordion, checkbox, collapsible, editable, number-input, password-input, pin-input, radio-group, rating-group, slider, switch, tabs, tags-input, toggle, toggle-group
+
+### Overlays
+
+alert-dialog, combobox, context-menu, dialog, drawer, hover-card, menu, navigation-menu, popover, select, toast, tooltip, tour
+
+### Data display
+
+async-list, avatar, carousel, cascade-select, listbox, pagination, progress, qr-code, scroll-area, steps, toc, tree-view
+
+### Pickers
+
+color-picker, date-input, date-picker, time-picker, angle-slider
+
+### Media / canvas
+
+file-upload, floating-panel, image-cropper, marquee, presence, signature-pad, timer
+
+### Patterns
+
+`@llui/components/patterns/confirm-dialog` — pre-wired alert-dialog for destructive confirmations.
+
+## Utilities
+
+Shared helpers used internally and exported for advanced use:
+
+| Utility          | Purpose                                                                  |
+| ---------------- | ------------------------------------------------------------------------ |
+| `typeahead`      | First-letter search across menu, select, listbox, tree-view              |
+| `TreeCollection` | Indexed tree traversal — visibleItems, labels, indeterminate computation |
+| `floating`       | `@floating-ui/dom` wrapper for popover/menu positioning                  |
+| `focus-trap`     | Stack-based focus containment for modals                                 |
+| `dismissable`    | Esc / outside-click dismiss layer stack                                  |
+| `aria-hidden`    | `aria-hidden` on siblings of a modal for screen readers                  |
+| `remove-scroll`  | Body scroll lock for modals/drawers                                      |
+
+## Sub-path imports
+
+Every component has its own entry point for tree-shaking:
+
+```typescript
+import { tabs } from '@llui/components/tabs'
+import { dialog } from '@llui/components/dialog'
+import { timer } from '@llui/components/timer'
+```
+
+## Validation
+
+Input components accept an optional `validate` callback on `ConnectOptions` that gates state changes:
+
+```typescript
+const parts = editable.connect<S>(get, send, {
+  validate: (value) => {
+    if (value.length < 3) return ['Too short']
+    return null // valid
+  },
+})
+```
+
+Supported on: editable, number-input, tags-input, pin-input, file-upload.
+
+## License
+
+MIT

package/dist/components/accordion.d.ts

@@ -0,0 +1,115 @@
+import type { Send } from '@llui/dom';
+/**
+ * Accordion — a stack of expandable panels. Items are identified by a string
+ * value. Either a single item is expandable at a time (default) or many
+ * (`multiple: true`). `collapsible: false` prevents closing the only open
+ * item in single mode.
+ *
+ * Items themselves are provided by the user's view (accordion is agnostic to
+ * item data). The `connect()` API returns a `root` prop set and an `item(value)`
+ * factory that produces `trigger` and `content` prop sets scoped to that item.
+ */
+export interface AccordionState {
+    /** Values of currently-expanded items. */
+    value: string[];
+    multiple: boolean;
+    collapsible: boolean;
+    disabled: boolean;
+    /** Ordered list of item values (for keyboard navigation). */
+    items: string[];
+}
+export type AccordionMsg = {
+    type: 'toggle';
+    value: string;
+} | {
+    type: 'open';
+    value: string;
+} | {
+    type: 'close';
+    value: string;
+} | {
+    type: 'setValue';
+    value: string[];
+} | {
+    type: 'setItems';
+    items: string[];
+} | {
+    type: 'focusNext';
+    value: string;
+} | {
+    type: 'focusPrev';
+    value: string;
+} | {
+    type: 'focusFirst';
+} | {
+    type: 'focusLast';
+};
+export interface AccordionInit {
+    value?: string[];
+    multiple?: boolean;
+    collapsible?: boolean;
+    disabled?: boolean;
+    items?: string[];
+}
+export declare function init(opts?: AccordionInit): AccordionState;
+export declare function update(state: AccordionState, msg: AccordionMsg): [AccordionState, never[]];
+export interface AccordionItemParts<S> {
+    trigger: {
+        type: 'button';
+        'aria-expanded': (s: S) => boolean;
+        'aria-controls': string;
+        id: string;
+        'data-state': (s: S) => 'open' | 'closed';
+        'data-disabled': (s: S) => '' | undefined;
+        disabled: (s: S) => boolean;
+        'data-scope': 'accordion';
+        'data-part': 'trigger';
+        'data-value': string;
+        onClick: (e: MouseEvent) => void;
+        onKeyDown: (e: KeyboardEvent) => void;
+    };
+    content: {
+        role: 'region';
+        id: string;
+        'aria-labelledby': string;
+        'data-state': (s: S) => 'open' | 'closed';
+        'data-scope': 'accordion';
+        'data-part': 'content';
+        hidden: (s: S) => boolean;
+    };
+    item: {
+        'data-state': (s: S) => 'open' | 'closed';
+        'data-disabled': (s: S) => '' | undefined;
+        'data-scope': 'accordion';
+        'data-part': 'item';
+        'data-value': string;
+    };
+}
+export interface AccordionParts<S> {
+    root: {
+        role: 'region';
+        'data-scope': 'accordion';
+        'data-part': 'root';
+        'data-orientation': 'vertical';
+    };
+    item: (value: string) => AccordionItemParts<S>;
+}
+export interface ConnectOptions {
+    /** Namespace prefix for part ids (for ARIA wiring). Should be unique per instance. */
+    id: string;
+}
+export declare function connect<S>(get: (s: S) => AccordionState, send: Send<AccordionMsg>, opts: ConnectOptions): AccordionParts<S>;
+/**
+ * Helper: compute the next/prev item value given a focus message + current state.
+ * Users' view/onMount can use this to move DOM focus to the correct trigger.
+ */
+export declare function focusTarget(state: AccordionState, msg: Extract<AccordionMsg, {
+    type: `focus${string}`;
+}>): string | null;
+export declare const accordion: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    focusTarget: typeof focusTarget;
+};
+//# sourceMappingURL=accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/components/accordion.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAErC;;;;;;;;;GASG;AAEH,MAAM,WAAW,cAAc;IAC7B,0CAA0C;IAC1C,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,OAAO,CAAA;IACjB,6DAA6D;IAC7D,KAAK,EAAE,MAAM,EAAE,CAAA;CAChB;AAED,MAAM,MAAM,YAAY,GACpB;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GACjC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAC/B;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAChC;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,MAAM,EAAE,CAAA;CAAE,GACrC;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,MAAM,EAAE,CAAA;CAAE,GACrC;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GACpC;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GACpC;IAAE,IAAI,EAAE,YAAY,CAAA;CAAE,GACtB;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,CAAA;AAEzB,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;CACjB;AAED,wBAAgB,IAAI,CAAC,IAAI,GAAE,aAAkB,GAAG,cAAc,CAQ7D;AAcD,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,YAAY,GAAG,CAAC,cAAc,EAAE,KAAK,EAAE,CAAC,CAuB1F;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC;IACnC,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ,CAAA;QACd,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;QAClC,eAAe,EAAE,MAAM,CAAA;QACvB,EAAE,EAAE,MAAM,CAAA;QACV,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,GAAG,QAAQ,CAAA;QACzC,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,SAAS,CAAA;QACzC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;QAC3B,YAAY,EAAE,WAAW,CAAA;QACzB,WAAW,EAAE,SAAS,CAAA;QACtB,YAAY,EAAE,MAAM,CAAA;QACpB,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;QAChC,SAAS,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAA;KACtC,CAAA;IACD,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ,CAAA;QACd,EAAE,EAAE,MAAM,CAAA;QACV,iBAAiB,EAAE,MAAM,CAAA;QACzB,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,GAAG,QAAQ,CAAA;QACzC,YAAY,EAAE,WAAW,CAAA;QACzB,WAAW,EAAE,SAAS,CAAA;QACtB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;KAC1B,CAAA;IACD,IAAI,EAAE;QACJ,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,GAAG,QAAQ,CAAA;QACzC,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,SAAS,CAAA;QACzC,YAAY,EAAE,WAAW,CAAA;QACzB,WAAW,EAAE,MAAM,CAAA;QACnB,YAAY,EAAE,MAAM,CAAA;KACrB,CAAA;CACF;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ,CAAA;QACd,YAAY,EAAE,WAAW,CAAA;QACzB,WAAW,EAAE,MAAM,CAAA;QACnB,kBAAkB,EAAE,UAAU,CAAA;KAC/B,CAAA;IACD,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,kBAAkB,CAAC,CAAC,CAAC,CAAA;CAC/C;AAED,MAAM,WAAW,cAAc;IAC7B,sFAAsF;IACtF,EAAE,EAAE,MAAM,CAAA;CACX;AAED,wBAAgB,OAAO,CAAC,CAAC,EACvB,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,cAAc,EAC7B,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,EACxB,IAAI,EAAE,cAAc,GACnB,cAAc,CAAC,CAAC,CAAC,CAqEnB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CACzB,KAAK,EAAE,cAAc,EACrB,GAAG,EAAE,OAAO,CAAC,YAAY,EAAE;IAAE,IAAI,EAAE,QAAQ,MAAM,EAAE,CAAA;CAAE,CAAC,GACrD,MAAM,GAAG,IAAI,CAUf;AAED,eAAO,MAAM,SAAS;;;;;CAAyC,CAAA"}

package/dist/components/accordion.js

@@ -0,0 +1,138 @@
+export function init(opts = {}) {
+    return {
+        value: opts.value ?? [],
+        multiple: opts.multiple ?? false,
+        collapsible: opts.collapsible ?? true,
+        disabled: opts.disabled ?? false,
+        items: opts.items ?? [],
+    };
+}
+function toggleValue(state, value) {
+    const isOpen = state.value.includes(value);
+    if (state.multiple) {
+        return isOpen ? state.value.filter((v) => v !== value) : [...state.value, value];
+    }
+    // single mode
+    if (isOpen) {
+        return state.collapsible ? [] : state.value;
+    }
+    return [value];
+}
+export function update(state, msg) {
+    if (state.disabled)
+        return [state, []];
+    switch (msg.type) {
+        case 'toggle':
+            return [{ ...state, value: toggleValue(state, msg.value) }, []];
+        case 'open':
+            if (state.value.includes(msg.value))
+                return [state, []];
+            return [{ ...state, value: state.multiple ? [...state.value, msg.value] : [msg.value] }, []];
+        case 'close':
+            if (!state.value.includes(msg.value))
+                return [state, []];
+            if (!state.multiple && !state.collapsible)
+                return [state, []];
+            return [{ ...state, value: state.value.filter((v) => v !== msg.value) }, []];
+        case 'setValue':
+            return [{ ...state, value: msg.value }, []];
+        case 'setItems':
+            return [{ ...state, items: msg.items }, []];
+        // Focus messages don't mutate state but are emitted so user handlers can respond.
+        case 'focusNext':
+        case 'focusPrev':
+        case 'focusFirst':
+        case 'focusLast':
+            return [state, []];
+    }
+}
+export function connect(get, send, opts) {
+    const base = opts.id;
+    const triggerId = (v) => `${base}:trigger:${v}`;
+    const contentId = (v) => `${base}:content:${v}`;
+    return {
+        root: {
+            role: 'region',
+            'data-scope': 'accordion',
+            'data-part': 'root',
+            'data-orientation': 'vertical',
+        },
+        item: (value) => ({
+            trigger: {
+                type: 'button',
+                'aria-expanded': (s) => get(s).value.includes(value),
+                'aria-controls': contentId(value),
+                id: triggerId(value),
+                'data-state': (s) => (get(s).value.includes(value) ? 'open' : 'closed'),
+                'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+                disabled: (s) => get(s).disabled,
+                'data-scope': 'accordion',
+                'data-part': 'trigger',
+                'data-value': value,
+                onClick: () => send({ type: 'toggle', value }),
+                onKeyDown: (e) => {
+                    switch (e.key) {
+                        case 'ArrowDown':
+                            e.preventDefault();
+                            send({ type: 'focusNext', value });
+                            return;
+                        case 'ArrowUp':
+                            e.preventDefault();
+                            send({ type: 'focusPrev', value });
+                            return;
+                        case 'Home':
+                            e.preventDefault();
+                            send({ type: 'focusFirst' });
+                            return;
+                        case 'End':
+                            e.preventDefault();
+                            send({ type: 'focusLast' });
+                            return;
+                        case ' ':
+                        case 'Enter':
+                            e.preventDefault();
+                            send({ type: 'toggle', value });
+                            return;
+                    }
+                },
+            },
+            content: {
+                role: 'region',
+                id: contentId(value),
+                'aria-labelledby': triggerId(value),
+                'data-state': (s) => (get(s).value.includes(value) ? 'open' : 'closed'),
+                'data-scope': 'accordion',
+                'data-part': 'content',
+                hidden: (s) => !get(s).value.includes(value),
+            },
+            item: {
+                'data-state': (s) => (get(s).value.includes(value) ? 'open' : 'closed'),
+                'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+                'data-scope': 'accordion',
+                'data-part': 'item',
+                'data-value': value,
+            },
+        }),
+    };
+}
+/**
+ * Helper: compute the next/prev item value given a focus message + current state.
+ * Users' view/onMount can use this to move DOM focus to the correct trigger.
+ */
+export function focusTarget(state, msg) {
+    const items = state.items;
+    if (items.length === 0)
+        return null;
+    if (msg.type === 'focusFirst')
+        return items[0];
+    if (msg.type === 'focusLast')
+        return items[items.length - 1];
+    const idx = items.indexOf(msg.value);
+    if (idx === -1)
+        return null;
+    if (msg.type === 'focusNext')
+        return items[(idx + 1) % items.length];
+    // focusPrev
+    return items[(idx - 1 + items.length) % items.length];
+}
+export const accordion = { init, update, connect, focusTarget };

package/dist/components/alert-dialog.d.ts

@@ -0,0 +1,45 @@
+import type { Send, TransitionOptions } from '@llui/dom';
+import { init, update, type DialogState, type DialogMsg, type DialogParts, type ConnectOptions as DialogConnectOptions } from './dialog';
+/**
+ * Alert dialog — a variant of dialog for destructive confirmations or
+ * blocking messages. Uses `role="alertdialog"` and defaults to:
+ *   - `closeOnOutsideClick: false` (user must choose an action explicitly)
+ *
+ * Shares state, messages, and part structure with `dialog`. Render a
+ * `cancelTrigger` alongside the `closeTrigger` and let the application
+ * dispatch a follow-up action after the dialog closes.
+ */
+export type { DialogState as AlertDialogState, DialogMsg as AlertDialogMsg };
+export { init, update };
+export interface AlertDialogConnectOptions extends Omit<DialogConnectOptions, 'role'> {
+    /** Accessible label for the cancel button (default: 'Cancel'). */
+    cancelLabel?: string;
+    /** Accessible label for the confirm button (default: 'Confirm'). */
+    confirmLabel?: string;
+}
+export type AlertDialogParts<S> = DialogParts<S>;
+export declare function connect<S>(get: (s: S) => DialogState, send: Send<DialogMsg>, opts: AlertDialogConnectOptions): AlertDialogParts<S>;
+export interface AlertDialogOverlayOptions<S> {
+    get: (s: S) => DialogState;
+    send: Send<DialogMsg>;
+    parts: AlertDialogParts<S>;
+    content: () => Node[];
+    transition?: TransitionOptions;
+    closeOnEscape?: boolean;
+    /** Whether outside-click should dismiss (default: false for alert dialogs). */
+    closeOnOutsideClick?: boolean;
+    trapFocus?: boolean;
+    lockScroll?: boolean;
+    hideSiblings?: boolean;
+    target?: string | HTMLElement;
+    initialFocus?: Element | (() => Element | null);
+    restoreFocus?: boolean;
+}
+export declare function overlay<S>(opts: AlertDialogOverlayOptions<S>): Node[];
+export declare const alertDialog: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    overlay: typeof overlay;
+};
+//# sourceMappingURL=alert-dialog.d.ts.map

package/dist/components/alert-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../src/components/alert-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AACxD,OAAO,EACL,IAAI,EACJ,MAAM,EAGN,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,cAAc,IAAI,oBAAoB,EAC5C,MAAM,UAAU,CAAA;AAEjB;;;;;;;;GAQG;AAEH,YAAY,EAAE,WAAW,IAAI,gBAAgB,EAAE,SAAS,IAAI,cAAc,EAAE,CAAA;AAE5E,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAA;AAEvB,MAAM,WAAW,yBAA0B,SAAQ,IAAI,CAAC,oBAAoB,EAAE,MAAM,CAAC;IACnF,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,CAAA;AAEhD,wBAAgB,OAAO,CAAC,CAAC,EACvB,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,WAAW,EAC1B,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,EACrB,IAAI,EAAE,yBAAyB,GAC9B,gBAAgB,CAAC,CAAC,CAAC,CAErB;AAED,MAAM,WAAW,yBAAyB,CAAC,CAAC;IAC1C,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,WAAW,CAAA;IAC1B,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAA;IACrB,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAA;IAC1B,OAAO,EAAE,MAAM,IAAI,EAAE,CAAA;IACrB,UAAU,CAAC,EAAE,iBAAiB,CAAA;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,+EAA+E;IAC/E,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAAA;IAC7B,YAAY,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,CAAA;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,wBAAgB,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,yBAAyB,CAAC,CAAC,CAAC,GAAG,IAAI,EAAE,CAKrE;AAED,eAAO,MAAM,WAAW;;;;;CAAqC,CAAA"}

package/dist/components/alert-dialog.js

@@ -0,0 +1,12 @@
+import { init, update, connect as dialogConnect, overlay as dialogOverlay, } from './dialog';
+export { init, update };
+export function connect(get, send, opts) {
+    return dialogConnect(get, send, { ...opts, role: 'alertdialog' });
+}
+export function overlay(opts) {
+    return dialogOverlay({
+        ...opts,
+        closeOnOutsideClick: opts.closeOnOutsideClick ?? false,
+    });
+}
+export const alertDialog = { init, update, connect, overlay };

package/dist/components/angle-slider.d.ts

@@ -0,0 +1,121 @@
+import type { Send } from '@llui/dom';
+/**
+ * Angle slider — a circular input that selects a value in 0..360 degrees
+ * by dragging a thumb around a control. The state machine tracks the
+ * current angle; the view layer computes angles from pointer positions
+ * (helpers exported for that purpose).
+ *
+ * Typical view wiring: on pointerdown/pointermove, read the control
+ * element's bounding rect, compute the angle from `(pointerX, pointerY)`
+ * to the rect center via `angleFromPoint()`, and dispatch `setValue`.
+ *
+ * Keyboard: Arrow keys adjust by `step`; Home/End jump to min/max;
+ * PageUp/PageDown adjust by `step * 10`.
+ */
+export interface AngleSliderState {
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    disabled: boolean;
+    readOnly: boolean;
+}
+export type AngleSliderMsg = {
+    type: 'setValue';
+    value: number;
+} | {
+    type: 'increment';
+    steps?: number;
+} | {
+    type: 'decrement';
+    steps?: number;
+} | {
+    type: 'setMin';
+    min: number;
+} | {
+    type: 'setMax';
+    max: number;
+};
+export interface AngleSliderInit {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+}
+export declare function init(opts?: AngleSliderInit): AngleSliderState;
+export declare function update(state: AngleSliderState, msg: AngleSliderMsg): [AngleSliderState, never[]];
+/**
+ * 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 declare function angleFromPoint(rect: DOMRect, x: number, y: number): number;
+/** Convert an angle to (x, y) on a unit circle (radius 1 at origin). */
+export declare function pointFromAngle(angleDeg: number): {
+    x: number;
+    y: number;
+};
+export interface AngleSliderParts<S> {
+    root: {
+        role: 'slider';
+        'aria-valuemin': (s: S) => number;
+        'aria-valuemax': (s: S) => number;
+        'aria-valuenow': (s: S) => number;
+        'aria-valuetext': (s: S) => string;
+        'aria-orientation': 'horizontal';
+        'aria-disabled': (s: S) => 'true' | undefined;
+        'aria-readonly': (s: S) => 'true' | undefined;
+        tabIndex: (s: S) => number;
+        'data-scope': 'angle-slider';
+        'data-part': 'root';
+        'data-disabled': (s: S) => '' | undefined;
+        onKeyDown: (e: KeyboardEvent) => void;
+    };
+    control: {
+        'data-scope': 'angle-slider';
+        'data-part': 'control';
+    };
+    /**
+     * The draggable thumb element. Its position is typically computed via
+     * CSS custom properties `--angle` (0..360) that the consumer sets from
+     * `state.value` using pointFromAngle() or a CSS `transform: rotate()`.
+     */
+    thumb: {
+        'data-scope': 'angle-slider';
+        'data-part': 'thumb';
+        'data-value': (s: S) => string;
+    };
+    valueText: {
+        'data-scope': 'angle-slider';
+        'data-part': 'value-text';
+    };
+    /** A hidden input for form participation. */
+    hiddenInput: {
+        type: 'hidden';
+        value: (s: S) => string;
+        name?: string;
+        'data-scope': 'angle-slider';
+        'data-part': 'hidden-input';
+    };
+}
+export interface ConnectOptions {
+    /** Name for the hidden input (form integration). */
+    name?: string;
+    /** Formatter for aria-valuetext (default: "{value}°"). */
+    format?: (value: number) => string;
+}
+export declare function connect<S>(get: (s: S) => AngleSliderState, send: Send<AngleSliderMsg>, opts?: ConnectOptions): AngleSliderParts<S>;
+export declare const angleSlider: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    angleFromPoint: typeof angleFromPoint;
+    pointFromAngle: typeof pointFromAngle;
+};
+//# sourceMappingURL=angle-slider.d.ts.map

package/dist/components/angle-slider.d.ts.map

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