@structured-field/widget-editor 1.0.1 → 1.1.0

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

@@ -1,4 +1,4 @@
-var script$b = {
+var script$c = {
   name: 'StringEditor',
   props: {
     schema: { type: Object, required: true },
@@ -129,6 +129,10 @@ const looseToNumber = (val) => {
   const n = parseFloat(val);
   return isNaN(n) ? val : n;
 };
+const toNumber = (val) => {
+  const n = isString(val) ? Number(val) : NaN;
+  return isNaN(n) ? val : n;
+};
 let _globalThis;
 const getGlobalThis = () => {
   return _globalThis || (_globalThis = typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : {});
@@ -1579,44 +1583,6 @@ 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;
 }
@@ -2566,191 +2532,11 @@ function invalidatePendingSetRef(rawRef) {
     pendingSetRefMap.delete(rawRef);
   }
 }
-const isComment = (node) => node.nodeType === 8;
 
 getGlobalThis().requestIdleCallback || ((cb) => setTimeout(cb, 1));
 getGlobalThis().cancelIdleCallback || ((id) => clearTimeout(id));
-function forEachElement(node, cb) {
-  if (isComment(node) && node.data === "[") {
-    let depth = 1;
-    let next = node.nextSibling;
-    while (next) {
-      if (next.nodeType === 1) {
-        const result = cb(next);
-        if (result === false) {
-          break;
-        }
-      } else if (isComment(next)) {
-        if (next.data === "]") {
-          if (--depth === 0) break;
-        } else if (next.data === "[") {
-          depth++;
-        }
-      }
-      next = next.nextSibling;
-    }
-  } else {
-    cb(node);
-  }
-}
 
 const isAsyncWrapper = (i) => !!i.type.__asyncLoader;
-// @__NO_SIDE_EFFECTS__
-function defineAsyncComponent(source) {
-  if (isFunction(source)) {
-    source = { loader: source };
-  }
-  const {
-    loader,
-    loadingComponent,
-    errorComponent,
-    delay = 200,
-    hydrate: hydrateStrategy,
-    timeout,
-    // undefined = never times out
-    suspensible = true,
-    onError: userOnError
-  } = source;
-  let pendingRequest = null;
-  let resolvedComp;
-  let retries = 0;
-  const retry = () => {
-    retries++;
-    pendingRequest = null;
-    return load();
-  };
-  const load = () => {
-    let thisRequest;
-    return pendingRequest || (thisRequest = pendingRequest = loader().catch((err) => {
-      err = err instanceof Error ? err : new Error(String(err));
-      if (userOnError) {
-        return new Promise((resolve, reject) => {
-          const userRetry = () => resolve(retry());
-          const userFail = () => reject(err);
-          userOnError(err, userRetry, userFail, retries + 1);
-        });
-      } else {
-        throw err;
-      }
-    }).then((comp) => {
-      if (thisRequest !== pendingRequest && pendingRequest) {
-        return pendingRequest;
-      }
-      if (comp && (comp.__esModule || comp[Symbol.toStringTag] === "Module")) {
-        comp = comp.default;
-      }
-      resolvedComp = comp;
-      return comp;
-    }));
-  };
-  return defineComponent({
-    name: "AsyncComponentWrapper",
-    __asyncLoader: load,
-    __asyncHydrate(el, instance, hydrate) {
-      let patched = false;
-      (instance.bu || (instance.bu = [])).push(() => patched = true);
-      const performHydrate = () => {
-        if (patched) {
-          return;
-        }
-        hydrate();
-      };
-      const doHydrate = hydrateStrategy ? () => {
-        const teardown = hydrateStrategy(
-          performHydrate,
-          (cb) => forEachElement(el, cb)
-        );
-        if (teardown) {
-          (instance.bum || (instance.bum = [])).push(teardown);
-        }
-      } : performHydrate;
-      if (resolvedComp) {
-        doHydrate();
-      } else {
-        load().then(() => !instance.isUnmounted && doHydrate());
-      }
-    },
-    get __asyncResolved() {
-      return resolvedComp;
-    },
-    setup() {
-      const instance = currentInstance;
-      markAsyncBoundary(instance);
-      if (resolvedComp) {
-        return () => createInnerComp(resolvedComp, instance);
-      }
-      const onError = (err) => {
-        pendingRequest = null;
-        handleError(
-          err,
-          instance,
-          13,
-          !errorComponent
-        );
-      };
-      if (suspensible && instance.suspense || isInSSRComponentSetup) {
-        return load().then((comp) => {
-          return () => createInnerComp(comp, instance);
-        }).catch((err) => {
-          onError(err);
-          return () => errorComponent ? createVNode(errorComponent, {
-            error: err
-          }) : null;
-        });
-      }
-      const loaded = ref(false);
-      const error = ref();
-      const delayed = ref(!!delay);
-      if (delay) {
-        setTimeout(() => {
-          delayed.value = false;
-        }, delay);
-      }
-      if (timeout != null) {
-        setTimeout(() => {
-          if (!loaded.value && !error.value) {
-            const err = new Error(
-              `Async component timed out after ${timeout}ms.`
-            );
-            onError(err);
-            error.value = err;
-          }
-        }, timeout);
-      }
-      load().then(() => {
-        loaded.value = true;
-        if (instance.parent && isKeepAlive(instance.parent.vnode)) {
-          instance.parent.update();
-        }
-      }).catch((err) => {
-        onError(err);
-        error.value = err;
-      });
-      return () => {
-        if (loaded.value && resolvedComp) {
-          return createInnerComp(resolvedComp, instance);
-        } else if (error.value && errorComponent) {
-          return createVNode(errorComponent, {
-            error: error.value
-          });
-        } else if (loadingComponent && !delayed.value) {
-          return createInnerComp(
-            loadingComponent,
-            instance
-          );
-        }
-      };
-    }
-  });
-}
-function createInnerComp(comp, parent) {
-  const { ref: ref2, props, children, ce } = parent.vnode;
-  const vnode = createVNode(comp, props, children);
-  vnode.ref = ref2;
-  vnode.ce = ce;
-  delete parent.vnode.ce;
-  return vnode;
-}
 
 const isKeepAlive = (vnode) => vnode.type.__isKeepAlive;
 function onActivated(hook, target) {
@@ -5800,6 +5586,11 @@ function cloneVNode(vnode, extraProps, mergeRef = false, cloneTransition = false
 function createTextVNode(text = " ", flag = 0) {
   return createVNode(Text, null, text, flag);
 }
+function createStaticVNode(content, numberOfNodes) {
+  const vnode = createVNode(Static, null, content);
+  vnode.staticCount = numberOfNodes;
+  return vnode;
+}
 function createCommentVNode(text = "", asBlock = false) {
   return asBlock ? (openBlock(), createBlock(Comment, null, text)) : createVNode(Comment, null, text);
 }
@@ -6183,32 +5974,6 @@ 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";
 
 /**
@@ -6671,6 +6436,437 @@ function shouldSetAsPropForVueCE(el, key) {
   return Array.isArray(props) ? props.some((prop) => camelize(prop) === camelKey) : Object.keys(props).some((prop) => camelize(prop) === camelKey);
 }
 
+const REMOVAL = {};
+// @__NO_SIDE_EFFECTS__
+function defineCustomElement(options, extraOptions, _createApp) {
+  let Comp = defineComponent(options, extraOptions);
+  if (isPlainObject(Comp)) Comp = extend({}, Comp, extraOptions);
+  class VueCustomElement extends VueElement {
+    constructor(initialProps) {
+      super(Comp, initialProps, _createApp);
+    }
+  }
+  VueCustomElement.def = Comp;
+  return VueCustomElement;
+}
+const BaseClass = typeof HTMLElement !== "undefined" ? HTMLElement : class {
+};
+class VueElement extends BaseClass {
+  constructor(_def, _props = {}, _createApp = createApp) {
+    super();
+    this._def = _def;
+    this._props = _props;
+    this._createApp = _createApp;
+    this._isVueCE = true;
+    /**
+     * @internal
+     */
+    this._instance = null;
+    /**
+     * @internal
+     */
+    this._app = null;
+    /**
+     * @internal
+     */
+    this._nonce = this._def.nonce;
+    this._connected = false;
+    this._resolved = false;
+    this._patching = false;
+    this._dirty = false;
+    this._numberProps = null;
+    this._styleChildren = /* @__PURE__ */ new WeakSet();
+    this._styleAnchors = /* @__PURE__ */ new WeakMap();
+    this._ob = null;
+    if (this.shadowRoot && _createApp !== createApp) {
+      this._root = this.shadowRoot;
+    } else {
+      if (_def.shadowRoot !== false) {
+        this.attachShadow(
+          extend({}, _def.shadowRootOptions, {
+            mode: "open"
+          })
+        );
+        this._root = this.shadowRoot;
+      } else {
+        this._root = this;
+      }
+    }
+  }
+  connectedCallback() {
+    if (!this.isConnected) return;
+    if (!this.shadowRoot && !this._resolved) {
+      this._parseSlots();
+    }
+    this._connected = true;
+    let parent = this;
+    while (parent = parent && // #12479 should check assignedSlot first to get correct parent
+    (parent.assignedSlot || parent.parentNode || parent.host)) {
+      if (parent instanceof VueElement) {
+        this._parent = parent;
+        break;
+      }
+    }
+    if (!this._instance) {
+      if (this._resolved) {
+        this._mount(this._def);
+      } else {
+        if (parent && parent._pendingResolve) {
+          this._pendingResolve = parent._pendingResolve.then(() => {
+            this._pendingResolve = void 0;
+            this._resolveDef();
+          });
+        } else {
+          this._resolveDef();
+        }
+      }
+    }
+  }
+  _setParent(parent = this._parent) {
+    if (parent) {
+      this._instance.parent = parent._instance;
+      this._inheritParentContext(parent);
+    }
+  }
+  _inheritParentContext(parent = this._parent) {
+    if (parent && this._app) {
+      Object.setPrototypeOf(
+        this._app._context.provides,
+        parent._instance.provides
+      );
+    }
+  }
+  disconnectedCallback() {
+    this._connected = false;
+    nextTick(() => {
+      if (!this._connected) {
+        if (this._ob) {
+          this._ob.disconnect();
+          this._ob = null;
+        }
+        this._app && this._app.unmount();
+        if (this._instance) this._instance.ce = void 0;
+        this._app = this._instance = null;
+        if (this._teleportTargets) {
+          this._teleportTargets.clear();
+          this._teleportTargets = void 0;
+        }
+      }
+    });
+  }
+  _processMutations(mutations) {
+    for (const m of mutations) {
+      this._setAttr(m.attributeName);
+    }
+  }
+  /**
+   * resolve inner component definition (handle possible async component)
+   */
+  _resolveDef() {
+    if (this._pendingResolve) {
+      return;
+    }
+    for (let i = 0; i < this.attributes.length; i++) {
+      this._setAttr(this.attributes[i].name);
+    }
+    this._ob = new MutationObserver(this._processMutations.bind(this));
+    this._ob.observe(this, { attributes: true });
+    const resolve = (def, isAsync = false) => {
+      this._resolved = true;
+      this._pendingResolve = void 0;
+      const { props, styles } = def;
+      let numberProps;
+      if (props && !isArray(props)) {
+        for (const key in props) {
+          const opt = props[key];
+          if (opt === Number || opt && opt.type === Number) {
+            if (key in this._props) {
+              this._props[key] = toNumber(this._props[key]);
+            }
+            (numberProps || (numberProps = /* @__PURE__ */ Object.create(null)))[camelize(key)] = true;
+          }
+        }
+      }
+      this._numberProps = numberProps;
+      this._resolveProps(def);
+      if (this.shadowRoot) {
+        this._applyStyles(styles);
+      }
+      this._mount(def);
+    };
+    const asyncDef = this._def.__asyncLoader;
+    if (asyncDef) {
+      this._pendingResolve = asyncDef().then((def) => {
+        def.configureApp = this._def.configureApp;
+        resolve(this._def = def, true);
+      });
+    } else {
+      resolve(this._def);
+    }
+  }
+  _mount(def) {
+    this._app = this._createApp(def);
+    this._inheritParentContext();
+    if (def.configureApp) {
+      def.configureApp(this._app);
+    }
+    this._app._ceVNode = this._createVNode();
+    this._app.mount(this._root);
+    const exposed = this._instance && this._instance.exposed;
+    if (!exposed) return;
+    for (const key in exposed) {
+      if (!hasOwn(this, key)) {
+        Object.defineProperty(this, key, {
+          // unwrap ref to be consistent with public instance behavior
+          get: () => unref(exposed[key])
+        });
+      }
+    }
+  }
+  _resolveProps(def) {
+    const { props } = def;
+    const declaredPropKeys = isArray(props) ? props : Object.keys(props || {});
+    for (const key of Object.keys(this)) {
+      if (key[0] !== "_" && declaredPropKeys.includes(key)) {
+        this._setProp(key, this[key]);
+      }
+    }
+    for (const key of declaredPropKeys.map(camelize)) {
+      Object.defineProperty(this, key, {
+        get() {
+          return this._getProp(key);
+        },
+        set(val) {
+          this._setProp(key, val, true, !this._patching);
+        }
+      });
+    }
+  }
+  _setAttr(key) {
+    if (key.startsWith("data-v-")) return;
+    const has = this.hasAttribute(key);
+    let value = has ? this.getAttribute(key) : REMOVAL;
+    const camelKey = camelize(key);
+    if (has && this._numberProps && this._numberProps[camelKey]) {
+      value = toNumber(value);
+    }
+    this._setProp(camelKey, value, false, true);
+  }
+  /**
+   * @internal
+   */
+  _getProp(key) {
+    return this._props[key];
+  }
+  /**
+   * @internal
+   */
+  _setProp(key, val, shouldReflect = true, shouldUpdate = false) {
+    if (val !== this._props[key]) {
+      this._dirty = true;
+      if (val === REMOVAL) {
+        delete this._props[key];
+      } else {
+        this._props[key] = val;
+        if (key === "key" && this._app) {
+          this._app._ceVNode.key = val;
+        }
+      }
+      if (shouldUpdate && this._instance) {
+        this._update();
+      }
+      if (shouldReflect) {
+        const ob = this._ob;
+        if (ob) {
+          this._processMutations(ob.takeRecords());
+          ob.disconnect();
+        }
+        if (val === true) {
+          this.setAttribute(hyphenate(key), "");
+        } else if (typeof val === "string" || typeof val === "number") {
+          this.setAttribute(hyphenate(key), val + "");
+        } else if (!val) {
+          this.removeAttribute(hyphenate(key));
+        }
+        ob && ob.observe(this, { attributes: true });
+      }
+    }
+  }
+  _update() {
+    const vnode = this._createVNode();
+    if (this._app) vnode.appContext = this._app._context;
+    render$d(vnode, this._root);
+  }
+  _createVNode() {
+    const baseProps = {};
+    if (!this.shadowRoot) {
+      baseProps.onVnodeMounted = baseProps.onVnodeUpdated = this._renderSlots.bind(this);
+    }
+    const vnode = createVNode(this._def, extend(baseProps, this._props));
+    if (!this._instance) {
+      vnode.ce = (instance) => {
+        this._instance = instance;
+        instance.ce = this;
+        instance.isCE = true;
+        const dispatch = (event, args) => {
+          this.dispatchEvent(
+            new CustomEvent(
+              event,
+              isPlainObject(args[0]) ? extend({ detail: args }, args[0]) : { detail: args }
+            )
+          );
+        };
+        instance.emit = (event, ...args) => {
+          dispatch(event, args);
+          if (hyphenate(event) !== event) {
+            dispatch(hyphenate(event), args);
+          }
+        };
+        this._setParent();
+      };
+    }
+    return vnode;
+  }
+  _applyStyles(styles, owner, parentComp) {
+    if (!styles) return;
+    if (owner) {
+      if (owner === this._def || this._styleChildren.has(owner)) {
+        return;
+      }
+      this._styleChildren.add(owner);
+    }
+    const nonce = this._nonce;
+    const root = this.shadowRoot;
+    const insertionAnchor = parentComp ? this._getStyleAnchor(parentComp) || this._getStyleAnchor(this._def) : this._getRootStyleInsertionAnchor(root);
+    let last = null;
+    for (let i = styles.length - 1; i >= 0; i--) {
+      const s = document.createElement("style");
+      if (nonce) s.setAttribute("nonce", nonce);
+      s.textContent = styles[i];
+      root.insertBefore(s, last || insertionAnchor);
+      last = s;
+      if (i === 0) {
+        if (!parentComp) this._styleAnchors.set(this._def, s);
+        if (owner) this._styleAnchors.set(owner, s);
+      }
+    }
+  }
+  _getStyleAnchor(comp) {
+    if (!comp) {
+      return null;
+    }
+    const anchor = this._styleAnchors.get(comp);
+    if (anchor && anchor.parentNode === this.shadowRoot) {
+      return anchor;
+    }
+    if (anchor) {
+      this._styleAnchors.delete(comp);
+    }
+    return null;
+  }
+  _getRootStyleInsertionAnchor(root) {
+    for (let i = 0; i < root.childNodes.length; i++) {
+      const node = root.childNodes[i];
+      if (!(node instanceof HTMLStyleElement)) {
+        return node;
+      }
+    }
+    return null;
+  }
+  /**
+   * Only called when shadowRoot is false
+   */
+  _parseSlots() {
+    const slots = this._slots = {};
+    let n;
+    while (n = this.firstChild) {
+      const slotName = n.nodeType === 1 && n.getAttribute("slot") || "default";
+      (slots[slotName] || (slots[slotName] = [])).push(n);
+      this.removeChild(n);
+    }
+  }
+  /**
+   * Only called when shadowRoot is false
+   */
+  _renderSlots() {
+    const outlets = this._getSlots();
+    const scopeId = this._instance.type.__scopeId;
+    for (let i = 0; i < outlets.length; i++) {
+      const o = outlets[i];
+      const slotName = o.getAttribute("name") || "default";
+      const content = this._slots[slotName];
+      const parent = o.parentNode;
+      if (content) {
+        for (const n of content) {
+          if (scopeId && n.nodeType === 1) {
+            const id = scopeId + "-s";
+            const walker = document.createTreeWalker(n, 1);
+            n.setAttribute(id, "");
+            let child;
+            while (child = walker.nextNode()) {
+              child.setAttribute(id, "");
+            }
+          }
+          parent.insertBefore(n, o);
+        }
+      } else {
+        while (o.firstChild) parent.insertBefore(o.firstChild, o);
+      }
+      parent.removeChild(o);
+    }
+  }
+  /**
+   * @internal
+   */
+  _getSlots() {
+    const roots = [this];
+    if (this._teleportTargets) {
+      roots.push(...this._teleportTargets);
+    }
+    const slots = /* @__PURE__ */ new Set();
+    for (const root of roots) {
+      const found = root.querySelectorAll("slot");
+      for (let i = 0; i < found.length; i++) {
+        slots.add(found[i]);
+      }
+    }
+    return Array.from(slots);
+  }
+  /**
+   * @internal
+   */
+  _injectChildStyle(comp, parentComp) {
+    this._applyStyles(comp.styles, comp, parentComp);
+  }
+  /**
+   * @internal
+   */
+  _beginPatch() {
+    this._patching = true;
+    this._dirty = false;
+  }
+  /**
+   * @internal
+   */
+  _endPatch() {
+    this._patching = false;
+    if (this._dirty && this._instance) {
+      this._update();
+    }
+  }
+  /**
+   * @internal
+   */
+  _hasShadowRoot() {
+    return this._def.shadowRoot !== false;
+  }
+  /**
+   * @internal
+   */
+  _removeChildStyle(comp) {
+  }
+}
+
 const getModelAssigner = (vnode) => {
   const fn = vnode.props["onUpdate:modelValue"] || false;
   return isArray(fn) ? (value) => invokeArrayFns(fn, value) : fn;
@@ -6766,6 +6962,9 @@ let renderer;
 function ensureRenderer() {
   return renderer || (renderer = createRenderer(rendererOptions));
 }
+const render$d = ((...args) => {
+  ensureRenderer().render(...args);
+});
 const createApp = ((...args) => {
   const app = ensureRenderer().createApp(...args);
   const { mount } = app;
@@ -6804,14 +7003,14 @@ function normalizeContainer(container) {
   return container;
 }
 
-const _hoisted_1$a = ["value", "placeholder"];
-const _hoisted_2$8 = ["value", "placeholder"];
-const _hoisted_3$7 = {
+const _hoisted_1$b = ["value", "placeholder"];
+const _hoisted_2$9 = ["value", "placeholder"];
+const _hoisted_3$8 = {
   key: 2,
   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 }])
   }, [
@@ -6826,7 +7025,7 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
           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$a))
+        }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_1$b))
       : (openBlock(), createElementBlock("input", {
           key: 1,
           type: "text",
@@ -6834,9 +7033,9 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
           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$8)),
+        }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_2$9)),
     ($options.fieldErrors.length)
