format

5 files changed, 216 insertions, 216 deletions

diff --git a/apps/web/src/components/editor/properties-panel/audio-properties.tsx b/apps/web/src/components/editor/properties-panel/audio-properties.tsx
index 384f0c5e..5e2a781f 100644
--- a/apps/web/src/components/editor/properties-panel/audio-properties.tsx
+++ b/apps/web/src/components/editor/properties-panel/audio-properties.tsx
@@ -1,5 +1,5 @@
-import { MediaElement } from "@/types/timeline";

-

-export function AudioProperties({ element }: { element: MediaElement }) {

-  return <div className="space-y-4 p-5">Audio properties</div>;

-}
\ No newline at end of file
+import { MediaElement } from "@/types/timeline";
+
+export function AudioProperties({ element }: { element: MediaElement }) {
+	return <div className="space-y-4 p-5">Audio properties</div>;
+}
diff --git a/apps/web/src/components/editor/properties-panel/index.tsx b/apps/web/src/components/editor/properties-panel/index.tsx
index 9e28850f..7d2845be 100644
--- a/apps/web/src/components/editor/properties-panel/index.tsx
+++ b/apps/web/src/components/editor/properties-panel/index.tsx
@@ -10,100 +10,100 @@ import { AudioProperties } from "./audio-properties";
 import { MediaProperties } from "./media-properties";
 import { TextProperties } from "./text-properties";
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
 } from "../../ui/select";
 import { FPS_PRESETS } from "@/constants/timeline-constants";
 
 export function PropertiesPanel() {
-  const { activeProject, updateProjectFps } = useProjectStore();
-  const { getDisplayName, canvasSize } = useAspectRatio();
-  const { selectedElements, tracks } = useTimelineStore();
-  const { mediaItems } = useMediaStore();
+	const { activeProject, updateProjectFps } = useProjectStore();
+	const { getDisplayName, canvasSize } = useAspectRatio();
+	const { selectedElements, tracks } = useTimelineStore();
+	const { mediaItems } = useMediaStore();
 
-  const handleFpsChange = (value: string) => {
-    const fps = parseFloat(value);
-    if (!isNaN(fps) && fps > 0) {
-      updateProjectFps(fps);
-    }
-  };
+	const handleFpsChange = (value: string) => {
+		const fps = parseFloat(value);
+		if (!isNaN(fps) && fps > 0) {
+			updateProjectFps(fps);
+		}
+	};
 
-  const emptyView = (
-    <div className="space-y-4 p-5">
-      {/* Media Properties */}
-      <div className="flex flex-col gap-3">
-        <PropertyItem label="Name:" value={activeProject?.name || ""} />
-        <PropertyItem label="Aspect ratio:" value={getDisplayName()} />
-        <PropertyItem
-          label="Resolution:"
-          value={`${canvasSize.width} × ${canvasSize.height}`}
-        />
-        <div className="flex justify-between items-center">
-          <Label className="text-xs text-muted-foreground">Frame rate:</Label>
-          <Select
-            value={(activeProject?.fps || 30).toString()}
-            onValueChange={handleFpsChange}
-          >
-            <SelectTrigger className="w-32 h-6 text-xs">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {FPS_PRESETS.map(({ value, label }) => (
-                <SelectItem key={value} value={value} className="text-xs">
-                  {label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-    </div>
-  );
+	const emptyView = (
+		<div className="space-y-4 p-5">
+			{/* Media Properties */}
+			<div className="flex flex-col gap-3">
+				<PropertyItem label="Name:" value={activeProject?.name || ""} />
+				<PropertyItem label="Aspect ratio:" value={getDisplayName()} />
+				<PropertyItem
+					label="Resolution:"
+					value={`${canvasSize.width} × ${canvasSize.height}`}
+				/>
+				<div className="flex justify-between items-center">
+					<Label className="text-xs text-muted-foreground">Frame rate:</Label>
+					<Select
+						value={(activeProject?.fps || 30).toString()}
+						onValueChange={handleFpsChange}
+					>
+						<SelectTrigger className="w-32 h-6 text-xs">
+							<SelectValue />
+						</SelectTrigger>
+						<SelectContent>
+							{FPS_PRESETS.map(({ value, label }) => (
+								<SelectItem key={value} value={value} className="text-xs">
+									{label}
+								</SelectItem>
+							))}
+						</SelectContent>
+					</Select>
+				</div>
+			</div>
+		</div>
+	);
 
-  return (
-    <ScrollArea className="h-full bg-panel rounded-sm">
-      {selectedElements.length > 0
-        ? selectedElements.map(({ trackId, elementId }) => {
-            const track = tracks.find((t) => t.id === trackId);
-            const element = track?.elements.find((e) => e.id === elementId);
+	return (
+		<ScrollArea className="h-full bg-panel rounded-sm">
+			{selectedElements.length > 0
+				? selectedElements.map(({ trackId, elementId }) => {
+						const track = tracks.find((t) => t.id === trackId);
+						const element = track?.elements.find((e) => e.id === elementId);
 
-            if (element?.type === "text") {
-              return (
-                <div key={elementId}>
-                  <TextProperties element={element} trackId={trackId} />
-                </div>
-              );
-            }
-            if (element?.type === "media") {
-              const mediaItem = mediaItems.find(
-                (item) => item.id === element.mediaId
-              );
+						if (element?.type === "text") {
+							return (
+								<div key={elementId}>
+									<TextProperties element={element} trackId={trackId} />
+								</div>
+							);
+						}
+						if (element?.type === "media") {
+							const mediaItem = mediaItems.find(
+								(item) => item.id === element.mediaId,
+							);
 
-              if (mediaItem?.type === "audio") {
-                return <AudioProperties element={element} />;
-              }
+							if (mediaItem?.type === "audio") {
+								return <AudioProperties element={element} />;
+							}
 
-              return (
-                <div key={elementId}>
-                  <MediaProperties element={element} />
-                </div>
-              );
-            }
-            return null;
-          })
-        : emptyView}
-    </ScrollArea>
-  );
+							return (
+								<div key={elementId}>
+									<MediaProperties element={element} />
+								</div>
+							);
+						}
+						return null;
+					})
+				: emptyView}
+		</ScrollArea>
+	);
 }
 
 function PropertyItem({ label, value }: { label: string; value: string }) {
-  return (
-    <div className="flex justify-between">
-      <Label className="text-xs text-muted-foreground">{label}</Label>
-      <span className="text-xs text-right">{value}</span>
-    </div>
-  );
+	return (
+		<div className="flex justify-between">
+			<Label className="text-xs text-muted-foreground">{label}</Label>
+			<span className="text-xs text-right">{value}</span>
+		</div>
+	);
 }
diff --git a/apps/web/src/components/editor/properties-panel/media-properties.tsx b/apps/web/src/components/editor/properties-panel/media-properties.tsx
index c2c514cf..fe2d448e 100644
--- a/apps/web/src/components/editor/properties-panel/media-properties.tsx
+++ b/apps/web/src/components/editor/properties-panel/media-properties.tsx
@@ -1,5 +1,5 @@
-import { MediaElement } from "@/types/timeline";

-

-export function MediaProperties({ element }: { element: MediaElement }) {

-  return <div className="space-y-4 p-5">Media properties</div>;

-}

+import { MediaElement } from "@/types/timeline";
+
+export function MediaProperties({ element }: { element: MediaElement }) {
+	return <div className="space-y-4 p-5">Media properties</div>;
+}
diff --git a/apps/web/src/components/editor/properties-panel/property-item.tsx b/apps/web/src/components/editor/properties-panel/property-item.tsx
index beb8c799..30f1b40c 100644
--- a/apps/web/src/components/editor/properties-panel/property-item.tsx
+++ b/apps/web/src/components/editor/properties-panel/property-item.tsx
@@ -1,47 +1,47 @@
-import { cn } from "@/lib/utils";

-

-interface PropertyItemProps {

-  direction?: "row" | "column";

-  children: React.ReactNode;

-  className?: string;

-}

-

-export function PropertyItem({

-  direction = "row",

-  children,

-  className,

-}: PropertyItemProps) {

-  return (

-    <div

-      className={cn(

-        "flex gap-2",

-        direction === "row"

-          ? "items-center justify-between gap-6"

-          : "flex-col gap-1",

-        className

-      )}

-    >

-      {children}

-    </div>

-  );

-}

-

-export function PropertyItemLabel({

-  children,

-  className,

-}: {

-  children: React.ReactNode;

-  className?: string;

-}) {

-  return <label className={cn("text-xs", className)}>{children}</label>;

-}

-

-export function PropertyItemValue({

-  children,

-  className,

-}: {

-  children: React.ReactNode;

-  className?: string;

-}) {

-  return <div className={cn("flex-1", className)}>{children}</div>;

-}

+import { cn } from "@/lib/utils";
+
+interface PropertyItemProps {
+	direction?: "row" | "column";
+	children: React.ReactNode;
+	className?: string;
+}
+
+export function PropertyItem({
+	direction = "row",
+	children,
+	className,
+}: PropertyItemProps) {
+	return (
+		<div
+			className={cn(
+				"flex gap-2",
+				direction === "row"
+					? "items-center justify-between gap-6"
+					: "flex-col gap-1",
+				className,
+			)}
+		>
+			{children}
+		</div>
+	);
+}
+
+export function PropertyItemLabel({
+	children,
+	className,
+}: {
+	children: React.ReactNode;
+	className?: string;
+}) {
+	return <label className={cn("text-xs", className)}>{children}</label>;
+}
+
+export function PropertyItemValue({
+	children,
+	className,
+}: {
+	children: React.ReactNode;
+	className?: string;
+}) {
+	return <div className={cn("flex-1", className)}>{children}</div>;
+}
diff --git a/apps/web/src/components/editor/properties-panel/text-properties.tsx b/apps/web/src/components/editor/properties-panel/text-properties.tsx
index e13dabc8..4d58752b 100644
--- a/apps/web/src/components/editor/properties-panel/text-properties.tsx
+++ b/apps/web/src/components/editor/properties-panel/text-properties.tsx
@@ -1,76 +1,76 @@
-import { Textarea } from "@/components/ui/textarea";

-import { FontPicker } from "@/components/ui/font-picker";

-import { FontFamily } from "@/constants/font-constants";

-import { TextElement } from "@/types/timeline";

-import { useTimelineStore } from "@/stores/timeline-store";

-import { Slider } from "@/components/ui/slider";

-import { Input } from "@/components/ui/input";

-import {

-  PropertyItem,

-  PropertyItemLabel,

-  PropertyItemValue,

-} from "./property-item";

-

-export function TextProperties({

-  element,

-  trackId,

-}: {

-  element: TextElement;

-  trackId: string;

-}) {

-  const { updateTextElement } = useTimelineStore();

-

-  return (

-    <div className="space-y-6 p-5">

-      <Textarea

-        placeholder="Name"

-        defaultValue={element.content}

-        className="min-h-[4.5rem] resize-none bg-background/50"

-        onChange={(e) =>

-          updateTextElement(trackId, element.id, { content: e.target.value })

-        }

-      />

-      <PropertyItem direction="row">

-        <PropertyItemLabel>Font</PropertyItemLabel>

-        <PropertyItemValue>

-          <FontPicker

-            defaultValue={element.fontFamily}

-            onValueChange={(value: FontFamily) =>

-              updateTextElement(trackId, element.id, { fontFamily: value })

-            }

-          />

-        </PropertyItemValue>

-      </PropertyItem>

-      <PropertyItem direction="column">

-        <PropertyItemLabel>Font size</PropertyItemLabel>

-        <PropertyItemValue>

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

-            <Slider

-              defaultValue={[element.fontSize]}

-              min={8}

-              max={300}

-              step={1}

-              onValueChange={([value]) =>

-                updateTextElement(trackId, element.id, { fontSize: value })

-              }

-              className="w-full"

-            />

-            <Input

-              type="number"

-              value={element.fontSize}

-              onChange={(e) =>

-                updateTextElement(trackId, element.id, {

-                  fontSize: parseInt(e.target.value),

-                })

-              }

-              className="w-12 !text-xs h-7 rounded-sm text-center

-               [appearance:textfield]

-               [&::-webkit-outer-spin-button]:appearance-none

-               [&::-webkit-inner-spin-button]:appearance-none"

-            />

-          </div>

-        </PropertyItemValue>

-      </PropertyItem>

-    </div>

-  );

-}

+import { Textarea } from "@/components/ui/textarea";
+import { FontPicker } from "@/components/ui/font-picker";
+import { FontFamily } from "@/constants/font-constants";
+import { TextElement } from "@/types/timeline";
+import { useTimelineStore } from "@/stores/timeline-store";
+import { Slider } from "@/components/ui/slider";
+import { Input } from "@/components/ui/input";
+import {
+	PropertyItem,
+	PropertyItemLabel,
+	PropertyItemValue,
+} from "./property-item";
+
+export function TextProperties({
+	element,
+	trackId,
+}: {
+	element: TextElement;
+	trackId: string;
+}) {
+	const { updateTextElement } = useTimelineStore();
+
+	return (
+		<div className="space-y-6 p-5">
+			<Textarea
+				placeholder="Name"
+				defaultValue={element.content}
+				className="min-h-[4.5rem] resize-none bg-background/50"
+				onChange={(e) =>
+					updateTextElement(trackId, element.id, { content: e.target.value })
+				}
+			/>
+			<PropertyItem direction="row">
+				<PropertyItemLabel>Font</PropertyItemLabel>
+				<PropertyItemValue>
+					<FontPicker
+						defaultValue={element.fontFamily}
+						onValueChange={(value: FontFamily) =>
+							updateTextElement(trackId, element.id, { fontFamily: value })
+						}
+					/>
+				</PropertyItemValue>
+			</PropertyItem>
+			<PropertyItem direction="column">
+				<PropertyItemLabel>Font size</PropertyItemLabel>
+				<PropertyItemValue>
+					<div className="flex items-center gap-2">
+						<Slider
+							defaultValue={[element.fontSize]}
+							min={8}
+							max={300}
+							step={1}
+							onValueChange={([value]) =>
+								updateTextElement(trackId, element.id, { fontSize: value })
+							}
+							className="w-full"
+						/>
+						<Input
+							type="number"
+							value={element.fontSize}
+							onChange={(e) =>
+								updateTextElement(trackId, element.id, {
+									fontSize: parseInt(e.target.value),
+								})
+							}
+							className="w-12 !text-xs h-7 rounded-sm text-center
+               [appearance:textfield]
+               [&::-webkit-outer-spin-button]:appearance-none
+               [&::-webkit-inner-spin-button]:appearance-none"
+						/>
+					</div>
+				</PropertyItemValue>
+			</PropertyItem>
+		</div>
+	);
+}