@next-buildr/editor 0.0.0-stage → 2.0.0

package/dist/panels/inspector/inspector.test.js

@@ -0,0 +1,328 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { createRegistryMeta, createSeededIdGenerator, p, s, toManifest, } from '@next-buildr/core';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { axe } from 'vitest-axe';
+import * as matchers from 'vitest-axe/matchers';
+import { ManifestProvider } from '../../app/manifest.js';
+import { MessagesProvider } from '../../messages/index.js';
+import { createEditorStore, EditorStoreProvider } from '../../store/index.js';
+import { parseNumber } from './controls/index.js';
+import { Inspector } from './inspector.js';
+import { isAdvancedProp, propLabel } from './props-panel.js';
+import { readProp } from './value.js';
+expect.extend(matchers);
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const widget = {
+    type: 'buildr/widget',
+    version: 1,
+    label: 'Widget',
+    category: 'content',
+    props: {
+        title: p.text({ label: 'Title', maxLength: 10, default: 'Hello', group: 'content' }),
+        body: p.textarea({ default: '' }),
+        count: p.number({ default: 5, min: 0, max: 10 }),
+        visible: p.boolean({ default: true }),
+        size: p.select({ options: ['sm', 'md', 'lg'], default: 'md' }),
+        href: p.link({}),
+        symbol: p.icon({}),
+        ariaLabel: p.text({ group: 'accessibility' }),
+        fixed: p.number({ default: 1, localizable: false }),
+    },
+    contentCategories: ['flow'],
+    styles: { groups: [] },
+    runtime: 'shared',
+    slots: { default: {} },
+};
+const page = {
+    ...widget,
+    type: 'buildr/page',
+    label: 'Page',
+    props: {},
+    capabilities: { root: true },
+};
+const registry = createRegistryMeta({ components: [page, widget] });
+const manifest = toManifest(registry);
+const fixture = () => ({
+    schemaVersion: 1,
+    root: 'root',
+    nodes: {
+        root: { id: 'root', type: 'buildr/page', slots: { default: ['widget0001', 'locked0001'] } },
+        widget0001: { id: 'widget0001', type: 'buildr/widget' },
+        locked0001: {
+            id: 'locked0001',
+            type: 'buildr/widget',
+            lock: { content: true },
+            props: { title: s('Locked') },
+        },
+    },
+    components: {},
+});
+let container;
+let root;
+beforeEach(() => {
+    container = document.createElement('div');
+    document.body.append(container);
+    root = createRoot(container);
+    Element.prototype.scrollIntoView ??= () => { };
+    Element.prototype.hasPointerCapture ??= () => false;
+    Element.prototype.setPointerCapture ??= () => { };
+    Element.prototype.releasePointerCapture ??= () => { };
+});
+afterEach(() => {
+    act(() => root.unmount());
+    document.body.innerHTML = '';
+});
+async function mount(select, extra = {}, doc = fixture()) {
+    const store = createEditorStore({
+        doc,
+        registry,
+        generateId: createSeededIdGenerator(3),
+        validationDelayMs: null,
+    });
+    if (select !== null)
+        store.select(select);
+    await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(ManifestProvider, { manifest: manifest, children: _jsx(EditorStoreProvider, { store: store, children: _jsx(Inspector, { ...extra }) }) }) })));
+    return store;
+}
+const field = (prop) => container.querySelector(`[data-prop=${prop}]`);
+const input = (prop) => field(prop).querySelector('input, textarea, button[role=combobox]');
+const typeInto = (element, value) => act(async () => {
+    const proto = element instanceof HTMLTextAreaElement
+        ? HTMLTextAreaElement.prototype
+        : HTMLInputElement.prototype;
+    Object.getOwnPropertyDescriptor(proto, 'value')?.set?.call(element, value);
+    element.dispatchEvent(new Event('input', { bubbles: true }));
+});
+const propOf = (store, id, prop) => store.getState().doc.nodes[id]?.props?.[prop];
+const openTab = (name) => act(async () => {
+    const tab = [...container.querySelectorAll('[role=tab]')].find((t) => t.textContent === name);
+    tab?.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, button: 0 }));
+});
+const notice = () => container.querySelector('[role=status]')?.textContent;
+describe('helpers', () => {
+    it('labels a prop by its label, else by its name in words', () => {
+        expect(propLabel('title', widget.props['title'])).toBe('Title');
+        expect(propLabel('ariaLabel', widget.props['ariaLabel'])).toBe('Aria label');
+        expect(isAdvancedProp(widget.props['ariaLabel'])).toBe(true);
+        expect(isAdvancedProp(widget.props['title'])).toBe(false);
+    });
+    it('parses only numbers a prop accepts', () => {
+        const def = widget.props['count'];
+        expect(parseNumber('7', def)).toBe(7);
+        expect(parseNumber('', def)).toBeUndefined();
+        expect(parseNumber('abc', def)).toBeUndefined();
+        expect(parseNumber('11', def)).toBeUndefined();
+        expect(parseNumber('-1', def)).toBeUndefined();
+    });
+    it('reads static, translated, and bound values', () => {
+        const def = widget.props['title'];
+        const node = {
+            id: 'x',
+            type: 'buildr/widget',
+            props: { title: { kind: 'static', value: 'Hi', l10n: { pl: 'Cześć' } } },
+        };
+        expect(readProp(node, 'title', def, 'en', 'en')).toMatchObject({ value: 'Hi', isSet: true });
+        expect(readProp(node, 'title', def, 'pl', 'en')).toMatchObject({ value: 'Cześć', isSet: true });
+        expect(readProp(node, 'title', def, 'de', 'en')).toMatchObject({ value: 'Hi', isSet: false });
+        expect(readProp({ ...node, props: {} }, 'title', def, 'en', 'en')).toMatchObject({
+            value: 'Hello',
+            isSet: false,
+        });
+        const bound = { ...node, props: { title: { kind: 'binding', path: 'post.title' } } };
+        expect(readProp(bound, 'title', def, 'en', 'en')).toMatchObject({
+            mode: 'binding',
+            source: 'post.title',
+        });
+    });
+});
+describe('Inspector', () => {
+    it('asks for a selection when there is none', async () => {
+        await mount(null);
+        expect(container.textContent).toContain('Select an element to edit it.');
+    });
+    it('collapses a prop group and remembers it per component type', async () => {
+        window.localStorage.clear();
+        await mount('widget0001');
+        const toggle = () => container.querySelector('.bd-props-group[data-group=content] .bd-props-toggle');
+        expect(toggle().getAttribute('aria-expanded')).toBe('true');
+        await act(async () => toggle().click());
+        expect(toggle().getAttribute('aria-expanded')).toBe('false');
+        expect(window.localStorage.getItem('buildr.editor.inspector.groups.buildr/widget')).toBe('["content"]');
+        await act(async () => root.unmount());
+        root = createRoot(container);
+        await mount('widget0001');
+        expect(toggle().getAttribute('aria-expanded')).toBe('false');
+        window.localStorage.clear();
+    });
+    it('duplicates and deletes from the header with the same commands as the layers', async () => {
+        const store = await mount('widget0001');
+        const named = (label) => container.querySelector(`button[aria-label="${label}"]`);
+        await act(async () => named('Duplicate element').click());
+        expect(Object.keys(store.getState().doc.nodes)).toHaveLength(4);
+        await act(async () => named('Delete element').click());
+        expect(Object.keys(store.getState().doc.nodes)).toHaveLength(3);
+    });
+    it('gives every control an accessible name and passes axe', async () => {
+        await mount('widget0001');
+        expect(container.querySelector('h3')?.textContent).toBe('Widget');
+        expect(input('title').getAttribute('aria-label')).toBe('Title');
+        expect(container.querySelector('label[for]')?.textContent).toBeTruthy();
+        // the hint is what the control is described by
+        const described = input('title').getAttribute('aria-describedby');
+        expect(container.querySelector(`[id="${described}"]`)?.textContent).toContain('Maximum length: 10');
+        expect(await axe(container)).toHaveNoViolations();
+    });
+    it('writes text with node.setProp, and typing is one undo step', async () => {
+        const store = await mount('widget0001');
+        expect(input('title').value).toBe('Hello');
+        await typeInto(input('title'), 'Hi');
+        await typeInto(input('title'), 'Hi t');
+        expect(propOf(store, 'widget0001', 'title')).toEqual({ kind: 'static', value: 'Hi t' });
+        expect(store.getState().undoLabel).toBe('node.setProp');
+        await act(async () => store.undo());
+        expect(propOf(store, 'widget0001', 'title')).toBeUndefined();
+        expect(store.getState().canUndo).toBe(false);
+    });
+    it('writes a textarea, a link and an icon', async () => {
+        const store = await mount('widget0001');
+        await typeInto(input('body'), 'Line');
+        await typeInto(input('href'), '/about');
+        await typeInto(input('symbol'), 'arrow-right');
+        expect(propOf(store, 'widget0001', 'body')).toEqual({ kind: 'static', value: 'Line' });
+        expect(propOf(store, 'widget0001', 'href')).toEqual({ kind: 'static', value: '/about' });
+        expect(propOf(store, 'widget0001', 'symbol')).toEqual({ kind: 'static', value: 'arrow-right' });
+    });
+    it('writes a number only when it is valid, and shows the stored one again on blur', async () => {
+        const store = await mount('widget0001');
+        await typeInto(input('count'), '8');
+        expect(propOf(store, 'widget0001', 'count')).toEqual({ kind: 'static', value: 8 });
+        await typeInto(input('count'), '99');
+        await typeInto(input('count'), '');
+        expect(propOf(store, 'widget0001', 'count')).toEqual({ kind: 'static', value: 8 });
+        await act(async () => {
+            input('count').dispatchEvent(new FocusEvent('focusout', { bubbles: true }));
+        });
+        expect(input('count').value).toBe('8');
+    });
+    it('toggles a boolean', async () => {
+        const store = await mount('widget0001');
+        expect(input('visible').checked).toBe(true);
+        await act(async () => input('visible').click());
+        expect(propOf(store, 'widget0001', 'visible')).toEqual({ kind: 'static', value: false });
+    });
+    it('chooses from a select', async () => {
+        const store = await mount('widget0001');
+        const trigger = input('size');
+        expect(trigger.textContent).toContain('md');
+        await act(async () => {
+            trigger.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, button: 0, pointerType: 'mouse' }));
+        });
+        const option = [...document.querySelectorAll('[role=option]')].find((o) => o.textContent === 'lg');
+        await act(async () => {
+            option?.dispatchEvent(new PointerEvent('pointerup', { bubbles: true, pointerType: 'mouse' }));
+            option?.click();
+        });
+        expect(propOf(store, 'widget0001', 'size')).toEqual({ kind: 'static', value: 'lg' });
+    });
+    it('resets a value with node.unsetProp, and offers reset only when one is set', async () => {
+        const store = await mount('widget0001');
+        expect(field('title').querySelector('.bd-field-reset')).toBeNull();
+        await typeInto(input('title'), 'Hi');
+        const reset = field('title').querySelector('.bd-field-reset');
+        expect(reset.getAttribute('aria-label')).toBe('Reset: Title');
+        await act(async () => reset.click());
+        expect(propOf(store, 'widget0001', 'title')).toBeUndefined();
+        expect(input('title').value).toBe('Hello');
+        expect(field('title').querySelector('.bd-field-reset')).toBeNull();
+    });
+    it('shows a bound prop in the data mode, with its path', async () => {
+        const doc = fixture();
+        const bound = {
+            ...doc,
+            nodes: {
+                ...doc.nodes,
+                widget0001: {
+                    id: 'widget0001',
+                    type: 'buildr/widget',
+                    props: {
+                        title: { kind: 'binding', path: 'post.title' },
+                        href: { kind: 'expression', expr: 'post.slug' },
+                    },
+                },
+            },
+        };
+        await mount('widget0001', {}, bound);
+        expect(field('title').querySelector('input').value).toBe('post.title');
+        expect(field('title').querySelector('[aria-pressed=true]')?.textContent).toBe('Data');
+        expect(field('href').querySelector('[aria-pressed=true]')?.textContent).toBe('Formula');
+        expect(field('href').querySelector('textarea').value).toBe('post.slug');
+    });
+    it('writes a translation to the language being edited, only for translatable props', async () => {
+        const store = await mount('widget0001', { locale: 'pl', defaultLocale: 'en' });
+        await typeInto(input('title'), 'Cześć');
+        expect(propOf(store, 'widget0001', 'title')).toEqual({
+            kind: 'static',
+            value: 'Hello',
+            l10n: { pl: 'Cześć' },
+        });
+        await typeInto(input('fixed'), '4');
+        expect(propOf(store, 'widget0001', 'fixed')).toEqual({ kind: 'static', value: 4 });
+        // reset removes the translation, not the value
+        await act(async () => field('title').querySelector('.bd-field-reset').click());
+        expect(propOf(store, 'widget0001', 'title')).toEqual({ kind: 'static', value: 'Hello' });
+    });
+    it('disables everything on locked content', async () => {
+        const store = await mount('locked0001');
+        expect(container.textContent).toContain('This content is locked.');
+        expect(input('title').disabled).toBe(true);
+        expect(input('visible').disabled).toBe(true);
+        expect(store.getState().canUndo).toBe(false);
+    });
+    it('puts accessibility props, the name and the anchor on the Advanced tab', async () => {
+        const store = await mount('widget0001');
+        expect(field('ariaLabel')).toBeNull();
+        await openTab('Advanced');
+        await typeInto(input('ariaLabel'), 'Close');
+        expect(propOf(store, 'widget0001', 'ariaLabel')).toEqual({ kind: 'static', value: 'Close' });
+        const name = container.querySelector('[data-attr=name] input');
+        await typeInto(name, 'Header');
+        expect(store.getState().doc.nodes['widget0001']?.name).toBe('Header');
+        await typeInto(name, '');
+        expect(store.getState().doc.nodes['widget0001']?.name).toBeUndefined();
+        const anchor = container.querySelector('[data-attr=anchor] input');
+        await typeInto(anchor, 'Bad Anchor');
+        expect(store.getState().doc.nodes['widget0001']?.anchor).toBeUndefined();
+        expect(notice()).not.toBe('');
+        expect(anchor.value).toBe('Bad Anchor');
+        await typeInto(anchor, 'intro');
+        expect(store.getState().doc.nodes['widget0001']?.anchor).toBe('intro');
+        expect(notice()).toBe('');
+    });
+    it('removes a display condition', async () => {
+        const doc = fixture();
+        const conditional = {
+            ...doc,
+            nodes: {
+                ...doc.nodes,
+                widget0001: {
+                    id: 'widget0001',
+                    type: 'buildr/widget',
+                    visibleIf: { kind: 'binding', path: 'user.loggedIn' },
+                },
+            },
+        };
+        const store = await mount('widget0001', {}, conditional);
+        await openTab('Advanced');
+        const remove = [...container.querySelectorAll('button')].find((b) => b.textContent === 'Remove the condition');
+        await act(async () => remove?.click());
+        expect(store.getState().doc.nodes['widget0001']?.visibleIf).toBeUndefined();
+    });
+    it('leaves the Style tab to the style inspector', async () => {
+        await mount('widget0001', { renderStyle: (node) => _jsxs("p", { children: ["styles of ", node.id] }) });
+        await openTab('Style');
+        expect(container.textContent).toContain('styles of widget0001');
+    });
+});

