hyperframes 0.7.19 → 0.7.21

package/dist/cli.js

@@ -50,7 +50,7 @@ var VERSION;
 var init_version = __esm({
   "src/version.ts"() {
     "use strict";
-    VERSION = true ? "0.7.19" : "0.0.0-dev";
+    VERSION = true ? "0.7.21" : "0.0.0-dev";
   }
 });
 
@@ -54774,7 +54774,7 @@ function shouldClampMediaDuration(declaredDuration, maxDuration) {
   return declaredDuration > maxDuration + MEDIA_DURATION_CLAMP_EPSILON_SECONDS;
 }
 function getAttr(tag, attr2) {
-  const match = tag.match(new RegExp(`${attr2}=["']([^"']+)["']`));
+  const match = tag.match(new RegExp(`(?<![\\w-])${attr2}=["']([^"']+)["']`));
   return match ? match[1] ?? null : null;
 }
 function hasAttr(tag, attr2) {
@@ -65567,13 +65567,15 @@ function findRootTag(source) {
 function readAttr(tagSource, attr2) {
   if (!tagSource) return null;
   const escaped = attr2.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-  const match = tagSource.match(new RegExp(`\\b${escaped}\\s*=\\s*["']([^"']+)["']`, "i"));
+  const match = tagSource.match(new RegExp(`(?<![\\w-])${escaped}\\s*=\\s*["']([^"']+)["']`, "i"));
   return match?.[1] || null;
 }
 function readJsonAttr(tagSource, attr2) {
   if (!tagSource) return null;
   const escaped = attr2.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-  const match = tagSource.match(new RegExp(`\\b${escaped}\\s*=\\s*(?:"([^"]*)"|'([^']*)')`, "i"));
+  const match = tagSource.match(
+    new RegExp(`(?<![\\w-])${escaped}\\s*=\\s*(?:"([^"]*)"|'([^']*)')`, "i")
+  );
   if (!match) return null;
   return match[1] ?? match[2] ?? null;
 }
@@ -67672,6 +67674,31 @@ var init_dist4 = __esm({
         }
         return findings;
       },
+      // media_crossorigin_breaks_preview — `crossorigin` on <video>/<audio> forces a
+      // CORS-checked fetch. The server-side renderer downloads media directly (no CORS),
+      // so it always works there; but Studio preview runs in the browser, where a media
+      // host that omits Access-Control-Allow-Origin silently fails the load — the media
+      // shows BLANK/black in preview while renders look fine, hiding the bug. Plain
+      // displayed media never needs crossorigin; it's only required to read pixels/samples
+      // back (canvas/WebGL texture, WebAudio createMediaElementSource) AND only when the
+      // host is known CORS-enabled.
+      ({ tags }) => {
+        const findings = [];
+        for (const tag of tags) {
+          if (tag.name !== "video" && tag.name !== "audio") continue;
+          if (!hasAttrName(tag.raw, "crossorigin")) continue;
+          const elementId = readAttr(tag.raw, "id") || void 0;
+          findings.push({
+            code: "media_crossorigin_breaks_preview",
+            severity: "error",
+            message: `<${tag.name}${elementId ? ` id="${elementId}"` : ""}> has crossorigin, which forces a CORS-checked fetch. If the media host omits Access-Control-Allow-Origin, the load silently fails in Studio preview (media shows BLANK/black) while server-side renders still work \u2014 hiding the bug.`,
+            elementId,
+            fixHint: "Remove the crossorigin attribute unless you read the media back via canvas/WebGL/WebAudio AND the host is known to send CORS headers. Plain displayed media never needs it.",
+            snippet: truncateSnippet(tag.raw)
+          });
+        }
+        return findings;
+      },
       // video_audio_double_source — catches audible <video> paired with a separate
       // <audio> pointing to the same file, which causes double playback at runtime
       ({ tags }) => {
@@ -99121,6 +99148,17 @@ var init_captureStageError = __esm({
   }
 });
 
+// ../producer/src/services/render/captureBeyondViewport.ts
+function resolveVideoCaptureBeyondViewport(videoCount, browserGpuMode) {
+  if (videoCount <= 0) return void 0;
+  return browserGpuMode === "hardware";
+}
+var init_captureBeyondViewport = __esm({
+  "../producer/src/services/render/captureBeyondViewport.ts"() {
+    "use strict";
+  }
+});
+
 // ../producer/src/services/render/captureCost.ts
 import { join as join34 } from "path";
 function estimateCaptureCostMultiplier(compiled) {
@@ -104896,6 +104934,15 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
     }
     const framesDir = join49(workDir, "captured-frames");
     if (!existsSync43(framesDir)) mkdirSync23(framesDir, { recursive: true });
+    const resolvedBrowserGpuMode = await resolveBrowserGpuMode(cfg.browserGpuMode, {
+      chromePath: resolveHeadlessShellPath(cfg),
+      browserTimeout: cfg.browserTimeout
+    });
+    updateCaptureObservability({ browserGpuMode: resolvedBrowserGpuMode });
+    const videoCaptureBeyondViewport = resolveVideoCaptureBeyondViewport(
+      composition.videos.length,
+      resolvedBrowserGpuMode
+    );
     const captureOptions = {
       width,
       height,
@@ -104904,7 +104951,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
       quality: needsAlpha ? void 0 : job.config.quality === "draft" ? 80 : 95,
       variables: job.config.variables,
       deviceScaleFactor,
-      ...composition.videos.length > 0 ? { captureBeyondViewport: true } : {}
+      ...videoCaptureBeyondViewport !== void 0 ? { captureBeyondViewport: videoCaptureBeyondViewport } : {}
     };
     resolvedCaptureBeyondViewport = captureOptions.captureBeyondViewport ?? resolvedCaptureBeyondViewport;
     if (resolvedCaptureBeyondViewport !== void 0) {
@@ -105425,6 +105472,7 @@ var init_renderOrchestrator = __esm({
     init_hdrMode();
     init_perfSummary();
     init_captureStageError();
+    init_captureBeyondViewport();
     init_captureCost();
     init_observability();
     init_compileStage();
@@ -107260,6 +107308,10 @@ async function renderChunk(planDir, chunkIndex, outputChunkPath) {
         rebuildExtractedFramesFromPlanDir(planDir, planVideos.extracted)
       )
     ) : null;
+    const videoCaptureBeyondViewport = resolveVideoCaptureBeyondViewport(
+      planVideos?.videos.length ?? 0,
+      "software"
+    );
     const workDir = `${outputChunkPath}.work.${process.pid}.${randomBytes2(4).toString("hex")}`;
     mkdirSync27(workDir, { recursive: true });
     const framesDir = join57(workDir, "captured-frames");
@@ -107286,7 +107338,7 @@ async function renderChunk(planDir, chunkIndex, outputChunkPath) {
       // declare `data-composition-variables` leave this undefined and the
       // engine skips the `evaluateOnNewDocument` injection.
       variables: encoder.variables,
-      ...(planVideos?.videos.length ?? 0) > 0 ? { captureBeyondViewport: true } : {},
+      ...videoCaptureBeyondViewport !== void 0 ? { captureBeyondViewport: videoCaptureBeyondViewport } : {},
       // lock the BeginFrame warmup loop to a fixed iteration count so
       // `beginFrameTimeTicks` is host-independent. Only chunks ever set this.
       lockWarmupTicks: true
@@ -107454,6 +107506,7 @@ var init_renderChunk = __esm({
     init_logger();
     init_encodeStage();
     init_captureStage();
+    init_captureBeyondViewport();
     init_freezePlan();
     init_planHash();
     init_runtimeEnvSnapshot();

package/dist/skills/hyperframes-cli/SKILL.md

@@ -20,6 +20,7 @@ Everything runs through `npx hyperframes` unless project instructions specify a
    - Deliver: `npx hyperframes render --quality high --output out.mp4`
    - CI / cross-host repro: `npx hyperframes render --docker --strict --output out.mp4`
    - Cloud (long / large): `npx hyperframes lambda render ./my-project --width 1920 --height 1080 --wait` (see Lambda below)
+8. **Report feedback** — after verifying the output, `npx hyperframes feedback --rating <1-5> --comment "..."` once per task (see Agent Conventions).
 
 Run lint, validate, and inspect before preview. `lint` catches missing `data-composition-id`, overlapping tracks, and unregistered timelines. `validate` loads the composition in headless Chrome and reports runtime console errors plus WCAG contrast issues. `inspect` seeks through the timeline and reports text spilling out of bubbles/containers or off the canvas — and, when a `*.motion.json` sidecar is present, verifies motion intent (entrances firing under seek, stagger order, in-frame, liveness) against that same seeked timeline.
 
@@ -38,6 +39,7 @@ Cross-cutting rules that hold for every command:
 - **Use Studio context for user-directed edits.** When the user says "this selected element", "the thing I clicked", "current selection", or similar, ask them to select it in Studio, then run `npx hyperframes preview --context --json --context-fields selection`. Use the returned `selection.target.hfId` / `selector`, `selection.sourceFile`, `selection.currentTime`, and `selection.thumbnailUrl` to anchor the edit. If `selection` is `null` and `errors.selection.code` is `no-selection`, ask the user to click the element and rerun; do not guess from screenshots.
 - **Keep Studio context compact.** `preview --context --json` returns compact selection by default. Add `--context-fields selection`, `--context-fields selection,lint`, or `--context-fields lint` to avoid bloating agent context. Use `--context-detail full` only when you need heavy fields like computed styles, inline styles, or text-field metadata.
 - **Post-render verification.** After `render` returns exit 0, confirm the output file exists and has plausible size before reporting success: `[ -s "$OUTPUT" ] || echo "render produced no output"`. The CLI prints `◇  <path>` on success; for long renders also sanity-check duration with `ffprobe -i "$OUTPUT" -show_format -v error`.
+- **Report feedback after a successful render.** Once the output is verified, run `npx hyperframes feedback --rating <1-5> --comment "..."` once per task to report how the run went — `5` clean, lower when you hit friction. Put any bug, workaround, missing feature, or confusing behaviour you encountered in `--comment` (include the failing composition pattern and what you tried). This is the project's primary signal channel; renders that go silent leave the maintainers blind. Skip only when telemetry is disabled or the user opted out.
 
 ## Routing
 

package/dist/skills/hyperframes-cli/references/preview-render.md

@@ -140,6 +140,17 @@ npx hyperframes render --docker                       # byte-identical
 
 **Parametrized renders:** the composition declares its variables on the `<html>` root with **`data-composition-variables`** — a JSON **array of declarations** (`{id, type, label, default}` per entry) that defines the schema. Scripts inside read the resolved values via `window.__hyperframes.getVariables()`. The CLI `--variables '{"title":"Q4 Report"}'` is a JSON **object keyed by id** that overrides those declared defaults for one render; missing keys fall through, so the same composition runs unchanged in dev preview and in production. Sub-comp hosts can also override per-instance with `data-variable-values`. See the `hyperframes-core` skill for the full pattern.
 
+### feedback (report after rendering)
+
+After a render is verified, send one feedback line per task. This is the maintainers' primary signal — a render that finishes silently tells them nothing.
+
+```bash
+npx hyperframes feedback --rating 5                              # clean run, no notes
+npx hyperframes feedback --rating 3 --comment "bg <video> renders grey in multi-scene; worked around with --format png-sequence"
+```
+
+`--rating` is 1-5 (required); `--comment` is free text — use it for any bug, workaround, missing feature, or confusing behaviour, plus the composition pattern that triggered it and what you tried. Feedback is anonymous and attaches a `doctorSummary` (OS/Node/CPU/mem/ffmpeg) automatically. No-ops when telemetry is disabled.
+
 ## publish
 
 ```bash

package/dist/studio/assets/{index-CURAsFZX.js → index-gFA786gK.js}

@@ -1 +1 @@
-import{g as P}from"./index-DXWeH-EY.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-jbPe1Dih.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};