@next-buildr/editor 0.0.0-stage → 2.0.1

package/dist/app/builder-editor.d.ts

@@ -0,0 +1,8 @@
+import { type BuilderEditorProps } from './config.ts';
+/**
+ * The editor (docs/editor.md#layout-and-modules): `<BuilderEditor adapter manifest canvasUrl
+ * documentRef config />`. It fills its container, so give the container a height. The panels are
+ * added by the following tasks; the props are already the final mount API.
+ */
+export declare function BuilderEditor(props: BuilderEditorProps): import("react").JSX.Element;
+//# sourceMappingURL=builder-editor.d.ts.map

package/dist/app/builder-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"builder-editor.d.ts","sourceRoot":"","sources":["../../src/app/builder-editor.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,kBAAkB,EAAiB,MAAM,aAAa,CAAC;AAGrE;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAatD"}

package/dist/app/builder-editor.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { MessagesProvider } from '../messages/index.js';
+import { resolveConfig } from './config.js';
+import { EditorLayout } from './layout.js';
+/**
+ * The editor (docs/editor.md#layout-and-modules): `<BuilderEditor adapter manifest canvasUrl
+ * documentRef config />`. It fills its container, so give the container a height. The panels are
+ * added by the following tasks; the props are already the final mount API.
+ */
+export function BuilderEditor(props) {
+    const config = useMemo(() => resolveConfig(props.config), [props.config]);
+    return (_jsx(MessagesProvider, { locale: config.uiLocale, children: _jsx("div", { className: "buildr-editor", lang: config.uiLocale, ...(config.theme !== 'system' ? { 'data-theme': config.theme } : {}), children: _jsx(EditorLayout, {}) }) }));
+}

package/dist/app/builder-editor.test.d.ts

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

package/dist/app/builder-editor.test.d.ts.map

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

package/dist/app/builder-editor.test.js

