@widgentic/designer 0.1.0

package/dist/browser.d.ts

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

package/dist/browser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser.d.ts","sourceRoot":"","sources":["../src/browser.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,CAAC"}

package/dist/browser.js

@@ -0,0 +1,12 @@
+/**
+ * Browser bundle entry (`@widgentic/designer/browser`): loading this module
+ * from a <script type="module"> registers the designer custom elements, so a
+ * page without a bundler can host the designers. Bundler users import the
+ * package root instead.
+ */
+import { defineActionDesignerElement, defineDesignerElement, defineSchemaDesignerElement, defineThemeDesignerElement } from "./index.js";
+defineActionDesignerElement();
+defineDesignerElement();
+defineSchemaDesignerElement();
+defineThemeDesignerElement();
+//# sourceMappingURL=browser.js.map

package/dist/browser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser.js","sourceRoot":"","sources":["../src/browser.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,2BAA2B,EAAE,qBAAqB,EAAE,2BAA2B,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAEzI,2BAA2B,EAAE,CAAC;AAC9B,qBAAqB,EAAE,CAAC;AACxB,2BAA2B,EAAE,CAAC;AAC9B,0BAA0B,EAAE,CAAC"}

package/dist/dom.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Tiny DOM helpers for the designer chrome — the same hand-rolled
+ * discipline as the rest of the project, sized for form-heavy panels.
+ * Designer chrome classes are prefixed `wgd-` (widget content inside the
+ * preview keeps the normal `wg-` classes).
+ */
+export type Child = Node | string;
+/** The first `<selector>` under `parent`, which the caller's own markup guarantees exists. */
+export declare function requireChild<K extends keyof HTMLElementTagNameMap>(parent: ParentNode, selector: K): HTMLElementTagNameMap[K];
+export declare function h<K extends keyof HTMLElementTagNameMap>(tag: K, attrs?: Record<string, string>, children?: Child[]): HTMLElementTagNameMap[K];
+export declare function h(tag: string, attrs?: Record<string, string>, children?: Child[]): HTMLElement;
+/** Labeled single-line input bound through a callback. */
+export declare function textField(label: string, value: string, onInput: (value: string) => void): HTMLElement;
+/** Labeled multi-line textarea bound through a callback. */
+export declare function textArea(label: string, value: string, onInput: (value: string) => void, rows?: number): HTMLElement;
+/** Collapsible titled section (open by default). */
+export declare function section(title: string, children: Child[], open?: boolean): HTMLElement;
+/**
+ * Size a select to its SELECTED label (a bare <select> sizes to its
+ * widest option, or to whatever flex hands it), so the caret sits beside
+ * the text instead of drifting with leftover row width. ch tracks
+ * monospace text exactly; the em term scales with padding, and the px
+ * term covers the UA's caret region, which does NOT scale with font size
+ * (11px selects clip under a pure em term). Re-fits on change.
+ */
+export declare function fitSelect(select: HTMLSelectElement): void;
+/**
+ * Compact add-menu: one toggle button revealing the options on demand —
+ * the tree stays calm instead of carrying a button per option at every
+ * level. Closes on pick, outside pointer-down, or Escape.
+ */
+export declare function menuButton(label: string, title: string, options: string[], onPick: (option: string) => void): HTMLElement;
+/** Inline diagnostic line (empty text removes it from the flow). */
+export declare function diagnosticLine(text: string | undefined): HTMLElement;
+/** Designer chrome stylesheet — injected once per document. */
+export declare function injectDesignerStyles(doc: Document): void;
+//# sourceMappingURL=dom.d.ts.map

package/dist/dom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,MAAM,KAAK,GAAG,IAAI,GAAG,MAAM,CAAC;AAElC,8FAA8F;AAC9F,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,qBAAqB,EAChE,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,CAAC,GACV,qBAAqB,CAAC,CAAC,CAAC,CAI1B;AAED,wBAAgB,CAAC,CAAC,CAAC,SAAS,MAAM,qBAAqB,EACrD,GAAG,EAAE,CAAC,EACN,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9B,QAAQ,CAAC,EAAE,KAAK,EAAE,GACjB,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAC5B,wBAAgB,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAG,WAAW,CAAC;AAgBhG,0DAA0D;AAC1D,wBAAgB,SAAS,CACvB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAC/B,WAAW,CAQb;AAED,4DAA4D;AAC5D,wBAAgB,QAAQ,CACtB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,EAChC,IAAI,SAAI,GACP,WAAW,CAcb;AAED,oDAAoD;AACpD,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,IAAI,UAAO,GAAG,WAAW,CAOlF;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAOzD;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,MAAM,EAAE,EACjB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,GAC/B,WAAW,CA6Cb;AAED,oEAAoE;AACpE,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,CAIpE;AAID,+DAA+D;AAC/D,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CA6PxD"}

package/dist/dom.js

