@tutti-os/workbench-surface 0.0.49 → 0.0.51

package/dist/index.d.ts

@@ -451,6 +451,10 @@ interface WorkbenchHostLaunchResult {
         payload?: unknown;
         type: string;
     } | null;
+    cascadeOffset?: {
+        x: number;
+        y: number;
+    };
     defaultFrame?: WorkbenchFrame;
     displayMode?: WorkbenchDisplayMode;
     dockEntryId?: string;

package/dist/index.js

@@ -5270,7 +5270,14 @@ function createWorkbenchSnapshotFromState(state, options = {}) {
 
 // src/core/placement.ts
 var WORKBENCH_WINDOW_CASCADE_OFFSET = 28;
+var WORKBENCH_WINDOW_CASCADE_FALLBACK_LIMIT = 12;
+var WORKBENCH_WINDOW_CASCADE_POSITION_TOLERANCE = 4;
 function resolveWorkbenchCascadedRect(input) {
+  const hasCustomCascadeOffset = input.cascadeOffset !== void 0;
+  const cascadeOffset = input.cascadeOffset ?? {
+    x: WORKBENCH_WINDOW_CASCADE_OFFSET,
+    y: WORKBENCH_WINDOW_CASCADE_OFFSET
+  };
   const activeNode = input.existingNodes.find(
     (node) => node.id === input.currentNodeStack.at(-1)
   ) ?? input.existingNodes.at(-1);
@@ -5282,18 +5289,120 @@ function resolveWorkbenchCascadedRect(input) {
       input.sizeConstraints
     );
   }
+  const preferredCandidate = createWorkbenchCascadeCandidate({
+    input,
+    x: activeNode.frame.x + cascadeOffset.x,
+    y: activeNode.frame.y + cascadeOffset.y
+  });
+  if ((!hasCustomCascadeOffset || input.existingNodes.length <= 1) && !workbenchCascadeCandidateMatchesExisting(preferredCandidate, input)) {
+    return preferredCandidate;
+  }
+  const candidateOrigins = [
+    {
+      x: activeNode.frame.x + cascadeOffset.x,
+      y: activeNode.frame.y + cascadeOffset.y
+    },
+    {
+      x: activeNode.frame.x - cascadeOffset.x,
+      y: activeNode.frame.y + cascadeOffset.y
+    },
+    {
+      x: activeNode.frame.x + cascadeOffset.x,
+      y: activeNode.frame.y - cascadeOffset.y
+    },
+    {
+      x: activeNode.frame.x - cascadeOffset.x,
+      y: activeNode.frame.y - cascadeOffset.y
+    }
+  ];
+  for (let index = 1; index <= WORKBENCH_WINDOW_CASCADE_FALLBACK_LIMIT; index += 1) {
+    candidateOrigins.push(
+      {
+        x: input.preferredFrame.x + cascadeOffset.x * index,
+        y: input.preferredFrame.y + cascadeOffset.y * index
+      },
+      {
+        x: input.preferredFrame.x - cascadeOffset.x * index,
+        y: input.preferredFrame.y + cascadeOffset.y * index
+      },
+      {
+        x: input.preferredFrame.x + cascadeOffset.x * index,
+        y: input.preferredFrame.y - cascadeOffset.y * index
+      },
+      {
+        x: input.preferredFrame.x - cascadeOffset.x * index,
+        y: input.preferredFrame.y - cascadeOffset.y * index
+      }
+    );
+  }
+  return resolveBestWorkbenchCascadeCandidate({
+    candidateOrigins,
+    fallbackFrame: preferredCandidate,
+    input
+  });
+}
+function createWorkbenchCascadeCandidate(input) {
   return clampWorkbenchRect(
     {
-      x: activeNode.frame.x + WORKBENCH_WINDOW_CASCADE_OFFSET,
-      y: activeNode.frame.y + WORKBENCH_WINDOW_CASCADE_OFFSET,
-      width: input.preferredFrame.width,
-      height: input.preferredFrame.height
+      x: input.x,
+      y: input.y,
+      width: input.input.preferredFrame.width,
+      height: input.input.preferredFrame.height
     },
-    input.surfaceSize,
-    input.constraints,
-    input.sizeConstraints
+    input.input.surfaceSize,
+    input.input.constraints,
+    input.input.sizeConstraints
   );
 }