@@ -0,0 +1,199 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { axe } from 'vitest-axe';
+import * as matchers from 'vitest-axe/matchers';
+import { en } from '../messages/en.js';
+import { createTranslator, MessagesProvider, UI_LOCALES } from '../messages/index.js';
+import { pl } from '../messages/pl.js';
+import { PanelToggle } from '../toolbar/panel-toggles.js';
+import { BuilderEditor } from './builder-editor.js';
+import { resolveConfig } from './config.js';
+import { EditorLayout } from './layout.js';
+expect.extend(matchers);
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const manifest = {
+    manifestVersion: 1,
+    components: [],
+    templates: [],
+};
+const props = (overrides = {}) => ({
+    adapter: {},
+    manifest,
+    canvasUrl: '/buildr/canvas',
+    documentRef: { collection: 'pages', id: '1' },
+    ...overrides,
+});
+let container;
+let root;
+beforeEach(() => {
+    window.localStorage.clear();
+    container = document.createElement('div');
+    document.body.append(container);
+    root = createRoot(container);
+});
+afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+});
+const show = async (p) => {
+    await act(async () => root.render(_jsx(BuilderEditor, { ...p })));
+};
+const $ = (selector) => container.querySelector(selector);
+const key = (el, k) => act(async () => {
+    el?.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true }));
+});
+describe('BuilderEditor shell', () => {
+    it('renders the regions, each with a translated name', async () => {
+        await show(props());
+        expect($('[role=toolbar]').getAttribute('aria-label')).toBe(en['editor.toolbar']);
+        expect($('main').getAttribute('aria-label')).toBe(en['editor.canvas']);
+        const asides = [...container.querySelectorAll('aside')].map((el) => el.getAttribute('aria-label'));
+        expect(asides).toEqual([en['editor.leftPanel'], en['editor.inspector']]);
+        expect($('section').getAttribute('aria-label')).toBe(en['editor.issues']);
+    });
+    it('speaks the configured interface language, and English for one it does not know', async () => {
+        await show(props({ config: { uiLocale: 'pl' } }));
+        expect($('[role=toolbar]').getAttribute('aria-label')).toBe(pl['editor.toolbar']);
+        expect($('.buildr-editor').getAttribute('lang')).toBe('pl');
+        await show(props({ config: { uiLocale: 'xx' } }));
+        expect($('[role=toolbar]').getAttribute('aria-label')).toBe(en['editor.toolbar']);
+    });
+    it('has a Polish translation for every English string', () => {
+        expect(Object.keys(pl).sort()).toEqual(Object.keys(en).sort());
+        for (const k of Object.keys(en))
+            expect(pl[k]).not.toBe('');
+        expect(UI_LOCALES).toEqual(['en', 'pl']);
+        expect(createTranslator('pl-PL')('ui.close')).toBe(pl['ui.close']);
+    });
+    it('forces a colour scheme when asked, and otherwise follows the system', async () => {
+        await show(props({ config: { theme: 'dark' } }));
+        expect($('.buildr-editor').getAttribute('data-theme')).toBe('dark');
+        await show(props());
+        expect($('.buildr-editor').hasAttribute('data-theme')).toBe(false);
+    });
+    it('resizes the panels with the keyboard, within limits', async () => {
+        await show(props());
+        const [left, right] = container.querySelectorAll('[role=separator]');
+        expect(left?.getAttribute('aria-valuenow')).toBe('280');
+        await key(left, 'ArrowRight');
+        expect(left?.getAttribute('aria-valuenow')).toBe('296');
+        expect($('.bd-body').style.getPropertyValue('--bd-left')).toBe('296px');
+        await key(left, 'Home');
+        expect(left?.getAttribute('aria-valuenow')).toBe('200');
+        await key(left, 'ArrowLeft');
+        expect(left?.getAttribute('aria-valuenow')).toBe('200');
+        // The right panel grows when its splitter moves left.
+        await key(right, 'ArrowLeft');
+        expect(right?.getAttribute('aria-valuenow')).toBe('336');
+    });
+    it('resizes the panels by dragging', async () => {
+        await show(props());
+        const left = container.querySelector('[role=separator]');
+        const pointer = (type, x) => act(async () => {
+            left?.dispatchEvent(new MouseEvent(type, { clientX: x, bubbles: true }));
+        });
+        await pointer('pointerdown', 100);
+        expect(left?.getAttribute('data-dragging')).toBe('true');
+        await pointer('pointermove', 160);
+        expect(left?.getAttribute('aria-valuenow')).toBe('340');
+        await pointer('pointermove', 900);
+        expect(left?.getAttribute('aria-valuenow')).toBe('480');
+        await pointer('pointerup', 900);
+        expect(left?.getAttribute('data-dragging')).toBe('false');
+    });
+    it('shows and hides the issues panel', async () => {
+        await show(props());
+        const toggle = container.querySelector('.bd-issues button');
+        expect(toggle?.textContent).toBe(en['editor.issues.show']);
+        expect(toggle?.getAttribute('aria-expanded')).toBe('false');
+        await act(async () => toggle?.click());
+        expect(toggle?.textContent).toBe(en['editor.issues.hide']);
+        expect($('.bd-issues').getAttribute('data-open')).toBe('true');
+    });
+    it('resets a panel on double-click and remembers the widths', async () => {
+        await show(props());
+        const [left] = container.querySelectorAll('[role=separator]');
+        await key(left, 'ArrowRight');
+        expect(window.localStorage.getItem('buildr:editor:left-width')).toBe('296');
+        await act(async () => {
+            left?.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }));
+        });
+        expect(left?.getAttribute('aria-valuenow')).toBe('280');
+        expect(window.localStorage.getItem('buildr:editor:left-width')).toBe('280');
+        window.localStorage.setItem('buildr:editor:left-width', '400');
+        await act(async () => root.unmount());
+        root = createRoot(container);
+        await show(props());
+        expect(container.querySelector('[role=separator]')?.getAttribute('aria-valuenow')).toBe('400');
+    });
+    it('works without storage', async () => {
+        const getItem = vi.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {
+            throw new Error('denied');
+        });
+        const setItem = vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+            throw new Error('denied');
+        });
+        await show(props());
+        const [left] = container.querySelectorAll('[role=separator]');
+        await key(left, 'ArrowRight');
+        expect(left?.getAttribute('aria-valuenow')).toBe('296');
+        getItem.mockRestore();
+        setItem.mockRestore();
+    });
+    it('shows the issue counts on the status bar toggle', async () => {
+        await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(EditorLayout, { issueCounts: { error: 2, warning: 3 }, status: _jsx("span", { children: "info" }) }) })));
+        const toggle = container.querySelector('.bd-issues button');
+        expect(toggle?.querySelector('[data-severity=error]')?.textContent).toBe('2');
+        expect(toggle?.querySelector('[data-severity=warning]')?.textContent).toBe('3');
+        expect(toggle?.textContent).toContain(en['editor.issues.show']);
+        expect($('.bd-issues-bar').textContent).toContain('info');
+        await act(async () => toggle?.click());
+        expect($('.bd-issues').getAttribute('data-open')).toBe('true');
+    });
+    it('turns the panels into toolbar-toggled overlays when the editor is narrow', async () => {
+        let notify;
+        class FakeObserver {
+            constructor(callback) {
+                notify = callback;
+            }
+            observe() { }
+            disconnect() { }
+        }
+        vi.stubGlobal('ResizeObserver', FakeObserver);
+        const width = vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(1300);
+        await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx("div", { className: "buildr-editor", children: _jsx(EditorLayout, { toolbar: _jsx(PanelToggle, { side: "left" }) }) }) })));
+        expect($('.bd-body').getAttribute('data-narrow')).toBe('false');
+        expect(container.querySelector('.bd-toolbar button')).toBeNull();
+        await act(async () => notify?.([{ contentRect: { width: 900 } }]));
+        expect($('.bd-body').getAttribute('data-narrow')).toBe('true');
+        const left = $('aside[data-side=left]');
+        expect(left.hidden).toBe(true);
+        const button = $('.bd-toolbar button');
+        expect(button.getAttribute('aria-label')).toBe(en['editor.panels.left']);
+        await act(async () => button.click());
+        expect(left.hidden).toBe(false);
+        expect(button.getAttribute('aria-pressed')).toBe('true');
+        await key(left, 'Escape');
+        expect(left.hidden).toBe(true);
+        await act(async () => notify?.([{ contentRect: { width: 1300 } }]));
+        expect($('.bd-body').getAttribute('data-narrow')).toBe('false');
+        width.mockRestore();
+        vi.unstubAllGlobals();
+    });
+    it('has no accessibility violations', async () => {
+        await show(props());
+        expect(await axe(container)).toHaveNoViolations();
+        await show(props({ config: { uiLocale: 'pl', theme: 'dark' } }));
+        expect(await axe(container)).toHaveNoViolations();
+    });
+});
+describe('resolveConfig', () => {
+    it('fills in the defaults and keeps what the host set', () => {
+        const config = resolveConfig();
+        expect(config.breakpoints.map((b) => b.id)).toEqual(['desktop', 'tablet', 'mobile']);
+        expect(config.autosave).toEqual({ debounceMs: 2000, maxWaitMs: 20_000 });
+        expect(resolveConfig({ autosave: { debounceMs: 1, maxWaitMs: 2 }, uiLocale: 'pl' })).toMatchObject({ autosave: { debounceMs: 1, maxWaitMs: 2 }, uiLocale: 'pl' });
+    });
+});

