@aglyn/besigner-ui 1.0.0-beta.143

package/src/lib/components/inline-text-editor.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/inline-text-editor.component.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 {\n  canvas,\n  FEATURE_FLAG,\n  REUSABLE_INSTANCE_PROP_VALUES_KEY,\n  RICH_TEXT_COMMANDS,\n} from '@aglyn/aglyn'\nimport { mdiCodeBraces } from '@aglyn/shared-data-mdi'\nimport { MdiIcon } from '@aglyn/shared-ui-jsx'\n// Subpath, not the library index — see the note there.\nimport { escapeHtml } from '@aglyn/shared-util-tools/escape-html'\nimport { Box, Button, IconButton, Paper } from '@mui/material'\nimport type { Theme } from '@mui/material/styles'\nimport type { SystemStyleObject } from '@mui/system'\nimport isEqual from 'lodash-es/isEqual.js'\nimport { toJS } from 'mobx'\nimport { observer } from 'mobx-react-lite'\nimport {\n  type KeyboardEvent,\n  type MouseEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\nimport { clampToViewport, useAnchoredRect } from '../hooks/use-anchored-rect'\nimport useInsertTokenOptions from '../hooks/use-insert-token-options'\nimport {\n  beginInPlaceEdit,\n  type InPlaceEditSurface,\n  selectionOf,\n} from '../utils/in-place-edit-surface'\nimport { inlineTextEdit } from '../utils/inline-text-edit.store'\nimport { richTextCommandGroups } from '../utils/rich-text-commands'\nimport {\n  richTextToPlain,\n  sanitizeRichText,\n} from '../utils/sanitize-rich-text'\nimport {\n  createTokenPillElement,\n  materializeTokenPillsInElement,\n  readTokenSegmentsFromDom,\n  replacePillsWithTokenText,\n  TOKEN_PILL_ATTR,\n} from '../utils/token-editable-dom'\nimport {\n  parseTokenSegments,\n  resolveTokenLabel,\n  serializeTokenSegments,\n} from '../utils/token-segments'\nimport { InsertTokenMenu } from './insert-token-menu.component'\nimport {\n  TokenPillPopover,\n  tokenPillContainerSx,\n} from './token-pill.component'\n\n/**\n * The formatting tools, each tagged with the group that has to be allowed\n * for it to appear (AGL-2557).\n *\n * The toolbar used to render this list whole, which is why rich text could\n * only ever be offered by a component that could hold all of it — a\n * `<button>` cannot hold a list, so Accordion Summary and Button were left\n * with no formatting at all rather than with the half that is safe in them.\n */\nconst RICH_COMMANDS: Array<{\n  command: string\n  label: string\n  title: string\n  group: Aglyn.RICH_TEXT_COMMANDS\n}> = [\n  {\n    command: 'bold',\n    label: 'B',\n    title: 'Bold',\n    group: RICH_TEXT_COMMANDS.EMPHASIS,\n  },\n  {\n    command: 'italic',\n    label: 'I',\n    title: 'Italic',\n    group: RICH_TEXT_COMMANDS.EMPHASIS,\n  },\n  {\n    command: 'underline',\n    label: 'U',\n    title: 'Underline',\n    group: RICH_TEXT_COMMANDS.EMPHASIS,\n  },\n  {\n    command: 'insertUnorderedList',\n    label: '•',\n    title: 'Bulleted list',\n    group: RICH_TEXT_COMMANDS.LIST,\n  },\n  {\n    command: 'insertOrderedList',\n    label: '1.',\n    title: 'Numbered list',\n    group: RICH_TEXT_COMMANDS.LIST,\n  },\n]\n\n/** Stands in while no edit is open, so the anchor hook can run every render. */\nconst EMPTY_RECT = { left: 0, top: 0, width: 0, height: 0 }\n\n/**\n * The fallback editor, for an edit with no element to type into — opened\n * with no anchor, or on an anchor already detached from the document.\n *\n * Deliberately OPAQUE. It floats over content that cannot re-flow with it,\n * and a see-through surface in that position is what drew two texts over\n * each other; covering what it stands on is honest, blending with it is not.\n * Everything else edits the canvas leaf itself and needs no surface here.\n */\nconst BOXED_SURFACE_SX = {\n  p: 0.5,\n  bgcolor: 'background.paper',\n  color: 'text.primary',\n  border: '2px solid',\n  borderColor: 'tertiary.main',\n  borderRadius: 0.5,\n  outline: 'none',\n  boxShadow: 4,\n}\n\n/**\n * Plain text as the markup that renders it, newlines included.\n *\n * Named for what it does rather than `escapeHtml`, which it is not: the\n * `<br>` is a CONVERSION, and a reader who takes this for the escaper will\n * eventually reach for it somewhere a line break must stay literal. The\n * escaping half is the shared one.\n */\nfunction textToHtml(text: string): string {\n  return escapeHtml(text).replace(/\\n/g, '<br>')\n}\n\n/**\n * Fixed-position overlay that edits a node's text in place, opened by\n * double-clicking a `textEditable` element in the canvas (see\n * DraggableDroppable). Plain components edit through a pill-capable\n * contentEditable line (Enter or blur commits, Shift+Enter breaks a line,\n * Escape cancels). Components flagged `richTextEditable` (AGL-54) get a\n * contentEditable surface with a basic formatting toolbar; the commit\n * sanitizes the markup through an allowlist and stores it in the `html`\n * prop with `children` kept as the plain-text fallback. Either mode\n * commits ONCE through `Aglyn.canvas.updateNodeProps` (a single undo entry).\n *\n * Binding pills (AGL-586): stored `{{...}}` tokens render as named,\n * colored, atomic pills in BOTH modes when the editor opens; the toolbar's\n * {x} button opens the same grouped insert picker as the attributes panel\n * (assembled from this node's ancestor context) and drops a pill at the\n * caret; clicking a pill offers Replace/Remove. Commits serialize pills\n * back to raw token syntax — names shown, ids stored.\n *\n * Instance prop overrides (AGL-1304): opened with a `propTarget`, the same\n * surface edits a component instance's `propValues[propName]` instead of a\n * node's `children` — the double-clicked leaf is a GRAFTED preview node,\n * not a canvas node, so the commit rides the instance. Always the plain\n * surface (prop values substitute as strings), the same single\n * `updateNodeProps` commit (one undo entry, and the same node-changed\n * signal co-editing's shadow diff already mirrors), and an emptied commit\n * REMOVES the override so the component's own copy returns — exactly what\n * clearing the Attributes field does.\n */\nexport const InlineTextEditorComponent = observer(\n  function InlineTextEditorComponent() {\n    const node = inlineTextEdit.node\n    const rect = inlineTextEdit.rect\n    const propTarget = inlineTextEdit.propTarget\n    // Follows the element as the canvas scrolls or resizes (AGL-1644). Called\n    // unconditionally, above the `!node || !rect` bail-out further down, so the\n    // hook order is stable whether or not an edit is open.\n    const anchor = inlineTextEdit.anchor\n    const live = useAnchoredRect(anchor, rect ?? EMPTY_RECT)\n    /**\n     * Whether the canvas leaf ITSELF is the editing surface (AGL-2486).\n     *\n     * When it is, this component renders only the toolbar: there is no\n     * second rectangle to keep in sync with the text, so the text cannot\n     * move or restyle when editing begins and the layout re-flows because\n     * the element really did grow. That is the\n     * transparent-if-and-only-if-reserved invariant satisfied by\n     * construction rather than by a check.\n     *\n     * When it is not — no element to type into — the opaque fallback\n     * overlay is used instead.\n     */\n    const [inPlaceActive, setInPlaceActive] = useState(false)\n    const overlayRef = useRef<HTMLElement>(null)\n    const plainRef = useRef<HTMLDivElement>(null)\n    const richRef = useRef<HTMLDivElement>(null)\n    // Distinguish commit-blur (Enter already committed) from cancel paths.\n    const committedRef = useRef(false)\n    /**\n     * Whether the surface has been BUILT from the node yet (AGL-2486).\n     *\n     * The editable is populated and focused on a `requestAnimationFrame`, so\n     * between opening and that frame it is an empty box holding no caret.\n     * Committing then reads emptiness as an author's deletion and writes\n     * `children: ''` — the element's text is gone from the canvas, the\n     * co-editing mirror publishes it, and every joiner gets the blank.\n     * Measured exactly that way against screen `yFjgqiG2wm`: node\n     * `XlqFJTz4ej` (\"Be first through the door\") went to `children: ''` from\n     * a double-click and a click-away, with nothing typed. A background tab\n     * makes it certain rather than rare — `requestAnimationFrame` does not\n     * run in one at all, so the surface NEVER seeds and every click-away is\n     * a wipe.\n     *\n     * Nothing can be lost by refusing: a surface that was never built holds\n     * no caret and no typing.\n     */\n    const seededRef = useRef(false)\n    /** The canvas leaf while it IS the editing surface — see beginInPlaceEdit. */\n    const inPlaceRef = useRef<InPlaceEditSurface | undefined>(undefined)\n    /**\n     * Latest handlers for the listeners bound onto the leaf. They are bound\n     * once per edit, so they must not close over a stale render.\n     */\n    const handlersRef = useRef({\n      keyDown: (_e: KeyboardEvent<HTMLDivElement>) => undefined as void,\n      richKeyDown: (_e: KeyboardEvent<HTMLDivElement>) => undefined as void,\n      blur: () => undefined as void,\n      click: (_e: MouseEvent<HTMLDivElement>) => undefined as void,\n      mouseDown: (_e: MouseEvent<HTMLDivElement>) => undefined as void,\n    })\n    // The insert picker / pill popover take focus (portal + autofocus\n    // search) — commit-on-blur must stand down while one is open, or the\n    // editor would commit and close under the open menu (AGL-586).\n    const menuOpenRef = useRef(false)\n    const savedRangeRef = useRef<Range | null>(null)\n    const [insertMenu, setInsertMenu] = useState<{\n      anchorEl: HTMLElement\n      replacePill: HTMLElement | null\n    } | null>(null)\n    const [pillMenu, setPillMenu] = useState<HTMLElement | null>(null)\n\n    // Same context walk as the attributes panel (AGL-583) — the edited\n    // node is known, so dataset-item / entry groups resolve identically.\n    const { options: insertOptions, labelContext } =\n      useInsertTokenOptions(node)\n    const labelContextRef = useRef(labelContext)\n    labelContextRef.current = labelContext\n\n    // A prop edit is always the plain surface: prop values substitute into\n    // the definition as strings (see buildPropTokens), so there is no\n    // per-instance html channel for the rich toolbar to write.\n    const rich =\n      !propTarget &&\n      ((node?.componentSchema?.flags?.richTextEditable ??\n        FEATURE_FLAG.DISABLED) &\n        FEATURE_FLAG.ENABLED) !==\n        0\n\n    // What THIS component's schema allows (AGL-2557); a schema that names\n    // nothing allows everything, which is what leaves Typography alone.\n    const commandGroups = richTextCommandGroups(node?.componentSchema)\n    /**\n     * The surface may hold phrasing content only.\n     *\n     * Derived from the allowance rather than declared beside it: a component\n     * that can take neither a list nor a link is one whose element admits no\n     * block and no nested control, and that single fact is what the commit\n     * sanitizer, the Enter key and the toolbar all need. Two ways to say it\n     * would eventually say two different things.\n     */\n    const phrasingOnly =\n      rich &&\n      !commandGroups.has(RICH_TEXT_COMMANDS.LIST) &&\n      !commandGroups.has(RICH_TEXT_COMMANDS.LINK)\n\n    const activeEditable = useCallback(\n      () =>\n        inPlaceRef.current?.element ??\n        (rich ? richRef.current : plainRef.current),\n      [rich],\n    )\n\n    /**\n     * Opens the edit: builds the content once, and puts it in the canvas\n     * leaf itself wherever that is possible (AGL-2486).\n     *\n     * The builder is shared deliberately. In-place and the fallback overlay\n     * must show the SAME thing — the same pills, the same markup, the same\n     * plain-text seed — or the two paths would drift into two editors.\n     */\n    useEffect(() => {\n      if (!node) return\n      committedRef.current = false\n      menuOpenRef.current = false\n      savedRangeRef.current = null\n      seededRef.current = false\n      const props = { ...node.props, ...node.resolvedProps } as any\n      const text = propTarget\n        ? propTarget.initialText\n        : typeof props?.children === 'string'\n          ? (props.children as string)\n          : ''\n      const resolve = (token: string) =>\n        resolveTokenLabel(token, labelContextRef.current)\n\n      const build = (target: HTMLElement) => {\n        if (rich) {\n          const initial =\n            typeof props?.html === 'string' && props.html\n              ? (props.html as string)\n              : textToHtml(text)\n          target.innerHTML = initial\n          // Raw {{tokens}} in the stored markup become pills (AGL-586).\n          materializeTokenPillsInElement(target, resolve)\n          return\n        }\n        // Plain mode: text nodes + pills, then the browser owns the DOM.\n        target.textContent = ''\n        for (const segment of parseTokenSegments(text)) {\n          if (segment.type === 'token') {\n            target.appendChild(\n              createTokenPillElement(\n                target.ownerDocument,\n                segment.token ?? segment.value,\n                resolve(segment.token ?? segment.value),\n              ),\n            )\n          } else {\n            target.appendChild(target.ownerDocument.createTextNode(segment.value))\n          }\n        }\n      }\n\n      // The element itself, whenever there is one to edit.\n      const surface = beginInPlaceEdit(anchor, build)\n      if (surface) {\n        inPlaceRef.current = surface\n        seededRef.current = true\n        setInPlaceActive(true)\n        surface.element.focus()\n        const selection = surface.selection()\n        if (selection) {\n          const range = surface.element.ownerDocument.createRange()\n          range.selectNodeContents(surface.element)\n          // Caret at the end, never select-all: the author double-clicked a\n          // word to edit it, and replacing the lot on the next keystroke is\n          // how a heading gets destroyed by a typo.\n          range.collapse(false)\n          selection.removeAllRanges()\n          selection.addRange(range)\n        }\n        return () => {\n          surface.dispose()\n          inPlaceRef.current = undefined\n          setInPlaceActive(false)\n        }\n      }\n\n      // No element to edit — the OPAQUE overlay. Built on a frame because\n      // the surface it writes into has not rendered yet, which is the race\n      // `seededRef` exists for.\n      setInPlaceActive(false)\n      const raf = requestAnimationFrame(() => {\n        const editable = rich ? richRef.current : plainRef.current\n        if (!editable) return\n        build(editable)\n        editable.focus()\n        const selection = window.getSelection()\n        if (selection) {\n          const range = document.createRange()\n          range.selectNodeContents(editable)\n          if (rich) range.collapse(false)\n          selection.removeAllRanges()\n          selection.addRange(range)\n        }\n        seededRef.current = true\n      })\n      return () => cancelAnimationFrame(raf)\n    }, [node, rich, propTarget, anchor])\n\n    /**\n     * Writes `next` only when it is a different document (AGL-2486).\n     *\n     * Closing this editor is not by itself an edit. Every branch below\n     * rebuilds the WHOLE props object from the surface's DOM, so a commit\n     * that changed nothing still produced a fresh object — an undo entry, a\n     * node-changed signal, and a co-editing mirror publish, all for an edit\n     * the author never made. The mirror is the expensive one: it is cleared\n     * only by a successful save, so an unsaved no-op is replayed into every\n     * joiner's canvas for `COEDIT_MIRROR_MAX_AGE_MS` (seven days) and each\n     * of them opens a document that reads dirty with nothing to see.\n     */\n    const commitProps = useCallback(\n      (node: Aglyn.NodeSchema<any>, next: Record<string, unknown>) => {\n        if (isEqual(toJS(node.props), next)) return\n        canvas.updateNodeProps(node, next as never)\n      },\n      [],\n    )\n\n    const commit = useCallback(() => {\n      if (committedRef.current) return\n      committedRef.current = true\n      const current = inlineTextEdit.node\n      // An unbuilt surface is not an emptied one (AGL-2486) — close, do not\n      // write. See `seededRef`.\n      /**\n       * Collected first, WRITTEN LAST (AGL-2486).\n       *\n       * The markup this computes is correct; the hazard is that it can be\n       * undone a moment later. Ending the edit restores the element's\n       * original child nodes — deliberately, by reference, so React's fibers\n       * keep pointing at live nodes — and that restore must not run in the\n       * effect cleanup, i.e. AFTER `updateNodeProps` has already told React\n       * to re-render the leaf. In that order React paints the new text and\n       * the parked ORIGINAL nodes then go back over the top of it, so an\n       * edit reads as never having taken.\n       *\n       * Worst for formatted text, which is how it was found: a node with\n       * `html` renders through `dangerouslySetInnerHTML`, so React does not\n       * track those children at all and never corrects them afterwards. The\n       * canvas kept the pre-edit markup, the store held the new value, and\n       * the break came back every time — until \"Remove formatting\" dropped\n       * `html` and the plain `children` finally showed.\n       *\n       * So the element is given back BEFORE the store is written, and the\n       * write is the last thing that happens. React then re-renders onto a\n       * subtree that is exactly where it left it.\n       */\n      let nextWrite: Record<string, unknown> | undefined\n      if (current && seededRef.current) {\n        // UpdateNodeProps REPLACES the props object — spread the existing\n        // props so variant/component/etc. survive the text edit.\n        const surface = activeEditable()\n        if (rich && surface) {\n          // Pills serialize back to raw tokens BEFORE sanitizing (the\n          // sanitizer strips attributes, and pill labels must never\n          // reach storage) — on a clone, the live DOM stays intact.\n          const clone = surface.cloneNode(true) as HTMLElement\n          replacePillsWithTokenText(clone)\n          // The toolbar offers no block command on a phrasing-only surface,\n          // but a PASTE can still carry one in, and the renderer would strip\n          // it — so the commit strips it first and what is stored is what\n          // the page will draw.\n          const sanitized = sanitizeRichText(clone.innerHTML, { phrasingOnly })\n          const plain = richTextToPlain(sanitized)\n          const hasMarkup = /<[a-z]/i.test(sanitized)\n          const nextProps: Record<string, unknown> = {\n            ...toJS(current.props),\n            children: plain,\n          }\n          // ABSENT, not `''`, when there is no markup (AGL-2486). The\n          // renderer gates on `typeof html === 'string' && Boolean(html)`,\n          // so the two are the same document to everything that draws it —\n          // but `isInitialSame` compares serialized node maps with\n          // `isEqual`, and there the empty key is a difference. Writing it\n          // onto a node that never had one is what put SAVE on the header\n          // of a screen nobody had touched.\n          if (hasMarkup) nextProps['html'] = sanitized\n          else delete nextProps['html']\n          nextWrite = nextProps\n        } else if (surface) {\n          let value = serializeTokenSegments(\n            readTokenSegmentsFromDom(surface),\n          )\n          // An emptied contentEditable leaves a stray <br> behind.\n          if (value === '\\n') value = ''\n          const target = inlineTextEdit.propTarget\n          if (target) {\n            // Instance prop override (AGL-1304): the edit rides the\n            // INSTANCE's nested propValues, never the grafted leaf (which\n            // is not a canvas node). An emptied value REMOVES the key —\n            // the graft treats '' as unset anyway, and a cleared override\n            // must read as clean, exactly like the style-override layer.\n            const values = {\n              ...(current.props?.[\n                REUSABLE_INSTANCE_PROP_VALUES_KEY\n              ] as Record<string, unknown> | undefined),\n            }\n            if (value === '') delete values[target.propName]\n            else values[target.propName] = value\n            const nextProps = {\n              ...current.props,\n              [REUSABLE_INSTANCE_PROP_VALUES_KEY]: values,\n            }\n            // The LAST override cleared: drop the container too, so the\n            // stored instance is byte-identical to one never overridden.\n            if (!Object.keys(values).length) {\n              delete nextProps[REUSABLE_INSTANCE_PROP_VALUES_KEY]\n            }\n            nextWrite = toJS(nextProps) as Record<string, unknown>\n          } else {\n            nextWrite = {\n              ...toJS(current.props),\n              children: value,\n            }\n          }\n        }\n      }\n      // Give the element back to React BEFORE the write — see `nextWrite`.\n      inPlaceRef.current?.dispose()\n      inPlaceRef.current = undefined\n      if (current && nextWrite) commitProps(current, nextWrite)\n      inlineTextEdit.close()\n    }, [rich, phrasingOnly, commitProps, activeEditable])\n\n    const cancel = useCallback(() => {\n      committedRef.current = true\n      inlineTextEdit.close()\n    }, [])\n\n    const handleEditableBlur = useCallback(() => {\n      if (menuOpenRef.current) return\n      commit()\n    }, [commit])\n\n    // Latest `commit` for the document listener below, which must not\n    // re-register on every render just to stay current.\n    const commitRef = useRef(commit)\n    commitRef.current = commit\n\n    /**\n     * Wires the editing handlers onto the LEAF while it is the surface.\n     *\n     * Imperatively, because the element belongs to the canvas renderer and\n     * not to this component's JSX — the same reason `contentEditable` is set\n     * as a DOM property. Registered once per edit and torn down with it.\n     *\n     * No `input` handler is needed any more, and that absence is the point:\n     * the element being typed into IS the element being laid out, so the\n     * card, the row and the siblings re-flow on their own. The stand-in that\n     * used to reproduce that effect for an overlay is gone with the overlay.\n     */\n    useEffect(() => {\n      const surface = inPlaceActive ? inPlaceRef.current : undefined\n      const element = surface?.element\n      if (!element) return\n      const onKeyDown = (event: Event) =>\n        (rich ? handlersRef.current.richKeyDown : handlersRef.current.keyDown)(\n          event as unknown as KeyboardEvent<HTMLDivElement>,\n        )\n      const onBlur = () => handlersRef.current.blur()\n      const onClick = (event: Event) =>\n        handlersRef.current.click(\n          event as unknown as MouseEvent<HTMLDivElement>,\n        )\n      const onMouseDown = (event: Event) =>\n        handlersRef.current.mouseDown(\n          event as unknown as MouseEvent<HTMLDivElement>,\n        )\n      element.addEventListener('keydown', onKeyDown)\n      element.addEventListener('blur', onBlur)\n      element.addEventListener('click', onClick)\n      element.addEventListener('mousedown', onMouseDown)\n      return () => {\n        element.removeEventListener('keydown', onKeyDown)\n        element.removeEventListener('blur', onBlur)\n        element.removeEventListener('click', onClick)\n        element.removeEventListener('mousedown', onMouseDown)\n      }\n    }, [inPlaceActive, rich])\n\n    /**\n     * Click-away commits, because on this canvas blur never arrives\n     * (AGL-2486).\n     *\n     * `commit()` used to be reachable from a click only through `onBlur`,\n     * and a click on another element cannot produce one: `DraggableDroppable`\n     * registers `mousedown` AND `pointerdown` on every leaf and both begin\n     * `e.preventDefault(); e.stopPropagation()`. Preventing a mousedown's\n     * default suppresses the focus change it would have caused, so the\n     * editable keeps focus and stays open — while the same handler runs\n     * `Besigner.focus.handleNodeSelection(node, …)` and moves the selection\n     * out from under it. Clicking out \"just selects other elements rather\n     * than applying\", and the edit sits in a surface the author has already\n     * mentally left. This repo has recorded that exact shape once before:\n     * an attribute that commits on blur, discarded by selecting the next\n     * node, with the canvas still looking right.\n     *\n     * A CAPTURE-phase listener on the document is what reaches the commit\n     * first: capture runs from the document down, so it is ahead of the\n     * leaf's own bubble-phase listener and ahead of the `preventDefault`\n     * that would have swallowed the blur. It calls the SAME `commit()` the\n     * Done button does — one commit path, one undo entry, and the same\n     * no-op guard, rather than a second route into the document.\n     *\n     * The click is deliberately NOT consumed: committing and then letting\n     * the canvas select what was clicked is what every other design tool\n     * does, and it is what the author asked for by clicking there.\n     *\n     * `pointerdown`, not `mousedown`: it is the first of the pair, and\n     * `preventDefault` on it suppresses the mouse events that follow, so a\n     * `mousedown` listener would never run for a touch or pen edit.\n     *\n     * Targets inside the canvas retarget to its CLOSED shadow host, which is\n     * not inside this overlay, so `contains` reads them as outside — which\n     * they are. The portalled insert picker and pill popover ARE outside the\n     * overlay in the DOM, and are covered by the same `menuOpenRef` stand-down\n     * that already guards commit-on-blur (AGL-586).\n     */\n    useEffect(() => {\n      if (!node) return\n      const editing = inPlaceRef.current?.element\n      const root = editing?.getRootNode() as ShadowRoot | Document | undefined\n      const host =\n        root && 'host' in root ? (root as ShadowRoot).host : undefined\n\n      const isInsideTheEditor = (target: Node | null): boolean => {\n        if (!target) return false\n        // Read LIVE, never the value captured when this effect ran: a click\n        // inside the text is the author placing a caret, and getting that\n        // wrong tears the surface down and rebuilds it on every click, which\n        // looks exactly like a caret that will not move.\n        const live = inPlaceRef.current?.element\n        if (live?.contains(target)) return true\n        const overlay = overlayRef.current\n        return Boolean(overlay?.contains(target))\n      }\n\n      const handlePointerDownAway = (event: Event) => {\n        if (menuOpenRef.current) return\n        const target = event.target as Node | null\n        // Inside the CLOSED canvas root, an event seen from the document has\n        // already been retargeted to the host, so it cannot say whether the\n        // click landed on the text being edited or beside it. The listener on\n        // the root itself sees the real target and has already decided; this\n        // one must not overrule it with a guess.\n        if (host && target === host) return\n        if (isInsideTheEditor(target)) return\n        commitRef.current()\n      }\n\n      document.addEventListener('pointerdown', handlePointerDownAway, true)\n      // Second listener, INSIDE the shadow root, for the clicks the first one\n      // is blind to — including a click on the very element being edited,\n      // which must move the caret rather than end the edit.\n      if (root && root !== document) {\n        root.addEventListener('pointerdown', handlePointerDownAway, true)\n      }\n      return () => {\n        document.removeEventListener('pointerdown', handlePointerDownAway, true)\n        if (root && root !== document) {\n          root.removeEventListener('pointerdown', handlePointerDownAway, true)\n        }\n      }\n    }, [node, inPlaceActive])\n\n    const insertPlainNewline = useCallback(() => {\n      const editable = activeEditable()\n      const selection = editable ? selectionOf(editable) : null\n      if (!selection || selection.rangeCount === 0) return\n      const range = selection.getRangeAt(0)\n      range.deleteContents()\n      const newline = document.createTextNode('\\n')\n      range.insertNode(newline)\n      range.setStartAfter(newline)\n      range.collapse(true)\n      selection.removeAllRanges()\n      selection.addRange(range)\n    }, [activeEditable])\n\n    const handleKeyDown = useCallback(\n      (event: KeyboardEvent<HTMLDivElement>) => {\n        if (event.key === 'Escape') {\n          event.preventDefault()\n          cancel()\n        } else if (event.key === 'Enter' && !event.shiftKey) {\n          event.preventDefault()\n          commit()\n        } else if (event.key === 'Enter') {\n          // Browsers fork contentEditable into <div>s on Enter — insert\n          // the newline ourselves so reads stay text + pills only.\n          event.preventDefault()\n          insertPlainNewline()\n        }\n      },\n      [cancel, commit, insertPlainNewline],\n    )\n\n    const handleRichKeyDown = useCallback(\n      (event: KeyboardEvent<HTMLDivElement>) => {\n        if (event.key === 'Escape') {\n          event.preventDefault()\n          cancel()\n        } else if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {\n          event.preventDefault()\n          commit()\n        } else if (event.key === 'Enter' && phrasingOnly && !event.shiftKey) {\n          // A phrasing-only surface is a control's LABEL — a button, a link,\n          // an accordion header. Enter there means \"done\", the same as it\n          // does on the plain surface; a browser would otherwise fork the\n          // contentEditable into `<div>`s, which is exactly the markup this\n          // surface may not hold. Shift+Enter still breaks the line, and a\n          // `<br>` is phrasing content.\n          event.preventDefault()\n          commit()\n        }\n      },\n      [cancel, commit, phrasingOnly],\n    )\n\n    // Keep the selection inside the editable surface while clicking tools.\n    const keepFocus = useCallback((event: MouseEvent) => {\n      event.preventDefault()\n    }, [])\n\n    const exec = useCallback(\n      (command: string) => () => {\n        // ExecCommand is deprecated but universally supported and keeps this\n        // dependency-free; the output is normalized by the sanitizer anyway.\n        document.execCommand(command)\n        activeEditable()?.focus()\n      },\n      [activeEditable],\n    )\n\n    const handleLink = useCallback(() => {\n      const url = window.prompt('Link URL (https://…)')\n      if (url) document.execCommand('createLink', false, url)\n      activeEditable()?.focus()\n    }, [activeEditable])\n\n    /** Pill clicks (delegated): offer Replace/Remove (AGL-586). */\n    const handleEditableClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        const pill = (event.target as HTMLElement).closest?.(\n          `[${TOKEN_PILL_ATTR}]`,\n        ) as HTMLElement | null\n        if (!pill || !event.currentTarget.contains(pill)) return\n        menuOpenRef.current = true\n        setPillMenu(pill)\n      },\n      [],\n    )\n\n    // Pills are non-editable islands — a mousedown on one would move\n    // focus out of the editable and trigger commit-on-blur.\n    const handleEditableMouseDown = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        const pill = (event.target as HTMLElement).closest?.(\n          `[${TOKEN_PILL_ATTR}]`,\n        )\n        if (pill) event.preventDefault()\n      },\n      [],\n    )\n\n    handlersRef.current = {\n      keyDown: handleKeyDown,\n      richKeyDown: handleRichKeyDown,\n      blur: handleEditableBlur,\n      click: handleEditableClick,\n      mouseDown: handleEditableMouseDown,\n    }\n\n    /** The toolbar {x}: captures the live selection, opens the picker. */\n    const handleInsertOpen = useCallback(\n      (event: MouseEvent<HTMLElement>) => {\n        const editable = activeEditable()\n        const selection = editable ? selectionOf(editable) : null\n        const range =\n          selection && selection.rangeCount > 0\n            ? selection.getRangeAt(0)\n            : null\n        savedRangeRef.current =\n          range &&\n          editable &&\n          editable.contains(range.startContainer) &&\n          editable.contains(range.endContainer)\n            ? range.cloneRange()\n            : null\n        menuOpenRef.current = true\n        setInsertMenu({ anchorEl: event.currentTarget, replacePill: null })\n      },\n      [activeEditable],\n    )\n\n    const closeMenus = useCallback(() => {\n      setInsertMenu(null)\n      setPillMenu(null)\n      menuOpenRef.current = false\n      activeEditable()?.focus()\n    }, [activeEditable])\n\n    const handleInsertPick = useCallback(\n      (token: string) => {\n        const editable = activeEditable()\n        const replacePill = insertMenu?.replacePill ?? null\n        setInsertMenu(null)\n        menuOpenRef.current = false\n        if (!editable) return\n        const pill = createTokenPillElement(\n          document,\n          token,\n          resolveTokenLabel(token, labelContextRef.current),\n        )\n        if (replacePill && editable.contains(replacePill)) {\n          replacePill.replaceWith(pill)\n        } else {\n          const range = savedRangeRef.current\n          if (\n            range &&\n            editable.contains(range.startContainer) &&\n            editable.contains(range.endContainer)\n          ) {\n            range.deleteContents()\n            range.insertNode(pill)\n          } else {\n            editable.appendChild(pill)\n          }\n        }\n        savedRangeRef.current = null\n        editable.focus()\n        // Caret lands just after the pill, ready to keep typing.\n        const selection = selectionOf(editable)\n        if (selection) {\n          const after = document.createRange()\n          after.setStartAfter(pill)\n          after.collapse(true)\n          selection.removeAllRanges()\n          selection.addRange(after)\n        }\n      },\n      [activeEditable, insertMenu],\n    )\n\n    const handlePillReplace = useCallback(() => {\n      const pill = pillMenu\n      setPillMenu(null)\n      if (!pill) {\n        menuOpenRef.current = false\n        return\n      }\n      // Keep menuOpenRef up — the insert picker opens next.\n      setInsertMenu({ anchorEl: pill, replacePill: pill })\n    }, [pillMenu])\n\n    const handlePillRemove = useCallback(() => {\n      pillMenu?.remove()\n      closeMenus()\n    }, [pillMenu, closeMenus])\n\n    const insertButton = (\n      <IconButton\n        size=\"small\"\n        title=\"Insert data\"\n        aria-label=\"Insert data token\"\n        onMouseDown={keepFocus}\n        onClick={handleInsertOpen}\n        sx={{ width: 28, height: 28, borderRadius: 0.5 }}\n      >\n        <MdiIcon path={mdiCodeBraces.path} fontSize=\"small\" />\n      </IconButton>\n    )\n\n    if (!node || !rect) return null\n\n    // Read at render, which `useAnchoredRect` makes safe: it re-renders on\n    // every scroll and resize, so these are never a stale snapshot. The toolbar\n    // sits 40px ABOVE the surface, so the top margin has to clear it or the\n    // controls go off-screen while the editable stays on it.\n    const viewportWidth =\n      typeof window === 'undefined' ? Infinity : window.innerWidth\n    const viewportHeight =\n      typeof window === 'undefined' ? Infinity : window.innerHeight\n    // The fallback overlay is ALWAYS the opaque box (AGL-2486). It exists\n    // only for an edit with no element to type into, and an element that is\n    // not there cannot re-flow — so a see-through surface over it would be\n    // exactly what the invariant forbids. In-place editing needs no surface\n    // here at all: the leaf is the surface, and this component renders only\n    // the toolbar.\n    //\n    // Built as plain records and cast ONCE, the way `tokenPillContainerSx`\n    // is: MUI's `sx` union cannot absorb a computed spread and reports every\n    // neighbouring key as the error instead.\n    const surfaceSx: Record<string, unknown> = BOXED_SURFACE_SX\n    const richSurfaceSx = {\n      width: '100%',\n      minHeight: live.height,\n      boxSizing: 'border-box',\n      font: 'inherit',\n      ...surfaceSx,\n      '& a': { pointerEvents: 'none' },\n      ...tokenPillContainerSx,\n    } as SystemStyleObject<Theme>\n    const plainSurfaceSx = {\n      width: '100%',\n      minHeight: live.height,\n      boxSizing: 'border-box',\n      font: 'inherit',\n      ...surfaceSx,\n      // After the anchor's type, never from it: `pre-wrap` is what makes a\n      // Shift+Enter newline visible while typing.\n      whiteSpace: 'pre-wrap',\n      wordBreak: 'break-word',\n      ...tokenPillContainerSx,\n    } as SystemStyleObject<Theme>\n    const minWidth = Math.max(live.width, 120)\n    const TOOLBAR_CLEARANCE = 48\n    const KEEP_VISIBLE = 80\n\n    return (\n      <Box\n        ref={overlayRef}\n        data-aglyn=\"overlay:inline-text-editor\"\n        sx={{\n          position: 'fixed',\n          left: clampToViewport(live.left, minWidth, viewportWidth),\n          top: clampToViewport(\n            live.top,\n            KEEP_VISIBLE,\n            viewportHeight,\n            TOOLBAR_CLEARANCE,\n          ),\n          minWidth,\n          maxWidth: '90vw',\n          zIndex: (theme) => theme.zIndex.modal,\n        }}\n      >\n        {/* The toolbar survives in-place editing — B / I / U, lists, link\n            and the {} token control are the reason this editor exists at\n            all, and it is chrome, not text, so it stays an overlay above\n            the run being edited rather than inside it. */}\n        <Paper\n          elevation={4}\n          sx={{\n            position: 'absolute',\n            top: -40,\n            left: 0,\n            px: 0.5,\n            py: 0.25,\n            display: 'flex',\n            gap: 0.25,\n            alignItems: 'center',\n          }}\n        >\n          {rich\n            ? RICH_COMMANDS.filter(({ group }) =>\n                commandGroups.has(group),\n              ).map(({ command, label, title }) => (\n                <IconButton\n                  key={command}\n                  size=\"small\"\n                  title={title}\n                  onMouseDown={keepFocus}\n                  onClick={exec(command)}\n                  sx={{\n                    width: 28,\n                    height: 28,\n                    fontSize: 13,\n                    fontWeight: 700,\n                    fontStyle: command === 'italic' ? 'italic' : undefined,\n                    textDecoration:\n                      command === 'underline' ? 'underline' : undefined,\n                    borderRadius: 0.5,\n                  }}\n                >\n                  {label}\n                </IconButton>\n              ))\n            : null}\n          {rich && commandGroups.has(RICH_TEXT_COMMANDS.LINK) ? (\n            <IconButton\n              size=\"small\"\n              title=\"Insert link\"\n              onMouseDown={keepFocus}\n              onClick={handleLink}\n              sx={{ width: 28, height: 28, fontSize: 13, borderRadius: 0.5 }}\n            >\n              {'\\u{1F517}'}\n            </IconButton>\n          ) : null}\n          {insertButton}\n          <Button\n            size=\"small\"\n            color=\"primary\"\n            onMouseDown={keepFocus}\n            onClick={commit}\n          >\n            {'Done'}\n          </Button>\n        </Paper>\n        {/* No surface at all when the leaf is the surface (AGL-2486). */}\n        {inPlaceActive ? null : rich ? (\n          <Box\n            ref={richRef}\n            contentEditable\n            suppressContentEditableWarning\n            role=\"textbox\"\n            aria-label=\"Edit rich text\"\n            onKeyDown={handleRichKeyDown}\n            onBlur={handleEditableBlur}\n            onClick={handleEditableClick}\n            onMouseDown={handleEditableMouseDown}\n            sx={richSurfaceSx}\n          />\n        ) : (\n          <Box\n            ref={plainRef}\n            contentEditable\n            suppressContentEditableWarning\n            role=\"textbox\"\n            aria-label=\"Edit text\"\n            onKeyDown={handleKeyDown}\n            onBlur={handleEditableBlur}\n            onClick={handleEditableClick}\n            onMouseDown={handleEditableMouseDown}\n            sx={plainSurfaceSx}\n          />\n        )}\n        <InsertTokenMenu\n          anchorEl={insertMenu?.anchorEl ?? null}\n          open={Boolean(insertMenu)}\n          onClose={closeMenus}\n          options={insertOptions}\n          onInsert={handleInsertPick}\n        />\n        <TokenPillPopover\n          anchorEl={pillMenu}\n          token={pillMenu?.getAttribute(TOKEN_PILL_ATTR) ?? ''}\n          onClose={closeMenus}\n          onReplace={handlePillReplace}\n          onRemove={handlePillRemove}\n        />\n      </Box>\n    )\n  },\n)\nInlineTextEditorComponent.displayName = 'InlineTextEditorComponent'\n\nexport default InlineTextEditorComponent\n"],"names":["canvas","FEATURE_FLAG","REUSABLE_INSTANCE_PROP_VALUES_KEY","RICH_TEXT_COMMANDS","mdiCodeBraces","MdiIcon","escapeHtml","Box","Button","IconButton","Paper","isEqual","toJS","observer","useCallback","useEffect","useRef","useState","clampToViewport","useAnchoredRect","useInsertTokenOptions","beginInPlaceEdit","selectionOf","inlineTextEdit","richTextCommandGroups","richTextToPlain","sanitizeRichText","createTokenPillElement","materializeTokenPillsInElement","readTokenSegmentsFromDom","replacePillsWithTokenText","TOKEN_PILL_ATTR","parseTokenSegments","resolveTokenLabel","serializeTokenSegments","InsertTokenMenu","TokenPillPopover","tokenPillContainerSx","RICH_COMMANDS","command","label","title","group","EMPHASIS","LIST","EMPTY_RECT","left","top","width","height","BOXED_SURFACE_SX","p","bgcolor","color","border","borderColor","borderRadius","outline","boxShadow","textToHtml","text","replace","InlineTextEditorComponent","node","rect","propTarget","anchor","live","inPlaceActive","setInPlaceActive","overlayRef","plainRef","richRef","committedRef","seededRef","inPlaceRef","undefined","handlersRef","keyDown","_e","richKeyDown","blur","click","mouseDown","menuOpenRef","savedRangeRef","insertMenu","setInsertMenu","pillMenu","setPillMenu","options","insertOptions","labelContext","labelContextRef","current","rich","componentSchema","flags","richTextEditable","DISABLED","ENABLED","commandGroups","phrasingOnly","has","LINK","activeEditable","element","props","resolvedProps","initialText","children","resolve","token","build","target","initial","html","innerHTML","textContent","segment","type","appendChild","ownerDocument","value","createTextNode","surface","focus","selection","range","createRange","selectNodeContents","collapse","removeAllRanges","addRange","dispose","raf","requestAnimationFrame","editable","window","getSelection","document","cancelAnimationFrame","commitProps","next","updateNodeProps","commit","nextWrite","clone","cloneNode","sanitized","plain","hasMarkup","test","nextProps","values","propName","Object","keys","length","close","cancel","handleEditableBlur","commitRef","onKeyDown","event","onBlur","onClick","onMouseDown","addEventListener","removeEventListener","editing","root","getRootNode","host","isInsideTheEditor","contains","overlay","Boolean","handlePointerDownAway","insertPlainNewline","rangeCount","getRangeAt","deleteContents","newline","insertNode","setStartAfter","handleKeyDown","key","preventDefault","shiftKey","handleRichKeyDown","metaKey","ctrlKey","keepFocus","exec","execCommand","handleLink","url","prompt","handleEditableClick","pill","closest","currentTarget","handleEditableMouseDown","handleInsertOpen","startContainer","endContainer","cloneRange","anchorEl","replacePill","closeMenus","handleInsertPick","replaceWith","after","handlePillReplace","handlePillRemove","remove","insertButton","size","aria-label","sx","path","fontSize","viewportWidth","Infinity","innerWidth","viewportHeight","innerHeight","surfaceSx","richSurfaceSx","minHeight","boxSizing","font","pointerEvents","plainSurfaceSx","whiteSpace","wordBreak","minWidth","Math","max","TOOLBAR_CLEARANCE","KEEP_VISIBLE","ref","data-aglyn","position","maxWidth","zIndex","theme","modal","elevation","px","py","display","gap","alignItems","filter","map","fontWeight","fontStyle","textDecoration","contentEditable","suppressContentEditableWarning","role","open","onClose","onInsert","getAttribute","onReplace","onRemove","displayName"],"mappings":"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"}

