@hyperframes/studio 0.7.75 → 0.7.77

package/src/player/components/KeyframeDiamondContextMenu.test.tsx

@@ -0,0 +1,69 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { describe, expect, it, vi } from "vitest";
+import type { TimelineElement } from "../store/playerStore";
+import {
+  KeyframeDiamondContextMenu,
+  type KeyframeDiamondContextMenuState,
+} from "./KeyframeDiamondContextMenu";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const element = { id: "box", start: 0, duration: 2, track: 0 } as unknown as TimelineElement;
+
+const state: KeyframeDiamondContextMenuState = {
+  x: 10,
+  y: 10,
+  element,
+  elementId: "box",
+  percentage: 50,
+  tweenPercentage: 25,
+  propertyGroup: "position",
+  animationId: "box-to-1-position",
+};
+
+function clickMenuItem(label: string, props: Partial<Record<string, unknown>>) {
+  const host = document.createElement("div");
+  document.body.appendChild(host);
+  const root = createRoot(host);
+  act(() =>
+    root.render(
+      <KeyframeDiamondContextMenu
+        state={state}
+        onClose={() => {}}
+        onDelete={vi.fn()}
+        onDeleteAll={vi.fn()}
+        {...props}
+      />,
+    ),
+  );
+  const button = Array.from(document.body.querySelectorAll("button")).find(
+    (candidate) => candidate.textContent === label,
+  );
+  act(() => button?.click());
+  act(() => root.unmount());
+  host.remove();
+}
+
+describe("KeyframeDiamondContextMenu", () => {
+  // Two animations can carry a keyframe at the same clip percentage. Dropping the
+  // property group / tween percentage / animation id here sends the mutation back
+  // to first-match-by-percentage, which retimes or deletes the wrong tween.
+  it("hands every action the full keyframe identity, not just the percentage", () => {
+    const onDelete = vi.fn();
+    const onMoveToPlayhead = vi.fn();
+
+    clickMenuItem("Delete Keyframe", { onDelete });
+    clickMenuItem("Move to Playhead", { onMoveToPlayhead });
+
+    const target = {
+      percentage: 50,
+      tweenPercentage: 25,
+      propertyGroup: "position",
+      animationId: "box-to-1-position",
+    };
+    expect(onDelete).toHaveBeenCalledWith("box", target);
+    expect(onMoveToPlayhead).toHaveBeenCalledWith(element, target);
+  });
+});

package/src/player/components/KeyframeDiamondContextMenu.tsx

@@ -1,25 +1,28 @@
 import { memo } from "react";
 import { createPortal } from "react-dom";
 import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
+import type { TimelineElement } from "../store/playerStore";
+import type { TimelineKeyframeTarget } from "./timelineKeyframeIdentity";
 
 export interface KeyframeDiamondContextMenuState {
   x: number;
   y: number;
+  element: TimelineElement;
   elementId: string;
   percentage: number;
   tweenPercentage?: number;
+  propertyGroup?: string;
+  animationId?: string;
   currentEase?: string;
 }
 
 interface KeyframeDiamondContextMenuProps {
   state: KeyframeDiamondContextMenuState;
   onClose: () => void;
-  onDelete: (elementId: string, percentage: number) => void;
-  onDeleteAll: (elementId: string) => void;
-  onChangeEase?: (elementId: string, percentage: number, ease: string) => void;
-  onCopyProperties?: (elementId: string, percentage: number) => void;
+  onDelete: (elementId: string, keyframe: TimelineKeyframeTarget) => void;
+  onDeleteAll: (element: TimelineElement) => void;
   /** Retime the keyframe to the current playhead, preserving its value + ease. */
-  onMoveToPlayhead?: (elementId: string, fromPercentage: number) => void;
+  onMoveToPlayhead?: (element: TimelineElement, keyframe: TimelineKeyframeTarget) => void;
 }
 
 export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMenu({
@@ -30,6 +33,14 @@ export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMe
   onMoveToPlayhead,
 }: KeyframeDiamondContextMenuProps) {
   const menuRef = useContextMenuDismiss(onClose);
+  // The clicked diamond's identity, built once: the menu's two mutating entries
+  // both act on it, and they must not disagree about which keyframe was clicked.
+  const keyframe: TimelineKeyframeTarget = {
+    percentage: state.percentage,
+    tweenPercentage: state.tweenPercentage,
+    propertyGroup: state.propertyGroup,
+    animationId: state.animationId,
+  };
 
   const menuWidth = 200;
   const menuHeight = onMoveToPlayhead ? 100 : 70;
@@ -51,7 +62,7 @@ export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMe
             // Pass clip-% — resolveKeyframeTarget keys the cache lookup on clip-%
             // and returns the tween-% for the mutation. Passing tween-% here would
             // miss the lookup on any tween whose window is shorter than the clip.
-            onMoveToPlayhead(state.elementId, state.percentage);
+            onMoveToPlayhead(state.element, keyframe);
             onClose();
           }}
         >
