@aglyn/besigner-ui 1.0.0-beta.143

package/src/lib/box-styler/region-fills.js

@@ -0,0 +1,139 @@
+/**
+ * @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.
+ */ /**
+ * The four region materials of the box diagram, defined ONCE (AGL-2486).
+ *
+ * Two reasons this is not inline in the component.
+ *
+ * **The legend has to be readable.** Four abstract swatches beside a textured
+ * diagram is a puzzle. A swatch painted with the *same* declaration as the
+ * region it names needs no decoding — so the diagram and the legend both read
+ * their fills from here, and the two cannot drift.
+ *
+ * **Dark mode has to come from the theme.** Every value below is a palette
+ * TOKEN or a channel form of one, never a literal, so the console's
+ * `colorSchemeSelector: 'class'` CSS variables re-resolve them when the
+ * scheme flips. That is also what keeps this file at zero entries in the
+ * hardcoded-colour ratchet, whose baseline may not rise.
+ *
+ * The texture is deliberate and so is its weight. Stripes and hatching are
+ * what tell one region from another; a saturated hue does the same job but
+ * shouts over its neighbours, and flat greys leave the regions
+ * indistinguishable. So the pattern is carried by `text.primary` at a low
+ * alpha rather than by a hue, which reads as material instead of decoration
+ * and survives both schemes: `text.primary` is near-black on light and
+ * near-white on dark, so the tint always contrasts gently with its ground.
+ */ /** The subset of a theme these fills read (a CSS-vars theme's `vars`). */ /** An opaque stack: a flat tint layered ON a background token. */ const tint = (channel, alpha, ground)=>[
+        `linear-gradient(0deg,`,
+        ` rgba(${channel} / ${alpha}),`,
+        ` rgba(${channel} / ${alpha}))`,
+        `, ${ground}`
+    ].join('');
+export function regionFills(tv) {
+    const ink = tv.palette.text.primaryChannel;
+    const info = tv.palette.info.mainChannel;
+    const primary = tv.palette.primary.mainChannel;
+    const paper = tv.palette.background.paper;
+    const ground = tv.palette.background.default;
+    return {
+        /**
+     * The calmest material in the figure, because it is the largest area
+     * in it — whatever the margin wears sets the overall noise level.
+     *
+     * It used to carry the stripes. That put the two loudest materials on
+     * the two outermost regions and the diagram read as busy rather than
+     * author looks at last.
+     */ margin: {
+            background: tint(ink, 0.05, paper),
+            seam: tint(ink, 0.15, paper),
+            borderColor: `rgba(${ink} / 0.28)`,
+            borderStyle: 'dashed'
+        },
+        /**
+     * The stripes, and the only striped region — "only the border area".
+     *
+     * This is where they were always headed: it is the thinnest band, the
+     * one that needed the most help reading as its own material, and the
+     * one whose name an author is least likely to already understand.
+     * Being the only patterned region is what makes it identifiable at a
+     * glance rather than one texture among several.
+     */ border: {
+            background: [
+                `repeating-linear-gradient(45deg,`,
+                ` rgba(${info} / 0.34) 0 4px,`,
+                ` rgba(${info} / 0.10) 4px 9px)`,
+                `, ${ground}`
+            ].join(''),
+            seam: tint(info, 0.26, ground),
+            borderColor: `rgba(${info} / 0.55)`,
+            borderStyle: 'dashed'
+        },
+        /**
+     * The original's faint diagonal wash between the two brand hues. It
+     * was never the thing that was too loud, and it stays a tint on an
+     * opaque ground rather than a gradient in its own right.
+     */ padding: {
+            background: [
+                `linear-gradient(65deg,`,
+                ` rgba(${tv.palette.secondary.mainChannel} / 0.16),`,
+                ` rgba(${primary} / 0.16))`,
+                `, ${paper}`
+            ].join(''),
+            seam: tint(primary, 0.24, paper),
+            borderColor: `rgba(${primary} / 0.42)`,
+            borderStyle: 'dashed'
+        },
+        /**
+     * "Plain white inside it looks boring" — a fine dotted grid, the
+     * visual shorthand for an empty canvas, and the quietest texture of
+     * the four because this is the region the others exist to surround.
+     */ contents: {
+            background: [
+                `radial-gradient(rgba(${ink} / 0.16) 0.5px, transparent 0.5px)`,
+                ` 0 0 / 5px 5px`,
+                `, ${ground}`
+            ].join(''),
+            seam: tint(ink, 0.15, ground),
+            borderColor: `rgba(${ink} / 0.42)`,
+            borderStyle: 'solid'
+        },
+        /**
+     * Selection: the same hue, given alpha — "use the same color but
+     * maybe make it have less opacity and add an alpha to the color".
+     *
+     * It was solid `primary.main`, the one fully saturated thing in a
+     * figure built out of low-alpha tints, so it dominated instead of
+     * indicating. At 0.42 over the region's own ground it is still the
+     * strongest colour present — nothing else uses primary above 0.24 —
+     * without being the brightest thing on screen.
+     *
+     * The text goes to `text.primary` rather than `primary.contrastText`.
+     * A contrast-text token is computed for a SOLID primary; over a
+     * translucent tint the actual backdrop is the region behind it, which
+     * is near-white on light and near-black on dark. `text.primary` is
+     * the token that flips with exactly that, so the label stays legible
+     * in both schemes instead of being right in one.
+     */ selected: {
+            background: tint(primary, 0.42, paper),
+            seam: tint(primary, 0.42, paper),
+            borderColor: `rgba(${primary} / 0.75)`,
+            borderStyle: 'solid',
+            color: tv.palette.text.primary
+        }
+    };
+}
+
+//# sourceMappingURL=region-fills.js.map

