anentrypoint-design 0.0.381 → 0.0.383

package/src/components/editor-primitives/layout.js

@@ -0,0 +1,89 @@
+// Layout primitives — the static structural shapes an editor lays its panes
+// out with: Dock (five-region frame), the BP_* breakpoint scale +
+// useMediaQuery, Grid/GridItem (24-column responsive layout) and Divider.
+// Interactive resizing lives in ./split-panel.js; progressive disclosure in
+// ./collapse.js.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { kids } from './shared.js';
+const h = webjsx.createElement;
+
+export function Dock({ top, left, right, bottom, center } = {}) {
+    return h('div', { class: 'ds-ep-dock' },
+        top    != null ? h('div', { class: 'ds-ep-dock-top' },    ...kids(top))    : null,
+        left   != null ? h('div', { class: 'ds-ep-dock-left' },   ...kids(left))   : null,
+        h('div', { class: 'ds-ep-dock-center' }, ...kids(center)),
+        right  != null ? h('div', { class: 'ds-ep-dock-right' },  ...kids(right))  : null,
+        bottom != null ? h('div', { class: 'ds-ep-dock-bottom' }, ...kids(bottom)) : null
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Breakpoints + useMediaQuery
+// ---------------------------------------------------------------------------
+export const BP_SM = 480;
+export const BP_MD = 768;
+export const BP_LG = 1024;
+export const BP_XL = 1440;
+
+export function useMediaQuery(query) {
+    if (typeof window === 'undefined' || !window.matchMedia) {
+        return { matches: false, addListener: () => {}, removeListener: () => {} };
+    }
+    const mql = window.matchMedia(query);
+    return {
+        get matches() { return mql.matches; },
+        addListener(fn) { mql.addEventListener ? mql.addEventListener('change', fn) : mql.addListener(fn); },
+        removeListener(fn) { mql.removeEventListener ? mql.removeEventListener('change', fn) : mql.removeListener(fn); },
+    };
+}
+
+// ---------------------------------------------------------------------------
+// Grid / GridItem — 24-column responsive layout primitive (screen-real-estate
+// density: dense multi-column panels without a hand-rolled grid-template-
+// columns per consumer). Column-span props are integers 1-24 (or `true` for
+// full-width/auto-grow, or `0` to hide at that breakpoint) evaluated at four
+// tiers mirroring BP_SM/MD/LG/XL (480/768/1024/1440) via media queries in
+// editor-primitives.css — no JS-side matchMedia needed, CSS custom
+// properties + @media do the layout work so it degrades gracefully with
+// SSR/no-hydration. Grid itself is a flex row wrapper; GridItem computes
+// flex-basis/max-width from its span at each tier.
+// ---------------------------------------------------------------------------
+export function Grid({ gap, justify, align, children, key } = {}) {
+    const style = [
+        gap != null ? `gap:${typeof gap === 'number' ? gap + 'px' : gap}` : '',
+        justify ? `justify-content:${justify}` : '',
+        align ? `align-items:${align}` : '',
+    ].filter(Boolean).join(';');
+    return h('div', { key, class: 'ds-ep-grid', style: style || null }, children);
+}
+
+function gridSpanStyle(prefix, val) {
+    if (val === undefined) return '';
+    if (val === true) return `--${prefix}-basis:100%;--${prefix}-grow:1;--${prefix}-display:inherit;`;
+    if (val === 0) return `--${prefix}-display:none;`;
+    const pct = Math.max(0, Math.min(100, (100 / 24) * val));
+    return `--${prefix}-basis:${pct}%;--${prefix}-grow:0;--${prefix}-display:inherit;`;
+}
+
+export function GridItem({ xs, sm, md, lg, xl, children, key } = {}) {
+    const style = [
+        gridSpanStyle('xs', xs),
+        gridSpanStyle('sm', sm),
+        gridSpanStyle('md', md),
+        gridSpanStyle('lg', lg),
+        gridSpanStyle('xl', xl),
+    ].join('');
+    return h('div', { key, class: 'ds-ep-grid-item', style: style || null }, children);
+}
+
+// ---------------------------------------------------------------------------
+// Divider — plain rule, optional centered text label, optional vertical
+// orientation (for segmenting dense panels without a full Section wrapper).
+// ---------------------------------------------------------------------------
+export function Divider({ label, vertical = false, key } = {}) {
+    if (vertical) return h('span', { key, class: 'ds-ep-divider ds-ep-divider-vertical', role: 'separator', 'aria-orientation': 'vertical' });
+    if (!label) return h('hr', { key, class: 'ds-ep-divider' });
+    return h('div', { key, class: 'ds-ep-divider ds-ep-divider-labeled', role: 'separator' },
+        h('span', { class: 'ds-ep-divider-label' }, label));
+}

package/src/components/editor-primitives/modals.js

@@ -0,0 +1,89 @@
+// Modal surfaces — Drawer (slide-in from an edge) and Dialog (centered
+// modal with an actions row). Both are controlled via `open`/`onClose`,
+// backdrop-dismissable (Dialog opt-in via `dismissible`), Escape-closing,
+// and Tab-trapped through the shared trapTabKey helper.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { kids, FOCUSABLE_SEL, trapTabKey } from './shared.js';
+const h = webjsx.createElement;
+
+// ---------------------------------------------------------------------------
+// Drawer — slide-in from side. side='left'|'right'|'bottom'.
+// ---------------------------------------------------------------------------
+export function Drawer({ side = 'left', open = false, onClose, children, ariaLabel } = {}) {
+    if (!open) return null;
+    const onKey = (e) => { if (e.key === 'Escape') { e.preventDefault(); onClose && onClose(); } };
+    return h('div', {
+        class: 'ds-ep-drawer-backdrop',
+        onmousedown: (e) => { if (e.target === e.currentTarget) onClose && onClose(); },
+    },
+        h('div', {
+            class: 'ds-ep-drawer side-' + side,
+            role: 'dialog',
+            'aria-modal': 'true',
+            'aria-label': ariaLabel || 'Drawer',
+            tabindex: '-1',
+            onkeydown: onKey,
+            ref: (el) => {
+                if (!el || el._dsTrap) return;
+                el._dsTrap = true;
+                el.addEventListener('keydown', (e) => trapTabKey(el, e));
+                // setTimeout(0), not queueMicrotask — see Dialog's identical comment
+                // below: the opening click's own default focus can win a same-tick race.
+                setTimeout(() => {
+                    const f = el.querySelector(FOCUSABLE_SEL);
+                    (f || el).focus();
+                }, 0);
+            },
+        }, ...kids(children))
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Dialog — modal. actions = [{label, onClick, kind?}], dismissible (backdrop).
+// ---------------------------------------------------------------------------
+export function Dialog({ title, open = false, onClose, children, actions = [], dismissible = false, ariaLabel } = {}) {
+    if (!open) return null;
+    const opener = (typeof document !== 'undefined') ? document.activeElement : null;
+    const close = () => {
+        if (onClose) onClose();
+        if (opener && opener.focus) queueMicrotask(() => opener.focus());
+    };
+    const onKey = (e) => { if (e.key === 'Escape') { e.preventDefault(); close(); } };
+    return h('div', {
+        class: 'ds-ep-dialog-backdrop',
+        onmousedown: (e) => { if (dismissible && e.target === e.currentTarget) close(); },
+    },
+        h('div', {
+            class: 'ds-ep-dialog',
+            role: 'dialog',
+            'aria-modal': 'true',
+            'aria-label': ariaLabel || title || 'Dialog',
+            tabindex: '-1',
+            onkeydown: onKey,
+            ref: (el) => {
+                if (!el || el._dsTrap) return;
+                el._dsTrap = true;
+                el.addEventListener('keydown', (e) => trapTabKey(el, e));
+                // setTimeout(0), not queueMicrotask: the triggering click's own default
+                // focus-on-click can win a same-tick microtask race and leave focus on
+                // the trigger button instead of the dialog, breaking Escape/Tab-trap
+                // for keyboard users (keydown only bubbles from the focused element).
+                setTimeout(() => {
+                    const f = el.querySelector(FOCUSABLE_SEL);
+                    (f || el).focus();
+                }, 0);
+            },
+        },
+            title != null ? h('div', { class: 'ds-ep-dialog-head' }, h('h2', { class: 'ds-ep-dialog-title' }, title)) : null,
+            h('div', { class: 'ds-ep-dialog-body' }, ...kids(children)),
+            actions && actions.length ? h('div', { class: 'ds-ep-dialog-actions' },
+                ...actions.map((a, i) => h('button', {
+                    key: i, type: 'button',
+                    class: 'ds-ep-dialog-btn' + (a.kind ? (' kind-' + a.kind) : ''),
+                    onclick: (e) => { if (a.onClick) a.onClick(e); if (a.close !== false) close(); }
+                }, a.label))
+            ) : null
+        )
+    );
+}

package/src/components/editor-primitives/pager.js

@@ -0,0 +1,74 @@
+// ---------------------------------------------------------------------------
+// Pager — prev/next paginator with a page label. Generalizes gmsniff's
+// gm-pager. page is 1-indexed; pageCount<=1 disables both buttons (no
+// divide-by-zero, no dead-end enabled control). total (optional) renders an
+// item-count suffix ("42 items") alongside the page label.
+//
+// numbered=true switches to a compact numbered-button row (screen-real-estate
+// dense mode) instead of the prev/next label: always shows first, last, the
+// current page, and up to `siblingCount` neighbors either side, collapsing
+// gaps into an ellipsis span. Falls back to prev/next automatically when
+// pageCount<=1. The prev/next contract (default) is untouched.
+// ---------------------------------------------------------------------------
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+const h = webjsx.createElement;
+
+function buildPageRange(count, page, siblingCount) {
+    const limit = siblingCount * 2 + 3; // first + last + current + siblings
+    if (count <= limit) return Array.from({ length: count }, (_, i) => i + 1);
+    const pages = new Set([1, count, page]);
+    for (let i = 1; i <= siblingCount; i++) {
+        pages.add(page - i);
+        pages.add(page + i);
+    }
+    const sorted = [...pages].filter((p) => p >= 1 && p <= count).sort((a, b) => a - b);
+    const result = [];
+    let prev = null;
+    for (const p of sorted) {
+        if (prev !== null && p - prev > 1) result.push('...');
+        result.push(p);
+        prev = p;
+    }
+    return result;
+}
+
+export function Pager({ page = 1, pageCount = 1, onPage, total, itemLabel = 'items', numbered = false, siblingCount = 1 } = {}) {
+    const safeCount = Math.max(1, pageCount || 1);
+    const safePage = Math.min(Math.max(1, page || 1), safeCount);
+    const atStart = safePage <= 1;
+    const atEnd = safePage >= safeCount;
+    const prevBtn = h('button', {
+        type: 'button', class: 'ds-ep-pager-btn', disabled: atStart ? 'disabled' : null,
+        'aria-label': 'previous page',
+        onclick: () => { if (!atStart && onPage) onPage(safePage - 1); },
+    }, '<-');
+    const nextBtn = h('button', {
+        type: 'button', class: 'ds-ep-pager-btn', disabled: atEnd ? 'disabled' : null,
+        'aria-label': 'next page',
+        onclick: () => { if (!atEnd && onPage) onPage(safePage + 1); },
+    }, '->');
+    if (numbered) {
+        const range = buildPageRange(safeCount, safePage, Math.max(1, siblingCount || 1));
+        return h('div', { class: 'ds-ep-pager ds-ep-pager-numbered', role: 'group', 'aria-label': 'pagination' },
+            prevBtn,
+            ...range.map((p, i) => p === '...'
+                ? h('span', { key: 'ellipsis-' + i, class: 'ds-ep-pager-ellipsis' }, '...')
+                : h('button', {
+                    key: 'p' + p, type: 'button',
+                    class: 'ds-ep-pager-num' + (p === safePage ? ' is-current' : ''),
+                    'aria-current': p === safePage ? 'page' : null,
+                    'aria-label': 'page ' + p,
+                    onclick: () => { if (p !== safePage && onPage) onPage(p); },
+                }, String(p))),
+            nextBtn,
+            total != null ? h('span', { class: 'ds-ep-pager-total' }, total + ' ' + itemLabel) : null
+        );
+    }
+    return h('div', { class: 'ds-ep-pager', role: 'group', 'aria-label': 'pagination' },
+        prevBtn,
+        h('span', { class: 'ds-ep-pager-label' },
+            'page ' + safePage + ' / ' + safeCount + (total != null ? ' (' + total + ' ' + itemLabel + ')' : '')),
+        nextBtn
+    );
+}

package/src/components/editor-primitives/property-grid.js

@@ -0,0 +1,57 @@
+// Property grid — the EDITABLE property-inspector family: PropertyGrid
+// container, PropertyField (label + control + hint), PropertyGridRow (a
+// divider-separated row wrapper) and InlineEditableField (borderless-until-
+// focus text/textarea input with an explicit error state). Read-only debug
+// readouts live in ./diagnostics.js instead.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { kids } from './shared.js';
+const h = webjsx.createElement;
+
+export function PropertyGrid({ children } = {}) {
+    return h('div', { class: 'ds-ep-propgrid', role: 'group' }, ...kids(children));
+}
+
+export function PropertyField({ label, hint, inline = false, children } = {}) {
+    return h('label', { class: 'ds-ep-propfield' + (inline ? ' inline' : '') },
+        h('span', { class: 'ds-ep-propfield-label' }, label),
+        h('span', { class: 'ds-ep-propfield-value' }, ...kids(children)),
+        hint != null ? h('span', { class: 'ds-ep-propfield-hint' }, hint) : null
+    );
+}
+
+// ---------------------------------------------------------------------------
+// PropertyGridRow — a PropertyGrid row wrapper with a bottom-border divider
+// (last-child border suppressed), for editors that need a stronger per-row
+// visual separation than the default PropertyGrid gap gives (e.g. a list of
+// independently-editable records like PRD/mutable rows). Generalizes
+// gmsniff's gm-propgrid-row.
+// ---------------------------------------------------------------------------
+export function PropertyGridRow({ children, key } = {}) {
+    return h('div', { key, class: 'ds-ep-propgrid-row' }, ...kids(children));
+}
+
+// ---------------------------------------------------------------------------
+// InlineEditableField — a borderless-until-focus text input that inherits
+// surrounding font (no boxed input chrome), with an explicit error state
+// (aria-invalid + danger-token border) for live per-field validation.
+// Generalizes gmsniff's gm-inline-input / gm-field-error pair. Renders a
+// <textarea> when multiline is set (for longer free-text edits), else a
+// single-line <input>.
+// ---------------------------------------------------------------------------
+export function InlineEditableField({ value = '', placeholder, onInput, onChange, error, multiline = false, rows = 3, ariaLabel, disabled = false } = {}) {
+    const cls = 'ds-ep-inline-input' + (error ? ' has-error' : '');
+    const common = {
+        class: cls,
+        value,
+        placeholder,
+        disabled: disabled ? 'disabled' : null,
+        'aria-label': ariaLabel,
+        'aria-invalid': error ? 'true' : null,
+        oninput: onInput ? (e) => onInput(e.target.value, e) : null,
+        onchange: onChange ? (e) => onChange(e.target.value, e) : null,
+    };
+    return multiline
+        ? h('textarea', { ...common, rows })
+        : h('input', { ...common, type: 'text' });
+}

package/src/components/editor-primitives/shared.js

@@ -0,0 +1,18 @@
+// Editor-primitives internal shared helpers — NOT part of the public export
+// surface (src/components.js re-exports none of these). `kids` normalizes a
+// children prop to an array; FOCUSABLE_SEL/trapTabKey are the focus-trap
+// mechanics shared by FocusTrap, Drawer and Dialog.
+
+export function kids(c) { return c == null ? [] : (Array.isArray(c) ? c : [c]); }
+
+export const FOCUSABLE_SEL = 'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
+
+export function trapTabKey(rootEl, e) {
+    if (e.key !== 'Tab') return;
+    const nodes = rootEl.querySelectorAll(FOCUSABLE_SEL);
+    if (!nodes.length) { e.preventDefault(); return; }
+    const first = nodes[0], last = nodes[nodes.length - 1];
+    const active = (rootEl.getRootNode && rootEl.getRootNode().activeElement) || document.activeElement;
+    if (e.shiftKey && active === first) { e.preventDefault(); last.focus(); }
+    else if (!e.shiftKey && active === last) { e.preventDefault(); first.focus(); }
+}

package/src/components/editor-primitives/split-panel.js

@@ -0,0 +1,101 @@
+// Resizable split — ResizeHandle (the draggable/keyboard-nudgeable separator)
+// and SplitPanel (two children separated by one). Stateful via DOM: the
+// dragged size is persisted across applyDiff re-renders by the pane's ref.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { kids } from './shared.js';
+const h = webjsx.createElement;
+
+// ---------------------------------------------------------------------------
+// ResizeHandle — splitter, axis = 'horizontal' (vertical bar, horiz drag)
+// or 'vertical' (horizontal bar, vertical drag). onResize(delta:px).
+// ---------------------------------------------------------------------------
+export function ResizeHandle({ axis = 'horizontal', onResize, ariaLabel } = {}) {
+    const isH = axis === 'horizontal';
+    let dragOrigin = null;
+    const step = 8;
+    const emit = (dx, dy) => { if (onResize) onResize(isH ? dx : dy); };
+    const onPointerDown = (e) => {
+        e.preventDefault();
+        dragOrigin = { x: e.clientX, y: e.clientY };
+        e.currentTarget.setPointerCapture && e.currentTarget.setPointerCapture(e.pointerId);
+    };
+    const onPointerMove = (e) => {
+        if (!dragOrigin) return;
+        const dx = e.clientX - dragOrigin.x;
+        const dy = e.clientY - dragOrigin.y;
+        dragOrigin = { x: e.clientX, y: e.clientY };
+        emit(dx, dy);
+    };
+    const onPointerUp = (e) => {
+        dragOrigin = null;
+        try { e.currentTarget.releasePointerCapture && e.currentTarget.releasePointerCapture(e.pointerId); } catch { /* swallow: pointer capture may already be released, drag end still proceeds */ }
+    };
+    const onKeyDown = (e) => {
+        const k = e.key;
+        if (isH) {
+            if (k === 'ArrowLeft') { e.preventDefault(); emit(-step, 0); }
+            else if (k === 'ArrowRight') { e.preventDefault(); emit(step, 0); }
+            else if (k === 'Home') { e.preventDefault(); emit(-1e6, 0); }
+            else if (k === 'End') { e.preventDefault(); emit(1e6, 0); }
+        } else {
+            if (k === 'ArrowUp') { e.preventDefault(); emit(0, -step); }
+            else if (k === 'ArrowDown') { e.preventDefault(); emit(0, step); }
+            else if (k === 'Home') { e.preventDefault(); emit(0, -1e6); }
+            else if (k === 'End') { e.preventDefault(); emit(0, 1e6); }
+        }
+    };
+    return h('div', {
+        class: 'ds-ep-resize ' + (isH ? 'axis-h' : 'axis-v'),
+        role: 'separator',
+        tabindex: '0',
+        'aria-orientation': isH ? 'vertical' : 'horizontal',
+        'aria-label': ariaLabel || 'Resize',
+        onpointerdown: onPointerDown,
+        onpointermove: onPointerMove,
+        onpointerup: onPointerUp,
+        onpointercancel: onPointerUp,
+        onkeydown: onKeyDown,
+    });
+}
+
+// ---------------------------------------------------------------------------
+// SplitPanel — two children separated by a ResizeHandle. Stateful via DOM.
+// ---------------------------------------------------------------------------
+export function SplitPanel({ orientation = 'horizontal', initial = '50%', min = 80, max = Infinity, children } = {}) {
+    const isH = orientation === 'horizontal';
+    const ks = kids(children);
+    const first = ks[0] || null;
+    const second = ks[1] || null;
+    const sizeProp = isH ? 'width' : 'height';
+    const initStyle = typeof initial === 'number' ? initial + 'px' : initial;
+    let rootEl = null;
+    // The dragged size is persisted here so a re-render (applyDiff reconciling
+    // the pane's style back to the initial value) does NOT reset the user's
+    // resize. onResize records it; the pane's ref re-applies it after each diff.
+    let draggedSize = null;
+    const applySize = (a) => {
+        if (!a) return;
+        if (draggedSize != null) { a.style[sizeProp] = draggedSize + 'px'; a.style.flex = '0 0 auto'; }
+    };
+    const onResize = (delta) => {
+        if (!rootEl) return;
+        const a = rootEl.firstChild;
+        if (!a) return;
+        const rect = a.getBoundingClientRect();
+        const curr = isH ? rect.width : rect.height;
+        const total = isH ? rootEl.getBoundingClientRect().width : rootEl.getBoundingClientRect().height;
+        const next = Math.max(min, Math.min(max === Infinity ? total - min : max, curr + delta));
+        draggedSize = next;
+        a.style[sizeProp] = next + 'px';
+        a.style.flex = '0 0 auto';
+    };
+    return h('div', {
+        class: 'ds-ep-split ' + (isH ? 'horiz' : 'vert'),
+        ref: (el) => { rootEl = el; }
+    },
+        h('div', { class: 'ds-ep-split-pane', style: '--split-size:' + initStyle + ';flex:0 0 auto', ref: applySize }, first),
+        ResizeHandle({ axis: isH ? 'horizontal' : 'vertical', onResize }),
+        h('div', { class: 'ds-ep-split-pane grow', style: 'flex:1 1 0;min-' + sizeProp + ':0' }, second)
+    );
+}

package/src/components/editor-primitives/toast.js

@@ -0,0 +1,59 @@
+// ---------------------------------------------------------------------------
+// Toast — Toast({message,kind,duration}) component + imperative toast(opts).
+// ---------------------------------------------------------------------------
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+const h = webjsx.createElement;
+
+export function Toast({ message, kind = 'info', duration = 3000, onClose } = {}) {
+    return h('div', {
+        class: 'ds-ep-toast kind-' + kind,
+        role: 'status',
+        'aria-live': 'polite',
+        ref: (el) => {
+            if (!el || el._dsToast) return;
+            el._dsToast = true;
+            if (duration > 0) setTimeout(() => { onClose && onClose(); el.classList.add('leaving'); }, duration);
+        }
+    }, message);
+}
+
+let _toastHostEl = null;
+function ensureToastHost() {
+    if (typeof document === 'undefined') return null;
+    if (_toastHostEl && document.body.contains(_toastHostEl)) return _toastHostEl;
+    _toastHostEl = document.createElement('div');
+    _toastHostEl.className = 'ds-ep-toast-host';
+    document.body.appendChild(_toastHostEl);
+    return _toastHostEl;
+}
+
+export function toast({ message, kind = 'info', duration = 3000, actionLabel, onAction } = {}) {
+    const host = ensureToastHost();
+    if (!host) return () => {};
+    const el = document.createElement('div');
+    el.className = 'ds-ep-toast kind-' + kind;
+    el.setAttribute('role', 'status');
+    el.setAttribute('aria-live', 'polite');
+    const text = document.createElement('span');
+    text.className = 'ds-ep-toast-msg';
+    text.textContent = message;
+    el.appendChild(text);
+    const dismiss = () => {
+        if (!el.parentNode) return;
+        el.classList.add('leaving');
+        setTimeout(() => { el.parentNode && el.parentNode.removeChild(el); }, 200);
+    };
+    if (actionLabel && onAction) {
+        el.classList.add('has-action');
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'ds-ep-toast-action';
+        btn.textContent = actionLabel;
+        btn.onclick = () => onAction(dismiss);
+        el.appendChild(btn);
+    }
+    host.appendChild(el);
+    if (duration > 0) setTimeout(dismiss, duration);
+    return dismiss;
+}

package/src/components/editor-primitives/tree.js

@@ -0,0 +1,75 @@
+// Tree — TreeView container + TreeItem row, implementing the WAI-ARIA tree
+// keyboard model (Up/Down between visible rows, Right expands/enters, Left
+// collapses, Enter/Space activate, Home/End jump). Visuals via
+// editor-primitives.css; no hex/rgba literals here.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { Icon } from '../shell.js';
+import { kids } from './shared.js';
+const h = webjsx.createElement;
+
+export function TreeView({ children } = {}) {
+    return h('div', { class: 'ds-ep-tree', role: 'tree' }, ...kids(children));
+}
+
+export function TreeItem({ label, glyph, tag, depth = 0, selected = false, expanded = false, onSelect, onToggle, children, hasChildren } = {}) {
+    // Support legacy 'hasChildren' prop for future; infer from children param
+    const hasKids = hasChildren != null ? hasChildren : (children != null);
+    // Tree keyboard model (WAI-ARIA): Up/Down move between visible rows, Right expands/enters,
+    // Left collapses/moves to parent, Enter/Space activate, Home/End jump to first/last visible.
+    const onRowKeyDown = (e) => {
+        const row = e.currentTarget;
+        const tree = row.closest('[role="tree"]');
+        if (!tree) return;
+        const rows = Array.from(tree.querySelectorAll('.ds-ep-tree-row'));
+        const idx = rows.indexOf(row);
+        if (idx < 0) return;
+        const move = (i) => {
+            const r = rows[Math.max(0, Math.min(rows.length - 1, i))];
+            if (r) r.focus();
+        };
+        switch (e.key) {
+            case 'ArrowDown': e.preventDefault(); move(idx + 1); break;
+            case 'ArrowUp':   e.preventDefault(); move(idx - 1); break;
+            case 'Home':      e.preventDefault(); move(0); break;
+            case 'End':       e.preventDefault(); move(rows.length - 1); break;
+            case 'ArrowRight':
+                if (hasKids && !expanded && onToggle) { e.preventDefault(); onToggle(); }
+                else if (hasKids && expanded) { e.preventDefault(); move(idx + 1); }
+                break;
+            case 'ArrowLeft':
+                if (hasKids && expanded && onToggle) { e.preventDefault(); onToggle(); }
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                if (onSelect) onSelect();
+                break;
+        }
+    };
+    return h('div', {
+        class: 'ds-ep-tree-item' + (selected ? ' selected' : ''),
+        role: 'treeitem',
+        'aria-selected': selected ? 'true' : 'false',
+        'aria-expanded': hasKids ? String(!!expanded) : null,
+        'aria-level': depth + 1
+    },
+        h('div', {
+            class: 'ds-ep-tree-row',
+            style: 'padding-left:calc(' + depth + ' * var(--tree-indent,12px) + var(--tree-base-indent,6px))',
+            tabindex: selected ? '0' : '-1',
+            onclick: () => onSelect && onSelect(),
+            onkeydown: onRowKeyDown
+        },
+            h('span', {
+                class: 'ds-ep-tree-twist' + (expanded ? ' open' : ''),
+                'aria-hidden': 'true',
+                onclick: (e) => { e.stopPropagation(); if (hasKids && onToggle) onToggle(); }
+            }, hasKids ? Icon('chevron-right') : ''),
+            glyph != null ? h('span', { class: 'ds-ep-tree-glyph', 'aria-hidden': 'true' }, glyph) : null,
+            h('span', { class: 'ds-ep-tree-label' }, label),
+            tag != null ? h('span', { class: 'ds-ep-tree-tag' }, tag) : null
+        ),
+        hasKids && expanded ? h('div', { class: 'ds-ep-tree-children', role: 'group' }, ...kids(children)) : null
+    );
+}