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

package/dist/store/view.test.js

@@ -0,0 +1,103 @@
+import { createRegistryMeta } from '@next-buildr/core';
+import { afterEach, expect, it, vi } from 'vitest';
+import { createPersistence } from '../persistence/controller.js';
+import { createEditorStore } from './create-store.js';
+afterEach(() => vi.useRealTimers());
+const create = () => createEditorStore({
+    doc: {
+        schemaVersion: 1,
+        root: 'root',
+        nodes: { root: { id: 'root', type: 'buildr/page' } },
+        components: {},
+    },
+    registry: createRegistryMeta({ components: [] }),
+    validationDelayMs: null,
+});
+it('keeps view state separate for each editor session', () => {
+    const first = create();
+    const second = create();
+    first.view.getState().toggleOutlines();
+    first.view.getState().toggleHidden('root');
+    expect(first.view.getState()).toMatchObject({ outlines: true, hiddenIds: ['root'] });
+    expect(second.view.getState()).toMatchObject({ outlines: false, hiddenIds: [] });
+    expect(first.getState().docVersion).toBe(0);
+    expect(first.getState().canUndo).toBe(false);
+});
+it('never sends hidden ids or outlines in the autosave payload', async () => {
+    vi.useFakeTimers();
+    const store = create();
+    const saves = [];
+    const adapter = {
+        save: async (_ref, request) => {
+            saves.push(request);
+            return { ok: true, revision: 2, updatedAt: 'now' };
+        },
+    };
+    const controller = createPersistence({
+        store,
+        adapter,
+        ref: { collection: 'pages', id: '1' },
+        revision: 1,
+        debounceMs: 10,
+        maxWaitMs: 100,
+    });
+    const stop = controller.start();
+    const document = store.getState().doc;
+    store.view.getState().toggleOutlines();
+    store.view.getState().setHiddenIds(['root']);
+    store.view.getState().setInsertionTarget({ parentId: 'root', slot: 'default', index: 0 });
+    await vi.advanceTimersByTimeAsync(100);
+    expect(saves).toEqual([]);
+    // Simulate a dirty document notification without requiring a component registry.
+    store.setState({ cursorId: 'dirty' });
+    await vi.advanceTimersByTimeAsync(100);
+    expect(saves).toEqual([{ document, baseRevision: 1, autosave: true }]);
+    expect(Object.keys(saves[0]?.document ?? {})).toEqual([
+        'schemaVersion',
+        'root',
+        'nodes',
+        'components',
+    ]);
+    stop();
+});
+const withChild = () => createEditorStore({
+    doc: {
+        schemaVersion: 1,
+        root: 'root',
+        nodes: {
+            root: { id: 'root', type: 'buildr/page', slots: { default: ['boxNode001'] } },
+            boxNode001: { id: 'boxNode001', type: 'buildr/box' },
+        },
+        components: {},
+    },
+    registry: createRegistryMeta({ components: [] }),
+    validationDelayMs: null,
+});
+it('clears the insertion target when its node is removed, undone away or the page is replaced', () => {
+    const target = { parentId: 'boxNode001', slot: 'default', index: 0 };
+    const store = withChild();
+    store.view.getState().setInsertionTarget(target);
+    store.setState({
+        doc: { ...store.getState().doc, nodes: { root: { id: 'root', type: 'buildr/page' } } },
+    });
+    expect(store.view.getState().insertionTarget).toBeNull();
+    const other = withChild();
+    other.view.getState().setInsertionTarget(target);
+    other.replaceDocument({
+        schemaVersion: 1,
+        root: 'root',
+        nodes: { root: { id: 'root', type: 'buildr/page' } },
+        components: {},
+    });
+    expect(other.view.getState().insertionTarget).toBeNull();
+});
+it('clears the insertion target when the selection moves, and keeps it while it stays', () => {
+    const target = { parentId: 'boxNode001', slot: 'default', index: 0 };
+    const store = withChild();
+    store.select('boxNode001');
+    store.view.getState().setInsertionTarget(target);
+    store.select('boxNode001');
+    expect(store.view.getState().insertionTarget).toEqual(target);
+    store.select('root');
+    expect(store.view.getState().insertionTarget).toBeNull();
+});

package/dist/styles/tokens.test.js

@@ -9,8 +9,21 @@ const stylesDir = fileURLToPath(new URL('.', import.meta.url));
 const srcDir = join(stylesDir, '..');
 const packageDir = join(srcDir, '..');
 const bundleScript = join(packageDir, '../../tooling/scripts/bundle-css.mjs');
