@omnipad/vue 0.5.0 → 0.6.1

package/dist/omnipad-vue.mjs

@@ -1,164 +1,226 @@
-import { Registry as pe, CONTEXT as se, CMP_TYPES as T, InputZoneCore as ye, RootLayerCore as me, TargetZoneCore as ge, ButtonCore as Pe, DPadCore as be, TrackpadCore as he, JoystickCore as Ce, setGlobalSignalHandler as ke, ACTION_TYPES as ae } from "@omnipad/core";
-import { createWebStickyProvider as Re, ElementObserver as j, WindowManager as _e, createPointerBridge as we, supportsContainerQueries as Q, reclaimFocusAtPos as De, dispatchPointerEventAtPos as $e, dispatchKeyboardEvent as le } from "@omnipad/core/dom";
-import { defineComponent as B, h as Ie, shallowRef as Ne, ref as M, watch as te, onMounted as Te, onUnmounted as Ee, computed as D, readonly as ee, openBlock as R, createElementBlock as S, Fragment as Se, renderList as Ae, createBlock as Z, resolveDynamicComponent as oe, renderSlot as b, inject as xe, provide as Ue, useSlots as Le, nextTick as Be, normalizeStyle as O, normalizeClass as $, unref as o, createVNode as X, withCtx as I, createElementVNode as E, createCommentVNode as Y, Transition as Oe, toDisplayString as Ve, normalizeProps as U, guardReactiveProps as L, watchEffect as ue } from "vue";
-import { getObjectDiff as Me, createCachedProvider as Ye, resolveStickyLayout as Ze, generateUID as Ke, getBusinessProps as re, resolveLayoutStyle as J, remap as H } from "@omnipad/core/utils";
-const q = {};
-function K(e, n) {
-  q[e] = n;
+import { CMP_TYPES as b, RootLayerCore as ve, TargetZoneCore as fe, InputZoneCore as pe, TrackpadCore as me, DPadCore as ye, JoystickCore as Pe, ButtonCore as ge, validateWidgetNode as be, CONTEXT as q, getOverrideProps as ee, mergeWidgetConfig as Ce, Registry as he, bindEntityDelegates as _e, StickyController as ke, setupSpatialLogic as Re, filterNotDynamicChildren as De, resolveDynamicWidget as we, setGlobalSignalHandler as Se, ACTION_TYPES as te } from "@omnipad/core";
+import { WindowManager as Te, createPointerBridge as Ee, ElementObserver as ie, createWebStickyProvider as Ne, flattenToHostLayout as Ae, supportsContainerQueries as Y, reclaimFocusAtPos as Ie, dispatchPointerEventAtPos as $e, dispatchKeyboardEvent as se } from "@omnipad/core/dom";
+import { defineComponent as I, h as Oe, computed as R, openBlock as C, createElementBlock as E, Fragment as Ue, renderList as xe, createBlock as z, resolveDynamicComponent as j, renderSlot as g, inject as Le, ref as L, provide as Be, watch as J, onMounted as re, onUnmounted as Q, readonly as oe, shallowRef as ze, useSlots as Me, nextTick as Ve, normalizeStyle as O, normalizeClass as w, unref as i, createVNode as F, withCtx as S, createElementVNode as T, createCommentVNode as B, Transition as Ke, toDisplayString as We, normalizeProps as N, guardReactiveProps as A, watchEffect as ae } from "vue";
+import { generateUID as Ye, getObjectDiff as Ze, distillRect as Fe, resolveLayoutStyle as Z, projectPercentToBox as ce, projectVectorToBox as je } from "@omnipad/core/utils";
+const W = {};
+function M(e, o) {
+  W[e] = o;
 }
-function de(e) {
-  const n = q[e];
-  return n || B({
-    render: () => Ie("div", { style: "color:red" }, `[Unknown: ${e}]`)
+function le(e) {
+  const o = W[e];
+  return o || I({
+    render: () => Oe("div", { style: "color:red" }, `[Unknown: ${e}]`)
   });
 }
-function ce(e) {
-  return !e || !q[e] ? null : q[e];
+function ne(e) {
+  return !e || !W[e] ? null : W[e];
 }
-function Ct(e) {
-  return e ? !!q[e] : !1;
+function It(e) {
+  return e ? !!W[e] : !1;
 }
-function F(e, n, f = {}, c) {
-  const t = e(), l = Ne(), P = M(), i = M(), u = M(null);
-  let s;
-  const p = M(0), h = () => {
-    p.value = p.value % 65535 + 1;
-  };
-  te(
-    // 1. 精确定义依赖源：只有这个字符串变了，才触发回调
-    () => i.value?.layout?.stickySelector,
-    (a, d, g) => {
-      if (!a) {
-        s = null, h();
-        return;
-      }
-      let v = !1;
-      if (s ? v = s.updateSelector(a) : (s = Re(a), v = !0), !v) return;
-      const r = s.getTarget();
-      if (!r) return;
-      const N = t.uid + "-sticky";
-      j.getInstance().observeResize(N, r, () => {
-        s?.markDirty(), t.markRectDirty();
-      }), j.getInstance().observeIntersect(N, r, (y) => {
-        y || t.reset();
-      }), h(), g(() => {
-        j.getInstance().disconnect(N);
-      });
-    },
-    { immediate: !0 }
-    // 必须开启，以处理初始配置即存在吸附的情况
-  );
-  let _ = { ...n.value };
-  te(
-    n,
-    (a) => {
-      if (!l.value) return;
-      const d = Me(_, a);
-      Object.keys(d).length > 0 && l.value.updateConfig(d), _ = { ...n.value };
-    },
-    { deep: !0 }
-  );
-  const w = (a) => {
-    l.value && "bindDelegate" in l.value && Object.entries(a).forEach(([d, g]) => {
-      l.value.bindDelegate(d, g);
-    });
-  };
-  Te(() => {
-    l.value = t, pe.getInstance().register(t), "subscribeState" in t && t.subscribeState((d) => P.value = d), "subscribeConfig" in t && t.subscribeConfig((d) => i.value = d), c && w(c);
-    let a = null;
-    if (u.value && (u.value instanceof Element ? a = u.value : u.value.$el instanceof Element && (a = u.value.$el)), a instanceof Element) {
-      const d = j.getInstance();
-      if ("bindRectProvider" in t) {
-        const g = Ye(() => a.getBoundingClientRect());
-        t.bindRectProvider(g.get, () => {
-          g.markDirty(), s && (s.markDirty(), h());
-        }), d.observeResize(t.uid, a, () => {
-          t.markRectDirty();
-        });
-      }
-      d.observeIntersect(t.uid, a, (g) => {
-        g || t.reset();
-      });
-    }
-    _e.getInstance().init();
-  }), Ee(() => {
-    j.getInstance().disconnect(t.uid), j.getInstance().disconnect(t.uid + "-sticky"), l.value && l.value.destroy();
-  });
-  const k = "onPointerDown" in t ? we(t, f) : {}, C = D(() => {
-    const a = i.value?.layout;
-    if (!s || !p.value) return a;
-    const d = s.getRect();
-    return d ? Ze(a, d) : a;
-  });
-  return {
-    core: ee(l),
-    state: ee(P),
-    domEvents: k,
-    effectiveConfig: ee(i),
-    effectiveLayout: C,
-    elementRef: u,
-    bindDelegates: w
-  };
-}
-const Fe = { class: "omnipad-virtual-layer-base omnipad-prevent" }, ze = /* @__PURE__ */ B({
+const Je = { class: "omnipad-virtual-layer-base omnipad-prevent" }, Qe = /* @__PURE__ */ I({
   __name: "VirtualLayerBase",
   props: {
     nodes: {}
   },
   setup(e) {
-    const n = e, f = D(() => (n.nodes || []).map((c) => {
-      let t = ce(c.type);
-      return !t && c.config?.baseType && (t = ce(c.config.baseType)), t || (t = de(c.type)), {
-        node: c,
-        component: t
+    const o = e, u = R(() => (o.nodes || []).map((s) => {
+      let n = ne(s.type);
+      return !n && s.config?.baseType && (n = ne(s.config.baseType)), n || (n = le(s.type)), {
+        node: s,
+        component: n
       };
     }));
-    return (c, t) => (R(), S("div", Fe, [
-      (R(!0), S(Se, null, Ae(f.value, (l) => (R(), Z(oe(l.component), {
-        key: l.node.uid,
-        "tree-node": l.node
+    return (s, n) => (C(), E("div", Je, [
+      (C(!0), E(Ue, null, xe(u.value, (t) => (C(), z(j(t.component), {
+        key: t.node.uid,
+        "tree-node": t.node
       }, null, 8, ["tree-node"]))), 128)),
-      b(c.$slots, "default", {}, void 0, !0)
+      g(s.$slots, "default", {}, void 0, !0)
     ]));
   }
-}), V = (e, n) => {
-  const f = e.__vccOpts || e;
-  for (const [c, t] of n)
-    f[c] = t;
-  return f;
-}, ve = /* @__PURE__ */ V(ze, [["__scopeId", "data-v-a172c7c0"]]), We = ["treeNode", "widgetId", "parentId"];
-function z(e, n, f = {}, c = []) {
-  const t = n.treeNode, l = t && t.config?.baseType === e || t?.type === e ? t : void 0;
-  t && !l && console.warn(
-    `[OmniPad-Validation] Type mismatch! Component expected "${e}", but received "${t.type}". Config ignored.`
-  );
-  const P = xe(se.PARENT_ID_KEY, M(void 0)), i = D(() => n.parentId || l?.config?.parentId || P.value), u = D(() => n.widgetId || l?.uid || Ke(e));
-  Ue(se.PARENT_ID_KEY, u);
-  const s = /* @__PURE__ */ new Set([...We, ...c]), p = l?.config || {}, h = re(n, s), _ = D(() => ({
-    ...f,
-    ...p,
-    ...h,
-    id: u.value,
-    baseType: e,
-    parentId: i.value,
-    // 特殊处理 Layout：深度合并，确保即便只传了 { width: 100 } 也不丢失原来的 left/top
-    layout: {
-      ...f.layout || {},
-      ...p.layout || {},
-      ...h.layout || {}
-    }
-  })), w = D(() => {
-    const k = re(n, s);
+}), U = (e, o) => {
+  const u = e.__vccOpts || e;
+  for (const [s, n] of o)
+    u[s] = n;
+  return u;
+}, ue = /* @__PURE__ */ U(Qe, [["__scopeId", "data-v-a172c7c0"]]), Ge = {
+  [b.BUTTON]: ge,
+  [b.JOYSTICK]: Pe,
+  [b.D_PAD]: ye,
+  [b.TRACKPAD]: me,
+  [b.INPUT_ZONE]: pe,
+  [b.TARGET_ZONE]: fe,
+  [b.ROOT_LAYER]: ve
+};
+function He(e) {
+  const o = Ge[e];
+  if (!o)
+    throw new Error(`[OmniPad-Vue] No core logic defined for entity type: "${e}"`);
+  return o;
+}
+const Xe = Object.freeze(["treeNode", "widgetId", "parentId"]);
+function qe(e, o, u = {}, s = []) {
+  const n = be(o.treeNode, e), t = Le(q.PARENT_ID_KEY, L(void 0)), a = R(() => o.parentId || n?.config?.parentId || t.value), r = R(() => o.widgetId || n?.uid || Ye(e));
+  Be(q.PARENT_ID_KEY, r);
+  const d = /* @__PURE__ */ new Set([...Xe, ...s]), m = n?.config || {}, k = ee(o, d), h = R(() => Ce(
+    e,
+    r.value,
+    a.value,
+    u,
+    m,
+    k
+  )), f = R(() => {
+    const p = ee(o, d);
     return {
-      ...k,
-      parentId: i.value,
-      layout: k.layout || void 0
+      ...p,
+      parentId: a.value,
+      layout: p.layout || void 0
       // 只有当传入了新的 layout 时才包裹
     };
   });
-  return { uid: u, initialConfig: _, reactiveConfig: w };
+  return { uid: r, initialConfig: h, reactiveConfig: f };
+}
+function et(e, o, u = {}, s) {
+  const n = e(), t = R(() => n), a = L(), r = L(), d = L(null);
+  let m = { ...o.value };
+  J(
+    o,
+    (f) => {
+      if (!t.value) return;
+      const p = Ze(m, f);
+      Object.keys(p).length > 0 && t.value.updateConfig(p), m = { ...o.value };
+    },
+    { deep: !0 }
+  );
+  const k = (f) => {
+    _e(t.value, f);
+  };
+  re(() => {
+    he.getInstance().register(n), "subscribeState" in n && n.subscribeState(
+      (f) => a.value = f
+    ), "subscribeConfig" in n && n.subscribeConfig(
+      (f) => r.value = f
+    ), s && k(s), Te.getInstance().init();
+  }), Q(() => {
+    t.value && t.value.destroy();
+  });
+  const h = "onPointerDown" in n ? Ee(n, u) : {};
+  return {
+    core: t,
+    state: oe(a),
+    domEvents: h,
+    effectiveConfig: oe(r),
+    elementRef: d,
+    bindDelegates: k
+  };
+}
+function tt(e, o, u) {
+  const s = ze(null);
+  let n = null;
+  return J(
+    () => o.value?.layout?.stickySelector,
+    (t, a, r) => {
+      if (!e.value) return;
+      n || (n = new ke(
+        ie.getInstance(),
+        e.value,
+        u
+      ));
+      const d = n.handleSelectorChange(
+        t,
+        s.value,
+        (m) => Ne(m)
+      );
+      s.value = d.provider, r(() => {
+        n?.onCleanUp();
+      });
+    },
+    { immediate: !0 }
+    // 立即处理初始配置 / Handle initial config immediately
+  ), Q(() => {
+    n?.onCleanUp(), s.value = null;
+  }), {
+    /**
+     * 当前正在追踪的物理目标提供者
+     * 用于外部调用 .getRect() 获取实时坐标
+     */
+    stickyProvider: s
+  };
+}
+function ot() {
+  const e = L(0);
+  return {
+    /** Call this inside computed to track dependency */
+    depend: () => e.value,
+    /** Trigger the update */
+    notify: () => {
+      e.value = (e.value + 1) % 65535;
+    }
+  };
+}
+function nt(e, o, u) {
+  let s = null;
+  const n = (t) => t instanceof Element ? t : t?.$el instanceof Element ? t.$el : null;
+  re(() => {
+    const t = e.value, a = n(o.value);
+    t && a && (s = Re(
+      t,
+      a,
+      ie.getInstance(),
+      (r) => Fe(r.getBoundingClientRect()),
+      u?.value
+    ));
+  }), Q(() => {
+    s && s();
+  });
 }
-const je = ["id"], qe = /* @__PURE__ */ B({
+function V(e, o, u = {}) {
+  const { uid: s, initialConfig: n, reactiveConfig: t } = qe(
+    e,
+    o,
+    u.defaultProps,
+    u.extraSkipProps
+  ), { core: a, state: r, effectiveConfig: d, elementRef: m, domEvents: k, bindDelegates: h } = et(
+    () => {
+      const c = He(e);
+      return new c(s.value, n.value, o.treeNode?.type);
+    },
+    t,
+    u.domEventOptions,
+    u.initialDelegates
+  ), f = ot(), { stickyProvider: p } = tt(
+    a,
+    d,
+    f.notify
+  );
+  nt(a, m, p);
+  const _ = R(() => {
+    f.depend();
+    const c = d.value?.layout;
+    if (p.value) {
+      const D = p.value.getRect();
+      if (D)
+        return Ae(c, D);
+    }
+    return c;
+  });
+  return {
+    uid: s,
+    core: a,
+    state: r,
+    effectiveConfig: d,
+    effectiveLayout: _,
+    // 给 UI 组件绑定样式用
+    elementRef: m,
+    // 给 UI 组件绑定 ref 用
+    domEvents: k,
+    // 给 UI 组件绑定事件用
+    bindDelegates: h
+    // 运行时注入方法
+  };
+}
+const it = ["id"], st = /* @__PURE__ */ I({
   __name: "InputZone",
   props: {
     treeNode: {},
@@ -167,111 +229,97 @@ const je = ["id"], qe = /* @__PURE__ */ B({
     preventFocusLoss: {}
   },
   setup(e) {
-    const n = e, f = Le(), c = M(null), { uid: t, initialConfig: l, reactiveConfig: P } = z(
-      T.INPUT_ZONE,
-      n
-    ), { core: i, state: u, domEvents: s, effectiveConfig: p, effectiveLayout: h, elementRef: _, bindDelegates: w } = F(
-      () => new ye(t.value, l.value, n.treeNode?.type),
-      P,
-      {
+    const o = e, u = Me(), s = L(null), { uid: n, core: t, state: a, domEvents: r, effectiveConfig: d, effectiveLayout: m, elementRef: k, bindDelegates: h } = V(b.INPUT_ZONE, o, {
+      domEventOptions: {
         requireDirectHit: !0
       }
-    ), k = D(() => {
-      const m = n.treeNode?.config?.dynamicWidgetId;
-      return n.treeNode?.children?.filter((A) => A.uid !== m) || [];
-    }), C = D(() => {
-      const A = (f.dynamicWidget?.() || []).filter((G) => !(G.type === Comment || G.type === Text)), x = n.treeNode?.children?.find(
-        (G) => G.uid === n.treeNode?.config?.dynamicWidgetId
-      ), W = A.length > 0;
-      return A.length > 1 && console.error(
-        `[OmniPad-Validation] InputZone ${t} has multiple dynamic widgets in slot. Only the first one will be activated.`
-      ), W && x && console.warn(
-        `[OmniPad-Validation] InputZone ${t} has both Slot and Config dynamic widgets. Config ignored.`
-      ), {
-        nodeToRender: W ? A[0] : x || null,
-        isFromSlot: W
-      };
-    }), a = D(() => {
-      const m = C.value.nodeToRender;
-      return de(m.config?.baseType || m.type);
+    }), f = R(() => De(
+      o.treeNode?.children,
+      o.treeNode?.config?.dynamicWidgetId
+    )), p = R(() => {
+      const K = (u.dynamicWidget?.() || []).filter(($) => !($.type === Comment || $.type === Text));
+      return we(
+        K,
+        o.treeNode?.children,
+        o.treeNode?.config?.dynamicWidgetId
+      );
+    }), _ = R(() => {
+      const P = p.value.nodeToRender;
+      return le(P.config?.baseType || P.type);
     });
-    te(
-      c,
-      (m) => {
-        Be(() => {
-          m && m?.uid && (i.value?.updateConfig({
-            dynamicWidgetId: m.uid
-          }), w({
-            dynamicWidgetPointerDown: (A) => {
-              m.markRectDirty?.(), m.onPointerDown?.(A);
+    J(
+      s,
+      (P) => {
+        Ve(() => {
+          P && P?.uid && (t.value?.updateConfig({
+            dynamicWidgetId: P.uid
+          }), h({
+            dynamicWidgetPointerDown: (K) => {
+              P.markRectDirty?.(), P.onPointerDown?.(K);
             },
-            dynamicWidgetPointerMove: m.onPointerMove,
-            dynamicWidgetPointerUp: m.onPointerUp,
-            dynamicWidgetPointerCancel: m.onPointerCancel
+            dynamicWidgetPointerMove: P.onPointerMove,
+            dynamicWidgetPointerUp: P.onPointerUp,
+            dynamicWidgetPointerCancel: P.onPointerCancel
           }));
         });
       },
       { immediate: !0 }
     );
-    const d = D(() => h.value ? J(h.value) : {}), g = Q(), v = D(() => {
-      if (!u.value) return { display: "none" };
-      if (!u.value?.isDynamicActive) return { visibility: "hidden", opacity: 0 };
-      let m, A;
-      const x = u?.value?.dynamicPosition;
-      if (g)
-        m = `${x.x}cqw`, A = `${x.y}cqh`;
-      else {
-        const W = i?.value?.rect;
-        m = `${H(x?.x || 0, 0, 100, 0, W?.width || 0)}px`, A = `${H(x?.y || 0, 0, 100, 0, W?.height || 0)}px`;
-      }
+    const c = R(() => m.value ? Z(m.value) : {}), D = Y(), v = R(() => {
+      if (!a.value) return { display: "none" };
+      if (!a.value?.isDynamicActive) return { visibility: "hidden", opacity: 0 };
+      const P = a?.value?.dynamicPosition, $ = ce(P, () => {
+        const X = t?.value?.rect;
+        return { x: X?.width || 0, y: X?.height || 0 };
+      }, D);
       return {
         zIndex: 100,
-        "--dynamic-widget-mount-x": m,
-        "--dynamic-widget-mount-y": A,
+        "--dynamic-widget-mount-x": $.x,
+        "--dynamic-widget-mount-y": $.y,
         visibility: "visible",
         opacity: 1,
         pointerEvents: "auto"
       };
-    }), r = (m) => s?.onPointerDown?.(m), N = (m) => s?.onPointerMove?.(m), y = (m) => s?.onPointerUp?.(m), ie = (m) => s?.onPointerCancel?.(m);
-    return (m, A) => (R(), S("div", {
-      id: o(t),
+    }), l = (P) => r?.onPointerDown?.(P), x = (P) => r?.onPointerMove?.(P), y = (P) => r?.onPointerUp?.(P), H = (P) => r?.onPointerCancel?.(P);
+    return (P, K) => (C(), E("div", {
+      id: i(n),
       ref_key: "elementRef",
-      ref: _,
-      class: $(["omnipad-input-zone omnipad-prevent", o(p)?.cssClass]),
-      style: O(d.value)
+      ref: k,
+      class: w(["omnipad-input-zone omnipad-prevent", i(d)?.cssClass]),
+      style: O(c.value)
     }, [
-      X(ve, { nodes: k.value }, {
-        default: I(() => [
-          b(m.$slots, "default", {}, void 0, !0)
+      F(ue, { nodes: f.value }, {
+        default: S(() => [
+          g(P.$slots, "default", {}, void 0, !0)
         ]),
         _: 3
       }, 8, ["nodes"]),
-      C.value.nodeToRender || o(i)?.isInterceptorRequired ? (R(), S("div", {
+      p.value.nodeToRender || i(t)?.isInterceptorRequired ? (C(), E("div", {
         key: 0,
         class: "omnipad-input-zone-trigger omnipad-prevent",
-        onPointerdown: r,
-        onPointermove: N,
+        onPointerdown: l,
+        onPointermove: x,
         onPointerup: y,
-        onPointercancel: ie,
-        onLostpointercapture: ie
+        onPointercancel: H,
+        onLostpointercapture: H
       }, [
-        E("div", {
+        T("div", {
           class: "dynamic-widget-mount",
           style: O(v.value)
         }, [
-          C.value.isFromSlot ? (R(), Z(oe(C.value.nodeToRender), {
+          p.value.isFromSlot ? (C(), z(j(p.value.nodeToRender), {
             key: 0,
-            ref: (x) => c.value = x
-          }, null, 512)) : C.value.nodeToRender ? (R(), Z(oe(a.value), {
+            ref: ($) => s.value = $
+          }, null, 512)) : p.value.nodeToRender ? (C(), z(j(_.value), {
             key: 1,
-            ref: (x) => c.value = x,
-            "tree-node": C.value.nodeToRender
-          }, null, 8, ["tree-node"])) : Y("", !0)
+            ref: ($) => s.value = $,
+            "tree-node": p.value.nodeToRender
+          }, null, 8, ["tree-node"])) : B("", !0)
         ], 4)
-      ], 32)) : Y("", !0)
-    ], 14, je));
+      ], 32)) : B("", !0)
+    ], 14, it));
   }
-}), Qe = /* @__PURE__ */ V(qe, [["__scopeId", "data-v-2f22290e"]]), Je = ["id"], Ge = /* @__PURE__ */ B({
+}), rt = /* @__PURE__ */ U(st, [["__scopeId", "data-v-6543281e"]]), at = ["id"], ct = /* @__PURE__ */ I({
   __name: "RootLayer",
   props: {
     treeNode: {},
@@ -279,138 +327,122 @@ const je = ["id"], qe = /* @__PURE__ */ B({
     layout: {}
   },
   setup(e) {
-    const n = e, { uid: f, initialConfig: c, reactiveConfig: t } = z(
-      T.ROOT_LAYER,
-      n
-    ), { effectiveConfig: l, effectiveLayout: P, elementRef: i } = F(
-      () => new me(f.value, c.value, n.treeNode?.type),
-      t
-    ), u = D(() => P.value ? J(P.value) : {});
-    return (s, p) => (R(), S("div", {
-      id: o(f),
+    const o = e, { uid: u, effectiveConfig: s, effectiveLayout: n, elementRef: t } = V(b.ROOT_LAYER, o), a = R(() => n.value ? Z(n.value) : {});
+    return (r, d) => (C(), E("div", {
+      id: i(u),
       ref_key: "elementRef",
-      ref: i,
-      class: $(["omnipad-root-layer omnipad-prevent", o(l)?.cssClass]),
-      style: O(u.value)
+      ref: t,
+      class: w(["omnipad-root-layer omnipad-prevent", i(s)?.cssClass]),
+      style: O(a.value)
     }, [
-      X(ve, {
+      F(ue, {
         nodes: e.treeNode?.children || []
       }, {
-        default: I(() => [
-          b(s.$slots, "default", {}, void 0, !0)
+        default: S(() => [
+          g(r.$slots, "default", {}, void 0, !0)
         ]),
         _: 3
       }, 8, ["nodes"])
-    ], 14, Je));
+    ], 14, at));
   }
-}), He = /* @__PURE__ */ V(Ge, [["__scopeId", "data-v-ad8f02d4"]]), Xe = ["id"], et = {
+}), lt = /* @__PURE__ */ U(ct, [["__scopeId", "data-v-99206012"]]), ut = ["id"], dt = {
   key: 0,
   class: "omnipad-default-focus-border-feedback"
-}, tt = /* @__PURE__ */ B({
+}, vt = /* @__PURE__ */ I({
   __name: "TargetZone",
   props: {
     treeNode: {},
     widgetId: {},
-    cursorEnabled: { type: Boolean },
+    cursorEnabled: {},
     cursorAutoDelay: {},
     layout: {}
   },
   setup(e) {
-    const n = e, f = {
+    const o = e, u = {
       cursorAutoDelay: 2500
-    }, { uid: c, initialConfig: t, reactiveConfig: l } = z(
-      T.TARGET_ZONE,
-      n,
-      f
-    ), { core: P, state: i, domEvents: u, effectiveConfig: s, effectiveLayout: p, elementRef: h } = F(
-      () => new ge(c.value, t.value, n.treeNode?.type),
-      l,
-      {},
-      {
-        dispatchKeyboardEvent: le,
+    }, { uid: s, core: n, state: t, domEvents: a, effectiveConfig: r, effectiveLayout: d, elementRef: m } = V(b.TARGET_ZONE, o, {
+      defaultProps: u,
+      initialDelegates: {
+        dispatchKeyboardEvent: se,
         dispatchPointerEventAtPos: $e,
-        reclaimFocusAtPos: De
-      }
-    ), _ = D(() => p.value ? J(p.value) : {}), w = Q(), k = D(() => {
-      if (!i.value) return { display: "none" };
-      let v, r;
-      const N = i?.value?.position;
-      if (w)
-        v = `${N.x}cqw`, r = `${N.y}cqh`;
-      else {
-        const y = P?.value?.rect;
-        v = `${H(N?.x || 0, 0, 100, 0, y?.width || 0)}px`, r = `${H(N?.y || 0, 0, 100, 0, y?.height || 0)}px`;
+        reclaimFocusAtPos: Ie
       }
+    }), k = R(() => d.value ? Z(d.value) : {}), h = Y(), f = R(() => {
+      if (!t.value) return { display: "none" };
+      const v = t?.value?.position, x = ce(v, () => {
+        const y = n?.value?.rect;
+        return { x: y?.width || 0, y: y?.height || 0 };
+      }, h);
       return {
-        "--omnipad-virtual-cursor-x": v,
-        "--omnipad-virtual-cursor-y": r,
-        opacity: i.value.isVisible ? 1 : 0
+        "--omnipad-virtual-cursor-x": x.x,
+        "--omnipad-virtual-cursor-y": x.y,
+        opacity: t.value.isVisible ? 1 : 0
       };
-    }), C = (v) => u?.onPointerDown?.(v), a = (v) => u?.onPointerMove?.(v), d = (v) => u?.onPointerUp?.(v), g = (v) => u?.onPointerCancel?.(v);
-    return (v, r) => (R(), S("div", {
-      id: o(c),
+    }), p = (v) => a?.onPointerDown?.(v), _ = (v) => a?.onPointerMove?.(v), c = (v) => a?.onPointerUp?.(v), D = (v) => a?.onPointerCancel?.(v);
+    return (v, l) => (C(), E("div", {
+      id: i(s),
       ref_key: "elementRef",
-      ref: h,
-      class: $(["omnipad-target-zone omnipad-prevent", o(s)?.cssClass]),
-      style: O(_.value),
-      onPointerdown: C,
-      onPointermove: a,
-      onPointerup: d,
-      onPointercancel: g,
-      onLostpointercapture: g
+      ref: m,
+      class: w(["omnipad-target-zone omnipad-prevent", i(r)?.cssClass]),
+      style: O(k.value),
+      onPointerdown: p,
+      onPointermove: _,
+      onPointerup: c,
+      onPointercancel: D,
+      onLostpointercapture: D
     }, [
-      b(v.$slots, "focus-feedback", {
-        state: o(i),
-        isReturning: o(i)?.isFocusReturning,
-        cursorPos: o(i)?.position
+      g(v.$slots, "focus-feedback", {
+        state: i(t),
+        isReturning: i(t)?.isFocusReturning,
+        cursorPos: i(t)?.position
       }, () => [
-        X(Oe, { name: "omnipad-default-focus-fade" }, {
-          default: I(() => [
-            o(i)?.isFocusReturning ? (R(), S("div", et)) : Y("", !0)
+        F(Ke, { name: "omnipad-default-focus-fade" }, {
+          default: S(() => [
+            i(t)?.isFocusReturning ? (C(), E("div", dt)) : B("", !0)
           ]),
           _: 1
         })
       ], !0),
-      o(s)?.cursorEnabled ? (R(), S("div", {
+      i(r)?.cursorEnabled ? (C(), E("div", {
         key: 0,
         class: "omnipad-virtual-cursor",
-        style: O(k.value)
+        style: O(f.value)
       }, [
-        b(v.$slots, "cursor", {
-          state: o(i),
-          isDown: o(i)?.isPointerDown,
-          isReturning: o(i)?.isFocusReturning,
-          cursorPos: o(i)?.position
+        g(v.$slots, "cursor", {
+          state: i(t),
+          isDown: i(t)?.isPointerDown,
+          isReturning: i(t)?.isFocusReturning,
+          cursorPos: i(t)?.position
         }, () => [
-          E("div", {
-            class: $(["omnipad-default-cursor-dot", { "is-down": o(i)?.isPointerDown }])
+          T("div", {
+            class: w(["omnipad-default-cursor-dot", { "is-down": i(t)?.isPointerDown }])
           }, null, 2)
         ], !0)
-      ], 4)) : Y("", !0),
-      o(s)?.cursorEnabled ? (R(), S("div", {
+      ], 4)) : B("", !0),
+      i(r)?.cursorEnabled ? (C(), E("div", {
         key: 1,
         class: "omnipad-virtual-cursor",
-        style: O(k.value)
+        style: O(f.value)
       }, [
-        b(v.$slots, "with-cursor", {
-          state: o(i),
-          isDown: o(i)?.isPointerDown,
-          isReturning: o(i)?.isFocusReturning,
-          cursorPos: o(i)?.position
+        g(v.$slots, "with-cursor", {
+          state: i(t),
+          isDown: i(t)?.isPointerDown,
+          isReturning: i(t)?.isFocusReturning,
+          cursorPos: i(t)?.position
         }, void 0, !0)
-      ], 4)) : Y("", !0),
-      b(v.$slots, "default", {
-        state: o(i),
-        isDown: o(i)?.isPointerDown,
-        isReturning: o(i)?.isFocusReturning,
-        cursorPos: o(i)?.position
+      ], 4)) : B("", !0),
+      g(v.$slots, "default", {
+        state: i(t),
+        isDown: i(t)?.isPointerDown,
+        isReturning: i(t)?.isFocusReturning,
+        cursorPos: i(t)?.position
       }, void 0, !0)
-    ], 46, Xe));
+    ], 46, ut));
   }
-}), ot = /* @__PURE__ */ V(tt, [["__scopeId", "data-v-b1782723"]]), nt = { class: "omnipad-button-content-layer" }, it = {
+}), ft = /* @__PURE__ */ U(vt, [["__scopeId", "data-v-8de7c4a4"]]), pt = { class: "omnipad-button-content-layer" }, mt = {
   key: 0,
   class: "omnipad-default-button-label"
-}, st = /* @__PURE__ */ B({
+}, yt = /* @__PURE__ */ I({
   __name: "VirtualButtonBase",
   props: {
     layout: {},
@@ -418,31 +450,31 @@ const je = ["id"], qe = /* @__PURE__ */ B({
     label: {}
   },
   setup(e) {
-    const n = e, f = D(() => n.layout ? J(n.layout) : {});
-    return (c, t) => (R(), S("div", {
+    const o = e, u = R(() => o.layout ? Z(o.layout) : {});
+    return (s, n) => (C(), E("div", {
       class: "omnipad-button-base omnipad-prevent",
-      style: O(f.value),
+      style: O(u.value),
       tabindex: "-1"
     }, [
-      b(c.$slots, "base", {
+      g(s.$slots, "base", {
         isActive: e.isActive,
         label: e.label
       }, () => [
-        E("div", {
-          class: $(["omnipad-default-button-base", { "is-active": e.isActive }])
+        T("div", {
+          class: w(["omnipad-default-button-base", { "is-active": e.isActive }])
         }, null, 2)
       ], !0),
-      E("div", nt, [
-        b(c.$slots, "default", {
+      T("div", pt, [
+        g(s.$slots, "default", {
           isActive: e.isActive,
           label: e.label
         }, () => [
-          e.label ? (R(), S("span", it, Ve(e.label), 1)) : Y("", !0)
+          e.label ? (C(), E("span", mt, We(e.label), 1)) : B("", !0)
         ], !0)
       ])
     ], 4));
   }
-}), ne = /* @__PURE__ */ V(st, [["__scopeId", "data-v-f6a6e082"]]), at = /* @__PURE__ */ B({
+}), G = /* @__PURE__ */ U(yt, [["__scopeId", "data-v-f6a6e082"]]), Pt = /* @__PURE__ */ I({
   __name: "VirtualButton",
   props: {
     treeNode: {},
@@ -452,98 +484,94 @@ const je = ["id"], qe = /* @__PURE__ */ B({
     mapping: {},
     layout: {}
   },
-  setup(e, { expose: n }) {
-    const f = e, c = {
+  setup(e, { expose: o }) {
+    const u = e, s = {
       label: "BTN"
-    }, { uid: t, initialConfig: l, reactiveConfig: P } = z(
-      T.BUTTON,
-      f,
-      c
-    ), { core: i, state: u, domEvents: s, effectiveConfig: p, effectiveLayout: h, elementRef: _ } = F(() => new Pe(t.value, l.value, f.treeNode?.type), P), w = (d) => s?.onPointerDown?.(d), k = (d) => s?.onPointerMove?.(d), C = (d) => s?.onPointerUp?.(d), a = (d) => s?.onPointerCancel?.(d);
-    return n({
-      uid: t,
-      onPointerDown: w,
-      onPointerMove: k,
-      onPointerUp: C,
-      onPointerCancel: a,
-      markRectDirty: () => i.value?.markRectDirty
-    }), (d, g) => (R(), Z(ne, {
-      id: o(t),
+    }, { uid: n, core: t, state: a, domEvents: r, effectiveConfig: d, effectiveLayout: m, elementRef: k } = V(b.BUTTON, u, { defaultProps: s }), h = (c) => r?.onPointerDown?.(c), f = (c) => r?.onPointerMove?.(c), p = (c) => r?.onPointerUp?.(c), _ = (c) => r?.onPointerCancel?.(c);
+    return o({
+      uid: n,
+      onPointerDown: h,
+      onPointerMove: f,
+      onPointerUp: p,
+      onPointerCancel: _,
+      markRectDirty: () => t.value?.markRectDirty
+    }), (c, D) => (C(), z(G, {
+      id: i(n),
       ref_key: "elementRef",
-      ref: _,
-      class: $(["omnipad-button omnipad-prevent", o(p)?.cssClass]),
-      layout: o(h),
-      label: o(p)?.label,
-      "is-active": o(u)?.isPressed,
-      onPointerdown: w,
-      onPointerup: C,
-      onPointercancel: a,
-      onLostpointercapture: a
+      ref: k,
+      class: w(["omnipad-button omnipad-prevent", i(d)?.cssClass]),
+      layout: i(m),
+      label: i(d)?.label,
+      "is-active": i(a)?.isPressed,
+      onPointerdown: h,
+      onPointerup: p,
+      onPointercancel: _,
+      onLostpointercapture: _
     }, {
-      base: I((v) => [
-        b(d.$slots, "base", U(L(v)))
+      base: S((v) => [
+        g(c.$slots, "base", N(A(v)))
       ]),
-      default: I((v) => [
-        b(d.$slots, "default", U(L(v)))
+      default: S((v) => [
+        g(c.$slots, "default", N(A(v)))
       ]),
       _: 3
     }, 8, ["id", "class", "layout", "label", "is-active"]));
   }
-}), rt = { class: "omnipad-axis-bg" }, ct = { class: "omnipad-axis-content-layer" }, lt = /* @__PURE__ */ B({
+}), gt = { class: "omnipad-axis-bg" }, bt = { class: "omnipad-axis-content-layer" }, Ct = /* @__PURE__ */ I({
   __name: "VirtualAxisBase",
   props: {
     layout: {},
     isActive: { type: Boolean },
     vector: {},
     showStick: { type: Boolean },
-    baseRadius: {}
+    baseSize: {}
   },
   setup(e) {
-    const n = e, f = D(() => n.layout ? J(n.layout) : {}), c = Q(), t = D(() => {
-      const l = n.vector?.x || 0, P = n.vector?.y || 0, i = n.baseRadius?.x || 0, u = n.baseRadius?.y || 0, s = c ? `${l * 50}cqw` : `${l * i}px`, p = c ? `${P * 50}cqh` : `${P * u}px`, h = c ? "100cqw" : `${i * 2}px`, _ = c ? "100cqh" : `${u * 2}px`;
+    const o = e, u = R(() => o.layout ? Z(o.layout) : {}), s = Y(), n = R(() => {
+      const t = o.vector?.x || 0, a = o.vector?.y || 0, r = o.baseSize?.x || 0, d = o.baseSize?.y || 0, m = je({ x: t, y: a }, { x: r, y: d }, s);
       return {
-        "--omnipad-axis-stick-container-x": s,
-        "--omnipad-axis-stick-container-y": p,
-        "--omnipad-axis-stick-width": h,
-        "--omnipad-axis-stick-height": _,
+        "--omnipad-axis-stick-container-x": m.x,
+        "--omnipad-axis-stick-container-y": m.y,
+        "--omnipad-axis-stick-width": m.width,
+        "--omnipad-axis-stick-height": m.height,
         // 松手时加一点回弹过渡，活动时取消过渡保证绝对跟手
-        transition: n.isActive ? "none" : "transform 0.1s ease-out"
+        transition: o.isActive ? "none" : "transform 0.1s ease-out"
       };
     });
-    return (l, P) => (R(), S("div", {
-      class: $(["omnipad-axis-base omnipad-prevent", { "is-active": e.isActive }]),
-      style: O(f.value),
+    return (t, a) => (C(), E("div", {
+      class: w(["omnipad-axis-base omnipad-prevent", { "is-active": e.isActive }]),
+      style: O(u.value),
       tabindex: "-1"
     }, [
-      E("div", rt, [
-        b(l.$slots, "base", {
+      T("div", gt, [
+        g(t.$slots, "base", {
           isActive: e.isActive,
           vector: e.vector
         }, void 0, !0)
       ]),
-      e.showStick ? (R(), S("div", {
+      e.showStick ? (C(), E("div", {
         key: 0,
         class: "omnipad-axis-stick-container",
-        style: O(t.value)
+        style: O(n.value)
       }, [
-        b(l.$slots, "stick", {
+        g(t.$slots, "stick", {
           isActive: e.isActive,
           vector: e.vector
         }, () => [
-          E("div", {
-            class: $(["omnipad-default-axis-stick", { "is-active": e.isActive }])
+          T("div", {
+            class: w(["omnipad-default-axis-stick", { "is-active": e.isActive }])
           }, null, 2)
         ], !0)
-      ], 4)) : Y("", !0),
-      E("div", ct, [
-        b(l.$slots, "default", {
+      ], 4)) : B("", !0),
+      T("div", bt, [
+        g(t.$slots, "default", {
           isActive: e.isActive,
           vector: e.vector
         }, void 0, !0)
       ])
     ], 6));
   }
-}), fe = /* @__PURE__ */ V(lt, [["__scopeId", "data-v-6ae17f17"]]), ut = { class: "omnipad-dpad-cross-bg" }, dt = /* @__PURE__ */ B({
+}), de = /* @__PURE__ */ U(Ct, [["__scopeId", "data-v-9eef9626"]]), ht = { class: "omnipad-dpad-cross-bg" }, _t = /* @__PURE__ */ I({
   __name: "VirtualDPad",
   props: {
     treeNode: {},
@@ -554,71 +582,68 @@ const je = ["id"], qe = /* @__PURE__ */ B({
     showStick: {},
     layout: {}
   },
-  setup(e, { expose: n }) {
-    const f = e, c = {
+  setup(e, { expose: o }) {
+    const u = e, s = {
       showStick: !1,
       threshold: 0.3
-    }, { uid: t, initialConfig: l, reactiveConfig: P } = z(
-      T.D_PAD,
-      f,
-      c
-    ), { core: i, state: u, domEvents: s, effectiveConfig: p, effectiveLayout: h, elementRef: _ } = F(() => new be(t.value, l.value, f.treeNode?.type), P), w = Q(), k = M({ x: 0, y: 0 }), C = ue(() => {
-      const r = i.value?.rect;
-      r && (k.value = { x: r.width / 2, y: r.height / 2 });
+    }, { uid: n, core: t, state: a, domEvents: r, effectiveConfig: d, effectiveLayout: m, elementRef: k } = V(b.D_PAD, u, { defaultProps: s }), h = Y(), f = L({ x: 0, y: 0 }), p = ae(() => {
+      const l = t.value?.rect;
+      l && (f.value = { x: l.width, y: l.height });
     });
-    w && C();
-    const a = (r) => s?.onPointerDown?.(r), d = (r) => s?.onPointerMove?.(r), g = (r) => s?.onPointerUp?.(r), v = (r) => s?.onPointerCancel?.(r);
-    return n({
-      uid: t,
-      onPointerDown: a,
-      onPointerMove: d,
-      onPointerUp: g,
+    h && p();
+    const _ = (l) => r?.onPointerDown?.(l), c = (l) => r?.onPointerMove?.(l), D = (l) => r?.onPointerUp?.(l), v = (l) => r?.onPointerCancel?.(l);
+    return o({
+      uid: n,
+      onPointerDown: _,
+      onPointerMove: c,
+      onPointerUp: D,
       onPointerCancel: v,
-      markRectDirty: () => i.value?.markRectDirty()
-    }), (r, N) => (R(), Z(fe, {
+      markRectDirty: () => t.value?.markRectDirty()
+    }), (l, x) => (C(), z(de, {
+      id: i(n),
       ref_key: "elementRef",
-      ref: _,
-      class: $(["omnipad-dpad omnipad-prevent", o(p)?.cssClass]),
-      layout: o(h),
-      "is-active": o(u)?.isActive,
-      vector: o(u)?.vector,
-      "show-stick": o(p)?.showStick,
-      "base-radius": k.value,
-      onPointerdown: a,
-      onPointermove: d,
-      onPointerup: g,
+      ref: k,
+      class: w(["omnipad-dpad omnipad-prevent", i(d)?.cssClass]),
+      layout: i(m),
+      "is-active": i(a)?.isActive,
+      vector: i(a)?.vector,
+      "show-stick": i(d)?.showStick,
+      "base-size": f.value,
+      onPointerdown: _,
+      onPointermove: c,
+      onPointerup: D,
       onPointercancel: v,
       onLostpointercapture: v
     }, {
-      base: I((y) => [
-        b(r.$slots, "base", U(L(y)), () => [
-          E("div", ut, [
-            E("div", {
-              class: $(["dpad-arm top", { on: y.vector && y.vector.y < -o(p)?.threshold }])
+      base: S((y) => [
+        g(l.$slots, "base", N(A(y)), () => [
+          T("div", ht, [
+            T("div", {
+              class: w(["dpad-arm top", { on: y.vector && y.vector.y < -i(d)?.threshold }])
             }, null, 2),
-            E("div", {
-              class: $(["dpad-arm bottom", { on: y.vector && y.vector.y > o(p)?.threshold }])
+            T("div", {
+              class: w(["dpad-arm bottom", { on: y.vector && y.vector.y > i(d)?.threshold }])
             }, null, 2),
-            E("div", {
-              class: $(["dpad-arm left", { on: y.vector && y.vector.x < -o(p)?.threshold }])
+            T("div", {
+              class: w(["dpad-arm left", { on: y.vector && y.vector.x < -i(d)?.threshold }])
             }, null, 2),
-            E("div", {
-              class: $(["dpad-arm right", { on: y.vector && y.vector.x > o(p)?.threshold }])
+            T("div", {
+              class: w(["dpad-arm right", { on: y.vector && y.vector.x > i(d)?.threshold }])
             }, null, 2),
-            N[0] || (N[0] = E("div", { class: "dpad-center" }, null, -1))
+            x[0] || (x[0] = T("div", { class: "dpad-center" }, null, -1))
           ])
         ], !0)
       ]),
-      stick: I((y) => [
-        b(r.$slots, "stick", U(L(y)), void 0, !0)
+      stick: S((y) => [
+        g(l.$slots, "stick", N(A(y)), void 0, !0)
       ]),
-      default: I((y) => [
-        b(r.$slots, "default", U(L(y)), void 0, !0)
+      default: S((y) => [
+        g(l.$slots, "default", N(A(y)), void 0, !0)
       ]),
       _: 3
-    }, 8, ["class", "layout", "is-active", "vector", "show-stick", "base-radius"]));
+    }, 8, ["id", "class", "layout", "is-active", "vector", "show-stick", "base-size"]));
   }
-}), vt = /* @__PURE__ */ V(dt, [["__scopeId", "data-v-8c030849"]]), ft = /* @__PURE__ */ B({
+}), kt = /* @__PURE__ */ U(_t, [["__scopeId", "data-v-2690a0c6"]]), Rt = /* @__PURE__ */ I({
   __name: "VirtualTrackpad",
   props: {
     treeNode: {},
@@ -629,46 +654,44 @@ const je = ["id"], qe = /* @__PURE__ */ B({
     mapping: {},
     layout: {}
   },
-  setup(e, { expose: n }) {
-    const f = e, { uid: c, initialConfig: t, reactiveConfig: l } = z(
-      T.TRACKPAD,
-      f,
-      {
-        label: "TRACKPAD",
-        sensitivity: 1
-      }
-    ), { core: P, state: i, domEvents: u, effectiveConfig: s, effectiveLayout: p, elementRef: h } = F(() => new he(c.value, t.value, f.treeNode?.type), l), _ = (a) => u?.onPointerDown?.(a), w = (a) => u?.onPointerMove?.(a), k = (a) => u?.onPointerUp?.(a), C = (a) => u?.onPointerCancel?.(a);
-    return n({
-      uid: c,
-      onPointerDown: _,
-      onPointerMove: w,
-      onPointerUp: k,
-      onPointerCancel: C,
-      markRectDirty: () => P.value?.markRectDirty
-    }), (a, d) => (R(), Z(ne, {
-      id: o(c),
+  setup(e, { expose: o }) {
+    const u = e, s = {
+      label: "TRACKPAD",
+      sensitivity: 1
+    }, { uid: n, core: t, state: a, domEvents: r, effectiveConfig: d, effectiveLayout: m, elementRef: k } = V(b.TRACKPAD, u, {
+      defaultProps: s
+    }), h = (c) => r?.onPointerDown?.(c), f = (c) => r?.onPointerMove?.(c), p = (c) => r?.onPointerUp?.(c), _ = (c) => r?.onPointerCancel?.(c);
+    return o({
+      uid: n,
+      onPointerDown: h,
+      onPointerMove: f,
+      onPointerUp: p,
+      onPointerCancel: _,
+      markRectDirty: () => t.value?.markRectDirty
+    }), (c, D) => (C(), z(G, {
+      id: i(n),
       ref_key: "elementRef",
-      ref: h,
-      class: $(["omnipad-trackpad omnipad-prevent", o(s)?.cssClass]),
-      layout: o(p),
-      label: o(s)?.label,
-      "is-active": o(i)?.isPressed,
-      onPointerdown: _,
-      onPointermove: w,
-      onPointerup: k,
-      onPointercancel: C,
-      onLostpointercapture: C
+      ref: k,
+      class: w(["omnipad-trackpad omnipad-prevent", i(d)?.cssClass]),
+      layout: i(m),
+      label: i(d)?.label,
+      "is-active": i(a)?.isPressed,
+      onPointerdown: h,
+      onPointermove: f,
+      onPointerup: p,
+      onPointercancel: _,
+      onLostpointercapture: _
     }, {
-      base: I((g) => [
-        b(a.$slots, "base", U(L(g)), void 0, !0)
+      base: S((v) => [
+        g(c.$slots, "base", N(A(v)), void 0, !0)
       ]),
-      default: I((g) => [
-        b(a.$slots, "default", U(L(g)), void 0, !0)
+      default: S((v) => [
+        g(c.$slots, "default", N(A(v)), void 0, !0)
       ]),
       _: 3
     }, 8, ["id", "class", "layout", "label", "is-active"]));
   }
-}), pt = /* @__PURE__ */ V(ft, [["__scopeId", "data-v-bacab613"]]), yt = /* @__PURE__ */ B({
+}), Dt = /* @__PURE__ */ U(Rt, [["__scopeId", "data-v-55cc7ea4"]]), wt = /* @__PURE__ */ I({
   __name: "VirtualJoystick",
   props: {
     treeNode: {},
@@ -681,89 +704,88 @@ const je = ["id"], qe = /* @__PURE__ */ B({
     mapping: {},
     layout: {}
   },
-  setup(e, { expose: n }) {
-    const f = e, c = {
+  setup(e, { expose: o }) {
+    const u = e, s = {
       label: "PUSH",
       threshold: 0.2,
       cursorMode: !1,
       cursorSensitivity: 1
-    }, { uid: t, initialConfig: l, reactiveConfig: P } = z(
-      T.JOYSTICK,
-      f,
-      c
-    ), { core: i, state: u, domEvents: s, effectiveConfig: p, effectiveLayout: h, elementRef: _ } = F(() => new Ce(t.value, l.value, f.treeNode?.type), P), w = Q(), k = M({ x: 0, y: 0 }), C = ue(() => {
-      const r = i.value?.rect;
-      r && (k.value = { x: r.width / 2, y: r.height / 2 });
+    }, { uid: n, core: t, state: a, domEvents: r, effectiveConfig: d, effectiveLayout: m, elementRef: k } = V(b.JOYSTICK, u, {
+      defaultProps: s
+    }), h = Y(), f = L({ x: 0, y: 0 }), p = ae(() => {
+      const l = t.value?.rect;
+      l && (f.value = { x: l.width, y: l.height });
     });
-    w && C();
-    const a = (r) => s?.onPointerDown?.(r), d = (r) => s?.onPointerMove?.(r), g = (r) => s?.onPointerUp?.(r), v = (r) => s?.onPointerCancel?.(r);
-    return n({
-      uid: t,
-      onPointerDown: a,
-      onPointerMove: d,
-      onPointerUp: g,
+    h && p();
+    const _ = (l) => r?.onPointerDown?.(l), c = (l) => r?.onPointerMove?.(l), D = (l) => r?.onPointerUp?.(l), v = (l) => r?.onPointerCancel?.(l);
+    return o({
+      uid: n,
+      onPointerDown: _,
+      onPointerMove: c,
+      onPointerUp: D,
       onPointerCancel: v,
-      markRectDirty: () => i.value?.markRectDirty
-    }), (r, N) => (R(), Z(fe, {
+      markRectDirty: () => t.value?.markRectDirty
+    }), (l, x) => (C(), z(de, {
+      id: i(n),
       ref_key: "elementRef",
-      ref: _,
-      class: $(["omnipad-joystick omnipad-prevent", o(p)?.cssClass]),
-      layout: o(h),
-      "is-active": o(u)?.isActive,
-      vector: o(u)?.vector,
+      ref: k,
+      class: w(["omnipad-joystick omnipad-prevent", i(d)?.cssClass]),
+      layout: i(m),
+      "is-active": i(a)?.isActive,
+      vector: i(a)?.vector,
       "show-stick": "",
-      "base-radius": k.value,
-      onPointerdown: a,
-      onPointermove: d,
-      onPointerup: g,
+      "base-size": f.value,
+      onPointerdown: _,
+      onPointermove: c,
+      onPointerup: D,
       onPointercancel: v,
       onLostpointercapture: v
     }, {
-      base: I((y) => [
-        b(r.$slots, "base", U(L(y)), void 0, !0)
+      base: S((y) => [
+        g(l.$slots, "base", N(A(y)), void 0, !0)
       ]),
-      stick: I(() => [
-        X(ne, {
+      stick: S(() => [
+        F(G, {
           layout: { height: "100%", width: "100%" },
-          "is-active": o(u)?.isPressed,
-          label: o(p)?.label
+          "is-active": i(a)?.isPressed,
+          label: i(d)?.label
         }, {
-          base: I((y) => [
-            b(r.$slots, "stick-base", U(L(y)), void 0, !0)
+          base: S((y) => [
+            g(l.$slots, "stick-base", N(A(y)), void 0, !0)
           ]),
-          default: I((y) => [
-            b(r.$slots, "stick", U(L(y)), void 0, !0)
+          default: S((y) => [
+            g(l.$slots, "stick", N(A(y)), void 0, !0)
           ]),
           _: 3
         }, 8, ["is-active", "label"])
       ]),
-      default: I((y) => [
-        b(r.$slots, "default", U(L(y)), void 0, !0)
+      default: S((y) => [
+        g(l.$slots, "default", N(A(y)), void 0, !0)
       ]),
       _: 3
-    }, 8, ["class", "layout", "is-active", "vector", "base-radius"]));
+    }, 8, ["id", "class", "layout", "is-active", "vector", "base-size"]));
   }
-}), mt = /* @__PURE__ */ V(yt, [["__scopeId", "data-v-ae628e53"]]);
-K(T.BUTTON, at);
-K(T.INPUT_ZONE, Qe);
-K(T.ROOT_LAYER, He);
-K(T.TARGET_ZONE, ot);
-K(T.TRACKPAD, pt);
-K(T.D_PAD, vt);
-K(T.JOYSTICK, mt);
-ke((e) => {
-  (e.type === ae.KEYDOWN || e.type === ae.KEYUP) && le(e.type, e.payload);
+}), St = /* @__PURE__ */ U(wt, [["__scopeId", "data-v-b0ffdd7b"]]);
+M(b.BUTTON, Pt);
+M(b.INPUT_ZONE, rt);
+M(b.ROOT_LAYER, lt);
+M(b.TARGET_ZONE, ft);
+M(b.TRACKPAD, Dt);
+M(b.D_PAD, kt);
+M(b.JOYSTICK, St);
+Se((e) => {
+  (e.type === te.KEYDOWN || e.type === te.KEYUP) && se(e.type, e.payload);
 });
 export {
-  Qe as InputZone,
-  He as RootLayer,
-  ot as TargetZone,
-  at as VirtualButton,
-  vt as VirtualDPad,
-  mt as VirtualJoystick,
-  pt as VirtualTrackpad,
-  de as getComponent,
-  ce as getComponentSafe,
-  Ct as hasRegisteredComponent,
-  K as registerComponent
+  rt as InputZone,
+  lt as RootLayer,
+  ft as TargetZone,
+  Pt as VirtualButton,
+  kt as VirtualDPad,
+  St as VirtualJoystick,
+  Dt as VirtualTrackpad,
+  le as getComponent,
+  ne as getComponentSafe,
+  It as hasRegisteredComponent,
+  M as registerComponent
 };