hyperframes 0.4.13-alpha.4 → 0.4.14

package/dist/cli.js

@@ -54,7 +54,7 @@ var VERSION;
 var init_version = __esm({
   "src/version.ts"() {
     "use strict";
-    VERSION = true ? "0.4.13-alpha.4" : "0.0.0-dev";
+    VERSION = true ? "0.4.14" : "0.0.0-dev";
   }
 });
 
@@ -4422,6 +4422,110 @@ var init_core = __esm({
 });
 
 // ../core/src/lint/rules/media.ts
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function selectorTargetsManagedMedia(selector, mediaIds) {
+  const normalized = selector.trim();
+  if (!normalized) return false;
+  if (/\b(video|audio)\b/i.test(normalized)) return true;
+  for (const mediaId of mediaIds) {
+    if (normalized.includes(`#${mediaId}`) || normalized.includes(`[id="${mediaId}"]`) || normalized.includes(`[id='${mediaId}']`)) {
+      return true;
+    }
+  }
+  return false;
+}
+function findImperativeMediaControlFindings(ctx) {
+  const findings = [];
+  const managedMediaIds = new Set(
+    ctx.tags.filter((tag) => tag.name === "video" || tag.name === "audio").map((tag) => readAttr(tag.raw, "id")).filter((id) => Boolean(id))
+  );
+  if (managedMediaIds.size === 0 || ctx.scripts.length === 0) return findings;
+  for (const script of ctx.scripts) {
+    const mediaVars = /* @__PURE__ */ new Map();
+    const assignmentPatterns = [
+      /\b(?:const|let|var)\s+([A-Za-z_$][\w$]*)\s*=\s*(?:document|window\.document)\.getElementById\(\s*["']([^"']+)["']\s*\)/g,
+      /\b(?:const|let|var)\s+([A-Za-z_$][\w$]*)\s*=\s*(?:document|window\.document)\.querySelector\(\s*["']([^"']+)["']\s*\)/g
+    ];
+    for (const pattern of assignmentPatterns) {
+      let match;
+      while ((match = pattern.exec(script.content)) !== null) {
+        const variableName = match[1];
+        const target = match[2];
+        if (!variableName || !target) continue;
+        if (managedMediaIds.has(target) || selectorTargetsManagedMedia(target, managedMediaIds)) {
+          mediaVars.set(variableName, managedMediaIds.has(target) ? target : void 0);
+        }
+      }
+    }
+    const directIdPatterns = [
+      {
+        pattern: /\b(?:document|window\.document)\.getElementById\(\s*["']([^"']+)["']\s*\)\.play\s*\(/g,
+        kind: "play()"
+      },
+      {
+        pattern: /\b(?:document|window\.document)\.getElementById\(\s*["']([^"']+)["']\s*\)\.pause\s*\(/g,
+        kind: "pause()"
+      },
+      {
+        pattern: /\b(?:document|window\.document)\.getElementById\(\s*["']([^"']+)["']\s*\)\.currentTime\s*=/g,
+        kind: "currentTime"
+      },
+      {
+        pattern: /\b(?:document|window\.document)\.querySelector\(\s*["']([^"']+)["']\s*\)\.play\s*\(/g,
+        kind: "play()"
+      },
+      {
+        pattern: /\b(?:document|window\.document)\.querySelector\(\s*["']([^"']+)["']\s*\)\.pause\s*\(/g,
+        kind: "pause()"
+      },
+      {
+        pattern: /\b(?:document|window\.document)\.querySelector\(\s*["']([^"']+)["']\s*\)\.currentTime\s*=/g,
+        kind: "currentTime"
+      }
+    ];
+    for (const { pattern, kind } of directIdPatterns) {
+      let match;
+      while ((match = pattern.exec(script.content)) !== null) {
+        const target = match[1];
+        if (!target) continue;
+        const elementId = managedMediaIds.has(target) ? target : selectorTargetsManagedMedia(target, managedMediaIds) ? void 0 : null;
+        if (elementId === null) continue;
+        findings.push({
+          code: "imperative_media_control",
+          severity: "error",
+          message: `Inline <script> imperatively controls managed media via ${kind}. HyperFrames must own media play/pause/seek to keep preview, timeline, and renders deterministic.`,
+          elementId: elementId || void 0,
+          fixHint: "Remove imperative media play/pause/currentTime control. Express timing with data-start/data-duration and media offsets like data-media-start or data-playback-start instead.",
+          snippet: truncateSnippet(match[0])
+        });
+      }
+    }
+    for (const [variableName, elementId] of mediaVars) {
+      const escapedVar = escapeRegExp(variableName);
+      const variablePatterns = [
+        { pattern: new RegExp(`\\b${escapedVar}\\.play\\s*\\(`, "g"), kind: "play()" },
+        { pattern: new RegExp(`\\b${escapedVar}\\.pause\\s*\\(`, "g"), kind: "pause()" },
+        { pattern: new RegExp(`\\b${escapedVar}\\.currentTime\\s*=`, "g"), kind: "currentTime" }
+      ];
+      for (const { pattern, kind } of variablePatterns) {
+        let match;
+        while ((match = pattern.exec(script.content)) !== null) {
+          findings.push({
+            code: "imperative_media_control",
+            severity: "error",
+            message: `Inline <script> imperatively controls managed media via ${kind}. HyperFrames must own media play/pause/seek to keep preview, timeline, and renders deterministic.`,
+            elementId,
+            fixHint: "Remove imperative media play/pause/currentTime control. Express timing with data-start/data-duration and media offsets like data-media-start or data-playback-start instead.",
+            snippet: truncateSnippet(match[0])
+          });
+        }
+      }
+    }
+  }
+  return findings;
+}
 var mediaRules;
 var init_media = __esm({
   "../core/src/lint/rules/media.ts"() {
@@ -4649,7 +4753,9 @@ var init_media = __esm({
           }
         }
         return findings;
-      }
+      },
+      // imperative_media_control
+      findImperativeMediaControlFindings
     ];
   }
 });
@@ -29622,7 +29728,6 @@ __export(src_exports2, {
   getEncoderPreset: () => getEncoderPreset,
   getFrameAtTime: () => getFrameAtTime,
   getHdrEncoderColorParams: () => getHdrEncoderColorParams,
-  getSrgbToHdrLut: () => getSrgbToHdrLut,
   getSystemResources: () => getSystemResources,
   groupIntoLayers: () => groupIntoLayers,
   hdrToLinear: () => hdrToLinear,
@@ -33095,8 +33200,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
               )
             });
           }
