@aglyn/shared-ui-jsx-forms 1.0.0-beta.143

package/src/lib/mapper/css-border.d.ts

@@ -0,0 +1,113 @@
+/**
+ * @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 FormFieldGridProps } from './form-field-grid';
+import type { BaseFieldProps } from './types';
+/**
+ * CssBorder (AGL-2486): a thickness box plus a line-style picker for anything
+ * holding a CSS border shorthand.
+ *
+ * The alternative is a raw shorthand text box — `Border` and the four per-side
+ * fields each wanting `1px solid`, `Outline` wanting `2px solid`. A border is
+ * two obvious choices (how thick, what kind of line) plus a colour, and a text
+ * box turns them into a grammar exercise for an author who does not write CSS.
+ * A mom-and-pop shop owner is one of Aglyn's three stated ICPs.
+ *
+ * **The persisted value is unchanged: still one CSS shorthand string**
+ * (`"1px solid"`, `"2px dashed"`, `"none"`, `""`). This is purely an input
+ * affordance, so renderers, published documents and existing nodes stay
+ * untouched, and it composes with the responsive/scheme pipeline exactly as
+ * the free-text box did.
+ *
+ * **Colour deliberately stays its own field.** MUI declares `border` with
+ * `borderTransform`, which only turns a bare NUMBER into `${n}px solid` and
+ * otherwise passes the string through verbatim — so a palette token inside
+ * the shorthand would not resolve, and the panel's per-scheme colour scoping
+ * (`SCHEME_SCOPED_STYLE_FIELDS`) is keyed on `borderColor`. Folding the
+ * colour in here would have cost both. The group instead places Border
+ * Color immediately beside this control so the three choices read as one
+ * row.
+ *
+ * **The escape hatch is the same one `CssDimension` uses.** A value this
+ * editor cannot model — `thin solid`, `1px solid #f00`, `calc()` in a
+ * width, a `{{token}}` binding — falls back to a plain text box holding the
+ * raw string rather than being clobbered, and flips back to the structured
+ * controls the moment the text becomes a plain `<width> <style>` again. The
+ * mode is DERIVED from the value, never remembered in a flag that can go
+ * stale.
+ */
+/**
+ * The line styles offered.
+ *
+ * `none` is on the list and is a real value, not the absence of one: it
+ * removes a border a component or the theme is drawing, which is different
+ * from clearing the field (that hands the decision back to the theme). The
+ * long tail CSS also has — `groove`, `ridge`, `inset`, `outset` — is
+ * deliberately absent: they are bevel effects nobody has asked for, and an
+ * author who wants one still has the raw text box.
+ */
+export declare const CSS_BORDER_STYLES: readonly ["solid", "dashed", "dotted", "double", "none"];
+export type CssBorderStyle = (typeof CSS_BORDER_STYLES)[number];
+/** Plain-English name for each line style — no CSS vocabulary required. */
+export declare const CSS_BORDER_STYLE_LABELS: Record<CssBorderStyle, string>;
+/**
+ * What the CLOSED picker shows, which is not what the menu shows.
+ *
+ * The picker is an `endAdornment` inside a half-width field, so its width
+ * comes straight out of the box the author types the thickness into — and
+ * out of the room the field's own label needs. "Dashed line" collides with
+ * `Border Bottom`; "Dashed" does not. The menu, which has the whole popover
+ * to itself, keeps the sentence.
+ */
+export declare const CSS_BORDER_STYLE_SHORT_LABELS: Record<CssBorderStyle, string>;
+/** Draft state: what the two controls show, before serialization. */
+export interface BorderDraft {
+    /** Thickness in pixels as typed (or the whole raw string in custom mode). */
+    width: string;
+    /** Selected line style, `''` when none is chosen. */
+    style: CssBorderStyle | '';
+    /** The value is not `<width>px <style>` — the text box holds it verbatim. */
+    custom: boolean;
+}
+/**
+ * Reads a stored shorthand into the two controls.
+ *
+ * Accepts exactly the shapes this editor can put back together — a pixel
+ * width, a known style, or both in either CSS order — and marks everything
+ * else `custom` so the raw text survives untouched. `0` is a legitimate
+ * width (it is how an author removes a border while keeping its box), and
+ * `strictNullChecks` is off repo-wide, so emptiness is spelled out rather
+ * than left to a falsy test.
+ */
+export declare const seedBorderDraft: (value: unknown) => BorderDraft;
+/**
+ * Serializes the two controls back into one shorthand.
+ *
+ * `none` is the whole value — a width in front of it is meaningless CSS and
+ * would read as a thickness the author cannot see the effect of.
+ */
+export declare const serializeBorderDraft: (draft: BorderDraft) => string;
+export interface CssBorderProps extends BaseFieldProps {
+    placeholder?: string;
+    /** Offer the reset-to-unset affordance (AGL-2486). */
+    clearable?: boolean;
+    FormFieldGridProps?: FormFieldGridProps;
+}
+export declare const CssBorderField: {
+    (props: CssBorderProps): import("react").JSX.Element;
+    displayName: string;
+};
+export default CssBorderField;

