fix: stabilize studio preview and runtime sync (#389)

## Summary
Stabilize the Studio preview/runtime path so timeline data, preview rendering, and thumbnails stay in sync.

This PR includes:
- preview hot-refresh without remounting the iframe
- runtime duration/timeline fixes so Studio stops drifting from playback state
- thumbnail and selector-based preview fixes
- local Studio runtime serving and player-resolution fixes so dev/CI do not depend on prebuilt player artifacts
- tests around preview identity and thumbnail/runtime behavior

## Why This PR Exists
This is the foundation layer for timeline editing. Without it, the editor was prone to:
- iframe remount flashes after saves
- duration mismatches between preview and timeline
- stale or incorrect thumbnails
- CI/test failures when `@hyperframes/player` artifacts were not prebuilt

## Verification
- `bun run --filter @hyperframes/studio test`
- `bun run --filter @hyperframes/studio typecheck`
- `bun run --filter @hyperframes/core typecheck`
- `bunx oxlint packages/cli/src/server/studioServer.ts packages/core/src/runtime/timeline.ts packages/core/src/runtime/timeline.test.ts packages/core/src/studio-api/routes/thumbnail.ts packages/core/src/studio-api/routes/thumbnail.test.ts packages/core/src/studio-api/types.ts packages/studio/src/components/nle/NLELayout.tsx packages/studio/src/components/nle/NLEPreview.tsx packages/studio/src/components/nle/NLEPreview.test.ts packages/studio/src/player/components/CompositionThumbnail.tsx packages/studio/src/player/components/Player.tsx packages/studio/src/player/hooks/useTimelinePlayer.ts packages/studio/src/player/store/playerStore.ts packages/studio/vite.config.ts`
- `bunx oxfmt --check packages/cli/src/server/studioServer.ts packages/core/src/runtime/timeline.ts packages/core/src/runtime/timeline.test.ts packages/core/src/studio-api/routes/thumbnail.ts packages/core/src/studio-api/routes/thumbnail.test.ts packages/core/src/studio-api/types.ts packages/studio/src/components/nle/NLELayout.tsx packages/studio/src/components/nle/NLEPreview.tsx packages/studio/src/components/nle/NLEPreview.test.ts packages/studio/src/player/components/CompositionThumbnail.tsx packages/studio/src/player/components/Player.tsx packages/studio/src/player/hooks/useTimelinePlayer.ts packages/studio/src/player/store/playerStore.ts packages/studio/vite.config.ts`

## Stack
- base of stack
- followed by `feat: add studio timeline editing`
- followed by `fix: smooth scrubber end seeking`
This commit is contained in:
Miguel Ángel
2026-04-22 01:42:48 +02:00
committed by GitHub
parent 4ce1792601
commit 158204343d
19 changed files with 646 additions and 92 deletions
@@ -6,8 +6,15 @@ export interface TimelineElement {
start: number;
duration: number;
track: number;
/** Best-effort selector used when patching source HTML back from timeline edits */
selector?: string;
/** Source composition file that owns this element, when known */
sourceFile?: string;
src?: string;
playbackStart?: number;
playbackStartAttr?: "media-start" | "playback-start";
playbackRate?: number;
sourceDuration?: number;
volume?: number;
/** Path from data-composition-src — identifies sub-composition elements */
compositionSrc?: string;
@@ -37,7 +44,7 @@ interface PlayerState {
setSelectedElementId: (id: string | null) => void;
updateElement: (
elementId: string,
updates: Partial<Pick<TimelineElement, "start" | "duration" | "track">>,
updates: Partial<Pick<TimelineElement, "start" | "duration" | "track" | "playbackStart">>,
) => void;
setZoomMode: (mode: ZoomMode) => void;
setPixelsPerSecond: (pps: number) => void;