@hyperframes/studio 0.7.6 → 0.7.8

package/src/components/editor/transform3dProjection.test.ts

@@ -0,0 +1,99 @@
+import { describe, expect, it } from "vitest";
+import { projectAxes, projectCubeFaces, rotate, wrapDeg } from "./transform3dProjection";
+
+const OPTS = { cx: 50, cy: 50, r: 30, persp: 4 };
+
+describe("projectCubeFaces", () => {
+  it("shows the front face (and only front-facing faces) at identity", () => {
+    const faces = projectCubeFaces(0, 0, 0, OPTS);
+    const ids = faces.map((f) => f.id);
+    expect(ids).toContain("front");
+    // Head-on: side/top/bottom normals are edge-on (n.z ≈ 0) → culled.
+    expect(ids).not.toContain("back");
+    expect(faces.length).toBeGreaterThanOrEqual(1);
+    expect(faces.length).toBeLessThanOrEqual(3);
+  });
+
+  it("reveals the top face when tilted forward on X", () => {
+    const ids = projectCubeFaces(45, 0, 0, OPTS).map((f) => f.id);
+    expect(ids).toContain("front");
+    expect(ids).toContain("top");
+    expect(ids).not.toContain("bottom");
+  });
+
+  it("reveals a side face when rotated on Y (CSS rotateY convention)", () => {
+    const ids = projectCubeFaces(0, 45, 0, OPTS).map((f) => f.id);
+    expect(ids).toContain("front");
+    expect(ids).toContain("left");
+    expect(ids).not.toContain("right");
+  });
+
+  it("never returns more than 3 faces (a cube shows at most 3 at once)", () => {
+    for (const [rx, ry, rz] of [
+      [30, 30, 0],
+      [60, 60, 45],
+      [135, 20, 90],
+    ]) {
+      expect(projectCubeFaces(rx, ry, rz, OPTS).length).toBeLessThanOrEqual(3);
+    }
+  });
+
+  it("rotationZ rolls the silhouette without changing which faces are visible", () => {
+    const a = projectCubeFaces(0, 0, 0, OPTS)
+      .map((f) => f.id)
+      .sort();
+    const b = projectCubeFaces(0, 0, 90, OPTS)
+      .map((f) => f.id)
+      .sort();
+    expect(b).toEqual(a);
+    // …but the projected coordinates differ (it rolled).
+    expect(projectCubeFaces(0, 0, 90, OPTS)[0]?.points).not.toEqual(
+      projectCubeFaces(0, 0, 0, OPTS)[0]?.points,
+    );
+  });
+
+  it("paints far faces before near faces (painter's order)", () => {
+    const faces = projectCubeFaces(35, 35, 0, OPTS);
+    for (let i = 1; i < faces.length; i++) {
+      expect(faces[i]!.depth).toBeGreaterThanOrEqual(faces[i - 1]!.depth);
+    }
+  });
+});
+
+describe("projectAxes", () => {
+  it("returns the three X/Y/Z axes with standard colors", () => {
+    const axes = projectAxes(0, 0, 0, OPTS);
+    expect(axes.map((a) => a.id).sort()).toEqual(["x", "y", "z"]);
+    const z = axes.find((a) => a.id === "z")!;
+    expect(z.color).toMatch(/#/);
+  });
+
+  it("flags the toward-viewer axis as front at identity (Z points at the camera)", () => {
+    const z = projectAxes(0, 0, 0, OPTS).find((a) => a.id === "z")!;
+    expect(z.front).toBe(true);
+  });
+
+  it("rotating 180° on Y flips the Z axis away from the viewer", () => {
+    const z = projectAxes(0, 180, 0, OPTS).find((a) => a.id === "z")!;
+    expect(z.front).toBe(false);
+  });
+});
+
+describe("rotate", () => {
+  it("90° on Y maps +x to -z (right edge swings to the back)", () => {
+    const v = rotate({ x: 1, y: 0, z: 0 }, 0, 90, 0);
+    expect(v.x).toBeCloseTo(0, 5);
+    expect(v.z).toBeCloseTo(-1, 5);
+  });
+});
+
+describe("wrapDeg", () => {
+  it("wraps into (-180, 180]", () => {
+    expect(wrapDeg(0)).toBe(0);
+    expect(wrapDeg(180)).toBe(180);
+    expect(wrapDeg(190)).toBe(-170);
+    expect(wrapDeg(-190)).toBe(170);
+    expect(wrapDeg(360)).toBe(0);
+    expect(wrapDeg(540)).toBe(180);
+  });
+});

package/src/components/editor/transform3dProjection.ts

@@ -0,0 +1,172 @@
+/**
+ * Pure cube projection for the 3D-transform widget. Given an element's
+ * rotationX/Y/Z (degrees), project a unit cube to 2D SVG polygons with
+ * back-face culling and painter's-order sorting — no DOM, no React, so it
+ * unit-tests in isolation. Used by Transform3DCube to draw a live preview of
+ * the element's orientation.
+ */
+
+export interface Vec3 {
+  x: number;
+  y: number;
+  z: number;
+}
+
+export interface ProjectedFace {
+  /** Stable face id (front/back/left/right/top/bottom) for keying + theming. */
+  id: string;
+  /** SVG polygon points: "x,y x,y x,y x,y". */
+  points: string;
+  /** 0..1 brightness from how front-facing the rotated normal is (lighting cue). */
+  shade: number;
+  /** Mean depth of the face's corners; larger = nearer the viewer. */
+  depth: number;
+}
+
+const DEG = Math.PI / 180;
+
+/** Rotate a point intrinsically by X, then Y, then Z (degrees). */
+export function rotate(v: Vec3, rx: number, ry: number, rz: number): Vec3 {
+  let { x, y, z } = v;
+  const cx = Math.cos(rx * DEG);
+  const sx = Math.sin(rx * DEG);
+  [y, z] = [y * cx - z * sx, y * sx + z * cx];
+  const cy = Math.cos(ry * DEG);
+  const sy = Math.sin(ry * DEG);
+  [x, z] = [x * cy + z * sy, -x * sy + z * cy];
+  const cz = Math.cos(rz * DEG);
+  const sz = Math.sin(rz * DEG);
+  [x, y] = [x * cz - y * sz, x * sz + y * cz];
+  return { x, y, z };
+}
+
+// Unit-cube corners (±1) — 0-3 back face (z=-1), 4-7 front face (z=1).
+const CORNERS: Vec3[] = [
+  { x: -1, y: -1, z: -1 },
+  { x: 1, y: -1, z: -1 },
+  { x: 1, y: 1, z: -1 },
+  { x: -1, y: 1, z: -1 },
+  { x: -1, y: -1, z: 1 },
+  { x: 1, y: -1, z: 1 },
+  { x: 1, y: 1, z: 1 },
+  { x: -1, y: 1, z: 1 },
+];
+
+const FACES: { id: string; idx: [number, number, number, number]; normal: Vec3 }[] = [
+  { id: "front", idx: [4, 5, 6, 7], normal: { x: 0, y: 0, z: 1 } },
+  { id: "back", idx: [1, 0, 3, 2], normal: { x: 0, y: 0, z: -1 } },
+  { id: "left", idx: [0, 4, 7, 3], normal: { x: -1, y: 0, z: 0 } },
+  { id: "right", idx: [5, 1, 2, 6], normal: { x: 1, y: 0, z: 0 } },
+  // y=+1 corners project to screen-top (SVG y is flipped), so that face is "top".
+  { id: "top", idx: [7, 6, 2, 3], normal: { x: 0, y: 1, z: 0 } },
+  { id: "bottom", idx: [4, 5, 1, 0], normal: { x: 0, y: -1, z: 0 } },
+];
+
+export interface ProjectOpts {
+  /** Center of the SVG viewport. */
+  cx: number;
+  cy: number;
+  /** Half-extent of the cube in SVG units (drawn cube ≈ 2·r before perspective). */
+  r: number;
+  /** Weak-perspective strength in units of `r` (larger = flatter; ~3-6 reads as 3D). */
+  persp?: number;
+}
+
+function round(n: number): number {
+  return Math.round(n * 100) / 100;
+}
+
+// Directional light (upper-front-right), normalized — drives per-face shading so
+// top/front/side read as distinct planes instead of one flat fill.
+const LIGHT = (() => {
+  const v = { x: 0.32, y: 0.56, z: 0.76 };
+  const m = Math.hypot(v.x, v.y, v.z);
+  return { x: v.x / m, y: v.y / m, z: v.z / m };
+})();
+
+/**
+ * Project the cube at the given orientation. Returns only the front-facing
+ * faces (≤3), painter-sorted far→near so the SVG draws nearer faces on top.
+ * Screen Y is flipped (SVG y grows downward). `shade` is a 0..1 lambert term
+ * from {@link LIGHT} for clean directional face tones.
+ */
+export function projectCubeFaces(
+  rx: number,
+  ry: number,
+  rz: number,
+  opts: ProjectOpts,
+): ProjectedFace[] {
+  const { cx, cy, r } = opts;
+  const persp = opts.persp ?? 4;
+  const view = (v: Vec3) => rotate(v, rx, ry, rz);
+  const rotated = CORNERS.map(view);
+  const faces: ProjectedFace[] = [];
+  for (const f of FACES) {
+    const n = view(f.normal);
+    if (n.z <= 1e-6) continue; // back-face cull: normal must point toward viewer
+    const corners = f.idx.map((i) => rotated[i]!);
+    const depth = corners.reduce((s, p) => s + p.z, 0) / 4;
+    const points = corners
+      .map((p) => {
+        // Weak perspective: nearer corners (higher z) project slightly larger.
+        const s = persp / (persp - p.z);
+        return `${round(cx + p.x * r * s)},${round(cy - p.y * r * s)}`;
+      })
+      .join(" ");
+    const lum = Math.max(0, n.x * LIGHT.x + n.y * LIGHT.y + n.z * LIGHT.z);
+    faces.push({ id: f.id, points, shade: 0.3 + lum * 0.7, depth });
+  }
+  faces.sort((a, b) => a.depth - b.depth);
+  return faces;
+}
+
+export interface ProjectedAxis {
+  id: "x" | "y" | "z";
+  /** Axis color (standard X=red, Y=green, Z=blue). */
+  color: string;
+  /** Tip position in SVG coords. */
+  x2: number;
+  y2: number;
+  /** Whether the tip points toward the viewer (drawn in front of the cube). */
+  front: boolean;
+}
+
+const AXES: { id: "x" | "y" | "z"; dir: Vec3; color: string }[] = [
+  { id: "x", dir: { x: 1, y: 0, z: 0 }, color: "#ff6b81" },
+  { id: "y", dir: { x: 0, y: 1, z: 0 }, color: "#5ff08a" },
+  { id: "z", dir: { x: 0, y: 0, z: 1 }, color: "#62b6ff" },
+];
+
+/**
+ * Project the 3 orientation axes (from the cube center) for an X/Y/Z gizmo.
+ * Orthographic — thin lines don't need perspective. `front` lets the caller draw
+ * away-facing axes behind the cube and toward-facing axes on top.
+ */
+export function projectAxes(
+  rx: number,
+  ry: number,
+  rz: number,
+  opts: ProjectOpts,
+): ProjectedAxis[] {
+  const { cx, cy, r } = opts;
+  const len = r * 1.5;
+  const view = (v: Vec3) => rotate(v, rx, ry, rz);
+  return AXES.map((a) => {
+    const p = view(a.dir);
+    return {
+      id: a.id,
+      color: a.color,
+      x2: round(cx + p.x * len),
+      y2: round(cy - p.y * len),
+      front: p.z >= -1e-6,
+    };
+  });
+}
+
+/** Wrap an angle to (-180, 180] so drag accumulation never runs away. */
+export function wrapDeg(deg: number): number {
+  let d = deg % 360;
+  if (d > 180) d -= 360;
+  if (d <= -180) d += 360;
+  return d;
+}

package/src/components/editor/useMotionPathData.ts

@@ -119,7 +119,8 @@ export function useMotionPathData(
       return;
     }
     const recompute = () => {
-      const read = readRuntimeKeyframes(iframeRef.current, selector);
+      // Position-only: never let a co-located size/scale tween shadow the path.
+      const read = readRuntimeKeyframes(iframeRef.current, selector, undefined, ["x", "y"]);
       const next = buildMotionPathGeometry(read);
       setGeometry((prev) =>
         prev?.points === next?.points && prev?.kind === next?.kind ? prev : next,

package/src/components/sidebar/AssetContextMenu.tsx

@@ -0,0 +1,97 @@
+export function ContextMenu({
+  x,
+  y,
+  asset,
+  onClose,
+  onCopy,
+  onDelete,
+  onRename,
+}: {
+  x: number;
+  y: number;
+  asset: string;
+  onClose: () => void;
+  onCopy: (path: string) => void;
+  onDelete?: (path: string) => void;
+  onRename?: (oldPath: string, newPath: string) => void;
+}) {
+  return (
+    <div
+      className="fixed inset-0 z-[200]"
+      onClick={onClose}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        onClose();
+      }}
+    >
+      <div
+        className="absolute bg-neutral-900 border border-neutral-700 rounded-lg shadow-xl py-1 min-w-[140px] text-xs"
+        style={{ left: x, top: y }}
+      >
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onCopy(asset);
+            onClose();
+          }}
+          className="w-full text-left px-3 py-1.5 text-neutral-300 hover:bg-neutral-800 transition-colors"
+        >
+          Copy path
+        </button>
+        {onRename && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onClose();
+            }}
+            className="w-full text-left px-3 py-1.5 text-neutral-300 hover:bg-neutral-800 transition-colors"
+          >
+            Rename
+          </button>
+        )}
+        {onDelete && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete(asset);
+              onClose();
+            }}
+            className="w-full text-left px-3 py-1.5 text-red-400 hover:bg-neutral-800 transition-colors"
+          >
+            Delete
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function DeleteConfirm({
+  name,
+  onConfirm,
+  onCancel,
+}: {
+  name: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  return (
+    <div className="px-2 py-1.5 bg-red-950/30 border-l-2 border-red-500 flex items-center justify-between gap-2">
+      <span className="text-[10px] text-red-400 truncate">Delete {name}?</span>
+      <div className="flex items-center gap-1 flex-shrink-0">
+        <button
+          onClick={onConfirm}
+          className="px-2 py-0.5 text-[10px] rounded bg-red-600 text-white hover:bg-red-500 transition-colors"
+        >
+          Delete
+        </button>
+        <button
+          onClick={onCancel}
+          className="px-2 py-0.5 text-[10px] rounded text-neutral-400 hover:text-neutral-200 transition-colors"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+}