-          for (let layerIdx = 0; layerIdx < layers.length; layerIdx++) {
-            const layer = layers[layerIdx];
+          for (const [layerIdx, layer] of layers.entries()) {
             if (layer.type === "hdr") {
               const before2 = shouldLog ? countNonZeroRgb482(canvas) : 0;
               const isHdrImage = nativeHdrImageIds.has(layer.element.id);
@@ -34675,7 +34779,7 @@ function createStudioServer(options) {
   });
   app.get("/api/runtime.js", (c2) => {
     const serve4 = async () => {
-      const runtimeSource = existsSync31(runtimePath) ? readFileSync23(runtimePath, "utf-8") : await loadRuntimeSourceFallback();
+      const runtimeSource = await loadRuntimeSourceFallback() ?? (existsSync31(runtimePath) ? readFileSync23(runtimePath, "utf-8") : null);
       if (!runtimeSource) return c2.text("runtime not available", 404);
       return c2.body(runtimeSource, 200, {
         "Content-Type": "text/javascript",

package/dist/docs/compositions.md

@@ -26,8 +26,14 @@ Use `npx hyperframes compositions` to see all compositions in a project.
 
 ## Variables
 
-Compositions can expose variables for dynamic content:
+HyperFrames does not automatically bind `data-var-*` attributes into your composition DOM.
 
 ```html
-<div data-composition-id="card" data-var-title="string" data-var-color="color"></div>
+<div
+  data-composition-id="card"
+  data-composition-src="compositions/card.html"
+  data-variable-values='{"title":"Hello","color":"#ff4d4f"}'
+></div>
 ```
+
+Read `data-variable-values` inside the nested composition and apply the values in your own script. Variable metadata for tooling is declared separately via `data-composition-variables` and read with `extractCompositionMetadata()`.