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

package/dist/panels/inspector/scrub-label.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from 'react';
+import { useT } from '../../messages/index.js';
+import { useEditor } from '../../store/index.js';
+import { stepNumberText } from '../../ui/primitives.js';
+/** Clamp and quantize to the field's step, preserving its unit and rejecting non-finite input. */
+function scrubValue(text, delta, step, min, max) {
+    const match = /^(-?(?:\d+\.?\d*|\.\d+))([a-z%]*)$/.exec(text);
+    if (match === null || !Number.isFinite(step) || step <= 0)
+        return undefined;
+    const start = Number(match[1]);
+    const raw = start + delta;
+    if (!Number.isFinite(raw))
+        return undefined;
+    const lower = min !== undefined && Number.isFinite(min) ? min : -Infinity;
+    const upper = max !== undefined && Number.isFinite(max) ? max : Infinity;
+    const origin = Number.isFinite(lower) ? lower : 0;
+    const quantized = origin + Math.round((raw - origin) / step) * step;
+    const next = Math.min(upper, Math.max(lower, Number(quantized.toPrecision(12))));
+    return Number.isFinite(next) ? `${Object.is(next, -0) ? 0 : next}${match[2]}` : undefined;
+}
+/** Pointer scrubbing supplements keyboard controls and records the entire gesture as one undo step. */
+export function ScrubLabel(props) {
+    const t = useT();
+    const store = useEditor();
+    const drag = useRef(null);
+    const finish = useCallback(() => {
+        if (drag.current === null)
+            return;
+        drag.current = null;
+        store.history.commit();
+        // Only history metadata changes here; document writes always go through the caller's commands.
+        store.setState({
+            inTransaction: store.history.inTransaction,
+            canUndo: store.history.canUndo,
+            canRedo: store.history.canRedo,
+            cursorId: store.history.cursorId,
+            undoLabel: store.history.past.at(-1)?.label,
+            redoLabel: store.history.future.at(-1)?.label,
+        });
+    }, [store]);
+    useEffect(() => finish, [finish]);
+    return (_jsx("label", { htmlFor: props.htmlFor, className: "bd-field-label bd-scrub-label", title: props.disabled ? undefined : t('inspector.scrub'), "data-disabled": props.disabled, onPointerDown: (event) => {
+            if (props.disabled ||
+                store.getState().readOnly ||
+                event.button !== 0 ||
+                drag.current !== null)
+                return;
+            const value = stepNumberText(props.value, 0, props.unit ?? '');
+            if (value === undefined ||
+                scrubValue(value, 0, props.step ?? 1, props.min, props.max) === undefined)
+                return;
+            if (!store.history.begin(t('inspector.scrub')).ok)
+                return;
+            drag.current = { x: event.clientX, value, last: value };
+            store.setState({ inTransaction: true, canUndo: false, canRedo: false });
+            event.currentTarget.setPointerCapture(event.pointerId);
+        }, onPointerMove: (event) => {
+            const start = drag.current;
+            if (start === null || props.disabled)
+                return;
+            const delta = Math.trunc((event.clientX - start.x) / 3);
+            const step = props.step ?? 1;
+            const next = scrubValue(start.value, delta * step * (event.shiftKey ? 10 : event.altKey ? 0.1 : 1), step, props.min, props.max);
+            if (next !== undefined && next !== start.last) {
+                start.last = next;
+                props.onValueChange(next);
+            }
+        }, onPointerUp: (event) => {
+            finish();
+            if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+                event.currentTarget.releasePointerCapture(event.pointerId);
+            }
+        }, onPointerCancel: finish, onLostPointerCapture: finish, children: props.children }));
+}

package/dist/panels/inspector/scrub-label.test.d.ts

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

package/dist/panels/inspector/scrub-label.test.d.ts.map

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