-      ? (openBlock(), createElementBlock("ul", _hoisted_3$7, [
+      ? (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 */))
@@ -6845,10 +7044,10 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2 /* CLASS */))
 }
 
-script$b.render = render$b;
-script$b.__file = "src/editors/StringEditor.vue";
+script$c.render = render$c;
+script$c.__file = "src/editors/StringEditor.vue";
 
-var script$a = {
+var script$b = {
   name: 'NumberEditor',
   props: {
     schema: { type: Object, required: true },
@@ -6889,13 +7088,13 @@ var script$a = {
   },
 };
 
-const _hoisted_1$9 = ["step", "min", "max", "value"];
-const _hoisted_2$7 = {
+const _hoisted_1$a = ["step", "min", "max", "value"];
+const _hoisted_2$8 = {
   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", { errors: $options.fieldErrors.length }])
   }, [
@@ -6910,9 +7109,9 @@ function render$a(_ctx, _cache, $props, $setup, $data, $options) {
       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$9),
+    }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_1$a),
     ($options.fieldErrors.length)
-      ? (openBlock(), createElementBlock("ul", _hoisted_2$7, [
+      ? (openBlock(), createElementBlock("ul", _hoisted_2$8, [
           (openBlock(true), createElementBlock(Fragment, null, renderList($options.fieldErrors, (err, i) => {
             return (openBlock(), createElementBlock("li", { key: i }, toDisplayString(err), 1 /* TEXT */))
           }), 128 /* KEYED_FRAGMENT */))
@@ -6921,10 +7120,10 @@ function render$a(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2 /* CLASS */))
 }
 
-script$a.render = render$a;
-script$a.__file = "src/editors/NumberEditor.vue";
+script$b.render = render$b;
+script$b.__file = "src/editors/NumberEditor.vue";
 
-var script$9 = {
+var script$a = {
   name: 'BooleanEditor',
   props: {
     schema: { type: Object, required: true },
@@ -6950,28 +7149,28 @@ var script$9 = {
   },
 };
 
-const _hoisted_1$8 = { class: "sf-checkbox-label" };
-const _hoisted_2$6 = ["checked"];
-const _hoisted_3$6 = {
+const _hoisted_1$9 = { class: "sf-checkbox-label" };
+const _hoisted_2$7 = ["checked"];
+const _hoisted_3$7 = {
   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 sf-field-boolean", { errors: $options.fieldErrors.length }])
   }, [
-    createBaseVNode("label", _hoisted_1$8, [
+    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$6),
+      }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_2$7),
       createTextVNode(" " + toDisplayString($options.title), 1 /* TEXT */)
     ]),
     ($options.fieldErrors.length)
-      ? (openBlock(), createElementBlock("ul", _hoisted_3$6, [
+      ? (openBlock(), createElementBlock("ul", _hoisted_3$7, [
           (openBlock(true), createElementBlock(Fragment, null, renderList($options.fieldErrors, (err, i) => {
             return (openBlock(), createElementBlock("li", { key: i }, toDisplayString(err), 1 /* TEXT */))
           }), 128 /* KEYED_FRAGMENT */))
@@ -6980,10 +7179,10 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2 /* CLASS */))
 }
 
-script$9.render = render$9;
-script$9.__file = "src/editors/BooleanEditor.vue";
+script$a.render = render$a;
+script$a.__file = "src/editors/BooleanEditor.vue";
 
-var script$8 = {
+var script$9 = {
   name: 'SelectEditor',
   props: {
     schema: { type: Object, required: true },
@@ -7016,14 +7215,14 @@ var script$8 = {
   },
 };
 
-const _hoisted_1$7 = ["value"];
-const _hoisted_2$5 = ["value"];
-const _hoisted_3$5 = {
+const _hoisted_1$8 = ["value"];
+const _hoisted_2$6 = ["value"];
+const _hoisted_3$6 = {
   key: 0,
   class: "errorlist"
 };
 
-function render$8(_ctx, _cache, $props, $setup, $data, $options) {
+function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     class: normalizeClass(["sf-field", { errors: $options.fieldErrors.length }])
   }, [
@@ -7039,11 +7238,11 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
         return (openBlock(), createElementBlock("option", {
           key: opt,
           value: String(opt)
-        }, toDisplayString(opt), 9 /* TEXT, PROPS */, _hoisted_2$5))
+        }, toDisplayString(opt), 9 /* TEXT, PROPS */, _hoisted_2$6))
       }), 128 /* KEYED_FRAGMENT */))
-    ], 40 /* PROPS, NEED_HYDRATION */, _hoisted_1$7),
+    ], 40 /* PROPS, NEED_HYDRATION */, _hoisted_1$8),
     ($options.fieldErrors.length)
-      ? (openBlock(), createElementBlock("ul", _hoisted_3$5, [
+      ? (openBlock(), createElementBlock("ul", _hoisted_3$6, [
           (openBlock(true), createElementBlock(Fragment, null, renderList($options.fieldErrors, (err, i) => {
             return (openBlock(), createElementBlock("li", { key: i }, toDisplayString(err), 1 /* TEXT */))
           }), 128 /* KEYED_FRAGMENT */))
@@ -7052,10 +7251,10 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2 /* CLASS */))
 }
 
-script$8.render = render$8;
-script$8.__file = "src/editors/SelectEditor.vue";
+script$9.render = render$9;
+script$9.__file = "src/editors/SelectEditor.vue";
 
-var script$7 = {
+var script$8 = {
   name: 'HiddenEditor',
   props: {
     schema: { type: Object, required: true },
@@ -7083,18 +7282,117 @@ var script$7 = {
   },
 };
 
-const _hoisted_1$6 = { style: {"display":"none"} };
+const _hoisted_1$7 = { style: {"display":"none"} };
+
+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";
+
+var script$7 = {
+  name: 'SfIcon',
+  props: {
+    name: { type: String, required: true },
+    size: { type: [Number, String], default: 14 },
+  },
+};
+
+const _hoisted_1$6 = ["width", "height"];
+const _hoisted_2$5 = {
+  key: 4,
+  points: "6 9 12 15 18 9"
+};
+const _hoisted_3$5 = {
+  key: 5,
+  points: "18 15 12 9 6 15"
+};
 
 function render$7(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$6))
+  return (openBlock(), createElementBlock("svg", {
+    class: "sf-icon",
+    width: $props.size,
+    height: $props.size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2.5",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }, [
+    ($props.name === 'plus')
+      ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          _cache[0] || (_cache[0] = createBaseVNode("line", {
+            x1: "12",
+            y1: "5",
+            x2: "12",
+            y2: "19"
+          }, null, -1 /* CACHED */)),
+          _cache[1] || (_cache[1] = createBaseVNode("line", {
+            x1: "5",
+            y1: "12",
+            x2: "19",
+            y2: "12"
+          }, null, -1 /* CACHED */))
+        ], 64 /* STABLE_FRAGMENT */))
+      : ($props.name === 'times')
+        ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            _cache[2] || (_cache[2] = createBaseVNode("line", {
+              x1: "6",
+              y1: "6",
+              x2: "18",
+              y2: "18"
+            }, null, -1 /* CACHED */)),
+            _cache[3] || (_cache[3] = createBaseVNode("line", {
+              x1: "6",
+              y1: "18",
+              x2: "18",
+              y2: "6"
+            }, null, -1 /* CACHED */))
+          ], 64 /* STABLE_FRAGMENT */))
+        : ($props.name === 'arrow-up')
+          ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+              _cache[4] || (_cache[4] = createBaseVNode("line", {
+                x1: "12",
+                y1: "19",
+                x2: "12",
+                y2: "5"
+              }, null, -1 /* CACHED */)),
+              _cache[5] || (_cache[5] = createBaseVNode("polyline", { points: "5 12 12 5 19 12" }, null, -1 /* CACHED */))
+            ], 64 /* STABLE_FRAGMENT */))
+          : ($props.name === 'arrow-down')
+            ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+                _cache[6] || (_cache[6] = createBaseVNode("line", {
+                  x1: "12",
+                  y1: "5",
+                  x2: "12",
+                  y2: "19"
+                }, null, -1 /* CACHED */)),
+                _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))
+              : ($props.name === 'chevron-up')
+                ? (openBlock(), createElementBlock("polyline", _hoisted_3$5))
+                : ($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))
 }
 
 script$7.render = render$7;
