@aglyn/besigner-ui 1.0.0-beta.143

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

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

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

@@ -0,0 +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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"}

package/src/lib/components/besigner-conflict-alert.component.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @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.
+ */
+export interface BesignerConflictAlertProps {
+    /** 'screen', 'layout', 'component', 'template', 'email'. */
+    noun: string;
+}
+/**
+ * The concurrent-save conflict banner (AGL-1301): someone else saved this
+ * document while the author was editing, so saving is paused until they
+ * reload. Shown as soon as the remote save lands, not on Save — finding
+ * out after twenty more minutes of editing is the bad version of this
+ * (AGL-674).
+ *
+ * One component for every besigner editor so the copy names the document
+ * kind the author is actually in — the AGL-1301 adoption copy-pasted the
+ * banner per page and two editors kept another page's noun. The single
+ * action is Reload, deliberately: there is no "save anyway" that could
+ * silently destroy a teammate's work, and the canvas keeps everything
+ * until the reload.
+ */
+export declare function BesignerConflictAlertComponent(props: BesignerConflictAlertProps): import("react").JSX.Element;
+export default BesignerConflictAlertComponent;

package/src/lib/components/besigner-conflict-alert.component.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } 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 { Alert, Button } from "@mui/material";
+/**
+ * The concurrent-save conflict banner (AGL-1301): someone else saved this
+ * document while the author was editing, so saving is paused until they
+ * reload. Shown as soon as the remote save lands, not on Save — finding
+ * out after twenty more minutes of editing is the bad version of this
+ * (AGL-674).
+ *
+ * One component for every besigner editor so the copy names the document
+ * kind the author is actually in — the AGL-1301 adoption copy-pasted the
+ * banner per page and two editors kept another page's noun. The single
+ * action is Reload, deliberately: there is no "save anyway" that could
+ * silently destroy a teammate's work, and the canvas keeps everything
+ * until the reload.
+ */ export function BesignerConflictAlertComponent(props) {
+    const { noun } = props;
+    return /*#__PURE__*/ _jsx(Alert, {
+        severity: "warning",
+        sx: {
+            borderRadius: 0,
+            position: 'relative',
+            zIndex: 'appBar'
+        },
+        action: /*#__PURE__*/ _jsx(Button, {
+            color: "inherit",
+            size: "small",
+            onClick: ()=>window.location.reload(),
+            children: 'Reload'
+        }),
+        children: `Someone else saved this ${noun} while you were editing. ` + 'Saving is paused so their work is not overwritten — ' + 'reload to pick up their changes. Nothing you have done ' + 'here is lost until you do.'
+    });
+}
+export default BesignerConflictAlertComponent;
+
+//# sourceMappingURL=besigner-conflict-alert.component.js.map