@aglyn/besigner-ui 1.0.0-beta.143

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/node-leaf.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 {\n  buildComponentDefaultIconPaths,\n  buildComponentDefaultTokens,\n  buildComponentDefaultValues,\n  composeReusableComponentNodes,\n  displayBindingTokens,\n  FORM_COMPONENT_ID,\n  hasBindings,\n  HostViewType,\n  LAYOUT_SLOT_COMPONENT_ID,\n  NODE_ROOT_ID,\n  placedFormPlacement,\n  resolveBindings,\n  resolveComponentPropTokens,\n  REUSABLE_INSTANCE_COMPONENT_ID,\n} from '@aglyn/aglyn'\nimport {\n  Branch,\n  Leaf,\n  type LeafProps,\n  RendererComponents,\n  Stem,\n  Trunk,\n} from '@aglyn/aglyn-node-renderer'\nimport * as Besigner from '@aglyn/besigner'\nimport { alpha, Box } from '@mui/material'\nimport { observer } from 'mobx-react-lite'\nimport { forwardRef, useCallback, useContext, useMemo, useRef } from 'react'\nimport BindingPickerContext from '../contexts/binding-picker-context'\nimport CanvasRevealContext, {\n  CanvasMutedClassesContext,\n} from '../contexts/canvas-reveal-context'\nimport ComponentPromotionContext from '../contexts/component-promotion-context'\nimport { useRenderedCanvasElements } from '../contexts/rendered-canvas-elements'\nimport useAglynBesignerFlag from '../hooks/use-aglyn-besigner-flag'\nimport { useNodeWithMediaAssetFacts } from '../hooks/use-media-asset-facts-overlay'\nimport useNodeWithHostTokens from '../hooks/use-node-with-host-tokens'\nimport {\n  useNodeWithRepeatRecord,\n  useRepeatCopies,\n  useRepeatPreview,\n} from '../hooks/use-repeat-preview'\nimport { RepeatRecordContext } from '../contexts/repeat-record-context'\nimport {\n  isNodeHiddenOnSite,\n  isNodeRevealedOnCanvas,\n} from '../utils/canvas-reveal'\nimport { stripMutedClasses } from '../utils/muted-classes'\nimport DraggableDroppable from './dnd/draggable-droppable'\nimport EmptyDocumentSlot from './empty-document-slot'\n\n/**\n * The plain `Leaf`, drawing a node the way the published page composes it: its\n * host variables filled in from the site being edited (AGL-2881), and a placed\n * image or film with its DAM asset's current facts (AGL-2838, AGL-2856).\n *\n * For the nodes the canvas renders that are not canvas nodes — a component\n * instance's definition, a placed form's design, the layout chrome — and so\n * never reach `NodeLeaf`. A footer's `{{host.businessName}}` still has to read\n * as the site's name, an asset inside one of them still has to show the shape\n * the published page gives it, and a film its poster.\n */\nexport const MediaFactsLeaf = forwardRef<any, LeafProps>((props, ref) => {\n  const { node, ...rest } = props\n  const withHostTokens = useNodeWithHostTokens(node)\n  const withRecord = useNodeWithRepeatRecord(withHostTokens)\n  const shown = useNodeWithMediaAssetFacts(withRecord)\n  return <Leaf ref={ref} node={shown} {...rest} />\n})\nMediaFactsLeaf.displayName = 'MediaFactsLeaf'\n\n/**\n * Renderer overrides for the inside of a component instance (AGL-1251).\n *\n * The plain `Leaf` (through `MediaFactsLeaf`), deliberately, where the canvas\n * otherwise uses `NodeLeaf`: the definition's nodes are NOT in the canvas, so\n * anything that made them draggable, selectable or droppable would be reaching\n * for canvas state that has no entry for them. Rendering them inert is not a\n * restriction bolted on afterwards — it is the only thing these nodes can be.\n */\nconst INERT_RENDERER = {\n  TrunkComponent: Trunk,\n  StemComponent: Stem,\n  BranchComponent: Branch,\n  LeafComponent: MediaFactsLeaf,\n}\n\n/**\n * Nested-object form of a normalized node map, which is what `Branch` walks\n * (`node.children`). Cycle-safe via `seen`: a definition that somehow\n * referenced an ancestor would otherwise recurse until the stack gave out.\n */\nexport function denormalizeTree(\n  nodes: Record<string, any>,\n  rootId: string,\n  seen: Set<string> = new Set(),\n): any {\n  const node = nodes?.[rootId]\n  if (!node || seen.has(rootId)) return undefined\n  seen.add(rootId)\n  const childIds = Array.isArray(node.nodes) ? node.nodes : []\n  return {\n    ...node,\n    children: childIds\n      .map((childId: string) => denormalizeTree(nodes, childId, seen))\n      .filter(Boolean),\n  }\n}\n\nexport interface NodeLeafProps extends LeafProps {}\n\n/**\n * The slot marker is EDITOR CHROME, so it holds the brand accent literally\n * rather than reading `secondary` from the theme: the canvas renders under\n * the host's palette, so a token would repaint the editor's own furniture\n * whenever a subscriber restyles their site — and it already rendered pink\n * instead of the design's blue.\n */\nconst SLOT_ACCENT = '#00B0FF'\n\n/**\n * Visible placement marker for the LayoutSlot while editing a layout. The\n * slot is a passthrough at runtime, so without this it disappears once it\n * has children and designers lose track of where screen content lands.\n */\nconst SlotMarker = ({ caption }: { caption?: string }) => (\n  <Box\n    aria-hidden\n    data-aglyn-slot-marker=\"\"\n    sx={{\n      m: 1,\n      p: 2,\n      minHeight: 64,\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 0.5,\n      borderWidth: 2,\n      borderStyle: 'dashed',\n      // Brand blue on a faint tint, not a grey dashed box: the slot is the\n      // one region the layout does not own, and it should not read as just\n      // another empty container.\n      borderColor: SLOT_ACCENT,\n      backgroundColor: alpha(SLOT_ACCENT, 0.06),\n      borderRadius: 1,\n      color: 'text.secondary',\n      fontSize: 13,\n      textAlign: 'center',\n    }}\n  >\n    <Box component=\"span\" sx={{ color: SLOT_ACCENT, fontWeight: 700 }}>\n      {'◇ layout-slot'}\n    </Box>\n    <Box component=\"span\">{caption || 'Screen content renders here'}</Box>\n  </Box>\n)\n\n/**\n * The repeat badge (AGL-3111).\n *\n * Editor chrome, so it holds its accent literally for the reason\n * {@link SLOT_ACCENT} does: the canvas renders under the SITE's palette, and a\n * theme token here would repaint the editor's own furniture whenever a\n * subscriber restyled their site.\n *\n * It cannot reach a published page: only `NodeLeaf` draws it, and a published\n * page is composed from stored nodes and rendered through the plain `Leaf`.\n * The stored node is untouched either way — this is a render copy, like every\n * other thing the canvas lays over a node.\n */\nconst REPEAT_ACCENT = '#7C4DFF'\n\n/** The chip's own ink, for the same reason and read against that accent. */\nconst REPEAT_INK = '#FFFFFF'\n\nconst RepeatBadge = ({ label, count }: { label: string; count: number }) => (\n  <Box\n    aria-hidden\n    data-aglyn-repeat-badge=\"\"\n    sx={{\n      // Out of the element's own layout: a badge that took part in a flex row\n      // would move the design it is describing.\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      zIndex: 2,\n      // Never swallows a click — the element under it stays selectable.\n      pointerEvents: 'none',\n      px: 0.75,\n      py: 0.25,\n      maxWidth: '100%',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n      borderBottomLeftRadius: 3,\n      backgroundColor: REPEAT_ACCENT,\n      color: REPEAT_INK,\n      fontSize: 11,\n      fontWeight: 700,\n      lineHeight: 1.6,\n      letterSpacing: 0.2,\n    }}\n  >\n    {`⟳ ${label} · ${count} ${count === 1 ? 'record' : 'records'}`}\n  </Box>\n)\n\nexport const NodeLeaf = observer(\n  forwardRef<any, NodeLeafProps>((props, ref) => {\n    const { node, children, ...rest } = props\n    const [viewType] = useAglynBesignerFlag('viewType')\n    // The canvas element registry, finally given a WRITER (AGL-2486).\n    //\n    // `RenderedCanvasElementsProvider` has existed since the registry was\n    // introduced and `setElementRef`/`deleteElementRef` were called from\n    // NOWHERE in the repo — `elements.current` was `{}` for the life of every\n    // session. Everything that reads it therefore read an empty map and\n    // failed the only way an empty map can: silently.\n    //\n    // Two features were void because of it, and neither logged anything:\n    //\n    //   `usePresence`'s cursor broadcast resolves the canvas root through\n    //   this registry and bails with `if (!root) return`, so no editor has\n    //   EVER written a cursor position. Confirmed against production RTDB on\n    //   2026-08-22: three live presence entries across three rooms, not one\n    //   carrying `cursorX`/`cursorY`.\n    //\n    //   `CollaboratorOverlays` resolves both the canvas root and each peer's\n    //   selected node here, so `placements` was always empty and the overlay\n    //   returned null. Confirmed live in the running console: a collaborator\n    //   entry carrying both a cursor and a selection rendered its avatar and\n    //   drew no cursor, no selection box and no name label.\n    //\n    // Registering here rather than in the renderer keeps it to the canvas:\n    // `NodeLeaf` is the besigner's leaf component, so component-definition\n    // previews (which render the plain `Leaf` through `INERT_RENDERER`) stay\n    // out of the registry — they are not in the canvas and must not be\n    // addressable as though they were.\n    //\n    // `NODE_ROOT_ID` and `CANVAS_ROOT_ELEMENT_ID` are the same string\n    // (`'_@_'`), so keying on `$id` registers the canvas root under the id\n    // the cursor code already looks for, with no special case.\n    const { elements, setElementRef, deleteElementRef } =\n      useRenderedCanvasElements()\n    const $id = node?.$id\n    // What THIS leaf last put in the registry. A remount can hand the new\n    // element its ref before the old one is cleared, so an unconditional\n    // delete on `null` would evict the live registration and put the\n    // registry back to the state this whole change exists to fix.\n    const registered = useRef<Element | null>(null)\n    const registerElement = useCallback(\n      (element: unknown) => {\n        // Forward FIRST and unconditionally: dnd and the renderer already\n        // depend on this ref, and registration must never change what they\n        // observe.\n        if (typeof ref === 'function') ref(element)\n        else if (ref) (ref as { current: unknown }).current = element\n        if (!$id) return\n        if (element instanceof Element) {\n          registered.current = element\n          setElementRef($id, {\n            $id,\n            node: element,\n            dragHandle: undefined,\n          } as never)\n          return\n        }\n        // Cleared (or never a DOM element — a class instance, say). Only\n        // withdraw the registration if it is still OURS.\n        const current = elements?.current?.[$id]?.node\n        if (!registered.current || current === registered.current) {\n          deleteElementRef($id)\n        }\n        registered.current = null\n      },\n      [ref, $id, elements, setElementRef, deleteElementRef],\n    )\n    const showSlotMarker =\n      node?.componentId === LAYOUT_SLOT_COMPONENT_ID &&\n      viewType === HostViewType.LAYOUT\n    // A document with no nodes has nothing to aim at. Wrapped in a shared\n    // layout it is worse than empty — the slot passes its children straight\n    // through, so the root collapses to a zero-height strip between locked\n    // chrome and the nav renders directly into the footer. Hung off the ROOT\n    // leaf, which is already inside `DraggableDroppable`, so giving it height\n    // is all a drop needs to resolve against the document root.\n    const showEmptyDocumentSlot =\n      node?.$id === NODE_ROOT_ID &&\n      !node?.nodes?.length &&\n      viewType !== HostViewType.LAYOUT\n\n    // Nodes the author has opened up for designing (AGL-592). Through a\n    // context rather than the flag itself: the canvas subscribes once and\n    // every leaf reads the result.\n    const revealedNodeIds = useContext(CanvasRevealContext)\n    const mutedClasses = useContext(CanvasMutedClassesContext)\n\n    // WYSIWYG bindings (AGL-97): resolve variable/function tokens\n    // live on the rendered copy (selection/dnd keep the original node).\n    // Bound nodes are flagged either way so editors can spot them.\n    const [resolveFlag] = useAglynBesignerFlag('resolveBindings')\n    const { variables, functions, componentProps } = useContext(\n      BindingPickerContext,\n    )\n    const boundProps = useMemo(\n      () =>\n        Object.entries(node?.props ?? {}).filter(\n          ([, value]) => typeof value === 'string' && hasBindings(value),\n        ),\n      // MobX props are observable; the JSON string keys the memo cheaply.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [node, JSON.stringify(node?.props ?? {})],\n    )\n    /**\n     * A component editor draws with the definition's OWN defaults\n     * (AGL-2870), so `{{prop.headline}}` shows the headline and a film with a\n     * default source actually plays.\n     *\n     * Only props that HAVE a default are substituted. One without stays a\n     * visible token, which is the signal an author needs: the slot is real\n     * and nothing fills it yet. Substituting `''` there would draw an empty\n     * component and hide the very thing they still have to decide.\n     *\n     * On a screen this path does nothing — the props belong to the component\n     * route, and an instance is composed through `composeReusableComponentNodes`\n     * below, which is the single substitution path a published page uses.\n     */\n    const defaultPropTokens = useMemo(\n      () => buildComponentDefaultTokens(componentProps),\n      [componentProps],\n    )\n    // The paths of the default icons, which a field bound to an icon property\n    // draws with — the editor has no reason to have loaded the icon catalog.\n    const defaultIconPaths = useMemo(\n      () => buildComponentDefaultIconPaths(componentProps),\n      [componentProps],\n    )\n    // The values the defaults hand their bound fields (AGL-2893), so a list\n    // stays a list and a theme multiple a number on the editor's canvas too.\n    const defaultValues = useMemo(\n      () => buildComponentDefaultValues(componentProps),\n      [componentProps],\n    )\n    const renderNode = useMemo(() => {\n      const hasDeclaredProps = Boolean(componentProps?.length)\n      if (\n        !boundProps.length ||\n        (!Object.keys(variables ?? {}).length &&\n          !Object.keys(functions ?? {}).length &&\n          !hasDeclaredProps)\n      ) {\n        return node\n      }\n      const resolved: Record<string, unknown> = { ...(node?.props ?? {}) }\n      for (const [key, value] of boundProps) {\n        // Resolve toggle off → show friendly token text: id tokens map to\n        // the referent's CURRENT name (AGL-186), never raw doc ids.\n        resolved[key] =\n          resolveFlag === false\n            ? displayBindingTokens(\n                value as string,\n                (variables ?? {}) as any,\n                (functions ?? {}) as any,\n              )\n            : resolveBindings(\n                value as string,\n                (variables ?? {}) as any,\n                (functions ?? {}) as any,\n              )\n      }\n      const next = { ...node, props: resolved }\n      if (!hasDeclaredProps) return next\n      // Through the same substitution a placed instance uses, keyed by this\n      // node alone — one code path deciding what a token becomes, never two\n      // that could disagree.\n      //\n      // The raw-token view substitutes no defaults: an author who turned\n      // resolution OFF asked to see the tokens, and a default is a resolved\n      // value like any other. A field bound to a Yes/no property still\n      // receives a yes or a no there, because a switch has no way to show a\n      // token and reads the token's text as a yes.\n      return (\n        resolveComponentPropTokens(\n          { [String(node?.$id)]: next as any },\n          componentProps,\n          resolveFlag === false ? undefined : defaultPropTokens,\n          resolveFlag === false ? undefined : defaultIconPaths,\n          resolveFlag === false ? undefined : defaultValues,\n        )[String(node?.$id)] ?? next\n      )\n    }, [\n      node,\n      boundProps,\n      resolveFlag,\n      variables,\n      functions,\n      componentProps,\n      defaultPropTokens,\n      defaultIconPaths,\n      defaultValues,\n    ])\n\n    // Host variables (AGL-2881), filled in on the same render copy and after\n    // the bindings and the component's own defaults, which is the order the\n    // published page composes in: a default that names the host resolves\n    // too. The raw-token view reaches this leaf as no site at all\n    // (`CanvasHostTokensProvider`), so its tokens stay as written. Keyed by\n    // `boundProps`, which follows the observable props this copy reads.\n    const hostResolvedNode = useNodeWithHostTokens(renderNode, boundProps)\n\n    // Classes switched off for comparison (AGL-2486). Composed onto the SAME\n    // render copy the binding resolution builds, never onto the canvas node:\n    // selection, the hierarchy and every save keep reading the element's real\n    // class list, and the canvas paints without the switched-off names.\n    const renderNodeUnclassed = useMemo(\n      () =>\n        stripMutedClasses(hostResolvedNode as never, node?.$id, mutedClasses),\n      [hostResolvedNode, node, mutedClasses],\n    )\n\n    /**\n     * The record a repeat above this one is drawing (AGL-3111).\n     *\n     * Applied in the same place, and for the same reason, as the host tokens\n     * and the DAM facts above: the published page substitutes `{{item.*}}`\n     * when it composes, so the canvas substitutes it on the render copy while\n     * the node keeps the tokens every save writes.\n     */\n    const withRepeatRecord = useNodeWithRepeatRecord(renderNodeUnclassed)\n\n    // A placed asset's shape, and a film's length and poster, as its DAM\n    // document records them NOW (AGL-2838, AGL-2856). The published page lays\n    // the asset over the node when it is composed, so the canvas lays it over\n    // the same render copy: a replace shows here as it shows to a visitor,\n    // while selection, the panels and every save keep reading the node's\n    // stored props.\n    const shownNode = useNodeWithMediaAssetFacts(withRepeatRecord)\n\n    /**\n     * What this element repeats over, and the copies it draws (AGL-3111).\n     *\n     * The first record's copy is the element's own children — real canvas\n     * nodes an author selects, drags and edits — with that record laid over\n     * their render copies through {@link RepeatRecordContext}. Records 2..n\n     * are inert pictures of the same template, built by the page's own\n     * expansion. Editing the template therefore edits every copy, because\n     * there is only ever one.\n     */\n    const repeatPreview = useRepeatPreview(node)\n    const repeatCopies = useRepeatCopies(node, repeatPreview)\n    const firstRecord = useMemo(\n      () =>\n        repeatPreview\n          ? {\n              record: repeatPreview.records[0],\n              model: repeatPreview.dataset?.model,\n              datasetsByKey: repeatPreview.datasetsByKey,\n            }\n          : undefined,\n      [repeatPreview],\n    )\n\n    // A component instance renders its definition (AGL-1251) instead of the\n    // named dashed box. Authors placed a hero and saw a grey rectangle, so\n    // the props they filled in were invisible until Preview.\n    //\n    // Rendered, never grafted: the definition's nodes stay out of the canvas\n    // entirely. That is what makes this safe — there is nothing to lock,\n    // nothing to strip before a save, and no way for a definition's node to\n    // be persisted into the document that placed it. Same shape as the\n    // binding resolution above, which renders a resolved copy while\n    // selection and dnd keep the original node.\n    const { definitions, formDesigns } = useContext(ComponentPromotionContext)\n    const instanceTree = useMemo(() => {\n      if (node?.componentId !== REUSABLE_INSTANCE_COMPONENT_ID) {\n        return undefined\n      }\n      // Already expanded into this canvas — the layout-chrome store grafts\n      // before it loads (AGL-1218), so its instances arrive with children.\n      // Rendering here too would draw the nav twice.\n      if (node?.nodes?.length) return undefined\n      const props = (node?.props ?? {}) as { refId?: string }\n      const definition = props.refId ? definitions?.[props.refId] : undefined\n      if (!definition?.nodes || !definition?.rootId) return undefined\n      // Plain snapshot: props are MobX observables and the graft reads nested\n      // `propValues` off them. The placement's classes stay out of it, as its\n      // `sx` does: this leaf already renders both on the element around the\n      // preview, and the graft joins a placement's classes onto the root it\n      // becomes. Handed them here, the preview's root would apply every class\n      // a second time, and keep `aglyn-hidden` collapsed inside a placement\n      // the canvas has revealed for designing.\n      const { className: _placementClasses, ...snapshotProps } = JSON.parse(\n        JSON.stringify(node.props ?? {}),\n      ) as Record<string, unknown>\n      // Reuse the real graft so the canvas resolves `{{prop.*}}` exactly as\n      // the published page will — one substitution path, not a second one\n      // that could disagree about which value wins.\n      const composed = composeReusableComponentNodes(\n        {\n          [node.$id]: {\n            $id: node.$id,\n            componentId: REUSABLE_INSTANCE_COMPONENT_ID,\n            props: snapshotProps,\n            // Root style overrides (AGL-1306) ride the same snapshot so\n            // the canvas renders the SAME merged root sx the published\n            // page will — the graft is the one merge point.\n            ...(node.styleOverrides && {\n              styleOverrides: JSON.parse(JSON.stringify(node.styleOverrides)),\n            }),\n            // Attribute overrides ride the same snapshot for the same\n            // reason (AGL-1899). Leaving them out is invisible rather than\n            // broken: Preview and tenant SSR compose from the stored node\n            // and WOULD apply them, so the canvas alone would draw the\n            // component's own attributes and disagree with both.\n            ...(node.attrOverrides && {\n              attrOverrides: JSON.parse(JSON.stringify(node.attrOverrides)),\n            }),\n            nodes: [],\n          } as any,\n        },\n        // The host's WHOLE definitions map, not just this instance's own\n        // (AGL-1898). A definition may contain instances of OTHER\n        // definitions, and `composeReusableComponentNodes` expands those —\n        // but only the ones it is handed. Preview, tenant SSR and the\n        // layout-chrome graft all pass the full map, so a one-entry map\n        // here made the canvas the only surface that left a nested\n        // component as an unexpanded placeholder.\n        //\n        // It also silently voided propagation for the inner component:\n        // publishing a shared button re-rendered every canvas showing it\n        // directly and none of the ones showing it through the nav that\n        // contains it — which is the case a shared component is usually in.\n        //\n        // Safe to widen because the `nodes` argument above is this ONE\n        // instance: the extra definitions can only be reached from inside\n        // the subtree being grafted, never applied to some other node.\n        definitions as any,\n      )\n      // The graft puts the definition's root IN the instance's place rather\n      // than under it (AGL-2521), so the component to draw is at the\n      // instance's own id. Reading `nodes[0]` here would render the root's\n      // FIRST CHILD and drop the component's outer element with its siblings.\n      const grafted = composed[node.$id]\n      return grafted && grafted.componentId !== REUSABLE_INSTANCE_COMPONENT_ID\n        ? denormalizeTree(composed, node.$id)\n        : undefined\n      // Observable props/overrides: the JSON strings key the memo, as above.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [\n      node,\n      JSON.stringify(node?.props ?? {}),\n      JSON.stringify(node?.styleOverrides ?? {}),\n      JSON.stringify(node?.attrOverrides ?? {}),\n      definitions,\n    ])\n\n    /**\n     * A placed form draws its ENTITY'S published fields, not the page's copy\n     * of them (`docs/specs/reusable-forms.md`).\n     *\n     * The same render-copy treatment the instance above gets, and for the same\n     * reason: the entity's nodes stay out of the canvas, so there is nothing to\n     * lock, nothing to strip before a save, and no way for a form's fields to\n     * be persisted into the screen that placed it.\n     *\n     * It runs the REAL graft rather than reading `design.nodes` directly, so a\n     * component nested inside the form design expands here exactly as it will\n     * on the published page — one resolution path, not a second that could\n     * disagree.\n     *\n     * When it resolves, the node's own children are not rendered (below): the\n     * published page discards them, and a canvas that drew both would show the\n     * author a page that does not exist. Where the entity has no published\n     * design the memo is `undefined`, the children render, and the form the\n     * author drew is the form they see — which is every form built before the\n     * entity existed.\n     */\n    const placedFormTree = useMemo(() => {\n      if (node?.componentId !== FORM_COMPONENT_ID) return undefined\n      const formId = (node?.props as { formId?: unknown } | undefined)?.formId\n      if (typeof formId !== 'string' || !formId) return undefined\n      const composed = composeReusableComponentNodes(\n        {\n          [node.$id]: {\n            $id: node.$id,\n            componentId: FORM_COMPONENT_ID,\n            // Plain snapshot: props are MobX observables, as above.\n            props: JSON.parse(JSON.stringify(node.props ?? {})),\n            nodes: [],\n          } as any,\n        },\n        // Component definitions ride along so an instance INSIDE the form\n        // design expands; the map is safe to pass whole for the reason the\n        // instance graft above states — the one node handed in is this form.\n        definitions as any,\n        [placedFormPlacement(formDesigns as any)],\n      )\n      const graftedRootId = (composed[node.$id]?.nodes as string[])?.[0]\n      return graftedRootId\n        ? denormalizeTree(composed, graftedRootId)\n        : undefined\n      // Observable props: the JSON string keys the memo, as above.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [node, JSON.stringify(node?.props ?? {}), definitions, formDesigns])\n\n    return (\n      <DraggableDroppable\n        node={node}\n        type={Besigner.DragType.CANVAS}\n        accept={Object.values(Besigner.DragType)}\n        disableDragging={!Besigner.dnd.canDragNode(node)}\n      >\n        <Leaf\n          ref={registerElement}\n          node={shownNode as typeof node}\n          data-aglyn-selected={Besigner.focus.isNodeSelected(node)}\n          // Present while the selection lives in this node's subtree (the\n          // node itself or any descendant). Canvas-aware components (nav\n          // menus, drawers) read this neutral leaf attribute to expand\n          // only while they are being authored (AGL-571). Presence-based\n          // (''/undefined) so unaffected leaves carry no attribute.\n          data-aglyn-selected-within={\n            Besigner.focus.isNodeOrDescendantSelected(node) ? '' : undefined\n          }\n          // Present on an element that carries the hidden class while the\n          // canvas is showing it anyway (AGL-592) — the flag the canvas\n          // stylesheet checks before collapsing it. Stamped on the hidden\n          // element itself, so no wrapper a component renders around its\n          // children can come between the two.\n          data-aglyn-revealed={\n            isNodeHiddenOnSite(node) &&\n            isNodeRevealedOnCanvas(node, revealedNodeIds)\n              ? ''\n              : undefined\n          }\n          data-aglyn-bound={boundProps.length ? '' : undefined}\n          {...rest}\n        >\n          {/* A resolved form entity REPLACES the page's own fields, exactly\n              as the published page composes it — see `placedFormTree`. */}\n          {placedFormTree ? null : firstRecord ? (\n            // The template IS the first copy: the real children, drawing the\n            // first record. Provided around them rather than applied to them,\n            // so every descendant leaf resolves its own tokens the way the\n            // page's substitution walks the whole cloned subtree.\n            <RepeatRecordContext.Provider value={firstRecord}>\n              {children}\n            </RepeatRecordContext.Provider>\n          ) : (\n            children\n          )}\n          {repeatCopies.length ? (\n            // Inert and click-through like the component and form previews\n            // below, and for the same reason: a copy is a picture of the\n            // template, not a document. Selecting one would offer an author\n            // an element no save can reach.\n            <Box\n              sx={{ pointerEvents: 'none' }}\n              data-aglyn-repeat-preview=\"\"\n              aria-hidden\n            >\n              <RendererComponents.Provider value={INERT_RENDERER as any}>\n                {repeatCopies.map((copy) => (\n                  <Stem key={copy.$id} node={copy} />\n                ))}\n              </RendererComponents.Provider>\n            </Box>\n          ) : null}\n          {repeatPreview ? (\n            <RepeatBadge\n              label={repeatPreview.label}\n              count={repeatPreview.records.length}\n            />\n          ) : null}\n          {placedFormTree ? (\n            // Inert and click-through like the instance preview below: the\n            // fields belong to the form, and they are edited in the form's own\n            // besigner, so the only selectable thing here is the placement.\n            <Box sx={{ pointerEvents: 'none' }} data-aglyn-form-preview=\"\">\n              <RendererComponents.Provider value={INERT_RENDERER as any}>\n                <Stem node={placedFormTree} />\n              </RendererComponents.Provider>\n            </Box>\n          ) : null}\n          {instanceTree ? (\n            // `pointerEvents: none` so a click anywhere on the rendered\n            // component still lands on the instance beneath it — the\n            // instance is the only thing here that can be selected, and the\n            // only thing whose Attributes are editable.\n            <Box sx={{ pointerEvents: 'none' }} data-aglyn-component-preview=\"\">\n              <RendererComponents.Provider value={INERT_RENDERER as any}>\n                <Stem node={instanceTree} />\n              </RendererComponents.Provider>\n            </Box>\n          ) : null}\n          {showSlotMarker ? (\n            <SlotMarker\n              caption={node?.props?.['caption'] as string | undefined}\n            />\n          ) : null}\n          {showEmptyDocumentSlot ? <EmptyDocumentSlot /> : null}\n        </Leaf>\n      </DraggableDroppable>\n    )\n  }),\n)\nNodeLeaf.displayName = 'BesignerLeafComponent'\nNodeLeaf.aglyn = true\n\nexport default NodeLeaf\n"],"names":["buildComponentDefaultIconPaths","buildComponentDefaultTokens","buildComponentDefaultValues","composeReusableComponentNodes","displayBindingTokens","FORM_COMPONENT_ID","hasBindings","HostViewType","LAYOUT_SLOT_COMPONENT_ID","NODE_ROOT_ID","placedFormPlacement","resolveBindings","resolveComponentPropTokens","REUSABLE_INSTANCE_COMPONENT_ID","Branch","Leaf","RendererComponents","Stem","Trunk","Besigner","alpha","Box","observer","forwardRef","useCallback","useContext","useMemo","useRef","BindingPickerContext","CanvasRevealContext","CanvasMutedClassesContext","ComponentPromotionContext","useRenderedCanvasElements","useAglynBesignerFlag","useNodeWithMediaAssetFacts","useNodeWithHostTokens","useNodeWithRepeatRecord","useRepeatCopies","useRepeatPreview","RepeatRecordContext","isNodeHiddenOnSite","isNodeRevealedOnCanvas","stripMutedClasses","DraggableDroppable","EmptyDocumentSlot","MediaFactsLeaf","props","ref","node","rest","withHostTokens","withRecord","shown","displayName","INERT_RENDERER","TrunkComponent","StemComponent","BranchComponent","LeafComponent","denormalizeTree","nodes","rootId","seen","Set","has","undefined","add","childIds","Array","isArray","children","map","childId","filter","Boolean","SLOT_ACCENT","SlotMarker","caption","aria-hidden","data-aglyn-slot-marker","sx","m","p","minHeight","display","flexDirection","alignItems","justifyContent","gap","borderWidth","borderStyle","borderColor","backgroundColor","borderRadius","color","fontSize","textAlign","component","fontWeight","REPEAT_ACCENT","REPEAT_INK","RepeatBadge","label","count","data-aglyn-repeat-badge","position","top","right","zIndex","pointerEvents","px","py","maxWidth","overflow","textOverflow","whiteSpace","borderBottomLeftRadius","lineHeight","letterSpacing","NodeLeaf","viewType","elements","setElementRef","deleteElementRef","$id","registered","registerElement","element","current","Element","dragHandle","showSlotMarker","componentId","LAYOUT","showEmptyDocumentSlot","length","revealedNodeIds","mutedClasses","resolveFlag","variables","functions","componentProps","boundProps","Object","entries","value","JSON","stringify","defaultPropTokens","defaultIconPaths","defaultValues","renderNode","hasDeclaredProps","keys","resolved","key","next","String","hostResolvedNode","renderNodeUnclassed","withRepeatRecord","shownNode","repeatPreview","repeatCopies","firstRecord","record","records","model","dataset","datasetsByKey","definitions","formDesigns","instanceTree","definition","refId","parse","className","_placementClasses","snapshotProps","composed","styleOverrides","attrOverrides","grafted","placedFormTree","formId","graftedRootId","type","DragType","CANVAS","accept","values","disableDragging","dnd","canDragNode","data-aglyn-selected","focus","isNodeSelected","data-aglyn-selected-within","isNodeOrDescendantSelected","data-aglyn-revealed","data-aglyn-bound","Provider","data-aglyn-repeat-preview","copy","data-aglyn-form-preview","data-aglyn-component-preview","aglyn"],"mappings":"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"}

