@tachui/core 0.7.0-alpha1 → 0.7.1-alpha

package/dist/viewport/index.js

@@ -1,62 +1,1946 @@
-import { ExampleScenes as n, WindowUtils as r, App as o, WindowGroup as a, Window as s } from "./components.js";
-import { useViewportInfo as l, useDismissWindow as m, useOpenWindow as p } from "./environment.js";
-import { EnvironmentKeys as V, ViewportEnvironmentProvider as y, createWindowAwareComponent as z, getEnvironmentValue as O, useCurrentWindow as T, useViewportEnvironment as M, useViewportManager as N, withViewportEnvironment as _ } from "./environment.js";
-import { getViewportManager as t, TachUIViewportManager as w, setViewportManager as d } from "./viewport-manager.js";
-import { disposeViewportManager as A } from "./viewport-manager.js";
-import { checkFeatureSupport as C, createCapabilityChecker as H, detectViewportEnvironment as P, getBrowserInfo as S, getOSInfo as F } from "./platform-detection.js";
-import { WebViewportAdapter as L } from "./adapters/web-adapter.js";
-const f = {
+import { a as O, w as G } from "../dom-bridge-Cx-s6Ihx.js";
+import { a as C, q as D } from "../scheduler-7SvC3a21.js";
+import { a as F, u as N } from "../context--zQFIImS.js";
+function M(n = {}) {
+  const e = L(), t = $(e, n), i = q(), s = X(), r = J();
+  return {
+    platform: e,
+    capabilities: t,
+    userAgent: i,
+    screenSize: s,
+    isTouch: r
+  };
+}
+function L() {
+  return V() ? "electron" : U() ? "mobile" : R() ? "embedded" : "web";
+}
+function V() {
+  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 U() {
+  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 R() {
+  if (typeof window > "u") return !1;
+  try {
+    return window.self !== window.top;
+  } catch {
+    return !0;
+  }
+}
+function $(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 ? B() : !1,
+        crossWindowCommunication: K() || j(),
+        fullscreenSupport: k(),
+        windowResizing: !1,
+        // Browser windows can't be resized programmatically
+        windowMinimizing: !1
+      };
+    case "mobile":
+      return {
+        ...t,
+        fullscreenSupport: k(),
+        modalOverlays: !0
+      };
+    case "embedded":
+      return {
+        ...t,
+        modalOverlays: !0
+      };
+    default:
+      return t;
+  }
+}
+function B() {
+  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 K() {
+  return typeof window < "u" && "BroadcastChannel" in window;
+}
+function j() {
+  return typeof window < "u" && "MessageChannel" in window;
+}
+function k() {
+  return typeof document > "u" ? !1 : !!(document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled);
+}
+function q() {
+  return typeof navigator > "u" ? "unknown" : navigator.userAgent;
+}
+function X() {
+  return typeof window > "u" ? { width: 1920, height: 1080 } : {
+    width: window.screen?.width || window.innerWidth || 1920,
+    height: window.screen?.height || window.innerHeight || 1080
+  };
+}
+function J() {
+  return typeof window > "u" ? !1 : "ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+}
+function Z() {
+  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 Q() {
+  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 Y() {
+  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 E(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 ee {
+  // Fallback strategies
+  createModal(e) {
+    throw new Error("Modal fallback not implemented");
+  }
+  createPortal(e) {
+    throw new Error("Portal fallback not implemented");
+  }
+}
+var te = Object.defineProperty, ne = (n, e, t) => e in n ? te(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, a = (n, e, t) => ne(n, typeof e != "symbol" ? e + "" : e, t);
+class S extends ee {
+  constructor(e = {}) {
+    super(), a(this, "environment"), a(this, "portals", /* @__PURE__ */ new Map()), a(this, "modals", /* @__PURE__ */ new Map()), a(this, "popups", /* @__PURE__ */ new Map()), a(this, "portalContainer", null), a(this, "broadcastChannel", null), this.environment = M(e), this.initializePortalContainer();
+  }
+  /**
+   * Check if we can create a window with given config
+   */
+  canCreateWindow(e) {
+    if (!e.preferNativeWindow)
+      return !0;
+    try {
+      return this.environment.capabilities.multiWindow;
+    } catch {
+      return !1;
+    }
+  }
+  /**
+   * Create a viewport instance
+   */
+  createWindow(e) {
+    switch (this.determineWindowType(e)) {
+      case "window":
+        return this.createPopupWindow(e);
+      case "modal":
+        return this.createModal(e);
+      case "portal":
+        return this.createPortal(e);
+      default:
+        return this.createModal(e);
+    }
+  }
+  /**
+   * Destroy a window
+   */
+  async destroyWindow(e) {
+    const t = this.portals.get(e);
+    if (t) {
+      t.dispose(), this.portals.delete(e);
+      return;
+    }
+    const i = this.modals.get(e);
+    if (i) {
+      i.dispose(), this.modals.delete(e);
+      return;
+    }
+    const s = this.popups.get(e);
+    if (s) {
+      s.dispose(), this.popups.delete(e);
+      return;
+    }
+  }
+  /**
+   * Set up cross-window communication
+   */
+  setupCrossWindowCommunication() {
+    if ("BroadcastChannel" in window)
+      this.broadcastChannel = new BroadcastChannel("tachui-viewport"), this.broadcastChannel.addEventListener("message", (e) => {
+        this.handleCrossWindowMessage(e.data);
+      });
+    else {
+      const e = (t) => {
+        if (t.key === "tachui-viewport-message")
+          try {
+            const i = JSON.parse(t.newValue || "{}");
+            this.handleCrossWindowMessage(i);
+          } catch {
+          }
+      };
+      typeof window < "u" && window.addEventListener("storage", e);
+    }
+  }
+  /**
+   * Broadcast message to other windows
+   */
+  broadcastMessage(e, t) {
+    const i = {
+      ...e,
+      timestamp: Date.now(),
+      source: window.location.href
+    };
+    this.broadcastChannel ? this.broadcastChannel.postMessage(i) : (localStorage.setItem("tachui-viewport-message", JSON.stringify(i)), 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(e) {
+    const t = new ie(e);
+    return this.popups.set(e.id, t), t;
+  }
+  /**
+   * Create modal overlay
+   */
+  createModal(e) {
+    const t = new se(e);
+    return this.modals.set(e.id, t), t;
+  }
+  /**
+   * Create portal
+   */
+  createPortal(e) {
+    const t = new ae(e, this.portalContainer);
+    return this.portals.set(e.id, t), t;
+  }
+  /**
+   * Determine optimal window type
+   */
+  determineWindowType(e) {
+    return e.preferNativeWindow && this.environment.capabilities.multiWindow ? "window" : e.modal !== !1 ? "modal" : "portal";
+  }
+  /**
+   * Initialize portal container
+   */
+  initializePortalContainer() {
+    let e = document.getElementById("app");
+    if (e) {
+      this.portalContainer = e;
+      return;
+    }
+    e = document.getElementById("tachui-portals"), e || (e = document.createElement("div"), e.id = "tachui-portals", e.style.position = "relative", e.style.zIndex = "999", document.body.appendChild(e)), this.portalContainer = e;
+  }
+  /**
+   * Handle cross-window messages
+   */
+  handleCrossWindowMessage(e) {
+    this.portals.forEach((t) => t.receiveMessage(e)), this.modals.forEach((t) => t.receiveMessage(e)), this.popups.forEach((t) => t.receiveMessage(e));
+  }
+  /**
+   * Inject global CSS styles
+   */
+  injectGlobalStyles() {
+    const e = "tachui-viewport-styles";
+    if (document.getElementById(e))
+      return;
+    const t = document.createElement("style");
+    t.id = e, t.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(t);
+  }
+}
+class ie {
+  constructor(e) {
+    a(this, "id"), a(this, "type", "window"), a(this, "config"), a(this, "state"), a(this, "nativeWindow", null), a(this, "messageHandlers", /* @__PURE__ */ new Set()), a(this, "eventHandlers", /* @__PURE__ */ new Map()), a(this, "setState"), this.id = e.id, this.config = e;
+    const [t, i] = C({
+      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 se {
+  constructor(e) {
+    a(this, "id"), a(this, "type", "modal"), a(this, "config"), a(this, "state"), a(this, "backdropElement", null), a(this, "contentElement", null), a(this, "messageHandlers", /* @__PURE__ */ new Set()), a(this, "eventHandlers", /* @__PURE__ */ new Map()), a(this, "setState"), a(this, "sharedState", /* @__PURE__ */ new Map()), a(this, "stateChangeCallbacks", /* @__PURE__ */ new Map()), a(this, "childWindows", /* @__PURE__ */ new Map()), a(this, "parentWindow", null), a(this, "tabContainer", null), this.id = e.id, this.config = e;
+    const [t, i] = C({
+      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 ae {
+  constructor(e, t) {
+    this.container = t, a(this, "id"), a(this, "type", "portal"), a(this, "config"), a(this, "state"), a(this, "portalElement", null), a(this, "messageHandlers", /* @__PURE__ */ new Set()), a(this, "eventHandlers", /* @__PURE__ */ new Map()), a(this, "cleanupFunction", null), a(this, "setState"), a(this, "sharedState", /* @__PURE__ */ new Map()), a(this, "stateChangeCallbacks", /* @__PURE__ */ new Map()), a(this, "childWindows", /* @__PURE__ */ new Map()), a(this, "parentWindow", null), a(this, "tabContainer", null), this.id = e.id, this.config = e;
+    const [i, s] = C({
+      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 = O(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();
+  }
+}
+var oe = Object.defineProperty, re = (n, e, t) => e in n ? oe(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, l = (n, e, t) => re(n, typeof e != "symbol" ? e + "" : e, t);
+class x {
+  constructor(e, t = {}) {
+    l(this, "adapter"), l(this, "windows", /* @__PURE__ */ new Map()), l(this, "windowGroups", /* @__PURE__ */ new Map()), l(this, "eventHandlers", /* @__PURE__ */ new Map()), l(this, "globalState", /* @__PURE__ */ new Map()), l(this, "globalStateCallbacks", /* @__PURE__ */ new Map()), l(this, "environment"), l(this, "platformConfig"), this.platformConfig = t, this.environment = M(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 r = {
+      id: e,
+      title: i.title || e,
+      width: i.width || 800,
+      height: i.height || 600,
+      ...i
+    };
+    this.getOptimalWindowType(i);
+    const o = this.adapter.createWindow(r);
+    return this.windows.set(e, o), o.render(t), this.setupWindowEventHandlers(o), await o.show(), this.emit("window:opened", { window: o }), o;
+  }
+  /**
+   * 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 de(e, this);
+    return this.windowGroups.set(e, t), t;
+  }
+  /**
+   * Check if we can open a window with given options
+   */
+  canOpenWindow(e = {}) {
+    return E(this.environment).canOpenWindow(e.preferNativeWindow);
+  }
+  /**
+   * Get optimal window type for given options
+   */
+  getOptimalWindowType(e = {}) {
+    const t = E(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 S(this.platformConfig);
+      default:
+        return new S(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((r) => r(t)), this.windows.forEach((r) => {
+      r.syncState(e, t);
+    }), this.windowGroups.forEach((r, o) => {
+      o !== i && r.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 de {
+  constructor(e, t, i = "any") {
+    this.id = e, this.manager = t, this.dataType = i, l(this, "windows", /* @__PURE__ */ new Map()), l(this, "defaultOptions", {}), l(this, "maxInstances", 1 / 0), l(this, "groupingStrategy", "stack"), l(this, "tabConfig", {
+      enabled: !1,
+      tabPosition: "top",
+      allowDetach: !0,
+      allowReorder: !0
+    }), l(this, "poolConfig", {
+      enabled: !1,
+      maxPoolSize: 5,
+      reuseThreshold: 3e4,
+      // 30 seconds
+      keepAliveTime: 3e5
+      // 5 minutes
+    }), l(this, "stateSyncScope", "none"), l(this, "sharedState", /* @__PURE__ */ new Map()), l(this, "stateCallbacks", /* @__PURE__ */ new Map()), l(this, "windowPool", /* @__PURE__ */ new Map()), l(this, "eventCallbacks", /* @__PURE__ */ new Map()), l(this, "windowMetadata", /* @__PURE__ */ new Map()), 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}`, r = this.windows.get(i);
+    if (r)
+      return await r.show(), await r.focus(), r.markAsUsed(), r;
+    let o = await this.getPooledWindow();
+    if (o) {
+      const h = t(e);
+      return o.render(h), this.setWindowGroupMetadata(o, {
+        id: s,
+        groupId: this.id,
+        isPooled: !1,
+        lastUsed: Date.now()
+      }), await o.show(), await o.focus(), this.windows.set(i, o), this.emitEvent("window:reused", o, e), o;
+    }
+    if (this.windows.size >= this.maxInstances) {
+      const h = this.windows.values().next().value;
+      h && (this.poolConfig.enabled ? await this.returnToPool(h) : await h.close());
+    }
+    const f = t(e);
+    return o = await this.manager.openWindow(s, f, this.defaultOptions), this.setWindowGroupMetadata(o, {
+      groupId: this.id,
+      isPooled: !1,
+      lastUsed: Date.now(),
+      tabIndex: this.tabConfig.enabled ? this.windows.size : void 0
+    }), this.windows.set(i, o), o.onClose(() => {
+      this.poolConfig.enabled && o.isReusable() ? this.returnToPool(o) : (this.windows.delete(i), this.emitEvent("window:destroyed", o.id), this.windows.size === 0 && this.emitEvent("group:empty"));
+    }), this.groupingStrategy !== "stack" && this.applyGroupingStrategy(), this.emitEvent("window:created", o), this.windows.size >= this.maxInstances && this.emitEvent("group:full"), o;
+  }
+  /**
+   * 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 r = this.getWindowGroupMetadata(i);
+      e - (r.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), r = Date.now() - (s.lastUsed || 0);
+      if (r < this.poolConfig.reuseThreshold) {
+        const o = this.poolConfig.reuseThreshold - r;
+        o > t && (e = i, t = o);
+      }
+    }), 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)), r = Math.ceil(e.length / s), o = t / s, f = i / r;
+    e.forEach((h, d) => {
+      const u = d % s, P = Math.floor(d / s);
+      this.setWindowGroupMetadata(h, {
+        tilePosition: {
+          col: u,
+          row: P,
+          x: u * o,
+          y: P * f,
+          width: o,
+          height: f
+        },
+        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 w = null;
+function c(n = {}) {
+  return w || (w = new x(void 0, n)), w;
+}
+function H(n) {
+  w?.dispose(), w = n;
+}
+function le() {
+  w?.dispose(), w = null;
+}
+var ce = Object.defineProperty, he = (n, e, t) => e in n ? ce(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, I = (n, e, t) => he(n, typeof e != "symbol" ? e + "" : e, t);
+function p(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 = c(), t = D(() => G((i) => n.children(), `Window-${n.id}`)({}));
+      await e.openWindow(n.id, t, n);
+    },
+    // Close this window
+    async close() {
+      await c().dismissWindow(n.id);
+    }
+  };
+}
+function W(n) {
+  const e = c(), 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: r,
+    stateSyncScope: o,
+    maxInstances: f,
+    ...h
+  } = n;
+  return t.setDefaultOptions(h), {
+    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(d) {
+      if (d !== void 0 && n.for)
+        await t.openWindow(d, n.children);
+      else {
+        const u = n.children();
+        await e.openWindow(n.id, u, n);
+      }
+    },
+    // Open window for specific data
+    async openForData(d) {
+      if (!n.for)
+        throw new Error('WindowGroup must specify "for" parameter for data-driven windows');
+      await t.openWindow(d, 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(d) {
+      t.setGroupingStrategy(d);
+    },
+    configureTabs(d) {
+      t.configureTabbing(d);
+    },
+    configurePooling(d) {
+      t.configurePool(d);
+    },
+    enableStateSync(d) {
+      t.enableStateSync(d);
+    },
+    syncGroupState(d, u) {
+      t.syncState(d, u);
+    },
+    getGroupState(d) {
+      return t.getSharedState(d);
+    },
+    onGroupStateChange(d, u) {
+      return t.onStateChange(d, u);
+    }
+  };
+}
+function g(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 (!c(n.platformConfig)) {
+        const { initializeViewportSystem: t } = await Promise.resolve().then(() => Ce);
+        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 b = {
+  /**
+   * Create a document window group
+   */
+  documentGroup(n, e, t, i) {
+    return W({
+      id: n,
+      title: e,
+      for: t,
+      children: i,
+      width: 800,
+      height: 600,
+      resizable: !0
+    });
+  },
+  /**
+   * Create a settings window
+   */
+  settingsWindow(n) {
+    return p({
+      id: "settings",
+      title: "Settings",
+      width: 600,
+      height: 400,
+      resizable: !1,
+      children: n
+    });
+  },
+  /**
+   * Create an inspector window
+   */
+  inspectorWindow(n) {
+    return p({
+      id: "inspector",
+      title: "Inspector",
+      width: 300,
+      height: 500,
+      resizable: !0,
+      alwaysOnTop: !0,
+      children: n
+    });
+  },
+  /**
+   * Create a palette window
+   */
+  paletteWindow(n, e, t) {
+    return p({
+      id: n,
+      title: e,
+      width: 250,
+      height: 400,
+      resizable: !1,
+      alwaysOnTop: !0,
+      children: t
+    });
+  }
+}, z = {
+  /**
+   * Basic app with main window and settings
+   */
+  basicApp: () => g({
+    children: [
+      p({
+        id: "main",
+        title: "My App",
+        children: () => ({
+          type: "component",
+          id: "main-content",
+          props: {},
+          render: () => ({
+            type: "element",
+            tag: "div",
+            props: {},
+            children: [],
+            element: document.createElement("div")
+          })
+        })
+      }),
+      b.settingsWindow(() => ({
+        type: "component",
+        id: "settings-content",
+        props: {},
+        render: () => ({
+          type: "element",
+          tag: "div",
+          props: {},
+          children: [],
+          element: document.createElement("div")
+        })
+      }))
+    ]
+  }),
+  /**
+   * Document-based app
+   */
+  documentApp: () => g({
+    children: [
+      W({
+        id: "document",
+        title: "Document",
+        for: class {
+          constructor() {
+            I(this, "id"), I(this, "title");
+          }
+        },
+        children: (n) => ({
+          type: "component",
+          id: `document-${n.id}`,
+          props: {},
+          render: () => ({
+            type: "element",
+            tag: "div",
+            props: {},
+            children: [],
+            element: document.createElement("div")
+          })
+        })
+      }),
+      b.settingsWindow(() => ({
+        type: "component",
+        id: "settings",
+        props: {},
+        render: () => ({
+          type: "element",
+          tag: "div",
+          props: {},
+          children: [],
+          element: document.createElement("div")
+        })
+      }))
+    ]
+  })
+}, A = F(null);
+function _({
+  children: n,
+  manager: e
+}) {
+  const t = e || c(), i = {
+    openWindow: async (s, r, o) => await t.openWindow(s, r, o),
+    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: A,
+    value: i,
+    children: Array.isArray(n) ? n : [n]
+  };
+}
+function m() {
+  const n = N(A);
+  if (!n)
+    throw new Error("useViewportEnvironment must be used within a ViewportEnvironmentProvider");
+  return n();
+}
+function y() {
+  const { openWindow: n } = m();
+  return n;
+}
+function v() {
+  const { dismissWindow: n } = m();
+  return n;
+}
+function T() {
+  const { viewportEnvironment: n } = m();
+  return n;
+}
+function ue() {
+  const { currentWindow: n } = m();
+  return n;
+}
+function we() {
+  return c();
+}
+function pe(n, e) {
+  return (t) => _({
+    children: n(t),
+    manager: e
+  });
+}
+function me(n) {
+  return (e) => {
+    const t = y(), i = v(), s = T();
+    return n({
+      ...e,
+      openWindow: t,
+      dismissWindow: i,
+      viewportEnvironment: s
+    });
+  };
+}
+const fe = {
+  openWindow: "openWindow",
+  dismissWindow: "dismissWindow",
+  viewportEnvironment: "viewportEnvironment",
+  currentWindow: "currentWindow"
+};
+function ge(n) {
+  return m()[n];
+}
+const be = {
   // Manager
-  getManager: t,
+  getManager: c,
   // Environment
-  useOpenWindow: p,
-  useDismissWindow: m,
-  useViewportInfo: l,
+  useOpenWindow: y,
+  useDismissWindow: v,
+  useViewportInfo: T,
   // Components
-  Window: s,
-  WindowGroup: a,
-  App: o,
+  Window: p,
+  WindowGroup: W,
+  App: g,
   // Utilities
-  Utils: r,
-  Examples: n
+  Utils: b,
+  Examples: z
 };
-function W(e) {
-  const i = new w(e?.customAdapter);
-  return d(i), i;
-}
-const h = {
-  isWindow: (e) => e.type === "window",
-  isModal: (e) => e.type === "modal",
-  isPortal: (e) => e.type === "portal",
-  isSheet: (e) => e.type === "sheet",
-  isPopover: (e) => e.type === "popover"
-}, b = {
+function ye(n) {
+  const e = new x(n?.customAdapter);
+  return H(e), e;
+}
+const ve = {
+  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"
+}, We = {
   /**
    * Check if running in Electron
    */
-  isElectron: () => t().environment.platform === "electron",
+  isElectron: () => c().environment.platform === "electron",
   /**
    * Check if on mobile
    */
-  isMobile: () => t().environment.platform === "mobile",
+  isMobile: () => c().environment.platform === "mobile",
   /**
    * Check if multi-window is supported
    */
-  supportsMultiWindow: () => t().environment.capabilities.multiWindow,
+  supportsMultiWindow: () => c().environment.capabilities.multiWindow,
   /**
    * Check if native windows are supported
    */
-  supportsNativeWindows: () => t().environment.capabilities.nativeWindows,
+  supportsNativeWindows: () => c().environment.capabilities.nativeWindows,
   /**
    * Get optimal window type for current platform
    */
-  getOptimalWindowType: (e = !1) => t().getOptimalWindowType({ preferNativeWindow: e })
-}, I = {
+  getOptimalWindowType: (n = !1) => c().getOptimalWindowType({ preferNativeWindow: n })
+}, Ee = {
   /**
    * Standard document window
    */
-  document: (e) => ({
-    title: e || "Document",
+  document: (n) => ({
+    title: n || "Document",
     width: 800,
     height: 600,
     resizable: !0,
@@ -66,8 +1950,8 @@ const h = {
   /**
    * Settings/preferences window
    */
-  settings: (e) => ({
-    title: e || "Settings",
+  settings: (n) => ({
+    title: n || "Settings",
     width: 600,
     height: 400,
     resizable: !1,
@@ -78,8 +1962,8 @@ const h = {
   /**
    * Inspector/sidebar window
    */
-  inspector: (e) => ({
-    title: e || "Inspector",
+  inspector: (n) => ({
+    title: n || "Inspector",
     width: 300,
     height: 500,
     resizable: !0,
@@ -88,8 +1972,8 @@ const h = {
   /**
    * Palette/tool window
    */
-  palette: (e) => ({
-    title: e || "Palette",
+  palette: (n) => ({
+    title: n || "Palette",
     width: 250,
     height: 400,
     resizable: !1,
@@ -98,8 +1982,8 @@ const h = {
   /**
    * Dialog/alert window
    */
-  dialog: (e) => ({
-    title: e || "Dialog",
+  dialog: (n) => ({
+    title: n || "Dialog",
     width: 400,
     height: 200,
     resizable: !1,
@@ -110,15 +1994,15 @@ const h = {
   /**
    * Fullscreen window
    */
-  fullscreen: (e) => ({
-    title: e || "Fullscreen",
+  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
   })
-}, v = {
+}, Se = {
   DEFAULT_WINDOW_WIDTH: 800,
   DEFAULT_WINDOW_HEIGHT: 600,
   MIN_WINDOW_WIDTH: 300,
@@ -126,41 +2010,76 @@ const h = {
   MODAL_Z_INDEX: 1e3,
   PORTAL_Z_INDEX: 999,
   ANIMATION_DURATION: 200
-};
+}, Ce = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  App: g,
+  EnvironmentKeys: fe,
+  ExampleScenes: z,
+  PlatformUtils: We,
+  TachUIViewportManager: x,
+  Viewport: be,
+  ViewportConstants: Se,
+  ViewportEnvironmentProvider: _,
+  ViewportTypeGuards: ve,
+  WebViewportAdapter: S,
+  Window: p,
+  WindowConfigs: Ee,
+  WindowGroup: W,
+  WindowUtils: b,
+  checkFeatureSupport: Y,
+  createCapabilityChecker: E,
+  createWindowAwareComponent: me,
+  detectViewportEnvironment: M,
+  disposeViewportManager: le,
+  getBrowserInfo: Z,
+  getEnvironmentValue: ge,
+  getOSInfo: Q,
+  getViewportManager: c,
+  initializeViewportSystem: ye,
+  setViewportManager: H,
+  useCurrentWindow: ue,
+  useDismissWindow: v,
+  useEnvironmentDismissWindow: v,
+  useEnvironmentOpenWindow: y,
+  useOpenWindow: y,
+  useViewportEnvironment: m,
+  useViewportInfo: T,
+  useViewportManager: we,
+  withViewportEnvironment: pe
+}, Symbol.toStringTag, { value: "Module" }));
 export {
-  o as App,
-  V as EnvironmentKeys,
-  n as ExampleScenes,
-  b as PlatformUtils,
-  w as TachUIViewportManager,
-  f as Viewport,
-  v as ViewportConstants,
-  y as ViewportEnvironmentProvider,
-  h as ViewportTypeGuards,
-  L as WebViewportAdapter,
-  s as Window,
-  I as WindowConfigs,
-  a as WindowGroup,
-  r as WindowUtils,
-  C as checkFeatureSupport,
-  H as createCapabilityChecker,
-  z as createWindowAwareComponent,
-  P as detectViewportEnvironment,
-  A as disposeViewportManager,
-  S as getBrowserInfo,
-  O as getEnvironmentValue,
-  F as getOSInfo,
-  t as getViewportManager,
-  W as initializeViewportSystem,
-  d as setViewportManager,
-  T as useCurrentWindow,
-  m as useDismissWindow,
-  m as useEnvironmentDismissWindow,
-  p as useEnvironmentOpenWindow,
-  p as useOpenWindow,
-  M as useViewportEnvironment,
-  l as useViewportInfo,
-  N as useViewportManager,
-  _ as withViewportEnvironment
+  g as App,
+  fe as EnvironmentKeys,
+  z as ExampleScenes,
+  We as PlatformUtils,
+  x as TachUIViewportManager,
+  be as Viewport,
+  Se as ViewportConstants,
+  _ as ViewportEnvironmentProvider,
+  ve as ViewportTypeGuards,
+  S as WebViewportAdapter,
+  p as Window,
+  Ee as WindowConfigs,
+  W as WindowGroup,
+  b as WindowUtils,
+  Y as checkFeatureSupport,
+  E as createCapabilityChecker,
+  me as createWindowAwareComponent,
+  M as detectViewportEnvironment,
+  le as disposeViewportManager,
+  Z as getBrowserInfo,
+  ge as getEnvironmentValue,
+  Q as getOSInfo,
+  c as getViewportManager,
+  ye as initializeViewportSystem,
+  H as setViewportManager,
+  ue as useCurrentWindow,
+  v as useDismissWindow,
+  v as useEnvironmentDismissWindow,
+  y as useEnvironmentOpenWindow,
+  y as useOpenWindow,
+  m as useViewportEnvironment,
+  T as useViewportInfo,
+  we as useViewportManager,
+  pe as withViewportEnvironment
 };
-//# sourceMappingURL=index.js.map