@aglyn/besigner-ui 1.0.0-beta.143

package/src/lib/box-styler/components/spacing-editor.js

@@ -0,0 +1,347 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { buildCssMeasurement, CssUnit, isGlobalUnit, parseCssMeasurement } from "@aglyn/shared-data-enums";
+import { HelpTip } from "@aglyn/shared-ui-jsx";
+import { Box, Input, ListSubheader, MenuItem, Select, Stack, Typography } from "@mui/material";
+import { useCallback, useMemo, useState } from "react";
+import { besignerDocsUrl } from "../../utils/docs-help.js";
+import { findSpacingStep, isSpacingSet, isThemeSpacingStep, spacingDisplayText, UNIT_GLOSS, UNIT_GROUPS, unitDocsAnchor } from "../spacing-value.js";
+/**
+ * The editor behind one side of the box (AGL-2486, item 5).
+ *
+ * The control it replaces was a number box with a unit menu and nothing
+ * else, so the only answer an author could give was a flattened CSS
+ * length. Two consequences followed: the theme's spacing ladder was
+ * unreachable from the one panel that most needs it, and a step an author
+ * already had — every `Box`, `Paper` and section preset ships numeric
+ * padding — read back as blank, because `parseCssMeasurement` rejects a
+ * number outright.
+ *
+ * So the primary control is now the ladder, named in words rather than in
+ * CSS, and a custom amount is the deliberate second choice rather than the
+ * only one. Which mode is showing is DERIVED from the stored value (a
+ * string is a custom amount, a number is a step) with a latch that only
+ * ever opens custom mode — a remembered mode goes stale the moment the
+ * selection moves to another element.
+ */ /** The sentinel the select uses for "no value at all". */ const UNSET = '__unset__';
+/** The sentinel that reveals the number + unit pair. */ const CUSTOM = '__custom__';
+/**
+ * `auto`, which is its own select value AND the string that gets stored —
+ * unlike the two sentinels above, which stand for something else.
+ */ const AUTO = 'auto';
+/** Whether the stored value is the `auto` keyword. */ const isAutoValue = (value)=>typeof value === 'string' && value.trim().toLowerCase() === AUTO;
+export const SpacingEditor = (props)=>{
+    var _ref;
+    const { value, steps, label, allowAuto, onChange } = props;
+    const ladder = steps != null ? steps : [];
+    /**
+   * `auto`, when this side offers it, is a LIST answer rather than a
+   * custom amount — otherwise picking it from the list would immediately
+   * read back as "Custom amount…", since it is a string like any other.
+   */ const isAuto = Boolean(allowAuto) && isAutoValue(value);
+    // A string value IS custom; the latch only adds the case where the
+    // author asked for custom mode while the stored value is still a step.
+    const [customLatch, setCustomLatch] = useState(false);
+    const isCustom = customLatch || isSpacingSet(value) && !isThemeSpacingStep(value) && !isAuto;
+    const parsed = useMemo(()=>parseCssMeasurement(typeof value === 'string' ? value : undefined), [
+        value
+    ]);
+    /**
+   * A step the ladder has no rung for still has to be SELECTABLE.
+   *
+   * `p: 10` is an ordinary thing to find on a hero, and 10 is not on the
+   * ladder. Without an option carrying that value the select rendered
+   * blank — the control claimed the side was unset while the diagram
+   * beside it read `80px`, and the next pick would have quietly replaced
+   * a value the author never saw. So the stored step is offered as its
+   * own entry when the ladder does not already contain it.
+   */ const offLadderStep = isThemeSpacingStep(value) && !findSpacingStep(value, ladder) ? {
+        value: value,
+        hint: spacingDisplayText(value, ladder)
+    } : null;
+    const selectValue = isCustom ? CUSTOM : isAuto ? AUTO : isThemeSpacingStep(value) ? `${value}` : UNSET;
+    const handleSelect = useCallback((next)=>{
+        if (next === CUSTOM) {
+            setCustomLatch(true);
+            return;
+        }
+        setCustomLatch(false);
+        if (next === UNSET) {
+            onChange == null ? void 0 : onChange(undefined);
+            return;
+        }
+        // `auto` is a KEYWORD, not an amount, and it has to be emitted as
+        // the string CSS expects. It also has to return HERE: `Number('auto')`
+        // is NaN, so the step branch below would emit `undefined` and
+        // silently clear the side the author had just set.
+        if (next === AUTO) {
+            onChange == null ? void 0 : onChange(AUTO);
+            return;
+        }
+        // The STEP, as a number — MUI multiplies it by `theme.spacing` at
+        // render, which is the entire reason this control exists. `0` is a
+        // real rung ("None") and must survive: `Number('0')` is 0 and
+        // `Number.isFinite(0)` is true, so it does.
+        const step = Number(next);
+        onChange == null ? void 0 : onChange(Number.isFinite(step) ? step : undefined);
+    }, [
+        onChange
+    ]);
+    const emitCustom = useCallback((quantity, unit)=>{
+        if (!unit) {
+            // No unit is not a length. Clearing is the honest reading — the
+            // old control silently emitted `undefined` here too, but by
+            // accident rather than on purpose.
+            onChange == null ? void 0 : onChange(undefined);
+            return;
+        }
+        if (isGlobalUnit(unit)) {
+            onChange == null ? void 0 : onChange(`${unit}`);
+            return;
+        }
+        const text = `${quantity}`.trim();
+        if (text === '') {
+            onChange == null ? void 0 : onChange(undefined);
+            return;
+        }
+        const numeric = Number(text);
+        if (!Number.isFinite(numeric)) {
+            onChange == null ? void 0 : onChange(undefined);
+            return;
+        }
+        // `buildCssMeasurement` keeps `0` (its guard is `_isNum`, not
+        // truthiness), so `0px` is emitted rather than swallowed.
+        onChange == null ? void 0 : onChange(buildCssMeasurement({
+            value: numeric,
+            unit
+        }));
+    }, [
+        onChange
+    ]);
+    const currentUnit = (_ref = parsed == null ? void 0 : parsed.unit) != null ? _ref : '';
+    const currentQuantity = (parsed == null ? void 0 : parsed.value) === undefined || (parsed == null ? void 0 : parsed.value) === null ? '' : `${parsed.value}`;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1,
+        sx: {
+            mt: 1
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(Select, {
+                size: "small",
+                value: selectValue,
+                onChange: (event)=>handleSelect(`${event.target.value}`),
+                inputProps: {
+                    'aria-label': `${label} value`
+                },
+                sx: {
+                    fontSize: '0.78rem'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        value: UNSET,
+                        children: /*#__PURE__*/ _jsx("em", {
+                            children: 'Not set'
+                        })
+                    }),
+                    ladder.length ? /*#__PURE__*/ _jsx(ListSubheader, {
+                        sx: {
+                            lineHeight: 2
+                        },
+                        children: 'Theme spacing'
+                    }) : null,
+                    offLadderStep ? /*#__PURE__*/ _jsxs(MenuItem, {
+                        value: `${offLadderStep.value}`,
+                        children: [
+                            /*#__PURE__*/ _jsx(Box, {
+                                component: "span",
+                                sx: {
+                                    flex: 1
+                                },
+                                children: `${offLadderStep.value}× the spacing unit`
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                component: "span",
+                                variant: "caption",
+                                sx: {
+                                    color: 'text.secondary',
+                                    ml: 1
+                                },
+                                children: offLadderStep.hint
+                            })
+                        ]
+                    }) : null,
+                    ladder.map((step)=>/*#__PURE__*/ _jsxs(MenuItem, {
+                            value: `${step.value}`,
+                            children: [
+                                /*#__PURE__*/ _jsx(Box, {
+                                    component: "span",
+                                    sx: {
+                                        flex: 1
+                                    },
+                                    children: step.label
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    component: "span",
+                                    variant: "caption",
+                                    sx: {
+                                        color: 'text.secondary',
+                                        ml: 1
+                                    },
+                                    children: step.hint
+                                })
+                            ]
+                        }, step.value)),
+                    allowAuto ? /*#__PURE__*/ _jsx(ListSubheader, {
+                        sx: {
+                            lineHeight: 2
+                        },
+                        children: 'Automatic'
+                    }) : null,
+                    allowAuto ? /*#__PURE__*/ _jsxs(MenuItem, {
+                        value: AUTO,
+                        children: [
+                            /*#__PURE__*/ _jsx(Box, {
+                                component: "span",
+                                sx: {
+                                    flex: 1
+                                },
+                                children: 'Auto'
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                component: "span",
+                                variant: "caption",
+                                sx: {
+                                    color: 'text.secondary',
+                                    ml: 1
+                                },
+                                children: UNIT_GLOSS[CssUnit.AUTO]
+                            })
+                        ]
+                    }) : null,
+                    /*#__PURE__*/ _jsx(ListSubheader, {
+                        sx: {
+                            lineHeight: 2
+                        },
+                        children: 'Exact amount'
+                    }),
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        value: CUSTOM,
+                        children: 'Custom amount…'
+                    })
+                ]
+            }),
+            isCustom ? /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Input, {
+                        value: currentQuantity,
+                        type: "number",
+                        placeholder: "0",
+                        disabled: Boolean(currentUnit) && isGlobalUnit(currentUnit),
+                        inputProps: {
+                            'aria-label': `${label} amount`
+                        },
+                        onChange: (event)=>emitCustom(event.target.value, currentUnit || CssUnit.PIXELS),
+                        sx: {
+                            width: 72,
+                            fontSize: '0.78rem'
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(Select, {
+                        size: "small",
+                        displayEmpty: true,
+                        value: currentUnit,
+                        onChange: (event)=>emitCustom(currentQuantity, event.target.value),
+                        inputProps: {
+                            'aria-label': `${label} unit`
+                        },
+                        renderValue: (unit)=>unit ? `${unit}` : 'unit',
+                        sx: {
+                            fontSize: '0.78rem',
+                            minWidth: 88
+                        },
+                        children: UNIT_GROUPS.flatMap((group)=>[
+                                /*#__PURE__*/ _jsx(ListSubheader, {
+                                    sx: {
+                                        lineHeight: 2
+                                    },
+                                    children: group.label
+                                }, group.label),
+                                ...group.units.map((unit)=>{
+                                    var _UNIT_GLOSS_unit;
+                                    return /*#__PURE__*/ _jsxs(MenuItem, {
+                                        value: unit,
+                                        children: [
+                                            /*#__PURE__*/ _jsxs(Box, {
+                                                component: "span",
+                                                sx: {
+                                                    flex: 1,
+                                                    minWidth: 0
+                                                },
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Typography, {
+                                                        component: "span",
+                                                        variant: "body2",
+                                                        children: unit
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Typography, {
+                                                        component: "span",
+                                                        variant: "caption",
+                                                        sx: {
+                                                            color: 'text.secondary',
+                                                            ml: 1
+                                                        },
+                                                        children: UNIT_GLOSS[unit]
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsx(HelpTip, {
+                                                title: `The ${unit} unit`,
+                                                excerpt: (_UNIT_GLOSS_unit = UNIT_GLOSS[unit]) != null ? _UNIT_GLOSS_unit : 'A CSS unit.',
+                                                href: besignerDocsUrl('responsiveStyling', unitDocsAnchor(unit)),
+                                                ariaLabel: `What is ${unit}?`,
+                                                onClick: (event)=>event.stopPropagation(),
+                                                sx: {
+                                                    ml: 1,
+                                                    fontSize: '0.9em'
+                                                }
+                                            })
+                                        ]
+                                    }, unit);
+                                })
+                            ])
+                    }),
+                    /*#__PURE__*/ _jsx(HelpTip, {
+                        title: "Steps or exact amounts",
+                        excerpt: "A theme spacing step keeps following your theme; an exact amount is pinned forever. Units decide what the number is measured against.",
+                        href: besignerDocsUrl('responsiveStyling', '#spacing-units'),
+                        sx: {
+                            fontSize: '0.9em'
+                        }
+                    })
+                ]
+            }) : null
+        ]
+    });
+};
+export default SpacingEditor;
+
+//# sourceMappingURL=spacing-editor.js.map

