@tachui/viewport 0.8.0-alpha

package/dist/index.js

@@ -0,0 +1,2823 @@
+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();
+  return {
+    platform: e,
+    capabilities: t,
+    userAgent: i,
+    screenSize: s,
+    isTouch: a
+  };
+}
+function se() {
+  return oe() ? "electron" : re() ? "mobile" : ae() ? "embedded" : "web";
+}
+function oe() {
+  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() {
+  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() {
+  if (typeof window > "u") return !1;
+  try {
+    return window.self !== window.top;
+  } catch {
+    return !0;
+  }
+}
+function le(n, e) {
+  const t = {
+    multiWindow: !1,
+    nativeWindows: !1,
+    modalOverlays: !0,
+    crossWindowCommunication: !1,
+    windowResizing: !1,
+    windowMinimizing: !1,
+    fullscreenSupport: !1,
+    menuBarSupport: !1
+  };
+  switch (n) {
+    case "electron":
+      return {
+        ...t,
+        multiWindow: !0,
+        nativeWindows: !0,
+        crossWindowCommunication: !0,
+        windowResizing: !0,
+        windowMinimizing: !0,
+        fullscreenSupport: !0,
+        menuBarSupport: !0
+      };
+    case "web":
+      return {
+        ...t,
+        multiWindow: e.enablePopupTest ? de() : !1,
+        crossWindowCommunication: ce() || he(),
+        fullscreenSupport: V(),
+        windowResizing: !1,
+        // Browser windows can't be resized programmatically
+        windowMinimizing: !1
+      };
+    case "mobile":
+      return {
+        ...t,
+        fullscreenSupport: V(),
+        modalOverlays: !0
+      };
+    case "embedded":
+      return {
+        ...t,
+        modalOverlays: !0
+      };
+    default:
+      return t;
+  }
+}
+function de() {
+  if (typeof window > "u" || typeof window.navigator < "u" && window.navigator.userAgent.includes("jsdom"))
+    return !1;
+  try {
+    const n = window.open("", "", "width=1,height=1");
+    return n ? (n.close(), !0) : !1;
+  } catch {
+    return !1;
+  }
+}
+function ce() {
+  return typeof window < "u" && "BroadcastChannel" in window;
+}
+function he() {
+  return typeof window < "u" && "MessageChannel" in window;
+}
+function V() {
+  return typeof document > "u" ? !1 : !!(document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled);
+}
+function ue() {
+  return typeof navigator > "u" ? "unknown" : navigator.userAgent;
+}
+function pe() {
+  return typeof window > "u" ? { width: 1920, height: 1080 } : {
+    width: window.screen?.width || window.innerWidth || 1920,
+    height: window.screen?.height || window.innerHeight || 1080
+  };
+}
+function we() {
+  return typeof window > "u" ? !1 : "ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+}
+function fe() {
+  if (typeof navigator > "u")
+    return {
+      name: "unknown",
+      version: "unknown",
+      engine: "unknown"
+    };
+  const n = navigator.userAgent;
+  let e = "unknown", t = "unknown", i = "unknown";
+  if (n.includes("Chrome")) {
+    e = "Chrome";
+    const s = n.match(/Chrome\/(\d+)/);
+    t = s ? s[1] : "unknown", i = "Blink";
+  } else if (n.includes("Firefox")) {
+    e = "Firefox";
+    const s = n.match(/Firefox\/(\d+)/);
+    t = s ? s[1] : "unknown", i = "Gecko";
+  } else if (n.includes("Safari") && !n.includes("Chrome")) {
+    e = "Safari";
+    const s = n.match(/Version\/(\d+)/);
+    t = s ? s[1] : "unknown", i = "WebKit";
+  } else if (n.includes("Edge")) {
+    e = "Edge";
+    const s = n.match(/Edge\/(\d+)/) || n.match(/Edg\/(\d+)/);
+    t = s ? s[1] : "unknown", i = "Blink";
+  }
+  return { name: e, version: t, engine: i };
+}
+function me() {
+  if (typeof navigator > "u")
+    return {
+      name: "unknown",
+      version: "unknown"
+    };
+  const n = navigator.userAgent;
+  let e = "unknown", t = "unknown";
+  if (n.includes("Windows"))
+    e = "Windows", n.includes("Windows NT 10.0") ? t = "10/11" : n.includes("Windows NT 6.3") ? t = "8.1" : n.includes("Windows NT 6.2") ? t = "8" : n.includes("Windows NT 6.1") && (t = "7");
+  else if (n.includes("Mac OS X")) {
+    e = "macOS";
+    const i = n.match(/Mac OS X (\d+_\d+_?\d*)/);
+    i && (t = i[1].replace(/_/g, "."));
+  } else if (n.includes("Linux"))
+    e = "Linux";
+  else if (n.includes("Android")) {
+    e = "Android";
+    const i = n.match(/Android (\d+\.?\d*\.?\d*)/);
+    t = i ? i[1] : "unknown";
+  } else if (n.includes("iPhone OS") || n.includes("OS ")) {
+    e = "iOS";
+    const i = n.match(/OS (\d+_\d+_?\d*)/);
+    i && (t = i[1].replace(/_/g, "."));
+  }
+  return { name: e, version: t };
+}
+function ge() {
+  return typeof window > "u" ? {
+    webgl: !1,
+    webgl2: !1,
+    webWorkers: !1,
+    serviceWorkers: !1,
+    pushNotifications: !1,
+    webAssembly: !1,
+    intersectionObserver: !1,
+    resizeObserver: !1
+  } : {
+    webgl: !!window.WebGLRenderingContext,
+    webgl2: !!window.WebGL2RenderingContext,
+    webWorkers: "Worker" in window,
+    serviceWorkers: "serviceWorker" in navigator,
+    pushNotifications: "PushManager" in window,
+    webAssembly: "WebAssembly" in window,
+    intersectionObserver: "IntersectionObserver" in window,
+    resizeObserver: "ResizeObserver" in window
+  };
+}
+function H(n) {
+  return {
+    canOpenWindow: (e = !1) => e ? n.capabilities.nativeWindows : n.capabilities.multiWindow || n.capabilities.modalOverlays,
+    canCommunicateBetweenWindows: () => n.capabilities.crossWindowCommunication,
+    canResizeWindows: () => n.capabilities.windowResizing,
+    canMinimizeWindows: () => n.capabilities.windowMinimizing,
+    canUseFullscreen: () => n.capabilities.fullscreenSupport,
+    canUseMenuBar: () => n.capabilities.menuBarSupport,
+    getOptimalViewportType: (e = !1) => e && n.capabilities.nativeWindows ? "window" : n.capabilities.modalOverlays ? "modal" : n.platform === "mobile" ? "sheet" : "portal"
+  };
+}
+class be {
+  // Fallback strategies
+  createModal(e) {
+    throw new Error("Modal fallback not implemented");
+  }
+  createPortal(e) {
+    throw new Error("Portal fallback not implemented");
+  }
+}
+class D extends be {
+  constructor(t = {}) {
+    super();
+    o(this, "environment");
+    o(this, "portals", /* @__PURE__ */ new Map());
+    o(this, "modals", /* @__PURE__ */ new Map());
+    o(this, "popups", /* @__PURE__ */ new Map());
+    o(this, "portalContainer", null);
+    o(this, "broadcastChannel", null);
+    this.environment = O(t), this.initializePortalContainer();
+  }
+  /**
+   * Check if we can create a window with given config
+   */
+  canCreateWindow(t) {
+    if (!t.preferNativeWindow)
+      return !0;
+    try {
+      return this.environment.capabilities.multiWindow;
+    } catch {
+      return !1;
+    }
+  }
+  /**
+   * Create a viewport instance
+   */
+  createWindow(t) {
+    switch (this.determineWindowType(t)) {
+      case "window":
+        return this.createPopupWindow(t);
+      case "modal":
+        return this.createModal(t);
+      case "portal":
+        return this.createPortal(t);
+      default:
+        return this.createModal(t);
+    }
+  }
+  /**
+   * Destroy a window
+   */
+  async destroyWindow(t) {
+    const i = this.portals.get(t);
+    if (i) {
+      i.dispose(), this.portals.delete(t);
+      return;
+    }
+    const s = this.modals.get(t);
+    if (s) {
+      s.dispose(), this.modals.delete(t);
+      return;
+    }
+    const a = this.popups.get(t);
+    if (a) {
+      a.dispose(), this.popups.delete(t);
+      return;
+    }
+  }
+  /**
+   * Set up cross-window communication
+   */
+  setupCrossWindowCommunication() {
+    if ("BroadcastChannel" in window)
+      this.broadcastChannel = new BroadcastChannel("tachui-viewport"), this.broadcastChannel.addEventListener(
+        "message",
+        (t) => {
+          this.handleCrossWindowMessage(t.data);
+        }
+      );
+    else {
+      const t = (i) => {
+        if (i.key === "tachui-viewport-message")
+          try {
+            const s = JSON.parse(i.newValue || "{}");
+            this.handleCrossWindowMessage(s);
+          } catch {
+          }
+      };
+      typeof window < "u" && window.addEventListener("storage", t);
+    }
+  }
+  /**
+   * Broadcast message to other windows
+   */
+  broadcastMessage(t, i) {
+    const s = {
+      ...t,
+      timestamp: Date.now(),
+      source: window.location.href
+    };
+    this.broadcastChannel ? this.broadcastChannel.postMessage(s) : (localStorage.setItem(
+      "tachui-viewport-message",
+      JSON.stringify(s)
+    ), setTimeout(() => {
+      localStorage.removeItem("tachui-viewport-message");
+    }, 100));
+  }
+  /**
+   * Optimize for web platform
+   */
+  optimizeForPlatform() {
+    document.documentElement.style.setProperty(
+      "--tachui-modal-backdrop-blur",
+      "8px"
+    ), document.documentElement.style.setProperty(
+      "--tachui-modal-animation-duration",
+      "200ms"
+    ), document.documentElement.style.setProperty("--tachui-modal-z-index", "1000"), this.injectGlobalStyles();
+  }
+  /**
+   * Create popup window (native browser window)
+   */
+  createPopupWindow(t) {
+    const i = new ye(t);
+    return this.popups.set(t.id, i), i;
+  }
+  /**
+   * Create modal overlay
+   */
+  createModal(t) {
+    const i = new ve(t);
+    return this.modals.set(t.id, i), i;
+  }
+  /**
+   * Create portal
+   */
+  createPortal(t) {
+    const i = new We(t, this.portalContainer);
+    return this.portals.set(t.id, i), i;
+  }
+  /**
+   * Determine optimal window type
+   */
+  determineWindowType(t) {
+    return t.preferNativeWindow && this.environment.capabilities.multiWindow ? "window" : t.modal !== !1 ? "modal" : "portal";
+  }
+  /**
+   * Initialize portal container
+   */
+  initializePortalContainer() {
+    let t = document.getElementById("app");
+    if (t) {
+      this.portalContainer = t;
+      return;
+    }
+    t = document.getElementById("tachui-portals"), t || (t = document.createElement("div"), t.id = "tachui-portals", t.style.position = "relative", t.style.zIndex = "999", document.body.appendChild(t)), this.portalContainer = t;
+  }
+  /**
+   * Handle cross-window messages
+   */
+  handleCrossWindowMessage(t) {
+    this.portals.forEach((i) => i.receiveMessage(t)), this.modals.forEach((i) => i.receiveMessage(t)), this.popups.forEach((i) => i.receiveMessage(t));
+  }
+  /**
+   * Inject global CSS styles
+   */
+  injectGlobalStyles() {
+    const t = "tachui-viewport-styles";
+    if (document.getElementById(t))
+      return;
+    const i = document.createElement("style");
+    i.id = t, i.textContent = `
+      .tachui-modal-backdrop {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+        backdrop-filter: blur(var(--tachui-modal-backdrop-blur, 8px));
+        z-index: var(--tachui-modal-z-index, 1000);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        animation: tachui-fade-in var(--tachui-modal-animation-duration, 200ms) ease-out;
+      }
+
+      .tachui-modal-content {
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+        max-width: 90vw;
+        max-height: 90vh;
+        overflow: auto;
+        animation: tachui-scale-in var(--tachui-modal-animation-duration, 200ms) ease-out;
+      }
+
+      .tachui-portal {
+        position: relative;
+      }
+
+      @keyframes tachui-fade-in {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+
+      @keyframes tachui-scale-in {
+        from {
+          opacity: 0;
+          transform: scale(0.95);
+        }
+        to {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .tachui-modal-backdrop,
+        .tachui-modal-content {
+          animation: none;
+        }
+      }
+    `, document.head.appendChild(i);
+  }
+}
+class ye {
+  constructor(e) {
+    o(this, "id");
+    o(this, "type", "window");
+    o(this, "config");
+    o(this, "state");
+    o(this, "nativeWindow", null);
+    o(this, "messageHandlers", /* @__PURE__ */ new Set());
+    o(this, "eventHandlers", /* @__PURE__ */ new Map());
+    o(this, "setState");
+    this.id = e.id, this.config = e;
+    const [t, i] = z({
+      id: e.id,
+      title: e.title || e.id,
+      isVisible: !1,
+      isMinimized: !1,
+      isMaximized: !1,
+      isFullscreen: !1,
+      isFocused: !1,
+      bounds: {
+        x: e.x || 100,
+        y: e.y || 100,
+        width: e.width || 800,
+        height: e.height || 600
+      },
+      // Phase 2: Enhanced state properties
+      isPooled: !1,
+      lastUsed: Date.now(),
+      groupId: void 0,
+      tabIndex: void 0,
+      parentWindowId: void 0
+    });
+    this.state = t, this.setState = i;
+  }
+  render(e) {
+    this.nativeWindow && (this.nativeWindow.document.title = this.config.title || this.config.id);
+  }
+  async show() {
+    if (this.nativeWindow && !this.nativeWindow.closed) {
+      this.nativeWindow.focus();
+      return;
+    }
+    const e = this.buildWindowFeatures();
+    if (this.nativeWindow = window.open("", this.config.id, e), !this.nativeWindow)
+      throw new Error(
+        "Failed to open popup window (likely blocked by popup blocker)"
+      );
+    this.setupPopupEventHandlers(), this.setState((t) => ({
+      ...t,
+      isVisible: !0,
+      isFocused: !0
+    }));
+  }
+  async hide() {
+    this.nativeWindow && !this.nativeWindow.closed && this.nativeWindow.blur();
+  }
+  async focus() {
+    this.nativeWindow && !this.nativeWindow.closed && this.nativeWindow.focus();
+  }
+  async minimize() {
+  }
+  async maximize() {
+  }
+  async restore() {
+  }
+  async close() {
+    this.nativeWindow && !this.nativeWindow.closed && this.nativeWindow.close(), this.dispose();
+  }
+  dispose() {
+    this.messageHandlers.clear(), this.eventHandlers.clear(), this.nativeWindow = null;
+  }
+  postMessage(e) {
+    this.nativeWindow && !this.nativeWindow.closed && this.nativeWindow.postMessage(e, "*");
+  }
+  onMessage(e) {
+    return this.messageHandlers.add(e), () => this.messageHandlers.delete(e);
+  }
+  receiveMessage(e) {
+    this.messageHandlers.forEach((t) => t(e));
+  }
+  onShow(e) {
+    return this.addEventListener("show", e);
+  }
+  onHide(e) {
+    return this.addEventListener("hide", e);
+  }
+  onFocus(e) {
+    return this.addEventListener("focus", e);
+  }
+  onBlur(e) {
+    return this.addEventListener("blur", e);
+  }
+  onResize(e) {
+    return () => {
+    };
+  }
+  onClose(e) {
+    return this.addEventListener("close", e);
+  }
+  addEventListener(e, t) {
+    return this.eventHandlers.has(e) || this.eventHandlers.set(e, /* @__PURE__ */ new Set()), this.eventHandlers.get(e).add(t), () => {
+      this.eventHandlers.get(e)?.delete(t);
+    };
+  }
+  emit(e) {
+    const t = this.eventHandlers.get(e);
+    t && t.forEach((i) => i());
+  }
+  buildWindowFeatures() {
+    const e = [];
+    return this.config.width && e.push(`width=${this.config.width}`), this.config.height && e.push(`height=${this.config.height}`), this.config.x && e.push(`left=${this.config.x}`), this.config.y && e.push(`top=${this.config.y}`), e.push(`resizable=${this.config.resizable !== !1 ? "yes" : "no"}`), e.push("scrollbars=yes"), e.push("status=no"), e.push("toolbar=no"), e.push("menubar=no"), e.push("location=no"), e.join(",");
+  }
+  setupPopupEventHandlers() {
+    if (!this.nativeWindow) return;
+    const e = () => {
+      if (this.nativeWindow?.closed) {
+        this.emit("close");
+        return;
+      }
+      setTimeout(e, 1e3);
+    };
+    e(), window.addEventListener("message", (t) => {
+      t.source === this.nativeWindow && this.messageHandlers.forEach((i) => i(t.data));
+    });
+  }
+  // ==================== Phase 2: Enhanced Methods ====================
+  /**
+   * Window pooling and reuse
+   */
+  async prepareForReuse() {
+    this.nativeWindow && !this.nativeWindow.closed && (this.nativeWindow.document.body.innerHTML = "", this.nativeWindow.document.title = ""), this.messageHandlers.clear();
+  }
+  isReusable() {
+    return this.nativeWindow != null && !this.nativeWindow.closed;
+  }
+  markAsUsed() {
+    this.setState((e) => ({
+      ...e,
+      lastUsed: Date.now()
+    }));
+  }
+  async returnToPool() {
+    await this.hide(), this.setState((e) => ({
+      ...e,
+      isPooled: !0,
+      lastUsed: Date.now()
+    }));
+  }
+  /**
+   * State synchronization (limited in popup windows due to cross-origin restrictions)
+   */
+  syncState(e, t) {
+    if (!(!this.nativeWindow || this.nativeWindow.closed))
+      try {
+        this.nativeWindow.postMessage(
+          { type: "sync_state", key: e, value: t },
+          "*"
+        );
+      } catch (i) {
+        console.warn("Failed to sync state to popup window:", i);
+      }
+  }
+  getSharedState(e) {
+  }
+  onSharedStateChange(e, t) {
+    return () => {
+    };
+  }
+  /**
+   * Tab grouping (not supported for popup windows)
+   */
+  async attachToTab(e) {
+    throw new Error("Tab grouping not supported for popup windows");
+  }
+  async detachFromTab() {
+    return this;
+  }
+  getTabContainer() {
+    return null;
+  }
+  getTabIndex() {
+    return this.state().tabIndex || 0;
+  }
+  setTabIndex(e) {
+    this.setState((t) => ({
+      ...t,
+      tabIndex: e
+    }));
+  }
+  /**
+   * Parent-child relationships (limited for popup windows)
+   */
+  setParentWindow(e) {
+    this.setState((t) => ({
+      ...t,
+      parentWindowId: e.id
+    }));
+  }
+  getParentWindow() {
+    return null;
+  }
+  getChildWindows() {
+    return [];
+  }
+  addChildWindow(e) {
+  }
+  removeChildWindow(e) {
+  }
+}
+class ve {
+  constructor(e) {
+    o(this, "id");
+    o(this, "type", "modal");
+    o(this, "config");
+    o(this, "state");
+    o(this, "backdropElement", null);
+    o(this, "contentElement", null);
+    o(this, "messageHandlers", /* @__PURE__ */ new Set());
+    o(this, "eventHandlers", /* @__PURE__ */ new Map());
+    o(this, "setState");
+    // ==================== Phase 2: Enhanced Methods ====================
+    o(this, "sharedState", /* @__PURE__ */ new Map());
+    o(this, "stateChangeCallbacks", /* @__PURE__ */ new Map());
+    o(this, "childWindows", /* @__PURE__ */ new Map());
+    o(this, "parentWindow", null);
+    o(this, "tabContainer", null);
+    this.id = e.id, this.config = e;
+    const [t, i] = z({
+      id: e.id,
+      title: e.title || e.id,
+      isVisible: !1,
+      isMinimized: !1,
+      isMaximized: !1,
+      isFullscreen: !1,
+      isFocused: !1,
+      bounds: {
+        x: 0,
+        y: 0,
+        width: e.width || 600,
+        height: e.height || 400
+      },
+      zIndex: 1e3,
+      // Phase 2: Enhanced state properties
+      isPooled: !1,
+      lastUsed: Date.now(),
+      groupId: void 0,
+      tabIndex: void 0,
+      parentWindowId: void 0
+    });
+    this.state = t, this.setState = i, this.createElement();
+  }
+  render(e) {
+    this.contentElement && (this.contentElement.innerHTML = `<div>Modal: ${this.config.title}</div>`);
+  }
+  async show() {
+    this.backdropElement && (document.body.appendChild(this.backdropElement), this.setState((e) => ({
+      ...e,
+      isVisible: !0,
+      isFocused: !0
+    })), this.emit("show"));
+  }
+  async hide() {
+    this.backdropElement?.parentNode && this.backdropElement.parentNode.removeChild(this.backdropElement), this.setState((e) => ({
+      ...e,
+      isVisible: !1,
+      isFocused: !1
+    })), this.emit("hide");
+  }
+  async focus() {
+    this.contentElement && this.contentElement.focus(), this.emit("focus");
+  }
+  async minimize() {
+    await this.hide();
+  }
+  async maximize() {
+  }
+  async restore() {
+    await this.show();
+  }
+  async close() {
+    await this.hide(), this.emit("close"), this.dispose();
+  }
+  dispose() {
+    this.backdropElement?.parentNode && this.backdropElement.parentNode.removeChild(this.backdropElement), this.messageHandlers.clear(), this.eventHandlers.clear();
+  }
+  postMessage(e) {
+  }
+  onMessage(e) {
+    return this.messageHandlers.add(e), () => this.messageHandlers.delete(e);
+  }
+  receiveMessage(e) {
+    this.messageHandlers.forEach((t) => t(e));
+  }
+  onShow(e) {
+    return this.addEventListener("show", e);
+  }
+  onHide(e) {
+    return this.addEventListener("hide", e);
+  }
+  onFocus(e) {
+    return this.addEventListener("focus", e);
+  }
+  onBlur(e) {
+    return this.addEventListener("blur", e);
+  }
+  onResize(e) {
+    return () => {
+    };
+  }
+  onClose(e) {
+    return this.addEventListener("close", e);
+  }
+  addEventListener(e, t) {
+    return this.eventHandlers.has(e) || this.eventHandlers.set(e, /* @__PURE__ */ new Set()), this.eventHandlers.get(e).add(t), () => {
+      this.eventHandlers.get(e)?.delete(t);
+    };
+  }
+  emit(e) {
+    const t = this.eventHandlers.get(e);
+    t && t.forEach((i) => i());
+  }
+  createElement() {
+    this.backdropElement = document.createElement("div"), this.backdropElement.className = "tachui-modal-backdrop", this.contentElement = document.createElement("div"), this.contentElement.className = "tachui-modal-content", this.contentElement.style.width = `${this.config.width || 600}px`, this.contentElement.style.height = `${this.config.height || 400}px`, this.backdropElement.appendChild(this.contentElement), this.backdropElement.addEventListener("click", (e) => {
+      e.target === this.backdropElement && this.config.backdropDismiss !== !1 && this.close();
+    }), document.addEventListener("keydown", (e) => {
+      e.key === "Escape" && this.config.escapeKeyDismiss !== !1 && this.close();
+    });
+  }
+  /**
+   * Window pooling and reuse
+   */
+  async prepareForReuse() {
+    this.contentElement && (this.contentElement.innerHTML = ""), this.messageHandlers.clear(), this.sharedState.clear(), this.stateChangeCallbacks.clear();
+  }
+  isReusable() {
+    return this.backdropElement != null && this.contentElement != null;
+  }
+  markAsUsed() {
+    this.setState((e) => ({
+      ...e,
+      lastUsed: Date.now()
+    }));
+  }
+  async returnToPool() {
+    await this.hide(), this.setState((e) => ({
+      ...e,
+      isPooled: !0,
+      lastUsed: Date.now()
+    }));
+  }
+  /**
+   * State synchronization (full support for modals)
+   */
+  syncState(e, t) {
+    this.sharedState.set(e, t);
+    const i = this.stateChangeCallbacks.get(e);
+    i && i.forEach((s) => s(t)), this.childWindows.forEach((s) => {
+      s.syncState(e, t);
+    });
+  }
+  getSharedState(e) {
+    return this.sharedState.get(e);
+  }
+  onSharedStateChange(e, t) {
+    return this.stateChangeCallbacks.has(e) || this.stateChangeCallbacks.set(e, /* @__PURE__ */ new Set()), this.stateChangeCallbacks.get(e).add(t), () => {
+      this.stateChangeCallbacks.get(e)?.delete(t);
+    };
+  }
+  /**
+   * Tab grouping (web modal tab simulation)
+   */
+  async attachToTab(e) {
+    this.tabContainer = e, this.createTabInterface();
+  }
+  async detachFromTab() {
+    return this.tabContainer = null, this.removeTabInterface(), this;
+  }
+  getTabContainer() {
+    return this.tabContainer;
+  }
+  getTabIndex() {
+    return this.state().tabIndex || 0;
+  }
+  setTabIndex(e) {
+    this.setState((t) => ({
+      ...t,
+      tabIndex: e
+    }));
+  }
+  /**
+   * Parent-child relationships (full support for modals)
+   */
+  setParentWindow(e) {
+    this.parentWindow = e, this.setState((t) => ({
+      ...t,
+      parentWindowId: e.id
+    }));
+  }
+  getParentWindow() {
+    return this.parentWindow;
+  }
+  getChildWindows() {
+    return Array.from(this.childWindows.values());
+  }
+  addChildWindow(e) {
+    this.childWindows.set(e.id, e), e.setParentWindow(this);
+  }
+  removeChildWindow(e) {
+    this.childWindows.delete(e);
+  }
+  /**
+   * Tab interface helpers
+   */
+  createTabInterface() {
+    if (!this.contentElement || !this.tabContainer) return;
+    const e = document.createElement("div");
+    e.className = "tachui-modal-tab-header", e.style.cssText = `
+      display: flex;
+      border-bottom: 1px solid #e0e0e0;
+      background: #f5f5f5;
+      min-height: 40px;
+    `, this.contentElement.insertBefore(e, this.contentElement.firstChild);
+  }
+  removeTabInterface() {
+    if (!this.contentElement) return;
+    const e = this.contentElement.querySelector(
+      ".tachui-modal-tab-header"
+    );
+    e && e.remove();
+  }
+}
+class We {
+  constructor(e, t) {
+    o(this, "id");
+    o(this, "type", "portal");
+    o(this, "config");
+    o(this, "state");
+    o(this, "portalElement", null);
+    o(this, "messageHandlers", /* @__PURE__ */ new Set());
+    o(this, "eventHandlers", /* @__PURE__ */ new Map());
+    o(this, "cleanupFunction", null);
+    o(this, "setState");
+    // ==================== Phase 2: Enhanced Methods ====================
+    o(this, "sharedState", /* @__PURE__ */ new Map());
+    o(this, "stateChangeCallbacks", /* @__PURE__ */ new Map());
+    o(this, "childWindows", /* @__PURE__ */ new Map());
+    o(this, "parentWindow", null);
+    o(this, "tabContainer", null);
+    this.container = t, this.id = e.id, this.config = e;
+    const [i, s] = z({
+      id: e.id,
+      title: e.title || e.id,
+      isVisible: !1,
+      isMinimized: !1,
+      isMaximized: !1,
+      isFullscreen: !1,
+      isFocused: !1,
+      bounds: {
+        x: e.x || 0,
+        y: e.y || 0,
+        width: e.width || 400,
+        height: e.height || 300
+      },
+      // Phase 2: Enhanced state properties
+      isPooled: !1,
+      lastUsed: Date.now(),
+      groupId: void 0,
+      tabIndex: void 0,
+      parentWindowId: void 0
+    });
+    this.state = i, this.setState = s, this.createElement();
+  }
+  render(e) {
+    if (this.portalElement) {
+      this.portalElement.innerHTML = "";
+      try {
+        const t = Y(e, this.portalElement);
+        this.cleanupFunction = t;
+      } catch (t) {
+        console.error("Error during mountComponentTree:", t);
+      }
+    }
+  }
+  async show() {
+    this.portalElement && (this.container.id === "app" && (this.container.innerHTML = ""), this.container.appendChild(this.portalElement), this.portalElement.style.display = "block", this.setState((e) => ({
+      ...e,
+      isVisible: !0
+    })), this.emit("show"));
+  }
+  async hide() {
+    this.portalElement && (this.portalElement.style.display = "none"), this.setState((e) => ({
+      ...e,
+      isVisible: !1
+    })), this.emit("hide");
+  }
+  async focus() {
+    this.emit("focus");
+  }
+  async minimize() {
+    await this.hide();
+  }
+  async maximize() {
+  }
+  async restore() {
+    await this.show();
+  }
+  async close() {
+    this.portalElement?.parentNode && this.portalElement.parentNode.removeChild(this.portalElement), this.emit("close"), this.dispose();
+  }
+  dispose() {
+    this.cleanupFunction && (this.cleanupFunction(), this.cleanupFunction = null), this.portalElement?.parentNode && this.portalElement.parentNode.removeChild(this.portalElement), this.messageHandlers.clear(), this.eventHandlers.clear();
+  }
+  postMessage(e) {
+  }
+  onMessage(e) {
+    return this.messageHandlers.add(e), () => this.messageHandlers.delete(e);
+  }
+  receiveMessage(e) {
+    this.messageHandlers.forEach((t) => t(e));
+  }
+  onShow(e) {
+    return this.addEventListener("show", e);
+  }
+  onHide(e) {
+    return this.addEventListener("hide", e);
+  }
+  onFocus(e) {
+    return this.addEventListener("focus", e);
+  }
+  onBlur(e) {
+    return this.addEventListener("blur", e);
+  }
+  onResize(e) {
+    return () => {
+    };
+  }
+  onClose(e) {
+    return this.addEventListener("close", e);
+  }
+  addEventListener(e, t) {
+    return this.eventHandlers.has(e) || this.eventHandlers.set(e, /* @__PURE__ */ new Set()), this.eventHandlers.get(e).add(t), () => {
+      this.eventHandlers.get(e)?.delete(t);
+    };
+  }
+  emit(e) {
+    const t = this.eventHandlers.get(e);
+    t && t.forEach((i) => i());
+  }
+  createElement() {
+    this.portalElement = document.createElement("div"), this.portalElement.className = "tachui-portal", this.container && this.container.id === "app" ? (this.portalElement.style.position = "static", this.portalElement.style.width = "100%", this.portalElement.style.height = "auto", this.portalElement.style.background = "transparent", this.portalElement.style.border = "none", this.portalElement.style.display = "block") : (this.portalElement.style.position = "absolute", this.portalElement.style.left = `${this.config.x || 0}px`, this.portalElement.style.top = `${this.config.y || 0}px`, this.portalElement.style.width = `${this.config.width || 400}px`, this.portalElement.style.height = `${this.config.height || 300}px`, this.portalElement.style.background = "white", this.portalElement.style.border = "1px solid #ccc", this.portalElement.style.borderRadius = "8px", this.portalElement.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.15)", this.portalElement.style.display = "none");
+  }
+  /**
+   * Window pooling and reuse (excellent for portals)
+   */
+  async prepareForReuse() {
+    this.portalElement && (this.portalElement.innerHTML = ""), this.messageHandlers.clear(), this.sharedState.clear(), this.stateChangeCallbacks.clear();
+  }
+  isReusable() {
+    return this.portalElement != null;
+  }
+  markAsUsed() {
+    this.setState((e) => ({
+      ...e,
+      lastUsed: Date.now()
+    }));
+  }
+  async returnToPool() {
+    await this.hide(), this.setState((e) => ({
+      ...e,
+      isPooled: !0,
+      lastUsed: Date.now()
+    }));
+  }
+  /**
+   * State synchronization (full support for portals)
+   */
+  syncState(e, t) {
+    this.sharedState.set(e, t);
+    const i = this.stateChangeCallbacks.get(e);
+    i && i.forEach((s) => s(t)), this.childWindows.forEach((s) => {
+      s.syncState(e, t);
+    });
+  }
+  getSharedState(e) {
+    return this.sharedState.get(e);
+  }
+  onSharedStateChange(e, t) {
+    return this.stateChangeCallbacks.has(e) || this.stateChangeCallbacks.set(e, /* @__PURE__ */ new Set()), this.stateChangeCallbacks.get(e).add(t), () => {
+      this.stateChangeCallbacks.get(e)?.delete(t);
+    };
+  }
+  /**
+   * Tab grouping (portal-based tab simulation)
+   */
+  async attachToTab(e) {
+    this.tabContainer = e, this.createPortalTabInterface();
+  }
+  async detachFromTab() {
+    return this.tabContainer = null, this.removePortalTabInterface(), this;
+  }
+  getTabContainer() {
+    return this.tabContainer;
+  }
+  getTabIndex() {
+    return this.state().tabIndex || 0;
+  }
+  setTabIndex(e) {
+    this.setState((t) => ({
+      ...t,
+      tabIndex: e
+    }));
+  }
+  /**
+   * Parent-child relationships (full support for portals)
+   */
+  setParentWindow(e) {
+    this.parentWindow = e, this.setState((t) => ({
+      ...t,
+      parentWindowId: e.id
+    }));
+  }
+  getParentWindow() {
+    return this.parentWindow;
+  }
+  getChildWindows() {
+    return Array.from(this.childWindows.values());
+  }
+  addChildWindow(e) {
+    this.childWindows.set(e.id, e), e.setParentWindow(this);
+  }
+  removeChildWindow(e) {
+    this.childWindows.delete(e);
+  }
+  /**
+   * Portal tab interface helpers
+   */
+  createPortalTabInterface() {
+    if (!this.portalElement || !this.tabContainer) return;
+    const e = document.createElement("div");
+    e.className = "tachui-portal-tab-header", e.style.cssText = `
+      display: flex;
+      background: #f8f9fa;
+      border-bottom: 1px solid #dee2e6;
+      min-height: 36px;
+      padding: 0 8px;
+      align-items: center;
+    `, this.portalElement.insertBefore(e, this.portalElement.firstChild);
+  }
+  removePortalTabInterface() {
+    if (!this.portalElement) return;
+    const e = this.portalElement.querySelector(
+      ".tachui-portal-tab-header"
+    );
+    e && e.remove();
+  }
+}
+class A {
+  constructor(e, t = {}) {
+    o(this, "adapter");
+    o(this, "windows", /* @__PURE__ */ new Map());
+    o(this, "windowGroups", /* @__PURE__ */ new Map());
+    o(this, "eventHandlers", /* @__PURE__ */ new Map());
+    // Phase 2: Global state management
+    o(this, "globalState", /* @__PURE__ */ new Map());
+    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();
+  }
+  /**
+   * Open a new window/viewport
+   */
+  async openWindow(e, t, i = {}) {
+    const s = this.windows.get(e);
+    if (s)
+      return await s.show(), await s.focus(), s;
+    const a = {
+      id: e,
+      title: i.title || e,
+      width: i.width || 800,
+      height: i.height || 600,
+      ...i
+    };
+    this.getOptimalWindowType(i);
+    const r = this.adapter.createWindow(a);
+    return this.windows.set(e, r), r.render(t), this.setupWindowEventHandlers(r), await r.show(), this.emit("window:opened", { window: r }), r;
+  }
+  /**
+   * Dismiss/close a window
+   */
+  async dismissWindow(e) {
+    const t = this.windows.get(e);
+    if (!t)
+      throw new Error(`Window with id '${e}' not found`);
+    await t.close(), this.windows.delete(e), this.emit("window:closed", { windowId: e });
+  }
+  /**
+   * Get a specific window
+   */
+  getWindow(e) {
+    return this.windows.get(e) || null;
+  }
+  /**
+   * Get all open windows
+   */
+  getAllWindows() {
+    return Array.from(this.windows.values());
+  }
+  /**
+   * Create a window group for data-driven window management
+   */
+  createWindowGroup(e) {
+    if (this.windowGroups.has(e))
+      return this.windowGroups.get(e);
+    const t = new Se(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);
+  }
+  /**
+   * Get optimal window type for given options
+   */
+  getOptimalWindowType(e = {}) {
+    const t = H(this.environment);
+    return e.preferNativeWindow && this.environment.capabilities.nativeWindows ? "window" : e.modal !== !1 && this.environment.capabilities.modalOverlays ? "modal" : t.getOptimalViewportType(e.preferNativeWindow);
+  }
+  /**
+   * Event handling
+   */
+  onWindowOpened(e) {
+    return this.on("window:opened", ({ window: t }) => e(t));
+  }
+  onWindowClosed(e) {
+    return this.on("window:closed", ({ windowId: t }) => e(t));
+  }
+  /**
+   * Generic event subscription
+   */
+  on(e, t) {
+    return this.eventHandlers.has(e) || this.eventHandlers.set(e, /* @__PURE__ */ new Set()), this.eventHandlers.get(e).add(t), () => {
+      this.eventHandlers.get(e)?.delete(t);
+    };
+  }
+  /**
+   * Emit an event to all handlers
+   */
+  emit(e, t) {
+    const i = this.eventHandlers.get(e);
+    i && i.forEach((s) => s(t));
+  }
+  /**
+   * Set up event handlers for a window
+   */
+  setupWindowEventHandlers(e) {
+    e.onFocus(() => {
+      this.emit("window:focused", { windowId: e.id });
+    }), e.onResize((t) => {
+      this.emit("window:resized", { windowId: e.id, bounds: t });
+    }), e.onClose(() => {
+      this.windows.delete(e.id), this.emit("window:closed", { windowId: e.id });
+    });
+  }
+  /**
+   * Create default adapter based on platform
+   */
+  createDefaultAdapter() {
+    switch (this.environment.platform) {
+      case "electron":
+        return new D(this.platformConfig);
+      default:
+        return new D(this.platformConfig);
+    }
+  }
+  // ==================== Phase 2: Global State Management ====================
+  /**
+   * Synchronize state globally across all windows
+   */
+  syncGlobalState(e, t, i) {
+    this.globalState.set(e, t);
+    const s = this.globalStateCallbacks.get(e);
+    s && s.forEach((a) => a(t)), this.windows.forEach((a) => {
+      a.syncState(e, t);
+    }), this.windowGroups.forEach((a, r) => {
+      r !== i && a.syncStateInternal(e, t);
+    });
+  }
+  /**
+   * Get global shared state
+   */
+  getGlobalState(e) {
+    return this.globalState.get(e);
+  }
+  /**
+   * Listen for global state changes
+   */
+  onGlobalStateChange(e, t) {
+    return this.globalStateCallbacks.has(e) || this.globalStateCallbacks.set(e, /* @__PURE__ */ new Set()), this.globalStateCallbacks.get(e).add(t), () => {
+      this.globalStateCallbacks.get(e)?.delete(t);
+    };
+  }
+  /**
+   * Get window group by ID
+   */
+  getWindowGroup(e) {
+    return this.windowGroups.get(e) || null;
+  }
+  /**
+   * Get all window groups
+   */
+  getAllWindowGroups() {
+    return Array.from(this.windowGroups.values());
+  }
+  /**
+   * Window group management utilities
+   */
+  configureWindowGroupDefaults(e, t) {
+    const i = this.windowGroups.get(e);
+    i && (t.groupingStrategy && i.setGroupingStrategy(t.groupingStrategy), t.tabConfig && i.configureTabbing(t.tabConfig), t.poolConfig && i.configurePool(t.poolConfig), t.stateSyncScope && i.enableStateSync(t.stateSyncScope));
+  }
+  /**
+   * Cleanup all resources
+   */
+  dispose() {
+    this.globalState.clear(), this.globalStateCallbacks.clear();
+    const e = Array.from(this.windows.values()).map(
+      (t) => t.close().catch(() => {
+      })
+      // Ignore errors during cleanup
+    );
+    Promise.all(e).finally(() => {
+      this.windows.clear(), this.windowGroups.clear(), this.eventHandlers.clear();
+    });
+  }
+}
+class Se {
+  constructor(e, t, i = "any") {
+    o(this, "windows", /* @__PURE__ */ new Map());
+    o(this, "defaultOptions", {});
+    o(this, "maxInstances", 1 / 0);
+    // Phase 2: Enhanced features
+    o(this, "groupingStrategy", "stack");
+    o(this, "tabConfig", {
+      enabled: !1,
+      tabPosition: "top",
+      allowDetach: !0,
+      allowReorder: !0
+    });
+    o(this, "poolConfig", {
+      enabled: !1,
+      maxPoolSize: 5,
+      reuseThreshold: 3e4,
+      // 30 seconds
+      keepAliveTime: 3e5
+      // 5 minutes
+    });
+    o(this, "stateSyncScope", "none");
+    o(this, "sharedState", /* @__PURE__ */ new Map());
+    o(this, "stateCallbacks", /* @__PURE__ */ new Map());
+    o(this, "windowPool", /* @__PURE__ */ new Map());
+    o(this, "eventCallbacks", /* @__PURE__ */ new Map());
+    o(this, "windowMetadata", /* @__PURE__ */ new Map());
+    this.id = e, this.manager = t, this.dataType = i, this.startPoolCleanup();
+  }
+  /**
+   * Open a window for specific data (Enhanced with pooling and reuse)
+   */
+  async openWindow(e, t) {
+    const i = this.createDataKey(e), s = `${this.id}:${i}`, a = this.windows.get(i);
+    if (a)
+      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, {
+        id: s,
+        groupId: this.id,
+        isPooled: !1,
+        lastUsed: Date.now()
+      }), 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 h = t(e);
+    return r = await this.manager.openWindow(
+      s,
+      h,
+      this.defaultOptions
+    ), this.setWindowGroupMetadata(r, {
+      groupId: this.id,
+      isPooled: !1,
+      lastUsed: Date.now(),
+      tabIndex: this.tabConfig.enabled ? this.windows.size : void 0
+    }), this.windows.set(i, r), r.onClose(() => {
+      this.poolConfig.enabled && r.isReusable() ? this.returnToPool(r) : (this.windows.delete(i), this.emitEvent("window:destroyed", r.id), this.windows.size === 0 && this.emitEvent("group:empty"));
+    }), this.groupingStrategy !== "stack" && this.applyGroupingStrategy(), this.emitEvent("window:created", r), this.windows.size >= this.maxInstances && this.emitEvent("group:full"), r;
+  }
+  /**
+   * Get window for specific data
+   */
+  getWindowForData(e) {
+    const t = this.createDataKey(e);
+    return this.windows.get(t) || null;
+  }
+  /**
+   * Get all windows in this group
+   */
+  getAllWindows() {
+    return Array.from(this.windows.values());
+  }
+  /**
+   * Close all windows in this group
+   */
+  async closeAllWindows() {
+    const e = Array.from(this.windows.values()).map(
+      (t) => t.close().catch(() => {
+      })
+      // Ignore errors
+    );
+    await Promise.all(e), this.windows.clear();
+  }
+  /**
+   * Set default options for windows in this group
+   */
+  setDefaultOptions(e) {
+    this.defaultOptions = { ...e };
+  }
+  /**
+   * Set maximum number of instances
+   */
+  setMaxInstances(e) {
+    this.maxInstances = Math.max(1, e);
+  }
+  // ==================== Phase 2: Enhanced Features ====================
+  /**
+   * Window grouping and tabbing
+   */
+  setGroupingStrategy(e) {
+    this.groupingStrategy = e, this.applyGroupingStrategy();
+  }
+  getGroupingStrategy() {
+    return this.groupingStrategy;
+  }
+  configureTabbing(e) {
+    this.tabConfig = { ...e }, e.enabled && this.manager.environment.platform === "electron" && this.enableTabGrouping();
+  }
+  getTabConfig() {
+    return { ...this.tabConfig };
+  }
+  /**
+   * Window pooling and reuse
+   */
+  configurePool(e) {
+    this.poolConfig = { ...e }, e.enabled && this.startPoolCleanup();
+  }
+  getPoolConfig() {
+    return { ...this.poolConfig };
+  }
+  getPooledWindows() {
+    return Array.from(this.windowPool.values());
+  }
+  async returnToPool(e) {
+    if (!this.poolConfig.enabled) {
+      await e.close();
+      return;
+    }
+    await e.prepareForReuse(), await e.hide(), this.setWindowGroupMetadata(e, {
+      isPooled: !0,
+      lastUsed: Date.now()
+    }), this.windowPool.set(e.id, e), this.windows.delete(this.getDataKeyForWindow(e)), this.emitEvent("window:pooled", e);
+  }
+  /**
+   * State synchronization
+   */
+  enableStateSync(e) {
+    this.stateSyncScope = e;
+  }
+  syncState(e, t) {
+    this.syncStateInternal(e, t), this.stateSyncScope === "group" ? this.syncStateToGroupWindows(e, t) : this.stateSyncScope === "global" && this.manager.syncGlobalState(e, t, this.id);
+  }
+  /**
+   * Internal state sync without propagation (prevents recursion)
+   */
+  syncStateInternal(e, t) {
+    this.sharedState.set(e, t);
+    const i = this.stateCallbacks.get(e);
+    i && i.forEach((s) => s(t));
+  }
+  getSharedState(e) {
+    return this.sharedState.get(e);
+  }
+  onStateChange(e, t) {
+    return this.stateCallbacks.has(e) || this.stateCallbacks.set(e, /* @__PURE__ */ new Set()), this.stateCallbacks.get(e).add(t), () => {
+      this.stateCallbacks.get(e)?.delete(t);
+    };
+  }
+  /**
+   * Window lifecycle events
+   */
+  onWindowCreated(e) {
+    return this.addEventCallback("window:created", e);
+  }
+  onWindowDestroyed(e) {
+    return this.addEventCallback("window:destroyed", e);
+  }
+  onWindowReused(e) {
+    return this.addEventCallback("window:reused", e);
+  }
+  /**
+   * Group-level events
+   */
+  onGroupEmpty(e) {
+    return this.addEventCallback("group:empty", e);
+  }
+  onGroupFull(e) {
+    return this.addEventCallback("group:full", e);
+  }
+  // ==================== Private Implementation ====================
+  /**
+   * Apply grouping strategy to existing windows
+   */
+  applyGroupingStrategy() {
+    const e = this.getAllWindows();
+    switch (this.groupingStrategy) {
+      case "tabs":
+        this.arrangeWindowsAsTabs(e);
+        break;
+      case "cascade":
+        this.arrangeWindowsAsCascade(e);
+        break;
+      case "tile":
+        this.arrangeWindowsAsTiles(e);
+        break;
+      default:
+        this.arrangeWindowsAsStack(e);
+        break;
+    }
+  }
+  /**
+   * Enable tab grouping for windows
+   */
+  enableTabGrouping() {
+    !this.tabConfig.enabled || this.manager.environment.platform;
+  }
+  /**
+   * Start pool cleanup timer
+   */
+  startPoolCleanup() {
+    this.poolConfig.enabled && setInterval(() => {
+      this.cleanupPool();
+    }, 6e4);
+  }
+  /**
+   * Clean up expired pooled windows
+   */
+  cleanupPool() {
+    const e = Date.now(), t = [];
+    this.windowPool.forEach((i, s) => {
+      const a = this.getWindowGroupMetadata(i);
+      e - (a.lastUsed || 0) > this.poolConfig.keepAliveTime && t.push(s);
+    }), t.forEach(async (i) => {
+      const s = this.windowPool.get(i);
+      s && (await s.dispose(), this.windowPool.delete(i));
+    });
+  }
+  /**
+   * Try to get a pooled window for reuse
+   */
+  async getPooledWindow() {
+    if (!this.poolConfig.enabled || this.windowPool.size === 0)
+      return null;
+    let e = null, t = 0;
+    return this.windowPool.forEach((i) => {
+      const s = this.getWindowGroupMetadata(i), a = Date.now() - (s.lastUsed || 0);
+      if (a < this.poolConfig.reuseThreshold) {
+        const r = this.poolConfig.reuseThreshold - a;
+        r > t && (e = i, t = r);
+      }
+    }), e && (this.windowPool.delete(e.id), this.setWindowGroupMetadata(e, {
+      isPooled: !1,
+      lastUsed: Date.now()
+    })), e;
+  }
+  /**
+   * Sync state to all windows in group (with recursion prevention)
+   */
+  syncStateToGroupWindows(e, t) {
+    this.windows.forEach((i) => {
+      const s = this.getWindowGroupMetadata(i);
+      this.setWindowGroupMetadata(i, {
+        ...s,
+        [`shared:${e}`]: t
+      });
+    });
+  }
+  /**
+   * Get data key for a window instance
+   */
+  getDataKeyForWindow(e) {
+    for (const [t, i] of this.windows.entries())
+      if (i.id === e.id)
+        return t;
+    return "";
+  }
+  /**
+   * Window arrangement strategies
+   */
+  arrangeWindowsAsTabs(e) {
+    this.manager.environment.platform === "electron" || this.arrangeWindowsAsModalTabs(e);
+  }
+  arrangeWindowsAsCascade(e) {
+    e.forEach((t, i) => {
+      const s = i * 30;
+      this.setWindowGroupMetadata(t, {
+        cascadeOffset: s,
+        arrangementStyle: "cascade"
+      });
+    });
+  }
+  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) => {
+      const w = l % s, F = Math.floor(l / s);
+      this.setWindowGroupMetadata(c, {
+        tilePosition: {
+          col: w,
+          row: F,
+          x: w * r,
+          y: F * h,
+          width: r,
+          height: h
+        },
+        arrangementStyle: "tile"
+      });
+    });
+  }
+  arrangeWindowsAsStack(e) {
+  }
+  arrangeWindowsAsModalTabs(e) {
+  }
+  /**
+   * Window metadata management (workaround for signal setter access)
+   */
+  setWindowGroupMetadata(e, t) {
+    this.windowMetadata.set(e.id, {
+      ...this.windowMetadata.get(e.id),
+      ...t
+    });
+  }
+  getWindowGroupMetadata(e) {
+    return this.windowMetadata.get(e.id) || {};
+  }
+  /**
+   * Event management helpers
+   */
+  addEventCallback(e, t) {
+    return this.eventCallbacks.has(e) || this.eventCallbacks.set(e, /* @__PURE__ */ new Set()), this.eventCallbacks.get(e).add(t), () => {
+      this.eventCallbacks.get(e)?.delete(t);
+    };
+  }
+  emitEvent(e, ...t) {
+    const i = this.eventCallbacks.get(e);
+    i && i.forEach((s) => s(...t));
+  }
+  /**
+   * Create a unique key for data
+   */
+  createDataKey(e) {
+    if (e == null)
+      return "null";
+    if (typeof e == "string" || typeof e == "number" || typeof e == "boolean")
+      return String(e);
+    if (typeof e == "object" && "id" in e)
+      return String(e.id);
+    try {
+      return JSON.stringify(e);
+    } catch {
+      return String(e);
+    }
+  }
+}
+let m = null;
+function u(n = {}) {
+  return m || (m = new A(void 0, n)), m;
+}
+function R(n) {
+  m?.dispose(), m = n;
+}
+function Ee() {
+  m?.dispose(), m = null;
+}
+function y(n) {
+  return {
+    type: "window-scene",
+    sceneType: "window",
+    id: n.id,
+    title: n.title || n.id,
+    content: n.children,
+    options: n,
+    // Render method for scene management
+    render() {
+      return {
+        type: "component",
+        id: `window-scene-${n.id}`,
+        props: {},
+        render: () => ({
+          type: "element",
+          tag: "div",
+          props: {},
+          children: [],
+          element: document.createElement("div")
+        })
+      };
+    },
+    // Open this window
+    async open() {
+      const e = u(), t = ee(() => te((i) => n.children(), `Window-${n.id}`)({}));
+      await e.openWindow(n.id, t, n);
+    },
+    // Close this window
+    async close() {
+      await u().dismissWindow(n.id);
+    }
+  };
+}
+function T(n) {
+  const e = u(), t = e.createWindowGroup(n.id);
+  n.groupingStrategy && t.setGroupingStrategy(n.groupingStrategy), n.tabConfig && t.configureTabbing(n.tabConfig), n.poolConfig && t.configurePool(n.poolConfig), n.stateSyncScope && t.enableStateSync(n.stateSyncScope), n.maxInstances && t.setMaxInstances(n.maxInstances);
+  const {
+    groupingStrategy: i,
+    tabConfig: s,
+    poolConfig: a,
+    stateSyncScope: r,
+    maxInstances: h,
+    ...c
+  } = n;
+  return t.setDefaultOptions(c), {
+    type: "window-group",
+    sceneType: "window-group",
+    id: n.id,
+    title: n.title || n.id,
+    content: n.children,
+    options: n,
+    group: t,
+    // Render method for scene management
+    render() {
+      return {
+        type: "component",
+        id: `window-group-${n.id}`,
+        props: {},
+        render: () => ({
+          type: "element",
+          tag: "div",
+          props: {},
+          children: [],
+          element: document.createElement("div")
+        })
+      };
+    },
+    // Open a window (data-driven or simple)
+    async open(l) {
+      if (l !== void 0 && n.for)
+        await t.openWindow(
+          l,
+          n.children
+        );
+      else {
+        const w = n.children();
+        await e.openWindow(n.id, w, n);
+      }
+    },
+    // Open window for specific data
+    async openForData(l) {
+      if (!n.for)
+        throw new Error(
+          'WindowGroup must specify "for" parameter for data-driven windows'
+        );
+      await t.openWindow(
+        l,
+        n.children
+      );
+    },
+    // Close all windows in this group
+    async closeAll() {
+      await t.closeAllWindows();
+    },
+    // Get all windows in this group
+    getWindows() {
+      return t.getAllWindows();
+    },
+    // Phase 2: Enhanced methods
+    configureGrouping(l) {
+      t.setGroupingStrategy(l);
+    },
+    configureTabs(l) {
+      t.configureTabbing(l);
+    },
+    configurePooling(l) {
+      t.configurePool(l);
+    },
+    enableStateSync(l) {
+      t.enableStateSync(l);
+    },
+    syncGroupState(l, w) {
+      t.syncState(l, w);
+    },
+    getGroupState(l) {
+      return t.getSharedState(l);
+    },
+    onGroupStateChange(l, w) {
+      return t.onStateChange(l, w);
+    }
+  };
+}
+function M(n) {
+  return {
+    type: "app",
+    scenes: n.children,
+    render() {
+      return {
+        type: "component",
+        id: "tachui-app",
+        props: {},
+        render: () => ({
+          type: "element",
+          tag: "div",
+          props: {},
+          children: [],
+          element: document.createElement("div")
+        })
+      };
+    },
+    // Initialize all scenes
+    async initialize() {
+      if (!u(n.platformConfig)) {
+        const { initializeViewportSystem: t } = await Promise.resolve().then(() => ct);
+        t();
+      }
+    },
+    // Get scene by ID
+    getScene(e) {
+      return n.children.find((t) => t.id === e);
+    },
+    // Open a specific scene
+    async openScene(e, t) {
+      const i = this.getScene(e);
+      if (!i)
+        throw new Error(`Scene with id '${e}' not found`);
+      i.type === "window-scene" ? await i.open() : i.type === "window-group" && await i.open(t);
+    }
+  };
+}
+const k = {
+  /**
+   * Create a document window group
+   */
+  documentGroup(n, e, t, i) {
+    return T({
+      id: n,
+      title: e,
+      for: t,
+      children: i,
+      width: 800,
+      height: 600,
+      resizable: !0
+    });
+  },
+  /**
+   * Create a settings window
+   */
+  settingsWindow(n) {
+    return y({
+      id: "settings",
+      title: "Settings",
+      width: 600,
+      height: 400,
+      resizable: !1,
+      children: n
+    });
+  },
+  /**
+   * Create an inspector window
+   */
+  inspectorWindow(n) {
+    return y({
+      id: "inspector",
+      title: "Inspector",
+      width: 300,
+      height: 500,
+      resizable: !0,
+      alwaysOnTop: !0,
+      children: n
+    });
+  },
+  /**
+   * Create a palette window
+   */
+  paletteWindow(n, e, t) {
+    return y({
+      id: n,
+      title: e,
+      width: 250,
+      height: 400,
+      resizable: !1,
+      alwaysOnTop: !0,
+      children: t
+    });
+  }
+}, $ = {
+  /**
+   * Basic app with main window and settings
+   */
+  basicApp: () => M({
+    children: [
+      y({
+        id: "main",
+        title: "My App",
+        children: () => ({
+          type: "component",
+          id: "main-content",
+          props: {},
+          render: () => ({
+            type: "element",
+            tag: "div",
+            props: {},
+            children: [],
+            element: document.createElement("div")
+          })
+        })
+      }),
+      k.settingsWindow(() => ({
+        type: "component",
+        id: "settings-content",
+        props: {},
+        render: () => ({
+          type: "element",
+          tag: "div",
+          props: {},
+          children: [],
+          element: document.createElement("div")
+        })
+      }))
+    ]
+  }),
+  /**
+   * Document-based app
+   */
+  documentApp: () => M({
+    children: [
+      T({
+        id: "document",
+        title: "Document",
+        for: class {
+          constructor() {
+            o(this, "id");
+            o(this, "title");
+          }
+        },
+        children: (n) => ({
+          type: "component",
+          id: `document-${n.id}`,
+          props: {},
+          render: () => ({
+            type: "element",
+            tag: "div",
+            props: {},
+            children: [],
+            element: document.createElement("div")
+          })
+        })
+      }),
+      k.settingsWindow(() => ({
+        type: "component",
+        id: "settings",
+        props: {},
+        render: () => ({
+          type: "element",
+          tag: "div",
+          props: {},
+          children: [],
+          element: document.createElement("div")
+        })
+      }))
+    ]
+  })
+}, q = ne(null);
+function B({
+  children: n,
+  manager: e
+}) {
+  const t = e || u(), i = {
+    openWindow: async (s, a, r) => await t.openWindow(s, a, r),
+    dismissWindow: async (s) => await t.dismissWindow(s),
+    viewportEnvironment: t.environment,
+    currentWindow: null
+    // This would be set based on current context
+  };
+  return {
+    type: "context-provider",
+    context: q,
+    value: i,
+    children: Array.isArray(n) ? n : [n]
+  };
+}
+function v() {
+  const n = ie(q);
+  if (!n)
+    throw new Error(
+      "useViewportEnvironment must be used within a ViewportEnvironmentProvider"
+    );
+  return n();
+}
+function P() {
+  const { openWindow: n } = v();
+  return n;
+}
+function x() {
+  const { dismissWindow: n } = v();
+  return n;
+}
+function _() {
+  const { viewportEnvironment: n } = v();
+  return n;
+}
+function Ce() {
+  const { currentWindow: n } = v();
+  return n;
+}
+function Me() {
+  return u();
+}
+function ke(n, e) {
+  return (t) => B({
+    children: n(t),
+    manager: e
+  });
+}
+function Pe(n) {
+  return (e) => {
+    const t = P(), i = x(), s = _();
+    return n({
+      ...e,
+      openWindow: t,
+      dismissWindow: i,
+      viewportEnvironment: s
+    });
+  };
+}
+const xe = {
+  openWindow: "openWindow",
+  dismissWindow: "dismissWindow",
+  viewportEnvironment: "viewportEnvironment",
+  currentWindow: "currentWindow"
+};
+function Te(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;
+}
+function Q() {
+  return ze;
+}
+class K {
+  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);
+  }
+  execute() {
+    if (this.state === d.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;
+    try {
+      return this.state = d.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;
+    } finally {
+      S = e;
+    }
+  }
+  dispose() {
+    if (this.state !== d.Disposed) {
+      this.state = d.Disposed;
+      for (const e of this.sources)
+        e && typeof e == "object" && "removeObserver" in e && e.removeObserver(this);
+      this.sources.clear();
+      for (const e of this.observers)
+        e.sources.delete(this);
+      this.observers.clear(), this.owner && !this.owner.disposed && this.owner.sources.delete(this);
+    }
+  }
+}
+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 {
+  constructor(e) {
+    I(this, "id"), I(this, "observers", /* @__PURE__ */ new Set()), I(this, "_value"), this.id = ++_e, 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;
+  }
+  /**
+   * Get the current value without tracking dependency
+   */
+  peek() {
+    return this._value;
+  }
+  /**
+   * Set a new value and notify observers
+   */
+  set(e) {
+    const t = typeof e == "function" ? e(this._value) : e;
+    return t !== this._value && (this._value = t, this.notify()), t;
+  }
+  /**
+   * Notify all observers that this signal has changed
+   */
+  notify() {
+    for (const e of this.observers)
+      e.state !== d.Disposed && (e.state = d.Dirty, Ve(e));
+  }
+  /**
+   * Remove an observer (cleanup)
+   */
+  removeObserver(e) {
+    this.observers.delete(e);
+  }
+  /**
+   * Get debug information about this signal
+   */
+  [Symbol.for("tachui.debug")]() {
+    return {
+      id: this.id,
+      value: this._value,
+      observerCount: this.observers.size,
+      type: "Signal"
+    };
+  }
+}
+const E = /* @__PURE__ */ new Set();
+let C = !1;
+function Ve(n) {
+  E.add(n), !C && queueMicrotask(Ge);
+}
+function Ge() {
+  if (!C) {
+    C = !0;
+    try {
+      for (; E.size > 0; ) {
+        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();
+      }
+    } finally {
+      C = !1;
+    }
+  }
+}
+function Ne(n) {
+  const e = new Fe(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"), {
+    value: e,
+    enumerable: !1
+  }), [t, i];
+}
+function G(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 {
+  constructor(e, t, i) {
+    super(e), this.cause = t, this.node = i, this.name = "ReactiveError";
+  }
+}
+const qe = 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))
+      typeof e == "number" && this.updateQueues.set(e, /* @__PURE__ */ new Set());
+  }
+  static getInstance() {
+    return b.instance || (b.instance = new b()), b.instance;
+  }
+  /**
+   * Schedule reactive node for update
+   */
+  schedule(e) {
+    this.isDestroyed || (this.nodeRegistry.add(e), this.getQueue(e.priority).add(e), this.isFlushPending || (this.isFlushPending = !0, this.scheduleFlush(e.priority)));
+  }
+  /**
+   * Process all queued updates by priority
+   */
+  async flush() {
+    if (this.isDestroyed) return;
+    this.isFlushPending = !1;
+    const e = performance.now();
+    try {
+      for (const t of [
+        0,
+        1,
+        2,
+        3,
+        4
+        /* Idle */
+      ]) {
+        const i = this.updateQueues.get(t);
+        if (!i || i.size === 0) continue;
+        const s = Array.from(i);
+        i.clear();
+        for (const a of s)
+          try {
+            await this.updateNodeWithRetry(a);
+          } catch (r) {
+            this.handleReactiveError(
+              new $e(`Failed to update ${a.type} node ${a.id}`, r, a)
+            );
+          }
+        if (this.hasHigherPriorityWork(t))
+          return this.flush();
+      }
+      this.totalUpdateCycles++;
+    } finally {
+      const t = performance.now();
+      this.totalUpdateTime += t - e;
+    }
+  }
+  /**
+   * Update node with retry logic
+   */
+  async updateNodeWithRetry(e, t = 1) {
+    try {
+      e.notify();
+    } catch (i) {
+      if (t < this.maxRetries)
+        return console.warn(`Reactive update failed, retrying (${t}/${this.maxRetries})`), await new Promise((s) => setTimeout(s, t * 10)), this.updateNodeWithRetry(e, t + 1);
+      throw i;
+    }
+  }
+  /**
+   * Schedule flush based on priority
+   */
+  scheduleFlush(e) {
+    switch (e) {
+      case 0:
+        this.flush();
+        break;
+      case 1:
+        queueMicrotask(() => this.flush());
+        break;
+      case 2:
+        typeof requestAnimationFrame < "u" ? requestAnimationFrame(() => this.flush()) : queueMicrotask(() => this.flush());
+        break;
+      case 3:
+      case 4:
+        typeof requestIdleCallback < "u" ? requestIdleCallback(() => this.flush(), { timeout: 1e3 }) : setTimeout(() => this.flush(), 50);
+        break;
+    }
+  }
+  /**
+   * Check if there's higher priority work waiting
+   */
+  hasHigherPriorityWork(e) {
+    for (let t = 0; t < e; t++) {
+      const i = this.updateQueues.get(t);
+      if (i && i.size > 0)
+        return !0;
+    }
+    return !1;
+  }
+  /**
+   * Get queue for priority level
+   */
+  getQueue(e) {
+    const t = this.updateQueues.get(e);
+    if (!t)
+      throw new Error(`Invalid priority level: ${e}`);
+    return t;
+  }
+  /**
+   * Register error handler
+   */
+  onError(e) {
+    return this.errorHandlers.add(e), () => this.errorHandlers.delete(e);
+  }
+  /**
+   * Handle reactive errors with recovery
+   */
+  handleReactiveError(e) {
+    this.errorCount++;
+    let t = !1;
+    for (const i of this.errorHandlers)
+      try {
+        i(e), t = !0;
+      } catch (s) {
+        console.error("Error handler threw error:", s);
+      }
+    if (!t && (console.error("Unhandled reactive error:", e), process.env.NODE_ENV === "development"))
+      throw e;
+  }
+  /**
+   * Get performance metrics
+   */
+  getPerformanceMetrics() {
+    let e = 0;
+    for (const t of this.updateQueues.values())
+      e += t.size;
+    return {
+      totalNodes: e,
+      updateCycles: this.totalUpdateCycles,
+      averageUpdateTime: this.totalUpdateCycles > 0 ? this.totalUpdateTime / this.totalUpdateCycles : 0,
+      memoryUsage: this.estimateMemoryUsage(),
+      errorCount: this.errorCount
+    };
+  }
+  /**
+   * Estimate memory usage (rough approximation)
+   */
+  estimateMemoryUsage() {
+    let e = 0;
+    for (const t of this.updateQueues.values())
+      e += t.size * 50;
+    return e += this.errorHandlers.size * 100, e;
+  }
+  /**
+   * Check if node is scheduled
+   */
+  hasNode(e) {
+    for (const t of this.updateQueues.values())
+      if (t.has(e))
+        return !0;
+    return !1;
+  }
+  /**
+   * Flush all pending updates synchronously
+   */
+  flushSync() {
+    this.isFlushPending && (this.isFlushPending = !1, this.flush());
+  }
+  /**
+   * Clear all pending updates
+   */
+  clearPending() {
+    for (const e of this.updateQueues.values())
+      e.clear();
+    this.isFlushPending = !1;
+  }
+  /**
+   * Cleanup all reactive nodes and destroy scheduler
+   */
+  destroy() {
+    this.isDestroyed = !0;
+    for (const e of this.updateQueues.values()) {
+      for (const t of e)
+        try {
+          t.cleanup();
+        } catch (i) {
+          console.error("Error cleaning up reactive node:", i);
+        }
+      e.clear();
+    }
+    this.updateQueues.clear(), this.errorHandlers.clear(), b.instance = null;
+  }
+  /**
+   * Get debug information
+   */
+  getDebugInfo() {
+    const e = {};
+    for (const [t, i] of this.updateQueues)
+      e[W[t]] = i.size;
+    return {
+      isFlushPending: this.isFlushPending,
+      isDestroyed: this.isDestroyed,
+      queueSizes: e,
+      errorHandlerCount: this.errorHandlers.size,
+      performance: this.getPerformanceMetrics()
+    };
+  }
+};
+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;
+  }
+  /**
+   * 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;
+  }
+  /**
+   * Get the current value without tracking dependency
+   */
+  peek() {
+    return (this.state === d.Dirty || !this._hasValue) && (this.execute(), this._hasValue = !0), this.value;
+  }
+  /**
+   * Remove an observer (cleanup)
+   */
+  removeObserver(e) {
+    this.observers.delete(e);
+  }
+  /**
+   * Execute the computation and notify observers
+   */
+  execute() {
+    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();
+        }));
+    return t;
+  }
+  /**
+   * Notify method for ReactiveNode compatibility
+   */
+  notify() {
+    this.execute();
+  }
+  /**
+   * Complete cleanup for memory management
+   */
+  cleanup() {
+    for (const e of this.sources)
+      "removeObserver" in e && e.removeObserver(this);
+    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;
+  }
+  /**
+   * Dispose the computed value
+   */
+  dispose() {
+    this.cleanup(), super.dispose();
+  }
+  /**
+   * Debug information
+   */
+  [Symbol.for("tachui.debug")]() {
+    return {
+      id: this.id,
+      type: this.type,
+      value: this._hasValue ? this.value : void 0,
+      hasValue: this._hasValue,
+      error: this._error?.message,
+      state: this.state,
+      sourceCount: this.sources.size,
+      observerCount: this.observers.size,
+      priority: W[this.priority],
+      debugName: this.options.debugName,
+      equalsFn: this.equalsFn.name || "anonymous"
+    };
+  }
+  toString() {
+    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);
+  return i.peek = t.peek.bind(t), Object.defineProperty(i, Symbol.for("tachui.computed"), {
+    value: t,
+    enumerable: !1
+  }), i;
+}
+function N(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;
+});
+function Je() {
+  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 {
+  constructor() {
+    L(this, "pending", /* @__PURE__ */ new Set()), L(this, "isFlushScheduled", !1);
+  }
+  schedule(e) {
+    this.pending.add(e), this.isFlushScheduled || (this.isFlushScheduled = !0, queueMicrotask(() => this.flush()));
+  }
+  flush() {
+    if (this.pending.size === 0) {
+      this.isFlushScheduled = !1;
+      return;
+    }
+    const e = Array.from(this.pending);
+    this.pending.clear(), this.isFlushScheduled = !1;
+    for (const t of e)
+      try {
+        t();
+      } catch (i) {
+        console.error("Error in scheduled task:", i);
+      }
+    this.pending.size > 0 && (this.isFlushScheduled = !0, queueMicrotask(() => this.flush()));
+  }
+}
+new et();
+function U(n, e = {}) {
+  const t = Q();
+  let i;
+  const s = () => {
+    const r = n(i);
+    return i = r, r;
+  }, a = new K(s, t);
+  return e.name && Object.defineProperty(a, "name", {
+    value: e.name,
+    enumerable: !1
+  }), a.execute(), a;
+}
+class tt {
+  constructor(e) {
+    this.properties = e;
+  }
+  /**
+   * Helper to resolve reactive properties
+   */
+  resolveReactiveProps(e, t) {
+    const i = {};
+    for (const [s, a] of Object.entries(e))
+      i[s] = a;
+    return i;
+  }
+  /**
+   * Apply a single style change to an element with reactive support
+   */
+  applyStyleChange(e, t, i) {
+    if (e instanceof HTMLElement) {
+      const s = this.toCSSProperty(t);
+      if (G(i) || N(i))
+        U(() => {
+          const a = i(), r = String(a);
+          if (r.includes("!important")) {
+            const h = r.replace(/\s*!important\s*$/, "").trim();
+            e.style.setProperty(s, h, "important");
+          } else
+            e.style.setProperty(s, r);
+        });
+      else {
+        const a = String(i);
+        if (a.includes("!important")) {
+          const r = a.replace(/\s*!important\s*$/, "").trim();
+          e.style.setProperty(s, r, "important");
+        } else
+          e.style.setProperty(s, a);
+      }
+    }
+  }
+  /**
+   * Convert camelCase property to CSS kebab-case
+   */
+  toCSSProperty(e) {
+    return e.replace(/([A-Z])/g, "-$1").toLowerCase();
+  }
+  /**
+   * Convert value to CSS value string
+   */
+  toCSSValue(e) {
+    return typeof e == "number" ? `${e}px` : String(e);
+  }
+  /**
+   * Convert value to CSS value string with property-specific handling
+   */
+  toCSSValueForProperty(e, t) {
+    return typeof t == "number" ? [
+      "opacity",
+      "z-index",
+      "line-height",
+      "flex-grow",
+      "flex-shrink",
+      "order",
+      "column-count",
+      "font-weight"
+    ].includes(e) ? String(t) : `${t}px` : String(t);
+  }
+  /**
+   * Apply multiple CSS properties to an element with reactive support
+   */
+  applyStyles(e, t) {
+    if (e instanceof HTMLElement || e.style) {
+      const i = e.style;
+      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(
+                r,
+                h
+              );
+              if (i.setProperty)
+                if (typeof c == "string" && c.includes("!important")) {
+                  const l = c.replace(/\s*!important\s*$/, "").trim();
+                  i.setProperty(r, l, "important");
+                } else
+                  i.setProperty(r, c);
+              else
+                i[r] = c;
+            });
+          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");
+              } else
+                i.setProperty(r, h);
+            else
+              i[r] = h;
+          }
+        }
+    }
+  }
+  /**
+   * Add CSS classes to an element
+   */
+  addClasses(e, t) {
+    e instanceof HTMLElement && e.classList.add(...t);
+  }
+  /**
+   * Remove CSS classes from an element
+   */
+  removeClasses(e, t) {
+    e instanceof HTMLElement && e.classList.remove(...t);
+  }
+  /**
+   * Create a style computation context
+   */
+  createStyleContext(e, t, i) {
+    return {
+      componentId: e,
+      element: t,
+      modifiers: i,
+      signals: /* @__PURE__ */ new Set(),
+      cleanup: []
+    };
+  }
+}
+class X extends tt {
+  constructor() {
+    super(...arguments);
+    o(this, "type", "viewportLifecycle");
+    o(this, "priority", 100);
+  }
+  // High priority for lifecycle events
+  apply(t, i) {
+    i.element && (this.properties.onAppear || this.properties.onDisappear) && this.setupLifecycleObserver(i.element, this.properties);
+  }
+  setupLifecycleObserver(t, i) {
+    new IntersectionObserver(
+      (a) => {
+        a.forEach((r) => {
+          r.isIntersecting && i.onAppear ? i.onAppear() : !r.isIntersecting && i.onDisappear && i.onDisappear();
+        });
+      },
+      {
+        threshold: 0.1,
+        // Trigger when 10% of element is visible
+        rootMargin: "10px"
+        // Add some margin for better UX
+      }
+    ).observe(t);
+  }
+}
+function nt(n) {
+  return new X({ onAppear: n });
+}
+function it(n) {
+  return new X({ onDisappear: n });
+}
+const st = {
+  // Manager
+  getManager: u,
+  // Environment
+  useOpenWindow: P,
+  useDismissWindow: x,
+  useViewportInfo: _,
+  // Components
+  Window: y,
+  WindowGroup: T,
+  App: M,
+  // Utilities
+  Utils: k,
+  Examples: $
+};
+function ot(n) {
+  const e = new A(n?.customAdapter);
+  return R(e), e;
+}
+const rt = {
+  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 = {
+  /**
+   * Check if running in Electron
+   */
+  isElectron: () => u().environment.platform === "electron",
+  /**
+   * Check if on mobile
+   */
+  isMobile: () => u().environment.platform === "mobile",
+  /**
+   * Check if multi-window is supported
+   */
+  supportsMultiWindow: () => u().environment.capabilities.multiWindow,
+  /**
+   * Check if native windows are supported
+   */
+  supportsNativeWindows: () => u().environment.capabilities.nativeWindows,
+  /**
+   * Get optimal window type for current platform
+   */
+  getOptimalWindowType: (n = !1) => u().getOptimalWindowType({ preferNativeWindow: n })
+}, lt = {
+  /**
+   * Standard document window
+   */
+  document: (n) => ({
+    title: n || "Document",
+    width: 800,
+    height: 600,
+    resizable: !0,
+    minimizable: !0,
+    maximizable: !0
+  }),
+  /**
+   * Settings/preferences window
+   */
+  settings: (n) => ({
+    title: n || "Settings",
+    width: 600,
+    height: 400,
+    resizable: !1,
+    minimizable: !1,
+    maximizable: !1,
+    modal: !0
+  }),
+  /**
+   * Inspector/sidebar window
+   */
+  inspector: (n) => ({
+    title: n || "Inspector",
+    width: 300,
+    height: 500,
+    resizable: !0,
+    alwaysOnTop: !0
+  }),
+  /**
+   * Palette/tool window
+   */
+  palette: (n) => ({
+    title: n || "Palette",
+    width: 250,
+    height: 400,
+    resizable: !1,
+    alwaysOnTop: !0
+  }),
+  /**
+   * Dialog/alert window
+   */
+  dialog: (n) => ({
+    title: n || "Dialog",
+    width: 400,
+    height: 200,
+    resizable: !1,
+    modal: !0,
+    minimizable: !1,
+    maximizable: !1
+  }),
+  /**
+   * Fullscreen window
+   */
+  fullscreen: (n) => ({
+    title: n || "Fullscreen",
+    width: typeof window < "u" && window.screen?.width || 1920,
+    height: typeof window < "u" && window.screen?.height || 1080,
+    resizable: !1,
+    minimizable: !1,
+    maximizable: !1
+  })
+}, dt = {
+  DEFAULT_WINDOW_WIDTH: 800,
+  DEFAULT_WINDOW_HEIGHT: 600,
+  MIN_WINDOW_WIDTH: 300,
+  MIN_WINDOW_HEIGHT: 200,
+  MODAL_Z_INDEX: 1e3,
+  PORTAL_Z_INDEX: 999,
+  ANIMATION_DURATION: 200
+}, ct = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  App: M,
+  EnvironmentKeys: xe,
+  ExampleScenes: $,
+  PlatformUtils: at,
+  TachUIViewportManager: A,
+  Viewport: st,
+  ViewportConstants: dt,
+  ViewportEnvironmentProvider: B,
+  ViewportTypeGuards: rt,
+  WebViewportAdapter: D,
+  Window: y,
+  WindowConfigs: lt,
+  WindowGroup: T,
+  WindowUtils: k,
+  checkFeatureSupport: ge,
+  createCapabilityChecker: H,
+  createWindowAwareComponent: Pe,
+  detectViewportEnvironment: O,
+  disposeViewportManager: Ee,
+  getBrowserInfo: fe,
+  getEnvironmentValue: Te,
+  getOSInfo: me,
+  getViewportManager: u,
+  initializeViewportSystem: ot,
+  onAppear: nt,
+  onDisappear: it,
+  setViewportManager: R,
+  useCurrentWindow: Ce,
+  useDismissWindow: x,
+  useEnvironmentDismissWindow: x,
+  useEnvironmentOpenWindow: P,
+  useOpenWindow: P,
+  useViewportEnvironment: v,
+  useViewportInfo: _,
+  useViewportManager: Me,
+  withViewportEnvironment: ke
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  M as App,
+  xe as EnvironmentKeys,
+  $ as ExampleScenes,
+  at as PlatformUtils,
+  A as TachUIViewportManager,
+  st as Viewport,
+  dt as ViewportConstants,
+  B as ViewportEnvironmentProvider,
+  rt as ViewportTypeGuards,
+  D as WebViewportAdapter,
+  y as Window,
+  lt 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,
+  u as getViewportManager,
+  ot as initializeViewportSystem,
+  nt as onAppear,
+  it as onDisappear,
+  R as setViewportManager,
+  Ce as useCurrentWindow,
+  x as useDismissWindow,
+  x as useEnvironmentDismissWindow,
+  P as useEnvironmentOpenWindow,
+  P as useOpenWindow,
+  v as useViewportEnvironment,
+  _ as useViewportInfo,
+  Me as useViewportManager,
+  ke as withViewportEnvironment
+};
+//# sourceMappingURL=index.js.map