@next-buildr/editor 0.0.0-stage → 2.0.0

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

@@ -0,0 +1,111 @@
+import { BOX_SIDES, CORNERS, parseStyleValue, resolveTokenRef, } from '@next-buildr/core';
+const NUMERIC = /^-?\d+(\.\d+)?$/;
+const TOKEN_IN_TEXT = /\$[A-Za-z]+\.[a-z0-9-]+/g;
+/**
+ * Turns typed text into the value to store: a number when the text is numeric and the grammar takes
+ * one, else the text itself. It is accepted only when `parseStyleValue` accepts it and every token
+ * in it exists in the theme, so nothing outside the grammar can be dispatched.
+ */
+export function checkStyleInput(def, text, theme) {
+    const typed = text.trim();
+    const candidates = NUMERIC.test(typed) ? [Number(typed), typed] : [typed];
+    let message = '';
+    for (const candidate of candidates) {
+        const parsed = parseStyleValue(def.grammar, candidate, { inheritable: def.inheritable });
+        if (!parsed.ok) {
+            message ||= parsed.error.message;
+            continue;
+        }
+        for (const token of typeof candidate === 'string'
+            ? (candidate.match(TOKEN_IN_TEXT) ?? [])
+            : []) {
+            const known = resolveTokenRef(theme, token);
+            if (!known.ok)
+                return { ok: false, message: known.error.message };
+        }
+        return { ok: true, value: candidate };
+    }
+    return { ok: false, message };
+}
+/** The sides or corners of a shaped property, in the order the editor lays them out. */
+export const partsOf = (def) => def.shape === 'box' ? BOX_SIDES : def.shape === 'corners' ? CORNERS : [];
+/** The token references (`$space.4`) a property accepts in this theme, for suggestions. */
+export function tokenSuggestions(def, theme) {
+    const out = [];
+    for (const scale of def.tokenScale ?? []) {
+        for (const name of Object.keys(theme.tokens[scale]))
+            out.push(`$${scale}.${name}`);
+    }
+    return out;
+}
+/** The keywords a property accepts, for suggestions and for the select of a pure enumeration. */
+export function keywordsOf(def) {
+    const grammar = def.grammar;
+    return grammar.kind === 'composite' || grammar.kind === 'color' ? (grammar.keywords ?? []) : [];
+}
+/** A property that is only a list of keywords is edited with a select. */
+export function isEnumeration(def) {
+    const grammar = def.grammar;
+    return (grammar.kind === 'composite' &&
+        (grammar.keywords?.length ?? 0) > 0 &&
+        grammar.tokens === undefined &&
+        grammar.length === undefined &&
+        grammar.number === undefined);
+}
+/** The layer a breakpoint id edits: desktop is `{}`. */
+export const layerFor = (breakpoint) => breakpoint === undefined || breakpoint === 'base' ? {} : { bp: breakpoint };
+/** The units the property's grammar allows, and nothing else: they are all the unit menu offers. */
+export function unitsOf(def) {
+    const grammar = def.grammar;
+    return grammar.kind === 'composite' ? (grammar.length?.units ?? []) : [];
+}
+/** Whether the grammar takes a bare number (`opacity`, `lineHeight`) rather than only lengths. */
+export function takesNumber(def) {
+    const grammar = def.grammar;
+    return grammar.kind === 'composite' && grammar.number !== undefined;
+}
+/** How much an arrow key adds: a fraction where the number is confined to a small range. */
+export function stepOf(def) {
+    const grammar = def.grammar;
+    if (grammar.kind !== 'composite' || grammar.number === undefined)
+        return 1;
+    if (grammar.length !== undefined)
+        return 1;
+    if (grammar.number.integer === true && grammar.number.min >= 100)
+        return 100;
+    return grammar.number.max - grammar.number.min <= 10 && grammar.number.integer !== true ? 0.1 : 1;
+}
+/** Whether the property is edited as a number (with a unit menu) rather than as free keyword text. */
+export function isNumeric(def) {
+    return unitsOf(def).length > 0 || takesNumber(def);
+}
+/** The tokens a property accepts in this theme, with their values, for the picker. */
+export function tokenEntries(def, theme) {
+    const out = [];
+    for (const scale of def.tokenScale ?? []) {
+        for (const [name, value] of Object.entries(theme.tokens[scale])) {
+            out.push({ ref: `$${scale}.${name}`, scale, name, value: String(value) });
+        }
+    }
+    return out;
+}
+/** The colour a text stands for, to paint a swatch: a token of the theme or a literal colour. */
+export function colorOf(def, text, theme) {
+    if (def.grammar.kind !== 'color')
+        return undefined;
+    if (text.startsWith('$')) {
+        const known = resolveTokenRef(theme, text);
+        return known.ok && known.value.scale === 'color' ? known.value.value : undefined;
+    }
+    return text;
+}
+/** A number confined to a range of at most one (opacity) is also edited with a slider. */
+export function sliderOf(def) {
+    const grammar = def.grammar;
+    if (grammar.kind !== 'composite' || grammar.number === undefined)
+        return undefined;
+    if (grammar.length !== undefined)
+        return undefined;
+    const { min, max } = grammar.number;
+    return max - min <= 1 ? { min, max, step: 0.01 } : undefined;
+}

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

