@tachui/viewport 0.8.0-alpha → 0.8.5-alpha

package/dist/index.js

@@ -1,9 +1,10 @@
-var J = Object.defineProperty;
-var Z = (n, e, t) => e in n ? J(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
-var o = (n, e, t) => Z(n, typeof e != "symbol" ? e + "" : e, t);
-import { createSignal as z, mountComponentTree as Y, createRoot as ee, withComponentContext as te, createContext as ne, useContext as ie } from "@tachui/core";
-function O(n = {}) {
-  const e = se(), t = le(e, n), i = ue(), s = pe(), a = we();
+var oe = Object.defineProperty;
+var re = (n, e, t) => e in n ? oe(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var o = (n, e, t) => re(n, typeof e != "symbol" ? e + "" : e, t);
+import { createSignal as D, mountComponentTree as ae, createRoot as le, withComponentContext as de, createContext as ce, useContext as he } from "@tachui/core";
+import { registerModifierWithMetadata as V } from "@tachui/modifiers";
+function z(n = {}) {
+  const e = ue(), t = me(e, n), i = ve(), s = We(), a = Se();
   return {
     platform: e,
     capabilities: t,
@@ -12,20 +13,20 @@ function O(n = {}) {
     isTouch: a
   };
 }
-function se() {
-  return oe() ? "electron" : re() ? "mobile" : ae() ? "embedded" : "web";
+function ue() {
+  return pe() ? "electron" : we() ? "mobile" : fe() ? "embedded" : "web";
 }
-function oe() {
+function pe() {
   return typeof window < "u" ? !!window.electronAPI || !!window.electron || !!window.require || navigator.userAgent.toLowerCase().includes("electron") : typeof process < "u" ? !!process.electron || !!process.versions?.electron || process.env.ELECTRON === "true" : !1;
 }
-function re() {
+function we() {
   if (typeof window > "u") return !1;
   const n = "ontouchstart" in window && !("onmousedown" in window), e = window.innerWidth <= 768 || window.innerHeight <= 768, t = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
     navigator.userAgent
   ), i = window.matchMedia?.("(pointer: coarse)")?.matches, s = window.matchMedia?.("(max-width: 768px)")?.matches;
   return n || e && t || i || s;
 }
-function ae() {
+function fe() {
   if (typeof window > "u") return !1;
   try {
     return window.self !== window.top;
@@ -33,7 +34,7 @@ function ae() {
     return !0;
   }
 }
-function le(n, e) {
+function me(n, e) {
   const t = {
     multiWindow: !1,
     nativeWindows: !1,
@@ -59,9 +60,9 @@ function le(n, e) {
     case "web":
       return {
         ...t,
-        multiWindow: e.enablePopupTest ? de() : !1,
-        crossWindowCommunication: ce() || he(),
-        fullscreenSupport: V(),
+        multiWindow: e.enablePopupTest ? ge() : !1,
+        crossWindowCommunication: be() || ye(),
+        fullscreenSupport: G(),
         windowResizing: !1,
         // Browser windows can't be resized programmatically
         windowMinimizing: !1
@@ -69,7 +70,7 @@ function le(n, e) {
     case "mobile":
       return {
         ...t,
-        fullscreenSupport: V(),
+        fullscreenSupport: G(),
         modalOverlays: !0
       };
     case "embedded":
@@ -81,7 +82,7 @@ function le(n, e) {
       return t;
   }
 }
-function de() {
+function ge() {
   if (typeof window > "u" || typeof window.navigator < "u" && window.navigator.userAgent.includes("jsdom"))
     return !1;
   try {
@@ -91,28 +92,28 @@ function de() {
     return !1;
   }
 }
-function ce() {
+function be() {
   return typeof window < "u" && "BroadcastChannel" in window;
 }
-function he() {
+function ye() {
   return typeof window < "u" && "MessageChannel" in window;
 }
-function V() {
+function G() {
   return typeof document > "u" ? !1 : !!(document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled);
 }
-function ue() {
+function ve() {
   return typeof navigator > "u" ? "unknown" : navigator.userAgent;
 }
-function pe() {
+function We() {
   return typeof window > "u" ? { width: 1920, height: 1080 } : {
     width: window.screen?.width || window.innerWidth || 1920,
     height: window.screen?.height || window.innerHeight || 1080
   };
 }
-function we() {
+function Se() {
   return typeof window > "u" ? !1 : "ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
 }
-function fe() {
+function Ee() {
   if (typeof navigator > "u")
     return {
       name: "unknown",
@@ -140,7 +141,7 @@ function fe() {
   }
   return { name: e, version: t, engine: i };
 }
-function me() {
+function Ce() {
   if (typeof navigator > "u")
     return {
       name: "unknown",
@@ -167,7 +168,7 @@ function me() {
   }
   return { name: e, version: t };
 }
-function ge() {
+function Me() {
   return typeof window > "u" ? {
     webgl: !1,
     webgl2: !1,
@@ -188,7 +189,7 @@ function ge() {
     resizeObserver: "ResizeObserver" in window
   };
 }
-function H(n) {
+function O(n) {
   return {
     canOpenWindow: (e = !1) => e ? n.capabilities.nativeWindows : n.capabilities.multiWindow || n.capabilities.modalOverlays,
     canCommunicateBetweenWindows: () => n.capabilities.crossWindowCommunication,
@@ -199,7 +200,7 @@ function H(n) {
     getOptimalViewportType: (e = !1) => e && n.capabilities.nativeWindows ? "window" : n.capabilities.modalOverlays ? "modal" : n.platform === "mobile" ? "sheet" : "portal"
   };
 }
-class be {
+class Pe {
   // Fallback strategies
   createModal(e) {
     throw new Error("Modal fallback not implemented");
@@ -208,7 +209,7 @@ class be {
     throw new Error("Portal fallback not implemented");
   }
 }
-class D extends be {
+class H extends Pe {
   constructor(t = {}) {
     super();
     o(this, "environment");
@@ -217,7 +218,7 @@ class D extends be {
     o(this, "popups", /* @__PURE__ */ new Map());
     o(this, "portalContainer", null);
     o(this, "broadcastChannel", null);
-    this.environment = O(t), this.initializePortalContainer();
+    this.environment = z(t), this.initializePortalContainer();
   }
   /**
    * Check if we can create a window with given config
@@ -321,21 +322,21 @@ class D extends be {
    * Create popup window (native browser window)
    */
   createPopupWindow(t) {
-    const i = new ye(t);
+    const i = new ke(t);
     return this.popups.set(t.id, i), i;
   }
   /**
    * Create modal overlay
    */
   createModal(t) {
-    const i = new ve(t);
+    const i = new xe(t);
     return this.modals.set(t.id, i), i;
   }
   /**
    * Create portal
    */
   createPortal(t) {
-    const i = new We(t, this.portalContainer);
+    const i = new Te(t, this.portalContainer);
     return this.portals.set(t.id, i), i;
   }
   /**
@@ -428,7 +429,7 @@ class D extends be {
     `, document.head.appendChild(i);
   }
 }
-class ye {
+class ke {
   constructor(e) {
     o(this, "id");
     o(this, "type", "window");
@@ -439,7 +440,7 @@ class ye {
     o(this, "eventHandlers", /* @__PURE__ */ new Map());
     o(this, "setState");
     this.id = e.id, this.config = e;
-    const [t, i] = z({
+    const [t, i] = D({
       id: e.id,
       title: e.title || e.id,
       isVisible: !1,
@@ -637,7 +638,7 @@ class ye {
   removeChildWindow(e) {
   }
 }
-class ve {
+class xe {
   constructor(e) {
     o(this, "id");
     o(this, "type", "modal");
@@ -655,7 +656,7 @@ class ve {
     o(this, "parentWindow", null);
     o(this, "tabContainer", null);
     this.id = e.id, this.config = e;
-    const [t, i] = z({
+    const [t, i] = D({
       id: e.id,
       title: e.title || e.id,
       isVisible: !1,
@@ -859,7 +860,7 @@ class ve {
     e && e.remove();
   }
 }
-class We {
+class Te {
   constructor(e, t) {
     o(this, "id");
     o(this, "type", "portal");
@@ -877,7 +878,7 @@ class We {
     o(this, "parentWindow", null);
     o(this, "tabContainer", null);
     this.container = t, this.id = e.id, this.config = e;
-    const [i, s] = z({
+    const [i, s] = D({
       id: e.id,
       title: e.title || e.id,
       isVisible: !1,
@@ -904,7 +905,7 @@ class We {
     if (this.portalElement) {
       this.portalElement.innerHTML = "";
       try {
-        const t = Y(e, this.portalElement);
+        const t = ae(e, this.portalElement);
         this.cleanupFunction = t;
       } catch (t) {
         console.error("Error during mountComponentTree:", t);
@@ -1095,7 +1096,7 @@ class A {
     o(this, "globalStateCallbacks", /* @__PURE__ */ new Map());
     o(this, "environment");
     o(this, "platformConfig");
-    this.platformConfig = t, this.environment = O(t), e ? this.adapter = e : this.adapter = this.createDefaultAdapter(), this.adapter.setupCrossWindowCommunication(), this.adapter.optimizeForPlatform();
+    this.platformConfig = t, this.environment = z(t), e ? this.adapter = e : this.adapter = this.createDefaultAdapter(), this.adapter.setupCrossWindowCommunication(), this.adapter.optimizeForPlatform();
   }
   /**
    * Open a new window/viewport
@@ -1142,20 +1143,20 @@ class A {
   createWindowGroup(e) {
     if (this.windowGroups.has(e))
       return this.windowGroups.get(e);
-    const t = new Se(e, this);
+    const t = new Ie(e, this);
     return this.windowGroups.set(e, t), t;
   }
   /**
    * Check if we can open a window with given options
    */
   canOpenWindow(e = {}) {
-    return H(this.environment).canOpenWindow(e.preferNativeWindow);
+    return O(this.environment).canOpenWindow(e.preferNativeWindow);
   }
   /**
    * Get optimal window type for given options
    */
   getOptimalWindowType(e = {}) {
-    const t = H(this.environment);
+    const t = O(this.environment);
     return e.preferNativeWindow && this.environment.capabilities.nativeWindows ? "window" : e.modal !== !1 && this.environment.capabilities.modalOverlays ? "modal" : t.getOptimalViewportType(e.preferNativeWindow);
   }
   /**
@@ -1200,9 +1201,9 @@ class A {
   createDefaultAdapter() {
     switch (this.environment.platform) {
       case "electron":
-        return new D(this.platformConfig);
+        return new H(this.platformConfig);
       default:
-        return new D(this.platformConfig);
+        return new H(this.platformConfig);
     }
   }
   // ==================== Phase 2: Global State Management ====================
@@ -1266,7 +1267,7 @@ class A {
     });
   }
 }
-class Se {
+class Ie {
   constructor(e, t, i = "any") {
     o(this, "windows", /* @__PURE__ */ new Map());
     o(this, "defaultOptions", {});
@@ -1304,8 +1305,8 @@ class Se {
       return await a.show(), await a.focus(), a.markAsUsed(), a;
     let r = await this.getPooledWindow();
     if (r) {
-      const c = t(e);
-      return r.render(c), this.setWindowGroupMetadata(r, {
+      const d = t(e);
+      return r.render(d), this.setWindowGroupMetadata(r, {
         id: s,
         groupId: this.id,
         isPooled: !1,
@@ -1313,8 +1314,8 @@ class Se {
       }), await r.show(), await r.focus(), this.windows.set(i, r), this.emitEvent("window:reused", r, e), r;
     }
     if (this.windows.size >= this.maxInstances) {
-      const c = this.windows.values().next().value;
-      c && (this.poolConfig.enabled ? await this.returnToPool(c) : await c.close());
+      const d = this.windows.values().next().value;
+      d && (this.poolConfig.enabled ? await this.returnToPool(d) : await d.close());
     }
     const h = t(e);
     return r = await this.manager.openWindow(
@@ -1554,9 +1555,9 @@ class Se {
   }
   arrangeWindowsAsTiles(e) {
     const t = typeof window < "u" ? window.screen.width : 1920, i = typeof window < "u" ? window.screen.height : 1080, s = Math.ceil(Math.sqrt(e.length)), a = Math.ceil(e.length / s), r = t / s, h = i / a;
-    e.forEach((c, l) => {
+    e.forEach((d, l) => {
       const w = l % s, F = Math.floor(l / s);
-      this.setWindowGroupMetadata(c, {
+      this.setWindowGroupMetadata(d, {
         tilePosition: {
           col: w,
           row: F,
@@ -1618,10 +1619,10 @@ let m = null;
 function u(n = {}) {
   return m || (m = new A(void 0, n)), m;
 }
-function R(n) {
+function Q(n) {
   m?.dispose(), m = n;
 }
-function Ee() {
+function Oe() {
   m?.dispose(), m = null;
 }
 function y(n) {
@@ -1649,7 +1650,7 @@ function y(n) {
     },
     // Open this window
     async open() {
-      const e = u(), t = ee(() => te((i) => n.children(), `Window-${n.id}`)({}));
+      const e = u(), t = le(() => de((i) => n.children(), `Window-${n.id}`)({}));
       await e.openWindow(n.id, t, n);
     },
     // Close this window
@@ -1667,9 +1668,9 @@ function T(n) {
     poolConfig: a,
     stateSyncScope: r,
     maxInstances: h,
-    ...c
+    ...d
   } = n;
-  return t.setDefaultOptions(c), {
+  return t.setDefaultOptions(d), {
     type: "window-group",
     sceneType: "window-group",
     id: n.id,
@@ -1768,7 +1769,7 @@ function M(n) {
     // Initialize all scenes
     async initialize() {
       if (!u(n.platformConfig)) {
-        const { initializeViewportSystem: t } = await Promise.resolve().then(() => ct);
+        const { initializeViewportSystem: t } = await Promise.resolve().then(() => vt);
         t();
       }
     },
@@ -1785,7 +1786,7 @@ function M(n) {
     }
   };
 }
-const k = {
+const P = {
   /**
    * Create a document window group
    */
@@ -1841,7 +1842,7 @@ const k = {
       children: t
     });
   }
-}, $ = {
+}, K = {
   /**
    * Basic app with main window and settings
    */
@@ -1863,7 +1864,7 @@ const k = {
           })
         })
       }),
-      k.settingsWindow(() => ({
+      P.settingsWindow(() => ({
         type: "component",
         id: "settings-content",
         props: {},
@@ -1904,7 +1905,7 @@ const k = {
           })
         })
       }),
-      k.settingsWindow(() => ({
+      P.settingsWindow(() => ({
         type: "component",
         id: "settings",
         props: {},
@@ -1918,8 +1919,8 @@ const k = {
       }))
     ]
   })
-}, q = ne(null);
-function B({
+}, X = ce(null);
+function J({
   children: n,
   manager: e
 }) {
@@ -1932,20 +1933,20 @@ function B({
   };
   return {
     type: "context-provider",
-    context: q,
+    context: X,
     value: i,
     children: Array.isArray(n) ? n : [n]
   };
 }
 function v() {
-  const n = ie(q);
+  const n = he(X);
   if (!n)
     throw new Error(
       "useViewportEnvironment must be used within a ViewportEnvironmentProvider"
     );
   return n();
 }
-function P() {
+function k() {
   const { openWindow: n } = v();
   return n;
 }
@@ -1957,22 +1958,22 @@ function _() {
   const { viewportEnvironment: n } = v();
   return n;
 }
-function Ce() {
+function He() {
   const { currentWindow: n } = v();
   return n;
 }
-function Me() {
+function De() {
   return u();
 }
-function ke(n, e) {
-  return (t) => B({
+function ze(n, e) {
+  return (t) => J({
     children: n(t),
     manager: e
   });
 }
-function Pe(n) {
+function Ae(n) {
   return (e) => {
-    const t = P(), i = x(), s = _();
+    const t = k(), i = x(), s = _();
     return n({
       ...e,
       openWindow: t,
@@ -1981,46 +1982,70 @@ function Pe(n) {
     });
   };
 }
-const xe = {
+const _e = {
   openWindow: "openWindow",
   dismissWindow: "dismissWindow",
   viewportEnvironment: "viewportEnvironment",
   currentWindow: "currentWindow"
 };
-function Te(n) {
+function Fe(n) {
   return v()[n];
 }
-var d = /* @__PURE__ */ ((n) => (n[n.Clean = 0] = "Clean", n[n.Check = 1] = "Check", n[n.Dirty = 2] = "Dirty", n[n.Disposed = 3] = "Disposed", n))(d || {}), Ie = Object.defineProperty, He = (n, e, t) => e in n ? Ie(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, f = (n, e, t) => He(n, typeof e != "symbol" ? e + "" : e, t);
-let De = 0, S = null, ze = null;
-function j() {
-  return S;
+const Ve = "0.8.0-alpha", Ge = Ve, c = {
+  Clean: 0,
+  Check: 1,
+  Dirty: 2,
+  Disposed: 3
+};
+var Ne = Object.defineProperty, Le = (n, e, t) => e in n ? Ne(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, f = (n, e, t) => Le(n, typeof e != "symbol" ? e + "" : e, t);
+let Ue = 0;
+const Re = Math.random().toString(36).substr(2, 6);
+let N = null, L = null;
+const $e = /* @__PURE__ */ new Set();
+$e.add(Re);
+const W = {
+  get currentComputation() {
+    return N;
+  },
+  set currentComputation(n) {
+    N = n;
+  },
+  get currentOwner() {
+    return L;
+  },
+  set currentOwner(n) {
+    L = n;
+  }
+};
+function Z() {
+  return W.currentComputation;
 }
-function Q() {
-  return ze;
+function Y() {
+  return W.currentOwner;
 }
-class K {
+class ee {
   constructor(e, t = null) {
-    f(this, "id"), f(this, "owner"), f(this, "fn"), f(this, "sources", /* @__PURE__ */ new Set()), f(this, "observers", /* @__PURE__ */ new Set()), f(this, "state", d.Dirty), f(this, "value"), this.id = ++De, this.fn = e, this.owner = t, t && !t.disposed && t.sources.add(this);
+    f(this, "id"), f(this, "owner"), f(this, "fn"), f(this, "sources", /* @__PURE__ */ new Set()), f(this, "observers", /* @__PURE__ */ new Set()), f(this, "state", c.Dirty), f(this, "value"), this.id = ++Ue, this.fn = e, this.owner = t, t && !t.disposed && t.sources.add(this);
   }
   execute() {
-    if (this.state === d.Disposed)
+    if (this.state === c.Disposed)
       return this.value;
     for (const t of this.sources)
       t && typeof t == "object" && "removeObserver" in t && t.removeObserver(this);
     this.sources.clear();
-    const e = S;
-    S = this;
+    const e = W.currentComputation;
+    W.currentComputation = this;
     try {
-      return this.state = d.Clean, this.value = this.fn(), this.value;
+      return this.state = c.Clean, this.value = this.fn(), this.value;
     } catch (t) {
-      throw this.state = d.Disposed, (typeof process > "u" || process.env.NODE_ENV !== "test") && console.error("Error in computation:", t), t;
+      throw this.state = c.Disposed, (typeof process > "u" || process.env.NODE_ENV !== "test") && console.error("Error in computation:", t), t;
     } finally {
-      S = e;
+      W.currentComputation = e;
     }
   }
   dispose() {
-    if (this.state !== d.Disposed) {
-      this.state = d.Disposed;
+    if (this.state !== c.Disposed) {
+      this.state = c.Disposed;
       for (const e of this.sources)
         e && typeof e == "object" && "removeObserver" in e && e.removeObserver(this);
       this.sources.clear();
@@ -2030,18 +2055,18 @@ class K {
     }
   }
 }
-var Oe = Object.defineProperty, Ae = (n, e, t) => e in n ? Oe(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, I = (n, e, t) => Ae(n, typeof e != "symbol" ? e + "" : e, t);
-let _e = 0;
-class Fe {
+var Be = Object.defineProperty, je = (n, e, t) => e in n ? Be(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, I = (n, e, t) => je(n, typeof e != "symbol" ? e + "" : e, t);
+let qe = 0;
+class Qe {
   constructor(e) {
-    I(this, "id"), I(this, "observers", /* @__PURE__ */ new Set()), I(this, "_value"), this.id = ++_e, this._value = e;
+    I(this, "id"), I(this, "observers", /* @__PURE__ */ new Set()), I(this, "_value"), this.id = ++qe, this._value = e;
   }
   /**
    * Get the current value and track dependency
    */
   getValue() {
-    const e = j();
-    return e && e.state !== d.Disposed && (this.observers.add(e), e.sources.add(this)), this._value;
+    const e = Z();
+    return e && e.state !== c.Disposed && (this.observers.add(e), e.sources.add(this)), this._value;
   }
   /**
    * Get the current value without tracking dependency
@@ -2061,7 +2086,7 @@ class Fe {
    */
   notify() {
     for (const e of this.observers)
-      e.state !== d.Disposed && (e.state = d.Dirty, Ve(e));
+      e.state !== c.Disposed && (e.state = c.Dirty, Ke(e));
   }
   /**
    * Remove an observer (cleanup)
@@ -2083,10 +2108,10 @@ class Fe {
 }
 const E = /* @__PURE__ */ new Set();
 let C = !1;
-function Ve(n) {
-  E.add(n), !C && queueMicrotask(Ge);
+function Ke(n) {
+  E.add(n), !C && queueMicrotask(Xe);
 }
-function Ge() {
+function Xe() {
   if (!C) {
     C = !0;
     try {
@@ -2094,15 +2119,15 @@ function Ge() {
         const n = Array.from(E).sort((e, t) => e.id - t.id);
         E.clear();
         for (const e of n)
-          e.state === d.Dirty && e.execute();
+          e.state === c.Dirty && e.execute();
       }
     } finally {
       C = !1;
     }
   }
 }
-function Ne(n) {
-  const e = new Fe(n), t = e.getValue.bind(e);
+function Je(n) {
+  const e = new Qe(n), t = e.getValue.bind(e);
   t.peek = e.peek.bind(e);
   const i = e.set.bind(e);
   return Object.defineProperty(t, Symbol.for("tachui.signal"), {
@@ -2110,20 +2135,20 @@ function Ne(n) {
     enumerable: !1
   }), [t, i];
 }
-function G(n) {
+function U(n) {
   return typeof n == "function" && Symbol.for("tachui.signal") in n;
 }
-const Le = (n, e) => n === e;
-var Ue = Object.defineProperty, Re = (n, e, t) => e in n ? Ue(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, p = (n, e, t) => Re(n, typeof e != "symbol" ? e + "" : e, t), W = /* @__PURE__ */ ((n) => (n[n.Immediate = 0] = "Immediate", n[n.High = 1] = "High", n[n.Normal = 2] = "Normal", n[n.Low = 3] = "Low", n[n.Idle = 4] = "Idle", n))(W || {});
-class $e extends Error {
+const Ze = (n, e) => n === e;
+var Ye = Object.defineProperty, et = (n, e, t) => e in n ? Ye(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, p = (n, e, t) => et(n, typeof e != "symbol" ? e + "" : e, t), S = /* @__PURE__ */ ((n) => (n[n.Immediate = 0] = "Immediate", n[n.High = 1] = "High", n[n.Normal = 2] = "Normal", n[n.Low = 3] = "Low", n[n.Idle = 4] = "Idle", n))(S || {});
+class tt extends Error {
   constructor(e, t, i) {
     super(e), this.cause = t, this.node = i, this.name = "ReactiveError";
   }
 }
-const qe = class b {
+const nt = class b {
   constructor() {
     p(this, "updateQueues", /* @__PURE__ */ new Map()), p(this, "isFlushPending", !1), p(this, "isDestroyed", !1), p(this, "errorHandlers", /* @__PURE__ */ new Set()), p(this, "maxRetries", 3), p(this, "totalUpdateCycles", 0), p(this, "totalUpdateTime", 0), p(this, "errorCount", 0), p(this, "nodeRegistry", /* @__PURE__ */ new WeakSet());
-    for (const e of Object.values(W))
+    for (const e of Object.values(S))
       typeof e == "number" && this.updateQueues.set(e, /* @__PURE__ */ new Set());
   }
   static getInstance() {
@@ -2160,7 +2185,7 @@ const qe = class b {
             await this.updateNodeWithRetry(a);
           } catch (r) {
             this.handleReactiveError(
-              new $e(`Failed to update ${a.type} node ${a.id}`, r, a)
+              new tt(`Failed to update ${a.type} node ${a.id}`, r, a)
             );
           }
         if (this.hasHigherPriorityWork(t))
@@ -2314,7 +2339,7 @@ const qe = class b {
   getDebugInfo() {
     const e = {};
     for (const [t, i] of this.updateQueues)
-      e[W[t]] = i.size;
+      e[S[t]] = i.size;
     return {
       isFlushPending: this.isFlushPending,
       isDestroyed: this.isDestroyed,
@@ -2324,24 +2349,24 @@ const qe = class b {
     };
   }
 };
-p(qe, "instance", null);
-var Be = Object.defineProperty, je = (n, e, t) => e in n ? Be(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, g = (n, e, t) => je(n, typeof e != "symbol" ? e + "" : e, t);
-class Qe extends K {
-  constructor(e, t = {}, i = Q()) {
-    super(e, i), g(this, "type", "computed"), g(this, "priority"), g(this, "_hasValue", !1), g(this, "_error", null), g(this, "equalsFn"), g(this, "options"), this.priority = t.priority ?? W.Normal, this.equalsFn = t.equals ?? Le, this.options = t;
+p(nt, "instance", null);
+var it = Object.defineProperty, st = (n, e, t) => e in n ? it(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, g = (n, e, t) => st(n, typeof e != "symbol" ? e + "" : e, t);
+class ot extends ee {
+  constructor(e, t = {}, i = Y()) {
+    super(e, i), g(this, "type", "computed"), g(this, "priority"), g(this, "_hasValue", !1), g(this, "_error", null), g(this, "equalsFn"), g(this, "options"), this.priority = t.priority ?? S.Normal, this.equalsFn = t.equals ?? Ze, this.options = t;
   }
   /**
    * Get the computed value, tracking dependency and lazily computing
    */
   getValue() {
-    const e = j();
-    return e && e.state !== d.Disposed && (this.observers.add(e), e.sources.add(this)), (this.state === d.Dirty || !this._hasValue) && (this.execute(), this._hasValue = !0), this.value;
+    const e = Z();
+    return e && e.state !== c.Disposed && (this.observers.add(e), e.sources.add(this)), (this.state === c.Dirty || !this._hasValue) && (this.execute(), this._hasValue = !0), this.value;
   }
   /**
    * Get the current value without tracking dependency
    */
   peek() {
-    return (this.state === d.Dirty || !this._hasValue) && (this.execute(), this._hasValue = !0), this.value;
+    return (this.state === c.Dirty || !this._hasValue) && (this.execute(), this._hasValue = !0), this.value;
   }
   /**
    * Remove an observer (cleanup)
@@ -2356,8 +2381,8 @@ class Qe extends K {
     const e = this._hasValue ? this.value : void 0, t = super.execute();
     if (!this._hasValue || !this.equalsFn(e, t))
       for (const i of this.observers)
-        i.state !== d.Disposed && (i.state = d.Dirty, "execute" in i && typeof i.execute == "function" && queueMicrotask(() => {
-          i.state === d.Dirty && i.execute();
+        i.state !== c.Disposed && (i.state = c.Dirty, "execute" in i && typeof i.execute == "function" && queueMicrotask(() => {
+          i.state === c.Dirty && i.execute();
         }));
     return t;
   }
@@ -2376,7 +2401,7 @@ class Qe extends K {
     this.sources.clear();
     for (const e of this.observers)
       e.sources.delete(this);
-    this.observers.clear(), this._hasValue = !1, this._error = null, this.state = d.Disposed;
+    this.observers.clear(), this._hasValue = !1, this._error = null, this.state = c.Disposed;
   }
   /**
    * Dispose the computed value
@@ -2397,7 +2422,7 @@ class Qe extends K {
       state: this.state,
       sourceCount: this.sources.size,
       observerCount: this.observers.size,
-      priority: W[this.priority],
+      priority: S[this.priority],
       debugName: this.options.debugName,
       equalsFn: this.equalsFn.name || "anonymous"
     };
@@ -2406,29 +2431,29 @@ class Qe extends K {
     return `Computed(${this.options.debugName || this.id}): ${this._hasValue ? this.value : "no value"}`;
   }
 }
-function Ke(n, e) {
-  const t = new Qe(n, e), i = t.getValue.bind(t);
+function rt(n, e) {
+  const t = new ot(n, e), i = t.getValue.bind(t);
   return i.peek = t.peek.bind(t), Object.defineProperty(i, Symbol.for("tachui.computed"), {
     value: t,
     enumerable: !1
   }), i;
 }
-function N(n) {
+function R(n) {
   return typeof n == "function" && Symbol.for("tachui.computed") in n;
 }
-const [Xe, wt] = Ne("light");
-Ke(() => {
-  const n = Xe();
-  return n === "system" ? Je() : n;
+const [at, Mt] = Je("light");
+rt(() => {
+  const n = at();
+  return n === "system" ? lt() : n;
 });
-function Je() {
+function lt() {
   return typeof window < "u" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
 typeof globalThis.__DEV__ > "u" && (globalThis.__DEV__ = process.env.NODE_ENV !== "production");
-var Ze = Object.defineProperty, Ye = (n, e, t) => e in n ? Ze(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, L = (n, e, t) => Ye(n, typeof e != "symbol" ? e + "" : e, t);
-class et {
+var dt = Object.defineProperty, ct = (n, e, t) => e in n ? dt(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, $ = (n, e, t) => ct(n, typeof e != "symbol" ? e + "" : e, t);
+class ht {
   constructor() {
-    L(this, "pending", /* @__PURE__ */ new Set()), L(this, "isFlushScheduled", !1);
+    $(this, "pending", /* @__PURE__ */ new Set()), $(this, "isFlushScheduled", !1);
   }
   schedule(e) {
     this.pending.add(e), this.isFlushScheduled || (this.isFlushScheduled = !0, queueMicrotask(() => this.flush()));
@@ -2449,20 +2474,20 @@ class et {
     this.pending.size > 0 && (this.isFlushScheduled = !0, queueMicrotask(() => this.flush()));
   }
 }
-new et();
-function U(n, e = {}) {
-  const t = Q();
+new ht();
+function B(n, e = {}) {
+  const t = Y();
   let i;
   const s = () => {
     const r = n(i);
     return i = r, r;
-  }, a = new K(s, t);
+  }, a = new ee(s, t);
   return e.name && Object.defineProperty(a, "name", {
     value: e.name,
     enumerable: !1
   }), a.execute(), a;
 }
-class tt {
+class ut {
   constructor(e) {
     this.properties = e;
   }
@@ -2481,8 +2506,8 @@ class tt {
   applyStyleChange(e, t, i) {
     if (e instanceof HTMLElement) {
       const s = this.toCSSProperty(t);
-      if (G(i) || N(i))
-        U(() => {
+      if (U(i) || R(i))
+        B(() => {
           const a = i(), r = String(a);
           if (r.includes("!important")) {
             const h = r.replace(/\s*!important\s*$/, "").trim();
@@ -2536,27 +2561,27 @@ class tt {
       for (const [s, a] of Object.entries(t))
         if (a !== void 0) {
           const r = this.toCSSProperty(s);
-          if (G(a) || N(a))
-            U(() => {
-              const h = a(), c = this.toCSSValueForProperty(
+          if (U(a) || R(a))
+            B(() => {
+              const h = a(), d = this.toCSSValueForProperty(
                 r,
                 h
               );
               if (i.setProperty)
-                if (typeof c == "string" && c.includes("!important")) {
-                  const l = c.replace(/\s*!important\s*$/, "").trim();
+                if (typeof d == "string" && d.includes("!important")) {
+                  const l = d.replace(/\s*!important\s*$/, "").trim();
                   i.setProperty(r, l, "important");
                 } else
-                  i.setProperty(r, c);
+                  i.setProperty(r, d);
               else
-                i[r] = c;
+                i[r] = d;
             });
           else {
             const h = this.toCSSValueForProperty(r, a);
             if (i.setProperty)
               if (typeof h == "string" && h.includes("!important")) {
-                const c = h.replace(/\s*!important\s*$/, "").trim();
-                i.setProperty(r, c, "important");
+                const d = h.replace(/\s*!important\s*$/, "").trim();
+                i.setProperty(r, d, "important");
               } else
                 i.setProperty(r, h);
             else
@@ -2590,7 +2615,7 @@ class tt {
     };
   }
 }
-class X extends tt {
+class te extends ut {
   constructor() {
     super(...arguments);
     o(this, "type", "viewportLifecycle");
@@ -2616,17 +2641,52 @@ class X extends tt {
     ).observe(t);
   }
 }
-function nt(n) {
-  return new X({ onAppear: n });
+function ne(n) {
+  return new te({ onAppear: n });
+}
+function ie(n) {
+  return new te({ onDisappear: n });
 }
-function it(n) {
-  return new X({ onDisappear: n });
+const pt = {
+  name: "@tachui/viewport",
+  version: Ge,
+  author: "TachUI Team",
+  verified: !0
+}, j = {
+  category: "interaction",
+  priority: 110,
+  signature: "(handler: () => void) => Modifier",
+  description: "Triggers handlers when an element appears in or disappears from the viewport."
+};
+let q = !1;
+function se(n) {
+  const e = n?.registry, t = n?.plugin ?? pt, i = n?.force === !0, s = !!(e || n?.plugin);
+  !s && q && !i || (V(
+    "onAppear",
+    ne,
+    {
+      ...j,
+      description: "Executes a callback when the component enters the viewport."
+    },
+    e,
+    t
+  ), V(
+    "onDisappear",
+    ie,
+    {
+      ...j,
+      description: "Executes a callback when the component leaves the viewport."
+    },
+    e,
+    t
+  ), s || (q = !0));
 }
-const st = {
+se();
+const wt = {
   // Manager
   getManager: u,
   // Environment
-  useOpenWindow: P,
+  useOpenWindow: k,
   useDismissWindow: x,
   useViewportInfo: _,
   // Components
@@ -2634,20 +2694,20 @@ const st = {
   WindowGroup: T,
   App: M,
   // Utilities
-  Utils: k,
-  Examples: $
+  Utils: P,
+  Examples: K
 };
-function ot(n) {
+function ft(n) {
   const e = new A(n?.customAdapter);
-  return R(e), e;
+  return Q(e), e;
 }
-const rt = {
+const mt = {
   isWindow: (n) => n.type === "window",
   isModal: (n) => n.type === "modal",
   isPortal: (n) => n.type === "portal",
   isSheet: (n) => n.type === "sheet",
   isPopover: (n) => n.type === "popover"
-}, at = {
+}, gt = {
   /**
    * Check if running in Electron
    */
@@ -2668,7 +2728,7 @@ const rt = {
    * Get optimal window type for current platform
    */
   getOptimalWindowType: (n = !1) => u().getOptimalWindowType({ preferNativeWindow: n })
-}, lt = {
+}, bt = {
   /**
    * Standard document window
    */
@@ -2735,7 +2795,7 @@ const rt = {
     minimizable: !1,
     maximizable: !1
   })
-}, dt = {
+}, yt = {
   DEFAULT_WINDOW_WIDTH: 800,
   DEFAULT_WINDOW_HEIGHT: 600,
   MIN_WINDOW_WIDTH: 300,
@@ -2743,81 +2803,82 @@ const rt = {
   MODAL_Z_INDEX: 1e3,
   PORTAL_Z_INDEX: 999,
   ANIMATION_DURATION: 200
-}, ct = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, vt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   App: M,
-  EnvironmentKeys: xe,
-  ExampleScenes: $,
-  PlatformUtils: at,
+  EnvironmentKeys: _e,
+  ExampleScenes: K,
+  PlatformUtils: gt,
   TachUIViewportManager: A,
-  Viewport: st,
-  ViewportConstants: dt,
-  ViewportEnvironmentProvider: B,
-  ViewportTypeGuards: rt,
-  WebViewportAdapter: D,
+  Viewport: wt,
+  ViewportConstants: yt,
+  ViewportEnvironmentProvider: J,
+  ViewportTypeGuards: mt,
+  WebViewportAdapter: H,
   Window: y,
-  WindowConfigs: lt,
+  WindowConfigs: bt,
   WindowGroup: T,
-  WindowUtils: k,
-  checkFeatureSupport: ge,
-  createCapabilityChecker: H,
-  createWindowAwareComponent: Pe,
-  detectViewportEnvironment: O,
-  disposeViewportManager: Ee,
-  getBrowserInfo: fe,
-  getEnvironmentValue: Te,
-  getOSInfo: me,
+  WindowUtils: P,
+  checkFeatureSupport: Me,
+  createCapabilityChecker: O,
+  createWindowAwareComponent: Ae,
+  detectViewportEnvironment: z,
+  disposeViewportManager: Oe,
+  getBrowserInfo: Ee,
+  getEnvironmentValue: Fe,
+  getOSInfo: Ce,
   getViewportManager: u,
-  initializeViewportSystem: ot,
-  onAppear: nt,
-  onDisappear: it,
-  setViewportManager: R,
-  useCurrentWindow: Ce,
+  initializeViewportSystem: ft,
+  onAppear: ne,
+  onDisappear: ie,
+  registerViewportModifiers: se,
+  setViewportManager: Q,
+  useCurrentWindow: He,
   useDismissWindow: x,
   useEnvironmentDismissWindow: x,
-  useEnvironmentOpenWindow: P,
-  useOpenWindow: P,
+  useEnvironmentOpenWindow: k,
+  useOpenWindow: k,
   useViewportEnvironment: v,
   useViewportInfo: _,
-  useViewportManager: Me,
-  withViewportEnvironment: ke
+  useViewportManager: De,
+  withViewportEnvironment: ze
 }, Symbol.toStringTag, { value: "Module" }));
 export {
   M as App,
-  xe as EnvironmentKeys,
-  $ as ExampleScenes,
-  at as PlatformUtils,
+  _e as EnvironmentKeys,
+  K as ExampleScenes,
+  gt as PlatformUtils,
   A as TachUIViewportManager,
-  st as Viewport,
-  dt as ViewportConstants,
-  B as ViewportEnvironmentProvider,
-  rt as ViewportTypeGuards,
-  D as WebViewportAdapter,
+  wt as Viewport,
+  yt as ViewportConstants,
+  J as ViewportEnvironmentProvider,
+  mt as ViewportTypeGuards,
+  H as WebViewportAdapter,
   y as Window,
-  lt as WindowConfigs,
+  bt as WindowConfigs,
   T as WindowGroup,
-  k as WindowUtils,
-  ge as checkFeatureSupport,
-  H as createCapabilityChecker,
-  Pe as createWindowAwareComponent,
-  O as detectViewportEnvironment,
-  Ee as disposeViewportManager,
-  fe as getBrowserInfo,
-  Te as getEnvironmentValue,
-  me as getOSInfo,
+  P as WindowUtils,
+  Me as checkFeatureSupport,
+  O as createCapabilityChecker,
+  Ae as createWindowAwareComponent,
+  z as detectViewportEnvironment,
+  Oe as disposeViewportManager,
+  Ee as getBrowserInfo,
+  Fe as getEnvironmentValue,
+  Ce as getOSInfo,
   u as getViewportManager,
-  ot as initializeViewportSystem,
-  nt as onAppear,
-  it as onDisappear,
-  R as setViewportManager,
-  Ce as useCurrentWindow,
+  ft as initializeViewportSystem,
+  ne as onAppear,
+  ie as onDisappear,
+  se as registerViewportModifiers,
+  Q as setViewportManager,
+  He as useCurrentWindow,
   x as useDismissWindow,
   x as useEnvironmentDismissWindow,
-  P as useEnvironmentOpenWindow,
-  P as useOpenWindow,
+  k as useEnvironmentOpenWindow,
+  k as useOpenWindow,
   v as useViewportEnvironment,
   _ as useViewportInfo,
-  Me as useViewportManager,
-  ke as withViewportEnvironment
+  De as useViewportManager,
+  ze as withViewportEnvironment
 };
-//# sourceMappingURL=index.js.map