@omnipad/vue 0.1.1-alpha.0 → 0.1.1-alpha.1

package/dist/omnipad-vue.mjs

@@ -1,560 +1,85 @@
-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 W, CONTEXT as V, generateUID as j, TYPES as _, resolveLayoutStyle as A, InputZoneCore as G, RootLayerCore as X, TargetZoneCore as H, KeyboardButtonCore as J } from "@omnipad/core";
+import { defineComponent as g, h as Q, shallowRef as q, ref as E, onMounted as ee, onUnmounted as te, openBlock as d, createElementBlock as p, Fragment as ne, renderList as oe, createBlock as $, resolveDynamicComponent as k, unref as u, renderSlot as C, inject as ie, computed as f, provide as ae, useSlots as re, watch as le, nextTick as se, normalizeStyle as b, createVNode as x, withCtx as U, createElementVNode as L, createCommentVNode as I, Transition as ue, normalizeClass as Z, toDisplayString as ce } from "vue";
+const z = {};
+function O(n, t) {
+  z[n] = t;
 }
-function ee(e) {
-  const t = q[e];
-  return t || P({
-    render: () => oe("div", { style: "color:red" }, `[Unknown: ${e}]`)
+function K(n) {
+  const t = z[n];
+  return t || g({
+    render: () => Q("div", { style: "color:red" }, `[Unknown: ${n}]`)
   });
 }
-function U(e) {
-  const t = se(), n = D(), i = D(null), o = (r) => {
-    n.value = r;
+function B(n) {
+  const t = q(), r = E(), e = E(null), a = (o) => {
+    r.value = o;
   };
-  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();
+  let i = null;
+  return ee(() => {
+    const o = n();
+    t.value = o, W.getInstance().register(o), "subscribe" in o && o.subscribe(a);
+    let l = null;
+    e.value && (e.value instanceof Element ? l = e.value : e.value.$el instanceof Element && (l = e.value.$el)), l && "updateRect" in o && (i = new ResizeObserver((y) => {
+      for (const v of y)
+        o.updateRect(v.target.getBoundingClientRect());
+    }), i.observe(l), o.updateRect(l.getBoundingClientRect()));
+  }), te(() => {
+    i && i.disconnect(), t.value && t.value.destroy();
   }), {
     core: t,
-    state: n,
-    elementRef: i
+    state: r,
+    elementRef: e
   };
 }
-const De = { class: "omnipad-virtual-layer-base omnipad-prevent" }, Ce = /* @__PURE__ */ P({
+const de = { class: "omnipad-virtual-layer-base omnipad-prevent" }, ve = /* @__PURE__ */ g({
   __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 (t, r) => (d(), p("div", de, [
+      (d(!0), p(ne, null, oe(n.nodes || [], (e) => (d(), $(k(u(K)(e.type)), {
+        key: e.uid,
+        "tree-node": e
       }, null, 8, ["tree-node"]))), 128)),
-      k(t.$slots, "default", {}, void 0, !0)
+      C(t.$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.`
+}), N = (n, t) => {
+  const r = n.__vccOpts || n;
+  for (const [e, a] of t)
+    r[e] = a;
+  return r;
+}, Y = /* @__PURE__ */ N(ve, [["__scopeId", "data-v-6f1860f6"]]);
+function D(n, t, r = {}) {
+  const e = t.treeNode, a = 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 i = ie(V.PARENT_ID_KEY, E(void 0)), o = f(() => t.parentId || a?.config?.parentId || i.value), l = f(() => t.widgetId || a?.uid || j(n));
+  ae(V.PARENT_ID_KEY, l);
+  const y = f(() => {
+    const v = a?.config || {}, c = Object.fromEntries(
+      Object.entries(t).filter(([m, w]) => w !== void 0 && m !== "treeNode" && m !== "widgetId")
     );
     return {
-      ...n,
-      ...l,
-      ...u,
-      id: a.value,
-      type: e,
-      parentId: r.value,
+      ...r,
+      ...v,
+      ...c,
+      id: l.value,
+      type: n,
+      parentId: o.value,
       // 特殊处理 Layout：深度合并，确保即便只传了 { width: 100 } 也不丢失原来的 left/top
       layout: {
-        ...n.layout || {},
-        ...l.layout || {},
-        ...u.layout || {}
+        ...r.layout || {},
+        ...v.layout || {},
+        ...c.layout || {}
       }
     };
   });
-  return { uid: a, config: c };
+  return { uid: l, config: y };
 }
-const ke = ["id"], xe = /* @__PURE__ */ P({
+const fe = ["id"], pe = /* @__PURE__ */ g({
   __name: "InputZone",
   props: {
     treeNode: {},
@@ -562,113 +87,113 @@ 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 t = n, r = re(), e = E(null), { uid: a, config: i } = D(_.INPUT_ZONE, t), { core: o, state: l, elementRef: y } = B(
+      () => new G(a.value, i.value)
+    ), v = f(() => {
+      const s = t.treeNode?.config?.dynamicWidgetId;
+      return t.treeNode?.children?.filter((P) => P.uid !== s) || [];
+    }), c = f(() => {
+      const P = (r.dynamicWidget?.() || []).filter((h) => !(h.type === Comment || h.type === Text)), R = t.treeNode?.children?.find(
+        (h) => h.uid === t.treeNode?.config?.dynamicWidgetId
+      ), S = P.length > 0;
+      return P.length > 1 && console.error(
+        `[OmniPad-Validation] InputZone ${a.value} has multiple dynamic widgets in slot. Only the first one will be activated.`
+      ), S && R && console.warn(
+        `[OmniPad-Validation] InputZone ${a.value} has both Slot and Config dynamic widgets. Config ignored.`
       ), {
-        nodeToRender: $ ? b[0] : I || null,
-        isFromSlot: $
+        nodeToRender: S ? P[0] : R || null,
+        isFromSlot: S
       };
     });
-    he(
-      i,
-      (d) => {
-        pe(() => {
-          d && d?.uid && r.value?.updateConfig({
-            dynamicWidgetId: d.uid
+    le(
+      e,
+      (s) => {
+        se(() => {
+          s && s?.uid && o.value?.updateConfig({
+            dynamicWidgetId: s.uid
           });
         });
       },
       { immediate: !0 }
     );
-    const m = y(() => V(s.value.layout)), O = y(() => a.value?.isDynamicActive ? {
+    const m = f(() => A(i.value.layout)), w = f(() => l.value?.isDynamicActive ? {
       position: "absolute",
-      left: `${a.value.dynamicPosition.x}%`,
-      top: `${a.value.dynamicPosition.y}%`,
+      left: `${l.value.dynamicPosition.x}%`,
+      top: `${l.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" }), F = (s) => {
+      o.value && (o.value.onPointerDown(s), l.value?.isDynamicActive && e.value && typeof e.value.onPointerDown == "function" && e.value.onPointerDown(s));
+    }, M = (s) => {
+      o.value && (o.value.onPointerMove(s), l.value?.isDynamicActive && e.value && typeof e.value.onPointerMove == "function" && e.value.onPointerMove(s));
+    }, T = (s) => {
+      l.value?.isDynamicActive && e.value && typeof e.value.onPointerUp == "function" && e.value.onPointerUp(s), o.value && o.value.onPointerUp(s);
     };
-    return (d, b) => (p(), E("div", {
-      id: h(o),
+    return (s, P) => (d(), p("div", {
+      id: u(a),
       ref_key: "elementRef",
-      ref: c,
+      ref: y,
       class: "omnipad-input-zone omnipad-prevent",
-      style: _(m.value)
+      style: b(m.value)
     }, [
-      L(te, { nodes: l.value }, {
-        default: K(() => [
-          k(d.$slots, "default", {}, void 0, !0)
+      x(Y, { nodes: v.value }, {
+        default: U(() => [
+          C(s.$slots, "default", {}, void 0, !0)
         ]),
         _: 3
       }, 8, ["nodes"]),
-      h(r)?.isInterceptorRequired ? (p(), E("div", {
+      u(o)?.isInterceptorRequired ? (d(), p("div", {
         key: 0,
         class: "omnipad-input-zone-trigger",
-        onPointerdown: ne,
-        onPointermove: ie,
-        onPointerup: S,
-        onPointercancel: S,
-        onLostpointercapture: S,
-        onPointerleave: S
+        onPointerdown: F,
+        onPointermove: M,
+        onPointerup: T,
+        onPointercancel: T,
+        onLostpointercapture: T,
+        onPointerleave: T
       }, [
-        G("div", {
+        L("div", {
           class: "dynamic-widget-mount",
-          style: _(O.value)
+          style: b(w.value)
         }, [
-          u.value.isFromSlot ? (p(), C(Y(u.value.nodeToRender), {
+          c.value.isFromSlot ? (d(), $(k(c.value.nodeToRender), {
             key: 0,
-            ref: (I) => i.value = I
-          }, null, 512)) : u.value.nodeToRender ? (p(), C(Y(h(ee)(u.value.nodeToRender.type)), {
+            ref: (R) => e.value = R
+          }, null, 512)) : c.value.nodeToRender ? (d(), $(k(u(K)(c.value.nodeToRender.type)), {
             key: 1,
-            ref: (I) => i.value = I,
-            "tree-node": u.value.nodeToRender
-          }, null, 8, ["tree-node"])) : T("", !0)
+            ref: (R) => e.value = R,
+            "tree-node": c.value.nodeToRender
+          }, null, 8, ["tree-node"])) : I("", !0)
         ], 4)
-      ], 32)) : T("", !0)
-    ], 12, ke));
+      ], 32)) : I("", !0)
+    ], 12, fe));
   }
-}), Ue = /* @__PURE__ */ w(xe, [["__scopeId", "data-v-02669919"]]), Me = ["id"], $e = /* @__PURE__ */ P({
+}), ye = /* @__PURE__ */ N(pe, [["__scopeId", "data-v-02669919"]]), me = ["id"], _e = /* @__PURE__ */ g({
   __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 t = n, { uid: r, config: e } = D(_.ROOT_LAYER, t), { elementRef: a } = B(() => new X(r.value, e.value));
+    return (i, o) => (d(), p("div", {
+      id: u(r),
       ref_key: "elementRef",
-      ref: o,
+      ref: a,
       class: "omnipad-virtual-layer"
     }, [
-      L(te, {
-        nodes: e.treeNode?.children || []
+      x(Y, {
+        nodes: n.treeNode?.children || []
       }, {
-        default: K(() => [
-          k(s.$slots, "default", {}, void 0, !0)
+        default: U(() => [
+          C(i.$slots, "default", {}, void 0, !0)
         ]),
         _: 3
       }, 8, ["nodes"])
-    ], 8, Me));
+    ], 8, me));
   }
-}), Be = /* @__PURE__ */ w($e, [["__scopeId", "data-v-a509fd6e"]]), Fe = ["id"], Ye = /* @__PURE__ */ P({
+}), ge = /* @__PURE__ */ N(_e, [["__scopeId", "data-v-a509fd6e"]]), Pe = ["id"], Re = /* @__PURE__ */ g({
   __name: "TargetZone",
   props: {
     treeNode: {},
@@ -677,70 +202,70 @@ const ke = ["id"], xe = /* @__PURE__ */ P({
     cursorAutoDelay: {},
     layout: {}
   },
-  setup(e) {
-    const t = e, n = {
+  setup(n) {
+    const t = n, r = {
       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
+    }, { uid: e, config: a } = D(_.TARGET_ZONE, t, r), { state: i, elementRef: o } = B(
+      () => new H(e.value, a.value)
+    ), l = f(() => A(a.value.layout)), y = f(() => i.value ? {
+      left: `${i.value.position.x}%`,
+      top: `${i.value.position.y}%`,
+      opacity: i.value.isVisible ? 1 : 0
     } : { display: "none" });
-    return (l, u) => (p(), E("div", {
-      id: h(i),
+    return (v, c) => (d(), p("div", {
+      id: u(e),
       ref_key: "elementRef",
-      ref: r,
+      ref: o,
       class: "omnipad-target-zone",
-      style: _(a.value)
+      style: b(l.value)
     }, [
-      L(ve, { name: "pulse" }, {
-        default: K(() => [
-          h(s)?.isFocusReturning ? (p(), E("div", {
+      x(ue, { name: "pulse" }, {
+        default: U(() => [
+          u(i)?.isFocusReturning ? (d(), p("div", {
             key: 0,
             class: "focus-feedback-ring",
-            style: _({
-              left: `${h(s).position.x}%`,
-              top: `${h(s).position.y}%`
+            style: b({
+              left: `${u(i).position.x}%`,
+              top: `${u(i).position.y}%`
             })
-          }, null, 4)) : T("", !0)
+          }, null, 4)) : I("", !0)
         ]),
         _: 1
       }),
-      h(o).cursorEnabled ? (p(), E("div", {
+      u(a).cursorEnabled ? (d(), p("div", {
         key: 0,
         class: "omnipad-virtual-cursor",
-        style: _(c.value)
+        style: b(y.value)
       }, [
-        G("div", {
-          class: j(["cursor-dot", { "is-down": h(s)?.isPointerDown }])
+        L("div", {
+          class: Z(["cursor-dot", { "is-down": u(i)?.isPointerDown }])
         }, null, 2)
-      ], 4)) : T("", !0)
-    ], 12, Fe));
+      ], 4)) : I("", !0)
+    ], 12, Pe));
   }
-}), Le = /* @__PURE__ */ w(Ye, [["__scopeId", "data-v-b9d49b97"]]), Ke = {
+}), be = /* @__PURE__ */ N(Re, [["__scopeId", "data-v-b9d49b97"]]), Ie = {
   key: 0,
   class: "omnipad-button-label"
-}, Ve = /* @__PURE__ */ P({
+}, Ne = /* @__PURE__ */ g({
   __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 t = n, r = f(() => t.layout ? A(t.layout) : {});
+    return (e, a) => (d(), p("div", {
+      class: Z(["omnipad-button-base", { "omnipad-is-active": n.isActive }]),
+      style: b(r.value),
       tabindex: "-1"
     }, [
-      k(i.$slots, "default", {}, () => [
-        e.label ? (p(), E("span", Ke, me(e.label), 1)) : T("", !0)
+      C(e.$slots, "default", {}, () => [
+        n.label ? (d(), p("span", Ie, ce(n.label), 1)) : I("", !0)
       ], !0)
     ], 6));
   }
-}), Ze = /* @__PURE__ */ w(Ve, [["__scopeId", "data-v-6cbe805c"]]), We = /* @__PURE__ */ P({
+}), we = /* @__PURE__ */ N(Ne, [["__scopeId", "data-v-6cbe805c"]]), Te = /* @__PURE__ */ g({
   __name: "VirtualKeyboardButton",
   props: {
     treeNode: {},
@@ -750,42 +275,42 @@ const ke = ["id"], xe = /* @__PURE__ */ P({
     mapping: {},
     layout: {}
   },
-  setup(e, { expose: t }) {
-    const n = e, i = {
+  setup(n, { expose: t }) {
+    const r = 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);
+    }, { uid: a, config: i } = D(
+      _.KEYBOARD_BUTTON,
+      r,
+      e
+    ), { core: o, state: l, elementRef: y } = B(
+      () => new J(a.value, i.value)
+    ), v = (m) => o.value?.onPointerDown(m), c = (m) => o.value?.onPointerUp(m);
     return t({
-      uid: o,
-      onPointerDown: l,
-      onPointerUp: u
-    }), (m, O) => (p(), C(Ze, {
-      id: h(o),
+      uid: a,
+      onPointerDown: v,
+      onPointerUp: c
+    }), (m, w) => (d(), $(we, {
+      id: u(a),
       ref_key: "elementRef",
-      ref: c,
-      layout: h(s).layout,
-      label: h(s).label,
-      "is-active": h(a)?.isPressed,
-      onPointerdown: l,
-      onPointerup: u,
-      onPointercancel: u,
-      onLostpointercapture: u
+      ref: y,
+      layout: u(i).layout,
+      label: u(i).label,
+      "is-active": u(l)?.isPressed,
+      onPointerdown: v,
+      onPointerup: c,
+      onPointercancel: c,
+      onLostpointercapture: c
     }, 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);
+O(_.INPUT_ZONE, ye);
+O(_.ROOT_LAYER, ge);
+O(_.TARGET_ZONE, be);
+O(_.KEYBOARD_BUTTON, Te);
 export {
-  Ue as InputZone,
-  Be as RootLayer,
-  Le as TargetZone,
-  We as VirtualKeyboardButton,
-  x as registerComponent
+  ye as InputZone,
+  ge as RootLayer,
+  be as TargetZone,
+  Te as VirtualKeyboardButton,
+  O as registerComponent
 };

package/dist/omnipad-vue.umd.js

@@ -1 +1 @@
-(function(m,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(m=typeof globalThis<"u"?globalThis:m||self,n(m.OmnipadVue={},m.Vue))})(this,(function(m,n){"use strict";var G=Object.defineProperty,j=(e,t,o)=>t in e?G(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,y=(e,t,o)=>j(e,typeof t!="symbol"?t+"":t,o),h={INPUT_ZONE:"input-zone",TARGET_ZONE:"target-zone",KEYBOARD_BUTTON:"keyboard-button",ROOT_LAYER:"root-layer"},p={KEYDOWN:"keydown",KEYUP:"keyup",POINTER:"pointer",POINTERMOVE:"pointermove",POINTERDOWN:"pointerdown",POINTERUP:"pointerup",MOUSE:"mouse",MOUSEMOVE:"mousemove",MOUSEDOWN:"mousedown",MOUSEUP:"mouseup",CLICK:"click"},B={PARENT_ID_KEY:"omnipad-parent-id-link"},U=(e,t=2)=>{const o=Math.pow(10,t);return Math.round(e*o)/o},T=(e,t)=>U(e*t/100),$=(e,t)=>t===0?0:U(e*100/t),x=(e,t)=>{let o=document.elementFromPoint(e,t);for(;o&&o.shadowRoot;){const i=o.shadowRoot.elementFromPoint(e,t);if(!i||i===o)break;o=i}return o},M=()=>{let e=document.activeElement;for(;e&&e.shadowRoot&&e.shadowRoot.activeElement;)e=e.shadowRoot.activeElement;return e},X=e=>{M()!==e&&(e.hasAttribute("tabindex")||e.setAttribute("tabindex","-1"),e.focus())},H=(e,t)=>{const o=new KeyboardEvent(e,{...t,which:t.keyCode,bubbles:!0,cancelable:!0,view:window});window.dispatchEvent(o)},q=(e,t,o,i={})=>{const r=x(t,o);if(!r)return;const s={bubbles:!0,cancelable:!0,composed:!0,clientX:t,clientY:o,view:window,...i};if(e.startsWith("pointer")){r.dispatchEvent(new PointerEvent(e,{isPrimary:!0,pointerId:1,pointerType:"mouse",...s}));const a=e.replace("pointer","mouse");r.dispatchEvent(new MouseEvent(a,s))}else r.dispatchEvent(new MouseEvent(e,s))},J=(e="omnipad")=>{const t=Date.now().toString(36),o=Math.random().toString(36).substring(2,6);return`${e}-${t}-${o}`},N=e=>{if(!e)return{};const t={};t.position="absolute",["left","top","right","bottom","width","height"].forEach(r=>{const s=e[r];s!==void 0&&(t[r]=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},Q=class{constructor(){y(this,"listeners",new Set)}subscribe(e){return this.listeners.add(e),()=>this.listeners.delete(e)}emit(e){this.listeners.forEach(t=>{try{t(e)}catch(o){console.error("[OmniPad-Core] Emitter callback error:",o)}})}clear(){this.listeners.clear()}},b=class{constructor(e,t,o,i){y(this,"uid"),y(this,"type"),y(this,"config"),y(this,"state"),y(this,"rect",null),y(this,"stateEmitter",new Q),this.uid=e,this.type=t,this.config=o,this.state=i}subscribe(e){return e(this.state),this.stateEmitter.subscribe(e)}setState(e){this.state={...this.state,...e},this.stateEmitter.emit(this.state)}destroy(){this.reset(),this.stateEmitter.clear(),k.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}},C=Symbol.for("omnipad.registry.instance"),k=class W{constructor(){y(this,"entities",new Map)}static getInstance(){const t=globalThis;return t[C]||(t[C]=new W),t[C]}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 o=this.getAllEntities();if(!t)return o;if(!this.entities.get(t))return console.warn(`[OmniPad-Core] Registry: Root entity ${t} not found.`),[];const r=new Map;o.forEach(l=>{if(l instanceof b){const d=l.getConfig();d.parentId&&(r.has(d.parentId)||r.set(d.parentId,[]),r.get(d.parentId).push(l))}});const s=[],a=[t],c=new Set;for(;a.length>0;){const l=a.shift();if(c.has(l))continue;c.add(l);const d=this.entities.get(l);if(d){s.push(d);const u=r.get(l);u&&u.forEach(g=>a.push(g.uid))}}return s}destroyByRoot(t){const o=this.getEntitiesByRoot(t);for(let i=o.length-1;i>=0;i--){const r=o[i];try{r.destroy()}catch(s){console.error(`[OmniPad-Core] Error during destroyByRoot at ${r.uid}:`,s)}}}clear(){this.entities.clear()}resetAll(){this.entities.forEach(t=>{"reset"in t&&t.reset()})}debugGetSnapshot(){return new Map(this.entities)}},ee={isDynamicActive:!1,dynamicPointerId:null,dynamicPosition:{x:0,y:0}},te=class extends b{constructor(e,t){super(e,h.INPUT_ZONE,t,ee)}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)}handleRelease(e){if(e.pointerId===this.state.dynamicPointerId){try{e.currentTarget.releasePointerCapture(e.pointerId)}catch{}this.setState({isDynamicActive:!1,dynamicPointerId:null})}}calculateRelativePosition(e,t){return this.rect?{x:$(e-this.rect.left,this.rect.width),y:$(t-this.rect.top,this.rect.height)}:{x:0,y:0}}get isInterceptorRequired(){return!!(this.config.dynamicWidgetId||this.config.preventFocusLoss)}reset(){this.setState({isDynamicActive:!1,dynamicPointerId:null})}},A={isActive:!1,isPressed:!1,pointerId:null,value:0},ne=class extends b{constructor(e,t){super(e,h.KEYBOARD_BUTTON,t,A)}onPointerDown(e){e.cancelable&&e.preventDefault(),e.target.setPointerCapture(e.pointerId),this.setState({isActive:!0,isPressed:!0,pointerId:e.pointerId}),this.sendInputSignal(p.KEYDOWN)}onPointerUp(e){e.cancelable&&e.preventDefault(),this.handleRelease(e)}onPointerCancel(e){this.handleRelease(e)}onPointerMove(e){e.cancelable&&e.preventDefault()}handleRelease(e){this.state.pointerId===e.pointerId&&(e.target.hasPointerCapture(e.pointerId)&&e.target.releasePointerCapture(e.pointerId),this.setState(A),this.sendInputSignal(p.KEYUP))}sendInputSignal(e){const t=this.config.targetStageId;if(!t)return;const o=k.getInstance().getEntity(t);if(o&&typeof o.handleSignal=="function"){const i={targetStageId:t,type:e,payload:{key:this.config.mapping.key,code:this.config.mapping.code,keyCode:this.config.mapping.keyCode}};o.handleSignal(i)}}reset(){this.state.isPressed&&this.sendInputSignal(p.KEYUP),this.setState(A)}},oe={isHighlighted:!1},ie=class extends b{constructor(e,t){super(e,h.ROOT_LAYER,t,oe)}reset(){}},re={position:{x:50,y:50},isVisible:!1,isPointerDown:!1,isFocusReturning:!1},se=class extends b{constructor(e,t){super(e,h.TARGET_ZONE,t,re),y(this,"hideTimer",null),y(this,"focusFeedbackTimer",null)}handleSignal(e){const{type:t,payload:o}=e;switch(this.ensureFocus(),t){case p.KEYDOWN:case p.KEYUP:H(t,o);break;case p.MOUSEMOVE:o.point&&(this.updateCursorPosition(o.point),this.config.cursorEnabled&&this.showCursor(),this.executeMouseAction(p.POINTERMOVE,o));break;case p.MOUSEDOWN:case p.MOUSEUP:case p.CLICK:this.config.cursorEnabled&&this.showCursor(),this.executeMouseAction(t.startsWith(p.MOUSE)?t.replace(p.MOUSE,p.POINTER):t,o);break}}executeMouseAction(e,t){if(!this.rect)return;e===p.POINTERDOWN&&this.setState({isPointerDown:!0}),e===p.POINTERUP&&this.setState({isPointerDown:!1});const o=t.point||this.state.position,i=this.rect.left+T(o.x,this.rect.width),r=this.rect.top+T(o.y,this.rect.height);q(e,i,r,{button:t.button??0,buttons:this.state.isPointerDown?1:0})}ensureFocus(){if(!this.rect)return;const e=this.rect.left+T(this.state.position.x,this.rect.width),t=this.rect.top+T(this.state.position.y,this.rect.height),o=x(e,t);o&&M()!==o&&(X(o),this.triggerFocusFeedback())}triggerFocusFeedback(){this.setState({isFocusReturning:!0}),this.focusFeedbackTimer&&clearTimeout(this.focusFeedbackTimer),this.focusFeedbackTimer=setTimeout(()=>this.setState({isFocusReturning:!1}),500)}updateCursorPosition(e){this.setState({position:{...e}})}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))}reset(){this.state.isPointerDown&&this.executeMouseAction(p.POINTERUP,{}),this.hideTimer&&clearTimeout(this.hideTimer),this.focusFeedbackTimer&&clearTimeout(this.focusFeedbackTimer),this.setState({isVisible:!1,isPointerDown:!1,isFocusReturning:!1})}};const V={};function I(e,t){V[e]=t}function F(e){const t=V[e];return t||n.defineComponent({render:()=>n.h("div",{style:"color:red"},`[Unknown: ${e}]`)})}function v(e){const t=n.shallowRef(),o=n.ref(),i=n.ref(null),r=a=>{o.value=a};let s=null;return n.onMounted(()=>{const a=e();t.value=a,k.getInstance().register(a),"subscribe"in a&&a.subscribe(r);let c=null;i.value&&(i.value instanceof Element?c=i.value:i.value.$el instanceof Element&&(c=i.value.$el)),c&&"updateRect"in a&&(s=new ResizeObserver(l=>{for(const d of l)a.updateRect(d.target.getBoundingClientRect())}),s.observe(c),a.updateRect(c.getBoundingClientRect()))}),n.onUnmounted(()=>{s&&s.disconnect(),t.value&&t.value.destroy()}),{core:t,state:o,elementRef:i}}const ae={class:"omnipad-virtual-layer-base omnipad-prevent"},ce=n.defineComponent({__name:"VirtualLayerBase",props:{nodes:{}},setup(e){return(t,o)=>(n.openBlock(),n.createElementBlock("div",ae,[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(e.nodes||[],i=>(n.openBlock(),n.createBlock(n.resolveDynamicComponent(n.unref(F)(i.type)),{key:i.uid,"tree-node":i},null,8,["tree-node"]))),128)),n.renderSlot(t.$slots,"default",{},void 0,!0)]))}}),_=(e,t)=>{const o=e.__vccOpts||e;for(const[i,r]of t)o[i]=r;return o},L=_(ce,[["__scopeId","data-v-6f1860f6"]]);function R(e,t,o={}){const i=t.treeNode,r=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.`);const s=n.inject(B.PARENT_ID_KEY,n.ref(void 0)),a=n.computed(()=>t.parentId||r?.config?.parentId||s.value),c=n.computed(()=>t.widgetId||r?.uid||J(e));n.provide(B.PARENT_ID_KEY,c);const l=n.computed(()=>{const d=r?.config||{},u=Object.fromEntries(Object.entries(t).filter(([g,w])=>w!==void 0&&g!=="treeNode"&&g!=="widgetId"));return{...o,...d,...u,id:c.value,type:e,parentId:a.value,layout:{...o.layout||{},...d.layout||{},...u.layout||{}}}});return{uid:c,config:l}}const le=["id"],Y=_(n.defineComponent({__name:"InputZone",props:{treeNode:{},widgetId:{},layout:{},preventFocusLoss:{}},setup(e){const t=e,o=n.useSlots(),i=n.ref(null),{uid:r,config:s}=R(h.INPUT_ZONE,t),{core:a,state:c,elementRef:l}=v(()=>new te(r.value,s.value)),d=n.computed(()=>{const f=t.treeNode?.config?.dynamicWidgetId;return t.treeNode?.children?.filter(E=>E.uid!==f)||[]}),u=n.computed(()=>{const E=(o.dynamicWidget?.()||[]).filter(O=>!(O.type===Comment||O.type===Text)),P=t.treeNode?.children?.find(O=>O.uid===t.treeNode?.config?.dynamicWidgetId),D=E.length>0;return E.length>1&&console.error(`[OmniPad-Validation] InputZone ${r.value} has multiple dynamic widgets in slot. Only the first one will be activated.`),D&&P&&console.warn(`[OmniPad-Validation] InputZone ${r.value} has both Slot and Config dynamic widgets. Config ignored.`),{nodeToRender:D?E[0]:P||null,isFromSlot:D}});n.watch(i,f=>{n.nextTick(()=>{f&&f?.uid&&a.value?.updateConfig({dynamicWidgetId:f.uid})})},{immediate:!0});const g=n.computed(()=>N(s.value.layout)),w=n.computed(()=>c.value?.isDynamicActive?{position:"absolute",left:`${c.value.dynamicPosition.x}%`,top:`${c.value.dynamicPosition.y}%`,zIndex:100,pointerEvents:"auto"}:{display:"none"}),he=f=>{a.value&&(a.value.onPointerDown(f),c.value?.isDynamicActive&&i.value&&typeof i.value.onPointerDown=="function"&&i.value.onPointerDown(f))},me=f=>{a.value&&(a.value.onPointerMove(f),c.value?.isDynamicActive&&i.value&&typeof i.value.onPointerMove=="function"&&i.value.onPointerMove(f))},S=f=>{c.value?.isDynamicActive&&i.value&&typeof i.value.onPointerUp=="function"&&i.value.onPointerUp(f),a.value&&a.value.onPointerUp(f)};return(f,E)=>(n.openBlock(),n.createElementBlock("div",{id:n.unref(r),ref_key:"elementRef",ref:l,class:"omnipad-input-zone omnipad-prevent",style:n.normalizeStyle(g.value)},[n.createVNode(L,{nodes:d.value},{default:n.withCtx(()=>[n.renderSlot(f.$slots,"default",{},void 0,!0)]),_:3},8,["nodes"]),n.unref(a)?.isInterceptorRequired?(n.openBlock(),n.createElementBlock("div",{key:0,class:"omnipad-input-zone-trigger",onPointerdown:he,onPointermove:me,onPointerup:S,onPointercancel:S,onLostpointercapture:S,onPointerleave:S},[n.createElementVNode("div",{class:"dynamic-widget-mount",style:n.normalizeStyle(w.value)},[u.value.isFromSlot?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(u.value.nodeToRender),{key:0,ref:P=>i.value=P},null,512)):u.value.nodeToRender?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(n.unref(F)(u.value.nodeToRender.type)),{key:1,ref:P=>i.value=P,"tree-node":u.value.nodeToRender},null,8,["tree-node"])):n.createCommentVNode("",!0)],4)],32)):n.createCommentVNode("",!0)],12,le))}}),[["__scopeId","data-v-02669919"]]),de=["id"],K=_(n.defineComponent({__name:"RootLayer",props:{treeNode:{},widgetId:{}},setup(e){const t=e,{uid:o,config:i}=R(h.ROOT_LAYER,t),{elementRef:r}=v(()=>new ie(o.value,i.value));return(s,a)=>(n.openBlock(),n.createElementBlock("div",{id:n.unref(o),ref_key:"elementRef",ref:r,class:"omnipad-virtual-layer"},[n.createVNode(L,{nodes:e.treeNode?.children||[]},{default:n.withCtx(()=>[n.renderSlot(s.$slots,"default",{},void 0,!0)]),_:3},8,["nodes"])],8,de))}}),[["__scopeId","data-v-a509fd6e"]]),ue=["id"],z=_(n.defineComponent({__name:"TargetZone",props:{treeNode:{},widgetId:{},cursorEnabled:{type:Boolean},cursorAutoDelay:{},layout:{}},setup(e){const t=e,o={cursorAutoDelay:2500},{uid:i,config:r}=R(h.TARGET_ZONE,t,o),{state:s,elementRef:a}=v(()=>new se(i.value,r.value)),c=n.computed(()=>N(r.value.layout)),l=n.computed(()=>s.value?{left:`${s.value.position.x}%`,top:`${s.value.position.y}%`,opacity:s.value.isVisible?1:0}:{display:"none"});return(d,u)=>(n.openBlock(),n.createElementBlock("div",{id:n.unref(i),ref_key:"elementRef",ref:a,class:"omnipad-target-zone",style:n.normalizeStyle(c.value)},[n.createVNode(n.Transition,{name:"pulse"},{default:n.withCtx(()=>[n.unref(s)?.isFocusReturning?(n.openBlock(),n.createElementBlock("div",{key:0,class:"focus-feedback-ring",style:n.normalizeStyle({left:`${n.unref(s).position.x}%`,top:`${n.unref(s).position.y}%`})},null,4)):n.createCommentVNode("",!0)]),_:1}),n.unref(r).cursorEnabled?(n.openBlock(),n.createElementBlock("div",{key:0,class:"omnipad-virtual-cursor",style:n.normalizeStyle(l.value)},[n.createElementVNode("div",{class:n.normalizeClass(["cursor-dot",{"is-down":n.unref(s)?.isPointerDown}])},null,2)],4)):n.createCommentVNode("",!0)],12,ue))}}),[["__scopeId","data-v-b9d49b97"]]),fe={key:0,class:"omnipad-button-label"},pe=_(n.defineComponent({__name:"VirtualButtonBase",props:{layout:{},isActive:{type:Boolean},label:{}},setup(e){const t=e,o=n.computed(()=>t.layout?N(t.layout):{});return(i,r)=>(n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(["omnipad-button-base",{"omnipad-is-active":e.isActive}]),style:n.normalizeStyle(o.value),tabindex:"-1"},[n.renderSlot(i.$slots,"default",{},()=>[e.label?(n.openBlock(),n.createElementBlock("span",fe,n.toDisplayString(e.label),1)):n.createCommentVNode("",!0)],!0)],6))}}),[["__scopeId","data-v-6cbe805c"]]),Z=n.defineComponent({__name:"VirtualKeyboardButton",props:{treeNode:{},widgetId:{},label:{},targetStageId:{},mapping:{},layout:{}},setup(e,{expose:t}){const o=e,i={label:"BTN"},{uid:r,config:s}=R(h.KEYBOARD_BUTTON,o,i),{core:a,state:c,elementRef:l}=v(()=>new ne(r.value,s.value)),d=g=>a.value?.onPointerDown(g),u=g=>a.value?.onPointerUp(g);return t({uid:r,onPointerDown:d,onPointerUp:u}),(g,w)=>(n.openBlock(),n.createBlock(pe,{id:n.unref(r),ref_key:"elementRef",ref:l,layout:n.unref(s).layout,label:n.unref(s).label,"is-active":n.unref(c)?.isPressed,onPointerdown:d,onPointerup:u,onPointercancel:u,onLostpointercapture:u},null,8,["id","layout","label","is-active"]))}});I(h.INPUT_ZONE,Y),I(h.ROOT_LAYER,K),I(h.TARGET_ZONE,z),I(h.KEYBOARD_BUTTON,Z),m.InputZone=Y,m.RootLayer=K,m.TargetZone=z,m.VirtualKeyboardButton=Z,m.registerComponent=I,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));
+(function(f,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("@omnipad/core"),require("vue")):typeof define=="function"&&define.amd?define(["exports","@omnipad/core","vue"],a):(f=typeof globalThis<"u"?globalThis:f||self,a(f.OmnipadVue={},f.OmniPadCore,f.Vue))})(this,(function(f,a,e){"use strict";const b={};function P(o,n){b[o]=n}function S(o){const n=b[o];return n||e.defineComponent({render:()=>e.h("div",{style:"color:red"},`[Unknown: ${o}]`)})}function E(o){const n=e.shallowRef(),c=e.ref(),t=e.ref(null),l=i=>{c.value=i};let r=null;return e.onMounted(()=>{const i=o();n.value=i,a.Registry.getInstance().register(i),"subscribe"in i&&i.subscribe(l);let s=null;t.value&&(t.value instanceof Element?s=t.value:t.value.$el instanceof Element&&(s=t.value.$el)),s&&"updateRect"in i&&(r=new ResizeObserver(m=>{for(const p of m)i.updateRect(p.target.getBoundingClientRect())}),r.observe(s),i.updateRect(s.getBoundingClientRect()))}),e.onUnmounted(()=>{r&&r.disconnect(),n.value&&n.value.destroy()}),{core:n,state:c,elementRef:t}}const v={class:"omnipad-virtual-layer-base omnipad-prevent"},D=e.defineComponent({__name:"VirtualLayerBase",props:{nodes:{}},setup(o){return(n,c)=>(e.openBlock(),e.createElementBlock("div",v,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.nodes||[],t=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(S)(t.type)),{key:t.uid,"tree-node":t},null,8,["tree-node"]))),128)),e.renderSlot(n.$slots,"default",{},void 0,!0)]))}}),B=(o,n)=>{const c=o.__vccOpts||o;for(const[t,l]of n)c[t]=l;return c},I=B(D,[["__scopeId","data-v-6f1860f6"]]);function C(o,n,c={}){const t=n.treeNode,l=t&&t.type===o?t:void 0;t&&t.type!==o&&console.warn(`[OmniPad-Validation] Type mismatch! Component expected "${o}", but received "${t.type}". Config ignored.`);const r=e.inject(a.CONTEXT.PARENT_ID_KEY,e.ref(void 0)),i=e.computed(()=>n.parentId||l?.config?.parentId||r.value),s=e.computed(()=>n.widgetId||l?.uid||a.generateUID(o));e.provide(a.CONTEXT.PARENT_ID_KEY,s);const m=e.computed(()=>{const p=l?.config||{},u=Object.fromEntries(Object.entries(n).filter(([y,k])=>k!==void 0&&y!=="treeNode"&&y!=="widgetId"));return{...c,...p,...u,id:s.value,type:o,parentId:i.value,layout:{...c.layout||{},...p.layout||{},...u.layout||{}}}});return{uid:s,config:m}}const V=["id"],$=B(e.defineComponent({__name:"InputZone",props:{treeNode:{},widgetId:{},layout:{},preventFocusLoss:{}},setup(o){const n=o,c=e.useSlots(),t=e.ref(null),{uid:l,config:r}=C(a.TYPES.INPUT_ZONE,n),{core:i,state:s,elementRef:m}=E(()=>new a.InputZoneCore(l.value,r.value)),p=e.computed(()=>{const d=n.treeNode?.config?.dynamicWidgetId;return n.treeNode?.children?.filter(_=>_.uid!==d)||[]}),u=e.computed(()=>{const _=(c.dynamicWidget?.()||[]).filter(N=>!(N.type===Comment||N.type===Text)),g=n.treeNode?.children?.find(N=>N.uid===n.treeNode?.config?.dynamicWidgetId),R=_.length>0;return _.length>1&&console.error(`[OmniPad-Validation] InputZone ${l.value} has multiple dynamic widgets in slot. Only the first one will be activated.`),R&&g&&console.warn(`[OmniPad-Validation] InputZone ${l.value} has both Slot and Config dynamic widgets. Config ignored.`),{nodeToRender:R?_[0]:g||null,isFromSlot:R}});e.watch(t,d=>{e.nextTick(()=>{d&&d?.uid&&i.value?.updateConfig({dynamicWidgetId:d.uid})})},{immediate:!0});const y=e.computed(()=>a.resolveLayoutStyle(r.value.layout)),k=e.computed(()=>s.value?.isDynamicActive?{position:"absolute",left:`${s.value.dynamicPosition.x}%`,top:`${s.value.dynamicPosition.y}%`,zIndex:100,pointerEvents:"auto"}:{display:"none"}),U=d=>{i.value&&(i.value.onPointerDown(d),s.value?.isDynamicActive&&t.value&&typeof t.value.onPointerDown=="function"&&t.value.onPointerDown(d))},Y=d=>{i.value&&(i.value.onPointerMove(d),s.value?.isDynamicActive&&t.value&&typeof t.value.onPointerMove=="function"&&t.value.onPointerMove(d))},T=d=>{s.value?.isDynamicActive&&t.value&&typeof t.value.onPointerUp=="function"&&t.value.onPointerUp(d),i.value&&i.value.onPointerUp(d)};return(d,_)=>(e.openBlock(),e.createElementBlock("div",{id:e.unref(l),ref_key:"elementRef",ref:m,class:"omnipad-input-zone omnipad-prevent",style:e.normalizeStyle(y.value)},[e.createVNode(I,{nodes:p.value},{default:e.withCtx(()=>[e.renderSlot(d.$slots,"default",{},void 0,!0)]),_:3},8,["nodes"]),e.unref(i)?.isInterceptorRequired?(e.openBlock(),e.createElementBlock("div",{key:0,class:"omnipad-input-zone-trigger",onPointerdown:U,onPointermove:Y,onPointerup:T,onPointercancel:T,onLostpointercapture:T,onPointerleave:T},[e.createElementVNode("div",{class:"dynamic-widget-mount",style:e.normalizeStyle(k.value)},[u.value.isFromSlot?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(u.value.nodeToRender),{key:0,ref:g=>t.value=g},null,512)):u.value.nodeToRender?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(S)(u.value.nodeToRender.type)),{key:1,ref:g=>t.value=g,"tree-node":u.value.nodeToRender},null,8,["tree-node"])):e.createCommentVNode("",!0)],4)],32)):e.createCommentVNode("",!0)],12,V))}}),[["__scopeId","data-v-02669919"]]),A=["id"],h=B(e.defineComponent({__name:"RootLayer",props:{treeNode:{},widgetId:{}},setup(o){const n=o,{uid:c,config:t}=C(a.TYPES.ROOT_LAYER,n),{elementRef:l}=E(()=>new a.RootLayerCore(c.value,t.value));return(r,i)=>(e.openBlock(),e.createElementBlock("div",{id:e.unref(c),ref_key:"elementRef",ref:l,class:"omnipad-virtual-layer"},[e.createVNode(I,{nodes:o.treeNode?.children||[]},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default",{},void 0,!0)]),_:3},8,["nodes"])],8,A))}}),[["__scopeId","data-v-a509fd6e"]]),L=["id"],w=B(e.defineComponent({__name:"TargetZone",props:{treeNode:{},widgetId:{},cursorEnabled:{type:Boolean},cursorAutoDelay:{},layout:{}},setup(o){const n=o,c={cursorAutoDelay:2500},{uid:t,config:l}=C(a.TYPES.TARGET_ZONE,n,c),{state:r,elementRef:i}=E(()=>new a.TargetZoneCore(t.value,l.value)),s=e.computed(()=>a.resolveLayoutStyle(l.value.layout)),m=e.computed(()=>r.value?{left:`${r.value.position.x}%`,top:`${r.value.position.y}%`,opacity:r.value.isVisible?1:0}:{display:"none"});return(p,u)=>(e.openBlock(),e.createElementBlock("div",{id:e.unref(t),ref_key:"elementRef",ref:i,class:"omnipad-target-zone",style:e.normalizeStyle(s.value)},[e.createVNode(e.Transition,{name:"pulse"},{default:e.withCtx(()=>[e.unref(r)?.isFocusReturning?(e.openBlock(),e.createElementBlock("div",{key:0,class:"focus-feedback-ring",style:e.normalizeStyle({left:`${e.unref(r).position.x}%`,top:`${e.unref(r).position.y}%`})},null,4)):e.createCommentVNode("",!0)]),_:1}),e.unref(l).cursorEnabled?(e.openBlock(),e.createElementBlock("div",{key:0,class:"omnipad-virtual-cursor",style:e.normalizeStyle(m.value)},[e.createElementVNode("div",{class:e.normalizeClass(["cursor-dot",{"is-down":e.unref(r)?.isPointerDown}])},null,2)],4)):e.createCommentVNode("",!0)],12,L))}}),[["__scopeId","data-v-b9d49b97"]]),x={key:0,class:"omnipad-button-label"},z=B(e.defineComponent({__name:"VirtualButtonBase",props:{layout:{},isActive:{type:Boolean},label:{}},setup(o){const n=o,c=e.computed(()=>n.layout?a.resolveLayoutStyle(n.layout):{});return(t,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["omnipad-button-base",{"omnipad-is-active":o.isActive}]),style:e.normalizeStyle(c.value),tabindex:"-1"},[e.renderSlot(t.$slots,"default",{},()=>[o.label?(e.openBlock(),e.createElementBlock("span",x,e.toDisplayString(o.label),1)):e.createCommentVNode("",!0)],!0)],6))}}),[["__scopeId","data-v-6cbe805c"]]),O=e.defineComponent({__name:"VirtualKeyboardButton",props:{treeNode:{},widgetId:{},label:{},targetStageId:{},mapping:{},layout:{}},setup(o,{expose:n}){const c=o,t={label:"BTN"},{uid:l,config:r}=C(a.TYPES.KEYBOARD_BUTTON,c,t),{core:i,state:s,elementRef:m}=E(()=>new a.KeyboardButtonCore(l.value,r.value)),p=y=>i.value?.onPointerDown(y),u=y=>i.value?.onPointerUp(y);return n({uid:l,onPointerDown:p,onPointerUp:u}),(y,k)=>(e.openBlock(),e.createBlock(z,{id:e.unref(l),ref_key:"elementRef",ref:m,layout:e.unref(r).layout,label:e.unref(r).label,"is-active":e.unref(s)?.isPressed,onPointerdown:p,onPointerup:u,onPointercancel:u,onLostpointercapture:u},null,8,["id","layout","label","is-active"]))}});P(a.TYPES.INPUT_ZONE,$),P(a.TYPES.ROOT_LAYER,h),P(a.TYPES.TARGET_ZONE,w),P(a.TYPES.KEYBOARD_BUTTON,O),f.InputZone=$,f.RootLayer=h,f.TargetZone=w,f.VirtualKeyboardButton=O,f.registerComponent=P,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnipad/vue",
-  "version": "0.1.1-alpha.0",
+  "version": "0.1.1-alpha.1",
   "description": "",
   "main": "./dist/omnipad-vue.umd.js",
   "module": "./dist/omnipad-vue.mjs",
@@ -27,7 +27,7 @@
     "vue": "^3.5.27"
   },
   "dependencies": {
-    "@omnipad/core": "0.1.1-alpha.0"
+    "@omnipad/core": "0.1.1-alpha.1"
   },
   "publishConfig": {
     "access": "public",