@next-buildr/editor 0.0.0-stage → 2.0.0

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+const NONE = { schema: undefined, context: undefined };
+const DataCtx = createContext(NONE);
+/** What the value editors of the inspector know about the data: its schema and a sample of it. */
+export function InspectorDataProvider({ schema, context, children }) {
+    const value = useMemo(() => ({ schema, context }), [schema, context]);
+    return _jsx(DataCtx.Provider, { value: value, children: children });
+}
+export const useInspectorData = () => useContext(DataCtx);

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

@@ -0,0 +1,20 @@
+/**
+ * Says that what is edited depends on the language (docs/i18n.md#model-shared-structure-localized-content):
+ * texts belong to the current one, structure and style to all of them. Nothing in the default language.
+ */
+export declare function TranslationBanner(props: {
+    readonly locale: string | undefined;
+    readonly defaultLocale: string | undefined;
+}): import("react").JSX.Element | null;
+/**
+ * Under a translatable field in another language: while the field is untranslated it says the
+ * default-language text is shown (the control is greyed) and offers to start a translation from
+ * it; once translated the field's own button removes the translation again.
+ */
+export declare function TranslationHint(props: {
+    readonly translated: boolean;
+    readonly disabled: boolean;
+    readonly label: string;
+    readonly onTranslate: () => void;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=translation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"translation.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/values/translation.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE;IACvC,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;CAC5C,sCASA;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE;IACrC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,WAAW,EAAE,MAAM,IAAI,CAAC;CAClC,sCAgBA"}

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useT } from '../../../messages/index.js';
+import { Button } from '../../../ui/index.js';
+/**
+ * Says that what is edited depends on the language (docs/i18n.md#model-shared-structure-localized-content):
+ * texts belong to the current one, structure and style to all of them. Nothing in the default language.
+ */
+export function TranslationBanner(props) {
+    const t = useT();
+    const { locale, defaultLocale } = props;
+    if (locale === undefined || locale === defaultLocale)
+        return null;
+    return (_jsx("p", { className: "bd-translation-banner", role: "note", "data-locale": locale, children: t('translation.banner') }));
+}
+/**
+ * Under a translatable field in another language: while the field is untranslated it says the
+ * default-language text is shown (the control is greyed) and offers to start a translation from
+ * it; once translated the field's own button removes the translation again.
+ */
+export function TranslationHint(props) {
+    const t = useT();
+    if (props.translated)
+        return null;
+    return (_jsxs("div", { className: "bd-translation-hint", children: [_jsx("p", { className: "bd-field-hint", children: t('translation.showingDefault') }), _jsx(Button, { variant: "ghost", disabled: props.disabled, "aria-label": `${t('translation.translate')}: ${props.label}`, onClick: props.onTranslate, children: t('translation.translate') })] }));
+}

package/dist/panels/inspector/values/value-editor.d.ts

@@ -0,0 +1,30 @@
+import { type PropDef, type Value } from '@next-buildr/core';
+import { type ReactNode } from 'react';
+export interface ValueEditorProps {
+    readonly def: PropDef;
+    readonly label: string;
+    /** The node's own value for the prop (`undefined` while it still shows the default). */
+    readonly raw: Value | undefined;
+    readonly disabled: boolean;
+    /** The control for a fixed value; shown in the "Fixed" mode. */
+    readonly staticControl: ReactNode;
+    /** Writes a binding or a formula. */
+    readonly onSet: (value: Value) => void;
+    /** Back to a fixed value: the prop shows its default again. */
+    readonly onFixed: () => void;
+}
+/**
+ * The switch between a fixed value, a field of the data and a formula
+ * (docs/editor.md#value-modes-and-the-binding-picker-pb-081), and the editor of the chosen mode. A
+ * prop that takes no bindings (`accepts` is empty) has no switch. A mode the prop is switched to
+ * but has no value in yet (no field picked, no valid formula) is only shown, not written: nothing
+ * invalid reaches the document.
+ */
+export declare function ValueEditor({ def, label, raw, disabled, staticControl, onSet, onFixed, }: ValueEditorProps): import("react").JSX.Element;
+export interface ValueChipProps {
+    readonly def: PropDef;
+    readonly value: Value;
+}
+/** What a bound or formula prop shows where a control would be: the path or the formula, red when it is wrong. */
+export declare function ValueChip({ def, value }: ValueChipProps): import("react").JSX.Element | null;
+//# sourceMappingURL=value-editor.d.ts.map