+function workbenchCascadeCandidateMatchesExisting(candidate, input) {
+  return input.existingNodes.some((node) => {
+    return Math.abs(node.frame.x - candidate.x) <= WORKBENCH_WINDOW_CASCADE_POSITION_TOLERANCE && Math.abs(node.frame.y - candidate.y) <= WORKBENCH_WINDOW_CASCADE_POSITION_TOLERANCE;
+  });
+}
+function resolveBestWorkbenchCascadeCandidate(input) {
+  let bestFrame = null;
+  let bestScore = Number.POSITIVE_INFINITY;
+  const seen = /* @__PURE__ */ new Set();
+  for (const candidate of input.candidateOrigins) {
+    const frame = createWorkbenchCascadeCandidate({
+      input: input.input,
+      x: candidate.x,
+      y: candidate.y
+    });
+    const key = `${frame.x}:${frame.y}:${frame.width}:${frame.height}`;
+    if (seen.has(key)) {
+      continue;
+    }
+    seen.add(key);
+    const score = scoreWorkbenchCascadeCandidate(frame, input.input);
+    if (score < bestScore) {
+      bestFrame = frame;
+      bestScore = score;
+    }
+  }
+  return bestFrame ?? input.fallbackFrame;
+}
+function scoreWorkbenchCascadeCandidate(candidate, input) {
+  const overlapArea = input.existingNodes.reduce((total, node) => {
+    return total + workbenchFrameIntersectionArea(candidate, node.frame);
+  }, 0);
+  const positionCollisionPenalty = workbenchCascadeCandidateMatchesExisting(
+    candidate,
+    input
+  ) ? candidate.width * candidate.height : 0;
+  return overlapArea + positionCollisionPenalty;
+}
+function workbenchFrameIntersectionArea(a, b) {
+  const width = Math.max(
+    0,
+    Math.min(a.x + a.width, b.x + b.width) - Math.max(a.x, b.x)
+  );
+  const height = Math.max(
+    0,
+    Math.min(a.y + a.height, b.y + b.height) - Math.max(a.y, b.y)
+  );
+  return width * height;
+}
 
 // src/host/nodeIdentity.ts
 function createWorkbenchHostProjectedNodeId(input) {
@@ -5405,6 +5514,7 @@ function resolveWorkbenchLaunchedHostNodeFrame(input) {
       existingSameTypeNodes.map((node) => node.id)
     );
     return resolveWorkbenchCascadedRect({
+      cascadeOffset: input.result.cascadeOffset,
       currentNodeStack: input.currentState.nodeStack.filter(
         (nodeId) => existingSameTypeNodeIds.has(nodeId)
       ),
@@ -5421,6 +5531,7 @@ function resolveWorkbenchLaunchedHostNodeFrame(input) {
     });
   }
   return resolveWorkbenchCascadedRect({
+    cascadeOffset: input.result.cascadeOffset,
     currentNodeStack: input.currentState.nodeStack,
     existingNodes: input.currentState.nodes,
     preferredFrame: responsivePreferredFrame,
@@ -6712,7 +6823,7 @@ var WorkbenchHostSessionController = class {
   }
   applyClosedDockWindowFrame(result) {
     const dockEntryId = result.dockEntryId?.trim();
-    if (!dockEntryId) {
+    if (!dockEntryId || result.reuseDockEntryNode === false) {
       return result;
     }
     const entry = this.closedDockWindowFrameEntries.get(
@@ -7196,6 +7307,7 @@ function resolveDockMagnificationViewportBounds(viewportRect, dockPlacement) {
 function resolveDockMagnificationVisibleHitBounds({
   dockPlacement,
   hitBounds,
+  mainAxisEdgePadding = 0,
   viewportRect
 }) {
   if (!hitBounds || !viewportRect) {
@@ -7208,14 +7320,41 @@ function resolveDockMagnificationVisibleHitBounds({
   const visibleBounds = {
     crossEnd: Math.min(hitBounds.crossEnd, viewportBounds.crossEnd),
     crossStart: Math.max(hitBounds.crossStart, viewportBounds.crossStart),
-    mainEnd: Math.min(hitBounds.mainEnd, viewportBounds.mainEnd),
-    mainStart: Math.max(hitBounds.mainStart, viewportBounds.mainStart)
+    mainEnd: Math.min(
+      hitBounds.mainEnd + mainAxisEdgePadding,
+      viewportBounds.mainEnd + mainAxisEdgePadding
+    ),
+    mainStart: Math.max(
+      hitBounds.mainStart - mainAxisEdgePadding,
+      viewportBounds.mainStart - mainAxisEdgePadding
+    )
   };
   if (visibleBounds.mainStart > visibleBounds.mainEnd || visibleBounds.crossStart > visibleBounds.crossEnd) {
     return null;
   }
   return visibleBounds;
 }
+function resolveDockMagnificationVisibleSlotRects({
+  slotRects,
+  viewportRect
+}) {
+  if (!viewportRect) {
+    return [...slotRects];
+  }
+  const visibleSlotRects = [];
+  for (const rect of slotRects) {
+    const visibleRect = {
+      bottom: Math.min(rect.bottom, viewportRect.bottom),
+      left: Math.max(rect.left, viewportRect.left),
+      right: Math.min(rect.right, viewportRect.right),
+      top: Math.max(rect.top, viewportRect.top)
+    };
+    if (visibleRect.left <= visibleRect.right && visibleRect.top <= visibleRect.bottom) {
+      visibleSlotRects.push(visibleRect);
+    }
+  }
+  return visibleSlotRects;
+}
 function isDockMagnificationPointInsideHitBounds({
   clientX,
   clientY,
@@ -7229,6 +7368,13 @@ function isDockMagnificationPointInsideHitBounds({
   const crossAxis = dockPlacement === "left" ? clientX : clientY;
   return mainAxis >= hitBounds.mainStart && mainAxis <= hitBounds.mainEnd && crossAxis >= hitBounds.crossStart && crossAxis <= hitBounds.crossEnd;
 }
+function isDockMagnificationPointInsideSlotRect({
+  clientX,
+  clientY,
+  rect
+}) {
+  return clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
+}
 
 // src/host/dockMagnification.ts
 var DOCK_ICON_BASE_SIZE = 43.2;
@@ -7243,6 +7389,9 @@ var MAX_MAGNIFICATION_STEP_SECONDS = 1 / 30;
 var MAGNIFICATION_INFLUENCE_PADDING = 8;
 var DOCK_MAGNIFICATION_ENTRY_RAMP_MS = 90;
 var DOCK_MAGNIFICATION_CROSS_AXIS_PADDING = 8;
+var DOCK_MAGNIFICATION_MAIN_AXIS_EDGE_PADDING = DOCK_ICON_BASE_SIZE / 2;
+var DOCK_MAGNIFICATION_AMBIENT_EDGE_RANGE = 180;
+var DOCK_MAGNIFICATION_AMBIENT_VIEWPORT_PADDING = 8;
 var dockMagnificationShellBySlot = /* @__PURE__ */ new WeakMap();
 var globalPointerListenerOptions = {
   capture: true,
@@ -7432,6 +7581,26 @@ function clearDockSlotMagnification(slotElement, appliedStylesRef) {
   const shell = resolveDockMagnificationShell(slotElement);
   shell?.style.removeProperty("transform");
 }
+function isPointNearDockScreenEdge({
+  clientX,
+  clientY,
+  dockPlacement
+}) {
+  if (typeof window === "undefined") {
+    return true;
+  }
+  return dockPlacement === "left" ? clientX <= DOCK_MAGNIFICATION_AMBIENT_EDGE_RANGE : window.innerHeight - clientY <= DOCK_MAGNIFICATION_AMBIENT_EDGE_RANGE;
+}
+function isPointNearDockViewport({
+  clientX,
+  clientY,
+  dockPlacement,
+  viewportRect
+}) {
+  const horizontalPadding = dockPlacement === "bottom" ? DOCK_MAGNIFICATION_MAIN_AXIS_EDGE_PADDING : DOCK_MAGNIFICATION_AMBIENT_VIEWPORT_PADDING;
+  const verticalPadding = dockPlacement === "left" ? DOCK_MAGNIFICATION_MAIN_AXIS_EDGE_PADDING : DOCK_MAGNIFICATION_AMBIENT_VIEWPORT_PADDING;
+  return clientX >= viewportRect.left - horizontalPadding && clientX <= viewportRect.right + horizontalPadding && clientY >= viewportRect.top - verticalPadding && clientY <= viewportRect.bottom + verticalPadding;
+}
 function useDockMagnification({
   dockPlacement,
   dockRootRef,
@@ -7449,6 +7618,7 @@ function useDockMagnification({
   const entryRampStartedAtRef = useRef5(null);
   const restCentersRef = useRef5(null);
   const hitBoundsRef = useRef5(null);
+  const visibleSlotRectsRef = useRef5(null);
   const slotOrderRef = useRef5([]);
   const magnifyActiveRef = useRef5(false);
   const globalPointerTrackerRef = useRef5(null);
@@ -7498,18 +7668,53 @@ function useDockMagnification({
       centers.set(anchorKey, center);
     }
     slotOrderRef.current = order;
+    const visibleViewportRect = viewportRect ? {
+      bottom: viewportRect.bottom,
+      left: viewportRect.left,
+      right: viewportRect.right,
+      top: viewportRect.top
+    } : null;
     hitBoundsRef.current = resolveDockMagnificationVisibleHitBounds({
       dockPlacement,
       hitBounds: resolveDockMagnificationHitBounds(slotRects, dockPlacement),
-      viewportRect: viewportRect ? {
-        bottom: viewportRect.bottom,
-        left: viewportRect.left,
-        right: viewportRect.right,
-        top: viewportRect.top
-      } : null
+      mainAxisEdgePadding: DOCK_MAGNIFICATION_MAIN_AXIS_EDGE_PADDING,
+      viewportRect: visibleViewportRect
+    });
+    visibleSlotRectsRef.current = resolveDockMagnificationVisibleSlotRects({
+      slotRects,
+      viewportRect: visibleViewportRect
     });
     restCentersRef.current = centers;
   }, [dockPlacement, dockViewportRef, slotRefs]);
+  const isPointerInsideAnyVisibleDockSlot = useCallback8(
+    (clientX, clientY) => {
+      for (const rect of visibleSlotRectsRef.current ?? []) {
+        if (isDockMagnificationPointInsideSlotRect({
+          clientX,
+          clientY,
+          rect
+        })) {
+          return true;
+        }
+      }
+      return false;
+    },
+    []
+  );
+  const ensureDockMagnificationGeometry = useCallback8(() => {
+    if (restCentersRef.current === null || hitBoundsRef.current === null || visibleSlotRectsRef.current === null) {
+      captureRestCenters();
+    }
+  }, [captureRestCenters]);
+  const isPointerInsideDockMagnificationTarget = useCallback8(
+    (clientX, clientY) => isDockMagnificationPointInsideHitBounds({
+      clientX,
+      clientY,
+      dockPlacement,
+      hitBounds: hitBoundsRef.current
+    }) || isPointerInsideAnyVisibleDockSlot(clientX, clientY),
+    [dockPlacement, isPointerInsideAnyVisibleDockSlot]
+  );
   const runAnimationFrame = useCallback8(
     (frameTime) => {
       if (pendingPointerAxisRef.current !== null) {
@@ -7607,6 +7812,7 @@ function useDockMagnification({
         entryRampStartedAtRef.current = null;
         restCentersRef.current = null;
         hitBoundsRef.current = null;
+        visibleSlotRectsRef.current = null;
         slotOrderRef.current = [];
         setMagnifyActive(false);
       }
@@ -7656,15 +7862,8 @@ function useDockMagnification({
   }, [clearTrackedPointer, stopGlobalPointerTracking]);
   const handlePointerMove = useCallback8(
     (clientX, clientY) => {
-      if (restCentersRef.current === null) {
-        captureRestCenters();
-      }
-      if (!isDockMagnificationPointInsideHitBounds({
-        clientX,
-        clientY,
-        dockPlacement,
-        hitBounds: hitBoundsRef.current
-      })) {
+      ensureDockMagnificationGeometry();
+      if (!isPointerInsideDockMagnificationTarget(clientX, clientY)) {
         stopGlobalPointerTracking();
         clearTrackedPointer();
         return;
@@ -7677,9 +7876,10 @@ function useDockMagnification({
       scheduleAnimation();
     },
     [
-      captureRestCenters,
       clearTrackedPointer,
       dockPlacement,
+      ensureDockMagnificationGeometry,
+      isPointerInsideDockMagnificationTarget,
       scheduleAnimation,
       setMagnifyActive,
       startGlobalPointerTracking,
@@ -7688,6 +7888,87 @@ function useDockMagnification({
   );
   handleGlobalPointerMoveRef.current = handlePointerMove;
   handleGlobalPointerCancelRef.current = handleGlobalPointerCancel;
+  useEffect6(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+    let animationFrame = null;
+    let latestPoint = null;
+    const clearAmbientPointerSample = () => {
+      latestPoint = null;
+      if (animationFrame !== null) {
+        cancelAnimationFrame(animationFrame);
+        animationFrame = null;
+      }
+    };
+    const runAmbientPointerMove = () => {
+      animationFrame = null;
+      const point = latestPoint;
+      latestPoint = null;
+      if (!point || magnifyActiveRef.current) {
+        return;
+      }
+      const viewportRect = dockViewportRef.current?.getBoundingClientRect();
+      if (!viewportRect) {
+        return;
+      }
+      const visibleViewportRect = {
+        bottom: viewportRect.bottom,
+        left: viewportRect.left,
+        right: viewportRect.right,
+        top: viewportRect.top
+      };
+      if (!isPointNearDockViewport({
+        clientX: point.clientX,
+        clientY: point.clientY,
+        dockPlacement,
+        viewportRect: visibleViewportRect
+      })) {
+        return;
+      }
+      ensureDockMagnificationGeometry();
+      if (isPointerInsideDockMagnificationTarget(point.clientX, point.clientY)) {
+        handlePointerMove(point.clientX, point.clientY);
+      }
+    };
+    const handleAmbientPointerMove = (event) => {
+      if (magnifyActiveRef.current) {
+        clearAmbientPointerSample();
+        return;
+      }
+      if (!isPointNearDockScreenEdge({
+        clientX: event.clientX,
+        clientY: event.clientY,
+        dockPlacement
+      })) {
+        clearAmbientPointerSample();
+        return;
+      }
+      latestPoint = { clientX: event.clientX, clientY: event.clientY };
+      if (animationFrame === null) {
+        animationFrame = requestAnimationFrame(runAmbientPointerMove);
+      }
+    };
+    document.addEventListener(
+      "pointermove",
+      handleAmbientPointerMove,
+      globalPointerListenerOptions
+    );
+    return () => {
+      document.removeEventListener(
+        "pointermove",
+        handleAmbientPointerMove,
+        globalPointerListenerOptions
+      );
+      clearAmbientPointerSample();
+    };
+  }, [
+    dockPlacement,
+    dockViewportRef,
+    ensureDockMagnificationGeometry,
+    handlePointerMove,
+    isPointerInsideDockMagnificationTarget
+  ]);
   const handlePointerLeave = useCallback8(() => {
     pendingPointerAxisRef.current = null;
     pointerAxisRef.current = null;
@@ -7699,6 +7980,7 @@ function useDockMagnification({
       restCentersRef.current?.delete(anchorKey);
       appliedStylesRef.current.delete(anchorKey);
       hitBoundsRef.current = null;
+      visibleSlotRectsRef.current = null;
       slotOrderRef.current = slotOrderRef.current.filter(
         (key) => key !== anchorKey
       );
@@ -7727,6 +8009,7 @@ function useDockMagnification({
     appliedStylesRef.current.clear();
     restCentersRef.current = null;
     hitBoundsRef.current = null;
+    visibleSlotRectsRef.current = null;
     slotOrderRef.current = [];
     pointerAxisRef.current = null;
     pendingPointerAxisRef.current = null;