@ai-matrx/summon 0.1.16 → 0.1.18

package/dist/window.d.cts

@@ -1,10 +1,12 @@
 import * as react from 'react';
 import react__default, { ComponentType, SVGAttributes, ReactNode } from 'react';
 import { WindowRect, WindowPersistenceRegistration, MobilePresentation } from '@ai-matrx/summon';
+import { ResizeEdge as ResizeEdge$1 } from '@ai-matrx/design-system';
 import { TraySnapshotCapture } from '@ai-matrx/summon/window-host';
 export { DEFAULT_ESCAPE_YIELD_SELECTOR, DEFAULT_MOBILE_TOP_OFFSET, DEFAULT_WINDOW_CONFIG, PopoutContext, PopoutContextValue, PopoutMode, TrayPreviewContext, TrayPreviewEntry, TraySnapshotCapture, WindowConfig, WindowSelectionSurface, WindowSelectionSurfaceProps, WindowTraySync, WindowsProvider, WindowsProviderProps, getTrayPreviewEntry, registerTrayPreview, resetTrayPreviews, useOverlaySurfaceRenderAck, usePopout, usePopoutContainer, useWindowConfig } from '@ai-matrx/summon/window-host';
 
-type ResizeEdge = "e" | "s" | "se" | "w" | "sw" | "n" | "ne" | "nw";
+/** The edge or corner a resize handle grabs (design-system window-drag). */
+type ResizeEdge = ResizeEdge$1;
 /** Where to place the window when it first opens. */
 type WindowPosition = "center" | "top-right" | "top-left" | "bottom-right" | "bottom-left";
 declare function resetDefaultWindowCascade(): void;

package/dist/window.d.ts

@@ -1,10 +1,12 @@
 import * as react from 'react';
 import react__default, { ComponentType, SVGAttributes, ReactNode } from 'react';
 import { WindowRect, WindowPersistenceRegistration, MobilePresentation } from '@ai-matrx/summon';
+import { ResizeEdge as ResizeEdge$1 } from '@ai-matrx/design-system';
 import { TraySnapshotCapture } from '@ai-matrx/summon/window-host';
 export { DEFAULT_ESCAPE_YIELD_SELECTOR, DEFAULT_MOBILE_TOP_OFFSET, DEFAULT_WINDOW_CONFIG, PopoutContext, PopoutContextValue, PopoutMode, TrayPreviewContext, TrayPreviewEntry, TraySnapshotCapture, WindowConfig, WindowSelectionSurface, WindowSelectionSurfaceProps, WindowTraySync, WindowsProvider, WindowsProviderProps, getTrayPreviewEntry, registerTrayPreview, resetTrayPreviews, useOverlaySurfaceRenderAck, usePopout, usePopoutContainer, useWindowConfig } from '@ai-matrx/summon/window-host';
 
-type ResizeEdge = "e" | "s" | "se" | "w" | "sw" | "n" | "ne" | "nw";
+/** The edge or corner a resize handle grabs (design-system window-drag). */
+type ResizeEdge = ResizeEdge$1;
 /** Where to place the window when it first opens. */
 type WindowPosition = "center" | "top-right" | "top-left" | "bottom-right" | "bottom-left";
 declare function resetDefaultWindowCascade(): void;

package/dist/window.js

@@ -396,21 +396,11 @@ function resolveAutoOpenPlacement(args) {
 }
 
 // src/window/useWindowPanel.ts
-import { holdDragCursor } from "@ai-matrx/design-system";
+import { RESIZE_EDGE_CURSOR, resizeRect, startPointerDrag } from "@ai-matrx/design-system";
 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;
@@ -608,86 +598,53 @@ function useWindowPanel(opts = {}) {
       dispatch(updateWindowTitle({ id, title: opts.title }));
     }
   }, [id, opts.title, dispatch]);
-  const dragStart = useRef(null);
   const onTriggerPopout = opts.onTriggerPopout;
   const onTriggerPopoutRef = useRef(onTriggerPopout);
   useEffect(() => {
     onTriggerPopoutRef.current = onTriggerPopout;
   }, [onTriggerPopout]);
