@hyperframes/studio 0.7.55 → 0.7.56

package/src/utils/studioHelpers.ts

@@ -308,3 +308,65 @@ export async function resolveDroppedAssetDuration(
   media.load();
   return duration;
 }
+
+export async function resolveDroppedAssetDimensions(
+  projectId: string,
+  assetPath: string,
+  kind: TimelineAssetKind,
+): Promise<{ width: number; height: number } | null> {
+  if (kind === "audio") return null;
+  const src = `/api/projects/${projectId}/preview/${assetPath}`;
+
+  if (kind === "image") {
+    return new Promise((resolve) => {
+      const img = new Image();
+      const timeout = window.setTimeout(() => resolve(null), 3000);
+      img.addEventListener(
+        "load",
+        () => {
+          window.clearTimeout(timeout);
+          resolve(
+            img.naturalWidth > 0 && img.naturalHeight > 0
+              ? { width: img.naturalWidth, height: img.naturalHeight }
+              : null,
+          );
+        },
+        { once: true },
+      );
+      img.addEventListener(
+        "error",
+        () => {
+          window.clearTimeout(timeout);
+          resolve(null);
+        },
+        { once: true },
+      );
+      img.src = src;
+    });
+  }
+
+  return new Promise((resolve) => {
+    const video = document.createElement("video");
+    video.preload = "metadata";
+    const timeout = window.setTimeout(() => resolve(null), 3000);
+    const finalize = (value: { width: number; height: number } | null) => {
+      window.clearTimeout(timeout);
+      video.src = "";
+      video.load();
+      resolve(value);
+    };
+    video.addEventListener(
+      "loadedmetadata",
+      () => {
+        finalize(
+          video.videoWidth > 0 && video.videoHeight > 0
+            ? { width: video.videoWidth, height: video.videoHeight }
+            : null,
+        );
+      },
+      { once: true },
+    );
+    video.addEventListener("error", () => finalize(null), { once: true });
+    video.src = src;
+  });
+}

package/src/utils/studioPreviewHelpers.test.ts

@@ -25,6 +25,15 @@ function stubRect(el: Element, rect: DOMRect): void {
   el.getBoundingClientRect = () => rect;
 }
 
