@next-buildr/editor 0.0.0-stage → 2.0.0

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

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { $isLinkNode, $toggleLink, LinkNode } from '@lexical/link';
+import { $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListItemNode, ListNode, REMOVE_LIST_COMMAND, registerList, } from '@lexical/list';
+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 { 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 };
+/** What the selection is in: its block type and text formats, for the toolbar's pressed states. */
+function readToolbar(editor) {
+    return editor.getEditorState().read(() => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection))
+            return NO_TOOLBAR;
+        const anchor = selection.anchor.getNode();
+        const top = anchor.getTopLevelElement();
+        let block = 'other';
+        if ($isHeadingNode(top)) {
+            const tag = top.getTag();
+            block = tag === 'h2' || tag === 'h3' || tag === 'h4' ? tag : 'other';
+        }
+        else if ($isListNode(top))
+            block = top.getListType() === 'number' ? 'number' : 'bullet';
+        else if (top?.getType() === 'paragraph')
+            block = 'paragraph';
+        const parent = anchor.getParent();
+        return {
+            block,
+            bold: selection.hasFormat('bold'),
+            italic: selection.hasFormat('italic'),
+            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;
+/**
+ * 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 function RichTextControl({ id, label, describedBy, value, disabled, onChange, }) {
+    const t = useT();
+    const rootRef = useRef(null);
+    const editorRef = useRef(null);
+    /** The last document the editor showed or wrote, as text; equal means there is nothing to load. */
+    const shown = useRef('');
+    const emit = useRef(onChange);
+    emit.current = onChange;
+    const [toolbar, setToolbar] = useState(NO_TOOLBAR);
+    const [linking, setLinking] = useState(false);
+    const [url, setUrl] = useState('');
+    const [linkError, setLinkError] = useState(false);
+    // The editor lives as long as the control; the value flows in through the effect below.
+    useEffect(() => {
+        const element = rootRef.current;
+        if (element === null)
+            return;
+        const editor = createEditor({
+            namespace: 'buildr-rich-text',
+            nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode, LinkNode],
+            onError: () => { },
+        });
+        editorRef.current = editor;
+        editor.setRootElement(element);
+        const stops = [
+            registerRichText(editor),
+            registerList(editor),
+            editor.registerUpdateListener(({ editorState, dirtyElements, dirtyLeaves, tags }) => {
+                setToolbar((current) => {
+                    const next = readToolbar(editor);
+                    return sameToolbar(current, next) ? current : next;
+                });
+                if (tags.has('buildr-load') || (dirtyElements.size === 0 && dirtyLeaves.size === 0))
+                    return;
+                const out = serializeRichText(editorState);
+                if (out === undefined)
+                    return;
+                const text = JSON.stringify(out);
+                if (text === shown.current)
+                    return;
+                shown.current = text;
+                emit.current(out);
+            }),
+        ];
+        return () => {
+            for (const stop of stops)
+                stop();
+            editor.setRootElement(null);
+            editorRef.current = null;
+        };
+    }, []);
+    useEffect(() => {
+        editorRef.current?.setEditable(!disabled);
+    }, [disabled]);
+    // A value that changed elsewhere (undo, another panel) is loaded; one the editor wrote is not.
+    useEffect(() => {
+        const editor = editorRef.current;
+        if (editor === null)
+            return;
+        const incoming = toRichText(value);
+        const text = JSON.stringify(incoming);
+        if (text === shown.current)
+            return;
+        shown.current = text;
+        editor.update(() => $loadRichText(incoming), { tag: 'buildr-load', discrete: true });
+    }, [value]);
+    const run = (fn) => {
+        const editor = editorRef.current;
+        if (editor === null || disabled)
+            return;
+        editor.focus();
+        fn(editor);
+    };
+    const setBlock = (make) => run((editor) => editor.update(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection))
+            $setBlocksType(selection, make);
+    }));
+    const heading = (tag) => toolbar.block === tag
+        ? setBlock($createParagraphNode)
+        : setBlock(() => $createHeadingNode(tag));
+    const list = (kind) => run((editor) => editor.dispatchCommand(toolbar.block === kind
+        ? REMOVE_LIST_COMMAND
+        : kind === 'bullet'
+            ? INSERT_UNORDERED_LIST_COMMAND
+            : INSERT_ORDERED_LIST_COMMAND, undefined));
+    const applyLink = () => {
+        const address = url.trim();
+        if (address === '') {
+            run((editor) => editor.update(() => $toggleLink(null)));
+        }
+        else {
+            const safe = sanitizeUrl(address);
+            if (!safe.ok) {
+                setLinkError(true);
+                return;
+            }
+            run((editor) => editor.update(() => $toggleLink(safe.value)));
+        }
+        setLinking(false);
+        setUrl('');
+        setLinkError(false);
+    };
+    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) => {
+                    event.preventDefault();
+                    applyLink();
+                }, children: [_jsx(Input, { type: "text", value: url, "aria-label": t('richText.linkUrl'), "aria-invalid": linkError, placeholder: "https://", 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 })] }));
+}

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