package/dist/panels/inspector/props-panel.d.ts

@@ -0,0 +1,26 @@
+import type { ComponentMeta, PageNode, PropDef, Value } from '@next-buildr/core';
+import { propLabel } from './controls/index.ts';
+export declare const isAdvancedProp: (def: PropDef) => boolean;
+export { propLabel };
+export interface PropsPanelProps {
+    readonly node: PageNode;
+    readonly meta: ComponentMeta;
+    /** Which props to show: the content ones or the advanced ones. */
+    readonly scope: 'content' | 'advanced';
+    readonly locale: string | undefined;
+    readonly defaultLocale: string | undefined;
+    readonly disabled: boolean;
+    readonly onChange: (prop: string, def: PropDef, value: unknown) => void;
+    readonly onReset: (prop: string, def: PropDef) => void;
+    /** Writes a binding or a formula (PB-081). */
+    readonly onSetValue?: (prop: string, def: PropDef, value: Value) => void;
+    /** Back from a binding or a formula to a fixed value. */
+    readonly onFixed?: (prop: string, def: PropDef) => void;
+}
+/**
+ * The props of a component as controls, grouped by their `group` (docs/editor.md#inspector). A
+ * control writes with `node.setProp` (typing coalesces into one undo step through the command's
+ * merge key) and "Reset" removes the value (`node.unsetProp`), which shows the default again.
+ */
+export declare function PropsPanel(props: PropsPanelProps): import("react").JSX.Element | null;
+//# sourceMappingURL=props-panel.d.ts.map

