refactor: centralize editor interaction state

Move timeline and preview gestures into dedicated controllers so hooks stay thin around editor state and DOM events.

This also routes drag and playback synchronization through manager APIs and reuses persistent wasm surfaces so scrubbing, seeking, and preview rendering stay in sync.

Made-with: Cursor

1 files changed, 268 insertions, 268 deletions

diff --git a/apps/web/src/app/brand/page.tsx b/apps/web/src/app/brand/page.tsx
index a7085154..94e3f3e1 100644
--- a/apps/web/src/app/brand/page.tsx
+++ b/apps/web/src/app/brand/page.tsx
@@ -1,268 +1,268 @@
-"use client";

-

-import type { CSSProperties } from "react";

-import Image from "next/image";

-import Link from "next/link";

-import { Check, Copy, Download } from "lucide-react";

-import { useState } from "react";

-import { BasePage } from "@/app/base-page";

-import { Button } from "@/components/ui/button";

-import { Card } from "@/components/ui/card";

-import { Separator } from "@/components/ui/separator";

-import { cn } from "@/utils/ui";

-

-function downloadAsset(src: string) {

-	const filename = src.split("/").pop() ?? "asset.svg";

-	const a = document.createElement("a");

-	a.href = src;

-	a.download = filename;

-	a.click();

-}

-

-async function copyAsset(src: string) {

-	const res = await fetch(src);

-	const text = await res.text();

-	await navigator.clipboard.writeText(text);

-}

-

-const ALL_ASSETS = () => ASSET_SECTIONS.flatMap((s) => s.assets);

-

-type AssetTheme = "dark" | "light" | "icon";

-

-interface AssetVariant {

-	src: string;

-	theme: AssetTheme;

-	label: string;

-	width: number;

-	height: number;

-}

-

-interface AssetSection {

-	title: string;

-	description: string;

-	cols: "1" | "2";

-	assets: AssetVariant[];

-}

-

-const ASSET_SECTIONS: AssetSection[] = [

-	{

-		title: "Symbol",

-		description:

-			"Use the symbol on its own when the OpenCut name is already present nearby or space is limited.",

-		cols: "2",

-		assets: [

-			{

-				src: "/logos/opencut/symbol.svg",

-				theme: "dark",

-				label: "Symbol",

-				width: 400,

-				height: 400,

-			},

-			{

-				src: "/logos/opencut/symbol-light.svg",

-				theme: "light",

-				label: "Symbol",

-				width: 400,

-				height: 400,

-			},

-		],

-	},

-	{

-		title: "Lockup",

-		description:

-			"The full lockup combines the symbol and wordmark. Prefer this in most contexts where you have enough horizontal space.",

-		cols: "2",

-		assets: [

-			{

-				src: "/logos/opencut/logo.svg",

-				theme: "dark",

-				label: "Logo",

-				width: 1809,

-				height: 400,

-			},

-			{

-				src: "/logos/opencut/logo-light.svg",

-				theme: "light",

-				label: "Logo",

-				width: 1809,

-				height: 400,

-			},

-			{

-				src: "/logos/opencut/text.svg",

-				theme: "dark",

-				label: "Text",

-				width: 1760,

-				height: 400,

-			},

-			{

-				src: "/logos/opencut/text-light.svg",

-				theme: "light",

-				label: "Text",

-				width: 1760,

-				height: 400,

-			},

-		],

-	},

-];

-

