@aglyn/besigner-ui 1.0.0-beta.143

package/src/lib/components/instance-attr-overrides.component.js

@@ -0,0 +1,298 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { canvas, components, listInstanceStyleTargets, REUSABLE_INSTANCE_COMPONENT_ID, STYLE_OVERRIDES_ROOT_KEY } from "@aglyn/aglyn";
+import { FormRenderer, FormSpy, useFormApi } from "@aglyn/shared-ui-jsx-forms";
+import { HelpTip } from "@aglyn/shared-ui-jsx";
+import { Box, Chip, Grid, MenuItem, TextField, Tooltip, Typography } from "@mui/material";
+import { observer } from "mobx-react-lite";
+import { toJS } from "mobx";
+import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { ComponentPromotionContext } from "../contexts/component-promotion-context.js";
+import { useDebouncedCommit } from "../hooks/use-debounced-commit.js";
+import { besignerDocsUrl } from "../utils/docs-help.js";
+import { getNodeAttrTarget, listInstanceAttrFields } from "../utils/attr-target.js";
+/**
+ * Schedules a commit when the form's values change and it is dirty — the same
+ * shape as the Attributes form's `AutoSaveOnChange`, and for the same reason:
+ * MUI Select renders through a Portal, so its change never reaches the
+ * `<form>` as a DOM event.
+ *
+ * The first render is skipped. Seeding the form is not an edit, and
+ * committing on mount would write an override slice for every instance whose
+ * panel was merely OPENED.
+ */ const AttrOverrideAutoSave = /*#__PURE__*/ memo(function AttrOverrideAutoSave({ values, pristine, valid, onSchedule }) {
+    const isFirstRender = useRef(true);
+    useEffect(()=>{
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+            return;
+        }
+        if (!pristine && valid) onSchedule();
+    }, [
+        values
+    ]); // eslint-disable-line react-hooks/exhaustive-deps
+    return null;
+});
+/**
+ * The override form's shell (AGL-1899).
+ *
+ * Autosaving on a debounce, exactly like the Attributes form's own template
+ * (AGL-567) — an override is an attribute edit and should not need a second
+ * kind of Save button — but with NO submit button of its own: this form is
+ * nested inside the Attributes panel, and a second `type="submit"` control
+ * beside "Save Element" is two buttons that look like they do the same thing
+ * and do not.
+ *
+ * `onBlur` flushes, so switching selection or clicking away cannot strand an
+ * edit inside the debounce window.
+ */ const InstanceAttrFormTemplate = ({ formFields, schema })=>{
+    const { handleSubmit } = useFormApi();
+    const { schedule, flush } = useDebouncedCommit(handleSubmit);
+    return /*#__PURE__*/ _jsxs(Box, {
+        onBlur: flush,
+        children: [
+            schema == null ? void 0 : schema.title,
+            /*#__PURE__*/ _jsx(Grid, {
+                spacing: 2,
+                container: true,
+                children: formFields
+            }),
+            /*#__PURE__*/ _jsx(FormSpy, {
+                subscription: {
+                    values: true,
+                    pristine: true,
+                    valid: true
+                },
+                children: ({ values, pristine, valid })=>/*#__PURE__*/ _jsx(AttrOverrideAutoSave, {
+                        values: values,
+                        pristine: pristine,
+                        valid: valid,
+                        onSchedule: schedule
+                    })
+            })
+        ]
+    });
+};
+/**
+ * Per-instance ATTRIBUTE overrides for a reusable-component instance
+ * (AGL-1899) — the attribute-side twin of the Styles panel's override
+ * section (AGL-1332).
+ *
+ * An instance renders the component's CURRENT nodes; this section layers one
+ * placement's own prop values over one node inside it, so a single page's CTA
+ * can be `outlined` while every other placement stays `contained` — without
+ * the component declaring a prop for it, without detaching, and without
+ * pinning the instance to a component version. The graft merges the slice per
+ * named prop, so a prop the component ADDS later still reaches this instance
+ * with the component's new default.
+ *
+ * Content is deliberately not editable here: a component's text rides its
+ * declared `{{prop.*}}` props and the canvas's double-click editor (AGL-1304),
+ * and `children`/`html` are refused by the writer so this panel never becomes
+ * a second control writing the same rendered string.
+ */ export const InstanceAttrOverrides = observer(function InstanceAttrOverrides({ node: selectedNode, componentMapper }) {
+    var _canvas_getNode, _target_attrs, _ref, _ref1;
+    var _definition_nodes;
+    // The node as the CANVAS currently holds it (AGL-2486 / `f68aadabe`).
+    //
+    // Undo, a co-edit apply and a draft restore all REPLACE the node map with
+    // fresh instances. A panel holding the node OBJECT would go on writing to a
+    // detached copy — the write lands on an orphan, nothing throws, and the
+    // header still says UP TO DATE. Resolving by `$id` at the point of use is
+    // the only form that cannot strand itself, and reading it inside an
+    // `observer` is also what re-renders this section after an undo.
+    const node = (selectedNode == null ? void 0 : selectedNode.$id) ? (_canvas_getNode = canvas.getNode(selectedNode.$id)) != null ? _canvas_getNode : selectedNode : selectedNode;
+    const { definitions } = useContext(ComponentPromotionContext);
+    const isInstance = (node == null ? void 0 : node.componentId) === REUSABLE_INSTANCE_COMPONENT_ID;
+    const definition = useMemo(()=>{
+        var _node_props;
+        if (!isInstance) return undefined;
+        const refId = node == null ? void 0 : (_node_props = node.props) == null ? void 0 : _node_props.refId;
+        return refId ? definitions == null ? void 0 : definitions[refId] : undefined;
+    }, [
+        isInstance,
+        node,
+        definitions
+    ]);
+    // The SAME target list the Styles panel offers, from the same walker, so
+    // the two panels name the same parts of a component in the same order and
+    // an override written by one is addressed identically by the other.
+    const targets = useMemo(()=>listInstanceStyleTargets(definition), [
+        definition
+    ]);
+    // Which target is being edited, held per selection rather than in an
+    // effect: switching nodes must land on the component root, and deriving it
+    // from the current `node.$id` cannot render one frame aimed at the
+    // PREVIOUS instance's leaf.
+    const [picked, setPicked] = useState({
+        key: STYLE_OVERRIDES_ROOT_KEY
+    });
+    const pickedKey = picked.nodeId && picked.nodeId === (node == null ? void 0 : node.$id) ? picked.key : STYLE_OVERRIDES_ROOT_KEY;
+    // A leaf the component no longer has falls back to the root rather than
+    // aiming the panel at a slice nothing renders. An unloaded definition
+    // offers nothing yet, so it is not evidence the key is stale.
+    const overrideKey = !targets.length || targets.some((entry)=>entry.key === pickedKey) ? pickedKey : STYLE_OVERRIDES_ROOT_KEY;
+    const target = useMemo(()=>getNodeAttrTarget(node, overrideKey), [
+        node,
+        overrideKey
+    ]);
+    const pickedTarget = targets.find((entry)=>entry.key === overrideKey);
+    const defNode = pickedTarget ? definition == null ? void 0 : (_definition_nodes = definition.nodes) == null ? void 0 : _definition_nodes[pickedTarget.componentInternalId] : undefined;
+    const attrFields = useMemo(()=>listInstanceAttrFields(defNode), [
+        defNode
+    ]);
+    // Read during render (observer): tracks the live slice, so the chips update
+    // as edits land and as they are cleared.
+    const overriddenProps = Object.keys((_target_attrs = target.attrs) != null ? _target_attrs : {});
+    const overriddenKeys = new Set(Object.keys((_ref = node == null ? void 0 : node.attrOverrides) != null ? _ref : {}));
+    const targetLabel = useCallback((entry)=>entry.isRoot ? 'Component root' : entry.name || entry.componentId && components.getLabel(entry.componentId) || entry.componentInternalId, []);
+    const handleTargetChange = useCallback((event)=>{
+        setPicked({
+            nodeId: node == null ? void 0 : node.$id,
+            key: event.target.value
+        });
+    }, [
+        node == null ? void 0 : node.$id
+    ]);
+    const handleSave = useCallback((values)=>{
+        // One undoable step. `setAttrs` drops every non-override value by key,
+        // so a form that hands back a field per declared attribute — most of
+        // them empty — stores only what this instance actually chose.
+        canvas.transact(()=>target.setAttrs(values));
+    }, [
+        target
+    ]);
+    const handleClear = useCallback((prop)=>()=>{
+            // Undoable and uncoalesced: clearing a chip DISCARDS an override, which
+            // is the one edit here that most needs a way back.
+            canvas.transact(()=>target.clearAttr(prop));
+        }, [
+        target
+    ]);
+    // Re-seeds the form when the selection or the target changes. NOT keyed on
+    // the slice's contents: the form owns the typed value while the author is
+    // in it, and re-seeding on every commit would fight the field for the
+    // cursor — the shape behind an update loop, not merely a nuisance.
+    const seedKey = `${(_ref1 = node == null ? void 0 : node.$id) != null ? _ref1 : ''}:${overrideKey}`;
+    const initialValues = useMemo(()=>{
+        var _toJS;
+        return (_toJS = toJS(target.attrs)) != null ? _toJS : {};
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        seedKey
+    ]);
+    if (!isInstance || !targets.length) return null;
+    return /*#__PURE__*/ _jsxs(Box, {
+        sx: {
+            mt: 2
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(Typography, {
+                variant: "overline",
+                color: "text.secondary",
+                component: "div",
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center'
+                },
+                children: [
+                    'Attribute overrides',
+                    /*#__PURE__*/ _jsx(HelpTip, {
+                        title: "Attribute overrides",
+                        excerpt: "Give one placement of a component its own attribute values — a different button variant, size or link — without changing the component or detaching. Empty means the component's own value.",
+                        href: besignerDocsUrl('reusableComponents', '#override-an-attribute-on-one-instance'),
+                        sx: {
+                            ml: 0.25,
+                            fontSize: '0.9em'
+                        }
+                    })
+                ]
+            }),
+            targets.length > 1 ? /*#__PURE__*/ _jsx(TextField, {
+                select: true,
+                fullWidth: true,
+                size: "small",
+                margin: "dense",
+                label: "Override target",
+                value: overrideKey,
+                onChange: handleTargetChange,
+                helperText: target.isLeafOverride ? 'Setting attributes on one element inside the component, on ' + 'this instance only.' : "Setting attributes on the component's outer element, on " + 'this instance only. Pick an element inside it to override ' + 'that part.',
+                children: targets.map((entry)=>/*#__PURE__*/ _jsxs(MenuItem, {
+                        value: entry.key,
+                        // Nesting reads as nesting: the definition's tree is the only
+                        // map an author has of what is inside a component.
+                        sx: {
+                            pl: 2 + entry.depth * 1.5
+                        },
+                        children: [
+                            targetLabel(entry),
+                            overriddenKeys.has(entry.key) ? ' •' : ''
+                        ]
+                    }, entry.key))
+            }) : null,
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    mt: 0.5,
+                    mb: 1
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Tooltip, {
+                        title: 'Attributes set here apply to this instance only, layered over ' + "the component's own values. Other placements keep the " + 'component, and component updates still flow through. Leave a ' + "field empty to use the component's value.",
+                        children: /*#__PURE__*/ _jsx(Chip, {
+                            size: "small",
+                            color: overriddenProps.length ? 'secondary' : 'default',
+                            label: overriddenProps.length ? `Overridden here: ${overriddenProps.length}` : "Using the component's attributes"
+                        })
+                    }),
+                    overriddenProps.map((prop)=>/*#__PURE__*/ _jsx(Tooltip, {
+                            title: "Clear this override — the instance returns to the component's " + 'own value',
+                            children: /*#__PURE__*/ _jsx(Chip, {
+                                size: "small",
+                                variant: "outlined",
+                                sx: {
+                                    ml: 1,
+                                    mt: 0.5
+                                },
+                                label: prop,
+                                onDelete: handleClear(prop)
+                            })
+                        }, prop))
+                ]
+            }),
+            attrFields.length ? /*#__PURE__*/ _jsx(FormRenderer, {
+                componentMapper: componentMapper,
+                onSubmit: handleSave,
+                initialValues: initialValues,
+                schema: {
+                    fields: attrFields.map((entry)=>entry.field)
+                },
+                children: (templateProps)=>/*#__PURE__*/ _jsx(InstanceAttrFormTemplate, _extends({}, templateProps))
+            }, seedKey) : // Said out loud rather than rendering an empty box: a component made
+            // of layout elements genuinely has nothing to override here, and an
+            // author should not be left wondering whether the panel failed.
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: 'This part of the component has no attributes that can be ' + 'overridden per instance.'
+            })
+        ]
+    });
+});
+export default InstanceAttrOverrides;
+
+//# sourceMappingURL=instance-attr-overrides.component.js.map