package/dist/panels/inspector/values/value-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"value-editor.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/values/value-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,OAAO,EAEZ,KAAK,KAAK,EACX,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,KAAK,SAAS,EAAuC,MAAM,OAAO,CAAC;AAsC5E,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,GAAG,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,wFAAwF;IACxF,QAAQ,CAAC,GAAG,EAAE,KAAK,GAAG,SAAS,CAAC;IAChC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,gEAAgE;IAChE,QAAQ,CAAC,aAAa,EAAE,SAAS,CAAC;IAClC,qCAAqC;IACrC,QAAQ,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACvC,+DAA+D;IAC/D,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;CAC9B;AAKD;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,KAAK,EACL,GAAG,EACH,QAAQ,EACR,aAAa,EACb,KAAK,EACL,OAAO,GACR,EAAE,gBAAgB,+BAiElB;AAID,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,GAAG,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;CACvB;AAED,kHAAkH;AAClH,wBAAgB,SAAS,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,cAAc,sCAevD"}

package/dist/panels/inspector/values/value-editor.js

@@ -0,0 +1,191 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { bind, expr, schemaAtPath, } from '@next-buildr/core';
+import { useEffect, useId, useMemo, useState } from 'react';
+import { useT } from '../../../messages/index.js';
+import { Icon, Input, SegmentedControl, Select } from '../../../ui/index.js';
+import { bindingOptions, checkBinding, checkFormula, defaultFormat, formatKindsFor, previewValue, spanOf, } from './analyze.js';
+import { useInspectorData } from './data.js';
+/** How many fields the picker lists at once; a long list is narrowed with the search. */
+const MAX_LISTED = 100;
+/** The icon of each data type in the field list. */
+const TYPE_ICON = {
+    string: 'type',
+    number: 'hash',
+    boolean: 'toggle-left',
+    date: 'calendar',
+    url: 'link',
+    richText: 'text-align-start',
+    media: 'image',
+    link: 'link',
+    enum: 'list',
+    object: 'braces',
+    list: 'list',
+    ref: 'database',
+};
+const modeOf = (raw) => raw?.kind === 'binding' ? 'binding' : raw?.kind === 'expression' ? 'expression' : 'static';
+/**
+ * The switch between a fixed value, a field of the data and a formula
+ * (docs/editor.md#value-modes-and-the-binding-picker-pb-081), and the editor of the chosen mode. A
+ * prop that takes no bindings (`accepts` is empty) has no switch. A mode the prop is switched to
+ * but has no value in yet (no field picked, no valid formula) is only shown, not written: nothing
+ * invalid reaches the document.
+ */
+export function ValueEditor({ def, label, raw, disabled, staticControl, onSet, onFixed, }) {
+    const t = useT();
+    const [pending, setPending] = useState(null);
+    const saved = modeOf(raw);
+    const mode = saved === 'static' && pending !== null ? pending : saved;
+    const canBind = def.accepts.length > 0;
+    if (!canBind) {
+        return raw !== undefined && raw.kind !== 'static' ? (_jsx(ValueChip, { def: def, value: raw })) : (_jsx(_Fragment, { children: staticControl }));
+    }
+    const choose = (next) => {
+        if (next === mode)
+            return;
+        if (next === 'static') {
+            setPending(null);
+            if (saved !== 'static')
+                onFixed();
+            return;
+        }
+        setPending(next);
+    };
+    const modes = [
+        { mode: 'static', key: 'values.mode.static', icon: 'type' },
+        { mode: 'binding', key: 'values.mode.binding', icon: 'database' },
+        { mode: 'expression', key: 'values.mode.formula', icon: 'sigma' },
+    ];
+    return (_jsxs("div", { className: "bd-value", "data-mode": mode, children: [_jsx(SegmentedControl, { className: "bd-value-modes", label: `${label}: ${t('values.mode')}`, value: mode, disabled: disabled, options: modes.map((entry) => ({
+                    value: entry.mode,
+                    label: t(entry.key),
+                    icon: entry.icon,
+                })), onValueChange: (next) => choose(next) }), mode === 'static' ? staticControl : null, mode === 'binding' ? (_jsx(BindingEditor, { def: def, label: label, raw: raw?.kind === 'binding' ? raw : undefined, disabled: disabled, onSet: onSet })) : null, mode === 'expression' ? (_jsx(FormulaEditor, { def: def, label: label, raw: raw?.kind === 'expression' ? raw : undefined, disabled: disabled, onSet: onSet })) : null] }));
+}
+/** What a bound or formula prop shows where a control would be: the path or the formula, red when it is wrong. */
+export function ValueChip({ def, value }) {
+    const t = useT();
+    const { schema } = useInspectorData();
+    if (value.kind === 'static')
+        return null;
+    const invalid = value.kind === 'binding'
+        ? ['missing', 'type'].includes(checkBinding(schema, value.path, def.accepts))
+        : !checkFormula(value.expr, value.mode ?? 'formula', schema, def.accepts).valid;
+    return (_jsxs("p", { className: "bd-field-chip bd-value-chip", "data-invalid": invalid, children: [value.kind === 'binding' ? t('inspector.bound') : t('inspector.formula'), ":", ' ', _jsx("code", { children: value.kind === 'binding' ? value.path : value.expr }), invalid ? _jsxs("span", { children: [" (", t('values.chip.invalid'), ")"] }) : null] }));
+}
+// --- shared pieces ------------------------------------------------------------------------------
+function Preview({ value }) {
+    const t = useT();
+    const { context } = useInspectorData();
+    const preview = useMemo(() => previewValue(value, context), [value, context]);
+    if (context === undefined)
+        return null;
+    return (_jsxs("p", { className: "bd-value-preview bd-card", children: [_jsx(Icon, { name: "eye" }), _jsxs("span", { className: "bd-value-preview-label", children: [t('values.preview'), ": "] }), preview.text !== undefined ? (_jsx("output", { children: preview.text })) : (_jsx("span", { className: "bd-value-preview-none", children: t('values.preview.none') }))] }));
+}
+function Fallback(props) {
+    const t = useT();
+    const shown = props.value === undefined || props.value === null ? '' : String(props.value);
+    return (_jsxs("div", { className: "bd-value-row", children: [_jsx("span", { children: t('values.fallback') }), _jsx(Input, { "aria-label": t('values.fallback'), type: "text", value: shown, disabled: props.disabled, onChange: (event) => {
+                    const text = event.target.value;
+                    if (text === '')
+                        return props.onChange(undefined);
+                    const number = Number(text);
+                    props.onChange(props.def.kind === 'number' && Number.isFinite(number) ? number : text);
+                } })] }));
+}
+// --- data bindings ------------------------------------------------------------------------------
+const STATUS_KEY = {
+    missing: 'values.binding.missing',
+    type: 'values.binding.type',
+};
+function BindingEditor(props) {
+    const { def, raw, disabled, onSet } = props;
+    const t = useT();
+    const { schema } = useInspectorData();
+    const pathId = useId();
+    const [query, setQuery] = useState('');
+    const [draft, setDraft] = useState(raw?.path ?? '');
+    useEffect(() => setDraft(raw?.path ?? ''), [raw?.path]);
+    const options = useMemo(() => bindingOptions(schema, def.accepts), [schema, def.accepts]);
+    const needle = query.trim().toLowerCase();
+    const listed = options.filter((option) => needle === '' ||
+        option.path.toLowerCase().includes(needle) ||
+        (option.label?.toLowerCase().includes(needle) ?? false));
+    const status = raw === undefined ? 'unchecked' : checkBinding(schema, raw.path, def.accepts);
+    const statusKey = STATUS_KEY[status];
+    const tag = raw === undefined || schema === undefined ? undefined : schemaAtPath(schema, raw.path)?.type.t;
+    const write = (path, extra) => onSet(bind(path, {
+        ...(extra.format !== undefined ? { format: extra.format } : {}),
+        ...(extra.fallback !== undefined ? { fallback: extra.fallback } : {}),
+    }));
+    const keep = { format: raw?.format, fallback: raw?.fallback };
+    const commitPath = (path) => {
+        const trimmed = path.trim();
+        if (trimmed === '' || trimmed === raw?.path)
+            return;
+        write(trimmed, keep);
+    };
+    return (_jsxs("div", { className: "bd-value-binding", children: [raw !== undefined ? _jsx(ValueChip, { def: def, value: raw }) : null, _jsx("label", { className: "bd-value-row", htmlFor: pathId, children: _jsx("span", { children: t('values.binding.path') }) }), _jsx(Input, { id: pathId, type: "text", value: draft, disabled: disabled, "aria-invalid": statusKey !== undefined, placeholder: t('values.binding.pick'), onChange: (event) => setDraft(event.target.value), onBlur: () => commitPath(draft), onKeyDown: (event) => {
+                    if (event.key === 'Enter')
+                        commitPath(draft);
+                } }), statusKey !== undefined ? (_jsx("p", { className: "bd-value-error", role: "alert", children: t(statusKey) })) : null, schema === undefined ? (_jsx("p", { className: "bd-field-hint", children: t('values.binding.noSchema') })) : (_jsxs(_Fragment, { children: [_jsx(Input, { type: "search", value: query, disabled: disabled, "aria-label": t('values.binding.search'), placeholder: t('values.binding.search'), onChange: (event) => setQuery(event.target.value) }), listed.length === 0 ? (_jsx("p", { className: "bd-field-hint", children: t('values.binding.none') })) : (_jsx("ul", { className: "bd-value-fields", children: listed.slice(0, MAX_LISTED).map((option) => (_jsx("li", { children: _jsxs("button", { type: "button", className: "bd-value-field", "aria-pressed": raw?.path === option.path, disabled: disabled, onClick: () => write(option.path, keep), children: [_jsx(Icon, { name: TYPE_ICON[option.tag], className: "bd-value-field-icon" }), _jsx("code", { children: option.path }), _jsx("span", { className: "bd-value-field-type", children: option.tag })] }) }, option.path))) }))] })), raw !== undefined ? (_jsxs(_Fragment, { children: [_jsx(FormatEditor, { format: raw.format, tag: tag, disabled: disabled, onChange: (format) => write(raw.path, { format, fallback: keep.fallback }) }), _jsx(Fallback, { def: def, value: raw.fallback, disabled: disabled, onChange: (fallback) => write(raw.path, { format: raw.format, fallback }) }), _jsx(Preview, { value: raw })] })) : null] }));
+}
+function FormatEditor(props) {
+    const { format, disabled, onChange } = props;
+    const t = useT();
+    const kinds = formatKindsFor(props.tag);
+    if (kinds.length <= 1 && format === undefined)
+        return null;
+    const kind = format?.type ?? 'none';
+    const opts = (values, key) => values.map((value) => ({ value, label: t(key(value)) }));
+    return (_jsxs("div", { className: "bd-value-format", children: [_jsx(Select, { label: t('values.format'), value: kind, disabled: disabled, options: opts(kinds, (value) => `values.format.${value}`), onValueChange: (next) => onChange(defaultFormat(next)) }), format?.type === 'date' ? (_jsx(Select, { label: t('values.format.dateStyle'), value: format.style, disabled: disabled, options: opts(['short', 'medium', 'long', 'iso'], (v) => `values.style.${v}`), onValueChange: (style) => onChange({ type: 'date', style: style }) })) : null, format?.type === 'number' ? (_jsx(Select, { label: t('values.format.numberStyle'), value: format.style ?? 'decimal', disabled: disabled, options: opts(['decimal', 'percent'], (v) => `values.style.${v}`), onValueChange: (style) => onChange({ ...format, style: style }) })) : null, format?.type === 'currency' ? (_jsxs("div", { className: "bd-value-row", children: [_jsx("span", { children: t('values.format.currencyCode') }), _jsx(Input, { "aria-label": t('values.format.currencyCode'), type: "text", value: format.currency, maxLength: 3, disabled: disabled, onChange: (event) => {
+                            const currency = event.target.value.toUpperCase();
+                            if (/^[A-Z]{3}$/.test(currency))
+                                onChange({ type: 'currency', currency });
+                        } })] })) : null, format?.type === 'text' ? (_jsx(Select, { label: t('values.format.transform'), value: format.transform ?? 'none', disabled: disabled, options: opts(['none', 'upper', 'lower', 'capitalize'], (v) => `values.transform.${v}`), onValueChange: (transform) => {
+                    const { transform: _drop, ...rest } = format;
+                    onChange(transform === 'none'
+                        ? rest
+                        : { ...rest, transform: transform });
+                } })) : null] }));
+}
+// --- formulas -----------------------------------------------------------------------------------
+function FormulaEditor(props) {
+    const { def, raw, disabled, onSet } = props;
+    const t = useT();
+    const { schema } = useInspectorData();
+    const sourceId = useId();
+    const [draft, setDraft] = useState(raw?.expr ?? '');
+    const [mode, setMode] = useState(raw?.mode ?? 'formula');
+    // An undo (or anything else that changes the saved formula) replaces the draft.
+    useEffect(() => {
+        if (raw !== undefined) {
+            setDraft(raw.expr);
+            setMode(raw.mode ?? 'formula');
+        }
+    }, [raw?.expr, raw?.mode, raw]);
+    const check = useMemo(() => checkFormula(draft, mode, schema, def.accepts), [draft, mode, schema, def.accepts]);
+    const fallback = raw?.fallback;
+    const emit = (source, nextMode, nextFallback = fallback) => onSet(expr(source, {
+        ...(nextMode === 'template' ? { mode: 'template' } : {}),
+        ...(nextFallback !== undefined ? { fallback: nextFallback } : {}),
+        // A translation belongs to the formula it was written for.
+        ...(raw?.l10n !== undefined && raw.expr === source ? { l10n: raw.l10n } : {}),
+    }));
+    // Only a formula that checks out is written; the fallback of a saved one is always editable.
+    const write = (source, nextMode) => {
+        if (checkFormula(source, nextMode, schema, def.accepts).valid)
+            emit(source, nextMode);
+    };
+    const saved = raw !== undefined && raw.expr === draft && (raw.mode ?? 'formula') === mode;
+    const modes = ['formula', 'template'];
+    return (_jsxs("div", { className: "bd-value-formula", children: [raw !== undefined ? _jsx(ValueChip, { def: def, value: raw }) : null, _jsx(SegmentedControl, { className: "bd-value-modes", label: t('values.formula.mode'), value: mode, disabled: disabled, options: modes.map((entry) => ({ value: entry, label: t(`values.formula.mode.${entry}`) })), onValueChange: (entry) => {
+                    setMode(entry);
+                    write(draft, entry);
+                } }), _jsx("label", { className: "bd-value-row", htmlFor: sourceId, children: _jsx("span", { children: t('values.formula.source') }) }), _jsx("textarea", { id: sourceId, className: "bd-input bd-value-source", rows: 3, value: draft, disabled: disabled, spellCheck: false, "aria-invalid": !check.valid, onChange: (event) => {
+                    setDraft(event.target.value);
+                    write(event.target.value, mode);
+                } }), draft !== '' && check.diagnostics.length > 0 ? (_jsx("ul", { className: "bd-value-diagnostics", "aria-live": "polite", children: check.diagnostics.map((diagnostic, index) => {
+                    const span = spanOf(diagnostic);
+                    return (_jsxs("li", { "data-severity": diagnostic.severity, children: [span !== undefined ? _jsx("code", { children: draft.slice(span.start, span.end) }) : null, ' ', diagnostic.message] }, index));
+                }) })) : null, draft !== '' && !check.valid && !saved ? (_jsx("p", { className: "bd-value-error", role: "alert", children: t('values.formula.unsaved') })) : null, check.valid && check.diagnostics.length === 0 && draft !== '' ? (_jsx("p", { className: "bd-field-hint", children: t('values.formula.valid') })) : null, raw !== undefined ? (_jsxs(_Fragment, { children: [_jsx(Fallback, { def: def, value: raw.fallback, disabled: disabled, onChange: (next) => emit(raw.expr, raw.mode ?? 'formula', next) }), _jsx(Preview, { value: raw })] })) : null] }));
+}

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

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

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

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

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