-const PARTIALS = ['tokens', 'base', 'shell', 'primitives', 'panels'];
-const read = (file) => readFileSync(join(stylesDir, file), 'utf8');
+const PARTIALS = [
+    'tokens',
+    'metrics',
+    'base',
+    'shell',
+    'primitives',
+    'panels',
+    'left-panel',
+    'canvas',
+    'inspector',
+    'style-panel',
+    'style-widgets',
+    'overlays',
+];
+const read = (file) => readFileSync(join(stylesDir, file), 'utf8').replaceAll('\r\n', '\n');
 const tokensCss = read('tokens.css');
 /** The body of the first rule whose selector list contains `selector`. */
 function block(css, selector, from = 0) {
@@ -61,7 +74,7 @@ function pairs() {
     }
     add('text', 'accent-text', 'accent', TEXT);
     add('text', 'danger-text', 'danger', TEXT);
-    for (const s of ['danger', 'warning', 'success', 'info']) {
+    for (const s of ['danger', 'warning', 'success', 'info', 'override']) {
         add('text', s, 'surface', TEXT);
         add('text', s, `${s}-soft`, TEXT);
     }
@@ -78,6 +91,11 @@ function pairs() {
         for (const bg of ['surface', 'bg'])
             add('boundary', fg, bg, BOUNDARY);
     }
+    for (const fg of ['toast-text', 'toast-accent', 'toast-ok', 'toast-err'])
+        add('text', fg, 'toast-bg', TEXT);
+    add('text', 'canvas-select-text', 'canvas-select', TEXT);
+    add('boundary', 'canvas-select', 'canvas-page', BOUNDARY);
+    // Template canvas-hover is decorative (2.98:1); selection carries the 3:1 boundary.
     return out;
 }
 describe('design tokens: contrast (identity.md section 8)', () => {
@@ -100,7 +118,36 @@ describe('design tokens: contrast (identity.md section 8)', () => {
             }
             expect(failures).toEqual([]);
         });
+        it(`keeps the toast dismiss icon and focus ring above 3:1, including hover, in ${theme}`, () => {
+            const foreground = tokens.get('--bd-toast-text');
+            const background = tokens.get('--bd-toast-bg');
+            const hover = tokens.get('--bd-toast-hover');
+            const match = /rgb\((\d+) (\d+) (\d+) \/ (\d+)%\)/.exec(hover);
+            expect(match).not.toBeNull();
+            const alpha = Number(match?.[4]) / 100;
+            const composited = `#${[1, 3, 5]
+                .map((offset, channel) => Math.round(Number.parseInt(background.slice(offset, offset + 2), 16) * (1 - alpha) +
+                Number(match?.[channel + 1]) * alpha)
+                .toString(16)
+                .padStart(2, '0'))
+                .join('')}`;
+            expect(ratio(foreground, background)).toBeGreaterThanOrEqual(BOUNDARY);
+            expect(ratio(foreground, composited)).toBeGreaterThanOrEqual(BOUNDARY);
+        });
     }
+    it('matches every approved template token in both themes', () => {
+        const template = readFileSync(join(packageDir, '../../docs/design/template/css/tokens.css'), 'utf8');
+        const templateLight = declarations(block(template, '.buildr-editor {'));
+        const templateDark = declarations(block(template, '.buildr-editor[data-theme="dark"]'));
+        const normalize = (value) => value.replace(/rgba\((\d+), (\d+), (\d+), ([\d.]+)\)/g, (_, r, g, b, alpha) => `rgb(${r} ${g} ${b} / ${Number((Number(alpha) * 100).toFixed(4))}%)`);
+        for (const [expected, actual] of [
+            [templateLight, light],
+            [templateDark, dark],
+        ]) {
+            for (const [name, value] of expected)
+                expect(actual.get(name), name).toBe(normalize(value));
+        }
+    });
     it('keeps the system-dark block identical to data-theme="dark"', () => {
         for (const [name, value] of dark) {
             if (name === '--bd-canvas-page')
@@ -115,11 +162,17 @@ describe('design tokens: contrast (identity.md section 8)', () => {
     it('overrides the durations under prefers-reduced-motion', () => {
         const reduced = tokensCss.slice(tokensCss.indexOf('@media (prefers-reduced-motion'));
         expect(reduced).toContain('--bd-duration-fast: 0ms');
-        expect(reduced).toContain('--bd-duration-base: 0ms');
+        for (const name of light.keys()) {
+            if (name.startsWith('--bd-duration-'))
+                expect(reduced).toContain(`${name}: 0ms`);
+        }
     });
 });
 describe('design tokens: usage', () => {
-    const defined = new Set(light.keys());
+    const defined = new Set([
+        ...light.keys(),
+        ...declarations(block(read('metrics.css'), '.buildr-editor,')).keys(),
+    ]);
     const partials = PARTIALS.map((name) => ({ name, css: read(`${name}.css`) }));
     it('defines every colour role in both themes', () => {
         const roles = pairs().flatMap((p) => [p.fg, p.bg]);
@@ -159,24 +212,37 @@ describe('design tokens: usage', () => {
     it('lists every partial, in order, in the dev entry', () => {
         const entry = readFileSync(join(srcDir, 'styles.css'), 'utf8');
         const imports = [...entry.matchAll(/@import\s+"\.\/styles\/([\w-]+)\.css";/g)].map((m) => m[1]);
-        expect(imports).toEqual(PARTIALS);
+        expect(imports).toEqual(PARTIALS.filter((name) => name !== 'metrics'));
+        expect(tokensCss).toContain('@import "./metrics.css";');
     });
 });
 describe('published stylesheet (bundle-css.mjs)', () => {
     const out = mkdtempSync(join(tmpdir(), 'bd-editor-css-'));
     afterAll(() => rmSync(out, { recursive: true, force: true }));
     execFileSync(process.execPath, [bundleScript, out], { cwd: packageDir });
-    const published = readFileSync(join(out, 'styles.css'), 'utf8');
+    const published = readFileSync(join(out, 'styles.css'), 'utf8').replaceAll('\r\n', '\n');
     it('inlines every partial, in order, with no @import left', () => {
         expect(published).not.toMatch(/@import/);
         let at = -1;
         for (const { name } of PARTIALS.map((name) => ({ name }))) {
-            const source = read(`${name}.css`);
-            const index = published.indexOf(source.trim().slice(0, 200).replaceAll('../fonts/', './fonts/'));
+            const source = read(`${name}.css`).replace(/@import[^;]+;/g, '');
+            const index = published.indexOf(source.trim().slice(0, source.trim().indexOf('*/')).replaceAll('../fonts/', './fonts/'));
             expect(index, `${name}.css is inlined`).toBeGreaterThan(at);
             at = index;
         }
     });
+    it('matches the dev entry partial order exactly, without duplicated modules', () => {
+        const entry = readFileSync(join(srcDir, 'styles.css'), 'utf8');
+        const flatten = (source) => source.replace(/@import\s+"\.\/styles\/([^";]+)";|@import\s+"\.\/([^";]+)";/g, (_, root, local) => flatten(read(root ?? local)));
+        expect(published.replace(/\s+/g, ' ').trim()).toBe(flatten(entry).replaceAll('../fonts/', './fonts/').replace(/\s+/g, ' ').trim());
+    });
+    it('includes the left panel module stylesheet', () => {
+        expect(published).toContain('.buildr-editor .bd-insert-target');
+        expect(published).toContain('.buildr-editor .bd-insert-grip');
+    });
+    it('includes the overlay module stylesheet', () => {
+        expect(published).toContain(read('overlays.css').trim());
+    });
     it('ships the Inter subsets and the licence next to the stylesheet', () => {
         const files = readdirSync(join(out, 'fonts'));
         for (const subset of ['latin', 'latin-ext']) {
@@ -197,3 +263,16 @@ describe('published stylesheet (bundle-css.mjs)', () => {
         expect(published).not.toMatch(/https?:\/\//);
     });
 });
+describe('empty-page card', () => {
+    const canvasCss = read('canvas.css');
+    const rule = canvasCss.slice(canvasCss.indexOf('.bd-canvas-empty {'));
+    it('is a centred card, not an opaque cover that lets clicks fall through to the page', () => {
+        const block = rule.slice(0, rule.indexOf('}'));
+        expect(block).toContain('translate(-50%, -50%)');
+        expect(block).not.toContain('pointer-events: none');
+        expect(block).toContain('inset: 50% auto auto 50%');
+    });
+    it('leaves no dead pointer-events rule behind in overlays.css', () => {
+        expect(read('overlays.css')).not.toMatch(/\.bd-canvas-empty\s*\{[^}]*pointer-events/);
+    });
+});