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

package/dist/panels/inspector/styles/style-inspector.js

@@ -1,20 +1,73 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { canEdit, createIndex, defaultTheme, effectiveStyles, getStyleProperty, propertiesOfGroup, STYLE_GROUPS, } from '@next-buildr/core';
 import { useId, useState } from 'react';
 import { componentMeta, useManifest } from '../../../app/manifest.js';
-import { useT } from '../../../messages/index.js';
+import { interpolate, useT } from '../../../messages/index.js';
 import { useEditor, useEditorState } from '../../../store/index.js';
-import { ColorInput, IconButton, Input, NumberUnitInput, SegmentedControl, Tooltip, } from '../../../ui/index.js';
-import { colorOf, isEnumeration, isNumeric, keywordsOf, layerFor, partsOf, sliderOf, stepOf, takesNumber, unitsOf, } from './model.js';
+import { Button, Icon, Input, SegmentedControl, Tooltip } from '../../../ui/index.js';
+import { ScrubLabel } from '../scrub-label.js';
+import { readProp } from '../value.js';
+import { BackgroundMediaFields, backgroundMediaSupport, hasMedia, mediaToClear, } from './background-media.js';
+import { BoxModel } from './box-model.js';
+import { GradientFields } from './gradient-fields.js';
+import { boundsOf, checkStyleInput, colorOf, isEnumeration, isNumeric, KEYWORD_DEFAULTS, keywordsOf, layerFor, partsOf, RANGES, rangeShown, rangeText, sliderOf, stepOf, takesNumber, unitsOf, } from './model.js';
+import { MotionRows } from './motion-rows.js';
+import { NumberUnitInput } from './number-input.js';
+import { optionLabel } from './option-label.js';
+import { Highlight, propertyLabel } from './property-label.js';
+import { StyleSection } from './section.js';
 import { PAIRS, SEGMENTED } from './segments.js';
 import { SidesEditor } from './sides-editor.js';
 import { TokenPicker } from './token-picker.js';
 import { useStyleValue } from './use-style-value.js';
+import { AlignmentPad, ColorField, RangeSlider, ResetField, ShadowEditor, shadowLayers, } from './widgets.js';
 const pathOf = (def, part) => `${def.group}.${def.name}${part !== undefined ? `.${part}` : ''}`;