package/src/lib/box-styler/components/spacing-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../libs/besigner/feature/designer/src/lib/box-styler/components/spacing-editor.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  buildCssMeasurement,\n  CssUnit,\n  isGlobalUnit,\n  parseCssMeasurement,\n} from '@aglyn/shared-data-enums'\nimport { HelpTip } from '@aglyn/shared-ui-jsx'\nimport {\n  Box,\n  Input,\n  ListSubheader,\n  MenuItem,\n  Select,\n  Stack,\n  Typography,\n} from '@mui/material'\nimport { useCallback, useMemo, useState } from 'react'\n\nimport { besignerDocsUrl } from '../../utils/docs-help'\nimport type { SpacingScaleOption } from '../../utils/theme-scale-options'\nimport {\n  type BoxSpacingValue,\n  findSpacingStep,\n  isSpacingSet,\n  isThemeSpacingStep,\n  spacingDisplayText,\n  UNIT_GLOSS,\n  UNIT_GROUPS,\n  unitDocsAnchor,\n} from '../spacing-value'\n\n/**\n * The editor behind one side of the box (AGL-2486, item 5).\n *\n * The control it replaces was a number box with a unit menu and nothing\n * else, so the only answer an author could give was a flattened CSS\n * length. Two consequences followed: the theme's spacing ladder was\n * unreachable from the one panel that most needs it, and a step an author\n * already had — every `Box`, `Paper` and section preset ships numeric\n * padding — read back as blank, because `parseCssMeasurement` rejects a\n * number outright.\n *\n * So the primary control is now the ladder, named in words rather than in\n * CSS, and a custom amount is the deliberate second choice rather than the\n * only one. Which mode is showing is DERIVED from the stored value (a\n * string is a custom amount, a number is a step) with a latch that only\n * ever opens custom mode — a remembered mode goes stale the moment the\n * selection moves to another element.\n */\n\n/** The sentinel the select uses for \"no value at all\". */\nconst UNSET = '__unset__'\n/** The sentinel that reveals the number + unit pair. */\nconst CUSTOM = '__custom__'\n/**\n * `auto`, which is its own select value AND the string that gets stored —\n * unlike the two sentinels above, which stand for something else.\n */\nconst AUTO = 'auto'\n\n/** Whether the stored value is the `auto` keyword. */\nconst isAutoValue = (value: BoxSpacingValue) =>\n  typeof value === 'string' && value.trim().toLowerCase() === AUTO\n\nexport interface SpacingEditorProps {\n  /** The side's stored value: a theme step, a CSS string, or nothing. */\n  value: BoxSpacingValue\n  /** The theme's spacing ladder; empty leaves custom amounts only. */\n  steps?: readonly SpacingScaleOption[]\n  /** Accessible name for the pair, e.g. `Space inside — top`. */\n  label: string\n  /**\n   * Whether `auto` belongs in the list for this side (decided:\n   * \"let's add the auto to this option list as well instead of only in\n   * the custom amount\").\n   *\n   * It is a per-SIDE question, not a preference. `margin: auto` is the\n   * standard way to centre an element and the diagram already displays it\n   * on the left and right margins; `padding: auto` is not valid CSS, and\n   * the browser drops the declaration — so offering it on a padding side\n   * would be a menu entry that does nothing and reports nothing, which is\n   * worse than not offering it. The caller answers per side rather than\n   * this component guessing from `label`, which is display copy.\n   *\n   * `auto` reachable through Custom amount → the `auto` unit is what this\n   * replaces as the ONLY route; that route still exists and still works,\n   * and a padding side that somehow holds `auto` still shows it there\n   * rather than pretending the side is unset.\n   */\n  allowAuto?: boolean\n  /**\n   * Emits the value to STORE.\n   *\n   * `undefined` means remove the property. A number is a theme step. A\n   * string is a finished CSS length — never a bare number as a string,\n   * which MUI would pass through and the browser would drop.\n   */\n  onChange?: (value: BoxSpacingValue) => void\n}\n\nexport const SpacingEditor = (props: SpacingEditorProps) => {\n  const { value, steps, label, allowAuto, onChange } = props\n  const ladder = steps ?? []\n\n  /**\n   * `auto`, when this side offers it, is a LIST answer rather than a\n   * custom amount — otherwise picking it from the list would immediately\n   * read back as \"Custom amount…\", since it is a string like any other.\n   */\n  const isAuto = Boolean(allowAuto) && isAutoValue(value)\n\n  // A string value IS custom; the latch only adds the case where the\n  // author asked for custom mode while the stored value is still a step.\n  const [customLatch, setCustomLatch] = useState(false)\n  const isCustom =\n    customLatch ||\n    (isSpacingSet(value) && !isThemeSpacingStep(value) && !isAuto)\n\n  const parsed = useMemo(\n    () => parseCssMeasurement(typeof value === 'string' ? value : undefined),\n    [value],\n  )\n\n  /**\n   * A step the ladder has no rung for still has to be SELECTABLE.\n   *\n   * `p: 10` is an ordinary thing to find on a hero, and 10 is not on the\n   * ladder. Without an option carrying that value the select rendered\n   * blank — the control claimed the side was unset while the diagram\n   * beside it read `80px`, and the next pick would have quietly replaced\n   * a value the author never saw. So the stored step is offered as its\n   * own entry when the ladder does not already contain it.\n   */\n  const offLadderStep =\n    isThemeSpacingStep(value) && !findSpacingStep(value, ladder)\n      ? { value: value as number, hint: spacingDisplayText(value, ladder) }\n      : null\n\n  const selectValue = isCustom\n    ? CUSTOM\n    : isAuto\n      ? AUTO\n      : isThemeSpacingStep(value)\n        ? `${value}`\n        : UNSET\n\n  const handleSelect = useCallback(\n    (next: string) => {\n      if (next === CUSTOM) {\n        setCustomLatch(true)\n        return\n      }\n      setCustomLatch(false)\n      if (next === UNSET) {\n        onChange?.(undefined)\n        return\n      }\n      // `auto` is a KEYWORD, not an amount, and it has to be emitted as\n      // the string CSS expects. It also has to return HERE: `Number('auto')`\n      // is NaN, so the step branch below would emit `undefined` and\n      // silently clear the side the author had just set.\n      if (next === AUTO) {\n        onChange?.(AUTO)\n        return\n      }\n      // The STEP, as a number — MUI multiplies it by `theme.spacing` at\n      // render, which is the entire reason this control exists. `0` is a\n      // real rung (\"None\") and must survive: `Number('0')` is 0 and\n      // `Number.isFinite(0)` is true, so it does.\n      const step = Number(next)\n      onChange?.(Number.isFinite(step) ? step : undefined)\n    },\n    [onChange],\n  )\n\n  const emitCustom = useCallback(\n    (quantity: string, unit: CssUnit | '') => {\n      if (!unit) {\n        // No unit is not a length. Clearing is the honest reading — the\n        // old control silently emitted `undefined` here too, but by\n        // accident rather than on purpose.\n        onChange?.(undefined)\n        return\n      }\n      if (isGlobalUnit(unit)) {\n        onChange?.(`${unit}`)\n        return\n      }\n      const text = `${quantity}`.trim()\n      if (text === '') {\n        onChange?.(undefined)\n        return\n      }\n      const numeric = Number(text)\n      if (!Number.isFinite(numeric)) {\n        onChange?.(undefined)\n        return\n      }\n      // `buildCssMeasurement` keeps `0` (its guard is `_isNum`, not\n      // truthiness), so `0px` is emitted rather than swallowed.\n      onChange?.(buildCssMeasurement({ value: numeric, unit }))\n    },\n    [onChange],\n  )\n\n  const currentUnit = (parsed?.unit ?? '') as CssUnit | ''\n  const currentQuantity =\n    parsed?.value === undefined || parsed?.value === null\n      ? ''\n      : `${parsed.value}`\n\n  return (\n    <Stack spacing={1} sx={{ mt: 1 }}>\n      <Select\n        size=\"small\"\n        value={selectValue}\n        onChange={(event) => handleSelect(`${event.target.value}`)}\n        inputProps={{ 'aria-label': `${label} value` }}\n        sx={{ fontSize: '0.78rem' }}\n      >\n        <MenuItem value={UNSET}>\n          <em>{'Not set'}</em>\n        </MenuItem>\n        {ladder.length ? (\n          <ListSubheader sx={{ lineHeight: 2 }}>\n            {'Theme spacing'}\n          </ListSubheader>\n        ) : null}\n        {offLadderStep ? (\n          <MenuItem value={`${offLadderStep.value}`}>\n            <Box component=\"span\" sx={{ flex: 1 }}>\n              {`${offLadderStep.value}× the spacing unit`}\n            </Box>\n            <Typography\n              component=\"span\"\n              variant=\"caption\"\n              sx={{ color: 'text.secondary', ml: 1 }}\n            >\n              {offLadderStep.hint}\n            </Typography>\n          </MenuItem>\n        ) : null}\n        {ladder.map((step) => (\n          <MenuItem key={step.value} value={`${step.value}`}>\n            <Box component=\"span\" sx={{ flex: 1 }}>\n              {step.label}\n            </Box>\n            <Typography\n              component=\"span\"\n              variant=\"caption\"\n              sx={{ color: 'text.secondary', ml: 1 }}\n            >\n              {step.hint}\n            </Typography>\n          </MenuItem>\n        ))}\n        {/* Its own group, because `auto` is not a size — listing it among\n            the rungs would put \"let the browser decide\" in a ladder of\n            amounts. `Not set` (no property at all), `None` (0px) and\n            `Auto` are three different answers and the list has to keep\n            them apart. The gloss is the shared one the unit menu shows\n            for the same keyword, so the two cannot drift. */}\n        {allowAuto ? (\n          <ListSubheader sx={{ lineHeight: 2 }}>{'Automatic'}</ListSubheader>\n        ) : null}\n        {allowAuto ? (\n          <MenuItem value={AUTO}>\n            <Box component=\"span\" sx={{ flex: 1 }}>\n              {'Auto'}\n            </Box>\n            <Typography\n              component=\"span\"\n              variant=\"caption\"\n              sx={{ color: 'text.secondary', ml: 1 }}\n            >\n              {UNIT_GLOSS[CssUnit.AUTO]}\n            </Typography>\n          </MenuItem>\n        ) : null}\n        <ListSubheader sx={{ lineHeight: 2 }}>{'Exact amount'}</ListSubheader>\n        <MenuItem value={CUSTOM}>{'Custom amount…'}</MenuItem>\n      </Select>\n\n      {isCustom ? (\n        <Stack direction=\"row\" spacing={1} sx={{ alignItems: 'center' }}>\n          <Input\n            value={currentQuantity}\n            type=\"number\"\n            placeholder=\"0\"\n            disabled={\n              Boolean(currentUnit) && isGlobalUnit(currentUnit as CssUnit)\n            }\n            inputProps={{ 'aria-label': `${label} amount` }}\n            onChange={(event) =>\n              emitCustom(event.target.value, currentUnit || CssUnit.PIXELS)\n            }\n            sx={{ width: 72, fontSize: '0.78rem' }}\n          />\n          <Select\n            size=\"small\"\n            displayEmpty\n            value={currentUnit}\n            onChange={(event) =>\n              emitCustom(currentQuantity, event.target.value as CssUnit | '')\n            }\n            inputProps={{ 'aria-label': `${label} unit` }}\n            renderValue={(unit) => (unit ? `${unit}` : 'unit')}\n            sx={{ fontSize: '0.78rem', minWidth: 88 }}\n          >\n            {UNIT_GROUPS.flatMap((group) => [\n              <ListSubheader key={group.label} sx={{ lineHeight: 2 }}>\n                {group.label}\n              </ListSubheader>,\n              ...group.units.map((unit) => (\n                <MenuItem key={unit} value={unit}>\n                  <Box component=\"span\" sx={{ flex: 1, minWidth: 0 }}>\n                    <Typography component=\"span\" variant=\"body2\">\n                      {unit}\n                    </Typography>\n                    <Typography\n                      component=\"span\"\n                      variant=\"caption\"\n                      sx={{ color: 'text.secondary', ml: 1 }}\n                    >\n                      {UNIT_GLOSS[unit]}\n                    </Typography>\n                  </Box>\n                  {/* Every unit carries its own docs section (AGL-2486):\n                      this menu is the one place an author meets the\n                      question \"what is `ch`?\", so it is where the answer\n                      has to be. `onClick` stops the tip from also\n                      selecting the row it sits in. */}\n                  <HelpTip\n                    title={`The ${unit} unit`}\n                    excerpt={UNIT_GLOSS[unit] ?? 'A CSS unit.'}\n                    href={besignerDocsUrl(\n                      'responsiveStyling',\n                      unitDocsAnchor(unit),\n                    )}\n                    ariaLabel={`What is ${unit}?`}\n                    onClick={(event) => event.stopPropagation()}\n                    sx={{ ml: 1, fontSize: '0.9em' }}\n                  />\n                </MenuItem>\n              )),\n            ])}\n          </Select>\n          <HelpTip\n            title=\"Steps or exact amounts\"\n            excerpt=\"A theme spacing step keeps following your theme; an exact amount is pinned forever. Units decide what the number is measured against.\"\n            href={besignerDocsUrl('responsiveStyling', '#spacing-units')}\n            sx={{ fontSize: '0.9em' }}\n          />\n        </Stack>\n      ) : null}\n    </Stack>\n  )\n}\n\nexport default SpacingEditor\n"],"names":["buildCssMeasurement","CssUnit","isGlobalUnit","parseCssMeasurement","HelpTip","Box","Input","ListSubheader","MenuItem","Select","Stack","Typography","useCallback","useMemo","useState","besignerDocsUrl","findSpacingStep","isSpacingSet","isThemeSpacingStep","spacingDisplayText","UNIT_GLOSS","UNIT_GROUPS","unitDocsAnchor","UNSET","CUSTOM","AUTO","isAutoValue","value","trim","toLowerCase","SpacingEditor","props","steps","label","allowAuto","onChange","ladder","isAuto","Boolean","customLatch","setCustomLatch","isCustom","parsed","undefined","offLadderStep","hint","selectValue","handleSelect","next","step","Number","isFinite","emitCustom","quantity","unit","text","numeric","currentUnit","currentQuantity","spacing","sx","mt","size","event","target","inputProps","fontSize","em","length","lineHeight","component","flex","variant","color","ml","map","direction","alignItems","type","placeholder","disabled","PIXELS","width","displayEmpty","renderValue","minWidth","flatMap","group","units","title","excerpt","href","ariaLabel","onClick","stopPropagation"],"mappings":"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"}

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

@@ -0,0 +1,17 @@
+/**
+ * @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 declare const classKeys: import("@aglyn/shared-ui-theme").ClassKeyMap<"border" | "margin" | "padding" | "label" | "row" | "contents" | "box" | "legendItem" | "legendSwatch" | "legendLabel", "BoxStyler">;

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

@@ -0,0 +1,30 @@
+/**
+ * @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 { generateComponentClassKeys } from "@aglyn/shared-ui-theme";
+export const classKeys = generateComponentClassKeys('BoxStyler', [
+    'box',
+    'row',
+    'label',
+    'margin',
+    'border',
+    'padding',
+    'contents',
+    'legendItem',
+    'legendSwatch',
+    'legendLabel'
+]);
+
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/box-styler/constants.ts"],"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 { generateComponentClassKeys } from '@aglyn/shared-ui-theme'\n\nexport const classKeys = generateComponentClassKeys('BoxStyler', [\n  'box',\n  'row',\n  'label',\n  'margin',\n  'border',\n  'padding',\n  'contents',\n  'legendItem',\n  'legendSwatch',\n  'legendLabel',\n])\n"],"names":["generateComponentClassKeys","classKeys"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED,SAASA,0BAA0B,QAAQ,yBAAwB;AAEnE,OAAO,MAAMC,YAAYD,2BAA2B,aAAa;IAC/D;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD,EAAC"}

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

@@ -0,0 +1,2 @@
+export * from './box-styler';
+export * from './spacing-value';

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

@@ -0,0 +1,4 @@
+export * from "./box-styler.js";
+export * from "./spacing-value.js";
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/box-styler/index.ts"],"sourcesContent":["export * from './box-styler'\nexport * from './spacing-value'\n"],"names":[],"mappings":"AAAA,cAAc,kBAAc;AAC5B,cAAc,qBAAiB"}

package/src/lib/box-styler/region-fills.d.ts

@@ -0,0 +1,107 @@
+/**
+ * @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`). */
+export interface RegionFillTheme {
+    palette: {
+        text: {
+            primary: string;
+            primaryChannel: string;
+        };
+        info: {
+            mainChannel: string;
+        };
+        primary: {
+            mainChannel: string;
+        };
+        secondary: {
+            mainChannel: string;
+        };
+        background: {
+            paper: string;
+            default: string;
+        };
+    };
+}
+export interface RegionFill {
+    /** `background` shorthand — a texture layer over a ground. */
+    background: string;
+    /**
+     * The ground BEHIND the wedges of this band.
+     *
+     * The band is drawn as four mitred wedges with a 2px gap between them,
+     * and that gap is what makes the diagonal seams at the corners visible —
+     * which is the whole reason the shape reads as a frame around something
+     * rather than as a plain rectangle. The wedges carry `background`; this
+     * shows through between them. The original used `common.black` here,
+     * which is what made the seams read as harsh slashes; a low-alpha ink
+     * tint gives the same geometry as fine lines instead.
+     *
+     * **Opaque, like every other value here.** A translucent seam is what
+     * put the border band's texture underneath the padding controls: the
+     * padding box's ground let the ring's material show straight through
+     * it. A region paints its own material and nothing else's, so every
+     * ground ends in a `background.*` token and each tint is layered ON it
+     * rather than left to composite against whatever happens to be behind.
+     */
+    seam: string;
+    /** The edge drawn around the region. */
+    borderColor: string;
+    borderStyle: 'dashed' | 'solid';
+}
+export interface RegionFills {
+    margin: RegionFill;
+    border: RegionFill;
+    padding: RegionFill;
+    contents: RegionFill;
+    /**
+     * The side whose editor is open.
+     *
+     * It lives here rather than in the component because "what colour is a
+     * region, in which state" should have one answer in one file — and
+     * because this is the value that was wrong: a fully saturated
+     * `primary.main` inside a figure built deliberately from low-alpha
+     * tints, so the selected wedge was the brightest thing on screen.
+     */
+    selected: RegionFill & {
+        color: string;
+    };
+}
+export declare function regionFills(tv: RegionFillTheme): RegionFills;