@structured-field/widget-editor 1.2.1 → 1.3.0

package/dist/structured-widget-editor.esm.js

@@ -1,4 +1,4 @@
-var script$d = {
+var script$f = {
   name: 'StringEditor',
   props: {
     schema: { type: Object, required: true },
@@ -21,6 +21,12 @@ var script$d = {
     isLong() {
       return this.schema.maxLength > 255 || this.schema.format === 'textarea';
     },
+    isNullable() {
+      return !!this.schema._nullable;
+    },
+    isNullValue() {
+      return this.modelValue === null || this.modelValue === undefined;
+    },
     fieldErrors() {
       if (!this.form || !this.form.getErrorsForPath) return [];
       return this.form.getErrorsForPath(this.path);
@@ -6759,7 +6765,7 @@ class VueElement extends BaseClass {
   _update() {
     const vnode = this._createVNode();
     if (this._app) vnode.appContext = this._app._context;
-    render$d(vnode, this._root);
+    render$f(vnode, this._root);
   }
   _createVNode() {
     const baseProps = {};
@@ -7026,7 +7032,7 @@ let renderer;
 function ensureRenderer() {
   return renderer || (renderer = createRenderer(rendererOptions));
 }
-const render$d = ((...args) => {
+const render$f = ((...args) => {
   ensureRenderer().render(...args);
 });
 const createApp = ((...args) => {
@@ -7067,39 +7073,61 @@ function normalizeContainer(container) {
   return container;
 }
 
-const _hoisted_1$b = ["value", "placeholder"];
-const _hoisted_2$9 = ["value", "placeholder"];
-const _hoisted_3$8 = {
-  key: 2,
+const _hoisted_1$d = {
+  key: 0,
+  class: "sf-null-badge"
+};
+const _hoisted_2$b = ["value", "placeholder"];
+const _hoisted_3$b = ["value", "placeholder"];
+const _hoisted_4$7 = {
+  key: 0,
   class: "errorlist"
 };
 
-function render$c(_ctx, _cache, $props, $setup, $data, $options) {
+function render$e(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     class: normalizeClass(["sf-field", { errors: $options.fieldErrors.length }])
   }, [
-    createBaseVNode("label", {
+    createBaseVNode("span", {
       class: normalizeClass(["sf-label", { required: $options.isRequired }])
-    }, toDisplayString($options.title), 3 /* TEXT, CLASS */),
-    ($options.isLong)
-      ? (openBlock(), createElementBlock("textarea", {
-          key: 0,
-          class: "sf-input sf-textarea",
-          rows: "3",
-          value: $props.modelValue,
-          placeholder: $props.schema.placeholder || '',
-          onInput: _cache[0] || (_cache[0] = $event => (_ctx.$emit('update:modelValue', $event.target.value)))
-        }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_1$b))
-      : (openBlock(), createElementBlock("input", {
-          key: 1,
-          type: "text",
-          class: "sf-input",
-          value: $props.modelValue != null ? String($props.modelValue) : '',
-          placeholder: $props.schema.placeholder || '',
-          onInput: _cache[1] || (_cache[1] = $event => (_ctx.$emit('update:modelValue', $event.target.value)))
-        }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_2$9)),
+    }, [
+      createTextVNode(toDisplayString($options.title) + " ", 1 /* TEXT */),
+      ($options.isNullable && $options.isNullValue)
+        ? (openBlock(), createElementBlock("span", _hoisted_1$d, "null"))
+        : createCommentVNode("v-if", true)
+    ], 2 /* CLASS */),
+    createBaseVNode("div", {
+      class: normalizeClass($options.isNullable ? 'sf-input-row' : null)
+    }, [
+      ($options.isLong)
+        ? (openBlock(), createElementBlock("textarea", {
+            key: 0,
+            class: "sf-input sf-textarea",
+            rows: "3",
+            value: $options.isNullValue ? '' : $props.modelValue,
+            placeholder: $options.isNullValue ? 'null' : ($props.schema.placeholder || ''),
+            onInput: _cache[0] || (_cache[0] = $event => (_ctx.$emit('update:modelValue', $event.target.value)))
+          }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_2$b))
+        : (openBlock(), createElementBlock("input", {
+            key: 1,
+            type: "text",
+            class: "sf-input",
+            value: $options.isNullValue ? '' : ($props.modelValue != null ? String($props.modelValue) : ''),
+            placeholder: $options.isNullValue ? 'null' : ($props.schema.placeholder || ''),
+            onInput: _cache[1] || (_cache[1] = $event => (_ctx.$emit('update:modelValue', $event.target.value)))
+          }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_3$b)),
+      ($options.isNullable && !$options.isNullValue)
+        ? (openBlock(), createElementBlock("button", {
+            key: 2,
+            type: "button",
+            class: "sf-null-clear-btn",
+            title: "Set to null",
+            onClick: _cache[2] || (_cache[2] = $event => (_ctx.$emit('update:modelValue', null)))
+          }, "✕"))
+        : createCommentVNode("v-if", true)
+    ], 2 /* CLASS */),
     ($options.fieldErrors.length)
-      ? (openBlock(), createElementBlock("ul", _hoisted_3$8, [
+      ? (openBlock(), createElementBlock("ul", _hoisted_4$7, [
           (openBlock(true), createElementBlock(Fragment, null, renderList($options.fieldErrors, (err, i) => {
             return (openBlock(), createElementBlock("li", { key: i }, toDisplayString(err), 1 /* TEXT */))
           }), 128 /* KEYED_FRAGMENT */))
@@ -7108,10 +7136,10 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2 /* CLASS */))
 }
 
-script$d.render = render$c;
-script$d.__file = "src/editors/StringEditor.vue";
+script$f.render = render$e;
+script$f.__file = "src/editors/StringEditor.vue";
 
-var script$c = {
+var script$e = {
   name: 'NumberEditor',
   props: {
     schema: { type: Object, required: true },
@@ -7131,6 +7159,12 @@ var script$c = {
       const parentSchema = this.form.getSchemaAtPath(parentPath);
       return parentSchema && Array.isArray(parentSchema.required) && parentSchema.required.includes(fieldName);
     },
+    isNullable() {
+      return !!this.schema._nullable;
+    },
+    isNullValue() {
+      return this.modelValue === null || this.modelValue === undefined;
+    },
     fieldErrors() {
       if (!this.form || !this.form.getErrorsForPath) return [];
       return this.form.getErrorsForPath(this.path);
@@ -7152,30 +7186,53 @@ var script$c = {
   },
 };
 
-const _hoisted_1$a = ["step", "min", "max", "value"];
-const _hoisted_2$8 = {
+const _hoisted_1$c = {
+  key: 0,
+  class: "sf-null-badge"
+};
+const _hoisted_2$a = ["step", "min", "max", "value", "placeholder"];
+const _hoisted_3$a = {
   key: 0,
   class: "errorlist"
 };
 
-function render$b(_ctx, _cache, $props, $setup, $data, $options) {
+function render$d(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     class: normalizeClass(["sf-field", { errors: $options.fieldErrors.length }])
   }, [
-    createBaseVNode("label", {
+    createBaseVNode("span", {
       class: normalizeClass(["sf-label", { required: $options.isRequired }])
-    }, toDisplayString($options.title), 3 /* TEXT, CLASS */),
-    createBaseVNode("input", {
-      type: "number",
-      class: "sf-input",
-      step: $props.schema.type === 'integer' ? '1' : 'any',
-      min: $props.schema.minimum != null ? String($props.schema.minimum) : undefined,
-      max: $props.schema.maximum != null ? String($props.schema.maximum) : undefined,
-      value: $props.modelValue != null ? $props.modelValue : '',
-      onInput: _cache[0] || (_cache[0] = (...args) => ($options.onInput && $options.onInput(...args)))
-    }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_1$a),
+    }, [
+      createTextVNode(toDisplayString($options.title) + " ", 1 /* TEXT */),
+      ($options.isNullable && $options.isNullValue)
+        ? (openBlock(), createElementBlock("span", _hoisted_1$c, "null"))
+        : createCommentVNode("v-if", true)
+    ], 2 /* CLASS */),
+    createBaseVNode("div", {
+      class: normalizeClass($options.isNullable ? 'sf-input-row' : null)
+    }, [
+      createBaseVNode("input", {
+        type: "number",
+        class: "sf-input",
+        step: $props.schema.type === 'integer' ? '1' : 'any',
+        min: $props.schema.minimum != null ? String($props.schema.minimum) : undefined,
+        max: $props.schema.maximum != null ? String($props.schema.maximum) : undefined,
+        value: $options.isNullValue ? '' : $props.modelValue,
+        placeholder: $options.isNullValue ? 'null' : undefined,
+        onInput: _cache[0] || (_cache[0] = (...args) => ($options.onInput && $options.onInput(...args)))
+      }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_2$a),
+      ($options.isNullable && !$options.isNullValue)
+        ? (openBlock(), createElementBlock("button", {
+            key: 0,
+            type: "button",
+            class: "sf-null-clear-btn",
+            title: "Set to null",
+            onClick: _cache[1] || (_cache[1] = $event => (_ctx.$emit('update:modelValue', null)))
+          }, "✕"))
+        : createCommentVNode("v-if", true)
+    ], 2 /* CLASS */),
     ($options.fieldErrors.length)
-      ? (openBlock(), createElementBlock("ul", _hoisted_2$8, [
+      ? (openBlock(), createElementBlock("ul", _hoisted_3$a, [
           (openBlock(true), createElementBlock(Fragment, null, renderList($options.fieldErrors, (err, i) => {
             return (openBlock(), createElementBlock("li", { key: i }, toDisplayString(err), 1 /* TEXT */))
           }), 128 /* KEYED_FRAGMENT */))
@@ -7184,10 +7241,10 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2 /* CLASS */))
 }
 
-script$c.render = render$b;
-script$c.__file = "src/editors/NumberEditor.vue";
+script$e.render = render$d;
+script$e.__file = "src/editors/NumberEditor.vue";
 
-var script$b = {
+var script$d = {
   name: 'BooleanEditor',
   props: {
     schema: { type: Object, required: true },
@@ -7200,6 +7257,12 @@ var script$b = {
     title() {
       return this.schema.title || this.humanize(this.path[this.path.length - 1]) || '';
     },
+    isNullable() {
+      return !!this.schema._nullable;
+    },
+    isNullValue() {
+      return this.modelValue === null || this.modelValue === undefined;
+    },
     fieldErrors() {
       if (!this.form || !this.form.getErrorsForPath) return [];
       return this.form.getErrorsForPath(this.path);
@@ -7213,28 +7276,47 @@ var script$b = {
   },
 };
 
-const _hoisted_1$9 = { class: "sf-checkbox-label" };
-const _hoisted_2$7 = ["checked"];
-const _hoisted_3$7 = {
+const _hoisted_1$b = { class: "sf-boolean-row" };
+const _hoisted_2$9 = { class: "sf-checkbox-label" };
+const _hoisted_3$9 = ["checked"];
+const _hoisted_4$6 = {
+  key: 0,
+  class: "sf-null-badge"
+};
+const _hoisted_5$6 = {
   key: 0,
   class: "errorlist"
 };
 
-function render$a(_ctx, _cache, $props, $setup, $data, $options) {
+function render$c(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     class: normalizeClass(["sf-field sf-field-boolean", { errors: $options.fieldErrors.length }])
   }, [
-    createBaseVNode("label", _hoisted_1$9, [
-      createBaseVNode("input", {
-        type: "checkbox",
-        class: "sf-checkbox",
-        checked: !!$props.modelValue,
-        onChange: _cache[0] || (_cache[0] = $event => (_ctx.$emit('update:modelValue', $event.target.checked)))
-      }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_2$7),
-      createTextVNode(" " + toDisplayString($options.title), 1 /* TEXT */)
+    createBaseVNode("div", _hoisted_1$b, [
+      createBaseVNode("label", _hoisted_2$9, [
+        createBaseVNode("input", {
+          type: "checkbox",
+          class: "sf-checkbox",
+          checked: !!$props.modelValue,
+          onChange: _cache[0] || (_cache[0] = $event => (_ctx.$emit('update:modelValue', $event.target.checked)))
+        }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_3$9),
+        createTextVNode(" " + toDisplayString($options.title) + " ", 1 /* TEXT */),
+        ($options.isNullable && $options.isNullValue)
+          ? (openBlock(), createElementBlock("span", _hoisted_4$6, "null"))
+          : createCommentVNode("v-if", true)
+      ]),
+      ($options.isNullable && !$options.isNullValue)
+        ? (openBlock(), createElementBlock("button", {
+            key: 0,
+            type: "button",
+            class: "sf-null-clear-btn",
+            title: "Set to null",
+            onClick: _cache[1] || (_cache[1] = $event => (_ctx.$emit('update:modelValue', null)))
+          }, "✕"))
+        : createCommentVNode("v-if", true)
     ]),
     ($options.fieldErrors.length)
-      ? (openBlock(), createElementBlock("ul", _hoisted_3$7, [
+      ? (openBlock(), createElementBlock("ul", _hoisted_5$6, [
           (openBlock(true), createElementBlock(Fragment, null, renderList($options.fieldErrors, (err, i) => {
             return (openBlock(), createElementBlock("li", { key: i }, toDisplayString(err), 1 /* TEXT */))
           }), 128 /* KEYED_FRAGMENT */))
@@ -7243,10 +7325,194 @@ function render$a(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2 /* CLASS */))
 }
 
-script$b.render = render$a;
-script$b.__file = "src/editors/BooleanEditor.vue";
+script$d.render = render$c;
+script$d.__file = "src/editors/BooleanEditor.vue";
 
-var script$a = {
+var script$c = {
+  name: 'DateEditor',
+  props: {
+    schema: { type: Object, required: true },
+    modelValue: { default: '' },
+    path: { type: Array, default: () => [] },
+    form: { type: Object, default: null },
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    isDateTime() {
+      return this.schema.format === 'date-time';
+    },
+    inputType() {
+      return this.isDateTime ? 'datetime-local' : 'date';
+    },
+    displayValue() {
+      if (this.isNullValue) return '';
+      const v = String(this.modelValue);
+      if (this.isDateTime) {
+        // Accept ISO 8601 strings like "2026-04-09T10:30:00[.sss][Z|+00:00]"
+        // datetime-local expects "YYYY-MM-DDTHH:mm" (or with seconds).
+        const match = v.match(/^(\d{4}-\d{2}-\d{2})[T ](\d{2}:\d{2})(?::(\d{2}(?:\.\d+)?))?/);
+        if (match) {
+          return match[3] ? `${match[1]}T${match[2]}:${match[3]}` : `${match[1]}T${match[2]}`;
+        }
+        return v;
+      }
+      // date: expect "YYYY-MM-DD"
+      return v.slice(0, 10);
+    },
+    title() {
+      return this.schema.title || this.humanize(this.path[this.path.length - 1]) || '';
+    },
+    isRequired() {
+      if (this.path.length < 2 || !this.form) return false;
+      const parentPath = this.path.slice(0, -1);
+      const fieldName = this.path[this.path.length - 1];
+      const parentSchema = this.form.getSchemaAtPath(parentPath);
+      return parentSchema && Array.isArray(parentSchema.required) && parentSchema.required.includes(fieldName);
+    },
+    isNullable() {
+      return !!this.schema._nullable;
+    },
+    isNullValue() {
+      return this.modelValue === null || this.modelValue === undefined;
+    },
+    fieldErrors() {
+      if (!this.form || !this.form.getErrorsForPath) return [];
+      return this.form.getErrorsForPath(this.path);
+    },
+  },
+  methods: {
+    onInput(e) {
+      const val = e.target.value;
+      if (val === '') {
+        this.$emit('update:modelValue', this.isNullable ? null : '');
+        return;
+      }
+      // Emit ISO-compatible string. Pydantic accepts both "YYYY-MM-DD"
+      // and "YYYY-MM-DDTHH:mm[:ss]" for date / datetime fields.
+      this.$emit('update:modelValue', val);
+    },
+    humanize(str) {
+      if (!str) return '';
+      return str.replace(/_/g, ' ').replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, s => s.toUpperCase());
+    },
+  },
+};
+
+const _hoisted_1$a = {
+  key: 0,
+  class: "sf-null-badge"
+};
+const _hoisted_2$8 = ["type", "value", "placeholder", "min", "max"];
+const _hoisted_3$8 = {
+  key: 0,
+  class: "errorlist"
+};
+
+function render$b(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass(["sf-field", { errors: $options.fieldErrors.length }])
+  }, [
+    createBaseVNode("span", {
+      class: normalizeClass(["sf-label", { required: $options.isRequired }])
+    }, [
+      createTextVNode(toDisplayString($options.title) + " ", 1 /* TEXT */),
+      ($options.isNullable && $options.isNullValue)
+        ? (openBlock(), createElementBlock("span", _hoisted_1$a, "null"))
+        : createCommentVNode("v-if", true)
+    ], 2 /* CLASS */),
+    createBaseVNode("div", {
+      class: normalizeClass($options.isNullable ? 'sf-input-row' : null)
+    }, [
+      createBaseVNode("input", {
+        type: $options.inputType,
+        class: "sf-input",
+        value: $options.displayValue,
+        placeholder: $options.isNullValue ? 'null' : ($props.schema.placeholder || ''),
+        min: $props.schema.minimum || $props.schema.formatMinimum || null,
+        max: $props.schema.maximum || $props.schema.formatMaximum || null,
+        onInput: _cache[0] || (_cache[0] = (...args) => ($options.onInput && $options.onInput(...args)))
+      }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_2$8),
+      ($options.isNullable && !$options.isNullValue)
+        ? (openBlock(), createElementBlock("button", {
+            key: 0,
+            type: "button",
+            class: "sf-null-clear-btn",
+            title: "Set to null",
+            onClick: _cache[1] || (_cache[1] = $event => (_ctx.$emit('update:modelValue', null)))
+          }, "✕"))
+        : createCommentVNode("v-if", true)
+    ], 2 /* CLASS */),
+    ($options.fieldErrors.length)
+      ? (openBlock(), createElementBlock("ul", _hoisted_3$8, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList($options.fieldErrors, (err, i) => {
+            return (openBlock(), createElementBlock("li", { key: i }, toDisplayString(err), 1 /* TEXT */))
+          }), 128 /* KEYED_FRAGMENT */))
+        ]))
+      : createCommentVNode("v-if", true)
+  ], 2 /* CLASS */))
+}
+
+script$c.render = render$b;
+script$c.__file = "src/editors/DateEditor.vue";
+
+function debounce(fn, delay) {
+  let timer;
+  return function (...args) {
+    clearTimeout(timer);
+    timer = setTimeout(() => fn.apply(this, args), delay);
+  };
+}
+
+function deepClone(obj) {
+  if (obj === null || typeof obj !== 'object') return obj;
+  if (Array.isArray(obj)) return obj.map(deepClone);
+  const clone = {};
+  for (const key of Object.keys(obj)) {
+    clone[key] = deepClone(obj[key]);
+  }
+  return clone;
+}
+
+function isChoiceOneOf(list) {
+  // A "choice list" oneOf: every member is a {const, title?} value option
+  // (the shape emitted for enumerated choices, e.g. metaobjects' select
+  // kind), as opposed to a oneOf of alternative sub-schemas.
+  return (
+    Array.isArray(list) &&
+    list.length > 0 &&
+    list.every(
+      (m) =>
+        m &&
+        typeof m === 'object' &&
+        'const' in m &&
+        !('properties' in m) &&
+        m.type !== 'null'
+    )
+  );
+}
+
+function getDefaultForSchema(schema) {
+  if ('default' in schema) return deepClone(schema.default);
+  if (schema.type === 'object') {
+    const obj = {};
+    for (const [key, prop] of Object.entries(schema.properties || {})) {
+      if ('default' in prop) obj[key] = deepClone(prop.default);
+      else if (prop.type === 'string') obj[key] = '';
+      else if (prop.type === 'integer' || prop.type === 'number') obj[key] = 0;
+      else if (prop.type === 'boolean') obj[key] = false;
+      else if (prop.type === 'array') obj[key] = [];
+    }
+    return obj;
+  }
+  if (schema.type === 'array') return [];
+  if (schema.type === 'string') return '';
+  if (schema.type === 'integer' || schema.type === 'number') return 0;
+  if (schema.type === 'boolean') return false;
+  if (schema.type === 'relation') return schema.multiple ? [] : null;
+  return null;
+}
+
+var script$b = {
   name: 'SelectEditor',
   props: {
     schema: { type: Object, required: true },
@@ -7256,6 +7522,20 @@ var script$a = {
   },
   emits: ['update:modelValue'],
   computed: {
+    options() {
+      // Two source shapes: a choice-list oneOf ({const, title} pairs, e.g.
+      // metaobjects' select kind — labels preserved) or a plain enum.
+      if (isChoiceOneOf(this.schema.oneOf)) {
+        return this.schema.oneOf.map((o) => ({
+          value: o.const,
+          label: o.title != null ? o.title : String(o.const),
+        }));
+      }
+      return (this.schema.enum || []).map((v) => ({ value: v, label: String(v) }));
+    },
+    selectedIndex() {
+      return this.options.findIndex((o) => o.value === this.modelValue);
+    },
     title() {
       return this.schema.title || this.humanize(this.path[this.path.length - 1]) || '';
     },
@@ -7266,12 +7546,25 @@ var script$a = {
       const parentSchema = this.form.getSchemaAtPath(parentPath);
       return parentSchema && Array.isArray(parentSchema.required) && parentSchema.required.includes(fieldName);
     },
+    isNullable() {
+      return !!this.schema._nullable;
+    },
+    isNullValue() {
+      return this.modelValue === null || this.modelValue === undefined;
+    },
     fieldErrors() {
       if (!this.form || !this.form.getErrorsForPath) return [];
       return this.form.getErrorsForPath(this.path);
     },
   },
   methods: {
+    onChange(indexStr) {
+      const opt = this.options[Number(indexStr)];
+      // Emit the ORIGINAL option value (options are addressed by index in
+      // the DOM), so integer/boolean enums keep their native type instead
+      // of being stringified by the <select> element.
+      if (opt !== undefined) this.$emit('update:modelValue', opt.value);
+    },
     humanize(str) {
       if (!str) return '';
       return str.replace(/_/g, ' ').replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, s => s.toUpperCase());
@@ -7279,34 +7572,65 @@ var script$a = {
   },
 };
 
-const _hoisted_1$8 = ["value"];
-const _hoisted_2$6 = ["value"];
-const _hoisted_3$6 = {
+const _hoisted_1$9 = {
+  key: 0,
+  class: "sf-null-badge"
+};
+const _hoisted_2$7 = ["value"];
+const _hoisted_3$7 = {
+  key: 0,
+  value: "",
+  disabled: "",
+  selected: ""
+};
+const _hoisted_4$5 = ["value"];
+const _hoisted_5$5 = {
   key: 0,
   class: "errorlist"
 };
 
-function render$9(_ctx, _cache, $props, $setup, $data, $options) {
+function render$a(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     class: normalizeClass(["sf-field", { errors: $options.fieldErrors.length }])
   }, [
-    createBaseVNode("label", {
+    createBaseVNode("span", {
       class: normalizeClass(["sf-label", { required: $options.isRequired }])
-    }, toDisplayString($options.title), 3 /* TEXT, CLASS */),
-    createBaseVNode("select", {
-      class: "sf-input sf-select",
-      value: $props.modelValue != null ? String($props.modelValue) : '',
-      onChange: _cache[0] || (_cache[0] = $event => (_ctx.$emit('update:modelValue', $event.target.value)))
     }, [
-      (openBlock(true), createElementBlock(Fragment, null, renderList(($props.schema.enum || []), (opt) => {
-        return (openBlock(), createElementBlock("option", {
-          key: opt,
-          value: String(opt)
-        }, toDisplayString(opt), 9 /* TEXT, PROPS */, _hoisted_2$6))
-      }), 128 /* KEYED_FRAGMENT */))
-    ], 40 /* PROPS, NEED_HYDRATION */, _hoisted_1$8),
+      createTextVNode(toDisplayString($options.title) + " ", 1 /* TEXT */),
+      ($options.isNullable && $options.isNullValue)
+        ? (openBlock(), createElementBlock("span", _hoisted_1$9, "null"))
+        : createCommentVNode("v-if", true)
+    ], 2 /* CLASS */),
+    createBaseVNode("div", {
+      class: normalizeClass($options.isNullable ? 'sf-input-row' : null)
+    }, [
+      createBaseVNode("select", {
+        class: "sf-input sf-select",
+        value: $options.selectedIndex === -1 ? '' : String($options.selectedIndex),
+        onChange: _cache[0] || (_cache[0] = $event => ($options.onChange($event.target.value)))
+      }, [
+        ($options.selectedIndex === -1)
+          ? (openBlock(), createElementBlock("option", _hoisted_3$7, toDisplayString($options.isNullValue ? 'null' : ''), 1 /* TEXT */))
+          : createCommentVNode("v-if", true),
+        (openBlock(true), createElementBlock(Fragment, null, renderList($options.options, (opt, i) => {
+          return (openBlock(), createElementBlock("option", {
+            key: i,
+            value: String(i)
+          }, toDisplayString(opt.label), 9 /* TEXT, PROPS */, _hoisted_4$5))
+        }), 128 /* KEYED_FRAGMENT */))
+      ], 40 /* PROPS, NEED_HYDRATION */, _hoisted_2$7),
+      ($options.isNullable && !$options.isNullValue)
+        ? (openBlock(), createElementBlock("button", {
+            key: 0,
+            type: "button",
+            class: "sf-null-clear-btn",
+            title: "Set to null",
+            onClick: _cache[1] || (_cache[1] = $event => (_ctx.$emit('update:modelValue', null)))
+          }, "✕"))
+        : createCommentVNode("v-if", true)
+    ], 2 /* CLASS */),
     ($options.fieldErrors.length)
-      ? (openBlock(), createElementBlock("ul", _hoisted_3$6, [
+      ? (openBlock(), createElementBlock("ul", _hoisted_5$5, [
           (openBlock(true), createElementBlock(Fragment, null, renderList($options.fieldErrors, (err, i) => {
             return (openBlock(), createElementBlock("li", { key: i }, toDisplayString(err), 1 /* TEXT */))
           }), 128 /* KEYED_FRAGMENT */))
@@ -7315,10 +7639,10 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2 /* CLASS */))
 }
 
-script$a.render = render$9;
-script$a.__file = "src/editors/SelectEditor.vue";
+script$b.render = render$a;
+script$b.__file = "src/editors/SelectEditor.vue";
 
-var script$9 = {
+var script$a = {
   name: 'HiddenEditor',
   props: {
     schema: { type: Object, required: true },
@@ -7346,16 +7670,16 @@ var script$9 = {
   },
 };
 
-const _hoisted_1$7 = { style: {"display":"none"} };
+const _hoisted_1$8 = { style: {"display":"none"} };
 
-function render$8(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$7))
+function render$9(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("div", _hoisted_1$8))
 }
 
-script$9.render = render$8;
-script$9.__file = "src/editors/HiddenEditor.vue";
+script$a.render = render$9;
+script$a.__file = "src/editors/HiddenEditor.vue";
 
-var script$8 = {
+var script$9 = {
   name: 'SfIcon',
   props: {
     name: { type: String, required: true },
@@ -7363,17 +7687,17 @@ var script$8 = {
   },
 };
 
-const _hoisted_1$6 = ["width", "height"];
-const _hoisted_2$5 = {
+const _hoisted_1$7 = ["width", "height"];
+const _hoisted_2$6 = {
   key: 4,
   points: "6 9 12 15 18 9"
 };
-const _hoisted_3$5 = {
+const _hoisted_3$6 = {
   key: 5,
   points: "18 15 12 9 6 15"
 };
 
-function render$7(_ctx, _cache, $props, $setup, $data, $options) {
+function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("svg", {
     class: "sf-icon",
     width: $props.size,
@@ -7436,19 +7760,19 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 _cache[7] || (_cache[7] = createBaseVNode("polyline", { points: "19 12 12 19 5 12" }, null, -1 /* CACHED */))
               ], 64 /* STABLE_FRAGMENT */))
             : ($props.name === 'chevron-down')
-              ? (openBlock(), createElementBlock("polyline", _hoisted_2$5))
+              ? (openBlock(), createElementBlock("polyline", _hoisted_2$6))
               : ($props.name === 'chevron-up')
-                ? (openBlock(), createElementBlock("polyline", _hoisted_3$5))
+                ? (openBlock(), createElementBlock("polyline", _hoisted_3$6))
                 : ($props.name === 'grip')
                   ? (openBlock(), createElementBlock(Fragment, { key: 6 }, [
                       _cache[8] || (_cache[8] = createStaticVNode("<circle cx=\"9\" cy=\"7\" r=\"1\" fill=\"currentColor\" stroke=\"none\"></circle><circle cx=\"15\" cy=\"7\" r=\"1\" fill=\"currentColor\" stroke=\"none\"></circle><circle cx=\"9\" cy=\"12\" r=\"1\" fill=\"currentColor\" stroke=\"none\"></circle><circle cx=\"15\" cy=\"12\" r=\"1\" fill=\"currentColor\" stroke=\"none\"></circle><circle cx=\"9\" cy=\"17\" r=\"1\" fill=\"currentColor\" stroke=\"none\"></circle><circle cx=\"15\" cy=\"17\" r=\"1\" fill=\"currentColor\" stroke=\"none\"></circle>", 6))
                     ], 64 /* STABLE_FRAGMENT */))
                   : createCommentVNode("v-if", true)
-  ], 8 /* PROPS */, _hoisted_1$6))
+  ], 8 /* PROPS */, _hoisted_1$7))
 }
 
-script$8.render = render$7;
-script$8.__file = "src/editors/SfIcon.vue";
+script$9.render = render$8;
+script$9.__file = "src/editors/SfIcon.vue";
 
 // JSON Schema conditional evaluation for form rendering.
 //
@@ -7699,12 +8023,12 @@ function hasConditionals(schema) {
   return false;
 }
 
-var script$7 = {
+var script$8 = {
   name: 'ObjectEditor',
   beforeCreate() {
     if (!this.$options.components) this.$options.components = {};
     this.$options.components.SchemaEditor = script$1;
-    this.$options.components.SfIcon = script$8;
+    this.$options.components.SfIcon = script$9;
   },
   props: {
     schema: { type: Object, required: true },
@@ -7716,6 +8040,9 @@ var script$7 = {
   data() {
     return {
       collapsed: false,
+      // Values pruned when a conditional rule deactivated their field,
+      // kept so toggling the controller back restores what the user typed.
+      prunedStash: {},
     };
   },
   computed: {
@@ -7763,10 +8090,21 @@ var script$7 = {
       const allowed = new Set(Object.keys(effective.properties || {}));
       let changed = false;
       const out = {};
+      // restore stashed values for fields a rule just re-activated
+      for (const k of allowed) {
+        if (!(k in value) && k in this.prunedStash) {
+          out[k] = this.prunedStash[k];
+          delete this.prunedStash[k];
+          changed = true;
+        }
+      }
       for (const k of Object.keys(value)) {
         if (allowed.has(k)) {
           out[k] = value[k];
         } else {
+          // pruned from the emitted value (documented behavior), but kept
+          // locally so a controller toggle round-trip is not destructive
+          this.prunedStash[k] = value[k];
           changed = true;
         }
       }
@@ -7775,27 +8113,27 @@ var script$7 = {
   },
 };
 
-const _hoisted_1$5 = {
+const _hoisted_1$6 = {
   key: 0,
   class: "sf-object sf-object-root"
 };
-const _hoisted_2$4 = { class: "sf-object-fields" };
-const _hoisted_3$4 = { class: "sf-object-title" };
-const _hoisted_4$3 = ["aria-label"];
-const _hoisted_5$3 = { class: "sf-object-title-text" };
+const _hoisted_2$5 = { class: "sf-object-fields" };
+const _hoisted_3$5 = { class: "sf-object-title" };
+const _hoisted_4$4 = ["aria-label"];
+const _hoisted_5$4 = { class: "sf-object-title-text" };
 const _hoisted_6$3 = {
   key: 0,
   class: "sf-object-summary"
 };
 const _hoisted_7$2 = { class: "sf-object-fields" };
 
-function render$6(_ctx, _cache, $props, $setup, $data, $options) {
+function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_SchemaEditor = resolveComponent("SchemaEditor");
   const _component_SfIcon = resolveComponent("SfIcon");
 
   return ($options.isRoot)
-    ? (openBlock(), createElementBlock("div", _hoisted_1$5, [
-        createBaseVNode("div", _hoisted_2$4, [
+    ? (openBlock(), createElementBlock("div", _hoisted_1$6, [
+        createBaseVNode("div", _hoisted_2$5, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(($options.effectiveSchema.properties || {}), (propSchema, key) => {
             return (openBlock(), createBlock(_component_SchemaEditor, {
               key: key,
@@ -7812,7 +8150,7 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
         key: 1,
         class: normalizeClass(["sf-object", { 'sf-object-collapsed': $data.collapsed }])
       }, [
-        createBaseVNode("legend", _hoisted_3$4, [
+        createBaseVNode("legend", _hoisted_3$5, [
           createBaseVNode("button", {
             type: "button",
             class: "sf-collapse-btn",
@@ -7823,8 +8161,8 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
               name: $data.collapsed ? 'chevron-down' : 'chevron-up',
               size: 12
             }, null, 8 /* PROPS */, ["name"])
-          ], 8 /* PROPS */, _hoisted_4$3),
-          createBaseVNode("span", _hoisted_5$3, toDisplayString($options.title), 1 /* TEXT */),
+          ], 8 /* PROPS */, _hoisted_4$4),
+          createBaseVNode("span", _hoisted_5$4, toDisplayString($options.title), 1 /* TEXT */),
           ($data.collapsed && $options.summary)
             ? (openBlock(), createElementBlock("span", _hoisted_6$3, toDisplayString($options.summary), 1 /* TEXT */))
             : createCommentVNode("v-if", true)
@@ -7846,56 +8184,17 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
       ], 2 /* CLASS */))
 }
 
-script$7.render = render$6;
-script$7.__file = "src/editors/ObjectEditor.vue";
-
-function debounce(fn, delay) {
-  let timer;
-  return function (...args) {
-    clearTimeout(timer);
-    timer = setTimeout(() => fn.apply(this, args), delay);
-  };
-}
-
-function deepClone(obj) {
-  if (obj === null || typeof obj !== 'object') return obj;
-  if (Array.isArray(obj)) return obj.map(deepClone);
-  const clone = {};
-  for (const key of Object.keys(obj)) {
-    clone[key] = deepClone(obj[key]);
-  }
-  return clone;
-}
-
-function getDefaultForSchema(schema) {
-  if ('default' in schema) return deepClone(schema.default);
-  if (schema.type === 'object') {
-    const obj = {};
-    for (const [key, prop] of Object.entries(schema.properties || {})) {
-      if ('default' in prop) obj[key] = deepClone(prop.default);
-      else if (prop.type === 'string') obj[key] = '';
-      else if (prop.type === 'integer' || prop.type === 'number') obj[key] = 0;
-      else if (prop.type === 'boolean') obj[key] = false;
-      else if (prop.type === 'array') obj[key] = [];
-    }
-    return obj;
-  }
-  if (schema.type === 'array') return [];
-  if (schema.type === 'string') return '';
-  if (schema.type === 'integer' || schema.type === 'number') return 0;
-  if (schema.type === 'boolean') return false;
-  if (schema.type === 'relation') return schema.multiple ? [] : null;
-  return null;
-}
+script$8.render = render$7;
+script$8.__file = "src/editors/ObjectEditor.vue";
 
 let keyCounter = 0;
 
-var script$6 = {
+var script$7 = {
   name: 'ArrayEditor',
   beforeCreate() {
     if (!this.$options.components) this.$options.components = {};
     this.$options.components.SchemaEditor = script$1;
-    this.$options.components.SfIcon = script$8;
+    this.$options.components.SfIcon = script$9;
   },
   props: {
     schema: { type: Object, required: true },
@@ -7995,11 +8294,11 @@ var script$6 = {
   },
 };
 
-const _hoisted_1$4 = { class: "sf-array-header" };
-const _hoisted_2$3 = { class: "sf-label" };
-const _hoisted_3$3 = { class: "sf-array-count" };
-const _hoisted_4$2 = ["title"];
-const _hoisted_5$2 = { class: "sf-array-items" };
+const _hoisted_1$5 = { class: "sf-array-header" };
+const _hoisted_2$4 = { class: "sf-label" };
+const _hoisted_3$4 = { class: "sf-array-count" };
+const _hoisted_4$3 = ["title"];
+const _hoisted_5$3 = { class: "sf-array-items" };
 const _hoisted_6$2 = ["onDragstart", "onDragover", "onDragleave", "onDrop"];
 const _hoisted_7$1 = { class: "sf-array-item-header" };
 const _hoisted_8$1 = { class: "sf-array-item-left" };
@@ -8018,16 +8317,16 @@ const _hoisted_16 = {
   class: "errorlist"
 };
 
-function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_SfIcon = resolveComponent("SfIcon");
   const _component_SchemaEditor = resolveComponent("SchemaEditor");
 
   return (openBlock(), createElementBlock("div", {
     class: normalizeClass(["sf-array", { errors: $options.fieldErrors.length }])
   }, [
-    createBaseVNode("div", _hoisted_1$4, [
-      createBaseVNode("span", _hoisted_2$3, toDisplayString($options.title), 1 /* TEXT */),
-      createBaseVNode("span", _hoisted_3$3, toDisplayString($data.items.length), 1 /* TEXT */),
+    createBaseVNode("div", _hoisted_1$5, [
+      createBaseVNode("span", _hoisted_2$4, toDisplayString($options.title), 1 /* TEXT */),
+      createBaseVNode("span", _hoisted_3$4, toDisplayString($data.items.length), 1 /* TEXT */),
       createBaseVNode("button", {
         type: "button",
         class: "sf-btn sf-btn-add",
@@ -8046,10 +8345,10 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
             createVNode(_component_SfIcon, {
               name: $data.allCollapsed ? 'chevron-down' : 'chevron-up'
             }, null, 8 /* PROPS */, ["name"])
-          ], 8 /* PROPS */, _hoisted_4$2))
+          ], 8 /* PROPS */, _hoisted_4$3))
         : createCommentVNode("v-if", true)
     ]),
-    createBaseVNode("div", _hoisted_5$2, [
+    createBaseVNode("div", _hoisted_5$3, [
       (openBlock(true), createElementBlock(Fragment, null, renderList($data.items, (item, index) => {
         return (openBlock(), createElementBlock("div", {
           key: item._key,
@@ -8126,15 +8425,15 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2 /* CLASS */))
 }
 
-script$6.render = render$5;
-script$6.__file = "src/editors/ArrayEditor.vue";
+script$7.render = render$6;
+script$7.__file = "src/editors/ArrayEditor.vue";
 
-var script$5 = {
+var script$6 = {
   name: 'NullableEditor',
   beforeCreate() {
     if (!this.$options.components) this.$options.components = {};
     this.$options.components.SchemaEditor = script$1;
-    this.$options.components.SfIcon = script$8;
+    this.$options.components.SfIcon = script$9;
   },
   props: {
     schema: { type: Object, required: true },
@@ -8194,22 +8493,22 @@ var script$5 = {
   },
 };
 
-const _hoisted_1$3 = { class: "sf-nullable-header" };
-const _hoisted_2$2 = { class: "sf-nullable-body" };
-const _hoisted_3$2 = {
+const _hoisted_1$4 = { class: "sf-nullable-header" };
+const _hoisted_2$3 = { class: "sf-nullable-body" };
+const _hoisted_3$3 = {
   key: 0,
   class: "errorlist"
 };
 
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_SfIcon = resolveComponent("SfIcon");
   const _component_SchemaEditor = resolveComponent("SchemaEditor");
 
   return (openBlock(), createElementBlock("div", {
     class: normalizeClass(["sf-nullable", { errors: $options.fieldErrors.length }])
   }, [
-    createBaseVNode("div", _hoisted_1$3, [
-      createBaseVNode("label", {
+    createBaseVNode("div", _hoisted_1$4, [
+      createBaseVNode("span", {
         class: normalizeClass(["sf-label", { required: $options.isRequired }])
       }, toDisplayString($options.title), 3 /* TEXT, CLASS */),
       createBaseVNode("button", {
@@ -8228,7 +8527,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
             ], 64 /* STABLE_FRAGMENT */))
       ], 2 /* CLASS */)
     ]),
-    createBaseVNode("div", _hoisted_2$2, [
+    createBaseVNode("div", _hoisted_2$3, [
       (!$data.isNull)
         ? (openBlock(), createBlock(_component_SchemaEditor, {
             key: 0,
@@ -8241,7 +8540,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
         : createCommentVNode("v-if", true)
     ]),
     ($options.fieldErrors.length)
-      ? (openBlock(), createElementBlock("ul", _hoisted_3$2, [
+      ? (openBlock(), createElementBlock("ul", _hoisted_3$3, [
           (openBlock(true), createElementBlock(Fragment, null, renderList($options.fieldErrors, (err, i) => {
             return (openBlock(), createElementBlock("li", { key: i }, toDisplayString(err), 1 /* TEXT */))
           }), 128 /* KEYED_FRAGMENT */))
@@ -8250,10 +8549,10 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2 /* CLASS */))
 }
 
-script$5.render = render$4;
-script$5.__file = "src/editors/NullableEditor.vue";
+script$6.render = render$5;
+script$6.__file = "src/editors/NullableEditor.vue";
 
-var script$4 = {
+var script$5 = {
   name: 'UnionEditor',
   beforeCreate() {
     if (!this.$options.components) this.$options.components = {};
@@ -8314,19 +8613,19 @@ var script$4 = {
   },
 };
 
-const _hoisted_1$2 = { class: "sf-union" };
-const _hoisted_2$1 = { class: "sf-field" };
-const _hoisted_3$1 = { class: "sf-label" };
-const _hoisted_4$1 = ["value"];
-const _hoisted_5$1 = ["value"];
+const _hoisted_1$3 = { class: "sf-union" };
+const _hoisted_2$2 = { class: "sf-field" };
+const _hoisted_3$2 = { class: "sf-label" };
+const _hoisted_4$2 = ["value"];
+const _hoisted_5$2 = ["value"];
 const _hoisted_6$1 = { class: "sf-union-body" };
 
-function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_SchemaEditor = resolveComponent("SchemaEditor");
 
-  return (openBlock(), createElementBlock("div", _hoisted_1$2, [
-    createBaseVNode("div", _hoisted_2$1, [
-      createBaseVNode("label", _hoisted_3$1, toDisplayString($options.title), 1 /* TEXT */),
+  return (openBlock(), createElementBlock("div", _hoisted_1$3, [
+    createBaseVNode("div", _hoisted_2$2, [
+      createBaseVNode("span", _hoisted_3$2, toDisplayString($options.title), 1 /* TEXT */),
       createBaseVNode("select", {
         class: "sf-input sf-select",
         value: $data.currentType,
@@ -8336,9 +8635,9 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
           return (openBlock(), createElementBlock("option", {
             key: key,
             value: key
-          }, toDisplayString($options.humanize(key)), 9 /* TEXT, PROPS */, _hoisted_5$1))
+          }, toDisplayString($options.humanize(key)), 9 /* TEXT, PROPS */, _hoisted_5$2))
         }), 128 /* KEYED_FRAGMENT */))
-      ], 40 /* PROPS, NEED_HYDRATION */, _hoisted_4$1)
+      ], 40 /* PROPS, NEED_HYDRATION */, _hoisted_4$2)
     ]),
     createBaseVNode("div", _hoisted_6$1, [
       (openBlock(), createBlock(_component_SchemaEditor, {
@@ -8353,12 +8652,12 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-script$4.render = render$3;
-script$4.__file = "src/editors/UnionEditor.vue";
+script$5.render = render$4;
+script$5.__file = "src/editors/UnionEditor.vue";
 
-var script$3 = {
+var script$4 = {
   name: 'RelationEditor',
-  components: { SfIcon: script$8 },
+  components: { SfIcon: script$9 },
   inject: {
     language: { from: 'language', default: () => () => '' },
   },
@@ -8526,14 +8825,14 @@ var script$3 = {
   },
 };
 
-const _hoisted_1$1 = { class: "sf-relation-wrapper" };
-const _hoisted_2 = {
+const _hoisted_1$2 = { class: "sf-relation-wrapper" };
+const _hoisted_2$1 = {
   key: 0,
   class: "sf-relation-selected"
 };
-const _hoisted_3 = { class: "sf-relation-tag-text" };
-const _hoisted_4 = ["onClick"];
-const _hoisted_5 = { class: "sf-relation-search" };
+const _hoisted_3$1 = { class: "sf-relation-tag-text" };
+const _hoisted_4$1 = ["onClick"];
+const _hoisted_5$1 = { class: "sf-relation-search" };
 const _hoisted_6 = ["placeholder"];
 const _hoisted_7 = { class: "sf-relation-dropdown" };
 const _hoisted_8 = {
@@ -8546,26 +8845,26 @@ const _hoisted_10 = {
   class: "errorlist"
 };
 
-function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_SfIcon = resolveComponent("SfIcon");
 
   return (openBlock(), createElementBlock("div", {
     class: normalizeClass(["sf-field sf-relation", { errors: $options.fieldErrors.length }]),
     ref: "root"
   }, [
-    createBaseVNode("label", {
+    createBaseVNode("span", {
       class: normalizeClass(["sf-label", { required: $options.isRequired }])
     }, toDisplayString($options.title), 3 /* TEXT, CLASS */),
-    createBaseVNode("div", _hoisted_1$1, [
+    createBaseVNode("div", _hoisted_1$2, [
       createCommentVNode(" Selected items "),
       ($data.selected.length)
-        ? (openBlock(), createElementBlock("div", _hoisted_2, [
+        ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
             (openBlock(true), createElementBlock(Fragment, null, renderList($data.selected, (item) => {
               return (openBlock(), createElementBlock("div", {
                 key: $options.itemKey(item),
                 class: "sf-relation-tag"
               }, [
-                createBaseVNode("span", _hoisted_3, toDisplayString($options.getDisplayName(item)), 1 /* TEXT */),
+                createBaseVNode("span", _hoisted_3$1, toDisplayString($options.getDisplayName(item)), 1 /* TEXT */),
                 ($data.isMultiple || $data.allowClear)
                   ? (openBlock(), createElementBlock("button", {
                       key: 0,
@@ -8574,14 +8873,14 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                       onClick: withModifiers($event => ($options.removeItem(item)), ["stop"])
                     }, [
                       createVNode(_component_SfIcon, { name: "times" })
-                    ], 8 /* PROPS */, _hoisted_4))
+                    ], 8 /* PROPS */, _hoisted_4$1))
                   : createCommentVNode("v-if", true)
               ]))
             }), 128 /* KEYED_FRAGMENT */))
           ]))
         : createCommentVNode("v-if", true),
       createCommentVNode(" Search box "),
-      withDirectives(createBaseVNode("div", _hoisted_5, [
+      withDirectives(createBaseVNode("div", _hoisted_5$1, [
         withDirectives(createBaseVNode("input", {
           ref: "searchInput",
           type: "text",
@@ -8631,8 +8930,217 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2 /* CLASS */))
 }
 
+script$4.render = render$3;
+script$4.__file = "src/editors/RelationEditor.vue";
+
+const ACE_CDN = 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.37.5/ace.min.js';
+
+function loadAce() {
+  if (window.ace) return Promise.resolve(window.ace);
+  return new Promise((resolve, reject) => {
+    const existing = document.querySelector(`script[src="${ACE_CDN}"]`);
+    if (existing) {
+      existing.addEventListener('load', () => resolve(window.ace));
+      existing.addEventListener('error', reject);
+      return;
+    }
+    const s = document.createElement('script');
+    s.src = ACE_CDN;
+    s.async = true;
+    s.onload = () => resolve(window.ace);
+    s.onerror = () => reject(new Error('Failed to load Ace Editor'));
+    document.head.appendChild(s);
+  });
+}
+
+var script$3 = {
+  name: 'JsonEditor',
+  props: {
+    schema: { type: Object, required: true },
+    modelValue: { default: null },
+    path: { type: Array, default: () => [] },
+    form: { type: Object, default: null },
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      rawValue: this.modelValue != null ? JSON.stringify(this.modelValue, null, 2) : '{}',
+      ready: false,
+      hasErrors: false,
+      loadError: null,
+      _editor: null,
+      _silent: false,
+    };
+  },
+  computed: {
+    title() {
+      return this.schema.title || this.humanize(this.path[this.path.length - 1]) || '';
+    },
+    isRequired() {
+      if (this.path.length < 2 || !this.form) return false;
+      const parentPath = this.path.slice(0, -1);
+      const fieldName = this.path[this.path.length - 1];
+      const parentSchema = this.form.getSchemaAtPath(parentPath);
+      return parentSchema && Array.isArray(parentSchema.required) && parentSchema.required.includes(fieldName);
+    },
+    fieldErrors() {
+      if (!this.form || !this.form.getErrorsForPath) return [];
+      return this.form.getErrorsForPath(this.path);
+    },
+  },
+  watch: {
+    modelValue(val) {
+      if (this._silent) return;
+      const external = val != null ? JSON.stringify(val, null, 2) : '{}';
+      try {
+        if (JSON.stringify(JSON.parse(this.rawValue)) !== JSON.stringify(val)) {
+          this.rawValue = external;
+          if (this._editor) {
+            this._silent = true;
+            this._editor.setValue(external, -1);
+            this._silent = false;
+          }
+        }
+      } catch { /* rawValue is invalid, leave it */ }
+    },
+  },
+  async mounted() {
+    try {
+      const ace = await loadAce();
+      const container = this.$refs.aceContainer;
+      if (!container) return;
+
+      const editor = ace.edit(container);
+      editor.setTheme(this._isDark() ? 'ace/theme/one_dark' : 'ace/theme/chrome');
+      editor.session.setMode('ace/mode/json');
+      editor.session.setTabSize(2);
+      editor.session.setUseSoftTabs(true);
+      editor.setShowPrintMargin(false);
+      editor.setOption('minLines', 5);
+      editor.setOption('maxLines', 20);
+      editor.setValue(this.rawValue, -1);
+      editor.$blockScrolling = Infinity;
+
+      editor.session.on('change', () => {
+        if (this._silent) return;
+        const text = editor.getValue();
+        this.rawValue = text;
+        try {
+          const parsed = JSON.parse(text);
+          this.hasErrors = false;
+          this._silent = true;
+          this.$emit('update:modelValue', parsed);
+          this._silent = false;
+        } catch {
+          this.hasErrors = true;
+        }
+      });
+
+      // Reflect annotation (lint) errors on hasErrors
+      editor.session.on('changeAnnotation', () => {
+        const annotations = editor.session.getAnnotations();
+        this.hasErrors = annotations.some(a => a.type === 'error');
+      });
+
+      this._editor = editor;
+      this.ready = true;
+    } catch (err) {
+      this.loadError = `Editor unavailable: ${err.message}`;
+    }
+  },
+  beforeUnmount() {
+    if (this._editor) {
+      this._editor.destroy();
+      this._editor = null;
+    }
+  },
+  methods: {
+    humanize(str) {
+      if (!str) return '';
+      return str.replace(/_/g, ' ').replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, s => s.toUpperCase());
+    },
+    _isDark() {
+      return document.documentElement.dataset.colorScheme === 'dark' ||
+        window.matchMedia?.('(prefers-color-scheme: dark)').matches;
+    },
+    format() {
+      if (!this._editor) return;
+      try {
+        const formatted = JSON.stringify(JSON.parse(this._editor.getValue()), null, 2);
+        this._silent = true;
+        this._editor.setValue(formatted, -1);
+        this._silent = false;
+        this.rawValue = formatted;
+      } catch { /* invalid JSON */ }
+    },
+    onFallbackInput(e) {
+      this.rawValue = e.target.value;
+      try { this.$emit('update:modelValue', JSON.parse(this.rawValue)); } catch { /* ignore */ }
+    },
+  },
+};
+
+const _hoisted_1$1 = { class: "sf-json-toolbar" };
+const _hoisted_2 = {
+  key: 0,
+  class: "sf-json-error-msg"
+};
+const _hoisted_3 = {
+  ref: "aceContainer",
+  class: "sf-json-ace-container"
+};
+const _hoisted_4 = ["value"];
+const _hoisted_5 = {
+  key: 0,
+  class: "errorlist"
+};
+
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass(["sf-field sf-field-json", { errors: $options.fieldErrors.length }])
+  }, [
+    createBaseVNode("span", {
+      class: normalizeClass(["sf-label", { required: $options.isRequired }])
+    }, toDisplayString($options.title), 3 /* TEXT, CLASS */),
+    createBaseVNode("div", {
+      class: normalizeClass(["sf-json-editor", { 'sf-json-error': $data.hasErrors }])
+    }, [
+      createBaseVNode("div", _hoisted_1$1, [
+        ($data.loadError)
+          ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString($data.loadError), 1 /* TEXT */))
+          : createCommentVNode("v-if", true),
+        ($data.ready)
+          ? (openBlock(), createElementBlock("button", {
+              key: 1,
+              type: "button",
+              class: "sf-btn sf-btn-sm sf-json-format-btn",
+              onClick: _cache[0] || (_cache[0] = (...args) => ($options.format && $options.format(...args)))
+            }, " Format "))
+          : createCommentVNode("v-if", true)
+      ]),
+      createBaseVNode("div", _hoisted_3, null, 512 /* NEED_PATCH */),
+      (!$data.ready)
+        ? (openBlock(), createElementBlock("textarea", {
+            key: 0,
+            class: "sf-input sf-textarea sf-json-textarea-fallback",
+            value: $data.rawValue,
+            spellcheck: "false",
+            onInput: _cache[1] || (_cache[1] = (...args) => ($options.onFallbackInput && $options.onFallbackInput(...args)))
+          }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_4))
+        : createCommentVNode("v-if", true)
+    ], 2 /* CLASS */),
+    ($options.fieldErrors.length)
+      ? (openBlock(), createElementBlock("ul", _hoisted_5, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList($options.fieldErrors, (err, i) => {
+            return (openBlock(), createElementBlock("li", { key: i }, toDisplayString(err), 1 /* TEXT */))
+          }), 128 /* KEYED_FRAGMENT */))
+        ]))
+      : createCommentVNode("v-if", true)
+  ], 2 /* CLASS */))
+}
+
 script$3.render = render$2;
-script$3.__file = "src/editors/RelationEditor.vue";
+script$3.__file = "src/editors/JsonEditor.vue";
 
 var script$2 = {
   name: 'WebComponentWrapper',
@@ -8693,16 +9201,18 @@ const MAX_DEPTH = 12;
 var script$1 = {
   name: 'SchemaEditor',
   components: {
-    StringEditor: script$d,
-    NumberEditor: script$c,
-    BooleanEditor: script$b,
-    SelectEditor: script$a,
-    HiddenEditor: script$9,
-    ObjectEditor: script$7,
-    ArrayEditor: script$6,
-    NullableEditor: script$5,
-    UnionEditor: script$4,
-    RelationEditor: script$3,
+    StringEditor: script$f,
+    NumberEditor: script$e,
+    BooleanEditor: script$d,
+    DateEditor: script$c,
+    SelectEditor: script$b,
+    HiddenEditor: script$a,
+    ObjectEditor: script$8,
+    ArrayEditor: script$7,
+    NullableEditor: script$6,
+    UnionEditor: script$5,
+    RelationEditor: script$4,
+    JsonEditor: script$3,
     WebComponentWrapper: script$2,
   },
   inject: {
@@ -8744,14 +9254,19 @@ var script$1 = {
 
       if (schema.type === 'relation') return 'RelationEditor';
       if (schema.oneOf && schema.discriminator) return 'UnionEditor';
+      // Choice-list oneOf ({const, title} options) renders as a select —
+      // must be checked before the 'const' HiddenEditor routing.
+      if (isChoiceOneOf(schema.oneOf)) return 'SelectEditor';
       if ('const' in schema) return 'HiddenEditor';
       if (schema.enum && schema.enum.length === 1 && schema.type === 'string') return 'HiddenEditor';
-      if (schema._nullable) return 'NullableEditor';
+      if (schema._nullable && (schema.type === 'object' || schema.type === 'array')) return 'NullableEditor';
       if (schema.type === 'object' && schema.properties) return 'ObjectEditor';
+      if (schema.type === 'object') return 'JsonEditor';
       if (schema.type === 'array') return 'ArrayEditor';
       if (schema.enum) return 'SelectEditor';
       if (schema.type === 'boolean') return 'BooleanEditor';
       if (schema.type === 'number' || schema.type === 'integer') return 'NumberEditor';
+      if (schema.type === 'string' && (schema.format === 'date' || schema.format === 'date-time')) return 'DateEditor';
 
       return 'StringEditor';
     },
@@ -8859,29 +9374,36 @@ var script = {
         const hasNull = schema.anyOf.some(s => s.type === 'null');
         if (hasNull && nonNull.length === 1) {
           const resolved = this.resolveSchema(nonNull[0]);
-          return {
-            ...resolved,
-            _nullable: true,
-            title: schema.title || resolved.title,
-            default: 'default' in schema ? schema.default : null,
-          };
+          // Carry ALL sibling keys through the nullable collapse: pydantic
+          // emits json_schema_extra (placeholder, minLength/maxLength,
+          // minimum/maximum, format, choice oneOf, ...) as SIBLINGS of
+          // anyOf on Optional fields. Outer keys override the inner branch.
+          const { anyOf, oneOf, ...rest } = schema;
+          const out = { ...resolved, ...rest, _nullable: true };
+          if (!('default' in schema)) out.default = null;
+          if (isChoiceOneOf(oneOf)) out.oneOf = oneOf;
+          return out;
         }
         if (nonNull.length >= 1) return this.resolveSchema(nonNull[0]);
       }
 
       if (schema.oneOf && schema.discriminator) return schema;
 
+      // A oneOf of {const, title} value options is a choice list (select),
+      // not alternative sub-schemas: keep it intact for SelectEditor instead
+      // of collapsing to the first member (which routed to HiddenEditor and
+      // overwrote stored values on mount).
+      if (isChoiceOneOf(schema.oneOf)) return schema;
+
       if (schema.oneOf) {
         const nonNull = schema.oneOf.filter(s => s.type !== 'null');
         const hasNull = schema.oneOf.some(s => s.type === 'null');
         if (hasNull && nonNull.length === 1) {
           const resolved = this.resolveSchema(nonNull[0]);
-          return {
-            ...resolved,
-            _nullable: true,
-            title: schema.title || resolved.title,
-            default: 'default' in schema ? schema.default : null,
-          };
+          const { anyOf, oneOf, ...rest } = schema;
+          const out = { ...resolved, ...rest, _nullable: true };
+          if (!('default' in schema)) out.default = null;
+          return out;
         }
         if (nonNull.length >= 1) return this.resolveSchema(nonNull[0]);
       }
@@ -9085,5 +9607,5 @@ function registerCustomElement(tagName = 'schema-form') {
   }
 }
 
-export { script$6 as ArrayEditor, BaseEditorElement, script$b as BooleanEditor, script$9 as HiddenEditor, script$5 as NullableEditor, script$c as NumberEditor, script$7 as ObjectEditor, script$3 as RelationEditor, script$1 as SchemaEditor, script as SchemaForm, SchemaFormElement, script$a as SelectEditor, script$d as StringEditor, script$4 as UnionEditor, script$2 as WebComponentWrapper, applyConditionals, hasConditionals, matchesSchema, registerCustomElement };
+export { script$7 as ArrayEditor, BaseEditorElement, script$d as BooleanEditor, script$c as DateEditor, script$a as HiddenEditor, script$6 as NullableEditor, script$e as NumberEditor, script$8 as ObjectEditor, script$4 as RelationEditor, script$1 as SchemaEditor, script as SchemaForm, SchemaFormElement, script$b as SelectEditor, script$f as StringEditor, script$5 as UnionEditor, script$2 as WebComponentWrapper, applyConditionals, hasConditionals, matchesSchema, registerCustomElement };
 //# sourceMappingURL=structured-widget-editor.esm.js.map