@next-buildr/editor 0.0.0-stage → 2.0.0

package/dist/panels/layers/layers-panel.test.js

@@ -0,0 +1,315 @@
+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 { axe } from 'vitest-axe';
+import * as matchers from 'vitest-axe/matchers';
+import { ManifestProvider } from '../../app/manifest.js';
+import { MessagesProvider } from '../../messages/index.js';
+import { createEditorStore, EditorStoreProvider } from '../../store/index.js';
+import { flattenTree } from './flatten.js';
+import { LayersPanel } from './layers-panel.js';
+expect.extend(matchers);
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const meta = (type, overrides = {}) => ({
+    type,
+    version: 1,
+    label: type.split('/')[1] ?? type,
+    category: 'content',
+    props: {},
+    contentCategories: ['flow'],
+    styles: { groups: [] },
+    runtime: 'shared',
+    ...overrides,
+});
+const registry = createRegistryMeta({
+    components: [
+        meta('buildr/page', { capabilities: { root: true }, slots: { default: {} } }),
+        meta('buildr/box', { label: 'Box', icon: 'layout-grid', slots: { default: {} } }),
+        meta('buildr/text', { label: 'Text', props: { text: p.text({ default: '' }) } }),
+    ],
+});
+const node = (id, type, extra = {}) => ({
+    id,
+    type,
+    ...extra,
+});
+const fixture = () => ({
+    schemaVersion: 1,
+    root: 'root',
+    nodes: {
+        root: node('root', 'buildr/page', { slots: { default: ['boxNode001', 'boxNode002'] } }),
+        boxNode001: node('boxNode001', 'buildr/box', {
+            name: 'Hero',
+            slots: { default: ['textNodeA1', 'textNodeB1'] },
+        }),
+        boxNode002: node('boxNode002', 'buildr/box', { lock: { content: true } }),
+        textNodeA1: node('textNodeA1', 'buildr/text', { props: { text: s('A') } }),
+        textNodeB1: node('textNodeB1', 'buildr/text', { props: { text: s('B') } }),
+    },
+    components: {},
+});
+let container;
+let root;
+beforeEach(() => {
+    container = document.createElement('div');
+    document.body.append(container);
+    root = createRoot(container);
+    globalThis.ResizeObserver ??= class {
+        observe() { }
+        unobserve() { }
+        disconnect() { }
+    };
+    Element.prototype.scrollIntoView ??= () => { };
+    Element.prototype.hasPointerCapture ??= () => false;
+});
+afterEach(() => {
+    act(() => root.unmount());
+    document.body.innerHTML = '';
+});
+async function mount(doc = fixture()) {
+    const store = createEditorStore({
+        doc,
+        registry,
+        generateId: createSeededIdGenerator(9),
+        validationDelayMs: null,
+    });
+    await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(ManifestProvider, { manifest: toManifest(registry), children: _jsx(EditorStoreProvider, { store: store, children: _jsx(LayersPanel, {}) }) }) })));
+    return store;
+}
+const tree = () => container.querySelector('[role=tree]');
+const items = () => [...container.querySelectorAll('[role=treeitem]')];
+const labels = () => items().map((item) => item.querySelector('.bd-layer-label')?.textContent);
+const press = (key, init = {}) => act(async () => {
+    tree().dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, ...init }));
+});
+const pick = (store, id) => act(async () => store.select(id));
+describe('flattenTree', () => {
+    it('lists the visible rows with their ARIA positions', () => {
+        const doc = fixture();
+        const collapsed = flattenTree(doc, new Set(['root']));
+        expect(collapsed.map((r) => [r.id, r.level, r.posInSet, r.setSize, r.expanded])).toEqual([
+            ['root', 1, 1, 1, true],
+            ['boxNode001', 2, 1, 2, false],
+            ['boxNode002', 2, 2, 2, false],
+        ]);
+        const open = flattenTree(doc, new Set(['root', 'boxNode001']));
+        expect(open.map((r) => r.id)).toEqual([
+            'root',
+            'boxNode001',
+            'textNodeA1',
+            'textNodeB1',
+            'boxNode002',
+        ]);
+        expect(open[2]).toMatchObject({ level: 3, parentId: 'boxNode001', hasChildren: false });
+    });
+    it('does not loop on a document that reaches a node twice', () => {
+        const doc = fixture();
+        const cyclic = {
+            ...doc,
+            nodes: {
+                ...doc.nodes,
+                boxNode002: node('boxNode002', 'buildr/box', { slots: { default: ['root'] } }),
+            },
+        };
+        const rows = flattenTree(cyclic, new Set(['root', 'boxNode002']));
+        expect(rows.map((r) => r.id)).toEqual(['root', 'boxNode001', 'boxNode002']);
+    });
+});
+describe('LayersPanel', () => {
+    it('is an ARIA tree with names from the manifest and no accessibility violations', async () => {
+        await mount();
+        expect(tree().getAttribute('aria-label')).toBe('Layers');
+        expect(labels()).toEqual(['page', 'Hero', 'Box']);
+        const [, hero] = items();
+        expect(hero?.getAttribute('aria-level')).toBe('2');
+        expect(hero?.getAttribute('aria-posinset')).toBe('1');
+        expect(hero?.getAttribute('aria-setsize')).toBe('2');
+        expect(hero?.getAttribute('aria-expanded')).toBe('false');
+        expect(await axe(container)).toHaveNoViolations();
+    });
+    it('draws an svg icon per row: the named one, or the neutral box, never a letter', async () => {
+        await mount();
+        const icons = items().map((item) => item.querySelector('.bd-layer-icon svg'));
+        expect(icons.every((svg) => svg !== null)).toBe(true);
+        expect(icons.map((svg) => svg?.getAttribute('data-icon'))).toEqual([
+            'box',
+            'layout-grid',
+            'layout-grid',
+        ]);
+        expect(icons[0]?.getAttribute('data-fallback')).toBe('true');
+        expect(icons[2]?.hasAttribute('data-fallback')).toBe(false);
+        expect(items().every((item) => item.querySelector('.bd-layer-icon')?.textContent === '')).toBe(true);
+    });
+    it('shows badges with accessible names', async () => {
+        await mount();
+        const [, , locked] = items();
+        expect(locked?.querySelector('[role=img]')?.getAttribute('aria-label')).toBe('Locked');
+    });
+    it('is operable with the keyboard alone', async () => {
+        const store = await mount();
+        await act(async () => tree().focus());
+        await press('ArrowDown');
+        expect(store.getState().selectedIds).toEqual(['root']);
+        await press('ArrowDown');
+        expect(store.getState().selectedIds).toEqual(['boxNode001']);
+        expect(tree().getAttribute('aria-activedescendant')).toBe(items().find((i) => i.dataset['nodeId'] === 'boxNode001')?.id);
+        await press('ArrowRight'); // expands
+        expect(labels()).toEqual(['page', 'Hero', 'Text', 'Text', 'Box']);
+        await press('ArrowRight'); // into the first child
+        expect(store.getState().selectedIds).toEqual(['textNodeA1']);
+        await press('ArrowLeft'); // out to the parent
+        expect(store.getState().selectedIds).toEqual(['boxNode001']);
+        await press('ArrowLeft'); // collapses
+        expect(labels()).toEqual(['page', 'Hero', 'Box']);
+        await press('End');
+        expect(store.getState().selectedIds).toEqual(['boxNode002']);
+        await press('Home');
+        expect(store.getState().selectedIds).toEqual(['root']);
+        await press('ArrowDown', { shiftKey: true });
+        expect(store.getState().selectedIds).toEqual(['root', 'boxNode001']);
+    });
+    it('renames with F2, and Escape leaves the name alone', async () => {
+        const store = await mount();
+        await pick(store, 'boxNode002');
+        await act(async () => tree().focus());
+        await press('F2');
+        const input = container.querySelector('input');
+        expect(input.getAttribute('aria-label')).toBe('Layer name');
+        await act(async () => {
+            input.value = 'Footer';
+            input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+        });
+        expect(store.getState().doc.nodes['boxNode002']?.name).toBe('Footer');
+        expect(store.getState().undoLabel).toBe('node.setAttr');
+        expect(container.querySelector('input')).toBeNull();
+        await press('F2');
+        await act(async () => {
+            const again = container.querySelector('input');
+            again.value = 'Nope';
+            again.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        });
+        expect(store.getState().doc.nodes['boxNode002']?.name).toBe('Footer');
+    });
+    it('deletes the selection with Delete, and reports what the rules refuse', async () => {
+        const store = await mount();
+        await pick(store, 'root');
+        await act(async () => tree().focus());
+        await press('Delete'); // the root is never removed: nothing happens
+        expect(store.getState().canUndo).toBe(false);
+        await pick(store, 'boxNode001');
+        await press('Delete');
+        expect(store.getState().doc.nodes['boxNode001']).toBeUndefined();
+        expect(labels()).toEqual(['page', 'Box']);
+    });
+    it('opens the ancestors of a node selected elsewhere, and marks it selected', async () => {
+        const store = await mount();
+        expect(labels()).toEqual(['page', 'Hero', 'Box']);
+        await act(async () => store.select('textNodeB1'));
+        expect(labels()).toEqual(['page', 'Hero', 'Text', 'Text', 'Box']);
+        const selected = items().filter((i) => i.getAttribute('aria-selected') === 'true');
+        expect(selected.map((i) => i.dataset['nodeId'])).toEqual(['textNodeB1']);
+    });
+    it('follows a click (with Ctrl adding), and hover goes both ways', async () => {
+        const store = await mount();
+        const row = (id) => items().find((i) => i.dataset['nodeId'] === id);
+        await act(async () => row('boxNode001').click());
+        expect(store.getState().selectedIds).toEqual(['boxNode001']);
+        await act(async () => {
+            row('boxNode002').dispatchEvent(new MouseEvent('click', { bubbles: true, ctrlKey: true }));
+        });
+        expect(store.getState().selectedIds).toEqual(['boxNode001', 'boxNode002']);
+        await act(async () => {
+            row('boxNode002').dispatchEvent(new PointerEvent('pointerover', { bubbles: true }));
+        });
+        expect(store.getState().hoveredId).toBe('boxNode002');
+        await act(async () => store.setHovered('boxNode001'));
+        expect(row('boxNode001').dataset['hovered']).toBe('true');
+        expect(row('boxNode002').dataset['hovered']).toBe('false');
+    });
+    it('toggles a row with its arrow, without selecting it', async () => {
+        const store = await mount();
+        const hero = items()[1];
+        await act(async () => hero.querySelector('[data-toggle]').click());
+        expect(labels()).toEqual(['page', 'Hero', 'Text', 'Text', 'Box']);
+        expect(store.getState().selectedIds).toEqual([]);
+    });
+    it('has a context menu: duplicate acts on the row the menu opened on', async () => {
+        const store = await mount();
+        const hero = items()[1];
+        await act(async () => {
+            hero.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, cancelable: true, clientX: 5, clientY: 5 }));
+        });
+        expect(store.getState().selectedIds).toEqual(['boxNode001']);
+        const menu = document.body.querySelector('[role=menu]');
+        expect(menu?.getAttribute('aria-label')).toBe('Layer actions');
+        const names = [...(menu?.querySelectorAll('[role=menuitem]') ?? [])].map((i) => i.textContent);
+        expect(names).toEqual(['Rename', 'Duplicate', 'Wrap in container', 'Unwrap', 'Delete']);
+        const duplicate = [...(menu?.querySelectorAll('[role=menuitem]') ?? [])].find((i) => i.textContent === 'Duplicate');
+        await act(async () => {
+            duplicate.click();
+        });
+        expect(store.getState().doc.nodes['root']?.slots?.['default']).toHaveLength(3);
+    });
+    it('opens the same context menu from the hover "more" button, without starting a rename', async () => {
+        const store = await mount();
+        const more = items()[1]?.querySelector('[data-more] button');
+        expect(more.getAttribute('aria-label')).toBe('More actions');
+        await act(async () => {
+            more.click();
+        });
+        expect(store.getState().selectedIds).toEqual(['boxNode001']);
+        const menu = document.body.querySelector('[role=menu]');
+        expect(menu?.getAttribute('aria-label')).toBe('Layer actions');
+        expect(container.querySelector('input')).toBeNull();
+    });
+    it('does not offer changes in a read-only document', async () => {
+        const store = await mount();
+        await act(async () => store.setReadOnly(true));
+        await pick(store, 'boxNode001');
+        await act(async () => tree().focus());
+        await press('Delete');
+        await press('F2');
+        expect(store.getState().doc.nodes['boxNode001']).toBeDefined();
+        expect(container.querySelector('input')).toBeNull();
+    });
+});
+describe('a large document', () => {
+    const big = () => {
+        const ids = Array.from({ length: 1000 }, (_, i) => `n${String(i).padStart(9, '0')}`);
+        const nodes = {
+            root: node('root', 'buildr/page', { slots: { default: ids } }),
+        };
+        for (const id of ids)
+            nodes[id] = node(id, 'buildr/text', { props: { text: s(id) } });
+        return { schemaVersion: 1, root: 'root', nodes, components: {} };
+    };
+    it('flattens 1000 nodes in well under 50 ms', () => {
+        const doc = big();
+        const open = new Set(['root']);
+        let best = Number.POSITIVE_INFINITY;
+        for (let i = 0; i < 5; i++) {
+            const start = performance.now();
+            expect(flattenTree(doc, open)).toHaveLength(1001);
+            best = Math.min(best, performance.now() - start);
+        }
+        expect(best).toBeLessThan(50);
+    });
+    it('renders only the rows in view, and renders them quickly', async () => {
+        const start = performance.now();
+        await mount(big());
+        const elapsed = performance.now() - start;
+        expect(items().length).toBeLessThan(40);
+        expect(elapsed).toBeLessThan(500);
+        const list = container.querySelector('.bd-layers-list');
+        expect(list.style.height).toBe(`${1001 * 28}px`);
+    });
+    it('scrolls the row of a far selection into view', async () => {
+        const store = await mount(big());
+        await act(async () => store.select('n000000900'));
+        const present = items().map((i) => i.dataset['nodeId']);
+        expect(present).toContain('n000000900');
+    });
+});

