@tutti-os/workbench-surface 0.0.215 → 0.0.217

package/dist/index.js

@@ -3718,117 +3718,6 @@ function resolveGenieRowTargetY({
   const verticalEase = easeInQuadratic(verticalProgress);
   return direction === "minimize" ? lerpGenieValue(textureRect.top + sourceY, dockPoint.y, verticalEase) : lerpGenieValue(dockPoint.y, textureRect.top + sourceY, verticalEase);
 }
-function canInlineComputedStyle(element) {
-  return element instanceof HTMLElement || typeof SVGElement !== "undefined" && element instanceof SVGElement;
-}
-function isHiddenForGenieTexture(computed) {
-  return computed.display === "none" || computed.visibility === "hidden" || computed.visibility === "collapse" || Number.parseFloat(computed.opacity || "1") <= 0;
-}
-function rectsIntersect(a, b) {
-  return a.left < b.left + b.width && a.left + a.width > b.left && a.top < b.top + b.height && a.top + a.height > b.top;
-}
-function resolveElementSkipReasonForGenieTexture(element, rootRect, computed) {
-  if (isHiddenForGenieTexture(computed)) {
-    return "hidden";
-  }
-  const tagName = element.tagName.toLowerCase();
-  if (tagName === "script" || tagName === "style" || tagName === "template") {
-    return "unsupported";
-  }
-  const rect = element.getBoundingClientRect();
-  if (rect.width <= 0 || rect.height <= 0) {
-    return "zero-size";
-  }
-  return rectsIntersect(
-    {
-      height: rect.height,
-      left: rect.left,
-      top: rect.top,
-      width: rect.width
-    },
-    rootRect
-  ) ? null : "offscreen";
-}
-function hasMeaningfulTextNode(node) {
-  return node.textContent?.trim() ? true : false;
-}
-function cloneMeaningfulGenieNode(source, rootRect, images, forceInclude = false) {
-  if (source.nodeType === Node.TEXT_NODE) {
-    if (!hasMeaningfulTextNode(source)) {
-      return null;
-    }
-    return source.cloneNode(false);
-  }
-  if (source.nodeType !== Node.ELEMENT_NODE) {
-    return null;
-  }
-  const sourceElement = source;
-  if (!canInlineComputedStyle(sourceElement)) {
-    return null;
-  }
-  const computed = window.getComputedStyle(sourceElement);
-  const skipReason = resolveElementSkipReasonForGenieTexture(
-    sourceElement,
-    rootRect,
-    computed
-  );
-  const includeSelf = forceInclude || skipReason === null;
-  if (!includeSelf && skipReason === "hidden") {
-    return null;
-  }
-  const clone = sourceElement.cloneNode(false);
-  copyGenieComputedStyle(sourceElement, clone, computed);
-  for (const child of Array.from(source.childNodes)) {
-    const childClone = cloneMeaningfulGenieNode(child, rootRect, images);
-    if (childClone) {
-      clone.appendChild(childClone);
-    }
-  }
-  if (!includeSelf && clone.childNodes.length === 0) {
-    return null;
-  }
-  if (sourceElement instanceof HTMLImageElement) {
-    const rect = sourceElement.getBoundingClientRect();
-    images.push({
-      displayHeight: rect.height,
-      displayWidth: rect.width,
-      url: sourceElement.currentSrc || sourceElement.src || sourceElement.getAttribute("src") || null
-    });
-  }
-  return clone;
-}
-function copyGenieComputedStyle(source, clone, computed = window.getComputedStyle(source)) {
-  if (!canInlineComputedStyle(source) || !canInlineComputedStyle(clone)) {
-    return;
-  }
-  if (computed.cssText) {
-    clone.style.cssText = computed.cssText;
-  } else {
-    for (let index = 0; index < computed.length; index += 1) {
-      const propertyName = computed.item(index);
-      if (!propertyName) {
-        continue;
-      }
-      clone.style.setProperty(
-        propertyName,
-        computed.getPropertyValue(propertyName),
-        computed.getPropertyPriority(propertyName)
-      );
-    }
-  }
-  clone.style.animation = "none";
-  clone.style.opacity = "1";
-  clone.style.transition = "none";
-  clone.style.visibility = "visible";
-}
-function cloneMeaningfulGenieElement(source, rootRect) {
-  const images = [];
-  const clone = cloneMeaningfulGenieNode(source, rootRect, images, true);
-  if (!(clone instanceof HTMLElement)) {
-    return null;
-  }
-  return { clone, images };
-}
 function renderGenieScanlines(context, viewportWidth, viewportHeight, frame) {
   const { direction, dockPoint, texture, textureRect } = frame;
   const progress = clampGenieProgress(frame.progress);
@@ -3930,6 +3819,109 @@ function renderGenieScanlines(context, viewportWidth, viewportHeight, frame) {
   );
 }
 
+// src/react/genieTextureCapture.ts
+function collectReadableStylesheetText(document2) {
+  const rules = [];
+  for (const stylesheet of Array.from(document2.styleSheets)) {
+    try {
+      for (const rule of Array.from(stylesheet.cssRules)) {
+        rules.push(rule.cssText);
+      }
+    } catch {
+    }
+  }
+  return rules.join("\n");
+}
+function collectImageClones(element) {
+  return Array.from(element.querySelectorAll("img")).map((image) => {
+    const rect = image.getBoundingClientRect();
+    return {
+      displayHeight: rect.height,
+      displayWidth: rect.width,
+      url: image.currentSrc || image.src || image.getAttribute("src") || null
+    };
+  });
+}
+function copyResolvedThemeVariables({
+  clone,
+  source,
+  window: window2
+}) {
+  const sourceStyle = window2.getComputedStyle(source);
+  for (let index = 0; index < sourceStyle.length; index += 1) {
+    const propertyName = sourceStyle.item(index);
+    if (!propertyName.startsWith("--")) {
+      continue;
+    }
+    clone.style.setProperty(
+      propertyName,
+      sourceStyle.getPropertyValue(propertyName),
+      sourceStyle.getPropertyPriority(propertyName)
+    );
+  }
+}
+function prepareGenieTextureCapture(element) {
+  const rect = viewportRectFromElement(element);
+  const document2 = element.ownerDocument;
+  const window2 = document2.defaultView;
+  if (!window2 || !isUsableGenieRect(rect)) {
+    return null;
+  }
+  const contentClone = element.cloneNode(true);
+  const documentClone = document2.documentElement.cloneNode(
+    false
+  );
+  const headClone = document2.head.cloneNode(false);
+  const bodyClone = document2.body.cloneNode(false);
+  const stylesheet = document2.createElement("style");
+  stylesheet.dataset.workbenchGenieStylesheet = "true";
+  stylesheet.textContent = `${collectReadableStylesheetText(document2)}
+*, *::before, *::after {
+  animation: none !important;
+  caret-color: transparent !important;
+  transition: none !important;
+}`;
+  headClone.append(stylesheet);
+  bodyClone.append(contentClone);
+  documentClone.append(headClone, bodyClone);
+  copyResolvedThemeVariables({
+    clone: documentClone,
+    source: element,
+    window: window2
+  });
+  documentClone.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
+  documentClone.style.position = "relative";
+  documentClone.style.left = "0";
+  documentClone.style.top = "0";
+  documentClone.style.width = `${rect.width}px`;
+  documentClone.style.height = `${rect.height}px`;
+  documentClone.style.transform = "none";
+  documentClone.style.opacity = "1";
+  documentClone.style.visibility = "visible";
+  documentClone.style.pointerEvents = "none";
+  bodyClone.style.position = "relative";
+  bodyClone.style.inset = "0";
+  bodyClone.style.margin = "0";
+  bodyClone.style.width = `${rect.width}px`;
+  bodyClone.style.height = `${rect.height}px`;
+  bodyClone.style.overflow = "hidden";
+  contentClone.style.position = "relative";
+  contentClone.style.left = "0";
+  contentClone.style.top = "0";
+  contentClone.style.width = `${rect.width}px`;
+  contentClone.style.height = `${rect.height}px`;
+  contentClone.style.transform = "none";
+  contentClone.style.opacity = "1";
+  contentClone.style.visibility = "visible";
+  contentClone.style.pointerEvents = "none";
+  contentClone.style.zIndex = "auto";
+  return {
+    clone: documentClone,
+    images: collectImageClones(element),
+    rect
+  };
+}
+
 // src/react/useWorkbenchGenieAnimation.tsx
 import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var genieDurationMs = 400;
@@ -4151,32 +4143,6 @@ async function resizeInlineImageResourceForGenieTexture(imageUrl, imageInfo) {
     return null;
   }
 }
