@openchamber/sdk 1.23.2-preview.1

package/dist/ui/dom.d.ts

@@ -0,0 +1,15 @@
+/** Every mount returns this. `update` merges props and repaints; `dispose` removes the node and every listener. */
+export type Handle<P> = {
+    update: (next: Partial<P>) => void;
+    dispose: () => void;
+};
+export declare const clearNode: (node: Element) => void;
+export declare const ensureStyle: (css: string) => void;
+export declare const el: <K extends keyof HTMLElementTagNameMap>(tag: K, className?: string) => HTMLElementTagNameMap[K];
+export declare const button: (className: string) => HTMLButtonElement;
+/** Writes text only when it changed so a repaint does not disturb selection or layout. */
+export declare const setText: (node: Element, text: string | null | undefined) => void;
+/** Sets or removes an attribute depending on whether a value is present. */
+export declare const setAttr: (node: Element, name: string, value: string | null | undefined) => void;
+/** Runs `handler` on a pointer press outside `node`. Returns the disposer. */
+export declare const onOutsideClick: (node: Element, handler: () => void) => (() => void);

package/dist/ui/dom.js

@@ -0,0 +1,60 @@
+const STYLE_ID = 'oc-sdk-ui-style';
+export const clearNode = (node) => {
+    while (node.firstChild) {
+        node.removeChild(node.firstChild);
+    }
+};
+export const ensureStyle = (css) => {
+    const existing = document.getElementById(STYLE_ID);
+    if (existing instanceof HTMLStyleElement) {
+        if (existing.textContent !== css) {
+            existing.textContent = css;
+        }
+        return;
+    }
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = css;
+    document.head.appendChild(style);
+};
+export const el = (tag, className) => {
+    const node = document.createElement(tag);
+    if (className) {
+        node.className = className;
+    }
+    return node;
+};
+export const button = (className) => {
+    const node = el('button', className);
+    node.type = 'button';
+    return node;
+};
+/** Writes text only when it changed so a repaint does not disturb selection or layout. */
+export const setText = (node, text) => {
+    const next = text ?? '';
+    if (node.textContent !== next) {
+        node.textContent = next;
+    }
+};
+/** Sets or removes an attribute depending on whether a value is present. */
+export const setAttr = (node, name, value) => {
+    if (value === undefined || value === null || value === '') {
+        node.removeAttribute(name);
+    }
+    else if (node.getAttribute(name) !== value) {
+        node.setAttribute(name, value);
+    }
+};
+/** Runs `handler` on a pointer press outside `node`. Returns the disposer. */
+export const onOutsideClick = (node, handler) => {
+    const listener = (event) => {
+        if (event.target instanceof Node && node.contains(event.target)) {
+            return;
+        }
+        handler();
+    };
+    document.addEventListener('pointerdown', listener, true);
+    return () => {
+        document.removeEventListener('pointerdown', listener, true);
+    };
+};

package/dist/ui/empty.d.ts

@@ -0,0 +1,11 @@
+import { type Handle } from './dom.ts';
+export type EmptyProps = {
+    title: string;
+    body?: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+};
+export type EmptyHandle = Handle<EmptyProps>;
+export declare const mountEmpty: (root: Element, initial: EmptyProps) => EmptyHandle;

package/dist/ui/empty.js

@@ -0,0 +1,44 @@
+import { mountButton } from "./button.js";
+import { el, ensureStyle, setText } from "./dom.js";
+import { UI_CSS } from "./style.js";
+export const mountEmpty = (root, initial) => {
+    ensureStyle(UI_CSS);
+    let props = initial;
+    const shell = el('div', 'oc-sdk oc-sdk-empty');
+    const title = el('h2', 'oc-sdk-empty-title');
+    const body = el('p', 'oc-sdk-empty-body');
+    const slot = el('div', 'oc-sdk-empty-action');
+    shell.append(title, body, slot);
+    root.append(shell);
+    let action = null;
+    const paint = () => {
+        setText(title, props.title);
+        setText(body, props.body);
+        body.hidden = !props.body;
+        slot.hidden = !props.action;
+        if (!props.action) {
+            action?.dispose();
+            action = null;
+            return;
+        }
+        const next = { label: props.action.label, onClick: props.action.onClick };
+        if (action) {
+            action.update(next);
+        }
+        else {
+            action = mountButton(slot, { ...next, variant: 'outline', size: 'sm' });
+        }
+    };
+    paint();
+    return {
+        update: (next) => {
+            props = { ...props, ...next };
+            paint();
+        },
+        dispose: () => {
+            action?.dispose();
+            action = null;
+            shell.remove();
+        },
+    };
+};