package/src/lib/components/instance-attr-overrides.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/instance-attr-overrides.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type * as Aglyn from '@aglyn/aglyn'\nimport {\n  canvas,\n  components,\n  listInstanceStyleTargets,\n  REUSABLE_INSTANCE_COMPONENT_ID,\n  STYLE_OVERRIDES_ROOT_KEY,\n} from '@aglyn/aglyn'\nimport {\n  FormRenderer,\n  type FormRendererProps,\n  type FormTemplateRenderProps,\n  FormSpy,\n  useFormApi,\n} from '@aglyn/shared-ui-jsx-forms'\nimport { HelpTip } from '@aglyn/shared-ui-jsx'\nimport {\n  Box,\n  Chip,\n  Grid,\n  MenuItem,\n  TextField,\n  Tooltip,\n  Typography,\n} from '@mui/material'\nimport { observer } from 'mobx-react-lite'\nimport { toJS } from 'mobx'\nimport {\n  type ChangeEvent,\n  memo,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { ComponentPromotionContext } from '../contexts/component-promotion-context'\nimport { useDebouncedCommit } from '../hooks/use-debounced-commit'\nimport { besignerDocsUrl } from '../utils/docs-help'\nimport {\n  getNodeAttrTarget,\n  listInstanceAttrFields,\n} from '../utils/attr-target'\n\n/**\n * Schedules a commit when the form's values change and it is dirty — the same\n * shape as the Attributes form's `AutoSaveOnChange`, and for the same reason:\n * MUI Select renders through a Portal, so its change never reaches the\n * `<form>` as a DOM event.\n *\n * The first render is skipped. Seeding the form is not an edit, and\n * committing on mount would write an override slice for every instance whose\n * panel was merely OPENED.\n */\nconst AttrOverrideAutoSave = memo(function AttrOverrideAutoSave({\n  values,\n  pristine,\n  valid,\n  onSchedule,\n}: {\n  values: unknown\n  pristine: boolean\n  valid: boolean\n  onSchedule: () => void\n}) {\n  const isFirstRender = useRef(true)\n  useEffect(() => {\n    if (isFirstRender.current) {\n      isFirstRender.current = false\n      return\n    }\n    if (!pristine && valid) onSchedule()\n  }, [values]) // eslint-disable-line react-hooks/exhaustive-deps\n  return null\n})\n\n/**\n * The override form's shell (AGL-1899).\n *\n * Autosaving on a debounce, exactly like the Attributes form's own template\n * (AGL-567) — an override is an attribute edit and should not need a second\n * kind of Save button — but with NO submit button of its own: this form is\n * nested inside the Attributes panel, and a second `type=\"submit\"` control\n * beside \"Save Element\" is two buttons that look like they do the same thing\n * and do not.\n *\n * `onBlur` flushes, so switching selection or clicking away cannot strand an\n * edit inside the debounce window.\n */\nconst InstanceAttrFormTemplate = ({\n  formFields,\n  schema,\n}: FormTemplateRenderProps) => {\n  const { handleSubmit } = useFormApi()\n  const { schedule, flush } = useDebouncedCommit(handleSubmit)\n  return (\n    <Box onBlur={flush}>\n      {schema?.title}\n      <Grid spacing={2} container>\n        {formFields as unknown as JSX.Node}\n      </Grid>\n      <FormSpy subscription={{ values: true, pristine: true, valid: true }}>\n        {({ values, pristine, valid }) => (\n          <AttrOverrideAutoSave\n            values={values}\n            pristine={pristine}\n            valid={valid}\n            onSchedule={schedule}\n          />\n        )}\n      </FormSpy>\n    </Box>\n  )\n}\n\nexport interface InstanceAttrOverridesProps {\n  /** The selected node, as the panel holds it. */\n  node?: Aglyn.NodeSchema<any>\n  /**\n   * Passed in rather than imported, so this file does not import the\n   * Attributes form that renders it (a cycle) — and so a caller can narrow\n   * the editors on offer without this component knowing about any of them.\n   */\n  componentMapper: FormRendererProps['componentMapper']\n}\n\n/**\n * Per-instance ATTRIBUTE overrides for a reusable-component instance\n * (AGL-1899) — the attribute-side twin of the Styles panel's override\n * section (AGL-1332).\n *\n * An instance renders the component's CURRENT nodes; this section layers one\n * placement's own prop values over one node inside it, so a single page's CTA\n * can be `outlined` while every other placement stays `contained` — without\n * the component declaring a prop for it, without detaching, and without\n * pinning the instance to a component version. The graft merges the slice per\n * named prop, so a prop the component ADDS later still reaches this instance\n * with the component's new default.\n *\n * Content is deliberately not editable here: a component's text rides its\n * declared `{{prop.*}}` props and the canvas's double-click editor (AGL-1304),\n * and `children`/`html` are refused by the writer so this panel never becomes\n * a second control writing the same rendered string.\n */\nexport const InstanceAttrOverrides = observer(function InstanceAttrOverrides({\n  node: selectedNode,\n  componentMapper,\n}: InstanceAttrOverridesProps) {\n  // The node as the CANVAS currently holds it (AGL-2486 / `f68aadabe`).\n  //\n  // Undo, a co-edit apply and a draft restore all REPLACE the node map with\n  // fresh instances. A panel holding the node OBJECT would go on writing to a\n  // detached copy — the write lands on an orphan, nothing throws, and the\n  // header still says UP TO DATE. Resolving by `$id` at the point of use is\n  // the only form that cannot strand itself, and reading it inside an\n  // `observer` is also what re-renders this section after an undo.\n  const node = (selectedNode?.$id\n    ? (canvas.getNode(selectedNode.$id) ?? selectedNode)\n    : selectedNode) as Aglyn.NodeSchema<any> | undefined\n\n  const { definitions } = useContext(ComponentPromotionContext)\n  const isInstance = node?.componentId === REUSABLE_INSTANCE_COMPONENT_ID\n  const definition = useMemo(() => {\n    if (!isInstance) return undefined\n    const refId = (node?.props as { refId?: string } | undefined)?.refId\n    return refId ? definitions?.[refId] : undefined\n  }, [isInstance, node, definitions])\n\n  // The SAME target list the Styles panel offers, from the same walker, so\n  // the two panels name the same parts of a component in the same order and\n  // an override written by one is addressed identically by the other.\n  const targets = useMemo(\n    () => listInstanceStyleTargets(definition),\n    [definition],\n  )\n\n  // Which target is being edited, held per selection rather than in an\n  // effect: switching nodes must land on the component root, and deriving it\n  // from the current `node.$id` cannot render one frame aimed at the\n  // PREVIOUS instance's leaf.\n  const [picked, setPicked] = useState<{ nodeId?: string; key: string }>({\n    key: STYLE_OVERRIDES_ROOT_KEY,\n  })\n  const pickedKey =\n    picked.nodeId && picked.nodeId === node?.$id\n      ? picked.key\n      : STYLE_OVERRIDES_ROOT_KEY\n  // A leaf the component no longer has falls back to the root rather than\n  // aiming the panel at a slice nothing renders. An unloaded definition\n  // offers nothing yet, so it is not evidence the key is stale.\n  const overrideKey =\n    !targets.length || targets.some((entry) => entry.key === pickedKey)\n      ? pickedKey\n      : STYLE_OVERRIDES_ROOT_KEY\n\n  const target = useMemo(\n    () => getNodeAttrTarget(node, overrideKey),\n    [node, overrideKey],\n  )\n\n  const pickedTarget = targets.find((entry) => entry.key === overrideKey)\n  const defNode = pickedTarget\n    ? (definition?.nodes as Record<string, any> | undefined)?.[\n        pickedTarget.componentInternalId\n      ]\n    : undefined\n  const attrFields = useMemo(() => listInstanceAttrFields(defNode), [defNode])\n\n  // Read during render (observer): tracks the live slice, so the chips update\n  // as edits land and as they are cleared.\n  const overriddenProps = Object.keys(target.attrs ?? {})\n  const overriddenKeys = new Set(\n    Object.keys((node?.attrOverrides as Record<string, any> | undefined) ?? {}),\n  )\n\n  const targetLabel = useCallback(\n    (entry: Aglyn.InstanceStyleTarget) =>\n      entry.isRoot\n        ? 'Component root'\n        : entry.name ||\n          (entry.componentId && components.getLabel(entry.componentId)) ||\n          entry.componentInternalId,\n    [],\n  )\n\n  const handleTargetChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      setPicked({ nodeId: node?.$id, key: event.target.value })\n    },\n    [node?.$id],\n  )\n\n  const handleSave = useCallback(\n    (values: Record<string, unknown>) => {\n      // One undoable step. `setAttrs` drops every non-override value by key,\n      // so a form that hands back a field per declared attribute — most of\n      // them empty — stores only what this instance actually chose.\n      canvas.transact(() => target.setAttrs(values))\n    },\n    [target],\n  )\n\n  const handleClear = useCallback(\n    (prop: string) => () => {\n      // Undoable and uncoalesced: clearing a chip DISCARDS an override, which\n      // is the one edit here that most needs a way back.\n      canvas.transact(() => target.clearAttr(prop))\n    },\n    [target],\n  )\n\n  // Re-seeds the form when the selection or the target changes. NOT keyed on\n  // the slice's contents: the form owns the typed value while the author is\n  // in it, and re-seeding on every commit would fight the field for the\n  // cursor — the shape behind an update loop, not merely a nuisance.\n  const seedKey = `${node?.$id ?? ''}:${overrideKey}`\n  const initialValues = useMemo(\n    () => (toJS(target.attrs) ?? {}) as Record<string, unknown>,\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [seedKey],\n  )\n\n  if (!isInstance || !targets.length) return null\n\n  return (\n    <Box sx={{ mt: 2 }}>\n      <Typography\n        variant=\"overline\"\n        color=\"text.secondary\"\n        component=\"div\"\n        sx={{ display: 'flex', alignItems: 'center' }}\n      >\n        {'Attribute overrides'}\n        <HelpTip\n          title=\"Attribute overrides\"\n          excerpt=\"Give one placement of a component its own attribute values — a different button variant, size or link — without changing the component or detaching. Empty means the component's own value.\"\n          href={besignerDocsUrl(\n            'reusableComponents',\n            '#override-an-attribute-on-one-instance',\n          )}\n          sx={{ ml: 0.25, fontSize: '0.9em' }}\n        />\n      </Typography>\n      {targets.length > 1 ? (\n        <TextField\n          select\n          fullWidth\n          size=\"small\"\n          margin=\"dense\"\n          label=\"Override target\"\n          value={overrideKey}\n          onChange={handleTargetChange}\n          helperText={\n            target.isLeafOverride\n              ? 'Setting attributes on one element inside the component, on ' +\n                'this instance only.'\n              : \"Setting attributes on the component's outer element, on \" +\n                'this instance only. Pick an element inside it to override ' +\n                'that part.'\n          }\n        >\n          {targets.map((entry) => (\n            <MenuItem\n              key={entry.key}\n              value={entry.key}\n              // Nesting reads as nesting: the definition's tree is the only\n              // map an author has of what is inside a component.\n              sx={{ pl: 2 + entry.depth * 1.5 }}\n            >\n              {targetLabel(entry)}\n              {overriddenKeys.has(entry.key) ? ' •' : ''}\n            </MenuItem>\n          ))}\n        </TextField>\n      ) : null}\n      <Box sx={{ mt: 0.5, mb: 1 }}>\n        <Tooltip\n          title={\n            'Attributes set here apply to this instance only, layered over ' +\n            \"the component's own values. Other placements keep the \" +\n            'component, and component updates still flow through. Leave a ' +\n            \"field empty to use the component's value.\"\n          }\n        >\n          <Chip\n            size=\"small\"\n            color={overriddenProps.length ? 'secondary' : 'default'}\n            label={\n              overriddenProps.length\n                ? `Overridden here: ${overriddenProps.length}`\n                : \"Using the component's attributes\"\n            }\n          />\n        </Tooltip>\n        {overriddenProps.map((prop) => (\n          <Tooltip\n            key={prop}\n            title={\n              \"Clear this override — the instance returns to the component's \" +\n              'own value'\n            }\n          >\n            <Chip\n              size=\"small\"\n              variant=\"outlined\"\n              sx={{ ml: 1, mt: 0.5 }}\n              label={prop}\n              onDelete={handleClear(prop)}\n            />\n          </Tooltip>\n        ))}\n      </Box>\n      {attrFields.length ? (\n        <FormRenderer\n          key={seedKey}\n          componentMapper={componentMapper}\n          onSubmit={handleSave}\n          initialValues={initialValues}\n          schema={{ fields: attrFields.map((entry) => entry.field) }}\n        >\n          {(templateProps: FormTemplateRenderProps) => (\n            <InstanceAttrFormTemplate {...templateProps} />\n          )}\n        </FormRenderer>\n      ) : (\n        // Said out loud rather than rendering an empty box: a component made\n        // of layout elements genuinely has nothing to override here, and an\n        // author should not be left wondering whether the panel failed.\n        <Typography variant=\"caption\" color=\"text.secondary\">\n          {'This part of the component has no attributes that can be ' +\n            'overridden per instance.'}\n        </Typography>\n      )}\n    </Box>\n  )\n})\n\nexport default InstanceAttrOverrides\n"],"names":["canvas","components","listInstanceStyleTargets","REUSABLE_INSTANCE_COMPONENT_ID","STYLE_OVERRIDES_ROOT_KEY","FormRenderer","FormSpy","useFormApi","HelpTip","Box","Chip","Grid","MenuItem","TextField","Tooltip","Typography","observer","toJS","memo","useCallback","useContext","useEffect","useMemo","useRef","useState","ComponentPromotionContext","useDebouncedCommit","besignerDocsUrl","getNodeAttrTarget","listInstanceAttrFields","AttrOverrideAutoSave","values","pristine","valid","onSchedule","isFirstRender","current","InstanceAttrFormTemplate","formFields","schema","handleSubmit","schedule","flush","onBlur","title","spacing","container","subscription","InstanceAttrOverrides","node","selectedNode","componentMapper","target","definition","$id","getNode","definitions","isInstance","componentId","undefined","refId","props","targets","picked","setPicked","key","pickedKey","nodeId","overrideKey","length","some","entry","pickedTarget","find","defNode","nodes","componentInternalId","attrFields","overriddenProps","Object","keys","attrs","overriddenKeys","Set","attrOverrides","targetLabel","isRoot","name","getLabel","handleTargetChange","event","value","handleSave","transact","setAttrs","handleClear","prop","clearAttr","seedKey","initialValues","sx","mt","variant","color","component","display","alignItems","excerpt","href","ml","fontSize","select","fullWidth","size","margin","label","onChange","helperText","isLeafOverride","map","pl","depth","has","mb","onDelete","onSubmit","fields","field","templateProps"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC;;AAGD,SACEA,MAAM,EACNC,UAAU,EACVC,wBAAwB,EACxBC,8BAA8B,EAC9BC,wBAAwB,QACnB,eAAc;AACrB,SACEC,YAAY,EAGZC,OAAO,EACPC,UAAU,QACL,6BAA4B;AACnC,SAASC,OAAO,QAAQ,uBAAsB;AAC9C,SACEC,GAAG,EACHC,IAAI,EACJC,IAAI,EACJC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,UAAU,QACL,gBAAe;AACtB,SAASC,QAAQ,QAAQ,kBAAiB;AAC1C,SAASC,IAAI,QAAQ,OAAM;AAC3B,SAEEC,IAAI,EACJC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,QAAO;AACd,SAASC,yBAAyB,QAAQ,6CAAyC;AACnF,SAASC,kBAAkB,QAAQ,mCAA+B;AAClE,SAASC,eAAe,QAAQ,wBAAoB;AACpD,SACEC,iBAAiB,EACjBC,sBAAsB,QACjB,0BAAsB;AAE7B;;;;;;;;;CASC,GACD,MAAMC,qCAAuBZ,KAAK,SAASY,qBAAqB,EAC9DC,MAAM,EACNC,QAAQ,EACRC,KAAK,EACLC,UAAU,EAMX;IACC,MAAMC,gBAAgBZ,OAAO;IAC7BF,UAAU;QACR,IAAIc,cAAcC,OAAO,EAAE;YACzBD,cAAcC,OAAO,GAAG;YACxB;QACF;QACA,IAAI,CAACJ,YAAYC,OAAOC;IAC1B,GAAG;QAACH;KAAO,GAAE,kDAAkD;IAC/D,OAAO;AACT;AAEA;;;;;;;;;;;;CAYC,GACD,MAAMM,2BAA2B,CAAC,EAChCC,UAAU,EACVC,MAAM,EACkB;IACxB,MAAM,EAAEC,YAAY,EAAE,GAAGjC;IACzB,MAAM,EAAEkC,QAAQ,EAAEC,KAAK,EAAE,GAAGhB,mBAAmBc;IAC/C,qBACE,MAAC/B;QAAIkC,QAAQD;;YACVH,0BAAAA,OAAQK,KAAK;0BACd,KAACjC;gBAAKkC,SAAS;gBAAGC,SAAS;0BACxBR;;0BAEH,KAAChC;gBAAQyC,cAAc;oBAAEhB,QAAQ;oBAAMC,UAAU;oBAAMC,OAAO;gBAAK;0BAChE,CAAC,EAAEF,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,iBAC3B,KAACH;wBACCC,QAAQA;wBACRC,UAAUA;wBACVC,OAAOA;wBACPC,YAAYO;;;;;AAMxB;AAaA;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,MAAMO,wBAAwBhC,SAAS,SAASgC,sBAAsB,EAC3EC,MAAMC,YAAY,EAClBC,eAAe,EACY;QAUtBnD,iBAqD+BoD;QAR/BC;IAtDL,sEAAsE;IACtE,EAAE;IACF,0EAA0E;IAC1E,4EAA4E;IAC5E,wEAAwE;IACxE,0EAA0E;IAC1E,oEAAoE;IACpE,iEAAiE;IACjE,MAAMJ,OAAQC,CAAAA,gCAAAA,aAAcI,GAAG,KAC1BtD,kBAAAA,OAAOuD,OAAO,CAACL,aAAaI,GAAG,aAA/BtD,kBAAoCkD,eACrCA;IAEJ,MAAM,EAAEM,WAAW,EAAE,GAAGpC,WAAWK;IACnC,MAAMgC,aAAaR,CAAAA,wBAAAA,KAAMS,WAAW,MAAKvD;IACzC,MAAMkD,aAAa/B,QAAQ;YAEV2B;QADf,IAAI,CAACQ,YAAY,OAAOE;QACxB,MAAMC,QAASX,yBAAAA,cAAAA,KAAMY,KAAK,qBAAZ,AAACZ,YAAgDW,KAAK;QACpE,OAAOA,QAAQJ,+BAAAA,WAAa,CAACI,MAAM,GAAGD;IACxC,GAAG;QAACF;QAAYR;QAAMO;KAAY;IAElC,yEAAyE;IACzE,0EAA0E;IAC1E,oEAAoE;IACpE,MAAMM,UAAUxC,QACd,IAAMpB,yBAAyBmD,aAC/B;QAACA;KAAW;IAGd,qEAAqE;IACrE,2EAA2E;IAC3E,mEAAmE;IACnE,4BAA4B;IAC5B,MAAM,CAACU,QAAQC,UAAU,GAAGxC,SAA2C;QACrEyC,KAAK7D;IACP;IACA,MAAM8D,YACJH,OAAOI,MAAM,IAAIJ,OAAOI,MAAM,MAAKlB,wBAAAA,KAAMK,GAAG,IACxCS,OAAOE,GAAG,GACV7D;IACN,wEAAwE;IACxE,sEAAsE;IACtE,8DAA8D;IAC9D,MAAMgE,cACJ,CAACN,QAAQO,MAAM,IAAIP,QAAQQ,IAAI,CAAC,CAACC,QAAUA,MAAMN,GAAG,KAAKC,aACrDA,YACA9D;IAEN,MAAMgD,SAAS9B,QACb,IAAMM,kBAAkBqB,MAAMmB,cAC9B;QAACnB;QAAMmB;KAAY;IAGrB,MAAMI,eAAeV,QAAQW,IAAI,CAAC,CAACF,QAAUA,MAAMN,GAAG,KAAKG;IAC3D,MAAMM,UAAUF,eACXnB,+BAAAA,oBAAAA,WAAYsB,KAAK,qBAAlB,AAACtB,iBAAuD,CACtDmB,aAAaI,mBAAmB,CACjC,GACDjB;IACJ,MAAMkB,aAAavD,QAAQ,IAAMO,uBAAuB6C,UAAU;QAACA;KAAQ;IAE3E,4EAA4E;IAC5E,yCAAyC;IACzC,MAAMI,kBAAkBC,OAAOC,IAAI,EAAC5B,gBAAAA,OAAO6B,KAAK,YAAZ7B,gBAAgB,CAAC;IACrD,MAAM8B,iBAAiB,IAAIC,IACzBJ,OAAOC,IAAI,SAAE/B,wBAAAA,KAAMmC,aAAa,mBAAwC,CAAC;IAG3E,MAAMC,cAAclE,YAClB,CAACoD,QACCA,MAAMe,MAAM,GACR,mBACAf,MAAMgB,IAAI,IACThB,MAAMb,WAAW,IAAIzD,WAAWuF,QAAQ,CAACjB,MAAMb,WAAW,KAC3Da,MAAMK,mBAAmB,EAC/B,EAAE;IAGJ,MAAMa,qBAAqBtE,YACzB,CAACuE;QACC1B,UAAU;YAAEG,MAAM,EAAElB,wBAAAA,KAAMK,GAAG;YAAEW,KAAKyB,MAAMtC,MAAM,CAACuC,KAAK;QAAC;IACzD,GACA;QAAC1C,wBAAAA,KAAMK,GAAG;KAAC;IAGb,MAAMsC,aAAazE,YACjB,CAACY;QACC,uEAAuE;QACvE,qEAAqE;QACrE,8DAA8D;QAC9D/B,OAAO6F,QAAQ,CAAC,IAAMzC,OAAO0C,QAAQ,CAAC/D;IACxC,GACA;QAACqB;KAAO;IAGV,MAAM2C,cAAc5E,YAClB,CAAC6E,OAAiB;YAChB,wEAAwE;YACxE,mDAAmD;YACnDhG,OAAO6F,QAAQ,CAAC,IAAMzC,OAAO6C,SAAS,CAACD;QACzC,GACA;QAAC5C;KAAO;IAGV,2EAA2E;IAC3E,0EAA0E;IAC1E,sEAAsE;IACtE,mEAAmE;IACnE,MAAM8C,UAAU,YAAGjD,wBAAAA,KAAMK,GAAG,oBAAI,GAAG,CAAC,EAAEc,aAAa;IACnD,MAAM+B,gBAAgB7E,QACpB;YAAOL;gBAAAA,QAAAA,KAAKmC,OAAO6B,KAAK,aAAjBhE,QAAsB,CAAC;OAC9B,uDAAuD;IACvD;QAACiF;KAAQ;IAGX,IAAI,CAACzC,cAAc,CAACK,QAAQO,MAAM,EAAE,OAAO;IAE3C,qBACE,MAAC5D;QAAI2F,IAAI;YAAEC,IAAI;QAAE;;0BACf,MAACtF;gBACCuF,SAAQ;gBACRC,OAAM;gBACNC,WAAU;gBACVJ,IAAI;oBAAEK,SAAS;oBAAQC,YAAY;gBAAS;;oBAE3C;kCACD,KAAClG;wBACCoC,OAAM;wBACN+D,SAAQ;wBACRC,MAAMjF,gBACJ,sBACA;wBAEFyE,IAAI;4BAAES,IAAI;4BAAMC,UAAU;wBAAQ;;;;YAGrChD,QAAQO,MAAM,GAAG,kBAChB,KAACxD;gBACCkG,MAAM;gBACNC,SAAS;gBACTC,MAAK;gBACLC,QAAO;gBACPC,OAAM;gBACNxB,OAAOvB;gBACPgD,UAAU3B;gBACV4B,YACEjE,OAAOkE,cAAc,GACjB,gEACA,wBACA,6DACA,+DACA;0BAGLxD,QAAQyD,GAAG,CAAC,CAAChD,sBACZ,MAAC3D;wBAEC+E,OAAOpB,MAAMN,GAAG;wBAChB,8DAA8D;wBAC9D,mDAAmD;wBACnDmC,IAAI;4BAAEoB,IAAI,IAAIjD,MAAMkD,KAAK,GAAG;wBAAI;;4BAE/BpC,YAAYd;4BACZW,eAAewC,GAAG,CAACnD,MAAMN,GAAG,IAAI,OAAO;;uBAPnCM,MAAMN,GAAG;iBAWlB;0BACJ,MAACxD;gBAAI2F,IAAI;oBAAEC,IAAI;oBAAKsB,IAAI;gBAAE;;kCACxB,KAAC7G;wBACC8B,OACE,mEACA,2DACA,kEACA;kCAGF,cAAA,KAAClC;4BACCuG,MAAK;4BACLV,OAAOzB,gBAAgBT,MAAM,GAAG,cAAc;4BAC9C8C,OACErC,gBAAgBT,MAAM,GAClB,CAAC,iBAAiB,EAAES,gBAAgBT,MAAM,EAAE,GAC5C;;;oBAITS,gBAAgByC,GAAG,CAAC,CAACvB,qBACpB,KAAClF;4BAEC8B,OACE,mEACA;sCAGF,cAAA,KAAClC;gCACCuG,MAAK;gCACLX,SAAQ;gCACRF,IAAI;oCAAES,IAAI;oCAAGR,IAAI;gCAAI;gCACrBc,OAAOnB;gCACP4B,UAAU7B,YAAYC;;2BAXnBA;;;YAgBVnB,WAAWR,MAAM,iBAChB,KAAChE;gBAEC8C,iBAAiBA;gBACjB0E,UAAUjC;gBACVO,eAAeA;gBACf5D,QAAQ;oBAAEuF,QAAQjD,WAAW0C,GAAG,CAAC,CAAChD,QAAUA,MAAMwD,KAAK;gBAAE;0BAExD,CAACC,8BACA,KAAC3F,uCAA6B2F;eAP3B9B,WAWP,qEAAqE;YACrE,oEAAoE;YACpE,gEAAgE;0BAChE,KAACnF;gBAAWuF,SAAQ;gBAAUC,OAAM;0BACjC,8DACC;;;;AAKZ,GAAE;AAEF,eAAevD,sBAAqB"}

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

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { type StackProps } from '@mui/material';
+export interface InteractControlsProps extends StackProps {
+}
+declare const InteractControlsComponent: import("react").ForwardRefExoticComponent<Omit<InteractControlsProps, "ref"> & import("react").RefAttributes<any>>;
+export { InteractControlsComponent };
+export default InteractControlsComponent;

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

@@ -0,0 +1,74 @@
+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 { InteractionModeFlag } from "@aglyn/besigner";
+import { ICON_VARIANT_MODIFY_MODE_REARRANGE, ICON_VARIANT_MODIFY_MODE_SELECT } from "@aglyn/shared-data-enums";
+import { MdiIcon } from "@aglyn/shared-ui-jsx";
+import { Stack as MuiStack, ToggleButton as MuiToggleButton, ToggleButtonGroup as MuiToggleButtonGroup, Tooltip as MuiTooltip } from "@mui/material";
+import { forwardRef, useCallback } from "react";
+import useAglynBesignerFlag from "../hooks/use-aglyn-besigner-flag.js";
+const InteractControlsComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const {} = props, rest = _extends({}, props);
+    const [interactMode, setInteractMode] = useAglynBesignerFlag('interactMode');
+    const handleInteractModeClick = useCallback((event, value)=>{
+        setInteractMode(InteractionModeFlag[InteractionModeFlag[value]]);
+    }, [
+        setInteractMode
+    ]);
+    return /*#__PURE__*/ _jsx(MuiStack, _extends({
+        ref: ref,
+        direction: "row",
+        spacing: 1
+    }, rest, {
+        children: /*#__PURE__*/ _jsxs(MuiToggleButtonGroup, {
+            size: "small",
+            value: interactMode,
+            onChange: handleInteractModeClick,
+            exclusive: true,
+            children: [
+                /*#__PURE__*/ _jsx(MuiTooltip, {
+                    title: 'Direct selection',
+                    children: /*#__PURE__*/ _jsx(MuiToggleButton, {
+                        selected: interactMode === InteractionModeFlag.SELECT,
+                        value: InteractionModeFlag.SELECT,
+                        children: /*#__PURE__*/ _jsx(MdiIcon, {
+                            fontSize: "inherit",
+                            path: ICON_VARIANT_MODIFY_MODE_SELECT.path
+                        })
+                    })
+                }),
+                /*#__PURE__*/ _jsx(MuiTooltip, {
+                    title: 'Rearrange',
+                    children: /*#__PURE__*/ _jsx(MuiToggleButton, {
+                        selected: interactMode === InteractionModeFlag.REARRANGE,
+                        value: InteractionModeFlag.REARRANGE,
+                        children: /*#__PURE__*/ _jsx(MdiIcon, {
+                            fontSize: "inherit",
+                            path: ICON_VARIANT_MODIFY_MODE_REARRANGE.path
+                        })
+                    })
+                })
+            ]
+        })
+    }));
+});
+InteractControlsComponent.displayName = 'InteractControlsComponent';
+InteractControlsComponent.aglyn = true;
+export { InteractControlsComponent };
+export default InteractControlsComponent;
+
+//# sourceMappingURL=interact-controls.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/interact-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 { InteractionModeFlag } from '@aglyn/besigner'\nimport {\n  ICON_VARIANT_MODIFY_MODE_REARRANGE,\n  ICON_VARIANT_MODIFY_MODE_SELECT,\n} from '@aglyn/shared-data-enums'\nimport { MdiIcon } from '@aglyn/shared-ui-jsx'\nimport {\n  Stack as MuiStack,\n  type StackProps,\n  ToggleButton as MuiToggleButton,\n  ToggleButtonGroup as MuiToggleButtonGroup,\n  Tooltip as MuiTooltip,\n} from '@mui/material'\nimport { forwardRef, MouseEvent, useCallback } from 'react'\nimport useAglynBesignerFlag from '../hooks/use-aglyn-besigner-flag'\n\nexport interface InteractControlsProps extends StackProps {}\n\nconst InteractControlsComponent = forwardRef<any, InteractControlsProps>(\n  (props, ref) => {\n    const { ...rest } = props\n    const [interactMode, setInteractMode] = useAglynBesignerFlag('interactMode')\n    const handleInteractModeClick = useCallback(\n      (event: MouseEvent<HTMLElement>, value: any) => {\n        setInteractMode(InteractionModeFlag[InteractionModeFlag[value]])\n      },\n      [setInteractMode],\n    )\n\n    return (\n      <MuiStack ref={ref} direction=\"row\" spacing={1} {...rest}>\n        <MuiToggleButtonGroup\n          size=\"small\"\n          value={interactMode}\n          onChange={handleInteractModeClick}\n          exclusive\n        >\n          <MuiTooltip title={'Direct selection'}>\n            <MuiToggleButton\n              selected={interactMode === InteractionModeFlag.SELECT}\n              value={InteractionModeFlag.SELECT}\n            >\n              <MdiIcon\n                fontSize=\"inherit\"\n                path={ICON_VARIANT_MODIFY_MODE_SELECT.path}\n              />\n            </MuiToggleButton>\n          </MuiTooltip>\n          <MuiTooltip title={'Rearrange'}>\n            <MuiToggleButton\n              selected={interactMode === InteractionModeFlag.REARRANGE}\n              value={InteractionModeFlag.REARRANGE}\n            >\n              <MdiIcon\n                fontSize=\"inherit\"\n                path={ICON_VARIANT_MODIFY_MODE_REARRANGE.path}\n              />\n            </MuiToggleButton>\n          </MuiTooltip>\n        </MuiToggleButtonGroup>\n      </MuiStack>\n    )\n  },\n)\nInteractControlsComponent.displayName = 'InteractControlsComponent'\nInteractControlsComponent.aglyn = true\n\nexport { InteractControlsComponent }\nexport default InteractControlsComponent\n"],"names":["InteractionModeFlag","ICON_VARIANT_MODIFY_MODE_REARRANGE","ICON_VARIANT_MODIFY_MODE_SELECT","MdiIcon","Stack","MuiStack","ToggleButton","MuiToggleButton","ToggleButtonGroup","MuiToggleButtonGroup","Tooltip","MuiTooltip","forwardRef","useCallback","useAglynBesignerFlag","InteractControlsComponent","props","ref","rest","interactMode","setInteractMode","handleInteractModeClick","event","value","direction","spacing","size","onChange","exclusive","title","selected","SELECT","fontSize","path","REARRANGE","displayName","aglyn"],"mappings":";;AAAA;;;;;;;;;;;;;;;CAeC,GAED,SAASA,mBAAmB,QAAQ,kBAAiB;AACrD,SACEC,kCAAkC,EAClCC,+BAA+B,QAC1B,2BAA0B;AACjC,SAASC,OAAO,QAAQ,uBAAsB;AAC9C,SACEC,SAASC,QAAQ,EAEjBC,gBAAgBC,eAAe,EAC/BC,qBAAqBC,oBAAoB,EACzCC,WAAWC,UAAU,QAChB,gBAAe;AACtB,SAASC,UAAU,EAAcC,WAAW,QAAQ,QAAO;AAC3D,OAAOC,0BAA0B,sCAAkC;AAInE,MAAMC,0CAA4BH,WAChC,CAACI,OAAOC;IACN,MAAM,EAAW,GAAGD,OAATE,oBAASF;IACpB,MAAM,CAACG,cAAcC,gBAAgB,GAAGN,qBAAqB;IAC7D,MAAMO,0BAA0BR,YAC9B,CAACS,OAAgCC;QAC/BH,gBAAgBpB,mBAAmB,CAACA,mBAAmB,CAACuB,MAAM,CAAC;IACjE,GACA;QAACH;KAAgB;IAGnB,qBACE,KAACf;QAASY,KAAKA;QAAKO,WAAU;QAAMC,SAAS;OAAOP;kBAClD,cAAA,MAACT;YACCiB,MAAK;YACLH,OAAOJ;YACPQ,UAAUN;YACVO,SAAS;;8BAET,KAACjB;oBAAWkB,OAAO;8BACjB,cAAA,KAACtB;wBACCuB,UAAUX,iBAAiBnB,oBAAoB+B,MAAM;wBACrDR,OAAOvB,oBAAoB+B,MAAM;kCAEjC,cAAA,KAAC5B;4BACC6B,UAAS;4BACTC,MAAM/B,gCAAgC+B,IAAI;;;;8BAIhD,KAACtB;oBAAWkB,OAAO;8BACjB,cAAA,KAACtB;wBACCuB,UAAUX,iBAAiBnB,oBAAoBkC,SAAS;wBACxDX,OAAOvB,oBAAoBkC,SAAS;kCAEpC,cAAA,KAAC/B;4BACC6B,UAAS;4BACTC,MAAMhC,mCAAmCgC,IAAI;;;;;;;AAO3D;AAEFlB,0BAA0BoB,WAAW,GAAG;AACxCpB,0BAA0BqB,KAAK,GAAG;AAElC,SAASrB,yBAAyB,GAAE;AACpC,eAAeA,0BAAyB"}

package/src/lib/components/markdown-attribute-field.component.d.ts

@@ -0,0 +1,40 @@
+/** Mapper key for the attributes form (editor-internal, never persisted). */
+export declare const MARKDOWN_ATTRIBUTE_FIELD_COMPONENT = "aglyn-markdown-attribute-field";
+/**
+ * A markdown-lite attribute, edited with the WYSIWYG the console already
+ * ships (AGL-1616).
+ *
+ * The Markdown component's whole document is ONE `content` attribute, and it
+ * was a plain textarea: correcting the published Privacy Policy meant
+ * preparing a 13 KB paste of raw markdown-lite (AGL-1594). The same editor the
+ * blog and the marketplace listing editor use is now the field.
+ *
+ * ## Commit semantics — the part that can lose an author's work
+ *
+ * A besigner attribute commits on a 250 ms debounce, flushed when focus leaves
+ * the form and again on unmount (`useDebouncedCommit`, AGL-567). That is only
+ * safe while every edit has already reached react-final-form by the time a
+ * flush runs. `MarkdownVisualEditor` emits on every input event rather than on
+ * blur, so it does — and this wrapper must not undo that:
+ *
+ * - `input.onChange` is called straight from the editor's `onChange`, never
+ *   deferred to a blur of our own. The toolbar, the link popover and the
+ *   source/visual toggle all move focus (two of them into a portal outside the
+ *   `<form>`), so a blur-committed wrapper would strand everything typed since
+ *   the previous one — silently, with the canvas still showing the right text.
+ * - Nothing here re-derives the value. The editor re-parses its row model
+ *   whenever the incoming `value` differs from what it last emitted, which
+ *   resets the undo history and the caret; handing back anything but the
+ *   editor's own string would do that mid-sentence.
+ *
+ * The toolbar's image action reaches the host's media library through
+ * `useMarkdownMediaPicker` (AGL-1645) — the same `MediaPickerContext` this
+ * panel's own Browse button uses one field away. Opening it is a modal that
+ * takes focus, which is safe here for the reason above and no other: the value
+ * is already in the form before the dialog opens.
+ */
+export declare function MarkdownAttributeField(props: Record<string, unknown>): import("react").JSX.Element;
+export declare namespace MarkdownAttributeField {
+    var displayName: string;
+}
+export default MarkdownAttributeField;

package/src/lib/components/markdown-attribute-field.component.js

@@ -0,0 +1,103 @@
+/**
+ * @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 { MarkdownField } from "@aglyn/aglyn-markdown-editor";
+import { FormFieldGrid, useFieldApi } from "@aglyn/shared-ui-jsx-forms";
+import { Stack, Typography } from "@mui/material";
+import { useCallback } from "react";
+import { useMarkdownMediaPicker } from "../hooks/use-markdown-media-picker.js";
+/** Mapper key for the attributes form (editor-internal, never persisted). */ export const MARKDOWN_ATTRIBUTE_FIELD_COMPONENT = 'aglyn-markdown-attribute-field';
+/**
+ * A markdown-lite attribute, edited with the WYSIWYG the console already
+ * ships (AGL-1616).
+ *
+ * The Markdown component's whole document is ONE `content` attribute, and it
+ * was a plain textarea: correcting the published Privacy Policy meant
+ * preparing a 13 KB paste of raw markdown-lite (AGL-1594). The same editor the
+ * blog and the marketplace listing editor use is now the field.
+ *
+ * ## Commit semantics — the part that can lose an author's work
+ *
+ * A besigner attribute commits on a 250 ms debounce, flushed when focus leaves
+ * the form and again on unmount (`useDebouncedCommit`, AGL-567). That is only
+ * safe while every edit has already reached react-final-form by the time a
+ * flush runs. `MarkdownVisualEditor` emits on every input event rather than on
+ * blur, so it does — and this wrapper must not undo that:
+ *
+ * - `input.onChange` is called straight from the editor's `onChange`, never
+ *   deferred to a blur of our own. The toolbar, the link popover and the
+ *   source/visual toggle all move focus (two of them into a portal outside the
+ *   `<form>`), so a blur-committed wrapper would strand everything typed since
+ *   the previous one — silently, with the canvas still showing the right text.
+ * - Nothing here re-derives the value. The editor re-parses its row model
+ *   whenever the incoming `value` differs from what it last emitted, which
+ *   resets the undo history and the caret; handing back anything but the
+ *   editor's own string would do that mid-sentence.
+ *
+ * The toolbar's image action reaches the host's media library through
+ * `useMarkdownMediaPicker` (AGL-1645) — the same `MediaPickerContext` this
+ * panel's own Browse button uses one field away. Opening it is a modal that
+ * takes focus, which is safe here for the reason above and no other: the value
+ * is already in the form before the dialog opens.
+ */ export function MarkdownAttributeField(props) {
+    const { input, label, description, isDisabled, help, FormFieldGridProps } = useFieldApi(props);
+    const { editorRef, onPickImageFromMedia } = useMarkdownMediaPicker();
+    const value = typeof input.value === 'string' ? input.value : '';
+    const handleChange = useCallback((next)=>{
+        input.onChange(next);
+    }, [
+        input
+    ]);
+    // Inside the shared grid wrapper, so the corner controls every field has —
+    // the help tip, and the `{}` that binds it to a property — reach this one.
+    return /*#__PURE__*/ _jsx(FormFieldGrid, _extends({
+        help: help
+    }, FormFieldGridProps != null ? FormFieldGridProps : {}, {
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 0.5,
+            sx: {
+                width: '100%'
+            },
+            "data-testid": "markdown-attribute-field",
+            children: [
+                /*#__PURE__*/ _jsx(MarkdownField, {
+                    label: String(label != null ? label : 'Content'),
+                    value: value,
+                    onChange: handleChange,
+                    editorRef: editorRef,
+                    onPickImageFromMedia: onPickImageFromMedia,
+                    minHeight: 220
+                }),
+                description ? /*#__PURE__*/ _jsx(Typography, {
+                    variant: "caption",
+                    color: "text.secondary",
+                    children: String(description)
+                }) : null,
+                isDisabled ? /*#__PURE__*/ _jsx(Typography, {
+                    variant: "caption",
+                    color: "text.secondary",
+                    children: 'This attribute is read-only here.'
+                }) : null
+            ]
+        })
+    }));
+}
+MarkdownAttributeField.displayName = 'MarkdownAttributeField';
+export default MarkdownAttributeField;
+
+//# sourceMappingURL=markdown-attribute-field.component.js.map