package/dist/panels/inspector/scrub-label.test.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { createRegistryMeta, p } from '@next-buildr/core';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { createEditorStore, EditorStoreProvider, useEditorState } from '../../store/index.js';
+import { ScrubLabel } from './scrub-label.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let container;
+let root;
+beforeEach(() => {
+    container = document.createElement('div');
+    document.body.append(container);
+    root = createRoot(container);
+    Element.prototype.setPointerCapture ??= () => { };
+    Element.prototype.hasPointerCapture ??= () => false;
+});
+afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+});
+async function mount(step = 1, initial = '5') {
+    let time = 0;
+    const store = createEditorStore({
+        doc: {
+            schemaVersion: 1,
+            root: 'root',
+            nodes: { root: { id: 'root', type: 'test/number' } },
+            components: {},
+        },
+        registry: createRegistryMeta({
+            components: [
+                {
+                    type: 'test/number',
+                    version: 1,
+                    label: 'Number',
+                    category: 'content',
+                    contentCategories: ['flow'],
+                    props: { count: p.number({ default: 5 }) },
+                    styles: { groups: [] },
+                    runtime: 'shared',
+                },
+            ],
+        }),
+        validationDelayMs: null,
+        history: { clock: () => time },
+    });
+    const dispatch = vi.spyOn(store, 'dispatch');
+    function View() {
+        const value = useEditorState((state) => state.doc.nodes['root']?.props?.['count']);
+        return (_jsx(ScrubLabel, { htmlFor: "count", value: value?.kind === 'static' ? String(value.value) : initial, step: step, min: 0, max: 10, disabled: false, onValueChange: (text) => {
+                store.dispatch({
+                    type: 'node.setProp',
+                    payload: { id: 'root', prop: 'count', value: { kind: 'static', value: Number(text) } },
+                });
+            }, children: "Count" }));
+    }
+    await act(async () => root.render(_jsx(EditorStoreProvider, { store: store, children: _jsx(View, {}) })));
+    const pointer = async (type, clientX = 0, modifiers = {}) => {
+        time += 1000;
+        await act(async () => container
+            .querySelector('label')
+            ?.dispatchEvent(new MouseEvent(type, { bubbles: true, button: 0, clientX, ...modifiers })));
+    };
+    const value = () => store.getState().doc.nodes['root']?.props?.['count'];
+    return { store, dispatch, pointer, value };
+}
+describe('ScrubLabel', () => {
+    it('clamps both limits and respects the allowed step with Alt and Shift', async () => {
+        const { pointer, value, dispatch } = await mount();
+        await pointer('pointerdown');
+        await pointer('pointermove', 9, { altKey: true });
+        expect(dispatch).not.toHaveBeenCalled();
+        await pointer('pointermove', 30, { altKey: true });
+        expect(value()).toEqual({ kind: 'static', value: 6 });
+        await pointer('pointermove', 300);
+        expect(value()).toEqual({ kind: 'static', value: 10 });
+        await pointer('pointermove', -300, { shiftKey: true });
+        expect(value()).toEqual({ kind: 'static', value: 0 });
+        await pointer('pointerup');
+    });
+    it('rounds fractional steps without floating point artifacts and rejects NaN', async () => {
+        const { pointer, value } = await mount(0.1, '0.2');
+        await pointer('pointerdown');
+        await pointer('pointermove', 3);
+        expect(value()).toEqual({ kind: 'static', value: 0.3 });
+        await pointer('pointermove', 9, { altKey: true });
+        expect(value()).toEqual({ kind: 'static', value: 0.2 });
+        await pointer('pointerup');
+        const invalid = await mount(1, 'NaN');
+        await invalid.pointer('pointerdown');
+        await invalid.pointer('pointermove', 30);
+        expect(invalid.dispatch).not.toHaveBeenCalled();
+        expect(invalid.store.history.inTransaction).toBe(false);
+    });
+    it('groups a slow gesture into exactly one undo step and keeps separate gestures separate', async () => {
+        const { store, pointer, value, dispatch } = await mount();
+        const before = store.getState().doc;
+        await pointer('pointerdown');
+        await pointer('pointermove', 3);
+        await pointer('pointermove', 6);
+        await pointer('pointermove', 9);
+        await pointer('pointerup');
+        expect(dispatch).toHaveBeenCalledTimes(3);
+        expect(store.history.past).toHaveLength(1);
+        expect(store.getState()).toMatchObject({
+            inTransaction: false,
+            canUndo: true,
+            cursorId: store.history.cursorId,
+        });
+        await act(async () => {
+            store.undo();
+        });
+        expect(store.getState().doc).toEqual(before);
+        await act(async () => {
+            store.redo();
+        });
+        expect(value()).toEqual({ kind: 'static', value: 8 });
+        await pointer('pointerdown');
+        await pointer('pointermove', 3);
+        await pointer('pointercancel');
+        expect(store.history.past).toHaveLength(2);
+        expect(store.history.inTransaction).toBe(false);
+        await pointer('pointerdown');
+        await pointer('pointermove', -3);
+        await act(async () => root.render(null));
+        expect(store.history.inTransaction).toBe(false);
+        expect(store.history.past).toHaveLength(3);
+        expect(store.getState().inTransaction).toBe(false);
+    });
+});

