@hyperframes/studio 0.6.96 → 0.6.98

package/src/utils/keyframeSnapping.test.ts

@@ -1,74 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { computeSnapThreshold, snapKeyframe } from "./keyframeSnapping";
-
-describe("snapKeyframe", () => {
-  test("snaps to frame boundary", () => {
-    const result = snapKeyframe(0.34, { fps: 30, keyframeTimes: [], threshold: 0.05 });
-    expect(result.snapType).toBe("frame");
-    expect(Math.abs(result.snappedTime - 1 / 3)).toBeLessThan(0.01);
-  });
-
-  test("snaps to cross-element keyframe when closest", () => {
-    const result = snapKeyframe(1.005, { fps: 30, keyframeTimes: [1.0], threshold: 0.05 });
-    expect(result.snapType).toBe("keyframe");
-    expect(result.snappedTime).toBe(1.0);
-  });
-
-  test("keyframe snap wins tie with frame at same position", () => {
-    const result = snapKeyframe(1.0, { fps: 30, keyframeTimes: [1.0], threshold: 0.05 });
-    expect(result.snapType).toBe("keyframe");
-    expect(result.snappedTime).toBe(1.0);
-  });
-
-  test("snaps to beat marker when closer than frame", () => {
-    const result = snapKeyframe(2.49, {
-      fps: 30,
-      keyframeTimes: [],
-      beatTimes: [2.5],
-      threshold: 0.05,
-    });
-    expect(result.snapType).toBe("beat");
-    expect(result.snappedTime).toBe(2.5);
-  });
-
-  test("disabled returns raw time", () => {
-    const result = snapKeyframe(1.5, {
-      fps: 30,
-      keyframeTimes: [1.5],
-      threshold: 0.05,
-      disabled: true,
-    });
-    expect(result.snapType).toBeNull();
-    expect(result.snappedTime).toBe(1.5);
-  });
-
-  test("no snap when outside threshold", () => {
-    const result = snapKeyframe(1.5, {
-      fps: 30,
-      keyframeTimes: [0.5],
-      threshold: 0.05,
-    });
-    expect(result.snapType).toBe("frame");
-  });
-
-  test("empty beat times is graceful", () => {
-    const result = snapKeyframe(0.5, {
-      fps: 30,
-      keyframeTimes: [],
-      beatTimes: [],
-      threshold: 0.05,
-    });
-    expect(result.snapType).toBe("frame");
-  });
-});
-
-describe("computeSnapThreshold", () => {
-  test("returns threshold based on pixels per second", () => {
-    const threshold = computeSnapThreshold(100, 5);
-    expect(threshold).toBe(0.05);
-  });
-
-  test("fallback for zero pixels per second", () => {
-    expect(computeSnapThreshold(0)).toBe(0.1);
-  });
-});

package/src/utils/keyframeSnapping.ts

@@ -1,63 +0,0 @@
-export type SnapType = "frame" | "keyframe" | "beat" | null;
-
-export interface SnapResult {
-  snappedTime: number;
-  snapType: SnapType;
-}
-
-export function snapKeyframe(
-  time: number,
-  options: {
-    fps: number;
-    keyframeTimes: number[];
-    beatTimes?: number[];
-    threshold: number;
-    disabled?: boolean;
-  },
-): SnapResult {
-  if (options.disabled) return { snappedTime: time, snapType: null };
-
-  const { fps, keyframeTimes, beatTimes = [], threshold } = options;
-
-  let bestDist = threshold;
-  let bestTime = time;
-  let bestType: SnapType = null;
-
-  // Priority: cross-element keyframes > beat markers > frame boundaries
-  // Higher priority snaps use strict < so they win on equal distance
-  if (fps > 0) {
-    const frameDuration = 1 / fps;
-    const nearestFrame = Math.round(time / frameDuration) * frameDuration;
-    const dist = Math.abs(time - nearestFrame);
-    if (dist < bestDist) {
-      bestDist = dist;
-      bestTime = nearestFrame;
-      bestType = "frame";
-    }
-  }
-
-  for (const bt of beatTimes) {
-    const dist = Math.abs(time - bt);
-    if (dist <= bestDist) {
-      bestDist = dist;
-      bestTime = bt;
-      bestType = "beat";
-    }
-  }
-
-  for (const kt of keyframeTimes) {
-    const dist = Math.abs(time - kt);
-    if (dist <= bestDist) {
-      bestDist = dist;
-      bestTime = kt;
-      bestType = "keyframe";
-    }
-  }
-
-  return { snappedTime: bestTime, snapType: bestType };
-}
-
-export function computeSnapThreshold(pixelsPerSecond: number, baseThresholdPx: number = 5): number {
-  if (pixelsPerSecond <= 0) return 0.1;
-  return baseThresholdPx / pixelsPerSecond;
-}

