From 2217bfde6c8e70d814b7c7d9ba1712fef354302f Mon Sep 17 00:00:00 2001
From: Abhishekucs <abhishekucskumar@gmail.com>
Date: Fri, 3 Apr 2026 09:09:06 +0530
Subject: [PATCH 1/8] feat: add Studio page for AI image and video generation

Protected creative workspace with prompt bar, image/video mode switching,
contextual settings panels, and mock generation flow. Auth-gated with
redirect to sign-in for unauthenticated users.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/studio/page.tsx                      |   11 +
 app/studio/studio-page.tsx               |   37 +
 components/conditional-layout.tsx        |    5 +-
 components/studio/frame-upload.tsx       |   58 +
 components/studio/generation-display.tsx |   66 +
 components/studio/generation-loading.tsx |   40 +
 components/studio/image-settings.tsx     |   90 +
 components/studio/mode-switcher.tsx      |   35 +
 components/studio/prompt-input.tsx       |   56 +
 components/studio/studio-canvas.tsx      |   35 +
 components/studio/studio-prompt-bar.tsx  |   56 +
 components/studio/video-settings.tsx     |   82 +
 components/ui/select.tsx                 |  190 +++
 components/ui/slider.tsx                 |   63 +
 components/ui/textarea.tsx               |   18 +
 components/ui/toggle-group.tsx           |   83 +
 components/ui/toggle.tsx                 |   47 +
 package-lock.json                        | 1912 ++++++++++++++++++++--
 package.json                             |    1 +
 store/useStudioStore.ts                  |  132 ++
 types/studio.ts                          |   33 +
 21 files changed, 2952 insertions(+), 98 deletions(-)
 create mode 100644 app/studio/page.tsx
 create mode 100644 app/studio/studio-page.tsx
 create mode 100644 components/studio/frame-upload.tsx
 create mode 100644 components/studio/generation-display.tsx
 create mode 100644 components/studio/generation-loading.tsx
 create mode 100644 components/studio/image-settings.tsx
 create mode 100644 components/studio/mode-switcher.tsx
 create mode 100644 components/studio/prompt-input.tsx
 create mode 100644 components/studio/studio-canvas.tsx
 create mode 100644 components/studio/studio-prompt-bar.tsx
 create mode 100644 components/studio/video-settings.tsx
 create mode 100644 components/ui/select.tsx
 create mode 100644 components/ui/slider.tsx
 create mode 100644 components/ui/textarea.tsx
 create mode 100644 components/ui/toggle-group.tsx
 create mode 100644 components/ui/toggle.tsx
 create mode 100644 store/useStudioStore.ts
 create mode 100644 types/studio.ts

