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

package/dist/panels/inspector/inspector.test.js

@@ -1,16 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @vitest-environment jsdom
 import { createRegistryMeta, createSeededIdGenerator, p, s, toManifest, } from '@next-buildr/core';
+import { $getRoot } from 'lexical';
 import { act } from 'react';
 import { createRoot } from 'react-dom/client';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } 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 { parseNumber } from './controls/index.js';
-import { Inspector } from './inspector.js';
+import { Inspector, InspectorRail } from './inspector.js';
 import { isAdvancedProp, propLabel } from './props-panel.js';
 import { readProp } from './value.js';
 expect.extend(matchers);
@@ -30,6 +31,7 @@ const widget = {
         symbol: p.icon({}),
         ariaLabel: p.text({ group: 'accessibility' }),
         fixed: p.number({ default: 1, localizable: false }),
+        rich: p.richText({ label: 'Rich text' }),
     },
     contentCategories: ['flow'],
     styles: { groups: [] },
@@ -75,16 +77,19 @@ afterEach(() => {
     act(() => root.unmount());
     document.body.innerHTML = '';
 });
-async function mount(select, extra = {}, doc = fixture()) {
+async function mount(select, extra = {}, doc = fixture(), customMeta) {
+    const currentRegistry = customMeta
+        ? createRegistryMeta({ components: [page, customMeta] })
+        : registry;
     const store = createEditorStore({
         doc,
-        registry,
+        registry: currentRegistry,
         generateId: createSeededIdGenerator(3),
         validationDelayMs: null,
     });
     if (select !== null)
         store.select(select);
-    await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(ManifestProvider, { manifest: manifest, children: _jsx(EditorStoreProvider, { store: store, children: _jsx(Inspector, { ...extra }) }) }) })));
+    await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(ManifestProvider, { manifest: customMeta ? toManifest(currentRegistry) : manifest, children: _jsx(EditorStoreProvider, { store: store, children: _jsx(Inspector, { ...extra }) }) }) })));
     return store;
 }
 const field = (prop) => container.querySelector(`[data-prop=${prop}]`);
@@ -157,13 +162,99 @@ describe('Inspector', () => {
         expect(toggle().getAttribute('aria-expanded')).toBe('false');
         window.localStorage.clear();
     });
