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

20 files changed, 103 insertions, 45 deletions

diff --git a/apps/web/src/app/api/auth/[...all]/route.ts b/apps/web/src/app/api/auth/[...all]/route.ts
index 544457e2..edf0d0c2 100644
--- a/apps/web/src/app/api/auth/[...all]/route.ts
+++ b/apps/web/src/app/api/auth/[...all]/route.ts
@@ -1,4 +1,4 @@
-import { auth } from "@/lib/auth/server";

+import { auth } from "@/auth/server";

 import { toNextJsHandler } from "better-auth/next-js";

 

 export const { POST, GET } = toNextJsHandler(auth);

diff --git a/apps/web/src/app/api/feedback/route.ts b/apps/web/src/app/api/feedback/route.ts
index b13ec2bf..cd853eea 100644
--- a/apps/web/src/app/api/feedback/route.ts
+++ b/apps/web/src/app/api/feedback/route.ts
@@ -1,7 +1,7 @@
 import { type NextRequest, NextResponse } from "next/server";
 import { z } from "zod";
-import { checkRateLimit } from "@/lib/rate-limit";
-import { submitFeedback, MAX_MESSAGE_LENGTH } from "@/lib/feedback";
+import { checkRateLimit } from "@/auth/rate-limit";
+import { submitFeedback, MAX_MESSAGE_LENGTH } from "@/feedback";
 
 const submitSchema = z.object({
 	message: z
diff --git a/apps/web/src/app/api/sounds/search/route.ts b/apps/web/src/app/api/sounds/search/route.ts
index c4d065a9..aa7a1b60 100644
--- a/apps/web/src/app/api/sounds/search/route.ts
+++ b/apps/web/src/app/api/sounds/search/route.ts
@@ -1,7 +1,7 @@
-import { webEnv } from "@/lib/env/web";
+import { webEnv } from "@/env/web";
 import { type NextRequest, NextResponse } from "next/server";
 import { z } from "zod";
-import { checkRateLimit } from "@/lib/rate-limit";
+import { checkRateLimit } from "@/auth/rate-limit";
 
 const searchParamsSchema = z.object({
 	q: z.string().max(500, "Query too long").optional(),
diff --git a/apps/web/src/app/blog/[slug]/page.tsx b/apps/web/src/app/blog/[slug]/page.tsx
index b581de95..dba9b504 100644
--- a/apps/web/src/app/blog/[slug]/page.tsx
+++ b/apps/web/src/app/blog/[slug]/page.tsx
@@ -4,8 +4,8 @@ import { notFound } from "next/navigation";
 import { BasePage } from "@/app/base-page";

 import Prose from "@/components/ui/prose";

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

-import { getPosts, getSinglePost, processHtmlContent } from "@/lib/blog/query";

-import type { Author, Post } from "@/lib/blog/types";

+import { getPosts, getSinglePost, processHtmlContent } from "@/blog/query";

+import type { Author, Post } from "@/blog/types";

 

 type PageProps = {

 	params: Promise<{ slug: string }>;

diff --git a/apps/web/src/app/blog/page.tsx b/apps/web/src/app/blog/page.tsx
index 9f5a8972..b40bc2fc 100644
--- a/apps/web/src/app/blog/page.tsx
+++ b/apps/web/src/app/blog/page.tsx
@@ -2,8 +2,8 @@ import type { Metadata } from "next";
 import Link from "next/link";

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

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

-import { getPosts } from "@/lib/blog/query";

-import type { Post } from "@/lib/blog/types";

+import { getPosts } from "@/blog/query";

+import type { Post } from "@/blog/types";

 

 export const metadata: Metadata = {

 	title: "Blog - OpenCut",

diff --git a/apps/web/src/app/changelog/[version]/page.tsx b/apps/web/src/app/changelog/[version]/page.tsx
index f069832b..6c529ce1 100644
--- a/apps/web/src/app/changelog/[version]/page.tsx
+++ b/apps/web/src/app/changelog/[version]/page.tsx
@@ -3,15 +3,15 @@ import Link from "next/link";
 import { notFound } from "next/navigation";

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

 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";

-import { getReleaseByVersion, getSortedReleases } from "@/lib/changelog/utils";

+import { getReleaseByVersion, getSortedReleases } from "@/changelog/utils";

 import {

 	ReleaseArticle,

 	ReleaseMeta,

 	ReleaseTitle,

 	ReleaseDescription,

 	ReleaseChanges,

-} from "@/lib/changelog/components/release";

-import { CopyMarkdownButton } from "@/lib/changelog/components/copy-markdown-button";

+} from "@/changelog/components/release";

+import { CopyMarkdownButton } from "@/changelog/components/copy-markdown-button";

 

 type Props = { params: Promise<{ version: string }> };

 

diff --git a/apps/web/src/app/changelog/page.tsx b/apps/web/src/app/changelog/page.tsx
index 8440eaa2..25ae25db 100644
--- a/apps/web/src/app/changelog/page.tsx
+++ b/apps/web/src/app/changelog/page.tsx
@@ -4,14 +4,14 @@ import { Separator } from "@/components/ui/separator";
 import {
 	type Release as ReleaseType,
 	getSortedReleases,
-} from "@/lib/changelog/utils";
+} from "@/changelog/utils";
 import {
 	ReleaseArticle,
 	ReleaseMeta,
 	ReleaseTitle,
 	ReleaseDescription,
 	ReleaseChanges,
-} from "@/lib/changelog/components/release";
+} from "@/changelog/components/release";
 
 export const metadata: Metadata = {
 	title: "Changelog - OpenCut",
diff --git a/apps/web/src/app/contributors/page.tsx b/apps/web/src/app/contributors/page.tsx
index b15d9f27..f4d13732 100644
--- a/apps/web/src/app/contributors/page.tsx
+++ b/apps/web/src/app/contributors/page.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 import { GitHubContributeSection } from "@/components/gitHub-contribute-section";

 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

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

-import { EXTERNAL_TOOLS } from "@/lib/site/external-tools";

+import { EXTERNAL_TOOLS } from "@/site/external-tools";

 import { BasePage } from "../base-page";

 

 export const metadata: Metadata = {

diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx
index a3a7afa5..b3d40a37 100644
--- a/apps/web/src/app/editor/[project_id]/page.tsx
+++ b/apps/web/src/app/editor/[project_id]/page.tsx
@@ -8,21 +8,32 @@ import {
 } from "@/components/ui/resizable";
 import { AssetsPanel } from "@/components/editor/panels/assets";
 import { PropertiesPanel } from "@/components/editor/panels/properties";
-import { Timeline } from "@/components/editor/panels/timeline";
-import { PreviewPanel } from "@/components/editor/panels/preview";
+import { Timeline } from "@/timeline/components";
+import { PreviewPanel } from "@/preview/components";
 import { EditorHeader } from "@/components/editor/editor-header";
 import { EditorProvider } from "@/components/providers/editor-provider";
 import { Onboarding } from "@/components/editor/onboarding";
-import { MigrationDialog } from "@/components/editor/dialogs/migration-dialog";
-import { usePanelStore } from "@/stores/panel-store";
-import { usePasteMedia } from "@/hooks/use-paste-media";
+import { MigrationDialog } from "@/project/components/migration-dialog";
+import { usePanelStore } from "@/editor/panel-store";
+import { usePasteMedia } from "@/media/use-paste-media";
 import { MobileGate } from "@/components/editor/mobile-gate";
-import { useState } from "react";
-import { useEditor } from "@/hooks/use-editor";
+import { useMemo, useState } from "react";
+import { useEditor } from "@/editor/use-editor";
 import { Cancel01Icon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { Button } from "@/components/ui/button";
-import { ChangelogNotification } from "@/lib/changelog/components/changelog-notification";
+import { ChangelogNotification } from "@/changelog/components/changelog-notification";
+import {
+	createPreviewOverlayControl,
+	isPreviewOverlayVisible,
+	mergePreviewOverlaySources,
+} from "@/preview/overlays";
+import { usePreviewStore } from "@/preview/preview-store";
+import { getGuidePreviewOverlaySource } from "@/guides";
+import {
+	bookmarkNotesPreviewOverlay,
+	getBookmarkPreviewOverlaySource,
+} from "@/timeline/bookmarks/index";
 
 export default function Editor() {
 	const params = useParams();
@@ -70,6 +81,49 @@ function DegradedRendererBanner() {
 function EditorLayout() {
 	usePasteMedia();
 	const { panels, setPanel } = usePanelStore();
+	const activeScene = useEditor((editor) =>
+		editor.scenes.getActiveSceneOrNull(),
+	);
+	const currentTime = useEditor((editor) => editor.playback.getCurrentTime());
+	const activeGuide = usePreviewStore((state) => state.activeGuide);
+	const overlays = usePreviewStore((state) => state.overlays);
+	const setOverlayVisibility = usePreviewStore(
+		(state) => state.setOverlayVisibility,
+	);
+	const showBookmarkNotes = isPreviewOverlayVisible({
+		overlay: bookmarkNotesPreviewOverlay,
+		overlays,
+	});
+
+	const overlaySource = useMemo(
+		() =>
+			mergePreviewOverlaySources({
+				sources: [
+					getGuidePreviewOverlaySource({
+						guideId: activeGuide,
+					}),
+					activeScene
+						? getBookmarkPreviewOverlaySource({
+								bookmarks: activeScene.bookmarks,
+								time: currentTime,
+								isVisible: showBookmarkNotes,
+							})
+						: {
+								definitions: [bookmarkNotesPreviewOverlay],
+								instances: [],
+							},
+				],
+			}),
+		[activeGuide, activeScene, currentTime, showBookmarkNotes],
+	);
+
+	const overlayControls = useMemo(
+		() =>
+			overlaySource.definitions.map((overlay) =>
+				createPreviewOverlayControl({ overlay, overlays }),
+			),
+		[overlaySource.definitions, overlays],
+	);
 
 	return (
 		<ResizablePanelGroup
@@ -111,7 +165,11 @@ function EditorLayout() {
 						minSize={30}
 						className="min-h-0 min-w-0 flex-1"
 					>
-						<PreviewPanel />
+						<PreviewPanel
+							overlayControls={overlayControls}
+							overlayInstances={overlaySource.instances}
+							onOverlayVisibilityChange={setOverlayVisibility}
+						/>
 					</ResizablePanel>
 
 					<ResizableHandle withHandle />
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 6d4878c5..558ae538 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -2,11 +2,11 @@ import { ThemeProvider } from "next-themes";
 import Script from "next/script";
 import "./globals.css";
 import { Toaster } from "../components/ui/sonner";
-import { ChangelogNotification } from "@/lib/changelog/components/changelog-notification";
+import { ChangelogNotification } from "@/changelog/components/changelog-notification";
 import { TooltipProvider } from "../components/ui/tooltip";
 import { baseMetaData } from "./metadata";
 import { BotIdClient } from "botid/client";
-import { webEnv } from "@/lib/env/web";
+import { webEnv } from "@/env/web";
 import { Inter } from "next/font/google";
 
 const siteFont = Inter({ subsets: ["latin"] });
diff --git a/apps/web/src/app/metadata.ts b/apps/web/src/app/metadata.ts
index 06276baa..aa11c43e 100644
--- a/apps/web/src/app/metadata.ts
+++ b/apps/web/src/app/metadata.ts
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";

-import { SITE_INFO, SITE_URL } from "@/lib/site/brand";

+import { SITE_INFO, SITE_URL } from "@/site/brand";

 

 export const baseMetaData: Metadata = {

 	metadataBase: new URL(SITE_URL),

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 460e8bc3..6084a912 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -2,7 +2,7 @@ import { Hero } from "@/components/landing/hero";
 import { Header } from "@/components/header";

 import { Footer } from "@/components/footer";

 import type { Metadata } from "next";

-import { SITE_URL } from "@/lib/site/brand";

+import { SITE_URL } from "@/site/brand";

 

 export const metadata: Metadata = {

 	alternates: {

diff --git a/apps/web/src/app/privacy/page.tsx b/apps/web/src/app/privacy/page.tsx
index 4963e2ab..6362146e 100644
--- a/apps/web/src/app/privacy/page.tsx
+++ b/apps/web/src/app/privacy/page.tsx
@@ -7,7 +7,7 @@ import {
 	AccordionTrigger,
 } from "@/components/ui/accordion";
 import { Separator } from "@/components/ui/separator";
-import { SOCIAL_LINKS } from "@/lib/site/social";
+import { SOCIAL_LINKS } from "@/site/social";
 
 export const metadata: Metadata = {
 	title: "Privacy Policy - OpenCut",
diff --git a/apps/web/src/app/projects/page.tsx b/apps/web/src/app/projects/page.tsx
index e8b09291..c39c4fd9 100644
--- a/apps/web/src/app/projects/page.tsx
+++ b/apps/web/src/app/projects/page.tsx
@@ -7,20 +7,20 @@ import type { KeyboardEvent, MouseEvent } from "react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import type { EditorCore } from "@/core";
-import { MigrationDialog } from "@/components/editor/dialogs/migration-dialog";
-import { StoragePersistenceDialog } from "@/components/editor/dialogs/storage-persistence-dialog";
+import { MigrationDialog } from "@/project/components/migration-dialog";
+import { StoragePersistenceDialog } from "@/services/storage/components/storage-persistence-dialog";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
-import { useEditor } from "@/hooks/use-editor";
+import { useEditor } from "@/editor/use-editor";
 import { useProjectsStore } from "./store";
 import type {
 	TProjectMetadata,
 	TProjectSortKey,
 	TProjectSortOption,
-} from "@/lib/project/types";
+} from "@/project/types";
 import { formatTimecode, mediaTimeToSeconds } from "opencut-wasm";
 import { formatDate } from "@/utils/date";
 import { HugeiconsIcon } from "@hugeicons/react";
@@ -62,11 +62,11 @@ import {
 	DropdownMenuItem,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { DeleteProjectDialog } from "@/components/editor/dialogs/delete-project-dialog";
-import { ProjectInfoDialog } from "@/components/editor/dialogs/project-info-dialog";
-import { RenameProjectDialog } from "@/components/editor/dialogs/rename-project-dialog";
+import { DeleteProjectDialog } from "@/project/components/delete-project-dialog";
+import { ProjectInfoDialog } from "@/project/components/project-info-dialog";
+import { RenameProjectDialog } from "@/project/components/rename-project-dialog";
 import { cn } from "@/utils/ui";
-import { ChangelogNotification } from "@/lib/changelog/components/changelog-notification";
+import { ChangelogNotification } from "@/changelog/components/changelog-notification";
 const formatProjectDuration = ({
 	duration,
 }: {
diff --git a/apps/web/src/app/projects/store.ts b/apps/web/src/app/projects/store.ts
index 71f89b4a..82d2744e 100644
--- a/apps/web/src/app/projects/store.ts
+++ b/apps/web/src/app/projects/store.ts
@@ -1,6 +1,6 @@
 import { create } from "zustand";

 import { persist } from "zustand/middleware";

-import type { TProjectSortKey } from "@/lib/project/types";

+import type { TProjectSortKey } from "@/project/types";

 

 export type ProjectsViewMode = "grid" | "list";

 

diff --git a/apps/web/src/app/robots.ts b/apps/web/src/app/robots.ts
index 38f6f487..1b1ca865 100644
--- a/apps/web/src/app/robots.ts
+++ b/apps/web/src/app/robots.ts
@@ -1,5 +1,5 @@
 import type { MetadataRoute } from "next";

-import { SITE_URL } from "@/lib/site/brand";

+import { SITE_URL } from "@/site/brand";

 

 export default function robots(): MetadataRoute.Robots {

 	return {

diff --git a/apps/web/src/app/rss.xml/route.ts b/apps/web/src/app/rss.xml/route.ts
index 4dfccd59..d4e9570a 100644
--- a/apps/web/src/app/rss.xml/route.ts
+++ b/apps/web/src/app/rss.xml/route.ts
@@ -1,6 +1,6 @@
 import { Feed } from "feed";

-import { getPosts } from "@/lib/blog/query";

-import { SITE_INFO, SITE_URL } from "@/lib/site/brand";

+import { getPosts } from "@/blog/query";

+import { SITE_INFO, SITE_URL } from "@/site/brand";

 

 export async function GET() {

 	try {

diff --git a/apps/web/src/app/sitemap.ts b/apps/web/src/app/sitemap.ts
index 7b404642..73b4180f 100644
--- a/apps/web/src/app/sitemap.ts
+++ b/apps/web/src/app/sitemap.ts
@@ -1,5 +1,5 @@
-import { SITE_URL } from "@/lib/site/brand";

-import { getPosts } from "@/lib/blog/query";

+import { SITE_URL } from "@/site/brand";

+import { getPosts } from "@/blog/query";

 import type { MetadataRoute } from "next";

 

 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {

diff --git a/apps/web/src/app/sponsors/page.tsx b/apps/web/src/app/sponsors/page.tsx
index 0de78c85..510419f0 100644
--- a/apps/web/src/app/sponsors/page.tsx
+++ b/apps/web/src/app/sponsors/page.tsx
@@ -3,7 +3,7 @@ import Image from "next/image";
 import Link from "next/link";

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

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

-import { SPONSORS, type Sponsor } from "@/lib/site/sponsors";

+import { SPONSORS, type Sponsor } from "@/site/sponsors";

 import { HugeiconsIcon } from "@hugeicons/react";

 import { LinkSquare02Icon } from "@hugeicons/core-free-icons";

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

diff --git a/apps/web/src/app/terms/page.tsx b/apps/web/src/app/terms/page.tsx
index 73a6cce1..0845892c 100644
--- a/apps/web/src/app/terms/page.tsx
+++ b/apps/web/src/app/terms/page.tsx
@@ -7,7 +7,7 @@ import {
 	AccordionTrigger,
 } from "@/components/ui/accordion";
 import { Separator } from "@/components/ui/separator";
-import { SOCIAL_LINKS } from "@/lib/site/social";
+import { SOCIAL_LINKS } from "@/site/social";
 
 export const metadata: Metadata = {
 	title: "Terms of Service - OpenCut",