refactor: move packages sub-folders into web app

1 files changed, 369 insertions, 369 deletions

diff --git a/apps/web/src/components/editor/panels/assets/views/settings/index.tsx b/apps/web/src/components/editor/panels/assets/views/settings/index.tsx
index 0578eeb7..1526a842 100644
--- a/apps/web/src/components/editor/panels/assets/views/settings/index.tsx
+++ b/apps/web/src/components/editor/panels/assets/views/settings/index.tsx
@@ -1,369 +1,369 @@
-"use client";

-

-import { useRef, useState } from "react";

-import { PanelView } from "@/components/editor/panels/assets/views/base-panel";

-import {

-	Select,

-	SelectContent,

-	SelectItem,

-	SelectTrigger,

-	SelectValue,

-} from "@/components/ui/select";

-import { FPS_PRESETS } from "@/constants/project-constants";

-import { useEditor } from "@/hooks/use-editor";

-import {

-	Section,

-	SectionContent,

-	SectionHeader,

-	SectionTitle,

-} from "@/components/section";

-import { BackgroundContent } from "./background";

-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

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

-import { NumberField } from "@/components/ui/number-field";

-import { useEditorStore } from "@/stores/editor-store";

-import { usePropertyDraft } from "@/components/editor/panels/properties/hooks/use-property-draft";

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

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

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

-import { dimensionToAspectRatio } from "@/utils/geometry";

-import { formatNumberForDisplay } from "@/utils/math";

-import { OcSquarePlusIcon } from "@opencut/ui/icons";

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

-

-type SettingsView = "project-info" | "background";

-

-const PRESET_LABELS: Record<string, string> = {

-	"1:1": "1:1",

-	"16:9": "16:9",

-	"9:16": "9:16",

-	"4:3": "4:3",

-};

-

-function areCanvasSizesEqual({

-	left,

-	right,

-}: {

-	left: TCanvasSize;

-	right: TCanvasSize;

-}) {

-	return left.width === right.width && left.height === right.height;

-}

-

-function formatCanvasDimension({ value }: { value: number }) {

-	return formatNumberForDisplay({ value, maxFractionDigits: 0 });

-}

-

-function parseCanvasDimension({ input }: { input: string }): number | null {

-	const trimmed = input.trim();

-	if (!trimmed) return null;

-

-	const parsed = Number(trimmed);

-	if (!Number.isFinite(parsed)) return null;

-

-	const rounded = Math.round(parsed);

-	return rounded > 0 ? rounded : null;

-}

-

-function useCanvasDimensionDraft({

-	value,

-	onCommit,

-}: {

-	value: number;

-	onCommit: (value: number) => void;

-}) {

-	const pendingValueRef = useRef(value);

-	const syncedValueRef = useRef(value);

-

-	if (syncedValueRef.current !== value) {

-		syncedValueRef.current = value;

-		pendingValueRef.current = value;

-	}

-

-	return usePropertyDraft({

-		displayValue: formatCanvasDimension({ value }),

-		parse: (input) => parseCanvasDimension({ input }),

-		onPreview: (nextValue) => {

-			pendingValueRef.current = nextValue;

-		},

-		onCommit: () => {

-			if (pendingValueRef.current !== value) {

-				onCommit(pendingValueRef.current);

-			}

-		},

-	});

-}

-

