@widgentic/designer 0.1.0

package/dist/theme-designer.d.ts

@@ -0,0 +1,35 @@
+import type { ThemeEntry } from "@widgentic/core";
+import type { PreviewWidget } from "./preview.js";
+export interface ThemeDesignerOptions {
+    initialTheme?: ThemeEntry;
+    appearance?: "auto" | "light" | "dark";
+    /**
+     * Custom widget definitions to offer in the preview-kind selector
+     * beside the built-ins — a theme is judged against the widgets it will
+     * actually dress. Invalid definitions are skipped.
+     */
+    widgets?: PreviewWidget[];
+    /**
+     * Mount with editing disabled: panels stay visible but inert, only the
+     * preview and its kind selector operate. Toggle later via `setReadOnly`.
+     */
+    readOnly?: boolean;
+}
+export type ThemeLoadResult = {
+    ok: true;
+} | {
+    ok: false;
+    errors: string[];
+};
+export interface ThemeDesignerHandle {
+    getTheme(): ThemeEntry;
+    loadTheme(entry: unknown): ThemeLoadResult;
+    /** Disable/enable editing; the preview and kind selector stay live. */
+    setReadOnly(readOnly: boolean): void;
+    subscribe(listener: (entry: ThemeEntry) => void): () => void;
+    dispose(): void;
+}
+/** Validate an untrusted entry; errors instead of throwing. */
+export declare function checkThemeEntry(entry: unknown): string[];
+export declare function createThemeDesigner(container: Element, options?: ThemeDesignerOptions): ThemeDesignerHandle;
+//# sourceMappingURL=theme-designer.d.ts.map

package/dist/theme-designer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-designer.d.ts","sourceRoot":"","sources":["../src/theme-designer.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,UAAU,EAAoB,MAAM,iBAAiB,CAAC;AAGpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAiBlD,MAAM,WAAW,oBAAoB;IACnC,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACvC;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,eAAe,GAAG;IAAE,EAAE,EAAE,IAAI,CAAA;CAAE,GAAG;IAAE,EAAE,EAAE,KAAK,CAAC;IAAC,MAAM,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;AAE7E,MAAM,WAAW,mBAAmB;IAClC,QAAQ,IAAI,UAAU,CAAC;IACvB,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,eAAe,CAAC;IAC3C,uEAAuE;IACvE,WAAW,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IACrC,SAAS,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;IAC7D,OAAO,IAAI,IAAI,CAAC;CACjB;AAMD,+DAA+D;AAC/D,wBAAgB,eAAe,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,EAAE,CAcxD;AAED,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,OAAO,EAClB,OAAO,GAAE,oBAAyB,GACjC,mBAAmB,CAmUrB"}

package/dist/theme-designer.js

