@next-buildr/editor 0.0.0-stage → 2.0.0

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

@@ -0,0 +1,265 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { createRegistryMeta, createSeededIdGenerator, defaultTheme, getStyleProperty, 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, useEditorState } from '../../../store/index.js';
+import { checkStyleInput } from './model.js';
+import { StyleInspector } from './style-inspector.js';
+expect.extend(matchers);
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const box = {
+    type: 'buildr/box',
+    version: 1,
+    label: 'Box',
+    category: 'layout',
+    props: {},
+    contentCategories: ['flow'],
+    styles: { groups: ['layout', 'spacing', 'visibility'] },
+    runtime: 'shared',
+    slots: { default: {} },
+};
+const page = {
+    ...box,
+    type: 'buildr/page',
+    label: 'Page',
+    capabilities: { root: true },
+};
+const registry = createRegistryMeta({ components: [page, box] });
+const manifest = toManifest(registry);
+const fixture = () => ({
+    schemaVersion: 1,
+    root: 'root',
+    nodes: {
+        root: { id: 'root', type: 'buildr/page', slots: { default: ['box0000001'] } },
+        box0000001: {
+            id: 'box0000001',
+            type: 'buildr/box',
+            styles: {
+                base: { layout: { gap: '$space.4' } },
+                bp: { tablet: { layout: { display: 'grid' } } },
+            },
+        },
+    },
+    components: {},
+});
+let container;
+let root;
+beforeEach(() => {
+    globalThis.ResizeObserver ??= class {
+        observe() { }
+        unobserve() { }
+        disconnect() { }
+    };
+    Element.prototype.scrollIntoView ??= () => { };
+    Element.prototype.hasPointerCapture ??= () => false;
+    container = document.createElement('div');
+    document.body.append(container);
+    root = createRoot(container);
+});
+afterEach(() => {
+    act(() => root.unmount());
+    document.body.innerHTML = '';
+});
+async function mount(breakpoint) {
+    const store = createEditorStore({
+        doc: fixture(),
+        registry,
+        generateId: createSeededIdGenerator(3),
+        validationDelayMs: null,
+    });
+    store.select('box0000001');
+    const View = () => {
+        const node = useEditorState((state) => state.doc.nodes['box0000001']);
+        if (node === undefined)
+            return null;
+        return _jsx(StyleInspector, { node: node, ...(breakpoint !== undefined ? { breakpoint } : {}) });
+    };
+    await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(ManifestProvider, { manifest: manifest, children: _jsx(EditorStoreProvider, { store: store, children: _jsx(View, {}) }) }) })));
+    return store;
+}
+const styles = (store) => store.getState().doc.nodes['box0000001']?.styles;
+const inputAt = (path) => container.querySelector(`[data-path="${path}"] input`);
+const type = (element, value) => act(async () => {
+    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(element, value);
+    element.dispatchEvent(new Event('input', { bubbles: true }));
+});
+describe('checkStyleInput', () => {
+    const gap = getStyleProperty('layout', 'gap');
+    const opacity = getStyleProperty('effects', 'opacity');
+    it('accepts tokens the theme has and lengths', () => {
+        if (gap === undefined)
+            throw new Error('no gap');
+        expect(checkStyleInput(gap, '$space.4', defaultTheme)).toEqual({ ok: true, value: '$space.4' });
+        expect(checkStyleInput(gap, '12px', defaultTheme)).toEqual({ ok: true, value: '12px' });
+    });
+    it('rejects a token the theme lacks and values outside the grammar', () => {
+        if (gap === undefined)
+            throw new Error('no gap');
+        expect(checkStyleInput(gap, '$space.99', defaultTheme).ok).toBe(false);
+        for (const bad of ['url(x)', 'calc(1px + 2px)', '1px; color: red', '12qq']) {
+            expect(checkStyleInput(gap, bad, defaultTheme).ok).toBe(false);
+        }
+    });
+    it('turns numeric text into a number where the grammar takes one', () => {
+        if (opacity === undefined)
+            throw new Error('no opacity');
+        expect(checkStyleInput(opacity, '0.5', defaultTheme)).toEqual({ ok: true, value: 0.5 });
+        expect(checkStyleInput(opacity, '3', defaultTheme).ok).toBe(false);
+    });
+});
+describe('StyleInspector', () => {
+    it('shows only the groups the component allows', async () => {
+        await mount();
+        const groups = [...container.querySelectorAll('[data-group]')].map((g) => g.getAttribute('data-group'));
+        expect(groups).toEqual(['layout', 'spacing', 'visibility']);
+    });
+    it('writes to desktop with no breakpoint', async () => {
+        const store = await mount();
+        await type(inputAt('layout.gap'), '2rem');
+        expect(styles(store)?.base?.layout?.gap).toBe('2rem');
+    });
+    it('writes to the breakpoint being edited', async () => {
+        const store = await mount('mobile');
+        await type(inputAt('layout.gap'), '8px');
+        expect(styles(store)?.bp?.['mobile']?.layout?.gap).toBe('8px');
+        expect(styles(store)?.base?.layout?.gap).toBe('$space.4');
+    });
+    it('shows a value from a wider breakpoint as inherited', async () => {
+        await mount('mobile');
+        const field = container.querySelector('[data-path="layout.gap"]');
+        expect(field.textContent).toContain('from desktop');
+        const pressed = container.querySelector('[data-style-prop="layout.display"] [aria-pressed=true]');
+        expect(pressed?.textContent).toBe('grid');
+    });
+    it('does not save a value outside the grammar and says why', async () => {
+        const store = await mount();
+        await type(inputAt('layout.gap'), 'url(x)');
+        expect(styles(store)?.base?.layout?.gap).toBe('$space.4');
+        expect(container.querySelector('[role=alert]')).not.toBeNull();
+        expect(inputAt('layout.gap').getAttribute('aria-invalid')).toBe('true');
+    });
+    it('resets only the layer being edited', async () => {
+        const store = await mount('tablet');
+        const reset = container.querySelector('[data-style-prop="layout.display"] button');
+        await act(async () => reset.click());
+        expect(styles(store)?.bp?.['tablet']?.layout?.display).toBeUndefined();
+        expect(styles(store)?.base?.layout?.gap).toBe('$space.4');
+    });
+    it('edits one side of a box property', async () => {
+        const store = await mount();
+        await type(inputAt('spacing.margin.top'), '$space.2');
+        expect(styles(store)?.base?.spacing?.margin?.top).toBe('$space.2');
+    });
+    it('toggles hiding per breakpoint', async () => {
+        const store = await mount('mobile');
+        const check = container.querySelector('[data-style-prop="visibility.hidden"] input');
+        await act(async () => check.click());
+        expect(styles(store)?.bp?.['mobile']?.visibility?.hidden).toBe(true);
+    });
+    it('refuses an unknown breakpoint', async () => {
+        await mount('watch');
+        expect(container.textContent).toContain('not in the theme');
+        expect(inputAt('layout.gap').disabled).toBe(true);
+    });
+});
+const press = (element, key, init = {}) => act(async () => {
+    element.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, ...init }));
+});
+const buttonNamed = (name) => [...container.querySelectorAll('button')].find((b) => b.getAttribute('aria-label') === name || b.textContent === name);
+describe('style inspector controls (PB-128)', () => {
+    it('steps a number with the arrow keys, Shift takes ten, and one undo undoes the run', async () => {
+        const store = await mount();
+        const input = inputAt('layout.gap');
+        await type(input, '10px');
+        await press(input, 'ArrowUp');
+        expect(styles(store)?.base?.layout?.gap).toBe('11px');
+        await press(input, 'ArrowUp', { shiftKey: true });
+        expect(styles(store)?.base?.layout?.gap).toBe('21px');
+        await press(input, 'ArrowDown');
+        expect(styles(store)?.base?.layout?.gap).toBe('20px');
+        await act(async () => {
+            store.undo();
+        });
+        expect(styles(store)?.base?.layout?.gap).toBe('$space.4');
+    });
+    it('offers only the units of the grammar and keeps the number when the unit changes', async () => {
+        await mount();
+        await type(inputAt('layout.gap'), '10px');
+        const menu = container.querySelector('[data-path="layout.gap"] select.bd-unit-select');
+        expect(menu.getAttribute('aria-label')).toContain('Unit');
+        expect(menu.value).toBe('px');
+        expect(inputAt('layout.gap').value).toBe('10');
+    });
+    it('never steps to a value outside the grammar', async () => {
+        const store = await mount();
+        const input = inputAt('layout.gap');
+        await type(input, 'auto');
+        await press(input, 'ArrowUp');
+        expect(input.value).toBe('auto');
+        expect(styles(store)?.base?.layout?.gap).toBe('$space.4');
+    });
+    it('moves linked sides together as one undo step', async () => {
+        const store = await mount();
+        await type(inputAt('spacing.margin.left'), '12px');
+        const margin = styles(store)?.base?.spacing?.margin;
+        expect(margin).toEqual({ top: '12px', right: '12px', bottom: '12px', left: '12px' });
+        await act(async () => {
+            store.undo();
+        });
+        expect(styles(store)?.base?.spacing?.margin?.left).toBeUndefined();
+        expect(styles(store)?.base?.spacing?.margin?.right).toBeUndefined();
+    });
+    it('writes only one side once the sides are unlinked', async () => {
+        const store = await mount();
+        await act(async () => buttonNamed('Padding: Link sides').click());
+        await type(inputAt('spacing.padding.bottom'), '$space.2');
+        expect(styles(store)?.base?.spacing?.padding).toEqual({ bottom: '$space.2' });
+    });
+    it('writes the same command as typing when a segment is pressed, and unsets on a second press', async () => {
+        const store = await mount();
+        await act(async () => buttonNamed('column').click());
+        expect(styles(store)?.base?.layout?.direction).toBe('column');
+        const group = container.querySelector('[data-style-prop="layout.direction"] fieldset');
+        expect(group?.querySelector('[aria-pressed=true]')?.getAttribute('aria-label')).toBe('column');
+        await act(async () => buttonNamed('column').click());
+        expect(styles(store)?.base?.layout?.direction).toBeUndefined();
+    });
+    it('keeps keywords without a segment reachable through the other-values menu', async () => {
+        const store = await mount();
+        const select = container.querySelector('[data-style-prop="layout.justify"] select');
+        expect([...select.options].map((o) => o.value)).toContain('space-evenly');
+        await act(async () => {
+            select.value = 'space-evenly';
+            select.dispatchEvent(new Event('change', { bubbles: true }));
+        });
+        expect(styles(store)?.base?.layout?.justify).toBe('space-evenly');
+    });
+    it('marks where a value comes from', async () => {
+        await mount('mobile');
+        const origin = (path) => container.querySelector(`[data-style-prop="${path}"]`)?.getAttribute('data-origin');
+        expect(origin('layout.gap')).toBe('inherited');
+        expect(origin('layout.rowGap')).toBe('default');
+        await mount('tablet');
+        expect(origin('layout.display')).toBe('set');
+        const dot = container.querySelector('[data-style-prop="layout.display"] .bd-source-dot');
+        expect(dot?.getAttribute('aria-label')).toBe('Set on this breakpoint');
+    });
+    it('picks a token from the picker, which writes the token reference', async () => {
+        const store = await mount();
+        await act(async () => buttonNamed('Tokens: Gap').click());
+        const token = [...document.querySelectorAll('.bd-token')].find((b) => b.textContent?.startsWith('2'));
+        expect(token).toBeDefined();
+        await act(async () => token?.click());
+        expect(styles(store)?.base?.layout?.gap).toBe('$space.2');
+    });
+    it('has no accessibility violations', async () => {
+        await mount();
+        expect(await axe(container)).toHaveNoViolations();
+    });
+});

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