package/dist/ui/field.d.ts

@@ -0,0 +1,18 @@
+import { type Handle } from './dom.ts';
+export type TextFieldProps = {
+    label?: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    password?: boolean;
+    multiline?: boolean;
+    rows?: number;
+    disabled?: boolean;
+    /** Error text. Turns the ring red and replaces `helper`. */
+    error?: string;
+    helper?: string;
+    /** Monospace input, for tokens and identifiers. */
+    mono?: boolean;
+};
+export type TextFieldHandle = Handle<TextFieldProps>;
+export declare const mountTextField: (root: Element, initial: TextFieldProps) => TextFieldHandle;

package/dist/ui/field.js

@@ -0,0 +1,49 @@
+import { el, ensureStyle, setAttr, setText } from "./dom.js";
+import { UI_CSS } from "./style.js";
+export const mountTextField = (root, initial) => {
+    ensureStyle(UI_CSS);
+    let props = initial;
+    const field = el('label', 'oc-sdk oc-sdk-field');
+    const caption = el('span', 'oc-sdk-field-label');
+    const input = props.multiline ? el('textarea', 'oc-sdk-input') : el('input', 'oc-sdk-input');
+    const note = el('span', 'oc-sdk-field-note');
+    field.append(caption, input, note);
+    root.append(field);
+    const paint = () => {
+        setText(caption, props.label);
+        caption.hidden = !props.label;
+        if (input instanceof HTMLInputElement) {
+            input.type = props.password ? 'password' : 'text';
+        }
+        else {
+            input.rows = props.rows ?? 3;
+        }
+        if (input.value !== props.value) {
+            input.value = props.value;
+        }
+        input.disabled = Boolean(props.disabled);
+        setAttr(input, 'placeholder', props.placeholder);
+        input.dataset.mono = props.mono ? 'true' : 'false';
+        const invalid = Boolean(props.error);
+        field.dataset.invalid = invalid ? 'true' : 'false';
+        input.setAttribute('aria-invalid', invalid ? 'true' : 'false');
+        const text = props.error ?? props.helper ?? '';
+        setText(note, text);
+        note.hidden = text === '';
+    };
+    const onInput = () => {
+        props.onChange(input.value);
+    };
+    input.addEventListener('input', onInput);
+    paint();
+    return {
+        update: (next) => {
+            props = { ...props, ...next };
+            paint();
+        },
+        dispose: () => {
+            input.removeEventListener('input', onInput);
+            field.remove();
+        },
+    };
+};

package/dist/ui/icons.d.ts

@@ -0,0 +1,10 @@
+/** Remixicon outlines. Add a shape only when a primitive paints it. */
+declare const ICON_PATH: {
+    readonly search: "M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z";
+    readonly chevron: "M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z";
+    readonly check: "M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z";
+    readonly close: "M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z";
+};
+type IconName = keyof typeof ICON_PATH;
+export declare const icon: (name: IconName, size: number, className?: string) => SVGSVGElement;
+export {};

package/dist/ui/icons.js

@@ -0,0 +1,23 @@
+const SVG_NS = 'http://www.w3.org/2000/svg';
+/** Remixicon outlines. Add a shape only when a primitive paints it. */
+const ICON_PATH = {
+    search: 'M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z',
+    chevron: 'M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z',
+    check: 'M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z',
+    close: 'M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z',
+};
+export const icon = (name, size, className) => {
+    const node = document.createElementNS(SVG_NS, 'svg');
+    node.setAttribute('viewBox', '0 0 24 24');
+    node.setAttribute('width', String(size));
+    node.setAttribute('height', String(size));
+    node.setAttribute('aria-hidden', 'true');
+    node.setAttribute('fill', 'currentColor');
+    if (className) {
+        node.setAttribute('class', className);
+    }
+    const path = document.createElementNS(SVG_NS, 'path');
+    path.setAttribute('d', ICON_PATH[name]);
+    node.append(path);
+    return node;
+};

package/dist/ui/index.d.ts