@@ -0,0 +1,336 @@
+/**
+ * Standalone theme designer: edits a NAMED theme entry
+ * (`{ name, label?, description?, tokens }` — the theme registry's shape,
+ * which is also what a host persists) with live preview against any
+ * catalog kind.
+ *
+ * Split from the widget designer on purpose: an app routes to "design a
+ * theme" and "design a widget" as separate destinations, and a host
+ * embedding one should not ship the other. Both share the preview
+ * controller, chrome, and store discipline.
+ */
+import { errorMessage } from "./internal.js";
+import { createCatalog } from "@widgentic/core";
+import { THEME_TOKENS, TOKEN_DEFAULTS, TOKEN_SPECS, isSafeTokenValue, validateTheme } from "@widgentic/core";
+import { diagnosticLine, h, injectDesignerStyles, section, textField, requireChild } from "./dom.js";
+import { createPreview } from "./preview.js";
+import { starterDraft } from "./store.js";
+const BASE_KINDS = createCatalog().kinds();
+/** Hex form the native color input accepts. */
+const HEX = /^#[0-9a-f]{3}([0-9a-f]{3})?$/i;
+const CUSTOM_NAME = /^x-[a-z0-9][a-z0-9-]*$/;
+function toHexInput(value) {
+    if (!HEX.test(value))
+        return undefined;
+    if (value.length === 7)
+        return value.toLowerCase();
+    const [, r, g, b] = value.toLowerCase();
+    return `#${r}${r}${g}${g}${b}${b}`;
+}
+function starterEntry() {
+    return { name: "my-theme", label: "My theme", tokens: {} };
+}
+/** Validate an untrusted entry; errors instead of throwing. */
+export function checkThemeEntry(entry) {
+    const errors = [];
+    if (typeof entry !== "object" || entry === null || Array.isArray(entry)) {
+        return ["Theme entry must be an object."];
+    }
+    const candidate = entry;
+    if (typeof candidate.name !== "string" || candidate.name.trim() === "") {
+        errors.push("'name' must be a non-empty string.");
+    }
+    const validated = validateTheme(candidate.tokens ?? {});
+    if (!validated.ok) {
+        errors.push(`tokens: ${validated.error.code} — ${validated.error.message}`);
+    }
+    return errors;
+}
+export function createThemeDesigner(container, options = {}) {
+    injectDesignerStyles(document);
+    let entry = options.initialTheme
+        ? JSON.parse(JSON.stringify(options.initialTheme))
+        : starterEntry();
+    const listeners = new Set();
+    const preview = createPreview(options.widgets ? { widgets: options.widgets } : {});
+    // Built-ins plus whatever custom definitions the host supplied.
+    const previewKinds = preview.kinds.length > 0 ? preview.kinds : BASE_KINDS;
+    let previewKind = previewKinds[0] ?? "card";
+    const panels = h("div", { class: "wgd-panels" });
+    const side = h("div", { class: "wgd-side" }, [preview.pane]);
+    const root = h("div", { class: "wgd-root wgd-theme-designer" }, [panels, side]);
+    if (options.appearance === "light" || options.appearance === "dark") {
+        root.setAttribute("data-wgd-theme", options.appearance);
+    }
+    container.appendChild(root);
+    /** A draft carrying only what the preview needs: kind + this theme. */
+    function previewDraft() {
+        return { ...starterDraft(), theme: entry.tokens };
+    }
+    function refresh() {
+        preview.update(previewDraft(), { styles: [], previewable: true }, previewKind);
+        for (const listener of [...listeners])
+            listener(getEntry());
+    }
+    function getEntry() {
+        return JSON.parse(JSON.stringify(entry));
+    }
+    function setToken(key, value) {
+        const tokens = { ...entry.tokens };
+        if (value === "")
+            delete tokens[key];
+        else
+            tokens[key] = value;
+        entry = { ...entry, tokens: tokens };
+        refresh();
+    }
+    // --- Identity panel ----------------------------------------------------
+    /** Bind a text field and register its refresher (import must update it). */
+    const identityRefreshers = [];
+    function identityField(label, read, write) {
+        const field = textField(label, read(), write);
+        const input = requireChild(field, "input");
+        identityRefreshers.push(() => {
+            if (document.activeElement !== input)
+                input.value = read();
+        });
+        return field;
+    }
+    const identity = section("Theme", [
+        identityField("Name (id)", () => entry.name, (value) => {
+            entry = { ...entry, name: value };
+            refresh();
+        }),
+        identityField("Label", () => entry.label ?? "", (value) => {
+            entry = { ...entry, label: value };
+            refresh();
+        }),
+        identityField("Description", () => entry.description ?? "", (value) => {
+            entry = { ...entry, description: value };
+            refresh();
+        })
+    ]);
+    // The kind selector is a PREVIEW control, so it lives beside the
+    // preview, outside the editing panels — read-only mode keeps it live.
+    const kindSelect = h("select", {
+        class: "wgd-select wgd-preview-kind"
+    });
+    for (const kind of previewKinds) {
+        kindSelect.append(h("option", { value: kind }, [kind]));
+    }
+    kindSelect.value = previewKind;
+    kindSelect.addEventListener("change", () => {
+        previewKind = kindSelect.value;
+        refresh();
+    });
+    side.prepend(h("div", { class: "wgd-row" }, [
+        h("span", { class: "wgd-field-label" }, ["Preview kind"]),
+        kindSelect
+    ]));
+    // --- Token panel -------------------------------------------------------
+    const tokenRefreshers = [];
+    const tokenRows = [];
+    for (const token of THEME_TOKENS) {
+        const input = h("input", {
+            type: "text",
+            class: "wgd-input",
+            placeholder: TOKEN_DEFAULTS[token]
+        });
+        input.value = entry.tokens[token] ?? "";
+        const issue = diagnosticLine(undefined);
+        // Control choice comes from the token's declared type — no guessing.
+        const swatch = TOKEN_SPECS[token].type === "color"
+            ? (h("input", {
+                type: "color",
+                class: "wgd-swatch",
+                title: `Pick --wg-${token}`
+            }))
+            : undefined;
+        const paint = (value) => {
+            const effective = value === "" ? TOKEN_DEFAULTS[token] : value;
+            if (swatch !== undefined) {
+                const hex = toHexInput(effective);
+                if (hex !== undefined)
+                    swatch.value = hex;
+                swatch.style.background = isSafeTokenValue(effective) ? effective : "transparent";
+            }
+        };
+        paint(input.value);
+        swatch?.addEventListener("input", () => {
+            input.value = swatch.value;
+            input.dispatchEvent(new Event("input", { bubbles: true }));
+        });
+        input.addEventListener("input", () => {
+            const unsafe = input.value !== "" && !isSafeTokenValue(input.value);
+            issue.hidden = !unsafe;
+            issue.textContent = unsafe
+                ? "INVALID_TOKEN_VALUE: unsafe value withheld from the preview (no ;{}<> url() expression())."
+                : "";
+            paint(input.value);
+            setToken(token, input.value);
+        });
+        tokenRefreshers.push(() => {
+            if (document.activeElement !== input) {
+                input.value = entry.tokens[token] ?? "";
+                paint(input.value);
+            }
+        });
+        tokenRows.push(h("div", undefined, [
+            h("label", { class: "wgd-field", title: TOKEN_SPECS[token].use }, [
+                h("span", { class: "wgd-field-label" }, [`--wg-${token}`]),
+                h("div", { class: "wgd-token-row" }, swatch === undefined ? [input] : [input, swatch])
+            ]),
+            issue
+        ]));
+    }
+    const tokenPanel = section("Tokens", tokenRows);
+    // --- Custom variables --------------------------------------------------
+    const customHost = h("div", { class: "wgd-jt-children" });
+    const customError = diagnosticLine(undefined);
+    function customEntries() {
+        return Object.entries(entry.tokens).filter(([key]) => CUSTOM_NAME.test(key));
+    }
+    function renderCustom() {
+        const rows = customEntries().map(([key, value]) => {
+            const nameInput = h("input", {
+                type: "text",
+                class: "wgd-input wgd-jt-keyinput"
+            });
+            nameInput.value = key;
+            nameInput.addEventListener("change", () => {
+                const next = nameInput.value;
+                if (!CUSTOM_NAME.test(next)) {
+                    customError.hidden = false;
+                    customError.textContent = `'${next}' is not a valid custom name — use x-<lowercase-kebab>.`;
+                    nameInput.value = key;
+                    return;
+                }
+                customError.hidden = true;
+                const tokens = { ...entry.tokens };
+                delete tokens[key];
+                tokens[next] = value;
+                entry = { ...entry, tokens: tokens };
+                renderCustom();
+                refresh();
+            });
+            const valueInput = h("input", {
+                type: "text",
+                class: "wgd-input"
+            });
+            valueInput.value = value;
+            valueInput.addEventListener("input", () => setToken(key, valueInput.value));
+            const remove = h("button", { class: "wgd-icon", type: "button", title: "Remove" }, ["✕"]);
+            remove.addEventListener("click", () => {
+                setToken(key, "");
+                renderCustom();
+            });
+            return h("div", { class: "wgd-attr-row" }, [nameInput, valueInput, remove]);
+        });
+        const add = h("button", { class: "wgd-button wgd-add", type: "button" }, [
+            "+ variable"
+        ]);
+        add.addEventListener("click", () => {
+            let name = "x-custom";
+            for (let i = 1; name in entry.tokens; i++)
+                name = `x-custom${i}`;
+            setToken(name, "0");
+            renderCustom();
+        });
+        customHost.replaceChildren(...rows, h("div", { class: "wgd-toolbar" }, [add]));
+    }
+    renderCustom();
+    const customPanel = section("Custom variables (--wg-x-*)", [
+        customHost,
+        customError
+    ]);
+    // --- Import / export ---------------------------------------------------
+    const output = h("textarea", {
+        class: "wgd-textarea",
+        rows: "8",
+        readonly: "",
+        spellcheck: "false"
+    });
+    const exportButton = h("button", { class: "wgd-button wgd-add", type: "button" }, [
+        "Export theme entry"
+    ]);
+    exportButton.addEventListener("click", () => {
+        output.value = JSON.stringify(getEntry(), null, 2);
+    });
+    const importArea = h("textarea", {
+        class: "wgd-textarea",
+        rows: "5",
+        spellcheck: "false"
+    });
+    const importError = diagnosticLine(undefined);
+    const importButton = h("button", { class: "wgd-button", type: "button" }, ["Import"]);
+    importButton.addEventListener("click", () => {
+        let parsed;
+        try {
+            parsed = JSON.parse(importArea.value);
+        }
+        catch (error) {
+            importError.hidden = false;
+            importError.textContent = `Invalid JSON: ${errorMessage(error)}`;
+            return;
+        }
+        const result = loadTheme(parsed);
+        importError.hidden = result.ok;
+        importError.textContent = result.ok ? "" : result.errors.join("\n");
+    });
+    // Two independent sections, import first — the same shape the widget
+    // designer uses, so both designers read alike.
+    const importPanel = section("Import", [
+        h("span", { class: "wgd-field-label" }, ["Import theme entry JSON"]),
+        importArea,
+        importError,
+        h("div", { class: "wgd-row" }, [importButton])
+    ]);
+    const exportPanel = section("Export", [
+        h("div", { class: "wgd-toolbar" }, [exportButton]),
+        output
+    ]);
+    exportPanel.classList.add("wgd-view-only");
+    panels.append(identity, tokenPanel, customPanel, importPanel, exportPanel);
+    function loadTheme(input) {
+        const errors = checkThemeEntry(input);
+        if (errors.length > 0)
+            return { ok: false, errors };
+        entry = JSON.parse(JSON.stringify(input));
+        for (const refreshIdentity of identityRefreshers)
+            refreshIdentity();
+        for (const refreshToken of tokenRefreshers)
+            refreshToken();
+        renderCustom();
+        refresh();
+        return { ok: true };
+    }
+    refresh();
+    /** Same mechanism as the widget designer: inert the section bodies. */
+    function setReadOnly(readOnly) {
+        root.classList.toggle("wgd-readonly", readOnly);
+        const bodies = [...panels.querySelectorAll(".wgd-section-body")].filter((body) => !body.parentElement?.classList.contains("wgd-view-only"));
+        for (const body of bodies) {
+            if (readOnly)
+                body.setAttribute("inert", "");
+            else
+                body.removeAttribute("inert");
+        }
+    }
+    if (options.readOnly === true)
+        setReadOnly(true);
+    return {
+        getTheme: getEntry,
+        loadTheme,
+        setReadOnly,
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+        dispose() {
+            listeners.clear();
+            preview.dispose();
+            root.remove();
+        }
+    };
+}
+//# sourceMappingURL=theme-designer.js.map