package/src/lib/box-styler/region-fills.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/box-styler/region-fills.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\n/**\n * The four region materials of the box diagram, defined ONCE (AGL-2486).\n *\n * Two reasons this is not inline in the component.\n *\n * **The legend has to be readable.** Four abstract swatches beside a textured\n * diagram is a puzzle. A swatch painted with the *same* declaration as the\n * region it names needs no decoding — so the diagram and the legend both read\n * their fills from here, and the two cannot drift.\n *\n * **Dark mode has to come from the theme.** Every value below is a palette\n * TOKEN or a channel form of one, never a literal, so the console's\n * `colorSchemeSelector: 'class'` CSS variables re-resolve them when the\n * scheme flips. That is also what keeps this file at zero entries in the\n * hardcoded-colour ratchet, whose baseline may not rise.\n *\n * The texture is deliberate and so is its weight. Stripes and hatching are\n * what tell one region from another; a saturated hue does the same job but\n * shouts over its neighbours, and flat greys leave the regions\n * indistinguishable. So the pattern is carried by `text.primary` at a low\n * alpha rather than by a hue, which reads as material instead of decoration\n * and survives both schemes: `text.primary` is near-black on light and\n * near-white on dark, so the tint always contrasts gently with its ground.\n */\n\n/** The subset of a theme these fills read (a CSS-vars theme's `vars`). */\nexport interface RegionFillTheme {\n  palette: {\n    text: { primary: string; primaryChannel: string }\n    info: { mainChannel: string }\n    primary: { mainChannel: string }\n    secondary: { mainChannel: string }\n    background: { paper: string; default: string }\n  }\n}\n\nexport interface RegionFill {\n  /** `background` shorthand — a texture layer over a ground. */\n  background: string\n  /**\n   * The ground BEHIND the wedges of this band.\n   *\n   * The band is drawn as four mitred wedges with a 2px gap between them,\n   * and that gap is what makes the diagonal seams at the corners visible —\n   * which is the whole reason the shape reads as a frame around something\n   * rather than as a plain rectangle. The wedges carry `background`; this\n   * shows through between them. The original used `common.black` here,\n   * which is what made the seams read as harsh slashes; a low-alpha ink\n   * tint gives the same geometry as fine lines instead.\n   *\n   * **Opaque, like every other value here.** A translucent seam is what\n   * put the border band's texture underneath the padding controls: the\n   * padding box's ground let the ring's material show straight through\n   * it. A region paints its own material and nothing else's, so every\n   * ground ends in a `background.*` token and each tint is layered ON it\n   * rather than left to composite against whatever happens to be behind.\n   */\n  seam: string\n  /** The edge drawn around the region. */\n  borderColor: string\n  borderStyle: 'dashed' | 'solid'\n}\n\nexport interface RegionFills {\n  margin: RegionFill\n  border: RegionFill\n  padding: RegionFill\n  contents: RegionFill\n  /**\n   * The side whose editor is open.\n   *\n   * It lives here rather than in the component because \"what colour is a\n   * region, in which state\" should have one answer in one file — and\n   * because this is the value that was wrong: a fully saturated\n   * `primary.main` inside a figure built deliberately from low-alpha\n   * tints, so the selected wedge was the brightest thing on screen.\n   */\n  selected: RegionFill & { color: string }\n}\n\n/** An opaque stack: a flat tint layered ON a background token. */\nconst tint = (channel: string, alpha: number, ground: string) =>\n  [\n    `linear-gradient(0deg,`,\n    ` rgba(${channel} / ${alpha}),`,\n    ` rgba(${channel} / ${alpha}))`,\n    `, ${ground}`,\n  ].join('')\n\nexport function regionFills(tv: RegionFillTheme): RegionFills {\n  const ink = tv.palette.text.primaryChannel\n  const info = tv.palette.info.mainChannel\n  const primary = tv.palette.primary.mainChannel\n  const paper = tv.palette.background.paper\n  const ground = tv.palette.background.default\n\n  return {\n    /**\n     * The calmest material in the figure, because it is the largest area\n     * in it — whatever the margin wears sets the overall noise level.\n     *\n     * It used to carry the stripes. That put the two loudest materials on\n     * the two outermost regions and the diagram read as busy rather than\n     * author looks at last.\n     */\n    margin: {\n      background: tint(ink, 0.05, paper),\n      seam: tint(ink, 0.15, paper),\n      borderColor: `rgba(${ink} / 0.28)`,\n      borderStyle: 'dashed',\n    },\n\n    /**\n     * The stripes, and the only striped region — \"only the border area\".\n     *\n     * This is where they were always headed: it is the thinnest band, the\n     * one that needed the most help reading as its own material, and the\n     * one whose name an author is least likely to already understand.\n     * Being the only patterned region is what makes it identifiable at a\n     * glance rather than one texture among several.\n     */\n    border: {\n      background: [\n        `repeating-linear-gradient(45deg,`,\n        ` rgba(${info} / 0.34) 0 4px,`,\n        ` rgba(${info} / 0.10) 4px 9px)`,\n        `, ${ground}`,\n      ].join(''),\n      seam: tint(info, 0.26, ground),\n      borderColor: `rgba(${info} / 0.55)`,\n      borderStyle: 'dashed',\n    },\n\n    /**\n     * The original's faint diagonal wash between the two brand hues. It\n     * was never the thing that was too loud, and it stays a tint on an\n     * opaque ground rather than a gradient in its own right.\n     */\n    padding: {\n      background: [\n        `linear-gradient(65deg,`,\n        ` rgba(${tv.palette.secondary.mainChannel} / 0.16),`,\n        ` rgba(${primary} / 0.16))`,\n        `, ${paper}`,\n      ].join(''),\n      seam: tint(primary, 0.24, paper),\n      borderColor: `rgba(${primary} / 0.42)`,\n      borderStyle: 'dashed',\n    },\n\n    /**\n     * \"Plain white inside it looks boring\" — a fine dotted grid, the\n     * visual shorthand for an empty canvas, and the quietest texture of\n     * the four because this is the region the others exist to surround.\n     */\n    contents: {\n      background: [\n        `radial-gradient(rgba(${ink} / 0.16) 0.5px, transparent 0.5px)`,\n        ` 0 0 / 5px 5px`,\n        `, ${ground}`,\n      ].join(''),\n      seam: tint(ink, 0.15, ground),\n      borderColor: `rgba(${ink} / 0.42)`,\n      borderStyle: 'solid',\n    },\n\n    /**\n     * Selection: the same hue, given alpha — \"use the same color but\n     * maybe make it have less opacity and add an alpha to the color\".\n     *\n     * It was solid `primary.main`, the one fully saturated thing in a\n     * figure built out of low-alpha tints, so it dominated instead of\n     * indicating. At 0.42 over the region's own ground it is still the\n     * strongest colour present — nothing else uses primary above 0.24 —\n     * without being the brightest thing on screen.\n     *\n     * The text goes to `text.primary` rather than `primary.contrastText`.\n     * A contrast-text token is computed for a SOLID primary; over a\n     * translucent tint the actual backdrop is the region behind it, which\n     * is near-white on light and near-black on dark. `text.primary` is\n     * the token that flips with exactly that, so the label stays legible\n     * in both schemes instead of being right in one.\n     */\n    selected: {\n      background: tint(primary, 0.42, paper),\n      seam: tint(primary, 0.42, paper),\n      borderColor: `rgba(${primary} / 0.75)`,\n      borderStyle: 'solid',\n      color: tv.palette.text.primary,\n    },\n  }\n}\n"],"names":["tint","channel","alpha","ground","join","regionFills","tv","ink","palette","text","primaryChannel","info","mainChannel","primary","paper","background","default","margin","seam","borderColor","borderStyle","border","padding","secondary","contents","selected","color"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GAED,wEAAwE,GAuDxE,gEAAgE,GAChE,MAAMA,OAAO,CAACC,SAAiBC,OAAeC,SAC5C;QACE,CAAC,qBAAqB,CAAC;QACvB,CAAC,MAAM,EAAEF,QAAQ,GAAG,EAAEC,MAAM,EAAE,CAAC;QAC/B,CAAC,MAAM,EAAED,QAAQ,GAAG,EAAEC,MAAM,EAAE,CAAC;QAC/B,CAAC,EAAE,EAAEC,QAAQ;KACd,CAACC,IAAI,CAAC;AAET,OAAO,SAASC,YAAYC,EAAmB;IAC7C,MAAMC,MAAMD,GAAGE,OAAO,CAACC,IAAI,CAACC,cAAc;IAC1C,MAAMC,OAAOL,GAAGE,OAAO,CAACG,IAAI,CAACC,WAAW;IACxC,MAAMC,UAAUP,GAAGE,OAAO,CAACK,OAAO,CAACD,WAAW;IAC9C,MAAME,QAAQR,GAAGE,OAAO,CAACO,UAAU,CAACD,KAAK;IACzC,MAAMX,SAASG,GAAGE,OAAO,CAACO,UAAU,CAACC,OAAO;IAE5C,OAAO;QACL;;;;;;;KAOC,GACDC,QAAQ;YACNF,YAAYf,KAAKO,KAAK,MAAMO;YAC5BI,MAAMlB,KAAKO,KAAK,MAAMO;YACtBK,aAAa,CAAC,KAAK,EAAEZ,IAAI,QAAQ,CAAC;YAClCa,aAAa;QACf;QAEA;;;;;;;;KAQC,GACDC,QAAQ;YACNN,YAAY;gBACV,CAAC,gCAAgC,CAAC;gBAClC,CAAC,MAAM,EAAEJ,KAAK,eAAe,CAAC;gBAC9B,CAAC,MAAM,EAAEA,KAAK,iBAAiB,CAAC;gBAChC,CAAC,EAAE,EAAER,QAAQ;aACd,CAACC,IAAI,CAAC;YACPc,MAAMlB,KAAKW,MAAM,MAAMR;YACvBgB,aAAa,CAAC,KAAK,EAAER,KAAK,QAAQ,CAAC;YACnCS,aAAa;QACf;QAEA;;;;KAIC,GACDE,SAAS;YACPP,YAAY;gBACV,CAAC,sBAAsB,CAAC;gBACxB,CAAC,MAAM,EAAET,GAAGE,OAAO,CAACe,SAAS,CAACX,WAAW,CAAC,SAAS,CAAC;gBACpD,CAAC,MAAM,EAAEC,QAAQ,SAAS,CAAC;gBAC3B,CAAC,EAAE,EAAEC,OAAO;aACb,CAACV,IAAI,CAAC;YACPc,MAAMlB,KAAKa,SAAS,MAAMC;YAC1BK,aAAa,CAAC,KAAK,EAAEN,QAAQ,QAAQ,CAAC;YACtCO,aAAa;QACf;QAEA;;;;KAIC,GACDI,UAAU;YACRT,YAAY;gBACV,CAAC,qBAAqB,EAAER,IAAI,kCAAkC,CAAC;gBAC/D,CAAC,cAAc,CAAC;gBAChB,CAAC,EAAE,EAAEJ,QAAQ;aACd,CAACC,IAAI,CAAC;YACPc,MAAMlB,KAAKO,KAAK,MAAMJ;YACtBgB,aAAa,CAAC,KAAK,EAAEZ,IAAI,QAAQ,CAAC;YAClCa,aAAa;QACf;QAEA;;;;;;;;;;;;;;;;KAgBC,GACDK,UAAU;YACRV,YAAYf,KAAKa,SAAS,MAAMC;YAChCI,MAAMlB,KAAKa,SAAS,MAAMC;YAC1BK,aAAa,CAAC,KAAK,EAAEN,QAAQ,QAAQ,CAAC;YACtCO,aAAa;YACbM,OAAOpB,GAAGE,OAAO,CAACC,IAAI,CAACI,OAAO;QAChC;IACF;AACF"}