@@ -0,0 +1,18 @@
+import type { IconName } from '../../../ui/index.ts';
+/** One segment: an icon (its name and tooltip are the keyword) or, without an icon, the keyword as text. */
+export interface Segment {
+    readonly keyword: string;
+    readonly icon?: IconName;
+}
+/**
+ * The properties edited with a row of segments, and the keyword each segment stands for. A
+ * keyword of the grammar that has no segment stays reachable through the "other" menu next to
+ * the row, so nothing the grammar allows becomes unreachable.
+ */
+export declare const SEGMENTED: Readonly<Record<string, readonly Segment[]>>;
+/**
+ * Properties that sit side by side in one row (two columns) instead of one under the other, per
+ * group. A pair is only drawn when the component allows both; a missing one is skipped.
+ */
+export declare const PAIRS: Readonly<Record<string, readonly (readonly [string, string])[]>>;
+//# sourceMappingURL=segments.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"segments.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/segments.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAErD,4GAA4G;AAC5G,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;CAC1B;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,OAAO,EAAE,CAAC,CAgDlE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC,CAgBlF,CAAC"}

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

@@ -0,0 +1,75 @@
+/**
+ * The properties edited with a row of segments, and the keyword each segment stands for. A
+ * keyword of the grammar that has no segment stays reachable through the "other" menu next to
+ * the row, so nothing the grammar allows becomes unreachable.
+ */
+export const SEGMENTED = {
+    'layout.display': [
+        { keyword: 'block' },
+        { keyword: 'flex' },
+        { keyword: 'grid' },
+        { keyword: 'none' },
+    ],
+    'layout.direction': [
+        { keyword: 'row', icon: 'arrow-right' },
+        { keyword: 'column', icon: 'arrow-down' },
+        { keyword: 'row-reverse', icon: 'arrow-left' },
+        { keyword: 'column-reverse', icon: 'arrow-up' },
+    ],
+    'layout.wrap': [{ keyword: 'nowrap' }, { keyword: 'wrap' }],
+    'layout.align': [
+        { keyword: 'flex-start', icon: 'align-start-vertical' },
+        { keyword: 'center', icon: 'align-center-vertical' },
+        { keyword: 'flex-end', icon: 'align-end-vertical' },
+        { keyword: 'stretch', icon: 'stretch-vertical' },
+    ],
+    'layout.justify': [
+        { keyword: 'flex-start', icon: 'align-horizontal-justify-start' },
+        { keyword: 'center', icon: 'align-horizontal-justify-center' },
+        { keyword: 'flex-end', icon: 'align-horizontal-justify-end' },
+        { keyword: 'space-between', icon: 'align-horizontal-space-between' },
+        { keyword: 'space-around', icon: 'align-horizontal-space-around' },
+    ],
+    'typography.textAlign': [
+        { keyword: 'left', icon: 'text-align-start' },
+        { keyword: 'center', icon: 'text-align-center' },
+        { keyword: 'right', icon: 'text-align-end' },
+        { keyword: 'justify', icon: 'text-align-justify' },
+    ],
+    'typography.textTransform': [
+        { keyword: 'none', icon: 'ban' },
+        { keyword: 'uppercase', icon: 'case-upper' },
+        { keyword: 'lowercase', icon: 'case-lower' },
+        { keyword: 'capitalize', icon: 'case-sensitive' },
+    ],
+    'typography.fontStyle': [
+        { keyword: 'normal', icon: 'type' },
+        { keyword: 'italic', icon: 'italic' },
+    ],
+    'typography.textDecoration': [
+        { keyword: 'none', icon: 'ban' },
+        { keyword: 'underline', icon: 'underline' },
+        { keyword: 'line-through', icon: 'strikethrough' },
+    ],
+};
+/**
+ * Properties that sit side by side in one row (two columns) instead of one under the other, per
+ * group. A pair is only drawn when the component allows both; a missing one is skipped.
+ */
+export const PAIRS = {
+    layout: [
+        ['rowGap', 'columnGap'],
+        ['columns', 'rows'],
+        ['order', 'zIndex'],
+    ],
+    size: [
+        ['width', 'height'],
+        ['minWidth', 'minHeight'],
+        ['maxWidth', 'maxHeight'],
+    ],
+    typography: [
+        ['fontSize', 'fontWeight'],
+        ['lineHeight', 'letterSpacing'],
+    ],
+    background: [['imagePosition', 'imageSize']],
+};

