refactor: restructure files to their domains, new preview overlay system, and dep graph

1 files changed, 39 insertions, 0 deletions

diff --git a/apps/web/src/timeline/hooks/use-element-preview.ts b/apps/web/src/timeline/hooks/use-element-preview.ts
new file mode 100644
index 00000000..67213094
--- /dev/null
+++ b/apps/web/src/timeline/hooks/use-element-preview.ts
@@ -0,0 +1,39 @@
+import { useEditor } from "@/editor/use-editor";

+import { findTrackInSceneTracks, type TimelineElement } from "@/timeline";

+

+/**

+ * Subscribes to render tracks and returns the live (preview-aware) version of

+ * an element alongside helpers for previewing and committing updates.

+ *

+ * Use this wherever property fields need to reflect in-progress preview state

+ * (e.g. a slider being dragged) rather than the last committed value.

+ */

+export function useElementPreview<T extends TimelineElement>({

+	trackId,

+	elementId,

+	fallback,

+}: {

+	trackId: string;

+	elementId: string;

+	fallback: T;

+}) {

+	const editor = useEditor();

+	useEditor((e) => e.timeline.getPreviewTracks());

+

+	const previewTracks = editor.timeline.getPreviewTracks();

+	const renderElement =

+		(findTrackInSceneTracks({

+			tracks: previewTracks ?? editor.scenes.getActiveScene().tracks,

+			trackId,

+		})?.elements.find((element) => element.id === elementId) as T | undefined) ??

+		fallback;

+

+	const previewUpdates = (updates: Partial<TimelineElement>) =>

+		editor.timeline.previewElements({

+			updates: [{ trackId, elementId, updates }],

+		});

+

+	const commit = () => editor.timeline.commitPreview();

+

+	return { renderElement, previewUpdates, commit };

+}