package/dist/panels/inspector/styles/background-media.d.ts

@@ -0,0 +1,28 @@
+import type { ComponentMeta, PageNode } from '@next-buildr/core';
+/** The props that hold the image and the video of a background, and the poster of the video. */
+export declare const BACKGROUND_IMAGE = "backgroundImage";
+export declare const BACKGROUND_VIDEO = "backgroundVideo";
+export declare const BACKGROUND_POSTER = "backgroundPoster";
+/** What a component offers for a media background, found by the shape of its props. */
+export declare function backgroundMediaSupport(meta: ComponentMeta | undefined): {
+    readonly image: boolean;
+    readonly video: boolean;
+};
+/** The node carries a value for the prop (a link, a library file, a binding or a formula). */
+export declare function hasMedia(node: PageNode, name: string): boolean;
+/** The media a mode does not keep: switching to the mode removes these (one undo step). */
+export declare function mediaToClear(mode: string): readonly string[];
+/**
+ * The fields of the Image and Video background modes: the media itself (library picker or an
+ * external link behind the ADR-028 warning), the poster of a video, the overlay and how the media
+ * fills the box. They are the component's own props, written with the same commands as the
+ * Content tab does.
+ */
+export declare function BackgroundMediaFields(props: {
+    readonly node: PageNode;
+    readonly meta: ComponentMeta;
+    readonly mode: 'image' | 'video';
+    readonly disabled: boolean;
+    readonly onError: (message: string) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=background-media.d.ts.map

package/dist/panels/inspector/styles/background-media.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"background-media.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/background-media.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAkB,MAAM,mBAAmB,CAAC;AAMjF,gGAAgG;AAChG,eAAO,MAAM,gBAAgB,oBAAoB,CAAC;AAClD,eAAO,MAAM,gBAAgB,oBAAoB,CAAC;AAClD,eAAO,MAAM,iBAAiB,qBAAqB,CAAC;AAcpD,uFAAuF;AACvF,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS,GAAG;IACvE,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;CACzB,CAKA;AAED,8FAA8F;AAC9F,wBAAgB,QAAQ,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAM9D;AAED,2FAA2F;AAC3F,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,CAI5D;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE;IAC3C,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IACxB,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC;IAC7B,QAAQ,CAAC,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC;IACjC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C,+BAgEA"}

package/dist/panels/inspector/styles/background-media.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useT } from '../../../messages/index.js';
+import { useEditor } from '../../../store/index.js';
+import { Field } from '../props-panel.js';
+import { readProp } from '../value.js';
+/** The props that hold the image and the video of a background, and the poster of the video. */
+export const BACKGROUND_IMAGE = 'backgroundImage';
+export const BACKGROUND_VIDEO = 'backgroundVideo';
+export const BACKGROUND_POSTER = 'backgroundPoster';
+/** Settings shared by both kinds of media, in the order they are shown. */
+const SHARED = [
+    'backgroundOverlay',
+    'overlayTone',
+    'overlayOpacity',
+    'backgroundFit',
+    'backgroundPosition',
+    'backgroundAttachment',
+];
+const isMedia = (def) => def?.kind === 'media';
+/** What a component offers for a media background, found by the shape of its props. */
+export function backgroundMediaSupport(meta) {
+    return {
+        image: isMedia(meta?.props[BACKGROUND_IMAGE]),
+        video: isMedia(meta?.props[BACKGROUND_VIDEO]),
+    };
+}
+/** The node carries a value for the prop (a link, a library file, a binding or a formula). */
+export function hasMedia(node, name) {
+    if (node.props === undefined || !Object.hasOwn(node.props, name))
+        return false;
+    const value = node.props[name];
+    if (value === undefined)
+        return false;
+    if (value.kind !== 'static')
+        return true;
+    return value.value !== null && value.value !== undefined && value.value !== '';
+}
+/** The media a mode does not keep: switching to the mode removes these (one undo step). */
+export function mediaToClear(mode) {
+    if (mode === 'image')
+        return [BACKGROUND_VIDEO, BACKGROUND_POSTER];
+    if (mode === 'video')
+        return [BACKGROUND_IMAGE];
+    return [BACKGROUND_IMAGE, BACKGROUND_VIDEO, BACKGROUND_POSTER];
+}
+/**
+ * The fields of the Image and Video background modes: the media itself (library picker or an
+ * external link behind the ADR-028 warning), the poster of a video, the overlay and how the media
+ * fills the box. They are the component's own props, written with the same commands as the
+ * Content tab does.
+ */
+export function BackgroundMediaFields(props) {
+    const t = useT();
+    const store = useEditor();
+    const { node, meta, mode } = props;
+    const report = (result) => props.onError(result.ok ? '' : (result.error?.message ?? ''));
+    const names = [
+        ...(mode === 'image' ? [BACKGROUND_IMAGE] : [BACKGROUND_VIDEO, BACKGROUND_POSTER]),
+        ...SHARED,
+    ].filter((name) => meta.props[name] !== undefined);
+    return (_jsxs("div", { className: "bd-props-fields bd-bg-media", "data-mode": mode, children: [names.map((name) => {
+                const def = meta.props[name];
+                const raw = node.props !== undefined && Object.hasOwn(node.props, name)
+                    ? node.props[name]
+                    : undefined;
+                return (_jsx(Field, { name: name, def: def, reading: readProp(node, name, def, undefined, undefined), raw: raw, disabled: props.disabled, translating: false, nameFor: (text) => text, onChange: (prop, _def, value) => report(store.dispatch({
+                        type: 'node.setProp',
+                        payload: { id: node.id, prop, value: { kind: 'static', value } },
+                    })), onReset: (prop) => report(store.dispatch({ type: 'node.unsetProp', payload: { id: node.id, prop } })), onSetValue: (prop, _def, value) => report(store.dispatch({ type: 'node.setProp', payload: { id: node.id, prop, value } })), onFixed: (prop, fieldDef) => report(store.dispatch({
+                        type: 'node.setProp',
+                        payload: {
+                            id: node.id,
+                            prop,
+                            value: { kind: 'static', value: fieldDef.default },
+                        },
+                    })) }, name));
+            }), _jsx("p", { className: "bd-hint", children: t('style.media.switchHint') })] }));
+}

