@hyperframes/studio 0.6.122-alpha.0 → 0.7.0

package/src/utils/studioHelpers.ts

@@ -185,6 +185,30 @@ export function findMatchingTimelineElementId(
   return null;
 }
 
+/**
+ * A selected DOM node may be a static descendant of a clip (e.g. the `.num` text
+ * inside a `#stat1` card) — not a timeline element itself. Walk up to the nearest
+ * ancestor that IS a clip so the timeline still selects + inline-expands around it.
+ */
+export function findTimelineIdByAncestor(
+  element: Element | null | undefined,
+  elements: TimelineElement[],
+  sourceFile: string,
+): string | null {
+  let ancestor = element?.parentElement ?? null;
+  while (ancestor) {
+    const id = ancestor.id;
+    if (id) {
+      const match = elements.find(
+        (el) => el.domId === id && (el.sourceFile ?? "index.html") === sourceFile,
+      );
+      if (match) return match.key ?? match.id;
+    }
+    ancestor = ancestor.parentElement;
+  }
+  return null;
+}
+
 export function resolveTimelineSelectionSeekTime(
   currentTime: number,
   element: Pick<TimelineElement, "start" | "duration"> | null | undefined,

package/src/utils/studioPreviewHelpers.test.ts

@@ -1,5 +1,30 @@
 import { describe, expect, it, vi } from "vitest";
-import { pauseStudioPreviewPlayback } from "./studioPreviewHelpers";
+import { coversComposition, pauseStudioPreviewPlayback } from "./studioPreviewHelpers";
+
+describe("coversComposition (full-bleed canvas-pick exclusion)", () => {
+  const viewport = { width: 1920, height: 1080 };
+
+  it("treats a full-bleed scene wrapper as covering the composition", () => {
+    expect(coversComposition({ width: 1920, height: 1080 }, viewport)).toBe(true);
+    expect(coversComposition({ width: 1900, height: 1040 }, viewport)).toBe(true); // ~99%/96%
+  });
+
+  it("does NOT exclude inner content (a stat card, a heading)", () => {
+    expect(coversComposition({ width: 320, height: 180 }, viewport)).toBe(false);
+    expect(coversComposition({ width: 1900, height: 200 }, viewport)).toBe(false); // wide but short
+    expect(coversComposition({ width: 200, height: 1040 }, viewport)).toBe(false); // tall but narrow
+  });
+
+  it("needs BOTH axes near full-bleed (>=95%)", () => {
+    expect(coversComposition({ width: 1800, height: 1080 }, viewport)).toBe(false); // 93.75% wide
+    expect(coversComposition({ width: 1920, height: 1000 }, viewport)).toBe(false); // 92.6% tall
+  });
+
+  it("guards against a degenerate viewport", () => {
+    expect(coversComposition({ width: 100, height: 100 }, { width: 0, height: 0 })).toBe(false);
+    expect(coversComposition({ width: 100, height: 100 }, { width: 1, height: 1 })).toBe(false);
+  });
+});
 
 describe("pauseStudioPreviewPlayback", () => {
   it("pauses through __player without pausing sibling timelines directly", () => {

package/src/utils/studioPreviewHelpers.ts

@@ -1,5 +1,4 @@
 import type { DomEditViewport } from "../components/editor/domEditing";
-import { resolveVisualDomEditSelectionTarget } from "../components/editor/domEditing";
 import {
   getDomLayerPatchTarget,
   isElementComputedVisible,
@@ -13,6 +12,29 @@ interface PreviewLocalPointer {
   viewport: DomEditViewport;
 }
 
+// An element is "full-bleed" when its box spans nearly the whole composition on
+// BOTH axes. Such elements (scene wrappers, backdrops) are excluded from canvas
+// click-picking so a click lands on inner content — or deselects on empty area —
+// instead of grabbing the giant container. The Layers panel still selects them.
+// ponytail: pure size heuristic; tighten the ratio if decorative full-bleed art
+// should remain canvas-selectable.
+const FULL_BLEED_RATIO = 0.95;
+
+export function coversComposition(
+  elRect: { width: number; height: number },
+  viewport: DomEditViewport,
+): boolean {
+  if (viewport.width <= 1 || viewport.height <= 1) return false;
+  return (
+    elRect.width / viewport.width >= FULL_BLEED_RATIO &&
+    elRect.height / viewport.height >= FULL_BLEED_RATIO
+  );
+}
+
+function isFullBleedTarget(el: HTMLElement, viewport: DomEditViewport): boolean {
+  return coversComposition(el.getBoundingClientRect(), viewport);
+}
+
 function resolvePreviewLocalPointer(
   iframe: HTMLIFrameElement,
   doc: Document,
@@ -82,18 +104,19 @@ export function getPreviewTargetFromPointer(
   const overrideStyle = forcePointerEventsAuto(doc);
   try {
     if (typeof doc.elementsFromPoint === "function") {
-      const visualTarget = resolveVisualDomEditSelectionTarget(
+      const candidates = resolveAllVisualDomEditTargets(
         doc.elementsFromPoint(localPointer.x, localPointer.y),
-        {
-          activeCompositionPath,
-        },
+        { activeCompositionPath },
       );
+      const visualTarget =
+        candidates.find((el) => !isFullBleedTarget(el, localPointer.viewport)) ?? null;
       if (visualTarget) return visualTarget;
     }
 
     const fallback = getEventTargetElement(doc.elementFromPoint(localPointer.x, localPointer.y));
     if (!fallback || !getDomLayerPatchTarget(fallback, activeCompositionPath)) return null;
     if (!isElementComputedVisible(fallback)) return null;
+    if (isFullBleedTarget(fallback, localPointer.viewport)) return null;
     return fallback;
   } finally {
     removePointerEventsOverride(overrideStyle);
@@ -125,11 +148,12 @@ export function getAllPreviewTargetsFromPointer(
     if (typeof doc.elementsFromPoint === "function") {
       return resolveAllVisualDomEditTargets(doc.elementsFromPoint(localPointer.x, localPointer.y), {
         activeCompositionPath,
-      });
+      }).filter((el) => !isFullBleedTarget(el, localPointer.viewport));
     }
     const fallback = getEventTargetElement(doc.elementFromPoint(localPointer.x, localPointer.y));
     if (!fallback || !getDomLayerPatchTarget(fallback, activeCompositionPath)) return [];
     if (!isElementComputedVisible(fallback)) return [];
+    if (isFullBleedTarget(fallback, localPointer.viewport)) return [];
     return [fallback];
   } finally {
     removePointerEventsOverride(overrideStyle);

package/src/utils/studioTelemetry.ts

@@ -1,3 +1,5 @@
+import { generateId } from "./generateId";
+
 // PostHog public ingest key — write-only, safe to ship in the client bundle
 const POSTHOG_API_KEY = "phc_zjjbX0PnWxERXrMHhkEJWj9A9BhGVLRReICgsfTMmpx";
 const POSTHOG_HOST = "https://us.i.posthog.com";
@@ -29,7 +31,7 @@ function getDistinctId(): string {
   } catch {
     // localStorage may be unavailable
   }
-  distinctId = crypto.randomUUID();
+  distinctId = generateId();
   try {
     localStorage.setItem("hf-studio-anon-id", distinctId);
   } catch {