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

package/dist/panels/insert/catalog.js

@@ -28,19 +28,43 @@ function templateItem(template) {
 export function safeThumbnail(value) {
     if (value === undefined)
         return undefined;
+    if (value.startsWith('data:image/svg+xml,')) {
+        try {
+            const svg = decodeURIComponent(value.slice('data:image/svg+xml,'.length));
+            // Only the manifest wireframe generator's fixed SVG vocabulary is accepted.
+            return /^<svg xmlns='http:\/\/www\.w3\.org\/2000\/svg' viewBox='0 0 160 100'>(?:<path fill='#[0-9a-f]{6}' d='[M0-9 .h/vz-]+'\/>)*<\/svg>$/i.test(svg)
+                ? value
+                : undefined;
+        }
+        catch {
+            return undefined;
+        }
+    }
     return /^(https?:\/\/|\/(?!\/)|data:image\/(png|jpe?g|gif|webp|avif);)/i.test(value)
         ? value
         : undefined;
 }
-/** Components that can be inserted (not root-only, not `insertable: false`) and templates, from the manifest. */
+const HIDDEN_TYPES = new Set(['buildr/rich-text']);
+const HIDDEN_CATEGORIES = new Set(['cms']);
+/**
+ * Components and templates that can be inserted from the manifest: not root-only, and not
+ * `insertable: false` (for a component or a template). Hidden ones stay registered and keep
+ * working in existing documents.
+ */
 export function paletteItems(manifest) {
     const byLabel = (a, b) => a.label.localeCompare(b.label);
     return {
         components: Object.values(manifest.components)
-            .filter((meta) => meta.capabilities?.insertable !== false && meta.capabilities?.root !== true)
+            .filter((meta) => meta.capabilities?.insertable !== false &&
+            meta.capabilities?.root !== true &&
+            !HIDDEN_TYPES.has(meta.type) &&
+            !HIDDEN_CATEGORIES.has(meta.category))
             .map(componentItem)
             .sort(byLabel),
-        templates: Object.values(manifest.templates).map(templateItem).sort(byLabel),
+        templates: Object.values(manifest.templates)
+            .filter((template) => template.insertable !== false)
+            .map(templateItem)
+            .sort(byLabel),
     };
 }
 /** The items whose label, type, description or keywords contain every word of `query`. */
@@ -48,6 +72,64 @@ export function filterItems(items, query) {
     const words = query.toLowerCase().split(/\s+/).filter(Boolean);
     return items.filter((item) => words.every((word) => item.haystack.includes(word)));
 }
+/** Explicit editor sections; unavailable types are skipped without placeholders. */
+export const BLOCK_SECTIONS = [
+    {
+        section: 'layout',
+        types: ['buildr/container', 'buildr/grid', 'buildr/spacer', 'buildr/anchor'],
+    },
+    {
+        section: 'content',
+        types: [
+            'buildr/heading',
+            'buildr/text',
+            'buildr/image',
+            'buildr/list',
+            'buildr/button',
+            'buildr/link',
+            'buildr/badge',
+            'buildr/divider',
+            'buildr/accordion',
+            'buildr/card',
+        ],
+    },
+    {
+        section: 'media',
+        types: [
+            'buildr/carousel',
+            'buildr/gallery',
+            'buildr/icon',
+            'buildr/video',
+            'buildr/iframe',
+            'buildr/map',
+        ],
+    },
+    {
+        section: 'forms',
+        types: [
+            'buildr/form',
+            'buildr/input',
+            'buildr/textarea',
+            'buildr/select',
+            'buildr/checkbox',
+            'buildr/button',
+            'buildr/fieldset',
+            'buildr/captcha',
+        ],
+    },
+];
+/** Mapped blocks may occur in multiple sections; all remaining blocks retain their categories. */
+export function blockSections(items) {
+    const byType = new Map(items.map((item) => [item.id, item]));
+    const mapped = new Set(BLOCK_SECTIONS.flatMap(({ types }) => [...types]));
+    return [
+        ...BLOCK_SECTIONS.map(({ section, types }) => ({
+            category: section,
+            items: types.flatMap((type) => byType.get(type) ?? []),
+        })).filter((group) => group.items.length > 0),
+        ...groupByCategory(items.filter((item) => !mapped.has(item.id))),
+    ];
+}
 /** The order categories appear in; a category this list does not know follows, alphabetically. */
 export const CATEGORY_ORDER = [
     'layout',

package/dist/panels/insert/catalog.order.test.js

@@ -1,5 +1,6 @@
+import { createRegistryMeta, toManifest } from '@next-buildr/core';
 import { describe, expect, it } from 'vitest';
-import { groupByCategory } from './catalog.js';
+import { BLOCK_SECTIONS, blockSections, filterItems, groupByCategory, paletteItems, } from './catalog.js';
 const item = (category) => ({ id: `x/${category}`, kind: 'component', category, label: category });
 describe('category order', () => {
     it('lists layout, content, media, forms, ui, cms; unknown categories go last', () => {
@@ -15,3 +16,107 @@ describe('category order', () => {
         ]);
     });
 });
+describe('block sections', () => {
+    const block = (id, category = 'ui') => ({
+        ...item(category),
+        id,
+        haystack: id,
+    });
+    it('uses explicit mapping order regardless of metadata or input order', () => {
+        const blocks = BLOCK_SECTIONS.flatMap(({ types }) => types.map((id) => block(id)));
+        const unique = [...new Map(blocks.map((entry) => [entry.id, entry])).values()];
+        const groups = blockSections(unique.reverse());
+        expect(groups.map((group) => group.category)).toEqual(['layout', 'content', 'media', 'forms']);
+        expect(groups.map((group) => group.items.map((entry) => entry.id))).toEqual(BLOCK_SECTIONS.map(({ types }) => [...types]));
+    });
+    it('places fieldset in the former label slot in forms', () => {
+        expect(BLOCK_SECTIONS.find(({ section }) => section === 'forms')?.types).toEqual([
+            'buildr/form',
+            'buildr/input',
+            'buildr/textarea',
+            'buildr/select',
+            'buildr/checkbox',
+            'buildr/button',
+            'buildr/fieldset',
+            'buildr/captcha',
+        ]);
+    });
+    it('lists button in content and forms while search returns it once', () => {
+        const blocks = [block('buildr/button')];
+        expect(blockSections(blocks).map((group) => group.category)).toEqual(['content', 'forms']);
+        expect(filterItems(blocks, 'button')).toHaveLength(1);
+    });
+    it('skips missing types and appends unmapped blocks by their original category', () => {
+        const groups = blockSections([
+            block('custom/widget', 'third-party'),
+            block('buildr/text'),
+            block('buildr/list-item'),
+        ]);
+        expect(groups.map((group) => group.category)).toEqual(['content', 'ui', 'third-party']);
+        expect(groups.flatMap((group) => group.items.map((entry) => entry.id))).toEqual([
+            'buildr/text',
+            'buildr/list-item',
+            'custom/widget',
+        ]);
+        expect(blockSections([])).toEqual([]);
+    });
+});
+describe('palette visibility', () => {
+    it('lists carousel and gallery in media and excludes their non-insertable children', () => {
+        const types = [
+            'buildr/carousel',
+            'buildr/gallery',
+            'buildr/carousel-slide',
+            'buildr/gallery-item',
+        ];
+        const components = types.map((type) => ({
+            type,
+            label: type,
+            category: 'media',
+            version: 1,
+            props: {},
+            contentCategories: ['flow'],
+            styles: { groups: [] },
+            runtime: 'shared',
+            capabilities: { insertable: !type.endsWith('-slide') && !type.endsWith('-item') },
+        }));
+        const palette = paletteItems(toManifest(createRegistryMeta({ components, templates: [] }))).components;
+        const groups = blockSections(palette);
+        expect(groups.map((group) => group.category)).toEqual(['media']);
+        expect(groups[0]?.items.map((entry) => entry.id)).toEqual(types.slice(0, 2));
+        expect(BLOCK_SECTIONS.flatMap(({ types }) => [...types])).not.toContain('buildr/carousel-slide');
+        expect(BLOCK_SECTIONS.flatMap(({ types }) => [...types])).not.toContain('buildr/gallery-item');
+    });
+    it('filters hidden types and categories before section grouping and search', () => {
+        const components = [
+            ['buildr/rich-text', 'content'],
+            ['buildr/loop', 'cms'],
+            ['buildr/pagination', 'cms'],
+            ['custom/cms-block', 'cms'],
+            ['custom/widget', 'third-party'],
+        ].map(([type, category]) => ({
+            type,
+            category,
+            label: type,
+            version: 1,
+            props: {},
+            contentCategories: ['flow'],
+            styles: { groups: [] },
+            runtime: 'shared',
+        }));
+        const manifest = toManifest(createRegistryMeta({ components, templates: [] }));
+        const palette = paletteItems(manifest).components;
+        expect(blockSections(palette).map((group) => group.category)).toEqual(['third-party']);
+        expect(palette.map((entry) => entry.id)).toEqual(['custom/widget']);
+        for (const query of ['rich-text', 'loop', 'pagination', 'cms-block']) {
+            expect(filterItems(palette, query)).toEqual([]);
+        }
+        expect(filterItems(palette, 'widget').map((entry) => entry.id)).toEqual(['custom/widget']);
+        expect(Object.keys(manifest.components)).toHaveLength(5);
+    });
+});
+it('lists Map in media using the registered type', () => {
+    const types = BLOCK_SECTIONS.find(({ section }) => section === 'media')?.types;
+    expect(types).toContain('buildr/map');
+    expect(types).not.toContain('buildr/google-maps');
+});

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

@@ -1,3 +1,4 @@
+export type { InsertPanelProps } from './insert-panel.tsx';
 export { InsertPanel } from './insert-panel.tsx';
 export { placeInsertion } from './target.ts';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/panels/insert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/panels/insert/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

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

@@ -1,7 +1,17 @@
+import { type RefObject } from 'react';
+import type { PaletteMode } from '../../app/contracts.ts';
+export interface InsertPanelProps {
+    /** Blocks or patterns; leave out for a panel that keeps the choice itself. */
+    readonly mode?: PaletteMode;
+    readonly onModeChange?: (mode: PaletteMode) => void;
+    /** Receives the search input, so the shell can focus it (the `/` shortcut, the empty page's "Add block"). */
+    readonly searchRef?: RefObject<HTMLInputElement | null>;
+}
 /**
- * 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.
+ * The block and pattern palette (docs/editor.md#insert): a Blocks / Patterns switch, search, the
+ * insert target and always-expanded block sections. A click (or Enter) 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 declare function InsertPanel(): import("react").JSX.Element;
+export declare function InsertPanel({ mode: modeProp, onModeChange, searchRef: searchRefProp, }?: InsertPanelProps): import("react").JSX.Element;
 //# sourceMappingURL=insert-panel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"insert-panel.d.ts","sourceRoot":"","sources":["../../../src/panels/insert/insert-panel.tsx"],"names":[],"mappings":"AA2CA;;;;GAIG;AACH,wBAAgB,WAAW,gCA+P1B"}
+{"version":3,"file":"insert-panel.d.ts","sourceRoot":"","sources":["../../../src/panels/insert/insert-panel.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAqB,KAAK,SAAS,EAAwC,MAAM,OAAO,CAAC;AAChG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAqC1D,MAAM,WAAW,gBAAgB;IAC/B,8EAA8E;IAC9E,QAAQ,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC;IAC5B,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACpD,6GAA6G;IAC7G,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;CACzD;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EAAE,QAAQ,EACd,YAAY,EACZ,SAAS,EAAE,aAAa,GACzB,GAAE,gBAAqB,+BAiavB"}

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

@@ -1,64 +1,103 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, 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 { usePlural, 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 { useViewState } from '../../store/react.js';
+import { ComponentIcon, Icon, SearchField, SegmentedControl, Tooltip, useToast, } from '../../ui/index.js';
+import { blockSections, 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 label split around the first match of the query, for highlighting. */
+function splitMatch(label, query) {
+    const needle = query.trim().toLowerCase();
+    const at = needle === '' ? -1 : label.toLowerCase().indexOf(needle);
+    return at === -1
+        ? [label, '', '']
+        : [label.slice(0, at), label.slice(at, at + needle.length), label.slice(at + needle.length)];
 }
 /**
- * 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.
+ * The block and pattern palette (docs/editor.md#insert): a Blocks / Patterns switch, search, the
+ * insert target and always-expanded block sections. A click (or Enter) 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() {
+export function InsertPanel({ mode: modeProp, onModeChange, searchRef: searchRefProp, } = {}) {
     const t = useT();
+    const plural = usePlural();
     const store = useEditor();
+    const { insertionTarget, setInsertionTarget } = useViewState();
+    const targetNode = useEditorState((state) => insertionTarget === null ? undefined : state.doc.nodes[insertionTarget.parentId]);
     const manifest = useManifest();
+    const selectedId = useEditorState((state) => state.anchorId);
+    const selectedNode = useEditorState((state) => state.anchorId === null ? undefined : state.doc.nodes[state.anchorId]);
+    const rootId = useEditorState((state) => state.doc.root);
     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 [ownMode, setOwnMode] = useState('blocks');
+    const mode = modeProp ?? ownMode;
+    const [patternCategory, setPatternCategory] = useState('all');
+    const ownSearchRef = useRef(null);
+    const searchRef = searchRefProp ?? ownSearchRef;
     const toast = useToast();
-    const sections = useMemo(() => {
+    const chooseMode = (next) => {
+        setOwnMode(next);
+        onModeChange?.(next);
+    };
+    const palette = 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;
+            return undefined;
+        const items = paletteItems(manifest);
+        const knownPatterns = {
+            'buildr/hero': 'heroImage',
+            'buildr/feature-grid': 'threeCards',
+            'buildr/testimonial': 'testimonial',
+            'buildr/cta': 'cta',
+        };
+        return {
+            ...items,
+            templates: items.templates.map((item) => {
+                const known = knownPatterns[item.id];
+                if (known === undefined)
+                    return item;
+                const label = t(`patterns.item.${known}.name`);
+                const description = t(`patterns.item.${known}.desc`);
+                return {
+                    ...item,
+                    label,
+                    description,
+                    haystack: `${item.haystack} ${label} ${description}`.toLowerCase(),
+                };
+            }),
+        };
+    }, [manifest, t]);
+    const patterns = mode === 'patterns';
+    const patternCategories = [...new Set(palette?.templates.map((item) => item.category) ?? [])];
+    const patternCategoryName = (category) => ['marketing', 'blog', 'commerce'].includes(category)
+        ? t(`patterns.cat.${category}`)
+        : categoryName(t, category);
+    const source = patterns
+        ? palette?.templates.filter((item) => patternCategory === 'all' || item.category === patternCategory)
+        : palette?.components;
     const searching = query.trim() !== '';
-    const empty = !loading && sections.every((section) => section.groups.length === 0);
+    const loading = manifest === undefined;
+    const results = useMemo(() => (searching && source !== undefined ? filterItems(source, query) : []), [searching, source, query]);
+    const groups = useMemo(() => !searching && source !== undefined
+        ? patterns
+            ? groupByCategory(source)
+            : blockSections(source)
+        : [], [searching, source, patterns]);
     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 === 'Escape' && store.view.getState().insertionTarget !== null) {
+                store.view.getState().setInsertionTarget(null);
+            }
             if (event.key !== '/' || event.defaultPrevented || event.isComposing)
                 return;
             if (event.ctrlKey || event.metaKey || event.altKey)
@@ -71,17 +110,7 @@ export function InsertPanel() {
         };
         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;
-    });
+    }, [searchRef, store]);
     const fragmentOf = (item) => {
         const versions = registryVersions(store.registry);
         if (item.kind === 'template') {
@@ -107,7 +136,7 @@ export function InsertPanel() {
         if (fragment === undefined)
             return;
         const state = store.getState();
-        const placement = placeInsertion(state.doc, store.registry, state.selectedIds.at(-1) ?? null, fragment);
+        const placement = placeInsertion(state.doc, store.registry, state.selectedIds.at(-1) ?? null, fragment, store.view.getState().insertionTarget);
         if (!placement.ok) {
             toast.show({
                 id: 'insert',
@@ -125,31 +154,61 @@ export function InsertPanel() {
             toast.show({ id: 'insert', variant: 'error', message: result.error.message });
             return;
         }
-        toast.show({ id: 'insert', variant: 'success', message: `${t('insert.done')}: ${item.label}` });
+        setInsertionTarget(null);
+        toast.show({
+            id: 'insert',
+            variant: 'success',
+            message: t('insert.done.named').replace('{name}', () => 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 onPress = (item, event) => {
+        if (readOnly)
+            return;
+        press?.(item.kind === 'template'
+            ? { kind: 'template', id: item.id }
+            : { kind: 'component', type: item.id }, item.label, event);
+    };
+    const addLabel = (item) => t(item.kind === 'template' ? 'patterns.insert' : 'blocks.add').replace('{name}', () => item.label);
+    const glyph = (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 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" }) }));
+    };
+    const renderTile = (item, keyPrefix) => {
+        const title = item.label;
+        const description = item.description ??
+            t('patterns.description').replace('{category}', () => patternCategoryName(item.category));
+        const button = (_jsxs("button", { type: "button", className: "bd-insert-item", "aria-label": addLabel(item), onPointerDown: (event) => onPress(item, event), "data-kind": item.kind, "data-id": item.id, onClick: () => insert(item), children: [glyph(item), _jsx(Icon, { name: "ellipsis", className: "bd-insert-grip", "aria-hidden": "true" }), _jsx("span", { className: "bd-insert-label", children: title }), item.kind === 'template' ? _jsx("span", { className: "bd-insert-desc", children: description }) : null] }));
+        return (_jsx("li", { children: item.description === undefined ? (button) : (_jsx(Tooltip, { content: item.description, children: button })) }, `${keyPrefix}:${item.kind}:${item.id}`));
+    };
+    const renderResult = (item) => {
+        const [pre, mid, post] = splitMatch(item.label, query);
+        return (_jsx("li", { children: _jsxs("button", { type: "button", className: "bd-insert-item bd-insert-result", "aria-label": addLabel(item), onPointerDown: (event) => onPress(item, event), "data-kind": item.kind, "data-id": item.id, onClick: () => insert(item), children: [glyph(item), _jsxs("span", { className: "bd-insert-result-text", children: [_jsxs("span", { className: "bd-insert-label", children: [pre, mid === '' ? null : _jsx("mark", { className: "bd-insert-mark", children: mid }), post] }), _jsx("span", { className: "bd-insert-result-cat", children: categoryName(t, item.category) }), item.description !== undefined ? (_jsx("span", { className: "bd-insert-desc", children: item.description })) : null] })] }) }, `${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)))] })] }));
+    const renderGroup = (key, name, items) => (_jsxs("div", { role: "group", "aria-label": name, className: "bd-insert-group", children: [_jsxs("h4", { className: "bd-insert-category", children: [_jsx("span", { className: "bd-insert-category-name", children: name }), _jsx("span", { className: "bd-insert-count", children: items.length })] }), _jsx("ul", { className: "bd-insert-list", "data-kind": "component", children: items.map((item) => renderTile(item, key)) })] }, key));
+    const kind = patterns ? 'template' : 'component';
+    const label = t(patterns ? 'patterns.search' : 'blocks.search');
+    const targetName = selectedNode === undefined
+        ? undefined
+        : selectedId === rootId
+            ? t('blocks.target.page')
+            : (selectedNode.name ??
+                manifest?.components[selectedNode.type]?.label ??
+                selectedNode.type);
+    return (_jsxs("div", { className: "bd-insert", "data-view": "grid", "data-mode": mode, children: [_jsx(SegmentedControl, { className: "bd-seg--full", label: t('leftPanel.kind'), value: mode, onValueChange: (next) => chooseMode(next === 'patterns' ? 'patterns' : 'blocks'), options: [
+                    { value: 'blocks', label: t('leftPanel.mode.blocks') },
+                    { value: 'patterns', label: t('leftPanel.mode.patterns') },
+                ] }), _jsx(SearchField, { ref: searchRef, value: query, onChange: setQuery, label: label, clearLabel: t('blocks.search.clear'), placeholder: label, hint: "/" }), _jsxs("div", { className: "bd-insert-target", role: "status", "data-node-id": insertionTarget?.parentId ?? selectedId ?? undefined, children: [_jsx(Icon, { name: "arrow-right", "aria-hidden": "true" }), _jsx("span", { children: insertionTarget !== null ? (t('insert.target.gap')
+                            .replace('{name}', () => targetNode?.name ??
+                            manifest?.components[targetNode?.type ?? '']?.label ??
+                            targetNode?.type ??
+                            insertionTarget.parentId)
+                            .replace('{position}', String(insertionTarget.index + 1))) : targetName === undefined ? (t('leftPanel.insertAtEnd')) : (_jsxs(_Fragment, { children: [t('blocks.insertAfter'), " ", _jsx("b", { children: targetName })] })) }), insertionTarget !== null ? (_jsx("button", { type: "button", "aria-label": t('insert.target.clear'), onClick: () => setInsertionTarget(null), children: _jsx(Icon, { name: "x", size: "sm" }) })) : null] }), patterns ? (_jsx("div", { className: "bd-pattern-filters", role: "group", "aria-label": t('patterns.category'), children: ['all', ...patternCategories, 'mine'].map((category) => (_jsx("button", { type: "button", "aria-pressed": patternCategory === category, onClick: () => setPatternCategory(category), children: category === 'all'
+                        ? t('patterns.cat.all')
+                        : category === 'mine'
+                            ? t('patterns.cat.mine')
+                            : patternCategoryName(category) }, category))) })) : null, _jsxs("div", { className: "bd-insert-scroll", children: [loading ? (_jsx("section", { className: "bd-insert-section", "aria-busy": "true", children: _jsx("ul", { className: "bd-insert-list", "data-kind": "template", "aria-hidden": "true", children: SKELETONS.map((key) => (_jsx("li", { className: "bd-insert-skeleton" }, key))) }) })) : null, searching && !loading && results.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "bd-insert-results-count", role: "status", children: plural('blocks.results', results.length) }), _jsx("ul", { className: "bd-insert-results", "data-kind": kind, children: results.map(renderResult) })] })) : null, searching && !loading && results.length === 0 ? (_jsxs("p", { className: "bd-insert-empty", children: [t('blocks.empty').replace('{query}', () => query.trim()), patterns ? null : (_jsxs(_Fragment, { children: [' ', t('blocks.empty.check'), ' ', _jsx("button", { type: "button", className: "bd-insert-link", onClick: () => chooseMode('patterns'), children: t('blocks.empty.patterns') })] }))] })) : null, !searching && !loading ? (patterns ? (source?.length ? (_jsx("ul", { className: "bd-insert-list bd-pattern-list", "data-kind": "template", children: source.map((item) => renderTile(item, 'patterns')) })) : (_jsx("p", { className: "bd-insert-shell", children: t('patterns.empty') }))) : (groups.map((group, index) => renderGroup(`components:${index}:${group.category}`, categoryName(t, group.category), group.items)))) : null] }, mode)] }));
 }