package/src/lib/box-styler/spacing-value.d.ts

@@ -0,0 +1,104 @@
+/**
+ * @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 { CssUnit } from '@aglyn/shared-data-enums';
+import type { SpacingScaleOption } from '../utils/theme-scale-options';
+import type { BesignerDocsAnchor } from '../utils/docs-help';
+/**
+ * The box styler's value logic (AGL-2486, item 5), kept apart from the
+ * components so the rules can be asserted rather than described.
+ *
+ * A side of the box holds one of three things, and telling them apart is
+ * the whole job:
+ *
+ * - a **theme spacing step**, stored as a NUMBER, which MUI resolves
+ *   through `theme.spacing` at render (`2` → 16px under `spacing: 8`);
+ * - a **custom amount**, stored as a CSS string (`'12px'`, `'2rem'`,
+ *   `'auto'`);
+ * - **nothing** — the property is absent and the element inherits.
+ *
+ * `0` belongs to the first group, not the third. It means "no space", it
+ * renders as `0px`, and it is the value an author picks to cancel space a
+ * parent or a preset put there. `strictNullChecks` is off repo-wide, so
+ * every `if (!value)` in this file's neighbourhood would have silently
+ * folded that answer into "unset" — hence the explicit predicates below.
+ */
+/** A box spacing value as STORED: a theme step, or a CSS string. */
+export type BoxSpacingValue = string | number | undefined;
+/**
+ * Whether the author has set this side at all.
+ *
+ * The one that matters: `isSpacingSet(0)` is TRUE. `0` is a decision, and
+ * an editor that reads it as "unset" both hides it from the author and
+ * loses it on the next write.
+ */
+export declare function isSpacingSet(value: BoxSpacingValue): boolean;
+/**
+ * Whether this value is a theme spacing step — the form that keeps
+ * following the theme — rather than a flattened CSS string.
+ *
+ * A numeric STRING is deliberately not a step: MUI passes strings through
+ * untouched, so `'2'` reaches the browser as `margin-top: 2` and is
+ * dropped by the CSS parser. Only a real number is resolved.
+ */
+export declare function isThemeSpacingStep(value: BoxSpacingValue): boolean;
+/** The ladder entry a stored value corresponds to, if any. */
+export declare function findSpacingStep(value: BoxSpacingValue, steps: readonly SpacingScaleOption[]): SpacingScaleOption | undefined;
+/**
+ * The compact text one side of the diagram shows — what the element
+ * actually renders, so the diagram reads as a measurement rather than as a
+ * vocabulary quiz. `''` when nothing is set, which is the caller's cue to
+ * show the side's name instead.
+ *
+ * A step resolves to its hint (`16px`) so an author comparing two sides is
+ * comparing like with like; which of them is theme-backed is carried by
+ * the marker and the tooltip, not by making the numbers incomparable.
+ */
+export declare function spacingDisplayText(value: BoxSpacingValue, steps: readonly SpacingScaleOption[]): string;
+/**
+ * The long form used in tooltips and the editor's title, e.g.
+ * `Medium (theme spacing) — 16px`. Names the theme connection explicitly,
+ * because that is the property an author cannot see from the number.
+ */
+export declare function spacingDescription(value: BoxSpacingValue, steps: readonly SpacingScaleOption[]): string;
+/** How the unit menu groups itself, so a long list stays readable. */
+export declare const UNIT_GROUPS: ReadonlyArray<{
+    label: string;
+    units: readonly CssUnit[];
+}>;
+/**
+ * Units in the shared list that are NOT lengths, and so are never offered
+ * as an amount of space.
+ *
+ * `dpi` is a resolution — it answers "how dense are the dots?", not "how
+ * far?" — and `margin-top: 2dpi` is not a thing. It is named here rather
+ * than quietly left out so the coverage check below stays a real check:
+ * a unit added to `CssUnit` and forgotten still fails.
+ */
+export declare const UNITS_NOT_SPACING: readonly CssUnit[];
+/**
+ * The plain-language gloss shown beside each unit in the menu — the
+ * one-line version of what the docs page explains at length.
+ */
+export declare const UNIT_GLOSS: Partial<Record<CssUnit, string>>;
+type ResponsiveStylingAnchor = BesignerDocsAnchor<'responsiveStyling'>;
+/**
+ * The docs anchor for a unit. Units with no section of their own fall back
+ * to the custom-amounts section, so every entry in the menu has somewhere
+ * to send an author who does not recognise it.
+ */
+export declare function unitDocsAnchor(unit: CssUnit): ResponsiveStylingAnchor;
+export {};