@@ -0,0 +1,387 @@
+/**
+ * Tiny DOM helpers for the designer chrome — the same hand-rolled
+ * discipline as the rest of the project, sized for form-heavy panels.
+ * Designer chrome classes are prefixed `wgd-` (widget content inside the
+ * preview keeps the normal `wg-` classes).
+ */
+/** The first `<selector>` under `parent`, which the caller's own markup guarantees exists. */
+export function requireChild(parent, selector) {
+    const found = parent.querySelector(selector);
+    if (found === null)
+        throw new Error(`Designer chrome is missing a <${selector}> element.`);
+    return found;
+}
+export function h(tag, attrs, children) {
+    const element = document.createElement(tag);
+    if (attrs) {
+        for (const [name, value] of Object.entries(attrs)) {
+            element.setAttribute(name, value);
+        }
+    }
+    if (children) {
+        for (const child of children) {
+            element.append(child);
+        }
+    }
+    return element;
+}
+/** Labeled single-line input bound through a callback. */
+export function textField(label, value, onInput) {
+    const input = h("input", { type: "text", class: "wgd-input" });
+    input.value = value;
+    input.addEventListener("input", () => onInput(input.value));
+    return h("label", { class: "wgd-field" }, [
+        h("span", { class: "wgd-field-label" }, [label]),
+        input
+    ]);
+}
+/** Labeled multi-line textarea bound through a callback. */
+export function textArea(label, value, onInput, rows = 6) {
+    const area = h("textarea", {
+        class: "wgd-textarea",
+        rows: String(rows),
+        spellcheck: "false"
+    });
+    area.value = value;
+    area.addEventListener("input", () => onInput(area.value));
+    // An empty label means the surrounding chrome already names the field —
+    // no legend row.
+    return h("label", { class: "wgd-field" }, [
+        ...(label === "" ? [] : [h("span", { class: "wgd-field-label" }, [label])]),
+        area
+    ]);
+}
+/** Collapsible titled section (open by default). */
+export function section(title, children, open = true) {
+    const attrs = { class: "wgd-section" };
+    if (open)
+        attrs.open = "";
+    return h("details", attrs, [
+        h("summary", { class: "wgd-section-title" }, [title]),
+        h("div", { class: "wgd-section-body" }, children)
+    ]);
+}
+/**
+ * Size a select to its SELECTED label (a bare <select> sizes to its
+ * widest option, or to whatever flex hands it), so the caret sits beside
+ * the text instead of drifting with leftover row width. ch tracks
+ * monospace text exactly; the em term scales with padding, and the px
+ * term covers the UA's caret region, which does NOT scale with font size
+ * (11px selects clip under a pure em term). Re-fits on change.
+ */
+export function fitSelect(select) {
+    const fit = () => {
+        const label = select.options[select.selectedIndex]?.text ?? select.value;
+        select.style.width = `calc(${Math.max(label.length, 1)}ch + 1.2em + 18px)`;
+    };
+    fit();
+    select.addEventListener("change", fit);
+}
+/**
+ * Compact add-menu: one toggle button revealing the options on demand —
+ * the tree stays calm instead of carrying a button per option at every
+ * level. Closes on pick, outside pointer-down, or Escape.
+ */
+export function menuButton(label, title, options, onPick) {
+    const wrap = h("span", { class: "wgd-menuwrap" });
+    const toggle = h("button", { class: "wgd-icon wgd-menu-toggle", type: "button", title }, [label]);
+    const menu = h("div", { class: "wgd-menu" });
+    menu.hidden = true;
+    const close = () => {
+        menu.hidden = true;
+        document.removeEventListener("pointerdown", onOutside, true);
+        document.removeEventListener("keydown", onKey, true);
+    };
+    const onOutside = (event) => {
+        if (!wrap.contains(event.target))
+            close();
+    };
+    const onKey = (event) => {
+        if (event.key === "Escape")
+            close();
+    };
+    toggle.addEventListener("click", () => {
+        if (!menu.hidden) {
+            close();
+            return;
+        }
+        menu.hidden = false;
+        document.addEventListener("pointerdown", onOutside, true);
+        document.addEventListener("keydown", onKey, true);
+    });
+    for (const option of options) {
+        const item = h("button", { class: "wgd-menu-item", type: "button" }, [option]);
+        item.addEventListener("click", () => {
+            close();
+            onPick(option);
+        });
+        menu.append(item);
+    }
+    wrap.append(toggle, menu);
+    return wrap;
+}
+/** Inline diagnostic line (empty text removes it from the flow). */
+export function diagnosticLine(text) {
+    const el = h("div", { class: "wgd-diagnostic" }, text === undefined ? [] : [text]);
+    if (text === undefined)
+        el.setAttribute("hidden", "");
+    return el;
+}
+const STYLE_MARKER = "data-widgentic-designer";
+/** Designer chrome stylesheet — injected once per document. */
+export function injectDesignerStyles(doc) {
+    if (doc.head.querySelector(`style[${STYLE_MARKER}]`))
+        return;
+    const style = doc.createElement("style");
+    style.setAttribute(STYLE_MARKER, "chrome");
+    style.textContent = `
+/* Chrome palette — light values, overridden for dark below. Widget
+   content inside the preview keeps its own --wg-* theme tokens. */
+.wgd-root {
+  --wgd-bg: #ffffff; --wgd-panel: #fbfcfe; --wgd-border: #d5dbe3;
+  --wgd-line: #e2e8f0; --wgd-text: #1f2430; --wgd-muted: #5b6472;
+  --wgd-accent: #2563eb; --wgd-accent-bg: #e8eef9; --wgd-accent-line: #b9c9e8;
+  --wgd-danger: #b91c1c; --wgd-danger-bg: #fdf2f2; --wgd-danger-line: #f0b4b4;
+  --wgd-hover: #eef2f7;
+  --wgd-hl-key: #0b5fa5; --wgd-hl-str: #0a7a3d; --wgd-hl-num: #b45309;
+  --wgd-hl-bool: #7c3aed; --wgd-hl-punct: #7a8494;
+}
+@media (prefers-color-scheme: dark) {
+  .wgd-root:not([data-wgd-theme="light"]) {
+    --wgd-bg: #0f131c; --wgd-panel: #161b26; --wgd-border: #2a3140;
+    --wgd-line: #232a37; --wgd-text: #e5e9f0; --wgd-muted: #96a0b5;
+    --wgd-accent: #7aa2f7; --wgd-accent-bg: #1c2740; --wgd-accent-line: #35507f;
+    --wgd-danger: #f0a3a3; --wgd-danger-bg: #2a1a1c; --wgd-danger-line: #5c2b2b;
+    --wgd-hover: #1e2532;
+    --wgd-hl-key: #7aa2f7; --wgd-hl-str: #9ece6a; --wgd-hl-num: #ff9e64;
+    --wgd-hl-bool: #bb9af7; --wgd-hl-punct: #8b94a7;
+  }
+}
+.wgd-root[data-wgd-theme="dark"] {
+  --wgd-bg: #0f131c; --wgd-panel: #161b26; --wgd-border: #2a3140;
+  --wgd-line: #232a37; --wgd-text: #e5e9f0; --wgd-muted: #96a0b5;
+  --wgd-accent: #7aa2f7; --wgd-accent-bg: #1c2740; --wgd-accent-line: #35507f;
+  --wgd-danger: #f0a3a3; --wgd-danger-bg: #2a1a1c; --wgd-danger-line: #5c2b2b;
+  --wgd-hover: #1e2532;
+  --wgd-hl-key: #7aa2f7; --wgd-hl-str: #9ece6a; --wgd-hl-num: #ff9e64;
+  --wgd-hl-bool: #bb9af7; --wgd-hl-punct: #8b94a7;
+}
+.wgd-root { display: flex; gap: 16px; font-family: system-ui, sans-serif; font-size: 13px; align-items: flex-start; color: var(--wgd-text); background: var(--wgd-bg); }
+/* Any chrome class that sets display would silently defeat the hidden
+   attribute (learned live twice: the add menu, then the styles tree as a
+   tab pane). hidden always wins — scoped to the designer's own tree. */
+.wgd-root [hidden] { display: none !important; }
+/* Read-only: editing surfaces are inert (visible, inoperable) and read
+   de-emphasized; the preview and its selectors stay full-strength. The
+   controls flatten into plain values — a form that cannot be typed in
+   should not look like a form (opacity alone was invisible on dark). */
+.wgd-readonly .wgd-section-body[inert] { opacity: 0.75; }
+/* Empty preview state — shown only when there has never been a valid
+   render to freeze on; a blank pane is the one state the contract bans. */
+.wgd-preview-empty { color: var(--wgd-muted); font-style: italic; font-size: 12px; }
+.wgd-readonly [inert] .wgd-input,
+.wgd-readonly [inert] .wgd-select,
+.wgd-readonly [inert] .wgd-textarea,
+.wgd-readonly [inert] textarea.wgd-hl-input {
+  border-color: transparent; background: transparent; box-shadow: none;
+}
+.wgd-readonly [inert] .wgd-hl { background: transparent; }
+/* Controls that only exist to mutate carry no meaning here. */
+.wgd-readonly [inert] .wgd-button,
+.wgd-readonly [inert] .wgd-icon,
+.wgd-readonly [inert] .wgd-add,
+.wgd-readonly [inert] input[type="checkbox"] { opacity: 0.4; }
+.wgd-panels { flex: 1 1 460px; min-width: 340px; display: flex; flex-direction: column; gap: 8px; }
+.wgd-side { flex: 1 1 420px; min-width: 320px; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 8px; }
+.wgd-preview-pane { display: flex; flex-direction: column; gap: 8px; }
+.wgd-section { border: 1px solid var(--wgd-border); border-radius: 6px; padding: 6px 10px; background: var(--wgd-panel); }
+.wgd-section-title { cursor: pointer; font-weight: 600; }
+.wgd-section-body { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
+.wgd-field { display: flex; flex-direction: column; gap: 2px; }
+.wgd-field-label { color: var(--wgd-muted); font-size: 12px; }
+.wgd-input, .wgd-textarea, .wgd-select { font: inherit; padding: 4px 6px; border: 1px solid var(--wgd-border); border-radius: 4px; background: var(--wgd-bg); color: var(--wgd-text); }
+/* Textareas fill their panel regardless of the intrinsic cols width. */
+.wgd-textarea { font-family: ui-monospace, monospace; white-space: pre; width: 100%; box-sizing: border-box; min-width: 0; resize: vertical; }
+.wgd-preview .wg-designer-action { position: relative; outline: 1px dashed var(--wgd-muted, #6b7280); outline-offset: 2px; }
+.wgd-preview .wg-designer-action::after { content: "⚡ action"; position: absolute; top: -0.9em; right: 0; font: 10px system-ui, sans-serif; color: var(--wgd-muted, #6b7280); background: var(--wgd-panel, #fbfcfe); padding: 0 4px; border-radius: 3px; pointer-events: none; }
+.wgd-binding { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; border: 1px dashed var(--wgd-border, #d5dbe3); border-radius: 4px; margin: 4px 0; }
+.wgd-binding-field { min-width: 8ch; font-family: ui-monospace, monospace; font-size: 12px; }
+.wgd-action-definition { display: flex; flex-direction: column; gap: 6px; }
+.wgd-action-schema { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
+.wgd-test-output { font: 12px ui-monospace, monospace; white-space: pre-wrap; word-break: break-all; max-height: 240px; overflow: auto; margin: 6px 0 0; }
+.wgd-diagnostic { color: var(--wgd-danger); font-size: 12px; white-space: pre-wrap; }
+.wgd-banner { border: 1px solid var(--wgd-danger-line); background: var(--wgd-danger-bg); color: var(--wgd-danger); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; }
+/* The preview is the WIDGET's surface, not chrome: it establishes the
+   --wg-* context (like composePage does for page output) so widget content
+   — including custom kinds the base stylesheet doesn't color — never
+   inherits the designer's own text/background. */
+.wgd-preview { border: 1px dashed var(--wgd-border); border-radius: 6px; padding: 16px; background: var(--wg-bg, #ffffff); color: var(--wg-fg, #1f2430); }
+.wgd-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.wgd-button { font: inherit; padding: 4px 10px; border: 1px solid var(--wgd-border); border-radius: 4px; background: var(--wgd-bg); color: var(--wgd-text); cursor: pointer; }
+.wgd-button:hover { background: var(--wgd-hover); }
+.wgd-tab-active { background: var(--wgd-accent-bg); border-color: var(--wgd-accent); }
+/* Shared tree/editor chrome (JSON tree, schema builder/form, template tree) */
+.wgd-jt-children, .wgd-children { margin-left: 10px; padding-left: 10px; border-left: 2px solid var(--wgd-line); display: flex; flex-direction: column; gap: 4px; }
+.wgd-jt-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
+.wgd-jt-entry { padding: 2px 0; }
+.wgd-jt-key { font-family: ui-monospace, monospace; color: var(--wgd-muted); min-width: 2ch; }
+.wgd-jt-keyinput, .wgd-jt-type { max-width: 12ch; }
+.wgd-jt-summary { cursor: pointer; color: var(--wgd-muted); font-size: 12px; }
+.wgd-sf-object { border: 1px solid var(--wgd-line); border-radius: 6px; padding: 6px 10px; margin: 4px 0; }
+/* Schema builder: property name + type + required on one row. */
+.wgd-sb-node { margin-left: 8px; padding: 1px 0 1px 8px; border-left: 2px solid var(--wgd-line); }
+.wgd-sb-row { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; padding: 1px 0; }
+.wgd-sb-constraints { padding-left: 12px; }
+.wgd-sb-label { color: var(--wgd-muted); font-size: 11px; flex: 0 0 auto; }
+.wgd-sb-prop { flex: 1 1 auto; min-width: 6ch; font-family: ui-monospace, monospace; }
+.wgd-sb-type { flex: 0 0 auto; max-width: 11ch; font-size: 12px; }
+.wgd-sb-req { display: flex; gap: 2px; align-items: center; color: var(--wgd-muted); font-size: 11px; flex: 0 0 auto; }
+.wgd-sb-constraint { flex: 1 1 auto; min-width: 6ch; font-size: 12px; }
+.wgd-sb-root { padding: 2px 0 2px 8px; border-left: 2px solid transparent; }
+/* Schema builder: the template tree's flat discipline — chrome on
+   hover/focus only, removal revealed by the row, fitted type selects. */
+.wgd-schemabuilder .wgd-input, .wgd-schemabuilder .wgd-select { padding: 1px 4px; font-size: 12px; border-color: transparent; background: transparent; }
+.wgd-schemabuilder .wgd-input:hover, .wgd-schemabuilder .wgd-select:hover,
+.wgd-schemabuilder .wgd-input:focus, .wgd-schemabuilder .wgd-select:focus { border-color: var(--wgd-border); background: var(--wgd-bg); }
+.wgd-schemabuilder .wgd-sb-type { flex: 0 0 auto; box-sizing: border-box; max-width: none; color: var(--wgd-accent); }
+.wgd-schemabuilder .wgd-sb-prop { font-size: 12px; color: var(--wgd-hl-key); }
+.wgd-sb-row { border-radius: 3px; }
+.wgd-sb-row:hover { background: var(--wgd-hover); }
+.wgd-sb-row > .wgd-icon { visibility: hidden; }
+.wgd-sb-row:hover > .wgd-icon, .wgd-sb-row:focus-within > .wgd-icon { visibility: visible; }
+.wgd-schemabuilder .wgd-button { font-size: 11px; padding: 0 6px; border-color: transparent; color: var(--wgd-accent); background: none; }
+.wgd-schemabuilder .wgd-button:hover { border-color: var(--wgd-border); background: var(--wgd-hover); }
+.wgd-remove { color: var(--wgd-danger); }
+/* Breathing room between a tab strip and its active pane. */
+.wgd-tabs > .wgd-row { margin-bottom: 6px; }
+/* Template tree: one node = one slim row; sub-structure indents below.
+   Controls stay flat (chrome appears on hover/focus) so a deep template
+   reads like the JSON it projects, not like a form. */
+.wgd-node { padding: 0 0 0 4px; }
+.wgd-node-row { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; padding: 1px 0; border-radius: 3px; }
+.wgd-node-row:hover { background: var(--wgd-hover); }
+.wgd-node-badge { font-family: ui-monospace, monospace; font-size: 11px; color: var(--wgd-accent); background: var(--wgd-accent-bg); border-radius: 3px; padding: 0 5px; flex: 0 0 auto; }
+.wgd-node-icons { display: flex; gap: 2px; margin-left: auto; flex: 0 0 auto; visibility: hidden; }
+.wgd-node-row:hover > .wgd-node-icons, .wgd-node-row:focus-within > .wgd-node-icons { visibility: visible; }
+.wgd-node-value { flex: 1 1 auto; min-width: 4ch; }
+.wgd-icon { font: inherit; font-size: 11px; line-height: 1.4; padding: 0 5px; border: 1px solid var(--wgd-border); border-radius: 3px; background: var(--wgd-bg); cursor: pointer; color: var(--wgd-muted); }
+.wgd-icon:hover { background: var(--wgd-hover); }
+/* Compact controls: inside tree nodes, and wherever a section opts in with
+   .wgd-compact (the Load action editor mirrors an element's binding editor). */
+.wgd-node .wgd-input, .wgd-node .wgd-select,
+.wgd-compact .wgd-input, .wgd-compact .wgd-select { padding: 1px 4px; font-size: 12px; border-color: transparent; background: transparent; }
+.wgd-node .wgd-input:hover, .wgd-node .wgd-select:hover, .wgd-compact .wgd-input:hover, .wgd-compact .wgd-select:hover,
+.wgd-node .wgd-input:focus, .wgd-node .wgd-select:focus, .wgd-compact .wgd-input:focus, .wgd-compact .wgd-select:focus { border-color: var(--wgd-border); background: var(--wgd-bg); }
+.wgd-compact .wgd-binding { border: none; padding: 0; }
+/* Busy controls (the host-supplied Test call): disabled, with a spinner. */
+.wgd-button.wgd-busy { opacity: 0.7; cursor: progress; }
+.wgd-button.wgd-busy::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 6px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -1px; animation: wgd-spin 0.8s linear infinite; }
+@keyframes wgd-spin { to { transform: rotate(360deg); } }
+.wgd-tagwrap, .wgd-pathwrap { display: contents; }
+/* Collapse chevron: every tree row reserves the column so values align. */
+.wgd-chevron { flex: 0 0 auto; width: 16px; padding: 0; border: none; background: none; color: var(--wgd-muted); font-size: 10px; cursor: pointer; }
+.wgd-chevron-none { visibility: hidden; }
+.wgd-node-summary { color: var(--wgd-muted); font-size: 11px; flex: 0 0 auto; }
+/* Attrs vs children: attributes group under a dotted muted rail with
+   key-colored names; children keep the solid accent rail. */
+.wgd-attrs { margin-left: 14px; padding-left: 8px; border-left: 2px dotted var(--wgd-border); display: flex; flex-direction: column; gap: 1px; }
+.wgd-attr-row { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; padding: 0; }
+.wgd-attr-row > .wgd-icon { visibility: hidden; }
+.wgd-attr-row:hover > .wgd-icon, .wgd-attr-row:focus-within > .wgd-icon { visibility: visible; }
+.wgd-attr-name { font-family: ui-monospace, monospace; color: var(--wgd-hl-key); flex: 0 1 auto; min-width: 5ch; }
+.wgd-attr-prefix { flex: 0 1 auto; min-width: 6ch; max-width: 10ch; font-family: ui-monospace, monospace; color: var(--wgd-hl-str); }
+.wgd-attr { display: flex; flex-direction: column; gap: 1px; }
+/* Transform block under a bind attr: one more dotted level in. */
+.wgd-attr-map { margin-left: 24px; padding-left: 8px; border-left: 2px dotted var(--wgd-border); display: flex; flex-direction: column; gap: 1px; }
+.wgd-attr-map-default { flex: 1 1 auto; min-width: 8ch; }
+.wgd-attr-mode { flex: 0 0 auto; color: var(--wgd-muted); font-size: 11px; }
+.wgd-children { margin-left: 14px; padding-left: 8px; border-left: 2px solid var(--wgd-accent-line); gap: 1px; }
+.wgd-slot { display: flex; flex-direction: column; gap: 1px; }
+.wgd-slot-label { color: var(--wgd-muted); font-size: 11px; font-style: italic; padding-left: 4px; }
+/* Add menu: one toggle, options in a popover. */
+.wgd-menuwrap { position: relative; display: inline-flex; }
+.wgd-menu-toggle { color: var(--wgd-accent); }
+.wgd-menu { position: absolute; top: 100%; left: 0; z-index: 10; min-width: 9ch; display: flex; flex-direction: column; background: var(--wgd-panel); border: 1px solid var(--wgd-border); border-radius: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); padding: 2px; }
+/* An OPEN menu must not inherit the icons' hover-gated visibility:
+   visibility (unlike display) lets a child re-assert visible. */
+.wgd-menu:not([hidden]) { visibility: visible; }
+.wgd-menuwrap:has(> .wgd-menu:not([hidden])) { visibility: visible; }
+/* Menus in the right-aligned icons area hang leftward, not off-panel. */
+.wgd-node-icons .wgd-menu { left: auto; right: 0; }
+.wgd-menu-item { font: inherit; font-size: 12px; text-align: left; padding: 3px 8px; border: none; border-radius: 3px; background: none; color: var(--wgd-text); cursor: pointer; white-space: nowrap; }
+.wgd-menu-item:hover { background: var(--wgd-accent-bg); color: var(--wgd-accent); }
+/* Styles tree: selector rows with declaration rows — the same flat
+   template-tree discipline (flat inputs, hover-revealed icons). */
+.wgd-styles { display: flex; flex-direction: column; gap: 2px; }
+.wgd-st-row { display: flex; gap: 4px; align-items: center; border-radius: 3px; }
+.wgd-st-row:hover { background: var(--wgd-hover); }
+.wgd-st-row:hover > .wgd-node-icons, .wgd-st-row:focus-within > .wgd-node-icons { visibility: visible; }
+.wgd-styles .wgd-input { padding: 1px 4px; font-size: 12px; font-family: ui-monospace, monospace; border-color: transparent; background: transparent; }
+.wgd-styles .wgd-input:hover, .wgd-styles .wgd-input:focus { border-color: var(--wgd-border); background: var(--wgd-bg); }
+.wgd-st-selector { flex: 1 1 auto; min-width: 8ch; color: var(--wgd-accent); }
+.wgd-st-decls { margin-left: 14px; padding-left: 8px; border-left: 2px dotted var(--wgd-border); display: flex; flex-direction: column; gap: 1px; }
+.wgd-st-decl { display: flex; gap: 2px; align-items: center; border-radius: 3px; }
+.wgd-st-decl:hover { background: var(--wgd-hover); }
+.wgd-st-decl > .wgd-icon { visibility: hidden; }
+.wgd-st-decl:hover > .wgd-icon, .wgd-st-decl:focus-within > .wgd-icon { visibility: visible; }
+.wgd-st-prop { flex: 0 1 auto; min-width: 8ch; color: var(--wgd-hl-key); }
+.wgd-st-value { flex: 1 1 auto; min-width: 8ch; }
+.wgd-st-colon { color: var(--wgd-muted); flex: 0 0 auto; }
+.wgd-st-add { font-size: 11px; padding: 0 6px; border-color: transparent; color: var(--wgd-accent); background: none; }
+.wgd-st-add:hover { border-color: var(--wgd-border); background: var(--wgd-hover); }
+/* Import and export stack as sibling sections with the column's rhythm. */
+.wgd-io { display: flex; flex-direction: column; gap: 8px; }
+/* Flat string→string record rows (hints): mono keys, prose values. */
+.wgd-record { display: flex; flex-direction: column; gap: 1px; }
+.wgd-rec-row { display: flex; gap: 2px; align-items: center; border-radius: 3px; }
+.wgd-rec-row:hover { background: var(--wgd-hover); }
+.wgd-rec-row > .wgd-icon { visibility: hidden; }
+.wgd-rec-row:hover > .wgd-icon, .wgd-rec-row:focus-within > .wgd-icon { visibility: visible; }
+.wgd-record .wgd-input { padding: 1px 4px; font-size: 12px; border-color: transparent; background: transparent; }
+.wgd-record .wgd-input:hover, .wgd-record .wgd-input:focus { border-color: var(--wgd-border); background: var(--wgd-bg); }
+.wgd-rec-key { flex: 0 1 auto; min-width: 8ch; font-family: ui-monospace, monospace; color: var(--wgd-hl-key); }
+.wgd-rec-value { flex: 1 1 auto; min-width: 8ch; }
+/* The tag select IS the element node's label: flat, accent, monospace.
+   Tag and path selects are width-fitted to their SELECTED value by the
+   panel (fitSelect), so carets hug the text — no flex stretching here. */
+.wgd-node .wgd-tag { flex: 0 0 auto; font-family: ui-monospace, monospace; font-size: 11px; color: var(--wgd-accent); background: var(--wgd-accent-bg); border: 1px solid transparent; border-radius: 3px; padding: 0 4px; }
+.wgd-node .wgd-tag:hover, .wgd-node .wgd-tag:focus { border-color: var(--wgd-accent-line); }
+.wgd-node .wgd-path { flex: 0 1 auto; min-width: 6ch; max-width: 100%; font-family: ui-monospace, monospace; }
+.wgd-node .wgd-select { box-sizing: border-box; }
+/* Theme panel: swatch beside each color token. */
+/* Syntax coloring: <pre> layer behind a transparent-text textarea. Every
+   metric here must mirror .wgd-textarea or the glyphs drift apart. */
+.wgd-hlwrap { position: relative; }
+.wgd-hl, .wgd-hl-input {
+  font-family: ui-monospace, monospace; font-size: 13px; line-height: 1.45;
+  padding: 4px 6px; border: 1px solid transparent; border-radius: 4px;
+  box-sizing: border-box; white-space: pre; tab-size: 2; letter-spacing: normal;
+}
+.wgd-hl {
+  position: absolute; inset: 0; margin: 0; overflow: hidden;
+  pointer-events: none; z-index: 0; background: var(--wgd-bg);
+  color: var(--wgd-text);
+}
+textarea.wgd-hl-input {
+  position: relative; z-index: 1; background: transparent; color: transparent;
+  caret-color: var(--wgd-text); border-color: var(--wgd-border);
+}
+.wgd-hl-k { color: var(--wgd-hl-key); }
+.wgd-hl-s { color: var(--wgd-hl-str); }
+.wgd-hl-n { color: var(--wgd-hl-num); }
+.wgd-hl-b { color: var(--wgd-hl-bool); }
+.wgd-hl-p { color: var(--wgd-hl-punct); }
+.wgd-swatch { flex: 0 0 auto; width: 26px; height: 22px; padding: 0; border: 1px solid var(--wgd-border); border-radius: 4px; background: none; cursor: pointer; }
+.wgd-token-row { display: flex; gap: 6px; align-items: center; }
+.wgd-token-row .wgd-input { flex: 1 1 auto; min-width: 6ch; font-family: ui-monospace, monospace; font-size: 12px; }
+.wgd-token-ref { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; margin-top: 4px; }
+.wgd-token-ref-row { display: flex; gap: 6px; align-items: center; font-size: 11px; }
+.wgd-token-ref-swatch { flex: 0 0 auto; width: 14px; height: 14px; border: 1px solid var(--wgd-border); border-radius: 3px; }
+.wgd-token-ref-noswatch { border-style: dashed; opacity: 0.35; }
+.wgd-token-ref-name { font-family: ui-monospace, monospace; color: var(--wgd-accent, #2563eb); }
+.wgd-token-ref-value { color: var(--wgd-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wgd-token-ref-details summary { cursor: pointer; }
+`;
+    doc.head.appendChild(style);
+}
+//# sourceMappingURL=dom.js.map

