@next-buildr/editor 2.0.1 → 3.0.0-rc.0

package/dist/panels/layers/flatten.js

@@ -11,16 +11,17 @@ export function childrenWithSlots(doc, node) {
 /**
  * The tree as the rows that are visible: a node's children follow it when it is expanded. Iterative
  * (a document may be deep) and guarded against a node reached twice, so a corrupt document cannot
- * loop it.
+ * loop it. With `only` the tree is filtered: nodes outside the set are left out (the caller puts the
+ * matches and their ancestors in it), and a node counts as having children only among those kept.
  */
-export function flattenTree(doc, expanded) {
+export function flattenTree(doc, expanded, only) {
     const rows = [];
     const seen = new Set();
     const root = doc.nodes[doc.root];
     if (root === undefined)
         return rows;
     const stack = [
-        { id: doc.root, parentId: null, level: 1, pos: 1, size: 1, slot: 'default' },
+        { id: doc.root, parentId: null, level: 1, pos: 1, size: 1, slot: 'default', multi: false },
     ];
     while (stack.length > 0) {
         const frame = stack.pop();
@@ -30,7 +31,7 @@ export function flattenTree(doc, expanded) {
         const node = doc.nodes[frame.id];
         if (node === undefined)
             continue;
-        const children = childrenWithSlots(doc, node);
+        const children = childrenWithSlots(doc, node).filter((child) => only === undefined || only.has(child.id));
         const open = children.length > 0 && expanded.has(frame.id);
         rows.push({
             id: frame.id,
@@ -42,8 +43,10 @@ export function flattenTree(doc, expanded) {
             hasChildren: children.length > 0,
             expanded: open,
             slot: frame.slot,
+            multiSlot: frame.multi,
         });
         if (open) {
+            const multi = new Set(children.map((child) => child.slot)).size > 1;
             for (let i = children.length - 1; i >= 0; i--) {
                 const child = children[i];
                 stack.push({
@@ -53,9 +56,50 @@ export function flattenTree(doc, expanded) {
                     pos: i + 1,
                     size: children.length,
                     slot: child.slot,
+                    multi,
                 });
             }
         }
     }
     return rows;
 }
+/**
+ * The nodes a filter keeps: those `matches` accepts plus every ancestor of one (`only`), and the
+ * ancestors alone (`open`), which the filtered tree shows expanded so each match is in view.
+ * Walks from the root without recursion and visits a node once.
+ */
+export function filterTree(doc, matches) {
+    const only = new Set();
+    const open = new Set();
+    const seen = new Set();
+    const stack = [{ id: doc.root, path: [] }];
+    while (stack.length > 0) {
+        const { id, path } = stack.pop();
+        if (seen.has(id))
+            continue;
+        seen.add(id);
+        const node = doc.nodes[id];
+        if (node === undefined)
+            continue;
+        if (matches(node)) {
+            only.add(id);
+            for (const ancestor of path) {
+                only.add(ancestor);
+                open.add(ancestor);
+            }
+        }
+        const next = [...path, id];
+        for (const child of childrenWithSlots(doc, node))
+            stack.push({ id: child.id, path: next });
+    }
+    return { only, open };
+}
+/** Every node that has children: what "Expand all" opens. */
+export function nodesWithChildren(doc) {
+    const ids = new Set();
+    for (const [id, node] of Object.entries(doc.nodes)) {
+        if (childrenWithSlots(doc, node).length > 0)
+            ids.add(id);
+    }
+    return ids;
+}

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

@@ -1,8 +1,11 @@
+import type { RemoveRequest } from '../../app/contracts.ts';
 /** Every row is this tall, which is what lets the list render only the rows in view. */
-export declare const ROW_HEIGHT = 28;
+export declare const ROW_HEIGHT = 32;
 export interface LayersPanelProps {
     /** The component a "Wrap in container" wraps the selection in. */
     readonly wrapperType?: string;
+    /** Hands a removal to the shell (confirmation, Undo toast); without it the nodes are removed at once. */
+    readonly onRemoveRequest?: (request: RemoveRequest) => void;
 }
 /**
  * The document as a tree (docs/editor.md#layers): a WAI-ARIA tree that is fully operable with the
@@ -10,5 +13,5 @@ export interface LayersPanelProps {
  * 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 declare function LayersPanel({ wrapperType }: LayersPanelProps): import("react").JSX.Element;
+export declare function LayersPanel(props: LayersPanelProps): import("react").JSX.Element;
 //# sourceMappingURL=layers-panel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"layers-panel.d.ts","sourceRoot":"","sources":["../../../src/panels/layers/layers-panel.tsx"],"names":[],"mappings":"AAqCA,wFAAwF;AACxF,eAAO,MAAM,UAAU,KAAK,CAAC;AAS7B,MAAM,WAAW,gBAAgB;IAC/B,kEAAkE;IAClE,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;CAC/B;AAmBD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,WAA0B,EAAE,EAAE,gBAAgB,+BA8X3E"}
+{"version":3,"file":"layers-panel.d.ts","sourceRoot":"","sources":["../../../src/panels/layers/layers-panel.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AA8B5D,wFAAwF;AACxF,eAAO,MAAM,UAAU,KAAK,CAAC;AAS7B,MAAM,WAAW,gBAAgB;IAC/B,kEAAkE;IAClE,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,yGAAyG;IACzG,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;CAC7D;AAmBD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BASlD"}

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

@@ -1,13 +1,17 @@
 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 { useClipboardActions } from '../../clipboard/index.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';
+import { useOptionalShortcutRegistry } from '../../shortcuts/index.js';
+import { hasDescendants } from '../../shortcuts/navigation.js';
+import { pathTo, structureLockedIds, useEditor, useEditorState } from '../../store/index.js';
+import { useViewState } from '../../store/react.js';
+import { ComponentIcon, ContextMenu, Icon, IconButton, Input, SearchField, Tooltip, useStructureLockedNotice, } from '../../ui/index.js';
+import { filterTree, flattenTree, nodesWithChildren } 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;
+export const ROW_HEIGHT = 32;
 const OVERSCAN = 6;
 /** Used until the list has been measured (and where nothing is laid out, as in tests). */
 const FALLBACK_HEIGHT = 400;
@@ -41,9 +45,20 @@ function useIssueNodes() {
  * 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' }) {
+export function LayersPanel(props) {
+    const registry = useOptionalShortcutRegistry();
+    // The editor shell pairs the shortcut and clipboard providers. Standalone trees
+    // still support navigation and commands without requiring either provider.
+    return registry === undefined ? (_jsx(LayersPanelBody, { ...props })) : (_jsx(ClipboardLayersPanel, { ...props }));
+}
+function ClipboardLayersPanel(props) {
+    const clipboard = useClipboardActions();
+    return _jsx(LayersPanelBody, { ...props, clipboard: clipboard });
+}
+function LayersPanelBody({ wrapperType = 'buildr/box', onRemoveRequest, clipboard, }) {
     const t = useT();
     const store = useEditor();
+    const notifyLocked = useStructureLockedNotice();
     const manifest = useManifest();
     const treeId = useId();
     const doc = useEditorState((state) => state.doc);
@@ -52,6 +67,8 @@ export function LayersPanel({ wrapperType = 'buildr/box' }) {
     const hoveredId = useEditorState((state) => state.hoveredId);
     const readOnly = useEditorState((state) => state.readOnly);
     const issueNodes = useIssueNodes();
+    const { hiddenIds, toggleHidden } = useViewState();
+    const hiddenSet = useMemo(() => new Set(hiddenIds), [hiddenIds]);
     const [expanded, setExpanded] = useState(() => new Set([doc.root]));
     const [renaming, setRenaming] = useState(null);
     const [menuTarget, setMenuTarget] = useState(null);
@@ -65,7 +82,15 @@ export function LayersPanel({ wrapperType = 'buildr/box' }) {
     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]);
+    // The filter keeps the blocks whose name or type contains the text, and their ancestors.
+    const [filter, setFilter] = useState('');
+    const needle = filter.trim().toLocaleLowerCase();
+    const kept = useMemo(() => needle === ''
+        ? undefined
+        : filterTree(doc, (candidate) => [candidate.name, componentMeta(manifest, candidate.type)?.label, candidate.type].some((text) => text?.toLocaleLowerCase().includes(needle) === true)), [doc, manifest, needle]);
+    const rows = useMemo(() => kept !== undefined && kept.only.size === 0
+        ? []
+        : flattenTree(doc, kept?.open ?? expanded, kept?.only), [doc, expanded, kept]);
     useRegisterTree(() => {
         const element = scroller.current;
         if (element === null)
@@ -140,8 +165,12 @@ export function LayersPanel({ wrapperType = 'buildr/box' }) {
     // --- doing things ---
     const run = useCallback((command, label) => {
         const result = store.dispatch(command, label !== undefined ? { label } : undefined);
-        setNotice(result.ok ? '' : result.error.message);
-    }, [store]);
+        setNotice(result.ok
+            ? ''
+            : result.error.code === 'command.unlock-not-permitted'
+                ? t('layers.unlockNotPermitted')
+                : result.error.message);
+    }, [store, t]);
     const toggle = useCallback((id, open) => {
         setExpanded((current) => {
             const next = new Set(current);
@@ -152,6 +181,18 @@ export function LayersPanel({ wrapperType = 'buildr/box' }) {
             return next;
         });
     }, []);
+    /** Locking is a document attribute (`node.setAttr` `lock`); unlocking may be refused by the host's `canUnlock`. */
+    const toggleLock = useCallback((id) => {
+        const locked = store.getState().doc.nodes[id]?.lock !== undefined;
+        run({
+            type: 'node.setAttr',
+            payload: {
+                id,
+                key: 'lock',
+                value: locked ? null : { structure: true, content: true, style: true },
+            },
+        });
+    }, [store, run]);
     const startRename = (id) => {
         if (!readOnly && id !== doc.root)
             setRenaming(id);
@@ -165,11 +206,26 @@ export function LayersPanel({ wrapperType = 'buildr/box' }) {
             return;
         run({ type: 'node.setAttr', payload: { id, key: 'name', value: name === '' ? null : name } });
     };
+    /** A block locked for structure (itself or in a locked block) is not removed, moved or duplicated: say why. */
+    const refuseLocked = (ids) => {
+        if (structureLockedIds(doc, ids).length === 0)
+            return false;
+        notifyLocked(ids);
+        return true;
+    };
+    const removeIds = (ids) => {
+        if (refuseLocked(ids))
+            return;
+        if (onRemoveRequest !== undefined)
+            onRemoveRequest({ ids, hasDescendants: hasDescendants(doc, ids) });
+        else
+            run({ type: 'node.remove', payload: { ids } });
+    };
     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 } });
+            removeIds(ids);
     };
     // --- keyboard ---
     const activeIndex = anchorId === null ? -1 : (rowIndex.get(anchorId) ?? -1);
@@ -247,7 +303,7 @@ export function LayersPanel({ wrapperType = 'buildr/box' }) {
         const id = rowOf(event);
         if (id === undefined)
             return;
-        if (event.target.closest('[data-more]') !== null)
+        if (event.target.closest('[data-more], [data-action]') !== null)
             return;
         if (event.target.closest('[data-toggle]') !== null)
             return toggle(id);
@@ -261,7 +317,7 @@ export function LayersPanel({ wrapperType = 'buildr/box' }) {
         const id = rowOf(event);
         if (id === undefined || id === doc.root)
             return;
-        if (event.target.closest('[data-toggle], [data-more]') !== null)
+        if (event.target.closest('[data-toggle], [data-more], [data-action]') !== null)
             return;
         const ids = selected.has(id) ? removable(selectedIds) : [id];
         if (ids.length === 0)
@@ -275,7 +331,7 @@ export function LayersPanel({ wrapperType = 'buildr/box' }) {
     const onDoubleClick = (event) => {
         const id = rowOf(event);
         if (id !== undefined &&
-            event.target.closest('[data-toggle], [data-more]') === null) {
+            event.target.closest('[data-toggle], [data-more], [data-action]') === null) {
             startRename(id);
         }
     };
@@ -308,7 +364,10 @@ export function LayersPanel({ wrapperType = 'buildr/box' }) {
                     id: 'move',
                     label: t('dnd.moveTo'),
                     disabled: readOnly || ids.length === 0,
-                    onSelect: () => setMoving(ids),
+                    onSelect: () => {
+                        if (!refuseLocked(ids))
+                            setMoving(ids);
+                    },
                 },
             ]
             : [];
@@ -316,47 +375,123 @@ export function LayersPanel({ wrapperType = 'buildr/box' }) {
             {
                 id: 'rename',
                 label: t('layers.menu.rename'),
+                kbd: t('layers.shortcut.rename'),
+                shortcut: 'F2',
+                icon: 'pencil-line',
                 disabled: readOnly || isRoot,
                 onSelect: () => startRename(menuTarget),
             },
             {
                 id: 'duplicate',
                 label: t('layers.menu.duplicate'),
+                kbd: t('layers.shortcut.duplicate'),
+                shortcut: 'Control+D',
+                icon: 'copy',
                 disabled: readOnly || ids.length === 0,
-                onSelect: () => run({ type: 'node.duplicate', payload: { ids } }),
+                onSelect: () => {
+                    if (!refuseLocked(ids))
+                        run({ type: 'node.duplicate', payload: { ids } });
+                },
+            },
+            {
+                id: 'copy',
+                label: t('layers.menu.copy'),
+                kbd: t('layers.shortcut.copy'),
+                shortcut: 'Control+C',
+                icon: 'copy',
+                disabled: clipboard === undefined || ids.length === 0,
+                onSelect: () => {
+                    clipboard?.copy?.();
+                },
+            },
+            {
+                id: 'paste',
+                label: t('layers.menu.paste'),
+                kbd: t('layers.shortcut.paste'),
+                shortcut: 'Control+V',
+                icon: 'clipboard-paste',
+                disabled: readOnly || clipboard === undefined,
+                onSelect: () => {
+                    clipboard?.paste?.();
+                },
             },
             {
                 id: 'wrap',
                 label: t('layers.menu.wrap'),
                 disabled: readOnly || ids.length === 0 || !canWrap,
-                onSelect: () => run({ type: 'node.wrap', payload: { ids, wrapper: { type: wrapperType } } }),
+                onSelect: () => {
+                    if (!refuseLocked(ids))
+                        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 } }),
+                onSelect: () => {
+                    if (!refuseLocked([menuTarget]))
+                        run({ type: 'node.unwrap', payload: { id: menuTarget } });
+                },
             },
             ...move,
+            {
+                id: 'hide',
+                label: hiddenSet.has(menuTarget) ? t('layers.menu.show') : t('layers.menu.hide'),
+                icon: hiddenSet.has(menuTarget) ? 'eye' : 'eye-off',
+                onSelect: () => toggleHidden(menuTarget),
+            },
+            {
+                id: 'lock',
+                label: target.lock !== undefined ? t('layers.menu.unlock') : t('layers.menu.lock'),
+                icon: target.lock !== undefined ? 'lock-open' : 'lock',
+                disabled: readOnly || isRoot,
+                onSelect: () => toggleLock(menuTarget),
+            },
             {
                 id: 'delete',
                 label: t('layers.menu.delete'),
+                kbd: t('layers.shortcut.delete'),
+                shortcut: 'Delete',
+                icon: 'trash-2',
                 danger: true,
                 disabled: readOnly || ids.length === 0,
-                onSelect: () => run({ type: 'node.remove', payload: { ids } }),
+                onSelect: () => removeIds(ids),
             },
         ];
         // biome-ignore lint/correctness/useExhaustiveDependencies: startRename and removable read the same inputs
-    }, [menuTarget, doc, selectedIds, manifest, wrapperType, readOnly, canDrag, t, run]);
+    }, [
+        menuTarget,
+        doc,
+        selectedIds,
+        manifest,
+        wrapperType,
+        readOnly,
+        canDrag,
+        t,
+        run,
+        onRemoveRequest,
+        notifyLocked,
+        clipboard,
+        hiddenSet,
+        toggleHidden,
+        toggleLock,
+    ]);
     const activeRow = activeIndex >= 0 ? rows[activeIndex] : undefined;
+    const filtering = needle !== '';
     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
+        }, children: [_jsxs("div", { className: "bd-layers-tools", onKeyDown: (event) => {
+                    // From the filter field the arrow key goes down into the tree.
+                    if (event.key === 'ArrowDown' && event.target instanceof HTMLInputElement) {
+                        event.preventDefault();
+                        scroller.current?.focus();
+                    }
+                }, children: [_jsx(SearchField, { className: "bd-layers-filter", value: filter, onChange: setFilter, label: t('structure.filter'), clearLabel: t('structure.filter.clear'), placeholder: t('structure.filter') }), _jsx(IconButton, { size: "sm", icon: "chevrons-down-up", label: t('structure.collapseAll'), disabled: filtering, onClick: () => setExpanded(new Set([doc.root])) }), _jsx(IconButton, { size: "sm", icon: "chevrons-up-down", label: t('structure.expandAll'), disabled: filtering, onClick: () => setExpanded(new Set(nodesWithChildren(doc))) })] }), filtering && rows.length === 0 ? (_jsx("p", { className: "bd-layers-empty", role: "status", children: t('structure.noMatch') })) : null, _jsx(ContextMenu, { items: menu, label: t('layers.menu'), children: _jsx("div", { ref: scroller, role: "tree", "aria-label": t('structure.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
+                        : 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), hidden: hiddenSet.has(row.id), readOnly: readOnly, onToggleHidden: () => toggleHidden(row.id), onToggleLock: () => toggleLock(row.id), drop: drop !== null && rows[drop.rowIndex]?.id === row.id
                                 ? dropTarget === null
                                     ? 'denied'
                                     : drop.position
@@ -368,15 +503,13 @@ export function LayersPanel({ wrapperType = 'buildr/box' }) {
                         setMoving(null);
                 }, ids: moving ?? [] })) : null] }));
 }