package/src/lib/mapper/css-border.js

@@ -0,0 +1,410 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { Box, InputAdornment, MenuItem, Select, TextField as MuiTextField, Typography } from "@mui/material";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useFieldApi } from "../vendor/data-driven-forms.js";
+import FormFieldGrid, { buildFieldClear } from "./form-field-grid.js";
+import { validationError } from "./validation-error.js";
+/**
+ * CssBorder (AGL-2486): a thickness box plus a line-style picker for anything
+ * holding a CSS border shorthand.
+ *
+ * The alternative is a raw shorthand text box — `Border` and the four per-side
+ * fields each wanting `1px solid`, `Outline` wanting `2px solid`. A border is
+ * two obvious choices (how thick, what kind of line) plus a colour, and a text
+ * box turns them into a grammar exercise for an author who does not write CSS.
+ * A mom-and-pop shop owner is one of Aglyn's three stated ICPs.
+ *
+ * **The persisted value is unchanged: still one CSS shorthand string**
+ * (`"1px solid"`, `"2px dashed"`, `"none"`, `""`). This is purely an input
+ * affordance, so renderers, published documents and existing nodes stay
+ * untouched, and it composes with the responsive/scheme pipeline exactly as
+ * the free-text box did.
+ *
+ * **Colour deliberately stays its own field.** MUI declares `border` with
+ * `borderTransform`, which only turns a bare NUMBER into `${n}px solid` and
+ * otherwise passes the string through verbatim — so a palette token inside
+ * the shorthand would not resolve, and the panel's per-scheme colour scoping
+ * (`SCHEME_SCOPED_STYLE_FIELDS`) is keyed on `borderColor`. Folding the
+ * colour in here would have cost both. The group instead places Border
+ * Color immediately beside this control so the three choices read as one
+ * row.
+ *
+ * **The escape hatch is the same one `CssDimension` uses.** A value this
+ * editor cannot model — `thin solid`, `1px solid #f00`, `calc()` in a
+ * width, a `{{token}}` binding — falls back to a plain text box holding the
+ * raw string rather than being clobbered, and flips back to the structured
+ * controls the moment the text becomes a plain `<width> <style>` again. The
+ * mode is DERIVED from the value, never remembered in a flag that can go
+ * stale.
+ */ /**
+ * The line styles offered.
+ *
+ * `none` is on the list and is a real value, not the absence of one: it
+ * removes a border a component or the theme is drawing, which is different
+ * from clearing the field (that hands the decision back to the theme). The
+ * long tail CSS also has — `groove`, `ridge`, `inset`, `outset` — is
+ * deliberately absent: they are bevel effects nobody has asked for, and an
+ * author who wants one still has the raw text box.
+ */ export const CSS_BORDER_STYLES = [
+    'solid',
+    'dashed',
+    'dotted',
+    'double',
+    'none'
+];
+/** Plain-English name for each line style — no CSS vocabulary required. */ export const CSS_BORDER_STYLE_LABELS = {
+    solid: 'Solid line',
+    dashed: 'Dashed line',
+    dotted: 'Dotted line',
+    double: 'Double line',
+    none: 'No line'
+};
+/**
+ * What the CLOSED picker shows, which is not what the menu shows.
+ *
+ * The picker is an `endAdornment` inside a half-width field, so its width
+ * comes straight out of the box the author types the thickness into — and
+ * out of the room the field's own label needs. "Dashed line" collides with
+ * `Border Bottom`; "Dashed" does not. The menu, which has the whole popover
+ * to itself, keeps the sentence.
+ */ export const CSS_BORDER_STYLE_SHORT_LABELS = {
+    solid: 'Solid',
+    dashed: 'Dashed',
+    dotted: 'Dotted',
+    double: 'Double',
+    none: 'None'
+};
+/** A bare pixel thickness: `1`, `1px`, `0.5px`. Units other than px are raw. */ const BORDER_WIDTH_PATTERN = /^([+-]?(?:\d+(?:\.\d+)?|\.\d+))(?:px)?$/i;
+/**
+ * Reads a stored shorthand into the two controls.
+ *
+ * Accepts exactly the shapes this editor can put back together — a pixel
+ * width, a known style, or both in either CSS order — and marks everything
+ * else `custom` so the raw text survives untouched. `0` is a legitimate
+ * width (it is how an author removes a border while keeping its box), and
+ * `strictNullChecks` is off repo-wide, so emptiness is spelled out rather
+ * than left to a falsy test.
+ */ export const seedBorderDraft = (value)=>{
+    // A bare NUMBER is what MUI's own `borderTransform` reads as `${n}px
+    // solid`, so the controls must show exactly that rather than blanking.
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return {
+            width: `${value}`,
+            style: 'solid',
+            custom: false
+        };
+    }
+    const text = typeof value === 'string' ? value.trim() : '';
+    if (text === '') return {
+        width: '',
+        style: '',
+        custom: false
+    };
+    const parts = text.split(/\s+/);
+    if (parts.length > 2) return {
+        width: text,
+        style: '',
+        custom: true
+    };
+    let width = '';
+    let style = '';
+    for (const part of parts){
+        const lower = part.toLowerCase();
+        if (!style && CSS_BORDER_STYLES.includes(lower)) {
+            style = lower;
+            continue;
+        }
+        const matched = BORDER_WIDTH_PATTERN.exec(part);
+        if (width === '' && matched) {
+            width = matched[1];
+            continue;
+        }
+        // Anything the pair cannot account for (a colour, `thin`, `2rem`)
+        // makes the whole value raw — a partial parse would silently drop it.
+        return {
+            width: text,
+            style: '',
+            custom: true
+        };
+    }
+    return {
+        width,
+        style,
+        custom: false
+    };
+};
+/**
+ * Serializes the two controls back into one shorthand.
+ *
+ * `none` is the whole value — a width in front of it is meaningless CSS and
+ * would read as a thickness the author cannot see the effect of.
+ */ export const serializeBorderDraft = (draft)=>{
+    if (draft.custom) return draft.width;
+    if (draft.style === 'none') return 'none';
+    const width = draft.width.trim();
+    const parts = [];
+    if (width !== '') parts.push(`${width}px`);
+    if (draft.style) parts.push(draft.style);
+    return parts.join(' ');
+};
+export const CssBorderField = (props)=>{
+    var _input_value;
+    const _useFieldApi = useFieldApi(props), { input, isReadOnly, isDisabled, isRequired, label, placeholder, helperText, description, validateOnMount, meta, help, clearable, FormFieldGridProps = {}, // Free-text leftovers from the schema these fields were authored with
+    // as TEXT_FIELDs; they must never reach the DOM.
+    inputProps: _inputProps, InputProps: _InputProps, multiline: _multiline, type: _type, options: _options } = _useFieldApi, rest = _object_without_properties_loose(_useFieldApi, [
+        "input",
+        "isReadOnly",
+        "isDisabled",
+        "isRequired",
+        "label",
+        "placeholder",
+        "helperText",
+        "description",
+        "validateOnMount",
+        "meta",
+        "help",
+        "clearable",
+        "FormFieldGridProps",
+        "inputProps",
+        "InputProps",
+        "multiline",
+        "type",
+        "options"
+    ]);
+    const invalid = validationError(meta, validateOnMount);
+    const value = typeof input.value === 'number' ? `${input.value}` : `${(_input_value = input.value) != null ? _input_value : ''}`;
+    const [draft, setDraft] = useState(()=>seedBorderDraft(input.value));
+    // Re-seed only when the value changed OUTSIDE this field (a different
+    // node selected, an undo, a breakpoint switch). Re-seeding from our own
+    // emits would round a half-typed decimal out from under the caret — the
+    // same hazard `CssDimension` documents.
+    const emittedRef = useRef(serializeBorderDraft(seedBorderDraft(input.value)));
+    useEffect(()=>{
+        var _input_value;
+        const incoming = `${(_input_value = input.value) != null ? _input_value : ''}`;
+        if (incoming === emittedRef.current) return;
+        emittedRef.current = incoming;
+        setDraft(seedBorderDraft(input.value));
+    }, [
+        input.value
+    ]);
+    const commit = useCallback((next)=>{
+        const serialized = serializeBorderDraft(next);
+        emittedRef.current = serialized;
+        // A raw value the author edited back into a plain `<width> <style>`
+        // gets the structured controls back immediately, so the escape hatch
+        // is never a one-way door.
+        const reseeded = seedBorderDraft(serialized);
+        setDraft(next.custom && !reseeded.custom ? reseeded : next);
+        input.onChange(serialized);
+    }, [
+        input
+    ]);
+    const clear = buildFieldClear({
+        clearable,
+        label,
+        hasValue: value !== '',
+        locked: Boolean(isDisabled || isReadOnly),
+        // Clearing drops the STYLE as well as the thickness. Emptying the
+        // number alone would leave `solid` selected and the next keystroke
+        // would silently re-adopt it, which is the trap AGL-2486 fixed for
+        // lengths and units.
+        onClear: ()=>commit({
+                width: '',
+                style: '',
+                custom: false
+            })
+    });
+    const handleWidthChange = useCallback((event)=>{
+        const width = event.target.value;
+        // Typing a thickness with no line style yet means a solid line —
+        // a bare `1px` draws nothing at all, which is the silent no-op that
+        // made the free-text version feel broken.
+        const style = !draft.custom && !draft.style && width.trim() !== '' ? 'solid' : draft.style;
+        commit(_extends({}, draft, {
+            width,
+            style
+        }));
+    }, [
+        commit,
+        draft
+    ]);
+    const handleStyleChange = useCallback((event)=>{
+        const style = event.target.value || '';
+        // "No line" IS the whole value, so the thickness goes away with it
+        // and comes back when a drawn style is picked again.
+        commit(_extends({}, draft, {
+            style,
+            width: style === 'none' ? '' : draft.width
+        }));
+    }, [
+        commit,
+        draft
+    ]);
+    const noLine = !draft.custom && draft.style === 'none';
+    const styleSelect = /*#__PURE__*/ _jsx(InputAdornment, {
+        position: "end",
+        sx: {
+            ml: 0
+        },
+        children: /*#__PURE__*/ _jsxs(Select, {
+            value: draft.custom ? '' : draft.style,
+            onChange: handleStyleChange,
+            disabled: isDisabled || isReadOnly || draft.custom,
+            variant: "standard",
+            disableUnderline: true,
+            // Without displayEmpty an unset style renders nothing at all, which
+            // reads as a broken control rather than "no line chosen yet".
+            displayEmpty: true,
+            renderValue: (selected)=>draft.custom ? 'custom' : selected ? CSS_BORDER_STYLE_SHORT_LABELS[selected] : // Picker on a length field. The words "line style" here read
+                // as help but behave as layout: they push the adornment over
+                // the field's own label on every per-side border.
+                '—',
+            inputProps: {
+                'aria-label': 'Line style'
+            },
+            sx: {
+                '& .MuiSelect-select': {
+                    pr: '20px !important',
+                    py: 0,
+                    textOverflow: 'ellipsis'
+                },
+                fontSize: '0.8125rem',
+                color: 'text.secondary',
+                minWidth: 0,
+                maxWidth: 96
+            },
+            children: [
+                /*#__PURE__*/ _jsx(MenuItem, {
+                    value: "",
+                    children: /*#__PURE__*/ _jsx("em", {
+                        children: 'not set'
+                    })
+                }),
+                CSS_BORDER_STYLES.map((style)=>/*#__PURE__*/ _jsx(MenuItem, {
+                        value: style,
+                        children: /*#__PURE__*/ _jsxs(Box, {
+                            sx: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 1,
+                                width: '100%'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Box, {
+                                    "aria-hidden": true,
+                                    sx: {
+                                        width: 34,
+                                        flexShrink: 0,
+                                        borderTopWidth: style === 'double' ? 3 : 2,
+                                        borderTopStyle: style === 'none' ? 'solid' : style,
+                                        borderTopColor: style === 'none' ? 'transparent' : 'text.primary'
+                                    }
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    noWrap: true,
+                                    children: CSS_BORDER_STYLE_LABELS[style]
+                                })
+                            ]
+                        })
+                    }, style))
+            ]
+        })
+    });
+    return /*#__PURE__*/ _jsx(FormFieldGrid, _extends({
+        help: help,
+        clear: clear
+    }, FormFieldGridProps, {
+        children: /*#__PURE__*/ _jsx(MuiTextField, _extends({}, rest, {
+            name: input.name,
+            value: noLine ? '' : draft.width,
+            onChange: handleWidthChange,
+            onBlur: input.onBlur,
+            onFocus: input.onFocus,
+            fullWidth: true,
+            error: !!invalid,
+            helperText: invalid || (meta.touched || validateOnMount) && meta.warning || helperText || description,
+            disabled: isDisabled,
+            label: label,
+            placeholder: noLine ? 'no line' : placeholder,
+            required: isRequired,
+            type: draft.custom || noLine ? 'text' : 'number',
+            slotProps: {
+                /**
+           * The label is ALWAYS pinned above the box, never floating
+           * inside it (AGL-2486).
+           *
+           * Two reasons, and they point the same way. `Border Bottom` is
+           * thirteen characters and the box is a half column with a
+           * picker parked in its right-hand end, so an un-shrunk label
+           * runs straight into the adornment and the two print on top of
+           * each other. And "No line" is shown through the PLACEHOLDER,
+           * which MUI hides
+           * behind CSS while the label is un-shrunk, so the field would
+           * print its label over an empty box on a node that demonstrably
+           * has a value.
+           *
+           * It also settles the group's rhythm: Border Color, Corner
+           * Radius and Shadow all sit under a pinned label, so the six
+           * border editors match the group they are in.
+           */ inputLabel: {
+                    shrink: true
+                },
+                input: {
+                    readOnly: isReadOnly || noLine,
+                    endAdornment: /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            draft.custom || noLine || draft.width.trim() === '' ? null : /*#__PURE__*/ _jsx(InputAdornment, {
+                                position: "end",
+                                sx: {
+                                    ml: 0,
+                                    mr: 0.5,
+                                    '& .MuiTypography-root': {
+                                        fontSize: '0.8125rem',
+                                        color: 'text.secondary'
+                                    }
+                                },
+                                children: 'px'
+                            }),
+                            styleSelect
+                        ]
+                    })
+                },
+                htmlInput: {
+                    inputMode: 'decimal',
+                    min: 0,
+                    step: 1,
+                    // The VALUE is never the control that gets squeezed: the style
+                    // picker is a fixed-width adornment sibling, so without a floor
+                    // the number box is whatever is left in a narrow docked panel.
+                    style: {
+                        minWidth: '4.5ch'
+                    },
+                    'aria-label': typeof label === 'string' ? `${label} thickness` : undefined
+                }
+            }
+        }))
+    }));
+};
+CssBorderField.displayName = 'AglynCssBorderField';
+export default CssBorderField;
+
+//# sourceMappingURL=css-border.js.map

