@tutti-os/workbench-surface 0.0.17 → 0.0.18

package/dist/index.js

@@ -1708,9 +1708,16 @@ function WorkbenchDockFrame({
   const nodes = useWorkbenchSelector(
     selectDockNodes
   );
+  const minimizedNodesWithPending = useMemo2(
+    () => mergePendingMinimizedDockNode(
+      nodes.filter((node) => node.isMinimized),
+      genie.pendingMinimizedNode
+    ),
+    [genie.pendingMinimizedNode, nodes]
+  );
   const minimizedNodes = useMemo2(
-    () => nodes.filter((node) => node.isMinimized),
-    [nodes]
+    () => minimizedNodesWithPending.filter((node) => node.isMinimized),
+    [minimizedNodesWithPending]
   );
   const focusedNodeId = useWorkbenchSelector(
     (state) => selectFocusedWorkbenchNode(state)?.id ?? null
@@ -1752,6 +1759,9 @@ function WorkbenchDockFrame({
             },
             shouldAnimateMinimizedDockEnter: (nodeID) => {
               return genie.shouldAnimateMinimizedDockEnter(nodeID);
+            },
+            isPendingMinimizedDockNode: (nodeID) => {
+              return genie.isPendingMinimizedDockNode(nodeID);
             }
           },
           minimizedNodes,
@@ -1761,6 +1771,16 @@ function WorkbenchDockFrame({
     )
   ] });
 }
+function mergePendingMinimizedDockNode(nodes, pendingNode) {
+  if (!pendingNode) {
+    return nodes;
+  }
+  const existingNode = nodes.find((node) => node.id === pendingNode.id);
+  if (existingNode?.isMinimized) {
+    return nodes;
+  }
+  return [...nodes.filter((node) => node.id !== pendingNode.id), pendingNode];
+}
 
 // src/react/WorkbenchNodeLayer.tsx
 import { memo, useMemo as useMemo3 } from "react";