-function Layer({ row, top, domId, selected, hovered, hasIssue, drop, renaming, onRename, onCancelRename, }) {
+function Layer({ row, top, domId, selected, hovered, hasIssue, hidden, readOnly, onToggleHidden, onToggleLock, 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;
@@ -385,22 +518,31 @@ function Layer({ row, top, domId, selected, hovered, hasIssue, drop, renaming, o
     }
     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: {
+    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-hidden": hidden || undefined, "data-locked": node.lock !== undefined || undefined, "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,
-                        }));
-                    } }) })] }));
+        }, 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 })), node.name !== undefined && meta?.label !== undefined ? (_jsx("span", { className: "bd-layer-type", children: meta.label })) : null, row.multiSlot === true &&
+                row.slot !== 'default' &&
+                row.slot !== 'body' &&
+                row.slot !== 'children' ? (_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", "data-badge": badge.key, role: "img", "aria-label": t(badge.key), children: _jsx(Icon, { name: badge.icon }) }) }, badge.key))), _jsxs("span", { className: "bd-layer-actions", "data-row-actions": true, children: [_jsxs("span", { className: "bd-layer-toggles", "data-action": true, children: [_jsx(IconButton, { size: "sm", icon: hidden ? 'eye-off' : 'eye', label: hidden ? t('layers.menu.show') : t('layers.menu.hide'), "aria-pressed": hidden, tabIndex: -1, "data-state": hidden ? 'on' : 'off', onClick: (event) => {
+                                    event.stopPropagation();
+                                    onToggleHidden();
+                                } }), row.parentId === null ? null : (_jsx(IconButton, { size: "sm", icon: node.lock !== undefined ? 'lock' : 'lock-open', label: node.lock !== undefined ? t('layers.menu.unlock') : t('layers.menu.lock'), "aria-pressed": node.lock !== undefined, disabled: readOnly, tabIndex: -1, "data-state": node.lock !== undefined ? 'on' : 'off', onClick: (event) => {
+                                    event.stopPropagation();
+                                    onToggleLock();
+                                } }))] }), _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 }) {