package/dist/panels/inspector/styles/sides-editor.d.ts

@@ -0,0 +1,34 @@
+import type { EffectiveStyles, StylePropertyDef, Theme } from '@next-buildr/core';
+import { type ReactNode } from 'react';
+/** One write of a run: a value for a part, or `undefined` to remove that part's value. */
+export interface SideWrite {
+    readonly part: string;
+    readonly value: string | number | undefined;
+}
+export interface SidesEditorProps {
+    readonly def: StylePropertyDef;
+    /** The visible name of the property (`Margin`). */
+    readonly label: string;
+    /** The sides or corners, in the order they are laid out. */
+    readonly parts: readonly string[];
+    readonly effective: EffectiveStyles;
+    readonly layer: string;
+    readonly theme: Theme;
+    readonly disabled: boolean;
+    /** `row`: the fields in a row with labels; `ring`: the fields around a box, which holds `children`. */
+    readonly layout: 'row' | 'ring';
+    /** Runs several writes as one undo step. */
+    readonly apply: (writes: readonly SideWrite[]) => void;
+    /** Draws the header of the property; what is passed goes before its origin dot and reset button. */
+    readonly renderHead: (extras: ReactNode) => ReactNode;
+    readonly children?: ReactNode;
+}
+/**
+ * The visual editor of a property that has one value per side or corner (margin, padding, inset,
+ * border width, radius). Every side is a field of its own; a link button makes the fields move
+ * together (the default while they are equal), one menu picks the unit for all of them, and the
+ * token picker fills the linked sides or the one last focused. The `ring` layout draws the fields
+ * around a box, so margin and padding can be nested the way the page shows them.
+ */
+export declare function SidesEditor(props: SidesEditorProps): import("react").JSX.Element;
+//# sourceMappingURL=sides-editor.d.ts.map

package/dist/panels/inspector/styles/sides-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sides-editor.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/sides-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAClF,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAO5D,0FAA0F;AAC1F,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CAC7C;AA8DD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,GAAG,EAAE,gBAAgB,CAAC;IAC/B,mDAAmD;IACnD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,4DAA4D;IAC5D,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC,QAAQ,CAAC,SAAS,EAAE,eAAe,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,uGAAuG;IACvG,QAAQ,CAAC,MAAM,EAAE,KAAK,GAAG,MAAM,CAAC;IAChC,4CAA4C;IAC5C,QAAQ,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,SAAS,SAAS,EAAE,KAAK,IAAI,CAAC;IACvD,oGAAoG;IACpG,QAAQ,CAAC,UAAU,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,SAAS,CAAC;IACtD,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;CAC/B;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAmJlD"}

package/dist/panels/inspector/styles/sides-editor.js