@@ -0,0 +1,173 @@
+import { jsx as _jsx } 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 { ManifestProvider } from '../../../app/manifest.js';
+import { MessagesProvider } from '../../../messages/index.js';
+import { createEditorStore, EditorStoreProvider } from '../../../store/index.js';
+import { Inspector } from '../inspector.js';
+import { bindingOptions, checkBinding, checkFormula, defaultFormat, formatKindsFor, previewValue, } from './analyze.js';
+import { InspectorDataProvider } from './data.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const widget = {
+    type: 'buildr/widget',
+    version: 1,
+    label: 'Widget',
+    category: 'content',
+    props: {
+        title: p.text({ label: 'Title', default: 'Hello' }),
+        fixed: p.boolean({ default: true }),
+    },
+    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 schema = {
+    scopes: {
+        post: {
+            type: {
+                t: 'object',
+                fields: {
+                    title: { type: { t: 'string' }, label: 'Title' },
+                    views: { type: { t: 'number' } },
+                    published: { type: { t: 'date' } },
+                },
+            },
+        },
+    },
+    entities: {},
+};
+const context = {
+    scopes: { post: { title: 'Hello world', views: 3, published: '2026-01-02T00:00:00Z' } },
+    locale: 'en',
+    locales: { default: 'en', fallback: true, intl: { en: 'en-US' } },
+    timeZone: 'UTC',
+    mode: 'preview',
+};
+const fixture = (props) => ({
+    schemaVersion: 1,
+    root: 'root',
+    nodes: {
+        root: { id: 'root', type: 'buildr/page', slots: { default: ['widget0001'] } },
+        widget0001: {
+            id: 'widget0001',
+            type: 'buildr/widget',
+            ...(props === undefined ? {} : { props: props }),
+        },
+    },
+    components: {},
+});
+describe('analyze', () => {
+    const accepts = ['string'];
+    it('lists the fields a prop can take', () => {
+        expect(bindingOptions(schema, accepts).map((option) => option.path)).toEqual(['post.title']);
+        expect(bindingOptions(undefined, accepts)).toEqual([]);
+    });
+    it('checks a binding against the schema', () => {
+        expect(checkBinding(schema, 'post.title', accepts)).toBe('ok');
+        expect(checkBinding(schema, 'post.nope', accepts)).toBe('missing');
+        expect(checkBinding(schema, 'post.views', accepts)).toBe('type');
+        expect(checkBinding(undefined, 'post.views', accepts)).toBe('unchecked');
+    });
+    it('checks a formula without running it', () => {
+        expect(checkFormula('post.title', 'formula', schema, accepts).valid).toBe(true);
+        expect(checkFormula('post.title +', 'formula', schema, accepts).valid).toBe(false);
+        expect(checkFormula('   ', 'formula', schema, accepts).valid).toBe(false);
+        expect(checkFormula('Hi {{ post.title }}', 'template', schema, accepts).valid).toBe(true);
+    });
+    it('previews a value against sample data and never throws', () => {
+        expect(previewValue({ kind: 'binding', path: 'post.title' }, context).text).toBe('Hello world');
+        expect(previewValue({ kind: 'expression', expr: 'post.views' }, context).text).toBe('3');
+        expect(previewValue({ kind: 'expression', expr: 'post.views +' }, context).text).toBeUndefined();
+        expect(previewValue({ kind: 'binding', path: 'post.title' }, undefined).text).toBeUndefined();
+        expect(previewValue(s('x'), context).text).toBeUndefined();
+    });
+    it('offers formats that fit the field', () => {
+        expect(formatKindsFor('date')).toEqual(['none', 'date']);
+        expect(defaultFormat('none')).toBeUndefined();
+        expect(defaultFormat('currency')).toEqual({ type: 'currency', currency: 'USD' });
+    });
+});
+describe('value modes in the inspector', () => {
+    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(props) {
+        const store = createEditorStore({
+            doc: fixture(props),
+            registry,
+            generateId: createSeededIdGenerator(3),
+            validationDelayMs: null,
+        });
+        store.select('widget0001');
+        await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(ManifestProvider, { manifest: manifest, children: _jsx(EditorStoreProvider, { store: store, children: _jsx(InspectorDataProvider, { schema: schema, context: context, children: _jsx(Inspector, {}) }) }) }) })));
+        return store;
+    }
+    const title = () => container.querySelector('[data-prop=title]');
+    const button = (name) => [...title().querySelectorAll('button')].find((element) => element.textContent === name);
+    const click = (element) => act(async () => {
+        element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    });
+    const propOf = (store) => store.getState().doc.nodes['widget0001']?.props?.['title'];
+    it('picking a field writes a binding', async () => {
+        const store = await mount();
+        await click(button('Data'));
+        const field = [...title().querySelectorAll('button')].find((element) => element.textContent?.includes('post.title'));
+        expect(field).toBeDefined();
+        await click(field);
+        expect(propOf(store)).toMatchObject({ kind: 'binding', path: 'post.title' });
+        expect(title().textContent).toContain('Hello world');
+    });
+    it('does not save an invalid formula and says why', async () => {
+        const store = await mount({ title: { kind: 'expression', expr: 'post.title' } });
+        const area = title().querySelector('textarea');
+        await act(async () => {
+            const setter = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')?.set;
+            setter?.call(area, 'post.title +');
+            area.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+        expect(propOf(store)).toEqual({ kind: 'expression', expr: 'post.title' });
+        expect(title().querySelector('[role=alert]')).not.toBeNull();
+    });
+    it('marks a binding to a missing field as invalid', async () => {
+        await mount({ title: { kind: 'binding', path: 'post.gone' } });
+        expect(title().textContent).toContain('This field does not exist');
+    });
+    it('shows the mode switch as a segmented control with icons, and the field list with type icons', async () => {
+        await mount({ title: { kind: 'binding', path: 'post.title' } });
+        const modes = title().querySelector('.bd-value-modes.bd-segmented');
+        expect(modes?.tagName).toBe('FIELDSET');
+        expect(modes?.querySelectorAll('svg')).toHaveLength(3);
+        expect(title().querySelector('.bd-value-field-icon')).not.toBeNull();
+        expect(title().querySelector('.bd-value-preview.bd-card')).not.toBeNull();
+    });
+    it('switching back to Fixed restores a static value', async () => {
+        const store = await mount({ title: { kind: 'binding', path: 'post.title' } });
+        await click(button('Fixed'));
+        expect(propOf(store)?.kind ?? 'static').toBe('static');
+    });
+});