@@ -0,0 +1,35 @@
+export { applyHostReady, applyHostTheme } from './theme.ts';
+export type { ThemeRoot } from './theme.ts';
+export type { Handle } from './dom.ts';
+export { mountButton } from './button.ts';
+export type { ButtonHandle, ButtonProps, ButtonSize, ButtonVariant } from './button.ts';
+export { mountTextField } from './field.ts';
+export type { TextFieldHandle, TextFieldProps } from './field.ts';
+export { mountSearchField } from './search.ts';
+export type { SearchFieldHandle, SearchFieldProps } from './search.ts';
+export { filterSelectOptions, mountSelect } from './select.ts';
+export type { SelectHandle, SelectOption, SelectProps } from './select.ts';
+export { mountCheckbox, mountSwitch } from './checkbox.ts';
+export type { CheckboxHandle, CheckboxProps } from './checkbox.ts';
+export { mountTabs } from './tabs.ts';
+export type { TabItem, TabsHandle, TabsProps } from './tabs.ts';
+export { mountBadge } from './badge.ts';
+export type { BadgeHandle, BadgeProps, Tone } from './badge.ts';
+export { mountList } from './list.ts';
+export type { ListHandle, ListItem, ListProps } from './list.ts';
+export { moveListSelection, navigationKey } from './navigation.ts';
+export type { NavigableItem, NavigationKey } from './navigation.ts';
+export { mountEmpty } from './empty.ts';
+export type { EmptyHandle, EmptyProps } from './empty.ts';
+export { mountSpinner } from './spinner.ts';
+export type { SpinnerHandle, SpinnerProps } from './spinner.ts';
+export { mountBanner } from './banner.ts';
+export type { BannerHandle, BannerProps, BannerTone } from './banner.ts';
+export { mountSeparator } from './separator.ts';
+export type { SeparatorHandle, SeparatorProps } from './separator.ts';
+export { mountProgress } from './progress.ts';
+export type { ProgressHandle, ProgressProps } from './progress.ts';
+export { mountMenu } from './menu.ts';
+export type { MenuHandle, MenuItem, MenuProps } from './menu.ts';
+export { mountText, splitTextMedia } from './text.ts';
+export type { TextHandle, TextPart, TextProps } from './text.ts';

package/dist/ui/index.js

@@ -0,0 +1,17 @@
+export { applyHostReady, applyHostTheme } from "./theme.js";
+export { mountButton } from "./button.js";
+export { mountTextField } from "./field.js";
+export { mountSearchField } from "./search.js";
+export { filterSelectOptions, mountSelect } from "./select.js";
+export { mountCheckbox, mountSwitch } from "./checkbox.js";
+export { mountTabs } from "./tabs.js";
+export { mountBadge } from "./badge.js";
+export { mountList } from "./list.js";
+export { moveListSelection, navigationKey } from "./navigation.js";
+export { mountEmpty } from "./empty.js";
+export { mountSpinner } from "./spinner.js";
+export { mountBanner } from "./banner.js";
+export { mountSeparator } from "./separator.js";
+export { mountProgress } from "./progress.js";
+export { mountMenu } from "./menu.js";
+export { mountText, splitTextMedia } from "./text.js";

package/dist/ui/list.d.ts

@@ -0,0 +1,26 @@
+import { type Tone } from './badge.ts';
+import { type Handle } from './dom.ts';
+export type ListItem = {
+    id: string;
+    title: string;
+    /** Micro muted line under the title. */
+    subtitle?: string;
+    /** Fixed-width mono text before the title, like an issue key. */
+    leading?: string;
+    /** Muted tabular text at the right, like a date or count. */
+    meta?: string;
+    badge?: {
+        label: string;
+        tone?: Tone;
+    };
+    disabled?: boolean;
+};
+export type ListProps = {
+    items: ListItem[];
+    selectedId?: string | null;
+    onSelect: (id: string) => void;
+    emptyText?: string;
+    ariaLabel?: string;
+};
+export type ListHandle = Handle<ListProps>;
+export declare const mountList: (root: Element, initial: ListProps) => ListHandle;

package/dist/ui/list.js

