pro-visu 0.3.0 → 0.3.1

package/dist/cli/index.js

@@ -4,7 +4,7 @@
 import { cac } from "cac";
 
 // src/version.ts
-var TOOL_VERSION = true ? "0.3.0" : "0.0.0-dev";
+var TOOL_VERSION = true ? "0.3.1" : "0.0.0-dev";
 
 // src/cli/update-check.ts
 import updateNotifier from "update-notifier";
@@ -1044,7 +1044,8 @@ async function detectSectionOffsets(args) {
       continue;
     }
     if (!args.selector && rect.height < minH) continue;
-    const top = docTarget ? rect.top + curScroll : rect.top - containerTop + curScroll;
+    const rawTop = docTarget ? rect.top + curScroll : rect.top - containerTop + curScroll;
+    const top = rawTop - (args.headerInsetPx ?? 0);
     const y = Math.max(0, Math.min(distance, top));
     offsets.push(y / distance);
   }
@@ -1102,7 +1103,8 @@ async function measureNormalizedOffsets(args) {
     }
     if (!el) return null;
     const rect = el.getBoundingClientRect();
-    const offsetTop = docTarget ? rect.top + curScroll : rect.top - containerTop + curScroll;
+    const rawTop = docTarget ? rect.top + curScroll : rect.top - containerTop + curScroll;
+    const offsetTop = rawTop - (args.headerInsetPx ?? 0);
     const y = Math.max(0, Math.min(distance, offsetTop));
     return distance > 0 ? y / distance : 0;
   });
@@ -1138,6 +1140,79 @@ async function measureNormalizedOffsets(args) {
     return Math.max(0, t.scrollHeight - t.clientHeight);
   }
 }
+async function measureTopInset(args) {
+  const target = findScrollTarget(document, getComputedStyle);
+  const vh = window.innerHeight || document.documentElement.clientHeight || 0;
+  const vw = window.innerWidth || document.documentElement.clientWidth || 0;
+  const maxFraction = args.maxFraction ?? 0.4;
+  const distance = maxScrollOf(target);
+  const cur = isDocTarget(target) ? window.pageYOffset || document.documentElement.scrollTop || 0 : target.scrollTop;
+  scrollTargetTo(target, Math.min(cur + vh, distance));
+  await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+  let inset = 0;
+  try {
+    const all = document.querySelectorAll("body *");
+    for (let i = 0; i < all.length; i++) {
+      const el = all[i];
+      let position = "";
+      try {
+        position = getComputedStyle(el).position;
+      } catch {
+        continue;
+      }
+      if (position !== "fixed" && position !== "sticky") continue;
+      let r;
+      try {
+        r = el.getBoundingClientRect();
+      } catch {
+        continue;
+      }
+      if (r.top <= 2 && r.width >= vw * 0.6 && r.height > 0 && r.bottom > inset && r.bottom <= vh * maxFraction) {
+        inset = r.bottom;
+      }
+    }
+  } catch {
+  }
+  scrollTargetTo(target, cur);
+  await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+  return inset;
+  function findScrollTarget(doc, gcs) {
+    const se = doc.scrollingElement || doc.documentElement;
+    if (se && se.scrollHeight - se.clientHeight > 1) return se;
+    let best = null;
+    let bestArea = 0;
+    const all = doc.querySelectorAll("*");
+    for (let i = 0; i < all.length; i++) {
+      const el = all[i];
+      let oy = "";
+      try {
+        oy = gcs(el).overflowY;
+      } catch {
+        oy = "";
+      }
+      const scrollable = oy === "auto" || oy === "scroll" || oy === "overlay";
+      if (scrollable && el.scrollHeight - el.clientHeight > 1) {
+        const area = el.clientWidth * el.clientHeight;
+        if (area > bestArea) {
+          bestArea = area;
+          best = el;
+        }
+      }
+    }
+    return best || se;
+  }
+  function isDocTarget(t) {
+    return t === (document.scrollingElement || document.documentElement) || t === document.documentElement || t === document.body;
+  }
+  function scrollTargetTo(t, y) {
+    if (isDocTarget(t)) window.scrollTo({ top: y, left: 0, behavior: "instant" });
+    else if (t.scrollTo) t.scrollTo({ top: y, left: 0, behavior: "instant" });
+    else t.scrollTop = y;
+  }
+  function maxScrollOf(t) {
+    return Math.max(0, t.scrollHeight - t.clientHeight);
+  }
+}
 async function settleInView() {
   try {
     await (document.fonts?.ready ?? Promise.resolve());
@@ -1848,7 +1923,8 @@ async function buildScrollTimeline(page, options, totalSeconds, logger) {
   const finalize = (spec) => resolveTimeline(options.loop === "boomerang" ? boomerangSpec(spec) : spec, totalSeconds);
   if (steps && steps.length > 0) {
     const selectors = steps.map((s) => s.to).filter((to) => typeof to === "string" && !to.trim().endsWith("%"));
-    const measured = selectors.length > 0 ? await page.evaluate(measureNormalizedOffsets, { selectors }) : [];
+    const headerInsetPx = selectors.length > 0 ? await page.evaluate(measureTopInset, {}) : 0;
+    const measured = selectors.length > 0 ? await page.evaluate(measureNormalizedOffsets, { selectors, headerInsetPx }) : [];
     let mi = 0;
     let prevY = 0;
     const resolved = steps.map((s) => {
@@ -1884,10 +1960,12 @@ async function buildScrollTimeline(page, options, totalSeconds, logger) {
   }
   if (options.autoSections) {
     const cfg = options.autoSections === true ? {} : options.autoSections;
+    const headerInsetPx = await page.evaluate(measureTopInset, {});
     const offsets = await page.evaluate(detectSectionOffsets, {
       minHeightFraction: cfg.minHeightFraction ?? DEFAULT_AUTO_MIN_HEIGHT_FRACTION,
       selector: cfg.selector ?? null,
-      maxSections: cfg.maxSections ?? DEFAULT_AUTO_MAX_SECTIONS
+      maxSections: cfg.maxSections ?? DEFAULT_AUTO_MAX_SECTIONS,
+      headerInsetPx
     });
     const autoSteps = autoSectionSteps({
       offsets,