@next-buildr/editor 2.0.0 → 3.0.0-rc.0

package/dist/panels/inspector/styles/token-picker.d.ts

@@ -2,7 +2,7 @@ import type { StylePropertyDef, Theme } from '@next-buildr/core';
 /**
  * The theme's tokens for a property, each with what it stands for: a swatch for a colour, the
  * value for a length or a font. Choosing one writes its `$scale.name` reference, exactly as typing
- * it would.
+ * it would. The typeface list is a combobox: a filter field narrows it, each name in its own face.
  */
 export declare function TokenPicker(props: {
     readonly def: StylePropertyDef;

package/dist/panels/inspector/styles/token-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"token-picker.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/token-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAMjE;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE;IACjC,QAAQ,CAAC,GAAG,EAAE,gBAAgB,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,sCA2CA"}
+{"version":3,"file":"token-picker.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/token-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAMjE;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE;IACjC,QAAQ,CAAC,GAAG,EAAE,gBAAgB,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,sCAmEA"}

package/dist/panels/inspector/styles/token-picker.js

@@ -1,23 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useT } from '../../../messages/index.js';
-import { Button, ColorSwatch, Icon, Popover } from '../../../ui/index.js';
+import { Button, ColorSwatch, Icon, Popover, SearchField } from '../../../ui/index.js';
 import { tokenEntries } from './model.js';
 /**
  * The theme's tokens for a property, each with what it stands for: a swatch for a colour, the
  * value for a length or a font. Choosing one writes its `$scale.name` reference, exactly as typing
- * it would.
+ * it would. The typeface list is a combobox: a filter field narrows it, each name in its own face.
  */
 export function TokenPicker(props) {
     const t = useT();
     const [open, setOpen] = useState(false);
+    const [filter, setFilter] = useState('');
     const entries = tokenEntries(props.def, props.theme);
     if (entries.length === 0)
         return null;
     const isColor = props.def.grammar.kind === 'color';
+    const isFont = props.def.name === 'fontFamily';
+    const needle = filter.trim().toLocaleLowerCase();
+    const shown = isFont
+        ? entries.filter((entry) => entry.name.toLocaleLowerCase().includes(needle))
+        : entries;
     const pick = (entry) => {
         props.onPick(entry.ref);
         setOpen(false);
+        setFilter('');
     };
-    return (_jsx(Popover, { open: open, onOpenChange: setOpen, trigger: _jsx(Button, { variant: "ghost", className: "bd-icon-button bd-token-trigger", disabled: props.disabled, "aria-label": `${t('style.tokens')}: ${props.label}`, children: _jsx(Icon, { name: "chevron-down" }) }), children: _jsx("ul", { className: "bd-token-list", "aria-label": `${t('style.tokens')}: ${props.label}`, children: entries.map((entry) => (_jsx("li", { children: _jsxs("button", { type: "button", className: "bd-token", "aria-pressed": props.current === entry.ref, onClick: () => pick(entry), children: [isColor ? _jsx(ColorSwatch, { color: entry.value }) : null, _jsx("span", { className: "bd-token-name", children: entry.name }), isColor ? null : _jsx("span", { className: "bd-token-value", children: entry.value })] }) }, entry.ref))) }) }));
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, trigger: _jsx(Button, { variant: "ghost", className: "bd-icon-button bd-token-trigger", disabled: props.disabled, "aria-label": `${t('style.tokens')}: ${props.label}`, children: _jsx(Icon, { name: "chevron-down" }) }), children: [isFont ? (_jsx(SearchField, { value: filter, onChange: setFilter, label: t('styleField.font.search'), clearLabel: t('insert.clear'), placeholder: t('styleField.font.search') })) : null, _jsx("ul", { className: "bd-token-list", "aria-label": isFont ? t('styleField.font.list') : `${t('style.tokens')}: ${props.label}`, children: shown.map((entry) => (_jsx("li", { children: _jsxs("button", { type: "button", className: "bd-token", "aria-pressed": props.current === entry.ref, onClick: () => pick(entry), children: [isColor ? _jsx(ColorSwatch, { color: entry.value }) : null, _jsx("span", { className: "bd-token-name", style: isFont ? { fontFamily: entry.value } : undefined, children: entry.name }), isColor ? null : _jsx("span", { className: "bd-token-value", children: entry.value })] }) }, entry.ref))) })] }));
 }

