@widgentic/designer 0.1.0

package/dist/json-tree-editor.js

@@ -0,0 +1,186 @@
+/**
+ * Generic JSON value editor: collapsible tree with in-place key/value
+ * editing, type switching, and add/remove — the NanoJSON/JSONTree
+ * interaction pattern, built in-house because the general libraries carry
+ * far more (and weigh far more) than the designer needs.
+ *
+ * Structural operations re-render the tree; text edits commit on change
+ * (blur/Enter) so typing is never interrupted.
+ */
+import { h } from "./dom.js";
+const TYPE_OPTIONS = ["string", "number", "boolean", "null", "object", "array"];
+function typeOf(value) {
+    if (value === null)
+        return "null";
+    if (Array.isArray(value))
+        return "array";
+    return (typeof value);
+}
+function defaultFor(type, previous) {
+    switch (type) {
+        case "string":
+            return typeof previous === "number" || typeof previous === "boolean"
+                ? String(previous)
+                : "";
+        case "number": {
+            const parsed = Number(previous);
+            return Number.isFinite(parsed) ? parsed : 0;
+        }
+        case "boolean":
+            return previous === "true" ? true : Boolean(previous) && previous !== "false";
+        case "null":
+            return null;
+        case "object":
+            return {};
+        case "array":
+            return [];
+    }
+}
+function setAt(root, path, value, remove = false) {
+    if (path.length === 0)
+        return value;
+    const [step, ...rest] = path;
+    if (Array.isArray(root)) {
+        const copy = [...root];
+        if (rest.length === 0 && remove)
+            copy.splice(step, 1);
+        else
+            copy[step] = setAt(copy[step], rest, value, remove);
+        return copy;
+    }
+    if (typeof root === "object" && root !== null) {
+        const copy = { ...root };
+        if (rest.length === 0 && remove)
+            delete copy[step];
+        else
+            copy[step] = setAt(copy[step], rest, value, remove);
+        return copy;
+    }
+    return root;
+}
+function renameKey(root, path, from, to) {
+    const holder = path.reduce((node, step) => typeof node === "object" && node !== null
+        ? node[step]
+        : undefined, root);
+    if (typeof holder !== "object" || holder === null || Array.isArray(holder))
+        return root;
+    const entries = Object.entries(holder).map(([k, v]) => k === from ? [to, v] : [k, v]);
+    return setAt(root, path, Object.fromEntries(entries));
+}
+export function createJsonTreeEditor(initial, onChange) {
+    let current = initial;
+    const element = h("div", { class: "wgd-jsontree" });
+    function commit(next) {
+        current = next;
+        render();
+        onChange(current);
+    }
+    function commitText(path, type, text) {
+        const value = type === "number"
+            ? Number.isFinite(Number(text))
+                ? Number(text)
+                : 0
+            : text;
+        current = setAt(current, path, value);
+        onChange(current); // no re-render: in-place text edit
+    }
+    function typeSelect(value, path) {
+        const select = h("select", { class: "wgd-select wgd-jt-type" });
+        for (const option of TYPE_OPTIONS) {
+            select.append(h("option", { value: option }, [option]));
+        }
+        select.value = typeOf(value);
+        select.addEventListener("change", () => commit(setAt(current, path, defaultFor(select.value, value))));
+        return select;
+    }
+    function valueControl(value, path) {
+        const type = typeOf(value);
+        if (type === "boolean") {
+            const box = h("input", { type: "checkbox" });
+            box.checked = value;
+            box.addEventListener("change", () => commit(setAt(current, path, box.checked)));
+            return box;
+        }
+        if (type === "null")
+            return h("code", undefined, ["null"]);
+        if (type === "string" || type === "number") {
+            const input = h("input", { type: "text", class: "wgd-input" });
+            input.value = String(value);
+            input.addEventListener("change", () => commitText(path, type, input.value));
+            return input;
+        }
+        return h("span");
+    }
+    function entryRow(keyLabel, value, path, removable) {
+        const row = h("div", { class: "wgd-jt-row" }, [keyLabel, typeSelect(value, path)]);
+        const type = typeOf(value);
+        if (type !== "object" && type !== "array") {
+            row.append(valueControl(value, path));
+        }
+        if (removable) {
+            const remove = h("button", { class: "wgd-icon", type: "button", title: "Remove" }, ["✕"]);
+            remove.addEventListener("click", () => commit(setAt(current, path, undefined, true)));
+            row.append(remove);
+        }
+        const wrap = h("div", { class: "wgd-jt-entry" }, [row]);
+        if (type === "object" || type === "array") {
+            wrap.append(renderContainer(value, path));
+        }
+        return wrap;
+    }
+    function renderContainer(value, path) {
+        const body = h("div", { class: "wgd-jt-children" });
+        if (Array.isArray(value)) {
+            value.forEach((item, index) => {
+                body.append(entryRow(h("span", { class: "wgd-jt-key" }, [String(index)]), item, [...path, index], true));
+            });
+            const add = h("button", { class: "wgd-button wgd-add", type: "button" }, ["+ item"]);
+            add.addEventListener("click", () => commit(setAt(current, [...path, value.length], "")));
+            body.append(h("div", { class: "wgd-toolbar" }, [add]));
+        }
+        else if (typeof value === "object" && value !== null) {
+            for (const [key, item] of Object.entries(value)) {
+                const keyInput = h("input", {
+                    type: "text",
+                    class: "wgd-input wgd-jt-keyinput"
+                });
+                keyInput.value = key;
+                keyInput.addEventListener("change", () => commit(renameKey(current, path, key, keyInput.value)));
+                body.append(entryRow(keyInput, item, [...path, key], true));
+            }
+            const add = h("button", { class: "wgd-button wgd-add", type: "button" }, ["+ property"]);
+            add.addEventListener("click", () => {
+                const holder = value;
+                let name = "key";
+                for (let i = 1; name in holder; i++)
+                    name = `key${i}`;
+                commit(setAt(current, [...path, name], ""));
+            });
+            body.append(h("div", { class: "wgd-toolbar" }, [add]));
+        }
+        const details = h("details", { class: "wgd-jt-branch", open: "" }, [
+            h("summary", { class: "wgd-jt-summary" }, [
+                Array.isArray(value)
+                    ? `[ ${value.length} item${value.length === 1 ? "" : "s"} ]`
+                    : `{ ${Object.keys(value).length} propert${Object.keys(value).length === 1 ? "y" : "ies"} }`
+            ]),
+            body
+        ]);
+        return details;
+    }
+    function render() {
+        element.replaceChildren(entryRow(h("span", { class: "wgd-jt-key" }, ["value"]), current, [], false));
+    }
+    render();
+    return {
+        element,
+        getValue: () => current,
+        setValue(value) {
+            if (element.contains(document.activeElement))
+                return;
+            current = value;
+            render();
+        }
+    };
+}
+//# sourceMappingURL=json-tree-editor.js.map