@@ -0,0 +1,90 @@
+import { applyTone } from "./badge.js";
+import { button, clearNode, el, ensureStyle, setAttr } from "./dom.js";
+import { moveListSelection, navigationKey } from "./navigation.js";
+import { UI_CSS } from "./style.js";
+let listCount = 0;
+export const mountList = (root, initial) => {
+    ensureStyle(UI_CSS);
+    let props = initial;
+    const uid = `oc-sdk-list-${listCount += 1}`;
+    const list = el('div', 'oc-sdk oc-sdk-list');
+    list.setAttribute('role', 'listbox');
+    list.tabIndex = 0;
+    root.append(list);
+    let activeId = null;
+    const rowId = (id) => `${uid}-${id}`;
+    const setActive = (id) => {
+        activeId = id;
+        for (const row of Array.from(list.children)) {
+            if (row instanceof HTMLElement) {
+                row.dataset.active = row.id === rowId(id ?? '') ? 'true' : 'false';
+            }
+        }
+        setAttr(list, 'aria-activedescendant', id ? rowId(id) : null);
+        list.querySelector('[data-active="true"]')?.scrollIntoView({ block: 'nearest' });
+    };
+    const span = (className, text) => {
+        const node = el('span', className);
+        node.textContent = text;
+        return node;
+    };
+    const paint = () => {
+        clearNode(list);
+        setAttr(list, 'aria-label', props.ariaLabel);
+        if (props.items.length === 0) {
+            list.append(span('oc-sdk-list-empty', props.emptyText ?? 'Nothing here'));
+            setActive(null);
+            return;
+        }
+        for (const item of props.items) {
+            const row = button('oc-sdk-row');
+            row.id = rowId(item.id);
+            row.setAttribute('role', 'option');
+            row.setAttribute('aria-selected', item.id === props.selectedId ? 'true' : 'false');
+            row.disabled = Boolean(item.disabled);
+            row.tabIndex = -1;
+            if (item.leading)
+                row.append(span('oc-sdk-row-lead', item.leading));
+            const main = el('span', 'oc-sdk-row-main');
+            main.append(span('oc-sdk-row-title', item.title));
+            if (item.subtitle)
+                main.append(span('oc-sdk-row-sub', item.subtitle));
+            row.append(main);
+            if (item.badge) {
+                const badge = span('oc-sdk-badge', item.badge.label);
+                applyTone(badge, item.badge.tone);
+                row.append(badge);
+            }
+            if (item.meta)
+                row.append(span('oc-sdk-row-meta', item.meta));
+            row.addEventListener('click', () => props.onSelect(item.id));
+            list.append(row);
+        }
+        const stillThere = props.items.some((item) => item.id === activeId && !item.disabled);
+        setActive(stillThere ? activeId : props.selectedId ?? null);
+    };
+    const onKeyDown = (event) => {
+        const step = navigationKey(event);
+        if (step) {
+            event.preventDefault();
+            setActive(moveListSelection(props.items, activeId, step));
+            return;
+        }
+        if ((event.key === 'Enter' || event.key === ' ') && activeId) {
+            event.preventDefault();
+            props.onSelect(activeId);
+        }
+    };
+    list.addEventListener('keydown', onKeyDown);
+    paint();
+    return {
+        update: (next) => {
+            props = { ...props, ...next };
+            paint();
+        },
+        dispose: () => {
+            list.removeEventListener('keydown', onKeyDown);
+            list.remove();
+        },
+    };
+};

package/dist/ui/menu.d.ts

@@ -0,0 +1,20 @@
+import { type ButtonSize, type ButtonVariant } from './button.ts';
+import { type Handle } from './dom.ts';
+export type MenuItem = {
+    id: string;
+    label: string;
+    destructive?: boolean;
+    disabled?: boolean;
+} | {
+    separator: true;
+};
+export type MenuProps = {
+    /** Trigger button label. */
+    label: string;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    items: MenuItem[];
+    onSelect: (id: string) => void;
+};
+export type MenuHandle = Handle<MenuProps>;
+export declare const mountMenu: (root: Element, initial: MenuProps) => MenuHandle;

package/dist/ui/menu.js