package/src/lib/components/insert-token-menu.component.d.ts

@@ -0,0 +1,86 @@
+/**
+ * @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 { BindingOption } from '../contexts/binding-picker-context';
+/**
+ * Insert-token building blocks (AGL-583): the {x} input adornment that
+ * opens the data-placeholder picker on token-capable attribute fields, the
+ * grouped/searchable picker menu itself, and the pure caret-splice helper.
+ * The element props form wires them to the form state so an insert behaves
+ * exactly like typing the token by hand (raw `{{...}}` stays supported).
+ */
+/**
+ * Splices `token` into `text` at the captured selection, replacing any
+ * selected range — the concat/builder behavior: existing text before and
+ * after the caret is preserved. A null/undefined start means the field was
+ * never focused, so the token appends at the end. Returns the new value
+ * and the caret position just after the inserted token.
+ */
+export declare function insertTokenIntoText(text: string, token: string, start?: number | null, end?: number | null): {
+    value: string;
+    caret: number;
+};
+/** The input element + selection captured when the adornment is pressed. */
+export interface TokenFieldCapture {
+    input: HTMLInputElement | HTMLTextAreaElement | null;
+    start: number | null;
+    end: number | null;
+}
+/**
+ * Reads the adornment's sibling input and, when it holds focus, its
+ * selection. Selection is only trusted while the input is focused — an
+ * unfocused input reports a stale 0/0 selection, and inserting there
+ * would silently prepend; appending at the end is the safer default.
+ */
+export declare function captureAdornmentTarget(button: HTMLElement): TokenFieldCapture;
+export interface InsertTokenAdornmentProps {
+    onOpen: (anchor: HTMLElement, capture: TokenFieldCapture) => void;
+}
+/**
+ * The small {x} button rendered as an end adornment on token-capable
+ * attribute inputs. The caret is captured on MOUSEDOWN — before the click
+ * would move focus — and the default is prevented so the input keeps both
+ * focus and its visible selection while the picker opens.
+ */
+export declare function InsertTokenAdornment(props: InsertTokenAdornmentProps): import("react").JSX.Element;
+export declare namespace InsertTokenAdornment {
+    var displayName: string;
+}
+export interface InsertTokenMenuProps {
+    anchorEl: HTMLElement | null;
+    open: boolean;
+    onClose: () => void;
+    options: BindingOption[];
+    onInsert: (token: string) => void;
+    /**
+     * What the menu says when there is nothing to offer at all, as opposed to
+     * nothing matching a search. A field that takes only one kind of value
+     * knows where more of that kind comes from, and should say so.
+     */
+    emptyText?: string;
+}
+/**
+ * The grouped, searchable data-placeholder picker (AGL-583) — one menu
+ * serving both the per-field {x} adornment and the legacy element-level
+ * "Insert binding" button (AGL-100). Groups render in option order with
+ * subheaders; context-dependent groups carry a hint line saying where
+ * their tokens resolve. Search filters across label, group, and preview.
+ */
+export declare function InsertTokenMenu(props: InsertTokenMenuProps): import("react").JSX.Element;
+export declare namespace InsertTokenMenu {
+    var displayName: string;
+}
+export default InsertTokenMenu;

