1 files changed, 38 insertions, 0 deletions
diff --git a/apps/web/src/hooks/use-element-preview.ts b/apps/web/src/hooks/use-element-preview.ts
new file mode 100644
index 00000000..8aa16501
--- /dev/null
+++ b/apps/web/src/hooks/use-element-preview.ts
@@ -0,0 +1,38 @@
+import { useEditor } from "@/hooks/use-editor";
+import type { TimelineElement } from "@/lib/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.getRenderTracks());
+
+	const renderElement =
+		(editor.timeline
+			.getRenderTracks()
+			.find((t) => t.id === trackId)
+			?.elements.find((el) => el.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 };
+}