@aglyn/besigner-ui 1.0.0-beta.172 → 1.0.0-beta.174

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aglyn/besigner-ui",
-  "version": "1.0.0-beta.172",
+  "version": "1.0.0-beta.174",
   "license": "Apache-2.0",
   "homepage": "https://aglyn.com",
   "repository": {
@@ -25,22 +25,22 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@aglyn/aglyn": "1.0.0-beta.172",
-    "@aglyn/aglyn-markdown-editor": "1.0.0-beta.172",
-    "@aglyn/aglyn-node-renderer": "1.0.0-beta.172",
-    "@aglyn/besigner": "1.0.0-beta.172",
-    "@aglyn/shared-data-enums": "1.0.0-beta.172",
-    "@aglyn/shared-data-mdi": "1.0.0-beta.172",
-    "@aglyn/shared-data-types": "1.0.0-beta.172",
-    "@aglyn/shared-svg-icons": "1.0.0-beta.172",
-    "@aglyn/shared-ui-json-editor": "1.0.0-beta.172",
-    "@aglyn/shared-ui-jsx": "1.0.0-beta.172",
-    "@aglyn/shared-ui-jsx-forms": "1.0.0-beta.172",
-    "@aglyn/shared-ui-snackstack": "1.0.0-beta.172",
-    "@aglyn/shared-ui-theme": "1.0.0-beta.172",
-    "@aglyn/shared-util-dom": "1.0.0-beta.172",
-    "@aglyn/shared-util-tools": "1.0.0-beta.172",
-    "@aglyn/shared-util-vendor": "1.0.0-beta.172",
+    "@aglyn/aglyn": "1.0.0-beta.174",
+    "@aglyn/aglyn-markdown-editor": "1.0.0-beta.174",
+    "@aglyn/aglyn-node-renderer": "1.0.0-beta.174",
+    "@aglyn/besigner": "1.0.0-beta.174",
+    "@aglyn/shared-data-enums": "1.0.0-beta.174",
+    "@aglyn/shared-data-mdi": "1.0.0-beta.174",
+    "@aglyn/shared-data-types": "1.0.0-beta.174",
+    "@aglyn/shared-svg-icons": "1.0.0-beta.174",
+    "@aglyn/shared-ui-json-editor": "1.0.0-beta.174",
+    "@aglyn/shared-ui-jsx": "1.0.0-beta.174",
+    "@aglyn/shared-ui-jsx-forms": "1.0.0-beta.174",
+    "@aglyn/shared-ui-snackstack": "1.0.0-beta.174",
+    "@aglyn/shared-ui-theme": "1.0.0-beta.174",
+    "@aglyn/shared-util-dom": "1.0.0-beta.174",
+    "@aglyn/shared-util-tools": "1.0.0-beta.174",
+    "@aglyn/shared-util-vendor": "1.0.0-beta.174",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/utilities": "^3.2.2",
     "@react-aria/utils": "^3.34.1",

package/src/besigner.d.ts

@@ -43,6 +43,8 @@ export * from './lib/contexts/element-drawer-context';
 export * from './lib/contexts/inspector-extras-context';
 export * from './lib/contexts/interactions-context';
 export * from './lib/contexts/layout-chrome-context';
+export * from './lib/contexts/layout-style-selection';
+export * from './lib/components/layout-style-picker.component';
 export * from './lib/contexts/media-asset-facts-context';
 export * from './lib/contexts/media-picker-context';
 export * from './lib/contexts/rendered-canvas-elements';

package/src/besigner.js

@@ -42,6 +42,9 @@ export * from "./lib/contexts/element-drawer-context.js";
 export * from "./lib/contexts/inspector-extras-context.js";
 export * from "./lib/contexts/interactions-context.js";
 export * from "./lib/contexts/layout-chrome-context.js";
+// A screen restyling its shared layout's elements for itself (AGL-3286).
+export * from "./lib/contexts/layout-style-selection.js";
+export * from "./lib/components/layout-style-picker.component.js";
 export * from "./lib/contexts/media-asset-facts-context.js";
 export * from "./lib/contexts/media-picker-context.js";
 export * from "./lib/contexts/rendered-canvas-elements.js";

package/src/besigner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../libs/besigner/feature/designer/src/besigner.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2023 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport * from './lib/drafts/besigner-draft-store'\nexport * from './lib/drafts/besigner-server-draft'\n\nexport * from './lib/constants/sample-data'\nexport * from './lib/constants/shared'\n\nexport * from './lib/utils/docs-help'\nexport * from './lib/utils/publish-failure-message'\n\nexport * from './lib/hooks/use-add-element-drawer-callback'\nexport * from './lib/hooks/use-aglyn-besigner-flag'\nexport * from './lib/hooks/use-aglyn-besigner-panel'\nexport * from './lib/hooks/use-aglyn-besigner-panel-value'\nexport * from './lib/hooks/use-besigner-app-context'\nexport * from './lib/hooks/use-besigner-document'\nexport * from './lib/hooks/use-besigner-draft'\nexport * from './lib/hooks/use-component-propagation-notice'\nexport * from './lib/hooks/use-debounced-commit'\nexport * from './lib/hooks/use-delete-element-callback'\nexport * from './lib/hooks/use-document-repair-callbacks'\nexport * from './lib/hooks/use-insert-token-options'\nexport * from './lib/hooks/use-leaf-drag'\nexport * from './lib/hooks/use-leaf-drop'\nexport * from './lib/hooks/use-media-asset-facts-overlay'\n\nexport * from './lib/contexts/toolbar-extras-context'\nexport * from './lib/contexts/binding-picker-context'\nexport * from './lib/contexts/component-promotion-context'\nexport * from './lib/contexts/components-drawer-context.provider'\nexport * from './lib/contexts/element-drawer-context'\nexport * from './lib/contexts/inspector-extras-context'\nexport * from './lib/contexts/interactions-context'\nexport * from './lib/contexts/layout-chrome-context'\nexport * from './lib/contexts/media-asset-facts-context'\nexport * from './lib/contexts/media-picker-context'\nexport * from './lib/contexts/rendered-canvas-elements'\n\nexport * from './lib/components/accordion-list.component'\nexport * from './lib/components/add-controls.component'\nexport * from './lib/components/app-bar-breadcrumbs.component'\nexport * from './lib/components/app-bar-primary.component'\nexport * from './lib/components/app-bar-secondary.component'\nexport * from './lib/components/aside-panel.component'\nexport * from './lib/components/besigner-dnd-context.component'\nexport * from './lib/components/besigner-conflict-alert.component'\nexport * from './lib/components/besigner-draft-alert.component'\nexport * from './lib/components/besigner-root-provider.component'\nexport * from './lib/components/closeable-drawer.component'\nexport * from './lib/components/component-accordion-list'\nexport * from './lib/components/component-icon.component'\nexport * from './lib/components/components-grid-list.component'\nexport * from './lib/components/device-preview-controls.component'\nexport * from './lib/components/element-props-form.component'\nexport * from './lib/components/element-styles-form-template.component'\nexport * from './lib/components/element-styles-form.component'\nexport * from './lib/components/history-controls.component'\nexport * from './lib/components/interact-controls.component'\nexport * from './lib/components/node-card'\nexport * from './lib/components/node-context-menu'\nexport * from './lib/components/node-leaf'\nexport * from './lib/components/node-outline'\nexport * from './lib/components/node-overlay'\nexport * from './lib/components/node-quick-actions'\nexport * from './lib/components/node-tree-view'\nexport * from './lib/components/panel-controls.component'\nexport * from './lib/components/properties-dialog.component'\nexport * from './lib/components/property-values-form.component'\nexport * from './lib/components/scheme-preview-controls.component'\nexport * from './lib/components/screen-link-field.component'\nexport * from './lib/components/token-pill.component'\nexport * from './lib/components/token-text-field.component'\nexport * from './lib/components/viewport-canvas.component'\nexport * from './lib/components/viewport-frame.component'\nexport * from './lib/components/viewport-root.component'\nexport * from './lib/components/viewport-zoom-controls'\nexport * from './lib/components/workspace-editor.component'\nexport * from './lib/components/workspace-panel.component'\n"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED,cAAc,uCAAmC;AACjD,cAAc,wCAAoC;AAElD,cAAc,iCAA6B;AAC3C,cAAc,4BAAwB;AAEtC,cAAc,2BAAuB;AACrC,cAAc,yCAAqC;AAEnD,cAAc,iDAA6C;AAC3D,cAAc,yCAAqC;AACnD,cAAc,0CAAsC;AACpD,cAAc,gDAA4C;AAC1D,cAAc,0CAAsC;AACpD,cAAc,uCAAmC;AACjD,cAAc,oCAAgC;AAC9C,cAAc,kDAA8C;AAC5D,cAAc,sCAAkC;AAChD,cAAc,6CAAyC;AACvD,cAAc,+CAA2C;AACzD,cAAc,0CAAsC;AACpD,cAAc,+BAA2B;AACzC,cAAc,+BAA2B;AACzC,cAAc,+CAA2C;AAEzD,cAAc,2CAAuC;AACrD,cAAc,2CAAuC;AACrD,cAAc,gDAA4C;AAC1D,cAAc,uDAAmD;AACjE,cAAc,2CAAuC;AACrD,cAAc,6CAAyC;AACvD,cAAc,yCAAqC;AACnD,cAAc,0CAAsC;AACpD,cAAc,8CAA0C;AACxD,cAAc,yCAAqC;AACnD,cAAc,6CAAyC;AAEvD,cAAc,+CAA2C;AACzD,cAAc,6CAAyC;AACvD,cAAc,oDAAgD;AAC9D,cAAc,gDAA4C;AAC1D,cAAc,kDAA8C;AAC5D,cAAc,4CAAwC;AACtD,cAAc,qDAAiD;AAC/D,cAAc,wDAAoD;AAClE,cAAc,qDAAiD;AAC/D,cAAc,uDAAmD;AACjE,cAAc,iDAA6C;AAC3D,cAAc,+CAA2C;AACzD,cAAc,+CAA2C;AACzD,cAAc,qDAAiD;AAC/D,cAAc,wDAAoD;AAClE,cAAc,mDAA+C;AAC7D,cAAc,6DAAyD;AACvE,cAAc,oDAAgD;AAC9D,cAAc,iDAA6C;AAC3D,cAAc,kDAA8C;AAC5D,cAAc,gCAA4B;AAC1C,cAAc,wCAAoC;AAClD,cAAc,gCAA4B;AAC1C,cAAc,mCAA+B;AAC7C,cAAc,mCAA+B;AAC7C,cAAc,yCAAqC;AACnD,cAAc,qCAAiC;AAC/C,cAAc,+CAA2C;AACzD,cAAc,kDAA8C;AAC5D,cAAc,qDAAiD;AAC/D,cAAc,wDAAoD;AAClE,cAAc,kDAA8C;AAC5D,cAAc,2CAAuC;AACrD,cAAc,iDAA6C;AAC3D,cAAc,gDAA4C;AAC1D,cAAc,+CAA2C;AACzD,cAAc,8CAA0C;AACxD,cAAc,6CAAyC;AACvD,cAAc,iDAA6C;AAC3D,cAAc,gDAA4C"}
+{"version":3,"sources":["../../../../../../libs/besigner/feature/designer/src/besigner.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2023 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport * from './lib/drafts/besigner-draft-store'\nexport * from './lib/drafts/besigner-server-draft'\n\nexport * from './lib/constants/sample-data'\nexport * from './lib/constants/shared'\n\nexport * from './lib/utils/docs-help'\nexport * from './lib/utils/publish-failure-message'\n\nexport * from './lib/hooks/use-add-element-drawer-callback'\nexport * from './lib/hooks/use-aglyn-besigner-flag'\nexport * from './lib/hooks/use-aglyn-besigner-panel'\nexport * from './lib/hooks/use-aglyn-besigner-panel-value'\nexport * from './lib/hooks/use-besigner-app-context'\nexport * from './lib/hooks/use-besigner-document'\nexport * from './lib/hooks/use-besigner-draft'\nexport * from './lib/hooks/use-component-propagation-notice'\nexport * from './lib/hooks/use-debounced-commit'\nexport * from './lib/hooks/use-delete-element-callback'\nexport * from './lib/hooks/use-document-repair-callbacks'\nexport * from './lib/hooks/use-insert-token-options'\nexport * from './lib/hooks/use-leaf-drag'\nexport * from './lib/hooks/use-leaf-drop'\nexport * from './lib/hooks/use-media-asset-facts-overlay'\n\nexport * from './lib/contexts/toolbar-extras-context'\nexport * from './lib/contexts/binding-picker-context'\nexport * from './lib/contexts/component-promotion-context'\nexport * from './lib/contexts/components-drawer-context.provider'\nexport * from './lib/contexts/element-drawer-context'\nexport * from './lib/contexts/inspector-extras-context'\nexport * from './lib/contexts/interactions-context'\nexport * from './lib/contexts/layout-chrome-context'\n// A screen restyling its shared layout's elements for itself (AGL-3286).\nexport * from './lib/contexts/layout-style-selection'\nexport * from './lib/components/layout-style-picker.component'\nexport * from './lib/contexts/media-asset-facts-context'\nexport * from './lib/contexts/media-picker-context'\nexport * from './lib/contexts/rendered-canvas-elements'\n\nexport * from './lib/components/accordion-list.component'\nexport * from './lib/components/add-controls.component'\nexport * from './lib/components/app-bar-breadcrumbs.component'\nexport * from './lib/components/app-bar-primary.component'\nexport * from './lib/components/app-bar-secondary.component'\nexport * from './lib/components/aside-panel.component'\nexport * from './lib/components/besigner-dnd-context.component'\nexport * from './lib/components/besigner-conflict-alert.component'\nexport * from './lib/components/besigner-draft-alert.component'\nexport * from './lib/components/besigner-root-provider.component'\nexport * from './lib/components/closeable-drawer.component'\nexport * from './lib/components/component-accordion-list'\nexport * from './lib/components/component-icon.component'\nexport * from './lib/components/components-grid-list.component'\nexport * from './lib/components/device-preview-controls.component'\nexport * from './lib/components/element-props-form.component'\nexport * from './lib/components/element-styles-form-template.component'\nexport * from './lib/components/element-styles-form.component'\nexport * from './lib/components/history-controls.component'\nexport * from './lib/components/interact-controls.component'\nexport * from './lib/components/node-card'\nexport * from './lib/components/node-context-menu'\nexport * from './lib/components/node-leaf'\nexport * from './lib/components/node-outline'\nexport * from './lib/components/node-overlay'\nexport * from './lib/components/node-quick-actions'\nexport * from './lib/components/node-tree-view'\nexport * from './lib/components/panel-controls.component'\nexport * from './lib/components/properties-dialog.component'\nexport * from './lib/components/property-values-form.component'\nexport * from './lib/components/scheme-preview-controls.component'\nexport * from './lib/components/screen-link-field.component'\nexport * from './lib/components/token-pill.component'\nexport * from './lib/components/token-text-field.component'\nexport * from './lib/components/viewport-canvas.component'\nexport * from './lib/components/viewport-frame.component'\nexport * from './lib/components/viewport-root.component'\nexport * from './lib/components/viewport-zoom-controls'\nexport * from './lib/components/workspace-editor.component'\nexport * from './lib/components/workspace-panel.component'\n"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED,cAAc,uCAAmC;AACjD,cAAc,wCAAoC;AAElD,cAAc,iCAA6B;AAC3C,cAAc,4BAAwB;AAEtC,cAAc,2BAAuB;AACrC,cAAc,yCAAqC;AAEnD,cAAc,iDAA6C;AAC3D,cAAc,yCAAqC;AACnD,cAAc,0CAAsC;AACpD,cAAc,gDAA4C;AAC1D,cAAc,0CAAsC;AACpD,cAAc,uCAAmC;AACjD,cAAc,oCAAgC;AAC9C,cAAc,kDAA8C;AAC5D,cAAc,sCAAkC;AAChD,cAAc,6CAAyC;AACvD,cAAc,+CAA2C;AACzD,cAAc,0CAAsC;AACpD,cAAc,+BAA2B;AACzC,cAAc,+BAA2B;AACzC,cAAc,+CAA2C;AAEzD,cAAc,2CAAuC;AACrD,cAAc,2CAAuC;AACrD,cAAc,gDAA4C;AAC1D,cAAc,uDAAmD;AACjE,cAAc,2CAAuC;AACrD,cAAc,6CAAyC;AACvD,cAAc,yCAAqC;AACnD,cAAc,0CAAsC;AACpD,yEAAyE;AACzE,cAAc,2CAAuC;AACrD,cAAc,oDAAgD;AAC9D,cAAc,8CAA0C;AACxD,cAAc,yCAAqC;AACnD,cAAc,6CAAyC;AAEvD,cAAc,+CAA2C;AACzD,cAAc,6CAAyC;AACvD,cAAc,oDAAgD;AAC9D,cAAc,gDAA4C;AAC1D,cAAc,kDAA8C;AAC5D,cAAc,4CAAwC;AACtD,cAAc,qDAAiD;AAC/D,cAAc,wDAAoD;AAClE,cAAc,qDAAiD;AAC/D,cAAc,uDAAmD;AACjE,cAAc,iDAA6C;AAC3D,cAAc,+CAA2C;AACzD,cAAc,+CAA2C;AACzD,cAAc,qDAAiD;AAC/D,cAAc,wDAAoD;AAClE,cAAc,mDAA+C;AAC7D,cAAc,6DAAyD;AACvE,cAAc,oDAAgD;AAC9D,cAAc,iDAA6C;AAC3D,cAAc,kDAA8C;AAC5D,cAAc,gCAA4B;AAC1C,cAAc,wCAAoC;AAClD,cAAc,gCAA4B;AAC1C,cAAc,mCAA+B;AAC7C,cAAc,mCAA+B;AAC7C,cAAc,yCAAqC;AACnD,cAAc,qCAAiC;AAC/C,cAAc,+CAA2C;AACzD,cAAc,kDAA8C;AAC5D,cAAc,qDAAiD;AAC/D,cAAc,wDAAoD;AAClE,cAAc,kDAA8C;AAC5D,cAAc,2CAAuC;AACrD,cAAc,iDAA6C;AAC3D,cAAc,gDAA4C;AAC1D,cAAc,+CAA2C;AACzD,cAAc,8CAA0C;AACxD,cAAc,6CAAyC;AACvD,cAAc,iDAA6C;AAC3D,cAAc,gDAA4C"}

package/src/lib/components/aside-panel.component.js

@@ -16,7 +16,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */ import { canvas } from "@aglyn/aglyn";
+ */ import { canvas, NODE_ROOT_ID } from "@aglyn/aglyn";
 import * as Besigner from "@aglyn/besigner";
 import { BesignerPanelTabFlag } from "@aglyn/besigner";
 import { ICON_VARIANT_ELEMENT, ICON_VARIANT_ELEMENT_BROWSE, ICON_VARIANT_ELEMENT_INTERACTIONS, ICON_VARIANT_ELEMENT_PROPERTIES, ICON_VARIANT_ELEMENT_STYLES, ICON_VARIANT_ELEMENT_TREE_VIEW, ICON_VARIANT_MODIFY_ADD } from "@aglyn/shared-data-enums";
@@ -38,6 +38,7 @@ import NodeTreeView from "./node-tree-view.js";
 import SiteThemeColorTokensProvider from "./site-theme-color-tokens-provider.component.js";
 import { usePublishActiveHostTheme } from "../utils/active-host-theme.js";
 import { besignerInspected } from "../contexts/inspected-selection.js";
+import { layoutStyleSelection } from "../contexts/layout-style-selection.js";
 import { inspectorExtrasFor, useBesignerInspectorExtras } from "../contexts/inspector-extras-context.js";
 import { besignerDocsUrl } from "../utils/docs-help.js";
 import WorkspacePanelComponent from "./workspace-panel.component.js";
@@ -137,11 +138,73 @@ const emptyView = /*#__PURE__*/ _jsx(Stack, {
     });
 });
 SelectedNodeHeader.displayName = 'SelectedNodeHeader';
