@aglyn/besigner-ui 1.0.0-beta.143

package/src/lib/components/element-styles-form.component.js

@@ -0,0 +1,1350 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { canvas, components, listInstanceStyleTargets, REUSABLE_INSTANCE_COMPONENT_ID, STYLE_OVERRIDES_ROOT_KEY } from "@aglyn/aglyn";
+import { BoxStyler } from "../box-styler/index.js";
+import { ToggleButtonFormControl } from "../form-fields/index.js";
+import { FieldComponentType } from "@aglyn/aglyn";
+import { SX_SCHEME_DARK_KEY, useAglynSiteTheme } from "@aglyn/aglyn-node-renderer";
+import { ICON_VARIANT_ALIGN_CENTER, ICON_VARIANT_ALIGN_JUSTIFY, ICON_VARIANT_ALIGN_LEFT, ICON_VARIANT_ALIGN_RIGHT, ICON_VARIANT_CSS_INHERIT } from "@aglyn/shared-data-enums";
+import { alignContentCenterIcon, alignContentEndIcon, alignContentSpaceAroundIcon, alignContentSpaceBetweenIcon, alignContentSpaceEvenlyIcon, alignContentStartIcon, alignContentStretchIcon, alignItemsCenterIcon, alignItemsFlexEndIcon, alignItemsFlexStartIcon, alignItemsStretchIcon, alignSelfCenterIcon, alignSelfFlexEndIcon, alignSelfFlexStartIcon, alignSelfStretchIcon, flexDirectionIcon, flexNowrapIcon, flexWrapIcon, justifyContentCenterIcon, justifyContentFlexEndIcon, justifyContentFlexStartIcon, justifyContentSpaceAroundIcon, justifyContentSpaceBetweenIcon } from "@aglyn/shared-svg-icons";
+import { componentMapper, FIELD_MUTED_STYLES, FieldMuteButton, FormRenderer } from "@aglyn/shared-ui-jsx-forms";
+import { Container, HelpTip, MdiIcon } from "@aglyn/shared-ui-jsx";
+import { useHostThemeDocument } from "@aglyn/shared-ui-theme";
+import { objectFlatten } from "@aglyn/shared-util-vendor/object-flatten";
+import { Alert, Box, Chip, FormControlLabel, FormHelperText, FormLabel, MenuItem, Switch, TextField, ToggleButton, ToggleButtonGroup, Tooltip } from "@mui/material";
+import Button from "@mui/material/Button";
+import FormControl from "@mui/material/FormControl";
+import { observer } from "mobx-react-lite";
+import { forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import ComponentPromotionContext from "../contexts/component-promotion-context.js";
+import useAglynBesignerFlag from "../hooks/use-aglyn-besigner-flag.js";
+import { buildStyleMute, toggleMutedStyle, withStyleMuteControls } from "../utils/muted-styles.js";
+import { deriveStateSlice, readStateSlice, stateScopedSx, stripStateSlices, stateAdvisory, sxHasStateSlice, sxStateSliceLabel, SX_STATE_DESCRIPTIONS, SX_STATE_LABELS, SX_STATE_PROSE, SX_STATES, writeStateSlice } from "../utils/state-sx.js";
+import useDeleteElementCallback from "../hooks/use-delete-element-callback.js";
+import { besignerDocsUrl } from "../utils/docs-help.js";
+import { canvasSchemeToSxScheme, deviceFlagToBreakpoint } from "../utils/responsive-sx.js";
+import { applyStylePartialToSx, buildFlexGridGroup, buildStyleFieldGroups, computeEffectiveStyleValues, computeStylePartial, pickStyleValues, styleGroupFieldNames } from "../utils/style-field-groups.js";
+import { filterStyleGroup, matchesStyleQuery, STYLE_SECTION_ENTRIES, styleFieldEntry } from "../utils/style-field-search.js";
+import { getNodeStyleTarget } from "../utils/style-target.js";
+import { buildStyleThemeScales } from "../utils/theme-scale-options.js";
+import { readHiddenBands, VISIBILITY_BAND_LABELS, VISIBILITY_BANDS, writeHiddenBand } from "../utils/visibility-styles.js";
+import { Accordion } from "./accordion-list.component.js";
+import CustomCssForm from "./custom-css-form.component.js";
+import ElementClassesField from "./element-classes-field.component.js";
+import ElementStylesFormTemplate from "./element-styles-form-template.component.js";
+const alignItems = {
+    name: 'alignItems',
+    label: 'Align items',
+    helperText: 'The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.',
+    options: [
+        {
+            value: 'center',
+            label: 'Center',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: alignItemsCenterIcon
+            }
+        },
+        {
+            value: 'flex-end',
+            label: 'Flex end',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: alignItemsFlexEndIcon
+            }
+        },
+        {
+            value: 'flex-start',
+            label: 'Flex start',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: alignItemsFlexStartIcon
+            }
+        },
+        {
+            value: 'stretch',
+            label: 'Stretch',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: alignItemsStretchIcon
+            }
+        }
+    ]
+};
+const alignContent = {
+    name: 'alignContent',
+    label: 'Align content',
+    helperText: "The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.",
+    options: [
+        {
+            value: 'center',
+            label: 'Center',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: alignContentCenterIcon
+            }
+        },
+        {
+            value: 'end',
+            label: 'End',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: alignContentEndIcon
+            }
+        },
+        {
+            value: 'space-around',
+            label: 'Space around',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: alignContentSpaceAroundIcon
+            }
+        },
+        {
+            value: 'space-between',
+            label: 'Space between',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: alignContentSpaceBetweenIcon
+            }
+        },
+        {
+            value: 'space-evenly',
+            label: 'Space evenly',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: alignContentSpaceEvenlyIcon
+            }
+        },
+        {
+            value: 'start',
+            label: 'Start',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: alignContentStartIcon
+            }
+        },
+        {
+            value: 'stretch',
+            label: 'Stretch',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: alignContentStretchIcon
+            }
+        }
+    ]
+};
+const alignSelf = {
+    name: 'alignSelf',
+    label: 'Align self',
+    helperText: "The align-self CSS property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.",
+    options: [
+        {
+            value: 'center',
+            label: 'Center',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: alignSelfCenterIcon
+            }
+        },
+        {
+            value: 'end',
+            label: 'End',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: alignSelfFlexEndIcon
+            }
+        },
+        {
+            value: 'start',
+            label: 'Start',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: alignSelfFlexStartIcon
+            }
+        },
+        {
+            value: 'stretch',
+            label: 'Stretch',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: alignSelfStretchIcon
+            }
+        }
+    ]
+};
+const flexWrap = {
+    name: 'flexWrap',
+    label: 'Flex wrap',
+    helperText: 'The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.',
+    options: [
+        {
+            value: 'nowrap',
+            label: 'No wrap',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: flexNowrapIcon
+            }
+        },
+        {
+            value: 'wrap',
+            label: 'Wrap',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: flexWrapIcon
+            }
+        },
+        {
+            value: 'wrap-reverse',
+            label: 'Wrap reverse',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: flexWrapIcon
+            }
+        }
+    ]
+};
+const flexDirection = {
+    name: 'flexDirection',
+    label: 'Flex direction',
+    helperText: 'The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).',
+    options: [
+        {
+            value: 'column',
+            label: 'Column',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: flexDirectionIcon
+            }
+        },
+        {
+            value: 'column-reverse',
+            label: 'Column reverse',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: flexDirectionIcon,
+                sx: {
+                    transform: 'rotate(-180deg)'
+                }
+            }
+        },
+        {
+            value: 'row',
+            label: 'Row',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: flexDirectionIcon,
+                sx: {
+                    transform: 'rotate(-90deg)'
+                }
+            }
+        },
+        {
+            value: 'row-reverse',
+            label: 'Row reverse',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: flexDirectionIcon,
+                sx: {
+                    transform: 'rotate(90deg)'
+                }
+            }
+        }
+    ]
+};
+const justifyItems = {
+    name: 'justifyItems',
+    label: 'Justify items',
+    helperText: 'The CSS justify-items property defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.',
+    options: [
+        {
+            value: 'center',
+            label: 'Center',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: alignSelfCenterIcon
+            }
+        },
+        {
+            value: 'end',
+            label: 'End',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: alignSelfFlexEndIcon
+            }
+        },
+        {
+            value: 'start',
+            label: 'Start',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: alignSelfFlexStartIcon
+            }
+        },
+        {
+            value: 'stretch',
+            label: 'Stretch',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: alignSelfStretchIcon
+            }
+        }
+    ]
+};
+const justifyContent = {
+    name: 'justifyContent',
+    label: 'Justify content',
+    helperText: 'The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.',
+    options: [
+        {
+            value: 'center',
+            label: 'Center',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: justifyContentCenterIcon
+            }
+        },
+        {
+            value: 'flex-end',
+            label: 'Flex end',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: justifyContentFlexEndIcon
+            }
+        },
+        {
+            value: 'flex-start',
+            label: 'Flex start',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: justifyContentFlexStartIcon
+            }
+        },
+        {
+            value: 'space-around',
+            label: 'Space around',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: justifyContentSpaceAroundIcon
+            }
+        },
+        {
+            value: 'space-between',
+            label: 'Space between',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: justifyContentSpaceBetweenIcon
+            }
+        }
+    ]
+};
+const justifySelf = {
+    name: 'justifySelf',
+    label: 'Justify self',
+    helperText: 'The CSS justify-self property sets the way a box is justified inside its alignment container along the appropriate axis.',
+    options: [
+        {
+            value: 'center',
+            label: 'Center',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: alignSelfCenterIcon
+            }
+        },
+        {
+            value: 'end',
+            label: 'End',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: alignSelfFlexEndIcon
+            }
+        },
+        {
+            value: 'start',
+            label: 'Start',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: alignSelfFlexStartIcon
+            }
+        },
+        {
+            value: 'stretch',
+            label: 'Stretch',
+            icon: {
+                viewBox: '0 0 13 13',
+                component: alignSelfStretchIcon
+            }
+        }
+    ]
+};
+/**
+ * The Flexbox & Grid alignment toggles, in panel order (AGL-1458).
+ *
+ * A list rather than eight literal call sites because every one of them
+ * needs the same two wirings — the change handler AND the effective value
+ * — and the shipped panel gave them only the first. One render site is one
+ * place for that pair to be right.
+ *
+ * Ordered container-first, then the two per-ITEM properties (AGL-2486).
+ * `Align self` and `Justify self` describe how this element sits inside
+ * its parent, not how it arranges its own children, and reading them in
+ * the middle of the container list was half of why the panel needed a
+ * second layout section to put the rest of the per-item properties in.
+ */ const FLEXBOX_TOGGLES = [
+    flexDirection,
+    flexWrap,
+    justifyContent,
+    alignItems,
+    alignContent,
+    justifyItems,
+    alignSelf,
+    justifySelf
+];
+const TextAlignToggleButtonGroup = (props)=>{
+    const { onChange, value, mute, field } = props;
+    return /*#__PURE__*/ _jsxs(FormControl, {
+        fullWidth: true,
+        sx: (mute == null ? void 0 : mute.muted) ? FIELD_MUTED_STYLES : undefined,
+        children: [
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 0.5,
+                    mb: 1
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(FormLabel, {
+                        htmlFor: field.name,
+                        children: field.label
+                    }),
+                    /*#__PURE__*/ _jsx(FieldMuteButton, {
+                        mute: mute
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                children: /*#__PURE__*/ _jsx(ToggleButtonGroup, {
+                    id: field.name,
+                    value: value || '',
+                    size: "small",
+                    color: "primary",
+                    onChange: onChange,
+                    fullWidth: true,
+                    exclusive: true,
+                    children: field.options.map((option)=>/*#__PURE__*/ _jsx(ToggleButton, {
+                            value: option.value,
+                            children: /*#__PURE__*/ _jsx(Tooltip, {
+                                title: option.label,
+                                children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                    path: option.icon,
+                                    fontSize: "inherit"
+                                })
+                            }, option.value)
+                        }, option.value))
+                })
+            }),
+            /*#__PURE__*/ _jsx(FormHelperText, {
+                children: field.description
+            })
+        ]
+    });
+};
+/**
+ * The styles panel (AGL-587 consolidation): every control applies
+ * immediately through {@link ElementStylesFormTemplate} or a direct
+ * `applyStyleValues` call — no per-group "Save Element" buttons — and
+ * every style field has exactly one home:
+ *
+ * - Flexbox & Grid: the alignment toggles plus every typed layout field
+ *   (gaps, grid tracks, item placement, flex-child sizing) — one section
+ *   since AGL-2486, where it used to be two.
+ * - Visibility: device-band switches.
+ * - Layout / Colors / Sizing / Typography / Borders & Shadows /
+ *   Position & Overflow: the accordion field groups from
+ *   `buildStyleFieldGroups`.
+ * - Top level: search box, breakpoint chip, BoxStyler, and the text-align
+ *   toggle.
+ *
+ * The search box (AGL-2486) filters every one of those by property name AND
+ * by the words a non-developer would use — `rounded` finds Corner Radius —
+ * hiding sections with no match and opening the ones that have one. See
+ * `style-field-search.ts`; the filtered group is also what each form SAVES
+ * through, so hiding a field can never clear it.
+ */ const ElementStylesForm = observer(/*#__PURE__*/ forwardRef((props, ref)=>{
+    var _canvas_getNode, _effectiveValues_marginTop, _effectiveValues_marginLeft, _effectiveValues_marginRight, _effectiveValues_marginBottom, _effectiveValues_paddingTop, _effectiveValues_paddingLeft, _effectiveValues_paddingRight, _effectiveValues_paddingBottom, _target_sx, _ref, _ref1;
+    const { node: selectedNode } = props;
+    const deleteElementCallback = useDeleteElementCallback();
+    // The node as the CANVAS currently holds it (AGL-2486).
+    //
+    // Undo and redo restore a whole-document snapshot through
+    // `CanvasManager.setNodes`, which mints fresh node instances and
+    // replaces the map. The selection holds a node OBJECT, not an id, so
+    // after an undo the aside panel handed this component a DETACHED copy
+    // — the canvas rolled back and every field here kept reading the value
+    // that had just been undone, then wrote it back over the restored one
+    // on the next edit. Looking the id up in the map re-attaches the panel
+    // to what the canvas renders, and — read inside an `observer` — is
+    // also what makes an undo re-render the panel at all.
+    //
+    // The fallback keeps a node the map does not have (a spec's hand-built
+    // schema, a node deleted while its panel is still mounted) rendering
+    // rather than blanking the panel.
+    const node = (selectedNode == null ? void 0 : selectedNode.$id) ? (_canvas_getNode = canvas.getNode(selectedNode.$id)) != null ? _canvas_getNode : selectedNode : selectedNode;
+    // The definition behind a selected instance (AGL-1332): the panel needs
+    // its node tree to offer the leaves an author may style. Read from the
+    // same context the canvas renders instances through, so the picker can
+    // only ever offer targets the graft will actually consult.
+    const { definitions } = useContext(ComponentPromotionContext);
+    const definition = useMemo(()=>{
+        var _node_props;
+        if ((node == null ? void 0 : node.componentId) !== REUSABLE_INSTANCE_COMPONENT_ID) {
+            return undefined;
+        }
+        const refId = node == null ? void 0 : (_node_props = node.props) == null ? void 0 : _node_props.refId;
+        return refId ? definitions == null ? void 0 : definitions[refId] : undefined;
+    }, [
+        node,
+        definitions
+    ]);
+    const styleTargets = useMemo(()=>listInstanceStyleTargets(definition), [
+        definition
+    ]);
+    // Which target inside the instance the panel is editing. Held per
+    // selection rather than in an effect: switching nodes must land on the
+    // component root, and deriving that from the current `node.$id` cannot
+    // render one frame aimed at the PREVIOUS instance's leaf.
+    const [picked, setPicked] = useState({
+        key: STYLE_OVERRIDES_ROOT_KEY
+    });
+    const pickedKey = picked.nodeId && picked.nodeId === (node == null ? void 0 : node.$id) ? picked.key : STYLE_OVERRIDES_ROOT_KEY;
+    // A leaf the component no longer has falls back to the root instead of
+    // aiming the panel at a slice nothing renders (the definition may have
+    // been edited since). An unloaded definition offers nothing yet, so it
+    // is not evidence the key is stale.
+    const overrideKey = !styleTargets.length || styleTargets.some((entry)=>entry.key === pickedKey) ? pickedKey : STYLE_OVERRIDES_ROOT_KEY;
+    // Where edits land (AGL-1306 root, AGL-1332 leaves): a plain node's own
+    // sx, or — for a reusable-component instance — one slice of its
+    // styleOverrides, so the whole panel styles the instance without
+    // touching the component. Reads go through the same target, so the
+    // panel shows exactly what THIS instance overrides for THIS target
+    // (empty = the component's own look), the same way a fresh plain node
+    // starts empty.
+    const target = useMemo(()=>getNodeStyleTarget(node, overrideKey), [
+        node,
+        overrideKey
+    ]);
+    const nodeSx = target.sx;
+    const hostThemeDoc = useHostThemeDocument();
+    const siteTheme = useAglynSiteTheme({
+        theme: hostThemeDoc
+    });
+    const presetColors = useMemo(()=>Object.entries(objectFlatten(siteTheme.palette)).map(([, value])=>String(value)).filter((color)=>{
+            var _color_match;
+            return Boolean((_color_match = color.match(/^(rgb|#)/)) == null ? void 0 : _color_match[0]);
+        }), [
+        siteTheme
+    ]);
+    // Accordion field groups (AGL-540/587): layout, colors, sizing,
+    // typography, borders & shadows, position & overflow, grid/flex-child.
+    //
+    // The override mode is passed in (AGL-1338) because a field whose
+    // "empty" state is meaningful has to say what empty MEANS here: on an
+    // instance an unset Background Fill is the component's gradient, not
+    // no gradient, and the control that could not tell those apart was
+    // the bug.
+    // The theme's own scales for font size, font weight and z-index
+    // (AGL-2486, item 12). Read off the SITE theme, so a host that retuned
+    // its type scale or added a stacking layer offers its own values — and
+    // the option list names what each token resolves to, which is the only
+    // thing that makes `h4.fontSize` legible to an author.
+    const themeScales = useMemo(()=>buildStyleThemeScales(siteTheme), [
+        siteTheme
+    ]);
+    const styleGroups = useMemo(()=>buildStyleFieldGroups(presetColors, {
+            isInstanceOverride: target.isInstanceOverride,
+            themeScales
+        }), [
+        presetColors,
+        target.isInstanceOverride,
+        themeScales
+    ]);
+    // Every typed layout field, rendered under the alignment toggles in
+    // the single Flexbox & Grid section (AGL-2486).
+    // Gaps are theme-spacing pickers, so this group needs the scales too.
+    const flexGridGroup = useMemo(()=>buildFlexGridGroup({
+            themeScales
+        }), [
+        themeScales
+    ]);
+    // Breakpoint-scoped editing (AGL-333): when the artboard preview is a
+    // device size, style edits write into that breakpoint's slice of the
+    // responsive sx value; fluid preview edits the base.
+    const [devicePreview] = useAglynBesignerFlag('devicePreview');
+    const activeBreakpoint = deviceFlagToBreakpoint(devicePreview);
+    // Scheme-scoped colors (AGL-588): while the artboard previews the
+    // DARK scheme, color-bearing fields write into the sx dark slice and
+    // read through it; light preview edits the base (light IS the base).
+    // Non-color fields stay scheme-agnostic either way.
+    const [canvasScheme] = useAglynBesignerFlag('canvasScheme');
+    const activeScheme = canvasSchemeToSxScheme(canvasScheme);
+    // Interaction-state scope (AGL-2486 item 39): a state chip puts the panel
+    // into that state's slice — every field then reads and writes
+    // `sx['&:hover']` instead of the base. Selecting the chip ALSO holds the
+    // state on the canvas for this element, because you cannot hover an
+    // element while working in a side panel. The hold is a canvas flag, never
+    // a document field, so it cannot be saved and cannot reach Preview or a
+    // published page; and it is not a toggle that can be left on by mistake —
+    // going back to `Default` ends it.
+    const [heldState, setHeldState] = useAglynBesignerFlag('heldState');
+    const [, setHeldStateNodeId] = useAglynBesignerFlag('heldStateNodeId');
+    const activeState = heldState != null ? heldState : null;
+    // What THIS panel is holding, tracked in a ref so the release paths below
+    // can read it without depending on it. Two reasons it is not the flag
+    // itself: an effect that read the flag would have registered its unmount
+    // cleanup on the render where it was still undefined (the chip is clicked
+    // AFTER mount) and stranded the canvas holding a state with no visible
+    // control left to explain it; and the release must be able to tell "we
+    // hold nothing" from "we hold nothing yet", because writing a flag needs a
+    // live besigner app and a panel rendered without one — which is every
+    // panel unit test — would throw on mount.
+    const heldRef = useRef(null);
+    const selectState = useCallback((next)=>{
+        heldRef.current = next;
+        setHeldState(next != null ? next : undefined);
+        setHeldStateNodeId(next ? node == null ? void 0 : node.$id : undefined);
+    }, [
+        setHeldState,
+        setHeldStateNodeId,
+        node
+    ]);
+    /** Ends the hold, and writes nothing when there is nothing to end. */ const releaseHold = useCallback(()=>{
+        if (!heldRef.current) return;
+        heldRef.current = null;
+        setHeldState(undefined);
+        setHeldStateNodeId(undefined);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // The hold dies with the panel: a preview nothing on screen explains any
+    // more is worse than no preview.
+    useEffect(()=>()=>releaseHold(), [
+        releaseHold
+    ]);
+    // …and it follows the SELECTION. Clicking element B while holding hover on
+    // element A must not leave either of them rendering as hovered — the panel
+    // now describes a different element, and a scope the chips no longer show
+    // is a scope the author cannot get out of.
+    useEffect(()=>{
+        releaseHold();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        node == null ? void 0 : node.$id
+    ]);
+    /** Drops a whole state slice — the clear affordance, one level up. */ const clearState = useCallback((state)=>{
+        if (!node) return;
+        canvas.transact(()=>{
+            var _target_sx;
+            target.setSx(writeStateSlice((_target_sx = target.sx) != null ? _target_sx : {}, state, undefined));
+        }, [
+            'sx',
+            node.$id,
+            'clear-state',
+            state
+        ].join(':'));
+    }, [
+        node,
+        target
+    ]);
+    // Allowed on every element, but said out loud where it will never fire.
+    const stateAdvisoryText = useMemo(()=>{
+        var _node_props, _node_props1;
+        return stateAdvisory(activeState, {
+            componentId: node == null ? void 0 : node.componentId,
+            hasHref: !!(node == null ? void 0 : (_node_props = node.props) == null ? void 0 : _node_props['href']),
+            hasTabIndex: (node == null ? void 0 : (_node_props1 = node.props) == null ? void 0 : _node_props1['tabIndex']) !== undefined
+        });
+    }, [
+        activeState,
+        node
+    ]);
+    /**
+     * Merges style values into node.sx at the active breakpoint + scheme
+     * scope. Unchanged values are skipped so effective (inherited)
+     * readings never get pinned into a slice by round-tripping through a
+     * form.
+     */ const applyStyleValues = useCallback((partial)=>{
+        if (!node) return;
+        // Undoable, and coalesced (AGL-1204). Every control here applies
+        // live — one call per character typed, one per drag tick — so the
+        // key ends the burst when the adjustment changes, not when the
+        // writing stops: the field names are in it, so moving from Gap to
+        // Padding is a second undo step even mid-burst.
+        //
+        // The write itself goes through the style target (AGL-1306), so the
+        // step is recorded whether the edit lands in the node's own sx or in
+        // a component instance's root override slice — the history snapshot
+        // carries `styleOverrides` like any other node field.
+        canvas.transact(()=>{
+            var _target_sx;
+            const current = (_target_sx = target.sx) != null ? _target_sx : {};
+            if (!activeState) {
+                target.setSx(applyStylePartialToSx(current, partial, activeBreakpoint, activeScheme));
+                return;
+            }
+            // A state scope edits the MERGED reading — base with the slice
+            // over it, i.e. what the element actually looks like hovered —
+            // and the write is split back out so only a genuine difference
+            // is stored. That one rule gives all three behaviours: a changed
+            // value lands in the slice, a value set back to the base leaves
+            // it, and a cleared value leaves it so the state inherits again.
+            const base = stripStateSlices(current);
+            const edited = applyStylePartialToSx(stateScopedSx(current, activeState), partial, activeBreakpoint, activeScheme);
+            target.setSx(writeStateSlice(current, activeState, deriveStateSlice(base, edited)));
+        }, [
+            'sx',
+            node.$id,
+            activeState != null ? activeState : 'base',
+            activeBreakpoint != null ? activeBreakpoint : 'base',
+            activeScheme != null ? activeScheme : 'light',
+            Object.keys(partial).sort().join(':')
+        ].join(':'));
+    }, [
+        node,
+        target,
+        activeBreakpoint,
+        activeScheme,
+        activeState
+    ]);
+    // Effective scalar values at the active breakpoint + scheme — feeds
+    // the form and controls; responsive objects resolve to their active
+    // slice, color fields through the dark slice while previewing dark.
+    const effectiveValues = useMemo(()=>computeEffectiveStyleValues(// In a state scope the panel reads the slice merged over the base
+        // (AGL-2486), so a field the author has not overridden for hover
+        // shows the inherited value rather than empty — the same reading
+        // the breakpoint scope gives, and what the browser actually paints.
+        stateScopedSx(nodeSx, activeState), activeBreakpoint, activeScheme), [
+        nodeSx,
+        activeBreakpoint,
+        activeScheme,
+        activeState
+    ]);
+    // Declarations switched off for comparison (AGL-2486). Canvas only: the
+    // value stays in the document and only the canvas's copy of the sx drops
+    // it, so turning one back on is not a restore that can fail — see
+    // `muted-styles`.
+    const [mutedStyles, setMutedStyles] = useAglynBesignerFlag('mutedStyles');
+    // What the ACTIVE SCOPE declares, as against what the panel displays.
+    // The two differ in a state scope, where a field the author has not
+    // overridden for hover still shows the base value it inherits: there is
+    // no hover declaration to switch off, so that row gets no control.
+    const scopeValues = useMemo(()=>{
+        const sx = nodeSx != null ? nodeSx : {};
+        const scoped = activeState ? readStateSlice(sx, activeState) : stripStateSlices(sx);
+        return computeEffectiveStyleValues(scoped != null ? scoped : {}, activeBreakpoint, activeScheme);
+    }, [
+        nodeSx,
+        activeState,
+        activeBreakpoint,
+        activeScheme
+    ]);
+    const styleMute = useCallback((name, label)=>buildStyleMute(name, label, {
+            nodeId: node == null ? void 0 : node.$id,
+            state: activeState,
+            breakpoint: activeBreakpoint,
+            scopeValues,
+            mutedStyles,
+            onToggle: (muteTarget)=>setMutedStyles((current)=>toggleMutedStyle(current, muteTarget))
+        }), [
+        node,
+        activeState,
+        activeBreakpoint,
+        scopeValues,
+        mutedStyles,
+        setMutedStyles
+    ]);
+    const withStyleMutes = useCallback((fields)=>withStyleMuteControls(fields, {
+            nodeId: node == null ? void 0 : node.$id,
+            state: activeState,
+            breakpoint: activeBreakpoint,
+            scopeValues,
+            mutedStyles,
+            onToggle: (muteTarget)=>setMutedStyles((current)=>toggleMutedStyle(current, muteTarget))
+        }), [
+        node,
+        activeState,
+        activeBreakpoint,
+        scopeValues,
+        mutedStyles,
+        setMutedStyles
+    ]);
+    /**
+     * Scoped group save (AGL-540): a group's auto-apply may only write
+     * its own field names, so it can never clear values owned by other
+     * groups or by the custom-CSS editor.
+     */ const handleGroupSave = useCallback((fieldNames)=>(values)=>{
+            applyStyleValues(computeStylePartial(fieldNames, values));
+        }, [
+        applyStyleValues
+    ]);
+    const handleBoxStylerChange = useCallback((dimensions)=>{
+        applyStyleValues(dimensions);
+    }, [
+        applyStyleValues
+    ]);
+    /**
+     * The border shorthand the box diagram draws for context (AGL-2486).
+     * Read only — border width, style and colour are edited in the
+     * Borders & Shadows section, which is their one home.
+     */ const boxBorder = effectiveValues['border'] === undefined ? undefined : `${effectiveValues['border']}`;
+    const boxMeasurements = {
+        marginTop: (_effectiveValues_marginTop = effectiveValues['marginTop']) != null ? _effectiveValues_marginTop : undefined,
+        marginLeft: (_effectiveValues_marginLeft = effectiveValues['marginLeft']) != null ? _effectiveValues_marginLeft : undefined,
+        marginRight: (_effectiveValues_marginRight = effectiveValues['marginRight']) != null ? _effectiveValues_marginRight : undefined,
+        marginBottom: (_effectiveValues_marginBottom = effectiveValues['marginBottom']) != null ? _effectiveValues_marginBottom : undefined,
+        paddingTop: (_effectiveValues_paddingTop = effectiveValues['paddingTop']) != null ? _effectiveValues_paddingTop : undefined,
+        paddingLeft: (_effectiveValues_paddingLeft = effectiveValues['paddingLeft']) != null ? _effectiveValues_paddingLeft : undefined,
+        paddingRight: (_effectiveValues_paddingRight = effectiveValues['paddingRight']) != null ? _effectiveValues_paddingRight : undefined,
+        paddingBottom: (_effectiveValues_paddingBottom = effectiveValues['paddingBottom']) != null ? _effectiveValues_paddingBottom : undefined
+    };
+    const handleTextAlignChange = useCallback((e, value)=>{
+        applyStyleValues({
+            textAlign: value || undefined
+        });
+    }, [
+        applyStyleValues
+    ]);
+    const handleFlexboxChange = useCallback((name)=>(e, value)=>{
+            applyStyleValues({
+                [name]: value || undefined
+            });
+        }, [
+        applyStyleValues
+    ]);
+    // Responsive visibility (AGL-562): band toggles write display:none
+    // under range-scoped media keys — independent of the artboard's
+    // breakpoint scope, since each band is absolute.
+    const hiddenBands = readHiddenBands(nodeSx);
+    const handleVisibilityChange = useCallback((band)=>(event)=>{
+            if (!node) return;
+            // No coalesce key: a band switch is one discrete decision, so it
+            // gets its own undo step even when two are flipped in quick
+            // succession (AGL-1204).
+            canvas.transact(()=>{
+                var _target_sx;
+                target.setSx(writeHiddenBand((_target_sx = target.sx) != null ? _target_sx : {}, band, event.target.checked));
+            });
+        }, [
+        node,
+        target
+    ]);
+    // Per-property clear for the instance override list (AGL-1306):
+    // removing the top-level key returns this instance to the component's
+    // own value for that property. Clearing the last one removes the
+    // override field entirely (see NodeStyleTarget.setSx).
+    const handleClearOverride = useCallback((property)=>()=>{
+            // Undoable and uncoalesced (AGL-1204): clearing a chip is a discrete
+            // decision, and it DISCARDS an override — the one edit in this panel
+            // that most needs a way back.
+            canvas.transact(()=>{
+                var _target_sx;
+                const next = _extends({}, (_target_sx = target.sx) != null ? _target_sx : {});
+                delete next[property];
+                target.setSx(next);
+            });
+        }, [
+        target
+    ]);
+    // Read during render (observer): the list tracks the live override
+    // record, so it updates as edits land or chips clear.
+    const overrideProperties = target.isInstanceOverride ? Object.keys((_target_sx = target.sx) != null ? _target_sx : {}) : [];
+    // Which targets this instance has overridden at all, so the picker can
+    // mark them — an author restyling a CTA needs to see that the headline
+    // already carries a colour without opening every leaf.
+    const overriddenKeys = target.isInstanceOverride ? new Set(Object.keys((_ref = node == null ? void 0 : node.styleOverrides) != null ? _ref : {})) : new Set();
+    /** The picker's name for one target — the author's word, then the component's. */ const styleTargetLabel = useCallback((entry)=>entry.isRoot ? 'Component root' : entry.name || entry.componentId && components.getLabel(entry.componentId) || entry.componentInternalId, []);
+    const handleStyleTargetChange = useCallback((event)=>{
+        setPicked({
+            nodeId: node == null ? void 0 : node.$id,
+            key: event.target.value
+        });
+    }, [
+        node == null ? void 0 : node.$id
+    ]);
+    // Panel search (AGL-2486, item 13). The panel is seven accordions plus
+    // the box stylers and the toggles, so "which section is Corner Radius
+    // in?" was a question every author had to answer from memory. Filtering
+    // is derived from the query on every render rather than held in state:
+    // one source of truth, and no way for the list to disagree with the box.
+    const [query, setQuery] = useState('');
+    const search = query.trim();
+    const searching = search !== '';
+    const handleSearchChange = useCallback((event)=>setQuery(event.target.value), []);
+    // While searching, a section that HAS a match opens itself — a hit
+    // hidden inside a collapsed accordion is not a hit. Keyed on the search
+    // MODE rather than the text so this re-seeds the accordions once, when
+    // searching starts or stops, not on every keystroke.
+    const accordionKey = searching ? 'search' : 'browse';
+    const matchesSection = useCallback((key)=>matchesStyleQuery(STYLE_SECTION_ENTRIES[key], search), [
+        search
+    ]);
+    const visibleFlexboxToggles = useMemo(()=>FLEXBOX_TOGGLES.filter((schema)=>matchesStyleQuery(styleFieldEntry(schema), search)), [
+        search
+    ]);
+    const visibleFlexGridGroup = useMemo(()=>filterStyleGroup(flexGridGroup, search), [
+        flexGridGroup,
+        search
+    ]);
+    const visibleStyleGroups = useMemo(()=>styleGroups.map((group)=>filterStyleGroup(group, search)).filter((group)=>Boolean(group)), [
+        styleGroups,
+        search
+    ]);
+    // Nothing anywhere answered the query — said once, rather than leaving
+    // the author looking at a panel that has silently emptied itself.
+    const hasResults = !searching || Boolean(visibleStyleGroups.length || visibleFlexboxToggles.length || visibleFlexGridGroup || matchesSection('box') || matchesSection('textAlign') || matchesSection('visibility') || matchesSection('classes'));
+    // Re-seeds a group form's initial values when the selection, the
+    // override target or the artboard scope changes (AGL-540/588/1332).
+    const formSeedKey = `${(_ref1 = node == null ? void 0 : node.$id) != null ? _ref1 : ''}:${overrideKey}:${activeBreakpoint != null ? activeBreakpoint : 'base'}` + `:${activeScheme != null ? activeScheme : 'light'}:${activeState != null ? activeState : 'base'}`;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Container, {
+                gutterY: [
+                    1
+                ],
+                dense: true,
+                children: /*#__PURE__*/ _jsx(TextField, {
+                    fullWidth: true,
+                    size: "small",
+                    margin: "dense",
+                    type: "search",
+                    value: query,
+                    onChange: handleSearchChange,
+                    label: "Search styles",
+                    placeholder: "rounded, shadow, spacing…"
+                })
+            }),
+            hasResults ? null : /*#__PURE__*/ _jsx(Container, {
+                gutterY: [
+                    1
+                ],
+                dense: true,
+                children: /*#__PURE__*/ _jsx(Alert, {
+                    severity: "info",
+                    sx: {
+                        fontSize: '0.8125rem'
+                    },
+                    children: `No style matches “${search}”. Try a plainer word — ` + '“rounded”, “shadow”, “spacing”, “hide”.'
+                })
+            }),
+            /*#__PURE__*/ _jsxs(Container, {
+                gutterY: [
+                    1
+                ],
+                dense: true,
+                children: [
+                    /*#__PURE__*/ _jsx(Tooltip, {
+                        title: activeBreakpoint ? `Edits apply from the ${activeBreakpoint.toUpperCase()} ` + 'breakpoint up. Switch the artboard preview to Fluid ' + 'Responsive to edit the base styles.' : 'Edits apply at every screen size. Switch the artboard ' + 'preview to a device size to style that breakpoint only.',
+                        children: /*#__PURE__*/ _jsx(Chip, {
+                            size: "small",
+                            color: activeBreakpoint ? 'primary' : 'default',
+                            label: activeBreakpoint ? `Styling breakpoint: ${activeBreakpoint.toUpperCase()}` : 'Styling: all screen sizes'
+                        })
+                    }),
+                    activeScheme === 'dark' ? /*#__PURE__*/ _jsx(Tooltip, {
+                        title: 'The artboard is previewing the dark scheme: text, ' + 'background, and border color edits apply to dark mode ' + 'only. Other styles still apply to both schemes. Switch ' + 'the artboard back to light to edit the base colors.',
+                        children: /*#__PURE__*/ _jsx(Chip, {
+                            size: "small",
+                            color: "primary",
+                            variant: "outlined",
+                            sx: {
+                                ml: 1
+                            },
+                            label: "Styling: dark scheme"
+                        })
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Container, {
+                gutterY: [
+                    1
+                ],
+                dense: true,
+                sx: {
+                    position: 'relative',
+                    pr: 3
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(HelpTip, {
+                        title: "Hover, focus & other states",
+                        excerpt: "Style how this element looks when someone points at it, presses it or reaches it with the keyboard. Picking a state also shows it on the canvas while you work — that preview is never saved.",
+                        href: besignerDocsUrl('responsiveStyling', '#interaction-states'),
+                        sx: {
+                            position: 'absolute',
+                            top: 0,
+                            right: 8,
+                            zIndex: 1,
+                            fontSize: '0.9em'
+                        }
+                    }),
+                    /*#__PURE__*/ _jsxs(Box, {
+                        sx: {
+                            display: 'flex',
+                            flexWrap: 'nowrap',
+                            alignItems: 'center',
+                            gap: 0.5,
+                            overflowX: 'auto',
+                            // The scrollbar would eat more height than the chips it serves.
+                            scrollbarWidth: 'none',
+                            '&::-webkit-scrollbar': {
+                                display: 'none'
+                            },
+                            // Tightened from the stock small chip so the row clears a narrow
+                            // panel; the 0.75rem type still matches the breakpoint chip above.
+                            '& .MuiChip-label': {
+                                px: 0.75
+                            },
+                            '& .MuiChip-root': {
+                                flexShrink: 0
+                            },
+                            '& .MuiChip-deleteIcon': {
+                                ml: '-2px',
+                                mr: '2px'
+                            }
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Tooltip, {
+                                title: "Styles that apply at rest, and everywhere a state does not override them.",
+                                children: /*#__PURE__*/ _jsx(Chip, {
+                                    size: "small",
+                                    variant: "filled",
+                                    color: activeState ? 'default' : 'primary',
+                                    label: "Default",
+                                    onClick: ()=>selectState(null)
+                                })
+                            }),
+                            SX_STATES.map((state)=>/*#__PURE__*/ _jsx(Tooltip, {
+                                    title: SX_STATE_DESCRIPTIONS[state],
+                                    children: /*#__PURE__*/ _jsx(Chip, {
+                                        size: "small",
+                                        variant: "outlined",
+                                        color: activeState === state ? 'primary' : 'default',
+                                        label: sxHasStateSlice(nodeSx, state) ? `${SX_STATE_LABELS[state]} •` : SX_STATE_LABELS[state],
+                                        onClick: ()=>selectState(state),
+                                        // The X clears the WHOLE slice, and only appears on the state
+                                        // being edited that actually has one — the same clear
+                                        // affordance individual values have, one level up.
+                                        onDelete: activeState === state && sxHasStateSlice(nodeSx, state) ? ()=>clearState(state) : undefined
+                                    })
+                                }, state))
+                        ]
+                    })
+                ]
+            }),
+            activeState ? /*#__PURE__*/ _jsxs(Container, {
+                gutterY: [
+                    1
+                ],
+                dense: true,
+                children: [
+                    /*#__PURE__*/ _jsx(Alert, {
+                        severity: "warning",
+                        sx: {
+                            fontSize: '0.8125rem'
+                        },
+                        children: `The canvas is showing this element's ${SX_STATE_PROSE[activeState]}` + ' state so you can see what you are styling. ' + 'It is a preview — it is not saved and does not affect your ' + 'published page. Choose Default to stop.'
+                    }),
+                    stateAdvisoryText ? /*#__PURE__*/ _jsx(Alert, {
+                        severity: "info",
+                        sx: {
+                            fontSize: '0.8125rem',
+                            mt: 1
+                        },
+                        children: stateAdvisoryText
+                    }) : null
+                ]
+            }) : null,
+            target.isInstanceOverride ? /*#__PURE__*/ _jsxs(Container, {
+                gutterY: [
+                    1
+                ],
+                dense: true,
+                children: [
+                    styleTargets.length > 1 ? /*#__PURE__*/ _jsx(TextField, {
+                        select: true,
+                        fullWidth: true,
+                        size: "small",
+                        margin: "dense",
+                        label: "Style target",
+                        value: overrideKey,
+                        onChange: handleStyleTargetChange,
+                        helperText: target.isLeafOverride ? 'Styling one element inside the component, on this ' + 'instance only. Its content still comes from the ' + 'component.' : "Styling the component's outer element on this " + 'instance. Pick an element inside it to restyle that ' + 'part — a headline that sets its own color ignores ' + 'one set out here.',
+                        children: styleTargets.map((entry)=>/*#__PURE__*/ _jsxs(MenuItem, {
+                                value: entry.key,
+                                // Nesting reads as nesting: the definition's tree is the
+                                // only map an author has of what is inside a component.
+                                sx: {
+                                    pl: 2 + entry.depth * 1.5
+                                },
+                                children: [
+                                    styleTargetLabel(entry),
+                                    overriddenKeys.has(entry.key) ? ' •' : ''
+                                ]
+                            }, entry.key))
+                    }) : null,
+                    /*#__PURE__*/ _jsx(Tooltip, {
+                        title: 'This element is a component instance: style edits here ' + 'apply to this instance only, layered over the ' + "component's own styles. Other placements keep the " + 'component look, and component updates still flow ' + 'through. Use "Edit component" on the Attributes tab to ' + 'change the component for everyone.',
+                        children: /*#__PURE__*/ _jsx(Chip, {
+                            size: "small",
+                            color: overrideProperties.length ? 'secondary' : 'default',
+                            label: overrideProperties.length ? `Instance overrides: ${overrideProperties.length}` : 'Styling this instance'
+                        })
+                    }),
+                    overrideProperties.map((property)=>{
+                        var // property — printing the raw `&:hover` here would
+                        // show an author a selector they never typed
+                        // (AGL-2486).
+                        _sxStateSliceLabel;
+                        return /*#__PURE__*/ _jsx(Tooltip, {
+                            title: 'Clear this override — the instance returns to the ' + "component's own value",
+                            children: /*#__PURE__*/ _jsx(Chip, {
+                                size: "small",
+                                variant: "outlined",
+                                sx: {
+                                    ml: 1,
+                                    mt: 0.5
+                                },
+                                label: property === SX_SCHEME_DARK_KEY ? 'dark scheme' : (_sxStateSliceLabel = sxStateSliceLabel(property)) != null ? _sxStateSliceLabel : property,
+                                onDelete: handleClearOverride(property)
+                            })
+                        }, property);
+                    })
+                ]
+            }) : null,
+            matchesSection('box') ? /*#__PURE__*/ _jsxs(Container, {
+                gutterY: [
+                    2
+                ],
+                dense: true,
+                sx: {
+                    position: 'relative'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(HelpTip, {
+                        title: "Margin & padding",
+                        excerpt: "Click a side of the box to set its space at the active breakpoint — a step from your theme's spacing scale, or an exact amount in the unit of your choice.",
+                        href: besignerDocsUrl('responsiveStyling', '#box-stylers'),
+                        sx: {
+                            position: 'absolute',
+                            top: 0,
+                            right: 8,
+                            zIndex: 1,
+                            fontSize: '0.9em'
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(BoxStyler, {
+                        measurements: boxMeasurements,
+                        spacingSteps: themeScales.spacing,
+                        border: boxBorder,
+                        onChange: handleBoxStylerChange,
+                        // One eye per SIDE, resolved when a side is opened: the box
+                        // editor shows one side's value at a time, and each side is
+                        // its own declaration.
+                        muteForSide: styleMute
+                    })
+                ]
+            }) : null,
+            matchesSection('textAlign') ? /*#__PURE__*/ _jsx(Container, {
+                gutterY: [
+                    2
+                ],
+                dense: true,
+                children: /*#__PURE__*/ _jsx(TextAlignToggleButtonGroup, {
+                    onChange: handleTextAlignChange,
+                    value: effectiveValues['textAlign'],
+                    mute: styleMute('textAlign', 'Text Alignment'),
+                    field: {
+                        component: FieldComponentType.TOGGLE_BUTTON,
+                        name: 'textAlign',
+                        label: 'Text Alignment',
+                        description: 'Sets the horizontal alignment of the inline-level content inside a block element or table-cell box.',
+                        exclusive: true,
+                        options: [
+                            {
+                                value: 'inherit',
+                                icon: ICON_VARIANT_CSS_INHERIT.path,
+                                label: 'Inherit'
+                            },
+                            {
+                                value: 'left',
+                                icon: ICON_VARIANT_ALIGN_LEFT.path,
+                                label: 'Left'
+                            },
+                            {
+                                value: 'center',
+                                icon: ICON_VARIANT_ALIGN_CENTER.path,
+                                label: 'Center'
+                            },
+                            {
+                                value: 'right',
+                                icon: ICON_VARIANT_ALIGN_RIGHT.path,
+                                label: 'Right'
+                            },
+                            {
+                                value: 'justify',
+                                icon: ICON_VARIANT_ALIGN_JUSTIFY.path,
+                                label: 'Justify'
+                            }
+                        ]
+                    }
+                })
+            }) : null,
+            visibleFlexboxToggles.length || visibleFlexGridGroup ? /*#__PURE__*/ _jsxs(Accordion, {
+                expanded: searching,
+                summary: "Flexbox & Grid",
+                help: {
+                    title: 'Flexbox & grid layout',
+                    excerpt: 'Configure the selected element as a flex or grid container — alignment, wrapping, direction, gaps and track lists — and place it inside its own parent’s layout.',
+                    href: besignerDocsUrl('responsiveStyling', '#style-groups')
+                },
+                children: [
+                    visibleFlexboxToggles.map((schema)=>{
+                        var _effectiveValues_schema_name;
+                        return /*#__PURE__*/ _jsx(ToggleButtonFormControl, {
+                            onChange: handleFlexboxChange(schema.name),
+                            schema: schema,
+                            mute: styleMute(schema.name, schema.label),
+                            value: (_effectiveValues_schema_name = effectiveValues[schema.name]) != null ? _effectiveValues_schema_name : ''
+                        }, schema.name);
+                    }),
+                    visibleFlexGridGroup ? /*#__PURE__*/ _jsx(FormRenderer, {
+                        FormTemplate: ElementStylesFormTemplate,
+                        componentMapper: componentMapper,
+                        keepDirtyOnReinitialize: true,
+                        // The SAVE stays scoped to the whole group even while the
+                        // panel shows a filtered subset (AGL-2486): a partial does not
+                        // carry the hidden fields, and `computeStylePartial` would
+                        // then write `undefined` over every one of them — a search
+                        // would silently clear the styles it was only meant to hide.
+                        onSubmit: handleGroupSave(styleGroupFieldNames(visibleFlexGridGroup)),
+                        initialValues: pickStyleValues(styleGroupFieldNames(visibleFlexGridGroup), effectiveValues),
+                        schema: {
+                            fields: withStyleMutes(visibleFlexGridGroup.fields)
+                        }
+                    }, formSeedKey) : null
+                ]
+            }, `flex-grid:${accordionKey}`) : null,
+            matchesSection('visibility') ? /*#__PURE__*/ _jsxs(Accordion, {
+                expanded: searching,
+                summary: "Visibility",
+                help: {
+                    title: 'Visibility per device band',
+                    excerpt: 'Hide the element on whole device bands — e.g. hide a desktop link cluster on mobile and show a menu button instead.',
+                    href: besignerDocsUrl('responsiveStyling', '#visibility-per-device-band')
+                },
+                children: [
+                    VISIBILITY_BANDS.map((band)=>/*#__PURE__*/ _jsx(FormControlLabel, {
+                            control: /*#__PURE__*/ _jsx(Switch, {
+                                size: "small",
+                                checked: hiddenBands.includes(band),
+                                onChange: handleVisibilityChange(band)
+                            }),
+                            label: VISIBILITY_BAND_LABELS[band],
+                            sx: {
+                                display: 'flex',
+                                mb: 0.5
+                            }
+                        }, band)),
+                    /*#__PURE__*/ _jsx(FormHelperText, {
+                        children: 'Hidden bands apply on the live site at those screen widths. ' + 'The canvas preview follows your browser window width, so ' + 'resize the window (or publish) to see the effect.'
+                    })
+                ]
+            }, `visibility:${accordionKey}`) : null,
+            visibleStyleGroups.map((group)=>{
+                const fieldNames = styleGroupFieldNames(group);
+                return /*#__PURE__*/ _jsx(Accordion, {
+                    expanded: searching,
+                    summary: group.label,
+                    help: {
+                        title: `${group.label} styles`,
+                        excerpt: 'Every field edits the selected element at the active breakpoint and scheme scope; the line under each field says what it does, and a ? marks the few whose bare number is not pixels.',
+                        href: besignerDocsUrl('responsiveStyling', '#style-groups')
+                    },
+                    children: /*#__PURE__*/ _jsx(FormRenderer, {
+                        FormTemplate: ElementStylesFormTemplate,
+                        componentMapper: componentMapper,
+                        // Re-seed from the document, but never over the caret
+                        // (AGL-2486). Changing `initialValues` is what carries an
+                        // undo into these fields; on its own it also resets the
+                        // field being typed in the moment a SIBLING key in the same
+                        // group moves. `keepDirtyOnReinitialize` draws the line
+                        // where it belongs: a field whose value still equals what
+                        // was last stored takes the new reading, and one the author
+                        // has since changed keeps their characters until the
+                        // debounced commit stores them.
+                        keepDirtyOnReinitialize: true,
+                        onSubmit: handleGroupSave(fieldNames),
+                        initialValues: pickStyleValues(fieldNames, effectiveValues),
+                        schema: {
+                            fields: withStyleMutes(group.fields)
+                        }
+                    }, formSeedKey)
+                }, `${group.$id}:${accordionKey}`);
+            }),
+            matchesSection('classes') ? /*#__PURE__*/ _jsxs(Accordion, {
+                expanded: searching,
+                summary: "Classes & custom CSS",
+                help: {
+                    title: 'Custom classes & CSS',
+                    excerpt: 'Attach reusable style classes to the element, or write raw CSS (sx) for anything the panels don’t cover.',
+                    href: besignerDocsUrl('responsiveStyling', '#custom-classes')
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(ElementClassesField, {
+                        node: node
+                    }),
+                    /*#__PURE__*/ _jsx(CustomCssForm, {
+                        node: node,
+                        breakpoint: activeBreakpoint,
+                        overrideKey: overrideKey
+                    })
+                ]
+            }, `classes:${accordionKey}`) : null,
+            /*#__PURE__*/ _jsx(Container, {
+                gutterY: [
+                    2
+                ],
+                dense: true,
+                children: /*#__PURE__*/ _jsx(FormControl, {
+                    margin: "none",
+                    fullWidth: true,
+                    children: /*#__PURE__*/ _jsx(Button, {
+                        onClick: ()=>deleteElementCallback(node),
+                        sx: {
+                            color: 'error.main'
+                        },
+                        fullWidth: true,
+                        children: "Delete Element"
+                    })
+                })
+            })
+        ]
+    });
+}));
+ElementStylesForm.displayName = 'ElementStylesForm';
+export default ElementStylesForm;
+
+//# sourceMappingURL=element-styles-form.component.js.map