@next-buildr/editor 0.0.0-stage → 2.0.0

package/dist/panels/layers/layers-panel.js

@@ -0,0 +1,428 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { componentMeta, useManifest } from '../../app/manifest.js';
+import { MoveToDialog, useDragAutoscroll, useDragAvailable, useDragPress, useDragState, useRegisterTree, } from '../../dnd/index.js';
+import { useT } from '../../messages/index.js';
+import { pathTo, useEditor, useEditorState } from '../../store/index.js';
+import { ComponentIcon, ContextMenu, Icon, IconButton, Input, Tooltip, } from '../../ui/index.js';
+import { flattenTree } from './flatten.js';
+/** Every row is this tall, which is what lets the list render only the rows in view. */
+export const ROW_HEIGHT = 28;
+const OVERSCAN = 6;
+/** Used until the list has been measured (and where nothing is laid out, as in tests). */
+const FALLBACK_HEIGHT = 400;
+/** Horizontal step per nesting level; CSS reads it as `--layer-indent`. */
+const INDENT = 14;
+/** The left padding of a row, before the indent; CSS reads it as `--layer-pad`. */
+const PAD = 4;
+/** The nodes that have an issue, from the last validation and accessibility run. */
+function useIssueNodes() {
+    const validation = useEditorState((state) => state.validation);
+    return useMemo(() => {
+        const ids = new Set();
+        if (validation === undefined)
+            return ids;
+        for (const issue of validation.issues) {
+            const [head, id] = issue.path ?? [];
+            const named = issue.details?.['nodeId'];
+            if (head === 'nodes' && typeof id === 'string')
+                ids.add(id);
+            else if (typeof named === 'string')
+                ids.add(named);
+        }
+        for (const issue of validation.a11y)
+            ids.add(issue.nodeId);
+        return ids;
+    }, [validation]);
+}
+/**
+ * The document as a tree (docs/editor.md#layers): a WAI-ARIA tree that is fully operable with the
+ * keyboard, virtualized (only the rows in view exist), kept in step with the selection and hover in
+ * the store (the canvas and the tree show the same node), with rename, badges and a context menu.
+ * Focus stays on the tree and `aria-activedescendant` names the row; the selection follows it.
+ */
+export function LayersPanel({ wrapperType = 'buildr/box' }) {
+    const t = useT();
+    const store = useEditor();
+    const manifest = useManifest();
+    const treeId = useId();
+    const doc = useEditorState((state) => state.doc);
+    const selectedIds = useEditorState((state) => state.selectedIds);
+    const anchorId = useEditorState((state) => state.anchorId);
+    const hoveredId = useEditorState((state) => state.hoveredId);
+    const readOnly = useEditorState((state) => state.readOnly);
+    const issueNodes = useIssueNodes();
+    const [expanded, setExpanded] = useState(() => new Set([doc.root]));
+    const [renaming, setRenaming] = useState(null);
+    const [menuTarget, setMenuTarget] = useState(null);
+    const [notice, setNotice] = useState('');
+    const [scrollTop, setScrollTop] = useState(0);
+    const [height, setHeight] = useState(FALLBACK_HEIGHT);
+    const scroller = useRef(null);
+    const reveal = useRef(null);
+    const [moving, setMoving] = useState(null);
+    const press = useDragPress();
+    const canDrag = useDragAvailable();
+    const drop = useDragState((state) => (state.over === 'tree' ? state.tree : null));
+    const dropTarget = useDragState((state) => (state.over === 'tree' ? state.target : null));
+    const rows = useMemo(() => flattenTree(doc, expanded), [doc, expanded]);
+    useRegisterTree(() => {
+        const element = scroller.current;
+        if (element === null)
+            return undefined;
+        const box = element.getBoundingClientRect();
+        return {
+            viewport: { left: box.left, top: box.top, width: box.width, height: box.height },
+            scrollTop: element.scrollTop,
+            rows,
+            rowHeight: ROW_HEIGHT,
+        };
+    });
+    useDragAutoscroll(scroller);
+    const selected = useMemo(() => new Set(selectedIds), [selectedIds]);
+    const rowIndex = useMemo(() => new Map(rows.map((row, i) => [row.id, i])), [rows]);
+    // --- windowing ---
+    useEffect(() => {
+        const element = scroller.current;
+        if (element === null)
+            return;
+        const measure = () => setHeight(element.clientHeight > 0 ? element.clientHeight : FALLBACK_HEIGHT);
+        measure();
+        const Observer = globalThis.ResizeObserver;
+        if (Observer === undefined)
+            return;
+        const observer = new Observer(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    const first = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - OVERSCAN);
+    const last = Math.min(rows.length, Math.ceil((scrollTop + height) / ROW_HEIGHT) + OVERSCAN);
+    const visible = rows.slice(first, last);
+    const scrollToIndex = useCallback((index) => {
+        const element = scroller.current;
+        if (element === null)
+            return;
+        const top = index * ROW_HEIGHT;
+        const view = element.clientHeight > 0 ? element.clientHeight : FALLBACK_HEIGHT;
+        let next = element.scrollTop;
+        if (top < next)
+            next = top;
+        else if (top + ROW_HEIGHT > next + view)
+            next = top + ROW_HEIGHT - view;
+        if (next !== element.scrollTop)
+            element.scrollTop = next;
+        setScrollTop(next);
+    }, []);
+    // --- the selection shows in the tree: its ancestors open, and it scrolls into view ---
+    // Only a change of the selection reveals; an edit elsewhere must not move the list.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: see above
+    useEffect(() => {
+        if (anchorId === null)
+            return;
+        reveal.current = anchorId;
+        const ancestors = pathTo(doc, anchorId).slice(0, -1);
+        if (ancestors.some((id) => !expanded.has(id))) {
+            setExpanded((current) => new Set([...current, ...ancestors]));
+        }
+    }, [anchorId]);
+    // `anchorId` is here so that a new selection is looked for even when the rows did not change.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: see above
+    useEffect(() => {
+        const id = reveal.current;
+        if (id === null)
+            return;
+        const index = rowIndex.get(id);
+        if (index === undefined)
+            return;
+        reveal.current = null;
+        scrollToIndex(index);
+    }, [rowIndex, scrollToIndex, anchorId]);
+    // --- doing things ---
+    const run = useCallback((command, label) => {
+        const result = store.dispatch(command, label !== undefined ? { label } : undefined);
+        setNotice(result.ok ? '' : result.error.message);
+    }, [store]);
+    const toggle = useCallback((id, open) => {
+        setExpanded((current) => {
+            const next = new Set(current);
+            if (open ?? !next.has(id))
+                next.add(id);
+            else
+                next.delete(id);
+            return next;
+        });
+    }, []);
+    const startRename = (id) => {
+        if (!readOnly && id !== doc.root)
+            setRenaming(id);
+    };
+    const commitRename = (id, text) => {
+        setRenaming(null);
+        scroller.current?.focus();
+        const name = text.trim();
+        const current = doc.nodes[id]?.name ?? '';
+        if (name === current)
+            return;
+        run({ type: 'node.setAttr', payload: { id, key: 'name', value: name === '' ? null : name } });
+    };
+    const removable = (ids) => ids.filter((id) => id !== doc.root);
+    const remove = () => {
+        const ids = removable(selectedIds);
+        if (ids.length > 0)
+            run({ type: 'node.remove', payload: { ids } });
+    };
+    // --- keyboard ---
+    const activeIndex = anchorId === null ? -1 : (rowIndex.get(anchorId) ?? -1);
+    const goTo = (index, mode) => {
+        const row = rows[Math.max(0, Math.min(rows.length - 1, index))];
+        if (row === undefined)
+            return;
+        store.select(row.id, { mode });
+        scrollToIndex(rowIndex.get(row.id) ?? 0);
+    };
+    const onKeyDown = (event) => {
+        if (event.target !== event.currentTarget || event.ctrlKey || event.metaKey || event.altKey) {
+            return;
+        }
+        const row = activeIndex >= 0 ? rows[activeIndex] : undefined;
+        const mode = event.shiftKey ? 'add' : 'replace';
+        let handled = true;
+        switch (event.key) {
+            case 'ArrowDown':
+                goTo(activeIndex + 1, mode);
+                break;
+            case 'ArrowUp':
+                goTo(activeIndex < 0 ? 0 : activeIndex - 1, mode);
+                break;
+            case 'Home':
+                goTo(0, mode);
+                break;
+            case 'End':
+                goTo(rows.length - 1, mode);
+                break;
+            case 'ArrowRight':
+                if (row === undefined)
+                    goTo(0, 'replace');
+                else if (row.hasChildren && !row.expanded)
+                    toggle(row.id, true);
+                else if (row.hasChildren)
+                    goTo(activeIndex + 1, 'replace');
+                break;
+            case 'ArrowLeft':
+                if (row === undefined)
+                    break;
+                if (row.expanded)
+                    toggle(row.id, false);
+                else if (row.parentId !== null) {
+                    store.select(row.parentId);
+                    scrollToIndex(rowIndex.get(row.parentId) ?? 0);
+                }
+                break;
+            case 'Enter':
+            case ' ':
+                if (row !== undefined)
+                    store.select(row.id, { mode: 'replace' });
+                break;
+            case 'F2':
+                if (row !== undefined)
+                    startRename(row.id);
+                break;
+            case 'Delete':
+            case 'Backspace':
+                if (!readOnly)
+                    remove();
+                break;
+            default:
+                handled = false;
+        }
+        if (handled)
+            event.preventDefault();
+    };
+    // --- pointer ---
+    const rowOf = (event) => {
+        const element = event.target?.closest?.('[data-node-id]');
+        return element?.getAttribute('data-node-id') ?? undefined;
+    };
+    const onClick = (event) => {
+        const id = rowOf(event);
+        if (id === undefined)
+            return;
+        if (event.target.closest('[data-more]') !== null)
+            return;
+        if (event.target.closest('[data-toggle]') !== null)
+            return toggle(id);
+        const mode = event.shiftKey ? 'add' : event.ctrlKey || event.metaKey ? 'toggle' : 'replace';
+        store.select(id, { mode });
+        scroller.current?.focus();
+    };
+    const onPointerDown = (event) => {
+        if (press === undefined || readOnly || renaming !== null)
+            return;
+        const id = rowOf(event);
+        if (id === undefined || id === doc.root)
+            return;
+        if (event.target.closest('[data-toggle], [data-more]') !== null)
+            return;
+        const ids = selected.has(id) ? removable(selectedIds) : [id];
+        if (ids.length === 0)
+            return;
+        const node = doc.nodes[id];
+        const label = ids.length > 1
+            ? `${ids.length} ${t('dnd.ghost.nodes')}`
+            : (node?.name ?? componentMeta(manifest, node?.type ?? '')?.label ?? node?.type ?? id);
+        press({ kind: 'nodes', ids }, label, event);
+    };
+    const onDoubleClick = (event) => {
+        const id = rowOf(event);
+        if (id !== undefined &&
+            event.target.closest('[data-toggle], [data-more]') === null) {
+            startRename(id);
+        }
+    };
+    const onPointerOver = (event) => {
+        const id = rowOf(event) ?? null;
+        if (id !== hoveredId)
+            store.setHovered(id);
+    };
+    const onContextMenu = (event) => {
+        const id = rowOf(event) ?? anchorId;
+        if (id === null)
+            return;
+        if (!selected.has(id))
+            store.select(id);
+        setMenuTarget(id);
+    };
+    // --- the menu ---
+    // The helpers below only close over `doc`, which is a dependency.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: see above
+    const menu = useMemo(() => {
+        const target = menuTarget === null ? undefined : doc.nodes[menuTarget];
+        if (target === undefined || menuTarget === null)
+            return [];
+        const ids = removable(selectedIds.includes(menuTarget) ? selectedIds : [menuTarget]);
+        const isRoot = menuTarget === doc.root;
+        const canWrap = componentMeta(manifest, wrapperType) !== undefined;
+        const move = canDrag
+            ? [
+                {
+                    id: 'move',
+                    label: t('dnd.moveTo'),
+                    disabled: readOnly || ids.length === 0,
+                    onSelect: () => setMoving(ids),
+                },
+            ]
+            : [];
+        return [
+            {
+                id: 'rename',
+                label: t('layers.menu.rename'),
+                disabled: readOnly || isRoot,
+                onSelect: () => startRename(menuTarget),
+            },
+            {
+                id: 'duplicate',
+                label: t('layers.menu.duplicate'),
+                disabled: readOnly || ids.length === 0,
+                onSelect: () => run({ type: 'node.duplicate', payload: { ids } }),
+            },
+            {
+                id: 'wrap',
+                label: t('layers.menu.wrap'),
+                disabled: readOnly || ids.length === 0 || !canWrap,
+                onSelect: () => run({ type: 'node.wrap', payload: { ids, wrapper: { type: wrapperType } } }),
+            },
+            {
+                id: 'unwrap',
+                label: t('layers.menu.unwrap'),
+                disabled: readOnly || isRoot || target.slots === undefined,
+                onSelect: () => run({ type: 'node.unwrap', payload: { id: menuTarget } }),
+            },
+            ...move,
+            {
+                id: 'delete',
+                label: t('layers.menu.delete'),
+                danger: true,
+                disabled: readOnly || ids.length === 0,
+                onSelect: () => run({ type: 'node.remove', payload: { ids } }),
+            },
+        ];
+        // biome-ignore lint/correctness/useExhaustiveDependencies: startRename and removable read the same inputs
+    }, [menuTarget, doc, selectedIds, manifest, wrapperType, readOnly, canDrag, t, run]);
+    const activeRow = activeIndex >= 0 ? rows[activeIndex] : undefined;
+    const rowDomId = (id) => `${treeId}-${id}`;
+    return (_jsxs("div", { className: "bd-layers", style: {
+            '--layer-row': `${ROW_HEIGHT}px`,
+            '--layer-indent': `${INDENT}px`,
+            '--layer-pad': `${PAD}px`,
+        }, children: [_jsx(ContextMenu, { items: menu, label: t('layers.menu'), children: _jsx("div", { ref: scroller, role: "tree", "aria-label": t('layers.title'), "aria-multiselectable": "true", "aria-activedescendant": activeRow !== undefined && activeIndex >= first && activeIndex < last
+                        ? rowDomId(activeRow.id)
+                        : undefined, tabIndex: 0, className: "bd-layers-scroll", onScroll: (event) => setScrollTop(event.currentTarget.scrollTop), onKeyDown: onKeyDown, onClick: onClick, onPointerDown: onPointerDown, onDoubleClick: onDoubleClick, onPointerOver: onPointerOver, onPointerLeave: () => store.setHovered(null), onContextMenu: onContextMenu, children: _jsx("div", { className: "bd-layers-list", style: { height: rows.length * ROW_HEIGHT }, children: visible.map((row, i) => (_jsx(Layer, { row: row, top: (first + i) * ROW_HEIGHT, domId: rowDomId(row.id), selected: selected.has(row.id), hovered: hoveredId === row.id, hasIssue: issueNodes.has(row.id), drop: drop !== null && rows[drop.rowIndex]?.id === row.id
+                                ? dropTarget === null
+                                    ? 'denied'
+                                    : drop.position
+                                : undefined, renaming: renaming === row.id, onRename: (text) => commitRename(row.id, text), onCancelRename: () => {
+                                setRenaming(null);
+                                scroller.current?.focus();
+                            } }, row.id))) }) }) }), _jsx("p", { className: "bd-layers-notice", role: "status", children: notice }), canDrag ? (_jsx(MoveToDialog, { open: moving !== null, onOpenChange: (open) => {
+                    if (!open)
+                        setMoving(null);
+                }, ids: moving ?? [] })) : null] }));
+}
+function Layer({ row, top, domId, selected, hovered, hasIssue, drop, renaming, onRename, onCancelRename, }) {
+    const t = useT();
+    const manifest = useManifest();
+    const { node } = row;
+    const meta = componentMeta(manifest, node.type);
+    const label = node.name ?? meta?.label ?? node.type;
+    const badges = [];
+    if (node.lock !== undefined)
+        badges.push({ key: 'layers.badge.lock', icon: 'lock' });
+    if (node.visibleIf !== undefined)
+        badges.push({ key: 'layers.badge.visibleIf', icon: 'eye' });
+    const bp = node.styles?.bp;
+    if (bp !== undefined && Object.keys(bp).length > 0) {
+        badges.push({ key: 'layers.badge.breakpoints', icon: 'monitor-smartphone' });
+    }
+    if (hasIssue)
+        badges.push({ key: 'layers.badge.issues', icon: 'triangle-alert' });
+    return (_jsxs("div", { role: "treeitem", id: domId, "data-node-id": row.id, "aria-level": row.level, "aria-posinset": row.posInSet, "aria-setsize": row.setSize, "aria-selected": selected, "aria-expanded": row.hasChildren ? row.expanded : undefined, className: "bd-layer", "data-selected": selected, "data-hovered": hovered, "data-drop": drop, style: {
+            top,
+            height: ROW_HEIGHT,
+            paddingLeft: PAD + (row.level - 1) * INDENT,
+            '--layer-level': row.level - 1,
+        }, children: [_jsx("span", { className: "bd-layer-toggle", "data-toggle": true, "aria-hidden": "true", children: row.hasChildren ? _jsx(Icon, { name: row.expanded ? 'chevron-down' : 'chevron-right' }) : null }), _jsx("span", { className: "bd-layer-icon", "data-icon": meta?.icon, "aria-hidden": "true", children: _jsx(ComponentIcon, { meta: meta }) }), renaming ? (_jsx(RenameField, { initial: node.name ?? '', placeholder: meta?.label ?? node.type, onCommit: onRename, onCancel: onCancelRename })) : (_jsx("span", { className: "bd-layer-label", children: label })), row.slot !== 'default' ? _jsx("span", { className: "bd-layer-slot", children: row.slot }) : null, badges.map((badge) => (_jsx(Tooltip, { content: t(badge.key), children: _jsx("span", { className: "bd-layer-badge", role: "img", "aria-label": t(badge.key), children: _jsx(Icon, { name: badge.icon }) }) }, badge.key))), _jsx("span", { className: "bd-layer-more", "data-more": true, children: _jsx(IconButton, { icon: "ellipsis", label: t('layers.more'), tabIndex: -1, onClick: (event) => {
+                        // The menu is the tree's own context menu: ask for it where the button is.
+                        event.stopPropagation();
+                        const box = event.currentTarget.getBoundingClientRect();
+                        event.currentTarget.dispatchEvent(new MouseEvent('contextmenu', {
+                            bubbles: true,
+                            cancelable: true,
+                            clientX: box.left,
+                            clientY: box.bottom,
+                        }));
+                    } }) })] }));
+}
+/** The name field of a layer being renamed: it ends once, whether by Enter, Escape or leaving it. */
+function RenameField({ initial, placeholder, onCommit, onCancel }) {
+    const t = useT();
+    const finished = useRef(false);
+    const finish = (end) => {
+        if (finished.current)
+            return;
+        finished.current = true;
+        end();
+    };
+    return (_jsx(Input, { className: "bd-layer-rename", "aria-label": t('layers.rename'), defaultValue: initial, placeholder: placeholder, 
+        // biome-ignore lint/a11y/noAutofocus: the field opens because the person asked to rename
+        autoFocus: true, onKeyDown: (event) => {
+            event.stopPropagation();
+            const text = event.currentTarget.value;
+            if (event.key === 'Enter')
+                finish(() => onCommit(text));
+            else if (event.key === 'Escape')
+                finish(onCancel);
+        }, onBlur: (event) => {
+            const text = event.currentTarget.value;
+            finish(() => onCommit(text));
+        }, onClick: (event) => event.stopPropagation() }));
+}

package/dist/panels/layers/layers-panel.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=layers-panel.test.d.ts.map

package/dist/panels/layers/layers-panel.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layers-panel.test.d.ts","sourceRoot":"","sources":["../../../src/panels/layers/layers-panel.test.tsx"],"names":[],"mappings":""}