package/src/lib/mapper/css-border.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx-forms/src/lib/mapper/css-border.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  Box,\n  InputAdornment,\n  MenuItem,\n  Select,\n  TextField as MuiTextField,\n  Typography,\n} from '@mui/material'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { useFieldApi } from '../vendor/data-driven-forms'\nimport FormFieldGrid, {\n  buildFieldClear,\n  type FormFieldGridProps,\n} from './form-field-grid'\nimport type { BaseFieldProps } from './types'\nimport { type ExtendedFieldMeta, validationError } from './validation-error'\n\n/**\n * CssBorder (AGL-2486): a thickness box plus a line-style picker for anything\n * holding a CSS border shorthand.\n *\n * The alternative is a raw shorthand text box — `Border` and the four per-side\n * fields each wanting `1px solid`, `Outline` wanting `2px solid`. A border is\n * two obvious choices (how thick, what kind of line) plus a colour, and a text\n * box turns them into a grammar exercise for an author who does not write CSS.\n * A mom-and-pop shop owner is one of Aglyn's three stated ICPs.\n *\n * **The persisted value is unchanged: still one CSS shorthand string**\n * (`\"1px solid\"`, `\"2px dashed\"`, `\"none\"`, `\"\"`). This is purely an input\n * affordance, so renderers, published documents and existing nodes stay\n * untouched, and it composes with the responsive/scheme pipeline exactly as\n * the free-text box did.\n *\n * **Colour deliberately stays its own field.** MUI declares `border` with\n * `borderTransform`, which only turns a bare NUMBER into `${n}px solid` and\n * otherwise passes the string through verbatim — so a palette token inside\n * the shorthand would not resolve, and the panel's per-scheme colour scoping\n * (`SCHEME_SCOPED_STYLE_FIELDS`) is keyed on `borderColor`. Folding the\n * colour in here would have cost both. The group instead places Border\n * Color immediately beside this control so the three choices read as one\n * row.\n *\n * **The escape hatch is the same one `CssDimension` uses.** A value this\n * editor cannot model — `thin solid`, `1px solid #f00`, `calc()` in a\n * width, a `{{token}}` binding — falls back to a plain text box holding the\n * raw string rather than being clobbered, and flips back to the structured\n * controls the moment the text becomes a plain `<width> <style>` again. The\n * mode is DERIVED from the value, never remembered in a flag that can go\n * stale.\n */\n\n/**\n * The line styles offered.\n *\n * `none` is on the list and is a real value, not the absence of one: it\n * removes a border a component or the theme is drawing, which is different\n * from clearing the field (that hands the decision back to the theme). The\n * long tail CSS also has — `groove`, `ridge`, `inset`, `outset` — is\n * deliberately absent: they are bevel effects nobody has asked for, and an\n * author who wants one still has the raw text box.\n */\nexport const CSS_BORDER_STYLES = [\n  'solid',\n  'dashed',\n  'dotted',\n  'double',\n  'none',\n] as const\n\nexport type CssBorderStyle = (typeof CSS_BORDER_STYLES)[number]\n\n/** Plain-English name for each line style — no CSS vocabulary required. */\nexport const CSS_BORDER_STYLE_LABELS: Record<CssBorderStyle, string> = {\n  solid: 'Solid line',\n  dashed: 'Dashed line',\n  dotted: 'Dotted line',\n  double: 'Double line',\n  none: 'No line',\n}\n\n/**\n * What the CLOSED picker shows, which is not what the menu shows.\n *\n * The picker is an `endAdornment` inside a half-width field, so its width\n * comes straight out of the box the author types the thickness into — and\n * out of the room the field's own label needs. \"Dashed line\" collides with\n * `Border Bottom`; \"Dashed\" does not. The menu, which has the whole popover\n * to itself, keeps the sentence.\n */\nexport const CSS_BORDER_STYLE_SHORT_LABELS: Record<CssBorderStyle, string> = {\n  solid: 'Solid',\n  dashed: 'Dashed',\n  dotted: 'Dotted',\n  double: 'Double',\n  none: 'None',\n}\n\n/** Draft state: what the two controls show, before serialization. */\nexport interface BorderDraft {\n  /** Thickness in pixels as typed (or the whole raw string in custom mode). */\n  width: string\n  /** Selected line style, `''` when none is chosen. */\n  style: CssBorderStyle | ''\n  /** The value is not `<width>px <style>` — the text box holds it verbatim. */\n  custom: boolean\n}\n\n/** A bare pixel thickness: `1`, `1px`, `0.5px`. Units other than px are raw. */\nconst BORDER_WIDTH_PATTERN = /^([+-]?(?:\\d+(?:\\.\\d+)?|\\.\\d+))(?:px)?$/i\n\n/**\n * Reads a stored shorthand into the two controls.\n *\n * Accepts exactly the shapes this editor can put back together — a pixel\n * width, a known style, or both in either CSS order — and marks everything\n * else `custom` so the raw text survives untouched. `0` is a legitimate\n * width (it is how an author removes a border while keeping its box), and\n * `strictNullChecks` is off repo-wide, so emptiness is spelled out rather\n * than left to a falsy test.\n */\nexport const seedBorderDraft = (value: unknown): BorderDraft => {\n  // A bare NUMBER is what MUI's own `borderTransform` reads as `${n}px\n  // solid`, so the controls must show exactly that rather than blanking.\n  if (typeof value === 'number' && Number.isFinite(value)) {\n    return { width: `${value}`, style: 'solid', custom: false }\n  }\n  const text = typeof value === 'string' ? value.trim() : ''\n  if (text === '') return { width: '', style: '', custom: false }\n\n  const parts = text.split(/\\s+/)\n  if (parts.length > 2) return { width: text, style: '', custom: true }\n\n  let width = ''\n  let style: CssBorderStyle | '' = ''\n  for (const part of parts) {\n    const lower = part.toLowerCase()\n    if (!style && (CSS_BORDER_STYLES as readonly string[]).includes(lower)) {\n      style = lower as CssBorderStyle\n      continue\n    }\n    const matched = BORDER_WIDTH_PATTERN.exec(part)\n    if (width === '' && matched) {\n      width = matched[1]\n      continue\n    }\n    // Anything the pair cannot account for (a colour, `thin`, `2rem`)\n    // makes the whole value raw — a partial parse would silently drop it.\n    return { width: text, style: '', custom: true }\n  }\n  return { width, style, custom: false }\n}\n\n/**\n * Serializes the two controls back into one shorthand.\n *\n * `none` is the whole value — a width in front of it is meaningless CSS and\n * would read as a thickness the author cannot see the effect of.\n */\nexport const serializeBorderDraft = (draft: BorderDraft): string => {\n  if (draft.custom) return draft.width\n  if (draft.style === 'none') return 'none'\n  const width = draft.width.trim()\n  const parts: string[] = []\n  if (width !== '') parts.push(`${width}px`)\n  if (draft.style) parts.push(draft.style)\n  return parts.join(' ')\n}\n\nexport interface CssBorderProps extends BaseFieldProps {\n  placeholder?: string\n  /** Offer the reset-to-unset affordance (AGL-2486). */\n  clearable?: boolean\n  FormFieldGridProps?: FormFieldGridProps\n}\n\nexport const CssBorderField = (props: CssBorderProps) => {\n  const {\n    input,\n    isReadOnly,\n    isDisabled,\n    isRequired,\n    label,\n    placeholder,\n    helperText,\n    description,\n    validateOnMount,\n    meta,\n    help,\n    clearable,\n    FormFieldGridProps = {},\n    // Free-text leftovers from the schema these fields were authored with\n    // as TEXT_FIELDs; they must never reach the DOM.\n    inputProps: _inputProps,\n    InputProps: _InputProps,\n    multiline: _multiline,\n    type: _type,\n    options: _options,\n    ...rest\n  } = useFieldApi(props)\n\n  const invalid = validationError(meta as ExtendedFieldMeta, validateOnMount)\n  const value =\n    typeof input.value === 'number' ? `${input.value}` : `${input.value ?? ''}`\n\n  const [draft, setDraft] = useState<BorderDraft>(() =>\n    seedBorderDraft(input.value),\n  )\n  // Re-seed only when the value changed OUTSIDE this field (a different\n  // node selected, an undo, a breakpoint switch). Re-seeding from our own\n  // emits would round a half-typed decimal out from under the caret — the\n  // same hazard `CssDimension` documents.\n  const emittedRef = useRef(serializeBorderDraft(seedBorderDraft(input.value)))\n  useEffect(() => {\n    const incoming = `${input.value ?? ''}`\n    if (incoming === emittedRef.current) return\n    emittedRef.current = incoming\n    setDraft(seedBorderDraft(input.value))\n  }, [input.value])\n\n  const commit = useCallback(\n    (next: BorderDraft) => {\n      const serialized = serializeBorderDraft(next)\n      emittedRef.current = serialized\n      // A raw value the author edited back into a plain `<width> <style>`\n      // gets the structured controls back immediately, so the escape hatch\n      // is never a one-way door.\n      const reseeded = seedBorderDraft(serialized)\n      setDraft(next.custom && !reseeded.custom ? reseeded : next)\n      input.onChange(serialized)\n    },\n    [input],\n  )\n\n  const clear = buildFieldClear({\n    clearable,\n    label,\n    hasValue: value !== '',\n    locked: Boolean(isDisabled || isReadOnly),\n    // Clearing drops the STYLE as well as the thickness. Emptying the\n    // number alone would leave `solid` selected and the next keystroke\n    // would silently re-adopt it, which is the trap AGL-2486 fixed for\n    // lengths and units.\n    onClear: () => commit({ width: '', style: '', custom: false }),\n  })\n\n  const handleWidthChange = useCallback(\n    (event: { target: { value: string } }) => {\n      const width = event.target.value\n      // Typing a thickness with no line style yet means a solid line —\n      // a bare `1px` draws nothing at all, which is the silent no-op that\n      // made the free-text version feel broken.\n      const style =\n        !draft.custom && !draft.style && width.trim() !== ''\n          ? ('solid' as CssBorderStyle)\n          : draft.style\n      commit({ ...draft, width, style })\n    },\n    [commit, draft],\n  )\n\n  const handleStyleChange = useCallback(\n    (event: { target: { value: unknown } }) => {\n      const style = (event.target.value || '') as CssBorderStyle | ''\n      // \"No line\" IS the whole value, so the thickness goes away with it\n      // and comes back when a drawn style is picked again.\n      commit({\n        ...draft,\n        style,\n        width: style === 'none' ? '' : draft.width,\n      })\n    },\n    [commit, draft],\n  )\n\n  const noLine = !draft.custom && draft.style === 'none'\n\n  const styleSelect = (\n    <InputAdornment position=\"end\" sx={{ ml: 0 }}>\n      <Select\n        value={draft.custom ? '' : draft.style}\n        onChange={handleStyleChange}\n        disabled={isDisabled || isReadOnly || draft.custom}\n        variant=\"standard\"\n        disableUnderline\n        // Without displayEmpty an unset style renders nothing at all, which\n        // reads as a broken control rather than \"no line chosen yet\".\n        displayEmpty\n        renderValue={(selected) =>\n          draft.custom\n            ? 'custom'\n            : selected\n              ? CSS_BORDER_STYLE_SHORT_LABELS[selected as CssBorderStyle]\n              : // An unset picker is one em-dash wide, exactly like the unit\n                // Picker on a length field. The words \"line style\" here read\n                // as help but behave as layout: they push the adornment over\n                // the field's own label on every per-side border.\n                '—'\n        }\n        inputProps={{ 'aria-label': 'Line style' }}\n        sx={{\n          '& .MuiSelect-select': {\n            pr: '20px !important',\n            py: 0,\n            textOverflow: 'ellipsis',\n          },\n          fontSize: '0.8125rem',\n          color: 'text.secondary',\n          minWidth: 0,\n          maxWidth: 96,\n        }}\n      >\n        <MenuItem value=\"\">\n          <em>{'not set'}</em>\n        </MenuItem>\n        {CSS_BORDER_STYLES.map((style) => (\n          <MenuItem key={style} value={style}>\n            <Box\n              sx={{\n                display: 'flex',\n                alignItems: 'center',\n                gap: 1,\n                width: '100%',\n              }}\n            >\n              {/* The line itself, drawn in the style it names — the whole\n                  point of retiring the shorthand is that the choice can be\n                  made by looking. */}\n              <Box\n                aria-hidden\n                sx={{\n                  width: 34,\n                  flexShrink: 0,\n                  borderTopWidth: style === 'double' ? 3 : 2,\n                  borderTopStyle: style === 'none' ? 'solid' : style,\n                  borderTopColor:\n                    style === 'none' ? 'transparent' : 'text.primary',\n                }}\n              />\n              <Typography variant=\"body2\" noWrap>\n                {CSS_BORDER_STYLE_LABELS[style]}\n              </Typography>\n            </Box>\n          </MenuItem>\n        ))}\n      </Select>\n    </InputAdornment>\n  )\n\n  return (\n    <FormFieldGrid help={help} clear={clear} {...FormFieldGridProps}>\n      <MuiTextField\n        {...rest}\n        name={input.name}\n        value={noLine ? '' : draft.width}\n        onChange={handleWidthChange}\n        onBlur={input.onBlur}\n        onFocus={input.onFocus}\n        fullWidth\n        error={!!invalid}\n        helperText={\n          invalid ||\n          ((meta.touched || validateOnMount) && meta.warning) ||\n          helperText ||\n          description\n        }\n        disabled={isDisabled}\n        label={label}\n        placeholder={noLine ? 'no line' : placeholder}\n        required={isRequired}\n        type={draft.custom || noLine ? 'text' : 'number'}\n        slotProps={{\n          /**\n           * The label is ALWAYS pinned above the box, never floating\n           * inside it (AGL-2486).\n           *\n           * Two reasons, and they point the same way. `Border Bottom` is\n           * thirteen characters and the box is a half column with a\n           * picker parked in its right-hand end, so an un-shrunk label\n           * runs straight into the adornment and the two print on top of\n           * each other. And \"No line\" is shown through the PLACEHOLDER,\n           * which MUI hides\n           * behind CSS while the label is un-shrunk, so the field would\n           * print its label over an empty box on a node that demonstrably\n           * has a value.\n           *\n           * It also settles the group's rhythm: Border Color, Corner\n           * Radius and Shadow all sit under a pinned label, so the six\n           * border editors match the group they are in.\n           */\n          inputLabel: { shrink: true },\n          input: {\n            readOnly: isReadOnly || noLine,\n            endAdornment: (\n              <>\n                {/* The unit is STATED, not asked for — that is the whole\n                    point of retiring the shorthand. It is hidden in raw\n                    mode, where the text is not a pixel thickness, and on\n                    \"no line\", where there is no thickness at all. */}\n                {/* The unit is only stated once there is a number to put it\n                    after. On an empty field it is pure width, and width is\n                    what pushes the label into the adornments. */}\n                {draft.custom || noLine || draft.width.trim() === '' ? null : (\n                  <InputAdornment\n                    position=\"end\"\n                    sx={{\n                      ml: 0,\n                      mr: 0.5,\n                      '& .MuiTypography-root': {\n                        fontSize: '0.8125rem',\n                        color: 'text.secondary',\n                      },\n                    }}\n                  >\n                    {'px'}\n                  </InputAdornment>\n                )}\n                {styleSelect}\n              </>\n            ),\n          },\n          htmlInput: {\n            inputMode: 'decimal',\n            min: 0,\n            step: 1,\n            // The VALUE is never the control that gets squeezed: the style\n            // picker is a fixed-width adornment sibling, so without a floor\n            // the number box is whatever is left in a narrow docked panel.\n            style: { minWidth: '4.5ch' },\n            'aria-label':\n              typeof label === 'string' ? `${label} thickness` : undefined,\n          },\n        }}\n      />\n    </FormFieldGrid>\n  )\n}\nCssBorderField.displayName = 'AglynCssBorderField'\n\nexport default CssBorderField\n"],"names":["Box","InputAdornment","MenuItem","Select","TextField","MuiTextField","Typography","useCallback","useEffect","useRef","useState","useFieldApi","FormFieldGrid","buildFieldClear","validationError","CSS_BORDER_STYLES","CSS_BORDER_STYLE_LABELS","solid","dashed","dotted","double","none","CSS_BORDER_STYLE_SHORT_LABELS","BORDER_WIDTH_PATTERN","seedBorderDraft","value","Number","isFinite","width","style","custom","text","trim","parts","split","length","part","lower","toLowerCase","includes","matched","exec","serializeBorderDraft","draft","push","join","CssBorderField","props","input","isReadOnly","isDisabled","isRequired","label","placeholder","helperText","description","validateOnMount","meta","help","clearable","FormFieldGridProps","inputProps","_inputProps","InputProps","_InputProps","multiline","_multiline","type","_type","options","_options","rest","invalid","setDraft","emittedRef","incoming","current","commit","next","serialized","reseeded","onChange","clear","hasValue","locked","Boolean","onClear","handleWidthChange","event","target","handleStyleChange","noLine","styleSelect","position","sx","ml","disabled","variant","disableUnderline","displayEmpty","renderValue","selected","pr","py","textOverflow","fontSize","color","minWidth","maxWidth","em","map","display","alignItems","gap","aria-hidden","flexShrink","borderTopWidth","borderTopStyle","borderTopColor","noWrap","name","onBlur","onFocus","fullWidth","error","touched","warning","required","slotProps","inputLabel","shrink","readOnly","endAdornment","mr","htmlInput","inputMode","min","step","undefined","displayName"],"mappings":"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"}