package/dist/app/config.d.ts

@@ -0,0 +1,59 @@
+import type { RegistryManifest } from '@next-buildr/core';
+import type { DocumentAdapter, DocumentRef } from '../persistence/types.ts';
+export type { DocumentRef };
+/** One canvas width the toolbar offers (PB-083). */
+export interface BreakpointConfig {
+    readonly id: string;
+    readonly width: number;
+}
+export interface EditorConfig {
+    /** The widths of the canvas the author can switch between. */
+    readonly breakpoints?: readonly BreakpointConfig[];
+    /** Overrides for keyboard shortcuts, by action id (PB-084). */
+    readonly shortcuts?: Readonly<Record<string, string>>;
+    readonly autosave?: {
+        /** Save after this long without a change. */
+        readonly debounceMs: number;
+        /** But at the latest this long after the first unsaved change. */
+        readonly maxWaitMs: number;
+    };
+    /** The language of the editor's own interface (not the content's). */
+    readonly uiLocale?: string;
+    /** Forces a colour scheme; by default it follows the system's. */
+    readonly theme?: 'light' | 'dark' | 'system';
+    /**
+     * The narrowest window (in CSS pixels) the editor opens in; below it a notice asks the author to
+     * use a computer. Defaults to 1024 (phones and tablets held upright); `0` turns the check off.
+     */
+    readonly minViewportWidth?: number;
+}
+export interface ResolvedEditorConfig {
+    readonly breakpoints: readonly BreakpointConfig[];
+    readonly shortcuts: Readonly<Record<string, string>>;
+    readonly autosave: {
+        readonly debounceMs: number;
+        readonly maxWaitMs: number;
+    };
+    readonly uiLocale: string;
+    readonly theme: 'light' | 'dark' | 'system';
+    readonly minViewportWidth: number;
+}
+/** Below this window width the editor does not open: its panels and the canvas need the room. */
+export declare const DEFAULT_MIN_VIEWPORT_WIDTH = 1024;
+export declare const DEFAULT_BREAKPOINTS: readonly BreakpointConfig[];
+/** Fills in what a host left out. */
+export declare function resolveConfig(config?: EditorConfig): ResolvedEditorConfig;
+export interface BuilderEditorProps {
+    /**
+     * Loads, saves and publishes the document (`DocumentAdapter`, PB-087). The shell does not use it
+     * yet; it is part of the mount API so hosts do not change when the panels arrive.
+     */
+    readonly adapter: DocumentAdapter;
+    /** What the palette, the inspector and the rules know about the components (`toManifest`). */
+    readonly manifest: RegistryManifest;
+    /** The canvas route the iframe loads (`@next-buildr/react/canvas` runs there). */
+    readonly canvasUrl: string;
+    readonly documentRef: DocumentRef;
+    readonly config?: EditorConfig;
+}
+//# sourceMappingURL=config.d.ts.map