package/dist/dom.js.map

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

package/dist/element.d.ts

@@ -0,0 +1,12 @@
+export declare const DEFAULT_TAG = "widgentic-designer";
+export declare const DEFAULT_THEME_TAG = "widgentic-theme-designer";
+export declare const DEFAULT_SCHEMA_TAG = "widgentic-schema-designer";
+export declare const DEFAULT_ACTION_TAG = "widgentic-action-designer";
+export declare function defineDesignerElement(tagName?: string): void;
+/** Sibling registrar for the standalone theme designer. */
+export declare function defineThemeDesignerElement(tagName?: string): void;
+/** Sibling registrar for the standalone schema designer. */
+export declare function defineSchemaDesignerElement(tagName?: string): void;
+/** Sibling registrar for the standalone action designer. */
+export declare function defineActionDesignerElement(tagName?: string): void;
+//# sourceMappingURL=element.d.ts.map

package/dist/element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,WAAW,uBAAuB,CAAC;AAChD,eAAO,MAAM,iBAAiB,6BAA6B,CAAC;AAC5D,eAAO,MAAM,kBAAkB,8BAA8B,CAAC;AAC9D,eAAO,MAAM,kBAAkB,8BAA8B,CAAC;AAE9D,wBAAgB,qBAAqB,CAAC,OAAO,GAAE,MAAoB,GAAG,IAAI,CAwCzE;AAED,2DAA2D;AAC3D,wBAAgB,0BAA0B,CAAC,OAAO,GAAE,MAA0B,GAAG,IAAI,CAkCpF;AAED,4DAA4D;AAC5D,wBAAgB,2BAA2B,CAAC,OAAO,GAAE,MAA2B,GAAG,IAAI,CAkCtF;AAED,4DAA4D;AAC5D,wBAAgB,2BAA2B,CAAC,OAAO,GAAE,MAA2B,GAAG,IAAI,CAkCtF"}

