@aglyn/besigner-ui 1.0.0-beta.143

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

@@ -0,0 +1,240 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2023 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { FIELD_MUTED_STYLES, FieldMuteButton } from "@aglyn/shared-ui-jsx-forms";
+import { Box, Collapse, Stack, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from "@mui/material";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import BoxDiagram, { SIDE_LABELS } from "./components/box-diagram.js";
+import Legend, { LegendItem } from "./components/legend.js";
+import SpacingEditor from "./components/spacing-editor.js";
+const MARGIN_KEYS = [
+    'marginTop',
+    'marginRight',
+    'marginBottom',
+    'marginLeft'
+];
+const PADDING_KEYS = [
+    'paddingTop',
+    'paddingRight',
+    'paddingBottom',
+    'paddingLeft'
+];
+/** The keys an edit to `key` writes, given the active scope. */ export function boxScopeKeys(key, scope) {
+    const group = key.startsWith('margin') ? MARGIN_KEYS : PADDING_KEYS;
+    if (scope === 'all') return [
+        ...group
+    ];
+    if (scope === 'axis') {
+        const vertical = key.endsWith('Top') || key.endsWith('Bottom');
+        return group.filter((item)=>vertical ? item.endsWith('Top') || item.endsWith('Bottom') : item.endsWith('Left') || item.endsWith('Right'));
+    }
+    return [
+        key
+    ];
+}
+export const BoxStyler = /*#__PURE__*/ forwardRef(({ measurements, spacingSteps, border, onChange, muteForSide }, ref)=>{
+    const [scope, setScope] = useState('each');
+    const [editing, setEditing] = useState(null);
+    /**
+     * The side the collapsing panel keeps showing on the way OUT (AGL-2486).
+     *
+     * `<Collapse in={...}>{editing ? <Editor/> : null}</Collapse>` opens
+     * with an animation and closes with none: the moment `editing` goes
+     * null the child is replaced by `null`, so the content is gone before
+     * `Collapse` has begun its exit and all one sees is a jump. Holding
+     * the last side lets the editor stay mounted for the length of the
+     * exit, and `unmountOnExit` on the Collapse — which runs AFTER the
+     * transition, not instead of it — does the removal. Closing is then
+     * the reverse of opening, which is the whole ask.
+     */ const lastEditing = useRef(null);
+    useEffect(()=>{
+        if (editing) lastEditing.current = editing;
+    }, [
+        editing
+    ]);
+    const shown = editing != null ? editing : lastEditing.current;
+    // Each side is its own sx declaration, so the mute is resolved for the
+    // side on screen rather than for the box as a whole.
+    const sideMute = shown ? muteForSide == null ? void 0 : muteForSide(shown, SIDE_LABELS[shown]) : undefined;
+    const handleSelect = useCallback((key)=>setEditing((prev)=>prev === key ? null : key), []);
+    const handleChange = useCallback((key)=>(value)=>{
+            const res = _extends({}, measurements);
+            for (const target of boxScopeKeys(key, scope)){
+                // The value is stored AS GIVEN: a number stays a number so MUI
+                // resolves it through `theme.spacing`, a string stays the CSS
+                // length it already is, and `undefined` clears the property.
+                // The old handler ran everything through `buildCssMeasurement`
+                // first, which is why a step could never be written from here.
+                res[target] = value;
+            }
+            onChange == null ? void 0 : onChange(res);
+        }, [
+        onChange,
+        measurements,
+        scope
+    ]);
+    return /*#__PURE__*/ _jsxs(Box, {
+        ref: ref,
+        children: [
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    mb: 1
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "caption",
+                        color: "text.secondary",
+                        children: 'Apply to'
+                    }),
+                    /*#__PURE__*/ _jsxs(ToggleButtonGroup, {
+                        size: "small",
+                        exclusive: true,
+                        value: scope,
+                        onChange: (event, value)=>value && setScope(value),
+                        children: [
+                            /*#__PURE__*/ _jsx(ToggleButton, {
+                                value: "each",
+                                sx: {
+                                    px: 1,
+                                    py: 0.25
+                                },
+                                children: /*#__PURE__*/ _jsx(Tooltip, {
+                                    title: "Each side individually",
+                                    children: /*#__PURE__*/ _jsx("span", {
+                                        children: 'Side'
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(ToggleButton, {
+                                value: "axis",
+                                sx: {
+                                    px: 1,
+                                    py: 0.25
+                                },
+                                children: /*#__PURE__*/ _jsx(Tooltip, {
+                                    title: "Vertical or horizontal pair together",
+                                    children: /*#__PURE__*/ _jsx("span", {
+                                        children: 'Axis'
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(ToggleButton, {
+                                value: "all",
+                                sx: {
+                                    px: 1,
+                                    py: 0.25
+                                },
+                                children: /*#__PURE__*/ _jsx(Tooltip, {
+                                    title: "All four sides together",
+                                    children: /*#__PURE__*/ _jsx("span", {
+                                        children: 'All'
+                                    })
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(BoxDiagram, {
+                measurements: measurements,
+                steps: spacingSteps,
+                border: border,
+                editing: editing != null ? editing : undefined,
+                onSelect: handleSelect
+            }),
+            /*#__PURE__*/ _jsx(Collapse, {
+                in: Boolean(editing),
+                unmountOnExit: true,
+                children: shown ? /*#__PURE__*/ _jsxs(Stack, {
+                    sx: [
+                        {
+                            mt: 1
+                        },
+                        (sideMute == null ? void 0 : sideMute.muted) ? FIELD_MUTED_STYLES : null
+                    ],
+                    children: [
+                        /*#__PURE__*/ _jsxs(Box, {
+                            sx: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 0.5
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsxs(Typography, {
+                                    variant: "caption",
+                                    sx: {
+                                        fontWeight: 600
+                                    },
+                                    children: [
+                                        SIDE_LABELS[shown],
+                                        scope && scope !== 'each' ? ` (${scope})` : ''
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(FieldMuteButton, {
+                                    mute: sideMute
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(SpacingEditor, {
+                            value: measurements == null ? void 0 : measurements[shown],
+                            steps: spacingSteps,
+                            label: SIDE_LABELS[shown],
+                            // `auto` is offered on the MARGIN sides only. It is the
+                            // standard way to centre an element and the diagram
+                            // already draws it there — but `padding: auto` is not
+                            // valid CSS, so on a padding side it would be a menu
+                            // entry that silently does nothing.
+                            allowAuto: shown.startsWith('margin'),
+                            onChange: handleChange(shown)
+                        }, shown)
+                    ]
+                }) : null
+            }),
+            /*#__PURE__*/ _jsxs(Legend, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    alignItems: 'center',
+                    justifyContent: 'space-around',
+                    mt: 1,
+                    mb: 2
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(LegendItem, {
+                        item: 'margin'
+                    }),
+                    /*#__PURE__*/ _jsx(LegendItem, {
+                        item: 'border'
+                    }),
+                    /*#__PURE__*/ _jsx(LegendItem, {
+                        item: 'padding'
+                    }),
+                    /*#__PURE__*/ _jsx(LegendItem, {
+                        item: 'contents'
+                    })
+                ]
+            })
+        ]
+    });
+});
+BoxStyler.displayName = 'BoxStyler';
+export default BoxStyler;
+
+//# sourceMappingURL=box-styler.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/box-styler/box-styler.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2023 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  type FieldMuteAction,\n  FIELD_MUTED_STYLES,\n  FieldMuteButton,\n} from '@aglyn/shared-ui-jsx-forms'\nimport {\n  Box,\n  Collapse,\n  Stack,\n  ToggleButton,\n  ToggleButtonGroup,\n  Tooltip,\n  Typography,\n} from '@mui/material'\nimport { forwardRef, useCallback, useEffect, useRef, useState } from 'react'\n\nimport type { SpacingScaleOption } from '../utils/theme-scale-options'\nimport BoxDiagram, { SIDE_LABELS } from './components/box-diagram'\nimport Legend, { LegendItem } from './components/legend'\nimport SpacingEditor from './components/spacing-editor'\nimport type { BoxSpacingValue } from './spacing-value'\nimport type { Measurements } from './types'\n\nexport type { Measurements }\n\n/**\n * The box/spacing styler — ONE implementation (AGL-2486, item 5).\n *\n * There were two, stacked one above the other in the same panel: this\n * trapezoid diagram, and a second nested-box diagram with eight always-on\n * number fields below it. Both edited the same eight properties and they\n * did not agree — the second was built on `parseCssMeasurement`, which\n * takes a string, so every element carrying a theme spacing step (a\n * number) showed its padding in the first diagram and \"default\" in the\n * second. Worse than confusing: touching a field in the second one\n * replaced a theme-tracking step with a flattened `Npx` string.\n *\n * What survives is the diagram that could already read what was stored,\n * now with the border band the box model actually has, one editor that\n * opens under the side you clicked, and the theme's own spacing ladder as\n * the first answer it offers.\n */\n\n/** How an edit fans out across the box sides (AGL-334). */\nexport type BoxScope = 'each' | 'axis' | 'all'\n\nconst MARGIN_KEYS = [\n  'marginTop',\n  'marginRight',\n  'marginBottom',\n  'marginLeft',\n] as const\nconst PADDING_KEYS = [\n  'paddingTop',\n  'paddingRight',\n  'paddingBottom',\n  'paddingLeft',\n] as const\n\n/** The keys an edit to `key` writes, given the active scope. */\nexport function boxScopeKeys(\n  key: keyof Measurements,\n  scope: BoxScope,\n): Array<keyof Measurements> {\n  const group = key.startsWith('margin') ? MARGIN_KEYS : PADDING_KEYS\n  if (scope === 'all') return [...group]\n  if (scope === 'axis') {\n    const vertical = key.endsWith('Top') || key.endsWith('Bottom')\n    return group.filter((item) =>\n      vertical\n        ? item.endsWith('Top') || item.endsWith('Bottom')\n        : item.endsWith('Left') || item.endsWith('Right'),\n    )\n  }\n  return [key]\n}\n\nexport interface BoxStylerProps {\n  measurements?: Measurements\n  /** The site theme's spacing ladder (AGL-2486). */\n  spacingSteps?: readonly SpacingScaleOption[]\n  /** The element's border shorthand, drawn in the diagram for context. */\n  border?: string\n  onChange?: (measurements?: Measurements) => void\n  /**\n   * The mute control for one side, resolved when that side is opened\n   * (AGL-2486). Each side is its own declaration, and the editor shows one\n   * at a time, so the eye belongs beside the side's own caption.\n   */\n  muteForSide?: (side: string, label?: unknown) => FieldMuteAction | undefined\n}\n\nexport const BoxStyler = forwardRef<any, BoxStylerProps>(\n  (\n    {\n      measurements,\n      spacingSteps,\n      border,\n      onChange,\n      muteForSide,\n    }: BoxStylerProps,\n    ref,\n  ) => {\n    const [scope, setScope] = useState<BoxScope>('each')\n    const [editing, setEditing] = useState<keyof Measurements | null>(null)\n\n    /**\n     * The side the collapsing panel keeps showing on the way OUT (AGL-2486).\n     *\n     * `<Collapse in={...}>{editing ? <Editor/> : null}</Collapse>` opens\n     * with an animation and closes with none: the moment `editing` goes\n     * null the child is replaced by `null`, so the content is gone before\n     * `Collapse` has begun its exit and all one sees is a jump. Holding\n     * the last side lets the editor stay mounted for the length of the\n     * exit, and `unmountOnExit` on the Collapse — which runs AFTER the\n     * transition, not instead of it — does the removal. Closing is then\n     * the reverse of opening, which is the whole ask.\n     */\n    const lastEditing = useRef<keyof Measurements | null>(null)\n    useEffect(() => {\n      if (editing) lastEditing.current = editing\n    }, [editing])\n    const shown = editing ?? lastEditing.current\n    // Each side is its own sx declaration, so the mute is resolved for the\n    // side on screen rather than for the box as a whole.\n    const sideMute = shown\n      ? muteForSide?.(shown as string, SIDE_LABELS[shown])\n      : undefined\n\n    const handleSelect = useCallback(\n      (key: keyof Measurements) =>\n        setEditing((prev) => (prev === key ? null : key)),\n      [],\n    )\n\n    const handleChange = useCallback(\n      (key: keyof Measurements) => (value: BoxSpacingValue) => {\n        const res: Measurements = { ...measurements }\n        for (const target of boxScopeKeys(key, scope)) {\n          // The value is stored AS GIVEN: a number stays a number so MUI\n          // resolves it through `theme.spacing`, a string stays the CSS\n          // length it already is, and `undefined` clears the property.\n          // The old handler ran everything through `buildCssMeasurement`\n          // first, which is why a step could never be written from here.\n          res[target] = value\n        }\n        onChange?.(res)\n      },\n      [onChange, measurements, scope],\n    )\n\n    return (\n      <Box ref={ref}>\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'space-between',\n            mb: 1,\n          }}\n        >\n          <Typography variant=\"caption\" color=\"text.secondary\">\n            {'Apply to'}\n          </Typography>\n          <ToggleButtonGroup\n            size=\"small\"\n            exclusive\n            value={scope}\n            onChange={(event, value) => value && setScope(value)}\n          >\n            <ToggleButton value=\"each\" sx={{ px: 1, py: 0.25 }}>\n              <Tooltip title=\"Each side individually\">\n                <span>{'Side'}</span>\n              </Tooltip>\n            </ToggleButton>\n            <ToggleButton value=\"axis\" sx={{ px: 1, py: 0.25 }}>\n              <Tooltip title=\"Vertical or horizontal pair together\">\n                <span>{'Axis'}</span>\n              </Tooltip>\n            </ToggleButton>\n            <ToggleButton value=\"all\" sx={{ px: 1, py: 0.25 }}>\n              <Tooltip title=\"All four sides together\">\n                <span>{'All'}</span>\n              </Tooltip>\n            </ToggleButton>\n          </ToggleButtonGroup>\n        </Box>\n\n        <BoxDiagram\n          measurements={measurements}\n          steps={spacingSteps}\n          border={border}\n          editing={editing ?? undefined}\n          onSelect={handleSelect}\n        />\n\n        <Collapse in={Boolean(editing)} unmountOnExit>\n          {shown ? (\n            <Stack\n              sx={[{ mt: 1 }, sideMute?.muted ? FIELD_MUTED_STYLES : null]}\n            >\n              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n                <Typography variant=\"caption\" sx={{ fontWeight: 600 }}>\n                  {SIDE_LABELS[shown]}\n                  {scope && scope !== 'each' ? ` (${scope})` : ''}\n                </Typography>\n                <FieldMuteButton mute={sideMute} />\n              </Box>\n              <SpacingEditor\n                // Keyed by side so moving between sides remounts the\n                // editor rather than carrying the previous one's custom\n                // latch across.\n                key={shown}\n                value={measurements?.[shown]}\n                steps={spacingSteps}\n                label={SIDE_LABELS[shown]}\n                // `auto` is offered on the MARGIN sides only. It is the\n                // standard way to centre an element and the diagram\n                // already draws it there — but `padding: auto` is not\n                // valid CSS, so on a padding side it would be a menu\n                // entry that silently does nothing.\n                allowAuto={shown.startsWith('margin')}\n                onChange={handleChange(shown)}\n              />\n            </Stack>\n          ) : null}\n        </Collapse>\n\n        {/* The legend is the key to the diagram's textures, and it carries a\n            swatch for every region the diagram paints — the border ring\n            included, since that is where the BORDER label sits. Drop a row\n            and the matching texture becomes unexplained. */}\n        <Legend\n          direction=\"row\"\n          spacing={1}\n          sx={{\n            alignItems: 'center',\n            justifyContent: 'space-around',\n            mt: 1,\n            mb: 2,\n          }}\n        >\n          <LegendItem item={'margin'} />\n          <LegendItem item={'border'} />\n          <LegendItem item={'padding'} />\n          <LegendItem item={'contents'} />\n        </Legend>\n      </Box>\n    )\n  },\n)\nBoxStyler.displayName = 'BoxStyler'\n\nexport default BoxStyler\n"],"names":["FIELD_MUTED_STYLES","FieldMuteButton","Box","Collapse","Stack","ToggleButton","ToggleButtonGroup","Tooltip","Typography","forwardRef","useCallback","useEffect","useRef","useState","BoxDiagram","SIDE_LABELS","Legend","LegendItem","SpacingEditor","MARGIN_KEYS","PADDING_KEYS","boxScopeKeys","key","scope","group","startsWith","vertical","endsWith","filter","item","BoxStyler","measurements","spacingSteps","border","onChange","muteForSide","ref","setScope","editing","setEditing","lastEditing","current","shown","sideMute","undefined","handleSelect","prev","handleChange","value","res","target","sx","display","alignItems","justifyContent","mb","variant","color","size","exclusive","event","px","py","title","span","steps","onSelect","in","Boolean","unmountOnExit","mt","muted","gap","fontWeight","mute","label","allowAuto","direction","spacing","displayName"],"mappings":"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"}

package/src/lib/box-styler/components/box-diagram.d.ts

@@ -0,0 +1,89 @@
+/**
+ * @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 ComponentProps } from 'react';
+import type { SpacingScaleOption } from '../../utils/theme-scale-options';
+import type { Measurements } from '../types';
+export type { Measurements };
+/**
+ * The narrowest diagram that can carry the PADDING chip (AGL-2486).
+ *
+ * A chip sits at the top-left of its region and a side's value is centred
+ * in its wedge. Measured across panel widths, exactly ONE pair ever meets:
+ * the PADDING chip and the `paddingTop` value. The cause is arithmetic
+ * rather than styling — the padding band is about 40% of the diagram,
+ * because the margin bands take 17% a side and the border ring a further
+ * FIXED `RING` px a side, and it is the fixed part that eats a growing
+ * share as the panel narrows. At a 260px panel the band is 83px and the
+ * chip alone is 54px of it.
+ *
+ * **There is no placement that fixes this, and the first attempt proved
+ * it.** Reserving a column so the value slid right did clear the chip by
+ * the numbers `getBoundingClientRect` reports — and the value came out
+ * CLIPPED, because the wedge is a trapezoid: `clipPath` narrows the band
+ * from 100% at its top edge to 74% at its bottom, and a rect-based check
+ * cannot see a clip path any more than it can see an outline. At the
+ * value's own row the usable window at 260px is ~54px wide in total. A
+ * 54px chip and a 25px value do not both go in it, at any offset.
+ *
+ * So the chip yields, below the width at which its band can hold both.
+ * Nothing is lost by it: the legend directly under the diagram names all
+ * four regions and paints each swatch with that region's own material, so
+ * the padding region is still named and still identified by its wash —
+ * whereas a covered value is data the author simply cannot read.
+ *
+ * The threshold is measured, with headroom rather than to the millimetre:
+ * the value clears naturally at a 307px diagram, by 1.3px, which is a
+ * coincidence and not a clearance. At 320px it clears by ~5.5px, and by
+ * ~1.5px even for a value half again as wide as the ladder's own. The
+ * stock 375px panel gives a 342px diagram, so the chip is well clear of
+ * the boundary at every ordinary width.
+ */
+export declare const PADDING_CHIP_MIN_WIDTH = 320;
+export type PolyType = {
+    topLX: string;
+    topLY: string;
+    topRX: string;
+    topRY: string;
+    btmRX: string;
+    btmRY: string;
+    btmLX: string;
+    btmLY: string;
+};
+declare const StyledWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * What each side is called, in the words an author would use.
+ *
+ * The abbreviations these replace (`mt`, `ml`, `mr`, `mb`) were the panel's
+ * plainest example of developer shorthand leaking into a customer-facing
+ * control: they are the MUI prop names, and they mean nothing at all to
+ * someone who has never written `sx`.
+ */
+export declare const SIDE_LABELS: Record<keyof Measurements, string>;
+/** The one-word name a side shows while it has no value of its own. */
+export declare const SIDE_SHORT: Record<keyof Measurements, string>;
+export interface BoxDiagramProps extends Omit<ComponentProps<typeof StyledWrapper>, 'onChange' | 'onSelect'> {
+    measurements?: Measurements;
+    /** The theme's spacing ladder, so a step can be shown resolved. */
+    steps?: readonly SpacingScaleOption[];
+    /** The element's border shorthand, drawn for context only. */
+    border?: string;
+    /** Which side's editor is open, so the diagram can mark it. */
+    editing?: keyof Measurements;
+    onSelect?: (key: keyof Measurements) => void;
+}
+export declare const BoxDiagram: import("react").ForwardRefExoticComponent<Omit<BoxDiagramProps, "ref"> & import("react").RefAttributes<any>>;
+export default BoxDiagram;