package/dist/app/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/app/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE5E,YAAY,EAAE,WAAW,EAAE,CAAC;AAE5B,oDAAoD;AACpD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,YAAY;IAC3B,8DAA8D;IAC9D,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACnD,+DAA+D;IAC/D,QAAQ,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACtD,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAClB,6CAA6C;QAC7C,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;QAC5B,kEAAkE;QAClE,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;KAC5B,CAAC;IACF,sEAAsE;IACtE,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,kEAAkE;IAClE,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC7C;;;OAGG;IACH,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CACpC;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,WAAW,EAAE,SAAS,gBAAgB,EAAE,CAAC;IAClD,QAAQ,CAAC,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACrD,QAAQ,CAAC,QAAQ,EAAE;QAAE,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/E,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC5C,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;CACnC;AAED,iGAAiG;AACjG,eAAO,MAAM,0BAA0B,OAAO,CAAC;AAE/C,eAAO,MAAM,mBAAmB,EAAE,SAAS,gBAAgB,EAI1D,CAAC;AAEF,qCAAqC;AACrC,wBAAgB,aAAa,CAAC,MAAM,GAAE,YAAiB,GAAG,oBAAoB,CAS7E;AAED,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,QAAQ,CAAC,OAAO,EAAE,eAAe,CAAC;IAClC,8FAA8F;IAC9F,QAAQ,CAAC,QAAQ,EAAE,gBAAgB,CAAC;IACpC,kFAAkF;IAClF,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC;IAClC,QAAQ,CAAC,MAAM,CAAC,EAAE,YAAY,CAAC;CAChC"}

package/dist/app/config.js

