@zodal/dials-ui-vanilla 0.1.0

package/dist/index.cjs

@@ -0,0 +1,328 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  createVanillaSettingsRegistry: () => createVanillaSettingsRegistry,
+  el: () => el,
+  renderArray: () => renderArray,
+  renderField: () => renderField,
+  renderNumber: () => renderNumber,
+  renderObject: () => renderObject,
+  renderRadio: () => renderRadio,
+  renderRawJson: () => renderRawJson,
+  renderSecret: () => renderSecret,
+  renderSelect: () => renderSelect,
+  renderSettingsPanel: () => renderSettingsPanel,
+  renderSlider: () => renderSlider,
+  renderSwitch: () => renderSwitch,
+  renderText: () => renderText,
+  renderTextarea: () => renderTextarea,
+  widgetIs: () => widgetIs
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/dom.ts
+var PROP_KEYS = /* @__PURE__ */ new Set(["value", "checked", "disabled", "selected"]);
+function el(tag, attrs, ...children) {
+  const element = document.createElement(tag);
+  if (attrs) {
+    for (const [key, value] of Object.entries(attrs)) {
+      if (value === void 0 || value === null || value === false) continue;
+      if (key.startsWith("on") && typeof value === "function") {
+        element.addEventListener(key.slice(2).toLowerCase(), value);
+      } else if (key === "class") {
+        element.className = String(value);
+      } else if (PROP_KEYS.has(key)) {
+        element[key] = value;
+      } else {
+        element.setAttribute(key, String(value));
+      }
+    }
+  }
+  for (const child of children) {
+    if (child == null) continue;
+    element.appendChild(typeof child === "string" ? document.createTextNode(child) : child);
+  }
+  return element;
+}
+
+// src/widgets.ts
+var import_dials_core = require("@zodal/dials-core");
+var isDisabled = (field, state) => field.readOnly || state.managed;
+var asText = (v) => v == null ? "" : String(v);
+function decodeNumber(raw) {
+  if (raw.trim() === "") return void 0;
+  const n = Number(raw);
+  return Number.isNaN(n) ? void 0 : n;
+}
+var jsonString = (v) => {
+  try {
+    return JSON.stringify(v ?? null, null, 2);
+  } catch {
+    return String(v);
+  }
+};
+var renderSwitch = (field, state, h) => el("input", {
+  type: "checkbox",
+  class: "zodal-dials-switch",
+  checked: state.value === true,
+  disabled: isDisabled(field, state),
+  onchange: (e) => h.onChange?.(field.key, e.target.checked)
+});
+var renderText = (field, state, h) => el("input", {
+  type: "text",
+  class: "zodal-dials-text",
+  value: asText(state.value),
+  placeholder: asText(field.defaultValue),
+  disabled: isDisabled(field, state),
+  onchange: (e) => h.onChange?.(field.key, e.target.value)
+});
+var renderTextarea = (field, state, h) => el(
+  "textarea",
+  {
+    class: "zodal-dials-textarea",
+    disabled: isDisabled(field, state),
+    onchange: (e) => h.onChange?.(field.key, e.target.value)
+  },
+  asText(state.value)
+);
+var renderNumber = (field, state, h) => el("input", {
+  type: "number",
+  class: "zodal-dials-number",
+  value: asText(state.value),
+  min: field.bounds?.min,
+  max: field.bounds?.max,
+  disabled: isDisabled(field, state),
+  onchange: (e) => {
+    const v = decodeNumber(e.target.value);
+    if (v !== void 0) h.onChange?.(field.key, v);
+  }
+});
+var renderSlider = (field, state, h) => {
+  const output = el("output", { class: "zodal-dials-slider-value" }, asText(state.value));
+  const input = el("input", {
+    type: "range",
+    class: "zodal-dials-slider",
+    value: asText(state.value),
+    min: field.bounds?.min,
+    max: field.bounds?.max,
+    disabled: isDisabled(field, state),
+    oninput: (e) => {
+      output.textContent = e.target.value;
+    },
+    onchange: (e) => {
+      const v = decodeNumber(e.target.value);
+      if (v !== void 0) h.onChange?.(field.key, v);
+    }
+  });
+  return el("span", { class: "zodal-dials-slider-wrap" }, input, output);
+};
+var renderSelect = (field, state, h) => {
+  const select = el(
+    "select",
+    {
+      class: "zodal-dials-select",
+      disabled: isDisabled(field, state),
+      onchange: (e) => h.onChange?.(field.key, e.target.value)
+    },
+    ...(field.enumValues ?? []).map((v) => el("option", { value: v }, v))
+  );
+  select.value = asText(state.value);
+  return select;
+};
+var renderRadio = (field, state, h) => el(
+  "fieldset",
+  { class: "zodal-dials-radio" },
+  ...(field.enumValues ?? []).map(
+    (v) => el(
+      "label",
+      null,
+      el("input", {
+        type: "radio",
+        name: field.key,
+        value: v,
+        checked: state.value === v,
+        disabled: isDisabled(field, state),
+        onchange: () => h.onChange?.(field.key, v)
+      }),
+      v
+    )
+  )
+);
+var renderSecret = (field, state, h) => {
+  const ref = (0, import_dials_core.isSecretRef)(state.value) ? state.value : void 0;
+  const status = el("span", { class: "zodal-dials-secret-status" }, ref ? ref.masked : "not set");
+  const input = el("input", {
+    type: "password",
+    class: "zodal-dials-secret",
+    placeholder: "Enter new value",
+    disabled: isDisabled(field, state),
+    onchange: (e) => h.onChange?.(field.key, e.target.value)
+  });
+  return el("span", { class: "zodal-dials-secret-wrap" }, status, input);
+};
+function renderJsonish(cssClass, note) {
+  return (field, state, h) => {
+    if (field.sensitivity === "secret" || (0, import_dials_core.isSecretRef)(state.value)) return renderSecret(field, state, h);
+    const textarea = el(
+      "textarea",
+      {
+        class: cssClass,
+        disabled: isDisabled(field, state),
+        onchange: (e) => {
+          try {
+            h.onChange?.(field.key, JSON.parse(e.target.value));
+          } catch {
+          }
+        }
+      },
+      jsonString(state.value)
+    );
+    return note ? el("span", { class: "zodal-dials-json-wrap" }, el("small", { class: "zodal-dials-json-note" }, note), textarea) : textarea;
+  };
+}
+var renderObject = renderJsonish("zodal-dials-object");
+var renderArray = renderJsonish("zodal-dials-array");
+var renderRawJson = renderJsonish("zodal-dials-rawjson", "rendered as raw JSON (no structured editor for this type)");
+
+// src/registry.ts
+var import_dials_ui = require("@zodal/dials-ui");
+function widgetIs(kind) {
+  return (_field, ctx) => ctx.widget === kind ? import_dials_ui.PRIORITY.LIBRARY : -1;
+}
+var WIDGET_RENDERERS = [
+  ["switch", renderSwitch],
+  ["select", renderSelect],
+  ["radio", renderRadio],
+  ["slider", renderSlider],
+  ["number", renderNumber],
+  ["text", renderText],
+  ["textarea", renderTextarea],
+  ["color", renderText],
+  ["date", renderText],
+  ["path", renderText],
+  ["object", renderObject],
+  ["array", renderArray],
+  // Honor a resolved `secret` widget kind directly, so secret masking does not depend solely on the
+  // sensitivity context staying in lockstep (secretRoleIs at OVERRIDE remains the primary signal).
+  ["secret", renderSecret]
+];
+function createVanillaSettingsRegistry() {
+  const registry = (0, import_dials_ui.createSettingsRendererRegistry)();
+  registry.register({ tester: (0, import_dials_ui.alwaysMatch)(), renderer: renderRawJson, name: "rawJson" });
+  for (const [kind, renderer] of WIDGET_RENDERERS) registry.register({ tester: widgetIs(kind), renderer, name: kind });
+  registry.register({ tester: (0, import_dials_ui.secretRoleIs)(), renderer: renderSecret, name: "secret" });
+  return registry;
+}
+
+// src/panel.ts
+function humanize(id) {
+  return id.replace(/^[@_]/, "").replace(/[._-]+/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()) || "Other";
+}
+function emptyState() {
+  return { value: void 0, managed: false, shadowed: false, dirty: false };
+}
+function renderField(field, state, options = {}) {
+  const registry = options.registry ?? createVanillaSettingsRegistry();
+  const render = registry.resolve({ zodType: field.zodType }, {
+    mode: "form",
+    widget: field.widget,
+    sensitivity: field.sensitivity
+  });
+  const control = render ? render(field, state, options) : el("span", null, "(no renderer)");
+  const badges = [];
+  if (state.source && state.source !== "default") {
+    badges.push(el("span", { class: "zodal-dials-badge zodal-dials-source", title: `set by ${state.source}` }, state.source));
+  }
+  if (state.managed) badges.push(el("span", { class: "zodal-dials-badge zodal-dials-managed", title: "managed by policy" }, "policy"));
+  if (state.dirty) badges.push(el("span", { class: "zodal-dials-badge zodal-dials-dirty" }, "modified"));
+  const reset = state.source && state.source !== "default" && !state.managed ? el("button", { type: "button", class: "zodal-dials-reset", onclick: () => options.onReset?.(field.key) }, "Reset") : null;
+  return el(
+    "div",
+    { class: "zodal-dials-field", "data-key": field.key, "data-widget": field.widget },
+    el("label", { class: "zodal-dials-label", for: field.key }, field.label, ...badges),
+    field.description ? el("p", { class: "zodal-dials-description" }, field.description) : null,
+    el("div", { class: "zodal-dials-control" }, control, reset)
+  );
+}
+function filterRows(panel, query) {
+  const q = query.trim().toLowerCase();
+  for (const row of Array.from(panel.querySelectorAll(".zodal-dials-field"))) {
+    const key = (row.getAttribute("data-key") ?? "").toLowerCase();
+    const label = (row.querySelector(".zodal-dials-label")?.textContent ?? "").toLowerCase();
+    const description = (row.querySelector(".zodal-dials-description")?.textContent ?? "").toLowerCase();
+    row.style.display = !q || key.includes(q) || label.includes(q) || description.includes(q) ? "" : "none";
+  }
+}
+function renderSettingsPanel(form, states, options = {}) {
+  const registry = options.registry ?? createVanillaSettingsRegistry();
+  const opts = { ...options, registry };
+  const panel = el("div", { class: "zodal-dials-panel" });
+  if (options.search !== false) {
+    panel.appendChild(
+      el("input", {
+        type: "search",
+        class: "zodal-dials-search",
+        placeholder: "Search settings\u2026",
+        oninput: (e) => filterRows(panel, e.target.value)
+      })
+    );
+  }
+  const primary = (f) => f.facets?.find((x) => !x.startsWith("@")) ?? "_ungrouped";
+  const buckets = /* @__PURE__ */ new Map();
+  for (const f of form.fields) {
+    const id = primary(f);
+    const list = buckets.get(id);
+    if (list) list.push(f);
+    else buckets.set(id, [f]);
+  }
+  const groupMeta = new Map(form.groups.map((g) => [g.id, g]));
+  const sectionIds = [...buckets.keys()].sort(
+    (a, b) => (groupMeta.get(a)?.order ?? 500) - (groupMeta.get(b)?.order ?? 500) || a.localeCompare(b)
+  );
+  for (const id of sectionIds) {
+    const title = groupMeta.get(id)?.title ?? humanize(id);
+    const section = el("section", { class: "zodal-dials-group", "data-group": id }, el("h3", { class: "zodal-dials-group-title" }, title));
+    for (const f of buckets.get(id) ?? []) section.appendChild(renderField(f, states[f.key] ?? emptyState(), opts));
+    panel.appendChild(section);
+  }
+  return panel;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createVanillaSettingsRegistry,
+  el,
+  renderArray,
+  renderField,
+  renderNumber,
+  renderObject,
+  renderRadio,
+  renderRawJson,
+  renderSecret,
+  renderSelect,
+  renderSettingsPanel,
+  renderSlider,
+  renderSwitch,
+  renderText,
+  renderTextarea,
+  widgetIs
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/dom.ts","../src/widgets.ts","../src/registry.ts","../src/panel.ts"],"sourcesContent":["/**\n * @zodal/dials-ui-vanilla — the vanilla HTML/JS reference renderer for @zodal/dials-ui.\n *\n * Turns the headless settings config (`SettingsForm` + field states from `@zodal/dials-ui`) into real\n * DOM, with no framework: `renderSettingsPanel` builds the whole panel (search + grouped fields),\n * `renderField` builds one row, and `createVanillaSettingsRegistry` is the per-widget DOM renderer\n * registry (with a terminal rawJson fallback). It proves the headless contract end-to-end.\n */\n\nexport { el } from './dom.js';\nexport type { Attrs } from './dom.js';\n\nexport type { FieldHandlers, SettingRenderFn } from './types.js';\n\nexport {\n  renderSwitch,\n  renderSelect,\n  renderRadio,\n  renderSlider,\n  renderNumber,\n  renderText,\n  renderTextarea,\n  renderObject,\n  renderArray,\n  renderRawJson,\n  renderSecret,\n} from './widgets.js';\n\nexport { createVanillaSettingsRegistry, widgetIs } from './registry.js';\n\nexport { renderField, renderSettingsPanel } from './panel.js';\nexport type { RenderOptions } from './panel.js';\n","/**\n * Internal DOM element factory (no framework). Sets value/checked/disabled/selected as PROPERTIES\n * (so form controls reflect state), `on*` keys as event listeners, and everything else as attributes.\n */\n\nexport type Attrs = Record<string, unknown>;\n\nconst PROP_KEYS = new Set(['value', 'checked', 'disabled', 'selected']);\n\nexport function el<K extends keyof HTMLElementTagNameMap>(\n  tag: K,\n  attrs?: Attrs | null,\n  ...children: Array<Node | string | null | undefined>\n): HTMLElementTagNameMap[K] {\n  const element = document.createElement(tag);\n  if (attrs) {\n    for (const [key, value] of Object.entries(attrs)) {\n      if (value === undefined || value === null || value === false) continue;\n      if (key.startsWith('on') && typeof value === 'function') {\n        element.addEventListener(key.slice(2).toLowerCase(), value as EventListener);\n      } else if (key === 'class') {\n        element.className = String(value);\n      } else if (PROP_KEYS.has(key)) {\n        (element as unknown as Record<string, unknown>)[key] = value;\n      } else {\n        element.setAttribute(key, String(value));\n      }\n    }\n  }\n  for (const child of children) {\n    if (child == null) continue;\n    element.appendChild(typeof child === 'string' ? document.createTextNode(child) : child);\n  }\n  return element;\n}\n","/**\n * Vanilla widget renderers — each produces the control element for a setting from its config +\n * current state, wiring change events to the handlers. A `secret` value (a masked `SecretRef`) is\n * shown as a status + a write-only field. Structured/unknown values fall back to a raw JSON editor\n * (the rawJson renderer states WHY). No framework; pure DOM.\n */\n\nimport { el } from './dom.js';\nimport { isSecretRef } from '@zodal/dials-core';\nimport type { SettingFieldConfig, SettingFieldState } from '@zodal/dials-ui';\nimport type { SettingRenderFn } from './types.js';\n\nconst isDisabled = (field: SettingFieldConfig, state: SettingFieldState): boolean => field.readOnly || state.managed;\nconst asText = (v: unknown): string => (v == null ? '' : String(v));\n\n/** Decode a numeric input, returning undefined for empty/non-numeric so clearing the box is treated\n *  as \"no change\" (use Reset to unset) rather than silently writing 0 / NaN. */\nfunction decodeNumber(raw: string): number | undefined {\n  if (raw.trim() === '') return undefined;\n  const n = Number(raw);\n  return Number.isNaN(n) ? undefined : n;\n}\nconst jsonString = (v: unknown): string => {\n  try {\n    return JSON.stringify(v ?? null, null, 2);\n  } catch {\n    return String(v);\n  }\n};\n\nexport const renderSwitch: SettingRenderFn = (field, state, h) =>\n  el('input', {\n    type: 'checkbox',\n    class: 'zodal-dials-switch',\n    checked: state.value === true,\n    disabled: isDisabled(field, state),\n    onchange: (e: Event) => h.onChange?.(field.key, (e.target as HTMLInputElement).checked),\n  });\n\nexport const renderText: SettingRenderFn = (field, state, h) =>\n  el('input', {\n    type: 'text',\n    class: 'zodal-dials-text',\n    value: asText(state.value),\n    placeholder: asText(field.defaultValue),\n    disabled: isDisabled(field, state),\n    onchange: (e: Event) => h.onChange?.(field.key, (e.target as HTMLInputElement).value),\n  });\n\nexport const renderTextarea: SettingRenderFn = (field, state, h) =>\n  el(\n    'textarea',\n    {\n      class: 'zodal-dials-textarea',\n      disabled: isDisabled(field, state),\n      onchange: (e: Event) => h.onChange?.(field.key, (e.target as HTMLTextAreaElement).value),\n    },\n    asText(state.value),\n  );\n\nexport const renderNumber: SettingRenderFn = (field, state, h) =>\n  el('input', {\n    type: 'number',\n    class: 'zodal-dials-number',\n    value: asText(state.value),\n    min: field.bounds?.min,\n    max: field.bounds?.max,\n    disabled: isDisabled(field, state),\n    onchange: (e: Event) => {\n      const v = decodeNumber((e.target as HTMLInputElement).value);\n      if (v !== undefined) h.onChange?.(field.key, v);\n    },\n  });\n\nexport const renderSlider: SettingRenderFn = (field, state, h) => {\n  const output = el('output', { class: 'zodal-dials-slider-value' }, asText(state.value));\n  const input = el('input', {\n    type: 'range',\n    class: 'zodal-dials-slider',\n    value: asText(state.value),\n    min: field.bounds?.min,\n    max: field.bounds?.max,\n    disabled: isDisabled(field, state),\n    oninput: (e: Event) => {\n      output.textContent = (e.target as HTMLInputElement).value;\n    },\n    onchange: (e: Event) => {\n      const v = decodeNumber((e.target as HTMLInputElement).value);\n      if (v !== undefined) h.onChange?.(field.key, v);\n    },\n  });\n  return el('span', { class: 'zodal-dials-slider-wrap' }, input, output);\n};\n\nexport const renderSelect: SettingRenderFn = (field, state, h) => {\n  const select = el(\n    'select',\n    {\n      class: 'zodal-dials-select',\n      disabled: isDisabled(field, state),\n      onchange: (e: Event) => h.onChange?.(field.key, (e.target as HTMLSelectElement).value),\n    },\n    ...(field.enumValues ?? []).map((v) => el('option', { value: v }, v)),\n  );\n  select.value = asText(state.value);\n  return select;\n};\n\nexport const renderRadio: SettingRenderFn = (field, state, h) =>\n  el(\n    'fieldset',\n    { class: 'zodal-dials-radio' },\n    ...(field.enumValues ?? []).map((v) =>\n      el(\n        'label',\n        null,\n        el('input', {\n          type: 'radio',\n          name: field.key,\n          value: v,\n          checked: state.value === v,\n          disabled: isDisabled(field, state),\n          onchange: () => h.onChange?.(field.key, v),\n        }),\n        v,\n      ),\n    ),\n  );\n\nexport const renderSecret: SettingRenderFn = (field, state, h) => {\n  const ref = isSecretRef(state.value) ? state.value : undefined;\n  const status = el('span', { class: 'zodal-dials-secret-status' }, ref ? ref.masked : 'not set');\n  const input = el('input', {\n    type: 'password',\n    class: 'zodal-dials-secret',\n    placeholder: 'Enter new value',\n    disabled: isDisabled(field, state),\n    onchange: (e: Event) => h.onChange?.(field.key, (e.target as HTMLInputElement).value),\n  });\n  return el('span', { class: 'zodal-dials-secret-wrap' }, status, input);\n};\n\nfunction renderJsonish(cssClass: string, note?: string): SettingRenderFn {\n  return (field, state, h) => {\n    // Defense in depth: a JSON/raw editor must never serialize a secret, even if reached by a\n    // widget↔sensitivity mismatch — always fall back to the masked secret widget.\n    if (field.sensitivity === 'secret' || isSecretRef(state.value)) return renderSecret(field, state, h);\n    const textarea = el(\n      'textarea',\n      {\n        class: cssClass,\n        disabled: isDisabled(field, state),\n        onchange: (e: Event) => {\n          try {\n            h.onChange?.(field.key, JSON.parse((e.target as HTMLTextAreaElement).value));\n          } catch {\n            // invalid JSON: a real renderer would surface an error; the reference renderer ignores it.\n          }\n        },\n      },\n      jsonString(state.value),\n    );\n    return note\n      ? el('span', { class: 'zodal-dials-json-wrap' }, el('small', { class: 'zodal-dials-json-note' }, note), textarea)\n      : textarea;\n  };\n}\n\nexport const renderObject = renderJsonish('zodal-dials-object');\nexport const renderArray = renderJsonish('zodal-dials-array');\nexport const renderRawJson = renderJsonish('zodal-dials-rawjson', 'rendered as raw JSON (no structured editor for this type)');\n","/**\n * The vanilla settings renderer registry — populates a `@zodal/dials-ui` `RendererRegistry` with one\n * DOM renderer per widget kind, the masked secret widget at the OVERRIDE band, and a terminal rawJson\n * renderer (via `alwaysMatch`) so every setting renders to something. The widget kind is supplied via\n * the render context, so selection is open-closed (a consumer can register a higher-priority override).\n */\n\nimport { createSettingsRendererRegistry, secretRoleIs, alwaysMatch, PRIORITY } from '@zodal/dials-ui';\nimport type { RendererRegistry, RendererTester, WidgetKind } from '@zodal/dials-ui';\nimport type { SettingRenderFn } from './types.js';\nimport {\n  renderSwitch,\n  renderSelect,\n  renderRadio,\n  renderSlider,\n  renderNumber,\n  renderText,\n  renderTextarea,\n  renderObject,\n  renderArray,\n  renderRawJson,\n  renderSecret,\n} from './widgets.js';\n\n/** Tester matching a field's resolved widget kind (supplied via the render context as `widget`). */\nexport function widgetIs(kind: WidgetKind): RendererTester {\n  return (_field, ctx) => (ctx.widget === kind ? PRIORITY.LIBRARY : -1);\n}\n\nconst WIDGET_RENDERERS: Array<[WidgetKind, SettingRenderFn]> = [\n  ['switch', renderSwitch],\n  ['select', renderSelect],\n  ['radio', renderRadio],\n  ['slider', renderSlider],\n  ['number', renderNumber],\n  ['text', renderText],\n  ['textarea', renderTextarea],\n  ['color', renderText],\n  ['date', renderText],\n  ['path', renderText],\n  ['object', renderObject],\n  ['array', renderArray],\n  // Honor a resolved `secret` widget kind directly, so secret masking does not depend solely on the\n  // sensitivity context staying in lockstep (secretRoleIs at OVERRIDE remains the primary signal).\n  ['secret', renderSecret],\n];\n\n/** Create a vanilla settings renderer registry (a `@zodal/dials-ui` registry of DOM renderers). */\nexport function createVanillaSettingsRegistry(): RendererRegistry<SettingRenderFn> {\n  const registry = createSettingsRendererRegistry<SettingRenderFn>();\n  registry.register({ tester: alwaysMatch(), renderer: renderRawJson, name: 'rawJson' });\n  for (const [kind, renderer] of WIDGET_RENDERERS) registry.register({ tester: widgetIs(kind), renderer, name: kind });\n  registry.register({ tester: secretRoleIs(), renderer: renderSecret, name: 'secret' });\n  return registry;\n}\n","/**\n * Field and panel assembly. `renderField` builds one labeled row (label + provenance badges +\n * description + control via the registry + a reset button when overridden). `renderSettingsPanel`\n * builds the whole panel: a client-side search/filter box + a section per primary facet. Each setting\n * renders ONCE (under its primary facet); multi-membership facets and computed groups drive filtering,\n * not duplicate controls.\n */\n\nimport { el } from './dom.js';\nimport type { RendererRegistry, SettingFieldConfig, SettingFieldState, SettingsForm } from '@zodal/dials-ui';\nimport type { ResolvedFieldAffordance } from '@zodal/core';\nimport type { SettingKey } from '@zodal/dials-core';\nimport type { FieldHandlers, SettingRenderFn } from './types.js';\nimport { createVanillaSettingsRegistry } from './registry.js';\n\nexport interface RenderOptions extends FieldHandlers {\n  /** Override the renderer registry (e.g. to register custom widgets). */\n  registry?: RendererRegistry<SettingRenderFn>;\n  /** Include the client-side search/filter box. Default: true. */\n  search?: boolean;\n}\n\nfunction humanize(id: string): string {\n  return id.replace(/^[@_]/, '').replace(/[._-]+/g, ' ').replace(/\\b\\w/g, (c) => c.toUpperCase()) || 'Other';\n}\n\nfunction emptyState(): SettingFieldState {\n  return { value: undefined, managed: false, shadowed: false, dirty: false };\n}\n\n/** Render one setting as a labeled field row. */\nexport function renderField(\n  field: SettingFieldConfig,\n  state: SettingFieldState,\n  options: RenderOptions = {},\n): HTMLElement {\n  const registry = options.registry ?? createVanillaSettingsRegistry();\n  const render = registry.resolve({ zodType: field.zodType } as unknown as ResolvedFieldAffordance, {\n    mode: 'form',\n    widget: field.widget,\n    sensitivity: field.sensitivity,\n  });\n  const control = render ? render(field, state, options) : el('span', null, '(no renderer)');\n\n  const badges: HTMLElement[] = [];\n  if (state.source && state.source !== 'default') {\n    badges.push(el('span', { class: 'zodal-dials-badge zodal-dials-source', title: `set by ${state.source}` }, state.source));\n  }\n  if (state.managed) badges.push(el('span', { class: 'zodal-dials-badge zodal-dials-managed', title: 'managed by policy' }, 'policy'));\n  if (state.dirty) badges.push(el('span', { class: 'zodal-dials-badge zodal-dials-dirty' }, 'modified'));\n\n  const reset =\n    state.source && state.source !== 'default' && !state.managed\n      ? el('button', { type: 'button', class: 'zodal-dials-reset', onclick: () => options.onReset?.(field.key) }, 'Reset')\n      : null;\n\n  return el(\n    'div',\n    { class: 'zodal-dials-field', 'data-key': field.key, 'data-widget': field.widget },\n    el('label', { class: 'zodal-dials-label', for: field.key }, field.label, ...badges),\n    field.description ? el('p', { class: 'zodal-dials-description' }, field.description) : null,\n    el('div', { class: 'zodal-dials-control' }, control, reset),\n  );\n}\n\nfunction filterRows(panel: HTMLElement, query: string): void {\n  const q = query.trim().toLowerCase();\n  for (const row of Array.from(panel.querySelectorAll<HTMLElement>('.zodal-dials-field'))) {\n    const key = (row.getAttribute('data-key') ?? '').toLowerCase();\n    const label = (row.querySelector('.zodal-dials-label')?.textContent ?? '').toLowerCase();\n    const description = (row.querySelector('.zodal-dials-description')?.textContent ?? '').toLowerCase();\n    row.style.display = !q || key.includes(q) || label.includes(q) || description.includes(q) ? '' : 'none';\n  }\n}\n\n/** Render the full settings panel (search box + a section per primary facet). */\nexport function renderSettingsPanel(\n  form: SettingsForm,\n  states: Record<SettingKey, SettingFieldState>,\n  options: RenderOptions = {},\n): HTMLElement {\n  const registry = options.registry ?? createVanillaSettingsRegistry();\n  const opts: RenderOptions = { ...options, registry };\n  const panel = el('div', { class: 'zodal-dials-panel' });\n\n  if (options.search !== false) {\n    panel.appendChild(\n      el('input', {\n        type: 'search',\n        class: 'zodal-dials-search',\n        placeholder: 'Search settings…',\n        oninput: (e: Event) => filterRows(panel, (e.target as HTMLInputElement).value),\n      }),\n    );\n  }\n\n  // Bucket each field under its primary (first non-computed) facet, so every field renders once.\n  const primary = (f: SettingFieldConfig): string => f.facets?.find((x) => !x.startsWith('@')) ?? '_ungrouped';\n  const buckets = new Map<string, SettingFieldConfig[]>();\n  for (const f of form.fields) {\n    const id = primary(f);\n    const list = buckets.get(id);\n    if (list) list.push(f);\n    else buckets.set(id, [f]);\n  }\n\n  const groupMeta = new Map(form.groups.map((g) => [g.id, g]));\n  const sectionIds = [...buckets.keys()].sort(\n    (a, b) => (groupMeta.get(a)?.order ?? 500) - (groupMeta.get(b)?.order ?? 500) || a.localeCompare(b),\n  );\n\n  for (const id of sectionIds) {\n    const title = groupMeta.get(id)?.title ?? humanize(id);\n    const section = el('section', { class: 'zodal-dials-group', 'data-group': id }, el('h3', { class: 'zodal-dials-group-title' }, title));\n    for (const f of buckets.get(id) ?? []) section.appendChild(renderField(f, states[f.key] ?? emptyState(), opts));\n    panel.appendChild(section);\n  }\n\n  return panel;\n}\n"],"mappings":"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","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,72 @@
+import { SettingFieldConfig, SettingFieldState, RendererRegistry, WidgetKind, RendererTester, SettingsForm } from '@zodal/dials-ui';
+import { SettingKey } from '@zodal/dials-core';
+
+/**
+ * Internal DOM element factory (no framework). Sets value/checked/disabled/selected as PROPERTIES
+ * (so form controls reflect state), `on*` keys as event listeners, and everything else as attributes.
+ */
+type Attrs = Record<string, unknown>;
+declare function el<K extends keyof HTMLElementTagNameMap>(tag: K, attrs?: Attrs | null, ...children: Array<Node | string | null | undefined>): HTMLElementTagNameMap[K];
+
+/** Render contract for the vanilla settings renderer. */
+
+interface FieldHandlers {
+    /** Called when the user changes a setting's value (the decoded value, not the raw event). */
+    onChange?: (key: SettingKey, value: unknown) => void;
+    /** Called when the user clicks reset on a setting. */
+    onReset?: (key: SettingKey) => void;
+}
+/** A widget renderer: produce the control element for a setting from its config + current state. */
+type SettingRenderFn = (field: SettingFieldConfig, state: SettingFieldState, handlers: FieldHandlers) => HTMLElement;
+
+/**
+ * Vanilla widget renderers — each produces the control element for a setting from its config +
+ * current state, wiring change events to the handlers. A `secret` value (a masked `SecretRef`) is
+ * shown as a status + a write-only field. Structured/unknown values fall back to a raw JSON editor
+ * (the rawJson renderer states WHY). No framework; pure DOM.
+ */
+
+declare const renderSwitch: SettingRenderFn;
+declare const renderText: SettingRenderFn;
+declare const renderTextarea: SettingRenderFn;
+declare const renderNumber: SettingRenderFn;
+declare const renderSlider: SettingRenderFn;
+declare const renderSelect: SettingRenderFn;
+declare const renderRadio: SettingRenderFn;
+declare const renderSecret: SettingRenderFn;
+declare const renderObject: SettingRenderFn;
+declare const renderArray: SettingRenderFn;
+declare const renderRawJson: SettingRenderFn;
+
+/**
+ * The vanilla settings renderer registry — populates a `@zodal/dials-ui` `RendererRegistry` with one
+ * DOM renderer per widget kind, the masked secret widget at the OVERRIDE band, and a terminal rawJson
+ * renderer (via `alwaysMatch`) so every setting renders to something. The widget kind is supplied via
+ * the render context, so selection is open-closed (a consumer can register a higher-priority override).
+ */
+
+/** Tester matching a field's resolved widget kind (supplied via the render context as `widget`). */
+declare function widgetIs(kind: WidgetKind): RendererTester;
+/** Create a vanilla settings renderer registry (a `@zodal/dials-ui` registry of DOM renderers). */
+declare function createVanillaSettingsRegistry(): RendererRegistry<SettingRenderFn>;
+
+/**
+ * Field and panel assembly. `renderField` builds one labeled row (label + provenance badges +
+ * description + control via the registry + a reset button when overridden). `renderSettingsPanel`
+ * builds the whole panel: a client-side search/filter box + a section per primary facet. Each setting
+ * renders ONCE (under its primary facet); multi-membership facets and computed groups drive filtering,
+ * not duplicate controls.
+ */
+
+interface RenderOptions extends FieldHandlers {
+    /** Override the renderer registry (e.g. to register custom widgets). */
+    registry?: RendererRegistry<SettingRenderFn>;
+    /** Include the client-side search/filter box. Default: true. */
+    search?: boolean;
+}
+/** Render one setting as a labeled field row. */
+declare function renderField(field: SettingFieldConfig, state: SettingFieldState, options?: RenderOptions): HTMLElement;
+/** Render the full settings panel (search box + a section per primary facet). */
+declare function renderSettingsPanel(form: SettingsForm, states: Record<SettingKey, SettingFieldState>, options?: RenderOptions): HTMLElement;
+
+export { type Attrs, type FieldHandlers, type RenderOptions, type SettingRenderFn, createVanillaSettingsRegistry, el, renderArray, renderField, renderNumber, renderObject, renderRadio, renderRawJson, renderSecret, renderSelect, renderSettingsPanel, renderSlider, renderSwitch, renderText, renderTextarea, widgetIs };

package/dist/index.d.ts

@@ -0,0 +1,72 @@
+import { SettingFieldConfig, SettingFieldState, RendererRegistry, WidgetKind, RendererTester, SettingsForm } from '@zodal/dials-ui';
+import { SettingKey } from '@zodal/dials-core';
+
+/**
+ * Internal DOM element factory (no framework). Sets value/checked/disabled/selected as PROPERTIES
+ * (so form controls reflect state), `on*` keys as event listeners, and everything else as attributes.
+ */
+type Attrs = Record<string, unknown>;
+declare function el<K extends keyof HTMLElementTagNameMap>(tag: K, attrs?: Attrs | null, ...children: Array<Node | string | null | undefined>): HTMLElementTagNameMap[K];
+
+/** Render contract for the vanilla settings renderer. */
+
+interface FieldHandlers {
+    /** Called when the user changes a setting's value (the decoded value, not the raw event). */
+    onChange?: (key: SettingKey, value: unknown) => void;
+    /** Called when the user clicks reset on a setting. */
+    onReset?: (key: SettingKey) => void;
+}
+/** A widget renderer: produce the control element for a setting from its config + current state. */
+type SettingRenderFn = (field: SettingFieldConfig, state: SettingFieldState, handlers: FieldHandlers) => HTMLElement;
+
+/**
+ * Vanilla widget renderers — each produces the control element for a setting from its config +
+ * current state, wiring change events to the handlers. A `secret` value (a masked `SecretRef`) is
+ * shown as a status + a write-only field. Structured/unknown values fall back to a raw JSON editor
+ * (the rawJson renderer states WHY). No framework; pure DOM.
+ */
+
+declare const renderSwitch: SettingRenderFn;
+declare const renderText: SettingRenderFn;
+declare const renderTextarea: SettingRenderFn;
+declare const renderNumber: SettingRenderFn;
+declare const renderSlider: SettingRenderFn;
+declare const renderSelect: SettingRenderFn;
+declare const renderRadio: SettingRenderFn;
+declare const renderSecret: SettingRenderFn;
+declare const renderObject: SettingRenderFn;
+declare const renderArray: SettingRenderFn;
+declare const renderRawJson: SettingRenderFn;
+
+/**
+ * The vanilla settings renderer registry — populates a `@zodal/dials-ui` `RendererRegistry` with one
+ * DOM renderer per widget kind, the masked secret widget at the OVERRIDE band, and a terminal rawJson
+ * renderer (via `alwaysMatch`) so every setting renders to something. The widget kind is supplied via
+ * the render context, so selection is open-closed (a consumer can register a higher-priority override).
+ */
+
+/** Tester matching a field's resolved widget kind (supplied via the render context as `widget`). */
+declare function widgetIs(kind: WidgetKind): RendererTester;
+/** Create a vanilla settings renderer registry (a `@zodal/dials-ui` registry of DOM renderers). */
+declare function createVanillaSettingsRegistry(): RendererRegistry<SettingRenderFn>;
+
+/**
+ * Field and panel assembly. `renderField` builds one labeled row (label + provenance badges +
+ * description + control via the registry + a reset button when overridden). `renderSettingsPanel`
+ * builds the whole panel: a client-side search/filter box + a section per primary facet. Each setting
+ * renders ONCE (under its primary facet); multi-membership facets and computed groups drive filtering,
+ * not duplicate controls.
+ */
+
+interface RenderOptions extends FieldHandlers {
+    /** Override the renderer registry (e.g. to register custom widgets). */
+    registry?: RendererRegistry<SettingRenderFn>;
+    /** Include the client-side search/filter box. Default: true. */
+    search?: boolean;
+}
+/** Render one setting as a labeled field row. */
+declare function renderField(field: SettingFieldConfig, state: SettingFieldState, options?: RenderOptions): HTMLElement;
+/** Render the full settings panel (search box + a section per primary facet). */
+declare function renderSettingsPanel(form: SettingsForm, states: Record<SettingKey, SettingFieldState>, options?: RenderOptions): HTMLElement;
+
+export { type Attrs, type FieldHandlers, type RenderOptions, type SettingRenderFn, createVanillaSettingsRegistry, el, renderArray, renderField, renderNumber, renderObject, renderRadio, renderRawJson, renderSecret, renderSelect, renderSettingsPanel, renderSlider, renderSwitch, renderText, renderTextarea, widgetIs };

package/dist/index.js

@@ -0,0 +1,286 @@
+// src/dom.ts
+var PROP_KEYS = /* @__PURE__ */ new Set(["value", "checked", "disabled", "selected"]);
+function el(tag, attrs, ...children) {
+  const element = document.createElement(tag);
+  if (attrs) {
+    for (const [key, value] of Object.entries(attrs)) {
+      if (value === void 0 || value === null || value === false) continue;
+      if (key.startsWith("on") && typeof value === "function") {
+        element.addEventListener(key.slice(2).toLowerCase(), value);
+      } else if (key === "class") {
+        element.className = String(value);
+      } else if (PROP_KEYS.has(key)) {
+        element[key] = value;
+      } else {
+        element.setAttribute(key, String(value));
+      }
+    }
+  }
+  for (const child of children) {
+    if (child == null) continue;
+    element.appendChild(typeof child === "string" ? document.createTextNode(child) : child);
+  }
+  return element;
+}
+
+// src/widgets.ts
+import { isSecretRef } from "@zodal/dials-core";
+var isDisabled = (field, state) => field.readOnly || state.managed;
+var asText = (v) => v == null ? "" : String(v);
+function decodeNumber(raw) {
+  if (raw.trim() === "") return void 0;
+  const n = Number(raw);
+  return Number.isNaN(n) ? void 0 : n;
+}
+var jsonString = (v) => {
+  try {
+    return JSON.stringify(v ?? null, null, 2);
+  } catch {
+    return String(v);
+  }
+};
+var renderSwitch = (field, state, h) => el("input", {
+  type: "checkbox",
+  class: "zodal-dials-switch",
+  checked: state.value === true,
+  disabled: isDisabled(field, state),
+  onchange: (e) => h.onChange?.(field.key, e.target.checked)
+});
+var renderText = (field, state, h) => el("input", {
+  type: "text",
+  class: "zodal-dials-text",
+  value: asText(state.value),
+  placeholder: asText(field.defaultValue),
+  disabled: isDisabled(field, state),
+  onchange: (e) => h.onChange?.(field.key, e.target.value)
+});
+var renderTextarea = (field, state, h) => el(
+  "textarea",
+  {
+    class: "zodal-dials-textarea",
+    disabled: isDisabled(field, state),
+    onchange: (e) => h.onChange?.(field.key, e.target.value)
+  },
+  asText(state.value)
+);
+var renderNumber = (field, state, h) => el("input", {
+  type: "number",
+  class: "zodal-dials-number",
+  value: asText(state.value),
+  min: field.bounds?.min,
+  max: field.bounds?.max,
+  disabled: isDisabled(field, state),
+  onchange: (e) => {
+    const v = decodeNumber(e.target.value);
+    if (v !== void 0) h.onChange?.(field.key, v);
+  }
+});
+var renderSlider = (field, state, h) => {
+  const output = el("output", { class: "zodal-dials-slider-value" }, asText(state.value));
+  const input = el("input", {
+    type: "range",
+    class: "zodal-dials-slider",
+    value: asText(state.value),
+    min: field.bounds?.min,
+    max: field.bounds?.max,
+    disabled: isDisabled(field, state),
+    oninput: (e) => {
+      output.textContent = e.target.value;
+    },
+    onchange: (e) => {
+      const v = decodeNumber(e.target.value);
+      if (v !== void 0) h.onChange?.(field.key, v);
+    }
+  });
+  return el("span", { class: "zodal-dials-slider-wrap" }, input, output);
+};
+var renderSelect = (field, state, h) => {
+  const select = el(
+    "select",
+    {
+      class: "zodal-dials-select",
+      disabled: isDisabled(field, state),
+      onchange: (e) => h.onChange?.(field.key, e.target.value)
+    },
+    ...(field.enumValues ?? []).map((v) => el("option", { value: v }, v))
+  );
+  select.value = asText(state.value);
+  return select;
+};
+var renderRadio = (field, state, h) => el(
+  "fieldset",
+  { class: "zodal-dials-radio" },
+  ...(field.enumValues ?? []).map(
+    (v) => el(
+      "label",
+      null,
+      el("input", {
+        type: "radio",
+        name: field.key,
+        value: v,
+        checked: state.value === v,
+        disabled: isDisabled(field, state),
+        onchange: () => h.onChange?.(field.key, v)
+      }),
+      v
+    )
+  )
+);
+var renderSecret = (field, state, h) => {
+  const ref = isSecretRef(state.value) ? state.value : void 0;
+  const status = el("span", { class: "zodal-dials-secret-status" }, ref ? ref.masked : "not set");
+  const input = el("input", {
+    type: "password",
+    class: "zodal-dials-secret",
+    placeholder: "Enter new value",
+    disabled: isDisabled(field, state),
+    onchange: (e) => h.onChange?.(field.key, e.target.value)
+  });
+  return el("span", { class: "zodal-dials-secret-wrap" }, status, input);
+};
+function renderJsonish(cssClass, note) {
+  return (field, state, h) => {
+    if (field.sensitivity === "secret" || isSecretRef(state.value)) return renderSecret(field, state, h);
+    const textarea = el(
+      "textarea",
+      {
+        class: cssClass,
+        disabled: isDisabled(field, state),
+        onchange: (e) => {
+          try {
+            h.onChange?.(field.key, JSON.parse(e.target.value));
+          } catch {
+          }
+        }
+      },
+      jsonString(state.value)
+    );
+    return note ? el("span", { class: "zodal-dials-json-wrap" }, el("small", { class: "zodal-dials-json-note" }, note), textarea) : textarea;
+  };
+}
+var renderObject = renderJsonish("zodal-dials-object");
+var renderArray = renderJsonish("zodal-dials-array");
+var renderRawJson = renderJsonish("zodal-dials-rawjson", "rendered as raw JSON (no structured editor for this type)");
+
+// src/registry.ts
+import { createSettingsRendererRegistry, secretRoleIs, alwaysMatch, PRIORITY } from "@zodal/dials-ui";
+function widgetIs(kind) {
+  return (_field, ctx) => ctx.widget === kind ? PRIORITY.LIBRARY : -1;
+}
+var WIDGET_RENDERERS = [
+  ["switch", renderSwitch],
+  ["select", renderSelect],
+  ["radio", renderRadio],
+  ["slider", renderSlider],
+  ["number", renderNumber],
+  ["text", renderText],
+  ["textarea", renderTextarea],
+  ["color", renderText],
+  ["date", renderText],
+  ["path", renderText],
+  ["object", renderObject],
+  ["array", renderArray],
+  // Honor a resolved `secret` widget kind directly, so secret masking does not depend solely on the
+  // sensitivity context staying in lockstep (secretRoleIs at OVERRIDE remains the primary signal).
+  ["secret", renderSecret]
+];
+function createVanillaSettingsRegistry() {
+  const registry = createSettingsRendererRegistry();
+  registry.register({ tester: alwaysMatch(), renderer: renderRawJson, name: "rawJson" });
+  for (const [kind, renderer] of WIDGET_RENDERERS) registry.register({ tester: widgetIs(kind), renderer, name: kind });
+  registry.register({ tester: secretRoleIs(), renderer: renderSecret, name: "secret" });
+  return registry;
+}
+
+// src/panel.ts
+function humanize(id) {
+  return id.replace(/^[@_]/, "").replace(/[._-]+/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()) || "Other";
+}
+function emptyState() {
+  return { value: void 0, managed: false, shadowed: false, dirty: false };
+}
+function renderField(field, state, options = {}) {
+  const registry = options.registry ?? createVanillaSettingsRegistry();
+  const render = registry.resolve({ zodType: field.zodType }, {
+    mode: "form",
+    widget: field.widget,
+    sensitivity: field.sensitivity
+  });
+  const control = render ? render(field, state, options) : el("span", null, "(no renderer)");
+  const badges = [];
+  if (state.source && state.source !== "default") {
+    badges.push(el("span", { class: "zodal-dials-badge zodal-dials-source", title: `set by ${state.source}` }, state.source));
+  }
+  if (state.managed) badges.push(el("span", { class: "zodal-dials-badge zodal-dials-managed", title: "managed by policy" }, "policy"));
+  if (state.dirty) badges.push(el("span", { class: "zodal-dials-badge zodal-dials-dirty" }, "modified"));
+  const reset = state.source && state.source !== "default" && !state.managed ? el("button", { type: "button", class: "zodal-dials-reset", onclick: () => options.onReset?.(field.key) }, "Reset") : null;
+  return el(
+    "div",
+    { class: "zodal-dials-field", "data-key": field.key, "data-widget": field.widget },
+    el("label", { class: "zodal-dials-label", for: field.key }, field.label, ...badges),
+    field.description ? el("p", { class: "zodal-dials-description" }, field.description) : null,
+    el("div", { class: "zodal-dials-control" }, control, reset)
+  );
+}
+function filterRows(panel, query) {
+  const q = query.trim().toLowerCase();
+  for (const row of Array.from(panel.querySelectorAll(".zodal-dials-field"))) {
+    const key = (row.getAttribute("data-key") ?? "").toLowerCase();
+    const label = (row.querySelector(".zodal-dials-label")?.textContent ?? "").toLowerCase();
+    const description = (row.querySelector(".zodal-dials-description")?.textContent ?? "").toLowerCase();
+    row.style.display = !q || key.includes(q) || label.includes(q) || description.includes(q) ? "" : "none";
+  }
+}
+function renderSettingsPanel(form, states, options = {}) {
+  const registry = options.registry ?? createVanillaSettingsRegistry();
+  const opts = { ...options, registry };
+  const panel = el("div", { class: "zodal-dials-panel" });
+  if (options.search !== false) {
+    panel.appendChild(
+      el("input", {
+        type: "search",
+        class: "zodal-dials-search",
+        placeholder: "Search settings\u2026",
+        oninput: (e) => filterRows(panel, e.target.value)
+      })
+    );
+  }
+  const primary = (f) => f.facets?.find((x) => !x.startsWith("@")) ?? "_ungrouped";
+  const buckets = /* @__PURE__ */ new Map();
+  for (const f of form.fields) {
+    const id = primary(f);
+    const list = buckets.get(id);
+    if (list) list.push(f);
+    else buckets.set(id, [f]);
+  }
+  const groupMeta = new Map(form.groups.map((g) => [g.id, g]));
+  const sectionIds = [...buckets.keys()].sort(
+    (a, b) => (groupMeta.get(a)?.order ?? 500) - (groupMeta.get(b)?.order ?? 500) || a.localeCompare(b)
+  );
+  for (const id of sectionIds) {
+    const title = groupMeta.get(id)?.title ?? humanize(id);
+    const section = el("section", { class: "zodal-dials-group", "data-group": id }, el("h3", { class: "zodal-dials-group-title" }, title));
+    for (const f of buckets.get(id) ?? []) section.appendChild(renderField(f, states[f.key] ?? emptyState(), opts));
+    panel.appendChild(section);
+  }
+  return panel;
+}
+export {
+  createVanillaSettingsRegistry,
+  el,
+  renderArray,
+  renderField,
+  renderNumber,
+  renderObject,
+  renderRadio,
+  renderRawJson,
+  renderSecret,
+  renderSelect,
+  renderSettingsPanel,
+  renderSlider,
+  renderSwitch,
+  renderText,
+  renderTextarea,
+  widgetIs
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dom.ts","../src/widgets.ts","../src/registry.ts","../src/panel.ts"],"sourcesContent":["/**\n * Internal DOM element factory (no framework). Sets value/checked/disabled/selected as PROPERTIES\n * (so form controls reflect state), `on*` keys as event listeners, and everything else as attributes.\n */\n\nexport type Attrs = Record<string, unknown>;\n\nconst PROP_KEYS = new Set(['value', 'checked', 'disabled', 'selected']);\n\nexport function el<K extends keyof HTMLElementTagNameMap>(\n  tag: K,\n  attrs?: Attrs | null,\n  ...children: Array<Node | string | null | undefined>\n): HTMLElementTagNameMap[K] {\n  const element = document.createElement(tag);\n  if (attrs) {\n    for (const [key, value] of Object.entries(attrs)) {\n      if (value === undefined || value === null || value === false) continue;\n      if (key.startsWith('on') && typeof value === 'function') {\n        element.addEventListener(key.slice(2).toLowerCase(), value as EventListener);\n      } else if (key === 'class') {\n        element.className = String(value);\n      } else if (PROP_KEYS.has(key)) {\n        (element as unknown as Record<string, unknown>)[key] = value;\n      } else {\n        element.setAttribute(key, String(value));\n      }\n    }\n  }\n  for (const child of children) {\n    if (child == null) continue;\n    element.appendChild(typeof child === 'string' ? document.createTextNode(child) : child);\n  }\n  return element;\n}\n","/**\n * Vanilla widget renderers — each produces the control element for a setting from its config +\n * current state, wiring change events to the handlers. A `secret` value (a masked `SecretRef`) is\n * shown as a status + a write-only field. Structured/unknown values fall back to a raw JSON editor\n * (the rawJson renderer states WHY). No framework; pure DOM.\n */\n\nimport { el } from './dom.js';\nimport { isSecretRef } from '@zodal/dials-core';\nimport type { SettingFieldConfig, SettingFieldState } from '@zodal/dials-ui';\nimport type { SettingRenderFn } from './types.js';\n\nconst isDisabled = (field: SettingFieldConfig, state: SettingFieldState): boolean => field.readOnly || state.managed;\nconst asText = (v: unknown): string => (v == null ? '' : String(v));\n\n/** Decode a numeric input, returning undefined for empty/non-numeric so clearing the box is treated\n *  as \"no change\" (use Reset to unset) rather than silently writing 0 / NaN. */\nfunction decodeNumber(raw: string): number | undefined {\n  if (raw.trim() === '') return undefined;\n  const n = Number(raw);\n  return Number.isNaN(n) ? undefined : n;\n}\nconst jsonString = (v: unknown): string => {\n  try {\n    return JSON.stringify(v ?? null, null, 2);\n  } catch {\n    return String(v);\n  }\n};\n\nexport const renderSwitch: SettingRenderFn = (field, state, h) =>\n  el('input', {\n    type: 'checkbox',\n    class: 'zodal-dials-switch',\n    checked: state.value === true,\n    disabled: isDisabled(field, state),\n    onchange: (e: Event) => h.onChange?.(field.key, (e.target as HTMLInputElement).checked),\n  });\n\nexport const renderText: SettingRenderFn = (field, state, h) =>\n  el('input', {\n    type: 'text',\n    class: 'zodal-dials-text',\n    value: asText(state.value),\n    placeholder: asText(field.defaultValue),\n    disabled: isDisabled(field, state),\n    onchange: (e: Event) => h.onChange?.(field.key, (e.target as HTMLInputElement).value),\n  });\n\nexport const renderTextarea: SettingRenderFn = (field, state, h) =>\n  el(\n    'textarea',\n    {\n      class: 'zodal-dials-textarea',\n      disabled: isDisabled(field, state),\n      onchange: (e: Event) => h.onChange?.(field.key, (e.target as HTMLTextAreaElement).value),\n    },\n    asText(state.value),\n  );\n\nexport const renderNumber: SettingRenderFn = (field, state, h) =>\n  el('input', {\n    type: 'number',\n    class: 'zodal-dials-number',\n    value: asText(state.value),\n    min: field.bounds?.min,\n    max: field.bounds?.max,\n    disabled: isDisabled(field, state),\n    onchange: (e: Event) => {\n      const v = decodeNumber((e.target as HTMLInputElement).value);\n      if (v !== undefined) h.onChange?.(field.key, v);\n    },\n  });\n\nexport const renderSlider: SettingRenderFn = (field, state, h) => {\n  const output = el('output', { class: 'zodal-dials-slider-value' }, asText(state.value));\n  const input = el('input', {\n    type: 'range',\n    class: 'zodal-dials-slider',\n    value: asText(state.value),\n    min: field.bounds?.min,\n    max: field.bounds?.max,\n    disabled: isDisabled(field, state),\n    oninput: (e: Event) => {\n      output.textContent = (e.target as HTMLInputElement).value;\n    },\n    onchange: (e: Event) => {\n      const v = decodeNumber((e.target as HTMLInputElement).value);\n      if (v !== undefined) h.onChange?.(field.key, v);\n    },\n  });\n  return el('span', { class: 'zodal-dials-slider-wrap' }, input, output);\n};\n\nexport const renderSelect: SettingRenderFn = (field, state, h) => {\n  const select = el(\n    'select',\n    {\n      class: 'zodal-dials-select',\n      disabled: isDisabled(field, state),\n      onchange: (e: Event) => h.onChange?.(field.key, (e.target as HTMLSelectElement).value),\n    },\n    ...(field.enumValues ?? []).map((v) => el('option', { value: v }, v)),\n  );\n  select.value = asText(state.value);\n  return select;\n};\n\nexport const renderRadio: SettingRenderFn = (field, state, h) =>\n  el(\n    'fieldset',\n    { class: 'zodal-dials-radio' },\n    ...(field.enumValues ?? []).map((v) =>\n      el(\n        'label',\n        null,\n        el('input', {\n          type: 'radio',\n          name: field.key,\n          value: v,\n          checked: state.value === v,\n          disabled: isDisabled(field, state),\n          onchange: () => h.onChange?.(field.key, v),\n        }),\n        v,\n      ),\n    ),\n  );\n\nexport const renderSecret: SettingRenderFn = (field, state, h) => {\n  const ref = isSecretRef(state.value) ? state.value : undefined;\n  const status = el('span', { class: 'zodal-dials-secret-status' }, ref ? ref.masked : 'not set');\n  const input = el('input', {\n    type: 'password',\n    class: 'zodal-dials-secret',\n    placeholder: 'Enter new value',\n    disabled: isDisabled(field, state),\n    onchange: (e: Event) => h.onChange?.(field.key, (e.target as HTMLInputElement).value),\n  });\n  return el('span', { class: 'zodal-dials-secret-wrap' }, status, input);\n};\n\nfunction renderJsonish(cssClass: string, note?: string): SettingRenderFn {\n  return (field, state, h) => {\n    // Defense in depth: a JSON/raw editor must never serialize a secret, even if reached by a\n    // widget↔sensitivity mismatch — always fall back to the masked secret widget.\n    if (field.sensitivity === 'secret' || isSecretRef(state.value)) return renderSecret(field, state, h);\n    const textarea = el(\n      'textarea',\n      {\n        class: cssClass,\n        disabled: isDisabled(field, state),\n        onchange: (e: Event) => {\n          try {\n            h.onChange?.(field.key, JSON.parse((e.target as HTMLTextAreaElement).value));\n          } catch {\n            // invalid JSON: a real renderer would surface an error; the reference renderer ignores it.\n          }\n        },\n      },\n      jsonString(state.value),\n    );\n    return note\n      ? el('span', { class: 'zodal-dials-json-wrap' }, el('small', { class: 'zodal-dials-json-note' }, note), textarea)\n      : textarea;\n  };\n}\n\nexport const renderObject = renderJsonish('zodal-dials-object');\nexport const renderArray = renderJsonish('zodal-dials-array');\nexport const renderRawJson = renderJsonish('zodal-dials-rawjson', 'rendered as raw JSON (no structured editor for this type)');\n","/**\n * The vanilla settings renderer registry — populates a `@zodal/dials-ui` `RendererRegistry` with one\n * DOM renderer per widget kind, the masked secret widget at the OVERRIDE band, and a terminal rawJson\n * renderer (via `alwaysMatch`) so every setting renders to something. The widget kind is supplied via\n * the render context, so selection is open-closed (a consumer can register a higher-priority override).\n */\n\nimport { createSettingsRendererRegistry, secretRoleIs, alwaysMatch, PRIORITY } from '@zodal/dials-ui';\nimport type { RendererRegistry, RendererTester, WidgetKind } from '@zodal/dials-ui';\nimport type { SettingRenderFn } from './types.js';\nimport {\n  renderSwitch,\n  renderSelect,\n  renderRadio,\n  renderSlider,\n  renderNumber,\n  renderText,\n  renderTextarea,\n  renderObject,\n  renderArray,\n  renderRawJson,\n  renderSecret,\n} from './widgets.js';\n\n/** Tester matching a field's resolved widget kind (supplied via the render context as `widget`). */\nexport function widgetIs(kind: WidgetKind): RendererTester {\n  return (_field, ctx) => (ctx.widget === kind ? PRIORITY.LIBRARY : -1);\n}\n\nconst WIDGET_RENDERERS: Array<[WidgetKind, SettingRenderFn]> = [\n  ['switch', renderSwitch],\n  ['select', renderSelect],\n  ['radio', renderRadio],\n  ['slider', renderSlider],\n  ['number', renderNumber],\n  ['text', renderText],\n  ['textarea', renderTextarea],\n  ['color', renderText],\n  ['date', renderText],\n  ['path', renderText],\n  ['object', renderObject],\n  ['array', renderArray],\n  // Honor a resolved `secret` widget kind directly, so secret masking does not depend solely on the\n  // sensitivity context staying in lockstep (secretRoleIs at OVERRIDE remains the primary signal).\n  ['secret', renderSecret],\n];\n\n/** Create a vanilla settings renderer registry (a `@zodal/dials-ui` registry of DOM renderers). */\nexport function createVanillaSettingsRegistry(): RendererRegistry<SettingRenderFn> {\n  const registry = createSettingsRendererRegistry<SettingRenderFn>();\n  registry.register({ tester: alwaysMatch(), renderer: renderRawJson, name: 'rawJson' });\n  for (const [kind, renderer] of WIDGET_RENDERERS) registry.register({ tester: widgetIs(kind), renderer, name: kind });\n  registry.register({ tester: secretRoleIs(), renderer: renderSecret, name: 'secret' });\n  return registry;\n}\n","/**\n * Field and panel assembly. `renderField` builds one labeled row (label + provenance badges +\n * description + control via the registry + a reset button when overridden). `renderSettingsPanel`\n * builds the whole panel: a client-side search/filter box + a section per primary facet. Each setting\n * renders ONCE (under its primary facet); multi-membership facets and computed groups drive filtering,\n * not duplicate controls.\n */\n\nimport { el } from './dom.js';\nimport type { RendererRegistry, SettingFieldConfig, SettingFieldState, SettingsForm } from '@zodal/dials-ui';\nimport type { ResolvedFieldAffordance } from '@zodal/core';\nimport type { SettingKey } from '@zodal/dials-core';\nimport type { FieldHandlers, SettingRenderFn } from './types.js';\nimport { createVanillaSettingsRegistry } from './registry.js';\n\nexport interface RenderOptions extends FieldHandlers {\n  /** Override the renderer registry (e.g. to register custom widgets). */\n  registry?: RendererRegistry<SettingRenderFn>;\n  /** Include the client-side search/filter box. Default: true. */\n  search?: boolean;\n}\n\nfunction humanize(id: string): string {\n  return id.replace(/^[@_]/, '').replace(/[._-]+/g, ' ').replace(/\\b\\w/g, (c) => c.toUpperCase()) || 'Other';\n}\n\nfunction emptyState(): SettingFieldState {\n  return { value: undefined, managed: false, shadowed: false, dirty: false };\n}\n\n/** Render one setting as a labeled field row. */\nexport function renderField(\n  field: SettingFieldConfig,\n  state: SettingFieldState,\n  options: RenderOptions = {},\n): HTMLElement {\n  const registry = options.registry ?? createVanillaSettingsRegistry();\n  const render = registry.resolve({ zodType: field.zodType } as unknown as ResolvedFieldAffordance, {\n    mode: 'form',\n    widget: field.widget,\n    sensitivity: field.sensitivity,\n  });\n  const control = render ? render(field, state, options) : el('span', null, '(no renderer)');\n\n  const badges: HTMLElement[] = [];\n  if (state.source && state.source !== 'default') {\n    badges.push(el('span', { class: 'zodal-dials-badge zodal-dials-source', title: `set by ${state.source}` }, state.source));\n  }\n  if (state.managed) badges.push(el('span', { class: 'zodal-dials-badge zodal-dials-managed', title: 'managed by policy' }, 'policy'));\n  if (state.dirty) badges.push(el('span', { class: 'zodal-dials-badge zodal-dials-dirty' }, 'modified'));\n\n  const reset =\n    state.source && state.source !== 'default' && !state.managed\n      ? el('button', { type: 'button', class: 'zodal-dials-reset', onclick: () => options.onReset?.(field.key) }, 'Reset')\n      : null;\n\n  return el(\n    'div',\n    { class: 'zodal-dials-field', 'data-key': field.key, 'data-widget': field.widget },\n    el('label', { class: 'zodal-dials-label', for: field.key }, field.label, ...badges),\n    field.description ? el('p', { class: 'zodal-dials-description' }, field.description) : null,\n    el('div', { class: 'zodal-dials-control' }, control, reset),\n  );\n}\n\nfunction filterRows(panel: HTMLElement, query: string): void {\n  const q = query.trim().toLowerCase();\n  for (const row of Array.from(panel.querySelectorAll<HTMLElement>('.zodal-dials-field'))) {\n    const key = (row.getAttribute('data-key') ?? '').toLowerCase();\n    const label = (row.querySelector('.zodal-dials-label')?.textContent ?? '').toLowerCase();\n    const description = (row.querySelector('.zodal-dials-description')?.textContent ?? '').toLowerCase();\n    row.style.display = !q || key.includes(q) || label.includes(q) || description.includes(q) ? '' : 'none';\n  }\n}\n\n/** Render the full settings panel (search box + a section per primary facet). */\nexport function renderSettingsPanel(\n  form: SettingsForm,\n  states: Record<SettingKey, SettingFieldState>,\n  options: RenderOptions = {},\n): HTMLElement {\n  const registry = options.registry ?? createVanillaSettingsRegistry();\n  const opts: RenderOptions = { ...options, registry };\n  const panel = el('div', { class: 'zodal-dials-panel' });\n\n  if (options.search !== false) {\n    panel.appendChild(\n      el('input', {\n        type: 'search',\n        class: 'zodal-dials-search',\n        placeholder: 'Search settings…',\n        oninput: (e: Event) => filterRows(panel, (e.target as HTMLInputElement).value),\n      }),\n    );\n  }\n\n  // Bucket each field under its primary (first non-computed) facet, so every field renders once.\n  const primary = (f: SettingFieldConfig): string => f.facets?.find((x) => !x.startsWith('@')) ?? '_ungrouped';\n  const buckets = new Map<string, SettingFieldConfig[]>();\n  for (const f of form.fields) {\n    const id = primary(f);\n    const list = buckets.get(id);\n    if (list) list.push(f);\n    else buckets.set(id, [f]);\n  }\n\n  const groupMeta = new Map(form.groups.map((g) => [g.id, g]));\n  const sectionIds = [...buckets.keys()].sort(\n    (a, b) => (groupMeta.get(a)?.order ?? 500) - (groupMeta.get(b)?.order ?? 500) || a.localeCompare(b),\n  );\n\n  for (const id of sectionIds) {\n    const title = groupMeta.get(id)?.title ?? humanize(id);\n    const section = el('section', { class: 'zodal-dials-group', 'data-group': id }, el('h3', { class: 'zodal-dials-group-title' }, title));\n    for (const f of buckets.get(id) ?? []) section.appendChild(renderField(f, states[f.key] ?? emptyState(), opts));\n    panel.appendChild(section);\n  }\n\n  return panel;\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@zodal/dials-ui-vanilla",
+  "version": "0.1.0",
+  "description": "Vanilla HTML/JS reference renderer for @zodal/dials-ui — no framework, produces DOM from the headless settings config",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@zodal/core": "^0.1.2",
+    "@zodal/dials-core": "^0.1.0",
+    "@zodal/dials-ui": "^0.1.0",
+    "zod": ">=4.1.13"
+  },
+  "devDependencies": {
+    "@zodal/core": "^0.1.2",
+    "jsdom": "^25.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.7.0",
+    "vitest": "^3.0.0",
+    "zod": "^4.4.0",
+    "@zodal/dials-core": "0.1.0",
+    "@zodal/dials-ui": "0.1.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  }
+}