-const humanize = (name) => name
-    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
-    .toLowerCase()
-    .replace(/^./, (c) => c.toUpperCase());
+const SHADOW = {
+    shadowX: '0px',
+    shadowY: '0px',
+    shadowBlur: '0px',
+    shadowSpread: '0px',
+    shadowColor: '#00000026',
+    shadowInset: 'outset',
+};
+const TEXT_SHADOW = {
+    textShadowX: '0px',
+    textShadowY: '0px',
+    textShadowBlur: '0px',
+    textShadowColor: '#00000026',
+};
+const FILTERS = {
+    blur: '0px',
+    brightness: 1,
+    contrast: 1,
+    saturate: 1,
+    grayscale: 0,
+    sepia: 0,
+    hueRotate: '0deg',
+    invert: 0,
+};
+const TRANSFORMS = {
+    translateX: '0px',
+    translateY: '0px',
+    rotate: '0deg',
+    scale: 1,
+    skewX: '0deg',
+    skewY: '0deg',
+};
+function compoundFor(name) {
+    return [SHADOW, TEXT_SHADOW, FILTERS, TRANSFORMS].find((group) => Object.hasOwn(group, name));
+}
+function sourceLabel(source, t) {
+    if (source === 'base')
+        return t('style.desktop');
+    if (source === 'state:hover')
+        return t('style.source.hover');
+    if (source === 'state:focus-visible')
+        return t('style.source.focus-visible');
+    if (source === 'state:active')
+        return t('style.source.active');
+    return source;
+}
 /** The dot beside a property: set on this breakpoint, inherited from a wider one, or the default. */
 function SourceDot(props) {
     const t = useT();
@@ -45,17 +98,54 @@ function ValueField(props) {
     const describedBy = error !== '' ? `${id}-error` : undefined;
     const listId = props.keywords.length > 0 ? `${id}-list` : undefined;
     const swatch = colorOf(def, shown.trim(), props.theme);
-    const slider = sliderOf(def);
-    return (_jsxs("div", { className: "bd-style-value", "data-path": path, "data-source": current?.source ?? 'none', children: [props.hideLabel === true ? null : (_jsx("label", { htmlFor: id, className: "bd-field-label", children: props.label })), _jsxs("div", { className: "bd-style-input", children: [def.grammar.kind === 'color' ? (_jsx(ColorInput, { color: swatch, label: `${props.label}: ${t('style.colorPicker')}`, disabled: props.disabled, onColorChange: field.change })) : null, isNumeric(def) ? (_jsx(NumberUnitInput, { id: id, value: shown, units: unitsOf(def), unitLabel: `${t('style.unit')}: ${props.label}`, step: stepOf(def), bareNumber: takesNumber(def), disabled: props.disabled, invalid: error !== '', describedBy: describedBy, ariaLabel: ariaLabel, list: listId, onValueChange: field.change, onBlur: field.blur })) : (_jsx(Input, { id: id, value: shown, disabled: props.disabled, list: listId, "aria-invalid": error !== '', "aria-describedby": describedBy, "aria-label": ariaLabel, autoComplete: "off", spellCheck: false, onChange: (event) => field.change(event.target.value), onBlur: field.blur })), _jsx(TokenPicker, { def: def, theme: props.theme, label: props.label, current: current !== undefined ? String(current.value) : undefined, disabled: props.disabled, onPick: field.pick })] }), slider !== undefined ? (_jsx("input", { type: "range", className: "bd-range", "aria-label": `${props.label}: ${t('style.slider')}`, min: slider.min, max: slider.max, step: slider.step, value: Number.isFinite(Number(field.stored)) && field.stored !== ''
+    const slider = RANGES[path] === undefined ? sliderOf(def) : undefined;
+    const range = RANGES[path];
+    const rangeValue = Number.parseFloat(shown);
+    const hinted = props.hint !== undefined ? Number.parseFloat(props.hint) : Number.NaN;
+    // The colour a field has while none is set: the hint, else the theme's text colour for text.
+    const textColor = props.theme.tokens.color['text'];
+    const hintColor = props.hint !== undefined ? (colorOf(def, props.hint, props.theme) ?? props.hint) : undefined;
+    const fallbackColor = props.hint !== undefined && hintColor !== undefined
+        ? { text: props.hint, color: hintColor }
+        : path === 'typography.color' && textColor !== undefined
+            ? { text: textColor, color: textColor }
+            : undefined;
+    return (_jsxs("div", { className: "bd-style-value", "data-path": path, "data-source": current?.source ?? 'none', children: [path === 'size.width' ? (_jsx(SegmentedControl, { label: t('style.width.mode'), value: shown === '100%' ? 'full' : shown === 'auto' || shown === '' ? 'auto' : 'custom', disabled: props.disabled, options: [
+                    { value: 'auto', label: t('style.width.auto') },
+                    { value: 'full', label: t('style.width.full') },
+                    { value: 'custom', label: t('style.width.custom') },
+                ], onValueChange: (mode) => {
+                    if (mode === 'custom')
+                        document.getElementById(id)?.focus();
+                    else
+                        field.change(mode === 'full' ? '100%' : 'auto');
+                } })) : null, props.hideLabel === true ? null : (_jsx("label", { htmlFor: id, className: "bd-field-label", children: props.label })), _jsxs("div", { className: "bd-style-input", children: [def.grammar.kind === 'color' ? (_jsx(ColorField, { id: id, text: shown, swatch: swatch, theme: props.theme, label: `${props.label}: ${t('style.colorPicker')}`, ariaLabel: ariaLabel, disabled: props.disabled, invalid: error !== '', describedBy: describedBy, fallback: fallbackColor, onText: field.change, onSwatch: (text) => {
+                            const checked = checkStyleInput(def, text, props.theme);
+                            if (checked.ok)
+                                field.pick(text);
+                        }, onBlur: field.blur, trailing: _jsx(TokenPicker, { def: def, theme: props.theme, label: props.label, current: current !== undefined ? String(current.value) : undefined, disabled: props.disabled, onPick: field.pick }) })) : null, def.grammar.kind === 'color' ? null : isNumeric(def) ? (_jsx(NumberUnitInput, { id: id, value: shown, units: unitsOf(def), unitLabel: `${t('style.unit')}: ${props.label}`, unitLabels: { deg: t('style.unit.deg') }, step: stepOf(def), bareNumber: takesNumber(def), placeholder: props.hint !== undefined && Number.isFinite(hinted)
+                            ? String(hinted)
+                            : range !== undefined
+                                ? String(range.fallback)
+                                : undefined, disabled: props.disabled, invalid: error !== '', describedBy: describedBy, ariaLabel: ariaLabel, list: listId, onValueChange: field.change, onBlur: field.blur })) : (_jsx(Input, { id: id, value: shown, disabled: props.disabled, list: listId, "aria-invalid": error !== '', "aria-describedby": describedBy, "aria-label": ariaLabel, autoComplete: "off", spellCheck: false, onChange: (event) => field.change(event.target.value), onBlur: field.blur })), def.grammar.kind === 'color' ? null : (_jsx(TokenPicker, { def: def, theme: props.theme, label: props.label, current: current !== undefined ? String(current.value) : undefined, disabled: props.disabled, onPick: field.pick }))] }), def.grammar.kind === 'gradient' ? (_jsx(GradientFields, { value: field.stored, theme: props.theme, disabled: props.disabled, onChange: (text) => {
+                    const checked = checkStyleInput(def, text, props.theme);
+                    if (checked.ok)
+                        field.pick(text);
+                } })) : null, slider !== undefined ? (_jsx(RangeSlider, { label: `${props.label}: ${t('style.slider')}`, min: slider.min, max: slider.max, step: slider.step, value: Number.isFinite(Number(field.stored)) && field.stored !== ''
                     ? Number(field.stored)
-                    : slider.max, disabled: props.disabled, onChange: (event) => field.change(event.target.value) })) : null, listId !== undefined ? (_jsx("datalist", { id: listId, children: props.keywords.map((keyword) => (_jsx("option", { value: keyword }, keyword))) })) : null, field.inherited && current !== undefined ? (_jsx("span", { className: "bd-style-source", children: `${t('style.from')} ${current.source === 'base' ? t('style.desktop') : current.source}` })) : null, error !== '' ? (_jsx("p", { id: `${id}-error`, role: "alert", className: "bd-style-error", children: error })) : null] }));
+                    : slider.max, disabled: props.disabled, onChange: field.change })) : null, range !== undefined ? (_jsx(RangeSlider, { label: `${props.label}: ${t('style.slider')}`, min: range.min, max: range.max, step: range.step, value: Number.isFinite(rangeValue)
+                    ? rangeValue
+                    : Number.isFinite(hinted)
+                        ? hinted
+                        : range.fallback, format: (value) => rangeShown(range, value), unset: !Number.isFinite(rangeValue), disabled: props.disabled, onChange: (text) => field.change(rangeText(range, Number(text))) })) : null, path === 'layout.gap' ? (_jsx(RangeSlider, { label: `${props.label}: ${t('style.slider')}`, min: 0, max: 64, step: 1, value: Number.parseFloat(shown) || 0, unit: "px", disabled: props.disabled, onChange: (value) => field.change(`${value}px`) })) : null, listId !== undefined ? (_jsx("datalist", { id: listId, children: props.keywords.map((keyword) => (_jsx("option", { value: keyword }, keyword))) })) : null, field.inherited && current !== undefined ? (_jsx("span", { className: "bd-style-source", children: `${t('style.from')} ${sourceLabel(current.source, t)}` })) : null, error !== '' ? (_jsx("p", { id: `${id}-error`, role: "alert", className: "bd-style-error", children: error })) : null] }));
 }
 function StyleProperty(props) {
     const t = useT();
     const store = useEditor();
     const { def, nodeId, effective, layer } = props;
     const id = useId();
-    const label = def.group === 'border' && def.name === 'width' ? 'Border' : humanize(def.name);
+    const label = propertyLabel(def, t);
+    const shownLabel = _jsx(Highlight, { text: label, query: props.query });
     const parts = partsOf(def);
     const layerObject = layerFor(layer);
     const setOne = (value, part) => store.dispatch({
@@ -96,57 +186,114 @@ function StyleProperty(props) {
         });
         props.onError(failure);
     };
-    const set = (value, part) => report(setOne(value, part));
+    const set = (value, part) => {
+        const compound = compoundFor(def.name);
+        if (def.group !== 'effects' || compound === undefined)
+            return report(setOne(value, part));
+        let failure = '';
+        store.transaction(label, () => {
+            for (const [property, fallback] of Object.entries(compound)) {
+                const result = store.dispatch({
+                    type: 'node.setStyle',
+                    payload: {
+                        id: nodeId,
+                        layer: layerObject,
+                        group: 'effects',
+                        property,
+                        value: property === def.name
+                            ? value
+                            : (effective[`effects.${property}`]?.value ?? props.hints?.[property] ?? fallback),
+                    },
+                });
+                if (!result.ok)
+                    failure ||= result.error?.message ?? '';
+            }
+            return failure === '';
+        });
+        props.onError(failure);
+    };
     const unset = (part) => report(unsetOne(part));
     const paths = parts.length > 0 ? parts.map((part) => pathOf(def, part)) : [pathOf(def)];
     const here = paths.some((path) => effective[path]?.source === layer);
     const known = paths.map((path) => effective[path]).filter((entry) => entry !== undefined);
     const origin = here ? 'set' : known.length > 0 ? 'inherited' : 'default';
-    const from = known[0]?.source === 'base' ? t('style.desktop') : known[0]?.source;
+    const from = known[0] !== undefined ? sourceLabel(known[0].source, t) : undefined;
     const base = { def, effective, layer, theme: props.theme, disabled: props.disabled };
     const keywords = keywordsOf(def);
     const key = pathOf(def);
-    const head = (control, extras) => (_jsxs("div", { className: "bd-style-head", children: [control, extras, _jsx(SourceDot, { origin: origin, from: from }), here ? (_jsx(IconButton, { icon: "rotate-ccw", className: "bd-field-reset", disabled: props.disabled, label: `${t('inspector.reset')}: ${label}`, onClick: () => parts.length > 0
+    const head = (control, extras) => (_jsxs("div", { className: "bd-style-head", children: [control, extras, _jsx(SourceDot, { origin: origin, from: from }), layer !== 'base' && !layer.startsWith('state:') ? (_jsx(Tooltip, { content: here ? t('style.override') : `${t('style.editing')}: ${layer}`, children: _jsx("span", { className: "bd-device-indicator", "data-override": here, role: "img", "aria-label": here ? t('style.override') : layer, children: _jsx(Icon, { name: layer === 'mobile'
+                            ? 'smartphone'
+                            : layer === 'tablet'
+                                ? 'tablet'
+                                : 'monitor-smartphone' }) }) })) : null, _jsx(ResetField, { label: label, changed: here, disabled: props.disabled, onReset: () => parts.length > 0
                     ? apply(parts
                         .filter((part) => effective[pathOf(def, part)]?.source === layer)
                         .map((part) => ({ part, value: undefined })))
-                    : unset() })) : null] }));
+                    : unset() })] }));
     if (def.grammar.kind === 'boolean') {
         const value = effective[key];
-        return (_jsx("div", { className: "bd-field bd-style-field", "data-style-prop": key, "data-origin": origin, children: head(_jsxs("label", { className: "bd-style-check", children: [_jsx("input", { type: "checkbox", checked: value?.value === true, disabled: props.disabled, onChange: (event) => (event.target.checked ? set(true) : unset()) }), label] })) }));
+        return (_jsx("div", { className: "bd-field bd-style-field", "data-style-prop": key, "data-origin": origin, children: head(_jsxs("label", { className: "bd-style-check", children: [_jsx("input", { type: "checkbox", checked: value?.value === true, disabled: props.disabled, onChange: (event) => (event.target.checked ? set(true) : unset()) }), shownLabel] })) }));
     }
     if (parts.length > 0) {
-        return (_jsx("div", { className: props.ring === true ? 'bd-style-field bd-style-ring' : 'bd-field bd-style-field', "data-style-prop": key, "data-origin": origin, children: _jsx(SidesEditor, { ...base, label: label, parts: parts, layout: props.ring === true ? 'ring' : 'row', apply: apply, renderHead: (extras) => head(_jsx("span", { className: "bd-field-label", children: label }), extras), children: props.children }) }));
+        return (_jsx("div", { className: props.ring === true ? 'bd-style-field bd-style-ring' : 'bd-field bd-style-field', "data-style-prop": key, "data-origin": origin, children: _jsx(SidesEditor, { ...base, label: label, parts: parts, layout: props.ring === true ? 'ring' : 'row', apply: apply, renderHead: (extras) => head(_jsx("span", { className: "bd-field-label", children: props.ring === true && (def.name === 'margin' || def.name === 'padding')
+                        ? t(`styleField.spacing.${def.name}`)
+                        : shownLabel }), extras), children: props.children }) }));
     }
-    let title = _jsx("span", { className: "bd-field-label", children: label });
+    let title = _jsx("span", { className: "bd-field-label", children: shownLabel });
     let body;
     if (isEnumeration(def)) {
         const current = effective[key];
         const segments = SEGMENTED[key]?.filter((segment) => keywords.includes(segment.keyword));
         const currentText = current !== undefined ? String(current.value) : undefined;
         const currentLabel = current !== undefined
-            ? `${String(current.value)} (${current.source === 'base' ? t('style.desktop') : current.source})`
-            : '—';
+            ? `${optionLabel(String(current.value), t)} (${sourceLabel(current.source, t)})`
+            : optionLabel(KEYWORD_DEFAULTS[key] ?? '', t) || t('style.default');
         const remaining = segments === undefined
             ? keywords
             : keywords.filter((keyword) => !segments.some((segment) => segment.keyword === keyword));
-        body = (_jsxs("div", { className: "bd-style-enum", "data-segmented": segments !== undefined ? '' : undefined, children: [segments !== undefined ? (_jsx(SegmentedControl, { label: label, value: currentText, disabled: props.disabled, options: segments.map((segment) => ({
+        body = (_jsxs("div", { className: "bd-style-enum", "data-segmented": segments !== undefined ? '' : undefined, "data-more": segments !== undefined && remaining.length > 0 ? '' : undefined, children: [segments !== undefined ? (_jsx(SegmentedControl, { label: label, value: currentText, disabled: props.disabled, options: segments.map((segment) => ({
                         value: segment.keyword,
-                        label: segment.keyword,
+                        label: segment.labelKey !== undefined
+                            ? t(segment.labelKey)
+                            : optionLabel(segment.keyword, t),
                         ...(segment.icon !== undefined ? { icon: segment.icon } : {}),
                         iconOnly: segment.icon !== undefined,
                     })), onValueChange: (keyword) => current?.source === layer && currentText === keyword ? unset() : set(keyword) })) : null, remaining.length > 0 ? (_jsxs("select", { id: id, className: "bd-input", "aria-label": segments !== undefined ? `${label}: ${t('style.more')}` : undefined, value: current?.source === layer && remaining.includes(String(current.value))
                         ? String(current.value)
-                        : '', disabled: props.disabled, onChange: (event) => (event.target.value === '' ? unset() : set(event.target.value)), children: [_jsx("option", { value: "", children: segments !== undefined ? '—' : currentLabel }), remaining.map((keyword) => (_jsx("option", { value: keyword, children: keyword }, keyword)))] })) : null] }));
+                        : '', disabled: props.disabled, onChange: (event) => (event.target.value === '' ? unset() : set(event.target.value)), children: [_jsx("option", { value: "", children: segments !== undefined ? t('style.more.short') : currentLabel }), remaining.map((keyword) => (_jsx("option", { value: keyword, children: optionLabel(keyword, t) }, keyword)))] })) : null] }));
         if (segments === undefined) {
-            title = (_jsx("label", { htmlFor: id, className: "bd-field-label", children: label }));
+            title = (_jsx("label", { htmlFor: id, className: "bd-field-label", children: shownLabel }));
         }
     }
     else {
-        title = (_jsx("label", { htmlFor: id, className: "bd-field-label", children: label }));
-        body = (_jsx(ValueField, { ...base, keywords: keywords, inputId: id, path: pathOf(def), label: label, hideLabel: true, onSet: (value) => set(value), onUnset: () => unset() }));
+        title = isNumeric(def) ? (_jsx(ScrubLabel, { htmlFor: id, value: String(effective[key]?.value ?? ''), step: stepOf(def), ...boundsOf(def, String(effective[key]?.value ?? '')), unit: takesNumber(def) ? '' : (unitsOf(def)[0] ?? ''), disabled: props.disabled, onValueChange: (text) => {
+                const checked = checkStyleInput(def, text, props.theme);
+                if (checked.ok)
+                    set(checked.value);
+            }, children: shownLabel })) : (_jsx("label", { htmlFor: id, className: "bd-field-label", children: shownLabel }));
+        body = (_jsx(ValueField, { ...base, keywords: keywords, hint: props.hints?.[def.name], inputId: id, path: pathOf(def), label: label, hideLabel: true, onSet: (value) => set(value), onUnset: () => unset() }));
     }
-    return (_jsxs("div", { className: `bd-field bd-style-field${props.inline === true ? ' bd-style-inline' : ''}`, "data-style-prop": key, "data-origin": origin, children: [head(title), body] }));
+    return (_jsxs("div", { className: `bd-field bd-style-field${props.inline === true ? ' bd-style-inline' : ''}`, "data-style-prop": key, "data-origin": origin, children: [head(title), key === 'effects.shadow' ? null : body, key === 'background.imagePosition' ? (_jsx(AlignmentPad, { value: String(effective[key]?.value ?? 'center'), disabled: props.disabled, label: label, onPick: set })) : null, key === 'effects.shadow' ? (_jsx(ShadowEditor, { layers: false, theme: props.theme, value: String(effective[key]?.value ?? 'none'), disabled: props.disabled, onPick: (value) => {
+                    store.transaction(label, () => {
+                        for (const property of Object.keys(SHADOW)) {
+                            const result = store.dispatch({
+                                type: 'node.unsetStyle',
+                                payload: { id: nodeId, layer: layerObject, group: 'effects', property },
+                            });
+                            if (!result.ok)
+                                return false;
+                        }
+                        return setOne(value).ok;
+                    });
+                }, onCustom: 
+                // Only when the property stores a custom shadow; today it takes tokens and `none`.
+                checkStyleInput(def, '0px 4px 12px 0px #00000026', props.theme).ok
+                    ? (text) => {
+                        const checked = checkStyleInput(def, text, props.theme);
+                        if (checked.ok)
+                            set(checked.value);
+                    }
+                    : undefined })) : null] }));
 }
 /**
  * The Style tab (docs/editor.md#the-style-inspector): the style groups the component allows, each
@@ -154,30 +301,232 @@ function StyleProperty(props) {
  * the theme before anything is dispatched, so a value outside the grammar cannot be written; a value
  * that comes from a wider breakpoint is shown as such, and "Reset" removes only this layer's key.
  */
-export function StyleInspector({ node, breakpoint, theme = defaultTheme }) {
+export function StyleInspector({ node, breakpoint, theme = defaultTheme, query, }) {
+    return (_jsx(SelectedStyleInspector, { node: node, ...(breakpoint !== undefined ? { breakpoint } : {}), theme: theme, ...(query !== undefined ? { query } : {}) }, node.id));
+}
+function SelectedStyleInspector({ node, breakpoint, theme = defaultTheme, query = '', }) {
     const t = useT();
     const manifest = useManifest();
     const doc = useEditorState((state) => state.doc);
     const readOnly = useEditorState((state) => state.readOnly);
     const [notice, setNotice] = useState('');
-    const layer = breakpoint ?? 'base';
+    const [state, setState] = useState('normal');
+    const device = breakpoint ?? 'base';
+    const layer = state === 'normal' ? device : `state:${state}`;
     const meta = componentMeta(manifest, node.type);
     const disabled = readOnly || !canEdit(doc, createIndex(doc), node.id, 'style').ok;
-    const effective = effectiveStyles(node.styles ?? {}, layer, theme.breakpoints);
+    const baseEffective = effectiveStyles(node.styles ?? {}, device, theme.breakpoints);
+    const stateDecl = state === 'normal' ? undefined : node.styles?.state?.[state];
+    const stateEffective = stateDecl === undefined ? {} : effectiveStyles({ base: stateDecl }, 'base', theme.breakpoints);
+    const effective = state === 'normal'
+        ? baseEffective
+        : {
+            ...baseEffective,
+            ...Object.fromEntries(Object.entries(stateEffective).map(([path, entry]) => [
+                path,
+                { ...entry, source: layer },
+            ])),
+        };
     const groups = STYLE_GROUPS.filter((group) => meta?.styles.groups.includes(group));
+    // For a container the display is a component prop, not a style: read the effective one.
+    const displayDef = meta?.props['display'];
+    const displayReading = displayDef === undefined
+        ? undefined
+        : readProp(node, 'display', displayDef, undefined, undefined);
+    const fallbackDisplay = displayReading?.mode === 'static' && typeof displayReading.value === 'string'
+        ? displayReading.value
+        : typeof displayDef?.default === 'string'
+            ? displayDef.default
+            : undefined;
     if (groups.length === 0) {
         return _jsx("p", { className: "bd-inspector-empty", children: t('style.none') });
     }
-    const knownLayer = layer === 'base' || theme.breakpoints.some((b) => b.id === layer);
-    return (_jsxs("div", { className: "bd-styles", "data-layer": layer, children: [_jsx("p", { className: "bd-styles-layer", children: `${t('style.editing')}: ${layer === 'base' ? t('style.desktop') : layer}` }), !knownLayer ? _jsx("p", { className: "bd-style-error", children: t('style.unknownBreakpoint') }) : null, groups.map((group) => (_jsx(StyleGroupSection, { group: group, nodeId: node.id, effective: effective, layer: layer, theme: theme, disabled: disabled || !knownLayer, onError: setNotice, boxBorder: groups.includes('spacing') && groups.includes('border') }, group))), _jsx("div", { role: "status", className: "bd-inspector-notice", children: notice })] }));
+    const knownLayer = device === 'base' || theme.breakpoints.some((b) => b.id === device);
+    const maxWidth = theme.breakpoints.find((b) => b.id === device)?.maxWidth;
+    const deviceName = device === 'tablet' || device === 'mobile'
+        ? t(`inspector.device.${device}`)
+        : device;
+    const needle = query.trim().toLocaleLowerCase();
+    const searching = needle !== '';
+    const anyMatch = groups.some((group) => (group === 'typography'
+        ? `${t('style.group.typography')} ${t('style.section.colors')}`
+        : group === 'effects'
+            ? `${t('style.group.effects')} ${t('style.section.shadow')}`
+            : group === 'border'
+                ? t('style.section.border')
+                : t(`style.group.${group}`))
+        .toLocaleLowerCase()
+        .includes(needle) ||
+        propertiesOfGroup(group).some((def) => propertyLabel(def, t).toLocaleLowerCase().includes(needle)));
+    return (_jsxs("div", { className: "bd-styles", "data-layer": layer, children: [_jsx(SegmentedControl, { label: t('style.state.label'), value: state, options: [
+                    { value: 'normal', label: t('style.state.normal') },
+                    { value: 'hover', label: t('style.state.hover') },
+                    { value: 'focus-visible', label: t('style.state.focus-visible') },
+                    { value: 'active', label: t('style.state.active') },
+                ], onValueChange: (value) => {
+                    if (value === 'normal' ||
+                        value === 'hover' ||
+                        value === 'focus-visible' ||
+                        value === 'active')
+                        setState(value);
+                } }), state !== 'normal' ? (_jsxs("div", { className: "bd-note bd-note--info bd-styles-layer", role: "status", children: [_jsx(Icon, { name: "monitor" }), _jsx("span", { children: `${t('style.editing')}: ${t(`style.state.${state}`)}` })] })) : device !== 'base' ? (_jsxs("div", { className: "bd-note bd-note--ovr bd-styles-layer", "data-override": "true", role: "status", children: [_jsx(Icon, { name: device === 'mobile'
+                            ? 'smartphone'
+                            : device === 'tablet'
+                                ? 'tablet'
+                                : 'monitor-smartphone' }), _jsxs("span", { children: [t('inspector.device.editing'), " ", _jsx("b", { children: deviceName }), maxWidth === undefined ? '' : ` (≤ ${maxWidth}px)`, ". ", t('inspector.device.hint')] })] })) : null, !knownLayer ? _jsx("p", { className: "bd-style-error", children: t('style.unknownBreakpoint') }) : null, searching && !anyMatch ? (_jsxs("div", { className: "bd-empty", role: "status", children: [_jsx("strong", { children: interpolate(t('inspector.search.noMatch'), { query: query.trim() }) }), _jsx("span", { children: t('inspector.search.hint') })] })) : null, groups.flatMap((group) => {
+                const common = {
+                    group,
+                    fallbackDisplay,
+                    node,
+                    meta,
+                    nodeId: node.id,
+                    effective,
+                    layer,
+                    theme,
+                    disabled: disabled || !knownLayer,
+                    onError: setNotice,
+                    query: query.trim().toLocaleLowerCase(),
+                };
+                return [
+                    ...(group === 'effects'
+                        ? [_jsx(StyleGroupSection, { ...common, section: "shadow" }, "shadow")]
+                        : []),
+                    _jsx(StyleGroupSection, { ...common }, group),
+                    ...(group === 'typography'
+                        ? [_jsx(StyleGroupSection, { ...common, section: "colors" }, "colors")]
+                        : []),
+                ];
+            }), _jsx("div", { role: "status", className: "bd-inspector-notice", children: notice })] }));
 }
 function StyleGroupSection(props) {
     const t = useT();
-    const borderWidth = getStyleProperty('border', 'width');
-    const inBox = props.boxBorder && borderWidth !== undefined;
-    const defs = propertiesOfGroup(props.group).filter((def) => getStyleProperty(def.group, def.name) !== undefined &&
-        !(inBox && def.group === 'border' && def.name === 'width'));
-    const used = Object.keys(props.effective).some((path) => path.startsWith(`${props.group}.`));
+    const section = props.section ?? props.group;
+    const sectionLabel = props.section !== undefined
+        ? t(`style.section.${props.section}`)
+        : props.group === 'border'
+            ? t('style.section.border')
+            : t(`style.group.${props.group}`);
+    const store = useEditor();
+    const [moreDims, setMoreDims] = useState(false);
+    // The media of a background are component props (an image and a video), found by their shape.
+    const support = backgroundMediaSupport(props.meta);
+    const videoSet = props.node !== undefined && hasMedia(props.node, 'backgroundVideo');
+    const imageSet = props.node !== undefined && hasMedia(props.node, 'backgroundImage');
+    const [chosenMode, setBackgroundMode] = useState(props.effective['background.gradient'] !== undefined ? 'gradient' : 'color');
+    // A value the component already holds decides the mode (also after Undo brings one back).
+    // Media belong to the whole component, so only the base layer lets them decide.
+    const backgroundMode = props.layer !== 'base'
+        ? chosenMode
+        : support.video && videoSet
+            ? 'video'
+            : support.image && imageSet
+                ? 'image'
+                : chosenMode;
+    // Media props belong to the whole component, not to one device or state.
+    const mediaEditable = !props.disabled && props.layer === 'base';
+    const chooseBackground = (kind) => {
+        setBackgroundMode(kind);
+        const node = props.node;
+        const clear = node === undefined || props.layer !== 'base'
+            ? []
+            : mediaToClear(kind).filter((name) => hasMedia(node, name));
+        if (kind !== 'none' && clear.length === 0)
+            return;
+        // Switching the kind removes the media the new kind does not keep: one undo step.
+        const done = store.transaction(sectionLabel, () => {
+            if (kind === 'none') {
+                for (const property of ['color', 'gradient']) {
+                    const result = store.dispatch({
+                        type: 'node.unsetStyle',
+                        payload: {
+                            id: props.nodeId,
+                            layer: layerFor(props.layer),
+                            group: 'background',
+                            property,
+                        },
+                    });
+                    if (!result.ok)
+                        return false;
+                }
+            }
+            for (const prop of clear) {
+                const result = store.dispatch({
+                    type: 'node.unsetProp',
+                    payload: { id: props.nodeId, prop },
+                });
+                if (!result.ok)
+                    return false;
+            }
+            return true;
+        });
+        if (!done)
+            props.onError(t('style.media.switchFailed'));
+    };
+    // Every property of the section, whatever the search says: "Reset section" and the counts use it.
+    const sectionDefs = propertiesOfGroup(props.group).filter((def) => getStyleProperty(def.group, def.name) !== undefined &&
+        (!props.layer.startsWith('state:') || def.allowInStates) &&
+        (props.group !== 'typography' ||
+            (props.section === 'colors' ? def.name === 'color' : def.name !== 'color')) &&
+        (props.group !== 'effects' ||
+            (props.section === 'shadow' ? /shadow/i.test(def.name) : !/shadow/i.test(def.name))));
+    const matching = sectionDefs.filter((def) => props.query === '' ||
+        sectionLabel.toLocaleLowerCase().includes(props.query) ||
+        propertyLabel(def, t).toLocaleLowerCase().includes(props.query));
+    const relevant = Object.entries(props.effective).filter(([path]) => sectionDefs.some((def) => path === pathOf(def) || path.startsWith(`${pathOf(def)}.`)));
+    const used = relevant.length > 0;
+    // Min. and max. dimensions sit behind a disclosure until one has a value or the search finds it.
+    const isLimit = (def) => props.group === 'size' && /^(min|max)(Width|Height)$/.test(def.name);
+    const limitUsed = sectionDefs.some((def) => isLimit(def) &&
+        Object.keys(props.effective).some((path) => path.startsWith(`${pathOf(def)}`)));
+    const showLimits = moreDims || limitUsed || props.query !== '';
+    const shadowFirst = (a, b) => Number(b.name === 'shadow') - Number(a.name === 'shadow');
+    const defs = matching
+        .filter((def) => (!isLimit(def) || showLimits) &&
+        (props.group !== 'background' ||
+            props.query !== '' ||
+            (backgroundMode === 'none' || backgroundMode === 'image' || backgroundMode === 'video'
+                ? false
+                : backgroundMode === 'color'
+                    ? def.name === 'color'
+                    : def.name !== 'color')))
+        .sort(props.section === 'shadow' ? shadowFirst : () => 0);
+    // Why Image and Video are off: the component has no such background, or a device is being edited.
+    const mediaHint = !support.image && !support.video
+        ? t('style.media.unsupported')
+        : props.layer !== 'base'
+            ? t('style.media.baseOnly')
+            : undefined;
+    const hasLimits = props.query === '' && sectionDefs.some(isLimit);
+    /** Paths written at the layer being edited: what "Reset section" removes. */
+    const here = sectionDefs.flatMap((def) => {
+        const parts = partsOf(def);
+        return (parts.length > 0 ? parts.map((part) => ({ def, part })) : [{ def, part: undefined }])
+            .filter(({ part }) => props.effective[pathOf(def, part)]?.source === props.layer)
+            .map(({ part }) => ({ def, part }));
+    });
+    const isBreakpoint = props.layer !== 'base' && !props.layer.startsWith('state:');
+    const resetSection = () => {
+        let failure = '';
+        // The same command as the per-property reset, one undo step for the whole section.
+        store.transaction(sectionLabel, () => {
+            for (const { def, part } of here) {
+                const result = store.dispatch({
+                    type: 'node.unsetStyle',
+                    payload: {
+                        id: props.nodeId,
+                        layer: layerFor(props.layer),
+                        group: def.group,
+                        property: def.name,
+                        ...(part !== undefined ? { side: part } : {}),
+                    },
+                });
+                if (!result.ok)
+                    failure ||= result.error?.message ?? '';
+            }
+            return failure === '';
+        });
+        props.onError(failure);
+    };
     const byName = new Map(defs.map((def) => [def.name, def]));
     const common = {
         nodeId: props.nodeId,
@@ -186,6 +535,7 @@ function StyleGroupSection(props) {
         theme: props.theme,
         disabled: props.disabled,
         onError: props.onError,
+        query: props.query,
     };
     // Margin wraps padding as a ring (the way the page nests them); pairs share one row.
     const nested = props.group === 'spacing' && byName.has('margin') && byName.has('padding');
@@ -198,14 +548,24 @@ function StyleGroupSection(props) {
     }
     const seconds = new Set([...paired.values()].map((def) => def.name));
     const rows = [];
-    for (const def of defs) {
+    const structured = props.query === '' && props.group === 'effects';
+    if (structured)
+        rows.push(...structuredEffectRows({ ...props, byName, common, t }));
+    const motion = props.query === '' && props.group === 'motion';
+    if (motion) {
+        rows.push(_jsx(MotionRows, { nodeId: props.nodeId, effective: props.effective, layer: props.layer, disabled: props.disabled, onError: props.onError, has: (name) => byName.has(name), row: (name) => {
+                const def = byName.get(name);
+                return def === undefined ? null : _jsx(StyleProperty, { def: def, inline: true, ...common });
+            } }, "motion"));
+    }
+    for (const def of structured || motion ? [] : defs) {
         if (seconds.has(def.name))
             continue;
         if (nested && def.name === 'padding')
             continue;
         if (nested && def.name === 'margin') {
             const padding = (_jsx(StyleProperty, { def: byName.get('padding'), ring: true, ...common }));
-            rows.push(_jsx(StyleProperty, { def: def, ring: true, ...common, children: inBox && borderWidth !== undefined ? (_jsx(StyleProperty, { def: borderWidth, ring: true, ...common, children: padding })) : (padding) }, def.name));
+            rows.push(_jsx(BoxModel, { children: _jsx(StyleProperty, { def: def, ring: true, ...common, children: padding }) }, "box-model"));
             continue;
         }
         const second = paired.get(def.name);
@@ -213,7 +573,215 @@ function StyleGroupSection(props) {
             rows.push(_jsxs("div", { className: "bd-style-pair", children: [_jsx(StyleProperty, { def: def, ...common }), _jsx(StyleProperty, { def: second, ...common })] }, def.name));
             continue;
         }
-        rows.push(_jsx(StyleProperty, { def: def, inline: true, ...common }, def.name));
+        if (props.group === 'layout' &&
+            [
+                'justify',
+                'align',
+                'rowGap',
+                'columnGap',
+                'order',
+                'zIndex',
+                'columnSpan',
+                'position',
+                'inset',
+            ].includes(def.name) &&
+            props.query === '') {
+            rows.push(_jsx(LayoutMore, { label: propertyLabel(def, t), children: _jsx(StyleProperty, { def: def, inline: true, ...common }) }, def.name));
+        }
+        else
+            rows.push(_jsx(StyleProperty, { def: def, inline: true, ...common }, def.name));
+        if (props.group === 'layout' && def.name === 'direction' && props.query === '')
+            rows.push(_jsx(LayoutAlignment, { ...common, fallbackDisplay: props.fallbackDisplay }, "alignment"));
+    }
+    if (matching.length === 0)
+        return null;
+    return (_jsxs(StyleSection, { name: section, label: sectionLabel, defaultOpen: section === 'colors' || props.group === 'spacing', searching: props.query !== '', modified: used, override: isBreakpoint && here.length > 0, overrideCount: isBreakpoint ? here.length : 0, layer: props.layer, query: props.query, onReset: here.length > 0 ? resetSection : undefined, resetDisabled: props.disabled, children: [props.group === 'background' && props.query === '' ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "bd-field-label", children: t('styleField.bg.type') }), _jsx("fieldset", { className: "bd-segmented bd-bg-kind", "aria-label": t('styleField.bg.type'), children: [
+                            ['none', t('styleField.bg.noneShort')],
+                            ['color', t('styleField.bg.color')],
+                            ['gradient', t('styleField.bg.gradient')],
+                            ['image', t('style.media.image')],
+                            ['video', t('style.media.video')],
+                        ].map(([kind, text]) => {
+                            const media = kind === 'image' || kind === 'video';
+                            const offered = kind === 'image' ? support.image : support.video;
+                            const blocked = media && (!offered || props.layer !== 'base');
+                            const button = (_jsx(Button, { variant: "ghost", className: "bd-segment", "aria-pressed": backgroundMode === kind, disabled: props.disabled || blocked, onClick: () => chooseBackground(kind), children: text }, kind));
+                            return blocked ? (_jsx(Tooltip, { content: t(offered ? 'style.media.baseOnly' : 'style.media.unsupported'), children: _jsx("span", { className: "bd-bg-kind__disabled", children: button }) }, kind)) : (button);
+                        }) }), mediaHint !== undefined ? _jsx("p", { className: "bd-hint", children: mediaHint }) : null, (backgroundMode === 'image' || backgroundMode === 'video') &&
+                        props.node !== undefined &&
+                        props.meta !== undefined ? (_jsx(BackgroundMediaFields, { node: props.node, meta: props.meta, mode: backgroundMode, disabled: !mediaEditable, onError: props.onError })) : null] })) : null, rows, hasLimits ? (_jsxs("button", { type: "button", className: "bd-textbtn bd-more-dims", "aria-expanded": showLimits, disabled: limitUsed, onClick: () => setMoreDims(!moreDims), children: [_jsx(Icon, { name: showLimits ? 'chevron-up' : 'chevron-down' }), showLimits ? t('styleField.dimensions.fewer') : t('styleField.dimensions.more')] })) : null] }));
+}
+const SHADOW_GEOMETRY = [
+    'shadowX',
+    'shadowY',
+    'shadowBlur',
+    'shadowSpread',
+    'shadowColor',
+    'shadowInset',
+];
+const TEXT_SHADOW_ROWS = ['textShadowX', 'textShadowY', 'textShadowBlur', 'textShadowColor'];
+/** The effects, grouped the way the template groups them; the second list sits behind a disclosure. */
+const EFFECT_GROUPS = [
+    { main: ['opacity', 'blur', 'blendMode'] },
+    {
+        title: 'styleField.effects.filters',
+        main: ['brightness', 'contrast', 'saturate'],
+        more: {
+            label: 'styleField.effects.moreFilters',
+            names: ['grayscale', 'sepia', 'hueRotate', 'invert', 'backdropBlur'],
+        },
+    },
+    {
+        title: 'styleField.effects.transforms',
+        main: ['rotate', 'scale', 'translateX', 'translateY'],
+        more: {
+            label: 'styleField.effects.moreTransforms',
+            names: ['skewX', 'skewY', 'transformOrigin'],
+        },
+    },
+];
+/**
+ * The first layer of the shadow the property shows (a theme preset), as the geometry values the
+ * sliders start from. Only text the grammar accepts is used, so a preset the grammar cannot
+ * express in parts simply leaves the sliders at their defaults.
+ */
+function shadowSeed(theme, value, defs) {
+    const layer = shadowLayers(theme, value)[0];
+    if (layer === undefined)
+        return {};
+    const wanted = {
+        shadowX: layer.x,
+        shadowY: layer.y,
+        shadowBlur: layer.blur,
+        shadowSpread: layer.spread,
+        shadowColor: layer.color,
+        shadowInset: layer.inset ? 'inset' : 'outset',
+    };
+    const out = {};
+    for (const [name, text] of Object.entries(wanted)) {
+        const def = defs.get(name);
+        if (def !== undefined && checkStyleInput(def, text, theme).ok)
+            out[name] = text;
+    }
+    return out;
+}
+/** The shadow and effects sections: ready shadows first, geometry only for a shadow, extras folded. */
+function structuredEffectRows(props) {
+    const { byName, common, effective, t } = props;
+    const used = (names) => names.some((name) => effective[`effects.${name}`] !== undefined);
+    const row = (name, hints, inline = true) => {
+        const def = byName.get(name);
+        return def === undefined ? null : (_jsx(StyleProperty, { def: def, inline: inline, ...common, ...(hints !== undefined ? { hints } : {}) }, name));
+    };
+    const sub = (key, label) => (_jsx("span", { className: "bd-flabel bd-style-sub", children: label }, key));
+    const rows = [];
+    if (props.section === 'shadow') {
+        const value = String(effective['effects.shadow']?.value ?? 'none');
+        const custom = used(SHADOW_GEOMETRY);
+        const seed = shadowSeed(props.theme, value, byName);
+        rows.push(row('shadow', seed, false));
+        if (custom || value !== 'none') {
+            rows.push(sub('adjust', t(custom ? 'styleField.shadow.custom' : 'styleField.shadow.adjust')));
+            for (const name of SHADOW_GEOMETRY)
+                rows.push(row(name, seed));
+        }
+        if (TEXT_SHADOW_ROWS.some((name) => byName.has(name))) {
+            rows.push(_jsx(Disclosure, { label: t('styleField.shadow.text'), defaultOpen: used(TEXT_SHADOW_ROWS), children: TEXT_SHADOW_ROWS.map((name) => row(name)) }, "text-shadow"));
+        }
+        return rows;
     }
-    return (_jsxs("details", { className: "bd-style-group", open: used, "data-group": props.group, children: [_jsx("summary", { children: t(`style.group.${props.group}`) }), rows] }));
+    const listed = new Set(['transition', 'cursor']);
+    for (const group of EFFECT_GROUPS) {
+        for (const name of [...group.main, ...(group.more?.names ?? [])])
+            listed.add(name);
+    }
+    for (const group of EFFECT_GROUPS) {
+        if (group.title !== undefined)
+            rows.push(sub(group.title, t(group.title)));
+        for (const name of group.main)
+            rows.push(row(name));
+        const more = group.more;
+        if (more !== undefined && more.names.some((name) => byName.has(name))) {
+            rows.push(_jsx(Disclosure, { label: t(more.label), defaultOpen: used(more.names), children: more.names.map((name) => row(name)) }, more.label));
+        }
+    }
+    const rest = ['transition', 'cursor', ...[...byName.keys()].filter((name) => !listed.has(name))];
+    if (rest.some((name) => byName.has(name))) {
+        rows.push(_jsx(Disclosure, { label: t('styleField.effects.advanced'), defaultOpen: used(rest), children: rest.map((name) => row(name)) }, "advanced"));
+    }
+    return rows;
+}
+/** A closed-by-default group of rows behind a button with `aria-expanded`; open while any holds a value. */
+function Disclosure(props) {
+    const [open, setOpen] = useState(props.defaultOpen);
+    const id = useId();
+    return (_jsxs("div", { className: "bd-layout-more", "data-open": open, children: [_jsxs("button", { type: "button", className: "bd-layout-more__toggle", "aria-expanded": open, "aria-controls": id, onClick: () => setOpen(!open), children: [_jsx(Icon, { name: open ? 'chevron-down' : 'chevron-right' }), props.label] }), _jsx("div", { id: id, className: "bd-disclosure__body", hidden: !open, children: props.children })] }));
+}
+/** A closed-by-default row (a button with `aria-expanded`, not `<details>`) for the rarely used layout properties. */
+function LayoutMore(props) {
+    const [open, setOpen] = useState(false);
+    const id = useId();
+    return (_jsxs("div", { className: "bd-layout-more", "data-open": open, children: [_jsxs("button", { type: "button", className: "bd-layout-more__toggle", "aria-expanded": open, "aria-controls": id, onClick: () => setOpen(!open), children: [_jsx(Icon, { name: open ? 'chevron-down' : 'chevron-right' }), props.label] }), _jsx("div", { id: id, hidden: !open, children: props.children })] }));
+}
+/** The pad is a shortcut for the same two layout commands as the individual segments. */
+function LayoutAlignment(props) {
+    const t = useT();
+    const store = useEditor();
+    const display = props.effective['layout.display']?.value ?? props.fallbackDisplay;
+    if (display !== 'flex' && display !== 'inline-flex')
+        return null;
+    const direction = String(props.effective['layout.direction']?.value ?? 'row');
+    const column = direction.startsWith('column');
+    const reverse = direction.endsWith('reverse');
+    const values = ['flex-start', 'center', 'flex-end'];
+    const main = String(props.effective['layout.justify']?.value ?? 'flex-start');
+    const cross = String(props.effective['layout.align']?.value ?? 'stretch');
+    const at = (value) => values.indexOf(value === 'start' ? 'flex-start' : value === 'end' ? 'flex-end' : value);
+    const mainIndex = at(main);
+    const crossIndex = at(cross);
+    const j = reverse && mainIndex !== -1 ? 2 - mainIndex : mainIndex;
+    const x = column ? crossIndex : j;
+    const y = column ? j : crossIndex;
+    const positions = [
+        'top left',
+        'top',
+        'top right',
+        'left',
+        'center',
+        'right',
+        'bottom left',
+        'bottom',
+        'bottom right',
+    ];
+    return (_jsxs("div", { className: "bd-layout-alignment", children: [_jsx("span", { className: "bd-field-label", children: t('style.alignment') }), _jsx(AlignmentPad, { column: column, hint: t(column ? 'styleField.align.helpColumn' : 'styleField.align.helpRow'), label: t('style.alignment'), value: x < 0 || y < 0 ? '' : (positions[y * 3 + x] ?? ''), disabled: props.disabled, onPick: (position) => {
+                    const index = positions.indexOf(position);
+                    if (index < 0)
+                        return;
+                    const row = Math.floor(index / 3);
+                    const col = index % 3;
+                    const mainAxis = column ? row : col;
+                    const result = store.dispatchBatch([
+                        {
+                            type: 'node.setStyle',
+                            payload: {
+                                id: props.nodeId,
+                                layer: layerFor(props.layer),
+                                group: 'layout',
+                                property: 'justify',
+                                value: values[reverse ? 2 - mainAxis : mainAxis] ?? 'center',
+                            },
+                        },
+                        {
+                            type: 'node.setStyle',
+                            payload: {
+                                id: props.nodeId,
+                                layer: layerFor(props.layer),
+                                group: 'layout',
+                                property: 'align',
+                                value: values[column ? col : row] ?? 'center',
+                            },
+                        },
+                    ], { label: t('style.alignment') });
+                    props.onError(result.ok ? '' : (result.error?.message ?? ''));
+                } })] }));
 }