@@ -0,0 +1,18 @@
+/** Below this window width the editor does not open: its panels and the canvas need the room. */
+export const DEFAULT_MIN_VIEWPORT_WIDTH = 1024;
+export const DEFAULT_BREAKPOINTS = [
+    { id: 'desktop', width: 1280 },
+    { id: 'tablet', width: 820 },
+    { id: 'mobile', width: 390 },
+];
+/** Fills in what a host left out. */
+export function resolveConfig(config = {}) {
+    return {
+        breakpoints: config.breakpoints ?? DEFAULT_BREAKPOINTS,
+        shortcuts: config.shortcuts ?? {},
+        autosave: config.autosave ?? { debounceMs: 2000, maxWaitMs: 20_000 },
+        uiLocale: config.uiLocale ?? 'en',
+        theme: config.theme ?? 'system',
+        minViewportWidth: config.minViewportWidth ?? DEFAULT_MIN_VIEWPORT_WIDTH,
+    };
+}

package/dist/app/content-language.test.d.ts

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

package/dist/app/content-language.test.d.ts.map

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

package/dist/app/content-language.test.js

@@ -0,0 +1,157 @@
+import { Fragment as _Fragment, 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 { MessagesProvider } from '../messages/index.js';
+import { Inspector } from '../panels/inspector/index.js';
+import { IssuesPanel } from '../panels/issues/index.js';
+import { createEditorStore, createLocaleStore, EditorStoreProvider, LocaleProvider, useLocaleState, } from '../store/index.js';
+import { LocaleSwitcher } from '../toolbar/index.js';
+import { ManifestProvider } from './manifest.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const locales = {
+    locales: ['en', 'pl', 'de'],
+    default: 'en',
+    fallback: true,
+    intl: { en: 'English', pl: 'Polski', de: 'Deutsch' },
+};
+const widget = {
+    type: 'buildr/widget',
+    version: 1,
+    label: 'Widget',
+    category: 'content',
+    props: { title: p.text({ label: 'Title', default: 'Hello' }) },
+    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', 'widget0002'] } },
+        widget0001: { id: 'widget0001', type: 'buildr/widget', props: { title: s('Hello') } },
+        widget0002: {
+            id: 'widget0002',
+            type: 'buildr/widget',
+            props: { title: { kind: 'static', value: 'Bye', l10n: { pl: 'Pa' } } },
+        },
+    },
+    components: { 'buildr/page': 1, 'buildr/widget': 1 },
+});
+function Harness() {
+    const locale = useLocaleState((state) => state.locale);
+    return (_jsxs(_Fragment, { children: [_jsx(LocaleSwitcher, {}), _jsx(Inspector, { locale: locale, defaultLocale: "en" }), _jsx(IssuesPanel, {})] }));
+}
+describe('content language', () => {
+    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 = '';
+    });
+    const mount = async (select = 'widget0001') => {
+        const store = createEditorStore({
+            doc: fixture(),
+            registry,
+            generateId: createSeededIdGenerator(3),
+            validationDelayMs: null,
+            locales,
+        });
+        store.select(select);
+        const localeStore = createLocaleStore(locales);
+        await act(async () => {
+            store.validateNow();
+            root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(ManifestProvider, { manifest: manifest, children: _jsx(EditorStoreProvider, { store: store, children: _jsx(LocaleProvider, { store: localeStore, children: _jsx(Harness, {}) }) }) }) }));
+        });
+        return { store, localeStore };
+    };
+    const click = (el) => act(async () => {
+        el.click();
+    });
+    const button = (name) => [...container.querySelectorAll('button')].find((b) => b.textContent === name);
+    const l10nOf = (store, id) => store.getState().doc.nodes[id]?.props?.['title']?.l10n;
+    const titleInput = () => container.querySelector('[data-prop=title] input');
+    it('is quiet in the default language and explains the split in another', async () => {
+        const { localeStore } = await mount();
+        expect(container.querySelector('.bd-translation-banner')).toBeNull();
+        expect(container.querySelector('.bd-translation-hint')).toBeNull();
+        await act(async () => localeStore.getState().setLocale('pl'));
+        expect(container.querySelector('.bd-translation-banner')?.textContent).toContain('Structure and style are shared');
+        expect(container.querySelector('[data-prop=title][data-untranslated]')).not.toBeNull();
+        expect(container.textContent).toContain('The default-language text is shown.');
+    });
+    it('translating writes to l10n; undo and removing take it back', async () => {
+        const { store, localeStore } = await mount();
+        await act(async () => localeStore.getState().setLocale('pl'));
+        await click(button('Translate'));
+        expect(l10nOf(store, 'widget0001')).toEqual({ pl: 'Hello' });
+        expect(container.querySelector('[data-untranslated]')).toBeNull();
+        expect(button('Translate')).toBeUndefined();
+        await act(async () => {
+            store.undo();
+        });
+        expect(l10nOf(store, 'widget0001')).toBeUndefined();
+        await click(button('Translate'));
+        await click(container.querySelector('button[aria-label^="Remove translation"]'));
+        expect(l10nOf(store, 'widget0001')).toBeUndefined();
+        // The default-language value is untouched by all of it.
+        expect(store.getState().doc.nodes['widget0001']?.props?.['title']
+            ?.value).toBe('Hello');
+    });
+    it('shows the translation of the chosen language, and ignores an unknown one', async () => {
+        const { localeStore } = await mount('widget0002');
+        expect(titleInput().value).toBe('Bye');
+        await act(async () => localeStore.getState().setLocale('pl'));
+        expect(titleInput().value).toBe('Pa');
+        await act(async () => localeStore.getState().setLocale('de'));
+        expect(titleInput().value).toBe('Bye');
+        await act(async () => localeStore.getState().setLocale('xx'));
+        expect(localeStore.getState().locale).toBe('de');
+    });
+    it('lists missing translations per language', async () => {
+        await mount();
+        const groups = [...container.querySelectorAll('.bd-issues-group')].map((group) => ({
+            locale: group.getAttribute('data-locale'),
+            count: group.querySelectorAll('li').length,
+        }));
+        // widget0001 has no translation at all; widget0002 lacks only German.
+        expect(groups).toEqual([
+            { locale: 'pl', count: 1 },
+            { locale: 'de', count: 2 },
+        ]);
+        expect(container.querySelector('.bd-issues-group summary')?.textContent).toContain('Missing translations: Polski');
+    });
+    it('shows no switcher for a single language', async () => {
+        const single = {
+            locales: ['en'],
+            default: 'en',
+            fallback: true,
+            intl: { en: 'English' },
+        };
+        const store = createLocaleStore(single);
+        await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(LocaleProvider, { store: store, children: _jsx(LocaleSwitcher, {}) }) })));
+        expect(container.innerHTML).toBe('');
+    });
+});