-export default function BrandPage() {

-	return (

-		<BasePage

-			maxWidth="6xl"

-			title="Brand"

-			description={

-				<>

-					Download OpenCut brand assets for use in your projects.{" "}

-					<Link

-						href="#guidelines"

-						className="underline underline-offset-4"

-						onClick={() =>

-							document

-								.getElementById("guidelines")

-								?.scrollIntoView({ behavior: "smooth" })

-						}

-					>

-						Read the brand guidelines.

-					</Link>

-				</>

-			}

-			action={

-				<Button

-					variant="outline"

-					size="lg"

-					className="mx-auto gap-2"

-					onClick={() => {

-						ALL_ASSETS().forEach((asset, i) => {

-							setTimeout(() => downloadAsset(asset.src), i * 200);

-						});

-					}}

-				>

-					<Download />

-					Download all

-				</Button>

-			}

-		>

-			<div className="flex flex-col gap-10">

-				{ASSET_SECTIONS.map((section) => (

-					<div key={section.title} className="flex flex-col gap-4">

-						<div className="flex flex-col gap-1">

-							<h2 className="font-semibold text-lg">{section.title}</h2>

-							<p className="text-muted-foreground text-sm">

-								{section.description}

-							</p>

-						</div>

-						<div

-							className={cn(

-								"grid gap-3",

-								section.cols === "2"

-									? "grid-cols-1 sm:grid-cols-2"

-									: "grid-cols-1",

-							)}

-						>

-							{section.assets.map((variant) => (

-								<AssetCard key={variant.src} variant={variant} />

-							))}

-						</div>

-					</div>

-				))}

-			</div>

-

-			<Separator />

-

-			<div id="guidelines" className="flex flex-col gap-8 text-sm">

-				<div className="flex flex-col gap-3">

-					<h2 className="font-semibold text-lg">Usage</h2>

-					<p className="text-muted-foreground text-base leading-relaxed">

-						OpenCut is open source — the code is free to use under its license.

-						That license does not cover the name or logo. You can say you use

-						OpenCut, that your project integrates with OpenCut, or that it was

-						built on top of OpenCut. You cannot name your product OpenCut, imply

-						we made or endorse your product, or use the marks commercially

-						without asking first. For anything unclear, reach out at{" "}

-						<Link

-							href="mailto:brand@opencut.app"

-							className="underline underline-offset-4"

-						>

-							brand@opencut.app

-						</Link>

-						.

-					</p>

-				</div>

-

-				<div className="flex flex-col gap-3">

-					<h2 className="font-semibold text-lg">What's not allowed</h2>

-					<ul className="text-muted-foreground text-base flex flex-col gap-2 leading-relaxed">

-						{[

-							"Using OpenCut in the name of your product, service, or domain.",

-							"Implying that OpenCut made, sponsors, or endorses your work.",

-							"Using the logo or name on merchandise or commercial marketing.",

-							"Modifying the marks.",

-						].map((item) => (

-							<li key={item} className="flex gap-2">

-								<span className="mt-0.5 shrink-0">-</span>

-								<span>{item}</span>

-							</li>

-						))}

-					</ul>

-				</div>

-			</div>

-		</BasePage>

-	);

-}

-

-const CHECKER_STYLES: Record<"dark" | "light", CSSProperties> = {

-	light: {

-		backgroundImage:

-			"linear-gradient(45deg, #292929 25%, transparent 25%), linear-gradient(-45deg, #292929 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #292929 75%), linear-gradient(-45deg, transparent 75%, #292929 75%)",

-		backgroundSize: "18px 18px",

-		backgroundPosition: "0 0, 0 9px, 9px -9px, -9px 0px",

-		backgroundColor: "#000",

-	},

-	dark: {

-		backgroundImage:

-			"linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%)",

-		backgroundSize: "18px 18px",

-		backgroundPosition: "0 0, 0 9px, 9px -9px, -9px 0px",

-		backgroundColor: "#f5f5f5",

-	},

-};

-

-function AssetCard({ variant }: { variant: AssetVariant }) {

-	const [copied, setCopied] = useState(false);

-

-	async function handleCopy() {

-		await copyAsset(variant.src);

-		setCopied(true);

-		setTimeout(() => setCopied(false), 2000);

-	}

-

-	return (

-		<Card

-			className="group relative overflow-hidden"

-			style={

-				variant.theme === "icon" ? undefined : CHECKER_STYLES[variant.theme]

-			}

-		>

-			<div className="flex h-56 items-center justify-center px-12 py-8">

-				<Image

-					src={variant.src}

-					alt={variant.label}

-					width={variant.width}

-					height={variant.height}

-					className="max-h-16 w-auto select-none object-contain"

-					draggable={false}

-					unoptimized

-				/>

-			</div>

-

-			<Button

-				variant="outline"

-				size="icon"

-				className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 size-9"

-				onClick={handleCopy}

-			>

-				{copied ? <Check /> : <Copy />}

-			</Button>

-		</Card>

-	);

-}

