@aglyn/besigner-ui 1.0.0-beta.143

package/src/lib/components/node-tree-view.js

@@ -0,0 +1,820 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { canvas, isFeatureEnabled, NODE_ROOT_ID } from "@aglyn/aglyn";
+import * as Besigner from "@aglyn/besigner";
+import { ICON_VARIANT_COLLAPSIBLE_CLOSE, ICON_VARIANT_COLLAPSIBLE_OPEN, ICON_VARIANT_MODIFY_DRAG, ICON_VARIANT_SHOW_MORE_VERTICAL, ICON_VARIANT_VISIBILITY_HIDDEN, ICON_VARIANT_VISIBILITY_SHOWN } from "@aglyn/shared-data-enums";
+import { MdiIcon } from "@aglyn/shared-ui-jsx";
+import { generateComponentClassKeys, styled } from "@aglyn/shared-ui-theme";
+import { noop } from "@aglyn/shared-util-tools";
+import { Box, ClickAwayListener, Collapse, Divider, IconButton, List as MuiList, ListItem as MuiListItem, ListItemButton as MuiListItemButton, listItemButtonClasses, listItemClasses, ListItemIcon as MuiListItemIcon, ListItemText as MuiListItemText, Popper, Stack, Tooltip } from "@mui/material";
+import clsx from "clsx";
+import uniq from "lodash-es/uniq.js";
+import { observer } from "mobx-react-lite";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import useLeafDrag from "../hooks/use-leaf-drag.js";
+import useLeafDrop from "../hooks/use-leaf-drop.js";
+import { isAncestorHidden, isNodeHiddenByAuthor, isNodeHiddenOnSite } from "../utils/canvas-reveal.js";
+import ComponentIconComponent from "./component-icon.component.js";
+import NodeContextMenu from "./node-context-menu.js";
+const classKey = generateComponentClassKeys('TreeView', [
+    'root',
+    'subTreeView',
+    'treeItem',
+    'treeListItem',
+    'dragHandle',
+    'moreButton',
+    'visibilityButton',
+    'itemSelected',
+    'itemHovered',
+    'itemIsDragging',
+    'itemIsDragOver'
+]);
+const TreeView = styled(MuiList)(({ theme })=>({
+        alignItems: 'stretch',
+        flexDirection: 'column',
+        width: 'fit-content',
+        minWidth: '100%',
+        [`& .${listItemButtonClasses.root}`]: {
+            zIndex: 0,
+            paddingTop: 0,
+            paddingBottom: 0,
+            // paddingLeft: 0,
+            borderTopLeftRadius: 4,
+            borderBottomLeftRadius: 4,
+            [[
+                `&:hover`,
+                `&.${listItemButtonClasses.focusVisible}`,
+                `&.${listItemButtonClasses.selected}`,
+                `&.${classKey.itemSelected}`
+            ].join(',')]: {
+                backgroundColor: 'transparent'
+            }
+        },
+        [`& .${listItemClasses.root}`]: {
+            alignItems: 'stretch',
+            flexDirection: 'column',
+            borderTopLeftRadius: 4,
+            borderBottomLeftRadius: 4,
+            [`> .${classKey.treeListItem}`]: {
+                borderTopLeftRadius: 4,
+                borderBottomLeftRadius: 4,
+                [`& .${classKey.dragHandle}, & .${classKey.moreButton}`]: {
+                    visibility: 'hidden'
+                },
+                // An open menu keeps its own button on screen — the pointer has left
+                // the row to reach the menu, so the hover rule no longer holds it.
+                [`& .${classKey.moreButton}[aria-expanded='true']`]: {
+                    visibility: 'visible'
+                },
+                [`&:hover, &.${classKey.itemHovered}`]: {
+                    [`& .${classKey.dragHandle}, & .${classKey.moreButton}`]: {
+                        visibility: 'visible'
+                    },
+                    backgroundColor: `rgba(${theme.vars.palette.primary.darkChannel} / calc(${theme.vars.palette.action.hoverOpacity} + 0.2))`,
+                    [`&:has(> .${listItemButtonClasses.focusVisible})`]: {
+                        backgroundColor: `rgba(${theme.vars.palette.primary.darkChannel} / calc(${theme.vars.palette.action.focusOpacity} + 0.3))`
+                    }
+                },
+                [`&:has(> .${listItemButtonClasses.focusVisible})`]: {
+                    backgroundColor: `rgba(${theme.vars.palette.primary.darkChannel} / calc(${theme.vars.palette.action.focusOpacity} + 0.2))`
+                }
+            },
+            [`&.${classKey.itemSelected}`]: {
+                [`> .${classKey.treeListItem}`]: {
+                    backgroundColor: `rgba(${theme.vars.palette.secondary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})`,
+                    [`&:hover, &.${classKey.itemHovered}`]: {
+                        backgroundColor: `rgba(${theme.vars.palette.secondary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + 0.2))`,
+                        [`&:has(> .${listItemButtonClasses.focusVisible})`]: {
+                            backgroundColor: `rgba(${theme.vars.palette.secondary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + 0.2))`
+                        }
+                    },
+                    [`&:has(> .${listItemButtonClasses.focusVisible})`]: {
+                        backgroundColor: `rgba(${theme.vars.palette.secondary.mainChannel} / ${theme.vars.palette.action.activatedOpacity})`
+                    }
+                }
+            }
+        }
+    }));
+TreeView.displayName = 'TreeView';
+/**
+ * The hierarchy's depth cue (AGL-2486).
+ *
+ * What this replaces was a per-level background tint, and every tint of that
+ * shape has the same fault: it COMPOSITES. Each ancestor of the selection
+ * painted its own overlay, so the row at depth n sat under n of them and its
+ * background walked one step further toward the ink for every level. Against
+ * the console's light palette the previous ramp crossed WCAG AA at the
+ * seventh level (3.85:1) and reached 1.33:1 by the twelfth — the label and
+ * the row had met. Dark mode looked right for the arithmetic reason that the
+ * same darkening moves AWAY from light text, which is exactly why no single
+ * tint direction can serve both schemes.
+ *
+ * Capping the ramp was tried and is not a fix either. A cap only decides
+ * WHERE the cue stops working: past the cap every level paints the same
+ * background, so depth 6 and depth 16 are indistinguishable, and the issue
+ * asks for a cue that reads at depth 8 as clearly as at depth 1.
+ *
+ * So the cue is POSITIONAL rather than tonal. Each nesting level draws one
+ * vertical guide in the row's indent gutter — depth is read by counting
+ * lines, the way a tree view is read everywhere else. Guides are a fixed
+ * colour and a fixed alpha at every level, and they live in the gutter, so
+ * nothing is painted behind the label at all: the row's background is
+ * `background.paper` at depth 1 and at depth 40, in both schemes, and the
+ * text-vs-background contrast ratio is therefore a constant rather than a
+ * function of depth. `hierarchy-depth-contrast.spec.ts` measures it.
+ *
+ * The branch containing the selection is still marked — that is what the old
+ * tint was for — by colouring THAT row's guides with the accent instead. One
+ * row, one element, no stacking possible.
+ */ /** Horizontal indent one nesting level adds, in px. */ export const HIERARCHY_INDENT_STEP = 23;
+/** Width of one guide line, in px. */ export const HIERARCHY_GUIDE_WIDTH = 1;
+/**
+ * Alpha of a guide, over the ink colour of whichever scheme is active.
+ *
+ * Drawn from `text.primary` rather than `divider` so the one value serves
+ * both schemes: the ink is dark on light and light on dark, so the guide
+ * always moves AWAY from the surface it sits on instead of toward the label
+ * — the failure mode of a fixed-direction tint, in miniature.
+ *
+ * 0.45 clears WCAG 1.4.11 (3:1 for a non-text cue) in the WORST of the four
+ * surface/scheme pairings, and is not a number picked by eye: the measured
+ * ratios are 3.35 and 3.32 in light, 3.89 and 4.19 in dark. `divider`, at
+ * 0.12, measures 1.31 — legible as a hairline between panels, invisible as
+ * the thing you are being asked to count. `hierarchy-depth-contrast.spec.ts`
+ * re-derives all four.
+ */ export const HIERARCHY_GUIDE_ALPHA = 0.45;
+/**
+ * Guides a row at `depth` draws, and how wide a gutter they occupy.
+ *
+ * Deliberately unbounded and deliberately linear: the count IS the depth, so
+ * the cue keeps saying something new at every level. It can afford to,
+ * because nothing here is cumulative — a guide is drawn beside the label,
+ * never behind it.
+ */ export function hierarchyGuideCount(depth) {
+    // `strictNullChecks` is off repo-wide, so compare rather than truth-test.
+    return depth >= 2 ? depth - 1 : 0;
+}
+export function hierarchyGutterWidth(depth) {
+    return hierarchyGuideCount(depth) * HIERARCHY_INDENT_STEP;
+}
+/**
+ * The depth-dependent CSS a tree row gets, as a plain object.
+ *
+ * Exported so the contrast spec can read the STYLES rather than a
+ * description of them: the check that no key here is a background COLOUR is
+ * what makes "the depth cue never accumulates toward the text" a property of
+ * the code instead of a claim in a comment.
+ */ export function hierarchyDepthStyles(depth, colors) {
+    const gutter = hierarchyGutterWidth(depth);
+    if (!(gutter > 0)) return {};
+    const gutterFor = (color)=>({
+            // A gradient rather than n nested borders: the rows are siblings that
+            // pad themselves (see the button's `paddingLeft`), not physically
+            // nested boxes, so there is no element per level to hang a border on.
+            backgroundImage: `repeating-linear-gradient(to right, ${color} 0 ${HIERARCHY_GUIDE_WIDTH}px, transparent ${HIERARCHY_GUIDE_WIDTH}px ${HIERARCHY_INDENT_STEP}px)`,
+            backgroundRepeat: 'no-repeat',
+            // Clipped to the indent gutter, so the guides stop where the label
+            // starts and no line is ever drawn behind text.
+            backgroundSize: `${gutter}px 100%`,
+            backgroundPosition: 'left top'
+        });
+    const row = `> .${classKey.treeListItem} > .${listItemButtonClasses.root}`;
+    return {
+        [row]: gutterFor(colors.guide),
+        // The row whose subtree holds the selection. Applied to the row's own
+        // button — one element per row, never an ancestor box wrapping its
+        // descendants — so however many ancestors match, none of them can
+        // stack on top of another.
+        [`&:has(.${classKey.subTreeView}):has(.${classKey.itemSelected}) ${row}`]: gutterFor(colors.activeGuide)
+    };
+}
+const TreeItem = styled(MuiListItem, {
+    shouldForwardProp (propName) {
+        return propName !== 'depth';
+    }
+})(({ theme, depth = 1 })=>{
+    const tv = theme.vars || theme;
+    return hierarchyDepthStyles(depth, {
+        guide: `rgba(${tv.palette.text.primaryChannel} / ${HIERARCHY_GUIDE_ALPHA})`,
+        // Full strength, and the same accent the selected row already uses. A
+        // hairline is a small target for a hue cue, and `#e040fb` measures 3.34
+        // against the lightest surface and 3.78 against the darkest — dropping
+        // its alpha to soften it would spend the whole margin.
+        activeGuide: tv.palette.secondary.main
+    });
+});
+TreeItem.displayName = 'TreeItem';
+const DragHandle = styled(MuiListItemIcon, {
+    shouldForwardProp (propName) {
+        return propName !== 'draggingEnabled';
+    }
+})(({ theme, draggingEnabled })=>({
+        minWidth: 23,
+        padding: theme.spacing(0.75),
+        paddingLeft: 0,
+        borderRadius: '4px',
+        cursor: 'move',
+        pointerEvents: !draggingEnabled ? 'none' : undefined,
+        opacity: !draggingEnabled ? 0.5 : undefined,
+        zIndex: 1
+    }));
+DragHandle.displayName = 'DragHandle';
+const NodeTreeItem = observer(/*#__PURE__*/ forwardRef((props, ref)=>{
+    var _schema_flags, _node_nodes;
+    const { nodeId, className } = props, rest = _object_without_properties_loose(props, [
+        "nodeId",
+        "className"
+    ]);
+    const { expanded, closeIcon, expandIcon, onItemSelect, onItemHover, onItemToggle, onItemFocus } = useContext(TreeViewContext);
+    // console.log('NodeTreeItem', [...expanded])
+    const node = canvas.getNode(nodeId);
+    const schema = node == null ? void 0 : node.componentSchema;
+    const nodeLabel = node == null ? void 0 : node.labelShort;
+    const breadcrumbPath = (node == null ? void 0 : node.breadcrumbPath) || [];
+    const depth = (breadcrumbPath == null ? void 0 : breadcrumbPath.length) - 1;
+    const isRootNode = canvas.isRootNode(node);
+    const dragAllowed = isFeatureEnabled(schema == null ? void 0 : (_schema_flags = schema.flags) == null ? void 0 : _schema_flags.dragging);
+    const collapseIn = expanded == null ? void 0 : expanded.some((i)=>i === nodeId);
+    const isSelected = Besigner.focus.isNodeSelected(node);
+    const isHovered = Besigner.focus.isNodeHovered(node);
+    const dragDisabled = Boolean(isRootNode || !dragAllowed);
+    /**
+     * The row's eye: this element's VISIBILITY.
+     *
+     * `display: none`, on the canvas and on the published site, and nothing
+     * reveals it. The plain "I do not want this on the page" switch every
+     * layer tree has — and, because it is a node FIELD composed last rather
+     * than a style, hiding a Stack laid out with `display: flex` gives that
+     * flex back the moment it is shown again.
+     *
+     * It does NOT write `aglyn-hidden`. That class means something else that
+     * looks the same from outside — "starts hidden, and an interaction shows
+     * it", for a mega-menu panel or a drawer — and it is part of a runtime
+     * contract that the show/hide steps and the canvas reveal both read. A
+     * visibility toggle that wrote it would enrol every hidden element in a
+     * choreography it is not part of. That switch is on the ⋮ menu, named
+     * for what it does.
+     */ const authorHidden = isNodeHiddenByAuthor(node);
+    const hiddenOnSite = isNodeHiddenOnSite(node);
+    /**
+     * Dimmed for either reason. Both mean the element is not on the page,
+     * and a reader scanning the tree is asking that question, not which
+     * mechanism answered it.
+     *
+     * Only the OUTERMOST hidden layer draws it: CSS opacity multiplies
+     * through nesting, so a panel inside a hidden drawer would fade to 0.2
+     * if every hidden level applied its own.
+     */ const dimsSubtree = (authorHidden || hiddenOnSite) && !isAncestorHidden(node);
+    const toggleVisibility = useCallback((e)=>{
+        // The row is a button and a drop target; without this the click
+        // also selects the row under the control.
+        e.stopPropagation();
+        e.preventDefault();
+        if (isRootNode) return;
+        // Through the canvas so it records an undo step and reaches the node
+        // the MAP holds — see `updateNodeFields`.
+        canvas.updateNodeFields(node, {
+            hidden: !authorHidden
+        });
+    }, [
+        node,
+        isRootNode,
+        authorHidden
+    ]);
+    const { attributes: dragAttributes, transform, isDragging, setNodeRef: setDraggableNodeRef, listeners: draggableListeners } = useLeafDrag(node, Besigner.DragType.TREE);
+    const style = transform ? {
+        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+        cursor: 'grab',
+        opacity: 0.5
+    } : undefined;
+    const { setNodeRef: setDroppableNodeRef, isOver } = useLeafDrop(node, undefined, 'tree');
+    const [menuAnchor, setMenuAnchor] = useState(null);
+    /** The open menu, so its own scrolling can be told from the page's. */ const menuRef = useRef(null);
+    const menuOpen = Boolean(menuAnchor);
+    const closeMenu = useCallback(()=>setMenuAnchor(null), []);
+    /**
+     * The anchor for one pointer event: the row's right edge, the pointer's
+     * height. Read once, at the moment of the click — a fixed rect, so the
+     * menu cannot drift while it is open.
+     */ const anchorFor = useCallback((e)=>{
+        var _ref, _ref1;
+        var _e_currentTarget;
+        const row = (_ref = (_e_currentTarget = e.currentTarget) == null ? void 0 : _e_currentTarget.closest(`.${classKey.treeListItem}`)) != null ? _ref : e.currentTarget;
+        const rect = row == null ? void 0 : row.getBoundingClientRect();
+        if (!rect) return null;
+        /**
+       * The PANEL's edge, not the row's.
+       *
+       * A deep row is wider than the panel — the hierarchy scrolls
+       * horizontally, and indentation is what makes it — so `row.right` is a
+       * coordinate off the side of the visible panel, and a menu placed
+       * there opens in the middle of the canvas with a gap behind it. The
+       * nearest ancestor that actually scrolls is the panel, and its right
+       * edge is the boundary the menu should start from.
+       *
+       * Falls back to the row when nothing above it scrolls, which is the
+       * case the row's own edge is the right answer for.
+       */ let scroller = row;
+        while(scroller && scroller.scrollWidth <= scroller.clientWidth){
+            scroller = scroller.parentElement;
+        }
+        const bound = scroller == null ? void 0 : scroller.getBoundingClientRect();
+        const x = Math.min(rect.right, (_ref1 = bound == null ? void 0 : bound.right) != null ? _ref1 : rect.right);
+        const y = e.clientY || rect.top + rect.height / 2;
+        return {
+            getBoundingClientRect: ()=>new DOMRect(x, y, 0, 0)
+        };
+    }, []);
+    const toggleMenu = useCallback((e)=>{
+        // The row is a button and the tree item is a drop target; without this
+        // the click also selects and re-focuses the row underneath the menu.
+        e.stopPropagation();
+        e.preventDefault();
+        const next = anchorFor(e);
+        setMenuAnchor((open)=>open ? null : next);
+    }, [
+        anchorFor
+    ]);
+    /**
+     * Right-click opens the same menu at the pointer. The row already carries
+     * every action a node has, and a layer tree that does not answer a
+     * right-click is one people assume is broken — they find the ⋮ eventually
+     * and read it as a workaround.
+     *
+     * `preventDefault` suppresses the browser's own menu, which is the whole
+     * point; nothing is lost, since the row holds no text to copy and no link
+     * to open.
+     */ // Escape as well as a click outside. A menu opened by a right-click is
+    // dismissed with Escape everywhere else, and the keyboard is the only way
+    // out for anyone not using a pointer. On the document rather than the
+    // Paper: the menu does not take focus when it opens, so a handler on it
+    // would never see the key.
+    useEffect(()=>{
+        if (!menuOpen) return;
+        const onKeyDown = (event)=>{
+            if (event.key === 'Escape') closeMenu();
+        };
+        /**
+       * Scrolling dismisses it, which is what every native context menu does.
+       * The alternative is worse than it sounds: the menu is anchored to a
+       * point on screen, so scrolling the hierarchy slides the row out from
+       * under a menu that stays put — leaving a menu for an element the
+       * reader can no longer see, hanging over the canvas.
+       *
+       * Capture phase: the hierarchy scrolls inside its own container, and a
+       * scroll event from an element does not bubble to the document.
+       */ const onScroll = (event)=>{
+            var _menuRef_current;
+            // Not the menu's own scroll. The Paper caps its height and scrolls,
+            // so a long menu is scrolled the same way anything else is — and
+            // dismissing it for that is dismissing it for being used.
+            const target = event.target;
+            if (target && ((_menuRef_current = menuRef.current) == null ? void 0 : _menuRef_current.contains(target))) return;
+            closeMenu();
+        };
+        document.addEventListener('keydown', onKeyDown);
+        document.addEventListener('scroll', onScroll, true);
+        return ()=>{
+            document.removeEventListener('keydown', onKeyDown);
+            document.removeEventListener('scroll', onScroll, true);
+        };
+    }, [
+        menuOpen,
+        closeMenu
+    ]);
+    /**
+     * Right-click anywhere on the row opens the same menu. The row already
+     * carries every action a node has, and a layer tree that does not answer
+     * a right-click is one people assume is broken — they find the ⋮
+     * eventually and read it as a workaround.
+     *
+     * Anchored to the ROW rather than the pointer, which is the usual desktop
+     * convention and is wrong here: a menu at the cursor opens wherever in
+     * the panel the pointer happened to be, on top of the layer list. Off the
+     * row it always starts at the panel's edge and spills into the canvas.
+     *
+     * `preventDefault` suppresses the browser's own menu, which is the whole
+     * point; nothing is lost, since the row holds no text to copy and no link
+     * to open.
+     */ const openMenuOnRow = useCallback((e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        setMenuAnchor(anchorFor(e));
+    }, [
+        anchorFor
+    ]);
+    if (!node) return /*#__PURE__*/ _jsx(_Fragment, {
+        children: "'Invalid node'"
+    });
+    return /*#__PURE__*/ _jsxs(TreeItem, _extends({
+        ref: ref,
+        // ref={setDraggableNodeRef}
+        "data-aglyn-node": nodeId
+    }, dragAttributes, {
+        depth: depth,
+        onMouseEnter: (e)=>onItemHover(e, nodeId),
+        onFocus: (e)=>onItemFocus(e, nodeId),
+        className: clsx(className, classKey.treeItem, {
+            [classKey.itemSelected]: isSelected,
+            [classKey.itemHovered]: isHovered,
+            [classKey.itemIsDragging]: isDragging,
+            [classKey.itemIsDragOver]: isOver
+        }),
+        disablePadding: true,
+        style: style,
+        sx: dimsSubtree ? {
+            // A hidden layer reads as hidden at a glance, without being
+            // selected or hovered — the row is the only place it is
+            // always on screen, because on the canvas it is by
+            // definition the thing you cannot see.
+            //
+            // On the TreeItem rather than the row, so the dim carries to
+            // every layer underneath: a container that does not ship
+            // takes its contents with it, and a full-strength child row
+            // inside a dimmed parent reads as "this one still ships".
+            //
+            // Held at 0.45 rather than hidden outright so names stay
+            // legible, and nothing here changes what the rows DO — a
+            // hidden element is still one you select, drag, rename and
+            // style.
+            opacity: 0.45,
+            fontStyle: 'italic'
+        } : undefined
+    }, rest, {
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                ref: (e)=>{
+                    setDraggableNodeRef(e);
+                    setDroppableNodeRef(e);
+                },
+                className: classKey.treeListItem,
+                direction: "row",
+                onContextMenu: openMenuOnRow,
+                children: [
+                    !isRootNode && /*#__PURE__*/ _jsx(MuiListItemIcon, _extends({}, draggableListeners, {
+                        className: classKey.dragHandle,
+                        draggable: true,
+                        sx: {
+                            minWidth: 23,
+                            padding: 0.75,
+                            pl: 0,
+                            borderRadius: '4px',
+                            cursor: 'move',
+                            pointerEvents: dragDisabled ? 'none' : undefined,
+                            opacity: dragDisabled ? 0.5 : undefined,
+                            zIndex: 1
+                        },
+                        children: /*#__PURE__*/ _jsx(MdiIcon, {
+                            color: "inherit",
+                            fontSize: "inherit",
+                            path: ICON_VARIANT_MODIFY_DRAG.path
+                        })
+                    })),
+                    /*#__PURE__*/ _jsxs(MuiListItemButton, {
+                        sx: {
+                            // The gutter the depth guides are drawn in — one source for
+                            // both, or the lines would stop landing on the level
+                            // boundaries they mark.
+                            paddingLeft: `${hierarchyGutterWidth(depth)}px`
+                        },
+                        onClick: (e)=>onItemSelect(e, nodeId),
+                        onMouseOver: (e)=>onItemHover(e, nodeId),
+                        dense: true,
+                        children: [
+                            /*#__PURE__*/ _jsx(MuiListItemIcon, {
+                                sx: {
+                                    minWidth: 20,
+                                    mr: '1px'
+                                },
+                                children: /*#__PURE__*/ _jsx(IconButton, {
+                                    color: "default",
+                                    // The chevron is the only control in the row that is not the
+                                    // row itself, and it had no name in any form — a screen
+                                    // reader announced "button", and hovering it said nothing.
+                                    // It states which way it will go, not which way it points.
+                                    "aria-label": collapseIn ? 'Collapse children' : 'Expand children',
+                                    title: collapseIn ? 'Collapse children' : 'Expand children',
+                                    sx: {
+                                        padding: '2px',
+                                        visibility: !(node == null ? void 0 : node.hasNodes) ? 'hidden' : 'visible'
+                                    },
+                                    disabled: !(node == null ? void 0 : node.hasNodes),
+                                    onClick: (e)=>onItemToggle(e, nodeId),
+                                    children: collapseIn ? closeIcon : expandIcon
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(MuiListItemIcon, {
+                                sx: {
+                                    minWidth: 20,
+                                    mr: 0.5,
+                                    fontSize: 14,
+                                    padding: 0.2,
+                                    borderRadius: '0.25em',
+                                    backgroundColor: 'background.default',
+                                    border: 1,
+                                    borderColor: 'divider',
+                                    boxShadow: 1,
+                                    color: 'primary',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    flexDirection: 'column'
+                                },
+                                children: /*#__PURE__*/ _jsx(ComponentIconComponent, {
+                                    component: node == null ? void 0 : node.componentSchema,
+                                    node: node
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(MuiListItemText, {
+                                primary: nodeLabel,
+                                slotProps: {
+                                    primary: {
+                                        noWrap: true,
+                                        sx: {
+                                            maxWidth: '180px',
+                                            width: 'fit-content',
+                                            textOverflow: 'ellipsis'
+                                        }
+                                    }
+                                }
+                            })
+                        ]
+                    }),
+                    !isRootNode && /*#__PURE__*/ _jsx(Tooltip, {
+                        title: authorHidden ? 'Hidden. Click to show it.' : hiddenOnSite ? 'Starts hidden until an interaction shows it. Click to hide it outright.' : 'Visible. Click to hide it — here and on the published site.',
+                        children: /*#__PURE__*/ _jsx(IconButton, {
+                            "aria-label": authorHidden ? `Show ${nodeLabel}` : `Hide ${nodeLabel}`,
+                            "aria-pressed": authorHidden,
+                            className: classKey.visibilityButton,
+                            color: "default",
+                            onClick: toggleVisibility,
+                            size: "small",
+                            sx: {
+                                alignSelf: 'center',
+                                flexShrink: 0,
+                                padding: '2px',
+                                color: 'text.disabled',
+                                // Quiet on a visible element and permanent on a hidden one:
+                                // an eye on every row at full strength turns the hierarchy
+                                // into a column of icons, and the state worth seeing at a
+                                // glance is which elements the site does NOT ship. Focus
+                                // brings it back, so it is reachable by keyboard on a row
+                                // the pointer never touches.
+                                opacity: authorHidden ? 1 : 0,
+                                transition: 'opacity 120ms',
+                                '&:focus-visible': {
+                                    opacity: 1
+                                },
+                                [`.${classKey.treeListItem}:hover &`]: {
+                                    opacity: 1
+                                }
+                            },
+                            children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                fontSize: "inherit",
+                                path: authorHidden ? ICON_VARIANT_VISIBILITY_HIDDEN.path : ICON_VARIANT_VISIBILITY_SHOWN.path
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(IconButton, {
+                        "aria-label": `Actions for ${nodeLabel}`,
+                        "aria-expanded": menuOpen,
+                        "aria-haspopup": "menu",
+                        className: classKey.moreButton,
+                        color: "default",
+                        onClick: toggleMenu,
+                        size: "small",
+                        sx: {
+                            alignSelf: 'center',
+                            flexShrink: 0,
+                            padding: '2px',
+                            mr: 0.25
+                        },
+                        children: /*#__PURE__*/ _jsx(MdiIcon, {
+                            fontSize: "inherit",
+                            path: ICON_VARIANT_SHOW_MORE_VERTICAL.path
+                        })
+                    }),
+                    menuOpen && /*#__PURE__*/ _jsx(Popper, {
+                        anchorEl: menuAnchor,
+                        open: true,
+                        /**
+               * Opens SIDEWAYS, into the canvas (AGL-1405).
+               *
+               * Below the row it covered the hierarchy — including the layer
+               * being acted on, which is the one thing you want to keep
+               * looking at while you read the menu, and it left almost no
+               * panel to click on to dismiss it. To the right there is a
+               * whole canvas to spill over, and it belongs to no control.
+               *
+               * The fallbacks matter for the narrow-window case: `left-*`
+               * only wins when the canvas edge is closer than the menu is
+               * wide, and `bottom-start` is the last resort.
+               */ placement: "right-start",
+                        /**
+               * Kept inside the viewport. Without these the menu was laid
+               * out beside its anchor whatever room was left, so a row near
+               * the bottom of a long hierarchy pushed a 500px menu off the
+               * bottom of the document — and the PAGE grew a scrollbar to
+               * contain it, which moves the editor's own chrome under the
+               * reader.
+               *
+               * `flip` picks another side when this one does not fit;
+               * `preventOverflow` on the cross axis slides it up so a menu
+               * anchored near the bottom edge still lands fully on screen.
+               * The Paper caps its own height and scrolls, so a menu taller
+               * than the window is reachable rather than clipped.
+               */ modifiers: [
+                            {
+                                name: 'flip',
+                                enabled: true,
+                                options: {
+                                    fallbackPlacements: [
+                                        'right-end',
+                                        'left-start',
+                                        'left-end',
+                                        'bottom-start'
+                                    ],
+                                    padding: 8
+                                }
+                            },
+                            {
+                                name: 'preventOverflow',
+                                enabled: true,
+                                options: {
+                                    altAxis: true,
+                                    padding: 8
+                                }
+                            },
+                            // Clear of the row it belongs to, so the layer's name and
+                            // its eye stay readable beside the open menu.
+                            {
+                                name: 'offset',
+                                options: {
+                                    offset: [
+                                        0,
+                                        6
+                                    ]
+                                }
+                            }
+                        ],
+                        // Above the panel, below dialogs and drawers — the same band
+                        // the canvas overlay's copy of this menu sits in.
+                        sx: {
+                            zIndex: (theme)=>theme.zIndex.modal - 1
+                        },
+                        children: /*#__PURE__*/ _jsx(ClickAwayListener, {
+                            onClickAway: closeMenu,
+                            children: /*#__PURE__*/ _jsx(NodeContextMenu, {
+                                ref: menuRef,
+                                node: node,
+                                onAction: closeMenu
+                            })
+                        })
+                    })
+                ]
+            }),
+            (node == null ? void 0 : node.hasNodes) && /*#__PURE__*/ _jsxs(Box, {
+                className: classKey.subTreeView,
+                sx: {
+                    position: 'relative'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Divider, {
+                        orientation: "vertical",
+                        sx: {
+                            position: 'absolute',
+                            height: 1,
+                            left: `${depth <= 1 ? depth < 1 ? 20 - 9 : 34 : depth * 23 + 11}px`,
+                            zIndex: 0,
+                            pointerEvents: 'none'
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(Collapse, {
+                        unmountOnExit: true,
+                        in: collapseIn,
+                        children: /*#__PURE__*/ _jsx(TreeView, {
+                            disablePadding: true,
+                            children: node == null ? void 0 : (_node_nodes = node.nodes) == null ? void 0 : _node_nodes.map((nodeId)=>/*#__PURE__*/ _jsx(NodeTreeItem, {
+                                    nodeId: nodeId
+                                }, nodeId))
+                        })
+                    })
+                ]
+            })
+        ]
+    }));
+}));
+NodeTreeItem.displayName = 'NodeTreeItem';
+const TreeViewContext = /*#__PURE__*/ createContext({
+    expanded: [],
+    // selected: null,
+    closeIcon: '●',
+    expandIcon: '○',
+    onItemSelect: noop,
+    onItemToggle: noop,
+    onItemHover: noop,
+    onItemFocus: noop
+});
+const CloseIcon = /*#__PURE__*/ _jsx(MdiIcon, {
+    fontSize: "small",
+    path: ICON_VARIANT_COLLAPSIBLE_CLOSE.path
+});
+const ExpandIcon = /*#__PURE__*/ _jsx(MdiIcon, {
+    fontSize: "small",
+    path: ICON_VARIANT_COLLAPSIBLE_OPEN.path
+});
+export const NodeTreeView = observer(/*#__PURE__*/ forwardRef((props, ref)=>{
+    const { TreeViewProps } = props, rest = _object_without_properties_loose(props, [
+        "TreeViewProps"
+    ]);
+    const allExpanded = Besigner.focus.getAllExpanded();
+    const manuallyCollapsed = Besigner.focus.getManuallyCollapsed();
+    const expanded = useMemo(()=>{
+        const paths = allExpanded.reduce((acc, i)=>{
+            return [
+                ...acc,
+                ...(i == null ? void 0 : i.breadcrumbPath) || []
+            ];
+        }, []);
+        return uniq(paths).filter((id)=>!manuallyCollapsed.includes(id));
+    }, [
+        allExpanded,
+        manuallyCollapsed
+    ]);
+    const handleTreeItemToggle = useCallback((e, $id)=>{
+        e.stopPropagation();
+        e.preventDefault();
+        const node = canvas.getNode($id);
+        if (!node) return;
+        Besigner.focus.toggleNodeExpansion(node);
+    }, []);
+    const handleTreeItemSelect = useCallback((e, $id)=>{
+        e.stopPropagation();
+        e.preventDefault();
+        const node = canvas.getNode($id);
+        if (!node) return;
+        // Multi-selection modifiers (AGL-8): Shift ranges from the anchor,
+        // Cmd/Ctrl toggles membership, plain click single-selects.
+        if (e.shiftKey) {
+            Besigner.focus.rangeSelectNode(node);
+        } else {
+            Besigner.focus.handleNodeSelection(node, e.metaKey || e.ctrlKey);
+        }
+    }, []);
+    const handleTreeItemHover = useCallback((e, $id)=>{
+        const node = canvas.getNode($id);
+        if (!node) return;
+        Besigner.focus.setHoveredNode(node);
+    }, []);
+    const handleTreeItemFocus = useCallback((e, $id)=>{
+        e.stopPropagation();
+        const node = canvas.getNode($id);
+        if (!node) return;
+        Besigner.focus.setHoveredNode(node);
+    }, []);
+    return /*#__PURE__*/ _jsx(TreeViewContext.Provider, {
+        value: {
+            expanded: expanded,
+            closeIcon: CloseIcon,
+            expandIcon: ExpandIcon,
+            onItemFocus: handleTreeItemFocus,
+            onItemHover: handleTreeItemHover,
+            onItemSelect: handleTreeItemSelect,
+            onItemToggle: handleTreeItemToggle
+        },
+        children: /*#__PURE__*/ _jsx(Box, _extends({
+            ref: ref,
+            component: "nav",
+            id: 'aglyn:node-tree-view',
+            "aria-label": "canvas nodes navigator"
+        }, rest, {
+            children: /*#__PURE__*/ _jsx(TreeView, _extends({
+                className: classKey.root
+            }, TreeViewProps, {
+                children: /*#__PURE__*/ _jsx(NodeTreeItem, {
+                    nodeId: NODE_ROOT_ID
+                })
+            }))
+        }))
+    });
+}));
+NodeTreeView.displayName = 'NodeTreeView';
+NodeTreeView.aglyn = true;
+export default NodeTreeView;
+
+//# sourceMappingURL=node-tree-view.js.map