@omnipad/vue 0.4.2 → 0.4.4

package/dist/omnipad-vue.mjs

@@ -1,117 +1,138 @@
-import { Registry as ae, WindowManager as re, CONTEXT as ee, CMP_TYPES as D, InputZoneCore as ce, RootLayerCore as le, TargetZoneCore as ue, ButtonCore as de, DPadCore as ve, TrackpadCore as pe, JoystickCore as me } from "@omnipad/core";
-import { defineComponent as S, h as fe, shallowRef as ye, ref as V, onMounted as Pe, onUnmounted as ge, computed as _, openBlock as R, createElementBlock as A, Fragment as be, renderList as he, createBlock as L, resolveDynamicComponent as X, renderSlot as h, inject as we, provide as Re, useSlots as _e, watch as Ce, nextTick as ke, normalizeStyle as B, normalizeClass as k, unref as o, createVNode as J, withCtx as $, createElementVNode as T, createCommentVNode as M, Transition as $e, toDisplayString as De, normalizeProps as x, guardReactiveProps as E, watchEffect as oe } from "vue";
-import { createCachedProvider as Te, createPointerBridge as Ae, generateUID as Ie, resolveLayoutStyle as j, supportsContainerQueries as q, remap as W, reclaimFocusAtPos as Ne, dispatchPointerEventAtPos as xe, dispatchKeyboardEvent as Ee } from "@omnipad/core/utils";
-const K = {};
-function Z(e, i) {
-  K[e] = i;
+import { Registry as ue, WindowManager as de, CONTEXT as ne, CMP_TYPES as T, InputZoneCore as ve, RootLayerCore as fe, TargetZoneCore as pe, ButtonCore as me, DPadCore as ye, TrackpadCore as ge, JoystickCore as Pe } from "@omnipad/core";
+import { defineComponent as O, h as be, shallowRef as Ce, ref as L, watch as se, onMounted as he, onUnmounted as we, readonly as q, computed as $, openBlock as k, createElementBlock as A, Fragment as Re, renderList as _e, createBlock as j, resolveDynamicComponent as ee, renderSlot as P, inject as ke, provide as $e, useSlots as De, nextTick as Ne, normalizeStyle as V, normalizeClass as D, unref as t, createVNode as H, withCtx as N, createElementVNode as I, createCommentVNode as Z, Transition as Te, toDisplayString as Ie, normalizeProps as S, guardReactiveProps as U, watchEffect as ae } from "vue";
+import { getObjectDiff as Ae, createCachedProvider as Ee, createPointerBridge as xe, generateUID as Se, resolveLayoutStyle as W, supportsContainerQueries as J, remap as G, reclaimFocusAtPos as Ue, dispatchPointerEventAtPos as Oe, dispatchKeyboardEvent as Be } from "@omnipad/core/utils";
+const Q = {};
+function F(e, o) {
+  Q[e] = o;
 }
-function ne(e) {
-  const i = K[e];
-  return i || S({
-    render: () => fe("div", { style: "color:red" }, `[Unknown: ${e}]`)
+function re(e) {
+  const o = Q[e];
+  return o || O({
+    render: () => be("div", { style: "color:red" }, `[Unknown: ${e}]`)
   });
 }
-function te(e) {
-  return !e || !K[e] ? null : K[e];
+function ie(e) {
+  return !e || !Q[e] ? null : Q[e];
 }
-function lt(e) {
-  return e ? !!K[e] : !1;
+function ft(e) {
+  return e ? !!Q[e] : !1;
 }
-function F(e, i = {}, u) {
-  const t = e(), n = ye(), a = V(), y = V(null), s = V({});
-  let d = null;
-  const b = (v) => {
-    a.value = v;
-  }, c = (v) => {
-    if (!n.value) return;
-    const p = n.value;
-    typeof p.bindDelegate == "function" && Object.entries(v).forEach(([P, f]) => {
-      p.bindDelegate(P, f);
+function z(e, o, v = {}, s) {
+  const n = e(), l = Ce(), g = L(), i = L(), u = L(), a = L(null), m = L({});
+  let b = null;
+  const C = (c) => {
+    g.value = c;
+  }, w = (c) => {
+    i.value = c, i.value && (u.value = i.value?.layout);
+  }, R = (c) => {
+    if (!l.value) return;
+    const f = l.value;
+    typeof f.bindDelegate == "function" && Object.entries(c).forEach(([_, d]) => {
+      f.bindDelegate(_, d);
     });
   };
-  return Pe(() => {
-    n.value = t, ae.getInstance().register(t), "subscribe" in t && t.subscribe(b), u && c(u);
-    let v = null;
-    if (y.value && (y.value instanceof Element ? v = y.value : y.value.$el instanceof Element && (v = y.value.$el)), v && "bindRectProvider" in t) {
-      const p = t, P = Te(() => v.getBoundingClientRect());
-      p.bindRectProvider(P.get, P.markDirty), d = new ResizeObserver(() => {
-        p.markRectDirty();
-      }), d.observe(v);
+  let h = { ...o.value };
+  return se(
+    o,
+    (c) => {
+      if (!l.value) return;
+      const f = Ae(h, c);
+      Object.keys(f).length > 0 && l.value.updateConfig(f), h = { ...o.value };
+    },
+    { deep: !0 }
+  ), he(() => {
+    l.value = n, ue.getInstance().register(n), "subscribeState" in n && n.subscribeState(C), "subscribeConfig" in n && n.subscribeConfig(w), s && R(s);
+    let c = null;
+    if (a.value && (a.value instanceof Element ? c = a.value : a.value.$el instanceof Element && (c = a.value.$el)), c && "bindRectProvider" in n) {
+      const f = n, _ = Ee(() => c.getBoundingClientRect());
+      f.bindRectProvider(_.get, _.markDirty), b = new ResizeObserver(() => {
+        f.markRectDirty();
+      }), b.observe(c);
     }
-    if ("onPointerDown" in t) {
-      const p = Ae(t, i);
-      s.value = { ...p };
+    if ("onPointerDown" in n) {
+      const f = xe(n, v);
+      m.value = { ...f };
     }
-    re.getInstance().init();
-  }), ge(() => {
-    d && (d.disconnect(), d = null), n.value && n.value.destroy();
+    de.getInstance().init();
+  }), we(() => {
+    b && (b.disconnect(), b = null), l.value && l.value.destroy();
   }), {
-    core: n,
-    state: a,
-    elementRef: y,
-    domEvents: s,
-    bindDelegates: c
+    core: q(l),
+    state: q(g),
+    domEvents: q(m),
+    effectiveConfig: q(i),
+    effectiveLayout: q(u),
+    elementRef: a,
+    bindDelegates: R
   };
 }
-const Se = { class: "omnipad-virtual-layer-base omnipad-prevent" }, Ue = /* @__PURE__ */ S({
+const Le = { class: "omnipad-virtual-layer-base omnipad-prevent" }, Ve = /* @__PURE__ */ O({
   __name: "VirtualLayerBase",
   props: {
     nodes: {}
   },
   setup(e) {
-    const i = e, u = _(() => (i.nodes || []).map((t) => {
-      let n = te(t.type);
-      return !n && t.config?.baseType && (n = te(t.config.baseType)), n || (n = ne(t.type)), {
-        node: t,
+    const o = e, v = $(() => (o.nodes || []).map((s) => {
+      let n = ie(s.type);
+      return !n && s.config?.baseType && (n = ie(s.config.baseType)), n || (n = re(s.type)), {
+        node: s,
         component: n
       };
     }));
-    return (t, n) => (R(), A("div", Se, [
-      (R(!0), A(be, null, he(u.value, (a) => (R(), L(X(a.component), {
-        key: a.node.uid,
-        "tree-node": a.node
+    return (s, n) => (k(), A("div", Le, [
+      (k(!0), A(Re, null, _e(v.value, (l) => (k(), j(ee(l.component), {
+        key: l.node.uid,
+        "tree-node": l.node
       }, null, 8, ["tree-node"]))), 128)),
-      h(t.$slots, "default", {}, void 0, !0)
+      P(s.$slots, "default", {}, void 0, !0)
     ]));
   }
-}), O = (e, i) => {
-  const u = e.__vccOpts || e;
-  for (const [t, n] of i)
-    u[t] = n;
-  return u;
-}, se = /* @__PURE__ */ O(Ue, [["__scopeId", "data-v-d67cc501"]]);
-function z(e, i, u = {}) {
-  const t = i.treeNode, n = t && t.config?.baseType === e || t?.type === e ? t : void 0;
-  t && !n && console.warn(
-    `[OmniPad-Validation] Type mismatch! Component expected "${e}", but received "${t.type}". Config ignored.`
+}), M = (e, o) => {
+  const v = e.__vccOpts || e;
+  for (const [s, n] of o)
+    v[s] = n;
+  return v;
+}, ce = /* @__PURE__ */ M(Ve, [["__scopeId", "data-v-d67cc501"]]);
+function Y(e, o, v = {}) {
+  const s = o.treeNode, n = s && s.config?.baseType === e || s?.type === e ? s : void 0;
+  s && !n && console.warn(
+    `[OmniPad-Validation] Type mismatch! Component expected "${e}", but received "${s.type}". Config ignored.`
   );
-  const a = we(ee.PARENT_ID_KEY, V(void 0)), y = _(() => i.parentId || n?.config?.parentId || a.value), s = _(() => i.widgetId || n?.uid || Ie(e));
-  Re(ee.PARENT_ID_KEY, s);
-  const d = _(() => {
-    const c = n?.config || {}, v = Object.fromEntries(
-      Object.entries(i).filter(([p, P]) => P !== void 0 && p !== "treeNode" && p !== "widgetId")
+  const l = ke(ne.PARENT_ID_KEY, L(void 0)), g = $(() => o.parentId || n?.config?.parentId || l.value), i = $(() => o.widgetId || n?.uid || Se(e));
+  $e(ne.PARENT_ID_KEY, i);
+  const u = n?.config || {}, a = Object.fromEntries(
+    Object.entries(o).filter(
+      ([C, w]) => w !== void 0 && C !== "treeNode" && C !== "widgetId"
+    )
+  ), m = $(() => ({
+    ...v,
+    ...u,
+    ...a,
+    id: i.value,
+    baseType: e,
+    parentId: g.value,
+    // 特殊处理 Layout：深度合并，确保即便只传了 { width: 100 } 也不丢失原来的 left/top
+    layout: {
+      ...v.layout || {},
+      ...u.layout || {},
+      ...a.layout || {}
+    }
+  })), b = $(() => {
+    const C = Object.fromEntries(
+      // 排除身份和依赖配置的异常变更
+      Object.entries(o).filter(
+        ([w, R]) => R !== void 0 && w !== "treeNode" && w !== "widgetId" && w !== "parentId"
+      )
     );
     return {
-      ...u,
-      ...c,
-      ...v,
-      id: s.value,
-      baseType: e,
-      parentId: y.value,
-      // 特殊处理 Layout：深度合并，确保即便只传了 { width: 100 } 也不丢失原来的 left/top
-      layout: {
-        ...u.layout || {},
-        ...c.layout || {},
-        ...v.layout || {}
-      }
+      ...C,
+      layout: C.layout || void 0
+      // 只有当传入了新的 layout 时才包裹
     };
-  }), b = _(() => {
-    const c = d.value.cssClasses;
-    return c ? Array.isArray(c) ? c : [c] : [];
   });
-  return { uid: s, config: d, customClasses: b };
+  return { uid: i, initialConfig: m, reactiveConfig: b };
 }
-const Be = ["id"], Oe = /* @__PURE__ */ S({
+const Me = ["id"], Ze = /* @__PURE__ */ O({
   __name: "InputZone",
   props: {
     treeNode: {},
@@ -120,105 +141,111 @@ const Be = ["id"], Oe = /* @__PURE__ */ S({
     preventFocusLoss: {}
   },
   setup(e) {
-    const i = e, u = _e(), t = V(null), { uid: n, config: a, customClasses: y } = z(
-      D.INPUT_ZONE,
-      i
-    ), { core: s, state: d, elementRef: b, domEvents: c, bindDelegates: v } = F(() => new ce(n.value, a.value), { requireDirectHit: !0 }), p = _(() => {
-      const m = i.treeNode?.config?.dynamicWidgetId;
-      return i.treeNode?.children?.filter((I) => I.uid !== m) || [];
-    }), P = _(() => {
-      const I = (u.dynamicWidget?.() || []).filter((Q) => !(Q.type === Comment || Q.type === Text)), N = i.treeNode?.children?.find(
-        (Q) => Q.uid === i.treeNode?.config?.dynamicWidgetId
-      ), Y = I.length > 0;
-      return I.length > 1 && console.error(
+    const o = e, v = De(), s = L(null), { uid: n, initialConfig: l, reactiveConfig: g } = Y(
+      T.INPUT_ZONE,
+      o
+    ), { core: i, state: u, domEvents: a, effectiveConfig: m, effectiveLayout: b, elementRef: C, bindDelegates: w } = z(
+      () => new ve(n.value, l.value, o.treeNode?.type),
+      g,
+      {
+        requireDirectHit: !0
+      }
+    ), R = $(() => {
+      const p = o.treeNode?.config?.dynamicWidgetId;
+      return o.treeNode?.children?.filter((E) => E.uid !== p) || [];
+    }), h = $(() => {
+      const E = (v.dynamicWidget?.() || []).filter((X) => !(X.type === Comment || X.type === Text)), x = o.treeNode?.children?.find(
+        (X) => X.uid === o.treeNode?.config?.dynamicWidgetId
+      ), K = E.length > 0;
+      return E.length > 1 && console.error(
         `[OmniPad-Validation] InputZone ${n.value} has multiple dynamic widgets in slot. Only the first one will be activated.`
-      ), Y && N && console.warn(
+      ), K && x && console.warn(
         `[OmniPad-Validation] InputZone ${n.value} has both Slot and Config dynamic widgets. Config ignored.`
       ), {
-        nodeToRender: Y ? I[0] : N || null,
-        isFromSlot: Y
+        nodeToRender: K ? E[0] : x || null,
+        isFromSlot: K
       };
-    }), f = _(() => {
-      const m = P.value.nodeToRender;
-      return ne(m.config?.baseType || m.type);
+    }), c = $(() => {
+      const p = h.value.nodeToRender;
+      return re(p.config?.baseType || p.type);
     });
-    Ce(
-      t,
-      (m) => {
-        ke(() => {
-          m && m?.uid && (s.value?.updateConfig({
-            dynamicWidgetId: m.uid
-          }), v({
-            dynamicWidgetPointerDown: (I) => {
-              m.markRectDirty?.(), m.onPointerDown?.(I);
+    se(
+      s,
+      (p) => {
+        Ne(() => {
+          p && p?.uid && (i.value?.updateConfig({
+            dynamicWidgetId: p.uid
+          }), w({
+            dynamicWidgetPointerDown: (E) => {
+              p.markRectDirty?.(), p.onPointerDown?.(E);
             },
-            dynamicWidgetPointerMove: m.onPointerMove,
-            dynamicWidgetPointerUp: m.onPointerUp,
-            dynamicWidgetPointerCancel: m.onPointerCancel
+            dynamicWidgetPointerMove: p.onPointerMove,
+            dynamicWidgetPointerUp: p.onPointerUp,
+            dynamicWidgetPointerCancel: p.onPointerCancel
           }));
         });
       },
       { immediate: !0 }
     );
-    const w = _(() => j(a.value.layout)), C = q(), l = _(() => {
-      if (!d.value) return { display: "none" };
-      if (!d.value?.isDynamicActive) return { visibility: "hidden", opacity: 0 };
-      let m, I;
-      const N = d?.value?.dynamicPosition;
-      if (C)
-        m = `${N.x}cqw`, I = `${N.y}cqh`;
+    const f = $(() => b.value ? W(b.value) : {}), _ = J(), d = $(() => {
+      if (!u.value) return { display: "none" };
+      if (!u.value?.isDynamicActive) return { visibility: "hidden", opacity: 0 };
+      let p, E;
+      const x = u?.value?.dynamicPosition;
+      if (_)
+        p = `${x.x}cqw`, E = `${x.y}cqh`;
       else {
-        const Y = s?.value?.rect;
-        m = `${W(N?.x || 0, 0, 100, 0, Y?.width || 0)}px`, I = `${W(N?.y || 0, 0, 100, 0, Y?.height || 0)}px`;
+        const K = i?.value?.rect;
+        p = `${G(x?.x || 0, 0, 100, 0, K?.width || 0)}px`, E = `${G(x?.y || 0, 0, 100, 0, K?.height || 0)}px`;
       }
       return {
         zIndex: 100,
-        "--dynamic-widget-mount-x": m,
-        "--dynamic-widget-mount-y": I,
+        "--dynamic-widget-mount-x": p,
+        "--dynamic-widget-mount-y": E,
         visibility: "visible",
         opacity: 1,
         pointerEvents: "auto"
       };
-    }), r = (m) => c.value?.onPointerDown(m), U = (m) => c.value?.onPointerMove(m), g = (m) => c.value?.onPointerUp(m), H = (m) => c.value?.onPointerCancel(m);
-    return (m, I) => (R(), A("div", {
-      id: o(n),
+    }), r = (p) => a.value?.onPointerDown(p), B = (p) => a.value?.onPointerMove(p), y = (p) => a.value?.onPointerUp(p), oe = (p) => a.value?.onPointerCancel(p);
+    return (p, E) => (k(), A("div", {
+      id: t(n),
       ref_key: "elementRef",
-      ref: b,
-      class: k(["omnipad-input-zone omnipad-prevent", o(y)]),
-      style: B(w.value)
+      ref: C,
+      class: D(["omnipad-input-zone omnipad-prevent", t(m)?.cssClasses]),
+      style: V(f.value)
     }, [
-      J(se, { nodes: p.value }, {
-        default: $(() => [
-          h(m.$slots, "default", {}, void 0, !0)
+      H(ce, { nodes: R.value }, {
+        default: N(() => [
+          P(p.$slots, "default", {}, void 0, !0)
         ]),
         _: 3
       }, 8, ["nodes"]),
-      P.value.nodeToRender || o(s)?.isInterceptorRequired ? (R(), A("div", {
+      h.value.nodeToRender || t(i)?.isInterceptorRequired ? (k(), A("div", {
         key: 0,
         class: "omnipad-input-zone-trigger omnipad-prevent",
         onPointerdown: r,
-        onPointermove: U,
-        onPointerup: g,
-        onPointercancel: H,
-        onLostpointercapture: H
+        onPointermove: B,
+        onPointerup: y,
+        onPointercancel: oe,
+        onLostpointercapture: oe
       }, [
-        T("div", {
+        I("div", {
           class: "dynamic-widget-mount",
-          style: B(l.value)
+          style: V(d.value)
         }, [
-          P.value.isFromSlot ? (R(), L(X(P.value.nodeToRender), {
+          h.value.isFromSlot ? (k(), j(ee(h.value.nodeToRender), {
             key: 0,
-            ref: (N) => t.value = N
-          }, null, 512)) : P.value.nodeToRender ? (R(), L(X(f.value), {
+            ref: (x) => s.value = x
+          }, null, 512)) : h.value.nodeToRender ? (k(), j(ee(c.value), {
             key: 1,
-            ref: (N) => t.value = N,
-            "tree-node": P.value.nodeToRender
-          }, null, 8, ["tree-node"])) : M("", !0)
+            ref: (x) => s.value = x,
+            "tree-node": h.value.nodeToRender
+          }, null, 8, ["tree-node"])) : Z("", !0)
         ], 4)
-      ], 32)) : M("", !0)
-    ], 14, Be));
+      ], 32)) : Z("", !0)
+    ], 14, Me));
   }
-}), Ve = /* @__PURE__ */ O(Oe, [["__scopeId", "data-v-0a998e05"]]), Me = ["id"], Le = /* @__PURE__ */ S({
+}), je = /* @__PURE__ */ M(Ze, [["__scopeId", "data-v-7dde40d2"]]), Fe = ["id"], ze = /* @__PURE__ */ O({
   __name: "RootLayer",
   props: {
     treeNode: {},
@@ -226,28 +253,34 @@ const Be = ["id"], Oe = /* @__PURE__ */ S({
     layout: {}
   },
   setup(e) {
-    const i = e, { uid: u, config: t, customClasses: n } = z(D.ROOT_LAYER, i), { elementRef: a } = F(() => new le(u.value, t.value)), y = _(() => j(t.value.layout));
-    return (s, d) => (R(), A("div", {
-      id: o(u),
+    const o = e, { uid: v, initialConfig: s, reactiveConfig: n } = Y(
+      T.ROOT_LAYER,
+      o
+    ), { effectiveConfig: l, effectiveLayout: g, elementRef: i } = z(
+      () => new fe(v.value, s.value, o.treeNode?.type),
+      n
+    ), u = $(() => g.value ? W(g.value) : {});
+    return (a, m) => (k(), A("div", {
+      id: t(v),
       ref_key: "elementRef",
-      ref: a,
-      class: k(["omnipad-root-layer omnipad-prevent", o(n)]),
-      style: B(y.value)
+      ref: i,
+      class: D(["omnipad-root-layer omnipad-prevent", t(l)?.cssClasses]),
+      style: V(u.value)
     }, [
-      J(se, {
+      H(ce, {
         nodes: e.treeNode?.children || []
       }, {
-        default: $(() => [
-          h(s.$slots, "default", {}, void 0, !0)
+        default: N(() => [
+          P(a.$slots, "default", {}, void 0, !0)
         ]),
         _: 3
       }, 8, ["nodes"])
-    ], 14, Me));
+    ], 14, Fe));
   }
-}), Ze = /* @__PURE__ */ O(Le, [["__scopeId", "data-v-e53747a9"]]), Fe = ["id"], ze = {
+}), Ye = /* @__PURE__ */ M(ze, [["__scopeId", "data-v-18e8b5d5"]]), Ke = ["id"], qe = {
   key: 0,
   class: "omnipad-default-focus-border-feedback"
-}, Ye = /* @__PURE__ */ S({
+}, Qe = /* @__PURE__ */ O({
   __name: "TargetZone",
   props: {
     treeNode: {},
@@ -257,100 +290,101 @@ const Be = ["id"], Oe = /* @__PURE__ */ S({
     layout: {}
   },
   setup(e) {
-    const i = e, u = {
+    const o = e, v = {
       cursorAutoDelay: 2500
-    }, { uid: t, config: n, customClasses: a } = z(
-      D.TARGET_ZONE,
-      i,
-      u
-    ), { core: y, state: s, elementRef: d, domEvents: b } = F(
-      () => new ue(t.value, n.value),
+    }, { uid: s, initialConfig: n, reactiveConfig: l } = Y(
+      T.TARGET_ZONE,
+      o,
+      v
+    ), { core: g, state: i, domEvents: u, effectiveConfig: a, effectiveLayout: m, elementRef: b } = z(
+      () => new pe(s.value, n.value, o.treeNode?.type),
+      l,
       {},
       {
-        dispatchKeyboardEvent: Ee,
-        dispatchPointerEventAtPos: xe,
-        reclaimFocusAtPos: Ne
+        dispatchKeyboardEvent: Be,
+        dispatchPointerEventAtPos: Oe,
+        reclaimFocusAtPos: Ue
       }
-    ), c = _(() => j(n.value.layout)), v = q(), p = _(() => {
-      if (!s.value) return { display: "none" };
-      let l, r;
-      const U = s?.value?.position;
-      if (v)
-        l = `${U.x}cqw`, r = `${U.y}cqh`;
+    ), C = $(() => m.value ? W(m.value) : {}), w = J(), R = $(() => {
+      if (!i.value) return { display: "none" };
+      let d, r;
+      const B = i?.value?.position;
+      if (w)
+        d = `${B.x}cqw`, r = `${B.y}cqh`;
       else {
-        const g = y?.value?.rect;
-        l = `${W(U?.x || 0, 0, 100, 0, g?.width || 0)}px`, r = `${W(U?.y || 0, 0, 100, 0, g?.height || 0)}px`;
+        const y = g?.value?.rect;
+        d = `${G(B?.x || 0, 0, 100, 0, y?.width || 0)}px`, r = `${G(B?.y || 0, 0, 100, 0, y?.height || 0)}px`;
       }
       return {
-        "--omnipad-virtual-cursor-x": l,
+        "--omnipad-virtual-cursor-x": d,
         "--omnipad-virtual-cursor-y": r,
-        opacity: s.value.isVisible ? 1 : 0
+        opacity: i.value.isVisible ? 1 : 0
       };
-    }), P = (l) => b.value?.onPointerDown(l), f = (l) => b.value?.onPointerMove(l), w = (l) => b.value?.onPointerUp(l), C = (l) => b.value?.onPointerCancel(l);
-    return (l, r) => (R(), A("div", {
-      id: o(t),
+    }), h = (d) => u.value?.onPointerDown(d), c = (d) => u.value?.onPointerMove(d), f = (d) => u.value?.onPointerUp(d), _ = (d) => u.value?.onPointerCancel(d);
+    return (d, r) => (k(), A("div", {
+      id: t(s),
       ref_key: "elementRef",
-      ref: d,
-      class: k(["omnipad-target-zone omnipad-prevent", o(a)]),
-      style: B(c.value),
-      onPointerdown: P,
-      onPointermove: f,
-      onPointerup: w,
-      onPointercancel: C,
-      onLostpointercapture: C
+      ref: b,
+      class: D(["omnipad-target-zone omnipad-prevent", t(a)?.cssClasses]),
+      style: V(C.value),
+      onPointerdown: h,
+      onPointermove: c,
+      onPointerup: f,
+      onPointercancel: _,
+      onLostpointercapture: _
     }, [
-      h(l.$slots, "focus-feedback", {
-        state: o(s),
-        isReturning: o(s)?.isFocusReturning,
-        cursorPos: o(s)?.position
+      P(d.$slots, "focus-feedback", {
+        state: t(i),
+        isReturning: t(i)?.isFocusReturning,
+        cursorPos: t(i)?.position
       }, () => [
-        J($e, { name: "omnipad-default-focus-fade" }, {
-          default: $(() => [
-            o(s)?.isFocusReturning ? (R(), A("div", ze)) : M("", !0)
+        H(Te, { name: "omnipad-default-focus-fade" }, {
+          default: N(() => [
+            t(i)?.isFocusReturning ? (k(), A("div", qe)) : Z("", !0)
           ]),
           _: 1
         })
       ], !0),
-      o(n).cursorEnabled ? (R(), A("div", {
+      t(a)?.cursorEnabled ? (k(), A("div", {
         key: 0,
         class: "omnipad-virtual-cursor",
-        style: B(p.value)
+        style: V(R.value)
       }, [
-        h(l.$slots, "cursor", {
-          state: o(s),
-          isDown: o(s)?.isPointerDown,
-          isReturning: o(s)?.isFocusReturning,
-          cursorPos: o(s)?.position
+        P(d.$slots, "cursor", {
+          state: t(i),
+          isDown: t(i)?.isPointerDown,
+          isReturning: t(i)?.isFocusReturning,
+          cursorPos: t(i)?.position
         }, () => [
-          T("div", {
-            class: k(["omnipad-default-cursor-dot", { "is-down": o(s)?.isPointerDown }])
+          I("div", {
+            class: D(["omnipad-default-cursor-dot", { "is-down": t(i)?.isPointerDown }])
           }, null, 2)
         ], !0)
-      ], 4)) : M("", !0),
-      o(n).cursorEnabled ? (R(), A("div", {
+      ], 4)) : Z("", !0),
+      t(a)?.cursorEnabled ? (k(), A("div", {
         key: 1,
         class: "omnipad-virtual-cursor",
-        style: B(p.value)
+        style: V(R.value)
       }, [
-        h(l.$slots, "with-cursor", {
-          state: o(s),
-          isDown: o(s)?.isPointerDown,
-          isReturning: o(s)?.isFocusReturning,
-          cursorPos: o(s)?.position
+        P(d.$slots, "with-cursor", {
+          state: t(i),
+          isDown: t(i)?.isPointerDown,
+          isReturning: t(i)?.isFocusReturning,
+          cursorPos: t(i)?.position
         }, void 0, !0)
-      ], 4)) : M("", !0),
-      h(l.$slots, "default", {
-        state: o(s),
-        isDown: o(s)?.isPointerDown,
-        isReturning: o(s)?.isFocusReturning,
-        cursorPos: o(s)?.position
+      ], 4)) : Z("", !0),
+      P(d.$slots, "default", {
+        state: t(i),
+        isDown: t(i)?.isPointerDown,
+        isReturning: t(i)?.isFocusReturning,
+        cursorPos: t(i)?.position
       }, void 0, !0)
-    ], 46, Fe));
+    ], 46, Ke));
   }
-}), Ke = /* @__PURE__ */ O(Ye, [["__scopeId", "data-v-44c28c60"]]), je = { class: "omnipad-button-content-layer" }, qe = {
+}), We = /* @__PURE__ */ M(Qe, [["__scopeId", "data-v-f6f0fd4c"]]), Je = { class: "omnipad-button-content-layer" }, Xe = {
   key: 0,
   class: "omnipad-default-button-label"
-}, Qe = /* @__PURE__ */ S({
+}, Ge = /* @__PURE__ */ O({
   __name: "VirtualButtonBase",
   props: {
     layout: {},
@@ -358,31 +392,31 @@ const Be = ["id"], Oe = /* @__PURE__ */ S({
     label: {}
   },
   setup(e) {
-    const i = e, u = _(() => i.layout ? j(i.layout) : {});
-    return (t, n) => (R(), A("div", {
+    const o = e, v = $(() => o.layout ? W(o.layout) : {});
+    return (s, n) => (k(), A("div", {
       class: "omnipad-button-base omnipad-prevent",
-      style: B(u.value),
+      style: V(v.value),
       tabindex: "-1"
     }, [
-      h(t.$slots, "base", {
+      P(s.$slots, "base", {
         isActive: e.isActive,
         label: e.label
       }, () => [
-        T("div", {
-          class: k(["omnipad-default-button-base", { "is-active": e.isActive }])
+        I("div", {
+          class: D(["omnipad-default-button-base", { "is-active": e.isActive }])
         }, null, 2)
       ], !0),
-      T("div", je, [
-        h(t.$slots, "default", {
+      I("div", Je, [
+        P(s.$slots, "default", {
           isActive: e.isActive,
           label: e.label
         }, () => [
-          e.label ? (R(), A("span", qe, De(e.label), 1)) : M("", !0)
+          e.label ? (k(), A("span", Xe, Ie(e.label), 1)) : Z("", !0)
         ], !0)
       ])
     ], 4));
   }
-}), G = /* @__PURE__ */ O(Qe, [["__scopeId", "data-v-f6a6e082"]]), We = /* @__PURE__ */ S({
+}), te = /* @__PURE__ */ M(Ge, [["__scopeId", "data-v-f6a6e082"]]), He = /* @__PURE__ */ O({
   __name: "VirtualButton",
   props: {
     treeNode: {},
@@ -392,46 +426,44 @@ const Be = ["id"], Oe = /* @__PURE__ */ S({
     mapping: {},
     layout: {}
   },
-  setup(e, { expose: i }) {
-    const u = e, t = {
+  setup(e, { expose: o }) {
+    const v = e, s = {
       label: "BTN"
-    }, { uid: n, config: a, customClasses: y } = z(
-      D.BUTTON,
-      u,
-      t
-    ), { core: s, state: d, elementRef: b, domEvents: c } = F(
-      () => new de(n.value, a.value)
-    ), v = (w) => c.value?.onPointerDown(w), p = (w) => c.value?.onPointerMove(w), P = (w) => c.value?.onPointerUp(w), f = (w) => c.value?.onPointerCancel(w);
-    return i({
+    }, { uid: n, initialConfig: l, reactiveConfig: g } = Y(
+      T.BUTTON,
+      v,
+      s
+    ), { core: i, state: u, domEvents: a, effectiveConfig: m, effectiveLayout: b, elementRef: C } = z(() => new me(n.value, l.value, v.treeNode?.type), g), w = (f) => a.value?.onPointerDown(f), R = (f) => a.value?.onPointerMove(f), h = (f) => a.value?.onPointerUp(f), c = (f) => a.value?.onPointerCancel(f);
+    return o({
       uid: n,
-      onPointerDown: v,
-      onPointerMove: p,
-      onPointerUp: P,
-      onPointerCancel: f,
-      markRectDirty: () => s.value?.markRectDirty
-    }), (w, C) => (R(), L(G, {
-      id: o(n),
+      onPointerDown: w,
+      onPointerMove: R,
+      onPointerUp: h,
+      onPointerCancel: c,
+      markRectDirty: () => i.value?.markRectDirty
+    }), (f, _) => (k(), j(te, {
+      id: t(n),
       ref_key: "elementRef",
-      ref: b,
-      class: k(["omnipad-button omnipad-prevent", o(y)]),
-      layout: o(a).layout,
-      label: o(a).label,
-      "is-active": o(d)?.isPressed,
-      onPointerdown: v,
-      onPointerup: P,
-      onPointercancel: f,
-      onLostpointercapture: f
+      ref: C,
+      class: D(["omnipad-button omnipad-prevent", t(m)?.cssClasses]),
+      layout: t(b),
+      label: t(m)?.label,
+      "is-active": t(u)?.isPressed,
+      onPointerdown: w,
+      onPointerup: h,
+      onPointercancel: c,
+      onLostpointercapture: c
     }, {
-      base: $((l) => [
-        h(w.$slots, "base", x(E(l)))
+      base: N((d) => [
+        P(f.$slots, "base", S(U(d)))
       ]),
-      default: $((l) => [
-        h(w.$slots, "default", x(E(l)))
+      default: N((d) => [
+        P(f.$slots, "default", S(U(d)))
       ]),
       _: 3
     }, 8, ["id", "class", "layout", "label", "is-active"]));
   }
-}), Je = { class: "omnipad-axis-bg" }, Xe = { class: "omnipad-axis-content-layer" }, Ge = /* @__PURE__ */ S({
+}), et = { class: "omnipad-axis-bg" }, tt = { class: "omnipad-axis-content-layer" }, ot = /* @__PURE__ */ O({
   __name: "VirtualAxisBase",
   props: {
     layout: {},
@@ -441,51 +473,51 @@ const Be = ["id"], Oe = /* @__PURE__ */ S({
     baseRadius: {}
   },
   setup(e) {
-    const i = e, u = _(() => i.layout ? j(i.layout) : {}), t = q(), n = _(() => {
-      const a = i.vector?.x || 0, y = i.vector?.y || 0, s = i.baseRadius?.x || 0, d = i.baseRadius?.y || 0, b = t ? `${a * 50}cqw` : `${a * s}px`, c = t ? `${y * 50}cqh` : `${y * d}px`, v = t ? "100cqw" : `${s * 2}px`, p = t ? "100cqh" : `${d * 2}px`;
+    const o = e, v = $(() => o.layout ? W(o.layout) : {}), s = J(), n = $(() => {
+      const l = o.vector?.x || 0, g = o.vector?.y || 0, i = o.baseRadius?.x || 0, u = o.baseRadius?.y || 0, a = s ? `${l * 50}cqw` : `${l * i}px`, m = s ? `${g * 50}cqh` : `${g * u}px`, b = s ? "100cqw" : `${i * 2}px`, C = s ? "100cqh" : `${u * 2}px`;
       return {
-        "--omnipad-axis-stick-container-x": b,
-        "--omnipad-axis-stick-container-y": c,
-        "--omnipad-axis-stick-width": v,
-        "--omnipad-axis-stick-height": p,
+        "--omnipad-axis-stick-container-x": a,
+        "--omnipad-axis-stick-container-y": m,
+        "--omnipad-axis-stick-width": b,
+        "--omnipad-axis-stick-height": C,
         // 松手时加一点回弹过渡，活动时取消过渡保证绝对跟手
-        transition: i.isActive ? "none" : "transform 0.1s ease-out"
+        transition: o.isActive ? "none" : "transform 0.1s ease-out"
       };
     });
-    return (a, y) => (R(), A("div", {
-      class: k(["omnipad-axis-base omnipad-prevent", { "is-active": e.isActive }]),
-      style: B(u.value),
+    return (l, g) => (k(), A("div", {
+      class: D(["omnipad-axis-base omnipad-prevent", { "is-active": e.isActive }]),
+      style: V(v.value),
       tabindex: "-1"
     }, [
-      T("div", Je, [
-        h(a.$slots, "base", {
+      I("div", et, [
+        P(l.$slots, "base", {
           isActive: e.isActive,
           vector: e.vector
         }, void 0, !0)
       ]),
-      e.showStick ? (R(), A("div", {
+      e.showStick ? (k(), A("div", {
         key: 0,
         class: "omnipad-axis-stick-container",
-        style: B(n.value)
+        style: V(n.value)
       }, [
-        h(a.$slots, "stick", {
+        P(l.$slots, "stick", {
           isActive: e.isActive,
           vector: e.vector
         }, () => [
-          T("div", {
-            class: k(["omnipad-default-axis-stick", { "is-active": e.isActive }])
+          I("div", {
+            class: D(["omnipad-default-axis-stick", { "is-active": e.isActive }])
           }, null, 2)
         ], !0)
-      ], 4)) : M("", !0),
-      T("div", Xe, [
-        h(a.$slots, "default", {
+      ], 4)) : Z("", !0),
+      I("div", tt, [
+        P(l.$slots, "default", {
           isActive: e.isActive,
           vector: e.vector
         }, void 0, !0)
       ])
     ], 6));
   }
-}), ie = /* @__PURE__ */ O(Ge, [["__scopeId", "data-v-95bb429e"]]), He = { class: "omnipad-dpad-cross-bg" }, et = /* @__PURE__ */ S({
+}), le = /* @__PURE__ */ M(ot, [["__scopeId", "data-v-95bb429e"]]), nt = { class: "omnipad-dpad-cross-bg" }, it = /* @__PURE__ */ O({
   __name: "VirtualDPad",
   props: {
     treeNode: {},
@@ -496,73 +528,71 @@ const Be = ["id"], Oe = /* @__PURE__ */ S({
     showStick: {},
     layout: {}
   },
-  setup(e, { expose: i }) {
-    const u = e, t = {
+  setup(e, { expose: o }) {
+    const v = e, s = {
       showStick: !1,
       threshold: 0.3
-    }, { uid: n, config: a, customClasses: y } = z(
-      D.D_PAD,
-      u,
-      t
-    ), { core: s, state: d, elementRef: b, domEvents: c } = F(
-      () => new ve(n.value, a.value)
-    ), v = q(), p = V({ x: 0, y: 0 }), P = oe(() => {
-      const r = s.value?.rect;
-      r && (p.value = { x: r.width / 2, y: r.height / 2 });
+    }, { uid: n, initialConfig: l, reactiveConfig: g } = Y(
+      T.D_PAD,
+      v,
+      s
+    ), { core: i, state: u, domEvents: a, effectiveConfig: m, effectiveLayout: b, elementRef: C } = z(() => new ye(n.value, l.value, v.treeNode?.type), g), w = J(), R = L({ x: 0, y: 0 }), h = ae(() => {
+      const r = i.value?.rect;
+      r && (R.value = { x: r.width / 2, y: r.height / 2 });
     });
-    v && P();
-    const f = (r) => c.value?.onPointerDown(r), w = (r) => c.value?.onPointerMove(r), C = (r) => c.value?.onPointerUp(r), l = (r) => c.value?.onPointerCancel(r);
-    return i({
+    w && h();
+    const c = (r) => a.value?.onPointerDown(r), f = (r) => a.value?.onPointerMove(r), _ = (r) => a.value?.onPointerUp(r), d = (r) => a.value?.onPointerCancel(r);
+    return o({
       uid: n,
-      onPointerDown: f,
-      onPointerMove: w,
-      onPointerUp: C,
-      onPointerCancel: l,
-      markRectDirty: () => s.value?.markRectDirty()
-    }), (r, U) => (R(), L(ie, {
+      onPointerDown: c,
+      onPointerMove: f,
+      onPointerUp: _,
+      onPointerCancel: d,
+      markRectDirty: () => i.value?.markRectDirty()
+    }), (r, B) => (k(), j(le, {
       ref_key: "elementRef",
-      ref: b,
-      class: k(["omnipad-dpad omnipad-prevent", o(y)]),
-      layout: o(a).layout,
-      "is-active": o(d)?.isActive,
-      vector: o(d)?.vector,
-      "show-stick": o(a).showStick,
-      "base-radius": p.value,
-      onPointerdown: f,
-      onPointermove: w,
-      onPointerup: C,
-      onPointercancel: l,
-      onLostpointercapture: l
+      ref: C,
+      class: D(["omnipad-dpad omnipad-prevent", t(m)?.cssClasses]),
+      layout: t(b),
+      "is-active": t(u)?.isActive,
+      vector: t(u)?.vector,
+      "show-stick": t(m)?.showStick,
+      "base-radius": R.value,
+      onPointerdown: c,
+      onPointermove: f,
+      onPointerup: _,
+      onPointercancel: d,
+      onLostpointercapture: d
     }, {
-      base: $((g) => [
-        h(r.$slots, "base", x(E(g)), () => [
-          T("div", He, [
-            T("div", {
-              class: k(["dpad-arm top", { on: g.vector && g.vector.y < -o(a).threshold }])
+      base: N((y) => [
+        P(r.$slots, "base", S(U(y)), () => [
+          I("div", nt, [
+            I("div", {
+              class: D(["dpad-arm top", { on: y.vector && y.vector.y < -t(m)?.threshold }])
             }, null, 2),
-            T("div", {
-              class: k(["dpad-arm bottom", { on: g.vector && g.vector.y > o(a).threshold }])
+            I("div", {
+              class: D(["dpad-arm bottom", { on: y.vector && y.vector.y > t(m)?.threshold }])
             }, null, 2),
-            T("div", {
-              class: k(["dpad-arm left", { on: g.vector && g.vector.x < -o(a).threshold }])
+            I("div", {
+              class: D(["dpad-arm left", { on: y.vector && y.vector.x < -t(m)?.threshold }])
             }, null, 2),
-            T("div", {
-              class: k(["dpad-arm right", { on: g.vector && g.vector.x > o(a).threshold }])
+            I("div", {
+              class: D(["dpad-arm right", { on: y.vector && y.vector.x > t(m)?.threshold }])
             }, null, 2),
-            U[0] || (U[0] = T("div", { class: "dpad-center" }, null, -1))
+            B[0] || (B[0] = I("div", { class: "dpad-center" }, null, -1))
           ])
         ], !0)
       ]),
-      stick: $((g) => [
-        h(r.$slots, "stick", x(E(g)), void 0, !0)
+      stick: N((y) => [
+        P(r.$slots, "stick", S(U(y)), void 0, !0)
       ]),
-      default: $((g) => [
-        h(r.$slots, "default", x(E(g)), void 0, !0)
+      default: N((y) => [
+        P(r.$slots, "default", S(U(y)), void 0, !0)
       ]),
       _: 3
     }, 8, ["class", "layout", "is-active", "vector", "show-stick", "base-radius"]));
   }
-}), tt = /* @__PURE__ */ O(et, [["__scopeId", "data-v-e1ecfcd0"]]), ot = /* @__PURE__ */ S({
+}), st = /* @__PURE__ */ M(it, [["__scopeId", "data-v-248b6118"]]), at = /* @__PURE__ */ O({
   __name: "VirtualTrackpad",
   props: {
     treeNode: {},
@@ -573,44 +603,46 @@ const Be = ["id"], Oe = /* @__PURE__ */ S({
     mapping: {},
     layout: {}
   },
-  setup(e, { expose: i }) {
-    const u = e, { uid: t, config: n, customClasses: a } = z(D.TRACKPAD, u, {
-      label: "TRACKPAD",
-      sensitivity: 1
-    }), { core: y, state: s, elementRef: d, domEvents: b } = F(
-      () => new pe(t.value, n.value)
-    ), c = (f) => b.value?.onPointerDown(f), v = (f) => b.value?.onPointerMove(f), p = (f) => b.value?.onPointerUp(f), P = (f) => b.value?.onPointerCancel(f);
-    return i({
-      uid: t,
-      onPointerDown: c,
-      onPointerMove: v,
-      onPointerUp: p,
-      onPointerCancel: P,
-      markRectDirty: () => y.value?.markRectDirty
-    }), (f, w) => (R(), L(G, {
-      id: o(t),
+  setup(e, { expose: o }) {
+    const v = e, { uid: s, initialConfig: n, reactiveConfig: l } = Y(
+      T.TRACKPAD,
+      v,
+      {
+        label: "TRACKPAD",
+        sensitivity: 1
+      }
+    ), { core: g, state: i, domEvents: u, effectiveConfig: a, effectiveLayout: m, elementRef: b } = z(() => new ge(s.value, n.value, v.treeNode?.type), l), C = (c) => u.value?.onPointerDown(c), w = (c) => u.value?.onPointerMove(c), R = (c) => u.value?.onPointerUp(c), h = (c) => u.value?.onPointerCancel(c);
+    return o({
+      uid: s,
+      onPointerDown: C,
+      onPointerMove: w,
+      onPointerUp: R,
+      onPointerCancel: h,
+      markRectDirty: () => g.value?.markRectDirty
+    }), (c, f) => (k(), j(te, {
+      id: t(s),
       ref_key: "elementRef",
-      ref: d,
-      class: k(["omnipad-trackpad omnipad-prevent", o(a)]),
-      layout: o(n).layout,
-      label: o(n).label,
-      "is-active": o(s)?.isPressed,
-      onPointerdown: c,
-      onPointermove: v,
-      onPointerup: p,
-      onPointercancel: P,
-      onLostpointercapture: P
+      ref: b,
+      class: D(["omnipad-trackpad omnipad-prevent", t(a)?.cssClasses]),
+      layout: t(m),
+      label: t(a)?.label,
+      "is-active": t(i)?.isPressed,
+      onPointerdown: C,
+      onPointermove: w,
+      onPointerup: R,
+      onPointercancel: h,
+      onLostpointercapture: h
     }, {
-      base: $((C) => [
-        h(f.$slots, "base", x(E(C)), void 0, !0)
+      base: N((_) => [
+        P(c.$slots, "base", S(U(_)), void 0, !0)
       ]),
-      default: $((C) => [
-        h(f.$slots, "default", x(E(C)), void 0, !0)
+      default: N((_) => [
+        P(c.$slots, "default", S(U(_)), void 0, !0)
       ]),
       _: 3
     }, 8, ["id", "class", "layout", "label", "is-active"]));
   }
-}), nt = /* @__PURE__ */ O(ot, [["__scopeId", "data-v-5cf9baf9"]]), st = /* @__PURE__ */ S({
+}), rt = /* @__PURE__ */ M(at, [["__scopeId", "data-v-6b706af3"]]), ct = /* @__PURE__ */ O({
   __name: "VirtualJoystick",
   props: {
     treeNode: {},
@@ -623,88 +655,86 @@ const Be = ["id"], Oe = /* @__PURE__ */ S({
     mapping: {},
     layout: {}
   },
-  setup(e, { expose: i }) {
-    const u = e, t = {
+  setup(e, { expose: o }) {
+    const v = e, s = {
       label: "PUSH",
       threshold: 0.2,
       cursorMode: !1,
       cursorSensitivity: 1
-    }, { uid: n, config: a, customClasses: y } = z(
-      D.JOYSTICK,
-      u,
-      t
-    ), { core: s, state: d, elementRef: b, domEvents: c } = F(
-      () => new me(n.value, a.value)
-    ), v = q(), p = V({ x: 0, y: 0 }), P = oe(() => {
-      const r = s.value?.rect;
-      r && (p.value = { x: r.width / 2, y: r.height / 2 });
+    }, { uid: n, initialConfig: l, reactiveConfig: g } = Y(
+      T.JOYSTICK,
+      v,
+      s
+    ), { core: i, state: u, domEvents: a, effectiveConfig: m, effectiveLayout: b, elementRef: C } = z(() => new Pe(n.value, l.value, v.treeNode?.type), g), w = J(), R = L({ x: 0, y: 0 }), h = ae(() => {
+      const r = i.value?.rect;
+      r && (R.value = { x: r.width / 2, y: r.height / 2 });
     });
-    v && P();
-    const f = (r) => c.value?.onPointerDown(r), w = (r) => c.value?.onPointerMove(r), C = (r) => c.value?.onPointerUp(r), l = (r) => c.value?.onPointerCancel(r);
-    return i({
+    w && h();
+    const c = (r) => a.value?.onPointerDown(r), f = (r) => a.value?.onPointerMove(r), _ = (r) => a.value?.onPointerUp(r), d = (r) => a.value?.onPointerCancel(r);
+    return o({
       uid: n,
-      onPointerDown: f,
-      onPointerMove: w,
-      onPointerUp: C,
-      onPointerCancel: l,
-      markRectDirty: () => s.value?.markRectDirty
-    }), (r, U) => (R(), L(ie, {
+      onPointerDown: c,
+      onPointerMove: f,
+      onPointerUp: _,
+      onPointerCancel: d,
+      markRectDirty: () => i.value?.markRectDirty
+    }), (r, B) => (k(), j(le, {
       ref_key: "elementRef",
-      ref: b,
-      class: k(["omnipad-joystick omnipad-prevent", o(y)]),
-      layout: o(a).layout,
-      "is-active": o(d)?.isActive,
-      vector: o(d)?.vector,
+      ref: C,
+      class: D(["omnipad-joystick omnipad-prevent", t(m)?.cssClasses]),
+      layout: t(b),
+      "is-active": t(u)?.isActive,
+      vector: t(u)?.vector,
       "show-stick": "",
-      "base-radius": p.value,
-      onPointerdown: f,
-      onPointermove: w,
-      onPointerup: C,
-      onPointercancel: l,
-      onLostpointercapture: l
+      "base-radius": R.value,
+      onPointerdown: c,
+      onPointermove: f,
+      onPointerup: _,
+      onPointercancel: d,
+      onLostpointercapture: d
     }, {
-      base: $((g) => [
-        h(r.$slots, "base", x(E(g)), void 0, !0)
+      base: N((y) => [
+        P(r.$slots, "base", S(U(y)), void 0, !0)
       ]),
-      stick: $(() => [
-        J(G, {
+      stick: N(() => [
+        H(te, {
           layout: { height: "100%", width: "100%" },
-          "is-active": o(d)?.isPressed,
-          label: o(a).label
+          "is-active": t(u)?.isPressed,
+          label: t(m)?.label
         }, {
-          base: $((g) => [
-            h(r.$slots, "stick-base", x(E(g)), void 0, !0)
+          base: N((y) => [
+            P(r.$slots, "stick-base", S(U(y)), void 0, !0)
           ]),
-          default: $((g) => [
-            h(r.$slots, "stick", x(E(g)), void 0, !0)
+          default: N((y) => [
+            P(r.$slots, "stick", S(U(y)), void 0, !0)
           ]),
           _: 3
         }, 8, ["is-active", "label"])
       ]),
-      default: $((g) => [
-        h(r.$slots, "default", x(E(g)), void 0, !0)
+      default: N((y) => [
+        P(r.$slots, "default", S(U(y)), void 0, !0)
       ]),
       _: 3
     }, 8, ["class", "layout", "is-active", "vector", "base-radius"]));
   }
-}), it = /* @__PURE__ */ O(st, [["__scopeId", "data-v-2255ec27"]]);
-Z(D.BUTTON, We);
-Z(D.INPUT_ZONE, Ve);
-Z(D.ROOT_LAYER, Ze);
-Z(D.TARGET_ZONE, Ke);
-Z(D.TRACKPAD, nt);
-Z(D.D_PAD, tt);
-Z(D.JOYSTICK, it);
+}), lt = /* @__PURE__ */ M(ct, [["__scopeId", "data-v-b10666e4"]]);
+F(T.BUTTON, He);
+F(T.INPUT_ZONE, je);
+F(T.ROOT_LAYER, Ye);
+F(T.TARGET_ZONE, We);
+F(T.TRACKPAD, rt);
+F(T.D_PAD, st);
+F(T.JOYSTICK, lt);
 export {
-  Ve as InputZone,
-  Ze as RootLayer,
-  Ke as TargetZone,
-  We as VirtualButton,
-  tt as VirtualDPad,
-  it as VirtualJoystick,
-  nt as VirtualTrackpad,
-  ne as getComponent,
-  te as getComponentSafe,
-  lt as hasRegisteredComponent,
-  Z as registerComponent
+  je as InputZone,
+  Ye as RootLayer,
+  We as TargetZone,
+  He as VirtualButton,
+  st as VirtualDPad,
+  lt as VirtualJoystick,
+  rt as VirtualTrackpad,
+  re as getComponent,
+  ie as getComponentSafe,
+  ft as hasRegisteredComponent,
+  F as registerComponent
 };