package/src/utils/timelineInspector.test.ts

@@ -1,79 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { Window } from "happy-dom";
-import {
-  canInspectTimelineElement,
-  getTimelineLayerVisibilityInPreview,
-  getTimelineElementKey,
-  isAudioTimelineElement,
-  isTimelineElementActiveAtTime,
-  isTimelineLayerVisibleInPreview,
-  shouldShowTimelineInspectorBounds,
-} from "./timelineInspector";
-
-function createDocument(markup: string): Document {
-  const window = new Window();
-  window.document.body.innerHTML = markup;
-  return window.document;
-}
-
-function attachVisibleBox(element: HTMLElement) {
-  Object.defineProperty(element, "getBoundingClientRect", {
-    configurable: true,
-    value: () => ({
-      bottom: 34,
-      height: 24,
-      left: 10,
-      right: 90,
-      top: 10,
-      width: 80,
-      x: 10,
-      y: 10,
-      toJSON: () => ({}),
-    }),
-  });
-}
-
-describe("timeline inspector", () => {
-  it("keeps visual clips inspectable and audio-only clips out of the visual panel", () => {
-    expect(canInspectTimelineElement({ tag: "section" })).toBe(true);
-    expect(canInspectTimelineElement({ tag: "video", src: "assets/demo.mp4" })).toBe(true);
-    expect(canInspectTimelineElement({ tag: "audio" })).toBe(false);
-    expect(canInspectTimelineElement({ tag: "div", src: "assets/narration.mp3" })).toBe(false);
-    expect(isAudioTimelineElement({ tag: "sfx" })).toBe(true);
-  });
-
-  it("uses stable timeline keys and only shows bounds at clip edges", () => {
-    expect(getTimelineElementKey({ id: "card", key: "index.html#card" })).toBe("index.html#card");
-    expect(shouldShowTimelineInspectorBounds(2, { start: 2, duration: 4 })).toBe(true);
-    expect(shouldShowTimelineInspectorBounds(6, { start: 2, duration: 4 })).toBe(true);
-    expect(shouldShowTimelineInspectorBounds(4, { start: 2, duration: 4 })).toBe(false);
-  });
-
-  it("keeps selected layer bounds visible only while the clip is active", () => {
-    expect(isTimelineElementActiveAtTime(1.99, { start: 2, duration: 4 }, 0)).toBe(false);
-    expect(isTimelineElementActiveAtTime(2, { start: 2, duration: 4 }, 0)).toBe(true);
-    expect(isTimelineElementActiveAtTime(4, { start: 2, duration: 4 }, 0)).toBe(true);
-    expect(isTimelineElementActiveAtTime(6, { start: 2, duration: 4 }, 0)).toBe(true);
-    expect(isTimelineElementActiveAtTime(6.01, { start: 2, duration: 4 }, 0)).toBe(false);
-  });
-
-  it("uses composite visibility for nested layers", () => {
-    const hiddenDoc = createDocument(`<div style="opacity: 0"><span id="label">Label</span></div>`);
-    const hiddenLabel = hiddenDoc.getElementById("label") as HTMLElement;
-    attachVisibleBox(hiddenLabel);
-    expect(isTimelineLayerVisibleInPreview(hiddenLabel)).toBe(false);
-
-    const visibleDoc = createDocument(
-      `<div style="opacity: 1"><span id="label">Label</span></div>`,
-    );
-    const visibleLabel = visibleDoc.getElementById("label") as HTMLElement;
-    attachVisibleBox(visibleLabel);
-    expect(isTimelineLayerVisibleInPreview(visibleLabel)).toBe(true);
-    expect(getTimelineLayerVisibilityInPreview(visibleLabel)).toMatchObject({
-      compositeOpacity: 1,
-      hasBox: true,
-      inViewport: true,
-      visible: true,
-    });
-  });
-});