package/dist/persistence/controller.d.ts

@@ -0,0 +1,55 @@
+import { type StoreApi } from 'zustand/vanilla';
+import type { EditorStore } from '../store/index.ts';
+import type { Clock, DocumentAdapter, DocumentRef, PersistenceState, PublishOutcome } from './types.ts';
+/** How long to wait before retrying a failed save; the last delay repeats. */
+export declare const RETRY_DELAYS_MS: readonly number[];
+/** How often an idle, visible editor asks the backend whether somebody else saved. */
+export declare const EXTERNAL_CHECK_INTERVAL_MS = 30000;
+export declare const systemClock: Clock;
+export interface PersistenceOptions {
+    readonly store: EditorStore;
+    readonly adapter: DocumentAdapter;
+    readonly ref: DocumentRef;
+    /** The revision the document was loaded at. */
+    readonly revision: number;
+    readonly debounceMs?: number;
+    readonly maxWaitMs?: number;
+    readonly clock?: Clock;
+    /** How often to look for saves made elsewhere (default 30 s; 0 turns it off). */
+    readonly externalCheckMs?: number;
+    /** Whether the tab is shown; nothing is polled while it is not (default: `document.visibilityState`). */
+    readonly isVisible?: () => boolean;
+}
+export interface PersistenceController {
+    readonly state: StoreApi<PersistenceState>;
+    /** Starts watching the store. Returns the function that stops it (timers cleared; no more saves). */
+    start(): () => void;
+    /** Saves now (Ctrl+S). Resolves when the save (and any that had to follow it) is over. */
+    saveNow(): Promise<void>;
+    /** After a conflict: takes the backend's document and drops the local changes. */
+    reload(): Promise<void>;
+    /** After a conflict: saves the local document over the backend's. */
+    overwrite(): Promise<void>;
+    /**
+     * Publishes the document: saves what is unsaved first, then asks the backend to publish that
+     * revision. Never rejects; what went wrong is in the outcome.
+     */
+    publish(): Promise<PublishOutcome>;
+    /**
+     * Asks the backend for the current revision (`adapter.getRevision`) and, when somebody else saved,
+     * sets `state.external` (unchanged document) or moves to `conflict` (unsaved changes). Runs by
+     * itself every 30 s while the tab is visible; call it on window focus. Never rejects.
+     */
+    checkExternal(): Promise<void>;
+    /** Whether closing the tab would lose something. */
+    hasUnsavedWork(): boolean;
+}
+/**
+ * The autosave state machine (docs/state-management.md#autosave):
+ * `clean → dirty → saving → clean`, with `conflict` and `error` on the side. One save is in flight
+ * at a time; a change made while it runs is saved by the next one. Whether the document is dirty
+ * is read from the history (`cursorId` ≠ `savedCursorId`), so undoing back to the saved state is
+ * clean again.
+ */
+export declare function createPersistence(options: PersistenceOptions): PersistenceController;
+//# sourceMappingURL=controller.d.ts.map

