@structured-field/widget-editor 1.1.0 → 1.2.0

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

@@ -1,4 +1,4 @@
-var script$c = {
+var script$d = {
   name: 'StringEditor',
   props: {
     schema: { type: Object, required: true },
@@ -1583,6 +1583,44 @@ const toReadonly = (value) => isObject(value) ? /* @__PURE__ */ readonly(value)
 function isRef(r) {
   return r ? r["__v_isRef"] === true : false;
 }
+// @__NO_SIDE_EFFECTS__
+function ref(value) {
+  return createRef(value, false);
+}
+function createRef(rawValue, shallow) {
+  if (/* @__PURE__ */ isRef(rawValue)) {
+    return rawValue;
+  }
+  return new RefImpl(rawValue, shallow);
+}
+class RefImpl {
+  constructor(value, isShallow2) {
+    this.dep = new Dep();
+    this["__v_isRef"] = true;
+    this["__v_isShallow"] = false;
+    this._rawValue = isShallow2 ? value : toRaw(value);
+    this._value = isShallow2 ? value : toReactive(value);
+    this["__v_isShallow"] = isShallow2;
+  }
+  get value() {
+    {
+      this.dep.track();
+    }
+    return this._value;
+  }
+  set value(newValue) {
+    const oldValue = this._rawValue;
+    const useDirectValue = this["__v_isShallow"] || isShallow(newValue) || isReadonly(newValue);
+    newValue = useDirectValue ? newValue : toRaw(newValue);
+    if (hasChanged(newValue, oldValue)) {
+      this._rawValue = newValue;
+      this._value = useDirectValue ? newValue : toReactive(newValue);
+      {
+        this.dep.trigger();
+      }
+    }
+  }
+}
 function unref(ref2) {
   return /* @__PURE__ */ isRef(ref2) ? ref2.value : ref2;
 }
@@ -5974,6 +6012,32 @@ const computed = (getterOrOptions, debugOptions) => {
   return c;
 };
 
+function h(type, propsOrChildren, children) {
+  try {
+    setBlockTracking(-1);
+    const l = arguments.length;
+    if (l === 2) {
+      if (isObject(propsOrChildren) && !isArray(propsOrChildren)) {
+        if (isVNode(propsOrChildren)) {
+          return createVNode(type, null, [propsOrChildren]);
+        }
+        return createVNode(type, propsOrChildren);
+      } else {
+        return createVNode(type, null, propsOrChildren);
+      }
+    } else {
+      if (l > 3) {
+        children = Array.prototype.slice.call(arguments, 2);
+      } else if (l === 3 && isVNode(children)) {
+        children = [children];
+      }
+      return createVNode(type, propsOrChildren, children);
+    }
+  } finally {
+    setBlockTracking(1);
+  }
+}
+
 const version = "3.5.30";
 
 /**
@@ -7044,10 +7108,10 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2 /* CLASS */))
 }
 
-script$c.render = render$c;
-script$c.__file = "src/editors/StringEditor.vue";
+script$d.render = render$c;
+script$d.__file = "src/editors/StringEditor.vue";
 
-var script$b = {
+var script$c = {
   name: 'NumberEditor',
   props: {
     schema: { type: Object, required: true },
@@ -7120,10 +7184,10 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2 /* CLASS */))
 }
 
-script$b.render = render$b;
-script$b.__file = "src/editors/NumberEditor.vue";
+script$c.render = render$b;
+script$c.__file = "src/editors/NumberEditor.vue";
 
