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

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

@@ -2,7 +2,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
+ * remove it. Choosing opens the media picker; what is stored is a `MediaRef` with a snapshot. A link to a
+ * file outside the library is stored as `{ external: true, url }`, only after the ADR-028 warning
+ * was confirmed. 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;

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

@@ -1 +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"}
+{"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;AAYtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,GAAG,EACH,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE,YAAY,CAAC,YAAY,CAAC,+BAmE5B"}

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

@@ -1,11 +1,14 @@
 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 { MediaPicker, parseExternalMedia, parseMediaRef, toMediaRef, useMediaLibrary, } from '../../../dialogs/media-picker/index.js';
 import { useT } from '../../../messages/index.js';
 import { Button } from '../../../ui/index.js';
+import { ExternalLinkEntry } from './external-link.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
+ * remove it. Choosing opens the media picker; what is stored is a `MediaRef` with a snapshot. A link to a
+ * file outside the library is stored as `{ external: true, url }`, only after the ADR-028 warning
+ * was confirmed. 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, }) {
@@ -13,8 +16,10 @@ export function MediaControl({ id, def, label, describedBy, value, disabled, onC
     const library = useMediaLibrary();
     const [open, setOpen] = useState(false);
     const ref = parseMediaRef(value);
+    const external = parseExternalMedia(value);
+    const chosen = ref !== undefined || external !== undefined;
     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) => {
+    return (_jsxs("div", { className: "bd-media-control", id: id, "aria-describedby": describedBy, children: [external !== undefined ? (_jsxs("div", { className: "bd-media-preview", children: [_jsx("span", { className: "bd-media-badge", children: t('media.external.badge') }), _jsx("span", { className: "bd-media-name", title: external.url, children: external.url })] })) : 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(chosen ? 'media.replace' : 'media.choose')}`, onClick: () => setOpen(true), children: t(chosen ? 'media.replace' : 'media.choose') }), chosen ? (_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("p", { className: "bd-field-hint", children: t('media.external.or') }), _jsx(ExternalLinkEntry, { label: label, disabled: disabled, onAdd: (url) => onChange({ external: true, url }) }), _jsx(MediaPicker, { open: open, onOpenChange: setOpen, accept: def.accept, onPickExternal: (url) => onChange({ external: true, url }), onPick: (asset) => {
                     if (library !== undefined)
                         onChange(toMediaRef(asset, library.collection));
                 } })] }));

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

@@ -1 +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"}
+{"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;AAoBtE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAuD/C;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE,YAAY,CAAC,eAAe,CAAC,+BAyP/B"}

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

@@ -4,12 +4,19 @@ import { $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND
 import { $createHeadingNode, $isHeadingNode, HeadingNode, QuoteNode, registerRichText, } from '@lexical/rich-text';
 import { $setBlocksType } from '@lexical/selection';
 import { sanitizeUrl } from '@next-buildr/core';
-import { $createParagraphNode, $getSelection, $isRangeSelection, createEditor, FORMAT_TEXT_COMMAND, } from 'lexical';
+import { $createParagraphNode, $getSelection, $isRangeSelection, $isTextNode, createEditor, FORMAT_TEXT_COMMAND, } from 'lexical';
 import { useEffect, useRef, useState } from 'react';
 import { useT } from '../../../messages/index.js';
 import { Button, Icon, Input } from '../../../ui/index.js';
 import { $loadRichText, serializeRichText, toRichText, } from './rich-text-model.js';
-const NO_TOOLBAR = { block: 'paragraph', bold: false, italic: false, link: false };
+const NO_TOOLBAR = {
+    block: 'paragraph',
+    bold: false,
+    italic: false,
+    underline: false,
+    strike: false,
+    link: false,
+};
 /** What the selection is in: its block type and text formats, for the toolbar's pressed states. */
 function readToolbar(editor) {
     return editor.getEditorState().read(() => {
@@ -32,11 +39,18 @@ function readToolbar(editor) {
             block,
             bold: selection.hasFormat('bold'),
             italic: selection.hasFormat('italic'),
+            underline: selection.hasFormat('underline'),
+            strike: selection.hasFormat('strikethrough'),
             link: $isLinkNode(anchor) || $isLinkNode(parent),
         };
     });
 }
-const sameToolbar = (a, b) => a.block === b.block && a.bold === b.bold && a.italic === b.italic && a.link === b.link;
+const sameToolbar = (a, b) => a.block === b.block &&
+    a.bold === b.bold &&
+    a.italic === b.italic &&
+    a.underline === b.underline &&
+    a.strike === b.strike &&
+    a.link === b.link;
 /**
  * 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`,
@@ -149,11 +163,27 @@ export function RichTextControl({ id, label, describedBy, value, disabled, onCha
     const button = (key, pressed, action, text) => (_jsx(Button, { variant: "ghost", className: "bd-rich-button", "aria-pressed": pressed, "aria-label": t(key), disabled: disabled, onClick: action, 
         // Keep the selection in the editor while a toolbar button is pressed.
         onMouseDown: (event) => event.preventDefault(), children: text }));
-    return (_jsxs("div", { className: "bd-rich", "data-disabled": disabled, children: [_jsxs("div", { className: "bd-rich-toolbar", role: "toolbar", "aria-label": t('richText.toolbar'), "aria-controls": id, children: [button('richText.heading2', toolbar.block === 'h2', () => heading('h2'), 'H2'), button('richText.heading3', toolbar.block === 'h3', () => heading('h3'), 'H3'), button('richText.heading4', toolbar.block === 'h4', () => heading('h4'), 'H4'), button('richText.bold', toolbar.bold, () => run((e) => e.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')), 'B'), button('richText.italic', toolbar.italic, () => run((e) => e.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')), 'I'), button('richText.link', toolbar.link, () => setLinking((open) => !open), _jsx(Icon, { name: "link" })), button('richText.bulletList', toolbar.block === 'bullet', () => list('bullet'), _jsx(Icon, { name: "list" })), button('richText.numberedList', toolbar.block === 'number', () => list('number'), _jsx(Icon, { name: "list-ordered" }))] }), linking ? (_jsxs("form", { className: "bd-rich-link", onSubmit: (event) => {
+    return (_jsxs("div", { className: "bd-rich", "data-disabled": disabled, children: [_jsxs("div", { className: "bd-rich-toolbar", role: "toolbar", "aria-label": t('richText.toolbar'), "aria-controls": id, children: [button('richText.heading2', toolbar.block === 'h2', () => heading('h2'), 'H2'), button('richText.heading3', toolbar.block === 'h3', () => heading('h3'), 'H3'), button('richText.heading4', toolbar.block === 'h4', () => heading('h4'), 'H4'), button('richText.bold', toolbar.bold, () => run((e) => e.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')), 'B'), button('richText.italic', toolbar.italic, () => run((e) => e.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')), _jsx(Icon, { name: "italic" })), button('richText.underline', toolbar.underline, () => run((e) => e.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')), _jsx(Icon, { name: "underline" })), button('richText.strike', toolbar.strike, () => run((e) => e.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')), _jsx(Icon, { name: "strikethrough" })), button('richText.clear', false, () => run((editor) => editor.update(() => {
+                        const selection = $getSelection();
+                        if (!$isRangeSelection(selection) || selection.isCollapsed())
+                            return;
+                        for (const node of selection.extract()) {
+                            if ($isTextNode(node))
+                                node.setFormat(0).setStyle('');
+                        }
+                        selection.format = 0;
+                    })), _jsx(Icon, { name: "rotate-ccw" })), button('richText.link', toolbar.link, () => setLinking((open) => !open), _jsx(Icon, { name: "link" })), button('richText.bulletList', toolbar.block === 'bullet', () => list('bullet'), _jsx(Icon, { name: "list" })), button('richText.numberedList', toolbar.block === 'number', () => list('number'), _jsx(Icon, { name: "list-ordered" }))] }), linking ? (_jsxs("form", { className: "bd-rich-link", onKeyDown: (event) => {
+                    if (event.key === 'Escape') {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        setLinking(false);
+                        editorRef.current?.focus();
+                    }
+                }, onSubmit: (event) => {
                     event.preventDefault();
                     applyLink();
-                }, children: [_jsx(Input, { type: "text", value: url, "aria-label": t('richText.linkUrl'), "aria-invalid": linkError, placeholder: "https://", onChange: (event) => {
+                }, children: [_jsx(Input, { type: "text", disabled: disabled, value: url, "aria-label": t('richText.linkUrl'), "aria-invalid": linkError, placeholder: t('richText.linkUrl.placeholder'), onChange: (event) => {
                             setUrl(event.target.value);
                             setLinkError(false);
-                        } }), _jsx(Button, { type: "submit", variant: "primary", children: t('richText.linkApply') }), linkError ? _jsx("p", { role: "alert", children: t('richText.linkUnsafe') }) : null] })) : null, _jsx("div", { id: id, ref: rootRef, className: "bd-rich-editor bd-input", role: "textbox", "aria-multiline": "true", "aria-label": label, "aria-describedby": describedBy, "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, contentEditable: !disabled, suppressContentEditableWarning: true, spellCheck: true })] }));
+                        } }), _jsx(Button, { type: "submit", variant: "primary", disabled: disabled, children: t('richText.linkApply') }), linkError ? _jsx("p", { role: "alert", children: t('richText.linkUnsafe') }) : null] })) : null, _jsx("div", { className: "bd-rich-body", children: _jsx("div", { id: id, ref: rootRef, className: "bd-rich-editor bd-input", role: "textbox", "aria-multiline": "true", "aria-label": label, "aria-describedby": describedBy, "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, contentEditable: !disabled, suppressContentEditableWarning: true, spellCheck: true }) })] }));
 }

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

@@ -1,4 +1,9 @@
-import type { TextareaPropDef } from '@next-buildr/core';
+import { type TextareaPropDef } from '@next-buildr/core';
 import type { ControlProps } from './types.ts';
-export declare function TextareaControl({ id, def, label, describedBy, value, disabled, onChange, }: ControlProps<TextareaPropDef>): import("react").JSX.Element;
+/**
+ * A textarea prop. `format: 'html'` marks author HTML (ADR-026): a code field that needs the host's
+ * `authorCode` capability. Core sanitises the value when it is written, so what is typed is kept as
+ * a draft and written when the field loses focus, with a preview of what the sanitiser keeps.
+ */
+export declare function TextareaControl(props: ControlProps<TextareaPropDef>): import("react").JSX.Element;
 //# sourceMappingURL=textarea.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/controls/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,GAAG,EACH,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE,YAAY,CAAC,eAAe,CAAC,+BAc/B"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/controls/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAItF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,YAAY,CAAC,eAAe,CAAC,+BAgBnE"}

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

@@ -1,4 +1,39 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export function TextareaControl({ id, def, label, describedBy, value, disabled, onChange, }) {
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { sanitizeHtml, serializeHtml } from '@next-buildr/core';
+import { useId, useMemo, useState } from 'react';
+import { useT } from '../../../messages/index.js';
+import { useEditor } from '../../../store/index.js';
+/**
+ * A textarea prop. `format: 'html'` marks author HTML (ADR-026): a code field that needs the host's
+ * `authorCode` capability. Core sanitises the value when it is written, so what is typed is kept as
+ * a draft and written when the field loses focus, with a preview of what the sanitiser keeps.
+ */
+export function TextareaControl(props) {
+    if (props.def.format === 'html')
+        return _jsx(HtmlControl, { ...props });
+    const { id, def, label, describedBy, value, disabled, onChange } = props;
     return (_jsx("textarea", { id: id, className: "bd-input bd-textarea", rows: 4, value: typeof value === 'string' ? value : def.default, maxLength: def.maxLength, disabled: disabled, "aria-label": label, "aria-describedby": describedBy, onChange: (event) => onChange(event.target.value) }));
 }
+function HtmlControl({ id, def, label, describedBy, value, disabled, onChange, }) {
+    const t = useT();
+    const store = useEditor();
+    const noteId = useId();
+    const permitted = store.authorCode;
+    const stored = typeof value === 'string' ? value : def.default;
+    const [draft, setDraft] = useState(undefined);
+    const shown = draft ?? stored;
+    const result = useMemo(() => sanitizeHtml(shown), [shown]);
+    const apply = () => {
+        if (draft === undefined)
+            return;
+        if (draft !== stored)
+            onChange(draft);
+        setDraft(undefined);
+    };
+    return (_jsxs("div", { className: "bd-html-field", "data-state": permitted ? 'on' : 'off', children: [_jsx("textarea", { id: id, className: "bd-input bd-textarea bd-code", rows: 8, value: shown, maxLength: def.maxLength, disabled: disabled || !permitted, spellCheck: false, autoComplete: "off", autoCapitalize: "off", "aria-label": label, "aria-describedby": [describedBy, noteId].filter(Boolean).join(' '), onChange: (event) => setDraft(event.target.value), onBlur: apply, onKeyDown: (event) => {
+                    if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+                        event.preventDefault();
+                        apply();
+                    }
+                } }), _jsx("div", { id: noteId, className: "bd-html-note", children: permitted ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "bd-field-hint", children: t('inspector.text.html.hint') }), result.removed.length === 0 ? (shown.trim() === '' ? null : (_jsx("p", { className: "bd-field-hint", role: "status", children: t('inspector.text.html.clean') }))) : (_jsxs("div", { className: "bd-author-problems", role: "status", "data-kind": "removed", children: [_jsx("strong", { children: t('inspector.text.html.removed') }), _jsx("ul", { children: [...new Set(result.removed)].map((item) => (_jsx("li", { children: item }, item))) })] })), shown.trim() === '' ? null : (_jsxs(_Fragment, { children: [_jsx("span", { className: "bd-flabel", children: t('inspector.text.html.preview') }), _jsx("pre", { className: "bd-code-preview", children: _jsx("code", { children: serializeHtml(result.nodes) }) })] }))] })) : (_jsx("p", { className: "bd-field-hint", children: t('inspector.text.html.off') })) })] }));
+}

package/dist/panels/inspector/default-hint.d.ts

@@ -0,0 +1,13 @@
+import type { PropDef } from '@next-buildr/core';
+import type { MessageKey } from '../../messages/index.tsx';
+type Translate = (key: MessageKey) => string;
+/**
+ * The default of a prop as text for the hint under its control, or `undefined` when there is
+ * nothing meaningful to show (an empty text, a list, an object). Never raw `null`, `undefined`,
+ * `true`, `false` or JSON.
+ */
+export declare function formatDefault(def: PropDef, t: Translate, 
+/** The component's label when the default text is the component's own English name. */
+nameFor?: (text: string) => string): string | undefined;
+export {};
+//# sourceMappingURL=default-hint.d.ts.map

package/dist/panels/inspector/default-hint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-hint.d.ts","sourceRoot":"","sources":["../../../src/panels/inspector/default-hint.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAE3D,KAAK,SAAS,GAAG,CAAC,GAAG,EAAE,UAAU,KAAK,MAAM,CAAC;AAE7C;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,GAAG,EAAE,OAAO,EACZ,CAAC,EAAE,SAAS;AACZ,uFAAuF;AACvF,OAAO,GAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAuB,GACjD,MAAM,GAAG,SAAS,CAiBpB"}

package/dist/panels/inspector/default-hint.js

@@ -0,0 +1,30 @@
+/**
+ * The default of a prop as text for the hint under its control, or `undefined` when there is
+ * nothing meaningful to show (an empty text, a list, an object). Never raw `null`, `undefined`,
+ * `true`, `false` or JSON.
+ */
+export function formatDefault(def, t, 
+/** The component's label when the default text is the component's own English name. */
+nameFor = (text) => text) {
+    const value = def.default;
+    if (def.kind === 'list' || def.kind === 'object' || def.kind === 'richText')
+        return undefined;
+    if (def.kind === 'listSource')
+        return undefined;
+    if (value === null || value === undefined) {
+        return t(def.kind === 'media' ? 'inspector.default.noFile' : 'inspector.default.none');
+    }
+    if (def.kind === 'media')
+        return undefined;
+    if (typeof value === 'boolean') {
+        return t(value ? 'inspector.default.yes' : 'inspector.default.no');
+    }
+    if (def.kind === 'select') {
+        return def.optionLabels?.[String(value)] ?? String(value);
+    }
+    if (typeof value === 'number')
+        return Number.isFinite(value) ? String(value) : undefined;
+    if (typeof value === 'string')
+        return value === '' ? undefined : nameFor(value);
+    return undefined;
+}

package/dist/panels/inspector/default-hint.test.d.ts

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

package/dist/panels/inspector/default-hint.test.d.ts.map

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

package/dist/panels/inspector/default-hint.test.js

@@ -0,0 +1,46 @@
+import { p } from '@next-buildr/core';
+import { describe, expect, it } from 'vitest';
+import { createTranslator } from '../../messages/index.js';
+import { formatDefault } from './default-hint.js';
+const tEn = createTranslator('en');
+const tPl = createTranslator('pl');
+describe('formatDefault', () => {
+    it('shows a missing default as none, and a missing file as no file', () => {
+        const optional = { ...p.text(), default: null };
+        expect(formatDefault(optional, tPl)).toBe('brak');
+        expect(formatDefault(optional, tEn)).toBe('none');
+        const media = { ...p.media(), default: null };
+        expect(formatDefault(media, tPl)).toBe('brak pliku');
+        expect(formatDefault(media, tEn)).toBe('no file');
+        const undef = { ...p.text(), default: undefined };
+        expect(formatDefault(undef, tEn)).toBe('none');
+    });
+    it('shows booleans as Yes/No', () => {
+        expect(formatDefault(p.boolean({ default: false }), tPl)).toBe('Nie');
+        expect(formatDefault(p.boolean({ default: true }), tPl)).toBe('Tak');
+        expect(formatDefault(p.boolean({ default: false }), tEn)).toBe('No');
+        expect(formatDefault(p.boolean({ default: true }), tEn)).toBe('Yes');
+    });
+    it('shows a select default as its option label', () => {
+        const def = p.select({
+            options: ['a', 'b'],
+            default: 'b',
+            optionLabels: { a: 'Alpha', b: 'Beta' },
+        });
+        expect(formatDefault(def, tEn)).toBe('Beta');
+        expect(formatDefault(p.select({ options: [1, 2], default: 2 }), tEn)).toBe('2');
+    });
+    it('shows numbers and texts, and hides an empty text', () => {
+        expect(formatDefault(p.number({ default: 16 }), tEn)).toBe('16');
+        expect(formatDefault(p.text({ default: 'Hello' }), tEn)).toBe('Hello');
+        expect(formatDefault(p.text({ default: 'Heading' }), tEn, () => 'Nagłówek')).toBe('Nagłówek');
+        expect(formatDefault(p.text({ default: '' }), tEn)).toBeUndefined();
+    });
+    it('hides lists, objects and rich text, and never prints raw values', () => {
+        expect(formatDefault(p.list(p.text()), tEn)).toBeUndefined();
+        expect(formatDefault(p.object({ a: p.text() }), tEn)).toBeUndefined();
+        expect(formatDefault(p.richText(), tEn)).toBeUndefined();
+        const weird = { ...p.text(), default: { a: 1 } };
+        expect(formatDefault(weird, tEn)).toBeUndefined();
+    });
+});

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

@@ -1,11 +1,11 @@
 export type { ControlProps } from './controls/index.ts';
 export { parseNumber } from './controls/index.ts';
-export type { InspectorProps } from './inspector.tsx';
-export { Inspector } from './inspector.tsx';
+export type { InspectorProps, InspectorRailProps, InspectorTab } from './inspector.tsx';
+export { Inspector, InspectorRail } from './inspector.tsx';
 export type { PropsPanelProps } from './props-panel.tsx';
 export { isAdvancedProp, PropsPanel, propLabel } from './props-panel.tsx';
 export type { StyleInput, StyleInspectorProps } from './styles/index.ts';
-export { checkStyleInput, StyleInspector } from './styles/index.ts';
+export { checkStyleInput, SectionsToggle, StyleInspector, StyleSectionsProvider, } from './styles/index.ts';
 export type { PropReading } from './value.ts';
 export { readProp, translationLocale } from './value.ts';
 export type { BindingOption, BindingStatus, FormulaCheck, Preview } from './values/analyze.ts';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/panels/inspector/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,YAAY,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC1E,YAAY,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACpE,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACzD,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC/F,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC/F,YAAY,EAAE,0BAA0B,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/panels/inspector/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAE,cAAc,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACxF,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC1E,YAAY,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EACL,eAAe,EACf,cAAc,EACd,cAAc,EACd,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACzD,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC/F,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC/F,YAAY,EAAE,0BAA0B,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/panels/inspector/index.js

@@ -1,7 +1,7 @@
 export { parseNumber } from './controls/index.js';
-export { Inspector } from './inspector.js';
+export { Inspector, InspectorRail } from './inspector.js';
 export { isAdvancedProp, PropsPanel, propLabel } from './props-panel.js';
-export { checkStyleInput, StyleInspector } from './styles/index.js';
+export { checkStyleInput, SectionsToggle, StyleInspector, StyleSectionsProvider, } from './styles/index.js';
 export { readProp, translationLocale } from './value.js';
 export { bindingOptions, checkBinding, checkFormula, previewValue } from './values/analyze.js';
 export { InspectorDataProvider, useInspectorData } from './values/data.js';

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

@@ -1,16 +1,34 @@
 import type { PageNode } from '@next-buildr/core';
 import type { ReactNode } from 'react';
+import type { RemoveRequest } from '../../app/contracts.ts';
+export type InspectorTab = 'content' | 'style' | 'advanced';
 export interface InspectorProps {
     /** The language being edited; translatable props write to it. */
     readonly locale?: string;
     readonly defaultLocale?: string;
     /** The Style tab (PB-082); without it the tab says the styles are edited elsewhere. */
-    readonly renderStyle?: (node: PageNode) => ReactNode;
+    readonly renderStyle?: (node: PageNode, query: string) => ReactNode;
+    /** The tab shown (controlled). Without it the inspector keeps its own. */
+    readonly tab?: InspectorTab;
+    readonly onTabChange?: (tab: InspectorTab) => void;
+    /** Extra header buttons, placed before the more menu (the Style tab fills it). */
+    readonly headerActions?: ReactNode;
+    /** Shows the "Page settings" action of the empty state. */
+    readonly onPageSettings?: () => void;
+    /** Hands a removal to the shell (confirmation, Undo toast); without it the node is removed at once. */
+    readonly onRemoveRequest?: (request: RemoveRequest) => void;
 }
+export interface InspectorRailProps {
+    readonly tab: InspectorTab;
+    readonly onTabChange: (tab: InspectorTab) => void;
+    readonly onExpand: () => void;
+}
+/** The collapsed inspector: the tabs as vertical icon buttons; a click opens the panel on that tab. */
+export declare function InspectorRail({ tab, onTabChange, onExpand }: InspectorRailProps): import("react").JSX.Element;
 /**
  * The properties of the selected node (docs/editor.md#inspector): Content (the component's props
  * as controls), Style and Advanced (name, anchor, the display condition, and the props the
  * component puts in the "advanced" or "accessibility" group).
  */
-export declare function Inspector({ locale, defaultLocale, renderStyle }: InspectorProps): import("react").JSX.Element;
+export declare function Inspector({ locale, defaultLocale, renderStyle, tab: controlledTab, onTabChange, headerActions, onPageSettings, onRemoveRequest, }: InspectorProps): import("react").JSX.Element;
 //# sourceMappingURL=inspector.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"inspector.d.ts","sourceRoot":"","sources":["../../../src/panels/inspector/inspector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAkB,MAAM,mBAAmB,CAAC;AAGlE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvC,MAAM,WAAW,cAAc;IAC7B,iEAAiE;IACjE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAChC,uFAAuF;IACvF,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,SAAS,CAAC;CACtD;AAkED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,EAAE,cAAc,+BA+M/E"}
+{"version":3,"file":"inspector.d.ts","sourceRoot":"","sources":["../../../src/panels/inspector/inspector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,QAAQ,EAAkB,MAAM,mBAAmB,CAAC;AAGjF,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAgC5D,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;AAE5D,MAAM,WAAW,cAAc;IAC7B,iEAAiE;IACjE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAChC,uFAAuF;IACvF,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IACpE,0EAA0E;IAC1E,QAAQ,CAAC,GAAG,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACnD,kFAAkF;IAClF,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC;IACnC,2DAA2D;IAC3D,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IACrC,uGAAuG;IACvG,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;CAC7D;AAUD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,GAAG,EAAE,YAAY,CAAC;IAC3B,QAAQ,CAAC,WAAW,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,uGAAuG;AACvG,wBAAgB,aAAa,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,kBAAkB,+BAsC/E;AAmID;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,aAAa,EACb,WAAW,EACX,GAAG,EAAE,aAAa,EAClB,WAAW,EACX,aAAa,EACb,cAAc,EACd,eAAe,GAChB,EAAE,cAAc,+BAglBhB"}