package/src/lib/components/markdown-attribute-field.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/markdown-attribute-field.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 { MarkdownField } from '@aglyn/aglyn-markdown-editor'\nimport {\n  FormFieldGrid,\n  type FormFieldGridProps,\n  useFieldApi,\n} from '@aglyn/shared-ui-jsx-forms'\nimport { Stack, Typography } from '@mui/material'\nimport { useCallback } from 'react'\nimport { useMarkdownMediaPicker } from '../hooks/use-markdown-media-picker'\n\n/** Mapper key for the attributes form (editor-internal, never persisted). */\nexport const MARKDOWN_ATTRIBUTE_FIELD_COMPONENT =\n  'aglyn-markdown-attribute-field'\n\n/**\n * A markdown-lite attribute, edited with the WYSIWYG the console already\n * ships (AGL-1616).\n *\n * The Markdown component's whole document is ONE `content` attribute, and it\n * was a plain textarea: correcting the published Privacy Policy meant\n * preparing a 13 KB paste of raw markdown-lite (AGL-1594). The same editor the\n * blog and the marketplace listing editor use is now the field.\n *\n * ## Commit semantics — the part that can lose an author's work\n *\n * A besigner attribute commits on a 250 ms debounce, flushed when focus leaves\n * the form and again on unmount (`useDebouncedCommit`, AGL-567). That is only\n * safe while every edit has already reached react-final-form by the time a\n * flush runs. `MarkdownVisualEditor` emits on every input event rather than on\n * blur, so it does — and this wrapper must not undo that:\n *\n * - `input.onChange` is called straight from the editor's `onChange`, never\n *   deferred to a blur of our own. The toolbar, the link popover and the\n *   source/visual toggle all move focus (two of them into a portal outside the\n *   `<form>`), so a blur-committed wrapper would strand everything typed since\n *   the previous one — silently, with the canvas still showing the right text.\n * - Nothing here re-derives the value. The editor re-parses its row model\n *   whenever the incoming `value` differs from what it last emitted, which\n *   resets the undo history and the caret; handing back anything but the\n *   editor's own string would do that mid-sentence.\n *\n * The toolbar's image action reaches the host's media library through\n * `useMarkdownMediaPicker` (AGL-1645) — the same `MediaPickerContext` this\n * panel's own Browse button uses one field away. Opening it is a modal that\n * takes focus, which is safe here for the reason above and no other: the value\n * is already in the form before the dialog opens.\n */\nexport function MarkdownAttributeField(props: Record<string, unknown>) {\n  const { input, label, description, isDisabled, help, FormFieldGridProps } =\n    useFieldApi(props as never)\n  const { editorRef, onPickImageFromMedia } = useMarkdownMediaPicker()\n\n  const value = typeof input.value === 'string' ? input.value : ''\n\n  const handleChange = useCallback(\n    (next: string) => {\n      input.onChange(next)\n    },\n    [input],\n  )\n\n  // Inside the shared grid wrapper, so the corner controls every field has —\n  // the help tip, and the `{}` that binds it to a property — reach this one.\n  return (\n    <FormFieldGrid\n      help={help as FormFieldGridProps['help']}\n      {...((FormFieldGridProps as FormFieldGridProps | undefined) ?? {})}\n    >\n    <Stack spacing={0.5} sx={{ width: '100%' }} data-testid=\"markdown-attribute-field\">\n      <MarkdownField\n        label={String(label ?? 'Content')}\n        value={value}\n        onChange={handleChange}\n        editorRef={editorRef}\n        onPickImageFromMedia={onPickImageFromMedia}\n        minHeight={220}\n      />\n      {description ? (\n        <Typography variant=\"caption\" color=\"text.secondary\">\n          {String(description)}\n        </Typography>\n      ) : null}\n      {isDisabled ? (\n        <Typography variant=\"caption\" color=\"text.secondary\">\n          {'This attribute is read-only here.'}\n        </Typography>\n      ) : null}\n    </Stack>\n    </FormFieldGrid>\n  )\n}\n\nMarkdownAttributeField.displayName = 'MarkdownAttributeField'\n\nexport default MarkdownAttributeField\n"],"names":["MarkdownField","FormFieldGrid","useFieldApi","Stack","Typography","useCallback","useMarkdownMediaPicker","MARKDOWN_ATTRIBUTE_FIELD_COMPONENT","MarkdownAttributeField","props","input","label","description","isDisabled","help","FormFieldGridProps","editorRef","onPickImageFromMedia","value","handleChange","next","onChange","spacing","sx","width","data-testid","String","minHeight","variant","color","displayName"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;;AAEA,SAASA,aAAa,QAAQ,+BAA8B;AAC5D,SACEC,aAAa,EAEbC,WAAW,QACN,6BAA4B;AACnC,SAASC,KAAK,EAAEC,UAAU,QAAQ,gBAAe;AACjD,SAASC,WAAW,QAAQ,QAAO;AACnC,SAASC,sBAAsB,QAAQ,wCAAoC;AAE3E,2EAA2E,GAC3E,OAAO,MAAMC,qCACX,iCAAgC;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCC,GACD,OAAO,SAASC,uBAAuBC,KAA8B;IACnE,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,WAAW,EAAEC,UAAU,EAAEC,IAAI,EAAEC,kBAAkB,EAAE,GACvEb,YAAYO;IACd,MAAM,EAAEO,SAAS,EAAEC,oBAAoB,EAAE,GAAGX;IAE5C,MAAMY,QAAQ,OAAOR,MAAMQ,KAAK,KAAK,WAAWR,MAAMQ,KAAK,GAAG;IAE9D,MAAMC,eAAed,YACnB,CAACe;QACCV,MAAMW,QAAQ,CAACD;IACjB,GACA;QAACV;KAAM;IAGT,2EAA2E;IAC3E,2EAA2E;IAC3E,qBACE,KAACT;QACCa,MAAMA;OACAC,6BAAAA,qBAAyD,CAAC;kBAElE,cAAA,MAACZ;YAAMmB,SAAS;YAAKC,IAAI;gBAAEC,OAAO;YAAO;YAAGC,eAAY;;8BACtD,KAACzB;oBACCW,OAAOe,OAAOf,gBAAAA,QAAS;oBACvBO,OAAOA;oBACPG,UAAUF;oBACVH,WAAWA;oBACXC,sBAAsBA;oBACtBU,WAAW;;gBAEZf,4BACC,KAACR;oBAAWwB,SAAQ;oBAAUC,OAAM;8BACjCH,OAAOd;qBAER;gBACHC,2BACC,KAACT;oBAAWwB,SAAQ;oBAAUC,OAAM;8BACjC;qBAED;;;;AAIV;AAEArB,uBAAuBsB,WAAW,GAAG;AAErC,eAAetB,uBAAsB"}