@ai-matrx/summon 0.1.17 → 0.1.18

package/dist/window.cjs

@@ -100,14 +100,14 @@ __export(window_exports, {
 module.exports = __toCommonJS(window_exports);
 
 // src/window/WindowPanel.tsx
-var import_react18 = __toESM(require("react"), 1);
+var import_react17 = __toESM(require("react"), 1);
 var import_design_system7 = require("@ai-matrx/design-system");
 var import_design_system8 = require("@ai-matrx/design-system");
 var import_cn9 = require("@ai-matrx/design-system/cn");
 var import_media_query = require("@ai-matrx/kit/media-query");
 var import_react_dom3 = require("react-dom");
 var import_summon10 = require("@ai-matrx/summon");
-var import_react19 = require("@ai-matrx/summon/react");
+var import_react18 = require("@ai-matrx/summon/react");
 
 // src/window/icons.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -467,16 +467,6 @@ var MIN_WIDTH = 180;
 var MIN_HEIGHT = 80;
 var DEFAULT_WIDTH = 320;
 var DEFAULT_HEIGHT = 400;
-var RESIZE_CURSOR = {
-  e: "ew-resize",
-  w: "ew-resize",
-  n: "ns-resize",
-  s: "ns-resize",
-  se: "nwse-resize",
-  nw: "nwse-resize",
-  ne: "nesw-resize",
-  sw: "nesw-resize"
-};
 function resolveSize(value, fallback) {
   if (value === void 0) return fallback;
   if (typeof value === "number") return value;
@@ -674,86 +664,53 @@ function useWindowPanel(opts = {}) {
       dispatch((0, import_summon.updateWindowTitle)({ id, title: opts.title }));
     }
   }, [id, opts.title, dispatch]);
-  const dragStart = (0, import_react.useRef)(null);
   const onTriggerPopout = opts.onTriggerPopout;
   const onTriggerPopoutRef = (0, import_react.useRef)(onTriggerPopout);
   (0, import_react.useEffect)(() => {
     onTriggerPopoutRef.current = onTriggerPopout;
   }, [onTriggerPopout]);
+  const gestureRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => () => gestureRef.current?.cancel(), []);
   const onDragStart = (0, import_react.useCallback)(
     (e) => {
       e.preventDefault();
       dispatch((0, import_summon.focusWindow)(id));
       if (!entry || entry.state === "maximized") return;
-      dragStart.current = {
-        mx: e.clientX,
-        my: e.clientY,
-        wx: entry.windowed.x,
-        wy: entry.windowed.y
-      };
-      setIsInteracting(true);
-      const releaseCursor = (0, import_design_system.holdDragCursor)();
+      const origin = { x: entry.windowed.x, y: entry.windowed.y };
       let dragOutState = INITIAL_DRAG_OUT_STATE;
-      let lastClientX = e.clientX;
-      let lastClientY = e.clientY;
       const popoutEnabled = onTriggerPopoutRef.current !== void 0;
-      const onMove = (ev) => {
-        if (!dragStart.current) return;
-        const nx = dragStart.current.wx + (ev.clientX - dragStart.current.mx);
-        const ny = dragStart.current.wy + (ev.clientY - dragStart.current.my);
-        dispatch((0, import_summon.updateWindowRect)({ id, rect: { x: nx, y: ny } }));
-        lastClientX = ev.clientX;
-        lastClientY = ev.clientY;
-        if (!popoutEnabled) return;
-        const result = evaluateDragOut(
-          { clientX: ev.clientX, clientY: ev.clientY },
-          dragOutState,
-          DEFAULT_DRAG_OUT_CONFIG,
-          window.innerWidth,
-          window.innerHeight,
-          performance.now()
-        );
-        if (result.state.isCandidate !== dragOutState.isCandidate) {
-          dispatch(
-            (0, import_summon.setPopoutCandidate)({ id: result.state.isCandidate ? id : null })
+      gestureRef.current?.cancel();
+      gestureRef.current = (0, import_design_system.startPointerDrag)(e, {
+        onStart: () => setIsInteracting(true),
+        onMove: ({ dx, dy }, ev) => {
+          dispatch((0, import_summon.updateWindowRect)({ id, rect: { x: origin.x + dx, y: origin.y + dy } }));
+          if (!popoutEnabled) return;
+          const result = evaluateDragOut(
+            { clientX: ev.clientX, clientY: ev.clientY },
+            dragOutState,
+            DEFAULT_DRAG_OUT_CONFIG,
+            window.innerWidth,
+            window.innerHeight,
+            performance.now()
           );
-        }
-        dragOutState = result.state;
-      };
-      const onUp = () => {
-        const wasCandidate = dragOutState.isCandidate;
-        const dragOrigin = dragStart.current;
-        dragStart.current = null;
-        setIsInteracting(false);
-        releaseCursor();
-        document.removeEventListener("pointermove", onMove);
-        document.removeEventListener("pointerup", onUp);
-        document.removeEventListener("pointercancel", onUp);
-        if (popoutEnabled && dragOutState.isCandidate) {
-          dispatch((0, import_summon.setPopoutCandidate)({ id: null }));
-        }
-        if (wasCandidate && onTriggerPopoutRef.current && entry) {
-          const lastRect = {
-            x: dragOrigin?.wx ?? entry.windowed.x,
-            y: dragOrigin?.wy ?? entry.windowed.y,
-            width: entry.windowed.width,
-            height: entry.windowed.height
-          };
-          onTriggerPopoutRef.current(lastRect);
-        } else {
-          const { vw, vh, degenerate } = (0, import_summon2.safeViewportDims)();
-          if (!degenerate) {
-            dispatch(
-              (0, import_summon.clampWindowRect)({ id, viewportWidth: vw, viewportHeight: vh })
-            );
+          if (result.state.isCandidate !== dragOutState.isCandidate) {
+            dispatch((0, import_summon.setPopoutCandidate)({ id: result.state.isCandidate ? id : null }));
           }
+          dragOutState = result.state;
+        },
+        onEnd: () => {
+          gestureRef.current = null;
+          const wasCandidate = dragOutState.isCandidate;
+          setIsInteracting(false);
+          if (popoutEnabled && wasCandidate) dispatch((0, import_summon.setPopoutCandidate)({ id: null }));
+          if (wasCandidate && onTriggerPopoutRef.current) {
+            onTriggerPopoutRef.current({ x: origin.x, y: origin.y, width: entry.windowed.width, height: entry.windowed.height });
+            return;
+          }
+          const { vw, vh, degenerate } = (0, import_summon2.safeViewportDims)();
+          if (!degenerate) dispatch((0, import_summon.clampWindowRect)({ id, viewportWidth: vw, viewportHeight: vh }));
         }
-        void lastClientX;
-        void lastClientY;
-      };
-      document.addEventListener("pointermove", onMove);
-      document.addEventListener("pointerup", onUp);
-      document.addEventListener("pointercancel", onUp);
+      });
     },
     [dispatch, id, entry]
   );
@@ -763,44 +720,21 @@ function useWindowPanel(opts = {}) {
       e.stopPropagation();
       dispatch((0, import_summon.focusWindow)(id));
       if (!entry || entry.state !== "windowed") return;
-      const startMx = e.clientX;
-      const startMy = e.clientY;
-      const { x, y, width, height } = entry.windowed;
-      setIsInteracting(true);
-      const releaseCursor = (0, import_design_system.holdDragCursor)(RESIZE_CURSOR[edge]);
-      const onMove = (ev) => {
-        const dx = ev.clientX - startMx;
-        const dy = ev.clientY - startMy;
-        let nx = x, ny = y, nw = width, nh = height;
-        if (edge.includes("e"))
-          nw = Math.min(maxWidth, Math.max(minWidth, width + dx));
-        if (edge.includes("s"))
-          nh = Math.min(maxHeight, Math.max(minHeight, height + dy));
-        if (edge.includes("w")) {
-          nw = Math.min(maxWidth, Math.max(minWidth, width - dx));
-          nx = x + (width - nw);
-        }
-        if (edge.includes("n")) {
-          nh = Math.min(maxHeight, Math.max(minHeight, height - dy));
-          ny = y + (height - nh);
+      const origin = { ...entry.windowed };
+      gestureRef.current?.cancel();
+      gestureRef.current = (0, import_design_system.startPointerDrag)(e, {
+        // THE CURSOR LAW: the edge's resize cursor holds on <html> until release.
+        cursor: import_design_system.RESIZE_EDGE_CURSOR[edge],
+        onStart: () => setIsInteracting(true),
+        onMove: ({ dx, dy }) => {
+          const rect2 = (0, import_design_system.resizeRect)(origin, edge, dx, dy, { minWidth, minHeight, maxWidth, maxHeight });
+          dispatch((0, import_summon.updateWindowRect)({ id, rect: { x: rect2.x, y: rect2.y, width: rect2.width, height: rect2.height } }));
+        },
+        onEnd: () => {
+          gestureRef.current = null;
+          setIsInteracting(false);
         }
-        dispatch(
-          (0, import_summon.updateWindowRect)({
-            id,
-            rect: { x: nx, y: ny, width: nw, height: nh }
-          })
-        );
-      };
-      const onUp = () => {
-        setIsInteracting(false);
-        releaseCursor();
-        document.removeEventListener("pointermove", onMove);
-        document.removeEventListener("pointerup", onUp);
-        document.removeEventListener("pointercancel", onUp);
-      };
-      document.addEventListener("pointermove", onMove);
-      document.addEventListener("pointerup", onUp);
-      document.addEventListener("pointercancel", onUp);
+      });
     },
     [dispatch, id, entry, minWidth, minHeight, maxWidth, maxHeight]
   );
@@ -845,20 +779,15 @@ function useWindowPanel(opts = {}) {
   };
 }
 
-// src/window/utils/useIsClient.ts
-var import_react3 = require("react");
-var subscribe = () => () => {
-};
-function useIsClient() {
-  return (0, import_react3.useSyncExternalStore)(subscribe, () => true, () => false);
-}
+// src/window/WindowPanel.tsx
+var import_client_lazy = require("@ai-matrx/kit/client-lazy");
 
 // src/window/utils/useDebugFlag.ts
-var import_react4 = require("react");
+var import_react3 = require("react");
 var noSubscribe = () => () => {
 };
 function useDebugFlag(debug) {
-  return (0, import_react4.useSyncExternalStore)(
+  return (0, import_react3.useSyncExternalStore)(
     debug.subscribe ? (listener) => debug.subscribe?.(listener) ?? (() => {
     }) : noSubscribe,
     () => debug.enabled(),
@@ -867,7 +796,7 @@ function useDebugFlag(debug) {
 }
 
 // src/window/WindowPanel.tsx
-var import_react20 = require("@ai-matrx/summon/react");
+var import_react19 = require("@ai-matrx/summon/react");
 
 // src/window/utils/urlSyncIdentity.ts
 function resolveWindowUrlSyncKey(registryKey, explicitKey) {
@@ -925,7 +854,7 @@ function sanitizeWindowData(value, allowedKeys) {
 var import_window_host3 = require("@ai-matrx/summon/window-host");
 
 // src/window/mobile/MobileDrawerSurface.tsx
-var import_react5 = require("react");
+var import_react4 = require("react");
 var import_design_system2 = require("@ai-matrx/design-system");
 var import_design_system3 = require("@ai-matrx/design-system");
 var import_cn3 = require("@ai-matrx/design-system/cn");
@@ -1002,7 +931,7 @@ function MobileDrawerSurface({
   hideClose = false,
   sidebarAs = "drawer"
 }) {
-  const [sidebarOpen, setSidebarOpen] = (0, import_react5.useState)(false);
+  const [sidebarOpen, setSidebarOpen] = (0, import_react4.useState)(false);
   const hasSidebar = !!sidebar;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     import_design_system2.Drawer,
@@ -1119,7 +1048,7 @@ function MobileDrawerSurface({
 }
 
 // src/window/mobile/MobileCardSurface.tsx
-var import_react6 = require("react");
+var import_react5 = require("react");
 var import_react_dom = require("react-dom");
 var import_design_system4 = require("@ai-matrx/design-system");
 var import_design_system5 = require("@ai-matrx/design-system");
@@ -1136,8 +1065,8 @@ function MobileCardSurface({
   surfaceLayer,
   maxHeight = "60dvh"
 }) {
-  const cardRef = (0, import_react6.useRef)(null);
-  (0, import_react6.useEffect)(() => {
+  const cardRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
     if (!isOpen) return void 0;
     const onKey = (e) => {
       if (e.key === "Escape" && !e.defaultPrevented) onClose();
@@ -1198,10 +1127,10 @@ function MobileCardSurface({
 }
 
 // src/window/chrome/DebugStrip.tsx
-var import_react7 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function DebugStrip({ rect, zIndex }) {
-  const [vp, setVp] = (0, import_react7.useState)(
+  const [vp, setVp] = (0, import_react6.useState)(
     () => typeof window === "undefined" ? { vw: 0, vh: 0, sw: 0, sh: 0, dpr: 1 } : {
       vw: window.innerWidth,
       vh: window.innerHeight,
@@ -1210,7 +1139,7 @@ function DebugStrip({ rect, zIndex }) {
       dpr: window.devicePixelRatio ?? 1
     }
   );
-  (0, import_react7.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const update = () => setVp({
       vw: window.innerWidth,
       vh: window.innerHeight,
@@ -1334,7 +1263,7 @@ function MobileWindowHeader({
 }
 
 // src/window/chrome/DeprecationBanner.tsx
-var import_react8 = require("react");
+var import_react7 = require("react");
 var import_cn6 = require("@ai-matrx/design-system/cn");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function DeprecationBanner({
@@ -1342,7 +1271,7 @@ function DeprecationBanner({
   note,
   className
 }) {
-  const [dismissed, setDismissed] = (0, import_react8.useState)(false);
+  const [dismissed, setDismissed] = (0, import_react7.useState)(false);
   if (dismissed) return null;
   const message = note ?? (replacedBy ? `Deprecated \u2014 moved to "${replacedBy}". This window will be removed soon.` : "Deprecated \u2014 this window will be removed soon.");
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
@@ -1429,12 +1358,12 @@ function supportsAnyPopout() {
 }
 
 // src/window/popout/usePopoutWindow.ts
-var import_react10 = require("react");
-var import_react11 = require("@ai-matrx/summon/react");
+var import_react9 = require("react");
+var import_react10 = require("@ai-matrx/summon/react");
 var import_summon3 = require("@ai-matrx/summon");
 
 // src/window/popout/popoutWindowMap.ts
-var import_react9 = require("react");
+var import_react8 = require("react");
 var import_global_slot3 = require("@ai-matrx/kit/global-slot");
 var slot = () => (0, import_global_slot3.globalSlot)("ai-matrx.summon.window.popoutWindows", () => ({ map: /* @__PURE__ */ new Map(), listeners: /* @__PURE__ */ new Set() }));
 function notify() {
@@ -1467,7 +1396,7 @@ function subscribePopoutWindowMap(listener) {
   };
 }
 function usePopoutWindowRef(id) {
-  return (0, import_react9.useSyncExternalStore)(
+  return (0, import_react8.useSyncExternalStore)(
     subscribePopoutWindowMap,
     () => getPopoutWindow(id),
     // SSR snapshot — popouts are never present during SSR.
@@ -1721,12 +1650,12 @@ function clearAllPopoutPending() {
 var import_summon4 = require("@ai-matrx/summon");
 var import_outbound = require("@ai-matrx/kit/outbound");
 function usePopoutWindow(windowId) {
-  const dispatch = (0, import_react11.useSummonDispatch)();
-  const { notify: notify3 } = (0, import_react11.useSummonPorts)();
-  const popoutMode = (0, import_react11.useSummonSelector)((0, import_summon3.selectPopoutMode)(windowId));
-  const activePipWindowId = (0, import_react11.useSummonSelector)(import_summon3.selectActivePipWindowId);
-  const stylesDisposeRef = (0, import_react10.useRef)(null);
-  const handleClose = (0, import_react10.useCallback)(() => {
+  const dispatch = (0, import_react10.useSummonDispatch)();
+  const { notify: notify3 } = (0, import_react10.useSummonPorts)();
+  const popoutMode = (0, import_react10.useSummonSelector)((0, import_summon3.selectPopoutMode)(windowId));
+  const activePipWindowId = (0, import_react10.useSummonSelector)(import_summon3.selectActivePipWindowId);
+  const stylesDisposeRef = (0, import_react9.useRef)(null);
+  const handleClose = (0, import_react9.useCallback)(() => {
     const win = getPopoutWindow(windowId);
     if (!win && process.env.NODE_ENV !== "production") {
     }
@@ -1743,7 +1672,7 @@ function usePopoutWindow(windowId) {
       console.info(`[popout] closed window for "${windowId}"`);
     }
   }, [dispatch, windowId]);
-  const openPopout = (0, import_react10.useCallback)(
+  const openPopout = (0, import_react9.useCallback)(
     async (opts) => {
       const capability = detectPopoutCapability();
       if (capability === "none") {
@@ -1812,7 +1741,7 @@ function usePopoutWindow(windowId) {
     },
     [activePipWindowId, dispatch, handleClose, notify3, windowId]
   );
-  const close = (0, import_react10.useCallback)(() => {
+  const close = (0, import_react9.useCallback)(() => {
     const win = getPopoutWindow(windowId);
     if (!win) {
       dispatch((0, import_summon3.dockWindow)((0, import_summon4.buildDockWindowPayload)(windowId)));
@@ -1824,7 +1753,7 @@ function usePopoutWindow(windowId) {
       handleClose();
     }
   }, [dispatch, handleClose, windowId]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (popoutMode === null && getPopoutWindow(windowId) !== null) {
       try {
         getPopoutWindow(windowId)?.close();
@@ -1833,7 +1762,7 @@ function usePopoutWindow(windowId) {
       }
     }
   }, [popoutMode, windowId, handleClose]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const onBeforeUnload = () => {
       try {
         getPopoutWindow(windowId)?.close();
@@ -1849,8 +1778,8 @@ function usePopoutWindow(windowId) {
 }
 
 // src/window/popout/usePopoutControl.ts
-var import_react12 = require("react");
-var import_react13 = require("@ai-matrx/summon/react");
+var import_react11 = require("react");
+var import_react12 = require("@ai-matrx/summon/react");
 var import_summon5 = require("@ai-matrx/summon");
 var import_summon6 = require("@ai-matrx/summon");
 var import_global_slot4 = require("@ai-matrx/kit/global-slot");
@@ -1867,8 +1796,8 @@ function getPopoutOpener(windowId) {
   return openers().get(windowId) ?? null;
 }
 function usePopoutControl() {
-  const dispatch = (0, import_react13.useSummonDispatch)();
-  const popOut = (0, import_react12.useCallback)(
+  const dispatch = (0, import_react12.useSummonDispatch)();
+  const popOut = (0, import_react11.useCallback)(
     async (windowId, opts) => {
       const opener = getPopoutOpener(windowId);
       if (!opener) {
@@ -1878,7 +1807,7 @@ function usePopoutControl() {
     },
     []
   );
-  const dock = (0, import_react12.useCallback)(
+  const dock = (0, import_react11.useCallback)(
     (windowId) => {
       const payload = (0, import_summon6.buildDockWindowPayload)(windowId);
       dispatch((0, import_summon5.dockWindow)(payload));
@@ -1897,11 +1826,11 @@ function buildPopoutOpts(rect, opts) {
 
 // src/window/popout/PopoutPortal.tsx
 var import_react_dom2 = require("react-dom");
-var import_react15 = require("@ai-matrx/summon/react");
+var import_react14 = require("@ai-matrx/summon/react");
 var import_summon7 = require("@ai-matrx/summon");
 
 // src/window/popout/PopoutShell.tsx
-var import_react14 = require("react");
+var import_react13 = require("react");
 var import_design_system6 = require("@ai-matrx/design-system");
 var import_window_host = require("@ai-matrx/summon/window-host");
 var import_jsx_runtime10 = require("react/jsx-runtime");
@@ -1910,7 +1839,7 @@ function PopoutShell({
   mode,
   children
 }) {
-  const value = (0, import_react14.useMemo)(
+  const value = (0, import_react13.useMemo)(
     () => ({
       popoutDocument: popoutWindow.document,
       popoutWindow,
@@ -1926,7 +1855,7 @@ function PopoutShell({
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function PopoutPortal({ windowId, children }) {
   const popoutWin = usePopoutWindowRef(windowId);
-  const popoutMode = (0, import_react15.useSummonSelector)((0, import_summon7.selectPopoutMode)(windowId));
+  const popoutMode = (0, import_react14.useSummonSelector)((0, import_summon7.selectPopoutMode)(windowId));
   if (!popoutWin || popoutMode === null) return null;
   return (0, import_react_dom2.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PopoutShell, { popoutWindow: popoutWin, mode: popoutMode, children }),
@@ -2052,16 +1981,16 @@ async function isFlatImage(blob) {
 var import_summon9 = require("@ai-matrx/summon");
 
 // src/window/tray/TrayChipPreview.tsx
-var import_react16 = require("react");
+var import_react15 = require("react");
 var import_cn8 = require("@ai-matrx/design-system/cn");
 var import_summon8 = require("@ai-matrx/summon");
-var import_react17 = require("@ai-matrx/summon/react");
+var import_react16 = require("@ai-matrx/summon/react");
 var import_window_host2 = require("@ai-matrx/summon/window-host");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function isPlainRecord(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
-var TrayChipPreview = (0, import_react16.memo)(function TrayChipPreview2({
+var TrayChipPreview = (0, import_react15.memo)(function TrayChipPreview2({
   registryKey,
   snapshotKey,
   overlayInstanceId = import_summon8.DEFAULT_INSTANCE_ID,
@@ -2070,9 +1999,9 @@ var TrayChipPreview = (0, import_react16.memo)(function TrayChipPreview2({
 }) {
   const meta = (0, import_summon8.getOverlayMeta)(registryKey);
   const { Preview } = (0, import_window_host2.getTrayPreviewEntry)(registryKey);
-  const ports = (0, import_react17.useSummonPorts)();
-  const overlayData = (0, import_react17.useSummonSelector)((state2) => meta ? (0, import_summon8.selectOverlayData)(state2, meta.id, overlayInstanceId) : null);
-  const collectedData = (0, import_react17.useSummonSelector)((state2) => state2.windowManager.windows[snapshotKey]?.persistence?.data);
+  const ports = (0, import_react16.useSummonPorts)();
+  const overlayData = (0, import_react16.useSummonSelector)((state2) => meta ? (0, import_summon8.selectOverlayData)(state2, meta.id, overlayInstanceId) : null);
+  const collectedData = (0, import_react16.useSummonSelector)((state2) => state2.windowManager.windows[snapshotKey]?.persistence?.data);
   const registryLabel = meta?.label ?? null;
   const fallback = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TraySnapshotImage, { snapshotKey, registryLabel, title });
   if (Preview) {
@@ -2093,7 +2022,7 @@ var TrayChipPreview = (0, import_react16.memo)(function TrayChipPreview2({
   }
   return fallback;
 });
-var PreviewBoundary = class extends import_react16.Component {
+var PreviewBoundary = class extends import_react15.Component {
   state = { failed: false };
   static getDerivedStateFromError() {
     return { failed: true };
@@ -2105,7 +2034,7 @@ var PreviewBoundary = class extends import_react16.Component {
     return this.state.failed ? this.props.fallback : this.props.children;
   }
 };
-var DefaultTrayChipBody = (0, import_react16.memo)(function DefaultTrayChipBody2({ label }) {
+var DefaultTrayChipBody = (0, import_react15.memo)(function DefaultTrayChipBody2({ label }) {
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-1 flex-col justify-between overflow-hidden bg-gradient-to-br from-muted/45 via-background to-primary/5 px-3 py-2.5", children: [
     /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex min-w-0 items-center gap-2.5", children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
@@ -2128,12 +2057,12 @@ var DefaultTrayChipBody = (0, import_react16.memo)(function DefaultTrayChipBody2
     ] })
   ] });
 });
-var TraySnapshotImage = (0, import_react16.memo)(function TraySnapshotImage2({
+var TraySnapshotImage = (0, import_react15.memo)(function TraySnapshotImage2({
   snapshotKey,
   registryLabel,
   title
 }) {
-  const snapshot = (0, import_react16.useSyncExternalStore)(
+  const snapshot = (0, import_react15.useSyncExternalStore)(
     subscribeTraySnapshotMap,
     () => getTraySnapshot(snapshotKey),
     () => null
@@ -2305,25 +2234,25 @@ function WindowPanel({
   hidePopOutButton = false,
   ...hookOpts
 }) {
-  const instance = (0, import_react19.useOptionalOverlayInstance)();
+  const instance = (0, import_react18.useOptionalOverlayInstance)();
   const instanceMatches = instance !== null && (boundToOverlay === true || instance.overlayId === overlayIdProp);
   const overlayId = overlayIdProp ?? (boundToOverlay && instance ? instance.overlayId : void 0);
   const overlayInstanceId = overlayInstanceIdProp ?? (instanceMatches ? instance.instanceId : void 0);
-  const ports = (0, import_react19.useSummonPorts)();
+  const ports = (0, import_react18.useSummonPorts)();
   const windowConfig = (0, import_window_host3.useWindowConfig)();
-  const reactId = (0, import_react18.useId)();
+  const reactId = (0, import_react17.useId)();
   const id = hookOpts.id ?? reactId;
   const trayRegistryKey = overlayId ?? id;
   const isMobile = (0, import_media_query.useIsMobile)();
   const surfaceLayerAttrs = surfaceLayer ? { "data-surface-layer": surfaceLayer } : void 0;
-  const isMounted = useIsClient();
+  const isMounted = (0, import_client_lazy.useIsClient)();
   const registryMeta = overlayId ? (0, import_summon10.getOverlayMeta)(overlayId) : void 0;
   const registryEntry = registryMeta?.window;
   const effectiveInstanceId = overlayInstanceId ?? import_summon10.DEFAULT_INSTANCE_ID;
-  const [autoOpened] = (0, import_react18.useState)(
+  const [autoOpened] = (0, import_react17.useState)(
     () => Boolean(overlayId) && isAutoOpened(overlayId, effectiveInstanceId)
   );
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!overlayId) return void 0;
     let timer;
     return () => {
@@ -2337,16 +2266,16 @@ function WindowPanel({
   const preservationEnabled = Boolean(
     overlayId && registryEntry?.preservation && !registryEntry.ephemeral && (registryMeta?.instance !== "multi" || overlayInstanceId)
   );
-  const overlayLaunchData = (0, import_react19.useSummonSelector)(
+  const overlayLaunchData = (0, import_react18.useSummonSelector)(
     (state2) => overlayId ? (0, import_summon10.selectOverlayData)(state2, overlayId, effectiveInstanceId) : null
   );
   const initialPreservationData = registryEntry?.preservation ? sanitizeWindowData(overlayLaunchData, registryEntry.preservation.dataKeys) : {};
   const popoutCapability = isMounted ? detectPopoutCapability() : null;
   const popout = usePopoutWindow(id);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     return registerPopoutOpener(id, popout.openPopout);
   }, [id, popout.openPopout]);
-  const handleDragOutPopout = (0, import_react18.useCallback)(
+  const handleDragOutPopout = (0, import_react17.useCallback)(
     (draggedRect) => {
       void popout.openPopout({
         width: draggedRect.width,
@@ -2357,7 +2286,7 @@ function WindowPanel({
     [popout, title]
   );
   const onTriggerPopout = !isMobile && popoutCapability !== "none" ? handleDragOutPopout : void 0;
-  const autoDispatch = (0, import_react19.useSummonDispatch)();
+  const autoDispatch = (0, import_react18.useSummonDispatch)();
   const {
     windowState,
     rect,
@@ -2395,10 +2324,10 @@ function WindowPanel({
   });
   const liftedZIndex = (0, import_design_system7.useFloatingLayerZIndex)(managerZIndex);
   const zIndex = windowState === "minimized" ? Math.max(liftedZIndex, MINIMIZED_TILE_Z_FLOOR + managerZIndex) : liftedZIndex;
-  const dispatch = (0, import_react19.useSummonDispatch)();
-  const windowsHidden = (0, import_react19.useSummonSelector)(import_summon10.selectWindowsHidden);
+  const dispatch = (0, import_react18.useSummonDispatch)();
+  const windowsHidden = (0, import_react18.useSummonSelector)(import_summon10.selectWindowsHidden);
   const isDebugMode = useDebugFlag(ports.debug);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     (0, import_design_system7.announceLayerFront)(
       document.querySelector(`[data-window-id="${CSS.escape(id)}"]`)
     );
@@ -2406,26 +2335,26 @@ function WindowPanel({
   const claimFront = (event) => {
     (0, import_design_system7.announceLayerFront)(event.currentTarget.closest("[data-window-id]") ?? event.currentTarget);
   };
-  const allWindows = (0, import_react19.useSummonSelector)(import_summon10.selectAllWindows);
+  const allWindows = (0, import_react18.useSummonSelector)(import_summon10.selectAllWindows);
   const isTopWindow = !isMobile ? true : allWindows.find((w) => w.state !== "minimized")?.id === id;
-  const [activePaneMobile, setActivePaneMobile] = (0, import_react18.useState)(
+  const [activePaneMobile, setActivePaneMobile] = (0, import_react17.useState)(
     "main"
   );
   const effectiveUrlSyncKey = resolveWindowUrlSyncKey(registryMeta?.link?.key, urlSyncKey);
   const effectiveUrlSyncId = urlSyncId ?? (effectiveUrlSyncKey ? overlayId : void 0);
-  (0, import_react20.useOverlayLink)(effectiveUrlSyncKey, effectiveUrlSyncId, urlSyncArgs);
+  (0, import_react19.useOverlayLink)(effectiveUrlSyncKey, effectiveUrlSyncId, urlSyncArgs);
   const deprecation = registryEntry?.deprecated;
   const isDeprecated = !!deprecation;
   const deprecatedRingClass = isDeprecated ? "ring-2 ring-destructive ring-offset-2 ring-offset-background" : "";
   const hasSidebar = !!sidebar;
-  const [sidebarOpen, setSidebarOpen] = (0, import_react18.useState)(defaultSidebarOpen);
-  const [sidebarSize, setSidebarSize] = (0, import_react18.useState)(
+  const [sidebarOpen, setSidebarOpen] = (0, import_react17.useState)(defaultSidebarOpen);
+  const [sidebarSize, setSidebarSize] = (0, import_react17.useState)(
     sidebarDefaultSize
   );
-  const restoredPersistence = (0, import_react19.useSummonSelector)((0, import_summon10.selectWindowPersistence)(id));
-  const sidebarPanelRef = (0, import_react18.useRef)(null);
-  const restoredChromeAppliedRef = (0, import_react18.useRef)(false);
-  const handleSaveWindowState = (0, import_react18.useCallback)(() => {
+  const restoredPersistence = (0, import_react18.useSummonSelector)((0, import_summon10.selectWindowPersistence)(id));
+  const sidebarPanelRef = (0, import_react17.useRef)(null);
+  const restoredChromeAppliedRef = (0, import_react17.useRef)(false);
+  const handleSaveWindowState = (0, import_react17.useCallback)(() => {
     if (!overlayId || !preservationEnabled || !registryEntry?.preservation) {
       return;
     }
@@ -2457,15 +2386,15 @@ function WindowPanel({
     ports,
     dispatch
   ]);
-  const saveRef = (0, import_react18.useRef)(handleSaveWindowState);
-  (0, import_react18.useEffect)(() => {
+  const saveRef = (0, import_react17.useRef)(handleSaveWindowState);
+  (0, import_react17.useEffect)(() => {
     saveRef.current = handleSaveWindowState;
   }, [handleSaveWindowState]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!preservationEnabled) return;
     saveRef.current();
   }, [preservationEnabled, overlayLaunchData, onCollectData]);
-  const handleClose = (0, import_react18.useCallback)(() => {
+  const handleClose = (0, import_react17.useCallback)(() => {
     if (instanceMatches && instance && instance.overlayId === overlayId) {
       instance.close();
     } else if (boundToOverlay) {
@@ -2480,7 +2409,7 @@ function WindowPanel({
     }
     onClose?.();
   }, [boundToOverlay, dispatch, effectiveInstanceId, id, instance, instanceMatches, onClose, overlayId, overlayInstanceId, ports, registryMeta?.instance]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!closeOnEscape || isMobile) return void 0;
     const onKey = (e) => {
       if (e.key !== "Escape" || e.defaultPrevented) return;
@@ -2507,7 +2436,7 @@ function WindowPanel({
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [closeOnEscape, isMobile, id, handleClose, windowConfig.escapeYieldSelector]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!restoredPersistence || restoredChromeAppliedRef.current) return;
     restoredChromeAppliedRef.current = true;
     setSidebarOpen(restoredPersistence.sidebarOpen);
@@ -2518,20 +2447,20 @@ function WindowPanel({
       sidebarPanelRef.current?.resize(restoredPersistence.sidebarSize);
     }
   }, [restoredPersistence]);
-  const [fitContentEl, fitContentRef] = (0, import_react18.useState)(null);
-  const fitContentStore = (0, import_react19.useSummonStore)();
-  const fitPlacedRef = (0, import_react18.useRef)(false);
-  const [glideReady, setGlideReady] = (0, import_react18.useState)(false);
-  (0, import_react18.useEffect)(() => {
+  const [fitContentEl, fitContentRef] = (0, import_react17.useState)(null);
+  const fitContentStore = (0, import_react18.useSummonStore)();
+  const fitPlacedRef = (0, import_react17.useRef)(false);
+  const [glideReady, setGlideReady] = (0, import_react17.useState)(false);
+  (0, import_react17.useEffect)(() => {
     const timer = window.setTimeout(() => setGlideReady(true), GLIDE_SETTLE_MS);
     return () => window.clearTimeout(timer);
   }, []);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (isInteracting) fitPlacedRef.current = true;
   }, [isInteracting]);
   const fitPresetPosition = hookOpts.position;
   const fitMayReplace = hookOpts.initialRect?.x === void 0 && hookOpts.initialRect?.y === void 0;
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!fitContent || isMobile || windowState !== "windowed") return void 0;
     const el2 = fitContentEl;
     if (!el2) return void 0;
@@ -2563,7 +2492,7 @@ function WindowPanel({
       ro.disconnect();
     };
   }, [fitContent, fitContentEl, isMobile, windowState, id, dispatch, fitContentStore, fitPresetPosition, fitMayReplace]);
-  const toggleSidebar = (0, import_react18.useCallback)(() => {
+  const toggleSidebar = (0, import_react17.useCallback)(() => {
     const panel = sidebarPanelRef.current;
     if (!panel) return;
     if (sidebarOpen) {
@@ -2599,7 +2528,7 @@ function WindowPanel({
     id,
     rect.width
   ]);
-  const handleSidebarResize = (0, import_react18.useCallback)(
+  const handleSidebarResize = (0, import_react17.useCallback)(
     (panelSize) => {
       setSidebarOpen(panelSize.asPercentage > 0);
       if (panelSize.inPixels > 0) setSidebarSize(panelSize.inPixels);
@@ -2616,20 +2545,20 @@ function WindowPanel({
     [dispatch, id, preservationEnabled, sidebarSize]
   );
   const portalTarget = isMounted ? document.body : null;
-  const [bodyHost] = (0, import_react18.useState)(() => {
+  const [bodyHost] = (0, import_react17.useState)(() => {
     if (typeof document === "undefined") return null;
     const host = document.createElement("div");
     host.className = "matrx-window-body-host";
     host.setAttribute("data-window-body-host", "");
     return host;
   });
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!overlayId) return void 0;
     (0, import_summon10.ackOverlayRender)(overlayId, id);
     return () => (0, import_summon10.clearOverlayRender)(overlayId, id);
   }, [overlayId, id]);
   const resolvedActionsRight = actionsRight ?? actions ?? null;
-  const snapLeft = (0, import_react18.useCallback)(() => {
+  const snapLeft = (0, import_react17.useCallback)(() => {
     const { vw, vh } = (0, import_summon10.safeViewportDims)();
     dispatch(
       (0, import_summon10.updateWindowRect)({
@@ -2638,7 +2567,7 @@ function WindowPanel({
       })
     );
   }, [dispatch, id]);
-  const snapRight = (0, import_react18.useCallback)(() => {
+  const snapRight = (0, import_react17.useCallback)(() => {
     const { vw, vh } = (0, import_summon10.safeViewportDims)();
     const half = Math.round(vw / 2);
     dispatch(
@@ -2648,7 +2577,7 @@ function WindowPanel({
       })
     );
   }, [dispatch, id]);
-  const snapTop = (0, import_react18.useCallback)(() => {
+  const snapTop = (0, import_react17.useCallback)(() => {
     const { vw, vh } = (0, import_summon10.safeViewportDims)();
     dispatch(
       (0, import_summon10.updateWindowRect)({
@@ -2657,7 +2586,7 @@ function WindowPanel({
       })
     );
   }, [dispatch, id]);
-  const snapBottom = (0, import_react18.useCallback)(() => {
+  const snapBottom = (0, import_react17.useCallback)(() => {
     const { vw, vh } = (0, import_summon10.safeViewportDims)();
     const half = Math.round(vh / 2);
     dispatch(
@@ -2667,7 +2596,7 @@ function WindowPanel({
       })
     );
   }, [dispatch, id]);
-  const snapCentre = (0, import_react18.useCallback)(() => {
+  const snapCentre = (0, import_react17.useCallback)(() => {
     const { vw, vh } = (0, import_summon10.safeViewportDims)();
     const w = Math.min(rect.width, vw);
     const h = Math.min(rect.height, vh);
@@ -2683,7 +2612,7 @@ function WindowPanel({
       })
     );
   }, [dispatch, id, rect.width, rect.height]);
-  const arrangeAll = (0, import_react18.useCallback)(
+  const arrangeAll = (0, import_react17.useCallback)(
     (layout) => {
       const { vw, vh } = (0, import_summon10.safeViewportDims)();
       dispatch(
@@ -2696,36 +2625,36 @@ function WindowPanel({
     },
     [dispatch]
   );
-  const popoutMode = (0, import_react19.useSummonSelector)((0, import_summon10.selectPopoutMode)(id));
+  const popoutMode = (0, import_react18.useSummonSelector)((0, import_summon10.selectPopoutMode)(id));
   const outerPopout = (0, import_window_host4.usePopout)();
   const outerPortalContainer = (0, import_design_system7.usePortalContainer)();
   const popoutWin = usePopoutWindowRef(id);
   const ownPopout = popoutMode !== null && popoutWin !== null;
-  const bodyPopoutValue = import_react18.default.useMemo(
+  const bodyPopoutValue = import_react17.default.useMemo(
     () => ownPopout && popoutWin ? { popoutDocument: popoutWin.document, popoutWindow: popoutWin, popoutContainer: popoutWin.document.body, mode: popoutMode } : outerPopout,
     [ownPopout, popoutWin, popoutMode, outerPopout]
   );
   const bodyPortalContainer = ownPopout && popoutWin ? popoutWin.document.body : outerPortalContainer;
-  const popoutCandidateId = (0, import_react19.useSummonSelector)(import_summon10.selectPopoutCandidateId);
+  const popoutCandidateId = (0, import_react18.useSummonSelector)(import_summon10.selectPopoutCandidateId);
   const canShowPopOut = !hidePopOutButton && !isMobile && popoutCapability !== "none" && windowState !== "minimized" && popoutMode === null;
-  const handlePopOut = (0, import_react18.useCallback)(() => {
+  const handlePopOut = (0, import_react17.useCallback)(() => {
     void popout.openPopout({
       width: rect.width,
       height: rect.height,
       title: typeof title === "string" ? title : "Window"
     });
   }, [popout, rect.width, rect.height, title]);
-  const handleDockBack = (0, import_react18.useCallback)(() => {
+  const handleDockBack = (0, import_react17.useCallback)(() => {
     dispatch((0, import_summon10.dockWindow)((0, import_summon10.buildDockWindowPayload)(id)));
   }, [dispatch, id]);
-  const bodyRef = (0, import_react18.useRef)(null);
-  const retainedBodyDimensionsRef = (0, import_react18.useRef)(null);
-  const captureGenerationRef = (0, import_react18.useRef)(0);
+  const bodyRef = (0, import_react17.useRef)(null);
+  const retainedBodyDimensionsRef = (0, import_react17.useRef)(null);
+  const captureGenerationRef = (0, import_react17.useRef)(0);
   const trayPreviewEntry = (0, import_window_host5.getTrayPreviewEntry)(trayRegistryKey);
   const effectiveTrayCapture = captureTraySnapshot ?? trayPreviewEntry.captureTraySnapshot ?? (trayPreviewEntry.Preview ? void 0 : defaultTraySnapshotCapture);
-  const [pendingTrayCapture, setPendingTrayCapture] = (0, import_react18.useState)(null);
-  const [trayPreviewData, setTrayPreviewData] = (0, import_react18.useState)(void 0);
-  const handleMinimize = (0, import_react18.useCallback)(() => {
+  const [pendingTrayCapture, setPendingTrayCapture] = (0, import_react17.useState)(null);
+  const [trayPreviewData, setTrayPreviewData] = (0, import_react17.useState)(void 0);
+  const handleMinimize = (0, import_react17.useCallback)(() => {
     let collected;
     try {
       collected = onCollectData?.();
@@ -2765,7 +2694,7 @@ function WindowPanel({
     preservationEnabled,
     trayRegistryKey
   ]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (windowState !== "minimized" || !pendingTrayCapture) return void 0;
     const bodyEl = bodyRef.current;
     if (!bodyEl) {
@@ -2797,20 +2726,20 @@ function WindowPanel({
       if (timeoutId) clearTimeout(timeoutId);
     };
   }, [id, pendingTrayCapture, ports, windowState]);
-  const handleRestoreClearingSnapshot = (0, import_react18.useCallback)(() => {
+  const handleRestoreClearingSnapshot = (0, import_react17.useCallback)(() => {
     captureGenerationRef.current += 1;
     setPendingTrayCapture(null);
     clearTraySnapshot(id);
     onRestore();
   }, [id, onRestore]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     return () => {
       captureGenerationRef.current += 1;
       clearTraySnapshot(id);
     };
   }, [id]);
-  const previousTrayStateRef = (0, import_react18.useRef)(windowState);
-  (0, import_react18.useEffect)(() => {
+  const previousTrayStateRef = (0, import_react17.useRef)(windowState);
+  (0, import_react17.useEffect)(() => {
     const wasMinimized = previousTrayStateRef.current === "minimized";
     previousTrayStateRef.current = windowState;
     if (!wasMinimized || windowState === "minimized") return;
@@ -2822,9 +2751,9 @@ function WindowPanel({
       );
     });
   }, [id, windowState]);
-  const prevStateRef = (0, import_react18.useRef)(windowState);
-  const prevPopoutModeRef = (0, import_react18.useRef)(popoutMode);
-  (0, import_react18.useEffect)(() => {
+  const prevStateRef = (0, import_react17.useRef)(windowState);
+  const prevPopoutModeRef = (0, import_react17.useRef)(popoutMode);
+  (0, import_react17.useEffect)(() => {
     const wasNonWindowed = prevStateRef.current !== "windowed" || prevPopoutModeRef.current !== null;
     const isNowWindowed = windowState === "windowed" && popoutMode === null;
     prevStateRef.current = windowState;
@@ -2838,7 +2767,7 @@ function WindowPanel({
   const isMinimized = windowState === "minimized";
   const isMaximized = windowState === "maximized";
   const isPopoutCandidate = popoutCandidateId === id;
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!isMobile || !isMinimized) return;
     let cancelled = false;
     queueMicrotask(() => {
@@ -3190,8 +3119,8 @@ function WindowPanel({
   ] });
 }
 function BodyMount({ host }) {
-  const slotRef = (0, import_react18.useRef)(null);
-  (0, import_react18.useLayoutEffect)(() => {
+  const slotRef = (0, import_react17.useRef)(null);
+  (0, import_react17.useLayoutEffect)(() => {
     const slot2 = slotRef.current;
     if (!slot2 || !host) return void 0;
     slot2.appendChild(host);
@@ -3467,9 +3396,9 @@ function GreenTrafficLight({
   onSaveWindowState,
   onPopOut
 }) {
-  const [dropdownOpen, setDropdownOpen] = (0, import_react18.useState)(false);
-  const leaveTimer = (0, import_react18.useRef)(null);
-  const containerRef = (0, import_react18.useRef)(null);
+  const [dropdownOpen, setDropdownOpen] = (0, import_react17.useState)(false);
+  const leaveTimer = (0, import_react17.useRef)(null);
+  const containerRef = (0, import_react17.useRef)(null);
   const openDropdown = () => {
     if (leaveTimer.current) clearTimeout(leaveTimer.current);
     setDropdownOpen(true);
@@ -3483,7 +3412,7 @@ function GreenTrafficLight({
     fn();
     setDropdownOpen(false);
   };
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!dropdownOpen) return void 0;
     const onPointerOutside = (e) => {
       const target = e.target;