@@ -0,0 +1,5 @@
+import type { SelectPropDef } from '@next-buildr/core';
+import type { ControlProps } from './types.ts';
+/** Options may be numbers; the menu deals in strings, so the choice is looked up again by its text. */
+export declare function SelectControl({ def, label, value, disabled, onChange, }: ControlProps<SelectPropDef>): import("react").JSX.Element;
+//# sourceMappingURL=select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/controls/select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,uGAAuG;AACvG,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE,YAAY,CAAC,aAAa,CAAC,+BAmB7B"}

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Select } from '../../../ui/index.js';
+/** Options may be numbers; the menu deals in strings, so the choice is looked up again by its text. */
+export function SelectControl({ def, label, value, disabled, onChange, }) {
+    const current = def.options.includes(value)
+        ? value
+        : def.default;
+    return (_jsx(Select, { label: label, value: String(current), 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)
+                onChange(option);
+        } }));
+}

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

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

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

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

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { p } from '@next-buildr/core';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { MessagesProvider } from '../../../messages/index.js';
+import { SelectControl } from './select.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 = '';
+});
+async function mount(def, value) {
+    await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(SelectControl, { id: "c", def: def, label: "Display", describedBy: undefined, value: value, disabled: false, onChange: () => undefined }) })));
+    return container.querySelector('button[role=combobox]');
+}
+describe('SelectControl', () => {
+    it('shows the label of the chosen option when the prop declares labels', async () => {
+        const def = p.select({
+            options: ['block', 'flex'],
+            optionLabels: { block: 'Block', flex: 'Flex row or column' },
+            default: 'block',
+        });
+        expect((await mount(def, 'flex')).textContent).toContain('Flex row or column');
+    });
+    it('shows the raw value when there are no labels, or none for that option', async () => {
+        expect((await mount(p.select({ options: ['sm', 'md'], default: 'md' }), 'sm')).textContent).toContain('sm');
+        const partial = p.select({
+            options: ['a', 'b'],
+            optionLabels: { a: 'Alpha' },
+            default: 'a',
+        });
+        expect((await mount(partial, 'b')).textContent).toContain('b');
+    });
+});

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from '../../../ui/index.js';
+export function TextControl({ id, def, label, describedBy, value, disabled, onChange, }) {
+    return (_jsx(Input, { id: id, type: "text", value: typeof value === 'string' ? value : def.default, maxLength: def.maxLength, disabled: disabled, "aria-label": label, "aria-describedby": describedBy, onChange: (event) => onChange(event.target.value) }));
+}

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

@@ -0,0 +1,4 @@
+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;
+//# sourceMappingURL=textarea.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function TextareaControl({ id, def, label, describedBy, value, disabled, onChange, }) {
+    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) }));
+}

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