-script$7.__file = "src/editors/HiddenEditor.vue";
+script$7.__file = "src/editors/SfIcon.vue";
 
 var script$6 = {
   name: 'ObjectEditor',
-  components: { SchemaEditor: defineAsyncComponent(() => Promise.resolve().then(function () { return SchemaEditor; })) },
+  beforeCreate() {
+    if (!this.$options.components) this.$options.components = {};
+    this.$options.components.SchemaEditor = script$1;
+    this.$options.components.SfIcon = script$7;
+  },
   props: {
     schema: { type: Object, required: true },
     modelValue: { default: () => ({}) },
@@ -7102,6 +7400,11 @@ var script$6 = {
     form: { type: Object, required: true },
   },
   emits: ['update:modelValue'],
+  data() {
+    return {
+      collapsed: false,
+    };
+  },
   computed: {
     isRoot() {
       return this.path.length === 0;
@@ -7109,12 +7412,30 @@ var script$6 = {
     title() {
       return this.schema.title || this.humanize(this.path[this.path.length - 1]) || '';
     },
+    summary() {
+      const val = this.modelValue || {};
+      const parts = [];
+      for (const key of Object.keys(this.schema.properties || {})) {
+        if (parts.length >= 3) break;
+        const v = val[key];
+        if (v !== null && v !== undefined && v !== '' && typeof v !== 'object') {
+          parts.push(String(v));
+        }
+      }
+      return parts.join(' · ');
+    },
   },
   methods: {
     humanize(str) {
       if (!str) return '';
       return str.replace(/_/g, ' ').replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, s => s.toUpperCase());
     },
+    collapse() {
+      this.collapsed = true;
+    },
+    expand() {
+      this.collapsed = false;
+    },
     onChildChange(key, value) {
       const newVal = { ...(this.modelValue || {}), [key]: value };
       this.$emit('update:modelValue', newVal);
@@ -7127,15 +7448,18 @@ const _hoisted_1$5 = {
   class: "sf-object sf-object-root"
 };
 const _hoisted_2$4 = { class: "sf-object-fields" };
-const _hoisted_3$4 = {
-  key: 1,
-  class: "sf-object"
+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_6$3 = {
+  key: 0,
+  class: "sf-object-summary"
 };
-const _hoisted_4$3 = { class: "sf-object-title" };
-const _hoisted_5$3 = { class: "sf-object-fields" };
+const _hoisted_7$2 = { class: "sf-object-fields" };
 
 function render$6(_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, [
@@ -7152,9 +7476,28 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
           }), 128 /* KEYED_FRAGMENT */))
         ])
       ]))
