hyperframes 0.7.32 → 0.7.34

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.34" : "0.0.0-dev";
   }
 });
 
@@ -60667,8 +60667,54 @@ async function applyDomLayerMask(page, showIds, extraHideIds) {
     (args) => {
       const existing = document.getElementById(args.styleId);
       if (existing) existing.remove();
+      const restoreMaskedElements = () => {
+        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);
+        }
+      };
+      restoreMaskedElements();
+      const rememberAndHideElement = (el) => {
+        if (el.getAttribute(args.hiddenAttr) !== "1") {
+          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");
+      };
+      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,35 +60727,56 @@ async function applyDomLayerMask(page, showIds, extraHideIds) {
       style.textContent = `${massHideRule}
 ${showRule}`;
       document.head.appendChild(style);
+      for (const el of hiddenTimedDescendants) {
+        rememberAndHideElement(el);
+      }
       for (const id of args.hide) {
         const el = document.getElementById(id);
         if (el) {
-          el.style.setProperty("visibility", "hidden", "important");
+          rememberAndHideElement(el);
         }
         const img = document.getElementById(`__render_frame_${id}__`);
         if (img) {
-          img.style.setProperty("visibility", "hidden", "important");
+          rememberAndHideElement(img);
         }
       }
     },
-    { 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) {
+async function removeDomLayerMask(page, _extraHideIds) {
   await page.evaluate(
     (args) => {
       const style = document.getElementById(args.styleId);
       if (style) style.remove();
-      for (const id of args.hide) {
-        const el = document.getElementById(id);
-        if (el) {
-          el.style.removeProperty("visibility");
+      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 ?? "");
         }
-        const img = document.getElementById(`__render_frame_${id}__`);
-        if (img) img.style.removeProperty("visibility");
+        node.removeAttribute(args.hiddenAttr);
+        node.removeAttribute(args.prevVisibilityAttr);
+        node.removeAttribute(args.prevPriorityAttr);
       }
     },
-    { hide: extraHideIds, styleId: DOM_LAYER_MASK_STYLE_ID }
+    {
+      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 +60914,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 +60924,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 +72834,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 +72847,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 +72862,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 +104424,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 +104546,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 +104576,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 +104606,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 +104752,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,

package/dist/studio/assets/{index-XQiceQhf.js → index-Daj3zlND.js}

@@ -1 +1 @@
-import{g as P}from"./index-DsT9OH2w.js";function j(c,d){for(var s=0;s<d.length;s++){const a=d[s];if(typeof a!="string"&&!Array.isArray(a)){for(const i in a)if(i!=="default"&&!(i in c)){const l=Object.getOwnPropertyDescriptor(a,i);l&&Object.defineProperty(c,i,l.get?l:{enumerable:!0,get:()=>a[i]})}}}return Object.freeze(Object.defineProperty(c,Symbol.toStringTag,{value:"Module"}))}var v={},w;function k(){if(w)return v;w=1,Object.defineProperty(v,"__esModule",{value:!0}),v.default=d;var c=window.OfflineAudioContext||window.webkitOfflineAudioContext;function d(e){var r=a(e);return r.start(0),[i,y,O(e.sampleRate),s].reduce(function(t,o){return o(t)},r.buffer.getChannelData(0))}function s(e){return e.sort(function(r,t){return t.count-r.count}).splice(0,5)[0].tempo}function a(e){var r=e.length,t=e.numberOfChannels,o=e.sampleRate,n=new c(t,r,o),u=n.createBufferSource();u.buffer=e;var f=n.createBiquadFilter();return f.type="lowpass",u.connect(f),f.connect(n.destination),u}function i(e){for(var r=[],t=.9,o=.3,n=15;r.length<n&&t>=o;)r=l(e,t),t-=.05;if(r.length<n)throw new Error("Could not find enough samples for a reliable detection.");return r}function l(e,r){for(var t=[],o=0,n=e.length;o<n;o+=1)e[o]>r&&(t.push(o),o+=1e4);return t}function y(e){var r=[];return e.forEach(function(t,o){for(var n=function(x){var g=e[o+x]-t,_=r.some(function(h){if(h.interval===g)return h.count+=1});_||r.push({interval:g,count:1})},u=0;u<10;u+=1)n(u)}),r}function O(e){return function(r){var t=[];return r.forEach(function(o){if(o.interval!==0){for(var n=60/(o.interval/e);n<90;)n*=2;for(;n>180;)n/=2;n=Math.round(n);var u=t.some(function(f){if(f.tempo===n)return f.count+=o.count});u||t.push({tempo:n,count:o.count})}}),t}}return v}var p,b;function q(){return b||(b=1,p=k().default),p}var m=q();const A=P(m),D=j({__proto__:null,default:A},[m]);export{D as i};
+import{g as P}from"./index-DlLW9GH4.js";function j(c,d){for(var s=0;s<d.length;s++){const a=d[s];if(typeof a!="string"&&!Array.isArray(a)){for(const i in a)if(i!=="default"&&!(i in c)){const l=Object.getOwnPropertyDescriptor(a,i);l&&Object.defineProperty(c,i,l.get?l:{enumerable:!0,get:()=>a[i]})}}}return Object.freeze(Object.defineProperty(c,Symbol.toStringTag,{value:"Module"}))}var v={},w;function k(){if(w)return v;w=1,Object.defineProperty(v,"__esModule",{value:!0}),v.default=d;var c=window.OfflineAudioContext||window.webkitOfflineAudioContext;function d(e){var r=a(e);return r.start(0),[i,y,O(e.sampleRate),s].reduce(function(t,o){return o(t)},r.buffer.getChannelData(0))}function s(e){return e.sort(function(r,t){return t.count-r.count}).splice(0,5)[0].tempo}function a(e){var r=e.length,t=e.numberOfChannels,o=e.sampleRate,n=new c(t,r,o),u=n.createBufferSource();u.buffer=e;var f=n.createBiquadFilter();return f.type="lowpass",u.connect(f),f.connect(n.destination),u}function i(e){for(var r=[],t=.9,o=.3,n=15;r.length<n&&t>=o;)r=l(e,t),t-=.05;if(r.length<n)throw new Error("Could not find enough samples for a reliable detection.");return r}function l(e,r){for(var t=[],o=0,n=e.length;o<n;o+=1)e[o]>r&&(t.push(o),o+=1e4);return t}function y(e){var r=[];return e.forEach(function(t,o){for(var n=function(x){var g=e[o+x]-t,_=r.some(function(h){if(h.interval===g)return h.count+=1});_||r.push({interval:g,count:1})},u=0;u<10;u+=1)n(u)}),r}function O(e){return function(r){var t=[];return r.forEach(function(o){if(o.interval!==0){for(var n=60/(o.interval/e);n<90;)n*=2;for(;n>180;)n/=2;n=Math.round(n);var u=t.some(function(f){if(f.tempo===n)return f.count+=o.count});u||t.push({tempo:n,count:o.count})}}),t}}return v}var p,b;function q(){return b||(b=1,p=k().default),p}var m=q();const A=P(m),D=j({__proto__:null,default:A},[m]);export{D as i};

package/dist/studio/assets/{index-BRQ9g6Oo.js → index-DiPzdh64.js}

@@ -1,4 +1,4 @@
-import{n as Qi}from"./index-DsT9OH2w.js";/*!
+import{n as Qi}from"./index-DlLW9GH4.js";/*!
  * Copyright (c) 2026-present, Vanilagy and contributors
  *
  * This Source Code Form is subject to the terms of the Mozilla Public