package/dist/element.js

@@ -0,0 +1,131 @@
+/**
+ * Opt-in custom element wrapping the factory. Registration only ever
+ * happens through the explicit call — importing this module has no
+ * custom-element registry side effects, so hosts stay in control.
+ */
+import { createDesigner } from "./shell.js";
+import { createSchemaDesigner } from "./schema-designer.js";
+import { createThemeDesigner } from "./theme-designer.js";
+import { createActionDesigner } from "./action-designer.js";
+export const DEFAULT_TAG = "widgentic-designer";
+export const DEFAULT_THEME_TAG = "widgentic-theme-designer";
+export const DEFAULT_SCHEMA_TAG = "widgentic-schema-designer";
+export const DEFAULT_ACTION_TAG = "widgentic-action-designer";
+export function defineDesignerElement(tagName = DEFAULT_TAG) {
+    if (customElements.get(tagName) !== undefined)
+        return;
+    class WidgenticDesignerElement extends HTMLElement {
+        #handle;
+        #unsubscribe;
+        connectedCallback() {
+            if (this.#handle !== undefined)
+                return;
+            // <widgentic-designer appearance="dark"> pins the chrome; omitted
+            // follows the host's prefers-color-scheme.
+            const appearance = this.getAttribute("appearance");
+            this.#handle = createDesigner(this, appearance === "light" || appearance === "dark" ? { appearance } : {});
+            this.#unsubscribe = this.#handle.subscribe((draft, diagnostics) => {
+                this.dispatchEvent(new CustomEvent("widgentic-change", {
+                    detail: { draft, diagnostics },
+                    bubbles: true
+                }));
+            });
+        }
+        disconnectedCallback() {
+            this.#unsubscribe?.();
+            this.#handle?.dispose();
+            this.#handle = undefined;
+            this.#unsubscribe = undefined;
+        }
+        /** The embedding host's programmatic access to the wrapped handle. */
+        get designer() {
+            return this.#handle;
+        }
+    }
+    customElements.define(tagName, WidgenticDesignerElement);
+}
+/** Sibling registrar for the standalone theme designer. */
+export function defineThemeDesignerElement(tagName = DEFAULT_THEME_TAG) {
+    if (customElements.get(tagName) !== undefined)
+        return;
+    class WidgenticThemeDesignerElement extends HTMLElement {
+        #handle;
+        #unsubscribe;
+        connectedCallback() {
+            if (this.#handle !== undefined)
+                return;
+            const appearance = this.getAttribute("appearance");
+            this.#handle = createThemeDesigner(this, appearance === "light" || appearance === "dark" ? { appearance } : {});
+            this.#unsubscribe = this.#handle.subscribe((entry) => {
+                this.dispatchEvent(new CustomEvent("widgentic-change", { detail: { theme: entry }, bubbles: true }));
+            });
+        }
+        disconnectedCallback() {
+            this.#unsubscribe?.();
+            this.#handle?.dispose();
+            this.#handle = undefined;
+            this.#unsubscribe = undefined;
+        }
+        get designer() {
+            return this.#handle;
+        }
+    }
+    customElements.define(tagName, WidgenticThemeDesignerElement);
+}
+/** Sibling registrar for the standalone schema designer. */
+export function defineSchemaDesignerElement(tagName = DEFAULT_SCHEMA_TAG) {
+    if (customElements.get(tagName) !== undefined)
+        return;
+    class WidgenticSchemaDesignerElement extends HTMLElement {
+        #handle;
+        #unsubscribe;
+        connectedCallback() {
+            if (this.#handle !== undefined)
+                return;
+            const appearance = this.getAttribute("appearance");
+            this.#handle = createSchemaDesigner(this, appearance === "light" || appearance === "dark" ? { appearance } : {});
+            this.#unsubscribe = this.#handle.subscribe((entry) => {
+                this.dispatchEvent(new CustomEvent("widgentic-change", { detail: { schema: entry }, bubbles: true }));
+            });
+        }
+        disconnectedCallback() {
+            this.#unsubscribe?.();
+            this.#handle?.dispose();
+            this.#handle = undefined;
+            this.#unsubscribe = undefined;
+        }
+        get designer() {
+            return this.#handle;
+        }
+    }
+    customElements.define(tagName, WidgenticSchemaDesignerElement);
+}
+/** Sibling registrar for the standalone action designer. */
+export function defineActionDesignerElement(tagName = DEFAULT_ACTION_TAG) {
+    if (customElements.get(tagName) !== undefined)
+        return;
+    class WidgenticActionDesignerElement extends HTMLElement {
+        #handle;
+        #unsubscribe;
+        connectedCallback() {
+            if (this.#handle !== undefined)
+                return;
+            const appearance = this.getAttribute("appearance");
+            this.#handle = createActionDesigner(this, appearance === "light" || appearance === "dark" ? { appearance } : {});
+            this.#unsubscribe = this.#handle.subscribe((entry) => {
+                this.dispatchEvent(new CustomEvent("widgentic-change", { detail: { action: entry }, bubbles: true }));
+            });
+        }
+        disconnectedCallback() {
+            this.#unsubscribe?.();
+            this.#handle?.dispose();
+            this.#handle = undefined;
+            this.#unsubscribe = undefined;
+        }
+        get designer() {
+            return this.#handle;
+        }
+    }
+    customElements.define(tagName, WidgenticActionDesignerElement);
+}
+//# sourceMappingURL=element.js.map

package/dist/element.js.map

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