@structured-field/widget-editor 1.2.1 → 1.2.2

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

@@ -1,4 +1,4 @@
-var script$d = {
+var script$e = {
   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$e(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$e = ((...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$c = {
+  key: 0,
+  class: "sf-null-badge"
+};
+const _hoisted_2$a = ["value", "placeholder"];
+const _hoisted_3$a = ["value", "placeholder"];
+const _hoisted_4$7 = {
+  key: 0,
   class: "errorlist"
 };
 
-function render$c(_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 */),
-    ($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$c, "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$a))
+        : (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$a)),
+      ($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$e.render = render$d;
+script$e.__file = "src/editors/StringEditor.vue";
 
-var script$c = {
+var script$d = {
   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$b = {
+  key: 0,
+  class: "sf-null-badge"
+};
+const _hoisted_2$9 = ["step", "min", "max", "value", "placeholder"];
+const _hoisted_3$9 = {
   key: 0,
   class: "errorlist"
 };
 
-function render$b(_ctx, _cache, $props, $setup, $data, $options) {
+function render$c(_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$b, "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$9),
+      ($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$9, [
           (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$d.render = render$c;
+script$d.__file = "src/editors/NumberEditor.vue";
 
-var script$b = {
+var script$c = {
   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$a = { class: "sf-boolean-row" };
+const _hoisted_2$8 = { class: "sf-checkbox-label" };
+const _hoisted_3$8 = ["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$b(_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$a, [
+      createBaseVNode("label", _hoisted_2$8, [
+        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$8),
+        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,10 @@ function render$a(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2 /* CLASS */))
 }
 
-script$b.render = render$a;
-script$b.__file = "src/editors/BooleanEditor.vue";
+script$c.render = render$b;
+script$c.__file = "src/editors/BooleanEditor.vue";
 
-var script$a = {
+var script$b = {
   name: 'SelectEditor',
   props: {
     schema: { type: Object, required: true },
@@ -7266,6 +7348,12 @@ 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);
@@ -7279,34 +7367,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.isNullValue ? '' : ($props.modelValue != null ? String($props.modelValue) : ''),
+        onChange: _cache[0] || (_cache[0] = $event => (_ctx.$emit('update:modelValue', $event.target.value)))
+      }, [
+        ($options.isNullable && $options.isNullValue)
+          ? (openBlock(), createElementBlock("option", _hoisted_3$7, "null"))
+          : createCommentVNode("v-if", true),
+        (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_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 +7434,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 +7465,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 +7482,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 +7555,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 +7818,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 },
@@ -7775,27 +7894,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 +7931,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 +7942,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,8 +7965,8 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
       ], 2 /* CLASS */))
 }
 
-script$7.render = render$6;
-script$7.__file = "src/editors/ObjectEditor.vue";
+script$8.render = render$7;
+script$8.__file = "src/editors/ObjectEditor.vue";
 
 function debounce(fn, delay) {
   let timer;
@@ -7890,12 +8009,12 @@ function getDefaultForSchema(schema) {
 
 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 +8114,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 +8137,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 +8165,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 +8245,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 +8313,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 +8347,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 +8360,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 +8369,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 +8433,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 +8455,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 +8472,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 +8645,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 +8665,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 +8693,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 +8750,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 +9021,17 @@ 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$e,
+    NumberEditor: script$d,
+    BooleanEditor: 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: {
@@ -8746,8 +9075,9 @@ var script$1 = {
       if (schema.oneOf && schema.discriminator) return 'UnionEditor';
       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';
@@ -9085,5 +9415,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$c as BooleanEditor, script$a as HiddenEditor, script$6 as NullableEditor, script$d as NumberEditor, script$8 as ObjectEditor, script$4 as RelationEditor, script$1 as SchemaEditor, script as SchemaForm, SchemaFormElement, script$b as SelectEditor, script$e as StringEditor, script$5 as UnionEditor, script$2 as WebComponentWrapper, applyConditionals, hasConditionals, matchesSchema, registerCustomElement };
 //# sourceMappingURL=structured-widget-editor.esm.js.map