@aglyn/besigner-ui 1.0.0-beta.143

package/src/lib/components/node-overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/node-overlay.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2023 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { canvas } from '@aglyn/aglyn'\nimport * as Besigner from '@aglyn/besigner'\nimport { useIsomorphicLayoutEffect } from '@aglyn/shared-ui-jsx'\nimport {\n  type ElementFragmentRects,\n  getElementFragmentRects,\n} from '@aglyn/shared-util-dom'\nimport {\n  Popper as MuiPopper,\n  type PopperProps as MuiPopperProps,\n} from '@mui/material'\nimport { observer } from 'mobx-react-lite'\nimport { forwardRef, useMemo, useState } from 'react'\nimport NodeOutline from './node-outline'\nimport { isInlineEditWithin } from '../utils/inline-text-edit.store'\nimport NodeQuickActions from './node-quick-actions'\n\n/**\n * What a Popper anchors to when it is not an element. It is popper's own\n * `VirtualElement`, stated structurally: popper is a dependency of MUI's and\n * not of this package, so importing its type would make the published package\n * name a module it never declares.\n */\ninterface VirtualElement {\n  getBoundingClientRect: () => DOMRect\n  contextElement?: Element\n}\n\nconst outerModifiers = [\n  {\n    name: 'flip',\n    enabled: false,\n    options: {\n      altBoundary: false,\n      rootBoundary: 'viewport',\n      padding: 0,\n    },\n  },\n  {\n    name: 'preventOverflow',\n    enabled: false,\n    options: {\n      altAxis: false,\n      altBoundary: false,\n      tether: false,\n      rootBoundary: 'viewport',\n      padding: 0,\n    },\n  },\n]\n\nconst innerModifiers = [\n  {\n    name: 'flip',\n    enabled: true,\n    options: {\n      altBoundary: true,\n      rootBoundary: 'viewport',\n      padding: 0,\n    },\n  },\n  {\n    name: 'preventOverflow',\n    enabled: true,\n    options: {\n      altAxis: true,\n      altBoundary: true,\n      tether: true,\n      rootBoundary: 'viewport',\n      padding: 0,\n    },\n  },\n]\n\nconst DEFAULT_RECT = {\n  top: 0,\n  left: 0,\n  width: 0,\n  height: 0,\n} as DOMRect\n\nexport function serializeRect(rect: DOMRect): any {\n  return JSON.parse(JSON.stringify(rect || DEFAULT_RECT))\n}\n\nconst DEFAULT_GEOMETRY: ElementFragmentRects = {\n  fragments: [DEFAULT_RECT as any],\n  union: DEFAULT_RECT as any,\n  first: DEFAULT_RECT as any,\n}\n\n/**\n * Whole-pixel identity of a measured geometry (AGL-2486).\n *\n * The measuring callback runs on every scroll event anywhere on the page, on\n * every resize, and on every ResizeObserver tick. Before this it called\n * `setRect(serializeRect(...))` unconditionally — a NEW object each time, so\n * scrolling a side panel re-rendered this observer and everything under it at\n * event rate even though the element had not moved. Fragment sets are larger,\n * and committing a fresh ARRAY every frame is exactly the shape that froze a\n * tab in the collaborator overlay on 2026-08-22.\n *\n * MEASURING is cheap; COMMITTING is not. Rounding first means sub-pixel\n * jitter cannot churn a render on its own. This is strictly less per-event\n * work than the single-rect code did, not more.\n */\nfunction fingerprintGeometry(geometry: ElementFragmentRects): string {\n  return geometry.fragments\n    .map(\n      (rect) =>\n        `${Math.round(rect.left)},${Math.round(rect.top)},` +\n        `${Math.round(rect.width)},${Math.round(rect.height)}`,\n    )\n    .join(';')\n}\n\nexport interface NodeOverlayProps extends Partial<MuiPopperProps> {\n  variant: 'hovered' | 'selected'\n}\n\nconst NodeOverlay = observer(\n  forwardRef<any, NodeOverlayProps>((props, ref) => {\n    const { variant, ...rest } = props || {}\n\n    const state =\n      variant === 'selected'\n        ? Besigner.focus.getLastSelected()\n        : Besigner.focus.getHovered()\n    const $id = state?.$id\n    const node = canvas.getNode($id)\n\n    const elementRef = Besigner.refs.get($id)\n    // Node.index throws for parentless nodes (the root, or a node whose\n    // parent isn't loaded) — selecting the root via the breadcrumbs must not\n    // crash the overlay.\n    const nodeIndex = node?.parent ? node.index : null\n    /**\n     * The selection chrome stands down while this node is being edited in\n     * place (AGL-2486).\n     *\n     * This overlay paints a translucent FILL behind the node as well as an\n     * outline (`node-outline.tsx`). While the author is typing, that tint is\n     * the one thing standing between the in-place surface and its whole\n     * promise — that the text looks exactly as it renders, on the background\n     * it renders on. It is redundant during an edit anyway: the caret and the\n     * toolbar already say which element is being edited.\n     *\n     * The geometry is no longer a second reason to suppress it: the\n     * chrome below is drawn from `getClientRects()`, one outline per line\n     * fragment, so a SELECTED wrapped inline run is outlined correctly too.\n     * Standing the fill down during an edit remains right for its own\n     * reason — the in-place surface must look exactly as it renders.\n     */\n    const isBeingEdited = isInlineEditWithin(elementRef?.current ?? null)\n    const isOpen = Boolean(elementRef?.current) && !isBeingEdited\n    const [geometry, setGeometry] =\n      useState<ElementFragmentRects>(DEFAULT_GEOMETRY)\n    const { union: rect, fragments, first } = geometry\n\n    useIsomorphicLayoutEffect(() => {\n      const el = elementRef?.current\n      if (!el || !('getBoundingClientRect' in el)) return\n\n      /**\n       * The element's REAL shape, not its bounding box (AGL-2486).\n       *\n       * A wrapped inline run is a set of line fragments, and one rectangle\n       * cannot describe it — see `getElementFragmentRects` for why the union\n       * is not merely imprecise but a different shape, and why an outline\n       * drawn from it misses the text on the new line. A block yields one\n       * fragment that IS the bounding rect, so block geometry is unaffected.\n       */\n      let committed = ''\n      const update = () => {\n        const next = getElementFragmentRects(el)\n        const fingerprint = fingerprintGeometry(next)\n        if (fingerprint === committed) return\n        committed = fingerprint\n        setGeometry(next)\n      }\n      update()\n\n      // Re-sync when the element or its shadow-DOM host resizes (covers prop\n      // changes that affect layout, e.g. flexDirection column→row) and when\n      // the canvas container resizes or the window resizes.\n      // ResizeObserver is not in every jsdom setup, and an unguarded\n      // constructor in a layout effect takes the whole overlay down with it.\n      // The listeners below still carry scroll and resize. Same guard, for\n      // the same reason, as `use-anchored-rect.ts`.\n      const ro =\n        typeof ResizeObserver === 'function' ? new ResizeObserver(update) : null\n      ro?.observe(el)\n      const shadowHost = (el.getRootNode() as ShadowRoot | null)?.host ?? null\n      if (shadowHost) ro?.observe(shadowHost)\n      window.addEventListener('resize', update, { passive: true })\n\n      // Scrolling any ancestor (the canvas container, panels, or the page\n      // body) shifts getBoundingClientRect() values without triggering a\n      // resize — capture-phase listener catches them all.\n      window.addEventListener('scroll', update, { passive: true, capture: true })\n\n      return () => {\n        ro?.disconnect()\n        window.removeEventListener('resize', update)\n        window.removeEventListener('scroll', update, { capture: true })\n      }\n      // Node?.index changes when the node is reordered among siblings (e.g.\n      // \"shift up\"/\"shift down\"). Reordering moves the same DOM element to a\n      // new position without resizing it, so ResizeObserver won't catch it —\n      // this dependency forces a rect recompute when sibling order changes.\n    }, [elementRef, nodeIndex])\n\n    // Popper types its anchor rect as a full `DOMRect`; the measured rects\n    // are plain geometry and carry no `toJSON`, which popper never calls.\n    const virtualElement = useMemo<() => VirtualElement>(() => {\n      return () => ({\n        getBoundingClientRect: () => rect as unknown as DOMRect,\n      })\n    }, [rect])\n\n    /**\n     * Where the label chip, the quick actions and the DRAG affordance hang\n     * (AGL-2486).\n     *\n     * They used to hang off the union rect, and a fragment set has no obvious\n     * single anchor. The union corner is the wrong one: an inline run that\n     * begins mid-line and wraps has a union whose left edge comes from the\n     * SECOND line, so a chip placed there floats above a sibling's text\n     * rather than above the element it names — and the drag handle would be\n     * offered at a point the element does not occupy.\n     *\n     * The first fragment is where the run STARTS in reading order. It is\n     * where the eye already is, it is always on the element, and for a block\n     * — every one of which has exactly one fragment — it is the union, so\n     * nothing moves for the overwhelming majority of nodes.\n     */\n    const anchorElement = useMemo<() => VirtualElement>(() => {\n      return () => ({\n        getBoundingClientRect: () => first as unknown as DOMRect,\n      })\n    }, [first])\n\n    return (\n      <MuiPopper\n        ref={ref}\n        anchorEl={virtualElement}\n        placement=\"top-start\"\n        modifiers={outerModifiers}\n        open={isOpen}\n        keepMounted\n        // The anchor rect is viewport-relative; fixed positioning matches it\n        // and, unlike the default absolute strategy, cannot extend the\n        // document — an overlay past the fold otherwise grows the page,\n        // which grows the scroll range, which moves the overlay again\n        // (infinite scroll feedback).\n        popperOptions={{ strategy: 'fixed' }}\n        // Overlays belong to the canvas layer: rendering in place (no body\n        // portal) keeps them inside the viewport's stacking context, so the\n        // designer chrome (app bars, breadcrumbs) always paints above them.\n        disablePortal\n        // Transition\n        {...rest}\n      >\n        <div>\n          {/* One outline per line fragment, positioned relative to the\n              union the popper is anchored on. A block has exactly one\n              fragment and it IS the union, so it lands at 0,0 with the\n              union's size — the same box, from the same numbers, as\n              before AGL-2486. The chip renders once, below, so a two-line\n              heading reads as one selected element with two line boxes,\n              which is what a browser's own selection looks like. */}\n          {fragments.map((fragment, index) => (\n            <NodeOutline\n              key={index}\n              node={node}\n              data-aglyn-fragment={index}\n              style={{\n                left: fragment.left - rect.left,\n                top: fragment.top - rect.top,\n                right: 'auto',\n                bottom: 'auto',\n                width: fragment.width,\n                height: fragment.height,\n              }}\n            />\n          ))}\n\n          <MuiPopper\n            open={isOpen}\n            anchorEl={anchorElement}\n            placement={variant === 'hovered' ? 'top-start' : undefined}\n            modifiers={innerModifiers}\n            popperOptions={{ strategy: 'fixed' }}\n            disablePortal\n            // KeepMounted\n            // transition\n            sx={{\n              ['&[data-popper-placement^=top] #aglyn\\\\:element-overlay-label']:\n                {\n                  borderTopLeftRadius: 3,\n                  borderTopRightRadius: 3,\n                  borderBottomLeftRadius: 0,\n                  borderBottomRightRadius: 0,\n                },\n              ['&[data-popper-placement^=bottom] #aglyn\\\\:element-overlay-label']:\n                {\n                  borderTopLeftRadius: 0,\n                  borderTopRightRadius: 0,\n                  borderBottomLeftRadius: 3,\n                  borderBottomRightRadius: 3,\n                },\n            }}\n          >\n            <NodeQuickActions\n              node={node}\n              variant={variant === 'selected' ? 'actions' : 'label'}\n            />\n          </MuiPopper>\n        </div>\n      </MuiPopper>\n    )\n  }),\n)\n\nNodeOverlay.displayName = 'NodeOverlay'\n\nexport default NodeOverlay\n"],"names":["canvas","Besigner","useIsomorphicLayoutEffect","getElementFragmentRects","Popper","MuiPopper","observer","forwardRef","useMemo","useState","NodeOutline","isInlineEditWithin","NodeQuickActions","outerModifiers","name","enabled","options","altBoundary","rootBoundary","padding","altAxis","tether","innerModifiers","DEFAULT_RECT","top","left","width","height","serializeRect","rect","JSON","parse","stringify","DEFAULT_GEOMETRY","fragments","union","first","fingerprintGeometry","geometry","map","Math","round","join","NodeOverlay","props","ref","variant","rest","state","focus","getLastSelected","getHovered","$id","node","getNode","elementRef","refs","get","nodeIndex","parent","index","isBeingEdited","current","isOpen","Boolean","setGeometry","el","committed","update","next","fingerprint","ro","ResizeObserver","observe","shadowHost","getRootNode","host","window","addEventListener","passive","capture","disconnect","removeEventListener","virtualElement","getBoundingClientRect","anchorElement","anchorEl","placement","modifiers","open","keepMounted","popperOptions","strategy","disablePortal","div","fragment","data-aglyn-fragment","style","right","bottom","undefined","sx","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","displayName"],"mappings":"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"}

package/src/lib/components/node-quick-actions.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @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 type * as Aglyn from '@aglyn/aglyn';
+import { type StackProps } from '@mui/material';
+export interface NodeQuickActionsProps extends StackProps {
+    node: Aglyn.NodeSchema;
+    variant?: 'label' | 'actions';
+}
+export declare const NodeQuickActions: import("react").FunctionComponent<Omit<NodeQuickActionsProps, "ref"> & import("react").RefAttributes<any>>;
+export default NodeQuickActions;

package/src/lib/components/node-quick-actions.js

@@ -0,0 +1,284 @@
+/**
+ * @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 } from "react/jsx-runtime";
+import * as Besigner from "@aglyn/besigner";
+import { ICON_VARIANT_MODIFY_ADD, ICON_VARIANT_MODIFY_DRAG, ICON_VARIANT_SHOW_MORE_VERTICAL } from "@aglyn/shared-data-enums";
+import { SrOnly } from "@aglyn/shared-ui-jsx";
+import { MdiIcon } from "@aglyn/shared-ui-jsx";
+import { styled } from "@aglyn/shared-ui-theme";
+import { Button as MuiButton, Divider, Stack, Tooltip as MuiTooltip, Typography } from "@mui/material";
+import { observer } from "mobx-react-lite";
+import { forwardRef, useCallback, useState } from "react";
+import { Else, If, Then } from "react-if";
+import useAddElementDrawerCallback from "../hooks/use-add-element-drawer-callback.js";
+import ComponentIconComponent from "./component-icon.component.js";
+import { clearCanvasContextMenu, isCanvasContextMenuRequested } from "../utils/canvas-context-menu.js";
+import NodeContextMenu from "./node-context-menu.js";
+const ActionButton = styled(MuiButton)(({ theme })=>({
+        borderRadius: `0.2em`,
+        marginLeft: theme.spacing(-0.2),
+        pointerEvent: 'unset',
+        paddingTop: theme.spacing(0.1),
+        paddingBottom: theme.spacing(0.1),
+        paddingRight: theme.spacing(0.15),
+        paddingLeft: theme.spacing(0.15),
+        fontSize: theme.typography.pxToRem(16),
+        minWidth: 20,
+        '&.MuiButtonGroup-grouped': {
+            minWidth: 25
+        }
+    }));
+const LabelAction = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { children, ButtonProps, icon, SrOnlyProps } = props, rest = _object_without_properties_loose(props, [
+        "children",
+        "ButtonProps",
+        "icon",
+        "SrOnlyProps"
+    ]);
+    return /*#__PURE__*/ _jsx(MuiTooltip, _extends({
+        ref: ref
+    }, rest, {
+        children: /*#__PURE__*/ _jsxs(ActionButton, _extends({
+            variant: 'text',
+            color: 'inherit'
+        }, ButtonProps, {
+            children: [
+                /*#__PURE__*/ _jsx(MdiIcon, _extends({
+                    fontSize: "inherit"
+                }, icon)),
+                /*#__PURE__*/ _jsx(SrOnly, _extends({}, SrOnlyProps, {
+                    children: children
+                }))
+            ]
+        }))
+    }));
+});
+LabelAction.displayName = 'AglynLabelAction';
+export const NodeQuickActions = observer(/*#__PURE__*/ forwardRef((props, ref)=>{
+    const { node, children, variant } = props, rest = _object_without_properties_loose(props, [
+        "node",
+        "children",
+        "variant"
+    ]);
+    const handleAddElementClick = useAddElementDrawerCallback();
+    const handleProps = Besigner.handles.get(node == null ? void 0 : node.$id);
+    // Controlled so menu actions can dismiss the tooltip — an uncontrolled
+    // tooltip stays open behind (or above) dialogs its actions launch.
+    const [moreOpen, setMoreOpen] = useState(false);
+    const openMore = useCallback(()=>setMoreOpen(true), []);
+    /**
+     * Right-click on the canvas opens this menu (AGL-1405). The leaf records
+     * the request and selects the node, which is what mounts this overlay —
+     * so the request is read on the first render rather than needing the
+     * component to already exist when the click happened.
+     */ const requested = isCanvasContextMenuRequested(node == null ? void 0 : node.$id);
+    const closeMore = useCallback(()=>{
+        setMoreOpen(false);
+        // Unconditionally: a request left standing re-opens the menu the next
+        // time this node's overlay mounts, which reads as the menu opening by
+        // itself.
+        clearCanvasContextMenu();
+    }, []);
+    return /*#__PURE__*/ _jsxs(Stack, _extends({
+        ref: ref,
+        id: "aglyn:element-overlay-label",
+        "data-aglyn-node": node == null ? void 0 : node.$id,
+        "data-aglyn-kind": "overlay-label",
+        direction: "row",
+        spacing: 0.35,
+        divider: /*#__PURE__*/ _jsx(Divider, {
+            orientation: "vertical",
+            variant: "fullWidth",
+            flexItem: true,
+            sx: {
+                opacity: 0.5
+            }
+        })
+    }, rest, {
+        sx: [
+            {
+                justifyContent: "flex-start",
+                alignItems: "center",
+                fontSize: 12,
+                lineHeight: 1,
+                fontWeight: 600,
+                letterSpacing: 0.25,
+                // pointerEvents: 'none',
+                marginLeft: '-2px',
+                marginBottom: '1px',
+                // One slate surface for the whole floating control (AGL-1194).
+                // The strip was `primary.light` while the buttons on it were
+                // `tertiary` — two chrome hues on one control, and an ink colour
+                // paired with a background it no longer sat on. Ink is now the
+                // contrastText OF THIS background, so it follows the scheme
+                // instead of being picked once against the old one.
+                backgroundColor: 'tertiary.main',
+                color: 'tertiary.contrastText',
+                px: 0.5,
+                pl: 0.5,
+                pr: 0.25,
+                py: 0.35
+            },
+            ...Array.isArray(rest.sx) ? rest.sx : [
+                rest.sx
+            ]
+        ],
+        children: [
+            /*#__PURE__*/ _jsx(Stack, {
+                direction: "column",
+                sx: {
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontSize: 12
+                },
+                children: /*#__PURE__*/ _jsx(ComponentIconComponent, {
+                    component: node == null ? void 0 : node.componentSchema,
+                    node: node,
+                    fontSize: "inherit"
+                })
+            }),
+            /*#__PURE__*/ _jsxs(If, {
+                condition: variant !== 'actions',
+                children: [
+                    /*#__PURE__*/ _jsx(Then, {
+                        children: /*#__PURE__*/ _jsx(Typography, {
+                            component: "div",
+                            title: node == null ? void 0 : node.labelShort,
+                            sx: {
+                                textOverflow: "ellipsis",
+                                overflow: "hidden",
+                                whiteSpace: "nowrap",
+                                fontSize: "inherit",
+                                color: "inherit",
+                                maxWidth: 100
+                            },
+                            children: node == null ? void 0 : node.labelShort
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Else, {
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 0.25,
+                            sx: {
+                                justifyContent: "flex-start",
+                                alignItems: "center"
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(LabelAction, {
+                                    title: "move",
+                                    disableInteractive: true,
+                                    ButtonProps: _extends({}, handleProps, {
+                                        onClick: ()=>handleAddElementClick(node)
+                                    }),
+                                    icon: {
+                                        path: ICON_VARIANT_MODIFY_DRAG.path
+                                    },
+                                    children: 'move'
+                                }),
+                                /*#__PURE__*/ _jsx(LabelAction, {
+                                    title: "Add",
+                                    disableInteractive: true,
+                                    ButtonProps: {
+                                        onClick: ()=>handleAddElementClick(node)
+                                    },
+                                    icon: {
+                                        path: ICON_VARIANT_MODIFY_ADD.path
+                                    },
+                                    children: 'add'
+                                }),
+                                /*#__PURE__*/ _jsx(LabelAction, {
+                                    placement: "right",
+                                    children: 'more',
+                                    icon: {
+                                        path: ICON_VARIANT_SHOW_MORE_VERTICAL.path
+                                    },
+                                    enterDelay: 200,
+                                    leaveDelay: 500,
+                                    open: moreOpen || requested,
+                                    onOpen: openMore,
+                                    onClose: closeMore,
+                                    slotProps: {
+                                        popper: {
+                                            disablePortal: false,
+                                            // Below dialogs/drawers the menu actions open.
+                                            sx: {
+                                                zIndex: (theme)=>theme.zIndex.modal - 1
+                                            },
+                                            /**
+                     * Kept inside the WINDOW, not the document (AGL-1405).
+                     * `rootBoundary: 'document'` let the menu be placed
+                     * below the fold — the document is as tall as whatever
+                     * you put in it, so nothing ever "overflowed" it — and
+                     * the page grew a scrollbar around the menu, which moves
+                     * the editor's own chrome under the reader. The Paper
+                     * caps its height and scrolls, so a menu taller than the
+                     * window is still fully reachable.
+                     *
+                     * The 100px padding went with it: it was reserving a
+                     * margin against a boundary that was never binding, and
+                     * against the real one it would refuse placements that
+                     * fit perfectly well.
+                     */ modifiers: [
+                                                {
+                                                    name: 'flip',
+                                                    enabled: true,
+                                                    options: {
+                                                        altBoundary: true,
+                                                        padding: 8
+                                                    }
+                                                },
+                                                {
+                                                    name: 'preventOverflow',
+                                                    enabled: true,
+                                                    options: {
+                                                        altAxis: true,
+                                                        altBoundary: true,
+                                                        tether: false,
+                                                        padding: 8
+                                                    }
+                                                },
+                                                {
+                                                    name: 'arrow',
+                                                    enabled: true
+                                                }
+                                            ]
+                                        },
+                                        tooltip: {
+                                            sx: {
+                                                padding: 0,
+                                                m: -2
+                                            }
+                                        }
+                                    },
+                                    title: /*#__PURE__*/ _jsx(NodeContextMenu, {
+                                        node: node,
+                                        onAction: closeMore
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        ]
+    }));
+}));
+NodeQuickActions.displayName = 'NodeQuickActions';
+export default NodeQuickActions;
+
+//# sourceMappingURL=node-quick-actions.js.map

package/src/lib/components/node-quick-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/node-quick-actions.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type * as Aglyn from '@aglyn/aglyn'\nimport * as Besigner from '@aglyn/besigner'\nimport {\n  ICON_VARIANT_MODIFY_ADD,\n  ICON_VARIANT_MODIFY_DRAG,\n  ICON_VARIANT_SHOW_MORE_VERTICAL,\n} from '@aglyn/shared-data-enums'\nimport { SrOnly, SrOnlyProps } from '@aglyn/shared-ui-jsx'\nimport { MdiIcon, MdiIconProps } from '@aglyn/shared-ui-jsx'\nimport { styled } from '@aglyn/shared-ui-theme'\nimport {\n  Button as MuiButton,\n  type ButtonProps,\n  Divider,\n  Stack,\n  type StackProps,\n  Tooltip as MuiTooltip,\n  TooltipProps,\n  Typography,\n} from '@mui/material'\nimport { observer } from 'mobx-react-lite'\nimport { forwardRef, useCallback, useState } from 'react'\nimport { Else, If, Then } from 'react-if'\nimport useAddElementDrawerCallback from '../hooks/use-add-element-drawer-callback'\nimport ComponentIconComponent from './component-icon.component'\nimport {\n  clearCanvasContextMenu,\n  isCanvasContextMenuRequested,\n} from '../utils/canvas-context-menu'\nimport NodeContextMenu from './node-context-menu'\n\ninterface LabelActionProps extends Omit<TooltipProps, 'children'> {\n  children?: JSX.Children\n  icon: MdiIconProps\n  ButtonProps?: ButtonProps\n  SrOnlyProps?: SrOnlyProps\n}\n\nconst ActionButton = styled(MuiButton)(({ theme }) => ({\n  borderRadius: `0.2em`,\n  marginLeft: theme.spacing(-0.2),\n  pointerEvent: 'unset',\n  paddingTop: theme.spacing(0.1),\n  paddingBottom: theme.spacing(0.1),\n  paddingRight: theme.spacing(0.15),\n  paddingLeft: theme.spacing(0.15),\n  fontSize: theme.typography.pxToRem(16),\n  minWidth: 20,\n  '&.MuiButtonGroup-grouped': { minWidth: 25 },\n}))\n\nconst LabelAction = forwardRef<any, LabelActionProps>((props, ref) => {\n  const { children, ButtonProps, icon, SrOnlyProps, ...rest } = props\n\n  return (\n    <MuiTooltip ref={ref} {...rest}>\n      {/* Chrome, not accent (AGL-1186), and now transparent on the slate\n          strip rather than a contained pill on it (AGL-1194): a contained\n          tertiary button on a tertiary bar would be invisible, and the\n          pills were the reason the bar carried two hues at once. `inherit`\n          takes the strip's ink, so contrast is a pairing rather than a\n          guess in either scheme. */}\n      <ActionButton variant={'text'} color={'inherit'} {...ButtonProps}>\n        <MdiIcon fontSize=\"inherit\" {...icon} />\n        <SrOnly {...SrOnlyProps}>{children}</SrOnly>\n      </ActionButton>\n    </MuiTooltip>\n  )\n})\nLabelAction.displayName = 'AglynLabelAction'\n\nexport interface NodeQuickActionsProps extends StackProps {\n  node: Aglyn.NodeSchema\n  variant?: 'label' | 'actions'\n}\n\nexport const NodeQuickActions = observer(\n  forwardRef<any, NodeQuickActionsProps>((props, ref) => {\n    const { node, children, variant, ...rest } = props\n    const handleAddElementClick = useAddElementDrawerCallback()\n    const handleProps = Besigner.handles.get(node?.$id)\n    // Controlled so menu actions can dismiss the tooltip — an uncontrolled\n    // tooltip stays open behind (or above) dialogs its actions launch.\n    const [moreOpen, setMoreOpen] = useState(false)\n    const openMore = useCallback(() => setMoreOpen(true), [])\n    /**\n     * Right-click on the canvas opens this menu (AGL-1405). The leaf records\n     * the request and selects the node, which is what mounts this overlay —\n     * so the request is read on the first render rather than needing the\n     * component to already exist when the click happened.\n     */\n    const requested = isCanvasContextMenuRequested(node?.$id)\n    const closeMore = useCallback(() => {\n      setMoreOpen(false)\n      // Unconditionally: a request left standing re-opens the menu the next\n      // time this node's overlay mounts, which reads as the menu opening by\n      // itself.\n      clearCanvasContextMenu()\n    }, [])\n    return (\n      <Stack\n        ref={ref}\n        id=\"aglyn:element-overlay-label\"\n        data-aglyn-node={node?.$id}\n        data-aglyn-kind=\"overlay-label\"\n        direction=\"row\"\n        spacing={0.35}\n        divider={\n          <Divider orientation=\"vertical\" variant=\"fullWidth\" flexItem sx={{ opacity: 0.5 }} />\n        }\n        {...rest}\n        sx={[{\n          justifyContent: \"flex-start\",\n          alignItems: \"center\",\n          fontSize: 12,\n          lineHeight: 1,\n          fontWeight: 600,\n          letterSpacing: 0.25,\n\n          // pointerEvents: 'none',\n          marginLeft: '-2px',\n\n          marginBottom: '1px',\n          // One slate surface for the whole floating control (AGL-1194).\n          // The strip was `primary.light` while the buttons on it were\n          // `tertiary` — two chrome hues on one control, and an ink colour\n          // paired with a background it no longer sat on. Ink is now the\n          // contrastText OF THIS background, so it follows the scheme\n          // instead of being picked once against the old one.\n          backgroundColor: 'tertiary.main',\n          color: 'tertiary.contrastText',\n          px: 0.5,\n          pl: 0.5,\n          pr: 0.25,\n          py: 0.35\n        }, ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx])]}>\n        <Stack\n          direction=\"column\"\n          sx={{\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            fontSize: 12\n          }}>\n          <ComponentIconComponent\n            component={node?.componentSchema}\n            node={node}\n            fontSize=\"inherit\"\n          />\n        </Stack>\n        <If condition={variant !== 'actions'}>\n          <Then>\n            <Typography\n              component=\"div\"\n              title={node?.labelShort}\n              sx={{\n                textOverflow: \"ellipsis\",\n                overflow: \"hidden\",\n                whiteSpace: \"nowrap\",\n                fontSize: \"inherit\",\n                color: \"inherit\",\n                maxWidth: 100\n              }}>\n              {node?.labelShort}\n            </Typography>\n          </Then>\n          <Else>\n            <Stack\n              direction=\"row\"\n              spacing={0.25}\n              sx={{\n                justifyContent: \"flex-start\",\n                alignItems: \"center\"\n              }}>\n              <LabelAction\n                title=\"move\"\n                disableInteractive\n                ButtonProps={{\n                  ...handleProps,\n                  onClick: () => handleAddElementClick(node),\n                }}\n                icon={{ path: ICON_VARIANT_MODIFY_DRAG.path }}\n              >\n                {'move'}\n              </LabelAction>\n              <LabelAction\n                title=\"Add\"\n                disableInteractive\n                ButtonProps={{\n                  onClick: () => handleAddElementClick(node),\n                }}\n                icon={{ path: ICON_VARIANT_MODIFY_ADD.path }}\n              >\n                {'add'}\n              </LabelAction>\n              <LabelAction\n                placement=\"right\"\n                children={'more'}\n                icon={{ path: ICON_VARIANT_SHOW_MORE_VERTICAL.path }}\n                enterDelay={200}\n                leaveDelay={500}\n                open={moreOpen || requested}\n                onOpen={openMore}\n                onClose={closeMore}\n                slotProps={{\n                  popper: {\n                    disablePortal: false,\n                    // Below dialogs/drawers the menu actions open.\n                    sx: { zIndex: (theme) => theme.zIndex.modal - 1 },\n                    /**\n                     * Kept inside the WINDOW, not the document (AGL-1405).\n                     * `rootBoundary: 'document'` let the menu be placed\n                     * below the fold — the document is as tall as whatever\n                     * you put in it, so nothing ever \"overflowed\" it — and\n                     * the page grew a scrollbar around the menu, which moves\n                     * the editor's own chrome under the reader. The Paper\n                     * caps its height and scrolls, so a menu taller than the\n                     * window is still fully reachable.\n                     *\n                     * The 100px padding went with it: it was reserving a\n                     * margin against a boundary that was never binding, and\n                     * against the real one it would refuse placements that\n                     * fit perfectly well.\n                     */\n                    modifiers: [\n                      {\n                        name: 'flip',\n                        enabled: true,\n                        options: { altBoundary: true, padding: 8 },\n                      },\n                      {\n                        name: 'preventOverflow',\n                        enabled: true,\n                        options: {\n                          altAxis: true,\n                          altBoundary: true,\n                          tether: false,\n                          padding: 8,\n                        },\n                      },\n                      {\n                        name: 'arrow',\n                        enabled: true,\n                      },\n                    ],\n                  },\n                  tooltip: {\n                    sx: {\n                      padding: 0,\n                      m: -2,\n                    },\n                  },\n                }}\n                title={<NodeContextMenu node={node} onAction={closeMore} />}\n              />\n            </Stack>\n          </Else>\n        </If>\n      </Stack>\n    );\n  }),\n)\nNodeQuickActions.displayName = 'NodeQuickActions'\n\nexport default NodeQuickActions\n"],"names":["Besigner","ICON_VARIANT_MODIFY_ADD","ICON_VARIANT_MODIFY_DRAG","ICON_VARIANT_SHOW_MORE_VERTICAL","SrOnly","MdiIcon","styled","Button","MuiButton","Divider","Stack","Tooltip","MuiTooltip","Typography","observer","forwardRef","useCallback","useState","Else","If","Then","useAddElementDrawerCallback","ComponentIconComponent","clearCanvasContextMenu","isCanvasContextMenuRequested","NodeContextMenu","ActionButton","theme","borderRadius","marginLeft","spacing","pointerEvent","paddingTop","paddingBottom","paddingRight","paddingLeft","fontSize","typography","pxToRem","minWidth","LabelAction","props","ref","children","ButtonProps","icon","SrOnlyProps","rest","variant","color","displayName","NodeQuickActions","node","handleAddElementClick","handleProps","handles","get","$id","moreOpen","setMoreOpen","openMore","requested","closeMore","id","data-aglyn-node","data-aglyn-kind","direction","divider","orientation","flexItem","sx","opacity","justifyContent","alignItems","lineHeight","fontWeight","letterSpacing","marginBottom","backgroundColor","px","pl","pr","py","Array","isArray","component","componentSchema","condition","title","labelShort","textOverflow","overflow","whiteSpace","maxWidth","disableInteractive","onClick","path","placement","enterDelay","leaveDelay","open","onOpen","onClose","slotProps","popper","disablePortal","zIndex","modal","modifiers","name","enabled","options","altBoundary","padding","altAxis","tether","tooltip","m","onAction"],"mappings":"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"}

package/src/lib/components/node-tree-view.d.ts

@@ -0,0 +1,106 @@
+/**
+ * @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 { BoxProps } from '@mui/material';
+import type { ComponentProps } from 'react';
+declare const TreeView: import("@emotion/styled").StyledComponent<import("@mui/material").ListOwnProps & Omit<import("@mui/material").ListOwnProps, keyof import("@mui/material").ListOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "children" | "sx" | "className" | "style" | "classes" | "dense" | "subheader" | "disablePadding"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    component?: React.ElementType | undefined;
+}, {}, {}>;
+/**
+ * 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 declare const HIERARCHY_INDENT_STEP = 23;
+/** Width of one guide line, in px. */
+export declare 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 declare 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 declare function hierarchyGuideCount(depth: number): number;
+export declare function hierarchyGutterWidth(depth: number): number;
+/**
+ * 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 declare function hierarchyDepthStyles(depth: number, colors: {
+    guide: string;
+    activeGuide: string;
+}): {
+    [x: string]: {
+        backgroundImage: string;
+        backgroundRepeat: string;
+        backgroundSize: string;
+        backgroundPosition: string;
+    };
+};
+export interface NodeTreeViewProps extends BoxProps {
+    TreeViewProps?: Partial<Omit<ComponentProps<typeof TreeView>, 'children'>>;
+}
+export declare const NodeTreeView: import("react").FunctionComponent<Omit<NodeTreeViewProps, "ref"> & import("react").RefAttributes<any>>;
+export default NodeTreeView;