@@ -0,0 +1,15 @@
+import type { StylePropertyDef, Theme } from '@next-buildr/core';
+/**
+ * The theme's tokens for a property, each with what it stands for: a swatch for a colour, the
+ * value for a length or a font. Choosing one writes its `$scale.name` reference, exactly as typing
+ * it would.
+ */
+export declare function TokenPicker(props: {
+    readonly def: StylePropertyDef;
+    readonly theme: Theme;
+    readonly label: string;
+    readonly current: string | undefined;
+    readonly disabled: boolean;
+    readonly onPick: (ref: string) => void;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=token-picker.d.ts.map

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

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

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

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

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

@@ -0,0 +1,28 @@
+import type { EffectiveStyles, StylePropertyDef, Theme } from '@next-buildr/core';
+export interface StyleValueOptions {
+    readonly def: StylePropertyDef;
+    readonly path: string;
+    readonly effective: EffectiveStyles;
+    readonly layer: string;
+    readonly theme: Theme;
+    readonly onSet: (value: string | number) => void;
+    readonly onUnset: () => void;
+}
+/**
+ * The state of one style value being edited: what is typed (a draft until the field is left), the
+ * stored value at the layer being edited, and the message when the text is outside the grammar.
+ * Text is only handed to `onSet` after `checkStyleInput` accepted it, so nothing the grammar
+ * refuses can be dispatched.
+ */
+export declare function useStyleValue({ def, path, effective, layer, theme, onSet, onUnset, }: StyleValueOptions): {
+    current: import("@next-buildr/core").EffectiveValue | undefined;
+    stored: string;
+    shown: string;
+    error: string;
+    change: (text: string) => void;
+    pick: (ref: string) => void;
+    blur: () => void;
+    /** The value is inherited from a wider breakpoint rather than set at this layer. */
+    inherited: boolean;
+};
+//# sourceMappingURL=use-style-value.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-style-value.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/use-style-value.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAIlF,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,GAAG,EAAE,gBAAgB,CAAC;IAC/B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,SAAS,EAAE,eAAe,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,IAAI,EACJ,SAAS,EACT,KAAK,EACL,KAAK,EACL,KAAK,EACL,OAAO,GACR,EAAE,iBAAiB;;;;;mBAOI,MAAM;gBAeT,MAAM;;IAkBvB,oFAAoF;;EAGvF"}

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

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import { checkStyleInput } from './model.js';
+/**
+ * The state of one style value being edited: what is typed (a draft until the field is left), the
+ * stored value at the layer being edited, and the message when the text is outside the grammar.
+ * Text is only handed to `onSet` after `checkStyleInput` accepted it, so nothing the grammar
+ * refuses can be dispatched.
+ */
+export function useStyleValue({ def, path, effective, layer, theme, onSet, onUnset, }) {
+    const current = Object.hasOwn(effective, path) ? effective[path] : undefined;
+    const [draft, setDraft] = useState(undefined);
+    const [error, setError] = useState('');
+    const stored = current !== undefined ? String(current.value) : '';
+    const shown = draft ?? stored;
+    const change = (text) => {
+        setDraft(text);
+        if (text.trim() === '') {
+            setError('');
+            if (current?.source === layer)
+                onUnset();
+            return;
+        }
+        const checked = checkStyleInput(def, text, theme);
+        if (!checked.ok) {
+            setError(checked.message);
+            return;
+        }
+        setError('');
+        onSet(checked.value);
+    };
+    const pick = (ref) => {
+        setDraft(undefined);
+        setError('');
+        onSet(ref);
+    };
+    const blur = () => {
+        setDraft(undefined);
+        setError('');
+    };
+    return {
+        current,
+        stored,
+        shown,
+        error,
+        change,
+        pick,
+        blur,
+        /** The value is inherited from a wider breakpoint rather than set at this layer. */
+        inherited: current !== undefined && current.source !== layer,
+    };
+}

package/dist/panels/inspector/value.d.ts

@@ -0,0 +1,20 @@
+import type { PageNode, PropDef } from '@next-buildr/core';
+/** What the inspector shows for one prop of one node. */
+export interface PropReading {
+    /** `static` is editable here; a binding or a formula is shown as a chip (PB-081 edits them). */
+    readonly mode: 'static' | 'binding' | 'expression';
+    /** The value to show: the node's own, else the default. */
+    readonly value: unknown;
+    /** The node carries a value for this prop (in this language), so there is something to reset. */
+    readonly isSet: boolean;
+    /** For a binding the path, for a formula its source. */
+    readonly source: string | undefined;
+}
+/**
+ * Reads `prop` off `node`. In a language other than the default a localizable prop shows that
+ * language's translation, falling back to the default-language value (the fallback the renderer uses).
+ */
+export declare function readProp(node: PageNode, prop: string, def: PropDef, locale: string | undefined, defaultLocale: string | undefined): PropReading;
+/** The language edits are written to, or `undefined` for the default language (and for props that are not translated). */
+export declare function translationLocale(def: PropDef, locale: string | undefined, defaultLocale: string | undefined): string | undefined;
+//# sourceMappingURL=value.d.ts.map

package/dist/panels/inspector/value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"value.d.ts","sourceRoot":"","sources":["../../../src/panels/inspector/value.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAS,MAAM,mBAAmB,CAAC;AAElE,yDAAyD;AACzD,MAAM,WAAW,WAAW;IAC1B,gGAAgG;IAChG,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,YAAY,CAAC;IACnD,2DAA2D;IAC3D,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;IACxB,iGAAiG;IACjG,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;IACxB,wDAAwD;IACxD,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;CACrC;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CACtB,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,OAAO,EACZ,MAAM,EAAE,MAAM,GAAG,SAAS,EAC1B,aAAa,EAAE,MAAM,GAAG,SAAS,GAChC,WAAW,CAwBb;AAED,0HAA0H;AAC1H,wBAAgB,iBAAiB,CAC/B,GAAG,EAAE,OAAO,EACZ,MAAM,EAAE,MAAM,GAAG,SAAS,EAC1B,aAAa,EAAE,MAAM,GAAG,SAAS,GAChC,MAAM,GAAG,SAAS,CAEpB"}

package/dist/panels/inspector/value.js

@@ -0,0 +1,32 @@
+/**
+ * Reads `prop` off `node`. In a language other than the default a localizable prop shows that
+ * language's translation, falling back to the default-language value (the fallback the renderer uses).
+ */
+export function readProp(node, prop, def, locale, defaultLocale) {
+    const raw = node.props !== undefined && Object.hasOwn(node.props, prop) ? node.props[prop] : undefined;
+    if (raw === undefined)
+        return { mode: 'static', value: def.default, isSet: false, source: undefined };
+    const value = raw;
+    if (value.kind === 'binding') {
+        return { mode: 'binding', value: def.default, isSet: true, source: value.path };
+    }
+    if (value.kind === 'expression') {
+        return { mode: 'expression', value: def.default, isSet: true, source: value.expr };
+    }
+    const translated = translationLocale(def, locale, defaultLocale);
+    if (translated !== undefined) {
+        const l10n = value.l10n;
+        const has = l10n !== undefined && Object.hasOwn(l10n, translated);
+        return {
+            mode: 'static',
+            value: has ? l10n[translated] : value.value,
+            isSet: has,
+            source: undefined,
+        };
+    }
+    return { mode: 'static', value: value.value, isSet: true, source: undefined };
+}
+/** The language edits are written to, or `undefined` for the default language (and for props that are not translated). */
+export function translationLocale(def, locale, defaultLocale) {
+    return def.localizable && locale !== undefined && locale !== defaultLocale ? locale : undefined;
+}

package/dist/panels/inspector/values/analyze.d.ts

@@ -0,0 +1,49 @@
+import { type DataContext, type DataSchema, type DataTypeTag, type Diagnostic, type FormatSpec, type Value } from '@next-buildr/core';
+/** How a formula is read: an expression, or free text with `{{ }}` segments. */
+export type FormulaMode = 'formula' | 'template';
+/** A field the binding picker offers. */
+export interface BindingOption {
+    readonly path: string;
+    /** What the field resolves to (`string`, `date`, ...). */
+    readonly tag: DataTypeTag;
+    readonly label: string | undefined;
+}
+/** The fields of the data schema a prop can take, in schema order. Empty without a schema. */
+export declare function bindingOptions(schema: DataSchema | undefined, accepts: readonly DataTypeTag[]): BindingOption[];
+/** Whether a binding path is fine, and if not, why. `unchecked` when there is no schema to check against. */
+export type BindingStatus = 'ok' | 'missing' | 'type' | 'unchecked';
+export declare function checkBinding(schema: DataSchema | undefined, path: string, accepts: readonly DataTypeTag[]): BindingStatus;
+export interface FormulaCheck {
+    /** Every problem, tagged with the span (`details.start` / `details.end`) it concerns. */
+    readonly diagnostics: readonly Diagnostic[];
+    /** No error (a warning does not stop a formula from being saved). */
+    readonly valid: boolean;
+}
+/**
+ * Parses and typechecks a formula against the schema and the prop's `accepts`, without running it.
+ * An empty source is invalid (there is nothing to save).
+ */
+export declare function checkFormula(source: string, mode: FormulaMode, schema: DataSchema | undefined, accepts: readonly DataTypeTag[]): FormulaCheck;
+/** The `[start, end)` a diagnostic points at in the source, when it says. */
+export declare function spanOf(diagnostic: Diagnostic): {
+    readonly start: number;
+    readonly end: number;
+} | undefined;
+export interface Preview {
+    /** The value as text, `undefined` when there is nothing to show. */
+    readonly text: string | undefined;
+    readonly diagnostics: readonly Diagnostic[];
+}
+/**
+ * What a binding or formula gives against sample data: the resolved value, formatted when a format
+ * is set. Never throws; a problem is a diagnostic and the text stays `undefined` (or the fallback).
+ */
+export declare function previewValue(value: Value, context: DataContext | undefined): Preview;
+/** The format families the picker offers; `none` writes no format. */
+export type FormatKind = 'none' | FormatSpec['type'];
+export declare const FORMAT_KINDS: readonly FormatKind[];
+/** A fresh format of a kind, with the defaults the controls start from; `undefined` for `none`. */
+export declare function defaultFormat(kind: FormatKind): FormatSpec | undefined;
+/** Whether a format applies to a field of this type (a date format on a date, and so on). */
+export declare function formatKindsFor(tag: DataTypeTag | undefined): readonly FormatKind[];
+//# sourceMappingURL=analyze.d.ts.map

package/dist/panels/inspector/values/analyze.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"analyze.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/values/analyze.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,UAAU,EAOf,KAAK,KAAK,EACX,MAAM,mBAAmB,CAAC;AAE3B,gFAAgF;AAChF,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,CAAC;AAEjD,yCAAyC;AACzC,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,GAAG,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CACpC;AAED,8FAA8F;AAC9F,wBAAgB,cAAc,CAC5B,MAAM,EAAE,UAAU,GAAG,SAAS,EAC9B,OAAO,EAAE,SAAS,WAAW,EAAE,GAC9B,aAAa,EAAE,CAUjB;AAED,6GAA6G;AAC7G,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,CAAC;AAEpE,wBAAgB,YAAY,CAC1B,MAAM,EAAE,UAAU,GAAG,SAAS,EAC9B,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,SAAS,WAAW,EAAE,GAC9B,aAAa,CAKf;AAED,MAAM,WAAW,YAAY;IAC3B,yFAAyF;IACzF,QAAQ,CAAC,WAAW,EAAE,SAAS,UAAU,EAAE,CAAC;IAC5C,qEAAqE;IACrE,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;CACzB;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,UAAU,GAAG,SAAS,EAC9B,OAAO,EAAE,SAAS,WAAW,EAAE,GAC9B,YAAY,CAcd;AAED,6EAA6E;AAC7E,wBAAgB,MAAM,CACpB,UAAU,EAAE,UAAU,GACrB;IAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,CAI9D;AAED,MAAM,WAAW,OAAO;IACtB,oEAAoE;IACpE,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,QAAQ,CAAC,WAAW,EAAE,SAAS,UAAU,EAAE,CAAC;CAC7C;AAOD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,GAAG,SAAS,GAAG,OAAO,CAuBpF;AAED,sEAAsE;AACtE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;AAErD,eAAO,MAAM,YAAY,EAAE,SAAS,UAAU,EAAmD,CAAC;AAElG,mGAAmG;AACnG,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,GAAG,UAAU,GAAG,SAAS,CAatE;AAED,6FAA6F;AAC7F,wBAAgB,cAAc,CAAC,GAAG,EAAE,WAAW,GAAG,SAAS,GAAG,SAAS,UAAU,EAAE,CAelF"}

package/dist/panels/inspector/values/analyze.js

@@ -0,0 +1,115 @@
+import { compileExpression, compileTemplate, formatValue, listPaths, resolveBinding, schemaAtPath, typecheck, } from '@next-buildr/core';
+/** The fields of the data schema a prop can take, in schema order. Empty without a schema. */
+export function bindingOptions(schema, accepts) {
+    if (schema === undefined || accepts.length === 0)
+        return [];
+    const paths = listPaths(schema, (type) => accepts.includes(type.t));
+    const options = [];
+    for (const path of paths) {
+        const field = schemaAtPath(schema, path);
+        if (field === undefined)
+            continue;
+        options.push({ path, tag: field.type.t, label: field.label });
+    }
+    return options;
+}
+export function checkBinding(schema, path, accepts) {
+    if (schema === undefined)
+        return 'unchecked';
+    const field = schemaAtPath(schema, path);
+    if (field === undefined)
+        return 'missing';
+    return accepts.includes(field.type.t) ? 'ok' : 'type';
+}
+/**
+ * Parses and typechecks a formula against the schema and the prop's `accepts`, without running it.
+ * An empty source is invalid (there is nothing to save).
+ */
+export function checkFormula(source, mode, schema, accepts) {
+    if (source.trim() === '') {
+        return {
+            valid: false,
+            diagnostics: [{ code: 'expr.empty', message: 'The formula is empty.', severity: 'error' }],
+        };
+    }
+    const compiled = mode === 'template' ? compileTemplate(source) : compileExpression(source);
+    if (!compiled.ok)
+        return { valid: false, diagnostics: [compiled.error] };
+    const checked = typecheck(compiled.value.ast, schema, mode === 'formula' ? { accepts } : {});
+    return {
+        diagnostics: checked.diagnostics,
+        valid: !checked.diagnostics.some((diagnostic) => diagnostic.severity === 'error'),
+    };
+}
+/** The `[start, end)` a diagnostic points at in the source, when it says. */
+export function spanOf(diagnostic) {
+    const start = diagnostic.details?.['start'];
+    const end = diagnostic.details?.['end'];
+    return typeof start === 'number' && typeof end === 'number' ? { start, end } : undefined;
+}
+const show = (value) => {
+    if (value === undefined || value === null)
+        return undefined;
+    return typeof value === 'string' ? value : JSON.stringify(value);
+};
+/**
+ * What a binding or formula gives against sample data: the resolved value, formatted when a format
+ * is set. Never throws; a problem is a diagnostic and the text stays `undefined` (or the fallback).
+ */
+export function previewValue(value, context) {
+    if (context === undefined || value.kind === 'static')
+        return { text: undefined, diagnostics: [] };
+    if (value.kind === 'binding') {
+        const resolved = resolveBinding(value, context);
+        if (resolved.value === undefined) {
+            return { text: undefined, diagnostics: resolved.diagnostics };
+        }
+        if (value.format === undefined) {
+            return { text: show(resolved.value), diagnostics: resolved.diagnostics };
+        }
+        const formatted = formatValue(resolved.value, value.format, context);
+        return formatted.ok
+            ? { text: formatted.value, diagnostics: resolved.diagnostics }
+            : { text: show(resolved.value), diagnostics: [...resolved.diagnostics, formatted.error] };
+    }
+    const compiled = value.mode === 'template' ? compileTemplate(value.expr) : compileExpression(value.expr);
+    if (!compiled.ok)
+        return { text: show(value.fallback), diagnostics: [compiled.error] };
+    const result = compiled.value.evaluate(context);
+    return result.ok
+        ? { text: show(result.value), diagnostics: [] }
+        : { text: show(value.fallback), diagnostics: [result.error] };
+}
+export const FORMAT_KINDS = ['none', 'date', 'number', 'currency', 'text'];
+/** A fresh format of a kind, with the defaults the controls start from; `undefined` for `none`. */
+export function defaultFormat(kind) {
+    switch (kind) {
+        case 'none':
+            return undefined;
+        case 'date':
+            return { type: 'date', style: 'medium' };
+        case 'number':
+            return { type: 'number' };
+        case 'currency':
+            return { type: 'currency', currency: 'USD' };
+        case 'text':
+            return { type: 'text' };
+    }
+}
+/** Whether a format applies to a field of this type (a date format on a date, and so on). */
+export function formatKindsFor(tag) {
+    switch (tag) {
+        case 'date':
+            return ['none', 'date'];
+        case 'number':
+            return ['none', 'number', 'currency'];
+        case 'string':
+        case 'enum':
+        case 'url':
+            return ['none', 'text'];
+        case undefined:
+            return FORMAT_KINDS;
+        default:
+            return ['none'];
+    }
+}

package/dist/panels/inspector/values/data.d.ts

@@ -0,0 +1,18 @@
+import type { DataContext, DataSchema } from '@next-buildr/core';
+import { type ReactNode } from 'react';
+interface InspectorData {
+    /** The shape of the data a binding can read; without it paths are typed by hand and not checked. */
+    readonly schema: DataSchema | undefined;
+    /** Sample data for the live preview (PB-090 lets the author pick it); without it there is no preview. */
+    readonly context: DataContext | undefined;
+}
+export interface InspectorDataProviderProps {
+    readonly schema?: DataSchema | undefined;
+    readonly context?: DataContext | undefined;
+    readonly children: ReactNode;
+}
+/** What the value editors of the inspector know about the data: its schema and a sample of it. */
+export declare function InspectorDataProvider({ schema, context, children }: InspectorDataProviderProps): import("react").JSX.Element;
+export declare const useInspectorData: () => InspectorData;
+export {};
+//# sourceMappingURL=data.d.ts.map

package/dist/panels/inspector/values/data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/values/data.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAiB,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAE3E,UAAU,aAAa;IACrB,oGAAoG;IACpG,QAAQ,CAAC,MAAM,EAAE,UAAU,GAAG,SAAS,CAAC;IACxC,yGAAyG;IACzG,QAAQ,CAAC,OAAO,EAAE,WAAW,GAAG,SAAS,CAAC;CAC3C;AAKD,MAAM,WAAW,0BAA0B;IACzC,QAAQ,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACzC,QAAQ,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IAC3C,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAC9B;AAED,kGAAkG;AAClG,wBAAgB,qBAAqB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,0BAA0B,+BAG9F;AAED,eAAO,MAAM,gBAAgB,QAAO,aAAoC,CAAC"}