-var script$a = {
+var script$b = {
   name: 'BooleanEditor',
   props: {
     schema: { type: Object, required: true },
@@ -7179,10 +7243,10 @@ function render$a(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2 /* CLASS */))
 }
 
-script$a.render = render$a;
-script$a.__file = "src/editors/BooleanEditor.vue";
+script$b.render = render$a;
+script$b.__file = "src/editors/BooleanEditor.vue";
 
-var script$9 = {
+var script$a = {
   name: 'SelectEditor',
   props: {
     schema: { type: Object, required: true },
@@ -7251,10 +7315,10 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2 /* CLASS */))
 }
 
-script$9.render = render$9;
-script$9.__file = "src/editors/SelectEditor.vue";
+script$a.render = render$9;
+script$a.__file = "src/editors/SelectEditor.vue";
 
-var script$8 = {
+var script$9 = {
   name: 'HiddenEditor',
   props: {
     schema: { type: Object, required: true },
@@ -7288,10 +7352,10 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", _hoisted_1$7))
 }
 
-script$8.render = render$8;
-script$8.__file = "src/editors/HiddenEditor.vue";
+script$9.render = render$8;
+script$9.__file = "src/editors/HiddenEditor.vue";
 
-var script$7 = {
+var script$8 = {
   name: 'SfIcon',
   props: {
     name: { type: String, required: true },
@@ -7383,15 +7447,264 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   ], 8 /* PROPS */, _hoisted_1$6))
 }
 
-script$7.render = render$7;
-script$7.__file = "src/editors/SfIcon.vue";
+script$8.render = render$7;
+script$8.__file = "src/editors/SfIcon.vue";
+
+// JSON Schema conditional evaluation for form rendering.
+//
+// Supports the standard keywords: `if`/`then`/`else`, `allOf` of those,
+// `dependentSchemas`, and `dependentRequired`. The matcher implements the
+// subset of JSON Schema validation that is meaningful for form-time
+// conditionals on object properties:
+//
+//   - `properties: { field: { const, enum, type, not } }`
+//   - `required: [...]` (treated as "key is present and not null/undefined")
+//   - `not`, `allOf`, `anyOf`, `oneOf` (recursive)
+//
+// The functions are pure: they take a schema + value and return an
+// "effective schema" with `properties`/`required` merged from any matching
+// branches. The renderer uses that effective schema instead of the raw one.
+
+function isPresent(value, key) {
+  if (value == null || typeof value !== 'object') return false;
+  if (!(key in value)) return false;
+  const v = value[key];
+  return v !== undefined && v !== null && v !== '';
+}
+
+function matchesPropertyConstraint(value, constraint) {
+  if (!constraint || typeof constraint !== 'object') return true;
+  if ('const' in constraint) return value === constraint.const;
+  if (Array.isArray(constraint.enum)) return constraint.enum.includes(value);
+  if (constraint.type) {
+    const t = constraint.type;
+    if (t === 'string' && typeof value !== 'string') return false;
+    if (t === 'number' && typeof value !== 'number') return false;
+    if (t === 'integer' && (typeof value !== 'number' || !Number.isInteger(value))) return false;
+    if (t === 'boolean' && typeof value !== 'boolean') return false;
+    if (t === 'null' && value !== null) return false;
+    if (t === 'array' && !Array.isArray(value)) return false;
+    if (t === 'object' && (value == null || typeof value !== 'object' || Array.isArray(value))) return false;
+  }
+  // Numeric comparators
+  if (typeof value === 'number') {
+    if (typeof constraint.minimum === 'number' && value < constraint.minimum) return false;
+    if (typeof constraint.maximum === 'number' && value > constraint.maximum) return false;
+    if (typeof constraint.exclusiveMinimum === 'number' && value <= constraint.exclusiveMinimum) return false;
+    if (typeof constraint.exclusiveMaximum === 'number' && value >= constraint.exclusiveMaximum) return false;
+    if (typeof constraint.multipleOf === 'number' && constraint.multipleOf > 0) {
+      const q = value / constraint.multipleOf;
+      if (Math.abs(q - Math.round(q)) > 1e-9) return false;
+    }
+  }
+  // String comparators
+  if (typeof value === 'string') {
+    if (typeof constraint.minLength === 'number' && value.length < constraint.minLength) return false;
+    if (typeof constraint.maxLength === 'number' && value.length > constraint.maxLength) return false;
+    if (typeof constraint.pattern === 'string') {
+      try {
+        if (!new RegExp(constraint.pattern).test(value)) return false;
+      } catch (e) {
+        // Invalid pattern — treat as non-match rather than throwing in render path.
+        return false;
+      }
+    }
+  }
+  if (constraint.not) return !matchesSchema(value, constraint.not);
+  return true;
+}
 
-var script$6 = {
+// Returns true if `value` (an object) satisfies the form-relevant subset of `schema`.
+function matchesSchema(value, schema) {
+  if (!schema || typeof schema !== 'object') return true;
+
+  if (Array.isArray(schema.required)) {
+    for (const k of schema.required) {
+      if (!isPresent(value, k)) return false;
+    }
+  }
+
+  if (schema.properties && typeof schema.properties === 'object') {
+    for (const [k, constraint] of Object.entries(schema.properties)) {
+      // Standard JSON Schema: property constraints only apply if the key is present.
+      if (value == null || !(k in value)) continue;
+      if (!matchesPropertyConstraint(value[k], constraint)) return false;
+    }
+  }
+
+  if (schema.not && matchesSchema(value, schema.not)) return false;
+  if (Array.isArray(schema.allOf) && !schema.allOf.every((s) => matchesSchema(value, s))) return false;
+  if (Array.isArray(schema.anyOf) && !schema.anyOf.some((s) => matchesSchema(value, s))) return false;
+  if (Array.isArray(schema.oneOf)) {
+    const matched = schema.oneOf.filter((s) => matchesSchema(value, s)).length;
+    if (matched !== 1) return false;
+  }
+
+  return true;
+}
+
+function insertAfter(properties, anchorKey, newEntries) {
+  // Rebuild the property map so newly-added keys appear immediately after
+  // their controlling field instead of being appended to the end.
+  const existingKeys = Object.keys(properties);
+  const anchorIdx = anchorKey ? existingKeys.indexOf(anchorKey) : -1;
+  if (anchorIdx === -1) {
+    const out = { ...properties };
+    for (const [k, v] of newEntries) out[k] = v;
+    return out;
+  }
+  const out = {};
+  for (let i = 0; i < existingKeys.length; i++) {
+    const key = existingKeys[i];
+    out[key] = properties[key];
+    if (i === anchorIdx) {
+      for (const [k, v] of newEntries) {
+        if (!(k in properties)) out[k] = v;
+      }
+    }
+  }
+  // Any new keys that already existed in properties have been kept in place;
+  // overwrite their values with the merged versions.
+  for (const [k, v] of newEntries) {
+    if (k in properties) out[k] = v;
+  }
+  return out;
+}
+
+function mergeBranch(target, branch, anchorKey) {
+  if (!branch || typeof branch !== 'object') return target;
+
+  if (branch.properties) {
+    const merged = [];
+    for (const [k, v] of Object.entries(branch.properties)) {
+      const existing = target.properties && target.properties[k];
+      merged.push([k, existing ? { ...existing, ...v } : v]);
+    }
+    target.properties = insertAfter(target.properties || {}, anchorKey, merged);
+  }
+
+  if (Array.isArray(branch.required)) {
+    const set = new Set(target.required || []);
+    for (const k of branch.required) set.add(k);
+    target.required = Array.from(set);
+  }
+
+  // Conditionals can also nest more conditionals — flatten them.
+  if (branch.allOf) {
+    target.allOf = [...(target.allOf || []), ...branch.allOf];
+  }
+  if (branch.if) {
+    target.allOf = [...(target.allOf || []), { if: branch.if, then: branch.then, else: branch.else }];
+  }
+  if (branch.dependentSchemas) {
+    target.dependentSchemas = { ...(target.dependentSchemas || {}), ...branch.dependentSchemas };
+  }
+  if (branch.dependentRequired) {
+    target.dependentRequired = { ...(target.dependentRequired || {}), ...branch.dependentRequired };
+  }
+
+  return target;
+}
+
+// Returns an effective schema for an object schema given the current value.
+// Resolves `if/then/else`, `allOf` of those, `dependentSchemas`, and
+// `dependentRequired`. Idempotent and safe to call on every render.
+//
+// `resolver` (optional) is called on each `then`/`else`/`dependentSchemas`
+// branch before merging, so `$ref` inside conditional branches is followed.
+// Pass `form.resolveSchema` from the renderer.
+function applyConditionals(schema, value, resolver) {
+  const resolve = typeof resolver === 'function' ? resolver : (s) => s;
+  if (!schema || typeof schema !== 'object') return schema;
+  if (schema.type !== 'object' && !schema.properties) return schema;
+
+  // Start with a shallow clone of the parts we may mutate.
+  let effective = {
+    ...schema,
+    properties: { ...(schema.properties || {}) },
+    required: Array.isArray(schema.required) ? [...schema.required] : [],
+  };
+
+  const safeValue = value && typeof value === 'object' ? value : {};
+
+  // Pick the controlling field of an `if` clause so newly-added properties
+  // can be inserted right after it in render order.
+  const anchorOf = (ifClause) => {
+    if (!ifClause || typeof ifClause !== 'object') return null;
+    const props = ifClause.properties && Object.keys(ifClause.properties);
+    if (props && props.length) return props[0];
+    if (Array.isArray(ifClause.required) && ifClause.required.length) return ifClause.required[0];
+    return null;
+  };
+
+  // Collect rules: top-level if/then/else + every entry in allOf that has one.
+  const rules = [];
+  if (effective.if) {
+    rules.push({ if: effective.if, then: effective.then, else: effective.else, anchor: anchorOf(effective.if) });
+  }
+  if (Array.isArray(effective.allOf)) {
+    for (const entry of effective.allOf) {
+      if (entry && typeof entry === 'object' && entry.if) {
+        rules.push({ if: entry.if, then: entry.then, else: entry.else, anchor: anchorOf(entry.if) });
+      } else if (entry && typeof entry === 'object' && (entry.properties || entry.required)) {
+        // Plain allOf branch (e.g. shared base) — always merge.
+        mergeBranch(effective, entry);
+      }
+    }
+  }
+
+  // Iterate to a fixed point so newly-merged rules can themselves trigger further rules.
+  // Capped to avoid pathological loops.
+  for (let i = 0; i < 8; i++) {
+    let changed = false;
+    const before = JSON.stringify({ p: effective.properties, r: effective.required });
+
+    for (const rule of rules) {
+      const matched = matchesSchema(safeValue, rule.if);
+      const branch = matched ? rule.then : rule.else;
+      if (branch) mergeBranch(effective, resolve(branch), rule.anchor);
+    }
+
+    if (effective.dependentSchemas) {
+      for (const [key, branch] of Object.entries(effective.dependentSchemas)) {
+        if (isPresent(safeValue, key)) mergeBranch(effective, resolve(branch), key);
+      }
+    }
+
+    if (effective.dependentRequired) {
+      for (const [key, requiredKeys] of Object.entries(effective.dependentRequired)) {
+        if (isPresent(safeValue, key) && Array.isArray(requiredKeys)) {
+          const set = new Set(effective.required || []);
+          for (const k of requiredKeys) set.add(k);
+          effective.required = Array.from(set);
+        }
+      }
+    }
+
+    const after = JSON.stringify({ p: effective.properties, r: effective.required });
+    if (after !== before) changed = true;
+    if (!changed) break;
+  }
+
+  return effective;
+}
+
+// Returns true if the schema declares any form-relevant conditional logic.
+function hasConditionals(schema) {
+  if (!schema || typeof schema !== 'object') return false;
+  if (schema.if || schema.dependentSchemas || schema.dependentRequired) return true;
+  if (Array.isArray(schema.allOf)) {
+    return schema.allOf.some((e) => e && typeof e === 'object' && (e.if || e.dependentSchemas));
+  }
+  return false;
+}
+
+var script$7 = {
   name: 'ObjectEditor',
   beforeCreate() {
     if (!this.$options.components) this.$options.components = {};
     this.$options.components.SchemaEditor = script$1;
-    this.$options.components.SfIcon = script$7;
+    this.$options.components.SfIcon = script$8;
   },
   props: {
     schema: { type: Object, required: true },
@@ -7412,10 +7725,14 @@ var script$6 = {
     title() {
       return this.schema.title || this.humanize(this.path[this.path.length - 1]) || '';
     },
+    effectiveSchema() {
+      if (!hasConditionals(this.schema)) return this.schema;
+      return applyConditionals(this.schema, this.modelValue || {}, this.form?.resolveSchema);
+    },
     summary() {
       const val = this.modelValue || {};
       const parts = [];
-      for (const key of Object.keys(this.schema.properties || {})) {
+      for (const key of Object.keys(this.effectiveSchema.properties || {})) {
         if (parts.length >= 3) break;
         const v = val[key];
         if (v !== null && v !== undefined && v !== '' && typeof v !== 'object') {
@@ -7438,7 +7755,22 @@ var script$6 = {
     },
     onChildChange(key, value) {
       const newVal = { ...(this.modelValue || {}), [key]: value };
-      this.$emit('update:modelValue', newVal);
+      this.$emit('update:modelValue', this.pruneInactive(newVal));
+    },
+    pruneInactive(value) {
+      if (!hasConditionals(this.schema)) return value;
+      const effective = applyConditionals(this.schema, value, this.form?.resolveSchema);
+      const allowed = new Set(Object.keys(effective.properties || {}));
+      let changed = false;
+      const out = {};
+      for (const k of Object.keys(value)) {
+        if (allowed.has(k)) {
+          out[k] = value[k];
+        } else {
+          changed = true;
+        }
+      }
+      return changed ? out : value;
     },
   },
 };
@@ -7464,7 +7796,7 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   return ($options.isRoot)
     ? (openBlock(), createElementBlock("div", _hoisted_1$5, [
         createBaseVNode("div", _hoisted_2$4, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(($props.schema.properties || {}), (propSchema, key) => {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(($options.effectiveSchema.properties || {}), (propSchema, key) => {
             return (openBlock(), createBlock(_component_SchemaEditor, {
               key: key,
               schema: $props.form.resolveSchema(propSchema),
@@ -7498,7 +7830,7 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
             : createCommentVNode("v-if", true)
         ]),
         withDirectives(createBaseVNode("div", _hoisted_7$2, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(($props.schema.properties || {}), (propSchema, key) => {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(($options.effectiveSchema.properties || {}), (propSchema, key) => {
             return (openBlock(), createBlock(_component_SchemaEditor, {
               key: key,
               schema: $props.form.resolveSchema(propSchema),
@@ -7514,8 +7846,8 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
       ], 2 /* CLASS */))
 }
 
-script$6.render = render$6;
-script$6.__file = "src/editors/ObjectEditor.vue";
+script$7.render = render$6;
+script$7.__file = "src/editors/ObjectEditor.vue";
 
 function debounce(fn, delay) {
   let timer;
@@ -7558,12 +7890,12 @@ function getDefaultForSchema(schema) {
 
 let keyCounter = 0;
 
-var script$5 = {
+var script$6 = {
   name: 'ArrayEditor',
   beforeCreate() {
     if (!this.$options.components) this.$options.components = {};
     this.$options.components.SchemaEditor = script$1;
-    this.$options.components.SfIcon = script$7;
+    this.$options.components.SfIcon = script$8;
   },
   props: {
     schema: { type: Object, required: true },
@@ -7747,13 +8079,16 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
                     createVNode(_component_SfIcon, { name: "arrow-up" })
                   ], 8 /* PROPS */, _hoisted_12))
                 : createCommentVNode("v-if", true),
-              createBaseVNode("button", {
-                type: "button",
-                class: "sf-btn sf-btn-sm",
-                onClick: $event => ($options.moveItem(index, 1))
-              }, [
-                createVNode(_component_SfIcon, { name: "arrow-down" })
-              ], 8 /* PROPS */, _hoisted_13),
+              (index < $data.items.length - 1)
+                ? (openBlock(), createElementBlock("button", {
+                    key: 1,
+                    type: "button",
+                    class: "sf-btn sf-btn-sm",
+                    onClick: $event => ($options.moveItem(index, 1))
+                  }, [
+                    createVNode(_component_SfIcon, { name: "arrow-down" })
+                  ], 8 /* PROPS */, _hoisted_13))
+                : createCommentVNode("v-if", true),
               createBaseVNode("button", {
                 type: "button",
                 class: "sf-btn sf-btn-sm sf-btn-danger",
@@ -7791,15 +8126,15 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2 /* CLASS */))
 }
 
-script$5.render = render$5;
-script$5.__file = "src/editors/ArrayEditor.vue";
+script$6.render = render$5;
+script$6.__file = "src/editors/ArrayEditor.vue";
 
-var script$4 = {
+var script$5 = {
   name: 'NullableEditor',
   beforeCreate() {
     if (!this.$options.components) this.$options.components = {};
     this.$options.components.SchemaEditor = script$1;
-    this.$options.components.SfIcon = script$7;
+    this.$options.components.SfIcon = script$8;
   },
   props: {
     schema: { type: Object, required: true },
@@ -7915,10 +8250,10 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2 /* CLASS */))
 }
 
-script$4.render = render$4;
-script$4.__file = "src/editors/NullableEditor.vue";
+script$5.render = render$4;
+script$5.__file = "src/editors/NullableEditor.vue";
 
-var script$3 = {
+var script$4 = {
   name: 'UnionEditor',
   beforeCreate() {
     if (!this.$options.components) this.$options.components = {};
@@ -8018,12 +8353,12 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-script$3.render = render$3;
-script$3.__file = "src/editors/UnionEditor.vue";
+script$4.render = render$3;
+script$4.__file = "src/editors/UnionEditor.vue";
 
-var script$2 = {
+var script$3 = {
   name: 'RelationEditor',
-  components: { SfIcon: script$7 },
+  components: { SfIcon: script$8 },
   props: {
     schema: { type: Object, required: true },
     modelValue: { default: null },
@@ -8291,24 +8626,82 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2 /* CLASS */))
 }
 
-script$2.render = render$2;
-script$2.__file = "src/editors/RelationEditor.vue";
+script$3.render = render$2;
+script$3.__file = "src/editors/RelationEditor.vue";
+
+var script$2 = {
+  name: 'WebComponentWrapper',
+  props: {
+    tagName: { type: String, required: true },
+    schema: { type: Object, required: true },
+    modelValue: { default: undefined },
+    path: { type: Array, default: () => [] },
+    form: { type: Object, required: true },
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const elRef = ref(null);
+
+    function syncProps() {
+      const el = elRef.value;
+      if (!el) return;
+      el.schema = props.schema;
+      el.modelValue = props.modelValue;
+      el.path = props.path;
+      el.form = props.form;
+    }
+
+    function handleChange(e) {
+      const value = e.detail != null
+        ? (Array.isArray(e.detail) ? e.detail[0] : e.detail)
+        : undefined;
+      emit('update:modelValue', value);
+    }
+
+    onMounted(() => {
+      syncProps();
+      const el = elRef.value;
+      if (el) {
+        el.addEventListener('update:model-value', handleChange);
+        el.addEventListener('change', handleChange);
+      }
+    });
+
+    onBeforeUnmount(() => {
+      const el = elRef.value;
+      if (el) {
+        el.removeEventListener('update:model-value', handleChange);
+        el.removeEventListener('change', handleChange);
+      }
+    });
+
+    watch(() => [props.schema, props.modelValue, props.path, props.form], syncProps, { deep: true });
+
+    return () => h(props.tagName, { ref: elRef });
+  },
+};
+
+script$2.__file = "src/editors/WebComponentWrapper.vue";
 
 const MAX_DEPTH = 12;
 
 var script$1 = {
   name: 'SchemaEditor',
   components: {
-    StringEditor: script$c,
-    NumberEditor: script$b,
-    BooleanEditor: script$a,
-    SelectEditor: script$9,
-    HiddenEditor: script$8,
-    ObjectEditor: script$6,
-    ArrayEditor: script$5,
-    NullableEditor: script$4,
-    UnionEditor: script$3,
-    RelationEditor: script$2,
+    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,
+    WebComponentWrapper: script$2,
+  },
+  inject: {
+    customEditors: { default: () => () => [] },
   },
   props: {
     schema: { type: Object, required: true },
@@ -8330,11 +8723,20 @@ var script$1 = {
     },
   },
   computed: {
+    isWebComponent() {
+      const c = this.editorComponent;
+      return typeof c === 'string' && c.includes('-');
+    },
     editorComponent() {
       const schema = this.schema;
 
       if (this.path.length > MAX_DEPTH) return 'StringEditor';
 
+      const overrides = this.customEditors();
+      for (const override of overrides) {
+        if (override.match(schema, this.path)) return override.component;
+      }
+
       if (schema.type === 'relation') return 'RelationEditor';
       if (schema.oneOf && schema.discriminator) return 'UnionEditor';
       if ('const' in schema) return 'HiddenEditor';
@@ -8352,14 +8754,28 @@ var script$1 = {
 };
 
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createBlock(resolveDynamicComponent($options.editorComponent), {
-    ref: "editor",
-    schema: $props.schema,
-    "model-value": $props.modelValue,
-    path: $props.path,
-    form: $props.form,
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (_ctx.$emit('update:modelValue', $event)))
-  }, null, 8 /* PROPS */, ["schema", "model-value", "path", "form"]))
+  const _component_WebComponentWrapper = resolveComponent("WebComponentWrapper");
+
+  return ($options.isWebComponent)
+    ? (openBlock(), createBlock(_component_WebComponentWrapper, {
+        key: 0,
+        ref: "editor",
+        "tag-name": $options.editorComponent,
+        schema: $props.schema,
+        "model-value": $props.modelValue,
+        path: $props.path,
+        form: $props.form,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (_ctx.$emit('update:modelValue', $event)))
+      }, null, 8 /* PROPS */, ["tag-name", "schema", "model-value", "path", "form"]))
+    : (openBlock(), createBlock(resolveDynamicComponent($options.editorComponent), {
+        key: 1,
+        ref: "editor",
+        schema: $props.schema,
+        "model-value": $props.modelValue,
+        path: $props.path,
+        form: $props.form,
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (_ctx.$emit('update:modelValue', $event)))
+      }, null, 8 /* PROPS */, ["schema", "model-value", "path", "form"]))
 }
 
 script$1.render = render$1;
@@ -8372,9 +8788,15 @@ var script = {
     schema: { type: [Object, String], default: () => ({}) },
     initialData: { default: undefined },
     errors: { type: Object, default: () => ({}) },
+    customEditors: { type: Array, default: () => [] },
   },
   emits: ['change'],
   expose: ['getValue'],
+  provide() {
+    return {
+      customEditors: () => this.customEditors,
+    };
+  },
   data() {
     const parsedSchema = typeof this.schema === 'string' ? JSON.parse(this.schema) : this.schema;
     const defs = parsedSchema.$defs || parsedSchema.definitions || {};
@@ -8392,6 +8814,7 @@ var script = {
       return {
         resolveSchema: (s) => this.resolveSchema(s),
         getSchemaAtPath: (p) => this.getSchemaAtPath(p),
+        getEffectiveSchemaAtPath: (p) => this.getEffectiveSchemaAtPath(p),
         getErrorsForPath: (p) => this.getErrorsForPath(p),
       };
     },
@@ -8474,6 +8897,28 @@ var script = {
       return schema;
     },
 
+    getEffectiveSchemaAtPath(path) {
+      let schema = this.resolveSchema(this.rootSchema);
+      let value = this.currentValue;
+      for (const segment of path) {
+        if (!schema) return null;
+        if (schema.properties || schema.if || schema.allOf || schema.dependentSchemas) {
+          if (hasConditionals(schema)) schema = applyConditionals(schema, value || {}, (s) => this.resolveSchema(s));
+        }
+        if (schema.properties && schema.properties[segment] !== undefined) {
+          schema = this.resolveSchema(schema.properties[segment]);
+          value = value != null ? value[segment] : undefined;
+        } else if (schema.items) {
+          schema = this.resolveSchema(schema.items);
+          value = Array.isArray(value) ? value[segment] : undefined;
+        } else {
+          return null;
+        }
+      }
+      if (schema && hasConditionals(schema)) schema = applyConditionals(schema, value || {});
+      return schema;
+    },
+
     onValueChange(val) {
       this.currentValue = val;
       this.$emit('change', val);
@@ -8513,6 +8958,115 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 script.render = render;
 script.__file = "src/SchemaForm.vue";
 
+/**
+ * Base class for creating web component custom editors.
+ *
+ * Handles the property contract with the structured-widget-editor wrapper:
+ * - Receives `schema`, `modelValue`, `path`, and `form` as JS properties.
+ * - Provides `emitChange(value)` to dispatch the value back to the form.
+ * - Provides `getErrors()` to retrieve validation errors for this field.
+ * - Calls `render()` once on `connectedCallback` and `update()` on property changes.
+ *
+ * @example
+ *   import { BaseEditorElement } from '@structured-field/widget-editor';
+ *
+ *   class MyColorPicker extends BaseEditorElement {
+ *     render() {
+ *       const input = document.createElement('input');
+ *       input.type = 'color';
+ *       input.value = this.modelValue || '#000000';
+ *       input.addEventListener('input', () => this.emitChange(input.value));
+ *       this._input = input;
+ *       this.appendChild(input);
+ *     }
+ *
+ *     update() {
+ *       if (this._input) this._input.value = this.modelValue || '#000000';
+ *     }
+ *   }
+ *
+ *   customElements.define('my-color-picker', MyColorPicker);
+ */
+class BaseEditorElement extends HTMLElement {
+  constructor() {
+    super();
+    this._schema = {};
+    this._modelValue = undefined;
+    this._path = [];
+    this._form = null;
+    this._connected = false;
+  }
+
+  /* ── Property contract ─────────────────────────────────────────────── */
+
+  get schema() { return this._schema; }
+  set schema(v) {
+    this._schema = v;
+    if (this._connected) this.update();
+  }
+
+  get modelValue() { return this._modelValue; }
+  set modelValue(v) {
+    this._modelValue = v;
+    if (this._connected) this.update();
+  }
+
+  get path() { return this._path; }
+  set path(v) {
+    this._path = v;
+    if (this._connected) this.update();
+  }
+
+  get form() { return this._form; }
+  set form(v) {
+    this._form = v;
+    if (this._connected) this.update();
+  }
+
+  /* ── Lifecycle ─────────────────────────────────────────────────────── */
+
+  connectedCallback() {
+    this._connected = true;
+    this.render();
+  }
+
+  disconnectedCallback() {
+    this._connected = false;
+  }
+
+  /* ── Helpers ───────────────────────────────────────────────────────── */
+
+  /**
+   * Dispatch the new value back to the form.
+   * @param {*} value - The new field value.
+   */
+  emitChange(value) {
+    this.dispatchEvent(new CustomEvent('change', { detail: value }));
+  }
+
+  /**
+   * Returns the current validation errors for this field.
+   * @returns {string[]}
+   */
+  getErrors() {
+    return this._form?.getErrorsForPath?.(this._path) ?? [];
+  }
+
+  /* ── Override points ───────────────────────────────────────────────── */
+
+  /**
+   * Called once when the element is connected to the DOM.
+   * Build the initial DOM structure here.
+   */
+  render() {}
+
+  /**
+   * Called whenever a property (schema, modelValue, path, form) changes
+   * after the initial render. Update the DOM here.
+   */
+  update() {}
+}
+
 const SchemaFormElement = defineCustomElement({
   ...script,
   shadowRoot: false,
@@ -8524,5 +9078,5 @@ function registerCustomElement(tagName = 'schema-form') {
   }
 }
 
-export { script$5 as ArrayEditor, script$a as BooleanEditor, script$8 as HiddenEditor, script$4 as NullableEditor, script$b as NumberEditor, script$6 as ObjectEditor, script$2 as RelationEditor, script$1 as SchemaEditor, script as SchemaForm, SchemaFormElement, script$9 as SelectEditor, script$c as StringEditor, script$3 as UnionEditor, registerCustomElement };
+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 };
 //# sourceMappingURL=structured-widget-editor.esm.js.map