@widgentic/designer 0.1.0

package/dist/styles-editor.js

@@ -0,0 +1,100 @@
+/**
+ * Structured editor for the descriptor's styles — selector rows with
+ * their declaration rows, under the template tree's flat discipline.
+ * The value is `Record<selector, Record<property, value>>` (strings
+ * only), so the tree enforces the exact shape the server's style guards
+ * expect; anything looser belongs in the JSON tab.
+ */
+import { isPlainObject } from "@widgentic/core";
+import { h } from "./dom.js";
+export function createStylesEditor(initial, onChange) {
+    let current = initial;
+    const element = h("div", { class: "wgd-styles" });
+    function commit(next) {
+        // An emptied record means "no styles" — the descriptor drops the key.
+        current = Object.keys(next).length > 0 ? next : undefined;
+        onChange(current);
+        render();
+    }
+    function changeInput(value, placeholder, className, onCommit) {
+        const input = h("input", {
+            type: "text",
+            class: className,
+            placeholder,
+            spellcheck: "false"
+        });
+        input.value = value;
+        input.addEventListener("change", () => onCommit(input.value));
+        return input;
+    }
+    function renderSelector(selector, declarations, styles) {
+        const rename = changeInput(selector, ".wg-selector", "wgd-input wgd-st-selector", (next) => {
+            const entries = Object.entries(styles).map(([k, v]) => k === selector ? [next, v] : [k, v]);
+            commit(Object.fromEntries(entries));
+        });
+        const addDecl = h("button", { class: "wgd-icon", type: "button", title: "Add declaration" }, ["+"]);
+        addDecl.addEventListener("click", () => {
+            commit({ ...styles, [selector]: { ...declarations, "": "" } });
+        });
+        const removeSelector = h("button", { class: "wgd-icon", type: "button", title: "Remove selector" }, ["✕"]);
+        removeSelector.addEventListener("click", () => {
+            const { [selector]: _gone, ...rest } = styles;
+            commit(rest);
+        });
+        const declRows = Object.entries(declarations).map(([property, value]) => {
+            const propInput = changeInput(property, "property", "wgd-input wgd-st-prop", (next) => {
+                const entries = Object.entries(declarations).map(([k, v]) => k === property ? [next, v] : [k, v]);
+                commit({ ...styles, [selector]: Object.fromEntries(entries) });
+            });
+            const valueInput = changeInput(value, "value (no url(...), no ;)", "wgd-input wgd-st-value", (next) => {
+                commit({
+                    ...styles,
+                    [selector]: { ...declarations, [property]: next }
+                });
+            });
+            const removeDecl = h("button", { class: "wgd-icon", type: "button", title: "Remove declaration" }, ["✕"]);
+            removeDecl.addEventListener("click", () => {
+                const { [property]: _gone, ...rest } = declarations;
+                commit({ ...styles, [selector]: rest });
+            });
+            return h("div", { class: "wgd-st-decl" }, [
+                propInput,
+                h("span", { class: "wgd-st-colon" }, [":"]),
+                valueInput,
+                removeDecl
+            ]);
+        });
+        return h("div", { class: "wgd-st-rule" }, [
+            h("div", { class: "wgd-st-row" }, [
+                rename,
+                h("span", { class: "wgd-node-icons" }, [addDecl, removeSelector])
+            ]),
+            h("div", { class: "wgd-st-decls" }, declRows)
+        ]);
+    }
+    function render() {
+        const styles = current ?? {};
+        const addSelector = h("button", { class: "wgd-button wgd-add wgd-st-add", type: "button" }, ["+ selector"]);
+        addSelector.addEventListener("click", () => {
+            let name = ".wg-";
+            for (let i = 1; name in styles; i++)
+                name = `.wg-${i}`;
+            commit({ ...styles, [name]: {} });
+        });
+        element.replaceChildren(...Object.entries(styles).map(([selector, declarations]) => renderSelector(selector, isPlainObject(declarations)
+            ? declarations
+            : {}, styles)), h("div", { class: "wgd-toolbar" }, [addSelector]));
+    }
+    render();
+    return {
+        element,
+        getValue: () => current,
+        setValue(styles) {
+            if (element.contains(document.activeElement))
+                return;
+            current = styles;
+            render();
+        }
+    };
+}
+//# sourceMappingURL=styles-editor.js.map

package/dist/styles-editor.js.map

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

package/dist/template-panel.d.ts

@@ -0,0 +1,19 @@
+import type { StoredAction } from "@widgentic/core";
+import type { SchemaEntry } from "./schema-designer.js";
+import type { DraftStore, WidgetDraft } from "./store.js";
+import type { DesignerDiagnostics } from "./validate.js";
+/** What element bindings can reach: shared actions, secrets, schemas. */
+export interface TemplateActionContext {
+    actions: StoredAction[];
+    secretNames: string[];
+    schemas: SchemaEntry[];
+}
+export interface TemplatePanelOptions {
+    actionContext?: TemplateActionContext;
+}
+export declare function mountTemplatePanel(store: DraftStore, refreshers: ((draft: WidgetDraft) => void)[], options?: TemplatePanelOptions): {
+    element: HTMLElement;
+    refresh(draft: WidgetDraft, diagnostics: DesignerDiagnostics): void;
+    dispose(): void;
+};
+//# sourceMappingURL=template-panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"template-panel.d.ts","sourceRoot":"","sources":["../src/template-panel.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAMxD,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AA+GzD,yEAAyE;AACzE,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,oBAAoB;IACnC,aAAa,CAAC,EAAE,qBAAqB,CAAC;CACvC;AAUD,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,UAAU,EACjB,UAAU,EAAE,CAAC,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC,EAAE,EAC5C,OAAO,GAAE,oBAAyB,GACjC;IACD,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACpE,OAAO,IAAI,IAAI,CAAC;CACjB,CAiqBA"}