hyperframes 0.7.32 → 0.7.33

package/dist/cli.js

@@ -50,7 +50,7 @@ var VERSION;
 var init_version = __esm({
   "src/version.ts"() {
     "use strict";
-    VERSION = true ? "0.7.32" : "0.0.0-dev";
+    VERSION = true ? "0.7.33" : "0.0.0-dev";
   }
 });
 
@@ -60667,8 +60667,36 @@ async function applyDomLayerMask(page, showIds, extraHideIds) {
     (args) => {
       const existing = document.getElementById(args.styleId);
       if (existing) existing.remove();
+      const restoreMaskedTimedDescendants = () => {
+        const masked = document.querySelectorAll(`[${args.hiddenAttr}="1"]`);
+        for (const node of masked) {
+          if (!(node instanceof HTMLElement)) continue;
+          const prevVisibility = node.getAttribute(args.prevVisibilityAttr);
+          const prevPriority = node.getAttribute(args.prevPriorityAttr);
+          if (prevVisibility === null) {
+            node.style.removeProperty("visibility");
+          } else {
+            node.style.setProperty("visibility", prevVisibility, prevPriority ?? "");
+          }
+          node.removeAttribute(args.hiddenAttr);
+          node.removeAttribute(args.prevVisibilityAttr);
+          node.removeAttribute(args.prevPriorityAttr);
+        }
+      };
+      restoreMaskedTimedDescendants();
+      const hiddenTimedDescendants = [];
+      const rememberHiddenTimedDescendants = (root) => {
+        for (const node of root.querySelectorAll("[data-start]")) {
+          if (!(node instanceof HTMLElement)) continue;
+          const computed = window.getComputedStyle(node);
+          if (computed.visibility !== "hidden" && computed.display !== "none") continue;
+          hiddenTimedDescendants.push(node);
+        }
+      };
       const showSelectors = [];
       for (const id of args.show) {
+        const el = document.getElementById(id);
+        if (el) rememberHiddenTimedDescendants(el);
         const escaped = CSS.escape(id);
         showSelectors.push(`#${escaped}`, `#${escaped} *`);
         const renderEscaped = CSS.escape(`__render_frame_${id}__`);
@@ -60681,6 +60709,23 @@ async function applyDomLayerMask(page, showIds, extraHideIds) {
       style.textContent = `${massHideRule}
 ${showRule}`;
       document.head.appendChild(style);
+      for (const el of hiddenTimedDescendants) {
+        if (el.getAttribute(args.hiddenAttr) === "1") continue;
+        const prevVisibility = el.style.getPropertyValue("visibility");
+        const prevPriority = typeof el.style.getPropertyPriority === "function" ? el.style.getPropertyPriority("visibility") : "";
+        if (prevVisibility) {
+          el.setAttribute(args.prevVisibilityAttr, prevVisibility);
+        } else {
+          el.removeAttribute(args.prevVisibilityAttr);
+        }
+        if (prevPriority) {
+          el.setAttribute(args.prevPriorityAttr, prevPriority);
+        } else {
+          el.removeAttribute(args.prevPriorityAttr);
+        }
+        el.setAttribute(args.hiddenAttr, "1");
+        el.style.setProperty("visibility", "hidden", "important");
+      }
       for (const id of args.hide) {
         const el = document.getElementById(id);
         if (el) {
@@ -60692,7 +60737,14 @@ ${showRule}`;
         }
       }
     },
-    { show: showIds, hide: extraHideIds, styleId: DOM_LAYER_MASK_STYLE_ID }
+    {
+      show: showIds,
+      hide: extraHideIds,
+      styleId: DOM_LAYER_MASK_STYLE_ID,
+      hiddenAttr: DOM_LAYER_MASK_HIDDEN_ATTR,
+      prevVisibilityAttr: DOM_LAYER_MASK_PREV_VISIBILITY_ATTR,
+      prevPriorityAttr: DOM_LAYER_MASK_PREV_PRIORITY_ATTR
+    }
   );
 }
 async function removeDomLayerMask(page, extraHideIds) {
@@ -60700,6 +60752,20 @@ async function removeDomLayerMask(page, extraHideIds) {
     (args) => {
       const style = document.getElementById(args.styleId);
       if (style) style.remove();
+      const masked = document.querySelectorAll(`[${args.hiddenAttr}="1"]`);
+      for (const node of masked) {
+        if (!(node instanceof HTMLElement)) continue;
+        const prevVisibility = node.getAttribute(args.prevVisibilityAttr);
+        const prevPriority = node.getAttribute(args.prevPriorityAttr);
+        if (prevVisibility === null) {
+          node.style.removeProperty("visibility");
+        } else {
+          node.style.setProperty("visibility", prevVisibility, prevPriority ?? "");
+        }
+        node.removeAttribute(args.hiddenAttr);
+        node.removeAttribute(args.prevVisibilityAttr);
+        node.removeAttribute(args.prevPriorityAttr);
+      }
       for (const id of args.hide) {
         const el = document.getElementById(id);
         if (el) {
@@ -60709,7 +60775,13 @@ async function removeDomLayerMask(page, extraHideIds) {
         if (img) img.style.removeProperty("visibility");
       }
     },
-    { hide: extraHideIds, styleId: DOM_LAYER_MASK_STYLE_ID }
+    {
+      hide: extraHideIds,
+      styleId: DOM_LAYER_MASK_STYLE_ID,
+      hiddenAttr: DOM_LAYER_MASK_HIDDEN_ATTR,
+      prevVisibilityAttr: DOM_LAYER_MASK_PREV_VISIBILITY_ATTR,
+      prevPriorityAttr: DOM_LAYER_MASK_PREV_PRIORITY_ATTR
+    }
   );
 }
 async function injectVideoFramesBatch(page, updates) {
@@ -60847,7 +60919,7 @@ async function syncVideoFrameVisibility(page, activeVideoIds) {
     }
   }, activeVideoIds);
 }
-var cdpSessionCache, lastFrameCache, PENDING_FRAME_RETRIES, TRANSPARENT_BG_STYLE_ID, DOM_LAYER_MASK_STYLE_ID;
+var cdpSessionCache, lastFrameCache, PENDING_FRAME_RETRIES, TRANSPARENT_BG_STYLE_ID, DOM_LAYER_MASK_STYLE_ID, DOM_LAYER_MASK_HIDDEN_ATTR, DOM_LAYER_MASK_PREV_VISIBILITY_ATTR, DOM_LAYER_MASK_PREV_PRIORITY_ATTR;
 var init_screenshotService = __esm({
   "../engine/src/services/screenshotService.ts"() {
     "use strict";
@@ -60857,6 +60929,9 @@ var init_screenshotService = __esm({
     PENDING_FRAME_RETRIES = 5;
     TRANSPARENT_BG_STYLE_ID = "__hf_transparent_bg__";
     DOM_LAYER_MASK_STYLE_ID = "__hf_dom_layer_mask__";
+    DOM_LAYER_MASK_HIDDEN_ATTR = "data-hf-dom-layer-mask-hidden";
+    DOM_LAYER_MASK_PREV_VISIBILITY_ATTR = "data-hf-dom-layer-mask-prev-visibility";
+    DOM_LAYER_MASK_PREV_PRIORITY_ATTR = "data-hf-dom-layer-mask-prev-priority";
   }
 });
 
@@ -72764,6 +72839,11 @@ async function queryElementStacking(page, nativeHdrIds) {
       const n2 = parseFloat(value);
       return Number.isFinite(n2) ? n2 : 0;
     }
+    function isElementPaintable(node) {
+      const rect = node.getBoundingClientRect();
+      const style = window.getComputedStyle(node);
+      return style.visibility !== "hidden" && style.display !== "none" && rect.width > 0 && rect.height > 0;
+    }
     for (const el of elements) {
       const id = el.id;
       if (!id) continue;
@@ -72772,7 +72852,9 @@ async function queryElementStacking(page, nativeHdrIds) {
       const zIndex = getEffectiveZIndex(el);
       const isHdrEl = hdrSet.has(id);
       const opacity = getEffectiveOpacity(el);
-      const visible = style.visibility !== "hidden" && style.display !== "none" && rect.width > 0 && rect.height > 0;
+      const visible = isElementPaintable(el);
+      const renderFrame = document.getElementById(`__render_frame_${id}__`);
+      const renderFrameVisible = renderFrame ? isElementPaintable(renderFrame) : false;
       const htmlEl = el instanceof HTMLElement ? el : null;
       results.push({
         id,
@@ -72785,6 +72867,7 @@ async function queryElementStacking(page, nativeHdrIds) {
         layoutHeight: htmlEl?.offsetHeight || Math.round(rect.height),
         opacity,
         visible,
+        renderFrameVisible,
         isHdr: hdrSet.has(id),
         // For HDR elements, use the full accumulated viewport matrix so the
         // affine blit can apply rotation/scale/translate properly. For DOM
@@ -104346,6 +104429,13 @@ function shouldUseLayeredComposite(options) {
 function resolveCompositeTransfer(hasHdrContent, effectiveHdr) {
   return hasHdrContent && effectiveHdr ? effectiveHdr.transfer : "srgb";
 }
+function selectDomLayerShowIds(layerElementIds, fullStacking) {
+  const byId = new Map(fullStacking.map((el) => [el.id, el]));
+  return layerElementIds.filter((id) => {
+    const el = byId.get(id);
+    return !!el && el.opacity > 0 && (el.visible || el.renderFrameVisible === true);
+  });
+}
 async function compositeHdrFrame(ctx, canvas, time, fullStacking, elementFilter, debugFrameIndex = -1) {
   const {
     log: log2,
@@ -104461,6 +104551,17 @@ async function compositeHdrFrame(ctx, canvas, time, fullStacking, elementFilter,
       }
     } else {
       const layerIds = new Set(layer.elementIds);
+      const showIds = selectDomLayerShowIds(layer.elementIds, fullStacking);
+      if (showIds.length === 0) {
+        if (shouldLog) {
+          log2.info("[diag] dom layer skipped, all elements not paintable", {
+            frame: debugFrameIndex,
+            layerIdx,
+            layerIds: layer.elementIds
+          });
+        }
+        continue;
+      }
       const hideIds = allElementIds.filter((id) => !layerIds.has(id));
       if (hdrPerf) hdrPerf.domLayerCaptures += 1;
       await timeHdrPhaseAsync(
@@ -104480,7 +104581,7 @@ async function compositeHdrFrame(ctx, canvas, time, fullStacking, elementFilter,
       await timeHdrPhaseAsync(
         hdrPerf,
         "domMaskApplyMs",
-        () => applyDomLayerMask(domSession.page, layer.elementIds, hideIds)
+        () => applyDomLayerMask(domSession.page, showIds, hideIds)
       );
       const domPng = await timeHdrPhaseAsync(
         hdrPerf,
@@ -104510,6 +104611,7 @@ async function compositeHdrFrame(ctx, canvas, time, fullStacking, elementFilter,
             frame: debugFrameIndex,
             layerIdx,
             layerIds: layer.elementIds,
+            showIds,
             hideCount: hideIds.length,
             pngBytes: domPng.length,
             alphaPixels,
@@ -104655,8 +104757,9 @@ async function captureSceneIntoBuffer(a) {
       );
     }
   }
-  const showIds = Array.from(sceneIds);
+  const showIds = selectDomLayerShowIds(Array.from(sceneIds), stackingInfo);
   const hideIds = stackingInfo.map((e3) => e3.id).filter((id) => !sceneIds.has(id) || nativeHdrIds.has(id));
+  if (showIds.length === 0) return;
   if (hdrPerf) hdrPerf.domLayerCaptures += 1;
   await timeHdrPhaseAsync(
     hdrPerf,