package/dist/json-tree-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-tree-editor.js","sourceRoot":"","sources":["../src/json-tree-editor.ts"],"names":[],"mappings":"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"}

package/dist/panels.d.ts

@@ -0,0 +1,13 @@
+import type { ThemeEntry } from "@widgentic/core";
+import type { DraftStore } from "./store.js";
+import type { SchemaEntry } from "./schema-designer.js";
+import type { TemplateActionContext } from "./template-panel.js";
+/** Column layout: definition (exported) on the left, presentation on the right. */
+export interface PanelColumns {
+    left: HTMLElement;
+    right: HTMLElement;
+}
+export declare function mountPanels(store: DraftStore, columns: PanelColumns, themes?: ThemeEntry[], schemas?: SchemaEntry[], actionContext?: TemplateActionContext): {
+    dispose(): void;
+};
+//# sourceMappingURL=panels.d.ts.map

package/dist/panels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panels.d.ts","sourceRoot":"","sources":["../src/panels.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AASlD,OAAO,KAAK,EAAE,UAAU,EAAe,MAAM,YAAY,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AA6BjE,mFAAmF;AACnF,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,WAAW,CAAC;CACpB;AAqDD,wBAAgB,WAAW,CACzB,KAAK,EAAE,UAAU,EACjB,OAAO,EAAE,YAAY,EACrB,MAAM,GAAE,UAAU,EAAO,EACzB,OAAO,GAAE,WAAW,EAAO,EAC3B,aAAa,GAAE,qBAAqE,GACnF;IAAE,OAAO,IAAI,IAAI,CAAA;CAAE,CA4crB"}