package/src/lib/box-styler/spacing-value.js

@@ -0,0 +1,223 @@
+/**
+ * @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 { CssUnit } from "@aglyn/shared-data-enums";
+/**
+ * Whether the author has set this side at all.
+ *
+ * The one that matters: `isSpacingSet(0)` is TRUE. `0` is a decision, and
+ * an editor that reads it as "unset" both hides it from the author and
+ * loses it on the next write.
+ */ export function isSpacingSet(value) {
+    if (value === undefined || value === null) return false;
+    if (typeof value === 'number') return Number.isFinite(value);
+    return `${value}`.trim() !== '';
+}
+/**
+ * Whether this value is a theme spacing step — the form that keeps
+ * following the theme — rather than a flattened CSS string.
+ *
+ * A numeric STRING is deliberately not a step: MUI passes strings through
+ * untouched, so `'2'` reaches the browser as `margin-top: 2` and is
+ * dropped by the CSS parser. Only a real number is resolved.
+ */ export function isThemeSpacingStep(value) {
+    return typeof value === 'number' && Number.isFinite(value);
+}
+/** The ladder entry a stored value corresponds to, if any. */ export function findSpacingStep(value, steps) {
+    if (!isThemeSpacingStep(value)) return undefined;
+    return (steps != null ? steps : []).find((step)=>step.value === value);
+}
+/**
+ * The theme's spacing UNIT, inferred from the ladder itself.
+ *
+ * The ladder already carries the answer — a rung of 1 whose hint is `8px`
+ * says the unit is 8 — so nothing extra has to be threaded through to
+ * resolve a step that has no rung of its own. Returns 0 when the ladder
+ * cannot say, which callers read as "cannot resolve".
+ */ function spacingUnitOf(steps) {
+    for (const step of steps != null ? steps : []){
+        if (!step || step.value === 0) continue;
+        const px = Number.parseFloat(`${step.hint}`);
+        if (Number.isFinite(px) && `${step.hint}`.endsWith('px')) {
+            const unit = px / step.value;
+            if (Number.isFinite(unit) && unit > 0) return unit;
+        }
+    }
+    return 0;
+}
+/**
+ * The compact text one side of the diagram shows — what the element
+ * actually renders, so the diagram reads as a measurement rather than as a
+ * vocabulary quiz. `''` when nothing is set, which is the caller's cue to
+ * show the side's name instead.
+ *
+ * A step resolves to its hint (`16px`) so an author comparing two sides is
+ * comparing like with like; which of them is theme-backed is carried by
+ * the marker and the tooltip, not by making the numbers incomparable.
+ */ export function spacingDisplayText(value, steps) {
+    if (!isSpacingSet(value)) return '';
+    const step = findSpacingStep(value, steps);
+    if (step) return step.hint;
+    // A number the current theme has no rung for is still a valid step, and
+    // it is common — `p: 10` is an ordinary thing to find on a hero. It is
+    // resolved through the theme's own unit rather than shown as `10×`,
+    // which named the step but not the amount, and so could not be compared
+    // with the `32px` sitting next to it.
+    if (typeof value === 'number') {
+        const unit = spacingUnitOf(steps);
+        return unit ? `${Math.round(value * unit * 100) / 100}px` : `${value}×`;
+    }
+    return `${value}`;
+}
+/**
+ * The long form used in tooltips and the editor's title, e.g.
+ * `Medium (theme spacing) — 16px`. Names the theme connection explicitly,
+ * because that is the property an author cannot see from the number.
+ */ export function spacingDescription(value, steps) {
+    if (!isSpacingSet(value)) return 'Not set';
+    const step = findSpacingStep(value, steps);
+    if (step) return `${step.label} (theme spacing) — ${step.hint}`;
+    if (typeof value === 'number') {
+        const unit = spacingUnitOf(steps);
+        const resolved = unit ? ` — ${Math.round(value * unit * 100) / 100}px` : '';
+        return `${value}× the theme spacing unit${resolved}`;
+    }
+    return `${value}`;
+}
+/* ── Units ────────────────────────────────────────────────────────────── */ /** How the unit menu groups itself, so a long list stays readable. */ export const UNIT_GROUPS = [
+    {
+        label: 'Common',
+        units: [
+            CssUnit.PIXELS,
+            CssUnit.REM,
+            CssUnit.EM,
+            CssUnit.PERCENT
+        ]
+    },
+    {
+        label: 'Relative to text',
+        units: [
+            CssUnit.CH
+        ]
+    },
+    {
+        label: 'Relative to the screen',
+        units: [
+            CssUnit.VIEWPORT_WIDTH,
+            CssUnit.VIEWPORT_HEIGHT,
+            CssUnit.SMALL_VIEWPORT_WIDTH,
+            CssUnit.SMALL_VIEWPORT_HEIGHT,
+            CssUnit.LARGE_VIEWPORT_WIDTH,
+            CssUnit.LARGE_VIEWPORT_HEIGHT,
+            CssUnit.DYNAMIC_VIEWPORT_WIDTH,
+            CssUnit.DYNAMIC_VIEWPORT_HEIGHT,
+            CssUnit.VIEWPORT_MIN,
+            CssUnit.VIEWPORT_MAX
+        ]
+    },
+    {
+        label: 'Keywords',
+        units: [
+            CssUnit.AUTO,
+            CssUnit.INHERIT,
+            CssUnit.INITIAL,
+            CssUnit.UNSET
+        ]
+    },
+    {
+        label: 'Print',
+        units: [
+            CssUnit.POINTS,
+            CssUnit.PICAS,
+            CssUnit.MILLIMETERS,
+            CssUnit.CENTIMETERS,
+            CssUnit.INCHES
+        ]
+    }
+];
+/**
+ * Units in the shared list that are NOT lengths, and so are never offered
+ * as an amount of space.
+ *
+ * `dpi` is a resolution — it answers "how dense are the dots?", not "how
+ * far?" — and `margin-top: 2dpi` is not a thing. It is named here rather
+ * than quietly left out so the coverage check below stays a real check:
+ * a unit added to `CssUnit` and forgotten still fails.
+ */ export const UNITS_NOT_SPACING = [
+    CssUnit.DPI
+];
+/**
+ * The plain-language gloss shown beside each unit in the menu — the
+ * one-line version of what the docs page explains at length.
+ */ export const UNIT_GLOSS = {
+    [CssUnit.PIXELS]: 'a fixed dot on screen',
+    [CssUnit.REM]: "multiples of the page's base text size",
+    [CssUnit.EM]: "multiples of THIS element's text size",
+    [CssUnit.PERCENT]: "a share of the parent's width",
+    [CssUnit.CH]: 'the width of one character',
+    [CssUnit.VIEWPORT_WIDTH]: '1% of the window width',
+    [CssUnit.VIEWPORT_HEIGHT]: '1% of the window height',
+    [CssUnit.SMALL_VIEWPORT_WIDTH]: 'window width at its smallest',
+    [CssUnit.SMALL_VIEWPORT_HEIGHT]: 'window height with the address bar showing',
+    [CssUnit.LARGE_VIEWPORT_WIDTH]: 'window width at its largest',
+    [CssUnit.LARGE_VIEWPORT_HEIGHT]: 'window height with the address bar hidden',
+    [CssUnit.DYNAMIC_VIEWPORT_WIDTH]: 'window width right now',
+    [CssUnit.DYNAMIC_VIEWPORT_HEIGHT]: 'window height right now',
+    [CssUnit.VIEWPORT_MIN]: 'the smaller of the two window sides',
+    [CssUnit.VIEWPORT_MAX]: 'the larger of the two window sides',
+    [CssUnit.AUTO]: 'let the browser decide',
+    [CssUnit.INHERIT]: 'take the parent’s value',
+    [CssUnit.INITIAL]: "back to CSS's own default",
+    [CssUnit.UNSET]: 'inherit, or reset if it cannot',
+    [CssUnit.POINTS]: 'points, as in print',
+    [CssUnit.PICAS]: 'picas (12 points)',
+    [CssUnit.MILLIMETERS]: 'millimetres, for print',
+    [CssUnit.CENTIMETERS]: 'centimetres, for print',
+    [CssUnit.INCHES]: 'inches, for print'
+};
+/**
+ * Which section of the responsive-styling page explains a unit
+ * (AGL-2486, item 5).
+ *
+ * Typed against the page's REAL heading anchors, so renaming a docs
+ * heading turns this map into a compile error rather than a dead link —
+ * which is the point of the generated registry.
+ */ const UNIT_ANCHORS = {
+    [CssUnit.PIXELS]: '#unit-px',
+    [CssUnit.REM]: '#unit-rem',
+    [CssUnit.EM]: '#unit-em',
+    [CssUnit.PERCENT]: '#unit-percent',
+    [CssUnit.CH]: '#unit-ch',
+    [CssUnit.VIEWPORT_WIDTH]: '#unit-viewport',
+    [CssUnit.VIEWPORT_HEIGHT]: '#unit-viewport',
+    [CssUnit.VIEWPORT_MIN]: '#unit-viewport',
+    [CssUnit.VIEWPORT_MAX]: '#unit-viewport',
+    [CssUnit.SMALL_VIEWPORT_WIDTH]: '#unit-small-viewport',
+    [CssUnit.SMALL_VIEWPORT_HEIGHT]: '#unit-small-viewport',
+    [CssUnit.LARGE_VIEWPORT_WIDTH]: '#unit-small-viewport',
+    [CssUnit.LARGE_VIEWPORT_HEIGHT]: '#unit-small-viewport',
+    [CssUnit.DYNAMIC_VIEWPORT_WIDTH]: '#unit-small-viewport',
+    [CssUnit.DYNAMIC_VIEWPORT_HEIGHT]: '#unit-small-viewport'
+};
+/**
+ * The docs anchor for a unit. Units with no section of their own fall back
+ * to the custom-amounts section, so every entry in the menu has somewhere
+ * to send an author who does not recognise it.
+ */ export function unitDocsAnchor(unit) {
+    var _UNIT_ANCHORS_unit;
+    return (_UNIT_ANCHORS_unit = UNIT_ANCHORS[unit]) != null ? _UNIT_ANCHORS_unit : '#spacing-custom-amounts';
+}
+
+//# sourceMappingURL=spacing-value.js.map