package/dist/panels/inspector/styles/box-model.d.ts

@@ -1,20 +1,17 @@
-import { BOX_SIDES, type EffectiveStyles, type StylePropertyDef } from '@next-buildr/core';
-type Side = (typeof BOX_SIDES)[number];
-export interface BoxModelProps {
-    readonly def: StylePropertyDef;
-    /** The visible name of the property (`Margin`). */
-    readonly label: string;
-    readonly effective: EffectiveStyles;
-    readonly layer: string;
-    readonly disabled: boolean;
-    /** Draws the edit field of the chosen side(s); it writes to every side in `sides`. */
-    readonly renderEditor: (sides: readonly Side[]) => React.ReactNode;
+import { type ReactNode } from 'react';
+/** Where the bars of the two boxes (key colour, label, unit, link) are drawn, above the diagram. */
+export interface BoxBars {
+    readonly margin: HTMLElement | null;
+    readonly padding: HTMLElement | null;
 }
+/** Present inside a `BoxModel`; the ring editors portal their header into the matching slot. */
+export declare const BoxBarsContext: import("react").Context<BoxBars | undefined>;
 /**
- * The box-model widget for margin and padding: the four sides around a box, each showing its
- * value. Clicking a side chooses it for editing; Alt-click chooses both sides of its axis, and the
- * one field below then writes to both.
+ * The frame of the margin-and-padding editor: a bar for each box (key colour, name, unit, link
+ * toggle), then the nested boxes with the value inputs, then the hint. It owns no value; the ring
+ * editors it wraps write through the same commands as any other style field.
  */
-export declare function BoxModel({ def, label, effective, layer, disabled, renderEditor }: BoxModelProps): import("react").JSX.Element;
-export {};
+export declare function BoxModel({ children }: {
+    readonly children: ReactNode;
+}): import("react").JSX.Element;
 //# sourceMappingURL=box-model.d.ts.map

package/dist/panels/inspector/styles/box-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"box-model.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/box-model.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,eAAe,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAI3F,KAAK,IAAI,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAgBvC,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,GAAG,EAAE,gBAAgB,CAAC;IAC/B,mDAAmD;IACnD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,SAAS,EAAE,eAAe,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,sFAAsF;IACtF,QAAQ,CAAC,YAAY,EAAE,CAAC,KAAK,EAAE,SAAS,IAAI,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC;CACpE;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,aAAa,+BAoC/F"}
+{"version":3,"file":"box-model.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/box-model.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAGhE,oGAAoG;AACpG,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IACpC,QAAQ,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;CACtC;AAED,gGAAgG;AAChG,eAAO,MAAM,cAAc,8CAAgD,CAAC;AAE5E;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BActE"}

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