-    : (openBlock(), createElementBlock("fieldset", _hoisted_3$4, [
-        createBaseVNode("legend", _hoisted_4$3, toDisplayString($options.title), 1 /* TEXT */),
-        createBaseVNode("div", _hoisted_5$3, [
+    : (openBlock(), createElementBlock("fieldset", {
+        key: 1,
+        class: normalizeClass(["sf-object", { 'sf-object-collapsed': $data.collapsed }])
+      }, [
+        createBaseVNode("legend", _hoisted_3$4, [
+          createBaseVNode("button", {
+            type: "button",
+            class: "sf-collapse-btn",
+            "aria-label": $data.collapsed ? 'Expand' : 'Collapse',
+            onClick: _cache[0] || (_cache[0] = $event => ($data.collapsed = !$data.collapsed))
+          }, [
+            createVNode(_component_SfIcon, {
+              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 */),
+          ($data.collapsed && $options.summary)
+            ? (openBlock(), createElementBlock("span", _hoisted_6$3, toDisplayString($options.summary), 1 /* TEXT */))
+            : createCommentVNode("v-if", true)
+        ]),
+        withDirectives(createBaseVNode("div", _hoisted_7$2, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(($props.schema.properties || {}), (propSchema, key) => {
             return (openBlock(), createBlock(_component_SchemaEditor, {
               key: key,
@@ -7165,8 +7508,10 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
               "onUpdate:modelValue": $event => ($options.onChildChange(key, $event))
             }, null, 8 /* PROPS */, ["schema", "model-value", "path", "form", "onUpdate:modelValue"]))
           }), 128 /* KEYED_FRAGMENT */))
+        ], 512 /* NEED_PATCH */), [
+          [vShow, !$data.collapsed]
         ])
-      ]))
+      ], 2 /* CLASS */))
 }
 
 script$6.render = render$6;
@@ -7215,7 +7560,11 @@ let keyCounter = 0;
 
 var script$5 = {
   name: 'ArrayEditor',
-  components: { SchemaEditor: defineAsyncComponent(() => Promise.resolve().then(function () { return SchemaEditor; })) },
+  beforeCreate() {
+    if (!this.$options.components) this.$options.components = {};
+    this.$options.components.SchemaEditor = script$1;
+    this.$options.components.SfIcon = script$7;
+  },
   props: {
     schema: { type: Object, required: true },
     modelValue: { default: () => [] },
@@ -7227,6 +7576,9 @@ var script$5 = {
     const arr = Array.isArray(this.modelValue) ? this.modelValue : [];
     return {
       items: arr.map(v => ({ _key: keyCounter++, value: v })),
+      dragSourceIndex: null,
+      dragOverIndex: null,
+      allCollapsed: false,
     };
   },
   computed: {
@@ -7267,6 +7619,44 @@ var script$5 = {
       this.items[index].value = value;
       this.emitValue();
     },
+    onDragStart(index, event) {
+      this.dragSourceIndex = index;
+      event.dataTransfer.effectAllowed = 'move';
+      event.dataTransfer.setData('text/plain', String(index));
+    },
+    onDragOver(index) {
+      if (this.dragSourceIndex !== null && index !== this.dragSourceIndex) {
+        this.dragOverIndex = index;
+      }
+    },
+    onDragLeave(index) {
+      if (this.dragOverIndex === index) {
+        this.dragOverIndex = null;
+      }
+    },
+    onDrop(index) {
+      if (this.dragSourceIndex === null || this.dragSourceIndex === index) return;
+      const moved = this.items.splice(this.dragSourceIndex, 1)[0];
+      this.items.splice(index, 0, moved);
+      this.dragSourceIndex = null;
+      this.dragOverIndex = null;
+      this.emitValue();
+    },
+    onDragEnd() {
+      this.dragSourceIndex = null;
+      this.dragOverIndex = null;
+    },
+    toggleCollapseAll() {
+      this.allCollapsed = !this.allCollapsed;
+      const editors = this.$refs.itemEditors;
+      if (!editors) return;
+      const list = Array.isArray(editors) ? editors : [editors];
+      if (this.allCollapsed) {
+        list.forEach(editor => editor?.collapseAll?.());
+      } else {
+        list.forEach(editor => editor?.expandAll?.());
+      }
+    },
     emitValue() {
       this.$emit('update:modelValue', this.items.map(i => i.value));
     },
@@ -7276,20 +7666,28 @@ var script$5 = {
 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 = { class: "sf-array-items" };
-const _hoisted_5$2 = { class: "sf-array-item-header" };
-const _hoisted_6$2 = { class: "sf-array-item-index" };
-const _hoisted_7$1 = { class: "sf-array-item-actions" };
-const _hoisted_8$1 = ["onClick"];
-const _hoisted_9$1 = ["onClick"];
-const _hoisted_10$1 = ["onClick"];
-const _hoisted_11 = { class: "sf-array-item-body" };
-const _hoisted_12 = {
+const _hoisted_4$2 = ["title"];
+const _hoisted_5$2 = { 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" };
+const _hoisted_9$1 = {
+  class: "sf-drag-handle",
+  title: "Drag to reorder"
+};
+const _hoisted_10$1 = { class: "sf-array-item-index" };
+const _hoisted_11 = { class: "sf-array-item-actions" };
+const _hoisted_12 = ["onClick"];
+const _hoisted_13 = ["onClick"];
+const _hoisted_14 = ["onClick"];
+const _hoisted_15 = ["onDrop"];
+const _hoisted_16 = {
   key: 0,
   class: "errorlist"
 };
 
 function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_SfIcon = resolveComponent("SfIcon");
   const _component_SchemaEditor = resolveComponent("SchemaEditor");
 
   return (openBlock(), createElementBlock("div", {
@@ -7302,60 +7700,89 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
         type: "button",
         class: "sf-btn sf-btn-add",
         onClick: _cache[0] || (_cache[0] = $event => ($options.addItem()))
-      }, [...(_cache[1] || (_cache[1] = [
-        createBaseVNode("i", { class: "fas fa-plus" }, null, -1 /* CACHED */),
-        createTextVNode(" Add ", -1 /* CACHED */)
-      ]))])
+      }, [
+        createVNode(_component_SfIcon, { name: "plus" }),
+        _cache[4] || (_cache[4] = createTextVNode(" Add ", -1 /* CACHED */))
+      ]),
+      ($data.items.length)
+        ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            class: "sf-array-collapse-toggle",
+            title: $data.allCollapsed ? 'Expand all' : 'Collapse all',
+            onClick: _cache[1] || (_cache[1] = (...args) => ($options.toggleCollapseAll && $options.toggleCollapseAll(...args)))
+          }, [
+            createVNode(_component_SfIcon, {
+              name: $data.allCollapsed ? 'chevron-down' : 'chevron-up'
+            }, null, 8 /* PROPS */, ["name"])
+          ], 8 /* PROPS */, _hoisted_4$2))
+        : createCommentVNode("v-if", true)
     ]),
-    createBaseVNode("div", _hoisted_4$2, [
+    createBaseVNode("div", _hoisted_5$2, [
       (openBlock(true), createElementBlock(Fragment, null, renderList($data.items, (item, index) => {
         return (openBlock(), createElementBlock("div", {
           key: item._key,
-          class: "sf-array-item"
+          class: normalizeClass(["sf-array-item", { 'sf-drag-over': $data.dragOverIndex === index, 'sf-dragging': $data.dragSourceIndex === index }]),
+          draggable: "true",
+          onDragstart: $event => ($options.onDragStart(index, $event)),
+          onDragover: withModifiers($event => ($options.onDragOver(index)), ["prevent"]),
+          onDragleave: $event => ($options.onDragLeave(index)),
+          onDrop: withModifiers($event => ($options.onDrop(index)), ["prevent"]),
+          onDragend: _cache[3] || (_cache[3] = (...args) => ($options.onDragEnd && $options.onDragEnd(...args)))
         }, [
-          createBaseVNode("div", _hoisted_5$2, [
-            createBaseVNode("span", _hoisted_6$2, "#" + toDisplayString(index + 1), 1 /* TEXT */),
-            createBaseVNode("div", _hoisted_7$1, [
+          createBaseVNode("div", _hoisted_7$1, [
+            createBaseVNode("div", _hoisted_8$1, [
+              createBaseVNode("span", _hoisted_9$1, [
+                createVNode(_component_SfIcon, { name: "grip" })
+              ]),
+              createBaseVNode("span", _hoisted_10$1, "#" + toDisplayString(index + 1), 1 /* TEXT */)
+            ]),
+            createBaseVNode("div", _hoisted_11, [
               (index > 0)
                 ? (openBlock(), createElementBlock("button", {
                     key: 0,
                     type: "button",
                     class: "sf-btn sf-btn-sm",
                     onClick: $event => ($options.moveItem(index, -1))
-                  }, [...(_cache[2] || (_cache[2] = [
-                    createBaseVNode("i", { class: "fas fa-arrow-up" }, null, -1 /* CACHED */)
-                  ]))], 8 /* PROPS */, _hoisted_8$1))
+                  }, [
+                    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))
-              }, [...(_cache[3] || (_cache[3] = [
-                createBaseVNode("i", { class: "fas fa-arrow-down" }, null, -1 /* CACHED */)
-              ]))], 8 /* PROPS */, _hoisted_9$1),
+              }, [
+                createVNode(_component_SfIcon, { name: "arrow-down" })
+              ], 8 /* PROPS */, _hoisted_13),
               createBaseVNode("button", {
                 type: "button",
                 class: "sf-btn sf-btn-sm sf-btn-danger",
                 onClick: $event => ($options.removeItem(index))
-              }, [...(_cache[4] || (_cache[4] = [
-                createBaseVNode("i", { class: "fas fa-times" }, null, -1 /* CACHED */)
-              ]))], 8 /* PROPS */, _hoisted_10$1)
+              }, [
+                createVNode(_component_SfIcon, { name: "times" })
+              ], 8 /* PROPS */, _hoisted_14)
             ])
           ]),
-          createBaseVNode("div", _hoisted_11, [
+          createBaseVNode("div", {
+            class: "sf-array-item-body",
+            onDragover: _cache[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])),
+            onDrop: withModifiers($event => ($options.onDrop(index)), ["prevent"])
+          }, [
             createVNode(_component_SchemaEditor, {
+              ref_for: true,
+              ref: "itemEditors",
               schema: $options.itemSchema,
               "model-value": item.value,
               path: [...$props.path, String(index)],
               form: $props.form,
               "onUpdate:modelValue": $event => ($options.onItemChange(index, $event))
             }, null, 8 /* PROPS */, ["schema", "model-value", "path", "form", "onUpdate:modelValue"])
-          ])
-        ]))
+          ], 40 /* PROPS, NEED_HYDRATION */, _hoisted_15)
+        ], 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_6$2))
       }), 128 /* KEYED_FRAGMENT */))
     ]),
     ($options.fieldErrors.length)