package/src/lib/components/node-outline.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 { ComponentProps } from 'react';
+declare const NodeOutlineRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+export interface NodeOutlineProps extends ComponentProps<typeof NodeOutlineRoot> {
+    node: Aglyn.NodeSchema<any>;
+}
+export declare const NodeOutline: import("react").FunctionComponent<Omit<NodeOutlineProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default NodeOutline;

package/src/lib/components/node-outline.js

@@ -0,0 +1,156 @@
+/**
+ * @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 } from "react/jsx-runtime";
+import * as Besigner from "@aglyn/besigner";
+import { generateComponentClassKeys } from "@aglyn/shared-ui-theme";
+import { styled } from "@mui/material";
+import clsx from "clsx";
+import { observer } from "mobx-react-lite";
+import { forwardRef } from "react";
+const classKeys = generateComponentClassKeys('NodeOutline', [
+    'root',
+    'hoveringSelf',
+    'selectedSelf',
+    'draggingSelf',
+    'draggingOver'
+]);
+const NodeOutlineRoot = styled('div', {
+    name: 'NodeOutline',
+    slot: 'Root'
+})(({ theme })=>{
+    const tv = theme.vars || theme;
+    // Everything below rides `tv`, so both the outline colour and the fill
+    // alphas follow the previewed scheme. `tertiary` carries the generated
+    // light/dark/mainChannel tokens (addShadeVariants + the CSS-vars theme),
+    // verified against the running console's computed custom properties.
+    const slate = tv.palette.tertiary.main;
+    const slateChannel = tv.palette.tertiary.mainChannel;
+    // The two accents the canvas is allowed, one rule each: pink says WHAT IS
+    // SELECTED, blue says WHAT THE POINTER WOULD SELECT. See the rules below
+    // for why these two states — and no others — are exempt from the slate;
+    // `canvas-chrome-palette.spec.ts` pins each exemption to its declaration.
+    const selectionAccent = tv.palette.secondary.main;
+    const hoverAccent = tv.palette.primary.main;
+    const hoverAccentChannel = tv.palette.primary.mainChannel;
+    return {
+        pointerEvents: 'none',
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        outlineColor: 'transparent',
+        outlineOffset: 1,
+        outlineWidth: 1,
+        outlineStyle: 'dashed',
+        content: '""',
+        // Canvas chrome is the SLATE (AGL-1194) for DRAG and DROP-OVER: those
+        // are momentary, so they differ by STYLE and WEIGHT on one hue — a fill
+        // for the node in flight, and the heaviest treatment for the drop
+        // target.
+        //
+        // The two states that answer "what am I editing" carry an accent
+        // instead. Selection (AGL-1221) is a persistent statement about what the
+        // panels on the right are editing, it has to survive against an
+        // arbitrary subscriber palette, and pink is the one hue on this canvas
+        // that never competes with the design being edited.
+        //
+        // Hover is the pointer's half of that same question, and the slate
+        // cannot answer it: the slate is a DESATURATED BLUE, ~17 degrees of hue
+        // from `primary`, so on the dark canvas it reads as the disabled version
+        // of an affordance rather than a live one. It carries `primary`, which
+        // is the same one hue in both schemes.
+        //
+        // Selection stays the stronger of the two by weight and by style: 2px
+        // solid against the 1px dashed the root sets. It claims the border and
+        // nothing else, so it never cancels the wash underneath it.
+        [`&.${classKeys.selectedSelf}`]: {
+            outlineWidth: 2,
+            outlineStyle: 'solid',
+            outlineColor: selectionAccent
+        },
+        // The two hover affordances answer different questions, so they are
+        // scoped differently.
+        //
+        // The WASH tracks the POINTER, so it is unconditional: the pointer is
+        // over this node whether or not the node is also the selected one, and a
+        // selected node that loses its wash gives the pointer no feedback at all.
+        [`&.${classKeys.hoveringSelf}`]: {
+            backgroundColor: `rgba(${hoverAccentChannel} / 0.08)`
+        },
+        // The OUTLINE is the one that defers, because selection already owns
+        // that border and says something stronger with it. The `:not()` is
+        // load-bearing — this rule and the selected rule have equal specificity
+        // and this one is declared second, so without it the blue would repaint
+        // the pink outline of whichever element the pointer happens to rest on.
+        [`&.${classKeys.hoveringSelf}:not(.${classKeys.selectedSelf})`]: {
+            outlineColor: hoverAccent
+        },
+        [`&.${classKeys.draggingSelf}`]: {
+            outlineColor: 'transparent',
+            backgroundColor: `rgba(${slateChannel} / 0.12)`
+        },
+        // The drop target is momentary and must be unmistakable, so it keeps
+        // the strongest treatment rather than a second hue.
+        [`&.${classKeys.draggingOver}`]: {
+            outlineWidth: 2,
+            outlineStyle: 'solid',
+            outlineColor: slate,
+            backgroundColor: `rgba(${slateChannel} / 0.16)`
+        },
+        [`&.${classKeys.draggingOver}.${classKeys.draggingSelf}`]: {
+            outlineColor: tv.palette.grey['500'],
+            backgroundColor: 'rgba(158 158 158 / 0.64)'
+        }
+    };
+});
+export const NodeOutline = observer(/*#__PURE__*/ forwardRef((props, ref)=>{
+    const { className, node, style } = props, rest = _object_without_properties_loose(props, [
+        "className",
+        "node",
+        "style"
+    ]);
+    const $id = node == null ? void 0 : node.$id;
+    const isSelected = Besigner.focus.isNodeSelected(node);
+    const isHovered = Besigner.focus.isNodeHovered(node);
+    const isDragging = Besigner.dnd.isDraggingNode(node);
+    const isDraggingOver = Besigner.dnd.isDraggingOverDropNode(node);
+    return /*#__PURE__*/ _jsx(NodeOutlineRoot, _extends({
+        ref: ref,
+        "data-aglyn": `outline:${$id}`,
+        // Geometry comes from the caller and ONLY from the caller
+        // (AGL-2486). This used to take a second, independent
+        // `getBoundingClientRect()` of the node and then let `style`
+        // override it — a forced layout on every observer tick whose result
+        // was always discarded. Now that one outline is drawn per line
+        // FRAGMENT that read would happen once per fragment per render, and
+        // it could never answer the question anyway: a single rect cannot
+        // say which fragment this one is.
+        style: style,
+        className: clsx({
+            [classKeys.selectedSelf]: Boolean(isSelected),
+            [classKeys.hoveringSelf]: Boolean(isHovered),
+            [classKeys.draggingSelf]: Boolean(isDragging),
+            [classKeys.draggingOver]: Boolean(isDraggingOver)
+        }, classKeys.root, className)
+    }, rest));
+}));
+NodeOutline.displayName = 'NodeOutline';
+export default NodeOutline;
+
+//# sourceMappingURL=node-outline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/node-outline.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 { generateComponentClassKeys } from '@aglyn/shared-ui-theme'\nimport { styled } from '@mui/material'\nimport clsx from 'clsx'\nimport { observer } from 'mobx-react-lite'\nimport type { ComponentProps } from 'react'\nimport { forwardRef } from 'react'\n\nconst classKeys = generateComponentClassKeys('NodeOutline', [\n  'root',\n  'hoveringSelf',\n  'selectedSelf',\n  'draggingSelf',\n  'draggingOver',\n])\n\nconst NodeOutlineRoot = styled('div', {\n  name: 'NodeOutline',\n  slot: 'Root',\n})(({ theme }) => {\n  const tv = (theme as any).vars || theme\n  // Everything below rides `tv`, so both the outline colour and the fill\n  // alphas follow the previewed scheme. `tertiary` carries the generated\n  // light/dark/mainChannel tokens (addShadeVariants + the CSS-vars theme),\n  // verified against the running console's computed custom properties.\n  const slate = tv.palette.tertiary.main\n  const slateChannel = tv.palette.tertiary.mainChannel\n  // The two accents the canvas is allowed, one rule each: pink says WHAT IS\n  // SELECTED, blue says WHAT THE POINTER WOULD SELECT. See the rules below\n  // for why these two states — and no others — are exempt from the slate;\n  // `canvas-chrome-palette.spec.ts` pins each exemption to its declaration.\n  const selectionAccent = tv.palette.secondary.main\n  const hoverAccent = tv.palette.primary.main\n  const hoverAccentChannel = tv.palette.primary.mainChannel\n  return {\n    pointerEvents: 'none',\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    right: 0,\n    bottom: 0,\n    outlineColor: 'transparent',\n    outlineOffset: 1,\n    outlineWidth: 1,\n    outlineStyle: 'dashed',\n    content: '\"\"',\n\n    // Canvas chrome is the SLATE (AGL-1194) for DRAG and DROP-OVER: those\n    // are momentary, so they differ by STYLE and WEIGHT on one hue — a fill\n    // for the node in flight, and the heaviest treatment for the drop\n    // target.\n    //\n    // The two states that answer \"what am I editing\" carry an accent\n    // instead. Selection (AGL-1221) is a persistent statement about what the\n    // panels on the right are editing, it has to survive against an\n    // arbitrary subscriber palette, and pink is the one hue on this canvas\n    // that never competes with the design being edited.\n    //\n    // Hover is the pointer's half of that same question, and the slate\n    // cannot answer it: the slate is a DESATURATED BLUE, ~17 degrees of hue\n    // from `primary`, so on the dark canvas it reads as the disabled version\n    // of an affordance rather than a live one. It carries `primary`, which\n    // is the same one hue in both schemes.\n    //\n    // Selection stays the stronger of the two by weight and by style: 2px\n    // solid against the 1px dashed the root sets. It claims the border and\n    // nothing else, so it never cancels the wash underneath it.\n    [`&.${classKeys.selectedSelf}`]: {\n      outlineWidth: 2,\n      outlineStyle: 'solid',\n      outlineColor: selectionAccent,\n    },\n    // The two hover affordances answer different questions, so they are\n    // scoped differently.\n    //\n    // The WASH tracks the POINTER, so it is unconditional: the pointer is\n    // over this node whether or not the node is also the selected one, and a\n    // selected node that loses its wash gives the pointer no feedback at all.\n    [`&.${classKeys.hoveringSelf}`]: {\n      backgroundColor: `rgba(${hoverAccentChannel} / 0.08)`,\n    },\n    // The OUTLINE is the one that defers, because selection already owns\n    // that border and says something stronger with it. The `:not()` is\n    // load-bearing — this rule and the selected rule have equal specificity\n    // and this one is declared second, so without it the blue would repaint\n    // the pink outline of whichever element the pointer happens to rest on.\n    [`&.${classKeys.hoveringSelf}:not(.${classKeys.selectedSelf})`]: {\n      outlineColor: hoverAccent,\n    },\n    [`&.${classKeys.draggingSelf}`]: {\n      outlineColor: 'transparent',\n      backgroundColor: `rgba(${slateChannel} / 0.12)`,\n    },\n    // The drop target is momentary and must be unmistakable, so it keeps\n    // the strongest treatment rather than a second hue.\n    [`&.${classKeys.draggingOver}`]: {\n      outlineWidth: 2,\n      outlineStyle: 'solid',\n      outlineColor: slate,\n      backgroundColor: `rgba(${slateChannel} / 0.16)`,\n    },\n    [`&.${classKeys.draggingOver}.${classKeys.draggingSelf}`]: {\n      outlineColor: tv.palette.grey['500'],\n      backgroundColor: 'rgba(158 158 158 / 0.64)',\n    },\n  }\n})\n\nexport interface NodeOutlineProps extends ComponentProps<\n  typeof NodeOutlineRoot\n> {\n  node: Aglyn.NodeSchema<any>\n}\n\nexport const NodeOutline = observer(\n  forwardRef<HTMLDivElement, NodeOutlineProps>((props, ref) => {\n    const { className, node, style, ...rest } = props\n    const $id = node?.$id\n    const isSelected = Besigner.focus.isNodeSelected(node)\n    const isHovered = Besigner.focus.isNodeHovered(node)\n    const isDragging = Besigner.dnd.isDraggingNode(node)\n    const isDraggingOver = Besigner.dnd.isDraggingOverDropNode(node)\n\n    return (\n      <NodeOutlineRoot\n        ref={ref}\n        data-aglyn={`outline:${$id}`}\n        // Geometry comes from the caller and ONLY from the caller\n        // (AGL-2486). This used to take a second, independent\n        // `getBoundingClientRect()` of the node and then let `style`\n        // override it — a forced layout on every observer tick whose result\n        // was always discarded. Now that one outline is drawn per line\n        // FRAGMENT that read would happen once per fragment per render, and\n        // it could never answer the question anyway: a single rect cannot\n        // say which fragment this one is.\n        style={style}\n        className={clsx(\n          {\n            [classKeys.selectedSelf]: Boolean(isSelected),\n            [classKeys.hoveringSelf]: Boolean(isHovered),\n            [classKeys.draggingSelf]: Boolean(isDragging),\n            [classKeys.draggingOver]: Boolean(isDraggingOver),\n          },\n          classKeys.root,\n          className,\n        )}\n        {...rest}\n      />\n    )\n  }),\n)\n\nNodeOutline.displayName = 'NodeOutline'\n\nexport default NodeOutline\n"],"names":["Besigner","generateComponentClassKeys","styled","clsx","observer","forwardRef","classKeys","NodeOutlineRoot","name","slot","theme","tv","vars","slate","palette","tertiary","main","slateChannel","mainChannel","selectionAccent","secondary","hoverAccent","primary","hoverAccentChannel","pointerEvents","position","left","top","right","bottom","outlineColor","outlineOffset","outlineWidth","outlineStyle","content","selectedSelf","hoveringSelf","backgroundColor","draggingSelf","draggingOver","grey","NodeOutline","props","ref","className","node","style","rest","$id","isSelected","focus","isNodeSelected","isHovered","isNodeHovered","isDragging","dnd","isDraggingNode","isDraggingOver","isDraggingOverDropNode","data-aglyn","Boolean","root","displayName"],"mappings":"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"}

package/src/lib/components/node-overlay.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2023 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 PopperProps as MuiPopperProps } from '@mui/material';
+export declare function serializeRect(rect: DOMRect): any;
+export interface NodeOverlayProps extends Partial<MuiPopperProps> {
+    variant: 'hovered' | 'selected';
+}
+declare const NodeOverlay: import("react").FunctionComponent<Omit<NodeOverlayProps, "ref"> & import("react").RefAttributes<any>>;
+export default NodeOverlay;

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

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