-function prepareElementTextureCapture(element) {
-  const windowRect = viewportRectFromElement(element);
-  if (!isUsableGenieRect(windowRect)) {
-    return null;
-  }
-  const clonedElement = cloneMeaningfulGenieElement(element, windowRect);
-  if (!clonedElement) {
-    return null;
-  }
-  const { clone, images } = clonedElement;
-  clone.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
-  clone.style.position = "relative";
-  clone.style.left = "0";
-  clone.style.top = "0";
-  clone.style.width = `${windowRect.width}px`;
-  clone.style.height = `${windowRect.height}px`;
-  clone.style.transform = "none";
-  clone.style.opacity = "1";
-  clone.style.visibility = "visible";
-  clone.style.pointerEvents = "none";
-  return {
-    clone,
-    images,
-    rect: windowRect
-  };
-}
 function prepareRenderedGeniePreviewCloneForTexture(clone, textureRect) {
   clone.style.width = `${textureRect.width}px`;
   clone.style.height = `${textureRect.height}px`;
@@ -4220,7 +4186,7 @@ async function renderPreparedElementTexture({
   return { canvas, rect };
 }
 async function captureElementTexture(element) {
-  const preparedCapture = prepareElementTextureCapture(element);
+  const preparedCapture = prepareGenieTextureCapture(element);
   return preparedCapture ? renderPreparedElementTexture(preparedCapture) : null;
 }
 function createDockPreviewDataUrl(canvas) {
@@ -4579,7 +4545,7 @@ function useWorkbenchGenieAnimation({
         if (!element) {
           return null;
         }
-        const preparedCapture = prepareElementTextureCapture(element);
+        const preparedCapture = prepareGenieTextureCapture(element);
         if (!preparedCapture) {
           return null;
         }
@@ -5234,7 +5200,7 @@ function useWorkbenchGenieAnimation({
           }
         }
         const captureTarget = resolveWorkbenchCaptureElement(nodeElement);
-        const preparedTexture = shouldCapturePreview ? prepareElementTextureCapture(captureTarget) : null;
+        const preparedTexture = shouldCapturePreview ? prepareGenieTextureCapture(captureTarget) : null;
         if (!preparedTexture) {
           if (!componentPreviewTexture) {
             logWorkbenchGenieDiagnostic(
@@ -12446,9 +12412,9 @@ function WorkbenchHostDock({
                 )
               ) ? popupEntry.entry.dockRetention.pendingLabel : void 0
             } : null,
-            capturePreview: popupEntry.entry.capturePopupItemPreview ? async (item) => {
+            capturePreview: popupEntry.entry.capturePopupItemPreview || captureNodePreviewImage ? async (item) => {
               const previewImageUrl = await Promise.resolve(
-                popupEntry.entry.capturePopupItemPreview?.(item) ?? null
+                popupEntry.entry.capturePopupItemPreview ? popupEntry.entry.capturePopupItemPreview(item) : captureNodePreviewImage?.(item.node) ?? null
               ).catch(() => null);
               return previewImageUrl ? {
                 kind: "image",
@@ -12713,10 +12679,10 @@ function WorkbenchHostDockMinimizedNodePreview({
 }) {
   const [componentPreview, setComponentPreview] = useState8(void 0);
   const [previewImageUrl, setPreviewImageUrl] = useState8(
-    () => deferPreview || providePreview ? null : readCachedWorkbenchNodePreviewImage(node.id)
+    () => deferPreview ? null : readCachedWorkbenchNodePreviewImage(node.id)
   );
   useEffect10(() => {
-    if (deferPreview || !providePreview || componentPreview !== void 0) {
+    if (deferPreview || !providePreview || componentPreview !== void 0 || previewImageUrl) {
       return void 0;
     }
     let cancelled = false;
@@ -12762,10 +12728,11 @@ function WorkbenchHostDockMinimizedNodePreview({
     node.data.typeId,
     node.id,
     node.minimizedAtUnixMs,
+    previewImageUrl,
     providePreview
   ]);
   useEffect10(() => {
-    if (deferPreview || providePreview) {
+    if (deferPreview) {
       return void 0;
     }
     let cancelled = false;
@@ -12822,9 +12789,6 @@ function WorkbenchHostDockMinimizedNodePreview({
   if (deferPreview) {
     return renderMinimizedDockPreviewPlaceholder(className);
   }
-  if (componentPreview) {
-    return renderMinimizedDockPreviewContent(componentPreview, className);
-  }
   if (previewImageUrl) {
     return /* @__PURE__ */ jsx12(
       "span",
@@ -12847,6 +12811,9 @@ function WorkbenchHostDockMinimizedNodePreview({
       }
     );
   }
+  if (componentPreview) {
+    return renderMinimizedDockPreviewContent(componentPreview, className);
+  }
   return renderMinimizedDockPreviewPlaceholder(className);
 }
 function renderMinimizedDockPreviewPlaceholder(className) {
@@ -13984,11 +13951,8 @@ function useWorkbenchHostSurfaceRenderers(input) {
     [input.nodeDefinitionByType]
   );
   const shouldCaptureNodePreviewImage = useCallback13(
-    (node) => {
-      const minimizedDock = input.nodeDefinitionByType.get(node.data.typeId)?.window?.minimizedDock;
-      return minimizedDock?.kind !== "component";
-    },
-    [input.nodeDefinitionByType]
+    (_node) => true,
+    []
   );
   const renderNodeGeniePreview = useCallback13(
     (node, {