@@ -1,31 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BOX_SIDES } from '@next-buildr/core';
-import { useState } from 'react';
+import { createContext, useState } from 'react';
 import { useT } from '../../../messages/index.js';
-const OPPOSITE = {
-    top: 'bottom',
-    bottom: 'top',
-    left: 'right',
-    right: 'left',
-};
-const shortOf = (value) => {
-    if (value === undefined)
-        return '–';
-    const text = String(value);
-    const token = /^\$[A-Za-z]+\.(.+)$/.exec(text);
-    return token?.[1] ?? text.replace(/px$/, '');
-};
+/** Present inside a `BoxModel`; the ring editors portal their header into the matching slot. */
+export const BoxBarsContext = createContext(undefined);
 /**
- * The box-model widget for margin and padding: the four sides around a box, each showing its
- * value. Clicking a side chooses it for editing; Alt-click chooses both sides of its axis, and the
- * one field below then writes to both.
+ * The frame of the margin-and-padding editor: a bar for each box (key colour, name, unit, link
+ * toggle), then the nested boxes with the value inputs, then the hint. It owns no value; the ring
+ * editors it wraps write through the same commands as any other style field.
  */
-export function BoxModel({ def, label, effective, layer, disabled, renderEditor }) {
+export function BoxModel({ children }) {
     const t = useT();
-    const [sides, setSides] = useState(['top']);
-    const choose = (side, both) => setSides(both ? [side, OPPOSITE[side]].sort() : [side]);
-    return (_jsxs("div", { className: "bd-box-model", "data-property": def.name, children: [_jsxs("div", { className: "bd-box-diagram", "data-kind": def.name, children: [BOX_SIDES.map((side) => {
-                        const current = effective[`${def.group}.${def.name}.${side}`];
-                        return (_jsx("button", { type: "button", className: "bd-box-side", "data-side": side, "data-source": current === undefined ? 'none' : current.source === layer ? 'set' : 'inherited', "aria-pressed": sides.includes(side), disabled: disabled, "aria-label": `${label} ${t(`style.side.${side}`)}`, onClick: (event) => choose(side, event.altKey), children: shortOf(current?.value) }, side));
-                    }), _jsx("span", { className: "bd-box-inner", "aria-hidden": "true" })] }), _jsx("p", { className: "bd-field-hint", children: t('style.box.hint') }), _jsx("div", { className: "bd-box-editor", children: renderEditor(sides) }, sides.join())] }));
+    const [margin, setMargin] = useState(null);
+    const [padding, setPadding] = useState(null);
+    return (_jsx(BoxBarsContext.Provider, { value: { margin, padding }, children: _jsxs("fieldset", { className: "bd-boxmodel", "aria-label": t('styleField.spacing.title'), children: [_jsx("div", { className: "bd-boxbar", "data-kind": "margin", ref: setMargin }), _jsx("div", { className: "bd-boxbar", "data-kind": "padding", ref: setPadding }), children, _jsx("p", { className: "bd-hint", children: t('styleField.spacing.hint') })] }) }));
 }

package/dist/panels/inspector/styles/color-input.d.ts

@@ -0,0 +1,3 @@
+import { type ColorInputProps } from '../../../ui/index.ts';
+export declare function StyleColorInput({ color, label, disabled, onColorChange, palette, }: ColorInputProps): import("react").JSX.Element;
+//# sourceMappingURL=color-input.d.ts.map

package/dist/panels/inspector/styles/color-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-input.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/color-input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,eAAe,EAKrB,MAAM,sBAAsB,CAAC;AAmB9B,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,aAAa,EACb,OAAY,GACb,EAAE,eAAe,+BAuHjB"}

package/dist/panels/inspector/styles/color-input.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { useT } from '../../../messages/index.js';
+import { Button, ColorSwatch, hexOf, Input, Popover, } from '../../../ui/index.js';
+/** The hue (0-360) of a colour written as `hsl(...)` or `#rrggbb`; 0 for anything else. */
+function hueOf(color) {
+    const hsl = /^hsl\(\s*(-?\d+(?:\.\d+)?)/i.exec(color?.trim() ?? '');
+    if (hsl?.[1] !== undefined)
+        return Math.round(((Number(hsl[1]) % 360) + 360) % 360);
+    const hex = hexOf(color);
+    if (hex === undefined)
+        return 0;
+    const [r = 0, g = 0, b = 0] = [1, 3, 5].map((i) => Number.parseInt(hex.slice(i, i + 2), 16) / 255);
+    const max = Math.max(r, g, b);
+    const delta = max - Math.min(r, g, b);
+    if (delta === 0)
+        return 0;
+    const sector = max === r ? ((g - b) / delta + 6) % 6 : max === g ? (b - r) / delta + 2 : (r - g) / delta + 4;
+    return Math.round(sector * 60) % 360;
+}
+export function StyleColorInput({ color, label, disabled, onColorChange, palette = [], }) {
+    const t = useT();
+    const id = useId();
+    const [open, setOpen] = useState(false);
+    const [draft, setDraft] = useState();
+    // The slider keeps its own position while it is dragged (a grey has no hue to read back).
+    const [hue, setHue] = useState();
+    const text = draft ?? color ?? '';
+    const expanded = color !== undefined && /^#[0-9a-f]{3,4}$/i.test(color)
+        ? `#${[...color.slice(1)].map((c) => c + c).join('')}`
+        : color;
+    const hex = hexOf(expanded?.slice(0, 7)) ?? '#000000';
+    const alpha = expanded !== undefined && /^#[0-9a-f]{8}$/i.test(expanded)
+        ? Math.round((Number.parseInt(expanded.slice(7), 16) / 255) * 100)
+        : 100;
+    const change = (value) => {
+        if (disabled === true)
+            return;
+        if (!value.startsWith('hsl('))
+            setHue(undefined);
+        onColorChange(value);
+    };
+    const choose = (value) => {
+        setDraft(undefined);
+        const chosenHex = hexOf(value);
+        const suffix = expanded !== undefined && /^#[0-9a-f]{8}$/i.test(expanded) ? expanded.slice(7) : '';
+        change(chosenHex !== undefined && suffix !== '' ? `${chosenHex}${suffix}` : value);
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, label: label, contentClassName: "bd-color-popover", trigger: _jsx(Button, { className: "bd-color-trigger", "aria-label": label, disabled: disabled === true, children: _jsx(ColorSwatch, { color: color }) }), children: [_jsx("h4", { children: t('style.palette.page') }), _jsx("fieldset", { className: "bd-color-palette", "aria-label": t('style.tokens'), children: palette.map((entry) => (_jsx(Button, { className: "bd-palette-color", "aria-label": `${entry.label}: ${entry.color}`, title: `${entry.label}: ${entry.color}`, "aria-pressed": color === entry.color, disabled: disabled === true, onClick: () => {
+                        if (entry.value !== undefined) {
+                            setDraft(undefined);
+                            change(entry.value);
+                        }
+                        else
+                            choose(entry.color);
+                    }, children: _jsx(ColorSwatch, { color: entry.color }) }, entry.label))) }), _jsx("h4", { children: t('style.palette.custom') }), _jsx("input", { type: "range", className: "bd-style-hue", min: "0", max: "360", value: hue ?? hueOf(expanded), "aria-label": t('style.palette.hue'), disabled: disabled, onChange: (event) => {
+                    // One undo step per drag: each write is the same `node.setStyle` property, which coalesces.
+                    const next = Number(event.target.value);
+                    setHue(next);
+                    choose(`hsl(${next} 100% 50%)`);
+                } }), _jsxs("label", { className: "bd-color-hex", htmlFor: `${id}-hex`, children: [_jsx("span", { children: t('style.color.hex') }), _jsx(Input, { id: `${id}-hex`, value: text, disabled: disabled === true, spellCheck: false, "aria-invalid": draft !== undefined && !/^#[0-9a-f]{3,4}$|^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(text), onChange: (event) => {
+                            const value = event.target.value;
+                            setDraft(value);
+                            if (/^#[0-9a-f]{3,4}$|^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(value))
+                                change(value);
+                        }, onBlur: () => setDraft(undefined) })] }), _jsxs("label", { className: "bd-color-opacity", children: [_jsx("span", { children: t('style.color.alpha') }), _jsxs("output", { children: [alpha, "%"] }), _jsx("input", { type: "range", className: "bd-range", min: "0", max: "100", value: alpha, disabled: disabled === true || hexOf(expanded?.slice(0, 7)) === undefined, onChange: (event) => {
+                            setDraft(undefined);
+                            change(`${hex}${Math.round((Number(event.target.value) / 100) * 255)
+                                .toString(16)
+                                .padStart(2, '0')}`);
+                        } })] }), _jsx(Button, { onClick: () => setOpen(false), children: t('style.palette.done') })] }));
+}