package/dist/app/editor-app.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentMigrations, LocaleConfig, RegistryMeta } from '@next-buildr/core';
+import { type BuilderEditorProps } from './config.ts';
+export interface EditorAppProps extends BuilderEditorProps {
+    /** The registry the commands run against (`registry.meta` of the host's registry). */
+    readonly registry: RegistryMeta;
+    /** The languages the content can be written in; the session's (`getSession().locales`), else one language (`en`), when left out. */
+    readonly locales?: LocaleConfig;
+    /** `registry.migrations` of the host's registry: lets a paste of content copied under older component versions (or retired types) migrate instead of being refused. */
+    readonly migrations?: ComponentMigrations;
+}
+/**
+ * The whole editor (docs/editor.md#the-editor-app): loads the document of `documentRef` through
+ * the adapter, creates its store and autosave, and composes the toolbar, the panels, the canvas
+ * and the dialogs. `BuilderEditor` is the bare shell; hosts mount this one.
+ */
+export declare function EditorApp(props: EditorAppProps): import("react").JSX.Element;
+//# sourceMappingURL=editor-app.d.ts.map

package/dist/app/editor-app.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-app.d.ts","sourceRoot":"","sources":["../../src/app/editor-app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EAGnB,YAAY,EACZ,YAAY,EACb,MAAM,mBAAmB,CAAC;AAqD3B,OAAO,EAAE,KAAK,kBAAkB,EAAmC,MAAM,aAAa,CAAC;AAMvF,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD,sFAAsF;IACtF,QAAQ,CAAC,QAAQ,EAAE,YAAY,CAAC;IAChC,oIAAoI;IACpI,QAAQ,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC;IAChC,uKAAuK;IACvK,QAAQ,CAAC,UAAU,CAAC,EAAE,mBAAmB,CAAC;CAC3C;AAsBD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,+BA0F9C"}