@zodal/dials-ui-shadcn 0.1.0

package/README.md

@@ -0,0 +1,24 @@
+# @zodal/dials-ui-shadcn
+
+React renderer for [`@zodal/dials-ui`](https://github.com/i2mint/zodal-dials) — settings panel components that consume the headless config. Plain elements with `zodal-dials-*` classes; swap in shadcn/ui primitives in a consumer.
+
+```bash
+npm i @zodal/dials-ui-shadcn @zodal/dials-core @zodal/dials-ui react react-dom
+```
+
+```tsx
+import { SettingsPanel } from '@zodal/dials-ui-shadcn';
+import { toSettingsForm, toFieldStates } from '@zodal/dials-ui';
+
+const result = dials.resolve(layers, { maskSecrets: true });
+const form = toSettingsForm(dials, { result });
+const states = toFieldStates(form.fields, result, dirtyKeys);
+
+<SettingsPanel form={form} states={states} onChange={setValue} onReset={resetKey} />
+```
+
+- `SettingsPanel` (search + facet sections) and `SettingField` (one row, provenance badges + reset).
+- `createShadcnSettingsRegistry()` — a per-widget React control registry with a terminal rawJson fallback; register a higher-priority control to override.
+- Secrets render **masked** (write-only field, masked status) and never echo plaintext.
+
+Part of the [zodal-dials](https://github.com/i2mint/zodal-dials) ecosystem.

package/dist/index.cjs

@@ -0,0 +1,286 @@
+"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, {
+  NumberControl: () => NumberControl,
+  RadioControl: () => RadioControl,
+  RawJsonControl: () => RawJsonControl,
+  SecretControl: () => SecretControl,
+  SelectControl: () => SelectControl,
+  SettingField: () => SettingField,
+  SettingsPanel: () => SettingsPanel,
+  SliderControl: () => SliderControl,
+  SwitchControl: () => SwitchControl,
+  TextControl: () => TextControl,
+  createShadcnSettingsRegistry: () => createShadcnSettingsRegistry,
+  widgetIs: () => widgetIs
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/widgets.ts
+var import_react = require("react");
+var import_dials_core = require("@zodal/dials-core");
+var isDisabled = (p) => p.field.readOnly || p.state.managed;
+var asText = (v) => v == null ? "" : String(v);
+var jsonString = (v) => {
+  try {
+    return JSON.stringify(v ?? null, null, 2);
+  } catch {
+    return String(v);
+  }
+};
+function decodeNumber(raw) {
+  if (raw.trim() === "") return void 0;
+  const n = Number(raw);
+  return Number.isNaN(n) ? void 0 : n;
+}
+var SwitchControl = (p) => (0, import_react.createElement)("input", {
+  type: "checkbox",
+  className: "zodal-dials-switch",
+  checked: p.state.value === true,
+  disabled: isDisabled(p),
+  onChange: (e) => p.onChange?.(e.target.checked)
+});
+var TextControl = (p) => (0, import_react.createElement)("input", {
+  type: "text",
+  className: "zodal-dials-text",
+  value: asText(p.state.value),
+  // never use a secret's default as a placeholder (defense in depth; secret defaults are omitted upstream)
+  placeholder: p.field.sensitivity === "secret" ? void 0 : asText(p.field.defaultValue),
+  disabled: isDisabled(p),
+  onChange: (e) => p.onChange?.(e.target.value)
+});
+var NumberControl = (p) => (0, import_react.createElement)("input", {
+  type: "number",
+  className: "zodal-dials-number",
+  value: asText(p.state.value),
+  min: p.field.bounds?.min,
+  max: p.field.bounds?.max,
+  disabled: isDisabled(p),
+  onChange: (e) => {
+    const v = decodeNumber(e.target.value);
+    if (v !== void 0) p.onChange?.(v);
+  }
+});
+var SliderControl = (p) => (0, import_react.createElement)(
+  "span",
+  { className: "zodal-dials-slider-wrap" },
+  (0, import_react.createElement)("input", {
+    type: "range",
+    className: "zodal-dials-slider",
+    value: asText(p.state.value),
+    min: p.field.bounds?.min,
+    max: p.field.bounds?.max,
+    disabled: isDisabled(p),
+    onChange: (e) => {
+      const v = decodeNumber(e.target.value);
+      if (v !== void 0) p.onChange?.(v);
+    }
+  }),
+  (0, import_react.createElement)("output", { className: "zodal-dials-slider-value" }, asText(p.state.value))
+);
+var SelectControl = (p) => (0, import_react.createElement)(
+  "select",
+  {
+    className: "zodal-dials-select",
+    value: asText(p.state.value),
+    disabled: isDisabled(p),
+    onChange: (e) => p.onChange?.(e.target.value)
+  },
+  ...(p.field.enumValues ?? []).map((v, i) => (0, import_react.createElement)("option", { key: `${i}:${v}`, value: v }, v))
+);
+var RadioControl = (p) => (0, import_react.createElement)(
+  "fieldset",
+  { className: "zodal-dials-radio" },
+  ...(p.field.enumValues ?? []).map(
+    (v, i) => (0, import_react.createElement)(
+      "label",
+      { key: `${i}:${v}` },
+      (0, import_react.createElement)("input", {
+        type: "radio",
+        name: p.field.key,
+        value: v,
+        checked: p.state.value === v,
+        disabled: isDisabled(p),
+        onChange: () => p.onChange?.(v)
+      }),
+      v
+    )
+  )
+);
+var SecretControl = (p) => {
+  const ref = (0, import_dials_core.isSecretRef)(p.state.value) ? p.state.value : void 0;
+  return (0, import_react.createElement)(
+    "span",
+    { className: "zodal-dials-secret-wrap" },
+    (0, import_react.createElement)("span", { className: "zodal-dials-secret-status" }, ref ? ref.masked : "not set"),
+    (0, import_react.createElement)("input", {
+      type: "password",
+      className: "zodal-dials-secret",
+      placeholder: "Enter new value",
+      disabled: isDisabled(p),
+      onChange: (e) => p.onChange?.(e.target.value)
+    })
+  );
+};
+var RawJsonControl = (p) => {
+  if (p.field.sensitivity === "secret" || (0, import_dials_core.isSecretRef)(p.state.value)) return SecretControl(p);
+  return (0, import_react.createElement)(
+    "span",
+    { className: "zodal-dials-json-wrap" },
+    (0, import_react.createElement)("small", { className: "zodal-dials-json-note" }, "rendered as raw JSON (no structured editor for this type)"),
+    (0, import_react.createElement)("textarea", {
+      // key on the serialized value: remounts (re-seeds) the uncontrolled textarea when the upstream
+      // value changes (fixes desync), while keeping local typing smooth when it does not.
+      key: jsonString(p.state.value),
+      className: "zodal-dials-rawjson",
+      defaultValue: jsonString(p.state.value),
+      disabled: isDisabled(p),
+      onChange: (e) => {
+        try {
+          p.onChange?.(JSON.parse(e.target.value));
+        } catch {
+        }
+      }
+    })
+  );
+};
+
+// 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_CONTROLS = [
+  ["switch", SwitchControl],
+  ["text", TextControl],
+  ["textarea", TextControl],
+  ["number", NumberControl],
+  ["slider", SliderControl],
+  ["select", SelectControl],
+  ["radio", RadioControl],
+  ["color", TextControl],
+  ["date", TextControl],
+  ["path", TextControl],
+  ["object", RawJsonControl],
+  ["array", RawJsonControl],
+  ["secret", SecretControl]
+];
+function createShadcnSettingsRegistry() {
+  const registry = (0, import_dials_ui.createSettingsRendererRegistry)();
+  registry.register({ tester: (0, import_dials_ui.alwaysMatch)(), renderer: RawJsonControl, name: "rawJson" });
+  for (const [kind, control] of WIDGET_CONTROLS) registry.register({ tester: widgetIs(kind), renderer: control, name: kind });
+  registry.register({ tester: (0, import_dials_ui.secretRoleIs)(), renderer: SecretControl, name: "secret" });
+  return registry;
+}
+
+// src/components.ts
+var import_react2 = require("react");
+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 SettingField({ field, state, onChange, onReset, registry }) {
+  const reg = (0, import_react2.useMemo)(() => registry ?? createShadcnSettingsRegistry(), [registry]);
+  const Control = reg.resolve({ zodType: field.zodType }, {
+    mode: "form",
+    widget: field.widget,
+    sensitivity: field.sensitivity
+  });
+  const badges = [];
+  if (state.source && state.source !== "default") {
+    badges.push((0, import_react2.createElement)("span", { key: "src", className: "zodal-dials-badge zodal-dials-source", title: `set by ${state.source}` }, state.source));
+  }
+  if (state.managed) badges.push((0, import_react2.createElement)("span", { key: "mng", className: "zodal-dials-badge zodal-dials-managed", title: "managed by policy" }, "policy"));
+  if (state.dirty) badges.push((0, import_react2.createElement)("span", { key: "dty", className: "zodal-dials-badge zodal-dials-dirty" }, "modified"));
+  const reset = state.source && state.source !== "default" && !state.managed ? (0, import_react2.createElement)("button", { type: "button", className: "zodal-dials-reset", onClick: () => onReset?.(field.key) }, "Reset") : null;
+  const control = Control ? (0, import_react2.createElement)(Control, { field, state, onChange: (value) => onChange?.(field.key, value) }) : (0, import_react2.createElement)("span", null, "(no renderer)");
+  return (0, import_react2.createElement)(
+    "div",
+    { className: "zodal-dials-field", "data-key": field.key, "data-widget": field.widget },
+    (0, import_react2.createElement)("label", { className: "zodal-dials-label", htmlFor: field.key }, field.label, ...badges),
+    field.description ? (0, import_react2.createElement)("p", { className: "zodal-dials-description" }, field.description) : null,
+    (0, import_react2.createElement)("div", { className: "zodal-dials-control" }, control, reset)
+  );
+}
+function SettingsPanel({ form, states, onChange, onReset, registry, search = true }) {
+  const [query, setQuery] = (0, import_react2.useState)("");
+  const reg = (0, import_react2.useMemo)(() => registry ?? createShadcnSettingsRegistry(), [registry]);
+  const q = query.trim().toLowerCase();
+  const matches = (f) => !q || f.key.toLowerCase().includes(q) || f.label.toLowerCase().includes(q) || (f.description ?? "").toLowerCase().includes(q);
+  const primary = (f) => f.facets?.find((x) => !x.startsWith("@")) ?? "_ungrouped";
+  const groupMeta = new Map(form.groups.map((g) => [g.id, g]));
+  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 sectionIds = [...buckets.keys()].sort(
+    (a, b) => (groupMeta.get(a)?.order ?? 500) - (groupMeta.get(b)?.order ?? 500) || a.localeCompare(b)
+  );
+  const children = [];
+  if (search) {
+    children.push(
+      (0, import_react2.createElement)("input", {
+        key: "__search",
+        type: "search",
+        className: "zodal-dials-search",
+        placeholder: "Search settings\u2026",
+        value: query,
+        onChange: (e) => setQuery(e.target.value)
+      })
+    );
+  }
+  for (const id of sectionIds) {
+    const fields = (buckets.get(id) ?? []).filter(matches);
+    if (fields.length === 0) continue;
+    const title = groupMeta.get(id)?.title ?? humanize(id);
+    children.push(
+      (0, import_react2.createElement)(
+        "section",
+        { key: id, className: "zodal-dials-group", "data-group": id },
+        (0, import_react2.createElement)("h3", { className: "zodal-dials-group-title" }, title),
+        ...fields.map((f) => (0, import_react2.createElement)(SettingField, { key: f.key, field: f, state: states[f.key] ?? emptyState(), onChange, onReset, registry: reg }))
+      )
+    );
+  }
+  return (0, import_react2.createElement)("div", { className: "zodal-dials-panel" }, ...children);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NumberControl,
+  RadioControl,
+  RawJsonControl,
+  SecretControl,
+  SelectControl,
+  SettingField,
+  SettingsPanel,
+  SliderControl,
+  SwitchControl,
+  TextControl,
+  createShadcnSettingsRegistry,
+  widgetIs
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/widgets.ts","../src/registry.ts","../src/components.ts"],"sourcesContent":["/**\n * @zodal/dials-ui-shadcn — a React/shadcn renderer for @zodal/dials-ui.\n *\n * React components that turn the headless settings config (`SettingsForm` + field states) into a\n * settings panel: `SettingsPanel` (search + grouped fields) and `SettingField` (one row), with a\n * per-widget control registry (`createShadcnSettingsRegistry`) and a terminal rawJson fallback. The\n * controls are plain elements with `zodal-dials-*` class names — swap in shadcn/ui primitives in a\n * consumer. Secrets render masked and never echo plaintext.\n */\n\nexport type { ControlProps, SettingControl, PanelHandlers } from './types.js';\n\nexport {\n  SwitchControl,\n  TextControl,\n  NumberControl,\n  SliderControl,\n  SelectControl,\n  RadioControl,\n  SecretControl,\n  RawJsonControl,\n} from './widgets.js';\n\nexport { createShadcnSettingsRegistry, widgetIs } from './registry.js';\n\nexport { SettingField, SettingsPanel } from './components.js';\nexport type { SettingFieldProps, SettingsPanelProps } from './components.js';\n","/**\n * React widget controls for settings — plain elements with `zodal-dials-*` class names (swap in\n * shadcn/ui `Switch`, `Select`, `Slider`, … in a consumer). Uses `React.createElement` (no JSX). A\n * secret renders a masked status + write-only field and never echoes plaintext; structured/unknown\n * values fall back to a raw JSON editor that also refuses to serialize a secret.\n */\n\nimport { createElement as h } from 'react';\nimport type { ChangeEvent } from 'react';\nimport { isSecretRef } from '@zodal/dials-core';\nimport type { ControlProps, SettingControl } from './types.js';\n\nconst isDisabled = (p: ControlProps): boolean => p.field.readOnly || p.state.managed;\nconst asText = (v: unknown): string => (v == null ? '' : String(v));\nconst jsonString = (v: unknown): string => {\n  try {\n    return JSON.stringify(v ?? null, null, 2);\n  } catch {\n    return String(v);\n  }\n};\n\n/** Empty/non-numeric input → undefined (treated as \"no change\"; use Reset to unset). */\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}\n\nexport const SwitchControl: SettingControl = (p) =>\n  h('input', {\n    type: 'checkbox',\n    className: 'zodal-dials-switch',\n    checked: p.state.value === true,\n    disabled: isDisabled(p),\n    onChange: (e: ChangeEvent<HTMLInputElement>) => p.onChange?.(e.target.checked),\n  });\n\nexport const TextControl: SettingControl = (p) =>\n  h('input', {\n    type: 'text',\n    className: 'zodal-dials-text',\n    value: asText(p.state.value),\n    // never use a secret's default as a placeholder (defense in depth; secret defaults are omitted upstream)\n    placeholder: p.field.sensitivity === 'secret' ? undefined : asText(p.field.defaultValue),\n    disabled: isDisabled(p),\n    onChange: (e: ChangeEvent<HTMLInputElement>) => p.onChange?.(e.target.value),\n  });\n\nexport const NumberControl: SettingControl = (p) =>\n  h('input', {\n    type: 'number',\n    className: 'zodal-dials-number',\n    value: asText(p.state.value),\n    min: p.field.bounds?.min,\n    max: p.field.bounds?.max,\n    disabled: isDisabled(p),\n    onChange: (e: ChangeEvent<HTMLInputElement>) => {\n      const v = decodeNumber(e.target.value);\n      if (v !== undefined) p.onChange?.(v);\n    },\n  });\n\nexport const SliderControl: SettingControl = (p) =>\n  h(\n    'span',\n    { className: 'zodal-dials-slider-wrap' },\n    h('input', {\n      type: 'range',\n      className: 'zodal-dials-slider',\n      value: asText(p.state.value),\n      min: p.field.bounds?.min,\n      max: p.field.bounds?.max,\n      disabled: isDisabled(p),\n      onChange: (e: ChangeEvent<HTMLInputElement>) => {\n        const v = decodeNumber(e.target.value);\n        if (v !== undefined) p.onChange?.(v);\n      },\n    }),\n    h('output', { className: 'zodal-dials-slider-value' }, asText(p.state.value)),\n  );\n\nexport const SelectControl: SettingControl = (p) =>\n  h(\n    'select',\n    {\n      className: 'zodal-dials-select',\n      value: asText(p.state.value),\n      disabled: isDisabled(p),\n      onChange: (e: ChangeEvent<HTMLSelectElement>) => p.onChange?.(e.target.value),\n    },\n    ...(p.field.enumValues ?? []).map((v, i) => h('option', { key: `${i}:${v}`, value: v }, v)),\n  );\n\nexport const RadioControl: SettingControl = (p) =>\n  h(\n    'fieldset',\n    { className: 'zodal-dials-radio' },\n    ...(p.field.enumValues ?? []).map((v, i) =>\n      h(\n        'label',\n        { key: `${i}:${v}` },\n        h('input', {\n          type: 'radio',\n          name: p.field.key,\n          value: v,\n          checked: p.state.value === v,\n          disabled: isDisabled(p),\n          onChange: () => p.onChange?.(v),\n        }),\n        v,\n      ),\n    ),\n  );\n\nexport const SecretControl: SettingControl = (p) => {\n  const ref = isSecretRef(p.state.value) ? p.state.value : undefined;\n  return h(\n    'span',\n    { className: 'zodal-dials-secret-wrap' },\n    h('span', { className: 'zodal-dials-secret-status' }, ref ? ref.masked : 'not set'),\n    h('input', {\n      type: 'password',\n      className: 'zodal-dials-secret',\n      placeholder: 'Enter new value',\n      disabled: isDisabled(p),\n      onChange: (e: ChangeEvent<HTMLInputElement>) => p.onChange?.(e.target.value),\n    }),\n  );\n};\n\nexport const RawJsonControl: SettingControl = (p) => {\n  // Defense in depth: never serialize a secret as JSON — always fall back to the masked widget.\n  if (p.field.sensitivity === 'secret' || isSecretRef(p.state.value)) return SecretControl(p);\n  return h(\n    'span',\n    { className: 'zodal-dials-json-wrap' },\n    h('small', { className: 'zodal-dials-json-note' }, 'rendered as raw JSON (no structured editor for this type)'),\n    h('textarea', {\n      // key on the serialized value: remounts (re-seeds) the uncontrolled textarea when the upstream\n      // value changes (fixes desync), while keeping local typing smooth when it does not.\n      key: jsonString(p.state.value),\n      className: 'zodal-dials-rawjson',\n      defaultValue: jsonString(p.state.value),\n      disabled: isDisabled(p),\n      onChange: (e: ChangeEvent<HTMLTextAreaElement>) => {\n        try {\n          p.onChange?.(JSON.parse(e.target.value));\n        } catch {\n          // invalid JSON: ignore (a real renderer would surface an error)\n        }\n      },\n    }),\n  );\n};\n","/**\n * The shadcn settings renderer registry — a `@zodal/dials-ui` registry of React controls, one per\n * widget kind, the masked secret control at the OVERRIDE band, and a terminal rawJson control for\n * total coverage. Selection is open-closed (register a higher-priority control to override).\n */\n\nimport { createSettingsRendererRegistry, secretRoleIs, alwaysMatch, PRIORITY } from '@zodal/dials-ui';\nimport type { RendererRegistry, RendererTester, WidgetKind } from '@zodal/dials-ui';\nimport type { SettingControl } from './types.js';\nimport {\n  SwitchControl,\n  TextControl,\n  NumberControl,\n  SliderControl,\n  SelectControl,\n  RadioControl,\n  SecretControl,\n  RawJsonControl,\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_CONTROLS: Array<[WidgetKind, SettingControl]> = [\n  ['switch', SwitchControl],\n  ['text', TextControl],\n  ['textarea', TextControl],\n  ['number', NumberControl],\n  ['slider', SliderControl],\n  ['select', SelectControl],\n  ['radio', RadioControl],\n  ['color', TextControl],\n  ['date', TextControl],\n  ['path', TextControl],\n  ['object', RawJsonControl],\n  ['array', RawJsonControl],\n  ['secret', SecretControl],\n];\n\n/** Create a shadcn/React settings renderer registry. */\nexport function createShadcnSettingsRegistry(): RendererRegistry<SettingControl> {\n  const registry = createSettingsRendererRegistry<SettingControl>();\n  registry.register({ tester: alwaysMatch(), renderer: RawJsonControl, name: 'rawJson' });\n  for (const [kind, control] of WIDGET_CONTROLS) registry.register({ tester: widgetIs(kind), renderer: control, name: kind });\n  registry.register({ tester: secretRoleIs(), renderer: SecretControl, name: 'secret' });\n  return registry;\n}\n","/**\n * The React settings components: `SettingField` (label + provenance badges + control via the\n * registry + reset) and `SettingsPanel` (a search box + a section per primary facet; each setting\n * renders once). Uses `React.createElement` (no JSX). Plain elements + `zodal-dials-*` classes — swap\n * in shadcn/ui primitives in a consumer.\n */\n\nimport { createElement as h, useMemo, useState } from 'react';\nimport type { ChangeEvent, ReactElement } from 'react';\nimport type { ResolvedFieldAffordance } from '@zodal/core';\nimport type { SettingKey } from '@zodal/dials-core';\nimport type { RendererRegistry, SettingFieldConfig, SettingFieldState, SettingsForm } from '@zodal/dials-ui';\nimport type { PanelHandlers, SettingControl } from './types.js';\nimport { createShadcnSettingsRegistry } from './registry.js';\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\nexport interface SettingFieldProps extends PanelHandlers {\n  field: SettingFieldConfig;\n  state: SettingFieldState;\n  registry?: RendererRegistry<SettingControl>;\n}\n\n/** Render one setting as a labeled field row. */\nexport function SettingField({ field, state, onChange, onReset, registry }: SettingFieldProps): ReactElement {\n  const reg = useMemo(() => registry ?? createShadcnSettingsRegistry(), [registry]);\n  const Control = reg.resolve({ zodType: field.zodType } as unknown as ResolvedFieldAffordance, {\n    mode: 'form',\n    widget: field.widget,\n    sensitivity: field.sensitivity,\n  });\n\n  const badges: ReactElement[] = [];\n  if (state.source && state.source !== 'default') {\n    badges.push(h('span', { key: 'src', className: 'zodal-dials-badge zodal-dials-source', title: `set by ${state.source}` }, state.source));\n  }\n  if (state.managed) badges.push(h('span', { key: 'mng', className: 'zodal-dials-badge zodal-dials-managed', title: 'managed by policy' }, 'policy'));\n  if (state.dirty) badges.push(h('span', { key: 'dty', className: 'zodal-dials-badge zodal-dials-dirty' }, 'modified'));\n\n  const reset =\n    state.source && state.source !== 'default' && !state.managed\n      ? h('button', { type: 'button', className: 'zodal-dials-reset', onClick: () => onReset?.(field.key) }, 'Reset')\n      : null;\n\n  const control = Control\n    ? h(Control, { field, state, onChange: (value: unknown) => onChange?.(field.key, value) })\n    : h('span', null, '(no renderer)');\n\n  return h(\n    'div',\n    { className: 'zodal-dials-field', 'data-key': field.key, 'data-widget': field.widget },\n    h('label', { className: 'zodal-dials-label', htmlFor: field.key }, field.label, ...badges),\n    field.description ? h('p', { className: 'zodal-dials-description' }, field.description) : null,\n    h('div', { className: 'zodal-dials-control' }, control, reset),\n  );\n}\n\nexport interface SettingsPanelProps extends PanelHandlers {\n  form: SettingsForm;\n  states: Record<SettingKey, SettingFieldState>;\n  registry?: RendererRegistry<SettingControl>;\n  /** Include the search box. Default: true. */\n  search?: boolean;\n}\n\n/** Render the full settings panel: a search box + a section per primary facet (each setting once). */\nexport function SettingsPanel({ form, states, onChange, onReset, registry, search = true }: SettingsPanelProps): ReactElement {\n  const [query, setQuery] = useState('');\n  const reg = useMemo(() => registry ?? createShadcnSettingsRegistry(), [registry]);\n  const q = query.trim().toLowerCase();\n  const matches = (f: SettingFieldConfig): boolean =>\n    !q || f.key.toLowerCase().includes(q) || f.label.toLowerCase().includes(q) || (f.description ?? '').toLowerCase().includes(q);\n\n  const primary = (f: SettingFieldConfig): string => f.facets?.find((x) => !x.startsWith('@')) ?? '_ungrouped';\n  const groupMeta = new Map(form.groups.map((g) => [g.id, g]));\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  const sectionIds = [...buckets.keys()].sort(\n    (a, b) => (groupMeta.get(a)?.order ?? 500) - (groupMeta.get(b)?.order ?? 500) || a.localeCompare(b),\n  );\n\n  const children: ReactElement[] = [];\n  if (search) {\n    children.push(\n      h('input', {\n        key: '__search',\n        type: 'search',\n        className: 'zodal-dials-search',\n        placeholder: 'Search settings…',\n        value: query,\n        onChange: (e: ChangeEvent<HTMLInputElement>) => setQuery(e.target.value),\n      }),\n    );\n  }\n  for (const id of sectionIds) {\n    const fields = (buckets.get(id) ?? []).filter(matches);\n    if (fields.length === 0) continue;\n    const title = groupMeta.get(id)?.title ?? humanize(id);\n    children.push(\n      h(\n        'section',\n        { key: id, className: 'zodal-dials-group', 'data-group': id },\n        h('h3', { className: 'zodal-dials-group-title' }, title),\n        ...fields.map((f) => h(SettingField, { key: f.key, field: f, state: states[f.key] ?? emptyState(), onChange, onReset, registry: reg })),\n      ),\n    );\n  }\n  return h('div', { className: 'zodal-dials-panel' }, ...children);\n}\n"],"mappings":"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","names":["h","import_react","h"]}

package/dist/index.d.cts

@@ -0,0 +1,71 @@
+import { ReactElement } from 'react';
+import { SettingFieldConfig, SettingFieldState, RendererRegistry, WidgetKind, RendererTester, SettingsForm } from '@zodal/dials-ui';
+import { SettingKey } from '@zodal/dials-core';
+
+/** React render contract for the shadcn settings renderer. */
+
+interface ControlProps {
+    field: SettingFieldConfig;
+    state: SettingFieldState;
+    /** Called with the decoded value when the control changes. */
+    onChange?: (value: unknown) => void;
+}
+/** A widget control: a React component rendering the input for a setting. */
+type SettingControl = (props: ControlProps) => ReactElement;
+interface PanelHandlers {
+    onChange?: (key: SettingKey, value: unknown) => void;
+    onReset?: (key: SettingKey) => void;
+}
+
+/**
+ * React widget controls for settings — plain elements with `zodal-dials-*` class names (swap in
+ * shadcn/ui `Switch`, `Select`, `Slider`, … in a consumer). Uses `React.createElement` (no JSX). A
+ * secret renders a masked status + write-only field and never echoes plaintext; structured/unknown
+ * values fall back to a raw JSON editor that also refuses to serialize a secret.
+ */
+
+declare const SwitchControl: SettingControl;
+declare const TextControl: SettingControl;
+declare const NumberControl: SettingControl;
+declare const SliderControl: SettingControl;
+declare const SelectControl: SettingControl;
+declare const RadioControl: SettingControl;
+declare const SecretControl: SettingControl;
+declare const RawJsonControl: SettingControl;
+
+/**
+ * The shadcn settings renderer registry — a `@zodal/dials-ui` registry of React controls, one per
+ * widget kind, the masked secret control at the OVERRIDE band, and a terminal rawJson control for
+ * total coverage. Selection is open-closed (register a higher-priority control to override).
+ */
+
+/** Tester matching a field's resolved widget kind (supplied via the render context as `widget`). */
+declare function widgetIs(kind: WidgetKind): RendererTester;
+/** Create a shadcn/React settings renderer registry. */
+declare function createShadcnSettingsRegistry(): RendererRegistry<SettingControl>;
+
+/**
+ * The React settings components: `SettingField` (label + provenance badges + control via the
+ * registry + reset) and `SettingsPanel` (a search box + a section per primary facet; each setting
+ * renders once). Uses `React.createElement` (no JSX). Plain elements + `zodal-dials-*` classes — swap
+ * in shadcn/ui primitives in a consumer.
+ */
+
+interface SettingFieldProps extends PanelHandlers {
+    field: SettingFieldConfig;
+    state: SettingFieldState;
+    registry?: RendererRegistry<SettingControl>;
+}
+/** Render one setting as a labeled field row. */
+declare function SettingField({ field, state, onChange, onReset, registry }: SettingFieldProps): ReactElement;
+interface SettingsPanelProps extends PanelHandlers {
+    form: SettingsForm;
+    states: Record<SettingKey, SettingFieldState>;
+    registry?: RendererRegistry<SettingControl>;
+    /** Include the search box. Default: true. */
+    search?: boolean;
+}
+/** Render the full settings panel: a search box + a section per primary facet (each setting once). */
+declare function SettingsPanel({ form, states, onChange, onReset, registry, search }: SettingsPanelProps): ReactElement;
+
+export { type ControlProps, NumberControl, type PanelHandlers, RadioControl, RawJsonControl, SecretControl, SelectControl, type SettingControl, SettingField, type SettingFieldProps, SettingsPanel, type SettingsPanelProps, SliderControl, SwitchControl, TextControl, createShadcnSettingsRegistry, widgetIs };

package/dist/index.d.ts

@@ -0,0 +1,71 @@
+import { ReactElement } from 'react';
+import { SettingFieldConfig, SettingFieldState, RendererRegistry, WidgetKind, RendererTester, SettingsForm } from '@zodal/dials-ui';
+import { SettingKey } from '@zodal/dials-core';
+
+/** React render contract for the shadcn settings renderer. */
+
+interface ControlProps {
+    field: SettingFieldConfig;
+    state: SettingFieldState;
+    /** Called with the decoded value when the control changes. */
+    onChange?: (value: unknown) => void;
+}
+/** A widget control: a React component rendering the input for a setting. */
+type SettingControl = (props: ControlProps) => ReactElement;
+interface PanelHandlers {
+    onChange?: (key: SettingKey, value: unknown) => void;
+    onReset?: (key: SettingKey) => void;
+}
+
+/**
+ * React widget controls for settings — plain elements with `zodal-dials-*` class names (swap in
+ * shadcn/ui `Switch`, `Select`, `Slider`, … in a consumer). Uses `React.createElement` (no JSX). A
+ * secret renders a masked status + write-only field and never echoes plaintext; structured/unknown
+ * values fall back to a raw JSON editor that also refuses to serialize a secret.
+ */
+
+declare const SwitchControl: SettingControl;
+declare const TextControl: SettingControl;
+declare const NumberControl: SettingControl;
+declare const SliderControl: SettingControl;
+declare const SelectControl: SettingControl;
+declare const RadioControl: SettingControl;
+declare const SecretControl: SettingControl;
+declare const RawJsonControl: SettingControl;
+
+/**
+ * The shadcn settings renderer registry — a `@zodal/dials-ui` registry of React controls, one per
+ * widget kind, the masked secret control at the OVERRIDE band, and a terminal rawJson control for
+ * total coverage. Selection is open-closed (register a higher-priority control to override).
+ */
+
+/** Tester matching a field's resolved widget kind (supplied via the render context as `widget`). */
+declare function widgetIs(kind: WidgetKind): RendererTester;
+/** Create a shadcn/React settings renderer registry. */
+declare function createShadcnSettingsRegistry(): RendererRegistry<SettingControl>;
+
+/**
+ * The React settings components: `SettingField` (label + provenance badges + control via the
+ * registry + reset) and `SettingsPanel` (a search box + a section per primary facet; each setting
+ * renders once). Uses `React.createElement` (no JSX). Plain elements + `zodal-dials-*` classes — swap
+ * in shadcn/ui primitives in a consumer.
+ */
+
+interface SettingFieldProps extends PanelHandlers {
+    field: SettingFieldConfig;
+    state: SettingFieldState;
+    registry?: RendererRegistry<SettingControl>;
+}
+/** Render one setting as a labeled field row. */
+declare function SettingField({ field, state, onChange, onReset, registry }: SettingFieldProps): ReactElement;
+interface SettingsPanelProps extends PanelHandlers {
+    form: SettingsForm;
+    states: Record<SettingKey, SettingFieldState>;
+    registry?: RendererRegistry<SettingControl>;
+    /** Include the search box. Default: true. */
+    search?: boolean;
+}
+/** Render the full settings panel: a search box + a section per primary facet (each setting once). */
+declare function SettingsPanel({ form, states, onChange, onReset, registry, search }: SettingsPanelProps): ReactElement;
+
+export { type ControlProps, NumberControl, type PanelHandlers, RadioControl, RawJsonControl, SecretControl, SelectControl, type SettingControl, SettingField, type SettingFieldProps, SettingsPanel, type SettingsPanelProps, SliderControl, SwitchControl, TextControl, createShadcnSettingsRegistry, widgetIs };

package/dist/index.js

@@ -0,0 +1,248 @@
+// src/widgets.ts
+import { createElement as h } from "react";
+import { isSecretRef } from "@zodal/dials-core";
+var isDisabled = (p) => p.field.readOnly || p.state.managed;
+var asText = (v) => v == null ? "" : String(v);
+var jsonString = (v) => {
+  try {
+    return JSON.stringify(v ?? null, null, 2);
+  } catch {
+    return String(v);
+  }
+};
+function decodeNumber(raw) {
+  if (raw.trim() === "") return void 0;
+  const n = Number(raw);
+  return Number.isNaN(n) ? void 0 : n;
+}
+var SwitchControl = (p) => h("input", {
+  type: "checkbox",
+  className: "zodal-dials-switch",
+  checked: p.state.value === true,
+  disabled: isDisabled(p),
+  onChange: (e) => p.onChange?.(e.target.checked)
+});
+var TextControl = (p) => h("input", {
+  type: "text",
+  className: "zodal-dials-text",
+  value: asText(p.state.value),
+  // never use a secret's default as a placeholder (defense in depth; secret defaults are omitted upstream)
+  placeholder: p.field.sensitivity === "secret" ? void 0 : asText(p.field.defaultValue),
+  disabled: isDisabled(p),
+  onChange: (e) => p.onChange?.(e.target.value)
+});
+var NumberControl = (p) => h("input", {
+  type: "number",
+  className: "zodal-dials-number",
+  value: asText(p.state.value),
+  min: p.field.bounds?.min,
+  max: p.field.bounds?.max,
+  disabled: isDisabled(p),
+  onChange: (e) => {
+    const v = decodeNumber(e.target.value);
+    if (v !== void 0) p.onChange?.(v);
+  }
+});
+var SliderControl = (p) => h(
+  "span",
+  { className: "zodal-dials-slider-wrap" },
+  h("input", {
+    type: "range",
+    className: "zodal-dials-slider",
+    value: asText(p.state.value),
+    min: p.field.bounds?.min,
+    max: p.field.bounds?.max,
+    disabled: isDisabled(p),
+    onChange: (e) => {
+      const v = decodeNumber(e.target.value);
+      if (v !== void 0) p.onChange?.(v);
+    }
+  }),
+  h("output", { className: "zodal-dials-slider-value" }, asText(p.state.value))
+);
+var SelectControl = (p) => h(
+  "select",
+  {
+    className: "zodal-dials-select",
+    value: asText(p.state.value),
+    disabled: isDisabled(p),
+    onChange: (e) => p.onChange?.(e.target.value)
+  },
+  ...(p.field.enumValues ?? []).map((v, i) => h("option", { key: `${i}:${v}`, value: v }, v))
+);
+var RadioControl = (p) => h(
+  "fieldset",
+  { className: "zodal-dials-radio" },
+  ...(p.field.enumValues ?? []).map(
+    (v, i) => h(
+      "label",
+      { key: `${i}:${v}` },
+      h("input", {
+        type: "radio",
+        name: p.field.key,
+        value: v,
+        checked: p.state.value === v,
+        disabled: isDisabled(p),
+        onChange: () => p.onChange?.(v)
+      }),
+      v
+    )
+  )
+);
+var SecretControl = (p) => {
+  const ref = isSecretRef(p.state.value) ? p.state.value : void 0;
+  return h(
+    "span",
+    { className: "zodal-dials-secret-wrap" },
+    h("span", { className: "zodal-dials-secret-status" }, ref ? ref.masked : "not set"),
+    h("input", {
+      type: "password",
+      className: "zodal-dials-secret",
+      placeholder: "Enter new value",
+      disabled: isDisabled(p),
+      onChange: (e) => p.onChange?.(e.target.value)
+    })
+  );
+};
+var RawJsonControl = (p) => {
+  if (p.field.sensitivity === "secret" || isSecretRef(p.state.value)) return SecretControl(p);
+  return h(
+    "span",
+    { className: "zodal-dials-json-wrap" },
+    h("small", { className: "zodal-dials-json-note" }, "rendered as raw JSON (no structured editor for this type)"),
+    h("textarea", {
+      // key on the serialized value: remounts (re-seeds) the uncontrolled textarea when the upstream
+      // value changes (fixes desync), while keeping local typing smooth when it does not.
+      key: jsonString(p.state.value),
+      className: "zodal-dials-rawjson",
+      defaultValue: jsonString(p.state.value),
+      disabled: isDisabled(p),
+      onChange: (e) => {
+        try {
+          p.onChange?.(JSON.parse(e.target.value));
+        } catch {
+        }
+      }
+    })
+  );
+};
+
+// 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_CONTROLS = [
+  ["switch", SwitchControl],
+  ["text", TextControl],
+  ["textarea", TextControl],
+  ["number", NumberControl],
+  ["slider", SliderControl],
+  ["select", SelectControl],
+  ["radio", RadioControl],
+  ["color", TextControl],
+  ["date", TextControl],
+  ["path", TextControl],
+  ["object", RawJsonControl],
+  ["array", RawJsonControl],
+  ["secret", SecretControl]
+];
+function createShadcnSettingsRegistry() {
+  const registry = createSettingsRendererRegistry();
+  registry.register({ tester: alwaysMatch(), renderer: RawJsonControl, name: "rawJson" });
+  for (const [kind, control] of WIDGET_CONTROLS) registry.register({ tester: widgetIs(kind), renderer: control, name: kind });
+  registry.register({ tester: secretRoleIs(), renderer: SecretControl, name: "secret" });
+  return registry;
+}
+
+// src/components.ts
+import { createElement as h2, useMemo, useState } from "react";
+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 SettingField({ field, state, onChange, onReset, registry }) {
+  const reg = useMemo(() => registry ?? createShadcnSettingsRegistry(), [registry]);
+  const Control = reg.resolve({ zodType: field.zodType }, {
+    mode: "form",
+    widget: field.widget,
+    sensitivity: field.sensitivity
+  });
+  const badges = [];
+  if (state.source && state.source !== "default") {
+    badges.push(h2("span", { key: "src", className: "zodal-dials-badge zodal-dials-source", title: `set by ${state.source}` }, state.source));
+  }
+  if (state.managed) badges.push(h2("span", { key: "mng", className: "zodal-dials-badge zodal-dials-managed", title: "managed by policy" }, "policy"));
+  if (state.dirty) badges.push(h2("span", { key: "dty", className: "zodal-dials-badge zodal-dials-dirty" }, "modified"));
+  const reset = state.source && state.source !== "default" && !state.managed ? h2("button", { type: "button", className: "zodal-dials-reset", onClick: () => onReset?.(field.key) }, "Reset") : null;
+  const control = Control ? h2(Control, { field, state, onChange: (value) => onChange?.(field.key, value) }) : h2("span", null, "(no renderer)");
+  return h2(
+    "div",
+    { className: "zodal-dials-field", "data-key": field.key, "data-widget": field.widget },
+    h2("label", { className: "zodal-dials-label", htmlFor: field.key }, field.label, ...badges),
+    field.description ? h2("p", { className: "zodal-dials-description" }, field.description) : null,
+    h2("div", { className: "zodal-dials-control" }, control, reset)
+  );
+}
+function SettingsPanel({ form, states, onChange, onReset, registry, search = true }) {
+  const [query, setQuery] = useState("");
+  const reg = useMemo(() => registry ?? createShadcnSettingsRegistry(), [registry]);
+  const q = query.trim().toLowerCase();
+  const matches = (f) => !q || f.key.toLowerCase().includes(q) || f.label.toLowerCase().includes(q) || (f.description ?? "").toLowerCase().includes(q);
+  const primary = (f) => f.facets?.find((x) => !x.startsWith("@")) ?? "_ungrouped";
+  const groupMeta = new Map(form.groups.map((g) => [g.id, g]));
+  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 sectionIds = [...buckets.keys()].sort(
+    (a, b) => (groupMeta.get(a)?.order ?? 500) - (groupMeta.get(b)?.order ?? 500) || a.localeCompare(b)
+  );
+  const children = [];
+  if (search) {
+    children.push(
+      h2("input", {
+        key: "__search",
+        type: "search",
+        className: "zodal-dials-search",
+        placeholder: "Search settings\u2026",
+        value: query,
+        onChange: (e) => setQuery(e.target.value)
+      })
+    );
+  }
+  for (const id of sectionIds) {
+    const fields = (buckets.get(id) ?? []).filter(matches);
+    if (fields.length === 0) continue;
+    const title = groupMeta.get(id)?.title ?? humanize(id);
+    children.push(
+      h2(
+        "section",
+        { key: id, className: "zodal-dials-group", "data-group": id },
+        h2("h3", { className: "zodal-dials-group-title" }, title),
+        ...fields.map((f) => h2(SettingField, { key: f.key, field: f, state: states[f.key] ?? emptyState(), onChange, onReset, registry: reg }))
+      )
+    );
+  }
+  return h2("div", { className: "zodal-dials-panel" }, ...children);
+}
+export {
+  NumberControl,
+  RadioControl,
+  RawJsonControl,
+  SecretControl,
+  SelectControl,
+  SettingField,
+  SettingsPanel,
+  SliderControl,
+  SwitchControl,
+  TextControl,
+  createShadcnSettingsRegistry,
+  widgetIs
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/widgets.ts","../src/registry.ts","../src/components.ts"],"sourcesContent":["/**\n * React widget controls for settings — plain elements with `zodal-dials-*` class names (swap in\n * shadcn/ui `Switch`, `Select`, `Slider`, … in a consumer). Uses `React.createElement` (no JSX). A\n * secret renders a masked status + write-only field and never echoes plaintext; structured/unknown\n * values fall back to a raw JSON editor that also refuses to serialize a secret.\n */\n\nimport { createElement as h } from 'react';\nimport type { ChangeEvent } from 'react';\nimport { isSecretRef } from '@zodal/dials-core';\nimport type { ControlProps, SettingControl } from './types.js';\n\nconst isDisabled = (p: ControlProps): boolean => p.field.readOnly || p.state.managed;\nconst asText = (v: unknown): string => (v == null ? '' : String(v));\nconst jsonString = (v: unknown): string => {\n  try {\n    return JSON.stringify(v ?? null, null, 2);\n  } catch {\n    return String(v);\n  }\n};\n\n/** Empty/non-numeric input → undefined (treated as \"no change\"; use Reset to unset). */\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}\n\nexport const SwitchControl: SettingControl = (p) =>\n  h('input', {\n    type: 'checkbox',\n    className: 'zodal-dials-switch',\n    checked: p.state.value === true,\n    disabled: isDisabled(p),\n    onChange: (e: ChangeEvent<HTMLInputElement>) => p.onChange?.(e.target.checked),\n  });\n\nexport const TextControl: SettingControl = (p) =>\n  h('input', {\n    type: 'text',\n    className: 'zodal-dials-text',\n    value: asText(p.state.value),\n    // never use a secret's default as a placeholder (defense in depth; secret defaults are omitted upstream)\n    placeholder: p.field.sensitivity === 'secret' ? undefined : asText(p.field.defaultValue),\n    disabled: isDisabled(p),\n    onChange: (e: ChangeEvent<HTMLInputElement>) => p.onChange?.(e.target.value),\n  });\n\nexport const NumberControl: SettingControl = (p) =>\n  h('input', {\n    type: 'number',\n    className: 'zodal-dials-number',\n    value: asText(p.state.value),\n    min: p.field.bounds?.min,\n    max: p.field.bounds?.max,\n    disabled: isDisabled(p),\n    onChange: (e: ChangeEvent<HTMLInputElement>) => {\n      const v = decodeNumber(e.target.value);\n      if (v !== undefined) p.onChange?.(v);\n    },\n  });\n\nexport const SliderControl: SettingControl = (p) =>\n  h(\n    'span',\n    { className: 'zodal-dials-slider-wrap' },\n    h('input', {\n      type: 'range',\n      className: 'zodal-dials-slider',\n      value: asText(p.state.value),\n      min: p.field.bounds?.min,\n      max: p.field.bounds?.max,\n      disabled: isDisabled(p),\n      onChange: (e: ChangeEvent<HTMLInputElement>) => {\n        const v = decodeNumber(e.target.value);\n        if (v !== undefined) p.onChange?.(v);\n      },\n    }),\n    h('output', { className: 'zodal-dials-slider-value' }, asText(p.state.value)),\n  );\n\nexport const SelectControl: SettingControl = (p) =>\n  h(\n    'select',\n    {\n      className: 'zodal-dials-select',\n      value: asText(p.state.value),\n      disabled: isDisabled(p),\n      onChange: (e: ChangeEvent<HTMLSelectElement>) => p.onChange?.(e.target.value),\n    },\n    ...(p.field.enumValues ?? []).map((v, i) => h('option', { key: `${i}:${v}`, value: v }, v)),\n  );\n\nexport const RadioControl: SettingControl = (p) =>\n  h(\n    'fieldset',\n    { className: 'zodal-dials-radio' },\n    ...(p.field.enumValues ?? []).map((v, i) =>\n      h(\n        'label',\n        { key: `${i}:${v}` },\n        h('input', {\n          type: 'radio',\n          name: p.field.key,\n          value: v,\n          checked: p.state.value === v,\n          disabled: isDisabled(p),\n          onChange: () => p.onChange?.(v),\n        }),\n        v,\n      ),\n    ),\n  );\n\nexport const SecretControl: SettingControl = (p) => {\n  const ref = isSecretRef(p.state.value) ? p.state.value : undefined;\n  return h(\n    'span',\n    { className: 'zodal-dials-secret-wrap' },\n    h('span', { className: 'zodal-dials-secret-status' }, ref ? ref.masked : 'not set'),\n    h('input', {\n      type: 'password',\n      className: 'zodal-dials-secret',\n      placeholder: 'Enter new value',\n      disabled: isDisabled(p),\n      onChange: (e: ChangeEvent<HTMLInputElement>) => p.onChange?.(e.target.value),\n    }),\n  );\n};\n\nexport const RawJsonControl: SettingControl = (p) => {\n  // Defense in depth: never serialize a secret as JSON — always fall back to the masked widget.\n  if (p.field.sensitivity === 'secret' || isSecretRef(p.state.value)) return SecretControl(p);\n  return h(\n    'span',\n    { className: 'zodal-dials-json-wrap' },\n    h('small', { className: 'zodal-dials-json-note' }, 'rendered as raw JSON (no structured editor for this type)'),\n    h('textarea', {\n      // key on the serialized value: remounts (re-seeds) the uncontrolled textarea when the upstream\n      // value changes (fixes desync), while keeping local typing smooth when it does not.\n      key: jsonString(p.state.value),\n      className: 'zodal-dials-rawjson',\n      defaultValue: jsonString(p.state.value),\n      disabled: isDisabled(p),\n      onChange: (e: ChangeEvent<HTMLTextAreaElement>) => {\n        try {\n          p.onChange?.(JSON.parse(e.target.value));\n        } catch {\n          // invalid JSON: ignore (a real renderer would surface an error)\n        }\n      },\n    }),\n  );\n};\n","/**\n * The shadcn settings renderer registry — a `@zodal/dials-ui` registry of React controls, one per\n * widget kind, the masked secret control at the OVERRIDE band, and a terminal rawJson control for\n * total coverage. Selection is open-closed (register a higher-priority control to override).\n */\n\nimport { createSettingsRendererRegistry, secretRoleIs, alwaysMatch, PRIORITY } from '@zodal/dials-ui';\nimport type { RendererRegistry, RendererTester, WidgetKind } from '@zodal/dials-ui';\nimport type { SettingControl } from './types.js';\nimport {\n  SwitchControl,\n  TextControl,\n  NumberControl,\n  SliderControl,\n  SelectControl,\n  RadioControl,\n  SecretControl,\n  RawJsonControl,\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_CONTROLS: Array<[WidgetKind, SettingControl]> = [\n  ['switch', SwitchControl],\n  ['text', TextControl],\n  ['textarea', TextControl],\n  ['number', NumberControl],\n  ['slider', SliderControl],\n  ['select', SelectControl],\n  ['radio', RadioControl],\n  ['color', TextControl],\n  ['date', TextControl],\n  ['path', TextControl],\n  ['object', RawJsonControl],\n  ['array', RawJsonControl],\n  ['secret', SecretControl],\n];\n\n/** Create a shadcn/React settings renderer registry. */\nexport function createShadcnSettingsRegistry(): RendererRegistry<SettingControl> {\n  const registry = createSettingsRendererRegistry<SettingControl>();\n  registry.register({ tester: alwaysMatch(), renderer: RawJsonControl, name: 'rawJson' });\n  for (const [kind, control] of WIDGET_CONTROLS) registry.register({ tester: widgetIs(kind), renderer: control, name: kind });\n  registry.register({ tester: secretRoleIs(), renderer: SecretControl, name: 'secret' });\n  return registry;\n}\n","/**\n * The React settings components: `SettingField` (label + provenance badges + control via the\n * registry + reset) and `SettingsPanel` (a search box + a section per primary facet; each setting\n * renders once). Uses `React.createElement` (no JSX). Plain elements + `zodal-dials-*` classes — swap\n * in shadcn/ui primitives in a consumer.\n */\n\nimport { createElement as h, useMemo, useState } from 'react';\nimport type { ChangeEvent, ReactElement } from 'react';\nimport type { ResolvedFieldAffordance } from '@zodal/core';\nimport type { SettingKey } from '@zodal/dials-core';\nimport type { RendererRegistry, SettingFieldConfig, SettingFieldState, SettingsForm } from '@zodal/dials-ui';\nimport type { PanelHandlers, SettingControl } from './types.js';\nimport { createShadcnSettingsRegistry } from './registry.js';\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\nexport interface SettingFieldProps extends PanelHandlers {\n  field: SettingFieldConfig;\n  state: SettingFieldState;\n  registry?: RendererRegistry<SettingControl>;\n}\n\n/** Render one setting as a labeled field row. */\nexport function SettingField({ field, state, onChange, onReset, registry }: SettingFieldProps): ReactElement {\n  const reg = useMemo(() => registry ?? createShadcnSettingsRegistry(), [registry]);\n  const Control = reg.resolve({ zodType: field.zodType } as unknown as ResolvedFieldAffordance, {\n    mode: 'form',\n    widget: field.widget,\n    sensitivity: field.sensitivity,\n  });\n\n  const badges: ReactElement[] = [];\n  if (state.source && state.source !== 'default') {\n    badges.push(h('span', { key: 'src', className: 'zodal-dials-badge zodal-dials-source', title: `set by ${state.source}` }, state.source));\n  }\n  if (state.managed) badges.push(h('span', { key: 'mng', className: 'zodal-dials-badge zodal-dials-managed', title: 'managed by policy' }, 'policy'));\n  if (state.dirty) badges.push(h('span', { key: 'dty', className: 'zodal-dials-badge zodal-dials-dirty' }, 'modified'));\n\n  const reset =\n    state.source && state.source !== 'default' && !state.managed\n      ? h('button', { type: 'button', className: 'zodal-dials-reset', onClick: () => onReset?.(field.key) }, 'Reset')\n      : null;\n\n  const control = Control\n    ? h(Control, { field, state, onChange: (value: unknown) => onChange?.(field.key, value) })\n    : h('span', null, '(no renderer)');\n\n  return h(\n    'div',\n    { className: 'zodal-dials-field', 'data-key': field.key, 'data-widget': field.widget },\n    h('label', { className: 'zodal-dials-label', htmlFor: field.key }, field.label, ...badges),\n    field.description ? h('p', { className: 'zodal-dials-description' }, field.description) : null,\n    h('div', { className: 'zodal-dials-control' }, control, reset),\n  );\n}\n\nexport interface SettingsPanelProps extends PanelHandlers {\n  form: SettingsForm;\n  states: Record<SettingKey, SettingFieldState>;\n  registry?: RendererRegistry<SettingControl>;\n  /** Include the search box. Default: true. */\n  search?: boolean;\n}\n\n/** Render the full settings panel: a search box + a section per primary facet (each setting once). */\nexport function SettingsPanel({ form, states, onChange, onReset, registry, search = true }: SettingsPanelProps): ReactElement {\n  const [query, setQuery] = useState('');\n  const reg = useMemo(() => registry ?? createShadcnSettingsRegistry(), [registry]);\n  const q = query.trim().toLowerCase();\n  const matches = (f: SettingFieldConfig): boolean =>\n    !q || f.key.toLowerCase().includes(q) || f.label.toLowerCase().includes(q) || (f.description ?? '').toLowerCase().includes(q);\n\n  const primary = (f: SettingFieldConfig): string => f.facets?.find((x) => !x.startsWith('@')) ?? '_ungrouped';\n  const groupMeta = new Map(form.groups.map((g) => [g.id, g]));\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  const sectionIds = [...buckets.keys()].sort(\n    (a, b) => (groupMeta.get(a)?.order ?? 500) - (groupMeta.get(b)?.order ?? 500) || a.localeCompare(b),\n  );\n\n  const children: ReactElement[] = [];\n  if (search) {\n    children.push(\n      h('input', {\n        key: '__search',\n        type: 'search',\n        className: 'zodal-dials-search',\n        placeholder: 'Search settings…',\n        value: query,\n        onChange: (e: ChangeEvent<HTMLInputElement>) => setQuery(e.target.value),\n      }),\n    );\n  }\n  for (const id of sectionIds) {\n    const fields = (buckets.get(id) ?? []).filter(matches);\n    if (fields.length === 0) continue;\n    const title = groupMeta.get(id)?.title ?? humanize(id);\n    children.push(\n      h(\n        'section',\n        { key: id, className: 'zodal-dials-group', 'data-group': id },\n        h('h3', { className: 'zodal-dials-group-title' }, title),\n        ...fields.map((f) => h(SettingField, { key: f.key, field: f, state: states[f.key] ?? emptyState(), onChange, onReset, registry: reg })),\n      ),\n    );\n  }\n  return h('div', { className: 'zodal-dials-panel' }, ...children);\n}\n"],"mappings":"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","names":["h","h"]}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@zodal/dials-ui-shadcn",
+  "version": "0.1.0",
+  "description": "React/shadcn renderer for @zodal/dials-ui — settings panel components consuming the headless 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",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@zodal/core": "^0.1.2",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "jsdom": "^25.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.7.0",
+    "vitest": "^3.0.0",
+    "@zodal/dials-core": "0.1.0",
+    "@zodal/dials-ui": "0.1.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  }
+}