npm - @hyperframes/studio - Versions diffs - 0.6.108 → 0.6.110 - Mend

@hyperframes/studio 0.6.108 → 0.6.110

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/dist/assets/hyperframes-player-BRjQ5a5_.js +418 -0
package/dist/assets/{index-BVqybwMG.css → index-1C8oFiPi.css} +1 -1
package/dist/assets/{index-Btg-jqxS.js → index-CXy_mWnP.js} +1 -1
package/dist/assets/{index-tn9M43-U.js → index-CfiyaR7G.js} +1 -1
package/dist/assets/{index-BgbVhDYd.js → index-D-3sGz65.js} +88 -88
package/dist/index.html +2 -2
package/package.json +5 -5
package/src/components/editor/gsapAnimationConstants.ts +24 -0
package/src/components/editor/gsapAnimationHelpers.test.ts +29 -0
package/src/hooks/useGsapTweenCache.ts +0 -27
package/src/hooks/useRazorSplit.ts +4 -10
package/src/utils/timelineElementSplit.test.ts +61 -1
package/src/utils/timelineElementSplit.ts +18 -0
package/dist/assets/hyperframes-player-67pq7USK.js +0 -418

package/dist/index.html CHANGED Viewed

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>HyperFrames Studio</title>
-    <script type="module" crossorigin src="/assets/index-BgbVhDYd.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BVqybwMG.css">
+    <script type="module" crossorigin src="/assets/index-D-3sGz65.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-1C8oFiPi.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.6.108",
+  "version": "0.6.110",
   "description": "",
   "repository": {
     "type": "git",
@@ -33,9 +33,9 @@
     "@phosphor-icons/react": "^2.1.10",
     "bpm-detective": "^2.0.5",
     "mediabunny": "^1.45.3",
-    "@hyperframes/player": "0.6.108",
-    "@hyperframes/core": "0.6.108",
-    "@hyperframes/sdk": "0.6.108"
+    "@hyperframes/sdk": "0.6.110",
+    "@hyperframes/core": "0.6.110",
+    "@hyperframes/player": "0.6.110"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -49,7 +49,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.6.108"
+    "@hyperframes/producer": "0.6.110"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/editor/gsapAnimationConstants.ts CHANGED Viewed

@@ -20,6 +20,12 @@ export const PROP_LABELS: Record<string, string> = {
   width: "Width",
   height: "Height",
   rotation: "Rotate",
+  z: "Move Z",
+  rotationX: "Rotate X",
+  rotationY: "Rotate Y",
+  rotationZ: "Rotate Z",
+  perspective: "Perspective",
+  transformOrigin: "Transform Origin",
   opacity: "Opacity",
   scale: "Scale",
   scaleX: "Scale X",
@@ -46,6 +52,12 @@ export const PROP_UNITS: Record<string, string> = {
   width: "px",
   height: "px",
   rotation: "°",
+  z: "px",
+  rotationX: "°",
+  rotationY: "°",
+  rotationZ: "°",
+  perspective: "px",
+  transformOrigin: "",
   opacity: "%",
   scale: "×",
   scaleX: "×",
@@ -62,6 +74,13 @@ export const PROP_TOOLTIPS: Record<string, string> = {
   scaleX: "Horizontal stretch (1 = normal)",
   scaleY: "Vertical stretch (1 = normal)",
   rotation: "Spin angle (360 = full rotation)",
+  z: "Move forward/back along the Z axis",
+  rotationX: "Rotate around the horizontal X axis",
+  rotationY: "Rotate around the vertical Y axis",
+  rotationZ: "Rotate around the screen-facing Z axis",
+  perspective:
+    "3D depth context for child elements; set it on a parent when rotating children in 3D",
+  transformOrigin: "Pivot point for transforms, for example center center or 50% 50%",
   width: "Element width",
   height: "Element height",
   autoAlpha: "Like opacity but hides element completely at 0",
@@ -147,6 +166,11 @@ export const PROP_CONSTRAINTS: Record<string, { min?: number; max?: number; step
   scaleX: { min: -10, max: 10, step: 0.01 },
   scaleY: { min: -10, max: 10, step: 0.01 },
   rotation: { step: 1 },
+  z: { step: 1 },
+  rotationX: { step: 1 },
+  rotationY: { step: 1 },
+  rotationZ: { step: 1 },
+  perspective: { min: 0, step: 1 },
   skewX: { min: -90, max: 90, step: 1 },
   skewY: { min: -90, max: 90, step: 1 },
   width: { min: 0, step: 1 },

package/src/components/editor/gsapAnimationHelpers.test.ts CHANGED Viewed

@@ -1,5 +1,7 @@
 import { describe, expect, it } from "vitest";
+import { SUPPORTED_PROPS } from "@hyperframes/core/gsap-constants";
 import { buildTweenSummary } from "./gsapAnimationHelpers";
+import { PROP_LABELS } from "./gsapAnimationConstants";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 function anim(overrides: Partial<GsapAnimation>): GsapAnimation {
@@ -23,6 +25,27 @@ describe("buildTweenSummary", () => {
     expect(s).toContain("move x");
   });
+  it("describes 3D transform tweens with labels and units", () => {
+    const s = buildTweenSummary(
+      anim({
+        properties: {
+          z: 120,
+          rotationX: 45,
+          rotationY: -30,
+          rotationZ: 90,
+          perspective: 800,
+          transformOrigin: "50% 50%",
+        },
+      }),
+    );
+    expect(s).toContain("move z to 120px");
+    expect(s).toContain("rotate x to 45°");
+    expect(s).toContain("rotate y to -30°");
+    expect(s).toContain("rotate z to 90°");
+    expect(s).toContain("perspective to 800px");
+    expect(s).toContain("transform origin to 50% 50%");
+  });
   it("describes a from tween", () => {
     const s = buildTweenSummary(anim({ method: "from", properties: { opacity: 0 } }));
     expect(s).toContain("enters from");
@@ -65,3 +88,9 @@ describe("buildTweenSummary", () => {
     expect(s).toContain("no properties yet");
   });
 });
+describe("PROP_LABELS", () => {
+  it("provides labels for every inspector-supported GSAP property", () => {
+    expect(SUPPORTED_PROPS.filter((prop) => !PROP_LABELS[prop])).toEqual([]);
+  });
+});

package/src/hooks/useGsapTweenCache.ts CHANGED Viewed

@@ -366,13 +366,6 @@ export function usePopulateKeyframeCacheForFile(
       const { setKeyframeCache } = usePlayerStore.getState();
       clearKeyframeCacheForFile(sf);
       const { elements } = usePlayerStore.getState();
-      console.log(
-        "[kf:static] elements in store:",
-        elements
-          .map((e) => e.domId)
-          .filter(Boolean)
-          .join(", "),
-      );
       const mergedByElement = new Map<string, GsapKeyframesData>();
       for (const anim of parsed.animations) {
         const id = extractIdFromSelector(anim.targetSelector);
@@ -415,12 +408,6 @@ export function usePopulateKeyframeCacheForFile(
           mergedByElement.set(id, { ...kfData, keyframes: clipKeyframes });
         }
       }
-      console.log(
-        "[kf:static] merged elements:",
-        [...mergedByElement.keys()].join(", "),
-        "kf counts:",
-        [...mergedByElement.entries()].map(([k, v]) => `${k}:${v.keyframes.length}`).join(", "),
-      );
       for (const [id, kfData] of mergedByElement) {
         setKeyframeCache(`${sf}#${id}`, kfData);
         setKeyframeCache(id, kfData);
@@ -454,12 +441,6 @@ export function usePopulateKeyframeCacheForFile(
         if (el.domId) clipById.set(el.domId, { start: el.start, duration: el.duration });
       }
       const scanned = scanAllRuntimeKeyframes(iframe, clipById);
-      console.log(
-        "[kf:runtime] scanned",
-        scanned.size,
-        "elements:",
-        [...scanned.keys()].join(", "),
-      );
       if (scanned.size === 0) return false;
       const { setKeyframeCache, keyframeCache } = usePlayerStore.getState();
       for (const [id, data] of scanned) {
@@ -470,14 +451,6 @@ export function usePopulateKeyframeCacheForFile(
         if (alreadyCached) {
           continue;
         }
-        console.log(
-          "[kf:runtime] adding runtime entry:",
-          id,
-          "kfs:",
-          data.keyframes.length,
-          "arc:",
-          !!data.arcPath,
-        );
         const entry = {
           format: "percentage" as const,
           keyframes: data.keyframes,

package/src/hooks/useRazorSplit.ts CHANGED Viewed

@@ -5,10 +5,10 @@ import { saveProjectFilesWithHistory } from "../utils/studioFileHistory";
 import { getTimelineElementLabel, collectHtmlIds } from "../utils/studioHelpers";
 import { trackStudioRazorSplit } from "../telemetry/events";
 import {
-  canSplitElement,
+  canSplitElementAt,
+  selectSplittableElements,
   buildPatchTarget,
   readFileContent,
-  isSplitTimeWithinBounds,
 } from "../utils/timelineElementSplit";
 import type { RecordEditInput } from "./timelineEditingHelpers";
@@ -170,11 +170,7 @@ export function useRazorSplit({
       }
       const pid = projectIdRef.current;
-      if (!pid || !canSplitElement(element)) return;
-      if (!isSplitTimeWithinBounds(splitTime, element.start, element.duration)) {
-        return;
-      }
+      if (!pid || !canSplitElementAt(element, splitTime)) return;
       try {
         const { targetPath, originalContent, patchedContent, changed, skippedSelectors } =
@@ -232,9 +228,7 @@ export function useRazorSplit({
       const pid = projectIdRef.current;
       if (!pid) return;
       const { elements } = usePlayerStore.getState();
-      const splittable = elements.filter(
-        (el) => canSplitElement(el) && splitTime > el.start && splitTime < el.start + el.duration,
-      );
+      const splittable = selectSplittableElements(elements, splitTime);
       if (splittable.length === 0) return;
       try {

package/src/utils/timelineElementSplit.test.ts CHANGED Viewed

@@ -1,5 +1,22 @@
 import { describe, it, expect } from "vitest";
-import { SPLIT_BOUNDARY_EPSILON_S, isSplitTimeWithinBounds } from "./timelineElementSplit";
+import type { TimelineElement } from "../player/store/playerStore";
+import {
+  SPLIT_BOUNDARY_EPSILON_S,
+  canSplitElementAt,
+  isSplitTimeWithinBounds,
+  selectSplittableElements,
+} from "./timelineElementSplit";
+function element(overrides: Partial<TimelineElement> = {}): TimelineElement {
+  return {
+    id: "el-1",
+    tag: "div",
+    start: 1,
+    duration: 4,
+    track: 0,
+    ...overrides,
+  };
+}
 describe("isSplitTimeWithinBounds", () => {
   const start = 1;
@@ -48,3 +65,46 @@ describe("isSplitTimeWithinBounds", () => {
     expect(isSplitTimeWithinBounds(start + shortDuration / 2, start, shortDuration)).toBe(false);
   });
 });
+describe("canSplitElementAt", () => {
+  it("accepts a splittable element at an interior time", () => {
+    expect(canSplitElementAt(element({ start: 1, duration: 4 }), 3)).toBe(true);
+  });
+  it("rejects a time inside the boundary epsilon", () => {
+    expect(
+      canSplitElementAt(element({ start: 1, duration: 4 }), 1 + SPLIT_BOUNDARY_EPSILON_S / 2),
+    ).toBe(false);
+  });
+  it("rejects locked, implicit and sub-composition elements", () => {
+    expect(canSplitElementAt(element({ timelineLocked: true }), 3)).toBe(false);
+    expect(canSplitElementAt(element({ timingSource: "implicit" }), 3)).toBe(false);
+    expect(canSplitElementAt(element({ compositionSrc: "child.html" }), 3)).toBe(false);
+  });
+});
+describe("selectSplittableElements", () => {
+  it("excludes a clip shorter than two epsilons even when the time is inside it", () => {
+    // Regression: split-all used raw start < t < end, so a clip too short for
+    // the epsilon margin was still selected and produced a degenerate slice.
+    const tiny = element({ id: "tiny", start: 1, duration: SPLIT_BOUNDARY_EPSILON_S + 0.01 });
+    const interiorTime = tiny.start + tiny.duration / 2;
+    expect(interiorTime).toBeGreaterThan(tiny.start);
+    expect(interiorTime).toBeLessThan(tiny.start + tiny.duration);
+    expect(selectSplittableElements([tiny], interiorTime)).toEqual([]);
+  });
+  it("keeps only the elements whose epsilon-bounded range contains the time", () => {
+    const inside = element({ id: "inside", start: 0, duration: 4 });
+    const outside = element({ id: "outside", start: 5, duration: 4 });
+    const locked = element({ id: "locked", start: 0, duration: 4, timelineLocked: true });
+    const result = selectSplittableElements([inside, outside, locked], 2);
+    expect(result.map((el) => el.id)).toEqual(["inside"]);
+  });
+  it("accepts an element at the exact lower clamp boundary", () => {
+    const el = element({ start: 2, duration: 4 });
+    expect(selectSplittableElements([el], 2 + SPLIT_BOUNDARY_EPSILON_S)).toEqual([el]);
+  });
+});

package/src/utils/timelineElementSplit.ts CHANGED Viewed

@@ -30,3 +30,21 @@ export function canSplitElement(el: TimelineElement): boolean {
     Number.isFinite(el.duration)
   );
 }
+/**
+ * True when `el` can be split AND `splitTime` lies within its boundary epsilon.
+ * Shared by the single-clip and split-all razor paths so both honor the same
+ * minimum-distance rule (split-all previously used raw `>`/`<`, letting cuts
+ * land inside the epsilon margin and produce a degenerate slice).
+ */
+export function canSplitElementAt(el: TimelineElement, splitTime: number): boolean {
+  return canSplitElement(el) && isSplitTimeWithinBounds(splitTime, el.start, el.duration);
+}
+/** Elements that the split-all razor action can cut at `splitTime`. */
+export function selectSplittableElements(
+  elements: TimelineElement[],
+  splitTime: number,
+): TimelineElement[] {
+  return elements.filter((el) => canSplitElementAt(el, splitTime));
+}