@tutti-os/workbench-surface 0.0.230 → 0.0.232

package/dist/index.js

@@ -2546,10 +2546,13 @@ import { createPortal } from "react-dom";
 
 // src/react/WorkbenchWindowFrame.tsx
 import {
+  createContext as createContext2,
   useCallback as useCallback6,
+  useContext as useContext2,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo4,
-  useRef as useRef3
+  useRef as useRef3,
+  useSyncExternalStore
 } from "react";
 import { createI18nRuntime } from "@tutti-os/ui-i18n-runtime";
 import { Checkbox } from "@tutti-os/ui-system";
@@ -2919,6 +2922,10 @@ var defaultWindowChromeI18n = createWorkbenchWindowChromeI18nRuntime(
     dictionaries: [workbenchWindowChromeI18nResources.en]
   })
 );
+var WorkbenchWindowPresentationVisibilityContext = createContext2(true);
+function useWorkbenchWindowPresentationVisibility() {
+  return useContext2(WorkbenchWindowPresentationVisibilityContext);
+}
 function resolveWorkbenchNodeLaunchSource(data) {
   if (data && typeof data === "object" && "launchSource" in data && typeof data.launchSource === "string" && data.launchSource.length > 0) {
     return data.launchSource;
@@ -2934,9 +2941,10 @@ function resolveWorkbenchNodeTypeId(data) {
 function WorkbenchWindowFrame({
   children,
   edgeSnapEnabled = false,
-  genie,
+  genieNodeVisibility,
   hiddenMounted = false,
   interactive = true,
+  minimizeNodeToAnchor: minimizeNodeToAnchorProp,
   node,
   presentation = null,
   renderActions,
@@ -2971,10 +2979,23 @@ function WorkbenchWindowFrame({
     controller.commands.focusNode(node.id);
     controller.commands.applySnapTarget(node.id, "top");
   };
-  const minimizeNodeToAnchorRef = useRef3(genie.minimizeNodeToAnchor);
+  const subscribeGenieVisibility = useCallback6(
+    (listener) => genieNodeVisibility.subscribe(node.id, listener),
+    [genieNodeVisibility, node.id]
+  );
+  const readGenieVisibility = useCallback6(
+    () => genieNodeVisibility.getSnapshot(node.id),
+    [genieNodeVisibility, node.id]
+  );
+  const isGenieHidden = useSyncExternalStore(
+    subscribeGenieVisibility,
+    readGenieVisibility,
+    readGenieVisibility
+  );
+  const minimizeNodeToAnchorRef = useRef3(minimizeNodeToAnchorProp);
   useLayoutEffect3(() => {
-    minimizeNodeToAnchorRef.current = genie.minimizeNodeToAnchor;
-  }, [genie.minimizeNodeToAnchor]);
+    minimizeNodeToAnchorRef.current = minimizeNodeToAnchorProp;
+  }, [minimizeNodeToAnchorProp]);
   const minimizeNodeToAnchor = useCallback6(
     (nodeID, minimize) => {
       minimizeNodeToAnchorRef.current(nodeID, minimize);
@@ -3043,6 +3064,7 @@ function WorkbenchWindowFrame({
   const presentationMode = presentation?.mode ?? null;
   const presentationFrame = presentation?.frameByNodeId.get(node.id) ?? null;
   const isPresentationHidden = presentationMode === "mission-control" && !presentation?.visibleNodeIds.has(node.id);
+  const isWindowPresentationVisible = !hiddenMounted && !isGenieHidden && presentationMode === null;
   const presentationInteraction = interactive && presentationMode === "mission-control" && !isPresentationHidden ? presentation?.interaction ?? null : null;
   const isMissionControlSelected = presentationInteraction?.selectedNodeIds.has(node.id) ?? false;
   const presentationScale = presentationMode === "mission-control" && presentationFrame ? Math.min(
@@ -3065,7 +3087,7 @@ function WorkbenchWindowFrame({
       className: "workbench-window-shell",
       "data-focused": isFocused ? "true" : "false",
       "data-display-mode": node.displayMode,
-      "data-genie-state": genie.isNodeGenieHidden(node.id) ? "hidden" : "visible",
+      "data-genie-state": isGenieHidden ? "hidden" : "visible",
       "data-launch-source": resolveWorkbenchNodeLaunchSource(node.data),
       "data-minimized-mount": hiddenMounted ? "hidden" : "visible",
       "data-presentation-mode": presentationMode ?? "default",
@@ -3120,7 +3142,13 @@ function WorkbenchWindowFrame({
                     ] })
                   }
                 ),
-                /* @__PURE__ */ jsx7("div", { className: "workbench-window__body", children })
+                /* @__PURE__ */ jsx7("div", { className: "workbench-window__body", children: /* @__PURE__ */ jsx7(
+                  WorkbenchWindowPresentationVisibilityContext.Provider,
+                  {
+                    value: isWindowPresentationVisible,
+                    children
+                  }
+                ) })
               ]
             }
           ),
@@ -3169,6 +3197,7 @@ function ResizeHandle({
 }
 
 // src/react/renderedNodeIds.ts
+var emptyNodeIDs = [];
 function createRenderedWorkbenchNodeIDsSelector(shouldKeepMinimizedNodeMounted = void 0) {
   let previousIDs = null;
   return (state) => {
@@ -3182,6 +3211,50 @@ function createRenderedWorkbenchNodeIDsSelector(shouldKeepMinimizedNodeMounted =
     return nextIDs;
   };
 }
+function createWorkbenchNodeLayerNodeIDsSelector({
+  missionControl,
+  resolveWindowSurfaceLayer,
+  shouldKeepMinimizedNodeMounted
+}) {
+  const selectRenderedNodeIDs = createRenderedWorkbenchNodeIDsSelector(
+    shouldKeepMinimizedNodeMounted
+  );
+  let previousSelection = null;
+  return (state) => {
+    const renderedNodeIDs = selectRenderedNodeIDs(state);
+    let nextDefaultNodeIDs = renderedNodeIDs;
+    let nextDialogPopoverNodeIDs = emptyNodeIDs;
+    if (resolveWindowSurfaceLayer && !missionControl) {
+      const nodeByID = new Map(state.nodes.map((node) => [node.id, node]));
+      const defaultNodeIDs = [];
+      const dialogPopoverNodeIDs = [];
+      for (const nodeID of renderedNodeIDs) {
+        const node = nodeByID.get(nodeID);
+        if (node && resolveWindowSurfaceLayer({ node }) === "dialog-popover") {
+          dialogPopoverNodeIDs.push(nodeID);
+        } else {
+          defaultNodeIDs.push(nodeID);
+        }
+      }
+      nextDefaultNodeIDs = preserveStringArrayIdentity(
+        previousSelection?.defaultNodeIDs,
+        defaultNodeIDs
+      );
+      nextDialogPopoverNodeIDs = preserveStringArrayIdentity(
+        previousSelection?.dialogPopoverNodeIDs,
+        dialogPopoverNodeIDs
+      );
+    }
+    if (previousSelection?.defaultNodeIDs === nextDefaultNodeIDs && previousSelection.dialogPopoverNodeIDs === nextDialogPopoverNodeIDs) {
+      return previousSelection;
+    }
+    previousSelection = {
+      defaultNodeIDs: nextDefaultNodeIDs,
+      dialogPopoverNodeIDs: nextDialogPopoverNodeIDs
+    };
+    return previousSelection;
+  };
+}
 function shouldRenderWorkbenchNode(node, shouldKeepMinimizedNodeMounted) {
   return !node.isMinimized || shouldKeepMinimizedNodeMounted?.(node) === true;
 }
@@ -3191,6 +3264,9 @@ function stringArraysEqual(left, right) {
   }
   return left.every((value, index) => value === right[index]);
 }
+function preserveStringArrayIdentity(previous, next) {
+  return previous && stringArraysEqual(previous, next) ? previous : next;
+}
 
 // src/react/WorkbenchNodeLayer.tsx
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -3210,46 +3286,32 @@ function WorkbenchNodeLayer({
   windowChromeMode,
   windowChromeI18n
 }) {
-  const selectRenderedNodeIDs = useMemo5(
-    () => createRenderedWorkbenchNodeIDsSelector(shouldKeepMinimizedNodeMounted),
-    [shouldKeepMinimizedNodeMounted]
+  const selectNodeLayerNodeIDs = useMemo5(
+    () => createWorkbenchNodeLayerNodeIDsSelector({
+      missionControl: presentation?.mode === "mission-control",
+      resolveWindowSurfaceLayer,
+      shouldKeepMinimizedNodeMounted
+    }),
+    [
+      presentation?.mode,
+      resolveWindowSurfaceLayer,
+      shouldKeepMinimizedNodeMounted
+    ]
   );
-  const nodeIDs = useWorkbenchSelector(
-    selectRenderedNodeIDs
+  const { defaultNodeIDs, dialogPopoverNodeIDs } = useWorkbenchSelector(
+    selectNodeLayerNodeIDs
   );
-  const { defaultNodeIDs, dialogPopoverNodeIDs } = useWorkbenchSelector((state) => {
-    if (!resolveWindowSurfaceLayer || presentation?.mode === "mission-control") {
-      return {
-        defaultNodeIDs: nodeIDs,
-        dialogPopoverNodeIDs: []
-      };
-    }
-    const nodeByID = new Map(state.nodes.map((node) => [node.id, node]));
-    const nextDefaultNodeIDs = [];
-    const nextDialogPopoverNodeIDs = [];
-    for (const nodeID of nodeIDs) {
-      const node = nodeByID.get(nodeID);
-      if (node && resolveWindowSurfaceLayer({ node }) === "dialog-popover") {
-        nextDialogPopoverNodeIDs.push(nodeID);
-      } else {
-        nextDefaultNodeIDs.push(nodeID);
-      }
-    }
-    return {
-      defaultNodeIDs: nextDefaultNodeIDs,
-      dialogPopoverNodeIDs: nextDialogPopoverNodeIDs
-    };
-  });
   const snapPreviewRect = useWorkbenchSelector(selectWorkbenchSnapPreviewRect);
   const presentationInteraction = interactive && presentation?.mode === "mission-control" ? presentation.interaction ?? null : null;
   const dialogPopoverLayer = dialogPopoverNodeIDs.length > 0 ? /* @__PURE__ */ jsx8(
-    WorkbenchNodeLayerGroup,
+    MemoizedWorkbenchNodeLayerGroup,
     {
       className: "workbench-node-layer workbench-node-layer--dialog-popover",
       edgeSnapEnabled,
       fullscreenHeaderMode: resolveFullscreenHeaderMode,
-      genie,
+      genieNodeVisibility: genie.nodeVisibility,
       interactive,
+      minimizeNodeToAnchor: genie.minimizeNodeToAnchor,
       nodeIDs: dialogPopoverNodeIDs,
       presentation,
       renderNode,
@@ -3263,13 +3325,14 @@ function WorkbenchNodeLayer({
   ) : null;
   return /* @__PURE__ */ jsxs5(Fragment3, { children: [
     /* @__PURE__ */ jsx8(
-      WorkbenchNodeLayerGroup,
+      MemoizedWorkbenchNodeLayerGroup,
       {
         className: "workbench-node-layer",
         edgeSnapEnabled,
         fullscreenHeaderMode: resolveFullscreenHeaderMode,
-        genie,
+        genieNodeVisibility: genie.nodeVisibility,
         interactive,
+        minimizeNodeToAnchor: genie.minimizeNodeToAnchor,
         nodeIDs: defaultNodeIDs,
         onBackdropPress: presentationInteraction?.onBackdropPress,
         presentation,
@@ -3290,8 +3353,9 @@ function WorkbenchNodeLayerGroup({
   className,
   edgeSnapEnabled,
   fullscreenHeaderMode,
-  genie,
+  genieNodeVisibility,
   interactive,
+  minimizeNodeToAnchor,
   nodeIDs,
   onBackdropPress,
   presentation,
@@ -3332,9 +3396,10 @@ function WorkbenchNodeLayerGroup({
           MemoizedWorkbenchNodeLayerItem,
           {
             fullscreenHeaderMode,
-            genie,
+            genieNodeVisibility,
             edgeSnapEnabled,
             interactive,
+            minimizeNodeToAnchor,
             nodeID,
             presentation,
             renderNode,
@@ -3351,11 +3416,15 @@ function WorkbenchNodeLayerGroup({
     }
   );
 }
+var MemoizedWorkbenchNodeLayerGroup = memo(
+  WorkbenchNodeLayerGroup
+);
 function WorkbenchNodeLayerItem({
   fullscreenHeaderMode,
-  genie,
+  genieNodeVisibility,
   edgeSnapEnabled,
   interactive,
+  minimizeNodeToAnchor,
   nodeID,
   presentation,
   renderNode,
@@ -3393,7 +3462,8 @@ function WorkbenchNodeLayerItem({
       interactive,
       presentation,
       node,
-      genie,
+      genieNodeVisibility,
+      minimizeNodeToAnchor,
       resolveWindowZIndex,
       fullscreenHeaderMode: fullscreenHeaderMode?.({
         controller,
@@ -3612,6 +3682,10 @@ var genieVerticalRowStagger = 0.2;
 var genieDockGlowRadius = 55;
 var genieScanlineStrideThresholdPx = 640;
 var genieMaxScanlineStride = 3;
+var genieWarmupTextureWidthRatio = 0.65;
+var genieWarmupTextureHeightRatio = 0.7;
+var genieWarmupTextureMaxWidth = 1280;
+var genieWarmupTextureMaxHeight = 800;
 function clampGenieProgress(value) {
   return Math.max(0, Math.min(1, value));
 }
@@ -3642,6 +3716,9 @@ function viewportRectFromElement(element) {
 function isUsableGenieRect(rect) {
   return rect.width > 0 && rect.height > 0;
 }
+function isGenieTextureResolutionSufficient(source, target) {
+  return Number.isFinite(source.width) && Number.isFinite(source.height) && source.width >= Math.max(1, Math.round(target.width)) && source.height >= Math.max(1, Math.round(target.height));
+}
 function centerPointFromRect(rect) {
   return {
     x: rect.left + rect.width / 2,
@@ -3818,9 +3895,117 @@ function renderGenieScanlines(context, viewportWidth, viewportHeight, frame) {
     dirtyRect.height
   );
 }
+function resolveGenieWarmupTextureSize(viewportWidth, viewportHeight) {
+  return {
+    height: Math.max(
+      1,
+      Math.min(
+        genieWarmupTextureMaxHeight,
+        Math.round(viewportHeight * genieWarmupTextureHeightRatio)
+      )
+    ),
+    width: Math.max(
+      1,
+      Math.min(
+        genieWarmupTextureMaxWidth,
+        Math.round(viewportWidth * genieWarmupTextureWidthRatio)
+      )
+    )
+  };
+}
+function renderGenieWarmupFrames(context, viewportWidth, viewportHeight, texture) {
+  const textureRect = {
+    height: texture.height,
+    left: (viewportWidth - texture.width) / 2,
+    top: (viewportHeight - texture.height) / 2,
+    width: texture.width
+  };
+  const dockPoint = {
+    x: viewportWidth / 2,
+    y: Math.max(0, viewportHeight - 24)
+  };
+  renderGenieScanlines(context, viewportWidth, viewportHeight, {
+    direction: "minimize",
+    dockPoint,
+    progress: 0,
+    texture,
+    textureRect
+  });
+  renderGenieScanlines(context, viewportWidth, viewportHeight, {
+    direction: "minimize",
+    dockPoint,
+    progress: 0.5,
+    texture,
+    textureRect
+  });
+  renderGenieScanlines(context, viewportWidth, viewportHeight, {
+    direction: "open",
+    dockPoint,
+    progress: 0,
+    texture,
+    textureRect
+  });
+  context.clearRect(0, 0, viewportWidth, viewportHeight);
+}
 
 // src/react/genieTextureCapture.ts
+var genieCloneMaskImageProperties = [
+  "-webkit-mask-image",
+  "mask-image"
+];
 var readableStylesheetTextByDocument = /* @__PURE__ */ new WeakMap();
+function readSingleCssUrl(value) {
+  const normalized = value.trim();
+  if (!normalized.startsWith("url(") || !normalized.endsWith(")")) {
+    return null;
+  }
+  const inner = normalized.slice(4, -1).trim();
+  if (!inner) {
+    return null;
+  }
+  const quote = inner[0];
+  if (quote === '"' || quote === "'") {
+    return inner.endsWith(quote) ? inner.slice(1, -1) : null;
+  }
+  return inner.includes('"') || inner.includes("'") ? null : inner;
+}
+async function inlineGenieCloneMaskImageResources({
+  cloneRoot,
+  readResource
+}) {
+  const referencesByUrl = /* @__PURE__ */ new Map();
+  const elements = [
+    cloneRoot,
+    ...Array.from(cloneRoot.querySelectorAll("[style]"))
+  ];
+  for (const element of elements) {
+    for (const property of genieCloneMaskImageProperties) {
+      const url = readSingleCssUrl(element.style.getPropertyValue(property));
+      if (!url) {
+        continue;
+      }
+      const references = referencesByUrl.get(url) ?? [];
+      references.push({ element, property });
+      referencesByUrl.set(url, references);
+    }
+  }
+  await Promise.all(
+    Array.from(referencesByUrl.entries(), async ([url, references], index) => {
+      const inlineUrl = await readResource(url);
+      if (!inlineUrl) {
+        return;
+      }
+      const variableName = `--workbench-genie-capture-mask-${index}`;
+      cloneRoot.style.setProperty(
+        variableName,
+        `url(${JSON.stringify(inlineUrl)})`
+      );
+      for (const { element, property } of references) {
+        element.style.setProperty(property, `var(${variableName})`);
+      }
+    })
+  );
+}
 function hasSameStylesheetFingerprints(left, right) {
   return left.length === right.length && left.every((fingerprint, index) => {
     const candidate = right[index];
@@ -3947,6 +4132,224 @@ function prepareGenieTextureCapture(element) {
   };
 }
 
+// src/react/genieTextureCache.ts
+function readWorkbenchGenieTextureCacheEntry(cache, nodeID) {
+  const value = cache.get(nodeID) ?? null;
+  if (!value) {
+    return null;
+  }
+  cache.delete(nodeID);
+  cache.set(nodeID, value);
+  return value;
+}
+function writeWorkbenchGenieTextureCacheEntry(cache, nodeID, value, limits) {
+  cache.delete(nodeID);
+  cache.set(nodeID, value);
+  pruneWorkbenchGenieTextureCache(cache, limits);
+}
+function estimateWorkbenchGenieTextureBytes(value) {
+  return Math.max(0, value.canvas.width) * Math.max(0, value.canvas.height) * 4;
+}
+function pruneRemovedWorkbenchGenieTextureCacheEntries(cache, existingNodeIDs) {
+  for (const nodeID of cache.keys()) {
+    if (!existingNodeIDs.has(nodeID)) {
+      cache.delete(nodeID);
+    }
+  }
+}
+function pruneWorkbenchGenieTextureCache(cache, limits) {
+  let estimatedBytes = 0;
+  for (const value of cache.values()) {
+    estimatedBytes += estimateWorkbenchGenieTextureBytes(value);
+  }
+  while (cache.size > limits.maxEntries || estimatedBytes > limits.maxBytes) {
+    const oldest = cache.entries().next().value;
+    if (!oldest) {
+      return;
+    }
+    cache.delete(oldest[0]);
+    estimatedBytes -= estimateWorkbenchGenieTextureBytes(oldest[1]);
+  }
+}
+
+// src/react/genieNodeVisibility.ts
+function createWorkbenchGenieNodeVisibilityStore() {
+  const hiddenNodeIDs = /* @__PURE__ */ new Set();
+  const hiddenTokenByNodeID = /* @__PURE__ */ new Map();
+  const listenersByNodeID = /* @__PURE__ */ new Map();
+  const setHidden = (nodeID, hidden) => {
+    if (hiddenNodeIDs.has(nodeID) === hidden) {
+      return;
+    }
+    if (hidden) {
+      hiddenNodeIDs.add(nodeID);
+    } else {
+      hiddenNodeIDs.delete(nodeID);
+    }
+    for (const listener of listenersByNodeID.get(nodeID) ?? []) {
+      listener();
+    }
+  };
+  const hide = (nodeID) => {
+    const token = Symbol(nodeID);
+    hiddenTokenByNodeID.set(nodeID, token);
+    setHidden(nodeID, true);
+    return token;
+  };
+  const show = (nodeID, token) => {
+    if (token && hiddenTokenByNodeID.get(nodeID) !== token) {
+      return false;
+    }
+    hiddenTokenByNodeID.delete(nodeID);
+    setHidden(nodeID, false);
+    return true;
+  };
+  return {
+    dispose() {
+      hiddenNodeIDs.clear();
+      hiddenTokenByNodeID.clear();
+      listenersByNodeID.clear();
+    },
+    getSnapshot(nodeID) {
+      return hiddenNodeIDs.has(nodeID);
+    },
+    hide,
+    setHidden(nodeID, hidden) {
+      if (hidden) {
+        hide(nodeID);
+      } else {
+        show(nodeID);
+      }
+    },
+    show,
+    subscribe(nodeID, listener) {
+      const listeners = listenersByNodeID.get(nodeID) ?? /* @__PURE__ */ new Set();
+      listeners.add(listener);
+      listenersByNodeID.set(nodeID, listeners);
+      return () => {
+        listeners.delete(listener);
+        if (listeners.size === 0) {
+          listenersByNodeID.delete(nodeID);
+        }
+      };
+    }
+  };
+}
+
+// src/react/workbenchGenieScheduling.ts
+function startCachedWorkbenchGenieRestore({
+  launch,
+  onLaunchSettled,
+  scheduleTask,
+  startAnimation
+}) {
+  let launchScheduled = false;
+  const launchAfterAnimation = () => {
+    if (launchScheduled) {
+      return;
+    }
+    launchScheduled = true;
+    scheduleTask(() => {
+      void Promise.resolve(launch()).then(onLaunchSettled, onLaunchSettled);
+    });
+  };
+  startAnimation(launchAfterAnimation);
+}
+function scheduleWorkbenchGenieWarmup({
+  isAnimationActive,
+  isWarmupComplete,
+  renderWarmup,
+  scheduler
+}) {
+  let cancelled = false;
+  let idleID = null;
+  const schedule = () => {
+    idleID = scheduler.requestIdleCallback(runWarmup);
+  };
+  const runWarmup = () => {
+    idleID = null;
+    if (cancelled || isWarmupComplete()) {
+      return;
+    }
+    if (isAnimationActive()) {
+      schedule();
+      return;
+    }
+    renderWarmup();
+  };
+  schedule();
+  return () => {
+    cancelled = true;
+    if (idleID !== null) {
+      scheduler.cancelIdleCallback(idleID);
+    }
+  };
+}
+function scheduleWorkbenchGeniePostAnimationIdleTask({
+  isAnimationActive,
+  isCancelled,
+  runTask,
+  scheduler
+}) {
+  let cancelled = false;
+  let idleID = null;
+  const schedule = () => {
+    idleID = scheduler.requestIdleCallback(run);
+  };
+  const run = () => {
+    idleID = null;
+    if (cancelled || isCancelled()) {
+      return;
+    }
+    if (isAnimationActive()) {
+      schedule();
+      return;
+    }
+    runTask();
+  };
+  schedule();
+  return () => {
+    cancelled = true;
+    if (idleID !== null) {
+      scheduler.cancelIdleCallback(idleID);
+    }
+  };
+}
+async function resolveNativeFirstGenieTexture({
+  nativeImageUrlPromise,
+  renderDomFallback,
+  renderNativeImage,
+  timeoutMs
+}) {
+  const nativeCapture = await new Promise((resolve) => {
+    let settled = false;
+    const settleResolved = (nativeImageUrl) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      clearTimeout(timer);
+      resolve({ nativeImageUrl, nativeStatus: "resolved" });
+    };
+    const timer = setTimeout(() => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      resolve({ nativeImageUrl: null, nativeStatus: "pending" });
+    }, timeoutMs);
+    nativeImageUrlPromise.then(settleResolved, () => settleResolved(null));
+  });
+  const nativeTexture = nativeCapture.nativeImageUrl ? await Promise.resolve(
+    renderNativeImage(nativeCapture.nativeImageUrl)
+  ).catch(() => null) : null;
+  const texture = nativeTexture ?? await Promise.resolve(renderDomFallback()).catch(() => null);
+  return {
+    ...nativeCapture,
+    texture
+  };
+}
+
 // src/react/useWorkbenchGenieAnimation.tsx
 import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var genieDurationMs = 400;
@@ -3960,6 +4363,8 @@ var dockAnchorResolveMaxAnimationFrames = 3;
 var dockPreviewMaxWidth = 260;
 var dockPreviewMaxHeight = 170;
 var dockPreviewImageCacheMaxEntries = 96;
+var minimizedGenieTextureCacheMaxBytes = 64 * 1024 * 1024;
+var minimizedGenieTextureCacheMaxEntries = 8;
 var inlineImageResourceCacheMaxEntries = 160;
 var inlineImageResizeTargetCacheMaxEntries = 4;
 var dockAnchorFallbackSizePx = 43.2;
@@ -3977,26 +4382,6 @@ function waitForNextAnimationFrame() {
     window.requestAnimationFrame(() => resolve());
   });
 }
-function racePreviewImageCapture(promise, timeoutMs) {
-  return new Promise((resolve) => {
-    let settled = false;
-    const timer = setTimeout(() => {
-      if (settled) {
-        return;
-      }
-      settled = true;
-      resolve({ previewImageUrl: null, status: "pending" });
-    }, timeoutMs);
-    promise.then((previewImageUrl) => {
-      if (settled) {
-        return;
-      }
-      settled = true;
-      clearTimeout(timer);
-      resolve({ previewImageUrl, status: "resolved" });
-    });
-  });
-}
 function isFocusedWorkbenchNode(controller, nodeID) {
   return controller.getSnapshot().nodeStack.at(-1) === nodeID;
 }
@@ -4094,8 +4479,12 @@ async function inlineCloneImageResources({
   images
 }) {
   const cloneImages = Array.from(cloneRoot.querySelectorAll("img"));
-  await Promise.all(
-    images.map(async (imageInfo, index) => {
+  await Promise.all([
+    inlineGenieCloneMaskImageResources({
+      cloneRoot,
+      readResource: readInlineImageResource
+    }),
+    ...images.map(async (imageInfo, index) => {
       const cloneImage = cloneImages[index];
       if (!cloneImage) {
         return;
@@ -4118,7 +4507,7 @@ async function inlineCloneImageResources({
       }
       cloneImage.src = inlineImageUrl;
     })
-  );
+  ]);
 }
 async function loadImageFromSvg(svg) {
   const image = new Image();
@@ -4293,6 +4682,12 @@ async function renderPreviewImageTexture({
   const image = new Image();
   image.src = previewImageUrl;
   await image.decode();
+  if (!isGenieTextureResolutionSufficient(
+    { height: image.naturalHeight, width: image.naturalWidth },
+    rect
+  )) {
+    return null;
+  }
   const canvas = document.createElement("canvas");
   canvas.width = Math.max(1, Math.round(rect.width * genieSnapshotScale));
   canvas.height = Math.max(1, Math.round(rect.height * genieSnapshotScale));
@@ -4415,6 +4810,7 @@ function createGenieSvgTexture(element, rect, outputSize = {
 }
 function useWorkbenchGenieAnimation({
   captureNodePreviewImage,
+  captureNodePreviewImages,
   controller,
   debugDiagnostics,
   dockPreviewCache,
@@ -4427,6 +4823,7 @@ function useWorkbenchGenieAnimation({
   const dockAnchorElementsRef = useRef5(/* @__PURE__ */ new Map());
   const canvasRef = useRef5(null);
   const rafRef = useRef5(null);
+  const isMountedRef = useRef5(true);
   const animationGenerationRef = useRef5(0);
   const animationCleanupRef = useRef5(null);
   const minimizedDockEnterAnimationNodeIdsRef = useRef5(/* @__PURE__ */ new Set());
@@ -4436,13 +4833,14 @@ function useWorkbenchGenieAnimation({
   const minimizedGenieTextureByNodeIDRef = useRef5(
     /* @__PURE__ */ new Map()
   );
+  const genieCanvasWarmupCompletedRef = useRef5(false);
   const renderedPreviewCaptureIDRef = useRef5(0);
   const renderedPreviewCaptureElementRef = useRef5(null);
   const pendingRenderedPreviewCaptureRef = useRef5(null);
+  const nodeVisibilityStoreRef = useRef5(null);
+  nodeVisibilityStoreRef.current ??= createWorkbenchGenieNodeVisibilityStore();
+  const nodeVisibility = nodeVisibilityStoreRef.current;
   const [isCanvasActive, setIsCanvasActive] = useState4(false);
-  const [genieHiddenNodeIDs, setGenieHiddenNodeIDs] = useState4(
-    () => /* @__PURE__ */ new Set()
-  );
   const [pendingMinimizedNode, setPendingMinimizedNode] = useState4(null);
   const [pendingRenderedPreviewCapture, setPendingRenderedPreviewCapture] = useState4(null);
   const registerDockAnchor = useCallback7(
@@ -4520,53 +4918,49 @@ function useWorkbenchGenieAnimation({
     return minimizedDockEnterAnimationNodeIdsRef.current.has(nodeID);
   }, []);
   const readMinimizedGenieTexture = useCallback7((nodeID) => {
-    return minimizedGenieTextureByNodeIDRef.current.get(nodeID) ?? null;
+    return readWorkbenchGenieTextureCacheEntry(
+      minimizedGenieTextureByNodeIDRef.current,
+      nodeID
+    );
   }, []);
   const writeMinimizedGenieTexture = useCallback7(
     (nodeID, texture) => {
-      const cache = minimizedGenieTextureByNodeIDRef.current;
-      cache.delete(nodeID);
-      cache.set(nodeID, texture);
+      writeWorkbenchGenieTextureCacheEntry(
+        minimizedGenieTextureByNodeIDRef.current,
+        nodeID,
+        texture,
+        {
+          maxBytes: minimizedGenieTextureCacheMaxBytes,
+          maxEntries: minimizedGenieTextureCacheMaxEntries
+        }
+      );
     },
     []
   );
   const clearMinimizedGenieTexture = useCallback7((nodeID) => {
     minimizedGenieTextureByNodeIDRef.current.delete(nodeID);
   }, []);
-  const pruneMinimizedGenieTextures = useCallback7(
-    (retainNodeID) => {
-      const minimizedNodeIDs = new Set(
-        controller.getSnapshot().nodes.filter((node) => node.isMinimized === true).map((node) => node.id)
-      );
-      if (retainNodeID) {
-        minimizedNodeIDs.add(retainNodeID);
-      }
-      for (const nodeID of minimizedGenieTextureByNodeIDRef.current.keys()) {
-        if (!minimizedNodeIDs.has(nodeID)) {
-          minimizedGenieTextureByNodeIDRef.current.delete(nodeID);
-        }
-      }
+  const pruneRemovedNodeGenieTextures = useCallback7(() => {
+    const existingNodeIDs = new Set(
+      controller.getSnapshot().nodes.map((node) => node.id)
+    );
+    pruneRemovedWorkbenchGenieTextureCacheEntries(
+      minimizedGenieTextureByNodeIDRef.current,
+      existingNodeIDs
+    );
+  }, [controller]);
+  const hideNodeForGenie = useCallback7(
+    (nodeID) => {
+      return nodeVisibility.hide(nodeID);
     },
-    [controller]
+    [nodeVisibility]
+  );
+  const showNodeForGenie = useCallback7(
+    (nodeID, token) => {
+      return nodeVisibility.show(nodeID, token);
+    },
+    [nodeVisibility]
   );
-  const hideNodeForGenie = useCallback7((nodeID) => {
-    setGenieHiddenNodeIDs((current) => {
-      if (current.has(nodeID)) {
-        return current;
-      }
-      return /* @__PURE__ */ new Set([...current, nodeID]);
-    });
-  }, []);
-  const showNodeForGenie = useCallback7((nodeID) => {
-    setGenieHiddenNodeIDs((current) => {
-      if (!current.has(nodeID)) {
-        return current;
-      }
-      const next = new Set(current);
-      next.delete(nodeID);
-      return next;
-    });
-  }, []);
   const clearPendingMinimizedNode = useCallback7((nodeID) => {
     setPendingMinimizedNode(
       (current) => current?.id === nodeID ? null : current
@@ -4658,8 +5052,20 @@ function useWorkbenchGenieAnimation({
     );
     const viewportWidth = window.innerWidth;
     const viewportHeight = window.innerHeight;
-    canvas.width = Math.max(1, Math.round(viewportWidth * devicePixelRatio));
-    canvas.height = Math.max(1, Math.round(viewportHeight * devicePixelRatio));
+    const pixelWidth = Math.max(
+      1,
+      Math.round(viewportWidth * devicePixelRatio)
+    );
+    const pixelHeight = Math.max(
+      1,
+      Math.round(viewportHeight * devicePixelRatio)
+    );
+    if (canvas.width !== pixelWidth) {
+      canvas.width = pixelWidth;
+    }
+    if (canvas.height !== pixelHeight) {
+      canvas.height = pixelHeight;
+    }
     canvas.style.width = `${viewportWidth}px`;
     canvas.style.height = `${viewportHeight}px`;
     const context = canvas.getContext("2d");
@@ -4669,6 +5075,48 @@ function useWorkbenchGenieAnimation({
     context.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
     return { context, viewportHeight, viewportWidth };
   }, []);
+  useEffect4(() => {
+    if (minimizeAnimation !== "genie" || shouldReduceMotion() || typeof window.requestIdleCallback !== "function") {
+      return;
+    }
+    return scheduleWorkbenchGenieWarmup({
+      isAnimationActive: () => rafRef.current !== null,
+      isWarmupComplete: () => !isMountedRef.current || genieCanvasWarmupCompletedRef.current,
+      renderWarmup: function warmGenieCanvas() {
+        const setup = setupCanvas();
+        if (!setup) {
+          return;
+        }
+        const warmupSize = resolveGenieWarmupTextureSize(
+          setup.viewportWidth,
+          setup.viewportHeight
+        );
+        const warmupTexture = document.createElement("canvas");
+        warmupTexture.width = warmupSize.width;
+        warmupTexture.height = warmupSize.height;
+        const warmupContext = warmupTexture.getContext("2d");
+        warmupContext?.fillRect(
+          0,
+          0,
+          warmupTexture.width,
+          warmupTexture.height
+        );
+        renderGenieWarmupFrames(
+          setup.context,
+          setup.viewportWidth,
+          setup.viewportHeight,
+          warmupTexture
+        );
+        genieCanvasWarmupCompletedRef.current = true;
+      },
+      scheduler: {
+        cancelIdleCallback: (idleID) => {
+          window.cancelIdleCallback(idleID);
+        },
+        requestIdleCallback: (callback) => window.requestIdleCallback(callback)
+      }
+    });
+  }, [minimizeAnimation, setupCanvas]);
   const clearCanvas = useCallback7(() => {
     const canvas = canvasRef.current;
     const context = canvas?.getContext("2d") ?? null;
@@ -4989,7 +5437,52 @@ function useWorkbenchGenieAnimation({
       }
       stopAnimation();
       const dockRectFallback = resolveDockAnchorRect(anchorKey);
-      hideNodeForGenie(nodeID);
+      let visibilityToken = null;
+      flushSync(() => {
+        visibilityToken = hideNodeForGenie(nodeID);
+      });
+      let launchPromise = null;
+      const launchOnce = () => {
+        if (!isMountedRef.current) {
+          return Promise.resolve(null);
+        }
+        launchPromise ??= Promise.resolve(launch()).catch(() => null);
+        return launchPromise;
+      };
+      const cachedTexture = readMinimizedGenieTexture(nodeID);
+      if (effectiveMinimizeAnimation === "genie" && cachedTexture && dockRectFallback && isUsableGenieRect(dockRectFallback)) {
+        const generation2 = animationGenerationRef.current;
+        const revealLaunchedNode = () => {
+          const settledVisibilityToken = visibilityToken;
+          if (!isMountedRef.current || !settledVisibilityToken) {
+            return;
+          }
+          flushSync(() => {
+            showNodeForGenie(nodeID, settledVisibilityToken);
+          });
+          if (generation2 === animationGenerationRef.current) {
+            clearCanvas();
+          }
+        };
+        startCachedWorkbenchGenieRestore({
+          launch: launchOnce,
+          onLaunchSettled: revealLaunchedNode,
+          scheduleTask: (callback) => {
+            window.setTimeout(callback, 0);
+          },
+          startAnimation: (onAnimationSettled) => {
+            runGenieAnimation({
+              direction: "open",
+              dockRect: dockRectFallback,
+              onCancel: onAnimationSettled,
+              onComplete: onAnimationSettled,
+              skipStop: true,
+              texture: cachedTexture
+            });
+          }
+        });
+        return;
+      }
       animationCleanupRef.current = () => {
         if (rafRef.current !== null) {
           window.cancelAnimationFrame(rafRef.current);
@@ -5007,7 +5500,7 @@ function useWorkbenchGenieAnimation({
         if (generation !== animationGenerationRef.current) {
           return;
         }
-        void Promise.resolve(launch()).catch(() => null).then(() => {
+        void launchOnce().then(() => {
           if (generation !== animationGenerationRef.current) {
             return;
           }
@@ -5027,7 +5520,9 @@ function useWorkbenchGenieAnimation({
       controller,
       hideNodeForGenie,
       minimizeAnimation,
+      readMinimizedGenieTexture,
       resolveDockAnchorRect,
+      runGenieAnimation,
       showNodeForGenie,
       startOpenOrRestoreAnimation,
       stopAnimation
@@ -5036,9 +5531,9 @@ function useWorkbenchGenieAnimation({
   const minimizeNodeToAnchor = useCallback7(
     (nodeID, minimize) => {
       void (async () => {
-        pruneMinimizedGenieTextures();
         const target = controller.getSnapshot().nodes.find((node) => node.id === nodeID);
         if (!target) {
+          pruneRemovedNodeGenieTextures();
           logWorkbenchGenieDiagnostic(
             debugDiagnostics,
             "workbench.genie.minimize.skipped",
@@ -5050,9 +5545,12 @@ function useWorkbenchGenieAnimation({
           );
           return;
         }
-        clearMinimizedGenieTexture(nodeID);
+        pruneRemovedNodeGenieTextures();
         const runMinimize = minimize ?? (() => controller.commands.minimizeNode(nodeID));
         const effectiveMinimizeAnimation = shouldReduceMotion() ? "off" : minimizeAnimation;
+        if (effectiveMinimizeAnimation !== "genie") {
+          clearMinimizedGenieTexture(nodeID);
+        }
         const shouldCapturePreview = shouldCaptureNodePreviewImage?.(target) ?? true;
         if (effectiveMinimizeAnimation === "off") {
           stopAnimation();
@@ -5255,14 +5753,16 @@ function useWorkbenchGenieAnimation({
           isMinimized: true,
           minimizedAtUnixMs: Date.now()
         };
-        const componentPreviewTexture = shouldCapturePreview ? null : await requestRenderedGeniePreviewTexture({
+        const cachedTexture = shouldCapturePreview ? readMinimizedGenieTexture(nodeID) : null;
+        const reusableTexture = cachedTexture && isGenieTextureResolutionSufficient(cachedTexture.canvas, windowRect) ? { canvas: cachedTexture.canvas, rect: windowRect } : null;
+        const componentPreviewTexture = reusableTexture || shouldCapturePreview ? null : await requestRenderedGeniePreviewTexture({
           node: pendingMinimizedNode2,
           textureRect: windowRect
         }).catch(() => null);
         if (generation !== animationGenerationRef.current) {
           return;
         }
-        if (!shouldCapturePreview) {
+        if (!reusableTexture && !shouldCapturePreview) {
           if (!componentPreviewTexture) {
             logWorkbenchGenieDiagnostic(
               debugDiagnostics,
@@ -5280,25 +5780,6 @@ function useWorkbenchGenieAnimation({
             return;
           }
         }
-        const captureTarget = resolveWorkbenchCaptureElement(nodeElement);
-        const preparedTexture = shouldCapturePreview ? prepareGenieTextureCapture(captureTarget) : null;
-        if (!preparedTexture) {
-          if (!componentPreviewTexture) {
-            logWorkbenchGenieDiagnostic(
-              debugDiagnostics,
-              "workbench.genie.minimize.skipped",
-              {
-                ...describeGenieNode(target),
-                mode: "genie",
-                reason: "prepared_texture_missing",
-                shouldCapturePreview
-              },
-              "warn"
-            );
-            runMinimize();
-            return;
-          }
-        }
         const wasFocusedForCapture = isFocusedWorkbenchNode(controller, nodeID);
         if (shouldCapturePreview && !wasFocusedForCapture) {
           flushSync(() => {
@@ -5309,43 +5790,96 @@ function useWorkbenchGenieAnimation({
             return;
           }
         }
-        const previewImageUrlPromise = shouldCapturePreview ? Promise.resolve(captureNodePreviewImage?.(target) ?? null).catch(
+        const previewImagesPromise = shouldCapturePreview ? captureNodePreviewImages ? Promise.resolve(captureNodePreviewImages(target)).catch(
           () => null
-        ) : Promise.resolve(null);
-        const previewCaptureOutcome = await racePreviewImageCapture(
-          previewImageUrlPromise,
-          previewCaptureRaceTimeoutMs
+        ) : Promise.resolve(captureNodePreviewImage?.(target) ?? null).then(
+          (previewImageUrl) => previewImageUrl ? {
+            dockPreviewImageUrl: previewImageUrl,
+            genieImageUrl: previewImageUrl
+          } : null
+        ).catch(() => null) : Promise.resolve(null);
+        const previewImageUrlPromise = previewImagesPromise.then(
+          (images) => images?.genieImageUrl ?? null
         );
-        const previewImageUrl = previewCaptureOutcome.previewImageUrl;
-        if (previewCaptureOutcome.status === "pending") {
+        let preparedTexture = null;
+        let previewImageTexture = null;
+        const nativeFirstResult = shouldCapturePreview && !reusableTexture ? await resolveNativeFirstGenieTexture({
+          nativeImageUrlPromise: previewImageUrlPromise,
+          renderDomFallback: () => {
+            preparedTexture = prepareGenieTextureCapture(
+              resolveWorkbenchCaptureElement(nodeElement)
+            );
+            return preparedTexture ? renderPreparedElementTexture(preparedTexture) : null;
+          },
+          renderNativeImage: async (previewImageUrl) => {
+            previewImageTexture = await renderPreviewImageTexture({
+              previewImageUrl,
+              rect: windowRect
+            }).catch(() => null);
+            return previewImageTexture;
+          },
+          timeoutMs: previewCaptureRaceTimeoutMs
+        }) : null;
+        const previewImages = nativeFirstResult?.nativeStatus === "resolved" ? await previewImagesPromise : null;
+        const dockPreviewImageUrl = previewImages?.dockPreviewImageUrl ?? null;
+        if (reusableTexture || nativeFirstResult?.nativeStatus === "pending") {
           logWorkbenchGenieDiagnostic(
             debugDiagnostics,
             "workbench.genie.preview_capture.deferred",
             {
               ...describeGenieNode(target),
               mode: "genie",
+              reusedCachedTexture: Boolean(reusableTexture),
               timeoutMs: previewCaptureRaceTimeoutMs
             },
             "debug"
           );
-          void previewImageUrlPromise.then((latePreviewImageUrl) => {
-            if (!latePreviewImageUrl || generation !== animationGenerationRef.current) {
+          void previewImagesPromise.then((latePreviewImages) => {
+            const latePreviewImageUrl = latePreviewImages?.genieImageUrl;
+            const lateDockPreviewImageUrl = latePreviewImages?.dockPreviewImageUrl;
+            if (generation !== animationGenerationRef.current) {
               return;
             }
-            writeCachedWorkbenchNodePreviewImage(nodeID, latePreviewImageUrl);
-            persistWorkbenchNodePreviewImage(target, latePreviewImageUrl, {
-              dockPreviewCache,
-              resolveDockPreviewCacheKey: resolveDockPreviewCacheKey2
+            if (lateDockPreviewImageUrl) {
+              writeCachedWorkbenchNodePreviewImage(
+                nodeID,
+                lateDockPreviewImageUrl
+              );
+              persistWorkbenchNodePreviewImage(
+                target,
+                lateDockPreviewImageUrl,
+                {
+                  dockPreviewCache,
+                  resolveDockPreviewCacheKey: resolveDockPreviewCacheKey2
+                }
+              );
+            }
+            if (!latePreviewImageUrl || typeof window.requestIdleCallback !== "function") {
+              return;
+            }
+            scheduleWorkbenchGeniePostAnimationIdleTask({
+              isAnimationActive: () => rafRef.current !== null,
+              isCancelled: () => !isMountedRef.current || generation !== animationGenerationRef.current,
+              runTask: () => {
+                void renderPreviewImageTexture({
+                  previewImageUrl: latePreviewImageUrl,
+                  rect: windowRect
+                }).catch(() => null).then((refreshedTexture) => {
+                  if (refreshedTexture && generation === animationGenerationRef.current) {
+                    writeMinimizedGenieTexture(nodeID, refreshedTexture);
+                  }
+                });
+              },
+              scheduler: {
+                cancelIdleCallback: (idleID) => {
+                  window.cancelIdleCallback(idleID);
+                },
+                requestIdleCallback: (callback) => window.requestIdleCallback(callback)
+              }
             });
           });
         }
-        const previewImageTexture = shouldCapturePreview && previewImageUrl ? await renderPreviewImageTexture({
-          previewImageUrl,
-          rect: windowRect
-        }).catch(() => null) : null;
-        const texture = componentPreviewTexture ?? previewImageTexture ?? (preparedTexture ? await renderPreparedElementTexture(preparedTexture).catch(
-          () => null
-        ) : null);
+        const texture = reusableTexture ?? componentPreviewTexture ?? nativeFirstResult?.texture ?? null;
         if (generation !== animationGenerationRef.current) {
           return;
         }
@@ -5364,9 +5898,9 @@ function useWorkbenchGenieAnimation({
             },
             "warn"
           );
-          if (previewImageUrl) {
-            writeCachedWorkbenchNodePreviewImage(nodeID, previewImageUrl);
-            persistWorkbenchNodePreviewImage(target, previewImageUrl, {
+          if (dockPreviewImageUrl) {
+            writeCachedWorkbenchNodePreviewImage(nodeID, dockPreviewImageUrl);
+            persistWorkbenchNodePreviewImage(target, dockPreviewImageUrl, {
               dockPreviewCache,
               resolveDockPreviewCacheKey: resolveDockPreviewCacheKey2
             });
@@ -5374,9 +5908,9 @@ function useWorkbenchGenieAnimation({
           runMinimize();
           return;
         }
-        if (previewImageUrl) {
-          writeCachedWorkbenchNodePreviewImage(nodeID, previewImageUrl);
-          persistWorkbenchNodePreviewImage(target, previewImageUrl, {
+        if (dockPreviewImageUrl) {
+          writeCachedWorkbenchNodePreviewImage(nodeID, dockPreviewImageUrl);
+          persistWorkbenchNodePreviewImage(target, dockPreviewImageUrl, {
             dockPreviewCache,
             resolveDockPreviewCacheKey: resolveDockPreviewCacheKey2
           });
@@ -5391,7 +5925,7 @@ function useWorkbenchGenieAnimation({
           });
         }
         writeMinimizedGenieTexture(nodeID, texture);
-        pruneMinimizedGenieTextures(nodeID);
+        pruneRemovedNodeGenieTextures();
         let minimizeCommitted = false;
         const commitMinimize = () => {
           if (minimizeCommitted) {
@@ -5453,13 +5987,19 @@ function useWorkbenchGenieAnimation({
             cleanupPendingGenieMinimize();
           },
           onComplete: () => {
-            scheduleReleaseMinimizedDockEnterAnimation(nodeID);
-            flushSync(() => {
-              clearPendingMinimizedNode(nodeID);
-              showNodeForGenie(nodeID);
-              commitMinimize();
-            });
-            clearCanvas();
+            window.setTimeout(() => {
+              if (!isMountedRef.current) {
+                commitMinimize();
+                return;
+              }
+              scheduleReleaseMinimizedDockEnterAnimation(nodeID);
+              flushSync(() => {
+                clearPendingMinimizedNode(nodeID);
+                showNodeForGenie(nodeID);
+                commitMinimize();
+              });
+              clearCanvas();
+            }, 0);
           },
           skipStop: true,
           texture
@@ -5474,12 +6014,14 @@ function useWorkbenchGenieAnimation({
       clearMinimizedGenieTexture,
       controller,
       captureNodePreviewImage,
+      captureNodePreviewImages,
       clearPendingMinimizedNode,
       debugDiagnostics,
       dockPreviewCache,
       hideNodeForGenie,
       minimizeAnimation,
-      pruneMinimizedGenieTextures,
+      pruneRemovedNodeGenieTextures,
+      readMinimizedGenieTexture,
       registerMinimizedDockEnterAnimation,
       releaseMinimizedDockEnterAnimation,
       requestRenderedGeniePreviewTexture,
@@ -5497,17 +6039,25 @@ function useWorkbenchGenieAnimation({
       writeMinimizedGenieTexture
     ]
   );
-  useEffect4(
-    () => () => {
+  useEffect4(() => {
+    pruneRemovedNodeGenieTextures();
+    return controller.subscribe(() => {
+      pruneRemovedNodeGenieTextures();
+    });
+  }, [controller, pruneRemovedNodeGenieTextures]);
+  useEffect4(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
       for (const timer of minimizedDockEnterAnimationTimersRef.current.values()) {
         clearTimeout(timer);
       }
       minimizedDockEnterAnimationTimersRef.current.clear();
       minimizedDockEnterAnimationNodeIdsRef.current.clear();
       minimizedGenieTextureByNodeIDRef.current.clear();
-    },
-    []
-  );
+      nodeVisibility.dispose();
+    };
+  }, [nodeVisibility]);
   const minimizeNodeToAnchorRef = useRef5(minimizeNodeToAnchor);
   useLayoutEffect5(() => {
     minimizeNodeToAnchorRef.current = minimizeNodeToAnchor;
@@ -5551,10 +6101,6 @@ function useWorkbenchGenieAnimation({
     ),
     [isCanvasActive, pendingRenderedPreviewCapture]
   );
-  const isNodeGenieHidden = useCallback7(
-    (nodeID) => genieHiddenNodeIDs.has(nodeID),
-    [genieHiddenNodeIDs]
-  );
   const isPendingMinimizedDockNode = useCallback7(
     (nodeID) => pendingMinimizedNode?.id === nodeID,
     [pendingMinimizedNode]
@@ -5562,19 +6108,19 @@ function useWorkbenchGenieAnimation({
   return useMemo6(
     () => ({
       genieLayer,
-      isNodeGenieHidden,
       isPendingMinimizedDockNode,
       launchNodeFromAnchor,
       minimizeNodeToAnchor: stableMinimizeNodeToAnchor,
+      nodeVisibility,
       pendingMinimizedNode,
       registerDockAnchor,
       shouldAnimateMinimizedDockEnter
     }),
     [
       genieLayer,
-      isNodeGenieHidden,
       isPendingMinimizedDockNode,
       launchNodeFromAnchor,
+      nodeVisibility,
       pendingMinimizedNode,
       registerDockAnchor,
       shouldAnimateMinimizedDockEnter,
@@ -5587,6 +6133,7 @@ function useWorkbenchGenieAnimation({
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function WorkbenchSurface({
   captureNodePreviewImage,
+  captureNodePreviewImages,
   className,
   controller,
   debugDiagnostics,
@@ -5624,6 +6171,7 @@ function WorkbenchSurface({
     WorkbenchSurfaceInner,
     {
       captureNodePreviewImage,
+      captureNodePreviewImages,
       className,
       debugDiagnostics,
       dockPreviewCache,
@@ -5660,6 +6208,7 @@ function WorkbenchSurface({
 }
 function WorkbenchSurfaceInner({
   captureNodePreviewImage,
+  captureNodePreviewImages,
   className,
   debugDiagnostics,
   dockPreviewCache,
@@ -5702,6 +6251,7 @@ function WorkbenchSurfaceInner({
   const ref = useWorkbenchSurfaceSize(onSizeChange);
   const genie = useWorkbenchGenieAnimation({
     captureNodePreviewImage,
+    captureNodePreviewImages,
     controller,
     debugDiagnostics,
     dockPreviewCache,
@@ -6973,7 +7523,7 @@ function nullableRectsEqual(left, right) {
 }
 
 // src/host/externalState.ts
-import { useCallback as useCallback9, useMemo as useMemo7, useSyncExternalStore } from "react";
+import { useCallback as useCallback9, useMemo as useMemo7, useSyncExternalStore as useSyncExternalStore2 } from "react";
 var noopSubscribe = () => () => {
 };
 function createWorkbenchHostExternalStateLookupInput(input) {
@@ -7018,12 +7568,12 @@ function useWorkbenchHostExternalState(input) {
     [input.externalStateSource, workspaceInput]
   );
   return {
-    externalNodeState: useSyncExternalStore(
+    externalNodeState: useSyncExternalStore2(
       subscribeNodeState,
       getNodeState,
       getNodeState
     ),
-    externalWorkspaceState: useSyncExternalStore(
+    externalWorkspaceState: useSyncExternalStore2(
       subscribeWorkspaceState,
       getWorkspaceState,
       getWorkspaceState
@@ -13715,6 +14265,7 @@ function createWorkbenchHostNodeBodyContext({
   externalState,
   externalStateSource,
   host,
+  isVisible,
   workspaceId
 }) {
   const resolvedExternalState = externalState ?? readWorkbenchHostExternalState({
@@ -13736,6 +14287,7 @@ function createWorkbenchHostNodeBodyContext({
     isDragging: context.isDragging,
     isFocused: selectFocusedWorkbenchNode(host.getSnapshot())?.id === context.node.id,
     isResizing: context.isResizing,
+    isVisible,
     presentationMode: context.layout.presentation?.mode ?? null,
     node: context.node,
     setNodeRuntimeState(state) {
@@ -13873,7 +14425,7 @@ function useWorkbenchHostSurfaceRenderers(input) {
     input.renderTopChrome,
     input.workspaceId
   ]);
-  const captureNodePreviewImage = useCallback13(
+  const captureNodeDefinitionPreviewImage = useCallback13(
     async (node) => {
       const definition = input.nodeDefinitionByType.get(node.data.typeId);
       const minimizedDock = definition?.window?.minimizedDock;
@@ -13884,7 +14436,7 @@ function useWorkbenchHostSurfaceRenderers(input) {
         node,
         workspaceId: input.workspaceId
       });
-      const nodePreview = await Promise.resolve(
+      return Promise.resolve(
         capturePreview?.({
           externalNodeState: externalState.externalNodeState,
           externalWorkspaceState: externalState.externalWorkspaceState,
@@ -13893,19 +14445,49 @@ function useWorkbenchHostSurfaceRenderers(input) {
           isMinimized: node.isMinimized,
           node
         }) ?? null
-      ).catch(() => null) ?? await Promise.resolve(
-        input.captureNodePreviewImage?.(node) ?? null
       ).catch(() => null);
-      return nodePreview;
     },
     [
-      input.captureNodePreviewImage,
       input.externalStateSource,
       input.hostSession,
       input.nodeDefinitionByType,
       input.workspaceId
     ]
   );
+  const captureNodePreviewImage = useCallback13(
+    async (node) => await captureNodeDefinitionPreviewImage(node) ?? await Promise.resolve(
+      input.captureNodePreviewImage?.(node) ?? null
+    ).catch(() => null),
+    [captureNodeDefinitionPreviewImage, input.captureNodePreviewImage]
+  );
+  const captureNodePreviewImages = useCallback13(
+    async (node) => {
+      const [images, definitionDockPreviewImageUrl] = await Promise.all([
+        Promise.resolve(input.captureNodePreviewImages?.(node) ?? null).catch(
+          () => null
+        ),
+        captureNodeDefinitionPreviewImage(node)
+      ]);
+      if (!images) {
+        const legacyPreviewImageUrl = definitionDockPreviewImageUrl ?? await Promise.resolve(
+          input.captureNodePreviewImage?.(node) ?? null
+        ).catch(() => null);
+        return legacyPreviewImageUrl ? {
+          dockPreviewImageUrl: legacyPreviewImageUrl,
+          genieImageUrl: legacyPreviewImageUrl
+        } : null;
+      }
+      return {
+        ...images,
+        dockPreviewImageUrl: definitionDockPreviewImageUrl ?? images.dockPreviewImageUrl
+      };
+    },
+    [
+      captureNodeDefinitionPreviewImage,
+      input.captureNodePreviewImage,
+      input.captureNodePreviewImages
+    ]
+  );
   const renderDock = useCallback13(
     (context) => /* @__PURE__ */ jsx14(
       WorkbenchHostSurfaceRenderErrorBoundary,
@@ -14131,6 +14713,7 @@ function useWorkbenchHostSurfaceRenderers(input) {
   );
   return {
     captureNodePreviewImage,
+    captureNodePreviewImages,
     renderBottomChrome,
     renderDock,
     renderNode,
@@ -14150,6 +14733,7 @@ function useWorkbenchHostSurfaceRenderers(input) {
   };
 }
 function WorkbenchHostNodeRenderer(input) {
+  const isVisible = useWorkbenchWindowPresentationVisibility();
   const externalState = useWorkbenchHostExternalState({
     externalStateSource: input.externalStateSource,
     node: input.context.node,
@@ -14161,6 +14745,7 @@ function WorkbenchHostNodeRenderer(input) {
     externalState,
     externalStateSource: input.externalStateSource,
     host: input.host,
+    isVisible,
     workspaceId: input.workspaceId
   });
   const resetKey = useMemo10(
@@ -14428,6 +15013,7 @@ var noop3 = () => {
 };
 function WorkbenchHost({
   captureNodePreviewImage,
+  captureNodePreviewImages,
   className,
   contributions,
   debugDiagnostics,
@@ -14512,6 +15098,7 @@ function WorkbenchHost({
   });
   const surfaceRenderers = useWorkbenchHostSurfaceRenderers({
     captureNodePreviewImage,
+    captureNodePreviewImages,
     chromeContext,
     debugDiagnostics,
     dockPreviewCache,
@@ -14543,6 +15130,7 @@ function WorkbenchHost({
     {
       className,
       captureNodePreviewImage: surfaceRenderers.captureNodePreviewImage,
+      captureNodePreviewImages: surfaceRenderers.captureNodePreviewImages,
       controller: hostSession.controller,
       debugDiagnostics,
       dockPreviewCache,