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

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

@@ -0,0 +1,720 @@
+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 { ColorPicker as AglynColorPicker } from "@aglyn/shared-ui-color-picker";
+import { buildCssGradient, parseCssGradient, parsePaletteTokenCssVar, paletteTokenToCssVar } from "@aglyn/shared-data-enums";
+import { Box, Button, ButtonBase, ClickAwayListener, FormHelperText, IconButton, MenuItem, Paper, Popper, Stack, TextField as MuiTextField, Typography } from "@mui/material";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ColorTokenGrid, rgbColorToCss, TokenSwatch, useColorPickerTokenOptions } from "../components/color-picker-tokens.js";
+import { useFieldApi } from "../vendor/data-driven-forms.js";
+import FormFieldGrid, { buildFieldClear } from "./form-field-grid.js";
+import { validationError } from "./validation-error.js";
+/**
+ * CssGradient (AGL-1331): the Background Fill editor.
+ *
+ * The Styles panel's Colors group offered *Text Color* and *Background
+ * Color* and nothing else, so a gradient could not be authored at all —
+ * and typing one into Background Color was accepted, stored as
+ * `background-color: linear-gradient(…)`, and dropped by the CSS parser
+ * with no error anywhere. This is the control that expresses the value,
+ * and `describeCssColorProblem` is the guard that stops the silent store;
+ * the two ship together on purpose.
+ *
+ * The PERSISTED value is ONE CSS string under `backgroundImage` — the same
+ * contract as `CssDimensionField`, so nothing downstream has to know
+ * this editor exists. A **Solid** fill writes the explicit keyword
+ * `none`, which paints no image and leaves the neighbouring Background
+ * Color field to do the job; the two never fight over one property.
+ * **Default** writes `''`, which clears the property entirely.
+ *
+ * Solid and Default are two states, not one (AGL-1338). Solid shipped as
+ * "write nothing" — and on a reusable-component INSTANCE, where the panel
+ * edits an override slice, writing nothing IS "no override": the field
+ * could not be used to take a gradient off one placement, because the
+ * absence it produced was indistinguishable from never having touched it.
+ * `none` is a value, so it merges over the component's gradient and wins.
+ *
+ * Stops bind to palette TOKENS or to literals, and a single gradient can
+ * mix them: the marketing CTA's endpoints are `primary.main` /
+ * `secondary.main` while its mid stop `#7A5CF0` has no token at all. A
+ * token stop persists as `var(--mui-palette-primary-main, #00B0FF)` and is
+ * substituted against the site theme by the node renderer
+ * (`resolvePaletteVarsSx`) — see that module for why the reference is not
+ * left to the browser.
+ *
+ * Anything the editor cannot model — `conic-gradient`, `to bottom right`,
+ * a comma-stacked image list — falls back to a free-text box holding the
+ * raw string, so no existing value is destroyed by an editor that cannot
+ * show it. The stacked case reaches that box only because `parseCssGradient`
+ * splits top-level layers first (AGL-1336); until it did, a tint over a
+ * photo opened in the STOP editor and the author's first edit deleted the
+ * photo.
+ */ /**
+ * The CSS an explicit **Solid** fill persists — `background-image`'s own
+ * initial value, so it renders identically to no declaration at all while
+ * remaining a VALUE that can override an inherited one (AGL-1338).
+ */ export const SOLID_FILL_VALUE = 'none';
+const DEFAULT_ANGLE = 180;
+/** No value at all — the property stays off the node. */ const emptyDraft = {
+    fill: '',
+    angle: '',
+    positionX: '',
+    positionY: '',
+    stops: []
+};
+/** An explicit `background-image: none`. */ const solidDraft = {
+    fill: 'solid',
+    angle: '',
+    positionX: '',
+    positionY: '',
+    stops: []
+};
+export const seedGradientDraft = (value)=>{
+    const text = typeof value === 'string' ? value.trim() : '';
+    if (!text) return emptyDraft;
+    // `none` is this control's own Solid value, not a background it cannot
+    // model: reading it as raw CSS would strand the author in the text box
+    // on a value the control itself wrote.
+    if (text.toLowerCase() === SOLID_FILL_VALUE) return solidDraft;
+    const parsed = parseCssGradient(text);
+    // A non-gradient background image (`url(…)`) is still someone's value.
+    if (!parsed) return _extends({}, emptyDraft, {
+        fill: 'linear',
+        raw: text
+    });
+    if (parsed.raw !== undefined) {
+        return {
+            fill: parsed.type,
+            angle: '',
+            positionX: '',
+            positionY: '',
+            stops: [],
+            raw: parsed.raw
+        };
+    }
+    return {
+        fill: parsed.type,
+        angle: parsed.angle === undefined ? '' : `${parsed.angle}`,
+        positionX: parsed.position ? `${parsed.position.x}` : '',
+        positionY: parsed.position ? `${parsed.position.y}` : '',
+        stops: parsed.stops
+    };
+};
+export const serializeGradientDraft = (draft)=>{
+    if (draft.raw !== undefined) return draft.raw;
+    if (draft.fill === '') return '';
+    if (draft.fill === 'solid') return SOLID_FILL_VALUE;
+    const angle = draft.angle.trim();
+    // Both boxes or neither: `at 50%` alone is a different CSS value (it
+    // defaults Y to centre), and writing one while the author has only filled
+    // the other would move the glow the moment they tabbed out of the first.
+    const x = draft.positionX.trim();
+    const y = draft.positionY.trim();
+    const hasPosition = draft.fill === 'radial' && x !== '' && y !== '';
+    const gradient = {
+        type: draft.fill,
+        angle: angle === '' ? undefined : Number(angle),
+        position: hasPosition ? {
+            x: Number(x),
+            y: Number(y)
+        } : undefined,
+        stops: draft.stops
+    };
+    return buildCssGradient(gradient);
+};
+/** The two stops a fresh gradient starts from — brand ends when available. */ function defaultStops(options) {
+    var _start_light, _end_light;
+    const pick = (path)=>options.find((option)=>option.value === path);
+    const start = pick('primary.main');
+    const end = pick('secondary.main');
+    return [
+        {
+            color: start ? paletteTokenToCssVar(start.value, (_start_light = start.light) != null ? _start_light : start.dark) : '#ffffff',
+            position: 0
+        },
+        {
+            color: end ? paletteTokenToCssVar(end.value, (_end_light = end.light) != null ? _end_light : end.dark) : '#000000',
+            position: 100
+        }
+    ];
+}
+/** The token a stop is bound to, or undefined when it is a literal. */ function stopToken(color, options) {
+    const ref = parsePaletteTokenCssVar(color);
+    if (!ref) return undefined;
+    return options.find((option)=>option.value === ref.path);
+}
+/**
+ * A preview-safe copy of the value: token references resolve to the SITE
+ * theme's colour rather than to whatever `--mui-palette-*` the surrounding
+ * app happens to define (the console defines its own).
+ */ function previewGradient(draft, options) {
+    const resolved = _extends({}, draft, {
+        stops: draft.stops.map((stop)=>{
+            var _ref, _ref1, _ref2;
+            const ref = parsePaletteTokenCssVar(stop.color);
+            if (!ref) return stop;
+            const token = options.find((option)=>option.value === ref.path);
+            const color = (_ref = (_ref1 = (_ref2 = token == null ? void 0 : token.light) != null ? _ref2 : token == null ? void 0 : token.dark) != null ? _ref1 : ref.fallback) != null ? _ref : stop.color;
+            return _extends({}, stop, {
+                color
+            });
+        })
+    });
+    return serializeGradientDraft(resolved);
+}
+/** Swatch + label button that opens one stop's two-stage colour picker. */ const GradientStopColor = (props)=>{
+    var _ref, _ref1, _ref2, _ref3;
+    var _parsePaletteTokenCssVar;
+    const { color, label, disabled, presetColors, ColorPickerProps, onChange } = props;
+    const options = useColorPickerTokenOptions();
+    const token = stopToken(color, options);
+    const literal = (_ref = (_parsePaletteTokenCssVar = parsePaletteTokenCssVar(color)) == null ? void 0 : _parsePaletteTokenCssVar.fallback) != null ? _ref : color;
+    const [anchor, setAnchor] = useState(null);
+    const [stage, setStage] = useState('tokens');
+    const handleOpen = useCallback((event)=>{
+        // Tokens first, exactly like the colour field's two-stage picker —
+        // unless the theme offers none, in which case the token stage would
+        // be an empty grid.
+        setStage(options.length ? 'tokens' : 'custom');
+        setAnchor((previous)=>previous ? null : event.currentTarget);
+    }, [
+        options.length
+    ]);
+    return /*#__PURE__*/ _jsx(ClickAwayListener, {
+        onClickAway: ()=>setAnchor(null),
+        children: /*#__PURE__*/ _jsxs(Box, {
+            sx: {
+                flexGrow: 1,
+                minWidth: 0
+            },
+            children: [
+                /*#__PURE__*/ _jsxs(ButtonBase, {
+                    "aria-label": label,
+                    disabled: disabled,
+                    onClick: handleOpen,
+                    sx: {
+                        width: '100%',
+                        justifyContent: 'flex-start',
+                        gap: 0.75,
+                        px: 1,
+                        py: 0.75,
+                        border: 1,
+                        borderColor: 'divider',
+                        borderRadius: 1
+                    },
+                    children: [
+                        token ? /*#__PURE__*/ _jsx(TokenSwatch, {
+                            light: token.light,
+                            dark: token.dark,
+                            size: 18
+                        }) : /*#__PURE__*/ _jsx(Box, {
+                            sx: {
+                                width: 18,
+                                height: 18,
+                                flexShrink: 0,
+                                borderRadius: '50%',
+                                border: 1,
+                                borderColor: 'divider',
+                                backgroundColor: literal
+                            }
+                        }),
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "caption",
+                            noWrap: true,
+                            children: token ? token.label : literal
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Popper, {
+                    open: Boolean(anchor),
+                    anchorEl: anchor,
+                    sx: {
+                        zIndex: 'tooltip',
+                        maxWidth: 280
+                    },
+                    disablePortal: true,
+                    children: stage === 'tokens' && options.length ? /*#__PURE__*/ _jsx(ColorTokenGrid, {
+                        options: options,
+                        value: (_ref1 = token == null ? void 0 : token.value) != null ? _ref1 : '',
+                        onSelect: (path)=>{
+                            var _ref;
+                            const picked = options.find((option)=>option.value === path);
+                            onChange(paletteTokenToCssVar(path, (_ref = picked == null ? void 0 : picked.light) != null ? _ref : picked == null ? void 0 : picked.dark));
+                            setAnchor(null);
+                        },
+                        onCustom: ()=>setStage('custom')
+                    }) : /*#__PURE__*/ _jsxs(Paper, {
+                        sx: {
+                            p: 0.5
+                        },
+                        children: [
+                            options.length ? /*#__PURE__*/ _jsx(Button, {
+                                size: "small",
+                                fullWidth: true,
+                                sx: {
+                                    mb: 0.5
+                                },
+                                onClick: ()=>setStage('tokens'),
+                                children: '‹ Theme colors'
+                            }) : null,
+                            /*#__PURE__*/ _jsx(AglynColorPicker, _extends({}, ColorPickerProps, {
+                                // A `var()` reference is not parseable by the picker; seed
+                                // it with the colour that reference resolves to.
+                                color: (_ref2 = (_ref3 = token == null ? void 0 : token.light) != null ? _ref3 : token == null ? void 0 : token.dark) != null ? _ref2 : literal,
+                                onChange: (picked)=>onChange(rgbColorToCss(picked.rgb)),
+                                presetColors: presetColors
+                            }))
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+};
+GradientStopColor.displayName = 'AglynGradientStopColor';
+export const CssGradientField = (props)=>{
+    const _useFieldApi = useFieldApi(props), { input, isReadOnly, isDisabled, label, helperText, description, validateOnMount, meta, help, presetColors, unsetLabel = 'Default', clearable, ColorPickerProps, FormFieldGridProps = {}, // Free-text leftovers from an attribute schema that must never reach
+    // the DOM.
+    inputProps: _inputProps, InputProps: _InputProps, multiline: _multiline, placeholder: _placeholder } = _useFieldApi, rest = _object_without_properties_loose(_useFieldApi, [
+        "input",
+        "isReadOnly",
+        "isDisabled",
+        "label",
+        "helperText",
+        "description",
+        "validateOnMount",
+        "meta",
+        "help",
+        "presetColors",
+        "unsetLabel",
+        "clearable",
+        "ColorPickerProps",
+        "FormFieldGridProps",
+        "inputProps",
+        "InputProps",
+        "multiline",
+        "placeholder"
+    ]);
+    const invalid = validationError(meta, validateOnMount);
+    const options = useColorPickerTokenOptions();
+    const value = typeof input.value === 'string' ? input.value : '';
+    const locked = Boolean(isDisabled || isReadOnly);
+    const [draft, setDraft] = useState(()=>seedGradientDraft(value));
+    // Re-seed only when the value changed OUTSIDE this field (a different
+    // node selected, an undo) — re-seeding from our own emits would fight
+    // the caret in the angle and position boxes.
+    const emittedRef = useRef(value);
+    useEffect(()=>{
+        if (value === emittedRef.current) return;
+        emittedRef.current = value;
+        setDraft(seedGradientDraft(value));
+    }, [
+        value
+    ]);
+    const commit = useCallback((next)=>{
+        const serialized = serializeGradientDraft(next);
+        emittedRef.current = serialized;
+        setDraft(next);
+        input.onChange(serialized);
+    }, [
+        input
+    ]);
+    const handleFillChange = useCallback((event)=>{
+        var _event_target_value;
+        const fill = (_event_target_value = event.target.value) != null ? _event_target_value : '';
+        // Neither non-gradient choice keeps stops, but they persist
+        // differently: Solid writes `none`, Default writes nothing.
+        if (fill === '' || fill === 'solid') {
+            commit(_extends({}, emptyDraft, {
+                fill
+            }));
+            return;
+        }
+        // Switching INTO a gradient with nothing to show yet starts from the
+        // brand ends, so the author sees a gradient immediately instead of an
+        // empty stop list that serializes to nothing.
+        const stops = draft.stops.length >= 2 ? draft.stops : defaultStops(options);
+        const angle = fill === 'linear' ? draft.angle || `${DEFAULT_ANGLE}` : '';
+        // Position belongs to radial; carried across a radial→radial change
+        // (Solid and back) and dropped when the fill is no longer radial, so a
+        // linear gradient cannot persist a centre no CSS would use.
+        const positionX = fill === 'radial' ? draft.positionX : '';
+        const positionY = fill === 'radial' ? draft.positionY : '';
+        commit({
+            fill,
+            angle,
+            positionX,
+            positionY,
+            stops,
+            raw: undefined
+        });
+    }, [
+        commit,
+        draft.angle,
+        draft.positionX,
+        draft.positionY,
+        draft.stops,
+        options
+    ]);
+    const handlePositionChange = useCallback((axis)=>(event)=>{
+            commit(_extends({}, draft, {
+                [axis]: event.target.value
+            }));
+        }, [
+        commit,
+        draft
+    ]);
+    const handleAngleChange = useCallback((event)=>{
+        commit(_extends({}, draft, {
+            angle: event.target.value
+        }));
+    }, [
+        commit,
+        draft
+    ]);
+    const handleStopColor = useCallback((index)=>(color)=>{
+            const stops = draft.stops.map((stop, i)=>i === index ? _extends({}, stop, {
+                    color
+                }) : stop);
+            commit(_extends({}, draft, {
+                stops
+            }));
+        }, [
+        commit,
+        draft
+    ]);
+    const handleStopPosition = useCallback((index)=>(event)=>{
+            const text = event.target.value.trim();
+            const position = text === '' ? undefined : Number(text);
+            const stops = draft.stops.map((stop, i)=>i === index ? _extends({}, stop, {
+                    position
+                }) : stop);
+            commit(_extends({}, draft, {
+                stops
+            }));
+        }, [
+        commit,
+        draft
+    ]);
+    const handleAddStop = useCallback(()=>{
+        var _ref;
+        const last = draft.stops[draft.stops.length - 1];
+        const previous = draft.stops[draft.stops.length - 2];
+        const between = typeof (last == null ? void 0 : last.position) === 'number' && typeof (previous == null ? void 0 : previous.position) === 'number' ? Math.round((last.position + previous.position) / 2) : undefined;
+        const stop = {
+            color: (_ref = last == null ? void 0 : last.color) != null ? _ref : '#ffffff',
+            position: between
+        };
+        // The new stop lands BEFORE the last one when it can be positioned
+        // between the two — the CTA's mid stop is that shape.
+        const stops = between === undefined ? [
+            ...draft.stops,
+            stop
+        ] : [
+            ...draft.stops.slice(0, -1),
+            stop,
+            last
+        ];
+        commit(_extends({}, draft, {
+            stops
+        }));
+    }, [
+        commit,
+        draft
+    ]);
+    const handleRemoveStop = useCallback((index)=>()=>{
+            commit(_extends({}, draft, {
+                stops: draft.stops.filter((_, i)=>i !== index)
+            }));
+        }, [
+        commit,
+        draft
+    ]);
+    const handleRawChange = useCallback((event)=>{
+        const text = event.target.value;
+        // Edited back into a gradient this editor CAN model? Take the
+        // structured controls back rather than stranding the author in the
+        // text box (the css-dimension rule).
+        const reseeded = seedGradientDraft(text);
+        commit(reseeded.raw === undefined && text.trim() !== '' ? reseeded : _extends({}, draft, {
+            raw: text
+        }));
+    }, [
+        commit,
+        draft
+    ]);
+    const preview = useMemo(()=>previewGradient(draft, options), [
+        draft,
+        options
+    ]);
+    // Back to unset in one click (AGL-2486) — including out of the raw-CSS
+    // fallback, which the fill-type select cannot leave on its own because it
+    // is disabled while a raw value is held.
+    const clear = buildFieldClear({
+        clearable,
+        label,
+        hasValue: value !== '',
+        locked,
+        onClear: ()=>commit(_extends({}, emptyDraft, {
+                raw: undefined
+            }))
+    });
+    return /*#__PURE__*/ _jsxs(FormFieldGrid, _extends({
+        help: help,
+        clear: clear
+    }, FormFieldGridProps, {
+        children: [
+            /*#__PURE__*/ _jsxs(MuiTextField, _extends({}, rest, {
+                select: true,
+                fullWidth: true,
+                size: "small",
+                name: input.name,
+                label: label,
+                value: draft.raw !== undefined ? 'custom' : draft.fill,
+                onChange: handleFillChange,
+                disabled: locked || draft.raw !== undefined,
+                error: !!invalid,
+                helperText: invalid || (meta.touched || validateOnMount) && meta.warning || helperText || description,
+                slotProps: {
+                    htmlInput: {
+                        'aria-label': 'Fill type'
+                    },
+                    // Without displayEmpty a MUI Select renders NOTHING for `''`,
+                    // which would show the unset state as a broken control.
+                    select: {
+                        displayEmpty: true
+                    },
+                    // …and `displayEmpty` alone prints the label ON TOP of the option
+                    // it just drew (AGL-2486). MUI shrinks a label when the input
+                    // reports itself FILLED, and an empty Select reports the
+                    // opposite no matter what it is rendering — so the unset choice
+                    // and the field name landed in the same few pixels and neither
+                    // could be read. A rendered option is content; say so.
+                    inputLabel: {
+                        shrink: true
+                    }
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        value: "",
+                        children: unsetLabel
+                    }),
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        value: "solid",
+                        children: "Solid color"
+                    }),
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        value: "linear",
+                        children: "Linear gradient"
+                    }),
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        value: "radial",
+                        children: "Radial gradient"
+                    }),
+                    draft.raw !== undefined ? /*#__PURE__*/ _jsx(MenuItem, {
+                        value: "custom",
+                        children: "Custom CSS"
+                    }) : null
+                ]
+            })),
+            draft.raw !== undefined ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(MuiTextField, {
+                        fullWidth: true,
+                        size: "small",
+                        multiline: true,
+                        label: "Background image",
+                        value: draft.raw,
+                        onChange: handleRawChange,
+                        disabled: locked,
+                        sx: {
+                            mt: 1
+                        },
+                        slotProps: {
+                            htmlInput: {
+                                'aria-label': 'Background image CSS'
+                            }
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(FormHelperText, {
+                        children: 'This background is richer than the stop editor can show — ' + 'stacked layers, a conic gradient, a direction keyword. It is ' + 'kept exactly as written; editing it back to a plain linear ' + 'or radial gradient brings the controls back.'
+                    })
+                ]
+            }) : draft.fill !== 'linear' && draft.fill !== 'radial' ? null : /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(Box, {
+                        "aria-label": "Gradient preview",
+                        sx: {
+                            mt: 1,
+                            height: 28,
+                            borderRadius: 1,
+                            border: 1,
+                            borderColor: 'divider',
+                            backgroundImage: preview || 'none'
+                        }
+                    }),
+                    draft.fill === 'linear' ? /*#__PURE__*/ _jsx(MuiTextField, {
+                        fullWidth: true,
+                        size: "small",
+                        type: "number",
+                        label: "Angle",
+                        value: draft.angle,
+                        onChange: handleAngleChange,
+                        disabled: locked,
+                        sx: {
+                            mt: 1
+                        },
+                        slotProps: {
+                            htmlInput: {
+                                'aria-label': 'Angle',
+                                inputMode: 'numeric'
+                            },
+                            input: {
+                                endAdornment: /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    children: "deg"
+                                })
+                            }
+                        }
+                    }) : null,
+                    draft.fill === 'radial' ? /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 0.5,
+                        sx: {
+                            mt: 1
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(MuiTextField, {
+                                fullWidth: true,
+                                size: "small",
+                                type: "number",
+                                label: "Center X",
+                                value: draft.positionX,
+                                onChange: handlePositionChange('positionX'),
+                                disabled: locked,
+                                slotProps: {
+                                    htmlInput: {
+                                        'aria-label': 'Center X',
+                                        inputMode: 'numeric'
+                                    },
+                                    input: {
+                                        endAdornment: /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "caption",
+                                            children: '%'
+                                        })
+                                    }
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx(MuiTextField, {
+                                fullWidth: true,
+                                size: "small",
+                                type: "number",
+                                label: "Center Y",
+                                value: draft.positionY,
+                                onChange: handlePositionChange('positionY'),
+                                disabled: locked,
+                                slotProps: {
+                                    htmlInput: {
+                                        'aria-label': 'Center Y',
+                                        inputMode: 'numeric'
+                                    },
+                                    input: {
+                                        endAdornment: /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "caption",
+                                            children: '%'
+                                        })
+                                    }
+                                }
+                            })
+                        ]
+                    }) : null,
+                    /*#__PURE__*/ _jsx(Stack, {
+                        spacing: 0.5,
+                        sx: {
+                            mt: 1
+                        },
+                        children: draft.stops.map((stop, index)=>{
+                            var _stop_position;
+                            return /*#__PURE__*/ _jsxs(Stack, {
+                                direction: "row",
+                                spacing: 0.5,
+                                sx: {
+                                    alignItems: 'center'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(GradientStopColor, {
+                                        color: stop.color,
+                                        label: `Stop ${index + 1} color`,
+                                        disabled: locked,
+                                        presetColors: presetColors,
+                                        ColorPickerProps: ColorPickerProps,
+                                        onChange: handleStopColor(index)
+                                    }),
+                                    /*#__PURE__*/ _jsx(MuiTextField, {
+                                        size: "small",
+                                        type: "number",
+                                        value: (_stop_position = stop.position) != null ? _stop_position : '',
+                                        onChange: handleStopPosition(index),
+                                        disabled: locked,
+                                        sx: {
+                                            width: 88
+                                        },
+                                        slotProps: {
+                                            htmlInput: {
+                                                'aria-label': `Stop ${index + 1} position`,
+                                                inputMode: 'numeric'
+                                            },
+                                            input: {
+                                                endAdornment: /*#__PURE__*/ _jsx(Typography, {
+                                                    variant: "caption",
+                                                    children: "%"
+                                                })
+                                            }
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx(IconButton, {
+                                        size: "small",
+                                        "aria-label": `Remove stop ${index + 1}`,
+                                        // A gradient needs two ends; the last two are not
+                                        // removable, so the control can never serialize to a
+                                        // value that silently clears the background.
+                                        disabled: locked || draft.stops.length <= 2,
+                                        onClick: handleRemoveStop(index),
+                                        children: '×'
+                                    })
+                                ]
+                            }, index);
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        onClick: handleAddStop,
+                        disabled: locked,
+                        sx: {
+                            mt: 0.5
+                        },
+                        children: "Add stop"
+                    })
+                ]
+            })
+        ]
+    }));
+};
+export default CssGradientField;
+
+//# sourceMappingURL=css-gradient.js.map