package/src/lib/components/insert-token-menu.component.js

@@ -0,0 +1,232 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @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 { mdiCodeBraces } from "@aglyn/shared-data-mdi";
+import { HelpTip, MdiIcon } from "@aglyn/shared-ui-jsx";
+import { Box, IconButton, InputAdornment, ListSubheader, Menu, MenuItem, Stack, TextField, Typography } from "@mui/material";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { besignerDocsUrl } from "../utils/docs-help.js";
+/**
+ * Insert-token building blocks (AGL-583): the {x} input adornment that
+ * opens the data-placeholder picker on token-capable attribute fields, the
+ * grouped/searchable picker menu itself, and the pure caret-splice helper.
+ * The element props form wires them to the form state so an insert behaves
+ * exactly like typing the token by hand (raw `{{...}}` stays supported).
+ */ /**
+ * Splices `token` into `text` at the captured selection, replacing any
+ * selected range — the concat/builder behavior: existing text before and
+ * after the caret is preserved. A null/undefined start means the field was
+ * never focused, so the token appends at the end. Returns the new value
+ * and the caret position just after the inserted token.
+ */ export function insertTokenIntoText(text, token, start, end) {
+    const length = text.length;
+    const clamp = (value)=>Math.min(Math.max(value, 0), length);
+    const at = start == null ? length : clamp(start);
+    const to = end == null ? at : Math.max(clamp(end), at);
+    return {
+        value: `${text.slice(0, at)}${token}${text.slice(to)}`,
+        caret: at + token.length
+    };
+}
+/**
+ * Reads the adornment's sibling input and, when it holds focus, its
+ * selection. Selection is only trusted while the input is focused — an
+ * unfocused input reports a stale 0/0 selection, and inserting there
+ * would silently prepend; appending at the end is the safer default.
+ */ export function captureAdornmentTarget(button) {
+    var _ref, _ref1;
+    const root = button.closest('.MuiInputBase-root');
+    const input = root == null ? void 0 : root.querySelector('input, textarea');
+    const focused = Boolean(input) && document.activeElement === input;
+    return {
+        input,
+        start: focused ? (_ref = input == null ? void 0 : input.selectionStart) != null ? _ref : null : null,
+        end: focused ? (_ref1 = input == null ? void 0 : input.selectionEnd) != null ? _ref1 : null : null
+    };
+}
+/**
+ * The small {x} button rendered as an end adornment on token-capable
+ * attribute inputs. The caret is captured on MOUSEDOWN — before the click
+ * would move focus — and the default is prevented so the input keeps both
+ * focus and its visible selection while the picker opens.
+ */ export function InsertTokenAdornment(props) {
+    const { onOpen } = props;
+    const captureRef = useRef(null);
+    const handleMouseDown = useCallback((event)=>{
+        captureRef.current = captureAdornmentTarget(event.currentTarget);
+        event.preventDefault();
+    }, []);
+    const handleClick = useCallback((event)=>{
+        var _captureRef_current;
+        // Keyboard activation never fires mousedown — capture on demand
+        // (the input isn't focused then, so the token appends at the end).
+        const capture = (_captureRef_current = captureRef.current) != null ? _captureRef_current : captureAdornmentTarget(event.currentTarget);
+        captureRef.current = null;
+        onOpen(event.currentTarget, capture);
+    }, [
+        onOpen
+    ]);
+    return /*#__PURE__*/ _jsx(InputAdornment, {
+        position: "end",
+        children: /*#__PURE__*/ _jsx(IconButton, {
+            "aria-label": "Insert data token",
+            title: "Insert data",
+            size: "small",
+            edge: "end",
+            onMouseDown: handleMouseDown,
+            onClick: handleClick,
+            children: /*#__PURE__*/ _jsx(MdiIcon, {
+                path: mdiCodeBraces.path,
+                fontSize: "small"
+            })
+        })
+    });
+}
+InsertTokenAdornment.displayName = 'InsertTokenAdornment';
+/**
+ * The grouped, searchable data-placeholder picker (AGL-583) — one menu
+ * serving both the per-field {x} adornment and the legacy element-level
+ * "Insert binding" button (AGL-100). Groups render in option order with
+ * subheaders; context-dependent groups carry a hint line saying where
+ * their tokens resolve. Search filters across label, group, and preview.
+ */ export function InsertTokenMenu(props) {
+    const { anchorEl, open, onClose, options, onInsert, emptyText } = props;
+    // Hosts can have hundreds of variables (AGL-186) — filter as you type.
+    const [search, setSearch] = useState('');
+    const handleClose = useCallback(()=>{
+        setSearch('');
+        onClose();
+    }, [
+        onClose
+    ]);
+    const visibleOptions = useMemo(()=>{
+        const term = search.trim().toLowerCase();
+        if (!term) return options;
+        return options.filter((option)=>[
+                option.label,
+                option.group,
+                option.preview
+            ].filter(Boolean).some((text)=>String(text).toLowerCase().includes(term)));
+    }, [
+        options,
+        search
+    ]);
+    return /*#__PURE__*/ _jsxs(Menu, {
+        anchorEl: anchorEl,
+        open: open,
+        onClose: handleClose,
+        // Focus goes back to the edited input (with the caret placed after
+        // the inserted token), never to the adornment button.
+        disableRestoreFocus: true,
+        slotProps: {
+            paper: {
+                sx: {
+                    width: 340,
+                    maxWidth: '90vw'
+                }
+            }
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    px: 1.5,
+                    pb: 1,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 0.5
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(TextField, {
+                        size: "small",
+                        placeholder: "Search data…",
+                        value: search,
+                        onChange: (event)=>setSearch(event.target.value),
+                        onKeyDown: (event)=>event.stopPropagation(),
+                        autoFocus: true,
+                        fullWidth: true
+                    }),
+                    /*#__PURE__*/ _jsx(HelpTip, {
+                        title: "Bindings",
+                        excerpt: "Insert a variable or function token. It stays a rename-safe reference, and the canvas shows the resolved value until you toggle raw tokens.",
+                        href: besignerDocsUrl('bindings', '#insert-a-variable'),
+                        sx: {
+                            flexShrink: 0,
+                            fontSize: '0.9em'
+                        }
+                    })
+                ]
+            }),
+            visibleOptions.length === 0 ? /*#__PURE__*/ _jsx(MenuItem, {
+                disabled: true,
+                sx: {
+                    whiteSpace: 'normal'
+                },
+                children: options.length === 0 && emptyText ? emptyText : 'No data matches'
+            }) : null,
+            visibleOptions.map((option, index)=>{
+                var _option_group;
+                const previous = visibleOptions[index - 1];
+                const newGroup = option.group && option.group !== (previous == null ? void 0 : previous.group);
+                return [
+                    newGroup ? /*#__PURE__*/ _jsxs(ListSubheader, {
+                        sx: {
+                            lineHeight: option.groupHint ? 1.6 : undefined,
+                            py: option.groupHint ? 0.75 : undefined
+                        },
+                        children: [
+                            option.group,
+                            option.groupHint ? /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                color: "text.secondary",
+                                component: "div",
+                                children: option.groupHint
+                            }) : null
+                        ]
+                    }, `${option.group}-header`) : null,
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        onClick: ()=>{
+                            setSearch('');
+                            onInsert(option.token);
+                        },
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            sx: {
+                                minWidth: 0
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    children: option.label
+                                }),
+                                option.preview ? /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    color: "text.secondary",
+                                    sx: {
+                                        overflowWrap: 'break-word'
+                                    },
+                                    children: option.preview
+                                }) : null
+                            ]
+                        })
+                    }, `${(_option_group = option.group) != null ? _option_group : ''}-${option.token}-${index}`)
+                ];
+            })
+        ]
+    });
+}
+InsertTokenMenu.displayName = 'InsertTokenMenu';
+export default InsertTokenMenu;
+
+//# sourceMappingURL=insert-token-menu.component.js.map

