refactor: move track pruning into a post-command reactor

.github/workflows/bun-ci.yml

@@ -41,6 +41,26 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
+      - name: Install Rust wasm target
+        run: rustup target add wasm32-unknown-unknown
+
+      - name: Install wasm-pack
+        uses: jetli/wasm-pack-action@v0.4.0
+        with:
+          version: latest
+
+      - name: Cache Rust build artifacts
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.cargo/registry
+            ~/.cargo/git
+            target
+          key: ${{ runner.os }}-cargo-${{ hashFiles('Cargo.lock') }}
+
+      - name: Build WASM
+        run: wasm-pack build rust/wasm --target bundler --out-dir pkg
+
       - name: Install Bun
         uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76
         with:

.gitignore

@@ -22,3 +22,5 @@ bun.lockb
 .open-next
 
 target/
+
+.cargo-tools/

Cargo.lock

@@ -642,6 +642,14 @@ dependencies = [
  "piper",
 ]
 
+[[package]]
+name = "bridge"
+version = "0.1.0"
+dependencies = [
+ "quote",
+ "syn 2.0.117",
+]
+
 [[package]]
 name = "bstr"
 version = "1.12.1"
@@ -1977,6 +1985,19 @@ dependencies = [
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "gloo-utils"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0b5555354113b18c547c1d3a98fbf7fb32a9ff4f6fa112ce823a21641a0ba3aa"
+dependencies = [
+ "js-sys",
+ "serde",
+ "serde_json",
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "glow"
 version = "0.16.0"
@@ -2780,10 +2801,12 @@ dependencies = [
 
 [[package]]
 name = "js-sys"
-version = "0.3.91"
+version = "0.3.92"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b49715b7073f385ba4bc528e5747d02e66cb39c6146efb66b781f131f0fb399c"
+checksum = "cc4c90f45aa2e6eacbe8645f77fdea542ac97a494bcd117a67df9ff4d611f995"
 dependencies = [
+ "cfg-if",
+ "futures-util",
  "once_cell",
  "wasm-bindgen",
 ]
@@ -3540,6 +3563,13 @@ dependencies = [
  "gpui",
 ]
 
+[[package]]
+name = "opencut-wasm"
+version = "0.1.2"
+dependencies = [
+ "time",
+]
+
 [[package]]
 name = "openssl-probe"
 version = "0.2.1"
@@ -4588,6 +4618,17 @@ dependencies = [
  "serde_derive",
 ]
 
+[[package]]
+name = "serde-wasm-bindgen"
+version = "0.6.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8302e169f0eddcc139c70f139d19d6467353af16f9fce27e8c30158036a1e16b"
+dependencies = [
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "serde_core"
 version = "1.0.228"
@@ -5253,6 +5294,16 @@ dependencies = [
  "zune-jpeg",
 ]
 
+[[package]]
+name = "time"
+version = "0.1.0"
+dependencies = [
+ "bridge",
+ "serde",
+ "tsify-next",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "tiny-keccak"
 version = "2.0.2"
@@ -5527,6 +5578,32 @@ version = "0.2.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e421abadd41a4225275504ea4d6566923418b7f05506fbc9c0fe86ba7396114b"
 
+[[package]]
+name = "tsify-next"
+version = "0.5.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7d0f2208feeb5f7a6edb15a2389c14cd42480ef6417318316bb866da5806a61d"
+dependencies = [
+ "gloo-utils",
+ "serde",
+ "serde-wasm-bindgen",
+ "serde_json",
+ "tsify-next-macros",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "tsify-next-macros"
+version = "0.5.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f81253930d0d388a3ab8fa4ae56da9973ab171ef833d1be2e9080fc3ce502bd6"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "serde_derive_internals",
+ "syn 2.0.117",
+]
+
 [[package]]
 name = "ttf-parser"
 version = "0.20.0"
@@ -5850,9 +5927,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen"
-version = "0.2.114"
+version = "0.2.115"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6532f9a5c1ece3798cb1c2cfdba640b9b3ba884f5db45973a6f442510a87d38e"
+checksum = "6523d69017b7633e396a89c5efab138161ed5aafcbc8d3e5c5a42ae38f50495a"
 dependencies = [
  "cfg-if",
  "once_cell",
@@ -5863,23 +5940,19 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-futures"
-version = "0.4.64"
+version = "0.4.65"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e9c5522b3a28661442748e09d40924dfb9ca614b21c00d3fd135720e48b67db8"
+checksum = "2d1faf851e778dfa54db7cd438b70758eba9755cb47403f3496edd7c8fc212f0"
 dependencies = [
- "cfg-if",
- "futures-util",
  "js-sys",
- "once_cell",
  "wasm-bindgen",
- "web-sys",
 ]
 
 [[package]]
 name = "wasm-bindgen-macro"
-version = "0.2.114"
+version = "0.2.115"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "18a2d50fcf105fb33bb15f00e7a77b772945a2ee45dcf454961fd843e74c18e6"
+checksum = "4e3a6c758eb2f701ed3d052ff5737f5bfe6614326ea7f3bbac7156192dc32e67"
 dependencies = [
  "quote",
  "wasm-bindgen-macro-support",
@@ -5887,9 +5960,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro-support"
-version = "0.2.114"
+version = "0.2.115"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "03ce4caeaac547cdf713d280eda22a730824dd11e6b8c3ca9e42247b25c631e3"
+checksum = "921de2737904886b52bcbb237301552d05969a6f9c40d261eb0533c8b055fedf"
 dependencies = [
  "bumpalo",
  "proc-macro2",
@@ -5900,9 +5973,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-shared"
-version = "0.2.114"
+version = "0.2.115"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "75a326b8c223ee17883a4251907455a2431acc2791c98c26279376490c378c16"
+checksum = "a93e946af942b58934c604527337bad9ae33ba1d5c6900bbb41c2c07c2364a93"
 dependencies = [
  "unicode-ident",
 ]
@@ -6053,9 +6126,9 @@ dependencies = [
 
 [[package]]
 name = "web-sys"
-version = "0.3.91"
+version = "0.3.92"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "854ba17bb104abfb26ba36da9729addc7ce7f06f5c0f90f3c391f8461cca21f9"
+checksum = "84cde8507f4d7cfcb1185b8cb5890c494ffea65edbe1ba82cfd63661c805ed94"
 dependencies = [
  "js-sys",
  "wasm-bindgen",

Cargo.toml

@@ -2,6 +2,7 @@
 resolver = "2"
 members = [
     "apps/desktop",
-    "rust/crates/time"
+    "rust/crates/time",
-    "rust/crates/bridge"
+    "rust/crates/bridge",
+    "rust/wasm",
 ]

apps/web/package.json

@@ -22,6 +22,7 @@
     "@hugeicons/core-free-icons": "^3.1.1",
     "@hugeicons/react": "^1.1.6",
     "@huggingface/transformers": "^3.8.1",
+    "opencut-wasm": "workspace:*",
     "@opennextjs/cloudflare": "^1.18.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-checkbox": "^1.3.3",

apps/web/src/app/projects/page.tsx

@@ -21,7 +21,7 @@ import type {
 	TProjectSortKey,
 	TProjectSortOption,
 } from "@/lib/project/types";
-import { formatTimeCode } from "@/lib/time";
+import { formatTimeCode } from "opencut-wasm";
 import { formatDate } from "@/utils/date";
 import { HugeiconsIcon } from "@hugeicons/react";
 import {
@@ -77,7 +77,7 @@ const formatProjectDuration = ({
 	}
 
 	const format = duration >= 3600 ? "HH:MM:SS" : "MM:SS";
-	return formatTimeCode({ timeInSeconds: duration, format });
+	return formatTimeCode({ timeInSeconds: duration, format }) ?? "";
 };
 
 const VIEW_MODE_OPTIONS = [

apps/web/src/components/editable-timecode.tsx

@@ -1,14 +1,13 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { formatTimeCode, parseTimeCode } from "@/lib/time";
+import { formatTimeCode, parseTimeCode, type TimeCodeFormat } from "opencut-wasm";
-import type { TTimeCode } from "@/lib/time";
 import { cn } from "@/utils/ui";
 
 interface EditableTimecodeProps {
 	time: number;
 	duration: number;
-	format?: TTimeCode;
+	format?: TimeCodeFormat;
 	fps: number;
 	onTimeChange?: ({ time }: { time: number }) => void;
 	className?: string;
@@ -29,7 +28,7 @@ export function EditableTimecode({
 	const [hasError, setHasError] = useState(false);
 	const inputRef = useRef<HTMLInputElement>(null);
 	const enterPressedRef = useRef(false);
-	const formattedTime = formatTimeCode({ timeInSeconds: time, format, fps });
+	const formattedTime = formatTimeCode({ timeInSeconds: time, format, fps }) ?? "";
 
 	const startEditing = () => {
 		if (disabled) return;
@@ -49,7 +48,7 @@ export function EditableTimecode({
 	const applyEdit = () => {
 		const parsedTime = parseTimeCode({ timeCode: inputValue, format, fps });
 
-		if (parsedTime === null) {
+		if (parsedTime == null) {
 			setHasError(true);
 			return;
 		}

apps/web/src/components/editor/dialogs/project-info-dialog.tsx

@@ -8,7 +8,7 @@ import {
 } from "@/components/ui/dialog";
 import type { TProjectMetadata } from "@/lib/project/types";
 import { formatDate } from "@/utils/date";
-import { formatTimeCode } from "@/lib/time";
+import { formatTimeCode } from "opencut-wasm";
 import { Button } from "@/components/ui/button";
 
 function InfoRow({
@@ -37,11 +37,8 @@ export function ProjectInfoDialog({
 }) {
 	const durationFormatted =
 		project.duration > 0
-			? formatTimeCode({
+		? (formatTimeCode({ timeInSeconds: project.duration, format: project.duration >= 3600 ? "HH:MM:SS" : "MM:SS" }) ?? "")
-					timeInSeconds: project.duration,
+		: "0:00";
-					format: project.duration >= 3600 ? "HH:MM:SS" : "MM:SS",
-				})
-			: "0:00";
 
 	return (
 		<Dialog open={isOpen} onOpenChange={onOpenChange}>

apps/web/src/components/editor/panels/preview/toolbar.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from "react";
 import { useEditor } from "@/hooks/use-editor";
-import { formatTimeCode } from "@/lib/time";
+import { formatTimeCode } from "opencut-wasm";
 import { invokeAction } from "@/lib/actions";
 import { EditableTimecode } from "@/components/editable-timecode";
 import { Button } from "@/components/ui/button";
@@ -93,11 +93,7 @@ function TimecodeDisplay() {
 			/>
 			<span className="text-muted-foreground px-2 font-mono text-xs">/</span>
 			<span className="text-muted-foreground font-mono text-xs">
-				{formatTimeCode({
+				{formatTimeCode({ timeInSeconds: totalDuration, format: "HH:MM:SS:FF", fps })}
-					timeInSeconds: totalDuration,
-					format: "HH:MM:SS:FF",
-					fps,
-				})}
 			</span>
 		</div>
 	);

apps/web/src/components/editor/panels/timeline/bookmarks.tsx

@@ -10,7 +10,7 @@ import {
 	TIMELINE_BOOKMARK_ROW_HEIGHT,
 } from "@/constants/timeline-constants";
 import { DEFAULT_FPS } from "@/constants/project-constants";
-import { getSnappedSeekTime } from "@/lib/time";
+import { getSnappedSeekTime } from "opencut-wasm";
 import {
 	ArrowTurnBackwardIcon,
 	Delete02Icon,

apps/web/src/components/editor/panels/timeline/index.tsx

@@ -52,7 +52,7 @@ import {
 	getTimelineZoomMin,
 	getTimelinePaddingPx,
 } from "@/lib/timeline";
-import { isMainTrack } from "@/lib/track-placement";
+import { isMainTrack } from "@/lib/timeline/placement";
 import { TimelineToolbar } from "./timeline-toolbar";
 import { useElementSelection } from "@/hooks/timeline/element/use-element-selection";
 import { useTimelineSeek } from "@/hooks/timeline/use-timeline-seek";

apps/web/src/core/index.ts

@@ -10,6 +10,7 @@ import { AudioManager } from "./managers/audio-manager";
 import { SelectionManager } from "./managers/selection-manager";
 import { registerDefaultEffects } from "@/lib/effects";
 import { registerDefaultMasks } from "@/lib/masks";
+import { isMainTrack } from "@/lib/timeline/placement";
 
 export class EditorCore {
 	private static instance: EditorCore | null = null;
@@ -27,7 +28,7 @@ export class EditorCore {
 	private constructor() {
 		registerDefaultEffects();
 		registerDefaultMasks();
-		this.command = new CommandManager();
+		this.command = new CommandManager(this);
 		this.timeline = new TimelineManager(this);
 		this.playback = new PlaybackManager(this);
 		this.scenes = new ScenesManager(this);
@@ -37,6 +38,15 @@ export class EditorCore {
 		this.save = new SaveManager(this);
 		this.audio = new AudioManager(this);
 		this.selection = new SelectionManager(this);
+		this.command.registerReactor(() => {
+			const tracks = this.timeline.getTracks();
+			const prunedTracks = tracks.filter(
+				(track) => track.elements.length > 0 || isMainTrack(track),
+			);
+			if (prunedTracks.length !== tracks.length) {
+				this.timeline.updateTracks(prunedTracks);
+			}
+		});
 		this.save.start();
 	}
 

apps/web/src/core/managers/commands.ts

@@ -1,37 +1,82 @@
-import type { Command } from "@/lib/commands";
+import type { EditorCore } from "@/core";
+import type { Command, CommandResult } from "@/lib/commands";
+import type { ElementRef } from "@/lib/timeline/types";
+
+interface CommandHistoryEntry {
+	command: Command;
+	previousSelection: ElementRef[];
+	selectionOverride?: ElementRef[];
+}
 
 export class CommandManager {
-	private history: Command[] = [];
+	private history: CommandHistoryEntry[] = [];
-	private redoStack: Command[] = [];
+	private redoStack: CommandHistoryEntry[] = [];
+	private reactors: Array<() => void> = [];
+
+	constructor(private editor: EditorCore) {}
 
 	execute({ command }: { command: Command }): Command {
-		command.execute();
+		const previousSelection = this.getSelectionSnapshot();
-		this.history.push(command);
+		const result = command.execute();
+		const selectionOverride = this.applySelectionOverride(result);
+		this.runReactors();
+		this.history.push({
+			command,
+			previousSelection,
+			selectionOverride,
+		});
 		this.redoStack = [];
 		return command;
 	}
 
 	push({ command }: { command: Command }): void {
-		this.history.push(command);
+		this.history.push({
+			command,
+			previousSelection: this.getSelectionSnapshot(),
+		});
 		this.redoStack = [];
 	}
 
+	registerReactor(reactor: () => void): void {
+		this.reactors.push(reactor);
+	}
+
 	undo(): void {
 		if (this.history.length === 0) return;
-		const command = this.history.pop();
+		const entry = this.history.pop();
-		command?.undo();
+		entry?.command.undo();
-		if (command) {
+		if (entry) {
-			this.redoStack.push(command);
+			// Only restore selection for commands that explicitly changed it.
+			// Commands without selection intent leave selection untouched,
+			// preserving any UI-driven selection changes (clicks, box select)
+			// that happened between commands. Commands that remove elements
+			// must declare { select: [] } to clear stale refs.
+			if (entry.selectionOverride !== undefined) {
+				this.editor.selection.setSelectedElements({
+					elements: [...entry.previousSelection],
+				});
+			}
+			this.redoStack.push(entry);
 		}
 	}
 
 	redo(): void {
 		if (this.redoStack.length === 0) return;
-		const command = this.redoStack.pop();
+		const entry = this.redoStack.pop();
-		command?.redo();
+		if (!entry) {
-		if (command) {
+			return;
-			this.history.push(command);
 		}
+
+		const previousSelection = this.getSelectionSnapshot();
+		const result = entry.command.redo();
+		const selectionOverride = this.applySelectionOverride(result);
+		this.runReactors();
+
+		this.history.push({
+			command: entry.command,
+			previousSelection,
+			selectionOverride,
+		});
 	}
 
 	canUndo(): boolean {
@@ -46,4 +91,26 @@ export class CommandManager {
 		this.history = [];
 		this.redoStack = [];
 	}
+
+	private getSelectionSnapshot(): ElementRef[] {
+		return [...this.editor.selection.getSelectedElements()];
+	}
+
+	private applySelectionOverride(
+		result: CommandResult | undefined,
+	): ElementRef[] | undefined {
+		if (result?.select === undefined) {
+			return undefined;
+		}
+
+		const selectionOverride = [...result.select];
+		this.editor.selection.setSelectedElements({ elements: selectionOverride });
+		return selectionOverride;
+	}
+
+	private runReactors(): void {
+		for (const reactor of this.reactors) {
+			reactor();
+		}
+	}
 }

apps/web/src/core/managers/renderer-manager.ts

@@ -5,7 +5,7 @@ import { CanvasRenderer } from "@/services/renderer/canvas-renderer";
 import { SceneExporter } from "@/services/renderer/scene-exporter";
 import { buildScene } from "@/services/renderer/scene-builder";
 import { createTimelineAudioBuffer } from "@/lib/media/audio";
-import { formatTimeCode } from "@/lib/time";
+import { formatTimeCode } from "opencut-wasm";
 import { downloadBlob } from "@/utils/browser";
 
 type SnapshotResult =
@@ -107,10 +107,7 @@ export class RendererManager {
 				return { success: false, error: "Failed to create image" };
 			}
 
-			const timecode = formatTimeCode({
+			const timecode = formatTimeCode({ timeInSeconds: renderTime, fps })!.replace(/:/g, "-");
-				timeInSeconds: renderTime,
-				fps,
-			}).replace(/:/g, "-");
 			const safeName =
 				activeProject.metadata.name.replace(/[<>:"/\\|?*]/g, "-").trim() ||
 				"snapshot";

apps/web/src/core/managers/scenes-manager.ts

@@ -12,7 +12,7 @@ import {
 	getFrameTime,
 	isBookmarkAtTime,
 } from "@/lib/timeline/bookmarks";
-import { ensureMainTrack } from "@/lib/track-placement";
+import { ensureMainTrack } from "@/lib/timeline/placement";
 import {
 	CreateSceneCommand,
 	DeleteSceneCommand,

apps/web/src/core/managers/timeline-manager.ts

@@ -13,7 +13,7 @@ import type {
 	AnimationValue,
 } from "@/lib/animation/types";
 import { calculateTotalDuration } from "@/lib/timeline";
-import { getLastFrameTime } from "@/lib/time";
+import { getLastFrameTime } from "opencut-wasm";
 import {
 	AddTrackCommand,
 	RemoveTrackCommand,
@@ -265,7 +265,7 @@ export class TimelineManager {
 		time: number;
 		clipboardItems: ClipboardItem[];
 	}): { trackId: string; elementId: string }[] {
-		const command = new PasteCommand(time, clipboardItems);
+		const command = new PasteCommand({ time, clipboardItems });
 		this.editor.command.execute({ command });
 		return command.getPastedElements();
 	}

apps/web/src/hooks/actions/use-editor-actions.ts

@@ -261,7 +261,6 @@ export function useEditorActions() {
 				elements: selectedElements,
 				rippleEnabled: rippleEditingEnabled,
 			});
-			editor.selection.clearSelection();
 		},
 		undefined,
 	);

apps/web/src/hooks/timeline/element/use-element-interaction.ts

@@ -14,7 +14,7 @@ import {
 	DRAG_THRESHOLD_PX,
 	TIMELINE_CONSTANTS,
 } from "@/constants/timeline-constants";
-import { snapTimeToFrame } from "@/lib/time";
+import { snapTimeToFrame } from "opencut-wasm";
 import { computeDropTarget } from "@/lib/timeline/drop-utils";
 import { getMouseTimeFromClientX } from "@/lib/timeline/drag-utils";
 import { generateUUID } from "@/utils/id";
@@ -302,10 +302,7 @@ export function useElementInteraction({
 						0,
 						mouseTime - pendingDragRef.current.clickOffsetTime,
 					);
-					const snappedTime = snapTimeToFrame({
+				const snappedTime = snapTimeToFrame({ time: adjustedTime, fps: activeProject.settings.fps });
-						time: adjustedTime,
-						fps: activeProject.settings.fps,
-					});
 					startDrag({
 						...pendingDragRef.current,
 						initialCurrentTime: snappedTime,

apps/web/src/hooks/timeline/element/use-element-resize.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef, useCallback } from "react";
 import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
-import { snapTimeToFrame } from "@/lib/time";
+import { snapTimeToFrame } from "opencut-wasm";
 import type { TimelineElement, TimelineTrack } from "@/lib/timeline";
 import { useEditor } from "@/hooks/use-editor";
 import { useShiftKey } from "@/hooks/use-shift-key";
@@ -285,26 +285,14 @@ export function useTimelineElementResize({
 					resizing.initialTrimStart + getSourceDeltaForClipDelta(deltaTime);
 
 				if (calculated >= 0 && calculated <= maxAllowed) {
-					const newTrimStart = snapTimeToFrame({
+				const newTrimStart = snapTimeToFrame({ time: Math.min(maxAllowed, Math.max(minTrimStartForNeighbor, calculated)), fps: projectFps });
-						time: Math.min(
-							maxAllowed,
-							Math.max(minTrimStartForNeighbor, calculated),
-						),
-						fps: projectFps,
-					});
 					const visibleSourceSpan = Math.max(
 						0,
 						sourceDuration - newTrimStart - resizing.initialTrimEnd,
 					);
-					const newDuration = snapTimeToFrame({
+				const newDuration = snapTimeToFrame({ time: getDurationForVisibleSourceSpan(visibleSourceSpan), fps: projectFps });
-						time: getDurationForVisibleSourceSpan(visibleSourceSpan),
+				const trimDelta = resizing.initialDuration - newDuration;
-						fps: projectFps,
+				const newStartTime = snapTimeToFrame({ time: resizing.initialStartTime + trimDelta, fps: projectFps });
-					});
-					const trimDelta = resizing.initialDuration - newDuration;
-					const newStartTime = snapTimeToFrame({
-						time: resizing.initialStartTime + trimDelta,
-						fps: projectFps,
-					});
 
 					setCurrentTrimStart(newTrimStart);
 					setCurrentStartTime(newStartTime);
@@ -326,14 +314,8 @@ export function useTimelineElementResize({
 									)
 								: Math.min(extensionAmount, maxExtension),
 						);
-						const newStartTime = snapTimeToFrame({
+					const newStartTime = snapTimeToFrame({ time: resizing.initialStartTime - actualExtension, fps: projectFps });
-							time: resizing.initialStartTime - actualExtension,
+					const newDuration = snapTimeToFrame({ time: resizing.initialDuration + actualExtension, fps: projectFps });
-							fps: projectFps,
-						});
-						const newDuration = snapTimeToFrame({
-							time: resizing.initialDuration + actualExtension,
-							fps: projectFps,
-						});
 
 						setCurrentTrimStart(0);
 						setCurrentStartTime(newStartTime);
@@ -359,16 +341,8 @@ export function useTimelineElementResize({
 							0,
 							sourceDuration - newTrimStart - resizing.initialTrimEnd,
 						);
-						const newDuration = snapTimeToFrame({
+					const newDuration = snapTimeToFrame({ time: getDurationForVisibleSourceSpan(visibleSourceSpan), fps: projectFps });
-							time: getDurationForVisibleSourceSpan(visibleSourceSpan),
+					const newStartTime = snapTimeToFrame({ time: resizing.initialStartTime + (resizing.initialDuration - newDuration), fps: projectFps });
-							fps: projectFps,
-						});
-						const newStartTime = snapTimeToFrame({
-							time:
-								resizing.initialStartTime +
-								(resizing.initialDuration - newDuration),
-							fps: projectFps,
-						});
 
 						setCurrentTrimStart(newTrimStart);
 						setCurrentStartTime(newStartTime);
@@ -395,13 +369,7 @@ export function useTimelineElementResize({
 						const extensionNeeded = Math.abs(newTrimEnd);
 						const baseDuration =
 							resizing.initialDuration + resizing.initialTrimEnd;
-						const newDuration = snapTimeToFrame({
+					const newDuration = snapTimeToFrame({ time: Math.min(baseDuration + extensionNeeded, maxAllowedDuration), fps: projectFps });
-							time: Math.min(
-								baseDuration + extensionNeeded,
-								maxAllowedDuration,
-							),
-							fps: projectFps,
-						});
 
 						setCurrentDuration(newDuration);
 						setCurrentTrimEnd(0);
@@ -411,10 +379,7 @@ export function useTimelineElementResize({
 						const unclampedDuration = getDurationForVisibleSourceSpan(
 							Math.max(0, sourceDuration - resizing.initialTrimStart),
 						);
-						const newDuration = snapTimeToFrame({
+					const newDuration = snapTimeToFrame({ time: Math.min(unclampedDuration, maxAllowedDuration), fps: projectFps });
-							time: Math.min(unclampedDuration, maxAllowedDuration),
-							fps: projectFps,
-						});
 
 						setCurrentDuration(newDuration);
 						setCurrentTrimEnd(0);
@@ -438,18 +403,12 @@ export function useTimelineElementResize({
 						maxTrimEnd,
 						Math.max(minTrimEndForNeighbor, newTrimEnd),
 					);
-					const finalTrimEnd = snapTimeToFrame({
+				const finalTrimEnd = snapTimeToFrame({ time: clampedTrimEnd, fps: projectFps });
-						time: clampedTrimEnd,
-						fps: projectFps,
-					});
 					const visibleSourceSpan = Math.max(
 						0,
 						sourceDuration - resizing.initialTrimStart - finalTrimEnd,
 					);
-					const newDuration = snapTimeToFrame({
+				const newDuration = snapTimeToFrame({ time: getDurationForVisibleSourceSpan(visibleSourceSpan), fps: projectFps });
-						time: getDurationForVisibleSourceSpan(visibleSourceSpan),
-						fps: projectFps,
-					});
 
 					setCurrentTrimEnd(finalTrimEnd);
 					setCurrentDuration(newDuration);

apps/web/src/hooks/timeline/element/use-keyframe-drag.ts

@@ -7,7 +7,7 @@ import {
 } from "react";
 import { useEditor } from "@/hooks/use-editor";
 import { useKeyframeSelection } from "./use-keyframe-selection";
-import { snapTimeToFrame, getSnappedSeekTime } from "@/lib/time";
+import { snapTimeToFrame, getSnappedSeekTime } from "opencut-wasm";
 import { timelineTimeToSnappedPixels } from "@/lib/timeline";
 import {
 	DRAG_THRESHOLD_PX,
@@ -254,11 +254,7 @@ export function useKeyframeDrag({
 			if (wasDrag) return;
 
 			const duration = editor.timeline.getTotalDuration();
-			const seekTime = getSnappedSeekTime({
+			const seekTime = getSnappedSeekTime({ rawTime: displayedStartTime + indicatorTime, duration, fps });
-				rawTime: displayedStartTime + indicatorTime,
-				duration,
-				fps,
-			});
 			editor.playback.seek({ time: seekTime });
 
 			if (event.shiftKey) {

apps/web/src/hooks/timeline/use-bookmark-drag.ts

@@ -8,7 +8,7 @@ import {
 import { useEditor } from "@/hooks/use-editor";
 import { useShiftKey } from "@/hooks/use-shift-key";
 import { DRAG_THRESHOLD_PX } from "@/constants/timeline-constants";
-import { snapTimeToFrame } from "@/lib/time";
+import { snapTimeToFrame } from "opencut-wasm";
 import { getMouseTimeFromClientX } from "@/lib/timeline/drag-utils";
 import {
 	findSnapPoints,
@@ -145,10 +145,7 @@ export function useBookmarkDrag({
 					zoomLevel,
 					scrollLeft,
 				});
-				const frameSnappedTime = snapTimeToFrame({
+			const frameSnappedTime = snapTimeToFrame({ time: Math.max(0, Math.min(mouseTime, duration)), fps: activeProject.settings.fps });
-					time: Math.max(0, Math.min(mouseTime, duration)),
-					fps: activeProject.settings.fps,
-				});
 				const { snappedTime: initialTime } = getSnapResult({
 					rawTime: frameSnappedTime,
 					excludeBookmarkTime: bookmarkTime,
@@ -176,10 +173,7 @@ export function useBookmarkDrag({
 				scrollLeft,
 			});
 			const clampedTime = Math.max(0, Math.min(mouseTime, duration));
-			const frameSnappedTime = snapTimeToFrame({
+			const frameSnappedTime = snapTimeToFrame({ time: clampedTime, fps: activeProject.settings.fps });
-				time: clampedTime,
-				fps: activeProject.settings.fps,
-			});
 			const snapResult = getSnapResult({
 				rawTime: frameSnappedTime,
 				excludeBookmarkTime: dragState.bookmarkTime,

apps/web/src/hooks/timeline/use-timeline-drag-drop.ts

@@ -4,7 +4,7 @@ import { processMediaAssets } from "@/lib/media/processing";
 import { toast } from "sonner";
 import { showMediaUploadToast } from "@/lib/media/upload-toast";
 import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
-import { snapTimeToFrame } from "@/lib/time";
+import { snapTimeToFrame } from "opencut-wasm";
 import {
 	buildTextElement,
 	buildGraphicElement,
@@ -16,7 +16,7 @@ import { AddTrackCommand, InsertElementCommand } from "@/lib/commands/timeline";
 import { BatchCommand } from "@/lib/commands";
 import { computeDropTarget } from "@/lib/timeline/drop-utils";
 import { getDragData, hasDragData } from "@/lib/drag-data";
-import { isMainTrack } from "@/lib/track-placement";
+import { isMainTrack } from "@/lib/timeline/placement";
 import type { TrackType, DropTarget, ElementType } from "@/lib/timeline";
 import type {
 	MediaDragData,
@@ -444,7 +444,8 @@ export function useTimelineDragDrop({
 						if (!createdAsset) continue;
 
 						const duration =
-							createdAsset.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
+							createdAsset.duration ??
+							TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
 						const currentTracks = editor.timeline.getTracks();
 						const currentTime = editor.playback.getCurrentTime();
 						const onlyTrack = currentTracks[0];

apps/web/src/hooks/timeline/use-timeline-playhead.ts

@@ -1,4 +1,4 @@
-import { getSnappedSeekTime } from "@/lib/time";
+import { getSnappedSeekTime } from "opencut-wasm";
 import { useEffect, useCallback, useRef } from "react";
 import { useEdgeAutoScroll } from "@/hooks/timeline/use-edge-auto-scroll";
 import { useEditor } from "../use-editor";
@@ -83,11 +83,7 @@ export function useTimelinePlayhead({
 			);
 
 			const framesPerSecond = activeProject.settings.fps;
-			const frameTime = getSnappedSeekTime({
+			const frameTime = getSnappedSeekTime({ rawTime, duration, fps: framesPerSecond });
-				rawTime,
-				duration,
-				fps: framesPerSecond,
-			});
 
 			const shouldSnap = snappingEnabled && !isShiftHeldRef.current;
 			const time = (() => {

apps/web/src/hooks/timeline/use-timeline-seek.ts

@@ -1,7 +1,7 @@
 import { useCallback, useRef } from "react";
 import type { MutableRefObject, RefObject } from "react";
 import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
-import { getSnappedSeekTime } from "@/lib/time";
+import { getSnappedSeekTime } from "opencut-wasm";
 import { useEditor } from "../use-editor";
 
 interface UseTimelineSeekProps {
@@ -137,11 +137,7 @@ export function useTimelineSeek({
 			);
 
 			const projectFps = activeProject?.settings.fps || 30;
-			const time = getSnappedSeekTime({
+			const time = getSnappedSeekTime({ rawTime, duration, fps: projectFps });
-				rawTime,
-				duration,
-				fps: projectFps,
-			});
 			seek(time);
 			editor.project.setTimelineViewState({
 				viewState: {

apps/web/src/lib/commands/base-command.ts

@@ -1,11 +1,17 @@
+import type { ElementRef } from "@/lib/timeline/types";
+
+export interface CommandResult {
+	select?: ElementRef[];
+}
+
 export abstract class Command {
-	abstract execute(): void;
+	abstract execute(): CommandResult | undefined;
 
 	undo(): void {
 		throw new Error("Undo not implemented for this command");
 	}
 
-	redo(): void {
+	redo(): CommandResult | undefined {
-		this.execute();
+		return this.execute();
 	}
 }

apps/web/src/lib/commands/batch-command.ts

@@ -1,14 +1,21 @@
-import { Command } from "./base-command";
+import { Command, type CommandResult } from "./base-command";
 
 export class BatchCommand extends Command {
 	constructor(private commands: Command[]) {
 		super();
 	}
 
-	execute(): void {
+	execute(): CommandResult | undefined {
+		let latestSelectionResult: CommandResult | undefined;
+
 		for (const command of this.commands) {
-			command.execute();
+			const result = command.execute();
+			if (result?.select !== undefined) {
+				latestSelectionResult = result;
+			}
 		}
+
+		return latestSelectionResult;
 	}
 
 	undo(): void {
@@ -17,9 +24,16 @@ export class BatchCommand extends Command {
 		}
 	}
 
-	redo(): void {
+	redo(): CommandResult | undefined {
+		let latestSelectionResult: CommandResult | undefined;
+
 		for (const command of this.commands) {
-			command.execute();
+			const result = command.redo();
+			if (result?.select !== undefined) {
+				latestSelectionResult = result;
+			}
 		}
+
+		return latestSelectionResult;
 	}
 }

apps/web/src/lib/commands/index.ts

@@ -1,4 +1,5 @@
 export { Command } from "./base-command";
+export type { CommandResult } from "./base-command";
 export { BatchCommand } from "./batch-command";
 
 export * from "./timeline";

apps/web/src/lib/commands/timeline/clipboard/paste.ts

@@ -1,4 +1,4 @@
-import { Command } from "@/lib/commands/base-command";
+import { Command, type CommandResult } from "@/lib/commands/base-command";
 import { EditorCore } from "@/core";
 import type {
 	TimelineTrack,
@@ -11,34 +11,39 @@ import {
 	resolveTrackPlacement,
 	isMainTrack,
 	enforceMainTrackStart,
-} from "@/lib/track-placement";
+} from "@/lib/timeline/placement";
 import { cloneAnimations } from "@/lib/animation";
 
 export class PasteCommand extends Command {
 	private savedState: TimelineTrack[] | null = null;
 	private pastedElements: { trackId: string; elementId: string }[] = [];
-	private previousSelection: { trackId: string; elementId: string }[] = [];
+	private readonly time: number;
+	private readonly clipboardItems: ClipboardItem[];
 
-	constructor(
+	constructor({
-		private time: number,
+		time,
-		private clipboardItems: ClipboardItem[],
+		clipboardItems,
-	) {
+	}: {
+		time: number;
+		clipboardItems: ClipboardItem[];
+	}) {
 		super();
+		this.time = time;
+		this.clipboardItems = clipboardItems;
 	}
 
-	execute(): void {
+	execute(): CommandResult | undefined {
 		if (this.clipboardItems.length === 0) return;
 
 		const editor = EditorCore.getInstance();
 		this.savedState = editor.timeline.getTracks();
-		this.previousSelection = editor.selection.getSelectedElements();
 		this.pastedElements = [];
 
 		const minStart = Math.min(
 			...this.clipboardItems.map((item) => item.element.startTime),
 		);
 
-		const updatedTracks = [...this.savedState];
+		let updatedTracks = [...this.savedState];
 		const itemsByTrackId = groupClipboardItemsByTrackId({
 			clipboardItems: this.clipboardItems,
 		});
@@ -116,7 +121,7 @@ export class PasteCommand extends Command {
 		editor.timeline.updateTracks(updatedTracks);
 
 		if (this.pastedElements.length > 0) {
-			editor.selection.setSelectedElements({ elements: this.pastedElements });
+			return { select: this.pastedElements };
 		}
 	}
 
@@ -124,9 +129,6 @@ export class PasteCommand extends Command {
 		if (this.savedState) {
 			const editor = EditorCore.getInstance();
 			editor.timeline.updateTracks(this.savedState);
-			editor.selection.setSelectedElements({
-				elements: this.previousSelection,
-			});
 		}
 	}
 

apps/web/src/lib/commands/timeline/element/delete-elements.ts

@@ -1,8 +1,7 @@
-import { Command } from "@/lib/commands/base-command";
+import { Command, type CommandResult } from "@/lib/commands/base-command";
 import type { TimelineTrack } from "@/lib/timeline";
 import { EditorCore } from "@/core";
 import { rippleShiftElements } from "@/lib/timeline";
-import { isMainTrack } from "@/lib/track-placement";
 
 export class DeleteElementsCommand extends Command {
 	private savedState: TimelineTrack[] | null = null;
@@ -21,12 +20,11 @@ export class DeleteElementsCommand extends Command {
 		this.rippleEnabled = rippleEnabled;
 	}
 
-	execute(): void {
+	execute(): CommandResult {
 		const editor = EditorCore.getInstance();
 		this.savedState = editor.timeline.getTracks();
 
-		const updatedTracks = this.savedState
+		const updatedTracks = this.savedState.map((track) => {
-			.map((track) => {
 				const elementsToDeleteOnTrack = this.elements.filter(
 					(target) => target.trackId === track.id,
 				);
@@ -65,10 +63,13 @@ export class DeleteElementsCommand extends Command {
 				}
 
 				return { ...track, elements } as typeof track;
-			})
+			});
-			.filter((track) => track.elements.length > 0 || isMainTrack(track));
 
 		editor.timeline.updateTracks(updatedTracks);
+
+		return {
+			select: [],
+		};
 	}
 
 	undo(): void {

apps/web/src/lib/commands/timeline/element/duplicate-elements.ts

@@ -1,8 +1,8 @@
-import { Command } from "@/lib/commands/base-command";
+import { Command, type CommandResult } from "@/lib/commands/base-command";
 import type { TimelineElement, TimelineTrack } from "@/lib/timeline";
 import { generateUUID } from "@/utils/id";
 import { EditorCore } from "@/core";
-import { applyPlacement, resolveTrackPlacement } from "@/lib/track-placement";
+import { applyPlacement, resolveTrackPlacement } from "@/lib/timeline/placement";
 import { cloneAnimations } from "@/lib/animation";
 
 interface DuplicateElementsParams {
@@ -12,7 +12,6 @@ interface DuplicateElementsParams {
 export class DuplicateElementsCommand extends Command {
 	private duplicatedElements: { trackId: string; elementId: string }[] = [];
 	private savedState: TimelineTrack[] | null = null;
-	private previousSelection: { trackId: string; elementId: string }[] = [];
 	private elements: DuplicateElementsParams["elements"];
 
 	constructor({ elements }: DuplicateElementsParams) {
@@ -20,13 +19,12 @@ export class DuplicateElementsCommand extends Command {
 		this.elements = elements;
 	}
 
-	execute(): void {
+	execute(): CommandResult | undefined {
 		const editor = EditorCore.getInstance();
 		this.savedState = editor.timeline.getTracks();
-		this.previousSelection = editor.selection.getSelectedElements();
 		this.duplicatedElements = [];
 
-		const updatedTracks = [...this.savedState];
+		let updatedTracks = [...this.savedState];
 
 		for (const track of this.savedState) {
 			const elementsToDuplicate = this.elements.filter(
@@ -89,9 +87,9 @@ export class DuplicateElementsCommand extends Command {
 		editor.timeline.updateTracks(updatedTracks);
 
 		if (this.duplicatedElements.length > 0) {
-			editor.selection.setSelectedElements({
+			return {
-				elements: this.duplicatedElements,
+				select: this.duplicatedElements,
-			});
+			};
 		}
 	}
 
@@ -99,9 +97,6 @@ export class DuplicateElementsCommand extends Command {
 		if (this.savedState) {
 			const editor = EditorCore.getInstance();
 			editor.timeline.updateTracks(this.savedState);
-			editor.selection.setSelectedElements({
-				elements: this.previousSelection,
-			});
 		}
 	}
 

apps/web/src/lib/commands/timeline/element/insert-element.ts

@@ -16,7 +16,7 @@ import {
 	canElementGoOnTrack,
 	resolveTrackPlacement,
 	validateElementTrackCompatibility,
-} from "@/lib/track-placement";
+} from "@/lib/timeline/placement";
 
 type InsertElementPlacement =
 	| { mode: "explicit"; trackId: string }

apps/web/src/lib/commands/timeline/element/move-elements.ts

@@ -7,10 +7,9 @@ import type {
 } from "@/lib/timeline";
 import {
 	buildEmptyTrack,
-	isMainTrack,
 	validateElementTrackCompatibility,
 	enforceMainTrackStart,
-} from "@/lib/track-placement";
+} from "@/lib/timeline/placement";
 import { rippleShiftElements } from "@/lib/timeline/ripple-utils";
 
 export class MoveElementCommand extends Command {
@@ -100,7 +99,7 @@ export class MoveElementCommand extends Command {
 
 		const isSameTrack = this.sourceTrackId === this.targetTrackId;
 
-		let updatedTracks = tracksToUpdate.map((track): TimelineTrack => {
+		const updatedTracks = tracksToUpdate.map((track): TimelineTrack => {
 			if (isSameTrack && track.id === this.sourceTrackId) {
 				return {
 					...track,
@@ -134,21 +133,6 @@ export class MoveElementCommand extends Command {
 			return track;
 		});
 
-		if (!isSameTrack) {
-			const sourceTrackAfterMove = updatedTracks.find(
-				(track) => track.id === this.sourceTrackId,
-			);
-			if (
-				sourceTrackAfterMove &&
-				sourceTrackAfterMove.elements.length === 0 &&
-				!isMainTrack(sourceTrackAfterMove)
-			) {
-				updatedTracks = updatedTracks.filter(
-					(track) => track.id !== this.sourceTrackId,
-				);
-			}
-		}
-
 		editor.timeline.updateTracks(updatedTracks);
 	}
 

apps/web/src/lib/commands/timeline/element/split-elements.ts

@@ -1,4 +1,4 @@
-import { Command } from "@/lib/commands/base-command";
+import { Command, type CommandResult } from "@/lib/commands/base-command";
 import type { TimelineTrack } from "@/lib/timeline";
 import { generateUUID } from "@/utils/id";
 import { EditorCore } from "@/core";
@@ -9,7 +9,6 @@ import { getSourceSpanAtClipTime } from "@/lib/retime";
 export class SplitElementsCommand extends Command {
 	private savedState: TimelineTrack[] | null = null;
 	private rightSideElements: { trackId: string; elementId: string }[] = [];
-	private previousSelection: { trackId: string; elementId: string }[] = [];
 	private readonly elements: { trackId: string; elementId: string }[];
 	private readonly splitTime: number;
 	private readonly retainSide: "both" | "left" | "right";
@@ -37,10 +36,9 @@ export class SplitElementsCommand extends Command {
 		return this.rightSideElements;
 	}
 
-	execute(): void {
+	execute(): CommandResult | undefined {
 		const editor = EditorCore.getInstance();
 		this.savedState = editor.timeline.getTracks();
-		this.previousSelection = editor.selection.getSelectedElements();
 		this.rightSideElements = [];
 
 		const updatedTracks = this.savedState.map((track) => {
@@ -173,9 +171,9 @@ export class SplitElementsCommand extends Command {
 		editor.timeline.updateTracks(updatedTracks);
 
 		if (this.rightSideElements.length > 0) {
-			editor.selection.setSelectedElements({
+			return {
-				elements: this.rightSideElements,
+				select: this.rightSideElements,
-			});
+			};
 		}
 	}
 
@@ -183,9 +181,6 @@ export class SplitElementsCommand extends Command {
 		if (this.savedState) {
 			const editor = EditorCore.getInstance();
 			editor.timeline.updateTracks(this.savedState);
-			editor.selection.setSelectedElements({
-				elements: this.previousSelection,
-			});
 		}
 	}
 }

apps/web/src/lib/commands/timeline/element/update-element-start-time.ts

@@ -1,7 +1,7 @@
 import { Command } from "@/lib/commands/base-command";
 import type { TimelineTrack } from "@/lib/timeline";
 import { EditorCore } from "@/core";
-import { enforceMainTrackStart } from "@/lib/track-placement";
+import { enforceMainTrackStart } from "@/lib/timeline/placement";
 
 export class UpdateElementStartTimeCommand extends Command {
 	private savedState: TimelineTrack[] | null = null;

apps/web/src/lib/commands/timeline/element/update-element-trim.ts

@@ -3,7 +3,7 @@ import type { TimelineTrack } from "@/lib/timeline";
 import { EditorCore } from "@/core";
 import { clampAnimationsToDuration } from "@/lib/animation";
 import { isRetimableElement, rippleShiftElements } from "@/lib/timeline";
-import { enforceMainTrackStart } from "@/lib/track-placement";
+import { enforceMainTrackStart } from "@/lib/timeline/placement";
 
 export class UpdateElementTrimCommand extends Command {
 	private savedState: TimelineTrack[] | null = null;

apps/web/src/lib/commands/timeline/track/add-track.ts

@@ -5,7 +5,7 @@ import { EditorCore } from "@/core";
 import {
 	buildEmptyTrack,
 	getDefaultInsertIndexForTrack,
-} from "@/lib/track-placement";
+} from "@/lib/timeline/placement";
 
 export class AddTrackCommand extends Command {
 	private trackId: string;

apps/web/src/lib/commands/timeline/track/remove-track.ts

@@ -1,7 +1,7 @@
 import { Command } from "@/lib/commands/base-command";
 import { EditorCore } from "@/core";
 import type { TimelineTrack } from "@/lib/timeline";
-import { getMainTrack } from "@/lib/track-placement";
+import { getMainTrack } from "@/lib/timeline/placement";
 
 export class RemoveTrackCommand extends Command {
 	private savedState: TimelineTrack[] | null = null;

apps/web/src/lib/preview/element-bounds.ts

@@ -1,6 +1,6 @@
 import type { TimelineTrack, TimelineElement } from "@/lib/timeline";
 import type { MediaAsset } from "@/lib/media/types";
-import { isMainTrack } from "@/lib/track-placement";
+import { isMainTrack } from "@/lib/timeline/placement";
 import { STICKER_INTRINSIC_SIZE_FALLBACK } from "@/constants/sticker-constants";
 import { DEFAULT_GRAPHIC_SOURCE_SIZE } from "@/lib/graphics";
 import { measureTextElement } from "@/lib/text/measure-element";

apps/web/src/lib/scenes.ts

@@ -1,7 +1,7 @@
 import type { TScene } from "@/lib/timeline";
 import { generateUUID } from "@/utils/id";
 import { calculateTotalDuration } from "@/lib/timeline";
-import { ensureMainTrack } from "@/lib/track-placement";
+import { ensureMainTrack } from "@/lib/timeline/placement";
 
 export function getMainScene({ scenes }: { scenes: TScene[] }): TScene | null {
 	return scenes.find((scene) => scene.isMain) || null;

apps/web/src/lib/time.ts

@@ -1,225 +0,0 @@
-export type TTimeCode =
-	| "MM:SS"
-	| "HH:MM:SS"
-	| "HH:MM:SS:CS"
-	| "HH:MM:SS:FF";
-
-export function roundToFrame({
-	time,
-	fps,
-}: {
-	time: number;
-	fps: number;
-}): number {
-	return Math.round(time * fps) / fps;
-}
-
-export function formatTimeCode({
-	timeInSeconds,
-	format = "HH:MM:SS:CS",
-	fps,
-}: {
-	timeInSeconds: number;
-	format?: TTimeCode;
-	fps?: number;
-}): string {
-	const hours = Math.floor(timeInSeconds / 3600);
-	const minutes = Math.floor((timeInSeconds % 3600) / 60);
-	const seconds = Math.floor(timeInSeconds % 60);
-	const centiseconds = Math.floor((timeInSeconds % 1) * 100);
-	const frames = fps ? Math.floor((timeInSeconds % 1) * fps) : 0;
-
-	switch (format) {
-		case "MM:SS":
-			return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
-		case "HH:MM:SS":
-			return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
-		case "HH:MM:SS:CS":
-			return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}:${centiseconds.toString().padStart(2, "0")}`;
-		case "HH:MM:SS:FF":
-			if (!fps) throw new Error("FPS is required for HH:MM:SS:FF format");
-			return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}:${frames.toString().padStart(2, "0")}`;
-	}
-}
-
-export function parseTimeCode({
-	timeCode,
-	format = "HH:MM:SS:CS",
-	fps,
-}: {
-	timeCode: string;
-	format?: TTimeCode;
-	fps: number;
-}): number | null {
-	if (!timeCode || typeof timeCode !== "string") return null;
-
-	const cleanTimeCode = timeCode.trim();
-
-	try {
-		switch (format) {
-			case "MM:SS": {
-				const parts = cleanTimeCode.split(":");
-				if (parts.length !== 2) return null;
-				const [minutes, seconds] = parts.map((part) => parseInt(part, 10));
-				if (Number.isNaN(minutes) || Number.isNaN(seconds)) return null;
-				if (minutes < 0 || seconds < 0 || seconds >= 60) return null;
-				return minutes * 60 + seconds;
-			}
-
-			case "HH:MM:SS": {
-				const parts = cleanTimeCode.split(":");
-				if (parts.length !== 3) return null;
-				const [hours, minutes, seconds] = parts.map((part) =>
-					parseInt(part, 10),
-				);
-				if (
-					Number.isNaN(hours) ||
-					Number.isNaN(minutes) ||
-					Number.isNaN(seconds)
-				)
-					return null;
-				if (
-					hours < 0 ||
-					minutes < 0 ||
-					seconds < 0 ||
-					minutes >= 60 ||
-					seconds >= 60
-				)
-					return null;
-				return hours * 3600 + minutes * 60 + seconds;
-			}
-
-			case "HH:MM:SS:CS": {
-				const parts = cleanTimeCode.split(":");
-				if (parts.length !== 4) return null;
-				const [hours, minutes, seconds, centiseconds] = parts.map((part) =>
-					parseInt(part, 10),
-				);
-				if (
-					Number.isNaN(hours) ||
-					Number.isNaN(minutes) ||
-					Number.isNaN(seconds) ||
-					Number.isNaN(centiseconds)
-				)
-					return null;
-				if (
-					hours < 0 ||
-					minutes < 0 ||
-					seconds < 0 ||
-					centiseconds < 0 ||
-					minutes >= 60 ||
-					seconds >= 60 ||
-					centiseconds >= 100
-				)
-					return null;
-				return hours * 3600 + minutes * 60 + seconds + centiseconds / 100;
-			}
-
-			case "HH:MM:SS:FF": {
-				const parts = cleanTimeCode.split(":");
-				if (parts.length !== 4) return null;
-				const [hours, minutes, seconds, frames] = parts.map((part) =>
-					parseInt(part, 10),
-				);
-				if (
-					Number.isNaN(hours) ||
-					Number.isNaN(minutes) ||
-					Number.isNaN(seconds) ||
-					Number.isNaN(frames)
-				)
-					return null;
-				if (
-					hours < 0 ||
-					minutes < 0 ||
-					seconds < 0 ||
-					frames < 0 ||
-					minutes >= 60 ||
-					seconds >= 60 ||
-					frames >= fps
-				)
-					return null;
-				return hours * 3600 + minutes * 60 + seconds + frames / fps;
-			}
-		}
-	} catch {
-		return null;
-	}
-}
-
-export function guessTimeCodeFormat({
-	timeCode,
-}: {
-	timeCode: string;
-}): TTimeCode | null {
-	if (!timeCode || typeof timeCode !== "string") return null;
-
-	const numbers = timeCode.split(":");
-
-	if (!numbers.every((n) => !Number.isNaN(Number(n)))) return null;
-
-	if (numbers.length === 2) return "MM:SS";
-	if (numbers.length === 3) return "HH:MM:SS";
-	// todo: how to tell frames apart from cs?
-	if (numbers.length === 4) return "HH:MM:SS:FF";
-
-	return null;
-}
-
-export function timeToFrame({
-	time,
-	fps,
-}: {
-	time: number;
-	fps: number;
-}): number {
-	return Math.round(time * fps);
-}
-
-export function frameToTime({
-	frame,
-	fps,
-}: {
-	frame: number;
-	fps: number;
-}): number {
-	return frame / fps;
-}
-
-export function snapTimeToFrame({
-	time,
-	fps,
-}: {
-	time: number;
-	fps: number;
-}): number {
-	if (fps <= 0) return time;
-	const frame = timeToFrame({ time, fps });
-	return frameToTime({ frame, fps });
-}
-
-export function getSnappedSeekTime({
-	rawTime,
-	duration,
-	fps,
-}: {
-	rawTime: number;
-	duration: number;
-	fps: number;
-}): number {
-	const snappedTime = snapTimeToFrame({ time: rawTime, fps });
-	const lastFrame = getLastFrameTime({ duration, fps });
-	return Math.max(0, Math.min(lastFrame, snappedTime));
-}
-
-export function getLastFrameTime({
-	duration,
-	fps,
-}: {
-	duration: number;
-	fps: number;
-}): number {
-	if (duration <= 0) return 0;
-	if (fps <= 0) return duration;
-	const frameOffset = 1 / fps;
-	return Math.max(0, duration - frameOffset);
-}

apps/web/src/lib/timeline/bookmarks.ts

@@ -1,5 +1,5 @@
 import type { Bookmark } from "@/lib/timeline";
-import { roundToFrame } from "@/lib/time";
+import { roundToFrame } from "opencut-wasm";
 
 export const BOOKMARK_TIME_EPSILON = 0.001;
 

apps/web/src/lib/timeline/drop-utils.ts

@@ -4,7 +4,7 @@ import type {
 } from "@/lib/timeline";
 import { TRACK_CONFIG, TRACK_GAP } from "@/constants/timeline-constants";
 import type { ComputeDropTargetParams, DropTarget } from "@/lib/timeline";
-import { resolveTrackPlacement } from "@/lib/track-placement";
+import { resolveTrackPlacement } from "@/lib/timeline/placement";
 
 function findElementAtPosition({
 	mouseX,

apps/web/src/lib/timeline/placement/__tests__/resolve.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from "bun:test";
 import type { ElementType, TimelineElement, TimelineTrack, TrackType } from "@/lib/timeline";
-import { resolveTrackPlacement } from "@/lib/track-placement";
+import { resolveTrackPlacement } from "@/lib/timeline/placement";
 
 function buildElement({
 	id,

apps/web/src/services/renderer/scene-builder.ts

@@ -12,7 +12,7 @@ import { EffectLayerNode } from "./nodes/effect-layer-node";
 import type { BaseNode } from "./nodes/base-node";
 import type { TBackground, TCanvasSize } from "@/lib/project/types";
 import { DEFAULT_BLUR_INTENSITY } from "@/constants/project-constants";
-import { isMainTrack } from "@/lib/track-placement";
+import { isMainTrack } from "@/lib/timeline/placement";
 
 const PREVIEW_MAX_IMAGE_SIZE = 2048;
 

bun.lock

@@ -54,6 +54,7 @@
         "nanoid": "^5.1.5",
         "next": "16.1.3",
         "next-themes": "^0.4.4",
+        "opencut-wasm": "workspace:*",
         "pg": "^8.16.2",
         "postgres": "^3.4.5",
         "radix-ui": "^1.4.3",
@@ -102,6 +103,10 @@
         "wrangler": "^4.77.0",
       },
     },
+    "rust/wasm/pkg": {
+      "name": "opencut-wasm",
+      "version": "0.1.0",
+    },
   },
   "trustedDependencies": [
     "@tailwindcss/oxide",
@@ -1453,6 +1458,8 @@
 
     "onnxruntime-web": ["onnxruntime-web@1.22.0-dev.20250409-89f8206ba4", "", { "dependencies": { "flatbuffers": "^25.1.24", "guid-typescript": "^1.0.9", "long": "^5.2.3", "onnxruntime-common": "1.22.0-dev.20250409-89f8206ba4", "platform": "^1.3.6", "protobufjs": "^7.2.4" } }, "sha512-0uS76OPgH0hWCPrFKlL8kYVV7ckM7t/36HfbgoFw6Nd0CZVVbQC4PkrR8mBX8LtNUFZO25IQBqV2Hx2ho3FlbQ=="],
 
+    "opencut-wasm": ["opencut-wasm@workspace:rust/wasm/pkg"],
+
     "p-limit": ["p-limit@6.2.0", "", { "dependencies": { "yocto-queue": "^1.1.1" } }, "sha512-kuUqqHNUqoIWp/c467RI4X6mmyuojY5jGutNU0wVTmEOOfcuwLqyMVoAi9MKi2Ak+5i9+nhmrK4ufZE8069kHA=="],
 
     "package-json-from-dist": ["package-json-from-dist@1.0.1", "", {}, "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw=="],

package.json

@@ -3,9 +3,13 @@
   "packageManager": "bun@1.2.18",
   "workspaces": [
     "apps/*",
-    "packages/*"
+    "packages/*",
+    "rust/wasm/pkg"
   ],
   "scripts": {
+    "build:wasm": "wasm-pack build rust/wasm --target bundler --out-dir pkg",
+    "publish:wasm": "bun run build:wasm && npm publish rust/wasm/pkg --access public",
+    "dev:wasm": "cargo watch -w rust/crates -w rust/wasm/src -s 'wasm-pack build rust/wasm --target bundler --out-dir pkg'",
     "dev:web": "turbo run dev --filter=@opencut/web",
     "build:web": "turbo run build --filter=@opencut/web",
     "dev:tools": "turbo run dev --filter=@opencut/tools",

rust/crates/time/Cargo.toml

@@ -9,7 +9,9 @@ crate-type = ["rlib", "cdylib"]
 
 [dependencies]
 bridge = { version = "0.1.0", path = "../bridge" }
+serde = { version = "1", features = ["derive"] }
+tsify-next = { version = "0.5", optional = true }
 wasm-bindgen = { version = "0.2.115", optional = true }
 
 [features]
-wasm = ["dep:wasm-bindgen"]
+wasm = ["dep:wasm-bindgen", "dep:tsify-next", "tsify-next/js"]

rust/crates/time/src/time.rs

@@ -1,52 +1,129 @@
 use bridge::export;
+use serde::{Deserialize, Serialize};
 
-const DEFAULT_TIME_CODE_FORMAT: &str = "HH:MM:SS:CS";
+const SECONDS_PER_HOUR: f64 = 3600.0;
+const SECONDS_PER_MINUTE: f64 = 60.0;
+const CENTISECONDS_PER_SECOND: f64 = 100.0;
 
-#[derive(Clone, Copy, Debug, Eq, PartialEq)]
+#[cfg_attr(feature = "wasm", derive(tsify_next::Tsify))]
-enum TimeCodeFormat {
+#[cfg_attr(feature = "wasm", tsify(from_wasm_abi, into_wasm_abi))]
+#[derive(Serialize, Deserialize, Clone, Copy, Debug, Eq, PartialEq)]
+pub enum TimeCodeFormat {
+    #[serde(rename = "MM:SS")]
     MmSs,
+    #[serde(rename = "HH:MM:SS")]
     HhMmSs,
+    #[serde(rename = "HH:MM:SS:CS")]
     HhMmSsCs,
+    #[serde(rename = "HH:MM:SS:FF")]
     HhMmSsFf,
 }
 
-impl TimeCodeFormat {
+#[cfg_attr(feature = "wasm", derive(tsify_next::Tsify))]
-    fn parse(format: Option<&str>) -> Option<Self> {
+#[cfg_attr(feature = "wasm", tsify(from_wasm_abi))]
-        match format.unwrap_or(DEFAULT_TIME_CODE_FORMAT) {
+#[derive(Deserialize)]
-            "MM:SS" => Some(Self::MmSs),
+#[serde(rename_all = "camelCase")]
-            "HH:MM:SS" => Some(Self::HhMmSs),
+pub struct RoundToFrameOptions {
-            "HH:MM:SS:CS" => Some(Self::HhMmSsCs),
+    pub time: f64,
-            "HH:MM:SS:FF" => Some(Self::HhMmSsFf),
+    pub fps: f64,
-            _ => None,
+}
-        }
-    }
 
-    fn as_str(self) -> &'static str {
+#[cfg_attr(feature = "wasm", derive(tsify_next::Tsify))]
-        match self {
+#[cfg_attr(feature = "wasm", tsify(from_wasm_abi))]
-            Self::MmSs => "MM:SS",
+#[derive(Deserialize)]
-            Self::HhMmSs => "HH:MM:SS",
+#[serde(rename_all = "camelCase")]
-            Self::HhMmSsCs => "HH:MM:SS:CS",
+pub struct FormatTimeCodeOptions {
-            Self::HhMmSsFf => "HH:MM:SS:FF",
+    pub time_in_seconds: f64,
-        }
+    #[serde(default, skip_serializing_if = "Option::is_none")]
-    }
+    pub format: Option<TimeCodeFormat>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub fps: Option<f64>,
+}
+
+#[cfg_attr(feature = "wasm", derive(tsify_next::Tsify))]
+#[cfg_attr(feature = "wasm", tsify(from_wasm_abi))]
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct ParseTimeCodeOptions {
+    pub time_code: String,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub format: Option<TimeCodeFormat>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub fps: Option<f64>,
+}
+
+#[cfg_attr(feature = "wasm", derive(tsify_next::Tsify))]
+#[cfg_attr(feature = "wasm", tsify(from_wasm_abi))]
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct GuessTimeCodeFormatOptions {
+    pub time_code: String,
+}
+
+#[cfg_attr(feature = "wasm", derive(tsify_next::Tsify))]
+#[cfg_attr(feature = "wasm", tsify(from_wasm_abi))]
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct TimeToFrameOptions {
+    pub time: f64,
+    pub fps: f64,
+}
+
+#[cfg_attr(feature = "wasm", derive(tsify_next::Tsify))]
+#[cfg_attr(feature = "wasm", tsify(from_wasm_abi))]
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct FrameToTimeOptions {
+    pub frame: f64,
+    pub fps: f64,
+}
+
+#[cfg_attr(feature = "wasm", derive(tsify_next::Tsify))]
+#[cfg_attr(feature = "wasm", tsify(from_wasm_abi))]
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct SnapTimeToFrameOptions {
+    pub time: f64,
+    pub fps: f64,
+}
+
+#[cfg_attr(feature = "wasm", derive(tsify_next::Tsify))]
+#[cfg_attr(feature = "wasm", tsify(from_wasm_abi))]
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct GetSnappedSeekTimeOptions {
+    pub raw_time: f64,
+    pub duration: f64,
+    pub fps: f64,
+}
+
+#[cfg_attr(feature = "wasm", derive(tsify_next::Tsify))]
+#[cfg_attr(feature = "wasm", tsify(from_wasm_abi))]
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct GetLastFrameTimeOptions {
+    pub duration: f64,
+    pub fps: f64,
 }
 
 #[export]
-pub fn round_to_frame(time: f64, fps: f64) -> f64 {
+pub fn round_to_frame(RoundToFrameOptions { time, fps }: RoundToFrameOptions) -> f64 {
     (time * fps).round() / fps
 }
 
 #[export]
 pub fn format_time_code(
-    time_in_seconds: f64,
+    FormatTimeCodeOptions {
-    format: Option<String>,
+        time_in_seconds,
-    fps: Option<f64>,
+        format,
+        fps,
+    }: FormatTimeCodeOptions,
 ) -> Option<String> {
-    let format = TimeCodeFormat::parse(format.as_deref())?;
+    let format = format.unwrap_or(TimeCodeFormat::HhMmSsCs);
-    let hours = (time_in_seconds / 3600.0).floor() as u64;
+    let hours = (time_in_seconds / SECONDS_PER_HOUR).floor() as u64;
-    let minutes = ((time_in_seconds % 3600.0) / 60.0).floor() as u64;
+    let minutes = ((time_in_seconds % SECONDS_PER_HOUR) / SECONDS_PER_MINUTE).floor() as u64;
-    let seconds = (time_in_seconds % 60.0).floor() as u64;
+    let seconds = (time_in_seconds % SECONDS_PER_MINUTE).floor() as u64;
-    let centiseconds = ((time_in_seconds % 1.0) * 100.0).floor() as u64;
+    let centiseconds = ((time_in_seconds % 1.0) * CENTISECONDS_PER_SECOND).floor() as u64;
 
     match format {
         TimeCodeFormat::MmSs => Some(format!("{minutes:02}:{seconds:02}")),
@@ -69,12 +146,18 @@ pub fn format_time_code(
 }
 
 #[export]
-pub fn parse_time_code(time_code: &str, format: Option<String>, fps: Option<f64>) -> Option<f64> {
+pub fn parse_time_code(
+    ParseTimeCodeOptions {
+        time_code,
+        format,
+        fps,
+    }: ParseTimeCodeOptions,
+) -> Option<f64> {
     if time_code.trim().is_empty() {
         return None;
     }
 
-    let format = TimeCodeFormat::parse(format.as_deref())?;
+    let format = format.unwrap_or(TimeCodeFormat::HhMmSsCs);
     let parts = time_code
         .trim()
         .split(':')
@@ -86,35 +169,42 @@ pub fn parse_time_code(time_code: &str, format: Option<String>, fps: Option<f64>
             let [minutes, seconds] = parts.as_slice() else {
                 return None;
             };
-            if *seconds >= 60 {
+            if *seconds >= SECONDS_PER_MINUTE as u32 {
                 return None;
             }
 
-            Some((*minutes as f64 * 60.0) + *seconds as f64)
+            Some((*minutes as f64 * SECONDS_PER_MINUTE) + *seconds as f64)
         }
         TimeCodeFormat::HhMmSs => {
             let [hours, minutes, seconds] = parts.as_slice() else {
                 return None;
             };
-            if *minutes >= 60 || *seconds >= 60 {
+            if *minutes >= SECONDS_PER_MINUTE as u32 || *seconds >= SECONDS_PER_MINUTE as u32 {
                 return None;
             }
 
-            Some((*hours as f64 * 3600.0) + (*minutes as f64 * 60.0) + *seconds as f64)
+            Some(
+                (*hours as f64 * SECONDS_PER_HOUR)
+                    + (*minutes as f64 * SECONDS_PER_MINUTE)
+                    + *seconds as f64,
+            )
         }
         TimeCodeFormat::HhMmSsCs => {
             let [hours, minutes, seconds, centiseconds] = parts.as_slice() else {
                 return None;
             };
-            if *minutes >= 60 || *seconds >= 60 || *centiseconds >= 100 {
+            if *minutes >= SECONDS_PER_MINUTE as u32
+                || *seconds >= SECONDS_PER_MINUTE as u32
+                || *centiseconds >= CENTISECONDS_PER_SECOND as u32
+            {
                 return None;
             }
 
             Some(
-                (*hours as f64 * 3600.0)
+                (*hours as f64 * SECONDS_PER_HOUR)
-                    + (*minutes as f64 * 60.0)
+                    + (*minutes as f64 * SECONDS_PER_MINUTE)
                     + *seconds as f64
-                    + (*centiseconds as f64 / 100.0),
+                    + (*centiseconds as f64 / CENTISECONDS_PER_SECOND),
             )
         }
         TimeCodeFormat::HhMmSsFf => {
@@ -126,13 +216,16 @@ pub fn parse_time_code(time_code: &str, format: Option<String>, fps: Option<f64>
             let [hours, minutes, seconds, frames] = parts.as_slice() else {
                 return None;
             };
-            if *minutes >= 60 || *seconds >= 60 || *frames as f64 >= fps {
+            if *minutes >= SECONDS_PER_MINUTE as u32
+                || *seconds >= SECONDS_PER_MINUTE as u32
+                || *frames as f64 >= fps
+            {
                 return None;
             }
 
             Some(
-                (*hours as f64 * 3600.0)
+                (*hours as f64 * SECONDS_PER_HOUR)
-                    + (*minutes as f64 * 60.0)
+                    + (*minutes as f64 * SECONDS_PER_MINUTE)
                     + *seconds as f64
                     + (*frames as f64 / fps),
             )
@@ -141,7 +234,9 @@ pub fn parse_time_code(time_code: &str, format: Option<String>, fps: Option<f64>
 }
 
 #[export]
-pub fn guess_time_code_format(time_code: &str) -> Option<String> {
+pub fn guess_time_code_format(
+    GuessTimeCodeFormatOptions { time_code }: GuessTimeCodeFormatOptions,
+) -> Option<TimeCodeFormat> {
     if time_code.trim().is_empty() {
         return None;
     }
@@ -153,41 +248,52 @@ pub fn guess_time_code_format(time_code: &str) -> Option<String> {
         })?;
 
     match part_count {
-        2 => Some(TimeCodeFormat::MmSs.as_str().to_string()),
+        2 => Some(TimeCodeFormat::MmSs),
-        3 => Some(TimeCodeFormat::HhMmSs.as_str().to_string()),
+        3 => Some(TimeCodeFormat::HhMmSs),
-        4 => Some(TimeCodeFormat::HhMmSsFf.as_str().to_string()),
+        4 => Some(TimeCodeFormat::HhMmSsFf),
         _ => None,
     }
 }
 
 #[export]
-pub fn time_to_frame(time: f64, fps: f64) -> f64 {
+pub fn time_to_frame(TimeToFrameOptions { time, fps }: TimeToFrameOptions) -> f64 {
     (time * fps).round()
 }
 
 #[export]
-pub fn frame_to_time(frame: f64, fps: f64) -> f64 {
+pub fn frame_to_time(FrameToTimeOptions { frame, fps }: FrameToTimeOptions) -> f64 {
     frame / fps
 }
 
 #[export]
-pub fn snap_time_to_frame(time: f64, fps: f64) -> f64 {
+pub fn snap_time_to_frame(SnapTimeToFrameOptions { time, fps }: SnapTimeToFrameOptions) -> f64 {
     if fps <= 0.0 {
         return time;
     }
 
-    frame_to_time(time_to_frame(time, fps), fps)
+    frame_to_time(FrameToTimeOptions {
+        frame: time_to_frame(TimeToFrameOptions { time, fps }),
+        fps,
+    })
 }
 
 #[export]
-pub fn get_snapped_seek_time(raw_time: f64, duration: f64, fps: f64) -> f64 {
+pub fn get_snapped_seek_time(
-    let snapped_time = snap_time_to_frame(raw_time, fps);
+    GetSnappedSeekTimeOptions {
-    let last_frame = get_last_frame_time(duration, fps);
+        raw_time,
+        duration,
+        fps,
+    }: GetSnappedSeekTimeOptions,
+) -> f64 {
+    let snapped_time = snap_time_to_frame(SnapTimeToFrameOptions { time: raw_time, fps });
+    let last_frame = get_last_frame_time(GetLastFrameTimeOptions { duration, fps });
     snapped_time.clamp(0.0, last_frame)
 }
 
 #[export]
-pub fn get_last_frame_time(duration: f64, fps: f64) -> f64 {
+pub fn get_last_frame_time(
+    GetLastFrameTimeOptions { duration, fps }: GetLastFrameTimeOptions,
+) -> f64 {
     if duration <= 0.0 {
         return 0.0;
     }
@@ -206,18 +312,26 @@ mod tests {
 
     #[test]
     fn rounds_to_the_nearest_frame() {
-        assert_eq!(round_to_frame(1.24, 10.0), 1.2);
+        assert_eq!(round_to_frame(RoundToFrameOptions { time: 1.24, fps: 10.0 }), 1.2);
-        assert_eq!(round_to_frame(1.26, 10.0), 1.3);
+        assert_eq!(round_to_frame(RoundToFrameOptions { time: 1.26, fps: 10.0 }), 1.3);
     }
 
     #[test]
     fn formats_default_time_codes() {
         assert_eq!(
-            format_time_code(3723.45, None, None),
+            format_time_code(FormatTimeCodeOptions {
-			Some("01:02:03:44".to_string()),
+                time_in_seconds: 3723.45,
+                format: None,
+                fps: None,
+            }),
+            Some("01:02:03:44".to_string()),
         );
         assert_eq!(
-            format_time_code(65.0, Some("MM:SS".to_string()), None),
+            format_time_code(FormatTimeCodeOptions {
+                time_in_seconds: 65.0,
+                format: Some(TimeCodeFormat::MmSs),
+                fps: None,
+            }),
             Some("01:05".to_string()),
         );
     }
@@ -225,11 +339,19 @@ mod tests {
     #[test]
     fn formats_frame_based_time_codes() {
         assert_eq!(
-            format_time_code(1.5, Some("HH:MM:SS:FF".to_string()), Some(30.0)),
+            format_time_code(FormatTimeCodeOptions {
+                time_in_seconds: 1.5,
+                format: Some(TimeCodeFormat::HhMmSsFf),
+                fps: Some(30.0),
+            }),
             Some("00:00:01:15".to_string()),
         );
         assert_eq!(
-            format_time_code(1.5, Some("HH:MM:SS:FF".to_string()), None),
+            format_time_code(FormatTimeCodeOptions {
+                time_in_seconds: 1.5,
+                format: Some(TimeCodeFormat::HhMmSsFf),
+                fps: None,
+            }),
             None,
         );
     }
@@ -237,38 +359,64 @@ mod tests {
     #[test]
     fn parses_time_codes() {
         assert_eq!(
-            parse_time_code("01:05", Some("MM:SS".to_string()), None),
+            parse_time_code(ParseTimeCodeOptions {
+                time_code: "01:05".to_string(),
+                format: Some(TimeCodeFormat::MmSs),
+                fps: None,
+            }),
             Some(65.0),
         );
         assert_eq!(
-            parse_time_code("00:00:01:15", Some("HH:MM:SS:FF".to_string()), Some(30.0)),
+            parse_time_code(ParseTimeCodeOptions {
+                time_code: "00:00:01:15".to_string(),
+                format: Some(TimeCodeFormat::HhMmSsFf),
+                fps: Some(30.0),
+            }),
             Some(1.5),
         );
         assert_eq!(
-            parse_time_code("00:00:01:30", Some("HH:MM:SS:FF".to_string()), Some(30.0)),
+            parse_time_code(ParseTimeCodeOptions {
+                time_code: "00:00:01:30".to_string(),
+                format: Some(TimeCodeFormat::HhMmSsFf),
+                fps: Some(30.0),
+            }),
             None,
         );
     }
 
     #[test]
     fn guesses_time_code_formats() {
-        assert_eq!(guess_time_code_format("01:05"), Some("MM:SS".to_string()));
         assert_eq!(
-            guess_time_code_format("00:00:01"),
+            guess_time_code_format(GuessTimeCodeFormatOptions { time_code: "01:05".to_string() }),
-            Some("HH:MM:SS".to_string()),
+            Some(TimeCodeFormat::MmSs),
         );
         assert_eq!(
-            guess_time_code_format("00:00:01:15"),
+            guess_time_code_format(GuessTimeCodeFormatOptions {
-            Some("HH:MM:SS:FF".to_string()),
+                time_code: "00:00:01".to_string(),
+            }),
+            Some(TimeCodeFormat::HhMmSs),
+        );
+        assert_eq!(
+            guess_time_code_format(GuessTimeCodeFormatOptions {
+                time_code: "00:00:01:15".to_string(),
+            }),
+            Some(TimeCodeFormat::HhMmSsFf),
         );
     }
 
     #[test]
     fn snaps_and_clamps_seek_time() {
-        assert_eq!(time_to_frame(1.26, 10.0), 13.0);
+        assert_eq!(time_to_frame(TimeToFrameOptions { time: 1.26, fps: 10.0 }), 13.0);
-        assert_eq!(frame_to_time(13.0, 10.0), 1.3);
+        assert_eq!(frame_to_time(FrameToTimeOptions { frame: 13.0, fps: 10.0 }), 1.3);
-        assert_eq!(snap_time_to_frame(1.26, 10.0), 1.3);
+        assert_eq!(snap_time_to_frame(SnapTimeToFrameOptions { time: 1.26, fps: 10.0 }), 1.3);
-        assert_eq!(get_last_frame_time(10.0, 5.0), 9.8);
+        assert_eq!(get_last_frame_time(GetLastFrameTimeOptions { duration: 10.0, fps: 5.0 }), 9.8);
-        assert_eq!(get_snapped_seek_time(10.0, 10.0, 5.0), 9.8);
+        assert_eq!(
+            get_snapped_seek_time(GetSnappedSeekTimeOptions {
+                raw_time: 10.0,
+                duration: 10.0,
+                fps: 5.0,
+            }),
+            9.8,
+        );
     }
 }

rust/wasm/Cargo.toml

@@ -0,0 +1,14 @@
+[package]
+name = "opencut-wasm"
+version = "0.1.2"
+edition = "2024"
+description = "Shared video editor logic compiled to WebAssembly"
+repository = "https://github.com/opencut/opencut"
+license = "MIT"
+
+[lib]
+path = "src/wasm.rs"
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+time = { version = "0.1.0", path = "../crates/time", features = ["wasm"] }

rust/wasm/README.md

@@ -0,0 +1,21 @@
+# opencut-wasm
+
+Shared video editor logic compiled to WebAssembly. Used by the [OpenCut](https://github.com/opencut/opencut) web app.
+
+## Install
+
+```bash
+npm install opencut-wasm
+```
+
+## Usage
+
+```ts
+import { formatTimeCode } from "opencut-wasm";
+```
+
+All exports are documented in the [TypeScript definitions](./opencut_wasm.d.ts).
+
+## Source
+
+Functions are implemented in Rust under [`rust/crates/`](../crates/). This package is the compiled WebAssembly output — do not edit it directly.

rust/wasm/src/wasm.rs

@@ -0,0 +1 @@
+pub use time::*;

script/setup-rust

@@ -14,4 +14,8 @@ fi
 
 echo "Installing rustup..."
 curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
-echo "Rust installed. Reload your shell: source \"\$HOME/.cargo/env\""
+source "$HOME/.cargo/env"
+
+echo "Installing wasm-pack..."
+cargo install wasm-pack
+echo "Done. Rust toolchain ready."

turbo.json

@@ -1,8 +1,11 @@
 {
 	"$schema": "https://turborepo.com/schema.json",
 	"tasks": {
+		"build:wasm": {
+			"outputs": ["rust/wasm/pkg/**"]
+		},
 		"build": {
-			"dependsOn": ["^build"],
+			"dependsOn": ["//#build:wasm", "^build"],
 			"outputs": [".next/**", "!.next/cache/**"],
 			"env": [
 				"NODE_ENV",