+  const gestureRef = useRef(null);
+  useEffect(() => () => gestureRef.current?.cancel(), []);
   const onDragStart = useCallback(
     (e) => {
       e.preventDefault();
       dispatch(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 = 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(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(
-            setPopoutCandidate({ id: result.state.isCandidate ? id : null })
+      gestureRef.current?.cancel();
+      gestureRef.current = startPointerDrag(e, {
+        onStart: () => setIsInteracting(true),
+        onMove: ({ dx, dy }, ev) => {
+          dispatch(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(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 } = safeViewportDims();
-          if (!degenerate) {
-            dispatch(
-              clampWindowRect({ id, viewportWidth: vw, viewportHeight: vh })
-            );
+          if (result.state.isCandidate !== dragOutState.isCandidate) {
+            dispatch(setPopoutCandidate({ id: result.state.isCandidate ? id : null }));
           }
+          dragOutState = result.state;
+        },
+        onEnd: () => {
+          gestureRef.current = null;
+          const wasCandidate = dragOutState.isCandidate;
+          setIsInteracting(false);
+          if (popoutEnabled && wasCandidate) dispatch(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 } = safeViewportDims();
+          if (!degenerate) dispatch(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]
   );
@@ -697,44 +654,21 @@ function useWindowPanel(opts = {}) {
       e.stopPropagation();
       dispatch(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 = 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 = startPointerDrag(e, {
+        // THE CURSOR LAW: the edge's resize cursor holds on <html> until release.
+        cursor: RESIZE_EDGE_CURSOR[edge],
+        onStart: () => setIsInteracting(true),
+        onMove: ({ dx, dy }) => {
+          const rect2 = resizeRect(origin, edge, dx, dy, { minWidth, minHeight, maxWidth, maxHeight });
+          dispatch(updateWindowRect({ id, rect: { x: rect2.x, y: rect2.y, width: rect2.width, height: rect2.height } }));
+        },
+        onEnd: () => {
+          gestureRef.current = null;
+          setIsInteracting(false);
         }
-        dispatch(
-          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]
   );
@@ -779,20 +713,15 @@ function useWindowPanel(opts = {}) {
   };
 }
 
-// src/window/utils/useIsClient.ts
-import { useSyncExternalStore } from "react";
-var subscribe = () => () => {
-};
-function useIsClient() {
-  return useSyncExternalStore(subscribe, () => true, () => false);
-}
+// src/window/WindowPanel.tsx
+import { useIsClient } from "@ai-matrx/kit/client-lazy";
 
 // src/window/utils/useDebugFlag.ts
-import { useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useSyncExternalStore } from "react";
 var noSubscribe = () => () => {
 };
 function useDebugFlag(debug) {
-  return useSyncExternalStore2(
+  return useSyncExternalStore(
     debug.subscribe ? (listener) => debug.subscribe?.(listener) ?? (() => {
     }) : noSubscribe,
     () => debug.enabled(),
@@ -1379,7 +1308,7 @@ import {
 } from "@ai-matrx/summon";
 
 // src/window/popout/popoutWindowMap.ts
-import { useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { useSyncExternalStore as useSyncExternalStore2 } from "react";
 import { globalSlot as globalSlot3 } from "@ai-matrx/kit/global-slot";
 var slot = () => globalSlot3("ai-matrx.summon.window.popoutWindows", () => ({ map: /* @__PURE__ */ new Map(), listeners: /* @__PURE__ */ new Set() }));
 function notify() {
@@ -1412,7 +1341,7 @@ function subscribePopoutWindowMap(listener) {
   };
 }
 function usePopoutWindowRef(id) {
-  return useSyncExternalStore3(
+  return useSyncExternalStore2(
     subscribePopoutWindowMap,
     () => getPopoutWindow(id),
     // SSR snapshot — popouts are never present during SSR.
@@ -2001,7 +1930,7 @@ async function isFlatImage(blob) {
 import { getOverlayMeta as getOverlayMeta2 } from "@ai-matrx/summon";
 
 // src/window/tray/TrayChipPreview.tsx
-import { Component, memo, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { Component, memo, useSyncExternalStore as useSyncExternalStore3 } from "react";
 import { cn as cn8 } from "@ai-matrx/design-system/cn";
 import { getOverlayMeta, selectOverlayData, DEFAULT_INSTANCE_ID } from "@ai-matrx/summon";
 import { useSummonPorts as useSummonPorts2, useSummonSelector as useSummonSelector4 } from "@ai-matrx/summon/react";
@@ -2082,7 +2011,7 @@ var TraySnapshotImage = memo(function TraySnapshotImage2({
   registryLabel,
   title
 }) {
-  const snapshot = useSyncExternalStore4(
+  const snapshot = useSyncExternalStore3(
     subscribeTraySnapshotMap,
     () => getTraySnapshot(snapshotKey),
     () => null