package/src/lib/box-styler/spacing-value.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/box-styler/spacing-value.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 { CssUnit } from '@aglyn/shared-data-enums'\nimport type { SpacingScaleOption } from '../utils/theme-scale-options'\nimport type { BesignerDocsAnchor } from '../utils/docs-help'\n\n/**\n * The box styler's value logic (AGL-2486, item 5), kept apart from the\n * components so the rules can be asserted rather than described.\n *\n * A side of the box holds one of three things, and telling them apart is\n * the whole job:\n *\n * - a **theme spacing step**, stored as a NUMBER, which MUI resolves\n *   through `theme.spacing` at render (`2` → 16px under `spacing: 8`);\n * - a **custom amount**, stored as a CSS string (`'12px'`, `'2rem'`,\n *   `'auto'`);\n * - **nothing** — the property is absent and the element inherits.\n *\n * `0` belongs to the first group, not the third. It means \"no space\", it\n * renders as `0px`, and it is the value an author picks to cancel space a\n * parent or a preset put there. `strictNullChecks` is off repo-wide, so\n * every `if (!value)` in this file's neighbourhood would have silently\n * folded that answer into \"unset\" — hence the explicit predicates below.\n */\n\n/** A box spacing value as STORED: a theme step, or a CSS string. */\nexport type BoxSpacingValue = string | number | undefined\n\n/**\n * Whether the author has set this side at all.\n *\n * The one that matters: `isSpacingSet(0)` is TRUE. `0` is a decision, and\n * an editor that reads it as \"unset\" both hides it from the author and\n * loses it on the next write.\n */\nexport function isSpacingSet(value: BoxSpacingValue): boolean {\n  if (value === undefined || value === null) return false\n  if (typeof value === 'number') return Number.isFinite(value)\n  return `${value}`.trim() !== ''\n}\n\n/**\n * Whether this value is a theme spacing step — the form that keeps\n * following the theme — rather than a flattened CSS string.\n *\n * A numeric STRING is deliberately not a step: MUI passes strings through\n * untouched, so `'2'` reaches the browser as `margin-top: 2` and is\n * dropped by the CSS parser. Only a real number is resolved.\n */\nexport function isThemeSpacingStep(value: BoxSpacingValue): boolean {\n  return typeof value === 'number' && Number.isFinite(value)\n}\n\n/** The ladder entry a stored value corresponds to, if any. */\nexport function findSpacingStep(\n  value: BoxSpacingValue,\n  steps: readonly SpacingScaleOption[],\n): SpacingScaleOption | undefined {\n  if (!isThemeSpacingStep(value)) return undefined\n  return (steps ?? []).find((step) => step.value === value)\n}\n\n/**\n * The theme's spacing UNIT, inferred from the ladder itself.\n *\n * The ladder already carries the answer — a rung of 1 whose hint is `8px`\n * says the unit is 8 — so nothing extra has to be threaded through to\n * resolve a step that has no rung of its own. Returns 0 when the ladder\n * cannot say, which callers read as \"cannot resolve\".\n */\nfunction spacingUnitOf(steps: readonly SpacingScaleOption[]): number {\n  for (const step of steps ?? []) {\n    if (!step || step.value === 0) continue\n    const px = Number.parseFloat(`${step.hint}`)\n    if (Number.isFinite(px) && `${step.hint}`.endsWith('px')) {\n      const unit = px / step.value\n      if (Number.isFinite(unit) && unit > 0) return unit\n    }\n  }\n  return 0\n}\n\n/**\n * The compact text one side of the diagram shows — what the element\n * actually renders, so the diagram reads as a measurement rather than as a\n * vocabulary quiz. `''` when nothing is set, which is the caller's cue to\n * show the side's name instead.\n *\n * A step resolves to its hint (`16px`) so an author comparing two sides is\n * comparing like with like; which of them is theme-backed is carried by\n * the marker and the tooltip, not by making the numbers incomparable.\n */\nexport function spacingDisplayText(\n  value: BoxSpacingValue,\n  steps: readonly SpacingScaleOption[],\n): string {\n  if (!isSpacingSet(value)) return ''\n  const step = findSpacingStep(value, steps)\n  if (step) return step.hint\n  // A number the current theme has no rung for is still a valid step, and\n  // it is common — `p: 10` is an ordinary thing to find on a hero. It is\n  // resolved through the theme's own unit rather than shown as `10×`,\n  // which named the step but not the amount, and so could not be compared\n  // with the `32px` sitting next to it.\n  if (typeof value === 'number') {\n    const unit = spacingUnitOf(steps)\n    return unit ? `${Math.round(value * unit * 100) / 100}px` : `${value}×`\n  }\n  return `${value}`\n}\n\n/**\n * The long form used in tooltips and the editor's title, e.g.\n * `Medium (theme spacing) — 16px`. Names the theme connection explicitly,\n * because that is the property an author cannot see from the number.\n */\nexport function spacingDescription(\n  value: BoxSpacingValue,\n  steps: readonly SpacingScaleOption[],\n): string {\n  if (!isSpacingSet(value)) return 'Not set'\n  const step = findSpacingStep(value, steps)\n  if (step) return `${step.label} (theme spacing) — ${step.hint}`\n  if (typeof value === 'number') {\n    const unit = spacingUnitOf(steps)\n    const resolved = unit ? ` — ${Math.round(value * unit * 100) / 100}px` : ''\n    return `${value}× the theme spacing unit${resolved}`\n  }\n  return `${value}`\n}\n\n/* ── Units ────────────────────────────────────────────────────────────── */\n\n/** How the unit menu groups itself, so a long list stays readable. */\nexport const UNIT_GROUPS: ReadonlyArray<{\n  label: string\n  units: readonly CssUnit[]\n}> = [\n  {\n    label: 'Common',\n    units: [CssUnit.PIXELS, CssUnit.REM, CssUnit.EM, CssUnit.PERCENT],\n  },\n  { label: 'Relative to text', units: [CssUnit.CH] },\n  {\n    label: 'Relative to the screen',\n    units: [\n      CssUnit.VIEWPORT_WIDTH,\n      CssUnit.VIEWPORT_HEIGHT,\n      CssUnit.SMALL_VIEWPORT_WIDTH,\n      CssUnit.SMALL_VIEWPORT_HEIGHT,\n      CssUnit.LARGE_VIEWPORT_WIDTH,\n      CssUnit.LARGE_VIEWPORT_HEIGHT,\n      CssUnit.DYNAMIC_VIEWPORT_WIDTH,\n      CssUnit.DYNAMIC_VIEWPORT_HEIGHT,\n      CssUnit.VIEWPORT_MIN,\n      CssUnit.VIEWPORT_MAX,\n    ],\n  },\n  {\n    label: 'Keywords',\n    units: [CssUnit.AUTO, CssUnit.INHERIT, CssUnit.INITIAL, CssUnit.UNSET],\n  },\n  {\n    label: 'Print',\n    units: [\n      CssUnit.POINTS,\n      CssUnit.PICAS,\n      CssUnit.MILLIMETERS,\n      CssUnit.CENTIMETERS,\n      CssUnit.INCHES,\n    ],\n  },\n]\n\n/**\n * Units in the shared list that are NOT lengths, and so are never offered\n * as an amount of space.\n *\n * `dpi` is a resolution — it answers \"how dense are the dots?\", not \"how\n * far?\" — and `margin-top: 2dpi` is not a thing. It is named here rather\n * than quietly left out so the coverage check below stays a real check:\n * a unit added to `CssUnit` and forgotten still fails.\n */\nexport const UNITS_NOT_SPACING: readonly CssUnit[] = [CssUnit.DPI]\n\n/**\n * The plain-language gloss shown beside each unit in the menu — the\n * one-line version of what the docs page explains at length.\n */\nexport const UNIT_GLOSS: Partial<Record<CssUnit, string>> = {\n  [CssUnit.PIXELS]: 'a fixed dot on screen',\n  [CssUnit.REM]: \"multiples of the page's base text size\",\n  [CssUnit.EM]: \"multiples of THIS element's text size\",\n  [CssUnit.PERCENT]: \"a share of the parent's width\",\n  [CssUnit.CH]: 'the width of one character',\n  [CssUnit.VIEWPORT_WIDTH]: '1% of the window width',\n  [CssUnit.VIEWPORT_HEIGHT]: '1% of the window height',\n  [CssUnit.SMALL_VIEWPORT_WIDTH]: 'window width at its smallest',\n  [CssUnit.SMALL_VIEWPORT_HEIGHT]: 'window height with the address bar showing',\n  [CssUnit.LARGE_VIEWPORT_WIDTH]: 'window width at its largest',\n  [CssUnit.LARGE_VIEWPORT_HEIGHT]: 'window height with the address bar hidden',\n  [CssUnit.DYNAMIC_VIEWPORT_WIDTH]: 'window width right now',\n  [CssUnit.DYNAMIC_VIEWPORT_HEIGHT]: 'window height right now',\n  [CssUnit.VIEWPORT_MIN]: 'the smaller of the two window sides',\n  [CssUnit.VIEWPORT_MAX]: 'the larger of the two window sides',\n  [CssUnit.AUTO]: 'let the browser decide',\n  [CssUnit.INHERIT]: 'take the parent’s value',\n  [CssUnit.INITIAL]: \"back to CSS's own default\",\n  [CssUnit.UNSET]: 'inherit, or reset if it cannot',\n  [CssUnit.POINTS]: 'points, as in print',\n  [CssUnit.PICAS]: 'picas (12 points)',\n  [CssUnit.MILLIMETERS]: 'millimetres, for print',\n  [CssUnit.CENTIMETERS]: 'centimetres, for print',\n  [CssUnit.INCHES]: 'inches, for print',\n}\n\ntype ResponsiveStylingAnchor = BesignerDocsAnchor<'responsiveStyling'>\n\n/**\n * Which section of the responsive-styling page explains a unit\n * (AGL-2486, item 5).\n *\n * Typed against the page's REAL heading anchors, so renaming a docs\n * heading turns this map into a compile error rather than a dead link —\n * which is the point of the generated registry.\n */\nconst UNIT_ANCHORS: Partial<Record<CssUnit, ResponsiveStylingAnchor>> = {\n  [CssUnit.PIXELS]: '#unit-px',\n  [CssUnit.REM]: '#unit-rem',\n  [CssUnit.EM]: '#unit-em',\n  [CssUnit.PERCENT]: '#unit-percent',\n  [CssUnit.CH]: '#unit-ch',\n  [CssUnit.VIEWPORT_WIDTH]: '#unit-viewport',\n  [CssUnit.VIEWPORT_HEIGHT]: '#unit-viewport',\n  [CssUnit.VIEWPORT_MIN]: '#unit-viewport',\n  [CssUnit.VIEWPORT_MAX]: '#unit-viewport',\n  [CssUnit.SMALL_VIEWPORT_WIDTH]: '#unit-small-viewport',\n  [CssUnit.SMALL_VIEWPORT_HEIGHT]: '#unit-small-viewport',\n  [CssUnit.LARGE_VIEWPORT_WIDTH]: '#unit-small-viewport',\n  [CssUnit.LARGE_VIEWPORT_HEIGHT]: '#unit-small-viewport',\n  [CssUnit.DYNAMIC_VIEWPORT_WIDTH]: '#unit-small-viewport',\n  [CssUnit.DYNAMIC_VIEWPORT_HEIGHT]: '#unit-small-viewport',\n}\n\n/**\n * The docs anchor for a unit. Units with no section of their own fall back\n * to the custom-amounts section, so every entry in the menu has somewhere\n * to send an author who does not recognise it.\n */\nexport function unitDocsAnchor(unit: CssUnit): ResponsiveStylingAnchor {\n  return UNIT_ANCHORS[unit] ?? '#spacing-custom-amounts'\n}\n"],"names":["CssUnit","isSpacingSet","value","undefined","Number","isFinite","trim","isThemeSpacingStep","findSpacingStep","steps","find","step","spacingUnitOf","px","parseFloat","hint","endsWith","unit","spacingDisplayText","Math","round","spacingDescription","label","resolved","UNIT_GROUPS","units","PIXELS","REM","EM","PERCENT","CH","VIEWPORT_WIDTH","VIEWPORT_HEIGHT","SMALL_VIEWPORT_WIDTH","SMALL_VIEWPORT_HEIGHT","LARGE_VIEWPORT_WIDTH","LARGE_VIEWPORT_HEIGHT","DYNAMIC_VIEWPORT_WIDTH","DYNAMIC_VIEWPORT_HEIGHT","VIEWPORT_MIN","VIEWPORT_MAX","AUTO","INHERIT","INITIAL","UNSET","POINTS","PICAS","MILLIMETERS","CENTIMETERS","INCHES","UNITS_NOT_SPACING","DPI","UNIT_GLOSS","UNIT_ANCHORS","unitDocsAnchor"],"mappings":"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"}

package/src/lib/box-styler/types.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2022 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 { BoxSpacingValue } from './spacing-value';
+/**
+ * A side's value is `string | number`, NOT the `CSSStyleDeclaration` string
+ * these types used to borrow (AGL-2486).
+ *
+ * The narrower type was not merely inconvenient — it was the bug. A theme
+ * spacing step is stored as a NUMBER so MUI resolves it through
+ * `theme.spacing`, and a string-only type meant the styler could neither
+ * read one an author already had nor ever write a new one.
+ */
+export type PaddingMeasurements = Partial<Record<'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft', BoxSpacingValue>>;
+export type MarginMeasurements = Partial<Record<'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft', BoxSpacingValue>>;
+export type Measurements = PaddingMeasurements & MarginMeasurements;

package/src/lib/box-styler/types.js

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2022 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ export { };
+
+//# sourceMappingURL=types.js.map

package/src/lib/box-styler/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/box-styler/types.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2022 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 { BoxSpacingValue } from './spacing-value'\n\n/**\n * A side's value is `string | number`, NOT the `CSSStyleDeclaration` string\n * these types used to borrow (AGL-2486).\n *\n * The narrower type was not merely inconvenient — it was the bug. A theme\n * spacing step is stored as a NUMBER so MUI resolves it through\n * `theme.spacing`, and a string-only type meant the styler could neither\n * read one an author already had nor ever write a new one.\n */\nexport type PaddingMeasurements = Partial<\n  Record<\n    'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft',\n    BoxSpacingValue\n  >\n>\nexport type MarginMeasurements = Partial<\n  Record<\n    'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft',\n    BoxSpacingValue\n  >\n>\nexport type Measurements = PaddingMeasurements & MarginMeasurements\n"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAyBD,WAAmE"}