package/dist/theme-designer.js.map

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

package/dist/theme-panel.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Preview controls in the widget designer: which of the host-supplied
+ * named themes the DRAFT renders under — plus a read-only reference of
+ * the effective tokens, so style authoring can reach for
+ * `var(--wg-…)` by sight instead of memory.
+ *
+ * Theme *authoring* lives in the standalone theme designer — this panel
+ * only selects and displays. There is deliberately no preview-kind
+ * selector: the widget designer previews the draft, and previewing
+ * arbitrary kinds under a theme is the theme designer's job.
+ */
+import type { ThemeEntry } from "@widgentic/core";
+import type { DraftStore, WidgetDraft } from "./store.js";
+export declare function mountThemePanel(store: DraftStore, refreshers: ((draft: WidgetDraft) => void)[], themes?: ThemeEntry[]): {
+    element: HTMLElement;
+    /** Show the theme validator's error — this panel owns the value. */
+    setDiagnostic(message: string | undefined): void;
+    dispose(): void;
+};
+//# sourceMappingURL=theme-panel.d.ts.map

package/dist/theme-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-panel.d.ts","sourceRoot":"","sources":["../src/theme-panel.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE1D,wBAAgB,eAAe,CAC7B,KAAK,EAAE,UAAU,EACjB,UAAU,EAAE,CAAC,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC,EAAE,EAC5C,MAAM,GAAE,UAAU,EAAO,GACxB;IACD,OAAO,EAAE,WAAW,CAAC;IACrB,oEAAoE;IACpE,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACjD,OAAO,IAAI,IAAI,CAAC;CACjB,CAmGA"}