@@ -2635,6 +2655,7 @@ function renderGenieScanlines(context, viewportWidth, viewportHeight, frame) {
 // src/react/useWorkbenchGenieAnimation.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
 var genieDurationMs = 400;
+var scaleMinimizeDurationMs = 220;
 var genieMaxDevicePixelRatio = 2;
 var genieSnapshotScale = 1;
 var minimizedDockSlotEnterAnimationMs = 720;
@@ -2864,20 +2885,16 @@ async function captureWorkbenchNodePreviewImage(nodeID, options = {}) {
   writeCachedWorkbenchNodePreviewImage(nodeID, previewImageUrl);
   return previewImageUrl;
 }
-async function captureWorkbenchNodePreviewImageForNode(node, input = {}) {
+async function captureProvidedWorkbenchNodePreviewImageForNode(node, input = {}) {
   const previewImageUrl = await Promise.resolve(
     input.captureNodePreviewImage?.(node) ?? null
   ).catch(() => null);
-  if (previewImageUrl) {
-    writeCachedWorkbenchNodePreviewImage(node.id, previewImageUrl);
-    persistWorkbenchNodePreviewImage(node, previewImageUrl, input);
-    return previewImageUrl;
+  if (!previewImageUrl) {
+    return null;
   }
-  const capturedPreviewImageUrl = await captureWorkbenchNodePreviewImage(
-    node.id
-  );
-  persistWorkbenchNodePreviewImage(node, capturedPreviewImageUrl, input);
-  return capturedPreviewImageUrl;
+  writeCachedWorkbenchNodePreviewImage(node.id, previewImageUrl);
+  persistWorkbenchNodePreviewImage(node, previewImageUrl, input);
+  return previewImageUrl;
 }
 function persistWorkbenchNodePreviewImage(node, previewImageUrl, input) {
   if (!previewImageUrl || !input.dockPreviewCache) {
@@ -2917,8 +2934,10 @@ function useWorkbenchGenieAnimation({
   captureNodePreviewImage,
   controller,
   dockPreviewCache,
+  minimizeAnimation = "scale",
   resolveDockAnchorKey,
-  resolveDockPreviewCacheKey: resolveDockPreviewCacheKey2
+  resolveDockPreviewCacheKey: resolveDockPreviewCacheKey2,
+  shouldCaptureNodePreviewImage
 }) {
   const dockAnchorElementsRef = useRef4(/* @__PURE__ */ new Map());
   const canvasRef = useRef4(null);
@@ -2933,6 +2952,7 @@ function useWorkbenchGenieAnimation({
   const [genieHiddenNodeIDs, setGenieHiddenNodeIDs] = useState4(
     () => /* @__PURE__ */ new Set()
   );
+  const [pendingMinimizedNode, setPendingMinimizedNode] = useState4(null);
   const registerDockAnchor = useCallback6(
     (anchorKey, element) => {
       if (element) {
@@ -3008,6 +3028,11 @@ function useWorkbenchGenieAnimation({
       return next;
     });
   }, []);
+  const clearPendingMinimizedNode = useCallback6((nodeID) => {
+    setPendingMinimizedNode(
+      (current) => current?.id === nodeID ? null : current
+    );
+  }, []);
   const setupCanvas = useCallback6(() => {
     const canvas = canvasRef.current;
     if (!canvas) {
@@ -3120,10 +3145,102 @@ function useWorkbenchGenieAnimation({
     },
     [setupCanvas, stopAnimation]
   );
+  const runScaleWindowAnimation = useCallback6(
+    ({
+      direction,
+      dockRect,
+      nodeElement,
+      onCancel,
+      onComplete,
+      skipStop
+    }) => {
+      if (!skipStop) {
+        stopAnimation();
+      }
+      const windowRect = viewportRectFromElement(nodeElement);
+      if (!isUsableGenieRect(windowRect) || !isUsableGenieRect(dockRect)) {
+        onComplete();
+        return;
+      }
+      const generation = animationGenerationRef.current;
+      const fromCenter = centerPointFromRect(windowRect);
+      const toCenter = centerPointFromRect(dockRect);
+      const targetScale = Math.max(
+        0.04,
+        Math.min(
+          0.32,
+          dockRect.width / Math.max(1, windowRect.width),
+          dockRect.height / Math.max(1, windowRect.height)
+        )
+      );
+      const previousPointerEvents = nodeElement.style.pointerEvents;
+      const previousTransformOrigin = nodeElement.style.transformOrigin;
+      const previousVisibility = nodeElement.style.visibility;
+      const previousZIndex = nodeElement.style.zIndex;
+      nodeElement.style.pointerEvents = "none";
+      nodeElement.style.transformOrigin = "center center";
+      nodeElement.style.visibility = "visible";
+      nodeElement.style.zIndex = "var(--z-workbench-genie)";
+      const dockTransform = `translate3d(${toCenter.x - fromCenter.x}px, ${toCenter.y - fromCenter.y}px, 0) scale(${targetScale})`;
+      const windowTransform = "translate3d(0, 0, 0) scale(1)";
+      const keyframes = direction === "open" ? [
+        {
+          opacity: 0,
+          transform: dockTransform
+        },
+        {
+          opacity: 1,
+          transform: windowTransform
+        }
+      ] : [
+        {
+          opacity: 1,
+          transform: windowTransform
+        },
+        {
+          opacity: 0,
+          transform: dockTransform
+        }
+      ];
+      const animation = nodeElement.animate(keyframes, {
+        duration: scaleMinimizeDurationMs,
+        easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+        fill: "forwards"
+      });
+      const restoreElement = () => {
+        animation.cancel();
+        nodeElement.style.pointerEvents = previousPointerEvents;
+        nodeElement.style.transformOrigin = previousTransformOrigin;
+        nodeElement.style.visibility = previousVisibility;
+        nodeElement.style.zIndex = previousZIndex;
+      };
+      animationCleanupRef.current = () => {
+        restoreElement();
+        onCancel();
+      };
+      animation.finished.then(() => {
+        if (generation !== animationGenerationRef.current) {
+          return;
+        }
+        animationCleanupRef.current = null;
+        restoreElement();
+        onComplete();
+      }).catch(() => {
+        if (generation !== animationGenerationRef.current) {
+          return;
+        }
+        animationCleanupRef.current = null;
+        restoreElement();
+        onComplete();
+      });
+    },
+    [stopAnimation]
+  );
   useEffect3(() => () => stopAnimation(false), [stopAnimation]);
   const startOpenOrRestoreAnimation = useCallback6(
     async (nodeID, anchorKey, generation, dockRectFallback) => {
-      if (shouldReduceMotion()) {
+      const effectiveMinimizeAnimation = shouldReduceMotion() ? "off" : minimizeAnimation;
+      if (effectiveMinimizeAnimation === "off") {
         animationCleanupRef.current = null;
         showNodeForGenie(nodeID);
         return;
@@ -3135,6 +3252,32 @@ function useWorkbenchGenieAnimation({
       const resolvedDockRect = resolveDockAnchorRect(anchorKey);
       const dockRect = resolvedDockRect && isUsableGenieRect(resolvedDockRect) ? resolvedDockRect : dockRectFallback;
       const nodeElement = resolveNodeElement(nodeID);
+      if (effectiveMinimizeAnimation === "scale") {
+        if (!dockRect || !nodeElement || !isUsableGenieRect(dockRect)) {
+          animationCleanupRef.current = null;
+          showNodeForGenie(nodeID);
+          return;
+        }
+        flushSync(() => {
+          showNodeForGenie(nodeID);
+        });
+        runScaleWindowAnimation({
+          direction: "open",
+          dockRect,
+          nodeElement,
+          onCancel: () => {
+            flushSync(() => {
+              showNodeForGenie(nodeID);
+            });
+          },
+          onComplete: () => {
+            flushSync(() => {
+              showNodeForGenie(nodeID);
+            });
+          }
+        });
+        return;
+      }
       const captureTarget = nodeElement ? resolveWorkbenchCaptureElement(nodeElement) : null;
       if (!dockRect || !nodeElement || !captureTarget || !isUsableGenieRect(dockRect)) {
         animationCleanupRef.current = null;
@@ -3173,9 +3316,11 @@ function useWorkbenchGenieAnimation({
     },
     [
       clearCanvas,
+      minimizeAnimation,
       resolveDockAnchorRect,
       resolveNodeElement,
       runGenieAnimation,
+      runScaleWindowAnimation,
       showNodeForGenie
     ]
   );
@@ -3192,6 +3337,16 @@ function useWorkbenchGenieAnimation({
         });
         return;
       }
+      const effectiveMinimizeAnimation = shouldReduceMotion() ? "off" : minimizeAnimation;
+      if (effectiveMinimizeAnimation === "off") {
+        stopAnimation();
+        flushSync(() => {
+          showNodeForGenie(nodeID);
+        });
+        void Promise.resolve(launch()).catch(() => {
+        });
+        return;
+      }
       stopAnimation();
       const dockRectFallback = resolveDockAnchorRect(anchorKey);
       hideNodeForGenie(nodeID);
@@ -3216,6 +3371,7 @@ function useWorkbenchGenieAnimation({
       clearCanvas,
       controller,
       hideNodeForGenie,
+      minimizeAnimation,
       resolveDockAnchorRect,
       showNodeForGenie,
       startOpenOrRestoreAnimation,
@@ -3230,23 +3386,137 @@ function useWorkbenchGenieAnimation({
           return;
         }
         const runMinimize = minimize ?? (() => controller.commands.minimizeNode(nodeID));
-        if (shouldReduceMotion()) {
-          const wasFocusedForCapture2 = isFocusedWorkbenchNode(
-            controller,
-            nodeID
-          );
-          if (!wasFocusedForCapture2) {
+        const effectiveMinimizeAnimation = shouldReduceMotion() ? "off" : minimizeAnimation;
+        const shouldCapturePreview = shouldCaptureNodePreviewImage?.(target) ?? true;
+        if (effectiveMinimizeAnimation === "off") {
+          stopAnimation();
+          let frameID = null;
+          let timerID = null;
+          let minimizeCommitted2 = false;
+          const commitMinimize2 = () => {
+            if (minimizeCommitted2) {
+              return;
+            }
+            minimizeCommitted2 = true;
+            if (frameID !== null) {
+              window.cancelAnimationFrame(frameID);
+              frameID = null;
+            }
+            if (timerID !== null) {
+              clearTimeout(timerID);
+              timerID = null;
+            }
+            animationCleanupRef.current = null;
+            flushSync(() => {
+              clearPendingMinimizedNode(nodeID);
+              showNodeForGenie(nodeID);
+              runMinimize();
+            });
+            scheduleReleaseMinimizedDockEnterAnimation(nodeID);
+          };
+          animationCleanupRef.current = () => {
+            releaseMinimizedDockEnterAnimation(nodeID);
+            commitMinimize2();
+          };
+          registerMinimizedDockEnterAnimation(nodeID);
+          flushSync(() => {
+            hideNodeForGenie(nodeID);
+            setPendingMinimizedNode({
+              ...target,
+              isMinimized: true,
+              minimizedAtUnixMs: Date.now()
+            });
+          });
+          if (shouldCapturePreview) {
+            void captureProvidedWorkbenchNodePreviewImageForNode(target, {
+              captureNodePreviewImage,
+              dockPreviewCache,
+              resolveDockPreviewCacheKey: resolveDockPreviewCacheKey2
+            });
+          }
+          frameID = window.requestAnimationFrame(() => {
+            frameID = null;
+            timerID = setTimeout(commitMinimize2, 0);
+          });
+          return;
+        }
+        if (effectiveMinimizeAnimation === "scale") {
+          stopAnimation();
+          const generation2 = animationGenerationRef.current;
+          const nodeElement2 = resolveNodeElement(nodeID);
+          if (!nodeElement2) {
+            runMinimize();
+            return;
+          }
+          const wasFocusedForCapture2 = shouldCapturePreview && isFocusedWorkbenchNode(controller, nodeID);
+          if (shouldCapturePreview && !wasFocusedForCapture2) {
             flushSync(() => {
               controller.commands.focusNode(nodeID);
             });
             await waitForNextAnimationFrame();
+            if (generation2 !== animationGenerationRef.current) {
+              return;
+            }
           }
-          await captureWorkbenchNodePreviewImageForNode(target, {
-            captureNodePreviewImage,
-            dockPreviewCache,
-            resolveDockPreviewCacheKey: resolveDockPreviewCacheKey2
+          if (shouldCapturePreview) {
+            void captureProvidedWorkbenchNodePreviewImageForNode(target, {
+              captureNodePreviewImage,
+              dockPreviewCache,
+              resolveDockPreviewCacheKey: resolveDockPreviewCacheKey2
+            });
+          }
+          let minimizeCommitted2 = false;
+          const commitMinimize2 = () => {
+            if (minimizeCommitted2) {
+              return;
+            }
+            minimizeCommitted2 = true;
+            runMinimize();
+          };
+          const cleanupPendingMinimize = () => {
+            releaseMinimizedDockEnterAnimation(nodeID);
+            flushSync(() => {
+              clearPendingMinimizedNode(nodeID);
+              commitMinimize2();
+            });
+          };
+          const pendingMinimizedNode3 = {
+            ...target,
+            isMinimized: true,
+            minimizedAtUnixMs: Date.now()
+          };
+          registerMinimizedDockEnterAnimation(nodeID);
+          flushSync(() => {
+            setPendingMinimizedNode(pendingMinimizedNode3);
+          });
+          animationCleanupRef.current = cleanupPendingMinimize;
+          await waitForNextAnimationFrame();
+          if (generation2 !== animationGenerationRef.current) {
+            return;
+          }
+          const anchorKey2 = resolveAnchorKeyForNode(pendingMinimizedNode3);
+          const dockRect2 = resolveDockAnchorRect(anchorKey2);
+          if (!nodeElement2.isConnected || !dockRect2 || !isUsableGenieRect(dockRect2)) {
+            cleanupPendingMinimize();
+            return;
+          }
+          runScaleWindowAnimation({
+            direction: "minimize",
+            dockRect: dockRect2,
+            nodeElement: nodeElement2,
+            onCancel: () => {
+              cleanupPendingMinimize();
+            },
+            onComplete: () => {
+              animationCleanupRef.current = null;
+              flushSync(() => {
+                clearPendingMinimizedNode(nodeID);
+                commitMinimize2();
+              });
+              scheduleReleaseMinimizedDockEnterAnimation(nodeID);
+            },
+            skipStop: true
           });
-          runMinimize();
           return;
         }
         stopAnimation();
@@ -3309,46 +3579,57 @@ function useWorkbenchGenieAnimation({
             resolveDockPreviewCacheKey: resolveDockPreviewCacheKey2
           });
         }
-        const cleanupHiddenNode = () => {
+        let minimizeCommitted = false;
+        const commitMinimize = () => {
+          if (minimizeCommitted) {
+            return;
+          }
+          minimizeCommitted = true;
+          runMinimize();
+        };
+        const pendingMinimizedNode2 = {
+          ...target,
+          isMinimized: true,
+          minimizedAtUnixMs: Date.now()
+        };
+        const cleanupPendingGenieMinimize = () => {
+          releaseMinimizedDockEnterAnimation(nodeID);
           flushSync(() => {
+            clearPendingMinimizedNode(nodeID);
             showNodeForGenie(nodeID);
+            commitMinimize();
           });
           clearCanvas();
         };
-        animationCleanupRef.current = cleanupHiddenNode;
+        animationCleanupRef.current = cleanupPendingGenieMinimize;
         registerMinimizedDockEnterAnimation(nodeID);
         flushSync(() => {
+          setPendingMinimizedNode(pendingMinimizedNode2);
           hideNodeForGenie(nodeID);
-          runMinimize();
         });
         await waitForNextAnimationFrame();
         if (generation !== animationGenerationRef.current) {
-          releaseMinimizedDockEnterAnimation(nodeID);
           return;
         }
-        const minimizedTarget = controller.getSnapshot().nodes.find((node) => node.id === nodeID) ?? target;
-        const anchorKey = resolveAnchorKeyForNode(minimizedTarget);
+        const anchorKey = resolveAnchorKeyForNode(pendingMinimizedNode2);
         const dockRect = resolveDockAnchorRect(anchorKey);
         if (!dockRect || !isUsableGenieRect(dockRect)) {
-          releaseMinimizedDockEnterAnimation(nodeID);
           animationCleanupRef.current = null;
-          cleanupHiddenNode();
+          cleanupPendingGenieMinimize();
           return;
         }
         runGenieAnimation({
           direction: "minimize",
           dockRect,
           onCancel: () => {
-            releaseMinimizedDockEnterAnimation(nodeID);
-            flushSync(() => {
-              showNodeForGenie(nodeID);
-            });
-            clearCanvas();
+            cleanupPendingGenieMinimize();
           },
           onComplete: () => {
             scheduleReleaseMinimizedDockEnterAnimation(nodeID);
             flushSync(() => {
+              clearPendingMinimizedNode(nodeID);
               showNodeForGenie(nodeID);
+              commitMinimize();
             });
             clearCanvas();
           },
@@ -3361,8 +3642,10 @@ function useWorkbenchGenieAnimation({
       clearCanvas,
       controller,
       captureNodePreviewImage,
+      clearPendingMinimizedNode,
       dockPreviewCache,
       hideNodeForGenie,
+      minimizeAnimation,
       registerMinimizedDockEnterAnimation,
       releaseMinimizedDockEnterAnimation,
       resolveAnchorKeyForNode,
@@ -3370,7 +3653,9 @@ function useWorkbenchGenieAnimation({
       resolveDockAnchorRect,
       resolveNodeElement,
       runGenieAnimation,
+      runScaleWindowAnimation,
       scheduleReleaseMinimizedDockEnterAnimation,
+      shouldCaptureNodePreviewImage,
       setupCanvas,
       showNodeForGenie,
       stopAnimation
@@ -3403,8 +3688,13 @@ function useWorkbenchGenieAnimation({
       (nodeID) => genieHiddenNodeIDs.has(nodeID),
       [genieHiddenNodeIDs]
     ),
+    isPendingMinimizedDockNode: useCallback6(
+      (nodeID) => pendingMinimizedNode?.id === nodeID,
+      [pendingMinimizedNode]
+    ),
     launchNodeFromAnchor,
     minimizeNodeToAnchor,
+    pendingMinimizedNode,
     registerDockAnchor,
     shouldAnimateMinimizedDockEnter
   };
@@ -3421,6 +3711,7 @@ function WorkbenchSurface({
   interactive,
   layoutConstraints,
   missionControlPhase,
+  minimizeAnimation,
   presentation,
   renderBackdrop,
   renderBottomChrome,
@@ -3435,6 +3726,7 @@ function WorkbenchSurface({
   resolveDockAnchorKey,
   resolveDockPreviewCacheKey: resolveDockPreviewCacheKey2,
   shortcutsEnabled,
+  shouldCaptureNodePreviewImage,
   wallpaper,
   windowChromeMode,
   windowChromeI18n
@@ -3449,6 +3741,7 @@ function WorkbenchSurface({
       interactive,
       layoutConstraints,
       missionControlPhase,
+      minimizeAnimation,
       presentation,
       renderBackdrop,
       renderBottomChrome,
@@ -3463,6 +3756,7 @@ function WorkbenchSurface({
       resolveDockAnchorKey,
       resolveDockPreviewCacheKey: resolveDockPreviewCacheKey2,
       shortcutsEnabled,
+      shouldCaptureNodePreviewImage,
       wallpaper,
       windowChromeMode,
       windowChromeI18n
@@ -3477,6 +3771,7 @@ function WorkbenchSurfaceInner({
   interactive = true,
   layoutConstraints,
   missionControlPhase,
+  minimizeAnimation,
   presentation,
   renderBackdrop,
   renderBottomChrome,
@@ -3491,6 +3786,7 @@ function WorkbenchSurfaceInner({
   resolveDockAnchorKey,
   resolveDockPreviewCacheKey: resolveDockPreviewCacheKey2,
   shortcutsEnabled,
+  shouldCaptureNodePreviewImage,
   wallpaper,
   windowChromeMode,
   windowChromeI18n
@@ -3507,8 +3803,10 @@ function WorkbenchSurfaceInner({
     captureNodePreviewImage,
     controller,
     dockPreviewCache,
+    minimizeAnimation,
     resolveDockAnchorKey,
-    resolveDockPreviewCacheKey: resolveDockPreviewCacheKey2
+    resolveDockPreviewCacheKey: resolveDockPreviewCacheKey2,
+    shouldCaptureNodePreviewImage
   });
   useWorkbenchShortcuts((shortcutsEnabled ?? true) && interactive);
   useEffect4(() => {
@@ -4769,6 +5067,11 @@ var WorkbenchHostSessionController = class {
       this.restoreAndFocusNode(nodeId);
     });
   }
+  minimizeNode(nodeId) {
+    this.runWhenReady(this.loadGeneration, () => {
+      this.controller.commands.minimizeNode(nodeId);
+    });
+  }
   exitFullscreenNode(nodeId) {
     this.runWhenReady(this.loadGeneration, () => {
       this.controller.commands.exitFullscreen(nodeId);
@@ -6244,7 +6547,7 @@ function resolveWorkbenchMinimizedDockAnchorKeyForNode(input) {
 }
 function isWorkbenchMinimizedDockEligibleNode(input) {
   const definition = input.nodeDefinitions.get(input.node.data.typeId);
-  return definition?.window?.minimizedDock?.kind === "snapshot";
+  return definition?.window?.minimizedDock !== void 0;
 }
 function orderWorkbenchMinimizedDockNodes(input) {
   return input.nodes.map((node, index) => ({ index, node })).filter(
@@ -7452,6 +7755,7 @@ function WorkbenchHostDock({
     /* @__PURE__ */ new Map()
   );
   const previousAttentionTokenByEntryId = useRef8(/* @__PURE__ */ new Map());
+  const dockEntryClickThrottleUntilRef = useRef8(/* @__PURE__ */ new Map());
   const attentionTimeouts = useRef8(
     /* @__PURE__ */ new Map()
   );
@@ -7626,9 +7930,9 @@ function WorkbenchHostDock({
   const minimizedDockSlots = useMemo5(
     () => resolveWorkbenchMinimizedDockSlots({
       nodeDefinitions,
-      nodes: context.nodes
+      nodes: context.minimizedNodes
     }),
-    [context.nodes, nodeDefinitions]
+    [context.minimizedNodes, nodeDefinitions]
   );
   const { promotedNodeId, stackDispatching } = useMinimizedDockStackPromotion(minimizedDockSlots);
   const dockItems = useMemo5(
@@ -7999,6 +8303,19 @@ function WorkbenchHostDock({
       triggerDockBounce
     ]
   );
+  const isDockEntryClickThrottled = useCallback10(
+    (anchorKey) => {
+      const throttledUntil = dockEntryClickThrottleUntilRef.current.get(anchorKey);
+      return throttledUntil !== void 0 && Date.now() < throttledUntil;
+    },
+    []
+  );
+  const claimDockEntryClick = useCallback10((anchorKey) => {
+    dockEntryClickThrottleUntilRef.current.set(
+      anchorKey,
+      Date.now() + DOCK_ENTRY_CLICK_THROTTLE_MS
+    );
+  }, []);
   const beginDockMinimizedInteraction = useCallback10(
     (anchorKey) => {
       hoverPanelRestTargetRef.current = null;
@@ -8156,9 +8473,13 @@ function WorkbenchHostDock({
   }, [dockPlacement, presentDockItems.length, updateDockScrollState]);
   const hasMinimizedPreviewCapture = minimizedDockSlots.some(
     (slot) => minimizedDockSlotNodes(slot).some(
-      (node) => Boolean(
-        nodeDefinitions.get(node.data.typeId)?.window?.minimizedDock?.capturePreview
-      )
+      (node) => (() => {
+        if (context.genie.isPendingMinimizedDockNode(node.id)) {
+          return false;
+        }
+        const minimizedDock = nodeDefinitions.get(node.data.typeId)?.window?.minimizedDock;
+        return minimizedDock?.kind === "snapshot" && Boolean(minimizedDock.capturePreview);
+      })()
     )
   );
   useEffect9(() => {
@@ -8222,7 +8543,8 @@ function WorkbenchHostDock({
   );
   const captureMinimizedNodePreview = useCallback10(
     async (node) => {
-      const capturePreview = nodeDefinitions.get(node.data.typeId)?.window?.minimizedDock?.capturePreview;
+      const minimizedDock = nodeDefinitions.get(node.data.typeId)?.window?.minimizedDock;
+      const capturePreview = minimizedDock?.kind === "snapshot" ? minimizedDock.capturePreview : void 0;
       const externalState = readWorkbenchHostExternalState({
         externalStateSource,
         node,
@@ -8250,6 +8572,41 @@ function WorkbenchHostDock({
       workspaceId
     ]
   );
+  const provideMinimizedNodePreview = useCallback10(
+    (node) => {
+      const minimizedDock = nodeDefinitions.get(node.data.typeId)?.window?.minimizedDock;
+      if (minimizedDock?.kind !== "component") {
+        return null;
+      }
+      const externalState = readWorkbenchHostExternalState({
+        externalStateSource,
+        node,
+        workspaceId
+      });
+      return minimizedDock.providePreview({
+        externalNodeState: externalState.externalNodeState,
+        externalWorkspaceState: externalState.externalWorkspaceState,
+        host,
+        isFocused: context.focusedNodeId === node.id,
+        isMinimized: node.isMinimized,
+        node
+      });
+    },
+    [
+      context.focusedNodeId,
+      externalStateSource,
+      host,
+      nodeDefinitions,
+      workspaceId
+    ]
+  );
+  const provideMinimizedNodePreviewForNode = useCallback10(
+    (node) => {
+      const minimizedDock = nodeDefinitions.get(node.data.typeId)?.window?.minimizedDock;
+      return minimizedDock?.kind === "component" ? provideMinimizedNodePreview : void 0;
+    },
+    [nodeDefinitions, provideMinimizedNodePreview]
+  );
   if (dockItems.length === 0 && presentDockItems.length === 0) {
     return null;
   }
@@ -8413,9 +8770,19 @@ function WorkbenchHostDock({
                             if (clickResolution.kind === "blocked") {
                               return;
                             }
+                            if (isDockEntryClickThrottled(anchorKey)) {
+                              return;
+                            }
                             beginDockIconInteraction(anchorKey);
                           },
                           onClick: (event) => {
+                            if (clickResolution.kind === "blocked") {
+                              return;
+                            }
+                            if (isDockEntryClickThrottled(anchorKey)) {
+                              return;
+                            }
+                            claimDockEntryClick(anchorKey);
                             logWorkbenchDockDebug("dock.click", debugDiagnostics, {
                               anchorKey,
                               clickResolution,
@@ -8509,8 +8876,6 @@ function WorkbenchHostDock({
                                   })
                                 );
                                 return;
-                              case "blocked":
-                                return;
                             }
                           },
                           children: /* @__PURE__ */ jsxs6(
@@ -8683,9 +9048,12 @@ function WorkbenchHostDock({
                                           className: `desktop-dock__minimized-stack-layer desktop-dock__minimized-stack-layer--${index}`,
                                           dockPreviewCache,
                                           node: node2,
+                                          providePreview: provideMinimizedNodePreviewForNode(
+                                            node2
+                                          ),
                                           workspaceId
                                         },
-                                        node2.id
+                                        minimizedDockPreviewFreezeKey(node2)
                                       );
                                     }
                                     return /* @__PURE__ */ jsx10(
@@ -8753,6 +9121,7 @@ function WorkbenchHostDock({
                       );
                     }
                     const node = slot.node;
+                    const isPendingMinimizedNode = context.genie.isPendingMinimizedDockNode(node.id);
                     const labelTooltipTarget = dockLabelTooltipTarget(
                       `minimized-node:${node.id}`,
                       node.title
@@ -8763,8 +9132,12 @@ function WorkbenchHostDock({
                         "aria-label": i18n.t("launch", { title: node.title }),
                         className: "desktop-dock__btn desktop-dock__minimized-btn",
                         "data-interactive": "true",
+                        disabled: isPendingMinimizedNode,
                         type: "button",
                         onPointerDown: () => {
+                          if (isPendingMinimizedNode) {
+                            return;
+                          }
                           const restoreIntent = resolveWorkbenchMinimizedDockRestoreIntent({
                             nodeId: node.id,
                             slots: minimizedDockSlots,
@@ -8780,6 +9153,9 @@ function WorkbenchHostDock({
                           beginDockMinimizedInteraction();
                         },
                         onClick: () => {
+                          if (isPendingMinimizedNode) {
+                            return;
+                          }
                           const restoreIntent = resolveWorkbenchMinimizedDockRestoreIntent({
                             nodeId: node.id,
                             slots: minimizedDockSlots,
@@ -8809,11 +9185,14 @@ function WorkbenchHostDock({
                         children: /* @__PURE__ */ jsx10(
                           WorkbenchHostDockMinimizedNodePreview,
                           {
-                            capturePreview: captureMinimizedNodePreview,
-                            dockPreviewCache,
+                            capturePreview: isPendingMinimizedNode ? void 0 : captureMinimizedNodePreview,
+                            deferPreview: isPendingMinimizedNode,
+                            dockPreviewCache: isPendingMinimizedNode ? void 0 : dockPreviewCache,
                             node,
+                            providePreview: isPendingMinimizedNode ? void 0 : provideMinimizedNodePreviewForNode(node),
                             workspaceId
-                          }
+                          },
+                          minimizedDockPreviewFreezeKey(node)
                         )
                       }
                     );
@@ -8828,6 +9207,7 @@ function WorkbenchHostDock({
                         "data-dock-label-tooltip-key": labelTooltipTarget.key,
                         "data-dock-label-tooltip-label": labelTooltipTarget.label,
                         "data-node-state": "minimized",
+                        "data-pending-minimize": isPendingMinimizedNode ? "true" : void 0,
                         "data-presence": dockItem.presence,
                         "data-promoted-from-stack": promotedNodeId === node.id ? "true" : void 0,
                         "data-section-id": "minimized",
@@ -9055,6 +9435,7 @@ function WorkbenchHostDock({
                 node,
                 workspaceId
               });
+              const minimizedDock = nodeDefinitions.get(node.data.typeId)?.window?.minimizedDock;
               return {
                 externalNodeState: externalState.externalNodeState,
                 externalWorkspaceState: externalState.externalWorkspaceState,
@@ -9062,10 +9443,8 @@ function WorkbenchHostDock({
                 isFocused: context.focusedNodeId === node.id,
                 isMinimized: true,
                 node,
-                preview: nodeDefinitions.get(node.data.typeId)?.window?.minimizedDock?.capturePreview ? null : (() => {
-                  const previewImageUrl = readCachedWorkbenchNodePreviewImage(
-                    node.id
-                  );
+                preview: minimizedDock?.kind === "component" ? provideMinimizedNodePreview(node) ?? null : minimizedDock?.kind === "snapshot" && minimizedDock.capturePreview ? null : (() => {
+                  const previewImageUrl = readCachedWorkbenchNodePreviewImage(node.id);
                   return previewImageUrl ? { kind: "image", src: previewImageUrl } : null;
                 })(),
                 previewRevision: null,
@@ -9133,14 +9512,69 @@ function WorkbenchHostDock({
 function WorkbenchHostDockMinimizedNodePreview({
   capturePreview,
   className,
+  deferPreview = false,
   dockPreviewCache,
   node,
+  providePreview,
   workspaceId
 }) {
+  const [componentPreview, setComponentPreview] = useState8(void 0);
   const [previewImageUrl, setPreviewImageUrl] = useState8(
-    () => readCachedWorkbenchNodePreviewImage(node.id)
+    () => deferPreview || providePreview ? null : readCachedWorkbenchNodePreviewImage(node.id)
   );
   useEffect9(() => {
+    if (deferPreview || !providePreview || componentPreview !== void 0) {
+      return void 0;
+    }
+    let cancelled = false;
+    let frameId = null;
+    let idleId = null;
+    let timeoutId = null;
+    const setDeferredComponentPreview = () => {
+      if (cancelled) {
+        return;
+      }
+      setComponentPreview(providePreview(node) ?? null);
+    };
+    const scheduler = globalThis;
+    if (typeof scheduler.requestIdleCallback === "function") {
+      idleId = scheduler.requestIdleCallback(setDeferredComponentPreview, {
+        timeout: 250
+      });
+    } else if (typeof scheduler.requestAnimationFrame === "function") {
+      frameId = scheduler.requestAnimationFrame(() => {
+        frameId = null;
+        timeoutId = globalThis.setTimeout(setDeferredComponentPreview, 0);
+      });
+    } else {
+      timeoutId = globalThis.setTimeout(setDeferredComponentPreview, 0);
+    }
+    return () => {
+      cancelled = true;
+      if (idleId !== null && typeof scheduler.cancelIdleCallback === "function") {
+        scheduler.cancelIdleCallback(idleId);
+      }
+      if (frameId !== null && typeof scheduler.cancelAnimationFrame === "function") {
+        scheduler.cancelAnimationFrame(frameId);
+      }
+      if (timeoutId !== null) {
+        globalThis.clearTimeout(timeoutId);
+      }
+    };
+  }, [
+    componentPreview,
+    deferPreview,
+    node.data.instanceId,
+    node.data.instanceKey,
+    node.data.typeId,
+    node.id,
+    node.minimizedAtUnixMs,
+    providePreview
+  ]);
+  useEffect9(() => {
+    if (deferPreview || providePreview) {
+      return void 0;
+    }
     let cancelled = false;
     const cachedPreviewImageUrl = readCachedWorkbenchNodePreviewImage(node.id);
     setPreviewImageUrl(cachedPreviewImageUrl);
@@ -9182,14 +9616,22 @@ function WorkbenchHostDockMinimizedNodePreview({
     };
   }, [
     capturePreview,
+    deferPreview,
     dockPreviewCache,
     node.data.instanceId,
     node.data.instanceKey,
     node.data.typeId,
     node.id,
     node.minimizedAtUnixMs,
+    providePreview,
     workspaceId
   ]);
+  if (deferPreview) {
+    return renderMinimizedDockPreviewPlaceholder(className);
+  }
+  if (componentPreview) {
+    return renderMinimizedDockPreviewContent(componentPreview, className);
+  }
   if (previewImageUrl) {
     return /* @__PURE__ */ jsx10(
       "span",
@@ -9212,6 +9654,9 @@ function WorkbenchHostDockMinimizedNodePreview({
       }
     );
   }
+  return renderMinimizedDockPreviewPlaceholder(className);
+}
+function renderMinimizedDockPreviewPlaceholder(className) {
   return /* @__PURE__ */ jsxs6(
     "span",
     {
@@ -9225,6 +9670,78 @@ function WorkbenchHostDockMinimizedNodePreview({
     }
   );
 }
+function renderMinimizedDockPreviewContent(preview, className) {
+  if (preview.kind === "image") {
+    return /* @__PURE__ */ jsx10(
+      "span",
+      {
+        className: [
+          "desktop-dock__minimized-preview",
+          "desktop-dock__minimized-preview--snapshot",
+          className
+        ].filter(Boolean).join(" "),
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx10(
+          "img",
+          {
+            alt: "",
+            className: "desktop-dock__minimized-preview-image",
+            draggable: false,
+            src: preview.src
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx10(
+    WorkbenchHostDockFrozenComponentPreview,
+    {
+      className,
+      preview
+    }
+  );
+}
+function WorkbenchHostDockFrozenComponentPreview({
+  className,
+  preview
+}) {
+  const sourceRef = useRef8(null);
+  const [frozenMarkup, setFrozenMarkup] = useState8(null);
+  useLayoutEffect5(() => {
+    if (frozenMarkup !== null) {
+      return;
+    }
+    setFrozenMarkup(sourceRef.current?.innerHTML ?? "");
+  }, [frozenMarkup]);
+  return /* @__PURE__ */ jsx10(
+    "span",
+    {
+      className: [
+        "desktop-dock__minimized-preview",
+        "desktop-dock__minimized-preview--component",
+        className
+      ].filter(Boolean).join(" "),
+      "aria-hidden": "true",
+      children: frozenMarkup === null ? /* @__PURE__ */ jsx10(
+        "span",
+        {
+          ref: sourceRef,
+          className: "desktop-dock__minimized-preview-freeze-source",
+          children: preview.element
+        }
+      ) : /* @__PURE__ */ jsx10(
+        "span",
+        {
+          className: "desktop-dock__minimized-preview-frozen-content",
+          dangerouslySetInnerHTML: { __html: frozenMarkup }
+        }
+      )
+    }
+  );
+}
+function minimizedDockPreviewFreezeKey(node) {
+  return `${node.id}:${node.minimizedAtUnixMs ?? "pending"}`;
+}
 function dockEntryHasHoverPanel(entry) {
   return Boolean(entry.state?.reason?.trim()) || (entry.hoverActions?.length ?? 0) > 0;
 }
@@ -9838,6 +10355,7 @@ function dockWallpaperToneMapsEqual(left, right) {
   return true;
 }
 var DOCK_BOUNCE_MS = 600;
+var DOCK_ENTRY_CLICK_THROTTLE_MS = DOCK_BOUNCE_MS;
 function useDockBounce(slotRefs) {
   const timeoutsRef = useRef8(/* @__PURE__ */ new Map());
   const clearDockBounce = useCallback10(
@@ -10140,7 +10658,8 @@ function useWorkbenchHostSurfaceRenderers(input) {
   const captureNodePreviewImage = useCallback11(
     async (node) => {
       const definition = input.nodeDefinitionByType.get(node.data.typeId);
-      const capturePreview = definition?.window?.minimizedDock?.capturePreview;
+      const minimizedDock = definition?.window?.minimizedDock;
+      const capturePreview = minimizedDock?.kind === "snapshot" ? minimizedDock.capturePreview : void 0;
       const snapshot = input.hostSession.getSnapshot();
       const externalState = readWorkbenchHostExternalState({
         externalStateSource: input.externalStateSource,
@@ -10305,17 +10824,30 @@ function useWorkbenchHostSurfaceRenderers(input) {
     },
     [input.nodeDefinitionByType]
   );
+  const shouldCaptureNodePreviewImage = useCallback11(
+    (node) => {
+      const minimizedDock = input.nodeDefinitionByType.get(node.data.typeId)?.window?.minimizedDock;
+      return minimizedDock?.kind !== "component";
+    },
+    [input.nodeDefinitionByType]
+  );
   const resolveDockAnchorKey = useCallback11(
     (node) => {
       if (node.isMinimized && isWorkbenchMinimizedDockEligibleNode({
         node,
         nodeDefinitions: input.nodeDefinitionByType
       })) {
+        const snapshotNodes = input.hostSession.getSnapshot().nodes;
+        const slotNodes = snapshotNodes.some(
+          (snapshotNode) => snapshotNode.id === node.id
+        ) ? snapshotNodes.map(
+          (snapshotNode) => snapshotNode.id === node.id ? node : snapshotNode
+        ) : [...snapshotNodes, node];
         const minimizedAnchorKey = resolveWorkbenchMinimizedDockAnchorKeyForNode({
           nodeId: node.id,
           slots: resolveWorkbenchMinimizedDockSlots({
             nodeDefinitions: input.nodeDefinitionByType,
-            nodes: input.hostSession.getSnapshot().nodes
+            nodes: slotNodes
           })
         });
         if (minimizedAnchorKey) {
@@ -10358,6 +10890,7 @@ function useWorkbenchHostSurfaceRenderers(input) {
     renderTopChrome,
     renderWindowActions,
     renderWindowHeader,
+    shouldCaptureNodePreviewImage,
     shouldKeepMinimizedNodeMounted,
     resolveDockAnchorKey,
     resolveDockPreviewCacheKey: resolveDockPreviewCacheKey2,
@@ -10537,6 +11070,7 @@ function WorkbenchHost({
   i18n,
   layoutConstraints,
   missionControl,
+  minimizeAnimation,
   nodes,
   onDockEntryAction,
   onDockEntryClick,
@@ -10639,6 +11173,7 @@ function WorkbenchHost({
       interactive: !isHydrating,
       layoutConstraints,
       missionControlPhase: missionControlPresence.phase,
+      minimizeAnimation,
       presentation: missionControlState?.presentation ?? null,
       renderBackdrop: missionControlRenderedState ? () => /* @__PURE__ */ jsx13(
         WorkbenchMissionControlBackdrop,
@@ -10666,6 +11201,7 @@ function WorkbenchHost({
       resolveFullscreenHeaderMode: surfaceRenderers.resolveFullscreenHeaderMode,
       resolveDockAnchorKey: surfaceRenderers.resolveDockAnchorKey,
       shortcutsEnabled,
+      shouldCaptureNodePreviewImage: surfaceRenderers.shouldCaptureNodePreviewImage,
       wallpaper,
       windowChromeI18n,
       windowChromeMode: surfaceRenderers.windowChromeMode