@aglyn/besigner-ui 1.0.0-beta.143

package/src/lib/components/history-controls.component.js

@@ -0,0 +1,67 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+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 { canvas } from "@aglyn/aglyn";
+import { ICON_VARIANT_MODIFY_REDO, ICON_VARIANT_MODIFY_UNDO } from "@aglyn/shared-data-enums";
+import { MdiIcon } from "@aglyn/shared-ui-jsx";
+import { IconButton as MuiIconButton, Stack as MuiStack, Tooltip as MuiTooltip } from "@mui/material";
+import { observer } from "mobx-react-lite";
+import { forwardRef } from "react";
+function HistoryControls(props, ref) {
+    return /*#__PURE__*/ _jsxs(MuiStack, _extends({
+        ref: ref,
+        direction: "row",
+        spacing: 0.25
+    }, props, {
+        children: [
+            /*#__PURE__*/ _jsx(MuiTooltip, {
+                title: 'Undo (⌘Z)',
+                children: /*#__PURE__*/ _jsx("span", {
+                    children: /*#__PURE__*/ _jsx(MuiIconButton, {
+                        "aria-label": "undo action",
+                        onClick: ()=>canvas.undo(),
+                        disabled: !canvas.canUndo,
+                        children: /*#__PURE__*/ _jsx(MdiIcon, {
+                            fontSize: "small",
+                            path: ICON_VARIANT_MODIFY_UNDO.path
+                        })
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx(MuiTooltip, {
+                title: 'Redo (⌘Y)',
+                children: /*#__PURE__*/ _jsx("span", {
+                    children: /*#__PURE__*/ _jsx(MuiIconButton, {
+                        "aria-label": "redo action",
+                        onClick: ()=>canvas.redo(),
+                        disabled: !canvas.canRedo,
+                        children: /*#__PURE__*/ _jsx(MdiIcon, {
+                            fontSize: "small",
+                            path: ICON_VARIANT_MODIFY_REDO.path
+                        })
+                    })
+                })
+            })
+        ]
+    }));
+}
+HistoryControls.displayName = 'HistoryControlsComponent';
+HistoryControls.aglyn = true;
+export const HistoryControlsComponent = observer(/*#__PURE__*/ forwardRef(HistoryControls));
+export default HistoryControlsComponent;
+
+//# sourceMappingURL=history-controls.component.js.map

package/src/lib/components/history-controls.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/history-controls.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 { canvas } from '@aglyn/aglyn'\nimport {\n  ICON_VARIANT_MODIFY_REDO,\n  ICON_VARIANT_MODIFY_UNDO,\n} from '@aglyn/shared-data-enums'\nimport { MdiIcon } from '@aglyn/shared-ui-jsx'\nimport {\n  IconButton as MuiIconButton,\n  Stack as MuiStack,\n  type StackProps,\n  Tooltip as MuiTooltip,\n} from '@mui/material'\nimport { observer } from 'mobx-react-lite'\nimport { forwardRef, type MutableRefObject } from 'react'\n\nexport interface HistoryControlsProps extends StackProps {}\n\nfunction HistoryControls(\n  props: HistoryControlsProps,\n  ref: MutableRefObject<any>,\n) {\n  return (\n    <MuiStack ref={ref} direction=\"row\" spacing={0.25} {...props}>\n      <MuiTooltip title={'Undo (⌘Z)'}>\n        <span>\n          <MuiIconButton\n            aria-label=\"undo action\"\n            onClick={() => canvas.undo()}\n            disabled={!canvas.canUndo}\n          >\n            <MdiIcon fontSize=\"small\" path={ICON_VARIANT_MODIFY_UNDO.path} />\n          </MuiIconButton>\n        </span>\n      </MuiTooltip>\n      <MuiTooltip title={'Redo (⌘Y)'}>\n        <span>\n          <MuiIconButton\n            aria-label=\"redo action\"\n            onClick={() => canvas.redo()}\n            disabled={!canvas.canRedo}\n          >\n            <MdiIcon fontSize=\"small\" path={ICON_VARIANT_MODIFY_REDO.path} />\n          </MuiIconButton>\n        </span>\n      </MuiTooltip>\n    </MuiStack>\n  )\n}\nHistoryControls.displayName = 'HistoryControlsComponent'\nHistoryControls.aglyn = true\n\nexport const HistoryControlsComponent = observer(\n  forwardRef<any, HistoryControlsProps>(HistoryControls),\n)\nexport default HistoryControlsComponent\n"],"names":["canvas","ICON_VARIANT_MODIFY_REDO","ICON_VARIANT_MODIFY_UNDO","MdiIcon","IconButton","MuiIconButton","Stack","MuiStack","Tooltip","MuiTooltip","observer","forwardRef","HistoryControls","props","ref","direction","spacing","title","span","aria-label","onClick","undo","disabled","canUndo","fontSize","path","redo","canRedo","displayName","aglyn","HistoryControlsComponent"],"mappings":";;AAAA;;;;;;;;;;;;;;;CAeC,GAED,SAASA,MAAM,QAAQ,eAAc;AACrC,SACEC,wBAAwB,EACxBC,wBAAwB,QACnB,2BAA0B;AACjC,SAASC,OAAO,QAAQ,uBAAsB;AAC9C,SACEC,cAAcC,aAAa,EAC3BC,SAASC,QAAQ,EAEjBC,WAAWC,UAAU,QAChB,gBAAe;AACtB,SAASC,QAAQ,QAAQ,kBAAiB;AAC1C,SAASC,UAAU,QAA+B,QAAO;AAIzD,SAASC,gBACPC,KAA2B,EAC3BC,GAA0B;IAE1B,qBACE,MAACP;QAASO,KAAKA;QAAKC,WAAU;QAAMC,SAAS;OAAUH;;0BACrD,KAACJ;gBAAWQ,OAAO;0BACjB,cAAA,KAACC;8BACC,cAAA,KAACb;wBACCc,cAAW;wBACXC,SAAS,IAAMpB,OAAOqB,IAAI;wBAC1BC,UAAU,CAACtB,OAAOuB,OAAO;kCAEzB,cAAA,KAACpB;4BAAQqB,UAAS;4BAAQC,MAAMvB,yBAAyBuB,IAAI;;;;;0BAInE,KAAChB;gBAAWQ,OAAO;0BACjB,cAAA,KAACC;8BACC,cAAA,KAACb;wBACCc,cAAW;wBACXC,SAAS,IAAMpB,OAAO0B,IAAI;wBAC1BJ,UAAU,CAACtB,OAAO2B,OAAO;kCAEzB,cAAA,KAACxB;4BAAQqB,UAAS;4BAAQC,MAAMxB,yBAAyBwB,IAAI;;;;;;;AAMzE;AACAb,gBAAgBgB,WAAW,GAAG;AAC9BhB,gBAAgBiB,KAAK,GAAG;AAExB,OAAO,MAAMC,2BAA2BpB,uBACtCC,WAAsCC,kBACvC;AACD,eAAekB,yBAAwB"}

package/src/lib/components/inline-markdown-editor.component.d.ts

@@ -0,0 +1,17 @@
+/**
+ * In-place markdown editing on the besigner canvas (AGL-1624).
+ *
+ * Double-clicking a component whose schema declares a `FieldComponentType
+ * .MARKDOWN` attribute opens the WYSIWYG over the element instead of sending
+ * the author to the attributes panel — the canvas half of AGL-1616, which
+ * shipped the panel half.
+ *
+ * Mounted once next to `InlineTextEditorComponent` in the viewport overlays,
+ * outside the closed canvas shadow root, so it positions in screen
+ * coordinates. `key`ed on the node so switching nodes remounts the surface,
+ * which is what turns every close into a flush.
+ */
+export declare const InlineMarkdownEditorComponent: (() => import("react").JSX.Element) & {
+    displayName: string;
+};
+export default InlineMarkdownEditorComponent;

package/src/lib/components/inline-markdown-editor.component.js

@@ -0,0 +1,220 @@
+/**
+ * @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.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { canvas } from "@aglyn/aglyn";
+import { MarkdownField } from "@aglyn/aglyn-markdown-editor";
+import * as Besigner from "@aglyn/besigner";
+import { Box, Button, Paper, Typography } from "@mui/material";
+import { observer } from "mobx-react-lite";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { clampToViewport, useAnchoredRect } from "../hooks/use-anchored-rect.js";
+import { useDebouncedCommit } from "../hooks/use-debounced-commit.js";
+import { useMarkdownMediaPicker } from "../hooks/use-markdown-media-picker.js";
+import { inlineMarkdownEdit } from "../utils/inline-markdown-edit.store.js";
+/**
+ * The mounted half. Everything that can lose an author's work lives here, and
+ * it is deliberately the same machinery the attributes panel uses.
+ *
+ * ## When the edit reaches the model
+ *
+ * `MarkdownVisualEditor` emits on every input event, so the newest string is
+ * always in hand. From there this is `useDebouncedCommit` (AGL-567), exactly as
+ * the panel wires it: a 250 ms trailing debounce, plus the hook's own
+ * flush-on-unmount. Every way of leaving the editor unmounts this component —
+ * Done, Escape, the selection moving to another node, the screen changing, the
+ * designer closing — so every exit path flushes. There is NO discard path, and
+ * that is the point: with a debounced commit a "cancel" could only ever throw
+ * away the last 250 ms of a document that is otherwise already written, which
+ * is a worse lie than committing and leaving Cmd+Z to do the undoing.
+ *
+ * What is deliberately NOT here is a commit on blur. The toolbar, the link
+ * popover and the URL dialog all move focus (two of them into a portal), so a
+ * blur-committed local draft would strand everything typed since the previous
+ * focus change — silently, with the canvas still showing the right text. The
+ * panel's wrapper learned this the same way (AGL-1616).
+ *
+ * ## Why the value is not re-derived
+ *
+ * `initialValue` seeds local state once and the node's props are never read
+ * back into the editor. The editor re-parses its row model whenever the
+ * incoming value differs from the string it last emitted, resetting undo and
+ * the caret; feeding a commit — or a co-editing peer's write — back in would do
+ * that mid-sentence.
+ */ const InlineMarkdownEditorSurface = observer(function InlineMarkdownEditorSurface(props) {
+    var _ref;
+    var _node_componentSchema_attributes_find, _node_componentSchema_attributes, _node_componentSchema;
+    const { node, rect, anchor, attributeName, initialValue, selected } = props;
+    // Follows the element as the canvas scrolls or resizes (AGL-1644).
+    const live = useAnchoredRect(anchor, rect);
+    const [value, setValue] = useState(initialValue);
+    const latestRef = useRef(initialValue);
+    const committedRef = useRef(initialValue);
+    // The toolbar's image action opens the host's media library rather than a
+    // "paste a URL" prompt (AGL-1645). The picker is a modal that takes focus,
+    // which is exactly what a blur-committed editor cannot survive — and the
+    // reason this one commits on a debounce instead is written out above.
+    const { editorRef, onPickImageFromMedia } = useMarkdownMediaPicker();
+    const commit = useCallback(()=>{
+        var _inlineMarkdownEdit_node;
+        const current = (_inlineMarkdownEdit_node = inlineMarkdownEdit.node) != null ? _inlineMarkdownEdit_node : node;
+        if (!current) return;
+        if (latestRef.current === committedRef.current) return;
+        committedRef.current = latestRef.current;
+        // Read the node's props at commit time, not at open: `updateNodeProps`
+        // REPLACES the props object, so anything a peer or the panel changed while
+        // the editor was open has to be spread from the live node.
+        canvas.updateNodeProps(current, _extends({}, current.props, {
+            [attributeName]: latestRef.current
+        }));
+    }, [
+        attributeName,
+        node
+    ]);
+    const { schedule } = useDebouncedCommit(commit);
+    const handleChange = useCallback((next)=>{
+        latestRef.current = next;
+        setValue(next);
+        schedule();
+    }, [
+        schedule
+    ]);
+    // The edit follows the selection: the double-click's own mousedown selected
+    // this node, so the selection moving off it (another node, the hierarchy
+    // tree, a click on empty canvas) means the author is done here. Closing
+    // unmounts this surface, which flushes.
+    useEffect(()=>{
+        if (!selected) inlineMarkdownEdit.close();
+    }, [
+        selected
+    ]);
+    const handleKeyDown = useCallback((event)=>{
+        if (event.key !== 'Escape') return;
+        // Escape CLOSES and keeps. It is not a cancel — see the commit note above.
+        event.stopPropagation();
+        inlineMarkdownEdit.close();
+    }, []);
+    const handleDone = useCallback(()=>{
+        inlineMarkdownEdit.close();
+    }, []);
+    // A double-click inside the editor selects a word. It must never reach the
+    // canvas, whose panning surface treats a double-click as zoom-in
+    // (`ZoomablePanningComponent`). Node double-clicks are already consumed at
+    // the leaf; this covers the overlay that sits on top of it.
+    const stop = useCallback((event)=>{
+        event.stopPropagation();
+    }, []);
+    // Read at render, which `useAnchoredRect` makes safe: it re-renders on every
+    // scroll and resize, so these are never a stale snapshot.
+    const viewportWidth = typeof window === 'undefined' ? Infinity : window.innerWidth;
+    const viewportHeight = typeof window === 'undefined' ? Infinity : window.innerHeight;
+    const width = Math.max(live.width, 360);
+    // A long document is usually TALLER than the viewport, so the element's top
+    // edge is frequently scrolled off the top of the screen while it is being
+    // edited. The editor waits at the nearest edge until the element comes back
+    // rather than following it out of sight; KEEP_VISIBLE is how much of it has
+    // to remain reachable at the bottom.
+    const KEEP_VISIBLE = 160;
+    return /*#__PURE__*/ _jsx(Box, {
+        "data-aglyn": "overlay:inline-markdown-editor",
+        "data-testid": "inline-markdown-editor",
+        onKeyDown: handleKeyDown,
+        onMouseDown: stop,
+        onDoubleClick: stop,
+        sx: {
+            position: 'fixed',
+            left: clampToViewport(live.left, width, viewportWidth),
+            top: clampToViewport(live.top, KEEP_VISIBLE, viewportHeight),
+            width,
+            maxWidth: '90vw',
+            zIndex: (theme)=>theme.zIndex.modal
+        },
+        children: /*#__PURE__*/ _jsxs(Paper, {
+            elevation: 8,
+            sx: {
+                p: 1,
+                maxHeight: '75vh',
+                overflowY: 'auto'
+            },
+            children: [
+                /*#__PURE__*/ _jsxs(Box, {
+                    sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        mb: 0.5
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "caption",
+                            color: "text.secondary",
+                            children: 'Editing on the canvas — changes are kept as you type'
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            size: "small",
+                            color: "primary",
+                            onClick: handleDone,
+                            children: 'Done'
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(MarkdownField, {
+                    label: String((_ref = node == null ? void 0 : (_node_componentSchema = node.componentSchema) == null ? void 0 : (_node_componentSchema_attributes = _node_componentSchema.attributes) == null ? void 0 : (_node_componentSchema_attributes_find = _node_componentSchema_attributes.find((attribute)=>(attribute == null ? void 0 : attribute.name) === attributeName)) == null ? void 0 : _node_componentSchema_attributes_find.label) != null ? _ref : 'Content'),
+                    value: value,
+                    onChange: handleChange,
+                    editorRef: editorRef,
+                    onPickImageFromMedia: onPickImageFromMedia,
+                    // The OPEN rect, deliberately, not the live one: position follows the
+                    // element, but the editor's own height must not change under the
+                    // author mid-sentence just because the canvas relaid out.
+                    minHeight: Math.min(Math.max(rect.height, 200), 520)
+                })
+            ]
+        })
+    });
+});
+InlineMarkdownEditorSurface.displayName = 'InlineMarkdownEditorSurface';
+/**
+ * In-place markdown editing on the besigner canvas (AGL-1624).
+ *
+ * Double-clicking a component whose schema declares a `FieldComponentType
+ * .MARKDOWN` attribute opens the WYSIWYG over the element instead of sending
+ * the author to the attributes panel — the canvas half of AGL-1616, which
+ * shipped the panel half.
+ *
+ * Mounted once next to `InlineTextEditorComponent` in the viewport overlays,
+ * outside the closed canvas shadow root, so it positions in screen
+ * coordinates. `key`ed on the node so switching nodes remounts the surface,
+ * which is what turns every close into a flush.
+ */ export const InlineMarkdownEditorComponent = observer(function InlineMarkdownEditorComponent() {
+    const node = inlineMarkdownEdit.node;
+    const rect = inlineMarkdownEdit.rect;
+    const attributeName = inlineMarkdownEdit.attributeName;
+    if (!node || !rect || !attributeName) return null;
+    return /*#__PURE__*/ _jsx(InlineMarkdownEditorSurface, {
+        node: node,
+        rect: rect,
+        anchor: inlineMarkdownEdit.anchor,
+        attributeName: attributeName,
+        initialValue: inlineMarkdownEdit.initialValue,
+        selected: Besigner.focus.isNodeSelected(node)
+    }, `${node.$id}:${attributeName}`);
+});
+InlineMarkdownEditorComponent.displayName = 'InlineMarkdownEditorComponent';
+export default InlineMarkdownEditorComponent;
+
+//# sourceMappingURL=inline-markdown-editor.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/inline-markdown-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'use client'\n\nimport type * as Aglyn from '@aglyn/aglyn'\nimport { canvas } from '@aglyn/aglyn'\nimport { MarkdownField } from '@aglyn/aglyn-markdown-editor'\nimport * as Besigner from '@aglyn/besigner'\nimport { Box, Button, Paper, Typography } from '@mui/material'\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 {\n  clampToViewport,\n  useAnchoredRect,\n} from '../hooks/use-anchored-rect'\nimport { useDebouncedCommit } from '../hooks/use-debounced-commit'\nimport { useMarkdownMediaPicker } from '../hooks/use-markdown-media-picker'\nimport {\n  inlineMarkdownEdit,\n  type InlineMarkdownEditRect,\n} from '../utils/inline-markdown-edit.store'\n\ninterface SurfaceProps {\n  node: Aglyn.NodeSchema<any>\n  rect: InlineMarkdownEditRect\n  /** The element `rect` was measured from, re-measured as the canvas moves. */\n  anchor?: Element\n  attributeName: string\n  initialValue: string\n  /** Whether the canvas selection still names the node being edited. */\n  selected: boolean\n}\n\n/**\n * The mounted half. Everything that can lose an author's work lives here, and\n * it is deliberately the same machinery the attributes panel uses.\n *\n * ## When the edit reaches the model\n *\n * `MarkdownVisualEditor` emits on every input event, so the newest string is\n * always in hand. From there this is `useDebouncedCommit` (AGL-567), exactly as\n * the panel wires it: a 250 ms trailing debounce, plus the hook's own\n * flush-on-unmount. Every way of leaving the editor unmounts this component —\n * Done, Escape, the selection moving to another node, the screen changing, the\n * designer closing — so every exit path flushes. There is NO discard path, and\n * that is the point: with a debounced commit a \"cancel\" could only ever throw\n * away the last 250 ms of a document that is otherwise already written, which\n * is a worse lie than committing and leaving Cmd+Z to do the undoing.\n *\n * What is deliberately NOT here is a commit on blur. The toolbar, the link\n * popover and the URL dialog all move focus (two of them into a portal), so a\n * blur-committed local draft would strand everything typed since the previous\n * focus change — silently, with the canvas still showing the right text. The\n * panel's wrapper learned this the same way (AGL-1616).\n *\n * ## Why the value is not re-derived\n *\n * `initialValue` seeds local state once and the node's props are never read\n * back into the editor. The editor re-parses its row model whenever the\n * incoming value differs from the string it last emitted, resetting undo and\n * the caret; feeding a commit — or a co-editing peer's write — back in would do\n * that mid-sentence.\n */\nconst InlineMarkdownEditorSurface = observer(function InlineMarkdownEditorSurface(\n  props: SurfaceProps,\n) {\n  const { node, rect, anchor, attributeName, initialValue, selected } = props\n  // Follows the element as the canvas scrolls or resizes (AGL-1644).\n  const live = useAnchoredRect(anchor, rect)\n  const [value, setValue] = useState(initialValue)\n  const latestRef = useRef(initialValue)\n  const committedRef = useRef(initialValue)\n  // The toolbar's image action opens the host's media library rather than a\n  // \"paste a URL\" prompt (AGL-1645). The picker is a modal that takes focus,\n  // which is exactly what a blur-committed editor cannot survive — and the\n  // reason this one commits on a debounce instead is written out above.\n  const { editorRef, onPickImageFromMedia } = useMarkdownMediaPicker()\n\n  const commit = useCallback(() => {\n    const current = inlineMarkdownEdit.node ?? node\n    if (!current) return\n    if (latestRef.current === committedRef.current) return\n    committedRef.current = latestRef.current\n    // Read the node's props at commit time, not at open: `updateNodeProps`\n    // REPLACES the props object, so anything a peer or the panel changed while\n    // the editor was open has to be spread from the live node.\n    canvas.updateNodeProps(current, {\n      ...current.props,\n      [attributeName]: latestRef.current,\n    })\n  }, [attributeName, node])\n\n  const { schedule } = useDebouncedCommit(commit)\n\n  const handleChange = useCallback(\n    (next: string) => {\n      latestRef.current = next\n      setValue(next)\n      schedule()\n    },\n    [schedule],\n  )\n\n  // The edit follows the selection: the double-click's own mousedown selected\n  // this node, so the selection moving off it (another node, the hierarchy\n  // tree, a click on empty canvas) means the author is done here. Closing\n  // unmounts this surface, which flushes.\n  useEffect(() => {\n    if (!selected) inlineMarkdownEdit.close()\n  }, [selected])\n\n  const handleKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key !== 'Escape') return\n    // Escape CLOSES and keeps. It is not a cancel — see the commit note above.\n    event.stopPropagation()\n    inlineMarkdownEdit.close()\n  }, [])\n\n  const handleDone = useCallback(() => {\n    inlineMarkdownEdit.close()\n  }, [])\n\n  // A double-click inside the editor selects a word. It must never reach the\n  // canvas, whose panning surface treats a double-click as zoom-in\n  // (`ZoomablePanningComponent`). Node double-clicks are already consumed at\n  // the leaf; this covers the overlay that sits on top of it.\n  const stop = useCallback((event: MouseEvent) => {\n    event.stopPropagation()\n  }, [])\n\n  // Read at render, which `useAnchoredRect` makes safe: it re-renders on every\n  // scroll and resize, so these are never a stale snapshot.\n  const viewportWidth =\n    typeof window === 'undefined' ? Infinity : window.innerWidth\n  const viewportHeight =\n    typeof window === 'undefined' ? Infinity : window.innerHeight\n  const width = Math.max(live.width, 360)\n  // A long document is usually TALLER than the viewport, so the element's top\n  // edge is frequently scrolled off the top of the screen while it is being\n  // edited. The editor waits at the nearest edge until the element comes back\n  // rather than following it out of sight; KEEP_VISIBLE is how much of it has\n  // to remain reachable at the bottom.\n  const KEEP_VISIBLE = 160\n\n  return (\n    <Box\n      data-aglyn=\"overlay:inline-markdown-editor\"\n      data-testid=\"inline-markdown-editor\"\n      onKeyDown={handleKeyDown}\n      onMouseDown={stop}\n      onDoubleClick={stop}\n      sx={{\n        position: 'fixed',\n        left: clampToViewport(live.left, width, viewportWidth),\n        top: clampToViewport(live.top, KEEP_VISIBLE, viewportHeight),\n        width,\n        maxWidth: '90vw',\n        zIndex: (theme) => theme.zIndex.modal,\n      }}\n    >\n      <Paper elevation={8} sx={{ p: 1, maxHeight: '75vh', overflowY: 'auto' }}>\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'space-between',\n            mb: 0.5,\n          }}\n        >\n          <Typography variant=\"caption\" color=\"text.secondary\">\n            {'Editing on the canvas — changes are kept as you type'}\n          </Typography>\n          <Button size=\"small\" color=\"primary\" onClick={handleDone}>\n            {'Done'}\n          </Button>\n        </Box>\n        <MarkdownField\n          label={String(\n            node?.componentSchema?.attributes?.find(\n              (attribute) => attribute?.name === attributeName,\n            )?.label ?? 'Content',\n          )}\n          value={value}\n          onChange={handleChange}\n          editorRef={editorRef}\n          onPickImageFromMedia={onPickImageFromMedia}\n          // The OPEN rect, deliberately, not the live one: position follows the\n          // element, but the editor's own height must not change under the\n          // author mid-sentence just because the canvas relaid out.\n          minHeight={Math.min(Math.max(rect.height, 200), 520)}\n        />\n      </Paper>\n    </Box>\n  )\n})\nInlineMarkdownEditorSurface.displayName = 'InlineMarkdownEditorSurface'\n\n/**\n * In-place markdown editing on the besigner canvas (AGL-1624).\n *\n * Double-clicking a component whose schema declares a `FieldComponentType\n * .MARKDOWN` attribute opens the WYSIWYG over the element instead of sending\n * the author to the attributes panel — the canvas half of AGL-1616, which\n * shipped the panel half.\n *\n * Mounted once next to `InlineTextEditorComponent` in the viewport overlays,\n * outside the closed canvas shadow root, so it positions in screen\n * coordinates. `key`ed on the node so switching nodes remounts the surface,\n * which is what turns every close into a flush.\n */\nexport const InlineMarkdownEditorComponent = observer(\n  function InlineMarkdownEditorComponent() {\n    const node = inlineMarkdownEdit.node\n    const rect = inlineMarkdownEdit.rect\n    const attributeName = inlineMarkdownEdit.attributeName\n    if (!node || !rect || !attributeName) return null\n    return (\n      <InlineMarkdownEditorSurface\n        key={`${node.$id}:${attributeName}`}\n        node={node}\n        rect={rect}\n        anchor={inlineMarkdownEdit.anchor}\n        attributeName={attributeName}\n        initialValue={inlineMarkdownEdit.initialValue}\n        selected={Besigner.focus.isNodeSelected(node)}\n      />\n    )\n  },\n)\nInlineMarkdownEditorComponent.displayName = 'InlineMarkdownEditorComponent'\n\nexport default InlineMarkdownEditorComponent\n"],"names":["canvas","MarkdownField","Besigner","Box","Button","Paper","Typography","observer","useCallback","useEffect","useRef","useState","clampToViewport","useAnchoredRect","useDebouncedCommit","useMarkdownMediaPicker","inlineMarkdownEdit","InlineMarkdownEditorSurface","props","node","rect","anchor","attributeName","initialValue","selected","live","value","setValue","latestRef","committedRef","editorRef","onPickImageFromMedia","commit","current","updateNodeProps","schedule","handleChange","next","close","handleKeyDown","event","key","stopPropagation","handleDone","stop","viewportWidth","window","Infinity","innerWidth","viewportHeight","innerHeight","width","Math","max","KEEP_VISIBLE","data-aglyn","data-testid","onKeyDown","onMouseDown","onDoubleClick","sx","position","left","top","maxWidth","zIndex","theme","modal","elevation","p","maxHeight","overflowY","display","alignItems","justifyContent","mb","variant","color","size","onClick","label","String","componentSchema","attributes","find","attribute","name","onChange","minHeight","min","height","displayName","InlineMarkdownEditorComponent","focus","isNodeSelected","$id"],"mappings":"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"}

package/src/lib/components/inline-text-editor.component.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @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.
+ */
+/**
+ * Fixed-position overlay that edits a node's text in place, opened by
+ * double-clicking a `textEditable` element in the canvas (see
+ * DraggableDroppable). Plain components edit through a pill-capable
+ * contentEditable line (Enter or blur commits, Shift+Enter breaks a line,
+ * Escape cancels). Components flagged `richTextEditable` (AGL-54) get a
+ * contentEditable surface with a basic formatting toolbar; the commit
+ * sanitizes the markup through an allowlist and stores it in the `html`
+ * prop with `children` kept as the plain-text fallback. Either mode
+ * commits ONCE through `Aglyn.canvas.updateNodeProps` (a single undo entry).
+ *
+ * Binding pills (AGL-586): stored `{{...}}` tokens render as named,
+ * colored, atomic pills in BOTH modes when the editor opens; the toolbar's
+ * {x} button opens the same grouped insert picker as the attributes panel
+ * (assembled from this node's ancestor context) and drops a pill at the
+ * caret; clicking a pill offers Replace/Remove. Commits serialize pills
+ * back to raw token syntax — names shown, ids stored.
+ *
+ * Instance prop overrides (AGL-1304): opened with a `propTarget`, the same
+ * surface edits a component instance's `propValues[propName]` instead of a
+ * node's `children` — the double-clicked leaf is a GRAFTED preview node,
+ * not a canvas node, so the commit rides the instance. Always the plain
+ * surface (prop values substitute as strings), the same single
+ * `updateNodeProps` commit (one undo entry, and the same node-changed
+ * signal co-editing's shadow diff already mirrors), and an emptied commit
+ * REMOVES the override so the component's own copy returns — exactly what
+ * clearing the Attributes field does.
+ */
+export declare const InlineTextEditorComponent: (() => import("react").JSX.Element) & {
+    displayName: string;
+};
+export default InlineTextEditorComponent;