diff --git a/app/studio/page.tsx b/app/studio/page.tsx
new file mode 100644
index 0000000..a0934c5
--- /dev/null
+++ b/app/studio/page.tsx
@@ -0,0 +1,11 @@
+import type { Metadata } from "next";
+import StudioPage from "./studio-page";
+
+export const metadata: Metadata = {
+  title: "Studio | Invook",
+  description: "Create AI-generated images and videos with Invook Studio",
+};
+
+export default function Studio() {
+  return <StudioPage />;
+}
diff --git a/app/studio/studio-page.tsx b/app/studio/studio-page.tsx
new file mode 100644
index 0000000..d5df571
--- /dev/null
+++ b/app/studio/studio-page.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useAuthStore } from "@/store/useAuthStore";
+import { StudioCanvas } from "@/components/studio/studio-canvas";
+import { StudioPromptBar } from "@/components/studio/studio-prompt-bar";
+
+export default function StudioPage() {
+  const { isAuthenticated, isLoading } = useAuthStore();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      router.push(`/sign-in?redirect=${encodeURIComponent("/studio")}`);
+    }
+  }, [isLoading, isAuthenticated, router]);
+
+  if (isLoading) {
+    return (
+      <div className="h-screen flex items-center justify-center bg-background">
+        <div className="h-8 w-8 rounded-full border-2 border-foreground/20 border-t-foreground animate-spin" />
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <div className="h-screen flex flex-col bg-background overflow-hidden">
+      <StudioCanvas />
+      <StudioPromptBar />
+    </div>
+  );
+}
diff --git a/components/conditional-layout.tsx b/components/conditional-layout.tsx
index 39024d4..e93ed65 100644
--- a/components/conditional-layout.tsx
+++ b/components/conditional-layout.tsx
@@ -13,12 +13,13 @@ export function ConditionalLayout({
   const isAuthPage = pathname?.startsWith("/auth") || pathname === "/sign-in" || pathname === "/sign-up";
   const isExplorePage = pathname?.startsWith("/explore");
   const isSharePage = pathname?.startsWith("/share");
+  const isStudioPage = pathname?.startsWith("/studio");
 
   return (
     <>
-      {!isAuthPage && !isExplorePage && !isSharePage && <Navigation />}
+      {!isAuthPage && !isExplorePage && !isSharePage && !isStudioPage && <Navigation />}
       {children}
-      {!isAuthPage && !isSharePage && <Footer />}
+      {!isAuthPage && !isSharePage && !isStudioPage && <Footer />}
     </>
   );
 }
\ No newline at end of file
diff --git a/components/studio/frame-upload.tsx b/components/studio/frame-upload.tsx
new file mode 100644
index 0000000..a0c8a83
--- /dev/null
+++ b/components/studio/frame-upload.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { useRef } from "react";
+import { ImagePlus, X } from "lucide-react";
+import Image from "next/image";
+import { cn } from "@/lib/utils";
+
+interface FrameUploadProps {
+  label: string;
+  preview: string | null;
+  onUpload: (file: File | null) => void;
+}
+
+export function FrameUpload({ label, preview, onUpload }: FrameUploadProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <div className="flex items-center gap-2">
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/*"
+        className="hidden"
+        onChange={(e) => {
+          const file = e.target.files?.[0] ?? null;
+          onUpload(file);
+          e.target.value = "";
+        }}
+      />
+      <button
+        onClick={() => inputRef.current?.click()}
+        className={cn(
+          "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors border cursor-pointer",
+          preview
+            ? "border-[#F54E00]/30 bg-[#F54E00]/5 text-[#F54E00]"
+            : "border-border/50 bg-secondary/40 text-foreground/60 hover:text-foreground/80"
+        )}
+      >
+        {preview ? (
+          <div className="relative h-5 w-5 rounded overflow-hidden">
+            <Image src={preview} alt={label} fill className="object-cover" unoptimized />
+          </div>
+        ) : (
+          <ImagePlus className="h-3.5 w-3.5" />
+        )}
+        <span className="hidden sm:inline">{label}</span>
+      </button>
+      {preview && (
+        <button
+          onClick={() => onUpload(null)}
+          className="p-0.5 rounded-full text-foreground/40 hover:text-foreground/70 transition-colors cursor-pointer"
+        >
+          <X className="h-3 w-3" />
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/components/studio/generation-display.tsx b/components/studio/generation-display.tsx
new file mode 100644
index 0000000..32b7b83
--- /dev/null
+++ b/components/studio/generation-display.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Image from "next/image";
+import type { GenerationResult } from "@/types/studio";
+import { cn } from "@/lib/utils";
+
+interface GenerationDisplayProps {
+  result: GenerationResult;
+}
+
+export function GenerationDisplay({ result }: GenerationDisplayProps) {
+  const isSingle = result.urls.length === 1;
+
+  if (result.type === "video") {
+    return (
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        exit={{ opacity: 0 }}
+        transition={{ duration: 0.5 }}
+        className="w-full max-w-3xl mx-auto"
+      >
+        <div className="relative aspect-video rounded-xl overflow-hidden bg-secondary shadow-lg">
+          <video
+            src={result.urls[0]}
+            controls
+            className="w-full h-full object-cover"
+            poster={result.urls[0]}
+          />
+        </div>
+      </motion.div>
+    );
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.95 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.5 }}
+      className={cn(
+        "w-full max-w-3xl mx-auto",
+        isSingle ? "flex justify-center" : "grid grid-cols-2 gap-3"
+      )}
+    >
+      {result.urls.map((url, i) => (
+        <div
+          key={i}
+          className={cn(
+            "relative overflow-hidden rounded-xl bg-secondary shadow-lg",
+            isSingle ? "w-full max-w-lg aspect-square" : "aspect-square"
+          )}
+        >
+          <Image
+            src={url}
+            alt={`Generated image ${i + 1}`}
+            fill
+            className="object-cover"
+            unoptimized
+          />
+        </div>
+      ))}
+    </motion.div>
+  );
+}
diff --git a/components/studio/generation-loading.tsx b/components/studio/generation-loading.tsx
new file mode 100644
index 0000000..d69d0bc
--- /dev/null
+++ b/components/studio/generation-loading.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export function GenerationLoading() {
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      className="flex flex-col items-center gap-6"
+    >
+      <div className="relative w-24 h-24">
+        {[0, 1, 2].map((i) => (
+          <motion.div
+            key={i}
+            className="absolute inset-0 rounded-full border border-foreground/10"
+            animate={{
+              scale: [1, 1.4 + i * 0.2, 1],
+              opacity: [0.3, 0.05, 0.3],
+            }}
+            transition={{
+              duration: 2,
+              repeat: Infinity,
+              delay: i * 0.4,
+              ease: "easeInOut",
+            }}
+          />
+        ))}
+      </div>
+      <motion.p
+        className="text-sm text-foreground/40 font-medium"
+        animate={{ opacity: [0.4, 1, 0.4] }}
+        transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
+      >
+        Generating...
+      </motion.p>
+    </motion.div>
+  );
+}
diff --git a/components/studio/image-settings.tsx b/components/studio/image-settings.tsx
new file mode 100644
index 0000000..ec61ed4
--- /dev/null
+++ b/components/studio/image-settings.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import { useStudioStore } from "@/store/useStudioStore";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import type { AspectRatio, ImageStyle } from "@/types/studio";
+
+const ASPECT_RATIOS: AspectRatio[] = ["1:1", "16:9", "9:16", "4:3"];
+
+const STYLES: { value: ImageStyle; label: string }[] = [
+  { value: "photorealistic", label: "Photorealistic" },
+  { value: "cinematic", label: "Cinematic" },
+  { value: "anime", label: "Anime" },
+  { value: "digital-art", label: "Digital Art" },
+  { value: "oil-painting", label: "Oil Painting" },
+  { value: "watercolor", label: "Watercolor" },
+];
+
+const COUNTS = [1, 2, 3, 4];
+
+export function ImageSettings() {
+  const {
+    imageAspectRatio,
+    setImageAspectRatio,
+    imageStyle,
+    setImageStyle,
+    imageCount,
+    setImageCount,
+  } = useStudioStore();
+
+  return (
+    <div className="flex flex-wrap items-center gap-3">
+      {/* Aspect Ratio */}
+      <div className="flex items-center gap-1 bg-secondary/40 rounded-lg p-1">
+        {ASPECT_RATIOS.map((ratio) => (
+          <button
+            key={ratio}
+            onClick={() => setImageAspectRatio(ratio)}
+            className={cn(
+              "px-2.5 py-1 rounded-md text-xs font-medium transition-colors cursor-pointer",
+              imageAspectRatio === ratio
+                ? "bg-background text-foreground shadow-sm"
+                : "text-foreground/50 hover:text-foreground/70"
+            )}
+          >
+            {ratio}
+          </button>
+        ))}
+      </div>
+
+      {/* Style */}
+      <Select value={imageStyle} onValueChange={(v) => setImageStyle(v as ImageStyle)}>
+        <SelectTrigger className="h-7 w-[130px] text-xs bg-secondary/40 border-border/50 rounded-lg">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {STYLES.map(({ value, label }) => (
+            <SelectItem key={value} value={value} className="text-xs">
+              {label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      {/* Count */}
+      <div className="flex items-center gap-1 bg-secondary/40 rounded-lg p-1">
+        {COUNTS.map((count) => (
+          <button
+            key={count}
+            onClick={() => setImageCount(count)}
+            className={cn(
+              "w-7 h-6 flex items-center justify-center rounded-md text-xs font-medium transition-colors cursor-pointer",
+              imageCount === count
+                ? "bg-background text-foreground shadow-sm"
+                : "text-foreground/50 hover:text-foreground/70"
+            )}
+          >
+            {count}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/components/studio/mode-switcher.tsx b/components/studio/mode-switcher.tsx
new file mode 100644
index 0000000..4ebf223
--- /dev/null
+++ b/components/studio/mode-switcher.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { ImageIcon, Video } from "lucide-react";
+import { useStudioStore } from "@/store/useStudioStore";
+import { cn } from "@/lib/utils";
+import type { StudioMode } from "@/types/studio";
+
+const modes: { value: StudioMode; icon: typeof ImageIcon; label: string }[] = [
+  { value: "image", icon: ImageIcon, label: "Image" },
+  { value: "video", icon: Video, label: "Video" },
+];
+
+export function ModeSwitcher() {
+  const { mode, setMode } = useStudioStore();
+
+  return (
+    <div className="flex flex-row md:flex-col gap-1 bg-secondary/60 rounded-xl p-1">
+      {modes.map(({ value, icon: Icon, label }) => (
+        <button
+          key={value}
+          onClick={() => setMode(value)}
+          className={cn(
+            "flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-medium transition-colors cursor-pointer",
+            mode === value
+              ? "bg-background text-foreground shadow-sm"
+              : "text-foreground/50 hover:text-foreground/70"
+          )}
+        >
+          <Icon className="h-4 w-4" />
+          <span className="hidden sm:inline">{label}</span>
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/components/studio/prompt-input.tsx b/components/studio/prompt-input.tsx
new file mode 100644
index 0000000..fd531c6
--- /dev/null
+++ b/components/studio/prompt-input.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { useRef, useCallback, KeyboardEvent } from "react";
+import { ArrowUp } from "lucide-react";
+import { motion } from "framer-motion";
+import { useStudioStore } from "@/store/useStudioStore";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+
+export function PromptInput() {
+  const { prompt, setPrompt, isGenerating, generate } = useStudioStore();
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const autoResize = useCallback(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, 150)}px`;
+  }, []);
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      generate();
+    }
+  };
+
+  const canSubmit = prompt.trim().length > 0 && !isGenerating;
+
+  return (
+    <div className="relative flex items-end gap-2 flex-1 bg-secondary/60 rounded-2xl border border-border/50 px-4 py-3">
+      <Textarea
+        ref={textareaRef}
+        value={prompt}
+        onChange={(e) => {
+          setPrompt(e.target.value);
+          autoResize();
+        }}
+        onKeyDown={handleKeyDown}
+        placeholder="Describe what you want to create..."
+        rows={1}
+        className="flex-1 resize-none border-0 bg-transparent p-0 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-foreground/30 min-h-[20px] max-h-[150px]"
+      />
+      <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
+        <Button
+          onClick={generate}
+          disabled={!canSubmit}
+          size="icon"
+          className="h-8 w-8 rounded-full bg-[#F54E00] hover:bg-[#e04500] text-white shrink-0 disabled:opacity-30"
+        >
+          <ArrowUp className="h-4 w-4" />
+        </Button>
+      </motion.div>
+    </div>
+  );
+}
diff --git a/components/studio/studio-canvas.tsx b/components/studio/studio-canvas.tsx
new file mode 100644
index 0000000..3ea325c
--- /dev/null
+++ b/components/studio/studio-canvas.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { useStudioStore } from "@/store/useStudioStore";
+import { GenerationLoading } from "./generation-loading";
+import { GenerationDisplay } from "./generation-display";
+
+export function StudioCanvas() {
+  const { isGenerating, generationResult } = useStudioStore();
+
+  return (
+    <div className="flex-1 flex items-center justify-center px-4 pb-[200px] overflow-auto">
+      <AnimatePresence mode="wait">
+        {isGenerating ? (
+          <GenerationLoading key="loading" />
+        ) : generationResult ? (
+          <GenerationDisplay key="result" result={generationResult} />
+        ) : (
+          <motion.div
+            key="placeholder"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ duration: 0.6, ease: "easeOut" }}
+            className="text-center max-w-2xl"
+          >
+            <h1 className="text-2xl md:text-4xl lg:text-5xl font-light tracking-tight text-foreground/20 select-none">
+              What will you create with Infinite budget
+            </h1>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
diff --git a/components/studio/studio-prompt-bar.tsx b/components/studio/studio-prompt-bar.tsx
new file mode 100644
index 0000000..28c2337
--- /dev/null
+++ b/components/studio/studio-prompt-bar.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+import { useStudioStore } from "@/store/useStudioStore";
+import { ModeSwitcher } from "./mode-switcher";
+import { PromptInput } from "./prompt-input";
+import { ImageSettings } from "./image-settings";
+import { VideoSettings } from "./video-settings";
+
+export function StudioPromptBar() {
+  const { mode } = useStudioStore();
+
+  return (
+    <motion.div
+      initial={{ y: 50, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      transition={{ duration: 0.5, delay: 0.3, ease: "easeOut" }}
+      className="fixed bottom-0 left-0 right-0 z-50 pb-6 px-4"
+    >
+      <div className="max-w-3xl mx-auto">
+        {/* Settings row */}
+        <AnimatePresence mode="wait">
+          {mode === "image" ? (
+            <motion.div
+              key="image-settings"
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.2 }}
+              className="mb-2 px-2"
+            >
+              <ImageSettings />
+            </motion.div>
+          ) : (
+            <motion.div
+              key="video-settings"
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.2 }}
+              className="mb-2 px-2"
+            >
+              <VideoSettings />
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        {/* Main prompt row */}
+        <div className="flex items-end gap-3">
+          <ModeSwitcher />
+          <PromptInput />
+        </div>
+      </div>
+    </motion.div>
+  );
+}
diff --git a/components/studio/video-settings.tsx b/components/studio/video-settings.tsx
new file mode 100644
index 0000000..987cb96
--- /dev/null
+++ b/components/studio/video-settings.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { useStudioStore } from "@/store/useStudioStore";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { FrameUpload } from "./frame-upload";
+import { cn } from "@/lib/utils";
+import type { AspectRatio } from "@/types/studio";
+
+const ASPECT_RATIOS: AspectRatio[] = ["1:1", "16:9", "9:16"];
+const DURATIONS = [5, 10, 15, 30];
+
+export function VideoSettings() {
+  const {
+    videoAspectRatio,
+    setVideoAspectRatio,
+    videoDuration,
+    setVideoDuration,
+    firstFramePreview,
+    setFirstFrame,
+    lastFramePreview,
+    setLastFrame,
+  } = useStudioStore();
+
+  return (
+    <div className="flex flex-wrap items-center gap-3">
+      {/* First Frame */}
+      <FrameUpload
+        label="First Frame"
+        preview={firstFramePreview}
+        onUpload={setFirstFrame}
+      />
+
+      {/* Last Frame */}
+      <FrameUpload
+        label="Last Frame"
+        preview={lastFramePreview}
+        onUpload={setLastFrame}
+      />
+
+      {/* Duration */}
+      <Select
+        value={String(videoDuration)}
+        onValueChange={(v) => setVideoDuration(Number(v))}
+      >
+        <SelectTrigger className="h-7 w-[80px] text-xs bg-secondary/40 border-border/50 rounded-lg">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {DURATIONS.map((d) => (
+            <SelectItem key={d} value={String(d)} className="text-xs">
+              {d}s
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      {/* Aspect Ratio */}
+      <div className="flex items-center gap-1 bg-secondary/40 rounded-lg p-1">
+        {ASPECT_RATIOS.map((ratio) => (
+          <button
+            key={ratio}
+            onClick={() => setVideoAspectRatio(ratio)}
+            className={cn(
+              "px-2.5 py-1 rounded-md text-xs font-medium transition-colors cursor-pointer",
+              videoAspectRatio === ratio
+                ? "bg-background text-foreground shadow-sm"
+                : "text-foreground/50 hover:text-foreground/70"
+            )}
+          >
+            {ratio}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
new file mode 100644
index 0000000..c0dc712
--- /dev/null
+++ b/components/ui/select.tsx
@@ -0,0 +1,190 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/components/ui/slider.tsx b/components/ui/slider.tsx
new file mode 100644
index 0000000..46ebc4b
--- /dev/null
+++ b/components/ui/slider.tsx
@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+import { Slider as SliderPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
new file mode 100644
index 0000000..e67d8fe
--- /dev/null
+++ b/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/components/ui/toggle-group.tsx b/components/ui/toggle-group.tsx
new file mode 100644
index 0000000..9894607
--- /dev/null
+++ b/components/ui/toggle-group.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from "react"
+import { type VariantProps } from "class-variance-authority"
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
+        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/components/ui/toggle.tsx b/components/ui/toggle.tsx
new file mode 100644
index 0000000..5250c98
--- /dev/null
+++ b/components/ui/toggle.tsx
@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Toggle as TogglePrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 min-w-9 px-2",
+        sm: "h-8 min-w-8 px-1.5",
+        lg: "h-10 min-w-10 px-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }
diff --git a/package-lock.json b/package-lock.json
index b66b083..aad6aec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "next": "15.5.7",
         "next-themes": "^0.4.6",
         "posthog-js": "^1.359.1",
+        "radix-ui": "^1.4.3",
         "react": "19.1.0",
         "react-dom": "19.1.0",
         "rehype-slug": "^6.0.0",
@@ -219,6 +220,44 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
+      "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
+      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.5",
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.8.tgz",
+      "integrity": "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.6"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
+      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
+      "license": "MIT"
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1146,108 +1185,1561 @@
       "integrity": "sha512-1pNQf/JazQTMA0BiO5NINUzH0cbLbbl7mntLa4aJNmCCXSj0q03T5ZXXL0zw4G55TjdL9Tz32cznGClf+8zr5A==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@opentelemetry/core": "2.2.0",
-        "@opentelemetry/semantic-conventions": "^1.29.0"
-      },
-      "engines": {
-        "node": "^18.19.0 || >=20.6.0"
+        "@opentelemetry/core": "2.2.0",
+        "@opentelemetry/semantic-conventions": "^1.29.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.3.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/semantic-conventions": {
+      "version": "1.40.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.40.0.tgz",
+      "integrity": "sha512-cifvXDhcqMwwTlTK04GBNeIe7yyo28Mfby85QXFe1Yk8nmi36Ab/5UQwptOx84SsoGNRg+EVSjwzfSZMy6pmlw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@posthog/core": {
+      "version": "1.23.2",
+      "resolved": "https://registry.npmjs.org/@posthog/core/-/core-1.23.2.tgz",
+      "integrity": "sha512-zTDdda9NuSHrnwSOfFMxX/pyXiycF4jtU1kTr8DL61dHhV+7LF6XF1ndRZZTuaGGbfbb/GJYkEsjEX9SXfNZeQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.6"
+      }
+    },
+    "node_modules/@posthog/types": {
+      "version": "1.359.1",
+      "resolved": "https://registry.npmjs.org/@posthog/types/-/types-1.359.1.tgz",
+      "integrity": "sha512-oQihoHWLnOkSkzOToCWKNigbJ7UZcIkl+rSJuq2PLwL7EB0Q/r1UGSbVCkrPH8xtPbYpi7w4TVpMrg41TMT+LQ==",
+      "license": "MIT"
+    },
+    "node_modules/@protobufjs/aspromise": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+      "integrity": "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/codegen": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
+      "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/eventemitter": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
+      "integrity": "sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/fetch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
+      "integrity": "sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.1",
+        "@protobufjs/inquire": "^1.1.0"
+      }
+    },
+    "node_modules/@protobufjs/float": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+      "integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/inquire": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
+      "integrity": "sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/path": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+      "integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/pool": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/utf8": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
+      "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
+      "integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-accessible-icon": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accessible-icon/-/react-accessible-icon-1.1.7.tgz",
+      "integrity": "sha512-XM+E4WXl0OqUJFovy6GjmxxFyx9opfCAIUku4dlKRd5YEPqt4kALOkQOp0Of6reHuUkJuiPBEc5k0o4z4lTC8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
+      "integrity": "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collapsible": "1.1.12",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.15.tgz",
+      "integrity": "sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dialog": "1.1.15",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
+      "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-aspect-ratio": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.7.tgz",
+      "integrity": "sha512-Yq6lvO9HQyPwev1onK1daHCHqXVLzPhSVjmsNjCa2Zcxy2f7uJD2itDtxknv6FzAKCwD1qQkeVDmX/cev13n/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.10.tgz",
+      "integrity": "sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz",
+      "integrity": "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
+      "integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context-menu": {
+      "version": "2.2.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.2.16.tgz",
+      "integrity": "sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
+      "integrity": "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
+      "integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.16.tgz",
+      "integrity": "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz",
+      "integrity": "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
+      "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-form": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.1.8.tgz",
+      "integrity": "sha512-QM70k4Zwjttifr5a4sZFts9fn8FzHYvQ5PiB19O2HsYibaHSVt9fH9rzB0XZo/YcM+b7t/p7lYCT/F5eOeF5yQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-label": "2.1.7",
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.15.tgz",
+      "integrity": "sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.7.tgz",
+      "integrity": "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.16.tgz",
+      "integrity": "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menubar": {
+      "version": "1.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.1.16.tgz",
+      "integrity": "sha512-EB1FktTz5xRRi2Er974AUQZWg2yVBb1yjip38/lgwtCVRd3a+maUoGHN/xs9Yv8SY8QwbSEb+YrxGadVWbEutA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-navigation-menu": {
+      "version": "1.2.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.14.tgz",
+      "integrity": "sha512-YB9mTFQvCOAQMHU+C/jVl96WmuWeltyUEpRJJky51huhds5W2FQr1J8D/16sQlf0ozxkPK8uF3niQMdUwZPv5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-one-time-password-field": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-one-time-password-field/-/react-one-time-password-field-0.1.8.tgz",
+      "integrity": "sha512-ycS4rbwURavDPVjCb5iS3aG4lURFDILi6sKI/WITUMZ13gMmn/xGjpLoqBAalhJaDk8I3UbCM5GzKHrnzwHbvg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-password-toggle-field": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-password-toggle-field/-/react-password-toggle-field-0.1.3.tgz",
+      "integrity": "sha512-/UuCrDBWravcaMix4TdT+qlNdVwOM1Nck9kWx/vafXsdfj1ChfhOdfi3cy9SGBpWgTXwYCuboT/oYpJy3clqfw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-is-hydrated": "0.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.15.tgz",
+      "integrity": "sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
+      "integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-rect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+      "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.7.tgz",
+      "integrity": "sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.8.tgz",
+      "integrity": "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
+      "integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.10.tgz",
+      "integrity": "sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
+      "integrity": "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
+      "integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.3.6.tgz",
+      "integrity": "sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.2.6.tgz",
+      "integrity": "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz",
+      "integrity": "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.2.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.15.tgz",
+      "integrity": "sha512-3OSz3TacUWy4WtOXV38DggwxoqJK4+eDkNMl5Z/MJZaoUPaP4/9lf81xXMe1I2ReTAptverZUpbPY4wWwWyL5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.10.tgz",
+      "integrity": "sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.11.tgz",
+      "integrity": "sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-toggle": "1.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toolbar/-/react-toolbar-1.1.11.tgz",
+      "integrity": "sha512-4ol06/1bLoFu1nwUqzdD4Y5RZ9oDdKeiHIsntug54Hcr1pgaHiPqHFEaXI1IFP/EsOfROQZ8Mig9VTIRza6Tjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-separator": "1.1.7",
+        "@radix-ui/react-toggle-group": "1.1.11"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
+      "integrity": "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+      "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-is-hydrated": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.0.tgz",
+      "integrity": "sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.5.0"
       },
       "peerDependencies": {
-        "@opentelemetry/api": ">=1.3.0 <1.10.0"
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@opentelemetry/semantic-conventions": {
-      "version": "1.40.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.40.0.tgz",
-      "integrity": "sha512-cifvXDhcqMwwTlTK04GBNeIe7yyo28Mfby85QXFe1Yk8nmi36Ab/5UQwptOx84SsoGNRg+EVSjwzfSZMy6pmlw==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=14"
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@posthog/core": {
-      "version": "1.23.2",
-      "resolved": "https://registry.npmjs.org/@posthog/core/-/core-1.23.2.tgz",
-      "integrity": "sha512-zTDdda9NuSHrnwSOfFMxX/pyXiycF4jtU1kTr8DL61dHhV+7LF6XF1ndRZZTuaGGbfbb/GJYkEsjEX9SXfNZeQ==",
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
+      "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
       "license": "MIT",
-      "dependencies": {
-        "cross-spawn": "^7.0.6"
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@posthog/types": {
-      "version": "1.359.1",
-      "resolved": "https://registry.npmjs.org/@posthog/types/-/types-1.359.1.tgz",
-      "integrity": "sha512-oQihoHWLnOkSkzOToCWKNigbJ7UZcIkl+rSJuq2PLwL7EB0Q/r1UGSbVCkrPH8xtPbYpi7w4TVpMrg41TMT+LQ==",
-      "license": "MIT"
-    },
-    "node_modules/@protobufjs/aspromise": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
-      "integrity": "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/@protobufjs/base64": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
-      "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/@protobufjs/codegen": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
-      "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/@protobufjs/eventemitter": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
-      "integrity": "sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/@protobufjs/fetch": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
-      "integrity": "sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==",
-      "license": "BSD-3-Clause",
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
+      "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
+      "license": "MIT",
       "dependencies": {
-        "@protobufjs/aspromise": "^1.1.1",
-        "@protobufjs/inquire": "^1.1.0"
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@protobufjs/float": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
-      "integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/@protobufjs/inquire": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
-      "integrity": "sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/@protobufjs/path": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
-      "integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/@protobufjs/pool": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
-      "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/@protobufjs/utf8": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
-      "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/@radix-ui/react-compose-refs": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
-      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
       "peerDependencies": {
         "@types/react": "*",
         "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
@@ -1258,23 +2750,35 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-slot": {
+    "node_modules/@radix-ui/react-visually-hidden": {
       "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
-      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz",
+      "integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==",
+      "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.2"
+        "@radix-ui/react-primitive": "2.1.3"
       },
       "peerDependencies": {
         "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
           "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
         }
       }
     },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
+      "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
+      "license": "MIT"
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -1699,7 +3203,7 @@
       "version": "19.1.9",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz",
       "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
-      "dev": true,
+      "devOptional": true,
       "peerDependencies": {
         "@types/react": "^19.0.0"
       }
@@ -2399,6 +3903,18 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/aria-query": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
@@ -3169,6 +4685,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
     "node_modules/devlop": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
@@ -4113,6 +5635,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
@@ -6476,6 +8007,83 @@
         }
       ]
     },
+    "node_modules/radix-ui": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/radix-ui/-/radix-ui-1.4.3.tgz",
+      "integrity": "sha512-aWizCQiyeAenIdUbqEpXgRA1ya65P13NKn/W8rWkcN0OPkRDxdBVLWnIEDsS2RpwCK2nobI7oMUSmexzTDyAmA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-accessible-icon": "1.1.7",
+        "@radix-ui/react-accordion": "1.2.12",
+        "@radix-ui/react-alert-dialog": "1.1.15",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-aspect-ratio": "1.1.7",
+        "@radix-ui/react-avatar": "1.1.10",
+        "@radix-ui/react-checkbox": "1.3.3",
+        "@radix-ui/react-collapsible": "1.1.12",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-context-menu": "2.2.16",
+        "@radix-ui/react-dialog": "1.1.15",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-dropdown-menu": "2.1.16",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-form": "0.1.8",
+        "@radix-ui/react-hover-card": "1.1.15",
+        "@radix-ui/react-label": "2.1.7",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-menubar": "1.1.16",
+        "@radix-ui/react-navigation-menu": "1.2.14",
+        "@radix-ui/react-one-time-password-field": "0.1.8",
+        "@radix-ui/react-password-toggle-field": "0.1.3",
+        "@radix-ui/react-popover": "1.1.15",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-progress": "1.1.7",
+        "@radix-ui/react-radio-group": "1.3.8",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-scroll-area": "1.2.10",
+        "@radix-ui/react-select": "2.2.6",
+        "@radix-ui/react-separator": "1.1.7",
+        "@radix-ui/react-slider": "1.3.6",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-switch": "1.2.6",
+        "@radix-ui/react-tabs": "1.1.13",
+        "@radix-ui/react-toast": "1.2.15",
+        "@radix-ui/react-toggle": "1.1.10",
+        "@radix-ui/react-toggle-group": "1.1.11",
+        "@radix-ui/react-toolbar": "1.1.11",
+        "@radix-ui/react-tooltip": "1.2.8",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-escape-keydown": "1.1.1",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react": {
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
@@ -6501,6 +8109,75 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
+      "integrity": "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -7673,6 +9350,49 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
diff --git a/package.json b/package.json
index 94e9410..5e58d59 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "next": "15.5.7",
     "next-themes": "^0.4.6",
     "posthog-js": "^1.359.1",
+    "radix-ui": "^1.4.3",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "rehype-slug": "^6.0.0",
diff --git a/store/useStudioStore.ts b/store/useStudioStore.ts
new file mode 100644
index 0000000..fb6b229
--- /dev/null
+++ b/store/useStudioStore.ts
@@ -0,0 +1,132 @@
+import { create } from "zustand";
+import type {
+  StudioMode,
+  AspectRatio,
+  ImageStyle,
+  GenerationResult,
+} from "@/types/studio";
+
+interface StudioState {
+  // Mode
+  mode: StudioMode;
+  setMode: (mode: StudioMode) => void;
+
+  // Prompt
+  prompt: string;
+  setPrompt: (prompt: string) => void;
+
+  // Image settings
+  imageAspectRatio: AspectRatio;
+  imageStyle: ImageStyle;
+  imageCount: number;
+  setImageAspectRatio: (v: AspectRatio) => void;
+  setImageStyle: (v: ImageStyle) => void;
+  setImageCount: (v: number) => void;
+
+  // Video settings
+  videoAspectRatio: AspectRatio;
+  videoDuration: number;
+  firstFrame: File | null;
+  firstFramePreview: string | null;
+  lastFrame: File | null;
+  lastFramePreview: string | null;
+  setVideoAspectRatio: (v: AspectRatio) => void;
+  setVideoDuration: (v: number) => void;
+  setFirstFrame: (file: File | null) => void;
+  setLastFrame: (file: File | null) => void;
+
+  // Generation
+  isGenerating: boolean;
+  generationResult: GenerationResult | null;
+  generate: () => void;
+  clearResult: () => void;
+}
+
+const PLACEHOLDER_IMAGES = [
+  "https://picsum.photos/seed/studio1/1024/1024",
+  "https://picsum.photos/seed/studio2/1024/1024",
+  "https://picsum.photos/seed/studio3/1024/1024",
+  "https://picsum.photos/seed/studio4/1024/1024",
+];
+
+export const useStudioStore = create<StudioState>((set, get) => ({
+  // Mode
+  mode: "image",
+  setMode: (mode) => set({ mode }),
+
+  // Prompt
+  prompt: "",
+  setPrompt: (prompt) => set({ prompt }),
+
+  // Image settings
+  imageAspectRatio: "1:1",
+  imageStyle: "photorealistic",
+  imageCount: 1,
+  setImageAspectRatio: (v) => set({ imageAspectRatio: v }),
+  setImageStyle: (v) => set({ imageStyle: v }),
+  setImageCount: (v) => set({ imageCount: v }),
+
+  // Video settings
+  videoAspectRatio: "16:9",
+  videoDuration: 5,
+  firstFrame: null,
+  firstFramePreview: null,
+  lastFrame: null,
+  lastFramePreview: null,
+  setVideoAspectRatio: (v) => set({ videoAspectRatio: v }),
+  setVideoDuration: (v) => set({ videoDuration: v }),
+  setFirstFrame: (file) => {
+    const prev = get().firstFramePreview;
+    if (prev) URL.revokeObjectURL(prev);
+    set({
+      firstFrame: file,
+      firstFramePreview: file ? URL.createObjectURL(file) : null,
+    });
+  },
+  setLastFrame: (file) => {
+    const prev = get().lastFramePreview;
+    if (prev) URL.revokeObjectURL(prev);
+    set({
+      lastFrame: file,
+      lastFramePreview: file ? URL.createObjectURL(file) : null,
+    });
+  },
+
+  // Generation
+  isGenerating: false,
+  generationResult: null,
+  generate: () => {
+    const state = get();
+    if (!state.prompt.trim() || state.isGenerating) return;
+
+    set({ isGenerating: true, generationResult: null });
+
+    const count = state.mode === "image" ? state.imageCount : 1;
+    const urls = PLACEHOLDER_IMAGES.slice(0, count);
+
+    setTimeout(() => {
+      const result: GenerationResult = {
+        id: crypto.randomUUID(),
+        type: state.mode,
+        urls,
+        prompt: state.prompt,
+        settings:
+          state.mode === "image"
+            ? {
+                aspectRatio: state.imageAspectRatio,
+                style: state.imageStyle,
+                count: state.imageCount,
+              }
+            : {
+                aspectRatio: state.videoAspectRatio,
+                duration: state.videoDuration,
+                firstFrame: state.firstFramePreview ?? undefined,
+                lastFrame: state.lastFramePreview ?? undefined,
+              },
+        createdAt: new Date().toISOString(),
+      };
+      set({ isGenerating: false, generationResult: result });
+    }, 3000);
+  },
+  clearResult: () => set({ generationResult: null }),
+}));
diff --git a/types/studio.ts b/types/studio.ts
new file mode 100644
index 0000000..27a7724
--- /dev/null
+++ b/types/studio.ts
@@ -0,0 +1,33 @@
+export type StudioMode = "image" | "video";
+
+export type AspectRatio = "1:1" | "16:9" | "9:16" | "4:3" | "3:4";
+
+export type ImageStyle =
+  | "photorealistic"
+  | "cinematic"
+  | "anime"
+  | "digital-art"
+  | "oil-painting"
+  | "watercolor";
+
+export interface ImageGenerationSettings {
+  aspectRatio: AspectRatio;
+  style: ImageStyle;
+  count: number;
+}
+
+export interface VideoGenerationSettings {
+  aspectRatio: AspectRatio;
+  duration: number;
+  firstFrame?: string;
+  lastFrame?: string;
+}
+
+export interface GenerationResult {
+  id: string;
+  type: StudioMode;
+  urls: string[];
+  prompt: string;
+  settings: ImageGenerationSettings | VideoGenerationSettings;
+  createdAt: string;
+}

From 943ff3bb60f7c904c58b2572f92f0cbb8e31e4fa Mon Sep 17 00:00:00 2001
From: Abhishekucs <abhishekucskumar@gmail.com>
Date: Fri, 3 Apr 2026 09:27:13 +0530
Subject: [PATCH 2/8] style: match prompt bar height to mode switcher, move
 settings inside bar

- Prompt bar and mode switcher now stretch to equal height via flex items-stretch
- Settings moved inside the prompt bar at bottom-left below the textarea
- Submit button enlarged to 48x48 squircle (rounded-2xl)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 components/studio/mode-switcher.tsx     |  4 +-
 components/studio/prompt-input.tsx      | 61 +++++++++++++++----------
 components/studio/studio-prompt-bar.tsx | 60 +++++++++++-------------
 3 files changed, 66 insertions(+), 59 deletions(-)

diff --git a/components/studio/mode-switcher.tsx b/components/studio/mode-switcher.tsx
index 4ebf223..cd2d522 100644
--- a/components/studio/mode-switcher.tsx
+++ b/components/studio/mode-switcher.tsx
@@ -14,13 +14,13 @@ export function ModeSwitcher() {
   const { mode, setMode } = useStudioStore();
 
   return (
-    <div className="flex flex-row md:flex-col gap-1 bg-secondary/60 rounded-xl p-1">
+    <div className="flex flex-row md:flex-col gap-1 bg-secondary/60 rounded-2xl border border-border/50 p-1.5 self-stretch justify-center">
       {modes.map(({ value, icon: Icon, label }) => (
         <button
           key={value}
           onClick={() => setMode(value)}
           className={cn(
-            "flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-medium transition-colors cursor-pointer",
+            "flex flex-1 items-center justify-center gap-1.5 px-3 py-2 rounded-xl text-xs font-medium transition-colors cursor-pointer",
             mode === value
               ? "bg-background text-foreground shadow-sm"
               : "text-foreground/50 hover:text-foreground/70"
diff --git a/components/studio/prompt-input.tsx b/components/studio/prompt-input.tsx
index fd531c6..413221c 100644
--- a/components/studio/prompt-input.tsx
+++ b/components/studio/prompt-input.tsx
@@ -1,13 +1,16 @@
 "use client";
 
-import { useRef, useCallback, KeyboardEvent } from "react";
+import { useRef, useCallback, KeyboardEvent, ReactNode } from "react";
 import { ArrowUp } from "lucide-react";
 import { motion } from "framer-motion";
 import { useStudioStore } from "@/store/useStudioStore";
-import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 
-export function PromptInput() {
+interface PromptInputProps {
+  children?: ReactNode;
+}
+
+export function PromptInput({ children }: PromptInputProps) {
   const { prompt, setPrompt, isGenerating, generate } = useStudioStore();
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -15,7 +18,7 @@ export function PromptInput() {
     const el = textareaRef.current;
     if (!el) return;
     el.style.height = "auto";
-    el.style.height = `${Math.min(el.scrollHeight, 150)}px`;
+    el.style.height = `${Math.min(el.scrollHeight, 120)}px`;
   }, []);
 
   const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
@@ -28,29 +31,39 @@ export function PromptInput() {
   const canSubmit = prompt.trim().length > 0 && !isGenerating;
 
   return (
-    <div className="relative flex items-end gap-2 flex-1 bg-secondary/60 rounded-2xl border border-border/50 px-4 py-3">
-      <Textarea
-        ref={textareaRef}
-        value={prompt}
-        onChange={(e) => {
-          setPrompt(e.target.value);
-          autoResize();
-        }}
-        onKeyDown={handleKeyDown}
-        placeholder="Describe what you want to create..."
-        rows={1}
-        className="flex-1 resize-none border-0 bg-transparent p-0 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-foreground/30 min-h-[20px] max-h-[150px]"
-      />
-      <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
-        <Button
+    <div className="flex-1 flex gap-2 bg-secondary/60 rounded-2xl border border-border/50 p-3">
+      {/* Left side: textarea on top, settings at bottom */}
+      <div className="flex-1 flex flex-col justify-between gap-2">
+        <Textarea
+          ref={textareaRef}
+          value={prompt}
+          onChange={(e) => {
+            setPrompt(e.target.value);
+            autoResize();
+          }}
+          onKeyDown={handleKeyDown}
+          placeholder="Describe what you want to create..."
+          rows={2}
+          className="flex-1 resize-none border-0 bg-transparent p-0 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-foreground/30 min-h-[40px] max-h-[120px]"
+        />
+        {/* Settings at bottom-left */}
+        <div className="flex items-center">
+          {children}
+        </div>
+      </div>
+
+      {/* Submit button - big squircle on the right, vertically centered */}
+      <div className="flex items-center">
+        <motion.button
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
           onClick={generate}
           disabled={!canSubmit}
-          size="icon"
-          className="h-8 w-8 rounded-full bg-[#F54E00] hover:bg-[#e04500] text-white shrink-0 disabled:opacity-30"
+          className="h-12 w-12 flex items-center justify-center rounded-2xl bg-[#F54E00] hover:bg-[#e04500] text-white shrink-0 disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer transition-colors"
         >
-          <ArrowUp className="h-4 w-4" />
-        </Button>
-      </motion.div>
+          <ArrowUp className="h-5 w-5" strokeWidth={2.5} />
+        </motion.button>
+      </div>
     </div>
   );
 }
diff --git a/components/studio/studio-prompt-bar.tsx b/components/studio/studio-prompt-bar.tsx
index 28c2337..4787cb3 100644
--- a/components/studio/studio-prompt-bar.tsx
+++ b/components/studio/studio-prompt-bar.tsx
@@ -17,39 +17,33 @@ export function StudioPromptBar() {
       transition={{ duration: 0.5, delay: 0.3, ease: "easeOut" }}
       className="fixed bottom-0 left-0 right-0 z-50 pb-6 px-4"
     >
-      <div className="max-w-3xl mx-auto">
-        {/* Settings row */}
-        <AnimatePresence mode="wait">
-          {mode === "image" ? (
-            <motion.div
-              key="image-settings"
-              initial={{ opacity: 0, y: 10 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -10 }}
-              transition={{ duration: 0.2 }}
-              className="mb-2 px-2"
-            >
-              <ImageSettings />
-            </motion.div>
-          ) : (
-            <motion.div
-              key="video-settings"
-              initial={{ opacity: 0, y: 10 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -10 }}
-              transition={{ duration: 0.2 }}
-              className="mb-2 px-2"
-            >
-              <VideoSettings />
-            </motion.div>
-          )}
-        </AnimatePresence>
-
-        {/* Main prompt row */}
-        <div className="flex items-end gap-3">
-          <ModeSwitcher />
-          <PromptInput />
-        </div>
+      <div className="max-w-3xl mx-auto flex items-stretch gap-3">
+        <ModeSwitcher />
+        <PromptInput>
+          <AnimatePresence mode="wait">
+            {mode === "image" ? (
+              <motion.div
+                key="image-settings"
+                initial={{ opacity: 0, y: 5 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -5 }}
+                transition={{ duration: 0.15 }}
+              >
+                <ImageSettings />
+              </motion.div>
+            ) : (
+              <motion.div
+                key="video-settings"
+                initial={{ opacity: 0, y: 5 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -5 }}
+                transition={{ duration: 0.15 }}
+              >
+                <VideoSettings />
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </PromptInput>
       </div>
     </motion.div>
   );

From d77b947d371cd6ecbc38165c8673b8d4abef6232 Mon Sep 17 00:00:00 2001
From: Abhishekucs <abhishekucskumar@gmail.com>
Date: Fri, 3 Apr 2026 09:35:22 +0530
Subject: [PATCH 3/8] style: resizable prompt bar with bottom settings and
 generate button

- Prompt bar is now a tall container (180px default) with a drag handle
  at the top for vertical resizing (140px-400px range)
- Textarea fills the top area, settings sit at bottom-left as compact pills
- Large "Generate" button with label at bottom-right
- Mode switcher updated to icon+label vertical stack aligned to bottom
- Settings use rounded-full pill style matching reference design

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 components/studio/frame-upload.tsx   | 12 ++--
 components/studio/image-settings.tsx | 48 ++++++++--------
 components/studio/mode-switcher.tsx  | 10 ++--
 components/studio/prompt-input.tsx   | 83 +++++++++++++++++++---------
 components/studio/video-settings.tsx | 12 ++--
 5 files changed, 97 insertions(+), 68 deletions(-)

diff --git a/components/studio/frame-upload.tsx b/components/studio/frame-upload.tsx
index a0c8a83..b4e8938 100644
--- a/components/studio/frame-upload.tsx
+++ b/components/studio/frame-upload.tsx
@@ -15,7 +15,7 @@ export function FrameUpload({ label, preview, onUpload }: FrameUploadProps) {
   const inputRef = useRef<HTMLInputElement>(null);
 
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex items-center gap-1">
       <input
         ref={inputRef}
         type="file"
@@ -30,20 +30,20 @@ export function FrameUpload({ label, preview, onUpload }: FrameUploadProps) {
       <button
         onClick={() => inputRef.current?.click()}
         className={cn(
-          "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors border cursor-pointer",
+          "flex items-center gap-1.5 h-7 px-3 rounded-full text-xs font-medium transition-colors border cursor-pointer",
           preview
             ? "border-[#F54E00]/30 bg-[#F54E00]/5 text-[#F54E00]"
-            : "border-border/50 bg-secondary/40 text-foreground/60 hover:text-foreground/80"
+            : "border-border/40 bg-secondary/60 text-foreground/50 hover:text-foreground/70"
         )}
       >
         {preview ? (
-          <div className="relative h-5 w-5 rounded overflow-hidden">
+          <div className="relative h-4 w-4 rounded-sm overflow-hidden">
             <Image src={preview} alt={label} fill className="object-cover" unoptimized />
           </div>
         ) : (
-          <ImagePlus className="h-3.5 w-3.5" />
+          <ImagePlus className="h-3 w-3" />
         )}
-        <span className="hidden sm:inline">{label}</span>
+        <span>{label}</span>
       </button>
       {preview && (
         <button
diff --git a/components/studio/image-settings.tsx b/components/studio/image-settings.tsx
index ec61ed4..bfb35be 100644
--- a/components/studio/image-settings.tsx
+++ b/components/studio/image-settings.tsx
@@ -35,28 +35,10 @@ export function ImageSettings() {
   } = useStudioStore();
 
   return (
-    <div className="flex flex-wrap items-center gap-3">
-      {/* Aspect Ratio */}
-      <div className="flex items-center gap-1 bg-secondary/40 rounded-lg p-1">
-        {ASPECT_RATIOS.map((ratio) => (
-          <button
-            key={ratio}
-            onClick={() => setImageAspectRatio(ratio)}
-            className={cn(
-              "px-2.5 py-1 rounded-md text-xs font-medium transition-colors cursor-pointer",
-              imageAspectRatio === ratio
-                ? "bg-background text-foreground shadow-sm"
-                : "text-foreground/50 hover:text-foreground/70"
-            )}
-          >
-            {ratio}
-          </button>
-        ))}
-      </div>
-
+    <div className="flex items-center gap-2">
       {/* Style */}
       <Select value={imageStyle} onValueChange={(v) => setImageStyle(v as ImageStyle)}>
-        <SelectTrigger className="h-7 w-[130px] text-xs bg-secondary/40 border-border/50 rounded-lg">
+        <SelectTrigger className="h-7 w-auto gap-1 text-xs bg-secondary/60 border-border/40 rounded-full px-3">
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
@@ -69,22 +51,40 @@ export function ImageSettings() {
       </Select>
 
       {/* Count */}
-      <div className="flex items-center gap-1 bg-secondary/40 rounded-lg p-1">
+      <div className="flex items-center gap-0.5 bg-secondary/60 border border-border/40 rounded-full px-1 h-7">
         {COUNTS.map((count) => (
           <button
             key={count}
             onClick={() => setImageCount(count)}
             className={cn(
-              "w-7 h-6 flex items-center justify-center rounded-md text-xs font-medium transition-colors cursor-pointer",
+              "w-6 h-5 flex items-center justify-center rounded-full text-xs font-medium transition-colors cursor-pointer",
               imageCount === count
-                ? "bg-background text-foreground shadow-sm"
-                : "text-foreground/50 hover:text-foreground/70"
+                ? "bg-foreground/10 text-foreground"
+                : "text-foreground/40 hover:text-foreground/60"
             )}
           >
             {count}
           </button>
         ))}
       </div>
+
+      {/* Aspect Ratio */}
+      <div className="flex items-center gap-0.5 bg-secondary/60 border border-border/40 rounded-full px-1 h-7">
+        {ASPECT_RATIOS.map((ratio) => (
+          <button
+            key={ratio}
+            onClick={() => setImageAspectRatio(ratio)}
+            className={cn(
+              "px-2 h-5 flex items-center justify-center rounded-full text-xs font-medium transition-colors cursor-pointer",
+              imageAspectRatio === ratio
+                ? "bg-foreground/10 text-foreground"
+                : "text-foreground/40 hover:text-foreground/60"
+            )}
+          >
+            {ratio}
+          </button>
+        ))}
+      </div>
     </div>
   );
 }
diff --git a/components/studio/mode-switcher.tsx b/components/studio/mode-switcher.tsx
index cd2d522..8b66119 100644
--- a/components/studio/mode-switcher.tsx
+++ b/components/studio/mode-switcher.tsx
@@ -14,20 +14,20 @@ export function ModeSwitcher() {
   const { mode, setMode } = useStudioStore();
 
   return (
-    <div className="flex flex-row md:flex-col gap-1 bg-secondary/60 rounded-2xl border border-border/50 p-1.5 self-stretch justify-center">
+    <div className="flex flex-col gap-1.5 self-stretch justify-end pb-1">
       {modes.map(({ value, icon: Icon, label }) => (
         <button
           key={value}
           onClick={() => setMode(value)}
           className={cn(
-            "flex flex-1 items-center justify-center gap-1.5 px-3 py-2 rounded-xl text-xs font-medium transition-colors cursor-pointer",
+            "flex flex-col items-center gap-1 px-2 py-2.5 rounded-xl text-[10px] font-medium transition-colors cursor-pointer w-14",
             mode === value
-              ? "bg-background text-foreground shadow-sm"
-              : "text-foreground/50 hover:text-foreground/70"
+              ? "bg-secondary/80 text-foreground border border-border/50"
+              : "text-foreground/40 hover:text-foreground/60"
           )}
         >
           <Icon className="h-4 w-4" />
-          <span className="hidden sm:inline">{label}</span>
+          <span>{label}</span>
         </button>
       ))}
     </div>
diff --git a/components/studio/prompt-input.tsx b/components/studio/prompt-input.tsx
index 413221c..5d77ff7 100644
--- a/components/studio/prompt-input.tsx
+++ b/components/studio/prompt-input.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useRef, useCallback, KeyboardEvent, ReactNode } from "react";
+import { useRef, useCallback, useState, KeyboardEvent, ReactNode, PointerEvent } from "react";
 import { ArrowUp } from "lucide-react";
 import { motion } from "framer-motion";
 import { useStudioStore } from "@/store/useStudioStore";
@@ -10,16 +10,16 @@ interface PromptInputProps {
   children?: ReactNode;
 }
 
+const MIN_HEIGHT = 140;
+const MAX_HEIGHT = 400;
+const DEFAULT_HEIGHT = 180;
+
 export function PromptInput({ children }: PromptInputProps) {
   const { prompt, setPrompt, isGenerating, generate } = useStudioStore();
   const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  const autoResize = useCallback(() => {
-    const el = textareaRef.current;
-    if (!el) return;
-    el.style.height = "auto";
-    el.style.height = `${Math.min(el.scrollHeight, 120)}px`;
-  }, []);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState(DEFAULT_HEIGHT);
+  const dragStart = useRef<{ y: number; h: number } | null>(null);
 
   const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === "Enter" && !e.shiftKey) {
@@ -28,40 +28,69 @@ export function PromptInput({ children }: PromptInputProps) {
     }
   };
 
+  const onPointerDown = useCallback((e: PointerEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    dragStart.current = { y: e.clientY, h: height };
+    (e.target as HTMLElement).setPointerCapture(e.pointerId);
+  }, [height]);
+
+  const onPointerMove = useCallback((e: PointerEvent<HTMLDivElement>) => {
+    if (!dragStart.current) return;
+    // Dragging up increases height
+    const delta = dragStart.current.y - e.clientY;
+    const newH = Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, dragStart.current.h + delta));
+    setHeight(newH);
+  }, []);
+
+  const onPointerUp = useCallback(() => {
+    dragStart.current = null;
+  }, []);
+
   const canSubmit = prompt.trim().length > 0 && !isGenerating;
 
   return (
-    <div className="flex-1 flex gap-2 bg-secondary/60 rounded-2xl border border-border/50 p-3">
-      {/* Left side: textarea on top, settings at bottom */}
-      <div className="flex-1 flex flex-col justify-between gap-2">
+    <div
+      ref={containerRef}
+      className="flex-1 flex flex-col bg-secondary/60 rounded-2xl border border-border/50 overflow-hidden"
+      style={{ height }}
+    >
+      {/* Resize handle */}
+      <div
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+        className="flex items-center justify-center py-1.5 cursor-ns-resize shrink-0 group"
+      >
+        <div className="w-10 h-1 rounded-full bg-foreground/10 group-hover:bg-foreground/25 transition-colors" />
+      </div>
+
+      {/* Textarea fills available space */}
+      <div className="flex-1 px-4 overflow-hidden">
         <Textarea
           ref={textareaRef}
           value={prompt}
-          onChange={(e) => {
-            setPrompt(e.target.value);
-            autoResize();
-          }}
+          onChange={(e) => setPrompt(e.target.value)}
           onKeyDown={handleKeyDown}
-          placeholder="Describe what you want to create..."
-          rows={2}
-          className="flex-1 resize-none border-0 bg-transparent p-0 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-foreground/30 min-h-[40px] max-h-[120px]"
+          placeholder="Describe your scene..."
+          className="w-full h-full resize-none border-0 bg-transparent p-0 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-foreground/30"
         />
-        {/* Settings at bottom-left */}
-        <div className="flex items-center">
+      </div>
+
+      {/* Bottom bar: settings left, generate button right */}
+      <div className="flex items-center justify-between gap-3 px-3 pb-3 pt-1 shrink-0">
+        <div className="flex items-center gap-2 overflow-x-auto no-scrollbar">
           {children}
         </div>
-      </div>
 
-      {/* Submit button - big squircle on the right, vertically centered */}
-      <div className="flex items-center">
         <motion.button
-          whileHover={{ scale: 1.05 }}
-          whileTap={{ scale: 0.95 }}
+          whileHover={{ scale: 1.03 }}
+          whileTap={{ scale: 0.96 }}
           onClick={generate}
           disabled={!canSubmit}
-          className="h-12 w-12 flex items-center justify-center rounded-2xl bg-[#F54E00] hover:bg-[#e04500] text-white shrink-0 disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer transition-colors"
+          className="h-10 px-5 flex items-center gap-2 rounded-xl bg-[#F54E00] hover:bg-[#e04500] text-white text-sm font-semibold shrink-0 disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer transition-colors"
         >
-          <ArrowUp className="h-5 w-5" strokeWidth={2.5} />
+          Generate
+          <ArrowUp className="h-4 w-4" strokeWidth={2.5} />
         </motion.button>
       </div>
     </div>
diff --git a/components/studio/video-settings.tsx b/components/studio/video-settings.tsx
index 987cb96..ff95cda 100644
--- a/components/studio/video-settings.tsx
+++ b/components/studio/video-settings.tsx
@@ -28,7 +28,7 @@ export function VideoSettings() {
   } = useStudioStore();
 
   return (
-    <div className="flex flex-wrap items-center gap-3">
+    <div className="flex items-center gap-2">
       {/* First Frame */}
       <FrameUpload
         label="First Frame"
@@ -48,7 +48,7 @@ export function VideoSettings() {
         value={String(videoDuration)}
         onValueChange={(v) => setVideoDuration(Number(v))}
       >
-        <SelectTrigger className="h-7 w-[80px] text-xs bg-secondary/40 border-border/50 rounded-lg">
+        <SelectTrigger className="h-7 w-auto gap-1 text-xs bg-secondary/60 border-border/40 rounded-full px-3">
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
@@ -61,16 +61,16 @@ export function VideoSettings() {
       </Select>
 
       {/* Aspect Ratio */}
-      <div className="flex items-center gap-1 bg-secondary/40 rounded-lg p-1">
+      <div className="flex items-center gap-0.5 bg-secondary/60 border border-border/40 rounded-full px-1 h-7">
         {ASPECT_RATIOS.map((ratio) => (
           <button
             key={ratio}
             onClick={() => setVideoAspectRatio(ratio)}
             className={cn(
-              "px-2.5 py-1 rounded-md text-xs font-medium transition-colors cursor-pointer",
+              "px-2 h-5 flex items-center justify-center rounded-full text-xs font-medium transition-colors cursor-pointer",
               videoAspectRatio === ratio
-                ? "bg-background text-foreground shadow-sm"
-                : "text-foreground/50 hover:text-foreground/70"
+                ? "bg-foreground/10 text-foreground"
+                : "text-foreground/40 hover:text-foreground/60"
             )}
           >
             {ratio}

From 079aa2c279864f963bbabe58a8c22020fffc74f0 Mon Sep 17 00:00:00 2001
From: Abhishekucs <abhishekucskumar@gmail.com>
Date: Fri, 3 Apr 2026 09:44:42 +0530
Subject: [PATCH 4/8] style: hugeicons, plus/minus count, dropdowns, audio
 toggle, squircle generate

- Replace lucide icons with hugeicons throughout studio components
- Image count uses plus/minus buttons instead of toggle group
- Aspect ratio and resolution use Select dropdowns with icons
- Video mode adds audio on/off toggle with volume icon
- Generate button fills right side as a squircle column
- Textarea background matches prompt bar (transparent)
- Add imageResolution and videoAudio to Zustand store

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 components/studio/image-settings.tsx | 105 ++++++++++++++++++---------
 components/studio/mode-switcher.tsx  |  14 ++--
 components/studio/prompt-input.tsx   |  76 +++++++++----------
 components/studio/video-settings.tsx |  62 +++++++++++-----
 package-lock.json                    |  17 +++++
 package.json                         |   2 +
 store/useStudioStore.ts              |   8 ++
 7 files changed, 187 insertions(+), 97 deletions(-)

diff --git a/components/studio/image-settings.tsx b/components/studio/image-settings.tsx
index bfb35be..b65ea3e 100644
--- a/components/studio/image-settings.tsx
+++ b/components/studio/image-settings.tsx
@@ -1,5 +1,13 @@
 "use client";
 
+import { HugeiconsIcon } from "@hugeicons/react";
+import {
+  PaintBrush01Icon,
+  AspectRatioIcon,
+  Image01Icon,
+  PlusSignCircleIcon,
+  MinusSignCircleIcon,
+} from "@hugeicons/core-free-icons";
 import { useStudioStore } from "@/store/useStudioStore";
 import {
   Select,
@@ -8,10 +16,15 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { cn } from "@/lib/utils";
 import type { AspectRatio, ImageStyle } from "@/types/studio";
 
-const ASPECT_RATIOS: AspectRatio[] = ["1:1", "16:9", "9:16", "4:3"];
+const ASPECT_RATIOS: { value: AspectRatio; label: string }[] = [
+  { value: "1:1", label: "1:1 Square" },
+  { value: "16:9", label: "16:9 Landscape" },
+  { value: "9:16", label: "9:16 Portrait" },
+  { value: "4:3", label: "4:3 Standard" },
+  { value: "3:4", label: "3:4 Portrait" },
+];
 
 const STYLES: { value: ImageStyle; label: string }[] = [
   { value: "photorealistic", label: "Photorealistic" },
@@ -22,7 +35,11 @@ const STYLES: { value: ImageStyle; label: string }[] = [
   { value: "watercolor", label: "Watercolor" },
 ];
 
-const COUNTS = [1, 2, 3, 4];
+const RESOLUTIONS = [
+  { value: "1024", label: "1K" },
+  { value: "2048", label: "2K" },
+  { value: "4096", label: "4K" },
+];
 
 export function ImageSettings() {
   const {
@@ -32,13 +49,16 @@ export function ImageSettings() {
     setImageStyle,
     imageCount,
     setImageCount,
+    imageResolution,
+    setImageResolution,
   } = useStudioStore();
 
   return (
     <div className="flex items-center gap-2">
       {/* Style */}
       <Select value={imageStyle} onValueChange={(v) => setImageStyle(v as ImageStyle)}>
-        <SelectTrigger className="h-7 w-auto gap-1 text-xs bg-secondary/60 border-border/40 rounded-full px-3">
+        <SelectTrigger className="h-7 w-auto gap-1.5 text-xs bg-transparent border-border/40 rounded-full px-2.5">
+          <HugeiconsIcon icon={PaintBrush01Icon} size={14} />
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
@@ -50,41 +70,54 @@ export function ImageSettings() {
         </SelectContent>
       </Select>
 
-      {/* Count */}
-      <div className="flex items-center gap-0.5 bg-secondary/60 border border-border/40 rounded-full px-1 h-7">
-        {COUNTS.map((count) => (
-          <button
-            key={count}
-            onClick={() => setImageCount(count)}
-            className={cn(
-              "w-6 h-5 flex items-center justify-center rounded-full text-xs font-medium transition-colors cursor-pointer",
-              imageCount === count
-                ? "bg-foreground/10 text-foreground"
-                : "text-foreground/40 hover:text-foreground/60"
-            )}
-          >
-            {count}
-          </button>
-        ))}
+      {/* Count — plus/minus */}
+      <div className="flex items-center gap-1 h-7 border border-border/40 rounded-full px-1.5">
+        <HugeiconsIcon icon={Image01Icon} size={14} className="text-foreground/50" />
+        <button
+          onClick={() => setImageCount(Math.max(1, imageCount - 1))}
+          disabled={imageCount <= 1}
+          className="text-foreground/50 hover:text-foreground/80 disabled:opacity-30 cursor-pointer disabled:cursor-not-allowed transition-colors"
+        >
+          <HugeiconsIcon icon={MinusSignCircleIcon} size={14} />
+        </button>
+        <span className="text-xs font-medium text-foreground/70 w-4 text-center">{imageCount}</span>
+        <button
+          onClick={() => setImageCount(Math.min(4, imageCount + 1))}
+          disabled={imageCount >= 4}
+          className="text-foreground/50 hover:text-foreground/80 disabled:opacity-30 cursor-pointer disabled:cursor-not-allowed transition-colors"
+        >
+          <HugeiconsIcon icon={PlusSignCircleIcon} size={14} />
+        </button>
       </div>
 
       {/* Aspect Ratio */}
-      <div className="flex items-center gap-0.5 bg-secondary/60 border border-border/40 rounded-full px-1 h-7">
-        {ASPECT_RATIOS.map((ratio) => (
-          <button
-            key={ratio}
-            onClick={() => setImageAspectRatio(ratio)}
-            className={cn(
-              "px-2 h-5 flex items-center justify-center rounded-full text-xs font-medium transition-colors cursor-pointer",
-              imageAspectRatio === ratio
-                ? "bg-foreground/10 text-foreground"
-                : "text-foreground/40 hover:text-foreground/60"
-            )}
-          >
-            {ratio}
-          </button>
-        ))}
-      </div>
+      <Select value={imageAspectRatio} onValueChange={(v) => setImageAspectRatio(v as AspectRatio)}>
+        <SelectTrigger className="h-7 w-auto gap-1.5 text-xs bg-transparent border-border/40 rounded-full px-2.5">
+          <HugeiconsIcon icon={AspectRatioIcon} size={14} />
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {ASPECT_RATIOS.map(({ value, label }) => (
+            <SelectItem key={value} value={value} className="text-xs">
+              {label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      {/* Resolution */}
+      <Select value={imageResolution} onValueChange={setImageResolution}>
+        <SelectTrigger className="h-7 w-auto gap-1.5 text-xs bg-transparent border-border/40 rounded-full px-2.5">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {RESOLUTIONS.map(({ value, label }) => (
+            <SelectItem key={value} value={value} className="text-xs">
+              {label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
     </div>
   );
 }
diff --git a/components/studio/mode-switcher.tsx b/components/studio/mode-switcher.tsx
index 8b66119..b332ba5 100644
--- a/components/studio/mode-switcher.tsx
+++ b/components/studio/mode-switcher.tsx
@@ -1,13 +1,15 @@
 "use client";
 
-import { ImageIcon, Video } from "lucide-react";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Image01Icon, Film01Icon } from "@hugeicons/core-free-icons";
+import type { IconSvgElement } from "@hugeicons/react";
 import { useStudioStore } from "@/store/useStudioStore";
 import { cn } from "@/lib/utils";
 import type { StudioMode } from "@/types/studio";
 
-const modes: { value: StudioMode; icon: typeof ImageIcon; label: string }[] = [
-  { value: "image", icon: ImageIcon, label: "Image" },
-  { value: "video", icon: Video, label: "Video" },
+const modes: { value: StudioMode; icon: IconSvgElement; label: string }[] = [
+  { value: "image", icon: Image01Icon, label: "Image" },
+  { value: "video", icon: Film01Icon, label: "Video" },
 ];
 
 export function ModeSwitcher() {
@@ -15,7 +17,7 @@ export function ModeSwitcher() {
 
   return (
     <div className="flex flex-col gap-1.5 self-stretch justify-end pb-1">
-      {modes.map(({ value, icon: Icon, label }) => (
+      {modes.map(({ value, icon, label }) => (
         <button
           key={value}
           onClick={() => setMode(value)}
@@ -26,7 +28,7 @@ export function ModeSwitcher() {
               : "text-foreground/40 hover:text-foreground/60"
           )}
         >
-          <Icon className="h-4 w-4" />
+          <HugeiconsIcon icon={icon} size={16} />
           <span>{label}</span>
         </button>
       ))}
diff --git a/components/studio/prompt-input.tsx b/components/studio/prompt-input.tsx
index 5d77ff7..b7b4cff 100644
--- a/components/studio/prompt-input.tsx
+++ b/components/studio/prompt-input.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { useRef, useCallback, useState, KeyboardEvent, ReactNode, PointerEvent } from "react";
-import { ArrowUp } from "lucide-react";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { SparklesIcon } from "@hugeicons/core-free-icons";
 import { motion } from "framer-motion";
 import { useStudioStore } from "@/store/useStudioStore";
 import { Textarea } from "@/components/ui/textarea";
@@ -36,7 +37,6 @@ export function PromptInput({ children }: PromptInputProps) {
 
   const onPointerMove = useCallback((e: PointerEvent<HTMLDivElement>) => {
     if (!dragStart.current) return;
-    // Dragging up increases height
     const delta = dragStart.current.y - e.clientY;
     const newH = Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, dragStart.current.h + delta));
     setHeight(newH);
@@ -51,48 +51,50 @@ export function PromptInput({ children }: PromptInputProps) {
   return (
     <div
       ref={containerRef}
-      className="flex-1 flex flex-col bg-secondary/60 rounded-2xl border border-border/50 overflow-hidden"
+      className="flex-1 flex bg-secondary/60 rounded-2xl border border-border/50 overflow-hidden"
       style={{ height }}
     >
-      {/* Resize handle */}
-      <div
-        onPointerDown={onPointerDown}
-        onPointerMove={onPointerMove}
-        onPointerUp={onPointerUp}
-        className="flex items-center justify-center py-1.5 cursor-ns-resize shrink-0 group"
-      >
-        <div className="w-10 h-1 rounded-full bg-foreground/10 group-hover:bg-foreground/25 transition-colors" />
-      </div>
+      {/* Left: resize handle + textarea + settings */}
+      <div className="flex-1 flex flex-col min-w-0">
+        {/* Resize handle */}
+        <div
+          onPointerDown={onPointerDown}
+          onPointerMove={onPointerMove}
+          onPointerUp={onPointerUp}
+          className="flex items-center justify-center py-1.5 cursor-ns-resize shrink-0 group"
+        >
+          <div className="w-10 h-1 rounded-full bg-foreground/10 group-hover:bg-foreground/25 transition-colors" />
+        </div>
 
-      {/* Textarea fills available space */}
-      <div className="flex-1 px-4 overflow-hidden">
-        <Textarea
-          ref={textareaRef}
-          value={prompt}
-          onChange={(e) => setPrompt(e.target.value)}
-          onKeyDown={handleKeyDown}
-          placeholder="Describe your scene..."
-          className="w-full h-full resize-none border-0 bg-transparent p-0 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-foreground/30"
-        />
-      </div>
+        {/* Textarea */}
+        <div className="flex-1 px-4 overflow-hidden">
+          <Textarea
+            ref={textareaRef}
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Describe your scene..."
+            className="w-full h-full resize-none border-0 bg-transparent p-0 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-foreground/30"
+          />
+        </div>
 
-      {/* Bottom bar: settings left, generate button right */}
-      <div className="flex items-center justify-between gap-3 px-3 pb-3 pt-1 shrink-0">
-        <div className="flex items-center gap-2 overflow-x-auto no-scrollbar">
+        {/* Settings at bottom-left */}
+        <div className="flex items-center gap-2 px-3 pb-3 pt-1 shrink-0 overflow-x-auto no-scrollbar">
           {children}
         </div>
-
-        <motion.button
-          whileHover={{ scale: 1.03 }}
-          whileTap={{ scale: 0.96 }}
-          onClick={generate}
-          disabled={!canSubmit}
-          className="h-10 px-5 flex items-center gap-2 rounded-xl bg-[#F54E00] hover:bg-[#e04500] text-white text-sm font-semibold shrink-0 disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer transition-colors"
-        >
-          Generate
-          <ArrowUp className="h-4 w-4" strokeWidth={2.5} />
-        </motion.button>
       </div>
+
+      {/* Generate button — fills the right side as a squircle */}
+      <motion.button
+        whileHover={{ scale: 1.02 }}
+        whileTap={{ scale: 0.97 }}
+        onClick={generate}
+        disabled={!canSubmit}
+        className="w-16 flex flex-col items-center justify-center gap-1.5 bg-[#F54E00] hover:bg-[#e04500] text-white shrink-0 disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer transition-colors rounded-r-2xl"
+      >
+        <HugeiconsIcon icon={SparklesIcon} size={20} strokeWidth={2} />
+        <span className="text-[10px] font-semibold">Generate</span>
+      </motion.button>
     </div>
   );
 }
diff --git a/components/studio/video-settings.tsx b/components/studio/video-settings.tsx
index ff95cda..91cbd09 100644
--- a/components/studio/video-settings.tsx
+++ b/components/studio/video-settings.tsx
@@ -1,5 +1,12 @@
 "use client";
 
+import { HugeiconsIcon } from "@hugeicons/react";
+import {
+  AspectRatioIcon,
+  Clock01Icon,
+  VolumeHighIcon,
+  VolumeOffIcon,
+} from "@hugeicons/core-free-icons";
 import { useStudioStore } from "@/store/useStudioStore";
 import {
   Select,
@@ -12,7 +19,12 @@ import { FrameUpload } from "./frame-upload";
 import { cn } from "@/lib/utils";
 import type { AspectRatio } from "@/types/studio";
 
-const ASPECT_RATIOS: AspectRatio[] = ["1:1", "16:9", "9:16"];
+const ASPECT_RATIOS: { value: AspectRatio; label: string }[] = [
+  { value: "1:1", label: "1:1 Square" },
+  { value: "16:9", label: "16:9 Landscape" },
+  { value: "9:16", label: "9:16 Portrait" },
+];
+
 const DURATIONS = [5, 10, 15, 30];
 
 export function VideoSettings() {
@@ -25,6 +37,8 @@ export function VideoSettings() {
     setFirstFrame,
     lastFramePreview,
     setLastFrame,
+    videoAudio,
+    setVideoAudio,
   } = useStudioStore();
 
   return (
@@ -48,7 +62,8 @@ export function VideoSettings() {
         value={String(videoDuration)}
         onValueChange={(v) => setVideoDuration(Number(v))}
       >
-        <SelectTrigger className="h-7 w-auto gap-1 text-xs bg-secondary/60 border-border/40 rounded-full px-3">
+        <SelectTrigger className="h-7 w-auto gap-1.5 text-xs bg-transparent border-border/40 rounded-full px-2.5">
+          <HugeiconsIcon icon={Clock01Icon} size={14} />
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
@@ -61,22 +76,33 @@ export function VideoSettings() {
       </Select>
 
       {/* Aspect Ratio */}
-      <div className="flex items-center gap-0.5 bg-secondary/60 border border-border/40 rounded-full px-1 h-7">
-        {ASPECT_RATIOS.map((ratio) => (
-          <button
-            key={ratio}
-            onClick={() => setVideoAspectRatio(ratio)}
-            className={cn(
-              "px-2 h-5 flex items-center justify-center rounded-full text-xs font-medium transition-colors cursor-pointer",
-              videoAspectRatio === ratio
-                ? "bg-foreground/10 text-foreground"
-                : "text-foreground/40 hover:text-foreground/60"
-            )}
-          >
-            {ratio}
-          </button>
-        ))}
-      </div>
+      <Select value={videoAspectRatio} onValueChange={(v) => setVideoAspectRatio(v as AspectRatio)}>
+        <SelectTrigger className="h-7 w-auto gap-1.5 text-xs bg-transparent border-border/40 rounded-full px-2.5">
+          <HugeiconsIcon icon={AspectRatioIcon} size={14} />
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {ASPECT_RATIOS.map(({ value, label }) => (
+            <SelectItem key={value} value={value} className="text-xs">
+              {label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      {/* Audio toggle */}
+      <button
+        onClick={() => setVideoAudio(!videoAudio)}
+        className={cn(
+          "h-7 flex items-center gap-1.5 px-2.5 rounded-full border text-xs font-medium transition-colors cursor-pointer",
+          videoAudio
+            ? "border-[#F54E00]/30 bg-[#F54E00]/5 text-[#F54E00]"
+            : "border-border/40 text-foreground/50 hover:text-foreground/70"
+        )}
+      >
+        <HugeiconsIcon icon={videoAudio ? VolumeHighIcon : VolumeOffIcon} size={14} />
+        <span>Audio</span>
+      </button>
     </div>
   );
 }
diff --git a/package-lock.json b/package-lock.json
index aad6aec..3cf94e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "thinkingsoundlabwebsite",
       "version": "0.1.0",
       "dependencies": {
+        "@hugeicons/core-free-icons": "^4.1.1",
+        "@hugeicons/react": "^1.1.6",
         "@radix-ui/react-slot": "^1.2.3",
         "@tailwindcss/typography": "^0.5.19",
         "@vercel/analytics": "^1.5.0",
@@ -258,6 +260,21 @@
       "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
       "license": "MIT"
     },
+    "node_modules/@hugeicons/core-free-icons": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@hugeicons/core-free-icons/-/core-free-icons-4.1.1.tgz",
+      "integrity": "sha512-teqIBvPHl90ygIwKyJwTxOH8aNp1X1PjDTcMvLkEwdPxPD+8mssrZ5kXKIAJJFYPsz69a8LYQY0UPid4PAdavg==",
+      "license": "MIT"
+    },
+    "node_modules/@hugeicons/react": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@hugeicons/react/-/react-1.1.6.tgz",
+      "integrity": "sha512-c2LhXJMAW5wN1pC/smBXG0YPqUON6ceR/ZdXHCjEI9KvB+hjtqYjmzIxok5hAQOeXGz0WtORgCQMzqewFKAZwg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.0.0"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
diff --git a/package.json b/package.json
index 5e58d59..07ebab5 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,8 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@hugeicons/core-free-icons": "^4.1.1",
+    "@hugeicons/react": "^1.1.6",
     "@radix-ui/react-slot": "^1.2.3",
     "@tailwindcss/typography": "^0.5.19",
     "@vercel/analytics": "^1.5.0",
diff --git a/store/useStudioStore.ts b/store/useStudioStore.ts
index fb6b229..f52c2f9 100644
--- a/store/useStudioStore.ts
+++ b/store/useStudioStore.ts
@@ -19,9 +19,11 @@ interface StudioState {
   imageAspectRatio: AspectRatio;
   imageStyle: ImageStyle;
   imageCount: number;
+  imageResolution: string;
   setImageAspectRatio: (v: AspectRatio) => void;
   setImageStyle: (v: ImageStyle) => void;
   setImageCount: (v: number) => void;
+  setImageResolution: (v: string) => void;
 
   // Video settings
   videoAspectRatio: AspectRatio;
@@ -30,10 +32,12 @@ interface StudioState {
   firstFramePreview: string | null;
   lastFrame: File | null;
   lastFramePreview: string | null;
+  videoAudio: boolean;
   setVideoAspectRatio: (v: AspectRatio) => void;
   setVideoDuration: (v: number) => void;
   setFirstFrame: (file: File | null) => void;
   setLastFrame: (file: File | null) => void;
+  setVideoAudio: (v: boolean) => void;
 
   // Generation
   isGenerating: boolean;
@@ -62,9 +66,11 @@ export const useStudioStore = create<StudioState>((set, get) => ({
   imageAspectRatio: "1:1",
   imageStyle: "photorealistic",
   imageCount: 1,
+  imageResolution: "2048",
   setImageAspectRatio: (v) => set({ imageAspectRatio: v }),
   setImageStyle: (v) => set({ imageStyle: v }),
   setImageCount: (v) => set({ imageCount: v }),
+  setImageResolution: (v) => set({ imageResolution: v }),
 
   // Video settings
   videoAspectRatio: "16:9",
@@ -73,8 +79,10 @@ export const useStudioStore = create<StudioState>((set, get) => ({
   firstFramePreview: null,
   lastFrame: null,
   lastFramePreview: null,
+  videoAudio: true,
   setVideoAspectRatio: (v) => set({ videoAspectRatio: v }),
   setVideoDuration: (v) => set({ videoDuration: v }),
+  setVideoAudio: (v) => set({ videoAudio: v }),
   setFirstFrame: (file) => {
     const prev = get().firstFramePreview;
     if (prev) URL.revokeObjectURL(prev);

From b568e2fc5c1c5b20a173349e30ecf6e454b8b0e4 Mon Sep 17 00:00:00 2001
From: Abhishekucs <abhishekucskumar@gmail.com>
Date: Fri, 3 Apr 2026 10:09:16 +0530
Subject: [PATCH 5/8] style: refine studio prompt bar layout and settings

- Add subtle background to Image/Video mode toggle
- Remove textarea background color (transparent)
- Use rounded-md for all settings controls
- Replace style presets with AI model selector (Invook V2, Flux Pro, etc.)
- Uploaded images shown at top inside prompt bar with plus icon for more
- Generate button at bottom-right, half prompt bar height, no icon
- Add subtle upward gradient glow behind prompt + toggle bar
- Add attachments support to Zustand store

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 components/studio/frame-upload.tsx      |   2 +-
 components/studio/image-settings.tsx    |  38 +++----
 components/studio/mode-switcher.tsx     |   4 +-
 components/studio/prompt-input.tsx      | 125 +++++++++++++++++-------
 components/studio/studio-prompt-bar.tsx |   5 +-
 components/studio/video-settings.tsx    |  30 +++++-
 store/useStudioStore.ts                 |  30 ++++--
 types/studio.ts                         |  16 +--
 8 files changed, 172 insertions(+), 78 deletions(-)

diff --git a/components/studio/frame-upload.tsx b/components/studio/frame-upload.tsx
index b4e8938..47767c9 100644
--- a/components/studio/frame-upload.tsx
+++ b/components/studio/frame-upload.tsx
@@ -30,7 +30,7 @@ export function FrameUpload({ label, preview, onUpload }: FrameUploadProps) {
       <button
         onClick={() => inputRef.current?.click()}
         className={cn(
-          "flex items-center gap-1.5 h-7 px-3 rounded-full text-xs font-medium transition-colors border cursor-pointer",
+          "flex items-center gap-1.5 h-7 px-3 rounded-md text-xs font-medium transition-colors border cursor-pointer",
           preview
             ? "border-[#F54E00]/30 bg-[#F54E00]/5 text-[#F54E00]"
             : "border-border/40 bg-secondary/60 text-foreground/50 hover:text-foreground/70"
diff --git a/components/studio/image-settings.tsx b/components/studio/image-settings.tsx
index b65ea3e..dc7dc68 100644
--- a/components/studio/image-settings.tsx
+++ b/components/studio/image-settings.tsx
@@ -2,7 +2,7 @@
 
 import { HugeiconsIcon } from "@hugeicons/react";
 import {
-  PaintBrush01Icon,
+  ArtificialIntelligence01Icon,
   AspectRatioIcon,
   Image01Icon,
   PlusSignCircleIcon,
@@ -16,7 +16,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import type { AspectRatio, ImageStyle } from "@/types/studio";
+import type { AspectRatio, AIModel } from "@/types/studio";
 
 const ASPECT_RATIOS: { value: AspectRatio; label: string }[] = [
   { value: "1:1", label: "1:1 Square" },
@@ -26,13 +26,13 @@ const ASPECT_RATIOS: { value: AspectRatio; label: string }[] = [
   { value: "3:4", label: "3:4 Portrait" },
 ];
 
-const STYLES: { value: ImageStyle; label: string }[] = [
-  { value: "photorealistic", label: "Photorealistic" },
-  { value: "cinematic", label: "Cinematic" },
-  { value: "anime", label: "Anime" },
-  { value: "digital-art", label: "Digital Art" },
-  { value: "oil-painting", label: "Oil Painting" },
-  { value: "watercolor", label: "Watercolor" },
+const AI_MODELS: { value: AIModel; label: string }[] = [
+  { value: "invook-v2", label: "Invook V2" },
+  { value: "invook-v1", label: "Invook V1" },
+  { value: "flux-pro", label: "Flux Pro" },
+  { value: "stable-diffusion", label: "Stable Diffusion" },
+  { value: "dall-e", label: "DALL-E" },
+  { value: "midjourney", label: "Midjourney" },
 ];
 
 const RESOLUTIONS = [
@@ -45,8 +45,8 @@ export function ImageSettings() {
   const {
     imageAspectRatio,
     setImageAspectRatio,
-    imageStyle,
-    setImageStyle,
+    aiModel,
+    setAIModel,
     imageCount,
     setImageCount,
     imageResolution,
@@ -55,14 +55,14 @@ export function ImageSettings() {
 
   return (
     <div className="flex items-center gap-2">
-      {/* Style */}
-      <Select value={imageStyle} onValueChange={(v) => setImageStyle(v as ImageStyle)}>
-        <SelectTrigger className="h-7 w-auto gap-1.5 text-xs bg-transparent border-border/40 rounded-full px-2.5">
-          <HugeiconsIcon icon={PaintBrush01Icon} size={14} />
+      {/* AI Model */}
+      <Select value={aiModel} onValueChange={(v) => setAIModel(v as AIModel)}>
+        <SelectTrigger className="h-7 w-auto gap-1.5 text-xs bg-transparent border-border/40 rounded-md px-2.5">
+          <HugeiconsIcon icon={ArtificialIntelligence01Icon} size={14} />
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
-          {STYLES.map(({ value, label }) => (
+          {AI_MODELS.map(({ value, label }) => (
             <SelectItem key={value} value={value} className="text-xs">
               {label}
             </SelectItem>
@@ -71,7 +71,7 @@ export function ImageSettings() {
       </Select>
 
       {/* Count — plus/minus */}
-      <div className="flex items-center gap-1 h-7 border border-border/40 rounded-full px-1.5">
+      <div className="flex items-center gap-1 h-7 border border-border/40 rounded-md px-1.5">
         <HugeiconsIcon icon={Image01Icon} size={14} className="text-foreground/50" />
         <button
           onClick={() => setImageCount(Math.max(1, imageCount - 1))}
@@ -92,7 +92,7 @@ export function ImageSettings() {
 
       {/* Aspect Ratio */}
       <Select value={imageAspectRatio} onValueChange={(v) => setImageAspectRatio(v as AspectRatio)}>
-        <SelectTrigger className="h-7 w-auto gap-1.5 text-xs bg-transparent border-border/40 rounded-full px-2.5">
+        <SelectTrigger className="h-7 w-auto gap-1.5 text-xs bg-transparent border-border/40 rounded-md px-2.5">
           <HugeiconsIcon icon={AspectRatioIcon} size={14} />
           <SelectValue />
         </SelectTrigger>
@@ -107,7 +107,7 @@ export function ImageSettings() {
 
       {/* Resolution */}
       <Select value={imageResolution} onValueChange={setImageResolution}>
-        <SelectTrigger className="h-7 w-auto gap-1.5 text-xs bg-transparent border-border/40 rounded-full px-2.5">
+        <SelectTrigger className="h-7 w-auto gap-1.5 text-xs bg-transparent border-border/40 rounded-md px-2.5">
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
diff --git a/components/studio/mode-switcher.tsx b/components/studio/mode-switcher.tsx
index b332ba5..8be1465 100644
--- a/components/studio/mode-switcher.tsx
+++ b/components/studio/mode-switcher.tsx
@@ -16,7 +16,7 @@ export function ModeSwitcher() {
   const { mode, setMode } = useStudioStore();
 
   return (
-    <div className="flex flex-col gap-1.5 self-stretch justify-end pb-1">
+    <div className="flex flex-col gap-1.5 self-stretch justify-end pb-1 bg-secondary/30 rounded-2xl p-1.5">
       {modes.map(({ value, icon, label }) => (
         <button
           key={value}
@@ -24,7 +24,7 @@ export function ModeSwitcher() {
           className={cn(
             "flex flex-col items-center gap-1 px-2 py-2.5 rounded-xl text-[10px] font-medium transition-colors cursor-pointer w-14",
             mode === value
-              ? "bg-secondary/80 text-foreground border border-border/50"
+              ? "bg-secondary/80 text-foreground shadow-sm"
               : "text-foreground/40 hover:text-foreground/60"
           )}
         >
diff --git a/components/studio/prompt-input.tsx b/components/studio/prompt-input.tsx
index b7b4cff..e7bc3a5 100644
--- a/components/studio/prompt-input.tsx
+++ b/components/studio/prompt-input.tsx
@@ -2,8 +2,9 @@
 
 import { useRef, useCallback, useState, KeyboardEvent, ReactNode, PointerEvent } from "react";
 import { HugeiconsIcon } from "@hugeicons/react";
-import { SparklesIcon } from "@hugeicons/core-free-icons";
+import { PlusSignCircleIcon, Cancel01Icon } from "@hugeicons/core-free-icons";
 import { motion } from "framer-motion";
+import Image from "next/image";
 import { useStudioStore } from "@/store/useStudioStore";
 import { Textarea } from "@/components/ui/textarea";
 
@@ -16,8 +17,9 @@ const MAX_HEIGHT = 400;
 const DEFAULT_HEIGHT = 180;
 
 export function PromptInput({ children }: PromptInputProps) {
-  const { prompt, setPrompt, isGenerating, generate } = useStudioStore();
+  const { prompt, setPrompt, isGenerating, generate, attachments, addAttachment, removeAttachment } = useStudioStore();
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState(DEFAULT_HEIGHT);
   const dragStart = useRef<{ y: number; h: number } | null>(null);
@@ -51,50 +53,97 @@ export function PromptInput({ children }: PromptInputProps) {
   return (
     <div
       ref={containerRef}
-      className="flex-1 flex bg-secondary/60 rounded-2xl border border-border/50 overflow-hidden"
+      className="flex-1 flex flex-col bg-secondary/60 rounded-2xl border border-border/50 overflow-hidden"
       style={{ height }}
     >
-      {/* Left: resize handle + textarea + settings */}
-      <div className="flex-1 flex flex-col min-w-0">
-        {/* Resize handle */}
-        <div
-          onPointerDown={onPointerDown}
-          onPointerMove={onPointerMove}
-          onPointerUp={onPointerUp}
-          className="flex items-center justify-center py-1.5 cursor-ns-resize shrink-0 group"
-        >
-          <div className="w-10 h-1 rounded-full bg-foreground/10 group-hover:bg-foreground/25 transition-colors" />
-        </div>
+      {/* Resize handle */}
+      <div
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+        className="flex items-center justify-center py-1.5 cursor-ns-resize shrink-0 group"
+      >
+        <div className="w-10 h-1 rounded-full bg-foreground/10 group-hover:bg-foreground/25 transition-colors" />
+      </div>
 
-        {/* Textarea */}
-        <div className="flex-1 px-4 overflow-hidden">
-          <Textarea
-            ref={textareaRef}
-            value={prompt}
-            onChange={(e) => setPrompt(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder="Describe your scene..."
-            className="w-full h-full resize-none border-0 bg-transparent p-0 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-foreground/30"
-          />
+      {/* Attachments row at top */}
+      {attachments.length > 0 && (
+        <div className="flex items-center gap-2 px-3 pb-2 shrink-0 overflow-x-auto no-scrollbar">
+          {attachments.map((att, i) => (
+            <div key={i} className="relative group/att shrink-0">
+              <div className="relative h-12 w-12 rounded-lg overflow-hidden border border-border/30">
+                <Image src={att.preview} alt={`Attachment ${i + 1}`} fill className="object-cover" unoptimized />
+              </div>
+              <button
+                onClick={() => removeAttachment(i)}
+                className="absolute -top-1.5 -right-1.5 h-4 w-4 flex items-center justify-center rounded-full bg-foreground/80 text-background opacity-0 group-hover/att:opacity-100 transition-opacity cursor-pointer"
+              >
+                <HugeiconsIcon icon={Cancel01Icon} size={10} />
+              </button>
+            </div>
+          ))}
+          <button
+            onClick={() => fileInputRef.current?.click()}
+            className="h-12 w-12 flex items-center justify-center rounded-lg border border-dashed border-border/40 text-foreground/30 hover:text-foreground/50 hover:border-border/60 transition-colors cursor-pointer shrink-0"
+          >
+            <HugeiconsIcon icon={PlusSignCircleIcon} size={18} />
+          </button>
         </div>
+      )}
+
+      {/* Hidden file input for attachments */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/*"
+        multiple
+        className="hidden"
+        onChange={(e) => {
+          const files = e.target.files;
+          if (files) Array.from(files).forEach(addAttachment);
+          e.target.value = "";
+        }}
+      />
 
-        {/* Settings at bottom-left */}
-        <div className="flex items-center gap-2 px-3 pb-3 pt-1 shrink-0 overflow-x-auto no-scrollbar">
+      {/* Textarea */}
+      <div className="flex-1 px-4 overflow-hidden">
+        <Textarea
+          ref={textareaRef}
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Describe your scene..."
+          className="w-full h-full resize-none border-0 bg-transparent p-0 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-foreground/30"
+        />
+      </div>
+
+      {/* Bottom: settings left, generate button right */}
+      <div className="flex items-end justify-between gap-3 px-3 pb-3 pt-1 shrink-0">
+        <div className="flex items-center gap-2 overflow-x-auto no-scrollbar flex-1 min-w-0">
+          {/* Add image button when no attachments */}
+          {attachments.length === 0 && (
+            <button
+              onClick={() => fileInputRef.current?.click()}
+              className="h-7 w-7 flex items-center justify-center rounded-md border border-border/40 text-foreground/40 hover:text-foreground/60 hover:border-border/60 transition-colors cursor-pointer shrink-0"
+            >
+              <HugeiconsIcon icon={PlusSignCircleIcon} size={14} />
+            </button>
+          )}
           {children}
         </div>
-      </div>
 
-      {/* Generate button — fills the right side as a squircle */}
-      <motion.button
-        whileHover={{ scale: 1.02 }}
-        whileTap={{ scale: 0.97 }}
-        onClick={generate}
-        disabled={!canSubmit}
-        className="w-16 flex flex-col items-center justify-center gap-1.5 bg-[#F54E00] hover:bg-[#e04500] text-white shrink-0 disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer transition-colors rounded-r-2xl"
-      >
-        <HugeiconsIcon icon={SparklesIcon} size={20} strokeWidth={2} />
-        <span className="text-[10px] font-semibold">Generate</span>
-      </motion.button>
+        {/* Generate button — bottom right, half the prompt bar height */}
+        <motion.button
+          whileHover={{ scale: 1.02 }}
+          whileTap={{ scale: 0.97 }}
+          onClick={generate}
+          disabled={!canSubmit}
+          style={{ height: DEFAULT_HEIGHT / 2 }}
+          className="w-24 flex items-center justify-center bg-[#F54E00] hover:bg-[#e04500] text-white text-sm font-semibold shrink-0 disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer transition-colors rounded-xl"
+        >
+          Generate
+        </motion.button>
+      </div>
     </div>
   );
 }
diff --git a/components/studio/studio-prompt-bar.tsx b/components/studio/studio-prompt-bar.tsx
index 4787cb3..9cc628d 100644
--- a/components/studio/studio-prompt-bar.tsx
+++ b/components/studio/studio-prompt-bar.tsx
@@ -17,7 +17,10 @@ export function StudioPromptBar() {
       transition={{ duration: 0.5, delay: 0.3, ease: "easeOut" }}
       className="fixed bottom-0 left-0 right-0 z-50 pb-6 px-4"
     >
-      <div className="max-w-3xl mx-auto flex items-stretch gap-3">
+      {/* Subtle upward gradient glow */}
+      <div className="absolute inset-0 -top-32 pointer-events-none bg-gradient-to-t from-background/80 via-background/30 to-transparent" />
+
+      <div className="relative max-w-3xl mx-auto flex items-stretch gap-3">
         <ModeSwitcher />
         <PromptInput>
           <AnimatePresence mode="wait">
diff --git a/components/studio/video-settings.tsx b/components/studio/video-settings.tsx
index 91cbd09..c20c5c9 100644
--- a/components/studio/video-settings.tsx
+++ b/components/studio/video-settings.tsx
@@ -6,6 +6,7 @@ import {
   Clock01Icon,
   VolumeHighIcon,
   VolumeOffIcon,
+  ArtificialIntelligence01Icon,
 } from "@hugeicons/core-free-icons";
 import { useStudioStore } from "@/store/useStudioStore";
 import {
@@ -27,6 +28,12 @@ const ASPECT_RATIOS: { value: AspectRatio; label: string }[] = [
 
 const DURATIONS = [5, 10, 15, 30];
 
+const VIDEO_MODELS = [
+  { value: "invook-v2", label: "Invook V2" },
+  { value: "invook-v1", label: "Invook V1" },
+  { value: "stable-diffusion", label: "Stable Diffusion" },
+];
+
 export function VideoSettings() {
   const {
     videoAspectRatio,
@@ -39,10 +46,27 @@ export function VideoSettings() {
     setLastFrame,
     videoAudio,
     setVideoAudio,
+    aiModel,
+    setAIModel,
   } = useStudioStore();
 
   return (
     <div className="flex items-center gap-2">
+      {/* AI Model */}
+      <Select value={aiModel} onValueChange={(v) => setAIModel(v as typeof aiModel)}>
+        <SelectTrigger className="h-7 w-auto gap-1.5 text-xs bg-transparent border-border/40 rounded-md px-2.5">
+          <HugeiconsIcon icon={ArtificialIntelligence01Icon} size={14} />
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {VIDEO_MODELS.map(({ value, label }) => (
+            <SelectItem key={value} value={value} className="text-xs">
+              {label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
       {/* First Frame */}
       <FrameUpload
         label="First Frame"
@@ -62,7 +86,7 @@ export function VideoSettings() {
         value={String(videoDuration)}
         onValueChange={(v) => setVideoDuration(Number(v))}
       >
-        <SelectTrigger className="h-7 w-auto gap-1.5 text-xs bg-transparent border-border/40 rounded-full px-2.5">
+        <SelectTrigger className="h-7 w-auto gap-1.5 text-xs bg-transparent border-border/40 rounded-md px-2.5">
           <HugeiconsIcon icon={Clock01Icon} size={14} />
           <SelectValue />
         </SelectTrigger>
@@ -77,7 +101,7 @@ export function VideoSettings() {
 
       {/* Aspect Ratio */}
       <Select value={videoAspectRatio} onValueChange={(v) => setVideoAspectRatio(v as AspectRatio)}>
-        <SelectTrigger className="h-7 w-auto gap-1.5 text-xs bg-transparent border-border/40 rounded-full px-2.5">
+        <SelectTrigger className="h-7 w-auto gap-1.5 text-xs bg-transparent border-border/40 rounded-md px-2.5">
           <HugeiconsIcon icon={AspectRatioIcon} size={14} />
           <SelectValue />
         </SelectTrigger>
@@ -94,7 +118,7 @@ export function VideoSettings() {
       <button
         onClick={() => setVideoAudio(!videoAudio)}
         className={cn(
-          "h-7 flex items-center gap-1.5 px-2.5 rounded-full border text-xs font-medium transition-colors cursor-pointer",
+          "h-7 flex items-center gap-1.5 px-2.5 rounded-md border text-xs font-medium transition-colors cursor-pointer",
           videoAudio
             ? "border-[#F54E00]/30 bg-[#F54E00]/5 text-[#F54E00]"
             : "border-border/40 text-foreground/50 hover:text-foreground/70"
diff --git a/store/useStudioStore.ts b/store/useStudioStore.ts
index f52c2f9..774b13f 100644
--- a/store/useStudioStore.ts
+++ b/store/useStudioStore.ts
@@ -2,7 +2,7 @@ import { create } from "zustand";
 import type {
   StudioMode,
   AspectRatio,
-  ImageStyle,
+  AIModel,
   GenerationResult,
 } from "@/types/studio";
 
@@ -15,13 +15,18 @@ interface StudioState {
   prompt: string;
   setPrompt: (prompt: string) => void;
 
+  // Attachments (shared across modes)
+  attachments: { file: File; preview: string }[];
+  addAttachment: (file: File) => void;
+  removeAttachment: (index: number) => void;
+
   // Image settings
   imageAspectRatio: AspectRatio;
-  imageStyle: ImageStyle;
+  aiModel: AIModel;
   imageCount: number;
   imageResolution: string;
   setImageAspectRatio: (v: AspectRatio) => void;
-  setImageStyle: (v: ImageStyle) => void;
+  setAIModel: (v: AIModel) => void;
   setImageCount: (v: number) => void;
   setImageResolution: (v: string) => void;
 
@@ -62,13 +67,26 @@ export const useStudioStore = create<StudioState>((set, get) => ({
   prompt: "",
   setPrompt: (prompt) => set({ prompt }),
 
+  // Attachments
+  attachments: [],
+  addAttachment: (file) => {
+    const preview = URL.createObjectURL(file);
+    set((s) => ({ attachments: [...s.attachments, { file, preview }] }));
+  },
+  removeAttachment: (index) => {
+    const attachments = get().attachments;
+    const removed = attachments[index];
+    if (removed) URL.revokeObjectURL(removed.preview);
+    set({ attachments: attachments.filter((_, i) => i !== index) });
+  },
+
   // Image settings
   imageAspectRatio: "1:1",
-  imageStyle: "photorealistic",
+  aiModel: "invook-v2",
   imageCount: 1,
   imageResolution: "2048",
   setImageAspectRatio: (v) => set({ imageAspectRatio: v }),
-  setImageStyle: (v) => set({ imageStyle: v }),
+  setAIModel: (v) => set({ aiModel: v }),
   setImageCount: (v) => set({ imageCount: v }),
   setImageResolution: (v) => set({ imageResolution: v }),
 
@@ -122,7 +140,7 @@ export const useStudioStore = create<StudioState>((set, get) => ({
           state.mode === "image"
             ? {
                 aspectRatio: state.imageAspectRatio,
-                style: state.imageStyle,
+                model: state.aiModel,
                 count: state.imageCount,
               }
             : {
diff --git a/types/studio.ts b/types/studio.ts
index 27a7724..b73efc5 100644
--- a/types/studio.ts
+++ b/types/studio.ts
@@ -2,17 +2,17 @@ export type StudioMode = "image" | "video";
 
 export type AspectRatio = "1:1" | "16:9" | "9:16" | "4:3" | "3:4";
 
-export type ImageStyle =
-  | "photorealistic"
-  | "cinematic"
-  | "anime"
-  | "digital-art"
-  | "oil-painting"
-  | "watercolor";
+export type AIModel =
+  | "invook-v1"
+  | "invook-v2"
+  | "flux-pro"
+  | "stable-diffusion"
+  | "dall-e"
+  | "midjourney";
 
 export interface ImageGenerationSettings {
   aspectRatio: AspectRatio;
-  style: ImageStyle;
+  model: AIModel;
   count: number;
 }
 

From e6d7fdbe0d4dfb878c42686ded43e5ac29adcd7a Mon Sep 17 00:00:00 2001
From: Abhishekucs <abhishekucskumar@gmail.com>
Date: Fri, 3 Apr 2026 10:18:25 +0530
Subject: [PATCH 6/8] style: fix mode toggle height, gradient, aspect ratio
 labels, audio color

- Mode toggle background wraps content (self-end, no stretch)
- Prompt bar widened to max-w-4xl
- Aspect ratio dropdowns show numbers only (1:1, 16:9, etc.)
- Audio toggle uses neutral foreground color instead of red
- Gradient uses inline style with CSS var for proper rendering
- Gradient covers 320px upward from bottom

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 components/studio/image-settings.tsx    | 14 ++----
 components/studio/mode-switcher.tsx     |  4 +-
 components/studio/studio-prompt-bar.tsx | 66 ++++++++++++++-----------
 components/studio/video-settings.tsx    | 14 ++----
 4 files changed, 48 insertions(+), 50 deletions(-)

diff --git a/components/studio/image-settings.tsx b/components/studio/image-settings.tsx
index dc7dc68..d3ba016 100644
--- a/components/studio/image-settings.tsx
+++ b/components/studio/image-settings.tsx
@@ -18,13 +18,7 @@ import {
 } from "@/components/ui/select";
 import type { AspectRatio, AIModel } from "@/types/studio";
 
-const ASPECT_RATIOS: { value: AspectRatio; label: string }[] = [
-  { value: "1:1", label: "1:1 Square" },
-  { value: "16:9", label: "16:9 Landscape" },
-  { value: "9:16", label: "9:16 Portrait" },
-  { value: "4:3", label: "4:3 Standard" },
-  { value: "3:4", label: "3:4 Portrait" },
-];
+const ASPECT_RATIOS: AspectRatio[] = ["1:1", "16:9", "9:16", "4:3", "3:4"];
 
 const AI_MODELS: { value: AIModel; label: string }[] = [
   { value: "invook-v2", label: "Invook V2" },
@@ -97,9 +91,9 @@ export function ImageSettings() {
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
-          {ASPECT_RATIOS.map(({ value, label }) => (
-            <SelectItem key={value} value={value} className="text-xs">
-              {label}
+          {ASPECT_RATIOS.map((ratio) => (
+            <SelectItem key={ratio} value={ratio} className="text-xs">
+              {ratio}
             </SelectItem>
           ))}
         </SelectContent>
diff --git a/components/studio/mode-switcher.tsx b/components/studio/mode-switcher.tsx
index 8be1465..e1b1acb 100644
--- a/components/studio/mode-switcher.tsx
+++ b/components/studio/mode-switcher.tsx
@@ -16,13 +16,13 @@ export function ModeSwitcher() {
   const { mode, setMode } = useStudioStore();
 
   return (
-    <div className="flex flex-col gap-1.5 self-stretch justify-end pb-1 bg-secondary/30 rounded-2xl p-1.5">
+    <div className="flex flex-col gap-1 bg-secondary/30 rounded-xl p-1 self-end">
       {modes.map(({ value, icon, label }) => (
         <button
           key={value}
           onClick={() => setMode(value)}
           className={cn(
-            "flex flex-col items-center gap-1 px-2 py-2.5 rounded-xl text-[10px] font-medium transition-colors cursor-pointer w-14",
+            "flex flex-col items-center gap-1 px-2 py-2 rounded-lg text-[10px] font-medium transition-colors cursor-pointer w-14",
             mode === value
               ? "bg-secondary/80 text-foreground shadow-sm"
               : "text-foreground/40 hover:text-foreground/60"
diff --git a/components/studio/studio-prompt-bar.tsx b/components/studio/studio-prompt-bar.tsx
index 9cc628d..d66312b 100644
--- a/components/studio/studio-prompt-bar.tsx
+++ b/components/studio/studio-prompt-bar.tsx
@@ -15,38 +15,46 @@ export function StudioPromptBar() {
       initial={{ y: 50, opacity: 0 }}
       animate={{ y: 0, opacity: 1 }}
       transition={{ duration: 0.5, delay: 0.3, ease: "easeOut" }}
-      className="fixed bottom-0 left-0 right-0 z-50 pb-6 px-4"
+      className="fixed bottom-0 left-0 right-0 z-50"
     >
       {/* Subtle upward gradient glow */}
-      <div className="absolute inset-0 -top-32 pointer-events-none bg-gradient-to-t from-background/80 via-background/30 to-transparent" />
+      <div
+        className="absolute bottom-0 left-0 right-0 h-80 pointer-events-none"
+        style={{
+          background: "linear-gradient(to top, var(--background) 0%, transparent 100%)",
+          opacity: 0.85,
+        }}
+      />
 
-      <div className="relative max-w-3xl mx-auto flex items-stretch gap-3">
-        <ModeSwitcher />
-        <PromptInput>
-          <AnimatePresence mode="wait">
-            {mode === "image" ? (
-              <motion.div
-                key="image-settings"
-                initial={{ opacity: 0, y: 5 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: -5 }}
-                transition={{ duration: 0.15 }}
-              >
-                <ImageSettings />
-              </motion.div>
-            ) : (
-              <motion.div
-                key="video-settings"
-                initial={{ opacity: 0, y: 5 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: -5 }}
-                transition={{ duration: 0.15 }}
-              >
-                <VideoSettings />
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </PromptInput>
+      <div className="relative pb-6 px-4">
+        <div className="max-w-4xl mx-auto flex items-end gap-3">
+          <ModeSwitcher />
+          <PromptInput>
+            <AnimatePresence mode="wait">
+              {mode === "image" ? (
+                <motion.div
+                  key="image-settings"
+                  initial={{ opacity: 0, y: 5 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -5 }}
+                  transition={{ duration: 0.15 }}
+                >
+                  <ImageSettings />
+                </motion.div>
+              ) : (
+                <motion.div
+                  key="video-settings"
+                  initial={{ opacity: 0, y: 5 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -5 }}
+                  transition={{ duration: 0.15 }}
+                >
+                  <VideoSettings />
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </PromptInput>
+        </div>
       </div>
     </motion.div>
   );
diff --git a/components/studio/video-settings.tsx b/components/studio/video-settings.tsx
index c20c5c9..316c899 100644
--- a/components/studio/video-settings.tsx
+++ b/components/studio/video-settings.tsx
@@ -20,11 +20,7 @@ import { FrameUpload } from "./frame-upload";
 import { cn } from "@/lib/utils";
 import type { AspectRatio } from "@/types/studio";
 
-const ASPECT_RATIOS: { value: AspectRatio; label: string }[] = [
-  { value: "1:1", label: "1:1 Square" },
-  { value: "16:9", label: "16:9 Landscape" },
-  { value: "9:16", label: "9:16 Portrait" },
-];
+const ASPECT_RATIOS: AspectRatio[] = ["1:1", "16:9", "9:16"];
 
 const DURATIONS = [5, 10, 15, 30];
 
@@ -106,9 +102,9 @@ export function VideoSettings() {
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
-          {ASPECT_RATIOS.map(({ value, label }) => (
-            <SelectItem key={value} value={value} className="text-xs">
-              {label}
+          {ASPECT_RATIOS.map((ratio) => (
+            <SelectItem key={ratio} value={ratio} className="text-xs">
+              {ratio}
             </SelectItem>
           ))}
         </SelectContent>
@@ -120,7 +116,7 @@ export function VideoSettings() {
         className={cn(
           "h-7 flex items-center gap-1.5 px-2.5 rounded-md border text-xs font-medium transition-colors cursor-pointer",
           videoAudio
-            ? "border-[#F54E00]/30 bg-[#F54E00]/5 text-[#F54E00]"
+            ? "border-foreground/20 bg-foreground/5 text-foreground"
             : "border-border/40 text-foreground/50 hover:text-foreground/70"
         )}
       >

From 38115d96b651b34eae0a659315cee753731ba966 Mon Sep 17 00:00:00 2001
From: Abhishekucs <abhishekucskumar@gmail.com>
Date: Fri, 3 Apr 2026 14:30:41 +0530
Subject: [PATCH 7/8] Add studio gallery viewer and mobile controls

---
 AGENTS.md                                   |  42 +++
 app/api/studio/generate/image/route.ts      | 108 +++++++
 app/api/studio/generate/status/route.ts     |  97 ++++++
 app/api/studio/generate/video/route.ts      | 114 +++++++
 app/studio/studio-page.tsx                  |  13 +-
 components/studio/duration-picker.tsx       |  52 ++++
 components/studio/frame-upload.tsx          | 126 +++++++-
 components/studio/generation-display.tsx    | 115 ++++---
 components/studio/generation-loading.tsx    |  82 +++--
 components/studio/image-settings.tsx        | 176 ++++++-----
 components/studio/mode-switcher.tsx         |  26 +-
 components/studio/prompt-footer.tsx         | 118 +++++++
 components/studio/prompt-input.tsx          | 261 +++++++++-------
 components/studio/setting-picker.tsx        | 227 ++++++++++++++
 components/studio/studio-canvas.tsx         |  85 +++++-
 components/studio/studio-gallery-viewer.tsx | 182 +++++++++++
 components/studio/studio-prompt-bar.tsx     | 101 +++---
 components/studio/video-settings.tsx        | 149 ++++-----
 hooks/use-generate-image.ts                 | 146 +++++++++
 hooks/use-generate-video.ts                 | 149 +++++++++
 hooks/use-studio-gallery-viewer.ts          |  72 +++++
 hooks/use-studio-generation.ts              | 163 ++++++++++
 lib/fal/studio.ts                           | 322 ++++++++++++++++++++
 lib/studio-drag.ts                          |  76 +++++
 package-lock.json                           |  39 +++
 package.json                                |   1 +
 store/useStudioStore.ts                     | 195 ++++++------
 types/studio.ts                             | 100 +++++-
 28 files changed, 2833 insertions(+), 504 deletions(-)
 create mode 100644 AGENTS.md
 create mode 100644 app/api/studio/generate/image/route.ts
 create mode 100644 app/api/studio/generate/status/route.ts
 create mode 100644 app/api/studio/generate/video/route.ts
 create mode 100644 components/studio/duration-picker.tsx
 create mode 100644 components/studio/prompt-footer.tsx
 create mode 100644 components/studio/setting-picker.tsx
 create mode 100644 components/studio/studio-gallery-viewer.tsx
 create mode 100644 hooks/use-generate-image.ts
 create mode 100644 hooks/use-generate-video.ts
 create mode 100644 hooks/use-studio-gallery-viewer.ts
 create mode 100644 hooks/use-studio-generation.ts
 create mode 100644 lib/fal/studio.ts
 create mode 100644 lib/studio-drag.ts

diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..7c5546e
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,42 @@
+# AGENTS.md
+
+This file provides guidance to Codex (Codex.ai/code) when working with code in this repository.
+
+## Development Commands
+
+- **Start development server**: `npm run dev` (opens at http://localhost:3000)
+- **Build for production**: `npm run build`
+- **Start production server**: `npm start`
+- **Lint code**: `npm run lint`
+
+## Project Architecture
+
+This is a Next.js 15 application using the App Router architecture with TypeScript and Tailwind CSS.
+
+### Key Structure
+- `/app/` - Next.js App Router directory containing pages and layouts
+- `/app/layout.tsx` - Root layout with Geist font configuration and global styles
+- `/app/page.tsx` - Homepage component
+- `/app/globals.css` - Global styles with Tailwind CSS and custom CSS variables
+
+### Technology Stack
+- **Framework**: Next.js 15.5.4 with App Router
+- **Language**: TypeScript with strict mode enabled
+- **Styling**: Tailwind CSS 4 with custom CSS variables for theming
+- **UI Components**: shadcn/ui for all UI components
+- **Fonts**: Inter font family (update from Geist)
+- **Linting**: ESLint with Next.js configuration
+
+### Development Guidelines
+- **UI Components**: Always use shadcn/ui components for consistent design system
+- **Font**: Use Inter font family instead of Geist for better readability
+- **Code Style**: Keep code simple, clean, and well-organized
+- **File Organization**: Create proper file and folder structure with clear naming conventions
+
+### Styling System
+- Uses Tailwind CSS with a custom theme configuration in `globals.css`
+- CSS variables for background/foreground colors with automatic dark mode support
+- Font variables should be configured for Inter font family
+
+### Path Configuration
+- `@/*` alias points to the root directory for imports
\ No newline at end of file
diff --git a/app/api/studio/generate/image/route.ts b/app/api/studio/generate/image/route.ts
new file mode 100644
index 0000000..a47e4df
--- /dev/null
+++ b/app/api/studio/generate/image/route.ts
@@ -0,0 +1,108 @@
+import { NextRequest, NextResponse } from "next/server";
+import {
+  FAL_STUDIO_ENDPOINTS,
+  createGenerationErrorResponse,
+  submitImageGeneration,
+} from "@/lib/fal/studio";
+import type {
+  ImageAspectRatio,
+  ImageGenerationSettings,
+  ImageResolution,
+} from "@/types/studio";
+
+const IMAGE_ASPECT_RATIOS: ImageAspectRatio[] = [
+  "auto",
+  "1:1",
+  "16:9",
+  "9:16",
+  "4:3",
+  "3:4",
+];
+
+const IMAGE_RESOLUTIONS: ImageResolution[] = ["1024", "2048", "4096"];
+
+function parseImageSettings(
+  prompt: string,
+  aspectRatioValue: FormDataEntryValue | null,
+  countValue: FormDataEntryValue | null,
+  resolutionValue: FormDataEntryValue | null,
+  attachments: File[]
+): ImageGenerationSettings {
+  const aspectRatio = IMAGE_ASPECT_RATIOS.includes(
+    aspectRatioValue as ImageAspectRatio
+  )
+    ? (aspectRatioValue as ImageAspectRatio)
+    : "1:1";
+  const count = Math.min(
+    4,
+    Math.max(1, Number.parseInt(String(countValue ?? "1"), 10) || 1)
+  );
+  const resolution = IMAGE_RESOLUTIONS.includes(
+    resolutionValue as ImageResolution
+  )
+    ? (resolutionValue as ImageResolution)
+    : "2048";
+
+  return {
+    aspectRatio,
+    model: "nano-banana-2",
+    count,
+    resolution,
+    isEdit: attachments.length > 0,
+    attachmentCount: attachments.length,
+  };
+}
+
+export async function POST(request: NextRequest) {
+  const formData = await request.formData();
+  const prompt = String(formData.get("prompt") ?? "").trim();
+  const attachments = formData
+    .getAll("attachments")
+    .filter((entry): entry is File => entry instanceof File && entry.size > 0);
+  const settings = parseImageSettings(
+    prompt,
+    formData.get("aspectRatio"),
+    formData.get("count"),
+    formData.get("resolution"),
+    attachments
+  );
+  const providerModel = settings.isEdit
+    ? FAL_STUDIO_ENDPOINTS.imageEdit
+    : FAL_STUDIO_ENDPOINTS.image;
+
+  if (!prompt) {
+    return NextResponse.json(
+      createGenerationErrorResponse(
+        "image",
+        prompt,
+        providerModel,
+        settings,
+        new Error("Prompt is required.")
+      ),
+      { status: 400 }
+    );
+  }
+
+  try {
+    const generation = await submitImageGeneration({
+      prompt,
+      aspectRatio: settings.aspectRatio,
+      count: settings.count,
+      resolution: settings.resolution,
+      attachments,
+    });
+
+    return NextResponse.json(generation.response);
+  } catch (error) {
+    return NextResponse.json(
+      createGenerationErrorResponse(
+        "image",
+        prompt,
+        providerModel,
+        settings,
+        error
+      ),
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/api/studio/generate/status/route.ts b/app/api/studio/generate/status/route.ts
new file mode 100644
index 0000000..c4af848
--- /dev/null
+++ b/app/api/studio/generate/status/route.ts
@@ -0,0 +1,97 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getGenerationStatus } from "@/lib/fal/studio";
+import type {
+  GenerationJobResponse,
+  ImageGenerationSettings,
+  StudioMode,
+  VideoGenerationSettings,
+} from "@/types/studio";
+
+function parseRequestSettings(
+  mode: StudioMode,
+  payload: string | null
+): ImageGenerationSettings | VideoGenerationSettings {
+  if (!payload) {
+    throw new Error("Missing request settings.");
+  }
+
+  const parsed = JSON.parse(payload) as
+    | ImageGenerationSettings
+    | VideoGenerationSettings;
+
+  if (mode === "image" && parsed.model !== "nano-banana-2") {
+    throw new Error("Invalid image request settings.");
+  }
+
+  if (mode === "video" && parsed.model !== "kling-3") {
+    throw new Error("Invalid video request settings.");
+  }
+
+  return parsed;
+}
+
+export async function POST(request: NextRequest) {
+  const body = (await request.json()) as {
+    requestId?: string;
+    endpointId?: string;
+    type?: StudioMode;
+    prompt?: string;
+    requestSettings?: string;
+  };
+  const requestId = body.requestId ?? null;
+  const endpointId = body.endpointId ?? null;
+  const type = body.type ?? null;
+  const prompt = body.prompt ?? "";
+  const requestSettingsPayload = body.requestSettings ?? null;
+
+  if (!requestId || !endpointId || (type !== "image" && type !== "video")) {
+    return NextResponse.json(
+      {
+        error: "Missing required generation status parameters.",
+      },
+      { status: 400 }
+    );
+  }
+
+  try {
+    const requestSettings = parseRequestSettings(type, requestSettingsPayload);
+    const response = await getGenerationStatus(
+      endpointId,
+      requestId,
+      prompt,
+      type,
+      requestSettings
+    );
+
+    return NextResponse.json(response);
+  } catch (error) {
+    const failure: GenerationJobResponse = {
+      jobId: requestId,
+      status: "failed",
+      type,
+      outputs: [],
+      prompt,
+      providerModel: endpointId,
+      requestSettings:
+        type === "image"
+          ? {
+              aspectRatio: "1:1",
+              model: "nano-banana-2",
+              count: 1,
+              resolution: "2048",
+              isEdit: false,
+              attachmentCount: 0,
+            }
+          : {
+              aspectRatio: "16:9",
+              duration: 5,
+              model: "kling-3",
+              audio: true,
+            },
+      createdAt: new Date().toISOString(),
+      error: error instanceof Error ? error.message : "Failed to fetch status.",
+    };
+
+    return NextResponse.json(failure, { status: 500 });
+  }
+}
diff --git a/app/api/studio/generate/video/route.ts b/app/api/studio/generate/video/route.ts
new file mode 100644
index 0000000..ad38df5
--- /dev/null
+++ b/app/api/studio/generate/video/route.ts
@@ -0,0 +1,114 @@
+import { NextRequest, NextResponse } from "next/server";
+import {
+  FAL_STUDIO_ENDPOINTS,
+  createGenerationErrorResponse,
+  submitVideoGeneration,
+} from "@/lib/fal/studio";
+import type {
+  VideoAspectRatio,
+  VideoGenerationSettings,
+} from "@/types/studio";
+
+const VIDEO_ASPECT_RATIOS: VideoAspectRatio[] = ["16:9", "9:16", "1:1"];
+const VIDEO_DURATIONS = new Set([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
+
+function parseVideoSettings(
+  prompt: string,
+  aspectRatioValue: FormDataEntryValue | null,
+  durationValue: FormDataEntryValue | null,
+  audioValue: FormDataEntryValue | null,
+  firstFrame: File | null,
+  lastFrame: File | null
+): VideoGenerationSettings {
+  const aspectRatio = VIDEO_ASPECT_RATIOS.includes(
+    aspectRatioValue as VideoAspectRatio
+  )
+    ? (aspectRatioValue as VideoAspectRatio)
+    : "16:9";
+  const durationCandidate =
+    Number.parseInt(String(durationValue ?? "5"), 10) || 5;
+  const duration = VIDEO_DURATIONS.has(durationCandidate) ? durationCandidate : 5;
+  const audio = String(audioValue ?? "true") === "true";
+
+  return {
+    aspectRatio,
+    duration,
+    model: "kling-3",
+    audio,
+    firstFrame: firstFrame?.name,
+    lastFrame: lastFrame?.name ?? undefined,
+  };
+}
+
+export async function POST(request: NextRequest) {
+  const formData = await request.formData();
+  const prompt = String(formData.get("prompt") ?? "").trim();
+  const firstFrameEntry = formData.get("firstFrame");
+  const lastFrameEntry = formData.get("lastFrame");
+  const firstFrame =
+    firstFrameEntry instanceof File && firstFrameEntry.size > 0
+      ? firstFrameEntry
+      : null;
+  const lastFrame =
+    lastFrameEntry instanceof File && lastFrameEntry.size > 0
+      ? lastFrameEntry
+      : null;
+  const settings = parseVideoSettings(
+    prompt,
+    formData.get("aspectRatio"),
+    formData.get("duration"),
+    formData.get("audio"),
+    firstFrame,
+    lastFrame
+  );
+
+  if (!prompt) {
+    return NextResponse.json(
+      createGenerationErrorResponse(
+        "video",
+        prompt,
+        FAL_STUDIO_ENDPOINTS.video,
+        settings,
+        new Error("Prompt is required.")
+      ),
+      { status: 400 }
+    );
+  }
+
+  if (!firstFrame) {
+    return NextResponse.json(
+      createGenerationErrorResponse(
+        "video",
+        prompt,
+        FAL_STUDIO_ENDPOINTS.video,
+        settings,
+        new Error("A first frame is required for Kling 3 image-to-video.")
+      ),
+      { status: 400 }
+    );
+  }
+
+  try {
+    const generation = await submitVideoGeneration({
+      prompt,
+      aspectRatio: settings.aspectRatio,
+      duration: settings.duration,
+      audio: settings.audio,
+      firstFrame,
+      lastFrame,
+    });
+
+    return NextResponse.json(generation.response);
+  } catch (error) {
+    return NextResponse.json(
+      createGenerationErrorResponse(
+        "video",
+        prompt,
+        FAL_STUDIO_ENDPOINTS.video,
+        settings,
+        error
+      ),
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/studio/studio-page.tsx b/app/studio/studio-page.tsx
index d5df571..d6dbf08 100644
--- a/app/studio/studio-page.tsx
+++ b/app/studio/studio-page.tsx
@@ -2,19 +2,21 @@
 
 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
-import { useAuthStore } from "@/store/useAuthStore";
 import { StudioCanvas } from "@/components/studio/studio-canvas";
 import { StudioPromptBar } from "@/components/studio/studio-prompt-bar";
+import { useStudioGeneration } from "@/hooks/use-studio-generation";
+import { useAuthStore } from "@/store/useAuthStore";
 
 export default function StudioPage() {
   const { isAuthenticated, isLoading } = useAuthStore();
   const router = useRouter();
+  const { generate, state } = useStudioGeneration();
 
   useEffect(() => {
     if (!isLoading && !isAuthenticated) {
       router.push(`/sign-in?redirect=${encodeURIComponent("/studio")}`);
     }
-  }, [isLoading, isAuthenticated, router]);
+  }, [isAuthenticated, isLoading, router]);
 
   if (isLoading) {
     return (
@@ -30,8 +32,11 @@ export default function StudioPage() {
 
   return (
     <div className="h-screen flex flex-col bg-background overflow-hidden">
-      <StudioCanvas />
-      <StudioPromptBar />
+      <StudioCanvas
+        error={state.error}
+        isGenerating={state.isGenerating}
+      />
+      <StudioPromptBar isGenerating={state.isGenerating} onGenerate={generate} />
     </div>
   );
 }
diff --git a/components/studio/duration-picker.tsx b/components/studio/duration-picker.tsx
new file mode 100644
index 0000000..8c86441
--- /dev/null
+++ b/components/studio/duration-picker.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Clock01Icon } from "@hugeicons/core-free-icons";
+import { Slider } from "@/components/ui/slider";
+import { SettingPicker } from "./setting-picker";
+
+interface DurationPickerProps {
+  value: number;
+  onChange: (value: number) => void;
+}
+
+const MIN_DURATION = 3;
+const MAX_DURATION = 15;
+
+export function DurationPicker({ value, onChange }: DurationPickerProps) {
+  return (
+    <SettingPicker
+      label="duration"
+      title="Choose duration"
+      value={String(value)}
+      options={[
+        {
+          value: String(value),
+          label: `${value}s`,
+          icon: <HugeiconsIcon icon={Clock01Icon} size={13} />,
+        },
+      ]}
+      onChange={() => {}}
+      renderPanel={() => (
+        <div className="p-3">
+          <div className="rounded-[1rem] border border-border bg-secondary p-3">
+            <p className="mb-3 text-sm font-medium tracking-[-0.02em] text-foreground">
+              Choose duration
+            </p>
+            <div className="mb-4 flex h-9 items-center rounded-[0.85rem] border border-border bg-background px-3 text-sm font-medium text-foreground">
+              {value}s
+            </div>
+            <Slider
+              min={MIN_DURATION}
+              max={MAX_DURATION}
+              step={1}
+              value={[value]}
+              onValueChange={([nextValue]) => onChange(nextValue)}
+              className="[&_span[data-slot=slider-range]]:bg-foreground [&_span[data-slot=slider-thumb]]:size-4 [&_span[data-slot=slider-thumb]]:border-foreground [&_span[data-slot=slider-thumb]]:bg-background [&_span[data-slot=slider-track]]:bg-border"
+            />
+          </div>
+        </div>
+      )}
+    />
+  );
+}
diff --git a/components/studio/frame-upload.tsx b/components/studio/frame-upload.tsx
index 47767c9..2f0d6be 100644
--- a/components/studio/frame-upload.tsx
+++ b/components/studio/frame-upload.tsx
@@ -1,21 +1,66 @@
 "use client";
 
-import { useRef } from "react";
-import { ImagePlus, X } from "lucide-react";
+import { useRef, useState, type DragEvent } from "react";
+import { Plus, X } from "lucide-react";
 import Image from "next/image";
+import {
+  draggedStudioAssetToFile,
+  hasDraggedStudioAsset,
+  readDraggedStudioAsset,
+} from "@/lib/studio-drag";
 import { cn } from "@/lib/utils";
 
 interface FrameUploadProps {
   label: string;
   preview: string | null;
   onUpload: (file: File | null) => void;
+  compact?: boolean;
+  className?: string;
 }
 
-export function FrameUpload({ label, preview, onUpload }: FrameUploadProps) {
+export function FrameUpload({
+  label,
+  preview,
+  onUpload,
+  compact = false,
+  className,
+}: FrameUploadProps) {
   const inputRef = useRef<HTMLInputElement>(null);
+  const [isDropTarget, setIsDropTarget] = useState(false);
+  const compactLabel = label.toUpperCase().replace(" ", "\n");
+  const mobileCompactLabel = label;
+
+  const handleDrop = async (event: DragEvent<HTMLButtonElement>) => {
+    const directFile = Array.from(event.dataTransfer.files).find((file) =>
+      file.type.startsWith("image/")
+    );
+
+    if (directFile) {
+      onUpload(directFile);
+      return;
+    }
+
+    const asset = readDraggedStudioAsset(event.dataTransfer);
+
+    if (!asset) {
+      return;
+    }
+
+    const file = await draggedStudioAssetToFile(asset);
+
+    if (file.type.startsWith("image/")) {
+      onUpload(file);
+    }
+  };
 
   return (
-    <div className="flex items-center gap-1">
+    <div
+      className={cn(
+        "flex items-center gap-1",
+        compact && "relative",
+        className
+      )}
+    >
       <input
         ref={inputRef}
         type="file"
@@ -29,26 +74,83 @@ export function FrameUpload({ label, preview, onUpload }: FrameUploadProps) {
       />
       <button
         onClick={() => inputRef.current?.click()}
+        onDragOver={(event) => {
+          if (
+            event.dataTransfer.files.length > 0 ||
+            hasDraggedStudioAsset(event.dataTransfer)
+          ) {
+            event.preventDefault();
+            event.dataTransfer.dropEffect = "copy";
+            setIsDropTarget(true);
+          }
+        }}
+        onDragLeave={() => setIsDropTarget(false)}
+        onDrop={(event) => {
+          event.preventDefault();
+          setIsDropTarget(false);
+          void handleDrop(event);
+        }}
         className={cn(
-          "flex items-center gap-1.5 h-7 px-3 rounded-md text-xs font-medium transition-colors border cursor-pointer",
-          preview
-            ? "border-[#F54E00]/30 bg-[#F54E00]/5 text-[#F54E00]"
-            : "border-border/40 bg-secondary/60 text-foreground/50 hover:text-foreground/70"
+          "flex items-center justify-center transition-colors cursor-pointer",
+          compact
+            ? "relative h-10 w-full min-w-0 rounded-xl border border-white/8 bg-[linear-gradient(180deg,rgba(255,255,255,0.08)_0%,rgba(255,255,255,0.03)_100%)] px-2 py-2 text-left text-white shadow-[0_14px_30px_rgba(0,0,0,0.35),inset_0_1px_0_rgba(255,255,255,0.05)] hover:bg-[linear-gradient(180deg,rgba(255,255,255,0.1)_0%,rgba(255,255,255,0.04)_100%)] md:h-[90px] md:w-[68px] md:min-w-0 md:flex-col md:items-start md:justify-between md:px-3 md:py-3"
+            : "gap-1.5 h-7 px-3 text-xs font-medium",
+          isDropTarget &&
+            "ring-2 ring-[#F54E00]/70 ring-offset-2 ring-offset-background",
+          !compact &&
+            (preview
+              ? "bg-[#F54E00]/10 text-[#F54E00]"
+              : "bg-foreground/10 text-foreground/50 hover:text-foreground/70")
         )}
+        title={`Upload ${label}`}
       >
         {preview ? (
-          <div className="relative h-4 w-4 rounded-sm overflow-hidden">
+          <div
+            className={cn(
+              "relative overflow-hidden",
+              compact
+                ? "absolute inset-0 rounded-xl"
+                : "h-full w-full rounded-sm"
+            )}
+          >
             <Image src={preview} alt={label} fill className="object-cover" unoptimized />
+            {compact ? (
+              <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/10 to-transparent" />
+            ) : null}
           </div>
+        ) : compact ? (
+          <>
+            <div className="mr-1.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-white/7 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] md:mr-0 md:h-7 md:w-7 md:rounded-lg">
+              <Plus className="h-3.5 w-3.5 text-white/88 md:h-4 md:w-4" strokeWidth={1.9} />
+            </div>
+            <span className="truncate text-[9px] font-semibold leading-none tracking-[-0.03em] text-white/94 md:hidden">
+              {mobileCompactLabel}
+            </span>
+            <span className="hidden whitespace-pre-line text-[11px] font-semibold leading-[1.02] tracking-[-0.03em] text-white/94 md:block">
+              {compactLabel}
+            </span>
+          </>
         ) : (
-          <ImagePlus className="h-3 w-3" />
+          <>
+            <Plus className="h-3 w-3" />
+            <span>{label}</span>
+          </>
         )}
-        <span>{label}</span>
+        {preview && compact ? (
+          <span className="relative z-10 mt-auto hidden whitespace-pre-line text-[11px] font-semibold leading-[1.02] tracking-[-0.03em] text-white md:block">
+            {compactLabel}
+          </span>
+        ) : null}
       </button>
       {preview && (
         <button
           onClick={() => onUpload(null)}
-          className="p-0.5 rounded-full text-foreground/40 hover:text-foreground/70 transition-colors cursor-pointer"
+          className={cn(
+            "transition-colors cursor-pointer",
+            compact
+              ? "absolute right-1.5 top-1.5 z-10 flex h-6 w-6 items-center justify-center rounded-full bg-black/45 text-white/88 backdrop-blur-sm hover:bg-black/60"
+              : "p-0.5 rounded-full text-foreground/40 hover:text-foreground/70"
+          )}
         >
           <X className="h-3 w-3" />
         </button>
diff --git a/components/studio/generation-display.tsx b/components/studio/generation-display.tsx
index 32b7b83..1b73417 100644
--- a/components/studio/generation-display.tsx
+++ b/components/studio/generation-display.tsx
@@ -2,37 +2,27 @@
 
 import { motion } from "framer-motion";
 import Image from "next/image";
-import type { GenerationResult } from "@/types/studio";
+import { setDraggedStudioAsset } from "@/lib/studio-drag";
 import { cn } from "@/lib/utils";
+import { useStudioStore } from "@/store/useStudioStore";
+import type { StudioCanvasAsset } from "@/types/studio";
 
 interface GenerationDisplayProps {
-  result: GenerationResult;
+  assets: StudioCanvasAsset[];
 }
 
-export function GenerationDisplay({ result }: GenerationDisplayProps) {
-  const isSingle = result.urls.length === 1;
-
-  if (result.type === "video") {
-    return (
-      <motion.div
-        initial={{ opacity: 0, scale: 0.95 }}
-        animate={{ opacity: 1, scale: 1 }}
-        exit={{ opacity: 0 }}
-        transition={{ duration: 0.5 }}
-        className="w-full max-w-3xl mx-auto"
-      >
-        <div className="relative aspect-video rounded-xl overflow-hidden bg-secondary shadow-lg">
-          <video
-            src={result.urls[0]}
-            controls
-            className="w-full h-full object-cover"
-            poster={result.urls[0]}
-          />
-        </div>
-      </motion.div>
-    );
+function getAspectRatioValue(aspectRatio?: string) {
+  if (!aspectRatio || aspectRatio === "auto") {
+    return undefined;
   }
 
+  return aspectRatio.replace(":", " / ");
+}
+
+export function GenerationDisplay({ assets }: GenerationDisplayProps) {
+  const openViewer = useStudioStore((state) => state.openViewer);
+  const isSingle = assets.length === 1;
+
   return (
     <motion.div
       initial={{ opacity: 0, scale: 0.95 }}
@@ -40,27 +30,66 @@ export function GenerationDisplay({ result }: GenerationDisplayProps) {
       exit={{ opacity: 0 }}
       transition={{ duration: 0.5 }}
       className={cn(
-        "w-full max-w-3xl mx-auto",
-        isSingle ? "flex justify-center" : "grid grid-cols-2 gap-3"
+        "w-full",
+        isSingle
+          ? "max-w-xl"
+          : "grid max-w-5xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
       )}
     >
-      {result.urls.map((url, i) => (
-        <div
-          key={i}
-          className={cn(
-            "relative overflow-hidden rounded-xl bg-secondary shadow-lg",
-            isSingle ? "w-full max-w-lg aspect-square" : "aspect-square"
-          )}
-        >
-          <Image
-            src={url}
-            alt={`Generated image ${i + 1}`}
-            fill
-            className="object-cover"
-            unoptimized
-          />
-        </div>
-      ))}
+      {assets.map((asset, index) => {
+        const aspectRatio = getAspectRatioValue(asset.aspectRatio);
+
+        return (
+          <button
+            key={asset.id}
+            type="button"
+            onClick={() => openViewer(asset.id)}
+            className={cn(
+              "group relative overflow-hidden rounded-[1.25rem] border border-border/60 bg-secondary/70 text-left shadow-lg transition hover:border-foreground/20 hover:shadow-xl",
+              isSingle ? "w-full max-w-sm" : "w-full"
+            )}
+            style={aspectRatio ? { aspectRatio } : undefined}
+          >
+            {asset.type === "video" ? (
+              <video
+                src={asset.url}
+                className="absolute inset-0 h-full w-full object-cover transition duration-300 group-hover:scale-[1.02]"
+                playsInline
+                muted
+                preload="metadata"
+              />
+            ) : (
+              <Image
+                src={asset.url}
+                alt={`Generated image ${index + 1}`}
+                fill
+                className="object-cover transition duration-300 group-hover:scale-[1.02]"
+                unoptimized
+                draggable
+                onDragStart={(event) => {
+                  setDraggedStudioAsset(event.dataTransfer, {
+                    url: asset.url,
+                    fileName: asset.fileName,
+                    contentType: asset.contentType,
+                  });
+                }}
+              />
+            )}
+
+            <div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-between bg-gradient-to-t from-black/75 via-black/20 to-transparent p-4">
+              <div>
+                <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-white/70">
+                  {asset.type === "video" ? "Video" : "Image"}
+                </p>
+                <p className="mt-1 text-sm text-white/92">Asset {index + 1}</p>
+              </div>
+              <span className="rounded-full border border-white/15 bg-black/35 px-3 py-1 text-[11px] font-medium text-white/78">
+                Open
+              </span>
+            </div>
+          </button>
+        );
+      })}
     </motion.div>
   );
 }
diff --git a/components/studio/generation-loading.tsx b/components/studio/generation-loading.tsx
index d69d0bc..0bcab94 100644
--- a/components/studio/generation-loading.tsx
+++ b/components/studio/generation-loading.tsx
@@ -1,40 +1,74 @@
 "use client";
 
 import { motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+import { useStudioStore } from "@/store/useStudioStore";
+
+function getAspectRatioValue(aspectRatio?: string) {
+  if (!aspectRatio || aspectRatio === "auto") {
+    return undefined;
+  }
+
+  return aspectRatio.replace(":", " / ");
+}
+
+function getMediaWidthClass(aspectRatio?: string) {
+  switch (aspectRatio) {
+    case "9 / 16":
+      return "max-w-[14rem]";
+    case "1 / 1":
+      return "max-w-lg";
+    default:
+      return "max-w-xl";
+  }
+}
 
 export function GenerationLoading() {
+  const { mode, imageAspectRatio, imageCount, videoAspectRatio } = useStudioStore();
+
+  const aspectRatio = getAspectRatioValue(
+    mode === "image" ? imageAspectRatio : videoAspectRatio
+  );
+  const skeletonCount = mode === "image" ? imageCount : 1;
+  const isSingle = skeletonCount === 1;
+
   return (
     <motion.div
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
-      className="flex flex-col items-center gap-6"
+      className={cn(
+        "w-full",
+        mode === "video"
+          ? getMediaWidthClass(aspectRatio)
+          : cn(
+              "max-w-xl",
+              isSingle ? "flex" : "grid grid-cols-2 gap-3"
+            )
+      )}
     >
-      <div className="relative w-24 h-24">
-        {[0, 1, 2].map((i) => (
+      {Array.from({ length: skeletonCount }).map((_, index) => (
+        <div
+          key={index}
+          className={cn(
+            "relative overflow-hidden rounded-xl border border-border/20 bg-secondary/70",
+            mode === "video"
+              ? "w-full shadow-lg"
+              : isSingle
+                ? "w-full max-w-sm shadow-lg"
+                : "w-full shadow-lg"
+          )}
+          style={aspectRatio ? { aspectRatio } : undefined}
+        >
           <motion.div
-            key={i}
-            className="absolute inset-0 rounded-full border border-foreground/10"
-            animate={{
-              scale: [1, 1.4 + i * 0.2, 1],
-              opacity: [0.3, 0.05, 0.3],
-            }}
-            transition={{
-              duration: 2,
-              repeat: Infinity,
-              delay: i * 0.4,
-              ease: "easeInOut",
-            }}
+            className="absolute inset-0 bg-[linear-gradient(110deg,rgba(255,255,255,0.02)_8%,rgba(255,255,255,0.12)_18%,rgba(255,255,255,0.02)_33%)]"
+            animate={{ x: ["-100%", "100%"] }}
+            transition={{ duration: 1.6, repeat: Infinity, ease: "linear" }}
           />
-        ))}
-      </div>
-      <motion.p
-        className="text-sm text-foreground/40 font-medium"
-        animate={{ opacity: [0.4, 1, 0.4] }}
-        transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
-      >
-        Generating...
-      </motion.p>
+          <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(245,78,0,0.14),transparent_45%)]" />
+          <div className="absolute inset-x-0 bottom-0 h-24 bg-[linear-gradient(to_top,rgba(255,255,255,0.06),transparent)]" />
+        </div>
+      ))}
     </motion.div>
   );
 }
diff --git a/components/studio/image-settings.tsx b/components/studio/image-settings.tsx
index d3ba016..df57991 100644
--- a/components/studio/image-settings.tsx
+++ b/components/studio/image-settings.tsx
@@ -4,43 +4,93 @@ import { HugeiconsIcon } from "@hugeicons/react";
 import {
   ArtificialIntelligence01Icon,
   AspectRatioIcon,
-  Image01Icon,
-  PlusSignCircleIcon,
   MinusSignCircleIcon,
+  PlusSignCircleIcon,
+  SparklesIcon,
 } from "@hugeicons/core-free-icons";
 import { useStudioStore } from "@/store/useStudioStore";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import type { AspectRatio, AIModel } from "@/types/studio";
+import { SettingPicker, type SettingPickerOption } from "./setting-picker";
+import type {
+  ImageAIModel,
+  ImageAspectRatio,
+  ImageResolution,
+} from "@/types/studio";
 
-const ASPECT_RATIOS: AspectRatio[] = ["1:1", "16:9", "9:16", "4:3", "3:4"];
+const ASPECT_RATIOS: SettingPickerOption[] = [
+  {
+    value: "auto",
+    label: "Auto",
+    description: "Let the model choose the best framing for your prompt.",
+    icon: <HugeiconsIcon icon={AspectRatioIcon} size={13} />,
+  },
+  {
+    value: "1:1",
+    label: "1:1",
+    description: "Square framing for covers, tiles, and balanced compositions.",
+    icon: <HugeiconsIcon icon={AspectRatioIcon} size={13} />,
+  },
+  {
+    value: "16:9",
+    label: "16:9",
+    description: "Wide cinematic framing for landscapes and scene building.",
+    icon: <HugeiconsIcon icon={AspectRatioIcon} size={13} />,
+  },
+  {
+    value: "9:16",
+    label: "9:16",
+    description: "Vertical framing for phone-first visuals and stories.",
+    icon: <HugeiconsIcon icon={AspectRatioIcon} size={13} />,
+  },
+  {
+    value: "4:3",
+    label: "4:3",
+    description: "Classic frame with more height than widescreen.",
+    icon: <HugeiconsIcon icon={AspectRatioIcon} size={13} />,
+  },
+  {
+    value: "3:4",
+    label: "3:4",
+    description: "Portrait-oriented frame with a print-like feel.",
+    icon: <HugeiconsIcon icon={AspectRatioIcon} size={13} />,
+  },
+];
 
-const AI_MODELS: { value: AIModel; label: string }[] = [
-  { value: "invook-v2", label: "Invook V2" },
-  { value: "invook-v1", label: "Invook V1" },
-  { value: "flux-pro", label: "Flux Pro" },
-  { value: "stable-diffusion", label: "Stable Diffusion" },
-  { value: "dall-e", label: "DALL-E" },
-  { value: "midjourney", label: "Midjourney" },
+const IMAGE_MODELS: SettingPickerOption[] = [
+  {
+    value: "nano-banana-2",
+    label: "Nano Banana 2",
+    description: "Fast image generation with clean general-purpose results.",
+    icon: <HugeiconsIcon icon={ArtificialIntelligence01Icon} size={13} />,
+  },
 ];
 
-const RESOLUTIONS = [
-  { value: "1024", label: "1K" },
-  { value: "2048", label: "2K" },
-  { value: "4096", label: "4K" },
+const RESOLUTIONS: SettingPickerOption[] = [
+  {
+    value: "1024",
+    label: "1K",
+    description: "Fast. Quick generation with good resolution.",
+    icon: <HugeiconsIcon icon={SparklesIcon} size={13} />,
+  },
+  {
+    value: "2048",
+    label: "2K",
+    description: "Balanced. Recommended for most use cases.",
+    icon: <HugeiconsIcon icon={SparklesIcon} size={13} />,
+  },
+  {
+    value: "4096",
+    label: "4K",
+    description: "Ultra. Highest detail with longer processing.",
+    icon: <HugeiconsIcon icon={SparklesIcon} size={13} />,
+  },
 ];
 
 export function ImageSettings() {
   const {
     imageAspectRatio,
     setImageAspectRatio,
-    aiModel,
-    setAIModel,
+    imageModel,
+    setImageModel,
     imageCount,
     setImageCount,
     imageResolution,
@@ -48,70 +98,48 @@ export function ImageSettings() {
   } = useStudioStore();
 
   return (
-    <div className="flex items-center gap-2">
-      {/* AI Model */}
-      <Select value={aiModel} onValueChange={(v) => setAIModel(v as AIModel)}>
-        <SelectTrigger className="h-7 w-auto gap-1.5 text-xs bg-transparent border-border/40 rounded-md px-2.5">
-          <HugeiconsIcon icon={ArtificialIntelligence01Icon} size={14} />
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          {AI_MODELS.map(({ value, label }) => (
-            <SelectItem key={value} value={value} className="text-xs">
-              {label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
+    <div className="flex flex-wrap items-center gap-1.5 md:gap-2 md:flex-nowrap">
+      <SettingPicker
+        label="model"
+        value={imageModel}
+        options={IMAGE_MODELS}
+        onChange={(value) => setImageModel(value as ImageAIModel)}
+        className="w-[7.1rem] md:w-[9.75rem]"
+      />
 
-      {/* Count — plus/minus */}
-      <div className="flex items-center gap-1 h-7 border border-border/40 rounded-md px-1.5">
-        <HugeiconsIcon icon={Image01Icon} size={14} className="text-foreground/50" />
+      <div className="flex h-6.5 shrink-0 items-center gap-1 rounded-md bg-foreground/10 px-2 text-foreground md:h-7 md:px-2.5">
         <button
           onClick={() => setImageCount(Math.max(1, imageCount - 1))}
           disabled={imageCount <= 1}
-          className="text-foreground/50 hover:text-foreground/80 disabled:opacity-30 cursor-pointer disabled:cursor-not-allowed transition-colors"
+          className="cursor-pointer text-foreground/50 transition-colors hover:text-foreground/80 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-30"
         >
-          <HugeiconsIcon icon={MinusSignCircleIcon} size={14} />
+          <HugeiconsIcon icon={MinusSignCircleIcon} size={13} />
         </button>
-        <span className="text-xs font-medium text-foreground/70 w-4 text-center">{imageCount}</span>
+        <span className="w-4 text-center text-[11px] font-medium text-foreground md:text-xs">
+          {imageCount}
+        </span>
         <button
           onClick={() => setImageCount(Math.min(4, imageCount + 1))}
           disabled={imageCount >= 4}
-          className="text-foreground/50 hover:text-foreground/80 disabled:opacity-30 cursor-pointer disabled:cursor-not-allowed transition-colors"
+          className="cursor-pointer text-foreground/50 transition-colors hover:text-foreground/80 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-30"
         >
-          <HugeiconsIcon icon={PlusSignCircleIcon} size={14} />
+          <HugeiconsIcon icon={PlusSignCircleIcon} size={13} />
         </button>
       </div>
 
-      {/* Aspect Ratio */}
-      <Select value={imageAspectRatio} onValueChange={(v) => setImageAspectRatio(v as AspectRatio)}>
-        <SelectTrigger className="h-7 w-auto gap-1.5 text-xs bg-transparent border-border/40 rounded-md px-2.5">
-          <HugeiconsIcon icon={AspectRatioIcon} size={14} />
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          {ASPECT_RATIOS.map((ratio) => (
-            <SelectItem key={ratio} value={ratio} className="text-xs">
-              {ratio}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
+      <SettingPicker
+        label="aspect ratio"
+        value={imageAspectRatio}
+        options={ASPECT_RATIOS}
+        onChange={(value) => setImageAspectRatio(value as ImageAspectRatio)}
+      />
 
-      {/* Resolution */}
-      <Select value={imageResolution} onValueChange={setImageResolution}>
-        <SelectTrigger className="h-7 w-auto gap-1.5 text-xs bg-transparent border-border/40 rounded-md px-2.5">
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          {RESOLUTIONS.map(({ value, label }) => (
-            <SelectItem key={value} value={value} className="text-xs">
-              {label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
+      <SettingPicker
+        label="resolution"
+        value={imageResolution}
+        options={RESOLUTIONS}
+        onChange={(value) => setImageResolution(value as ImageResolution)}
+      />
     </div>
   );
 }
diff --git a/components/studio/mode-switcher.tsx b/components/studio/mode-switcher.tsx
index e1b1acb..99925ac 100644
--- a/components/studio/mode-switcher.tsx
+++ b/components/studio/mode-switcher.tsx
@@ -12,19 +12,37 @@ const modes: { value: StudioMode; icon: IconSvgElement; label: string }[] = [
   { value: "video", icon: Film01Icon, label: "Video" },
 ];
 
-export function ModeSwitcher() {
+interface ModeSwitcherProps {
+  orientation?: "vertical" | "horizontal";
+  className?: string;
+}
+
+export function ModeSwitcher({
+  orientation = "vertical",
+  className,
+}: ModeSwitcherProps) {
   const { mode, setMode } = useStudioStore();
+  const isHorizontal = orientation === "horizontal";
 
   return (
-    <div className="flex flex-col gap-1 bg-secondary/30 rounded-xl p-1 self-end">
+    <div
+      className={cn(
+        "bg-secondary rounded-xl p-1",
+        isHorizontal ? "flex items-center gap-1" : "flex flex-col gap-1 self-end",
+        className
+      )}
+    >
       {modes.map(({ value, icon, label }) => (
         <button
           key={value}
           onClick={() => setMode(value)}
           className={cn(
-            "flex flex-col items-center gap-1 px-2 py-2 rounded-lg text-[10px] font-medium transition-colors cursor-pointer w-14",
+            isHorizontal
+              ? "flex items-center gap-2 rounded-lg px-3 py-2 text-xs"
+              : "flex w-14 flex-col items-center gap-1 px-2 py-2 text-[10px]",
+            "font-medium transition-colors cursor-pointer",
             mode === value
-              ? "bg-secondary/80 text-foreground shadow-sm"
+              ? "bg-foreground/10 border-border/40 rounded-md text-foreground shadow-sm"
               : "text-foreground/40 hover:text-foreground/60"
           )}
         >
diff --git a/components/studio/prompt-footer.tsx b/components/studio/prompt-footer.tsx
new file mode 100644
index 0000000..cfca900
--- /dev/null
+++ b/components/studio/prompt-footer.tsx
@@ -0,0 +1,118 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+import { useStudioStore } from "@/store/useStudioStore";
+import { FrameUpload } from "./frame-upload";
+
+interface PromptFooterProps {
+  isGenerating: boolean;
+  onGenerate: () => void | Promise<void>;
+  className?: string;
+}
+
+export function PromptFooter({
+  isGenerating,
+  onGenerate,
+  className,
+}: PromptFooterProps) {
+  const {
+    prompt,
+    mode,
+    firstFramePreview,
+    setFirstFrame,
+    lastFramePreview,
+    setLastFrame,
+  } = useStudioStore();
+
+  const canSubmit =
+    prompt.trim().length > 0 &&
+    !isGenerating &&
+    (mode === "image" || Boolean(firstFramePreview));
+
+  return (
+    <div
+      className={cn(
+        "flex shrink-0 items-end justify-end px-3 pb-3 pt-3 md:pt-3",
+        className
+      )}
+    >
+      <div className="w-full md:w-auto">
+        {mode === "video" ? (
+          <div className="flex min-h-11 items-center gap-2 md:hidden">
+            <FrameUpload
+              label="First Frame"
+              preview={firstFramePreview}
+              onUpload={setFirstFrame}
+              compact
+              className="min-w-0 flex-1"
+            />
+            <FrameUpload
+              label="Last Frame"
+              preview={lastFramePreview}
+              onUpload={setLastFrame}
+              compact
+              className="min-w-0 flex-1"
+            />
+            <motion.button
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.97 }}
+              onClick={() => {
+                void onGenerate();
+              }}
+              disabled={!canSubmit}
+              className="flex h-11 min-w-[7.75rem] shrink-0 items-center justify-center rounded-xl bg-[#F54E00] px-5 text-sm font-semibold text-white shadow-[0_12px_26px_rgba(245,78,0,0.28)] transition-colors hover:bg-[#e04500] disabled:cursor-not-allowed disabled:opacity-30"
+            >
+              {isGenerating ? "Working..." : "Generate"}
+            </motion.button>
+          </div>
+        ) : (
+          <div className="flex min-h-11 items-center md:hidden">
+            <motion.button
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.97 }}
+              onClick={() => {
+                void onGenerate();
+              }}
+              disabled={!canSubmit}
+              className="flex h-11 w-full items-center justify-center rounded-xl bg-[#F54E00] px-4 text-sm font-semibold text-white shadow-[0_12px_26px_rgba(245,78,0,0.28)] transition-colors hover:bg-[#e04500] disabled:cursor-not-allowed disabled:opacity-30"
+            >
+              {isGenerating ? "Working..." : "Generate"}
+            </motion.button>
+          </div>
+        )}
+
+        <div className="hidden items-end gap-2 md:flex">
+          {mode === "video" ? (
+            <FrameUpload
+              label="First Frame"
+              preview={firstFramePreview}
+              onUpload={setFirstFrame}
+              compact
+            />
+          ) : null}
+          {mode === "video" ? (
+            <FrameUpload
+              label="Last Frame"
+              preview={lastFramePreview}
+              onUpload={setLastFrame}
+              compact
+            />
+          ) : null}
+
+          <motion.button
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.97 }}
+            onClick={() => {
+              void onGenerate();
+            }}
+            disabled={!canSubmit}
+            className="flex h-[90px] w-24 items-center justify-center rounded-xl bg-[#F54E00] px-4 text-sm font-semibold text-white transition-colors hover:bg-[#e04500] disabled:cursor-not-allowed disabled:opacity-30"
+          >
+            {isGenerating ? "Working..." : "Generate"}
+          </motion.button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/studio/prompt-input.tsx b/components/studio/prompt-input.tsx
index e7bc3a5..3f96e5f 100644
--- a/components/studio/prompt-input.tsx
+++ b/components/studio/prompt-input.tsx
@@ -1,148 +1,195 @@
 "use client";
 
-import { useRef, useCallback, useState, KeyboardEvent, ReactNode, PointerEvent } from "react";
-import { HugeiconsIcon } from "@hugeicons/react";
-import { PlusSignCircleIcon, Cancel01Icon } from "@hugeicons/core-free-icons";
-import { motion } from "framer-motion";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type DragEvent,
+  type ReactNode,
+  type KeyboardEvent,
+} from "react";
 import Image from "next/image";
+import { Plus } from "lucide-react";
+import { HugeiconsIcon } from "@hugeicons/react";
+import {
+  Cancel01Icon,
+} from "@hugeicons/core-free-icons";
+import {
+  draggedStudioAssetToFile,
+  hasDraggedStudioAsset,
+  readDraggedStudioAsset,
+} from "@/lib/studio-drag";
 import { useStudioStore } from "@/store/useStudioStore";
-import { Textarea } from "@/components/ui/textarea";
 
 interface PromptInputProps {
   children?: ReactNode;
+  isGenerating: boolean;
+  onGenerate: () => void | Promise<void>;
 }
 
-const MIN_HEIGHT = 140;
-const MAX_HEIGHT = 400;
-const DEFAULT_HEIGHT = 180;
+const MIN_TEXTAREA_HEIGHT = 24;
+const MAX_TEXTAREA_HEIGHT = 320;
 
-export function PromptInput({ children }: PromptInputProps) {
-  const { prompt, setPrompt, isGenerating, generate, attachments, addAttachment, removeAttachment } = useStudioStore();
+export function PromptInput({
+  children,
+  isGenerating,
+  onGenerate,
+}: PromptInputProps) {
+  const {
+    prompt,
+    setPrompt,
+    attachments,
+    addAttachment,
+    removeAttachment,
+  } = useStudioStore();
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [height, setHeight] = useState(DEFAULT_HEIGHT);
-  const dragStart = useRef<{ y: number; h: number } | null>(null);
-
-  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      generate();
+  const [isDropTarget, setIsDropTarget] = useState(false);
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+
+    if (!textarea) {
+      return;
     }
-  };
 
-  const onPointerDown = useCallback((e: PointerEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    dragStart.current = { y: e.clientY, h: height };
-    (e.target as HTMLElement).setPointerCapture(e.pointerId);
-  }, [height]);
+    textarea.style.height = "0px";
+    const nextHeight = Math.min(
+      MAX_TEXTAREA_HEIGHT,
+      Math.max(MIN_TEXTAREA_HEIGHT, textarea.scrollHeight)
+    );
+    textarea.style.height = `${nextHeight}px`;
+    textarea.style.overflowY =
+      textarea.scrollHeight > MAX_TEXTAREA_HEIGHT ? "auto" : "hidden";
+  }, [prompt]);
+
+  const addDroppedFiles = useCallback(
+    async (event: DragEvent<HTMLDivElement>) => {
+      const files = Array.from(event.dataTransfer.files).filter((file) =>
+        file.type.startsWith("image/")
+      );
+
+      if (files.length > 0) {
+        files.forEach(addAttachment);
+        return;
+      }
+
+      const asset = readDraggedStudioAsset(event.dataTransfer);
+
+      if (!asset) {
+        return;
+      }
+
+      const file = await draggedStudioAssetToFile(asset);
 
-  const onPointerMove = useCallback((e: PointerEvent<HTMLDivElement>) => {
-    if (!dragStart.current) return;
-    const delta = dragStart.current.y - e.clientY;
-    const newH = Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, dragStart.current.h + delta));
-    setHeight(newH);
-  }, []);
+      if (file.type.startsWith("image/")) {
+        addAttachment(file);
+      }
+    },
+    [addAttachment]
+  );
 
-  const onPointerUp = useCallback(() => {
-    dragStart.current = null;
-  }, []);
+  const handleKeyDown = async (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
 
-  const canSubmit = prompt.trim().length > 0 && !isGenerating;
+      if (!isGenerating) {
+        await onGenerate();
+      }
+    }
+  };
 
   return (
     <div
-      ref={containerRef}
-      className="flex-1 flex flex-col bg-secondary/60 rounded-2xl border border-border/50 overflow-hidden"
-      style={{ height }}
+      className={isDropTarget
+        ? "min-w-0 flex-1 self-end overflow-hidden rounded-l-2xl bg-foreground/5"
+        : "min-w-0 flex-1 self-end overflow-hidden"}
+      onDragOver={(event) => {
+        if (
+          event.dataTransfer.files.length > 0 ||
+          hasDraggedStudioAsset(event.dataTransfer)
+        ) {
+          event.preventDefault();
+          event.dataTransfer.dropEffect = "copy";
+          setIsDropTarget(true);
+        }
+      }}
+      onDragLeave={() => setIsDropTarget(false)}
+      onDrop={(event) => {
+        event.preventDefault();
+        setIsDropTarget(false);
+        void addDroppedFiles(event);
+      }}
     >
-      {/* Resize handle */}
-      <div
-        onPointerDown={onPointerDown}
-        onPointerMove={onPointerMove}
-        onPointerUp={onPointerUp}
-        className="flex items-center justify-center py-1.5 cursor-ns-resize shrink-0 group"
-      >
-        <div className="w-10 h-1 rounded-full bg-foreground/10 group-hover:bg-foreground/25 transition-colors" />
-      </div>
+      <div className="flex shrink-0 items-center gap-2 px-2.5 pt-2.5 pb-2 md:px-4 md:pt-4">
+        <button
+          onClick={() => fileInputRef.current?.click()}
+          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-foreground/10 text-foreground/50 transition-colors hover:text-foreground/70 cursor-pointer md:h-10 md:w-10"
+          title="Add assets"
+        >
+          <Plus className="h-3 w-3 md:h-4 md:w-4" strokeWidth={1.9} />
+        </button>
 
-      {/* Attachments row at top */}
-      {attachments.length > 0 && (
-        <div className="flex items-center gap-2 px-3 pb-2 shrink-0 overflow-x-auto no-scrollbar">
-          {attachments.map((att, i) => (
-            <div key={i} className="relative group/att shrink-0">
-              <div className="relative h-12 w-12 rounded-lg overflow-hidden border border-border/30">
-                <Image src={att.preview} alt={`Attachment ${i + 1}`} fill className="object-cover" unoptimized />
+        {attachments.length > 0 ? (
+          <div className="flex items-center gap-2 overflow-x-auto no-scrollbar">
+            {attachments.map((attachment, index) => (
+              <div key={attachment.preview} className="relative group/att shrink-0">
+                <div className="relative h-12 w-12 rounded-lg overflow-hidden border border-border/30">
+                  <Image
+                    src={attachment.preview}
+                    alt={`Attachment ${index + 1}`}
+                    fill
+                    className="object-cover"
+                    unoptimized
+                  />
+                </div>
+                <button
+                  onClick={() => removeAttachment(index)}
+                  className="absolute -top-1.5 -right-1.5 h-4 w-4 flex items-center justify-center rounded-full bg-foreground/80 text-background opacity-0 group-hover/att:opacity-100 transition-opacity cursor-pointer"
+                >
+                  <HugeiconsIcon icon={Cancel01Icon} size={10} />
+                </button>
               </div>
-              <button
-                onClick={() => removeAttachment(i)}
-                className="absolute -top-1.5 -right-1.5 h-4 w-4 flex items-center justify-center rounded-full bg-foreground/80 text-background opacity-0 group-hover/att:opacity-100 transition-opacity cursor-pointer"
-              >
-                <HugeiconsIcon icon={Cancel01Icon} size={10} />
-              </button>
-            </div>
-          ))}
-          <button
-            onClick={() => fileInputRef.current?.click()}
-            className="h-12 w-12 flex items-center justify-center rounded-lg border border-dashed border-border/40 text-foreground/30 hover:text-foreground/50 hover:border-border/60 transition-colors cursor-pointer shrink-0"
-          >
-            <HugeiconsIcon icon={PlusSignCircleIcon} size={18} />
-          </button>
-        </div>
-      )}
-
-      {/* Hidden file input for attachments */}
+            ))}
+          </div>
+        ) : null}
+      </div>
+
       <input
         ref={fileInputRef}
         type="file"
         accept="image/*"
         multiple
         className="hidden"
-        onChange={(e) => {
-          const files = e.target.files;
-          if (files) Array.from(files).forEach(addAttachment);
-          e.target.value = "";
+        onChange={(event) => {
+          const files = event.target.files;
+
+          if (files) {
+            Array.from(files).forEach(addAttachment);
+          }
+
+          event.target.value = "";
         }}
       />
 
-      {/* Textarea */}
-      <div className="flex-1 px-4 overflow-hidden">
-        <Textarea
+      <div className="overflow-hidden px-3 pt-1 pb-2 md:px-4 md:pt-0 md:pb-3">
+        <textarea
           ref={textareaRef}
           value={prompt}
-          onChange={(e) => setPrompt(e.target.value)}
-          onKeyDown={handleKeyDown}
+          onChange={(event) => setPrompt(event.target.value)}
+          onKeyDown={(event) => {
+            void handleKeyDown(event);
+          }}
           placeholder="Describe your scene..."
-          className="w-full h-full resize-none border-0 bg-transparent p-0 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-foreground/30"
+          rows={1}
+          style={{ outline: "none", boxShadow: "none" }}
+          className="block w-full resize-none border-0 bg-transparent p-0 text-sm leading-6 text-foreground outline-none ring-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 caret-foreground placeholder:text-foreground/45"
         />
       </div>
 
-      {/* Bottom: settings left, generate button right */}
-      <div className="flex items-end justify-between gap-3 px-3 pb-3 pt-1 shrink-0">
-        <div className="flex items-center gap-2 overflow-x-auto no-scrollbar flex-1 min-w-0">
-          {/* Add image button when no attachments */}
-          {attachments.length === 0 && (
-            <button
-              onClick={() => fileInputRef.current?.click()}
-              className="h-7 w-7 flex items-center justify-center rounded-md border border-border/40 text-foreground/40 hover:text-foreground/60 hover:border-border/60 transition-colors cursor-pointer shrink-0"
-            >
-              <HugeiconsIcon icon={PlusSignCircleIcon} size={14} />
-            </button>
-          )}
-          {children}
-        </div>
-
-        {/* Generate button — bottom right, half the prompt bar height */}
-        <motion.button
-          whileHover={{ scale: 1.02 }}
-          whileTap={{ scale: 0.97 }}
-          onClick={generate}
-          disabled={!canSubmit}
-          style={{ height: DEFAULT_HEIGHT / 2 }}
-          className="w-24 flex items-center justify-center bg-[#F54E00] hover:bg-[#e04500] text-white text-sm font-semibold shrink-0 disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer transition-colors rounded-xl"
-        >
-          Generate
-        </motion.button>
+      <div className="flex shrink-0 flex-wrap items-center gap-1.5 px-3 pb-3 pt-1 md:gap-2 md:flex-nowrap md:overflow-x-auto md:no-scrollbar">
+        {children}
       </div>
     </div>
   );
diff --git a/components/studio/setting-picker.tsx b/components/studio/setting-picker.tsx
new file mode 100644
index 0000000..47639f6
--- /dev/null
+++ b/components/studio/setting-picker.tsx
@@ -0,0 +1,227 @@
+"use client";
+
+import {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { createPortal } from "react-dom";
+import { Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface SettingPickerOption {
+  value: string;
+  label: string;
+  description?: string;
+  icon?: React.ReactNode;
+}
+
+interface SettingPickerProps {
+  label: string;
+  value: string;
+  options: SettingPickerOption[];
+  onChange: (value: string) => void;
+  className?: string;
+  panelClassName?: string;
+  title?: string;
+  renderPanel?: (context: {
+    close: () => void;
+    selectedOption?: SettingPickerOption;
+  }) => ReactNode;
+}
+
+export function SettingPicker({
+  label,
+  value,
+  options,
+  onChange,
+  className,
+  panelClassName,
+  title,
+  renderPanel,
+}: SettingPickerProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const [panelStyle, setPanelStyle] = useState<{
+    bottom: number;
+    left: number;
+    width: number;
+    maxHeight: number;
+  } | null>(null);
+
+  const selectedOption = useMemo(
+    () => options.find((option) => option.value === value) ?? options[0],
+    [options, value]
+  );
+
+  useLayoutEffect(() => {
+    if (!isOpen || !triggerRef.current) {
+      return;
+    }
+
+    const updatePosition = () => {
+      const triggerRect = triggerRef.current?.getBoundingClientRect();
+
+      if (!triggerRect) {
+        return;
+      }
+
+      const viewportPadding = 12;
+      const preferredWidth = Math.min(288, window.innerWidth - viewportPadding * 2);
+      const left = Math.min(
+        Math.max(viewportPadding, triggerRect.left),
+        window.innerWidth - preferredWidth - viewportPadding
+      );
+      const bottom = Math.max(
+        viewportPadding,
+        window.innerHeight - triggerRect.top + 10
+      );
+      const maxHeight = Math.max(viewportPadding, triggerRect.top - viewportPadding);
+
+      setPanelStyle({
+        bottom,
+        left,
+        width: preferredWidth,
+        maxHeight,
+      });
+    };
+
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [isOpen, options]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const handlePointerDown = (event: MouseEvent) => {
+      const target = event.target as Node;
+
+      if (
+        !containerRef.current?.contains(target) &&
+        !panelRef.current?.contains(target)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handlePointerDown);
+    window.addEventListener("keydown", handleEscape);
+
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      window.removeEventListener("keydown", handleEscape);
+    };
+  }, [isOpen]);
+
+  return (
+    <div ref={containerRef} className="relative">
+      <button
+        ref={triggerRef}
+        type="button"
+        onClick={() => setIsOpen((open) => !open)}
+        className={cn(
+          "flex h-6.5 items-center gap-1 rounded-md bg-foreground/10 px-2 text-[11px] font-medium text-foreground transition-colors hover:bg-foreground/14 md:h-7 md:gap-1.5 md:px-2.5 md:text-xs",
+          isOpen && "bg-foreground/14",
+          className
+        )}
+      >
+        {selectedOption?.icon}
+        <span className="truncate">{selectedOption?.label}</span>
+      </button>
+
+      {isOpen && panelStyle
+        ? createPortal(
+            <div
+              ref={panelRef}
+              style={{
+                bottom: panelStyle.bottom,
+                left: panelStyle.left,
+                width: panelStyle.width,
+                maxHeight: panelStyle.maxHeight,
+              }}
+              className={cn(
+                "fixed z-[120] overflow-y-auto rounded-[1.2rem] border border-border bg-background shadow-[0_28px_80px_rgba(0,0,0,0.35)]",
+                panelClassName
+              )}
+            >
+              {renderPanel ? (
+                renderPanel({
+                  close: () => setIsOpen(false),
+                  selectedOption,
+                })
+              ) : (
+                <>
+                  <div className="border-b border-border px-4 py-3.5">
+                    <p className="text-sm font-medium tracking-[-0.02em] text-foreground">
+                      {title ?? `Select ${label}`}
+                    </p>
+                  </div>
+
+                  <div className="space-y-1.5 p-2">
+                    {options.map((option) => {
+                      const isSelected = option.value === value;
+
+                      return (
+                        <button
+                          key={option.value}
+                          type="button"
+                          onClick={() => {
+                            onChange(option.value);
+                            setIsOpen(false);
+                          }}
+                          className={cn(
+                            "flex w-full items-start justify-between gap-3 rounded-[0.95rem] border px-3 py-3 text-left transition-colors",
+                            isSelected
+                              ? "border-border bg-secondary"
+                              : "border-transparent hover:bg-secondary/70"
+                          )}
+                        >
+                          <div className="min-w-0">
+                            <div className="flex items-center gap-2">
+                              {option.icon}
+                              <p className="truncate text-sm font-medium tracking-[-0.01em] text-foreground">
+                                {option.label}
+                              </p>
+                            </div>
+                            {option.description ? (
+                              <p className="mt-1 text-xs leading-5 text-foreground/55">
+                                {option.description}
+                              </p>
+                            ) : null}
+                          </div>
+
+                          <span className="pt-0.5 text-foreground/70">
+                            {isSelected ? <Check className="h-4 w-4" /> : null}
+                          </span>
+                        </button>
+                      );
+                    })}
+                  </div>
+                </>
+              )}
+            </div>,
+            document.body
+          )
+        : null}
+    </div>
+  );
+}
diff --git a/components/studio/studio-canvas.tsx b/components/studio/studio-canvas.tsx
index 3ea325c..573a7d5 100644
--- a/components/studio/studio-canvas.tsx
+++ b/components/studio/studio-canvas.tsx
@@ -2,19 +2,69 @@
 
 import { AnimatePresence, motion } from "framer-motion";
 import { useStudioStore } from "@/store/useStudioStore";
-import { GenerationLoading } from "./generation-loading";
 import { GenerationDisplay } from "./generation-display";
+import { GenerationLoading } from "./generation-loading";
+import { StudioGalleryViewer } from "./studio-gallery-viewer";
+
+interface StudioCanvasProps {
+  isGenerating: boolean;
+  error: string | null;
+}
 
-export function StudioCanvas() {
-  const { isGenerating, generationResult } = useStudioStore();
+export function StudioCanvas({ isGenerating, error }: StudioCanvasProps) {
+  const canvasAssets = useStudioStore((state) => state.canvasAssets);
+  const hasGeneration = isGenerating || canvasAssets.length > 0;
+  const canvasClassName = hasGeneration
+    ? "flex-1 overflow-auto px-4 pb-[200px] pt-4"
+    : "relative flex-1 overflow-auto px-4 pb-[200px] bg-[radial-gradient(circle_at_50%_34%,rgba(245,78,0,0.16),transparent_22%),radial-gradient(circle_at_38%_38%,rgba(36,162,255,0.12),transparent_20%),radial-gradient(circle_at_64%_62%,rgba(255,209,71,0.1),transparent_18%),linear-gradient(180deg,rgba(24,20,12,0.3)_0%,rgba(20,18,11,0.08)_46%,rgba(20,18,11,0.36)_100%)]";
 
   return (
-    <div className="flex-1 flex items-center justify-center px-4 pb-[200px] overflow-auto">
+    <div className={canvasClassName}>
+      {!hasGeneration ? (
+        <>
+          <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_30%,rgba(255,255,255,0.08),rgba(255,255,255,0.02)_18%,rgba(255,255,255,0)_38%)]" />
+          <div className="pointer-events-none absolute left-1/2 top-[34%] h-[56rem] w-[72rem] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[radial-gradient(circle,rgba(245,78,0,0.18),rgba(245,78,0,0.06)_38%,rgba(245,78,0,0)_72%)] blur-3xl" />
+          <div className="pointer-events-none absolute left-[28%] top-[38%] h-[38rem] w-[38rem] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[radial-gradient(circle,rgba(36,162,255,0.13),rgba(36,162,255,0.04)_40%,rgba(36,162,255,0)_74%)] blur-3xl" />
+          <div className="pointer-events-none absolute left-[72%] top-[58%] h-[30rem] w-[30rem] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[radial-gradient(circle,rgba(255,209,71,0.14),rgba(255,209,71,0.04)_42%,rgba(255,209,71,0)_76%)] blur-3xl" />
+          <div className="pointer-events-none absolute inset-x-0 bottom-0 h-48 bg-[linear-gradient(to_bottom,rgba(20,18,11,0)_0%,rgba(20,18,11,0.1)_44%,rgba(20,18,11,0.3)_100%)] blur-2xl" />
+        </>
+      ) : null}
+
       <AnimatePresence mode="wait">
-        {isGenerating ? (
+        {canvasAssets.length > 0 ? (
+          <motion.div
+            key="canvas-assets"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="relative"
+          >
+            <GenerationDisplay assets={canvasAssets} />
+            {isGenerating ? (
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-[1.25rem] bg-background/35 backdrop-blur-[2px]"
+              >
+                <GenerationLoading />
+              </motion.div>
+            ) : null}
+          </motion.div>
+        ) : isGenerating ? (
           <GenerationLoading key="loading" />
-        ) : generationResult ? (
-          <GenerationDisplay key="result" result={generationResult} />
+        ) : error ? (
+          <motion.div
+            key="error"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ duration: 0.4, ease: "easeOut" }}
+            className="max-w-xl rounded-2xl border border-red-500/20 bg-red-500/5 px-6 py-5 text-center"
+          >
+            <p className="text-sm font-medium text-red-500">Generation failed</p>
+            <p className="mt-2 text-sm text-foreground/70">{error}</p>
+          </motion.div>
         ) : (
           <motion.div
             key="placeholder"
@@ -22,14 +72,27 @@ export function StudioCanvas() {
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -10 }}
             transition={{ duration: 0.6, ease: "easeOut" }}
-            className="text-center max-w-2xl"
+            className="relative mx-auto mt-[12vh] flex min-h-[52vh] w-full max-w-4xl items-center justify-center overflow-hidden rounded-[2rem]"
           >
-            <h1 className="text-2xl md:text-4xl lg:text-5xl font-light tracking-tight text-foreground/20 select-none">
-              What will you create with Infinite budget
-            </h1>
+            <div className="pointer-events-none absolute inset-x-10 top-10 bottom-10 rounded-[1.75rem] bg-background/8 backdrop-blur-[3px]" />
+
+            <div className="relative z-10 max-w-2xl px-8 text-center">
+              <p className="mb-4 text-[11px] font-semibold uppercase tracking-[0.34em] text-foreground/35">
+                Studio Playground
+              </p>
+              <h1 className="text-3xl font-medium tracking-[-0.04em] text-foreground/45 select-none md:text-5xl lg:text-6xl">
+                Build the scene you&apos;d make if limits disappeared.
+              </h1>
+              <p className="mx-auto mt-5 max-w-xl text-sm leading-6 text-foreground/38 md:text-base">
+                Start with a prompt, a frame, or a wild idea and shape it into
+                something cinematic.
+              </p>
+            </div>
           </motion.div>
         )}
       </AnimatePresence>
+
+      <StudioGalleryViewer />
     </div>
   );
 }
diff --git a/components/studio/studio-gallery-viewer.tsx b/components/studio/studio-gallery-viewer.tsx
new file mode 100644
index 0000000..8ca10c9
--- /dev/null
+++ b/components/studio/studio-gallery-viewer.tsx
@@ -0,0 +1,182 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import Image from "next/image";
+import { useStudioGalleryViewer } from "@/hooks/use-studio-gallery-viewer";
+import { cn } from "@/lib/utils";
+
+function ViewerNavButton({
+  direction,
+  disabled,
+  onClick,
+}: {
+  direction: "previous" | "next";
+  disabled: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={direction === "previous" ? "Previous asset" : "Next asset"}
+      className={cn(
+        "flex h-11 w-11 items-center justify-center rounded-full border border-white/15 bg-black/50 text-white backdrop-blur transition",
+        disabled
+          ? "cursor-not-allowed opacity-35"
+          : "hover:bg-black/70"
+      )}
+    >
+      <svg
+        className={cn("h-5 w-5", direction === "next" ? "" : "rotate-180")}
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M9 5l7 7-7 7"
+        />
+      </svg>
+    </button>
+  );
+}
+
+export function StudioGalleryViewer() {
+  const {
+    assets,
+    selectedAsset,
+    selectedIndex,
+    isOpen,
+    hasPrevious,
+    hasNext,
+    closeViewer,
+    goToNext,
+    goToPrevious,
+  } = useStudioGalleryViewer();
+
+  return (
+    <AnimatePresence>
+      {isOpen && selectedAsset ? (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className="fixed inset-0 z-[70] flex items-center justify-center bg-black/85 p-4 backdrop-blur-sm sm:p-6"
+          onClick={closeViewer}
+        >
+          <motion.div
+            initial={{ scale: 0.96, opacity: 0, y: 16 }}
+            animate={{ scale: 1, opacity: 1, y: 0 }}
+            exit={{ scale: 0.98, opacity: 0 }}
+            transition={{ type: "spring", stiffness: 280, damping: 24 }}
+            className="relative flex h-full w-full max-w-7xl flex-col overflow-hidden rounded-[2rem] border border-white/10 bg-[#0b0b0a]/95 shadow-2xl"
+            onClick={(event) => event.stopPropagation()}
+          >
+            <div className="flex items-center justify-between border-b border-white/10 px-4 py-4 sm:px-6">
+              <div className="min-w-0">
+                <p className="text-[11px] font-semibold uppercase tracking-[0.28em] text-white/45">
+                  Studio Viewer
+                </p>
+                <p className="mt-1 text-sm text-white/72">
+                  {selectedIndex + 1} / {assets.length}
+                </p>
+              </div>
+
+              <button
+                type="button"
+                onClick={closeViewer}
+                aria-label="Close viewer"
+                className="flex h-10 w-10 items-center justify-center rounded-full border border-white/15 bg-black/45 text-white transition hover:bg-black/65"
+              >
+                <svg
+                  className="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+            </div>
+
+            <div className="grid min-h-0 flex-1 gap-4 p-4 sm:grid-cols-[auto,minmax(0,1fr),auto] sm:items-center sm:p-6">
+              <div className="hidden sm:flex sm:justify-start">
+                <ViewerNavButton
+                  direction="previous"
+                  disabled={!hasPrevious}
+                  onClick={goToPrevious}
+                />
+              </div>
+
+              <div className="relative flex min-h-0 flex-1 items-center justify-center overflow-hidden rounded-[1.5rem] border border-white/8 bg-black/45">
+                {selectedAsset.type === "video" ? (
+                  <video
+                    key={selectedAsset.id}
+                    src={selectedAsset.url}
+                    controls
+                    autoPlay
+                    playsInline
+                    preload="metadata"
+                    className="max-h-full w-full object-contain"
+                  />
+                ) : (
+                  <div className="relative h-full min-h-[40vh] w-full">
+                    <Image
+                      key={selectedAsset.id}
+                      src={selectedAsset.url}
+                      alt={`Generated image ${selectedIndex + 1}`}
+                      fill
+                      className="object-contain"
+                      priority
+                      unoptimized
+                    />
+                  </div>
+                )}
+              </div>
+
+              <div className="hidden sm:flex sm:justify-end">
+                <ViewerNavButton
+                  direction="next"
+                  disabled={!hasNext}
+                  onClick={goToNext}
+                />
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-3 border-t border-white/10 px-4 py-4 sm:px-6">
+              <div className="flex items-center justify-between gap-3">
+                <span className="inline-flex self-start rounded-full border border-white/10 bg-white/6 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-white/70">
+                  {selectedAsset.providerModel}
+                </span>
+                <div className="flex items-center gap-3 sm:hidden">
+                  <ViewerNavButton
+                    direction="previous"
+                    disabled={!hasPrevious}
+                    onClick={goToPrevious}
+                  />
+                  <ViewerNavButton
+                    direction="next"
+                    disabled={!hasNext}
+                    onClick={goToNext}
+                  />
+                </div>
+              </div>
+
+              <p className="max-w-4xl text-sm leading-6 text-white/72">
+                {selectedAsset.prompt}
+              </p>
+            </div>
+          </motion.div>
+        </motion.div>
+      ) : null}
+    </AnimatePresence>
+  );
+}
diff --git a/components/studio/studio-prompt-bar.tsx b/components/studio/studio-prompt-bar.tsx
index d66312b..d1e56f5 100644
--- a/components/studio/studio-prompt-bar.tsx
+++ b/components/studio/studio-prompt-bar.tsx
@@ -1,13 +1,22 @@
 "use client";
 
-import { motion, AnimatePresence } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
 import { useStudioStore } from "@/store/useStudioStore";
+import { ImageSettings } from "./image-settings";
 import { ModeSwitcher } from "./mode-switcher";
+import { PromptFooter } from "./prompt-footer";
 import { PromptInput } from "./prompt-input";
-import { ImageSettings } from "./image-settings";
 import { VideoSettings } from "./video-settings";
 
-export function StudioPromptBar() {
+interface StudioPromptBarProps {
+  isGenerating: boolean;
+  onGenerate: () => void | Promise<void>;
+}
+
+export function StudioPromptBar({
+  isGenerating,
+  onGenerate,
+}: StudioPromptBarProps) {
   const { mode } = useStudioStore();
 
   return (
@@ -17,43 +26,61 @@ export function StudioPromptBar() {
       transition={{ duration: 0.5, delay: 0.3, ease: "easeOut" }}
       className="fixed bottom-0 left-0 right-0 z-50"
     >
-      {/* Subtle upward gradient glow */}
-      <div
-        className="absolute bottom-0 left-0 right-0 h-80 pointer-events-none"
-        style={{
-          background: "linear-gradient(to top, var(--background) 0%, transparent 100%)",
-          opacity: 0.85,
-        }}
-      />
+      <div className="absolute bottom-0 left-0 right-0 h-80 pointer-events-none bg-[linear-gradient(to_bottom,rgba(20,18,11,0)_0%,rgba(20,18,11,0.08)_26%,rgba(20,18,11,0.18)_56%,rgba(20,18,11,0.34)_100%)]" />
 
       <div className="relative pb-6 px-4">
         <div className="max-w-4xl mx-auto flex items-end gap-3">
-          <ModeSwitcher />
-          <PromptInput>
-            <AnimatePresence mode="wait">
-              {mode === "image" ? (
-                <motion.div
-                  key="image-settings"
-                  initial={{ opacity: 0, y: 5 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -5 }}
-                  transition={{ duration: 0.15 }}
-                >
-                  <ImageSettings />
-                </motion.div>
-              ) : (
-                <motion.div
-                  key="video-settings"
-                  initial={{ opacity: 0, y: 5 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -5 }}
-                  transition={{ duration: 0.15 }}
-                >
-                  <VideoSettings />
-                </motion.div>
-              )}
-            </AnimatePresence>
-          </PromptInput>
+          <ModeSwitcher className="hidden md:flex" />
+          <div className="flex-1">
+            <ModeSwitcher
+              orientation="horizontal"
+              className="mb-3 inline-flex md:hidden"
+            />
+            <div className="relative flex items-end bg-secondary rounded-2xl border border-border/50 overflow-hidden">
+              <div className="absolute left-1/2 top-1 z-10 hidden -translate-x-1/2 items-center justify-center py-1 md:flex">
+                <div className="h-1 w-10 rounded-full bg-foreground/10 transition-colors group-hover:bg-foreground/25" />
+              </div>
+
+              <PromptInput
+                isGenerating={isGenerating}
+                onGenerate={onGenerate}
+              >
+                <AnimatePresence mode="wait">
+                  {mode === "image" ? (
+                    <motion.div
+                      key="image-settings"
+                      initial={{ opacity: 0, y: 5 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: -5 }}
+                      transition={{ duration: 0.15 }}
+                    >
+                      <ImageSettings />
+                    </motion.div>
+                  ) : (
+                    <motion.div
+                      key="video-settings"
+                      initial={{ opacity: 0, y: 5 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: -5 }}
+                      transition={{ duration: 0.15 }}
+                    >
+                      <VideoSettings />
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </PromptInput>
+              <PromptFooter
+                isGenerating={isGenerating}
+                onGenerate={onGenerate}
+                className="hidden md:flex"
+              />
+            </div>
+            <PromptFooter
+              isGenerating={isGenerating}
+              onGenerate={onGenerate}
+              className="px-0 pb-0 pt-3 md:hidden"
+            />
+          </div>
         </div>
       </div>
     </motion.div>
diff --git a/components/studio/video-settings.tsx b/components/studio/video-settings.tsx
index 316c899..bddbd3d 100644
--- a/components/studio/video-settings.tsx
+++ b/components/studio/video-settings.tsx
@@ -2,125 +2,98 @@
 
 import { HugeiconsIcon } from "@hugeicons/react";
 import {
+  ArtificialIntelligence01Icon,
   AspectRatioIcon,
-  Clock01Icon,
   VolumeHighIcon,
   VolumeOffIcon,
-  ArtificialIntelligence01Icon,
 } from "@hugeicons/core-free-icons";
-import { useStudioStore } from "@/store/useStudioStore";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { FrameUpload } from "./frame-upload";
 import { cn } from "@/lib/utils";
-import type { AspectRatio } from "@/types/studio";
-
-const ASPECT_RATIOS: AspectRatio[] = ["1:1", "16:9", "9:16"];
+import { useStudioStore } from "@/store/useStudioStore";
+import { DurationPicker } from "./duration-picker";
+import { SettingPicker, type SettingPickerOption } from "./setting-picker";
+import type { VideoAIModel, VideoAspectRatio } from "@/types/studio";
 
-const DURATIONS = [5, 10, 15, 30];
+const VIDEO_MODELS: SettingPickerOption[] = [
+  {
+    value: "kling-3",
+    label: "Kling 3",
+    description: "Balanced video generation for cinematic motion prompts.",
+    icon: <HugeiconsIcon icon={ArtificialIntelligence01Icon} size={13} />,
+  },
+];
 
-const VIDEO_MODELS = [
-  { value: "invook-v2", label: "Invook V2" },
-  { value: "invook-v1", label: "Invook V1" },
-  { value: "stable-diffusion", label: "Stable Diffusion" },
+const ASPECT_RATIOS: SettingPickerOption[] = [
+  {
+    value: "16:9",
+    label: "16:9",
+    description: "Wide cinematic framing for landscape-first motion.",
+    icon: <HugeiconsIcon icon={AspectRatioIcon} size={13} />,
+  },
+  {
+    value: "9:16",
+    label: "9:16",
+    description: "Vertical framing for reels, stories, and mobile video.",
+    icon: <HugeiconsIcon icon={AspectRatioIcon} size={13} />,
+  },
+  {
+    value: "1:1",
+    label: "1:1",
+    description: "Square framing for balanced motion compositions.",
+    icon: <HugeiconsIcon icon={AspectRatioIcon} size={13} />,
+  },
 ];
 
+const settingChipClass =
+  "h-6.5 rounded-md border-transparent bg-foreground/10 px-2 text-[11px] font-medium text-foreground shadow-none outline-none focus:border-transparent focus:outline-none focus:ring-0 focus-visible:border-transparent focus-visible:outline-none focus-visible:ring-0 md:h-7 md:px-2.5 md:text-xs";
+
 export function VideoSettings() {
   const {
     videoAspectRatio,
     setVideoAspectRatio,
     videoDuration,
     setVideoDuration,
-    firstFramePreview,
-    setFirstFrame,
-    lastFramePreview,
-    setLastFrame,
     videoAudio,
     setVideoAudio,
-    aiModel,
-    setAIModel,
+    videoModel,
+    setVideoModel,
   } = useStudioStore();
 
   return (
-    <div className="flex items-center gap-2">
-      {/* AI Model */}
-      <Select value={aiModel} onValueChange={(v) => setAIModel(v as typeof aiModel)}>
-        <SelectTrigger className="h-7 w-auto gap-1.5 text-xs bg-transparent border-border/40 rounded-md px-2.5">
-          <HugeiconsIcon icon={ArtificialIntelligence01Icon} size={14} />
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          {VIDEO_MODELS.map(({ value, label }) => (
-            <SelectItem key={value} value={value} className="text-xs">
-              {label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-
-      {/* First Frame */}
-      <FrameUpload
-        label="First Frame"
-        preview={firstFramePreview}
-        onUpload={setFirstFrame}
+    <div className="flex flex-wrap items-center gap-1.5 md:gap-2 md:flex-nowrap">
+      <SettingPicker
+        label="model"
+        value={videoModel}
+        options={VIDEO_MODELS}
+        onChange={(value) => setVideoModel(value as VideoAIModel)}
+        className="w-[7.1rem] md:w-[9.75rem]"
       />
 
-      {/* Last Frame */}
-      <FrameUpload
-        label="Last Frame"
-        preview={lastFramePreview}
-        onUpload={setLastFrame}
+      <DurationPicker
+        value={videoDuration}
+        onChange={setVideoDuration}
       />
 
-      {/* Duration */}
-      <Select
-        value={String(videoDuration)}
-        onValueChange={(v) => setVideoDuration(Number(v))}
-      >
-        <SelectTrigger className="h-7 w-auto gap-1.5 text-xs bg-transparent border-border/40 rounded-md px-2.5">
-          <HugeiconsIcon icon={Clock01Icon} size={14} />
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          {DURATIONS.map((d) => (
-            <SelectItem key={d} value={String(d)} className="text-xs">
-              {d}s
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-
-      {/* Aspect Ratio */}
-      <Select value={videoAspectRatio} onValueChange={(v) => setVideoAspectRatio(v as AspectRatio)}>
-        <SelectTrigger className="h-7 w-auto gap-1.5 text-xs bg-transparent border-border/40 rounded-md px-2.5">
-          <HugeiconsIcon icon={AspectRatioIcon} size={14} />
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          {ASPECT_RATIOS.map((ratio) => (
-            <SelectItem key={ratio} value={ratio} className="text-xs">
-              {ratio}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
+      <SettingPicker
+        label="aspect ratio"
+        value={videoAspectRatio}
+        options={ASPECT_RATIOS}
+        onChange={(value) => setVideoAspectRatio(value as VideoAspectRatio)}
+      />
 
-      {/* Audio toggle */}
       <button
         onClick={() => setVideoAudio(!videoAudio)}
         className={cn(
-          "h-7 flex items-center gap-1.5 px-2.5 rounded-md border text-xs font-medium transition-colors cursor-pointer",
+          "flex shrink-0 items-center gap-1 transition-colors cursor-pointer md:gap-1.5",
+          settingChipClass,
           videoAudio
-            ? "border-foreground/20 bg-foreground/5 text-foreground"
-            : "border-border/40 text-foreground/50 hover:text-foreground/70"
+            ? "bg-foreground/10 text-foreground"
+            : "bg-foreground/10 text-foreground/50 hover:text-foreground/70"
         )}
       >
-        <HugeiconsIcon icon={videoAudio ? VolumeHighIcon : VolumeOffIcon} size={14} />
+        <HugeiconsIcon
+          icon={videoAudio ? VolumeHighIcon : VolumeOffIcon}
+          size={13}
+        />
         <span>Audio</span>
       </button>
     </div>
diff --git a/hooks/use-generate-image.ts b/hooks/use-generate-image.ts
new file mode 100644
index 0000000..28dab8a
--- /dev/null
+++ b/hooks/use-generate-image.ts
@@ -0,0 +1,146 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { GenerationJobResponse } from "@/types/studio";
+
+interface GenerateImageInput {
+  prompt: string;
+  aspectRatio: string;
+  count: number;
+  resolution: string;
+  attachments: File[];
+}
+
+async function parseGenerationResponse(response: Response) {
+  const payload = (await response.json()) as GenerationJobResponse;
+
+  if (!response.ok || payload.status === "failed") {
+    throw new Error(payload.error || "Image generation failed.");
+  }
+
+  return payload;
+}
+
+function buildStatusPayload(response: GenerationJobResponse) {
+  return {
+    requestId: response.jobId,
+    endpointId: response.providerModel,
+    type: response.type,
+    prompt: response.prompt,
+    requestSettings: JSON.stringify(response.requestSettings),
+  };
+}
+
+export function useGenerateImage() {
+  const [data, setData] = useState<GenerationJobResponse | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const pollTimeoutRef = useRef<number | null>(null);
+
+  const clearPolling = useCallback(() => {
+    if (pollTimeoutRef.current !== null) {
+      window.clearTimeout(pollTimeoutRef.current);
+      pollTimeoutRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => clearPolling, [clearPolling]);
+
+  const poll = useCallback(
+    async (pendingResponse: GenerationJobResponse) => {
+      setIsProcessing(true);
+
+      try {
+        const response = await fetch("/api/studio/generate/status", {
+          method: "POST",
+          cache: "no-store",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(buildStatusPayload(pendingResponse)),
+        });
+        const payload = await parseGenerationResponse(response);
+
+        setData(payload);
+
+        if (payload.status === "queued" || payload.status === "processing") {
+          pollTimeoutRef.current = window.setTimeout(() => {
+            void poll(payload);
+          }, 1500);
+          return;
+        }
+
+        setIsProcessing(false);
+      } catch (caughtError) {
+        setError(
+          caughtError instanceof Error
+            ? caughtError.message
+            : "Image generation failed."
+        );
+        setIsProcessing(false);
+      }
+    },
+    []
+  );
+
+  const mutateAsync = useCallback(
+    async (input: GenerateImageInput) => {
+      clearPolling();
+      setError(null);
+      setData(null);
+      setIsSubmitting(true);
+
+      const formData = new FormData();
+      formData.set("prompt", input.prompt);
+      formData.set("aspectRatio", input.aspectRatio);
+      formData.set("count", String(input.count));
+      formData.set("resolution", input.resolution);
+      input.attachments.forEach((attachment) => {
+        formData.append("attachments", attachment);
+      });
+
+      try {
+        const response = await fetch("/api/studio/generate/image", {
+          method: "POST",
+          body: formData,
+        });
+        const payload = await parseGenerationResponse(response);
+
+        setData(payload);
+        setIsSubmitting(false);
+        await poll(payload);
+        return payload;
+      } catch (caughtError) {
+        const message =
+          caughtError instanceof Error
+            ? caughtError.message
+            : "Image generation failed.";
+        setError(message);
+        setIsSubmitting(false);
+        setIsProcessing(false);
+        throw caughtError;
+      }
+    },
+    [clearPolling, poll]
+  );
+
+  return {
+    mutate: (input: GenerateImageInput) => {
+      void mutateAsync(input);
+    },
+    mutateAsync,
+    data,
+    error,
+    isSubmitting,
+    isProcessing,
+    isPending: isSubmitting || isProcessing,
+    reset: () => {
+      clearPolling();
+      setData(null);
+      setError(null);
+      setIsSubmitting(false);
+      setIsProcessing(false);
+    },
+  };
+}
diff --git a/hooks/use-generate-video.ts b/hooks/use-generate-video.ts
new file mode 100644
index 0000000..0a00347
--- /dev/null
+++ b/hooks/use-generate-video.ts
@@ -0,0 +1,149 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { GenerationJobResponse } from "@/types/studio";
+
+interface GenerateVideoInput {
+  prompt: string;
+  aspectRatio: string;
+  duration: number;
+  audio: boolean;
+  firstFrame: File;
+  lastFrame: File | null;
+}
+
+async function parseGenerationResponse(response: Response) {
+  const payload = (await response.json()) as GenerationJobResponse;
+
+  if (!response.ok || payload.status === "failed") {
+    throw new Error(payload.error || "Video generation failed.");
+  }
+
+  return payload;
+}
+
+function buildStatusPayload(response: GenerationJobResponse) {
+  return {
+    requestId: response.jobId,
+    endpointId: response.providerModel,
+    type: response.type,
+    prompt: response.prompt,
+    requestSettings: JSON.stringify(response.requestSettings),
+  };
+}
+
+export function useGenerateVideo() {
+  const [data, setData] = useState<GenerationJobResponse | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const pollTimeoutRef = useRef<number | null>(null);
+
+  const clearPolling = useCallback(() => {
+    if (pollTimeoutRef.current !== null) {
+      window.clearTimeout(pollTimeoutRef.current);
+      pollTimeoutRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => clearPolling, [clearPolling]);
+
+  const poll = useCallback(
+    async (pendingResponse: GenerationJobResponse) => {
+      setIsProcessing(true);
+
+      try {
+        const response = await fetch("/api/studio/generate/status", {
+          method: "POST",
+          cache: "no-store",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(buildStatusPayload(pendingResponse)),
+        });
+        const payload = await parseGenerationResponse(response);
+
+        setData(payload);
+
+        if (payload.status === "queued" || payload.status === "processing") {
+          pollTimeoutRef.current = window.setTimeout(() => {
+            void poll(payload);
+          }, 2000);
+          return;
+        }
+
+        setIsProcessing(false);
+      } catch (caughtError) {
+        setError(
+          caughtError instanceof Error
+            ? caughtError.message
+            : "Video generation failed."
+        );
+        setIsProcessing(false);
+      }
+    },
+    []
+  );
+
+  const mutateAsync = useCallback(
+    async (input: GenerateVideoInput) => {
+      clearPolling();
+      setError(null);
+      setData(null);
+      setIsSubmitting(true);
+
+      const formData = new FormData();
+      formData.set("prompt", input.prompt);
+      formData.set("aspectRatio", input.aspectRatio);
+      formData.set("duration", String(input.duration));
+      formData.set("audio", String(input.audio));
+      formData.set("firstFrame", input.firstFrame);
+
+      if (input.lastFrame) {
+        formData.set("lastFrame", input.lastFrame);
+      }
+
+      try {
+        const response = await fetch("/api/studio/generate/video", {
+          method: "POST",
+          body: formData,
+        });
+        const payload = await parseGenerationResponse(response);
+
+        setData(payload);
+        setIsSubmitting(false);
+        await poll(payload);
+        return payload;
+      } catch (caughtError) {
+        const message =
+          caughtError instanceof Error
+            ? caughtError.message
+            : "Video generation failed.";
+        setError(message);
+        setIsSubmitting(false);
+        setIsProcessing(false);
+        throw caughtError;
+      }
+    },
+    [clearPolling, poll]
+  );
+
+  return {
+    mutate: (input: GenerateVideoInput) => {
+      void mutateAsync(input);
+    },
+    mutateAsync,
+    data,
+    error,
+    isSubmitting,
+    isProcessing,
+    isPending: isSubmitting || isProcessing,
+    reset: () => {
+      clearPolling();
+      setData(null);
+      setError(null);
+      setIsSubmitting(false);
+      setIsProcessing(false);
+    },
+  };
+}
diff --git a/hooks/use-studio-gallery-viewer.ts b/hooks/use-studio-gallery-viewer.ts
new file mode 100644
index 0000000..62d0361
--- /dev/null
+++ b/hooks/use-studio-gallery-viewer.ts
@@ -0,0 +1,72 @@
+"use client";
+
+import { useEffect, useMemo, useRef } from "react";
+import { useStudioStore } from "@/store/useStudioStore";
+
+export function useStudioGalleryViewer() {
+  const canvasAssets = useStudioStore((state) => state.canvasAssets);
+  const selectedAssetId = useStudioStore((state) => state.selectedAssetId);
+  const closeViewer = useStudioStore((state) => state.closeViewer);
+  const goToNext = useStudioStore((state) => state.goToNext);
+  const goToPrevious = useStudioStore((state) => state.goToPrevious);
+
+  const selectedIndex = useMemo(
+    () =>
+      selectedAssetId
+        ? canvasAssets.findIndex((asset) => asset.id === selectedAssetId)
+        : -1,
+    [canvasAssets, selectedAssetId]
+  );
+
+  const selectedAsset =
+    selectedIndex >= 0 ? canvasAssets[selectedIndex] : null;
+  const isOpen = selectedIndex >= 0;
+  const hasPrevious = selectedIndex > 0;
+  const hasNext = selectedIndex >= 0 && selectedIndex < canvasAssets.length - 1;
+  const onKeyDownRef = useRef<(event: KeyboardEvent) => void>(() => {});
+
+  onKeyDownRef.current = (event: KeyboardEvent) => {
+    if (!isOpen) {
+      return;
+    }
+
+    if (event.key === "Escape") {
+      closeViewer();
+      return;
+    }
+
+    if (event.key === "ArrowLeft" && hasPrevious) {
+      goToPrevious();
+      return;
+    }
+
+    if (event.key === "ArrowRight" && hasNext) {
+      goToNext();
+    }
+  };
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      onKeyDownRef.current(event);
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen]);
+
+  return {
+    assets: canvasAssets,
+    selectedAsset,
+    selectedIndex,
+    isOpen,
+    hasPrevious,
+    hasNext,
+    closeViewer,
+    goToNext,
+    goToPrevious,
+  };
+}
diff --git a/hooks/use-studio-generation.ts b/hooks/use-studio-generation.ts
new file mode 100644
index 0000000..28f1813
--- /dev/null
+++ b/hooks/use-studio-generation.ts
@@ -0,0 +1,163 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useGenerateImage } from "@/hooks/use-generate-image";
+import { useGenerateVideo } from "@/hooks/use-generate-video";
+import { useStudioStore } from "@/store/useStudioStore";
+import type {
+  GenerationJobResponse,
+  GenerationResult,
+  StudioCanvasAsset,
+  StudioMode,
+  StudioGenerationState,
+} from "@/types/studio";
+
+function toGenerationResult(
+  response: GenerationJobResponse | null
+): GenerationResult | null {
+  if (!response || response.status !== "completed") {
+    return null;
+  }
+
+  return {
+    jobId: response.jobId,
+    status: "success",
+    type: response.type,
+    urls: response.outputs.map((output) => output.url),
+    outputs: response.outputs,
+    prompt: response.prompt,
+    providerModel: response.providerModel,
+    settings: response.requestSettings,
+    createdAt: response.createdAt,
+  };
+}
+
+function resultToCanvasAssets(
+  result: GenerationResult
+): StudioCanvasAsset[] {
+  return result.outputs.map((output, index) => ({
+    id: `${result.jobId}-${index}`,
+    jobId: result.jobId,
+    outputIndex: index,
+    type: result.type,
+    url: output.url,
+    prompt: result.prompt,
+    providerModel: result.providerModel,
+    createdAt: result.createdAt,
+    contentType: output.contentType,
+    fileName: output.fileName,
+    aspectRatio: result.settings.aspectRatio,
+  }));
+}
+
+export function useStudioGeneration() {
+  const imageGeneration = useGenerateImage();
+  const videoGeneration = useGenerateVideo();
+  const studioState = useStudioStore();
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const [canvasMode, setCanvasMode] = useState<StudioMode | null>(null);
+
+  const canvasGeneration =
+    canvasMode === "image"
+      ? imageGeneration
+      : canvasMode === "video"
+        ? videoGeneration
+        : null;
+
+  const state = useMemo<StudioGenerationState>(() => {
+    const data = canvasGeneration?.data ?? null;
+    const error = validationError ?? canvasGeneration?.error ?? null;
+    const result = toGenerationResult(data);
+    const isSubmitting = canvasGeneration?.isSubmitting ?? false;
+    const isProcessing = canvasGeneration?.isProcessing ?? false;
+
+    return {
+      status: error
+        ? "error"
+        : result
+          ? "success"
+          : isSubmitting
+            ? "submitting"
+            : isProcessing
+              ? "processing"
+              : "idle",
+      isSubmitting,
+      isProcessing,
+      isGenerating: isSubmitting || isProcessing,
+      result,
+      error,
+    };
+  }, [canvasGeneration, validationError]);
+
+  useEffect(() => {
+    if (!state.result) {
+      return;
+    }
+
+    const hasJobAssets = studioState.canvasAssets.some(
+      (asset) => asset.jobId === state.result?.jobId
+    );
+
+    if (!hasJobAssets) {
+      studioState.appendCanvasAssets(resultToCanvasAssets(state.result));
+    }
+  }, [state.result, studioState]);
+
+  const generate = useCallback(async () => {
+    try {
+      const prompt = studioState.prompt.trim();
+
+      if (!prompt || state.isGenerating) {
+        return;
+      }
+
+      setValidationError(null);
+
+      if (studioState.mode === "image") {
+        const attachments = studioState.attachments.map(
+          (attachment) => attachment.file
+        );
+
+        setCanvasMode("image");
+        studioState.setPrompt("");
+        studioState.clearAttachments();
+        await imageGeneration.mutateAsync({
+          prompt,
+          aspectRatio: studioState.imageAspectRatio,
+          count: studioState.imageCount,
+          resolution: studioState.imageResolution,
+          attachments,
+        });
+        return;
+      }
+
+      if (!studioState.firstFrame) {
+        setValidationError("Upload a first frame before generating video.");
+        return;
+      }
+
+      const firstFrame = studioState.firstFrame;
+      const lastFrame = studioState.lastFrame;
+
+      setCanvasMode("video");
+      studioState.setPrompt("");
+      studioState.setFirstFrame(null);
+      studioState.setLastFrame(null);
+      await videoGeneration.mutateAsync({
+        prompt,
+        aspectRatio: studioState.videoAspectRatio,
+        duration: studioState.videoDuration,
+        audio: studioState.videoAudio,
+        firstFrame,
+        lastFrame,
+      });
+    } catch {
+      return;
+    }
+  }, [imageGeneration, state.isGenerating, studioState, videoGeneration]);
+
+  return {
+    generate,
+    state,
+  };
+}
diff --git a/lib/fal/studio.ts b/lib/fal/studio.ts
new file mode 100644
index 0000000..f232e4e
--- /dev/null
+++ b/lib/fal/studio.ts
@@ -0,0 +1,322 @@
+import { fal } from "@fal-ai/client";
+import type { QueueStatus } from "@fal-ai/client";
+import type {
+  GeneratedMediaOutput,
+  GenerationJobResponse,
+  ImageAspectRatio,
+  ImageGenerationSettings,
+  ImageResolution,
+  ProviderJobStatus,
+  VideoAspectRatio,
+  VideoGenerationSettings,
+} from "@/types/studio";
+
+const FAL_IMAGE_ENDPOINT = "fal-ai/nano-banana-2";
+const FAL_IMAGE_EDIT_ENDPOINT = "fal-ai/nano-banana-2/edit";
+const FAL_VIDEO_ENDPOINT = "fal-ai/kling-video/v3/pro/image-to-video";
+const FAL_VIDEO_QUEUE_ENDPOINT = "fal-ai/kling-video/v3/pro";
+
+type FalFileOutput = {
+  url?: string;
+  content_type?: string;
+  file_name?: string;
+};
+
+type ImageGenerationInput = {
+  prompt: string;
+  aspectRatio: ImageAspectRatio;
+  count: number;
+  resolution: ImageResolution;
+  attachments: File[];
+};
+
+type VideoGenerationInput = {
+  prompt: string;
+  aspectRatio: VideoAspectRatio;
+  duration: number;
+  audio: boolean;
+  firstFrame: File;
+  lastFrame: File | null;
+};
+
+function ensureFalConfigured() {
+  const falKey = process.env.FAL_KEY;
+
+  if (!falKey) {
+    throw new Error("Missing FAL_KEY environment variable.");
+  }
+
+  fal.config({
+    credentials: falKey,
+  });
+}
+
+function mapProviderStatus(status: QueueStatus["status"]): ProviderJobStatus {
+  if (status === "IN_QUEUE") {
+    return "queued";
+  }
+
+  if (status === "IN_PROGRESS") {
+    return "processing";
+  }
+
+  return "completed";
+}
+
+function normalizeOutputs(files: FalFileOutput[] | undefined): GeneratedMediaOutput[] {
+  if (!Array.isArray(files)) {
+    return [];
+  }
+
+  return files
+    .filter((file): file is FalFileOutput & { url: string } => Boolean(file?.url))
+    .map((file) => ({
+      url: file.url,
+      contentType: file.content_type,
+      fileName: file.file_name,
+    }));
+}
+
+function toQueueEndpointId(endpointId: string) {
+  if (endpointId === FAL_IMAGE_EDIT_ENDPOINT) {
+    return FAL_IMAGE_ENDPOINT;
+  }
+
+  if (endpointId === FAL_VIDEO_ENDPOINT) {
+    return FAL_VIDEO_QUEUE_ENDPOINT;
+  }
+
+  return endpointId;
+}
+
+function normalizeImageResponse(
+  requestId: string,
+  prompt: string,
+  settings: ImageGenerationSettings,
+  data: unknown
+): GenerationJobResponse {
+  const images = normalizeOutputs((data as { images?: FalFileOutput[] })?.images);
+
+  return {
+    jobId: requestId,
+    status: "completed",
+    type: "image",
+    outputs: images,
+    prompt,
+    providerModel: settings.isEdit ? FAL_IMAGE_EDIT_ENDPOINT : FAL_IMAGE_ENDPOINT,
+    requestSettings: settings,
+    createdAt: new Date().toISOString(),
+  };
+}
+
+function normalizeVideoResponse(
+  requestId: string,
+  prompt: string,
+  settings: VideoGenerationSettings,
+  data: unknown
+): GenerationJobResponse {
+  const outputs = normalizeOutputs(
+    (data as { video?: FalFileOutput })?.video
+      ? [(data as { video: FalFileOutput }).video]
+      : undefined
+  );
+
+  return {
+    jobId: requestId,
+    status: "completed",
+    type: "video",
+    outputs,
+    prompt,
+    providerModel: FAL_VIDEO_ENDPOINT,
+    requestSettings: settings,
+    createdAt: new Date().toISOString(),
+  };
+}
+
+function createImageSettings(input: ImageGenerationInput): ImageGenerationSettings {
+  return {
+    aspectRatio: input.aspectRatio,
+    model: "nano-banana-2",
+    count: input.count,
+    resolution: input.resolution,
+    isEdit: input.attachments.length > 0,
+    attachmentCount: input.attachments.length,
+  };
+}
+
+function createVideoSettings(
+  input: VideoGenerationInput,
+  firstFrameUrl: string,
+  lastFrameUrl?: string
+): VideoGenerationSettings {
+  return {
+    aspectRatio: input.aspectRatio,
+    duration: input.duration,
+    model: "kling-3",
+    audio: input.audio,
+    firstFrame: firstFrameUrl,
+    lastFrame: lastFrameUrl,
+  };
+}
+
+function resolutionToFalValue(resolution: ImageResolution) {
+  switch (resolution) {
+    case "1024":
+      return "1K";
+    case "2048":
+      return "2K";
+    case "4096":
+      return "4K";
+    default:
+      return "2K";
+  }
+}
+
+export async function submitImageGeneration(input: ImageGenerationInput) {
+  ensureFalConfigured();
+
+  const attachmentUrls = await Promise.all(
+    input.attachments.map((attachment) => fal.storage.upload(attachment))
+  );
+
+  const settings = createImageSettings(input);
+  const endpointId =
+    attachmentUrls.length > 0 ? FAL_IMAGE_EDIT_ENDPOINT : FAL_IMAGE_ENDPOINT;
+
+  const queue = await fal.queue.submit(endpointId, {
+    input: {
+      prompt: input.prompt,
+      aspect_ratio: input.aspectRatio,
+      num_images: input.count,
+      resolution: resolutionToFalValue(input.resolution),
+      ...(attachmentUrls.length > 0 ? { image_urls: attachmentUrls } : {}),
+    },
+  });
+
+  return {
+    requestId: queue.request_id,
+    endpointId,
+    response: {
+      jobId: queue.request_id,
+      status: "queued" as const,
+      type: "image" as const,
+      outputs: [],
+      prompt: input.prompt,
+      providerModel: endpointId,
+      requestSettings: settings,
+      createdAt: new Date().toISOString(),
+    },
+  };
+}
+
+export async function submitVideoGeneration(input: VideoGenerationInput) {
+  ensureFalConfigured();
+
+  const startImageUrl = await fal.storage.upload(input.firstFrame);
+  const endImageUrl = input.lastFrame
+    ? await fal.storage.upload(input.lastFrame)
+    : undefined;
+  const settings = createVideoSettings(input, startImageUrl, endImageUrl);
+
+  const queue = await fal.queue.submit(FAL_VIDEO_ENDPOINT, {
+    input: {
+      prompt: input.prompt,
+      start_image_url: startImageUrl,
+      duration: String(input.duration),
+      generate_audio: input.audio,
+      aspect_ratio: input.aspectRatio,
+      ...(endImageUrl ? { end_image_url: endImageUrl } : {}),
+    },
+  });
+
+  return {
+    requestId: queue.request_id,
+    endpointId: FAL_VIDEO_ENDPOINT,
+    response: {
+      jobId: queue.request_id,
+      status: "queued" as const,
+      type: "video" as const,
+      outputs: [],
+      prompt: input.prompt,
+      providerModel: FAL_VIDEO_ENDPOINT,
+      requestSettings: settings,
+      createdAt: new Date().toISOString(),
+    },
+  };
+}
+
+export async function getGenerationStatus(
+  endpointId: string,
+  requestId: string,
+  prompt: string,
+  type: "image" | "video",
+  settings: ImageGenerationSettings | VideoGenerationSettings
+): Promise<GenerationJobResponse> {
+  ensureFalConfigured();
+  const queueEndpointId = toQueueEndpointId(endpointId);
+
+  const status = await fal.queue.status(queueEndpointId, {
+    requestId,
+    logs: true,
+  });
+
+  if (status.status !== "COMPLETED") {
+    return {
+      jobId: requestId,
+      status: mapProviderStatus(status.status),
+      type,
+      outputs: [],
+      prompt,
+      providerModel: endpointId,
+      requestSettings: settings,
+      createdAt: new Date().toISOString(),
+    };
+  }
+
+  const result = await fal.queue.result(queueEndpointId, {
+    requestId,
+  });
+
+  if (type === "image") {
+    return normalizeImageResponse(
+      result.requestId,
+      prompt,
+      settings as ImageGenerationSettings,
+      result.data
+    );
+  }
+
+  return normalizeVideoResponse(
+    result.requestId,
+    prompt,
+    settings as VideoGenerationSettings,
+    result.data
+  );
+}
+
+export function createGenerationErrorResponse(
+  type: "image" | "video",
+  prompt: string,
+  providerModel: string,
+  requestSettings: ImageGenerationSettings | VideoGenerationSettings,
+  error: unknown,
+  requestId = crypto.randomUUID()
+): GenerationJobResponse {
+  return {
+    jobId: requestId,
+    status: "failed",
+    type,
+    outputs: [],
+    prompt,
+    providerModel,
+    requestSettings,
+    createdAt: new Date().toISOString(),
+    error: error instanceof Error ? error.message : "Generation failed.",
+  };
+}
+
+export const FAL_STUDIO_ENDPOINTS = {
+  image: FAL_IMAGE_ENDPOINT,
+  imageEdit: FAL_IMAGE_EDIT_ENDPOINT,
+  video: FAL_VIDEO_ENDPOINT,
+} as const;
diff --git a/lib/studio-drag.ts b/lib/studio-drag.ts
new file mode 100644
index 0000000..df98e48
--- /dev/null
+++ b/lib/studio-drag.ts
@@ -0,0 +1,76 @@
+"use client";
+
+const GENERATED_ASSET_MIME = "application/x-thinkingsoundlab-generated-asset";
+
+export interface DraggedStudioAsset {
+  url: string;
+  fileName?: string;
+  contentType?: string;
+}
+
+function inferFileName(url: string, providedName?: string, contentType?: string) {
+  if (providedName) {
+    return providedName;
+  }
+
+  const pathname = (() => {
+    try {
+      return new URL(url).pathname;
+    } catch {
+      return "";
+    }
+  })();
+  const lastSegment = pathname.split("/").filter(Boolean).pop();
+
+  if (lastSegment) {
+    return lastSegment;
+  }
+
+  const extension = contentType?.split("/")[1]?.split(";")[0] ?? "png";
+  return `generated-image.${extension}`;
+}
+
+export function setDraggedStudioAsset(
+  dataTransfer: DataTransfer,
+  asset: DraggedStudioAsset
+) {
+  const payload = JSON.stringify(asset);
+  dataTransfer.effectAllowed = "copy";
+  dataTransfer.setData(GENERATED_ASSET_MIME, payload);
+  dataTransfer.setData("text/plain", asset.url);
+  dataTransfer.setData("text/uri-list", asset.url);
+}
+
+export function hasDraggedStudioAsset(dataTransfer: DataTransfer) {
+  return Array.from(dataTransfer.types).includes(GENERATED_ASSET_MIME);
+}
+
+export function readDraggedStudioAsset(
+  dataTransfer: DataTransfer
+): DraggedStudioAsset | null {
+  const payload = dataTransfer.getData(GENERATED_ASSET_MIME);
+
+  if (!payload) {
+    return null;
+  }
+
+  try {
+    return JSON.parse(payload) as DraggedStudioAsset;
+  } catch {
+    return null;
+  }
+}
+
+export async function draggedStudioAssetToFile(asset: DraggedStudioAsset) {
+  const response = await fetch(asset.url);
+
+  if (!response.ok) {
+    throw new Error("Failed to fetch generated image.");
+  }
+
+  const blob = await response.blob();
+  const type = blob.type || asset.contentType || "image/png";
+  const fileName = inferFileName(asset.url, asset.fileName, type);
+
+  return new File([blob], fileName, { type });
+}
diff --git a/package-lock.json b/package-lock.json
index 3cf94e6..c1ca6ae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "thinkingsoundlabwebsite",
       "version": "0.1.0",
       "dependencies": {
+        "@fal-ai/client": "^1.9.5",
         "@hugeicons/core-free-icons": "^4.1.1",
         "@hugeicons/react": "^1.1.6",
         "@radix-ui/react-slot": "^1.2.3",
@@ -222,6 +223,20 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@fal-ai/client": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/@fal-ai/client/-/client-1.9.5.tgz",
+      "integrity": "sha512-knCMOqXapzL5Lsp4Xh/B/VfvbseKgHg2Kt//MjcxN5weF59/26En3zXTPd8pljl4QAr7b62X5EuNCT69MpyjSA==",
+      "license": "MIT",
+      "dependencies": {
+        "@msgpack/msgpack": "^3.0.0-beta2",
+        "eventsource-parser": "^1.1.2",
+        "robot3": "^0.4.1"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/@floating-ui/core": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
@@ -785,6 +800,15 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@msgpack/msgpack": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@msgpack/msgpack/-/msgpack-3.1.3.tgz",
+      "integrity": "sha512-47XIizs9XZXvuJgoaJUIE2lFoID8ugvc0jzSHP+Ptfk8nTbnR8g788wv48N03Kx0UkAv559HWRQ3yzOgzlRNUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "0.2.12",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
@@ -5374,6 +5398,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventsource-parser": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-1.1.2.tgz",
+      "integrity": "sha512-v0eOBUbiaFojBu2s2NPBfYUoRR9GjcDNvCXVaqEf5vVfpIAh9f8RCo4vXTP8c63QRKCFwoLpMpTdPwwhEKVgzA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -8416,6 +8449,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/robot3": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/robot3/-/robot3-0.4.1.tgz",
+      "integrity": "sha512-hzjy826lrxzx8eRgv80idkf8ua1JAepRc9Efdtj03N3KNJuznQCPlyCJ7gnUmDFwZCLQjxy567mQVKmdv2BsXQ==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
diff --git a/package.json b/package.json
index 07ebab5..6dc275f 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@fal-ai/client": "^1.9.5",
     "@hugeicons/core-free-icons": "^4.1.1",
     "@hugeicons/react": "^1.1.6",
     "@radix-ui/react-slot": "^1.2.3",
diff --git a/store/useStudioStore.ts b/store/useStudioStore.ts
index 774b13f..76d96b6 100644
--- a/store/useStudioStore.ts
+++ b/store/useStudioStore.ts
@@ -1,158 +1,179 @@
 import { create } from "zustand";
 import type {
+  ImageAspectRatio,
+  ImageAIModel,
+  ImageResolution,
+  StudioCanvasAsset,
+  StudioGalleryViewerState,
   StudioMode,
-  AspectRatio,
-  AIModel,
-  GenerationResult,
+  VideoAspectRatio,
+  VideoAIModel,
 } from "@/types/studio";
 
 interface StudioState {
-  // Mode
   mode: StudioMode;
   setMode: (mode: StudioMode) => void;
 
-  // Prompt
   prompt: string;
   setPrompt: (prompt: string) => void;
 
-  // Attachments (shared across modes)
   attachments: { file: File; preview: string }[];
   addAttachment: (file: File) => void;
   removeAttachment: (index: number) => void;
+  clearAttachments: () => void;
 
-  // Image settings
-  imageAspectRatio: AspectRatio;
-  aiModel: AIModel;
+  imageAspectRatio: ImageAspectRatio;
+  imageModel: ImageAIModel;
   imageCount: number;
-  imageResolution: string;
-  setImageAspectRatio: (v: AspectRatio) => void;
-  setAIModel: (v: AIModel) => void;
-  setImageCount: (v: number) => void;
-  setImageResolution: (v: string) => void;
-
-  // Video settings
-  videoAspectRatio: AspectRatio;
+  imageResolution: ImageResolution;
+  setImageAspectRatio: (value: ImageAspectRatio) => void;
+  setImageModel: (value: ImageAIModel) => void;
+  setImageCount: (value: number) => void;
+  setImageResolution: (value: ImageResolution) => void;
+
+  videoAspectRatio: VideoAspectRatio;
   videoDuration: number;
+  videoModel: VideoAIModel;
   firstFrame: File | null;
   firstFramePreview: string | null;
   lastFrame: File | null;
   lastFramePreview: string | null;
   videoAudio: boolean;
-  setVideoAspectRatio: (v: AspectRatio) => void;
-  setVideoDuration: (v: number) => void;
+  setVideoAspectRatio: (value: VideoAspectRatio) => void;
+  setVideoDuration: (value: number) => void;
+  setVideoModel: (value: VideoAIModel) => void;
   setFirstFrame: (file: File | null) => void;
   setLastFrame: (file: File | null) => void;
-  setVideoAudio: (v: boolean) => void;
+  setVideoAudio: (value: boolean) => void;
+
+  canvasAssets: StudioCanvasAsset[];
+  appendCanvasAssets: (assets: StudioCanvasAsset[]) => void;
 
-  // Generation
-  isGenerating: boolean;
-  generationResult: GenerationResult | null;
-  generate: () => void;
-  clearResult: () => void;
+  selectedAssetId: StudioGalleryViewerState["selectedAssetId"];
+  openViewer: (assetId: string) => void;
+  closeViewer: () => void;
+  goToNext: () => void;
+  goToPrevious: () => void;
 }
 
-const PLACEHOLDER_IMAGES = [
-  "https://picsum.photos/seed/studio1/1024/1024",
-  "https://picsum.photos/seed/studio2/1024/1024",
-  "https://picsum.photos/seed/studio3/1024/1024",
-  "https://picsum.photos/seed/studio4/1024/1024",
-];
+function revokePreview(preview: string | null) {
+  if (preview) {
+    URL.revokeObjectURL(preview);
+  }
+}
 
 export const useStudioStore = create<StudioState>((set, get) => ({
-  // Mode
   mode: "image",
   setMode: (mode) => set({ mode }),
 
-  // Prompt
   prompt: "",
   setPrompt: (prompt) => set({ prompt }),
 
-  // Attachments
   attachments: [],
   addAttachment: (file) => {
     const preview = URL.createObjectURL(file);
-    set((s) => ({ attachments: [...s.attachments, { file, preview }] }));
+    set((state) => ({
+      attachments: [...state.attachments, { file, preview }],
+    }));
   },
   removeAttachment: (index) => {
     const attachments = get().attachments;
     const removed = attachments[index];
-    if (removed) URL.revokeObjectURL(removed.preview);
-    set({ attachments: attachments.filter((_, i) => i !== index) });
+
+    revokePreview(removed?.preview ?? null);
+
+    set({
+      attachments: attachments.filter((_, currentIndex) => currentIndex !== index),
+    });
+  },
+  clearAttachments: () => {
+    const attachments = get().attachments;
+    attachments.forEach((attachment) => revokePreview(attachment.preview));
+    set({ attachments: [] });
   },
 
-  // Image settings
   imageAspectRatio: "1:1",
-  aiModel: "invook-v2",
+  imageModel: "nano-banana-2",
   imageCount: 1,
   imageResolution: "2048",
-  setImageAspectRatio: (v) => set({ imageAspectRatio: v }),
-  setAIModel: (v) => set({ aiModel: v }),
-  setImageCount: (v) => set({ imageCount: v }),
-  setImageResolution: (v) => set({ imageResolution: v }),
+  setImageAspectRatio: (value) => set({ imageAspectRatio: value }),
+  setImageModel: (value) => set({ imageModel: value }),
+  setImageCount: (value) => set({ imageCount: value }),
+  setImageResolution: (value) => set({ imageResolution: value }),
 
-  // Video settings
   videoAspectRatio: "16:9",
   videoDuration: 5,
+  videoModel: "kling-3",
   firstFrame: null,
   firstFramePreview: null,
   lastFrame: null,
   lastFramePreview: null,
   videoAudio: true,
-  setVideoAspectRatio: (v) => set({ videoAspectRatio: v }),
-  setVideoDuration: (v) => set({ videoDuration: v }),
-  setVideoAudio: (v) => set({ videoAudio: v }),
+  setVideoAspectRatio: (value) => set({ videoAspectRatio: value }),
+  setVideoDuration: (value) => set({ videoDuration: value }),
+  setVideoModel: (value) => set({ videoModel: value }),
+  setVideoAudio: (value) => set({ videoAudio: value }),
   setFirstFrame: (file) => {
-    const prev = get().firstFramePreview;
-    if (prev) URL.revokeObjectURL(prev);
+    revokePreview(get().firstFramePreview);
     set({
       firstFrame: file,
       firstFramePreview: file ? URL.createObjectURL(file) : null,
     });
   },
   setLastFrame: (file) => {
-    const prev = get().lastFramePreview;
-    if (prev) URL.revokeObjectURL(prev);
+    revokePreview(get().lastFramePreview);
     set({
       lastFrame: file,
       lastFramePreview: file ? URL.createObjectURL(file) : null,
     });
   },
 
-  // Generation
-  isGenerating: false,
-  generationResult: null,
-  generate: () => {
-    const state = get();
-    if (!state.prompt.trim() || state.isGenerating) return;
-
-    set({ isGenerating: true, generationResult: null });
-
-    const count = state.mode === "image" ? state.imageCount : 1;
-    const urls = PLACEHOLDER_IMAGES.slice(0, count);
-
-    setTimeout(() => {
-      const result: GenerationResult = {
-        id: crypto.randomUUID(),
-        type: state.mode,
-        urls,
-        prompt: state.prompt,
-        settings:
-          state.mode === "image"
-            ? {
-                aspectRatio: state.imageAspectRatio,
-                model: state.aiModel,
-                count: state.imageCount,
-              }
-            : {
-                aspectRatio: state.videoAspectRatio,
-                duration: state.videoDuration,
-                firstFrame: state.firstFramePreview ?? undefined,
-                lastFrame: state.lastFramePreview ?? undefined,
-              },
-        createdAt: new Date().toISOString(),
+  canvasAssets: [],
+  appendCanvasAssets: (assets) =>
+    set((state) => ({
+      canvasAssets: [...state.canvasAssets, ...assets],
+    })),
+
+  selectedAssetId: null,
+  openViewer: (assetId) => set({ selectedAssetId: assetId }),
+  closeViewer: () => set({ selectedAssetId: null }),
+  goToNext: () =>
+    set((state) => {
+      if (!state.selectedAssetId) {
+        return state;
+      }
+
+      const currentIndex = state.canvasAssets.findIndex(
+        (asset) => asset.id === state.selectedAssetId
+      );
+
+      if (
+        currentIndex < 0 ||
+        currentIndex >= state.canvasAssets.length - 1
+      ) {
+        return state;
+      }
+
+      return {
+        selectedAssetId: state.canvasAssets[currentIndex + 1].id,
       };
-      set({ isGenerating: false, generationResult: result });
-    }, 3000);
-  },
-  clearResult: () => set({ generationResult: null }),
+    }),
+  goToPrevious: () =>
+    set((state) => {
+      if (!state.selectedAssetId) {
+        return state;
+      }
+
+      const currentIndex = state.canvasAssets.findIndex(
+        (asset) => asset.id === state.selectedAssetId
+      );
+
+      if (currentIndex <= 0) {
+        return state;
+      }
+
+      return {
+        selectedAssetId: state.canvasAssets[currentIndex - 1].id,
+      };
+    }),
 }));
diff --git a/types/studio.ts b/types/studio.ts
index b73efc5..c80856e 100644
--- a/types/studio.ts
+++ b/types/studio.ts
@@ -1,33 +1,107 @@
 export type StudioMode = "image" | "video";
 
-export type AspectRatio = "1:1" | "16:9" | "9:16" | "4:3" | "3:4";
+export type ImageAspectRatio =
+  | "auto"
+  | "1:1"
+  | "16:9"
+  | "9:16"
+  | "4:3"
+  | "3:4";
 
-export type AIModel =
-  | "invook-v1"
-  | "invook-v2"
-  | "flux-pro"
-  | "stable-diffusion"
-  | "dall-e"
-  | "midjourney";
+export type VideoAspectRatio = "1:1" | "16:9" | "9:16";
+
+export type AspectRatio = ImageAspectRatio | VideoAspectRatio;
+
+export type ImageAIModel = "nano-banana-2";
+export type VideoAIModel = "kling-3";
+export type AIModel = ImageAIModel | VideoAIModel;
+
+export type ImageResolution = "1024" | "2048" | "4096";
+
+export type GenerationStatus =
+  | "idle"
+  | "submitting"
+  | "processing"
+  | "success"
+  | "error";
+
+export type ProviderJobStatus = "queued" | "processing" | "completed" | "failed";
+
+export interface GeneratedMediaOutput {
+  url: string;
+  contentType?: string;
+  fileName?: string;
+}
 
 export interface ImageGenerationSettings {
-  aspectRatio: AspectRatio;
-  model: AIModel;
+  aspectRatio: ImageAspectRatio;
+  model: ImageAIModel;
   count: number;
+  resolution: ImageResolution;
+  isEdit: boolean;
+  attachmentCount: number;
 }
 
 export interface VideoGenerationSettings {
-  aspectRatio: AspectRatio;
+  aspectRatio: VideoAspectRatio;
   duration: number;
+  model: VideoAIModel;
+  audio: boolean;
   firstFrame?: string;
   lastFrame?: string;
 }
 
+export type GenerationSettings =
+  | ImageGenerationSettings
+  | VideoGenerationSettings;
+
 export interface GenerationResult {
-  id: string;
+  jobId: string;
+  status: "success";
   type: StudioMode;
   urls: string[];
+  outputs: GeneratedMediaOutput[];
+  prompt: string;
+  providerModel: string;
+  settings: GenerationSettings;
+  createdAt: string;
+}
+
+export interface StudioCanvasAsset {
+  id: string;
+  jobId: string;
+  outputIndex: number;
+  type: StudioMode;
+  url: string;
+  prompt: string;
+  providerModel: string;
+  createdAt: string;
+  contentType?: string;
+  fileName?: string;
+  aspectRatio?: AspectRatio;
+}
+
+export interface StudioGalleryViewerState {
+  selectedAssetId: string | null;
+}
+
+export interface GenerationJobResponse {
+  jobId: string;
+  status: ProviderJobStatus;
+  type: StudioMode;
+  outputs: GeneratedMediaOutput[];
   prompt: string;
-  settings: ImageGenerationSettings | VideoGenerationSettings;
+  providerModel: string;
+  requestSettings: GenerationSettings;
   createdAt: string;
+  error?: string;
+}
+
+export interface StudioGenerationState {
+  status: GenerationStatus;
+  isSubmitting: boolean;
+  isProcessing: boolean;
+  isGenerating: boolean;
+  result: GenerationResult | null;
+  error: string | null;
 }

From 0e94f872dea8bc3d06ece6e5bc53fbf62bf162ca Mon Sep 17 00:00:00 2001
From: Abhishekucs <abhishekucskumar@gmail.com>
Date: Fri, 3 Apr 2026 16:27:58 +0530
Subject: [PATCH 8/8] style: fine-tune prompt input spacing and plus button
 size

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 components/studio/prompt-input.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/studio/prompt-input.tsx b/components/studio/prompt-input.tsx
index 3f96e5f..6154b6d 100644
--- a/components/studio/prompt-input.tsx
+++ b/components/studio/prompt-input.tsx
@@ -122,13 +122,13 @@ export function PromptInput({
         void addDroppedFiles(event);
       }}
     >
-      <div className="flex shrink-0 items-center gap-2 px-2.5 pt-2.5 pb-2 md:px-4 md:pt-4">
+      <div className="flex shrink-0 items-center gap-2 px-2.5 pt-2.5 pb-2.5 md:px-3 md:pt-3 md:pb-2">
         <button
           onClick={() => fileInputRef.current?.click()}
-          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-foreground/10 text-foreground/50 transition-colors hover:text-foreground/70 cursor-pointer md:h-10 md:w-10"
+          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-foreground/10 text-foreground/50 transition-colors hover:text-foreground/70 cursor-pointer md:h-8 md:w-8"
           title="Add assets"
         >
-          <Plus className="h-3 w-3 md:h-4 md:w-4" strokeWidth={1.9} />
+          <Plus className="h-3 w-3 md:h-3.5 md:w-3.5" strokeWidth={1.9} />
         </button>
 
         {attachments.length > 0 ? (
@@ -173,7 +173,7 @@ export function PromptInput({
         }}
       />
 
-      <div className="overflow-hidden px-3 pt-1 pb-2 md:px-4 md:pt-0 md:pb-3">
+      <div className="overflow-hidden px-3 pt-1.5 pb-2.5 md:px-4 md:pt-1 md:pb-3.5">
         <textarea
           ref={textareaRef}
           value={prompt}
@@ -188,7 +188,7 @@ export function PromptInput({
         />
       </div>
 
-      <div className="flex shrink-0 flex-wrap items-center gap-1.5 px-3 pb-3 pt-1 md:gap-2 md:flex-nowrap md:overflow-x-auto md:no-scrollbar">
+      <div className="flex shrink-0 flex-wrap items-center gap-1.5 px-3 pb-3 pt-2 md:gap-2 md:flex-nowrap md:overflow-x-auto md:no-scrollbar md:pt-2.5">
         {children}
       </div>
     </div>