-function withLastSelectedNode(WrappedComponent) {
+/**
+ * The panel while a shared-layout element is the target (AGL-3286): named in
+ * the header like any selection, and marked as the layout's, styles only.
+ */ const LayoutElementHeader = ({ selection })=>/*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 1,
+        sx: {
+            alignItems: 'center',
+            px: 2,
+            py: 1,
+            borderBottom: 1,
+            borderColor: 'divider'
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "subtitle2",
+                noWrap: true,
+                sx: {
+                    flex: 1,
+                    minWidth: 0
+                },
+                children: `${selection.label} · Layout`
+            }),
+            /*#__PURE__*/ _jsx(Chip, {
+                size: "small",
+                variant: "outlined",
+                color: "info",
+                label: "STYLES ONLY",
+                sx: {
+                    height: 18,
+                    '& .MuiChip-label': {
+                        px: 0.75,
+                        fontSize: 10
+                    }
+                }
+            })
+        ]
+    });
+/** What the Attributes and Interactions tabs say about a layout element. */ const LayoutElementNote = ({ selection })=>/*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1.5,
+        sx: {
+            p: 2
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: `This element belongs to the shared layout${selection.layoutName ? ` "${selection.layoutName}"` : ''}. Its content is edited in the layout itself — use Edit layout above ` + 'the canvas. On this page you can change how it looks on the Styles tab.'
+            }),
+            /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                variant: "outlined",
+                onClick: ()=>layoutStyleSelection.clear(),
+                children: 'Back to page elements'
+            })
+        ]
+    });
+function withLastSelectedNode(WrappedComponent, /**
+   * What this tab shows while a layout element is the target (AGL-3286):
+   * `styles` hands the wrapped Styles form the screen root and the target;
+   * `note` says where the element's content is edited.
+   */ layoutMode = 'note') {
     const displayName = getDisplayName(WrappedComponent);
     const WithLastSelectedNode = observer((props)=>{
         var _canvas_getNode;
         const {} = props, rest = _extends({}, props);
+        const layoutTarget = layoutStyleSelection.current;
         const selected = Besigner.focus.getLastSelected();
         /**
      * The LIVE node for that selection, re-resolved by id every render
@@ -166,6 +229,25 @@ function withLastSelectedNode(WrappedComponent) {
      * it) falls back to the stored object, which is exactly today's behaviour
      * for that case — there is no live node to prefer.
      */ const lastSelected = selected ? (_canvas_getNode = canvas.getNode(selected.$id)) != null ? _canvas_getNode : selected : selected;
+        if (layoutTarget) {
+            // The page's layout overrides are kept on the screen root, so that is
+            // the node the Styles form is handed; the target says which slice.
+            const root = canvas.getNode(NODE_ROOT_ID);
+            return /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(LayoutElementHeader, {
+                        selection: layoutTarget
+                    }),
+                    layoutMode === 'styles' && root ? /*#__PURE__*/ _jsx(WrappedComponent, _extends({
+                        node: root
+                    }, {
+                        layoutTarget
+                    }, rest)) : /*#__PURE__*/ _jsx(LayoutElementNote, {
+                        selection: layoutTarget
+                    })
+                ]
+            });
+        }
         return /*#__PURE__*/ _jsx(_Fragment, {
             children: !lastSelected ? emptyView : /*#__PURE__*/ _jsxs(_Fragment, {
                 children: [
@@ -328,7 +410,7 @@ const panelTabs = {
                     label: 'Styles'
                 },
                 panel: {
-                    Component: withLastSelectedNode(ElementStylesForm)
+                    Component: withLastSelectedNode(ElementStylesForm, 'styles')
                 }
             },
             /*

package/src/lib/components/aside-panel.component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/aside-panel.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { canvas } from '@aglyn/aglyn'\nimport * as Besigner from '@aglyn/besigner'\nimport {\n  type BesignerPanelKey,\n  BesignerPanelTabFlag,\n} from '@aglyn/besigner'\nimport {\n  ICON_VARIANT_ELEMENT,\n  ICON_VARIANT_ELEMENT_BROWSE,\n  ICON_VARIANT_ELEMENT_INTERACTIONS,\n  ICON_VARIANT_ELEMENT_PROPERTIES,\n  ICON_VARIANT_ELEMENT_STYLES,\n  ICON_VARIANT_ELEMENT_TREE_VIEW,\n  ICON_VARIANT_MODIFY_ADD,\n} from '@aglyn/shared-data-enums'\nimport { HelpTip, MdiIcon } from '@aglyn/shared-ui-jsx'\nimport { mergeSxProps, styled } from '@aglyn/shared-ui-theme'\nimport {\n  getDisplayName,\n  numberFromHexadecimal,\n  numberToHexadecimal,\n} from '@aglyn/shared-util-tools'\nimport { hoistNonReactStatics } from '@aglyn/shared-util-vendor'\nimport {\n  TabContext as MuiTabContext,\n  TabList as MuiTabList,\n  TabPanel as MuiTabPanel,\n  type TabPanelProps as MuiTabPanelProps,\n} from '@mui/lab'\nimport {\n  AppBar as MuiAppBar,\n  Box,\n  Button,\n  Chip,\n  Stack,\n  Tab as MuiTab,\n  Typography,\n} from '@mui/material'\nimport { observer } from 'mobx-react-lite'\nimport {\n  type ComponentType,\n  forwardRef,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react'\nimport useAddElementDrawerCallback from '../hooks/use-add-element-drawer-callback'\nimport useAglynBesignerPanel from '../hooks/use-aglyn-besigner-panel'\nimport AccordionListComponent from './accordion-list.component'\nimport ElementInteractionsForm from './element-interactions-form.component'\nimport ComponentAccordionList from './component-accordion-list'\nimport ElementPropsForm from './element-props-form.component'\nimport ElementStylesForm from './element-styles-form.component'\nimport NodeTreeView, { type NodeTreeViewProps } from './node-tree-view'\nimport SiteThemeColorTokensProvider from './site-theme-color-tokens-provider.component'\nimport { usePublishActiveHostTheme } from '../utils/active-host-theme'\nimport { besignerInspected } from '../contexts/inspected-selection'\nimport {\n  inspectorExtrasFor,\n  useBesignerInspectorExtras,\n} from '../contexts/inspector-extras-context'\nimport { besignerDocsUrl } from '../utils/docs-help'\nimport WorkspacePanelComponent, {\n  type WorkspacePanelComponentProps,\n} from './workspace-panel.component'\n\nconst TabPanel = styled(MuiTabPanel, {\n  name: 'AglynTabPanel',\n})<MuiTabPanelProps>({\n  padding: 0,\n  overflow: 'auto',\n  height: '100%',\n})\nconst TabPanelInner = styled('div', {\n  name: 'AglynTabPanelInner',\n})(({ theme }) => ({\n  width: '100%',\n}))\n\nconst emptyView = (\n  <Stack\n    direction=\"column\"\n    component={TabPanelInner}\n    sx={{\n      justifyContent: 'center',\n      height: 1,\n      p: 2,\n    }}\n  >\n    <Typography\n      color=\"textSecondary\"\n      variant=\"overline\"\n      component=\"div\"\n      align=\"center\"\n    >\n      <MdiIcon\n        sx={{ opacity: 0.3, fontSize: 80 }}\n        path={ICON_VARIANT_ELEMENT.path}\n      />\n      <div>{'Select an element'}</div>\n    </Typography>\n  </Stack>\n)\n\n\n/**\n * `Hero · Section` with a `SELECTED` tag — the inspector header the\n * `/product` hero mockup shows (AGL-2175).\n *\n * The right panel had no header at all: three tabs of controls with\n * nothing naming what they act on. On a canvas where clicking a child\n * moves the selection under you, that is the difference between editing\n * the section and editing the heading inside it — and the panel looked\n * identical either way.\n *\n * The second half is the COMPONENT, not a category: `labelShort` is the\n * preset's name (`Hero`) and the schema's is what it actually is\n * (`Section`). They are the same word often enough that it is dropped\n * when it would only repeat itself.\n */\nconst SelectedNodeHeader = observer(\n  ({ node }: { node: Besigner.LastSelectedNode }) => {\n    const name = node?.labelShort ?? ''\n    const component = (node as { componentSchema?: { displayName?: string } })\n      ?.componentSchema?.displayName\n    const subtitle =\n      component && component.toLowerCase() !== name.toLowerCase()\n        ? `${name} · ${component}`\n        : name\n    return (\n      <Stack\n        direction=\"row\"\n        spacing={1}\n        sx={{\n          alignItems: 'center',\n          px: 2,\n          py: 1,\n          borderBottom: 1,\n          borderColor: 'divider',\n        }}\n      >\n        <Typography variant=\"subtitle2\" noWrap sx={{ flex: 1, minWidth: 0 }}>\n          {subtitle || 'Element'}\n        </Typography>\n        <Chip\n          size=\"small\"\n          variant=\"outlined\"\n          color=\"secondary\"\n          label=\"SELECTED\"\n          sx={{ height: 18, '& .MuiChip-label': { px: 0.75, fontSize: 10 } }}\n        />\n      </Stack>\n    )\n  },\n)\nSelectedNodeHeader.displayName = 'SelectedNodeHeader'\n\nfunction withLastSelectedNode<P>(\n  WrappedComponent: JSX.ComponentType<P & { node: Besigner.LastSelectedNode }>,\n) {\n  const displayName = getDisplayName(WrappedComponent)\n\n  const WithLastSelectedNode = observer((props: P) => {\n    const { ...rest } = props\n    const selected = Besigner.focus.getLastSelected()\n    /**\n     * The LIVE node for that selection, re-resolved by id every render\n     * (AGL-2486).\n     *\n     * The focus store holds node OBJECTS, not ids. Anything that replaces the\n     * canvas map wholesale — `undo`, `redo`, a co-editing `applyNodes`, a\n     * local-draft restore — builds fresh node instances and leaves the store\n     * pointing at the pre-restore ones. The panels then read their fields from\n     * an orphan and, worse, write back through it: `updateNodeProps` assigns\n     * `node.props` on an object the canvas no longer owns, so the edit lands\n     * nowhere. Nothing throws and nothing marks the document dirty, so an\n     * author sees their new text in the box, an unchanged canvas, and `UP TO\n     * DATE` — the reported \"the Text attribute silently discards edits\".\n     *\n     * Resolving here rather than in the three panels because they share this\n     * one seam, and it is `observer`-tracked: `getNode` reads the observable\n     * map, so a restore re-renders the panel with the live node instead of\n     * leaving stale values in the fields.\n     *\n     * A node the map no longer has (deleted, or a test node that was never in\n     * it) falls back to the stored object, which is exactly today's behaviour\n     * for that case — there is no live node to prefer.\n     */\n    const lastSelected = selected\n      ? canvas.getNode(selected.$id) ?? selected\n      : selected\n\n    return (\n      <>\n        {!lastSelected ? (\n          emptyView\n        ) : (\n          <>\n            {/* One header for all three right-panel tabs, so Attributes,\n                Styles and Info cannot disagree about what is selected. */}\n            <SelectedNodeHeader node={lastSelected} />\n            <WrappedComponent node={lastSelected} {...rest} />\n          </>\n        )}\n      </>\n    )\n  })\n  WithLastSelectedNode.displayName = `WithLastSelectedNode(${displayName})`\n  hoistNonReactStatics(WithLastSelectedNode, WrappedComponent)\n\n  return WithLastSelectedNode\n}\n\nconst withTabPanelInner = (Component: ComponentType<any>) => (props: any) => {\n  return (\n    <TabPanelInner sx={{ p: 2 }}>\n      <Component {...props} />\n    </TabPanelInner>\n  )\n}\n\n/**\n * The Attributes form with the host app's section beneath it (AGL-2940):\n * whatever `BesignerInspectorExtrasContext` carries, drawn under the\n * selected element's own fields — for that element, when the host supplied\n * a function — and nothing when the host supplied nothing.\n *\n * The selection travels with `editable` (AGL-2908), the same rule the form's\n * own Save as reusable component and Detach actions are drawn under: the\n * canvas root and locked layout chrome answer false. It is read here because\n * a host section has the node and not the editor, and the rule is the drag\n * manager's.\n */\nconst ElementPropsFormWithExtras = (props: any) => {\n  const supplied = useBesignerInspectorExtras()\n  const inspected = besignerInspected(props.node)\n  const extras = inspected ? inspectorExtrasFor(supplied, inspected) : null\n  return (\n    <>\n      <ElementPropsForm {...props} />\n      {extras ? <Box sx={{ pt: 2 }}>{extras}</Box> : null}\n    </>\n  )\n}\n\nconst ElementsTree = forwardRef<any, NodeTreeViewProps>((props, ref) => {\n  const handleAddElementClick = useAddElementDrawerCallback()\n  return (\n    <TabPanelInner sx={{ pl: 0.5 }}>\n      <Box\n        sx={{\n          px: 0.05,\n          pb: 1,\n          pt: 1,\n          display: 'flex',\n          alignItems: 'center',\n        }}\n      >\n        <Button\n          color=\"primary\"\n          startIcon={\n            <MdiIcon fontSize=\"inherit\" path={ICON_VARIANT_MODIFY_ADD.path} />\n          }\n          onClick={() =>\n            handleAddElementClick(Besigner.focus.getLastSelected())\n          }\n        >\n          {'Add Element'}\n        </Button>\n        {/* The hierarchy is the one panel whose rules are not visible in it\n            (AGL-2167): which elements accept children, and what dropping on\n            an edge does versus dropping in the center. */}\n        <HelpTip\n          title=\"Drag, drop & hierarchy\"\n          excerpt=\"Reparent by dragging here or on the canvas. Containers accept children; dropping on a leaf element makes a sibling instead.\"\n          href={besignerDocsUrl('dragDropHierarchy', '#drop-zones-edges-vs-center')}\n          sx={{ ml: 'auto', mr: 0.5, fontSize: '0.9em' }}\n        />\n      </Box>\n      <NodeTreeView ref={ref} {...props} />\n    </TabPanelInner>\n  )\n})\n\nconst panelTabs: Partial<Record<BesignerPanelKey, any>> = {\n  panelLeft: {\n    defaultTab: BesignerPanelTabFlag.ELEMENTS_TREE,\n    panel: {\n      id: 'left',\n      anchor: 'left',\n      'aria-label': 'left toolbox panel',\n    },\n    tabs: [\n      {\n        value: BesignerPanelTabFlag.ELEMENTS_TREE,\n        tab: {\n          icon: { path: ICON_VARIANT_ELEMENT_TREE_VIEW.path },\n          label: 'Hierarchy',\n        },\n        panel: {\n          Component: ElementsTree,\n        },\n      },\n      {\n        value: BesignerPanelTabFlag.ELEMENT_BROWSE,\n        tab: {\n          icon: { path: ICON_VARIANT_ELEMENT_BROWSE.path },\n          label: 'Elements',\n        },\n        panel: {\n          Component: ComponentAccordionList,\n        },\n      },\n    ],\n  },\n  panelRight: {\n    // Attributes first and open by default — it is what you reach for on\n    // selecting an element. Tab order here is display order only; the flag\n    // values are persisted in panel state, so they stay put.\n    defaultTab: BesignerPanelTabFlag.ELEMENT_PROPS_FORM,\n    panel: {\n      id: 'right',\n      anchor: 'right',\n      'aria-label': 'right toolbox panel',\n    },\n    tabs: [\n      {\n        value: BesignerPanelTabFlag.ELEMENT_PROPS_FORM,\n        tab: {\n          icon: { path: ICON_VARIANT_ELEMENT_PROPERTIES.path },\n          label: 'Attributes',\n        },\n        panel: {\n          Component: withLastSelectedNode(withTabPanelInner(ElementPropsFormWithExtras)),\n        },\n      },\n      {\n        value: BesignerPanelTabFlag.ELEMENT_STYLES,\n        tab: {\n          icon: { path: ICON_VARIANT_ELEMENT_STYLES.path },\n          label: 'Styles',\n        },\n        panel: {\n          Component: withLastSelectedNode(ElementStylesForm as any),\n        },\n      },\n      /*\n       * Interactions, between Styles and where Info used to be.\n       *\n       * They lived at the bottom of Attributes, under every field the\n       * component declares — below the fold on anything with more than a\n       * handful, so an author had no reason to believe the element had any.\n       * An interaction is not an attribute: it is a behaviour, authored in a\n       * dialog rather than a field, and it belongs beside the styles as a\n       * peer.\n       *\n       * INFO IS GONE. Its two accordions are reference detail about the\n       * component and the node's ids — worth having, not worth a tab — and\n       * they now sit at the bottom of Attributes, beside the fields they\n       * describe. Its flag value stays reserved; panel state is persisted,\n       * and a reader whose last session ended on Info would otherwise return\n       * to a tab id that means something else.\n       */\n      {\n        value: BesignerPanelTabFlag.ELEMENT_INTERACTIONS,\n        tab: {\n          icon: { path: ICON_VARIANT_ELEMENT_INTERACTIONS.path },\n          label: 'Interactions',\n        },\n        panel: {\n          Component: withLastSelectedNode(\n            withTabPanelInner(ElementInteractionsForm as any),\n          ),\n        },\n      },\n    ],\n  },\n}\n\nexport interface AsidePanelComponentProps extends WorkspacePanelComponentProps {\n  panel: BesignerPanelKey\n}\n\nexport const AsidePanelComponent = forwardRef<any, AsidePanelComponentProps>(\n  (props, ref) => {\n    const { children, panel: panelKey, ...rest } = props\n\n    // Republish the page's site theme for surfaces that render OUTSIDE the\n    // page tree (AGL-2486). This panel is inside `HostThemeDocumentContext`;\n    // the Choose-element dialog — rendered by `withBesignerContext`, which\n    // wraps the page — is not, and its element preview was painting the\n    // console's brand onto someone else's site.\n    usePublishActiveHostTheme()\n\n    const [panel, setPanel] = useAglynBesignerPanel(panelKey)\n    const {\n      panel: { id, ...panelProps },\n      defaultTab,\n      tabs,\n    } = panelTabs[panelKey]\n    const { toggled, tab, size } = panel || {}\n    const value = tab || defaultTab\n\n    // The bottom-right corner belongs to this panel while it is open\n    // (AGL-2486), so publish how far a viewport-fixed affordance has to\n    // stand off to clear it. The Assist launcher reads this; the console's\n    // own chrome leaves the corner free and never sets it, which is why the\n    // variable carries the offset rather than the panel width — an unset\n    // variable then means \"the corner is yours\" everywhere else.\n    //\n    // Kept in an effect on the LIVE panel state so it tracks the author\n    // dragging the panel wider or collapsing it, and removed on unmount:\n    // navigating from the besigner back into the console must not leave a\n    // 395px inset behind on a page with no panel at all.\n    // `size` is `string | number` on the panel state, so a numeric width is\n    // parsed rather than added to: `'375' + 20` is `'37520'`, which is a\n    // perfectly valid CSS length and would park the launcher off-screen.\n    const panelWidth = Number.parseFloat(String(size ?? ''))\n    const rightInset =\n      panelKey === 'panelRight' && toggled && Number.isFinite(panelWidth)\n        ? panelWidth + 20\n        : null\n    useEffect(() => {\n      if (panelKey !== 'panelRight') return undefined\n      const root = document.documentElement\n      const property = '--aglyn-assist-inset-right'\n      if (rightInset === null) {\n        root.style.removeProperty(property)\n      } else {\n        root.style.setProperty(property, `${rightInset}px`)\n      }\n      return () => {\n        root.style.removeProperty(property)\n      }\n    }, [panelKey, rightInset])\n\n    const handleTabChange = useCallback(\n      (e: SyntheticEvent, val: string) => {\n        setPanel((panel) => ({ ...panel, tab: numberFromHexadecimal(val) }))\n      },\n      [setPanel],\n    )\n\n    return (\n      <WorkspacePanelComponent\n        ref={ref}\n        id={`aglyn:panel-${id}`}\n        aria-label=\"left toolbox panel\"\n        size={size}\n        open={toggled}\n        component=\"aside\"\n        {...panelProps}\n        {...rest}\n      >\n        <MuiTabContext value={numberToHexadecimal(value)}>\n          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>\n            <MuiAppBar\n              color=\"surface\"\n              position=\"relative\"\n              elevation={0}\n              enableColorOnDark\n            >\n              <MuiTabList\n                onChange={handleTabChange}\n                variant=\"fullWidth\"\n                sx={{\n                  '& .MuiTab-root': {\n                    '&.Mui-selected': {\n                      // Use sx string shorthands instead of palette callbacks so the\n                      // sx system resolves them via theme.vars (CSS custom-property refs)\n                      // rather than the static light-mode palette values.\n                      color: 'text.primary',\n                      backgroundColor: 'background.paper',\n                    },\n                  },\n                  '& .MuiTabs-indicator': {\n                    top: 0,\n                    backgroundColor: 'secondary.main',\n                  },\n                }}\n              >\n                {tabs.map(({ value, tab: { icon, ...tab } }) => (\n                  <MuiTab\n                    key={value}\n                    // color={'tertiary'}\n                    value={numberToHexadecimal(value)}\n                    iconPosition=\"top\"\n                    icon={<MdiIcon {...icon} fontSize=\"small\" />}\n                    sx={{\n                      minHeight: 'unset',\n                      fontSize: (theme) => theme.typography.pxToRem(12),\n                      lineHeight: 0.8,\n                      pt: 1,\n                    }}\n                    {...tab}\n                  />\n                ))}\n              </MuiTabList>\n            </MuiAppBar>\n          </Box>\n\n          {/* Site-theme color tokens (AGL-588): every COLOR_PICKER field\n              in these panels — styles panel, attribute forms, email\n              blocks — offers the site palette's token references. */}\n          <SiteThemeColorTokensProvider>\n            {tabs.map(({ value, panel: { Component, ...panel } }) => (\n              <TabPanel\n                key={value}\n                value={numberToHexadecimal(value)}\n                {...panel}\n              >\n                <Component />\n              </TabPanel>\n            ))}\n          </SiteThemeColorTokensProvider>\n        </MuiTabContext>\n\n        {children}\n      </WorkspacePanelComponent>\n    )\n  },\n)\n\nAsidePanelComponent.displayName = 'AsidePanelComponent'\nAsidePanelComponent.aglyn = true\n\nexport default AsidePanelComponent\n"],"names":["canvas","Besigner","BesignerPanelTabFlag","ICON_VARIANT_ELEMENT","ICON_VARIANT_ELEMENT_BROWSE","ICON_VARIANT_ELEMENT_INTERACTIONS","ICON_VARIANT_ELEMENT_PROPERTIES","ICON_VARIANT_ELEMENT_STYLES","ICON_VARIANT_ELEMENT_TREE_VIEW","ICON_VARIANT_MODIFY_ADD","HelpTip","MdiIcon","styled","getDisplayName","numberFromHexadecimal","numberToHexadecimal","hoistNonReactStatics","TabContext","MuiTabContext","TabList","MuiTabList","TabPanel","MuiTabPanel","AppBar","MuiAppBar","Box","Button","Chip","Stack","Tab","MuiTab","Typography","observer","forwardRef","useCallback","useEffect","useAddElementDrawerCallback","useAglynBesignerPanel","ElementInteractionsForm","ComponentAccordionList","ElementPropsForm","ElementStylesForm","NodeTreeView","SiteThemeColorTokensProvider","usePublishActiveHostTheme","besignerInspected","inspectorExtrasFor","useBesignerInspectorExtras","besignerDocsUrl","WorkspacePanelComponent","name","padding","overflow","height","TabPanelInner","theme","width","emptyView","direction","component","sx","justifyContent","p","color","variant","align","opacity","fontSize","path","div","SelectedNodeHeader","node","labelShort","componentSchema","displayName","subtitle","toLowerCase","spacing","alignItems","px","py","borderBottom","borderColor","noWrap","flex","minWidth","size","label","withLastSelectedNode","WrappedComponent","WithLastSelectedNode","props","rest","selected","focus","getLastSelected","lastSelected","getNode","$id","withTabPanelInner","Component","ElementPropsFormWithExtras","supplied","inspected","extras","pt","ElementsTree","ref","handleAddElementClick","pl","pb","display","startIcon","onClick","title","excerpt","href","ml","mr","panelTabs","panelLeft","defaultTab","ELEMENTS_TREE","panel","id","anchor","tabs","value","tab","icon","ELEMENT_BROWSE","panelRight","ELEMENT_PROPS_FORM","ELEMENT_STYLES","ELEMENT_INTERACTIONS","AsidePanelComponent","children","panelKey","setPanel","panelProps","toggled","panelWidth","Number","parseFloat","String","rightInset","isFinite","undefined","root","document","documentElement","property","style","removeProperty","setProperty","handleTabChange","e","val","aria-label","open","position","elevation","enableColorOnDark","onChange","backgroundColor","top","map","iconPosition","minHeight","typography","pxToRem","lineHeight","aglyn"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/aside-panel.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { canvas, NODE_ROOT_ID } from '@aglyn/aglyn'\nimport * as Besigner from '@aglyn/besigner'\nimport {\n  type BesignerPanelKey,\n  BesignerPanelTabFlag,\n} from '@aglyn/besigner'\nimport {\n  ICON_VARIANT_ELEMENT,\n  ICON_VARIANT_ELEMENT_BROWSE,\n  ICON_VARIANT_ELEMENT_INTERACTIONS,\n  ICON_VARIANT_ELEMENT_PROPERTIES,\n  ICON_VARIANT_ELEMENT_STYLES,\n  ICON_VARIANT_ELEMENT_TREE_VIEW,\n  ICON_VARIANT_MODIFY_ADD,\n} from '@aglyn/shared-data-enums'\nimport { HelpTip, MdiIcon } from '@aglyn/shared-ui-jsx'\nimport { mergeSxProps, styled } from '@aglyn/shared-ui-theme'\nimport {\n  getDisplayName,\n  numberFromHexadecimal,\n  numberToHexadecimal,\n} from '@aglyn/shared-util-tools'\nimport { hoistNonReactStatics } from '@aglyn/shared-util-vendor'\nimport {\n  TabContext as MuiTabContext,\n  TabList as MuiTabList,\n  TabPanel as MuiTabPanel,\n  type TabPanelProps as MuiTabPanelProps,\n} from '@mui/lab'\nimport {\n  AppBar as MuiAppBar,\n  Box,\n  Button,\n  Chip,\n  Stack,\n  Tab as MuiTab,\n  Typography,\n} from '@mui/material'\nimport { observer } from 'mobx-react-lite'\nimport {\n  type ComponentType,\n  forwardRef,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react'\nimport useAddElementDrawerCallback from '../hooks/use-add-element-drawer-callback'\nimport useAglynBesignerPanel from '../hooks/use-aglyn-besigner-panel'\nimport AccordionListComponent from './accordion-list.component'\nimport ElementInteractionsForm from './element-interactions-form.component'\nimport ComponentAccordionList from './component-accordion-list'\nimport ElementPropsForm from './element-props-form.component'\nimport ElementStylesForm from './element-styles-form.component'\nimport NodeTreeView, { type NodeTreeViewProps } from './node-tree-view'\nimport SiteThemeColorTokensProvider from './site-theme-color-tokens-provider.component'\nimport { usePublishActiveHostTheme } from '../utils/active-host-theme'\nimport { besignerInspected } from '../contexts/inspected-selection'\nimport {\n  type LayoutElementSelection,\n  layoutStyleSelection,\n} from '../contexts/layout-style-selection'\nimport {\n  inspectorExtrasFor,\n  useBesignerInspectorExtras,\n} from '../contexts/inspector-extras-context'\nimport { besignerDocsUrl } from '../utils/docs-help'\nimport WorkspacePanelComponent, {\n  type WorkspacePanelComponentProps,\n} from './workspace-panel.component'\n\nconst TabPanel = styled(MuiTabPanel, {\n  name: 'AglynTabPanel',\n})<MuiTabPanelProps>({\n  padding: 0,\n  overflow: 'auto',\n  height: '100%',\n})\nconst TabPanelInner = styled('div', {\n  name: 'AglynTabPanelInner',\n})(({ theme }) => ({\n  width: '100%',\n}))\n\nconst emptyView = (\n  <Stack\n    direction=\"column\"\n    component={TabPanelInner}\n    sx={{\n      justifyContent: 'center',\n      height: 1,\n      p: 2,\n    }}\n  >\n    <Typography\n      color=\"textSecondary\"\n      variant=\"overline\"\n      component=\"div\"\n      align=\"center\"\n    >\n      <MdiIcon\n        sx={{ opacity: 0.3, fontSize: 80 }}\n        path={ICON_VARIANT_ELEMENT.path}\n      />\n      <div>{'Select an element'}</div>\n    </Typography>\n  </Stack>\n)\n\n\n/**\n * `Hero · Section` with a `SELECTED` tag — the inspector header the\n * `/product` hero mockup shows (AGL-2175).\n *\n * The right panel had no header at all: three tabs of controls with\n * nothing naming what they act on. On a canvas where clicking a child\n * moves the selection under you, that is the difference between editing\n * the section and editing the heading inside it — and the panel looked\n * identical either way.\n *\n * The second half is the COMPONENT, not a category: `labelShort` is the\n * preset's name (`Hero`) and the schema's is what it actually is\n * (`Section`). They are the same word often enough that it is dropped\n * when it would only repeat itself.\n */\nconst SelectedNodeHeader = observer(\n  ({ node }: { node: Besigner.LastSelectedNode }) => {\n    const name = node?.labelShort ?? ''\n    const component = (node as { componentSchema?: { displayName?: string } })\n      ?.componentSchema?.displayName\n    const subtitle =\n      component && component.toLowerCase() !== name.toLowerCase()\n        ? `${name} · ${component}`\n        : name\n    return (\n      <Stack\n        direction=\"row\"\n        spacing={1}\n        sx={{\n          alignItems: 'center',\n          px: 2,\n          py: 1,\n          borderBottom: 1,\n          borderColor: 'divider',\n        }}\n      >\n        <Typography variant=\"subtitle2\" noWrap sx={{ flex: 1, minWidth: 0 }}>\n          {subtitle || 'Element'}\n        </Typography>\n        <Chip\n          size=\"small\"\n          variant=\"outlined\"\n          color=\"secondary\"\n          label=\"SELECTED\"\n          sx={{ height: 18, '& .MuiChip-label': { px: 0.75, fontSize: 10 } }}\n        />\n      </Stack>\n    )\n  },\n)\nSelectedNodeHeader.displayName = 'SelectedNodeHeader'\n\n/**\n * The panel while a shared-layout element is the target (AGL-3286): named in\n * the header like any selection, and marked as the layout's, styles only.\n */\nconst LayoutElementHeader = ({\n  selection,\n}: {\n  selection: LayoutElementSelection\n}) => (\n  <Stack\n    direction=\"row\"\n    spacing={1}\n    sx={{\n      alignItems: 'center',\n      px: 2,\n      py: 1,\n      borderBottom: 1,\n      borderColor: 'divider',\n    }}\n  >\n    <Typography variant=\"subtitle2\" noWrap sx={{ flex: 1, minWidth: 0 }}>\n      {`${selection.label} · Layout`}\n    </Typography>\n    <Chip\n      size=\"small\"\n      variant=\"outlined\"\n      color=\"info\"\n      label=\"STYLES ONLY\"\n      sx={{ height: 18, '& .MuiChip-label': { px: 0.75, fontSize: 10 } }}\n    />\n  </Stack>\n)\n\n/** What the Attributes and Interactions tabs say about a layout element. */\nconst LayoutElementNote = ({\n  selection,\n}: {\n  selection: LayoutElementSelection\n}) => (\n  <Stack spacing={1.5} sx={{ p: 2 }}>\n    <Typography variant=\"body2\" color=\"text.secondary\">\n      {`This element belongs to the shared layout${\n        selection.layoutName ? ` \"${selection.layoutName}\"` : ''\n      }. Its content is edited in the layout itself — use Edit layout above ` +\n        'the canvas. On this page you can change how it looks on the Styles tab.'}\n    </Typography>\n    <Button\n      size=\"small\"\n      variant=\"outlined\"\n      onClick={() => layoutStyleSelection.clear()}\n    >\n      {'Back to page elements'}\n    </Button>\n  </Stack>\n)\n\nfunction withLastSelectedNode<P>(\n  WrappedComponent: JSX.ComponentType<P & { node: Besigner.LastSelectedNode }>,\n  /**\n   * What this tab shows while a layout element is the target (AGL-3286):\n   * `styles` hands the wrapped Styles form the screen root and the target;\n   * `note` says where the element's content is edited.\n   */\n  layoutMode: 'styles' | 'note' = 'note',\n) {\n  const displayName = getDisplayName(WrappedComponent)\n\n  const WithLastSelectedNode = observer((props: P) => {\n    const { ...rest } = props\n    const layoutTarget = layoutStyleSelection.current\n    const selected = Besigner.focus.getLastSelected()\n    /**\n     * The LIVE node for that selection, re-resolved by id every render\n     * (AGL-2486).\n     *\n     * The focus store holds node OBJECTS, not ids. Anything that replaces the\n     * canvas map wholesale — `undo`, `redo`, a co-editing `applyNodes`, a\n     * local-draft restore — builds fresh node instances and leaves the store\n     * pointing at the pre-restore ones. The panels then read their fields from\n     * an orphan and, worse, write back through it: `updateNodeProps` assigns\n     * `node.props` on an object the canvas no longer owns, so the edit lands\n     * nowhere. Nothing throws and nothing marks the document dirty, so an\n     * author sees their new text in the box, an unchanged canvas, and `UP TO\n     * DATE` — the reported \"the Text attribute silently discards edits\".\n     *\n     * Resolving here rather than in the three panels because they share this\n     * one seam, and it is `observer`-tracked: `getNode` reads the observable\n     * map, so a restore re-renders the panel with the live node instead of\n     * leaving stale values in the fields.\n     *\n     * A node the map no longer has (deleted, or a test node that was never in\n     * it) falls back to the stored object, which is exactly today's behaviour\n     * for that case — there is no live node to prefer.\n     */\n    const lastSelected = selected\n      ? canvas.getNode(selected.$id) ?? selected\n      : selected\n\n    if (layoutTarget) {\n      // The page's layout overrides are kept on the screen root, so that is\n      // the node the Styles form is handed; the target says which slice.\n      const root = canvas.getNode(NODE_ROOT_ID)\n      return (\n        <>\n          <LayoutElementHeader selection={layoutTarget} />\n          {layoutMode === 'styles' && root ? (\n            <WrappedComponent\n              node={root}\n              {...({ layoutTarget } as any)}\n              {...rest}\n            />\n          ) : (\n            <LayoutElementNote selection={layoutTarget} />\n          )}\n        </>\n      )\n    }\n\n    return (\n      <>\n        {!lastSelected ? (\n          emptyView\n        ) : (\n          <>\n            {/* One header for all three right-panel tabs, so Attributes,\n                Styles and Info cannot disagree about what is selected. */}\n            <SelectedNodeHeader node={lastSelected} />\n            <WrappedComponent node={lastSelected} {...rest} />\n          </>\n        )}\n      </>\n    )\n  })\n  WithLastSelectedNode.displayName = `WithLastSelectedNode(${displayName})`\n  hoistNonReactStatics(WithLastSelectedNode, WrappedComponent)\n\n  return WithLastSelectedNode\n}\n\nconst withTabPanelInner = (Component: ComponentType<any>) => (props: any) => {\n  return (\n    <TabPanelInner sx={{ p: 2 }}>\n      <Component {...props} />\n    </TabPanelInner>\n  )\n}\n\n/**\n * The Attributes form with the host app's section beneath it (AGL-2940):\n * whatever `BesignerInspectorExtrasContext` carries, drawn under the\n * selected element's own fields — for that element, when the host supplied\n * a function — and nothing when the host supplied nothing.\n *\n * The selection travels with `editable` (AGL-2908), the same rule the form's\n * own Save as reusable component and Detach actions are drawn under: the\n * canvas root and locked layout chrome answer false. It is read here because\n * a host section has the node and not the editor, and the rule is the drag\n * manager's.\n */\nconst ElementPropsFormWithExtras = (props: any) => {\n  const supplied = useBesignerInspectorExtras()\n  const inspected = besignerInspected(props.node)\n  const extras = inspected ? inspectorExtrasFor(supplied, inspected) : null\n  return (\n    <>\n      <ElementPropsForm {...props} />\n      {extras ? <Box sx={{ pt: 2 }}>{extras}</Box> : null}\n    </>\n  )\n}\n\nconst ElementsTree = forwardRef<any, NodeTreeViewProps>((props, ref) => {\n  const handleAddElementClick = useAddElementDrawerCallback()\n  return (\n    <TabPanelInner sx={{ pl: 0.5 }}>\n      <Box\n        sx={{\n          px: 0.05,\n          pb: 1,\n          pt: 1,\n          display: 'flex',\n          alignItems: 'center',\n        }}\n      >\n        <Button\n          color=\"primary\"\n          startIcon={\n            <MdiIcon fontSize=\"inherit\" path={ICON_VARIANT_MODIFY_ADD.path} />\n          }\n          onClick={() =>\n            handleAddElementClick(Besigner.focus.getLastSelected())\n          }\n        >\n          {'Add Element'}\n        </Button>\n        {/* The hierarchy is the one panel whose rules are not visible in it\n            (AGL-2167): which elements accept children, and what dropping on\n            an edge does versus dropping in the center. */}\n        <HelpTip\n          title=\"Drag, drop & hierarchy\"\n          excerpt=\"Reparent by dragging here or on the canvas. Containers accept children; dropping on a leaf element makes a sibling instead.\"\n          href={besignerDocsUrl('dragDropHierarchy', '#drop-zones-edges-vs-center')}\n          sx={{ ml: 'auto', mr: 0.5, fontSize: '0.9em' }}\n        />\n      </Box>\n      <NodeTreeView ref={ref} {...props} />\n    </TabPanelInner>\n  )\n})\n\nconst panelTabs: Partial<Record<BesignerPanelKey, any>> = {\n  panelLeft: {\n    defaultTab: BesignerPanelTabFlag.ELEMENTS_TREE,\n    panel: {\n      id: 'left',\n      anchor: 'left',\n      'aria-label': 'left toolbox panel',\n    },\n    tabs: [\n      {\n        value: BesignerPanelTabFlag.ELEMENTS_TREE,\n        tab: {\n          icon: { path: ICON_VARIANT_ELEMENT_TREE_VIEW.path },\n          label: 'Hierarchy',\n        },\n        panel: {\n          Component: ElementsTree,\n        },\n      },\n      {\n        value: BesignerPanelTabFlag.ELEMENT_BROWSE,\n        tab: {\n          icon: { path: ICON_VARIANT_ELEMENT_BROWSE.path },\n          label: 'Elements',\n        },\n        panel: {\n          Component: ComponentAccordionList,\n        },\n      },\n    ],\n  },\n  panelRight: {\n    // Attributes first and open by default — it is what you reach for on\n    // selecting an element. Tab order here is display order only; the flag\n    // values are persisted in panel state, so they stay put.\n    defaultTab: BesignerPanelTabFlag.ELEMENT_PROPS_FORM,\n    panel: {\n      id: 'right',\n      anchor: 'right',\n      'aria-label': 'right toolbox panel',\n    },\n    tabs: [\n      {\n        value: BesignerPanelTabFlag.ELEMENT_PROPS_FORM,\n        tab: {\n          icon: { path: ICON_VARIANT_ELEMENT_PROPERTIES.path },\n          label: 'Attributes',\n        },\n        panel: {\n          Component: withLastSelectedNode(withTabPanelInner(ElementPropsFormWithExtras)),\n        },\n      },\n      {\n        value: BesignerPanelTabFlag.ELEMENT_STYLES,\n        tab: {\n          icon: { path: ICON_VARIANT_ELEMENT_STYLES.path },\n          label: 'Styles',\n        },\n        panel: {\n          Component: withLastSelectedNode(ElementStylesForm as any, 'styles'),\n        },\n      },\n      /*\n       * Interactions, between Styles and where Info used to be.\n       *\n       * They lived at the bottom of Attributes, under every field the\n       * component declares — below the fold on anything with more than a\n       * handful, so an author had no reason to believe the element had any.\n       * An interaction is not an attribute: it is a behaviour, authored in a\n       * dialog rather than a field, and it belongs beside the styles as a\n       * peer.\n       *\n       * INFO IS GONE. Its two accordions are reference detail about the\n       * component and the node's ids — worth having, not worth a tab — and\n       * they now sit at the bottom of Attributes, beside the fields they\n       * describe. Its flag value stays reserved; panel state is persisted,\n       * and a reader whose last session ended on Info would otherwise return\n       * to a tab id that means something else.\n       */\n      {\n        value: BesignerPanelTabFlag.ELEMENT_INTERACTIONS,\n        tab: {\n          icon: { path: ICON_VARIANT_ELEMENT_INTERACTIONS.path },\n          label: 'Interactions',\n        },\n        panel: {\n          Component: withLastSelectedNode(\n            withTabPanelInner(ElementInteractionsForm as any),\n          ),\n        },\n      },\n    ],\n  },\n}\n\nexport interface AsidePanelComponentProps extends WorkspacePanelComponentProps {\n  panel: BesignerPanelKey\n}\n\nexport const AsidePanelComponent = forwardRef<any, AsidePanelComponentProps>(\n  (props, ref) => {\n    const { children, panel: panelKey, ...rest } = props\n\n    // Republish the page's site theme for surfaces that render OUTSIDE the\n    // page tree (AGL-2486). This panel is inside `HostThemeDocumentContext`;\n    // the Choose-element dialog — rendered by `withBesignerContext`, which\n    // wraps the page — is not, and its element preview was painting the\n    // console's brand onto someone else's site.\n    usePublishActiveHostTheme()\n\n    const [panel, setPanel] = useAglynBesignerPanel(panelKey)\n    const {\n      panel: { id, ...panelProps },\n      defaultTab,\n      tabs,\n    } = panelTabs[panelKey]\n    const { toggled, tab, size } = panel || {}\n    const value = tab || defaultTab\n\n    // The bottom-right corner belongs to this panel while it is open\n    // (AGL-2486), so publish how far a viewport-fixed affordance has to\n    // stand off to clear it. The Assist launcher reads this; the console's\n    // own chrome leaves the corner free and never sets it, which is why the\n    // variable carries the offset rather than the panel width — an unset\n    // variable then means \"the corner is yours\" everywhere else.\n    //\n    // Kept in an effect on the LIVE panel state so it tracks the author\n    // dragging the panel wider or collapsing it, and removed on unmount:\n    // navigating from the besigner back into the console must not leave a\n    // 395px inset behind on a page with no panel at all.\n    // `size` is `string | number` on the panel state, so a numeric width is\n    // parsed rather than added to: `'375' + 20` is `'37520'`, which is a\n    // perfectly valid CSS length and would park the launcher off-screen.\n    const panelWidth = Number.parseFloat(String(size ?? ''))\n    const rightInset =\n      panelKey === 'panelRight' && toggled && Number.isFinite(panelWidth)\n        ? panelWidth + 20\n        : null\n    useEffect(() => {\n      if (panelKey !== 'panelRight') return undefined\n      const root = document.documentElement\n      const property = '--aglyn-assist-inset-right'\n      if (rightInset === null) {\n        root.style.removeProperty(property)\n      } else {\n        root.style.setProperty(property, `${rightInset}px`)\n      }\n      return () => {\n        root.style.removeProperty(property)\n      }\n    }, [panelKey, rightInset])\n\n    const handleTabChange = useCallback(\n      (e: SyntheticEvent, val: string) => {\n        setPanel((panel) => ({ ...panel, tab: numberFromHexadecimal(val) }))\n      },\n      [setPanel],\n    )\n\n    return (\n      <WorkspacePanelComponent\n        ref={ref}\n        id={`aglyn:panel-${id}`}\n        aria-label=\"left toolbox panel\"\n        size={size}\n        open={toggled}\n        component=\"aside\"\n        {...panelProps}\n        {...rest}\n      >\n        <MuiTabContext value={numberToHexadecimal(value)}>\n          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>\n            <MuiAppBar\n              color=\"surface\"\n              position=\"relative\"\n              elevation={0}\n              enableColorOnDark\n            >\n              <MuiTabList\n                onChange={handleTabChange}\n                variant=\"fullWidth\"\n                sx={{\n                  '& .MuiTab-root': {\n                    '&.Mui-selected': {\n                      // Use sx string shorthands instead of palette callbacks so the\n                      // sx system resolves them via theme.vars (CSS custom-property refs)\n                      // rather than the static light-mode palette values.\n                      color: 'text.primary',\n                      backgroundColor: 'background.paper',\n                    },\n                  },\n                  '& .MuiTabs-indicator': {\n                    top: 0,\n                    backgroundColor: 'secondary.main',\n                  },\n                }}\n              >\n                {tabs.map(({ value, tab: { icon, ...tab } }) => (\n                  <MuiTab\n                    key={value}\n                    // color={'tertiary'}\n                    value={numberToHexadecimal(value)}\n                    iconPosition=\"top\"\n                    icon={<MdiIcon {...icon} fontSize=\"small\" />}\n                    sx={{\n                      minHeight: 'unset',\n                      fontSize: (theme) => theme.typography.pxToRem(12),\n                      lineHeight: 0.8,\n                      pt: 1,\n                    }}\n                    {...tab}\n                  />\n                ))}\n              </MuiTabList>\n            </MuiAppBar>\n          </Box>\n\n          {/* Site-theme color tokens (AGL-588): every COLOR_PICKER field\n              in these panels — styles panel, attribute forms, email\n              blocks — offers the site palette's token references. */}\n          <SiteThemeColorTokensProvider>\n            {tabs.map(({ value, panel: { Component, ...panel } }) => (\n              <TabPanel\n                key={value}\n                value={numberToHexadecimal(value)}\n                {...panel}\n              >\n                <Component />\n              </TabPanel>\n            ))}\n          </SiteThemeColorTokensProvider>\n        </MuiTabContext>\n\n        {children}\n      </WorkspacePanelComponent>\n    )\n  },\n)\n\nAsidePanelComponent.displayName = 'AsidePanelComponent'\nAsidePanelComponent.aglyn = true\n\nexport default AsidePanelComponent\n"],"names":["canvas","NODE_ROOT_ID","Besigner","BesignerPanelTabFlag","ICON_VARIANT_ELEMENT","ICON_VARIANT_ELEMENT_BROWSE","ICON_VARIANT_ELEMENT_INTERACTIONS","ICON_VARIANT_ELEMENT_PROPERTIES","ICON_VARIANT_ELEMENT_STYLES","ICON_VARIANT_ELEMENT_TREE_VIEW","ICON_VARIANT_MODIFY_ADD","HelpTip","MdiIcon","styled","getDisplayName","numberFromHexadecimal","numberToHexadecimal","hoistNonReactStatics","TabContext","MuiTabContext","TabList","MuiTabList","TabPanel","MuiTabPanel","AppBar","MuiAppBar","Box","Button","Chip","Stack","Tab","MuiTab","Typography","observer","forwardRef","useCallback","useEffect","useAddElementDrawerCallback","useAglynBesignerPanel","ElementInteractionsForm","ComponentAccordionList","ElementPropsForm","ElementStylesForm","NodeTreeView","SiteThemeColorTokensProvider","usePublishActiveHostTheme","besignerInspected","layoutStyleSelection","inspectorExtrasFor","useBesignerInspectorExtras","besignerDocsUrl","WorkspacePanelComponent","name","padding","overflow","height","TabPanelInner","theme","width","emptyView","direction","component","sx","justifyContent","p","color","variant","align","opacity","fontSize","path","div","SelectedNodeHeader","node","labelShort","componentSchema","displayName","subtitle","toLowerCase","spacing","alignItems","px","py","borderBottom","borderColor","noWrap","flex","minWidth","size","label","LayoutElementHeader","selection","LayoutElementNote","layoutName","onClick","clear","withLastSelectedNode","WrappedComponent","layoutMode","WithLastSelectedNode","props","rest","layoutTarget","current","selected","focus","getLastSelected","lastSelected","getNode","$id","root","withTabPanelInner","Component","ElementPropsFormWithExtras","supplied","inspected","extras","pt","ElementsTree","ref","handleAddElementClick","pl","pb","display","startIcon","title","excerpt","href","ml","mr","panelTabs","panelLeft","defaultTab","ELEMENTS_TREE","panel","id","anchor","tabs","value","tab","icon","ELEMENT_BROWSE","panelRight","ELEMENT_PROPS_FORM","ELEMENT_STYLES","ELEMENT_INTERACTIONS","AsidePanelComponent","children","panelKey","setPanel","panelProps","toggled","panelWidth","Number","parseFloat","String","rightInset","isFinite","undefined","document","documentElement","property","style","removeProperty","setProperty","handleTabChange","e","val","aria-label","open","position","elevation","enableColorOnDark","onChange","backgroundColor","top","map","iconPosition","minHeight","typography","pxToRem","lineHeight","aglyn"],"mappings":"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"}

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

@@ -101,6 +101,11 @@ export interface CustomCssFormProps {
      * plain node; defaults to the component root.
      */
     overrideKey?: string;
+    /**
+     * True when the node is a placed form whose design resolves, so its edits
+     * land in the same override slice the Styles panel writes (AGL-3285).
+     */
+    placedFormResolves?: boolean;
 }
 /**
  * Custom CSS for the selected element's `sx` (AGL-332): a friendly

package/src/lib/components/custom-css-form.component.js

@@ -280,13 +280,16 @@ const draftKey = (nodeId, overrideKey, mode)=>[
  * nested selectors) verbatim.
  */ export const CustomCssForm = observer((props)=>{
     var _target_sx, _ref, _ref1;
-    const { node, breakpoint, overrideKey } = props;
+    const { node, breakpoint, overrideKey, placedFormResolves } = props;
     // Same target the rest of the Styles panel writes (AGL-1306/1332): a
     // plain node's own sx, or the instance override slice the panel's style
     // target names — root, or one leaf inside the component.
-    const target = useMemo(()=>getNodeStyleTarget(node, overrideKey), [
+    const target = useMemo(()=>getNodeStyleTarget(node, overrideKey, {
+            placedFormResolves
+        }), [
         node,
-        overrideKey
+        overrideKey,
+        placedFormResolves
     ]);
     const nodeSx = (_target_sx = target.sx) != null ? _target_sx : {};
     const [mode, setMode] = useState('builder');