@@ -0,0 +1,16 @@
+import type { PropDef } from '@next-buildr/core';
+/** What every prop control receives: the definition, the value to show, and how to change it. */
+export interface ControlProps<D extends PropDef = PropDef> {
+    /** The DOM id of the control itself (its label points at it). */
+    readonly id: string;
+    readonly def: D;
+    /** The accessible name. */
+    readonly label: string;
+    /** The id of the hint text the control is described by, when there is one. */
+    readonly describedBy: string | undefined;
+    /** The value to show — the prop's own, or its default. Untrusted: a control checks its type. */
+    readonly value: unknown;
+    readonly disabled: boolean;
+    readonly onChange: (value: unknown) => void;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/controls/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,iGAAiG;AACjG,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO;IACvD,iEAAiE;IACjE,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;IAChB,2BAA2B;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,8EAA8E;IAC9E,QAAQ,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,gGAAgG;IAChG,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7C"}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,17 @@
+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 { 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 type { PropReading } from './value.ts';
+export { readProp, translationLocale } from './value.ts';
+export type { BindingOption, BindingStatus, FormulaCheck, Preview } from './values/analyze.ts';
+export { bindingOptions, checkBinding, checkFormula, previewValue } from './values/analyze.ts';
+export type { InspectorDataProviderProps } from './values/data.tsx';
+export { InspectorDataProvider, useInspectorData } from './values/data.tsx';
+export { TranslationBanner, TranslationHint } from './values/translation.tsx';
+export { ValueChip, ValueEditor } from './values/value-editor.tsx';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/panels/inspector/index.js

@@ -0,0 +1,9 @@
+export { parseNumber } from './controls/index.js';
+export { Inspector } from './inspector.js';
+export { isAdvancedProp, PropsPanel, propLabel } from './props-panel.js';
+export { checkStyleInput, StyleInspector } 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';
+export { TranslationBanner, TranslationHint } from './values/translation.js';
+export { ValueChip, ValueEditor } from './values/value-editor.js';

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

@@ -0,0 +1,16 @@
+import type { PageNode } from '@next-buildr/core';
+import type { ReactNode } from 'react';
+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;
+}
+/**
+ * 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;
+//# sourceMappingURL=inspector.d.ts.map

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

@@ -0,0 +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"}

package/dist/panels/inspector/inspector.js

@@ -0,0 +1,116 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { canEdit, createIndex } from '@next-buildr/core';
+import { useState } from 'react';
+import { componentMeta, useManifest } from '../../app/manifest.js';
+import { useT } from '../../messages/index.js';
+import { useEditor, useEditorState, useSelectedNode } from '../../store/index.js';
+import { Button, ComponentIcon, Icon, IconButton, Input, Tabs } from '../../ui/index.js';
+import { PropsPanel } from './props-panel.js';
+import { translationLocale } from './value.js';
+import { TranslationBanner } from './values/translation.js';
+/** A text attribute of the node (`name`, `anchor`); clearing it removes it. */
+function AttrField(props) {
+    // What is typed stays on screen even when the command refuses it (an anchor with a capital).
+    const [draft, setDraft] = useState(undefined);
+    const shown = draft ?? props.value;
+    const id = `${props.nodeId}-${props.attr}`;
+    return (_jsxs("div", { className: "bd-field", "data-attr": props.attr, children: [_jsx("label", { className: "bd-field-label", htmlFor: id, children: props.label }), _jsx(Input, { id: id, value: shown, disabled: props.disabled, placeholder: props.placeholder, autoComplete: "off", spellCheck: false, onChange: (event) => {
+                    setDraft(event.target.value);
+                    props.onChange(props.attr, event.target.value);
+                }, onBlur: () => setDraft(undefined) })] }));
+}
+/** The node's own name in the header: the same `name` attribute as the Advanced tab's field. */
+function HeaderName(props) {
+    const t = useT();
+    const [draft, setDraft] = useState(undefined);
+    return (_jsx(Input, { className: "bd-inspector-name", "aria-label": t('inspector.nodeName'), value: draft ?? props.value, disabled: props.disabled, placeholder: props.placeholder, autoComplete: "off", spellCheck: false, onChange: (event) => {
+            setDraft(event.target.value);
+            props.onChange('name', event.target.value);
+        }, onBlur: () => setDraft(undefined) }));
+}
+/**
+ * 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 function Inspector({ locale, defaultLocale, renderStyle }) {
+    const t = useT();
+    const store = useEditor();
+    const manifest = useManifest();
+    const node = useSelectedNode();
+    const doc = useEditorState((state) => state.doc);
+    const readOnly = useEditorState((state) => state.readOnly);
+    const selectedIds = useEditorState((state) => state.selectedIds);
+    const count = selectedIds.length;
+    const [notice, setNotice] = useState('');
+    if (node === undefined) {
+        return (_jsx("div", { className: "bd-inspector", children: _jsxs("div", { className: "bd-inspector-empty", "data-state": "nothing", children: [_jsx(Icon, { name: "mouse-pointer-click", size: "md" }), _jsx("p", { className: "bd-inspector-empty-title", children: t('inspector.empty') }), _jsx("p", { className: "bd-inspector-empty-hint", children: t('inspector.emptyHint') })] }) }));
+    }
+    const meta = componentMeta(manifest, node.type);
+    const locked = !canEdit(doc, createIndex(doc), node.id, 'content').ok;
+    const disabled = readOnly || locked;
+    const report = (result) => setNotice(result.ok ? '' : (result.error?.message ?? ''));
+    const write = (prop, def, value) => {
+        const target = translationLocale(def, locale, defaultLocale);
+        const translate = {
+            type: 'node.setProp',
+            payload: {
+                id: node.id,
+                prop,
+                value: { kind: 'static', value },
+                ...(target !== undefined ? { locale: target } : {}),
+            },
+        };
+        // A translation hangs off a fixed value, so a prop still at its default gets that first.
+        const current = node.props !== undefined && Object.hasOwn(node.props, prop) ? node.props[prop] : undefined;
+        if (target !== undefined && current?.kind !== 'static') {
+            const base = {
+                type: 'node.setProp',
+                payload: { id: node.id, prop, value: { kind: 'static', value: def.default } },
+            };
+            report(store.dispatchBatch([base, translate], { label: 'node.setProp' }));
+            return;
+        }
+        report(store.dispatch(translate));
+    };
+    // A binding or a formula is the prop's value in the default language; translations belong to fixed values.
+    const setValue = (prop, _def, value) => report(store.dispatch({ type: 'node.setProp', payload: { id: node.id, prop, value } }));
+    const fixed = (prop, def) => report(store.dispatch({
+        type: 'node.setProp',
+        payload: { id: node.id, prop, value: { kind: 'static', value: def.default } },
+    }));
+    const reset = (prop, def) => {
+        const target = translationLocale(def, locale, defaultLocale);
+        report(store.dispatch({
+            type: 'node.unsetProp',
+            payload: { id: node.id, prop, ...(target !== undefined ? { locale: target } : {}) },
+        }));
+    };
+    const setAttr = (attr, value) => report(store.dispatch({
+        type: 'node.setAttr',
+        payload: { id: node.id, key: attr, value: value === '' ? null : value },
+    }));
+    const clearCondition = () => report(store.dispatch({
+        type: 'node.setAttr',
+        payload: { id: node.id, key: 'visibleIf', value: null },
+    }));
+    const propsPanel = (scope) => {
+        if (meta === undefined) {
+            return scope === 'content' ? (_jsx("p", { className: "bd-inspector-empty", children: t('inspector.unknownComponent') })) : null;
+        }
+        return (_jsx(PropsPanel, { node: node, meta: meta, scope: scope, locale: locale, defaultLocale: defaultLocale, disabled: disabled, onChange: write, onReset: reset, onSetValue: setValue, onFixed: fixed }));
+    };
+    return (_jsxs("div", { className: "bd-inspector", children: [_jsxs("header", { className: "bd-inspector-head", children: [_jsxs("div", { className: "bd-inspector-headline", children: [_jsx(ComponentIcon, { meta: meta, size: "md", className: "bd-inspector-icon" }), _jsx("h3", { className: "bd-inspector-title", children: meta?.label ?? node.type }), _jsxs("div", { className: "bd-inspector-actions", children: [_jsx(IconButton, { variant: "ghost", icon: "copy", label: t('inspector.duplicate'), disabled: disabled, onClick: () => report(store.dispatch({ type: 'node.duplicate', payload: { ids: selectedIds } })) }), _jsx(IconButton, { variant: "ghost", icon: "trash-2", label: t('inspector.delete'), disabled: disabled, onClick: () => report(store.dispatch({ type: 'node.remove', payload: { ids: selectedIds } })) })] })] }), _jsx(HeaderName, { nodeId: node.id, value: node.name ?? '', placeholder: meta?.label ?? node.type, disabled: disabled, onChange: setAttr }, node.id), count > 1 ? (_jsx("p", { className: "bd-inspector-count", children: `${count} ${t('inspector.selected')}` })) : null, locked ? _jsx("p", { className: "bd-inspector-locked", children: t('inspector.locked') }) : null] }), _jsx(TranslationBanner, { locale: locale, defaultLocale: defaultLocale }), _jsx(Tabs, { label: t('inspector.tabs'), items: [
+                    { value: 'content', label: t('inspector.tab.content'), content: propsPanel('content') },
+                    {
+                        value: 'style',
+                        label: t('inspector.tab.style'),
+                        content: renderStyle?.(node) ?? (_jsx("p", { className: "bd-inspector-empty", children: t('inspector.style.pending') })),
+                    },
+                    {
+                        value: 'advanced',
+                        label: t('inspector.tab.advanced'),
+                        content: (_jsxs(_Fragment, { children: [_jsx(AttrField, { nodeId: node.id, attr: "name", label: t('inspector.attr.name'), value: node.name ?? '', disabled: disabled, onChange: setAttr }, `${node.id}-name`), _jsx(AttrField, { nodeId: node.id, attr: "anchor", label: t('inspector.attr.anchor'), value: node.anchor ?? '', disabled: disabled, placeholder: "section-1", onChange: setAttr }, `${node.id}-anchor`), node.visibleIf !== undefined ? (_jsxs("div", { className: "bd-field", "data-attr": "visibleIf", children: [_jsx("span", { className: "bd-field-label", children: t('inspector.attr.visibleIf') }), _jsx("p", { className: "bd-field-chip", children: t('inspector.attr.visibleIfSet') }), _jsx(Button, { variant: "ghost", disabled: disabled, onClick: clearCondition, children: t('inspector.attr.visibleIfRemove') })] })) : null, propsPanel('advanced')] })),
+                    },
+                ] }), _jsx("div", { role: "status", className: "bd-inspector-notice", children: notice })] }));
+}

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

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

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

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