Add custom template save feature

package.json

@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.4.3",
     "@types/bun": "^1.3.14",
     "@types/node": "^25",

src/app/page.tsx

@@ -22,3 +22,7 @@ export default function Home() {
     </>
   );
 }
+    <main>
+      <VideoEditor />
+    </main>
+

src/components/CustomTemplateManager.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import {
+  getTemplates,
+  deleteTemplate,
+  renameTemplate,
+} from "@/lib/templateStorage";
+
+interface Props {
+  onApplyTemplate: (recipe: any) => void;
+}
+
+export default function CustomTemplateManager({
+  onApplyTemplate,
+}: Props) {
+  const [templates, setTemplates] = useState<any[]>([]);
+
+  const refreshTemplates = () => {
+    setTemplates(getTemplates());
+  };
+
+  useEffect(() => {
+    refreshTemplates();
+  }, []);
+
+  return (
+    <div className="space-y-3">
+      {templates.length === 0 && (
+        <p className="text-xs text-[var(--muted)]">
+          No saved templates
+        </p>
+      )}
+
+      {templates.map((template) => (
+        <div
+          key={template.id}
+          className="border border-[var(--border)] rounded-lg p-3"
+        >
+          <p className="text-sm font-medium mb-2">
+            {template.name}
+          </p>
+
+          <div className="flex gap-2 flex-wrap">
+            <button
+              onClick={() => onApplyTemplate(template.recipe)}
+              className="text-xs px-2 py-1 border rounded"
+            >
+              Apply
+            </button>
+
+            <button
+              onClick={() => {
+                const name = prompt(
+                  "Rename template",
+                  template.name
+                );
+
+                if (!name) return;
+
+                renameTemplate(template.id, name);
+                refreshTemplates();
+              }}
+              className="text-xs px-2 py-1 border rounded"
+            >
+              Rename
+            </button>
+
+            <button
+              onClick={() => {
+                deleteTemplate(template.id);
+                refreshTemplates();
+              }}
+              className="text-xs px-2 py-1 border rounded"
+            >
+              Delete
+            </button>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}