@ai-matrx/summon 0.1.17 → 0.1.19

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

@@ -52,39 +52,13 @@ function glyph(children) {
     );
   };
 }
-var XIcon = glyph(/* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
-  /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
-] }));
 var MinusIcon = glyph(/* @__PURE__ */ jsx("path", { d: "M5 12h14" }));
-var Maximize2Icon = glyph(/* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsx("path", { d: "M15 3h6v6" }),
-  /* @__PURE__ */ jsx("path", { d: "m21 3-7 7" }),
-  /* @__PURE__ */ jsx("path", { d: "m3 21 7-7" }),
-  /* @__PURE__ */ jsx("path", { d: "M9 21H3v-6" })
-] }));
-var Minimize2Icon = glyph(/* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsx("path", { d: "m14 10 7-7" }),
-  /* @__PURE__ */ jsx("path", { d: "M20 10h-6V4" }),
-  /* @__PURE__ */ jsx("path", { d: "m3 21 7-7" }),
-  /* @__PURE__ */ jsx("path", { d: "M4 14h6v6" })
-] }));
 var RectangleVerticalIcon = glyph(/* @__PURE__ */ jsx("rect", { width: "12", height: "20", x: "6", y: "2", rx: "2" }));
 var PanelLeftCloseIcon = glyph(/* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
   /* @__PURE__ */ jsx("path", { d: "M9 3v18" }),
   /* @__PURE__ */ jsx("path", { d: "m16 15-3-3 3-3" })
 ] }));
-var PanelLeftIcon = glyph(/* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
-  /* @__PURE__ */ jsx("path", { d: "M9 3v18" })
-] }));
-var AppWindowIcon = glyph(/* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
-  /* @__PURE__ */ jsx("path", { d: "M10 4v4" }),
-  /* @__PURE__ */ jsx("path", { d: "M2 8h20" }),
-  /* @__PURE__ */ jsx("path", { d: "M6 4v4" })
-] }));
 var SaveIcon = glyph(
   /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("path", { d: "M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" }),
@@ -92,19 +66,15 @@ var SaveIcon = glyph(
     /* @__PURE__ */ jsx("path", { d: "M7 3v4a1 1 0 0 0 1 1h7" })
   ] })
 );
-var TriangleAlertIcon = glyph(
-  /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
-    /* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
-    /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
-  ] })
-);
 var ArrowLeftToLineIcon = glyph(/* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx("path", { d: "M3 19V5" }),
   /* @__PURE__ */ jsx("path", { d: "m13 6-6 6 6 6" }),
   /* @__PURE__ */ jsx("path", { d: "M7 12h14" })
 ] }));
 
+// src/window/WindowPanel.tsx
+import { AppWindowIcon, Maximize2Icon, Minimize2Icon, PanelLeftIcon as PanelLeftIcon2, XIcon as XIcon5 } from "@ai-matrx/design-system/icons";
+
 // src/window/LayoutIcon.tsx
 import { cn } from "@ai-matrx/design-system/cn";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -396,21 +366,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 +568,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 +624,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 +683,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(),
@@ -869,6 +768,7 @@ import {
 } from "@ai-matrx/design-system";
 import { Button } from "@ai-matrx/design-system";
 import { cn as cn3 } from "@ai-matrx/design-system/cn";
+import { PanelLeftIcon, XIcon } from "@ai-matrx/design-system/icons";
 
 // src/window/chrome/MobileTitleRow.tsx
 import { cn as cn2 } from "@ai-matrx/design-system/cn";
@@ -1064,6 +964,7 @@ import { createPortal } from "react-dom";
 import { FloatingLayer, useFloatingLayerZIndex } from "@ai-matrx/design-system";
 import { Button as Button2 } from "@ai-matrx/design-system";
 import { cn as cn4 } from "@ai-matrx/design-system/cn";
+import { XIcon as XIcon2 } from "@ai-matrx/design-system/icons";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function MobileCardSurface({
   title,
@@ -1120,7 +1021,7 @@ function MobileCardSurface({
                     className: "h-11 w-11 shrink-0",
                     "aria-label": "Close",
                     onClick: onClose,
-                    children: /* @__PURE__ */ jsx5(XIcon, { className: "w-3.5 h-3.5" })
+                    children: /* @__PURE__ */ jsx5(XIcon2, { className: "w-3.5 h-3.5" })
                   }
                 ),
                 children: /* @__PURE__ */ jsx5(MobileWindowTitle, { title })
@@ -1213,6 +1114,9 @@ function DebugStrip({ rect, zIndex }) {
   ] });
 }
 