-export function SettingsView() {

-	const [view, setView] = useState<SettingsView>("project-info");

-	const editor = useEditor();

-	const activeProject = useEditor((e) => e.project.getActive());

-	const { canvasPresets } = useEditorStore();

-	const currentCanvasSize = activeProject.settings.canvasSize;

-	const canvasSizeMode = activeProject.settings.canvasSizeMode ?? "preset";

-	const lastCustomCanvasSize =

-		activeProject.settings.lastCustomCanvasSize ?? null;

-

-	const presetItems = canvasPresets.map((preset, index) => {

-		const ratio = dimensionToAspectRatio(preset);

-		return {

-			id: index.toString(),

-			label: PRESET_LABELS[ratio] ?? ratio,

-			ratio,

-			canvasSize: preset,

-		};

-	});

-

-	const selectedPresetId = canvasSizeMode === "preset"

-		? (presetItems.find((preset) =>

-				areCanvasSizesEqual({

-					left: preset.canvasSize,

-					right: currentCanvasSize,

-				}),

-			)?.id ?? null)

-		: null;

-

-	const updateCustomCanvasSize = ({

-		canvasSize,

-	}: {

-		canvasSize: TCanvasSize;

-	}) => {

-		const shouldUpdateCanvasSize = !areCanvasSizesEqual({

-			left: canvasSize,

-			right: currentCanvasSize,

-		});

-		const shouldUpdateLastCustomCanvasSize =

-			lastCustomCanvasSize === null ||

-			!areCanvasSizesEqual({

-				left: canvasSize,

-				right: lastCustomCanvasSize,

-			});

-		const shouldUpdateCanvasSizeMode = canvasSizeMode !== "custom";

-

-		if (

-			!shouldUpdateCanvasSize &&

-			!shouldUpdateLastCustomCanvasSize &&

-			!shouldUpdateCanvasSizeMode

-		) {

-			return;

-		}

-

-		editor.project.updateSettings({

-			settings: {

-				...(shouldUpdateCanvasSize ? { canvasSize } : {}),

-				...(shouldUpdateCanvasSizeMode

-					? { canvasSizeMode: "custom" as const }

-					: {}),

-				lastCustomCanvasSize: canvasSize,

-			},

-		});

-	};

-

-	const selectPresetCanvasSize = ({

-		canvasSize,

-	}: {

-		canvasSize: TCanvasSize;

-	}) => {

-		const shouldUpdateCanvasSize = !areCanvasSizesEqual({

-			left: canvasSize,

-			right: currentCanvasSize,

-		});

-		const shouldUpdateCanvasSizeMode = canvasSizeMode !== "preset";

-

-		if (!shouldUpdateCanvasSize && !shouldUpdateCanvasSizeMode) return;

-

-		editor.project.updateSettings({

-			settings: {

-				...(shouldUpdateCanvasSize ? { canvasSize } : {}),

-				...(shouldUpdateCanvasSizeMode

-					? { canvasSizeMode: "preset" as const }

-					: {}),

-			},

-		});

-	};

-

-	const selectCustomCanvasSize = () => {

-		updateCustomCanvasSize({

-			canvasSize: lastCustomCanvasSize ?? currentCanvasSize,

-		});

-	};

-

-	const widthDraft = useCanvasDimensionDraft({

-		value: currentCanvasSize.width,

-		onCommit: (width) =>

-			updateCustomCanvasSize({

-				canvasSize: { width, height: currentCanvasSize.height },

-			}),

-	});

-

-	const heightDraft = useCanvasDimensionDraft({

-		value: currentCanvasSize.height,

-		onCommit: (height) =>

-			updateCustomCanvasSize({

-				canvasSize: { width: currentCanvasSize.width, height },

-			}),

-	});

-

-	const isCustomSelected = canvasSizeMode === "custom";

-

-	return (

-		<PanelView

-			contentClassName="px-0"

-			scrollClassName="pt-0"

-			actions={

-				<Tabs value={view} onValueChange={(v) => setView(v as SettingsView)}>

-					<TabsList>

-						<TabsTrigger value="project-info">Project info</TabsTrigger>

-						<TabsTrigger value="background">Background</TabsTrigger>

-					</TabsList>

-				</Tabs>

-			}

-		>

-			{view === "project-info" && (

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

-					<Section showTopBorder={false}>

-						<SectionHeader>

-							<SectionTitle className="flex-1">Name</SectionTitle>

-							<span className="text-sm truncate">

-								{activeProject.metadata.name}

-							</span>

-						</SectionHeader>

-					</Section>

-					<Section showTopBorder={false}>

-						<SectionHeader className="justify-between">

-							<SectionTitle className="flex-1">Frame rate</SectionTitle>

-							<Select

-								value={activeProject.settings.fps.toString()}

-								onValueChange={(value) => {

-									const fps = parseFloat(value);

-									editor.project.updateSettings({ settings: { fps } });

-								}}

-							>

-								<SelectTrigger className="bg-transparent border-none p-1 h-auto">

-									<SelectValue placeholder="Select a frame rate" />

-								</SelectTrigger>

-								<SelectContent>

-									{FPS_PRESETS.map((preset) => (

-										<SelectItem key={preset.value} value={preset.value}>

-											{preset.label}

-										</SelectItem>

-									))}

-								</SelectContent>

-							</Select>

-						</SectionHeader>

-					</Section>

-					<Section

-						showTopBorder={false}

-						collapsible

-						sectionKey="settings:aspect-ratio"

-					>

-						<SectionHeader>

-							<SectionTitle className="flex-1">Aspect ratio</SectionTitle>

-						</SectionHeader>

-						<SectionContent className="px-2 flex flex-col gap-1 pb-2">

-							{presetItems.map((preset) => (

-								<AspectRatioItem

-									key={preset.id}

-									label={preset.label}

-									previewIcon={<AspectRatioPreview ratio={preset.ratio} />}

-									isSelected={selectedPresetId === preset.id}

-									onClick={() => {

-										selectPresetCanvasSize({

-											canvasSize: preset.canvasSize,

-										});

-									}}

-								/>

-							))}

-							<div className="pb-2">

-								<AspectRatioItem

-									key="custom"

-									label="Custom"

-									previewIcon={<OcSquarePlusIcon />}

-									isSelected={isCustomSelected}

-									onClick={selectCustomCanvasSize}

-									uiOptions={

-										<div className=" flex items-center gap-2 text-foreground">

-											<NumberField

-												value={widthDraft.displayValue}

-												className="w-full"

-												aria-label="Canvas width"

-												onFocus={widthDraft.onFocus}

-												onChange={widthDraft.onChange}

-												onBlur={widthDraft.onBlur}

-											/>

-											<NumberField

-												value={heightDraft.displayValue}

-												className="w-full"

-												aria-label="Canvas height"

-												onFocus={heightDraft.onFocus}

-												onChange={heightDraft.onChange}

-												onBlur={heightDraft.onBlur}

-											/>

-										</div>

-									}

-								/>

-							</div>

-						</SectionContent>

-					</Section>

-				</div>

-			)}

-			{view === "background" && <BackgroundContent />}

-		</PanelView>

-	);

-}

