@tutti-os/workbench-surface 0.0.224 → 0.0.225

package/dist/index.js

@@ -3820,17 +3820,40 @@ function renderGenieScanlines(context, viewportWidth, viewportHeight, frame) {
 }
 
 // src/react/genieTextureCapture.ts
+var readableStylesheetTextByDocument = /* @__PURE__ */ new WeakMap();
+function hasSameStylesheetFingerprints(left, right) {
+  return left.length === right.length && left.every((fingerprint, index) => {
+    const candidate = right[index];
+    return candidate?.stylesheet === fingerprint.stylesheet && candidate.disabled === fingerprint.disabled && candidate.ruleCount === fingerprint.ruleCount && candidate.ownerText === fingerprint.ownerText;
+  });
+}
 function collectReadableStylesheetText(document2) {
-  const rules = [];
+  const readableStylesheets = [];
   for (const stylesheet of Array.from(document2.styleSheets)) {
     try {
-      for (const rule of Array.from(stylesheet.cssRules)) {
-        rules.push(rule.cssText);
-      }
+      const rules = stylesheet.cssRules;
+      readableStylesheets.push({
+        fingerprint: {
+          disabled: stylesheet.disabled,
+          ownerText: stylesheet.ownerNode instanceof HTMLStyleElement ? stylesheet.ownerNode.textContent : null,
+          ruleCount: rules.length,
+          stylesheet
+        },
+        rules
+      });
     } catch {
     }
   }
-  return rules.join("\n");
+  const fingerprints = readableStylesheets.map(
+    ({ fingerprint }) => fingerprint
+  );
+  const cached = readableStylesheetTextByDocument.get(document2);
+  if (cached && hasSameStylesheetFingerprints(cached.fingerprints, fingerprints)) {
+    return cached.text;
+  }
+  const text = readableStylesheets.flatMap(({ rules }) => Array.from(rules, (rule) => rule.cssText)).join("\n");
+  readableStylesheetTextByDocument.set(document2, { fingerprints, text });
+  return text;
 }
 function collectImageClones(element) {
   return Array.from(element.querySelectorAll("img")).map((image) => {
@@ -3838,6 +3861,8 @@ function collectImageClones(element) {
     return {
       displayHeight: rect.height,
       displayWidth: rect.width,
+      naturalHeight: image.naturalHeight,
+      naturalWidth: image.naturalWidth,
       url: image.currentSrc || image.src || image.getAttribute("src") || null
     };
   });
@@ -3936,10 +3961,12 @@ var dockPreviewMaxWidth = 260;
 var dockPreviewMaxHeight = 170;
 var dockPreviewImageCacheMaxEntries = 96;
 var inlineImageResourceCacheMaxEntries = 160;
+var inlineImageResizeTargetCacheMaxEntries = 4;
 var dockAnchorFallbackSizePx = 43.2;
 var genieInlineImageMaxDevicePixelRatio = 2;
 var dockPreviewImageByNodeID = /* @__PURE__ */ new Map();
 var inlineImageResourceByUrl = /* @__PURE__ */ new Map();
+var resizedInlineImageResourceByUrl = /* @__PURE__ */ new Map();
 function resolveWorkbenchCaptureElement(windowElement) {
   return windowElement.querySelector(
     '[data-workbench-window-capture="true"]'
@@ -4080,7 +4107,8 @@ async function inlineCloneImageResources({
         return;
       }
       const inlineImageUrl = await readInlineImageResource(imageUrl) ?? imageUrl;
-      const resizedImageUrl = await resizeInlineImageResourceForGenieTexture(
+      const resizedImageUrl = await readResizedInlineImageResource(
+        imageUrl,
         inlineImageUrl,
         imageInfo
       );
@@ -4114,11 +4142,7 @@ function resolveGenieInlineImageTargetSize({
     width: Math.max(1, Math.ceil(displayWidth * scale))
   };
 }
-async function resizeInlineImageResourceForGenieTexture(imageUrl, imageInfo) {
-  const targetSize = resolveGenieInlineImageTargetSize(imageInfo);
-  if (!targetSize) {
-    return null;
-  }
+async function resizeInlineImageResourceForGenieTexture(imageUrl, targetSize) {
   const image = new Image();
   image.src = imageUrl;
   try {
@@ -4143,6 +4167,50 @@ async function resizeInlineImageResourceForGenieTexture(imageUrl, imageInfo) {
     return null;
   }
 }
+function readResizedInlineImageResource(sourceImageUrl, inlineImageUrl, imageInfo) {
+  const targetSize = resolveGenieInlineImageTargetSize(imageInfo);
+  if (!targetSize) {
+    return Promise.resolve(null);
+  }
+  if (imageInfo.naturalWidth > 0 && imageInfo.naturalHeight > 0 && imageInfo.naturalWidth <= targetSize.width && imageInfo.naturalHeight <= targetSize.height) {
+    return Promise.resolve(null);
+  }
+  let resizedByTarget = resizedInlineImageResourceByUrl.get(sourceImageUrl);
+  if (resizedByTarget) {
+    resizedInlineImageResourceByUrl.delete(sourceImageUrl);
+    resizedInlineImageResourceByUrl.set(sourceImageUrl, resizedByTarget);
+  } else {
+    resizedByTarget = /* @__PURE__ */ new Map();
+    resizedInlineImageResourceByUrl.set(sourceImageUrl, resizedByTarget);
+  }
+  const targetKey = `${targetSize.width}x${targetSize.height}`;
+  const cached = resizedByTarget.get(targetKey);
+  if (cached) {
+    resizedByTarget.delete(targetKey);
+    resizedByTarget.set(targetKey, cached);
+    return cached;
+  }
+  const promise = resizeInlineImageResourceForGenieTexture(
+    inlineImageUrl,
+    targetSize
+  );
+  resizedByTarget.set(targetKey, promise);
+  while (resizedByTarget.size > inlineImageResizeTargetCacheMaxEntries) {
+    const oldestTarget = resizedByTarget.keys().next().value;
+    if (typeof oldestTarget !== "string") {
+      break;
+    }
+    resizedByTarget.delete(oldestTarget);
+  }
+  while (resizedInlineImageResourceByUrl.size > inlineImageResourceCacheMaxEntries) {
+    const oldestImageUrl = resizedInlineImageResourceByUrl.keys().next().value;
+    if (typeof oldestImageUrl !== "string") {
+      break;
+    }
+    resizedInlineImageResourceByUrl.delete(oldestImageUrl);
+  }
+  return promise;
+}
 function prepareRenderedGeniePreviewCloneForTexture(clone, textureRect) {
   clone.style.width = `${textureRect.width}px`;
   clone.style.height = `${textureRect.height}px`;
@@ -4162,20 +4230,24 @@ function prepareRenderedGeniePreviewCloneForTexture(clone, textureRect) {
   previewElement.style.boxShadow = "none";
   previewElement.style.transform = `translateY(${renderedGeniePreviewHeaderOffsetPx}px)`;
 }
-async function renderPreparedElementTexture({
-  clone,
-  images,
-  rect
-}) {
+function resolveGenieTextureOutputSize(rect, limits) {
+  const scale = limits ? Math.min(1, limits.maxWidth / rect.width, limits.maxHeight / rect.height) : genieSnapshotScale;
+  return {
+    height: Math.max(1, Math.round(rect.height * scale)),
+    width: Math.max(1, Math.round(rect.width * scale))
+  };
+}
+async function renderPreparedElementTexture({ clone, images, rect }, outputLimits) {
   await inlineCloneImageResources({
     cloneRoot: clone,
     images
   });
-  const svgTexture = createGenieSvgTexture(clone, rect);
+  const outputSize = resolveGenieTextureOutputSize(rect, outputLimits);
+  const svgTexture = createGenieSvgTexture(clone, rect, outputSize);
   const image = await loadImageFromSvg(svgTexture);
   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));
+  canvas.width = outputSize.width;
+  canvas.height = outputSize.height;
   const context = canvas.getContext("2d");
   if (!context) {
     return null;
@@ -4185,9 +4257,9 @@ async function renderPreparedElementTexture({
   context.drawImage(image, 0, 0, canvas.width, canvas.height);
   return { canvas, rect };
 }
-async function captureElementTexture(element) {
+async function captureElementTexture(element, outputLimits) {
   const preparedCapture = prepareGenieTextureCapture(element);
-  return preparedCapture ? renderPreparedElementTexture(preparedCapture) : null;
+  return preparedCapture ? renderPreparedElementTexture(preparedCapture, outputLimits) : null;
 }
 function createDockPreviewDataUrl(canvas) {
   if (canvas.width <= 0 || canvas.height <= 0) {
@@ -4198,6 +4270,9 @@ function createDockPreviewDataUrl(canvas) {
     dockPreviewMaxWidth / canvas.width,
     dockPreviewMaxHeight / canvas.height
   );
+  if (scale === 1) {
+    return canvas.toDataURL("image/png");
+  }
   const output = document.createElement("canvas");
   output.width = Math.max(1, Math.round(canvas.width * scale));
   output.height = Math.max(1, Math.round(canvas.height * scale));
@@ -4282,7 +4357,10 @@ async function captureWorkbenchNodePreviewImage(nodeID, options = {}) {
   if (!captureTarget) {
     return null;
   }
-  const texture = await captureElementTexture(captureTarget).catch(() => null);
+  const texture = await captureElementTexture(captureTarget, {
+    maxHeight: dockPreviewMaxHeight,
+    maxWidth: dockPreviewMaxWidth
+  }).catch(() => null);
   const previewImageUrl = texture ? createDockPreviewDataUrl(texture.canvas) : null;
   writeCachedWorkbenchNodePreviewImage(nodeID, previewImageUrl);
   return previewImageUrl;
@@ -4308,7 +4386,10 @@ function persistWorkbenchNodePreviewImage(node, previewImageUrl, input) {
   }
   input.dockPreviewCache.write({ key, previewImageUrl });
 }
-function createGenieSvgTexture(element, rect) {
+function createGenieSvgTexture(element, rect, outputSize = {
+  height: rect.height,
+  width: rect.width
+}) {
   const svgNamespace = "http://www.w3.org/2000/svg";
   const svgDocument = document.implementation.createDocument(
     svgNamespace,
@@ -4317,15 +4398,15 @@ function createGenieSvgTexture(element, rect) {
   );
   const svg = svgDocument.documentElement;
   svg.setAttribute("xmlns", svgNamespace);
-  svg.setAttribute("width", String(rect.width));
-  svg.setAttribute("height", String(rect.height));
+  svg.setAttribute("width", String(outputSize.width));
+  svg.setAttribute("height", String(outputSize.height));
   svg.setAttribute("viewBox", `0 0 ${rect.width} ${rect.height}`);
   const foreignObject = svgDocument.createElementNS(
     svgNamespace,
     "foreignObject"
   );
-  foreignObject.setAttribute("width", "100%");
-  foreignObject.setAttribute("height", "100%");
+  foreignObject.setAttribute("width", String(rect.width));
+  foreignObject.setAttribute("height", String(rect.height));
   foreignObject.setAttribute("x", "0");
   foreignObject.setAttribute("y", "0");
   foreignObject.appendChild(svgDocument.importNode(element, true));