package/dist/panels.js

@@ -0,0 +1,414 @@
+/**
+ * Editor panels: plain modules over the draft store. Refresh discipline:
+ * every store change re-derives diagnostics and refreshes bound controls,
+ * but never overwrites the control the user is typing in
+ * (`document.activeElement` wins) — the store is the single model, the
+ * DOM is a projection.
+ */
+import { errorMessage } from "./internal.js";
+import { isPlainObject } from "@widgentic/core";
+import { diagnosticLine, h, section, textArea, textField, requireChild } from "./dom.js";
+import { attachJsonHighlight, repaintHighlight } from "./highlight.js";
+import { mountIoPanel } from "./io.js";
+import { createJsonTreeEditor } from "./json-tree-editor.js";
+import { createSchemaBuilder } from "./schema-builder.js";
+import { createRecordEditor } from "./record-editor.js";
+import { createSchemaForm } from "./schema-form.js";
+import { createStylesEditor } from "./styles-editor.js";
+import { mountTemplatePanel } from "./template-panel.js";
+import { createBindingEditor } from "./action-editor.js";
+import { mountThemePanel } from "./theme-panel.js";
+import { deriveDiagnostics, effectiveDataSchema } from "./validate.js";
+/** Tabbed container: first tab visible, buttons switch panes. */
+function tabs(entries) {
+    const buttons = entries.map((entry, index) => {
+        const button = h("button", { class: `wgd-button wgd-tab${index === 0 ? " wgd-tab-active" : ""}`, type: "button" }, [entry.label]);
+        button.addEventListener("click", () => {
+            entries.forEach((other, i) => {
+                other.element.hidden = i !== index;
+                buttons[i]?.classList.toggle("wgd-tab-active", i === index);
+            });
+        });
+        entry.element.hidden = index !== 0;
+        return button;
+    });
+    return h("div", { class: "wgd-tabs" }, [
+        h("div", { class: "wgd-row" }, buttons),
+        ...entries.map((entry) => entry.element)
+    ]);
+}
+/**
+ * JSON-valued textarea with parse gating: invalid JSON never reaches the
+ * store (last-valid-wins) — the parse error shows beside the field.
+ */
+function jsonField(label, read, write, clear, store, refreshers, rows = 6) {
+    const parseError = diagnosticLine(undefined);
+    const initial = read(store.get());
+    const field = textArea(label, initial === undefined ? "" : JSON.stringify(initial, null, 2), (text) => {
+        if (text.trim() === "") {
+            parseError.hidden = true;
+            if (clear)
+                store.update((draft) => clear(draft));
+            return;
+        }
+        try {
+            const value = JSON.parse(text);
+            parseError.hidden = true;
+            parseError.textContent = "";
+            store.update((draft) => write(draft, value));
+        }
+        catch (error) {
+            parseError.hidden = false;
+            parseError.textContent = `Invalid JSON (draft keeps the last valid value): ${String(errorMessage(error))}`;
+        }
+    }, rows);
+    const area = requireChild(field, "textarea");
+    attachJsonHighlight(area);
+    refreshers.push((draft) => {
+        if (document.activeElement === area)
+            return;
+        const value = read(draft);
+        area.value = value === undefined ? "" : JSON.stringify(value, null, 2);
+        repaintHighlight(area); // programmatic writes fire no input event
+    });
+    return h("div", undefined, [field, parseError]);
+}
+export function mountPanels(store, columns, themes = [], schemas = [], actionContext = { actions: [], secretNames: [], schemas: [] }) {
+    const refreshers = [];
+    const disposers = [];
+    function bindText(label, read, write) {
+        const field = textField(label, read(store.get()), (value) => store.update((draft) => write(draft, value)));
+        const input = requireChild(field, "input");
+        refreshers.push((draft) => {
+            if (document.activeElement !== input)
+                input.value = read(draft);
+        });
+        return field;
+    }
+    // --- General: kind + prose descriptor fields (left) -------------------
+    const kindDiag = diagnosticLine(undefined);
+    // Hints: name→doc rows beside the parse-gated JSON pane — the same
+    // Tree/JSON pair as styles, scaled down to a flat record.
+    const hintsEditor = createRecordEditor(store.get().descriptor.hints, { key: "hint name", value: "what the hint does", add: "+ hint" }, (hints) => store.update((d) => {
+        if (hints === undefined) {
+            const { hints: _h, ...rest } = d.descriptor;
+            return { ...d, descriptor: rest };
+        }
+        return { ...d, descriptor: { ...d.descriptor, hints } };
+    }));
+    refreshers.push((draft) => hintsEditor.setValue(draft.descriptor.hints));
+    const generalPanel = section("General", [
+        bindText("Kind (id)", (d) => d.kind, (d, v) => ({ ...d, kind: v })),
+        kindDiag,
+        bindText("Description", (d) => d.descriptor.description ?? "", (d, v) => ({ ...d, descriptor: { ...d.descriptor, description: v } })),
+        bindText("Data shape (prose)", (d) => d.descriptor.dataShape ?? "", (d, v) => ({ ...d, descriptor: { ...d.descriptor, dataShape: v } })),
+        h("div", { class: "wgd-field" }, [
+            h("span", { class: "wgd-field-label" }, ["Hints"]),
+            tabs([
+                { label: "Tree", element: hintsEditor.element },
+                {
+                    label: "JSON",
+                    element: jsonField("", (d) => d.descriptor.hints, (d, v) => {
+                        if (!isPlainObject(v))
+                            return d;
+                        const hints = Object.fromEntries(Object.entries(v).map(([k, doc]) => [k, String(doc)]));
+                        return { ...d, descriptor: { ...d.descriptor, hints } };
+                    }, (d) => {
+                        const { hints: _hints, ...rest } = d.descriptor;
+                        return { ...d, descriptor: rest };
+                    }, store, refreshers, 3)
+                }
+            ])
+        ])
+    ]);
+    // --- Data schema (left, definition): inline editing OR a shared ref ----
+    // Two modes, mirroring the store's contract: an inline dataSchema, or a
+    // dataSchemaRef into the host-supplied shared schemas — never both.
+    const schemaBuilder = createSchemaBuilder(store.get().descriptor.dataSchema, (schema) => store.update((d) => {
+        if (schema === undefined) {
+            const { dataSchema: _s, ...rest } = d.descriptor;
+            return { ...d, descriptor: rest };
+        }
+        return { ...d, descriptor: { ...d.descriptor, dataSchema: schema } };
+    }));
+    refreshers.push((draft) => schemaBuilder.setValue(draft.descriptor.dataSchema));
+    const inlineEditors = tabs([
+        { label: "Builder", element: schemaBuilder.element },
+        {
+            label: "JSON",
+            element: jsonField("dataSchema (JSON-Schema subset: type/properties/required/items/enum/pattern)", (d) => d.descriptor.dataSchema, (d, v) => {
+                if (!isPlainObject(v))
+                    return d;
+                return { ...d, descriptor: { ...d.descriptor, dataSchema: v } };
+            }, (d) => {
+                const { dataSchema: _s, ...rest } = d.descriptor;
+                return { ...d, descriptor: rest };
+            }, store, refreshers)
+        }
+    ]);
+    const modeSelect = h("select", { class: "wgd-select wgd-schema-mode" });
+    modeSelect.append(h("option", { value: "inline" }, ["define inline"]));
+    const sharedOption = h("option", { value: "shared" }, ["use shared"]);
+    if (schemas.length === 0)
+        sharedOption.disabled = true;
+    modeSelect.append(sharedOption);
+    const refSelect = h("select", { class: "wgd-select wgd-schema-ref" });
+    for (const entry of schemas) {
+        refSelect.append(h("option", { value: entry.name }, [entry.label ?? entry.name]));
+    }
+    refSelect.addEventListener("change", () => {
+        store.update((d) => ({
+            ...d,
+            descriptor: { ...d.descriptor, dataSchemaRef: refSelect.value }
+        }));
+    });
+    // The shared schema shows read-only: editing it from inside a widget
+    // draft would be edit-at-a-distance — that belongs to the schema section.
+    const sharedView = h("textarea", {
+        class: "wgd-textarea wgd-schema-shared",
+        rows: "10",
+        readonly: "",
+        spellcheck: "false"
+    });
+    const schemaRefDiag = diagnosticLine(undefined);
+    const sharedWrap = h("div", undefined, [
+        h("div", { class: "wgd-row" }, [
+            h("span", { class: "wgd-field-label" }, ["Shared schema"]),
+            refSelect
+        ]),
+        sharedView,
+        h("span", { class: "wgd-field-label" }, [
+            "Read-only here — edit shared schemas in the Data schemas section."
+        ])
+    ]);
+    modeSelect.addEventListener("change", () => {
+        if (modeSelect.value === "shared") {
+            const name = store.get().descriptor.dataSchemaRef ?? schemas[0]?.name ?? "";
+            store.update((d) => {
+                const { dataSchema: _s, ...rest } = d.descriptor;
+                return { ...d, descriptor: { ...rest, dataSchemaRef: name } };
+            });
+        }
+        else {
+            // Back to inline: seed with the resolved shared schema (a copy), so
+            // "customize from here" is one switch away.
+            const resolved = effectiveDataSchema(store.get(), schemas);
+            store.update((d) => {
+                const { dataSchemaRef: _r, ...rest } = d.descriptor;
+                return {
+                    ...d,
+                    descriptor: {
+                        ...rest,
+                        dataSchema: (resolved ?? { type: "object" })
+                    }
+                };
+            });
+        }
+    });
+    function refreshSchemaMode(draft) {
+        const ref = draft.descriptor.dataSchemaRef;
+        const shared = typeof ref === "string";
+        modeSelect.value = shared ? "shared" : "inline";
+        inlineEditors.hidden = shared;
+        sharedWrap.hidden = !shared;
+        if (shared) {
+            if (refSelect.value !== ref)
+                refSelect.value = ref;
+            const resolved = schemas.find((entry) => entry.name === ref)?.schema;
+            sharedView.value =
+                resolved === undefined ? "" : JSON.stringify(resolved, null, 2);
+            repaintHighlight(sharedView); // programmatic writes fire no input event
+        }
+    }
+    refreshers.push(refreshSchemaMode);
+    refreshSchemaMode(store.get());
+    const schemaPanel = section("Data schema", [
+        h("div", { class: "wgd-row" }, [
+            h("span", { class: "wgd-field-label" }, ["Source"]),
+            modeSelect
+        ]),
+        schemaRefDiag,
+        inlineEditors,
+        sharedWrap
+    ], false);
+    // The highlight layer wraps the textarea in place, so attach after the
+    // section assembly gives it a parent.
+    attachJsonHighlight(sharedView);
+    /**
+     * Adaptive data editor: schema-driven form when a dataSchema exists,
+     * generic JSON tree otherwise — rebuilt when the schema changes; the raw
+     * JSON textarea remains as a sibling tab either way.
+     */
+    function adaptiveDataEditor(read, write) {
+        const hostEl = h("div");
+        let schemaKey = "";
+        let editor;
+        function rebuild(draft) {
+            const schema = effectiveDataSchema(draft, schemas);
+            const key = schema === undefined ? "" : JSON.stringify(schema);
+            if (editor !== undefined && key === schemaKey) {
+                editor.setValue(read(draft));
+                return;
+            }
+            schemaKey = key;
+            const onChange = (value) => store.update((d) => write(d, value));
+            editor =
+                schema !== undefined && isPlainObject(schema)
+                    ? createSchemaForm(schema, read(draft), onChange)
+                    : createJsonTreeEditor(read(draft), onChange);
+            hostEl.replaceChildren(editor.element);
+        }
+        rebuild(store.get());
+        refreshers.push(rebuild);
+        return hostEl;
+    }
+    // --- Sample data = the descriptor's dataExample (left, exported) -------
+    const exampleDiag = diagnosticLine(undefined);
+    const samplePanel = section("Sample data", [
+        h("span", { class: "wgd-field-label" }, [
+            "dataExample — ships with the widget as the example agents imitate"
+        ]),
+        tabs([
+            {
+                label: "Edit",
+                element: adaptiveDataEditor((d) => d.descriptor.dataExample, (d, v) => ({ ...d, descriptor: { ...d.descriptor, dataExample: v } }))
+            },
+            {
+                label: "JSON",
+                element: jsonField("dataExample (JSON)", (d) => d.descriptor.dataExample, (d, v) => ({ ...d, descriptor: { ...d.descriptor, dataExample: v } }), (d) => {
+                    const { dataExample: _e, ...rest } = d.descriptor;
+                    return { ...d, descriptor: rest };
+                }, store, refreshers)
+            }
+        ]),
+        exampleDiag
+    ], false);
+    // --- Data for preview (right, session-only) ----------------------------
+    const sampleDiag = diagnosticLine(undefined);
+    const previewDataPanel = section("Data for preview", [
+        h("span", { class: "wgd-field-label" }, [
+            "Overrides dataExample in the preview only (not exported)"
+        ]),
+        tabs([
+            {
+                label: "Edit",
+                element: adaptiveDataEditor((d) => d.sampleData, (d, v) => ({ ...d, sampleData: v }))
+            },
+            {
+                label: "JSON",
+                element: jsonField("Preview data (JSON)", (d) => d.sampleData, (d, v) => ({ ...d, sampleData: v }), (d) => {
+                    const { sampleData: _s, ...rest } = d;
+                    return rest;
+                }, store, refreshers, 4)
+            }
+        ]),
+        sampleDiag
+    ], false);
+    // --- Styles panel (right, presentation): Tree + JSON tabs --------------
+    // Two projections of the one draft value, exactly like the template's
+    // tree/JSON pair: the tree enforces the string-only two-level shape,
+    // the JSON pane stays parse-gated.
+    const stylesDiag = h("div");
+    const stylesEditor = createStylesEditor(store.get().descriptor.styles, (styles) => store.update((d) => {
+        if (styles === undefined) {
+            const { styles: _s, ...rest } = d.descriptor;
+            return { ...d, descriptor: rest };
+        }
+        return { ...d, descriptor: { ...d.descriptor, styles } };
+    }));
+    refreshers.push((draft) => stylesEditor.setValue(draft.descriptor.styles));
+    const stylesPanel = section("Styles (.wg- selectors, guarded like the server)", [
+        tabs([
+            { label: "Tree", element: stylesEditor.element },
+            {
+                label: "JSON",
+                // No legend — the section title already names the shape.
+                element: jsonField("", (d) => d.descriptor.styles, (d, v) => {
+                    if (!isPlainObject(v))
+                        return d;
+                    return {
+                        ...d,
+                        descriptor: {
+                            ...d.descriptor,
+                            styles: v
+                        }
+                    };
+                }, (d) => {
+                    const { styles: _s, ...rest } = d.descriptor;
+                    return { ...d, descriptor: rest };
+                }, store, refreshers)
+            }
+        ]),
+        stylesDiag
+    ]);
+    const templatePanel = mountTemplatePanel(store, refreshers, { actionContext });
+    const themePanel = mountThemePanel(store, refreshers, themes);
+    // --- Load: the widget-level http GET action run once per instance -------
+    const loadDiag = diagnosticLine(undefined);
+    const loadEditor = createBindingEditor(store.get().load, {
+        ...actionContext,
+        loadOnly: true,
+        getDataSchema: () => effectiveDataSchema(store.get(), schemas)
+    }, (binding) => store.update((d) => {
+        if (binding === undefined) {
+            const { load: _l, ...rest } = d;
+            return rest;
+        }
+        return { ...d, load: binding };
+    }));
+    refreshers.push((draft) => {
+        if (!loadEditor.element.contains(document.activeElement))
+            loadEditor.setValue(draft.load);
+    });
+    // Same compact chrome as an element's binding editor in the tree.
+    const loadPanel = section("Load action (http GET, runs once when the widget first renders in an Apps host)", [h("div", { class: "wgd-compact wgd-load" }, [loadEditor.element]), loadDiag], false);
+    const ioPanel = mountIoPanel(store);
+    // Read-only marks the right column's EDITING sections; the theme panel
+    // (preview selector + token reference) stays live in that mode.
+    previewDataPanel.classList.add("wgd-edit-only");
+    stylesPanel.classList.add("wgd-edit-only");
+    // Left: the widget definition (what export produces). Right: presentation.
+    columns.left.append(generalPanel, schemaPanel, samplePanel, templatePanel.element, loadPanel, ioPanel.element);
+    columns.right.append(previewDataPanel, stylesPanel, themePanel.element);
+    disposers.push(templatePanel.dispose, themePanel.dispose, ioPanel.dispose);
+    // Diagnostics refresh: derive once per change here (cheap, pure) — and
+    // once immediately, so the tree/JSON projections render before any edit.
+    function applyDiagnostics(draft) {
+        const diagnostics = deriveDiagnostics(draft, { schemas, actions: actionContext.actions });
+        kindDiag.hidden = diagnostics.kind === undefined;
+        // Unknown refs are flagged in the template panel, at the element; the
+        // Load section only ever speaks about the load binding.
+        loadDiag.hidden = diagnostics.load === undefined;
+        loadDiag.textContent = diagnostics.load ?? "";
+        kindDiag.textContent = diagnostics.kind ?? "";
+        exampleDiag.hidden = diagnostics.example === undefined;
+        exampleDiag.textContent = diagnostics.example
+            ? `dataExample vs dataSchema: ${diagnostics.example.code} at ${diagnostics.example.path} — ${diagnostics.example.message}`
+            : "";
+        sampleDiag.hidden = diagnostics.sample === undefined;
+        sampleDiag.textContent = diagnostics.sample
+            ? `sample vs dataSchema: ${diagnostics.sample.code} at ${diagnostics.sample.path} — ${diagnostics.sample.message}`
+            : "";
+        schemaRefDiag.hidden = diagnostics.schemaRef === undefined;
+        schemaRefDiag.textContent = diagnostics.schemaRef ?? "";
+        themePanel.setDiagnostic(diagnostics.theme
+            ? `${diagnostics.theme.code}: ${diagnostics.theme.message}`
+            : undefined);
+        stylesDiag.replaceChildren(...diagnostics.styles.map((issue) => diagnosticLine(`${issue.selector}${issue.property ? ` → ${issue.property}` : ""}: ${issue.message}`)));
+        for (const refresh of refreshers)
+            refresh(draft);
+        templatePanel.refresh(draft, diagnostics);
+    }
+    const off = store.subscribe(applyDiagnostics);
+    disposers.push(off);
+    applyDiagnostics(store.get());
+    return {
+        dispose() {
+            for (const dispose of disposers)
+                dispose();
+            columns.left.replaceChildren();
+            columns.right.replaceChildren();
+        }
+    };
+}
+//# sourceMappingURL=panels.js.map