@aglyn/besigner-ui 1.0.0-beta.143

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

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

package/src/lib/components/empty-document-slot.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @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.
+ */
+/**
+ * Stand-in for an empty screen document.
+ *
+ * An empty screen has nothing to aim at. Inside a shared layout that is not
+ * merely unhelpful, it is invisible: the layout's slot passes its children
+ * straight through, so a screen with no nodes collapses to a ZERO-HEIGHT
+ * strip pinched between locked chrome — on the marketing site the nav
+ * rendered directly into the footer with no gap at all. There was no region
+ * to click, nothing to drop onto, and no hint that the screen's own content
+ * belongs in between.
+ *
+ * Rendering this as the root leaf's child rather than as a sibling is what
+ * makes drag-and-drop work: the root is already wrapped in
+ * `DraggableDroppable`, so giving it height is enough for a drop to resolve
+ * against the document root. Clicking opens the same Add Element drawer the
+ * INSERT menu uses, with no parent — which the drawer callback resolves to
+ * the root.
+ */
+export declare function EmptyDocumentSlot(): import("react").JSX.Element;
+export declare namespace EmptyDocumentSlot {
+    var displayName: string;
+}
+export default EmptyDocumentSlot;

package/src/lib/components/empty-document-slot.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { mdiPlusBoxOutline } from "@aglyn/shared-data-mdi";
+import { MdiIcon } from "@aglyn/shared-ui-jsx";
+import { alpha, Box } from "@mui/material";
+import { useCallback } from "react";
+import { useAddElementDrawerCallback } from "../hooks/use-add-element-drawer-callback.js";
+/** Editor chrome, so the accent is literal — see `SlotMarker` in node-leaf. */ const SLOT_ACCENT = '#00B0FF';
+/**
+ * Stand-in for an empty screen document.
+ *
+ * An empty screen has nothing to aim at. Inside a shared layout that is not
+ * merely unhelpful, it is invisible: the layout's slot passes its children
+ * straight through, so a screen with no nodes collapses to a ZERO-HEIGHT
+ * strip pinched between locked chrome — on the marketing site the nav
+ * rendered directly into the footer with no gap at all. There was no region
+ * to click, nothing to drop onto, and no hint that the screen's own content
+ * belongs in between.
+ *
+ * Rendering this as the root leaf's child rather than as a sibling is what
+ * makes drag-and-drop work: the root is already wrapped in
+ * `DraggableDroppable`, so giving it height is enough for a drop to resolve
+ * against the document root. Clicking opens the same Add Element drawer the
+ * INSERT menu uses, with no parent — which the drawer callback resolves to
+ * the root.
+ */ export function EmptyDocumentSlot() {
+    const addElement = useAddElementDrawerCallback();
+    const handleClick = useCallback(()=>{
+        // No parent: the drawer callback falls back to the document root, which
+        // is the only correct target for a document with nothing in it.
+        void addElement();
+    }, [
+        addElement
+    ]);
+    return /*#__PURE__*/ _jsxs(Box, {
+        "data-aglyn-empty-document": "",
+        role: "button",
+        tabIndex: 0,
+        onClick: handleClick,
+        onKeyDown: (event)=>{
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                handleClick();
+            }
+        },
+        sx: {
+            // NO outer margin (AGL-1265). This box IS the document: it is the
+            // root leaf's only child, and a drop anywhere on it resolves against
+            // the document root. A margin here bought nothing and cost alignment
+            // — measured, `m: 2` pushed the dashed border 16px inside the root's
+            // border box on the LEFT and RIGHT, while the vertical margins
+            // collapsed straight through the root and showed no gap at all. So
+            // the one dashed rectangle on an empty canvas sat inside the grey
+            // dotted document outline and inside the selection overlay (which
+            // measures the root leaf, `node-overlay.tsx`), reading as an editor
+            // that cannot line its own chrome up. Padding, not margin, keeps the
+            // label off the edge.
+            p: 4,
+            minHeight: 220,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 1,
+            cursor: 'pointer',
+            borderWidth: 2,
+            borderStyle: 'dashed',
+            borderColor: SLOT_ACCENT,
+            backgroundColor: alpha(SLOT_ACCENT, 0.06),
+            borderRadius: 1,
+            color: 'text.secondary',
+            fontFamily: 'sans-serif',
+            textAlign: 'center',
+            transition: 'background-color 120ms ease, border-color 120ms ease',
+            '&:hover, &:focus-visible': {
+                backgroundColor: alpha(SLOT_ACCENT, 0.12)
+            }
+        },
+        children: [
+            /*#__PURE__*/ _jsx(MdiIcon, {
+                path: mdiPlusBoxOutline.path,
+                sx: {
+                    color: SLOT_ACCENT
+                }
+            }),
+            /*#__PURE__*/ _jsx(Box, {
+                component: "span",
+                sx: {
+                    color: SLOT_ACCENT,
+                    fontWeight: 700
+                },
+                children: 'This screen is empty'
+            }),
+            /*#__PURE__*/ _jsx(Box, {
+                component: "span",
+                sx: {
+                    fontSize: 13
+                },
+                children: 'Drag an element here, or click to add one'
+            })
+        ]
+    });
+}
+EmptyDocumentSlot.displayName = 'EmptyDocumentSlot';
+export default EmptyDocumentSlot;
+
+//# sourceMappingURL=empty-document-slot.js.map