+// src/window/chrome/MobileHeader.tsx
+import { XIcon as XIcon3 } from "@ai-matrx/design-system/icons";
+
 // src/window/chrome/chromeClasses.ts
 import { cn as cn5 } from "@ai-matrx/design-system/cn";
 var WINDOW_CHROME_INTERACTIVE = "[&_button:not(:disabled)]:cursor-pointer [&_a]:cursor-pointer [&_[role=button]:not([aria-disabled=true])]:cursor-pointer [&_summary]:cursor-pointer [&_label:has(input,[role=checkbox],[role=radio])]:cursor-pointer";
@@ -1241,7 +1145,7 @@ function MobileWindowHeader({
         className: "flex h-11 w-11 shrink-0 cursor-pointer items-center justify-center",
         onClick: onClose,
         "aria-label": "Close",
-        children: /* @__PURE__ */ jsx7("span", { className: "flex h-6 w-6 items-center justify-center rounded-full matrx-window-light-close", children: /* @__PURE__ */ jsx7(XIcon, { className: "h-2.5 w-2.5 matrx-window-light-glyph" }) })
+        children: /* @__PURE__ */ jsx7("span", { className: "flex h-6 w-6 items-center justify-center rounded-full matrx-window-light-close", children: /* @__PURE__ */ jsx7(XIcon3, { className: "h-2.5 w-2.5 matrx-window-light-glyph" }) })
       }
     ),
     onMinimize && /* @__PURE__ */ jsx7(
@@ -1275,6 +1179,7 @@ function MobileWindowHeader({
 
 // src/window/chrome/DeprecationBanner.tsx
 import { useState as useState4 } from "react";
+import { AlertTriangleIcon, XIcon as XIcon4 } from "@ai-matrx/design-system/icons";
 import { cn as cn6 } from "@ai-matrx/design-system/cn";
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function DeprecationBanner({
@@ -1293,7 +1198,7 @@ function DeprecationBanner({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx8(TriangleAlertIcon, { className: "w-3.5 h-3.5 mt-[1px] shrink-0" }),
+        /* @__PURE__ */ jsx8(AlertTriangleIcon, { className: "w-3.5 h-3.5 mt-[1px] shrink-0" }),
         /* @__PURE__ */ jsx8("span", { className: "flex-1 break-words", children: message }),
         /* @__PURE__ */ jsx8(
           "button",
@@ -1302,7 +1207,7 @@ function DeprecationBanner({
             "aria-label": "Dismiss deprecation notice",
             className: "shrink-0 rounded hover:bg-destructive/20 p-0.5 transition-colors",
             onClick: () => setDismissed(true),
-            children: /* @__PURE__ */ jsx8(XIcon, { className: "w-3 h-3" })
+            children: /* @__PURE__ */ jsx8(XIcon4, { className: "w-3 h-3" })
           }
         )
       ]
@@ -1379,7 +1284,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 +1317,7 @@ function subscribePopoutWindowMap(listener) {
   };
 }
 function usePopoutWindowRef(id) {
-  return useSyncExternalStore3(
+  return useSyncExternalStore2(
     subscribePopoutWindowMap,
     () => getPopoutWindow(id),
     // SSR snapshot — popouts are never present during SSR.
@@ -2001,7 +1906,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 +1987,7 @@ var TraySnapshotImage = memo(function TraySnapshotImage2({
   registryLabel,
   title
 }) {
-  const snapshot = useSyncExternalStore4(
+  const snapshot = useSyncExternalStore3(
     subscribeTraySnapshotMap,
     () => getTraySnapshot(snapshotKey),
     () => null
@@ -3318,7 +3223,7 @@ function TrafficLightGroup({
       TrafficLight,
       {
         color: "red",
-        icon: /* @__PURE__ */ jsx14(XIcon, { className: "w-2 h-2 matrx-window-light-glyph" }),
+        icon: /* @__PURE__ */ jsx14(XIcon5, { className: "w-2 h-2 matrx-window-light-glyph" }),
         onClick: onClose ?? void 0,
         disabled: !onClose,
         "aria-label": "Close"
@@ -3367,7 +3272,7 @@ function TrafficLightGroup({
         onClick: onToggleSidebar,
         title: sidebarOpen ? "Hide sidebar" : "Show sidebar",
         "aria-label": sidebarOpen ? "Hide sidebar" : "Show sidebar",
-        children: sidebarOpen ? /* @__PURE__ */ jsx14(PanelLeftCloseIcon, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx14(PanelLeftIcon, { className: "w-3.5 h-3.5" })
+        children: sidebarOpen ? /* @__PURE__ */ jsx14(PanelLeftCloseIcon, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx14(PanelLeftIcon2, { className: "w-3.5 h-3.5" })
       }
     )
   ] });