-      ? (openBlock(), createElementBlock("ul", _hoisted_12, [
+      ? (openBlock(), createElementBlock("ul", _hoisted_16, [
           (openBlock(true), createElementBlock(Fragment, null, renderList($options.fieldErrors, (err, i) => {
             return (openBlock(), createElementBlock("li", { key: i }, toDisplayString(err), 1 /* TEXT */))
           }), 128 /* KEYED_FRAGMENT */))
@@ -7369,7 +7796,11 @@ script$5.__file = "src/editors/ArrayEditor.vue";
 
 var script$4 = {
   name: 'NullableEditor',
-  components: { SchemaEditor: defineAsyncComponent(() => Promise.resolve().then(function () { return SchemaEditor; })) },
+  beforeCreate() {
+    if (!this.$options.components) this.$options.components = {};
+    this.$options.components.SchemaEditor = script$1;
+    this.$options.components.SfIcon = script$7;
+  },
   props: {
     schema: { type: Object, required: true },
     modelValue: { default: null },
@@ -7436,6 +7867,7 @@ const _hoisted_3$2 = {
 };
 
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_SfIcon = resolveComponent("SfIcon");
   const _component_SchemaEditor = resolveComponent("SchemaEditor");
 
   return (openBlock(), createElementBlock("div", {
@@ -7452,12 +7884,12 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
       }, [
         ($data.isNull)
           ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-              _cache[2] || (_cache[2] = createBaseVNode("i", { class: "fas fa-plus" }, null, -1 /* CACHED */)),
-              _cache[3] || (_cache[3] = createTextVNode(" Add ", -1 /* CACHED */))
+              createVNode(_component_SfIcon, { name: "plus" }),
+              _cache[2] || (_cache[2] = createTextVNode(" Add ", -1 /* CACHED */))
             ], 64 /* STABLE_FRAGMENT */))
           : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-              _cache[4] || (_cache[4] = createBaseVNode("i", { class: "fas fa-times" }, null, -1 /* CACHED */)),
-              _cache[5] || (_cache[5] = createTextVNode(" Remove ", -1 /* CACHED */))
+              createVNode(_component_SfIcon, { name: "times" }),
+              _cache[3] || (_cache[3] = createTextVNode(" Remove ", -1 /* CACHED */))
             ], 64 /* STABLE_FRAGMENT */))
       ], 2 /* CLASS */)
     ]),
@@ -7488,7 +7920,10 @@ script$4.__file = "src/editors/NullableEditor.vue";
 
 var script$3 = {
   name: 'UnionEditor',
-  components: { SchemaEditor: defineAsyncComponent(() => Promise.resolve().then(function () { return SchemaEditor; })) },
+  beforeCreate() {
+    if (!this.$options.components) this.$options.components = {};
+    this.$options.components.SchemaEditor = script$1;
+  },
   props: {
     schema: { type: Object, required: true },
     modelValue: { default: null },
@@ -7588,6 +8023,7 @@ script$3.__file = "src/editors/UnionEditor.vue";
 
 var script$2 = {
   name: 'RelationEditor',
+  components: { SfIcon: script$7 },
   props: {
     schema: { type: Object, required: true },
     modelValue: { default: null },
@@ -7639,8 +8075,8 @@ var script$2 = {
       return this.form.getErrorsForPath(this.path);
     },
     filteredResults() {
-      const selectedIds = new Set(this.selected.map(s => `${s.id}-${s.model || ''}`));
-      return this.searchResults.filter(item => !selectedIds.has(`${item.id}-${item.model || ''}`));
+      const selectedIds = new Set(this.selected.map(item => this.itemKey(item)));
+      return this.searchResults.filter(item => !selectedIds.has(this.itemKey(item)));
     },
   },
   created() {
@@ -7771,6 +8207,8 @@ const _hoisted_10 = {
 };
 
 function render$2(_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"
@@ -7794,9 +8232,9 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                       type: "button",
                       class: "sf-relation-tag-remove",
                       onClick: withModifiers($event => ($options.removeItem(item)), ["stop"])
-                    }, [...(_cache[5] || (_cache[5] = [
-                      createBaseVNode("i", { class: "fas fa-times" }, null, -1 /* CACHED */)
-                    ]))], 8 /* PROPS */, _hoisted_4))
+                    }, [
+                      createVNode(_component_SfIcon, { name: "times" })
+                    ], 8 /* PROPS */, _hoisted_4))
                   : createCommentVNode("v-if", true)
               ]))
             }), 128 /* KEYED_FRAGMENT */))