package/dist/panels/inspector/styles/gradient-fields.d.ts

@@ -0,0 +1,9 @@
+import { type Theme } from '@next-buildr/core';
+/** The template's two-stop editor. More complex existing gradients retain their text editor. */
+export declare function GradientFields(props: {
+    readonly value: string;
+    readonly theme: Theme;
+    readonly disabled: boolean;
+    readonly onChange: (value: string) => void;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=gradient-fields.d.ts.map

package/dist/panels/inspector/styles/gradient-fields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradient-fields.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/gradient-fields.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAmB,KAAK,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAUhE,gGAAgG;AAChG,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,sCAoHA"}

package/dist/panels/inspector/styles/gradient-fields.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const STYLE_POSITIONS = [
+    'center',
+    'top',
+    'bottom',
+    'left',
+    'right',
+    'top left',
+    'top right',
+    'bottom left',
+    'bottom right',
+];
+import { resolveTokenRef } from '@next-buildr/core';
+import { useT } from '../../../messages/index.js';
+import { StyleColorInput as ColorInput } from './color-input.js';
+import { NumberUnitInput } from './number-input.js';
+import { optionLabel } from './option-label.js';
+import { RangeSlider } from './widgets.js';
+const SIMPLE_GRADIENT = /^linear-gradient\((-?\d+(?:\.\d+)?deg),\s*(#[0-9a-f]{3,8}|\$color\.[a-z0-9-]+)(?: 0%)?,\s*(#[0-9a-f]{3,8}|\$color\.[a-z0-9-]+)(?: 100%)?\)$/i;
+/** The template's two-stop editor. More complex existing gradients retain their text editor. */
+export function GradientFields(props) {
+    const t = useT();
+    const radial = /^radial-gradient\((circle|ellipse) at ([a-z ]+),\s*(#[0-9a-f]{3,8}|\$color\.[a-z0-9-]+)(?: 0%)?,\s*(#[0-9a-f]{3,8}|\$color\.[a-z0-9-]+)(?: 100%)?\)$/i.exec(props.value);
+    const match = SIMPLE_GRADIENT.exec(props.value);
+    const names = Object.keys(props.theme.tokens.color);
+    if (match === null && radial === null && props.value !== '' && props.value !== 'none')
+        return null;
+    if (names.length === 0)
+        return null;
+    const angle = match?.[1]?.slice(0, -3) ?? '180';
+    const start = radial?.[3] ?? match?.[2] ?? `$color.${names[0]}`;
+    const end = radial?.[4] ?? match?.[3] ?? `$color.${names[1] ?? names[0]}`;
+    const resolve = (value) => {
+        if (!value.startsWith('$'))
+            return value;
+        const token = resolveTokenRef(props.theme, value);
+        return token.ok ? token.value.value : undefined;
+    };
+    const palette = Object.entries(props.theme.tokens.color).map(([label, color]) => ({
+        label,
+        color,
+        value: `$color.${label}`,
+    }));
+    const write = (a, b, degrees) => props.onChange(radial
+        ? `radial-gradient(${radial[1]} at ${radial[2]}, ${a}, ${b})`
+        : `linear-gradient(${degrees}deg, ${a}, ${b})`);
+    return (_jsxs("div", { className: "bd-gradient-fields", children: [_jsxs("label", { children: [t('styleField.bg.gradientKind'), _jsxs("select", { className: "bd-input", disabled: props.disabled, value: radial ? 'radial' : 'linear', onChange: (event) => props.onChange(event.target.value === 'radial'
+                            ? `radial-gradient(ellipse at center, ${start}, ${end})`
+                            : `linear-gradient(${angle}deg, ${start}, ${end})`), children: [_jsx("option", { value: "linear", children: t('styleField.bg.linear') }), _jsx("option", { value: "radial", children: t('styleField.bg.radial') })] })] }), radial ? (_jsxs("label", { children: [t('styleField.bg.position'), _jsx("select", { className: "bd-input", value: radial[2], disabled: props.disabled, onChange: (event) => props.onChange(`radial-gradient(${radial[1]} at ${event.target.value}, ${start}, ${end})`), children: STYLE_POSITIONS.map((position) => (_jsx("option", { value: position, children: optionLabel(position, t) }, position))) })] })) : null, _jsxs("div", { className: "bd-gradient-stop", children: [_jsx("span", { children: t('style.gradient.start') }), _jsx(ColorInput, { label: t('style.gradient.start'), color: resolve(start), palette: palette, disabled: props.disabled, onColorChange: (color) => write(color, end, angle) })] }), _jsxs("div", { className: "bd-gradient-stop", children: [_jsx("span", { children: t('style.gradient.end') }), _jsx(ColorInput, { label: t('style.gradient.end'), color: resolve(end), palette: palette, disabled: props.disabled, onColorChange: (color) => write(start, color, angle) })] }), !radial ? (_jsxs("div", { className: "bd-gradient-angle", children: [_jsx("span", { children: t('style.gradient.angle') }), _jsx(NumberUnitInput, { value: angle, units: [], unitLabel: t('style.unit'), ariaLabel: t('style.gradient.angle'), disabled: props.disabled, onValueChange: (value) => write(start, end, value) }), _jsx(RangeSlider, { label: `${t('style.gradient.angle')}: ${t('style.slider')}`, min: -360, max: 360, step: 1, value: Number(angle) || 0, unit: "\u00B0", disabled: props.disabled, onChange: (value) => write(start, end, value) })] })) : null] }));
+}

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

@@ -1,5 +1,7 @@
 export type { StyleInput } from './model.ts';
 export { checkStyleInput, layerFor } from './model.ts';
+export { StyleSectionsProvider } from './sections-context.tsx';
+export { SectionsToggle } from './sections-toggle.tsx';
 export type { StyleInspectorProps } from './style-inspector.tsx';
 export { StyleInspector } from './style-inspector.tsx';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACvD,YAAY,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,YAAY,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC"}

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

@@ -1,2 +1,4 @@
 export { checkStyleInput, layerFor } from './model.js';
+export { StyleSectionsProvider } from './sections-context.js';
+export { SectionsToggle } from './sections-toggle.js';
 export { StyleInspector } from './style-inspector.js';