@next-buildr/editor 0.0.0-stage → 2.0.0

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

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useT } from '../../../messages/index.js';
+import { Button, Icon } from '../../../ui/index.js';
+import { BooleanControl } from './boolean.js';
+import { IconControl } from './icon.js';
+import { propLabel } from './label.js';
+import { LinkControl } from './link.js';
+import { MediaControl } from './media.js';
+import { NumberControl } from './number.js';
+import { RichTextControl } from './rich-text.js';
+import { SelectControl } from './select.js';
+import { TextControl } from './text.js';
+import { TextareaControl } from './textarea.js';
+/** The control for a prop of any kind, or `null` for a kind that has none. Lists and objects recurse. */
+export function renderControl(def, common) {
+    switch (def.kind) {
+        case 'text':
+            return _jsx(TextControl, { ...common, def: def });
+        case 'textarea':
+            return _jsx(TextareaControl, { ...common, def: def });
+        case 'number':
+            return _jsx(NumberControl, { ...common, def: def });
+        case 'boolean':
+            return _jsx(BooleanControl, { ...common, def: def });
+        case 'select':
+            return _jsx(SelectControl, { ...common, def: def });
+        case 'link':
+            return _jsx(LinkControl, { ...common, def: def });
+        case 'icon':
+            return _jsx(IconControl, { ...common, def: def });
+        case 'media':
+            return _jsx(MediaControl, { ...common, def: def });
+        case 'richText':
+            return _jsx(RichTextControl, { ...common, def: def });
+        case 'list':
+            return _jsx(ListControl, { ...common, def: def });
+        case 'object':
+            return _jsx(ObjectControl, { ...common, def: def });
+        default:
+            return null;
+    }
+}
+const isRecord = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
+/** What an item holds when a fresh one is added: the item definition's default, copied. */
+const freshItem = (def) => structuredClone(def.default);
+/** Moves the item at `from` to `to`; out of range returns the list unchanged. */
+export function moveItem(list, from, to) {
+    const next = [...list];
+    if (from < 0 || from >= next.length || to < 0 || to >= next.length)
+        return next;
+    const [item] = next.splice(from, 1);
+    next.splice(to, 0, item);
+    return next;
+}
+/**
+ * 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 function ListControl({ id, def, label, describedBy, value, disabled, onChange, }) {
+    const t = useT();
+    const items = Array.isArray(value) ? value : [];
+    const of = def.of;
+    const canAdd = def.max === undefined || items.length < def.max;
+    const canRemove = def.min === undefined || items.length > def.min;
+    const replace = (index, item) => onChange(items.map((current, at) => (at === index ? item : current)));
+    return (_jsxs("fieldset", { className: "bd-list", id: id, "aria-label": label, "aria-describedby": describedBy, children: [items.length === 0 ? _jsx("p", { className: "bd-list-empty", children: t('list.empty') }) : null, _jsx("ol", { className: "bd-list-items", children: items.map((item, index) => {
+                    const number = index + 1;
+                    const itemLabel = `${t('list.item')} ${number}`;
+                    return (_jsxs("li", { className: "bd-list-item", children: [_jsxs("div", { className: "bd-list-item-head", children: [_jsx("span", { className: "bd-list-item-title", children: itemLabel }), _jsxs("span", { className: "bd-list-item-actions", children: [_jsx(Button, { variant: "ghost", disabled: disabled || index === 0, "aria-label": `${t('list.moveUp')}: ${itemLabel}`, onClick: () => onChange(moveItem(items, index, index - 1)), children: _jsx(Icon, { name: "arrow-up" }) }), _jsx(Button, { variant: "ghost", disabled: disabled || index === items.length - 1, "aria-label": `${t('list.moveDown')}: ${itemLabel}`, onClick: () => onChange(moveItem(items, index, index + 1)), children: _jsx(Icon, { name: "arrow-down" }) }), _jsx(Button, { variant: "ghost", disabled: disabled || !canRemove, "aria-label": `${t('list.remove')}: ${itemLabel}`, onClick: () => onChange(items.filter((_, at) => at !== index)), children: _jsx(Icon, { name: "x" }) })] })] }), _jsx("div", { className: "bd-list-item-body", children: renderControl(of, {
+                                    id: `${id}-${index}`,
+                                    def: of,
+                                    label: itemLabel,
+                                    describedBy: undefined,
+                                    value: item,
+                                    disabled,
+                                    onChange: (next) => replace(index, next),
+                                }) })] }, index));
+                }) }), _jsx(Button, { variant: "default", disabled: disabled || !canAdd, onClick: () => onChange([...items, freshItem(of)]), children: t('list.add') })] }));
+}
+/** A group of named sub-props, each edited with its own control; a change writes the whole object. */
+export function ObjectControl({ id, def, label, describedBy, value, disabled, onChange, }) {
+    const shown = isRecord(value) ? value : {};
+    const fields = Object.entries(def.fields);
+    return (_jsx("fieldset", { className: "bd-object", id: id, "aria-label": label, "aria-describedby": describedBy, children: fields.map(([name, field]) => {
+            const fieldId = `${id}-${name}`;
+            const fieldLabel = propLabel(name, field);
+            const own = Object.hasOwn(shown, name) ? shown[name] : field.default;
+            const control = renderControl(field, {
+                id: fieldId,
+                def: field,
+                label: fieldLabel,
+                describedBy: undefined,
+                value: own,
+                disabled,
+                onChange: (next) => onChange({ ...shown, [name]: next }),
+            });
+            return (_jsxs("div", { className: "bd-object-field", "data-field": name, "data-kind": field.kind, children: [_jsx("label", { htmlFor: fieldId, className: "bd-field-label", children: fieldLabel }), control] }, name));
+        }) }));
+}

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

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

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

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

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