package/dist/panels/inspector/props-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"props-panel.d.ts","sourceRoot":"","sources":["../../../src/panels/inspector/props-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAIjF,OAAO,EAAE,SAAS,EAAiB,MAAM,qBAAqB,CAAC;AAQ/D,eAAO,MAAM,cAAc,QAAS,OAAO,YACgB,CAAC;AAI5D,OAAO,EAAE,SAAS,EAAE,CAAC;AA2CrB,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IACxB,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC;IAC7B,kEAAkE;IAClE,QAAQ,CAAC,KAAK,EAAE,SAAS,GAAG,UAAU,CAAC;IACvC,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3C,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxE,QAAQ,CAAC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,8CAA8C;IAC9C,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACzE,yDAAyD;IACzD,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;CACzD;AA8GD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,sCAkEhD"}

package/dist/panels/inspector/props-panel.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { useT } from '../../messages/index.js';
+import { Icon, IconButton } from '../../ui/index.js';
+import { propLabel, renderControl } from './controls/index.js';
+import { readProp, translationLocale } from './value.js';
+import { TranslationHint } from './values/translation.js';
+import { ValueEditor } from './values/value-editor.js';
+/** Groups that live on the Advanced tab; everything else is content. */
+const ADVANCED_GROUPS = new Set(['advanced', 'accessibility']);
+export const isAdvancedProp = (def) => def.group !== undefined && ADVANCED_GROUPS.has(def.group);
+const titleCase = (text) => text.charAt(0).toUpperCase() + text.slice(1);
+export { propLabel };
+/** Short controls sit on one row with their label; long ones are stacked under it. */
+const ROW_KINDS = new Set(['boolean', 'select', 'number', 'icon']);
+const storageKey = (type) => `buildr.editor.inspector.groups.${type}`;
+/** The groups the user closed for a component type (localStorage, best effort). */
+function loadClosed(type) {
+    try {
+        const raw = window.localStorage.getItem(storageKey(type));
+        const parsed = raw === null ? [] : JSON.parse(raw);
+        return new Set(Array.isArray(parsed) ? parsed.filter((x) => typeof x === 'string') : []);
+    }
+    catch {
+        return new Set();
+    }
+}
+function saveClosed(type, closed) {
+    try {
+        window.localStorage.setItem(storageKey(type), JSON.stringify([...closed]));
+    }
+    catch {
+        // storage is unavailable: the state just is not remembered
+    }
+}
+/** Which prop groups are collapsed, remembered per component type. */
+function useClosedGroups(type) {
+    const [state, setState] = useState(() => ({ type, closed: loadClosed(type) }));
+    let closed = state.closed;
+    if (state.type !== type) {
+        closed = loadClosed(type);
+        setState({ type, closed });
+    }
+    const toggle = (group) => {
+        const next = new Set(closed);
+        if (!next.delete(group))
+            next.add(group);
+        saveClosed(type, next);
+        setState({ type, closed: next });
+    };
+    return { closed, toggle };
+}
+/** A hint shown under a control: what the default is, and the limits a value must keep. */
+function hintFor(def, t) {
+    const parts = [];
+    const shown = String(def.default);
+    if (def.kind !== 'list' && def.kind !== 'object' && def.kind !== 'richText' && shown !== '') {
+        parts.push(`${t('inspector.default')}: ${shown}`);
+    }
+    if ((def.kind === 'text' || def.kind === 'textarea') && def.maxLength !== undefined) {
+        parts.push(`${t('inspector.maxLength')}: ${def.maxLength}`);
+    }
+    if (def.kind === 'number') {
+        if (def.min !== undefined)
+            parts.push(`${t('inspector.min')}: ${def.min}`);
+        if (def.max !== undefined)
+            parts.push(`${t('inspector.max')}: ${def.max}`);
+    }
+    return parts.join(' · ');
+}
+function Field(props) {
+    const { name, def, reading, disabled, translating } = props;
+    const t = useT();
+    const id = useId();
+    const hintId = `${id}-hint`;
+    const label = propLabel(name, def);
+    const hint = hintFor(def, t);
+    const editable = reading.mode === 'static';
+    const control = renderControl(def, {
+        id,
+        def,
+        label,
+        describedBy: hint === '' ? undefined : hintId,
+        value: reading.value,
+        disabled,
+        onChange: (value) => props.onChange(name, def, value),
+    });
+    const layout = ROW_KINDS.has(def.kind) ? 'row' : 'stack';
+    return (_jsxs("div", { className: "bd-field", "data-prop": name, "data-kind": def.kind, "data-layout": layout, "data-untranslated": translating && !reading.isSet ? true : undefined, children: [_jsxs("div", { className: "bd-field-head", children: [control !== null && editable ? (_jsxs("label", { htmlFor: id, className: "bd-field-label", children: [label, translating ? (_jsxs("span", { className: "bd-field-locale", children: [" (", t('inspector.translation'), ")"] })) : null] })) : (_jsx("span", { className: "bd-field-label", children: label })), reading.isSet ? (_jsx(IconButton, { variant: "ghost", icon: "rotate-ccw", className: "bd-field-reset", disabled: disabled, label: `${t(translating ? 'translation.remove' : 'inspector.reset')}: ${label}`, onClick: () => props.onReset(name, def) })) : null] }), _jsx("div", { className: "bd-field-body", children: _jsx(ValueEditor, { def: def, label: label, raw: props.raw, disabled: disabled, staticControl: control, onSet: (value) => props.onSetValue?.(name, def, value), onFixed: () => props.onFixed?.(name, def) }) }), translating && editable ? (_jsx(TranslationHint, { translated: reading.isSet, disabled: disabled, label: label, onTranslate: () => props.onChange(name, def, reading.value) })) : null, editable && control === null ? (_jsx("p", { className: "bd-field-unsupported", children: t('inspector.unsupported') })) : null, hint !== '' ? (_jsx("p", { className: "bd-field-hint", id: hintId, children: hint })) : null] }));
+}
+/**
+ * The props of a component as controls, grouped by their `group` (docs/editor.md#inspector). A
+ * control writes with `node.setProp` (typing coalesces into one undo step through the command's
+ * merge key) and "Reset" removes the value (`node.unsetProp`), which shows the default again.
+ */
+export function PropsPanel(props) {
+    const t = useT();
+    const { node, meta, scope, locale, defaultLocale } = props;
+    const { closed, toggle } = useClosedGroups(node.type);
+    const panelId = useId();
+    const entries = Object.entries(meta.props).filter(([, def]) => isAdvancedProp(def) === (scope === 'advanced'));
+    if (entries.length === 0) {
+        return scope === 'content' ? (_jsxs("div", { className: "bd-inspector-empty", "data-state": "no-props", children: [_jsx(Icon, { name: "box", size: "md" }), _jsx("p", { className: "bd-inspector-empty-title", children: t('inspector.noProps') })] })) : null;
+    }
+    const groups = new Map();
+    for (const entry of entries) {
+        const group = entry[1].group ?? '';
+        const list = groups.get(group);
+        if (list === undefined)
+            groups.set(group, [entry]);
+        else
+            list.push(entry);
+    }
+    return (_jsx("div", { className: "bd-props", children: [...groups].map(([group, list]) => (_jsxs("section", { className: "bd-props-group", "data-group": group, children: [group !== '' ? (_jsx("h4", { className: "bd-props-heading", children: _jsxs("button", { type: "button", className: "bd-props-toggle", "aria-expanded": !closed.has(group), "aria-controls": `${panelId}-${group}`, onClick: () => toggle(group), children: [_jsx(Icon, { name: closed.has(group) ? 'chevron-right' : 'chevron-down' }), titleCase(group)] }) })) : null, _jsx("div", { id: `${panelId}-${group}`, className: "bd-props-fields", hidden: closed.has(group), children: list.map(([name, def]) => (_jsx(Field, { name: name, def: def, reading: readProp(node, name, def, locale, defaultLocale), raw: node.props !== undefined && Object.hasOwn(node.props, name)
+                            ? node.props[name]
+                            : undefined, disabled: props.disabled, translating: translationLocale(def, locale, defaultLocale) !== undefined, onChange: props.onChange, onReset: props.onReset, onSetValue: props.onSetValue, onFixed: props.onFixed }, name))) })] }, group))) }));
+}

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