@@ -7861,11 +8299,11 @@ const MAX_DEPTH = 12;
 var script$1 = {
   name: 'SchemaEditor',
   components: {
-    StringEditor: script$b,
-    NumberEditor: script$a,
-    BooleanEditor: script$9,
-    SelectEditor: script$8,
-    HiddenEditor: script$7,
+    StringEditor: script$c,
+    NumberEditor: script$b,
+    BooleanEditor: script$a,
+    SelectEditor: script$9,
+    HiddenEditor: script$8,
     ObjectEditor: script$6,
     ArrayEditor: script$5,
     NullableEditor: script$4,
@@ -7879,6 +8317,18 @@ var script$1 = {
     form: { type: Object, required: true },
   },
   emits: ['update:modelValue'],
+  methods: {
+    collapseAll() {
+      const editor = this.$refs.editor;
+      if (editor?.collapse) editor.collapse();
+      if (editor?.collapseAll) editor.collapseAll();
+    },
+    expandAll() {
+      const editor = this.$refs.editor;
+      if (editor?.expand) editor.expand();
+      if (editor?.expandAll) editor.expandAll();
+    },
+  },
   computed: {
     editorComponent() {
       const schema = this.schema;
@@ -7903,6 +8353,7 @@ 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,
@@ -7914,11 +8365,6 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
 script$1.render = render$1;
 script$1.__file = "src/editors/SchemaEditor.vue";
 
-var SchemaEditor = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: script$1
-});
-
 var script = {
   name: 'SchemaForm',
   components: { SchemaEditor: script$1 },
@@ -7928,6 +8374,7 @@ var script = {
     errors: { type: Object, default: () => ({}) },
   },
   emits: ['change'],
+  expose: ['getValue'],
   data() {
     const parsedSchema = typeof this.schema === 'string' ? JSON.parse(this.schema) : this.schema;
     const defs = parsedSchema.$defs || parsedSchema.definitions || {};
@@ -8066,137 +8513,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 script.render = render;
 script.__file = "src/SchemaForm.vue";
 
-class SchemaFormElement extends HTMLElement {
-  constructor() {
-    super();
-    this._formRef = ref(null);
-    this._props = reactive({
-      schema: {},
-      initialData: undefined,
-      errors: {},
-    });
-    this._app = null;
-    this._mountPoint = null;
-  }
-
-  connectedCallback() {
-    this._mountPoint = document.createElement('div');
-    this.appendChild(this._mountPoint);
-
-    // Read from attributes if properties haven't been set programmatically
-    if (!this._propsSet) {
-      const schemaAttr = this.getAttribute('schema');
-      const dataAttr = this.getAttribute('initial-data');
-      if (schemaAttr) this._props.schema = JSON.parse(schemaAttr);
-      if (dataAttr) this._props.initialData = JSON.parse(dataAttr);
-    }
-
-    const formRef = this._formRef;
-    const props = this._props;
-
-    this._app = createApp({
-      render: () => h(script, {
-        ref: formRef,
-        schema: props.schema,
-        initialData: props.initialData,
-        errors: props.errors,
-        onChange: (val) => {
-          this.dispatchEvent(new CustomEvent('change', { detail: val, bubbles: true }));
-        },
-      }),
-    });
-
-    this._app.mount(this._mountPoint);
-  }
-
-  disconnectedCallback() {
-    if (this._app) {
-      this._app.unmount();
-      this._app = null;
-    }
-    this._mountPoint = null;
-  }
-
-  // --- Property API ---
-
-  get schema() {
-    return this._props.schema;
-  }
-
-  set schema(val) {
-    this._propsSet = true;
-    this._props.schema = typeof val === 'string' ? JSON.parse(val) : val;
-    this._rerender();
-  }
-
-  get initialData() {
-    return this._props.initialData;
-  }
-
-  set initialData(val) {
-    this._propsSet = true;
-    this._props.initialData = typeof val === 'string' ? JSON.parse(val) : val;
-    this._rerender();
-  }
-
-  get errors() {
-    return this._props.errors;
-  }
-
-  set errors(val) {
-    this._propsSet = true;
-    this._props.errors = typeof val === 'string' ? JSON.parse(val) : (val || {});
-    this._rerender();
-  }
-
-  // --- Attribute reflection ---
-
-  static get observedAttributes() {
-    return ['schema', 'initial-data', 'errors'];
-  }
-
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (oldVal === newVal || this._propsSet) return;
-    if (name === 'schema') {
-      this._props.schema = newVal ? JSON.parse(newVal) : {};
-    } else if (name === 'initial-data') {
-      this._props.initialData = newVal ? JSON.parse(newVal) : undefined;
-    } else if (name === 'errors') {
-      this._props.errors = newVal ? JSON.parse(newVal) : {};
-    }
-    this._rerender();
-  }
-
-  // --- Public methods ---
-
-  getValue() {
-    return this._formRef.value?.getValue?.() ?? null;
-  }
-
-  // --- Internal ---
-
-  _rerender() {
-    if (!this._app) return;
-    this._app.unmount();
-    this._mountPoint.innerHTML = '';
-    const formRef = this._formRef;
-    const props = this._props;
-
-    this._app = createApp({
-      render: () => h(script, {
-        ref: formRef,
-        schema: props.schema,
-        initialData: props.initialData,
-        errors: props.errors,
-        onChange: (val) => {
-          this.dispatchEvent(new CustomEvent('change', { detail: val, bubbles: true }));
-        },
-      }),
-    });
-
-    this._app.mount(this._mountPoint);
-  }
-}
+const SchemaFormElement = defineCustomElement({
+  ...script,
+  shadowRoot: false,
+});
 
 function registerCustomElement(tagName = 'schema-form') {
   if (!customElements.get(tagName)) {
@@ -8204,5 +8524,5 @@ function registerCustomElement(tagName = 'schema-form') {
   }
 }
 
-export { script$5 as ArrayEditor, script$9 as BooleanEditor, script$7 as HiddenEditor, script$4 as NullableEditor, script$a as NumberEditor, script$6 as ObjectEditor, script$2 as RelationEditor, script$1 as SchemaEditor, script as SchemaForm, SchemaFormElement, script$8 as SelectEditor, script$b as StringEditor, script$3 as UnionEditor, registerCustomElement };
+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 };
 //# sourceMappingURL=structured-widget-editor.esm.js.map