@@ -0,0 +1,86 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useT } from '../../../messages/index.js';
+import { IconButton, NumberUnitInput } from '../../../ui/index.js';
+import { unitsOf } from './model.js';
+import { TokenPicker } from './token-picker.js';
+import { useStyleValue } from './use-style-value.js';
+const NUMBER_UNIT = /^(-?(?:\d+\.?\d*|\.\d+))([a-z%]*)$/;
+const pathOf = (def, part) => `${def.group}.${def.name}.${part}`;
+/** One side or corner: a small field holding the number; the unit is the row's. */
+function SideField(props) {
+    const { def, part, label, onError } = props;
+    const path = pathOf(def, part);
+    const field = useStyleValue({
+        def,
+        path,
+        effective: props.effective,
+        layer: props.layer,
+        theme: props.theme,
+        onSet: (value) => props.write(part, value),
+        onUnset: () => props.clear(part),
+    });
+    const { error } = field;
+    useEffect(() => onError(part, error), [error, part, onError]);
+    return (_jsx("div", { className: "bd-side-field", "data-path": path, "data-part": part, "data-source": field.current?.source ?? 'none', children: _jsx(NumberUnitInput, { compact: true, hideUnitMenu: true, value: field.shown, units: unitsOf(def), unit: props.unit, unitLabel: "", ariaLabel: label, disabled: props.disabled, invalid: error !== '', placeholder: "\u2013", onValueChange: field.change, onFocus: props.onFocus, onBlur: field.blur }) }));
+}
+/**
+ * The visual editor of a property that has one value per side or corner (margin, padding, inset,
+ * border width, radius). Every side is a field of its own; a link button makes the fields move
+ * together (the default while they are equal), one menu picks the unit for all of them, and the
+ * token picker fills the linked sides or the one last focused. The `ring` layout draws the fields
+ * around a box, so margin and padding can be nested the way the page shows them.
+ */
+export function SidesEditor(props) {
+    const t = useT();
+    const { def, label, parts, effective, layer, layout } = props;
+    const units = unitsOf(def);
+    const currentOf = (part) => {
+        const entry = effective[pathOf(def, part)];
+        return entry === undefined ? undefined : String(entry.value);
+    };
+    const setHere = (part) => effective[pathOf(def, part)]?.source === layer;
+    const values = parts.map(currentOf);
+    const [linked, setLinked] = useState(() => values.every((value) => value === values[0]));
+    const [focused, setFocused] = useState(parts[0]);
+    const [chosenUnit, setChosenUnit] = useState(undefined);
+    const [errors, setErrors] = useState({});
+    // The unit the row shows: the one picked, else the unit of the first value that has one.
+    const inValues = values
+        .map((value) => (value === undefined ? undefined : NUMBER_UNIT.exec(value)?.[2]))
+        .find((unit) => unit !== undefined && units.includes(unit));
+    const unit = chosenUnit ?? inValues ?? units[0] ?? '';
+    const targets = (part) => (linked ? parts : [part]);
+    const write = (part, value) => props.apply(targets(part).map((target) => ({ part: target, value })));
+    const clear = (part) => {
+        const writes = targets(part)
+            .filter(setHere)
+            .map((target) => ({ part: target, value: undefined }));
+        if (writes.length > 0)
+            props.apply(writes);
+    };
+    const changeUnit = (next) => {
+        setChosenUnit(next);
+        const writes = [];
+        for (const part of parts) {
+            const match = setHere(part) ? NUMBER_UNIT.exec(currentOf(part) ?? '') : null;
+            if (match !== null)
+                writes.push({ part, value: `${match[1]}${next}` });
+        }
+        if (writes.length > 0)
+            props.apply(writes);
+    };
+    const reportError = (part, message) => setErrors((current) => (current[part] ?? '') === message ? current : { ...current, [part]: message });
+    const error = parts.map((part) => errors[part]).find((message) => (message ?? '') !== '');
+    const partLabel = (part) => def.shape === 'corners'
+        ? t(`style.corner.${part}`)
+        : t(`style.side.${part}`);
+    const extras = (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: linked ? 'link-2' : 'unlink-2', className: "bd-sides-link", label: `${label}: ${t(def.shape === 'corners' ? 'style.link.corners' : 'style.link.sides')}`, "aria-pressed": linked, disabled: props.disabled, onClick: () => setLinked(!linked) }), units.length > 0 ? (_jsx("select", { className: "bd-unit-select", "aria-label": `${t('style.unit')}: ${label}`, value: unit, disabled: props.disabled, onChange: (event) => changeUnit(event.target.value), children: units.map((entry) => (_jsx("option", { value: entry, children: entry }, entry))) })) : null, _jsx(TokenPicker, { def: def, theme: props.theme, label: label, current: currentOf(focused), disabled: props.disabled, onPick: (ref) => write(focused, ref) })] }));
+    const field = (part) => (_jsx(SideField, { def: def, part: part, label: `${label} ${partLabel(part)}`, effective: effective, layer: layer, theme: props.theme, disabled: props.disabled, unit: unit, onFocus: () => setFocused(part), onError: reportError, write: write, clear: clear }, part));
+    const errorLine = error === undefined ? null : (_jsx("p", { role: "alert", className: "bd-style-error", children: error }));
+    if (layout === 'ring') {
+        const [top, right, bottom, left] = parts;
+        return (_jsxs("div", { className: "bd-ring", "data-property": def.name, children: [props.renderHead(extras), _jsxs("div", { className: "bd-ring-grid", children: [_jsx("div", { className: "bd-ring-top", children: field(top) }), _jsx("div", { className: "bd-ring-left", children: field(left) }), _jsx("div", { className: "bd-ring-center", children: props.children ?? _jsx("span", { className: "bd-ring-core", children: t('style.box.content') }) }), _jsx("div", { className: "bd-ring-right", children: field(right) }), _jsx("div", { className: "bd-ring-bottom", children: field(bottom) })] }), errorLine] }));
+    }
+    return (_jsxs("div", { className: "bd-sides", "data-property": def.name, "data-shape": def.shape, children: [props.renderHead(extras), _jsx("div", { className: "bd-sides-grid", children: parts.map((part) => (_jsxs("div", { className: "bd-sides-cell", children: [field(part), _jsx("span", { className: "bd-sides-label", "aria-hidden": "true", children: partLabel(part) })] }, part))) }), errorLine] }));
+}