package/dist/panels/issues/collect.d.ts

@@ -0,0 +1,70 @@
+import type { A11yFix, A11yIssue, BuilderDocument, Diagnostic, NodeId, ValidationIssue } from '@next-buildr/core';
+export type IssueSeverity = 'error' | 'warning' | 'info';
+export type IssueSource = 'validation' | 'a11y' | 'canvas';
+/** One row of the Issues panel: a finding of any of the checks, in one shape. */
+export interface IssueItem {
+    readonly key: string;
+    readonly source: IssueSource;
+    readonly severity: IssueSeverity;
+    /** The rule or the diagnostic code. */
+    readonly code: string;
+    readonly message: string;
+    readonly help?: string | undefined;
+    /** The node it is about, when it is about one that is still in the document. */
+    readonly nodeId?: NodeId | undefined;
+    /** The document must not be saved or published while it exists. */
+    readonly blocking: boolean;
+    readonly fix?: A11yFix | undefined;
+    /** The language a finding was made in (`missing-translation`); absent for the ones that do not depend on it. */
+    readonly locale?: string | undefined;
+}
+/** The node a diagnostic is about: the one its path points into, else the one it names in `details`. */
+export declare function nodeOfDiagnostic(diagnostic: Diagnostic): NodeId | undefined;
+export interface CollectInput {
+    readonly doc: BuilderDocument;
+    readonly validation?: readonly ValidationIssue[] | undefined;
+    readonly a11y?: readonly A11yIssue[] | undefined;
+    /** What the canvas reported (a component that threw, a binding that failed at render). */
+    readonly canvas?: readonly Diagnostic[] | undefined;
+}
+/**
+ * Merges the findings of validation, the accessibility rules and the canvas into one list: worst
+ * first, then in the order the checks reported them. A finding about a node that is gone keeps its
+ * text but loses its node, so clicking it does nothing rather than selecting a stale id.
+ */
+export declare function collectIssues(input: CollectInput): IssueItem[];
+export type SeverityFilter = 'all' | IssueSeverity;
+export declare function filterIssues(items: readonly IssueItem[], filter: SeverityFilter): IssueItem[];
+export interface IssueCounts {
+    readonly all: number;
+    readonly error: number;
+    readonly warning: number;
+    readonly info: number;
+}
+export declare function countIssues(items: readonly IssueItem[]): IssueCounts;
+export type PublishPolicy = 'warn' | 'block';
+export interface PublishGate {
+    /** Publishing is not allowed. */
+    readonly blocked: boolean;
+    /** Why: a corrupt document always blocks; errors block under the `block` policy. */
+    readonly reason: 'blocking' | 'errors' | undefined;
+    readonly counts: IssueCounts;
+}
+/**
+ * Whether the findings allow publishing. A blocking validation issue (a corrupt structure) stops
+ * it under any policy; under `publishPolicy: 'block'` so does any error, from validation or from
+ * the accessibility rules. Under `'warn'` (the default) the author is told and may go on.
+ */
+export declare function publishGate(items: readonly IssueItem[], policy?: PublishPolicy): PublishGate;
+/** The rule that flags a translatable text with no translation; the panel lists its findings per language. */
+export declare const MISSING_TRANSLATION = "missing-translation";
+export interface MissingGroup {
+    readonly locale: string;
+    readonly items: readonly IssueItem[];
+}
+/** Splits the findings into the ordinary ones and the missing translations, those grouped by language in the order the languages first appear. */
+export declare function groupMissingTranslations(items: readonly IssueItem[]): {
+    readonly rest: readonly IssueItem[];
+    readonly groups: readonly MissingGroup[];
+};
+//# sourceMappingURL=collect.d.ts.map

package/dist/panels/issues/collect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collect.d.ts","sourceRoot":"","sources":["../../../src/panels/issues/collect.ts"],"names":[],"mappings":"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"}