hyperframes 0.8.111 → 0.8.112

package/dist/commands/layout-audit.browser.js

@@ -1436,7 +1436,7 @@
     );
   }
 
-  /** Raw `d`-space endpoints (no CTM) — the mapping authors use when they paste screen coords into `d`. */
+  // Raw `d`-space endpoints (no CTM), as authors paste screen coords into `d`, plus the path length.
   function pathUserEndpoints(path) {
     if (typeof path.getTotalLength !== "function" || typeof path.getPointAtLength !== "function") {
       return null;
@@ -1450,7 +1450,7 @@
     if (!Number.isFinite(total) || total <= 0) return null;
     const start = path.getPointAtLength(0);
     const end = path.getPointAtLength(total);
-    return { start: { x: start.x, y: start.y }, end: { x: end.x, y: end.y } };
+    return { start: { x: start.x, y: start.y }, end: { x: end.x, y: end.y }, total };
   }
 
   // Screen endpoints via getScreenCTM (viewBox, preserveAspectRatio, group transforms).
@@ -1502,86 +1502,98 @@
     return { compact, painted };
   }
 
-  // Flag only the documented bug: rendered endpoints miss, but user-space-as-screen would attach.
-  function connectorDetachmentIssues(root, rootRect, time) {
-    const issues = [];
-    let anchors = null;
-    // Attach near-miss tolerance (screen px). Separate from the closed-glyph chord floor.
-    const threshold = Math.max(32, Math.min(rootRect.width, rootRect.height) * 0.02);
-    const MIN_CONNECTOR_CHORD_PX = 8;
+  // Attach near-miss tolerance (screen px) for both connector findings; not the glyph chord floor.
+  function connectorAttachThreshold(rootRect) {
+    return Math.max(32, Math.min(rootRect.width, rootRect.height) * 0.02);
+  }
+
+  // The one connector enumeration for connector_detached and connector_orphan. Skips dash-hidden
+  // shafts; reports `painted` for callers to gate on, and `chord`, the rendered span in screen px.
+  function* connectorShafts(root) {
     for (const svg of Array.from(root.querySelectorAll("svg"))) {
       if (!isVisibleElement(svg)) continue;
       for (const path of Array.from(svg.querySelectorAll("path"))) {
         if (path.closest(CONNECTOR_SKIP_CONTAINERS)) continue;
         if (!isConnectorPath(svg, path)) continue;
         const user = pathUserEndpoints(path);
+        if (!user || shaftDashHidden(path, user.total)) continue;
         const rendered = pathScreenEndpoints(svg, path, user);
-        if (!user || !rendered) continue;
-        // Closed/glyph paths collapse to one point — compare in screen px (not user units).
-        const renderedChord = Math.hypot(
+        if (!rendered) continue;
+        const chord = Math.hypot(
           rendered.end.x - rendered.start.x,
           rendered.end.y - rendered.start.y,
         );
-        if (renderedChord < MIN_CONNECTOR_CHORD_PX) continue;
-        if (anchors === null) anchors = connectorAnchorRects(root, rootRect);
-        if (anchors.compact.length < 2) return issues;
-        // Stable DOM identity across painted (inside) and compact (near-miss) tiers.
-        const attachmentKey = (point) => {
-          for (const anchor of anchors.painted) {
-            if (!anchor.element.contains(svg) && distanceToRect(point, anchor.rect) === 0) {
-              return anchor.element;
-            }
-          }
-          for (const anchor of anchors.compact) {
-            if (distanceToRect(point, anchor.rect) <= threshold) return anchor.element;
-          }
-          return null;
-        };
-        const attached = (point) => attachmentKey(point) !== null;
-        // Half-attached as drawn is allowed; only full render-miss proceeds.
-        if (attached(rendered.start) || attached(rendered.end)) continue;
-        // Paste-into-`d` bug: both raw endpoints land on distinct anchors as screen pixels.
-        const userStartKey = attachmentKey(user.start);
-        const userEndKey = attachmentKey(user.end);
-        const pasteBug = Boolean(userStartKey && userEndKey && userStartKey !== userEndKey);
-        // Guessed marked shaft: both frames miss. Same-anchor grazes attach in user-space
-        // and must stay skipped. Name-only decorative flow/arrow paths stay skipped.
-        // 80px keeps short marker glyphs (chevrons, tips) out.
-        const markedMiss =
-          renderedChord >= 80 &&
-          !userStartKey &&
-          !userEndKey &&
-          (path.hasAttribute("marker-start") || path.hasAttribute("marker-end"));
-        if (!pasteBug && !markedMiss) continue;
-        const gap = Math.round(
-          Math.min(
-            Math.min(...anchors.compact.map((a) => distanceToRect(rendered.start, a.rect))),
-            Math.min(...anchors.compact.map((a) => distanceToRect(rendered.end, a.rect))),
-          ),
-        );
-        issues.push({
-          code: "connector_detached",
-          severity: "warning",
-          time,
-          selector: selectorFor(path),
-          containerSelector: selectorFor(svg),
-          message: pasteBug
-            ? `Connector path endpoints render ${gap}px from the nearest anchorable element, but the path's user-space coordinates would attach if read as screen pixels — screen/viewport numbers were likely written into SVG \`d\` without inverting the CTM.`
-            : `Connector path endpoints render ${gap}px from the nearest anchorable element — a marked shaft that meets no node.`,
-          rect: toRect({
-            left: Math.min(rendered.start.x, rendered.end.x),
-            top: Math.min(rendered.start.y, rendered.end.y),
-            right: Math.max(rendered.start.x, rendered.end.x),
-            bottom: Math.max(rendered.start.y, rendered.end.y),
-            width: Math.abs(rendered.end.x - rendered.start.x),
-            height: Math.abs(rendered.end.y - rendered.start.y),
-          }),
-          fixHint: pasteBug
-            ? "Convert measured screen coordinates into the SVG's user space (subtract the SVG rect / invert getScreenCTM) before writing path `d`, and keep the SVG a direct child of the stage."
-            : "Measure the settled node boxes and write `d` in the SVG's user space (invert getScreenCTM), or grow a layout-owned shaft from the source node.",
-        });
+        yield { svg, path, user, rendered, chord, painted: shaftIsPainted(path) };
       }
     }
+  }
+
+  // Flag only the documented bug: rendered endpoints miss, but user-space-as-screen would attach.
+  function connectorDetachmentIssues(root, rootRect, time) {
+    const issues = [];
+    let anchors = null;
+    const threshold = connectorAttachThreshold(rootRect);
+    const MIN_CONNECTOR_CHORD_PX = 8;
+    for (const { svg, path, user, rendered, chord } of connectorShafts(root)) {
+      if (chord < MIN_CONNECTOR_CHORD_PX) continue;
+      if (anchors === null) anchors = connectorAnchorRects(root, rootRect);
+      if (anchors.compact.length < 2) return issues;
+      // Stable DOM identity across painted (inside) and compact (near-miss) tiers.
+      const attachmentKey = (point) => {
+        for (const anchor of anchors.painted) {
+          if (!anchor.element.contains(svg) && distanceToRect(point, anchor.rect) === 0) {
+            return anchor.element;
+          }
+        }
+        for (const anchor of anchors.compact) {
+          if (distanceToRect(point, anchor.rect) <= threshold) return anchor.element;
+        }
+        return null;
+      };
+      const attached = (point) => attachmentKey(point) !== null;
+      // Half-attached as drawn is allowed; only full render-miss proceeds.
+      if (attached(rendered.start) || attached(rendered.end)) continue;
+      // Paste-into-`d` bug: both raw endpoints land on distinct anchors as screen pixels.
+      const userStartKey = attachmentKey(user.start);
+      const userEndKey = attachmentKey(user.end);
+      const pasteBug = Boolean(userStartKey && userEndKey && userStartKey !== userEndKey);
+      // Guessed marked shaft: both frames miss. Same-anchor grazes attach in user-space
+      // and must stay skipped. Name-only decorative flow/arrow paths stay skipped.
+      // 80px keeps short marker glyphs (chevrons, tips) out.
+      const markedMiss =
+        chord >= 80 &&
+        !userStartKey &&
+        !userEndKey &&
+        (path.hasAttribute("marker-start") || path.hasAttribute("marker-end"));
+      if (!pasteBug && !markedMiss) continue;
+      const gap = Math.round(
+        Math.min(
+          Math.min(...anchors.compact.map((a) => distanceToRect(rendered.start, a.rect))),
+          Math.min(...anchors.compact.map((a) => distanceToRect(rendered.end, a.rect))),
+        ),
+      );
+      issues.push({
+        code: "connector_detached",
+        severity: "warning",
+        time,
+        selector: selectorFor(path),
+        containerSelector: selectorFor(svg),
+        message: pasteBug
+          ? `Connector path endpoints render ${gap}px from the nearest anchorable element, but the path's user-space coordinates would attach if read as screen pixels — screen/viewport numbers were likely written into SVG \`d\` without inverting the CTM.`
+          : `Connector path endpoints render ${gap}px from the nearest anchorable element — a marked shaft that meets no node.`,
+        rect: toRect({
+          left: Math.min(rendered.start.x, rendered.end.x),
+          top: Math.min(rendered.start.y, rendered.end.y),
+          right: Math.max(rendered.start.x, rendered.end.x),
+          bottom: Math.max(rendered.start.y, rendered.end.y),
+          width: Math.abs(rendered.end.x - rendered.start.x),
+          height: Math.abs(rendered.end.y - rendered.start.y),
+        }),
+        fixHint: pasteBug
+          ? "Convert measured screen coordinates into the SVG's user space (subtract the SVG rect / invert getScreenCTM) before writing path `d`, and keep the SVG a direct child of the stage."
+          : "Measure the settled node boxes and write `d` in the SVG's user space (invert getScreenCTM), or grow a layout-owned shaft from the source node.",
+      });
+    }
     return issues;
   }
 
@@ -1598,19 +1610,63 @@
     return opacityChain(path) >= 0.2;
   }
 
-  function shaftDashHidden(path) {
-    if (typeof path.getTotalLength !== "function") return false;
-    let total;
-    try {
-      total = path.getTotalLength();
-    } catch {
-      return false;
-    }
-    if (!Number.isFinite(total) || total <= 0) return false;
+  // True when the visible dash window [offset, offset + length] sits in one gap (an unstarted
+  // draw-on), allowing 10% overlap. Zero-length dashes paint only with a round or square linecap.
+  // Distances are in `pathLength` units when set; a `pathLength` resolving to 0 paints solid.
+  function shaftDashHidden(path, total) {
     const style = getComputedStyle(path);
-    const offset = Number.parseFloat(style.strokeDashoffset || "0");
-    const dash = Number.parseFloat(String(style.strokeDasharray || "").split(/[\s,]+/)[0] || "0");
-    return offset >= total * 0.9 && dash >= total * 0.9;
+    const dashes = dashArrayLengths(style.strokeDasharray, path);
+    if (dashes === null) return false;
+    const authored = path.pathLength?.baseVal; // SVGAnimatedNumber; 0 when unset or unparseable
+    if (authored === 0 && path.hasAttribute("pathLength")) return false;
+    const dotsPaint = (style.strokeLinecap || "butt") !== "butt";
+    const dashPaints = (index) => index % 2 === 0 && (dashes[index] > 0 || dotsPaint);
+    if (!dashes.some((_, index) => dashPaints(index))) return true; // only butt-capped dots
+    const period = dashes.reduce((sum, dash) => sum + dash, 0);
+    const length = authored > 0 ? authored : total;
+    const offset = dashLength(style.strokeDashoffset, path); // unparseable reads as 0
+    // Wrap into [0, period); adding the period only to negatives keeps `0.9 % 2` exact.
+    const wrapped = Number.isFinite(offset) ? offset % period : 0;
+    const start = wrapped < 0 ? wrapped + period : wrapped;
+    const end = start + length;
+    let painted = 0;
+    let segmentStart = 0;
+    // Two periods cover any window that starts inside the first.
+    for (let i = 0; i < dashes.length * 2; i++) {
+      const segmentEnd = segmentStart + dashes[i % dashes.length];
+      if (dashPaints(i % dashes.length)) {
+        if (segmentStart >= start && segmentEnd <= end) return false;
+        painted += Math.max(0, Math.min(segmentEnd, end) - Math.max(segmentStart, start));
+      }
+      segmentStart = segmentEnd;
+    }
+    return painted <= length * 0.1;
+  }
+
+  // Computed `stroke-dasharray` as an even-length list of user-unit lengths, or null when the
+  // stroke is solid: `none`, an all-zero list, or any negative/unparseable entry (which the spec
+  // renders as `none`). Odd lists repeat, per spec.
+  function dashArrayLengths(value, path) {
+    const text = String(value || "none").trim();
+    if (text === "none") return null;
+    const lengths = text.split(/[\s,]+/).map((token) => dashLength(token, path));
+    if (lengths.some((length) => !Number.isFinite(length) || length < 0)) return null;
+    if (lengths.every((length) => length === 0)) return null;
+    return lengths.length % 2 === 0 ? lengths : lengths.concat(lengths);
+  }
+
+  // One dash length in user units. Computed lengths are already px; a percentage is relative to
+  // the normalised diagonal of the owning SVG viewport (viewBox when set, else the layout box).
+  function dashLength(token, path) {
+    const text = String(token).trim();
+    const value = Number.parseFloat(text);
+    if (!Number.isFinite(value) || !text.endsWith("%")) return value;
+    const svg = path.ownerSVGElement;
+    if (!svg) return NaN;
+    const box = svg.viewBox && svg.viewBox.baseVal;
+    const { width, height } =
+      box && box.width > 0 && box.height > 0 ? box : svg.getBoundingClientRect();
+    return (value / 100) * (Math.hypot(width, height) / Math.SQRT2);
   }
 
   function connectorEndpointCandidates(root, rootRect) {
@@ -1633,57 +1689,45 @@
   function connectorOrphanIssues(root, rootRect, time) {
     const issues = [];
     let candidates = null;
-    const threshold = Math.max(32, Math.min(rootRect.width, rootRect.height) * 0.02);
-    for (const svg of Array.from(root.querySelectorAll("svg"))) {
-      if (!isVisibleElement(svg)) continue;
-      for (const path of Array.from(svg.querySelectorAll("path"))) {
-        if (path.closest(CONNECTOR_SKIP_CONTAINERS)) continue;
-        if (!isConnectorPath(svg, path)) continue;
-        if (!shaftIsPainted(path) || shaftDashHidden(path)) continue;
-        const user = pathUserEndpoints(path);
-        const rendered = pathScreenEndpoints(svg, path, user);
-        if (!user || !rendered) continue;
-        const renderedChord = Math.hypot(
-          rendered.end.x - rendered.start.x,
-          rendered.end.y - rendered.start.y,
-        );
-        if (renderedChord < 80) continue;
-        if (candidates === null) candidates = connectorEndpointCandidates(root, rootRect);
-        const dark = [];
-        for (const point of [rendered.start, rendered.end]) {
-          let best = null;
-          let attached = false;
-          for (const candidate of candidates) {
-            const gap = distanceToRect(point, candidate.rect);
-            if (gap > threshold) continue;
-            if (isVisibleElement(candidate.element)) {
-              attached = true;
-              break;
-            }
-            if (best === null || gap < best.gap) best = { gap, candidate };
+    const threshold = connectorAttachThreshold(rootRect);
+    for (const { svg, path, rendered, chord, painted } of connectorShafts(root)) {
+      if (!painted) continue;
+      if (chord < 80) continue;
+      if (candidates === null) candidates = connectorEndpointCandidates(root, rootRect);
+      const dark = [];
+      for (const point of [rendered.start, rendered.end]) {
+        let best = null;
+        let attached = false;
+        for (const candidate of candidates) {
+          const gap = distanceToRect(point, candidate.rect);
+          if (gap > threshold) continue;
+          if (isVisibleElement(candidate.element)) {
+            attached = true;
+            break;
           }
-          if (!attached && best !== null) dark.push(best.candidate);
+          if (best === null || gap < best.gap) best = { gap, candidate };
         }
-        if (dark.length === 0) continue;
-        issues.push({
-          code: "connector_orphan",
-          severity: "warning",
-          time,
-          selector: selectorFor(path),
-          containerSelector: selectorFor(svg),
-          message: `Connector shaft is visible while ${dark.length === 2 ? "both endpoints are" : `its endpoint ${selectorFor(dark[0].element)} is`} not on stage.`,
-          rect: toRect({
-            left: Math.min(rendered.start.x, rendered.end.x),
-            top: Math.min(rendered.start.y, rendered.end.y),
-            right: Math.max(rendered.start.x, rendered.end.x),
-            bottom: Math.max(rendered.start.y, rendered.end.y),
-            width: Math.abs(rendered.end.x - rendered.start.x),
-            height: Math.abs(rendered.end.y - rendered.start.y),
-          }),
-          fixHint:
-            "Show the shaft only after both ends are on, and hide it with the earlier exit. Do not give the line its own clock.",
-        });
+        if (!attached && best !== null) dark.push(best.candidate);
       }
+      if (dark.length === 0) continue;
+      issues.push({
+        code: "connector_orphan",
+        severity: "warning",
+        time,
+        selector: selectorFor(path),
+        containerSelector: selectorFor(svg),
+        message: `Connector shaft is visible while ${dark.length === 2 ? "both endpoints are" : `its endpoint ${selectorFor(dark[0].element)} is`} not on stage.`,
+        rect: toRect({
+          left: Math.min(rendered.start.x, rendered.end.x),
+          top: Math.min(rendered.start.y, rendered.end.y),
+          right: Math.max(rendered.start.x, rendered.end.x),
+          bottom: Math.max(rendered.start.y, rendered.end.y),
+          width: Math.abs(rendered.end.x - rendered.start.x),
+          height: Math.abs(rendered.end.y - rendered.start.y),
+        }),
+        fixHint:
+          "Show the shaft only after both ends are on, and hide it with the earlier exit. Do not give the line its own clock.",
+      });
     }
     return issues;
   }
@@ -1807,78 +1851,10 @@
     return contentOverlapIssues(root, time);
   };
 
-  // Frozen-sweep guard (#U10, checkPipeline.ts): a compact per-sample
-  // fingerprint of every visible element's box + opacity, in DOM order. Node
-  // calls this once per seeked grid point and compares the strings across the
-  // whole run — if every sample produces the identical string, the seek never
-  // actually moved anything and the whole audit run is unreliable. Deliberately
-  // a single opaque string (not a structured array) since Node only ever needs
-  // equality, not per-element diffing.
-  // Pixel-only media motion (a 2D/WebGL canvas repainting or a playing video
-  // without any element moving) is invisible to a geometry+opacity fingerprint
-  // and false-positives sweep_static. Downsample each visible canvas/video to
-  // 8x8 and fold its pixels into the fingerprint. Tainted, zero-sized, or
-  // unreadable media hashes to a constant — no worse than geometry-only
-  // detection and never a new false negative for DOM-motion compositions.
-  // Media inside iframes is intentionally outside this fingerprint: it lives
-  // in a separate document, and cross-origin frames are inaccessible under SOP.
-  function mediaPixelHash(element) {
-    try {
-      const rect = element.getBoundingClientRect();
-      const sourceWidth = element.videoWidth || element.width || rect.width;
-      const sourceHeight = element.videoHeight || element.height || rect.height;
-      if (!sourceWidth || !sourceHeight) return "x";
-      const off = document.createElement("canvas");
-      off.width = 8;
-      off.height = 8;
-      const ctx = off.getContext("2d");
-      if (!ctx) return "x";
-      ctx.drawImage(element, 0, 0, 8, 8);
-      const data = ctx.getImageData(0, 0, 8, 8).data;
-      let hash = 0;
-      for (let i = 0; i < data.length; i++) hash = (hash * 31 + data[i]) >>> 0;
-      return String(hash);
-    } catch {
-      return "x";
-    }
-  }
-
-  window.__hyperframesLayoutGeometry = function collectLayoutGeometry() {
-    const root =
-      document.querySelector("[data-composition-id][data-width][data-height]") ||
-      document.querySelector("[data-composition-id]") ||
-      document.body;
-    const elements = Array.from(root.querySelectorAll("*")).filter((element) =>
-      isVisibleElement(element),
-    );
-    const parts = elements.map((element) => {
-      const rect = toRect(element.getBoundingClientRect());
-      const opacity = round(opacityChain(element));
-      // Variable-font axis animation (font-variation-settings) is a real,
-      // visible motion channel that moves no geometry and no opacity, so a
-      // box+opacity fingerprint reads it as a frozen timeline. Worse in a
-      // DUPLEXED face (Recursive holds an identical advance width at every
-      // weight by design), where not even the line width shifts — the whole
-      // run then false-positives sweep_static. Fold the computed axis string
-      // in; it is "normal" for every element that does not use it, so this
-      // adds nothing to the fingerprint of an ordinary composition.
-      const axes = getComputedStyle(element).fontVariationSettings;
-      return `${rect.left},${rect.top},${rect.width},${rect.height},${opacity},${
-        axes && axes !== "normal" ? axes : ""
-      }`;
-    });
-    // img shares the same pixel-only-motion blind spot as canvas/video: an
-    // equal-size, equal-position opaque src/visibility swap moves no
-    // geometry and no opacity. mediaPixelHash already handles it generically
-    // (drawImage accepts any CanvasImageSource; width/height fall back to
-    // rect.width/height same as canvas/video), so only the element selector
-    // needed widening.
-    for (const media of root.querySelectorAll("canvas, video, img")) {
-      if (!isVisibleElement(media)) continue;
-      parts.push(`p:${mediaPixelHash(media)}`);
-    }
-    return parts.join("|");
-  };
+  // The frozen-sweep fingerprint (window.__hyperframesLayoutGeometry, #U10 in
+  // checkPipeline.ts) lives in motion-signature.browser.js, the single owner
+  // of "what counts as motion" shared with motion-sample.browser.js's
+  // liveness signature.
 
   // Rotation-pivot sampling (rotation_pivot_drift). Per sample, report every
   // rotatable candidate's bbox center, size, and current rotation angle. Node

package/dist/commands/motion-sample.browser.js

@@ -4,88 +4,32 @@
 // scope it returns a bucketed signature of all visible elements, so the Node-side
 // evaluator can detect frozen windows by comparing signatures across frames.
 (function () {
-  const IGNORE_TAGS = new Set(["SCRIPT", "STYLE", "TEMPLATE", "NOSCRIPT", "META", "LINK"]);
-
-  function round(value) {
-    return Math.round(value * 100) / 100;
-  }
+  // Visibility, opacity and the liveness signature come from the shared classifier
+  // (motion-signature.browser.js), so this sampler and the frozen-sweep guard agree on what moves.
+  // Resolved at install, checked at call: an install-time throw would only surface as an opaque
+  // "__hyperframesMotionSample is not a function" from the driver's evaluate.
+  const shared = window.__hyperframesMotionSignature;
 
   function toRect(rect) {
     return {
-      left: round(rect.left),
-      top: round(rect.top),
-      right: round(rect.right),
-      bottom: round(rect.bottom),
-      width: round(rect.width),
-      height: round(rect.height),
+      left: shared.round(rect.left),
+      top: shared.round(rect.top),
+      right: shared.round(rect.right),
+      bottom: shared.round(rect.bottom),
+      width: shared.round(rect.width),
+      height: shared.round(rect.height),
     };
   }
 
-  function opacityChain(element) {
-    let opacity = 1;
-    for (let current = element; current; current = current.parentElement) {
-      const parsed = Number.parseFloat(getComputedStyle(current).opacity || "1");
-      if (Number.isFinite(parsed)) opacity *= parsed;
-    }
-    return opacity;
-  }
-
-  // Mirrors layout-audit.browser.js isVisibleElement.
-  // fallow-ignore-next-line complexity
-  function isVisibleElement(element) {
-    if (IGNORE_TAGS.has(element.tagName)) return false;
-    const style = getComputedStyle(element);
-    if (
-      style.display === "none" ||
-      style.visibility === "hidden" ||
-      style.visibility === "collapse"
-    ) {
-      return false;
-    }
-    if (opacityChain(element) < 0.2) return false;
-    const rect = element.getBoundingClientRect();
-    return rect.width > 0.5 && rect.height > 0.5;
-  }
-
   function sampleElement(element) {
     const rect = element.getBoundingClientRect();
     return {
       rect: toRect(rect),
-      opacity: round(opacityChain(element)),
-      visible: isVisibleElement(element),
+      opacity: shared.round(shared.opacityChain(element)),
+      visible: shared.isVisibleElement(element),
     };
   }
 
-  function compositionRoot() {
-    return document.querySelector("[data-composition-id]") || document.body;
-  }
-
-  // ponytail: bucket position to 2px and opacity to 0.08 so the RFC's "moves ≥2px /
-  // opacity ≥0.08" thresholds fall out of bucketing. Boundary-straddling moves are
-  // approximate — good enough for liveness; tighten only if false negatives show up.
-  function elementSignature(element) {
-    const rect = element.getBoundingClientRect();
-    const bx = Math.round(rect.left / 2);
-    const by = Math.round(rect.top / 2);
-    const bw = Math.round(rect.width / 2);
-    const bh = Math.round(rect.height / 2);
-    const bo = Math.round(opacityChain(element) / 0.08);
-    return bx + "," + by + "," + bw + "," + bh + "," + bo;
-  }
-
-  function livenessSignature(root) {
-    if (!root) return "";
-    const parts = [];
-    // ponytail: O(DOM) × MOTION_MAX_SAMPLES (300) — fine for typical compositions;
-    // narrow selector (e.g. "[id],[class]") if heavy-DOM compositions slow this down.
-    const all = root.querySelectorAll("*");
-    for (const element of all) {
-      if (!isVisibleElement(element)) continue;
-      parts.push(elementSignature(element));
-    }
-    return parts.join("|");
-  }
-
   function safeQuery(selector) {
     try {
       return document.querySelector(selector);
@@ -108,13 +52,22 @@
   function sampleLiveness(scopes) {
     const liveness = {};
     for (const scope of scopes) {
-      const root = scope === "*" ? compositionRoot() : safeQuery(scope);
-      liveness[scope] = livenessSignature(root);
+      const root = scope === "*" ? shared.compositionRoot() : safeQuery(scope);
+      // ponytail: O(DOM) × MOTION_MAX_SAMPLES (300), with three computed-style
+      // reads (element + ::before/::after) plus an ancestor walk per box-generating
+      // element — fine for typical compositions; narrow the scope if heavy-DOM
+      // compositions slow down.
+      liveness[scope] = shared.compositionSignature(root, { quantize: true });
     }
     return liveness;
   }
 
   window.__hyperframesMotionSample = function motionSample(options) {
+    if (!shared) {
+      throw new Error(
+        "motion-signature.browser.js must be injected before motion-sample.browser.js",
+      );
+    }
     const { selectors = [], livenessScopes = [] } = options || {};
     return { data: sampleSelectors(selectors), liveness: sampleLiveness(livenessScopes) };
   };