@aglyn/besigner-ui 1.0.0-beta.143

package/src/lib/utils/state-sx.js

@@ -0,0 +1,338 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+/**
+ * @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 { mergeNodeSx, mergeSchemeValue } from "@aglyn/aglyn";
+import isEqual from "lodash-es/isEqual.js";
+/**
+ * Interaction-state style slices for the Styles panel (AGL-2486 item 39).
+ *
+ * Hover, focus and active states are reachable in the document already — the
+ * JSS tab's own caption advertises nested selectors — but only by typing raw
+ * sx, which most of this panel's audience cannot do. These slices are the
+ * picker for the same capability.
+ *
+ * ## What is stored is the REAL selector
+ *
+ * A state slice is `node.sx['&:hover']`, not a reserved `@state hover` key.
+ * That choice is what makes this feature need NO renderer change at all:
+ * MUI's `styleFunctionSx` hands an unrecognised object key straight back to
+ * itself (`wrapper.sx = value; css[styleKey] = styleFunctionSx(wrapper)`), so
+ * the slice gets the full sx treatment — palette tokens, system-prop aliases
+ * (`bgcolor`), and responsive breakpoint objects — identically on the canvas,
+ * in Preview and on the published page. A reserved key would have needed a
+ * substitution pass on every render path, and the recorded reason the scheme
+ * slices work is that there is exactly ONE such path.
+ *
+ * It also means the panel and the JSS tab are editing the same thing rather
+ * than two representations of it, and that an author who already hand-wrote
+ * `&:hover` finds the panel showing it.
+ *
+ * ## Nesting order: state OUTER, scheme INNER, breakpoints innermost
+ *
+ * ```ts
+ * { '&:hover': { '@scheme dark': { color: { xs: '#eee', md: '#fff' } } } }
+ * ```
+ *
+ * Not a new invariant — `scheme-rendering.spec.tsx` already proves
+ * `resolveSchemeSx` resolves exactly this shape, because it recurses into
+ * nested selector objects. The REVERSE order would be a bug: `mergeSchemeValue`
+ * replaces a nested object wholesale, so a `@scheme dark` slice containing
+ * `&:hover` would clobber the light hover block rather than merge with it.
+ *
+ * ## The scrub is not bypassed
+ *
+ * `sanitizeAuthorSx` walks nested records with no key filtering, and
+ * `leaf-author-css.spec.tsx` already asserts that a `url(http://…)` inside an
+ * `&:hover` slice is rewritten to `about:invalid`. Author CSS in a state slice
+ * goes through the same scrub as author CSS anywhere else.
+ */ /**
+ * The interaction states the panel offers, in the order the chip row shows
+ * them.
+ *
+ * ## Why plain `:focus` is deliberately absent — do not "fix" this
+ *
+ * `:focus` matches on mouse and touch focus as well as keyboard focus, so the
+ * overwhelmingly common thing an author does with a `:focus` control is remove
+ * the ring they consider ugly on click — and that removes it for keyboard
+ * users too, who have no other way to tell where they are on the page. Adding
+ * the field would mean shipping a purpose-built UI for an accessibility
+ * regression, on a product whose authors are explicitly not expected to know
+ * CSS.
+ *
+ * `:focus-visible` is the same capability without that failure mode: the
+ * browser only matches it when it judges a focus indicator should be shown
+ * (keyboard and programmatic focus, not a mouse click), so styling it can
+ * essentially only ADD an indicator. That covers the legitimate reason to
+ * style focus — making the ring match the brand — while making the harmful
+ * one much harder to reach by accident.
+ *
+ * An author with a genuine `:focus` need still has the JSS (sx) tab, which
+ * accepts any selector. That friction is the point: it is reachable by someone
+ * who knows what they are doing and not by someone clicking through a panel.
+ */ export const SX_STATES = Object.freeze([
+    'hover',
+    'active',
+    'focusVisible',
+    'disabled'
+]);
+/** The CSS selector each state is stored under in `node.sx`. */ export const SX_STATE_SELECTORS = Object.freeze({
+    hover: '&:hover',
+    active: '&:active',
+    focusVisible: '&:focus-visible',
+    disabled: '&:disabled'
+});
+/**
+ * Chip labels. **Keep them short — this row must never wrap.**
+ *
+ * These shipped once as "Focus (keyboard)", to stop a bare "Focus" implying
+ * that the mouse-click ring is what you are styling. The reasoning was right
+ * and the label was wrong: measured against the styles panel, the five chips
+ * needed **368px** of the **359px** a default 375px panel has, so `Disabled`
+ *
+ * Short labels bring the row to 272px, which fits every panel width down to
+ * about 290px, and {@link SX_STATE_LABEL_MAX} pins them so the next person to
+ * reach for a clarifying parenthetical gets a failing test instead of a
+ * wrapped row.
+ *
+ * The keyboard nuance did not get dropped, it moved somewhere better than a
+ * label: {@link SX_STATE_DESCRIPTIONS} carries the full rule in the chip
+ * tooltip, and {@link SX_STATE_PROSE} puts "keyboard focus" in the preview
+ * banner — which appears the moment Focus is selected, so it is READ rather
+ * than hovered for. That is the same job the long label was doing, done where
+ * there is room for it.
+ */ export const SX_STATE_LABELS = Object.freeze({
+    hover: 'Hover',
+    active: 'Active',
+    focusVisible: 'Focus',
+    disabled: 'Disabled'
+});
+/**
+ * The longest a chip label may be before the row stops fitting a narrow
+ * panel. `Disabled` is 8 and is the longest today; the budget is measured,
+ * not guessed — see {@link SX_STATE_LABELS}.
+ */ export const SX_STATE_LABEL_MAX = 8;
+/** The same states in running prose — banners, the override chips. */ export const SX_STATE_PROSE = Object.freeze({
+    hover: 'hover',
+    active: 'active',
+    focusVisible: 'keyboard focus',
+    disabled: 'disabled'
+});
+/**
+ * What each state means, in the panel's voice — shown as the chip tooltip so
+ * an author can tell `Active` (held down) from `Focus` (keyboard) without
+ * knowing the selectors.
+ */ export const SX_STATE_DESCRIPTIONS = Object.freeze({
+    hover: 'While the pointer is over this element.',
+    active: 'While this element is being pressed or clicked.',
+    focusVisible: 'While this element has keyboard focus. Styling this state adds to the ' + 'focus indicator keyboard visitors rely on — it will not show on a ' + 'plain mouse click.',
+    disabled: 'While this element is disabled. Only form controls can be disabled.'
+});
+const STATE_SELECTOR_SET = new Set(Object.values(SX_STATE_SELECTORS));
+/** Whether an sx key is one of the state selectors this module owns. */ export function isSxStateSelector(key) {
+    return STATE_SELECTOR_SET.has(key);
+}
+/**
+ * The state a stored selector belongs to, or null when the key is not one of
+ * ours. Lets a surface that lists RAW sx keys — the instance-override chips —
+ * name a slice the way the chip row does instead of printing `&:hover` at an
+ * author who never typed it.
+ */ export function sxStateForSelector(key) {
+    var _SX_STATES_find;
+    return (_SX_STATES_find = SX_STATES.find((state)=>SX_STATE_SELECTORS[state] === key)) != null ? _SX_STATES_find : null;
+}
+/** The override-chip label for a raw sx key, or null to fall through. */ export function sxStateSliceLabel(key) {
+    const state = sxStateForSelector(key);
+    return state ? `${SX_STATE_PROSE[state]} state` : null;
+}
+const isPlainObject = (value)=>typeof value === 'object' && value !== null && !Array.isArray(value);
+/**
+ * The stored slice for a state, or undefined when the element has none.
+ *
+ * `state: null` is the base scope and returns the record itself, so callers
+ * can pass the panel's active scope through without branching.
+ */ export function readStateSlice(sx, state) {
+    if (!state) return sx;
+    const slice = sx == null ? void 0 : sx[SX_STATE_SELECTORS[state]];
+    return isPlainObject(slice) ? slice : undefined;
+}
+/**
+ * What the element actually LOOKS like in a state: the base styles with the
+ * state slice merged over them, which is what the browser paints because a
+ * `:hover` block only overrides the properties it names.
+ *
+ * This is what the panel reads from, so a field the author has not overridden
+ * for hover shows the inherited base value rather than empty — the same
+ * reading the breakpoint scope gives, and the reason the write seam can skip
+ * a value that would not change anything.
+ *
+ * `mergeNodeSx` is the house merge: responsive objects cascade mobile-first,
+ * `@scheme dark` and nested selector blocks merge key by key. Reusing it keeps
+ * the panel's reading identical to the graft's.
+ *
+ * Returns the input BY IDENTITY at base scope or when no slice exists, which
+ * is every element that has never been given a state style.
+ */ /**
+ * The element's base styles with every state selector removed — the baseline a
+ * state slice is a difference FROM. Returned by identity when the element
+ * carries no state slices at all, which is every element today.
+ */ export function stripStateSlices(sx) {
+    if (!sx) return sx;
+    if (!Object.keys(sx).some(isSxStateSelector)) return sx;
+    const base = _extends({}, sx);
+    for (const selector of STATE_SELECTOR_SET)delete base[selector];
+    return base;
+}
+export function stateScopedSx(sx, state) {
+    const slice = state ? readStateSlice(sx, state) : undefined;
+    if (!slice) return sx;
+    // Every state selector is dropped from the reading: the slice being edited
+    // is merged in below, and a SIBLING state's block is not part of what this
+    // state looks like.
+    const base = stripStateSlices(sx);
+    return mergeNodeSx(base, slice);
+}
+/**
+ * Replaces one state's slice, removing it entirely when it comes back empty.
+ *
+ * An emptied slice is DELETED rather than stored as `{}` — the same rule
+ * `writeSxValue` applies to an emptied scheme slice and `getNodeStyleTarget`
+ * applies to an emptied instance override. A `{}` left behind would make
+ * "does this element have a hover style" answer yes forever, which the chip's
+ * own dot indicator and the override badge both read.
+ *
+ * Returns a new record; the input is never mutated.
+ */ export function writeStateSlice(sx, state, slice) {
+    const next = _extends({}, sx);
+    const selector = SX_STATE_SELECTORS[state];
+    if (slice && Object.keys(slice).length > 0) next[selector] = slice;
+    else delete next[selector];
+    return next;
+}
+/**
+ * The slice implied by an edited state-scope reading (AGL-2486).
+ *
+ * The panel edits the MERGED record — base with the slice over it, which is
+ * what the element actually looks like in that state — so the write has to be
+ * split back out: only what genuinely differs from the base belongs in the
+ * slice. That split is what gives the three behaviours the panel needs, all
+ * from one rule:
+ *
+ * - a property the author changed for this state lands in the slice;
+ * - a property the author set back to the base value LEAVES the slice, because
+ *   a `:hover` block that restates the base paints nothing and would show as a
+ *   permanent override in the chip's dot;
+ * - a property the author cleared leaves the slice too, so the state falls
+ *   back to inheriting the base — which is the only thing a pseudo-class block
+ *   can express, since CSS has no way to un-declare a property.
+ *
+ * `base` must already have the state selectors stripped (which
+ * {@link stateScopedSx} does), or a sibling state's block would read as a
+ * difference and be copied in.
+ */ export function deriveStateSlice(base, edited) {
+    const slice = {};
+    for (const [key, value] of Object.entries(edited != null ? edited : {})){
+        if (isSxStateSelector(key)) continue;
+        if (isEqual(base == null ? void 0 : base[key], value)) continue;
+        slice[key] = value;
+    }
+    return slice;
+}
+/** Whether the element carries any styles for this state. */ export function sxHasStateSlice(sx, state) {
+    const slice = readStateSlice(sx, state);
+    return !!slice && Object.keys(slice).length > 0;
+}
+/** Every state the element currently carries a slice for, in chip order. */ export function sxStatesWithSlices(sx) {
+    return SX_STATES.filter((state)=>sxHasStateSlice(sx, state));
+}
+/**
+ * Components that put a real tab stop / focusable control in the DOM. Matched
+ * on the component id, which is the only thing the panel reliably knows about
+ * an element before it renders.
+ */ const INTERACTIVE_COMPONENT_PATTERN = /button|link|anchor|field|input|select|checkbox|radio|switch|slider|tabs?$|menuitem|textarea|toggle|rating|autocomplete/i;
+/**
+ * The advisory to show under the state chips, or null when the state makes
+ * plain sense on this element (AGL-2486 item 39).
+ *
+ * States are deliberately NOT constrained by element type. A hover effect on a
+ * Box or Section wrapping a link is among the commonest real designs, and
+ * refusing it would block more good work than it prevents mistakes. But
+ * `:focus-visible` on something with no tab stop and `:disabled` on something
+ * that cannot be disabled will simply never fire, and an author who styles one
+ * and sees nothing has no way to find out why. So: allow it, and say so.
+ */ export function stateAdvisory(state, element) {
+    var _element_componentId;
+    if (state !== 'focusVisible' && state !== 'disabled') return null;
+    const interactive = !!element.hasHref || !!element.hasTabIndex || INTERACTIVE_COMPONENT_PATTERN.test((_element_componentId = element.componentId) != null ? _element_componentId : '');
+    if (interactive) return null;
+    if (state === 'disabled') {
+        return 'Only form controls — buttons, inputs, selects — can be disabled. On ' + 'this element these styles are valid but will never show. You can still ' + 'set them if a plugin or custom code disables it.';
+    }
+    return 'This element cannot receive keyboard focus today, so these styles will ' + 'never show. They will start working if you make it a link or a button, ' + 'or give it a tab stop.';
+}
+/**
+ * CANVAS ONLY: renders an element as if it were in the given state, by
+ * hoisting that state's slice over the base declarations (AGL-2486 item 39).
+ *
+ * You cannot hover an element while working in a side panel, so a state whose
+ * styles you cannot see is a state you cannot design. This is what holds the
+ * state on — and it is deliberately NOT a toggle that can be left on and
+ * published by mistake: selecting the state in the panel's chip row IS the
+ * hold, so you cannot be editing the hover slice and not see hover, and
+ * returning to `Default` ends it. It lives in editor UI state and never enters
+ * the document, so Preview and the published page cannot receive it.
+ *
+ * Applied through `LeafSxTransformContext` — the SAME canvas-only seam the
+ * artboard device-width transform already uses, at the one point in `Leaf`
+ * where the merged sx reaches the element. There is still exactly one
+ * substitution path, and the tenant never mounts the provider.
+ *
+ * Runs on the fully merged sx AFTER scheme resolution, so a slice that carried
+ * `@scheme dark` has already collapsed to the active scheme's values by the
+ * time it is hoisted. `mergeSchemeValue` does the per-value merge so a
+ * responsive override keeps the base's other breakpoints.
+ *
+ * The hoisted selector is removed, so what renders is exactly the state's
+ * appearance rather than the state's appearance plus a live `:hover` that
+ * would repaint the same declarations. Sibling states are left untouched.
+ *
+ * Returns the input BY IDENTITY when there is nothing to hoist.
+ */ export function hoistStateSx(sx, state) {
+    if (!state) return sx;
+    const selector = SX_STATE_SELECTORS[state];
+    if (Array.isArray(sx)) {
+        let changed = false;
+        const next = sx.map((entry)=>{
+            const value = hoistStateSx(entry, state);
+            if (value !== entry) changed = true;
+            return value;
+        });
+        return changed ? next : sx;
+    }
+    if (!isPlainObject(sx)) return sx;
+    const slice = sx[selector];
+    if (!isPlainObject(slice)) return sx;
+    const out = _extends({}, sx);
+    delete out[selector];
+    for (const [key, value] of Object.entries(slice)){
+        const merged = mergeSchemeValue(out[key], value);
+        if (merged === undefined) delete out[key];
+        else out[key] = merged;
+    }
+    return out;
+}
+export default SX_STATES;
+
+//# sourceMappingURL=state-sx.js.map