@@ -64,7 +75,7 @@ export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMe
         type="button"
         className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 cursor-pointer text-left"
         onClick={() => {
-          onDelete(state.elementId, state.percentage);
+          onDelete(state.elementId, keyframe);
           onClose();
         }}
       >
@@ -75,7 +86,7 @@ export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMe
         type="button"
         className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 cursor-pointer text-left"
         onClick={() => {
-          onDeleteAll(state.elementId);
+          onDeleteAll(state.element);
           onClose();
         }}
       >

package/src/player/components/LayerDisclosureRow.tsx

@@ -0,0 +1,76 @@
+import { CaretRight } from "@phosphor-icons/react";
+import type { TimelineElement } from "../store/playerStore";
+import { TRACK_H } from "./timelineLayout";
+import { TrackClipCount } from "./TrackClipCount";
+
+// Layer row (Figma order: disclosure ▸/▾, diamond, name) — the disclosure lives
+// here, not on the clip bar, and re-expands a collapsed layer.
+export function LayerDisclosureRow({
+  keyframeClip,
+  clipCount,
+  isExpanded,
+  gutterBackground,
+  columnWidth,
+  lanesId,
+  onToggleClipExpanded,
+  children,
+}: {
+  keyframeClip: TimelineElement;
+  clipCount: number;
+  isExpanded: boolean;
+  gutterBackground: string;
+  /** Same adaptive width the lane rows use: a narrowed header column must not
+   *  leave this row hanging over the clips it labels. */
+  columnWidth: number;
+  /** Id of the element holding the lanes this row's caret expands. */
+  lanesId: string;
+  onToggleClipExpanded: () => void;
+  /** Trailing controls that act on the LAYER (the visibility eye), not on a lane. */
+  children?: React.ReactNode;
+}) {
+  const name = keyframeClip.label ?? keyframeClip.domId ?? keyframeClip.id;
+  return (
+    <div
+      className="absolute left-0 top-0 flex items-center gap-1.5 overflow-hidden px-1.5 text-[11px]"
+      style={{
+        width: columnWidth,
+        height: TRACK_H,
+        color: "#ffffff",
+        background: gutterBackground,
+      }}
+    >
+      <button
+        type="button"
+        aria-expanded={isExpanded}
+        aria-controls={lanesId}
+        aria-label={`${isExpanded ? "Collapse" : "Expand"} ${name} keyframes`}
+        title={`${isExpanded ? "Collapse" : "Expand"} keyframe lanes`}
+        // h-6 w-6 = the 24x24 WCAG 2.2 minimum target. The caret glyph stays 11px;
+        // only the hit box grows.
+        className="flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 text-white/55 hover:text-white focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
+        onPointerDown={(event) => event.stopPropagation()}
+        onClick={(event) => {
+          event.stopPropagation();
+          onToggleClipExpanded();
+        }}
+      >
+        <CaretRight
+          size={11}
+          weight="bold"
+          aria-hidden="true"
+          style={{ transform: isExpanded ? "rotate(90deg)" : undefined }}
+        />
+      </button>
+      {/* Decorative: the disclosure button above already names the row's keyframe
+          state, and aria-label on a plain span is not exposed reliably anyway. */}
+      <span aria-hidden="true" className="shrink-0 text-[13px] leading-none text-white/40">
+        ◇
+      </span>
+      <span className="min-w-0 flex-1 truncate font-medium" title={name}>
+        {name}
+      </span>
+      <TrackClipCount clipCount={clipCount} />
+      {children}
+    </div>
+  );
+}