package/dist/panels/inspector/styles/style-inspector.d.ts

@@ -0,0 +1,15 @@
+import { type PageNode, type Theme } from '@next-buildr/core';
+export interface StyleInspectorProps {
+    readonly node: PageNode;
+    /** The breakpoint being edited: `'base'` (desktop, the default) or a breakpoint id of the theme. */
+    readonly breakpoint?: string;
+    readonly theme?: Theme;
+}
+/**
+ * The Style tab (docs/editor.md#the-style-inspector): the style groups the component allows, each
+ * property edited at the breakpoint being edited. Text is checked with the property's grammar and
+ * 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 declare function StyleInspector({ node, breakpoint, theme }: StyleInspectorProps): import("react").JSX.Element;
+//# sourceMappingURL=style-inspector.d.ts.map

package/dist/panels/inspector/styles/style-inspector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-inspector.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/style-inspector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,QAAQ,EAKb,KAAK,KAAK,EACX,MAAM,mBAAmB,CAAC;AA8B3B,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IACxB,oGAAoG;IACpG,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC;CACxB;AAyYD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,KAAoB,EAAE,EAAE,mBAAmB,+BAyC7F"}

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

@@ -0,0 +1,219 @@
+import { 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 { 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 { PAIRS, SEGMENTED } from './segments.js';
+import { SidesEditor } from './sides-editor.js';
+import { TokenPicker } from './token-picker.js';
+import { useStyleValue } from './use-style-value.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());
+/** The dot beside a property: set on this breakpoint, inherited from a wider one, or the default. */
+function SourceDot(props) {
+    const t = useT();
+    const text = props.origin === 'set'
+        ? t('style.origin.set')
+        : props.origin === 'inherited'
+            ? `${t('style.origin.inherited')} ${props.from ?? ''}`.trim()
+            : t('style.origin.default');
+    return (_jsx(Tooltip, { content: text, children: _jsx("span", { className: "bd-source-dot", "data-origin": props.origin, role: "img", "aria-label": text }) }));
+}
+/** One field for a single value (a whole property). */
+function ValueField(props) {
+    const t = useT();
+    const ownId = useId();
+    const id = props.inputId ?? ownId;
+    const { def, path } = props;
+    const field = useStyleValue({
+        def,
+        path,
+        effective: props.effective,
+        layer: props.layer,
+        theme: props.theme,
+        onSet: props.onSet,
+        onUnset: props.onUnset,
+    });
+    const { current, shown, error } = field;
+    const ariaLabel = props.hideLabel === true && props.inputId === undefined ? props.label : undefined;
+    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 !== ''
+                    ? 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] }));
+}
+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 parts = partsOf(def);
+    const layerObject = layerFor(layer);
+    const setOne = (value, part) => store.dispatch({
+        type: 'node.setStyle',
+        payload: {
+            id: nodeId,
+            layer: layerObject,
+            group: def.group,
+            property: def.name,
+            ...(part !== undefined ? { side: part } : {}),
+            value,
+        },
+    });
+    const unsetOne = (part) => store.dispatch({
+        type: 'node.unsetStyle',
+        payload: {
+            id: nodeId,
+            layer: layerObject,
+            group: def.group,
+            property: def.name,
+            ...(part !== undefined ? { side: part } : {}),
+        },
+    });
+    const report = (result) => props.onError(result.ok ? '' : (result.error?.message ?? ''));
+    /** Several sides at once (linked sides) are one undo step. */
+    const apply = (writes) => {
+        const run = (write) => write.value === undefined ? unsetOne(write.part) : setOne(write.value, write.part);
+        if (writes.length === 1)
+            return report(run(writes[0]));
+        let failure = '';
+        store.transaction(label, () => {
+            for (const write of writes) {
+                const result = run(write);
+                if (!result.ok)
+                    failure ||= result.error?.message ?? '';
+            }
+            return failure === '';
+        });
+        props.onError(failure);
+    };
+    const set = (value, part) => report(setOne(value, part));
+    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 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
+                    ? apply(parts
+                        .filter((part) => effective[pathOf(def, part)]?.source === layer)
+                        .map((part) => ({ part, value: undefined })))
+                    : unset() })) : null] }));
+    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] })) }));
+    }
+    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 }) }));
+    }
+    let title = _jsx("span", { className: "bd-field-label", children: label });
+    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})`
+            : '—';
+        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) => ({
+                        value: segment.keyword,
+                        label: segment.keyword,
+                        ...(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] }));
+        if (segments === undefined) {
+            title = (_jsx("label", { htmlFor: id, className: "bd-field-label", children: label }));
+        }
+    }
+    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() }));
+    }
+    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] }));
+}
+/**
+ * The Style tab (docs/editor.md#the-style-inspector): the style groups the component allows, each
+ * property edited at the breakpoint being edited. Text is checked with the property's grammar and
+ * 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 }) {
+    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 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 groups = STYLE_GROUPS.filter((group) => meta?.styles.groups.includes(group));
+    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 })] }));
+}
+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 byName = new Map(defs.map((def) => [def.name, def]));
+    const common = {
+        nodeId: props.nodeId,
+        effective: props.effective,
+        layer: props.layer,
+        theme: props.theme,
+        disabled: props.disabled,
+        onError: props.onError,
+    };
+    // 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');
+    const paired = new Map();
+    for (const [first, second] of PAIRS[props.group] ?? []) {
+        const a = byName.get(first);
+        const b = byName.get(second);
+        if (a !== undefined && b !== undefined)
+            paired.set(first, b);
+    }
+    const seconds = new Set([...paired.values()].map((def) => def.name));
+    const rows = [];
+    for (const def of 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));
+            continue;
+        }
+        const second = paired.get(def.name);
+        if (second !== undefined) {
+            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));
+    }
+    return (_jsxs("details", { className: "bd-style-group", open: used, "data-group": props.group, children: [_jsx("summary", { children: t(`style.group.${props.group}`) }), rows] }));
+}

package/dist/panels/inspector/styles/style-inspector.test.d.ts

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

package/dist/panels/inspector/styles/style-inspector.test.d.ts.map

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