package/dist/theme-panel.js

@@ -0,0 +1,96 @@
+import { TOKEN_SPECS } from "@widgentic/core";
+import { diagnosticLine, h, section } from "./dom.js";
+export function mountThemePanel(store, refreshers, themes = []) {
+    // Theme validation errors were computed and dropped before this: the
+    // panel that owns the offending value showed nothing at all.
+    const themeDiag = diagnosticLine(undefined);
+    // Theme selector: "none" plus whatever the host supplied.
+    const themeSelect = h("select", {
+        class: "wgd-select wgd-theme-select"
+    });
+    themeSelect.append(h("option", { value: "" }, ["(none — defaults)"]));
+    for (const entry of themes) {
+        themeSelect.append(h("option", { value: entry.name }, [entry.label ?? entry.name]));
+    }
+    themeSelect.addEventListener("change", () => {
+        const entry = themes.find((candidate) => candidate.name === themeSelect.value);
+        store.update((draft) => {
+            if (entry === undefined) {
+                const { theme: _gone, ...rest } = draft;
+                return rest;
+            }
+            return { ...draft, theme: entry.tokens };
+        });
+    });
+    // Token reference: the EFFECTIVE preview tokens — the selected entry
+    // merged over the registry defaults — plus the entry's x-* customs.
+    // Types come from TOKEN_SPECS metadata (color → swatch), never inferred.
+    const tokenList = h("div", { class: "wgd-token-ref" });
+    function renderTokenReference(theme) {
+        tokenList.replaceChildren();
+        for (const [name, spec] of Object.entries(TOKEN_SPECS)) {
+            const value = theme?.[name] ?? spec.default;
+            const row = h("div", { class: "wgd-token-ref-row", title: spec.use }, [
+                spec.type === "color"
+                    ? h("span", {
+                        class: "wgd-token-ref-swatch",
+                        style: `background: ${value}`
+                    })
+                    : h("span", { class: "wgd-token-ref-swatch wgd-token-ref-noswatch" }),
+                h("code", { class: "wgd-token-ref-name" }, [`--wg-${name}`]),
+                h("span", { class: "wgd-token-ref-value" }, [value])
+            ]);
+            tokenList.append(row);
+        }
+        for (const [name, value] of Object.entries(theme ?? {})) {
+            if (!name.startsWith("x-"))
+                continue;
+            const row = h("div", { class: "wgd-token-ref-row", title: "Custom variable" }, [
+                h("span", { class: "wgd-token-ref-swatch wgd-token-ref-noswatch" }),
+                h("code", { class: "wgd-token-ref-name" }, [`--wg-${name}`]),
+                h("span", { class: "wgd-token-ref-value" }, [value])
+            ]);
+            tokenList.append(row);
+        }
+    }
+    renderTokenReference(store.get().theme);
+    refreshers.push((draft) => {
+        // Reflect programmatic theme loads; an unrecognized map shows as none.
+        if (draft.theme === undefined) {
+            themeSelect.value = "";
+        }
+        else {
+            const match = themes.find((entry) => JSON.stringify(entry.tokens) === JSON.stringify(draft.theme));
+            themeSelect.value = match?.name ?? "";
+        }
+        renderTokenReference(draft.theme);
+    });
+    const rows = [
+        h("div", { class: "wgd-row" }, [
+            h("span", { class: "wgd-field-label" }, ["Preview theme"]),
+            themeSelect
+        ]),
+        h("span", { class: "wgd-field-label" }, [
+            themes.length === 0
+                ? "No themes supplied by the host — design themes in the theme designer."
+                : "Themes come from the host; edit them in the theme designer."
+        ]),
+        themeDiag,
+        h("details", { class: "wgd-token-ref-details" }, [
+            h("summary", { class: "wgd-field-label" }, [
+                "Theme tokens (reference for styles)"
+            ]),
+            tokenList
+        ])
+    ];
+    const element = section("Preview", rows);
+    return {
+        element,
+        setDiagnostic(message) {
+            themeDiag.hidden = message === undefined;
+            themeDiag.textContent = message ?? "";
+        },
+        dispose: () => element.remove()
+    };
+}
+//# sourceMappingURL=theme-panel.js.map