+"use client";
+
+import type { CSSProperties } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { Check, Copy, Download } from "lucide-react";
+import { useState } from "react";
+import { BasePage } from "@/app/base-page";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/utils/ui";
+
+function downloadAsset(src: string) {
+	const filename = src.split("/").pop() ?? "asset.svg";
+	const a = document.createElement("a");
+	a.href = src;
+	a.download = filename;
+	a.click();
+}
+
+async function copyAsset(src: string) {
+	const res = await fetch(src);
+	const text = await res.text();
+	await navigator.clipboard.writeText(text);
+}
+
+const ALL_ASSETS = () => ASSET_SECTIONS.flatMap((s) => s.assets);
+
+type AssetTheme = "dark" | "light" | "icon";
+
+interface AssetVariant {
+	src: string;
+	theme: AssetTheme;
+	label: string;
+	width: number;
+	height: number;
+}
+
+interface AssetSection {
+	title: string;
+	description: string;
+	cols: "1" | "2";
+	assets: AssetVariant[];
+}
+
+const ASSET_SECTIONS: AssetSection[] = [
+	{
+		title: "Symbol",
+		description:
+			"Use the symbol on its own when the OpenCut name is already present nearby or space is limited.",
+		cols: "2",
+		assets: [
+			{
+				src: "/logos/opencut/symbol.svg",
+				theme: "dark",
+				label: "Symbol",
+				width: 400,
+				height: 400,
+			},
+			{
+				src: "/logos/opencut/symbol-light.svg",
+				theme: "light",
+				label: "Symbol",
+				width: 400,
+				height: 400,
+			},
+		],
+	},
+	{
+		title: "Lockup",
+		description:
+			"The full lockup combines the symbol and wordmark. Prefer this in most contexts where you have enough horizontal space.",
+		cols: "2",
+		assets: [
+			{
+				src: "/logos/opencut/logo.svg",
+				theme: "dark",
+				label: "Logo",
+				width: 1809,
+				height: 400,
+			},
+			{
+				src: "/logos/opencut/logo-light.svg",
+				theme: "light",
+				label: "Logo",
+				width: 1809,
+				height: 400,
+			},
+			{
+				src: "/logos/opencut/text.svg",
+				theme: "dark",
+				label: "Text",
+				width: 1760,
+				height: 400,
+			},
+			{
+				src: "/logos/opencut/text-light.svg",
+				theme: "light",
+				label: "Text",
+				width: 1760,
+				height: 400,
+			},
+		],
+	},
+];
+
+export default function BrandPage() {
+	return (
+		<BasePage
+			maxWidth="6xl"
+			title="Brand"
+			description={
+				<>
+					Download OpenCut brand assets for use in your projects.{" "}
+					<Link
+						href="#guidelines"
+						className="underline underline-offset-4"
+						onClick={() =>
+							document
+								.getElementById("guidelines")
+								?.scrollIntoView({ behavior: "smooth" })
+						}
+					>
+						Read the brand guidelines.
+					</Link>
+				</>
+			}
+			action={
+				<Button
+					variant="outline"
+					size="lg"
+					className="mx-auto gap-2"
+					onClick={() => {
+						ALL_ASSETS().forEach((asset, i) => {
+							setTimeout(() => downloadAsset(asset.src), i * 200);
+						});
+					}}
+				>
+					<Download />
+					Download all
+				</Button>
+			}
+		>
+			<div className="flex flex-col gap-10">
+				{ASSET_SECTIONS.map((section) => (
+					<div key={section.title} className="flex flex-col gap-4">
+						<div className="flex flex-col gap-1">
+							<h2 className="font-semibold text-lg">{section.title}</h2>
+							<p className="text-muted-foreground text-sm">
+								{section.description}
+							</p>
+						</div>
+						<div
+							className={cn(
+								"grid gap-3",
+								section.cols === "2"
+									? "grid-cols-1 sm:grid-cols-2"
+									: "grid-cols-1",
+							)}
+						>
+							{section.assets.map((variant) => (
+								<AssetCard key={variant.src} variant={variant} />
+							))}
+						</div>
+					</div>
+				))}
+			</div>
+
+			<Separator />
+
+			<div id="guidelines" className="flex flex-col gap-8 text-sm">
+				<div className="flex flex-col gap-3">
+					<h2 className="font-semibold text-lg">Usage</h2>
+					<p className="text-muted-foreground text-base leading-relaxed">
+						OpenCut is open source — the code is free to use under its license.
+						That license does not cover the name or logo. You can say you use
+						OpenCut, that your project integrates with OpenCut, or that it was
+						built on top of OpenCut. You cannot name your product OpenCut, imply
+						we made or endorse your product, or use the marks commercially
+						without asking first. For anything unclear, reach out at{" "}
+						<Link
+							href="mailto:brand@opencut.app"
+							className="underline underline-offset-4"
+						>
+							brand@opencut.app
+						</Link>
+						.
+					</p>
+				</div>
+
+				<div className="flex flex-col gap-3">
+					<h2 className="font-semibold text-lg">What's not allowed</h2>
+					<ul className="text-muted-foreground text-base flex flex-col gap-2 leading-relaxed">
+						{[
+							"Using OpenCut in the name of your product, service, or domain.",
+							"Implying that OpenCut made, sponsors, or endorses your work.",
+							"Using the logo or name on merchandise or commercial marketing.",
+							"Modifying the marks.",
+						].map((item) => (
+							<li key={item} className="flex gap-2">
+								<span className="mt-0.5 shrink-0">-</span>
+								<span>{item}</span>
+							</li>
+						))}
+					</ul>
+				</div>
+			</div>
+		</BasePage>
+	);
+}
+
+const CHECKER_STYLES: Record<"dark" | "light", CSSProperties> = {
+	light: {
+		backgroundImage:
+			"linear-gradient(45deg, #292929 25%, transparent 25%), linear-gradient(-45deg, #292929 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #292929 75%), linear-gradient(-45deg, transparent 75%, #292929 75%)",
+		backgroundSize: "18px 18px",
+		backgroundPosition: "0 0, 0 9px, 9px -9px, -9px 0px",
+		backgroundColor: "#000",
+	},
+	dark: {
+		backgroundImage:
+			"linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%)",
+		backgroundSize: "18px 18px",
+		backgroundPosition: "0 0, 0 9px, 9px -9px, -9px 0px",
+		backgroundColor: "#f5f5f5",
+	},
+};
+
+function AssetCard({ variant }: { variant: AssetVariant }) {
+	const [copied, setCopied] = useState(false);
+
+	async function handleCopy() {
+		await copyAsset(variant.src);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2000);
+	}
+
+	return (
+		<Card
+			className="group relative overflow-hidden"
+			style={
+				variant.theme === "icon" ? undefined : CHECKER_STYLES[variant.theme]
+			}
+		>
+			<div className="flex h-56 items-center justify-center px-12 py-8">
+				<Image
+					src={variant.src}
+					alt={variant.label}
+					width={variant.width}
+					height={variant.height}
+					className="max-h-16 w-auto select-none object-contain"
+					draggable={false}
+					unoptimized
+				/>
+			</div>
+
+			<Button
+				variant="outline"
+				size="icon"
+				className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 size-9"
+				onClick={handleCopy}
+			>
+				{copied ? <Check /> : <Copy />}
+			</Button>
+		</Card>
+	);
+}