@@ -0,0 +1,195 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { p, richTextSchema } from '@next-buildr/core';
+import { $createParagraphNode, $createTextNode, $getRoot } from 'lexical';
+import { act, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { MessagesProvider } from '../../../messages/index.js';
+import { moveItem, renderControl } from './compound.js';
+import { serializeRichText, toRichText } from './rich-text-model.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let container;
+let root;
+beforeEach(() => {
+    container = document.createElement('div');
+    document.body.append(container);
+    root = createRoot(container);
+});
+afterEach(() => {
+    act(() => root.unmount());
+    document.body.innerHTML = '';
+});
+/** A control holding its own value, the way the store does; `seen` records every value it wrote. */
+async function mount(def, initial, seen = []) {
+    function Host() {
+        const [value, setValue] = useState(initial);
+        return renderControl(def, {
+            id: 'c',
+            def,
+            label: 'Field',
+            describedBy: undefined,
+            value,
+            disabled: false,
+            onChange: (next) => {
+                seen.push(next);
+                setValue(next);
+            },
+        });
+    }
+    await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(Host, {}) })));
+    return seen;
+}
+const byLabel = (label) => container.querySelector(`[aria-label="${label}"]`);
+const click = (element) => act(async () => {
+    element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+});
+/** Every node of the format carries `version: 1`; the samples leave it out and this adds it. */
+const withVersions = (node) => {
+    if (Array.isArray(node))
+        return node.map(withVersions);
+    if (typeof node !== 'object' || node === null)
+        return node;
+    const entries = Object.entries(node).map(([key, value]) => [key, withVersions(value)]);
+    return { ...Object.fromEntries(entries), ...('type' in node ? { version: 1 } : {}) };
+};
+const doc = (children) => withVersions({ type: 'root', children });
+const text = (value, format = 0) => ({ type: 'text', text: value, format });
+describe('rich text model', () => {
+    const samples = [
+        doc([]),
+        doc([{ type: 'paragraph', children: [text('Hello '), text('world', 1)] }]),
+        doc([
+            { type: 'heading', tag: 'h2', children: [text('Title')] },
+            {
+                type: 'paragraph',
+                children: [
+                    { type: 'link', url: 'https://example.com', children: [text('a link', 2)] },
+                    { type: 'linebreak' },
+                    text('after'),
+                ],
+            },
+            {
+                type: 'list',
+                listType: 'number',
+                children: [
+                    { type: 'listitem', children: [text('one')] },
+                    { type: 'listitem', children: [text('two')] },
+                ],
+            },
+        ]),
+    ];
+    it.each(samples.map((sample, index) => [index, sample]))('sample %i survives load and serialize', async (_, sample) => {
+        await mount(p.richText({}), sample);
+        const editor = container.querySelector('[role=textbox]').__lexicalEditor;
+        const out = serializeRichText(editor.getEditorState());
+        expect(out).toEqual(sample);
+    });
+    it('turns anything that is not rich text into an empty document', () => {
+        expect(toRichText(null).children).toEqual([]);
+        expect(toRichText('plain').children).toEqual([]);
+        expect(richTextSchema.safeParse(toRichText({ junk: true })).success).toBe(true);
+    });
+    it('only writes documents that pass the schema', async () => {
+        const seen = await mount(p.richText({}), doc([]));
+        const editor = container.querySelector('[role=textbox]').__lexicalEditor;
+        await act(async () => {
+            editor.update(() => {
+                const paragraph = $createParagraphNode();
+                paragraph.append($createTextNode('typed'));
+                $getRoot().clear().append(paragraph);
+            }, { discrete: true });
+        });
+        expect(seen.length).toBeGreaterThan(0);
+        for (const value of seen)
+            expect(richTextSchema.safeParse(value).success).toBe(true);
+        expect(seen.at(-1)).toEqual(doc([{ type: 'paragraph', children: [text('typed')] }]));
+    });
+    it('shows a value that changed elsewhere', async () => {
+        await mount(p.richText({}), doc([{ type: 'paragraph', children: [text('first')] }]));
+        expect(container.querySelector('[role=textbox]')?.textContent).toBe('first');
+    });
+    it('labels the toolbar buttons and reflects their state', async () => {
+        await mount(p.richText({}), doc([]));
+        expect(container.querySelector('[role=toolbar]')).not.toBeNull();
+        for (const name of ['Bold', 'Italic', 'Link', 'Heading 2', 'Bulleted list']) {
+            expect(byLabel(name).getAttribute('aria-pressed')).toBe('false');
+        }
+    });
+    it('refuses an unsafe link address', async () => {
+        await mount(p.richText({}), doc([{ type: 'paragraph', children: [text('x')] }]));
+        await click(byLabel('Link'));
+        const input = container.querySelector('input');
+        await act(async () => {
+            Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(input, 'javascript:alert(1)');
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+        await act(async () => {
+            container
+                .querySelector('form')
+                ?.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
+        });
+        expect(container.querySelector('[role=alert]')?.textContent).toBe('This address is not allowed.');
+    });
+});
+describe('list control', () => {
+    const def = p.list(p.text({ default: 'new' }), { min: 1, max: 3 });
+    it('adds an item made from the item default, up to the maximum', async () => {
+        const seen = await mount(def, ['a', 'b']);
+        await click([...container.querySelectorAll('button')].find((b) => b.textContent === 'Add item'));
+        expect(seen.at(-1)).toEqual(['a', 'b', 'new']);
+        expect([...container.querySelectorAll('button')].find((b) => b.textContent === 'Add item').disabled).toBe(true);
+    });
+    it('removes an item, down to the minimum', async () => {
+        const seen = await mount(def, ['a', 'b']);
+        await click(byLabel('Remove: Item 1'));
+        expect(seen.at(-1)).toEqual(['b']);
+        expect(byLabel('Remove: Item 1').disabled).toBe(true);
+    });
+    it('moves items and stops at the ends', async () => {
+        const seen = await mount(def, ['a', 'b', 'c']);
+        expect(byLabel('Move up: Item 1').disabled).toBe(true);
+        expect(byLabel('Move down: Item 3').disabled).toBe(true);
+        await click(byLabel('Move down: Item 1'));
+        expect(seen.at(-1)).toEqual(['b', 'a', 'c']);
+        await click(byLabel('Move up: Item 3'));
+        expect(seen.at(-1)).toEqual(['b', 'c', 'a']);
+    });
+    it('edits an item with the control of its kind', async () => {
+        const seen = await mount(def, ['a', 'b']);
+        const input = container.querySelector('#c-1');
+        await act(async () => {
+            Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(input, 'changed');
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+        expect(seen.at(-1)).toEqual(['a', 'changed']);
+    });
+    it('treats a value that is not a list as empty', async () => {
+        await mount(p.list(p.text({})), 'nonsense');
+        expect(container.textContent).toContain('No items yet.');
+    });
+    it('moveItem ignores positions out of range', () => {
+        expect(moveItem([1, 2], 0, 5)).toEqual([1, 2]);
+        expect(moveItem([1, 2, 3], 2, 0)).toEqual([3, 1, 2]);
+    });
+});
+describe('object control', () => {
+    const def = p.object({ label: p.text({ default: 'L' }), count: p.number({ default: 2 }) });
+    it('shows defaults for missing fields and writes the whole object', async () => {
+        const seen = await mount(def, { label: 'Own' });
+        expect(container.querySelector('#c-label').value).toBe('Own');
+        expect(container.querySelector('#c-count').value).toBe('2');
+        const input = container.querySelector('#c-label');
+        await act(async () => {
+            Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(input, 'X');
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+        expect(seen.at(-1)).toEqual({ label: 'X' });
+    });
+    it('nests lists inside objects', async () => {
+        const nested = p.object({ tags: p.list(p.text({ default: 't' })) });
+        const seen = await mount(nested, { tags: [] });
+        await click([...container.querySelectorAll('button')].find((b) => b.textContent === 'Add item'));
+        expect(seen.at(-1)).toEqual({ tags: ['t'] });
+    });
+});

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

@@ -0,0 +1,5 @@
+import type { IconPropDef } from '@next-buildr/core';
+import type { ControlProps } from './types.ts';
+/** An icon is named (`arrow-right`); the picker with a preview comes with the icon library. */
+export declare function IconControl({ id, def, label, describedBy, value, disabled, onChange, }: ControlProps<IconPropDef>): import("react").JSX.Element;
+//# sourceMappingURL=icon.d.ts.map

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from '../../../ui/index.js';
+/** An icon is named (`arrow-right`); the picker with a preview comes with the icon library. */
+export function IconControl({ id, def, label, describedBy, value, disabled, onChange, }) {
+    return (_jsx(Input, { id: id, type: "text", autoComplete: "off", spellCheck: false, value: typeof value === 'string' ? value : def.default, disabled: disabled, "aria-label": label, "aria-describedby": describedBy, onChange: (event) => onChange(event.target.value.trim()) }));
+}

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

@@ -0,0 +1,13 @@
+export { BooleanControl } from './boolean.tsx';
+export { ListControl, moveItem, ObjectControl, renderControl } from './compound.tsx';
+export { IconControl } from './icon.tsx';
+export { propLabel } from './label.ts';
+export { LinkControl } from './link.tsx';
+export { MediaControl } from './media.tsx';
+export { NumberControl, parseNumber } from './number.tsx';
+export { RichTextControl } from './rich-text.tsx';
+export { SelectControl } from './select.tsx';
+export { TextControl } from './text.tsx';
+export { TextareaControl } from './textarea.tsx';
+export type { ControlProps } from './types.ts';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/controls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,YAAY,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}

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

@@ -0,0 +1,11 @@
+export { BooleanControl } from './boolean.js';
+export { ListControl, moveItem, ObjectControl, renderControl } from './compound.js';
+export { IconControl } from './icon.js';
+export { propLabel } from './label.js';
+export { LinkControl } from './link.js';
+export { MediaControl } from './media.js';
+export { NumberControl, parseNumber } from './number.js';
+export { RichTextControl } from './rich-text.js';
+export { SelectControl } from './select.js';
+export { TextControl } from './text.js';
+export { TextareaControl } from './textarea.js';

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

@@ -0,0 +1,4 @@
+import type { PropDef } from '@next-buildr/core';
+/** The label of a prop: its own, else its name split into words. */
+export declare function propLabel(name: string, def: PropDef): string;
+//# sourceMappingURL=label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/controls/label.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAIjD,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,GAAG,MAAM,CAI5D"}

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

@@ -0,0 +1,8 @@
+const titleCase = (text) => text.charAt(0).toUpperCase() + text.slice(1);
+/** The label of a prop: its own, else its name split into words. */
+export function propLabel(name, def) {
+    if (def.label !== undefined)
+        return def.label;
+    const words = name.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/[-_]+/g, ' ');
+    return titleCase(words.toLowerCase());
+}

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

@@ -0,0 +1,5 @@
+import type { LinkPropDef } from '@next-buildr/core';
+import type { ControlProps } from './types.ts';
+/** The address is free text here; what a link may point at is checked by the property's own schema on write. */
+export declare function LinkControl({ id, def, label, describedBy, value, disabled, onChange, }: ControlProps<LinkPropDef>): import("react").JSX.Element;
+//# sourceMappingURL=link.d.ts.map

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from '../../../ui/index.js';
+/** The address is free text here; what a link may point at is checked by the property's own schema on write. */
+export function LinkControl({ id, def, label, describedBy, value, disabled, onChange, }) {
+    return (_jsx(Input, { id: id, type: "text", inputMode: "url", autoComplete: "off", spellCheck: false, value: typeof value === 'string' ? value : def.default, disabled: disabled, "aria-label": label, "aria-describedby": describedBy, onChange: (event) => onChange(event.target.value) }));
+}

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

@@ -0,0 +1,9 @@
+import type { MediaPropDef } from '@next-buildr/core';
+import type { ControlProps } from './types.ts';
+/**
+ * A media prop: the picked file's thumbnail and alternative text, and buttons to choose, replace or
+ * remove it. Choosing opens the media picker; what is stored is a `MediaRef` with a snapshot. To bind
+ * the prop to a data field instead, use the Data mode of the value switch.
+ */
+export declare function MediaControl({ id, def, label, describedBy, value, disabled, onChange, }: ControlProps<MediaPropDef>): import("react").JSX.Element;
+//# sourceMappingURL=media.d.ts.map

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

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

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { MediaPicker, parseMediaRef, toMediaRef, useMediaLibrary, } from '../../../dialogs/media-picker/index.js';
+import { useT } from '../../../messages/index.js';
+import { Button } from '../../../ui/index.js';
+/**
+ * A media prop: the picked file's thumbnail and alternative text, and buttons to choose, replace or
+ * remove it. Choosing opens the media picker; what is stored is a `MediaRef` with a snapshot. To bind
+ * the prop to a data field instead, use the Data mode of the value switch.
+ */
+export function MediaControl({ id, def, label, describedBy, value, disabled, onChange, }) {
+    const t = useT();
+    const library = useMediaLibrary();
+    const [open, setOpen] = useState(false);
+    const ref = parseMediaRef(value);
+    const snapshot = ref?.snapshot;
+    return (_jsxs("div", { className: "bd-media-control", id: id, "aria-describedby": describedBy, children: [ref !== undefined ? (_jsxs("div", { className: "bd-media-preview", children: [snapshot !== undefined && (snapshot.mimeType ?? 'image/').startsWith('image/') ? (_jsx("img", { src: snapshot.url, alt: snapshot.alt ?? '', width: 64, height: 64 })) : (_jsx("span", { className: "bd-media-file", children: snapshot?.mimeType ?? ref.id })), _jsx("span", { className: "bd-media-name", children: snapshot?.alt ?? ref.id })] })) : (_jsx("p", { className: "bd-field-hint", children: t('media.none') })), _jsxs("div", { className: "bd-media-actions", children: [_jsx(Button, { disabled: disabled || library === undefined, "aria-label": `${label}: ${t(ref === undefined ? 'media.choose' : 'media.replace')}`, onClick: () => setOpen(true), children: t(ref === undefined ? 'media.choose' : 'media.replace') }), ref !== undefined ? (_jsx(Button, { variant: "ghost", disabled: disabled, "aria-label": `${label}: ${t('media.remove')}`, onClick: () => onChange(null), children: t('media.remove') })) : null] }), library === undefined ? _jsx("p", { className: "bd-field-hint", children: t('media.unavailable') }) : null, _jsx(MediaPicker, { open: open, onOpenChange: setOpen, accept: def.accept, onPick: (asset) => {
+                    if (library !== undefined)
+                        onChange(toMediaRef(asset, library.collection));
+                } })] }));
+}

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

@@ -0,0 +1,10 @@
+import type { NumberPropDef } from '@next-buildr/core';
+import type { ControlProps } from './types.ts';
+/** Whether `text` is a number the prop accepts (finite and inside its range). */
+export declare function parseNumber(text: string, def: NumberPropDef): number | undefined;
+/**
+ * The text is a draft ("1." and "" are steps on the way to a number); only a valid number is
+ * written, and leaving the field shows the stored value again.
+ */
+export declare function NumberControl({ id, def, label, describedBy, value, disabled, onChange, }: ControlProps<NumberPropDef>): import("react").JSX.Element;
+//# sourceMappingURL=number.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"number.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/controls/number.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,iFAAiF;AACjF,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,aAAa,GAAG,MAAM,GAAG,SAAS,CAOhF;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,GAAG,EACH,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE,YAAY,CAAC,aAAa,CAAC,+BA0B7B"}

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Input } from '../../../ui/index.js';
+/** Whether `text` is a number the prop accepts (finite and inside its range). */
+export function parseNumber(text, def) {
+    if (text.trim() === '')
+        return undefined;
+    const parsed = Number(text);
+    if (!Number.isFinite(parsed))
+        return undefined;
+    if (def.min !== undefined && parsed < def.min)
+        return undefined;
+    if (def.max !== undefined && parsed > def.max)
+        return undefined;
+    return parsed;
+}
+/**
+ * The text is a draft ("1." and "" are steps on the way to a number); only a valid number is
+ * written, and leaving the field shows the stored value again.
+ */
+export function NumberControl({ id, def, label, describedBy, value, disabled, onChange, }) {
+    const current = typeof value === 'number' ? value : def.default;
+    const [draft, setDraft] = useState(String(current));
+    useEffect(() => {
+        setDraft((shown) => (parseNumber(shown, def) === current ? shown : String(current)));
+    }, [current, def]);
+    return (_jsx(Input, { id: id, type: "number", inputMode: "decimal", value: draft, min: def.min, max: def.max, step: def.step, disabled: disabled, "aria-label": label, "aria-describedby": describedBy, onChange: (event) => {
+            setDraft(event.target.value);
+            const next = parseNumber(event.target.value, def);
+            if (next !== undefined && next !== current)
+                onChange(next);
+        }, onBlur: () => setDraft(String(current)) }));
+}

package/dist/panels/inspector/controls/rich-text-model.d.ts

@@ -0,0 +1,20 @@
+import { type RichTextRootNode } from '@next-buildr/core';
+import { type EditorState } from 'lexical';
+/** The tags the toolbar offers; the format itself allows h1 to h6, so pasted h1 still round-trips. */
+export declare const HEADING_TAGS: readonly ['h2', 'h3', 'h4'];
+/** A well-formed empty document: one empty paragraph is what the editor shows, and what it saves. */
+export declare const EMPTY_RICH_TEXT: RichTextRootNode;
+/**
+ * What a rich text prop holds, as the format the renderer reads. Anything that is not a rich text
+ * document (a `null` default, a plain string, corrupt JSON) becomes an empty one; nothing throws.
+ */
+export declare function toRichText(value: unknown): RichTextRootNode;
+/** Replaces the editor's content with `root`. Call inside `editor.update`. */
+export declare function $loadRichText(root: RichTextRootNode): void;
+/**
+ * The editor's content in the core rich text format, or `undefined` when it does not conform (which
+ * the walk into `normalizeRichText` makes impossible, but the schema has the last word — nothing
+ * that fails `richTextSchema` ever reaches the document).
+ */
+export declare function serializeRichText(state: EditorState): RichTextRootNode | undefined;
+//# sourceMappingURL=rich-text-model.d.ts.map

package/dist/panels/inspector/controls/rich-text-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-text-model.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/controls/rich-text-model.ts"],"names":[],"mappings":"AAGA,OAAO,EAKL,KAAK,gBAAgB,EAEtB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAKL,KAAK,WAAW,EAGjB,MAAM,SAAS,CAAC;AAEjB,sGAAsG;AACtG,eAAO,MAAM,YAAY,YAAI,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;AAExD,qGAAqG;AACrG,eAAO,MAAM,eAAe,EAAE,gBAA6D,CAAC;AAE5F;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,gBAAgB,CAK3D;AA+CD,8EAA8E;AAC9E,wBAAgB,aAAa,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI,CAK1D;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,WAAW,GAAG,gBAAgB,GAAG,SAAS,CAelF"}

package/dist/panels/inspector/controls/rich-text-model.js

@@ -0,0 +1,91 @@
+import { $createLinkNode } from '@lexical/link';
+import { $createListItemNode, $createListNode } from '@lexical/list';
+import { $createHeadingNode, $createQuoteNode } from '@lexical/rich-text';
+import { normalizeRichText, richTextSchema, } from '@next-buildr/core';
+import { $createLineBreakNode, $createParagraphNode, $createTextNode, $getRoot, } from 'lexical';
+/** The tags the toolbar offers; the format itself allows h1 to h6, so pasted h1 still round-trips. */
+export const HEADING_TAGS = ['h2', 'h3', 'h4'];
+/** A well-formed empty document: one empty paragraph is what the editor shows, and what it saves. */
+export const EMPTY_RICH_TEXT = { type: 'root', version: 1, children: [] };
+/**
+ * What a rich text prop holds, as the format the renderer reads. Anything that is not a rich text
+ * document (a `null` default, a plain string, corrupt JSON) becomes an empty one; nothing throws.
+ */
+export function toRichText(value) {
+    if (value === null || value === undefined)
+        return EMPTY_RICH_TEXT;
+    const parsed = richTextSchema.safeParse(value);
+    if (parsed.success)
+        return parsed.data;
+    return normalizeRichText(value).value;
+}
+function inline(node) {
+    switch (node.type) {
+        case 'text':
+            return $createTextNode(node.text).setFormat(node.format);
+        case 'linebreak':
+            return $createLineBreakNode();
+        case 'link': {
+            const link = $createLinkNode(node.url);
+            link.append(...node.children.map(inline));
+            return link;
+        }
+    }
+}
+function block(node) {
+    switch (node.type) {
+        case 'paragraph': {
+            const paragraph = $createParagraphNode();
+            paragraph.append(...node.children.map(inline));
+            return paragraph;
+        }
+        case 'heading': {
+            const heading = $createHeadingNode(node.tag);
+            heading.append(...node.children.map(inline));
+            return heading;
+        }
+        case 'quote': {
+            const quote = $createQuoteNode();
+            quote.append(...node.children.map(inline));
+            return quote;
+        }
+        case 'list': {
+            const list = $createListNode(node.listType === 'number' ? 'number' : 'bullet');
+            for (const item of node.children) {
+                const entry = $createListItemNode();
+                entry.append(...item.children.map((child) => (child.type === 'list' ? block(child) : inline(child))));
+                list.append(entry);
+            }
+            return list;
+        }
+    }
+}
+/** Replaces the editor's content with `root`. Call inside `editor.update`. */
+export function $loadRichText(root) {
+    const top = $getRoot();
+    top.clear();
+    for (const child of root.children)
+        top.append(block(child));
+    if (root.children.length === 0)
+        top.append($createParagraphNode());
+}
+/**
+ * The editor's content in the core rich text format, or `undefined` when it does not conform (which
+ * the walk into `normalizeRichText` makes impossible, but the schema has the last word — nothing
+ * that fails `richTextSchema` ever reaches the document).
+ */
+export function serializeRichText(state) {
+    const json = state.toJSON().root;
+    const { value } = normalizeRichText(json);
+    const checked = richTextSchema.safeParse(value);
+    if (!checked.success)
+        return undefined;
+    // An editor holding only an empty paragraph is an empty document.
+    const [only] = checked.data.children;
+    if (checked.data.children.length === 1 &&
+        only?.type === 'paragraph' &&
+        only.children.length === 0) {
+        return { ...checked.data, children: [] };
+    }
+    return checked.data;
+}

package/dist/panels/inspector/controls/rich-text.d.ts

@@ -0,0 +1,10 @@
+import { type RichTextPropDef } from '@next-buildr/core';
+import type { ControlProps } from './types.ts';
+/**
+ * A small Lexical editor (paragraph, headings 2 to 4, bold, italic, link, lists) whose output is the
+ * core rich text format. The editor's state never leaves through anything but `serializeRichText`,
+ * which walks it into `normalizeRichText` and checks `richTextSchema`, so what is written to the
+ * document always passes the schema (docs/editor.md#inspector).
+ */
+export declare function RichTextControl({ id, label, describedBy, value, disabled, onChange, }: ControlProps<RichTextPropDef>): import("react").JSX.Element;
+//# sourceMappingURL=rich-text.d.ts.map

package/dist/panels/inspector/controls/rich-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-text.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/controls/rich-text.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,KAAK,eAAe,EAAe,MAAM,mBAAmB,CAAC;AAmBtE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAuC/C;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE,YAAY,CAAC,eAAe,CAAC,+BAiN/B"}