+/** Create and attach a preview iframe, returning it with its (asserted) document. */
+function createPreviewIframe(): { iframe: HTMLIFrameElement; doc: Document } {
+  const iframe = document.createElement("iframe");
+  document.body.append(iframe);
+  const doc = iframe.contentDocument;
+  if (!doc) throw new Error("Expected iframe document");
+  return { iframe, doc };
+}
+
 describe("coversComposition (full-bleed canvas-pick exclusion)", () => {
   const viewport = { width: 1920, height: 1080 };
 
@@ -106,10 +115,7 @@ describe("pauseStudioPreviewPlayback", () => {
 
 describe("getPreviewTargetFromPointer", () => {
   it("skips candidates hidden from author hit-testing by inherited pointer-events:none", () => {
-    const iframe = document.createElement("iframe");
-    document.body.append(iframe);
-    const doc = iframe.contentDocument;
-    if (!doc) throw new Error("Expected iframe document");
+    const { iframe, doc } = createPreviewIframe();
 
     doc.body.innerHTML = `
       <main id="scene" data-composition-id="scene">
@@ -141,10 +147,7 @@ describe("getPreviewTargetFromPointer", () => {
   });
 
   it("honors a CSS-class pointer-events:auto opt-in under a pointer-events:none ancestor", () => {
-    const iframe = document.createElement("iframe");
-    document.body.append(iframe);
-    const doc = iframe.contentDocument;
-    if (!doc) throw new Error("Expected iframe document");
+    const { iframe, doc } = createPreviewIframe();
 
     doc.head.innerHTML = `<style>.clickable { pointer-events: auto; }</style>`;
     doc.body.innerHTML = `
@@ -172,4 +175,58 @@ describe("getPreviewTargetFromPointer", () => {
 
     iframe.remove();
   });
+
+  it("selects a full-bleed <video> instead of skipping to the element behind it", () => {
+    const { iframe, doc } = createPreviewIframe();
+
+    doc.body.innerHTML = `
+      <main id="scene" data-composition-id="scene">
+        <div id="backdrop"></div>
+        <video id="hero"></video>
+      </main>
+    `;
+
+    const scene = doc.getElementById("scene");
+    const backdrop = doc.getElementById("backdrop");
+    const hero = doc.getElementById("hero");
+    if (!scene || !backdrop || !hero) throw new Error("Expected preview fixture elements");
+
+    stubRect(iframe, domRect(0, 0, 400, 300));
+    stubRect(scene, domRect(0, 0, 400, 300));
+    stubRect(backdrop, domRect(0, 0, 400, 300));
+    // Full-bleed hero video painted on top of a full-bleed backdrop.
+    stubRect(hero, domRect(0, 0, 400, 300));
+    doc.elementsFromPoint = () => [hero, backdrop, scene];
+
+    // Before the fix the video was full-bleed-excluded and the picker fell through
+    // to the backdrop (or null). It must now return the video itself.
+    expect(getPreviewTargetFromPointer(iframe, 200, 150, "index.html")).toBe(hero);
+
+    iframe.remove();
+  });
+
+  it("still excludes a full-bleed non-media container so clicks reach inner content", () => {
+    const { iframe, doc } = createPreviewIframe();
+
+    doc.body.innerHTML = `
+      <main id="scene" data-composition-id="scene">
+        <div id="wrapper"><h1 id="headline">Title</h1></div>
+      </main>
+    `;
+
+    const scene = doc.getElementById("scene");
+    const wrapper = doc.getElementById("wrapper");
+    const headline = doc.getElementById("headline");
+    if (!scene || !wrapper || !headline) throw new Error("Expected preview fixture elements");
+
+    stubRect(iframe, domRect(0, 0, 400, 300));
+    stubRect(scene, domRect(0, 0, 400, 300));
+    stubRect(wrapper, domRect(0, 0, 400, 300));
+    stubRect(headline, domRect(40, 40, 160, 48));
+    doc.elementsFromPoint = () => [headline, wrapper, scene];
+
+    expect(getPreviewTargetFromPointer(iframe, 80, 64, "index.html")).toBe(headline);
+
+    iframe.remove();
+  });
 });

package/src/utils/studioPreviewHelpers.ts

@@ -21,6 +21,15 @@ interface PreviewLocalPointer {
 // should remain canvas-selectable.
 const FULL_BLEED_RATIO = 0.95;
 
+// Media leaves (a hero/background video, a full-bleed image, an <svg>/<canvas>
+// backdrop) ARE the content a user clicks — they must stay canvas-selectable even
+// at full-bleed. Only empty containers (scene wrappers, layout backdrops) get
+// excluded. Without this, a full-bleed <video> is skipped and the click lands on
+// whatever sits behind it — the reported "can't select videos / selects the layer
+// behind" bug (and the "needs a second click" symptom, where the first click
+// resolves through the video to nothing and only the hover fallback recovers).
+const FULL_BLEED_SELECTABLE_MEDIA_TAGS = new Set(["video", "img", "canvas", "svg"]);
+
 export function coversComposition(
   elRect: { width: number; height: number },
   viewport: DomEditViewport,
@@ -33,6 +42,7 @@ export function coversComposition(
 }
 
 function isFullBleedTarget(el: HTMLElement, viewport: DomEditViewport): boolean {
+  if (FULL_BLEED_SELECTABLE_MEDIA_TAGS.has(el.tagName.toLowerCase())) return false;
   return coversComposition(el.getBoundingClientRect(), viewport);
 }
 

package/src/utils/studioTelemetry.ts

@@ -42,7 +42,10 @@ function getSessionProperties(): EventProperties {
     viewport_width: window.innerWidth,
     viewport_height: window.innerHeight,
     user_agent: navigator.userAgent,
-    url_hash: location.hash.replace(/#project\//, ""),
+    // Route slug only — drop the query string, which carries the current
+    // selection (selId / selSelector are the user's own element ids/CSS
+    // selectors) and other view state we must not send to analytics.
+    url_hash: location.hash.replace(/#project\//, "").split("?")[0],
   };
 }
 

package/src/utils/studioUrlState.test.ts

@@ -79,7 +79,6 @@ function renderStudioUrlStateHarness(
     previewIframeRef: { current: null },
     rightPanelTab: "renders",
     rightCollapsed: true,
-    timelineVisible: true,
     activeCompPathHydrated: true,
     domEditSelection: null,
     buildDomSelectionFromTarget: () => Promise.resolve(null),

package/src/utils/timelineAssetDrop.ts

@@ -1,4 +1,5 @@
 import { AUDIO_EXT, IMAGE_EXT, VIDEO_EXT } from "./mediaTypes";
+import { patchRootCompositionDuration, readRootCompositionDuration } from "./rootDuration";
 import { roundToCenti } from "./rounding";
 import { COMPOSITION_ROOT_OPEN_TAG_RE } from "./compositionPatterns";
 
@@ -98,6 +99,8 @@ export function resolveTimelineAssetInitialGeometry(source: string): {
 
 export function buildTimelineAssetInsertHtml(input: {
   id: string;
+  /** Stable hf-id stamped as data-hf-id by the NLE drop path (optional in the legacy path). */
+  hfId?: string;
   assetPath: string;
   kind: TimelineAssetKind;
   start: number;
@@ -136,3 +139,62 @@ export function insertTimelineAssetIntoSource(source: string, assetHtml: string)
     .join("\n");
   return `${source.slice(0, insertAt)}\n${childIndent}${indented}${source.slice(insertAt)}`;
 }
+
+/**
+ * Set the composition root's `data-duration` to `contentEnd` (grow OR shrink) so the
+ * timeline length tracks content — the content-driven counterpart to
+ * extendCompositionDurationIfNeeded's grow-only ratchet. Used after edits that can
+ * reduce the furthest clip end (delete/trim). No-op when `contentEnd` is not > 0, so
+ * an empty timeline keeps its declared duration instead of collapsing to 0.
+ */
+export function setCompositionDurationToContent(source: string, contentEnd: number): string {
+  if (!Number.isFinite(contentEnd) || contentEnd <= 0) return source;
+  const rootDur = readRootCompositionDuration(source);
+  if (rootDur == null) return source;
+  const next = roundToCenti(contentEnd);
+  if (rootDur === next) return source;
+  return patchRootCompositionDuration(source, String(next));
+}
+
+export function extendCompositionDurationIfNeeded(source: string, requiredEnd: number): string {
+  const rootDur = readRootCompositionDuration(source);
+  if (rootDur == null || !Number.isFinite(rootDur) || requiredEnd <= rootDur) return source;
+  return patchRootCompositionDuration(source, String(roundToCenti(requiredEnd)));
+}
+
+/**
+ * Set the composition root's `data-duration` to `contentEnd` (grow OR shrink) so the
+ * timeline length tracks content — the content-driven counterpart to
+ * extendCompositionDurationIfNeeded's grow-only ratchet. Used after edits that can
+ * reduce the furthest clip end (delete/trim). No-op when `contentEnd` is not > 0, so
+ * an empty timeline keeps its declared duration instead of collapsing to 0.
+ */
+export function fitTimelineAssetGeometry(
+  natural: { width: number; height: number } | null,
+  comp: { width: number; height: number },
+): { left: number; top: number; width: number; height: number } {
+  if (!natural || natural.width <= 0 || natural.height <= 0) {
+    return { left: 0, top: 0, width: comp.width, height: comp.height };
+  }
+  const scale = Math.min(1, comp.width / natural.width, comp.height / natural.height);
+  const width = Math.round(natural.width * scale);
+  const height = Math.round(natural.height * scale);
+  return {
+    left: Math.round((comp.width - width) / 2),
+    top: Math.round((comp.height - height) / 2),
+    width,
+    height,
+  };
+}
+
+export function resolveTimelineAssetCompositionSize(source: string): {
+  width: number;
+  height: number;
+} {
+  const width = Number.parseFloat(source.match(/\bdata-width=(["'])([^"']+)\1/i)?.[2] ?? "");
+  const height = Number.parseFloat(source.match(/\bdata-height=(["'])([^"']+)\1/i)?.[2] ?? "");
+  return {
+    width: Number.isFinite(width) && width > 0 ? Math.round(width) : 640,
+    height: Number.isFinite(height) && height > 0 ? Math.round(height) : 360,
+  };
+}

package/src/utils/timelineDiscovery.ts

@@ -1,9 +1,3 @@
-export const TIMELINE_TOGGLE_SHORTCUT_LABEL = "Shift+T";
-type TimelineToggleHotkeyEvent = Pick<
-  KeyboardEvent,
-  "key" | "shiftKey" | "metaKey" | "ctrlKey" | "altKey" | "target"
->;
-
 interface EditableTargetLike {
   tagName?: string;
   isContentEditable?: boolean;
@@ -28,14 +22,3 @@ export function isEditableTarget(target: EventTarget | null): boolean {
     ),
   );
 }
-
-export function shouldHandleTimelineToggleHotkey(event: TimelineToggleHotkeyEvent): boolean {
-  if (event.metaKey || event.ctrlKey || event.altKey) return false;
-  if (!event.shiftKey) return false;
-  if (event.key.toLowerCase() !== "t") return false;
-  return !isEditableTarget(event.target);
-}
-
-export function getTimelineToggleTitle(timelineVisible: boolean): string {
-  return `${timelineVisible ? "Hide" : "Show"} timeline editor (${TIMELINE_TOGGLE_SHORTCUT_LABEL})`;
-}