package/src/lib/components/accordion-list.component.d.ts

@@ -0,0 +1,50 @@
+/**
+ * @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 HelpTipContent } from '@aglyn/shared-ui-jsx';
+import { type AccordionDetailsProps as MuiAccordionDetailsProps, AccordionProps as MuiAccordionProps, type AccordionSummaryProps as MuiAccordionSummaryProps } from '@mui/material';
+export interface AccordionProps extends MuiAccordionProps {
+    AccordionSummaryProps?: MuiAccordionSummaryProps;
+    AccordionDetailsProps?: MuiAccordionDetailsProps;
+    summary?: JSX.Children;
+    /** Contextual help affordance rendered after the summary label (AGL-600). */
+    help?: HelpTipContent;
+}
+export declare const Accordion: import("react").ForwardRefExoticComponent<Omit<AccordionProps, "ref"> & import("react").RefAttributes<any>>;
+export interface AccordionListProps<T = any> {
+    items: T[];
+    unique?: boolean;
+    defaultExpanded?: JSX.Key[];
+    AccordionProps?: MuiAccordionProps;
+    AccordionSummaryProps?: MuiAccordionSummaryProps;
+    AccordionDetailsProps?: MuiAccordionDetailsProps;
+    onRenderSummary: (props: {
+        item: T;
+    }) => JSX.Children;
+    onRenderDetail: (props: {
+        item: T;
+    }) => JSX.Children;
+    getItemId: (item: T) => string | number;
+    /** Per-item help affordance on the accordion summary (AGL-2167). Returns
+     * undefined for the groups that need no explanation, so a list can help
+     * one group without captioning every one of them — which `AccordionProps`
+     * cannot do, since it applies to all of them alike. */
+    getItemHelp?: (item: T) => HelpTipContent | undefined;
+}
+export declare const AccordionListComponent: (<T>(props: AccordionListProps<T>) => import("react").JSX.Element) & {
+    displayName: string;
+};
+export default AccordionListComponent;