package/src/lib/components/insert-token-menu.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/insert-token-menu.component.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 { mdiCodeBraces } from '@aglyn/shared-data-mdi'\nimport { HelpTip, MdiIcon } from '@aglyn/shared-ui-jsx'\nimport {\n  Box,\n  IconButton,\n  InputAdornment,\n  ListSubheader,\n  Menu,\n  MenuItem,\n  Stack,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport { type MouseEvent, useCallback, useMemo, useRef, useState } from 'react'\n\nimport type { BindingOption } from '../contexts/binding-picker-context'\nimport { besignerDocsUrl } from '../utils/docs-help'\n\n/**\n * Insert-token building blocks (AGL-583): the {x} input adornment that\n * opens the data-placeholder picker on token-capable attribute fields, the\n * grouped/searchable picker menu itself, and the pure caret-splice helper.\n * The element props form wires them to the form state so an insert behaves\n * exactly like typing the token by hand (raw `{{...}}` stays supported).\n */\n\n/**\n * Splices `token` into `text` at the captured selection, replacing any\n * selected range — the concat/builder behavior: existing text before and\n * after the caret is preserved. A null/undefined start means the field was\n * never focused, so the token appends at the end. Returns the new value\n * and the caret position just after the inserted token.\n */\nexport function insertTokenIntoText(\n  text: string,\n  token: string,\n  start?: number | null,\n  end?: number | null,\n): { value: string; caret: number } {\n  const length = text.length\n  const clamp = (value: number) => Math.min(Math.max(value, 0), length)\n  const at = start == null ? length : clamp(start)\n  const to = end == null ? at : Math.max(clamp(end), at)\n  return {\n    value: `${text.slice(0, at)}${token}${text.slice(to)}`,\n    caret: at + token.length,\n  }\n}\n\n/** The input element + selection captured when the adornment is pressed. */\nexport interface TokenFieldCapture {\n  input: HTMLInputElement | HTMLTextAreaElement | null\n  start: number | null\n  end: number | null\n}\n\n/**\n * Reads the adornment's sibling input and, when it holds focus, its\n * selection. Selection is only trusted while the input is focused — an\n * unfocused input reports a stale 0/0 selection, and inserting there\n * would silently prepend; appending at the end is the safer default.\n */\nexport function captureAdornmentTarget(button: HTMLElement): TokenFieldCapture {\n  const root = button.closest('.MuiInputBase-root')\n  const input = root?.querySelector('input, textarea') as\n    | HTMLInputElement\n    | HTMLTextAreaElement\n    | null\n  const focused = Boolean(input) && document.activeElement === input\n  return {\n    input,\n    start: focused ? input?.selectionStart ?? null : null,\n    end: focused ? input?.selectionEnd ?? null : null,\n  }\n}\n\nexport interface InsertTokenAdornmentProps {\n  onOpen: (anchor: HTMLElement, capture: TokenFieldCapture) => void\n}\n\n/**\n * The small {x} button rendered as an end adornment on token-capable\n * attribute inputs. The caret is captured on MOUSEDOWN — before the click\n * would move focus — and the default is prevented so the input keeps both\n * focus and its visible selection while the picker opens.\n */\nexport function InsertTokenAdornment(props: InsertTokenAdornmentProps) {\n  const { onOpen } = props\n  const captureRef = useRef<TokenFieldCapture | null>(null)\n\n  const handleMouseDown = useCallback((event: MouseEvent<HTMLElement>) => {\n    captureRef.current = captureAdornmentTarget(event.currentTarget)\n    event.preventDefault()\n  }, [])\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLElement>) => {\n      // Keyboard activation never fires mousedown — capture on demand\n      // (the input isn't focused then, so the token appends at the end).\n      const capture =\n        captureRef.current ?? captureAdornmentTarget(event.currentTarget)\n      captureRef.current = null\n      onOpen(event.currentTarget, capture)\n    },\n    [onOpen],\n  )\n\n  return (\n    <InputAdornment position=\"end\">\n      <IconButton\n        aria-label=\"Insert data token\"\n        title=\"Insert data\"\n        size=\"small\"\n        edge=\"end\"\n        onMouseDown={handleMouseDown}\n        onClick={handleClick}\n      >\n        <MdiIcon path={mdiCodeBraces.path} fontSize=\"small\" />\n      </IconButton>\n    </InputAdornment>\n  )\n}\nInsertTokenAdornment.displayName = 'InsertTokenAdornment'\n\nexport interface InsertTokenMenuProps {\n  anchorEl: HTMLElement | null\n  open: boolean\n  onClose: () => void\n  options: BindingOption[]\n  onInsert: (token: string) => void\n  /**\n   * What the menu says when there is nothing to offer at all, as opposed to\n   * nothing matching a search. A field that takes only one kind of value\n   * knows where more of that kind comes from, and should say so.\n   */\n  emptyText?: string\n}\n\n/**\n * The grouped, searchable data-placeholder picker (AGL-583) — one menu\n * serving both the per-field {x} adornment and the legacy element-level\n * \"Insert binding\" button (AGL-100). Groups render in option order with\n * subheaders; context-dependent groups carry a hint line saying where\n * their tokens resolve. Search filters across label, group, and preview.\n */\nexport function InsertTokenMenu(props: InsertTokenMenuProps) {\n  const { anchorEl, open, onClose, options, onInsert, emptyText } = props\n  // Hosts can have hundreds of variables (AGL-186) — filter as you type.\n  const [search, setSearch] = useState('')\n\n  const handleClose = useCallback(() => {\n    setSearch('')\n    onClose()\n  }, [onClose])\n\n  const visibleOptions = useMemo(() => {\n    const term = search.trim().toLowerCase()\n    if (!term) return options\n    return options.filter((option) =>\n      [option.label, option.group, option.preview]\n        .filter(Boolean)\n        .some((text) => String(text).toLowerCase().includes(term)),\n    )\n  }, [options, search])\n\n  return (\n    <Menu\n      anchorEl={anchorEl}\n      open={open}\n      onClose={handleClose}\n      // Focus goes back to the edited input (with the caret placed after\n      // the inserted token), never to the adornment button.\n      disableRestoreFocus\n      slotProps={{ paper: { sx: { width: 340, maxWidth: '90vw' } } }}\n    >\n      {/* One help affordance for BOTH bindings entry points (AGL-2167):\n          this menu is what the per-field {x} adornment opens and what the\n          element-level \"Insert binding\" button opens, so the explanation\n          of what a token is belongs here rather than duplicated at each. */}\n      <Box\n        sx={{\n          px: 1.5,\n          pb: 1,\n          display: 'flex',\n          alignItems: 'center',\n          gap: 0.5,\n        }}\n      >\n        <TextField\n          size=\"small\"\n          placeholder=\"Search data…\"\n          value={search}\n          onChange={(event) => setSearch(event.target.value)}\n          onKeyDown={(event) => event.stopPropagation()}\n          autoFocus\n          fullWidth\n        />\n        <HelpTip\n          title=\"Bindings\"\n          excerpt=\"Insert a variable or function token. It stays a rename-safe reference, and the canvas shows the resolved value until you toggle raw tokens.\"\n          href={besignerDocsUrl('bindings', '#insert-a-variable')}\n          sx={{ flexShrink: 0, fontSize: '0.9em' }}\n        />\n      </Box>\n      {visibleOptions.length === 0 ? (\n        <MenuItem disabled sx={{ whiteSpace: 'normal' }}>\n          {options.length === 0 && emptyText ? emptyText : 'No data matches'}\n        </MenuItem>\n      ) : null}\n      {visibleOptions.map((option, index) => {\n        const previous = visibleOptions[index - 1]\n        const newGroup = option.group && option.group !== previous?.group\n        return [\n          newGroup ? (\n            <ListSubheader\n              key={`${option.group}-header`}\n              sx={{ lineHeight: option.groupHint ? 1.6 : undefined, py: option.groupHint ? 0.75 : undefined }}\n            >\n              {option.group}\n              {/* Context hint (AGL-583): where these tokens resolve. */}\n              {option.groupHint ? (\n                <Typography\n                  variant=\"caption\"\n                  color=\"text.secondary\"\n                  component=\"div\"\n                >\n                  {option.groupHint}\n                </Typography>\n              ) : null}\n            </ListSubheader>\n          ) : null,\n          <MenuItem\n            key={`${option.group ?? ''}-${option.token}-${index}`}\n            onClick={() => {\n              setSearch('')\n              onInsert(option.token)\n            }}\n          >\n            <Stack sx={{ minWidth: 0 }}>\n              <Typography variant=\"body2\">{option.label}</Typography>\n              {/* Live value preview (AGL-262) / token description. */}\n              {option.preview ? (\n                <Typography\n                  variant=\"caption\"\n                  color=\"text.secondary\"\n                  sx={{ overflowWrap: 'break-word' }}\n                >\n                  {option.preview}\n                </Typography>\n              ) : null}\n            </Stack>\n          </MenuItem>,\n        ]\n      })}\n    </Menu>\n  )\n}\nInsertTokenMenu.displayName = 'InsertTokenMenu'\n\nexport default InsertTokenMenu\n"],"names":["mdiCodeBraces","HelpTip","MdiIcon","Box","IconButton","InputAdornment","ListSubheader","Menu","MenuItem","Stack","TextField","Typography","useCallback","useMemo","useRef","useState","besignerDocsUrl","insertTokenIntoText","text","token","start","end","length","clamp","value","Math","min","max","at","to","slice","caret","captureAdornmentTarget","button","root","closest","input","querySelector","focused","Boolean","document","activeElement","selectionStart","selectionEnd","InsertTokenAdornment","props","onOpen","captureRef","handleMouseDown","event","current","currentTarget","preventDefault","handleClick","capture","position","aria-label","title","size","edge","onMouseDown","onClick","path","fontSize","displayName","InsertTokenMenu","anchorEl","open","onClose","options","onInsert","emptyText","search","setSearch","handleClose","visibleOptions","term","trim","toLowerCase","filter","option","label","group","preview","some","String","includes","disableRestoreFocus","slotProps","paper","sx","width","maxWidth","px","pb","display","alignItems","gap","placeholder","onChange","target","onKeyDown","stopPropagation","autoFocus","fullWidth","excerpt","href","flexShrink","disabled","whiteSpace","map","index","previous","newGroup","lineHeight","groupHint","undefined","py","variant","color","component","minWidth","overflowWrap"],"mappings":"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"}

package/src/lib/components/instance-attr-overrides.component.d.ts

@@ -0,0 +1,50 @@
+/**
+ * @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 FormRendererProps } from '@aglyn/shared-ui-jsx-forms';
+export interface InstanceAttrOverridesProps {
+    /** The selected node, as the panel holds it. */
+    node?: Aglyn.NodeSchema<any>;
+    /**
+     * Passed in rather than imported, so this file does not import the
+     * Attributes form that renders it (a cycle) — and so a caller can narrow
+     * the editors on offer without this component knowing about any of them.
+     */
+    componentMapper: FormRendererProps['componentMapper'];
+}
+/**
+ * Per-instance ATTRIBUTE overrides for a reusable-component instance
+ * (AGL-1899) — the attribute-side twin of the Styles panel's override
+ * section (AGL-1332).
+ *
+ * An instance renders the component's CURRENT nodes; this section layers one
+ * placement's own prop values over one node inside it, so a single page's CTA
+ * can be `outlined` while every other placement stays `contained` — without
+ * the component declaring a prop for it, without detaching, and without
+ * pinning the instance to a component version. The graft merges the slice per
+ * named prop, so a prop the component ADDS later still reaches this instance
+ * with the component's new default.
+ *
+ * Content is deliberately not editable here: a component's text rides its
+ * declared `{{prop.*}}` props and the canvas's double-click editor (AGL-1304),
+ * and `children`/`html` are refused by the writer so this panel never becomes
+ * a second control writing the same rendered string.
+ */
+export declare const InstanceAttrOverrides: (({ node: selectedNode, componentMapper, }: InstanceAttrOverridesProps) => import("react").JSX.Element) & {
+    displayName: string;
+};
+export default InstanceAttrOverrides;