@@ -0,0 +1,111 @@
+import { mountButton } from "./button.js";
+import { clearNode, el, ensureStyle } from "./dom.js";
+import { moveListSelection, navigationKey } from "./navigation.js";
+import { createOption, highlightOption } from "./option.js";
+import { openPopup } from "./popup.js";
+import { UI_CSS } from "./style.js";
+const actions = (items) => (items.filter((item) => !('separator' in item)));
+let menuCount = 0;
+export const mountMenu = (root, initial) => {
+    ensureStyle(UI_CSS);
+    let props = initial;
+    const uid = `oc-sdk-menu-${menuCount += 1}`;
+    const wrap = el('div', 'oc-sdk oc-sdk-menu');
+    root.append(wrap);
+    const popup = el('div', 'oc-sdk oc-sdk-popup');
+    popup.setAttribute('role', 'menu');
+    popup.tabIndex = -1;
+    let closePopup = null;
+    let activeId = null;
+    const trigger = mountButton(wrap, {
+        label: props.label,
+        variant: props.variant,
+        size: props.size,
+        onClick: () => {
+            if (closePopup)
+                close();
+            else
+                open();
+        },
+    });
+    const triggerNode = wrap.querySelector('button');
+    triggerNode?.setAttribute('aria-haspopup', 'menu');
+    const setActive = (id) => {
+        activeId = id;
+        highlightOption(popup, popup, uid, id);
+    };
+    const paintItems = () => {
+        clearNode(popup);
+        for (const item of props.items) {
+            if ('separator' in item) {
+                const line = el('div', 'oc-sdk-separator');
+                line.dataset.labeled = 'false';
+                popup.append(line);
+                continue;
+            }
+            popup.append(createOption(uid, 'menuitem', item, {
+                hover: () => setActive(item.id),
+                pick: () => pick(item.id),
+            }));
+        }
+        setActive(actions(props.items).some((item) => item.id === activeId) ? activeId : null);
+    };
+    const close = () => {
+        closePopup?.();
+        closePopup = null;
+        activeId = null;
+        triggerNode?.setAttribute('aria-expanded', 'false');
+    };
+    const open = () => {
+        if (closePopup || !triggerNode) {
+            return;
+        }
+        paintItems();
+        closePopup = openPopup(wrap, triggerNode, popup, close);
+        triggerNode.setAttribute('aria-expanded', 'true');
+        popup.focus();
+    };
+    const pick = (id) => {
+        close();
+        triggerNode?.focus();
+        props.onSelect(id);
+    };
+    const onPopupKey = (event) => {
+        const step = navigationKey(event);
+        if (step) {
+            event.preventDefault();
+            setActive(moveListSelection(actions(props.items), activeId, step));
+        }
+        else if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            if (activeId)
+                pick(activeId);
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            close();
+            triggerNode?.focus();
+        }
+    };
+    const onFocusOut = (event) => {
+        if (closePopup && !(event.relatedTarget instanceof Node && wrap.contains(event.relatedTarget)))
+            close();
+    };
+    popup.addEventListener('keydown', onPopupKey);
+    wrap.addEventListener('focusout', onFocusOut);
+    return {
+        update: (next) => {
+            props = { ...props, ...next };
+            trigger.update({ label: props.label, variant: props.variant, size: props.size });
+            if (closePopup)
+                paintItems();
+        },
+        dispose: () => {
+            close();
+            popup.removeEventListener('keydown', onPopupKey);
+            wrap.removeEventListener('focusout', onFocusOut);
+            trigger.dispose();
+            wrap.remove();
+        },
+    };
+};

package/dist/ui/navigation.d.ts

@@ -0,0 +1,18 @@
+/** Pure keyboard navigation shared by list, select, menu, and tabs. No DOM here. */
+export type NavigableItem = {
+    id: string;
+    disabled?: boolean;
+};
+export type NavigationKey = 'next' | 'previous' | 'first' | 'last';
+type KeyLike = {
+    key: string;
+    ctrlKey: boolean;
+};
+/** Maps a keyboard event to a navigation step. Ctrl+N / Ctrl+P mirror the arrow keys, as in the host. */
+export declare const navigationKey: (event: KeyLike, axis?: "vertical" | "horizontal") => NavigationKey | null;
+/**
+ * Returns the id that `key` lands on from `currentId`, skipping disabled items and
+ * stopping at the edges. Returns `null` when nothing is enabled.
+ */
+export declare const moveListSelection: (items: readonly NavigableItem[], currentId: string | null, key: NavigationKey) => string | null;
+export {};

package/dist/ui/navigation.js