package/src/lib/utils/state-sx.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/utils/state-sx.ts"],"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 { mergeNodeSx, mergeSchemeValue } from '@aglyn/aglyn'\nimport type { BesignerStateFlag } from '@aglyn/besigner'\nimport isEqual from 'lodash-es/isEqual.js'\n\n/**\n * Interaction-state style slices for the Styles panel (AGL-2486 item 39).\n *\n * Hover, focus and active states are reachable in the document already — the\n * JSS tab's own caption advertises nested selectors — but only by typing raw\n * sx, which most of this panel's audience cannot do. These slices are the\n * picker for the same capability.\n *\n * ## What is stored is the REAL selector\n *\n * A state slice is `node.sx['&:hover']`, not a reserved `@state hover` key.\n * That choice is what makes this feature need NO renderer change at all:\n * MUI's `styleFunctionSx` hands an unrecognised object key straight back to\n * itself (`wrapper.sx = value; css[styleKey] = styleFunctionSx(wrapper)`), so\n * the slice gets the full sx treatment — palette tokens, system-prop aliases\n * (`bgcolor`), and responsive breakpoint objects — identically on the canvas,\n * in Preview and on the published page. A reserved key would have needed a\n * substitution pass on every render path, and the recorded reason the scheme\n * slices work is that there is exactly ONE such path.\n *\n * It also means the panel and the JSS tab are editing the same thing rather\n * than two representations of it, and that an author who already hand-wrote\n * `&:hover` finds the panel showing it.\n *\n * ## Nesting order: state OUTER, scheme INNER, breakpoints innermost\n *\n * ```ts\n * { '&:hover': { '@scheme dark': { color: { xs: '#eee', md: '#fff' } } } }\n * ```\n *\n * Not a new invariant — `scheme-rendering.spec.tsx` already proves\n * `resolveSchemeSx` resolves exactly this shape, because it recurses into\n * nested selector objects. The REVERSE order would be a bug: `mergeSchemeValue`\n * replaces a nested object wholesale, so a `@scheme dark` slice containing\n * `&:hover` would clobber the light hover block rather than merge with it.\n *\n * ## The scrub is not bypassed\n *\n * `sanitizeAuthorSx` walks nested records with no key filtering, and\n * `leaf-author-css.spec.tsx` already asserts that a `url(http://…)` inside an\n * `&:hover` slice is rewritten to `about:invalid`. Author CSS in a state slice\n * goes through the same scrub as author CSS anywhere else.\n */\n\n/**\n * The interaction states the panel offers, in the order the chip row shows\n * them.\n *\n * ## Why plain `:focus` is deliberately absent — do not \"fix\" this\n *\n * `:focus` matches on mouse and touch focus as well as keyboard focus, so the\n * overwhelmingly common thing an author does with a `:focus` control is remove\n * the ring they consider ugly on click — and that removes it for keyboard\n * users too, who have no other way to tell where they are on the page. Adding\n * the field would mean shipping a purpose-built UI for an accessibility\n * regression, on a product whose authors are explicitly not expected to know\n * CSS.\n *\n * `:focus-visible` is the same capability without that failure mode: the\n * browser only matches it when it judges a focus indicator should be shown\n * (keyboard and programmatic focus, not a mouse click), so styling it can\n * essentially only ADD an indicator. That covers the legitimate reason to\n * style focus — making the ring match the brand — while making the harmful\n * one much harder to reach by accident.\n *\n * An author with a genuine `:focus` need still has the JSS (sx) tab, which\n * accepts any selector. That friction is the point: it is reachable by someone\n * who knows what they are doing and not by someone clicking through a panel.\n */\nexport const SX_STATES: readonly BesignerStateFlag[] = Object.freeze([\n  'hover',\n  'active',\n  'focusVisible',\n  'disabled',\n])\n\n/**\n * Alias of the canvas flag union, which is declared in `@aglyn/besigner` so\n * the flag store that HOLDS the state and the panel that WRITES the slice\n * cannot drift apart.\n */\nexport type SxState = BesignerStateFlag\n\n/** The CSS selector each state is stored under in `node.sx`. */\nexport const SX_STATE_SELECTORS: Readonly<Record<SxState, string>> =\n  Object.freeze({\n    hover: '&:hover',\n    active: '&:active',\n    focusVisible: '&:focus-visible',\n    disabled: '&:disabled',\n  })\n\n/**\n * Chip labels. **Keep them short — this row must never wrap.**\n *\n * These shipped once as \"Focus (keyboard)\", to stop a bare \"Focus\" implying\n * that the mouse-click ring is what you are styling. The reasoning was right\n * and the label was wrong: measured against the styles panel, the five chips\n * needed **368px** of the **359px** a default 375px panel has, so `Disabled`\n *\n * Short labels bring the row to 272px, which fits every panel width down to\n * about 290px, and {@link SX_STATE_LABEL_MAX} pins them so the next person to\n * reach for a clarifying parenthetical gets a failing test instead of a\n * wrapped row.\n *\n * The keyboard nuance did not get dropped, it moved somewhere better than a\n * label: {@link SX_STATE_DESCRIPTIONS} carries the full rule in the chip\n * tooltip, and {@link SX_STATE_PROSE} puts \"keyboard focus\" in the preview\n * banner — which appears the moment Focus is selected, so it is READ rather\n * than hovered for. That is the same job the long label was doing, done where\n * there is room for it.\n */\nexport const SX_STATE_LABELS: Readonly<Record<SxState, string>> = Object.freeze({\n  hover: 'Hover',\n  active: 'Active',\n  focusVisible: 'Focus',\n  disabled: 'Disabled',\n})\n\n/**\n * The longest a chip label may be before the row stops fitting a narrow\n * panel. `Disabled` is 8 and is the longest today; the budget is measured,\n * not guessed — see {@link SX_STATE_LABELS}.\n */\nexport const SX_STATE_LABEL_MAX = 8\n\n/** The same states in running prose — banners, the override chips. */\nexport const SX_STATE_PROSE: Readonly<Record<SxState, string>> = Object.freeze({\n  hover: 'hover',\n  active: 'active',\n  focusVisible: 'keyboard focus',\n  disabled: 'disabled',\n})\n\n/**\n * What each state means, in the panel's voice — shown as the chip tooltip so\n * an author can tell `Active` (held down) from `Focus` (keyboard) without\n * knowing the selectors.\n */\nexport const SX_STATE_DESCRIPTIONS: Readonly<Record<SxState, string>> =\n  Object.freeze({\n    hover: 'While the pointer is over this element.',\n    active: 'While this element is being pressed or clicked.',\n    focusVisible:\n      'While this element has keyboard focus. Styling this state adds to the ' +\n      'focus indicator keyboard visitors rely on — it will not show on a ' +\n      'plain mouse click.',\n    disabled: 'While this element is disabled. Only form controls can be disabled.',\n  })\n\nconst STATE_SELECTOR_SET: ReadonlySet<string> = new Set(\n  Object.values(SX_STATE_SELECTORS),\n)\n\n/** Whether an sx key is one of the state selectors this module owns. */\nexport function isSxStateSelector(key: string): boolean {\n  return STATE_SELECTOR_SET.has(key)\n}\n\n/**\n * The state a stored selector belongs to, or null when the key is not one of\n * ours. Lets a surface that lists RAW sx keys — the instance-override chips —\n * name a slice the way the chip row does instead of printing `&:hover` at an\n * author who never typed it.\n */\nexport function sxStateForSelector(key: string): SxState | null {\n  return (\n    SX_STATES.find((state) => SX_STATE_SELECTORS[state] === key) ?? null\n  )\n}\n\n/** The override-chip label for a raw sx key, or null to fall through. */\nexport function sxStateSliceLabel(key: string): string | null {\n  const state = sxStateForSelector(key)\n  return state ? `${SX_STATE_PROSE[state]} state` : null\n}\n\nconst isPlainObject = (value: unknown): value is Record<string, any> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value)\n\n/**\n * The stored slice for a state, or undefined when the element has none.\n *\n * `state: null` is the base scope and returns the record itself, so callers\n * can pass the panel's active scope through without branching.\n */\nexport function readStateSlice(\n  sx: Record<string, any> | undefined,\n  state: SxState | null,\n): Record<string, any> | undefined {\n  if (!state) return sx\n  const slice = sx?.[SX_STATE_SELECTORS[state]]\n  return isPlainObject(slice) ? slice : undefined\n}\n\n/**\n * What the element actually LOOKS like in a state: the base styles with the\n * state slice merged over them, which is what the browser paints because a\n * `:hover` block only overrides the properties it names.\n *\n * This is what the panel reads from, so a field the author has not overridden\n * for hover shows the inherited base value rather than empty — the same\n * reading the breakpoint scope gives, and the reason the write seam can skip\n * a value that would not change anything.\n *\n * `mergeNodeSx` is the house merge: responsive objects cascade mobile-first,\n * `@scheme dark` and nested selector blocks merge key by key. Reusing it keeps\n * the panel's reading identical to the graft's.\n *\n * Returns the input BY IDENTITY at base scope or when no slice exists, which\n * is every element that has never been given a state style.\n */\n/**\n * The element's base styles with every state selector removed — the baseline a\n * state slice is a difference FROM. Returned by identity when the element\n * carries no state slices at all, which is every element today.\n */\nexport function stripStateSlices(\n  sx: Record<string, any> | undefined,\n): Record<string, any> | undefined {\n  if (!sx) return sx\n  if (!Object.keys(sx).some(isSxStateSelector)) return sx\n  const base: Record<string, any> = { ...sx }\n  for (const selector of STATE_SELECTOR_SET) delete base[selector]\n  return base\n}\n\nexport function stateScopedSx(\n  sx: Record<string, any> | undefined,\n  state: SxState | null,\n): Record<string, any> | undefined {\n  const slice = state ? readStateSlice(sx, state) : undefined\n  if (!slice) return sx\n  // Every state selector is dropped from the reading: the slice being edited\n  // is merged in below, and a SIBLING state's block is not part of what this\n  // state looks like.\n  const base = stripStateSlices(sx)\n  return mergeNodeSx(base, slice) as Record<string, any>\n}\n\n/**\n * Replaces one state's slice, removing it entirely when it comes back empty.\n *\n * An emptied slice is DELETED rather than stored as `{}` — the same rule\n * `writeSxValue` applies to an emptied scheme slice and `getNodeStyleTarget`\n * applies to an emptied instance override. A `{}` left behind would make\n * \"does this element have a hover style\" answer yes forever, which the chip's\n * own dot indicator and the override badge both read.\n *\n * Returns a new record; the input is never mutated.\n */\nexport function writeStateSlice(\n  sx: Record<string, any> | undefined,\n  state: SxState,\n  slice: Record<string, any> | undefined,\n): Record<string, any> {\n  const next: Record<string, any> = { ...sx }\n  const selector = SX_STATE_SELECTORS[state]\n  if (slice && Object.keys(slice).length > 0) next[selector] = slice\n  else delete next[selector]\n  return next\n}\n\n/**\n * The slice implied by an edited state-scope reading (AGL-2486).\n *\n * The panel edits the MERGED record — base with the slice over it, which is\n * what the element actually looks like in that state — so the write has to be\n * split back out: only what genuinely differs from the base belongs in the\n * slice. That split is what gives the three behaviours the panel needs, all\n * from one rule:\n *\n * - a property the author changed for this state lands in the slice;\n * - a property the author set back to the base value LEAVES the slice, because\n *   a `:hover` block that restates the base paints nothing and would show as a\n *   permanent override in the chip's dot;\n * - a property the author cleared leaves the slice too, so the state falls\n *   back to inheriting the base — which is the only thing a pseudo-class block\n *   can express, since CSS has no way to un-declare a property.\n *\n * `base` must already have the state selectors stripped (which\n * {@link stateScopedSx} does), or a sibling state's block would read as a\n * difference and be copied in.\n */\nexport function deriveStateSlice(\n  base: Record<string, any> | undefined,\n  edited: Record<string, any> | undefined,\n): Record<string, any> {\n  const slice: Record<string, any> = {}\n  for (const [key, value] of Object.entries(edited ?? {})) {\n    if (isSxStateSelector(key)) continue\n    if (isEqual(base?.[key], value)) continue\n    slice[key] = value\n  }\n  return slice\n}\n\n/** Whether the element carries any styles for this state. */\nexport function sxHasStateSlice(\n  sx: Record<string, any> | undefined,\n  state: SxState,\n): boolean {\n  const slice = readStateSlice(sx, state)\n  return !!slice && Object.keys(slice).length > 0\n}\n\n/** Every state the element currently carries a slice for, in chip order. */\nexport function sxStatesWithSlices(\n  sx: Record<string, any> | undefined,\n): SxState[] {\n  return SX_STATES.filter((state) => sxHasStateSlice(sx, state))\n}\n\n/**\n * Components that put a real tab stop / focusable control in the DOM. Matched\n * on the component id, which is the only thing the panel reliably knows about\n * an element before it renders.\n */\nconst INTERACTIVE_COMPONENT_PATTERN =\n  /button|link|anchor|field|input|select|checkbox|radio|switch|slider|tabs?$|menuitem|textarea|toggle|rating|autocomplete/i\n\n/**\n * The advisory to show under the state chips, or null when the state makes\n * plain sense on this element (AGL-2486 item 39).\n *\n * States are deliberately NOT constrained by element type. A hover effect on a\n * Box or Section wrapping a link is among the commonest real designs, and\n * refusing it would block more good work than it prevents mistakes. But\n * `:focus-visible` on something with no tab stop and `:disabled` on something\n * that cannot be disabled will simply never fire, and an author who styles one\n * and sees nothing has no way to find out why. So: allow it, and say so.\n */\nexport function stateAdvisory(\n  state: SxState | null,\n  element: { componentId?: string; hasHref?: boolean; hasTabIndex?: boolean },\n): string | null {\n  if (state !== 'focusVisible' && state !== 'disabled') return null\n  const interactive =\n    !!element.hasHref ||\n    !!element.hasTabIndex ||\n    INTERACTIVE_COMPONENT_PATTERN.test(element.componentId ?? '')\n  if (interactive) return null\n  if (state === 'disabled') {\n    return (\n      'Only form controls — buttons, inputs, selects — can be disabled. On ' +\n      'this element these styles are valid but will never show. You can still ' +\n      'set them if a plugin or custom code disables it.'\n    )\n  }\n  return (\n    'This element cannot receive keyboard focus today, so these styles will ' +\n    'never show. They will start working if you make it a link or a button, ' +\n    'or give it a tab stop.'\n  )\n}\n\n/**\n * CANVAS ONLY: renders an element as if it were in the given state, by\n * hoisting that state's slice over the base declarations (AGL-2486 item 39).\n *\n * You cannot hover an element while working in a side panel, so a state whose\n * styles you cannot see is a state you cannot design. This is what holds the\n * state on — and it is deliberately NOT a toggle that can be left on and\n * published by mistake: selecting the state in the panel's chip row IS the\n * hold, so you cannot be editing the hover slice and not see hover, and\n * returning to `Default` ends it. It lives in editor UI state and never enters\n * the document, so Preview and the published page cannot receive it.\n *\n * Applied through `LeafSxTransformContext` — the SAME canvas-only seam the\n * artboard device-width transform already uses, at the one point in `Leaf`\n * where the merged sx reaches the element. There is still exactly one\n * substitution path, and the tenant never mounts the provider.\n *\n * Runs on the fully merged sx AFTER scheme resolution, so a slice that carried\n * `@scheme dark` has already collapsed to the active scheme's values by the\n * time it is hoisted. `mergeSchemeValue` does the per-value merge so a\n * responsive override keeps the base's other breakpoints.\n *\n * The hoisted selector is removed, so what renders is exactly the state's\n * appearance rather than the state's appearance plus a live `:hover` that\n * would repaint the same declarations. Sibling states are left untouched.\n *\n * Returns the input BY IDENTITY when there is nothing to hoist.\n */\nexport function hoistStateSx<T>(sx: T, state: SxState | null): T {\n  if (!state) return sx\n  const selector = SX_STATE_SELECTORS[state]\n  if (Array.isArray(sx)) {\n    let changed = false\n    const next = sx.map((entry) => {\n      const value = hoistStateSx(entry, state)\n      if (value !== entry) changed = true\n      return value\n    })\n    return (changed ? next : sx) as unknown as T\n  }\n  if (!isPlainObject(sx)) return sx\n  const slice = (sx as Record<string, any>)[selector]\n  if (!isPlainObject(slice)) return sx\n  const out: Record<string, any> = { ...(sx as Record<string, any>) }\n  delete out[selector]\n  for (const [key, value] of Object.entries(slice)) {\n    const merged = mergeSchemeValue(out[key], value)\n    if (merged === undefined) delete out[key]\n    else out[key] = merged\n  }\n  return out as unknown as T\n}\n\nexport default SX_STATES\n"],"names":["mergeNodeSx","mergeSchemeValue","isEqual","SX_STATES","Object","freeze","SX_STATE_SELECTORS","hover","active","focusVisible","disabled","SX_STATE_LABELS","SX_STATE_LABEL_MAX","SX_STATE_PROSE","SX_STATE_DESCRIPTIONS","STATE_SELECTOR_SET","Set","values","isSxStateSelector","key","has","sxStateForSelector","find","state","sxStateSliceLabel","isPlainObject","value","Array","isArray","readStateSlice","sx","slice","undefined","stripStateSlices","keys","some","base","selector","stateScopedSx","writeStateSlice","next","length","deriveStateSlice","edited","entries","sxHasStateSlice","sxStatesWithSlices","filter","INTERACTIVE_COMPONENT_PATTERN","stateAdvisory","element","interactive","hasHref","hasTabIndex","test","componentId","hoistStateSx","changed","map","entry","out","merged"],"mappings":"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"}

package/src/lib/utils/style-field-groups.d.ts

@@ -0,0 +1,136 @@
+/**
+ * @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 SxScheme } from '@aglyn/aglyn-node-renderer';
+import { type SxBreakpoint } from './responsive-sx';
+import type { StyleThemeScales } from './theme-scale-options';
+/**
+ * First-class style controls beyond the base panel (AGL-540): layout,
+ * colors, sizing, typography, borders & shadows, position & overflow, and
+ * grid/flex-child fields, rendered as accordion groups in the styles
+ * panel. Everything still writes through the responsive-sx pipeline, so
+ * breakpoint scoping (AGL-333) applies to every field here.
+ *
+ * Consolidation (AGL-587): every style field has exactly one home. The
+ * loose base form is gone — display/float live in Layout, color/
+ * backgroundColor in Colors.
+ *
+ * The layout half was consolidated again in AGL-2486: `Flexbox & Grids`
+ * and `Grid & Flex Child` were two sections describing the same two CSS
+ * layout models, and every typed field of both now lives in one group
+ * ({@link buildFlexGridGroup}) under the panel's alignment toggles.
+ */
+export interface StyleFieldGroup {
+    $id: string;
+    label: string;
+    fields: Array<Record<string, unknown> & {
+        name: string;
+    }>;
+}
+/**
+ * Longest description a HALF-width field may carry: two lines at the ~170px
+ * a half column gets in the docked panel. Measured against the panel's own
+ * 0.75rem caption type, not guessed.
+ */
+export declare const HALF_WIDTH_DESCRIPTION_LIMIT = 52;
+/** Panel context a few fields word themselves against (AGL-1338). */
+export interface StyleFieldGroupOptions {
+    /**
+     * The panel is editing a component INSTANCE's override slice rather
+     * than a node's own sx (AGL-1332). Only the Background Fill control
+     * cares so far, and it cares a lot: an unset field there means "the
+     * component's own fill keeps painting", not "nothing paints", so the
+     * unset choice has to be named for what it does.
+     */
+    isInstanceOverride?: boolean;
+    /**
+     * The site theme's own scales for the three fields that had no connection
+     * to it (AGL-2486, item 12): font size, font weight and z-index. Built
+     * from the live theme by {@link buildStyleThemeScales}, so a host that
+     * retuned its type scale offers its own values. Absent (a spec, a theme
+     * still loading) simply means no scale is offered — every one of these
+     * fields still takes a raw value.
+     */
+    themeScales?: StyleThemeScales;
+}
+/**
+ * Builds the style accordion groups. `presetColors` feeds the color
+ * pickers with the site theme's palette, mirroring the base styles form.
+ */
+export declare function buildStyleFieldGroups(presetColors: string[], options?: StyleFieldGroupOptions): StyleFieldGroup[];
+/**
+ * The typed fields of the single Flexbox & Grid section (AGL-2486).
+ *
+ * The panel used to answer "how do I lay this out?" in two places. A
+ * `Flexbox & Grids` accordion held the alignment toggles and the gaps; a
+ * separate `Grid & Flex Child` accordion, four sections further down, held
+ * the track lists, the item placement and the flex-child sizing. Both were
+ * about the same two CSS layout models, neither was complete, and their
+ * names did not divide the properties the way the names suggested:
+ * `alignSelf` and `justifySelf` are per-ITEM properties and lived in the
+ * container section, while `gridTemplateColumns` is a CONTAINER property
+ * and lived in the child one.
+ *
+ * So they are one section now, in reading order: how the container spaces
+ * its children (the gaps), what tracks it defines (the grid template), and
+ * where this element sits inside its own parent (placement and flex
+ * sizing). The alignment toggles render above these, from the panel — they
+ * are icon-button groups rather than schema fields and they read far better
+ * than the free-text equivalents would.
+ *
+ * Every property both sections carried is still here; the whole point is
+ * that nothing had to be dropped to stop saying it twice.
+ */
+export declare function buildFlexGridGroup(options?: StyleFieldGroupOptions): StyleFieldGroup;
+/** Field names owned by a group — the only keys its save may touch. */
+export declare function styleGroupFieldNames(group: StyleFieldGroup): string[];
+/**
+ * The sx partial a group save is allowed to produce: exactly its own
+ * field names. Keys owned by other groups (or by the custom-CSS editor)
+ * never appear, so one group's auto-save can never clear another's
+ * values (AGL-540).
+ */
+export declare function computeStylePartial(fieldNames: readonly string[], values: Record<string, unknown> | undefined): Record<string, unknown>;
+/** Picks a group's own values out of the effective sx value map. */
+export declare function pickStyleValues(fieldNames: readonly string[], values: Record<string, unknown> | undefined): Record<string, unknown>;
+/**
+ * Style fields that carry a COLOR and therefore scope to the artboard's
+ * color scheme (AGL-588): while the canvas previews DARK, edits to these
+ * fields write into the sx dark slice so light keeps its own values.
+ * Everything else (spacing, sizing, layout…) is scheme-agnostic and
+ * always writes the base, no matter which scheme is previewed.
+ */
+export declare const SCHEME_SCOPED_STYLE_FIELDS: readonly ["color", "backgroundColor", "borderColor", "backgroundImage"];
+/** Whether edits to this style field scope to the previewed color scheme. */
+export declare function isSchemeScopedStyleField(name: string): boolean;
+/**
+ * Merges a partial of style values into an sx object at the active
+ * breakpoint + scheme scope (AGL-333 / AGL-588). Unchanged values are
+ * skipped so effective (inherited) readings never get pinned into a
+ * breakpoint or scheme slice by round-tripping through a form. Empty
+ * strings clear, and purely numeric text is stored as a NUMBER — see
+ * {@link normalizeStyleValue}.
+ */
+export declare function applyStylePartialToSx(sx: Record<string, any> | undefined, partial: Record<string, unknown>, breakpoint: SxBreakpoint | null, scheme: SxScheme | null): Record<string, any>;
+/**
+ * Effective scalar style values at the active breakpoint + scheme scope
+ * — feeds the styles panel's forms and controls. Color-bearing fields
+ * resolve through the dark slice while the artboard previews dark
+ * (falling back to base where no override exists — exactly what
+ * renders); everything else reads the base. Responsive objects resolve
+ * to their active slice; nested objects are skipped.
+ */
+export declare function computeEffectiveStyleValues(sx: Record<string, any> | undefined, breakpoint: SxBreakpoint | null, scheme: SxScheme | null): Record<string, any>;