-    it('duplicates and deletes from the header with the same commands as the layers', async () => {
+    const openMenu = async () => {
+        const trigger = container.querySelector('button[aria-label="More block options"]');
+        await act(async () => {
+            trigger.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, button: 0 }));
+            trigger.click();
+        });
+    };
+    const menuItem = (label) => [...document.querySelectorAll('[role=menuitem]')].find((el) => el.textContent === label);
+    it('duplicates and deletes from the more menu with the same commands as the layers', async () => {
         const store = await mount('widget0001');
-        const named = (label) => container.querySelector(`button[aria-label="${label}"]`);
-        await act(async () => named('Duplicate element').click());
+        await openMenu();
+        await act(async () => menuItem('Duplicate').click());
         expect(Object.keys(store.getState().doc.nodes)).toHaveLength(4);
-        await act(async () => named('Delete element').click());
+        await openMenu();
+        await act(async () => menuItem('Delete block').click());
         expect(Object.keys(store.getState().doc.nodes)).toHaveLength(3);
+        await act(async () => store.undo());
+        expect(Object.keys(store.getState().doc.nodes)).toHaveLength(4);
+    });
+    it('navigates the more menu with the arrow keys', async () => {
+        await mount('widget0001');
+        await openMenu();
+        const items = () => [...document.querySelectorAll('[role=menuitem]')];
+        const key = (k) => act(async () => {
+            document.activeElement.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, cancelable: true }));
+        });
+        expect(items().length).toBeGreaterThanOrEqual(2);
+        expect(document.activeElement).toBe(items()[0]);
+        await key('ArrowDown');
+        expect(document.activeElement).toBe(items()[1]);
+        await key('End');
+        expect(document.activeElement).toBe(items().at(-1));
+        await key('ArrowDown');
+        expect(document.activeElement).toBe(items()[0]);
+        await key('ArrowUp');
+        expect(document.activeElement).toBe(items().at(-1));
+        await key('Home');
+        expect(document.activeElement).toBe(items()[0]);
+        await key('Escape');
+        expect(document.querySelector('[role=menu]')).toBeNull();
+        expect(document.activeElement).toBe(container.querySelector('button[aria-label="More block options"]'));
+    });
+    it('does not report no match on the Advanced tab while its name field matches', async () => {
+        await mount('widget0001');
+        await openTab('Advanced');
+        const search = container.querySelector('.bd-inspector-search input');
+        await typeInto(search, 'name');
+        expect(container.querySelector('[data-attr=name]')).not.toBeNull();
+        expect(container.querySelector('[data-state=no-match]')).toBeNull();
+        await typeInto(search, 'zzz');
+        expect(container.querySelector('[data-attr=name]')).toBeNull();
+        expect(container.querySelector('[data-state=no-match]')).not.toBeNull();
+    });
+    it('shows an excerpt of the text in the subtitle', async () => {
+        await mount('widget0001');
+        expect(container.querySelector('.bd-inspector-subtitle')?.textContent).toContain('Widget · “Hello”');
+    });
+    it('keeps its own tab, or follows a controlled one', async () => {
+        await mount('widget0001');
+        const tab = (name) => [...container.querySelectorAll('[role=tab]')].find((el) => el.textContent?.includes(name));
+        await act(async () => {
+            tab('Advanced').dispatchEvent(new MouseEvent('mousedown', { bubbles: true, button: 0 }));
+        });
+        expect(tab('Advanced').getAttribute('aria-selected')).toBe('true');
+        await act(async () => root.unmount());
+        root = createRoot(container);
+        const onTabChange = vi.fn();
+        await mount('widget0001', { tab: 'style', onTabChange });
+        expect(tab('Style').getAttribute('aria-selected')).toBe('true');
+        await act(async () => {
+            tab('Content').dispatchEvent(new MouseEvent('mousedown', { bubbles: true, button: 0 }));
+        });
+        expect(onTabChange).toHaveBeenCalledWith('content');
+        expect(tab('Style').getAttribute('aria-selected')).toBe('true');
+    });
+    it('shows the page settings action in the empty state only when given', async () => {
+        await mount(null);
+        expect(container.textContent).not.toContain('Page settings');
+        await act(async () => root.unmount());
+        root = createRoot(container);
+        const onPageSettings = vi.fn();
+        await mount(null, { onPageSettings });
+        await act(async () => [...container.querySelectorAll('button')].find((b) => b.textContent === 'Page settings').click());
+        expect(onPageSettings).toHaveBeenCalled();
+    });
+    it('renders the rail and reports tab and expand clicks', async () => {
+        const onTabChange = vi.fn();
+        const onExpand = vi.fn();
+        await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(InspectorRail, { tab: "content", onTabChange: onTabChange, onExpand: onExpand }) })));
+        const style = container.querySelector('button[aria-label="Style"]');
+        await act(async () => style.click());
+        expect(onTabChange).toHaveBeenCalledWith('style');
+        expect(onExpand).toHaveBeenCalled();
     });
     it('gives every control an accessible name and passes axe', async () => {
         await mount('widget0001');
@@ -256,8 +347,17 @@ describe('Inspector', () => {
         };
         await mount('widget0001', {}, bound);
         expect(field('title').querySelector('input').value).toBe('post.title');
-        expect(field('title').querySelector('[aria-pressed=true]')?.textContent).toBe('Data');
-        expect(field('href').querySelector('[aria-pressed=true]')?.textContent).toBe('Formula');
+        await act(async () => {
+            field('title').querySelector('.bd-value-modes button').click();
+        });
+        expect(document.querySelector('.bd-popover [aria-pressed=true]')?.getAttribute('aria-label')).toBe('Data');
+        await act(async () => {
+            document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        });
+        await act(async () => {
+            field('href').querySelector('.bd-value-modes button').click();
+        });
+        expect(document.querySelector('.bd-popover [aria-pressed=true]')?.getAttribute('aria-label')).toBe('Formula');
         expect(field('href').querySelector('textarea').value).toBe('post.slug');
     });
     it('writes a translation to the language being edited, only for translatable props', async () => {
@@ -326,3 +426,168 @@ describe('Inspector', () => {
         expect(container.textContent).toContain('styles of widget0001');
     });
 });
+describe('template v2 prop controls', () => {
+    it('scrubs bounded numeric props through node.setProp with undo and redo', async () => {
+        const store = await mount('widget0001');
+        const dispatch = vi.spyOn(store, 'dispatch');
+        const label = field('count').querySelector('label');
+        const drag = async (x) => act(async () => {
+            label.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, button: 0, clientX: 0 }));
+            label.dispatchEvent(new MouseEvent('pointermove', { bubbles: true, clientX: x }));
+            label.dispatchEvent(new MouseEvent('pointerup', { bubbles: true }));
+        });
+        await drag(6);
+        expect(propOf(store, 'widget0001', 'count')).toEqual({ kind: 'static', value: 7 });
+        expect(dispatch).toHaveBeenCalledWith({
+            type: 'node.setProp',
+            payload: { id: 'widget0001', prop: 'count', value: { kind: 'static', value: 7 } },
+        });
+        await drag(90);
+        expect(propOf(store, 'widget0001', 'count')).toEqual({ kind: 'static', value: 10 });
+        await act(async () => {
+            store.undo();
+        });
+        expect(propOf(store, 'widget0001', 'count')).toEqual({ kind: 'static', value: 7 });
+        await act(async () => {
+            store.redo();
+        });
+        expect(propOf(store, 'widget0001', 'count')).toEqual({ kind: 'static', value: 10 });
+    });
+    it('saves underline, strike and clear as safe rich-text props, and undoes the changes', async () => {
+        const doc = fixture();
+        const node = doc.nodes['widget0001'];
+        if (node === undefined)
+            throw new Error('widget missing');
+        const initial = {
+            type: 'root',
+            version: 1,
+            children: [
+                {
+                    type: 'paragraph',
+                    version: 1,
+                    children: [{ type: 'text', version: 1, text: 'Hello', format: 0 }],
+                },
+            ],
+        };
+        const store = await mount('widget0001', {}, { ...doc, nodes: { ...doc.nodes, widget0001: { ...node, props: { rich: s(initial) } } } });
+        const dispatch = vi.spyOn(store, 'dispatch');
+        const editor = field('rich').querySelector('[role=textbox]').__lexicalEditor;
+        await act(async () => {
+            editor.update(() => {
+                $getRoot().select(0, 1);
+            }, { discrete: true });
+        });
+        const format = async (label) => act(async () => {
+            field('rich').querySelector(`[aria-label="${label}"]`)?.click();
+        });
+        await format('Underline');
+        const formatted = propOf(store, 'widget0001', 'rich');
+        expect(formatted?.kind).toBe('static');
+        expect(dispatch.mock.calls.every(([command]) => command.type === 'node.setProp')).toBe(true);
+        expect(JSON.stringify(formatted)).toContain('"format":8');
+        await act(async () => {
+            store.undo();
+        });
+        expect(propOf(store, 'widget0001', 'rich')).toEqual(s(initial));
+        await act(async () => {
+            store.redo();
+        });
+        expect(JSON.stringify(propOf(store, 'widget0001', 'rich'))).toContain('"format":8');
+        await act(async () => {
+            editor.update(() => {
+                $getRoot().select(0, 1);
+            }, { discrete: true });
+        });
+        await format('Strikethrough');
+        expect(JSON.stringify(propOf(store, 'widget0001', 'rich'))).toContain('"format":12');
+        Range.prototype.getBoundingClientRect ??= () => new DOMRect();
+        Range.prototype.getClientRects ??= () => [];
+        await act(async () => editor.update(() => {
+            $getRoot().getFirstDescendant()?.selectStart();
+        }, { discrete: true }));
+        dispatch.mockClear();
+        await format('Clear formatting');
+        expect(dispatch).not.toHaveBeenCalled();
+        expect(JSON.stringify(propOf(store, 'widget0001', 'rich'))).toContain('"format":12');
+        await act(async () => editor.update(() => {
+            $getRoot().select(0, 1);
+        }, { discrete: true }));
+        await format('Clear formatting');
+        expect(propOf(store, 'widget0001', 'rich')).toEqual(s(initial));
+    });
+});
+describe('Advanced template controls', () => {
+    it('places tabs before search and writes breakpoint visibility with undo and redo', async () => {
+        const store = await mount('widget0001');
+        const tabs = container.querySelector('[role=tablist]');
+        const search = container.querySelector('.bd-inspector-search input');
+        expect(tabs.compareDocumentPosition(search) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+        await openTab('Advanced');
+        const chip = container.querySelector('.bd-visibility-chips button:nth-child(2)');
+        await act(async () => chip.click());
+        expect(store.getState().doc.nodes['widget0001']?.styles?.bp?.['tablet']?.visibility?.hidden).toBe(true);
+        await act(async () => store.undo());
+        expect(store.getState().doc.nodes['widget0001']?.styles?.bp?.['tablet']?.visibility?.hidden).toBeUndefined();
+        await act(async () => store.redo());
+        expect(store.getState().doc.nodes['widget0001']?.styles?.bp?.['tablet']?.visibility?.hidden).toBe(true);
+        await act(async () => {
+            for (const toggle of container.querySelectorAll('.bd-advanced-group > h4 button'))
+                toggle.click();
+        });
+        expect(await axe(container)).toHaveNoViolations();
+    });
+});
+describe('Advanced condition commands', () => {
+    it('clears a display condition with undo and redo', async () => {
+        const base = fixture();
+        const node = base.nodes['widget0001'];
+        if (!node)
+            throw new Error('missing fixture');
+        const store = await mount('widget0001', {}, {
+            ...base,
+            nodes: {
+                ...base.nodes,
+                widget0001: { ...node, visibleIf: { kind: 'binding', path: 'post.published' } },
+            },
+        });
+        await openTab('Advanced');
+        const remove = [...container.querySelectorAll('button')].find((button) => button.textContent === 'Remove the condition');
+        await act(async () => remove.click());
+        expect(store.getState().doc.nodes['widget0001']?.visibleIf).toBeUndefined();
+        await act(async () => store.undo());
+        expect(store.getState().doc.nodes['widget0001']?.visibleIf).toEqual({
+            kind: 'binding',
+            path: 'post.published',
+        });
+        await act(async () => store.redo());
+        expect(store.getState().doc.nodes['widget0001']?.visibleIf).toBeUndefined();
+    });
+});
+describe('Heading level segments', () => {
+    it('shows six levels before text and writes the numeric prop through history', async () => {
+        const store = await mount('widget0001', {}, fixture(), {
+            ...widget,
+            props: {
+                title: widget.props['title'],
+                level: p.select({ options: [1, 2, 3, 4, 5, 6], default: 2 }),
+            },
+        });
+        const levels = field('level');
+        const segments = levels.querySelectorAll('.bd-segment');
+        expect([...segments].map((button) => button.textContent)).toEqual([
+            'H1',
+            'H2',
+            'H3',
+            'H4',
+            'H5',
+            'H6',
+        ]);
+        expect(levels.compareDocumentPosition(field('title')) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+        await act(async () => segments[2].click());
+        expect(propOf(store, 'widget0001', 'level')).toEqual(s(3));
+        await act(async () => store.undo());
+        expect(propOf(store, 'widget0001', 'level')).toBeUndefined();
+        await act(async () => store.redo());
+        expect(propOf(store, 'widget0001', 'level')).toEqual(s(3));
+    });
+});

package/dist/panels/inspector/props-panel.d.ts

@@ -1,7 +1,22 @@
 import type { ComponentMeta, PageNode, PropDef, Value } from '@next-buildr/core';
 import { propLabel } from './controls/index.ts';
+import { type PropReading } from './value.ts';
 export declare const isAdvancedProp: (def: PropDef) => boolean;
 export { propLabel };
+/**
+ * The group a prop is shown in. The background props of a container carry no `group`; they are
+ * collected under "Background" by their names (`background*` and `overlay*`), so the editor needs
+ * no knowledge of the component.
+ */
+export declare function propGroup(name: string, def: PropDef): string;
+/** A text prop that always holds an address outside the site (the iframe's `url`, ADR-028). */
+export declare const isExternalUrlProp: (type: string, name: string, def: PropDef) => boolean;
+/**
+ * Text has three ways to write its content (ADR-026): `mode` picks one of `text`, `rich` and
+ * `html`. The inspector shows the mode as a switch and only the field of the chosen mode. Found by
+ * the shape of the props, so the editor needs no knowledge of the component.
+ */
+export declare function hasTextModes(props: Readonly<Record<string, PropDef>>): boolean;
 export interface PropsPanelProps {
     readonly node: PageNode;
     readonly meta: ComponentMeta;
@@ -10,6 +25,10 @@ export interface PropsPanelProps {
     readonly locale: string | undefined;
     readonly defaultLocale: string | undefined;
     readonly disabled: boolean;
+    /** Lower-case text the labels must contain (the inspector search); empty shows everything. */
+    readonly query?: string;
+    /** Other fields on the same tab already match the query: no "no match" message. */
+    readonly othersMatch?: boolean;
     readonly onChange: (prop: string, def: PropDef, value: unknown) => void;
     readonly onReset: (prop: string, def: PropDef) => void;
     /** Writes a binding or a formula (PB-081). */
@@ -17,6 +36,23 @@ export interface PropsPanelProps {
     /** Back from a binding or a formula to a fixed value. */
     readonly onFixed?: (prop: string, def: PropDef) => void;
 }
+export declare function Field(props: {
+    readonly name: string;
+    readonly def: PropDef;
+    readonly reading: PropReading;
+    readonly raw: Value | undefined;
+    readonly disabled: boolean;
+    readonly translating: boolean;
+    readonly onChange: PropsPanelProps['onChange'];
+    readonly onReset: PropsPanelProps['onReset'];
+    readonly onSetValue: PropsPanelProps['onSetValue'];
+    readonly onFixed: PropsPanelProps['onFixed'];
+    readonly nameFor: (text: string) => string;
+    /** The `mode` prop of a text with three modes: drawn as a switch. */
+    readonly textMode?: boolean;
+    /** The prop is an external address: it is added through the ADR-028 warning. */
+    readonly externalUrl?: boolean;
+}): import("react").JSX.Element;
 /**
  * The props of a component as controls, grouped by their `group` (docs/editor.md#inspector). A
  * control writes with `node.setProp` (typing coalesces into one undo step through the command's

package/dist/panels/inspector/props-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props-panel.d.ts","sourceRoot":"","sources":["../../../src/panels/inspector/props-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAIjF,OAAO,EAAE,SAAS,EAAiB,MAAM,qBAAqB,CAAC;AAQ/D,eAAO,MAAM,cAAc,QAAS,OAAO,YACgB,CAAC;AAI5D,OAAO,EAAE,SAAS,EAAE,CAAC;AA2CrB,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IACxB,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC;IAC7B,kEAAkE;IAClE,QAAQ,CAAC,KAAK,EAAE,SAAS,GAAG,UAAU,CAAC;IACvC,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3C,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxE,QAAQ,CAAC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,8CAA8C;IAC9C,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACzE,yDAAyD;IACzD,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;CACzD;AA8GD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,sCAkEhD"}
+{"version":3,"file":"props-panel.d.ts","sourceRoot":"","sources":["../../../src/panels/inspector/props-panel.tsx"],"names":[],"mappings":"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"}

package/dist/panels/inspector/props-panel.js

@@ -1,8 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useState } from 'react';
+import { componentMeta, useSourceManifest } from '../../app/manifest.js';
 import { useT } from '../../messages/index.js';
-import { Icon, IconButton } from '../../ui/index.js';
-import { propLabel, renderControl } from './controls/index.js';
+import { useEditor } from '../../store/index.js';
+import { Icon, IconButton, SegmentedControl } from '../../ui/index.js';
+import { ExternalUrlControl, propLabel, renderControl } from './controls/index.js';
+import { parseNumber } from './controls/number.js';
+import { formatDefault } from './default-hint.js';
+import { ScrubLabel } from './scrub-label.js';
 import { readProp, translationLocale } from './value.js';
 import { TranslationHint } from './values/translation.js';
 import { ValueEditor } from './values/value-editor.js';
@@ -11,6 +16,38 @@ const ADVANCED_GROUPS = new Set(['advanced', 'accessibility']);
 export const isAdvancedProp = (def) => def.group !== undefined && ADVANCED_GROUPS.has(def.group);
 const titleCase = (text) => text.charAt(0).toUpperCase() + text.slice(1);
 export { propLabel };
+const TEXT_MODES = ['plain', 'rich', 'html'];
+/**
+ * The group a prop is shown in. The background props of a container carry no `group`; they are
+ * collected under "Background" by their names (`background*` and `overlay*`), so the editor needs
+ * no knowledge of the component.
+ */
+export function propGroup(name, def) {
+    if (def.group !== undefined)
+        return def.group;
+    return /^(background|overlay)[A-Z]/.test(name) ? 'background' : '';
+}
+/** Short selects that read better as a row of segments (media fit, scrolling and overlay tone). */
+const SEGMENTED_SELECTS = new Set([
+    'backgroundFit',
+    'backgroundAttachment',
+    'overlayTone',
+]);
+/** A text prop that always holds an address outside the site (the iframe's `url`, ADR-028). */
+export const isExternalUrlProp = (type, name, def) => type === 'buildr/iframe' && name === 'url' && def.kind === 'text';
+/**
+ * Text has three ways to write its content (ADR-026): `mode` picks one of `text`, `rich` and
+ * `html`. The inspector shows the mode as a switch and only the field of the chosen mode. Found by
+ * the shape of the props, so the editor needs no knowledge of the component.
+ */
+export function hasTextModes(props) {
+    const mode = props['mode'];
+    return (mode?.kind === 'select' &&
+        TEXT_MODES.every((value) => mode.options.includes(value)) &&
+        props['text'] !== undefined &&
+        props['rich']?.kind === 'richText' &&
+        props['html']?.kind === 'textarea');
+}
 /** Short controls sit on one row with their label; long ones are stacked under it. */
 const ROW_KINDS = new Set(['boolean', 'select', 'number', 'icon']);
 const storageKey = (type) => `buildr.editor.inspector.groups.${type}`;
@@ -51,12 +88,13 @@ function useClosedGroups(type) {
     return { closed, toggle };
 }
 /** A hint shown under a control: what the default is, and the limits a value must keep. */
-function hintFor(def, t) {
+function hintFor(def, t, 
+/** The component's label when the default text is the component's own English name. */
+nameFor) {
     const parts = [];
-    const shown = String(def.default);
-    if (def.kind !== 'list' && def.kind !== 'object' && def.kind !== 'richText' && shown !== '') {
+    const shown = formatDefault(def, t, nameFor);
+    if (shown !== undefined)
         parts.push(`${t('inspector.default')}: ${shown}`);
-    }
     if ((def.kind === 'text' || def.kind === 'textarea') && def.maxLength !== undefined) {
         parts.push(`${t('inspector.maxLength')}: ${def.maxLength}`);
     }
@@ -68,15 +106,34 @@ function hintFor(def, t) {
     }
     return parts.join(' · ');
 }
-function Field(props) {
+export function Field(props) {
     const { name, def, reading, disabled, translating } = props;
     const t = useT();
     const id = useId();
+    const authorCode = useEditor().authorCode;
     const hintId = `${id}-hint`;
-    const label = propLabel(name, def);
-    const hint = hintFor(def, t);
+    const label = props.textMode === true
+        ? t('inspector.text.mode')
+        : name === 'level'
+            ? t('inspector.content.level')
+            : propLabel(name, def);
+    const hint = props.textMode === true ? '' : hintFor(def, t, props.nameFor);
     const editable = reading.mode === 'static';
-    const control = renderControl(def, {
+    const current = String(reading.value);
+    const control = props.textMode === true ? (_jsx(SegmentedControl, { label: t('inspector.text.mode'), value: current, disabled: disabled, options: TEXT_MODES.map((value) => ({
+            value,
+            label: t(`inspector.text.mode.${value}`),
+            disabled: value === 'html' && !authorCode && current !== 'html',
+        })), onValueChange: (value) => props.onChange(name, def, value) })) : name === 'level' &&
+        def.kind === 'select' &&
+        def.options.every((value) => typeof value === 'number' && value >= 1 && value <= 6) ? (_jsx(SegmentedControl, { label: t('inspector.content.level'), value: String(reading.value), disabled: disabled, options: def.options.map((value) => ({ value: String(value), label: `H${value}` })), onValueChange: (value) => props.onChange(name, def, Number(value)) })) : props.externalUrl === true ? (_jsx(ExternalUrlControl, { id: id, label: label, describedBy: hint === '' ? undefined : hintId, value: reading.value, disabled: disabled, onChange: (value) => props.onChange(name, def, value) })) : SEGMENTED_SELECTS.has(name) && def.kind === 'select' && def.options.length <= 3 ? (_jsx(SegmentedControl, { label: label, value: String(reading.value), disabled: disabled, options: def.options.map((option) => ({
+            value: String(option),
+            label: def.optionLabels?.[String(option)] ?? String(option),
+        })), onValueChange: (chosen) => {
+            const option = def.options.find((candidate) => String(candidate) === chosen);
+            if (option !== undefined)
+                props.onChange(name, def, option);
+        } })) : (renderControl(def, {
         id,
         def,
         label,
@@ -84,9 +141,13 @@ function Field(props) {
         value: reading.value,
         disabled,
         onChange: (value) => props.onChange(name, def, value),
-    });
-    const layout = ROW_KINDS.has(def.kind) ? 'row' : 'stack';
-    return (_jsxs("div", { className: "bd-field", "data-prop": name, "data-kind": def.kind, "data-layout": layout, "data-untranslated": translating && !reading.isSet ? true : undefined, children: [_jsxs("div", { className: "bd-field-head", children: [control !== null && editable ? (_jsxs("label", { htmlFor: id, className: "bd-field-label", children: [label, translating ? (_jsxs("span", { className: "bd-field-locale", children: [" (", t('inspector.translation'), ")"] })) : null] })) : (_jsx("span", { className: "bd-field-label", children: label })), reading.isSet ? (_jsx(IconButton, { variant: "ghost", icon: "rotate-ccw", className: "bd-field-reset", disabled: disabled, label: `${t(translating ? 'translation.remove' : 'inspector.reset')}: ${label}`, onClick: () => props.onReset(name, def) })) : null] }), _jsx("div", { className: "bd-field-body", children: _jsx(ValueEditor, { def: def, label: label, raw: props.raw, disabled: disabled, staticControl: control, onSet: (value) => props.onSetValue?.(name, def, value), onFixed: () => props.onFixed?.(name, def) }) }), translating && editable ? (_jsx(TranslationHint, { translated: reading.isSet, disabled: disabled, label: label, onTranslate: () => props.onChange(name, def, reading.value) })) : null, editable && control === null ? (_jsx("p", { className: "bd-field-unsupported", children: t('inspector.unsupported') })) : null, hint !== '' ? (_jsx("p", { className: "bd-field-hint", id: hintId, children: hint })) : null] }));
+    }));
+    const layout = ROW_KINDS.has(def.kind) && !SEGMENTED_SELECTS.has(name) ? 'row' : 'stack';
+    return (_jsxs("div", { className: "bd-field", "data-prop": name, "data-kind": def.kind, "data-layout": layout, "data-untranslated": translating && !reading.isSet ? true : undefined, children: [_jsxs("div", { className: "bd-field-head", children: [control !== null && editable ? (def.kind === 'number' ? (_jsxs(ScrubLabel, { htmlFor: id, value: String(reading.value ?? def.default), step: def.step ?? 1, min: def.min, max: def.max, disabled: disabled, onValueChange: (text) => {
+                            const next = parseNumber(text, def);
+                            if (next !== undefined)
+                                props.onChange(name, def, next);
+                        }, children: [label, translating ? (_jsxs("span", { className: "bd-field-locale", children: [" (", t('inspector.translation'), ")"] })) : null] })) : (_jsxs("label", { htmlFor: id, className: "bd-field-label", children: [label, translating ? (_jsxs("span", { className: "bd-field-locale", children: [" (", t('inspector.translation'), ")"] })) : null] }))) : (_jsx("span", { className: "bd-field-label", children: label })), reading.isSet ? (_jsx(IconButton, { variant: "ghost", icon: "rotate-ccw", className: "bd-field-reset", disabled: disabled, label: `${t(translating ? 'translation.remove' : 'inspector.reset')}: ${label}`, onClick: () => props.onReset(name, def) })) : null] }), _jsx("div", { className: "bd-field-body", children: _jsx(ValueEditor, { def: def, label: label, raw: props.raw, disabled: disabled, staticControl: control, onSet: (value) => props.onSetValue?.(name, def, value), onFixed: () => props.onFixed?.(name, def) }) }), translating && editable ? (_jsx(TranslationHint, { translated: reading.isSet, disabled: disabled, label: label, onTranslate: () => props.onChange(name, def, reading.value) })) : null, editable && control === null ? (_jsx("p", { className: "bd-field-unsupported", children: t('inspector.unsupported') })) : null, hint !== '' ? (_jsx("p", { className: "bd-field-hint", id: hintId, children: hint })) : null] }));
 }
 /**
  * The props of a component as controls, grouped by their `group` (docs/editor.md#inspector). A
@@ -96,22 +157,43 @@ function Field(props) {
 export function PropsPanel(props) {
     const t = useT();
     const { node, meta, scope, locale, defaultLocale } = props;
+    const source = componentMeta(useSourceManifest(), node.type);
     const { closed, toggle } = useClosedGroups(node.type);
     const panelId = useId();
-    const entries = Object.entries(meta.props).filter(([, def]) => isAdvancedProp(def) === (scope === 'advanced'));
+    const query = props.query ?? '';
+    const all = Object.entries(meta.props).filter(([, def]) => isAdvancedProp(def) === (scope === 'advanced'));
+    all.sort(([a], [b]) => Number(b === 'level') - Number(a === 'level'));
+    const modal = hasTextModes(meta.props);
+    const modeDef = meta.props['mode'];
+    const modeValue = modal && modeDef !== undefined
+        ? readProp(node, 'mode', modeDef, locale, defaultLocale).value
+        : undefined;
+    const activeMode = typeof modeValue === 'string' ? modeValue : 'plain';
+    // Only the field of the chosen text mode is shown (plain: text, rich: rich, html: html).
+    const inMode = (name) => !modal ||
+        !['text', 'rich', 'html'].includes(name) ||
+        (name === 'text' ? 'plain' : name) === activeMode;
+    const entries = all.filter(([name, def]) => inMode(name) && (query === '' || propLabel(name, def).toLowerCase().includes(query)));
+    if (entries.length === 0 && all.length > 0) {
+        if (props.othersMatch === true)
+            return null;
+        return (_jsx("p", { className: "bd-inspector-empty", "data-state": "no-match", children: t('inspector.search.noMatch').replace('{query}', query) }));
+    }
     if (entries.length === 0) {
         return scope === 'content' ? (_jsxs("div", { className: "bd-inspector-empty", "data-state": "no-props", children: [_jsx(Icon, { name: "box", size: "md" }), _jsx("p", { className: "bd-inspector-empty-title", children: t('inspector.noProps') })] })) : null;
     }
+    // A default text that is the component's English name ("Heading") reads as its label in the UI language.
+    const nameFor = (text) => source?.label !== undefined && text === source.label ? (meta.label ?? text) : text;
     const groups = new Map();
     for (const entry of entries) {
-        const group = entry[1].group ?? '';
+        const group = propGroup(entry[0], entry[1]);
         const list = groups.get(group);
         if (list === undefined)
             groups.set(group, [entry]);
         else
             list.push(entry);
     }
-    return (_jsx("div", { className: "bd-props", children: [...groups].map(([group, list]) => (_jsxs("section", { className: "bd-props-group", "data-group": group, children: [group !== '' ? (_jsx("h4", { className: "bd-props-heading", children: _jsxs("button", { type: "button", className: "bd-props-toggle", "aria-expanded": !closed.has(group), "aria-controls": `${panelId}-${group}`, onClick: () => toggle(group), children: [_jsx(Icon, { name: closed.has(group) ? 'chevron-right' : 'chevron-down' }), titleCase(group)] }) })) : null, _jsx("div", { id: `${panelId}-${group}`, className: "bd-props-fields", hidden: closed.has(group), children: list.map(([name, def]) => (_jsx(Field, { name: name, def: def, reading: readProp(node, name, def, locale, defaultLocale), raw: node.props !== undefined && Object.hasOwn(node.props, name)
+    return (_jsx("div", { className: "bd-props", children: [...groups].map(([group, list]) => (_jsxs("section", { className: "bd-props-group", "data-group": group, children: [group !== '' ? (_jsx("h4", { className: "bd-props-heading", children: _jsxs("button", { type: "button", className: "bd-props-toggle", "aria-expanded": !closed.has(group), "aria-controls": `${panelId}-${group}`, onClick: () => toggle(group), children: [_jsx(Icon, { name: closed.has(group) ? 'chevron-right' : 'chevron-down' }), group === 'background' ? t('inspector.group.background') : titleCase(group)] }) })) : null, _jsx("div", { id: `${panelId}-${group}`, className: "bd-props-fields", hidden: closed.has(group) && query === '', children: list.map(([name, def]) => (_jsx(Field, { name: name, def: def, reading: readProp(node, name, def, locale, defaultLocale), raw: node.props !== undefined && Object.hasOwn(node.props, name)
                             ? node.props[name]
-                            : undefined, disabled: props.disabled, translating: translationLocale(def, locale, defaultLocale) !== undefined, onChange: props.onChange, onReset: props.onReset, onSetValue: props.onSetValue, onFixed: props.onFixed }, name))) })] }, group))) }));
+                            : undefined, disabled: props.disabled, translating: translationLocale(def, locale, defaultLocale) !== undefined, onChange: props.onChange, onReset: props.onReset, onSetValue: props.onSetValue, onFixed: props.onFixed, nameFor: nameFor, textMode: modal && name === 'mode', externalUrl: isExternalUrlProp(node.type, name, def) }, name))) })] }, group))) }));
 }

package/dist/panels/inspector/props-panel.test.d.ts

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

package/dist/panels/inspector/props-panel.test.d.ts.map

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

package/dist/panels/inspector/props-panel.test.js

@@ -0,0 +1,17 @@
+import { p } from '@next-buildr/core';
+import { expect, it } from 'vitest';
+import { isExternalUrlProp, propGroup } from './props-panel.js';
+it('collects background and overlay props in the background group', () => {
+    const image = p.media({ label: 'Background image', accept: ['image'] });
+    expect(propGroup('backgroundImage', image)).toBe('background');
+    expect(propGroup('overlayTone', p.text({ label: 'x' }))).toBe('background');
+    expect(propGroup('bleed', p.boolean({ label: 'x', default: false }))).toBe('');
+    expect(propGroup('background', p.text({ label: 'x' }))).toBe('');
+    expect(propGroup('width', p.text({ label: 'x', group: 'advanced' }))).toBe('advanced');
+});
+it('treats only the iframe url as an always-external text prop', () => {
+    const text = p.text({ label: 'Address', default: '' });
+    expect(isExternalUrlProp('buildr/iframe', 'url', text)).toBe(true);
+    expect(isExternalUrlProp('buildr/iframe', 'title', text)).toBe(false);
+    expect(isExternalUrlProp('buildr/link', 'url', text)).toBe(false);
+});

package/dist/panels/inspector/scrub-label.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+/** Pointer scrubbing supplements keyboard controls and records the entire gesture as one undo step. */
+export declare function ScrubLabel(props: {
+    readonly htmlFor: string;
+    readonly children: ReactNode;
+    readonly value: string;
+    readonly step?: number;
+    readonly min?: number | undefined;
+    readonly max?: number | undefined;
+    readonly unit?: string;
+    readonly disabled: boolean;
+    readonly onValueChange: (value: string) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=scrub-label.d.ts.map

package/dist/panels/inspector/scrub-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrub-label.d.ts","sourceRoot":"","sources":["../../../src/panels/inspector/scrub-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAkC,MAAM,OAAO,CAAC;AAoBvE,uGAAuG;AACvG,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAChC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD,+BAyEA"}