@hyperframes/studio 0.8.6 → 0.8.8

package/src/captions/components/CaptionPropertyPanel.tsx

@@ -2,7 +2,29 @@ import { memo, useCallback, useState } from "react";
 import { useCaptionStore } from "../store";
 import type { CaptionStyle } from "../types";
 import { CaptionAnimationPanel } from "./CaptionAnimationPanel";
-import { Section, Row, inputCls } from "./shared";
+import { Section, Row, NumberField } from "./shared";
+
+/** True when the given style key differs across the selected segments. */
+function isMixedValue(
+  model: { segments: Map<string, { style: Partial<CaptionStyle> }> } | null,
+  selectedSegmentIds: Set<string>,
+  key: "x" | "y" | "scaleX" | "rotation",
+  fallback: number,
+): boolean {
+  if (!model || selectedSegmentIds.size < 2) return false;
+  let first: number | undefined;
+  let seen = false;
+  for (const segId of selectedSegmentIds) {
+    const v = model.segments.get(segId)?.style[key] ?? fallback;
+    if (!seen) {
+      first = v;
+      seen = true;
+    } else if (v !== first) {
+      return true;
+    }
+  }
+  return false;
+}
 
 // ---------------------------------------------------------------------------
 // Main component
@@ -180,6 +202,11 @@ export const CaptionPropertyPanel = memo(function CaptionPropertyPanel({
   const rotation = effectiveStyle.rotation ?? 0;
   const scaleX = effectiveStyle.scaleX ?? 1;
 
+  const xMixed = isMixedValue(model, selectedSegmentIds, "x", 0);
+  const yMixed = isMixedValue(model, selectedSegmentIds, "y", 0);
+  const scaleMixed = isMixedValue(model, selectedSegmentIds, "scaleX", 1);
+  const rotationMixed = isMixedValue(model, selectedSegmentIds, "rotation", 0);
+
   // Count label
   const countLabel = selectedSegmentIds.size === 1 ? "1 word" : `${selectedSegmentIds.size} words`;
 
@@ -191,9 +218,11 @@ export const CaptionPropertyPanel = memo(function CaptionPropertyPanel({
           <span className="text-2xs text-neutral-500">{countLabel}</span>
         </div>
         {/* Tab switcher */}
-        <div className="flex gap-1">
+        <div className="flex gap-1" role="tablist" aria-label="Caption editing tabs">
           <button
             type="button"
+            role="tab"
+            aria-selected={activeTab === "style"}
             onClick={() => setActiveTab("style")}
             className={[
               "flex-1 py-0.5 rounded text-2xs font-medium transition-colors",
@@ -206,6 +235,8 @@ export const CaptionPropertyPanel = memo(function CaptionPropertyPanel({
           </button>
           <button
             type="button"
+            role="tab"
+            aria-selected={activeTab === "animation"}
             onClick={() => setActiveTab("animation")}
             className={[
               "flex-1 py-0.5 rounded text-2xs font-medium transition-colors",
@@ -227,44 +258,39 @@ export const CaptionPropertyPanel = memo(function CaptionPropertyPanel({
         <div className="flex-1 overflow-y-auto px-3 py-2">
           <Section label="Position">
             <Row label="X">
-              <input
-                type="number"
+              <NumberField
                 value={x}
-                onChange={(e) => handleStyleChange({ x: Number(e.target.value) })}
-                className={inputCls}
+                mixed={xMixed}
+                ariaLabel="X position"
+                onCommit={(v) => handleStyleChange({ x: v })}
               />
             </Row>
             <Row label="Y">
-              <input
-                type="number"
+              <NumberField
                 value={y}
-                onChange={(e) => handleStyleChange({ y: Number(e.target.value) })}
-                className={inputCls}
+                mixed={yMixed}
+                ariaLabel="Y position"
+                onCommit={(v) => handleStyleChange({ y: v })}
               />
             </Row>
           </Section>
 
           <Section label="Transform">
             <Row label="Scale">
-              <input
-                type="number"
+              <NumberField
                 value={scaleX}
+                mixed={scaleMixed}
                 step={0.1}
-                onChange={(e) =>
-                  handleStyleChange({
-                    scaleX: Number(e.target.value),
-                    scaleY: Number(e.target.value),
-                  })
-                }
-                className={inputCls}
+                ariaLabel="Scale"
+                onCommit={(v) => handleStyleChange({ scaleX: v, scaleY: v })}
               />
             </Row>
             <Row label="Rotation">
-              <input
-                type="number"
+              <NumberField
                 value={rotation}
-                onChange={(e) => handleStyleChange({ rotation: Number(e.target.value) })}
-                className={inputCls}
+                mixed={rotationMixed}
+                ariaLabel="Rotation"
+                onCommit={(v) => handleStyleChange({ rotation: v })}
               />
             </Row>
           </Section>

package/src/captions/components/CaptionTimeline.tsx

@@ -1,5 +1,6 @@
-import { memo, useCallback, useRef } from "react";
+import { memo, useCallback } from "react";
 import { useCaptionStore } from "../store";
+import { usePlayerStore } from "../../player";
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -18,6 +19,14 @@ const GROUP_COLORS = [
   "#C084FC",
 ];
 
+const TRACK_LEFT_PAD = 32;
+
+// Timing edge-drag and double-click group split were removed deliberately:
+// segment timing and group structure only mutate the in-memory model — they
+// are never applied to playback nor serialized to caption-overrides.json, so
+// the UI was confirming edits that didn't exist. Restore them only alongside
+// a real apply/persist pipeline.
+
 // ---------------------------------------------------------------------------
 // Types
 // ---------------------------------------------------------------------------
@@ -27,14 +36,6 @@ interface CaptionTimelineProps {
   onSeek?: (time: number) => void;
 }
 
-interface DragState {
-  segId: string;
-  edge: "start" | "end";
-  originalStart: number;
-  originalEnd: number;
-  startX: number;
-}
-
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
@@ -46,50 +47,7 @@ export const CaptionTimeline = memo(function CaptionTimeline({
   const model = useCaptionStore((s) => s.model);
   const selectedSegmentIds = useCaptionStore((s) => s.selectedSegmentIds);
   const selectSegment = useCaptionStore((s) => s.selectSegment);
-  const updateSegmentTiming = useCaptionStore((s) => s.updateSegmentTiming);
-  const splitGroup = useCaptionStore((s) => s.splitGroup);
-
-  const dragRef = useRef<DragState | null>(null);
-
-  const handleEdgePointerDown = useCallback(
-    (
-      e: React.PointerEvent<HTMLDivElement>,
-      segId: string,
-      edge: "start" | "end",
-      originalStart: number,
-      originalEnd: number,
-    ) => {
-      e.stopPropagation();
-      e.preventDefault();
-      (e.target as HTMLElement).setPointerCapture(e.pointerId);
-      dragRef.current = { segId, edge, originalStart, originalEnd, startX: e.clientX };
-    },
-    [],
-  );
-
-  const handlePointerMove = useCallback(
-    (e: React.PointerEvent<HTMLDivElement>) => {
-      const drag = dragRef.current;
-      if (!drag) return;
-
-      const delta = (e.clientX - drag.startX) / pixelsPerSecond;
-
-      if (drag.edge === "start") {
-        const newStart = Math.max(0, drag.originalStart + delta);
-        const clampedStart = Math.min(newStart, drag.originalEnd - 0.05);
-        updateSegmentTiming(drag.segId, clampedStart, drag.originalEnd);
-      } else {
-        const newEnd = Math.max(drag.originalStart + 0.05, drag.originalEnd + delta);
-        const clampedEnd = Math.max(0, newEnd);
-        updateSegmentTiming(drag.segId, drag.originalStart, clampedEnd);
-      }
-    },
-    [pixelsPerSecond, updateSegmentTiming],
-  );
-
-  const handlePointerUp = useCallback(() => {
-    dragRef.current = null;
-  }, []);
+  const currentTime = usePlayerStore((s) => s.currentTime);
 
   const handleBlockClick = useCallback(
     (e: React.MouseEvent, segId: string) => {
@@ -99,19 +57,22 @@ export const CaptionTimeline = memo(function CaptionTimeline({
     [selectSegment],
   );
 
-  const handleBlockDoubleClick = useCallback(
-    (e: React.MouseEvent, groupId: string, segId: string) => {
-      e.stopPropagation();
-      splitGroup(groupId, segId);
+  const handleBlockKeyDown = useCallback(
+    (e: React.KeyboardEvent, segId: string) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        e.stopPropagation();
+        selectSegment(segId, e.shiftKey);
+      }
     },
-    [splitGroup],
+    [selectSegment],
   );
 
   const handleTrackClick = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
       if (!onSeek) return;
       const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect();
-      const x = e.clientX - rect.left - 32;
+      const x = e.clientX - rect.left - TRACK_LEFT_PAD;
       const time = Math.max(0, x / pixelsPerSecond);
       onSeek(time);
     },
@@ -120,13 +81,12 @@ export const CaptionTimeline = memo(function CaptionTimeline({
 
   if (!model) return null;
 
+  const playheadLeft = TRACK_LEFT_PAD + currentTime * pixelsPerSecond;
+
   return (
     <div
       className="relative select-none overflow-x-auto"
       style={{ height: 40, minWidth: "100%" }}
-      onPointerMove={handlePointerMove}
-      onPointerUp={handlePointerUp}
-      onPointerLeave={handlePointerUp}
       onClick={handleTrackClick}
     >
       {model.groupOrder.map((groupId, groupIdx) => {
@@ -138,14 +98,18 @@ export const CaptionTimeline = memo(function CaptionTimeline({
           const seg = model.segments.get(segId);
           if (!seg) return null;
 
-          const left = 32 + seg.start * pixelsPerSecond;
+          const left = TRACK_LEFT_PAD + seg.start * pixelsPerSecond;
           const width = Math.max((seg.end - seg.start) * pixelsPerSecond, 4);
           const isSelected = selectedSegmentIds.has(segId);
 
           return (
             <div
               key={segId}
-              className={`absolute top-1 bottom-1 rounded flex items-center overflow-hidden cursor-pointer${
+              role="button"
+              tabIndex={0}
+              aria-label={`Caption word "${seg.text}"`}
+              aria-pressed={isSelected}
+              className={`absolute top-1 bottom-1 rounded flex items-center overflow-hidden cursor-pointer focus-visible:ring-1 focus-visible:ring-white outline-none${
                 isSelected ? " ring-1 ring-white/50 z-10" : ""
               }`}
               style={{
@@ -155,15 +119,8 @@ export const CaptionTimeline = memo(function CaptionTimeline({
                 zIndex: isSelected ? 10 : 1,
               }}
               onClick={(e) => handleBlockClick(e, segId)}
-              onDoubleClick={(e) => handleBlockDoubleClick(e, groupId, segId)}
+              onKeyDown={(e) => handleBlockKeyDown(e, segId)}
             >
-              {/* Left edge drag handle */}
-              <div
-                className="absolute left-0 top-0 bottom-0 cursor-col-resize z-20"
-                style={{ width: 6 }}
-                onPointerDown={(e) => handleEdgePointerDown(e, segId, "start", seg.start, seg.end)}
-              />
-
               {/* Text label */}
               <span
                 className="flex-1 truncate px-2 pointer-events-none"
@@ -171,17 +128,17 @@ export const CaptionTimeline = memo(function CaptionTimeline({
               >
                 {seg.text}
               </span>
-
-              {/* Right edge drag handle */}
-              <div
-                className="absolute right-0 top-0 bottom-0 cursor-col-resize z-20"
-                style={{ width: 6 }}
-                onPointerDown={(e) => handleEdgePointerDown(e, segId, "end", seg.start, seg.end)}
-              />
             </div>
           );
         });
       })}
+
+      {/* Playhead — correlates blocks with the current frame */}
+      <div
+        className="absolute top-0 bottom-0 w-px bg-white/70 pointer-events-none z-20"
+        style={{ left: playheadLeft }}
+        aria-hidden="true"
+      />
     </div>
   );
 });

package/src/captions/components/shared.tsx

@@ -1,7 +1,8 @@
 import type React from "react";
+import { useEffect, useRef, useState } from "react";
 
 export const inputCls =
-  "w-full bg-neutral-900 border border-neutral-800 rounded px-1.5 py-0.5 text-2xs text-neutral-200 font-mono outline-none focus:border-neutral-600";
+  "w-full bg-neutral-900 border border-neutral-800 rounded px-1.5 py-0.5 text-2xs text-neutral-200 font-mono outline-none focus:border-studio-accent disabled:opacity-40 disabled:cursor-not-allowed";
 
 export function Section({ label, children }: { label: string; children: React.ReactNode }) {
   return (
@@ -24,3 +25,77 @@ export function Row({ label, children }: { label: string; children: React.ReactN
     </div>
   );
 }
+
+interface NumberFieldProps {
+  value: number | undefined;
+  /** True when a multi-selection has differing values — shows "Mixed" until edited. */
+  mixed?: boolean;
+  step?: number;
+  min?: number;
+  max?: number;
+  disabled?: boolean;
+  ariaLabel: string;
+  onCommit: (value: number) => void;
+}
+
+/**
+ * Numeric input that only commits finite parses. Typing "-" or clearing the
+ * field keeps a local draft instead of committing NaN/0 into live transforms
+ * and the persisted overrides file.
+ */
+export function NumberField({
+  value,
+  mixed,
+  step,
+  min,
+  max,
+  disabled,
+  ariaLabel,
+  onCommit,
+}: NumberFieldProps) {
+  const [draft, setDraft] = useState<string | null>(null);
+  const focusedRef = useRef(false);
+
+  // External value changed while not editing — drop any stale draft.
+  useEffect(() => {
+    if (!focusedRef.current) setDraft(null);
+  }, [value]);
+
+  const display = draft !== null ? draft : mixed ? "" : String(value ?? 0);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const raw = e.target.value;
+    setDraft(raw);
+    const parsed = Number(raw);
+    if (raw.trim() !== "" && Number.isFinite(parsed)) {
+      // Native min/max only constrain spinner steps — typed values bypass
+      // them, so clamp before committing to the model/overrides.
+      let clamped = parsed;
+      if (min !== undefined) clamped = Math.max(min, clamped);
+      if (max !== undefined) clamped = Math.min(max, clamped);
+      onCommit(clamped);
+    }
+  };
+
+  return (
+    <input
+      type="number"
+      className={inputCls}
+      value={display}
+      placeholder={mixed ? "Mixed" : undefined}
+      step={step}
+      min={min}
+      max={max}
+      disabled={disabled}
+      aria-label={ariaLabel}
+      onChange={handleChange}
+      onFocus={() => {
+        focusedRef.current = true;
+      }}
+      onBlur={() => {
+        focusedRef.current = false;
+        setDraft(null);
+      }}
+    />
+  );
+}

package/src/captions/hooks/useCaptionSync.ts

@@ -68,23 +68,49 @@ export function useCaptionSync(projectId: string | null) {
   // Flag to suppress auto-save during loadOverrides
   const suppressSaveRef = useRef(false);
 
+  // True while an edit is debounced or a PUT is in flight — guards tab close.
+  const pendingRef = useRef(false);
+  // Bumped on every new edit: a PUT's success may only clear the pending flag
+  // when no newer edit re-armed the debounce while it was in flight.
+  const editSeqRef = useRef(0);
+
   const save = useCallback(() => {
     const state = useCaptionStore.getState();
-    if (!state.model || !state.sourceFilePath || !state.isEditMode) return;
+    // Note: deliberately no isEditMode guard — exiting caption mode (or any
+    // path that fires the flush) must still write the last edits; the model
+    // survives exit, and after a store reset it is null anyway.
+    if (!state.model || !state.sourceFilePath) {
+      pendingRef.current = false;
+      return;
+    }
     const pid = projectIdRef.current;
-    if (!pid) return;
+    if (!pid) {
+      pendingRef.current = false;
+      return;
+    }
 
+    const seqAtSave = editSeqRef.current;
     const overrides = buildOverrides(state.model);
 
     fetch(`/api/projects/${pid}/files/${encodeURIComponent("caption-overrides.json")}`, {
       method: "PUT",
       headers: { "Content-Type": "text/plain", ...studioWriteHeaders() },
       body: JSON.stringify(overrides, null, 2),
-    }).catch((error: unknown) => {
-      // Caption auto-save is a data-loss path; surface failures via telemetry
-      // so a silently-dropped edit isn't invisible (no console in studio).
-      trackEvent("studio_caption_autosave_failed", { error: String(error) });
-    });
+    })
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        // A newer edit may have re-armed the debounce while this PUT was in
+        // flight — its beforeunload/unmount flush still needs pending=true.
+        if (editSeqRef.current === seqAtSave) pendingRef.current = false;
+        const s = useCaptionStore.getState();
+        if (s.syncError) s.setSyncError(null);
+      })
+      .catch((error: unknown) => {
+        // Caption auto-save is a data-loss path: surface it to the user, not
+        // just telemetry. pendingRef stays true so beforeunload still warns.
+        trackEvent("studio_caption_autosave_failed", { error: String(error) });
+        useCaptionStore.getState().setSyncError("Caption changes couldn't be saved");
+      });
   }, []);
 
   // Auto-save on model changes with 800ms debounce
@@ -102,12 +128,37 @@ export function useCaptionSync(projectId: string | null) {
       }
 
       if (debounceRef.current) clearTimeout(debounceRef.current);
+      pendingRef.current = true;
+      editSeqRef.current++;
       debounceRef.current = setTimeout(save, 800);
     });
 
+    // Warn before the tab closes while an edit is unsaved.
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (!pendingRef.current) return;
+      // Flush best-effort, then let the browser show its confirm.
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+        debounceRef.current = null;
+        save();
+      }
+      e.preventDefault();
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+
+    // Let the caption error banner retry the save directly.
+    useCaptionStore.getState().setRetrySave(save);
+
     return () => {
       unsub();
-      if (debounceRef.current) clearTimeout(debounceRef.current);
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+      // Flush instead of discarding — clearTimeout alone drops the final edits.
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+        debounceRef.current = null;
+        if (pendingRef.current) save();
+      }
+      useCaptionStore.getState().setRetrySave(null);
     };
   });
 
@@ -117,16 +168,21 @@ export function useCaptionSync(projectId: string | null) {
     const pid = projectIdRef.current;
     if (!pid) return;
 
+    let data: { content?: string };
     try {
       const res = await fetch(
         `/api/projects/${pid}/files/${encodeURIComponent("caption-overrides.json")}`,
       );
-      if (!res.ok) return;
-      const data = await res.json();
-      if (!data.content) return;
+      if (!res.ok) return; // no overrides file yet — normal
+      data = await res.json();
+    } catch {
+      return; // network failure fetching an optional file — nothing to restore
+    }
+    if (!data.content) return;
 
+    try {
       const overrides: CaptionOverrideEntry[] = JSON.parse(data.content);
-      if (!Array.isArray(overrides)) return;
+      if (!Array.isArray(overrides)) throw new Error("not an array");
 
       const model = state.model;
       const allSegIds: string[] = [];
@@ -171,7 +227,10 @@ export function useCaptionSync(projectId: string | null) {
       suppressSaveRef.current = true;
       useCaptionStore.getState().setModel({ ...model, segments: newSegments });
     } catch {
-      // No overrides file
+      // File exists but is unreadable — previous edits would silently not load.
+      useCaptionStore
+        .getState()
+        .setSyncError("caption-overrides.json is corrupt — earlier caption edits didn't load");
     }
   }, []);
 

package/src/captions/keyboard.test.ts

@@ -1,3 +1,5 @@
+// @vitest-environment happy-dom
+
 import { describe, expect, it } from "vitest";
 import { shouldHandleCaptionNudgeKey } from "./keyboard";
 
@@ -35,4 +37,14 @@ describe("shouldHandleCaptionNudgeKey", () => {
   it("ignores non-arrow keys", () => {
     expect(shouldHandleCaptionNudgeKey(mockKeyboardEvent("KeyL"))).toBe(false);
   });
+
+  it("ignores arrows when the event target is an editable element", () => {
+    const input = document.createElement("input");
+    const textarea = document.createElement("textarea");
+    const div = document.createElement("div");
+    expect(shouldHandleCaptionNudgeKey(mockKeyboardEvent("ArrowUp"), input)).toBe(false);
+    expect(shouldHandleCaptionNudgeKey(mockKeyboardEvent("ArrowUp"), textarea)).toBe(false);
+    expect(shouldHandleCaptionNudgeKey(mockKeyboardEvent("ArrowUp"), div)).toBe(true);
+    expect(shouldHandleCaptionNudgeKey(mockKeyboardEvent("ArrowUp"), null)).toBe(true);
+  });
 });

package/src/captions/keyboard.ts

@@ -1,8 +1,19 @@
+import { isEditableTarget } from "../utils/timelineDiscovery";
+
 const CAPTION_NUDGE_KEYS = new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
 
 type CaptionNudgeKeyEvent = Pick<KeyboardEvent, "altKey" | "ctrlKey" | "metaKey" | "key">;
 
-export function shouldHandleCaptionNudgeKey(event: CaptionNudgeKeyEvent): boolean {
+export function shouldHandleCaptionNudgeKey(
+  event: CaptionNudgeKeyEvent,
+  target?: EventTarget | null,
+): boolean {
   if (event.metaKey || event.ctrlKey || event.altKey) return false;
+  if (target != null && isEditableTarget(target)) return false;
   return CAPTION_NUDGE_KEYS.has(event.key);
 }
+
+// Single editable-target check for the caption surface — re-exported from the
+// shared timeline helper so the two never diverge (it also covers ARIA
+// textbox/searchbox/combobox roles and nested editors via closest()).
+export { isEditableTarget as isEditableEventTarget };