package/dist/panels/inspector/styles/widgets.d.ts

@@ -0,0 +1,116 @@
+import { type Theme } from '@next-buildr/core';
+import { type ReactNode } from 'react';
+/**
+ * The 3x3 pad (a radio group) with a caption naming the chosen cell. All nine choices are
+ * existing background-position grammar keywords; the caller decides which commands a pick runs.
+ */
+export declare function AlignmentPad(props: {
+    readonly value: string;
+    readonly label: string;
+    readonly disabled: boolean;
+    readonly onPick: (value: string) => void;
+    /** A second line under the caption, saying what the pad does. */
+    readonly hint?: string | undefined;
+    /** The pad for a vertical layout: the chosen mark is drawn as a bar. */
+    readonly column?: boolean;
+}): import("react").JSX.Element;
+/**
+ * A range input whose value shows in a bubble above the thumb while it is dragged or focused. The
+ * fill is the share of the range; it only reports text, which the caller still checks.
+ */
+export declare function RangeSlider(props: {
+    readonly value: number;
+    readonly min: number;
+    readonly max: number;
+    readonly step: number;
+    readonly label: string;
+    readonly disabled: boolean;
+    readonly unit?: string;
+    /** What the bubble and the spoken value show for a position; the value and unit by default. */
+    readonly format?: (value: number) => string;
+    /** The slider rests at a fallback while no value is set: shown dimmed. */
+    readonly unset?: boolean;
+    readonly onChange: (text: string) => void;
+}): import("react").JSX.Element;
+/**
+ * The colour control: a swatch that opens the palette popover, the colour as text (a hex code or a
+ * `$color.name` token), and whatever `trailing` adds (the token picker). The text is the caller's
+ * draft; nothing here decides what is valid, so an invalid code never leaves the caller.
+ */
+export declare function ColorField(props: {
+    readonly id?: string | undefined;
+    readonly text: string;
+    /** The painted colour of the swatch, resolved from tokens by the caller. */
+    readonly swatch: string | undefined;
+    readonly theme: Theme;
+    /** The name of the swatch button. */
+    readonly label: string;
+    readonly ariaLabel?: string | undefined;
+    readonly disabled: boolean;
+    readonly invalid?: boolean;
+    readonly describedBy?: string | undefined;
+    readonly onText: (text: string) => void;
+    readonly onSwatch: (value: string) => void;
+    readonly onBlur?: () => void;
+    readonly trailing?: ReactNode;
+    /** The colour that applies while none is set (the theme's text colour): hinted, never stored. */
+    readonly fallback?: {
+        readonly text: string;
+        readonly color: string;
+    } | undefined;
+}): import("react").JSX.Element;
+/**
+ * The small "restore default" icon of a field that has an override at this layer; an empty slot of
+ * the same width otherwise, so the row does not move when the override appears.
+ */
+export declare function ResetField(props: {
+    readonly label: string;
+    readonly changed: boolean;
+    readonly disabled: boolean;
+    readonly onReset: () => void;
+}): import("react").JSX.Element;
+interface ShadowLayer {
+    readonly inset: boolean;
+    readonly x: string;
+    readonly y: string;
+    readonly blur: string;
+    readonly spread: string;
+    readonly color: string;
+}
+/** The layers of a shadow value, resolving a `$shadow.name` token through the theme. */
+export declare function shadowLayers(theme: Theme, value: string): readonly ShadowLayer[];
+/**
+ * One card per shadow layer (offset, blur, spread, colour, inset). With `onChange` the cards edit
+ * and a remove and an add button appear (up to the four layers the grammar allows); without it the
+ * cards only show the layers of the chosen theme token. A theme token is shown through its layers;
+ * the first edit writes them out as a custom shadow. The caller checks the text before dispatching.
+ */
+export declare function ShadowLayers(props: {
+    readonly theme: Theme;
+    readonly value: string;
+    readonly disabled: boolean;
+    readonly onChange?: ((value: string) => void) | undefined;
+}): import("react").JSX.Element | null;
+/** Presets use the host theme's tokens, never an arbitrary CSS shadow string. */
+export declare function ShadowPresets(props: {
+    readonly theme: Theme;
+    readonly value: string;
+    readonly disabled: boolean;
+    readonly onPick: (value: string) => void;
+}): import("react").JSX.Element;
+/**
+ * The shadow editor: ready shadows, a live preview, and the layer cards. `onCustom` is given only
+ * when the property can store a custom shadow; today it takes theme tokens and `none`, so the
+ * cards show the layers of the chosen token and cannot add one.
+ */
+export declare function ShadowEditor(props: {
+    readonly theme: Theme;
+    readonly value: string;
+    readonly disabled: boolean;
+    readonly onPick: (value: string) => void;
+    readonly onCustom?: ((value: string) => void) | undefined;
+    /** Draw the layer cards (default). The Style tab edits the geometry with sliders instead. */
+    readonly layers?: boolean;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=widgets.d.ts.map

package/dist/panels/inspector/styles/widgets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widgets.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/widgets.tsx"],"names":[],"mappings":"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"}

package/dist/panels/inspector/styles/widgets.js

@@ -0,0 +1,304 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveTokenRef } from '@next-buildr/core';
+import { useRef, useState } from 'react';
+import { interpolate, useT } from '../../../messages/index.js';
+import { IconButton, Input } from '../../../ui/index.js';
+import { StyleColorInput as ColorInput } from './color-input.js';
+// --- radio keyboard navigation ---------------------------------------------------------------------
+/**
+ * Roving tabindex and arrow keys for a radio group of buttons (WAI-ARIA radio pattern): the checked
+ * radio, or the first, is the tab stop; arrows move focus and selection and wrap. With `columns`
+ * the group is a grid: Left/Right within a row, Up/Down between rows. Home and End jump to the ends.
+ */
+function useRadioNav(count, columns, checked, select) {
+    const refs = useRef([]);
+    const stop = checked >= 0 ? checked : 0;
+    const move = (from, event) => {
+        const rows = Math.ceil(count / columns);
+        const row = Math.floor(from / columns);
+        const col = from % columns;
+        let next;
+        switch (event.key) {
+            case 'ArrowRight':
+                next = columns === 1 ? (from + 1) % count : row * columns + ((col + 1) % columns);
+                break;
+            case 'ArrowLeft':
+                next =
+                    columns === 1
+                        ? (from + count - 1) % count
+                        : row * columns + ((col + columns - 1) % columns);
+                break;
+            case 'ArrowDown':
+                next = columns === 1 ? (from + 1) % count : ((row + 1) % rows) * columns + col;
+                break;
+            case 'ArrowUp':
+                next =
+                    columns === 1 ? (from + count - 1) % count : ((row + rows - 1) % rows) * columns + col;
+                break;
+            case 'Home':
+                next = 0;
+                break;
+            case 'End':
+                next = count - 1;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        if (next >= count)
+            return;
+        refs.current[next]?.focus();
+        select(next);
+    };
+    return (index) => ({
+        ref: (element) => {
+            refs.current[index] = element;
+        },
+        tabIndex: index === stop ? 0 : -1,
+        onKeyDown: (event) => move(index, event),
+    });
+}
+// --- alignment pad -------------------------------------------------------------------------------
+const POSITIONS = [
+    'top left',
+    'top',
+    'top right',
+    'left',
+    'center',
+    'right',
+    'bottom left',
+    'bottom',
+    'bottom right',
+];
+const capitalise = (text) => text.charAt(0).toLocaleUpperCase() + text.slice(1);
+/**
+ * The 3x3 pad (a radio group) with a caption naming the chosen cell. All nine choices are
+ * existing background-position grammar keywords; the caller decides which commands a pick runs.
+ */
+export function AlignmentPad(props) {
+    const t = useT();
+    const names = [
+        t('style.corner.topLeft'),
+        t('style.side.top'),
+        t('style.corner.topRight'),
+        t('style.side.left'),
+        t('style.position.center'),
+        t('style.side.right'),
+        t('style.corner.bottomLeft'),
+        t('style.side.bottom'),
+        t('style.corner.bottomRight'),
+    ];
+    const chosen = POSITIONS.indexOf(props.value);
+    const nav = useRadioNav(POSITIONS.length, 3, chosen, (index) => props.onPick(POSITIONS[index]));
+    return (_jsxs("div", { className: "bd-padrow", children: [_jsx("div", { className: props.column === true
+                    ? 'bd-wpad bd-wpad--col bd-alignment-pad'
+                    : 'bd-wpad bd-alignment-pad', role: "radiogroup", "aria-label": props.label, children: POSITIONS.map((position, index) => (_jsx("button", { type: "button", role: "radio", "aria-checked": chosen === index, "aria-label": names[index], title: names[index], disabled: props.disabled, ...nav(index), onClick: () => props.onPick(position) }, position))) }), _jsxs("p", { className: "bd-wpad__caption", children: [_jsx("strong", { children: chosen < 0 ? '–' : capitalise(names[chosen]) }), props.hint] })] }));
+}
+// --- range slider --------------------------------------------------------------------------------
+/**
+ * A range input whose value shows in a bubble above the thumb while it is dragged or focused. The
+ * fill is the share of the range; it only reports text, which the caller still checks.
+ */
+export function RangeSlider(props) {
+    const span = props.max - props.min;
+    const clamped = Math.min(props.max, Math.max(props.min, props.value));
+    const share = span > 0 ? ((clamped - props.min) / span) * 100 : 0;
+    const text = props.format?.(props.value) ?? `${props.value}${props.unit ?? ''}`;
+    return (_jsxs("div", { className: "bd-slider", "data-unset": props.unset === true ? '' : undefined, style: { '--p': `${share}%` }, children: [_jsx("input", { type: "range", "aria-label": props.label, "aria-valuetext": text, min: props.min, max: props.max, step: props.step, value: props.value, disabled: props.disabled, onChange: (event) => props.onChange(event.target.value) }), _jsx("span", { className: "bd-slider__bubble", "aria-hidden": "true", children: text })] }));
+}
+// --- colour field --------------------------------------------------------------------------------
+/** The opacity (0-100) a painted colour carries: 100 for a plain colour, `undefined` for no colour. */
+function alphaOf(color) {
+    const text = color?.trim();
+    if (text === undefined || text === '')
+        return undefined;
+    if (/^#[0-9a-f]{8}$/i.test(text))
+        return Math.round((Number.parseInt(text.slice(7), 16) / 255) * 100);
+    if (/^#[0-9a-f]{4}$/i.test(text))
+        return Math.round((Number.parseInt(text.slice(4) + text.slice(4), 16) / 255) * 100);
+    return 100;
+}
+/**
+ * The colour control: a swatch that opens the palette popover, the colour as text (a hex code or a
+ * `$color.name` token), and whatever `trailing` adds (the token picker). The text is the caller's
+ * draft; nothing here decides what is valid, so an invalid code never leaves the caller.
+ */
+export function ColorField(props) {
+    const t = useT();
+    const unset = props.text.trim() === '' && props.fallback !== undefined;
+    const alpha = alphaOf(unset ? props.fallback?.color : props.swatch);
+    return (_jsxs("span", { className: "bd-wcolor", "data-invalid": props.invalid === true ? '' : undefined, "data-unset": unset ? '' : undefined, children: [_jsx(ColorInput, { color: unset ? props.fallback?.color : props.swatch, palette: Object.entries(props.theme.tokens.color).map(([name, color]) => ({
+                    label: name,
+                    color,
+                    value: `$color.${name}`,
+                })), label: props.label, disabled: props.disabled, onColorChange: props.onSwatch }), _jsx(Input, { ...(props.id !== undefined ? { id: props.id } : {}), className: "bd-wcolor__hex", value: props.text, placeholder: props.fallback?.text ?? t('styleField.color.unset'), disabled: props.disabled, "aria-invalid": props.invalid === true, "aria-describedby": props.describedBy, "aria-label": props.ariaLabel, autoComplete: "off", spellCheck: false, onChange: (event) => props.onText(event.target.value), ...(props.onBlur !== undefined ? { onBlur: props.onBlur } : {}) }), alpha !== undefined ? _jsxs("span", { className: "bd-wcolor__alpha", children: [alpha, "%"] }) : null, props.trailing] }));
+}
+// --- reset ---------------------------------------------------------------------------------------
+/**
+ * The small "restore default" icon of a field that has an override at this layer; an empty slot of
+ * the same width otherwise, so the row does not move when the override appears.
+ */
+export function ResetField(props) {
+    const t = useT();
+    if (!props.changed)
+        return _jsx("span", { className: "bd-reset-slot", "aria-hidden": "true" });
+    return (_jsx(IconButton, { icon: "rotate-ccw", size: "sm", className: "bd-field-reset bd-reset", disabled: props.disabled, label: interpolate(t('inspector.resetField'), { label: props.label }), onClick: props.onReset }));
+}
+// --- shadow --------------------------------------------------------------------------------------
+const MAX_LAYERS = 4;
+const NEW_LAYER = '0px 4px 12px 0px #00000026';
+const LENGTH = /^-?(?:\d+\.?\d*|\.\d+)$/;
+/** What a shadow may be painted from: lengths, colours and separators, never a reference. */
+const PAINTABLE = /^[-\w\s.,#%()/]+$/;
+/** Splits on `separator` outside parentheses. */
+function splitOutside(text, separator) {
+    const out = [];
+    let depth = 0;
+    let current = '';
+    for (const ch of text) {
+        if (ch === '(')
+            depth += 1;
+        else if (ch === ')')
+            depth -= 1;
+        if (ch === separator && depth === 0) {
+            out.push(current.trim());
+            current = '';
+        }
+        else
+            current += ch;
+    }
+    out.push(current.trim());
+    return out.filter((part) => part !== '');
+}
+function parseLayer(text) {
+    const words = splitOutside(text, ' ');
+    const inset = words[0] === 'inset';
+    if (inset)
+        words.shift();
+    const color = words.pop();
+    if (color === undefined || words.length < 2 || words.length > 4)
+        return undefined;
+    return {
+        inset,
+        x: words[0],
+        y: words[1],
+        blur: words[2] ?? '0px',
+        spread: words[3] ?? '0px',
+        color,
+    };
+}
+const formatLayer = (layer) => [layer.inset ? 'inset' : '', layer.x, layer.y, layer.blur, layer.spread, layer.color]
+    .filter((word) => word !== '')
+    .join(' ');
+/** The layers of a shadow value, resolving a `$shadow.name` token through the theme. */
+export function shadowLayers(theme, value) {
+    let text = value.trim();
+    if (text.startsWith('$')) {
+        const token = resolveTokenRef(theme, text);
+        text = token.ok ? String(token.value.value) : '';
+    }
+    if (text === '' || text === 'none')
+        return [];
+    return splitOutside(text, ',')
+        .map(parseLayer)
+        .filter((layer) => layer !== undefined);
+}
+const paintOf = (theme, value) => {
+    const layers = shadowLayers(theme, value);
+    const css = layers.map(formatLayer).join(', ');
+    return css !== '' && PAINTABLE.test(css) ? css : undefined;
+};
+/** A length field that keeps what is typed until it is left; only a number is passed on. */
+function LengthField(props) {
+    const [draft, setDraft] = useState(undefined);
+    const match = /^(-?(?:\d+\.?\d*|\.\d+))([a-z]*)$/.exec(props.value);
+    const unit = match?.[2] || 'px';
+    const shown = draft ?? match?.[1] ?? props.value;
+    return (_jsxs("span", { className: "bd-wshadow__len", children: [_jsx(Input, { value: shown, "aria-label": props.label, inputMode: "decimal", autoComplete: "off", spellCheck: false, disabled: props.disabled, onChange: (event) => {
+                    const text = event.target.value;
+                    setDraft(text);
+                    if (LENGTH.test(text))
+                        props.onChange(`${text}${unit}`);
+                }, onBlur: () => setDraft(undefined) }), _jsx("span", { "aria-hidden": "true", children: unit })] }));
+}
+const HEX = /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+function LayerColor(props) {
+    const t = useT();
+    const [draft, setDraft] = useState(undefined);
+    const text = draft ?? props.color;
+    const swatch = props.color.startsWith('$')
+        ? (() => {
+            const token = resolveTokenRef(props.theme, props.color);
+            return token.ok ? String(token.value.value) : undefined;
+        })()
+        : props.color;
+    return (_jsx(ColorField, { text: text, swatch: swatch, theme: props.theme, label: `${props.label}: ${t('style.colorPicker')}`, ariaLabel: props.label, disabled: props.disabled, invalid: draft !== undefined && !HEX.test(draft), onText: (next) => {
+            setDraft(next);
+            if (HEX.test(next))
+                props.onChange(next);
+        }, onSwatch: (next) => {
+            setDraft(undefined);
+            props.onChange(next);
+        }, onBlur: () => setDraft(undefined) }));
+}
+/**
+ * One card per shadow layer (offset, blur, spread, colour, inset). With `onChange` the cards edit
+ * and a remove and an add button appear (up to the four layers the grammar allows); without it the
+ * cards only show the layers of the chosen theme token. A theme token is shown through its layers;
+ * the first edit writes them out as a custom shadow. The caller checks the text before dispatching.
+ */
+export function ShadowLayers(props) {
+    const t = useT();
+    const layers = shadowLayers(props.theme, props.value);
+    const { onChange } = props;
+    const locked = props.disabled || onChange === undefined;
+    const write = (next) => onChange?.(next.length === 0 ? 'none' : next.map(formatLayer).join(', '));
+    const patch = (index, change) => write(layers.map((layer, at) => (at === index ? { ...layer, ...change } : layer)));
+    const add = () => {
+        const fresh = parseLayer(NEW_LAYER);
+        if (fresh !== undefined)
+            write([...layers, fresh]);
+    };
+    if (layers.length === 0 && onChange === undefined)
+        return null;
+    return (_jsxs("div", { className: "bd-wshadow", children: [layers.map((layer, index) => {
+                const key = `${index}`;
+                const name = interpolate(t('styleField.shadow.layer'), { n: index + 1 });
+                return (_jsxs("fieldset", { className: "bd-wshadow__card", "aria-label": name, children: [_jsxs("div", { className: "bd-wshadow__head", children: [_jsx("span", { className: "bd-flabel", children: name }), _jsxs("label", { className: "bd-wshadow__inset", children: [_jsx("input", { type: "checkbox", checked: layer.inset, disabled: locked, onChange: (event) => patch(index, { inset: event.target.checked }) }), t('styleField.shadow.inset')] }), onChange !== undefined ? (_jsx(IconButton, { icon: "trash-2", size: "sm", label: `${t('list.remove')}: ${name}`, disabled: props.disabled, onClick: () => write(layers.filter((_, at) => at !== index)) })) : null] }), _jsx("div", { className: "bd-wshadow__grid", children: [
+                                ['x', 'styleField.shadow.x'],
+                                ['y', 'styleField.shadow.y'],
+                                ['blur', 'styleField.shadow.blur'],
+                                ['spread', 'styleField.shadow.spread'],
+                            ].map(([part, message]) => (_jsxs("div", { className: "bd-wshadow__field", children: [_jsx("span", { className: "bd-flabel", children: t(message) }), _jsx(LengthField, { value: layer[part], label: `${name}: ${t(message)}`, disabled: locked, onChange: (length) => patch(index, { [part]: length }) })] }, part))) }), _jsxs("div", { className: "bd-wshadow__field", children: [_jsx("span", { className: "bd-flabel", children: t('styleField.shadow.color') }), _jsx(LayerColor, { color: layer.color, theme: props.theme, label: `${name}: ${t('styleField.shadow.color')}`, disabled: locked, onChange: (color) => patch(index, { color }) })] })] }, key));
+            }), onChange !== undefined && layers.length < MAX_LAYERS ? (_jsx("button", { type: "button", className: "bd-textbtn bd-wshadow__add", disabled: props.disabled, onClick: add, children: t('styleField.shadow.add') })) : null] }));
+}
+/** Presets use the host theme's tokens, never an arbitrary CSS shadow string. */
+export function ShadowPresets(props) {
+    const t = useT();
+    const presets = [
+        'none',
+        ...Object.keys(props.theme.tokens.shadow).map((name) => `$shadow.${name}`),
+    ];
+    const nav = useRadioNav(presets.length, 1, presets.indexOf(props.value), (index) => props.onPick(presets[index]));
+    return (_jsx("div", { className: "bd-shadow-presets bd-wcards", role: "radiogroup", "aria-label": t('styleField.shadow.presets'), children: presets.map((value, index) => {
+            const paint = value === 'none' ? undefined : paintOf(props.theme, value);
+            return (_jsxs("button", { type: "button", role: "radio", "aria-checked": props.value === value, className: "bd-shadow-preset bd-wcard", disabled: props.disabled, ...nav(index), onClick: () => props.onPick(value), children: [_jsx("span", { className: "bd-shadow-mini", "data-elevation": Math.min(index, 3), style: paint !== undefined ? { boxShadow: paint } : undefined, "aria-hidden": "true" }), value === 'none'
+                        ? t('style.shadow.none')
+                        : value === '$shadow.sm'
+                            ? t('styleField.shadow.soft')
+                            : value === '$shadow.md'
+                                ? t('styleField.shadow.medium')
+                                : value === '$shadow.lg'
+                                    ? t('styleField.shadow.strong')
+                                    : value.slice('$shadow.'.length)] }, value));
+        }) }));
+}
+/**
+ * The shadow editor: ready shadows, a live preview, and the layer cards. `onCustom` is given only
+ * when the property can store a custom shadow; today it takes theme tokens and `none`, so the
+ * cards show the layers of the chosen token and cannot add one.
+ */
+export function ShadowEditor(props) {
+    const paint = paintOf(props.theme, props.value);
+    return (_jsxs("div", { className: "bd-wshadow-editor", children: [_jsx(ShadowPresets, { theme: props.theme, value: props.value, disabled: props.disabled, onPick: props.onPick }), _jsx("div", { className: "bd-shprev", "aria-hidden": "true", children: _jsx("span", { style: paint !== undefined ? { boxShadow: paint } : undefined }) }), props.layers === false ? null : (_jsx(ShadowLayers, { theme: props.theme, value: props.value, disabled: props.disabled, onChange: props.onCustom }))] }));
+}

package/dist/panels/inspector/styles/widgets.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=widgets.test.d.ts.map

package/dist/panels/inspector/styles/widgets.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widgets.test.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/widgets.test.tsx"],"names":[],"mappings":""}