package/dist/persistence/controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"controller.d.ts","sourceRoot":"","sources":["../../src/persistence/controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,KAAK,EACV,KAAK,EACL,eAAe,EACf,WAAW,EACX,gBAAgB,EAChB,cAAc,EAEf,MAAM,YAAY,CAAC;AAEpB,8EAA8E;AAC9E,eAAO,MAAM,eAAe,EAAE,SAAS,MAAM,EAAyB,CAAC;AAEvE,sFAAsF;AACtF,eAAO,MAAM,0BAA0B,QAAS,CAAC;AAEjD,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC;AAEF,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC;IAC5B,QAAQ,CAAC,OAAO,EAAE,eAAe,CAAC;IAClC,QAAQ,CAAC,GAAG,EAAE,WAAW,CAAC;IAC1B,+CAA+C;IAC/C,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC;IACvB,iFAAiF;IACjF,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;IAClC,yGAAyG;IACzG,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC;CACpC;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IAC3C,qGAAqG;IACrG,KAAK,IAAI,MAAM,IAAI,CAAC;IACpB,0FAA0F;IAC1F,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACzB,kFAAkF;IAClF,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACxB,qEAAqE;IACrE,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,OAAO,IAAI,OAAO,CAAC,cAAc,CAAC,CAAC;IACnC;;;;OAIG;IACH,aAAa,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/B,oDAAoD;IACpD,cAAc,IAAI,OAAO,CAAC;CAC3B;AAID;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,kBAAkB,GAAG,qBAAqB,CA4SpF"}