@hyperframes/studio 0.8.6 → 0.8.8

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

@@ -74,9 +74,7 @@ function mountBeatStrip(renderTimeRange?: { start: number; end: number }) {
 }
 
 function firstBeat(): HTMLDivElement {
-  const beat = document.querySelector<HTMLDivElement>(
-    '[title="Drag to move · double-click to delete"]',
-  );
+  const beat = document.querySelector<HTMLDivElement>('[title="Drag to move · ⌥-click to delete"]');
   if (!beat) throw new Error("Expected a beat handle");
   return beat;
 }
@@ -256,9 +254,7 @@ describe("BeatStrip gesture ownership", () => {
       );
     });
 
-    expect(
-      document.querySelectorAll('[title="Drag to move · double-click to delete"]'),
-    ).toHaveLength(2);
+    expect(document.querySelectorAll('[title="Drag to move · ⌥-click to delete"]')).toHaveLength(2);
     expect(commitBeatEditsSpy).not.toHaveBeenCalled();
 
     act(() => {
@@ -297,10 +293,10 @@ describe("BeatStrip gesture ownership", () => {
     });
 
     const lefts = Array.from(
-      document.querySelectorAll<HTMLDivElement>('[title="Drag to move · double-click to delete"]'),
+      document.querySelectorAll<HTMLDivElement>('[title="Drag to move · ⌥-click to delete"]'),
       (beat) => beat.style.left,
     );
-    expect(lefts).toContain("134px");
+    expect(lefts).toContain("128px");
 
     releaseBeatDrag(140);
     expectCommittedBeatAt(1.4);
@@ -310,7 +306,7 @@ describe("BeatStrip gesture ownership", () => {
     mountBeatStrip();
     startBeatDrag();
     const beats = document.querySelectorAll<HTMLDivElement>(
-      '[title="Drag to move · double-click to delete"]',
+      '[title="Drag to move · ⌥-click to delete"]',
     );
     act(() => {
       beats[1]?.dispatchEvent(

package/src/player/components/BeatStrip.tsx

@@ -14,7 +14,7 @@ import {
 import { getTimelineElementIndexes } from "../lib/timelineElementIndexes";
 
 export const BEAT_BAND_H = 14; // dark band height at top of track
-const BEAT_HIT_W = 12; // grab width per beat (px)
+const BEAT_HIT_W = 24; // grab width per beat (px) — ≥24px pointer target
 
 interface BeatDragActor {
   readonly pointerId: number;
@@ -355,8 +355,9 @@ export const BeatBackgroundLines = memo(function BeatBackgroundLines({
 
 /**
  * Green beat dots on the music track's row. Drag a dot to move its beat,
- * double-click to delete; both scrub the audio. Dot size/brightness scale with
- * beat loudness (gamma-curved for contrast).
+ * ⌥-click to delete (kept off double-click so a stuttered drag can't destroy
+ * a beat); both scrub the audio. Dot size/brightness scale with beat loudness
+ * (gamma-curved for contrast). Deletes remain undoable via ⌘Z.
  */
 export const BeatStrip = memo(function BeatStrip({
   beatTimes,
@@ -412,7 +413,7 @@ export const BeatStrip = memo(function BeatStrip({
           <div
             key={`${t}-${i}`}
             className="absolute select-none"
-            title="Drag to move · double-click to delete"
+            title="Drag to move · ⌥-click to delete"
             draggable={false}
             style={{
               left: x - BEAT_HIT_W / 2,
@@ -428,9 +429,15 @@ export const BeatStrip = memo(function BeatStrip({
               // selection (which otherwise "selects" the whole panel mid-drag).
               e.preventDefault();
               e.stopPropagation();
+              // ⌥ starts no drag: the delete lands on release below, so a
+              // slipped ⌥-drag abandons instead of destroying the beat.
+              if (e.altKey) return;
               beginBeatDrag(e, t, pps);
             }}
-            onDoubleClick={(e) => {
+            onClick={(e) => {
+              if (!e.altKey) return;
+              // ⌥-click deletes. Deliberately NOT double-click: a stuttered drag
+              // attempt reads as a double-click and would destroy the beat.
               e.stopPropagation();
               deleteBeatAtCompositionTime(t);
               usePlayerStore.getState().requestSeek(Math.max(0, t)); // park scrubber at deleted beat

package/src/player/components/ClipContextMenu.tsx

@@ -3,6 +3,7 @@ import { createPortal } from "react-dom";
 import type { TimelineElement } from "../store/playerStore";
 import { canSplitElement } from "../../utils/timelineElementSplit";
 import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
+import { useMenuKeyboardNav } from "./menuKeyboardNav";
 
 interface ClipContextMenuProps {
   x: number;
@@ -24,6 +25,7 @@ export const ClipContextMenu = memo(function ClipContextMenu({
   onDelete,
 }: ClipContextMenuProps) {
   const menuRef = useContextMenuDismiss(onClose);
+  useMenuKeyboardNav(menuRef);
 
   const menuWidth = 200;
   const menuHeight = 80;
@@ -44,6 +46,8 @@ export const ClipContextMenu = memo(function ClipContextMenu({
   return createPortal(
     <div
       ref={menuRef}
+      role="menu"
+      aria-label="Clip actions"
       className="fixed z-50 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]"
       style={{ left: adjustedX, top: adjustedY }}
     >
@@ -51,7 +55,8 @@ export const ClipContextMenu = memo(function ClipContextMenu({
         <>
           <button
             type="button"
-            className={`w-full flex items-center justify-between px-3 py-1.5 text-xs text-left ${
+            role="menuitem"
+            className={`w-full flex items-center justify-between px-3 py-1.5 text-xs text-left outline-none focus-visible:bg-neutral-800 ${
               canSplit
                 ? "text-neutral-300 hover:bg-neutral-800 cursor-pointer"
                 : "text-neutral-600 cursor-not-allowed"
@@ -73,7 +78,8 @@ export const ClipContextMenu = memo(function ClipContextMenu({
 
       <button
         type="button"
-        className="w-full flex items-center justify-between px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 cursor-pointer text-left"
+        role="menuitem"
+        className="w-full flex items-center justify-between px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-none cursor-pointer text-left"
         onClick={() => {
           onDelete(element);
           onClose();

package/src/player/components/EditModal.tsx

@@ -13,17 +13,44 @@ interface EditPopoverProps {
   onClose: () => void;
 }
 
+function draftKey(start: number, end: number): string {
+  return `hf-edit-draft:${start.toFixed(2)}:${end.toFixed(2)}`;
+}
+
+function readDraft(key: string): string {
+  try {
+    return sessionStorage.getItem(key) ?? "";
+  } catch {
+    return "";
+  }
+}
+
+function writeDraft(key: string, value: string): void {
+  try {
+    if (value) sessionStorage.setItem(key, value);
+    else sessionStorage.removeItem(key);
+  } catch {
+    /* storage unavailable — draft persistence degrades gracefully */
+  }
+}
+
 export function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }: EditPopoverProps) {
   const elements = usePlayerStore((s) => s.elements);
-  const [prompt, setPrompt] = useState("");
+  const start = Math.min(rangeStart, rangeEnd);
+  const end = Math.max(rangeStart, rangeEnd);
+  // Persist the typed prompt per range so Escape/outside-click doesn't destroy it.
+  const storageKey = draftKey(start, end);
+  const [prompt, setPromptState] = useState(() => readDraft(storageKey));
+  const setPrompt = (value: string) => {
+    setPromptState(value);
+    writeDraft(storageKey, value);
+  };
   const [copiedAgentPrompt, setCopiedAgentPrompt] = useState(false);
   const [copiedPromptOnly, setCopiedPromptOnly] = useState(false);
+  const [copyError, setCopyError] = useState(false);
   const popoverRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
-  const start = Math.min(rangeStart, rangeEnd);
-  const end = Math.max(rangeStart, rangeEnd);
-
   const elementsInRange = useMemo(() => {
     return elements.filter((el) => {
       const elEnd = el.start + el.duration;
@@ -64,19 +91,28 @@ export function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }:
 
   const handleCopy = useCallback(async () => {
     const copied = await copyTextToClipboard(buildClipboardText());
-    if (!copied) return;
+    if (!copied) {
+      setCopyError(true);
+      return;
+    }
+    setCopyError(false);
+    writeDraft(storageKey, "");
     setCopiedAgentPrompt(true);
     setTimeout(() => {
       setCopiedAgentPrompt(false);
       onClose();
     }, 800);
-  }, [buildClipboardText, onClose]);
+  }, [buildClipboardText, onClose, storageKey]);
 
   const handleCopyPrompt = useCallback(async () => {
     const promptText = buildPromptCopyText(prompt);
     if (!promptText) return;
     const copied = await copyTextToClipboard(promptText);
-    if (!copied) return;
+    if (!copied) {
+      setCopyError(true);
+      return;
+    }
+    setCopyError(false);
     setCopiedPromptOnly(true);
     setTimeout(() => {
       setCopiedPromptOnly(false);
@@ -137,6 +173,11 @@ export function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }:
         </div>
 
         {/* Action */}
+        {copyError && (
+          <p className="px-3 pb-2 text-[10px] text-red-400" role="alert">
+            Copy failed — check clipboard permissions and try again.
+          </p>
+        )}
         <div className="grid grid-cols-2 gap-2 px-3 pb-3">
           <button
             onClick={handleCopyPrompt}

package/src/player/components/KeyframeDiamondContextMenu.tsx

@@ -1,5 +1,7 @@
+import { useState } from "react";
 import { createPortal } from "react-dom";
 import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
+import { useMenuKeyboardNav } from "./menuKeyboardNav";
 import type { TimelineElement } from "../store/playerStore";
 import type { TimelineKeyframeTarget } from "./timelineKeyframeIdentity";
 
@@ -25,45 +27,83 @@ interface KeyframeDiamondContextMenuProps {
    *  worse than no entry. */
   onDelete?: (elementId: string, keyframe: TimelineKeyframeTarget) => void;
   onDeleteAll: (element: TimelineElement, animationId?: string) => void;
+  /** Focus this keyframe's ease segment in the inspector. Omitted when the
+   *  keyframe carries no tween identity to focus. */
+  onEditEase?: (elementId: string, keyframe: TimelineKeyframeTarget) => void;
+  /** Copy the keyframe's properties to the clipboard; resolves false on failure. */
+  onCopyProperties?: (
+    elementId: string,
+    keyframe: TimelineKeyframeTarget,
+  ) => Promise<boolean> | boolean | void;
   /** Retime the keyframe to the current playhead, preserving its value + ease. */
   onMoveToPlayhead?: (element: TimelineElement, keyframe: TimelineKeyframeTarget) => void;
 }
 
+const ITEM_CLS =
+  "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-200 hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-none cursor-pointer text-left";
+const DESTRUCTIVE_ITEM_CLS =
+  "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-none cursor-pointer text-left";
+
 export function KeyframeDiamondContextMenu({
   state,
   onClose,
   onDelete,
   onDeleteAll,
+  onEditEase,
+  onCopyProperties,
   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.
+  // The clicked diamond's identity, built once: the menu's mutating entries
+  // all 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,
   };
+  useMenuKeyboardNav(menuRef);
+  const [copyStatus, setCopyStatus] = useState<"idle" | "copied" | "failed">("idle");
+
+  const handleCopyProperties = async () => {
+    if (!onCopyProperties) return;
+    const result = await onCopyProperties(state.elementId, keyframe);
+    if (result === false) {
+      setCopyStatus("failed");
+      setTimeout(() => setCopyStatus("idle"), 1500);
+      return;
+    }
+    setCopyStatus("copied");
+    setTimeout(onClose, 700);
+  };
 
   const menuWidth = 200;
   // Measured off the rendered rows, so the flip-up test below stays right as
-  // optional entries drop out.
-  const menuHeight = 10 + (1 + (onMoveToPlayhead ? 1 : 0) + (onDelete ? 1 : 0)) * 30;
+  // optional entries drop out. The separator counts as roughly a third of a row.
+  const rows =
+    1 +
+    (onMoveToPlayhead ? 1 : 0) +
+    (onEditEase ? 1 : 0) +
+    (onCopyProperties ? 1 : 0) +
+    (onDelete ? 1 : 0);
+  const menuHeight = 10 + rows * 30 + 9;
   const overflowY = state.y + menuHeight - window.innerHeight;
   const adjustedX = state.x + menuWidth > window.innerWidth ? state.x - menuWidth : state.x;
-  const adjustedY = overflowY > 0 ? state.y - overflowY - 8 : state.y;
+  const adjustedY = Math.max(8, overflowY > 0 ? state.y - overflowY - 8 : state.y);
 
   return createPortal(
     <div
       ref={menuRef}
-      className="fixed z-50 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]"
-      style={{ left: adjustedX, top: adjustedY }}
+      role="menu"
+      aria-label="Keyframe actions"
+      className="fixed z-50 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px] overflow-y-auto"
+      style={{ left: adjustedX, top: adjustedY, maxHeight: `calc(100vh - ${adjustedY + 8}px)` }}
     >
       {onMoveToPlayhead && (
         <button
           type="button"
-          className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-200 hover:bg-neutral-800 cursor-pointer text-left"
+          role="menuitem"
+          className={ITEM_CLS}
           onClick={() => {
             // Pass clip-% — resolveKeyframeTarget keys the cache lookup on clip-%
             // and returns the tween-% for the mutation. Passing tween-% here would
@@ -76,11 +116,44 @@ export function KeyframeDiamondContextMenu({
         </button>
       )}
 
+      {onEditEase && (
+        <button
+          type="button"
+          role="menuitem"
+          className={`${ITEM_CLS} justify-between`}
+          onClick={() => {
+            onEditEase(state.elementId, keyframe);
+            onClose();
+          }}
+        >
+          <span>Edit Ease…</span>
+          <span className="text-[10px] text-neutral-500">{state.currentEase ?? "default"}</span>
+        </button>
+      )}
+
+      {onCopyProperties && (
+        <button
+          type="button"
+          role="menuitem"
+          className={ITEM_CLS}
+          onClick={() => {
+            void handleCopyProperties();
+          }}
+        >
+          {copyStatus === "copied"
+            ? "Copied!"
+            : copyStatus === "failed"
+              ? "Copy failed — check permissions"
+              : "Copy Properties"}
+        </button>
+      )}
+
       {/* Delete */}
       {onDelete && (
         <button
           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"
+          role="menuitem"
+          className={DESTRUCTIVE_ITEM_CLS}
           onClick={() => {
             onDelete(state.elementId, keyframe);
             onClose();
@@ -90,9 +163,16 @@ export function KeyframeDiamondContextMenu({
         </button>
       )}
 
+      {/* Deleting every keyframe sat adjacent to the single delete and styled
+          identically. Separate and mark it so the two cannot be misread. */}
+      <div className="my-1 border-t border-neutral-700/60" role="separator" />
+
+      <div className="my-1 border-t border-neutral-700/60" role="separator" />
+
       <button
         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"
+        role="menuitem"
+        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-red-950/40 focus-visible:bg-red-950/40 outline-none cursor-pointer text-left"
         onClick={() => {
           onDeleteAll(state.element, state.animationId);
           onClose();

package/src/player/components/LayerDisclosureRow.tsx

@@ -1,9 +1,11 @@
-import { CaretRight } from "@phosphor-icons/react";
 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.
+// Layer row (Figma order: disclosure ∿, diamond, name) — the disclosure lives
+// here, not on the clip bar, and re-expands a collapsed layer. `∿` (not a
+// caret) because a group's own row keeps the caret for its structural
+// disclosure (member rows) — this button only ever means "show this row's
+// lanes", so it needs its own distinct glyph.
 export function LayerDisclosureRow({
   name,
   clipCount,
@@ -49,23 +51,20 @@ export function LayerDisclosureRow({
         tabIndex={-1}
         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;
+        aria-label={`${isExpanded ? "Hide" : "Show"} ${name} lanes`}
+        title={`${isExpanded ? "Hide" : "Show"} lanes`}
+        // h-6 w-6 = the 24x24 WCAG 2.2 minimum target. The 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]"
+        className={`flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 text-[11px] leading-none focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC] ${
+          isExpanded ? "text-[#3CE6AC]" : "text-white/55 hover:text-white"
+        }`}
         onPointerDown={(event) => event.stopPropagation()}
         onClick={(event) => {
           event.stopPropagation();
           onToggleClipExpanded();
         }}
       >
-        <CaretRight
-          size={11}
-          weight="bold"
-          aria-hidden="true"
-          style={{ transform: isExpanded ? "rotate(90deg)" : undefined }}
-        />
+        <span aria-hidden="true">∿</span>
       </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. */}

package/src/player/components/Player.tsx

@@ -135,6 +135,7 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
     const [assetsLoading, setAssetsLoading] = useState(false);
     const [assetOverlayVisible, setAssetOverlayVisible] = useState(false);
     const [assetOverlayFading, setAssetOverlayFading] = useState(false);
+    const [assetWaitLong, setAssetWaitLong] = useState(false);
     const [shaderTransitionLoading, setShaderTransitionLoading] = useState(false);
     const [compositionLoading, setCompositionLoading] = useState(true);
     const [compositionOverlayDeferred, setCompositionOverlayDeferred] = useState(true);
@@ -236,6 +237,11 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
               attempts += 1;
               lastUnloaded = hasUnloadedAssets(iframe, lastUnloaded);
               if (!lastUnloaded || attempts > 100) {
+                if (lastUnloaded && attempts > 100) {
+                  console.debug(
+                    "[studio] asset readiness poll hit the 10s cap — continuing with unloaded assets",
+                  );
+                }
                 if (assetPollRef.current) clearInterval(assetPollRef.current);
                 assetPollRef.current = null;
                 setAssetsLoading(false);
@@ -327,6 +333,17 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
       };
     });
 
+    // Surface a "Continue anyway" escape hatch once the asset wait drags on.
+    // eslint-disable-next-line no-restricted-syntax
+    useEffect(() => {
+      if (!assetsLoading) {
+        setAssetWaitLong(false);
+        return;
+      }
+      const timer = setTimeout(() => setAssetWaitLong(true), 3000);
+      return () => clearTimeout(timer);
+    }, [assetsLoading]);
+
     useEffect(() => {
       if (assetFadeRef.current) {
         clearTimeout(assetFadeRef.current);
@@ -354,12 +371,20 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
       };
     }, [assetsLoading]);
 
+    const handleContinueAnyway = () => {
+      if (assetPollRef.current) {
+        clearInterval(assetPollRef.current);
+        assetPollRef.current = null;
+      }
+      setAssetsLoading(false);
+    };
+
     const showCompositionOverlay =
       !suppressLoadingOverlay &&
       !compositionOverlayDeferred &&
       shouldShowCompositionLoadingOverlay(compositionLoading);
     const showAssetOverlay =
-      assetOverlayVisible && !shaderTransitionLoading && !showCompositionOverlay;
+      assetOverlayVisible && !shaderTransitionLoading && !showCompositionOverlay && !previewError;
 
     useEffect(() => {
       onCompositionLoadingChange?.(showCompositionOverlay || showAssetOverlay);
@@ -396,17 +421,27 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
             style={{
               opacity: assetOverlayFading ? 0 : 1,
               pointerEvents: assetOverlayFading ? "none" : "auto",
-              transition: "opacity 240ms ease-out",
+              transition: "opacity 180ms ease-in",
             }}
             onDragStart={(event) => event.preventDefault()}
             onMouseDown={(event) => event.preventDefault()}
-            onPointerDown={(event) => event.preventDefault()}
           >
-            <HyperframesLoader
-              title="Preparing preview assets"
-              detail="Waiting for media and motion assets before playback starts."
-              size={56}
-            />
+            <div className="flex flex-col items-center gap-3">
+              <HyperframesLoader
+                title="Preparing preview assets"
+                detail="Waiting for media and motion assets before playback starts."
+                size={56}
+              />
+              {assetWaitLong && (
+                <button
+                  type="button"
+                  onClick={handleContinueAnyway}
+                  className="px-3 py-1.5 text-[11px] rounded-md border border-neutral-700 text-neutral-300 hover:border-neutral-500 hover:bg-neutral-800 transition-colors"
+                >
+                  Continue anyway
+                </button>
+              )}
+            </div>
           </div>
         )}
         {previewError && (