feat: masks, properties refactor, shaders, storage migrations, and more

1 files changed, 37 insertions, 26 deletions

diff --git a/apps/web/src/components/editor/export-button.tsx b/apps/web/src/components/editor/export-button.tsx
index ddf8308d..ec39e7e6 100644
--- a/apps/web/src/components/editor/export-button.tsx
+++ b/apps/web/src/components/editor/export-button.tsx
@@ -14,20 +14,24 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Progress } from "@/components/ui/progress";
 import { Checkbox } from "@/components/ui/checkbox";
 import { cn } from "@/utils/ui";
-import { getExportMimeType, getExportFileExtension, downloadBuffer } from "@/lib/export";
+import {
+	getExportMimeType,
+	getExportFileExtension,
+	downloadBuffer,
+} from "@/lib/export";
 import { Check, Copy, Download, RotateCcw } from "lucide-react";
 import {
 	EXPORT_FORMAT_VALUES,
 	EXPORT_QUALITY_VALUES,
 	type ExportFormat,
 	type ExportQuality,
-} from "@/types/export";
+} from "@/lib/export";
 import {
 	Section,
 	SectionContent,
 	SectionHeader,
 	SectionTitle,
-} from "@/components/editor/panels/properties/section";
+} from "@/components/section";
 import { useEditor } from "@/hooks/use-editor";
 import { DEFAULT_EXPORT_OPTIONS } from "@/constants/export-constants";
 
@@ -42,8 +46,8 @@ function isExportQuality(value: string): value is ExportQuality {
 export function ExportButton() {
 	const [isExportPopoverOpen, setIsExportPopoverOpen] = useState(false);
 	const editor = useEditor();
-
-	const hasProject = !!editor.project.getActiveOrNull();
+	const activeProject = useEditor((e) => e.project.getActiveOrNull());
+	const hasProject = !!activeProject;
 
 	const handlePopoverOpenChange = ({ open }: { open: boolean }) => {
 		if (!open) {
@@ -54,7 +58,10 @@ export function ExportButton() {
 	};
 
 	return (
-		<Popover open={isExportPopoverOpen} onOpenChange={(open) => handlePopoverOpenChange({ open })}>
+		<Popover
+			open={isExportPopoverOpen}
+			onOpenChange={(open) => handlePopoverOpenChange({ open })}
+		>
 			<PopoverTrigger asChild>
 				<button
 					type="button"
@@ -91,9 +98,9 @@ function ExportPopover({
 	onOpenChange: (open: boolean) => void;
 }) {
 	const editor = useEditor();
-	const activeProject = editor.project.getActive();
-	const { isExporting, progress, result: exportResult } =
-		editor.project.getExportState();
+	const activeProject = useEditor((e) => e.project.getActive());
+	const exportState = useEditor((e) => e.project.getExportState());
+	const { isExporting, progress, result: exportResult } = exportState;
 	const [format, setFormat] = useState<ExportFormat>(
 		DEFAULT_EXPORT_OPTIONS.format,
 	);
@@ -109,10 +116,10 @@ function ExportPopover({
 
 		const result = await editor.project.export({
 			options: {
-			format,
-			quality,
-			fps: activeProject.settings.fps,
-			includeAudio: shouldIncludeAudio,
+				format,
+				quality,
+				fps: activeProject.settings.fps,
+				includeAudio: shouldIncludeAudio,
 			},
 		});
 
@@ -156,7 +163,11 @@ function ExportPopover({
 						{!isExporting && (
 							<>
 								<div className="flex flex-col">
-									<Section collapsible defaultOpen={false} showTopBorder={false}>
+									<Section
+										collapsible
+										defaultOpen={false}
+										showTopBorder={false}
+									>
 										<SectionHeader>
 											<SectionTitle>Format</SectionTitle>
 										</SectionHeader>
@@ -228,10 +239,10 @@ function ExportPopover({
 											<div className="flex items-center space-x-2">
 												<Checkbox
 													id="include-audio"
-								checked={shouldIncludeAudio}
-												onCheckedChange={(checked) =>
-													setShouldIncludeAudio(!!checked)
-												}
+													checked={shouldIncludeAudio}
+													onCheckedChange={(checked) =>
+														setShouldIncludeAudio(!!checked)
+													}
 												/>
 												<Label htmlFor="include-audio">
 													Include audio in export
@@ -252,15 +263,15 @@ function ExportPopover({
 
 						{isExporting && (
 							<div className="space-y-4 p-3">
-							<div className="flex flex-col gap-2">
-								<div className="flex items-center justify-between text-center">
-									<p className="text-muted-foreground text-sm">
-										{Math.round(progress * 100)}%
-									</p>
-									<p className="text-muted-foreground text-sm">100%</p>
+								<div className="flex flex-col gap-2">
+									<div className="flex items-center justify-between text-center">
+										<p className="text-muted-foreground text-sm">
+											{Math.round(progress * 100)}%
+										</p>
+										<p className="text-muted-foreground text-sm">100%</p>
+									</div>
+									<Progress value={progress * 100} className="w-full" />
 								</div>
-								<Progress value={progress * 100} className="w-full" />
-							</div>
 
 								<Button
 									variant="outline"