@@ -0,0 +1,20 @@
+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;
+}
+/**
+ * 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.
+ */
+export declare function BoxModel({ def, label, effective, layer, disabled, renderEditor }: BoxModelProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=box-model.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BOX_SIDES } from '@next-buildr/core';
+import { 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$/, '');
+};
+/**
+ * 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.
+ */
+export function BoxModel({ def, label, effective, layer, disabled, renderEditor }) {
+    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())] }));
+}

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

@@ -0,0 +1,5 @@
+export type { StyleInput } from './model.ts';
+export { checkStyleInput, layerFor } from './model.ts';
+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

@@ -0,0 +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"}

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

@@ -0,0 +1,2 @@
+export { checkStyleInput, layerFor } from './model.js';
+export { StyleInspector } from './style-inspector.js';

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

@@ -0,0 +1,55 @@
+import { type StylePropertyDef, type Theme } from '@next-buildr/core';
+/** What an author typed, checked against the property's grammar and the theme. */
+export type StyleInput = {
+    readonly ok: true;
+    readonly value: string | number;
+} | {
+    readonly ok: false;
+    readonly message: string;
+};
+/**
+ * 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 declare function checkStyleInput(def: StylePropertyDef, text: string, theme: Theme): StyleInput;
+/** The sides or corners of a shaped property, in the order the editor lays them out. */
+export declare const partsOf: (def: StylePropertyDef) => readonly string[];
+/** The token references (`$space.4`) a property accepts in this theme, for suggestions. */
+export declare function tokenSuggestions(def: StylePropertyDef, theme: Theme): string[];
+/** The keywords a property accepts, for suggestions and for the select of a pure enumeration. */
+export declare function keywordsOf(def: StylePropertyDef): readonly string[];
+/** A property that is only a list of keywords is edited with a select. */
+export declare function isEnumeration(def: StylePropertyDef): boolean;
+/** The layer a breakpoint id edits: desktop is `{}`. */
+export declare const layerFor: (breakpoint: string | undefined) => {
+    bp?: never;
+} | {
+    bp: string;
+};
+/** The units the property's grammar allows, and nothing else: they are all the unit menu offers. */
+export declare function unitsOf(def: StylePropertyDef): readonly string[];
+/** Whether the grammar takes a bare number (`opacity`, `lineHeight`) rather than only lengths. */
+export declare function takesNumber(def: StylePropertyDef): boolean;
+/** How much an arrow key adds: a fraction where the number is confined to a small range. */
+export declare function stepOf(def: StylePropertyDef): number;
+/** Whether the property is edited as a number (with a unit menu) rather than as free keyword text. */
+export declare function isNumeric(def: StylePropertyDef): boolean;
+export interface TokenEntry {
+    readonly ref: string;
+    readonly scale: string;
+    readonly name: string;
+    /** What the token stands for in this theme: a colour, a length, a font stack. */
+    readonly value: string;
+}
+/** The tokens a property accepts in this theme, with their values, for the picker. */
+export declare function tokenEntries(def: StylePropertyDef, theme: Theme): TokenEntry[];
+/** The colour a text stands for, to paint a swatch: a token of the theme or a literal colour. */
+export declare function colorOf(def: StylePropertyDef, text: string, theme: Theme): string | undefined;
+/** A number confined to a range of at most one (opacity) is also edited with a slider. */
+export declare function sliderOf(def: StylePropertyDef): {
+    readonly min: number;
+    readonly max: number;
+    readonly step: number;
+} | undefined;
+//# sourceMappingURL=model.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/model.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,gBAAgB,EACrB,KAAK,KAAK,EACX,MAAM,mBAAmB,CAAC;AAE3B,kFAAkF;AAClF,MAAM,MAAM,UAAU,GAClB;IAAE,QAAQ,CAAC,EAAE,EAAE,IAAI,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GACtD;IAAE,QAAQ,CAAC,EAAE,EAAE,KAAK,CAAC;IAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC;AAKrD;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,UAAU,CAmB7F;AAED,wFAAwF;AACxF,eAAO,MAAM,OAAO,QAAS,gBAAgB,KAAG,SAAS,MAAM,EACW,CAAC;AAE3E,2FAA2F;AAC3F,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,gBAAgB,EAAE,KAAK,EAAE,KAAK,GAAG,MAAM,EAAE,CAM9E;AAED,iGAAiG;AACjG,wBAAgB,UAAU,CAAC,GAAG,EAAE,gBAAgB,GAAG,SAAS,MAAM,EAAE,CAGnE;AAED,0EAA0E;AAC1E,wBAAgB,aAAa,CAAC,GAAG,EAAE,gBAAgB,GAAG,OAAO,CAS5D;AAED,wDAAwD;AACxD,eAAO,MAAM,QAAQ,eAAgB,MAAM,GAAG,SAAS;;;;CACsB,CAAC;AAE9E,oGAAoG;AACpG,wBAAgB,OAAO,CAAC,GAAG,EAAE,gBAAgB,GAAG,SAAS,MAAM,EAAE,CAGhE;AAED,kGAAkG;AAClG,wBAAgB,WAAW,CAAC,GAAG,EAAE,gBAAgB,GAAG,OAAO,CAG1D;AAED,4FAA4F;AAC5F,wBAAgB,MAAM,CAAC,GAAG,EAAE,gBAAgB,GAAG,MAAM,CAMpD;AAED,sGAAsG;AACtG,wBAAgB,SAAS,CAAC,GAAG,EAAE,gBAAgB,GAAG,OAAO,CAExD;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,iFAAiF;IACjF,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,sFAAsF;AACtF,wBAAgB,YAAY,CAAC,GAAG,EAAE,gBAAgB,EAAE,KAAK,EAAE,KAAK,GAAG,UAAU,EAAE,CAQ9E;AAED,iGAAiG;AACjG,wBAAgB,OAAO,CAAC,GAAG,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS,CAO7F;AAED,0FAA0F;AAC1F,wBAAgB,QAAQ,CACtB,GAAG,EAAE,gBAAgB,GACpB;IAAE,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,CAMnF"}