@next-buildr/editor 0.0.0-stage → 2.0.0

package/dist/panels/insert/insert-panel.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fromTree, instantiateTemplate, registryVersions, } from '@next-buildr/core';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useManifest } from '../../app/manifest.js';
+import { useDragPress } from '../../dnd/index.js';
+import { useT } from '../../messages/index.js';
+import { isTypingTarget } from '../../shortcuts/index.js';
+import { useEditor, useEditorState } from '../../store/index.js';
+import { ComponentIcon, Icon, IconButton, Input, Tooltip, useToast } from '../../ui/index.js';
+import { filterItems, groupByCategory, paletteItems, safeThumbnail, } from './catalog.js';
+import { categoryName } from './category-name.js';
+import { placeInsertion } from './target.js';
+const VIEW_KEY = 'buildr.editor.insert.view';
+const SKELETONS = ['a', 'b', 'c', 'd'];
+function readView() {
+    try {
+        return globalThis.localStorage?.getItem(VIEW_KEY) === 'list' ? 'list' : 'grid';
+    }
+    catch {
+        return 'grid';
+    }
+}
+function writeView(view) {
+    try {
+        globalThis.localStorage?.setItem(VIEW_KEY, view);
+    }
+    catch {
+        // Storage can be blocked; the choice then only lasts for this session.
+    }
+}
+/**
+ * The component and template palette (docs/editor.md#insert): search, categories, and a click (or
+ * Enter) that inserts at the first position the rules allow — inside the selected container, else
+ * after the selection. It never needs drag and drop. When nothing fits the reason is shown instead.
+ */
+export function InsertPanel() {
+    const t = useT();
+    const store = useEditor();
+    const manifest = useManifest();
+    const readOnly = useEditorState((state) => state.readOnly);
+    const [query, setQuery] = useState('');
+    const [view, setView] = useState(readView);
+    const [collapsed, setCollapsed] = useState(() => new Set());
+    const searchRef = useRef(null);
+    const toast = useToast();
+    const sections = useMemo(() => {
+        if (manifest === undefined)
+            return [];
+        const { components, templates } = paletteItems(manifest);
+        return [
+            { id: 'components', groups: groupByCategory(filterItems(components, query)) },
+            { id: 'templates', groups: groupByCategory(filterItems(templates, query)) },
+        ];
+    }, [manifest, query]);
+    const loading = manifest === undefined;
+    const searching = query.trim() !== '';
+    const empty = !loading && sections.every((section) => section.groups.length === 0);
+    const press = useDragPress();
+    // `/` jumps to the search, unless the keyboard already belongs to a field or an editable region.
+    useEffect(() => {
+        const onKey = (event) => {
+            if (event.key !== '/' || event.defaultPrevented || event.isComposing)
+                return;
+            if (event.ctrlKey || event.metaKey || event.altKey)
+                return;
+            if (isTypingTarget(event.target))
+                return;
+            event.preventDefault();
+            searchRef.current?.focus();
+            searchRef.current?.select();
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, []);
+    const chooseView = (next) => {
+        setView(next);
+        writeView(next);
+    };
+    const toggleCategory = (key) => setCollapsed((current) => {
+        const next = new Set(current);
+        if (!next.delete(key))
+            next.add(key);
+        return next;
+    });
+    const fragmentOf = (item) => {
+        const versions = registryVersions(store.registry);
+        if (item.kind === 'template') {
+            const definition = manifest?.templates[item.id];
+            return definition === undefined
+                ? undefined
+                : instantiateTemplate(definition, undefined, undefined, versions);
+        }
+        const meta = manifest?.components[item.id];
+        if (meta === undefined)
+            return undefined;
+        return fromTree({
+            type: meta.type,
+            ...(meta.defaults?.slots !== undefined ? { slots: meta.defaults.slots } : {}),
+        }, undefined, versions);
+    };
+    const insert = (item) => {
+        if (readOnly) {
+            toast.show({ id: 'insert', variant: 'warning', message: t('insert.readOnly') });
+            return;
+        }
+        const fragment = fragmentOf(item);
+        if (fragment === undefined)
+            return;
+        const state = store.getState();
+        const placement = placeInsertion(state.doc, store.registry, state.selectedIds.at(-1) ?? null, fragment);
+        if (!placement.ok) {
+            toast.show({
+                id: 'insert',
+                variant: 'warning',
+                message: `${t('insert.impossible')} ${placement.reason?.message ?? ''}`.trim(),
+            });
+            return;
+        }
+        const { parentId, slot, at } = placement.target;
+        const result = store.dispatch({
+            type: 'node.insert',
+            payload: { parentId, slot, index: at, fragment },
+        });
+        if (!result.ok) {
+            toast.show({ id: 'insert', variant: 'error', message: result.error.message });
+            return;
+        }
+        toast.show({ id: 'insert', variant: 'success', message: `${t('insert.done')}: ${item.label}` });
+        // The command gives the fragment fresh ids; the new node is the one now at the target position.
+        const created = store.getState().doc.nodes[parentId]?.slots?.[slot]?.[at];
+        if (created !== undefined)
+            store.select(created);
+    };
+    const renderItem = (item) => {
+        const thumbnail = safeThumbnail(item.thumbnail);
+        const button = (_jsxs("button", { type: "button", className: "bd-insert-item", onPointerDown: (event) => {
+                if (readOnly)
+                    return;
+                press?.(item.kind === 'template'
+                    ? { kind: 'template', id: item.id }
+                    : { kind: 'component', type: item.id }, item.label, event);
+            }, "data-kind": item.kind, "data-id": item.id, onClick: () => insert(item), children: [item.kind === 'template' ? (_jsx("span", { className: "bd-insert-thumb", "aria-hidden": "true", children: thumbnail !== undefined ? (_jsx("img", { src: thumbnail, alt: "", loading: "lazy" })) : (_jsx(ComponentIcon, { meta: { icon: 'layout-template' }, size: "md" })) })) : (_jsx("span", { className: "bd-insert-icon", "aria-hidden": "true", "data-icon": item.icon, children: _jsx(ComponentIcon, { meta: { icon: item.icon }, size: "md" }) })), _jsx("span", { className: "bd-insert-label", children: item.label }), view === 'list' && item.description !== undefined ? (_jsx("span", { className: "bd-insert-desc", "aria-hidden": "true", children: item.description })) : null] }));
+        return (_jsx("li", { children: item.description === undefined ? (button) : (_jsx(Tooltip, { content: item.description, children: button })) }, `${item.kind}:${item.id}`));
+    };
+    return (_jsxs("div", { className: "bd-insert", "data-view": view, children: [_jsxs("div", { className: "bd-insert-bar", children: [_jsxs("div", { className: "bd-insert-searchbox", children: [_jsx(Icon, { name: "search", className: "bd-insert-search-icon" }), _jsx(Input, { ref: searchRef, type: "search", className: "bd-insert-search", value: query, "aria-label": t('insert.search'), "aria-keyshortcuts": "/", placeholder: t('insert.search'), onChange: (event) => setQuery(event.target.value) }), query === '' ? null : (_jsx(IconButton, { className: "bd-insert-clear", label: t('insert.clear'), icon: "x", onClick: () => {
+                                    setQuery('');
+                                    searchRef.current?.focus();
+                                } }))] }), _jsxs("div", { className: "bd-insert-views", children: [_jsx(IconButton, { label: t('insert.view.grid'), icon: "layout-grid", "aria-pressed": view === 'grid', onClick: () => chooseView('grid') }), _jsx(IconButton, { label: t('insert.view.list'), icon: "list", "aria-pressed": view === 'list', onClick: () => chooseView('list') })] })] }), _jsxs("div", { className: "bd-insert-scroll", children: [empty ? _jsx("p", { className: "bd-insert-empty", children: t('insert.empty') }) : null, loading ? (_jsxs("section", { className: "bd-insert-section", "aria-busy": "true", children: [_jsx("h3", { className: "bd-insert-heading", children: t('insert.templates') }), _jsx("ul", { className: "bd-insert-list", "data-kind": "template", "aria-hidden": "true", children: SKELETONS.map((key) => (_jsx("li", { className: "bd-insert-skeleton" }, key))) })] })) : null, sections.map((section) => section.groups.length === 0 ? null : (_jsxs("section", { className: "bd-insert-section", children: [_jsx("h3", { className: "bd-insert-heading", children: t(`insert.${section.id}`) }), section.groups.map((group) => {
+                                const key = `${section.id}:${group.category}`;
+                                const open = searching || !collapsed.has(key);
+                                const name = categoryName(t, group.category);
+                                const listId = `bd-insert-${section.id}-${group.category}`;
+                                return (_jsxs("div", { role: "group", "aria-label": name, className: "bd-insert-group", children: [_jsx("h4", { className: "bd-insert-category", children: _jsxs("button", { type: "button", className: "bd-insert-category-toggle", "aria-expanded": open, "aria-controls": listId, onClick: () => toggleCategory(key), children: [_jsx(Icon, { name: open ? 'chevron-down' : 'chevron-right' }), _jsx("span", { className: "bd-insert-category-name", children: name }), _jsx("span", { className: "bd-insert-count", children: group.items.length })] }) }), _jsx("ul", { className: "bd-insert-list", id: listId, "data-kind": section.id === 'templates' ? 'template' : 'component', hidden: !open, children: group.items.map(renderItem) })] }, key));
+                            })] }, section.id)))] })] }));
+}

package/dist/panels/insert/insert-panel.test.d.ts

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

package/dist/panels/insert/insert-panel.test.d.ts.map

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

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

@@ -0,0 +1,323 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { createRegistryMeta, createSeededIdGenerator, defineTemplate, 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 { ToastProvider } from '../../ui/index.js';
+import { filterItems, paletteItems, safeThumbnail } from './catalog.js';
+import { InsertPanel } from './insert-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: { max: 2 } },
+        }),
+        meta('buildr/box', {
+            label: 'Box',
+            category: 'layout',
+            icon: 'layout-grid',
+            slots: { default: {} },
+        }),
+        meta('buildr/text', {
+            label: 'Text',
+            icon: 'no-such-lucide-icon',
+            keywords: ['paragraph', 'copy'],
+            props: { text: p.text({ default: '' }) },
+        }),
+        meta('buildr/hidden', { label: 'Hidden', capabilities: { insertable: false } }),
+    ],
+    templates: [
+        defineTemplate({
+            id: 'site/hero',
+            version: 1,
+            label: 'Hero',
+            category: 'sections',
+            thumbnail: '/thumbs/hero.png',
+            lock: 'none',
+            tree: { type: 'buildr/box', children: [{ type: 'buildr/text' }] },
+        }),
+        defineTemplate({
+            id: 'site/evil',
+            version: 1,
+            label: 'Evil',
+            category: 'sections',
+            thumbnail: 'javascript:alert(1)',
+            lock: 'none',
+            tree: { type: 'buildr/box' },
+        }),
+    ],
+});
+const manifest = toManifest(registry);
+const fixture = () => ({
+    schemaVersion: 1,
+    root: 'root',
+    nodes: {
+        root: { id: 'root', type: 'buildr/page', slots: { default: ['boxNode001', 'boxNode002'] } },
+        boxNode001: { id: 'boxNode001', type: 'buildr/box', slots: { default: ['textNodeA1'] } },
+        boxNode002: { id: 'boxNode002', type: 'buildr/box' },
+        textNodeA1: { id: 'textNodeA1', type: 'buildr/text', props: { text: s('A') } },
+    },
+    components: {},
+});
+let container;
+let root;
+beforeEach(() => {
+    container = document.createElement('div');
+    document.body.append(container);
+    root = createRoot(container);
+});
+afterEach(() => {
+    act(() => root.unmount());
+    document.body.innerHTML = '';
+});
+async function mount(readOnly = false, locale = 'en', reg = registry, man = manifest) {
+    const store = createEditorStore({
+        doc: fixture(),
+        registry: reg,
+        generateId: createSeededIdGenerator(5),
+        validationDelayMs: null,
+        readOnly,
+    });
+    await act(async () => root.render(_jsx(MessagesProvider, { locale: locale, children: _jsx(ManifestProvider, { manifest: man, children: _jsx(EditorStoreProvider, { store: store, children: _jsx(ToastProvider, { children: _jsx(InsertPanel, {}) }) }) }) })));
+    return store;
+}
+const button = (label) => [...container.querySelectorAll('button')].find((b) => b.querySelector('.bd-insert-label')?.textContent === label);
+const click = (label) => act(async () => button(label).click());
+const notice = () => container.querySelector('.bd-toast-text')?.textContent;
+const children = (store, id) => store.getState().doc.nodes[id]?.slots?.['default'] ?? [];
+describe('tile icons', () => {
+    it('draws an svg for a known icon and the neutral box for an unknown one, never a letter', async () => {
+        await mount();
+        const icon = (label) => button(label).querySelector('.bd-insert-icon');
+        expect(icon('Box')?.querySelector('svg')?.getAttribute('data-icon')).toBe('layout-grid');
+        const fallback = icon('Text')?.querySelector('svg');
+        expect(fallback?.getAttribute('data-icon')).toBe('box');
+        expect(fallback?.getAttribute('data-fallback')).toBe('true');
+        expect(icon('Text')?.textContent).toBe('');
+    });
+});
+describe('catalog', () => {
+    it('lists only what can be inserted, sorted, with templates apart', () => {
+        const { components, templates } = paletteItems(manifest);
+        expect(components.map((c) => c.label)).toEqual(['Box', 'Text']);
+        expect(templates.map((t) => t.label)).toEqual(['Evil', 'Hero']);
+    });
+    it('searches by label, type, keyword and every word', () => {
+        const { components } = paletteItems(manifest);
+        expect(filterItems(components, 'para').map((c) => c.label)).toEqual(['Text']);
+        expect(filterItems(components, 'BUILDR/box').map((c) => c.label)).toEqual(['Box']);
+        expect(filterItems(components, 'copy text').map((c) => c.label)).toEqual(['Text']);
+        expect(filterItems(components, 'copy box')).toEqual([]);
+        expect(filterItems(components, '  ')).toHaveLength(2);
+    });
+    it('shows a thumbnail only when it is an image address', () => {
+        expect(safeThumbnail('/thumbs/a.png')).toBe('/thumbs/a.png');
+        expect(safeThumbnail('https://cdn.example.com/a.png')).toBe('https://cdn.example.com/a.png');
+        expect(safeThumbnail('data:image/png;base64,AAAA')).toBeDefined();
+        expect(safeThumbnail('javascript:alert(1)')).toBeUndefined();
+        expect(safeThumbnail('//evil.example.com/a.png')).toBeUndefined();
+        expect(safeThumbnail('data:text/html,<script>')).toBeUndefined();
+        expect(safeThumbnail(undefined)).toBeUndefined();
+    });
+});
+describe('category headings', () => {
+    const custom = createRegistryMeta({
+        components: [
+            meta('buildr/page', { capabilities: { root: true }, slots: { default: {} } }),
+            meta('buildr/button', { label: 'Button', category: 'ui' }),
+            meta('buildr/list', { label: 'List', category: 'cms' }),
+            meta('buildr/quote', { label: 'Quote', category: 'blog' }),
+        ],
+        templates: [],
+    });
+    const customManifest = toManifest(custom);
+    const headings = () => [...container.querySelectorAll('[role=group]')].map((g) => g.getAttribute('aria-label'));
+    it('names ui and cms in capitals and title-cases a custom category', async () => {
+        await mount(false, 'en', custom, customManifest);
+        expect(headings()).toEqual(['UI', 'CMS', 'Blog']);
+        expect(container.querySelector('.bd-insert-category-name')?.textContent).toBe('UI');
+    });
+    it('uses the Polish catalog', async () => {
+        await mount(false, 'pl', custom, customManifest);
+        expect(headings()).toEqual(['UI', 'CMS', 'Blog']);
+        await mount(false, 'pl');
+        expect(headings()).toEqual(['Układ', 'Treść', 'Sections']);
+    });
+});
+describe('InsertPanel', () => {
+    it('is accessible and groups by category', async () => {
+        await mount();
+        expect(await axe(container)).toHaveNoViolations();
+        const groups = [...container.querySelectorAll('[role=group]')].map((g) => g.getAttribute('aria-label'));
+        expect(groups).toEqual(['Layout', 'Content', 'Sections']);
+        expect(container.querySelector('img')?.getAttribute('src')).toBe('/thumbs/hero.png');
+        expect(container.querySelectorAll('img')).toHaveLength(1);
+    });
+    it('inserts into the selected container, at the end, and selects the new node', async () => {
+        const store = await mount();
+        await act(async () => store.select('boxNode001'));
+        await click('Text');
+        const kids = children(store, 'boxNode001');
+        expect(kids).toHaveLength(2);
+        expect(kids[0]).toBe('textNodeA1');
+        expect(store.getState().doc.nodes[kids[1]]?.type).toBe('buildr/text');
+        expect(store.getState().selectedIds).toEqual([kids[1]]);
+        expect(notice()).toBe('Inserted: Text');
+        expect(store.getState().undoLabel).toBe('node.insert');
+    });
+    it('inserts after a selection that cannot hold children', async () => {
+        const store = await mount();
+        await act(async () => store.select('textNodeA1'));
+        await click('Box');
+        const kids = children(store, 'boxNode001');
+        expect(kids).toHaveLength(2);
+        expect(kids[0]).toBe('textNodeA1');
+        expect(store.getState().doc.nodes[kids[1]]?.type).toBe('buildr/box');
+    });
+    it('inserts a template as one undo step', async () => {
+        const store = await mount();
+        await act(async () => store.select('boxNode002'));
+        await click('Hero');
+        const [box] = children(store, 'boxNode002');
+        const inserted = store.getState().doc.nodes[box];
+        expect(inserted?.type).toBe('buildr/box');
+        expect(inserted?.source).toEqual({ template: 'site/hero', version: 1 });
+        await act(async () => store.undo());
+        expect(children(store, 'boxNode002')).toEqual([]);
+    });
+    it('says why when there is no place for it', async () => {
+        const store = await mount();
+        // The page holds two children at most, and nothing is selected, so there is nowhere to go.
+        await click('Box');
+        expect(notice()).toContain('cannot be inserted here');
+        expect(notice()?.length).toBeGreaterThan('It cannot be inserted here.'.length);
+        expect(children(store, 'root')).toHaveLength(2);
+    });
+    it('does nothing to a read-only document', async () => {
+        const store = await mount(true);
+        await act(async () => store.select('boxNode002'));
+        await click('Text');
+        expect(notice()).toBe('The page is read-only.');
+        expect(children(store, 'boxNode002')).toEqual([]);
+    });
+    it('filters while typing and says when nothing matches', async () => {
+        await mount();
+        const input = container.querySelector('input');
+        const type = async (value) => act(async () => {
+            const set = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
+            set?.call(input, value);
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+        await type('paragraph');
+        expect(container.querySelectorAll('.bd-insert-item')).toHaveLength(1);
+        await type('zzzz');
+        expect(container.querySelector('.bd-insert-empty')?.textContent).toBe('Nothing matches the search.');
+    });
+    it('is operable with the keyboard alone (real buttons in tab order)', async () => {
+        await mount();
+        const items = [...container.querySelectorAll('.bd-insert-item')];
+        expect(items.length).toBe(4);
+        for (const item of items) {
+            expect(item.tagName).toBe('BUTTON');
+            expect(item.tabIndex).toBe(0);
+        }
+    });
+});
+describe('InsertPanel (PB-125)', () => {
+    const press = (target, key) => act(async () => {
+        target.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+    });
+    const named = (name) => [...container.querySelectorAll('button')].find((b) => b.getAttribute('aria-label') === name);
+    it('collapses a category and reports it with aria-expanded and a count', async () => {
+        await mount();
+        const toggle = [...container.querySelectorAll('.bd-insert-category-toggle')].find((b) => b.textContent?.includes('Layout'));
+        expect(toggle.getAttribute('aria-expanded')).toBe('true');
+        expect(toggle.querySelector('.bd-insert-count')?.textContent).toBe('1');
+        await act(async () => toggle.click());
+        expect(toggle.getAttribute('aria-expanded')).toBe('false');
+        const list = container.querySelector(`#${toggle.getAttribute('aria-controls')}`);
+        expect(list.hidden).toBe(true);
+        await act(async () => toggle.click());
+        expect(list.hidden).toBe(false);
+    });
+    it('remembers the list view', async () => {
+        localStorage.removeItem('buildr.editor.insert.view');
+        await mount();
+        expect(container.querySelector('.bd-insert')?.getAttribute('data-view')).toBe('grid');
+        await act(async () => named('List view').click());
+        expect(container.querySelector('.bd-insert')?.getAttribute('data-view')).toBe('list');
+        expect(named('List view').getAttribute('aria-pressed')).toBe('true');
+        expect(localStorage.getItem('buildr.editor.insert.view')).toBe('list');
+        act(() => root.unmount());
+        root = createRoot(container);
+        await mount();
+        expect(container.querySelector('.bd-insert')?.getAttribute('data-view')).toBe('list');
+        localStorage.removeItem('buildr.editor.insert.view');
+    });
+    it('focuses the search on "/" only when no text field has focus', async () => {
+        await mount();
+        const search = container.querySelector('input');
+        await press(document.body, '/');
+        expect(document.activeElement).toBe(search);
+        // While typing in the search the key is just a character.
+        const typed = new KeyboardEvent('keydown', { key: '/', bubbles: true, cancelable: true });
+        search.dispatchEvent(typed);
+        expect(typed.defaultPrevented).toBe(false);
+        const other = document.createElement('input');
+        document.body.append(other);
+        other.focus();
+        await press(other, '/');
+        expect(document.activeElement).toBe(other);
+    });
+    it('clears the search with the clear button', async () => {
+        await mount();
+        const input = container.querySelector('input');
+        await act(async () => {
+            const set = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
+            set?.call(input, 'zzzz');
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+        await act(async () => named('Clear search').click());
+        expect(input.value).toBe('');
+        expect(container.querySelector('.bd-insert-empty')).toBeNull();
+    });
+});
+describe('versions', () => {
+    it('stamps what it inserts with the versions of the registry', async () => {
+        const v2 = createRegistryMeta({
+            components: [
+                meta('buildr/page', { capabilities: { root: true }, slots: { default: {} } }),
+                meta('buildr/box', {
+                    label: 'Box',
+                    category: 'layout',
+                    version: 2,
+                    slots: { default: {} },
+                }),
+            ],
+            templates: [],
+        });
+        const store = await mount(false, 'en', v2, toManifest(v2));
+        await click('Box');
+        expect(store.getState().doc.components['buildr/box']).toBe(2);
+        expect(children(store, 'root')).toHaveLength(3);
+    });
+});

package/dist/panels/insert/target.d.ts

@@ -0,0 +1,17 @@
+import { type BuilderDocument, type BuilderFragment, type InsertTarget, type NodeId, type Reason, type RegistryMeta } from '@next-buildr/core';
+/** Where an insertion goes, or why nowhere works. */
+export type Placement = {
+    readonly ok: true;
+    readonly target: Required<InsertTarget>;
+} | {
+    readonly ok: false;
+    readonly reason: Reason | undefined;
+};
+/**
+ * The first position the palette can insert `what` at, for the current selection: inside the
+ * selected node (each of its slots in order, at the end), else right after it, else after each
+ * ancestor in turn. With no selection, inside the root. `canInsert` decides every candidate, so the
+ * result is always a position the `node.insert` command will accept.
+ */
+export declare function placeInsertion(doc: BuilderDocument, registry: RegistryMeta, selectedId: NodeId | null, what: string | BuilderFragment): Placement;
+//# sourceMappingURL=target.d.ts.map

package/dist/panels/insert/target.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"target.d.ts","sourceRoot":"","sources":["../../../src/panels/insert/target.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,eAAe,EAGpB,KAAK,YAAY,EACjB,KAAK,MAAM,EACX,KAAK,MAAM,EACX,KAAK,YAAY,EAClB,MAAM,mBAAmB,CAAC;AAE3B,qDAAqD;AACrD,MAAM,MAAM,SAAS,GACjB;IAAE,QAAQ,CAAC,EAAE,EAAE,IAAI,CAAC;IAAC,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAA;CAAE,GAC9D;IAAE,QAAQ,CAAC,EAAE,EAAE,KAAK,CAAC;IAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,CAAC;AAEhE;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,GAAG,EAAE,eAAe,EACpB,QAAQ,EAAE,YAAY,EACtB,UAAU,EAAE,MAAM,GAAG,IAAI,EACzB,IAAI,EAAE,MAAM,GAAG,eAAe,GAC7B,SAAS,CAsCX"}

package/dist/panels/insert/target.js

@@ -0,0 +1,48 @@
+import { canInsert, createIndex, } from '@next-buildr/core';
+/**
+ * The first position the palette can insert `what` at, for the current selection: inside the
+ * selected node (each of its slots in order, at the end), else right after it, else after each
+ * ancestor in turn. With no selection, inside the root. `canInsert` decides every candidate, so the
+ * result is always a position the `node.insert` command will accept.
+ */
+export function placeInsertion(doc, registry, selectedId, what) {
+    const index = createIndex(doc);
+    let firstReason;
+    const attempt = (target) => {
+        const verdict = canInsert(doc, index, registry, target, what);
+        if (verdict.ok)
+            return { ok: true, target };
+        firstReason ??= verdict.error;
+        return undefined;
+    };
+    const inside = (id) => {
+        const node = Object.hasOwn(doc.nodes, id) ? doc.nodes[id] : undefined;
+        if (node === undefined)
+            return undefined;
+        const slots = Object.keys(registry.get(node.type)?.slots ?? {});
+        for (const slot of slots) {
+            const found = attempt({ parentId: id, slot, at: node.slots?.[slot]?.length ?? 0 });
+            if (found !== undefined)
+                return found;
+        }
+        return undefined;
+    };
+    const start = selectedId !== null && Object.hasOwn(doc.nodes, selectedId) ? selectedId : doc.root;
+    const inner = inside(start);
+    if (inner !== undefined)
+        return inner;
+    // Not inside: after the selection, then after each ancestor (the guard stops a corrupt cycle).
+    let current = start;
+    for (let hops = 0; current !== undefined && hops < 10_000; hops++) {
+        const parentId = index.parentOf[current];
+        const slot = index.slotOf[current];
+        const position = index.indexOf[current];
+        if (parentId === undefined || slot === undefined || position === undefined)
+            break;
+        const found = attempt({ parentId, slot, at: position + 1 });
+        if (found !== undefined)
+            return found;
+        current = parentId;
+    }
+    return { ok: false, reason: firstReason };
+}

package/dist/panels/inspector/controls/boolean.d.ts

@@ -0,0 +1,4 @@
+import type { BooleanPropDef } from '@next-buildr/core';
+import type { ControlProps } from './types.ts';
+export declare function BooleanControl({ id, def, label, describedBy, value, disabled, onChange, }: ControlProps<BooleanPropDef>): import("react").JSX.Element;
+//# sourceMappingURL=boolean.d.ts.map

package/dist/panels/inspector/controls/boolean.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"boolean.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/controls/boolean.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,GAAG,EACH,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE,YAAY,CAAC,cAAc,CAAC,+BAa9B"}

package/dist/panels/inspector/controls/boolean.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function BooleanControl({ id, def, label, describedBy, value, disabled, onChange, }) {
+    return (_jsx("input", { id: id, type: "checkbox", className: "bd-checkbox", checked: typeof value === 'boolean' ? value : def.default, disabled: disabled, "aria-label": label, "aria-describedby": describedBy, onChange: (event) => onChange(event.target.checked) }));
+}

package/dist/panels/inspector/controls/compound.d.ts

@@ -0,0 +1,15 @@
+import type { ListPropDef, ObjectPropDef, PropDef } from '@next-buildr/core';
+import type { ReactNode } from 'react';
+import type { ControlProps } from './types.ts';
+/** The control for a prop of any kind, or `null` for a kind that has none. Lists and objects recurse. */
+export declare function renderControl(def: PropDef, common: ControlProps): ReactNode;
+/** Moves the item at `from` to `to`; out of range returns the list unchanged. */
+export declare function moveItem<T>(list: readonly T[], from: number, to: number): T[];
+/**
+ * A list of sub-props: each item is edited with the control of `def.of`, and items can be added
+ * (up to `max`), removed (down to `min`) and reordered. Every change writes the whole new list.
+ */
+export declare function ListControl({ id, def, label, describedBy, value, disabled, onChange, }: ControlProps<ListPropDef>): import("react").JSX.Element;
+/** A group of named sub-props, each edited with its own control; a change writes the whole object. */
+export declare function ObjectControl({ id, def, label, describedBy, value, disabled, onChange, }: ControlProps<ObjectPropDef>): import("react").JSX.Element;
+//# sourceMappingURL=compound.d.ts.map

package/dist/panels/inspector/controls/compound.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compound.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/controls/compound.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC7E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAavC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,yGAAyG;AACzG,wBAAgB,aAAa,CAAC,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,GAAG,SAAS,CA2B3E;AAQD,iFAAiF;AACjF,wBAAgB,QAAQ,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,CAAC,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,CAAC,EAAE,CAM7E;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,GAAG,EACH,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE,YAAY,CAAC,WAAW,CAAC,+BAyE3B;AAED,sGAAsG;AACtG,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,GAAG,EACH,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE,YAAY,CAAC,aAAa,CAAC,+BA6B7B"}