@chromvoid/headless-ui 0.1.0

package/dist/treeview/index.js

@@ -0,0 +1,370 @@
+import { action, atom } from '@reatom/core';
+import { selectOnly as selectOnlyPrimitive, toggleSelection } from '../core/selection.js';
+import { mapListboxKeyboardIntent } from '../interactions/keyboard-intents.js';
+const normalizeIds = (ids, allowedIds) => {
+    const deduped = [];
+    for (const id of ids) {
+        if (!allowedIds.has(id) || deduped.includes(id))
+            continue;
+        deduped.push(id);
+    }
+    return deduped;
+};
+const collectDescendants = (metaById, id) => {
+    const descendants = [];
+    const queue = [...(metaById.get(id)?.childIds ?? [])];
+    while (queue.length > 0) {
+        const current = queue.shift();
+        if (!current)
+            continue;
+        descendants.push(current);
+        const children = metaById.get(current)?.childIds ?? [];
+        queue.push(...children);
+    }
+    return descendants;
+};
+const buildTreeMeta = (nodes) => {
+    const metaById = new Map();
+    const rootIds = [];
+    const visit = (siblings, parentId, level) => {
+        const setSize = siblings.length;
+        siblings.forEach((node, index) => {
+            const childIds = (node.children ?? []).map((child) => child.id);
+            metaById.set(node.id, {
+                id: node.id,
+                parentId,
+                childIds,
+                level,
+                posInSet: index + 1,
+                setSize,
+                disabled: node.disabled === true,
+            });
+            if (parentId == null)
+                rootIds.push(node.id);
+            if ((node.children?.length ?? 0) > 0)
+                visit(node.children ?? [], node.id, level + 1);
+        });
+    };
+    visit(nodes, null, 1);
+    return { metaById, rootIds };
+};
+export function createTreeview(options) {
+    const idBase = options.idBase ?? 'tree';
+    const selectionMode = options.selectionMode ?? 'single';
+    const { metaById, rootIds } = buildTreeMeta(options.nodes);
+    const allIds = [...metaById.keys()];
+    const allIdSet = new Set(allIds);
+    const enabledIds = allIds.filter((id) => metaById.get(id)?.disabled !== true);
+    const enabledIdSet = new Set(enabledIds);
+    const isBranch = (id) => (metaById.get(id)?.childIds.length ?? 0) > 0;
+    const expandedIdsAtom = atom(normalizeIds(options.initialExpandedIds ?? [], allIdSet).filter((id) => isBranch(id)), `${idBase}.expandedIds`);
+    const activeIdAtom = atom(null, `${idBase}.activeId`);
+    const selectedIdsAtom = atom([], `${idBase}.selectedIds`);
+    const isVisible = (id, expandedSet) => {
+        let parentId = metaById.get(id)?.parentId ?? null;
+        while (parentId != null) {
+            if (!expandedSet.has(parentId)) {
+                return false;
+            }
+            parentId = metaById.get(parentId)?.parentId ?? null;
+        }
+        return true;
+    };
+    const getVisibleNodeIds = () => {
+        const expandedSet = new Set(expandedIdsAtom());
+        const visible = [];
+        const visit = (id) => {
+            if (!metaById.has(id))
+                return;
+            visible.push(id);
+            if (!expandedSet.has(id))
+                return;
+            const childIds = metaById.get(id)?.childIds ?? [];
+            for (const childId of childIds) {
+                visit(childId);
+            }
+        };
+        for (const rootId of rootIds) {
+            visit(rootId);
+        }
+        return visible;
+    };
+    const getVisibleEnabledNodeIds = () => getVisibleNodeIds().filter((id) => enabledIdSet.has(id));
+    const setActive = (id) => {
+        if (id == null) {
+            activeIdAtom.set(null);
+            return;
+        }
+        if (!enabledIdSet.has(id))
+            return;
+        const visibleIds = getVisibleEnabledNodeIds();
+        if (!visibleIds.includes(id))
+            return;
+        activeIdAtom.set(id);
+    };
+    const resolveInitialActive = () => {
+        if (options.initialActiveId != null && enabledIdSet.has(options.initialActiveId)) {
+            const visibleIds = getVisibleEnabledNodeIds();
+            if (visibleIds.includes(options.initialActiveId)) {
+                return options.initialActiveId;
+            }
+        }
+        return getVisibleEnabledNodeIds()[0] ?? null;
+    };
+    activeIdAtom.set(resolveInitialActive());
+    const initialSelectedIds = normalizeIds(options.initialSelectedIds ?? [], enabledIdSet);
+    selectedIdsAtom.set(selectionMode === 'single' ? initialSelectedIds.slice(0, 1) : initialSelectedIds);
+    const applySelectionFollowsFocus = (newActiveId) => {
+        if (selectionMode === 'single' && newActiveId != null && enabledIdSet.has(newActiveId)) {
+            selectedIdsAtom.set([newActiveId]);
+        }
+    };
+    const move = (direction) => {
+        const visibleEnabledIds = getVisibleEnabledNodeIds();
+        if (visibleEnabledIds.length === 0) {
+            activeIdAtom.set(null);
+            return;
+        }
+        const activeId = activeIdAtom();
+        if (activeId == null || !visibleEnabledIds.includes(activeId)) {
+            const newActiveId = visibleEnabledIds[0] ?? null;
+            activeIdAtom.set(newActiveId);
+            applySelectionFollowsFocus(newActiveId);
+            return;
+        }
+        const currentIndex = visibleEnabledIds.indexOf(activeId);
+        const nextIndex = (currentIndex + direction + visibleEnabledIds.length) % visibleEnabledIds.length;
+        const newActiveId = visibleEnabledIds[nextIndex] ?? null;
+        activeIdAtom.set(newActiveId);
+        applySelectionFollowsFocus(newActiveId);
+    };
+    const collapseWithInvariant = (id) => {
+        if (!isBranch(id))
+            return;
+        expandedIdsAtom.set(expandedIdsAtom().filter((item) => item !== id));
+        const activeId = activeIdAtom();
+        if (activeId == null || activeId === id)
+            return;
+        const descendants = collectDescendants(metaById, id);
+        if (descendants.includes(activeId)) {
+            activeIdAtom.set(enabledIdSet.has(id) ? id : (getVisibleEnabledNodeIds()[0] ?? null));
+        }
+    };
+    const setActiveAction = action((id) => {
+        setActive(id);
+    }, `${idBase}.setActive`);
+    const moveNext = action(() => {
+        move(1);
+    }, `${idBase}.moveNext`);
+    const movePrev = action(() => {
+        move(-1);
+    }, `${idBase}.movePrev`);
+    const moveFirst = action(() => {
+        const newActiveId = getVisibleEnabledNodeIds()[0] ?? null;
+        activeIdAtom.set(newActiveId);
+        applySelectionFollowsFocus(newActiveId);
+    }, `${idBase}.moveFirst`);
+    const moveLast = action(() => {
+        const visibleEnabledIds = getVisibleEnabledNodeIds();
+        const newActiveId = visibleEnabledIds[visibleEnabledIds.length - 1] ?? null;
+        activeIdAtom.set(newActiveId);
+        applySelectionFollowsFocus(newActiveId);
+    }, `${idBase}.moveLast`);
+    const expand = action((id) => {
+        if (!isBranch(id))
+            return;
+        if (!expandedIdsAtom().includes(id)) {
+            expandedIdsAtom.set([...expandedIdsAtom(), id]);
+        }
+    }, `${idBase}.expand`);
+    const collapse = action((id) => {
+        collapseWithInvariant(id);
+    }, `${idBase}.collapse`);
+    const toggleExpanded = action((id) => {
+        if (!isBranch(id))
+            return;
+        if (expandedIdsAtom().includes(id)) {
+            collapseWithInvariant(id);
+        }
+        else {
+            expand(id);
+        }
+    }, `${idBase}.toggleExpanded`);
+    const expandActive = action(() => {
+        const activeId = activeIdAtom();
+        if (activeId == null)
+            return;
+        expand(activeId);
+    }, `${idBase}.expandActive`);
+    const collapseActive = action(() => {
+        const activeId = activeIdAtom();
+        if (activeId == null)
+            return;
+        collapse(activeId);
+    }, `${idBase}.collapseActive`);
+    const select = action((id) => {
+        if (!enabledIdSet.has(id))
+            return;
+        if (selectionMode === 'single') {
+            selectedIdsAtom.set(selectOnlyPrimitive(id, enabledIdSet));
+        }
+        else {
+            selectedIdsAtom.set([id]);
+        }
+        activeIdAtom.set(id);
+    }, `${idBase}.select`);
+    const toggleSelected = action((id) => {
+        selectedIdsAtom.set(toggleSelection(selectedIdsAtom(), id, selectionMode, enabledIdSet));
+        if (enabledIdSet.has(id)) {
+            activeIdAtom.set(id);
+        }
+    }, `${idBase}.toggleSelected`);
+    const clearSelected = action(() => {
+        selectedIdsAtom.set([]);
+    }, `${idBase}.clearSelected`);
+    const handleKeyDown = action((event) => {
+        const activeId = activeIdAtom();
+        if (event.key === 'ArrowRight') {
+            if (activeId == null) {
+                moveFirst();
+                return;
+            }
+            const meta = metaById.get(activeId);
+            if (!meta)
+                return;
+            const isExpanded = expandedIdsAtom().includes(activeId);
+            if (meta.childIds.length > 0 && !isExpanded) {
+                expand(activeId);
+                return;
+            }
+            if (meta.childIds.length > 0 && isExpanded) {
+                const firstEnabledChild = meta.childIds.find((id) => enabledIdSet.has(id));
+                if (firstEnabledChild != null && isVisible(firstEnabledChild, new Set(expandedIdsAtom()))) {
+                    activeIdAtom.set(firstEnabledChild);
+                }
+            }
+            return;
+        }
+        if (event.key === 'ArrowLeft') {
+            if (activeId == null) {
+                moveFirst();
+                return;
+            }
+            const meta = metaById.get(activeId);
+            if (!meta)
+                return;
+            if (meta.childIds.length > 0 && expandedIdsAtom().includes(activeId)) {
+                collapse(activeId);
+                return;
+            }
+            let parentId = meta.parentId;
+            while (parentId != null) {
+                if (enabledIdSet.has(parentId)) {
+                    activeIdAtom.set(parentId);
+                    return;
+                }
+                parentId = metaById.get(parentId)?.parentId ?? null;
+            }
+            return;
+        }
+        const intent = mapListboxKeyboardIntent(event, {
+            orientation: 'vertical',
+            selectionMode,
+            rangeSelectionEnabled: false,
+        });
+        if (intent == null)
+            return;
+        switch (intent) {
+            case 'NAV_NEXT':
+                moveNext();
+                return;
+            case 'NAV_PREV':
+                movePrev();
+                return;
+            case 'NAV_FIRST':
+                moveFirst();
+                return;
+            case 'NAV_LAST':
+                moveLast();
+                return;
+            case 'TOGGLE_SELECTION': {
+                const currentActiveId = activeIdAtom();
+                if (currentActiveId != null) {
+                    toggleSelected(currentActiveId);
+                }
+                return;
+            }
+            case 'ACTIVATE': {
+                const currentActiveId = activeIdAtom();
+                if (currentActiveId != null) {
+                    select(currentActiveId);
+                }
+                return;
+            }
+            case 'SELECT_ALL':
+                if (selectionMode === 'multiple') {
+                    selectedIdsAtom.set([...enabledIds]);
+                }
+                return;
+            default:
+                return;
+        }
+    }, `${idBase}.handleKeyDown`);
+    const actions = {
+        setActive: setActiveAction,
+        moveNext,
+        movePrev,
+        moveFirst,
+        moveLast,
+        expand,
+        collapse,
+        toggleExpanded,
+        expandActive,
+        collapseActive,
+        select,
+        toggleSelected,
+        clearSelected,
+        handleKeyDown,
+    };
+    const contracts = {
+        getTreeProps() {
+            return {
+                role: 'tree',
+                tabindex: '0',
+                'aria-label': options.ariaLabel,
+                'aria-multiselectable': selectionMode === 'multiple' ? 'true' : undefined,
+            };
+        },
+        getItemProps(id) {
+            const meta = metaById.get(id);
+            if (!meta) {
+                throw new Error(`Unknown tree node id: ${id}`);
+            }
+            const expanded = meta.childIds.length > 0 ? expandedIdsAtom().includes(id) : undefined;
+            return {
+                id: `${idBase}-item-${id}`,
+                role: 'treeitem',
+                tabindex: activeIdAtom() === id ? '0' : '-1',
+                'aria-level': meta.level,
+                'aria-posinset': meta.posInSet,
+                'aria-setsize': meta.setSize,
+                'aria-expanded': expanded == null ? undefined : expanded ? 'true' : 'false',
+                'aria-selected': selectedIdsAtom().includes(id) ? 'true' : 'false',
+                'aria-disabled': meta.disabled ? 'true' : undefined,
+                'data-active': activeIdAtom() === id ? 'true' : 'false',
+                'data-expanded': expanded == null ? undefined : expanded ? 'true' : 'false',
+            };
+        },
+        getVisibleNodeIds,
+    };
+    const state = {
+        activeId: activeIdAtom,
+        selectedIds: selectedIdsAtom,
+        expandedIds: expandedIdsAtom,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/window-splitter/index.d.ts

@@ -0,0 +1,65 @@
+import { type Atom } from '@reatom/core';
+export type WindowSplitterOrientation = 'horizontal' | 'vertical';
+export interface CreateWindowSplitterOptions {
+    idBase?: string;
+    min?: number;
+    max?: number;
+    position?: number;
+    step?: number;
+    orientation?: WindowSplitterOrientation;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    primaryPaneId?: string;
+    secondaryPaneId?: string;
+    isFixed?: boolean;
+    formatValueText?: (value: number) => string;
+    onPositionChange?: (value: number) => void;
+    snap?: string;
+    snapThreshold?: number;
+}
+export interface WindowSplitterState {
+    position: Atom<number>;
+    min: Atom<number>;
+    max: Atom<number>;
+    orientation: Atom<WindowSplitterOrientation>;
+    isDragging: Atom<boolean>;
+}
+export interface WindowSplitterActions {
+    setPosition(value: number): void;
+    moveStep(direction: -1 | 1): void;
+    moveToMin(): void;
+    moveToMax(): void;
+    startDragging(): void;
+    stopDragging(): void;
+    handleKeyDown(event: Pick<KeyboardEvent, 'key'>): void;
+}
+export interface WindowSplitterProps {
+    id: string;
+    role: 'separator';
+    tabindex: '0';
+    'aria-valuenow': string;
+    'aria-valuemin': string;
+    'aria-valuemax': string;
+    'aria-valuetext'?: string;
+    'aria-orientation': WindowSplitterOrientation;
+    'aria-controls': string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    onKeyDown: (event: Pick<KeyboardEvent, 'key'>) => void;
+}
+export interface WindowSplitterPaneProps {
+    id: string;
+    'data-pane': 'primary' | 'secondary';
+    'data-orientation': WindowSplitterOrientation;
+}
+export interface WindowSplitterContracts {
+    getSplitterProps(): WindowSplitterProps;
+    getPrimaryPaneProps(): WindowSplitterPaneProps;
+    getSecondaryPaneProps(): WindowSplitterPaneProps;
+}
+export interface WindowSplitterModel {
+    readonly state: WindowSplitterState;
+    readonly actions: WindowSplitterActions;
+    readonly contracts: WindowSplitterContracts;
+}
+export declare function createWindowSplitter(options?: CreateWindowSplitterOptions): WindowSplitterModel;

package/dist/window-splitter/index.js

@@ -0,0 +1,204 @@
+import { action, atom } from '@reatom/core';
+import { createValueRange, clampValue } from '../core/value-range.js';
+function parseSnapPoints(snap, min, max) {
+    return snap
+        .trim()
+        .split(/\s+/)
+        .map((s) => {
+        if (s.endsWith('%')) {
+            const pct = parseFloat(s) / 100;
+            return min + pct * (max - min);
+        }
+        return parseFloat(s);
+    })
+        .filter((n) => !isNaN(n));
+}
+function resolveSnap(value, snap, snapThreshold, min, max) {
+    if (!snap)
+        return value;
+    const points = parseSnapPoints(snap, min, max);
+    if (points.length === 0)
+        return value;
+    const firstPoint = points[0];
+    if (firstPoint === undefined)
+        return value;
+    let nearest = firstPoint;
+    let minDist = Math.abs(value - nearest);
+    for (const p of points) {
+        const d = Math.abs(value - p);
+        if (d < minDist) {
+            minDist = d;
+            nearest = p;
+        }
+    }
+    return minDist <= snapThreshold ? nearest : value;
+}
+const updatePosition = (valueAtom, update, onPositionChange) => {
+    const previous = valueAtom();
+    update();
+    const next = valueAtom();
+    if (next !== previous) {
+        onPositionChange?.(next);
+    }
+};
+export function createWindowSplitter(options = {}) {
+    const idBase = options.idBase ?? 'window-splitter';
+    const orientationAtom = atom(options.orientation ?? 'horizontal', `${idBase}.orientation`);
+    const isDraggingAtom = atom(false, `${idBase}.isDragging`);
+    const isFixed = options.isFixed ?? false;
+    const snapThreshold = options.snapThreshold ?? 12;
+    const min = options.min ?? 0;
+    const max = options.max ?? 100;
+    const range = createValueRange({
+        idBase: `${idBase}.range`,
+        min,
+        max,
+        step: options.step,
+        initialValue: options.position,
+    });
+    const applySnappedPosition = (value) => {
+        const currentMin = range.state.min();
+        const currentMax = range.state.max();
+        const clamped = clampValue(value, currentMin, currentMax);
+        const snapped = resolveSnap(clamped, options.snap, snapThreshold, currentMin, currentMax);
+        range.actions.setValue(snapped);
+    };
+    const setPosition = action((value) => {
+        updatePosition(range.state.value, () => {
+            applySnappedPosition(value);
+        }, options.onPositionChange);
+    }, `${idBase}.setPosition`);
+    const moveStep = action((direction) => {
+        updatePosition(range.state.value, () => {
+            if (direction > 0) {
+                range.actions.increment();
+            }
+            else {
+                range.actions.decrement();
+            }
+        }, options.onPositionChange);
+    }, `${idBase}.moveStep`);
+    const moveToMin = action(() => {
+        updatePosition(range.state.value, () => {
+            range.actions.setFirst();
+        }, options.onPositionChange);
+    }, `${idBase}.moveToMin`);
+    const moveToMax = action(() => {
+        updatePosition(range.state.value, () => {
+            range.actions.setLast();
+        }, options.onPositionChange);
+    }, `${idBase}.moveToMax`);
+    const toggleFixed = () => {
+        if (!isFixed)
+            return;
+        const currentMin = range.state.min();
+        const currentMax = range.state.max();
+        const midpoint = currentMin + (currentMax - currentMin) / 2;
+        if (range.state.value() <= midpoint) {
+            moveToMax();
+        }
+        else {
+            moveToMin();
+        }
+    };
+    const startDragging = action(() => {
+        isDraggingAtom.set(true);
+    }, `${idBase}.startDragging`);
+    const stopDragging = action(() => {
+        isDraggingAtom.set(false);
+    }, `${idBase}.stopDragging`);
+    const handleKeyDown = action((event) => {
+        const orientation = orientationAtom();
+        switch (event.key) {
+            case 'ArrowLeft':
+                if (!isFixed && orientation === 'vertical') {
+                    moveStep(-1);
+                }
+                return;
+            case 'ArrowRight':
+                if (!isFixed && orientation === 'vertical') {
+                    moveStep(1);
+                }
+                return;
+            case 'ArrowUp':
+                if (!isFixed && orientation === 'horizontal') {
+                    moveStep(-1);
+                }
+                return;
+            case 'ArrowDown':
+                if (!isFixed && orientation === 'horizontal') {
+                    moveStep(1);
+                }
+                return;
+            case 'Home':
+                moveToMin();
+                return;
+            case 'End':
+                moveToMax();
+                return;
+            case 'Enter':
+                toggleFixed();
+                return;
+            default:
+                return;
+        }
+    }, `${idBase}.handleKeyDown`);
+    const actions = {
+        setPosition,
+        moveStep,
+        moveToMin,
+        moveToMax,
+        startDragging,
+        stopDragging,
+        handleKeyDown,
+    };
+    const splitterId = `${idBase}-separator`;
+    const primaryPaneId = options.primaryPaneId ?? `${idBase}-pane-primary`;
+    const secondaryPaneId = options.secondaryPaneId ?? `${idBase}-pane-secondary`;
+    const controlsIds = `${primaryPaneId} ${secondaryPaneId}`;
+    const contracts = {
+        getSplitterProps() {
+            const value = range.state.value();
+            return {
+                id: splitterId,
+                role: 'separator',
+                tabindex: '0',
+                'aria-valuenow': String(value),
+                'aria-valuemin': String(range.state.min()),
+                'aria-valuemax': String(range.state.max()),
+                'aria-valuetext': options.formatValueText?.(value),
+                'aria-orientation': orientationAtom(),
+                'aria-controls': controlsIds,
+                'aria-label': options.ariaLabel,
+                'aria-labelledby': options.ariaLabelledBy,
+                onKeyDown: handleKeyDown,
+            };
+        },
+        getPrimaryPaneProps() {
+            return {
+                id: primaryPaneId,
+                'data-pane': 'primary',
+                'data-orientation': orientationAtom(),
+            };
+        },
+        getSecondaryPaneProps() {
+            return {
+                id: secondaryPaneId,
+                'data-pane': 'secondary',
+                'data-orientation': orientationAtom(),
+            };
+        },
+    };
+    const state = {
+        position: range.state.value,
+        min: range.state.min,
+        max: range.state.max,
+        orientation: orientationAtom,
+        isDragging: isDraggingAtom,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}