package/src/lib/components/empty-document-slot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/empty-document-slot.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 { mdiPlusBoxOutline } from '@aglyn/shared-data-mdi'\nimport { MdiIcon } from '@aglyn/shared-ui-jsx'\nimport { alpha, Box } from '@mui/material'\nimport { useCallback } from 'react'\nimport { useAddElementDrawerCallback } from '../hooks/use-add-element-drawer-callback'\n\n/** Editor chrome, so the accent is literal — see `SlotMarker` in node-leaf. */\nconst SLOT_ACCENT = '#00B0FF'\n\n/**\n * Stand-in for an empty screen document.\n *\n * An empty screen has nothing to aim at. Inside a shared layout that is not\n * merely unhelpful, it is invisible: the layout's slot passes its children\n * straight through, so a screen with no nodes collapses to a ZERO-HEIGHT\n * strip pinched between locked chrome — on the marketing site the nav\n * rendered directly into the footer with no gap at all. There was no region\n * to click, nothing to drop onto, and no hint that the screen's own content\n * belongs in between.\n *\n * Rendering this as the root leaf's child rather than as a sibling is what\n * makes drag-and-drop work: the root is already wrapped in\n * `DraggableDroppable`, so giving it height is enough for a drop to resolve\n * against the document root. Clicking opens the same Add Element drawer the\n * INSERT menu uses, with no parent — which the drawer callback resolves to\n * the root.\n */\nexport function EmptyDocumentSlot() {\n  const addElement = useAddElementDrawerCallback()\n  const handleClick = useCallback(() => {\n    // No parent: the drawer callback falls back to the document root, which\n    // is the only correct target for a document with nothing in it.\n    void addElement()\n  }, [addElement])\n\n  return (\n    <Box\n      data-aglyn-empty-document=\"\"\n      role=\"button\"\n      tabIndex={0}\n      onClick={handleClick}\n      onKeyDown={(event) => {\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault()\n          handleClick()\n        }\n      }}\n      sx={{\n        // NO outer margin (AGL-1265). This box IS the document: it is the\n        // root leaf's only child, and a drop anywhere on it resolves against\n        // the document root. A margin here bought nothing and cost alignment\n        // — measured, `m: 2` pushed the dashed border 16px inside the root's\n        // border box on the LEFT and RIGHT, while the vertical margins\n        // collapsed straight through the root and showed no gap at all. So\n        // the one dashed rectangle on an empty canvas sat inside the grey\n        // dotted document outline and inside the selection overlay (which\n        // measures the root leaf, `node-overlay.tsx`), reading as an editor\n        // that cannot line its own chrome up. Padding, not margin, keeps the\n        // label off the edge.\n        p: 4,\n        minHeight: 220,\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        gap: 1,\n        cursor: 'pointer',\n        borderWidth: 2,\n        borderStyle: 'dashed',\n        borderColor: SLOT_ACCENT,\n        backgroundColor: alpha(SLOT_ACCENT, 0.06),\n        borderRadius: 1,\n        color: 'text.secondary',\n        fontFamily: 'sans-serif',\n        textAlign: 'center',\n        transition: 'background-color 120ms ease, border-color 120ms ease',\n        '&:hover, &:focus-visible': {\n          backgroundColor: alpha(SLOT_ACCENT, 0.12),\n        },\n      }}\n    >\n      <MdiIcon path={mdiPlusBoxOutline.path} sx={{ color: SLOT_ACCENT }} />\n      <Box component=\"span\" sx={{ color: SLOT_ACCENT, fontWeight: 700 }}>\n        {'This screen is empty'}\n      </Box>\n      <Box component=\"span\" sx={{ fontSize: 13 }}>\n        {'Drag an element here, or click to add one'}\n      </Box>\n    </Box>\n  )\n}\nEmptyDocumentSlot.displayName = 'EmptyDocumentSlot'\n\nexport default EmptyDocumentSlot\n"],"names":["mdiPlusBoxOutline","MdiIcon","alpha","Box","useCallback","useAddElementDrawerCallback","SLOT_ACCENT","EmptyDocumentSlot","addElement","handleClick","data-aglyn-empty-document","role","tabIndex","onClick","onKeyDown","event","key","preventDefault","sx","p","minHeight","display","flexDirection","alignItems","justifyContent","gap","cursor","borderWidth","borderStyle","borderColor","backgroundColor","borderRadius","color","fontFamily","textAlign","transition","path","component","fontWeight","fontSize","displayName"],"mappings":";AAAA;;;;;;;;;;;;;;;CAeC,GAED,SAASA,iBAAiB,QAAQ,yBAAwB;AAC1D,SAASC,OAAO,QAAQ,uBAAsB;AAC9C,SAASC,KAAK,EAAEC,GAAG,QAAQ,gBAAe;AAC1C,SAASC,WAAW,QAAQ,QAAO;AACnC,SAASC,2BAA2B,QAAQ,8CAA0C;AAEtF,6EAA6E,GAC7E,MAAMC,cAAc;AAEpB;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,SAASC;IACd,MAAMC,aAAaH;IACnB,MAAMI,cAAcL,YAAY;QAC9B,wEAAwE;QACxE,gEAAgE;QAChE,KAAKI;IACP,GAAG;QAACA;KAAW;IAEf,qBACE,MAACL;QACCO,6BAA0B;QAC1BC,MAAK;QACLC,UAAU;QACVC,SAASJ;QACTK,WAAW,CAACC;YACV,IAAIA,MAAMC,GAAG,KAAK,WAAWD,MAAMC,GAAG,KAAK,KAAK;gBAC9CD,MAAME,cAAc;gBACpBR;YACF;QACF;QACAS,IAAI;YACF,kEAAkE;YAClE,qEAAqE;YACrE,qEAAqE;YACrE,qEAAqE;YACrE,+DAA+D;YAC/D,mEAAmE;YACnE,kEAAkE;YAClE,kEAAkE;YAClE,oEAAoE;YACpE,qEAAqE;YACrE,sBAAsB;YACtBC,GAAG;YACHC,WAAW;YACXC,SAAS;YACTC,eAAe;YACfC,YAAY;YACZC,gBAAgB;YAChBC,KAAK;YACLC,QAAQ;YACRC,aAAa;YACbC,aAAa;YACbC,aAAavB;YACbwB,iBAAiB5B,MAAMI,aAAa;YACpCyB,cAAc;YACdC,OAAO;YACPC,YAAY;YACZC,WAAW;YACXC,YAAY;YACZ,4BAA4B;gBAC1BL,iBAAiB5B,MAAMI,aAAa;YACtC;QACF;;0BAEA,KAACL;gBAAQmC,MAAMpC,kBAAkBoC,IAAI;gBAAElB,IAAI;oBAAEc,OAAO1B;gBAAY;;0BAChE,KAACH;gBAAIkC,WAAU;gBAAOnB,IAAI;oBAAEc,OAAO1B;oBAAagC,YAAY;gBAAI;0BAC7D;;0BAEH,KAACnC;gBAAIkC,WAAU;gBAAOnB,IAAI;oBAAEqB,UAAU;gBAAG;0BACtC;;;;AAIT;AACAhC,kBAAkBiC,WAAW,GAAG;AAEhC,eAAejC,kBAAiB"}

package/src/lib/components/empty-results.d.ts

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

package/src/lib/components/empty-results.js

@@ -0,0 +1,131 @@
+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 } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2023 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 { mergeSxProps } from "@aglyn/shared-ui-theme";
+import { SvgIcon } from "@mui/material";
+import { Box } from "@mui/system";
+import { forwardRef } from "react";
+export const EmptyResults = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { label, sx } = props, rest = _object_without_properties_loose(props, [
+        "label",
+        "sx"
+    ]);
+    return /*#__PURE__*/ _jsxs(Box, _extends({
+        ref: ref,
+        sx: mergeSxProps({
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 1,
+            height: 1,
+            textAlign: 'center',
+            padding: 1,
+            [`& .label`]: {
+                marginTop: 1
+            },
+            [`& .antEmptyImg1`]: {
+                fill: (theme)=>theme.palette.mode === 'light' ? '#AEB8C2' : '#262626'
+            },
+            [`& .antEmptyImg2`]: {
+                fill: (theme)=>theme.palette.mode === 'light' ? '#F5F5F7' : '#595959'
+            },
+            [`& .antEmptyImg3`]: {
+                fill: (theme)=>theme.palette.mode === 'light' ? '#DCE0E6' : '#434343'
+            },
+            [`& .antEmptyImg4`]: {
+                fill: (theme)=>theme.palette.mode === 'light' ? '#FFFFFF' : '#1C1C1C'
+            },
+            [`& .antEmptyImg5`]: {
+                fillOpacity: (theme)=>theme.palette.mode === 'light' ? '0.8' : '0.08',
+                fill: (theme)=>theme.palette.mode === 'light' ? '#F5F5F5' : '#FFFFFF'
+            }
+        }, sx)
+    }, rest, {
+        children: [
+            /*#__PURE__*/ _jsx(SvgIcon, {
+                width: "120",
+                height: "100",
+                viewBox: "0 0 184 152",
+                "aria-hidden": true,
+                focusable: "false",
+                sx: {
+                    width: 'unset',
+                    height: 'unset'
+                },
+                children: /*#__PURE__*/ _jsxs("g", {
+                    fill: "none",
+                    fillRule: "evenodd",
+                    children: [
+                        /*#__PURE__*/ _jsxs("g", {
+                            transform: "translate(24 31.67)",
+                            children: [
+                                /*#__PURE__*/ _jsx("ellipse", {
+                                    className: "antEmptyImg5",
+                                    cx: "67.797",
+                                    cy: "106.89",
+                                    rx: "67.797",
+                                    ry: "12.668"
+                                }),
+                                /*#__PURE__*/ _jsx("path", {
+                                    className: "antEmptyImg1",
+                                    d: "M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"
+                                }),
+                                /*#__PURE__*/ _jsx("path", {
+                                    className: "antEmptyImg2",
+                                    d: "M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"
+                                }),
+                                /*#__PURE__*/ _jsx("path", {
+                                    className: "antEmptyImg3",
+                                    d: "M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx("path", {
+                            className: "antEmptyImg3",
+                            d: "M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"
+                        }),
+                        /*#__PURE__*/ _jsxs("g", {
+                            className: "antEmptyImg4",
+                            transform: "translate(149.65 15.383)",
+                            children: [
+                                /*#__PURE__*/ _jsx("ellipse", {
+                                    cx: "20.654",
+                                    cy: "3.167",
+                                    rx: "2.849",
+                                    ry: "2.815"
+                                }),
+                                /*#__PURE__*/ _jsx("path", {
+                                    d: "M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "label",
+                children: label != null ? label : 'Nothing here...'
+            })
+        ]
+    }));
+});
+EmptyResults.displayName = 'EmptyResults';
+export default EmptyResults;
+
+//# sourceMappingURL=empty-results.js.map

package/src/lib/components/empty-results.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/empty-results.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2023 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { mergeSxProps } from '@aglyn/shared-ui-theme'\nimport { type BoxProps, SvgIcon } from '@mui/material'\nimport { Box } from '@mui/system'\nimport { forwardRef } from 'react'\n\nexport interface EmptyResultsProps extends BoxProps {\n  label?: JSX.Node\n}\n\nexport const EmptyResults = forwardRef<any, EmptyResultsProps>((props, ref) => {\n  const { label, sx, ...rest } = props\n\n  return (\n    <Box\n      ref={ref}\n      sx={mergeSxProps(\n        {\n          display: 'flex',\n          flexDirection: 'column',\n          alignItems: 'center',\n          justifyContent: 'center',\n          width: 1,\n          height: 1,\n          textAlign: 'center',\n          padding: 1,\n          [`& .label`]: {\n            marginTop: 1,\n          },\n          [`& .antEmptyImg1`]: {\n            fill: (theme) =>\n              theme.palette.mode === 'light' ? '#AEB8C2' : '#262626',\n          },\n          [`& .antEmptyImg2`]: {\n            fill: (theme) =>\n              theme.palette.mode === 'light' ? '#F5F5F7' : '#595959',\n          },\n          [`& .antEmptyImg3`]: {\n            fill: (theme) =>\n              theme.palette.mode === 'light' ? '#DCE0E6' : '#434343',\n          },\n          [`& .antEmptyImg4`]: {\n            fill: (theme) =>\n              theme.palette.mode === 'light' ? '#FFFFFF' : '#1C1C1C',\n          },\n          [`& .antEmptyImg5`]: {\n            fillOpacity: (theme) =>\n              theme.palette.mode === 'light' ? '0.8' : '0.08',\n            fill: (theme) =>\n              theme.palette.mode === 'light' ? '#F5F5F5' : '#FFFFFF',\n          },\n        },\n        sx,\n      )}\n      {...rest}\n    >\n      <SvgIcon\n        width=\"120\"\n        height=\"100\"\n        viewBox=\"0 0 184 152\"\n        aria-hidden\n        focusable=\"false\"\n        sx={{ width: 'unset', height: 'unset' }}\n      >\n        <g fill=\"none\" fillRule=\"evenodd\">\n          <g transform=\"translate(24 31.67)\">\n            <ellipse\n              className=\"antEmptyImg5\"\n              cx=\"67.797\"\n              cy=\"106.89\"\n              rx=\"67.797\"\n              ry=\"12.668\"\n            />\n            <path\n              className=\"antEmptyImg1\"\n              d=\"M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z\"\n            />\n            <path\n              className=\"antEmptyImg2\"\n              d=\"M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z\"\n            />\n            <path\n              className=\"antEmptyImg3\"\n              d=\"M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z\"\n            />\n          </g>\n          <path\n            className=\"antEmptyImg3\"\n            d=\"M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z\"\n          />\n          <g className=\"antEmptyImg4\" transform=\"translate(149.65 15.383)\">\n            <ellipse cx=\"20.654\" cy=\"3.167\" rx=\"2.849\" ry=\"2.815\" />\n            <path d=\"M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z\" />\n          </g>\n        </g>\n      </SvgIcon>\n      <div className=\"label\">{label ?? 'Nothing here...'}</div>\n    </Box>\n  )\n})\nEmptyResults.displayName = 'EmptyResults'\n\nexport default EmptyResults\n"],"names":["mergeSxProps","SvgIcon","Box","forwardRef","EmptyResults","props","ref","label","sx","rest","display","flexDirection","alignItems","justifyContent","width","height","textAlign","padding","marginTop","fill","theme","palette","mode","fillOpacity","viewBox","aria-hidden","focusable","g","fillRule","transform","ellipse","className","cx","cy","rx","ry","path","d","div","displayName"],"mappings":";;;AAAA;;;;;;;;;;;;;;;CAeC,GAED,SAASA,YAAY,QAAQ,yBAAwB;AACrD,SAAwBC,OAAO,QAAQ,gBAAe;AACtD,SAASC,GAAG,QAAQ,cAAa;AACjC,SAASC,UAAU,QAAQ,QAAO;AAMlC,OAAO,MAAMC,6BAAeD,WAAmC,CAACE,OAAOC;IACrE,MAAM,EAAEC,KAAK,EAAEC,EAAE,EAAW,GAAGH,OAATI,wCAASJ;;;;IAE/B,qBACE,MAACH;QACCI,KAAKA;QACLE,IAAIR,aACF;YACEU,SAAS;YACTC,eAAe;YACfC,YAAY;YACZC,gBAAgB;YAChBC,OAAO;YACPC,QAAQ;YACRC,WAAW;YACXC,SAAS;YACT,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE;gBACZC,WAAW;YACb;YACA,CAAC,CAAC,eAAe,CAAC,CAAC,EAAE;gBACnBC,MAAM,CAACC,QACLA,MAAMC,OAAO,CAACC,IAAI,KAAK,UAAU,YAAY;YACjD;YACA,CAAC,CAAC,eAAe,CAAC,CAAC,EAAE;gBACnBH,MAAM,CAACC,QACLA,MAAMC,OAAO,CAACC,IAAI,KAAK,UAAU,YAAY;YACjD;YACA,CAAC,CAAC,eAAe,CAAC,CAAC,EAAE;gBACnBH,MAAM,CAACC,QACLA,MAAMC,OAAO,CAACC,IAAI,KAAK,UAAU,YAAY;YACjD;YACA,CAAC,CAAC,eAAe,CAAC,CAAC,EAAE;gBACnBH,MAAM,CAACC,QACLA,MAAMC,OAAO,CAACC,IAAI,KAAK,UAAU,YAAY;YACjD;YACA,CAAC,CAAC,eAAe,CAAC,CAAC,EAAE;gBACnBC,aAAa,CAACH,QACZA,MAAMC,OAAO,CAACC,IAAI,KAAK,UAAU,QAAQ;gBAC3CH,MAAM,CAACC,QACLA,MAAMC,OAAO,CAACC,IAAI,KAAK,UAAU,YAAY;YACjD;QACF,GACAd;OAEEC;;0BAEJ,KAACR;gBACCa,OAAM;gBACNC,QAAO;gBACPS,SAAQ;gBACRC,aAAW;gBACXC,WAAU;gBACVlB,IAAI;oBAAEM,OAAO;oBAASC,QAAQ;gBAAQ;0BAEtC,cAAA,MAACY;oBAAER,MAAK;oBAAOS,UAAS;;sCACtB,MAACD;4BAAEE,WAAU;;8CACX,KAACC;oCACCC,WAAU;oCACVC,IAAG;oCACHC,IAAG;oCACHC,IAAG;oCACHC,IAAG;;8CAEL,KAACC;oCACCL,WAAU;oCACVM,GAAE;;8CAEJ,KAACD;oCACCL,WAAU;oCACVM,GAAE;;8CAEJ,KAACD;oCACCL,WAAU;oCACVM,GAAE;;;;sCAGN,KAACD;4BACCL,WAAU;4BACVM,GAAE;;sCAEJ,MAACV;4BAAEI,WAAU;4BAAeF,WAAU;;8CACpC,KAACC;oCAAQE,IAAG;oCAASC,IAAG;oCAAQC,IAAG;oCAAQC,IAAG;;8CAC9C,KAACC;oCAAKC,GAAE;;;;;;;0BAId,KAACC;gBAAIP,WAAU;0BAASxB,gBAAAA,QAAS;;;;AAGvC,GAAE;AACFH,aAAamC,WAAW,GAAG;AAE3B,eAAenC,aAAY"}

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

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