-

-function AspectRatioItem({

-	label,

-	previewIcon,

-	isSelected,

-	onClick,

-	uiOptions,

-}: {

-	label: string;

-	previewIcon: React.ReactNode;

-	isSelected: boolean;

-	onClick: () => void;

-	uiOptions?: React.ReactNode;

-}) {

-	return (

-		<Button

-			variant={isSelected ? "secondary" : "ghost"}

-			className={cn(

-				"px-2 py-0 flex flex-col h-fit w-full",

-				!isSelected && "border border-transparent opacity-75!",

-			)}

-			onClick={onClick}

-		>

-			<div className="w-full flex justify-between items-center h-8">

-				<div className="flex-1 flex items-center gap-2">

-					<div className="flex items-center justify-center size-5">

-						{previewIcon}

-					</div>

-					<span className="text-sm truncate">{label}</span>

-				</div>

-				<div>

-					{isSelected && <HugeiconsIcon icon={Tick02Icon} className="size-4" />}

-				</div>

-			</div>

-			{uiOptions && isSelected && (

-				<div className="w-full pb-2">{uiOptions}</div>

-			)}

-		</Button>

-	);

-}

-

-function AspectRatioPreview({ ratio }: { ratio?: string }) {

-	if (!ratio) return null;

-

-	const [w, h] = ratio.split(":").map(Number);

-	const maxSize = 16;

-	const width = w >= h ? maxSize : (w / h) * maxSize;

-	const height = h >= w ? maxSize : (h / w) * maxSize;

-

-	return (

-		<div

-			style={{ width, height, borderWidth: 1.5 }}

-			className="rounded-xs border-current opacity-60"

-		/>

-	);

-}

