@omnipad/vue 0.1.1-alpha.0 → 0.2.0-alpha.2

package/dist/omnipad-vue.mjs

@@ -1,560 +1,81 @@
-import { defineComponent as P, h as oe, shallowRef as se, ref as D, onMounted as re, onUnmounted as ae, openBlock as p, createElementBlock as E, Fragment as ce, renderList as le, createBlock as C, resolveDynamicComponent as Y, unref as h, renderSlot as k, inject as ue, computed as y, provide as de, useSlots as fe, watch as he, nextTick as pe, normalizeStyle as _, createVNode as L, withCtx as K, createElementVNode as G, createCommentVNode as T, Transition as ve, normalizeClass as j, toDisplayString as me } from "vue";
-var ge = Object.defineProperty, ye = (e, t, n) => t in e ? ge(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, g = (e, t, n) => ye(e, typeof t != "symbol" ? t + "" : t, n), v = {
-  // --- Zones ---
-  /** Area responsible for capturing touches and spawning dynamic widgets */
-  INPUT_ZONE: "input-zone",
-  /** Area responsible for receiving signals and simulating DOM events */
-  TARGET_ZONE: "target-zone",
-  // --- Widgets ---
-  /** Simulates a physical keyboard key press */
-  KEYBOARD_BUTTON: "keyboard-button",
-  /** The top-level managed container */
-  ROOT_LAYER: "root-layer"
-}, f = {
-  KEYDOWN: "keydown",
-  KEYUP: "keyup",
-  POINTER: "pointer",
-  POINTERMOVE: "pointermove",
-  POINTERDOWN: "pointerdown",
-  POINTERUP: "pointerup",
-  MOUSE: "mouse",
-  MOUSEMOVE: "mousemove",
-  MOUSEDOWN: "mousedown",
-  MOUSEUP: "mouseup",
-  CLICK: "click"
-}, W = {
-  /** The key used to propagate Parent IDs through the component tree */
-  PARENT_ID_KEY: "omnipad-parent-id-link"
-}, X = (e, t = 2) => {
-  const n = Math.pow(10, t);
-  return Math.round(e * n) / n;
-}, A = (e, t) => X(e * t / 100), z = (e, t) => t === 0 ? 0 : X(e * 100 / t), H = (e, t) => {
-  let n = document.elementFromPoint(e, t);
-  for (; n && n.shadowRoot; ) {
-    const i = n.shadowRoot.elementFromPoint(e, t);
-    if (!i || i === n) break;
-    n = i;
-  }
-  return n;
-}, J = () => {
-  let e = document.activeElement;
-  for (; e && e.shadowRoot && e.shadowRoot.activeElement; )
-    e = e.shadowRoot.activeElement;
-  return e;
-}, Ee = (e) => {
-  J() !== e && (e.hasAttribute("tabindex") || e.setAttribute("tabindex", "-1"), e.focus());
-}, Pe = (e, t) => {
-  const n = new KeyboardEvent(e, {
-    ...t,
-    which: t.keyCode,
-    // Support for legacy Flash engines
-    bubbles: !0,
-    cancelable: !0,
-    view: window
-  });
-  window.dispatchEvent(n);
-}, be = (e, t, n, i = {}) => {
-  const o = H(t, n);
-  if (!o) return;
-  const s = {
-    bubbles: !0,
-    cancelable: !0,
-    composed: !0,
-    // Crucial for piercing Shadow DOM boundaries
-    clientX: t,
-    clientY: n,
-    view: window,
-    ...i
-  };
-  if (e.startsWith("pointer")) {
-    o.dispatchEvent(
-      new PointerEvent(e, {
-        isPrimary: !0,
-        pointerId: 1,
-        pointerType: "mouse",
-        // Emulate mouse behavior for Flash MouseOver/Down logic
-        ...s
-      })
-    );
-    const r = e.replace("pointer", "mouse");
-    o.dispatchEvent(new MouseEvent(r, s));
-  } else
-    o.dispatchEvent(new MouseEvent(e, s));
-}, Ie = (e = "omnipad") => {
-  const t = Date.now().toString(36), n = Math.random().toString(36).substring(2, 6);
-  return `${e}-${t}-${n}`;
-}, V = (e) => {
-  if (!e) return {};
-  const t = {};
-  t.position = "absolute", ["left", "top", "right", "bottom", "width", "height"].forEach((o) => {
-    const s = e[o];
-    s !== void 0 && (t[o] = typeof s == "number" ? `${s}px` : s);
-  }), e.zIndex !== void 0 && (t.zIndex = e.zIndex);
-  const i = {
-    "top-left": "translate(0, 0)",
-    "top-center": "translate(-50%, 0)",
-    "top-right": "translate(-100%, 0)",
-    "center-left": "translate(0, -50%)",
-    center: "translate(-50%, -50%)",
-    "center-right": "translate(-100%, -50%)",
-    "bottom-left": "translate(0, -100%)",
-    "bottom-center": "translate(-50%, -100%)",
-    "bottom-right": "translate(-100%, -100%)"
-  };
-  return e.anchor && (t.transform = i[e.anchor]), t;
-}, _e = class {
-  constructor() {
-    g(this, "listeners", /* @__PURE__ */ new Set());
-  }
-  /**
-   * Registers a callback function to be executed whenever data is emitted.
-   *
-   * @param fn - The callback function.
-   * @returns A function that, when called, unsubscribes the listener.
-   */
-  subscribe(e) {
-    return this.listeners.add(e), () => this.listeners.delete(e);
-  }
-  /**
-   * Broadcasts the provided data to all registered listeners.
-   * Each listener is executed within a try-catch block to ensure that
-   * an error in one subscriber doesn't prevent others from receiving the signal.
-   *
-   * @param data - The payload to be sent to all subscribers.
-   */
-  emit(e) {
-    this.listeners.forEach((t) => {
-      try {
-        t(e);
-      } catch (n) {
-        console.error("[OmniPad-Core] Emitter callback error:", n);
-      }
-    });
-  }
-  /**
-   * Removes all listeners and clears the subscription set.
-   * Essential for preventing memory leaks when an Entity is destroyed.
-   */
-  clear() {
-    this.listeners.clear();
-  }
-}, R = class {
-  constructor(e, t, n, i) {
-    g(this, "uid"), g(this, "type"), g(this, "config"), g(this, "state"), g(this, "rect", null), g(this, "stateEmitter", new _e()), this.uid = e, this.type = t, this.config = n, this.state = i;
-  }
-  // --- IObservable Implementation ---
-  subscribe(e) {
-    return e(this.state), this.stateEmitter.subscribe(e);
-  }
-  // --- State Management ---
-  /**
-   * Updates the internal state and notifies all subscribers.
-   *
-   * @param partialState - Partial object containing updated state values.
-   */
-  setState(e) {
-    this.state = { ...this.state, ...e }, this.stateEmitter.emit(this.state);
-  }
-  // --- Lifecycle ---
-  destroy() {
-    this.reset(), this.stateEmitter.clear(), Z.getInstance().unregister(this.uid);
-  }
-  updateRect(e) {
-    this.rect = e;
-  }
-  updateConfig(e) {
-    this.config = { ...this.config, ...e }, this.stateEmitter.emit(this.state);
-  }
-  getState() {
-    return this.state;
-  }
-  getConfig() {
-    return this.config;
-  }
-}, B = /* @__PURE__ */ Symbol.for("omnipad.registry.instance"), Z = class Q {
-  /**
-   * Private constructor to enforce singleton pattern.
-   */
-  constructor() {
-    g(this, "entities", /* @__PURE__ */ new Map());
-  }
-  /**
-   * Retrieves the global instance of the Registry.
-   * Uses globalThis to ensure the instance is unique even if the library is loaded multiple times.
-   */
-  static getInstance() {
-    const t = globalThis;
-    return t[B] || (t[B] = new Q()), t[B];
-  }
-  register(t) {
-    if (!t.uid) {
-      console.warn("[OmniPad-Core] Registry: Attempted to register entity without UID.", t);
-      return;
-    }
-    this.entities.has(t.uid), this.entities.set(t.uid, t);
-  }
-  unregister(t) {
-    this.entities.has(t) && this.entities.delete(t);
-  }
-  getEntity(t) {
-    return this.entities.get(t);
-  }
-  getAllEntities() {
-    return Array.from(this.entities.values());
-  }
-  getEntitiesByRoot(t) {
-    const n = this.getAllEntities();
-    if (!t) return n;
-    if (!this.entities.get(t))
-      return console.warn(`[OmniPad-Core] Registry: Root entity ${t} not found.`), [];
-    const o = /* @__PURE__ */ new Map();
-    n.forEach((c) => {
-      if (c instanceof R) {
-        const l = c.getConfig();
-        l.parentId && (o.has(l.parentId) || o.set(l.parentId, []), o.get(l.parentId).push(c));
-      }
-    });
-    const s = [], r = [t], a = /* @__PURE__ */ new Set();
-    for (; r.length > 0; ) {
-      const c = r.shift();
-      if (a.has(c)) continue;
-      a.add(c);
-      const l = this.entities.get(c);
-      if (l) {
-        s.push(l);
-        const u = o.get(c);
-        u && u.forEach((m) => r.push(m.uid));
-      }
-    }
-    return s;
-  }
-  destroyByRoot(t) {
-    const n = this.getEntitiesByRoot(t);
-    for (let i = n.length - 1; i >= 0; i--) {
-      const o = n[i];
-      try {
-        o.destroy();
-      } catch (s) {
-        console.error(`[OmniPad-Core] Error during destroyByRoot at ${o.uid}:`, s);
-      }
-    }
-  }
-  clear() {
-    this.entities.clear();
-  }
-  resetAll() {
-    this.entities.forEach((t) => {
-      "reset" in t && t.reset();
-    });
-  }
-  debugGetSnapshot() {
-    return new Map(this.entities);
-  }
-}, Te = {
-  isDynamicActive: !1,
-  dynamicPointerId: null,
-  dynamicPosition: { x: 0, y: 0 }
-}, Re = class extends R {
-  constructor(e, t) {
-    super(e, v.INPUT_ZONE, t, Te);
-  }
-  onPointerDown(e) {
-    if (this.state.isDynamicActive || e.target !== e.currentTarget) return;
-    e.cancelable && e.preventDefault();
-    const t = this.calculateRelativePosition(e.clientX, e.clientY);
-    this.setState({
-      isDynamicActive: !0,
-      dynamicPointerId: e.pointerId,
-      dynamicPosition: t
-    });
-  }
-  onPointerMove(e) {
-    !this.state.isDynamicActive || (e.pointerId, this.state.dynamicPointerId);
-  }
-  onPointerUp(e) {
-    this.handleRelease(e);
-  }
-  onPointerCancel(e) {
-    this.handleRelease(e);
-  }
-  /**
-   * Internal helper to handle pointer release and cleanup.
-   */
-  handleRelease(e) {
-    if (e.pointerId === this.state.dynamicPointerId) {
-      try {
-        e.currentTarget.releasePointerCapture(e.pointerId);
-      } catch {
-      }
-      this.setState({
-        isDynamicActive: !1,
-        dynamicPointerId: null
-      });
-    }
-  }
-  // --- Helper Calculations ---
-  /**
-   * Converts viewport pixels to percentage coordinates relative to the zone.
-   */
-  calculateRelativePosition(e, t) {
-    return this.rect ? {
-      x: z(e - this.rect.left, this.rect.width),
-      y: z(t - this.rect.top, this.rect.height)
-    } : { x: 0, y: 0 };
-  }
-  /**
-   * Whether the interceptor layer should be enabled.
-   */
-  get isInterceptorRequired() {
-    return !!(this.config.dynamicWidgetId || this.config.preventFocusLoss);
-  }
-  reset() {
-    this.setState({
-      isDynamicActive: !1,
-      dynamicPointerId: null
-    });
-  }
-}, F = {
-  isActive: !1,
-  isPressed: !1,
-  pointerId: null,
-  value: 0
-}, we = class extends R {
-  /**
-   * Creates an instance of KeyboardButtonCore.
-   *
-   * @param uid - The unique entity ID.
-   * @param config - The flat configuration object for the button.
-   */
-  constructor(e, t) {
-    super(e, v.KEYBOARD_BUTTON, t, F);
-  }
-  // --- IPointerHandler Implementation ---
-  onPointerDown(e) {
-    e.cancelable && e.preventDefault(), e.target.setPointerCapture(e.pointerId), this.setState({
-      isActive: !0,
-      isPressed: !0,
-      pointerId: e.pointerId
-    }), this.sendInputSignal(f.KEYDOWN);
-  }
-  onPointerUp(e) {
-    e.cancelable && e.preventDefault(), this.handleRelease(e);
-  }
-  onPointerCancel(e) {
-    this.handleRelease(e);
-  }
-  onPointerMove(e) {
-    e.cancelable && e.preventDefault();
-  }
-  // --- Internal Logic ---
-  /**
-   * Common logic for releasing the button state.
-   *
-   * @param e - The pointer event that triggered the release.
-   */
-  handleRelease(e) {
-    this.state.pointerId === e.pointerId && (e.target.hasPointerCapture(e.pointerId) && e.target.releasePointerCapture(e.pointerId), this.setState(F), this.sendInputSignal(f.KEYUP));
-  }
-  /**
-   * Dispatches input signals to the registered target stage.
-   *
-   * @param type - The action type (keydown or keyup).
-   */
-  sendInputSignal(e) {
-    const t = this.config.targetStageId;
-    if (!t) return;
-    const n = Z.getInstance().getEntity(t);
-    if (n && typeof n.handleSignal == "function") {
-      const i = {
-        targetStageId: t,
-        type: e,
-        payload: {
-          key: this.config.mapping.key,
-          code: this.config.mapping.code,
-          keyCode: this.config.mapping.keyCode
-        }
-      };
-      n.handleSignal(i);
-    }
-  }
-  // --- IResettable Implementation ---
-  reset() {
-    this.state.isPressed && this.sendInputSignal(f.KEYUP), this.setState(F);
-  }
-}, Oe = {
-  isHighlighted: !1
-}, Se = class extends R {
-  constructor(e, t) {
-    super(e, v.ROOT_LAYER, t, Oe);
-  }
-  reset() {
-  }
-}, Ne = {
-  position: { x: 50, y: 50 },
-  isVisible: !1,
-  isPointerDown: !1,
-  isFocusReturning: !1
-}, Ae = class extends R {
-  constructor(e, t) {
-    super(e, v.TARGET_ZONE, t, Ne), g(this, "hideTimer", null), g(this, "focusFeedbackTimer", null);
-  }
-  // --- ISignalReceiver Implementation ---
-  handleSignal(e) {
-    const { type: t, payload: n } = e;
-    switch (this.ensureFocus(), t) {
-      case f.KEYDOWN:
-      case f.KEYUP:
-        Pe(t, n);
-        break;
-      case f.MOUSEMOVE:
-        n.point && (this.updateCursorPosition(n.point), this.config.cursorEnabled && this.showCursor(), this.executeMouseAction(f.POINTERMOVE, n));
-        break;
-      case f.MOUSEDOWN:
-      case f.MOUSEUP:
-      case f.CLICK:
-        this.config.cursorEnabled && this.showCursor(), this.executeMouseAction(
-          t.startsWith(f.MOUSE) ? t.replace(f.MOUSE, f.POINTER) : t,
-          n
-        );
-        break;
-    }
-  }
-  // --- Mouse & Pointer Simulation ---
-  /**
-   * Calculates pixel coordinates and dispatches simulated pointer events to the deepest element.
-   *
-   * @param pointerType - The specific pointer event type (e.g., pointermove, pointerdown).
-   * @param payload - Data containing point coordinates or button info.
-   */
-  executeMouseAction(e, t) {
-    if (!this.rect) return;
-    e === f.POINTERDOWN && this.setState({ isPointerDown: !0 }), e === f.POINTERUP && this.setState({ isPointerDown: !1 });
-    const n = t.point || this.state.position, i = this.rect.left + A(n.x, this.rect.width), o = this.rect.top + A(n.y, this.rect.height);
-    be(e, i, o, {
-      button: t.button ?? 0,
-      buttons: this.state.isPointerDown ? 1 : 0
-    });
-  }
-  // --- Focus Management ---
-  /**
-   * Checks if the target element under the virtual cursor has focus, and reclaims it if lost.
-   */
-  ensureFocus() {
-    if (!this.rect) return;
-    const e = this.rect.left + A(this.state.position.x, this.rect.width), t = this.rect.top + A(this.state.position.y, this.rect.height), n = H(e, t);
-    n && J() !== n && (Ee(n), this.triggerFocusFeedback());
-  }
-  /**
-   * Activates a temporary visual feedback state to indicate a focus-reclaim event.
-   */
-  triggerFocusFeedback() {
-    this.setState({ isFocusReturning: !0 }), this.focusFeedbackTimer && clearTimeout(this.focusFeedbackTimer), this.focusFeedbackTimer = setTimeout(() => this.setState({ isFocusReturning: !1 }), 500);
-  }
-  // --- Cursor State Helpers ---
-  /**
-   * Updates the internal virtual cursor coordinates.
-   */
-  updateCursorPosition(e) {
-    this.setState({ position: { ...e } });
-  }
-  /**
-   * Makes the virtual cursor visible and sets a timeout for auto-hiding.
-   */
-  showCursor() {
-    this.setState({ isVisible: !0 }), this.hideTimer && clearTimeout(this.hideTimer), this.config.cursorAutoDelay && this.config.cursorAutoDelay > 0 && (this.hideTimer = setTimeout(
-      () => this.setState({ isVisible: !1 }),
-      this.config.cursorAutoDelay
-    ));
-  }
-  // --- IResettable Implementation ---
-  reset() {
-    this.state.isPointerDown && this.executeMouseAction(f.POINTERUP, {}), this.hideTimer && clearTimeout(this.hideTimer), this.focusFeedbackTimer && clearTimeout(this.focusFeedbackTimer), this.setState({
-      isVisible: !1,
-      isPointerDown: !1,
-      isFocusReturning: !1
-    });
-  }
-};
-const q = {};
-function x(e, t) {
-  q[e] = t;
+import { Registry as G, CONTEXT as K, generateUID as X, CMP_TYPES as P, resolveLayoutStyle as S, InputZoneCore as H, RootLayerCore as J, TargetZoneCore as Q, KeyboardButtonCore as q, MouseButtonCore as ee, TrackpadCore as te } from "@omnipad/core";
+import { defineComponent as b, h as oe, shallowRef as ne, ref as O, onMounted as ae, onUnmounted as ie, openBlock as p, createElementBlock as g, Fragment as re, renderList as le, createBlock as T, resolveDynamicComponent as A, unref as l, renderSlot as I, inject as se, computed as _, provide as ue, useSlots as ce, watch as de, nextTick as ve, normalizeStyle as $, createVNode as x, withCtx as V, createElementVNode as Y, createCommentVNode as B, Transition as pe, normalizeClass as z, toDisplayString as fe } from "vue";
+const F = {};
+function N(n, o) {
+  F[n] = o;
 }
-function ee(e) {
-  const t = q[e];
-  return t || P({
-    render: () => oe("div", { style: "color:red" }, `[Unknown: ${e}]`)
+function W(n) {
+  const o = F[n];
+  return o || b({
+    render: () => oe("div", { style: "color:red" }, `[Unknown: ${n}]`)
   });
 }
-function U(e) {
-  const t = se(), n = D(), i = D(null), o = (r) => {
-    n.value = r;
+function D(n) {
+  const o = ne(), s = O(), e = O(null), i = (a) => {
+    s.value = a;
   };
-  let s = null;
-  return re(() => {
-    const r = e();
-    t.value = r, Z.getInstance().register(r), "subscribe" in r && r.subscribe(o);
-    let a = null;
-    i.value && (i.value instanceof Element ? a = i.value : i.value.$el instanceof Element && (a = i.value.$el)), a && "updateRect" in r && (s = new ResizeObserver((c) => {
-      for (const l of c)
-        r.updateRect(l.target.getBoundingClientRect());
-    }), s.observe(a), r.updateRect(a.getBoundingClientRect()));
-  }), ae(() => {
-    s && s.disconnect(), t.value && t.value.destroy();
+  return ae(() => {
+    const a = n();
+    o.value = a, G.getInstance().register(a), "subscribe" in a && a.subscribe(i);
+    let t = null;
+    e.value && (e.value instanceof Element ? t = e.value : e.value.$el instanceof Element && (t = e.value.$el)), t && "bindRectProvider" in a && a.bindRectProvider(() => t.getBoundingClientRect());
+  }), ie(() => {
+    o.value && o.value.destroy();
   }), {
-    core: t,
-    state: n,
-    elementRef: i
+    core: o,
+    state: s,
+    elementRef: e
   };
 }
-const De = { class: "omnipad-virtual-layer-base omnipad-prevent" }, Ce = /* @__PURE__ */ P({
+const me = { class: "omnipad-virtual-layer-base omnipad-prevent" }, ye = /* @__PURE__ */ b({
   __name: "VirtualLayerBase",
   props: {
     nodes: {}
   },
-  setup(e) {
-    return (t, n) => (p(), E("div", De, [
-      (p(!0), E(ce, null, le(e.nodes || [], (i) => (p(), C(Y(h(ee)(i.type)), {
-        key: i.uid,
-        "tree-node": i
+  setup(n) {
+    return (o, s) => (p(), g("div", me, [
+      (p(!0), g(re, null, le(n.nodes || [], (e) => (p(), T(A(l(W)(e.type)), {
+        key: e.uid,
+        "tree-node": e
       }, null, 8, ["tree-node"]))), 128)),
-      k(t.$slots, "default", {}, void 0, !0)
+      I(o.$slots, "default", {}, void 0, !0)
     ]));
   }
-}), w = (e, t) => {
-  const n = e.__vccOpts || e;
-  for (const [i, o] of t)
-    n[i] = o;
-  return n;
-}, te = /* @__PURE__ */ w(Ce, [["__scopeId", "data-v-6f1860f6"]]);
-function M(e, t, n = {}) {
-  const i = t.treeNode, o = i && i.type === e ? i : void 0;
-  i && i.type !== e && console.warn(
-    `[OmniPad-Validation] Type mismatch! Component expected "${e}", but received "${i.type}". Config ignored.`
+}), h = (n, o) => {
+  const s = n.__vccOpts || n;
+  for (const [e, i] of o)
+    s[e] = i;
+  return s;
+}, j = /* @__PURE__ */ h(ye, [["__scopeId", "data-v-6f1860f6"]]);
+function E(n, o, s = {}) {
+  const e = o.treeNode, i = e && e.type === n ? e : void 0;
+  e && e.type !== n && console.warn(
+    `[OmniPad-Validation] Type mismatch! Component expected "${n}", but received "${e.type}". Config ignored.`
   );
-  const s = ue(W.PARENT_ID_KEY, D(void 0)), r = y(() => t.parentId || o?.config?.parentId || s.value), a = y(() => t.widgetId || o?.uid || Ie(e));
-  de(W.PARENT_ID_KEY, a);
-  const c = y(() => {
-    const l = o?.config || {}, u = Object.fromEntries(
-      Object.entries(t).filter(([m, O]) => O !== void 0 && m !== "treeNode" && m !== "widgetId")
+  const a = se(K.PARENT_ID_KEY, O(void 0)), t = _(() => o.parentId || i?.config?.parentId || a.value), d = _(() => o.widgetId || i?.uid || X(n));
+  ue(K.PARENT_ID_KEY, d);
+  const m = _(() => {
+    const f = i?.config || {}, u = Object.fromEntries(
+      Object.entries(o).filter(([v, r]) => r !== void 0 && v !== "treeNode" && v !== "widgetId")
     );
     return {
-      ...n,
-      ...l,
+      ...s,
+      ...f,
       ...u,
-      id: a.value,
-      type: e,
-      parentId: r.value,
+      id: d.value,
+      type: n,
+      parentId: t.value,
       // 特殊处理 Layout：深度合并，确保即便只传了 { width: 100 } 也不丢失原来的 left/top
       layout: {
-        ...n.layout || {},
-        ...l.layout || {},
+        ...s.layout || {},
+        ...f.layout || {},
         ...u.layout || {}
       }
     };
   });
-  return { uid: a, config: c };
+  return { uid: d, config: m };
 }
-const ke = ["id"], xe = /* @__PURE__ */ P({
+const Pe = ["id"], _e = /* @__PURE__ */ b({
   __name: "InputZone",
   props: {
     treeNode: {},
@@ -562,113 +83,117 @@ const ke = ["id"], xe = /* @__PURE__ */ P({
     layout: {},
     preventFocusLoss: {}
   },
-  setup(e) {
-    const t = e, n = fe(), i = D(null), { uid: o, config: s } = M(v.INPUT_ZONE, t), { core: r, state: a, elementRef: c } = U(
-      () => new Re(o.value, s.value)
-    ), l = y(() => {
-      const d = t.treeNode?.config?.dynamicWidgetId;
-      return t.treeNode?.children?.filter((b) => b.uid !== d) || [];
-    }), u = y(() => {
-      const b = (n.dynamicWidget?.() || []).filter((N) => !(N.type === Comment || N.type === Text)), I = t.treeNode?.children?.find(
-        (N) => N.uid === t.treeNode?.config?.dynamicWidgetId
-      ), $ = b.length > 0;
-      return b.length > 1 && console.error(
-        `[OmniPad-Validation] InputZone ${o.value} has multiple dynamic widgets in slot. Only the first one will be activated.`
-      ), $ && I && console.warn(
-        `[OmniPad-Validation] InputZone ${o.value} has both Slot and Config dynamic widgets. Config ignored.`
+  setup(n) {
+    const o = n, s = ce(), e = O(null), { uid: i, config: a } = E(P.INPUT_ZONE, o), { core: t, state: d, elementRef: m } = D(
+      () => new H(i.value, a.value)
+    ), f = _(() => {
+      const c = o.treeNode?.config?.dynamicWidgetId;
+      return o.treeNode?.children?.filter((w) => w.uid !== c) || [];
+    }), u = _(() => {
+      const w = (s.dynamicWidget?.() || []).filter((k) => !(k.type === Comment || k.type === Text)), C = o.treeNode?.children?.find(
+        (k) => k.uid === o.treeNode?.config?.dynamicWidgetId
+      ), U = w.length > 0;
+      return w.length > 1 && console.error(
+        `[OmniPad-Validation] InputZone ${i.value} has multiple dynamic widgets in slot. Only the first one will be activated.`
+      ), U && C && console.warn(
+        `[OmniPad-Validation] InputZone ${i.value} has both Slot and Config dynamic widgets. Config ignored.`
       ), {
-        nodeToRender: $ ? b[0] : I || null,
-        isFromSlot: $
+        nodeToRender: U ? w[0] : C || null,
+        isFromSlot: U
       };
     });
-    he(
-      i,
-      (d) => {
-        pe(() => {
-          d && d?.uid && r.value?.updateConfig({
-            dynamicWidgetId: d.uid
+    de(
+      e,
+      (c) => {
+        ve(() => {
+          c && c?.uid && t.value?.updateConfig({
+            dynamicWidgetId: c.uid
           });
         });
       },
       { immediate: !0 }
     );
-    const m = y(() => V(s.value.layout)), O = y(() => a.value?.isDynamicActive ? {
+    const v = _(() => S(a.value.layout)), r = _(() => d.value?.isDynamicActive ? {
       position: "absolute",
-      left: `${a.value.dynamicPosition.x}%`,
-      top: `${a.value.dynamicPosition.y}%`,
+      left: `${d.value.dynamicPosition.x}%`,
+      top: `${d.value.dynamicPosition.y}%`,
       zIndex: 100,
       pointerEvents: "auto"
-    } : { display: "none" }), ne = (d) => {
-      r.value && (r.value.onPointerDown(d), a.value?.isDynamicActive && i.value && typeof i.value.onPointerDown == "function" && i.value.onPointerDown(d));
-    }, ie = (d) => {
-      r.value && (r.value.onPointerMove(d), a.value?.isDynamicActive && i.value && typeof i.value.onPointerMove == "function" && i.value.onPointerMove(d));
-    }, S = (d) => {
-      a.value?.isDynamicActive && i.value && typeof i.value.onPointerUp == "function" && i.value.onPointerUp(d), r.value && r.value.onPointerUp(d);
+    } : { display: "none" }), R = (c) => {
+      t.value && (t.value.onPointerDown(c), d.value?.isDynamicActive && e.value && typeof e.value.onPointerDown == "function" && e.value.onPointerDown(c));
+    }, y = (c) => {
+      t.value && (t.value.onPointerMove(c), d.value?.isDynamicActive && e.value && typeof e.value.onPointerMove == "function" && e.value.onPointerMove(c));
+    }, M = (c) => {
+      d.value?.isDynamicActive && e.value && typeof e.value.onPointerUp == "function" && e.value.onPointerUp(c), t.value && t.value.onPointerUp(c);
+    }, Z = (c) => {
+      d.value?.isDynamicActive && e.value && typeof e.value.onPointerCancel == "function" && e.value.onPointerCancel(c), t.value && t.value.onPointerCancel(c);
     };
-    return (d, b) => (p(), E("div", {
-      id: h(o),
+    return (c, w) => (p(), g("div", {
+      id: l(i),
       ref_key: "elementRef",
-      ref: c,
+      ref: m,
       class: "omnipad-input-zone omnipad-prevent",
-      style: _(m.value)
+      style: $(v.value)
     }, [
-      L(te, { nodes: l.value }, {
-        default: K(() => [
-          k(d.$slots, "default", {}, void 0, !0)
+      x(j, { nodes: f.value }, {
+        default: V(() => [
+          I(c.$slots, "default", {}, void 0, !0)
         ]),
         _: 3
       }, 8, ["nodes"]),
-      h(r)?.isInterceptorRequired ? (p(), E("div", {
+      u.value.nodeToRender || l(t)?.isInterceptorRequired ? (p(), g("div", {
         key: 0,
         class: "omnipad-input-zone-trigger",
-        onPointerdown: ne,
-        onPointermove: ie,
-        onPointerup: S,
-        onPointercancel: S,
-        onLostpointercapture: S,
-        onPointerleave: S
+        onPointerdown: R,
+        onPointermove: y,
+        onPointerup: M,
+        onPointercancel: Z,
+        onLostpointercapture: Z
       }, [
-        G("div", {
+        Y("div", {
           class: "dynamic-widget-mount",
-          style: _(O.value)
+          style: $(r.value)
         }, [
-          u.value.isFromSlot ? (p(), C(Y(u.value.nodeToRender), {
+          u.value.isFromSlot ? (p(), T(A(u.value.nodeToRender), {
             key: 0,
-            ref: (I) => i.value = I
-          }, null, 512)) : u.value.nodeToRender ? (p(), C(Y(h(ee)(u.value.nodeToRender.type)), {
+            ref: (C) => e.value = C
+          }, null, 512)) : u.value.nodeToRender ? (p(), T(A(l(W)(u.value.nodeToRender.type)), {
             key: 1,
-            ref: (I) => i.value = I,
+            ref: (C) => e.value = C,
             "tree-node": u.value.nodeToRender
-          }, null, 8, ["tree-node"])) : T("", !0)
+          }, null, 8, ["tree-node"])) : B("", !0)
         ], 4)
-      ], 32)) : T("", !0)
-    ], 12, ke));
+      ], 32)) : B("", !0)
+    ], 12, Pe));
   }
-}), Ue = /* @__PURE__ */ w(xe, [["__scopeId", "data-v-02669919"]]), Me = ["id"], $e = /* @__PURE__ */ P({
+}), ge = /* @__PURE__ */ h(_e, [["__scopeId", "data-v-e0c28ebd"]]), be = ["id"], Re = /* @__PURE__ */ b({
   __name: "RootLayer",
   props: {
     treeNode: {},
     widgetId: {}
   },
-  setup(e) {
-    const t = e, { uid: n, config: i } = M(v.ROOT_LAYER, t), { elementRef: o } = U(() => new Se(n.value, i.value));
-    return (s, r) => (p(), E("div", {
-      id: h(n),
+  setup(n) {
+    const o = n, { uid: s, config: e } = E(P.ROOT_LAYER, o), { elementRef: i } = D(() => new J(s.value, e.value));
+    return (a, t) => (p(), g("div", {
+      id: l(s),
       ref_key: "elementRef",
-      ref: o,
+      ref: i,
       class: "omnipad-virtual-layer"
     }, [
-      L(te, {
-        nodes: e.treeNode?.children || []
+      x(j, {
+        nodes: n.treeNode?.children || []
       }, {
-        default: K(() => [
-          k(s.$slots, "default", {}, void 0, !0)
+        default: V(() => [
+          I(a.$slots, "default", {}, void 0, !0)
         ]),
         _: 3
       }, 8, ["nodes"])
-    ], 8, Me));
+    ], 8, be));
   }
-}), Be = /* @__PURE__ */ w($e, [["__scopeId", "data-v-a509fd6e"]]), Fe = ["id"], Ye = /* @__PURE__ */ P({
+}), we = /* @__PURE__ */ h(Re, [["__scopeId", "data-v-9e46ef9c"]]), Ce = ["id"], Te = {
+  key: 0,
+  class: "omnipad-default-focus-border-feedback"
+}, Ie = /* @__PURE__ */ b({
   __name: "TargetZone",
   props: {
     treeNode: {},
@@ -677,70 +202,84 @@ const ke = ["id"], xe = /* @__PURE__ */ P({
     cursorAutoDelay: {},
     layout: {}
   },
-  setup(e) {
-    const t = e, n = {
+  setup(n) {
+    const o = n, s = {
       cursorAutoDelay: 2500
-    }, { uid: i, config: o } = M(v.TARGET_ZONE, t, n), { state: s, elementRef: r } = U(
-      () => new Ae(i.value, o.value)
-    ), a = y(() => V(o.value.layout)), c = y(() => s.value ? {
-      left: `${s.value.position.x}%`,
-      top: `${s.value.position.y}%`,
-      opacity: s.value.isVisible ? 1 : 0
-    } : { display: "none" });
-    return (l, u) => (p(), E("div", {
-      id: h(i),
+    }, { uid: e, config: i } = E(
+      P.TARGET_ZONE,
+      o,
+      s
+    ), { core: a, state: t, elementRef: d } = D(
+      () => new Q(e.value, i.value)
+    ), m = _(() => S(i.value.layout)), f = _(() => t.value ? {
+      left: `${t.value.position.x}%`,
+      top: `${t.value.position.y}%`,
+      opacity: t.value.isVisible ? 1 : 0
+    } : { display: "none" }), u = (y) => a.value?.onPointerDown(y), v = (y) => a.value?.onPointerMove(y), r = (y) => a.value?.onPointerUp(y), R = (y) => a.value?.onPointerCancel(y);
+    return (y, M) => (p(), g("div", {
+      id: l(e),
       ref_key: "elementRef",
-      ref: r,
+      ref: d,
       class: "omnipad-target-zone",
-      style: _(a.value)
+      style: $(m.value),
+      onPointerdown: u,
+      onPointermove: v,
+      onPointerup: r,
+      onPointercancel: R,
+      onLostpointercapture: R
     }, [
-      L(ve, { name: "pulse" }, {
-        default: K(() => [
-          h(s)?.isFocusReturning ? (p(), E("div", {
-            key: 0,
-            class: "focus-feedback-ring",
-            style: _({
-              left: `${h(s).position.x}%`,
-              top: `${h(s).position.y}%`
-            })
-          }, null, 4)) : T("", !0)
-        ]),
-        _: 1
-      }),
-      h(o).cursorEnabled ? (p(), E("div", {
+      I(y.$slots, "focus-feedback", {
+        state: l(t),
+        isReturning: l(t)?.isFocusReturning,
+        cursorPos: l(t)?.position
+      }, () => [
+        x(pe, { name: "omnipad-default-focus-fade" }, {
+          default: V(() => [
+            l(t)?.isFocusReturning ? (p(), g("div", Te)) : B("", !0)
+          ]),
+          _: 1
+        })
+      ], !0),
+      l(i).cursorEnabled ? (p(), g("div", {
         key: 0,
         class: "omnipad-virtual-cursor",
-        style: _(c.value)
+        style: $(f.value)
       }, [
-        G("div", {
-          class: j(["cursor-dot", { "is-down": h(s)?.isPointerDown }])
-        }, null, 2)
-      ], 4)) : T("", !0)
-    ], 12, Fe));
-  }
-}), Le = /* @__PURE__ */ w(Ye, [["__scopeId", "data-v-b9d49b97"]]), Ke = {
+        I(y.$slots, "cursor", {
+          state: l(t),
+          isDown: l(t)?.isPointerDown,
+          cursorPos: l(t)?.position
+        }, () => [
+          Y("div", {
+            class: z(["omnipad-default-cursor-dot", { "is-down": l(t)?.isPointerDown }])
+          }, null, 2)
+        ], !0)
+      ], 4)) : B("", !0)
+    ], 44, Ce));
+  }
+}), Ne = /* @__PURE__ */ h(Ie, [["__scopeId", "data-v-70b706ac"]]), De = {
   key: 0,
   class: "omnipad-button-label"
-}, Ve = /* @__PURE__ */ P({
+}, he = /* @__PURE__ */ b({
   __name: "VirtualButtonBase",
   props: {
     layout: {},
     isActive: { type: Boolean },
     label: {}
   },
-  setup(e) {
-    const t = e, n = y(() => t.layout ? V(t.layout) : {});
-    return (i, o) => (p(), E("div", {
-      class: j(["omnipad-button-base", { "omnipad-is-active": e.isActive }]),
-      style: _(n.value),
+  setup(n) {
+    const o = n, s = _(() => o.layout ? S(o.layout) : {});
+    return (e, i) => (p(), g("div", {
+      class: z(["omnipad-button-base", { "is-active": n.isActive }]),
+      style: $(s.value),
       tabindex: "-1"
     }, [
-      k(i.$slots, "default", {}, () => [
-        e.label ? (p(), E("span", Ke, me(e.label), 1)) : T("", !0)
+      I(e.$slots, "default", {}, () => [
+        n.label ? (p(), g("span", De, fe(n.label), 1)) : B("", !0)
       ], !0)
     ], 6));
   }
-}), Ze = /* @__PURE__ */ w(Ve, [["__scopeId", "data-v-6cbe805c"]]), We = /* @__PURE__ */ P({
+}), L = /* @__PURE__ */ h(he, [["__scopeId", "data-v-3db6d4f9"]]), Ee = /* @__PURE__ */ b({
   __name: "VirtualKeyboardButton",
   props: {
     treeNode: {},
@@ -750,42 +289,125 @@ const ke = ["id"], xe = /* @__PURE__ */ P({
     mapping: {},
     layout: {}
   },
-  setup(e, { expose: t }) {
-    const n = e, i = {
+  setup(n, { expose: o }) {
+    const s = n, e = {
       label: "BTN"
-    }, { uid: o, config: s } = M(
-      v.KEYBOARD_BUTTON,
-      n,
-      i
-    ), { core: r, state: a, elementRef: c } = U(
-      () => new we(o.value, s.value)
-    ), l = (m) => r.value?.onPointerDown(m), u = (m) => r.value?.onPointerUp(m);
-    return t({
-      uid: o,
-      onPointerDown: l,
-      onPointerUp: u
-    }), (m, O) => (p(), C(Ze, {
-      id: h(o),
+    }, { uid: i, config: a } = E(
+      P.KEYBOARD_BUTTON,
+      s,
+      e
+    ), { core: t, state: d, elementRef: m } = D(
+      () => new q(i.value, a.value)
+    ), f = (r) => t.value?.onPointerDown(r), u = (r) => t.value?.onPointerUp(r), v = (r) => t.value?.onPointerCancel(r);
+    return o({
+      uid: i,
+      onPointerDown: f,
+      onPointerUp: u,
+      onPointerCancel: v
+    }), (r, R) => (p(), T(L, {
+      id: l(i),
+      ref_key: "elementRef",
+      ref: m,
+      layout: l(a).layout,
+      label: l(a).label,
+      "is-active": l(d)?.isPressed,
+      onPointerdown: f,
+      onPointerup: u,
+      onPointercancel: v,
+      onLostpointercapture: v
+    }, null, 8, ["id", "layout", "label", "is-active"]));
+  }
+}), $e = /* @__PURE__ */ b({
+  __name: "VirtualMouseButton",
+  props: {
+    treeNode: {},
+    widgetId: {},
+    label: {},
+    targetStageId: {},
+    button: {},
+    fixedPoint: {},
+    layout: {}
+  },
+  setup(n, { expose: o }) {
+    const s = n, e = {
+      label: "LMB",
+      button: 0
+    }, { uid: i, config: a } = E(
+      P.MOUSE_BUTTON,
+      s,
+      e
+    ), { core: t, state: d, elementRef: m } = D(
+      () => new ee(i.value, a.value)
+    ), f = (r) => t.value?.onPointerDown(r), u = (r) => t.value?.onPointerUp(r), v = (r) => t.value?.onPointerCancel(r);
+    return o({
+      uid: i,
+      onPointerDown: f,
+      onPointerUp: u,
+      onPointerCancel: v
+    }), (r, R) => (p(), T(L, {
+      id: l(i),
+      ref_key: "elementRef",
+      ref: m,
+      layout: l(a).layout,
+      label: l(a).label,
+      "is-active": l(d)?.isPressed,
+      onPointerdown: f,
+      onPointerup: u,
+      onPointercancel: v,
+      onLostpointercapture: v
+    }, null, 8, ["id", "layout", "label", "is-active"]));
+  }
+}), Be = /* @__PURE__ */ b({
+  __name: "VirtualTrackpad",
+  props: {
+    treeNode: {},
+    widgetId: {},
+    label: {},
+    sensitivity: {},
+    targetStageId: {},
+    layout: {}
+  },
+  setup(n, { expose: o }) {
+    const s = n, { uid: e, config: i } = E(P.TRACKPAD, s, {
+      label: "TRACKPAD",
+      sensitivity: 1
+    }), { core: a, state: t, elementRef: d } = D(
+      () => new te(e.value, i.value)
+    ), m = (r) => a.value?.onPointerDown(r), f = (r) => a.value?.onPointerMove(r), u = (r) => a.value?.onPointerUp(r), v = (r) => a.value?.onPointerCancel(r);
+    return o({
+      uid: e,
+      onPointerDown: m,
+      onPointerMove: f,
+      onPointerUp: u,
+      onPointerCancel: v
+    }), (r, R) => (p(), T(L, {
+      id: l(e),
       ref_key: "elementRef",
-      ref: c,
-      layout: h(s).layout,
-      label: h(s).label,
-      "is-active": h(a)?.isPressed,
-      onPointerdown: l,
+      ref: d,
+      class: "omnipad-trackpad",
+      layout: l(i).layout,
+      label: l(i).label,
+      "is-active": l(t)?.isPressed,
+      onPointerdown: m,
+      onPointermove: f,
       onPointerup: u,
-      onPointercancel: u,
-      onLostpointercapture: u
+      onPointercancel: v,
+      onLostpointercapture: v
     }, null, 8, ["id", "layout", "label", "is-active"]));
   }
-});
-x(v.INPUT_ZONE, Ue);
-x(v.ROOT_LAYER, Be);
-x(v.TARGET_ZONE, Le);
-x(v.KEYBOARD_BUTTON, We);
+}), ke = /* @__PURE__ */ h(Be, [["__scopeId", "data-v-c28e3a2e"]]);
+N(P.INPUT_ZONE, ge);
+N(P.ROOT_LAYER, we);
+N(P.TARGET_ZONE, Ne);
+N(P.KEYBOARD_BUTTON, Ee);
+N(P.MOUSE_BUTTON, $e);
+N(P.TRACKPAD, ke);
 export {
-  Ue as InputZone,
-  Be as RootLayer,
-  Le as TargetZone,
-  We as VirtualKeyboardButton,
-  x as registerComponent
+  ge as InputZone,
+  we as RootLayer,
+  Ne as TargetZone,
+  Ee as VirtualKeyboardButton,
+  $e as VirtualMouseButton,
+  ke as VirtualTrackpad,
+  N as registerComponent
 };