@aglyn/besigner-ui 1.0.0-beta.216 → 1.0.0-beta.218

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aglyn/besigner-ui",
-  "version": "1.0.0-beta.216",
+  "version": "1.0.0-beta.218",
   "license": "Apache-2.0",
   "homepage": "https://aglyn.com",
   "repository": {
@@ -25,37 +25,37 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@aglyn/aglyn": "1.0.0-beta.216",
-    "@aglyn/aglyn-markdown-editor": "1.0.0-beta.216",
-    "@aglyn/aglyn-node-renderer": "1.0.0-beta.216",
-    "@aglyn/besigner": "1.0.0-beta.216",
-    "@aglyn/shared-data-enums": "1.0.0-beta.216",
-    "@aglyn/shared-data-mdi": "1.0.0-beta.216",
-    "@aglyn/shared-data-types": "1.0.0-beta.216",
-    "@aglyn/shared-svg-icons": "1.0.0-beta.216",
-    "@aglyn/shared-ui-json-editor": "1.0.0-beta.216",
-    "@aglyn/shared-ui-jsx": "1.0.0-beta.216",
-    "@aglyn/shared-ui-jsx-forms": "1.0.0-beta.216",
-    "@aglyn/shared-ui-snackstack": "1.0.0-beta.216",
-    "@aglyn/shared-ui-theme": "1.0.0-beta.216",
-    "@aglyn/shared-util-dom": "1.0.0-beta.216",
-    "@aglyn/shared-util-tools": "1.0.0-beta.216",
-    "@aglyn/shared-util-vendor": "1.0.0-beta.216",
+    "@aglyn/aglyn": "1.0.0-beta.218",
+    "@aglyn/aglyn-markdown-editor": "1.0.0-beta.218",
+    "@aglyn/aglyn-node-renderer": "1.0.0-beta.218",
+    "@aglyn/besigner": "1.0.0-beta.218",
+    "@aglyn/shared-data-enums": "1.0.0-beta.218",
+    "@aglyn/shared-data-mdi": "1.0.0-beta.218",
+    "@aglyn/shared-data-types": "1.0.0-beta.218",
+    "@aglyn/shared-svg-icons": "1.0.0-beta.218",
+    "@aglyn/shared-ui-json-editor": "1.0.0-beta.218",
+    "@aglyn/shared-ui-jsx": "1.0.0-beta.218",
+    "@aglyn/shared-ui-jsx-forms": "1.0.0-beta.218",
+    "@aglyn/shared-ui-snackstack": "1.0.0-beta.218",
+    "@aglyn/shared-ui-theme": "1.0.0-beta.218",
+    "@aglyn/shared-util-dom": "1.0.0-beta.218",
+    "@aglyn/shared-util-tools": "1.0.0-beta.218",
+    "@aglyn/shared-util-vendor": "1.0.0-beta.218",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/utilities": "^3.2.2",
     "@react-aria/utils": "^3.34.1",
     "@swc/helpers": "0.5.23",
     "clsx": "^2.1.1",
     "dnd-core": "^16.0.1",
-    "framer-motion": "^12.42.2",
+    "framer-motion": "^13.4.6",
     "fuse.js": "^7.5.0",
     "lodash-es": "^4.18.1",
-    "mobx": "^6.16.1",
-    "mobx-react-lite": "^4.1.1",
+    "mobx": "^7.0.5",
+    "mobx-react-lite": "^5.1.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-if": "^4.1.6",
-    "react-is": "^19.2.8",
+    "react-is": "^19.3.0",
     "react-use": "^17.6.1"
   },
   "peerDependencies": {

package/src/lib/components/accordion-list.component.d.ts

@@ -44,7 +44,7 @@ export interface AccordionListProps<T = any> {
      * cannot do, since it applies to all of them alike. */
     getItemHelp?: (item: T) => HelpTipContent | undefined;
 }
-export declare const AccordionListComponent: (<T>(props: AccordionListProps<T>) => import("react").JSX.Element) & {
-    displayName: string;
+export declare const AccordionListComponent: (<T>(props: AccordionListProps<T>) => import("react").JSX.Element) & import("react").NamedExoticComponent<AccordionListProps<unknown>> & {
+    readonly type: <T>(props: AccordionListProps<T>) => import("react").JSX.Element;
 };
 export default AccordionListComponent;

package/src/lib/components/component-accordion-list.d.ts

@@ -22,7 +22,7 @@ export type ComponentGridGroupItemData = {
 };
 interface ComponentAccordionListProp {
 }
-export declare const ComponentAccordionList: ((props: ComponentAccordionListProp) => import("react").JSX.Element) & {
-    displayName: string;
+export declare const ComponentAccordionList: ((props: ComponentAccordionListProp) => import("react").JSX.Element) & import("react").NamedExoticComponent<ComponentAccordionListProp> & {
+    readonly type: (props: ComponentAccordionListProp) => import("react").JSX.Element;
 };
 export default ComponentAccordionList;

package/src/lib/components/component-icon.component.d.ts

@@ -26,7 +26,7 @@ export interface ComponentIconProps extends MdiIconProps {
      */
     node?: Aglyn.NodeSchema<any>;
 }
-export declare const ComponentIconComponent: ((props: ComponentIconProps) => import("react").JSX.Element) & {
-    displayName: string;
+export declare const ComponentIconComponent: ((props: ComponentIconProps) => import("react").JSX.Element) & import("react").NamedExoticComponent<ComponentIconProps> & {
+    readonly type: (props: ComponentIconProps) => import("react").JSX.Element;
 };
 export default ComponentIconComponent;

package/src/lib/components/component-picker.d.ts

@@ -23,5 +23,7 @@ export interface ComponentPickerProps extends DialogProps {
         option: PickerOption;
     }) => void;
 }
-export declare const ComponentPicker: import("react").FunctionComponent<Omit<ComponentPickerProps, "ref"> & import("react").RefAttributes<any>>;
+export declare const ComponentPicker: import("react").ForwardRefExoticComponent<Omit<ComponentPickerProps, "ref"> & import("react").RefAttributes<any>> & import("react").NamedExoticComponent<Omit<ComponentPickerProps, "ref"> & import("react").RefAttributes<any>> & {
+    readonly type: import("react").ForwardRefExoticComponent<Omit<ComponentPickerProps, "ref"> & import("react").RefAttributes<any>>;
+};
 export default ComponentPicker;

package/src/lib/components/custom-css-form.component.d.ts

@@ -114,7 +114,7 @@ export interface CustomCssFormProps {
  * JSON mode edits the full sx document (including responsive objects and
  * nested selectors) verbatim.
  */
-export declare const CustomCssForm: ((props: CustomCssFormProps) => import("react").JSX.Element) & {
-    displayName: string;
+export declare const CustomCssForm: ((props: CustomCssFormProps) => import("react").JSX.Element) & import("react").NamedExoticComponent<CustomCssFormProps> & {
+    readonly type: (props: CustomCssFormProps) => import("react").JSX.Element;
 };
 export default CustomCssForm;

package/src/lib/components/dnd/canvas-drop-indicator.d.ts

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export declare const CanvasDropIndicator: (() => import("react").JSX.Element) & {
-    displayName: string;
+export declare const CanvasDropIndicator: (() => import("react").JSX.Element) & import("react").NamedExoticComponent<unknown> & {
+    readonly type: () => import("react").JSX.Element;
 };
 export default CanvasDropIndicator;

package/src/lib/components/dnd/draggable-droppable.d.ts

@@ -25,7 +25,7 @@ export interface DraggableDroppableProps<T extends Aglyn.NodeSchema<any>> {
     disableDropping?: boolean;
     idSuffix?: string;
 }
-export declare const DraggableDroppable: (<T extends Aglyn.NodeSchema<any>>(props: DraggableDroppableProps<T>) => import("react").FunctionComponentElement<any>) & {
-    displayName: string;
+export declare const DraggableDroppable: (<T extends Aglyn.NodeSchema<any>>(props: DraggableDroppableProps<T>) => import("react").FunctionComponentElement<any>) & import("react").NamedExoticComponent<DraggableDroppableProps<Aglyn.NodeSchema<any>>> & {
+    readonly type: <T extends Aglyn.NodeSchema<any>>(props: DraggableDroppableProps<T>) => import("react").FunctionComponentElement<any>;
 };
 export default DraggableDroppable;

package/src/lib/components/dnd/draggable.d.ts

@@ -36,7 +36,13 @@ export interface DraggableProps<T extends {
     disabled?: boolean;
     idSuffix?: string;
 }
-declare const Draggable: import("react").FunctionComponent<DraggableProps<{
+declare const Draggable: import("react").ForwardRefExoticComponent<DraggableProps<{
     $id?: string;
-}> & import("react").RefAttributes<unknown>>;
+}> & import("react").RefAttributes<unknown>> & import("react").NamedExoticComponent<DraggableProps<{
+    $id?: string;
+}> & import("react").RefAttributes<unknown>> & {
+    readonly type: import("react").ForwardRefExoticComponent<DraggableProps<{
+        $id?: string;
+    }> & import("react").RefAttributes<unknown>>;
+};
 export default Draggable;

package/src/lib/components/dnd/droppable.d.ts

@@ -37,7 +37,13 @@ export interface DroppableProps<T extends {
     disabled?: boolean;
     idSuffix?: string;
 }
-export declare const Droppable: import("react").FunctionComponent<DroppableProps<{
+export declare const Droppable: import("react").ForwardRefExoticComponent<DroppableProps<{
     $id: string;
-}> & import("react").RefAttributes<unknown>>;
+}> & import("react").RefAttributes<unknown>> & import("react").NamedExoticComponent<DroppableProps<{
+    $id: string;
+}> & import("react").RefAttributes<unknown>> & {
+    readonly type: import("react").ForwardRefExoticComponent<DroppableProps<{
+        $id: string;
+    }> & import("react").RefAttributes<unknown>>;
+};
 export default Droppable;

package/src/lib/components/element-classes-field.component.d.ts

@@ -35,7 +35,7 @@ export interface ElementClassesFieldProps {
  * so its chip drives THAT state rather than a second one that could
  * disagree with it.
  */
-export declare const ElementClassesField: ((props: ElementClassesFieldProps) => import("react").JSX.Element) & {
-    displayName: string;
+export declare const ElementClassesField: ((props: ElementClassesFieldProps) => import("react").JSX.Element) & import("react").NamedExoticComponent<ElementClassesFieldProps> & {
+    readonly type: (props: ElementClassesFieldProps) => import("react").JSX.Element;
 };
 export default ElementClassesField;

package/src/lib/components/element-interactions-form.component.d.ts

@@ -15,7 +15,7 @@ export interface ElementInteractionsFormProps {
  * The list, the trigger picker and the section experiment move verbatim; what
  * changes is where they are.
  */
-export declare const ElementInteractionsForm: ((props: ElementInteractionsFormProps) => import("react").JSX.Element) & {
-    displayName: string;
+export declare const ElementInteractionsForm: ((props: ElementInteractionsFormProps) => import("react").JSX.Element) & import("react").NamedExoticComponent<ElementInteractionsFormProps> & {
+    readonly type: (props: ElementInteractionsFormProps) => import("react").JSX.Element;
 };
 export default ElementInteractionsForm;

package/src/lib/components/element-preview.component.d.ts

@@ -54,8 +54,8 @@ export interface ElementPreviewProps {
  * second list of which elements are self-contained: each element already
  * says so itself.
  */
-export declare const ElementPreview: ((props: ElementPreviewProps) => import("react").JSX.Element) & {
-    displayName: string;
+export declare const ElementPreview: ((props: ElementPreviewProps) => import("react").JSX.Element) & import("react").NamedExoticComponent<ElementPreviewProps> & {
+    readonly type: (props: ElementPreviewProps) => import("react").JSX.Element;
 };
 /**
  * Whether the rendered preview drew anything a person can actually see.

package/src/lib/components/element-props-form.component.d.ts

@@ -571,5 +571,7 @@ export declare function buildEntityPickerField<T extends Aglyn.AglynAttributeSch
  * which looks exactly like a site with no products.
  */
 export declare function entityKindsForAttributes(attributes: readonly Aglyn.AglynAttributeSchema[] | undefined): Aglyn.EntityPickerKind[];
-export declare const ElementPropsForm: import("react").FunctionComponent<ElementPropsFormProps & import("react").RefAttributes<any>>;
+export declare const ElementPropsForm: import("react").ForwardRefExoticComponent<ElementPropsFormProps & import("react").RefAttributes<any>> & import("react").NamedExoticComponent<ElementPropsFormProps & import("react").RefAttributes<any>> & {
+    readonly type: import("react").ForwardRefExoticComponent<ElementPropsFormProps & import("react").RefAttributes<any>>;
+};
 export default ElementPropsForm;

package/src/lib/components/element-styles-form.component.d.ts

@@ -33,5 +33,7 @@ export interface ElementStylesFormProps extends Partial<FormRendererProps> {
      */
     layoutTarget?: LayoutElementSelection | null;
 }
-declare const ElementStylesForm: import("react").FunctionComponent<ElementStylesFormProps & import("react").RefAttributes<any>>;
+declare const ElementStylesForm: import("react").ForwardRefExoticComponent<ElementStylesFormProps & import("react").RefAttributes<any>> & import("react").NamedExoticComponent<ElementStylesFormProps & import("react").RefAttributes<any>> & {
+    readonly type: import("react").ForwardRefExoticComponent<ElementStylesFormProps & import("react").RefAttributes<any>>;
+};
 export default ElementStylesForm;

package/src/lib/components/history-controls.component.d.ts

@@ -17,5 +17,7 @@
 import { type StackProps } from '@mui/material';
 export interface HistoryControlsProps extends StackProps {
 }
-export declare const HistoryControlsComponent: import("react").FunctionComponent<Omit<HistoryControlsProps, "ref"> & import("react").RefAttributes<any>>;
+export declare const HistoryControlsComponent: import("react").ForwardRefExoticComponent<Omit<HistoryControlsProps, "ref"> & import("react").RefAttributes<any>> & import("react").NamedExoticComponent<Omit<HistoryControlsProps, "ref"> & import("react").RefAttributes<any>> & {
+    readonly type: import("react").ForwardRefExoticComponent<Omit<HistoryControlsProps, "ref"> & import("react").RefAttributes<any>>;
+};
 export default HistoryControlsComponent;

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

@@ -11,7 +11,7 @@
  * 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 declare const InlineMarkdownEditorComponent: (() => import("react").JSX.Element) & import("react").NamedExoticComponent<unknown> & {
+    readonly type: () => import("react").JSX.Element;
 };
 export default InlineMarkdownEditorComponent;

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

@@ -42,7 +42,7 @@
  * 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 declare const InlineTextEditorComponent: (() => import("react").JSX.Element) & import("react").NamedExoticComponent<unknown> & {
+    readonly type: () => import("react").JSX.Element;
 };
 export default InlineTextEditorComponent;

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

@@ -44,7 +44,7 @@ export interface InstanceAttrOverridesProps {
  * 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 declare const InstanceAttrOverrides: (({ node: selectedNode, componentMapper, }: InstanceAttrOverridesProps) => import("react").JSX.Element) & import("react").NamedExoticComponent<InstanceAttrOverridesProps> & {
+    readonly type: ({ node: selectedNode, componentMapper, }: InstanceAttrOverridesProps) => import("react").JSX.Element;
 };
 export default InstanceAttrOverrides;

package/src/lib/components/layout-style-picker.component.d.ts

@@ -37,7 +37,7 @@ export interface LayoutStylePickerButtonProps {
  * picking one opens the Styles tab on it — styles only; the layout's content
  * stays the layout's.
  */
-export declare const LayoutStylePickerButton: ((props: LayoutStylePickerButtonProps) => import("react").JSX.Element) & {
-    displayName: string;
+export declare const LayoutStylePickerButton: ((props: LayoutStylePickerButtonProps) => import("react").JSX.Element) & import("react").NamedExoticComponent<LayoutStylePickerButtonProps> & {
+    readonly type: (props: LayoutStylePickerButtonProps) => import("react").JSX.Element;
 };
 export default LayoutStylePickerButton;

package/src/lib/components/layout-style-picker.component.js

@@ -19,7 +19,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { canvas, COMPONENT_NODE_ID_PREFIX, LAYOUT_SLOT_COMPONENT_ID, NODE_ROOT_ID } from "@aglyn/aglyn";
 import { BesignerPanelTabFlag } from "@aglyn/besigner";
 import { Button, ListSubheader, Menu, MenuItem } from "@mui/material";
-import { comparer, reaction, toJS } from "mobx";
+import { compareStructural, reaction, toJS } from "mobx";
 import { observer } from "mobx-react-lite";
 import { useCallback, useEffect, useState } from "react";
 import { useLayoutChromeContext } from "../contexts/layout-chrome-context.js";
@@ -68,7 +68,7 @@ import { useAglynBesignerSetPanel } from "../hooks/use-aglyn-besigner-panel.js";
     ]);
     const [value, setValue] = useState(read);
     useEffect(()=>reaction(read, (next)=>setValue(next), {
-            equals: comparer.structural,
+            equals: compareStructural,
             fireImmediately: true
         }), [
         read

package/src/lib/components/layout-style-picker.component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/layout-style-picker.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 {\n  canvas,\n  COMPONENT_NODE_ID_PREFIX,\n  LAYOUT_SLOT_COMPONENT_ID,\n  NODE_ROOT_ID,\n} from '@aglyn/aglyn'\nimport { BesignerPanelTabFlag } from '@aglyn/besigner'\nimport { Button, ListSubheader, Menu, MenuItem } from '@mui/material'\nimport { comparer, reaction, toJS } from 'mobx'\nimport { observer } from 'mobx-react-lite'\nimport { type MouseEvent, useCallback, useEffect, useState } from 'react'\nimport { useLayoutChromeContext } from '../contexts/layout-chrome-context'\nimport { layoutStyleSelection } from '../contexts/layout-style-selection'\nimport { useAglynBesignerSetPanel } from '../hooks/use-aglyn-besigner-panel'\n\n/** One pickable element of the layout, in hierarchy order. */\nexport interface LayoutStylePickerEntry {\n  /** The element's id in the layout's own node map. */\n  nodeId: string\n  /** The name the hierarchy would show. */\n  label: string\n  /** Nesting depth under the layout root (the root itself is 0). */\n  depth: number\n}\n\n/**\n * The elements a page may restyle, walked from the chrome canvas's root in\n * document order (AGL-3286).\n *\n * The chrome canvas has its reusable components grafted in, so anything\n * wearing a component graft id is the COMPONENT's, not the layout's: it has\n * no key in the layout's node map to be overridden by, and it is neither\n * listed nor descended into. The instance itself is listed — the graft keeps\n * its id — and styling it restyles the component's outer element.\n */\nexport function listLayoutStyleEntries(\n  chrome: Aglyn.CanvasManager | undefined,\n): LayoutStylePickerEntry[] {\n  const root = chrome?.getNode(NODE_ROOT_ID)\n  if (!root) return []\n  const entries: LayoutStylePickerEntry[] = []\n  const walk = (node: Aglyn.NodeSchema<any>, depth: number) => {\n    if (String(node.$id).startsWith(COMPONENT_NODE_ID_PREFIX)) return\n    const label =\n      node.$id === NODE_ROOT_ID\n        ? 'Whole layout'\n        : node.componentId === LAYOUT_SLOT_COMPONENT_ID\n          ? 'Page content area'\n          : node.name || node.labelShort || String(node.$id)\n    entries.push({ nodeId: String(node.$id), label, depth })\n    for (const child of node.children ?? []) walk(child, depth + 1)\n  }\n  walk(root, 0)\n  return entries\n}\n\n/**\n * This screen's overrides for one layout as the editor holds them right now\n * — off the screen canvas root, where they ride until the save lifts them\n * out (`injectLayoutStyleOverrides`) — as a plain record that only changes\n * identity when its content does, so a memo keyed on it rebuilds only then.\n */\nexport function useCanvasLayoutStyleOverrides(\n  layoutId: string | null | undefined,\n): Record<string, Record<string, unknown>> | undefined {\n  const read = useCallback(() => {\n    if (!layoutId) return undefined\n    const value = canvas.getNode(NODE_ROOT_ID)?.layoutStyleOverrides?.[layoutId]\n    return value ? (toJS(value) as Record<string, Record<string, unknown>>) : undefined\n  }, [layoutId])\n  const [value, setValue] = useState(read)\n  useEffect(\n    () =>\n      reaction(read, (next) => setValue(next), {\n        equals: comparer.structural,\n        fireImmediately: true,\n      }),\n    [read],\n  )\n  return value\n}\n\nexport interface LayoutStylePickerButtonProps {\n  layoutId: string\n  layoutName?: string\n}\n\n/**\n * \"Style the layout on this page\" (AGL-3286): the entry point on the\n * locked-layout banner. Lists the layout's elements by name, nested as the\n * hierarchy nests them, marks the ones this page already restyles, and\n * picking one opens the Styles tab on it — styles only; the layout's content\n * stays the layout's.\n */\nexport const LayoutStylePickerButton = observer(\n  (props: LayoutStylePickerButtonProps) => {\n    const { layoutId, layoutName } = props\n    const { chromeCanvas } = useLayoutChromeContext()\n    const setPanel = useAglynBesignerSetPanel()\n    const [anchor, setAnchor] = useState<HTMLElement | null>(null)\n    const entries = listLayoutStyleEntries(chromeCanvas)\n    const overridden =\n      canvas.getNode(NODE_ROOT_ID)?.layoutStyleOverrides?.[layoutId] ?? {}\n    const current = layoutStyleSelection.current\n\n    const handleOpen = useCallback(\n      (event: MouseEvent<HTMLElement>) => setAnchor(event.currentTarget),\n      [],\n    )\n    const handleClose = useCallback(() => setAnchor(null), [])\n    const handlePick = useCallback(\n      (entry: LayoutStylePickerEntry) => () => {\n        layoutStyleSelection.select({\n          layoutId,\n          layoutName,\n          nodeId: entry.nodeId,\n          label: entry.label,\n        })\n        setPanel('panelRight', (prev) => ({\n          ...prev,\n          toggled: true,\n          tab: BesignerPanelTabFlag.ELEMENT_STYLES,\n        }))\n        setAnchor(null)\n      },\n      [layoutId, layoutName, setPanel],\n    )\n\n    return (\n      <>\n        <Button\n          color=\"inherit\"\n          size=\"small\"\n          disabled={!entries.length}\n          onClick={handleOpen}\n          aria-haspopup=\"menu\"\n          aria-expanded={anchor ? 'true' : undefined}\n        >\n          {'Style the layout on this page'}\n        </Button>\n        <Menu\n          anchorEl={anchor}\n          open={Boolean(anchor)}\n          onClose={handleClose}\n          slotProps={{ paper: { sx: { maxHeight: 420 } } }}\n        >\n          <ListSubheader>{'Pick an element to restyle'}</ListSubheader>\n          {entries.map((entry) => (\n            <MenuItem\n              key={entry.nodeId}\n              dense\n              selected={\n                current?.layoutId === layoutId &&\n                current?.nodeId === entry.nodeId\n              }\n              onClick={handlePick(entry)}\n              sx={{ pl: 2 + entry.depth * 1.5 }}\n            >\n              {entry.label}\n              {entry.nodeId in overridden ? ' •' : ''}\n            </MenuItem>\n          ))}\n        </Menu>\n      </>\n    )\n  },\n)\nLayoutStylePickerButton.displayName = 'LayoutStylePickerButton'\n\nexport default LayoutStylePickerButton\n"],"names":["canvas","COMPONENT_NODE_ID_PREFIX","LAYOUT_SLOT_COMPONENT_ID","NODE_ROOT_ID","BesignerPanelTabFlag","Button","ListSubheader","Menu","MenuItem","comparer","reaction","toJS","observer","useCallback","useEffect","useState","useLayoutChromeContext","layoutStyleSelection","useAglynBesignerSetPanel","listLayoutStyleEntries","chrome","root","getNode","entries","walk","node","depth","String","$id","startsWith","label","componentId","name","labelShort","push","nodeId","child","children","useCanvasLayoutStyleOverrides","layoutId","read","undefined","value","layoutStyleOverrides","setValue","next","equals","structural","fireImmediately","LayoutStylePickerButton","props","layoutName","chromeCanvas","setPanel","anchor","setAnchor","overridden","current","handleOpen","event","currentTarget","handleClose","handlePick","entry","select","prev","toggled","tab","ELEMENT_STYLES","color","size","disabled","length","onClick","aria-haspopup","aria-expanded","anchorEl","open","Boolean","onClose","slotProps","paper","sx","maxHeight","map","dense","selected","pl","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/layout-style-picker.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 {\n  canvas,\n  COMPONENT_NODE_ID_PREFIX,\n  LAYOUT_SLOT_COMPONENT_ID,\n  NODE_ROOT_ID,\n} from '@aglyn/aglyn'\nimport { BesignerPanelTabFlag } from '@aglyn/besigner'\nimport { Button, ListSubheader, Menu, MenuItem } from '@mui/material'\nimport { compareStructural, reaction, toJS } from 'mobx'\nimport { observer } from 'mobx-react-lite'\nimport { type MouseEvent, useCallback, useEffect, useState } from 'react'\nimport { useLayoutChromeContext } from '../contexts/layout-chrome-context'\nimport { layoutStyleSelection } from '../contexts/layout-style-selection'\nimport { useAglynBesignerSetPanel } from '../hooks/use-aglyn-besigner-panel'\n\n/** One pickable element of the layout, in hierarchy order. */\nexport interface LayoutStylePickerEntry {\n  /** The element's id in the layout's own node map. */\n  nodeId: string\n  /** The name the hierarchy would show. */\n  label: string\n  /** Nesting depth under the layout root (the root itself is 0). */\n  depth: number\n}\n\n/**\n * The elements a page may restyle, walked from the chrome canvas's root in\n * document order (AGL-3286).\n *\n * The chrome canvas has its reusable components grafted in, so anything\n * wearing a component graft id is the COMPONENT's, not the layout's: it has\n * no key in the layout's node map to be overridden by, and it is neither\n * listed nor descended into. The instance itself is listed — the graft keeps\n * its id — and styling it restyles the component's outer element.\n */\nexport function listLayoutStyleEntries(\n  chrome: Aglyn.CanvasManager | undefined,\n): LayoutStylePickerEntry[] {\n  const root = chrome?.getNode(NODE_ROOT_ID)\n  if (!root) return []\n  const entries: LayoutStylePickerEntry[] = []\n  const walk = (node: Aglyn.NodeSchema<any>, depth: number) => {\n    if (String(node.$id).startsWith(COMPONENT_NODE_ID_PREFIX)) return\n    const label =\n      node.$id === NODE_ROOT_ID\n        ? 'Whole layout'\n        : node.componentId === LAYOUT_SLOT_COMPONENT_ID\n          ? 'Page content area'\n          : node.name || node.labelShort || String(node.$id)\n    entries.push({ nodeId: String(node.$id), label, depth })\n    for (const child of node.children ?? []) walk(child, depth + 1)\n  }\n  walk(root, 0)\n  return entries\n}\n\n/**\n * This screen's overrides for one layout as the editor holds them right now\n * — off the screen canvas root, where they ride until the save lifts them\n * out (`injectLayoutStyleOverrides`) — as a plain record that only changes\n * identity when its content does, so a memo keyed on it rebuilds only then.\n */\nexport function useCanvasLayoutStyleOverrides(\n  layoutId: string | null | undefined,\n): Record<string, Record<string, unknown>> | undefined {\n  const read = useCallback(() => {\n    if (!layoutId) return undefined\n    const value = canvas.getNode(NODE_ROOT_ID)?.layoutStyleOverrides?.[layoutId]\n    return value ? (toJS(value) as Record<string, Record<string, unknown>>) : undefined\n  }, [layoutId])\n  const [value, setValue] = useState(read)\n  useEffect(\n    () =>\n      reaction(read, (next) => setValue(next), {\n        equals: compareStructural,\n        fireImmediately: true,\n      }),\n    [read],\n  )\n  return value\n}\n\nexport interface LayoutStylePickerButtonProps {\n  layoutId: string\n  layoutName?: string\n}\n\n/**\n * \"Style the layout on this page\" (AGL-3286): the entry point on the\n * locked-layout banner. Lists the layout's elements by name, nested as the\n * hierarchy nests them, marks the ones this page already restyles, and\n * picking one opens the Styles tab on it — styles only; the layout's content\n * stays the layout's.\n */\nexport const LayoutStylePickerButton = observer(\n  (props: LayoutStylePickerButtonProps) => {\n    const { layoutId, layoutName } = props\n    const { chromeCanvas } = useLayoutChromeContext()\n    const setPanel = useAglynBesignerSetPanel()\n    const [anchor, setAnchor] = useState<HTMLElement | null>(null)\n    const entries = listLayoutStyleEntries(chromeCanvas)\n    const overridden =\n      canvas.getNode(NODE_ROOT_ID)?.layoutStyleOverrides?.[layoutId] ?? {}\n    const current = layoutStyleSelection.current\n\n    const handleOpen = useCallback(\n      (event: MouseEvent<HTMLElement>) => setAnchor(event.currentTarget),\n      [],\n    )\n    const handleClose = useCallback(() => setAnchor(null), [])\n    const handlePick = useCallback(\n      (entry: LayoutStylePickerEntry) => () => {\n        layoutStyleSelection.select({\n          layoutId,\n          layoutName,\n          nodeId: entry.nodeId,\n          label: entry.label,\n        })\n        setPanel('panelRight', (prev) => ({\n          ...prev,\n          toggled: true,\n          tab: BesignerPanelTabFlag.ELEMENT_STYLES,\n        }))\n        setAnchor(null)\n      },\n      [layoutId, layoutName, setPanel],\n    )\n\n    return (\n      <>\n        <Button\n          color=\"inherit\"\n          size=\"small\"\n          disabled={!entries.length}\n          onClick={handleOpen}\n          aria-haspopup=\"menu\"\n          aria-expanded={anchor ? 'true' : undefined}\n        >\n          {'Style the layout on this page'}\n        </Button>\n        <Menu\n          anchorEl={anchor}\n          open={Boolean(anchor)}\n          onClose={handleClose}\n          slotProps={{ paper: { sx: { maxHeight: 420 } } }}\n        >\n          <ListSubheader>{'Pick an element to restyle'}</ListSubheader>\n          {entries.map((entry) => (\n            <MenuItem\n              key={entry.nodeId}\n              dense\n              selected={\n                current?.layoutId === layoutId &&\n                current?.nodeId === entry.nodeId\n              }\n              onClick={handlePick(entry)}\n              sx={{ pl: 2 + entry.depth * 1.5 }}\n            >\n              {entry.label}\n              {entry.nodeId in overridden ? ' •' : ''}\n            </MenuItem>\n          ))}\n        </Menu>\n      </>\n    )\n  },\n)\nLayoutStylePickerButton.displayName = 'LayoutStylePickerButton'\n\nexport default LayoutStylePickerButton\n"],"names":["canvas","COMPONENT_NODE_ID_PREFIX","LAYOUT_SLOT_COMPONENT_ID","NODE_ROOT_ID","BesignerPanelTabFlag","Button","ListSubheader","Menu","MenuItem","compareStructural","reaction","toJS","observer","useCallback","useEffect","useState","useLayoutChromeContext","layoutStyleSelection","useAglynBesignerSetPanel","listLayoutStyleEntries","chrome","root","getNode","entries","walk","node","depth","String","$id","startsWith","label","componentId","name","labelShort","push","nodeId","child","children","useCanvasLayoutStyleOverrides","layoutId","read","undefined","value","layoutStyleOverrides","setValue","next","equals","fireImmediately","LayoutStylePickerButton","props","layoutName","chromeCanvas","setPanel","anchor","setAnchor","overridden","current","handleOpen","event","currentTarget","handleClose","handlePick","entry","select","prev","toggled","tab","ELEMENT_STYLES","color","size","disabled","length","onClick","aria-haspopup","aria-expanded","anchorEl","open","Boolean","onClose","slotProps","paper","sx","maxHeight","map","dense","selected","pl","displayName"],"mappings":"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"}

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

@@ -20,5 +20,7 @@ export type NodeCardItemData = Aglyn.PresetSchema<any> | Aglyn.ComponentSchema<a
 export interface NodeCardProps extends CardProps {
     node: NodeCardItemData;
 }
-export declare const NodeCard: import("react").FunctionComponent<Omit<NodeCardProps, "ref"> & import("react").RefAttributes<any>>;
+export declare const NodeCard: import("react").ForwardRefExoticComponent<Omit<NodeCardProps, "ref"> & import("react").RefAttributes<any>> & import("react").NamedExoticComponent<Omit<NodeCardProps, "ref"> & import("react").RefAttributes<any>> & {
+    readonly type: import("react").ForwardRefExoticComponent<Omit<NodeCardProps, "ref"> & import("react").RefAttributes<any>>;
+};
 export default NodeCard;

package/src/lib/components/node-context-menu.d.ts

@@ -21,5 +21,7 @@ export interface NodeContextMenuProps extends PaperProps {
     /** Invoked when a menu action should dismiss the hosting menu/tooltip. */
     onAction?: () => void;
 }
-export declare const NodeContextMenu: import("react").FunctionComponent<Omit<NodeContextMenuProps, "ref"> & import("react").RefAttributes<any>>;
+export declare const NodeContextMenu: import("react").ForwardRefExoticComponent<Omit<NodeContextMenuProps, "ref"> & import("react").RefAttributes<any>> & import("react").NamedExoticComponent<Omit<NodeContextMenuProps, "ref"> & import("react").RefAttributes<any>> & {
+    readonly type: import("react").ForwardRefExoticComponent<Omit<NodeContextMenuProps, "ref"> & import("react").RefAttributes<any>>;
+};
 export default NodeContextMenu;

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

@@ -35,5 +35,7 @@ export declare const MediaFactsLeaf: import("react").ForwardRefExoticComponent<L
 export declare function denormalizeTree(nodes: Record<string, any>, rootId: string, seen?: Set<string>): any;
 export interface NodeLeafProps extends LeafProps {
 }
-export declare const NodeLeaf: import("react").FunctionComponent<NodeLeafProps & import("react").RefAttributes<any>>;
+export declare const NodeLeaf: import("react").ForwardRefExoticComponent<NodeLeafProps & import("react").RefAttributes<any>> & import("react").NamedExoticComponent<NodeLeafProps & import("react").RefAttributes<any>> & {
+    readonly type: import("react").ForwardRefExoticComponent<NodeLeafProps & import("react").RefAttributes<any>>;
+};
 export default NodeLeaf;

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

@@ -20,5 +20,7 @@ declare const NodeOutlineRoot: import("@emotion/styled").StyledComponent<import(
 export interface NodeOutlineProps extends ComponentProps<typeof NodeOutlineRoot> {
     node: Aglyn.NodeSchema<any>;
 }
-export declare const NodeOutline: import("react").FunctionComponent<Omit<NodeOutlineProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const NodeOutline: import("react").ForwardRefExoticComponent<Omit<NodeOutlineProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & import("react").NamedExoticComponent<Omit<NodeOutlineProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    readonly type: import("react").ForwardRefExoticComponent<Omit<NodeOutlineProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
 export default NodeOutline;

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

@@ -19,5 +19,7 @@ export declare function serializeRect(rect: DOMRect): any;
 export interface NodeOverlayProps extends Partial<MuiPopperProps> {
     variant: 'hovered' | 'selected';
 }
-declare const NodeOverlay: import("react").FunctionComponent<Omit<NodeOverlayProps, "ref"> & import("react").RefAttributes<any>>;
+declare const NodeOverlay: import("react").ForwardRefExoticComponent<Omit<NodeOverlayProps, "ref"> & import("react").RefAttributes<any>> & import("react").NamedExoticComponent<Omit<NodeOverlayProps, "ref"> & import("react").RefAttributes<any>> & {
+    readonly type: import("react").ForwardRefExoticComponent<Omit<NodeOverlayProps, "ref"> & import("react").RefAttributes<any>>;
+};
 export default NodeOverlay;

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

@@ -20,5 +20,7 @@ export interface NodeQuickActionsProps extends StackProps {
     node: Aglyn.NodeSchema;
     variant?: 'label' | 'actions';
 }
-export declare const NodeQuickActions: import("react").FunctionComponent<Omit<NodeQuickActionsProps, "ref"> & import("react").RefAttributes<any>>;
+export declare const NodeQuickActions: import("react").ForwardRefExoticComponent<Omit<NodeQuickActionsProps, "ref"> & import("react").RefAttributes<any>> & import("react").NamedExoticComponent<Omit<NodeQuickActionsProps, "ref"> & import("react").RefAttributes<any>> & {
+    readonly type: import("react").ForwardRefExoticComponent<Omit<NodeQuickActionsProps, "ref"> & import("react").RefAttributes<any>>;
+};
 export default NodeQuickActions;

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

@@ -102,5 +102,7 @@ export declare function hierarchyDepthStyles(depth: number, colors: {
 export interface NodeTreeViewProps extends BoxProps {
     TreeViewProps?: Partial<Omit<ComponentProps<typeof TreeView>, 'children'>>;
 }
-export declare const NodeTreeView: import("react").FunctionComponent<Omit<NodeTreeViewProps, "ref"> & import("react").RefAttributes<any>>;
+export declare const NodeTreeView: import("react").ForwardRefExoticComponent<Omit<NodeTreeViewProps, "ref"> & import("react").RefAttributes<any>> & import("react").NamedExoticComponent<Omit<NodeTreeViewProps, "ref"> & import("react").RefAttributes<any>> & {
+    readonly type: import("react").ForwardRefExoticComponent<Omit<NodeTreeViewProps, "ref"> & import("react").RefAttributes<any>>;
+};
 export default NodeTreeView;

package/src/lib/components/subtree-json-dialog.component.d.ts

@@ -51,7 +51,7 @@ export declare const closeSubtreeJson: () => void;
  * The single mount for the subtree editor, rendered once per besigner surface
  * by `BesignerRootProviderComponent` (AGL-3208).
  */
-export declare const SubtreeJsonDialogHost: (() => import("react").JSX.Element) & {
-    displayName: string;
+export declare const SubtreeJsonDialogHost: (() => import("react").JSX.Element) & import("react").NamedExoticComponent<unknown> & {
+    readonly type: () => import("react").JSX.Element;
 };
 export default SubtreeJsonDialog;

package/src/lib/components/tree/tree-list.d.ts

@@ -2,5 +2,7 @@ import { type ListProps } from '@mui/material';
 export interface TreeListProps<T> extends ListProps {
     items: T[];
 }
-export declare const TreeList: import("react").FunctionComponent<Omit<TreeListProps<unknown>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
+export declare const TreeList: import("react").ForwardRefExoticComponent<Omit<TreeListProps<unknown>, "ref"> & import("react").RefAttributes<HTMLUListElement>> & import("react").NamedExoticComponent<Omit<TreeListProps<unknown>, "ref"> & import("react").RefAttributes<HTMLUListElement>> & {
+    readonly type: import("react").ForwardRefExoticComponent<Omit<TreeListProps<unknown>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
+};
 export default TreeList;

package/src/lib/utils/inline-markdown-edit.store.d.ts

@@ -48,7 +48,7 @@ export declare function findMarkdownAttributeName(node: Aglyn.NodeSchema<any> |
  * still carried and still used: it is the value the first paint positions on,
  * before any layout effect has run, and the fallback when there is no anchor.
  *
- * It is an `observable.ref` — a DOM node is a foreign object graph and mobx has
+ * It is an `observableRef` — a DOM node is a foreign object graph and mobx has
  * no business walking into it.
  *
  * `initialValue` is captured at open and never re-read. The editor re-parses

package/src/lib/utils/inline-markdown-edit.store.js

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */ import { FieldComponentType } from "@aglyn/aglyn";
-import { makeAutoObservable, observable } from "mobx";
+import { makeAutoObservable, observableRef } from "mobx";
 /**
  * The attribute a double-click edits in place, or `undefined` when the
  * component declares none.
@@ -50,7 +50,7 @@ import { makeAutoObservable, observable } from "mobx";
  * still carried and still used: it is the value the first paint positions on,
  * before any layout effect has run, and the fallback when there is no anchor.
  *
- * It is an `observable.ref` — a DOM node is a foreign object graph and mobx has
+ * It is an `observableRef` — a DOM node is a foreign object graph and mobx has
  * no business walking into it.
  *
  * `initialValue` is captured at open and never re-read. The editor re-parses
@@ -80,7 +80,7 @@ import { makeAutoObservable, observable } from "mobx";
         this.attributeName = undefined;
         this.initialValue = '';
         makeAutoObservable(this, {
-            anchor: observable.ref
+            anchor: observableRef
         });
     }
 };

package/src/lib/utils/inline-markdown-edit.store.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/utils/inline-markdown-edit.store.ts"],"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 { FieldComponentType } from '@aglyn/aglyn'\nimport { makeAutoObservable, observable } from 'mobx'\n\nexport interface InlineMarkdownEditRect {\n  left: number\n  top: number\n  width: number\n  height: number\n}\n\n/**\n * The attribute a double-click edits in place, or `undefined` when the\n * component declares none.\n *\n * The trigger is the component schema's OWN declaration — the same\n * `FieldComponentType.MARKDOWN` that already makes the attributes panel render\n * the WYSIWYG (AGL-1616) — not a component id and not a bespoke DOM attribute.\n * The canvas exposes no per-leaf marker to hang one on, and a hardcoded\n * `componentId === 'markdown'` would leave the next component that declares a\n * document attribute (an email block, a plugin's own) editable in the panel and\n * not on the canvas. One declaration, both surfaces.\n */\nexport function findMarkdownAttributeName(\n  node: Aglyn.NodeSchema<any> | undefined,\n): string | undefined {\n  for (const attribute of node?.componentSchema?.attributes ?? []) {\n    if (attribute?.component === FieldComponentType.MARKDOWN) {\n      return attribute.name\n    }\n  }\n  return undefined\n}\n\n/**\n * State for the in-place canvas markdown editor (AGL-1624): which node is\n * being edited, which of its attributes holds the document, the value the\n * editor opened on, and where the element sits in viewport coordinates.\n *\n * Screen coordinates because the editor renders as a fixed overlay OUTSIDE the\n * closed canvas shadow root — the same frame of reference `inlineTextEdit`\n * uses, and the only one the two sides share.\n *\n * `anchor` is the element the rect was measured from, kept so the editor can\n * re-measure instead of drifting when the canvas scrolls (AGL-1644). `rect` is\n * still carried and still used: it is the value the first paint positions on,\n * before any layout effect has run, and the fallback when there is no anchor.\n *\n * It is an `observable.ref` — a DOM node is a foreign object graph and mobx has\n * no business walking into it.\n *\n * `initialValue` is captured at open and never re-read. The editor re-parses\n * its row model whenever the incoming value differs from the string it last\n * emitted, which resets the undo history and drops the caret; feeding the\n * node's live props back in would do that on every commit, and again whenever\n * a co-editing peer touched the same node.\n */\nclass InlineMarkdownEditStore {\n  node?: Aglyn.NodeSchema<any> = undefined\n  rect?: InlineMarkdownEditRect = undefined\n  anchor?: Element = undefined\n  attributeName?: string = undefined\n  initialValue = ''\n\n  constructor() {\n    makeAutoObservable(this, { anchor: observable.ref })\n  }\n\n  open(\n    node: Aglyn.NodeSchema<any>,\n    rect: InlineMarkdownEditRect,\n    attributeName: string,\n    initialValue: string,\n    anchor?: Element,\n  ) {\n    this.node = node\n    this.rect = rect\n    this.anchor = anchor\n    this.attributeName = attributeName\n    this.initialValue = initialValue\n  }\n\n  close() {\n    this.node = undefined\n    this.rect = undefined\n    this.anchor = undefined\n    this.attributeName = undefined\n    this.initialValue = ''\n  }\n}\n\nexport const inlineMarkdownEdit = new InlineMarkdownEditStore()\nexport default inlineMarkdownEdit\n"],"names":["FieldComponentType","makeAutoObservable","observable","findMarkdownAttributeName","node","attribute","componentSchema","attributes","component","MARKDOWN","name","undefined","InlineMarkdownEditStore","open","rect","attributeName","initialValue","anchor","close","ref","inlineMarkdownEdit"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAGD,SAASA,kBAAkB,QAAQ,eAAc;AACjD,SAASC,kBAAkB,EAAEC,UAAU,QAAQ,OAAM;AASrD;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,0BACdC,IAAuC;;QAEfA;IAAxB,KAAK,MAAMC,qBAAaD,yBAAAA,wBAAAA,KAAME,eAAe,qBAArBF,sBAAuBG,UAAU,mBAAI,EAAE,CAAE;QAC/D,IAAIF,CAAAA,6BAAAA,UAAWG,SAAS,MAAKR,mBAAmBS,QAAQ,EAAE;YACxD,OAAOJ,UAAUK,IAAI;QACvB;IACF;IACA,OAAOC;AACT;AAEA;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,IAAA,AAAMC,0BAAN,MAAMA;IAWJC,KACET,IAA2B,EAC3BU,IAA4B,EAC5BC,aAAqB,EACrBC,YAAoB,EACpBC,MAAgB,EAChB;QACA,IAAI,CAACb,IAAI,GAAGA;QACZ,IAAI,CAACU,IAAI,GAAGA;QACZ,IAAI,CAACG,MAAM,GAAGA;QACd,IAAI,CAACF,aAAa,GAAGA;QACrB,IAAI,CAACC,YAAY,GAAGA;IACtB;IAEAE,QAAQ;QACN,IAAI,CAACd,IAAI,GAAGO;QACZ,IAAI,CAACG,IAAI,GAAGH;QACZ,IAAI,CAACM,MAAM,GAAGN;QACd,IAAI,CAACI,aAAa,GAAGJ;QACrB,IAAI,CAACK,YAAY,GAAG;IACtB;IAxBA,aAAc;aANdZ,OAA+BO;aAC/BG,OAAgCH;aAChCM,SAAmBN;aACnBI,gBAAyBJ;aACzBK,eAAe;QAGbf,mBAAmB,IAAI,EAAE;YAAEgB,QAAQf,WAAWiB,GAAG;QAAC;IACpD;AAuBF;AAEA,OAAO,MAAMC,qBAAqB,IAAIR,0BAAyB;AAC/D,eAAeQ,mBAAkB"}
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/utils/inline-markdown-edit.store.ts"],"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 { FieldComponentType } from '@aglyn/aglyn'\nimport { makeAutoObservable, observableRef } from 'mobx'\n\nexport interface InlineMarkdownEditRect {\n  left: number\n  top: number\n  width: number\n  height: number\n}\n\n/**\n * The attribute a double-click edits in place, or `undefined` when the\n * component declares none.\n *\n * The trigger is the component schema's OWN declaration — the same\n * `FieldComponentType.MARKDOWN` that already makes the attributes panel render\n * the WYSIWYG (AGL-1616) — not a component id and not a bespoke DOM attribute.\n * The canvas exposes no per-leaf marker to hang one on, and a hardcoded\n * `componentId === 'markdown'` would leave the next component that declares a\n * document attribute (an email block, a plugin's own) editable in the panel and\n * not on the canvas. One declaration, both surfaces.\n */\nexport function findMarkdownAttributeName(\n  node: Aglyn.NodeSchema<any> | undefined,\n): string | undefined {\n  for (const attribute of node?.componentSchema?.attributes ?? []) {\n    if (attribute?.component === FieldComponentType.MARKDOWN) {\n      return attribute.name\n    }\n  }\n  return undefined\n}\n\n/**\n * State for the in-place canvas markdown editor (AGL-1624): which node is\n * being edited, which of its attributes holds the document, the value the\n * editor opened on, and where the element sits in viewport coordinates.\n *\n * Screen coordinates because the editor renders as a fixed overlay OUTSIDE the\n * closed canvas shadow root — the same frame of reference `inlineTextEdit`\n * uses, and the only one the two sides share.\n *\n * `anchor` is the element the rect was measured from, kept so the editor can\n * re-measure instead of drifting when the canvas scrolls (AGL-1644). `rect` is\n * still carried and still used: it is the value the first paint positions on,\n * before any layout effect has run, and the fallback when there is no anchor.\n *\n * It is an `observableRef` — a DOM node is a foreign object graph and mobx has\n * no business walking into it.\n *\n * `initialValue` is captured at open and never re-read. The editor re-parses\n * its row model whenever the incoming value differs from the string it last\n * emitted, which resets the undo history and drops the caret; feeding the\n * node's live props back in would do that on every commit, and again whenever\n * a co-editing peer touched the same node.\n */\nclass InlineMarkdownEditStore {\n  node?: Aglyn.NodeSchema<any> = undefined\n  rect?: InlineMarkdownEditRect = undefined\n  anchor?: Element = undefined\n  attributeName?: string = undefined\n  initialValue = ''\n\n  constructor() {\n    makeAutoObservable(this, { anchor: observableRef })\n  }\n\n  open(\n    node: Aglyn.NodeSchema<any>,\n    rect: InlineMarkdownEditRect,\n    attributeName: string,\n    initialValue: string,\n    anchor?: Element,\n  ) {\n    this.node = node\n    this.rect = rect\n    this.anchor = anchor\n    this.attributeName = attributeName\n    this.initialValue = initialValue\n  }\n\n  close() {\n    this.node = undefined\n    this.rect = undefined\n    this.anchor = undefined\n    this.attributeName = undefined\n    this.initialValue = ''\n  }\n}\n\nexport const inlineMarkdownEdit = new InlineMarkdownEditStore()\nexport default inlineMarkdownEdit\n"],"names":["FieldComponentType","makeAutoObservable","observableRef","findMarkdownAttributeName","node","attribute","componentSchema","attributes","component","MARKDOWN","name","undefined","InlineMarkdownEditStore","open","rect","attributeName","initialValue","anchor","close","inlineMarkdownEdit"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAGD,SAASA,kBAAkB,QAAQ,eAAc;AACjD,SAASC,kBAAkB,EAAEC,aAAa,QAAQ,OAAM;AASxD;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,0BACdC,IAAuC;;QAEfA;IAAxB,KAAK,MAAMC,qBAAaD,yBAAAA,wBAAAA,KAAME,eAAe,qBAArBF,sBAAuBG,UAAU,mBAAI,EAAE,CAAE;QAC/D,IAAIF,CAAAA,6BAAAA,UAAWG,SAAS,MAAKR,mBAAmBS,QAAQ,EAAE;YACxD,OAAOJ,UAAUK,IAAI;QACvB;IACF;IACA,OAAOC;AACT;AAEA;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,IAAA,AAAMC,0BAAN,MAAMA;IAWJC,KACET,IAA2B,EAC3BU,IAA4B,EAC5BC,aAAqB,EACrBC,YAAoB,EACpBC,MAAgB,EAChB;QACA,IAAI,CAACb,IAAI,GAAGA;QACZ,IAAI,CAACU,IAAI,GAAGA;QACZ,IAAI,CAACG,MAAM,GAAGA;QACd,IAAI,CAACF,aAAa,GAAGA;QACrB,IAAI,CAACC,YAAY,GAAGA;IACtB;IAEAE,QAAQ;QACN,IAAI,CAACd,IAAI,GAAGO;QACZ,IAAI,CAACG,IAAI,GAAGH;QACZ,IAAI,CAACM,MAAM,GAAGN;QACd,IAAI,CAACI,aAAa,GAAGJ;QACrB,IAAI,CAACK,YAAY,GAAG;IACtB;IAxBA,aAAc;aANdZ,OAA+BO;aAC/BG,OAAgCH;aAChCM,SAAmBN;aACnBI,gBAAyBJ;aACzBK,eAAe;QAGbf,mBAAmB,IAAI,EAAE;YAAEgB,QAAQf;QAAc;IACnD;AAuBF;AAEA,OAAO,MAAMiB,qBAAqB,IAAIP,0BAAyB;AAC/D,eAAeO,mBAAkB"}

package/src/lib/utils/inline-text-edit.store.d.ts

@@ -50,7 +50,7 @@ export interface InlinePropEditTarget {
  * edit measures a grafted preview leaf, which is not a canvas node and has no
  * ref — the case a ref lookup would have missed silently.
  *
- * An `observable.ref`: a DOM node is a foreign object graph, and mobx has no
+ * An `observableRef`: a DOM node is a foreign object graph, and mobx has no
  * business walking into it.
  */
 declare class InlineTextEditStore {

package/src/lib/utils/inline-text-edit.store.js

@@ -13,7 +13,7 @@
  * 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 { makeAutoObservable, observable } from "mobx";
+ */ import { makeAutoObservable, observableRef } from "mobx";
 /**
  * State for the inline canvas text editor: which node is being edited and
  * where its element sits in viewport coordinates (the editor renders as a
@@ -26,7 +26,7 @@
  * edit measures a grafted preview leaf, which is not a canvas node and has no
  * ref — the case a ref lookup would have missed silently.
  *
- * An `observable.ref`: a DOM node is a foreign object graph, and mobx has no
+ * An `observableRef`: a DOM node is a foreign object graph, and mobx has no
  * business walking into it.
  */ let InlineTextEditStore = class InlineTextEditStore {
     open(node, rect, propTarget, anchor) {
@@ -47,7 +47,7 @@
         this.anchor = undefined;
         this.propTarget = undefined;
         makeAutoObservable(this, {
-            anchor: observable.ref
+            anchor: observableRef
         });
     }
 };

package/src/lib/utils/inline-text-edit.store.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/utils/inline-text-edit.store.ts"],"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 { makeAutoObservable, observable } from 'mobx'\n\nexport interface InlineTextEditRect {\n  left: number\n  top: number\n  width: number\n  height: number\n}\n\n/**\n * Prop-override edit target (AGL-1304): the editor is anchored on a grafted\n * text leaf INSIDE a component instance, and the commit writes the\n * instance's `propValues[propName]` instead of the node's `children`. The\n * `node` held by the store stays the INSTANCE — the grafted leaf is not a\n * canvas node, only the anchor rect came from it.\n */\nexport interface InlinePropEditTarget {\n  /** Declared prop name the edit commits to. */\n  propName: string\n  /**\n   * The text the leaf currently renders (override unless unset, else the\n   * declared default — `getInstanceEffectivePropText`). Captured at open\n   * because the editor cannot re-derive it without the definition.\n   */\n  initialText: string\n}\n\n/**\n * State for the inline canvas text editor: which node is being edited and\n * where its element sits in viewport coordinates (the editor renders as a\n * fixed overlay OUTSIDE the closed canvas shadow root, so screen coordinates\n * are the only shared frame of reference).\n *\n * `anchor` is the element the rect was measured from, kept so the editor can\n * re-measure rather than drift when the canvas scrolls (AGL-1644). It is the\n * anchor RATHER than the node's `Besigner.refs` entry because a prop-override\n * edit measures a grafted preview leaf, which is not a canvas node and has no\n * ref — the case a ref lookup would have missed silently.\n *\n * An `observable.ref`: a DOM node is a foreign object graph, and mobx has no\n * business walking into it.\n */\nclass InlineTextEditStore {\n  node?: Aglyn.NodeSchema<any> = undefined\n  rect?: InlineTextEditRect = undefined\n  anchor?: Element = undefined\n  propTarget?: InlinePropEditTarget = undefined\n\n  constructor() {\n    makeAutoObservable(this, { anchor: observable.ref })\n  }\n\n  open(\n    node: Aglyn.NodeSchema<any>,\n    rect: InlineTextEditRect,\n    propTarget?: InlinePropEditTarget,\n    anchor?: Element,\n  ) {\n    this.node = node\n    this.rect = rect\n    this.propTarget = propTarget\n    this.anchor = anchor\n  }\n\n  close() {\n    this.node = undefined\n    this.rect = undefined\n    this.anchor = undefined\n    this.propTarget = undefined\n  }\n}\n\nexport const inlineTextEdit = new InlineTextEditStore()\n\n/**\n * Whether an inline text edit is open ON or INSIDE `element` (AGL-2486).\n *\n * The one place the \"stand down, someone is typing in here\" rule is\n * expressed. Every canvas leaf registers its own pointer handlers, and those\n * handlers begin by preventing the default — which is the default the\n * browser uses to place a caret. Asking only \"is this leaf the node being\n * edited?\" is not enough, and worse than not enough: a nested run stands its\n * own leaf down, the event then BUBBLES to the ancestor leaf, and the\n * ancestor prevents the default instead. The author sees an editor that is\n * open, styled and completely uninteractive — no caret, no drag-select, no\n * double-click-to-select-a-word.\n *\n * Containment, not identity, and by DOM rather than by node tree: the anchor\n * is the element that was measured, which is the one thing that is true for\n * a grafted instance leaf as well as a canvas node, and `contains` answers\n * for any nesting depth including the element itself.\n */\nexport function isInlineEditWithin(\n  element: Element | null | undefined,\n): boolean {\n  const anchor = inlineTextEdit.anchor\n  return Boolean(anchor && element && element.contains(anchor))\n}\n\nexport default inlineTextEdit\n"],"names":["makeAutoObservable","observable","InlineTextEditStore","open","node","rect","propTarget","anchor","close","undefined","ref","inlineTextEdit","isInlineEditWithin","element","Boolean","contains"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAGD,SAASA,kBAAkB,EAAEC,UAAU,QAAQ,OAAM;AA2BrD;;;;;;;;;;;;;;CAcC,GACD,IAAA,AAAMC,sBAAN,MAAMA;IAUJC,KACEC,IAA2B,EAC3BC,IAAwB,EACxBC,UAAiC,EACjCC,MAAgB,EAChB;QACA,IAAI,CAACH,IAAI,GAAGA;QACZ,IAAI,CAACC,IAAI,GAAGA;QACZ,IAAI,CAACC,UAAU,GAAGA;QAClB,IAAI,CAACC,MAAM,GAAGA;IAChB;IAEAC,QAAQ;QACN,IAAI,CAACJ,IAAI,GAAGK;QACZ,IAAI,CAACJ,IAAI,GAAGI;QACZ,IAAI,CAACF,MAAM,GAAGE;QACd,IAAI,CAACH,UAAU,GAAGG;IACpB;IArBA,aAAc;aALdL,OAA+BK;aAC/BJ,OAA4BI;aAC5BF,SAAmBE;aACnBH,aAAoCG;QAGlCT,mBAAmB,IAAI,EAAE;YAAEO,QAAQN,WAAWS,GAAG;QAAC;IACpD;AAoBF;AAEA,OAAO,MAAMC,iBAAiB,IAAIT,sBAAqB;AAEvD;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,SAASU,mBACdC,OAAmC;IAEnC,MAAMN,SAASI,eAAeJ,MAAM;IACpC,OAAOO,QAAQP,UAAUM,WAAWA,QAAQE,QAAQ,CAACR;AACvD;AAEA,eAAeI,eAAc"}
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/utils/inline-text-edit.store.ts"],"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 { makeAutoObservable, observableRef } from 'mobx'\n\nexport interface InlineTextEditRect {\n  left: number\n  top: number\n  width: number\n  height: number\n}\n\n/**\n * Prop-override edit target (AGL-1304): the editor is anchored on a grafted\n * text leaf INSIDE a component instance, and the commit writes the\n * instance's `propValues[propName]` instead of the node's `children`. The\n * `node` held by the store stays the INSTANCE — the grafted leaf is not a\n * canvas node, only the anchor rect came from it.\n */\nexport interface InlinePropEditTarget {\n  /** Declared prop name the edit commits to. */\n  propName: string\n  /**\n   * The text the leaf currently renders (override unless unset, else the\n   * declared default — `getInstanceEffectivePropText`). Captured at open\n   * because the editor cannot re-derive it without the definition.\n   */\n  initialText: string\n}\n\n/**\n * State for the inline canvas text editor: which node is being edited and\n * where its element sits in viewport coordinates (the editor renders as a\n * fixed overlay OUTSIDE the closed canvas shadow root, so screen coordinates\n * are the only shared frame of reference).\n *\n * `anchor` is the element the rect was measured from, kept so the editor can\n * re-measure rather than drift when the canvas scrolls (AGL-1644). It is the\n * anchor RATHER than the node's `Besigner.refs` entry because a prop-override\n * edit measures a grafted preview leaf, which is not a canvas node and has no\n * ref — the case a ref lookup would have missed silently.\n *\n * An `observableRef`: a DOM node is a foreign object graph, and mobx has no\n * business walking into it.\n */\nclass InlineTextEditStore {\n  node?: Aglyn.NodeSchema<any> = undefined\n  rect?: InlineTextEditRect = undefined\n  anchor?: Element = undefined\n  propTarget?: InlinePropEditTarget = undefined\n\n  constructor() {\n    makeAutoObservable(this, { anchor: observableRef })\n  }\n\n  open(\n    node: Aglyn.NodeSchema<any>,\n    rect: InlineTextEditRect,\n    propTarget?: InlinePropEditTarget,\n    anchor?: Element,\n  ) {\n    this.node = node\n    this.rect = rect\n    this.propTarget = propTarget\n    this.anchor = anchor\n  }\n\n  close() {\n    this.node = undefined\n    this.rect = undefined\n    this.anchor = undefined\n    this.propTarget = undefined\n  }\n}\n\nexport const inlineTextEdit = new InlineTextEditStore()\n\n/**\n * Whether an inline text edit is open ON or INSIDE `element` (AGL-2486).\n *\n * The one place the \"stand down, someone is typing in here\" rule is\n * expressed. Every canvas leaf registers its own pointer handlers, and those\n * handlers begin by preventing the default — which is the default the\n * browser uses to place a caret. Asking only \"is this leaf the node being\n * edited?\" is not enough, and worse than not enough: a nested run stands its\n * own leaf down, the event then BUBBLES to the ancestor leaf, and the\n * ancestor prevents the default instead. The author sees an editor that is\n * open, styled and completely uninteractive — no caret, no drag-select, no\n * double-click-to-select-a-word.\n *\n * Containment, not identity, and by DOM rather than by node tree: the anchor\n * is the element that was measured, which is the one thing that is true for\n * a grafted instance leaf as well as a canvas node, and `contains` answers\n * for any nesting depth including the element itself.\n */\nexport function isInlineEditWithin(\n  element: Element | null | undefined,\n): boolean {\n  const anchor = inlineTextEdit.anchor\n  return Boolean(anchor && element && element.contains(anchor))\n}\n\nexport default inlineTextEdit\n"],"names":["makeAutoObservable","observableRef","InlineTextEditStore","open","node","rect","propTarget","anchor","close","undefined","inlineTextEdit","isInlineEditWithin","element","Boolean","contains"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAGD,SAASA,kBAAkB,EAAEC,aAAa,QAAQ,OAAM;AA2BxD;;;;;;;;;;;;;;CAcC,GACD,IAAA,AAAMC,sBAAN,MAAMA;IAUJC,KACEC,IAA2B,EAC3BC,IAAwB,EACxBC,UAAiC,EACjCC,MAAgB,EAChB;QACA,IAAI,CAACH,IAAI,GAAGA;QACZ,IAAI,CAACC,IAAI,GAAGA;QACZ,IAAI,CAACC,UAAU,GAAGA;QAClB,IAAI,CAACC,MAAM,GAAGA;IAChB;IAEAC,QAAQ;QACN,IAAI,CAACJ,IAAI,GAAGK;QACZ,IAAI,CAACJ,IAAI,GAAGI;QACZ,IAAI,CAACF,MAAM,GAAGE;QACd,IAAI,CAACH,UAAU,GAAGG;IACpB;IArBA,aAAc;aALdL,OAA+BK;aAC/BJ,OAA4BI;aAC5BF,SAAmBE;aACnBH,aAAoCG;QAGlCT,mBAAmB,IAAI,EAAE;YAAEO,QAAQN;QAAc;IACnD;AAoBF;AAEA,OAAO,MAAMS,iBAAiB,IAAIR,sBAAqB;AAEvD;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,SAASS,mBACdC,OAAmC;IAEnC,MAAML,SAASG,eAAeH,MAAM;IACpC,OAAOM,QAAQN,UAAUK,WAAWA,QAAQE,QAAQ,CAACP;AACvD;AAEA,eAAeG,eAAc"}