+"use client";
+
+import { useRef, useState } from "react";
+import { PanelView } from "@/components/editor/panels/assets/views/base-panel";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { FPS_PRESETS } from "@/constants/project-constants";
+import { useEditor } from "@/hooks/use-editor";
+import {
+	Section,
+	SectionContent,
+	SectionHeader,
+	SectionTitle,
+} from "@/components/section";
+import { BackgroundContent } from "./background";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { NumberField } from "@/components/ui/number-field";
+import { useEditorStore } from "@/stores/editor-store";
+import { usePropertyDraft } from "@/components/editor/panels/properties/hooks/use-property-draft";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Tick02Icon } from "@hugeicons/core-free-icons";
+import { cn } from "@/utils/ui";
+import { dimensionToAspectRatio } from "@/utils/geometry";
+import { formatNumberForDisplay } from "@/utils/math";
+import { OcSquarePlusIcon } from "@/components/icons";
+import type { TCanvasSize } from "@/lib/project/types";
+
+type SettingsView = "project-info" | "background";
+
+const PRESET_LABELS: Record<string, string> = {
+	"1:1": "1:1",
+	"16:9": "16:9",
+	"9:16": "9:16",
+	"4:3": "4:3",
+};
+
+function areCanvasSizesEqual({
+	left,
+	right,
+}: {
+	left: TCanvasSize;
+	right: TCanvasSize;
+}) {
+	return left.width === right.width && left.height === right.height;
+}
+
+function formatCanvasDimension({ value }: { value: number }) {
+	return formatNumberForDisplay({ value, maxFractionDigits: 0 });
+}
+
+function parseCanvasDimension({ input }: { input: string }): number | null {
+	const trimmed = input.trim();
+	if (!trimmed) return null;
+
+	const parsed = Number(trimmed);
+	if (!Number.isFinite(parsed)) return null;
+
+	const rounded = Math.round(parsed);
+	return rounded > 0 ? rounded : null;
+}
+
+function useCanvasDimensionDraft({
+	value,
+	onCommit,
+}: {
+	value: number;
+	onCommit: (value: number) => void;
+}) {
+	const pendingValueRef = useRef(value);
+	const syncedValueRef = useRef(value);
+
+	if (syncedValueRef.current !== value) {
+		syncedValueRef.current = value;
+		pendingValueRef.current = value;
+	}
+
+	return usePropertyDraft({
+		displayValue: formatCanvasDimension({ value }),
+		parse: (input) => parseCanvasDimension({ input }),
+		onPreview: (nextValue) => {
+			pendingValueRef.current = nextValue;
+		},
+		onCommit: () => {
+			if (pendingValueRef.current !== value) {
+				onCommit(pendingValueRef.current);
+			}
+		},
+	});
+}
+
+export function SettingsView() {
+	const [view, setView] = useState<SettingsView>("project-info");
+	const editor = useEditor();
+	const activeProject = useEditor((e) => e.project.getActive());
+	const { canvasPresets } = useEditorStore();
+	const currentCanvasSize = activeProject.settings.canvasSize;
+	const canvasSizeMode = activeProject.settings.canvasSizeMode ?? "preset";
+	const lastCustomCanvasSize =
+		activeProject.settings.lastCustomCanvasSize ?? null;
+
+	const presetItems = canvasPresets.map((preset, index) => {
+		const ratio = dimensionToAspectRatio(preset);
+		return {
+			id: index.toString(),
+			label: PRESET_LABELS[ratio] ?? ratio,
+			ratio,
+			canvasSize: preset,
+		};
+	});
+
+	const selectedPresetId = canvasSizeMode === "preset"
+		? (presetItems.find((preset) =>
+				areCanvasSizesEqual({
+					left: preset.canvasSize,
+					right: currentCanvasSize,
+				}),
+			)?.id ?? null)
+		: null;
+
+	const updateCustomCanvasSize = ({
+		canvasSize,
+	}: {
+		canvasSize: TCanvasSize;
+	}) => {
+		const shouldUpdateCanvasSize = !areCanvasSizesEqual({
+			left: canvasSize,
+			right: currentCanvasSize,
+		});
+		const shouldUpdateLastCustomCanvasSize =
+			lastCustomCanvasSize === null ||
+			!areCanvasSizesEqual({
+				left: canvasSize,
+				right: lastCustomCanvasSize,
+			});
+		const shouldUpdateCanvasSizeMode = canvasSizeMode !== "custom";
+
+		if (
+			!shouldUpdateCanvasSize &&
+			!shouldUpdateLastCustomCanvasSize &&
+			!shouldUpdateCanvasSizeMode
+		) {
+			return;
+		}
+
+		editor.project.updateSettings({
+			settings: {
+				...(shouldUpdateCanvasSize ? { canvasSize } : {}),
+				...(shouldUpdateCanvasSizeMode
+					? { canvasSizeMode: "custom" as const }
+					: {}),
+				lastCustomCanvasSize: canvasSize,
+			},
+		});
+	};
+
+	const selectPresetCanvasSize = ({
+		canvasSize,
+	}: {
+		canvasSize: TCanvasSize;
+	}) => {
+		const shouldUpdateCanvasSize = !areCanvasSizesEqual({
+			left: canvasSize,
+			right: currentCanvasSize,
+		});
+		const shouldUpdateCanvasSizeMode = canvasSizeMode !== "preset";
+
+		if (!shouldUpdateCanvasSize && !shouldUpdateCanvasSizeMode) return;
+
+		editor.project.updateSettings({
+			settings: {
+				...(shouldUpdateCanvasSize ? { canvasSize } : {}),
+				...(shouldUpdateCanvasSizeMode
+					? { canvasSizeMode: "preset" as const }
+					: {}),
+			},
+		});
+	};
+
+	const selectCustomCanvasSize = () => {
+		updateCustomCanvasSize({
+			canvasSize: lastCustomCanvasSize ?? currentCanvasSize,
+		});
+	};
+
+	const widthDraft = useCanvasDimensionDraft({
+		value: currentCanvasSize.width,
+		onCommit: (width) =>
+			updateCustomCanvasSize({
+				canvasSize: { width, height: currentCanvasSize.height },
+			}),
+	});
+
+	const heightDraft = useCanvasDimensionDraft({
+		value: currentCanvasSize.height,
+		onCommit: (height) =>
+			updateCustomCanvasSize({
+				canvasSize: { width: currentCanvasSize.width, height },
+			}),
+	});
+
+	const isCustomSelected = canvasSizeMode === "custom";
+
+	return (
+		<PanelView
+			contentClassName="px-0"
+			scrollClassName="pt-0"
+			actions={
+				<Tabs value={view} onValueChange={(v) => setView(v as SettingsView)}>
+					<TabsList>
+						<TabsTrigger value="project-info">Project info</TabsTrigger>
+						<TabsTrigger value="background">Background</TabsTrigger>
+					</TabsList>
+				</Tabs>
+			}
+		>
+			{view === "project-info" && (
+				<div className="flex flex-col">
+					<Section showTopBorder={false}>
+						<SectionHeader>
+							<SectionTitle className="flex-1">Name</SectionTitle>
+							<span className="text-sm truncate">
+								{activeProject.metadata.name}
+							</span>
+						</SectionHeader>
+					</Section>
+					<Section showTopBorder={false}>
+						<SectionHeader className="justify-between">
+							<SectionTitle className="flex-1">Frame rate</SectionTitle>
+							<Select
+								value={activeProject.settings.fps.toString()}
+								onValueChange={(value) => {
+									const fps = parseFloat(value);
+									editor.project.updateSettings({ settings: { fps } });
+								}}
+							>
+								<SelectTrigger className="bg-transparent border-none p-1 h-auto">
+									<SelectValue placeholder="Select a frame rate" />
+								</SelectTrigger>
+								<SelectContent>
+									{FPS_PRESETS.map((preset) => (
+										<SelectItem key={preset.value} value={preset.value}>
+											{preset.label}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+						</SectionHeader>
+					</Section>
+					<Section
+						showTopBorder={false}
+						collapsible
+						sectionKey="settings:aspect-ratio"
+					>
+						<SectionHeader>
+							<SectionTitle className="flex-1">Aspect ratio</SectionTitle>
+						</SectionHeader>
+						<SectionContent className="px-2 flex flex-col gap-1 pb-2">
+							{presetItems.map((preset) => (
+								<AspectRatioItem
+									key={preset.id}
+									label={preset.label}
+									previewIcon={<AspectRatioPreview ratio={preset.ratio} />}
+									isSelected={selectedPresetId === preset.id}
+									onClick={() => {
+										selectPresetCanvasSize({
+											canvasSize: preset.canvasSize,
+										});
+									}}
+								/>
+							))}
+							<div className="pb-2">
+								<AspectRatioItem
+									key="custom"
+									label="Custom"
+									previewIcon={<OcSquarePlusIcon />}
+									isSelected={isCustomSelected}
+									onClick={selectCustomCanvasSize}
+									uiOptions={
+										<div className=" flex items-center gap-2 text-foreground">
+											<NumberField
+												value={widthDraft.displayValue}
+												className="w-full"
+												aria-label="Canvas width"
+												onFocus={widthDraft.onFocus}
+												onChange={widthDraft.onChange}
+												onBlur={widthDraft.onBlur}
+											/>
+											<NumberField
+												value={heightDraft.displayValue}
+												className="w-full"
+												aria-label="Canvas height"
+												onFocus={heightDraft.onFocus}
+												onChange={heightDraft.onChange}
+												onBlur={heightDraft.onBlur}
+											/>
+										</div>
+									}
+								/>
+							</div>
+						</SectionContent>
+					</Section>
+				</div>
+			)}
+			{view === "background" && <BackgroundContent />}
+		</PanelView>
+	);
+}
+
+function AspectRatioItem({
+	label,
+	previewIcon,
+	isSelected,
+	onClick,
+	uiOptions,
+}: {
+	label: string;
+	previewIcon: React.ReactNode;
+	isSelected: boolean;
+	onClick: () => void;
+	uiOptions?: React.ReactNode;
+}) {
+	return (
+		<Button
+			variant={isSelected ? "secondary" : "ghost"}
+			className={cn(
+				"px-2 py-0 flex flex-col h-fit w-full",
+				!isSelected && "border border-transparent opacity-75!",
+			)}
+			onClick={onClick}
+		>
+			<div className="w-full flex justify-between items-center h-8">
+				<div className="flex-1 flex items-center gap-2">
+					<div className="flex items-center justify-center size-5">
+						{previewIcon}
+					</div>
+					<span className="text-sm truncate">{label}</span>
+				</div>
+				<div>
+					{isSelected && <HugeiconsIcon icon={Tick02Icon} className="size-4" />}
+				</div>
+			</div>
+			{uiOptions && isSelected && (
+				<div className="w-full pb-2">{uiOptions}</div>
+			)}
+		</Button>
+	);
+}
+
+function AspectRatioPreview({ ratio }: { ratio?: string }) {
+	if (!ratio) return null;
+
+	const [w, h] = ratio.split(":").map(Number);
+	const maxSize = 16;
+	const width = w >= h ? maxSize : (w / h) * maxSize;
+	const height = h >= w ? maxSize : (h / w) * maxSize;
+
+	return (
+		<div
+			style={{ width, height, borderWidth: 1.5 }}
+			className="rounded-xs border-current opacity-60"
+		/>
+	);
+}