@@ -0,0 +1,38 @@
+/** Pure keyboard navigation shared by list, select, menu, and tabs. No DOM here. */
+/** Maps a keyboard event to a navigation step. Ctrl+N / Ctrl+P mirror the arrow keys, as in the host. */
+export const navigationKey = (event, axis = 'vertical') => {
+    const [next, previous] = axis === 'vertical' ? ['ArrowDown', 'ArrowUp'] : ['ArrowRight', 'ArrowLeft'];
+    if (event.key === next || (event.ctrlKey && event.key.toLowerCase() === 'n'))
+        return 'next';
+    if (event.key === previous || (event.ctrlKey && event.key.toLowerCase() === 'p'))
+        return 'previous';
+    if (event.key === 'Home')
+        return 'first';
+    if (event.key === 'End')
+        return 'last';
+    return null;
+};
+/**
+ * Returns the id that `key` lands on from `currentId`, skipping disabled items and
+ * stopping at the edges. Returns `null` when nothing is enabled.
+ */
+export const moveListSelection = (items, currentId, key) => {
+    const enabled = items.filter((item) => !item.disabled);
+    if (enabled.length === 0) {
+        return null;
+    }
+    const first = enabled[0];
+    const last = enabled[enabled.length - 1];
+    if (key === 'first' || !first || !last) {
+        return first?.id ?? null;
+    }
+    if (key === 'last') {
+        return last.id;
+    }
+    const index = enabled.findIndex((item) => item.id === currentId);
+    if (index === -1) {
+        return key === 'next' ? first.id : last.id;
+    }
+    const target = enabled[Math.min(enabled.length - 1, Math.max(0, index + (key === 'next' ? 1 : -1)))];
+    return target?.id ?? null;
+};

package/dist/ui/option.d.ts

@@ -0,0 +1,16 @@
+/** One popup row shared by select (`role="option"`) and menu (`role="menuitem"`). */
+type OptionSpec = {
+    id: string;
+    label: string;
+    hint?: string;
+    selected?: boolean;
+    destructive?: boolean;
+    disabled?: boolean;
+};
+export declare const createOption: (uid: string, role: "option" | "menuitem", spec: OptionSpec, on: {
+    hover: () => void;
+    pick: () => void;
+}) => HTMLButtonElement;
+/** Moves the `data-active` highlight and `aria-activedescendant`; scrolls the row into view. */
+export declare const highlightOption: (container: HTMLElement, focusOwner: HTMLElement, uid: string, id: string | null) => void;
+export {};

package/dist/ui/option.js

@@ -0,0 +1,35 @@
+import { button, el, setAttr } from "./dom.js";
+const optionId = (uid, id) => `${uid}-${id ?? ''}`;
+export const createOption = (uid, role, spec, on) => {
+    const node = button('oc-sdk-option');
+    node.id = optionId(uid, spec.id);
+    node.setAttribute('role', role);
+    node.tabIndex = -1;
+    node.disabled = Boolean(spec.disabled);
+    if (role === 'option') {
+        node.setAttribute('aria-selected', spec.selected ? 'true' : 'false');
+    }
+    node.dataset.destructive = spec.destructive ? 'true' : 'false';
+    const label = el('span', 'oc-sdk-option-label');
+    label.textContent = spec.label;
+    node.append(label);
+    if (spec.hint) {
+        const hint = el('span', 'oc-sdk-option-hint');
+        hint.textContent = spec.hint;
+        node.append(hint);
+    }
+    node.addEventListener('pointerenter', on.hover);
+    node.addEventListener('click', on.pick);
+    return node;
+};
+/** Moves the `data-active` highlight and `aria-activedescendant`; scrolls the row into view. */
+export const highlightOption = (container, focusOwner, uid, id) => {
+    const target = optionId(uid, id);
+    for (const child of Array.from(container.children)) {
+        if (child instanceof HTMLElement && child.classList.contains('oc-sdk-option')) {
+            child.dataset.active = child.id === target ? 'true' : 'false';
+        }
+    }
+    setAttr(focusOwner, 'aria-activedescendant', id ? target : null);
+    container.querySelector('[data-active="true"]')?.scrollIntoView({ block: 'nearest' });
+};

package/dist/ui/popup.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Attaches `popup` next to `trigger` and wires the ways it closes: outside press,
+ * viewport resize, or scroll. Returns the disposer; the caller decides what `close` does.
+ */
+export declare const openPopup: (host: Element, trigger: HTMLElement, popup: HTMLElement, close: () => void) => (() => void);