@inkra/react 0.0.0-stage → 0.2.0

package/dist/transfer/model.js

@@ -0,0 +1,33 @@
+export function uniqueTransferItems(items) {
+    const seen = new Set();
+    return items.filter(item => {
+        if (seen.has(item.id))
+            return false;
+        seen.add(item.id);
+        return true;
+    });
+}
+export function normalizeTargetKeys(items, targetKeys) {
+    const uniqueItems = uniqueTransferItems(items);
+    const requested = new Set(targetKeys);
+    const knownIds = new Set(uniqueItems.map(item => item.id));
+    const orderedKnown = uniqueItems.filter(item => requested.has(item.id)).map(item => item.id);
+    const unknown = targetKeys.filter((key, index) => !knownIds.has(key) && targetKeys.indexOf(key) === index);
+    return [...orderedKnown, ...unknown];
+}
+export function splitTransferItems(items, targetKeys) {
+    const target = new Set(targetKeys);
+    const uniqueItems = uniqueTransferItems(items);
+    return {
+        source: uniqueItems.filter(item => !target.has(item.id)),
+        target: uniqueItems.filter(item => target.has(item.id)),
+    };
+}
+export function moveTransferKeys(items, targetKeys, movedKeys, direction) {
+    const next = new Set(targetKeys);
+    if (direction === 'to-target')
+        movedKeys.forEach(key => next.add(key));
+    else
+        movedKeys.forEach(key => next.delete(key));
+    return normalizeTargetKeys(items, [...next]);
+}

package/dist/tree/index.d.ts

