@hyperframes/studio 0.6.88 → 0.6.90

package/src/hooks/useLintModal.ts

@@ -1,35 +1,107 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect, useRef, useMemo } from "react";
 import type { LintFinding } from "../components/LintModal";
 
-export function useLintModal(projectId: string | null) {
+interface RawFinding {
+  severity?: string;
+  message?: string;
+  file?: string;
+  fixHint?: string;
+  elementId?: string;
+  selector?: string;
+  code?: string;
+}
+
+function parseFinding(f: RawFinding): LintFinding & { elementId?: string; file?: string } {
+  return {
+    severity: f.severity === "error" ? ("error" as const) : ("warning" as const),
+    message: f.message ?? "",
+    file: f.file,
+    fixHint: f.fixHint,
+    elementId: f.elementId,
+  };
+}
+
+export function useLintModal(projectId: string | null, refreshKey?: number) {
   const [lintModal, setLintModal] = useState<LintFinding[] | null>(null);
   const [linting, setLinting] = useState(false);
+  const [backgroundFindings, setBackgroundFindings] = useState<
+    Array<LintFinding & { elementId?: string; file?: string }>
+  >([]);
+  const autoLintRanRef = useRef(false);
+
+  const runLint = useCallback(
+    async (opts?: { background?: boolean }) => {
+      if (!projectId) return;
+      if (!opts?.background) setLinting(true);
+      try {
+        const res = await fetch(`/api/projects/${projectId}/lint`);
+        const data = await res.json();
+        const parsed = ((data.findings ?? []) as RawFinding[]).map(parseFinding);
+        if (opts?.background) {
+          setBackgroundFindings(parsed);
+        } else {
+          setLintModal(parsed);
+          setBackgroundFindings(parsed);
+        }
+      } catch (err) {
+        if (!opts?.background) {
+          const msg = err instanceof Error ? err.message : String(err);
+          setLintModal([{ severity: "error", message: `Failed to run lint: ${msg}` }]);
+        }
+      } finally {
+        if (!opts?.background) setLinting(false);
+      }
+    },
+    [projectId],
+  );
 
-  const handleLint = useCallback(async () => {
-    if (!projectId) return;
-    setLinting(true);
-    try {
-      const res = await fetch(`/api/projects/${projectId}/lint`);
-      const data = await res.json();
-      setLintModal(
-        (data.findings ?? []).map(
-          (f: { severity?: string; message?: string; file?: string; fixHint?: string }) => ({
-            severity: f.severity === "error" ? ("error" as const) : ("warning" as const),
-            message: f.message ?? "",
-            file: f.file,
-            fixHint: f.fixHint,
-          }),
-        ),
-      );
-    } catch (err) {
-      const msg = err instanceof Error ? err.message : String(err);
-      setLintModal([{ severity: "error", message: `Failed to run lint: ${msg}` }]);
-    } finally {
-      setLinting(false);
+  const handleLint = useCallback(() => runLint(), [runLint]);
+
+  const prevProjectIdRef = useRef(projectId);
+  useEffect(() => {
+    if (projectId !== prevProjectIdRef.current) {
+      autoLintRanRef.current = false;
+      prevProjectIdRef.current = projectId;
     }
-  }, [projectId]);
+    if (!projectId || autoLintRanRef.current) return;
+    autoLintRanRef.current = true;
+    void runLint({ background: true });
+  }, [projectId, runLint]);
+
+  useEffect(() => {
+    if (!projectId || !refreshKey) return;
+    const timer = setTimeout(() => void runLint({ background: true }), 1000);
+    return () => clearTimeout(timer);
+  }, [projectId, refreshKey, runLint]);
 
   const closeLintModal = useCallback(() => setLintModal(null), []);
 
-  return { lintModal, linting, handleLint, closeLintModal };
+  const groupFindings = useCallback(
+    (keyFn: (f: (typeof backgroundFindings)[0]) => string | undefined) => {
+      const map = new Map<string, { count: number; messages: string[] }>();
+      for (const f of backgroundFindings) {
+        const key = keyFn(f);
+        if (!key) continue;
+        const prev = map.get(key) ?? { count: 0, messages: [] };
+        prev.count += 1;
+        prev.messages.push(f.message);
+        map.set(key, prev);
+      }
+      return map;
+    },
+    [backgroundFindings],
+  );
+
+  const findingsByElement = useMemo(() => groupFindings((f) => f.elementId), [groupFindings]);
+  const findingsByFile = useMemo(() => groupFindings((f) => f.file), [groupFindings]);
+
+  return {
+    lintModal,
+    linting,
+    handleLint,
+    closeLintModal,
+    backgroundFindings,
+    findingsByElement,
+    findingsByFile,
+  };
 }

package/src/hooks/useTimelineEditing.ts

@@ -1,8 +1,6 @@
 import { useCallback, useRef } from "react";
 import type { TimelineElement } from "../player";
 import { usePlayerStore } from "../player";
-import { applyPatchByTarget, readAttributeByTarget } from "../utils/sourcePatcher";
-import { formatTimelineAttributeNumber } from "../player/components/timelineEditing";
 import {
   buildTimelineAssetId,
   buildTimelineAssetInsertHtml,
@@ -19,6 +17,16 @@ import {
   resolveDroppedAssetDuration,
 } from "../utils/studioHelpers";
 import type { EditHistoryKind } from "../utils/editHistory";
+import {
+  buildPatchTarget,
+  patchIframeDomTiming,
+  resolveResizePlaybackStart,
+  persistTimelineEdit,
+  readFileContent,
+  applyPatchByTarget,
+  formatTimelineAttributeNumber,
+} from "./timelineEditingHelpers";
+import type { PersistTimelineEditInput } from "./timelineEditingHelpers";
 
 // ── Types ──
 
@@ -44,136 +52,6 @@ interface UseTimelineEditingOptions {
   isRecordingRef?: React.RefObject<boolean>;
 }
 
-// ── Helpers ──
-
-function buildPatchTarget(element: {
-  domId?: string;
-  hfId?: string;
-  selector?: string;
-  selectorIndex?: number;
-}) {
-  if (element.domId) {
-    return {
-      id: element.domId,
-      hfId: element.hfId,
-      selector: element.selector,
-      selectorIndex: element.selectorIndex,
-    };
-  }
-  if (element.hfId) {
-    return { hfId: element.hfId, selector: element.selector, selectorIndex: element.selectorIndex };
-  }
-  if (element.selector) {
-    return { selector: element.selector, selectorIndex: element.selectorIndex };
-  }
-  return null;
-}
-
-// The runtime re-reads data-start/data-duration from the DOM on each sync tick
-// (packages/core/src/runtime/init.ts:1324-1368), so attribute mutations here are
-// picked up automatically on the next frame without a rebind call.
-function patchIframeDomTiming(
-  iframe: HTMLIFrameElement | null,
-  element: TimelineElement,
-  attrs: Array<[string, string]>,
-): void {
-  try {
-    const doc = iframe?.contentDocument;
-    if (!doc) return;
-    const el = element.domId
-      ? doc.getElementById(element.domId)
-      : element.selector
-        ? (doc.querySelectorAll(element.selector)[element.selectorIndex ?? 0] ?? null)
-        : null;
-    if (!el) return;
-    for (const [name, value] of attrs) el.setAttribute(name, value);
-  } catch {
-    // Cross-origin or mid-navigation — file save is enqueued; iframe patch is best-effort.
-  }
-}
-
-function resolveResizePlaybackStart(
-  original: string,
-  target: PatchTarget,
-  element: TimelineElement,
-  updates: Pick<TimelineElement, "start" | "playbackStart">,
-): { attrName: string; value: number } | null {
-  if (updates.playbackStart != null) {
-    const attrName =
-      element.playbackStartAttr === "playback-start" ? "playback-start" : "media-start";
-    return { attrName, value: updates.playbackStart };
-  }
-  const trimDelta = updates.start - element.start;
-  if (trimDelta === 0) return null;
-  const raw =
-    readAttributeByTarget(original, target, "playback-start") ??
-    readAttributeByTarget(original, target, "media-start");
-  const current = raw != null ? parseFloat(raw) : undefined;
-  if (current == null || !Number.isFinite(current)) return null;
-  const attrName =
-    element.playbackStartAttr === "playback-start" ? "playback-start" : "media-start";
-  return {
-    attrName,
-    value: Math.max(0, current + trimDelta * Math.max(element.playbackRate ?? 1, 0.1)),
-  };
-}
-
-type PatchTarget = NonNullable<ReturnType<typeof buildPatchTarget>>;
-
-interface PersistTimelineEditInput {
-  projectId: string;
-  element: TimelineElement;
-  activeCompPath: string | null;
-  label: string;
-  buildPatches: (original: string, target: PatchTarget) => string;
-  writeProjectFile: (path: string, content: string) => Promise<void>;
-  recordEdit: (input: RecordEditInput) => Promise<void>;
-  domEditSaveTimestampRef: React.MutableRefObject<number>;
-  pendingTimelineEditPathRef: React.MutableRefObject<Set<string>>;
-}
-
-async function persistTimelineEdit(input: PersistTimelineEditInput): Promise<void> {
-  const targetPath = input.element.sourceFile || input.activeCompPath || "index.html";
-  const originalContent = await readFileContent(input.projectId, targetPath);
-
-  const patchTarget = buildPatchTarget(input.element);
-  if (!patchTarget) {
-    throw new Error(`Timeline element ${input.element.id} is missing a patchable target`);
-  }
-
-  const patchedContent = input.buildPatches(originalContent, patchTarget);
-  if (patchedContent === originalContent) {
-    throw new Error(`Unable to patch timeline element ${input.element.id} in ${targetPath}`);
-  }
-
-  input.pendingTimelineEditPathRef.current.add(targetPath);
-  input.domEditSaveTimestampRef.current = Date.now();
-  await saveProjectFilesWithHistory({
-    projectId: input.projectId,
-    label: input.label,
-    kind: "timeline",
-    files: { [targetPath]: patchedContent },
-    readFile: async () => originalContent,
-    writeFile: input.writeProjectFile,
-    recordEdit: input.recordEdit,
-  });
-  input.domEditSaveTimestampRef.current = Date.now();
-}
-
-async function readFileContent(projectId: string, targetPath: string): Promise<string> {
-  const response = await fetch(
-    `/api/projects/${projectId}/files/${encodeURIComponent(targetPath)}`,
-  );
-  if (!response.ok) {
-    throw new Error(`Failed to read ${targetPath}`);
-  }
-  const data = (await response.json()) as { content?: string };
-  if (typeof data.content !== "string") {
-    throw new Error(`Missing file contents for ${targetPath}`);
-  }
-  return data.content;
-}
-
 // ── Hook ──
 
 export function useTimelineEditing({

package/src/player/components/TimelineCanvas.tsx

@@ -9,11 +9,33 @@ import {
 } from "./timelineEditing";
 import { getRenderedTimelineElement, type TimelineTheme } from "./timelineTheme";
 import { GUTTER, TRACK_H, RULER_H, CLIP_Y, CLIP_HANDLE_W } from "./timelineLayout";
-import type { TimelineElement, KeyframeCacheEntry } from "../store/playerStore";
+import {
+  usePlayerStore,
+  type TimelineElement,
+  type KeyframeCacheEntry,
+} from "../store/playerStore";
 import type { DraggedClipState, ResizingClipState, BlockedClipState } from "./useTimelineClipDrag";
 import type { TrackVisualStyle } from "./timelineIcons";
 import { STUDIO_KEYFRAMES_ENABLED } from "../../components/editor/manualEditingAvailability";
 
+function ClipLabel({ element, color }: { element: TimelineElement; color: string }) {
+  const lint = usePlayerStore((s) => s.lintFindingsByElement.get(element.key ?? element.id));
+  return (
+    <span
+      className="flex items-center gap-1 truncate text-[10px] font-medium leading-none"
+      style={{ color }}
+    >
+      {element.label || element.id || element.tag}
+      {lint && lint.count > 0 && (
+        <span
+          className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-amber-400"
+          title={lint.messages.join("\n")}
+        />
+      )}
+    </span>
+  );
+}
+
 interface TimelineCanvasProps {
   major: number[];
   minor: number[];
@@ -157,12 +179,7 @@ export const TimelineCanvas = memo(function TimelineCanvas({
         }
       >
         {renderClipContent?.(element, clipStyle) ?? (
-          <span
-            className="truncate text-[10px] font-medium leading-none"
-            style={{ color: clipStyle.label }}
-          >
-            {element.label || element.id || element.tag}
-          </span>
+          <ClipLabel element={element} color={clipStyle.label} />
         )}
       </div>
     </>

package/src/player/components/useTimelinePlayhead.ts

@@ -1,5 +1,5 @@
 import { useRef, useCallback, useEffect } from "react";
-import { liveTime, type ZoomMode } from "../store/playerStore";
+import { liveTime, usePlayerStore, type ZoomMode } from "../store/playerStore";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { getPinchTimelineZoomPercent } from "./timelineZoom";
 import {
@@ -90,6 +90,7 @@ export function useTimelinePlayhead({
       if (
         scroll &&
         !isDragging.current &&
+        usePlayerStore.getState().isPlaying &&
         shouldAutoScrollTimeline(zoomModeRef.current, scroll.scrollWidth, scroll.clientWidth)
       ) {
         const edgeMargin = scroll.clientWidth * 0.12;

package/src/player/store/playerStore.ts

@@ -117,6 +117,12 @@ interface PlayerState {
   requestedSeekTime: number | null;
   requestSeek: (time: number) => void;
   clearSeekRequest: () => void;
+
+  autoKeyframeEnabled: boolean;
+  setAutoKeyframeEnabled: (enabled: boolean) => void;
+
+  lintFindingsByElement: Map<string, { count: number; messages: string[] }>;
+  setLintFindingsByElement: (map: Map<string, { count: number; messages: string[] }>) => void;
 }
 
 // Lightweight pub-sub for current time during playback.
@@ -192,6 +198,12 @@ export const usePlayerStore = create<PlayerState>((set) => ({
   requestSeek: (time) => set({ requestedSeekTime: time }),
   clearSeekRequest: () => set({ requestedSeekTime: null }),
 
+  autoKeyframeEnabled: true,
+  setAutoKeyframeEnabled: (enabled) => set({ autoKeyframeEnabled: enabled }),
+
+  lintFindingsByElement: new Map(),
+  setLintFindingsByElement: (map) => set({ lintFindingsByElement: map }),
+
   setIsPlaying: (playing) => set({ isPlaying: playing }),
   setPlaybackRate: (rate) => {
     writeStudioUiPreferences({ playbackRate: rate });

package/src/utils/gsapSoftReload.ts

@@ -61,7 +61,24 @@ export function applySoftReload(iframe: HTMLIFrameElement | null, scriptText: st
     if (timelines) {
       for (const key of Object.keys(timelines)) {
         try {
-          timelines[key]?.kill?.();
+          const tl = timelines[key] as {
+            kill?: () => void;
+            getChildren?: (deep: boolean) => Array<{ targets?: () => Element[] }>;
+          };
+          const allTargets: Element[] = [];
+          if (tl?.getChildren) {
+            try {
+              for (const child of tl.getChildren(true)) {
+                if (typeof child.targets === "function") {
+                  for (const t of child.targets()) {
+                    allTargets.push(t);
+                    delete (t as unknown as Record<string, unknown>)._gsap;
+                  }
+                }
+              }
+            } catch {}
+          }
+          tl?.kill?.();
         } catch {}
         delete timelines[key];
       }

package/src/utils/studioUrlState.test.ts

@@ -231,6 +231,15 @@ describe("studio url state", () => {
     expect(window.location.hash).toContain("t=4.2");
     expect(applyDomSelection).not.toHaveBeenCalled();
 
+    // Drive the hook's internal currentTime read. Per #1311 the hook stopped
+    // taking currentTime as a prop and now subscribes to the player store
+    // directly (usePlayerStore((s) => s.currentTime)). The harness prop is a
+    // no-op; the selection-hydration useEffect's time-stability guard
+    // (`Math.abs(currentTime - stableTimeRef.current) > 0.05`) only passes
+    // once the store's currentTime catches up to the seek target.
+    act(() => {
+      usePlayerStore.setState({ currentTime: 4.2 });
+    });
     harness.rerender({ currentTime: 4.2 });
     await act(async () => {
       vi.advanceTimersByTime(250);