package/dist/theme-panel.js.map

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

package/dist/validate.d.ts

@@ -0,0 +1,57 @@
+import type { WidgetContractError } from "@widgentic/core";
+import type { ThemeError } from "@widgentic/core";
+import type { WidgetDraft } from "./store.js";
+export interface TemplateIssue {
+    code: string;
+    message: string;
+    /** Node path when the validator reports one. */
+    path?: string;
+}
+export interface StyleIssue {
+    selector: string;
+    property?: string;
+    message: string;
+}
+export interface DesignerDiagnostics {
+    /** Problem with the kind id itself (empty, or colliding with a base kind). */
+    kind?: string;
+    template?: TemplateIssue;
+    /** `descriptor.dataExample` vs `descriptor.dataSchema`. */
+    example?: WidgetContractError;
+    /** `sampleData` vs `descriptor.dataSchema`. */
+    sample?: WidgetContractError;
+    /** Entries the renderer's safety filters would skip. */
+    styles: StyleIssue[];
+    theme?: ThemeError;
+    /** Shared-schema reference problems (unknown ref, or ref + inline). */
+    schemaRef?: string;
+    /** The widget-level `load` binding failed validation. */
+    load?: string;
+    /** Shared actions referenced by the template or `load` that are not among the supplied ones. */
+    actionRefs?: string;
+    /** True when the draft can be registered and previewed. */
+    previewable: boolean;
+}
+/** Host-supplied shared schemas the draft may reference by name. */
+export interface DeriveOptions {
+    schemas?: {
+        name: string;
+        schema: Record<string, unknown>;
+    }[];
+    /** Host-supplied shared actions the draft may bind by name. */
+    actions?: {
+        name: string;
+    }[];
+}
+/**
+ * The schema validation actually runs against: the inline one, or the
+ * referenced shared one resolved from the supplied list — the same join
+ * the server's composition performs.
+ */
+export declare function effectiveDataSchema(draft: WidgetDraft, schemas?: {
+    name: string;
+    schema: Record<string, unknown>;
+}[]): Record<string, unknown> | undefined;
+/** Run every validator; total — never throws on any draft shape. */
+export declare function deriveDiagnostics(draft: WidgetDraft, options?: DeriveOptions): DesignerDiagnostics;
+//# sourceMappingURL=validate.d.ts.map

package/dist/validate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validate.d.ts","sourceRoot":"","sources":["../src/validate.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAI3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,8EAA8E;IAC9E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,+CAA+C;IAC/C,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,wDAAwD;IACxD,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gGAAgG;IAChG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2DAA2D;IAC3D,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,oEAAoE;AACpE,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,EAAE,CAAC;IAC9D,+DAA+D;IAC/D,OAAO,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC9B;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,WAAW,EAClB,OAAO,GAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAAE,EAAO,GAChE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAOrC;AA0CD,oEAAoE;AACpE,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,WAAW,EAClB,OAAO,GAAE,aAAkB,GAC1B,mBAAmB,CAuErB"}