@@ -0,0 +1,39 @@
+import type { Key, Selection, TreeItemProps as AriaTreeItemProps, TreeProps as AriaTreeProps } from 'react-aria-components/Tree';
+import type { CSSProperties, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
+export type TreeKey = Key;
+export type TreeSelection = Selection;
+export type TreeRootProps<T extends object = object> = Omit<AriaTreeProps<T>, 'className' | 'style' | 'renderEmptyState'> & {
+    className?: string;
+    style?: CSSProperties;
+    emptyState?: ReactNode;
+};
+export type TreeItemProps<T = object> = Omit<AriaTreeItemProps<T>, 'className'> & {
+    className?: string;
+};
+export interface TreeItemContentState {
+    isExpanded: boolean;
+    hasChildItems: boolean;
+    isSelected: boolean;
+    isDisabled: boolean;
+}
+export interface TreeItemContentProps {
+    children: ReactNode;
+    className?: string;
+    icon?: ReactNode | ((state: TreeItemContentState) => ReactNode);
+    disclosureIcon?: ReactNode | ((state: TreeItemContentState) => ReactNode);
+    expandLabel?: string;
+    collapseLabel?: string;
+}
+export interface TreeItemTitleProps extends HTMLAttributes<HTMLSpanElement> {
+}
+export interface TreeItemDescriptionProps extends HTMLAttributes<HTMLSpanElement> {
+}
+export declare const Tree: {
+    Root: <T extends object = object>(props: TreeRootProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;
+    Item: import("react").ForwardRefExoticComponent<Omit<AriaTreeItemProps<object>, "className"> & {
+        className?: string;
+    } & RefAttributes<HTMLDivElement>>;
+    ItemContent: import("react").ForwardRefExoticComponent<TreeItemContentProps & RefAttributes<Element>>;
+    ItemTitle: import("react").ForwardRefExoticComponent<TreeItemTitleProps & RefAttributes<HTMLSpanElement>>;
+    ItemDescription: import("react").ForwardRefExoticComponent<TreeItemDescriptionProps & RefAttributes<HTMLSpanElement>>;
+};

package/dist/tree/index.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tree as AriaTree, TreeItem as AriaTreeItem, TreeItemContent as AriaTreeItemContent, } from 'react-aria-components/Tree';
+import { Button as AriaButton } from 'react-aria-components/Button';
+import { forwardRef } from 'react';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+const chevronIcon = [{ d: 'M 7 10 L 12 15 L 17 10' }];
+function TreeRootInner({ className, emptyState = 'No items', selectionMode = 'single', selectionBehavior = 'toggle', ...props }, ref) {
+    return _jsx(AriaTree, { ...props, ref: ref, className: ['inkra-tree', className].filter(Boolean).join(' '), selectionMode: selectionMode, selectionBehavior: selectionBehavior, renderEmptyState: () => _jsx("div", { className: "inkra-tree__empty", children: emptyState }) });
+}
+const TreeRoot = forwardRef(TreeRootInner);
+const TreeItem = forwardRef(function TreeItem({ className, ...props }, ref) {
+    return _jsx(AriaTreeItem, { ...props, ref: ref, className: ['inkra-tree__item', className].filter(Boolean).join(' ') });
+});
+const TreeItemContent = forwardRef(function TreeItemContent({ children, className, icon, disclosureIcon, expandLabel = 'Expand item', collapseLabel = 'Collapse item', }, ref) {
+    return _jsx(AriaTreeItemContent, { ref: ref, children: ({ hasChildItems, isExpanded, isSelected, isFocusVisible, isDisabled, level, id, }) => {
+            const state = { isExpanded, hasChildItems, isSelected, isDisabled };
+            const resolvedIcon = typeof icon === 'function' ? icon(state) : icon;
+            const resolvedDisclosure = typeof disclosureIcon === 'function' ? disclosureIcon(state) : disclosureIcon;
+            return _jsxs("div", { className: ['inkra-tree__item-content', className].filter(Boolean).join(' '), "data-expanded": isExpanded || undefined, "data-selected": isSelected || undefined, "data-disabled": isDisabled || undefined, "data-has-icon": resolvedIcon != null || undefined, style: { '--inkra-tree-level': level }, children: [isSelected && _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-tree__selection", variant: "selection", seed: `tree-${String(id)}-selection` }), isFocusVisible && _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-tree__focus", variant: "outline", seed: `tree-${String(id)}-focus` }), hasChildItems ? _jsx(AriaButton, { slot: "chevron", className: "inkra-tree__disclosure", "aria-label": isExpanded ? collapseLabel : expandLabel, children: ({ isFocusVisible: disclosureFocused }) => _jsxs(_Fragment, { children: [disclosureFocused && _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-tree__disclosure-focus", variant: "outline" }), _jsx("span", { className: "inkra-tree__disclosure-icon", "aria-hidden": "true", children: disclosureIcon === undefined ? _jsx(PencilIcon, { className: "inkra-tree__chevron", paths: chevronIcon, size: 18, sourceSize: 24 }) : resolvedDisclosure })] }) }) : _jsx("span", { className: "inkra-tree__disclosure-spacer", "aria-hidden": "true" }), resolvedIcon != null && _jsx("span", { className: "inkra-tree__icon", "aria-hidden": "true", children: resolvedIcon }), _jsx("span", { className: "inkra-tree__copy", children: children })] });
+        } });
+});
+const TreeItemTitle = forwardRef(function TreeItemTitle({ className, children, ...props }, ref) {
+    return _jsx("span", { ...props, ref: ref, className: ['inkra-tree__title', className].filter(Boolean).join(' '), children: typeof children === 'string' ? _jsx(PencilText, { children: children }) : children });
+});
+const TreeItemDescription = forwardRef(function TreeItemDescription({ className, children, ...props }, ref) {
+    return _jsx("span", { ...props, ref: ref, className: ['inkra-tree__description', className].filter(Boolean).join(' '), children: children });
+});
+export const Tree = {
+    Root: TreeRoot,
+    Item: TreeItem,
+    ItemContent: TreeItemContent,
+    ItemTitle: TreeItemTitle,
+    ItemDescription: TreeItemDescription,
+};

package/dist/tree-select/index.d.ts

@@ -0,0 +1,59 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { TreeSelectBranchSelection, TreeSelectNode, TreeSelectSelectionPropagation } from './model.js';
+export type { TreeSelectBranchSelection, TreeSelectNode, TreeSelectSelectionPropagation, } from './model.js';
+export interface TreeSelectRenderLabelState {
+    branch: boolean;
+    disabled: boolean;
+    selected: boolean;
+    query: string;
+}
+export interface TreeSelectChangeDetails {
+    id?: string;
+    node?: TreeSelectNode;
+    reason: 'select' | 'clear';
+    selected?: boolean;
+}
+interface TreeSelectCommonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'children'> {
+    items: readonly TreeSelectNode[];
+    branchSelection?: TreeSelectBranchSelection;
+    selectionPropagation?: TreeSelectSelectionPropagation;
+    renderLabel?: (node: TreeSelectNode, state: TreeSelectRenderLabelState) => ReactNode;
+    renderValue?: (nodes: readonly TreeSelectNode[], ids: readonly string[]) => ReactNode;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyContent?: ReactNode;
+    clearable?: boolean;
+    clearLabel?: string;
+    treeLabel?: string;
+    expandLabel?: string;
+    collapseLabel?: string;
+    size?: 'sm' | 'md' | 'lg';
+    name?: string;
+    form?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    expandedIds?: readonly string[];
+    defaultExpandedIds?: readonly string[];
+    onExpandedIdsChange?: (ids: string[]) => void;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    collisionPadding?: number;
+}
+export type TreeSelectProps = TreeSelectCommonProps & ({
+    multiple?: false;
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null, details: TreeSelectChangeDetails) => void;
+} | {
+    multiple: true;
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onValueChange?: (value: string[], details: TreeSelectChangeDetails) => void;
+});
+export declare const TreeSelect: import("react").ForwardRefExoticComponent<TreeSelectProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/tree-select/index.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { Button } from '../Button.js';
+import { Input } from '../form/Input.js';
+import { mergeAriaIds, useFieldContext } from '../form/context.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilText } from '../PencilText.js';
+import { Popover } from '../overlay/index.js';
+import { Tree } from '../tree/index.js';
+import { filterTreeSelectNodes, indexTreeSelectNodes, updateTreeSelectSelection, } from './model.js';
+const chevronPaths = [{ d: 'M6 9l6 6 6-6' }];
+const clearPaths = [{ d: 'M6 6l12 12M18 6L6 18' }];
+const searchPaths = [{ d: 'M21 21l-4.5-4.5' }, { d: 'M18 10a8 8 0 1 1-16 0a8 8 0 1 1 16 0' }];
+function selectionFromProps(props, fallback = []) {
+    const raw = props.value !== undefined ? props.value : props.defaultValue;
+    if (props.multiple)
+        return Array.isArray(raw) ? [...new Set(raw)] : [...fallback];
+    return typeof raw === 'string' && raw ? [raw] : raw === null ? [] : [...fallback];
+}
+function keys(selection) {
+    return selection === 'all' ? [] : [...selection].map(String);
+}
+export const TreeSelect = forwardRef(function TreeSelect(props, ref) {
+    const { items, branchSelection = 'leaf', selectionPropagation = 'none', renderLabel, renderValue, placeholder = 'Select an item', searchPlaceholder = 'Search tree', emptyContent = 'No matching items', clearable = true, clearLabel = 'Clear selection', treeLabel = 'Tree options', expandLabel = 'Expand item', collapseLabel = 'Collapse item', size = 'md', name, form, disabled, readOnly, required, invalid, open: controlledOpen, defaultOpen = false, onOpenChange, expandedIds, defaultExpandedIds = [], onExpandedIdsChange, side = 'bottom', align = 'start', sideOffset = 8, collisionPadding = 8, id, className, multiple: _multiple, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...rest } = props;
+    const field = useFieldContext();
+    const generatedId = useId();
+    const controlId = field?.controlId ?? id ?? `inkra-tree-select-${generatedId}`;
+    const resolvedDisabled = Boolean(disabled || field?.disabled);
+    const resolvedReadOnly = Boolean(readOnly || field?.readOnly);
+    const resolvedRequired = Boolean(required || field?.required);
+    const resolvedInvalid = Boolean(invalid || field?.invalid);
+    const describedBy = mergeAriaIds(ariaDescribedBy, field?.descriptionId, field?.errorId);
+    const normalized = useMemo(() => indexTreeSelectNodes(items), [items]);
+    const defaultSelection = useRef(selectionFromProps(props));
+    const controlledSelection = props.value !== undefined;
+    const [uncontrolledSelection, setUncontrolledSelection] = useState(defaultSelection.current);
+    const selectedIds = controlledSelection ? selectionFromProps(props) : uncontrolledSelection;
+    const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isOpen = controlledOpen ?? uncontrolledOpen;
+    const [uncontrolledExpanded, setUncontrolledExpanded] = useState(() => [...new Set(defaultExpandedIds)]);
+    const baseExpanded = expandedIds ?? uncontrolledExpanded;
+    const [query, setQuery] = useState('');
+    const filtered = useMemo(() => filterTreeSelectNodes(normalized.nodes, query), [normalized.nodes, query]);
+    const effectiveExpanded = useMemo(() => new Set([...baseExpanded, ...filtered.expandedIds]), [baseExpanded, filtered.expandedIds]);
+    const triggerRef = useRef(null);
+    const searchRef = useRef(null);
+    const treeRef = useRef(null);
+    const formAnchorRef = useRef(null);
+    const selectedNodes = selectedIds
+        .map(selectedId => normalized.byId.get(selectedId))
+        .filter((node) => node !== undefined);
+    const setOpen = (next) => {
+        if (resolvedDisabled || resolvedReadOnly)
+            return;
+        if (controlledOpen === undefined)
+            setUncontrolledOpen(next);
+        if (!next)
+            setQuery('');
+        onOpenChange?.(next);
+    };
+    const emitSelection = (next, details) => {
+        if (!controlledSelection)
+            setUncontrolledSelection(next);
+        if (props.multiple)
+            props.onValueChange?.(next, details);
+        else
+            props.onValueChange?.(next[0] ?? null, details);
+    };
+    useEffect(() => {
+        if (controlledSelection)
+            return;
+        const currentForm = formAnchorRef.current?.form;
+        if (!currentForm)
+            return;
+        const reset = () => {
+            setUncontrolledSelection(defaultSelection.current);
+            setQuery('');
+            if (controlledOpen === undefined)
+                setUncontrolledOpen(false);
+        };
+        currentForm.addEventListener('reset', reset);
+        return () => currentForm.removeEventListener('reset', reset);
+    }, [controlledOpen, controlledSelection]);
+    const handleSelectionChange = (nextSelection) => {
+        if (resolvedDisabled || resolvedReadOnly)
+            return;
+        const nextKeys = new Set(keys(nextSelection));
+        const added = [...nextKeys].find(item => !selectedSet.has(item));
+        const removed = selectedIds.find(item => filtered.visibleIds.has(item) && !nextKeys.has(item));
+        const toggledId = added ?? removed;
+        if (!toggledId)
+            return;
+        const selected = added === toggledId;
+        const next = updateTreeSelectSelection(normalized.nodes, selectedIds, toggledId, selected, {
+            multiple: Boolean(props.multiple),
+            branchSelection,
+            selectionPropagation,
+        });
+        if (next.length === selectedIds.length && next.every((item, index) => item === selectedIds[index]))
+            return;
+        emitSelection(next, {
+            id: toggledId,
+            node: normalized.byId.get(toggledId),
+            reason: 'select',
+            selected,
+        });
+        if (!props.multiple && selected)
+            setOpen(false);
+    };
+    const handleExpandedChange = (nextKeys) => {
+        const next = [...nextKeys].map(String).filter(item => !filtered.expandedIds.has(item) || baseExpanded.includes(item));
+        if (expandedIds === undefined)
+            setUncontrolledExpanded(next);
+        onExpandedIdsChange?.(next);
+    };
+    const handleSearchKeyDown = (event) => {
+        if (event.key !== 'ArrowDown' || filtered.nodes.length === 0)
+            return;
+        event.preventDefault();
+        treeRef.current?.focus();
+    };
+    const renderNodes = (nodes) => nodes.map(node => {
+        const branch = Boolean(node.children?.length);
+        const label = renderLabel?.(node, {
+            branch,
+            disabled: Boolean(node.disabled),
+            selected: selectedSet.has(node.id),
+            query,
+        }) ?? node.label;
+        return _jsxs(Tree.Item, { className: "inkra-tree-select__item", id: node.id, isDisabled: node.disabled, textValue: node.label, children: [_jsxs(Tree.ItemContent, { collapseLabel: collapseLabel, expandLabel: expandLabel, children: [_jsx(Tree.ItemTitle, { children: label }), node.description ? _jsx(Tree.ItemDescription, { children: node.description }) : null] }), node.children?.length ? renderNodes(node.children) : null] }, node.id);
+    });
+    const fallbackValue = selectedIds.map(selectedId => normalized.byId.get(selectedId)?.label ?? selectedId).join(', ');
+    const valueContent = renderValue?.(selectedNodes, selectedIds)
+        ?? (fallbackValue ? _jsx(PencilText, { ellipsis: true, children: fallbackValue }) : _jsx(PencilText, { ellipsis: true, children: placeholder }));
+    const indicatorSize = size === 'sm' ? 24 : size === 'lg' ? 32 : 28;
+    const exposedOpen = resolvedDisabled || resolvedReadOnly ? false : isOpen;
+    return _jsxs("div", { ...rest, className: ['inkra-tree-select', className].filter(Boolean).join(' '), "data-disabled": resolvedDisabled || undefined, "data-invalid": resolvedInvalid || undefined, "data-readonly": resolvedReadOnly || undefined, "data-size": size, ref: ref, children: [_jsxs(Popover.Root, { open: exposedOpen, onOpenChange: setOpen, children: [_jsxs("div", { className: "inkra-tree-select__control", children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(Button, { "aria-describedby": describedBy, "aria-invalid": resolvedInvalid || undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-readonly": resolvedReadOnly || undefined, "aria-required": resolvedRequired || undefined, className: "inkra-tree-select__trigger", disabled: resolvedDisabled, endIcon: _jsx(PencilIcon, { paths: chevronPaths, size: indicatorSize, sourceSize: 24 }), fullWidth: true, id: controlId, ref: triggerRef, size: size, variant: "outline", children: _jsx("span", { className: "inkra-tree-select__value", "data-placeholder": !selectedIds.length || undefined, children: valueContent }) }) }), clearable ? _jsx(Button, { "aria-label": clearLabel, className: "inkra-tree-select__clear", "data-visible": selectedIds.length > 0 || undefined, disabled: resolvedDisabled || resolvedReadOnly || selectedIds.length === 0, onClick: () => emitSelection([], { reason: 'clear' }), size: size === 'sm' ? 'icon-sm' : size === 'lg' ? 'icon-lg' : 'icon', tabIndex: selectedIds.length ? undefined : -1, variant: "ghost", children: _jsx(PencilIcon, { paths: clearPaths, size: 24, sourceSize: 24 }) }) : null] }), _jsx(Popover.Portal, { children: _jsxs(Popover.Content, { align: align, "aria-label": treeLabel, className: "inkra-tree-select__popover", collisionPadding: collisionPadding, onOpenAutoFocus: (event) => {
+                                event.preventDefault();
+                                searchRef.current?.focus();
+                            }, side: side, sideOffset: sideOffset, children: [_jsx("div", { className: "inkra-tree-select__search", children: _jsx(Input, { "aria-label": searchPlaceholder, clearable: true, clearButtonLabel: clearLabel, onKeyDown: handleSearchKeyDown, onValueChange: setQuery, placeholder: searchPlaceholder, ref: searchRef, size: size, startIcon: _jsx(PencilIcon, { paths: searchPaths, size: 22, sourceSize: 24 }), type: "search", value: query, variant: "underline" }) }), _jsx(Tree.Root, { "aria-label": treeLabel, className: "inkra-tree-select__tree", emptyState: emptyContent, expandedKeys: effectiveExpanded, onExpandedChange: handleExpandedChange, onSelectionChange: handleSelectionChange, ref: treeRef, selectedKeys: new Set(selectedIds), selectionMode: props.multiple ? 'multiple' : 'single', children: renderNodes(filtered.nodes) })] }) })] }), _jsx("input", { "aria-hidden": "true", className: "inkra-tree-select__form-anchor", form: form, ref: formAnchorRef, tabIndex: -1, type: "hidden" }), name && !resolvedDisabled ? selectedIds.map(selectedId => _jsx("input", { form: form, name: name, type: "hidden", value: selectedId }, selectedId)) : null] });
+});

package/dist/tree-select/model.d.ts

@@ -0,0 +1,31 @@
+export interface TreeSelectNode {
+    id: string;
+    label: string;
+    description?: string;
+    keywords?: string;
+    disabled?: boolean;
+    children?: readonly TreeSelectNode[];
+}
+export type TreeSelectBranchSelection = 'leaf' | 'all';
+export type TreeSelectSelectionPropagation = 'none' | 'down' | 'both';
+export interface TreeSelectIndex {
+    nodes: readonly TreeSelectNode[];
+    orderedIds: readonly string[];
+    byId: ReadonlyMap<string, TreeSelectNode>;
+    parentById: ReadonlyMap<string, string | null>;
+    branchIds: ReadonlySet<string>;
+    disabledIds: ReadonlySet<string>;
+}
+export interface FilteredTreeSelectNodes {
+    nodes: readonly TreeSelectNode[];
+    visibleIds: ReadonlySet<string>;
+    expandedIds: ReadonlySet<string>;
+}
+export declare function normalizeTreeSelectNodes(nodes: readonly TreeSelectNode[]): readonly TreeSelectNode[];
+export declare function indexTreeSelectNodes(nodes: readonly TreeSelectNode[]): TreeSelectIndex;
+export declare function filterTreeSelectNodes(nodes: readonly TreeSelectNode[], query: string): FilteredTreeSelectNodes;
+export declare function updateTreeSelectSelection(nodes: readonly TreeSelectNode[], current: readonly string[], toggledId: string, selected: boolean, options: {
+    multiple: boolean;
+    branchSelection: TreeSelectBranchSelection;
+    selectionPropagation: TreeSelectSelectionPropagation;
+}): string[];

package/dist/tree-select/model.js

@@ -0,0 +1,135 @@
+function normalizeCopy(nodes, seen) {
+    const result = [];
+    for (const node of nodes) {
+        if (!node.id || seen.has(node.id))
+            continue;
+        seen.add(node.id);
+        const children = normalizeCopy(node.children ?? [], seen);
+        result.push({ ...node, children: children.length ? children : undefined });
+    }
+    return result;
+}
+export function normalizeTreeSelectNodes(nodes) {
+    return normalizeCopy(nodes, new Set());
+}
+export function indexTreeSelectNodes(nodes) {
+    const normalized = normalizeTreeSelectNodes(nodes);
+    const orderedIds = [];
+    const byId = new Map();
+    const parentById = new Map();
+    const branchIds = new Set();
+    const disabledIds = new Set();
+    const visit = (items, parentId) => {
+        for (const node of items) {
+            orderedIds.push(node.id);
+            byId.set(node.id, node);
+            parentById.set(node.id, parentId);
+            if (node.disabled)
+                disabledIds.add(node.id);
+            if (node.children?.length) {
+                branchIds.add(node.id);
+                visit(node.children, node.id);
+            }
+        }
+    };
+    visit(normalized, null);
+    return { nodes: normalized, orderedIds, byId, parentById, branchIds, disabledIds };
+}
+function addVisibleSubtree(node, visibleIds, expandedIds) {
+    visibleIds.add(node.id);
+    if (node.children?.length) {
+        expandedIds.add(node.id);
+        for (const child of node.children)
+            addVisibleSubtree(child, visibleIds, expandedIds);
+    }
+}
+export function filterTreeSelectNodes(nodes, query) {
+    const normalized = normalizeTreeSelectNodes(nodes);
+    const needle = query.trim().toLocaleLowerCase();
+    const visibleIds = new Set();
+    const expandedIds = new Set();
+    if (!needle) {
+        for (const node of normalized)
+            addVisibleSubtree(node, visibleIds, new Set());
+        return { nodes: normalized, visibleIds, expandedIds };
+    }
+    const visit = (node) => {
+        const haystack = `${node.label} ${node.keywords ?? ''}`.toLocaleLowerCase();
+        if (haystack.includes(needle)) {
+            addVisibleSubtree(node, visibleIds, expandedIds);
+            return node;
+        }
+        const children = (node.children ?? []).map(visit).filter((child) => child !== null);
+        if (!children.length)
+            return null;
+        visibleIds.add(node.id);
+        expandedIds.add(node.id);
+        return { ...node, children };
+    };
+    return {
+        nodes: normalized.map(visit).filter((node) => node !== null),
+        visibleIds,
+        expandedIds,
+    };
+}
+function isSelectable(index, id, branchSelection) {
+    return index.byId.has(id)
+        && !index.disabledIds.has(id)
+        && (branchSelection === 'all' || !index.branchIds.has(id));
+}
+function descendants(index, id) {
+    const node = index.byId.get(id);
+    if (!node?.children?.length)
+        return [];
+    const result = [];
+    const visit = (items) => {
+        for (const child of items) {
+            result.push(child.id);
+            if (child.children?.length)
+                visit(child.children);
+        }
+    };
+    visit(node.children);
+    return result;
+}
+function orderedSelection(index, selected, previous) {
+    const known = index.orderedIds.filter(id => selected.has(id));
+    const unknown = previous.filter((id, position) => !index.byId.has(id) && previous.indexOf(id) === position);
+    return [...known, ...unknown];
+}
+export function updateTreeSelectSelection(nodes, current, toggledId, selected, options) {
+    const index = indexTreeSelectNodes(nodes);
+    if (!isSelectable(index, toggledId, options.branchSelection))
+        return [...current];
+    if (!options.multiple)
+        return selected ? [toggledId] : [];
+    const next = new Set(current);
+    const affected = [toggledId];
+    if (options.selectionPropagation !== 'none' && index.branchIds.has(toggledId)) {
+        affected.push(...descendants(index, toggledId));
+    }
+    for (const id of affected) {
+        if (!isSelectable(index, id, options.branchSelection))
+            continue;
+        if (selected)
+            next.add(id);
+        else
+            next.delete(id);
+    }
+    if (options.selectionPropagation === 'both' && options.branchSelection === 'all') {
+        const branches = index.orderedIds.filter(id => index.branchIds.has(id)).reverse();
+        for (const branchId of branches) {
+            if (index.disabledIds.has(branchId))
+                continue;
+            const selectableDescendants = descendants(index, branchId)
+                .filter(id => isSelectable(index, id, options.branchSelection));
+            if (!selectableDescendants.length)
+                continue;
+            if (selectableDescendants.every(id => next.has(id)))
+                next.add(branchId);
+            else
+                next.delete(branchId);
+        }
+    }
+    return orderedSelection(index, next, current);
+}

package/dist/typewriter/index.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentPropsWithoutRef } from 'react';
+export interface TypewriterHandle {
+    pause: () => void;
+    resume: () => void;
+    complete: () => void;
+    restart: () => void;
+}
+export interface TypewriterProps extends Omit<ComponentPropsWithoutRef<'span'>, 'children'> {
+    children: string;
+    speed?: number;
+    punctuationDelay?: number;
+    startDelay?: number;
+    paused?: boolean;
+    defaultPaused?: boolean;
+    locale?: string | string[];
+    onPausedChange?: (paused: boolean) => void;
+    onComplete?: () => void;
+}
+export declare const Typewriter: import("react").ForwardRefExoticComponent<TypewriterProps & import("react").RefAttributes<TypewriterHandle>>;
+export { isTypewriterPunctuation, splitTypewriterGraphemes, typewriterDelayAfter, } from './model.js';
+export type { TypewriterDelayOptions } from './model.js';

package/dist/typewriter/index.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { PencilText } from '../PencilText.js';
+import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
+import { splitTypewriterGraphemes, typewriterDelayAfter } from './model.js';
+function usePrefersReducedMotion() {
+    const [reduced, setReduced] = useState(false);
+    useBrowserLayoutEffect(() => {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+            return undefined;
+        const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+        const update = () => setReduced(query.matches);
+        update();
+        query.addEventListener('change', update);
+        return () => query.removeEventListener('change', update);
+    }, []);
+    return reduced;
+}
+function safeDuration(value) {
+    return Number.isFinite(value) ? Math.max(0, value) : 0;
+}
+export const Typewriter = forwardRef(function Typewriter({ children, className, defaultPaused = false, locale, onComplete, onPausedChange, paused, punctuationDelay = 240, speed = 48, startDelay = 0, ...props }, forwardedRef) {
+    const graphemes = useMemo(() => splitTypewriterGraphemes(children, locale), [children, locale]);
+    const [internalPaused, setInternalPaused] = useState(defaultPaused);
+    const [sequence, setSequence] = useState({ text: children, revealed: 0, cycle: 0 });
+    const completedCycleRef = useRef(null);
+    const onCompleteRef = useRef(onComplete);
+    const reducedMotion = usePrefersReducedMotion();
+    const isPaused = paused ?? internalPaused;
+    const activeSequence = sequence.text === children
+        ? sequence
+        : { text: children, revealed: 0, cycle: sequence.cycle + 1 };
+    const revealed = Math.min(activeSequence.revealed, graphemes.length);
+    const complete = revealed >= graphemes.length;
+    onCompleteRef.current = onComplete;
+    const requestPaused = (nextPaused) => {
+        if (paused === undefined)
+            setInternalPaused(nextPaused);
+        if (nextPaused !== isPaused)
+            onPausedChange?.(nextPaused);
+    };
+    const revealAll = () => {
+        setSequence(current => ({
+            text: children,
+            revealed: graphemes.length,
+            cycle: current.text === children ? current.cycle : current.cycle + 1,
+        }));
+    };
+    const restart = () => {
+        completedCycleRef.current = null;
+        setSequence(current => ({ text: children, revealed: 0, cycle: current.cycle + 1 }));
+    };
+    useImperativeHandle(forwardedRef, () => ({
+        pause: () => requestPaused(true),
+        resume: () => requestPaused(false),
+        complete: revealAll,
+        restart,
+    }));
+    useBrowserLayoutEffect(() => {
+        if (sequence.text === children)
+            return;
+        completedCycleRef.current = null;
+        setSequence(current => ({ text: children, revealed: 0, cycle: current.cycle + 1 }));
+    }, [children, sequence.text]);
+    useBrowserLayoutEffect(() => {
+        if (!reducedMotion || complete)
+            return;
+        revealAll();
+    }, [complete, reducedMotion, graphemes.length, children]);
+    useEffect(() => {
+        if (!complete || completedCycleRef.current === activeSequence.cycle)
+            return;
+        completedCycleRef.current = activeSequence.cycle;
+        onCompleteRef.current?.();
+    }, [activeSequence.cycle, complete]);
+    useEffect(() => {
+        if (complete || isPaused || reducedMotion)
+            return undefined;
+        const delay = revealed === 0
+            ? safeDuration(startDelay)
+            : typewriterDelayAfter(graphemes[revealed - 1], { speed, punctuationDelay });
+        const timer = window.setTimeout(() => {
+            setSequence(current => current.text === children
+                ? { ...current, revealed: Math.min(graphemes.length, current.revealed + 1) }
+                : { text: children, revealed: 1, cycle: current.cycle + 1 });
+        }, delay);
+        return () => window.clearTimeout(timer);
+    }, [children, complete, graphemes, isPaused, punctuationDelay, reducedMotion, revealed, speed, startDelay]);
+    const classes = ['inkra-typewriter', className].filter(Boolean).join(' ');
+    const state = complete ? 'complete' : isPaused ? 'paused' : 'typing';
+    return _jsxs("span", { ...props, className: classes, "data-state": state, "data-revealed": revealed, "data-total": graphemes.length, children: [_jsx("span", { "aria-hidden": "true", className: "inkra-typewriter__visual", children: graphemes.map((grapheme, index) => {
+                    const isRevealed = index < revealed;
+                    if (grapheme === '\n')
+                        return _jsx("br", {}, `line-${index}`);
+                    if (/^\s+$/u.test(grapheme)) {
+                        return _jsx("span", { className: "inkra-typewriter__space", "data-revealed": isRevealed, children: grapheme }, `space-${index}`);
+                    }
+                    return _jsx(PencilText, { className: "inkra-typewriter__grapheme", "data-revealed": isRevealed, seed: `typewriter-${index}-${grapheme}`, children: grapheme }, `${index}-${grapheme}`);
+                }) }), _jsx("span", { className: "inkra-typewriter__accessible", children: children })] });
+});
+export { isTypewriterPunctuation, splitTypewriterGraphemes, typewriterDelayAfter, } from './model.js';

package/dist/typewriter/model.d.ts

@@ -0,0 +1,7 @@
+export interface TypewriterDelayOptions {
+    speed: number;
+    punctuationDelay: number;
+}
+export declare function splitTypewriterGraphemes(value: string, locale?: string | string[]): string[];
+export declare function isTypewriterPunctuation(grapheme: string): boolean;
+export declare function typewriterDelayAfter(grapheme: string, { speed, punctuationDelay }: TypewriterDelayOptions): number;