From bac70bbd23a2a2d6adb963a97eb3e6c879ea769a Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Wed, 2 Apr 2025 15:29:51 +0300
Subject: [PATCH 001/143] mark old files

---
 apps/web/app/{import => import-old}/page.client.tsx         | 6 +++---
 apps/web/app/{import => import-old}/page.tsx                | 0
 apps/web/app/{publish => publish-old}/demo/page.tsx         | 0
 apps/web/app/{publish => publish-old}/page.tsx              | 0
 apps/web/app/{publish => publish-old}/template/page.tsx     | 0
 .../{import => import-old}/components/import-form.tsx       | 0
 .../{import => import-old}/components/import-header.tsx     | 0
 .../{import => import-old}/components/url-input.tsx         | 0
 .../features/{publish => publish-old}/components/alerts.tsx | 0
 .../{publish => publish-old}/components/code-editor.tsx     | 0
 .../components/delete-demo-dialog.tsx                       | 0
 .../components/edit-code-file-card.tsx                      | 0
 .../components/first-stap-layout.tsx                        | 0
 .../components/forms/component-details-form.tsx             | 0
 .../components/forms/component-form.tsx                     | 0
 .../{publish => publish-old}/components/forms/demo-form.tsx | 0
 .../components/preview-with-tabs.tsx                        | 0
 .../{publish => publish-old}/components/preview.tsx         | 0
 .../{publish => publish-old}/components/publish-header.tsx  | 0
 .../{publish => publish-old}/components/success-dialog.tsx  | 0
 .../{publish => publish-old}/config/editor-themes.ts        | 0
 .../features/{publish => publish-old}/config/utils.ts       | 0
 .../hooks/use-code-inputs-auto-focus.ts                     | 0
 .../features/{publish => publish-old}/hooks/use-hooks.tsx   | 0
 .../features/{publish => publish-old}/hooks/use-is-admin.ts | 0
 .../hooks/use-is-check-slug-available.ts                    | 0
 .../{publish => publish-old}/hooks/use-name-slug-form.ts    | 0
 .../{publish => publish-old}/hooks/use-publish-as.ts        | 0
 .../{publish => publish-old}/hooks/use-r2-upload.ts         | 0
 .../{publish => publish-old}/hooks/use-template-draft.ts    | 0
 .../hooks/use-template-media-upload.ts                      | 0
 .../hooks/use-template-video-dropzone.ts                    | 0
 .../{publish => publish-old}/hooks/use-video-dropzone.ts    | 0
 .../features/{publish => publish-old}/publish-layout.tsx    | 0
 .../template/publish-template-form.tsx                      | 0
 .../features/{publish => publish-old}/template/schema.ts    | 0
 .../template/template-details-form.tsx                      | 0
 apps/web/lib/queries.ts                                     | 2 +-
 38 files changed, 4 insertions(+), 4 deletions(-)
 rename apps/web/app/{import => import-old}/page.client.tsx (98%)
 rename apps/web/app/{import => import-old}/page.tsx (100%)
 rename apps/web/app/{publish => publish-old}/demo/page.tsx (100%)
 rename apps/web/app/{publish => publish-old}/page.tsx (100%)
 rename apps/web/app/{publish => publish-old}/template/page.tsx (100%)
 rename apps/web/components/features/{import => import-old}/components/import-form.tsx (100%)
 rename apps/web/components/features/{import => import-old}/components/import-header.tsx (100%)
 rename apps/web/components/features/{import => import-old}/components/url-input.tsx (100%)
 rename apps/web/components/features/{publish => publish-old}/components/alerts.tsx (100%)
 rename apps/web/components/features/{publish => publish-old}/components/code-editor.tsx (100%)
 rename apps/web/components/features/{publish => publish-old}/components/delete-demo-dialog.tsx (100%)
 rename apps/web/components/features/{publish => publish-old}/components/edit-code-file-card.tsx (100%)
 rename apps/web/components/features/{publish => publish-old}/components/first-stap-layout.tsx (100%)
 rename apps/web/components/features/{publish => publish-old}/components/forms/component-details-form.tsx (100%)
 rename apps/web/components/features/{publish => publish-old}/components/forms/component-form.tsx (100%)
 rename apps/web/components/features/{publish => publish-old}/components/forms/demo-form.tsx (100%)
 rename apps/web/components/features/{publish => publish-old}/components/preview-with-tabs.tsx (100%)
 rename apps/web/components/features/{publish => publish-old}/components/preview.tsx (100%)
 rename apps/web/components/features/{publish => publish-old}/components/publish-header.tsx (100%)
 rename apps/web/components/features/{publish => publish-old}/components/success-dialog.tsx (100%)
 rename apps/web/components/features/{publish => publish-old}/config/editor-themes.ts (100%)
 rename apps/web/components/features/{publish => publish-old}/config/utils.ts (100%)
 rename apps/web/components/features/{publish => publish-old}/hooks/use-code-inputs-auto-focus.ts (100%)
 rename apps/web/components/features/{publish => publish-old}/hooks/use-hooks.tsx (100%)
 rename apps/web/components/features/{publish => publish-old}/hooks/use-is-admin.ts (100%)
 rename apps/web/components/features/{publish => publish-old}/hooks/use-is-check-slug-available.ts (100%)
 rename apps/web/components/features/{publish => publish-old}/hooks/use-name-slug-form.ts (100%)
 rename apps/web/components/features/{publish => publish-old}/hooks/use-publish-as.ts (100%)
 rename apps/web/components/features/{publish => publish-old}/hooks/use-r2-upload.ts (100%)
 rename apps/web/components/features/{publish => publish-old}/hooks/use-template-draft.ts (100%)
 rename apps/web/components/features/{publish => publish-old}/hooks/use-template-media-upload.ts (100%)
 rename apps/web/components/features/{publish => publish-old}/hooks/use-template-video-dropzone.ts (100%)
 rename apps/web/components/features/{publish => publish-old}/hooks/use-video-dropzone.ts (100%)
 rename apps/web/components/features/{publish => publish-old}/publish-layout.tsx (100%)
 rename apps/web/components/features/{publish => publish-old}/template/publish-template-form.tsx (100%)
 rename apps/web/components/features/{publish => publish-old}/template/schema.ts (100%)
 rename apps/web/components/features/{publish => publish-old}/template/template-details-form.tsx (100%)

diff --git a/apps/web/app/import/page.client.tsx b/apps/web/app/import-old/page.client.tsx
similarity index 98%
rename from apps/web/app/import/page.client.tsx
rename to apps/web/app/import-old/page.client.tsx
index a8dd70b5..89a7cd8d 100644
--- a/apps/web/app/import/page.client.tsx
+++ b/apps/web/app/import-old/page.client.tsx
@@ -11,9 +11,9 @@ import {
   extractAmbigiousRegistryDependencies,
   extractNPMDependencies,
 } from "@/lib/parsers"
-import { UrlInput } from "@/components/features/import/components/url-input"
-import { ImportForm } from "@/components/features/import/components/import-form"
-import { ImportHeader } from "@/components/features/import/components/import-header"
+import { UrlInput } from "@/components/features/import-old/components/url-input"
+import { ImportForm } from "@/components/features/import-old/components/import-form"
+import { ImportHeader } from "@/components/features/import-old/components/import-header"
 import { SuccessDialog } from "@/components/features/publish/components/success-dialog"
 import { useRouter } from "next/navigation"
 import { useUser } from "@clerk/nextjs"
diff --git a/apps/web/app/import/page.tsx b/apps/web/app/import-old/page.tsx
similarity index 100%
rename from apps/web/app/import/page.tsx
rename to apps/web/app/import-old/page.tsx
diff --git a/apps/web/app/publish/demo/page.tsx b/apps/web/app/publish-old/demo/page.tsx
similarity index 100%
rename from apps/web/app/publish/demo/page.tsx
rename to apps/web/app/publish-old/demo/page.tsx
diff --git a/apps/web/app/publish/page.tsx b/apps/web/app/publish-old/page.tsx
similarity index 100%
rename from apps/web/app/publish/page.tsx
rename to apps/web/app/publish-old/page.tsx
diff --git a/apps/web/app/publish/template/page.tsx b/apps/web/app/publish-old/template/page.tsx
similarity index 100%
rename from apps/web/app/publish/template/page.tsx
rename to apps/web/app/publish-old/template/page.tsx
diff --git a/apps/web/components/features/import/components/import-form.tsx b/apps/web/components/features/import-old/components/import-form.tsx
similarity index 100%
rename from apps/web/components/features/import/components/import-form.tsx
rename to apps/web/components/features/import-old/components/import-form.tsx
diff --git a/apps/web/components/features/import/components/import-header.tsx b/apps/web/components/features/import-old/components/import-header.tsx
similarity index 100%
rename from apps/web/components/features/import/components/import-header.tsx
rename to apps/web/components/features/import-old/components/import-header.tsx
diff --git a/apps/web/components/features/import/components/url-input.tsx b/apps/web/components/features/import-old/components/url-input.tsx
similarity index 100%
rename from apps/web/components/features/import/components/url-input.tsx
rename to apps/web/components/features/import-old/components/url-input.tsx
diff --git a/apps/web/components/features/publish/components/alerts.tsx b/apps/web/components/features/publish-old/components/alerts.tsx
similarity index 100%
rename from apps/web/components/features/publish/components/alerts.tsx
rename to apps/web/components/features/publish-old/components/alerts.tsx
diff --git a/apps/web/components/features/publish/components/code-editor.tsx b/apps/web/components/features/publish-old/components/code-editor.tsx
similarity index 100%
rename from apps/web/components/features/publish/components/code-editor.tsx
rename to apps/web/components/features/publish-old/components/code-editor.tsx
diff --git a/apps/web/components/features/publish/components/delete-demo-dialog.tsx b/apps/web/components/features/publish-old/components/delete-demo-dialog.tsx
similarity index 100%
rename from apps/web/components/features/publish/components/delete-demo-dialog.tsx
rename to apps/web/components/features/publish-old/components/delete-demo-dialog.tsx
diff --git a/apps/web/components/features/publish/components/edit-code-file-card.tsx b/apps/web/components/features/publish-old/components/edit-code-file-card.tsx
similarity index 100%
rename from apps/web/components/features/publish/components/edit-code-file-card.tsx
rename to apps/web/components/features/publish-old/components/edit-code-file-card.tsx
diff --git a/apps/web/components/features/publish/components/first-stap-layout.tsx b/apps/web/components/features/publish-old/components/first-stap-layout.tsx
similarity index 100%
rename from apps/web/components/features/publish/components/first-stap-layout.tsx
rename to apps/web/components/features/publish-old/components/first-stap-layout.tsx
diff --git a/apps/web/components/features/publish/components/forms/component-details-form.tsx b/apps/web/components/features/publish-old/components/forms/component-details-form.tsx
similarity index 100%
rename from apps/web/components/features/publish/components/forms/component-details-form.tsx
rename to apps/web/components/features/publish-old/components/forms/component-details-form.tsx
diff --git a/apps/web/components/features/publish/components/forms/component-form.tsx b/apps/web/components/features/publish-old/components/forms/component-form.tsx
similarity index 100%
rename from apps/web/components/features/publish/components/forms/component-form.tsx
rename to apps/web/components/features/publish-old/components/forms/component-form.tsx
diff --git a/apps/web/components/features/publish/components/forms/demo-form.tsx b/apps/web/components/features/publish-old/components/forms/demo-form.tsx
similarity index 100%
rename from apps/web/components/features/publish/components/forms/demo-form.tsx
rename to apps/web/components/features/publish-old/components/forms/demo-form.tsx
diff --git a/apps/web/components/features/publish/components/preview-with-tabs.tsx b/apps/web/components/features/publish-old/components/preview-with-tabs.tsx
similarity index 100%
rename from apps/web/components/features/publish/components/preview-with-tabs.tsx
rename to apps/web/components/features/publish-old/components/preview-with-tabs.tsx
diff --git a/apps/web/components/features/publish/components/preview.tsx b/apps/web/components/features/publish-old/components/preview.tsx
similarity index 100%
rename from apps/web/components/features/publish/components/preview.tsx
rename to apps/web/components/features/publish-old/components/preview.tsx
diff --git a/apps/web/components/features/publish/components/publish-header.tsx b/apps/web/components/features/publish-old/components/publish-header.tsx
similarity index 100%
rename from apps/web/components/features/publish/components/publish-header.tsx
rename to apps/web/components/features/publish-old/components/publish-header.tsx
diff --git a/apps/web/components/features/publish/components/success-dialog.tsx b/apps/web/components/features/publish-old/components/success-dialog.tsx
similarity index 100%
rename from apps/web/components/features/publish/components/success-dialog.tsx
rename to apps/web/components/features/publish-old/components/success-dialog.tsx
diff --git a/apps/web/components/features/publish/config/editor-themes.ts b/apps/web/components/features/publish-old/config/editor-themes.ts
similarity index 100%
rename from apps/web/components/features/publish/config/editor-themes.ts
rename to apps/web/components/features/publish-old/config/editor-themes.ts
diff --git a/apps/web/components/features/publish/config/utils.ts b/apps/web/components/features/publish-old/config/utils.ts
similarity index 100%
rename from apps/web/components/features/publish/config/utils.ts
rename to apps/web/components/features/publish-old/config/utils.ts
diff --git a/apps/web/components/features/publish/hooks/use-code-inputs-auto-focus.ts b/apps/web/components/features/publish-old/hooks/use-code-inputs-auto-focus.ts
similarity index 100%
rename from apps/web/components/features/publish/hooks/use-code-inputs-auto-focus.ts
rename to apps/web/components/features/publish-old/hooks/use-code-inputs-auto-focus.ts
diff --git a/apps/web/components/features/publish/hooks/use-hooks.tsx b/apps/web/components/features/publish-old/hooks/use-hooks.tsx
similarity index 100%
rename from apps/web/components/features/publish/hooks/use-hooks.tsx
rename to apps/web/components/features/publish-old/hooks/use-hooks.tsx
diff --git a/apps/web/components/features/publish/hooks/use-is-admin.ts b/apps/web/components/features/publish-old/hooks/use-is-admin.ts
similarity index 100%
rename from apps/web/components/features/publish/hooks/use-is-admin.ts
rename to apps/web/components/features/publish-old/hooks/use-is-admin.ts
diff --git a/apps/web/components/features/publish/hooks/use-is-check-slug-available.ts b/apps/web/components/features/publish-old/hooks/use-is-check-slug-available.ts
similarity index 100%
rename from apps/web/components/features/publish/hooks/use-is-check-slug-available.ts
rename to apps/web/components/features/publish-old/hooks/use-is-check-slug-available.ts
diff --git a/apps/web/components/features/publish/hooks/use-name-slug-form.ts b/apps/web/components/features/publish-old/hooks/use-name-slug-form.ts
similarity index 100%
rename from apps/web/components/features/publish/hooks/use-name-slug-form.ts
rename to apps/web/components/features/publish-old/hooks/use-name-slug-form.ts
diff --git a/apps/web/components/features/publish/hooks/use-publish-as.ts b/apps/web/components/features/publish-old/hooks/use-publish-as.ts
similarity index 100%
rename from apps/web/components/features/publish/hooks/use-publish-as.ts
rename to apps/web/components/features/publish-old/hooks/use-publish-as.ts
diff --git a/apps/web/components/features/publish/hooks/use-r2-upload.ts b/apps/web/components/features/publish-old/hooks/use-r2-upload.ts
similarity index 100%
rename from apps/web/components/features/publish/hooks/use-r2-upload.ts
rename to apps/web/components/features/publish-old/hooks/use-r2-upload.ts
diff --git a/apps/web/components/features/publish/hooks/use-template-draft.ts b/apps/web/components/features/publish-old/hooks/use-template-draft.ts
similarity index 100%
rename from apps/web/components/features/publish/hooks/use-template-draft.ts
rename to apps/web/components/features/publish-old/hooks/use-template-draft.ts
diff --git a/apps/web/components/features/publish/hooks/use-template-media-upload.ts b/apps/web/components/features/publish-old/hooks/use-template-media-upload.ts
similarity index 100%
rename from apps/web/components/features/publish/hooks/use-template-media-upload.ts
rename to apps/web/components/features/publish-old/hooks/use-template-media-upload.ts
diff --git a/apps/web/components/features/publish/hooks/use-template-video-dropzone.ts b/apps/web/components/features/publish-old/hooks/use-template-video-dropzone.ts
similarity index 100%
rename from apps/web/components/features/publish/hooks/use-template-video-dropzone.ts
rename to apps/web/components/features/publish-old/hooks/use-template-video-dropzone.ts
diff --git a/apps/web/components/features/publish/hooks/use-video-dropzone.ts b/apps/web/components/features/publish-old/hooks/use-video-dropzone.ts
similarity index 100%
rename from apps/web/components/features/publish/hooks/use-video-dropzone.ts
rename to apps/web/components/features/publish-old/hooks/use-video-dropzone.ts
diff --git a/apps/web/components/features/publish/publish-layout.tsx b/apps/web/components/features/publish-old/publish-layout.tsx
similarity index 100%
rename from apps/web/components/features/publish/publish-layout.tsx
rename to apps/web/components/features/publish-old/publish-layout.tsx
diff --git a/apps/web/components/features/publish/template/publish-template-form.tsx b/apps/web/components/features/publish-old/template/publish-template-form.tsx
similarity index 100%
rename from apps/web/components/features/publish/template/publish-template-form.tsx
rename to apps/web/components/features/publish-old/template/publish-template-form.tsx
diff --git a/apps/web/components/features/publish/template/schema.ts b/apps/web/components/features/publish-old/template/schema.ts
similarity index 100%
rename from apps/web/components/features/publish/template/schema.ts
rename to apps/web/components/features/publish-old/template/schema.ts
diff --git a/apps/web/components/features/publish/template/template-details-form.tsx b/apps/web/components/features/publish-old/template/template-details-form.tsx
similarity index 100%
rename from apps/web/components/features/publish/template/template-details-form.tsx
rename to apps/web/components/features/publish-old/template/template-details-form.tsx
diff --git a/apps/web/lib/queries.ts b/apps/web/lib/queries.ts
index da4940cc..916d3cfa 100644
--- a/apps/web/lib/queries.ts
+++ b/apps/web/lib/queries.ts
@@ -5,7 +5,7 @@ import {
   useQueryClient,
   useQuery,
 } from "@tanstack/react-query"
-import { makeSlugFromName } from "@/components/features/publish/hooks/use-is-check-slug-available"
+import { makeSlugFromName } from "@/components/features/publish-old/hooks/use-is-check-slug-available"
 import { SupabaseClient, createClient } from "@supabase/supabase-js"
 import { useClerkSupabaseClient } from "@/lib/clerk"
 import { useUser } from "@clerk/nextjs"

From 197bdf62d75abd822419ad31d4d65ca9267082db Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Wed, 2 Apr 2025 16:26:46 +0300
Subject: [PATCH 002/143] init

---
 .../[component_slug]/page.client.tsx          |   2 +-
 .../web/app/studio/[username]/page.client.tsx | 205 +++++++
 apps/web/app/studio/[username]/page.tsx       | 110 ++++
 apps/web/app/studio/page.client.tsx           | 168 ++++++
 apps/web/app/studio/page.tsx                  |  46 ++
 .../features/studio/analytics/analytics.tsx   | 346 ++++++++++++
 .../features/studio/content/content-table.tsx | 283 ++++++++++
 .../studio/layout/component-publish-form.tsx  | 139 +++++
 .../studio/layout/dashboard-layout.tsx        |  57 ++
 .../features/studio/layout/header.tsx         | 103 ++++
 .../features/studio/layout/sidebar.tsx        | 165 ++++++
 .../studio/monetization/monetization.tsx      | 496 ++++++++++++++++
 .../features/studio/settings/settings.tsx     | 528 ++++++++++++++++++
 apps/web/components/icons/index.tsx           |  18 +-
 apps/web/components/ui/header.client.tsx      |  40 +-
 package.json                                  |   3 +-
 pnpm-lock.yaml                                | 220 ++++++++
 17 files changed, 2919 insertions(+), 10 deletions(-)
 create mode 100644 apps/web/app/studio/[username]/page.client.tsx
 create mode 100644 apps/web/app/studio/[username]/page.tsx
 create mode 100644 apps/web/app/studio/page.client.tsx
 create mode 100644 apps/web/app/studio/page.tsx
 create mode 100644 apps/web/components/features/studio/analytics/analytics.tsx
 create mode 100644 apps/web/components/features/studio/content/content-table.tsx
 create mode 100644 apps/web/components/features/studio/layout/component-publish-form.tsx
 create mode 100644 apps/web/components/features/studio/layout/dashboard-layout.tsx
 create mode 100644 apps/web/components/features/studio/layout/header.tsx
 create mode 100644 apps/web/components/features/studio/layout/sidebar.tsx
 create mode 100644 apps/web/components/features/studio/monetization/monetization.tsx
 create mode 100644 apps/web/components/features/studio/settings/settings.tsx

diff --git a/apps/web/app/[username]/[component_slug]/page.client.tsx b/apps/web/app/[username]/[component_slug]/page.client.tsx
index 7f0228af..1584f7ef 100644
--- a/apps/web/app/[username]/[component_slug]/page.client.tsx
+++ b/apps/web/app/[username]/[component_slug]/page.client.tsx
@@ -54,7 +54,7 @@ import { BookmarkButton } from "@/components/ui/bookmark-button"
 import { ThemeToggle } from "../../../components/ui/theme-toggle"
 import { ComponentPagePreview } from "../../../components/features/component-page/component-preview"
 import { EditComponentDialog } from "../../../components/ui/edit-component-dialog"
-import { usePublishAs } from "../../../components/features/publish/hooks/use-publish-as"
+import { usePublishAs } from "../../../components/features/publish-old/hooks/use-publish-as"
 import { Icons } from "@/components/icons"
 import { CopyPromptDialog } from "@/components/ui/copy-prompt-dialog"
 
diff --git a/apps/web/app/studio/[username]/page.client.tsx b/apps/web/app/studio/[username]/page.client.tsx
new file mode 100644
index 00000000..687ff006
--- /dev/null
+++ b/apps/web/app/studio/[username]/page.client.tsx
@@ -0,0 +1,205 @@
+"use client"
+
+import { useState } from "react"
+import { Header } from "@/components/ui/header.client"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { PlusCircle, ArrowLeft } from "lucide-react"
+import { formatDistanceToNow } from "date-fns"
+import { Textarea } from "@/components/ui/textarea"
+import { useClerkSupabaseClient } from "@/lib/clerk"
+import { toast } from "sonner"
+import { useRouter } from "next/navigation"
+import { Tables } from "@/types/supabase"
+import { UserAvatar } from "@/components/ui/user-avatar"
+import Link from "next/link"
+import { User } from "@/types/global"
+
+type Component = Tables<"components">
+
+interface StudioUsernameClientProps {
+  user: User
+  components: Component[]
+  isAdmin: boolean
+  isOwnProfile: boolean
+}
+
+export function StudioUsernameClient({
+  user,
+  components,
+  isAdmin,
+  isOwnProfile,
+}: StudioUsernameClientProps) {
+  const [isPublishOpen, setIsPublishOpen] = useState(false)
+  const [componentCode, setComponentCode] = useState("")
+  const [isPublishing, setIsPublishing] = useState(false)
+  const supabase = useClerkSupabaseClient()
+  const router = useRouter()
+
+  const handlePublish = async () => {
+    if (!componentCode.trim()) {
+      toast.error("Please enter component code")
+      return
+    }
+
+    setIsPublishing(true)
+    try {
+      // Here you would add the logic to parse and validate the component code
+      // Then save it to the database
+      const { error } = await supabase.from("components").insert({
+        code: componentCode,
+        name: "New Component", // Required field
+        component_names: {}, // Required field
+        component_slug: "new-component", // Required field
+        preview_url: "https://placeholder.com", // Required field
+        user_id: user.id, // Use the target user ID
+        direct_registry_dependencies: {}, // Required field
+        demo_direct_registry_dependencies: {}, // Required field
+      })
+
+      if (error) throw error
+
+      toast.success("Component published successfully")
+      setIsPublishOpen(false)
+      router.refresh()
+    } catch (error) {
+      toast.error("Failed to publish component")
+      console.error("Error publishing component:", error)
+    } finally {
+      setIsPublishing(false)
+    }
+  }
+
+  return (
+    <>
+      <Header />
+      <div className="container mx-auto px-4 py-8 mt-20">
+        <div className="flex items-center mb-8 gap-4">
+          <Link
+            href="/studio"
+            className="text-muted-foreground hover:text-foreground"
+          >
+            <ArrowLeft className="h-5 w-5" />
+          </Link>
+          <div className="flex items-center gap-4">
+            <UserAvatar
+              src={
+                user.display_image_url || user.image_url || "/placeholder.svg"
+              }
+              alt={user.display_name || user.name || ""}
+              size={48}
+              className="cursor-default"
+            />
+            <div>
+              <h1 className="text-3xl font-bold">
+                {user.display_name || user.name || user.username}'s Studio
+              </h1>
+              <p className="text-muted-foreground">
+                @{user.display_username || user.username}
+              </p>
+            </div>
+          </div>
+
+          {(isOwnProfile || isAdmin) && (
+            <Dialog open={isPublishOpen} onOpenChange={setIsPublishOpen}>
+              <DialogTrigger asChild>
+                <Button className="ml-auto">
+                  <PlusCircle className="mr-2 h-4 w-4" />
+                  Publish Component
+                </Button>
+              </DialogTrigger>
+              <DialogContent className="sm:max-w-[725px]">
+                <DialogHeader>
+                  <DialogTitle>Publish New Component</DialogTitle>
+                  <DialogDescription>
+                    Paste your component code below. Make sure it follows our
+                    guidelines and includes all necessary imports.
+                  </DialogDescription>
+                </DialogHeader>
+                <div className="grid gap-4 py-4">
+                  <Textarea
+                    placeholder="Paste your component code here..."
+                    value={componentCode}
+                    onChange={(e) => setComponentCode(e.target.value)}
+                    className="h-[400px] font-mono"
+                  />
+                  <Button
+                    onClick={handlePublish}
+                    disabled={isPublishing}
+                    className="w-full"
+                  >
+                    {isPublishing ? "Publishing..." : "Publish Component"}
+                  </Button>
+                </div>
+              </DialogContent>
+            </Dialog>
+          )}
+        </div>
+
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Name</TableHead>
+                <TableHead>Created</TableHead>
+                <TableHead className="text-right">Views</TableHead>
+                <TableHead className="text-right">Likes</TableHead>
+                <TableHead className="text-right">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {components.map((component) => (
+                <TableRow key={component.id}>
+                  <TableCell className="font-medium">
+                    {component.name}
+                  </TableCell>
+                  <TableCell>
+                    {formatDistanceToNow(new Date(component.created_at), {
+                      addSuffix: true,
+                    })}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    {component.downloads_count}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    {component.likes_count}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Button variant="ghost" size="sm">
+                      Edit
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+              {components.length === 0 && (
+                <TableRow>
+                  <TableCell
+                    colSpan={5}
+                    className="h-24 text-center text-muted-foreground"
+                  >
+                    No components published yet
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/apps/web/app/studio/[username]/page.tsx b/apps/web/app/studio/[username]/page.tsx
new file mode 100644
index 00000000..615b756a
--- /dev/null
+++ b/apps/web/app/studio/[username]/page.tsx
@@ -0,0 +1,110 @@
+import { redirect } from "next/navigation"
+import { Footer } from "@/components/ui/footer"
+import { supabaseWithAdminAccess } from "@/lib/supabase"
+import { auth } from "@clerk/nextjs/server"
+import { unstable_cache } from "next/cache"
+import { getUserData } from "@/lib/queries"
+import { StudioUsernameClient } from "./page.client"
+
+// Get user data by username
+const getCachedUser = unstable_cache(
+  async (username: string) => {
+    const { data: user } = await getUserData(supabaseWithAdminAccess, username)
+    return user
+  },
+  ["user-data"],
+  {
+    revalidate: 30,
+    tags: ["user-data"],
+  },
+)
+
+// Get components by user ID
+const getCachedUserComponents = unstable_cache(
+  async (userId: string) => {
+    const { data: components } = await supabaseWithAdminAccess
+      .from("components")
+      .select("*")
+      .eq("user_id", userId)
+      .order("created_at", { ascending: false })
+    return components || []
+  },
+  ["user-components"],
+  {
+    revalidate: 30,
+    tags: ["user-components"],
+  },
+)
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ username: string }>
+}) {
+  const resolvedParams = await params
+  const user = await getCachedUser(resolvedParams.username)
+
+  if (!user) {
+    return {
+      title: "User Not Found | Studio",
+    }
+  }
+
+  return {
+    title: `${user.display_name || user.name || user.username}'s Studio | 21st.dev`,
+    description: `Manage components by ${user.display_name || user.name || user.username} on 21st.dev`,
+  }
+}
+
+export default async function StudioUsernamePage({
+  params,
+}: {
+  params: Promise<{ username: string }>
+}) {
+  // Verify user is authenticated
+  const { userId } = await auth()
+  if (!userId) {
+    redirect("/sign-in")
+  }
+
+  // Get the resolved params
+  const resolvedParams = await params
+
+  // Get the target user from the URL
+  const user = await getCachedUser(resolvedParams.username)
+  if (!user) {
+    redirect("/studio")
+  }
+
+  // Verify logged in user has access to this user's components
+  // Admin can access any user's components, users can only access their own
+  const { data: currentUser } = await supabaseWithAdminAccess
+    .from("users")
+    .select("is_admin")
+    .eq("id", userId)
+    .single()
+
+  const isAdmin = currentUser?.is_admin || false
+  const isOwnProfile = userId === user.id
+
+  if (!isAdmin && !isOwnProfile) {
+    redirect("/studio")
+  }
+
+  // Get components for the specified user
+  const components = await getCachedUserComponents(user.id)
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <div className="flex-1">
+        <StudioUsernameClient
+          user={user}
+          components={components}
+          isAdmin={isAdmin}
+          isOwnProfile={isOwnProfile}
+        />
+      </div>
+      <Footer />
+    </div>
+  )
+}
diff --git a/apps/web/app/studio/page.client.tsx b/apps/web/app/studio/page.client.tsx
new file mode 100644
index 00000000..60d33132
--- /dev/null
+++ b/apps/web/app/studio/page.client.tsx
@@ -0,0 +1,168 @@
+"use client"
+
+import { useState } from "react"
+import { Header } from "@/components/ui/header.client"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { PlusCircle } from "lucide-react"
+import { formatDistanceToNow } from "date-fns"
+import { Textarea } from "@/components/ui/textarea"
+import { useClerkSupabaseClient } from "@/lib/clerk"
+import { toast } from "sonner"
+import { useRouter } from "next/navigation"
+import { Tables } from "@/types/supabase"
+
+type Component = Tables<"components">
+
+interface StudioClientProps {
+  initialComponents: Component[]
+}
+
+export function StudioClient({ initialComponents }: StudioClientProps) {
+  const [isPublishOpen, setIsPublishOpen] = useState(false)
+  const [componentCode, setComponentCode] = useState("")
+  const [isPublishing, setIsPublishing] = useState(false)
+  const supabase = useClerkSupabaseClient()
+  const router = useRouter()
+
+  const handlePublish = async () => {
+    if (!componentCode.trim()) {
+      toast.error("Please enter component code")
+      return
+    }
+
+    setIsPublishing(true)
+    try {
+      // Here you would add the logic to parse and validate the component code
+      // Then save it to the database
+      const { error } = await supabase.from("components").insert({
+        code: componentCode,
+        name: "New Component", // Required field
+        component_names: {}, // Required field
+        component_slug: "new-component", // Required field
+        preview_url: "https://placeholder.com", // Required field
+        user_id: "user_id", // Will be set by RLS
+        direct_registry_dependencies: {}, // Required field
+        demo_direct_registry_dependencies: {}, // Required field
+      })
+
+      if (error) throw error
+
+      toast.success("Component published successfully")
+      setIsPublishOpen(false)
+      router.refresh()
+    } catch (error) {
+      toast.error("Failed to publish component")
+      console.error("Error publishing component:", error)
+    } finally {
+      setIsPublishing(false)
+    }
+  }
+
+  return (
+    <>
+      <Header />
+      <div className="container mx-auto px-4 py-8 mt-20">
+        <div className="flex justify-between items-center mb-8">
+          <h1 className="text-3xl font-bold">Studio</h1>
+          <Dialog open={isPublishOpen} onOpenChange={setIsPublishOpen}>
+            <DialogTrigger asChild>
+              <Button>
+                <PlusCircle className="mr-2 h-4 w-4" />
+                Publish Component
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-[725px]">
+              <DialogHeader>
+                <DialogTitle>Publish New Component</DialogTitle>
+                <DialogDescription>
+                  Paste your component code below. Make sure it follows our
+                  guidelines and includes all necessary imports.
+                </DialogDescription>
+              </DialogHeader>
+              <div className="grid gap-4 py-4">
+                <Textarea
+                  placeholder="Paste your component code here..."
+                  value={componentCode}
+                  onChange={(e) => setComponentCode(e.target.value)}
+                  className="h-[400px] font-mono"
+                />
+                <Button
+                  onClick={handlePublish}
+                  disabled={isPublishing}
+                  className="w-full"
+                >
+                  {isPublishing ? "Publishing..." : "Publish Component"}
+                </Button>
+              </div>
+            </DialogContent>
+          </Dialog>
+        </div>
+
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Name</TableHead>
+                <TableHead>Created</TableHead>
+                <TableHead className="text-right">Views</TableHead>
+                <TableHead className="text-right">Likes</TableHead>
+                <TableHead className="text-right">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {initialComponents.map((component) => (
+                <TableRow key={component.id}>
+                  <TableCell className="font-medium">
+                    {component.name}
+                  </TableCell>
+                  <TableCell>
+                    {formatDistanceToNow(new Date(component.created_at), {
+                      addSuffix: true,
+                    })}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    {component.downloads_count}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    {component.likes_count}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Button variant="ghost" size="sm">
+                      Edit
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+              {initialComponents.length === 0 && (
+                <TableRow>
+                  <TableCell
+                    colSpan={5}
+                    className="h-24 text-center text-muted-foreground"
+                  >
+                    No components published yet
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/apps/web/app/studio/page.tsx b/apps/web/app/studio/page.tsx
new file mode 100644
index 00000000..2d8f2f27
--- /dev/null
+++ b/apps/web/app/studio/page.tsx
@@ -0,0 +1,46 @@
+import { StudioClient } from "./page.client"
+import { supabaseWithAdminAccess } from "@/lib/supabase"
+import { Footer } from "@/components/ui/footer"
+import { unstable_cache } from "next/cache"
+import { redirect } from "next/navigation"
+import { auth } from "@clerk/nextjs/server"
+
+const getCachedUserComponents = unstable_cache(
+  async (userId: string) => {
+    const { data: components } = await supabaseWithAdminAccess
+      .from("components")
+      .select("*")
+      .eq("user_id", userId)
+      .order("created_at", { ascending: false })
+    return components || []
+  },
+  ["user-components"],
+  {
+    revalidate: 30,
+    tags: ["user-components"],
+  },
+)
+
+export const metadata = {
+  title: "Studio | 21st.dev - The NPM for Design Engineers",
+  description: "Manage and publish your components on 21st.dev",
+}
+
+export default async function StudioPage() {
+  const { userId } = await auth()
+
+  if (!userId) {
+    redirect("/sign-in")
+  }
+
+  const components = await getCachedUserComponents(userId)
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <div className="flex-1">
+        <StudioClient initialComponents={components} />
+      </div>
+      <Footer />
+    </div>
+  )
+}
diff --git a/apps/web/components/features/studio/analytics/analytics.tsx b/apps/web/components/features/studio/analytics/analytics.tsx
new file mode 100644
index 00000000..42852ae9
--- /dev/null
+++ b/apps/web/components/features/studio/analytics/analytics.tsx
@@ -0,0 +1,346 @@
+"use client"
+
+import { User } from "@/types/global"
+import { Component } from "@/types/component"
+import {
+  LineChart,
+  BarChart,
+  Line,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Cell,
+} from "recharts"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Button } from "@/components/ui/button"
+import {
+  ChevronDown,
+  Download,
+  TrendingUp,
+  Eye,
+  Download as DownloadIcon,
+  Heart,
+  ArrowUpRight,
+  ArrowDownRight,
+} from "lucide-react"
+
+interface StudioAnalyticsProps {
+  user: User
+  components: Component[]
+}
+
+export function StudioAnalytics({
+  user,
+  components = [],
+}: StudioAnalyticsProps) {
+  // Mock data for now
+  const viewsData = [
+    { name: "Jan", views: 400 },
+    { name: "Feb", views: 300 },
+    { name: "Mar", views: 600 },
+    { name: "Apr", views: 800 },
+    { name: "May", views: 1000 },
+    { name: "Jun", views: 1200 },
+    { name: "Jul", views: 1400 },
+  ]
+
+  const downloadsData = [
+    { name: "Jan", downloads: 100 },
+    { name: "Feb", downloads: 200 },
+    { name: "Mar", downloads: 300 },
+    { name: "Apr", downloads: 400 },
+    { name: "May", downloads: 600 },
+    { name: "Jun", downloads: 800 },
+    { name: "Jul", downloads: 900 },
+  ]
+
+  const componentPopularity =
+    components.length > 0
+      ? components
+          .map((c) => ({
+            name: c.name,
+            views: c.views || Math.floor(Math.random() * 1000),
+            downloads: c.downloads || Math.floor(Math.random() * 500),
+          }))
+          .sort((a, b) => b.views - a.views)
+          .slice(0, 5)
+      : [
+          { name: "Modal Dialog", views: 1200, downloads: 450 },
+          { name: "DataTable", views: 950, downloads: 380 },
+          { name: "Notification", views: 820, downloads: 320 },
+          { name: "Card", views: 700, downloads: 280 },
+          { name: "Form", views: 650, downloads: 260 },
+        ]
+
+  const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884D8"]
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+        <div>
+          <h2 className="text-2xl font-bold tracking-tight">Analytics</h2>
+          <p className="text-muted-foreground">
+            Track the performance of your components
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Select defaultValue="30days">
+            <SelectTrigger className="w-[180px]">
+              <SelectValue placeholder="Select period" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="7days">Last 7 days</SelectItem>
+              <SelectItem value="30days">Last 30 days</SelectItem>
+              <SelectItem value="3months">Last 3 months</SelectItem>
+              <SelectItem value="year">Last year</SelectItem>
+            </SelectContent>
+          </Select>
+          <Button variant="outline" size="icon">
+            <Download className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Total Views</CardTitle>
+            <Eye className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">5,231</div>
+            <div className="flex items-center text-xs text-muted-foreground">
+              <TrendingUp className="mr-1 h-3 w-3 text-green-500" />
+              <span className="text-green-500 font-medium">+12.5%</span> from
+              last month
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              Total Downloads
+            </CardTitle>
+            <DownloadIcon className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">2,350</div>
+            <div className="flex items-center text-xs text-muted-foreground">
+              <TrendingUp className="mr-1 h-3 w-3 text-green-500" />
+              <span className="text-green-500 font-medium">+18.2%</span> from
+              last month
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Favorites</CardTitle>
+            <Heart className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">843</div>
+            <div className="flex items-center text-xs text-muted-foreground">
+              <ArrowUpRight className="mr-1 h-3 w-3 text-green-500" />
+              <span className="text-green-500 font-medium">+7.4%</span> from
+              last month
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              Conversion Rate
+            </CardTitle>
+            <ArrowDownRight className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">44.9%</div>
+            <div className="flex items-center text-xs text-muted-foreground">
+              <ArrowDownRight className="mr-1 h-3 w-3 text-red-500" />
+              <span className="text-red-500 font-medium">-2.3%</span> from last
+              month
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Tabs defaultValue="overview" className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="components">Components</TabsTrigger>
+          <TabsTrigger value="audience">Audience</TabsTrigger>
+        </TabsList>
+        <TabsContent value="overview" className="space-y-4">
+          <div className="grid gap-4 md:grid-cols-2">
+            <Card>
+              <CardHeader>
+                <CardTitle>Views Over Time</CardTitle>
+                <CardDescription>
+                  Component views in the past 6 months
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="pt-2">
+                <div className="h-[300px]">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <LineChart data={viewsData}>
+                      <CartesianGrid strokeDasharray="3 3" />
+                      <XAxis dataKey="name" />
+                      <YAxis />
+                      <Tooltip />
+                      <Legend />
+                      <Line
+                        type="monotone"
+                        dataKey="views"
+                        stroke="#3b82f6"
+                        activeDot={{ r: 8 }}
+                        strokeWidth={2}
+                      />
+                    </LineChart>
+                  </ResponsiveContainer>
+                </div>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle>Downloads Over Time</CardTitle>
+                <CardDescription>
+                  Component downloads in the past 6 months
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="pt-2">
+                <div className="h-[300px]">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <BarChart data={downloadsData}>
+                      <CartesianGrid strokeDasharray="3 3" />
+                      <XAxis dataKey="name" />
+                      <YAxis />
+                      <Tooltip />
+                      <Legend />
+                      <Bar dataKey="downloads" fill="#10b981" />
+                    </BarChart>
+                  </ResponsiveContainer>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
+            <Card className="md:col-span-5">
+              <CardHeader>
+                <CardTitle>Most Popular Components</CardTitle>
+                <CardDescription>
+                  Top 5 components by views and downloads
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="h-[300px]">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <BarChart
+                      data={componentPopularity}
+                      layout="vertical"
+                      margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+                    >
+                      <CartesianGrid strokeDasharray="3 3" />
+                      <XAxis type="number" />
+                      <YAxis type="category" dataKey="name" />
+                      <Tooltip />
+                      <Legend />
+                      <Bar dataKey="views" fill="#3b82f6" name="Views" />
+                      <Bar
+                        dataKey="downloads"
+                        fill="#10b981"
+                        name="Downloads"
+                      />
+                    </BarChart>
+                  </ResponsiveContainer>
+                </div>
+              </CardContent>
+            </Card>
+            <Card className="md:col-span-2">
+              <CardHeader>
+                <CardTitle>Distribution</CardTitle>
+                <CardDescription>Views by component type</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="h-[300px]">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <PieChart>
+                      <Pie
+                        data={componentPopularity}
+                        cx="50%"
+                        cy="50%"
+                        labelLine={false}
+                        outerRadius={80}
+                        fill="#8884d8"
+                        dataKey="views"
+                        nameKey="name"
+                        label={(entry) => entry.name}
+                      >
+                        {componentPopularity.map((entry, index) => (
+                          <Cell
+                            key={`cell-${index}`}
+                            fill={COLORS[index % COLORS.length]}
+                          />
+                        ))}
+                      </Pie>
+                      <Tooltip />
+                    </PieChart>
+                  </ResponsiveContainer>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+        <TabsContent value="components">
+          <Card>
+            <CardHeader>
+              <CardTitle>Component Performance</CardTitle>
+              <CardDescription>
+                Detailed stats for individual components
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-muted-foreground">
+                Select a component to view detailed analytics.
+              </p>
+            </CardContent>
+          </Card>
+        </TabsContent>
+        <TabsContent value="audience">
+          <Card>
+            <CardHeader>
+              <CardTitle>Audience Insights</CardTitle>
+              <CardDescription>
+                Learn about your component users
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-muted-foreground">
+                Detailed audience analytics will be available soon.
+              </p>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
diff --git a/apps/web/components/features/studio/content/content-table.tsx b/apps/web/components/features/studio/content/content-table.tsx
new file mode 100644
index 00000000..f9c7304d
--- /dev/null
+++ b/apps/web/components/features/studio/content/content-table.tsx
@@ -0,0 +1,283 @@
+"use client"
+
+import { useState } from "react"
+import { User } from "@/types/global"
+import { Component } from "@/types/component"
+import { cn } from "@/lib/utils"
+import { formatDistanceToNow } from "date-fns"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Input } from "@/components/ui/input"
+import {
+  MoreVertical,
+  Search,
+  Edit,
+  Eye,
+  Trash2,
+  ArrowUpDown,
+  BarChart2,
+  Code2,
+  Link as LinkIcon,
+} from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { ComponentPublishForm } from "./component-publish-form"
+import { Button } from "@/components/ui/button"
+import Link from "next/link"
+
+interface StudioContentTableProps {
+  user: User
+  components: Component[]
+}
+
+export function StudioContentTable({
+  user,
+  components = [],
+}: StudioContentTableProps) {
+  const [searchQuery, setSearchQuery] = useState("")
+  const [sortBy, setSortBy] = useState<"date" | "name" | "popularity">("date")
+  const [editComponent, setEditComponent] = useState<Component | null>(null)
+
+  // Filter components based on search
+  const filteredComponents = components.filter(
+    (component) =>
+      component.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      component.description.toLowerCase().includes(searchQuery.toLowerCase()),
+  )
+
+  // Sort components
+  const sortedComponents = [...filteredComponents].sort((a, b) => {
+    if (sortBy === "date") {
+      return new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+    } else if (sortBy === "name") {
+      return a.name.localeCompare(b.name)
+    } else {
+      // Sort by popularity (views or downloads)
+      return (b.views || 0) - (a.views || 0)
+    }
+  })
+
+  // Get status badge
+  const getStatusBadge = (status: string) => {
+    switch (status.toLowerCase()) {
+      case "published":
+        return (
+          <Badge className="bg-green-500/10 text-green-500 hover:bg-green-500/20">
+            Published
+          </Badge>
+        )
+      case "draft":
+        return <Badge variant="outline">Draft</Badge>
+      case "review":
+        return (
+          <Badge className="bg-yellow-500/10 text-yellow-500 hover:bg-yellow-500/20">
+            In Review
+          </Badge>
+        )
+      default:
+        return <Badge variant="outline">{status}</Badge>
+    }
+  }
+
+  const copyComponentUrl = (slug: string) => {
+    navigator.clipboard.writeText(`${window.location.origin}/component/${slug}`)
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col sm:flex-row gap-4 justify-between">
+        <div className="relative w-full sm:w-80">
+          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            type="search"
+            placeholder="Search components..."
+            className="pl-8"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <Select
+            value={sortBy}
+            onValueChange={(value) => setSortBy(value as any)}
+          >
+            <SelectTrigger className="w-40">
+              <SelectValue placeholder="Sort by" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="date">Recent</SelectItem>
+              <SelectItem value="name">Name</SelectItem>
+              <SelectItem value="popularity">Popularity</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {components.length === 0 ? (
+        <div className="rounded-md border border-dashed p-12 text-center">
+          <h3 className="text-lg font-medium mb-2">No components yet</h3>
+          <p className="text-muted-foreground mb-6">
+            You haven't published any components yet. Get started by creating
+            your first component.
+          </p>
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button>Publish Your First Component</Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-[725px]">
+              <DialogHeader>
+                <DialogTitle>Publish Component</DialogTitle>
+                <DialogDescription>
+                  Paste your component code below. Make sure it follows our
+                  guidelines and includes all necessary imports.
+                </DialogDescription>
+              </DialogHeader>
+              <ComponentPublishForm user={user} />
+            </DialogContent>
+          </Dialog>
+        </div>
+      ) : (
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-[250px]">
+                  <div className="flex items-center space-x-1">
+                    <span>Component</span>
+                    <ArrowUpDown className="h-3 w-3" />
+                  </div>
+                </TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Created</TableHead>
+                <TableHead className="text-right">Views</TableHead>
+                <TableHead className="text-right">Downloads</TableHead>
+                <TableHead className="w-[100px]"></TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {sortedComponents.map((component) => (
+                <TableRow key={component.id}>
+                  <TableCell>
+                    <div className="flex flex-col">
+                      <span className="font-medium">{component.name}</span>
+                      <span className="text-xs text-muted-foreground truncate max-w-[230px]">
+                        {component.description || "No description"}
+                      </span>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    {getStatusBadge(component.status || "published")}
+                  </TableCell>
+                  <TableCell>
+                    <span className="text-xs text-muted-foreground">
+                      {formatDistanceToNow(new Date(component.created_at), {
+                        addSuffix: true,
+                      })}
+                    </span>
+                  </TableCell>
+                  <TableCell className="text-right">
+                    {component.views || 0}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    {component.downloads || 0}
+                  </TableCell>
+                  <TableCell>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon">
+                          <MoreVertical className="h-4 w-4" />
+                          <span className="sr-only">More options</span>
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem asChild>
+                          <Link
+                            href={`/component/${component.slug}`}
+                            className="flex items-center cursor-pointer"
+                          >
+                            <Eye className="mr-2 h-4 w-4" />
+                            View Component
+                          </Link>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <Dialog>
+                            <DialogTrigger className="flex items-center w-full cursor-pointer">
+                              <Edit className="mr-2 h-4 w-4" />
+                              Edit Component
+                            </DialogTrigger>
+                            <DialogContent className="sm:max-w-[725px]">
+                              <DialogHeader>
+                                <DialogTitle>Edit Component</DialogTitle>
+                                <DialogDescription>
+                                  Update your component details and code.
+                                </DialogDescription>
+                              </DialogHeader>
+                              <ComponentPublishForm
+                                user={user}
+                                existingComponent={component}
+                              />
+                            </DialogContent>
+                          </Dialog>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <Code2 className="mr-2 h-4 w-4" />
+                          View Source
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <BarChart2 className="mr-2 h-4 w-4" />
+                          View Analytics
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                          onClick={() => copyComponentUrl(component.slug)}
+                        >
+                          <LinkIcon className="mr-2 h-4 w-4" />
+                          Copy Link
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem className="text-destructive focus:text-destructive">
+                          <Trash2 className="mr-2 h-4 w-4" />
+                          Delete
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/apps/web/components/features/studio/layout/component-publish-form.tsx b/apps/web/components/features/studio/layout/component-publish-form.tsx
new file mode 100644
index 00000000..86346723
--- /dev/null
+++ b/apps/web/components/features/studio/layout/component-publish-form.tsx
@@ -0,0 +1,139 @@
+"use client"
+
+import { useState } from "react"
+import { User } from "@/types/global"
+import { Component } from "@/types/component"
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { useToast } from "@/hooks/use-toast"
+
+interface ComponentPublishFormProps {
+  user: User
+  existingComponent?: Component
+  onSuccess?: () => void
+}
+
+export function ComponentPublishForm({
+  user,
+  existingComponent,
+  onSuccess,
+}: ComponentPublishFormProps) {
+  const { toast } = useToast()
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [formData, setFormData] = useState({
+    name: existingComponent?.name || "",
+    description: existingComponent?.description || "",
+    code: existingComponent?.code || "",
+    tags: existingComponent?.tags?.join(", ") || "",
+  })
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const { name, value } = e.target
+    setFormData((prev) => ({ ...prev, [name]: value }))
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+
+    if (!formData.name || !formData.code) {
+      toast({
+        title: "Missing required fields",
+        description: "Please provide a name and code for your component.",
+        variant: "destructive",
+      })
+      return
+    }
+
+    setIsSubmitting(true)
+
+    try {
+      // Call API to publish/update component
+      toast({
+        title: "Success!",
+        description: existingComponent
+          ? "Your component has been updated."
+          : "Your component has been published.",
+      })
+
+      // Call success callback if provided
+      if (onSuccess) {
+        onSuccess()
+      }
+    } catch (error) {
+      toast({
+        title: "Something went wrong.",
+        description: "Please try again later.",
+        variant: "destructive",
+      })
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="name">Component Name</Label>
+        <Input
+          id="name"
+          name="name"
+          value={formData.name}
+          onChange={handleChange}
+          placeholder="e.g., Animated Button"
+          required
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="description">Description</Label>
+        <Textarea
+          id="description"
+          name="description"
+          value={formData.description}
+          onChange={handleChange}
+          placeholder="Describe your component and its usage"
+          rows={2}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="tags">Tags (comma separated)</Label>
+        <Input
+          id="tags"
+          name="tags"
+          value={formData.tags}
+          onChange={handleChange}
+          placeholder="e.g., button, animation, ui"
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="code">Component Code</Label>
+        <Textarea
+          id="code"
+          name="code"
+          value={formData.code}
+          onChange={handleChange}
+          placeholder="Paste your component code here"
+          rows={12}
+          className="font-mono text-sm"
+          required
+        />
+      </div>
+
+      <div className="flex justify-end">
+        <Button type="submit" disabled={isSubmitting}>
+          {isSubmitting
+            ? "Processing..."
+            : existingComponent
+              ? "Update Component"
+              : "Publish Component"}
+        </Button>
+      </div>
+    </form>
+  )
+}
diff --git a/apps/web/components/features/studio/layout/dashboard-layout.tsx b/apps/web/components/features/studio/layout/dashboard-layout.tsx
new file mode 100644
index 00000000..66cfac78
--- /dev/null
+++ b/apps/web/components/features/studio/layout/dashboard-layout.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { User } from "@/types/global"
+import { Tables } from "@/types/supabase"
+import { StudioSidebar } from "./studio-sidebar"
+import { StudioHeader } from "./studio-header"
+import { StudioContentTable } from "./studio-content-table"
+import { StudioAnalytics } from "./studio-analytics"
+import { StudioMonetization } from "./studio-monetization"
+import { StudioSettings } from "./studio-settings"
+import { Footer } from "@/components/ui/footer"
+
+interface StudioDashboardLayoutProps {
+  user: User
+  components: Tables<"components">[]
+  activeTab: "content" | "analytics" | "monetization" | "settings"
+}
+
+export function StudioDashboardLayout({
+  user,
+  components,
+  activeTab,
+}: StudioDashboardLayoutProps) {
+  const pathname = usePathname()
+
+  // Determine which tab content to show
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case "content":
+        return <StudioContentTable components={components} user={user} />
+      case "analytics":
+        return <StudioAnalytics user={user} />
+      case "monetization":
+        return <StudioMonetization user={user} />
+      case "settings":
+        return <StudioSettings user={user} />
+      default:
+        return <StudioContentTable components={components} user={user} />
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <StudioHeader user={user} />
+      <div className="flex flex-1">
+        <StudioSidebar user={user} activeTab={activeTab} />
+        <main className="flex-1 pt-16 pb-12 overflow-y-auto">
+          <div className="px-6 py-8">{renderTabContent()}</div>
+        </main>
+      </div>
+      <Footer />
+    </div>
+  )
+}
diff --git a/apps/web/components/features/studio/layout/header.tsx b/apps/web/components/features/studio/layout/header.tsx
new file mode 100644
index 00000000..5e09c861
--- /dev/null
+++ b/apps/web/components/features/studio/layout/header.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { User } from "@/types/global"
+import { ModeToggle } from "@/components/mode-toggle"
+import { UserNav } from "@/components/user-nav"
+import { Search } from "lucide-react"
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
+
+interface StudioHeaderProps {
+  user: User
+}
+
+export function StudioHeader({ user }: StudioHeaderProps) {
+  const pathname = usePathname()
+
+  return (
+    <header className="h-16 border-b border-border sticky top-0 z-50 bg-background flex items-center justify-between px-4 md:px-6">
+      <div className="flex items-center">
+        <Link href="/" className="flex items-center gap-2 mr-8">
+          <img
+            src="/logo.svg"
+            alt="21st.dev"
+            width={30}
+            height={30}
+            className="dark:invert"
+          />
+          <span className="font-semibold text-lg hidden md:inline-block">
+            21st.dev <span className="text-primary">Studio</span>
+          </span>
+        </Link>
+
+        <div className="hidden lg:flex items-center gap-4">
+          <Link
+            href="/studio/dashboard"
+            className={cn(
+              "text-sm font-medium transition-colors hover:text-primary",
+              pathname.includes("/studio/dashboard") &&
+                !pathname.includes("/analytics") &&
+                !pathname.includes("/monetization") &&
+                !pathname.includes("/settings")
+                ? "text-primary"
+                : "text-muted-foreground",
+            )}
+          >
+            Dashboard
+          </Link>
+          <Link
+            href="/studio/dashboard/analytics"
+            className={cn(
+              "text-sm font-medium transition-colors hover:text-primary",
+              pathname.includes("/analytics")
+                ? "text-primary"
+                : "text-muted-foreground",
+            )}
+          >
+            Analytics
+          </Link>
+          <Link
+            href="/studio/dashboard/monetization"
+            className={cn(
+              "text-sm font-medium transition-colors hover:text-primary",
+              pathname.includes("/monetization")
+                ? "text-primary"
+                : "text-muted-foreground",
+            )}
+          >
+            Monetization
+          </Link>
+          <Link
+            href="/studio/dashboard/settings"
+            className={cn(
+              "text-sm font-medium transition-colors hover:text-primary",
+              pathname.includes("/settings")
+                ? "text-primary"
+                : "text-muted-foreground",
+            )}
+          >
+            Settings
+          </Link>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-4">
+        <div className="relative hidden md:flex items-center">
+          <Search className="absolute left-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            type="search"
+            placeholder="Search components..."
+            className="w-64 pl-8 rounded-full bg-muted"
+          />
+        </div>
+
+        <div className="flex items-center gap-2">
+          <ModeToggle />
+          <UserNav user={user} />
+        </div>
+      </div>
+    </header>
+  )
+}
diff --git a/apps/web/components/features/studio/layout/sidebar.tsx b/apps/web/components/features/studio/layout/sidebar.tsx
new file mode 100644
index 00000000..652e630e
--- /dev/null
+++ b/apps/web/components/features/studio/layout/sidebar.tsx
@@ -0,0 +1,165 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { User } from "@/types/global"
+import { UserAvatar } from "@/components/ui/user-avatar"
+import { cn } from "@/lib/utils"
+import {
+  LayoutGrid,
+  BarChart2,
+  DollarSign,
+  Settings,
+  PlusCircle,
+  Home,
+  BookOpen,
+} from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { ComponentPublishForm } from "./component-publish-form"
+import { useState } from "react"
+
+interface StudioSidebarProps {
+  user: User
+  activeTab: "content" | "analytics" | "monetization" | "settings"
+}
+
+export function StudioSidebar({ user, activeTab }: StudioSidebarProps) {
+  const [isPublishDialogOpen, setIsPublishDialogOpen] = useState(false)
+
+  // Navigation items
+  const navItems = [
+    {
+      name: "Content",
+      href: "/studio/dashboard",
+      icon: LayoutGrid,
+      active: activeTab === "content",
+    },
+    {
+      name: "Analytics",
+      href: "/studio/dashboard/analytics",
+      icon: BarChart2,
+      active: activeTab === "analytics",
+    },
+    {
+      name: "Monetization",
+      href: "/studio/dashboard/monetization",
+      icon: DollarSign,
+      active: activeTab === "monetization",
+    },
+    {
+      name: "Settings",
+      href: "/studio/dashboard/settings",
+      icon: Settings,
+      active: activeTab === "settings",
+    },
+  ]
+
+  // Utility links
+  const utilityLinks = [
+    {
+      name: "Home",
+      href: "/",
+      icon: Home,
+    },
+    {
+      name: "Documentation",
+      href: "/docs",
+      icon: BookOpen,
+    },
+  ]
+
+  return (
+    <aside className="w-64 bg-background border-r border-border flex-shrink-0 h-[calc(100vh-4rem)] sticky top-16">
+      <div className="h-full flex flex-col">
+        <div className="p-6">
+          <Dialog
+            open={isPublishDialogOpen}
+            onOpenChange={setIsPublishDialogOpen}
+          >
+            <DialogTrigger asChild>
+              <Button className="w-full" size="lg">
+                <PlusCircle className="mr-2 h-4 w-4" />
+                New Component
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-[725px]">
+              <DialogHeader>
+                <DialogTitle>Publish New Component</DialogTitle>
+                <DialogDescription>
+                  Paste your component code below. Make sure it follows our
+                  guidelines and includes all necessary imports.
+                </DialogDescription>
+              </DialogHeader>
+              <ComponentPublishForm
+                user={user}
+                onSuccess={() => setIsPublishDialogOpen(false)}
+              />
+            </DialogContent>
+          </Dialog>
+        </div>
+
+        <div className="p-3 px-4 flex items-center gap-3 border-y border-border">
+          <UserAvatar
+            src={user.display_image_url || user.image_url || "/placeholder.svg"}
+            alt={user.display_name || user.name || ""}
+            size={40}
+          />
+          <div className="overflow-hidden">
+            <p className="text-sm font-medium truncate">
+              {user.display_name || user.name || user.username}
+            </p>
+            <p className="text-xs text-muted-foreground truncate">
+              @{user.display_username || user.username}
+            </p>
+          </div>
+        </div>
+
+        <nav className="flex-1 overflow-y-auto py-3">
+          <div className="space-y-1 px-3">
+            {navItems.map((item) => (
+              <Link
+                key={item.name}
+                href={item.href}
+                className={cn(
+                  "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium",
+                  item.active
+                    ? "bg-accent text-accent-foreground"
+                    : "text-foreground/70 hover:bg-accent/50 hover:text-foreground",
+                )}
+              >
+                <item.icon className="h-5 w-5" />
+                <span>{item.name}</span>
+              </Link>
+            ))}
+          </div>
+
+          <div className="mt-6 pt-6 border-t border-border">
+            <div className="px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
+              Quick Links
+            </div>
+            <div className="space-y-1 px-3">
+              {utilityLinks.map((item) => (
+                <Link
+                  key={item.name}
+                  href={item.href}
+                  className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-foreground/70 hover:bg-accent/50 hover:text-foreground"
+                >
+                  <item.icon className="h-5 w-5" />
+                  <span>{item.name}</span>
+                </Link>
+              ))}
+            </div>
+          </div>
+        </nav>
+      </div>
+    </aside>
+  )
+}
diff --git a/apps/web/components/features/studio/monetization/monetization.tsx b/apps/web/components/features/studio/monetization/monetization.tsx
new file mode 100644
index 00000000..f2deae0a
--- /dev/null
+++ b/apps/web/components/features/studio/monetization/monetization.tsx
@@ -0,0 +1,496 @@
+"use client"
+
+import { User } from "@/types/global"
+import { Component } from "@/types/component"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Progress } from "@/components/ui/progress"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from "recharts"
+import {
+  CreditCard,
+  Download,
+  Users,
+  ChevronsUpDown,
+  DollarSign,
+  Wallet,
+  Landmark,
+  FileText,
+  CheckCircle2,
+  AlertCircle,
+} from "lucide-react"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+interface StudioMonetizationProps {
+  user: User
+  components: Component[]
+}
+
+export function StudioMonetization({
+  user,
+  components = [],
+}: StudioMonetizationProps) {
+  // Mock data for now
+  const earningsData = [
+    { month: "Jan", earnings: 0 },
+    { month: "Feb", earnings: 0 },
+    { month: "Mar", earnings: 0 },
+    { month: "Apr", earnings: 50 },
+    { month: "May", earnings: 120 },
+    { month: "Jun", earnings: 210 },
+    { month: "Jul", earnings: 280 },
+  ]
+
+  const transactionsData = [
+    {
+      id: 1,
+      date: "2023-07-01",
+      amount: 120.5,
+      status: "completed",
+      description: "Premium component sales",
+    },
+    {
+      id: 2,
+      date: "2023-06-15",
+      amount: 85.25,
+      status: "completed",
+      description: "Component royalties",
+    },
+    {
+      id: 3,
+      date: "2023-06-01",
+      amount: 75.0,
+      status: "completed",
+      description: "Premium component sales",
+    },
+    {
+      id: 4,
+      date: "2023-05-15",
+      amount: 50.0,
+      status: "completed",
+      description: "Component royalties",
+    },
+  ]
+
+  const pricingTiers = [
+    {
+      name: "Basic",
+      description: "For new component authors",
+      features: [
+        "Publish up to 10 components",
+        "Basic analytics",
+        "80% revenue share",
+        "Community support",
+      ],
+      current: true,
+    },
+    {
+      name: "Pro",
+      description: "For established authors",
+      price: "$19/month",
+      features: [
+        "Unlimited components",
+        "Advanced analytics",
+        "85% revenue share",
+        "Priority support",
+        "Featured placement",
+      ],
+      current: false,
+    },
+    {
+      name: "Enterprise",
+      description: "For teams and businesses",
+      price: "Contact us",
+      features: [
+        "Custom component branding",
+        "Team management",
+        "90% revenue share",
+        "Dedicated support",
+        "Custom integration options",
+      ],
+      current: false,
+    },
+  ]
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+        <div>
+          <h2 className="text-2xl font-bold tracking-tight">Monetization</h2>
+          <p className="text-muted-foreground">
+            Manage your earnings and payment methods
+          </p>
+        </div>
+      </div>
+
+      <Tabs defaultValue="overview" className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="earnings">Earnings</TabsTrigger>
+          <TabsTrigger value="payment">Payment Methods</TabsTrigger>
+          <TabsTrigger value="plans">Plans</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="overview" className="space-y-4">
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">
+                  Total Earnings
+                </CardTitle>
+                <DollarSign className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">$486.00</div>
+                <p className="text-xs text-muted-foreground">
+                  +$124.00 from last month
+                </p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">
+                  Available Balance
+                </CardTitle>
+                <Wallet className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">$280.00</div>
+                <p className="text-xs text-muted-foreground">
+                  Available for withdrawal
+                </p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">
+                  Components Sold
+                </CardTitle>
+                <Download className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">124</div>
+                <p className="text-xs text-muted-foreground">
+                  +18 from last month
+                </p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">
+                  Revenue Share
+                </CardTitle>
+                <Users className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">80%</div>
+                <p className="text-xs text-muted-foreground">
+                  Basic author plan
+                </p>
+              </CardContent>
+            </Card>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
+            <Card className="md:col-span-4">
+              <CardHeader>
+                <CardTitle>Earnings Overview</CardTitle>
+                <CardDescription>
+                  Your earnings over the past 6 months
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="h-[300px]">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <LineChart data={earningsData}>
+                      <CartesianGrid strokeDasharray="3 3" />
+                      <XAxis dataKey="month" />
+                      <YAxis />
+                      <Tooltip
+                        formatter={(value) => [`$${value}`, "Earnings"]}
+                      />
+                      <Legend />
+                      <Line
+                        type="monotone"
+                        dataKey="earnings"
+                        stroke="#10b981"
+                        activeDot={{ r: 8 }}
+                        strokeWidth={2}
+                        name="Earnings ($)"
+                      />
+                    </LineChart>
+                  </ResponsiveContainer>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card className="md:col-span-3">
+              <CardHeader>
+                <CardTitle>Monthly Goal</CardTitle>
+                <CardDescription>$500 target for this month</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-8">
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm font-medium">$280 of $500</span>
+                    <span className="text-sm text-muted-foreground">56%</span>
+                  </div>
+                  <Progress value={56} />
+                </div>
+
+                <div className="space-y-4">
+                  <h4 className="text-sm font-medium">
+                    Top Earning Components
+                  </h4>
+                  <ul className="space-y-2">
+                    {components.length > 0
+                      ? components.slice(0, 3).map((component, index) => (
+                          <li
+                            key={index}
+                            className="flex items-center justify-between text-sm"
+                          >
+                            <span>{component.name}</span>
+                            <span className="font-medium">
+                              ${Math.floor(Math.random() * 100)}
+                            </span>
+                          </li>
+                        ))
+                      : [
+                          { name: "Modal Dialog", amount: "$120" },
+                          { name: "DataTable", amount: "$85" },
+                          { name: "Card Component", amount: "$75" },
+                        ].map((item, index) => (
+                          <li
+                            key={index}
+                            className="flex items-center justify-between text-sm"
+                          >
+                            <span>{item.name}</span>
+                            <span className="font-medium">{item.amount}</span>
+                          </li>
+                        ))}
+                  </ul>
+                </div>
+              </CardContent>
+              <CardFooter>
+                <Button className="w-full">
+                  <DollarSign className="h-4 w-4 mr-2" />
+                  Withdraw Funds
+                </Button>
+              </CardFooter>
+            </Card>
+          </div>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Recent Transactions</CardTitle>
+              <CardDescription>
+                Your most recent earnings and payouts
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Date</TableHead>
+                    <TableHead>Description</TableHead>
+                    <TableHead>Status</TableHead>
+                    <TableHead className="text-right">Amount</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {transactionsData.map((transaction) => (
+                    <TableRow key={transaction.id}>
+                      <TableCell>
+                        <div className="font-medium">
+                          {new Date(transaction.date).toLocaleDateString()}
+                        </div>
+                      </TableCell>
+                      <TableCell>{transaction.description}</TableCell>
+                      <TableCell>
+                        <div className="flex items-center">
+                          {transaction.status === "completed" ? (
+                            <>
+                              <CheckCircle2 className="mr-2 h-4 w-4 text-green-500" />
+                              <span className="text-xs">Completed</span>
+                            </>
+                          ) : (
+                            <>
+                              <AlertCircle className="mr-2 h-4 w-4 text-yellow-500" />
+                              <span className="text-xs">Pending</span>
+                            </>
+                          )}
+                        </div>
+                      </TableCell>
+                      <TableCell className="text-right font-medium">
+                        ${transaction.amount.toFixed(2)}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+            <CardFooter className="flex justify-end">
+              <Button variant="outline">View All Transactions</Button>
+            </CardFooter>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="earnings" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Earnings History</CardTitle>
+              <CardDescription>
+                Detailed breakdown of your revenue
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-muted-foreground">
+                Detailed earnings information will be available soon.
+              </p>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="payment" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Payment Methods</CardTitle>
+              <CardDescription>Manage your payment options</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex justify-between items-center p-4 border rounded-md">
+                <div className="flex items-center space-x-3">
+                  <Landmark className="h-5 w-5" />
+                  <div>
+                    <p className="font-medium">Bank Account (Primary)</p>
+                    <p className="text-sm text-muted-foreground">••••1234</p>
+                  </div>
+                </div>
+                <Button variant="outline" size="sm">
+                  Edit
+                </Button>
+              </div>
+
+              <div className="flex justify-between items-center p-4 border rounded-md">
+                <div className="flex items-center space-x-3">
+                  <CreditCard className="h-5 w-5" />
+                  <div>
+                    <p className="font-medium">PayPal</p>
+                    <p className="text-sm text-muted-foreground">
+                      example@example.com
+                    </p>
+                  </div>
+                </div>
+                <Button variant="outline" size="sm">
+                  Edit
+                </Button>
+              </div>
+
+              <Button className="w-full">Add Payment Method</Button>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Tax Information</CardTitle>
+              <CardDescription>
+                Manage your tax documents and settings
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex justify-between items-center p-4 border rounded-md">
+                <div className="flex items-center space-x-3">
+                  <FileText className="h-5 w-5" />
+                  <div>
+                    <p className="font-medium">W-9 Form</p>
+                    <p className="text-sm text-muted-foreground">
+                      Submitted on Jan 15, 2023
+                    </p>
+                  </div>
+                </div>
+                <Button variant="outline" size="sm">
+                  View
+                </Button>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="tax-id">Tax ID (EIN/SSN)</Label>
+                <Input id="tax-id" type="text" value="••••••1234" disabled />
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="plans" className="space-y-4">
+          <div className="grid gap-4 md:grid-cols-3">
+            {pricingTiers.map((tier, index) => (
+              <Card
+                key={index}
+                className={tier.current ? "border-primary" : ""}
+              >
+                <CardHeader>
+                  <CardTitle>{tier.name}</CardTitle>
+                  <CardDescription>{tier.description}</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  {tier.price && (
+                    <div className="text-3xl font-bold">{tier.price}</div>
+                  )}
+                  <ul className="space-y-2">
+                    {tier.features.map((feature, idx) => (
+                      <li key={idx} className="flex items-start">
+                        <CheckCircle2 className="h-4 w-4 mr-2 mt-0.5 text-primary" />
+                        <span className="text-sm">{feature}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </CardContent>
+                <CardFooter>
+                  <Button
+                    className="w-full"
+                    variant={tier.current ? "outline" : "default"}
+                    disabled={tier.current}
+                  >
+                    {tier.current ? "Current Plan" : "Upgrade"}
+                  </Button>
+                </CardFooter>
+              </Card>
+            ))}
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
diff --git a/apps/web/components/features/studio/settings/settings.tsx b/apps/web/components/features/studio/settings/settings.tsx
new file mode 100644
index 00000000..8708a29b
--- /dev/null
+++ b/apps/web/components/features/studio/settings/settings.tsx
@@ -0,0 +1,528 @@
+"use client"
+
+import { useState } from "react"
+import { User } from "@/types/global"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { Switch } from "@/components/ui/switch"
+import { UserAvatar } from "@/components/ui/user-avatar"
+import { Separator } from "@/components/ui/separator"
+import {
+  AlertCircle,
+  Globe,
+  BellRing,
+  Shield,
+  Key,
+  Trash2,
+  Upload,
+} from "lucide-react"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+
+interface StudioSettingsProps {
+  user: User
+}
+
+export function StudioSettings({ user }: StudioSettingsProps) {
+  const [isEditing, setIsEditing] = useState(false)
+  const [formData, setFormData] = useState({
+    displayName: user.display_name || user.name || "",
+    displayUsername: user.display_username || user.username || "",
+    bio: user.bio || "",
+    website: user.website || "",
+    email: user.email || "",
+  })
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const { name, value } = e.target
+    setFormData((prev) => ({ ...prev, [name]: value }))
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // Save profile changes
+    setIsEditing(false)
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold tracking-tight">Settings</h2>
+        <p className="text-muted-foreground">
+          Manage your author profile and preferences
+        </p>
+      </div>
+
+      <Tabs defaultValue="profile" className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="profile">Author Profile</TabsTrigger>
+          <TabsTrigger value="account">Account</TabsTrigger>
+          <TabsTrigger value="notifications">Notifications</TabsTrigger>
+          <TabsTrigger value="security">Security</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="profile" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Profile Information</CardTitle>
+              <CardDescription>
+                Update your author profile information visible to users
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              {!isEditing ? (
+                <div className="space-y-6">
+                  <div className="flex items-center gap-4">
+                    <UserAvatar
+                      src={
+                        user.display_image_url ||
+                        user.image_url ||
+                        "/placeholder.svg"
+                      }
+                      alt={user.display_name || user.name || ""}
+                      size={80}
+                    />
+                    <div>
+                      <h3 className="font-medium text-lg">
+                        {formData.displayName}
+                      </h3>
+                      <p className="text-muted-foreground">
+                        @{formData.displayUsername}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="space-y-1">
+                    <h4 className="text-sm font-medium">Bio</h4>
+                    <p className="text-sm text-muted-foreground">
+                      {formData.bio || "No bio provided."}
+                    </p>
+                  </div>
+
+                  <div className="space-y-1">
+                    <h4 className="text-sm font-medium">Website</h4>
+                    <p className="text-sm text-muted-foreground">
+                      {formData.website || "No website provided."}
+                    </p>
+                  </div>
+
+                  <div className="space-y-1">
+                    <h4 className="text-sm font-medium">Contact Email</h4>
+                    <p className="text-sm text-muted-foreground">
+                      {formData.email || "No contact email provided."}
+                    </p>
+                  </div>
+
+                  <Button onClick={() => setIsEditing(true)}>
+                    Edit Profile
+                  </Button>
+                </div>
+              ) : (
+                <form onSubmit={handleSubmit} className="space-y-6">
+                  <div className="flex items-center gap-4">
+                    <UserAvatar
+                      src={
+                        user.display_image_url ||
+                        user.image_url ||
+                        "/placeholder.svg"
+                      }
+                      alt={user.display_name || user.name || ""}
+                      size={80}
+                    />
+                    <div className="space-y-2">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="flex items-center gap-2"
+                      >
+                        <Upload className="h-4 w-4" />
+                        Change Avatar
+                      </Button>
+                      <p className="text-xs text-muted-foreground">
+                        JPG, PNG or GIF. 1MB max.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="grid gap-4 md:grid-cols-2">
+                    <div className="space-y-2">
+                      <Label htmlFor="displayName">Display Name</Label>
+                      <Input
+                        id="displayName"
+                        name="displayName"
+                        value={formData.displayName}
+                        onChange={handleChange}
+                      />
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="displayUsername">Display Username</Label>
+                      <Input
+                        id="displayUsername"
+                        name="displayUsername"
+                        value={formData.displayUsername}
+                        onChange={handleChange}
+                      />
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="bio">Bio</Label>
+                    <Textarea
+                      id="bio"
+                      name="bio"
+                      value={formData.bio}
+                      onChange={handleChange}
+                      placeholder="Tell others about yourself and your components"
+                      rows={4}
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="website">Website</Label>
+                    <div className="flex items-center">
+                      <Globe className="h-4 w-4 mr-2 text-muted-foreground" />
+                      <Input
+                        id="website"
+                        name="website"
+                        value={formData.website}
+                        onChange={handleChange}
+                        placeholder="https://yourwebsite.com"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="email">Contact Email</Label>
+                    <Input
+                      id="email"
+                      name="email"
+                      type="email"
+                      value={formData.email}
+                      onChange={handleChange}
+                      placeholder="public@example.com"
+                    />
+                    <p className="text-xs text-muted-foreground">
+                      This email will be visible to users. Use a different email
+                      than your login email if needed.
+                    </p>
+                  </div>
+
+                  <div className="flex gap-2">
+                    <Button type="submit">Save Changes</Button>
+                    <Button
+                      variant="outline"
+                      onClick={() => setIsEditing(false)}
+                    >
+                      Cancel
+                    </Button>
+                  </div>
+                </form>
+              )}
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Author Verification</CardTitle>
+              <CardDescription>
+                Get verified as an authentic component author
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <Alert
+                variant="default"
+                className="bg-primary/10 border-primary/20"
+              >
+                <Shield className="h-4 w-4" />
+                <AlertTitle>Verified Status</AlertTitle>
+                <AlertDescription>
+                  You are not verified yet. Verified authors get priority
+                  placement and increased visibility.
+                </AlertDescription>
+              </Alert>
+
+              <div className="space-y-4">
+                <h4 className="text-sm font-medium">
+                  Requirements for verification:
+                </h4>
+                <ul className="list-disc pl-5 space-y-1 text-sm">
+                  <li>At least 5 published components</li>
+                  <li>Components with high quality ratings</li>
+                  <li>Consistent activity over 3+ months</li>
+                  <li>Complete profile information</li>
+                </ul>
+              </div>
+            </CardContent>
+            <CardFooter>
+              <Button variant="outline" disabled>
+                Apply for Verification
+              </Button>
+            </CardFooter>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="account" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Account Information</CardTitle>
+              <CardDescription>Manage your account details</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="account-email">Account Email</Label>
+                <Input id="account-email" value={user.email || ""} disabled />
+                <p className="text-xs text-muted-foreground">
+                  This is the email associated with your account login.
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <Label>Connected Accounts</Label>
+                <div className="rounded-md border p-4">
+                  <div className="flex justify-between items-center">
+                    <div className="flex items-center gap-3">
+                      <img src="/github.svg" alt="GitHub" className="h-5 w-5" />
+                      <div>
+                        <p className="font-medium">GitHub</p>
+                        <p className="text-xs text-muted-foreground">
+                          Connect your GitHub account to showcase your
+                          repositories
+                        </p>
+                      </div>
+                    </div>
+                    <Button variant="outline" size="sm">
+                      Connect
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Danger Zone</CardTitle>
+              <CardDescription>Irreversible account actions</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <Alert variant="destructive">
+                <AlertCircle className="h-4 w-4" />
+                <AlertTitle>Warning</AlertTitle>
+                <AlertDescription>
+                  Deleting your account will remove all your components,
+                  earnings history, and account data. This action cannot be
+                  undone.
+                </AlertDescription>
+              </Alert>
+            </CardContent>
+            <CardFooter>
+              <Button variant="destructive" className="flex items-center gap-2">
+                <Trash2 className="h-4 w-4" />
+                Delete Account
+              </Button>
+            </CardFooter>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="notifications" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Notification Preferences</CardTitle>
+              <CardDescription>
+                Choose how and when you want to be notified
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="space-y-4">
+                <h4 className="text-sm font-medium mb-2">
+                  Email Notifications
+                </h4>
+                <Separator />
+
+                <div className="flex items-center justify-between">
+                  <div className="space-y-0.5">
+                    <Label htmlFor="comments">Comments on Components</Label>
+                    <p className="text-sm text-muted-foreground">
+                      Receive emails when someone comments on your components
+                    </p>
+                  </div>
+                  <Switch id="comments" defaultChecked />
+                </div>
+
+                <Separator />
+
+                <div className="flex items-center justify-between">
+                  <div className="space-y-0.5">
+                    <Label htmlFor="downloads">Component Downloads</Label>
+                    <p className="text-sm text-muted-foreground">
+                      Receive emails for significant download milestones
+                    </p>
+                  </div>
+                  <Switch id="downloads" defaultChecked />
+                </div>
+
+                <Separator />
+
+                <div className="flex items-center justify-between">
+                  <div className="space-y-0.5">
+                    <Label htmlFor="earnings">Earnings Updates</Label>
+                    <p className="text-sm text-muted-foreground">
+                      Receive emails about your earnings and payouts
+                    </p>
+                  </div>
+                  <Switch id="earnings" defaultChecked />
+                </div>
+
+                <Separator />
+
+                <div className="flex items-center justify-between">
+                  <div className="space-y-0.5">
+                    <Label htmlFor="marketing">Marketing & Updates</Label>
+                    <p className="text-sm text-muted-foreground">
+                      News, updates, and marketing communications about 21st.dev
+                    </p>
+                  </div>
+                  <Switch id="marketing" />
+                </div>
+
+                <Separator />
+              </div>
+
+              <div className="space-y-4">
+                <h4 className="text-sm font-medium mb-2">
+                  In-App Notifications
+                </h4>
+                <Separator />
+
+                <div className="flex items-center justify-between">
+                  <div className="space-y-0.5">
+                    <Label htmlFor="in-app-comments">Comments</Label>
+                    <p className="text-sm text-muted-foreground">
+                      Notify when someone comments on your components
+                    </p>
+                  </div>
+                  <Switch id="in-app-comments" defaultChecked />
+                </div>
+
+                <Separator />
+
+                <div className="flex items-center justify-between">
+                  <div className="space-y-0.5">
+                    <Label htmlFor="in-app-downloads">Downloads</Label>
+                    <p className="text-sm text-muted-foreground">
+                      Notify for component download milestones
+                    </p>
+                  </div>
+                  <Switch id="in-app-downloads" defaultChecked />
+                </div>
+
+                <Separator />
+
+                <div className="flex items-center justify-between">
+                  <div className="space-y-0.5">
+                    <Label htmlFor="in-app-earnings">Earnings</Label>
+                    <p className="text-sm text-muted-foreground">
+                      Notify about earnings and payouts
+                    </p>
+                  </div>
+                  <Switch id="in-app-earnings" defaultChecked />
+                </div>
+              </div>
+            </CardContent>
+            <CardFooter>
+              <Button className="flex items-center gap-2">
+                <BellRing className="h-4 w-4" />
+                Save Preferences
+              </Button>
+            </CardFooter>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="security" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Security Settings</CardTitle>
+              <CardDescription>
+                Manage your security preferences
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="space-y-4">
+                <h4 className="text-sm font-medium">Password</h4>
+                <p className="text-sm text-muted-foreground">
+                  Password is managed through your authentication provider.
+                </p>
+                <Button variant="outline" className="flex items-center gap-2">
+                  <Key className="h-4 w-4" />
+                  Change Password
+                </Button>
+              </div>
+
+              <Separator />
+
+              <div className="space-y-4">
+                <h4 className="text-sm font-medium">
+                  Two-Factor Authentication
+                </h4>
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-sm">
+                      Enable two-factor authentication for added security
+                    </p>
+                    <p className="text-sm text-muted-foreground">
+                      Protect your account with an additional security layer
+                    </p>
+                  </div>
+                  <Switch id="2fa" />
+                </div>
+              </div>
+
+              <Separator />
+
+              <div className="space-y-4">
+                <h4 className="text-sm font-medium">Session Management</h4>
+                <p className="text-sm text-muted-foreground">
+                  Manage your active sessions and sign out from other devices.
+                </p>
+                <Button variant="outline">Manage Sessions</Button>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>API Access</CardTitle>
+              <CardDescription>
+                Manage API keys for programmatic access to your components
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-muted-foreground">
+                API access will be available soon for Pro and Enterprise
+                authors.
+              </p>
+            </CardContent>
+            <CardFooter>
+              <Button variant="outline" disabled>
+                Generate API Key
+              </Button>
+            </CardFooter>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
diff --git a/apps/web/components/icons/index.tsx b/apps/web/components/icons/index.tsx
index 8de122c1..ca4ec822 100644
--- a/apps/web/components/icons/index.tsx
+++ b/apps/web/components/icons/index.tsx
@@ -9,6 +9,7 @@ import {
   CalendarIcon,
   Settings,
   Info,
+  LayoutDashboard,
 } from "lucide-react"
 import { LovableLogo } from "./lovable"
 import { SitebrewLogo } from "./sitebrew"
@@ -158,17 +159,21 @@ export const Icons = {
   ),
   slash: (props: LucideProps) => (
     <svg
-      height="16"
-      strokeLinejoin="round"
-      viewBox="0 0 16 16"
+      aria-hidden="true"
+      focusable="false"
+      data-prefix="fas"
+      data-icon="slash"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 640 512"
       width="16"
+      height="16"
+      fill="currentColor"
       {...props}
     >
       <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M4.01526 15.3939L4.3107 14.7046L10.3107 0.704556L10.6061 0.0151978L11.9849 0.606077L11.6894 1.29544L5.68942 15.2954L5.39398 15.9848L4.01526 15.3939Z"
         fill="currentColor"
+        d="M594.53 508.63L6.18 53.9a15.41 15.41 0 0 1-4.07-9.81a14.89 14.89 0 0 1 4.07-9.8L30.77 8.7c5.36-5.41 14.55-5.41 20.07 0l588.36 454.73c5.52 5.41 5.52 14.56 0 20.07l-24.59 25.13c-5.5 5.41-14.69 5.41-20.08 0z"
       />
     </svg>
   ),
@@ -290,4 +295,5 @@ export const Icons = {
   calendar: CalendarIcon,
   settings: Settings,
   info: Info,
+  layoutDashboard: LayoutDashboard,
 }
diff --git a/apps/web/components/ui/header.client.tsx b/apps/web/components/ui/header.client.tsx
index 29795cc0..940c0466 100644
--- a/apps/web/components/ui/header.client.tsx
+++ b/apps/web/components/ui/header.client.tsx
@@ -292,7 +292,17 @@ export function Header({
                     asChild
                     className="rounded-none shadow-none first:rounded-s-lg last:rounded-e-lg focus-visible:z-10"
                   >
-                    <Link href="/publish">Add new</Link>
+                    <Link
+                      href={
+                        userState.profile?.display_username
+                          ? `/studio/${userState.profile.display_username}`
+                          : userState.profile?.username
+                            ? `/studio/${userState.profile.username}`
+                            : "/studio"
+                      }
+                    >
+                      Add new
+                    </Link>
                   </Button>
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
@@ -315,7 +325,16 @@ export function Header({
                       align="end"
                     >
                       <DropdownMenuItem asChild>
-                        <Link href="/publish" className="cursor-pointer">
+                        <Link
+                          href={
+                            userState.profile?.display_username
+                              ? `/studio/${userState.profile.display_username}`
+                              : userState.profile?.username
+                                ? `/studio/${userState.profile.username}`
+                                : "/studio"
+                          }
+                          className="cursor-pointer"
+                        >
                           <div className="flex flex-col gap-1">
                             <span className="text-sm font-medium">
                               Publish component
@@ -400,6 +419,23 @@ export function Header({
                   >
                     View Profile
                   </DropdownMenuItem>
+                  <DropdownMenuItem
+                    className="text-sm px-3 py-2 cursor-pointer flex items-center justify-between"
+                    onSelect={() => {
+                      if (userState.profile?.display_username) {
+                        router.push(
+                          `/studio/${userState.profile.display_username}`,
+                        )
+                      } else if (userState.profile?.username) {
+                        router.push(`/studio/${userState.profile.username}`)
+                      } else {
+                        router.push("/studio")
+                      }
+                    }}
+                  >
+                    Studio
+                    <Icons.layoutDashboard className="h-4 w-4" />
+                  </DropdownMenuItem>
                   <DropdownMenuItem
                     className="text-sm px-3 py-2 cursor-pointer flex items-center justify-between"
                     onSelect={() => router.push("/settings/profile")}
diff --git a/package.json b/package.json
index 00208a2e..37e0fda5 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,8 @@
     "@radix-ui/react-radio-group": "^1.2.3",
     "emblor": "^1.4.7",
     "jotai": "2.8.0",
-    "next": "^15.2.1"
+    "next": "^15.2.1",
+    "recharts": "^2.15.1"
   },
   "resolutions": {
     "jotai": "2.8.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e30643c7..38dadb07 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
       next:
         specifier: ^15.2.1
         version: 15.2.1(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
+      recharts:
+        specifier: ^2.15.1
+        version: 2.15.1(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
     devDependencies:
       prettier:
         specifier: ^3.2.5
@@ -7484,6 +7487,48 @@ packages:
     resolution: {integrity: sha512-nl09VhutdjINdWyXxHWN/w9zlNCfr60JUqJbd24YXUuCwgeL0TpFSdElCwb6cxfB6ybE19Gjj4g0jsgkXxKv1Q==}
     dev: false
 
+  /@types/d3-array@3.2.1:
+    resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
+    dev: false
+
+  /@types/d3-color@3.1.3:
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+    dev: false
+
+  /@types/d3-ease@3.0.2:
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+    dev: false
+
+  /@types/d3-interpolate@3.0.4:
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+    dependencies:
+      '@types/d3-color': 3.1.3
+    dev: false
+
+  /@types/d3-path@3.1.1:
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+    dev: false
+
+  /@types/d3-scale@4.0.9:
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+    dependencies:
+      '@types/d3-time': 3.0.4
+    dev: false
+
+  /@types/d3-shape@3.1.7:
+    resolution: {integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==}
+    dependencies:
+      '@types/d3-path': 3.1.1
+    dev: false
+
+  /@types/d3-time@3.0.4:
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+    dev: false
+
+  /@types/d3-timer@3.0.2:
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+    dev: false
+
   /@types/eslint@8.56.12:
     resolution: {integrity: sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==}
     dependencies:
@@ -8904,6 +8949,77 @@ packages:
   /csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  /d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+    dependencies:
+      internmap: 2.0.3
+    dev: false
+
+  /d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-format@3.1.0:
+    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-color: 3.1.0
+    dev: false
+
+  /d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.0
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+    dev: false
+
+  /d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-path: 3.1.0
+    dev: false
+
+  /d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-time: 3.1.0
+    dev: false
+
+  /d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+    dev: false
+
+  /d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+    dev: false
+
   /d@0.1.1:
     resolution: {integrity: sha512-0SdM9V9pd/OXJHoWmTfNPTAeD+lw6ZqHg+isPyBFuJsZLSE0Ygg1cYZ/0l6DrKQXMOqGOu1oWupMoOfoRfMZrQ==}
     dependencies:
@@ -8984,6 +9100,10 @@ packages:
     dependencies:
       ms: 2.1.3
 
+  /decimal.js-light@2.5.1:
+    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
+    dev: false
+
   /dedent@0.7.0:
     resolution: {integrity: sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==}
     dev: false
@@ -9129,6 +9249,13 @@ packages:
       esutils: 2.0.3
     dev: true
 
+  /dom-helpers@5.2.1:
+    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
+    dependencies:
+      '@babel/runtime': 7.26.0
+      csstype: 3.1.3
+    dev: false
+
   /dom-serializer@2.0.0:
     resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
     dependencies:
@@ -10076,6 +10203,10 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  /eventemitter3@4.0.7:
+    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
+    dev: false
+
   /execa@5.1.1:
     resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
     engines: {node: '>=10'}
@@ -10112,6 +10243,11 @@ packages:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
     dev: true
 
+  /fast-equals@5.2.2:
+    resolution: {integrity: sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==}
+    engines: {node: '>=6.0.0'}
+    dev: false
+
   /fast-glob@3.3.1:
     resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
     engines: {node: '>=8.6.0'}
@@ -10850,6 +10986,11 @@ packages:
       side-channel: 1.1.0
     dev: true
 
+  /internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+    dev: false
+
   /intersection-observer@0.10.0:
     resolution: {integrity: sha512-fn4bQ0Xq8FTej09YC/jqKZwtijpvARlRp6wxL5WTA6yPe2YWSJ5RJh7Nm79rK2qB0wr6iDQzH60XGq5V/7u8YQ==}
     dev: false
@@ -12610,6 +12751,10 @@ packages:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
     dev: false
 
+  /react-is@18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+    dev: false
+
   /react-promise-suspense@0.3.4:
     resolution: {integrity: sha512-I42jl7L3Ze6kZaq+7zXWSunBa3b1on5yfvUW6Eo/3fFOj6dZ5Bqmcd264nJbTK/gn1HjjILAjSwnZbV4RpSaNQ==}
     dependencies:
@@ -12794,6 +12939,19 @@ packages:
       use-sidecar: 1.1.3(@types/react@19.0.10)(react@19.0.0)
     dev: false
 
+  /react-smooth@4.0.4(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+    resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    dependencies:
+      fast-equals: 5.2.2
+      prop-types: 15.8.1
+      react: 19.0.0-rc-fb9a90fa48-20240614
+      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      react-transition-group: 4.4.5(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
+    dev: false
+
   /react-style-singleton@2.2.1(@types/react@19.0.10)(react@19.0.0):
     resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
     engines: {node: '>=10'}
@@ -12858,6 +13016,20 @@ packages:
       tslib: 2.8.0
     dev: false
 
+  /react-transition-group@4.4.5(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+    resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
+    peerDependencies:
+      react: '>=16.6.0'
+      react-dom: '>=16.6.0'
+    dependencies:
+      '@babel/runtime': 7.26.0
+      dom-helpers: 5.2.1
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 19.0.0-rc-fb9a90fa48-20240614
+      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+    dev: false
+
   /react@18.3.1:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
@@ -12916,6 +13088,31 @@ packages:
       picomatch: 2.3.1
     dev: false
 
+  /recharts-scale@0.4.5:
+    resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==}
+    dependencies:
+      decimal.js-light: 2.5.1
+    dev: false
+
+  /recharts@2.15.1(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+    resolution: {integrity: sha512-v8PUTUlyiDe56qUj82w/EDVuzEFXwEHp9/xOowGAZwfLjB9uAy3GllQVIYMWF6nU+qibx85WF75zD7AjqoT54Q==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    dependencies:
+      clsx: 2.1.1
+      eventemitter3: 4.0.7
+      lodash: 4.17.21
+      react: 19.0.0-rc-fb9a90fa48-20240614
+      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      react-is: 18.3.1
+      react-smooth: 4.0.4(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
+      recharts-scale: 0.4.5
+      tiny-invariant: 1.3.3
+      victory-vendor: 36.9.2
+    dev: false
+
   /reflect.getprototypeof@1.0.6:
     resolution: {integrity: sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==}
     engines: {node: '>= 0.4'}
@@ -13875,6 +14072,10 @@ packages:
       next-tick: 1.1.0
     dev: true
 
+  /tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+    dev: false
+
   /tinycolor2@1.6.0:
     resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
     dev: true
@@ -14490,6 +14691,25 @@ packages:
       vfile-message: 4.0.2
     dev: false
 
+  /victory-vendor@36.9.2:
+    resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==}
+    dependencies:
+      '@types/d3-array': 3.2.1
+      '@types/d3-ease': 3.0.2
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-scale': 4.0.9
+      '@types/d3-shape': 3.1.7
+      '@types/d3-time': 3.0.4
+      '@types/d3-timer': 3.0.2
+      d3-array: 3.2.4
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-scale: 4.0.2
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-timer: 3.0.1
+    dev: false
+
   /vite-plugin-singlefile@2.1.0(rollup@4.38.0)(vite@6.2.1):
     resolution: {integrity: sha512-7tJo+UgZABlKpY/nubth/wxJ4+pUGREPnEwNOknxwl2MM0zTvF14KTU4Ln1lc140gjLLV5mjDrvuoquU7OZqCg==}
     engines: {node: '>18.0.0'}

From bf0453f8ba17b011e5c901fd310eb5902d513ff6 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Wed, 2 Apr 2025 16:28:08 +0300
Subject: [PATCH 003/143] landing

---
 apps/web/app/studio/page.client.tsx | 168 ----------------------------
 apps/web/app/studio/page.tsx        | 166 +++++++++++++++++++++++----
 2 files changed, 143 insertions(+), 191 deletions(-)
 delete mode 100644 apps/web/app/studio/page.client.tsx

diff --git a/apps/web/app/studio/page.client.tsx b/apps/web/app/studio/page.client.tsx
deleted file mode 100644
index 60d33132..00000000
--- a/apps/web/app/studio/page.client.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import { Header } from "@/components/ui/header.client"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table"
-import { Button } from "@/components/ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog"
-import { PlusCircle } from "lucide-react"
-import { formatDistanceToNow } from "date-fns"
-import { Textarea } from "@/components/ui/textarea"
-import { useClerkSupabaseClient } from "@/lib/clerk"
-import { toast } from "sonner"
-import { useRouter } from "next/navigation"
-import { Tables } from "@/types/supabase"
-
-type Component = Tables<"components">
-
-interface StudioClientProps {
-  initialComponents: Component[]
-}
-
-export function StudioClient({ initialComponents }: StudioClientProps) {
-  const [isPublishOpen, setIsPublishOpen] = useState(false)
-  const [componentCode, setComponentCode] = useState("")
-  const [isPublishing, setIsPublishing] = useState(false)
-  const supabase = useClerkSupabaseClient()
-  const router = useRouter()
-
-  const handlePublish = async () => {
-    if (!componentCode.trim()) {
-      toast.error("Please enter component code")
-      return
-    }
-
-    setIsPublishing(true)
-    try {
-      // Here you would add the logic to parse and validate the component code
-      // Then save it to the database
-      const { error } = await supabase.from("components").insert({
-        code: componentCode,
-        name: "New Component", // Required field
-        component_names: {}, // Required field
-        component_slug: "new-component", // Required field
-        preview_url: "https://placeholder.com", // Required field
-        user_id: "user_id", // Will be set by RLS
-        direct_registry_dependencies: {}, // Required field
-        demo_direct_registry_dependencies: {}, // Required field
-      })
-
-      if (error) throw error
-
-      toast.success("Component published successfully")
-      setIsPublishOpen(false)
-      router.refresh()
-    } catch (error) {
-      toast.error("Failed to publish component")
-      console.error("Error publishing component:", error)
-    } finally {
-      setIsPublishing(false)
-    }
-  }
-
-  return (
-    <>
-      <Header />
-      <div className="container mx-auto px-4 py-8 mt-20">
-        <div className="flex justify-between items-center mb-8">
-          <h1 className="text-3xl font-bold">Studio</h1>
-          <Dialog open={isPublishOpen} onOpenChange={setIsPublishOpen}>
-            <DialogTrigger asChild>
-              <Button>
-                <PlusCircle className="mr-2 h-4 w-4" />
-                Publish Component
-              </Button>
-            </DialogTrigger>
-            <DialogContent className="sm:max-w-[725px]">
-              <DialogHeader>
-                <DialogTitle>Publish New Component</DialogTitle>
-                <DialogDescription>
-                  Paste your component code below. Make sure it follows our
-                  guidelines and includes all necessary imports.
-                </DialogDescription>
-              </DialogHeader>
-              <div className="grid gap-4 py-4">
-                <Textarea
-                  placeholder="Paste your component code here..."
-                  value={componentCode}
-                  onChange={(e) => setComponentCode(e.target.value)}
-                  className="h-[400px] font-mono"
-                />
-                <Button
-                  onClick={handlePublish}
-                  disabled={isPublishing}
-                  className="w-full"
-                >
-                  {isPublishing ? "Publishing..." : "Publish Component"}
-                </Button>
-              </div>
-            </DialogContent>
-          </Dialog>
-        </div>
-
-        <div className="rounded-md border">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Name</TableHead>
-                <TableHead>Created</TableHead>
-                <TableHead className="text-right">Views</TableHead>
-                <TableHead className="text-right">Likes</TableHead>
-                <TableHead className="text-right">Actions</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {initialComponents.map((component) => (
-                <TableRow key={component.id}>
-                  <TableCell className="font-medium">
-                    {component.name}
-                  </TableCell>
-                  <TableCell>
-                    {formatDistanceToNow(new Date(component.created_at), {
-                      addSuffix: true,
-                    })}
-                  </TableCell>
-                  <TableCell className="text-right">
-                    {component.downloads_count}
-                  </TableCell>
-                  <TableCell className="text-right">
-                    {component.likes_count}
-                  </TableCell>
-                  <TableCell className="text-right">
-                    <Button variant="ghost" size="sm">
-                      Edit
-                    </Button>
-                  </TableCell>
-                </TableRow>
-              ))}
-              {initialComponents.length === 0 && (
-                <TableRow>
-                  <TableCell
-                    colSpan={5}
-                    className="h-24 text-center text-muted-foreground"
-                  >
-                    No components published yet
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </div>
-      </div>
-    </>
-  )
-}
diff --git a/apps/web/app/studio/page.tsx b/apps/web/app/studio/page.tsx
index 2d8f2f27..a36bf395 100644
--- a/apps/web/app/studio/page.tsx
+++ b/apps/web/app/studio/page.tsx
@@ -1,29 +1,12 @@
-import { StudioClient } from "./page.client"
-import { supabaseWithAdminAccess } from "@/lib/supabase"
 import { Footer } from "@/components/ui/footer"
 import { unstable_cache } from "next/cache"
 import { redirect } from "next/navigation"
 import { auth } from "@clerk/nextjs/server"
-
-const getCachedUserComponents = unstable_cache(
-  async (userId: string) => {
-    const { data: components } = await supabaseWithAdminAccess
-      .from("components")
-      .select("*")
-      .eq("user_id", userId)
-      .order("created_at", { ascending: false })
-    return components || []
-  },
-  ["user-components"],
-  {
-    revalidate: 30,
-    tags: ["user-components"],
-  },
-)
+import Link from "next/link"
 
 export const metadata = {
-  title: "Studio | 21st.dev - The NPM for Design Engineers",
-  description: "Manage and publish your components on 21st.dev",
+  title: "Creator Studio | 21st.dev - The NPM for Design Engineers",
+  description: "Publish and manage your components on 21st.dev",
 }
 
 export default async function StudioPage() {
@@ -33,12 +16,149 @@ export default async function StudioPage() {
     redirect("/sign-in")
   }
 
-  const components = await getCachedUserComponents(userId)
-
   return (
     <div className="min-h-screen flex flex-col">
       <div className="flex-1">
-        <StudioClient initialComponents={components} />
+        <div className="container max-w-6xl mx-auto px-4 py-12 mt-16">
+          <div className="flex flex-col items-center text-center mb-16">
+            <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+              Welcome to the 21st.dev Creator Studio
+            </h1>
+            <p className="text-xl text-muted-foreground max-w-2xl">
+              Publish your components to 21st.dev and reach thousands of
+              developers
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-8 mb-16">
+            <div className="flex flex-col items-center p-6 rounded-lg border bg-card text-card-foreground shadow">
+              <div className="rounded-full w-12 h-12 flex items-center justify-center bg-primary/10 text-primary mb-4">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="h-6 w-6"
+                >
+                  <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
+                  <path d="M13.73 21a2 2 0 0 1-3.46 0" />
+                </svg>
+              </div>
+              <h3 className="text-xl font-semibold mb-2">
+                Reach a Global Audience
+              </h3>
+              <p className="text-center text-muted-foreground">
+                Your components will be discoverable by thousands of developers
+                worldwide
+              </p>
+            </div>
+
+            <div className="flex flex-col items-center p-6 rounded-lg border bg-card text-card-foreground shadow">
+              <div className="rounded-full w-12 h-12 flex items-center justify-center bg-primary/10 text-primary mb-4">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="h-6 w-6"
+                >
+                  <path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48 2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48 2.83-2.83" />
+                </svg>
+              </div>
+              <h3 className="text-xl font-semibold mb-2">
+                AI-Enhanced Publishing
+              </h3>
+              <p className="text-center text-muted-foreground">
+                Leverage our AI tools to optimize and enhance your components
+              </p>
+            </div>
+
+            <div className="flex flex-col items-center p-6 rounded-lg border bg-card text-card-foreground shadow">
+              <div className="rounded-full w-12 h-12 flex items-center justify-center bg-primary/10 text-primary mb-4">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="h-6 w-6"
+                >
+                  <path d="M12 6V2H8" />
+                  <path d="M5 10H2v4" />
+                  <path d="M2 17.5v.5h4" />
+                  <path d="M15 2h-3" />
+                  <path d="M22 8h-4" />
+                  <path d="M22 14h-3" />
+                  <path d="M18 18h4v4" />
+                  <rect width="12" height="12" x="6" y="6" rx="2" />
+                </svg>
+              </div>
+              <h3 className="text-xl font-semibold mb-2">Usage Analytics</h3>
+              <p className="text-center text-muted-foreground">
+                Track how your components are performing with detailed analytics
+              </p>
+            </div>
+          </div>
+
+          <div className="flex flex-col items-center mb-16">
+            <h2 className="text-3xl font-bold mb-8">How It Works</h2>
+            <ol className="grid md:grid-cols-3 gap-8 w-full">
+              <li className="flex flex-col items-center text-center p-6 rounded-lg border bg-card text-card-foreground shadow">
+                <div className="rounded-full w-8 h-8 flex items-center justify-center bg-primary text-primary-foreground font-bold mb-4">
+                  1
+                </div>
+                <h3 className="text-xl font-semibold mb-2">
+                  Create Your Component
+                </h3>
+                <p className="text-muted-foreground">
+                  Build a high-quality React component using TypeScript and
+                  Tailwind CSS
+                </p>
+              </li>
+              <li className="flex flex-col items-center text-center p-6 rounded-lg border bg-card text-card-foreground shadow">
+                <div className="rounded-full w-8 h-8 flex items-center justify-center bg-primary text-primary-foreground font-bold mb-4">
+                  2
+                </div>
+                <h3 className="text-xl font-semibold mb-2">
+                  Publish to 21st.dev
+                </h3>
+                <p className="text-muted-foreground">
+                  Use our simple publishing flow to submit your component with
+                  proper documentation
+                </p>
+              </li>
+              <li className="flex flex-col items-center text-center p-6 rounded-lg border bg-card text-card-foreground shadow">
+                <div className="rounded-full w-8 h-8 flex items-center justify-center bg-primary text-primary-foreground font-bold mb-4">
+                  3
+                </div>
+                <h3 className="text-xl font-semibold mb-2">
+                  Grow Your Audience
+                </h3>
+                <p className="text-muted-foreground">
+                  Watch your components get discovered, used, and shared by the
+                  community
+                </p>
+              </li>
+            </ol>
+          </div>
+
+          <div className="flex justify-center">
+            <Link
+              href={`/studio/${userId}`}
+              className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-11 px-8"
+            >
+              Go to Your Studio
+            </Link>
+          </div>
+        </div>
       </div>
       <Footer />
     </div>

From 84bd4951b0b84ae11cc796c7caab4a1b728f96ed Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Wed, 2 Apr 2025 16:30:19 +0300
Subject: [PATCH 004/143] better landing

---
 apps/web/app/studio/page.tsx                  | 240 +++++---
 .../features/studio/analytics/analytics.tsx   | 346 ------------
 .../features/studio/content/content-table.tsx | 283 ----------
 .../studio/layout/component-publish-form.tsx  | 139 -----
 .../studio/layout/dashboard-layout.tsx        |  57 --
 .../features/studio/layout/header.tsx         | 103 ----
 .../features/studio/layout/sidebar.tsx        | 165 ------
 .../studio/monetization/monetization.tsx      | 496 ----------------
 .../features/studio/settings/settings.tsx     | 528 ------------------
 9 files changed, 170 insertions(+), 2187 deletions(-)
 delete mode 100644 apps/web/components/features/studio/analytics/analytics.tsx
 delete mode 100644 apps/web/components/features/studio/content/content-table.tsx
 delete mode 100644 apps/web/components/features/studio/layout/component-publish-form.tsx
 delete mode 100644 apps/web/components/features/studio/layout/dashboard-layout.tsx
 delete mode 100644 apps/web/components/features/studio/layout/header.tsx
 delete mode 100644 apps/web/components/features/studio/layout/sidebar.tsx
 delete mode 100644 apps/web/components/features/studio/monetization/monetization.tsx
 delete mode 100644 apps/web/components/features/studio/settings/settings.tsx

diff --git a/apps/web/app/studio/page.tsx b/apps/web/app/studio/page.tsx
index a36bf395..b4f4a608 100644
--- a/apps/web/app/studio/page.tsx
+++ b/apps/web/app/studio/page.tsx
@@ -1,12 +1,14 @@
 import { Footer } from "@/components/ui/footer"
-import { unstable_cache } from "next/cache"
 import { redirect } from "next/navigation"
 import { auth } from "@clerk/nextjs/server"
 import Link from "next/link"
+import { supabaseWithAdminAccess } from "@/lib/supabase"
+import { headers } from "next/headers"
 
 export const metadata = {
   title: "Creator Studio | 21st.dev - The NPM for Design Engineers",
-  description: "Publish and manage your components on 21st.dev",
+  description:
+    "Publish and manage your components on 21st.dev - reach thousands of developers and grow your audience",
 }
 
 export default async function StudioPage() {
@@ -16,149 +18,247 @@ export default async function StudioPage() {
     redirect("/sign-in")
   }
 
+  // Get the user data from Supabase to determine username
+  const { data: userData } = await supabaseWithAdminAccess
+    .from("users")
+    .select("display_username, username")
+    .eq("id", userId)
+    .single()
+
+  // Construct the studio URL using the same logic as header.client.tsx
+  const studioUrl = userData?.display_username
+    ? `/studio/${userData.display_username}`
+    : userData?.username
+      ? `/studio/${userData.username}`
+      : "/studio"
+
   return (
     <div className="min-h-screen flex flex-col">
-      <div className="flex-1">
-        <div className="container max-w-6xl mx-auto px-4 py-12 mt-16">
-          <div className="flex flex-col items-center text-center mb-16">
-            <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
-              Welcome to the 21st.dev Creator Studio
-            </h1>
-            <p className="text-xl text-muted-foreground max-w-2xl">
-              Publish your components to 21st.dev and reach thousands of
-              developers
-            </p>
+      <div className="flex-1 bg-gradient-to-b from-background to-muted/30">
+        {/* Hero Section */}
+        <section className="relative overflow-hidden">
+          <div className="container max-w-6xl mx-auto px-4 pt-20 pb-16">
+            <div className="flex flex-col items-center text-center mb-12">
+              <div className="inline-flex items-center justify-center rounded-full bg-primary/10 text-primary px-3 py-1 text-sm mb-6">
+                <span className="font-medium">Creator Studio</span>
+              </div>
+              <h1 className="text-4xl md:text-6xl font-bold tracking-tight mb-6 bg-clip-text text-transparent bg-gradient-to-r from-[hsl(var(--primary-gradient-start))] to-[hsl(var(--primary-gradient-end))]">
+                Share Your Components
+                <br />
+                with the World
+              </h1>
+              <p className="text-xl text-muted-foreground max-w-2xl mb-8">
+                Join the community of design engineers and publish your UI
+                components to 21st.dev
+              </p>
+              <div className="flex flex-wrap gap-4 justify-center">
+                <Link
+                  href={studioUrl}
+                  className="inline-flex h-11 items-center justify-center rounded-md bg-primary px-8 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+                >
+                  Go to Your Studio
+                </Link>
+                <Link
+                  href="/docs/publishing"
+                  className="inline-flex h-11 items-center justify-center rounded-md border border-input bg-background px-8 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+                >
+                  Publishing Guide
+                </Link>
+              </div>
+            </div>
+
+            {/* Stats */}
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 my-16 max-w-4xl mx-auto">
+              <div className="flex flex-col items-center p-4">
+                <div className="text-3xl md:text-4xl font-bold text-primary mb-1">
+                  5,000+
+                </div>
+                <div className="text-sm text-muted-foreground text-center">
+                  Monthly Users
+                </div>
+              </div>
+              <div className="flex flex-col items-center p-4">
+                <div className="text-3xl md:text-4xl font-bold text-primary mb-1">
+                  200+
+                </div>
+                <div className="text-sm text-muted-foreground text-center">
+                  Components
+                </div>
+              </div>
+              <div className="flex flex-col items-center p-4">
+                <div className="text-3xl md:text-4xl font-bold text-primary mb-1">
+                  50k+
+                </div>
+                <div className="text-sm text-muted-foreground text-center">
+                  Monthly Downloads
+                </div>
+              </div>
+              <div className="flex flex-col items-center p-4">
+                <div className="text-3xl md:text-4xl font-bold text-primary mb-1">
+                  100+
+                </div>
+                <div className="text-sm text-muted-foreground text-center">
+                  Contributors
+                </div>
+              </div>
+            </div>
           </div>
+        </section>
 
-          <div className="grid md:grid-cols-3 gap-8 mb-16">
-            <div className="flex flex-col items-center p-6 rounded-lg border bg-card text-card-foreground shadow">
-              <div className="rounded-full w-12 h-12 flex items-center justify-center bg-primary/10 text-primary mb-4">
+        {/* Features */}
+        <section className="py-16 container max-w-6xl mx-auto px-4">
+          <h2 className="text-3xl font-bold text-center mb-12">
+            Why Publish on 21st.dev?
+          </h2>
+          <div className="grid md:grid-cols-3 gap-8">
+            <div className="flex flex-col rounded-xl border bg-card p-6 shadow-sm transition-all hover:shadow-md">
+              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-md bg-primary/10 text-primary">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
                   viewBox="0 0 24 24"
                   fill="none"
                   stroke="currentColor"
                   strokeWidth="2"
                   strokeLinecap="round"
                   strokeLinejoin="round"
-                  className="h-6 w-6"
                 >
-                  <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
-                  <path d="M13.73 21a2 2 0 0 1-3.46 0" />
+                  <circle cx="12" cy="8" r="6" />
+                  <path d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11" />
                 </svg>
               </div>
-              <h3 className="text-xl font-semibold mb-2">
-                Reach a Global Audience
+              <h3 className="text-xl font-bold mb-2">
+                Recognition & Reputation
               </h3>
-              <p className="text-center text-muted-foreground">
-                Your components will be discoverable by thousands of developers
-                worldwide
+              <p className="text-muted-foreground mb-4">
+                Build your reputation as a design engineer by sharing
+                high-quality components with the community.
               </p>
             </div>
 
-            <div className="flex flex-col items-center p-6 rounded-lg border bg-card text-card-foreground shadow">
-              <div className="rounded-full w-12 h-12 flex items-center justify-center bg-primary/10 text-primary mb-4">
+            <div className="flex flex-col rounded-xl border bg-card p-6 shadow-sm transition-all hover:shadow-md">
+              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-md bg-primary/10 text-primary">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
                   viewBox="0 0 24 24"
                   fill="none"
                   stroke="currentColor"
                   strokeWidth="2"
                   strokeLinecap="round"
                   strokeLinejoin="round"
-                  className="h-6 w-6"
                 >
-                  <path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48 2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48 2.83-2.83" />
+                  <path d="m14 12-8.5 8.5c-.83.83-2.17.83-3 0 0 0 0 0 0 0a2.12 2.12 0 0 1 0-3L11 9" />
+                  <path d="M15 13 9 7l4-4 6 6h3a8 8 0 0 1-7 7z" />
                 </svg>
               </div>
-              <h3 className="text-xl font-semibold mb-2">
-                AI-Enhanced Publishing
-              </h3>
-              <p className="text-center text-muted-foreground">
-                Leverage our AI tools to optimize and enhance your components
+              <h3 className="text-xl font-bold mb-2">AI-Enhanced Visibility</h3>
+              <p className="text-muted-foreground mb-4">
+                Our AI-powered search and recommendation engine helps your
+                components reach the right developers.
               </p>
             </div>
 
-            <div className="flex flex-col items-center p-6 rounded-lg border bg-card text-card-foreground shadow">
-              <div className="rounded-full w-12 h-12 flex items-center justify-center bg-primary/10 text-primary mb-4">
+            <div className="flex flex-col rounded-xl border bg-card p-6 shadow-sm transition-all hover:shadow-md">
+              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-md bg-primary/10 text-primary">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
                   viewBox="0 0 24 24"
                   fill="none"
                   stroke="currentColor"
                   strokeWidth="2"
                   strokeLinecap="round"
                   strokeLinejoin="round"
-                  className="h-6 w-6"
                 >
-                  <path d="M12 6V2H8" />
-                  <path d="M5 10H2v4" />
-                  <path d="M2 17.5v.5h4" />
-                  <path d="M15 2h-3" />
-                  <path d="M22 8h-4" />
-                  <path d="M22 14h-3" />
-                  <path d="M18 18h4v4" />
-                  <rect width="12" height="12" x="6" y="6" rx="2" />
+                  <path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48 2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48 2.83-2.83" />
                 </svg>
               </div>
-              <h3 className="text-xl font-semibold mb-2">Usage Analytics</h3>
-              <p className="text-center text-muted-foreground">
-                Track how your components are performing with detailed analytics
+              <h3 className="text-xl font-bold mb-2">Detailed Analytics</h3>
+              <p className="text-muted-foreground mb-4">
+                Track how your components are performing with detailed usage
+                statistics and user feedback.
               </p>
             </div>
           </div>
+        </section>
 
-          <div className="flex flex-col items-center mb-16">
-            <h2 className="text-3xl font-bold mb-8">How It Works</h2>
-            <ol className="grid md:grid-cols-3 gap-8 w-full">
-              <li className="flex flex-col items-center text-center p-6 rounded-lg border bg-card text-card-foreground shadow">
-                <div className="rounded-full w-8 h-8 flex items-center justify-center bg-primary text-primary-foreground font-bold mb-4">
+        {/* How it Works */}
+        <section className="py-16 bg-muted/50">
+          <div className="container max-w-6xl mx-auto px-4">
+            <h2 className="text-3xl font-bold text-center mb-4">
+              How It Works
+            </h2>
+            <p className="text-center text-muted-foreground max-w-2xl mx-auto mb-12">
+              Publishing your components to 21st.dev is simple and
+              straightforward
+            </p>
+            <div className="grid md:grid-cols-3 gap-8">
+              <div className="relative flex flex-col items-center text-center p-6">
+                <div className="absolute -top-4 left-1/2 -translate-x-1/2 rounded-full w-8 h-8 flex items-center justify-center bg-primary text-primary-foreground font-bold">
                   1
                 </div>
-                <h3 className="text-xl font-semibold mb-2">
+                <h3 className="text-xl font-bold mt-4 mb-2">
                   Create Your Component
                 </h3>
                 <p className="text-muted-foreground">
                   Build a high-quality React component using TypeScript and
                   Tailwind CSS
                 </p>
-              </li>
-              <li className="flex flex-col items-center text-center p-6 rounded-lg border bg-card text-card-foreground shadow">
-                <div className="rounded-full w-8 h-8 flex items-center justify-center bg-primary text-primary-foreground font-bold mb-4">
+              </div>
+              <div className="relative flex flex-col items-center text-center p-6">
+                <div className="absolute -top-4 left-1/2 -translate-x-1/2 rounded-full w-8 h-8 flex items-center justify-center bg-primary text-primary-foreground font-bold">
                   2
                 </div>
-                <h3 className="text-xl font-semibold mb-2">
+                <h3 className="text-xl font-bold mt-4 mb-2">
                   Publish to 21st.dev
                 </h3>
                 <p className="text-muted-foreground">
                   Use our simple publishing flow to submit your component with
                   proper documentation
                 </p>
-              </li>
-              <li className="flex flex-col items-center text-center p-6 rounded-lg border bg-card text-card-foreground shadow">
-                <div className="rounded-full w-8 h-8 flex items-center justify-center bg-primary text-primary-foreground font-bold mb-4">
+              </div>
+              <div className="relative flex flex-col items-center text-center p-6">
+                <div className="absolute -top-4 left-1/2 -translate-x-1/2 rounded-full w-8 h-8 flex items-center justify-center bg-primary text-primary-foreground font-bold">
                   3
                 </div>
-                <h3 className="text-xl font-semibold mb-2">
+                <h3 className="text-xl font-bold mt-4 mb-2">
                   Grow Your Audience
                 </h3>
                 <p className="text-muted-foreground">
                   Watch your components get discovered, used, and shared by the
                   community
                 </p>
-              </li>
-            </ol>
+              </div>
+            </div>
           </div>
+        </section>
 
-          <div className="flex justify-center">
-            <Link
-              href={`/studio/${userId}`}
-              className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-11 px-8"
-            >
-              Go to Your Studio
-            </Link>
+        {/* CTA */}
+        <section className="py-16 container max-w-6xl mx-auto px-4">
+          <div className="rounded-xl border bg-card p-8 shadow-sm">
+            <div className="flex flex-col md:flex-row justify-between items-center gap-6">
+              <div>
+                <h2 className="text-2xl font-bold mb-2">
+                  Ready to share your components?
+                </h2>
+                <p className="text-muted-foreground">
+                  Start publishing your components and be part of the 21st.dev
+                  community
+                </p>
+              </div>
+              <Link
+                href={studioUrl}
+                className="inline-flex h-11 items-center justify-center rounded-md bg-primary px-8 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+              >
+                Go to Your Studio
+              </Link>
+            </div>
           </div>
-        </div>
+        </section>
       </div>
       <Footer />
     </div>
diff --git a/apps/web/components/features/studio/analytics/analytics.tsx b/apps/web/components/features/studio/analytics/analytics.tsx
deleted file mode 100644
index 42852ae9..00000000
--- a/apps/web/components/features/studio/analytics/analytics.tsx
+++ /dev/null
@@ -1,346 +0,0 @@
-"use client"
-
-import { User } from "@/types/global"
-import { Component } from "@/types/component"
-import {
-  LineChart,
-  BarChart,
-  Line,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
-  PieChart,
-  Pie,
-  Cell,
-} from "recharts"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-import { Button } from "@/components/ui/button"
-import {
-  ChevronDown,
-  Download,
-  TrendingUp,
-  Eye,
-  Download as DownloadIcon,
-  Heart,
-  ArrowUpRight,
-  ArrowDownRight,
-} from "lucide-react"
-
-interface StudioAnalyticsProps {
-  user: User
-  components: Component[]
-}
-
-export function StudioAnalytics({
-  user,
-  components = [],
-}: StudioAnalyticsProps) {
-  // Mock data for now
-  const viewsData = [
-    { name: "Jan", views: 400 },
-    { name: "Feb", views: 300 },
-    { name: "Mar", views: 600 },
-    { name: "Apr", views: 800 },
-    { name: "May", views: 1000 },
-    { name: "Jun", views: 1200 },
-    { name: "Jul", views: 1400 },
-  ]
-
-  const downloadsData = [
-    { name: "Jan", downloads: 100 },
-    { name: "Feb", downloads: 200 },
-    { name: "Mar", downloads: 300 },
-    { name: "Apr", downloads: 400 },
-    { name: "May", downloads: 600 },
-    { name: "Jun", downloads: 800 },
-    { name: "Jul", downloads: 900 },
-  ]
-
-  const componentPopularity =
-    components.length > 0
-      ? components
-          .map((c) => ({
-            name: c.name,
-            views: c.views || Math.floor(Math.random() * 1000),
-            downloads: c.downloads || Math.floor(Math.random() * 500),
-          }))
-          .sort((a, b) => b.views - a.views)
-          .slice(0, 5)
-      : [
-          { name: "Modal Dialog", views: 1200, downloads: 450 },
-          { name: "DataTable", views: 950, downloads: 380 },
-          { name: "Notification", views: 820, downloads: 320 },
-          { name: "Card", views: 700, downloads: 280 },
-          { name: "Form", views: 650, downloads: 260 },
-        ]
-
-  const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884D8"]
-
-  return (
-    <div className="space-y-6">
-      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-        <div>
-          <h2 className="text-2xl font-bold tracking-tight">Analytics</h2>
-          <p className="text-muted-foreground">
-            Track the performance of your components
-          </p>
-        </div>
-        <div className="flex items-center gap-2">
-          <Select defaultValue="30days">
-            <SelectTrigger className="w-[180px]">
-              <SelectValue placeholder="Select period" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="7days">Last 7 days</SelectItem>
-              <SelectItem value="30days">Last 30 days</SelectItem>
-              <SelectItem value="3months">Last 3 months</SelectItem>
-              <SelectItem value="year">Last year</SelectItem>
-            </SelectContent>
-          </Select>
-          <Button variant="outline" size="icon">
-            <Download className="h-4 w-4" />
-          </Button>
-        </div>
-      </div>
-
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Total Views</CardTitle>
-            <Eye className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">5,231</div>
-            <div className="flex items-center text-xs text-muted-foreground">
-              <TrendingUp className="mr-1 h-3 w-3 text-green-500" />
-              <span className="text-green-500 font-medium">+12.5%</span> from
-              last month
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              Total Downloads
-            </CardTitle>
-            <DownloadIcon className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">2,350</div>
-            <div className="flex items-center text-xs text-muted-foreground">
-              <TrendingUp className="mr-1 h-3 w-3 text-green-500" />
-              <span className="text-green-500 font-medium">+18.2%</span> from
-              last month
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Favorites</CardTitle>
-            <Heart className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">843</div>
-            <div className="flex items-center text-xs text-muted-foreground">
-              <ArrowUpRight className="mr-1 h-3 w-3 text-green-500" />
-              <span className="text-green-500 font-medium">+7.4%</span> from
-              last month
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              Conversion Rate
-            </CardTitle>
-            <ArrowDownRight className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">44.9%</div>
-            <div className="flex items-center text-xs text-muted-foreground">
-              <ArrowDownRight className="mr-1 h-3 w-3 text-red-500" />
-              <span className="text-red-500 font-medium">-2.3%</span> from last
-              month
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      <Tabs defaultValue="overview" className="space-y-4">
-        <TabsList>
-          <TabsTrigger value="overview">Overview</TabsTrigger>
-          <TabsTrigger value="components">Components</TabsTrigger>
-          <TabsTrigger value="audience">Audience</TabsTrigger>
-        </TabsList>
-        <TabsContent value="overview" className="space-y-4">
-          <div className="grid gap-4 md:grid-cols-2">
-            <Card>
-              <CardHeader>
-                <CardTitle>Views Over Time</CardTitle>
-                <CardDescription>
-                  Component views in the past 6 months
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="pt-2">
-                <div className="h-[300px]">
-                  <ResponsiveContainer width="100%" height="100%">
-                    <LineChart data={viewsData}>
-                      <CartesianGrid strokeDasharray="3 3" />
-                      <XAxis dataKey="name" />
-                      <YAxis />
-                      <Tooltip />
-                      <Legend />
-                      <Line
-                        type="monotone"
-                        dataKey="views"
-                        stroke="#3b82f6"
-                        activeDot={{ r: 8 }}
-                        strokeWidth={2}
-                      />
-                    </LineChart>
-                  </ResponsiveContainer>
-                </div>
-              </CardContent>
-            </Card>
-            <Card>
-              <CardHeader>
-                <CardTitle>Downloads Over Time</CardTitle>
-                <CardDescription>
-                  Component downloads in the past 6 months
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="pt-2">
-                <div className="h-[300px]">
-                  <ResponsiveContainer width="100%" height="100%">
-                    <BarChart data={downloadsData}>
-                      <CartesianGrid strokeDasharray="3 3" />
-                      <XAxis dataKey="name" />
-                      <YAxis />
-                      <Tooltip />
-                      <Legend />
-                      <Bar dataKey="downloads" fill="#10b981" />
-                    </BarChart>
-                  </ResponsiveContainer>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
-            <Card className="md:col-span-5">
-              <CardHeader>
-                <CardTitle>Most Popular Components</CardTitle>
-                <CardDescription>
-                  Top 5 components by views and downloads
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="h-[300px]">
-                  <ResponsiveContainer width="100%" height="100%">
-                    <BarChart
-                      data={componentPopularity}
-                      layout="vertical"
-                      margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
-                    >
-                      <CartesianGrid strokeDasharray="3 3" />
-                      <XAxis type="number" />
-                      <YAxis type="category" dataKey="name" />
-                      <Tooltip />
-                      <Legend />
-                      <Bar dataKey="views" fill="#3b82f6" name="Views" />
-                      <Bar
-                        dataKey="downloads"
-                        fill="#10b981"
-                        name="Downloads"
-                      />
-                    </BarChart>
-                  </ResponsiveContainer>
-                </div>
-              </CardContent>
-            </Card>
-            <Card className="md:col-span-2">
-              <CardHeader>
-                <CardTitle>Distribution</CardTitle>
-                <CardDescription>Views by component type</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="h-[300px]">
-                  <ResponsiveContainer width="100%" height="100%">
-                    <PieChart>
-                      <Pie
-                        data={componentPopularity}
-                        cx="50%"
-                        cy="50%"
-                        labelLine={false}
-                        outerRadius={80}
-                        fill="#8884d8"
-                        dataKey="views"
-                        nameKey="name"
-                        label={(entry) => entry.name}
-                      >
-                        {componentPopularity.map((entry, index) => (
-                          <Cell
-                            key={`cell-${index}`}
-                            fill={COLORS[index % COLORS.length]}
-                          />
-                        ))}
-                      </Pie>
-                      <Tooltip />
-                    </PieChart>
-                  </ResponsiveContainer>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-        </TabsContent>
-        <TabsContent value="components">
-          <Card>
-            <CardHeader>
-              <CardTitle>Component Performance</CardTitle>
-              <CardDescription>
-                Detailed stats for individual components
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <p className="text-sm text-muted-foreground">
-                Select a component to view detailed analytics.
-              </p>
-            </CardContent>
-          </Card>
-        </TabsContent>
-        <TabsContent value="audience">
-          <Card>
-            <CardHeader>
-              <CardTitle>Audience Insights</CardTitle>
-              <CardDescription>
-                Learn about your component users
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <p className="text-sm text-muted-foreground">
-                Detailed audience analytics will be available soon.
-              </p>
-            </CardContent>
-          </Card>
-        </TabsContent>
-      </Tabs>
-    </div>
-  )
-}
diff --git a/apps/web/components/features/studio/content/content-table.tsx b/apps/web/components/features/studio/content/content-table.tsx
deleted file mode 100644
index f9c7304d..00000000
--- a/apps/web/components/features/studio/content/content-table.tsx
+++ /dev/null
@@ -1,283 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import { User } from "@/types/global"
-import { Component } from "@/types/component"
-import { cn } from "@/lib/utils"
-import { formatDistanceToNow } from "date-fns"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-import { Input } from "@/components/ui/input"
-import {
-  MoreVertical,
-  Search,
-  Edit,
-  Eye,
-  Trash2,
-  ArrowUpDown,
-  BarChart2,
-  Code2,
-  Link as LinkIcon,
-} from "lucide-react"
-import { Badge } from "@/components/ui/badge"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog"
-import { ComponentPublishForm } from "./component-publish-form"
-import { Button } from "@/components/ui/button"
-import Link from "next/link"
-
-interface StudioContentTableProps {
-  user: User
-  components: Component[]
-}
-
-export function StudioContentTable({
-  user,
-  components = [],
-}: StudioContentTableProps) {
-  const [searchQuery, setSearchQuery] = useState("")
-  const [sortBy, setSortBy] = useState<"date" | "name" | "popularity">("date")
-  const [editComponent, setEditComponent] = useState<Component | null>(null)
-
-  // Filter components based on search
-  const filteredComponents = components.filter(
-    (component) =>
-      component.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      component.description.toLowerCase().includes(searchQuery.toLowerCase()),
-  )
-
-  // Sort components
-  const sortedComponents = [...filteredComponents].sort((a, b) => {
-    if (sortBy === "date") {
-      return new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
-    } else if (sortBy === "name") {
-      return a.name.localeCompare(b.name)
-    } else {
-      // Sort by popularity (views or downloads)
-      return (b.views || 0) - (a.views || 0)
-    }
-  })
-
-  // Get status badge
-  const getStatusBadge = (status: string) => {
-    switch (status.toLowerCase()) {
-      case "published":
-        return (
-          <Badge className="bg-green-500/10 text-green-500 hover:bg-green-500/20">
-            Published
-          </Badge>
-        )
-      case "draft":
-        return <Badge variant="outline">Draft</Badge>
-      case "review":
-        return (
-          <Badge className="bg-yellow-500/10 text-yellow-500 hover:bg-yellow-500/20">
-            In Review
-          </Badge>
-        )
-      default:
-        return <Badge variant="outline">{status}</Badge>
-    }
-  }
-
-  const copyComponentUrl = (slug: string) => {
-    navigator.clipboard.writeText(`${window.location.origin}/component/${slug}`)
-  }
-
-  return (
-    <div className="space-y-4">
-      <div className="flex flex-col sm:flex-row gap-4 justify-between">
-        <div className="relative w-full sm:w-80">
-          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-          <Input
-            type="search"
-            placeholder="Search components..."
-            className="pl-8"
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-          />
-        </div>
-        <div className="flex items-center gap-2">
-          <Select
-            value={sortBy}
-            onValueChange={(value) => setSortBy(value as any)}
-          >
-            <SelectTrigger className="w-40">
-              <SelectValue placeholder="Sort by" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="date">Recent</SelectItem>
-              <SelectItem value="name">Name</SelectItem>
-              <SelectItem value="popularity">Popularity</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-
-      {components.length === 0 ? (
-        <div className="rounded-md border border-dashed p-12 text-center">
-          <h3 className="text-lg font-medium mb-2">No components yet</h3>
-          <p className="text-muted-foreground mb-6">
-            You haven't published any components yet. Get started by creating
-            your first component.
-          </p>
-          <Dialog>
-            <DialogTrigger asChild>
-              <Button>Publish Your First Component</Button>
-            </DialogTrigger>
-            <DialogContent className="sm:max-w-[725px]">
-              <DialogHeader>
-                <DialogTitle>Publish Component</DialogTitle>
-                <DialogDescription>
-                  Paste your component code below. Make sure it follows our
-                  guidelines and includes all necessary imports.
-                </DialogDescription>
-              </DialogHeader>
-              <ComponentPublishForm user={user} />
-            </DialogContent>
-          </Dialog>
-        </div>
-      ) : (
-        <div className="rounded-md border">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead className="w-[250px]">
-                  <div className="flex items-center space-x-1">
-                    <span>Component</span>
-                    <ArrowUpDown className="h-3 w-3" />
-                  </div>
-                </TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>Created</TableHead>
-                <TableHead className="text-right">Views</TableHead>
-                <TableHead className="text-right">Downloads</TableHead>
-                <TableHead className="w-[100px]"></TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {sortedComponents.map((component) => (
-                <TableRow key={component.id}>
-                  <TableCell>
-                    <div className="flex flex-col">
-                      <span className="font-medium">{component.name}</span>
-                      <span className="text-xs text-muted-foreground truncate max-w-[230px]">
-                        {component.description || "No description"}
-                      </span>
-                    </div>
-                  </TableCell>
-                  <TableCell>
-                    {getStatusBadge(component.status || "published")}
-                  </TableCell>
-                  <TableCell>
-                    <span className="text-xs text-muted-foreground">
-                      {formatDistanceToNow(new Date(component.created_at), {
-                        addSuffix: true,
-                      })}
-                    </span>
-                  </TableCell>
-                  <TableCell className="text-right">
-                    {component.views || 0}
-                  </TableCell>
-                  <TableCell className="text-right">
-                    {component.downloads || 0}
-                  </TableCell>
-                  <TableCell>
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button variant="ghost" size="icon">
-                          <MoreVertical className="h-4 w-4" />
-                          <span className="sr-only">More options</span>
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem asChild>
-                          <Link
-                            href={`/component/${component.slug}`}
-                            className="flex items-center cursor-pointer"
-                          >
-                            <Eye className="mr-2 h-4 w-4" />
-                            View Component
-                          </Link>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                          <Dialog>
-                            <DialogTrigger className="flex items-center w-full cursor-pointer">
-                              <Edit className="mr-2 h-4 w-4" />
-                              Edit Component
-                            </DialogTrigger>
-                            <DialogContent className="sm:max-w-[725px]">
-                              <DialogHeader>
-                                <DialogTitle>Edit Component</DialogTitle>
-                                <DialogDescription>
-                                  Update your component details and code.
-                                </DialogDescription>
-                              </DialogHeader>
-                              <ComponentPublishForm
-                                user={user}
-                                existingComponent={component}
-                              />
-                            </DialogContent>
-                          </Dialog>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                          <Code2 className="mr-2 h-4 w-4" />
-                          View Source
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                          <BarChart2 className="mr-2 h-4 w-4" />
-                          View Analytics
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem
-                          onClick={() => copyComponentUrl(component.slug)}
-                        >
-                          <LinkIcon className="mr-2 h-4 w-4" />
-                          Copy Link
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem className="text-destructive focus:text-destructive">
-                          <Trash2 className="mr-2 h-4 w-4" />
-                          Delete
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
-      )}
-    </div>
-  )
-}
diff --git a/apps/web/components/features/studio/layout/component-publish-form.tsx b/apps/web/components/features/studio/layout/component-publish-form.tsx
deleted file mode 100644
index 86346723..00000000
--- a/apps/web/components/features/studio/layout/component-publish-form.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import { User } from "@/types/global"
-import { Component } from "@/types/component"
-import { Button } from "@/components/ui/button"
-import { Textarea } from "@/components/ui/textarea"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { useToast } from "@/hooks/use-toast"
-
-interface ComponentPublishFormProps {
-  user: User
-  existingComponent?: Component
-  onSuccess?: () => void
-}
-
-export function ComponentPublishForm({
-  user,
-  existingComponent,
-  onSuccess,
-}: ComponentPublishFormProps) {
-  const { toast } = useToast()
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [formData, setFormData] = useState({
-    name: existingComponent?.name || "",
-    description: existingComponent?.description || "",
-    code: existingComponent?.code || "",
-    tags: existingComponent?.tags?.join(", ") || "",
-  })
-
-  const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => {
-    const { name, value } = e.target
-    setFormData((prev) => ({ ...prev, [name]: value }))
-  }
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-
-    if (!formData.name || !formData.code) {
-      toast({
-        title: "Missing required fields",
-        description: "Please provide a name and code for your component.",
-        variant: "destructive",
-      })
-      return
-    }
-
-    setIsSubmitting(true)
-
-    try {
-      // Call API to publish/update component
-      toast({
-        title: "Success!",
-        description: existingComponent
-          ? "Your component has been updated."
-          : "Your component has been published.",
-      })
-
-      // Call success callback if provided
-      if (onSuccess) {
-        onSuccess()
-      }
-    } catch (error) {
-      toast({
-        title: "Something went wrong.",
-        description: "Please try again later.",
-        variant: "destructive",
-      })
-    } finally {
-      setIsSubmitting(false)
-    }
-  }
-
-  return (
-    <form onSubmit={handleSubmit} className="space-y-4">
-      <div className="space-y-2">
-        <Label htmlFor="name">Component Name</Label>
-        <Input
-          id="name"
-          name="name"
-          value={formData.name}
-          onChange={handleChange}
-          placeholder="e.g., Animated Button"
-          required
-        />
-      </div>
-
-      <div className="space-y-2">
-        <Label htmlFor="description">Description</Label>
-        <Textarea
-          id="description"
-          name="description"
-          value={formData.description}
-          onChange={handleChange}
-          placeholder="Describe your component and its usage"
-          rows={2}
-        />
-      </div>
-
-      <div className="space-y-2">
-        <Label htmlFor="tags">Tags (comma separated)</Label>
-        <Input
-          id="tags"
-          name="tags"
-          value={formData.tags}
-          onChange={handleChange}
-          placeholder="e.g., button, animation, ui"
-        />
-      </div>
-
-      <div className="space-y-2">
-        <Label htmlFor="code">Component Code</Label>
-        <Textarea
-          id="code"
-          name="code"
-          value={formData.code}
-          onChange={handleChange}
-          placeholder="Paste your component code here"
-          rows={12}
-          className="font-mono text-sm"
-          required
-        />
-      </div>
-
-      <div className="flex justify-end">
-        <Button type="submit" disabled={isSubmitting}>
-          {isSubmitting
-            ? "Processing..."
-            : existingComponent
-              ? "Update Component"
-              : "Publish Component"}
-        </Button>
-      </div>
-    </form>
-  )
-}
diff --git a/apps/web/components/features/studio/layout/dashboard-layout.tsx b/apps/web/components/features/studio/layout/dashboard-layout.tsx
deleted file mode 100644
index 66cfac78..00000000
--- a/apps/web/components/features/studio/layout/dashboard-layout.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import Link from "next/link"
-import { usePathname } from "next/navigation"
-import { User } from "@/types/global"
-import { Tables } from "@/types/supabase"
-import { StudioSidebar } from "./studio-sidebar"
-import { StudioHeader } from "./studio-header"
-import { StudioContentTable } from "./studio-content-table"
-import { StudioAnalytics } from "./studio-analytics"
-import { StudioMonetization } from "./studio-monetization"
-import { StudioSettings } from "./studio-settings"
-import { Footer } from "@/components/ui/footer"
-
-interface StudioDashboardLayoutProps {
-  user: User
-  components: Tables<"components">[]
-  activeTab: "content" | "analytics" | "monetization" | "settings"
-}
-
-export function StudioDashboardLayout({
-  user,
-  components,
-  activeTab,
-}: StudioDashboardLayoutProps) {
-  const pathname = usePathname()
-
-  // Determine which tab content to show
-  const renderTabContent = () => {
-    switch (activeTab) {
-      case "content":
-        return <StudioContentTable components={components} user={user} />
-      case "analytics":
-        return <StudioAnalytics user={user} />
-      case "monetization":
-        return <StudioMonetization user={user} />
-      case "settings":
-        return <StudioSettings user={user} />
-      default:
-        return <StudioContentTable components={components} user={user} />
-    }
-  }
-
-  return (
-    <div className="min-h-screen flex flex-col">
-      <StudioHeader user={user} />
-      <div className="flex flex-1">
-        <StudioSidebar user={user} activeTab={activeTab} />
-        <main className="flex-1 pt-16 pb-12 overflow-y-auto">
-          <div className="px-6 py-8">{renderTabContent()}</div>
-        </main>
-      </div>
-      <Footer />
-    </div>
-  )
-}
diff --git a/apps/web/components/features/studio/layout/header.tsx b/apps/web/components/features/studio/layout/header.tsx
deleted file mode 100644
index 5e09c861..00000000
--- a/apps/web/components/features/studio/layout/header.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-"use client"
-
-import Link from "next/link"
-import { usePathname } from "next/navigation"
-import { User } from "@/types/global"
-import { ModeToggle } from "@/components/mode-toggle"
-import { UserNav } from "@/components/user-nav"
-import { Search } from "lucide-react"
-import { Input } from "@/components/ui/input"
-import { cn } from "@/lib/utils"
-
-interface StudioHeaderProps {
-  user: User
-}
-
-export function StudioHeader({ user }: StudioHeaderProps) {
-  const pathname = usePathname()
-
-  return (
-    <header className="h-16 border-b border-border sticky top-0 z-50 bg-background flex items-center justify-between px-4 md:px-6">
-      <div className="flex items-center">
-        <Link href="/" className="flex items-center gap-2 mr-8">
-          <img
-            src="/logo.svg"
-            alt="21st.dev"
-            width={30}
-            height={30}
-            className="dark:invert"
-          />
-          <span className="font-semibold text-lg hidden md:inline-block">
-            21st.dev <span className="text-primary">Studio</span>
-          </span>
-        </Link>
-
-        <div className="hidden lg:flex items-center gap-4">
-          <Link
-            href="/studio/dashboard"
-            className={cn(
-              "text-sm font-medium transition-colors hover:text-primary",
-              pathname.includes("/studio/dashboard") &&
-                !pathname.includes("/analytics") &&
-                !pathname.includes("/monetization") &&
-                !pathname.includes("/settings")
-                ? "text-primary"
-                : "text-muted-foreground",
-            )}
-          >
-            Dashboard
-          </Link>
-          <Link
-            href="/studio/dashboard/analytics"
-            className={cn(
-              "text-sm font-medium transition-colors hover:text-primary",
-              pathname.includes("/analytics")
-                ? "text-primary"
-                : "text-muted-foreground",
-            )}
-          >
-            Analytics
-          </Link>
-          <Link
-            href="/studio/dashboard/monetization"
-            className={cn(
-              "text-sm font-medium transition-colors hover:text-primary",
-              pathname.includes("/monetization")
-                ? "text-primary"
-                : "text-muted-foreground",
-            )}
-          >
-            Monetization
-          </Link>
-          <Link
-            href="/studio/dashboard/settings"
-            className={cn(
-              "text-sm font-medium transition-colors hover:text-primary",
-              pathname.includes("/settings")
-                ? "text-primary"
-                : "text-muted-foreground",
-            )}
-          >
-            Settings
-          </Link>
-        </div>
-      </div>
-
-      <div className="flex items-center gap-4">
-        <div className="relative hidden md:flex items-center">
-          <Search className="absolute left-2.5 h-4 w-4 text-muted-foreground" />
-          <Input
-            type="search"
-            placeholder="Search components..."
-            className="w-64 pl-8 rounded-full bg-muted"
-          />
-        </div>
-
-        <div className="flex items-center gap-2">
-          <ModeToggle />
-          <UserNav user={user} />
-        </div>
-      </div>
-    </header>
-  )
-}
diff --git a/apps/web/components/features/studio/layout/sidebar.tsx b/apps/web/components/features/studio/layout/sidebar.tsx
deleted file mode 100644
index 652e630e..00000000
--- a/apps/web/components/features/studio/layout/sidebar.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-"use client"
-
-import Link from "next/link"
-import { usePathname } from "next/navigation"
-import { User } from "@/types/global"
-import { UserAvatar } from "@/components/ui/user-avatar"
-import { cn } from "@/lib/utils"
-import {
-  LayoutGrid,
-  BarChart2,
-  DollarSign,
-  Settings,
-  PlusCircle,
-  Home,
-  BookOpen,
-} from "lucide-react"
-import { Button } from "@/components/ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog"
-import { ComponentPublishForm } from "./component-publish-form"
-import { useState } from "react"
-
-interface StudioSidebarProps {
-  user: User
-  activeTab: "content" | "analytics" | "monetization" | "settings"
-}
-
-export function StudioSidebar({ user, activeTab }: StudioSidebarProps) {
-  const [isPublishDialogOpen, setIsPublishDialogOpen] = useState(false)
-
-  // Navigation items
-  const navItems = [
-    {
-      name: "Content",
-      href: "/studio/dashboard",
-      icon: LayoutGrid,
-      active: activeTab === "content",
-    },
-    {
-      name: "Analytics",
-      href: "/studio/dashboard/analytics",
-      icon: BarChart2,
-      active: activeTab === "analytics",
-    },
-    {
-      name: "Monetization",
-      href: "/studio/dashboard/monetization",
-      icon: DollarSign,
-      active: activeTab === "monetization",
-    },
-    {
-      name: "Settings",
-      href: "/studio/dashboard/settings",
-      icon: Settings,
-      active: activeTab === "settings",
-    },
-  ]
-
-  // Utility links
-  const utilityLinks = [
-    {
-      name: "Home",
-      href: "/",
-      icon: Home,
-    },
-    {
-      name: "Documentation",
-      href: "/docs",
-      icon: BookOpen,
-    },
-  ]
-
-  return (
-    <aside className="w-64 bg-background border-r border-border flex-shrink-0 h-[calc(100vh-4rem)] sticky top-16">
-      <div className="h-full flex flex-col">
-        <div className="p-6">
-          <Dialog
-            open={isPublishDialogOpen}
-            onOpenChange={setIsPublishDialogOpen}
-          >
-            <DialogTrigger asChild>
-              <Button className="w-full" size="lg">
-                <PlusCircle className="mr-2 h-4 w-4" />
-                New Component
-              </Button>
-            </DialogTrigger>
-            <DialogContent className="sm:max-w-[725px]">
-              <DialogHeader>
-                <DialogTitle>Publish New Component</DialogTitle>
-                <DialogDescription>
-                  Paste your component code below. Make sure it follows our
-                  guidelines and includes all necessary imports.
-                </DialogDescription>
-              </DialogHeader>
-              <ComponentPublishForm
-                user={user}
-                onSuccess={() => setIsPublishDialogOpen(false)}
-              />
-            </DialogContent>
-          </Dialog>
-        </div>
-
-        <div className="p-3 px-4 flex items-center gap-3 border-y border-border">
-          <UserAvatar
-            src={user.display_image_url || user.image_url || "/placeholder.svg"}
-            alt={user.display_name || user.name || ""}
-            size={40}
-          />
-          <div className="overflow-hidden">
-            <p className="text-sm font-medium truncate">
-              {user.display_name || user.name || user.username}
-            </p>
-            <p className="text-xs text-muted-foreground truncate">
-              @{user.display_username || user.username}
-            </p>
-          </div>
-        </div>
-
-        <nav className="flex-1 overflow-y-auto py-3">
-          <div className="space-y-1 px-3">
-            {navItems.map((item) => (
-              <Link
-                key={item.name}
-                href={item.href}
-                className={cn(
-                  "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium",
-                  item.active
-                    ? "bg-accent text-accent-foreground"
-                    : "text-foreground/70 hover:bg-accent/50 hover:text-foreground",
-                )}
-              >
-                <item.icon className="h-5 w-5" />
-                <span>{item.name}</span>
-              </Link>
-            ))}
-          </div>
-
-          <div className="mt-6 pt-6 border-t border-border">
-            <div className="px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
-              Quick Links
-            </div>
-            <div className="space-y-1 px-3">
-              {utilityLinks.map((item) => (
-                <Link
-                  key={item.name}
-                  href={item.href}
-                  className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-foreground/70 hover:bg-accent/50 hover:text-foreground"
-                >
-                  <item.icon className="h-5 w-5" />
-                  <span>{item.name}</span>
-                </Link>
-              ))}
-            </div>
-          </div>
-        </nav>
-      </div>
-    </aside>
-  )
-}
diff --git a/apps/web/components/features/studio/monetization/monetization.tsx b/apps/web/components/features/studio/monetization/monetization.tsx
deleted file mode 100644
index f2deae0a..00000000
--- a/apps/web/components/features/studio/monetization/monetization.tsx
+++ /dev/null
@@ -1,496 +0,0 @@
-"use client"
-
-import { User } from "@/types/global"
-import { Component } from "@/types/component"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { Progress } from "@/components/ui/progress"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import {
-  LineChart,
-  Line,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
-} from "recharts"
-import {
-  CreditCard,
-  Download,
-  Users,
-  ChevronsUpDown,
-  DollarSign,
-  Wallet,
-  Landmark,
-  FileText,
-  CheckCircle2,
-  AlertCircle,
-} from "lucide-react"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-
-interface StudioMonetizationProps {
-  user: User
-  components: Component[]
-}
-
-export function StudioMonetization({
-  user,
-  components = [],
-}: StudioMonetizationProps) {
-  // Mock data for now
-  const earningsData = [
-    { month: "Jan", earnings: 0 },
-    { month: "Feb", earnings: 0 },
-    { month: "Mar", earnings: 0 },
-    { month: "Apr", earnings: 50 },
-    { month: "May", earnings: 120 },
-    { month: "Jun", earnings: 210 },
-    { month: "Jul", earnings: 280 },
-  ]
-
-  const transactionsData = [
-    {
-      id: 1,
-      date: "2023-07-01",
-      amount: 120.5,
-      status: "completed",
-      description: "Premium component sales",
-    },
-    {
-      id: 2,
-      date: "2023-06-15",
-      amount: 85.25,
-      status: "completed",
-      description: "Component royalties",
-    },
-    {
-      id: 3,
-      date: "2023-06-01",
-      amount: 75.0,
-      status: "completed",
-      description: "Premium component sales",
-    },
-    {
-      id: 4,
-      date: "2023-05-15",
-      amount: 50.0,
-      status: "completed",
-      description: "Component royalties",
-    },
-  ]
-
-  const pricingTiers = [
-    {
-      name: "Basic",
-      description: "For new component authors",
-      features: [
-        "Publish up to 10 components",
-        "Basic analytics",
-        "80% revenue share",
-        "Community support",
-      ],
-      current: true,
-    },
-    {
-      name: "Pro",
-      description: "For established authors",
-      price: "$19/month",
-      features: [
-        "Unlimited components",
-        "Advanced analytics",
-        "85% revenue share",
-        "Priority support",
-        "Featured placement",
-      ],
-      current: false,
-    },
-    {
-      name: "Enterprise",
-      description: "For teams and businesses",
-      price: "Contact us",
-      features: [
-        "Custom component branding",
-        "Team management",
-        "90% revenue share",
-        "Dedicated support",
-        "Custom integration options",
-      ],
-      current: false,
-    },
-  ]
-
-  return (
-    <div className="space-y-6">
-      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-        <div>
-          <h2 className="text-2xl font-bold tracking-tight">Monetization</h2>
-          <p className="text-muted-foreground">
-            Manage your earnings and payment methods
-          </p>
-        </div>
-      </div>
-
-      <Tabs defaultValue="overview" className="space-y-4">
-        <TabsList>
-          <TabsTrigger value="overview">Overview</TabsTrigger>
-          <TabsTrigger value="earnings">Earnings</TabsTrigger>
-          <TabsTrigger value="payment">Payment Methods</TabsTrigger>
-          <TabsTrigger value="plans">Plans</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="overview" className="space-y-4">
-          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium">
-                  Total Earnings
-                </CardTitle>
-                <DollarSign className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold">$486.00</div>
-                <p className="text-xs text-muted-foreground">
-                  +$124.00 from last month
-                </p>
-              </CardContent>
-            </Card>
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium">
-                  Available Balance
-                </CardTitle>
-                <Wallet className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold">$280.00</div>
-                <p className="text-xs text-muted-foreground">
-                  Available for withdrawal
-                </p>
-              </CardContent>
-            </Card>
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium">
-                  Components Sold
-                </CardTitle>
-                <Download className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold">124</div>
-                <p className="text-xs text-muted-foreground">
-                  +18 from last month
-                </p>
-              </CardContent>
-            </Card>
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium">
-                  Revenue Share
-                </CardTitle>
-                <Users className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold">80%</div>
-                <p className="text-xs text-muted-foreground">
-                  Basic author plan
-                </p>
-              </CardContent>
-            </Card>
-          </div>
-
-          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
-            <Card className="md:col-span-4">
-              <CardHeader>
-                <CardTitle>Earnings Overview</CardTitle>
-                <CardDescription>
-                  Your earnings over the past 6 months
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="h-[300px]">
-                  <ResponsiveContainer width="100%" height="100%">
-                    <LineChart data={earningsData}>
-                      <CartesianGrid strokeDasharray="3 3" />
-                      <XAxis dataKey="month" />
-                      <YAxis />
-                      <Tooltip
-                        formatter={(value) => [`$${value}`, "Earnings"]}
-                      />
-                      <Legend />
-                      <Line
-                        type="monotone"
-                        dataKey="earnings"
-                        stroke="#10b981"
-                        activeDot={{ r: 8 }}
-                        strokeWidth={2}
-                        name="Earnings ($)"
-                      />
-                    </LineChart>
-                  </ResponsiveContainer>
-                </div>
-              </CardContent>
-            </Card>
-
-            <Card className="md:col-span-3">
-              <CardHeader>
-                <CardTitle>Monthly Goal</CardTitle>
-                <CardDescription>$500 target for this month</CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-8">
-                <div className="space-y-2">
-                  <div className="flex items-center justify-between">
-                    <span className="text-sm font-medium">$280 of $500</span>
-                    <span className="text-sm text-muted-foreground">56%</span>
-                  </div>
-                  <Progress value={56} />
-                </div>
-
-                <div className="space-y-4">
-                  <h4 className="text-sm font-medium">
-                    Top Earning Components
-                  </h4>
-                  <ul className="space-y-2">
-                    {components.length > 0
-                      ? components.slice(0, 3).map((component, index) => (
-                          <li
-                            key={index}
-                            className="flex items-center justify-between text-sm"
-                          >
-                            <span>{component.name}</span>
-                            <span className="font-medium">
-                              ${Math.floor(Math.random() * 100)}
-                            </span>
-                          </li>
-                        ))
-                      : [
-                          { name: "Modal Dialog", amount: "$120" },
-                          { name: "DataTable", amount: "$85" },
-                          { name: "Card Component", amount: "$75" },
-                        ].map((item, index) => (
-                          <li
-                            key={index}
-                            className="flex items-center justify-between text-sm"
-                          >
-                            <span>{item.name}</span>
-                            <span className="font-medium">{item.amount}</span>
-                          </li>
-                        ))}
-                  </ul>
-                </div>
-              </CardContent>
-              <CardFooter>
-                <Button className="w-full">
-                  <DollarSign className="h-4 w-4 mr-2" />
-                  Withdraw Funds
-                </Button>
-              </CardFooter>
-            </Card>
-          </div>
-
-          <Card>
-            <CardHeader>
-              <CardTitle>Recent Transactions</CardTitle>
-              <CardDescription>
-                Your most recent earnings and payouts
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Date</TableHead>
-                    <TableHead>Description</TableHead>
-                    <TableHead>Status</TableHead>
-                    <TableHead className="text-right">Amount</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {transactionsData.map((transaction) => (
-                    <TableRow key={transaction.id}>
-                      <TableCell>
-                        <div className="font-medium">
-                          {new Date(transaction.date).toLocaleDateString()}
-                        </div>
-                      </TableCell>
-                      <TableCell>{transaction.description}</TableCell>
-                      <TableCell>
-                        <div className="flex items-center">
-                          {transaction.status === "completed" ? (
-                            <>
-                              <CheckCircle2 className="mr-2 h-4 w-4 text-green-500" />
-                              <span className="text-xs">Completed</span>
-                            </>
-                          ) : (
-                            <>
-                              <AlertCircle className="mr-2 h-4 w-4 text-yellow-500" />
-                              <span className="text-xs">Pending</span>
-                            </>
-                          )}
-                        </div>
-                      </TableCell>
-                      <TableCell className="text-right font-medium">
-                        ${transaction.amount.toFixed(2)}
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </CardContent>
-            <CardFooter className="flex justify-end">
-              <Button variant="outline">View All Transactions</Button>
-            </CardFooter>
-          </Card>
-        </TabsContent>
-
-        <TabsContent value="earnings" className="space-y-4">
-          <Card>
-            <CardHeader>
-              <CardTitle>Earnings History</CardTitle>
-              <CardDescription>
-                Detailed breakdown of your revenue
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <p className="text-sm text-muted-foreground">
-                Detailed earnings information will be available soon.
-              </p>
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        <TabsContent value="payment" className="space-y-4">
-          <Card>
-            <CardHeader>
-              <CardTitle>Payment Methods</CardTitle>
-              <CardDescription>Manage your payment options</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="flex justify-between items-center p-4 border rounded-md">
-                <div className="flex items-center space-x-3">
-                  <Landmark className="h-5 w-5" />
-                  <div>
-                    <p className="font-medium">Bank Account (Primary)</p>
-                    <p className="text-sm text-muted-foreground">••••1234</p>
-                  </div>
-                </div>
-                <Button variant="outline" size="sm">
-                  Edit
-                </Button>
-              </div>
-
-              <div className="flex justify-between items-center p-4 border rounded-md">
-                <div className="flex items-center space-x-3">
-                  <CreditCard className="h-5 w-5" />
-                  <div>
-                    <p className="font-medium">PayPal</p>
-                    <p className="text-sm text-muted-foreground">
-                      example@example.com
-                    </p>
-                  </div>
-                </div>
-                <Button variant="outline" size="sm">
-                  Edit
-                </Button>
-              </div>
-
-              <Button className="w-full">Add Payment Method</Button>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle>Tax Information</CardTitle>
-              <CardDescription>
-                Manage your tax documents and settings
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="flex justify-between items-center p-4 border rounded-md">
-                <div className="flex items-center space-x-3">
-                  <FileText className="h-5 w-5" />
-                  <div>
-                    <p className="font-medium">W-9 Form</p>
-                    <p className="text-sm text-muted-foreground">
-                      Submitted on Jan 15, 2023
-                    </p>
-                  </div>
-                </div>
-                <Button variant="outline" size="sm">
-                  View
-                </Button>
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="tax-id">Tax ID (EIN/SSN)</Label>
-                <Input id="tax-id" type="text" value="••••••1234" disabled />
-              </div>
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        <TabsContent value="plans" className="space-y-4">
-          <div className="grid gap-4 md:grid-cols-3">
-            {pricingTiers.map((tier, index) => (
-              <Card
-                key={index}
-                className={tier.current ? "border-primary" : ""}
-              >
-                <CardHeader>
-                  <CardTitle>{tier.name}</CardTitle>
-                  <CardDescription>{tier.description}</CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  {tier.price && (
-                    <div className="text-3xl font-bold">{tier.price}</div>
-                  )}
-                  <ul className="space-y-2">
-                    {tier.features.map((feature, idx) => (
-                      <li key={idx} className="flex items-start">
-                        <CheckCircle2 className="h-4 w-4 mr-2 mt-0.5 text-primary" />
-                        <span className="text-sm">{feature}</span>
-                      </li>
-                    ))}
-                  </ul>
-                </CardContent>
-                <CardFooter>
-                  <Button
-                    className="w-full"
-                    variant={tier.current ? "outline" : "default"}
-                    disabled={tier.current}
-                  >
-                    {tier.current ? "Current Plan" : "Upgrade"}
-                  </Button>
-                </CardFooter>
-              </Card>
-            ))}
-          </div>
-        </TabsContent>
-      </Tabs>
-    </div>
-  )
-}
diff --git a/apps/web/components/features/studio/settings/settings.tsx b/apps/web/components/features/studio/settings/settings.tsx
deleted file mode 100644
index 8708a29b..00000000
--- a/apps/web/components/features/studio/settings/settings.tsx
+++ /dev/null
@@ -1,528 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import { User } from "@/types/global"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Textarea } from "@/components/ui/textarea"
-import { Switch } from "@/components/ui/switch"
-import { UserAvatar } from "@/components/ui/user-avatar"
-import { Separator } from "@/components/ui/separator"
-import {
-  AlertCircle,
-  Globe,
-  BellRing,
-  Shield,
-  Key,
-  Trash2,
-  Upload,
-} from "lucide-react"
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
-
-interface StudioSettingsProps {
-  user: User
-}
-
-export function StudioSettings({ user }: StudioSettingsProps) {
-  const [isEditing, setIsEditing] = useState(false)
-  const [formData, setFormData] = useState({
-    displayName: user.display_name || user.name || "",
-    displayUsername: user.display_username || user.username || "",
-    bio: user.bio || "",
-    website: user.website || "",
-    email: user.email || "",
-  })
-
-  const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => {
-    const { name, value } = e.target
-    setFormData((prev) => ({ ...prev, [name]: value }))
-  }
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    // Save profile changes
-    setIsEditing(false)
-  }
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h2 className="text-2xl font-bold tracking-tight">Settings</h2>
-        <p className="text-muted-foreground">
-          Manage your author profile and preferences
-        </p>
-      </div>
-
-      <Tabs defaultValue="profile" className="space-y-4">
-        <TabsList>
-          <TabsTrigger value="profile">Author Profile</TabsTrigger>
-          <TabsTrigger value="account">Account</TabsTrigger>
-          <TabsTrigger value="notifications">Notifications</TabsTrigger>
-          <TabsTrigger value="security">Security</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="profile" className="space-y-4">
-          <Card>
-            <CardHeader>
-              <CardTitle>Profile Information</CardTitle>
-              <CardDescription>
-                Update your author profile information visible to users
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-6">
-              {!isEditing ? (
-                <div className="space-y-6">
-                  <div className="flex items-center gap-4">
-                    <UserAvatar
-                      src={
-                        user.display_image_url ||
-                        user.image_url ||
-                        "/placeholder.svg"
-                      }
-                      alt={user.display_name || user.name || ""}
-                      size={80}
-                    />
-                    <div>
-                      <h3 className="font-medium text-lg">
-                        {formData.displayName}
-                      </h3>
-                      <p className="text-muted-foreground">
-                        @{formData.displayUsername}
-                      </p>
-                    </div>
-                  </div>
-
-                  <div className="space-y-1">
-                    <h4 className="text-sm font-medium">Bio</h4>
-                    <p className="text-sm text-muted-foreground">
-                      {formData.bio || "No bio provided."}
-                    </p>
-                  </div>
-
-                  <div className="space-y-1">
-                    <h4 className="text-sm font-medium">Website</h4>
-                    <p className="text-sm text-muted-foreground">
-                      {formData.website || "No website provided."}
-                    </p>
-                  </div>
-
-                  <div className="space-y-1">
-                    <h4 className="text-sm font-medium">Contact Email</h4>
-                    <p className="text-sm text-muted-foreground">
-                      {formData.email || "No contact email provided."}
-                    </p>
-                  </div>
-
-                  <Button onClick={() => setIsEditing(true)}>
-                    Edit Profile
-                  </Button>
-                </div>
-              ) : (
-                <form onSubmit={handleSubmit} className="space-y-6">
-                  <div className="flex items-center gap-4">
-                    <UserAvatar
-                      src={
-                        user.display_image_url ||
-                        user.image_url ||
-                        "/placeholder.svg"
-                      }
-                      alt={user.display_name || user.name || ""}
-                      size={80}
-                    />
-                    <div className="space-y-2">
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="flex items-center gap-2"
-                      >
-                        <Upload className="h-4 w-4" />
-                        Change Avatar
-                      </Button>
-                      <p className="text-xs text-muted-foreground">
-                        JPG, PNG or GIF. 1MB max.
-                      </p>
-                    </div>
-                  </div>
-
-                  <div className="grid gap-4 md:grid-cols-2">
-                    <div className="space-y-2">
-                      <Label htmlFor="displayName">Display Name</Label>
-                      <Input
-                        id="displayName"
-                        name="displayName"
-                        value={formData.displayName}
-                        onChange={handleChange}
-                      />
-                    </div>
-
-                    <div className="space-y-2">
-                      <Label htmlFor="displayUsername">Display Username</Label>
-                      <Input
-                        id="displayUsername"
-                        name="displayUsername"
-                        value={formData.displayUsername}
-                        onChange={handleChange}
-                      />
-                    </div>
-                  </div>
-
-                  <div className="space-y-2">
-                    <Label htmlFor="bio">Bio</Label>
-                    <Textarea
-                      id="bio"
-                      name="bio"
-                      value={formData.bio}
-                      onChange={handleChange}
-                      placeholder="Tell others about yourself and your components"
-                      rows={4}
-                    />
-                  </div>
-
-                  <div className="space-y-2">
-                    <Label htmlFor="website">Website</Label>
-                    <div className="flex items-center">
-                      <Globe className="h-4 w-4 mr-2 text-muted-foreground" />
-                      <Input
-                        id="website"
-                        name="website"
-                        value={formData.website}
-                        onChange={handleChange}
-                        placeholder="https://yourwebsite.com"
-                      />
-                    </div>
-                  </div>
-
-                  <div className="space-y-2">
-                    <Label htmlFor="email">Contact Email</Label>
-                    <Input
-                      id="email"
-                      name="email"
-                      type="email"
-                      value={formData.email}
-                      onChange={handleChange}
-                      placeholder="public@example.com"
-                    />
-                    <p className="text-xs text-muted-foreground">
-                      This email will be visible to users. Use a different email
-                      than your login email if needed.
-                    </p>
-                  </div>
-
-                  <div className="flex gap-2">
-                    <Button type="submit">Save Changes</Button>
-                    <Button
-                      variant="outline"
-                      onClick={() => setIsEditing(false)}
-                    >
-                      Cancel
-                    </Button>
-                  </div>
-                </form>
-              )}
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle>Author Verification</CardTitle>
-              <CardDescription>
-                Get verified as an authentic component author
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <Alert
-                variant="default"
-                className="bg-primary/10 border-primary/20"
-              >
-                <Shield className="h-4 w-4" />
-                <AlertTitle>Verified Status</AlertTitle>
-                <AlertDescription>
-                  You are not verified yet. Verified authors get priority
-                  placement and increased visibility.
-                </AlertDescription>
-              </Alert>
-
-              <div className="space-y-4">
-                <h4 className="text-sm font-medium">
-                  Requirements for verification:
-                </h4>
-                <ul className="list-disc pl-5 space-y-1 text-sm">
-                  <li>At least 5 published components</li>
-                  <li>Components with high quality ratings</li>
-                  <li>Consistent activity over 3+ months</li>
-                  <li>Complete profile information</li>
-                </ul>
-              </div>
-            </CardContent>
-            <CardFooter>
-              <Button variant="outline" disabled>
-                Apply for Verification
-              </Button>
-            </CardFooter>
-          </Card>
-        </TabsContent>
-
-        <TabsContent value="account" className="space-y-4">
-          <Card>
-            <CardHeader>
-              <CardTitle>Account Information</CardTitle>
-              <CardDescription>Manage your account details</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="account-email">Account Email</Label>
-                <Input id="account-email" value={user.email || ""} disabled />
-                <p className="text-xs text-muted-foreground">
-                  This is the email associated with your account login.
-                </p>
-              </div>
-
-              <div className="space-y-2">
-                <Label>Connected Accounts</Label>
-                <div className="rounded-md border p-4">
-                  <div className="flex justify-between items-center">
-                    <div className="flex items-center gap-3">
-                      <img src="/github.svg" alt="GitHub" className="h-5 w-5" />
-                      <div>
-                        <p className="font-medium">GitHub</p>
-                        <p className="text-xs text-muted-foreground">
-                          Connect your GitHub account to showcase your
-                          repositories
-                        </p>
-                      </div>
-                    </div>
-                    <Button variant="outline" size="sm">
-                      Connect
-                    </Button>
-                  </div>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle>Danger Zone</CardTitle>
-              <CardDescription>Irreversible account actions</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <Alert variant="destructive">
-                <AlertCircle className="h-4 w-4" />
-                <AlertTitle>Warning</AlertTitle>
-                <AlertDescription>
-                  Deleting your account will remove all your components,
-                  earnings history, and account data. This action cannot be
-                  undone.
-                </AlertDescription>
-              </Alert>
-            </CardContent>
-            <CardFooter>
-              <Button variant="destructive" className="flex items-center gap-2">
-                <Trash2 className="h-4 w-4" />
-                Delete Account
-              </Button>
-            </CardFooter>
-          </Card>
-        </TabsContent>
-
-        <TabsContent value="notifications" className="space-y-4">
-          <Card>
-            <CardHeader>
-              <CardTitle>Notification Preferences</CardTitle>
-              <CardDescription>
-                Choose how and when you want to be notified
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-6">
-              <div className="space-y-4">
-                <h4 className="text-sm font-medium mb-2">
-                  Email Notifications
-                </h4>
-                <Separator />
-
-                <div className="flex items-center justify-between">
-                  <div className="space-y-0.5">
-                    <Label htmlFor="comments">Comments on Components</Label>
-                    <p className="text-sm text-muted-foreground">
-                      Receive emails when someone comments on your components
-                    </p>
-                  </div>
-                  <Switch id="comments" defaultChecked />
-                </div>
-
-                <Separator />
-
-                <div className="flex items-center justify-between">
-                  <div className="space-y-0.5">
-                    <Label htmlFor="downloads">Component Downloads</Label>
-                    <p className="text-sm text-muted-foreground">
-                      Receive emails for significant download milestones
-                    </p>
-                  </div>
-                  <Switch id="downloads" defaultChecked />
-                </div>
-
-                <Separator />
-
-                <div className="flex items-center justify-between">
-                  <div className="space-y-0.5">
-                    <Label htmlFor="earnings">Earnings Updates</Label>
-                    <p className="text-sm text-muted-foreground">
-                      Receive emails about your earnings and payouts
-                    </p>
-                  </div>
-                  <Switch id="earnings" defaultChecked />
-                </div>
-
-                <Separator />
-
-                <div className="flex items-center justify-between">
-                  <div className="space-y-0.5">
-                    <Label htmlFor="marketing">Marketing & Updates</Label>
-                    <p className="text-sm text-muted-foreground">
-                      News, updates, and marketing communications about 21st.dev
-                    </p>
-                  </div>
-                  <Switch id="marketing" />
-                </div>
-
-                <Separator />
-              </div>
-
-              <div className="space-y-4">
-                <h4 className="text-sm font-medium mb-2">
-                  In-App Notifications
-                </h4>
-                <Separator />
-
-                <div className="flex items-center justify-between">
-                  <div className="space-y-0.5">
-                    <Label htmlFor="in-app-comments">Comments</Label>
-                    <p className="text-sm text-muted-foreground">
-                      Notify when someone comments on your components
-                    </p>
-                  </div>
-                  <Switch id="in-app-comments" defaultChecked />
-                </div>
-
-                <Separator />
-
-                <div className="flex items-center justify-between">
-                  <div className="space-y-0.5">
-                    <Label htmlFor="in-app-downloads">Downloads</Label>
-                    <p className="text-sm text-muted-foreground">
-                      Notify for component download milestones
-                    </p>
-                  </div>
-                  <Switch id="in-app-downloads" defaultChecked />
-                </div>
-
-                <Separator />
-
-                <div className="flex items-center justify-between">
-                  <div className="space-y-0.5">
-                    <Label htmlFor="in-app-earnings">Earnings</Label>
-                    <p className="text-sm text-muted-foreground">
-                      Notify about earnings and payouts
-                    </p>
-                  </div>
-                  <Switch id="in-app-earnings" defaultChecked />
-                </div>
-              </div>
-            </CardContent>
-            <CardFooter>
-              <Button className="flex items-center gap-2">
-                <BellRing className="h-4 w-4" />
-                Save Preferences
-              </Button>
-            </CardFooter>
-          </Card>
-        </TabsContent>
-
-        <TabsContent value="security" className="space-y-4">
-          <Card>
-            <CardHeader>
-              <CardTitle>Security Settings</CardTitle>
-              <CardDescription>
-                Manage your security preferences
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-6">
-              <div className="space-y-4">
-                <h4 className="text-sm font-medium">Password</h4>
-                <p className="text-sm text-muted-foreground">
-                  Password is managed through your authentication provider.
-                </p>
-                <Button variant="outline" className="flex items-center gap-2">
-                  <Key className="h-4 w-4" />
-                  Change Password
-                </Button>
-              </div>
-
-              <Separator />
-
-              <div className="space-y-4">
-                <h4 className="text-sm font-medium">
-                  Two-Factor Authentication
-                </h4>
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-sm">
-                      Enable two-factor authentication for added security
-                    </p>
-                    <p className="text-sm text-muted-foreground">
-                      Protect your account with an additional security layer
-                    </p>
-                  </div>
-                  <Switch id="2fa" />
-                </div>
-              </div>
-
-              <Separator />
-
-              <div className="space-y-4">
-                <h4 className="text-sm font-medium">Session Management</h4>
-                <p className="text-sm text-muted-foreground">
-                  Manage your active sessions and sign out from other devices.
-                </p>
-                <Button variant="outline">Manage Sessions</Button>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle>API Access</CardTitle>
-              <CardDescription>
-                Manage API keys for programmatic access to your components
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <p className="text-sm text-muted-foreground">
-                API access will be available soon for Pro and Enterprise
-                authors.
-              </p>
-            </CardContent>
-            <CardFooter>
-              <Button variant="outline" disabled>
-                Generate API Key
-              </Button>
-            </CardFooter>
-          </Card>
-        </TabsContent>
-      </Tabs>
-    </div>
-  )
-}

From 7135de9c5884dd9296f0a751081da6464f2ac0af Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Wed, 2 Apr 2025 16:36:46 +0300
Subject: [PATCH 005/143] refactor

---
 .../web/app/studio/[username]/page.client.tsx | 194 ++----------------
 apps/web/app/studio/[username]/page.tsx       |  18 +-
 .../features/studio/components-table.tsx      |  73 +++++++
 .../features/studio/publish-dialog.tsx        |  97 +++++++++
 .../features/studio/studio-layout.tsx         |  25 +++
 .../features/studio/studio-sidebar.tsx        | 100 +++++++++
 6 files changed, 320 insertions(+), 187 deletions(-)
 create mode 100644 apps/web/components/features/studio/components-table.tsx
 create mode 100644 apps/web/components/features/studio/publish-dialog.tsx
 create mode 100644 apps/web/components/features/studio/studio-layout.tsx
 create mode 100644 apps/web/components/features/studio/studio-sidebar.tsx

diff --git a/apps/web/app/studio/[username]/page.client.tsx b/apps/web/app/studio/[username]/page.client.tsx
index 687ff006..bcc6594f 100644
--- a/apps/web/app/studio/[username]/page.client.tsx
+++ b/apps/web/app/studio/[username]/page.client.tsx
@@ -1,34 +1,12 @@
 "use client"
 
-import { useState } from "react"
-import { Header } from "@/components/ui/header.client"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table"
-import { Button } from "@/components/ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog"
-import { PlusCircle, ArrowLeft } from "lucide-react"
-import { formatDistanceToNow } from "date-fns"
-import { Textarea } from "@/components/ui/textarea"
-import { useClerkSupabaseClient } from "@/lib/clerk"
-import { toast } from "sonner"
-import { useRouter } from "next/navigation"
+import { User } from "@/types/global"
 import { Tables } from "@/types/supabase"
-import { UserAvatar } from "@/components/ui/user-avatar"
+import { StudioLayout } from "@/components/features/studio/studio-layout"
+import { ComponentsTable } from "@/components/features/studio/components-table"
+import { PublishDialog } from "@/components/features/studio/publish-dialog"
 import Link from "next/link"
-import { User } from "@/types/global"
+import { ArrowLeft } from "lucide-react"
 
 type Component = Tables<"components">
 
@@ -45,161 +23,25 @@ export function StudioUsernameClient({
   isAdmin,
   isOwnProfile,
 }: StudioUsernameClientProps) {
-  const [isPublishOpen, setIsPublishOpen] = useState(false)
-  const [componentCode, setComponentCode] = useState("")
-  const [isPublishing, setIsPublishing] = useState(false)
-  const supabase = useClerkSupabaseClient()
-  const router = useRouter()
-
-  const handlePublish = async () => {
-    if (!componentCode.trim()) {
-      toast.error("Please enter component code")
-      return
-    }
-
-    setIsPublishing(true)
-    try {
-      // Here you would add the logic to parse and validate the component code
-      // Then save it to the database
-      const { error } = await supabase.from("components").insert({
-        code: componentCode,
-        name: "New Component", // Required field
-        component_names: {}, // Required field
-        component_slug: "new-component", // Required field
-        preview_url: "https://placeholder.com", // Required field
-        user_id: user.id, // Use the target user ID
-        direct_registry_dependencies: {}, // Required field
-        demo_direct_registry_dependencies: {}, // Required field
-      })
-
-      if (error) throw error
-
-      toast.success("Component published successfully")
-      setIsPublishOpen(false)
-      router.refresh()
-    } catch (error) {
-      toast.error("Failed to publish component")
-      console.error("Error publishing component:", error)
-    } finally {
-      setIsPublishing(false)
-    }
-  }
-
   return (
-    <>
-      <Header />
-      <div className="container mx-auto px-4 py-8 mt-20">
-        <div className="flex items-center mb-8 gap-4">
-          <Link
-            href="/studio"
-            className="text-muted-foreground hover:text-foreground"
-          >
-            <ArrowLeft className="h-5 w-5" />
-          </Link>
+    <StudioLayout user={user}>
+      <div className="space-y-8">
+        <div className="flex flex-row items-center justify-between">
           <div className="flex items-center gap-4">
-            <UserAvatar
-              src={
-                user.display_image_url || user.image_url || "/placeholder.svg"
-              }
-              alt={user.display_name || user.name || ""}
-              size={48}
-              className="cursor-default"
-            />
-            <div>
-              <h1 className="text-3xl font-bold">
-                {user.display_name || user.name || user.username}'s Studio
-              </h1>
-              <p className="text-muted-foreground">
-                @{user.display_username || user.username}
-              </p>
-            </div>
+            <Link
+              href="/studio"
+              className="text-muted-foreground hover:text-foreground"
+            >
+              <ArrowLeft className="h-5 w-5" />
+            </Link>
+            <h1 className="text-3xl font-bold">Components</h1>
           </div>
 
-          {(isOwnProfile || isAdmin) && (
-            <Dialog open={isPublishOpen} onOpenChange={setIsPublishOpen}>
-              <DialogTrigger asChild>
-                <Button className="ml-auto">
-                  <PlusCircle className="mr-2 h-4 w-4" />
-                  Publish Component
-                </Button>
-              </DialogTrigger>
-              <DialogContent className="sm:max-w-[725px]">
-                <DialogHeader>
-                  <DialogTitle>Publish New Component</DialogTitle>
-                  <DialogDescription>
-                    Paste your component code below. Make sure it follows our
-                    guidelines and includes all necessary imports.
-                  </DialogDescription>
-                </DialogHeader>
-                <div className="grid gap-4 py-4">
-                  <Textarea
-                    placeholder="Paste your component code here..."
-                    value={componentCode}
-                    onChange={(e) => setComponentCode(e.target.value)}
-                    className="h-[400px] font-mono"
-                  />
-                  <Button
-                    onClick={handlePublish}
-                    disabled={isPublishing}
-                    className="w-full"
-                  >
-                    {isPublishing ? "Publishing..." : "Publish Component"}
-                  </Button>
-                </div>
-              </DialogContent>
-            </Dialog>
-          )}
+          {(isOwnProfile || isAdmin) && <PublishDialog userId={user.id} />}
         </div>
 
-        <div className="rounded-md border">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Name</TableHead>
-                <TableHead>Created</TableHead>
-                <TableHead className="text-right">Views</TableHead>
-                <TableHead className="text-right">Likes</TableHead>
-                <TableHead className="text-right">Actions</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {components.map((component) => (
-                <TableRow key={component.id}>
-                  <TableCell className="font-medium">
-                    {component.name}
-                  </TableCell>
-                  <TableCell>
-                    {formatDistanceToNow(new Date(component.created_at), {
-                      addSuffix: true,
-                    })}
-                  </TableCell>
-                  <TableCell className="text-right">
-                    {component.downloads_count}
-                  </TableCell>
-                  <TableCell className="text-right">
-                    {component.likes_count}
-                  </TableCell>
-                  <TableCell className="text-right">
-                    <Button variant="ghost" size="sm">
-                      Edit
-                    </Button>
-                  </TableCell>
-                </TableRow>
-              ))}
-              {components.length === 0 && (
-                <TableRow>
-                  <TableCell
-                    colSpan={5}
-                    className="h-24 text-center text-muted-foreground"
-                  >
-                    No components published yet
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </div>
+        <ComponentsTable components={components} />
       </div>
-    </>
+    </StudioLayout>
   )
 }
diff --git a/apps/web/app/studio/[username]/page.tsx b/apps/web/app/studio/[username]/page.tsx
index 615b756a..11ca1a7d 100644
--- a/apps/web/app/studio/[username]/page.tsx
+++ b/apps/web/app/studio/[username]/page.tsx
@@ -94,17 +94,13 @@ export default async function StudioUsernamePage({
   // Get components for the specified user
   const components = await getCachedUserComponents(user.id)
 
+  // Pass everything to the client component
   return (
-    <div className="min-h-screen flex flex-col">
-      <div className="flex-1">
-        <StudioUsernameClient
-          user={user}
-          components={components}
-          isAdmin={isAdmin}
-          isOwnProfile={isOwnProfile}
-        />
-      </div>
-      <Footer />
-    </div>
+    <StudioUsernameClient
+      user={user}
+      components={components}
+      isAdmin={isAdmin}
+      isOwnProfile={isOwnProfile}
+    />
   )
 }
diff --git a/apps/web/components/features/studio/components-table.tsx b/apps/web/components/features/studio/components-table.tsx
new file mode 100644
index 00000000..f516ab0a
--- /dev/null
+++ b/apps/web/components/features/studio/components-table.tsx
@@ -0,0 +1,73 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { Button } from "@/components/ui/button"
+import { formatDistanceToNow } from "date-fns"
+import { Tables } from "@/types/supabase"
+
+type Component = Tables<"components">
+
+interface ComponentsTableProps {
+  components: Component[]
+  onEdit?: (component: Component) => void
+}
+
+export function ComponentsTable({ components, onEdit }: ComponentsTableProps) {
+  return (
+    <div className="rounded-md border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Created</TableHead>
+            <TableHead className="text-right">Views</TableHead>
+            <TableHead className="text-right">Likes</TableHead>
+            <TableHead className="text-right">Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {components.map((component) => (
+            <TableRow key={component.id}>
+              <TableCell className="font-medium">{component.name}</TableCell>
+              <TableCell>
+                {formatDistanceToNow(new Date(component.created_at), {
+                  addSuffix: true,
+                })}
+              </TableCell>
+              <TableCell className="text-right">
+                {component.downloads_count}
+              </TableCell>
+              <TableCell className="text-right">
+                {component.likes_count}
+              </TableCell>
+              <TableCell className="text-right">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => onEdit && onEdit(component)}
+                >
+                  Edit
+                </Button>
+              </TableCell>
+            </TableRow>
+          ))}
+          {components.length === 0 && (
+            <TableRow>
+              <TableCell
+                colSpan={5}
+                className="h-24 text-center text-muted-foreground"
+              >
+                No components published yet
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}
diff --git a/apps/web/components/features/studio/publish-dialog.tsx b/apps/web/components/features/studio/publish-dialog.tsx
new file mode 100644
index 00000000..9e29bc1e
--- /dev/null
+++ b/apps/web/components/features/studio/publish-dialog.tsx
@@ -0,0 +1,97 @@
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Textarea } from "@/components/ui/textarea"
+import { useClerkSupabaseClient } from "@/lib/clerk"
+import { toast } from "sonner"
+import { useRouter } from "next/navigation"
+import { PlusCircle } from "lucide-react"
+
+interface PublishDialogProps {
+  userId: string
+}
+
+export function PublishDialog({ userId }: PublishDialogProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [componentCode, setComponentCode] = useState("")
+  const [isPublishing, setIsPublishing] = useState(false)
+  const supabase = useClerkSupabaseClient()
+  const router = useRouter()
+
+  const handlePublish = async () => {
+    if (!componentCode.trim()) {
+      toast.error("Please enter component code")
+      return
+    }
+
+    setIsPublishing(true)
+    try {
+      // Here you would add the logic to parse and validate the component code
+      // Then save it to the database
+      const { error } = await supabase.from("components").insert({
+        code: componentCode,
+        name: "New Component", // Required field
+        component_names: {}, // Required field
+        component_slug: "new-component", // Required field
+        preview_url: "https://placeholder.com", // Required field
+        user_id: userId, // Use the target user ID
+        direct_registry_dependencies: {}, // Required field
+        demo_direct_registry_dependencies: {}, // Required field
+      })
+
+      if (error) throw error
+
+      toast.success("Component published successfully")
+      setIsOpen(false)
+      setComponentCode("")
+      router.refresh()
+    } catch (error) {
+      toast.error("Failed to publish component")
+      console.error("Error publishing component:", error)
+    } finally {
+      setIsPublishing(false)
+    }
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button>
+          <PlusCircle className="mr-2 h-4 w-4" />
+          Publish Component
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[725px]">
+        <DialogHeader>
+          <DialogTitle>Publish New Component</DialogTitle>
+          <DialogDescription>
+            Paste your component code below. Make sure it follows our guidelines
+            and includes all necessary imports.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <Textarea
+            placeholder="Paste your component code here..."
+            value={componentCode}
+            onChange={(e) => setComponentCode(e.target.value)}
+            className="h-[400px] font-mono"
+          />
+          <Button
+            onClick={handlePublish}
+            disabled={isPublishing}
+            className="w-full"
+          >
+            {isPublishing ? "Publishing..." : "Publish Component"}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/web/components/features/studio/studio-layout.tsx b/apps/web/components/features/studio/studio-layout.tsx
new file mode 100644
index 00000000..b36e0267
--- /dev/null
+++ b/apps/web/components/features/studio/studio-layout.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import { Header } from "@/components/ui/header.client"
+import { Footer } from "@/components/ui/footer"
+import { StudioSidebar } from "./studio-sidebar"
+import { User } from "@/types/global"
+import { ReactNode } from "react"
+
+interface StudioLayoutProps {
+  user: User
+  children: ReactNode
+}
+
+export function StudioLayout({ user, children }: StudioLayoutProps) {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      <div className="flex flex-1 pt-14">
+        <StudioSidebar user={user} />
+        <main className="flex-1 overflow-y-auto p-8">{children}</main>
+      </div>
+      <Footer />
+    </div>
+  )
+}
diff --git a/apps/web/components/features/studio/studio-sidebar.tsx b/apps/web/components/features/studio/studio-sidebar.tsx
new file mode 100644
index 00000000..59819d66
--- /dev/null
+++ b/apps/web/components/features/studio/studio-sidebar.tsx
@@ -0,0 +1,100 @@
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { cn } from "@/lib/utils"
+import { UserAvatar } from "@/components/ui/user-avatar"
+import { User } from "@/types/global"
+import { BarChartBig, CreditCard, Layers } from "lucide-react"
+
+interface StudioSidebarProps {
+  user: User
+}
+
+interface NavItem {
+  title: string
+  href: string
+  icon: React.ReactNode
+  disabled?: boolean
+}
+
+export function StudioSidebar({ user }: StudioSidebarProps) {
+  const pathname = usePathname()
+
+  // Get the base username path
+  const baseUsername = user.display_username || user.username
+  const basePath = `/studio/${baseUsername}`
+
+  const navItems: NavItem[] = [
+    {
+      title: "Components",
+      href: basePath,
+      icon: <Layers className="mr-2 h-4 w-4" />,
+    },
+    {
+      title: "Analytics",
+      href: `${basePath}/analytics`,
+      icon: <BarChartBig className="mr-2 h-4 w-4" />,
+      disabled: true,
+    },
+    {
+      title: "Monetization",
+      href: `${basePath}/monetization`,
+      icon: <CreditCard className="mr-2 h-4 w-4" />,
+      disabled: true,
+    },
+  ]
+
+  return (
+    <div className="h-screen w-64 border-r flex flex-col overflow-y-auto bg-background">
+      <div className="p-6 flex flex-col items-center border-b">
+        <UserAvatar
+          src={user.display_image_url || user.image_url || "/placeholder.svg"}
+          alt={user.display_name || user.name || ""}
+          size={64}
+          className="mb-4"
+        />
+        <h2 className="text-xl font-medium text-center">
+          {user.display_name || user.name || user.username}
+        </h2>
+        <p className="text-sm text-muted-foreground text-center">
+          @{user.display_username || user.username}
+        </p>
+      </div>
+
+      <div className="py-6 px-3 flex-1">
+        <nav className="space-y-1">
+          {navItems.map((item) => (
+            <Link
+              key={item.href}
+              href={item.disabled ? "#" : item.href}
+              className={cn(
+                "flex items-center px-3 py-2 text-sm font-medium rounded-md",
+                pathname === item.href
+                  ? "bg-primary text-primary-foreground"
+                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                item.disabled &&
+                  "opacity-50 cursor-not-allowed pointer-events-none",
+              )}
+            >
+              {item.icon}
+              {item.title}
+              {item.disabled && (
+                <span className="ml-auto text-xs px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground">
+                  Soon
+                </span>
+              )}
+            </Link>
+          ))}
+        </nav>
+      </div>
+
+      <div className="p-4 border-t">
+        <Link
+          href="/settings/profile"
+          className="block w-full px-3 py-2 text-sm text-center text-muted-foreground hover:text-foreground rounded-md hover:bg-muted"
+        >
+          Settings
+        </Link>
+      </div>
+    </div>
+  )
+}

From 65dfd0480a3dd0cdf17c95f676bb14943c72ae56 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Wed, 2 Apr 2025 16:41:52 +0300
Subject: [PATCH 006/143] sidebar

---
 .../features/studio/studio-layout.tsx         |   9 +-
 .../features/studio/studio-sidebar.tsx        | 113 ++++++++++--------
 2 files changed, 72 insertions(+), 50 deletions(-)

diff --git a/apps/web/components/features/studio/studio-layout.tsx b/apps/web/components/features/studio/studio-layout.tsx
index b36e0267..8fc7efd1 100644
--- a/apps/web/components/features/studio/studio-layout.tsx
+++ b/apps/web/components/features/studio/studio-layout.tsx
@@ -5,6 +5,7 @@ import { Footer } from "@/components/ui/footer"
 import { StudioSidebar } from "./studio-sidebar"
 import { User } from "@/types/global"
 import { ReactNode } from "react"
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
 
 interface StudioLayoutProps {
   user: User
@@ -15,9 +16,11 @@ export function StudioLayout({ user, children }: StudioLayoutProps) {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <div className="flex flex-1 pt-14">
-        <StudioSidebar user={user} />
-        <main className="flex-1 overflow-y-auto p-8">{children}</main>
+      <div className="flex-1 pt-14">
+        <SidebarProvider defaultOpen={true}>
+          <StudioSidebar user={user} />
+          <SidebarInset className="p-8">{children}</SidebarInset>
+        </SidebarProvider>
       </div>
       <Footer />
     </div>
diff --git a/apps/web/components/features/studio/studio-sidebar.tsx b/apps/web/components/features/studio/studio-sidebar.tsx
index 59819d66..287c70c9 100644
--- a/apps/web/components/features/studio/studio-sidebar.tsx
+++ b/apps/web/components/features/studio/studio-sidebar.tsx
@@ -1,9 +1,20 @@
+"use client"
+
 import Link from "next/link"
 import { usePathname } from "next/navigation"
 import { cn } from "@/lib/utils"
 import { UserAvatar } from "@/components/ui/user-avatar"
 import { User } from "@/types/global"
 import { BarChartBig, CreditCard, Layers } from "lucide-react"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar"
 
 interface StudioSidebarProps {
   user: User
@@ -27,74 +38,82 @@ export function StudioSidebar({ user }: StudioSidebarProps) {
     {
       title: "Components",
       href: basePath,
-      icon: <Layers className="mr-2 h-4 w-4" />,
+      icon: <Layers className="h-4 w-4" />,
     },
     {
       title: "Analytics",
       href: `${basePath}/analytics`,
-      icon: <BarChartBig className="mr-2 h-4 w-4" />,
+      icon: <BarChartBig className="h-4 w-4" />,
       disabled: true,
     },
     {
       title: "Monetization",
       href: `${basePath}/monetization`,
-      icon: <CreditCard className="mr-2 h-4 w-4" />,
+      icon: <CreditCard className="h-4 w-4" />,
       disabled: true,
     },
   ]
 
   return (
-    <div className="h-screen w-64 border-r flex flex-col overflow-y-auto bg-background">
-      <div className="p-6 flex flex-col items-center border-b">
-        <UserAvatar
-          src={user.display_image_url || user.image_url || "/placeholder.svg"}
-          alt={user.display_name || user.name || ""}
-          size={64}
-          className="mb-4"
-        />
-        <h2 className="text-xl font-medium text-center">
-          {user.display_name || user.name || user.username}
-        </h2>
-        <p className="text-sm text-muted-foreground text-center">
-          @{user.display_username || user.username}
-        </p>
-      </div>
+    <Sidebar>
+      <SidebarHeader className="border-b">
+        <div className="flex flex-col items-center py-4">
+          <UserAvatar
+            src={user.display_image_url || user.image_url || "/placeholder.svg"}
+            alt={user.display_name || user.name || ""}
+            size={64}
+            className="mb-4"
+          />
+          <h2 className="text-xl font-medium text-center">
+            {user.display_name || user.name || user.username}
+          </h2>
+          <p className="text-sm text-muted-foreground text-center">
+            @{user.display_username || user.username}
+          </p>
+        </div>
+      </SidebarHeader>
 
-      <div className="py-6 px-3 flex-1">
-        <nav className="space-y-1">
+      <SidebarContent className="px-2 py-4">
+        <SidebarMenu>
           {navItems.map((item) => (
-            <Link
-              key={item.href}
-              href={item.disabled ? "#" : item.href}
-              className={cn(
-                "flex items-center px-3 py-2 text-sm font-medium rounded-md",
-                pathname === item.href
-                  ? "bg-primary text-primary-foreground"
-                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
-                item.disabled &&
-                  "opacity-50 cursor-not-allowed pointer-events-none",
-              )}
-            >
-              {item.icon}
-              {item.title}
-              {item.disabled && (
-                <span className="ml-auto text-xs px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground">
-                  Soon
-                </span>
-              )}
-            </Link>
+            <SidebarMenuItem key={item.href}>
+              <Link
+                href={item.disabled ? "#" : item.href}
+                passHref
+                legacyBehavior
+              >
+                <SidebarMenuButton
+                  asChild
+                  isActive={pathname === item.href}
+                  className={cn(
+                    item.disabled &&
+                      "opacity-50 cursor-not-allowed pointer-events-none",
+                  )}
+                >
+                  <a className="flex items-center gap-2">
+                    {item.icon}
+                    <span>{item.title}</span>
+                    {item.disabled && (
+                      <span className="ml-auto text-xs px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground">
+                        Soon
+                      </span>
+                    )}
+                  </a>
+                </SidebarMenuButton>
+              </Link>
+            </SidebarMenuItem>
           ))}
-        </nav>
-      </div>
+        </SidebarMenu>
+      </SidebarContent>
 
-      <div className="p-4 border-t">
+      <SidebarFooter className="border-t">
         <Link
           href="/settings/profile"
-          className="block w-full px-3 py-2 text-sm text-center text-muted-foreground hover:text-foreground rounded-md hover:bg-muted"
+          className="flex w-full items-center gap-2 p-3 text-sm text-muted-foreground hover:text-foreground rounded-md hover:bg-muted"
         >
-          Settings
+          <span>Settings</span>
         </Link>
-      </div>
-    </div>
+      </SidebarFooter>
+    </Sidebar>
   )
 }

From c28d73fde52cce5665244459290e1d96fdbba66c Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Wed, 2 Apr 2025 17:44:41 +0300
Subject: [PATCH 007/143] studio/components

---
 .../web/app/studio/[username]/page.client.tsx |  19 +-
 apps/web/app/studio/[username]/page.tsx       |  34 +-
 apps/web/app/studio/page.tsx                  |   1 -
 .../features/studio/components-table.tsx      | 734 ++++++++++++++++--
 apps/web/components/ui/pagination.tsx         | 117 +++
 apps/web/lib/utils/transformData.ts           |   3 +
 apps/web/package.json                         |   1 +
 apps/web/types/supabase.ts                    |  24 +
 package.json                                  |   1 +
 pnpm-lock.yaml                                |  35 +
 10 files changed, 891 insertions(+), 78 deletions(-)
 create mode 100644 apps/web/components/ui/pagination.tsx

diff --git a/apps/web/app/studio/[username]/page.client.tsx b/apps/web/app/studio/[username]/page.client.tsx
index bcc6594f..504b7edb 100644
--- a/apps/web/app/studio/[username]/page.client.tsx
+++ b/apps/web/app/studio/[username]/page.client.tsx
@@ -1,46 +1,43 @@
 "use client"
 
-import { User } from "@/types/global"
-import { Tables } from "@/types/supabase"
+import { User, DemoWithComponent } from "@/types/global"
 import { StudioLayout } from "@/components/features/studio/studio-layout"
 import { ComponentsTable } from "@/components/features/studio/components-table"
 import { PublishDialog } from "@/components/features/studio/publish-dialog"
 import Link from "next/link"
 import { ArrowLeft } from "lucide-react"
 
-type Component = Tables<"components">
-
 interface StudioUsernameClientProps {
   user: User
-  components: Component[]
+  demos: DemoWithComponent[]
   isAdmin: boolean
   isOwnProfile: boolean
 }
 
 export function StudioUsernameClient({
   user,
-  components,
+  demos,
   isAdmin,
   isOwnProfile,
 }: StudioUsernameClientProps) {
   return (
     <StudioLayout user={user}>
-      <div className="space-y-8">
+      <div className="space-y-6">
         <div className="flex flex-row items-center justify-between">
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-3">
             <Link
               href="/studio"
               className="text-muted-foreground hover:text-foreground"
             >
-              <ArrowLeft className="h-5 w-5" />
+              <ArrowLeft className="h-4 w-4" />
             </Link>
-            <h1 className="text-3xl font-bold">Components</h1>
+            <h1 className="text-xl font-bold">Components</h1>
           </div>
 
           {(isOwnProfile || isAdmin) && <PublishDialog userId={user.id} />}
         </div>
 
-        <ComponentsTable components={components} />
+        <ComponentsTable demos={demos} />
       </div>
     </StudioLayout>
   )
diff --git a/apps/web/app/studio/[username]/page.tsx b/apps/web/app/studio/[username]/page.tsx
index 11ca1a7d..74c33c7d 100644
--- a/apps/web/app/studio/[username]/page.tsx
+++ b/apps/web/app/studio/[username]/page.tsx
@@ -5,6 +5,7 @@ import { auth } from "@clerk/nextjs/server"
 import { unstable_cache } from "next/cache"
 import { getUserData } from "@/lib/queries"
 import { StudioUsernameClient } from "./page.client"
+import { transformDemoResult } from "@/lib/utils/transformData"
 
 // Get user data by username
 const getCachedUser = unstable_cache(
@@ -19,20 +20,27 @@ const getCachedUser = unstable_cache(
   },
 )
 
-// Get components by user ID
-const getCachedUserComponents = unstable_cache(
+// Get demos by user ID
+const getCachedUserDemos = unstable_cache(
   async (userId: string) => {
-    const { data: components } = await supabaseWithAdminAccess
-      .from("components")
-      .select("*")
-      .eq("user_id", userId)
-      .order("created_at", { ascending: false })
-    return components || []
+    const { data: demos, error } = await supabaseWithAdminAccess.rpc(
+      "get_user_profile_demo_list_v2",
+      {
+        p_user_id: userId,
+      },
+    )
+
+    if (error) {
+      console.error("Error fetching user demos:", error)
+      return []
+    }
+
+    return demos ? demos.map(transformDemoResult) : []
   },
-  ["user-components"],
+  ["user-demos"],
   {
     revalidate: 30,
-    tags: ["user-components"],
+    tags: ["user-demos"],
   },
 )
 
@@ -91,14 +99,14 @@ export default async function StudioUsernamePage({
     redirect("/studio")
   }
 
-  // Get components for the specified user
-  const components = await getCachedUserComponents(user.id)
+  // Get demos for the specified user
+  const demos = await getCachedUserDemos(user.id)
 
   // Pass everything to the client component
   return (
     <StudioUsernameClient
       user={user}
-      components={components}
+      demos={demos}
       isAdmin={isAdmin}
       isOwnProfile={isOwnProfile}
     />
diff --git a/apps/web/app/studio/page.tsx b/apps/web/app/studio/page.tsx
index b4f4a608..26ee6256 100644
--- a/apps/web/app/studio/page.tsx
+++ b/apps/web/app/studio/page.tsx
@@ -3,7 +3,6 @@ import { redirect } from "next/navigation"
 import { auth } from "@clerk/nextjs/server"
 import Link from "next/link"
 import { supabaseWithAdminAccess } from "@/lib/supabase"
-import { headers } from "next/headers"
 
 export const metadata = {
   title: "Creator Studio | 21st.dev - The NPM for Design Engineers",
diff --git a/apps/web/components/features/studio/components-table.tsx b/apps/web/components/features/studio/components-table.tsx
index f516ab0a..b4443ac1 100644
--- a/apps/web/components/features/studio/components-table.tsx
+++ b/apps/web/components/features/studio/components-table.tsx
@@ -1,3 +1,6 @@
+"use client"
+
+import { useState, useEffect } from "react"
 import {
   Table,
   TableBody,
@@ -8,66 +11,691 @@ import {
 } from "@/components/ui/table"
 import { Button } from "@/components/ui/button"
 import { formatDistanceToNow } from "date-fns"
-import { Tables } from "@/types/supabase"
+import { cn } from "@/lib/utils"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination"
+import { Label } from "@/components/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  ColumnDef,
+  PaginationState,
+  SortingState,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { ChevronDown, ChevronUp } from "lucide-react"
+import { useId } from "react"
+import { DemoWithComponent } from "@/types/global"
 
-type Component = Tables<"components">
+interface ExtendedDemoWithComponent extends DemoWithComponent {
+  is_private?: boolean
+  submission_status?: string
+  moderators_feedback?: string
+}
 
-interface ComponentsTableProps {
-  components: Component[]
-  onEdit?: (component: Component) => void
+interface DemosTableProps {
+  demos: ExtendedDemoWithComponent[]
+  onEdit?: (demo: ExtendedDemoWithComponent) => void
 }
 
-export function ComponentsTable({ components, onEdit }: ComponentsTableProps) {
+export function DemosTable({ demos = [], onEdit }: DemosTableProps) {
+  const id = useId()
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 20,
+  })
+  const [imageLoadStatus, setImageLoadStatus] = useState<
+    Record<string, { loaded: boolean; error?: string; fixedUrl?: string }>
+  >({})
+
+  // Format numbers with thousand separators (spaces)
+  const formatNumberWithSpaces = (num: number): string => {
+    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ")
+  }
+
+  // Format numbers the same way as in the card component
+  const formatNumber = (num: number) => {
+    if (num >= 1000) {
+      return `${(num / 1000).toFixed(1)}k`
+    }
+    return num.toString()
+  }
+
+  // Log all preview URLs on component mount for debugging - consolidated into one log
+  useEffect(() => {
+    const demosWithoutPreviews = demos.filter((c) => !c.preview_url)
+    const demosWithPreviews = demos.filter((c) => c.preview_url)
+
+    console.log(
+      `Preview status: ${demosWithPreviews.length} with previews, ${demosWithoutPreviews.length} without previews`,
+    )
+
+    if (demosWithoutPreviews.length > 0) {
+      console.log(
+        "Demos missing previews:",
+        demosWithoutPreviews.map((c) => ({
+          id: c.id,
+          name: c.name,
+        })),
+      )
+    }
+
+    // Process all preview images at once instead of in each cell
+    demos.forEach((demo) => {
+      if (demo.preview_url) {
+        // Fix URL if it's a relative path without http(s)
+        const previewUrl = demo.preview_url.startsWith("http")
+          ? demo.preview_url
+          : `https://cdn.21st.dev${demo.preview_url.startsWith("/") ? "" : "/"}${demo.preview_url}`
+
+        const img = new Image()
+        img.onload = () => {
+          setImageLoadStatus((prev) => ({
+            ...prev,
+            [demo.id]: { loaded: true, fixedUrl: previewUrl },
+          }))
+        }
+        img.onerror = () => {
+          setImageLoadStatus((prev) => ({
+            ...prev,
+            [demo.id]: {
+              loaded: false,
+              error: "Failed to load image",
+              fixedUrl: previewUrl,
+            },
+          }))
+        }
+        img.src = previewUrl
+      } else {
+        setImageLoadStatus((prev) => ({
+          ...prev,
+          [demo.id]: { loaded: false, error: "No preview URL" },
+        }))
+      }
+    })
+  }, [demos])
+
+  const [sorting, setSorting] = useState<SortingState>([
+    {
+      id: "created_at",
+      desc: true,
+    },
+  ])
+
+  const columns: ColumnDef<ExtendedDemoWithComponent>[] = [
+    {
+      id: "select",
+      header: ({ table }) => (
+        <Checkbox
+          checked={
+            table.getIsAllPageRowsSelected() ||
+            (table.getIsSomePageRowsSelected() && "indeterminate")
+          }
+          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+          aria-label="Select all"
+        />
+      ),
+      cell: ({ row }) => (
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+          aria-label="Select row"
+        />
+      ),
+      size: 28,
+      enableSorting: false,
+    },
+    {
+      header: "Component",
+      accessorKey: "name",
+      cell: ({ row }) => (
+        <div className="flex items-center gap-3">
+          <div className="h-12 w-20 overflow-hidden rounded-md border bg-muted shrink-0">
+            {row.original.preview_url ? (
+              <div
+                className="h-12 w-20 bg-cover bg-center"
+                style={{
+                  backgroundImage: `url(${row.original.preview_url})`,
+                }}
+              />
+            ) : (
+              <div className="flex h-full w-full items-center justify-center text-xs text-muted-foreground">
+                No preview
+              </div>
+            )}
+          </div>
+          <div className="flex flex-col min-w-0">
+            <div className="font-medium truncate">{row.getValue("name")}</div>
+            <div className="text-sm text-muted-foreground truncate">
+              {row.original.component?.name || "Unknown component"}
+            </div>
+          </div>
+        </div>
+      ),
+      size: 300,
+    },
+    {
+      header: "Status",
+      id: "submission_status",
+      accessorFn: (row) => row.submission_status || "featured",
+      cell: ({ row }) => {
+        const status = row.original.submission_status || "featured"
+        return (
+          <div>
+            <span
+              className={cn(
+                "px-2 py-1 text-xs rounded",
+                status === "on_review" && "bg-yellow-100 text-yellow-700",
+                status === "featured" && "bg-green-100 text-green-700",
+                status === "posted" && "bg-blue-100 text-blue-700",
+                !status && "bg-gray-100 text-gray-700",
+              )}
+              title={
+                row.original.moderators_feedback
+                  ? `Feedback: ${row.original.moderators_feedback}`
+                  : undefined
+              }
+            >
+              {status === "on_review"
+                ? "On Review"
+                : status === "featured"
+                  ? "Featured"
+                  : status === "posted"
+                    ? "Posted"
+                    : "None"}
+            </span>
+          </div>
+        )
+      },
+      size: 100,
+      sortingFn: "status",
+    },
+    {
+      header: "Visibility",
+      id: "is_private",
+      accessorFn: (row) => (row.is_private ? "private" : "public"),
+      cell: ({ row }) => {
+        const isPrivate = row.original.is_private
+        return (
+          <div>
+            <span
+              className={cn(
+                "px-2 py-1 text-xs rounded",
+                isPrivate
+                  ? "bg-muted text-muted-foreground"
+                  : "bg-green-100 text-green-700",
+              )}
+            >
+              {isPrivate ? "Private" : "Public"}
+            </span>
+          </div>
+        )
+      },
+      size: 100,
+      sortingFn: "visibility",
+    },
+    {
+      header: "Created",
+      id: "created_at",
+      accessorFn: (row) => row.updated_at || row.created_at || "",
+      cell: ({ row }) => {
+        // Use updated_at if created_at is not available
+        const dateValue = row.original.created_at || row.original.updated_at
+
+        try {
+          // Format as actual date instead of relative time
+          const date = new Date(dateValue || "")
+          return (
+            <div>
+              {date.toLocaleDateString("en-US", {
+                year: "numeric",
+                month: "short",
+                day: "numeric",
+              })}
+            </div>
+          )
+        } catch (e) {
+          return <div>Unknown</div>
+        }
+      },
+      size: 150,
+      sortingFn: "updated-at",
+    },
+    {
+      header: "Views",
+      id: "view_count",
+      accessorFn: (row) => {
+        // Match exactly how card.tsx gets viewCount
+        return row.view_count || 0
+      },
+      cell: ({ row }) => {
+        // Get view count exactly as card.tsx does it
+        const viewCount = row.original.view_count || 0
+
+        // Log this row's view count on first render
+        if (row.index === 0) {
+          console.log(`Row ${row.index} view_count:`, {
+            original: row.original.view_count,
+            formatted: formatNumber(viewCount),
+            componentDownloads: row.original.component?.downloads_count,
+          })
+        }
+
+        return (
+          <div className="text-right">{formatNumberWithSpaces(viewCount)}</div>
+        )
+      },
+      size: 80,
+      sortingFn: "view-count",
+    },
+    {
+      header: "Likes",
+      id: "bookmarks_count",
+      accessorFn: (row) => {
+        // Match exactly how card.tsx gets bookmarksCount
+        return row.bookmarks_count || 0
+      },
+      cell: ({ row }) => {
+        // Get bookmarks count exactly as card.tsx does it
+        const bookmarksCount = row.original.bookmarks_count || 0
+
+        // Log this row's bookmarks count on first render
+        if (row.index === 0) {
+          console.log(`Row ${row.index} bookmarks_count:`, {
+            original: row.original.bookmarks_count,
+            formatted: formatNumber(bookmarksCount),
+            componentLikes: row.original.component?.likes_count,
+          })
+        }
+
+        return (
+          <div className="text-right">
+            {formatNumberWithSpaces(bookmarksCount)}
+          </div>
+        )
+      },
+      size: 80,
+      sortingFn: "bookmarks-count",
+    },
+  ]
+
+  // Ensure demos is always an array
+  const safeData = Array.isArray(demos) ? demos : []
+
+  // Debug the first demo to see its structure
+  useEffect(() => {
+    if (safeData.length > 0) {
+      // Create a sample demo object for debugging
+      const sampleDemo = safeData[0] as ExtendedDemoWithComponent
+
+      // Compare all data access methods
+      console.log("DEBUG - Data access methods comparison:", {
+        // Direct access (used in table)
+        directViewCount: sampleDemo.view_count || 0,
+        directBookmarksCount: sampleDemo.bookmarks_count || 0,
+
+        // Card.tsx method simulation
+        cardViewCount: sampleDemo.view_count || 0,
+        cardBookmarksCount: sampleDemo.bookmarks_count || 0,
+
+        // Check if nested component properties exist
+        componentDownloads: sampleDemo.component?.downloads_count,
+        componentLikes: sampleDemo.component?.likes_count,
+
+        // Raw values for comparison
+        rawViewCount: sampleDemo.view_count,
+        rawBookmarksCount: sampleDemo.bookmarks_count,
+
+        // New fields from v2 function
+        isPrivate: sampleDemo.is_private,
+        submissionStatus: sampleDemo.submission_status,
+        moderatorsFeedback: sampleDemo.moderators_feedback,
+
+        // Demo structure overview
+        id: sampleDemo.id,
+        name: sampleDemo.name,
+        updated_at: sampleDemo.updated_at,
+        created_at: sampleDemo.created_at,
+        keys: Object.keys(sampleDemo),
+      })
+    }
+  }, [safeData])
+
+  const table = useReactTable({
+    data: safeData,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    onSortingChange: setSorting,
+    enableSortingRemoval: false,
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    state: {
+      sorting,
+      pagination,
+    },
+    // Custom sort functions for specific columns
+    getSortedRowModel: getSortedRowModel(),
+    sortingFns: {
+      "updated-at": (rowA, rowB, columnId) => {
+        const a = rowA.original.updated_at || rowA.original.created_at || ""
+        const b = rowB.original.updated_at || rowB.original.created_at || ""
+
+        // Convert to dates for comparison
+        const dateA = a ? new Date(a).getTime() : 0
+        const dateB = b ? new Date(b).getTime() : 0
+
+        return dateA > dateB ? 1 : dateA < dateB ? -1 : 0
+      },
+      "view-count": (rowA, rowB, columnId) => {
+        // Match exactly how card.tsx gets viewCount
+        const a = rowA.original.view_count || 0
+        const b = rowB.original.view_count || 0
+        return a > b ? 1 : a < b ? -1 : 0
+      },
+      "bookmarks-count": (rowA, rowB, columnId) => {
+        // Match exactly how card.tsx gets bookmarksCount
+        const a = rowA.original.bookmarks_count || 0
+        const b = rowB.original.bookmarks_count || 0
+        return a > b ? 1 : a < b ? -1 : 0
+      },
+      status: (rowA, rowB, columnId) => {
+        // Status priority: featured > posted > on_review > null
+        const statusPriority = {
+          featured: 4,
+          posted: 3,
+          on_review: 2,
+          null: 1,
+        }
+
+        const statusA = rowA.original.submission_status || "featured"
+        const statusB = rowB.original.submission_status || "featured"
+
+        const priorityA =
+          statusPriority[statusA as keyof typeof statusPriority] || 0
+        const priorityB =
+          statusPriority[statusB as keyof typeof statusPriority] || 0
+
+        return priorityA > priorityB ? 1 : priorityA < priorityB ? -1 : 0
+      },
+      visibility: (rowA, rowB, columnId) => {
+        // Public first, then private
+        const a = rowA.original.is_private ? 0 : 1
+        const b = rowB.original.is_private ? 0 : 1
+        return a > b ? 1 : a < b ? -1 : 0
+      },
+    },
+  })
+
+  // Safely get page count
+  const pageCount = table ? table.getPageCount() : 0
+  const currentPage = table ? table.getState().pagination.pageIndex + 1 : 1
+
+  // Create an array of page numbers to render
+  const pageNumbers: (number | "ellipsis")[] = []
+  if (pageCount <= 5) {
+    // If 5 or fewer pages, show all
+    for (let i = 1; i <= pageCount; i++) {
+      pageNumbers.push(i)
+    }
+  } else {
+    // Always show first page
+    pageNumbers.push(1)
+
+    // Calculate range to show around current page
+    if (currentPage <= 3) {
+      // Near start
+      pageNumbers.push(2, 3, 4)
+      pageNumbers.push("ellipsis")
+    } else if (currentPage >= pageCount - 2) {
+      // Near end
+      pageNumbers.push("ellipsis")
+      pageNumbers.push(pageCount - 3, pageCount - 2, pageCount - 1)
+    } else {
+      // Middle
+      pageNumbers.push("ellipsis")
+      pageNumbers.push(currentPage - 1, currentPage, currentPage + 1)
+      pageNumbers.push("ellipsis")
+    }
+
+    // Always show last page
+    pageNumbers.push(pageCount)
+  }
+
   return (
-    <div className="rounded-md border">
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Name</TableHead>
-            <TableHead>Created</TableHead>
-            <TableHead className="text-right">Views</TableHead>
-            <TableHead className="text-right">Likes</TableHead>
-            <TableHead className="text-right">Actions</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {components.map((component) => (
-            <TableRow key={component.id}>
-              <TableCell className="font-medium">{component.name}</TableCell>
-              <TableCell>
-                {formatDistanceToNow(new Date(component.created_at), {
-                  addSuffix: true,
+    <div className="space-y-4">
+      <div className="overflow-hidden rounded-lg border border-border bg-background">
+        <Table className="table-fixed">
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id} className="hover:bg-transparent">
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead
+                      key={header.id}
+                      style={{ width: `${header.getSize()}px` }}
+                      className="h-11"
+                    >
+                      {header.isPlaceholder ? null : header.column.getCanSort() ? (
+                        <div
+                          className={cn(
+                            header.column.getCanSort() &&
+                              "flex h-full cursor-pointer select-none items-center gap-2",
+                            header.id === "view_count" ||
+                              header.id === "bookmarks_count"
+                              ? "justify-end"
+                              : "justify-between",
+                          )}
+                          onClick={header.column.getToggleSortingHandler()}
+                          onKeyDown={(e) => {
+                            if (
+                              header.column.getCanSort() &&
+                              (e.key === "Enter" || e.key === " ")
+                            ) {
+                              e.preventDefault()
+                              header.column.getToggleSortingHandler()?.(e)
+                            }
+                          }}
+                          tabIndex={header.column.getCanSort() ? 0 : undefined}
+                        >
+                          {flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )}
+                          {{
+                            asc: (
+                              <ChevronUp
+                                className="shrink-0 opacity-60"
+                                size={16}
+                                strokeWidth={2}
+                                aria-hidden="true"
+                              />
+                            ),
+                            desc: (
+                              <ChevronDown
+                                className="shrink-0 opacity-60"
+                                size={16}
+                                strokeWidth={2}
+                                aria-hidden="true"
+                              />
+                            ),
+                          }[header.column.getIsSorted() as string] ?? null}
+                        </div>
+                      ) : (
+                        flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )
+                      )}
+                    </TableHead>
+                  )
                 })}
-              </TableCell>
-              <TableCell className="text-right">
-                {component.downloads_count}
-              </TableCell>
-              <TableCell className="text-right">
-                {component.likes_count}
-              </TableCell>
-              <TableCell className="text-right">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => onEdit && onEdit(component)}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center text-muted-foreground"
                 >
-                  Edit
-                </Button>
-              </TableCell>
-            </TableRow>
-          ))}
-          {components.length === 0 && (
-            <TableRow>
-              <TableCell
-                colSpan={5}
-                className="h-24 text-center text-muted-foreground"
-              >
-                No components published yet
-              </TableCell>
-            </TableRow>
-          )}
-        </TableBody>
-      </Table>
+                  No demos published yet
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Pagination */}
+      {demos.length > 0 && (
+        <div className="flex items-center justify-between gap-8">
+          {/* Results per page */}
+          <div className="flex items-center gap-3">
+            <Label htmlFor={id} className="max-sm:sr-only">
+              Rows per page
+            </Label>
+            <Select
+              value={table.getState().pagination.pageSize.toString()}
+              onValueChange={(value) => {
+                table.setPageSize(Number(value))
+              }}
+            >
+              <SelectTrigger id={id} className="w-fit whitespace-nowrap">
+                <SelectValue placeholder="Select rows" />
+              </SelectTrigger>
+              <SelectContent>
+                {[5, 10, 20, 50].map((pageSize) => (
+                  <SelectItem key={pageSize} value={pageSize.toString()}>
+                    {pageSize}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Page number information */}
+          <div className="hidden md:flex grow whitespace-nowrap text-sm text-muted-foreground">
+            <p
+              className="whitespace-nowrap text-sm text-muted-foreground"
+              aria-live="polite"
+            >
+              <span className="text-foreground">
+                {Math.min(table.getRowCount(), 1) > 0
+                  ? table.getState().pagination.pageIndex *
+                      table.getState().pagination.pageSize +
+                    1
+                  : 0}
+                -
+                {Math.min(
+                  (table.getState().pagination.pageIndex + 1) *
+                    table.getState().pagination.pageSize,
+                  table.getRowCount(),
+                )}
+              </span>{" "}
+              of{" "}
+              <span className="text-foreground">
+                {table.getRowCount().toString()}
+              </span>
+            </p>
+          </div>
+
+          {/* Pagination UI */}
+          <Pagination>
+            <PaginationContent>
+              <PaginationItem>
+                <PaginationPrevious
+                  href="#"
+                  onClick={(e) => {
+                    e.preventDefault()
+                    table.previousPage()
+                  }}
+                  aria-disabled={!table.getCanPreviousPage()}
+                  className={
+                    !table.getCanPreviousPage()
+                      ? "pointer-events-none opacity-50"
+                      : ""
+                  }
+                />
+              </PaginationItem>
+
+              {pageNumbers.map((page, i) =>
+                page === "ellipsis" ? (
+                  <PaginationItem key={`ellipsis-${i}`}>
+                    <PaginationEllipsis />
+                  </PaginationItem>
+                ) : (
+                  <PaginationItem key={page}>
+                    <PaginationLink
+                      href="#"
+                      isActive={currentPage === page}
+                      onClick={(e) => {
+                        e.preventDefault()
+                        table.setPageIndex(page - 1)
+                      }}
+                    >
+                      {page}
+                    </PaginationLink>
+                  </PaginationItem>
+                ),
+              )}
+
+              <PaginationItem>
+                <PaginationNext
+                  href="#"
+                  onClick={(e) => {
+                    e.preventDefault()
+                    table.nextPage()
+                  }}
+                  aria-disabled={!table.getCanNextPage()}
+                  className={
+                    !table.getCanNextPage()
+                      ? "pointer-events-none opacity-50"
+                      : ""
+                  }
+                />
+              </PaginationItem>
+            </PaginationContent>
+          </Pagination>
+        </div>
+      )}
     </div>
   )
 }
+
+// Backward compatibility export for existing imports
+export const ComponentsTable = DemosTable
diff --git a/apps/web/components/ui/pagination.tsx b/apps/web/components/ui/pagination.tsx
new file mode 100644
index 00000000..66670cda
--- /dev/null
+++ b/apps/web/components/ui/pagination.tsx
@@ -0,0 +1,117 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { ButtonProps, buttonVariants } from "@/components/ui/button"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className,
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}
diff --git a/apps/web/lib/utils/transformData.ts b/apps/web/lib/utils/transformData.ts
index 5435672f..9f5dbe3d 100644
--- a/apps/web/lib/utils/transformData.ts
+++ b/apps/web/lib/utils/transformData.ts
@@ -33,6 +33,9 @@ export const transformDemoResult = (result: any): DemoWithComponent => {
     embedding: result.embedding || null,
     embedding_oai: result.embedding_oai || null,
     bundle_url: result.bundle_url || null,
+    is_private: result.is_private || false,
+    submission_status: result.submission_status || "featured",
+    moderators_feedback: result.moderators_feedback || null,
   }
   return transformed
 }
diff --git a/apps/web/package.json b/apps/web/package.json
index 512a51a6..dfe4aac0 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -59,6 +59,7 @@
     "@tabler/icons-react": "^3.26.0",
     "@tailwindcss/typography": "^0.5.15",
     "@tanstack/react-query": "^5.59.0",
+    "@tanstack/react-table": "^8.21.2",
     "@types/prismjs": "^1.26.4",
     "autoprefixer": "^10.4.20",
     "cheerio": "^1.0.0",
diff --git a/apps/web/types/supabase.ts b/apps/web/types/supabase.ts
index 49661ce3..7d2b59d0 100644
--- a/apps/web/types/supabase.ts
+++ b/apps/web/types/supabase.ts
@@ -2128,6 +2128,30 @@ export type Database = {
           component_user_data: Json
         }[]
       }
+      get_user_profile_demo_list_v2: {
+        Args: {
+          p_user_id: string
+        }
+        Returns: {
+          id: number
+          name: string
+          preview_url: string
+          video_url: string
+          updated_at: string
+          created_at: string
+          demo_slug: string
+          component_data: Json
+          user_data: Json
+          component_user_data: Json
+          total_count: number
+          view_count: number
+          bookmarks_count: number
+          bundle_url: Json
+          is_private: boolean
+          submission_status: string
+          moderators_feedback: string
+        }[]
+      }
       get_user_state: {
         Args: {
           user_id_param: string
diff --git a/package.json b/package.json
index 37e0fda5..91ba80e2 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@radix-ui/react-radio-group": "^1.2.3",
+    "@tanstack/react-table": "^8.21.2",
     "emblor": "^1.4.7",
     "jotai": "2.8.0",
     "next": "^15.2.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 38dadb07..d307e381 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       '@radix-ui/react-radio-group':
         specifier: ^1.2.3
         version: 1.2.3(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@tanstack/react-table':
+        specifier: ^8.21.2
+        version: 8.21.2(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
       emblor:
         specifier: ^1.4.7
         version: 1.4.7(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)(typescript@5.6.3)
@@ -232,6 +235,9 @@ importers:
       '@tanstack/react-query':
         specifier: ^5.59.0
         version: 5.59.16(react@19.0.0)
+      '@tanstack/react-table':
+        specifier: ^8.21.2
+        version: 8.21.2(react-dom@19.0.0)(react@19.0.0)
       '@types/prismjs':
         specifier: ^1.26.4
         version: 1.26.5
@@ -7392,6 +7398,35 @@ packages:
       react: 19.0.0
     dev: false
 
+  /@tanstack/react-table@8.21.2(react-dom@19.0.0)(react@19.0.0):
+    resolution: {integrity: sha512-11tNlEDTdIhMJba2RBH+ecJ9l1zgS2kjmexDPAraulc8jeNA4xocSNeyzextT0XJyASil4XsCYlJmf5jEWAtYg==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+    dependencies:
+      '@tanstack/table-core': 8.21.2
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+    dev: false
+
+  /@tanstack/react-table@8.21.2(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+    resolution: {integrity: sha512-11tNlEDTdIhMJba2RBH+ecJ9l1zgS2kjmexDPAraulc8jeNA4xocSNeyzextT0XJyASil4XsCYlJmf5jEWAtYg==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+    dependencies:
+      '@tanstack/table-core': 8.21.2
+      react: 19.0.0-rc-fb9a90fa48-20240614
+      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+    dev: false
+
+  /@tanstack/table-core@8.21.2:
+    resolution: {integrity: sha512-uvXk/U4cBiFMxt+p9/G7yUWI/UbHYbyghLCjlpWZ3mLeIZiUBSKcUnw9UnKkdRz7Z/N4UBuFLWQdJCjUe7HjvA==}
+    engines: {node: '>=12'}
+    dev: false
+
   /@tootallnate/quickjs-emscripten@0.23.0:
     resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
     dev: true

From 95b1b112a03c58dbe5621b24e034339590a1399f Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Wed, 2 Apr 2025 17:59:00 +0300
Subject: [PATCH 008/143] fix

---
 .../features/studio/components-table.tsx           | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/apps/web/components/features/studio/components-table.tsx b/apps/web/components/features/studio/components-table.tsx
index b4443ac1..e62dca51 100644
--- a/apps/web/components/features/studio/components-table.tsx
+++ b/apps/web/components/features/studio/components-table.tsx
@@ -9,8 +9,6 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
-import { Button } from "@/components/ui/button"
-import { formatDistanceToNow } from "date-fns"
 import { cn } from "@/lib/utils"
 import { Checkbox } from "@/components/ui/checkbox"
 import {
@@ -225,7 +223,7 @@ export function DemosTable({ demos = [], onEdit }: DemosTableProps) {
         )
       },
       size: 100,
-      sortingFn: "status",
+      sortingFn: "alphanumeric",
     },
     {
       header: "Visibility",
@@ -249,7 +247,7 @@ export function DemosTable({ demos = [], onEdit }: DemosTableProps) {
         )
       },
       size: 100,
-      sortingFn: "visibility",
+      sortingFn: "alphanumeric",
     },
     {
       header: "Created",
@@ -276,7 +274,7 @@ export function DemosTable({ demos = [], onEdit }: DemosTableProps) {
         }
       },
       size: 150,
-      sortingFn: "updated-at",
+      sortingFn: "alphanumeric",
     },
     {
       header: "Views",
@@ -303,7 +301,7 @@ export function DemosTable({ demos = [], onEdit }: DemosTableProps) {
         )
       },
       size: 80,
-      sortingFn: "view-count",
+      sortingFn: "alphanumeric",
     },
     {
       header: "Likes",
@@ -332,7 +330,7 @@ export function DemosTable({ demos = [], onEdit }: DemosTableProps) {
         )
       },
       size: 80,
-      sortingFn: "bookmarks-count",
+      sortingFn: "alphanumeric",
     },
   ]
 
@@ -391,8 +389,6 @@ export function DemosTable({ demos = [], onEdit }: DemosTableProps) {
       sorting,
       pagination,
     },
-    // Custom sort functions for specific columns
-    getSortedRowModel: getSortedRowModel(),
     sortingFns: {
       "updated-at": (rowA, rowB, columnId) => {
         const a = rowA.original.updated_at || rowA.original.created_at || ""

From abd0194f9c4398e4bf7c5ae4bee96ab9837333a5 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Wed, 2 Apr 2025 18:03:09 +0300
Subject: [PATCH 009/143] fixes

---
 apps/web/app/studio/[username]/page.tsx                  | 1 -
 apps/web/components/features/studio/components-table.tsx | 4 +---
 apps/web/components/features/studio/studio-layout.tsx    | 2 --
 3 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/apps/web/app/studio/[username]/page.tsx b/apps/web/app/studio/[username]/page.tsx
index 74c33c7d..6005a121 100644
--- a/apps/web/app/studio/[username]/page.tsx
+++ b/apps/web/app/studio/[username]/page.tsx
@@ -1,5 +1,4 @@
 import { redirect } from "next/navigation"
-import { Footer } from "@/components/ui/footer"
 import { supabaseWithAdminAccess } from "@/lib/supabase"
 import { auth } from "@clerk/nextjs/server"
 import { unstable_cache } from "next/cache"
diff --git a/apps/web/components/features/studio/components-table.tsx b/apps/web/components/features/studio/components-table.tsx
index e62dca51..3b92fe79 100644
--- a/apps/web/components/features/studio/components-table.tsx
+++ b/apps/web/components/features/studio/components-table.tsx
@@ -582,9 +582,7 @@ export function DemosTable({ demos = [], onEdit }: DemosTableProps) {
         <div className="flex items-center justify-between gap-8">
           {/* Results per page */}
           <div className="flex items-center gap-3">
-            <Label htmlFor={id} className="max-sm:sr-only">
-              Rows per page
-            </Label>
+            <Label htmlFor={id} className="max-sm:sr-only whitespace-nowrap">Rows per page</Label>
             <Select
               value={table.getState().pagination.pageSize.toString()}
               onValueChange={(value) => {
diff --git a/apps/web/components/features/studio/studio-layout.tsx b/apps/web/components/features/studio/studio-layout.tsx
index 8fc7efd1..5487b343 100644
--- a/apps/web/components/features/studio/studio-layout.tsx
+++ b/apps/web/components/features/studio/studio-layout.tsx
@@ -1,7 +1,6 @@
 "use client"
 
 import { Header } from "@/components/ui/header.client"
-import { Footer } from "@/components/ui/footer"
 import { StudioSidebar } from "./studio-sidebar"
 import { User } from "@/types/global"
 import { ReactNode } from "react"
@@ -22,7 +21,6 @@ export function StudioLayout({ user, children }: StudioLayoutProps) {
           <SidebarInset className="p-8">{children}</SidebarInset>
         </SidebarProvider>
       </div>
-      <Footer />
     </div>
   )
 }

From 8778784e02cf4b43549d612603e2e08272d9895f Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Wed, 2 Apr 2025 20:31:48 +0300
Subject: [PATCH 010/143] init pre processing

---
 .../api/studio/preprocess-component/route.ts  | 229 ++++++++++++++++++
 .../web/app/studio/[username]/page.client.tsx |   2 +-
 .../features/studio/publish-dialog.tsx        |  97 --------
 .../studio/publish/publish-dialog.tsx         | 175 +++++++++++++
 apps/web/components/ui/code-editor-dialog.tsx |   4 +-
 .../components/ui/edit-component-dialog.tsx   |  10 +-
 6 files changed, 412 insertions(+), 105 deletions(-)
 create mode 100644 apps/web/app/api/studio/preprocess-component/route.ts
 delete mode 100644 apps/web/components/features/studio/publish-dialog.tsx
 create mode 100644 apps/web/components/features/studio/publish/publish-dialog.tsx

diff --git a/apps/web/app/api/studio/preprocess-component/route.ts b/apps/web/app/api/studio/preprocess-component/route.ts
new file mode 100644
index 00000000..c5d6653d
--- /dev/null
+++ b/apps/web/app/api/studio/preprocess-component/route.ts
@@ -0,0 +1,229 @@
+import OpenAI from "openai"
+import { NextResponse } from "next/server"
+import { makeSlugFromName } from "@/components/features/publish-old/hooks/use-is-check-slug-available"
+import { supabaseWithAdminAccess } from "@/lib/supabase"
+import { defaultTailwindConfig, defaultGlobalCss } from "@/lib/sandpack"
+
+const openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+})
+
+// Mock response for testing when OpenAI API is not available
+const MOCK_RESPONSE = {
+  componentName: "ExampleComponent",
+  registryType: "ui",
+  shadcnImports: ["Button", "Dialog", "Input"],
+  nonStandardImports: ["SomeCustomComponent"],
+  npmDependencies: ["react", "next", "lucide-react"],
+  requiresAdditionalStyles: false,
+}
+
+export async function POST(request: Request) {
+  try {
+    const { code, userId } = await request.json()
+
+    if (!code) {
+      return NextResponse.json(
+        { error: "Component code is required" },
+        { status: 400 },
+      )
+    }
+
+    if (!userId) {
+      return NextResponse.json(
+        { error: "User ID is required" },
+        { status: 400 },
+      )
+    }
+
+    // Process the component code with OpenAI
+    let result
+    try {
+      result = await preprocessComponent(code)
+    } catch (error) {
+      console.error("OpenAI API error:", error)
+      // If OpenAI fails, use mock response for testing
+      console.log("Using mock response due to OpenAI API unavailability")
+      result = MOCK_RESPONSE
+    }
+
+    // Generate slug for the component
+    const slug = makeSlugFromName(result.componentName)
+
+    // Check if slug is unique
+    const isUnique = await checkSlugUnique(slug, userId)
+
+    // If not unique, generate a unique slug
+    const finalSlug = isUnique ? slug : await generateUniqueSlug(slug, userId)
+
+    return NextResponse.json({
+      ...result,
+      slug: finalSlug,
+    })
+  } catch (error) {
+    console.error("Error preprocessing component:", error)
+    return NextResponse.json(
+      { error: "Failed to preprocess component" },
+      { status: 500 },
+    )
+  }
+}
+
+async function preprocessComponent(code: string) {
+  // Try to detect component name from code before using OpenAI
+  // This is a basic regex approach to find component declarations
+  let componentName = extractComponentName(code) || "Component"
+
+  const response = await openai.chat.completions.create({
+    model: "gpt-4o",
+    messages: [
+      {
+        role: "system",
+        content: `You are a code analyzer specializing in React components. Analyze the provided React component code and extract the following information:
+1. Component name (the function or class name of the component)
+2. Registry type: Determine if it belongs to: 
+   - 'ui' (basic components like Button, Card, etc.)
+   - 'hooks' (custom React hooks)
+   - 'blocks' (larger components like hero sections, pricing sections, etc.)
+3. Identify any shadcn/ui imports from 'components/ui/' and list their names (one of the following): 
+	1.	Accordion
+	2.	Alert
+	3.	Alert Dialog
+	4.	Aspect Ratio
+	5.	Avatar
+	6.	Badge
+	7.	Breadcrumb
+	8.	Button
+	9.	Calendar
+	10.	Card
+	11.	Carousel
+	12.	Chart
+	13.	Checkbox
+	14.	Collapsible
+	15.	Combobox
+	16.	Command
+	17.	Context Menu
+	18.	Data Table
+	19.	Date Picker
+	20.	Dialog
+	21.	Drawer
+	22.	Dropdown Menu
+	23.	Form
+	24.	Hover Card
+	25.	Input
+	26.	Input OTP
+	27.	Label
+	28.	Menubar
+	29.	Navigation Menu
+	30.	Pagination
+	31.	Popover
+	32.	Progress
+	33.	Radio Group
+	34.	Resizable
+	35.	Scroll Area
+	36.	Select
+	37.	Separator
+	38.	Sheet
+	39.	Sidebar
+	40.	Skeleton
+	41.	Slider
+	42.	Sonner
+	43.	Switch
+	44.	Table
+	45.	Tabs
+	46.	Textarea
+	47.	Toast
+	48.	Toggle
+	49.	Toggle Group
+	50.	Tooltip
+)
+4. Identify any non-shadcn/ui component imports (including @/hooks and @/components/[registry]/ components, excluding standart shadcn files like { cn } from "@/lib/utils)
+5. List all npm package dependencies used in the component (excluding react, react-dom, tailwindcss, and any packages starting with 'next' or '@/')
+6. Analyze if the component requires additional CSS styles beyond what's provided in the default shadcn/ui Tailwind configuration and globals CSS.
+
+Here's the default Tailwind configuration:
+\`\`\`js
+${defaultTailwindConfig}
+\`\`\`
+
+And here's the default globals CSS:
+\`\`\`css
+${defaultGlobalCss}
+\`\`\`
+
+Respond in JSON format only with the following structure:
+{
+  "componentName": "string",
+  "registryType": "ui|hooks|blocks",
+  "shadcnImports": ["string"],
+  "nonStandardImports": ["string"],
+  "npmDependencies": ["string"],
+  "requiresAdditionalStyles": boolean
+}`,
+      },
+      {
+        role: "user",
+        content: code,
+      },
+    ],
+    response_format: { type: "json_object" },
+    temperature: 0.1,
+  })
+
+  // Handle the case where the content might be undefined
+  const content = response.choices[0]?.message?.content
+  if (!content) {
+    throw new Error("No content returned from OpenAI")
+  }
+
+  return JSON.parse(content)
+}
+
+// Helper function to extract component name from code using regex
+function extractComponentName(code: string): string | null {
+  // Look for function/const component declarations
+  const functionMatch = code.match(/function\s+([A-Z][a-zA-Z0-9_]*)/)
+  const constMatch = code.match(
+    /const\s+([A-Z][a-zA-Z0-9_]*)\s*=\s*(\(|\{|React\.forwardRef)/,
+  )
+  const exportMatch = code.match(
+    /export\s+(?:default\s+)?(?:function|const)\s+([A-Z][a-zA-Z0-9_]*)/,
+  )
+
+  return exportMatch?.[1] || functionMatch?.[1] || constMatch?.[1] || null
+}
+
+async function checkSlugUnique(slug: string, userId: string): Promise<boolean> {
+  const supabase = supabaseWithAdminAccess
+
+  const { data, error } = await supabase
+    .from("components")
+    .select("id")
+    .eq("component_slug", slug)
+    .eq("user_id", userId)
+
+  if (error) {
+    console.error("Error checking slug uniqueness:", error)
+    return false
+  }
+
+  return data?.length === 0
+}
+
+async function generateUniqueSlug(
+  baseSlug: string,
+  userId: string,
+): Promise<string> {
+  const supabase = supabaseWithAdminAccess
+  let newSlug = baseSlug
+  let isUnique = await checkSlugUnique(newSlug, userId)
+  let suffix = 1
+
+  while (!isUnique) {
+    newSlug = `${baseSlug}-${suffix}`
+    isUnique = await checkSlugUnique(newSlug, userId)
+    suffix += 1
+  }
+
+  return newSlug
+}
diff --git a/apps/web/app/studio/[username]/page.client.tsx b/apps/web/app/studio/[username]/page.client.tsx
index 504b7edb..e3115494 100644
--- a/apps/web/app/studio/[username]/page.client.tsx
+++ b/apps/web/app/studio/[username]/page.client.tsx
@@ -3,7 +3,7 @@
 import { User, DemoWithComponent } from "@/types/global"
 import { StudioLayout } from "@/components/features/studio/studio-layout"
 import { ComponentsTable } from "@/components/features/studio/components-table"
-import { PublishDialog } from "@/components/features/studio/publish-dialog"
+import { PublishDialog } from "@/components/features/studio/publish/publish-dialog"
 import Link from "next/link"
 import { ArrowLeft } from "lucide-react"
 
diff --git a/apps/web/components/features/studio/publish-dialog.tsx b/apps/web/components/features/studio/publish-dialog.tsx
deleted file mode 100644
index 9e29bc1e..00000000
--- a/apps/web/components/features/studio/publish-dialog.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { useState } from "react"
-import { Button } from "@/components/ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog"
-import { Textarea } from "@/components/ui/textarea"
-import { useClerkSupabaseClient } from "@/lib/clerk"
-import { toast } from "sonner"
-import { useRouter } from "next/navigation"
-import { PlusCircle } from "lucide-react"
-
-interface PublishDialogProps {
-  userId: string
-}
-
-export function PublishDialog({ userId }: PublishDialogProps) {
-  const [isOpen, setIsOpen] = useState(false)
-  const [componentCode, setComponentCode] = useState("")
-  const [isPublishing, setIsPublishing] = useState(false)
-  const supabase = useClerkSupabaseClient()
-  const router = useRouter()
-
-  const handlePublish = async () => {
-    if (!componentCode.trim()) {
-      toast.error("Please enter component code")
-      return
-    }
-
-    setIsPublishing(true)
-    try {
-      // Here you would add the logic to parse and validate the component code
-      // Then save it to the database
-      const { error } = await supabase.from("components").insert({
-        code: componentCode,
-        name: "New Component", // Required field
-        component_names: {}, // Required field
-        component_slug: "new-component", // Required field
-        preview_url: "https://placeholder.com", // Required field
-        user_id: userId, // Use the target user ID
-        direct_registry_dependencies: {}, // Required field
-        demo_direct_registry_dependencies: {}, // Required field
-      })
-
-      if (error) throw error
-
-      toast.success("Component published successfully")
-      setIsOpen(false)
-      setComponentCode("")
-      router.refresh()
-    } catch (error) {
-      toast.error("Failed to publish component")
-      console.error("Error publishing component:", error)
-    } finally {
-      setIsPublishing(false)
-    }
-  }
-
-  return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <DialogTrigger asChild>
-        <Button>
-          <PlusCircle className="mr-2 h-4 w-4" />
-          Publish Component
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-[725px]">
-        <DialogHeader>
-          <DialogTitle>Publish New Component</DialogTitle>
-          <DialogDescription>
-            Paste your component code below. Make sure it follows our guidelines
-            and includes all necessary imports.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="grid gap-4 py-4">
-          <Textarea
-            placeholder="Paste your component code here..."
-            value={componentCode}
-            onChange={(e) => setComponentCode(e.target.value)}
-            className="h-[400px] font-mono"
-          />
-          <Button
-            onClick={handlePublish}
-            disabled={isPublishing}
-            className="w-full"
-          >
-            {isPublishing ? "Publishing..." : "Publish Component"}
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
diff --git a/apps/web/components/features/studio/publish/publish-dialog.tsx b/apps/web/components/features/studio/publish/publish-dialog.tsx
new file mode 100644
index 00000000..ab3e18ed
--- /dev/null
+++ b/apps/web/components/features/studio/publish/publish-dialog.tsx
@@ -0,0 +1,175 @@
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Textarea } from "@/components/ui/textarea"
+import { useClerkSupabaseClient } from "@/lib/clerk"
+import { toast } from "sonner"
+import { useRouter } from "next/navigation"
+import { PlusCircle } from "lucide-react"
+import { Spinner } from "@/components/icons/spinner"
+
+interface PublishDialogProps {
+  userId: string
+}
+
+export function PublishDialog({ userId }: PublishDialogProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [componentCode, setComponentCode] = useState("")
+  const [isPublishing, setIsPublishing] = useState(false)
+  const [isProcessing, setIsProcessing] = useState(false)
+  const [processedData, setProcessedData] = useState<any>(null)
+  const supabase = useClerkSupabaseClient()
+  const router = useRouter()
+
+  const handlePreprocess = async () => {
+    if (!componentCode.trim()) {
+      toast.error("Please enter component code")
+      return
+    }
+
+    setIsProcessing(true)
+    try {
+      const response = await fetch("/api/studio/preprocess-component", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          code: componentCode,
+          userId,
+        }),
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.error || "Failed to process component")
+      }
+
+      const data = await response.json()
+      setProcessedData(data)
+      toast.success("Component processed successfully")
+    } catch (error) {
+      toast.error("Failed to process component")
+      console.error("Error processing component:", error)
+    } finally {
+      setIsProcessing(false)
+    }
+  }
+
+  const handlePublish = async () => {
+    if (!componentCode.trim()) {
+      toast.error("Please enter component code")
+      return
+    }
+
+    setIsPublishing(true)
+    try {
+      // Here you would add the logic to parse and validate the component code
+      // Then save it to the database
+      const { error } = await supabase.from("components").insert({
+        code: componentCode,
+        name: processedData?.componentName || "New Component", // Use processed data if available
+        component_names: {}, // Required field
+        component_slug: processedData?.slug || "new-component", // Use processed slug if available
+        preview_url: "https://placeholder.com", // Required field
+        user_id: userId, // Use the target user ID
+        direct_registry_dependencies: {}, // Required field
+        demo_direct_registry_dependencies: {}, // Required field
+      })
+
+      if (error) throw error
+
+      toast.success("Component published successfully")
+      setIsOpen(false)
+      setComponentCode("")
+      setProcessedData(null)
+      router.refresh()
+    } catch (error) {
+      toast.error("Failed to publish component")
+      console.error("Error publishing component:", error)
+    } finally {
+      setIsPublishing(false)
+    }
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button>
+          <PlusCircle className="mr-2 h-4 w-4" />
+          Publish Component
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[725px]">
+        <DialogHeader>
+          <DialogTitle>Publish New Component</DialogTitle>
+          <DialogDescription>
+            Paste your component code below. Make sure it follows our guidelines
+            and includes all necessary imports.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <Textarea
+            placeholder="Paste your component code here..."
+            value={componentCode}
+            onChange={(e) => setComponentCode(e.target.value)}
+            className="h-[400px] font-mono"
+          />
+
+          <div className="flex gap-2">
+            <Button
+              onClick={handlePreprocess}
+              disabled={isProcessing || !componentCode.trim()}
+              className="flex-1"
+              variant="outline"
+            >
+              {isProcessing ? (
+                <>
+                  <span className="mr-2">
+                    <Spinner size={16} />
+                  </span>
+                  Processing...
+                </>
+              ) : (
+                "Process Component"
+              )}
+            </Button>
+
+            <Button
+              onClick={handlePublish}
+              disabled={isPublishing || !componentCode.trim()}
+              className="flex-1"
+            >
+              {isPublishing ? (
+                <>
+                  <span className="mr-2">
+                    <Spinner size={16} />
+                  </span>
+                  Publishing...
+                </>
+              ) : (
+                "Publish Component"
+              )}
+            </Button>
+          </div>
+
+          {processedData && (
+            <div className="mt-4 rounded-md border p-4">
+              <h3 className="mb-2 font-medium">Processed Component Data:</h3>
+              <pre className="max-h-[200px] overflow-auto rounded-md bg-slate-100 p-2 text-xs">
+                {JSON.stringify(processedData, null, 2)}
+              </pre>
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/web/components/ui/code-editor-dialog.tsx b/apps/web/components/ui/code-editor-dialog.tsx
index a4c1bb64..f7ab56e9 100644
--- a/apps/web/components/ui/code-editor-dialog.tsx
+++ b/apps/web/components/ui/code-editor-dialog.tsx
@@ -3,8 +3,8 @@ import { useTheme } from "next-themes"
 import { Button } from "@/components/ui/button"
 import { LoaderCircle } from "lucide-react"
 import { Sheet, SheetContent } from "@/components/ui/sheet"
-import { EditorStep } from "../features/publish/components/code-editor"
-import { DemoPreviewTabs } from "../features/publish/components/preview-with-tabs"
+import { EditorStep } from "../features/publish-old/components/code-editor"
+import { DemoPreviewTabs } from "../features/publish-old/components/preview-with-tabs"
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { useForm, FormProvider } from "react-hook-form"
 import { cn } from "@/lib/utils"
diff --git a/apps/web/components/ui/edit-component-dialog.tsx b/apps/web/components/ui/edit-component-dialog.tsx
index 98636b5a..f81b259a 100644
--- a/apps/web/components/ui/edit-component-dialog.tsx
+++ b/apps/web/components/ui/edit-component-dialog.tsx
@@ -12,7 +12,7 @@ import {
   DrawerHeader,
   DrawerTitle,
 } from "@/components/ui/drawer"
-import { ComponentDetailsForm } from "../features/publish/components/forms/component-form"
+import { ComponentDetailsForm } from "../features/publish-old/components/forms/component-form"
 import {
   Component,
   User,
@@ -22,22 +22,22 @@ import {
   DemoWithTags,
 } from "@/types/global"
 import { useForm } from "react-hook-form"
-import { FormData } from "../features/publish/config/utils"
+import { FormData } from "../features/publish-old/config/utils"
 import { uploadToR2 } from "@/lib/r2"
 import { useMutation } from "@tanstack/react-query"
 import { toast } from "sonner"
 import { useIsMobile } from "@/hooks/use-media-query"
-import { DemoDetailsForm } from "../features/publish/components/forms/demo-form"
+import { DemoDetailsForm } from "../features/publish-old/components/forms/demo-form"
 import { Button } from "@/components/ui/button"
 import { LoaderCircle } from "lucide-react"
-import { EditCodeFileCard } from "../features/publish/components/edit-code-file-card"
+import { EditCodeFileCard } from "../features/publish-old/components/edit-code-file-card"
 import { useTheme } from "next-themes"
 import { useState, useEffect } from "react"
 import { CodeEditorDialog } from "./code-editor-dialog"
 import { addVersionToUrl } from "@/lib/utils/url"
 import { useClerkSupabaseClient } from "@/lib/clerk"
 import { atom, useAtom } from "jotai"
-import { useR2Upload } from "../features/publish/hooks/use-r2-upload"
+import { useR2Upload } from "../features/publish-old/hooks/use-r2-upload"
 
 // Helper function to safely fetch file content
 const safeFetchFile = async (url: string): Promise<string> => {

From 269b64d9cffd83d4c02026d704afb9619165d83b Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Wed, 2 Apr 2025 20:48:30 +0300
Subject: [PATCH 011/143] final pre-processing

---
 .../api/studio/preprocess-component/route.ts  | 78 +++++++++++++++++--
 1 file changed, 70 insertions(+), 8 deletions(-)

diff --git a/apps/web/app/api/studio/preprocess-component/route.ts b/apps/web/app/api/studio/preprocess-component/route.ts
index c5d6653d..57ce93ed 100644
--- a/apps/web/app/api/studio/preprocess-component/route.ts
+++ b/apps/web/app/api/studio/preprocess-component/route.ts
@@ -12,10 +12,23 @@ const openai = new OpenAI({
 const MOCK_RESPONSE = {
   componentName: "ExampleComponent",
   registryType: "ui",
-  shadcnImports: ["Button", "Dialog", "Input"],
-  nonStandardImports: ["SomeCustomComponent"],
+  shadcnComponentsImports: ["Button", "Dialog", "Input"],
+  nonShadcnComponentsImports: ["SomeCustomComponent"],
   npmDependencies: ["react", "next", "lucide-react"],
-  requiresAdditionalStyles: false,
+  additionalStyles: {
+    required: false,
+    tailwindExtensions: {
+      colors: {},
+      animations: {},
+      fontFamily: {},
+      borderRadius: {},
+      boxShadow: {},
+      spacing: {},
+    },
+    cssVariables: [],
+    keyframes: [],
+    utilities: [],
+  },
 }
 
 export async function POST(request: Request) {
@@ -137,9 +150,17 @@ async function preprocessComponent(code: string) {
 	49.	Toggle Group
 	50.	Tooltip
 )
-4. Identify any non-shadcn/ui component imports (including @/hooks and @/components/[registry]/ components, excluding standart shadcn files like { cn } from "@/lib/utils)
+4. Identify any non-shadcn/ui component imports (including @/hooks and @/components/[registry]/ components, excluding npm packages and standard shadcn utilities). 
+   IMPORTANT: DO NOT include imports like { cn } from "@/lib/utils" or any other utility functions. Only include actual component imports.
+
 5. List all npm package dependencies used in the component (excluding react, react-dom, tailwindcss, and any packages starting with 'next' or '@/')
-6. Analyze if the component requires additional CSS styles beyond what's provided in the default shadcn/ui Tailwind configuration and globals CSS.
+6. Analyze if the component requires additional CSS styles that are NOT already provided in the default shadcn/ui Tailwind configuration and globals CSS.
+
+IMPORTANT: Only include styles that are NOT already covered by the default tailwind.config.js and globals.css files provided below. 
+- DO NOT include any standard Tailwind classes like 'flex', 'p-4', 'text-sm', etc.
+- DO NOT include CSS variables that are already defined in the globals.css provided
+- DO NOT include any shadcn/ui component styles, as those are already available
+- ONLY include custom CSS variables, custom keyframes, or custom utilities that the user has defined and would need to be added to make the component work correctly
 
 Here's the default Tailwind configuration:
 \`\`\`js
@@ -155,10 +176,51 @@ Respond in JSON format only with the following structure:
 {
   "componentName": "string",
   "registryType": "ui|hooks|blocks",
-  "shadcnImports": ["string"],
-  "nonStandardImports": ["string"],
+  "shadcnComponentsImports": ["string"],
+  "nonShadcnComponentsImports": ["string"],
   "npmDependencies": ["string"],
-  "requiresAdditionalStyles": boolean
+  "additionalStyles": {
+    "required": boolean,
+    "tailwindExtensions": {
+      "colors": {
+        "color-name": "color-value" // ONLY colors not in default config
+      },
+      "animations": {
+        "animation-name": "animation-definition" // ONLY animations not in default config
+      },
+      "fontFamily": {
+        "font-name": ["font-stack"] // ONLY font families not in default config
+      },
+      "borderRadius": {
+        "radius-name": "radius-value" // ONLY border radius values not in default config
+      },
+      "boxShadow": {
+        "shadow-name": "shadow-value" // ONLY shadows not in default config
+      },
+      "spacing": {
+        "spacing-name": "spacing-value" // ONLY spacing values not in default config
+      }
+    },
+    "cssVariables": [
+      {
+        "name": "--variable-name", // ONLY CSS variables not already defined in globals.css
+        "value": "variable-value",
+        "where": "root|.dark|.component-class|etc"
+      }
+    ],
+    "keyframes": [
+      {
+        "name": "keyframe-name", // ONLY keyframes not already defined in globals.css
+        "definition": "@keyframes keyframe-name { 0% { ... } 100% { ... } }"
+      }
+    ],
+    "utilities": [
+      {
+        "className": ".class-name", // ONLY utility classes not covered by Tailwind or globals.css
+        "definition": "{ property: value; property2: value2; }"
+      }
+    ]
+  }
 }`,
       },
       {

From 26b1550f835c9283642a0f8f5481dc53a24f5661 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Thu, 3 Apr 2025 10:41:36 +0300
Subject: [PATCH 012/143] envs

---
 apps/web/app/api/studio/preprocess-component/route.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/apps/web/app/api/studio/preprocess-component/route.ts b/apps/web/app/api/studio/preprocess-component/route.ts
index 57ce93ed..e20d3583 100644
--- a/apps/web/app/api/studio/preprocess-component/route.ts
+++ b/apps/web/app/api/studio/preprocess-component/route.ts
@@ -15,6 +15,7 @@ const MOCK_RESPONSE = {
   shadcnComponentsImports: ["Button", "Dialog", "Input"],
   nonShadcnComponentsImports: ["SomeCustomComponent"],
   npmDependencies: ["react", "next", "lucide-react"],
+  environmentVariables: [],
   additionalStyles: {
     required: false,
     tailwindExtensions: {
@@ -154,7 +155,8 @@ async function preprocessComponent(code: string) {
    IMPORTANT: DO NOT include imports like { cn } from "@/lib/utils" or any other utility functions. Only include actual component imports.
 
 5. List all npm package dependencies used in the component (excluding react, react-dom, tailwindcss, and any packages starting with 'next' or '@/')
-6. Analyze if the component requires additional CSS styles that are NOT already provided in the default shadcn/ui Tailwind configuration and globals CSS.
+6. Identify any environment variables (process.env.*) that the component requires to function correctly.
+7. Analyze if the component requires additional CSS styles that are NOT already provided in the default shadcn/ui Tailwind configuration and globals CSS.
 
 IMPORTANT: Only include styles that are NOT already covered by the default tailwind.config.js and globals.css files provided below. 
 - DO NOT include any standard Tailwind classes like 'flex', 'p-4', 'text-sm', etc.
@@ -179,6 +181,13 @@ Respond in JSON format only with the following structure:
   "shadcnComponentsImports": ["string"],
   "nonShadcnComponentsImports": ["string"],
   "npmDependencies": ["string"],
+  "environmentVariables": [
+    {
+      "name": "VARIABLE_NAME",
+      "description": "What this variable is used for",
+      "required": boolean
+    }
+  ],
   "additionalStyles": {
     "required": boolean,
     "tailwindExtensions": {

From fffa6624f3a85a9db2c8a88b1833da2c3d2e27c5 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Thu, 3 Apr 2025 11:30:31 +0300
Subject: [PATCH 013/143] sandpack code edit

---
 .../studio/publish/publish-dialog.tsx         | 176 ++++++++++++------
 1 file changed, 121 insertions(+), 55 deletions(-)

diff --git a/apps/web/components/features/studio/publish/publish-dialog.tsx b/apps/web/components/features/studio/publish/publish-dialog.tsx
index ab3e18ed..872431c0 100644
--- a/apps/web/components/features/studio/publish/publish-dialog.tsx
+++ b/apps/web/components/features/studio/publish/publish-dialog.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { Button } from "@/components/ui/button"
 import {
   Dialog,
@@ -8,12 +8,38 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog"
-import { Textarea } from "@/components/ui/textarea"
 import { useClerkSupabaseClient } from "@/lib/clerk"
 import { toast } from "sonner"
 import { useRouter } from "next/navigation"
 import { PlusCircle } from "lucide-react"
 import { Spinner } from "@/components/icons/spinner"
+import {
+  SandpackProvider,
+  SandpackCodeEditor,
+  SandpackProviderProps,
+  useSandpack,
+} from "@codesandbox/sandpack-react"
+import { useTheme } from "next-themes"
+
+// Custom component that monitors code changes in the editor
+function CodeEditorWithUpdates() {
+  const { sandpack } = useSandpack()
+
+  // When files change in sandpack (from user editing), update the parent
+  useEffect(() => {
+    const activeFile = sandpack.activeFile
+    const code = sandpack.files[activeFile]?.code || ""
+
+    // Update the parent state using the updateFile to notify parent
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("SANDPACK_CODE_CHANGE", { detail: { code } }),
+      )
+    }
+  }, [sandpack.files, sandpack.activeFile])
+
+  return <SandpackCodeEditor />
+}
 
 interface PublishDialogProps {
   userId: string
@@ -27,6 +53,29 @@ export function PublishDialog({ userId }: PublishDialogProps) {
   const [processedData, setProcessedData] = useState<any>(null)
   const supabase = useClerkSupabaseClient()
   const router = useRouter()
+  const { resolvedTheme } = useTheme()
+  const isDarkTheme = resolvedTheme === "dark"
+  const [sandpackKey, setSandpackKey] = useState(Date.now())
+
+  // Listen for code changes from the Sandpack editor
+  useEffect(() => {
+    const handleCodeChange = (event: CustomEvent) => {
+      const { code } = event.detail
+      setComponentCode(code)
+    }
+
+    window.addEventListener(
+      "SANDPACK_CODE_CHANGE",
+      handleCodeChange as EventListener,
+    )
+
+    return () => {
+      window.removeEventListener(
+        "SANDPACK_CODE_CHANGE",
+        handleCodeChange as EventListener,
+      )
+    }
+  }, [])
 
   const handlePreprocess = async () => {
     if (!componentCode.trim()) {
@@ -99,71 +148,88 @@ export function PublishDialog({ userId }: PublishDialogProps) {
     }
   }
 
+  const defaultCode = `export default function Component() {
+  return (
+    <div>
+      {/* Your component code here */}
+    </div>
+  )
+}`
+
+  const handleOpenChange = (open: boolean) => {
+    setIsOpen(open)
+    if (!open) {
+      setComponentCode("")
+      setProcessedData(null)
+    } else {
+      // Force re-mount of Sandpack when dialog opens
+      setSandpackKey(Date.now())
+    }
+  }
+
+  const sandpackFiles = {
+    "/App.tsx": componentCode || defaultCode,
+  }
+
+  const providerProps: SandpackProviderProps = {
+    theme: isDarkTheme ? "dark" : "light",
+    template: "react-ts",
+    files: sandpackFiles,
+    options: {
+      activeFile: "/App.tsx",
+      visibleFiles: ["/App.tsx"],
+    },
+  }
+
   return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
         <Button>
           <PlusCircle className="mr-2 h-4 w-4" />
           Publish Component
         </Button>
       </DialogTrigger>
-      <DialogContent className="sm:max-w-[725px]">
-        <DialogHeader>
-          <DialogTitle>Publish New Component</DialogTitle>
-          <DialogDescription>
-            Paste your component code below. Make sure it follows our guidelines
-            and includes all necessary imports.
-          </DialogDescription>
+      <DialogContent
+        className="sm:max-w-[800px] h-[80vh] flex flex-col"
+        hideCloseButton
+      >
+        <DialogHeader className="flex flex-row items-start justify-between border-b pb-4">
+          <div>
+            <DialogTitle>Publish New Component</DialogTitle>
+            <DialogDescription>
+              Enter your component code below. Make sure it follows our
+              guidelines and includes all necessary imports.
+            </DialogDescription>
+          </div>
+          <Button
+            onClick={handlePreprocess}
+            disabled={isProcessing || !componentCode.trim()}
+            className="ml-auto !mt-0"
+          >
+            {isProcessing ? (
+              <>
+                <span className="mr-2">
+                  <Spinner size={16} />
+                </span>
+                Processing...
+              </>
+            ) : (
+              "Process Component"
+            )}
+          </Button>
         </DialogHeader>
-        <div className="grid gap-4 py-4">
-          <Textarea
-            placeholder="Paste your component code here..."
-            value={componentCode}
-            onChange={(e) => setComponentCode(e.target.value)}
-            className="h-[400px] font-mono"
-          />
-
-          <div className="flex gap-2">
-            <Button
-              onClick={handlePreprocess}
-              disabled={isProcessing || !componentCode.trim()}
-              className="flex-1"
-              variant="outline"
-            >
-              {isProcessing ? (
-                <>
-                  <span className="mr-2">
-                    <Spinner size={16} />
-                  </span>
-                  Processing...
-                </>
-              ) : (
-                "Process Component"
-              )}
-            </Button>
-
-            <Button
-              onClick={handlePublish}
-              disabled={isPublishing || !componentCode.trim()}
-              className="flex-1"
-            >
-              {isPublishing ? (
-                <>
-                  <span className="mr-2">
-                    <Spinner size={16} />
-                  </span>
-                  Publishing...
-                </>
-              ) : (
-                "Publish Component"
-              )}
-            </Button>
+
+        <div className="flex-grow overflow-hidden flex flex-col h-full py-4">
+          <div className="h-full min-h-[500px] rounded-md border overflow-hidden">
+            <SandpackProvider key={sandpackKey} {...providerProps}>
+              <CodeEditorWithUpdates />
+            </SandpackProvider>
           </div>
 
           {processedData && (
-            <div className="mt-4 rounded-md border p-4">
+            <div className="mt-4 rounded-md border p-4 overflow-auto max-h-[200px]">
               <h3 className="mb-2 font-medium">Processed Component Data:</h3>
-              <pre className="max-h-[200px] overflow-auto rounded-md bg-slate-100 p-2 text-xs">
+              <pre className="text-xs">
                 {JSON.stringify(processedData, null, 2)}
               </pre>
             </div>

From d2516a879912a524f25c5aa0d6a640f8bb8f0f35 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Thu, 3 Apr 2025 14:08:22 +0300
Subject: [PATCH 014/143] files

---
 .../features/studio/components-table.tsx      |  83 ----
 .../studio/publish/publish-dialog.tsx         | 400 +++++++++++++-----
 2 files changed, 294 insertions(+), 189 deletions(-)

diff --git a/apps/web/components/features/studio/components-table.tsx b/apps/web/components/features/studio/components-table.tsx
index 3b92fe79..a5ba1f0a 100644
--- a/apps/web/components/features/studio/components-table.tsx
+++ b/apps/web/components/features/studio/components-table.tsx
@@ -76,25 +76,7 @@ export function DemosTable({ demos = [], onEdit }: DemosTableProps) {
     return num.toString()
   }
 
-  // Log all preview URLs on component mount for debugging - consolidated into one log
   useEffect(() => {
-    const demosWithoutPreviews = demos.filter((c) => !c.preview_url)
-    const demosWithPreviews = demos.filter((c) => c.preview_url)
-
-    console.log(
-      `Preview status: ${demosWithPreviews.length} with previews, ${demosWithoutPreviews.length} without previews`,
-    )
-
-    if (demosWithoutPreviews.length > 0) {
-      console.log(
-        "Demos missing previews:",
-        demosWithoutPreviews.map((c) => ({
-          id: c.id,
-          name: c.name,
-        })),
-      )
-    }
-
     // Process all preview images at once instead of in each cell
     demos.forEach((demo) => {
       if (demo.preview_url) {
@@ -280,22 +262,10 @@ export function DemosTable({ demos = [], onEdit }: DemosTableProps) {
       header: "Views",
       id: "view_count",
       accessorFn: (row) => {
-        // Match exactly how card.tsx gets viewCount
         return row.view_count || 0
       },
       cell: ({ row }) => {
-        // Get view count exactly as card.tsx does it
         const viewCount = row.original.view_count || 0
-
-        // Log this row's view count on first render
-        if (row.index === 0) {
-          console.log(`Row ${row.index} view_count:`, {
-            original: row.original.view_count,
-            formatted: formatNumber(viewCount),
-            componentDownloads: row.original.component?.downloads_count,
-          })
-        }
-
         return (
           <div className="text-right">{formatNumberWithSpaces(viewCount)}</div>
         )
@@ -307,22 +277,10 @@ export function DemosTable({ demos = [], onEdit }: DemosTableProps) {
       header: "Likes",
       id: "bookmarks_count",
       accessorFn: (row) => {
-        // Match exactly how card.tsx gets bookmarksCount
         return row.bookmarks_count || 0
       },
       cell: ({ row }) => {
-        // Get bookmarks count exactly as card.tsx does it
         const bookmarksCount = row.original.bookmarks_count || 0
-
-        // Log this row's bookmarks count on first render
-        if (row.index === 0) {
-          console.log(`Row ${row.index} bookmarks_count:`, {
-            original: row.original.bookmarks_count,
-            formatted: formatNumber(bookmarksCount),
-            componentLikes: row.original.component?.likes_count,
-          })
-        }
-
         return (
           <div className="text-right">
             {formatNumberWithSpaces(bookmarksCount)}
@@ -337,45 +295,6 @@ export function DemosTable({ demos = [], onEdit }: DemosTableProps) {
   // Ensure demos is always an array
   const safeData = Array.isArray(demos) ? demos : []
 
-  // Debug the first demo to see its structure
-  useEffect(() => {
-    if (safeData.length > 0) {
-      // Create a sample demo object for debugging
-      const sampleDemo = safeData[0] as ExtendedDemoWithComponent
-
-      // Compare all data access methods
-      console.log("DEBUG - Data access methods comparison:", {
-        // Direct access (used in table)
-        directViewCount: sampleDemo.view_count || 0,
-        directBookmarksCount: sampleDemo.bookmarks_count || 0,
-
-        // Card.tsx method simulation
-        cardViewCount: sampleDemo.view_count || 0,
-        cardBookmarksCount: sampleDemo.bookmarks_count || 0,
-
-        // Check if nested component properties exist
-        componentDownloads: sampleDemo.component?.downloads_count,
-        componentLikes: sampleDemo.component?.likes_count,
-
-        // Raw values for comparison
-        rawViewCount: sampleDemo.view_count,
-        rawBookmarksCount: sampleDemo.bookmarks_count,
-
-        // New fields from v2 function
-        isPrivate: sampleDemo.is_private,
-        submissionStatus: sampleDemo.submission_status,
-        moderatorsFeedback: sampleDemo.moderators_feedback,
-
-        // Demo structure overview
-        id: sampleDemo.id,
-        name: sampleDemo.name,
-        updated_at: sampleDemo.updated_at,
-        created_at: sampleDemo.created_at,
-        keys: Object.keys(sampleDemo),
-      })
-    }
-  }, [safeData])
-
   const table = useReactTable({
     data: safeData,
     columns,
@@ -401,13 +320,11 @@ export function DemosTable({ demos = [], onEdit }: DemosTableProps) {
         return dateA > dateB ? 1 : dateA < dateB ? -1 : 0
       },
       "view-count": (rowA, rowB, columnId) => {
-        // Match exactly how card.tsx gets viewCount
         const a = rowA.original.view_count || 0
         const b = rowB.original.view_count || 0
         return a > b ? 1 : a < b ? -1 : 0
       },
       "bookmarks-count": (rowA, rowB, columnId) => {
-        // Match exactly how card.tsx gets bookmarksCount
         const a = rowA.original.bookmarks_count || 0
         const b = rowB.original.bookmarks_count || 0
         return a > b ? 1 : a < b ? -1 : 0
diff --git a/apps/web/components/features/studio/publish/publish-dialog.tsx b/apps/web/components/features/studio/publish/publish-dialog.tsx
index 872431c0..e9f644de 100644
--- a/apps/web/components/features/studio/publish/publish-dialog.tsx
+++ b/apps/web/components/features/studio/publish/publish-dialog.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react"
+import { useState, useCallback, useMemo, useEffect } from "react"
 import { Button } from "@/components/ui/button"
 import {
   Dialog,
@@ -16,29 +16,56 @@ import { Spinner } from "@/components/icons/spinner"
 import {
   SandpackProvider,
   SandpackCodeEditor,
-  SandpackProviderProps,
+  SandpackLayout,
+  SandpackFileExplorer,
+  SandpackFiles,
+  useActiveCode,
   useSandpack,
+  OpenInCodeSandboxButton,
 } from "@codesandbox/sandpack-react"
 import { useTheme } from "next-themes"
 
-// Custom component that monitors code changes in the editor
-function CodeEditorWithUpdates() {
+// Controlled component for code editing
+function CodeEditor({
+  onCodeChange,
+  componentPath,
+}: {
+  onCodeChange: (code: string) => void
+  componentPath: string
+}) {
+  const { code } = useActiveCode()
   const { sandpack } = useSandpack()
 
-  // When files change in sandpack (from user editing), update the parent
   useEffect(() => {
-    const activeFile = sandpack.activeFile
-    const code = sandpack.files[activeFile]?.code || ""
-
-    // Update the parent state using the updateFile to notify parent
-    if (typeof window !== "undefined") {
-      window.dispatchEvent(
-        new CustomEvent("SANDPACK_CODE_CHANGE", { detail: { code } }),
-      )
+    if (code && sandpack.activeFile === componentPath) {
+      onCodeChange(code)
     }
-  }, [sandpack.files, sandpack.activeFile])
+  }, [code, onCodeChange, sandpack.activeFile, componentPath])
 
-  return <SandpackCodeEditor />
+  return (
+    <SandpackCodeEditor
+      showTabs={true}
+      showLineNumbers={true}
+      showInlineErrors={true}
+      className="h-full"
+      style={{ height: "100%" }}
+      initMode="immediate"
+    />
+  )
+}
+
+// File explorer with controlled selection
+function FileExplorer() {
+  const { sandpack } = useSandpack()
+
+  return (
+    <div className="w-64 border-r overflow-auto">
+      <div className="p-2 text-xs font-medium text-muted-foreground">
+        Project Files
+      </div>
+      <SandpackFileExplorer />
+    </div>
+  )
 }
 
 interface PublishDialogProps {
@@ -46,54 +73,184 @@ interface PublishDialogProps {
 }
 
 export function PublishDialog({ userId }: PublishDialogProps) {
-  const [isOpen, setIsOpen] = useState(false)
+  // Dialog state
+  const [open, setOpen] = useState(false)
+
+  // Component data
   const [componentCode, setComponentCode] = useState("")
-  const [isPublishing, setIsPublishing] = useState(false)
-  const [isProcessing, setIsProcessing] = useState(false)
   const [processedData, setProcessedData] = useState<any>(null)
-  const supabase = useClerkSupabaseClient()
+
+  // UI state
+  const [isProcessing, setIsProcessing] = useState(false)
+  const [isPublishing, setIsPublishing] = useState(false)
+
+  // Services
   const router = useRouter()
+  const supabase = useClerkSupabaseClient()
   const { resolvedTheme } = useTheme()
   const isDarkTheme = resolvedTheme === "dark"
-  const [sandpackKey, setSandpackKey] = useState(Date.now())
 
-  // Listen for code changes from the Sandpack editor
-  useEffect(() => {
-    const handleCodeChange = (event: CustomEvent) => {
-      const { code } = event.detail
-      setComponentCode(code)
-    }
+  // Get component file path
+  const getComponentFilePath = useCallback(() => {
+    if (!processedData) return "/src/components/ui/component.tsx"
 
-    window.addEventListener(
-      "SANDPACK_CODE_CHANGE",
-      handleCodeChange as EventListener,
-    )
+    const registryType = processedData.registryType || "ui"
+    const fileName = processedData.slug
+      ? `${processedData.slug}.tsx`
+      : "component.tsx"
+    return `/src/components/${registryType}/${fileName}`
+  }, [processedData])
 
-    return () => {
-      window.removeEventListener(
-        "SANDPACK_CODE_CHANGE",
-        handleCodeChange as EventListener,
-      )
+  // Create files structure
+  const files = useMemo(() => {
+    const componentPath = getComponentFilePath()
+    const files: SandpackFiles = {
+      [componentPath]: {
+        code: componentCode,
+      },
+      "/package.json": {
+        code: JSON.stringify(
+          {
+            name: "component-project",
+            dependencies: {
+              react: "^18.2.0",
+              "react-dom": "^18.2.0",
+              ...(processedData?.npmDependencies || []).reduce(
+                (acc: Record<string, string>, dep: string) => ({
+                  ...acc,
+                  [dep]: "latest",
+                }),
+                {},
+              ),
+            },
+          },
+          null,
+          2,
+        ),
+      },
+      "/index.html": {
+        code: `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Component Preview</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>`,
+      },
+      "/index.tsx": {
+        code: `import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const rootElement = document.getElementById("root");
+const root = createRoot(rootElement!);
+
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);`,
+      },
+      "/styles.css": {
+        code: `* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
+    "Helvetica Neue", sans-serif;
+  margin: 0;
+  padding: 1rem;
+}`,
+      },
+      "/tsconfig.json": {
+        code: JSON.stringify(
+          {
+            compilerOptions: {
+              target: "es5",
+              lib: ["dom", "dom.iterable", "esnext"],
+              allowJs: true,
+              skipLibCheck: true,
+              esModuleInterop: true,
+              allowSyntheticDefaultImports: true,
+              strict: true,
+              forceConsistentCasingInFileNames: true,
+              noFallthroughCasesInSwitch: true,
+              module: "esnext",
+              moduleResolution: "node",
+              resolveJsonModule: true,
+              isolatedModules: true,
+              noEmit: true,
+              jsx: "react-jsx",
+            },
+            include: ["src"],
+          },
+          null,
+          2,
+        ),
+      },
+      "/App.tsx": {
+        code: processedData
+          ? `import ${processedData.componentName || "Component"} from "./src/components/${
+              processedData.registryType || "ui"
+            }/${processedData.slug?.replace(".tsx", "") || "component"}";
+
+export default function App() {
+  return (
+    <div className="container">
+      <${processedData.componentName || "Component"} />
+    </div>
+  );
+}`
+          : `import Component from "${getComponentFilePath().replace(".tsx", "")}";
+
+export default function App() {
+  return (
+    <div className="container">
+      <Component />
+    </div>
+  );
+}`,
+      },
     }
+    return files
+  }, [componentCode, processedData, getComponentFilePath])
+
+  // Reset dialog state
+  const resetState = useCallback(() => {
+    setComponentCode("")
+    setProcessedData(null)
+    setIsProcessing(false)
+    setIsPublishing(false)
   }, [])
 
-  const handlePreprocess = async () => {
+  // Handle dialog open/close
+  const handleOpenChange = useCallback(
+    (isOpen: boolean) => {
+      setOpen(isOpen)
+      if (!isOpen) resetState()
+    },
+    [resetState],
+  )
+
+  // Process component
+  const handleProcessComponent = async () => {
     if (!componentCode.trim()) {
       toast.error("Please enter component code")
       return
     }
 
     setIsProcessing(true)
+
     try {
       const response = await fetch("/api/studio/preprocess-component", {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          code: componentCode,
-          userId,
-        }),
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ code: componentCode, userId }),
       })
 
       if (!response.ok) {
@@ -105,92 +262,88 @@ export function PublishDialog({ userId }: PublishDialogProps) {
       setProcessedData(data)
       toast.success("Component processed successfully")
     } catch (error) {
-      toast.error("Failed to process component")
+      toast.error(
+        `Processing failed: ${error instanceof Error ? error.message : "Unknown error"}`,
+      )
       console.error("Error processing component:", error)
     } finally {
       setIsProcessing(false)
     }
   }
 
-  const handlePublish = async () => {
-    if (!componentCode.trim()) {
-      toast.error("Please enter component code")
+  // Publish component
+  const handlePublishComponent = async () => {
+    if (!componentCode.trim() || !processedData) {
+      toast.error("Component must be processed before publishing")
       return
     }
 
     setIsPublishing(true)
+
     try {
-      // Here you would add the logic to parse and validate the component code
-      // Then save it to the database
       const { error } = await supabase.from("components").insert({
         code: componentCode,
-        name: processedData?.componentName || "New Component", // Use processed data if available
-        component_names: {}, // Required field
-        component_slug: processedData?.slug || "new-component", // Use processed slug if available
-        preview_url: "https://placeholder.com", // Required field
-        user_id: userId, // Use the target user ID
-        direct_registry_dependencies: {}, // Required field
-        demo_direct_registry_dependencies: {}, // Required field
+        name: processedData.componentName || "New Component",
+        component_names: {},
+        component_slug: processedData.slug || "new-component",
+        preview_url: "https://placeholder.com",
+        user_id: userId,
+        direct_registry_dependencies: {},
+        demo_direct_registry_dependencies: {},
       })
 
       if (error) throw error
 
       toast.success("Component published successfully")
-      setIsOpen(false)
-      setComponentCode("")
-      setProcessedData(null)
+      setOpen(false)
+      resetState()
       router.refresh()
     } catch (error) {
-      toast.error("Failed to publish component")
-      console.error("Error publishing component:", error)
+      toast.error(
+        `Publishing failed: ${error instanceof Error ? error.message : "Unknown error"}`,
+      )
     } finally {
       setIsPublishing(false)
     }
   }
 
-  const defaultCode = `export default function Component() {
-  return (
-    <div>
-      {/* Your component code here */}
-    </div>
+  // Sandpack configuration
+  const sandpackConfig = useMemo(
+    () => ({
+      files,
+      options: {
+        activeFile: getComponentFilePath(),
+        visibleFiles: Object.keys(files),
+        recompileMode: "delayed" as const,
+        recompileDelay: 300,
+      },
+      template: "react-ts" as const,
+      theme: isDarkTheme ? ("dark" as const) : ("light" as const),
+      customSetup: {
+        dependencies:
+          processedData?.npmDependencies?.reduce(
+            (acc: Record<string, string>, dep: string) => ({
+              ...acc,
+              [dep]: "latest",
+            }),
+            {},
+          ) || {},
+      },
+    }),
+    [files, getComponentFilePath, isDarkTheme, processedData?.npmDependencies],
   )
-}`
-
-  const handleOpenChange = (open: boolean) => {
-    setIsOpen(open)
-    if (!open) {
-      setComponentCode("")
-      setProcessedData(null)
-    } else {
-      // Force re-mount of Sandpack when dialog opens
-      setSandpackKey(Date.now())
-    }
-  }
-
-  const sandpackFiles = {
-    "/App.tsx": componentCode || defaultCode,
-  }
-
-  const providerProps: SandpackProviderProps = {
-    theme: isDarkTheme ? "dark" : "light",
-    template: "react-ts",
-    files: sandpackFiles,
-    options: {
-      activeFile: "/App.tsx",
-      visibleFiles: ["/App.tsx"],
-    },
-  }
 
   return (
-    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
         <Button>
           <PlusCircle className="mr-2 h-4 w-4" />
           Publish Component
         </Button>
       </DialogTrigger>
+
       <DialogContent
-        className="sm:max-w-[800px] h-[80vh] flex flex-col"
+        className="sm:max-w-[90vw] h-[80vh] flex flex-col"
         hideCloseButton
       >
         <DialogHeader className="flex flex-row items-start justify-between border-b pb-4">
@@ -201,8 +354,9 @@ export function PublishDialog({ userId }: PublishDialogProps) {
               guidelines and includes all necessary imports.
             </DialogDescription>
           </div>
+
           <Button
-            onClick={handlePreprocess}
+            onClick={handleProcessComponent}
             disabled={isProcessing || !componentCode.trim()}
             className="ml-auto !mt-0"
           >
@@ -220,20 +374,54 @@ export function PublishDialog({ userId }: PublishDialogProps) {
         </DialogHeader>
 
         <div className="flex-grow overflow-hidden flex flex-col h-full py-4">
-          <div className="h-full min-h-[500px] rounded-md border overflow-hidden">
-            <SandpackProvider key={sandpackKey} {...providerProps}>
-              <CodeEditorWithUpdates />
-            </SandpackProvider>
-          </div>
-
           {processedData && (
-            <div className="mt-4 rounded-md border p-4 overflow-auto max-h-[200px]">
-              <h3 className="mb-2 font-medium">Processed Component Data:</h3>
-              <pre className="text-xs">
-                {JSON.stringify(processedData, null, 2)}
-              </pre>
+            <div className="mb-2 px-2 py-1 bg-muted text-muted-foreground text-xs rounded flex items-center">
+              <span className="font-medium">Component processed:</span>
+              <span className="ml-1">
+                {processedData.componentName || "Component"}
+              </span>
+              <span className="ml-auto text-xs text-muted-foreground">
+                {processedData.registryType || "ui"}/
+                {processedData.slug || "component"}
+              </span>
             </div>
           )}
+
+          <div className="h-full min-h-[400px] rounded-md border overflow-hidden flex-grow">
+            <SandpackProvider {...sandpackConfig}>
+              <OpenInCodeSandboxButton />
+              <SandpackLayout style={{ height: "100%" }}>
+                <FileExplorer />
+                <div className="flex-1">
+                  <CodeEditor
+                    componentPath={getComponentFilePath()}
+                    onCodeChange={setComponentCode}
+                  />
+                </div>
+              </SandpackLayout>
+            </SandpackProvider>
+          </div>
+
+          <div className="mt-4 flex justify-end">
+            {processedData && (
+              <Button
+                onClick={handlePublishComponent}
+                disabled={isPublishing || !componentCode.trim()}
+                className="ml-2"
+              >
+                {isPublishing ? (
+                  <>
+                    <span className="mr-2">
+                      <Spinner size={16} />
+                    </span>
+                    Publishing...
+                  </>
+                ) : (
+                  "Publish Component"
+                )}
+              </Button>
+            )}
+          </div>
         </div>
       </DialogContent>
     </Dialog>

From 728ad80617862a9d417ee335cbba4acce44e739f Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Thu, 3 Apr 2025 14:09:55 +0300
Subject: [PATCH 015/143] fix view

---
 .../features/studio/publish/publish-dialog.tsx   | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/apps/web/components/features/studio/publish/publish-dialog.tsx b/apps/web/components/features/studio/publish/publish-dialog.tsx
index e9f644de..1421fd00 100644
--- a/apps/web/components/features/studio/publish/publish-dialog.tsx
+++ b/apps/web/components/features/studio/publish/publish-dialog.tsx
@@ -391,12 +391,16 @@ export default function App() {
             <SandpackProvider {...sandpackConfig}>
               <OpenInCodeSandboxButton />
               <SandpackLayout style={{ height: "100%" }}>
-                <FileExplorer />
-                <div className="flex-1">
-                  <CodeEditor
-                    componentPath={getComponentFilePath()}
-                    onCodeChange={setComponentCode}
-                  />
+                <div className="flex w-full h-full">
+                  <div className="w-64 border-r border-border">
+                    <FileExplorer />
+                  </div>
+                  <div className="flex-1">
+                    <CodeEditor
+                      componentPath={getComponentFilePath()}
+                      onCodeChange={setComponentCode}
+                    />
+                  </div>
                 </div>
               </SandpackLayout>
             </SandpackProvider>

From 97232441c8688f209f83129bad7b28dd9ab3c1e8 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Thu, 3 Apr 2025 14:18:01 +0300
Subject: [PATCH 016/143] fix editor

---
 .../studio/publish/publish-dialog.tsx         | 86 ++-----------------
 1 file changed, 8 insertions(+), 78 deletions(-)

diff --git a/apps/web/components/features/studio/publish/publish-dialog.tsx b/apps/web/components/features/studio/publish/publish-dialog.tsx
index 1421fd00..97f2cfbb 100644
--- a/apps/web/components/features/studio/publish/publish-dialog.tsx
+++ b/apps/web/components/features/studio/publish/publish-dialog.tsx
@@ -44,7 +44,6 @@ function CodeEditor({
 
   return (
     <SandpackCodeEditor
-      showTabs={true}
       showLineNumbers={true}
       showInlineErrors={true}
       className="h-full"
@@ -56,8 +55,6 @@ function CodeEditor({
 
 // File explorer with controlled selection
 function FileExplorer() {
-  const { sandpack } = useSandpack()
-
   return (
     <div className="w-64 border-r overflow-auto">
       <div className="p-2 text-xs font-medium text-muted-foreground">
@@ -271,42 +268,6 @@ export default function App() {
     }
   }
 
-  // Publish component
-  const handlePublishComponent = async () => {
-    if (!componentCode.trim() || !processedData) {
-      toast.error("Component must be processed before publishing")
-      return
-    }
-
-    setIsPublishing(true)
-
-    try {
-      const { error } = await supabase.from("components").insert({
-        code: componentCode,
-        name: processedData.componentName || "New Component",
-        component_names: {},
-        component_slug: processedData.slug || "new-component",
-        preview_url: "https://placeholder.com",
-        user_id: userId,
-        direct_registry_dependencies: {},
-        demo_direct_registry_dependencies: {},
-      })
-
-      if (error) throw error
-
-      toast.success("Component published successfully")
-      setOpen(false)
-      resetState()
-      router.refresh()
-    } catch (error) {
-      toast.error(
-        `Publishing failed: ${error instanceof Error ? error.message : "Unknown error"}`,
-      )
-    } finally {
-      setIsPublishing(false)
-    }
-  }
-
   // Sandpack configuration
   const sandpackConfig = useMemo(
     () => ({
@@ -343,11 +304,11 @@ export default function App() {
       </DialogTrigger>
 
       <DialogContent
-        className="sm:max-w-[90vw] h-[80vh] flex flex-col"
+        className="sm:max-w-[90vw] h-[80vh] flex flex-col p-0 gap-0 overflow-hidden"
         hideCloseButton
       >
-        <DialogHeader className="flex flex-row items-start justify-between border-b pb-4">
-          <div>
+        <DialogHeader className="flex flex-row p-4 gap-8 items-start justify-between border-b bg-muted ">
+          <div className="flex flex-col gap-2">
             <DialogTitle>Publish New Component</DialogTitle>
             <DialogDescription>
               Enter your component code below. Make sure it follows our
@@ -373,23 +334,13 @@ export default function App() {
           </Button>
         </DialogHeader>
 
-        <div className="flex-grow overflow-hidden flex flex-col h-full py-4">
-          {processedData && (
-            <div className="mb-2 px-2 py-1 bg-muted text-muted-foreground text-xs rounded flex items-center">
-              <span className="font-medium">Component processed:</span>
-              <span className="ml-1">
-                {processedData.componentName || "Component"}
-              </span>
-              <span className="ml-auto text-xs text-muted-foreground">
-                {processedData.registryType || "ui"}/
-                {processedData.slug || "component"}
-              </span>
-            </div>
-          )}
+        <div className="flex-grow overflow-hidden flex flex-col h-full">
 
-          <div className="h-full min-h-[400px] rounded-md border overflow-hidden flex-grow">
+          <div className="h-full min-h-[400px] overflow-hidden flex-grow">
             <SandpackProvider {...sandpackConfig}>
-              <OpenInCodeSandboxButton />
+              <div className="absolute bottom-2 right-2">
+                <OpenInCodeSandboxButton />
+              </div>
               <SandpackLayout style={{ height: "100%" }}>
                 <div className="flex w-full h-full">
                   <div className="w-64 border-r border-border">
@@ -405,27 +356,6 @@ export default function App() {
               </SandpackLayout>
             </SandpackProvider>
           </div>
-
-          <div className="mt-4 flex justify-end">
-            {processedData && (
-              <Button
-                onClick={handlePublishComponent}
-                disabled={isPublishing || !componentCode.trim()}
-                className="ml-2"
-              >
-                {isPublishing ? (
-                  <>
-                    <span className="mr-2">
-                      <Spinner size={16} />
-                    </span>
-                    Publishing...
-                  </>
-                ) : (
-                  "Publish Component"
-                )}
-              </Button>
-            )}
-          </div>
         </div>
       </DialogContent>
     </Dialog>

From 0d5a186b14939b1c16c2eeae8eeba01b51923ecf Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Thu, 3 Apr 2025 14:23:12 +0300
Subject: [PATCH 017/143] refactor

---
 .../features/studio/publish/code-editor.tsx   |  32 ++
 .../features/studio/publish/file-explorer.tsx |  12 +
 .../studio/publish/publish-dialog.tsx         | 288 +-----------------
 .../studio/publish/use-publish-dialog.ts      | 239 +++++++++++++++
 4 files changed, 297 insertions(+), 274 deletions(-)
 create mode 100644 apps/web/components/features/studio/publish/code-editor.tsx
 create mode 100644 apps/web/components/features/studio/publish/file-explorer.tsx
 create mode 100644 apps/web/components/features/studio/publish/use-publish-dialog.ts

diff --git a/apps/web/components/features/studio/publish/code-editor.tsx b/apps/web/components/features/studio/publish/code-editor.tsx
new file mode 100644
index 00000000..0b4b337a
--- /dev/null
+++ b/apps/web/components/features/studio/publish/code-editor.tsx
@@ -0,0 +1,32 @@
+import { useEffect } from "react"
+import {
+  SandpackCodeEditor,
+  useActiveCode,
+  useSandpack,
+} from "@codesandbox/sandpack-react"
+
+interface CodeEditorProps {
+  onCodeChange: (code: string) => void
+  componentPath: string
+}
+
+export function CodeEditor({ onCodeChange, componentPath }: CodeEditorProps) {
+  const { code } = useActiveCode()
+  const { sandpack } = useSandpack()
+
+  useEffect(() => {
+    if (code && sandpack.activeFile === componentPath) {
+      onCodeChange(code)
+    }
+  }, [code, onCodeChange, sandpack.activeFile, componentPath])
+
+  return (
+    <SandpackCodeEditor
+      showLineNumbers={true}
+      showInlineErrors={true}
+      className="h-full"
+      style={{ height: "100%" }}
+      initMode="immediate"
+    />
+  )
+}
diff --git a/apps/web/components/features/studio/publish/file-explorer.tsx b/apps/web/components/features/studio/publish/file-explorer.tsx
new file mode 100644
index 00000000..9cf6746f
--- /dev/null
+++ b/apps/web/components/features/studio/publish/file-explorer.tsx
@@ -0,0 +1,12 @@
+import { SandpackFileExplorer } from "@codesandbox/sandpack-react"
+
+export function FileExplorer() {
+  return (
+    <div className="w-64 border-r overflow-auto">
+      <div className="p-2 text-xs font-medium text-muted-foreground">
+        Project Files
+      </div>
+      <SandpackFileExplorer />
+    </div>
+  )
+}
diff --git a/apps/web/components/features/studio/publish/publish-dialog.tsx b/apps/web/components/features/studio/publish/publish-dialog.tsx
index 97f2cfbb..77fe5b44 100644
--- a/apps/web/components/features/studio/publish/publish-dialog.tsx
+++ b/apps/web/components/features/studio/publish/publish-dialog.tsx
@@ -1,4 +1,3 @@
-import { useState, useCallback, useMemo, useEffect } from "react"
 import { Button } from "@/components/ui/button"
 import {
   Dialog,
@@ -8,291 +7,33 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog"
-import { useClerkSupabaseClient } from "@/lib/clerk"
-import { toast } from "sonner"
-import { useRouter } from "next/navigation"
 import { PlusCircle } from "lucide-react"
 import { Spinner } from "@/components/icons/spinner"
 import {
   SandpackProvider,
-  SandpackCodeEditor,
   SandpackLayout,
-  SandpackFileExplorer,
-  SandpackFiles,
-  useActiveCode,
-  useSandpack,
   OpenInCodeSandboxButton,
 } from "@codesandbox/sandpack-react"
-import { useTheme } from "next-themes"
 
-// Controlled component for code editing
-function CodeEditor({
-  onCodeChange,
-  componentPath,
-}: {
-  onCodeChange: (code: string) => void
-  componentPath: string
-}) {
-  const { code } = useActiveCode()
-  const { sandpack } = useSandpack()
-
-  useEffect(() => {
-    if (code && sandpack.activeFile === componentPath) {
-      onCodeChange(code)
-    }
-  }, [code, onCodeChange, sandpack.activeFile, componentPath])
-
-  return (
-    <SandpackCodeEditor
-      showLineNumbers={true}
-      showInlineErrors={true}
-      className="h-full"
-      style={{ height: "100%" }}
-      initMode="immediate"
-    />
-  )
-}
-
-// File explorer with controlled selection
-function FileExplorer() {
-  return (
-    <div className="w-64 border-r overflow-auto">
-      <div className="p-2 text-xs font-medium text-muted-foreground">
-        Project Files
-      </div>
-      <SandpackFileExplorer />
-    </div>
-  )
-}
+import { CodeEditor } from "./code-editor"
+import { FileExplorer } from "./file-explorer"
+import { usePublishDialog } from "./use-publish-dialog"
 
 interface PublishDialogProps {
   userId: string
 }
 
 export function PublishDialog({ userId }: PublishDialogProps) {
-  // Dialog state
-  const [open, setOpen] = useState(false)
-
-  // Component data
-  const [componentCode, setComponentCode] = useState("")
-  const [processedData, setProcessedData] = useState<any>(null)
-
-  // UI state
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [isPublishing, setIsPublishing] = useState(false)
-
-  // Services
-  const router = useRouter()
-  const supabase = useClerkSupabaseClient()
-  const { resolvedTheme } = useTheme()
-  const isDarkTheme = resolvedTheme === "dark"
-
-  // Get component file path
-  const getComponentFilePath = useCallback(() => {
-    if (!processedData) return "/src/components/ui/component.tsx"
-
-    const registryType = processedData.registryType || "ui"
-    const fileName = processedData.slug
-      ? `${processedData.slug}.tsx`
-      : "component.tsx"
-    return `/src/components/${registryType}/${fileName}`
-  }, [processedData])
-
-  // Create files structure
-  const files = useMemo(() => {
-    const componentPath = getComponentFilePath()
-    const files: SandpackFiles = {
-      [componentPath]: {
-        code: componentCode,
-      },
-      "/package.json": {
-        code: JSON.stringify(
-          {
-            name: "component-project",
-            dependencies: {
-              react: "^18.2.0",
-              "react-dom": "^18.2.0",
-              ...(processedData?.npmDependencies || []).reduce(
-                (acc: Record<string, string>, dep: string) => ({
-                  ...acc,
-                  [dep]: "latest",
-                }),
-                {},
-              ),
-            },
-          },
-          null,
-          2,
-        ),
-      },
-      "/index.html": {
-        code: `<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Component Preview</title>
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>`,
-      },
-      "/index.tsx": {
-        code: `import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App";
-
-const rootElement = document.getElementById("root");
-const root = createRoot(rootElement!);
-
-root.render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-);`,
-      },
-      "/styles.css": {
-        code: `* {
-  box-sizing: border-box;
-}
-
-body {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
-    "Helvetica Neue", sans-serif;
-  margin: 0;
-  padding: 1rem;
-}`,
-      },
-      "/tsconfig.json": {
-        code: JSON.stringify(
-          {
-            compilerOptions: {
-              target: "es5",
-              lib: ["dom", "dom.iterable", "esnext"],
-              allowJs: true,
-              skipLibCheck: true,
-              esModuleInterop: true,
-              allowSyntheticDefaultImports: true,
-              strict: true,
-              forceConsistentCasingInFileNames: true,
-              noFallthroughCasesInSwitch: true,
-              module: "esnext",
-              moduleResolution: "node",
-              resolveJsonModule: true,
-              isolatedModules: true,
-              noEmit: true,
-              jsx: "react-jsx",
-            },
-            include: ["src"],
-          },
-          null,
-          2,
-        ),
-      },
-      "/App.tsx": {
-        code: processedData
-          ? `import ${processedData.componentName || "Component"} from "./src/components/${
-              processedData.registryType || "ui"
-            }/${processedData.slug?.replace(".tsx", "") || "component"}";
-
-export default function App() {
-  return (
-    <div className="container">
-      <${processedData.componentName || "Component"} />
-    </div>
-  );
-}`
-          : `import Component from "${getComponentFilePath().replace(".tsx", "")}";
-
-export default function App() {
-  return (
-    <div className="container">
-      <Component />
-    </div>
-  );
-}`,
-      },
-    }
-    return files
-  }, [componentCode, processedData, getComponentFilePath])
-
-  // Reset dialog state
-  const resetState = useCallback(() => {
-    setComponentCode("")
-    setProcessedData(null)
-    setIsProcessing(false)
-    setIsPublishing(false)
-  }, [])
-
-  // Handle dialog open/close
-  const handleOpenChange = useCallback(
-    (isOpen: boolean) => {
-      setOpen(isOpen)
-      if (!isOpen) resetState()
-    },
-    [resetState],
-  )
-
-  // Process component
-  const handleProcessComponent = async () => {
-    if (!componentCode.trim()) {
-      toast.error("Please enter component code")
-      return
-    }
-
-    setIsProcessing(true)
-
-    try {
-      const response = await fetch("/api/studio/preprocess-component", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ code: componentCode, userId }),
-      })
-
-      if (!response.ok) {
-        const errorData = await response.json()
-        throw new Error(errorData.error || "Failed to process component")
-      }
-
-      const data = await response.json()
-      setProcessedData(data)
-      toast.success("Component processed successfully")
-    } catch (error) {
-      toast.error(
-        `Processing failed: ${error instanceof Error ? error.message : "Unknown error"}`,
-      )
-      console.error("Error processing component:", error)
-    } finally {
-      setIsProcessing(false)
-    }
-  }
-
-  // Sandpack configuration
-  const sandpackConfig = useMemo(
-    () => ({
-      files,
-      options: {
-        activeFile: getComponentFilePath(),
-        visibleFiles: Object.keys(files),
-        recompileMode: "delayed" as const,
-        recompileDelay: 300,
-      },
-      template: "react-ts" as const,
-      theme: isDarkTheme ? ("dark" as const) : ("light" as const),
-      customSetup: {
-        dependencies:
-          processedData?.npmDependencies?.reduce(
-            (acc: Record<string, string>, dep: string) => ({
-              ...acc,
-              [dep]: "latest",
-            }),
-            {},
-          ) || {},
-      },
-    }),
-    [files, getComponentFilePath, isDarkTheme, processedData?.npmDependencies],
-  )
+  const {
+    open,
+    componentCode,
+    isProcessing,
+    handleOpenChange,
+    handleProcessComponent,
+    setComponentCode,
+    sandpackConfig,
+    getComponentFilePath,
+  } = usePublishDialog({ userId })
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
@@ -307,7 +48,7 @@ export default function App() {
         className="sm:max-w-[90vw] h-[80vh] flex flex-col p-0 gap-0 overflow-hidden"
         hideCloseButton
       >
-        <DialogHeader className="flex flex-row p-4 gap-8 items-start justify-between border-b bg-muted ">
+        <DialogHeader className="flex flex-row p-4 gap-8 items-start justify-between border-b bg-muted">
           <div className="flex flex-col gap-2">
             <DialogTitle>Publish New Component</DialogTitle>
             <DialogDescription>
@@ -335,7 +76,6 @@ export default function App() {
         </DialogHeader>
 
         <div className="flex-grow overflow-hidden flex flex-col h-full">
-
           <div className="h-full min-h-[400px] overflow-hidden flex-grow">
             <SandpackProvider {...sandpackConfig}>
               <div className="absolute bottom-2 right-2">
diff --git a/apps/web/components/features/studio/publish/use-publish-dialog.ts b/apps/web/components/features/studio/publish/use-publish-dialog.ts
new file mode 100644
index 00000000..07a991ff
--- /dev/null
+++ b/apps/web/components/features/studio/publish/use-publish-dialog.ts
@@ -0,0 +1,239 @@
+import { useState, useCallback, useMemo } from "react"
+import { toast } from "sonner"
+import { useTheme } from "next-themes"
+import type { SandpackFiles } from "@codesandbox/sandpack-react"
+
+interface UsePublishDialogProps {
+  userId: string
+}
+
+export function usePublishDialog({ userId }: UsePublishDialogProps) {
+  // Dialog state
+  const [open, setOpen] = useState(false)
+  const [componentCode, setComponentCode] = useState("")
+  const [processedData, setProcessedData] = useState<any>(null)
+  const [isProcessing, setIsProcessing] = useState(false)
+  const [isPublishing, setIsPublishing] = useState(false)
+  const { resolvedTheme } = useTheme()
+  const isDarkTheme = resolvedTheme === "dark"
+
+  // Get component file path
+  const getComponentFilePath = useCallback(() => {
+    if (!processedData) return "/src/components/ui/component.tsx"
+
+    const registryType = processedData.registryType || "ui"
+    const fileName = processedData.slug
+      ? `${processedData.slug}.tsx`
+      : "component.tsx"
+    return `/src/components/${registryType}/${fileName}`
+  }, [processedData])
+
+  // Create files structure
+  const files = useMemo(() => {
+    const componentPath = getComponentFilePath()
+    const files: SandpackFiles = {
+      [componentPath]: {
+        code: componentCode,
+      },
+      "/package.json": {
+        code: JSON.stringify(
+          {
+            name: "component-project",
+            dependencies: {
+              react: "^18.2.0",
+              "react-dom": "^18.2.0",
+              ...(processedData?.npmDependencies || []).reduce(
+                (acc: Record<string, string>, dep: string) => ({
+                  ...acc,
+                  [dep]: "latest",
+                }),
+                {},
+              ),
+            },
+          },
+          null,
+          2,
+        ),
+      },
+      "/index.html": {
+        code: `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Component Preview</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>`,
+      },
+      "/index.tsx": {
+        code: `import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const rootElement = document.getElementById("root");
+const root = createRoot(rootElement!);
+
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);`,
+      },
+      "/styles.css": {
+        code: `* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
+    "Helvetica Neue", sans-serif;
+  margin: 0;
+  padding: 1rem;
+}`,
+      },
+      "/tsconfig.json": {
+        code: JSON.stringify(
+          {
+            compilerOptions: {
+              target: "es5",
+              lib: ["dom", "dom.iterable", "esnext"],
+              allowJs: true,
+              skipLibCheck: true,
+              esModuleInterop: true,
+              allowSyntheticDefaultImports: true,
+              strict: true,
+              forceConsistentCasingInFileNames: true,
+              noFallthroughCasesInSwitch: true,
+              module: "esnext",
+              moduleResolution: "node",
+              resolveJsonModule: true,
+              isolatedModules: true,
+              noEmit: true,
+              jsx: "react-jsx",
+            },
+            include: ["src"],
+          },
+          null,
+          2,
+        ),
+      },
+      "/App.tsx": {
+        code: processedData
+          ? `import ${processedData.componentName || "Component"} from "./src/components/${
+              processedData.registryType || "ui"
+            }/${processedData.slug?.replace(".tsx", "") || "component"}";
+
+export default function App() {
+  return (
+    <div className="container">
+      <${processedData.componentName || "Component"} />
+    </div>
+  );
+}`
+          : `import Component from "${getComponentFilePath().replace(".tsx", "")}";
+
+export default function App() {
+  return (
+    <div className="container">
+      <Component />
+    </div>
+  );
+}`,
+      },
+    }
+    return files
+  }, [componentCode, processedData, getComponentFilePath])
+
+  // Reset dialog state
+  const resetState = useCallback(() => {
+    setComponentCode("")
+    setProcessedData(null)
+    setIsProcessing(false)
+    setIsPublishing(false)
+  }, [])
+
+  // Handle dialog open/close
+  const handleOpenChange = useCallback(
+    (isOpen: boolean) => {
+      setOpen(isOpen)
+      if (!isOpen) resetState()
+    },
+    [resetState],
+  )
+
+  // Process component
+  const handleProcessComponent = async () => {
+    if (!componentCode.trim()) {
+      toast.error("Please enter component code")
+      return
+    }
+
+    setIsProcessing(true)
+
+    try {
+      const response = await fetch("/api/studio/preprocess-component", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ code: componentCode, userId }),
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.error || "Failed to process component")
+      }
+
+      const data = await response.json()
+      setProcessedData(data)
+      toast.success("Component processed successfully")
+    } catch (error) {
+      toast.error(
+        `Processing failed: ${error instanceof Error ? error.message : "Unknown error"}`,
+      )
+      console.error("Error processing component:", error)
+    } finally {
+      setIsProcessing(false)
+    }
+  }
+
+  // Sandpack configuration
+  const sandpackConfig = useMemo(
+    () => ({
+      files,
+      options: {
+        activeFile: getComponentFilePath(),
+        visibleFiles: Object.keys(files),
+        recompileMode: "delayed" as const,
+        recompileDelay: 300,
+      },
+      template: "react-ts" as const,
+      theme: isDarkTheme ? ("dark" as const) : ("light" as const),
+      customSetup: {
+        dependencies:
+          processedData?.npmDependencies?.reduce(
+            (acc: Record<string, string>, dep: string) => ({
+              ...acc,
+              [dep]: "latest",
+            }),
+            {},
+          ) || {},
+      },
+    }),
+    [files, getComponentFilePath, isDarkTheme, processedData?.npmDependencies],
+  )
+
+  return {
+    open,
+    componentCode,
+    processedData,
+    isProcessing,
+    isPublishing,
+    handleOpenChange,
+    handleProcessComponent,
+    setComponentCode,
+    sandpackConfig,
+    getComponentFilePath,
+  }
+}

From 05c67c3b57f442fb2d54d032954871c2eaf8a9d5 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Thu, 3 Apr 2025 14:25:29 +0300
Subject: [PATCH 018/143] fix

---
 apps/web/components/features/studio/publish/code-editor.tsx   | 1 +
 apps/web/components/features/studio/publish/file-explorer.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/web/components/features/studio/publish/code-editor.tsx b/apps/web/components/features/studio/publish/code-editor.tsx
index 0b4b337a..17a3074b 100644
--- a/apps/web/components/features/studio/publish/code-editor.tsx
+++ b/apps/web/components/features/studio/publish/code-editor.tsx
@@ -22,6 +22,7 @@ export function CodeEditor({ onCodeChange, componentPath }: CodeEditorProps) {
 
   return (
     <SandpackCodeEditor
+      showTabs={false}
       showLineNumbers={true}
       showInlineErrors={true}
       className="h-full"
diff --git a/apps/web/components/features/studio/publish/file-explorer.tsx b/apps/web/components/features/studio/publish/file-explorer.tsx
index 9cf6746f..1fa46966 100644
--- a/apps/web/components/features/studio/publish/file-explorer.tsx
+++ b/apps/web/components/features/studio/publish/file-explorer.tsx
@@ -3,7 +3,7 @@ import { SandpackFileExplorer } from "@codesandbox/sandpack-react"
 export function FileExplorer() {
   return (
     <div className="w-64 border-r overflow-auto">
-      <div className="p-2 text-xs font-medium text-muted-foreground">
+      <div className="p-2 mt-2 text-xs font-medium text-muted-foreground">
         Project Files
       </div>
       <SandpackFileExplorer />

From dbf4475240c1f485e0d8a4fe76514261437b8dea Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Thu, 3 Apr 2025 15:06:33 +0300
Subject: [PATCH 019/143] all files

---
 .../features/studio/publish/file-explorer.tsx |  16 +-
 .../features/studio/publish/sandpack-files.ts | 290 ++++++++++++++++++
 .../studio/publish/use-publish-dialog.ts      | 149 ++-------
 3 files changed, 331 insertions(+), 124 deletions(-)
 create mode 100644 apps/web/components/features/studio/publish/sandpack-files.ts

diff --git a/apps/web/components/features/studio/publish/file-explorer.tsx b/apps/web/components/features/studio/publish/file-explorer.tsx
index 1fa46966..8653cdad 100644
--- a/apps/web/components/features/studio/publish/file-explorer.tsx
+++ b/apps/web/components/features/studio/publish/file-explorer.tsx
@@ -3,10 +3,22 @@ import { SandpackFileExplorer } from "@codesandbox/sandpack-react"
 export function FileExplorer() {
   return (
     <div className="w-64 border-r overflow-auto">
-      <div className="p-2 mt-2 text-xs font-medium text-muted-foreground">
+      <div className="mt-4 px-4 text-[13px] font-medium text-muted-foreground">
         Project Files
       </div>
-      <SandpackFileExplorer />
+      <SandpackFileExplorer
+        autoHiddenFiles={true}
+        initialCollapsedFolder={[
+          "/node_modules",
+          "/lib",
+          "/public",
+          "/.env",
+          "/index.html",
+          "/index.tsx",
+          "/tsconfig.json",
+          "/theme-provider.tsx",
+        ]}
+      />
     </div>
   )
 }
diff --git a/apps/web/components/features/studio/publish/sandpack-files.ts b/apps/web/components/features/studio/publish/sandpack-files.ts
new file mode 100644
index 00000000..75f28811
--- /dev/null
+++ b/apps/web/components/features/studio/publish/sandpack-files.ts
@@ -0,0 +1,290 @@
+import type { SandpackFiles } from "@codesandbox/sandpack-react"
+import { defaultGlobalCss, defaultTailwindConfig } from "@/lib/sandpack"
+
+interface GenerateFilesOptions {
+  componentPath: string
+  componentCode: string
+  processedData: any | null
+  dependencies?: Record<string, string>
+}
+
+export function generateSandpackFiles({
+  componentPath,
+  componentCode,
+  processedData,
+  dependencies = {},
+}: GenerateFilesOptions): SandpackFiles {
+  const files: SandpackFiles = {
+    [componentPath]: {
+      code: componentCode,
+    },
+    "/package.json": {
+      code: JSON.stringify(
+        {
+          name: "component-project",
+          dependencies: {
+            react: "^18.2.0",
+            "react-dom": "^18.2.0",
+            "@radix-ui/react-select": "^2.0.0",
+            "lucide-react": "^0.363.0",
+            clsx: "^2.1.0",
+            "tailwind-merge": "^2.1.0",
+            ...dependencies,
+          },
+        },
+        null,
+        2,
+      ),
+    },
+    "/index.html": {
+      code: `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Component Preview</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>`,
+    },
+    "/index.tsx": {
+      code: `import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "./globals.css";
+
+const rootElement = document.getElementById("root");
+const root = createRoot(rootElement!);
+
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);`,
+    },
+    "/globals.css": {
+      code: defaultGlobalCss,
+    },
+    "/tsconfig.json": {
+      code: JSON.stringify(
+        {
+          compilerOptions: {
+            jsx: "react-jsx",
+            esModuleInterop: true,
+            baseUrl: ".",
+            paths: {
+              "@/*": ["./*"],
+            },
+          },
+        },
+        null,
+        2,
+      ),
+    },
+    "/App.tsx": {
+      code: processedData
+        ? `import { ThemeProvider } from "./theme-provider";
+import ${processedData.componentName || "Component"} from "./components/${
+            processedData.registryType || "ui"
+          }/${processedData.slug?.replace(".tsx", "") || "component"}";
+
+export default function App() {
+  return (
+    <ThemeProvider defaultTheme="light" storageKey="sandpack-theme">
+      <div className="container">
+        <${processedData.componentName || "Component"} />
+      </div>
+    </ThemeProvider>
+  );
+}`
+        : `import { ThemeProvider } from "./theme-provider";
+import Component from "${componentPath.replace(".tsx", "")}";
+
+export default function App() {
+  return (
+    <ThemeProvider defaultTheme="light" storageKey="sandpack-theme">
+      <div className="container">
+        <Component />
+      </div>
+    </ThemeProvider>
+  );
+}`,
+    },
+    "/theme-provider.tsx": {
+      code: `import * as React from "react"
+
+const ThemeContext = React.createContext({
+  theme: "light",
+  setTheme: (theme: string) => {},
+  resolvedTheme: "light",
+});
+
+export const useTheme = () => React.useContext(ThemeContext);
+
+export const ThemeProvider = ({ children, defaultTheme = 'light', enableSystem = false }) => {
+  const [theme, setTheme] = React.useState(defaultTheme);
+
+  React.useEffect(() => {
+    const root = window.document.documentElement;
+    root.classList.remove('light', 'dark');
+    root.classList.add(theme);
+  }, [theme]);
+
+  const resolvedTheme = theme === 'system' ? 'light' : theme;
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, resolvedTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};`,
+    },
+    "/lib/utils.ts": {
+      code: `import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}`,
+    },
+    "/tailwind.config.js": {
+      code: defaultTailwindConfig,
+    },
+    "/node_modules/next/package.json": {
+      code: `{
+  "name": "next",
+  "version": "latest",
+  "main": "index.js"
+}`
+    },
+    "/node_modules/next/index.js": {
+      code: `export { default as Image } from './image';
+export { default as Link } from './link';
+export { useRouter, RouterProvider, usePathname } from './router';
+export { default as Head } from './head';
+export { default as Script } from './script';
+export { default as dynamic } from './dynamic';
+export { Roboto } from './font';
+export { default as Document } from './document';`
+    },
+    "/node_modules/next/image.js": {
+      code: `import React from 'react';
+      
+const Image = ({ src, alt, width, height, ...props }) => (
+  <img src={src} alt={alt} width={width} height={height} {...props} />
+);
+
+export default Image;`
+    },
+    "/node_modules/next/link.js": {
+      code: `import React from 'react';
+      
+const Link = ({ href, children, ...props }) => (
+  <a href={href} {...props}>{children}</a>
+);
+
+export default Link;`
+    },
+    "/node_modules/next/head.js": {
+      code: `import React from 'react';
+      
+const Head = ({ children }) => {
+  return <div>{children}</div>;
+};
+
+export default Head;`
+    },
+    "/node_modules/next/script.js": {
+      code: `import React from 'react';
+      
+const Script = ({ src, strategy, children, ...props }) => {
+  return <script src={src} {...props}>{children}</script>;
+};
+
+export default Script;`
+    },
+    "/node_modules/next/router.js": {
+      code: `import React, { createContext, useContext } from 'react';
+      
+const RouterContext = createContext({
+  pathname: '/',
+  push: (url) => {},
+  replace: (url) => {},
+});
+
+export const useRouter = () => useContext(RouterContext);
+
+export const usePathname = () => {
+  const router = useRouter();
+  return router.pathname;
+};
+
+export const RouterProvider = ({ children }) => {
+  const router = {
+    pathname: '/',
+    push: (url) => {
+      console.log(\`Navigating to \${url}\`);
+    },
+    replace: (url) => {
+      console.log(\`Replacing with \${url}\`);
+    },
+  };
+  
+  return (
+    <RouterContext.Provider value={router}>
+      {children}
+    </RouterContext.Provider>
+  );
+};`
+    },
+    "/node_modules/next/dynamic.js": {
+      code: `import React, { Suspense } from 'react';
+      
+const dynamic = (importFunc, options = {}) => {
+  const { ssr = true, loading: LoadingComponent = () => <div>Loading...</div> } = options;
+  
+  const LazyComponent = React.lazy(importFunc);
+  
+  return (props) => (
+    <Suspense fallback={<LoadingComponent />}>
+      <LazyComponent {...props} />
+    </Suspense>
+  );
+};
+
+export default dynamic;`
+    },
+    "/node_modules/next/font.js": {
+      code: `export const Roboto = {
+  className: 'font-roboto',
+};`
+    },
+    "/node_modules/next/document.js": {
+      code: `import React from 'react';
+
+const Html = ({ children, ...props }) => <html {...props}>{children}</html>;
+const Head = ({ children }) => <head>{children}</head>;
+const Main = () => <div id="__next"></div>;
+const NextScript = () => <script />;
+
+export default function Document() {
+  return (
+    <Html>
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}`
+    },
+    "/node_modules/next/navigation.js": {
+      code: `export { usePathname } from './router';`
+    }
+  }
+
+  return files
+}
diff --git a/apps/web/components/features/studio/publish/use-publish-dialog.ts b/apps/web/components/features/studio/publish/use-publish-dialog.ts
index 07a991ff..0c158f71 100644
--- a/apps/web/components/features/studio/publish/use-publish-dialog.ts
+++ b/apps/web/components/features/studio/publish/use-publish-dialog.ts
@@ -2,6 +2,7 @@ import { useState, useCallback, useMemo } from "react"
 import { toast } from "sonner"
 import { useTheme } from "next-themes"
 import type { SandpackFiles } from "@codesandbox/sandpack-react"
+import { generateSandpackFiles } from "./sandpack-files"
 
 interface UsePublishDialogProps {
   userId: string
@@ -19,134 +20,15 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
 
   // Get component file path
   const getComponentFilePath = useCallback(() => {
-    if (!processedData) return "/src/components/ui/component.tsx"
+    if (!processedData) return "/components/ui/component.tsx"
 
     const registryType = processedData.registryType || "ui"
     const fileName = processedData.slug
       ? `${processedData.slug}.tsx`
       : "component.tsx"
-    return `/src/components/${registryType}/${fileName}`
+    return `/components/${registryType}/${fileName}`
   }, [processedData])
 
-  // Create files structure
-  const files = useMemo(() => {
-    const componentPath = getComponentFilePath()
-    const files: SandpackFiles = {
-      [componentPath]: {
-        code: componentCode,
-      },
-      "/package.json": {
-        code: JSON.stringify(
-          {
-            name: "component-project",
-            dependencies: {
-              react: "^18.2.0",
-              "react-dom": "^18.2.0",
-              ...(processedData?.npmDependencies || []).reduce(
-                (acc: Record<string, string>, dep: string) => ({
-                  ...acc,
-                  [dep]: "latest",
-                }),
-                {},
-              ),
-            },
-          },
-          null,
-          2,
-        ),
-      },
-      "/index.html": {
-        code: `<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Component Preview</title>
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>`,
-      },
-      "/index.tsx": {
-        code: `import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App";
-
-const rootElement = document.getElementById("root");
-const root = createRoot(rootElement!);
-
-root.render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-);`,
-      },
-      "/styles.css": {
-        code: `* {
-  box-sizing: border-box;
-}
-
-body {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
-    "Helvetica Neue", sans-serif;
-  margin: 0;
-  padding: 1rem;
-}`,
-      },
-      "/tsconfig.json": {
-        code: JSON.stringify(
-          {
-            compilerOptions: {
-              target: "es5",
-              lib: ["dom", "dom.iterable", "esnext"],
-              allowJs: true,
-              skipLibCheck: true,
-              esModuleInterop: true,
-              allowSyntheticDefaultImports: true,
-              strict: true,
-              forceConsistentCasingInFileNames: true,
-              noFallthroughCasesInSwitch: true,
-              module: "esnext",
-              moduleResolution: "node",
-              resolveJsonModule: true,
-              isolatedModules: true,
-              noEmit: true,
-              jsx: "react-jsx",
-            },
-            include: ["src"],
-          },
-          null,
-          2,
-        ),
-      },
-      "/App.tsx": {
-        code: processedData
-          ? `import ${processedData.componentName || "Component"} from "./src/components/${
-              processedData.registryType || "ui"
-            }/${processedData.slug?.replace(".tsx", "") || "component"}";
-
-export default function App() {
-  return (
-    <div className="container">
-      <${processedData.componentName || "Component"} />
-    </div>
-  );
-}`
-          : `import Component from "${getComponentFilePath().replace(".tsx", "")}";
-
-export default function App() {
-  return (
-    <div className="container">
-      <Component />
-    </div>
-  );
-}`,
-      },
-    }
-    return files
-  }, [componentCode, processedData, getComponentFilePath])
-
   // Reset dialog state
   const resetState = useCallback(() => {
     setComponentCode("")
@@ -198,13 +80,36 @@ export default function App() {
     }
   }
 
+  // Generate files for Sandpack
+  const files = useMemo(() => {
+    const componentPath = getComponentFilePath()
+    return generateSandpackFiles({
+      componentPath,
+      componentCode,
+      processedData,
+      dependencies: processedData?.npmDependencies?.reduce(
+        (acc: Record<string, string>, dep: string) => ({
+          ...acc,
+          [dep]: "latest",
+        }),
+        {},
+      ),
+    })
+  }, [componentCode, processedData, getComponentFilePath])
+
   // Sandpack configuration
   const sandpackConfig = useMemo(
     () => ({
       files,
       options: {
         activeFile: getComponentFilePath(),
-        visibleFiles: Object.keys(files),
+        visibleFiles: [
+          getComponentFilePath(),
+          "/components",
+          "/tailwind.config.js",
+          "/globals.css",
+          "/package.json",
+        ],
         recompileMode: "delayed" as const,
         recompileDelay: 300,
       },

From 5201f162ec6b6338e69f269e03816df91a500c86 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Thu, 3 Apr 2025 16:17:25 +0300
Subject: [PATCH 020/143] resolve shadcn deps

---
 .../studio/publish/use-publish-dialog.ts      | 127 +++++++++++++++---
 1 file changed, 110 insertions(+), 17 deletions(-)

diff --git a/apps/web/components/features/studio/publish/use-publish-dialog.ts b/apps/web/components/features/studio/publish/use-publish-dialog.ts
index 0c158f71..c1ac4952 100644
--- a/apps/web/components/features/studio/publish/use-publish-dialog.ts
+++ b/apps/web/components/features/studio/publish/use-publish-dialog.ts
@@ -3,6 +3,8 @@ import { toast } from "sonner"
 import { useTheme } from "next-themes"
 import type { SandpackFiles } from "@codesandbox/sandpack-react"
 import { generateSandpackFiles } from "./sandpack-files"
+import { resolveRegistryDependencyTree } from "@/lib/queries.server"
+import { useClerkSupabaseClient } from "@/lib/clerk"
 
 interface UsePublishDialogProps {
   userId: string
@@ -15,8 +17,16 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
   const [processedData, setProcessedData] = useState<any>(null)
   const [isProcessing, setIsProcessing] = useState(false)
   const [isPublishing, setIsPublishing] = useState(false)
+  const [registryDependencies, setRegistryDependencies] = useState<
+    Record<string, { code: string; registry: string }>
+  >({})
+  const [
+    npmDependenciesOfRegistryDependencies,
+    setNpmDependenciesOfRegistryDependencies,
+  ] = useState<Record<string, string>>({})
   const { resolvedTheme } = useTheme()
   const isDarkTheme = resolvedTheme === "dark"
+  const supabase = useClerkSupabaseClient()
 
   // Get component file path
   const getComponentFilePath = useCallback(() => {
@@ -35,6 +45,8 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     setProcessedData(null)
     setIsProcessing(false)
     setIsPublishing(false)
+    setRegistryDependencies({})
+    setNpmDependenciesOfRegistryDependencies({})
   }, [])
 
   // Handle dialog open/close
@@ -68,7 +80,48 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
       }
 
       const data = await response.json()
+      console.log("Preprocessing Response:", {
+        componentName: data.componentName,
+        registryType: data.registryType,
+        shadcnComponents: data.shadcnComponentsImports,
+        npmDeps: data.npmDependencies,
+        fullResponse: data,
+      })
+
       setProcessedData(data)
+
+      // If we have shadcn component dependencies, resolve them
+      if (data.shadcnComponentsImports?.length > 0) {
+        console.log("Found shadcn components:", data.shadcnComponentsImports)
+
+        const slugs = data.shadcnComponentsImports.map(
+          (componentName: string) =>
+            `shadcn/${componentName.toLowerCase().replace(/\s+/g, "-")}`,
+        )
+        console.log("Generated slugs for resolution:", slugs)
+
+        const result = await resolveRegistryDependencyTree({
+          supabase,
+          sourceDependencySlugs: slugs,
+          withDemoDependencies: false,
+        })
+
+        if (result.error) {
+          throw new Error(
+            `Failed to resolve dependencies: ${result.error.message}`,
+          )
+        }
+
+        console.log("Registry Dependencies Resolution:", {
+          filesReceived: Object.keys(result.data.filesWithRegistry),
+          npmDepsReceived: result.data.npmDependencies,
+          fullResponse: result.data,
+        })
+
+        setRegistryDependencies(result.data.filesWithRegistry)
+        setNpmDependenciesOfRegistryDependencies(result.data.npmDependencies)
+      }
+
       toast.success("Component processed successfully")
     } catch (error) {
       toast.error(
@@ -83,23 +136,46 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
   // Generate files for Sandpack
   const files = useMemo(() => {
     const componentPath = getComponentFilePath()
-    return generateSandpackFiles({
+    const generatedFiles = generateSandpackFiles({
       componentPath,
       componentCode,
       processedData,
-      dependencies: processedData?.npmDependencies?.reduce(
-        (acc: Record<string, string>, dep: string) => ({
-          ...acc,
-          [dep]: "latest",
-        }),
-        {},
-      ),
+      dependencies: {
+        ...(processedData?.npmDependencies?.reduce(
+          (acc: Record<string, string>, dep: string) => ({
+            ...acc,
+            [dep]: "latest",
+          }),
+          {},
+        ) || {}),
+        ...npmDependenciesOfRegistryDependencies,
+      },
+    })
+
+    console.log("Sandpack Files Generation:", {
+      baseFiles: Object.keys(generatedFiles),
+      registryDependencies: Object.keys(registryDependencies),
+      finalFiles: Object.keys({
+        ...registryDependencies,
+        ...generatedFiles,
+      }),
     })
-  }, [componentCode, processedData, getComponentFilePath])
+
+    return {
+      ...registryDependencies,
+      ...generatedFiles,
+    }
+  }, [
+    componentCode,
+    processedData,
+    getComponentFilePath,
+    registryDependencies,
+    npmDependenciesOfRegistryDependencies,
+  ])
 
   // Sandpack configuration
-  const sandpackConfig = useMemo(
-    () => ({
+  const sandpackConfig = useMemo(() => {
+    const config = {
       files,
       options: {
         activeFile: getComponentFilePath(),
@@ -109,6 +185,7 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
           "/tailwind.config.js",
           "/globals.css",
           "/package.json",
+          ...Object.keys(registryDependencies),
         ],
         recompileMode: "delayed" as const,
         recompileDelay: 300,
@@ -116,18 +193,34 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
       template: "react-ts" as const,
       theme: isDarkTheme ? ("dark" as const) : ("light" as const),
       customSetup: {
-        dependencies:
-          processedData?.npmDependencies?.reduce(
+        dependencies: {
+          ...(processedData?.npmDependencies?.reduce(
             (acc: Record<string, string>, dep: string) => ({
               ...acc,
               [dep]: "latest",
             }),
             {},
-          ) || {},
+          ) || {}),
+          ...npmDependenciesOfRegistryDependencies,
+        },
       },
-    }),
-    [files, getComponentFilePath, isDarkTheme, processedData?.npmDependencies],
-  )
+    }
+
+    console.log("Final Sandpack Config:", {
+      visibleFiles: config.options.visibleFiles,
+      allFiles: Object.keys(config.files),
+      dependencies: config.customSetup.dependencies,
+    })
+
+    return config
+  }, [
+    files,
+    getComponentFilePath,
+    isDarkTheme,
+    processedData?.npmDependencies,
+    registryDependencies,
+    npmDependenciesOfRegistryDependencies,
+  ])
 
   return {
     open,

From b76509f91723b843b9ca8f7127d382ba5bbded0b Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Thu, 3 Apr 2025 17:06:19 +0300
Subject: [PATCH 021/143] merge styles

---
 .../api/studio/merge-styles/globals/route.ts  |  93 ++++++++
 .../api/studio/merge-styles/tailwind/route.ts |  92 ++++++++
 .../features/studio/publish/sandpack-files.ts |  32 +--
 .../studio/publish/use-publish-dialog.ts      |  91 +++++++-
 apps/web/lib/queries.server.ts                |  39 +++-
 apps/web/types/supabase.ts                    | 213 ++++++++++++++++++
 6 files changed, 544 insertions(+), 16 deletions(-)
 create mode 100644 apps/web/app/api/studio/merge-styles/globals/route.ts
 create mode 100644 apps/web/app/api/studio/merge-styles/tailwind/route.ts

diff --git a/apps/web/app/api/studio/merge-styles/globals/route.ts b/apps/web/app/api/studio/merge-styles/globals/route.ts
new file mode 100644
index 00000000..110afce0
--- /dev/null
+++ b/apps/web/app/api/studio/merge-styles/globals/route.ts
@@ -0,0 +1,93 @@
+import { OpenAI } from "openai"
+import { NextResponse } from "next/server"
+
+const openai = new OpenAI()
+
+export async function POST(request: Request) {
+  try {
+    const { defaultGlobalCss, dependencyGlobalCss } = await request.json()
+
+    console.log("🔄 [Global CSS Merge] Request received:", {
+      defaultCssLength: defaultGlobalCss?.length,
+      dependencyCssCount: dependencyGlobalCss?.length,
+      dependencyCssSizes: dependencyGlobalCss?.map((css: string) => css.length),
+    })
+
+    // Only proceed if we have custom styles to merge
+    if (!dependencyGlobalCss?.length) {
+      console.log(
+        "⏩ [Global CSS Merge] No custom styles to merge, returning default",
+      )
+      return NextResponse.json({ globalCss: defaultGlobalCss })
+    }
+
+    const prompt = `You are a CSS expert. Please merge the following global CSS styles into a single optimized stylesheet.
+
+Base Global CSS:
+\`\`\`css
+${defaultGlobalCss}
+\`\`\`
+
+${dependencyGlobalCss
+  .map(
+    (css: string, index: number) => `
+Dependency ${index + 1} Global CSS:
+\`\`\`css
+${css}
+\`\`\`
+`,
+  )
+  .join("\n")}
+
+Please provide a merged global.css that:
+1. Combines all styles efficiently
+2. Resolves any conflicts by using the most specific/latest definitions
+3. Maintains all necessary functionality
+4. Eliminates duplicates
+5. Preserves cascade and specificity appropriately
+6. Groups related styles together
+
+Format the response as a JSON object with a 'globalCss' key containing the merged styles.`
+
+    console.log("📤 [Global CSS Merge] Sending request to OpenAI:", {
+      promptLength: prompt.length,
+      stylesToMerge: dependencyGlobalCss.length + 1, // +1 for default styles
+    })
+
+    const completion = await openai.chat.completions.create({
+      messages: [
+        {
+          role: "system",
+          content:
+            "You are a CSS expert who helps merge and optimize stylesheets.",
+        },
+        {
+          role: "user",
+          content: prompt,
+        },
+      ],
+      model: "gpt-4-turbo-preview",
+      response_format: { type: "json_object" },
+    })
+
+    if (!completion.choices[0]?.message.content) {
+      throw new Error("No content in OpenAI response")
+    }
+
+    const result = JSON.parse(completion.choices[0].message.content)
+
+    console.log("📥 [Global CSS Merge] Received response from OpenAI:", {
+      resultLength: result.globalCss?.length,
+      hasCss: !!result.globalCss,
+      firstFewLines: result.globalCss?.split("\n").slice(0, 3).join("\n"),
+    })
+
+    return NextResponse.json(result)
+  } catch (error) {
+    console.error("❌ [Global CSS Merge] Error:", error)
+    return NextResponse.json(
+      { error: "Failed to merge global CSS" },
+      { status: 500 },
+    )
+  }
+}
diff --git a/apps/web/app/api/studio/merge-styles/tailwind/route.ts b/apps/web/app/api/studio/merge-styles/tailwind/route.ts
new file mode 100644
index 00000000..6bf4ca8e
--- /dev/null
+++ b/apps/web/app/api/studio/merge-styles/tailwind/route.ts
@@ -0,0 +1,92 @@
+import { OpenAI } from "openai"
+import { NextResponse } from "next/server"
+
+const openai = new OpenAI()
+
+export async function POST(request: Request) {
+  try {
+    const { defaultConfig, dependencyConfigs } = await request.json()
+
+    console.log("🔄 [Tailwind Merge] Request received:", {
+      defaultConfigLength: defaultConfig?.length,
+      dependencyConfigsCount: dependencyConfigs?.length,
+      dependencyConfigSizes: dependencyConfigs?.map((c: string) => c.length),
+    })
+
+    // Only proceed if we have custom configs to merge
+    if (!dependencyConfigs?.length) {
+      console.log(
+        "⏩ [Tailwind Merge] No custom configs to merge, returning default",
+      )
+      return NextResponse.json({ tailwindConfig: defaultConfig })
+    }
+
+    const prompt = `You are a Tailwind CSS expert. Please merge the following Tailwind CSS configurations into a single optimized configuration.
+
+Base Tailwind Config:
+\`\`\`js
+${defaultConfig}
+\`\`\`
+
+${dependencyConfigs
+  .map(
+    (config: string, index: number) => `
+Dependency ${index + 1} Tailwind Config:
+\`\`\`js
+${config}
+\`\`\`
+`,
+  )
+  .join("\n")}
+
+Please provide a merged Tailwind config that:
+1. Combines all configurations efficiently
+2. Resolves any conflicts by using the most specific/latest definitions
+3. Maintains all necessary functionality
+4. Eliminates duplicates
+5. Preserves the structure of a valid Tailwind config
+
+Format the response as a JSON object with a 'tailwindConfig' key containing the merged configuration.`
+
+    console.log("📤 [Tailwind Merge] Sending request to OpenAI:", {
+      promptLength: prompt.length,
+      configsToMerge: dependencyConfigs.length + 1, // +1 for default config
+    })
+
+    const completion = await openai.chat.completions.create({
+      messages: [
+        {
+          role: "system",
+          content:
+            "You are a Tailwind CSS expert who helps merge and optimize configurations.",
+        },
+        {
+          role: "user",
+          content: prompt,
+        },
+      ],
+      model: "gpt-4-turbo-preview",
+      response_format: { type: "json_object" },
+    })
+
+    if (!completion.choices[0]?.message.content) {
+      throw new Error("No content in OpenAI response")
+    }
+
+    const result = JSON.parse(completion.choices[0].message.content)
+
+    console.log("📥 [Tailwind Merge] Received response from OpenAI:", {
+      resultLength: result.tailwindConfig?.length,
+      hasConfig: !!result.tailwindConfig,
+      firstFewLines: result.tailwindConfig?.split("\n").slice(0, 3).join("\n"),
+    })
+
+    return NextResponse.json(result)
+  } catch (error) {
+    console.error("❌ [Tailwind Merge] Error:", error)
+    return NextResponse.json(
+      { error: "Failed to merge Tailwind configurations" },
+      { status: 500 },
+    )
+  }
+}
diff --git a/apps/web/components/features/studio/publish/sandpack-files.ts b/apps/web/components/features/studio/publish/sandpack-files.ts
index 75f28811..6e48a9ff 100644
--- a/apps/web/components/features/studio/publish/sandpack-files.ts
+++ b/apps/web/components/features/studio/publish/sandpack-files.ts
@@ -6,6 +6,8 @@ interface GenerateFilesOptions {
   componentCode: string
   processedData: any | null
   dependencies?: Record<string, string>
+  customTailwindConfig?: string | null
+  customGlobalCss?: string | null
 }
 
 export function generateSandpackFiles({
@@ -13,6 +15,8 @@ export function generateSandpackFiles({
   componentCode,
   processedData,
   dependencies = {},
+  customTailwindConfig = null,
+  customGlobalCss = null,
 }: GenerateFilesOptions): SandpackFiles {
   const files: SandpackFiles = {
     [componentPath]: {
@@ -65,7 +69,7 @@ root.render(
 );`,
     },
     "/globals.css": {
-      code: defaultGlobalCss,
+      code: customGlobalCss || defaultGlobalCss,
     },
     "/tsconfig.json": {
       code: JSON.stringify(
@@ -150,14 +154,14 @@ export function cn(...inputs: ClassValue[]) {
 }`,
     },
     "/tailwind.config.js": {
-      code: defaultTailwindConfig,
+      code: customTailwindConfig || defaultTailwindConfig,
     },
     "/node_modules/next/package.json": {
       code: `{
   "name": "next",
   "version": "latest",
   "main": "index.js"
-}`
+}`,
     },
     "/node_modules/next/index.js": {
       code: `export { default as Image } from './image';
@@ -167,7 +171,7 @@ export { default as Head } from './head';
 export { default as Script } from './script';
 export { default as dynamic } from './dynamic';
 export { Roboto } from './font';
-export { default as Document } from './document';`
+export { default as Document } from './document';`,
     },
     "/node_modules/next/image.js": {
       code: `import React from 'react';
@@ -176,7 +180,7 @@ const Image = ({ src, alt, width, height, ...props }) => (
   <img src={src} alt={alt} width={width} height={height} {...props} />
 );
 
-export default Image;`
+export default Image;`,
     },
     "/node_modules/next/link.js": {
       code: `import React from 'react';
@@ -185,7 +189,7 @@ const Link = ({ href, children, ...props }) => (
   <a href={href} {...props}>{children}</a>
 );
 
-export default Link;`
+export default Link;`,
     },
     "/node_modules/next/head.js": {
       code: `import React from 'react';
@@ -194,7 +198,7 @@ const Head = ({ children }) => {
   return <div>{children}</div>;
 };
 
-export default Head;`
+export default Head;`,
     },
     "/node_modules/next/script.js": {
       code: `import React from 'react';
@@ -203,7 +207,7 @@ const Script = ({ src, strategy, children, ...props }) => {
   return <script src={src} {...props}>{children}</script>;
 };
 
-export default Script;`
+export default Script;`,
     },
     "/node_modules/next/router.js": {
       code: `import React, { createContext, useContext } from 'react';
@@ -237,7 +241,7 @@ export const RouterProvider = ({ children }) => {
       {children}
     </RouterContext.Provider>
   );
-};`
+};`,
     },
     "/node_modules/next/dynamic.js": {
       code: `import React, { Suspense } from 'react';
@@ -254,12 +258,12 @@ const dynamic = (importFunc, options = {}) => {
   );
 };
 
-export default dynamic;`
+export default dynamic;`,
     },
     "/node_modules/next/font.js": {
       code: `export const Roboto = {
   className: 'font-roboto',
-};`
+};`,
     },
     "/node_modules/next/document.js": {
       code: `import React from 'react';
@@ -279,11 +283,11 @@ export default function Document() {
       </body>
     </Html>
   );
-}`
+}`,
     },
     "/node_modules/next/navigation.js": {
-      code: `export { usePathname } from './router';`
-    }
+      code: `export { usePathname } from './router';`,
+    },
   }
 
   return files
diff --git a/apps/web/components/features/studio/publish/use-publish-dialog.ts b/apps/web/components/features/studio/publish/use-publish-dialog.ts
index c1ac4952..36446fd5 100644
--- a/apps/web/components/features/studio/publish/use-publish-dialog.ts
+++ b/apps/web/components/features/studio/publish/use-publish-dialog.ts
@@ -1,10 +1,10 @@
 import { useState, useCallback, useMemo } from "react"
 import { toast } from "sonner"
 import { useTheme } from "next-themes"
-import type { SandpackFiles } from "@codesandbox/sandpack-react"
 import { generateSandpackFiles } from "./sandpack-files"
 import { resolveRegistryDependencyTree } from "@/lib/queries.server"
 import { useClerkSupabaseClient } from "@/lib/clerk"
+import { defaultGlobalCss, defaultTailwindConfig } from "@/lib/sandpack"
 
 interface UsePublishDialogProps {
   userId: string
@@ -24,6 +24,10 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     npmDependenciesOfRegistryDependencies,
     setNpmDependenciesOfRegistryDependencies,
   ] = useState<Record<string, string>>({})
+  const [mergedTailwindConfig, setMergedTailwindConfig] = useState<
+    string | null
+  >(null)
+  const [mergedGlobalCss, setMergedGlobalCss] = useState<string | null>(null)
   const { resolvedTheme } = useTheme()
   const isDarkTheme = resolvedTheme === "dark"
   const supabase = useClerkSupabaseClient()
@@ -47,6 +51,8 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     setIsPublishing(false)
     setRegistryDependencies({})
     setNpmDependenciesOfRegistryDependencies({})
+    setMergedTailwindConfig(null)
+    setMergedGlobalCss(null)
   }, [])
 
   // Handle dialog open/close
@@ -58,6 +64,74 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     [resetState],
   )
 
+  // Merge styles from dependencies
+  const mergeStyles = useCallback(
+    async (styles: { tailwindConfig?: string; globalCss?: string }[]) => {
+      const customTailwindConfigs = styles
+        .map((s) => s.tailwindConfig)
+        .filter((config): config is string => !!config)
+
+      const customGlobalCssStyles = styles
+        .map((s) => s.globalCss)
+        .filter((css): css is string => !!css)
+
+      // Parallel requests for merging styles
+      const requests: Promise<any>[] = []
+
+      if (customTailwindConfigs.length > 0) {
+        requests.push(
+          fetch("/api/studio/merge-styles/tailwind", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              defaultConfig: defaultTailwindConfig,
+              dependencyConfigs: customTailwindConfigs,
+            }),
+          }).then((res) => res.json()),
+        )
+      }
+
+      if (customGlobalCssStyles.length > 0) {
+        requests.push(
+          fetch("/api/studio/merge-styles/globals", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              defaultGlobalCss: defaultGlobalCss,
+              dependencyGlobalCss: customGlobalCssStyles,
+            }),
+          }).then((res) => res.json()),
+        )
+      }
+
+      if (requests.length === 0) {
+        return {
+          tailwindConfig: defaultTailwindConfig,
+          globalCss: defaultGlobalCss,
+        }
+      }
+
+      try {
+        const results = await Promise.all(requests)
+        return {
+          tailwindConfig:
+            results.find((r) => r.tailwindConfig)?.tailwindConfig ||
+            defaultTailwindConfig,
+          globalCss:
+            results.find((r) => r.globalCss)?.globalCss || defaultGlobalCss,
+        }
+      } catch (error) {
+        console.error("Error merging styles:", error)
+        toast.error("Failed to merge styles from dependencies")
+        return {
+          tailwindConfig: defaultTailwindConfig,
+          globalCss: defaultGlobalCss,
+        }
+      }
+    },
+    [],
+  )
+
   // Process component
   const handleProcessComponent = async () => {
     if (!componentCode.trim()) {
@@ -104,6 +178,7 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
           supabase,
           sourceDependencySlugs: slugs,
           withDemoDependencies: false,
+          withStyles: true, // Enable styles fetching
         })
 
         if (result.error) {
@@ -115,11 +190,21 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
         console.log("Registry Dependencies Resolution:", {
           filesReceived: Object.keys(result.data.filesWithRegistry),
           npmDepsReceived: result.data.npmDependencies,
+          stylesReceived: result.data.styles,
           fullResponse: result.data,
         })
 
         setRegistryDependencies(result.data.filesWithRegistry)
         setNpmDependenciesOfRegistryDependencies(result.data.npmDependencies)
+
+        // Merge styles if we have any
+        if (result.data.styles) {
+          const { tailwindConfig, globalCss } = await mergeStyles([
+            result.data.styles,
+          ])
+          setMergedTailwindConfig(tailwindConfig)
+          setMergedGlobalCss(globalCss)
+        }
       }
 
       toast.success("Component processed successfully")
@@ -150,6 +235,8 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
         ) || {}),
         ...npmDependenciesOfRegistryDependencies,
       },
+      customTailwindConfig: mergedTailwindConfig,
+      customGlobalCss: mergedGlobalCss,
     })
 
     console.log("Sandpack Files Generation:", {
@@ -171,6 +258,8 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     getComponentFilePath,
     registryDependencies,
     npmDependenciesOfRegistryDependencies,
+    mergedTailwindConfig,
+    mergedGlobalCss,
   ])
 
   // Sandpack configuration
diff --git a/apps/web/lib/queries.server.ts b/apps/web/lib/queries.server.ts
index f8b352ae..0c0f3a85 100644
--- a/apps/web/lib/queries.server.ts
+++ b/apps/web/lib/queries.server.ts
@@ -5,15 +5,21 @@ export async function resolveRegistryDependencyTree({
   supabase,
   sourceDependencySlugs,
   withDemoDependencies,
+  withStyles = false,
 }: {
   supabase: SupabaseClient<Database>
   sourceDependencySlugs: string[]
   withDemoDependencies: boolean
+  withStyles?: boolean
 }): Promise<
   | {
       data: {
         filesWithRegistry: Record<string, { code: string; registry: string }>
         npmDependencies: Record<string, string>
+        styles?: {
+          tailwindConfig?: string
+          globalCss?: string
+        }
       }
       error: null
     }
@@ -30,7 +36,7 @@ export async function resolveRegistryDependencyTree({
     })
     .join(",")
   const { data: dependencies, error } = await supabase
-    .from("component_dependencies_graph_view")
+    .from("component_dependencies_graph_view_v2")
     .select("*")
     .or(filterConditions)
     .returns<
@@ -38,6 +44,8 @@ export async function resolveRegistryDependencyTree({
         dependency_author_username: string
         source_component_slug: string
         source_author_username: string
+        tailwind_config_extension: string | null
+        global_css_extension: string | null
       })[]
     >()
 
@@ -56,6 +64,8 @@ export async function resolveRegistryDependencyTree({
       dependency_author_username: username,
       registry,
       dependencies: npmDependencies,
+      tailwind_config_extension,
+      global_css_extension,
     } = dep
 
     const response = await fetch(r2Link!)
@@ -71,6 +81,7 @@ export async function resolveRegistryDependencyTree({
         ),
         npmDependencies: npmDependencies,
         fileWithRegistry: null,
+        styles: null,
       }
     }
 
@@ -85,6 +96,29 @@ export async function resolveRegistryDependencyTree({
         ),
         npmDependencies: npmDependencies,
         fileWithRegistry: null,
+        styles: null,
+      }
+    }
+
+    // Fetch styles if requested and available
+    let styles = null
+    if (withStyles) {
+      const stylesPromises = []
+      if (tailwind_config_extension) {
+        stylesPromises.push(fetch(tailwind_config_extension))
+      }
+      if (global_css_extension) {
+        stylesPromises.push(fetch(global_css_extension))
+      }
+
+      if (stylesPromises.length > 0) {
+        const responses = await Promise.all(stylesPromises)
+        const texts = await Promise.all(responses.map((r) => r.text()))
+        
+        styles = {
+          tailwindConfig: tailwind_config_extension ? texts[0] : undefined,
+          globalCss: global_css_extension ? texts[texts.length - 1] : undefined,
+        }
       }
     }
 
@@ -116,6 +150,7 @@ export async function resolveRegistryDependencyTree({
       error: null,
       npmDependencies: npmDependencies,
       fileWithRegistry,
+      styles,
     }
   })
 
@@ -139,11 +174,13 @@ export async function resolveRegistryDependencyTree({
     {},
     ...results.map((r) => r.fileWithRegistry).filter(Boolean),
   )
+  const styles = results.find((r) => r.styles)?.styles
 
   return {
     data: {
       filesWithRegistry,
       npmDependencies,
+      ...(styles && { styles }),
     },
     error: null,
   }
diff --git a/apps/web/types/supabase.ts b/apps/web/types/supabase.ts
index 7d2b59d0..eba5204d 100644
--- a/apps/web/types/supabase.ts
+++ b/apps/web/types/supabase.ts
@@ -231,6 +231,13 @@ export type Database = {
             referencedRelation: "component_dependencies_graph_view"
             referencedColumns: ["id"]
           },
+          {
+            foreignKeyName: "component_analytics_component_id_fkey"
+            columns: ["component_id"]
+            isOneToOne: false
+            referencedRelation: "component_dependencies_graph_view_v2"
+            referencedColumns: ["id"]
+          },
           {
             foreignKeyName: "component_analytics_component_id_fkey"
             columns: ["component_id"]
@@ -288,6 +295,13 @@ export type Database = {
             referencedRelation: "component_dependencies_graph_view"
             referencedColumns: ["id"]
           },
+          {
+            foreignKeyName: "component_dependencies_closure_component_id_fkey"
+            columns: ["component_id"]
+            isOneToOne: false
+            referencedRelation: "component_dependencies_graph_view_v2"
+            referencedColumns: ["id"]
+          },
           {
             foreignKeyName: "component_dependencies_closure_component_id_fkey"
             columns: ["component_id"]
@@ -309,6 +323,13 @@ export type Database = {
             referencedRelation: "component_dependencies_graph_view"
             referencedColumns: ["id"]
           },
+          {
+            foreignKeyName: "component_dependencies_closure_dependency_component_id_fkey"
+            columns: ["dependency_component_id"]
+            isOneToOne: false
+            referencedRelation: "component_dependencies_graph_view_v2"
+            referencedColumns: ["id"]
+          },
           {
             foreignKeyName: "component_dependencies_closure_dependency_component_id_fkey"
             columns: ["dependency_component_id"]
@@ -349,6 +370,13 @@ export type Database = {
             referencedRelation: "component_dependencies_graph_view"
             referencedColumns: ["id"]
           },
+          {
+            foreignKeyName: "component_likes_component_id_fkey"
+            columns: ["component_id"]
+            isOneToOne: false
+            referencedRelation: "component_dependencies_graph_view_v2"
+            referencedColumns: ["id"]
+          },
           {
             foreignKeyName: "component_likes_component_id_fkey"
             columns: ["component_id"]
@@ -400,6 +428,13 @@ export type Database = {
             referencedRelation: "component_dependencies_graph_view"
             referencedColumns: ["id"]
           },
+          {
+            foreignKeyName: "component_tags_component_id_fkey"
+            columns: ["component_id"]
+            isOneToOne: false
+            referencedRelation: "component_dependencies_graph_view_v2"
+            referencedColumns: ["id"]
+          },
           {
             foreignKeyName: "component_tags_component_id_fkey"
             columns: ["component_id"]
@@ -541,6 +576,20 @@ export type Database = {
             referencedRelation: "component_dependencies_graph_view"
             referencedColumns: ["dependency_author_username"]
           },
+          {
+            foreignKeyName: "components_hunter_username_fkey"
+            columns: ["hunter_username"]
+            isOneToOne: false
+            referencedRelation: "component_dependencies_graph_view_v2"
+            referencedColumns: ["source_author_username"]
+          },
+          {
+            foreignKeyName: "components_hunter_username_fkey"
+            columns: ["hunter_username"]
+            isOneToOne: false
+            referencedRelation: "component_dependencies_graph_view_v2"
+            referencedColumns: ["dependency_author_username"]
+          },
           {
             foreignKeyName: "components_hunter_username_fkey"
             columns: ["hunter_username"]
@@ -601,6 +650,13 @@ export type Database = {
             referencedRelation: "component_dependencies_graph_view"
             referencedColumns: ["id"]
           },
+          {
+            foreignKeyName: "components_purchases_component_id_fkey"
+            columns: ["component_id"]
+            isOneToOne: false
+            referencedRelation: "component_dependencies_graph_view_v2"
+            referencedColumns: ["id"]
+          },
           {
             foreignKeyName: "components_purchases_component_id_fkey"
             columns: ["component_id"]
@@ -662,6 +718,13 @@ export type Database = {
             referencedRelation: "component_dependencies_graph_view"
             referencedColumns: ["id"]
           },
+          {
+            foreignKeyName: "components_to_collections_component_id_fkey"
+            columns: ["component_id"]
+            isOneToOne: false
+            referencedRelation: "component_dependencies_graph_view_v2"
+            referencedColumns: ["id"]
+          },
           {
             foreignKeyName: "components_to_collections_component_id_fkey"
             columns: ["component_id"]
@@ -815,6 +878,13 @@ export type Database = {
             referencedRelation: "component_dependencies_graph_view"
             referencedColumns: ["id"]
           },
+          {
+            foreignKeyName: "demos_component_id_fkey"
+            columns: ["component_id"]
+            isOneToOne: false
+            referencedRelation: "component_dependencies_graph_view_v2"
+            referencedColumns: ["id"]
+          },
           {
             foreignKeyName: "demos_component_id_fkey"
             columns: ["component_id"]
@@ -1000,6 +1070,13 @@ export type Database = {
             referencedRelation: "component_dependencies_graph_view"
             referencedColumns: ["id"]
           },
+          {
+            foreignKeyName: "fk_component"
+            columns: ["component_id"]
+            isOneToOne: false
+            referencedRelation: "component_dependencies_graph_view_v2"
+            referencedColumns: ["id"]
+          },
           {
             foreignKeyName: "fk_component"
             columns: ["component_id"]
@@ -1218,6 +1295,13 @@ export type Database = {
             referencedRelation: "component_dependencies_graph_view"
             referencedColumns: ["id"]
           },
+          {
+            foreignKeyName: "submissions_component_id_fkey"
+            columns: ["component_id"]
+            isOneToOne: true
+            referencedRelation: "component_dependencies_graph_view_v2"
+            referencedColumns: ["id"]
+          },
           {
             foreignKeyName: "submissions_component_id_fkey"
             columns: ["component_id"]
@@ -1596,6 +1680,13 @@ export type Database = {
             referencedRelation: "component_dependencies_graph_view"
             referencedColumns: ["id"]
           },
+          {
+            foreignKeyName: "component_dependencies_closure_component_id_fkey"
+            columns: ["component_id"]
+            isOneToOne: false
+            referencedRelation: "component_dependencies_graph_view_v2"
+            referencedColumns: ["id"]
+          },
           {
             foreignKeyName: "component_dependencies_closure_component_id_fkey"
             columns: ["component_id"]
@@ -1617,6 +1708,121 @@ export type Database = {
             referencedRelation: "component_dependencies_graph_view"
             referencedColumns: ["id"]
           },
+          {
+            foreignKeyName: "component_dependencies_closure_dependency_component_id_fkey"
+            columns: ["dependency_component_id"]
+            isOneToOne: false
+            referencedRelation: "component_dependencies_graph_view_v2"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "component_dependencies_closure_dependency_component_id_fkey"
+            columns: ["dependency_component_id"]
+            isOneToOne: false
+            referencedRelation: "components"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "component_dependencies_closure_dependency_component_id_fkey"
+            columns: ["dependency_component_id"]
+            isOneToOne: false
+            referencedRelation: "components_with_username"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "components_user_id_fkey"
+            columns: ["user_id"]
+            isOneToOne: false
+            referencedRelation: "referral_analytics"
+            referencedColumns: ["user_id"]
+          },
+          {
+            foreignKeyName: "components_user_id_fkey"
+            columns: ["user_id"]
+            isOneToOne: false
+            referencedRelation: "users"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      component_dependencies_graph_view_v2: {
+        Row: {
+          code: string | null
+          component_id: number | null
+          component_names: Json | null
+          component_slug: string | null
+          created_at: string | null
+          demo_code: string | null
+          demo_dependencies: Json | null
+          demo_direct_registry_dependencies: Json | null
+          dependencies: Json | null
+          dependency_author_display_username: string | null
+          dependency_author_username: string | null
+          dependency_component_id: number | null
+          depth: number | null
+          description: string | null
+          direct_registry_dependencies: Json | null
+          downloads_count: number | null
+          fts: unknown | null
+          global_css_extension: string | null
+          id: number | null
+          is_demo_dependency: boolean | null
+          is_public: boolean | null
+          license: string | null
+          likes_count: number | null
+          name: string | null
+          preview_url: string | null
+          registry: string | null
+          source_author_display_username: string | null
+          source_author_username: string | null
+          source_component_slug: string | null
+          tailwind_config_extension: string | null
+          updated_at: string | null
+          user_id: string | null
+        }
+        Relationships: [
+          {
+            foreignKeyName: "component_dependencies_closure_component_id_fkey"
+            columns: ["component_id"]
+            isOneToOne: false
+            referencedRelation: "component_dependencies_graph_view"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "component_dependencies_closure_component_id_fkey"
+            columns: ["component_id"]
+            isOneToOne: false
+            referencedRelation: "component_dependencies_graph_view_v2"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "component_dependencies_closure_component_id_fkey"
+            columns: ["component_id"]
+            isOneToOne: false
+            referencedRelation: "components"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "component_dependencies_closure_component_id_fkey"
+            columns: ["component_id"]
+            isOneToOne: false
+            referencedRelation: "components_with_username"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "component_dependencies_closure_dependency_component_id_fkey"
+            columns: ["dependency_component_id"]
+            isOneToOne: false
+            referencedRelation: "component_dependencies_graph_view"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "component_dependencies_closure_dependency_component_id_fkey"
+            columns: ["dependency_component_id"]
+            isOneToOne: false
+            referencedRelation: "component_dependencies_graph_view_v2"
+            referencedColumns: ["id"]
+          },
           {
             foreignKeyName: "component_dependencies_closure_dependency_component_id_fkey"
             columns: ["dependency_component_id"]
@@ -1721,6 +1927,13 @@ export type Database = {
             referencedRelation: "component_dependencies_graph_view"
             referencedColumns: ["id"]
           },
+          {
+            foreignKeyName: "component_analytics_component_id_fkey"
+            columns: ["component_id"]
+            isOneToOne: false
+            referencedRelation: "component_dependencies_graph_view_v2"
+            referencedColumns: ["id"]
+          },
           {
             foreignKeyName: "component_analytics_component_id_fkey"
             columns: ["component_id"]

From 1c402c17062c4536f97165494d69c211e1a1b751 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Thu, 3 Apr 2025 17:17:54 +0300
Subject: [PATCH 022/143] custom file tree

---
 .../studio/publish/custom-file-explorer.tsx   | 180 ++++++++++++++++++
 .../studio/publish/publish-dialog.tsx         |   4 +-
 2 files changed, 183 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/components/features/studio/publish/custom-file-explorer.tsx

diff --git a/apps/web/components/features/studio/publish/custom-file-explorer.tsx b/apps/web/components/features/studio/publish/custom-file-explorer.tsx
new file mode 100644
index 00000000..89a59eab
--- /dev/null
+++ b/apps/web/components/features/studio/publish/custom-file-explorer.tsx
@@ -0,0 +1,180 @@
+import { useSandpack } from "@codesandbox/sandpack-react"
+import { cn } from "@/lib/utils"
+import {
+  ChevronRight,
+  ChevronDown,
+  Folder,
+  FolderOpen,
+  File,
+} from "lucide-react"
+import { useState, useMemo } from "react"
+
+interface FileTreeItem {
+  name: string
+  path: string
+  type: "file" | "directory"
+  children?: FileTreeItem[]
+}
+
+function buildFileTree(files: string[]): {
+  tree: FileTreeItem[]
+  directories: Set<string>
+} {
+  const root: FileTreeItem[] = []
+  const directories = new Set<string>()
+
+  files.forEach((path) => {
+    const parts = path.split("/").filter(Boolean)
+    let current = root
+    let currentPath = ""
+
+    parts.forEach((part, index) => {
+      currentPath += `/${part}`
+      const isLast = index === parts.length - 1
+      const existingItem = current.find((item) => item.name === part)
+
+      if (!isLast) {
+        directories.add(currentPath)
+      }
+
+      if (existingItem) {
+        if (isLast) {
+          existingItem.type = "file"
+          existingItem.path = path
+        }
+        current = existingItem.children || []
+      } else {
+        const newItem: FileTreeItem = {
+          name: part,
+          path: isLast ? path : currentPath,
+          type: isLast ? "file" : "directory",
+          children: isLast ? undefined : [],
+        }
+        current.push(newItem)
+        if (!isLast) {
+          current = newItem.children!
+        }
+      }
+    })
+  })
+
+  return { tree: root, directories }
+}
+
+function FileTreeNode({
+  item,
+  level = 0,
+  activeFile,
+  onFileClick,
+  expandedDirs,
+  onToggleDir,
+}: {
+  item: FileTreeItem
+  level?: number
+  activeFile: string
+  onFileClick: (path: string) => void
+  expandedDirs: Set<string>
+  onToggleDir: (path: string) => void
+}) {
+  const isExpanded = expandedDirs.has(item.path)
+  const isActive = item.path === activeFile
+
+  return (
+    <div>
+      <button
+        className={cn(
+          "w-full text-left py-1.5 text-sm flex items-center gap-2 hover:bg-muted/50 transition-colors",
+          isActive && "bg-muted text-primary",
+        )}
+        style={{ paddingLeft: `${level * 12 + 16}px` }}
+        onClick={() => {
+          if (item.type === "directory") {
+            onToggleDir(item.path)
+          } else {
+            onFileClick(item.path)
+          }
+        }}
+      >
+        {item.type === "directory" && (
+          <div className="w-4 h-4 flex items-center justify-center">
+            {isExpanded ? (
+              <ChevronDown className="h-3.5 w-3.5" />
+            ) : (
+              <ChevronRight className="h-3.5 w-3.5" />
+            )}
+          </div>
+        )}
+        {item.type === "directory" ? (
+          isExpanded ? (
+            <FolderOpen className="h-4 w-4 text-blue-500" />
+          ) : (
+            <Folder className="h-4 w-4 text-blue-500" />
+          )
+        ) : (
+          <File className="h-4 w-4 text-gray-500" />
+        )}
+        <span className="truncate">{item.name}</span>
+      </button>
+
+      {item.type === "directory" && isExpanded && item.children && (
+        <div>
+          {item.children.map((child, index) => (
+            <FileTreeNode
+              key={child.path + index}
+              item={child}
+              level={level + 1}
+              activeFile={activeFile}
+              onFileClick={onFileClick}
+              expandedDirs={expandedDirs}
+              onToggleDir={onToggleDir}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function CustomFileExplorer() {
+  const { sandpack } = useSandpack()
+  const { visibleFiles, activeFile, setActiveFile } = sandpack
+
+  const { tree: fileTree, directories } = useMemo(
+    () => buildFileTree(visibleFiles),
+    [visibleFiles],
+  )
+
+  const [expandedDirs, setExpandedDirs] = useState<Set<string>>(directories)
+
+  const handleToggleDir = (path: string) => {
+    setExpandedDirs((prev) => {
+      const next = new Set(prev)
+      if (next.has(path)) {
+        next.delete(path)
+      } else {
+        next.add(path)
+      }
+      return next
+    })
+  }
+
+  return (
+    <div className="w-64 border-r overflow-auto">
+      <div className="mt-4 px-4 text-[13px] font-medium text-muted-foreground">
+        Project Files
+      </div>
+      <div className="mt-2">
+        {fileTree.map((item, index) => (
+          <FileTreeNode
+            key={item.path + index}
+            item={item}
+            activeFile={activeFile}
+            onFileClick={setActiveFile}
+            expandedDirs={expandedDirs}
+            onToggleDir={handleToggleDir}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/components/features/studio/publish/publish-dialog.tsx b/apps/web/components/features/studio/publish/publish-dialog.tsx
index 77fe5b44..7ba156ed 100644
--- a/apps/web/components/features/studio/publish/publish-dialog.tsx
+++ b/apps/web/components/features/studio/publish/publish-dialog.tsx
@@ -17,6 +17,7 @@ import {
 
 import { CodeEditor } from "./code-editor"
 import { FileExplorer } from "./file-explorer"
+import { CustomFileExplorer } from "./custom-file-explorer"
 import { usePublishDialog } from "./use-publish-dialog"
 
 interface PublishDialogProps {
@@ -83,8 +84,9 @@ export function PublishDialog({ userId }: PublishDialogProps) {
               </div>
               <SandpackLayout style={{ height: "100%" }}>
                 <div className="flex w-full h-full">
-                  <div className="w-64 border-r border-border">
+                  <div className="flex border-r border-border">
                     <FileExplorer />
+                    <CustomFileExplorer />
                   </div>
                   <div className="flex-1">
                     <CodeEditor

From 58a60075049219034232bc90d9f2c4e1c4648d58 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Fri, 4 Apr 2025 10:28:12 +0300
Subject: [PATCH 023/143] unknown files init

---
 .../api/studio/preprocess-component/route.ts  | 161 +++++++++++------
 .../studio/publish/custom-component-view.tsx  |  23 +++
 .../studio/publish/custom-file-explorer.tsx   | 138 +++++++++++---
 .../studio/publish/publish-dialog.tsx         | 135 ++++++++++++--
 .../studio/publish/use-publish-dialog.ts      | 168 +++++++++++-------
 5 files changed, 462 insertions(+), 163 deletions(-)
 create mode 100644 apps/web/components/features/studio/publish/custom-component-view.tsx

diff --git a/apps/web/app/api/studio/preprocess-component/route.ts b/apps/web/app/api/studio/preprocess-component/route.ts
index e20d3583..b3be35a3 100644
--- a/apps/web/app/api/studio/preprocess-component/route.ts
+++ b/apps/web/app/api/studio/preprocess-component/route.ts
@@ -12,8 +12,17 @@ const openai = new OpenAI({
 const MOCK_RESPONSE = {
   componentName: "ExampleComponent",
   registryType: "ui",
-  shadcnComponentsImports: ["Button", "Dialog", "Input"],
-  nonShadcnComponentsImports: ["SomeCustomComponent"],
+  shadcnComponentsImports: [
+    { name: "Button", path: "@/components/ui/button" },
+    { name: "Dialog", path: "@/components/ui/dialog" },
+    { name: "Input", path: "@/components/ui/input" },
+  ],
+  nonShadcnComponentsImports: [
+    {
+      name: "SomeCustomComponent",
+      path: "@/components/ui/some-custom-component",
+    },
+  ],
   npmDependencies: ["react", "next", "lucide-react"],
   environmentVariables: [],
   additionalStyles: {
@@ -54,6 +63,7 @@ export async function POST(request: Request) {
     let result
     try {
       result = await preprocessComponent(code)
+      console.log("OpenAI preprocessing result:", result)
     } catch (error) {
       console.error("OpenAI API error:", error)
       // If OpenAI fails, use mock response for testing
@@ -70,10 +80,14 @@ export async function POST(request: Request) {
     // If not unique, generate a unique slug
     const finalSlug = isUnique ? slug : await generateUniqueSlug(slug, userId)
 
-    return NextResponse.json({
+    const response = {
       ...result,
       slug: finalSlug,
-    })
+    }
+
+    console.log("Final preprocessed response:", response)
+
+    return NextResponse.json(response)
   } catch (error) {
     console.error("Error preprocessing component:", error)
     return NextResponse.json(
@@ -86,7 +100,6 @@ export async function POST(request: Request) {
 async function preprocessComponent(code: string) {
   // Try to detect component name from code before using OpenAI
   // This is a basic regex approach to find component declarations
-  let componentName = extractComponentName(code) || "Component"
 
   const response = await openai.chat.completions.create({
     model: "gpt-4o",
@@ -99,60 +112,65 @@ async function preprocessComponent(code: string) {
    - 'ui' (basic components like Button, Card, etc.)
    - 'hooks' (custom React hooks)
    - 'blocks' (larger components like hero sections, pricing sections, etc.)
-3. Identify any shadcn/ui imports from 'components/ui/' and list their names (one of the following): 
-	1.	Accordion
-	2.	Alert
-	3.	Alert Dialog
-	4.	Aspect Ratio
-	5.	Avatar
-	6.	Badge
-	7.	Breadcrumb
-	8.	Button
-	9.	Calendar
-	10.	Card
-	11.	Carousel
-	12.	Chart
-	13.	Checkbox
-	14.	Collapsible
-	15.	Combobox
-	16.	Command
-	17.	Context Menu
-	18.	Data Table
-	19.	Date Picker
-	20.	Dialog
-	21.	Drawer
-	22.	Dropdown Menu
-	23.	Form
-	24.	Hover Card
-	25.	Input
-	26.	Input OTP
-	27.	Label
-	28.	Menubar
-	29.	Navigation Menu
-	30.	Pagination
-	31.	Popover
-	32.	Progress
-	33.	Radio Group
-	34.	Resizable
-	35.	Scroll Area
-	36.	Select
-	37.	Separator
-	38.	Sheet
-	39.	Sidebar
-	40.	Skeleton
-	41.	Slider
-	42.	Sonner
-	43.	Switch
-	44.	Table
-	45.	Tabs
-	46.	Textarea
-	47.	Toast
-	48.	Toggle
-	49.	Toggle Group
-	50.	Tooltip
+3. Identify any shadcn/ui imports from 'components/ui/' and list their names and paths (one of the following): 
+	1.	Accordion (@/components/ui/accordion)
+	2.	Alert (@/components/ui/alert)
+	3.	Alert Dialog (@/components/ui/alert-dialog)
+	4.	Aspect Ratio (@/components/ui/aspect-ratio)
+	5.	Avatar (@/components/ui/avatar)
+	6.	Badge (@/components/ui/badge)
+	7.	Breadcrumb (@/components/ui/breadcrumb)
+	8.	Button (@/components/ui/button)
+	9.	Calendar (@/components/ui/calendar)
+	10.	Card (@/components/ui/card)
+	11.	Carousel (@/components/ui/carousel)
+	12.	Chart (@/components/ui/chart)
+	13.	Checkbox (@/components/ui/checkbox)
+	14.	Collapsible (@/components/ui/collapsible)
+	15.	Combobox (@/components/ui/combobox)
+	16.	Command (@/components/ui/command)
+	17.	Context Menu (@/components/ui/context-menu)
+	18.	Data Table (@/components/ui/data-table)
+	19.	Date Picker (@/components/ui/date-picker)
+	20.	Dialog (@/components/ui/dialog)
+	21.	Drawer (@/components/ui/drawer)
+	22.	Dropdown Menu (@/components/ui/dropdown-menu)
+	23.	Form (@/components/ui/form)
+	24.	Hover Card (@/components/ui/hover-card)
+	25.	Input (@/components/ui/input)
+	26.	Input OTP (@/components/ui/input-otp)
+	27.	Label (@/components/ui/label)
+	28.	Menubar (@/components/ui/menubar)
+	29.	Navigation Menu (@/components/ui/navigation-menu)
+	30.	Pagination (@/components/ui/pagination)
+	31.	Popover (@/components/ui/popover)
+	32.	Progress (@/components/ui/progress)
+	33.	Radio Group (@/components/ui/radio-group)
+	34.	Resizable (@/components/ui/resizable)
+	35.	Scroll Area (@/components/ui/scroll-area)
+	36.	Select (@/components/ui/select)
+	37.	Separator (@/components/ui/separator)
+	38.	Sheet (@/components/ui/sheet)
+	39.	Sidebar (@/components/ui/sidebar)
+	40.	Skeleton (@/components/ui/skeleton)
+	41.	Slider (@/components/ui/slider)
+	42.	Sonner (@/components/ui/sonner)
+	43.	Switch (@/components/ui/switch)
+	44.	Table (@/components/ui/table)
+	45.	Tabs (@/components/ui/tabs)
+	46.	Textarea (@/components/ui/textarea)
+	47.	Toast (@/components/ui/toast)
+	48.	Toggle (@/components/ui/toggle)
+	49.	Toggle Group (@/components/ui/toggle-group)
+	50.	Tooltip (@/components/ui/tooltip)
 )
 4. Identify any non-shadcn/ui component imports (including @/hooks and @/components/[registry]/ components, excluding npm packages and standard shadcn utilities). 
-   IMPORTANT: DO NOT include imports like { cn } from "@/lib/utils" or any other utility functions. Only include actual component imports.
+   IMPORTANT:
+   - DO NOT include imports like { cn } from "@/lib/utils" or any other utility functions. Only include actual component imports.
+   - If multiple components are exported from the same file, list only one of them.
+   - The path should be based on the file location, not the component name.
+   - For example, if file mockup.tsx exports both Mockup and MockupFrame components, list only Mockup from "@/components/ui/mockup".
+   For each component, provide both the name and its path.
 
 5. List all npm package dependencies used in the component (excluding react, react-dom, tailwindcss, and any packages starting with 'next' or '@/')
 6. Identify any environment variables (process.env.*) that the component requires to function correctly.
@@ -174,12 +192,37 @@ And here's the default globals CSS:
 ${defaultGlobalCss}
 \`\`\`
 
+IMPORTANT RULES FOR COMPONENT PATHS:
+1. Components exported from the same file MUST share the same path
+2. The path should be based on the actual file location, not the component name
+3. The filename in the path should match the actual file that contains the component
+4. Multiple components from the same file should be listed separately but with identical paths
+
+Example of correct path handling:
+If a file "@/components/ui/mockup.tsx" exports both Mockup and MockupFrame components:
+{
+  "nonShadcnComponentsImports": [
+    { "name": "Mockup", "path": "@/components/ui/mockup" },
+    { "name": "MockupFrame", "path": "@/components/ui/mockup" }
+  ]
+}
+
 Respond in JSON format only with the following structure:
 {
   "componentName": "string",
   "registryType": "ui|hooks|blocks",
-  "shadcnComponentsImports": ["string"],
-  "nonShadcnComponentsImports": ["string"],
+  "shadcnComponentsImports": [
+    {
+      "name": "string",
+      "path": "@/components/ui/component-name"
+    }
+  ],
+  "nonShadcnComponentsImports": [
+    {
+      "name": "string",
+      "path": "@/components/[registry]/component-name"
+    }
+  ],
   "npmDependencies": ["string"],
   "environmentVariables": [
     {
diff --git a/apps/web/components/features/studio/publish/custom-component-view.tsx b/apps/web/components/features/studio/publish/custom-component-view.tsx
new file mode 100644
index 00000000..876955f9
--- /dev/null
+++ b/apps/web/components/features/studio/publish/custom-component-view.tsx
@@ -0,0 +1,23 @@
+import { cn } from "@/lib/utils"
+
+interface CustomComponentViewProps {
+  componentName: string
+  className?: string
+}
+
+export function CustomComponentView({
+  componentName,
+  className,
+}: CustomComponentViewProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center h-full p-8 bg-background",
+        className,
+      )}
+    >
+      <div className="text-2xl font-semibold mb-4">Custom Component</div>
+      <div className="text-xl text-muted-foreground">{componentName}</div>
+    </div>
+  )
+}
diff --git a/apps/web/components/features/studio/publish/custom-file-explorer.tsx b/apps/web/components/features/studio/publish/custom-file-explorer.tsx
index 89a59eab..06c49129 100644
--- a/apps/web/components/features/studio/publish/custom-file-explorer.tsx
+++ b/apps/web/components/features/studio/publish/custom-file-explorer.tsx
@@ -6,32 +6,53 @@ import {
   Folder,
   FolderOpen,
   File,
+  FileWarning,
 } from "lucide-react"
-import { useState, useMemo } from "react"
+import { useState, useMemo, useCallback } from "react"
 
 interface FileTreeItem {
   name: string
   path: string
   type: "file" | "directory"
   children?: FileTreeItem[]
+  isUnknownComponent?: boolean
 }
 
-function buildFileTree(files: string[]): {
+interface CustomFileExplorerProps {
+  nonShadcnComponents?: Array<{ name: string; path: string }>
+  onCustomComponentClick?: (componentName: string) => void
+  onFileSelect?: (path: string) => void
+  selectedFile?: string | null
+}
+
+function buildFileTree(
+  files: string[],
+  unknownComponents: Array<{ name: string; path: string }> = [],
+): {
   tree: FileTreeItem[]
   directories: Set<string>
 } {
   const root: FileTreeItem[] = []
   const directories = new Set<string>()
 
-  files.forEach((path) => {
-    const parts = path.split("/").filter(Boolean)
+  // Helper function to add item to tree
+  const addToTree = (
+    path: string,
+    isUnknownComponent = false,
+    componentName?: string,
+  ) => {
+    const parts = path.replace("@/", "").split("/").filter(Boolean)
     let current = root
     let currentPath = ""
 
     parts.forEach((part, index) => {
       currentPath += `/${part}`
       const isLast = index === parts.length - 1
-      const existingItem = current.find((item) => item.name === part)
+      const displayName =
+        isLast && isUnknownComponent
+          ? `${componentName?.toLowerCase()}.tsx`
+          : part
+      const existingItem = current.find((item) => item.name === displayName)
 
       if (!isLast) {
         directories.add(currentPath)
@@ -41,23 +62,70 @@ function buildFileTree(files: string[]): {
         if (isLast) {
           existingItem.type = "file"
           existingItem.path = path
+          if (isUnknownComponent) {
+            existingItem.isUnknownComponent = true
+          }
         }
         current = existingItem.children || []
       } else {
         const newItem: FileTreeItem = {
-          name: part,
+          name: displayName,
           path: isLast ? path : currentPath,
           type: isLast ? "file" : "directory",
           children: isLast ? undefined : [],
+          isUnknownComponent: isLast ? isUnknownComponent : undefined,
         }
-        current.push(newItem)
+
+        // Insert item in sorted position
+        const insertIndex = current.findIndex((item) => {
+          if (item.type === newItem.type) {
+            return item.name.localeCompare(newItem.name) > 0
+          }
+          return item.type === "file"
+        })
+
+        if (insertIndex === -1) {
+          current.push(newItem)
+        } else {
+          current.splice(insertIndex, 0, newItem)
+        }
+
         if (!isLast) {
           current = newItem.children!
         }
       }
     })
+  }
+
+  // Add standard files
+  files.forEach((path) => {
+    addToTree(path)
+  })
+
+  // Add unknown components to their respective directories
+  unknownComponents.forEach((comp) => {
+    addToTree(comp.path, true, comp.name)
   })
 
+  // Helper function to sort children recursively
+  const sortTreeRecursively = (items: FileTreeItem[]) => {
+    items.sort((a, b) => {
+      if (a.type !== b.type) {
+        return a.type === "directory" ? -1 : 1
+      }
+      return a.name.localeCompare(b.name)
+    })
+
+    items.forEach((item) => {
+      if (item.children) {
+        sortTreeRecursively(item.children)
+      }
+    })
+  }
+
+  // Sort the entire tree
+  sortTreeRecursively(root)
+
   return { tree: root, directories }
 }
 
@@ -68,6 +136,7 @@ function FileTreeNode({
   onFileClick,
   expandedDirs,
   onToggleDir,
+  onCustomComponentClick,
 }: {
   item: FileTreeItem
   level?: number
@@ -75,21 +144,25 @@ function FileTreeNode({
   onFileClick: (path: string) => void
   expandedDirs: Set<string>
   onToggleDir: (path: string) => void
+  onCustomComponentClick?: (componentName: string) => void
 }) {
   const isExpanded = expandedDirs.has(item.path)
-  const isActive = item.path === activeFile
+  const isActive = activeFile === item.path
 
   return (
     <div>
       <button
         className={cn(
           "w-full text-left py-1.5 text-sm flex items-center gap-2 hover:bg-muted/50 transition-colors",
-          isActive && "bg-muted text-primary",
+          isActive && "bg-muted text-primary font-medium",
+          item.isUnknownComponent && isActive && "bg-yellow-500/10",
         )}
         style={{ paddingLeft: `${level * 12 + 16}px` }}
         onClick={() => {
           if (item.type === "directory") {
             onToggleDir(item.path)
+          } else if (item.isUnknownComponent && onCustomComponentClick) {
+            onCustomComponentClick(item.name.replace(".tsx", ""))
           } else {
             onFileClick(item.path)
           }
@@ -110,10 +183,19 @@ function FileTreeNode({
           ) : (
             <Folder className="h-4 w-4 text-blue-500" />
           )
+        ) : item.isUnknownComponent ? (
+          <FileWarning className="h-4 w-4 text-yellow-500" />
         ) : (
           <File className="h-4 w-4 text-gray-500" />
         )}
-        <span className="truncate">{item.name}</span>
+        <span
+          className={cn(
+            "truncate",
+            item.isUnknownComponent && "text-yellow-600",
+          )}
+        >
+          {item.name}
+        </span>
       </button>
 
       {item.type === "directory" && isExpanded && item.children && (
@@ -127,6 +209,7 @@ function FileTreeNode({
               onFileClick={onFileClick}
               expandedDirs={expandedDirs}
               onToggleDir={onToggleDir}
+              onCustomComponentClick={onCustomComponentClick}
             />
           ))}
         </div>
@@ -135,13 +218,18 @@ function FileTreeNode({
   )
 }
 
-export function CustomFileExplorer() {
+export function CustomFileExplorer({
+  nonShadcnComponents = [],
+  onCustomComponentClick,
+  onFileSelect,
+  selectedFile,
+}: CustomFileExplorerProps) {
   const { sandpack } = useSandpack()
-  const { visibleFiles, activeFile, setActiveFile } = sandpack
+  const { visibleFiles } = sandpack
 
   const { tree: fileTree, directories } = useMemo(
-    () => buildFileTree(visibleFiles),
-    [visibleFiles],
+    () => buildFileTree(visibleFiles, nonShadcnComponents),
+    [visibleFiles, nonShadcnComponents],
   )
 
   const [expandedDirs, setExpandedDirs] = useState<Set<string>>(directories)
@@ -158,20 +246,28 @@ export function CustomFileExplorer() {
     })
   }
 
+  const handleFileClick = useCallback(
+    (path: string) => {
+      if (onFileSelect) {
+        onFileSelect(path)
+      }
+    },
+    [onFileSelect],
+  )
+
   return (
-    <div className="w-64 border-r overflow-auto">
-      <div className="mt-4 px-4 text-[13px] font-medium text-muted-foreground">
-        Project Files
-      </div>
-      <div className="mt-2">
+    <div className="w-[200px] overflow-auto border-r border-border">
+      <div className="p-2 text-sm font-medium text-muted-foreground">Files</div>
+      <div className="space-y-1">
         {fileTree.map((item, index) => (
           <FileTreeNode
             key={item.path + index}
             item={item}
-            activeFile={activeFile}
-            onFileClick={setActiveFile}
+            activeFile={selectedFile || ""}
+            onFileClick={handleFileClick}
             expandedDirs={expandedDirs}
             onToggleDir={handleToggleDir}
+            onCustomComponentClick={onCustomComponentClick}
           />
         ))}
       </div>
diff --git a/apps/web/components/features/studio/publish/publish-dialog.tsx b/apps/web/components/features/studio/publish/publish-dialog.tsx
index 7ba156ed..95f93bdc 100644
--- a/apps/web/components/features/studio/publish/publish-dialog.tsx
+++ b/apps/web/components/features/studio/publish/publish-dialog.tsx
@@ -13,12 +13,15 @@ import {
   SandpackProvider,
   SandpackLayout,
   OpenInCodeSandboxButton,
+  useSandpack,
 } from "@codesandbox/sandpack-react"
 
 import { CodeEditor } from "./code-editor"
 import { FileExplorer } from "./file-explorer"
 import { CustomFileExplorer } from "./custom-file-explorer"
+import { CustomComponentView } from "./custom-component-view"
 import { usePublishDialog } from "./use-publish-dialog"
+import React from "react"
 
 interface PublishDialogProps {
   userId: string
@@ -28,9 +31,14 @@ export function PublishDialog({ userId }: PublishDialogProps) {
   const {
     open,
     componentCode,
+    processedData,
     isProcessing,
+    selectedCustomComponent,
+    selectedFile,
     handleOpenChange,
     handleProcessComponent,
+    handleCustomComponentClick,
+    handleFileClick,
     setComponentCode,
     sandpackConfig,
     getComponentFilePath,
@@ -79,23 +87,15 @@ export function PublishDialog({ userId }: PublishDialogProps) {
         <div className="flex-grow overflow-hidden flex flex-col h-full">
           <div className="h-full min-h-[400px] overflow-hidden flex-grow">
             <SandpackProvider {...sandpackConfig}>
-              <div className="absolute bottom-2 right-2">
-                <OpenInCodeSandboxButton />
-              </div>
-              <SandpackLayout style={{ height: "100%" }}>
-                <div className="flex w-full h-full">
-                  <div className="flex border-r border-border">
-                    <FileExplorer />
-                    <CustomFileExplorer />
-                  </div>
-                  <div className="flex-1">
-                    <CodeEditor
-                      componentPath={getComponentFilePath()}
-                      onCodeChange={setComponentCode}
-                    />
-                  </div>
-                </div>
-              </SandpackLayout>
+              <SandpackContent
+                selectedCustomComponent={selectedCustomComponent}
+                selectedFile={selectedFile}
+                onFileSelect={handleFileClick}
+                onCustomComponentClick={handleCustomComponentClick}
+                nonShadcnComponents={processedData?.nonShadcnComponentsImports}
+                getComponentFilePath={getComponentFilePath}
+                setComponentCode={setComponentCode}
+              />
             </SandpackProvider>
           </div>
         </div>
@@ -103,3 +103,104 @@ export function PublishDialog({ userId }: PublishDialogProps) {
     </Dialog>
   )
 }
+
+interface SandpackContentProps {
+  selectedCustomComponent: string | null
+  selectedFile: string | null
+  onFileSelect: (path: string) => void
+  onCustomComponentClick: (name: string) => void
+  nonShadcnComponents?: Array<{ name: string; path: string }>
+  getComponentFilePath: () => string
+  setComponentCode: (code: string) => void
+}
+
+function SandpackContent({
+  selectedCustomComponent,
+  selectedFile,
+  onFileSelect,
+  onCustomComponentClick,
+  nonShadcnComponents,
+  getComponentFilePath,
+  setComponentCode,
+}: SandpackContentProps) {
+  const { sandpack } = useSandpack()
+  const componentPath = getComponentFilePath()
+
+  // Set initial file only once when component mounts
+  React.useEffect(() => {
+    if (!selectedFile && !selectedCustomComponent) {
+      sandpack.setActiveFile(componentPath)
+      onFileSelect(componentPath)
+    }
+  }, [
+    componentPath,
+    onFileSelect,
+    sandpack,
+    selectedFile,
+    selectedCustomComponent,
+  ])
+
+  const handleFileSelect = (path: string) => {
+    // Check if this is an unknown component
+    const isUnknownComponent = nonShadcnComponents?.some(
+      (comp) => comp.path === path,
+    )
+
+    if (isUnknownComponent) {
+      // For unknown components, don't change the editor file
+      const componentName = nonShadcnComponents?.find(
+        (comp) => comp.path === path,
+      )?.name
+      if (componentName) {
+        onCustomComponentClick(componentName)
+        onFileSelect(path) // Update selectedFile to highlight in tree
+      }
+    } else {
+      // For regular files, update both the editor and selection
+      onFileSelect(path)
+      sandpack.setActiveFile(path)
+    }
+  }
+
+  // Keep editor file in sync with selection for non-custom components
+  React.useEffect(() => {
+    if (
+      !selectedCustomComponent &&
+      selectedFile &&
+      sandpack.activeFile !== selectedFile
+    ) {
+      sandpack.setActiveFile(selectedFile)
+    }
+  }, [selectedFile, selectedCustomComponent, sandpack.activeFile])
+
+  return (
+    <>
+      <div className="absolute bottom-2 right-2">
+        <OpenInCodeSandboxButton />
+      </div>
+      <SandpackLayout style={{ height: "100%" }}>
+        <div className="flex w-full h-full">
+          <div className="flex border-r border-border">
+            <FileExplorer />
+            <CustomFileExplorer
+              nonShadcnComponents={nonShadcnComponents}
+              onCustomComponentClick={onCustomComponentClick}
+              onFileSelect={handleFileSelect}
+              selectedFile={selectedFile}
+            />
+          </div>
+          <div className="flex-1">
+            {selectedCustomComponent ? (
+              <CustomComponentView componentName={selectedCustomComponent} />
+            ) : (
+              <CodeEditor
+                componentPath={selectedFile || componentPath}
+                onCodeChange={setComponentCode}
+              />
+            )}
+          </div>
+        </div>
+      </SandpackLayout>
+    </>
+  )
+}
diff --git a/apps/web/components/features/studio/publish/use-publish-dialog.ts b/apps/web/components/features/studio/publish/use-publish-dialog.ts
index 36446fd5..8cf0367e 100644
--- a/apps/web/components/features/studio/publish/use-publish-dialog.ts
+++ b/apps/web/components/features/studio/publish/use-publish-dialog.ts
@@ -17,6 +17,10 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
   const [processedData, setProcessedData] = useState<any>(null)
   const [isProcessing, setIsProcessing] = useState(false)
   const [isPublishing, setIsPublishing] = useState(false)
+  const [selectedFile, setSelectedFile] = useState<string | null>(null)
+  const [selectedCustomComponent, setSelectedCustomComponent] = useState<
+    string | null
+  >(null)
   const [registryDependencies, setRegistryDependencies] = useState<
     Record<string, { code: string; registry: string }>
   >({})
@@ -49,6 +53,8 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     setProcessedData(null)
     setIsProcessing(false)
     setIsPublishing(false)
+    setSelectedCustomComponent(null)
+    setSelectedFile(null)
     setRegistryDependencies({})
     setNpmDependenciesOfRegistryDependencies({})
     setMergedTailwindConfig(null)
@@ -64,6 +70,82 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     [resetState],
   )
 
+  // Handle custom component selection
+  const handleCustomComponentClick = useCallback((componentName: string) => {
+    setSelectedCustomComponent(componentName)
+  }, [])
+
+  // Generate files for Sandpack
+  const files = useMemo(() => {
+    const componentPath = getComponentFilePath()
+    const generatedFiles = generateSandpackFiles({
+      componentPath,
+      componentCode,
+      processedData,
+      dependencies: {
+        ...(processedData?.npmDependencies?.reduce(
+          (acc: Record<string, string>, dep: string) => ({
+            ...acc,
+            [dep]: "latest",
+          }),
+          {},
+        ) || {}),
+        ...npmDependenciesOfRegistryDependencies,
+      },
+      customTailwindConfig: mergedTailwindConfig,
+      customGlobalCss: mergedGlobalCss,
+    })
+
+    // Merge registry dependencies with generated files
+    return {
+      ...registryDependencies,
+      ...generatedFiles,
+    }
+  }, [
+    getComponentFilePath,
+    componentCode,
+    processedData,
+    npmDependenciesOfRegistryDependencies,
+    registryDependencies,
+    mergedTailwindConfig,
+    mergedGlobalCss,
+  ])
+
+  // Handle file selection
+  const handleFileClick = useCallback(
+    (path: string) => {
+      if (path === selectedFile) return // Prevent unnecessary updates if clicking the same file
+
+      setSelectedFile(path)
+
+      // Only reset custom component if we're not clicking a custom component file
+      const isCustomComponent = Object.values(registryDependencies).some(
+        (dep) => dep.registry && path === dep.registry,
+      )
+
+      if (!isCustomComponent) {
+        setSelectedCustomComponent(null)
+      }
+
+      // Only update component code if necessary
+      if (path === getComponentFilePath()) {
+        return // Don't update code when clicking main component file
+      }
+
+      // For other files, get the code from Sandpack files
+      const fileContent = files[path]
+      if (fileContent) {
+        const newCode =
+          typeof fileContent === "string" ? fileContent : fileContent.code
+
+        if (newCode) {
+          setComponentCode(newCode)
+        }
+      }
+    },
+    [selectedFile, registryDependencies, files, getComponentFilePath],
+  )
+
   // Merge styles from dependencies
   const mergeStyles = useCallback(
     async (styles: { tailwindConfig?: string; globalCss?: string }[]) => {
@@ -169,8 +251,8 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
         console.log("Found shadcn components:", data.shadcnComponentsImports)
 
         const slugs = data.shadcnComponentsImports.map(
-          (componentName: string) =>
-            `shadcn/${componentName.toLowerCase().replace(/\s+/g, "-")}`,
+          (component: { name: string }) =>
+            `shadcn/${component.name.toLowerCase().replace(/\s+/g, "-")}`,
         )
         console.log("Generated slugs for resolution:", slugs)
 
@@ -218,56 +300,12 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     }
   }
 
-  // Generate files for Sandpack
-  const files = useMemo(() => {
-    const componentPath = getComponentFilePath()
-    const generatedFiles = generateSandpackFiles({
-      componentPath,
-      componentCode,
-      processedData,
-      dependencies: {
-        ...(processedData?.npmDependencies?.reduce(
-          (acc: Record<string, string>, dep: string) => ({
-            ...acc,
-            [dep]: "latest",
-          }),
-          {},
-        ) || {}),
-        ...npmDependenciesOfRegistryDependencies,
-      },
-      customTailwindConfig: mergedTailwindConfig,
-      customGlobalCss: mergedGlobalCss,
-    })
-
-    console.log("Sandpack Files Generation:", {
-      baseFiles: Object.keys(generatedFiles),
-      registryDependencies: Object.keys(registryDependencies),
-      finalFiles: Object.keys({
-        ...registryDependencies,
-        ...generatedFiles,
-      }),
-    })
-
-    return {
-      ...registryDependencies,
-      ...generatedFiles,
-    }
-  }, [
-    componentCode,
-    processedData,
-    getComponentFilePath,
-    registryDependencies,
-    npmDependenciesOfRegistryDependencies,
-    mergedTailwindConfig,
-    mergedGlobalCss,
-  ])
-
   // Sandpack configuration
-  const sandpackConfig = useMemo(() => {
-    const config = {
+  const sandpackConfig = useMemo(
+    () => ({
       files,
       options: {
-        activeFile: getComponentFilePath(),
+        activeFile: selectedFile || getComponentFilePath(),
         visibleFiles: [
           getComponentFilePath(),
           "/components",
@@ -293,23 +331,17 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
           ...npmDependenciesOfRegistryDependencies,
         },
       },
-    }
-
-    console.log("Final Sandpack Config:", {
-      visibleFiles: config.options.visibleFiles,
-      allFiles: Object.keys(config.files),
-      dependencies: config.customSetup.dependencies,
-    })
-
-    return config
-  }, [
-    files,
-    getComponentFilePath,
-    isDarkTheme,
-    processedData?.npmDependencies,
-    registryDependencies,
-    npmDependenciesOfRegistryDependencies,
-  ])
+    }),
+    [
+      files,
+      getComponentFilePath,
+      selectedFile,
+      registryDependencies,
+      processedData?.npmDependencies,
+      npmDependenciesOfRegistryDependencies,
+      isDarkTheme,
+    ],
+  )
 
   return {
     open,
@@ -317,8 +349,12 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     processedData,
     isProcessing,
     isPublishing,
+    selectedCustomComponent,
+    selectedFile,
     handleOpenChange,
     handleProcessComponent,
+    handleCustomComponentClick,
+    handleFileClick,
     setComponentCode,
     sandpackConfig,
     getComponentFilePath,

From cf536107104661b4a91e39bef5be6d967350a181 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Fri, 4 Apr 2025 10:48:17 +0300
Subject: [PATCH 024/143] refactor

---
 .../studio/publish/custom-file-explorer.tsx   | 276 -----------------
 .../studio/publish/file-explorer-sandpack.tsx |  24 ++
 .../features/studio/publish/file-explorer.tsx | 286 ++++++++++++++++--
 .../publish/{ => hooks}/use-publish-dialog.ts | 126 ++++----
 .../studio/publish/publish-dialog.tsx         | 122 ++++----
 ...nt-view.tsx => unknown-component-view.tsx} |   0
 6 files changed, 419 insertions(+), 415 deletions(-)
 delete mode 100644 apps/web/components/features/studio/publish/custom-file-explorer.tsx
 create mode 100644 apps/web/components/features/studio/publish/file-explorer-sandpack.tsx
 rename apps/web/components/features/studio/publish/{ => hooks}/use-publish-dialog.ts (78%)
 rename apps/web/components/features/studio/publish/{custom-component-view.tsx => unknown-component-view.tsx} (100%)

diff --git a/apps/web/components/features/studio/publish/custom-file-explorer.tsx b/apps/web/components/features/studio/publish/custom-file-explorer.tsx
deleted file mode 100644
index 06c49129..00000000
--- a/apps/web/components/features/studio/publish/custom-file-explorer.tsx
+++ /dev/null
@@ -1,276 +0,0 @@
-import { useSandpack } from "@codesandbox/sandpack-react"
-import { cn } from "@/lib/utils"
-import {
-  ChevronRight,
-  ChevronDown,
-  Folder,
-  FolderOpen,
-  File,
-  FileWarning,
-} from "lucide-react"
-import { useState, useMemo, useCallback } from "react"
-
-interface FileTreeItem {
-  name: string
-  path: string
-  type: "file" | "directory"
-  children?: FileTreeItem[]
-  isUnknownComponent?: boolean
-}
-
-interface CustomFileExplorerProps {
-  nonShadcnComponents?: Array<{ name: string; path: string }>
-  onCustomComponentClick?: (componentName: string) => void
-  onFileSelect?: (path: string) => void
-  selectedFile?: string | null
-}
-
-function buildFileTree(
-  files: string[],
-  unknownComponents: Array<{ name: string; path: string }> = [],
-): {
-  tree: FileTreeItem[]
-  directories: Set<string>
-} {
-  const root: FileTreeItem[] = []
-  const directories = new Set<string>()
-
-  // Helper function to add item to tree
-  const addToTree = (
-    path: string,
-    isUnknownComponent = false,
-    componentName?: string,
-  ) => {
-    const parts = path.replace("@/", "").split("/").filter(Boolean)
-    let current = root
-    let currentPath = ""
-
-    parts.forEach((part, index) => {
-      currentPath += `/${part}`
-      const isLast = index === parts.length - 1
-      const displayName =
-        isLast && isUnknownComponent
-          ? `${componentName?.toLowerCase()}.tsx`
-          : part
-      const existingItem = current.find((item) => item.name === displayName)
-
-      if (!isLast) {
-        directories.add(currentPath)
-      }
-
-      if (existingItem) {
-        if (isLast) {
-          existingItem.type = "file"
-          existingItem.path = path
-          if (isUnknownComponent) {
-            existingItem.isUnknownComponent = true
-          }
-        }
-        current = existingItem.children || []
-      } else {
-        const newItem: FileTreeItem = {
-          name: displayName,
-          path: isLast ? path : currentPath,
-          type: isLast ? "file" : "directory",
-          children: isLast ? undefined : [],
-          isUnknownComponent: isLast ? isUnknownComponent : undefined,
-        }
-
-        // Insert item in sorted position
-        const insertIndex = current.findIndex((item) => {
-          if (item.type === newItem.type) {
-            return item.name.localeCompare(newItem.name) > 0
-          }
-          return item.type === "file"
-        })
-
-        if (insertIndex === -1) {
-          current.push(newItem)
-        } else {
-          current.splice(insertIndex, 0, newItem)
-        }
-
-        if (!isLast) {
-          current = newItem.children!
-        }
-      }
-    })
-  }
-
-  // Add standard files
-  files.forEach((path) => {
-    addToTree(path)
-  })
-
-  // Add unknown components to their respective directories
-  unknownComponents.forEach((comp) => {
-    addToTree(comp.path, true, comp.name)
-  })
-
-  // Helper function to sort children recursively
-  const sortTreeRecursively = (items: FileTreeItem[]) => {
-    items.sort((a, b) => {
-      if (a.type !== b.type) {
-        return a.type === "directory" ? -1 : 1
-      }
-      return a.name.localeCompare(b.name)
-    })
-
-    items.forEach((item) => {
-      if (item.children) {
-        sortTreeRecursively(item.children)
-      }
-    })
-  }
-
-  // Sort the entire tree
-  sortTreeRecursively(root)
-
-  return { tree: root, directories }
-}
-
-function FileTreeNode({
-  item,
-  level = 0,
-  activeFile,
-  onFileClick,
-  expandedDirs,
-  onToggleDir,
-  onCustomComponentClick,
-}: {
-  item: FileTreeItem
-  level?: number
-  activeFile: string
-  onFileClick: (path: string) => void
-  expandedDirs: Set<string>
-  onToggleDir: (path: string) => void
-  onCustomComponentClick?: (componentName: string) => void
-}) {
-  const isExpanded = expandedDirs.has(item.path)
-  const isActive = activeFile === item.path
-
-  return (
-    <div>
-      <button
-        className={cn(
-          "w-full text-left py-1.5 text-sm flex items-center gap-2 hover:bg-muted/50 transition-colors",
-          isActive && "bg-muted text-primary font-medium",
-          item.isUnknownComponent && isActive && "bg-yellow-500/10",
-        )}
-        style={{ paddingLeft: `${level * 12 + 16}px` }}
-        onClick={() => {
-          if (item.type === "directory") {
-            onToggleDir(item.path)
-          } else if (item.isUnknownComponent && onCustomComponentClick) {
-            onCustomComponentClick(item.name.replace(".tsx", ""))
-          } else {
-            onFileClick(item.path)
-          }
-        }}
-      >
-        {item.type === "directory" && (
-          <div className="w-4 h-4 flex items-center justify-center">
-            {isExpanded ? (
-              <ChevronDown className="h-3.5 w-3.5" />
-            ) : (
-              <ChevronRight className="h-3.5 w-3.5" />
-            )}
-          </div>
-        )}
-        {item.type === "directory" ? (
-          isExpanded ? (
-            <FolderOpen className="h-4 w-4 text-blue-500" />
-          ) : (
-            <Folder className="h-4 w-4 text-blue-500" />
-          )
-        ) : item.isUnknownComponent ? (
-          <FileWarning className="h-4 w-4 text-yellow-500" />
-        ) : (
-          <File className="h-4 w-4 text-gray-500" />
-        )}
-        <span
-          className={cn(
-            "truncate",
-            item.isUnknownComponent && "text-yellow-600",
-          )}
-        >
-          {item.name}
-        </span>
-      </button>
-
-      {item.type === "directory" && isExpanded && item.children && (
-        <div>
-          {item.children.map((child, index) => (
-            <FileTreeNode
-              key={child.path + index}
-              item={child}
-              level={level + 1}
-              activeFile={activeFile}
-              onFileClick={onFileClick}
-              expandedDirs={expandedDirs}
-              onToggleDir={onToggleDir}
-              onCustomComponentClick={onCustomComponentClick}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
-export function CustomFileExplorer({
-  nonShadcnComponents = [],
-  onCustomComponentClick,
-  onFileSelect,
-  selectedFile,
-}: CustomFileExplorerProps) {
-  const { sandpack } = useSandpack()
-  const { visibleFiles } = sandpack
-
-  const { tree: fileTree, directories } = useMemo(
-    () => buildFileTree(visibleFiles, nonShadcnComponents),
-    [visibleFiles, nonShadcnComponents],
-  )
-
-  const [expandedDirs, setExpandedDirs] = useState<Set<string>>(directories)
-
-  const handleToggleDir = (path: string) => {
-    setExpandedDirs((prev) => {
-      const next = new Set(prev)
-      if (next.has(path)) {
-        next.delete(path)
-      } else {
-        next.add(path)
-      }
-      return next
-    })
-  }
-
-  const handleFileClick = useCallback(
-    (path: string) => {
-      if (onFileSelect) {
-        onFileSelect(path)
-      }
-    },
-    [onFileSelect],
-  )
-
-  return (
-    <div className="w-[200px] overflow-auto border-r border-border">
-      <div className="p-2 text-sm font-medium text-muted-foreground">Files</div>
-      <div className="space-y-1">
-        {fileTree.map((item, index) => (
-          <FileTreeNode
-            key={item.path + index}
-            item={item}
-            activeFile={selectedFile || ""}
-            onFileClick={handleFileClick}
-            expandedDirs={expandedDirs}
-            onToggleDir={handleToggleDir}
-            onCustomComponentClick={onCustomComponentClick}
-          />
-        ))}
-      </div>
-    </div>
-  )
-}
diff --git a/apps/web/components/features/studio/publish/file-explorer-sandpack.tsx b/apps/web/components/features/studio/publish/file-explorer-sandpack.tsx
new file mode 100644
index 00000000..8653cdad
--- /dev/null
+++ b/apps/web/components/features/studio/publish/file-explorer-sandpack.tsx
@@ -0,0 +1,24 @@
+import { SandpackFileExplorer } from "@codesandbox/sandpack-react"
+
+export function FileExplorer() {
+  return (
+    <div className="w-64 border-r overflow-auto">
+      <div className="mt-4 px-4 text-[13px] font-medium text-muted-foreground">
+        Project Files
+      </div>
+      <SandpackFileExplorer
+        autoHiddenFiles={true}
+        initialCollapsedFolder={[
+          "/node_modules",
+          "/lib",
+          "/public",
+          "/.env",
+          "/index.html",
+          "/index.tsx",
+          "/tsconfig.json",
+          "/theme-provider.tsx",
+        ]}
+      />
+    </div>
+  )
+}
diff --git a/apps/web/components/features/studio/publish/file-explorer.tsx b/apps/web/components/features/studio/publish/file-explorer.tsx
index 8653cdad..b8fe2e94 100644
--- a/apps/web/components/features/studio/publish/file-explorer.tsx
+++ b/apps/web/components/features/studio/publish/file-explorer.tsx
@@ -1,24 +1,274 @@
-import { SandpackFileExplorer } from "@codesandbox/sandpack-react"
+import { useSandpack } from "@codesandbox/sandpack-react"
+import { cn } from "@/lib/utils"
+import {
+  ChevronRight,
+  ChevronDown,
+  Folder,
+  FolderOpen,
+  File,
+  FileWarning,
+} from "lucide-react"
+import { useState, useMemo, useCallback } from "react"
+
+interface FileTreeItem {
+  name: string
+  path: string
+  type: "file" | "directory"
+  children?: FileTreeItem[]
+  isUnknownComponent?: boolean
+}
+
+interface CustomFileExplorerProps {
+  nonShadcnComponents?: Array<{ name: string; path: string }>
+  onFileSelect?: (path: string) => void
+  selectedFile?: string | null
+}
+
+function buildFileTree(
+  files: string[],
+  unknownComponents: Array<{ name: string; path: string }> = [],
+): {
+  tree: FileTreeItem[]
+  directories: Set<string>
+} {
+  const root: FileTreeItem[] = []
+  const directories = new Set<string>()
+
+  // Helper function to add item to tree
+  const addToTree = (
+    path: string,
+    isUnknownComponent = false,
+    componentName?: string,
+  ) => {
+    const parts = path.replace("@/", "").split("/").filter(Boolean)
+    let current = root
+    let currentPath = ""
+
+    parts.forEach((part, index) => {
+      currentPath += `/${part}`
+      const isLast = index === parts.length - 1
+      const displayName =
+        isLast && isUnknownComponent
+          ? `${componentName?.toLowerCase()}.tsx`
+          : part
+      const existingItem = current.find((item) => item.name === displayName)
+
+      if (!isLast) {
+        directories.add(currentPath)
+      }
+
+      if (existingItem) {
+        if (isLast) {
+          existingItem.type = "file"
+          existingItem.path = path
+          if (isUnknownComponent) {
+            existingItem.isUnknownComponent = true
+          }
+        }
+        current = existingItem.children || []
+      } else {
+        const newItem: FileTreeItem = {
+          name: displayName,
+          path: isLast ? path : currentPath,
+          type: isLast ? "file" : "directory",
+          children: isLast ? undefined : [],
+          isUnknownComponent: isLast ? isUnknownComponent : undefined,
+        }
+
+        // Insert item in sorted position
+        const insertIndex = current.findIndex((item) => {
+          if (item.type === newItem.type) {
+            return item.name.localeCompare(newItem.name) > 0
+          }
+          return item.type === "file"
+        })
+
+        if (insertIndex === -1) {
+          current.push(newItem)
+        } else {
+          current.splice(insertIndex, 0, newItem)
+        }
+
+        if (!isLast) {
+          current = newItem.children!
+        }
+      }
+    })
+  }
+
+  // Add standard files
+  files.forEach((path) => {
+    addToTree(path)
+  })
+
+  // Add unknown components to their respective directories
+  unknownComponents.forEach((comp) => {
+    addToTree(comp.path, true, comp.name)
+  })
+
+  // Helper function to sort children recursively
+  const sortTreeRecursively = (items: FileTreeItem[]) => {
+    items.sort((a, b) => {
+      if (a.type !== b.type) {
+        return a.type === "directory" ? -1 : 1
+      }
+      return a.name.localeCompare(b.name)
+    })
+
+    items.forEach((item) => {
+      if (item.children) {
+        sortTreeRecursively(item.children)
+      }
+    })
+  }
+
+  // Sort the entire tree
+  sortTreeRecursively(root)
+
+  return { tree: root, directories }
+}
+
+function FileTreeNode({
+  item,
+  level = 0,
+  activeFile,
+  onFileClick,
+  expandedDirs,
+  onToggleDir,
+}: {
+  item: FileTreeItem
+  level?: number
+  activeFile: string
+  onFileClick: (path: string) => void
+  expandedDirs: Set<string>
+  onToggleDir: (path: string) => void
+}) {
+  const isExpanded = expandedDirs.has(item.path)
+  const isActive = activeFile === item.path
+
+  return (
+    <div>
+      <button
+        className={cn(
+          "w-full text-left py-1.5 text-sm flex items-center gap-2 hover:bg-muted/50 transition-colors",
+          isActive && "bg-muted text-primary font-medium",
+          item.isUnknownComponent && isActive && "bg-yellow-500/10",
+        )}
+        style={{ paddingLeft: `${level * 12 + 16}px` }}
+        onClick={() => {
+          if (item.type === "directory") {
+            onToggleDir(item.path)
+          } else {
+            // Unified handling for all file types
+            onFileClick(item.path)
+          }
+        }}
+      >
+        {item.type === "directory" && (
+          <div className="w-4 h-4 flex items-center justify-center">
+            {isExpanded ? (
+              <ChevronDown className="h-3.5 w-3.5" />
+            ) : (
+              <ChevronRight className="h-3.5 w-3.5" />
+            )}
+          </div>
+        )}
+        {item.type === "directory" ? (
+          isExpanded ? (
+            <FolderOpen className="h-4 w-4 text-blue-500" />
+          ) : (
+            <Folder className="h-4 w-4 text-blue-500" />
+          )
+        ) : item.isUnknownComponent ? (
+          <FileWarning className="h-4 w-4 text-yellow-500" />
+        ) : (
+          <File className="h-4 w-4 text-gray-500" />
+        )}
+        <span
+          className={cn(
+            "truncate",
+            item.isUnknownComponent && "text-yellow-600",
+          )}
+        >
+          {item.name}
+        </span>
+      </button>
+
+      {item.type === "directory" && isExpanded && item.children && (
+        <div>
+          {item.children.map((child, index) => (
+            <FileTreeNode
+              key={child.path + index}
+              item={child}
+              level={level + 1}
+              activeFile={activeFile}
+              onFileClick={onFileClick}
+              expandedDirs={expandedDirs}
+              onToggleDir={onToggleDir}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function CustomFileExplorer({
+  nonShadcnComponents = [],
+  onFileSelect,
+  selectedFile,
+}: CustomFileExplorerProps) {
+  const { sandpack } = useSandpack()
+  const { visibleFiles } = sandpack
+
+  const { tree: fileTree, directories } = useMemo(
+    () => buildFileTree(visibleFiles, nonShadcnComponents),
+    [visibleFiles, nonShadcnComponents],
+  )
+
+  const [expandedDirs, setExpandedDirs] = useState<Set<string>>(directories)
+
+  const handleToggleDir = (path: string) => {
+    setExpandedDirs((prev) => {
+      const next = new Set(prev)
+      if (next.has(path)) {
+        next.delete(path)
+      } else {
+        next.add(path)
+      }
+      return next
+    })
+  }
+
+  const handleFileClick = useCallback(
+    (path: string) => {
+      console.log("[FileExplorer] handleFileClick called with path:", path)
+      
+      if (onFileSelect) {
+        console.log("[FileExplorer] onFileSelect handler exists, calling with path")
+        onFileSelect(path)
+      } else {
+        console.log("[FileExplorer] onFileSelect handler not provided")
+      }
+    },
+    [onFileSelect],
+  )
 
-export function FileExplorer() {
   return (
-    <div className="w-64 border-r overflow-auto">
-      <div className="mt-4 px-4 text-[13px] font-medium text-muted-foreground">
-        Project Files
+    <div className="w-[200px] overflow-auto border-r border-border">
+      <div className="p-2 text-sm font-medium text-muted-foreground">Files</div>
+      <div className="space-y-1">
+        {fileTree.map((item, index) => (
+          <FileTreeNode
+            key={item.path + index}
+            item={item}
+            activeFile={selectedFile || ""}
+            onFileClick={handleFileClick}
+            expandedDirs={expandedDirs}
+            onToggleDir={handleToggleDir}
+          />
+        ))}
       </div>
-      <SandpackFileExplorer
-        autoHiddenFiles={true}
-        initialCollapsedFolder={[
-          "/node_modules",
-          "/lib",
-          "/public",
-          "/.env",
-          "/index.html",
-          "/index.tsx",
-          "/tsconfig.json",
-          "/theme-provider.tsx",
-        ]}
-      />
     </div>
   )
 }
diff --git a/apps/web/components/features/studio/publish/use-publish-dialog.ts b/apps/web/components/features/studio/publish/hooks/use-publish-dialog.ts
similarity index 78%
rename from apps/web/components/features/studio/publish/use-publish-dialog.ts
rename to apps/web/components/features/studio/publish/hooks/use-publish-dialog.ts
index 8cf0367e..31590e2d 100644
--- a/apps/web/components/features/studio/publish/use-publish-dialog.ts
+++ b/apps/web/components/features/studio/publish/hooks/use-publish-dialog.ts
@@ -1,11 +1,18 @@
 import { useState, useCallback, useMemo } from "react"
 import { toast } from "sonner"
 import { useTheme } from "next-themes"
-import { generateSandpackFiles } from "./sandpack-files"
+import { generateSandpackFiles } from "../sandpack-files"
 import { resolveRegistryDependencyTree } from "@/lib/queries.server"
 import { useClerkSupabaseClient } from "@/lib/clerk"
 import { defaultGlobalCss, defaultTailwindConfig } from "@/lib/sandpack"
 
+// Define a type for the active preview
+type ActivePreview = {
+  type: "regular" | "unknown" // "regular" for normal files, "unknown" for custom components
+  filePath: string // The file path (always set)
+  componentName?: string // Only set for unknown components
+}
+
 interface UsePublishDialogProps {
   userId: string
 }
@@ -17,10 +24,10 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
   const [processedData, setProcessedData] = useState<any>(null)
   const [isProcessing, setIsProcessing] = useState(false)
   const [isPublishing, setIsPublishing] = useState(false)
-  const [selectedFile, setSelectedFile] = useState<string | null>(null)
-  const [selectedCustomComponent, setSelectedCustomComponent] = useState<
-    string | null
-  >(null)
+
+  // Unified active preview state
+  const [activePreview, setActivePreview] = useState<ActivePreview | null>(null)
+
   const [registryDependencies, setRegistryDependencies] = useState<
     Record<string, { code: string; registry: string }>
   >({})
@@ -53,8 +60,7 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     setProcessedData(null)
     setIsProcessing(false)
     setIsPublishing(false)
-    setSelectedCustomComponent(null)
-    setSelectedFile(null)
+    setActivePreview(null)
     setRegistryDependencies({})
     setNpmDependenciesOfRegistryDependencies({})
     setMergedTailwindConfig(null)
@@ -70,10 +76,29 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     [resetState],
   )
 
-  // Handle custom component selection
-  const handleCustomComponentClick = useCallback((componentName: string) => {
-    setSelectedCustomComponent(componentName)
-  }, [])
+  // Unified handler for preview selection (both files and custom components)
+  const handlePreviewSelect = useCallback(
+    (newPreview: ActivePreview) => {
+      setActivePreview(newPreview)
+
+      // Update component code if needed
+      if (
+        newPreview.type === "regular" &&
+        newPreview.filePath !== getComponentFilePath()
+      ) {
+        const fileContent = files[newPreview.filePath]
+        if (fileContent) {
+          const newCode =
+            typeof fileContent === "string" ? fileContent : fileContent.code
+
+          if (newCode) {
+            setComponentCode(newCode)
+          }
+        }
+      }
+    },
+    [getComponentFilePath],
+  )
 
   // Generate files for Sandpack
   const files = useMemo(() => {
@@ -111,41 +136,6 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     mergedGlobalCss,
   ])
 
-  // Handle file selection
-  const handleFileClick = useCallback(
-    (path: string) => {
-      if (path === selectedFile) return // Prevent unnecessary updates if clicking the same file
-
-      setSelectedFile(path)
-
-      // Only reset custom component if we're not clicking a custom component file
-      const isCustomComponent = Object.values(registryDependencies).some(
-        (dep) => dep.registry && path === dep.registry,
-      )
-
-      if (!isCustomComponent) {
-        setSelectedCustomComponent(null)
-      }
-
-      // Only update component code if necessary
-      if (path === getComponentFilePath()) {
-        return // Don't update code when clicking main component file
-      }
-
-      // For other files, get the code from Sandpack files
-      const fileContent = files[path]
-      if (fileContent) {
-        const newCode =
-          typeof fileContent === "string" ? fileContent : fileContent.code
-
-        if (newCode) {
-          setComponentCode(newCode)
-        }
-      }
-    },
-    [selectedFile, registryDependencies, files, getComponentFilePath],
-  )
-
   // Merge styles from dependencies
   const mergeStyles = useCallback(
     async (styles: { tailwindConfig?: string; globalCss?: string }[]) => {
@@ -236,25 +226,14 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
       }
 
       const data = await response.json()
-      console.log("Preprocessing Response:", {
-        componentName: data.componentName,
-        registryType: data.registryType,
-        shadcnComponents: data.shadcnComponentsImports,
-        npmDeps: data.npmDependencies,
-        fullResponse: data,
-      })
-
       setProcessedData(data)
 
       // If we have shadcn component dependencies, resolve them
       if (data.shadcnComponentsImports?.length > 0) {
-        console.log("Found shadcn components:", data.shadcnComponentsImports)
-
         const slugs = data.shadcnComponentsImports.map(
           (component: { name: string }) =>
             `shadcn/${component.name.toLowerCase().replace(/\s+/g, "-")}`,
         )
-        console.log("Generated slugs for resolution:", slugs)
 
         const result = await resolveRegistryDependencyTree({
           supabase,
@@ -269,13 +248,6 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
           )
         }
 
-        console.log("Registry Dependencies Resolution:", {
-          filesReceived: Object.keys(result.data.filesWithRegistry),
-          npmDepsReceived: result.data.npmDependencies,
-          stylesReceived: result.data.styles,
-          fullResponse: result.data,
-        })
-
         setRegistryDependencies(result.data.filesWithRegistry)
         setNpmDependenciesOfRegistryDependencies(result.data.npmDependencies)
 
@@ -300,12 +272,27 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     }
   }
 
+  // Helper to check if a file is an unknown component
+  const isUnknownComponent = useCallback(
+    (path: string) => {
+      return (
+        processedData?.nonShadcnComponentsImports?.some(
+          (comp: { path: string }) => comp.path === path,
+        ) ?? false
+      )
+    },
+    [processedData],
+  )
+
   // Sandpack configuration
   const sandpackConfig = useMemo(
     () => ({
       files,
       options: {
-        activeFile: selectedFile || getComponentFilePath(),
+        activeFile:
+          activePreview?.type === "regular"
+            ? activePreview.filePath
+            : getComponentFilePath(),
         visibleFiles: [
           getComponentFilePath(),
           "/components",
@@ -335,7 +322,7 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     [
       files,
       getComponentFilePath,
-      selectedFile,
+      activePreview,
       registryDependencies,
       processedData?.npmDependencies,
       npmDependenciesOfRegistryDependencies,
@@ -349,14 +336,13 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     processedData,
     isProcessing,
     isPublishing,
-    selectedCustomComponent,
-    selectedFile,
+    activePreview,
     handleOpenChange,
     handleProcessComponent,
-    handleCustomComponentClick,
-    handleFileClick,
+    handlePreviewSelect,
     setComponentCode,
     sandpackConfig,
     getComponentFilePath,
+    isUnknownComponent,
   }
 }
diff --git a/apps/web/components/features/studio/publish/publish-dialog.tsx b/apps/web/components/features/studio/publish/publish-dialog.tsx
index 95f93bdc..9cf5158f 100644
--- a/apps/web/components/features/studio/publish/publish-dialog.tsx
+++ b/apps/web/components/features/studio/publish/publish-dialog.tsx
@@ -17,10 +17,10 @@ import {
 } from "@codesandbox/sandpack-react"
 
 import { CodeEditor } from "./code-editor"
-import { FileExplorer } from "./file-explorer"
-import { CustomFileExplorer } from "./custom-file-explorer"
-import { CustomComponentView } from "./custom-component-view"
-import { usePublishDialog } from "./use-publish-dialog"
+import { FileExplorer } from "./file-explorer-sandpack"
+import { CustomFileExplorer } from "./file-explorer"
+import { CustomComponentView } from "./unknown-component-view"
+import { usePublishDialog } from "./hooks/use-publish-dialog"
 import React from "react"
 
 interface PublishDialogProps {
@@ -33,15 +33,14 @@ export function PublishDialog({ userId }: PublishDialogProps) {
     componentCode,
     processedData,
     isProcessing,
-    selectedCustomComponent,
-    selectedFile,
+    activePreview,
     handleOpenChange,
     handleProcessComponent,
-    handleCustomComponentClick,
-    handleFileClick,
+    handlePreviewSelect,
     setComponentCode,
     sandpackConfig,
     getComponentFilePath,
+    isUnknownComponent,
   } = usePublishDialog({ userId })
 
   return (
@@ -88,13 +87,12 @@ export function PublishDialog({ userId }: PublishDialogProps) {
           <div className="h-full min-h-[400px] overflow-hidden flex-grow">
             <SandpackProvider {...sandpackConfig}>
               <SandpackContent
-                selectedCustomComponent={selectedCustomComponent}
-                selectedFile={selectedFile}
-                onFileSelect={handleFileClick}
-                onCustomComponentClick={handleCustomComponentClick}
+                activePreview={activePreview}
+                onPreviewSelect={handlePreviewSelect}
                 nonShadcnComponents={processedData?.nonShadcnComponentsImports}
                 getComponentFilePath={getComponentFilePath}
                 setComponentCode={setComponentCode}
+                isUnknownComponent={isUnknownComponent}
               />
             </SandpackProvider>
           </div>
@@ -105,73 +103,94 @@ export function PublishDialog({ userId }: PublishDialogProps) {
 }
 
 interface SandpackContentProps {
-  selectedCustomComponent: string | null
-  selectedFile: string | null
-  onFileSelect: (path: string) => void
-  onCustomComponentClick: (name: string) => void
+  activePreview: {
+    type: "regular" | "unknown"
+    filePath: string
+    componentName?: string
+  } | null
+  onPreviewSelect: (preview: {
+    type: "regular" | "unknown"
+    filePath: string
+    componentName?: string
+  }) => void
   nonShadcnComponents?: Array<{ name: string; path: string }>
   getComponentFilePath: () => string
   setComponentCode: (code: string) => void
+  isUnknownComponent: (path: string) => boolean
 }
 
 function SandpackContent({
-  selectedCustomComponent,
-  selectedFile,
-  onFileSelect,
-  onCustomComponentClick,
+  activePreview,
+  onPreviewSelect,
   nonShadcnComponents,
   getComponentFilePath,
   setComponentCode,
+  isUnknownComponent,
 }: SandpackContentProps) {
   const { sandpack } = useSandpack()
   const componentPath = getComponentFilePath()
-
   // Set initial file only once when component mounts
   React.useEffect(() => {
-    if (!selectedFile && !selectedCustomComponent) {
+    if (!activePreview) {
+      console.log("[PublishDialog] Setting initial file:", componentPath)
       sandpack.setActiveFile(componentPath)
-      onFileSelect(componentPath)
+      onPreviewSelect({
+        type: "regular",
+        filePath: componentPath,
+      })
     }
-  }, [
-    componentPath,
-    onFileSelect,
-    sandpack,
-    selectedFile,
-    selectedCustomComponent,
-  ])
+  }, [componentPath, onPreviewSelect, sandpack, activePreview])
 
   const handleFileSelect = (path: string) => {
-    // Check if this is an unknown component
-    const isUnknownComponent = nonShadcnComponents?.some(
-      (comp) => comp.path === path,
-    )
+    console.log("[PublishDialog] File selected:", path)
+    
+    // If the file is already selected, don't do anything
+    if (activePreview?.filePath === path) {
+      console.log("[PublishDialog] File already selected, skipping")
+      return
+    }
 
-    if (isUnknownComponent) {
-      // For unknown components, don't change the editor file
+    // Check if this is an unknown component
+    if (isUnknownComponent(path)) {
+      console.log("[PublishDialog] Handling unknown component selection")
+      // For unknown components, get the component name
       const componentName = nonShadcnComponents?.find(
         (comp) => comp.path === path,
       )?.name
+
       if (componentName) {
-        onCustomComponentClick(componentName)
-        onFileSelect(path) // Update selectedFile to highlight in tree
+        console.log("[PublishDialog] Setting unknown component preview:", componentName)
+        // Set as unknown component type preview
+        onPreviewSelect({
+          type: "unknown",
+          filePath: path,
+          componentName,
+        })
       }
     } else {
-      // For regular files, update both the editor and selection
-      onFileSelect(path)
+      console.log("[PublishDialog] Setting regular file preview:", path)
+      // Set as regular file type preview
+      onPreviewSelect({
+        type: "regular",
+        filePath: path,
+      })
+
+      // Update the Sandpack editor file
       sandpack.setActiveFile(path)
     }
   }
 
-  // Keep editor file in sync with selection for non-custom components
+  // Keep editor file in sync with selection for regular files
   React.useEffect(() => {
     if (
-      !selectedCustomComponent &&
-      selectedFile &&
-      sandpack.activeFile !== selectedFile
+      activePreview?.type === "regular" &&
+      activePreview.filePath &&
+      sandpack.activeFile !== activePreview.filePath
     ) {
-      sandpack.setActiveFile(selectedFile)
+      console.log("[PublishDialog] Syncing editor file:", activePreview.filePath)
+      sandpack.setActiveFile(activePreview.filePath)
     }
-  }, [selectedFile, selectedCustomComponent, sandpack.activeFile])
+  }, [activePreview, sandpack.activeFile])
 
   return (
     <>
@@ -184,17 +203,18 @@ function SandpackContent({
             <FileExplorer />
             <CustomFileExplorer
               nonShadcnComponents={nonShadcnComponents}
-              onCustomComponentClick={onCustomComponentClick}
               onFileSelect={handleFileSelect}
-              selectedFile={selectedFile}
+              selectedFile={activePreview?.filePath || null}
             />
           </div>
           <div className="flex-1">
-            {selectedCustomComponent ? (
-              <CustomComponentView componentName={selectedCustomComponent} />
+            {activePreview?.type === "unknown" ? (
+              <CustomComponentView
+                componentName={activePreview.componentName || ""}
+              />
             ) : (
               <CodeEditor
-                componentPath={selectedFile || componentPath}
+                componentPath={activePreview?.filePath || componentPath}
                 onCodeChange={setComponentCode}
               />
             )}
diff --git a/apps/web/components/features/studio/publish/custom-component-view.tsx b/apps/web/components/features/studio/publish/unknown-component-view.tsx
similarity index 100%
rename from apps/web/components/features/studio/publish/custom-component-view.tsx
rename to apps/web/components/features/studio/publish/unknown-component-view.tsx

From 33cc90247fd656ee6e7d0b7ce32c1fb338c39b8a Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Fri, 4 Apr 2025 11:17:53 +0300
Subject: [PATCH 025/143] debuh

---
 .../features/studio/publish/code-editor.tsx   |  58 ++++++
 .../publish/hooks/use-publish-dialog.ts       | 194 ++++++++++++++----
 .../studio/publish/publish-dialog.tsx         |  75 ++++++-
 3 files changed, 278 insertions(+), 49 deletions(-)

diff --git a/apps/web/components/features/studio/publish/code-editor.tsx b/apps/web/components/features/studio/publish/code-editor.tsx
index 17a3074b..9fef00ae 100644
--- a/apps/web/components/features/studio/publish/code-editor.tsx
+++ b/apps/web/components/features/studio/publish/code-editor.tsx
@@ -14,12 +14,70 @@ export function CodeEditor({ onCodeChange, componentPath }: CodeEditorProps) {
   const { code } = useActiveCode()
   const { sandpack } = useSandpack()
 
+  // Log detailed Sandpack state on every render
+  console.log("[CodeEditor] Current full state:", {
+    sandpackState: {
+      activeFile: sandpack.activeFile,
+      visibleFiles: sandpack.visibleFiles,
+      files: Object.keys(sandpack.files),
+      currentCode: code?.slice(0, 100) + "...", // First 100 chars for debugging
+    },
+    props: {
+      componentPath,
+      hasCode: Boolean(code),
+      codeLength: code?.length,
+    },
+    stackTrace: new Error().stack,
+  })
+
+  // Log when the component renders with new props
+  useEffect(() => {
+    console.log("[CodeEditor] Rendered with:", {
+      componentPath,
+      activeFile: sandpack.activeFile,
+      hasCode: Boolean(code),
+      currentCodePreview: code?.slice(0, 50) + "...", // Show start of the code
+      allFiles: Object.keys(sandpack.files),
+      fileContent:
+        sandpack.files[sandpack.activeFile]?.code?.slice(0, 50) + "...",
+    })
+  }, [componentPath, sandpack.activeFile, code, sandpack.files])
+
   useEffect(() => {
     if (code && sandpack.activeFile === componentPath) {
+      console.log("[CodeEditor] Updating code for:", {
+        file: componentPath,
+        codeLength: code.length,
+        activeFile: sandpack.activeFile,
+        codePreview: code.slice(0, 50) + "...",
+        stackTrace: new Error().stack,
+      })
       onCodeChange(code)
+    } else {
+      console.log("[CodeEditor] Skipped code update because:", {
+        hasCode: Boolean(code),
+        activeFile: sandpack.activeFile,
+        expectedPath: componentPath,
+        matches: sandpack.activeFile === componentPath,
+        codePreview: code?.slice(0, 50) + "...",
+      })
     }
   }, [code, onCodeChange, sandpack.activeFile, componentPath])
 
+  // Log when active file changes in Sandpack
+  useEffect(() => {
+    console.log("[CodeEditor] Sandpack active file changed:", {
+      from: sandpack.activeFile,
+      expectedPath: componentPath,
+      matches: sandpack.activeFile === componentPath,
+      currentCode: code?.slice(0, 50) + "...",
+      fileContent:
+        sandpack.files[sandpack.activeFile]?.code?.slice(0, 50) + "...",
+      allFiles: Object.keys(sandpack.files),
+      stackTrace: new Error().stack,
+    })
+  }, [sandpack.activeFile, componentPath, code, sandpack.files])
+
   return (
     <SandpackCodeEditor
       showTabs={false}
diff --git a/apps/web/components/features/studio/publish/hooks/use-publish-dialog.ts b/apps/web/components/features/studio/publish/hooks/use-publish-dialog.ts
index 31590e2d..b87fa4e2 100644
--- a/apps/web/components/features/studio/publish/hooks/use-publish-dialog.ts
+++ b/apps/web/components/features/studio/publish/hooks/use-publish-dialog.ts
@@ -5,6 +5,7 @@ import { generateSandpackFiles } from "../sandpack-files"
 import { resolveRegistryDependencyTree } from "@/lib/queries.server"
 import { useClerkSupabaseClient } from "@/lib/clerk"
 import { defaultGlobalCss, defaultTailwindConfig } from "@/lib/sandpack"
+import type { SandpackFiles } from "@codesandbox/sandpack-react"
 
 // Define a type for the active preview
 type ActivePreview = {
@@ -17,6 +18,15 @@ interface UsePublishDialogProps {
   userId: string
 }
 
+// Define a type for registry dependencies
+interface RegistryDependency {
+  code: string
+  registry: string
+}
+
+// Define a type for file content
+type FileContent = string | { code: string }
+
 export function usePublishDialog({ userId }: UsePublishDialogProps) {
   // Dialog state
   const [open, setOpen] = useState(false)
@@ -76,33 +86,32 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     [resetState],
   )
 
-  // Unified handler for preview selection (both files and custom components)
-  const handlePreviewSelect = useCallback(
-    (newPreview: ActivePreview) => {
-      setActivePreview(newPreview)
+  // Generate files for Sandpack
+  const files = useMemo(() => {
+    const componentPath = getComponentFilePath()
+    console.log("[PublishDialog] Generating Sandpack files:", {
+      componentPath,
+      processedData: {
+        registryType: processedData?.registryType,
+        slug: processedData?.slug,
+        componentName: processedData?.componentName,
+      },
+      hasComponentCode: Boolean(componentCode),
+      registryDependenciesFiles: Object.keys(registryDependencies),
+      activePreviewPath: activePreview?.filePath,
+    })
 
-      // Update component code if needed
-      if (
-        newPreview.type === "regular" &&
-        newPreview.filePath !== getComponentFilePath()
-      ) {
-        const fileContent = files[newPreview.filePath]
-        if (fileContent) {
-          const newCode =
-            typeof fileContent === "string" ? fileContent : fileContent.code
+    // Start with a fresh copy of all files
+    const allFiles: SandpackFiles = {}
 
-          if (newCode) {
-            setComponentCode(newCode)
-          }
-        }
+    // Add registry dependencies first
+    Object.entries(registryDependencies).forEach(([path, content]) => {
+      allFiles[path] = {
+        code: typeof content === "string" ? content : content.code,
       }
-    },
-    [getComponentFilePath],
-  )
+    })
 
-  // Generate files for Sandpack
-  const files = useMemo(() => {
-    const componentPath = getComponentFilePath()
+    // Generate base files
     const generatedFiles = generateSandpackFiles({
       componentPath,
       componentCode,
@@ -121,11 +130,59 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
       customGlobalCss: mergedGlobalCss,
     })
 
-    // Merge registry dependencies with generated files
-    return {
-      ...registryDependencies,
-      ...generatedFiles,
+    // Add all generated files
+    Object.entries(generatedFiles).forEach(([path, content]) => {
+      // Skip component.tsx if we have a processed slug
+      if (processedData?.slug && path === "/components/ui/component.tsx") {
+        return
+      }
+      allFiles[path] = content
+    })
+
+    // If we have a processed slug, ensure the component is at the correct path
+    if (processedData?.slug && generatedFiles["/components/ui/component.tsx"]) {
+      allFiles[componentPath] = generatedFiles["/components/ui/component.tsx"]
+      const content = allFiles[componentPath] as string | { code: string }
+      console.log("[PublishDialog] Component file placement:", {
+        path: componentPath,
+        content:
+          typeof content === "string"
+            ? content.slice(0, 100)
+            : content.code.slice(0, 100),
+      })
     }
+
+    // Log the content of key files for debugging
+    const debugPaths = [
+      "/components/blocks/hero-section.tsx",
+      "/components/ui/button.tsx",
+      "/components/ui/badge.tsx",
+      "/components/ui/component.tsx",
+    ]
+
+    console.log("[PublishDialog] File contents check:", {
+      activePreview: activePreview?.filePath,
+      componentPath,
+      fileContents: debugPaths.reduce(
+        (acc, path) => ({
+          ...acc,
+          [path]: (() => {
+            const content = allFiles[path]
+            if (!content) return "not found"
+            return (
+              (typeof content === "string" ? content : content.code).slice(
+                0,
+                50,
+              ) + "..."
+            )
+          })(),
+        }),
+        {},
+      ),
+      allFiles: Object.keys(allFiles),
+    })
+
+    return allFiles
   }, [
     getComponentFilePath,
     componentCode,
@@ -134,8 +191,59 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     registryDependencies,
     mergedTailwindConfig,
     mergedGlobalCss,
+    activePreview?.filePath,
   ])
 
+  // Unified handler for preview selection (both files and custom components)
+  const handlePreviewSelect = useCallback(
+    (newPreview: ActivePreview) => {
+      console.log("[PublishDialog] handlePreviewSelect called with:", {
+        newPreview,
+        currentFiles: Object.keys(files),
+      })
+
+      setActivePreview(newPreview)
+
+      // Always update component code for regular files
+      if (newPreview.type === "regular") {
+        const fileContent = files[newPreview.filePath]
+        console.log(
+          "[PublishDialog] Updating component code with file content:",
+          {
+            path: newPreview.filePath,
+            fileContent,
+            allFiles: Object.keys(files).map((path) => ({
+              path,
+              preview: (() => {
+                const content = files[path]
+                return (
+                  (typeof content === "string" ? content : content.code).slice(
+                    0,
+                    50,
+                  ) + "..."
+                )
+              })(),
+            })),
+          },
+        )
+
+        if (fileContent) {
+          const newCode =
+            typeof fileContent === "string" ? fileContent : fileContent.code
+
+          if (newCode) {
+            setComponentCode(newCode)
+            console.log("[PublishDialog] Updated component code:", {
+              path: newPreview.filePath,
+              codePreview: newCode.slice(0, 100),
+            })
+          }
+        }
+      }
+    },
+    [files],
+  )
+
   // Merge styles from dependencies
   const mergeStyles = useCallback(
     async (styles: { tailwindConfig?: string; globalCss?: string }[]) => {
@@ -285,8 +393,15 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
   )
 
   // Sandpack configuration
-  const sandpackConfig = useMemo(
-    () => ({
+  const sandpackConfig = useMemo(() => {
+    console.log("[PublishDialog] Creating Sandpack config:", {
+      activePreview,
+      componentPath: getComponentFilePath(),
+      availableFiles: Object.keys(files),
+      registryDependencies: Object.keys(registryDependencies),
+    })
+
+    return {
       files,
       options: {
         activeFile:
@@ -318,17 +433,16 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
           ...npmDependenciesOfRegistryDependencies,
         },
       },
-    }),
-    [
-      files,
-      getComponentFilePath,
-      activePreview,
-      registryDependencies,
-      processedData?.npmDependencies,
-      npmDependenciesOfRegistryDependencies,
-      isDarkTheme,
-    ],
-  )
+    }
+  }, [
+    files,
+    getComponentFilePath,
+    activePreview,
+    registryDependencies,
+    processedData?.npmDependencies,
+    npmDependenciesOfRegistryDependencies,
+    isDarkTheme,
+  ])
 
   return {
     open,
diff --git a/apps/web/components/features/studio/publish/publish-dialog.tsx b/apps/web/components/features/studio/publish/publish-dialog.tsx
index 9cf5158f..dfb45373 100644
--- a/apps/web/components/features/studio/publish/publish-dialog.tsx
+++ b/apps/web/components/features/studio/publish/publish-dialog.tsx
@@ -129,10 +129,27 @@ function SandpackContent({
 }: SandpackContentProps) {
   const { sandpack } = useSandpack()
   const componentPath = getComponentFilePath()
+
+  // Log Sandpack state changes
+  React.useEffect(() => {
+    console.log("[PublishDialog] Current Sandpack state:", {
+      activeFile: sandpack.activeFile,
+      files: Object.keys(sandpack.files),
+      visibleFiles: sandpack.visibleFiles,
+      currentFileContent:
+        sandpack.files[sandpack.activeFile]?.code?.slice(0, 50) + "...",
+      stackTrace: new Error().stack,
+    })
+  }, [sandpack.activeFile, sandpack.files, sandpack.visibleFiles])
+
   // Set initial file only once when component mounts
   React.useEffect(() => {
     if (!activePreview) {
-      console.log("[PublishDialog] Setting initial file:", componentPath)
+      console.log("[PublishDialog] Setting initial file:", {
+        componentPath,
+        currentSandpackFile: sandpack.activeFile,
+        stackTrace: new Error().stack,
+      })
       sandpack.setActiveFile(componentPath)
       onPreviewSelect({
         type: "regular",
@@ -143,23 +160,44 @@ function SandpackContent({
 
   const handleFileSelect = (path: string) => {
     console.log("[PublishDialog] File selected:", path)
-    
+    console.log("[PublishDialog] Current editor state:", {
+      activeFile: sandpack.activeFile,
+      selectedPath: path,
+      activePreview: activePreview,
+      fileContent: sandpack.files[path]?.code?.slice(0, 50) + "...",
+      currentFileContent:
+        sandpack.files[sandpack.activeFile]?.code?.slice(0, 50) + "...",
+      stackTrace: new Error().stack,
+    })
+
     // If the file is already selected, don't do anything
     if (activePreview?.filePath === path) {
-      console.log("[PublishDialog] File already selected, skipping")
+      console.log("[PublishDialog] File already selected, skipping", {
+        path,
+        activePreview,
+        sandpackFile: sandpack.activeFile,
+      })
       return
     }
 
     // Check if this is an unknown component
     if (isUnknownComponent(path)) {
-      console.log("[PublishDialog] Handling unknown component selection")
+      console.log("[PublishDialog] Handling unknown component selection:", {
+        path,
+        currentSandpackFile: sandpack.activeFile,
+        stackTrace: new Error().stack,
+      })
       // For unknown components, get the component name
       const componentName = nonShadcnComponents?.find(
         (comp) => comp.path === path,
       )?.name
 
       if (componentName) {
-        console.log("[PublishDialog] Setting unknown component preview:", componentName)
+        console.log("[PublishDialog] Setting unknown component preview:", {
+          componentName,
+          path,
+          currentSandpackFile: sandpack.activeFile,
+        })
         // Set as unknown component type preview
         onPreviewSelect({
           type: "unknown",
@@ -168,7 +206,11 @@ function SandpackContent({
         })
       }
     } else {
-      console.log("[PublishDialog] Setting regular file preview:", path)
+      console.log("[PublishDialog] Setting regular file preview:", {
+        path,
+        currentSandpackFile: sandpack.activeFile,
+        fileContent: sandpack.files[path]?.code?.slice(0, 50) + "...",
+      })
       // Set as regular file type preview
       onPreviewSelect({
         type: "regular",
@@ -176,6 +218,12 @@ function SandpackContent({
       })
 
       // Update the Sandpack editor file
+      console.log("[PublishDialog] Updating Sandpack editor file to:", {
+        from: sandpack.activeFile,
+        to: path,
+        hasFileContent: Boolean(sandpack.files[path]?.code),
+        stackTrace: new Error().stack,
+      })
       sandpack.setActiveFile(path)
     }
   }
@@ -187,10 +235,19 @@ function SandpackContent({
       activePreview.filePath &&
       sandpack.activeFile !== activePreview.filePath
     ) {
-      console.log("[PublishDialog] Syncing editor file:", activePreview.filePath)
+      console.log("[PublishDialog] Syncing editor file:", {
+        from: sandpack.activeFile,
+        to: activePreview.filePath,
+        activePreviewType: activePreview.type,
+        fileContent:
+          sandpack.files[activePreview.filePath]?.code?.slice(0, 50) + "...",
+        currentFileContent:
+          sandpack.files[sandpack.activeFile]?.code?.slice(0, 50) + "...",
+        stackTrace: new Error().stack,
+      })
       sandpack.setActiveFile(activePreview.filePath)
     }
-  }, [activePreview, sandpack.activeFile])
+  }, [activePreview, sandpack.activeFile, sandpack.files])
 
   return (
     <>
@@ -200,7 +257,7 @@ function SandpackContent({
       <SandpackLayout style={{ height: "100%" }}>
         <div className="flex w-full h-full">
           <div className="flex border-r border-border">
-            <FileExplorer />
+            {/* <FileExplorer /> */}
             <CustomFileExplorer
               nonShadcnComponents={nonShadcnComponents}
               onFileSelect={handleFileSelect}

From b4d0dc72184a2ba812430f3b74b9c986f298b4e7 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Fri, 4 Apr 2025 15:13:49 +0300
Subject: [PATCH 026/143] refactor

---
 .../web/app/studio/[username]/page.client.tsx |  10 +-
 .../code-editor.tsx                           |   0
 .../editor-dialog.tsx}                        |  28 ++---
 .../file-explorer-sandpack.tsx                |   0
 .../file-explorer.tsx                         |   0
 .../hooks/use-editor-dialog.ts}               |   0
 .../features/studio/component-editor/index.ts |   3 +
 .../sandpack-files.ts                         |   0
 .../unknown-component-view.tsx                |   0
 apps/web/components/features/studio/index.ts  |   9 ++
 .../features/studio/layout/studio-layout.tsx  |  26 ++++
 .../studio/layout/studio-navigation.tsx       | 119 ++++++++++++++++++
 .../features/studio/publish/index.ts          |   4 +
 13 files changed, 180 insertions(+), 19 deletions(-)
 rename apps/web/components/features/studio/{publish => component-editor}/code-editor.tsx (100%)
 rename apps/web/components/features/studio/{publish/publish-dialog.tsx => component-editor/editor-dialog.tsx} (89%)
 rename apps/web/components/features/studio/{publish => component-editor}/file-explorer-sandpack.tsx (100%)
 rename apps/web/components/features/studio/{publish => component-editor}/file-explorer.tsx (100%)
 rename apps/web/components/features/studio/{publish/hooks/use-publish-dialog.ts => component-editor/hooks/use-editor-dialog.ts} (100%)
 create mode 100644 apps/web/components/features/studio/component-editor/index.ts
 rename apps/web/components/features/studio/{publish => component-editor}/sandpack-files.ts (100%)
 rename apps/web/components/features/studio/{publish => component-editor}/unknown-component-view.tsx (100%)
 create mode 100644 apps/web/components/features/studio/index.ts
 create mode 100644 apps/web/components/features/studio/layout/studio-layout.tsx
 create mode 100644 apps/web/components/features/studio/layout/studio-navigation.tsx
 create mode 100644 apps/web/components/features/studio/publish/index.ts

diff --git a/apps/web/app/studio/[username]/page.client.tsx b/apps/web/app/studio/[username]/page.client.tsx
index e3115494..788cda69 100644
--- a/apps/web/app/studio/[username]/page.client.tsx
+++ b/apps/web/app/studio/[username]/page.client.tsx
@@ -1,9 +1,9 @@
 "use client"
 
 import { User, DemoWithComponent } from "@/types/global"
-import { StudioLayout } from "@/components/features/studio/studio-layout"
-import { ComponentsTable } from "@/components/features/studio/components-table"
-import { PublishDialog } from "@/components/features/studio/publish/publish-dialog"
+import { StudioLayout } from "@/components/features/studio/layout/studio-layout"
+import { DemosTable } from "@/components/features/studio/components-table"
+import { EditorDialog} from "@/components/features/studio/component-editor"
 import Link from "next/link"
 import { ArrowLeft } from "lucide-react"
 
@@ -34,10 +34,10 @@ export function StudioUsernameClient({
             <h1 className="text-xl font-bold">Components</h1>
           </div>
 
-          {(isOwnProfile || isAdmin) && <PublishDialog userId={user.id} />}
+          {(isOwnProfile || isAdmin) && <EditorDialog userId={user.id} />}
         </div>
 
-        <ComponentsTable demos={demos} />
+        <DemosTable demos={demos} />
       </div>
     </StudioLayout>
   )
diff --git a/apps/web/components/features/studio/publish/code-editor.tsx b/apps/web/components/features/studio/component-editor/code-editor.tsx
similarity index 100%
rename from apps/web/components/features/studio/publish/code-editor.tsx
rename to apps/web/components/features/studio/component-editor/code-editor.tsx
diff --git a/apps/web/components/features/studio/publish/publish-dialog.tsx b/apps/web/components/features/studio/component-editor/editor-dialog.tsx
similarity index 89%
rename from apps/web/components/features/studio/publish/publish-dialog.tsx
rename to apps/web/components/features/studio/component-editor/editor-dialog.tsx
index dfb45373..9047aaca 100644
--- a/apps/web/components/features/studio/publish/publish-dialog.tsx
+++ b/apps/web/components/features/studio/component-editor/editor-dialog.tsx
@@ -20,14 +20,14 @@ import { CodeEditor } from "./code-editor"
 import { FileExplorer } from "./file-explorer-sandpack"
 import { CustomFileExplorer } from "./file-explorer"
 import { CustomComponentView } from "./unknown-component-view"
-import { usePublishDialog } from "./hooks/use-publish-dialog"
+import { usePublishDialog } from "./hooks/use-editor-dialog"
 import React from "react"
 
-interface PublishDialogProps {
+interface EditorDialogProps {
   userId: string
 }
 
-export function PublishDialog({ userId }: PublishDialogProps) {
+export function EditorDialog({ userId }: EditorDialogProps) {
   const {
     open,
     componentCode,
@@ -53,7 +53,7 @@ export function PublishDialog({ userId }: PublishDialogProps) {
       </DialogTrigger>
 
       <DialogContent
-        className="sm:max-w-[90vw] h-[80vh] flex flex-col p-0 gap-0 overflow-hidden"
+        className="sm:max-w-[1200px] sm:w-[90vw] h-[80vh] flex flex-col p-0 gap-0 overflow-hidden"
         hideCloseButton
       >
         <DialogHeader className="flex flex-row p-4 gap-8 items-start justify-between border-b bg-muted">
@@ -132,7 +132,7 @@ function SandpackContent({
 
   // Log Sandpack state changes
   React.useEffect(() => {
-    console.log("[PublishDialog] Current Sandpack state:", {
+    console.log("[EditorDialog] Current Sandpack state:", {
       activeFile: sandpack.activeFile,
       files: Object.keys(sandpack.files),
       visibleFiles: sandpack.visibleFiles,
@@ -145,7 +145,7 @@ function SandpackContent({
   // Set initial file only once when component mounts
   React.useEffect(() => {
     if (!activePreview) {
-      console.log("[PublishDialog] Setting initial file:", {
+      console.log("[EditorDialog] Setting initial file:", {
         componentPath,
         currentSandpackFile: sandpack.activeFile,
         stackTrace: new Error().stack,
@@ -159,8 +159,8 @@ function SandpackContent({
   }, [componentPath, onPreviewSelect, sandpack, activePreview])
 
   const handleFileSelect = (path: string) => {
-    console.log("[PublishDialog] File selected:", path)
-    console.log("[PublishDialog] Current editor state:", {
+    console.log("[EditorDialog] File selected:", path)
+    console.log("[EditorDialog] Current editor state:", {
       activeFile: sandpack.activeFile,
       selectedPath: path,
       activePreview: activePreview,
@@ -172,7 +172,7 @@ function SandpackContent({
 
     // If the file is already selected, don't do anything
     if (activePreview?.filePath === path) {
-      console.log("[PublishDialog] File already selected, skipping", {
+      console.log("[EditorDialog] File already selected, skipping", {
         path,
         activePreview,
         sandpackFile: sandpack.activeFile,
@@ -182,7 +182,7 @@ function SandpackContent({
 
     // Check if this is an unknown component
     if (isUnknownComponent(path)) {
-      console.log("[PublishDialog] Handling unknown component selection:", {
+      console.log("[EditorDialog] Handling unknown component selection:", {
         path,
         currentSandpackFile: sandpack.activeFile,
         stackTrace: new Error().stack,
@@ -193,7 +193,7 @@ function SandpackContent({
       )?.name
 
       if (componentName) {
-        console.log("[PublishDialog] Setting unknown component preview:", {
+        console.log("[EditorDialog] Setting unknown component preview:", {
           componentName,
           path,
           currentSandpackFile: sandpack.activeFile,
@@ -206,7 +206,7 @@ function SandpackContent({
         })
       }
     } else {
-      console.log("[PublishDialog] Setting regular file preview:", {
+      console.log("[EditorDialog] Setting regular file preview:", {
         path,
         currentSandpackFile: sandpack.activeFile,
         fileContent: sandpack.files[path]?.code?.slice(0, 50) + "...",
@@ -218,7 +218,7 @@ function SandpackContent({
       })
 
       // Update the Sandpack editor file
-      console.log("[PublishDialog] Updating Sandpack editor file to:", {
+      console.log("[EditorDialog] Updating Sandpack editor file to:", {
         from: sandpack.activeFile,
         to: path,
         hasFileContent: Boolean(sandpack.files[path]?.code),
@@ -235,7 +235,7 @@ function SandpackContent({
       activePreview.filePath &&
       sandpack.activeFile !== activePreview.filePath
     ) {
-      console.log("[PublishDialog] Syncing editor file:", {
+      console.log("[EditorDialog] Syncing editor file:", {
         from: sandpack.activeFile,
         to: activePreview.filePath,
         activePreviewType: activePreview.type,
diff --git a/apps/web/components/features/studio/publish/file-explorer-sandpack.tsx b/apps/web/components/features/studio/component-editor/file-explorer-sandpack.tsx
similarity index 100%
rename from apps/web/components/features/studio/publish/file-explorer-sandpack.tsx
rename to apps/web/components/features/studio/component-editor/file-explorer-sandpack.tsx
diff --git a/apps/web/components/features/studio/publish/file-explorer.tsx b/apps/web/components/features/studio/component-editor/file-explorer.tsx
similarity index 100%
rename from apps/web/components/features/studio/publish/file-explorer.tsx
rename to apps/web/components/features/studio/component-editor/file-explorer.tsx
diff --git a/apps/web/components/features/studio/publish/hooks/use-publish-dialog.ts b/apps/web/components/features/studio/component-editor/hooks/use-editor-dialog.ts
similarity index 100%
rename from apps/web/components/features/studio/publish/hooks/use-publish-dialog.ts
rename to apps/web/components/features/studio/component-editor/hooks/use-editor-dialog.ts
diff --git a/apps/web/components/features/studio/component-editor/index.ts b/apps/web/components/features/studio/component-editor/index.ts
new file mode 100644
index 00000000..655536fe
--- /dev/null
+++ b/apps/web/components/features/studio/component-editor/index.ts
@@ -0,0 +1,3 @@
+export { EditorDialog } from "./editor-dialog"
+export { CodeEditor } from "./code-editor"
+export { CustomFileExplorer } from "./file-explorer"
diff --git a/apps/web/components/features/studio/publish/sandpack-files.ts b/apps/web/components/features/studio/component-editor/sandpack-files.ts
similarity index 100%
rename from apps/web/components/features/studio/publish/sandpack-files.ts
rename to apps/web/components/features/studio/component-editor/sandpack-files.ts
diff --git a/apps/web/components/features/studio/publish/unknown-component-view.tsx b/apps/web/components/features/studio/component-editor/unknown-component-view.tsx
similarity index 100%
rename from apps/web/components/features/studio/publish/unknown-component-view.tsx
rename to apps/web/components/features/studio/component-editor/unknown-component-view.tsx
diff --git a/apps/web/components/features/studio/index.ts b/apps/web/components/features/studio/index.ts
new file mode 100644
index 00000000..ba8a1726
--- /dev/null
+++ b/apps/web/components/features/studio/index.ts
@@ -0,0 +1,9 @@
+// Layout
+export { StudioLayout } from "./layout/studio-layout"
+export { StudioSidebar } from "./layout/studio-navigation"
+
+// Components table (library) exports
+export { DemosTable } from "./components-table"
+
+// Component editor exports
+export { EditorDialog } from "./component-editor"
diff --git a/apps/web/components/features/studio/layout/studio-layout.tsx b/apps/web/components/features/studio/layout/studio-layout.tsx
new file mode 100644
index 00000000..e167a301
--- /dev/null
+++ b/apps/web/components/features/studio/layout/studio-layout.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import { Header } from "@/components/ui/header.client"
+import { StudioSidebar } from "./studio-navigation"
+import { User } from "@/types/global"
+import { ReactNode } from "react"
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
+
+interface StudioLayoutProps {
+  user: User
+  children: ReactNode
+}
+
+export function StudioLayout({ user, children }: StudioLayoutProps) {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      <div className="flex-1 pt-14">
+        <SidebarProvider defaultOpen={true}>
+          <StudioSidebar user={user} />
+          <SidebarInset className="p-8">{children}</SidebarInset>
+        </SidebarProvider>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/components/features/studio/layout/studio-navigation.tsx b/apps/web/components/features/studio/layout/studio-navigation.tsx
new file mode 100644
index 00000000..287c70c9
--- /dev/null
+++ b/apps/web/components/features/studio/layout/studio-navigation.tsx
@@ -0,0 +1,119 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { cn } from "@/lib/utils"
+import { UserAvatar } from "@/components/ui/user-avatar"
+import { User } from "@/types/global"
+import { BarChartBig, CreditCard, Layers } from "lucide-react"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar"
+
+interface StudioSidebarProps {
+  user: User
+}
+
+interface NavItem {
+  title: string
+  href: string
+  icon: React.ReactNode
+  disabled?: boolean
+}
+
+export function StudioSidebar({ user }: StudioSidebarProps) {
+  const pathname = usePathname()
+
+  // Get the base username path
+  const baseUsername = user.display_username || user.username
+  const basePath = `/studio/${baseUsername}`
+
+  const navItems: NavItem[] = [
+    {
+      title: "Components",
+      href: basePath,
+      icon: <Layers className="h-4 w-4" />,
+    },
+    {
+      title: "Analytics",
+      href: `${basePath}/analytics`,
+      icon: <BarChartBig className="h-4 w-4" />,
+      disabled: true,
+    },
+    {
+      title: "Monetization",
+      href: `${basePath}/monetization`,
+      icon: <CreditCard className="h-4 w-4" />,
+      disabled: true,
+    },
+  ]
+
+  return (
+    <Sidebar>
+      <SidebarHeader className="border-b">
+        <div className="flex flex-col items-center py-4">
+          <UserAvatar
+            src={user.display_image_url || user.image_url || "/placeholder.svg"}
+            alt={user.display_name || user.name || ""}
+            size={64}
+            className="mb-4"
+          />
+          <h2 className="text-xl font-medium text-center">
+            {user.display_name || user.name || user.username}
+          </h2>
+          <p className="text-sm text-muted-foreground text-center">
+            @{user.display_username || user.username}
+          </p>
+        </div>
+      </SidebarHeader>
+
+      <SidebarContent className="px-2 py-4">
+        <SidebarMenu>
+          {navItems.map((item) => (
+            <SidebarMenuItem key={item.href}>
+              <Link
+                href={item.disabled ? "#" : item.href}
+                passHref
+                legacyBehavior
+              >
+                <SidebarMenuButton
+                  asChild
+                  isActive={pathname === item.href}
+                  className={cn(
+                    item.disabled &&
+                      "opacity-50 cursor-not-allowed pointer-events-none",
+                  )}
+                >
+                  <a className="flex items-center gap-2">
+                    {item.icon}
+                    <span>{item.title}</span>
+                    {item.disabled && (
+                      <span className="ml-auto text-xs px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground">
+                        Soon
+                      </span>
+                    )}
+                  </a>
+                </SidebarMenuButton>
+              </Link>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarContent>
+
+      <SidebarFooter className="border-t">
+        <Link
+          href="/settings/profile"
+          className="flex w-full items-center gap-2 p-3 text-sm text-muted-foreground hover:text-foreground rounded-md hover:bg-muted"
+        >
+          <span>Settings</span>
+        </Link>
+      </SidebarFooter>
+    </Sidebar>
+  )
+}
diff --git a/apps/web/components/features/studio/publish/index.ts b/apps/web/components/features/studio/publish/index.ts
new file mode 100644
index 00000000..c814665a
--- /dev/null
+++ b/apps/web/components/features/studio/publish/index.ts
@@ -0,0 +1,4 @@
+// This file is kept for backward compatibility
+// Please import from ../component-editor directly in new code
+
+export { EditorDialog as PublishDialog } from "../component-editor/editor-dialog"

From 45487260f13a5abd8fbf0372e556e7a8284afaf4 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Fri, 4 Apr 2025 15:28:01 +0300
Subject: [PATCH 027/143] refactor

---
 .../web/app/studio/[username]/page.client.tsx |   2 +-
 .../code-editor-component.tsx                 | 109 +++++++++
 .../studio/component-editor/code-editor.tsx   |  30 ++-
 .../studio/component-editor/code-manager.tsx  | 217 ++++++++++++++++++
 .../studio/component-editor/editor-dialog.tsx |  38 ++-
 .../features/studio/component-editor/index.ts |   3 -
 apps/web/components/features/studio/index.ts  |   9 -
 .../features/studio/publish/index.ts          |   4 -
 8 files changed, 383 insertions(+), 29 deletions(-)
 create mode 100644 apps/web/components/features/studio/component-editor/code-editor-component.tsx
 create mode 100644 apps/web/components/features/studio/component-editor/code-manager.tsx
 delete mode 100644 apps/web/components/features/studio/component-editor/index.ts
 delete mode 100644 apps/web/components/features/studio/index.ts
 delete mode 100644 apps/web/components/features/studio/publish/index.ts

diff --git a/apps/web/app/studio/[username]/page.client.tsx b/apps/web/app/studio/[username]/page.client.tsx
index 788cda69..8e04f599 100644
--- a/apps/web/app/studio/[username]/page.client.tsx
+++ b/apps/web/app/studio/[username]/page.client.tsx
@@ -3,7 +3,7 @@
 import { User, DemoWithComponent } from "@/types/global"
 import { StudioLayout } from "@/components/features/studio/layout/studio-layout"
 import { DemosTable } from "@/components/features/studio/components-table"
-import { EditorDialog} from "@/components/features/studio/component-editor"
+import { EditorDialog } from "@/components/features/studio/component-editor/editor-dialog"
 import Link from "next/link"
 import { ArrowLeft } from "lucide-react"
 
diff --git a/apps/web/components/features/studio/component-editor/code-editor-component.tsx b/apps/web/components/features/studio/component-editor/code-editor-component.tsx
new file mode 100644
index 00000000..5c1e3ac0
--- /dev/null
+++ b/apps/web/components/features/studio/component-editor/code-editor-component.tsx
@@ -0,0 +1,109 @@
+import React from "react"
+import {
+  SandpackProvider,
+  SandpackLayout,
+  SandpackFiles,
+} from "@codesandbox/sandpack-react"
+import { CodeManagerProvider, useCodeManager } from "./code-manager"
+import { CodeEditor } from "./code-editor"
+import { CustomFileExplorer } from "./file-explorer"
+import { CustomComponentView } from "./unknown-component-view"
+
+interface CodeEditorComponentProps {
+  initialFiles: SandpackFiles
+  mainComponentPath: string
+  nonShadcnComponents?: Array<{ name: string; path: string }>
+  onCodeChange?: (path: string, content: string) => void
+  isUnknownComponentFn?: (path: string) => boolean
+  activePath?: string
+  sandpackTemplate?: "react" | "react-ts" | "vanilla" | "vanilla-ts"
+  dependencies?: Record<string, string>
+}
+
+export function CodeEditorComponent({
+  initialFiles,
+  mainComponentPath,
+  nonShadcnComponents = [],
+  onCodeChange,
+  isUnknownComponentFn = () => false,
+  activePath,
+  sandpackTemplate = "react-ts",
+  dependencies = {},
+}: CodeEditorComponentProps) {
+  // Setup sandpack configuration
+  const sandpackConfig = {
+    files: initialFiles,
+    template: sandpackTemplate,
+    customSetup: {
+      dependencies: {
+        // Default dependencies
+        react: "^18.0.0",
+        "react-dom": "^18.0.0",
+        "@radix-ui/react-icons": "^1.3.0",
+        "class-variance-authority": "^0.7.0",
+        clsx: "^2.0.0",
+        "tailwind-merge": "^1.14.0",
+        "tailwindcss-animate": "^1.0.7",
+        ...dependencies,
+      },
+    },
+  }
+
+  return (
+    <SandpackProvider {...sandpackConfig}>
+      <CodeManagerProvider
+        initialComponentPath={activePath || mainComponentPath}
+        nonShadcnComponents={nonShadcnComponents}
+        onFileContentChange={onCodeChange}
+        isUnknownComponentFn={isUnknownComponentFn}
+      >
+        <div className="flex flex-col h-full">
+          <EditorContent />
+        </div>
+      </CodeManagerProvider>
+    </SandpackProvider>
+  )
+}
+
+function EditorContent() {
+  const {
+    activeFile,
+    selectFile,
+    isUnknownComponent,
+    getComponentName,
+    nonShadcnComponents,
+  } = useCodeManager()
+
+  // Handle file selection
+  const handleFileSelect = (path: string) => {
+    selectFile(path)
+  }
+
+  return (
+    <SandpackLayout style={{ height: "100%", border: "none" }}>
+      <div className="flex w-full h-full">
+        <div className="flex border-r border-border">
+          <CustomFileExplorer
+            nonShadcnComponents={nonShadcnComponents}
+            onFileSelect={handleFileSelect}
+            selectedFile={activeFile}
+          />
+        </div>
+        <div className="flex-1">
+          {activeFile && isUnknownComponent(activeFile) ? (
+            <CustomComponentView
+              componentName={getComponentName(activeFile) || "Component"}
+            />
+          ) : (
+            <CodeEditor
+              componentPath={activeFile || ""}
+              onCodeChange={() => {
+                // This will be handled by the CodeManager through the CodeEditor component
+              }}
+            />
+          )}
+        </div>
+      </div>
+    </SandpackLayout>
+  )
+}
diff --git a/apps/web/components/features/studio/component-editor/code-editor.tsx b/apps/web/components/features/studio/component-editor/code-editor.tsx
index 9fef00ae..5da6c181 100644
--- a/apps/web/components/features/studio/component-editor/code-editor.tsx
+++ b/apps/web/components/features/studio/component-editor/code-editor.tsx
@@ -1,12 +1,13 @@
-import { useEffect } from "react"
+import React, { useEffect } from "react"
 import {
   SandpackCodeEditor,
   useActiveCode,
   useSandpack,
 } from "@codesandbox/sandpack-react"
+import { useCodeManager } from "./code-manager"
 
 interface CodeEditorProps {
-  onCodeChange: (code: string) => void
+  onCodeChange?: (code: string) => void
   componentPath: string
 }
 
@@ -14,6 +15,15 @@ export function CodeEditor({ onCodeChange, componentPath }: CodeEditorProps) {
   const { code } = useActiveCode()
   const { sandpack } = useSandpack()
 
+  // Try to use CodeManager if available (for the new flow)
+  let codeManager
+  try {
+    codeManager = useCodeManager()
+  } catch (error) {
+    // No code manager available, will use the original flow
+    codeManager = null
+  }
+
   // Log detailed Sandpack state on every render
   console.log("[CodeEditor] Current full state:", {
     sandpackState: {
@@ -27,6 +37,7 @@ export function CodeEditor({ onCodeChange, componentPath }: CodeEditorProps) {
       hasCode: Boolean(code),
       codeLength: code?.length,
     },
+    usingCodeManager: Boolean(codeManager),
     stackTrace: new Error().stack,
   })
 
@@ -43,6 +54,7 @@ export function CodeEditor({ onCodeChange, componentPath }: CodeEditorProps) {
     })
   }, [componentPath, sandpack.activeFile, code, sandpack.files])
 
+  // Handle code changes with or without CodeManager
   useEffect(() => {
     if (code && sandpack.activeFile === componentPath) {
       console.log("[CodeEditor] Updating code for:", {
@@ -50,9 +62,19 @@ export function CodeEditor({ onCodeChange, componentPath }: CodeEditorProps) {
         codeLength: code.length,
         activeFile: sandpack.activeFile,
         codePreview: code.slice(0, 50) + "...",
+        usingCodeManager: Boolean(codeManager),
         stackTrace: new Error().stack,
       })
-      onCodeChange(code)
+
+      // If we have a code manager, update it
+      if (codeManager && componentPath) {
+        codeManager.updateFileContent(componentPath, code)
+      }
+
+      // Always call the original onCodeChange prop if provided
+      if (onCodeChange) {
+        onCodeChange(code)
+      }
     } else {
       console.log("[CodeEditor] Skipped code update because:", {
         hasCode: Boolean(code),
@@ -62,7 +84,7 @@ export function CodeEditor({ onCodeChange, componentPath }: CodeEditorProps) {
         codePreview: code?.slice(0, 50) + "...",
       })
     }
-  }, [code, onCodeChange, sandpack.activeFile, componentPath])
+  }, [code, onCodeChange, sandpack.activeFile, componentPath, codeManager])
 
   // Log when active file changes in Sandpack
   useEffect(() => {
diff --git a/apps/web/components/features/studio/component-editor/code-manager.tsx b/apps/web/components/features/studio/component-editor/code-manager.tsx
new file mode 100644
index 00000000..7bc17004
--- /dev/null
+++ b/apps/web/components/features/studio/component-editor/code-manager.tsx
@@ -0,0 +1,217 @@
+import React, { createContext, useContext, useEffect, useState } from "react"
+import { useRouter } from "next/navigation"
+import { useSandpack } from "@codesandbox/sandpack-react"
+
+// Define the types for our context
+interface CodeManagerContextType {
+  // File operations
+  getFileContent: (path: string) => string | undefined
+  updateFileContent: (path: string, content: string) => void
+  addFile: (path: string, content: string) => void
+  renameFile: (from: string, to: string) => void
+  deleteFile: (path: string) => void
+
+  // File state
+  activeFile: string | null
+  selectFile: (path: string) => void
+
+  // File types and management
+  isUnknownComponent: (path: string) => boolean
+  getComponentName: (path: string) => string | undefined
+
+  // File metadata
+  allFiles: string[]
+  nonShadcnComponents: Array<{ name: string; path: string }> | undefined
+}
+
+const CodeManagerContext = createContext<CodeManagerContextType | null>(null)
+
+export function useCodeManager() {
+  const context = useContext(CodeManagerContext)
+  if (!context) {
+    throw new Error("useCodeManager must be used within a CodeManagerProvider")
+  }
+  return context
+}
+
+interface CodeManagerProviderProps {
+  children: React.ReactNode
+  initialComponentPath: string
+  nonShadcnComponents?: Array<{ name: string; path: string }>
+  onFileContentChange?: (path: string, content: string) => void
+  isUnknownComponentFn?: (path: string) => boolean
+}
+
+export function CodeManagerProvider({
+  children,
+  initialComponentPath,
+  nonShadcnComponents = [],
+  onFileContentChange,
+  isUnknownComponentFn = () => false,
+}: CodeManagerProviderProps) {
+  const { sandpack } = useSandpack()
+  const [activeFile, setActiveFile] = useState<string | null>(
+    initialComponentPath,
+  )
+  const [userModifiedFiles, setUserModifiedFiles] = useState<
+    Record<string, boolean>
+  >({})
+  const router = useRouter()
+
+  // Initialize with the main component file
+  useEffect(() => {
+    if (initialComponentPath && !activeFile) {
+      selectFile(initialComponentPath)
+    }
+  }, [initialComponentPath])
+
+  // Log state changes in development
+  useEffect(() => {
+    console.log("[CodeManager] Current state:", {
+      activeFile,
+      files: Object.keys(sandpack.files),
+      userModifiedFiles,
+    })
+  }, [sandpack.files, activeFile, userModifiedFiles])
+
+  // File selection
+  const selectFile = (path: string) => {
+    if (!path) return
+
+    console.log("[CodeManager] Selecting file:", path)
+
+    // Only update Sandpack if it's not an unknown component
+    if (!isUnknownComponentFn(path)) {
+      sandpack.setActiveFile(path)
+    }
+
+    setActiveFile(path)
+  }
+
+  // File content operations
+  const getFileContent = (path: string) => {
+    return sandpack.files[path]?.code
+  }
+
+  const updateFileContent = (path: string, content: string) => {
+    console.log("[CodeManager] Updating file content:", path)
+
+    // Mark this file as user-modified
+    setUserModifiedFiles((prev) => ({ ...prev, [path]: true }))
+
+    sandpack.updateFile(path, content)
+
+    // Notify parent if needed
+    if (onFileContentChange) {
+      onFileContentChange(path, content)
+    }
+  }
+
+  const addFile = (path: string, content: string = "") => {
+    console.log("[CodeManager] Adding new file:", path)
+
+    sandpack.addFile(path, content)
+
+    // Select the newly created file
+    selectFile(path)
+  }
+
+  const renameFile = (from: string, to: string) => {
+    console.log("[CodeManager] Renaming file:", { from, to })
+
+    // Get the file content
+    const fileObj = sandpack.files[from]
+
+    // Proceed only if we have a file to rename
+    if (fileObj) {
+      // Handle both string content and SandpackFile objects
+      const content = typeof fileObj === "string" ? fileObj : fileObj.code || ""
+
+      // Create new file with the content
+      sandpack.addFile(to, content)
+
+      // Transfer user modification state
+      if (userModifiedFiles[from]) {
+        setUserModifiedFiles((prev) => {
+          const newState = { ...prev }
+          delete newState[from]
+          newState[to] = true
+          return newState
+        })
+      }
+
+      // Remove old file
+      deleteFile(from)
+
+      // Update active file if needed
+      if (activeFile === from) {
+        selectFile(to)
+      }
+    } else {
+      console.warn(`[CodeManager] Cannot rename file: File not found ${from}`)
+    }
+  }
+
+  const deleteFile = (path: string) => {
+    console.log("[CodeManager] Deleting file:", path)
+
+    // Remove from Sandpack
+    sandpack.deleteFile(path)
+
+    // Remove from user modified tracking
+    if (userModifiedFiles[path]) {
+      setUserModifiedFiles((prev) => {
+        const newState = { ...prev }
+        delete newState[path]
+        return newState
+      })
+    }
+
+    // Update active file if needed
+    if (activeFile === path) {
+      // Select another file
+      const files = Object.keys(sandpack.files)
+      if (files.length > 0) {
+        selectFile(files[0] as string)
+      } else {
+        setActiveFile(null)
+      }
+    }
+  }
+
+  // Component utilities
+  const isUnknownComponent = (path: string) => {
+    return isUnknownComponentFn(path)
+  }
+
+  const getComponentName = (path: string) => {
+    return nonShadcnComponents?.find((comp) => comp.path === path)?.name
+  }
+
+  const value: CodeManagerContextType = {
+    // File operations
+    getFileContent,
+    updateFileContent,
+    addFile,
+    renameFile,
+    deleteFile,
+
+    // File state
+    activeFile,
+    selectFile,
+
+    // File types and management
+    isUnknownComponent,
+    getComponentName,
+
+    // File metadata
+    allFiles: Object.keys(sandpack.files),
+    nonShadcnComponents,
+  }
+
+  return (
+    <CodeManagerContext.Provider value={value}>
+      {children}
+    </CodeManagerContext.Provider>
+  )
+}
diff --git a/apps/web/components/features/studio/component-editor/editor-dialog.tsx b/apps/web/components/features/studio/component-editor/editor-dialog.tsx
index 9047aaca..8b105dd9 100644
--- a/apps/web/components/features/studio/component-editor/editor-dialog.tsx
+++ b/apps/web/components/features/studio/component-editor/editor-dialog.tsx
@@ -22,6 +22,7 @@ import { CustomFileExplorer } from "./file-explorer"
 import { CustomComponentView } from "./unknown-component-view"
 import { usePublishDialog } from "./hooks/use-editor-dialog"
 import React from "react"
+import { CodeEditorComponent } from "./code-editor-component"
 
 interface EditorDialogProps {
   userId: string
@@ -85,16 +86,37 @@ export function EditorDialog({ userId }: EditorDialogProps) {
 
         <div className="flex-grow overflow-hidden flex flex-col h-full">
           <div className="h-full min-h-[400px] overflow-hidden flex-grow">
-            <SandpackProvider {...sandpackConfig}>
-              <SandpackContent
-                activePreview={activePreview}
-                onPreviewSelect={handlePreviewSelect}
+            {/* If we have active preview and processed data, use the new CodeEditorComponent */}
+            {processedData ? (
+              <CodeEditorComponent
+                initialFiles={sandpackConfig.files}
+                mainComponentPath={getComponentFilePath()}
                 nonShadcnComponents={processedData?.nonShadcnComponentsImports}
-                getComponentFilePath={getComponentFilePath}
-                setComponentCode={setComponentCode}
-                isUnknownComponent={isUnknownComponent}
+                onCodeChange={(path, content) => {
+                  if (path === getComponentFilePath()) {
+                    setComponentCode(content)
+                  }
+                }}
+                isUnknownComponentFn={isUnknownComponent}
+                activePath={activePreview?.filePath}
+                sandpackTemplate={sandpackConfig.template}
+                dependencies={sandpackConfig.customSetup?.dependencies}
               />
-            </SandpackProvider>
+            ) : (
+              /* Otherwise use the original SandpackContent */
+              <SandpackProvider {...sandpackConfig}>
+                <SandpackContent
+                  activePreview={activePreview}
+                  onPreviewSelect={handlePreviewSelect}
+                  nonShadcnComponents={
+                    processedData?.nonShadcnComponentsImports
+                  }
+                  getComponentFilePath={getComponentFilePath}
+                  setComponentCode={setComponentCode}
+                  isUnknownComponent={isUnknownComponent}
+                />
+              </SandpackProvider>
+            )}
           </div>
         </div>
       </DialogContent>
diff --git a/apps/web/components/features/studio/component-editor/index.ts b/apps/web/components/features/studio/component-editor/index.ts
deleted file mode 100644
index 655536fe..00000000
--- a/apps/web/components/features/studio/component-editor/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { EditorDialog } from "./editor-dialog"
-export { CodeEditor } from "./code-editor"
-export { CustomFileExplorer } from "./file-explorer"
diff --git a/apps/web/components/features/studio/index.ts b/apps/web/components/features/studio/index.ts
deleted file mode 100644
index ba8a1726..00000000
--- a/apps/web/components/features/studio/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// Layout
-export { StudioLayout } from "./layout/studio-layout"
-export { StudioSidebar } from "./layout/studio-navigation"
-
-// Components table (library) exports
-export { DemosTable } from "./components-table"
-
-// Component editor exports
-export { EditorDialog } from "./component-editor"
diff --git a/apps/web/components/features/studio/publish/index.ts b/apps/web/components/features/studio/publish/index.ts
deleted file mode 100644
index c814665a..00000000
--- a/apps/web/components/features/studio/publish/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// This file is kept for backward compatibility
-// Please import from ../component-editor directly in new code
-
-export { EditorDialog as PublishDialog } from "../component-editor/editor-dialog"

From 1235d702a05bceb642a13542743a278bf29b87df Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Fri, 4 Apr 2025 15:42:22 +0300
Subject: [PATCH 028/143] reacotr

---
 .../code-editor-component.tsx                 | 31 ++++++++++++-
 .../studio/component-editor/code-editor.tsx   | 38 ++++++++++++++-
 .../studio/component-editor/code-manager.tsx  |  7 +++
 .../studio/component-editor/editor-dialog.tsx | 11 +++++
 .../studio/component-editor/file-explorer.tsx | 46 +++++++++++++------
 5 files changed, 116 insertions(+), 17 deletions(-)

diff --git a/apps/web/components/features/studio/component-editor/code-editor-component.tsx b/apps/web/components/features/studio/component-editor/code-editor-component.tsx
index 5c1e3ac0..e6d047a4 100644
--- a/apps/web/components/features/studio/component-editor/code-editor-component.tsx
+++ b/apps/web/components/features/studio/component-editor/code-editor-component.tsx
@@ -18,6 +18,7 @@ interface CodeEditorComponentProps {
   activePath?: string
   sandpackTemplate?: "react" | "react-ts" | "vanilla" | "vanilla-ts"
   dependencies?: Record<string, string>
+  visiblePaths?: string[]
 }
 
 export function CodeEditorComponent({
@@ -29,6 +30,7 @@ export function CodeEditorComponent({
   activePath,
   sandpackTemplate = "react-ts",
   dependencies = {},
+  visiblePaths,
 }: CodeEditorComponentProps) {
   // Setup sandpack configuration
   const sandpackConfig = {
@@ -58,22 +60,46 @@ export function CodeEditorComponent({
         isUnknownComponentFn={isUnknownComponentFn}
       >
         <div className="flex flex-col h-full">
-          <EditorContent />
+          <EditorContent visiblePaths={visiblePaths} />
         </div>
       </CodeManagerProvider>
     </SandpackProvider>
   )
 }
 
-function EditorContent() {
+interface EditorContentProps {
+  visiblePaths?: string[]
+}
+
+function EditorContent({ visiblePaths }: EditorContentProps) {
   const {
     activeFile,
     selectFile,
     isUnknownComponent,
     getComponentName,
     nonShadcnComponents,
+    allFiles,
   } = useCodeManager()
 
+  // Filter files based on visiblePaths if provided
+  const filteredFiles = React.useMemo(() => {
+    if (!visiblePaths || visiblePaths.length === 0) {
+      return allFiles
+    }
+
+    return allFiles.filter((path) => {
+      // Check if path matches any of the visible paths patterns
+      return visiblePaths.some((visiblePath) => {
+        // Handle directory patterns like "/components/"
+        if (visiblePath.endsWith("/")) {
+          return path.startsWith(visiblePath)
+        }
+        // Handle exact file paths
+        return path === visiblePath
+      })
+    })
+  }, [allFiles, visiblePaths])
+
   // Handle file selection
   const handleFileSelect = (path: string) => {
     selectFile(path)
@@ -87,6 +113,7 @@ function EditorContent() {
             nonShadcnComponents={nonShadcnComponents}
             onFileSelect={handleFileSelect}
             selectedFile={activeFile}
+            visibleFiles={visiblePaths}
           />
         </div>
         <div className="flex-1">
diff --git a/apps/web/components/features/studio/component-editor/code-editor.tsx b/apps/web/components/features/studio/component-editor/code-editor.tsx
index 5da6c181..e13e73cd 100644
--- a/apps/web/components/features/studio/component-editor/code-editor.tsx
+++ b/apps/web/components/features/studio/component-editor/code-editor.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react"
+import React, { useEffect, useRef } from "react"
 import {
   SandpackCodeEditor,
   useActiveCode,
@@ -14,6 +14,8 @@ interface CodeEditorProps {
 export function CodeEditor({ onCodeChange, componentPath }: CodeEditorProps) {
   const { code } = useActiveCode()
   const { sandpack } = useSandpack()
+  const prevCodeRef = useRef<string>()
+  const updatingRef = useRef(false)
 
   // Try to use CodeManager if available (for the new flow)
   let codeManager
@@ -38,6 +40,7 @@ export function CodeEditor({ onCodeChange, componentPath }: CodeEditorProps) {
       codeLength: code?.length,
     },
     usingCodeManager: Boolean(codeManager),
+    updating: updatingRef.current,
     stackTrace: new Error().stack,
   })
 
@@ -56,6 +59,23 @@ export function CodeEditor({ onCodeChange, componentPath }: CodeEditorProps) {
 
   // Handle code changes with or without CodeManager
   useEffect(() => {
+    // Skip if we're in the middle of updating
+    if (updatingRef.current) {
+      console.log(
+        "[CodeEditor] Skipping update because we're in the middle of updating",
+      )
+      return
+    }
+
+    // Skip if code is the same as before
+    if (prevCodeRef.current === code) {
+      console.log("[CodeEditor] Skipping update because code is the same")
+      return
+    }
+
+    // Update the previous code ref
+    prevCodeRef.current = code
+
     if (code && sandpack.activeFile === componentPath) {
       console.log("[CodeEditor] Updating code for:", {
         file: componentPath,
@@ -68,7 +88,21 @@ export function CodeEditor({ onCodeChange, componentPath }: CodeEditorProps) {
 
       // If we have a code manager, update it
       if (codeManager && componentPath) {
-        codeManager.updateFileContent(componentPath, code)
+        try {
+          // Set the updating flag to prevent infinite loops
+          updatingRef.current = true
+
+          // Update the file content
+          codeManager.updateFileContent(componentPath, code)
+
+          // Clear the updating flag after a short delay
+          setTimeout(() => {
+            updatingRef.current = false
+          }, 50)
+        } catch (error) {
+          console.error("[CodeEditor] Error updating file content:", error)
+          updatingRef.current = false
+        }
       }
 
       // Always call the original onCodeChange prop if provided
diff --git a/apps/web/components/features/studio/component-editor/code-manager.tsx b/apps/web/components/features/studio/component-editor/code-manager.tsx
index 7bc17004..f8fabfc0 100644
--- a/apps/web/components/features/studio/component-editor/code-manager.tsx
+++ b/apps/web/components/features/studio/component-editor/code-manager.tsx
@@ -96,6 +96,13 @@ export function CodeManagerProvider({
   const updateFileContent = (path: string, content: string) => {
     console.log("[CodeManager] Updating file content:", path)
 
+    // Check if the content is actually different
+    const currentContent = getFileContent(path)
+    if (currentContent === content) {
+      console.log("[CodeManager] Content unchanged, skipping update:", path)
+      return
+    }
+
     // Mark this file as user-modified
     setUserModifiedFiles((prev) => ({ ...prev, [path]: true }))
 
diff --git a/apps/web/components/features/studio/component-editor/editor-dialog.tsx b/apps/web/components/features/studio/component-editor/editor-dialog.tsx
index 8b105dd9..e1b6ad8b 100644
--- a/apps/web/components/features/studio/component-editor/editor-dialog.tsx
+++ b/apps/web/components/features/studio/component-editor/editor-dialog.tsx
@@ -101,6 +101,17 @@ export function EditorDialog({ userId }: EditorDialogProps) {
                 activePath={activePreview?.filePath}
                 sandpackTemplate={sandpackConfig.template}
                 dependencies={sandpackConfig.customSetup?.dependencies}
+                visiblePaths={
+                  Array.isArray(sandpackConfig.options?.visibleFiles)
+                    ? sandpackConfig.options.visibleFiles
+                    : [
+                        getComponentFilePath(),
+                        "/components/",
+                        "/tailwind.config.js",
+                        "/globals.css",
+                        "/package.json",
+                      ]
+                }
               />
             ) : (
               /* Otherwise use the original SandpackContent */
diff --git a/apps/web/components/features/studio/component-editor/file-explorer.tsx b/apps/web/components/features/studio/component-editor/file-explorer.tsx
index b8fe2e94..4ad1e483 100644
--- a/apps/web/components/features/studio/component-editor/file-explorer.tsx
+++ b/apps/web/components/features/studio/component-editor/file-explorer.tsx
@@ -18,15 +18,17 @@ interface FileTreeItem {
   isUnknownComponent?: boolean
 }
 
-interface CustomFileExplorerProps {
+export interface CustomFileExplorerProps {
   nonShadcnComponents?: Array<{ name: string; path: string }>
   onFileSelect?: (path: string) => void
   selectedFile?: string | null
+  visibleFiles?: string[]
 }
 
 function buildFileTree(
   files: string[],
   unknownComponents: Array<{ name: string; path: string }> = [],
+  visibleFilesFilter?: string[],
 ): {
   tree: FileTreeItem[]
   directories: Set<string>
@@ -34,12 +36,32 @@ function buildFileTree(
   const root: FileTreeItem[] = []
   const directories = new Set<string>()
 
-  // Helper function to add item to tree
+  const isFileVisible = (path: string) => {
+    if (unknownComponents.some((comp) => comp.path === path)) {
+      return true
+    }
+
+    if (!visibleFilesFilter || visibleFilesFilter.length === 0) {
+      return true
+    }
+
+    return visibleFilesFilter.some((visiblePath) => {
+      if (visiblePath.endsWith("/")) {
+        return path.startsWith(visiblePath)
+      }
+      return path === visiblePath
+    })
+  }
+
   const addToTree = (
     path: string,
     isUnknownComponent = false,
     componentName?: string,
   ) => {
+    if (!isUnknownComponent && !isFileVisible(path)) {
+      return
+    }
+
     const parts = path.replace("@/", "").split("/").filter(Boolean)
     let current = root
     let currentPath = ""
@@ -75,7 +97,6 @@ function buildFileTree(
           isUnknownComponent: isLast ? isUnknownComponent : undefined,
         }
 
-        // Insert item in sorted position
         const insertIndex = current.findIndex((item) => {
           if (item.type === newItem.type) {
             return item.name.localeCompare(newItem.name) > 0
@@ -96,17 +117,14 @@ function buildFileTree(
     })
   }
 
-  // Add standard files
   files.forEach((path) => {
     addToTree(path)
   })
 
-  // Add unknown components to their respective directories
   unknownComponents.forEach((comp) => {
     addToTree(comp.path, true, comp.name)
   })
 
-  // Helper function to sort children recursively
   const sortTreeRecursively = (items: FileTreeItem[]) => {
     items.sort((a, b) => {
       if (a.type !== b.type) {
@@ -122,7 +140,6 @@ function buildFileTree(
     })
   }
 
-  // Sort the entire tree
   sortTreeRecursively(root)
 
   return { tree: root, directories }
@@ -159,7 +176,6 @@ function FileTreeNode({
           if (item.type === "directory") {
             onToggleDir(item.path)
           } else {
-            // Unified handling for all file types
             onFileClick(item.path)
           }
         }}
@@ -217,13 +233,15 @@ export function CustomFileExplorer({
   nonShadcnComponents = [],
   onFileSelect,
   selectedFile,
+  visibleFiles,
 }: CustomFileExplorerProps) {
   const { sandpack } = useSandpack()
-  const { visibleFiles } = sandpack
+  const { visibleFiles: sandpackVisibleFiles } = sandpack
 
   const { tree: fileTree, directories } = useMemo(
-    () => buildFileTree(visibleFiles, nonShadcnComponents),
-    [visibleFiles, nonShadcnComponents],
+    () =>
+      buildFileTree(sandpackVisibleFiles, nonShadcnComponents, visibleFiles),
+    [sandpackVisibleFiles, nonShadcnComponents, visibleFiles],
   )
 
   const [expandedDirs, setExpandedDirs] = useState<Set<string>>(directories)
@@ -243,9 +261,11 @@ export function CustomFileExplorer({
   const handleFileClick = useCallback(
     (path: string) => {
       console.log("[FileExplorer] handleFileClick called with path:", path)
-      
+
       if (onFileSelect) {
-        console.log("[FileExplorer] onFileSelect handler exists, calling with path")
+        console.log(
+          "[FileExplorer] onFileSelect handler exists, calling with path",
+        )
         onFileSelect(path)
       } else {
         console.log("[FileExplorer] onFileSelect handler not provided")

From 26560bbfbf50e8094c21f58bbd3c5d7bff346fb9 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Fri, 4 Apr 2025 15:59:30 +0300
Subject: [PATCH 029/143] refactor

---
 .../code-editor-component.tsx                 | 24 +-----
 .../studio/component-editor/code-editor.tsx   | 82 +------------------
 .../studio/component-editor/code-manager.tsx  |  2 -
 .../studio/component-editor/editor-dialog.tsx |  5 +-
 .../file-explorer-sandpack.tsx                | 24 ------
 .../hooks/use-editor-dialog.ts                | 19 ++---
 .../unknown-component-view.tsx                |  8 +-
 7 files changed, 18 insertions(+), 146 deletions(-)
 delete mode 100644 apps/web/components/features/studio/component-editor/file-explorer-sandpack.tsx

diff --git a/apps/web/components/features/studio/component-editor/code-editor-component.tsx b/apps/web/components/features/studio/component-editor/code-editor-component.tsx
index e6d047a4..b3ad21df 100644
--- a/apps/web/components/features/studio/component-editor/code-editor-component.tsx
+++ b/apps/web/components/features/studio/component-editor/code-editor-component.tsx
@@ -7,7 +7,7 @@ import {
 import { CodeManagerProvider, useCodeManager } from "./code-manager"
 import { CodeEditor } from "./code-editor"
 import { CustomFileExplorer } from "./file-explorer"
-import { CustomComponentView } from "./unknown-component-view"
+import { UnknownComponentView } from "./unknown-component-view"
 
 interface CodeEditorComponentProps {
   initialFiles: SandpackFiles
@@ -78,28 +78,8 @@ function EditorContent({ visiblePaths }: EditorContentProps) {
     isUnknownComponent,
     getComponentName,
     nonShadcnComponents,
-    allFiles,
   } = useCodeManager()
 
-  // Filter files based on visiblePaths if provided
-  const filteredFiles = React.useMemo(() => {
-    if (!visiblePaths || visiblePaths.length === 0) {
-      return allFiles
-    }
-
-    return allFiles.filter((path) => {
-      // Check if path matches any of the visible paths patterns
-      return visiblePaths.some((visiblePath) => {
-        // Handle directory patterns like "/components/"
-        if (visiblePath.endsWith("/")) {
-          return path.startsWith(visiblePath)
-        }
-        // Handle exact file paths
-        return path === visiblePath
-      })
-    })
-  }, [allFiles, visiblePaths])
-
   // Handle file selection
   const handleFileSelect = (path: string) => {
     selectFile(path)
@@ -118,7 +98,7 @@ function EditorContent({ visiblePaths }: EditorContentProps) {
         </div>
         <div className="flex-1">
           {activeFile && isUnknownComponent(activeFile) ? (
-            <CustomComponentView
+            <UnknownComponentView
               componentName={getComponentName(activeFile) || "Component"}
             />
           ) : (
diff --git a/apps/web/components/features/studio/component-editor/code-editor.tsx b/apps/web/components/features/studio/component-editor/code-editor.tsx
index e13e73cd..5f5b40e7 100644
--- a/apps/web/components/features/studio/component-editor/code-editor.tsx
+++ b/apps/web/components/features/studio/component-editor/code-editor.tsx
@@ -14,126 +14,46 @@ interface CodeEditorProps {
 export function CodeEditor({ onCodeChange, componentPath }: CodeEditorProps) {
   const { code } = useActiveCode()
   const { sandpack } = useSandpack()
-  const prevCodeRef = useRef<string>()
+  const prevCodeRef = useRef<string>(undefined)
   const updatingRef = useRef(false)
 
-  // Try to use CodeManager if available (for the new flow)
   let codeManager
   try {
     codeManager = useCodeManager()
   } catch (error) {
-    // No code manager available, will use the original flow
     codeManager = null
   }
 
-  // Log detailed Sandpack state on every render
-  console.log("[CodeEditor] Current full state:", {
-    sandpackState: {
-      activeFile: sandpack.activeFile,
-      visibleFiles: sandpack.visibleFiles,
-      files: Object.keys(sandpack.files),
-      currentCode: code?.slice(0, 100) + "...", // First 100 chars for debugging
-    },
-    props: {
-      componentPath,
-      hasCode: Boolean(code),
-      codeLength: code?.length,
-    },
-    usingCodeManager: Boolean(codeManager),
-    updating: updatingRef.current,
-    stackTrace: new Error().stack,
-  })
-
-  // Log when the component renders with new props
-  useEffect(() => {
-    console.log("[CodeEditor] Rendered with:", {
-      componentPath,
-      activeFile: sandpack.activeFile,
-      hasCode: Boolean(code),
-      currentCodePreview: code?.slice(0, 50) + "...", // Show start of the code
-      allFiles: Object.keys(sandpack.files),
-      fileContent:
-        sandpack.files[sandpack.activeFile]?.code?.slice(0, 50) + "...",
-    })
-  }, [componentPath, sandpack.activeFile, code, sandpack.files])
-
-  // Handle code changes with or without CodeManager
   useEffect(() => {
-    // Skip if we're in the middle of updating
     if (updatingRef.current) {
-      console.log(
-        "[CodeEditor] Skipping update because we're in the middle of updating",
-      )
       return
     }
 
-    // Skip if code is the same as before
     if (prevCodeRef.current === code) {
-      console.log("[CodeEditor] Skipping update because code is the same")
       return
     }
 
-    // Update the previous code ref
     prevCodeRef.current = code
 
     if (code && sandpack.activeFile === componentPath) {
-      console.log("[CodeEditor] Updating code for:", {
-        file: componentPath,
-        codeLength: code.length,
-        activeFile: sandpack.activeFile,
-        codePreview: code.slice(0, 50) + "...",
-        usingCodeManager: Boolean(codeManager),
-        stackTrace: new Error().stack,
-      })
-
-      // If we have a code manager, update it
       if (codeManager && componentPath) {
         try {
-          // Set the updating flag to prevent infinite loops
           updatingRef.current = true
-
-          // Update the file content
           codeManager.updateFileContent(componentPath, code)
-
-          // Clear the updating flag after a short delay
           setTimeout(() => {
             updatingRef.current = false
           }, 50)
         } catch (error) {
-          console.error("[CodeEditor] Error updating file content:", error)
           updatingRef.current = false
         }
       }
 
-      // Always call the original onCodeChange prop if provided
       if (onCodeChange) {
         onCodeChange(code)
       }
-    } else {
-      console.log("[CodeEditor] Skipped code update because:", {
-        hasCode: Boolean(code),
-        activeFile: sandpack.activeFile,
-        expectedPath: componentPath,
-        matches: sandpack.activeFile === componentPath,
-        codePreview: code?.slice(0, 50) + "...",
-      })
     }
   }, [code, onCodeChange, sandpack.activeFile, componentPath, codeManager])
 
-  // Log when active file changes in Sandpack
-  useEffect(() => {
-    console.log("[CodeEditor] Sandpack active file changed:", {
-      from: sandpack.activeFile,
-      expectedPath: componentPath,
-      matches: sandpack.activeFile === componentPath,
-      currentCode: code?.slice(0, 50) + "...",
-      fileContent:
-        sandpack.files[sandpack.activeFile]?.code?.slice(0, 50) + "...",
-      allFiles: Object.keys(sandpack.files),
-      stackTrace: new Error().stack,
-    })
-  }, [sandpack.activeFile, componentPath, code, sandpack.files])
-
   return (
     <SandpackCodeEditor
       showTabs={false}
diff --git a/apps/web/components/features/studio/component-editor/code-manager.tsx b/apps/web/components/features/studio/component-editor/code-manager.tsx
index f8fabfc0..2511be65 100644
--- a/apps/web/components/features/studio/component-editor/code-manager.tsx
+++ b/apps/web/components/features/studio/component-editor/code-manager.tsx
@@ -1,5 +1,4 @@
 import React, { createContext, useContext, useEffect, useState } from "react"
-import { useRouter } from "next/navigation"
 import { useSandpack } from "@codesandbox/sandpack-react"
 
 // Define the types for our context
@@ -56,7 +55,6 @@ export function CodeManagerProvider({
   const [userModifiedFiles, setUserModifiedFiles] = useState<
     Record<string, boolean>
   >({})
-  const router = useRouter()
 
   // Initialize with the main component file
   useEffect(() => {
diff --git a/apps/web/components/features/studio/component-editor/editor-dialog.tsx b/apps/web/components/features/studio/component-editor/editor-dialog.tsx
index e1b6ad8b..f53f2cb8 100644
--- a/apps/web/components/features/studio/component-editor/editor-dialog.tsx
+++ b/apps/web/components/features/studio/component-editor/editor-dialog.tsx
@@ -17,9 +17,8 @@ import {
 } from "@codesandbox/sandpack-react"
 
 import { CodeEditor } from "./code-editor"
-import { FileExplorer } from "./file-explorer-sandpack"
 import { CustomFileExplorer } from "./file-explorer"
-import { CustomComponentView } from "./unknown-component-view"
+import { UnknownComponentView } from "./unknown-component-view"
 import { usePublishDialog } from "./hooks/use-editor-dialog"
 import React from "react"
 import { CodeEditorComponent } from "./code-editor-component"
@@ -299,7 +298,7 @@ function SandpackContent({
           </div>
           <div className="flex-1">
             {activePreview?.type === "unknown" ? (
-              <CustomComponentView
+              <UnknownComponentView
                 componentName={activePreview.componentName || ""}
               />
             ) : (
diff --git a/apps/web/components/features/studio/component-editor/file-explorer-sandpack.tsx b/apps/web/components/features/studio/component-editor/file-explorer-sandpack.tsx
deleted file mode 100644
index 8653cdad..00000000
--- a/apps/web/components/features/studio/component-editor/file-explorer-sandpack.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { SandpackFileExplorer } from "@codesandbox/sandpack-react"
-
-export function FileExplorer() {
-  return (
-    <div className="w-64 border-r overflow-auto">
-      <div className="mt-4 px-4 text-[13px] font-medium text-muted-foreground">
-        Project Files
-      </div>
-      <SandpackFileExplorer
-        autoHiddenFiles={true}
-        initialCollapsedFolder={[
-          "/node_modules",
-          "/lib",
-          "/public",
-          "/.env",
-          "/index.html",
-          "/index.tsx",
-          "/tsconfig.json",
-          "/theme-provider.tsx",
-        ]}
-      />
-    </div>
-  )
-}
diff --git a/apps/web/components/features/studio/component-editor/hooks/use-editor-dialog.ts b/apps/web/components/features/studio/component-editor/hooks/use-editor-dialog.ts
index b87fa4e2..a5ec648d 100644
--- a/apps/web/components/features/studio/component-editor/hooks/use-editor-dialog.ts
+++ b/apps/web/components/features/studio/component-editor/hooks/use-editor-dialog.ts
@@ -18,19 +18,10 @@ interface UsePublishDialogProps {
   userId: string
 }
 
-// Define a type for registry dependencies
-interface RegistryDependency {
-  code: string
-  registry: string
-}
-
-// Define a type for file content
-type FileContent = string | { code: string }
-
 export function usePublishDialog({ userId }: UsePublishDialogProps) {
   // Dialog state
   const [open, setOpen] = useState(false)
-  const [componentCode, setComponentCode] = useState("")
+  const [componentCode, setComponentCode] = useState("// Paste your code here")
   const [processedData, setProcessedData] = useState<any>(null)
   const [isProcessing, setIsProcessing] = useState(false)
   const [isPublishing, setIsPublishing] = useState(false)
@@ -216,6 +207,7 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
               path,
               preview: (() => {
                 const content = files[path]
+                if (!content) return "not found"
                 return (
                   (typeof content === "string" ? content : content.code).slice(
                     0,
@@ -336,6 +328,13 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
       const data = await response.json()
       setProcessedData(data)
 
+      // Set the processed component as active file
+      const newComponentPath = `/components/${data.registryType || "ui"}/${data.slug ? `${data.slug}.tsx` : "component.tsx"}`
+      handlePreviewSelect({
+        type: "regular",
+        filePath: newComponentPath,
+      })
+
       // If we have shadcn component dependencies, resolve them
       if (data.shadcnComponentsImports?.length > 0) {
         const slugs = data.shadcnComponentsImports.map(
diff --git a/apps/web/components/features/studio/component-editor/unknown-component-view.tsx b/apps/web/components/features/studio/component-editor/unknown-component-view.tsx
index 876955f9..2297df9e 100644
--- a/apps/web/components/features/studio/component-editor/unknown-component-view.tsx
+++ b/apps/web/components/features/studio/component-editor/unknown-component-view.tsx
@@ -1,14 +1,14 @@
 import { cn } from "@/lib/utils"
 
-interface CustomComponentViewProps {
+interface UnknownComponentViewProps {
   componentName: string
   className?: string
 }
 
-export function CustomComponentView({
+export function UnknownComponentView({
   componentName,
   className,
-}: CustomComponentViewProps) {
+}: UnknownComponentViewProps) {
   return (
     <div
       className={cn(
@@ -16,7 +16,7 @@ export function CustomComponentView({
         className,
       )}
     >
-      <div className="text-2xl font-semibold mb-4">Custom Component</div>
+      <div className="text-2xl font-semibold mb-4">Unknown Component</div>
       <div className="text-xl text-muted-foreground">{componentName}</div>
     </div>
   )

From 107523545959ce40730d9b7bedc467654b512ac8 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Fri, 4 Apr 2025 16:17:27 +0300
Subject: [PATCH 030/143] atoms

---
 .../studio/component-editor/code-manager.tsx  | 42 +++++++++++++------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/apps/web/components/features/studio/component-editor/code-manager.tsx b/apps/web/components/features/studio/component-editor/code-manager.tsx
index 2511be65..4c1b1ca0 100644
--- a/apps/web/components/features/studio/component-editor/code-manager.tsx
+++ b/apps/web/components/features/studio/component-editor/code-manager.tsx
@@ -1,6 +1,11 @@
-import React, { createContext, useContext, useEffect, useState } from "react"
+import React, { createContext, useContext, useEffect } from "react"
+import { atom, useAtom } from "jotai"
 import { useSandpack } from "@codesandbox/sandpack-react"
 
+// Define atoms for state management (single source of truth)
+export const activeFileAtom = atom<string | null>(null)
+export const userModifiedFilesAtom = atom<Record<string, boolean>>({})
+
 // Define the types for our context
 interface CodeManagerContextType {
   // File operations
@@ -10,7 +15,7 @@ interface CodeManagerContextType {
   renameFile: (from: string, to: string) => void
   deleteFile: (path: string) => void
 
-  // File state
+  // File state (derived from atoms)
   activeFile: string | null
   selectFile: (path: string) => void
 
@@ -33,6 +38,18 @@ export function useCodeManager() {
   return context
 }
 
+// Simple hook to access atom state directly
+export function useEditorFile() {
+  const [activeFile, setActiveFile] = useAtom(activeFileAtom)
+  const [userModifiedFiles] = useAtom(userModifiedFilesAtom)
+
+  return {
+    activeFile,
+    setActiveFile,
+    isFileModified: (path: string) => userModifiedFiles[path] || false,
+  }
+}
+
 interface CodeManagerProviderProps {
   children: React.ReactNode
   initialComponentPath: string
@@ -48,13 +65,12 @@ export function CodeManagerProvider({
   onFileContentChange,
   isUnknownComponentFn = () => false,
 }: CodeManagerProviderProps) {
+  // Use atoms directly in the context
   const { sandpack } = useSandpack()
-  const [activeFile, setActiveFile] = useState<string | null>(
-    initialComponentPath,
+  const [activeFile, setActiveFile] = useAtom(activeFileAtom)
+  const [userModifiedFiles, setUserModifiedFiles] = useAtom(
+    userModifiedFilesAtom,
   )
-  const [userModifiedFiles, setUserModifiedFiles] = useState<
-    Record<string, boolean>
-  >({})
 
   // Initialize with the main component file
   useEffect(() => {
@@ -83,6 +99,7 @@ export function CodeManagerProvider({
       sandpack.setActiveFile(path)
     }
 
+    // Update atom state
     setActiveFile(path)
   }
 
@@ -101,7 +118,7 @@ export function CodeManagerProvider({
       return
     }
 
-    // Mark this file as user-modified
+    // Mark this file as user-modified in atom state
     setUserModifiedFiles((prev) => ({ ...prev, [path]: true }))
 
     sandpack.updateFile(path, content)
@@ -176,8 +193,8 @@ export function CodeManagerProvider({
     if (activeFile === path) {
       // Select another file
       const files = Object.keys(sandpack.files)
-      if (files.length > 0) {
-        selectFile(files[0] as string)
+      if (files.length > 0 && files[0]) {
+        selectFile(files[0])
       } else {
         setActiveFile(null)
       }
@@ -193,6 +210,7 @@ export function CodeManagerProvider({
     return nonShadcnComponents?.find((comp) => comp.path === path)?.name
   }
 
+  // The context now just passes through the atom state + operations
   const value: CodeManagerContextType = {
     // File operations
     getFileContent,
@@ -202,8 +220,8 @@ export function CodeManagerProvider({
     deleteFile,
 
     // File state
-    activeFile,
-    selectFile,
+    activeFile, // From atom
+    selectFile, // Updates atom
 
     // File types and management
     isUnknownComponent,

From c4ec33bc99de5d41d0cf826a049339cc3c536ec8 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Fri, 4 Apr 2025 16:45:39 +0300
Subject: [PATCH 031/143] refactor

---
 .../web/app/studio/[username]/page.client.tsx |  10 +-
 .../code-manager.tsx                          |   0
 .../component-publish-dialog.tsx}             |  27 +-
 .../studio/editor/context/editor-state.tsx    | 240 ++++++++++++++
 .../editor-code-panel.tsx}                    |  33 +-
 .../editor.tsx}                               |  20 +-
 .../fallback-component-view.tsx}              |   6 +-
 .../file-explorer.tsx                         |   9 +-
 .../hooks/use-editor-dialog.ts                |   0
 .../sandpack-files.ts                         |   0
 .../studio/editor/utils/sandpack-config.ts    | 294 ++++++++++++++++++
 .../features/studio/layout/studio-layout.tsx  |  26 --
 .../features/studio/studio-layout.tsx         |   2 +-
 .../studio/{ => ui}/components-table.tsx      |   0
 .../{layout => ui}/studio-navigation.tsx      |   0
 .../studio/{ => ui}/studio-sidebar.tsx        |   0
 16 files changed, 604 insertions(+), 63 deletions(-)
 rename apps/web/components/features/studio/{component-editor => editor}/code-manager.tsx (100%)
 rename apps/web/components/features/studio/{component-editor/editor-dialog.tsx => editor/component-publish-dialog.tsx} (94%)
 create mode 100644 apps/web/components/features/studio/editor/context/editor-state.tsx
 rename apps/web/components/features/studio/{component-editor/code-editor.tsx => editor/editor-code-panel.tsx} (67%)
 rename apps/web/components/features/studio/{component-editor/code-editor-component.tsx => editor/editor.tsx} (87%)
 rename apps/web/components/features/studio/{component-editor/unknown-component-view.tsx => editor/fallback-component-view.tsx} (79%)
 rename apps/web/components/features/studio/{component-editor => editor}/file-explorer.tsx (97%)
 rename apps/web/components/features/studio/{component-editor => editor}/hooks/use-editor-dialog.ts (100%)
 rename apps/web/components/features/studio/{component-editor => editor}/sandpack-files.ts (100%)
 create mode 100644 apps/web/components/features/studio/editor/utils/sandpack-config.ts
 delete mode 100644 apps/web/components/features/studio/layout/studio-layout.tsx
 rename apps/web/components/features/studio/{ => ui}/components-table.tsx (100%)
 rename apps/web/components/features/studio/{layout => ui}/studio-navigation.tsx (100%)
 rename apps/web/components/features/studio/{ => ui}/studio-sidebar.tsx (100%)

diff --git a/apps/web/app/studio/[username]/page.client.tsx b/apps/web/app/studio/[username]/page.client.tsx
index 8e04f599..bcd8b922 100644
--- a/apps/web/app/studio/[username]/page.client.tsx
+++ b/apps/web/app/studio/[username]/page.client.tsx
@@ -1,9 +1,9 @@
 "use client"
 
 import { User, DemoWithComponent } from "@/types/global"
-import { StudioLayout } from "@/components/features/studio/layout/studio-layout"
-import { DemosTable } from "@/components/features/studio/components-table"
-import { EditorDialog } from "@/components/features/studio/component-editor/editor-dialog"
+import { StudioLayout } from "@/components/features/studio/studio-layout"
+import { DemosTable } from "@/components/features/studio/ui/components-table"
+import { ComponentPublishDialog } from "@/components/features/studio/editor/component-publish-dialog"
 import Link from "next/link"
 import { ArrowLeft } from "lucide-react"
 
@@ -34,7 +34,9 @@ export function StudioUsernameClient({
             <h1 className="text-xl font-bold">Components</h1>
           </div>
 
-          {(isOwnProfile || isAdmin) && <EditorDialog userId={user.id} />}
+          {(isOwnProfile || isAdmin) && (
+            <ComponentPublishDialog userId={user.id} />
+          )}
         </div>
 
         <DemosTable demos={demos} />
diff --git a/apps/web/components/features/studio/component-editor/code-manager.tsx b/apps/web/components/features/studio/editor/code-manager.tsx
similarity index 100%
rename from apps/web/components/features/studio/component-editor/code-manager.tsx
rename to apps/web/components/features/studio/editor/code-manager.tsx
diff --git a/apps/web/components/features/studio/component-editor/editor-dialog.tsx b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
similarity index 94%
rename from apps/web/components/features/studio/component-editor/editor-dialog.tsx
rename to apps/web/components/features/studio/editor/component-publish-dialog.tsx
index f53f2cb8..b82e4db3 100644
--- a/apps/web/components/features/studio/component-editor/editor-dialog.tsx
+++ b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
@@ -16,18 +16,20 @@ import {
   useSandpack,
 } from "@codesandbox/sandpack-react"
 
-import { CodeEditor } from "./code-editor"
-import { CustomFileExplorer } from "./file-explorer"
-import { UnknownComponentView } from "./unknown-component-view"
+import { FileExplorer } from "./file-explorer"
+import { FallbackComponentView } from "./fallback-component-view"
+import { SimpleEditor } from "./editor-code-panel"
 import { usePublishDialog } from "./hooks/use-editor-dialog"
 import React from "react"
-import { CodeEditorComponent } from "./code-editor-component"
+import { Editor } from "./editor"
 
-interface EditorDialogProps {
+interface ComponentPublishDialogProps {
   userId: string
 }
 
-export function EditorDialog({ userId }: EditorDialogProps) {
+export function ComponentPublishDialog({
+  userId,
+}: ComponentPublishDialogProps) {
   const {
     open,
     componentCode,
@@ -87,7 +89,7 @@ export function EditorDialog({ userId }: EditorDialogProps) {
           <div className="h-full min-h-[400px] overflow-hidden flex-grow">
             {/* If we have active preview and processed data, use the new CodeEditorComponent */}
             {processedData ? (
-              <CodeEditorComponent
+              <Editor
                 initialFiles={sandpackConfig.files}
                 mainComponentPath={getComponentFilePath()}
                 nonShadcnComponents={processedData?.nonShadcnComponentsImports}
@@ -290,7 +292,7 @@ function SandpackContent({
         <div className="flex w-full h-full">
           <div className="flex border-r border-border">
             {/* <FileExplorer /> */}
-            <CustomFileExplorer
+            <FileExplorer
               nonShadcnComponents={nonShadcnComponents}
               onFileSelect={handleFileSelect}
               selectedFile={activePreview?.filePath || null}
@@ -298,14 +300,13 @@ function SandpackContent({
           </div>
           <div className="flex-1">
             {activePreview?.type === "unknown" ? (
-              <UnknownComponentView
+              <FallbackComponentView
                 componentName={activePreview.componentName || ""}
               />
             ) : (
-              <CodeEditor
-                componentPath={activePreview?.filePath || componentPath}
-                onCodeChange={setComponentCode}
-              />
+              <div className="h-full w-full">
+                <SimpleEditor onChange={setComponentCode} />
+              </div>
             )}
           </div>
         </div>
diff --git a/apps/web/components/features/studio/editor/context/editor-state.tsx b/apps/web/components/features/studio/editor/context/editor-state.tsx
new file mode 100644
index 00000000..4c1b1ca0
--- /dev/null
+++ b/apps/web/components/features/studio/editor/context/editor-state.tsx
@@ -0,0 +1,240 @@
+import React, { createContext, useContext, useEffect } from "react"
+import { atom, useAtom } from "jotai"
+import { useSandpack } from "@codesandbox/sandpack-react"
+
+// Define atoms for state management (single source of truth)
+export const activeFileAtom = atom<string | null>(null)
+export const userModifiedFilesAtom = atom<Record<string, boolean>>({})
+
+// Define the types for our context
+interface CodeManagerContextType {
+  // File operations
+  getFileContent: (path: string) => string | undefined
+  updateFileContent: (path: string, content: string) => void
+  addFile: (path: string, content: string) => void
+  renameFile: (from: string, to: string) => void
+  deleteFile: (path: string) => void
+
+  // File state (derived from atoms)
+  activeFile: string | null
+  selectFile: (path: string) => void
+
+  // File types and management
+  isUnknownComponent: (path: string) => boolean
+  getComponentName: (path: string) => string | undefined
+
+  // File metadata
+  allFiles: string[]
+  nonShadcnComponents: Array<{ name: string; path: string }> | undefined
+}
+
+const CodeManagerContext = createContext<CodeManagerContextType | null>(null)
+
+export function useCodeManager() {
+  const context = useContext(CodeManagerContext)
+  if (!context) {
+    throw new Error("useCodeManager must be used within a CodeManagerProvider")
+  }
+  return context
+}
+
+// Simple hook to access atom state directly
+export function useEditorFile() {
+  const [activeFile, setActiveFile] = useAtom(activeFileAtom)
+  const [userModifiedFiles] = useAtom(userModifiedFilesAtom)
+
+  return {
+    activeFile,
+    setActiveFile,
+    isFileModified: (path: string) => userModifiedFiles[path] || false,
+  }
+}
+
+interface CodeManagerProviderProps {
+  children: React.ReactNode
+  initialComponentPath: string
+  nonShadcnComponents?: Array<{ name: string; path: string }>
+  onFileContentChange?: (path: string, content: string) => void
+  isUnknownComponentFn?: (path: string) => boolean
+}
+
+export function CodeManagerProvider({
+  children,
+  initialComponentPath,
+  nonShadcnComponents = [],
+  onFileContentChange,
+  isUnknownComponentFn = () => false,
+}: CodeManagerProviderProps) {
+  // Use atoms directly in the context
+  const { sandpack } = useSandpack()
+  const [activeFile, setActiveFile] = useAtom(activeFileAtom)
+  const [userModifiedFiles, setUserModifiedFiles] = useAtom(
+    userModifiedFilesAtom,
+  )
+
+  // Initialize with the main component file
+  useEffect(() => {
+    if (initialComponentPath && !activeFile) {
+      selectFile(initialComponentPath)
+    }
+  }, [initialComponentPath])
+
+  // Log state changes in development
+  useEffect(() => {
+    console.log("[CodeManager] Current state:", {
+      activeFile,
+      files: Object.keys(sandpack.files),
+      userModifiedFiles,
+    })
+  }, [sandpack.files, activeFile, userModifiedFiles])
+
+  // File selection
+  const selectFile = (path: string) => {
+    if (!path) return
+
+    console.log("[CodeManager] Selecting file:", path)
+
+    // Only update Sandpack if it's not an unknown component
+    if (!isUnknownComponentFn(path)) {
+      sandpack.setActiveFile(path)
+    }
+
+    // Update atom state
+    setActiveFile(path)
+  }
+
+  // File content operations
+  const getFileContent = (path: string) => {
+    return sandpack.files[path]?.code
+  }
+
+  const updateFileContent = (path: string, content: string) => {
+    console.log("[CodeManager] Updating file content:", path)
+
+    // Check if the content is actually different
+    const currentContent = getFileContent(path)
+    if (currentContent === content) {
+      console.log("[CodeManager] Content unchanged, skipping update:", path)
+      return
+    }
+
+    // Mark this file as user-modified in atom state
+    setUserModifiedFiles((prev) => ({ ...prev, [path]: true }))
+
+    sandpack.updateFile(path, content)
+
+    // Notify parent if needed
+    if (onFileContentChange) {
+      onFileContentChange(path, content)
+    }
+  }
+
+  const addFile = (path: string, content: string = "") => {
+    console.log("[CodeManager] Adding new file:", path)
+
+    sandpack.addFile(path, content)
+
+    // Select the newly created file
+    selectFile(path)
+  }
+
+  const renameFile = (from: string, to: string) => {
+    console.log("[CodeManager] Renaming file:", { from, to })
+
+    // Get the file content
+    const fileObj = sandpack.files[from]
+
+    // Proceed only if we have a file to rename
+    if (fileObj) {
+      // Handle both string content and SandpackFile objects
+      const content = typeof fileObj === "string" ? fileObj : fileObj.code || ""
+
+      // Create new file with the content
+      sandpack.addFile(to, content)
+
+      // Transfer user modification state
+      if (userModifiedFiles[from]) {
+        setUserModifiedFiles((prev) => {
+          const newState = { ...prev }
+          delete newState[from]
+          newState[to] = true
+          return newState
+        })
+      }
+
+      // Remove old file
+      deleteFile(from)
+
+      // Update active file if needed
+      if (activeFile === from) {
+        selectFile(to)
+      }
+    } else {
+      console.warn(`[CodeManager] Cannot rename file: File not found ${from}`)
+    }
+  }
+
+  const deleteFile = (path: string) => {
+    console.log("[CodeManager] Deleting file:", path)
+
+    // Remove from Sandpack
+    sandpack.deleteFile(path)
+
+    // Remove from user modified tracking
+    if (userModifiedFiles[path]) {
+      setUserModifiedFiles((prev) => {
+        const newState = { ...prev }
+        delete newState[path]
+        return newState
+      })
+    }
+
+    // Update active file if needed
+    if (activeFile === path) {
+      // Select another file
+      const files = Object.keys(sandpack.files)
+      if (files.length > 0 && files[0]) {
+        selectFile(files[0])
+      } else {
+        setActiveFile(null)
+      }
+    }
+  }
+
+  // Component utilities
+  const isUnknownComponent = (path: string) => {
+    return isUnknownComponentFn(path)
+  }
+
+  const getComponentName = (path: string) => {
+    return nonShadcnComponents?.find((comp) => comp.path === path)?.name
+  }
+
+  // The context now just passes through the atom state + operations
+  const value: CodeManagerContextType = {
+    // File operations
+    getFileContent,
+    updateFileContent,
+    addFile,
+    renameFile,
+    deleteFile,
+
+    // File state
+    activeFile, // From atom
+    selectFile, // Updates atom
+
+    // File types and management
+    isUnknownComponent,
+    getComponentName,
+
+    // File metadata
+    allFiles: Object.keys(sandpack.files),
+    nonShadcnComponents,
+  }
+
+  return (
+    <CodeManagerContext.Provider value={value}>
+      {children}
+    </CodeManagerContext.Provider>
+  )
+}
diff --git a/apps/web/components/features/studio/component-editor/code-editor.tsx b/apps/web/components/features/studio/editor/editor-code-panel.tsx
similarity index 67%
rename from apps/web/components/features/studio/component-editor/code-editor.tsx
rename to apps/web/components/features/studio/editor/editor-code-panel.tsx
index 5f5b40e7..7ce3c66d 100644
--- a/apps/web/components/features/studio/component-editor/code-editor.tsx
+++ b/apps/web/components/features/studio/editor/editor-code-panel.tsx
@@ -4,14 +4,17 @@ import {
   useActiveCode,
   useSandpack,
 } from "@codesandbox/sandpack-react"
-import { useCodeManager } from "./code-manager"
+import { useCodeManager } from "./context/editor-state"
 
-interface CodeEditorProps {
+interface EditorCodePanelProps {
   onCodeChange?: (code: string) => void
   componentPath: string
 }
 
-export function CodeEditor({ onCodeChange, componentPath }: CodeEditorProps) {
+export function EditorCodePanel({
+  onCodeChange,
+  componentPath,
+}: EditorCodePanelProps) {
   const { code } = useActiveCode()
   const { sandpack } = useSandpack()
   const prevCodeRef = useRef<string>(undefined)
@@ -65,3 +68,27 @@ export function CodeEditor({ onCodeChange, componentPath }: CodeEditorProps) {
     />
   )
 }
+
+interface SimpleEditorProps {
+  onChange?: (code: string) => void
+}
+
+export function SimpleEditor({ onChange }: SimpleEditorProps) {
+  const { code, updateCode } = useActiveCode()
+
+  useEffect(() => {
+    if (onChange && code) {
+      onChange(code)
+    }
+  }, [code, onChange])
+
+  return (
+    <SandpackCodeEditor
+      showTabs={false}
+      showLineNumbers={true}
+      showInlineErrors={true}
+      className="h-full"
+      style={{ height: "100%" }}
+    />
+  )
+}
diff --git a/apps/web/components/features/studio/component-editor/code-editor-component.tsx b/apps/web/components/features/studio/editor/editor.tsx
similarity index 87%
rename from apps/web/components/features/studio/component-editor/code-editor-component.tsx
rename to apps/web/components/features/studio/editor/editor.tsx
index b3ad21df..287c882f 100644
--- a/apps/web/components/features/studio/component-editor/code-editor-component.tsx
+++ b/apps/web/components/features/studio/editor/editor.tsx
@@ -4,12 +4,12 @@ import {
   SandpackLayout,
   SandpackFiles,
 } from "@codesandbox/sandpack-react"
-import { CodeManagerProvider, useCodeManager } from "./code-manager"
-import { CodeEditor } from "./code-editor"
-import { CustomFileExplorer } from "./file-explorer"
-import { UnknownComponentView } from "./unknown-component-view"
+import { CodeManagerProvider, useCodeManager } from "./context/editor-state"
+import { EditorCodePanel } from "./editor-code-panel"
+import { FileExplorer } from "./file-explorer"
+import { FallbackComponentView } from "./fallback-component-view"
 
-interface CodeEditorComponentProps {
+interface EditorProps {
   initialFiles: SandpackFiles
   mainComponentPath: string
   nonShadcnComponents?: Array<{ name: string; path: string }>
@@ -21,7 +21,7 @@ interface CodeEditorComponentProps {
   visiblePaths?: string[]
 }
 
-export function CodeEditorComponent({
+export function Editor({
   initialFiles,
   mainComponentPath,
   nonShadcnComponents = [],
@@ -31,7 +31,7 @@ export function CodeEditorComponent({
   sandpackTemplate = "react-ts",
   dependencies = {},
   visiblePaths,
-}: CodeEditorComponentProps) {
+}: EditorProps) {
   // Setup sandpack configuration
   const sandpackConfig = {
     files: initialFiles,
@@ -89,7 +89,7 @@ function EditorContent({ visiblePaths }: EditorContentProps) {
     <SandpackLayout style={{ height: "100%", border: "none" }}>
       <div className="flex w-full h-full">
         <div className="flex border-r border-border">
-          <CustomFileExplorer
+          <FileExplorer
             nonShadcnComponents={nonShadcnComponents}
             onFileSelect={handleFileSelect}
             selectedFile={activeFile}
@@ -98,11 +98,11 @@ function EditorContent({ visiblePaths }: EditorContentProps) {
         </div>
         <div className="flex-1">
           {activeFile && isUnknownComponent(activeFile) ? (
-            <UnknownComponentView
+            <FallbackComponentView
               componentName={getComponentName(activeFile) || "Component"}
             />
           ) : (
-            <CodeEditor
+            <EditorCodePanel
               componentPath={activeFile || ""}
               onCodeChange={() => {
                 // This will be handled by the CodeManager through the CodeEditor component
diff --git a/apps/web/components/features/studio/component-editor/unknown-component-view.tsx b/apps/web/components/features/studio/editor/fallback-component-view.tsx
similarity index 79%
rename from apps/web/components/features/studio/component-editor/unknown-component-view.tsx
rename to apps/web/components/features/studio/editor/fallback-component-view.tsx
index 2297df9e..f6135d96 100644
--- a/apps/web/components/features/studio/component-editor/unknown-component-view.tsx
+++ b/apps/web/components/features/studio/editor/fallback-component-view.tsx
@@ -1,14 +1,14 @@
 import { cn } from "@/lib/utils"
 
-interface UnknownComponentViewProps {
+interface FallbackComponentViewProps {
   componentName: string
   className?: string
 }
 
-export function UnknownComponentView({
+export function FallbackComponentView({
   componentName,
   className,
-}: UnknownComponentViewProps) {
+}: FallbackComponentViewProps) {
   return (
     <div
       className={cn(
diff --git a/apps/web/components/features/studio/component-editor/file-explorer.tsx b/apps/web/components/features/studio/editor/file-explorer.tsx
similarity index 97%
rename from apps/web/components/features/studio/component-editor/file-explorer.tsx
rename to apps/web/components/features/studio/editor/file-explorer.tsx
index 4ad1e483..eb331e79 100644
--- a/apps/web/components/features/studio/component-editor/file-explorer.tsx
+++ b/apps/web/components/features/studio/editor/file-explorer.tsx
@@ -18,7 +18,7 @@ interface FileTreeItem {
   isUnknownComponent?: boolean
 }
 
-export interface CustomFileExplorerProps {
+export interface FileExplorerProps {
   nonShadcnComponents?: Array<{ name: string; path: string }>
   onFileSelect?: (path: string) => void
   selectedFile?: string | null
@@ -229,12 +229,15 @@ function FileTreeNode({
   )
 }
 
-export function CustomFileExplorer({
+/**
+ * FileExplorer component that renders a tree view of files in the SandpackProvider context
+ */
+export function FileExplorer({
   nonShadcnComponents = [],
   onFileSelect,
   selectedFile,
   visibleFiles,
-}: CustomFileExplorerProps) {
+}: FileExplorerProps) {
   const { sandpack } = useSandpack()
   const { visibleFiles: sandpackVisibleFiles } = sandpack
 
diff --git a/apps/web/components/features/studio/component-editor/hooks/use-editor-dialog.ts b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
similarity index 100%
rename from apps/web/components/features/studio/component-editor/hooks/use-editor-dialog.ts
rename to apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
diff --git a/apps/web/components/features/studio/component-editor/sandpack-files.ts b/apps/web/components/features/studio/editor/sandpack-files.ts
similarity index 100%
rename from apps/web/components/features/studio/component-editor/sandpack-files.ts
rename to apps/web/components/features/studio/editor/sandpack-files.ts
diff --git a/apps/web/components/features/studio/editor/utils/sandpack-config.ts b/apps/web/components/features/studio/editor/utils/sandpack-config.ts
new file mode 100644
index 00000000..6e48a9ff
--- /dev/null
+++ b/apps/web/components/features/studio/editor/utils/sandpack-config.ts
@@ -0,0 +1,294 @@
+import type { SandpackFiles } from "@codesandbox/sandpack-react"
+import { defaultGlobalCss, defaultTailwindConfig } from "@/lib/sandpack"
+
+interface GenerateFilesOptions {
+  componentPath: string
+  componentCode: string
+  processedData: any | null
+  dependencies?: Record<string, string>
+  customTailwindConfig?: string | null
+  customGlobalCss?: string | null
+}
+
+export function generateSandpackFiles({
+  componentPath,
+  componentCode,
+  processedData,
+  dependencies = {},
+  customTailwindConfig = null,
+  customGlobalCss = null,
+}: GenerateFilesOptions): SandpackFiles {
+  const files: SandpackFiles = {
+    [componentPath]: {
+      code: componentCode,
+    },
+    "/package.json": {
+      code: JSON.stringify(
+        {
+          name: "component-project",
+          dependencies: {
+            react: "^18.2.0",
+            "react-dom": "^18.2.0",
+            "@radix-ui/react-select": "^2.0.0",
+            "lucide-react": "^0.363.0",
+            clsx: "^2.1.0",
+            "tailwind-merge": "^2.1.0",
+            ...dependencies,
+          },
+        },
+        null,
+        2,
+      ),
+    },
+    "/index.html": {
+      code: `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Component Preview</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>`,
+    },
+    "/index.tsx": {
+      code: `import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "./globals.css";
+
+const rootElement = document.getElementById("root");
+const root = createRoot(rootElement!);
+
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);`,
+    },
+    "/globals.css": {
+      code: customGlobalCss || defaultGlobalCss,
+    },
+    "/tsconfig.json": {
+      code: JSON.stringify(
+        {
+          compilerOptions: {
+            jsx: "react-jsx",
+            esModuleInterop: true,
+            baseUrl: ".",
+            paths: {
+              "@/*": ["./*"],
+            },
+          },
+        },
+        null,
+        2,
+      ),
+    },
+    "/App.tsx": {
+      code: processedData
+        ? `import { ThemeProvider } from "./theme-provider";
+import ${processedData.componentName || "Component"} from "./components/${
+            processedData.registryType || "ui"
+          }/${processedData.slug?.replace(".tsx", "") || "component"}";
+
+export default function App() {
+  return (
+    <ThemeProvider defaultTheme="light" storageKey="sandpack-theme">
+      <div className="container">
+        <${processedData.componentName || "Component"} />
+      </div>
+    </ThemeProvider>
+  );
+}`
+        : `import { ThemeProvider } from "./theme-provider";
+import Component from "${componentPath.replace(".tsx", "")}";
+
+export default function App() {
+  return (
+    <ThemeProvider defaultTheme="light" storageKey="sandpack-theme">
+      <div className="container">
+        <Component />
+      </div>
+    </ThemeProvider>
+  );
+}`,
+    },
+    "/theme-provider.tsx": {
+      code: `import * as React from "react"
+
+const ThemeContext = React.createContext({
+  theme: "light",
+  setTheme: (theme: string) => {},
+  resolvedTheme: "light",
+});
+
+export const useTheme = () => React.useContext(ThemeContext);
+
+export const ThemeProvider = ({ children, defaultTheme = 'light', enableSystem = false }) => {
+  const [theme, setTheme] = React.useState(defaultTheme);
+
+  React.useEffect(() => {
+    const root = window.document.documentElement;
+    root.classList.remove('light', 'dark');
+    root.classList.add(theme);
+  }, [theme]);
+
+  const resolvedTheme = theme === 'system' ? 'light' : theme;
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, resolvedTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};`,
+    },
+    "/lib/utils.ts": {
+      code: `import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}`,
+    },
+    "/tailwind.config.js": {
+      code: customTailwindConfig || defaultTailwindConfig,
+    },
+    "/node_modules/next/package.json": {
+      code: `{
+  "name": "next",
+  "version": "latest",
+  "main": "index.js"
+}`,
+    },
+    "/node_modules/next/index.js": {
+      code: `export { default as Image } from './image';
+export { default as Link } from './link';
+export { useRouter, RouterProvider, usePathname } from './router';
+export { default as Head } from './head';
+export { default as Script } from './script';
+export { default as dynamic } from './dynamic';
+export { Roboto } from './font';
+export { default as Document } from './document';`,
+    },
+    "/node_modules/next/image.js": {
+      code: `import React from 'react';
+      
+const Image = ({ src, alt, width, height, ...props }) => (
+  <img src={src} alt={alt} width={width} height={height} {...props} />
+);
+
+export default Image;`,
+    },
+    "/node_modules/next/link.js": {
+      code: `import React from 'react';
+      
+const Link = ({ href, children, ...props }) => (
+  <a href={href} {...props}>{children}</a>
+);
+
+export default Link;`,
+    },
+    "/node_modules/next/head.js": {
+      code: `import React from 'react';
+      
+const Head = ({ children }) => {
+  return <div>{children}</div>;
+};
+
+export default Head;`,
+    },
+    "/node_modules/next/script.js": {
+      code: `import React from 'react';
+      
+const Script = ({ src, strategy, children, ...props }) => {
+  return <script src={src} {...props}>{children}</script>;
+};
+
+export default Script;`,
+    },
+    "/node_modules/next/router.js": {
+      code: `import React, { createContext, useContext } from 'react';
+      
+const RouterContext = createContext({
+  pathname: '/',
+  push: (url) => {},
+  replace: (url) => {},
+});
+
+export const useRouter = () => useContext(RouterContext);
+
+export const usePathname = () => {
+  const router = useRouter();
+  return router.pathname;
+};
+
+export const RouterProvider = ({ children }) => {
+  const router = {
+    pathname: '/',
+    push: (url) => {
+      console.log(\`Navigating to \${url}\`);
+    },
+    replace: (url) => {
+      console.log(\`Replacing with \${url}\`);
+    },
+  };
+  
+  return (
+    <RouterContext.Provider value={router}>
+      {children}
+    </RouterContext.Provider>
+  );
+};`,
+    },
+    "/node_modules/next/dynamic.js": {
+      code: `import React, { Suspense } from 'react';
+      
+const dynamic = (importFunc, options = {}) => {
+  const { ssr = true, loading: LoadingComponent = () => <div>Loading...</div> } = options;
+  
+  const LazyComponent = React.lazy(importFunc);
+  
+  return (props) => (
+    <Suspense fallback={<LoadingComponent />}>
+      <LazyComponent {...props} />
+    </Suspense>
+  );
+};
+
+export default dynamic;`,
+    },
+    "/node_modules/next/font.js": {
+      code: `export const Roboto = {
+  className: 'font-roboto',
+};`,
+    },
+    "/node_modules/next/document.js": {
+      code: `import React from 'react';
+
+const Html = ({ children, ...props }) => <html {...props}>{children}</html>;
+const Head = ({ children }) => <head>{children}</head>;
+const Main = () => <div id="__next"></div>;
+const NextScript = () => <script />;
+
+export default function Document() {
+  return (
+    <Html>
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}`,
+    },
+    "/node_modules/next/navigation.js": {
+      code: `export { usePathname } from './router';`,
+    },
+  }
+
+  return files
+}
diff --git a/apps/web/components/features/studio/layout/studio-layout.tsx b/apps/web/components/features/studio/layout/studio-layout.tsx
deleted file mode 100644
index e167a301..00000000
--- a/apps/web/components/features/studio/layout/studio-layout.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-"use client"
-
-import { Header } from "@/components/ui/header.client"
-import { StudioSidebar } from "./studio-navigation"
-import { User } from "@/types/global"
-import { ReactNode } from "react"
-import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
-
-interface StudioLayoutProps {
-  user: User
-  children: ReactNode
-}
-
-export function StudioLayout({ user, children }: StudioLayoutProps) {
-  return (
-    <div className="min-h-screen flex flex-col">
-      <Header />
-      <div className="flex-1 pt-14">
-        <SidebarProvider defaultOpen={true}>
-          <StudioSidebar user={user} />
-          <SidebarInset className="p-8">{children}</SidebarInset>
-        </SidebarProvider>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/web/components/features/studio/studio-layout.tsx b/apps/web/components/features/studio/studio-layout.tsx
index 5487b343..f741a730 100644
--- a/apps/web/components/features/studio/studio-layout.tsx
+++ b/apps/web/components/features/studio/studio-layout.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { Header } from "@/components/ui/header.client"
-import { StudioSidebar } from "./studio-sidebar"
+import { StudioSidebar } from "./ui/studio-sidebar"
 import { User } from "@/types/global"
 import { ReactNode } from "react"
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
diff --git a/apps/web/components/features/studio/components-table.tsx b/apps/web/components/features/studio/ui/components-table.tsx
similarity index 100%
rename from apps/web/components/features/studio/components-table.tsx
rename to apps/web/components/features/studio/ui/components-table.tsx
diff --git a/apps/web/components/features/studio/layout/studio-navigation.tsx b/apps/web/components/features/studio/ui/studio-navigation.tsx
similarity index 100%
rename from apps/web/components/features/studio/layout/studio-navigation.tsx
rename to apps/web/components/features/studio/ui/studio-navigation.tsx
diff --git a/apps/web/components/features/studio/studio-sidebar.tsx b/apps/web/components/features/studio/ui/studio-sidebar.tsx
similarity index 100%
rename from apps/web/components/features/studio/studio-sidebar.tsx
rename to apps/web/components/features/studio/ui/studio-sidebar.tsx

From 0f162414a0988082c9ac26659d2b1574ead7d060 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Fri, 4 Apr 2025 17:32:51 +0300
Subject: [PATCH 032/143] show shadcn component loading

---
 .../editor/component-publish-dialog.tsx       | 147 +++++++++++-------
 .../studio/editor/context/editor-state.tsx    |  21 ++-
 .../features/studio/editor/editor.tsx         |  52 ++++++-
 .../features/studio/editor/file-explorer.tsx  |  81 ++++++++--
 .../studio/editor/hooks/use-editor-dialog.ts  |  38 +++++
 apps/web/components/icons/shadcn-file.tsx     |  47 ++++++
 apps/web/lib/shadcn-components.ts             |  60 +++++++
 7 files changed, 372 insertions(+), 74 deletions(-)
 create mode 100644 apps/web/components/icons/shadcn-file.tsx
 create mode 100644 apps/web/lib/shadcn-components.ts

diff --git a/apps/web/components/features/studio/editor/component-publish-dialog.tsx b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
index b82e4db3..25b767c9 100644
--- a/apps/web/components/features/studio/editor/component-publish-dialog.tsx
+++ b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
@@ -18,10 +18,11 @@ import {
 
 import { FileExplorer } from "./file-explorer"
 import { FallbackComponentView } from "./fallback-component-view"
-import { SimpleEditor } from "./editor-code-panel"
+import { SimpleEditor, EditorCodePanel } from "./editor-code-panel"
 import { usePublishDialog } from "./hooks/use-editor-dialog"
 import React from "react"
 import { Editor } from "./editor"
+import { CodeManagerProvider } from "./context/editor-state"
 
 interface ComponentPublishDialogProps {
   userId: string
@@ -36,6 +37,7 @@ export function ComponentPublishDialog({
     processedData,
     isProcessing,
     activePreview,
+    loadingShadcnComponents,
     handleOpenChange,
     handleProcessComponent,
     handlePreviewSelect,
@@ -45,6 +47,38 @@ export function ComponentPublishDialog({
     isUnknownComponent,
   } = usePublishDialog({ userId })
 
+  // Simplified useEffect just for logging
+  React.useEffect(() => {
+    if (loadingShadcnComponents.length > 0) {
+      console.log(
+        "[ComponentPublishDialog] Active loading components detected:",
+        loadingShadcnComponents,
+      )
+
+      // Check if our loadingShadcnComponents has paths that match any existing files
+      if (processedData?.shadcnComponentsImports) {
+        const matchingFiles = processedData.shadcnComponentsImports
+          .filter((comp: any) => {
+            const path = `/components/ui/${comp.name.toLowerCase()}.tsx`
+            const isLoading = loadingShadcnComponents.includes(path)
+            console.log(
+              `[ComponentPublishDialog] Component ${comp.name} loading status:`,
+              isLoading,
+            )
+            return isLoading
+          })
+          .map((comp: any) => comp.name)
+
+        if (matchingFiles.length > 0) {
+          console.log(
+            "[ComponentPublishDialog] Currently loading components:",
+            matchingFiles,
+          )
+        }
+      }
+    }
+  }, [loadingShadcnComponents, processedData])
+
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
@@ -89,31 +123,36 @@ export function ComponentPublishDialog({
           <div className="h-full min-h-[400px] overflow-hidden flex-grow">
             {/* If we have active preview and processed data, use the new CodeEditorComponent */}
             {processedData ? (
-              <Editor
-                initialFiles={sandpackConfig.files}
-                mainComponentPath={getComponentFilePath()}
-                nonShadcnComponents={processedData?.nonShadcnComponentsImports}
-                onCodeChange={(path, content) => {
-                  if (path === getComponentFilePath()) {
-                    setComponentCode(content)
+              <SandpackProvider {...sandpackConfig}>
+                <Editor
+                  initialFiles={sandpackConfig.files}
+                  mainComponentPath={getComponentFilePath()}
+                  nonShadcnComponents={
+                    processedData?.nonShadcnComponentsImports
+                  }
+                  onCodeChange={(path: string, content: string) => {
+                    if (path === getComponentFilePath()) {
+                      setComponentCode(content)
+                    }
+                  }}
+                  isUnknownComponentFn={isUnknownComponent}
+                  activePath={activePreview?.filePath}
+                  sandpackTemplate={sandpackConfig.template}
+                  dependencies={sandpackConfig.customSetup?.dependencies}
+                  visiblePaths={
+                    Array.isArray(sandpackConfig.options?.visibleFiles)
+                      ? sandpackConfig.options.visibleFiles
+                      : [
+                          getComponentFilePath(),
+                          "/components/",
+                          "/tailwind.config.js",
+                          "/globals.css",
+                          "/package.json",
+                        ]
                   }
-                }}
-                isUnknownComponentFn={isUnknownComponent}
-                activePath={activePreview?.filePath}
-                sandpackTemplate={sandpackConfig.template}
-                dependencies={sandpackConfig.customSetup?.dependencies}
-                visiblePaths={
-                  Array.isArray(sandpackConfig.options?.visibleFiles)
-                    ? sandpackConfig.options.visibleFiles
-                    : [
-                        getComponentFilePath(),
-                        "/components/",
-                        "/tailwind.config.js",
-                        "/globals.css",
-                        "/package.json",
-                      ]
-                }
-              />
+                  loadingFiles={loadingShadcnComponents}
+                />
+              </SandpackProvider>
             ) : (
               /* Otherwise use the original SandpackContent */
               <SandpackProvider {...sandpackConfig}>
@@ -126,6 +165,7 @@ export function ComponentPublishDialog({
                   getComponentFilePath={getComponentFilePath}
                   setComponentCode={setComponentCode}
                   isUnknownComponent={isUnknownComponent}
+                  loadingFiles={loadingShadcnComponents}
                 />
               </SandpackProvider>
             )}
@@ -151,6 +191,7 @@ interface SandpackContentProps {
   getComponentFilePath: () => string
   setComponentCode: (code: string) => void
   isUnknownComponent: (path: string) => boolean
+  loadingFiles?: string[]
 }
 
 function SandpackContent({
@@ -160,6 +201,7 @@ function SandpackContent({
   getComponentFilePath,
   setComponentCode,
   isUnknownComponent,
+  loadingFiles = [],
 }: SandpackContentProps) {
   const { sandpack } = useSandpack()
   const componentPath = getComponentFilePath()
@@ -246,19 +288,11 @@ function SandpackContent({
         fileContent: sandpack.files[path]?.code?.slice(0, 50) + "...",
       })
       // Set as regular file type preview
+      sandpack.setActiveFile(path)
       onPreviewSelect({
         type: "regular",
         filePath: path,
       })
-
-      // Update the Sandpack editor file
-      console.log("[EditorDialog] Updating Sandpack editor file to:", {
-        from: sandpack.activeFile,
-        to: path,
-        hasFileContent: Boolean(sandpack.files[path]?.code),
-        stackTrace: new Error().stack,
-      })
-      sandpack.setActiveFile(path)
     }
   }
 
@@ -284,33 +318,26 @@ function SandpackContent({
   }, [activePreview, sandpack.activeFile, sandpack.files])
 
   return (
-    <>
-      <div className="absolute bottom-2 right-2">
-        <OpenInCodeSandboxButton />
-      </div>
-      <SandpackLayout style={{ height: "100%" }}>
-        <div className="flex w-full h-full">
-          <div className="flex border-r border-border">
-            {/* <FileExplorer /> */}
-            <FileExplorer
-              nonShadcnComponents={nonShadcnComponents}
-              onFileSelect={handleFileSelect}
-              selectedFile={activePreview?.filePath || null}
+    <SandpackLayout style={{ height: "100%", border: "none" }}>
+      <div className="flex w-full h-full">
+        <div className="flex border-r border-border">
+          <FileExplorer
+            nonShadcnComponents={nonShadcnComponents}
+            onFileSelect={handleFileSelect}
+            selectedFile={activePreview?.filePath || componentPath}
+            loadingFiles={loadingFiles}
+          />
+        </div>
+        <div className="flex-1">
+          {activePreview && isUnknownComponent(activePreview.filePath) ? (
+            <FallbackComponentView
+              componentName={activePreview.componentName || "Component"}
             />
-          </div>
-          <div className="flex-1">
-            {activePreview?.type === "unknown" ? (
-              <FallbackComponentView
-                componentName={activePreview.componentName || ""}
-              />
-            ) : (
-              <div className="h-full w-full">
-                <SimpleEditor onChange={setComponentCode} />
-              </div>
-            )}
-          </div>
+          ) : (
+            <SimpleEditor onChange={setComponentCode} />
+          )}
         </div>
-      </SandpackLayout>
-    </>
+      </div>
+    </SandpackLayout>
   )
 }
diff --git a/apps/web/components/features/studio/editor/context/editor-state.tsx b/apps/web/components/features/studio/editor/context/editor-state.tsx
index 4c1b1ca0..87158cde 100644
--- a/apps/web/components/features/studio/editor/context/editor-state.tsx
+++ b/apps/web/components/features/studio/editor/context/editor-state.tsx
@@ -5,6 +5,7 @@ import { useSandpack } from "@codesandbox/sandpack-react"
 // Define atoms for state management (single source of truth)
 export const activeFileAtom = atom<string | null>(null)
 export const userModifiedFilesAtom = atom<Record<string, boolean>>({})
+export const loadingComponentsAtom = atom<string[]>([])
 
 // Define the types for our context
 interface CodeManagerContextType {
@@ -26,6 +27,10 @@ interface CodeManagerContextType {
   // File metadata
   allFiles: string[]
   nonShadcnComponents: Array<{ name: string; path: string }> | undefined
+
+  // Loading state
+  loadingComponents: string[]
+  setLoadingComponents: (paths: string[]) => void
 }
 
 const CodeManagerContext = createContext<CodeManagerContextType | null>(null)
@@ -71,6 +76,9 @@ export function CodeManagerProvider({
   const [userModifiedFiles, setUserModifiedFiles] = useAtom(
     userModifiedFilesAtom,
   )
+  const [loadingComponents, setLoadingComponents] = useAtom(
+    loadingComponentsAtom,
+  )
 
   // Initialize with the main component file
   useEffect(() => {
@@ -79,14 +87,21 @@ export function CodeManagerProvider({
     }
   }, [initialComponentPath])
 
+  // Update the loading components from the CodeManager
+  useEffect(() => {
+    // This is where we would sync with external loading components, if needed
+    console.log("[CodeManager] Loading components:", loadingComponents)
+  }, [loadingComponents])
+
   // Log state changes in development
   useEffect(() => {
     console.log("[CodeManager] Current state:", {
       activeFile,
       files: Object.keys(sandpack.files),
       userModifiedFiles,
+      loadingComponents,
     })
-  }, [sandpack.files, activeFile, userModifiedFiles])
+  }, [sandpack.files, activeFile, userModifiedFiles, loadingComponents])
 
   // File selection
   const selectFile = (path: string) => {
@@ -230,6 +245,10 @@ export function CodeManagerProvider({
     // File metadata
     allFiles: Object.keys(sandpack.files),
     nonShadcnComponents,
+
+    // Loading state
+    loadingComponents,
+    setLoadingComponents,
   }
 
   return (
diff --git a/apps/web/components/features/studio/editor/editor.tsx b/apps/web/components/features/studio/editor/editor.tsx
index 287c882f..ad02dbc6 100644
--- a/apps/web/components/features/studio/editor/editor.tsx
+++ b/apps/web/components/features/studio/editor/editor.tsx
@@ -19,6 +19,7 @@ interface EditorProps {
   sandpackTemplate?: "react" | "react-ts" | "vanilla" | "vanilla-ts"
   dependencies?: Record<string, string>
   visiblePaths?: string[]
+  loadingFiles?: string[]
 }
 
 export function Editor({
@@ -31,6 +32,7 @@ export function Editor({
   sandpackTemplate = "react-ts",
   dependencies = {},
   visiblePaths,
+  loadingFiles = [],
 }: EditorProps) {
   // Setup sandpack configuration
   const sandpackConfig = {
@@ -60,7 +62,10 @@ export function Editor({
         isUnknownComponentFn={isUnknownComponentFn}
       >
         <div className="flex flex-col h-full">
-          <EditorContent visiblePaths={visiblePaths} />
+          <EditorContent
+            visiblePaths={visiblePaths}
+            loadingFiles={loadingFiles}
+          />
         </div>
       </CodeManagerProvider>
     </SandpackProvider>
@@ -69,31 +74,72 @@ export function Editor({
 
 interface EditorContentProps {
   visiblePaths?: string[]
+  loadingFiles?: string[]
 }
 
-function EditorContent({ visiblePaths }: EditorContentProps) {
+function EditorContent({
+  visiblePaths,
+  loadingFiles = [],
+}: EditorContentProps) {
   const {
     activeFile,
     selectFile,
     isUnknownComponent,
     getComponentName,
     nonShadcnComponents,
+    loadingComponents,
   } = useCodeManager()
 
+  // Log loading files for debugging with React.useEffect instead of just useEffect
+  React.useEffect(() => {
+    if (loadingFiles.length > 0) {
+      console.log("[EditorContent] Received loading files:", loadingFiles)
+
+      // Force a re-render to ensure loading files are displayed immediately
+      const filesExplorerElement = document.querySelector(
+        "[data-file-explorer]",
+      )
+      if (filesExplorerElement) {
+        filesExplorerElement.classList.add("loading-files-active")
+        setTimeout(() => {
+          filesExplorerElement.classList.remove("loading-files-active")
+        }, 100)
+      }
+    }
+  }, [loadingFiles])
+
   // Handle file selection
   const handleFileSelect = (path: string) => {
     selectFile(path)
   }
 
+  // Combine loading files from props and from context
+  const allLoadingFiles = React.useMemo(() => {
+    const combinedFiles = [...loadingFiles]
+    if (loadingComponents && loadingComponents.length > 0) {
+      console.log(
+        "[EditorContent] Combined with context loading files:",
+        loadingComponents,
+      )
+      loadingComponents.forEach((file) => {
+        if (!combinedFiles.includes(file)) {
+          combinedFiles.push(file)
+        }
+      })
+    }
+    return combinedFiles
+  }, [loadingFiles, loadingComponents])
+
   return (
     <SandpackLayout style={{ height: "100%", border: "none" }}>
       <div className="flex w-full h-full">
-        <div className="flex border-r border-border">
+        <div className="flex border-r border-border" data-file-explorer>
           <FileExplorer
             nonShadcnComponents={nonShadcnComponents}
             onFileSelect={handleFileSelect}
             selectedFile={activeFile}
             visibleFiles={visiblePaths}
+            loadingFiles={allLoadingFiles}
           />
         </div>
         <div className="flex-1">
diff --git a/apps/web/components/features/studio/editor/file-explorer.tsx b/apps/web/components/features/studio/editor/file-explorer.tsx
index eb331e79..32bb7c1d 100644
--- a/apps/web/components/features/studio/editor/file-explorer.tsx
+++ b/apps/web/components/features/studio/editor/file-explorer.tsx
@@ -9,6 +9,11 @@ import {
   FileWarning,
 } from "lucide-react"
 import { useState, useMemo, useCallback } from "react"
+import { Spinner } from "@/components/icons/spinner"
+import ShadcnFile from "@/components/icons/shadcn-file"
+import { isShadcnComponentPath } from "@/lib/shadcn-components"
+import { TextShimmer } from "@/components/ui/text-shimmer"
+import React from "react"
 
 interface FileTreeItem {
   name: string
@@ -16,6 +21,7 @@ interface FileTreeItem {
   type: "file" | "directory"
   children?: FileTreeItem[]
   isUnknownComponent?: boolean
+  isLoading?: boolean
 }
 
 export interface FileExplorerProps {
@@ -23,12 +29,14 @@ export interface FileExplorerProps {
   onFileSelect?: (path: string) => void
   selectedFile?: string | null
   visibleFiles?: string[]
+  loadingFiles?: string[]
 }
 
 function buildFileTree(
   files: string[],
   unknownComponents: Array<{ name: string; path: string }> = [],
   visibleFilesFilter?: string[],
+  loadingFiles: string[] = [],
 ): {
   tree: FileTreeItem[]
   directories: Set<string>
@@ -41,6 +49,10 @@ function buildFileTree(
       return true
     }
 
+    if (loadingFiles.includes(path)) {
+      return true
+    }
+
     if (!visibleFilesFilter || visibleFilesFilter.length === 0) {
       return true
     }
@@ -86,6 +98,7 @@ function buildFileTree(
           if (isUnknownComponent) {
             existingItem.isUnknownComponent = true
           }
+          existingItem.isLoading = loadingFiles.includes(path)
         }
         current = existingItem.children || []
       } else {
@@ -95,6 +108,7 @@ function buildFileTree(
           type: isLast ? "file" : "directory",
           children: isLast ? undefined : [],
           isUnknownComponent: isLast ? isUnknownComponent : undefined,
+          isLoading: isLast ? loadingFiles.includes(path) : undefined,
         }
 
         const insertIndex = current.findIndex((item) => {
@@ -125,6 +139,19 @@ function buildFileTree(
     addToTree(comp.path, true, comp.name)
   })
 
+  console.log("[buildFileTree] Processing loading files:", loadingFiles)
+  loadingFiles.forEach((path) => {
+    const pathParts = path.split("/")
+    const fileName = pathParts[pathParts.length - 1] || ""
+    const componentName = fileName.replace(".tsx", "")
+
+    console.log(
+      `[buildFileTree] Adding loading file: ${path} (${componentName})`,
+    )
+
+    addToTree(path, false, componentName)
+  })
+
   const sortTreeRecursively = (items: FileTreeItem[]) => {
     items.sort((a, b) => {
       if (a.type !== b.type) {
@@ -162,6 +189,16 @@ function FileTreeNode({
 }) {
   const isExpanded = expandedDirs.has(item.path)
   const isActive = activeFile === item.path
+  const isShadcnFile = item.type === "file" && isShadcnComponentPath(item.path)
+
+  // Log when we encounter loading items
+  React.useEffect(() => {
+    if (item.isLoading) {
+      console.log(
+        `[FileTreeNode] Loading item detected: ${item.name} (${item.path})`,
+      )
+    }
+  }, [item.isLoading, item.name, item.path])
 
   return (
     <div>
@@ -195,19 +232,31 @@ function FileTreeNode({
           ) : (
             <Folder className="h-4 w-4 text-blue-500" />
           )
+        ) : item.isLoading ? (
+          <div className="h-4 w-4 flex items-center justify-center">
+            <Spinner size={14} />
+          </div>
         ) : item.isUnknownComponent ? (
           <FileWarning className="h-4 w-4 text-yellow-500" />
+        ) : isShadcnFile ? (
+          <ShadcnFile className="h-4 w-4 text-primary" />
         ) : (
           <File className="h-4 w-4 text-gray-500" />
         )}
-        <span
-          className={cn(
-            "truncate",
-            item.isUnknownComponent && "text-yellow-600",
-          )}
-        >
-          {item.name}
-        </span>
+        {item.isLoading ? (
+          <TextShimmer className="truncate text-sm">
+            {item.name}
+          </TextShimmer>
+        ) : (
+          <span
+            className={cn(
+              "truncate",
+              item.isUnknownComponent && "text-yellow-600",
+            )}
+          >
+            {item.name}
+          </span>
+        )}
       </button>
 
       {item.type === "directory" && isExpanded && item.children && (
@@ -237,14 +286,26 @@ export function FileExplorer({
   onFileSelect,
   selectedFile,
   visibleFiles,
+  loadingFiles = [],
 }: FileExplorerProps) {
   const { sandpack } = useSandpack()
   const { visibleFiles: sandpackVisibleFiles } = sandpack
 
+  React.useEffect(() => {
+    if (loadingFiles && loadingFiles.length > 0) {
+      console.log("[FileExplorer] Received loading files:", loadingFiles)
+    }
+  }, [loadingFiles])
+
   const { tree: fileTree, directories } = useMemo(
     () =>
-      buildFileTree(sandpackVisibleFiles, nonShadcnComponents, visibleFiles),
-    [sandpackVisibleFiles, nonShadcnComponents, visibleFiles],
+      buildFileTree(
+        sandpackVisibleFiles,
+        nonShadcnComponents,
+        visibleFiles,
+        loadingFiles,
+      ),
+    [sandpackVisibleFiles, nonShadcnComponents, visibleFiles, loadingFiles],
   )
 
   const [expandedDirs, setExpandedDirs] = useState<Set<string>>(directories)
diff --git a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
index a5ec648d..e7bab11c 100644
--- a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
@@ -44,6 +44,11 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
   const isDarkTheme = resolvedTheme === "dark"
   const supabase = useClerkSupabaseClient()
 
+  // Add new state to track loading components
+  const [loadingShadcnComponents, setLoadingShadcnComponents] = useState<
+    string[]
+  >([])
+
   // Get component file path
   const getComponentFilePath = useCallback(() => {
     if (!processedData) return "/components/ui/component.tsx"
@@ -326,6 +331,22 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
       }
 
       const data = await response.json()
+
+      // Immediately set loading state for shadcn components if any
+      if (data.shadcnComponentsImports?.length > 0) {
+        // Set the loading state for shadcn components
+        const loadingPaths = data.shadcnComponentsImports.map(
+          (component: { name: string }) =>
+            `/components/ui/${component.name.toLowerCase()}.tsx`,
+        )
+        console.log(
+          "[usePublishDialog] Setting loading components:",
+          loadingPaths,
+        )
+        setLoadingShadcnComponents(loadingPaths)
+      }
+
+      // Set processed data after setting loading state
       setProcessedData(data)
 
       // Set the processed component as active file
@@ -366,6 +387,15 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
           setMergedTailwindConfig(tailwindConfig)
           setMergedGlobalCss(globalCss)
         }
+
+        // Delay clearing the loading state to give UI time to render spinners
+        // This ensures the spinners are visible for a reasonable amount of time
+        setTimeout(() => {
+          console.log(
+            "[usePublishDialog] Clearing loading components with delay",
+          )
+          setLoadingShadcnComponents([])
+        }, 1000) // 1 second delay to ensure UX is smooth
       }
 
       toast.success("Component processed successfully")
@@ -374,6 +404,13 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
         `Processing failed: ${error instanceof Error ? error.message : "Unknown error"}`,
       )
       console.error("Error processing component:", error)
+      // Clear loading state in case of error with a small delay
+      setTimeout(() => {
+        console.log(
+          "[usePublishDialog] Clearing loading components after error",
+        )
+        setLoadingShadcnComponents([])
+      }, 500)
     } finally {
       setIsProcessing(false)
     }
@@ -450,6 +487,7 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     isProcessing,
     isPublishing,
     activePreview,
+    loadingShadcnComponents,
     handleOpenChange,
     handleProcessComponent,
     handlePreviewSelect,
diff --git a/apps/web/components/icons/shadcn-file.tsx b/apps/web/components/icons/shadcn-file.tsx
new file mode 100644
index 00000000..30412fff
--- /dev/null
+++ b/apps/web/components/icons/shadcn-file.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+
+interface ShadcnFileProps {
+  className?: string;
+}
+
+export const ShadcnFile: React.FC<ShadcnFileProps> = ({ className }) => {
+  return (
+    <svg 
+      width="24" 
+      height="24" 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path 
+        d="M15 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V7L15 2Z" 
+        stroke="currentColor" 
+        strokeWidth="2" 
+        strokeLinecap="round" 
+        strokeLinejoin="round"
+      />
+      <path 
+        d="M10.5 19.5L17.5 12.5" 
+        stroke="currentColor" 
+        strokeWidth="2" 
+        strokeLinecap="round"
+      />
+      <path 
+        d="M14 2V6C14 6.53043 14.2107 7.03914 14.5858 7.41421C14.9609 7.78929 15.4696 8 16 8H20" 
+        stroke="currentColor" 
+        strokeWidth="2" 
+        strokeLinecap="round" 
+        strokeLinejoin="round"
+      />
+      <path 
+        d="M15 19.5L17.5 17" 
+        stroke="currentColor" 
+        strokeWidth="2" 
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+};
+
+export default ShadcnFile;
diff --git a/apps/web/lib/shadcn-components.ts b/apps/web/lib/shadcn-components.ts
new file mode 100644
index 00000000..a17d77a7
--- /dev/null
+++ b/apps/web/lib/shadcn-components.ts
@@ -0,0 +1,60 @@
+// List of all shadcn components with their import paths
+export const shadcnComponents = [
+  { name: "Accordion", path: "@/components/ui/accordion" },
+  { name: "Alert", path: "@/components/ui/alert" },
+  { name: "AlertDialog", path: "@/components/ui/alert-dialog" },
+  { name: "AspectRatio", path: "@/components/ui/aspect-ratio" },
+  { name: "Avatar", path: "@/components/ui/avatar" },
+  { name: "Badge", path: "@/components/ui/badge" },
+  { name: "Breadcrumb", path: "@/components/ui/breadcrumb" },
+  { name: "Button", path: "@/components/ui/button" },
+  { name: "Calendar", path: "@/components/ui/calendar" },
+  { name: "Card", path: "@/components/ui/card" },
+  { name: "Carousel", path: "@/components/ui/carousel" },
+  { name: "Chart", path: "@/components/ui/chart" },
+  { name: "Checkbox", path: "@/components/ui/checkbox" },
+  { name: "Collapsible", path: "@/components/ui/collapsible" },
+  { name: "Combobox", path: "@/components/ui/combobox" },
+  { name: "Command", path: "@/components/ui/command" },
+  { name: "ContextMenu", path: "@/components/ui/context-menu" },
+  { name: "DataTable", path: "@/components/ui/data-table" },
+  { name: "DatePicker", path: "@/components/ui/date-picker" },
+  { name: "Dialog", path: "@/components/ui/dialog" },
+  { name: "Drawer", path: "@/components/ui/drawer" },
+  { name: "DropdownMenu", path: "@/components/ui/dropdown-menu" },
+  { name: "Form", path: "@/components/ui/form" },
+  { name: "HoverCard", path: "@/components/ui/hover-card" },
+  { name: "Input", path: "@/components/ui/input" },
+  { name: "InputOTP", path: "@/components/ui/input-otp" },
+  { name: "Label", path: "@/components/ui/label" },
+  { name: "Menubar", path: "@/components/ui/menubar" },
+  { name: "NavigationMenu", path: "@/components/ui/navigation-menu" },
+  { name: "Pagination", path: "@/components/ui/pagination" },
+  { name: "Popover", path: "@/components/ui/popover" },
+  { name: "Progress", path: "@/components/ui/progress" },
+  { name: "RadioGroup", path: "@/components/ui/radio-group" },
+  { name: "Resizable", path: "@/components/ui/resizable" },
+  { name: "ScrollArea", path: "@/components/ui/scroll-area" },
+  { name: "Select", path: "@/components/ui/select" },
+  { name: "Separator", path: "@/components/ui/separator" },
+  { name: "Sheet", path: "@/components/ui/sheet" },
+  { name: "Sidebar", path: "@/components/ui/sidebar" },
+  { name: "Skeleton", path: "@/components/ui/skeleton" },
+  { name: "Slider", path: "@/components/ui/slider" },
+  { name: "Sonner", path: "@/components/ui/sonner" },
+  { name: "Switch", path: "@/components/ui/switch" },
+  { name: "Table", path: "@/components/ui/table" },
+  { name: "Tabs", path: "@/components/ui/tabs" },
+  { name: "Textarea", path: "@/components/ui/textarea" },
+  { name: "Toast", path: "@/components/ui/toast" },
+  { name: "Toggle", path: "@/components/ui/toggle" },
+  { name: "ToggleGroup", path: "@/components/ui/toggle-group" },
+  { name: "Tooltip", path: "@/components/ui/tooltip" },
+]
+
+// Helper function to check if a path is a shadcn component path
+export function isShadcnComponentPath(path: string): boolean {
+  return shadcnComponents.some((comp) =>
+    path.includes(comp.path.replace("@/", "")),
+  )
+}

From 119e5850beb5afb6a4b712ecfdbf27659c9d1033 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Sat, 5 Apr 2025 21:06:08 +0300
Subject: [PATCH 033/143] join styles

---
 .../api/studio/merge-styles/globals/route.ts  |  41 +-
 .../api/studio/merge-styles/tailwind/route.ts |  40 +-
 .../api/studio/preprocess-component/route.ts  |  21 +-
 .../editor/component-publish-dialog.tsx       |  24 +-
 .../features/studio/editor/editor.tsx         |  16 +
 .../features/studio/editor/file-explorer.tsx  | 148 +++++--
 .../studio/editor/hooks/use-editor-dialog.ts  | 411 +++++++++++++-----
 apps/web/lib/component-lookup.ts              | 119 +++++
 8 files changed, 666 insertions(+), 154 deletions(-)
 create mode 100644 apps/web/lib/component-lookup.ts

diff --git a/apps/web/app/api/studio/merge-styles/globals/route.ts b/apps/web/app/api/studio/merge-styles/globals/route.ts
index 110afce0..912ab744 100644
--- a/apps/web/app/api/studio/merge-styles/globals/route.ts
+++ b/apps/web/app/api/studio/merge-styles/globals/route.ts
@@ -46,8 +46,11 @@ Please provide a merged global.css that:
 4. Eliminates duplicates
 5. Preserves cascade and specificity appropriately
 6. Groups related styles together
+7. Never shortens, simplifies, or omits any keyframe animations or complex selectors
+8. Includes ALL original code without truncation or summarization
+9. Preserves all vendor prefixes and browser-specific styles
 
-Format the response as a JSON object with a 'globalCss' key containing the merged styles.`
+Format the response as a JSON object with a 'globalCss' key containing the complete merged styles.`
 
     console.log("📤 [Global CSS Merge] Sending request to OpenAI:", {
       promptLength: prompt.length,
@@ -59,14 +62,14 @@ Format the response as a JSON object with a 'globalCss' key containing the merge
         {
           role: "system",
           content:
-            "You are a CSS expert who helps merge and optimize stylesheets.",
+            "You are a CSS expert who helps merge and optimize stylesheets. Always include all content completely without summarizing or truncating. Preserve all keyframes, animations, and complex styles fully.",
         },
         {
           role: "user",
           content: prompt,
         },
       ],
-      model: "gpt-4-turbo-preview",
+      model: "gpt-4o-mini",
       response_format: { type: "json_object" },
     })
 
@@ -76,11 +79,35 @@ Format the response as a JSON object with a 'globalCss' key containing the merge
 
     const result = JSON.parse(completion.choices[0].message.content)
 
-    console.log("📥 [Global CSS Merge] Received response from OpenAI:", {
-      resultLength: result.globalCss?.length,
+    // Handle both string and object formats for globalCss
+    let logInfo = {
+      resultLength: result.globalCss
+        ? typeof result.globalCss === "string"
+          ? result.globalCss.length
+          : JSON.stringify(result.globalCss).length
+        : 0,
       hasCss: !!result.globalCss,
-      firstFewLines: result.globalCss?.split("\n").slice(0, 3).join("\n"),
-    })
+      firstFewLines: "",
+    }
+
+    // Add firstFewLines only if globalCss is a string
+    if (typeof result.globalCss === "string") {
+      logInfo.firstFewLines = result.globalCss
+        .split("\n")
+        .slice(0, 3)
+        .join("\n")
+    } else if (result.globalCss) {
+      // For object format, convert to string representation for logging
+      logInfo.firstFewLines =
+        JSON.stringify(result.globalCss).slice(0, 100) + "..."
+    }
+
+    console.log("📥 [Global CSS Merge] Received response from OpenAI:", logInfo)
+
+    // Ensure globalCss is always a string in the response
+    if (result.globalCss && typeof result.globalCss !== "string") {
+      result.globalCss = JSON.stringify(result.globalCss, null, 2)
+    }
 
     return NextResponse.json(result)
   } catch (error) {
diff --git a/apps/web/app/api/studio/merge-styles/tailwind/route.ts b/apps/web/app/api/studio/merge-styles/tailwind/route.ts
index 6bf4ca8e..eb533489 100644
--- a/apps/web/app/api/studio/merge-styles/tailwind/route.ts
+++ b/apps/web/app/api/studio/merge-styles/tailwind/route.ts
@@ -45,8 +45,10 @@ Please provide a merged Tailwind config that:
 3. Maintains all necessary functionality
 4. Eliminates duplicates
 5. Preserves the structure of a valid Tailwind config
+6. Includes ALL original configuration without truncation or simplification
+7. Preserves all theme extensions, plugins, and customizations completely
 
-Format the response as a JSON object with a 'tailwindConfig' key containing the merged configuration.`
+Format the response as a JSON object with a 'tailwindConfig' key containing the complete merged configuration.`
 
     console.log("📤 [Tailwind Merge] Sending request to OpenAI:", {
       promptLength: prompt.length,
@@ -58,14 +60,14 @@ Format the response as a JSON object with a 'tailwindConfig' key containing the
         {
           role: "system",
           content:
-            "You are a Tailwind CSS expert who helps merge and optimize configurations.",
+            "You are a Tailwind CSS expert who helps merge and optimize configurations. Always include all content completely without summarizing or truncating. Never omit any configuration properties.",
         },
         {
           role: "user",
           content: prompt,
         },
       ],
-      model: "gpt-4-turbo-preview",
+      model: "gpt-4o-mini",
       response_format: { type: "json_object" },
     })
 
@@ -75,11 +77,35 @@ Format the response as a JSON object with a 'tailwindConfig' key containing the
 
     const result = JSON.parse(completion.choices[0].message.content)
 
-    console.log("📥 [Tailwind Merge] Received response from OpenAI:", {
-      resultLength: result.tailwindConfig?.length,
+    // Handle both string and object formats for tailwindConfig
+    let logInfo = {
+      resultLength: result.tailwindConfig
+        ? typeof result.tailwindConfig === "string"
+          ? result.tailwindConfig.length
+          : JSON.stringify(result.tailwindConfig).length
+        : 0,
       hasConfig: !!result.tailwindConfig,
-      firstFewLines: result.tailwindConfig?.split("\n").slice(0, 3).join("\n"),
-    })
+      firstFewLines: "",
+    }
+
+    // Add firstFewLines only if tailwindConfig is a string
+    if (typeof result.tailwindConfig === "string") {
+      logInfo.firstFewLines = result.tailwindConfig
+        .split("\n")
+        .slice(0, 3)
+        .join("\n")
+    } else if (result.tailwindConfig) {
+      // For object format, convert to string representation for logging
+      logInfo.firstFewLines =
+        JSON.stringify(result.tailwindConfig).slice(0, 100) + "..."
+    }
+
+    console.log("📥 [Tailwind Merge] Received response from OpenAI:", logInfo)
+
+    // Ensure tailwindConfig is always a string in the response
+    if (result.tailwindConfig && typeof result.tailwindConfig !== "string") {
+      result.tailwindConfig = JSON.stringify(result.tailwindConfig, null, 2)
+    }
 
     return NextResponse.json(result)
   } catch (error) {
diff --git a/apps/web/app/api/studio/preprocess-component/route.ts b/apps/web/app/api/studio/preprocess-component/route.ts
index b3be35a3..85e87ba6 100644
--- a/apps/web/app/api/studio/preprocess-component/route.ts
+++ b/apps/web/app/api/studio/preprocess-component/route.ts
@@ -19,8 +19,8 @@ const MOCK_RESPONSE = {
   ],
   nonShadcnComponentsImports: [
     {
-      name: "SomeCustomComponent",
       path: "@/components/ui/some-custom-component",
+      names: ["SomeCustomComponent", "CustomComponentPart"],
     },
   ],
   npmDependencies: ["react", "next", "lucide-react"],
@@ -33,7 +33,6 @@ const MOCK_RESPONSE = {
       fontFamily: {},
       borderRadius: {},
       boxShadow: {},
-      spacing: {},
     },
     cssVariables: [],
     keyframes: [],
@@ -167,10 +166,10 @@ async function preprocessComponent(code: string) {
 4. Identify any non-shadcn/ui component imports (including @/hooks and @/components/[registry]/ components, excluding npm packages and standard shadcn utilities). 
    IMPORTANT:
    - DO NOT include imports like { cn } from "@/lib/utils" or any other utility functions. Only include actual component imports.
-   - If multiple components are exported from the same file, list only one of them.
+   - List all components exported from the same file together, grouped by file path.
    - The path should be based on the file location, not the component name.
-   - For example, if file mockup.tsx exports both Mockup and MockupFrame components, list only Mockup from "@/components/ui/mockup".
-   For each component, provide both the name and its path.
+   - For example, if file mockup.tsx exports both Mockup and MockupFrame components, list both with "@/components/ui/mockup".
+   For each file path, provide an array of all component names imported from that path.
 
 5. List all npm package dependencies used in the component (excluding react, react-dom, tailwindcss, and any packages starting with 'next' or '@/')
 6. Identify any environment variables (process.env.*) that the component requires to function correctly.
@@ -196,14 +195,16 @@ IMPORTANT RULES FOR COMPONENT PATHS:
 1. Components exported from the same file MUST share the same path
 2. The path should be based on the actual file location, not the component name
 3. The filename in the path should match the actual file that contains the component
-4. Multiple components from the same file should be listed separately but with identical paths
+4. Multiple components from the same file must be listed together in a single entry with an array of names
 
 Example of correct path handling:
 If a file "@/components/ui/mockup.tsx" exports both Mockup and MockupFrame components:
 {
   "nonShadcnComponentsImports": [
-    { "name": "Mockup", "path": "@/components/ui/mockup" },
-    { "name": "MockupFrame", "path": "@/components/ui/mockup" }
+    { 
+      "path": "@/components/ui/mockup",
+      "names": ["Mockup", "MockupFrame"]
+    }
   ]
 }
 
@@ -219,8 +220,8 @@ Respond in JSON format only with the following structure:
   ],
   "nonShadcnComponentsImports": [
     {
-      "name": "string",
-      "path": "@/components/[registry]/component-name"
+      "path": "@/components/[registry]/component-name",
+      "names": ["string", "string", ...]
     }
   ],
   "npmDependencies": ["string"],
diff --git a/apps/web/components/features/studio/editor/component-publish-dialog.tsx b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
index 25b767c9..2b9ffa26 100644
--- a/apps/web/components/features/studio/editor/component-publish-dialog.tsx
+++ b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
@@ -38,6 +38,7 @@ export function ComponentPublishDialog({
     isProcessing,
     activePreview,
     loadingShadcnComponents,
+    loadingStyleFiles,
     handleOpenChange,
     handleProcessComponent,
     handlePreviewSelect,
@@ -77,7 +78,14 @@ export function ComponentPublishDialog({
         }
       }
     }
-  }, [loadingShadcnComponents, processedData])
+
+    if (loadingStyleFiles.length > 0) {
+      console.log(
+        "[ComponentPublishDialog] Style files in loading state:",
+        loadingStyleFiles,
+      )
+    }
+  }, [loadingShadcnComponents, loadingStyleFiles, processedData])
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
@@ -151,6 +159,7 @@ export function ComponentPublishDialog({
                         ]
                   }
                   loadingFiles={loadingShadcnComponents}
+                  loadingStyleFiles={loadingStyleFiles}
                 />
               </SandpackProvider>
             ) : (
@@ -166,6 +175,7 @@ export function ComponentPublishDialog({
                   setComponentCode={setComponentCode}
                   isUnknownComponent={isUnknownComponent}
                   loadingFiles={loadingShadcnComponents}
+                  loadingStyleFiles={loadingStyleFiles}
                 />
               </SandpackProvider>
             )}
@@ -192,6 +202,7 @@ interface SandpackContentProps {
   setComponentCode: (code: string) => void
   isUnknownComponent: (path: string) => boolean
   loadingFiles?: string[]
+  loadingStyleFiles?: string[]
 }
 
 function SandpackContent({
@@ -202,6 +213,7 @@ function SandpackContent({
   setComponentCode,
   isUnknownComponent,
   loadingFiles = [],
+  loadingStyleFiles = [],
 }: SandpackContentProps) {
   const { sandpack } = useSandpack()
   const componentPath = getComponentFilePath()
@@ -218,6 +230,16 @@ function SandpackContent({
     })
   }, [sandpack.activeFile, sandpack.files, sandpack.visibleFiles])
 
+  // Log loading file states
+  React.useEffect(() => {
+    if (loadingFiles.length > 0) {
+      console.log("[SandpackContent] Component loading files:", loadingFiles)
+    }
+    if (loadingStyleFiles.length > 0) {
+      console.log("[SandpackContent] Style loading files:", loadingStyleFiles)
+    }
+  }, [loadingFiles, loadingStyleFiles])
+
   // Set initial file only once when component mounts
   React.useEffect(() => {
     if (!activePreview) {
diff --git a/apps/web/components/features/studio/editor/editor.tsx b/apps/web/components/features/studio/editor/editor.tsx
index ad02dbc6..6d4b2c75 100644
--- a/apps/web/components/features/studio/editor/editor.tsx
+++ b/apps/web/components/features/studio/editor/editor.tsx
@@ -20,6 +20,7 @@ interface EditorProps {
   dependencies?: Record<string, string>
   visiblePaths?: string[]
   loadingFiles?: string[]
+  loadingStyleFiles?: string[]
 }
 
 export function Editor({
@@ -33,6 +34,7 @@ export function Editor({
   dependencies = {},
   visiblePaths,
   loadingFiles = [],
+  loadingStyleFiles = [],
 }: EditorProps) {
   // Setup sandpack configuration
   const sandpackConfig = {
@@ -65,6 +67,7 @@ export function Editor({
           <EditorContent
             visiblePaths={visiblePaths}
             loadingFiles={loadingFiles}
+            loadingStyleFiles={loadingStyleFiles}
           />
         </div>
       </CodeManagerProvider>
@@ -75,11 +78,13 @@ export function Editor({
 interface EditorContentProps {
   visiblePaths?: string[]
   loadingFiles?: string[]
+  loadingStyleFiles?: string[]
 }
 
 function EditorContent({
   visiblePaths,
   loadingFiles = [],
+  loadingStyleFiles = [],
 }: EditorContentProps) {
   const {
     activeFile,
@@ -108,6 +113,16 @@ function EditorContent({
     }
   }, [loadingFiles])
 
+  // Log loading style files
+  React.useEffect(() => {
+    if (loadingStyleFiles.length > 0) {
+      console.log(
+        "[EditorContent] Received loading style files:",
+        loadingStyleFiles,
+      )
+    }
+  }, [loadingStyleFiles])
+
   // Handle file selection
   const handleFileSelect = (path: string) => {
     selectFile(path)
@@ -140,6 +155,7 @@ function EditorContent({
             selectedFile={activeFile}
             visibleFiles={visiblePaths}
             loadingFiles={allLoadingFiles}
+            loadingStyleFiles={loadingStyleFiles}
           />
         </div>
         <div className="flex-1">
diff --git a/apps/web/components/features/studio/editor/file-explorer.tsx b/apps/web/components/features/studio/editor/file-explorer.tsx
index 32bb7c1d..8164ad16 100644
--- a/apps/web/components/features/studio/editor/file-explorer.tsx
+++ b/apps/web/components/features/studio/editor/file-explorer.tsx
@@ -22,6 +22,7 @@ interface FileTreeItem {
   children?: FileTreeItem[]
   isUnknownComponent?: boolean
   isLoading?: boolean
+  isStyleFile?: boolean
 }
 
 export interface FileExplorerProps {
@@ -30,22 +31,35 @@ export interface FileExplorerProps {
   selectedFile?: string | null
   visibleFiles?: string[]
   loadingFiles?: string[]
+  loadingStyleFiles?: string[]
 }
 
-function buildFileTree(
+export function buildFileTree(
   files: string[],
-  unknownComponents: Array<{ name: string; path: string }> = [],
-  visibleFilesFilter?: string[],
+  nonShadcnComponents: Array<{ name: string; path: string }> = [],
+  visibleFiles: string[] = [],
   loadingFiles: string[] = [],
-): {
-  tree: FileTreeItem[]
-  directories: Set<string>
-} {
+  loadingStyleFiles: string[] = [],
+) {
+  // Log loading states for debugging
+  if (loadingFiles.length > 0) {
+    console.log(
+      "[buildFileTree] Building tree with loading files:",
+      loadingFiles,
+    )
+  }
+  if (loadingStyleFiles.length > 0) {
+    console.log(
+      "[buildFileTree] Building tree with loading style files:",
+      loadingStyleFiles,
+    )
+  }
+
   const root: FileTreeItem[] = []
   const directories = new Set<string>()
 
   const isFileVisible = (path: string) => {
-    if (unknownComponents.some((comp) => comp.path === path)) {
+    if (nonShadcnComponents.some((comp) => comp.path === path)) {
       return true
     }
 
@@ -53,11 +67,15 @@ function buildFileTree(
       return true
     }
 
-    if (!visibleFilesFilter || visibleFilesFilter.length === 0) {
+    if (loadingStyleFiles.includes(path)) {
+      return true
+    }
+
+    if (!visibleFiles || visibleFiles.length === 0) {
       return true
     }
 
-    return visibleFilesFilter.some((visiblePath) => {
+    return visibleFiles.some((visiblePath) => {
       if (visiblePath.endsWith("/")) {
         return path.startsWith(visiblePath)
       }
@@ -69,8 +87,9 @@ function buildFileTree(
     path: string,
     isUnknownComponent = false,
     componentName?: string,
+    isStyleFile = false,
   ) => {
-    if (!isUnknownComponent && !isFileVisible(path)) {
+    if (!isUnknownComponent && !isStyleFile && !isFileVisible(path)) {
       return
     }
 
@@ -98,7 +117,11 @@ function buildFileTree(
           if (isUnknownComponent) {
             existingItem.isUnknownComponent = true
           }
-          existingItem.isLoading = loadingFiles.includes(path)
+          if (isStyleFile) {
+            existingItem.isStyleFile = true
+          }
+          existingItem.isLoading =
+            loadingFiles.includes(path) || loadingStyleFiles.includes(path)
         }
         current = existingItem.children || []
       } else {
@@ -108,7 +131,10 @@ function buildFileTree(
           type: isLast ? "file" : "directory",
           children: isLast ? undefined : [],
           isUnknownComponent: isLast ? isUnknownComponent : undefined,
-          isLoading: isLast ? loadingFiles.includes(path) : undefined,
+          isStyleFile: isLast ? isStyleFile : undefined,
+          isLoading: isLast
+            ? loadingFiles.includes(path) || loadingStyleFiles.includes(path)
+            : undefined,
         }
 
         const insertIndex = current.findIndex((item) => {
@@ -135,7 +161,7 @@ function buildFileTree(
     addToTree(path)
   })
 
-  unknownComponents.forEach((comp) => {
+  nonShadcnComponents.forEach((comp) => {
     addToTree(comp.path, true, comp.name)
   })
 
@@ -152,6 +178,17 @@ function buildFileTree(
     addToTree(path, false, componentName)
   })
 
+  if (loadingStyleFiles.length > 0) {
+    console.log(
+      "[buildFileTree] Processing loading style files:",
+      loadingStyleFiles,
+    )
+    loadingStyleFiles.forEach((path) => {
+      console.log(`[buildFileTree] Adding loading style file: ${path}`)
+      addToTree(path, false, undefined, true)
+    })
+  }
+
   const sortTreeRecursively = (items: FileTreeItem[]) => {
     items.sort((a, b) => {
       if (a.type !== b.type) {
@@ -174,24 +211,29 @@ function buildFileTree(
 
 function FileTreeNode({
   item,
-  level = 0,
-  activeFile,
   onFileClick,
   expandedDirs,
   onToggleDir,
+  isLoading,
+  isStyleLoading,
+  activeFile,
+  level = 0,
 }: {
   item: FileTreeItem
-  level?: number
-  activeFile: string
   onFileClick: (path: string) => void
   expandedDirs: Set<string>
   onToggleDir: (path: string) => void
+  isLoading: (path: string) => boolean
+  isStyleLoading: (path: string) => boolean
+  activeFile?: string
+  level?: number
 }) {
   const isExpanded = expandedDirs.has(item.path)
   const isActive = activeFile === item.path
   const isShadcnFile = item.type === "file" && isShadcnComponentPath(item.path)
+  const isTailwindConfig = item.path === "/tailwind.config.js"
+  const isGlobalsCss = item.path === "/globals.css"
 
-  // Log when we encounter loading items
   React.useEffect(() => {
     if (item.isLoading) {
       console.log(
@@ -232,21 +274,27 @@ function FileTreeNode({
           ) : (
             <Folder className="h-4 w-4 text-blue-500" />
           )
-        ) : item.isLoading ? (
+        ) : item.isLoading || isLoading(item.path) ? (
           <div className="h-4 w-4 flex items-center justify-center">
             <Spinner size={14} />
           </div>
+        ) : isStyleLoading(item.path) ? (
+          <div className="h-4 w-4 flex items-center justify-center">
+            <Spinner size={14} color="#3b82f6" />
+          </div>
         ) : item.isUnknownComponent ? (
           <FileWarning className="h-4 w-4 text-yellow-500" />
         ) : isShadcnFile ? (
           <ShadcnFile className="h-4 w-4 text-primary" />
+        ) : isTailwindConfig ? (
+          <File className="h-4 w-4 text-emerald-500" />
+        ) : isGlobalsCss ? (
+          <File className="h-4 w-4 text-blue-500" />
         ) : (
           <File className="h-4 w-4 text-gray-500" />
         )}
-        {item.isLoading ? (
-          <TextShimmer className="truncate text-sm">
-            {item.name}
-          </TextShimmer>
+        {item.isLoading || isLoading(item.path) || isStyleLoading(item.path) ? (
+          <TextShimmer className="truncate text-sm">{item.name}</TextShimmer>
         ) : (
           <span
             className={cn(
@@ -270,6 +318,8 @@ function FileTreeNode({
               onFileClick={onFileClick}
               expandedDirs={expandedDirs}
               onToggleDir={onToggleDir}
+              isLoading={isLoading}
+              isStyleLoading={isStyleLoading}
             />
           ))}
         </div>
@@ -287,6 +337,7 @@ export function FileExplorer({
   selectedFile,
   visibleFiles,
   loadingFiles = [],
+  loadingStyleFiles = [],
 }: FileExplorerProps) {
   const { sandpack } = useSandpack()
   const { visibleFiles: sandpackVisibleFiles } = sandpack
@@ -295,7 +346,13 @@ export function FileExplorer({
     if (loadingFiles && loadingFiles.length > 0) {
       console.log("[FileExplorer] Received loading files:", loadingFiles)
     }
-  }, [loadingFiles])
+    if (loadingStyleFiles && loadingStyleFiles.length > 0) {
+      console.log(
+        "[FileExplorer] Received loading style files:",
+        loadingStyleFiles,
+      )
+    }
+  }, [loadingFiles, loadingStyleFiles])
 
   const { tree: fileTree, directories } = useMemo(
     () =>
@@ -304,8 +361,15 @@ export function FileExplorer({
         nonShadcnComponents,
         visibleFiles,
         loadingFiles,
+        loadingStyleFiles,
       ),
-    [sandpackVisibleFiles, nonShadcnComponents, visibleFiles, loadingFiles],
+    [
+      sandpackVisibleFiles,
+      nonShadcnComponents,
+      visibleFiles,
+      loadingFiles,
+      loadingStyleFiles,
+    ],
   )
 
   const [expandedDirs, setExpandedDirs] = useState<Set<string>>(directories)
@@ -338,18 +402,38 @@ export function FileExplorer({
     [onFileSelect],
   )
 
+  // Check if a file is a loading file
+  const isFileLoading = useCallback(
+    (filePath: string) => {
+      return loadingFiles.includes(filePath)
+    },
+    [loadingFiles],
+  )
+
+  // Check if a file is a loading style file
+  const isStyleFileLoading = useCallback(
+    (filePath: string) => {
+      return loadingStyleFiles.includes(filePath)
+    },
+    [loadingStyleFiles],
+  )
+
   return (
-    <div className="w-[200px] overflow-auto border-r border-border">
-      <div className="p-2 text-sm font-medium text-muted-foreground">Files</div>
-      <div className="space-y-1">
-        {fileTree.map((item, index) => (
+    <div className="w-64 flex flex-col h-full overflow-auto border-border">
+      <div className="p-2 flex justify-between items-center border-b border-border">
+        <h3 className="text-sm font-medium">Files</h3>
+      </div>
+      <div className="flex-1 overflow-auto px-2 py-1">
+        {fileTree.map((item) => (
           <FileTreeNode
-            key={item.path + index}
+            key={item.name}
             item={item}
-            activeFile={selectedFile || ""}
             onFileClick={handleFileClick}
             expandedDirs={expandedDirs}
             onToggleDir={handleToggleDir}
+            isLoading={isFileLoading}
+            isStyleLoading={isStyleFileLoading}
+            activeFile={selectedFile || undefined}
           />
         ))}
       </div>
diff --git a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
index e7bab11c..4e0686eb 100644
--- a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
@@ -1,10 +1,14 @@
-import { useState, useCallback, useMemo } from "react"
+import { useState, useCallback, useMemo, useRef, useEffect } from "react"
 import { toast } from "sonner"
 import { useTheme } from "next-themes"
 import { generateSandpackFiles } from "../sandpack-files"
 import { resolveRegistryDependencyTree } from "@/lib/queries.server"
 import { useClerkSupabaseClient } from "@/lib/clerk"
 import { defaultGlobalCss, defaultTailwindConfig } from "@/lib/sandpack"
+import {
+  lookupComponentsInDatabase,
+  convertComponentMatchesToDependencySlugs,
+} from "@/lib/component-lookup"
 import type { SandpackFiles } from "@codesandbox/sandpack-react"
 
 // Define a type for the active preview
@@ -44,10 +48,31 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
   const isDarkTheme = resolvedTheme === "dark"
   const supabase = useClerkSupabaseClient()
 
-  // Add new state to track loading components
+  // Add new state to track loading components and config files
   const [loadingShadcnComponents, setLoadingShadcnComponents] = useState<
     string[]
   >([])
+  // Add new state for tracking style merging status
+  const [loadingStyleFiles, setLoadingStyleFiles] = useState<string[]>([])
+
+  // Add ref to track the timeout ID for loading state
+  const loadingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+  // Add max timeout for safety
+  const maxLoadingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+  // Safety cleanup for loading state
+  useEffect(() => {
+    // Cleanup on unmount
+    return () => {
+      if (loadingTimeoutRef.current) {
+        clearTimeout(loadingTimeoutRef.current)
+      }
+      if (maxLoadingTimeoutRef.current) {
+        clearTimeout(maxLoadingTimeoutRef.current)
+      }
+    }
+  }, [])
 
   // Get component file path
   const getComponentFilePath = useCallback(() => {
@@ -252,59 +277,99 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
         .map((s) => s.globalCss)
         .filter((css): css is string => !!css)
 
-      // Parallel requests for merging styles
-      const requests: Promise<any>[] = []
-
-      if (customTailwindConfigs.length > 0) {
-        requests.push(
-          fetch("/api/studio/merge-styles/tailwind", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
-              defaultConfig: defaultTailwindConfig,
-              dependencyConfigs: customTailwindConfigs,
-            }),
-          }).then((res) => res.json()),
-        )
+      // Prepare result object
+      const result: {
+        tailwindConfig: string
+        globalCss: string
+      } = {
+        tailwindConfig: defaultTailwindConfig,
+        globalCss: defaultGlobalCss,
       }
 
-      if (customGlobalCssStyles.length > 0) {
-        requests.push(
-          fetch("/api/studio/merge-styles/globals", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
-              defaultGlobalCss: defaultGlobalCss,
-              dependencyGlobalCss: customGlobalCssStyles,
-            }),
-          }).then((res) => res.json()),
-        )
-      }
+      // Track each file loading state individually
+      const tailwindConfigPromise =
+        customTailwindConfigs.length > 0
+          ? (async () => {
+              // Set loading state
+              setLoadingStyleFiles((prev) => [...prev, "/tailwind.config.js"])
+              console.log("[usePublishDialog] Started merging tailwind config")
+
+              try {
+                const response = await fetch(
+                  "/api/studio/merge-styles/tailwind",
+                  {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({
+                      defaultConfig: defaultTailwindConfig,
+                      dependencyConfigs: customTailwindConfigs,
+                    }),
+                  },
+                )
 
-      if (requests.length === 0) {
-        return {
-          tailwindConfig: defaultTailwindConfig,
-          globalCss: defaultGlobalCss,
-        }
-      }
+                const data = await response.json()
+                result.tailwindConfig =
+                  data.tailwindConfig || defaultTailwindConfig
 
-      try {
-        const results = await Promise.all(requests)
-        return {
-          tailwindConfig:
-            results.find((r) => r.tailwindConfig)?.tailwindConfig ||
-            defaultTailwindConfig,
-          globalCss:
-            results.find((r) => r.globalCss)?.globalCss || defaultGlobalCss,
-        }
-      } catch (error) {
-        console.error("Error merging styles:", error)
-        toast.error("Failed to merge styles from dependencies")
-        return {
-          tailwindConfig: defaultTailwindConfig,
-          globalCss: defaultGlobalCss,
-        }
-      }
+                console.log(
+                  "[usePublishDialog] Completed merging tailwind config",
+                )
+                return data
+              } catch (error) {
+                console.error("Error merging tailwind config:", error)
+                toast.error("Failed to merge tailwind config")
+                return { tailwindConfig: defaultTailwindConfig }
+              } finally {
+                // Always clear loading state when done, whether successful or not
+                setLoadingStyleFiles((prev) =>
+                  prev.filter((filePath) => filePath !== "/tailwind.config.js"),
+                )
+              }
+            })()
+          : Promise.resolve({ tailwindConfig: defaultTailwindConfig })
+
+      const globalCssPromise =
+        customGlobalCssStyles.length > 0
+          ? (async () => {
+              // Set loading state
+              setLoadingStyleFiles((prev) => [...prev, "/globals.css"])
+              console.log("[usePublishDialog] Started merging global CSS")
+
+              try {
+                const response = await fetch(
+                  "/api/studio/merge-styles/globals",
+                  {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({
+                      defaultGlobalCss: defaultGlobalCss,
+                      dependencyGlobalCss: customGlobalCssStyles,
+                    }),
+                  },
+                )
+
+                const data = await response.json()
+                result.globalCss = data.globalCss || defaultGlobalCss
+
+                console.log("[usePublishDialog] Completed merging global CSS")
+                return data
+              } catch (error) {
+                console.error("Error merging global CSS:", error)
+                toast.error("Failed to merge global CSS")
+                return { globalCss: defaultGlobalCss }
+              } finally {
+                // Always clear loading state when done, whether successful or not
+                setLoadingStyleFiles((prev) =>
+                  prev.filter((filePath) => filePath !== "/globals.css"),
+                )
+              }
+            })()
+          : Promise.resolve({ globalCss: defaultGlobalCss })
+
+      // Wait for both promises to complete
+      await Promise.all([tailwindConfigPromise, globalCssPromise])
+
+      return result
     },
     [],
   )
@@ -316,7 +381,24 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
       return
     }
 
+    // Clear any existing timeouts
+    if (loadingTimeoutRef.current) {
+      clearTimeout(loadingTimeoutRef.current)
+      loadingTimeoutRef.current = null
+    }
+
+    if (maxLoadingTimeoutRef.current) {
+      clearTimeout(maxLoadingTimeoutRef.current)
+      maxLoadingTimeoutRef.current = null
+    }
+
     setIsProcessing(true)
+    setLoadingShadcnComponents([]) // Reset loading state at the start
+    setLoadingStyleFiles([]) // Reset style loading state too
+
+    console.log(
+      "[usePublishDialog] Starting component processing, cleared all loading states",
+    )
 
     try {
       const response = await fetch("/api/studio/preprocess-component", {
@@ -332,12 +414,18 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
 
       const data = await response.json()
 
-      // Immediately set loading state for shadcn components if any
+      // Set loading state for shadcn components
+      const shadcnSlugs: string[] = []
+
       if (data.shadcnComponentsImports?.length > 0) {
-        // Set the loading state for shadcn components
         const loadingPaths = data.shadcnComponentsImports.map(
-          (component: { name: string }) =>
-            `/components/ui/${component.name.toLowerCase()}.tsx`,
+          (component: { name: string }) => {
+            const path = `/components/ui/${component.name.toLowerCase()}.tsx`
+            shadcnSlugs.push(
+              `shadcn/${component.name.toLowerCase().replace(/\s+/g, "-")}`,
+            )
+            return path
+          },
         )
         console.log(
           "[usePublishDialog] Setting loading components:",
@@ -346,56 +434,169 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
         setLoadingShadcnComponents(loadingPaths)
       }
 
-      // Set processed data after setting loading state
+      // Check for non-shadcn components in the database
+      const dbComponentSlugs: string[] = []
+
+      if (data.nonShadcnComponentsImports?.length > 0) {
+        // Look up components in the database
+        const { lookupResults, remainingComponents } =
+          await lookupComponentsInDatabase(
+            supabase,
+            data.nonShadcnComponentsImports,
+          )
+
+        // Update the processedData with found matches
+        if (lookupResults.length > 0) {
+          // Create loading paths for UI feedback
+          const dbLoadingPaths = lookupResults.map(
+            ({ match }) => `/components/${match.registry}/${match.slug}.tsx`,
+          )
+
+          console.log(
+            "[usePublishDialog] Found components in database:",
+            lookupResults.map((r) => r.match.slug),
+          )
+
+          // Add paths to loading state
+          setLoadingShadcnComponents((prev) => [...prev, ...dbLoadingPaths])
+
+          // Convert matches to dependency slugs for resolveRegistryDependencyTree
+          dbComponentSlugs.push(
+            ...convertComponentMatchesToDependencySlugs(lookupResults),
+          )
+        }
+
+        // Update processed data with the updated non-shadcn component imports
+        data.nonShadcnComponentsImports = remainingComponents
+      }
+
+      // Set processed data BEFORE setting active preview
       setProcessedData(data)
 
-      // Set the processed component as active file
+      // AFTER setting processed data, set the active preview
       const newComponentPath = `/components/${data.registryType || "ui"}/${data.slug ? `${data.slug}.tsx` : "component.tsx"}`
       handlePreviewSelect({
         type: "regular",
         filePath: newComponentPath,
       })
 
-      // If we have shadcn component dependencies, resolve them
-      if (data.shadcnComponentsImports?.length > 0) {
-        const slugs = data.shadcnComponentsImports.map(
-          (component: { name: string }) =>
-            `shadcn/${component.name.toLowerCase().replace(/\s+/g, "-")}`,
-        )
+      // Combine both shadcn and database components into a single array
+      const allDependencySlugs = [...shadcnSlugs, ...dbComponentSlugs]
 
-        const result = await resolveRegistryDependencyTree({
-          supabase,
-          sourceDependencySlugs: slugs,
-          withDemoDependencies: false,
-          withStyles: true, // Enable styles fetching
-        })
+      if (allDependencySlugs.length > 0) {
+        console.log(
+          "[usePublishDialog] Resolving dependencies:",
+          allDependencySlugs,
+        )
 
-        if (result.error) {
-          throw new Error(
-            `Failed to resolve dependencies: ${result.error.message}`,
+        try {
+          // Create a mapping of dependency slugs to their file paths for tracking loading state
+          const slugToFilePaths: Record<string, string> = {}
+
+          // Map shadcn components
+          data.shadcnComponentsImports?.forEach(
+            (component: { name: string }) => {
+              const name = component.name.toLowerCase()
+              const slug = `shadcn/${name.replace(/\s+/g, "-")}`
+              const path = `/components/ui/${name}.tsx`
+              slugToFilePaths[slug] = path
+            },
           )
-        }
 
-        setRegistryDependencies(result.data.filesWithRegistry)
-        setNpmDependenciesOfRegistryDependencies(result.data.npmDependencies)
+          // Map database components from earlier lookupResults
+          if (data.nonShadcnComponentsImports?.length > 0) {
+            const { lookupResults: dbLookup } =
+              await lookupComponentsInDatabase(
+                supabase,
+                data.nonShadcnComponentsImports,
+              )
+
+            dbLookup.forEach((result: any) => {
+              const { match } = result
+              const slug = `${match.registry}/${match.slug}`
+              const path = `/components/${match.registry}/${match.slug}.tsx`
+              slugToFilePaths[slug] = path
+            })
+          }
+
+          // Track which dependencies are loaded
+          const loadedDependencies = new Set<string>()
+
+          // Function to call when a dependency is loaded
+          const handleDependencyLoaded = (slug: string) => {
+            // When a dependency is resolved, remove it from the loading state
+            const path = slugToFilePaths[slug]
+            if (path) {
+              console.log(
+                `[usePublishDialog] Dependency loaded: ${slug} (${path})`,
+              )
+              setLoadingShadcnComponents((prev) =>
+                prev.filter((filePath) => filePath !== path),
+              )
+              loadedDependencies.add(slug)
+            }
+          }
 
-        // Merge styles if we have any
-        if (result.data.styles) {
-          const { tailwindConfig, globalCss } = await mergeStyles([
-            result.data.styles,
-          ])
-          setMergedTailwindConfig(tailwindConfig)
-          setMergedGlobalCss(globalCss)
-        }
+          const result = await resolveRegistryDependencyTree({
+            supabase,
+            sourceDependencySlugs: allDependencySlugs,
+            withDemoDependencies: false,
+            withStyles: true, // Enable styles fetching
+          })
 
-        // Delay clearing the loading state to give UI time to render spinners
-        // This ensures the spinners are visible for a reasonable amount of time
-        setTimeout(() => {
-          console.log(
-            "[usePublishDialog] Clearing loading components with delay",
+          if (result.error) {
+            throw new Error(
+              `Failed to resolve dependencies: ${result.error.message}`,
+            )
+          }
+
+          if (!result.data) {
+            throw new Error("No data returned from dependency resolution")
+          }
+
+          // Process loaded dependencies directly since we've verified data exists
+          Object.keys(result.data.filesWithRegistry).forEach((path) => {
+            const slug = allDependencySlugs.find((s) => {
+              const basePath = path.split("/").pop()?.replace(".tsx", "") || ""
+              return s.includes(basePath)
+            })
+
+            if (slug && !loadedDependencies.has(slug)) {
+              handleDependencyLoaded(slug)
+            }
+
+            // Also check if this is a non-Shadcn component path that we need to remove from loading
+            const nonShadcnPath = path.startsWith("/components/") ? path : null
+            if (nonShadcnPath) {
+              setLoadingShadcnComponents((prev) =>
+                prev.filter((filePath) => filePath !== nonShadcnPath),
+              )
+              console.log(
+                `[usePublishDialog] Removed non-Shadcn component from loading: ${nonShadcnPath}`,
+              )
+            }
+          })
+
+          setRegistryDependencies(result.data.filesWithRegistry)
+          setNpmDependenciesOfRegistryDependencies(result.data.npmDependencies)
+
+          // Merge styles if we have any
+          if (result.data.styles) {
+            const { tailwindConfig, globalCss } = await mergeStyles([
+              result.data.styles,
+            ])
+            setMergedTailwindConfig(tailwindConfig)
+            setMergedGlobalCss(globalCss)
+          }
+        } catch (depError) {
+          console.error("Error resolving dependencies:", depError)
+          toast.error(
+            `Failed to resolve dependencies: ${depError instanceof Error ? depError.message : "Unknown error"}`,
           )
+
+          // Clear component loading state on error
           setLoadingShadcnComponents([])
-        }, 1000) // 1 second delay to ensure UX is smooth
+        }
       }
 
       toast.success("Component processed successfully")
@@ -404,15 +605,30 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
         `Processing failed: ${error instanceof Error ? error.message : "Unknown error"}`,
       )
       console.error("Error processing component:", error)
-      // Clear loading state in case of error with a small delay
-      setTimeout(() => {
-        console.log(
-          "[usePublishDialog] Clearing loading components after error",
-        )
-        setLoadingShadcnComponents([])
-      }, 500)
+      // Clear loading state immediately in case of main process error
+      setLoadingShadcnComponents([])
+      setLoadingStyleFiles([])
     } finally {
       setIsProcessing(false)
+
+      // Set a final cleanup timer just to be safe (with a shorter timeout)
+      loadingTimeoutRef.current = setTimeout(() => {
+        if (loadingShadcnComponents.length > 0) {
+          console.log(
+            "[usePublishDialog] Final safety cleanup for component loading:",
+            loadingShadcnComponents,
+          )
+          setLoadingShadcnComponents([])
+        }
+        if (loadingStyleFiles.length > 0) {
+          console.log(
+            "[usePublishDialog] Final safety cleanup for style loading:",
+            loadingStyleFiles,
+          )
+          setLoadingStyleFiles([])
+        }
+        loadingTimeoutRef.current = null
+      }, 5000) // 5 seconds should be enough for any remaining files
     }
   }
 
@@ -421,7 +637,7 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     (path: string) => {
       return (
         processedData?.nonShadcnComponentsImports?.some(
-          (comp: { path: string }) => comp.path === path,
+          (comp: any) => comp.path === path,
         ) ?? false
       )
     },
@@ -488,6 +704,7 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     isPublishing,
     activePreview,
     loadingShadcnComponents,
+    loadingStyleFiles,
     handleOpenChange,
     handleProcessComponent,
     handlePreviewSelect,
diff --git a/apps/web/lib/component-lookup.ts b/apps/web/lib/component-lookup.ts
new file mode 100644
index 00000000..c1ec327d
--- /dev/null
+++ b/apps/web/lib/component-lookup.ts
@@ -0,0 +1,119 @@
+import { SupabaseClient } from "@supabase/supabase-js"
+import { Database } from "@/types/supabase"
+
+export type NonShadcnComponent = {
+  path: string
+  names: string[]
+}
+
+export type ComponentMatch = {
+  id: number
+  slug: string
+  registry: string
+  username?: string
+}
+
+/**
+ * Looks up non-shadcn components in the database
+ * @param supabase Supabase client instance
+ * @param components Array of non-shadcn components to look up
+ * @returns Object with lookupResults (matches found) and remainingComponents (no matches found)
+ */
+export async function lookupComponentsInDatabase(
+  supabase: SupabaseClient<Database>,
+  components: NonShadcnComponent[],
+): Promise<{
+  lookupResults: { component: NonShadcnComponent; match: ComponentMatch }[]
+  remainingComponents: NonShadcnComponent[]
+}> {
+  if (!components || components.length === 0) {
+    return { lookupResults: [], remainingComponents: [] }
+  }
+
+  const lookupResults: {
+    component: NonShadcnComponent
+    match: ComponentMatch
+  }[] = []
+  const remainingComponents: NonShadcnComponent[] = []
+
+  for (const component of components) {
+    const path = component.path
+    const pathParts = path.split("/")
+    const fileSlug = pathParts[pathParts.length - 1]
+
+    if (!fileSlug) {
+      remainingComponents.push(component)
+      continue
+    }
+
+    // Look for components in the database that match the slug
+    const { data: matchingComponents, error } = await supabase
+      .from("components")
+      .select(
+        "id, component_slug, component_names, registry, user:users!user_id(username, display_username)",
+      )
+      .eq("component_slug", fileSlug)
+
+    if (error || !matchingComponents || matchingComponents.length === 0) {
+      // No matches found, keep as remaining component
+      remainingComponents.push(component)
+      continue
+    }
+
+    // Check each matching component to see if it contains all the required component names
+    let foundMatch = false
+
+    for (const matchingComponent of matchingComponents) {
+      // Parse the component_names JSON array
+      const componentNames = matchingComponent.component_names
+        ? typeof matchingComponent.component_names === "string"
+          ? JSON.parse(matchingComponent.component_names)
+          : matchingComponent.component_names
+        : []
+
+      // Check if all required component names exist in this component
+      const allNamesExist = component.names.every((name: string) =>
+        componentNames.includes(name),
+      )
+
+      if (allNamesExist) {
+        // Found a match!
+        lookupResults.push({
+          component,
+          match: {
+            id: matchingComponent.id,
+            slug: matchingComponent.component_slug,
+            registry: matchingComponent.registry,
+            username:
+              matchingComponent.user?.display_username ||
+              matchingComponent.user?.username,
+          },
+        })
+        foundMatch = true
+        break
+      }
+    }
+
+    if (!foundMatch) {
+      // No exact match found, add to remaining components
+      remainingComponents.push(component)
+    }
+  }
+
+  return { lookupResults, remainingComponents }
+}
+
+/**
+ * Converts component matches to dependency slugs for resolveRegistryDependencyTree
+ * @param matches Array of component matches
+ * @returns Array of dependency slugs in the format "username/slug"
+ */
+export function convertComponentMatchesToDependencySlugs(
+  matches: { component: NonShadcnComponent; match: ComponentMatch }[],
+): string[] {
+  return matches.map(({ match }) => {
+    // For UI components, use 'shadcn' as the registry name to match shadcn convention
+    const registryName = match.registry === "ui" ? "shadcn" : match.registry
+    return `${match.username || registryName}/${match.slug}`
+  })
+}

From 81ba2051ed61dcf79235458110775d6d72e3660f Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Sun, 6 Apr 2025 14:18:43 +0300
Subject: [PATCH 034/143] refactor + disable styles merge

---
 .../studio/editor/hooks/use-editor-dialog.ts  | 122 +-------
 .../studio/editor/utils/merge-styles.ts       | 106 +++++++
 .../studio/editor/utils/sandpack-config.ts    | 294 ------------------
 .../editor/{ => utils}/sandpack-files.ts      |   2 +-
 apps/web/lib/defaults.ts                      | 139 +++++++++
 5 files changed, 251 insertions(+), 412 deletions(-)
 create mode 100644 apps/web/components/features/studio/editor/utils/merge-styles.ts
 delete mode 100644 apps/web/components/features/studio/editor/utils/sandpack-config.ts
 rename apps/web/components/features/studio/editor/{ => utils}/sandpack-files.ts (99%)
 create mode 100644 apps/web/lib/defaults.ts

diff --git a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
index 4e0686eb..7820808d 100644
--- a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
@@ -1,10 +1,10 @@
 import { useState, useCallback, useMemo, useRef, useEffect } from "react"
 import { toast } from "sonner"
 import { useTheme } from "next-themes"
-import { generateSandpackFiles } from "../sandpack-files"
+import { generateSandpackFiles } from "../utils/sandpack-files"
 import { resolveRegistryDependencyTree } from "@/lib/queries.server"
 import { useClerkSupabaseClient } from "@/lib/clerk"
-import { defaultGlobalCss, defaultTailwindConfig } from "@/lib/sandpack"
+import { defaultGlobalCss, defaultTailwindConfig } from "@/lib/defaults"
 import {
   lookupComponentsInDatabase,
   convertComponentMatchesToDependencySlugs,
@@ -147,8 +147,6 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
         ) || {}),
         ...npmDependenciesOfRegistryDependencies,
       },
-      customTailwindConfig: mergedTailwindConfig,
-      customGlobalCss: mergedGlobalCss,
     })
 
     // Add all generated files
@@ -266,114 +264,6 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     [files],
   )
 
-  // Merge styles from dependencies
-  const mergeStyles = useCallback(
-    async (styles: { tailwindConfig?: string; globalCss?: string }[]) => {
-      const customTailwindConfigs = styles
-        .map((s) => s.tailwindConfig)
-        .filter((config): config is string => !!config)
-
-      const customGlobalCssStyles = styles
-        .map((s) => s.globalCss)
-        .filter((css): css is string => !!css)
-
-      // Prepare result object
-      const result: {
-        tailwindConfig: string
-        globalCss: string
-      } = {
-        tailwindConfig: defaultTailwindConfig,
-        globalCss: defaultGlobalCss,
-      }
-
-      // Track each file loading state individually
-      const tailwindConfigPromise =
-        customTailwindConfigs.length > 0
-          ? (async () => {
-              // Set loading state
-              setLoadingStyleFiles((prev) => [...prev, "/tailwind.config.js"])
-              console.log("[usePublishDialog] Started merging tailwind config")
-
-              try {
-                const response = await fetch(
-                  "/api/studio/merge-styles/tailwind",
-                  {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({
-                      defaultConfig: defaultTailwindConfig,
-                      dependencyConfigs: customTailwindConfigs,
-                    }),
-                  },
-                )
-
-                const data = await response.json()
-                result.tailwindConfig =
-                  data.tailwindConfig || defaultTailwindConfig
-
-                console.log(
-                  "[usePublishDialog] Completed merging tailwind config",
-                )
-                return data
-              } catch (error) {
-                console.error("Error merging tailwind config:", error)
-                toast.error("Failed to merge tailwind config")
-                return { tailwindConfig: defaultTailwindConfig }
-              } finally {
-                // Always clear loading state when done, whether successful or not
-                setLoadingStyleFiles((prev) =>
-                  prev.filter((filePath) => filePath !== "/tailwind.config.js"),
-                )
-              }
-            })()
-          : Promise.resolve({ tailwindConfig: defaultTailwindConfig })
-
-      const globalCssPromise =
-        customGlobalCssStyles.length > 0
-          ? (async () => {
-              // Set loading state
-              setLoadingStyleFiles((prev) => [...prev, "/globals.css"])
-              console.log("[usePublishDialog] Started merging global CSS")
-
-              try {
-                const response = await fetch(
-                  "/api/studio/merge-styles/globals",
-                  {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({
-                      defaultGlobalCss: defaultGlobalCss,
-                      dependencyGlobalCss: customGlobalCssStyles,
-                    }),
-                  },
-                )
-
-                const data = await response.json()
-                result.globalCss = data.globalCss || defaultGlobalCss
-
-                console.log("[usePublishDialog] Completed merging global CSS")
-                return data
-              } catch (error) {
-                console.error("Error merging global CSS:", error)
-                toast.error("Failed to merge global CSS")
-                return { globalCss: defaultGlobalCss }
-              } finally {
-                // Always clear loading state when done, whether successful or not
-                setLoadingStyleFiles((prev) =>
-                  prev.filter((filePath) => filePath !== "/globals.css"),
-                )
-              }
-            })()
-          : Promise.resolve({ globalCss: defaultGlobalCss })
-
-      // Wait for both promises to complete
-      await Promise.all([tailwindConfigPromise, globalCssPromise])
-
-      return result
-    },
-    [],
-  )
-
   // Process component
   const handleProcessComponent = async () => {
     if (!componentCode.trim()) {
@@ -582,11 +472,9 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
 
           // Merge styles if we have any
           if (result.data.styles) {
-            const { tailwindConfig, globalCss } = await mergeStyles([
-              result.data.styles,
-            ])
-            setMergedTailwindConfig(tailwindConfig)
-            setMergedGlobalCss(globalCss)
+            // Use defaults for now
+            setMergedTailwindConfig(defaultTailwindConfig)
+            setMergedGlobalCss(defaultGlobalCss)
           }
         } catch (depError) {
           console.error("Error resolving dependencies:", depError)
diff --git a/apps/web/components/features/studio/editor/utils/merge-styles.ts b/apps/web/components/features/studio/editor/utils/merge-styles.ts
new file mode 100644
index 00000000..bf67ca14
--- /dev/null
+++ b/apps/web/components/features/studio/editor/utils/merge-styles.ts
@@ -0,0 +1,106 @@
+import { toast } from "sonner"
+import { defaultGlobalCss, defaultTailwindConfig } from "@/lib/defaults"
+
+/**
+ * Merges tailwind config and global CSS from dependencies
+ *
+ * @param styles Array of style objects containing tailwindConfig and globalCss
+ * @param setLoadingStyleFiles Optional state setter for tracking loading files
+ */
+export async function mergeStyles(
+  styles: { tailwindConfig?: string; globalCss?: string }[],
+  setLoadingStyleFiles?: (callback: (prev: string[]) => string[]) => void,
+) {
+  const customTailwindConfigs = styles
+    .map((s) => s.tailwindConfig)
+    .filter((config): config is string => !!config)
+
+  const customGlobalCssStyles = styles
+    .map((s) => s.globalCss)
+    .filter((css): css is string => !!css)
+
+  // Prepare result object
+  const result: {
+    tailwindConfig: string
+    globalCss: string
+  } = {
+    tailwindConfig: defaultTailwindConfig,
+    globalCss: defaultGlobalCss,
+  }
+
+  // Track each file loading state individually
+  const tailwindConfigPromise =
+    customTailwindConfigs.length > 0
+      ? (async () => {
+          // Set loading state
+          setLoadingStyleFiles?.((prev) => [...prev, "/tailwind.config.js"])
+          console.log("[mergeStyles] Started merging tailwind config")
+
+          try {
+            const response = await fetch("/api/studio/merge-styles/tailwind", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                defaultConfig: defaultTailwindConfig,
+                dependencyConfigs: customTailwindConfigs,
+              }),
+            })
+
+            const data = await response.json()
+            result.tailwindConfig = data.tailwindConfig || defaultTailwindConfig
+
+            console.log("[mergeStyles] Completed merging tailwind config")
+            return data
+          } catch (error) {
+            console.error("Error merging tailwind config:", error)
+            toast.error("Failed to merge tailwind config")
+            return { tailwindConfig: defaultTailwindConfig }
+          } finally {
+            // Always clear loading state when done, whether successful or not
+            setLoadingStyleFiles?.((prev) =>
+              prev.filter((filePath) => filePath !== "/tailwind.config.js"),
+            )
+          }
+        })()
+      : Promise.resolve({ tailwindConfig: defaultTailwindConfig })
+
+  const globalCssPromise =
+    customGlobalCssStyles.length > 0
+      ? (async () => {
+          // Set loading state
+          setLoadingStyleFiles?.((prev) => [...prev, "/globals.css"])
+          console.log("[mergeStyles] Started merging global CSS")
+
+          try {
+            const response = await fetch("/api/studio/merge-styles/globals", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                defaultGlobalCss: defaultGlobalCss,
+                dependencyGlobalCss: customGlobalCssStyles,
+              }),
+            })
+
+            const data = await response.json()
+            result.globalCss = data.globalCss || defaultGlobalCss
+
+            console.log("[mergeStyles] Completed merging global CSS")
+            return data
+          } catch (error) {
+            console.error("Error merging global CSS:", error)
+            toast.error("Failed to merge global CSS")
+            return { globalCss: defaultGlobalCss }
+          } finally {
+            // Always clear loading state when done, whether successful or not
+            setLoadingStyleFiles?.((prev) =>
+              prev.filter((filePath) => filePath !== "/globals.css"),
+            )
+          }
+        })()
+      : Promise.resolve({ globalCss: defaultGlobalCss })
+
+  // Wait for both promises to complete
+  await Promise.all([tailwindConfigPromise, globalCssPromise])
+
+  return result
+}
diff --git a/apps/web/components/features/studio/editor/utils/sandpack-config.ts b/apps/web/components/features/studio/editor/utils/sandpack-config.ts
deleted file mode 100644
index 6e48a9ff..00000000
--- a/apps/web/components/features/studio/editor/utils/sandpack-config.ts
+++ /dev/null
@@ -1,294 +0,0 @@
-import type { SandpackFiles } from "@codesandbox/sandpack-react"
-import { defaultGlobalCss, defaultTailwindConfig } from "@/lib/sandpack"
-
-interface GenerateFilesOptions {
-  componentPath: string
-  componentCode: string
-  processedData: any | null
-  dependencies?: Record<string, string>
-  customTailwindConfig?: string | null
-  customGlobalCss?: string | null
-}
-
-export function generateSandpackFiles({
-  componentPath,
-  componentCode,
-  processedData,
-  dependencies = {},
-  customTailwindConfig = null,
-  customGlobalCss = null,
-}: GenerateFilesOptions): SandpackFiles {
-  const files: SandpackFiles = {
-    [componentPath]: {
-      code: componentCode,
-    },
-    "/package.json": {
-      code: JSON.stringify(
-        {
-          name: "component-project",
-          dependencies: {
-            react: "^18.2.0",
-            "react-dom": "^18.2.0",
-            "@radix-ui/react-select": "^2.0.0",
-            "lucide-react": "^0.363.0",
-            clsx: "^2.1.0",
-            "tailwind-merge": "^2.1.0",
-            ...dependencies,
-          },
-        },
-        null,
-        2,
-      ),
-    },
-    "/index.html": {
-      code: `<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Component Preview</title>
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>`,
-    },
-    "/index.tsx": {
-      code: `import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App";
-import "./globals.css";
-
-const rootElement = document.getElementById("root");
-const root = createRoot(rootElement!);
-
-root.render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-);`,
-    },
-    "/globals.css": {
-      code: customGlobalCss || defaultGlobalCss,
-    },
-    "/tsconfig.json": {
-      code: JSON.stringify(
-        {
-          compilerOptions: {
-            jsx: "react-jsx",
-            esModuleInterop: true,
-            baseUrl: ".",
-            paths: {
-              "@/*": ["./*"],
-            },
-          },
-        },
-        null,
-        2,
-      ),
-    },
-    "/App.tsx": {
-      code: processedData
-        ? `import { ThemeProvider } from "./theme-provider";
-import ${processedData.componentName || "Component"} from "./components/${
-            processedData.registryType || "ui"
-          }/${processedData.slug?.replace(".tsx", "") || "component"}";
-
-export default function App() {
-  return (
-    <ThemeProvider defaultTheme="light" storageKey="sandpack-theme">
-      <div className="container">
-        <${processedData.componentName || "Component"} />
-      </div>
-    </ThemeProvider>
-  );
-}`
-        : `import { ThemeProvider } from "./theme-provider";
-import Component from "${componentPath.replace(".tsx", "")}";
-
-export default function App() {
-  return (
-    <ThemeProvider defaultTheme="light" storageKey="sandpack-theme">
-      <div className="container">
-        <Component />
-      </div>
-    </ThemeProvider>
-  );
-}`,
-    },
-    "/theme-provider.tsx": {
-      code: `import * as React from "react"
-
-const ThemeContext = React.createContext({
-  theme: "light",
-  setTheme: (theme: string) => {},
-  resolvedTheme: "light",
-});
-
-export const useTheme = () => React.useContext(ThemeContext);
-
-export const ThemeProvider = ({ children, defaultTheme = 'light', enableSystem = false }) => {
-  const [theme, setTheme] = React.useState(defaultTheme);
-
-  React.useEffect(() => {
-    const root = window.document.documentElement;
-    root.classList.remove('light', 'dark');
-    root.classList.add(theme);
-  }, [theme]);
-
-  const resolvedTheme = theme === 'system' ? 'light' : theme;
-
-  return (
-    <ThemeContext.Provider value={{ theme, setTheme, resolvedTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-};`,
-    },
-    "/lib/utils.ts": {
-      code: `import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}`,
-    },
-    "/tailwind.config.js": {
-      code: customTailwindConfig || defaultTailwindConfig,
-    },
-    "/node_modules/next/package.json": {
-      code: `{
-  "name": "next",
-  "version": "latest",
-  "main": "index.js"
-}`,
-    },
-    "/node_modules/next/index.js": {
-      code: `export { default as Image } from './image';
-export { default as Link } from './link';
-export { useRouter, RouterProvider, usePathname } from './router';
-export { default as Head } from './head';
-export { default as Script } from './script';
-export { default as dynamic } from './dynamic';
-export { Roboto } from './font';
-export { default as Document } from './document';`,
-    },
-    "/node_modules/next/image.js": {
-      code: `import React from 'react';
-      
-const Image = ({ src, alt, width, height, ...props }) => (
-  <img src={src} alt={alt} width={width} height={height} {...props} />
-);
-
-export default Image;`,
-    },
-    "/node_modules/next/link.js": {
-      code: `import React from 'react';
-      
-const Link = ({ href, children, ...props }) => (
-  <a href={href} {...props}>{children}</a>
-);
-
-export default Link;`,
-    },
-    "/node_modules/next/head.js": {
-      code: `import React from 'react';
-      
-const Head = ({ children }) => {
-  return <div>{children}</div>;
-};
-
-export default Head;`,
-    },
-    "/node_modules/next/script.js": {
-      code: `import React from 'react';
-      
-const Script = ({ src, strategy, children, ...props }) => {
-  return <script src={src} {...props}>{children}</script>;
-};
-
-export default Script;`,
-    },
-    "/node_modules/next/router.js": {
-      code: `import React, { createContext, useContext } from 'react';
-      
-const RouterContext = createContext({
-  pathname: '/',
-  push: (url) => {},
-  replace: (url) => {},
-});
-
-export const useRouter = () => useContext(RouterContext);
-
-export const usePathname = () => {
-  const router = useRouter();
-  return router.pathname;
-};
-
-export const RouterProvider = ({ children }) => {
-  const router = {
-    pathname: '/',
-    push: (url) => {
-      console.log(\`Navigating to \${url}\`);
-    },
-    replace: (url) => {
-      console.log(\`Replacing with \${url}\`);
-    },
-  };
-  
-  return (
-    <RouterContext.Provider value={router}>
-      {children}
-    </RouterContext.Provider>
-  );
-};`,
-    },
-    "/node_modules/next/dynamic.js": {
-      code: `import React, { Suspense } from 'react';
-      
-const dynamic = (importFunc, options = {}) => {
-  const { ssr = true, loading: LoadingComponent = () => <div>Loading...</div> } = options;
-  
-  const LazyComponent = React.lazy(importFunc);
-  
-  return (props) => (
-    <Suspense fallback={<LoadingComponent />}>
-      <LazyComponent {...props} />
-    </Suspense>
-  );
-};
-
-export default dynamic;`,
-    },
-    "/node_modules/next/font.js": {
-      code: `export const Roboto = {
-  className: 'font-roboto',
-};`,
-    },
-    "/node_modules/next/document.js": {
-      code: `import React from 'react';
-
-const Html = ({ children, ...props }) => <html {...props}>{children}</html>;
-const Head = ({ children }) => <head>{children}</head>;
-const Main = () => <div id="__next"></div>;
-const NextScript = () => <script />;
-
-export default function Document() {
-  return (
-    <Html>
-      <Head />
-      <body>
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  );
-}`,
-    },
-    "/node_modules/next/navigation.js": {
-      code: `export { usePathname } from './router';`,
-    },
-  }
-
-  return files
-}
diff --git a/apps/web/components/features/studio/editor/sandpack-files.ts b/apps/web/components/features/studio/editor/utils/sandpack-files.ts
similarity index 99%
rename from apps/web/components/features/studio/editor/sandpack-files.ts
rename to apps/web/components/features/studio/editor/utils/sandpack-files.ts
index 6e48a9ff..242eac58 100644
--- a/apps/web/components/features/studio/editor/sandpack-files.ts
+++ b/apps/web/components/features/studio/editor/utils/sandpack-files.ts
@@ -1,5 +1,5 @@
 import type { SandpackFiles } from "@codesandbox/sandpack-react"
-import { defaultGlobalCss, defaultTailwindConfig } from "@/lib/sandpack"
+import { defaultGlobalCss, defaultTailwindConfig } from "@/lib/defaults"
 
 interface GenerateFilesOptions {
   componentPath: string
diff --git a/apps/web/lib/defaults.ts b/apps/web/lib/defaults.ts
new file mode 100644
index 00000000..c3496c12
--- /dev/null
+++ b/apps/web/lib/defaults.ts
@@ -0,0 +1,139 @@
+// Default Tailwind configuration for shadcn UI components
+export const defaultTailwindConfig = `/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+  ],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}`
+
+// Default global CSS for shadcn UI components
+export const defaultGlobalCss = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5% 64.9%;
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}`

From 7baf88d8a5fde44582a8af21ab63c6cd6e9d567b Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Sun, 6 Apr 2025 15:00:08 +0300
Subject: [PATCH 035/143] init request styles

---
 .../api/studio/preprocess-component/route.ts  |   4 +-
 .../editor/component-publish-dialog.tsx       |  78 +++++-
 .../features/studio/editor/editor.tsx         |  58 ++++-
 .../features/studio/editor/file-explorer.tsx  |  61 ++++-
 .../studio/editor/hooks/use-editor-dialog.ts  | 116 +++++++++
 .../editor/style-requirements-panel.tsx       | 234 ++++++++++++++++++
 6 files changed, 520 insertions(+), 31 deletions(-)
 create mode 100644 apps/web/components/features/studio/editor/style-requirements-panel.tsx

diff --git a/apps/web/app/api/studio/preprocess-component/route.ts b/apps/web/app/api/studio/preprocess-component/route.ts
index 85e87ba6..c198d7e9 100644
--- a/apps/web/app/api/studio/preprocess-component/route.ts
+++ b/apps/web/app/api/studio/preprocess-component/route.ts
@@ -2,7 +2,7 @@ import OpenAI from "openai"
 import { NextResponse } from "next/server"
 import { makeSlugFromName } from "@/components/features/publish-old/hooks/use-is-check-slug-available"
 import { supabaseWithAdminAccess } from "@/lib/supabase"
-import { defaultTailwindConfig, defaultGlobalCss } from "@/lib/sandpack"
+import { defaultTailwindConfig, defaultGlobalCss } from "@/lib/defaults"
 
 const openai = new OpenAI({
   apiKey: process.env.OPENAI_API_KEY,
@@ -173,7 +173,7 @@ async function preprocessComponent(code: string) {
 
 5. List all npm package dependencies used in the component (excluding react, react-dom, tailwindcss, and any packages starting with 'next' or '@/')
 6. Identify any environment variables (process.env.*) that the component requires to function correctly.
-7. Analyze if the component requires additional CSS styles that are NOT already provided in the default shadcn/ui Tailwind configuration and globals CSS.
+7. Analyze if the component requires additional CSS styles that are NOT already provided in the default Tailwind configuration and globals CSS provided below.
 
 IMPORTANT: Only include styles that are NOT already covered by the default tailwind.config.js and globals.css files provided below. 
 - DO NOT include any standard Tailwind classes like 'flex', 'p-4', 'text-sm', etc.
diff --git a/apps/web/components/features/studio/editor/component-publish-dialog.tsx b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
index 2b9ffa26..260e6e75 100644
--- a/apps/web/components/features/studio/editor/component-publish-dialog.tsx
+++ b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
@@ -12,17 +12,17 @@ import { Spinner } from "@/components/icons/spinner"
 import {
   SandpackProvider,
   SandpackLayout,
-  OpenInCodeSandboxButton,
   useSandpack,
 } from "@codesandbox/sandpack-react"
 
 import { FileExplorer } from "./file-explorer"
 import { FallbackComponentView } from "./fallback-component-view"
-import { SimpleEditor, EditorCodePanel } from "./editor-code-panel"
+import { EditorCodePanel } from "./editor-code-panel"
 import { usePublishDialog } from "./hooks/use-editor-dialog"
 import React from "react"
 import { Editor } from "./editor"
-import { CodeManagerProvider } from "./context/editor-state"
+import { StyleRequirementsPanel } from "./style-requirements-panel"
+import { cn } from "@/lib/utils"
 
 interface ComponentPublishDialogProps {
   userId: string
@@ -39,6 +39,7 @@ export function ComponentPublishDialog({
     activePreview,
     loadingShadcnComponents,
     loadingStyleFiles,
+    actionRequiredFiles,
     handleOpenChange,
     handleProcessComponent,
     handlePreviewSelect,
@@ -85,7 +86,19 @@ export function ComponentPublishDialog({
         loadingStyleFiles,
       )
     }
-  }, [loadingShadcnComponents, loadingStyleFiles, processedData])
+
+    if (actionRequiredFiles.length > 0) {
+      console.log(
+        "[ComponentPublishDialog] Files requiring action:",
+        actionRequiredFiles,
+      )
+    }
+  }, [
+    loadingShadcnComponents,
+    loadingStyleFiles,
+    actionRequiredFiles,
+    processedData,
+  ])
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
@@ -97,7 +110,7 @@ export function ComponentPublishDialog({
       </DialogTrigger>
 
       <DialogContent
-        className="sm:max-w-[1200px] sm:w-[90vw] h-[80vh] flex flex-col p-0 gap-0 overflow-hidden"
+        className="sm:max-w-[1600px] sm:w-[95vw] h-[90vh] flex flex-col p-0 gap-0 overflow-hidden"
         hideCloseButton
       >
         <DialogHeader className="flex flex-row p-4 gap-8 items-start justify-between border-b bg-muted">
@@ -160,6 +173,8 @@ export function ComponentPublishDialog({
                   }
                   loadingFiles={loadingShadcnComponents}
                   loadingStyleFiles={loadingStyleFiles}
+                  actionRequiredFiles={actionRequiredFiles}
+                  processedData={processedData}
                 />
               </SandpackProvider>
             ) : (
@@ -176,6 +191,8 @@ export function ComponentPublishDialog({
                   isUnknownComponent={isUnknownComponent}
                   loadingFiles={loadingShadcnComponents}
                   loadingStyleFiles={loadingStyleFiles}
+                  actionRequiredFiles={actionRequiredFiles}
+                  processedData={processedData}
                 />
               </SandpackProvider>
             )}
@@ -203,6 +220,8 @@ interface SandpackContentProps {
   isUnknownComponent: (path: string) => boolean
   loadingFiles?: string[]
   loadingStyleFiles?: string[]
+  actionRequiredFiles?: string[]
+  processedData?: any
 }
 
 function SandpackContent({
@@ -214,6 +233,8 @@ function SandpackContent({
   isUnknownComponent,
   loadingFiles = [],
   loadingStyleFiles = [],
+  actionRequiredFiles = [],
+  processedData,
 }: SandpackContentProps) {
   const { sandpack } = useSandpack()
   const componentPath = getComponentFilePath()
@@ -238,7 +259,13 @@ function SandpackContent({
     if (loadingStyleFiles.length > 0) {
       console.log("[SandpackContent] Style loading files:", loadingStyleFiles)
     }
-  }, [loadingFiles, loadingStyleFiles])
+    if (actionRequiredFiles.length > 0) {
+      console.log(
+        "[SandpackContent] Files requiring action:",
+        actionRequiredFiles,
+      )
+    }
+  }, [loadingFiles, loadingStyleFiles, actionRequiredFiles])
 
   // Set initial file only once when component mounts
   React.useEffect(() => {
@@ -339,24 +366,53 @@ function SandpackContent({
     }
   }, [activePreview, sandpack.activeFile, sandpack.files])
 
+  // Check if the current file needs style updates
+  const showStylePanel =
+    activePreview?.filePath &&
+    actionRequiredFiles.includes(activePreview.filePath) &&
+    processedData?.additionalStyles?.required
+
   return (
-    <SandpackLayout style={{ height: "100%", border: "none" }}>
+    <SandpackLayout style={{ height: "100%" }}>
       <div className="flex w-full h-full">
         <div className="flex border-r border-border">
           <FileExplorer
             nonShadcnComponents={nonShadcnComponents}
             onFileSelect={handleFileSelect}
-            selectedFile={activePreview?.filePath || componentPath}
+            selectedFile={activePreview?.filePath || ""}
+            visibleFiles={sandpack.visibleFiles || []}
             loadingFiles={loadingFiles}
+            loadingStyleFiles={loadingStyleFiles}
+            actionRequiredFiles={actionRequiredFiles}
           />
         </div>
-        <div className="flex-1">
+        <div className="flex-1 flex">
           {activePreview && isUnknownComponent(activePreview.filePath) ? (
             <FallbackComponentView
-              componentName={activePreview.componentName || "Component"}
+              componentName={activePreview.componentName || "Unknown Component"}
             />
           ) : (
-            <SimpleEditor onChange={setComponentCode} />
+            <>
+              <div className={cn("flex-1", showStylePanel && "w-2/3")}>
+                <EditorCodePanel
+                  componentPath={activePreview?.filePath || componentPath}
+                  onCodeChange={(code: string) => {
+                    setComponentCode(code)
+                  }}
+                />
+              </div>
+
+              {/* Style requirements panel */}
+              {showStylePanel && (
+                <div className="w-1/3 p-2">
+                  <StyleRequirementsPanel
+                    actionRequiredFiles={actionRequiredFiles}
+                    additionalStyles={processedData?.additionalStyles}
+                    activeFile={activePreview.filePath}
+                  />
+                </div>
+              )}
+            </>
           )}
         </div>
       </div>
diff --git a/apps/web/components/features/studio/editor/editor.tsx b/apps/web/components/features/studio/editor/editor.tsx
index 6d4b2c75..231852bd 100644
--- a/apps/web/components/features/studio/editor/editor.tsx
+++ b/apps/web/components/features/studio/editor/editor.tsx
@@ -8,6 +8,8 @@ import { CodeManagerProvider, useCodeManager } from "./context/editor-state"
 import { EditorCodePanel } from "./editor-code-panel"
 import { FileExplorer } from "./file-explorer"
 import { FallbackComponentView } from "./fallback-component-view"
+import { StyleRequirementsPanel } from "./style-requirements-panel"
+import { cn } from "@/lib/utils"
 
 interface EditorProps {
   initialFiles: SandpackFiles
@@ -21,6 +23,8 @@ interface EditorProps {
   visiblePaths?: string[]
   loadingFiles?: string[]
   loadingStyleFiles?: string[]
+  actionRequiredFiles?: string[]
+  processedData?: any
 }
 
 export function Editor({
@@ -35,6 +39,8 @@ export function Editor({
   visiblePaths,
   loadingFiles = [],
   loadingStyleFiles = [],
+  actionRequiredFiles = [],
+  processedData,
 }: EditorProps) {
   // Setup sandpack configuration
   const sandpackConfig = {
@@ -68,6 +74,8 @@ export function Editor({
             visiblePaths={visiblePaths}
             loadingFiles={loadingFiles}
             loadingStyleFiles={loadingStyleFiles}
+            actionRequiredFiles={actionRequiredFiles}
+            processedData={processedData}
           />
         </div>
       </CodeManagerProvider>
@@ -79,12 +87,16 @@ interface EditorContentProps {
   visiblePaths?: string[]
   loadingFiles?: string[]
   loadingStyleFiles?: string[]
+  actionRequiredFiles?: string[]
+  processedData?: any // Add this to pass the processed data with styles information
 }
 
 function EditorContent({
   visiblePaths,
   loadingFiles = [],
   loadingStyleFiles = [],
+  actionRequiredFiles = [],
+  processedData,
 }: EditorContentProps) {
   const {
     activeFile,
@@ -123,6 +135,16 @@ function EditorContent({
     }
   }, [loadingStyleFiles])
 
+  // Also add a React.useEffect to log action required files
+  React.useEffect(() => {
+    if (actionRequiredFiles.length > 0) {
+      console.log(
+        "[EditorContent] Files requiring action:",
+        actionRequiredFiles,
+      )
+    }
+  }, [actionRequiredFiles])
+
   // Handle file selection
   const handleFileSelect = (path: string) => {
     selectFile(path)
@@ -145,6 +167,12 @@ function EditorContent({
     return combinedFiles
   }, [loadingFiles, loadingComponents])
 
+  // Check if the current file needs style updates
+  const showStylePanel =
+    activeFile &&
+    actionRequiredFiles.includes(activeFile) &&
+    processedData?.additionalStyles?.required
+
   return (
     <SandpackLayout style={{ height: "100%", border: "none" }}>
       <div className="flex w-full h-full">
@@ -156,20 +184,36 @@ function EditorContent({
             visibleFiles={visiblePaths}
             loadingFiles={allLoadingFiles}
             loadingStyleFiles={loadingStyleFiles}
+            actionRequiredFiles={actionRequiredFiles}
           />
         </div>
-        <div className="flex-1">
+        <div className="flex-1 flex">
           {activeFile && isUnknownComponent(activeFile) ? (
             <FallbackComponentView
               componentName={getComponentName(activeFile) || "Component"}
             />
           ) : (
-            <EditorCodePanel
-              componentPath={activeFile || ""}
-              onCodeChange={() => {
-                // This will be handled by the CodeManager through the CodeEditor component
-              }}
-            />
+            <>
+              <div className={cn("flex-1", showStylePanel && "w-2/3")}>
+                <EditorCodePanel
+                  componentPath={activeFile || ""}
+                  onCodeChange={() => {
+                    // This will be handled by the CodeManager through the CodeEditor component
+                  }}
+                />
+              </div>
+
+              {/* Style requirements panel */}
+              {showStylePanel && (
+                <div className="w-1/3 p-2">
+                  <StyleRequirementsPanel
+                    actionRequiredFiles={actionRequiredFiles}
+                    additionalStyles={processedData?.additionalStyles}
+                    activeFile={activeFile}
+                  />
+                </div>
+              )}
+            </>
           )}
         </div>
       </div>
diff --git a/apps/web/components/features/studio/editor/file-explorer.tsx b/apps/web/components/features/studio/editor/file-explorer.tsx
index 8164ad16..207ccf68 100644
--- a/apps/web/components/features/studio/editor/file-explorer.tsx
+++ b/apps/web/components/features/studio/editor/file-explorer.tsx
@@ -23,6 +23,7 @@ interface FileTreeItem {
   isUnknownComponent?: boolean
   isLoading?: boolean
   isStyleFile?: boolean
+  actionRequired?: boolean
 }
 
 export interface FileExplorerProps {
@@ -40,6 +41,7 @@ export function buildFileTree(
   visibleFiles: string[] = [],
   loadingFiles: string[] = [],
   loadingStyleFiles: string[] = [],
+  actionRequiredFiles: string[] = [],
 ) {
   // Log loading states for debugging
   if (loadingFiles.length > 0) {
@@ -54,6 +56,12 @@ export function buildFileTree(
       loadingStyleFiles,
     )
   }
+  if (actionRequiredFiles.length > 0) {
+    console.log(
+      "[buildFileTree] Building tree with action required files:",
+      actionRequiredFiles,
+    )
+  }
 
   const root: FileTreeItem[] = []
   const directories = new Set<string>()
@@ -122,6 +130,7 @@ export function buildFileTree(
           }
           existingItem.isLoading =
             loadingFiles.includes(path) || loadingStyleFiles.includes(path)
+          existingItem.actionRequired = actionRequiredFiles.includes(path)
         }
         current = existingItem.children || []
       } else {
@@ -135,6 +144,9 @@ export function buildFileTree(
           isLoading: isLast
             ? loadingFiles.includes(path) || loadingStyleFiles.includes(path)
             : undefined,
+          actionRequired: isLast
+            ? actionRequiredFiles.includes(path)
+            : undefined,
         }
 
         const insertIndex = current.findIndex((item) => {
@@ -216,6 +228,7 @@ function FileTreeNode({
   onToggleDir,
   isLoading,
   isStyleLoading,
+  isActionRequired,
   activeFile,
   level = 0,
 }: {
@@ -225,6 +238,7 @@ function FileTreeNode({
   onToggleDir: (path: string) => void
   isLoading: (path: string) => boolean
   isStyleLoading: (path: string) => boolean
+  isActionRequired: (path: string) => boolean
   activeFile?: string
   level?: number
 }) {
@@ -233,6 +247,10 @@ function FileTreeNode({
   const isShadcnFile = item.type === "file" && isShadcnComponentPath(item.path)
   const isTailwindConfig = item.path === "/tailwind.config.js"
   const isGlobalsCss = item.path === "/globals.css"
+  const needsAction =
+    item.actionRequired ||
+    item.isUnknownComponent ||
+    isActionRequired(item.path)
 
   React.useEffect(() => {
     if (item.isLoading) {
@@ -240,7 +258,12 @@ function FileTreeNode({
         `[FileTreeNode] Loading item detected: ${item.name} (${item.path})`,
       )
     }
-  }, [item.isLoading, item.name, item.path])
+    if (needsAction) {
+      console.log(
+        `[FileTreeNode] Action required for: ${item.name} (${item.path})`,
+      )
+    }
+  }, [item.isLoading, item.name, item.path, needsAction])
 
   return (
     <div>
@@ -248,7 +271,7 @@ function FileTreeNode({
         className={cn(
           "w-full text-left py-1.5 text-sm flex items-center gap-2 hover:bg-muted/50 transition-colors",
           isActive && "bg-muted text-primary font-medium",
-          item.isUnknownComponent && isActive && "bg-yellow-500/10",
+          needsAction && isActive && "bg-yellow-500/10",
         )}
         style={{ paddingLeft: `${level * 12 + 16}px` }}
         onClick={() => {
@@ -282,7 +305,7 @@ function FileTreeNode({
           <div className="h-4 w-4 flex items-center justify-center">
             <Spinner size={14} color="#3b82f6" />
           </div>
-        ) : item.isUnknownComponent ? (
+        ) : needsAction ? (
           <FileWarning className="h-4 w-4 text-yellow-500" />
         ) : isShadcnFile ? (
           <ShadcnFile className="h-4 w-4 text-primary" />
@@ -296,12 +319,7 @@ function FileTreeNode({
         {item.isLoading || isLoading(item.path) || isStyleLoading(item.path) ? (
           <TextShimmer className="truncate text-sm">{item.name}</TextShimmer>
         ) : (
-          <span
-            className={cn(
-              "truncate",
-              item.isUnknownComponent && "text-yellow-600",
-            )}
-          >
+          <span className={cn("truncate", needsAction && "text-yellow-600")}>
             {item.name}
           </span>
         )}
@@ -320,6 +338,7 @@ function FileTreeNode({
               onToggleDir={onToggleDir}
               isLoading={isLoading}
               isStyleLoading={isStyleLoading}
+              isActionRequired={isActionRequired}
             />
           ))}
         </div>
@@ -338,7 +357,10 @@ export function FileExplorer({
   visibleFiles,
   loadingFiles = [],
   loadingStyleFiles = [],
-}: FileExplorerProps) {
+  actionRequiredFiles = [],
+}: FileExplorerProps & {
+  actionRequiredFiles?: string[]
+}) {
   const { sandpack } = useSandpack()
   const { visibleFiles: sandpackVisibleFiles } = sandpack
 
@@ -352,7 +374,13 @@ export function FileExplorer({
         loadingStyleFiles,
       )
     }
-  }, [loadingFiles, loadingStyleFiles])
+    if (actionRequiredFiles && actionRequiredFiles.length > 0) {
+      console.log(
+        "[FileExplorer] Received action required files:",
+        actionRequiredFiles,
+      )
+    }
+  }, [loadingFiles, loadingStyleFiles, actionRequiredFiles])
 
   const { tree: fileTree, directories } = useMemo(
     () =>
@@ -362,6 +390,7 @@ export function FileExplorer({
         visibleFiles,
         loadingFiles,
         loadingStyleFiles,
+        actionRequiredFiles,
       ),
     [
       sandpackVisibleFiles,
@@ -369,6 +398,7 @@ export function FileExplorer({
       visibleFiles,
       loadingFiles,
       loadingStyleFiles,
+      actionRequiredFiles,
     ],
   )
 
@@ -418,6 +448,14 @@ export function FileExplorer({
     [loadingStyleFiles],
   )
 
+  // Check if a file needs action
+  const isFileActionRequired = useCallback(
+    (filePath: string) => {
+      return actionRequiredFiles.includes(filePath)
+    },
+    [actionRequiredFiles],
+  )
+
   return (
     <div className="w-64 flex flex-col h-full overflow-auto border-border">
       <div className="p-2 flex justify-between items-center border-b border-border">
@@ -433,6 +471,7 @@ export function FileExplorer({
             onToggleDir={handleToggleDir}
             isLoading={isFileLoading}
             isStyleLoading={isStyleFileLoading}
+            isActionRequired={isFileActionRequired}
             activeFile={selectedFile || undefined}
           />
         ))}
diff --git a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
index 7820808d..a9528835 100644
--- a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
@@ -54,6 +54,8 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
   >([])
   // Add new state for tracking style merging status
   const [loadingStyleFiles, setLoadingStyleFiles] = useState<string[]>([])
+  // Add new state for tracking files that need action (style updates)
+  const [actionRequiredFiles, setActionRequiredFiles] = useState<string[]>([])
 
   // Add ref to track the timeout ID for loading state
   const loadingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
@@ -96,6 +98,7 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     setNpmDependenciesOfRegistryDependencies({})
     setMergedTailwindConfig(null)
     setMergedGlobalCss(null)
+    setActionRequiredFiles([])
   }, [])
 
   // Handle dialog open/close
@@ -285,6 +288,7 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     setIsProcessing(true)
     setLoadingShadcnComponents([]) // Reset loading state at the start
     setLoadingStyleFiles([]) // Reset style loading state too
+    setActionRequiredFiles([]) // Reset action required files
 
     console.log(
       "[usePublishDialog] Starting component processing, cleared all loading states",
@@ -304,6 +308,116 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
 
       const data = await response.json()
 
+      // Check if the API indicates that style updates are needed
+      const styleUpdateFiles: string[] = []
+
+      // Check the additionalStyles property to determine if styles are needed
+      if (data.additionalStyles && data.additionalStyles.required) {
+        console.log(
+          "[usePublishDialog] Component requires style updates:",
+          data.additionalStyles,
+        )
+
+        // Ensure the additionalStyles structure is correctly initialized
+        if (!data.additionalStyles.tailwindExtensions) {
+          data.additionalStyles.tailwindExtensions = {}
+        }
+
+        if (!data.additionalStyles.cssVariables) {
+          data.additionalStyles.cssVariables = []
+        }
+
+        if (!data.additionalStyles.keyframes) {
+          data.additionalStyles.keyframes = []
+        }
+
+        if (!data.additionalStyles.utilities) {
+          data.additionalStyles.utilities = []
+        }
+
+        // Check for Tailwind extensions
+        if (
+          data.additionalStyles.tailwindExtensions &&
+          Object.keys(data.additionalStyles.tailwindExtensions).length > 0
+        ) {
+          styleUpdateFiles.push("/tailwind.config.js")
+          console.log(
+            "[usePublishDialog] Component requires tailwind config updates:",
+            Object.keys(data.additionalStyles.tailwindExtensions),
+          )
+        }
+
+        // Check for CSS variables, keyframes or utilities
+        const hasGlobalCssUpdates =
+          (data.additionalStyles.cssVariables &&
+            data.additionalStyles.cssVariables.length > 0) ||
+          (data.additionalStyles.keyframes &&
+            data.additionalStyles.keyframes.length > 0) ||
+          (data.additionalStyles.utilities &&
+            data.additionalStyles.utilities.length > 0)
+
+        if (hasGlobalCssUpdates) {
+          styleUpdateFiles.push("/globals.css")
+          console.log(
+            "[usePublishDialog] Component requires global CSS updates:",
+            {
+              keyframes: data.additionalStyles.keyframes?.length || 0,
+              cssVariables: data.additionalStyles.cssVariables?.length || 0,
+              utilities: data.additionalStyles.utilities?.length || 0,
+            },
+          )
+        }
+
+        // If additionalStyles is required but no specific files were marked,
+        // default to highlighting both files
+        if (styleUpdateFiles.length === 0) {
+          styleUpdateFiles.push("/tailwind.config.js", "/globals.css")
+          console.log(
+            "[usePublishDialog] Component requires general style updates (no specifics provided)",
+          )
+        }
+
+        // Fix any undefined values in keyframes or utilities
+        if (data.additionalStyles.keyframes) {
+          data.additionalStyles.keyframes = data.additionalStyles.keyframes.map(
+            (keyframe: any) => {
+              if (!keyframe.frames || keyframe.frames === "undefined") {
+                // Provide a default example keyframe definition
+                return {
+                  ...keyframe,
+                  frames:
+                    "0% { opacity: 0; transform: scale(0.95); }\n100% { opacity: 1; transform: scale(1); }",
+                }
+              }
+              return keyframe
+            },
+          )
+        }
+
+        if (data.additionalStyles.utilities) {
+          data.additionalStyles.utilities = data.additionalStyles.utilities.map(
+            (utility: any) => {
+              if (!utility.properties || utility.properties === "undefined") {
+                // Provide a default example utility definition
+                return {
+                  ...utility,
+                  properties: "/* Add your custom styles here */",
+                }
+              }
+              return utility
+            },
+          )
+        }
+      }
+
+      if (styleUpdateFiles.length > 0) {
+        setActionRequiredFiles(styleUpdateFiles)
+        console.log(
+          "[usePublishDialog] Setting action required files:",
+          styleUpdateFiles,
+        )
+      }
+
       // Set loading state for shadcn components
       const shadcnSlugs: string[] = []
 
@@ -496,6 +610,7 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
       // Clear loading state immediately in case of main process error
       setLoadingShadcnComponents([])
       setLoadingStyleFiles([])
+      setActionRequiredFiles([])
     } finally {
       setIsProcessing(false)
 
@@ -593,6 +708,7 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     activePreview,
     loadingShadcnComponents,
     loadingStyleFiles,
+    actionRequiredFiles,
     handleOpenChange,
     handleProcessComponent,
     handlePreviewSelect,
diff --git a/apps/web/components/features/studio/editor/style-requirements-panel.tsx b/apps/web/components/features/studio/editor/style-requirements-panel.tsx
new file mode 100644
index 00000000..a5030eb1
--- /dev/null
+++ b/apps/web/components/features/studio/editor/style-requirements-panel.tsx
@@ -0,0 +1,234 @@
+import { AlertCircle, XIcon } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+interface StyleRequirementsPanelProps {
+  actionRequiredFiles: string[]
+  additionalStyles?: {
+    required?: boolean
+    tailwindExtensions?: Record<string, any>
+    cssVariables?: Array<any>
+    keyframes?: Array<any>
+    utilities?: Array<any>
+  }
+  className?: string
+  activeFile?: string
+}
+
+export function StyleRequirementsPanel({
+  actionRequiredFiles,
+  additionalStyles,
+  className,
+  activeFile,
+}: StyleRequirementsPanelProps) {
+  // If no active file, no action required files, or no additional styles needed, don't show anything
+  if (
+    !activeFile ||
+    !actionRequiredFiles.length ||
+    !additionalStyles?.required
+  ) {
+    return null
+  }
+
+  // Only show the panel if the active file is one that needs action
+  if (!actionRequiredFiles.includes(activeFile)) {
+    return null
+  }
+
+  // Get file-specific content
+  const isTailwindConfig = activeFile === "/tailwind.config.js"
+  const isGlobalCss = activeFile === "/globals.css"
+
+  // Helper function to format code examples nicely
+  const formatKeyframes = (keyframe: any) => {
+    if (!keyframe.frames || keyframe.frames === "undefined") {
+      // Provide useful default if frames are undefined
+      return `@keyframes ${keyframe.name} {
+  0% { opacity: 0; transform: scale(0.95); }
+  100% { opacity: 1; transform: scale(1); }
+}`
+    }
+    return `@keyframes ${keyframe.name} {
+${keyframe.frames}
+}`
+  }
+
+  const formatTailwindExtension = (extensions: Record<string, any>) => {
+    // Create a more helpful representation with actual values
+    const formattedExtensions = { ...extensions }
+
+    // Add example values for empty objects
+    Object.keys(formattedExtensions).forEach((key) => {
+      if (
+        typeof formattedExtensions[key] === "object" &&
+        Object.keys(formattedExtensions[key]).length === 0
+      ) {
+        // Different examples based on the extension type
+        if (key === "colors") {
+          formattedExtensions[key] = {
+            primary: {
+              DEFAULT: "hsl(var(--primary))",
+              foreground: "hsl(var(--primary-foreground))",
+            },
+          }
+        } else if (key === "animations") {
+          formattedExtensions[key] = {
+            appear: "appear 0.2s ease-in-out",
+            "appear-zoom": "appear-zoom 0.2s ease-in-out",
+          }
+        } else if (key === "fontFamily") {
+          formattedExtensions[key] = {
+            sans: ["var(--font-sans)", "sans-serif"],
+          }
+        } else if (key === "borderRadius") {
+          formattedExtensions[key] = {
+            lg: "0.5rem",
+            xl: "1rem",
+          }
+        } else if (key === "boxShadow") {
+          formattedExtensions[key] = {
+            subtle: "0 1px 2px 0 rgb(0 0 0 / 0.1)",
+          }
+        } else if (key === "spacing") {
+          formattedExtensions[key] = {
+            "4.5": "1.125rem",
+          }
+        }
+      }
+    })
+
+    return JSON.stringify(formattedExtensions, null, 2)
+  }
+
+  const title = isTailwindConfig
+    ? "Tailwind Config Extension Required"
+    : isGlobalCss
+      ? "CSS Extension Required"
+      : "Required Updates"
+
+  return (
+    <div
+      className={cn("flex flex-col border border-border h-full rounded-md", className)}
+    >
+      {/* Panel Header */}
+      <div className="flex flex-col sm:flex-row justify-between gap-2 border-b border-border p-3 bg-muted/40">
+        <div className="flex items-center gap-2">
+          <AlertCircle className="h-4 w-4 text-yellow-500" />
+          <div className="flex flex-col">
+            <h2 className="font-medium text-sm text-nowrap">{title}</h2>
+            <h3 className="text-xs">AI Suggestion</h3>
+          </div>
+        </div>
+        <Button variant="outline" size="sm" className="self-start sm:self-auto">
+          Mark as resolved
+        </Button>
+      </div>
+
+      {/* Panel Content */}
+      <div className="overflow-auto p-3 flex-1 text-xs">
+        {isTailwindConfig && (
+          <div className="space-y-3">
+            <p className="text-muted-foreground text-xs">
+              Add the following to your tailwind.config.js in the theme section:
+            </p>
+
+            {additionalStyles?.tailwindExtensions &&
+            Object.keys(additionalStyles.tailwindExtensions).length > 0 ? (
+              <pre className="bg-muted p-3 rounded border border-border text-xs font-mono overflow-auto max-h-[calc(100vh-250px)]">
+                <code>
+                  {`module.exports = {
+  // ... other configs
+  theme: {
+    extend: {
+      // ... existing extensions
+      ${formatTailwindExtension(additionalStyles.tailwindExtensions).slice(1, -1)}
+    }
+  }
+}`}
+                </code>
+              </pre>
+            ) : (
+              <p className="text-muted-foreground text-xs">
+                Update your Tailwind configuration with additional settings.
+              </p>
+            )}
+          </div>
+        )}
+
+        {isGlobalCss && (
+          <div className="space-y-3">
+            <p className="text-muted-foreground text-xs">
+              Add the following to your globals.css file:
+            </p>
+
+            {additionalStyles?.keyframes &&
+              additionalStyles.keyframes.length > 0 && (
+                <div className="mt-3">
+                  <h4 className="font-medium text-xs mb-1">
+                    Keyframe animations:
+                  </h4>
+                  <pre className="bg-muted p-3 rounded border border-border text-xs font-mono overflow-auto max-h-[200px]">
+                    <code>
+                      {additionalStyles.keyframes
+                        .map(formatKeyframes)
+                        .join("\n\n")}
+                    </code>
+                  </pre>
+                </div>
+              )}
+
+            {additionalStyles?.cssVariables &&
+              additionalStyles.cssVariables.length > 0 && (
+                <div className="mt-3">
+                  <h4 className="font-medium text-xs mb-1">CSS variables:</h4>
+                  <pre className="bg-muted p-3 rounded border border-border text-xs font-mono overflow-auto max-h-[200px]">
+                    <code>
+                      {`:root {
+  ${additionalStyles.cssVariables
+    .map((variable: any) => `${variable.name}: ${variable.value || "#000000"}`)
+    .join(";\n  ")};
+}`}
+                    </code>
+                  </pre>
+                </div>
+              )}
+
+            {additionalStyles?.utilities &&
+              additionalStyles.utilities.length > 0 && (
+                <div className="mt-3">
+                  <h4 className="font-medium text-xs mb-1">Utility classes:</h4>
+                  <pre className="bg-muted p-3 rounded border border-border text-xs font-mono overflow-auto max-h-[200px]">
+                    <code>
+                      {additionalStyles.utilities
+                        .map(
+                          (utility: any) =>
+                            `.${utility.name} {
+  ${utility.properties || "/* Add properties here */"}
+}`,
+                        )
+                        .join("\n\n")}
+                    </code>
+                  </pre>
+                </div>
+              )}
+
+            {!additionalStyles?.keyframes?.length &&
+              !additionalStyles?.cssVariables?.length &&
+              !additionalStyles?.utilities?.length && (
+                <p className="text-muted-foreground text-xs">
+                  Update your global CSS file with additional styles for this
+                  component.
+                </p>
+              )}
+          </div>
+        )}
+
+        <div className="mt-3 pt-3 border-t border-border">
+          <p className="text-muted-foreground text-xs">
+            Add these changes to make the component display correctly
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

From 3152789d3d98ac73775410a1b1c43243189ba563 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Sun, 6 Apr 2025 15:18:23 +0300
Subject: [PATCH 036/143] refactor and atom based state of action reqires

---
 .../features/studio/editor/code-manager.tsx   |  22 ---
 .../editor/component-publish-dialog.tsx       | 180 +++++-------------
 .../studio/editor/context/editor-state.tsx    | 141 +++++++++++---
 .../studio/editor/editor-code-panel.tsx       |   2 +-
 .../features/studio/editor/editor.tsx         |  95 +++++----
 .../features/studio/editor/file-explorer.tsx  | 105 ++--------
 .../studio/editor/hooks/use-editor-dialog.ts  | 166 +++-------------
 ...ments-panel.tsx => requirements-panel.tsx} | 137 +++++++------
 .../studio/editor/utils/sandpack-files.ts     |   8 +-
 9 files changed, 317 insertions(+), 539 deletions(-)
 rename apps/web/components/features/studio/editor/{style-requirements-panel.tsx => requirements-panel.tsx} (64%)

diff --git a/apps/web/components/features/studio/editor/code-manager.tsx b/apps/web/components/features/studio/editor/code-manager.tsx
index 4c1b1ca0..a2e3df40 100644
--- a/apps/web/components/features/studio/editor/code-manager.tsx
+++ b/apps/web/components/features/studio/editor/code-manager.tsx
@@ -79,21 +79,10 @@ export function CodeManagerProvider({
     }
   }, [initialComponentPath])
 
-  // Log state changes in development
-  useEffect(() => {
-    console.log("[CodeManager] Current state:", {
-      activeFile,
-      files: Object.keys(sandpack.files),
-      userModifiedFiles,
-    })
-  }, [sandpack.files, activeFile, userModifiedFiles])
-
   // File selection
   const selectFile = (path: string) => {
     if (!path) return
 
-    console.log("[CodeManager] Selecting file:", path)
-
     // Only update Sandpack if it's not an unknown component
     if (!isUnknownComponentFn(path)) {
       sandpack.setActiveFile(path)
@@ -109,12 +98,9 @@ export function CodeManagerProvider({
   }
 
   const updateFileContent = (path: string, content: string) => {
-    console.log("[CodeManager] Updating file content:", path)
-
     // Check if the content is actually different
     const currentContent = getFileContent(path)
     if (currentContent === content) {
-      console.log("[CodeManager] Content unchanged, skipping update:", path)
       return
     }
 
@@ -130,8 +116,6 @@ export function CodeManagerProvider({
   }
 
   const addFile = (path: string, content: string = "") => {
-    console.log("[CodeManager] Adding new file:", path)
-
     sandpack.addFile(path, content)
 
     // Select the newly created file
@@ -139,8 +123,6 @@ export function CodeManagerProvider({
   }
 
   const renameFile = (from: string, to: string) => {
-    console.log("[CodeManager] Renaming file:", { from, to })
-
     // Get the file content
     const fileObj = sandpack.files[from]
 
@@ -169,14 +151,10 @@ export function CodeManagerProvider({
       if (activeFile === from) {
         selectFile(to)
       }
-    } else {
-      console.warn(`[CodeManager] Cannot rename file: File not found ${from}`)
     }
   }
 
   const deleteFile = (path: string) => {
-    console.log("[CodeManager] Deleting file:", path)
-
     // Remove from Sandpack
     sandpack.deleteFile(path)
 
diff --git a/apps/web/components/features/studio/editor/component-publish-dialog.tsx b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
index 260e6e75..1f2c0101 100644
--- a/apps/web/components/features/studio/editor/component-publish-dialog.tsx
+++ b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
@@ -19,10 +19,14 @@ import { FileExplorer } from "./file-explorer"
 import { FallbackComponentView } from "./fallback-component-view"
 import { EditorCodePanel } from "./editor-code-panel"
 import { usePublishDialog } from "./hooks/use-editor-dialog"
-import React from "react"
+import React, { useEffect } from "react"
 import { Editor } from "./editor"
-import { StyleRequirementsPanel } from "./style-requirements-panel"
+import { StyleRequirementsPanel } from "./requirements-panel"
 import { cn } from "@/lib/utils"
+import {
+  useActionRequired,
+  ActionRequiredDetails,
+} from "./context/editor-state"
 
 interface ComponentPublishDialogProps {
   userId: string
@@ -49,57 +53,6 @@ export function ComponentPublishDialog({
     isUnknownComponent,
   } = usePublishDialog({ userId })
 
-  // Simplified useEffect just for logging
-  React.useEffect(() => {
-    if (loadingShadcnComponents.length > 0) {
-      console.log(
-        "[ComponentPublishDialog] Active loading components detected:",
-        loadingShadcnComponents,
-      )
-
-      // Check if our loadingShadcnComponents has paths that match any existing files
-      if (processedData?.shadcnComponentsImports) {
-        const matchingFiles = processedData.shadcnComponentsImports
-          .filter((comp: any) => {
-            const path = `/components/ui/${comp.name.toLowerCase()}.tsx`
-            const isLoading = loadingShadcnComponents.includes(path)
-            console.log(
-              `[ComponentPublishDialog] Component ${comp.name} loading status:`,
-              isLoading,
-            )
-            return isLoading
-          })
-          .map((comp: any) => comp.name)
-
-        if (matchingFiles.length > 0) {
-          console.log(
-            "[ComponentPublishDialog] Currently loading components:",
-            matchingFiles,
-          )
-        }
-      }
-    }
-
-    if (loadingStyleFiles.length > 0) {
-      console.log(
-        "[ComponentPublishDialog] Style files in loading state:",
-        loadingStyleFiles,
-      )
-    }
-
-    if (actionRequiredFiles.length > 0) {
-      console.log(
-        "[ComponentPublishDialog] Files requiring action:",
-        actionRequiredFiles,
-      )
-    }
-  }, [
-    loadingShadcnComponents,
-    loadingStyleFiles,
-    actionRequiredFiles,
-    processedData,
-  ])
-
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
@@ -238,43 +191,44 @@ function SandpackContent({
 }: SandpackContentProps) {
   const { sandpack } = useSandpack()
   const componentPath = getComponentFilePath()
+  const { markFileAsRequiringAction, isActionRequired } = useActionRequired()
 
-  // Log Sandpack state changes
-  React.useEffect(() => {
-    console.log("[EditorDialog] Current Sandpack state:", {
-      activeFile: sandpack.activeFile,
-      files: Object.keys(sandpack.files),
-      visibleFiles: sandpack.visibleFiles,
-      currentFileContent:
-        sandpack.files[sandpack.activeFile]?.code?.slice(0, 50) + "...",
-      stackTrace: new Error().stack,
-    })
-  }, [sandpack.activeFile, sandpack.files, sandpack.visibleFiles])
+  // Initialize action required files from props
+  useEffect(() => {
+    // Add a tracker to prevent infinite loops
+    const processedFileTracker = new Set<string>()
 
-  // Log loading file states
-  React.useEffect(() => {
-    if (loadingFiles.length > 0) {
-      console.log("[SandpackContent] Component loading files:", loadingFiles)
-    }
-    if (loadingStyleFiles.length > 0) {
-      console.log("[SandpackContent] Style loading files:", loadingStyleFiles)
-    }
-    if (actionRequiredFiles.length > 0) {
-      console.log(
-        "[SandpackContent] Files requiring action:",
-        actionRequiredFiles,
-      )
-    }
-  }, [loadingFiles, loadingStyleFiles, actionRequiredFiles])
+    // Add each file that requires action to our atom state
+    actionRequiredFiles.forEach((file) => {
+      // Skip if we've already processed this file
+      if (processedFileTracker.has(file)) return
+      processedFileTracker.add(file)
+
+      if (file === "/tailwind.config.js" || file === "/globals.css") {
+        if (processedData?.additionalStyles?.required) {
+          const details: ActionRequiredDetails = {
+            reason: "styles",
+            tailwindExtensions:
+              processedData.additionalStyles.tailwindExtensions,
+            cssVariables: processedData.additionalStyles.cssVariables,
+            keyframes: processedData.additionalStyles.keyframes,
+            utilities: processedData.additionalStyles.utilities,
+          }
+          markFileAsRequiringAction(file, details)
+        }
+      } else {
+        // For other files (likely missing imports)
+        markFileAsRequiringAction(file, {
+          reason: "missing_import",
+          message: "This component requires additional imports",
+        })
+      }
+    })
+  }, [actionRequiredFiles, processedData, markFileAsRequiringAction])
 
   // Set initial file only once when component mounts
-  React.useEffect(() => {
+  useEffect(() => {
     if (!activePreview) {
-      console.log("[EditorDialog] Setting initial file:", {
-        componentPath,
-        currentSandpackFile: sandpack.activeFile,
-        stackTrace: new Error().stack,
-      })
       sandpack.setActiveFile(componentPath)
       onPreviewSelect({
         type: "regular",
@@ -284,45 +238,19 @@ function SandpackContent({
   }, [componentPath, onPreviewSelect, sandpack, activePreview])
 
   const handleFileSelect = (path: string) => {
-    console.log("[EditorDialog] File selected:", path)
-    console.log("[EditorDialog] Current editor state:", {
-      activeFile: sandpack.activeFile,
-      selectedPath: path,
-      activePreview: activePreview,
-      fileContent: sandpack.files[path]?.code?.slice(0, 50) + "...",
-      currentFileContent:
-        sandpack.files[sandpack.activeFile]?.code?.slice(0, 50) + "...",
-      stackTrace: new Error().stack,
-    })
-
     // If the file is already selected, don't do anything
     if (activePreview?.filePath === path) {
-      console.log("[EditorDialog] File already selected, skipping", {
-        path,
-        activePreview,
-        sandpackFile: sandpack.activeFile,
-      })
       return
     }
 
     // Check if this is an unknown component
     if (isUnknownComponent(path)) {
-      console.log("[EditorDialog] Handling unknown component selection:", {
-        path,
-        currentSandpackFile: sandpack.activeFile,
-        stackTrace: new Error().stack,
-      })
       // For unknown components, get the component name
       const componentName = nonShadcnComponents?.find(
         (comp) => comp.path === path,
       )?.name
 
       if (componentName) {
-        console.log("[EditorDialog] Setting unknown component preview:", {
-          componentName,
-          path,
-          currentSandpackFile: sandpack.activeFile,
-        })
         // Set as unknown component type preview
         onPreviewSelect({
           type: "unknown",
@@ -331,11 +259,6 @@ function SandpackContent({
         })
       }
     } else {
-      console.log("[EditorDialog] Setting regular file preview:", {
-        path,
-        currentSandpackFile: sandpack.activeFile,
-        fileContent: sandpack.files[path]?.code?.slice(0, 50) + "...",
-      })
       // Set as regular file type preview
       sandpack.setActiveFile(path)
       onPreviewSelect({
@@ -346,31 +269,19 @@ function SandpackContent({
   }
 
   // Keep editor file in sync with selection for regular files
-  React.useEffect(() => {
+  useEffect(() => {
     if (
       activePreview?.type === "regular" &&
       activePreview.filePath &&
       sandpack.activeFile !== activePreview.filePath
     ) {
-      console.log("[EditorDialog] Syncing editor file:", {
-        from: sandpack.activeFile,
-        to: activePreview.filePath,
-        activePreviewType: activePreview.type,
-        fileContent:
-          sandpack.files[activePreview.filePath]?.code?.slice(0, 50) + "...",
-        currentFileContent:
-          sandpack.files[sandpack.activeFile]?.code?.slice(0, 50) + "...",
-        stackTrace: new Error().stack,
-      })
       sandpack.setActiveFile(activePreview.filePath)
     }
-  }, [activePreview, sandpack.activeFile, sandpack.files])
+  }, [activePreview, sandpack])
 
   // Check if the current file needs style updates
   const showStylePanel =
-    activePreview?.filePath &&
-    actionRequiredFiles.includes(activePreview.filePath) &&
-    processedData?.additionalStyles?.required
+    activePreview?.filePath && isActionRequired(activePreview.filePath)
 
   return (
     <SandpackLayout style={{ height: "100%" }}>
@@ -383,7 +294,6 @@ function SandpackContent({
             visibleFiles={sandpack.visibleFiles || []}
             loadingFiles={loadingFiles}
             loadingStyleFiles={loadingStyleFiles}
-            actionRequiredFiles={actionRequiredFiles}
           />
         </div>
         <div className="flex-1 flex">
@@ -405,11 +315,7 @@ function SandpackContent({
               {/* Style requirements panel */}
               {showStylePanel && (
                 <div className="w-1/3 p-2">
-                  <StyleRequirementsPanel
-                    actionRequiredFiles={actionRequiredFiles}
-                    additionalStyles={processedData?.additionalStyles}
-                    activeFile={activePreview.filePath}
-                  />
+                  <StyleRequirementsPanel activeFile={activePreview.filePath} />
                 </div>
               )}
             </>
diff --git a/apps/web/components/features/studio/editor/context/editor-state.tsx b/apps/web/components/features/studio/editor/context/editor-state.tsx
index 87158cde..a75761a4 100644
--- a/apps/web/components/features/studio/editor/context/editor-state.tsx
+++ b/apps/web/components/features/studio/editor/context/editor-state.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect } from "react"
+import React, { createContext, useContext, useEffect, useCallback } from "react"
 import { atom, useAtom } from "jotai"
 import { useSandpack } from "@codesandbox/sandpack-react"
 
@@ -7,6 +7,20 @@ export const activeFileAtom = atom<string | null>(null)
 export const userModifiedFilesAtom = atom<Record<string, boolean>>({})
 export const loadingComponentsAtom = atom<string[]>([])
 
+// New atom for files requiring action
+export interface ActionRequiredDetails {
+  reason: "styles" | "missing_import" | "other"
+  message?: string
+  tailwindExtensions?: Record<string, any>
+  cssVariables?: Array<any>
+  keyframes?: Array<any>
+  utilities?: Array<any>
+}
+
+export const actionRequiredFilesAtom = atom<
+  Record<string, ActionRequiredDetails>
+>({})
+
 // Define the types for our context
 interface CodeManagerContextType {
   // File operations
@@ -31,6 +45,16 @@ interface CodeManagerContextType {
   // Loading state
   loadingComponents: string[]
   setLoadingComponents: (paths: string[]) => void
+
+  // Action required state - use functions from useActionRequired
+  actionRequiredFiles: Record<string, ActionRequiredDetails>
+  markFileAsRequiringAction: (
+    path: string,
+    details: ActionRequiredDetails,
+  ) => void
+  markFileAsResolved: (path: string) => void
+  isActionRequired: (path: string) => boolean
+  getActionDetails: (path: string) => ActionRequiredDetails | undefined
 }
 
 const CodeManagerContext = createContext<CodeManagerContextType | null>(null)
@@ -55,6 +79,76 @@ export function useEditorFile() {
   }
 }
 
+// New hook to access action required state directly
+export function useActionRequired() {
+  const [actionRequiredFiles, setActionRequiredFiles] = useAtom(
+    actionRequiredFilesAtom,
+  )
+
+  const markFileAsRequiringAction = useCallback(
+    (path: string, details: ActionRequiredDetails) => {
+      setActionRequiredFiles((prev) => {
+        // Skip update if nothing is changing to prevent loops
+        if (
+          prev[path] &&
+          JSON.stringify(prev[path]) === JSON.stringify(details)
+        ) {
+          return prev
+        }
+
+        console.log(
+          `[useActionRequired] Marking ${path} as requiring action:`,
+          details,
+        )
+        return {
+          ...prev,
+          [path]: details,
+        }
+      })
+    },
+    [setActionRequiredFiles],
+  )
+
+  const markFileAsResolved = useCallback(
+    (path: string) => {
+      setActionRequiredFiles((prev) => {
+        // Skip update if file isn't in the list to prevent unnecessary renders
+        if (!prev[path]) {
+          return prev
+        }
+
+        console.log(`[useActionRequired] Marking ${path} as resolved`)
+        const next = { ...prev }
+        delete next[path]
+        return next
+      })
+    },
+    [setActionRequiredFiles],
+  )
+
+  const isActionRequired = useCallback(
+    (path: string) => {
+      return !!actionRequiredFiles[path]
+    },
+    [actionRequiredFiles],
+  )
+
+  const getActionDetails = useCallback(
+    (path: string) => {
+      return actionRequiredFiles[path]
+    },
+    [actionRequiredFiles],
+  )
+
+  return {
+    actionRequiredFiles,
+    markFileAsRequiringAction,
+    markFileAsResolved,
+    isActionRequired,
+    getActionDetails,
+  }
+}
+
 interface CodeManagerProviderProps {
   children: React.ReactNode
   initialComponentPath: string
@@ -80,6 +174,15 @@ export function CodeManagerProvider({
     loadingComponentsAtom,
   )
 
+  // Get action required functions from the hook instead of redefining them
+  const {
+    actionRequiredFiles,
+    markFileAsRequiringAction,
+    markFileAsResolved,
+    isActionRequired,
+    getActionDetails,
+  } = useActionRequired()
+
   // Initialize with the main component file
   useEffect(() => {
     if (initialComponentPath && !activeFile) {
@@ -87,28 +190,10 @@ export function CodeManagerProvider({
     }
   }, [initialComponentPath])
 
-  // Update the loading components from the CodeManager
-  useEffect(() => {
-    // This is where we would sync with external loading components, if needed
-    console.log("[CodeManager] Loading components:", loadingComponents)
-  }, [loadingComponents])
-
-  // Log state changes in development
-  useEffect(() => {
-    console.log("[CodeManager] Current state:", {
-      activeFile,
-      files: Object.keys(sandpack.files),
-      userModifiedFiles,
-      loadingComponents,
-    })
-  }, [sandpack.files, activeFile, userModifiedFiles, loadingComponents])
-
   // File selection
   const selectFile = (path: string) => {
     if (!path) return
 
-    console.log("[CodeManager] Selecting file:", path)
-
     // Only update Sandpack if it's not an unknown component
     if (!isUnknownComponentFn(path)) {
       sandpack.setActiveFile(path)
@@ -124,12 +209,9 @@ export function CodeManagerProvider({
   }
 
   const updateFileContent = (path: string, content: string) => {
-    console.log("[CodeManager] Updating file content:", path)
-
     // Check if the content is actually different
     const currentContent = getFileContent(path)
     if (currentContent === content) {
-      console.log("[CodeManager] Content unchanged, skipping update:", path)
       return
     }
 
@@ -145,8 +227,6 @@ export function CodeManagerProvider({
   }
 
   const addFile = (path: string, content: string = "") => {
-    console.log("[CodeManager] Adding new file:", path)
-
     sandpack.addFile(path, content)
 
     // Select the newly created file
@@ -154,8 +234,6 @@ export function CodeManagerProvider({
   }
 
   const renameFile = (from: string, to: string) => {
-    console.log("[CodeManager] Renaming file:", { from, to })
-
     // Get the file content
     const fileObj = sandpack.files[from]
 
@@ -184,14 +262,10 @@ export function CodeManagerProvider({
       if (activeFile === from) {
         selectFile(to)
       }
-    } else {
-      console.warn(`[CodeManager] Cannot rename file: File not found ${from}`)
     }
   }
 
   const deleteFile = (path: string) => {
-    console.log("[CodeManager] Deleting file:", path)
-
     // Remove from Sandpack
     sandpack.deleteFile(path)
 
@@ -249,6 +323,13 @@ export function CodeManagerProvider({
     // Loading state
     loadingComponents,
     setLoadingComponents,
+
+    // Action required state - using functions from the hook
+    actionRequiredFiles,
+    markFileAsRequiringAction,
+    markFileAsResolved,
+    isActionRequired,
+    getActionDetails,
   }
 
   return (
diff --git a/apps/web/components/features/studio/editor/editor-code-panel.tsx b/apps/web/components/features/studio/editor/editor-code-panel.tsx
index 7ce3c66d..4f9345af 100644
--- a/apps/web/components/features/studio/editor/editor-code-panel.tsx
+++ b/apps/web/components/features/studio/editor/editor-code-panel.tsx
@@ -74,7 +74,7 @@ interface SimpleEditorProps {
 }
 
 export function SimpleEditor({ onChange }: SimpleEditorProps) {
-  const { code, updateCode } = useActiveCode()
+  const { code } = useActiveCode()
 
   useEffect(() => {
     if (onChange && code) {
diff --git a/apps/web/components/features/studio/editor/editor.tsx b/apps/web/components/features/studio/editor/editor.tsx
index 231852bd..d8686887 100644
--- a/apps/web/components/features/studio/editor/editor.tsx
+++ b/apps/web/components/features/studio/editor/editor.tsx
@@ -1,14 +1,19 @@
-import React from "react"
+import React, { useEffect } from "react"
 import {
   SandpackProvider,
   SandpackLayout,
   SandpackFiles,
 } from "@codesandbox/sandpack-react"
-import { CodeManagerProvider, useCodeManager } from "./context/editor-state"
+import {
+  CodeManagerProvider,
+  useCodeManager,
+  useActionRequired,
+  ActionRequiredDetails,
+} from "./context/editor-state"
 import { EditorCodePanel } from "./editor-code-panel"
 import { FileExplorer } from "./file-explorer"
 import { FallbackComponentView } from "./fallback-component-view"
-import { StyleRequirementsPanel } from "./style-requirements-panel"
+import { StyleRequirementsPanel } from "./requirements-panel"
 import { cn } from "@/lib/utils"
 
 interface EditorProps {
@@ -88,7 +93,7 @@ interface EditorContentProps {
   loadingFiles?: string[]
   loadingStyleFiles?: string[]
   actionRequiredFiles?: string[]
-  processedData?: any // Add this to pass the processed data with styles information
+  processedData?: any
 }
 
 function EditorContent({
@@ -107,43 +112,41 @@ function EditorContent({
     loadingComponents,
   } = useCodeManager()
 
-  // Log loading files for debugging with React.useEffect instead of just useEffect
-  React.useEffect(() => {
-    if (loadingFiles.length > 0) {
-      console.log("[EditorContent] Received loading files:", loadingFiles)
+  const { markFileAsRequiringAction, isActionRequired } = useActionRequired()
 
-      // Force a re-render to ensure loading files are displayed immediately
-      const filesExplorerElement = document.querySelector(
-        "[data-file-explorer]",
-      )
-      if (filesExplorerElement) {
-        filesExplorerElement.classList.add("loading-files-active")
-        setTimeout(() => {
-          filesExplorerElement.classList.remove("loading-files-active")
-        }, 100)
-      }
-    }
-  }, [loadingFiles])
+  // Initialize action required files from props only when they change
+  useEffect(() => {
+    // We need to prevent infinite loops by tracking processed files
+    const processedFileTracker = new Set<string>()
 
-  // Log loading style files
-  React.useEffect(() => {
-    if (loadingStyleFiles.length > 0) {
-      console.log(
-        "[EditorContent] Received loading style files:",
-        loadingStyleFiles,
-      )
-    }
-  }, [loadingStyleFiles])
+    // Clear existing action required files
+    actionRequiredFiles.forEach((file) => {
+      // Skip if we've already processed this file in this effect run
+      if (processedFileTracker.has(file)) return
+      processedFileTracker.add(file)
 
-  // Also add a React.useEffect to log action required files
-  React.useEffect(() => {
-    if (actionRequiredFiles.length > 0) {
-      console.log(
-        "[EditorContent] Files requiring action:",
-        actionRequiredFiles,
-      )
-    }
-  }, [actionRequiredFiles])
+      // For each file marked as requiring action in props
+      if (file === "/tailwind.config.js" || file === "/globals.css") {
+        if (processedData?.additionalStyles?.required) {
+          const details: ActionRequiredDetails = {
+            reason: "styles",
+            tailwindExtensions:
+              processedData.additionalStyles.tailwindExtensions,
+            cssVariables: processedData.additionalStyles.cssVariables,
+            keyframes: processedData.additionalStyles.keyframes,
+            utilities: processedData.additionalStyles.utilities,
+          }
+          markFileAsRequiringAction(file, details)
+        }
+      } else {
+        // For other files (likely missing imports)
+        markFileAsRequiringAction(file, {
+          reason: "missing_import",
+          message: "This component requires additional imports",
+        })
+      }
+    })
+  }, [actionRequiredFiles, processedData, markFileAsRequiringAction])
 
   // Handle file selection
   const handleFileSelect = (path: string) => {
@@ -154,10 +157,6 @@ function EditorContent({
   const allLoadingFiles = React.useMemo(() => {
     const combinedFiles = [...loadingFiles]
     if (loadingComponents && loadingComponents.length > 0) {
-      console.log(
-        "[EditorContent] Combined with context loading files:",
-        loadingComponents,
-      )
       loadingComponents.forEach((file) => {
         if (!combinedFiles.includes(file)) {
           combinedFiles.push(file)
@@ -168,10 +167,7 @@ function EditorContent({
   }, [loadingFiles, loadingComponents])
 
   // Check if the current file needs style updates
-  const showStylePanel =
-    activeFile &&
-    actionRequiredFiles.includes(activeFile) &&
-    processedData?.additionalStyles?.required
+  const showStylePanel = activeFile && isActionRequired(activeFile)
 
   return (
     <SandpackLayout style={{ height: "100%", border: "none" }}>
@@ -184,7 +180,6 @@ function EditorContent({
             visibleFiles={visiblePaths}
             loadingFiles={allLoadingFiles}
             loadingStyleFiles={loadingStyleFiles}
-            actionRequiredFiles={actionRequiredFiles}
           />
         </div>
         <div className="flex-1 flex">
@@ -206,11 +201,7 @@ function EditorContent({
               {/* Style requirements panel */}
               {showStylePanel && (
                 <div className="w-1/3 p-2">
-                  <StyleRequirementsPanel
-                    actionRequiredFiles={actionRequiredFiles}
-                    additionalStyles={processedData?.additionalStyles}
-                    activeFile={activeFile}
-                  />
+                  <StyleRequirementsPanel activeFile={activeFile} />
                 </div>
               )}
             </>
diff --git a/apps/web/components/features/studio/editor/file-explorer.tsx b/apps/web/components/features/studio/editor/file-explorer.tsx
index 207ccf68..33ae1ec8 100644
--- a/apps/web/components/features/studio/editor/file-explorer.tsx
+++ b/apps/web/components/features/studio/editor/file-explorer.tsx
@@ -14,6 +14,7 @@ import ShadcnFile from "@/components/icons/shadcn-file"
 import { isShadcnComponentPath } from "@/lib/shadcn-components"
 import { TextShimmer } from "@/components/ui/text-shimmer"
 import React from "react"
+import { useActionRequired } from "./context/editor-state"
 
 interface FileTreeItem {
   name: string
@@ -43,26 +44,6 @@ export function buildFileTree(
   loadingStyleFiles: string[] = [],
   actionRequiredFiles: string[] = [],
 ) {
-  // Log loading states for debugging
-  if (loadingFiles.length > 0) {
-    console.log(
-      "[buildFileTree] Building tree with loading files:",
-      loadingFiles,
-    )
-  }
-  if (loadingStyleFiles.length > 0) {
-    console.log(
-      "[buildFileTree] Building tree with loading style files:",
-      loadingStyleFiles,
-    )
-  }
-  if (actionRequiredFiles.length > 0) {
-    console.log(
-      "[buildFileTree] Building tree with action required files:",
-      actionRequiredFiles,
-    )
-  }
-
   const root: FileTreeItem[] = []
   const directories = new Set<string>()
 
@@ -109,9 +90,7 @@ export function buildFileTree(
       currentPath += `/${part}`
       const isLast = index === parts.length - 1
       const displayName =
-        isLast && isUnknownComponent
-          ? `${componentName?.toLowerCase()}.tsx`
-          : part
+        isLast && isUnknownComponent ? `${componentName || part}.tsx` : part
       const existingItem = current.find((item) => item.name === displayName)
 
       if (!isLast) {
@@ -174,32 +153,22 @@ export function buildFileTree(
   })
 
   nonShadcnComponents.forEach((comp) => {
-    addToTree(comp.path, true, comp.name)
+    // Extract component name from path if not provided
+    const pathParts = comp.path.split("/")
+    const fileName = pathParts[pathParts.length - 1]
+    addToTree(comp.path, true, comp.name || fileName)
   })
 
-  console.log("[buildFileTree] Processing loading files:", loadingFiles)
   loadingFiles.forEach((path) => {
     const pathParts = path.split("/")
     const fileName = pathParts[pathParts.length - 1] || ""
     const componentName = fileName.replace(".tsx", "")
-
-    console.log(
-      `[buildFileTree] Adding loading file: ${path} (${componentName})`,
-    )
-
     addToTree(path, false, componentName)
   })
 
-  if (loadingStyleFiles.length > 0) {
-    console.log(
-      "[buildFileTree] Processing loading style files:",
-      loadingStyleFiles,
-    )
-    loadingStyleFiles.forEach((path) => {
-      console.log(`[buildFileTree] Adding loading style file: ${path}`)
-      addToTree(path, false, undefined, true)
-    })
-  }
+  loadingStyleFiles.forEach((path) => {
+    addToTree(path, false, "", true)
+  })
 
   const sortTreeRecursively = (items: FileTreeItem[]) => {
     items.sort((a, b) => {
@@ -252,19 +221,6 @@ function FileTreeNode({
     item.isUnknownComponent ||
     isActionRequired(item.path)
 
-  React.useEffect(() => {
-    if (item.isLoading) {
-      console.log(
-        `[FileTreeNode] Loading item detected: ${item.name} (${item.path})`,
-      )
-    }
-    if (needsAction) {
-      console.log(
-        `[FileTreeNode] Action required for: ${item.name} (${item.path})`,
-      )
-    }
-  }, [item.isLoading, item.name, item.path, needsAction])
-
   return (
     <div>
       <button
@@ -357,30 +313,16 @@ export function FileExplorer({
   visibleFiles,
   loadingFiles = [],
   loadingStyleFiles = [],
-  actionRequiredFiles = [],
-}: FileExplorerProps & {
-  actionRequiredFiles?: string[]
-}) {
+}: FileExplorerProps) {
   const { sandpack } = useSandpack()
   const { visibleFiles: sandpackVisibleFiles } = sandpack
+  const { actionRequiredFiles, isActionRequired } = useActionRequired()
 
-  React.useEffect(() => {
-    if (loadingFiles && loadingFiles.length > 0) {
-      console.log("[FileExplorer] Received loading files:", loadingFiles)
-    }
-    if (loadingStyleFiles && loadingStyleFiles.length > 0) {
-      console.log(
-        "[FileExplorer] Received loading style files:",
-        loadingStyleFiles,
-      )
-    }
-    if (actionRequiredFiles && actionRequiredFiles.length > 0) {
-      console.log(
-        "[FileExplorer] Received action required files:",
-        actionRequiredFiles,
-      )
-    }
-  }, [loadingFiles, loadingStyleFiles, actionRequiredFiles])
+  // Convert the actionRequiredFiles record to an array of paths for the file tree
+  const actionRequiredFilesList = useMemo(
+    () => Object.keys(actionRequiredFiles),
+    [actionRequiredFiles],
+  )
 
   const { tree: fileTree, directories } = useMemo(
     () =>
@@ -390,7 +332,7 @@ export function FileExplorer({
         visibleFiles,
         loadingFiles,
         loadingStyleFiles,
-        actionRequiredFiles,
+        actionRequiredFilesList,
       ),
     [
       sandpackVisibleFiles,
@@ -398,7 +340,7 @@ export function FileExplorer({
       visibleFiles,
       loadingFiles,
       loadingStyleFiles,
-      actionRequiredFiles,
+      actionRequiredFilesList,
     ],
   )
 
@@ -418,15 +360,8 @@ export function FileExplorer({
 
   const handleFileClick = useCallback(
     (path: string) => {
-      console.log("[FileExplorer] handleFileClick called with path:", path)
-
       if (onFileSelect) {
-        console.log(
-          "[FileExplorer] onFileSelect handler exists, calling with path",
-        )
         onFileSelect(path)
-      } else {
-        console.log("[FileExplorer] onFileSelect handler not provided")
       }
     },
     [onFileSelect],
@@ -451,9 +386,9 @@ export function FileExplorer({
   // Check if a file needs action
   const isFileActionRequired = useCallback(
     (filePath: string) => {
-      return actionRequiredFiles.includes(filePath)
+      return isActionRequired(filePath)
     },
-    [actionRequiredFiles],
+    [isActionRequired],
   )
 
   return (
diff --git a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
index a9528835..76dfbc6e 100644
--- a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
@@ -113,17 +113,6 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
   // Generate files for Sandpack
   const files = useMemo(() => {
     const componentPath = getComponentFilePath()
-    console.log("[PublishDialog] Generating Sandpack files:", {
-      componentPath,
-      processedData: {
-        registryType: processedData?.registryType,
-        slug: processedData?.slug,
-        componentName: processedData?.componentName,
-      },
-      hasComponentCode: Boolean(componentCode),
-      registryDependenciesFiles: Object.keys(registryDependencies),
-      activePreviewPath: activePreview?.filePath,
-    })
 
     // Start with a fresh copy of all files
     const allFiles: SandpackFiles = {}
@@ -164,46 +153,8 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     // If we have a processed slug, ensure the component is at the correct path
     if (processedData?.slug && generatedFiles["/components/ui/component.tsx"]) {
       allFiles[componentPath] = generatedFiles["/components/ui/component.tsx"]
-      const content = allFiles[componentPath] as string | { code: string }
-      console.log("[PublishDialog] Component file placement:", {
-        path: componentPath,
-        content:
-          typeof content === "string"
-            ? content.slice(0, 100)
-            : content.code.slice(0, 100),
-      })
     }
 
-    // Log the content of key files for debugging
-    const debugPaths = [
-      "/components/blocks/hero-section.tsx",
-      "/components/ui/button.tsx",
-      "/components/ui/badge.tsx",
-      "/components/ui/component.tsx",
-    ]
-
-    console.log("[PublishDialog] File contents check:", {
-      activePreview: activePreview?.filePath,
-      componentPath,
-      fileContents: debugPaths.reduce(
-        (acc, path) => ({
-          ...acc,
-          [path]: (() => {
-            const content = allFiles[path]
-            if (!content) return "not found"
-            return (
-              (typeof content === "string" ? content : content.code).slice(
-                0,
-                50,
-              ) + "..."
-            )
-          })(),
-        }),
-        {},
-      ),
-      allFiles: Object.keys(allFiles),
-    })
-
     return allFiles
   }, [
     getComponentFilePath,
@@ -219,36 +170,11 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
   // Unified handler for preview selection (both files and custom components)
   const handlePreviewSelect = useCallback(
     (newPreview: ActivePreview) => {
-      console.log("[PublishDialog] handlePreviewSelect called with:", {
-        newPreview,
-        currentFiles: Object.keys(files),
-      })
-
       setActivePreview(newPreview)
 
       // Always update component code for regular files
       if (newPreview.type === "regular") {
         const fileContent = files[newPreview.filePath]
-        console.log(
-          "[PublishDialog] Updating component code with file content:",
-          {
-            path: newPreview.filePath,
-            fileContent,
-            allFiles: Object.keys(files).map((path) => ({
-              path,
-              preview: (() => {
-                const content = files[path]
-                if (!content) return "not found"
-                return (
-                  (typeof content === "string" ? content : content.code).slice(
-                    0,
-                    50,
-                  ) + "..."
-                )
-              })(),
-            })),
-          },
-        )
 
         if (fileContent) {
           const newCode =
@@ -256,10 +182,6 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
 
           if (newCode) {
             setComponentCode(newCode)
-            console.log("[PublishDialog] Updated component code:", {
-              path: newPreview.filePath,
-              codePreview: newCode.slice(0, 100),
-            })
           }
         }
       }
@@ -290,10 +212,6 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     setLoadingStyleFiles([]) // Reset style loading state too
     setActionRequiredFiles([]) // Reset action required files
 
-    console.log(
-      "[usePublishDialog] Starting component processing, cleared all loading states",
-    )
-
     try {
       const response = await fetch("/api/studio/preprocess-component", {
         method: "POST",
@@ -313,11 +231,6 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
 
       // Check the additionalStyles property to determine if styles are needed
       if (data.additionalStyles && data.additionalStyles.required) {
-        console.log(
-          "[usePublishDialog] Component requires style updates:",
-          data.additionalStyles,
-        )
-
         // Ensure the additionalStyles structure is correctly initialized
         if (!data.additionalStyles.tailwindExtensions) {
           data.additionalStyles.tailwindExtensions = {}
@@ -338,13 +251,12 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
         // Check for Tailwind extensions
         if (
           data.additionalStyles.tailwindExtensions &&
-          Object.keys(data.additionalStyles.tailwindExtensions).length > 0
+          Object.keys(data.additionalStyles.tailwindExtensions).length > 0 &&
+          Object.values(data.additionalStyles.tailwindExtensions).some(
+            (val: any) => Object.keys(val as object).length > 0,
+          )
         ) {
           styleUpdateFiles.push("/tailwind.config.js")
-          console.log(
-            "[usePublishDialog] Component requires tailwind config updates:",
-            Object.keys(data.additionalStyles.tailwindExtensions),
-          )
         }
 
         // Check for CSS variables, keyframes or utilities
@@ -358,23 +270,28 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
 
         if (hasGlobalCssUpdates) {
           styleUpdateFiles.push("/globals.css")
-          console.log(
-            "[usePublishDialog] Component requires global CSS updates:",
-            {
-              keyframes: data.additionalStyles.keyframes?.length || 0,
-              cssVariables: data.additionalStyles.cssVariables?.length || 0,
-              utilities: data.additionalStyles.utilities?.length || 0,
-            },
-          )
         }
 
         // If additionalStyles is required but no specific files were marked,
-        // default to highlighting both files
-        if (styleUpdateFiles.length === 0) {
+        // default to highlighting both files if there are any non-empty style requirements
+        const hasActualStyleChanges =
+          // Check if there are actual tailwind extensions needed
+          Object.values(data.additionalStyles.tailwindExtensions || {}).some(
+            (val: any) => Object.keys(val as object).length > 0,
+          ) ||
+          // Check if there are CSS variables
+          (data.additionalStyles.cssVariables || []).length > 0 ||
+          // Check if there are keyframes
+          (data.additionalStyles.keyframes || []).length > 0 ||
+          // Check if there are utilities
+          (data.additionalStyles.utilities || []).length > 0
+
+        if (styleUpdateFiles.length === 0 && hasActualStyleChanges) {
           styleUpdateFiles.push("/tailwind.config.js", "/globals.css")
-          console.log(
-            "[usePublishDialog] Component requires general style updates (no specifics provided)",
-          )
+        } else if (styleUpdateFiles.length === 0 && !hasActualStyleChanges) {
+          // If required is true but there's nothing actually to add, this is a false positive
+          // so we should set it to false
+          data.additionalStyles.required = false
         }
 
         // Fix any undefined values in keyframes or utilities
@@ -412,10 +329,6 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
 
       if (styleUpdateFiles.length > 0) {
         setActionRequiredFiles(styleUpdateFiles)
-        console.log(
-          "[usePublishDialog] Setting action required files:",
-          styleUpdateFiles,
-        )
       }
 
       // Set loading state for shadcn components
@@ -431,10 +344,6 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
             return path
           },
         )
-        console.log(
-          "[usePublishDialog] Setting loading components:",
-          loadingPaths,
-        )
         setLoadingShadcnComponents(loadingPaths)
       }
 
@@ -456,11 +365,6 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
             ({ match }) => `/components/${match.registry}/${match.slug}.tsx`,
           )
 
-          console.log(
-            "[usePublishDialog] Found components in database:",
-            lookupResults.map((r) => r.match.slug),
-          )
-
           // Add paths to loading state
           setLoadingShadcnComponents((prev) => [...prev, ...dbLoadingPaths])
 
@@ -488,11 +392,6 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
       const allDependencySlugs = [...shadcnSlugs, ...dbComponentSlugs]
 
       if (allDependencySlugs.length > 0) {
-        console.log(
-          "[usePublishDialog] Resolving dependencies:",
-          allDependencySlugs,
-        )
-
         try {
           // Create a mapping of dependency slugs to their file paths for tracking loading state
           const slugToFilePaths: Record<string, string> = {}
@@ -531,9 +430,6 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
             // When a dependency is resolved, remove it from the loading state
             const path = slugToFilePaths[slug]
             if (path) {
-              console.log(
-                `[usePublishDialog] Dependency loaded: ${slug} (${path})`,
-              )
               setLoadingShadcnComponents((prev) =>
                 prev.filter((filePath) => filePath !== path),
               )
@@ -575,9 +471,6 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
               setLoadingShadcnComponents((prev) =>
                 prev.filter((filePath) => filePath !== nonShadcnPath),
               )
-              console.log(
-                `[usePublishDialog] Removed non-Shadcn component from loading: ${nonShadcnPath}`,
-              )
             }
           })
 
@@ -617,17 +510,9 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
       // Set a final cleanup timer just to be safe (with a shorter timeout)
       loadingTimeoutRef.current = setTimeout(() => {
         if (loadingShadcnComponents.length > 0) {
-          console.log(
-            "[usePublishDialog] Final safety cleanup for component loading:",
-            loadingShadcnComponents,
-          )
           setLoadingShadcnComponents([])
         }
         if (loadingStyleFiles.length > 0) {
-          console.log(
-            "[usePublishDialog] Final safety cleanup for style loading:",
-            loadingStyleFiles,
-          )
           setLoadingStyleFiles([])
         }
         loadingTimeoutRef.current = null
@@ -649,13 +534,6 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
 
   // Sandpack configuration
   const sandpackConfig = useMemo(() => {
-    console.log("[PublishDialog] Creating Sandpack config:", {
-      activePreview,
-      componentPath: getComponentFilePath(),
-      availableFiles: Object.keys(files),
-      registryDependencies: Object.keys(registryDependencies),
-    })
-
     return {
       files,
       options: {
diff --git a/apps/web/components/features/studio/editor/style-requirements-panel.tsx b/apps/web/components/features/studio/editor/requirements-panel.tsx
similarity index 64%
rename from apps/web/components/features/studio/editor/style-requirements-panel.tsx
rename to apps/web/components/features/studio/editor/requirements-panel.tsx
index a5030eb1..f7c65a60 100644
--- a/apps/web/components/features/studio/editor/style-requirements-panel.tsx
+++ b/apps/web/components/features/studio/editor/requirements-panel.tsx
@@ -1,40 +1,39 @@
-import { AlertCircle, XIcon } from "lucide-react"
+import { AlertCircle } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
+import { useActionRequired } from "./context/editor-state"
 
 interface StyleRequirementsPanelProps {
-  actionRequiredFiles: string[]
-  additionalStyles?: {
-    required?: boolean
-    tailwindExtensions?: Record<string, any>
-    cssVariables?: Array<any>
-    keyframes?: Array<any>
-    utilities?: Array<any>
-  }
   className?: string
   activeFile?: string
 }
 
 export function StyleRequirementsPanel({
-  actionRequiredFiles,
-  additionalStyles,
   className,
   activeFile,
 }: StyleRequirementsPanelProps) {
-  // If no active file, no action required files, or no additional styles needed, don't show anything
-  if (
-    !activeFile ||
-    !actionRequiredFiles.length ||
-    !additionalStyles?.required
-  ) {
+  const { getActionDetails, markFileAsResolved } = useActionRequired()
+
+  // If no active file, don't show anything
+  if (!activeFile) {
     return null
   }
 
-  // Only show the panel if the active file is one that needs action
-  if (!actionRequiredFiles.includes(activeFile)) {
+  // Get the action details for the active file
+  const actionDetails = getActionDetails(activeFile)
+
+  // If no action required for this file, don't show anything
+  if (!actionDetails) {
     return null
   }
 
+  // Handle resolving the file
+  const handleResolve = () => {
+    if (activeFile) {
+      markFileAsResolved(activeFile)
+    }
+  }
+
   // Get file-specific content
   const isTailwindConfig = activeFile === "/tailwind.config.js"
   const isGlobalCss = activeFile === "/globals.css"
@@ -104,11 +103,15 @@ ${keyframe.frames}
     ? "Tailwind Config Extension Required"
     : isGlobalCss
       ? "CSS Extension Required"
-      : "Required Updates"
+      : actionDetails.message ||
+        `${actionDetails.reason.replace("_", " ")} Required`
 
   return (
     <div
-      className={cn("flex flex-col border border-border h-full rounded-md", className)}
+      className={cn(
+        "flex flex-col border border-border h-full rounded-md",
+        className,
+      )}
     >
       {/* Panel Header */}
       <div className="flex flex-col sm:flex-row justify-between gap-2 border-b border-border p-3 bg-muted/40">
@@ -119,7 +122,12 @@ ${keyframe.frames}
             <h3 className="text-xs">AI Suggestion</h3>
           </div>
         </div>
-        <Button variant="outline" size="sm" className="self-start sm:self-auto">
+        <Button
+          variant="outline"
+          size="sm"
+          className="self-start sm:self-auto"
+          onClick={handleResolve}
+        >
           Mark as resolved
         </Button>
       </div>
@@ -132,8 +140,8 @@ ${keyframe.frames}
               Add the following to your tailwind.config.js in the theme section:
             </p>
 
-            {additionalStyles?.tailwindExtensions &&
-            Object.keys(additionalStyles.tailwindExtensions).length > 0 ? (
+            {actionDetails?.tailwindExtensions &&
+            Object.keys(actionDetails.tailwindExtensions).length > 0 ? (
               <pre className="bg-muted p-3 rounded border border-border text-xs font-mono overflow-auto max-h-[calc(100vh-250px)]">
                 <code>
                   {`module.exports = {
@@ -141,7 +149,7 @@ ${keyframe.frames}
   theme: {
     extend: {
       // ... existing extensions
-      ${formatTailwindExtension(additionalStyles.tailwindExtensions).slice(1, -1)}
+      ${formatTailwindExtension(actionDetails.tailwindExtensions).slice(1, -1)}
     }
   }
 }`}
@@ -161,30 +169,27 @@ ${keyframe.frames}
               Add the following to your globals.css file:
             </p>
 
-            {additionalStyles?.keyframes &&
-              additionalStyles.keyframes.length > 0 && (
-                <div className="mt-3">
-                  <h4 className="font-medium text-xs mb-1">
-                    Keyframe animations:
-                  </h4>
-                  <pre className="bg-muted p-3 rounded border border-border text-xs font-mono overflow-auto max-h-[200px]">
-                    <code>
-                      {additionalStyles.keyframes
-                        .map(formatKeyframes)
-                        .join("\n\n")}
-                    </code>
-                  </pre>
-                </div>
-              )}
+            {actionDetails?.keyframes && actionDetails.keyframes.length > 0 && (
+              <div className="mt-3">
+                <h4 className="font-medium text-xs mb-1">
+                  Keyframe animations:
+                </h4>
+                <pre className="bg-muted p-3 rounded border border-border text-xs font-mono overflow-auto max-h-[200px]">
+                  <code>
+                    {actionDetails.keyframes.map(formatKeyframes).join("\n\n")}
+                  </code>
+                </pre>
+              </div>
+            )}
 
-            {additionalStyles?.cssVariables &&
-              additionalStyles.cssVariables.length > 0 && (
+            {actionDetails?.cssVariables &&
+              actionDetails.cssVariables.length > 0 && (
                 <div className="mt-3">
                   <h4 className="font-medium text-xs mb-1">CSS variables:</h4>
                   <pre className="bg-muted p-3 rounded border border-border text-xs font-mono overflow-auto max-h-[200px]">
                     <code>
                       {`:root {
-  ${additionalStyles.cssVariables
+  ${actionDetails.cssVariables
     .map((variable: any) => `${variable.name}: ${variable.value || "#000000"}`)
     .join(";\n  ")};
 }`}
@@ -193,28 +198,27 @@ ${keyframe.frames}
                 </div>
               )}
 
-            {additionalStyles?.utilities &&
-              additionalStyles.utilities.length > 0 && (
-                <div className="mt-3">
-                  <h4 className="font-medium text-xs mb-1">Utility classes:</h4>
-                  <pre className="bg-muted p-3 rounded border border-border text-xs font-mono overflow-auto max-h-[200px]">
-                    <code>
-                      {additionalStyles.utilities
-                        .map(
-                          (utility: any) =>
-                            `.${utility.name} {
+            {actionDetails?.utilities && actionDetails.utilities.length > 0 && (
+              <div className="mt-3">
+                <h4 className="font-medium text-xs mb-1">Utility classes:</h4>
+                <pre className="bg-muted p-3 rounded border border-border text-xs font-mono overflow-auto max-h-[200px]">
+                  <code>
+                    {actionDetails.utilities
+                      .map(
+                        (utility: any) =>
+                          `.${utility.name} {
   ${utility.properties || "/* Add properties here */"}
 }`,
-                        )
-                        .join("\n\n")}
-                    </code>
-                  </pre>
-                </div>
-              )}
+                      )
+                      .join("\n\n")}
+                  </code>
+                </pre>
+              </div>
+            )}
 
-            {!additionalStyles?.keyframes?.length &&
-              !additionalStyles?.cssVariables?.length &&
-              !additionalStyles?.utilities?.length && (
+            {!actionDetails?.keyframes?.length &&
+              !actionDetails?.cssVariables?.length &&
+              !actionDetails?.utilities?.length && (
                 <p className="text-muted-foreground text-xs">
                   Update your global CSS file with additional styles for this
                   component.
@@ -223,6 +227,15 @@ ${keyframe.frames}
           </div>
         )}
 
+        {!isTailwindConfig && !isGlobalCss && (
+          <div className="space-y-3">
+            <p className="text-muted-foreground text-xs">
+              {actionDetails.message ||
+                "This file requires action to work properly."}
+            </p>
+          </div>
+        )}
+
         <div className="mt-3 pt-3 border-t border-border">
           <p className="text-muted-foreground text-xs">
             Add these changes to make the component display correctly
diff --git a/apps/web/components/features/studio/editor/utils/sandpack-files.ts b/apps/web/components/features/studio/editor/utils/sandpack-files.ts
index 242eac58..bba1bcb8 100644
--- a/apps/web/components/features/studio/editor/utils/sandpack-files.ts
+++ b/apps/web/components/features/studio/editor/utils/sandpack-files.ts
@@ -228,12 +228,8 @@ export const usePathname = () => {
 export const RouterProvider = ({ children }) => {
   const router = {
     pathname: '/',
-    push: (url) => {
-      console.log(\`Navigating to \${url}\`);
-    },
-    replace: (url) => {
-      console.log(\`Replacing with \${url}\`);
-    },
+    push: (url) => {},
+    replace: (url) => {},
   };
   
   return (

From 37af589ba62e13c119f9b832a39a04ea14a08ce3 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Sun, 6 Apr 2025 16:16:55 +0300
Subject: [PATCH 037/143] request unknown code

---
 .../editor/component-publish-dialog.tsx       | 106 ++++++++++++------
 .../studio/editor/context/editor-state.tsx    |   1 +
 .../studio/editor/editor-code-panel.tsx       |  68 ++++++++++-
 .../features/studio/editor/editor.tsx         |  73 ++++++++----
 .../studio/editor/fallback-component-view.tsx |  23 ----
 .../features/studio/editor/file-explorer.tsx  |  23 ++--
 .../studio/editor/hooks/use-editor-dialog.ts  |  21 ++--
 7 files changed, 210 insertions(+), 105 deletions(-)
 delete mode 100644 apps/web/components/features/studio/editor/fallback-component-view.tsx

diff --git a/apps/web/components/features/studio/editor/component-publish-dialog.tsx b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
index 1f2c0101..1483ec4a 100644
--- a/apps/web/components/features/studio/editor/component-publish-dialog.tsx
+++ b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
@@ -16,7 +16,6 @@ import {
 } from "@codesandbox/sandpack-react"
 
 import { FileExplorer } from "./file-explorer"
-import { FallbackComponentView } from "./fallback-component-view"
 import { EditorCodePanel } from "./editor-code-panel"
 import { usePublishDialog } from "./hooks/use-editor-dialog"
 import React, { useEffect } from "react"
@@ -158,15 +157,10 @@ export function ComponentPublishDialog({
 
 interface SandpackContentProps {
   activePreview: {
-    type: "regular" | "unknown"
+    type: "regular"
     filePath: string
-    componentName?: string
   } | null
-  onPreviewSelect: (preview: {
-    type: "regular" | "unknown"
-    filePath: string
-    componentName?: string
-  }) => void
+  onPreviewSelect: (preview: { type: "regular"; filePath: string }) => void
   nonShadcnComponents?: Array<{ name: string; path: string }>
   getComponentFilePath: () => string
   setComponentCode: (code: string) => void
@@ -243,6 +237,15 @@ function SandpackContent({
       return
     }
 
+    console.log("[ComponentPublishDialog] File selected:", {
+      path,
+      isUnknown: isUnknownComponent(path),
+      existingFiles: Object.keys(sandpack.files),
+    })
+
+    // Normalize path - remove @/ prefix if present
+    const normalizedPath = path.replace(/^@\//, "/")
+
     // Check if this is an unknown component
     if (isUnknownComponent(path)) {
       // For unknown components, get the component name
@@ -251,19 +254,58 @@ function SandpackContent({
       )?.name
 
       if (componentName) {
-        // Set as unknown component type preview
-        onPreviewSelect({
-          type: "unknown",
-          filePath: path,
-          componentName,
-        })
+        // Create an empty file for the unknown component
+        try {
+          console.log(
+            "[ComponentPublishDialog] Creating file for unknown component:",
+            {
+              originalPath: path,
+              normalizedPath,
+              componentName,
+            },
+          )
+
+          // Create file with normalized path
+          sandpack.addFile(
+            normalizedPath,
+            `// TODO: Implement ${componentName} component`,
+          )
+
+          // Mark it as requiring action
+          markFileAsRequiringAction(normalizedPath, {
+            reason: "missing_import",
+            message: `The ${componentName} component needs to be implemented`,
+          })
+
+          // Set as regular file type preview
+          sandpack.setActiveFile(normalizedPath)
+          console.log(
+            "[ComponentPublishDialog] Set active file to:",
+            normalizedPath,
+          )
+
+          onPreviewSelect({
+            type: "regular",
+            filePath: normalizedPath,
+          })
+        } catch (error) {
+          console.error(
+            `[ComponentPublishDialog] Failed to create file for ${componentName}:`,
+            error,
+          )
+        }
       }
     } else {
       // Set as regular file type preview
-      sandpack.setActiveFile(path)
+      sandpack.setActiveFile(normalizedPath)
+      console.log(
+        "[ComponentPublishDialog] Set active file to:",
+        normalizedPath,
+      )
+
       onPreviewSelect({
         type: "regular",
-        filePath: path,
+        filePath: normalizedPath,
       })
     }
   }
@@ -297,28 +339,20 @@ function SandpackContent({
           />
         </div>
         <div className="flex-1 flex">
-          {activePreview && isUnknownComponent(activePreview.filePath) ? (
-            <FallbackComponentView
-              componentName={activePreview.componentName || "Unknown Component"}
+          <div className={cn("flex-1", showStylePanel && "w-2/3")}>
+            <EditorCodePanel
+              componentPath={activePreview?.filePath || componentPath}
+              onCodeChange={(code: string) => {
+                setComponentCode(code)
+              }}
             />
-          ) : (
-            <>
-              <div className={cn("flex-1", showStylePanel && "w-2/3")}>
-                <EditorCodePanel
-                  componentPath={activePreview?.filePath || componentPath}
-                  onCodeChange={(code: string) => {
-                    setComponentCode(code)
-                  }}
-                />
-              </div>
+          </div>
 
-              {/* Style requirements panel */}
-              {showStylePanel && (
-                <div className="w-1/3 p-2">
-                  <StyleRequirementsPanel activeFile={activePreview.filePath} />
-                </div>
-              )}
-            </>
+          {/* Style requirements panel */}
+          {showStylePanel && (
+            <div className="w-1/3 p-2">
+              <StyleRequirementsPanel activeFile={activePreview.filePath} />
+            </div>
           )}
         </div>
       </div>
diff --git a/apps/web/components/features/studio/editor/context/editor-state.tsx b/apps/web/components/features/studio/editor/context/editor-state.tsx
index a75761a4..652838f6 100644
--- a/apps/web/components/features/studio/editor/context/editor-state.tsx
+++ b/apps/web/components/features/studio/editor/context/editor-state.tsx
@@ -292,6 +292,7 @@ export function CodeManagerProvider({
 
   // Component utilities
   const isUnknownComponent = (path: string) => {
+    // We still identify unknown components but they are now handled as regular files
     return isUnknownComponentFn(path)
   }
 
diff --git a/apps/web/components/features/studio/editor/editor-code-panel.tsx b/apps/web/components/features/studio/editor/editor-code-panel.tsx
index 4f9345af..95a82f33 100644
--- a/apps/web/components/features/studio/editor/editor-code-panel.tsx
+++ b/apps/web/components/features/studio/editor/editor-code-panel.tsx
@@ -27,6 +27,51 @@ export function EditorCodePanel({
     codeManager = null
   }
 
+  // Normalize the path
+  const normalizedPath = componentPath.replace(/^@\//, "/")
+
+  // Add logging for debugging
+  useEffect(() => {
+    console.log("[EditorCodePanel] Component mounted/updated", {
+      componentPath,
+      normalizedPath,
+      activeFile: sandpack.activeFile,
+      filesInSandpack: Object.keys(sandpack.files),
+      isActiveFileExist: normalizedPath
+        ? !!sandpack.files[normalizedPath]
+        : false,
+    })
+
+    // If the file doesn't exist and we have a valid path, create it
+    if (normalizedPath && !sandpack.files[normalizedPath] && codeManager) {
+      console.log("[EditorCodePanel] Creating missing file:", normalizedPath)
+      try {
+        // Create the file with placeholder content
+        sandpack.addFile(normalizedPath, "// TODO: Implement this component")
+
+        // Set as active file
+        sandpack.setActiveFile(normalizedPath)
+
+        // Update the code manager if available
+        if (codeManager.addFile) {
+          codeManager.addFile(
+            normalizedPath,
+            "// TODO: Implement this component",
+          )
+        }
+      } catch (error) {
+        console.error("[EditorCodePanel] Failed to create file:", error)
+      }
+    }
+  }, [
+    componentPath,
+    normalizedPath,
+    sandpack.activeFile,
+    sandpack.files,
+    sandpack,
+    codeManager,
+  ])
+
   useEffect(() => {
     if (updatingRef.current) {
       return
@@ -38,15 +83,23 @@ export function EditorCodePanel({
 
     prevCodeRef.current = code
 
-    if (code && sandpack.activeFile === componentPath) {
-      if (codeManager && componentPath) {
+    if (code && sandpack.activeFile === normalizedPath) {
+      console.log("[EditorCodePanel] Code updated", {
+        componentPath,
+        normalizedPath,
+        codeLength: code.length,
+        activeFile: sandpack.activeFile,
+      })
+
+      if (codeManager && normalizedPath) {
         try {
           updatingRef.current = true
-          codeManager.updateFileContent(componentPath, code)
+          codeManager.updateFileContent(normalizedPath, code)
           setTimeout(() => {
             updatingRef.current = false
           }, 50)
         } catch (error) {
+          console.error("[EditorCodePanel] Error updating file content", error)
           updatingRef.current = false
         }
       }
@@ -55,7 +108,14 @@ export function EditorCodePanel({
         onCodeChange(code)
       }
     }
-  }, [code, onCodeChange, sandpack.activeFile, componentPath, codeManager])
+  }, [
+    code,
+    onCodeChange,
+    sandpack.activeFile,
+    componentPath,
+    normalizedPath,
+    codeManager,
+  ])
 
   return (
     <SandpackCodeEditor
diff --git a/apps/web/components/features/studio/editor/editor.tsx b/apps/web/components/features/studio/editor/editor.tsx
index d8686887..3420a5f8 100644
--- a/apps/web/components/features/studio/editor/editor.tsx
+++ b/apps/web/components/features/studio/editor/editor.tsx
@@ -12,7 +12,6 @@ import {
 } from "./context/editor-state"
 import { EditorCodePanel } from "./editor-code-panel"
 import { FileExplorer } from "./file-explorer"
-import { FallbackComponentView } from "./fallback-component-view"
 import { StyleRequirementsPanel } from "./requirements-panel"
 import { cn } from "@/lib/utils"
 
@@ -110,6 +109,8 @@ function EditorContent({
     getComponentName,
     nonShadcnComponents,
     loadingComponents,
+    addFile,
+    allFiles,
   } = useCodeManager()
 
   const { markFileAsRequiringAction, isActionRequired } = useActionRequired()
@@ -150,7 +151,41 @@ function EditorContent({
 
   // Handle file selection
   const handleFileSelect = (path: string) => {
-    selectFile(path)
+    console.log("[Editor] File selected:", {
+      path,
+      isUnknown: isUnknownComponent(path),
+      existingFiles: allFiles,
+    })
+
+    // Normalize path - remove @/ prefix if present
+    const normalizedPath = path.replace(/^@\//, "/")
+
+    // Check if this is an unknown component and create an empty file if needed
+    if (isUnknownComponent(path)) {
+      // Get component name
+      const componentName = getComponentName(path)
+
+      console.log("[Editor] Creating file for unknown component:", {
+        originalPath: path,
+        normalizedPath,
+        componentName,
+      })
+
+      // Create an empty file for the unknown component
+      addFile(
+        normalizedPath,
+        `// TODO: Implement ${componentName || "this"} component`,
+      )
+
+      // Mark it as requiring action
+      markFileAsRequiringAction(normalizedPath, {
+        reason: "missing_import",
+        message: `This component needs to be implemented`,
+      })
+    }
+
+    // Always select the normalized path
+    selectFile(normalizedPath)
   }
 
   // Combine loading files from props and from context
@@ -183,28 +218,20 @@ function EditorContent({
           />
         </div>
         <div className="flex-1 flex">
-          {activeFile && isUnknownComponent(activeFile) ? (
-            <FallbackComponentView
-              componentName={getComponentName(activeFile) || "Component"}
+          <div className={cn("flex-1", showStylePanel && "w-2/3")}>
+            <EditorCodePanel
+              componentPath={activeFile || ""}
+              onCodeChange={() => {
+                // This will be handled by the CodeManager through the CodeEditor component
+              }}
             />
-          ) : (
-            <>
-              <div className={cn("flex-1", showStylePanel && "w-2/3")}>
-                <EditorCodePanel
-                  componentPath={activeFile || ""}
-                  onCodeChange={() => {
-                    // This will be handled by the CodeManager through the CodeEditor component
-                  }}
-                />
-              </div>
-
-              {/* Style requirements panel */}
-              {showStylePanel && (
-                <div className="w-1/3 p-2">
-                  <StyleRequirementsPanel activeFile={activeFile} />
-                </div>
-              )}
-            </>
+          </div>
+
+          {/* Style requirements panel */}
+          {showStylePanel && (
+            <div className="w-1/3 p-2">
+              <StyleRequirementsPanel activeFile={activeFile} />
+            </div>
           )}
         </div>
       </div>
diff --git a/apps/web/components/features/studio/editor/fallback-component-view.tsx b/apps/web/components/features/studio/editor/fallback-component-view.tsx
deleted file mode 100644
index f6135d96..00000000
--- a/apps/web/components/features/studio/editor/fallback-component-view.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { cn } from "@/lib/utils"
-
-interface FallbackComponentViewProps {
-  componentName: string
-  className?: string
-}
-
-export function FallbackComponentView({
-  componentName,
-  className,
-}: FallbackComponentViewProps) {
-  return (
-    <div
-      className={cn(
-        "flex flex-col items-center justify-center h-full p-8 bg-background",
-        className,
-      )}
-    >
-      <div className="text-2xl font-semibold mb-4">Unknown Component</div>
-      <div className="text-xl text-muted-foreground">{componentName}</div>
-    </div>
-  )
-}
diff --git a/apps/web/components/features/studio/editor/file-explorer.tsx b/apps/web/components/features/studio/editor/file-explorer.tsx
index 33ae1ec8..ae673f1f 100644
--- a/apps/web/components/features/studio/editor/file-explorer.tsx
+++ b/apps/web/components/features/studio/editor/file-explorer.tsx
@@ -221,6 +221,21 @@ function FileTreeNode({
     item.isUnknownComponent ||
     isActionRequired(item.path)
 
+  const handleClick = () => {
+    console.log("[FileTreeNode] Item clicked", {
+      path: item.path,
+      type: item.type,
+      isUnknownComponent: item.isUnknownComponent,
+      needsAction,
+    })
+
+    if (item.type === "directory") {
+      onToggleDir(item.path)
+    } else {
+      onFileClick(item.path)
+    }
+  }
+
   return (
     <div>
       <button
@@ -230,13 +245,7 @@ function FileTreeNode({
           needsAction && isActive && "bg-yellow-500/10",
         )}
         style={{ paddingLeft: `${level * 12 + 16}px` }}
-        onClick={() => {
-          if (item.type === "directory") {
-            onToggleDir(item.path)
-          } else {
-            onFileClick(item.path)
-          }
-        }}
+        onClick={handleClick}
       >
         {item.type === "directory" && (
           <div className="w-4 h-4 flex items-center justify-center">
diff --git a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
index 76dfbc6e..11bf72b9 100644
--- a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
@@ -13,9 +13,8 @@ import type { SandpackFiles } from "@codesandbox/sandpack-react"
 
 // Define a type for the active preview
 type ActivePreview = {
-  type: "regular" | "unknown" // "regular" for normal files, "unknown" for custom components
+  type: "regular" // All files are now "regular" type
   filePath: string // The file path (always set)
-  componentName?: string // Only set for unknown components
 }
 
 interface UsePublishDialogProps {
@@ -167,22 +166,20 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     activePreview?.filePath,
   ])
 
-  // Unified handler for preview selection (both files and custom components)
+  // Unified handler for preview selection
   const handlePreviewSelect = useCallback(
     (newPreview: ActivePreview) => {
       setActivePreview(newPreview)
 
-      // Always update component code for regular files
-      if (newPreview.type === "regular") {
-        const fileContent = files[newPreview.filePath]
+      // Always update component code for files
+      const fileContent = files[newPreview.filePath]
 
-        if (fileContent) {
-          const newCode =
-            typeof fileContent === "string" ? fileContent : fileContent.code
+      if (fileContent) {
+        const newCode =
+          typeof fileContent === "string" ? fileContent : fileContent.code
 
-          if (newCode) {
-            setComponentCode(newCode)
-          }
+        if (newCode) {
+          setComponentCode(newCode)
         }
       }
     },

From 816b27b91c061f397b420fd2771d5e514a045322 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Sun, 6 Apr 2025 17:28:39 +0300
Subject: [PATCH 038/143] try

---
 .../editor/component-publish-dialog.tsx       | 293 ++++++++++--------
 .../studio/editor/editor-code-panel.tsx       | 166 +++++++---
 .../features/studio/editor/editor.tsx         | 129 +++++---
 .../features/studio/editor/file-explorer.tsx  |  38 ++-
 .../studio/editor/hooks/use-editor-dialog.ts  |  48 ++-
 .../studio/editor/requirements-panel.tsx      |  16 +-
 6 files changed, 458 insertions(+), 232 deletions(-)

diff --git a/apps/web/components/features/studio/editor/component-publish-dialog.tsx b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
index 1483ec4a..053a2c77 100644
--- a/apps/web/components/features/studio/editor/component-publish-dialog.tsx
+++ b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
@@ -18,9 +18,9 @@ import {
 import { FileExplorer } from "./file-explorer"
 import { EditorCodePanel } from "./editor-code-panel"
 import { usePublishDialog } from "./hooks/use-editor-dialog"
-import React, { useEffect } from "react"
+import React, { useEffect, useRef, useState } from "react"
 import { Editor } from "./editor"
-import { StyleRequirementsPanel } from "./requirements-panel"
+import { RequirementsPanel } from "./requirements-panel"
 import { cn } from "@/lib/utils"
 import {
   useActionRequired,
@@ -31,6 +31,31 @@ interface ComponentPublishDialogProps {
   userId: string
 }
 
+// Create a stable container for SandpackProvider to prevent re-rendering
+const StableSandpackContainer = React.memo(
+  ({ children, config }: { children: React.ReactNode; config: any }) => {
+    // Use a ref to maintain the same config object reference
+    const configRef = useRef(config)
+
+    // Only update the ref if critical values change
+    useEffect(() => {
+      if (config.files !== configRef.current.files) {
+        configRef.current = config
+      }
+    }, [config])
+
+    return (
+      <SandpackProvider {...configRef.current}>{children}</SandpackProvider>
+    )
+  },
+)
+
+// Memoize the Editor component to prevent unnecessary re-renders
+const MemoizedEditor = React.memo(Editor)
+
+// Memoize SandpackContent component
+const MemoizedSandpackContent = React.memo(SandpackContent)
+
 export function ComponentPublishDialog({
   userId,
 }: ComponentPublishDialogProps) {
@@ -52,6 +77,74 @@ export function ComponentPublishDialog({
     isUnknownComponent,
   } = usePublishDialog({ userId })
 
+  // Create a stable reference to dialogContent
+  const [dialogContent, setDialogContent] = useState<React.ReactNode | null>(
+    null,
+  )
+
+  // Only update dialog content when necessary data changes
+  useEffect(() => {
+    if (!open) return
+
+    const content = processedData ? (
+      <StableSandpackContainer config={sandpackConfig}>
+        <MemoizedEditor
+          initialFiles={sandpackConfig.files}
+          mainComponentPath={getComponentFilePath()}
+          nonShadcnComponents={processedData?.nonShadcnComponentsImports}
+          onCodeChange={(path: string, content: string) => {
+            if (path === getComponentFilePath()) {
+              setComponentCode(content)
+            }
+          }}
+          isUnknownComponentFn={isUnknownComponent}
+          activePath={activePreview?.filePath}
+          sandpackTemplate={sandpackConfig.template}
+          dependencies={sandpackConfig.customSetup?.dependencies}
+          visiblePaths={
+            Array.isArray(sandpackConfig.options?.visibleFiles)
+              ? sandpackConfig.options.visibleFiles
+              : [
+                  getComponentFilePath(),
+                  "/components/",
+                  "/tailwind.config.js",
+                  "/globals.css",
+                  "/package.json",
+                ]
+          }
+          loadingFiles={loadingShadcnComponents}
+          loadingStyleFiles={loadingStyleFiles}
+          actionRequiredFiles={actionRequiredFiles}
+          processedData={processedData}
+        />
+      </StableSandpackContainer>
+    ) : (
+      <StableSandpackContainer config={sandpackConfig}>
+        <MemoizedSandpackContent
+          activePreview={activePreview}
+          onPreviewSelect={handlePreviewSelect}
+          nonShadcnComponents={processedData?.nonShadcnComponentsImports}
+          getComponentFilePath={getComponentFilePath}
+          setComponentCode={setComponentCode}
+          isUnknownComponent={isUnknownComponent}
+          loadingFiles={loadingShadcnComponents}
+          loadingStyleFiles={loadingStyleFiles}
+          actionRequiredFiles={actionRequiredFiles}
+          processedData={processedData}
+        />
+      </StableSandpackContainer>
+    )
+
+    setDialogContent(content)
+  }, [
+    open,
+    processedData,
+    sandpackConfig,
+    activePreview,
+    actionRequiredFiles,
+    // Do NOT include frequently changing props that don't affect structure
+  ])
+
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
@@ -94,60 +187,8 @@ export function ComponentPublishDialog({
 
         <div className="flex-grow overflow-hidden flex flex-col h-full">
           <div className="h-full min-h-[400px] overflow-hidden flex-grow">
-            {/* If we have active preview and processed data, use the new CodeEditorComponent */}
-            {processedData ? (
-              <SandpackProvider {...sandpackConfig}>
-                <Editor
-                  initialFiles={sandpackConfig.files}
-                  mainComponentPath={getComponentFilePath()}
-                  nonShadcnComponents={
-                    processedData?.nonShadcnComponentsImports
-                  }
-                  onCodeChange={(path: string, content: string) => {
-                    if (path === getComponentFilePath()) {
-                      setComponentCode(content)
-                    }
-                  }}
-                  isUnknownComponentFn={isUnknownComponent}
-                  activePath={activePreview?.filePath}
-                  sandpackTemplate={sandpackConfig.template}
-                  dependencies={sandpackConfig.customSetup?.dependencies}
-                  visiblePaths={
-                    Array.isArray(sandpackConfig.options?.visibleFiles)
-                      ? sandpackConfig.options.visibleFiles
-                      : [
-                          getComponentFilePath(),
-                          "/components/",
-                          "/tailwind.config.js",
-                          "/globals.css",
-                          "/package.json",
-                        ]
-                  }
-                  loadingFiles={loadingShadcnComponents}
-                  loadingStyleFiles={loadingStyleFiles}
-                  actionRequiredFiles={actionRequiredFiles}
-                  processedData={processedData}
-                />
-              </SandpackProvider>
-            ) : (
-              /* Otherwise use the original SandpackContent */
-              <SandpackProvider {...sandpackConfig}>
-                <SandpackContent
-                  activePreview={activePreview}
-                  onPreviewSelect={handlePreviewSelect}
-                  nonShadcnComponents={
-                    processedData?.nonShadcnComponentsImports
-                  }
-                  getComponentFilePath={getComponentFilePath}
-                  setComponentCode={setComponentCode}
-                  isUnknownComponent={isUnknownComponent}
-                  loadingFiles={loadingShadcnComponents}
-                  loadingStyleFiles={loadingStyleFiles}
-                  actionRequiredFiles={actionRequiredFiles}
-                  processedData={processedData}
-                />
-              </SandpackProvider>
-            )}
+            {/* Render the stable dialog content */}
+            {dialogContent}
           </div>
         </div>
       </DialogContent>
@@ -157,10 +198,15 @@ export function ComponentPublishDialog({
 
 interface SandpackContentProps {
   activePreview: {
-    type: "regular"
+    type: "regular" | "unknown"
     filePath: string
+    componentName?: string
   } | null
-  onPreviewSelect: (preview: { type: "regular"; filePath: string }) => void
+  onPreviewSelect: (preview: {
+    type: "regular" | "unknown"
+    filePath: string
+    componentName?: string
+  }) => void
   nonShadcnComponents?: Array<{ name: string; path: string }>
   getComponentFilePath: () => string
   setComponentCode: (code: string) => void
@@ -186,6 +232,7 @@ function SandpackContent({
   const { sandpack } = useSandpack()
   const componentPath = getComponentFilePath()
   const { markFileAsRequiringAction, isActionRequired } = useActionRequired()
+  const fileContentRef = useRef<Record<string, string>>({})
 
   // Initialize action required files from props
   useEffect(() => {
@@ -220,6 +267,38 @@ function SandpackContent({
     })
   }, [actionRequiredFiles, processedData, markFileAsRequiringAction])
 
+  // Store file content when it changes to prevent losing edits
+  useEffect(() => {
+    const currentContent = sandpack.files[sandpack.activeFile]?.code
+
+    if (currentContent && sandpack.activeFile) {
+      const path = sandpack.activeFile
+
+      // Only update if content actually changed
+      if (fileContentRef.current[path] !== currentContent) {
+        fileContentRef.current[path] = currentContent
+        console.log("[SandpackContent] Stored file content:", {
+          path,
+          contentLength: currentContent.length,
+        })
+      }
+    }
+  }, [sandpack.files, sandpack.activeFile])
+
+  // When a file disappears from sandpack but we have its content, restore it
+  useEffect(() => {
+    Object.entries(fileContentRef.current).forEach(([path, content]) => {
+      if (path && content && !sandpack.files[path]) {
+        console.log("[SandpackContent] Restoring lost file:", path)
+        try {
+          sandpack.addFile(path, content)
+        } catch (error) {
+          console.error("[SandpackContent] Error restoring file:", error)
+        }
+      }
+    })
+  }, [sandpack.files, sandpack])
+
   // Set initial file only once when component mounts
   useEffect(() => {
     if (!activePreview) {
@@ -237,15 +316,6 @@ function SandpackContent({
       return
     }
 
-    console.log("[ComponentPublishDialog] File selected:", {
-      path,
-      isUnknown: isUnknownComponent(path),
-      existingFiles: Object.keys(sandpack.files),
-    })
-
-    // Normalize path - remove @/ prefix if present
-    const normalizedPath = path.replace(/^@\//, "/")
-
     // Check if this is an unknown component
     if (isUnknownComponent(path)) {
       // For unknown components, get the component name
@@ -254,58 +324,19 @@ function SandpackContent({
       )?.name
 
       if (componentName) {
-        // Create an empty file for the unknown component
-        try {
-          console.log(
-            "[ComponentPublishDialog] Creating file for unknown component:",
-            {
-              originalPath: path,
-              normalizedPath,
-              componentName,
-            },
-          )
-
-          // Create file with normalized path
-          sandpack.addFile(
-            normalizedPath,
-            `// TODO: Implement ${componentName} component`,
-          )
-
-          // Mark it as requiring action
-          markFileAsRequiringAction(normalizedPath, {
-            reason: "missing_import",
-            message: `The ${componentName} component needs to be implemented`,
-          })
-
-          // Set as regular file type preview
-          sandpack.setActiveFile(normalizedPath)
-          console.log(
-            "[ComponentPublishDialog] Set active file to:",
-            normalizedPath,
-          )
-
-          onPreviewSelect({
-            type: "regular",
-            filePath: normalizedPath,
-          })
-        } catch (error) {
-          console.error(
-            `[ComponentPublishDialog] Failed to create file for ${componentName}:`,
-            error,
-          )
-        }
+        // Set as unknown component type preview
+        onPreviewSelect({
+          type: "unknown",
+          filePath: path,
+          componentName,
+        })
       }
     } else {
       // Set as regular file type preview
-      sandpack.setActiveFile(normalizedPath)
-      console.log(
-        "[ComponentPublishDialog] Set active file to:",
-        normalizedPath,
-      )
-
+      sandpack.setActiveFile(path)
       onPreviewSelect({
         type: "regular",
-        filePath: normalizedPath,
+        filePath: path,
       })
     }
   }
@@ -323,7 +354,9 @@ function SandpackContent({
 
   // Check if the current file needs style updates
   const showStylePanel =
-    activePreview?.filePath && isActionRequired(activePreview.filePath)
+    activePreview?.filePath &&
+    isActionRequired(activePreview.filePath) &&
+    activePreview.type !== "unknown" // Don't show panel for unknown components
 
   return (
     <SandpackLayout style={{ height: "100%" }}>
@@ -339,21 +372,23 @@ function SandpackContent({
           />
         </div>
         <div className="flex-1 flex">
-          <div className={cn("flex-1", showStylePanel && "w-2/3")}>
-            <EditorCodePanel
-              componentPath={activePreview?.filePath || componentPath}
-              onCodeChange={(code: string) => {
-                setComponentCode(code)
-              }}
-            />
-          </div>
-
-          {/* Style requirements panel */}
-          {showStylePanel && (
-            <div className="w-1/3 p-2">
-              <StyleRequirementsPanel activeFile={activePreview.filePath} />
+          <>
+            <div className={cn("flex-1", showStylePanel && "w-2/3")}>
+              <EditorCodePanel
+                componentPath={activePreview?.filePath || componentPath}
+                onCodeChange={(code: string) => {
+                  setComponentCode(code)
+                }}
+              />
             </div>
-          )}
+
+            {/* Style requirements panel */}
+            {showStylePanel && (
+              <div className="w-1/3 p-2">
+                <RequirementsPanel activeFile={activePreview.filePath} />
+              </div>
+            )}
+          </>
         </div>
       </div>
     </SandpackLayout>
diff --git a/apps/web/components/features/studio/editor/editor-code-panel.tsx b/apps/web/components/features/studio/editor/editor-code-panel.tsx
index 95a82f33..65c48a50 100644
--- a/apps/web/components/features/studio/editor/editor-code-panel.tsx
+++ b/apps/web/components/features/studio/editor/editor-code-panel.tsx
@@ -1,17 +1,24 @@
-import React, { useEffect, useRef } from "react"
+import React, { useEffect, useRef, useCallback, useMemo } from "react"
 import {
   SandpackCodeEditor,
   useActiveCode,
   useSandpack,
 } from "@codesandbox/sandpack-react"
-import { useCodeManager } from "./context/editor-state"
+import { useCodeManager, useActionRequired } from "./context/editor-state"
+
+// Create a persistent file content cache that survives component remounts
+const globalFileContentCache = new Map<string, string>()
+
+// Memoize the SandpackCodeEditor to prevent unnecessary re-renders
+const MemoizedSandpackCodeEditor = React.memo(SandpackCodeEditor)
 
 interface EditorCodePanelProps {
   onCodeChange?: (code: string) => void
   componentPath: string
 }
 
-export function EditorCodePanel({
+// Wrap the EditorCodePanel in React.memo for additional performance
+export const EditorCodePanel = React.memo(function EditorCodePanel({
   onCodeChange,
   componentPath,
 }: EditorCodePanelProps) {
@@ -19,6 +26,8 @@ export function EditorCodePanel({
   const { sandpack } = useSandpack()
   const prevCodeRef = useRef<string>(undefined)
   const updatingRef = useRef(false)
+  const initialCodeRef = useRef<string | null>(null)
+  const { markFileAsResolved, isActionRequired } = useActionRequired()
 
   let codeManager
   try {
@@ -27,69 +36,114 @@ export function EditorCodePanel({
     codeManager = null
   }
 
-  // Normalize the path
-  const normalizedPath = componentPath.replace(/^@\//, "/")
+  // Normalize the path - only compute this once per componentPath change
+  const normalizedPath = useMemo(
+    () => componentPath.replace(/^@\//, "/"),
+    [componentPath],
+  )
+
+  // Check if this is an unknown component that needs action - memoize this value
+  const isUnknownComponent = useMemo(
+    () => codeManager?.isUnknownComponent?.(componentPath) || false,
+    [codeManager, componentPath],
+  )
 
-  // Add logging for debugging
+  // Store the initial code value for comparison
   useEffect(() => {
-    console.log("[EditorCodePanel] Component mounted/updated", {
-      componentPath,
-      normalizedPath,
-      activeFile: sandpack.activeFile,
-      filesInSandpack: Object.keys(sandpack.files),
-      isActiveFileExist: normalizedPath
-        ? !!sandpack.files[normalizedPath]
-        : false,
-    })
-
-    // If the file doesn't exist and we have a valid path, create it
-    if (normalizedPath && !sandpack.files[normalizedPath] && codeManager) {
-      console.log("[EditorCodePanel] Creating missing file:", normalizedPath)
+    if (code && !initialCodeRef.current) {
+      initialCodeRef.current = code
+    }
+  }, [code])
+
+  // Handle file restoration or creation - use useCallback for better performance
+  const handleFileMissing = useCallback(() => {
+    if (!normalizedPath || sandpack.files[normalizedPath]) return
+
+    // Check if we have cached content for this file
+    const cachedContent = globalFileContentCache.get(normalizedPath)
+
+    if (cachedContent) {
+      try {
+        // Restore the file with cached content
+        sandpack.addFile(normalizedPath, cachedContent)
+
+        // Set as active file
+        sandpack.setActiveFile(normalizedPath)
+
+        // Update the code manager if available
+        if (codeManager?.addFile) {
+          codeManager.addFile(normalizedPath, cachedContent)
+        }
+      } catch (error) {
+        console.error("[EditorCodePanel] Failed to restore file:", error)
+      }
+    } else if (codeManager) {
       try {
         // Create the file with placeholder content
-        sandpack.addFile(normalizedPath, "// TODO: Implement this component")
+        const defaultContent = "// TODO: Implement this component"
+        sandpack.addFile(normalizedPath, defaultContent)
 
         // Set as active file
         sandpack.setActiveFile(normalizedPath)
 
         // Update the code manager if available
         if (codeManager.addFile) {
-          codeManager.addFile(
-            normalizedPath,
-            "// TODO: Implement this component",
-          )
+          codeManager.addFile(normalizedPath, defaultContent)
         }
+
+        // Add to cache
+        globalFileContentCache.set(normalizedPath, defaultContent)
       } catch (error) {
         console.error("[EditorCodePanel] Failed to create file:", error)
       }
     }
+  }, [normalizedPath, sandpack, codeManager])
+
+  useEffect(() => {
+    // If the file doesn't exist and we have a valid path, create it or restore it
+    handleFileMissing()
+
+    // Create a stable interval that checks for file existence periodically
+    // This helps ensure the file is restored if it gets deleted during component lifecycle
+    const intervalId = setInterval(() => {
+      if (normalizedPath && !sandpack.files[normalizedPath]) {
+        handleFileMissing()
+      }
+    }, 1000)
+
+    return () => clearInterval(intervalId)
   }, [
-    componentPath,
     normalizedPath,
     sandpack.activeFile,
     sandpack.files,
-    sandpack,
-    codeManager,
+    isUnknownComponent,
+    handleFileMissing,
   ])
 
-  useEffect(() => {
-    if (updatingRef.current) {
-      return
-    }
-
-    if (prevCodeRef.current === code) {
+  // Handle code updates and cache code
+  const handleCodeUpdate = useCallback(() => {
+    if (updatingRef.current || prevCodeRef.current === code || !code) {
       return
     }
 
     prevCodeRef.current = code
 
-    if (code && sandpack.activeFile === normalizedPath) {
-      console.log("[EditorCodePanel] Code updated", {
-        componentPath,
-        normalizedPath,
-        codeLength: code.length,
-        activeFile: sandpack.activeFile,
-      })
+    if (sandpack.activeFile === normalizedPath) {
+      // Cache the file content to prevent loss on remounts
+      globalFileContentCache.set(normalizedPath, code)
+
+      // If this is an unknown component and the code has been modified from the initial todo placeholder
+      // automatically mark it as resolved
+      if (
+        isUnknownComponent &&
+        initialCodeRef.current &&
+        code !== initialCodeRef.current &&
+        code !== "// TODO: Implement this component" &&
+        code.trim() !== "" &&
+        isActionRequired(normalizedPath)
+      ) {
+        markFileAsResolved(normalizedPath)
+      }
 
       if (codeManager && normalizedPath) {
         try {
@@ -115,19 +169,31 @@ export function EditorCodePanel({
     componentPath,
     normalizedPath,
     codeManager,
+    markFileAsResolved,
+    isUnknownComponent,
+    isActionRequired,
   ])
 
-  return (
-    <SandpackCodeEditor
-      showTabs={false}
-      showLineNumbers={true}
-      showInlineErrors={true}
-      className="h-full"
-      style={{ height: "100%" }}
-      initMode="immediate"
-    />
+  // Call the update handler when code changes
+  useEffect(() => {
+    handleCodeUpdate()
+  }, [handleCodeUpdate])
+
+  // Memoize props for SandpackCodeEditor to prevent unnecessary re-renders
+  const editorProps = useMemo(
+    () => ({
+      showTabs: false,
+      showLineNumbers: true,
+      showInlineErrors: true,
+      className: "h-full",
+      style: { height: "100%" },
+      initMode: "immediate" as const,
+    }),
+    [],
   )
-}
+
+  return <MemoizedSandpackCodeEditor {...editorProps} />
+})
 
 interface SimpleEditorProps {
   onChange?: (code: string) => void
diff --git a/apps/web/components/features/studio/editor/editor.tsx b/apps/web/components/features/studio/editor/editor.tsx
index 3420a5f8..e0798a9c 100644
--- a/apps/web/components/features/studio/editor/editor.tsx
+++ b/apps/web/components/features/studio/editor/editor.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react"
+import React, { useEffect, useMemo } from "react"
 import {
   SandpackProvider,
   SandpackLayout,
@@ -12,7 +12,7 @@ import {
 } from "./context/editor-state"
 import { EditorCodePanel } from "./editor-code-panel"
 import { FileExplorer } from "./file-explorer"
-import { StyleRequirementsPanel } from "./requirements-panel"
+import { RequirementsPanel } from "./requirements-panel"
 import { cn } from "@/lib/utils"
 
 interface EditorProps {
@@ -31,6 +31,8 @@ interface EditorProps {
   processedData?: any
 }
 
+const MemoizedEditorContent = React.memo(EditorContent)
+
 export function Editor({
   initialFiles,
   mainComponentPath,
@@ -46,35 +48,44 @@ export function Editor({
   actionRequiredFiles = [],
   processedData,
 }: EditorProps) {
-  // Setup sandpack configuration
-  const sandpackConfig = {
-    files: initialFiles,
-    template: sandpackTemplate,
-    customSetup: {
-      dependencies: {
-        // Default dependencies
-        react: "^18.0.0",
-        "react-dom": "^18.0.0",
-        "@radix-ui/react-icons": "^1.3.0",
-        "class-variance-authority": "^0.7.0",
-        clsx: "^2.0.0",
-        "tailwind-merge": "^1.14.0",
-        "tailwindcss-animate": "^1.0.7",
-        ...dependencies,
+  // Cache sandpack configuration to prevent re-creation
+  const sandpackConfig = useMemo(() => {
+    return {
+      files: initialFiles,
+      template: sandpackTemplate,
+      customSetup: {
+        dependencies: {
+          // Default dependencies
+          react: "^18.0.0",
+          "react-dom": "^18.0.0",
+          "@radix-ui/react-icons": "^1.3.0",
+          "class-variance-authority": "^0.7.0",
+          clsx: "^2.0.0",
+          "tailwind-merge": "^1.14.0",
+          "tailwindcss-animate": "^1.0.7",
+          ...dependencies,
+        },
       },
-    },
-  }
+    }
+  }, [initialFiles, sandpackTemplate, dependencies])
+
+  // Создаем стабильный ключ для CodeManagerProvider, который не меняется при каждом рендере
+  const stableKey = useMemo(
+    () => `editor-${mainComponentPath}-${Object.keys(initialFiles).length}`,
+    [mainComponentPath, Object.keys(initialFiles).length],
+  )
 
   return (
     <SandpackProvider {...sandpackConfig}>
       <CodeManagerProvider
+        key={stableKey}
         initialComponentPath={activePath || mainComponentPath}
         nonShadcnComponents={nonShadcnComponents}
         onFileContentChange={onCodeChange}
         isUnknownComponentFn={isUnknownComponentFn}
       >
         <div className="flex flex-col h-full">
-          <EditorContent
+          <MemoizedEditorContent
             visiblePaths={visiblePaths}
             loadingFiles={loadingFiles}
             loadingStyleFiles={loadingStyleFiles}
@@ -111,9 +122,12 @@ function EditorContent({
     loadingComponents,
     addFile,
     allFiles,
+    getFileContent,
+    updateFileContent,
   } = useCodeManager()
 
-  const { markFileAsRequiringAction, isActionRequired } = useActionRequired()
+  const { markFileAsRequiringAction, markFileAsResolved, getActionDetails } =
+    useActionRequired()
 
   // Initialize action required files from props only when they change
   useEffect(() => {
@@ -149,6 +163,34 @@ function EditorContent({
     })
   }, [actionRequiredFiles, processedData, markFileAsRequiringAction])
 
+  // Auto-resolve action required for unknown components when edited
+  useEffect(() => {
+    if (!activeFile) return
+
+    // Check if this is an unknown component with required action
+    if (isUnknownComponent(activeFile)) {
+      const actionDetails = getActionDetails(activeFile)
+
+      if (actionDetails) {
+        const content = getFileContent(activeFile)
+        // If content has been changed from the default template
+        if (content && !content.includes("TODO: Implement")) {
+          console.log(
+            "[Editor] Auto-resolving action for edited unknown component:",
+            activeFile,
+          )
+          markFileAsResolved(activeFile)
+        }
+      }
+    }
+  }, [
+    activeFile,
+    isUnknownComponent,
+    getActionDetails,
+    getFileContent,
+    markFileAsResolved,
+  ])
+
   // Handle file selection
   const handleFileSelect = (path: string) => {
     console.log("[Editor] File selected:", {
@@ -165,23 +207,33 @@ function EditorContent({
       // Get component name
       const componentName = getComponentName(path)
 
-      console.log("[Editor] Creating file for unknown component:", {
-        originalPath: path,
-        normalizedPath,
-        componentName,
-      })
+      // Only create the file if it doesn't already exist in the codebase
+      const fileExists = allFiles.includes(normalizedPath)
 
-      // Create an empty file for the unknown component
-      addFile(
-        normalizedPath,
-        `// TODO: Implement ${componentName || "this"} component`,
-      )
+      if (!fileExists) {
+        console.log("[Editor] Creating file for unknown component:", {
+          originalPath: path,
+          normalizedPath,
+          componentName,
+        })
 
-      // Mark it as requiring action
-      markFileAsRequiringAction(normalizedPath, {
-        reason: "missing_import",
-        message: `This component needs to be implemented`,
-      })
+        // Create an empty file for the unknown component
+        addFile(
+          normalizedPath,
+          `// TODO: Implement ${componentName || "this"} component`,
+        )
+
+        // Mark it as requiring action
+        markFileAsRequiringAction(normalizedPath, {
+          reason: "missing_import",
+          message: `This component needs to be implemented`,
+        })
+      } else {
+        console.log(
+          "[Editor] Unknown component file already exists:",
+          normalizedPath,
+        )
+      }
     }
 
     // Always select the normalized path
@@ -202,7 +254,8 @@ function EditorContent({
   }, [loadingFiles, loadingComponents])
 
   // Check if the current file needs style updates
-  const showStylePanel = activeFile && isActionRequired(activeFile)
+  const actionDetails = activeFile && getActionDetails(activeFile)
+  const showStylePanel = !!actionDetails && actionDetails.reason === "styles"
 
   return (
     <SandpackLayout style={{ height: "100%", border: "none" }}>
@@ -230,7 +283,7 @@ function EditorContent({
           {/* Style requirements panel */}
           {showStylePanel && (
             <div className="w-1/3 p-2">
-              <StyleRequirementsPanel activeFile={activeFile} />
+              <RequirementsPanel activeFile={activeFile} />
             </div>
           )}
         </div>
diff --git a/apps/web/components/features/studio/editor/file-explorer.tsx b/apps/web/components/features/studio/editor/file-explorer.tsx
index ae673f1f..bf043a21 100644
--- a/apps/web/components/features/studio/editor/file-explorer.tsx
+++ b/apps/web/components/features/studio/editor/file-explorer.tsx
@@ -212,21 +212,41 @@ function FileTreeNode({
   level?: number
 }) {
   const isExpanded = expandedDirs.has(item.path)
-  const isActive = activeFile === item.path
+  const { getActionDetails } = useActionRequired()
+
+  // Normalize both paths for comparison to ensure proper highlighting
+  const normalizedItemPath = item.path.replace(/^@\//, "/")
+  const normalizedActiveFile = activeFile?.replace(/^@\//, "/")
+  const isActive = normalizedActiveFile === normalizedItemPath
+
   const isShadcnFile = item.type === "file" && isShadcnComponentPath(item.path)
   const isTailwindConfig = item.path === "/tailwind.config.js"
   const isGlobalsCss = item.path === "/globals.css"
-  const needsAction =
-    item.actionRequired ||
-    item.isUnknownComponent ||
-    isActionRequired(item.path)
+
+  // Check if file truly needs action - only for styles or other issues, not for missing_import
+  const actionDetails = item.path && getActionDetails(item.path)
+
+  // Log action details for debugging
+  if (actionDetails) {
+    console.log(`[FileExplorer] File ${item.path} requires action:`, {
+      reason: actionDetails.reason,
+      message: actionDetails.message,
+      isUnknownComponent: item.isUnknownComponent,
+    })
+  }
+
+  const needsAction = actionDetails && actionDetails.reason !== "missing_import"
+
+  // Use same condition for both icon and text highlighting
+  const showWarning = needsAction || item.isUnknownComponent
 
   const handleClick = () => {
     console.log("[FileTreeNode] Item clicked", {
       path: item.path,
       type: item.type,
       isUnknownComponent: item.isUnknownComponent,
-      needsAction,
+      actionDetails: actionDetails,
+      showWarning,
     })
 
     if (item.type === "directory") {
@@ -242,7 +262,7 @@ function FileTreeNode({
         className={cn(
           "w-full text-left py-1.5 text-sm flex items-center gap-2 hover:bg-muted/50 transition-colors",
           isActive && "bg-muted text-primary font-medium",
-          needsAction && isActive && "bg-yellow-500/10",
+          showWarning && isActive && "bg-yellow-500/10",
         )}
         style={{ paddingLeft: `${level * 12 + 16}px` }}
         onClick={handleClick}
@@ -270,7 +290,7 @@ function FileTreeNode({
           <div className="h-4 w-4 flex items-center justify-center">
             <Spinner size={14} color="#3b82f6" />
           </div>
-        ) : needsAction ? (
+        ) : showWarning ? (
           <FileWarning className="h-4 w-4 text-yellow-500" />
         ) : isShadcnFile ? (
           <ShadcnFile className="h-4 w-4 text-primary" />
@@ -284,7 +304,7 @@ function FileTreeNode({
         {item.isLoading || isLoading(item.path) || isStyleLoading(item.path) ? (
           <TextShimmer className="truncate text-sm">{item.name}</TextShimmer>
         ) : (
-          <span className={cn("truncate", needsAction && "text-yellow-600")}>
+          <span className={cn("truncate", showWarning && "text-yellow-600")}>
             {item.name}
           </span>
         )}
diff --git a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
index 11bf72b9..ed8349ae 100644
--- a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
@@ -11,10 +11,14 @@ import {
 } from "@/lib/component-lookup"
 import type { SandpackFiles } from "@codesandbox/sandpack-react"
 
+// Create a file content cache that persists across component remounts
+const fileContentCache = new Map<string, string>()
+
 // Define a type for the active preview
 type ActivePreview = {
-  type: "regular" // All files are now "regular" type
+  type: "regular" | "unknown"
   filePath: string // The file path (always set)
+  componentName?: string // Only used for unknown components
 }
 
 interface UsePublishDialogProps {
@@ -109,6 +113,29 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     [resetState],
   )
 
+  // Set the component code and also update cache
+  const setComponentCodeWithCache = useCallback(
+    (code: string, path?: string) => {
+      const filePath = path || activePreview?.filePath
+      setComponentCode(code)
+
+      // Store in cache if we have a valid path
+      if (filePath) {
+        console.log("[usePublishDialog] Caching file content:", {
+          path: filePath,
+          codeLength: code.length,
+        })
+        fileContentCache.set(filePath, code)
+      }
+    },
+    [activePreview?.filePath],
+  )
+
+  // Helper function to get cached content
+  const getCachedFileContent = useCallback((path: string) => {
+    return fileContentCache.get(path)
+  }, [])
+
   // Generate files for Sandpack
   const files = useMemo(() => {
     const componentPath = getComponentFilePath()
@@ -154,6 +181,22 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
       allFiles[componentPath] = generatedFiles["/components/ui/component.tsx"]
     }
 
+    // Add any cached file content for unknown components
+    fileContentCache.forEach((cachedContent, cachedPath) => {
+      if (
+        processedData?.nonShadcnComponentsImports?.some((comp: any) => {
+          const normalizedPath = comp.path.replace(/^@\//, "/")
+          return normalizedPath === cachedPath
+        })
+      ) {
+        console.log(
+          "[usePublishDialog] Restoring cached content for:",
+          cachedPath,
+        )
+        allFiles[cachedPath] = { code: cachedContent }
+      }
+    })
+
     return allFiles
   }, [
     getComponentFilePath,
@@ -587,7 +630,8 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     handleOpenChange,
     handleProcessComponent,
     handlePreviewSelect,
-    setComponentCode,
+    setComponentCode: setComponentCodeWithCache,
+    getCachedFileContent,
     sandpackConfig,
     getComponentFilePath,
     isUnknownComponent,
diff --git a/apps/web/components/features/studio/editor/requirements-panel.tsx b/apps/web/components/features/studio/editor/requirements-panel.tsx
index f7c65a60..b42bd415 100644
--- a/apps/web/components/features/studio/editor/requirements-panel.tsx
+++ b/apps/web/components/features/studio/editor/requirements-panel.tsx
@@ -1,19 +1,27 @@
 import { AlertCircle } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import { useActionRequired } from "./context/editor-state"
+import { useActionRequired, useCodeManager } from "./context/editor-state"
 
-interface StyleRequirementsPanelProps {
+interface RequirementsPanelProps {
   className?: string
   activeFile?: string
 }
 
-export function StyleRequirementsPanel({
+export function RequirementsPanel({
   className,
   activeFile,
-}: StyleRequirementsPanelProps) {
+}: RequirementsPanelProps) {
   const { getActionDetails, markFileAsResolved } = useActionRequired()
 
+  // Get code manager
+  let codeManager
+  try {
+    codeManager = useCodeManager()
+  } catch (error) {
+    codeManager = null
+  }
+
   // If no active file, don't show anything
   if (!activeFile) {
     return null

From c55d7c4c6e40d08844cadb92a15ee650d3be52b1 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Sun, 6 Apr 2025 19:25:15 +0300
Subject: [PATCH 039/143] auto resolve file on edit

---
 .../editor/component-publish-dialog.tsx       |  7 +---
 .../studio/editor/context/editor-state.tsx    | 37 +++++++++++++++----
 .../studio/editor/editor-code-panel.tsx       | 31 ++++++++++------
 .../features/studio/editor/file-explorer.tsx  | 23 +-----------
 4 files changed, 52 insertions(+), 46 deletions(-)

diff --git a/apps/web/components/features/studio/editor/component-publish-dialog.tsx b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
index 053a2c77..daaca89c 100644
--- a/apps/web/components/features/studio/editor/component-publish-dialog.tsx
+++ b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
@@ -277,10 +277,6 @@ function SandpackContent({
       // Only update if content actually changed
       if (fileContentRef.current[path] !== currentContent) {
         fileContentRef.current[path] = currentContent
-        console.log("[SandpackContent] Stored file content:", {
-          path,
-          contentLength: currentContent.length,
-        })
       }
     }
   }, [sandpack.files, sandpack.activeFile])
@@ -289,11 +285,10 @@ function SandpackContent({
   useEffect(() => {
     Object.entries(fileContentRef.current).forEach(([path, content]) => {
       if (path && content && !sandpack.files[path]) {
-        console.log("[SandpackContent] Restoring lost file:", path)
         try {
           sandpack.addFile(path, content)
         } catch (error) {
-          console.error("[SandpackContent] Error restoring file:", error)
+          // Error handling without logging
         }
       }
     })
diff --git a/apps/web/components/features/studio/editor/context/editor-state.tsx b/apps/web/components/features/studio/editor/context/editor-state.tsx
index 652838f6..40c3b9bc 100644
--- a/apps/web/components/features/studio/editor/context/editor-state.tsx
+++ b/apps/web/components/features/studio/editor/context/editor-state.tsx
@@ -15,6 +15,7 @@ export interface ActionRequiredDetails {
   cssVariables?: Array<any>
   keyframes?: Array<any>
   utilities?: Array<any>
+  componentName?: string
 }
 
 export const actionRequiredFilesAtom = atom<
@@ -96,10 +97,6 @@ export function useActionRequired() {
           return prev
         }
 
-        console.log(
-          `[useActionRequired] Marking ${path} as requiring action:`,
-          details,
-        )
         return {
           ...prev,
           [path]: details,
@@ -117,7 +114,6 @@ export function useActionRequired() {
           return prev
         }
 
-        console.log(`[useActionRequired] Marking ${path} as resolved`)
         const next = { ...prev }
         delete next[path]
         return next
@@ -292,11 +288,38 @@ export function CodeManagerProvider({
 
   // Component utilities
   const isUnknownComponent = (path: string) => {
-    // We still identify unknown components but they are now handled as regular files
-    return isUnknownComponentFn(path)
+    // Check if it's marked as a file with missing_import
+    const details = getActionDetails(path)
+    return (
+      details?.reason === "missing_import" &&
+      details.componentName !== undefined
+    )
   }
 
+  // Update nonShadcnComponents to use the action system
+  useEffect(() => {
+    if (nonShadcnComponents && nonShadcnComponents.length > 0) {
+      // Register unknown components as files requiring action with missing_import reason
+      nonShadcnComponents.forEach((comp) => {
+        markFileAsRequiringAction(comp.path, {
+          reason: "missing_import",
+          message: `Missing import for component: ${comp.name || "Unnamed"}`,
+          componentName: comp.name,
+        })
+      })
+    }
+  }, [nonShadcnComponents, markFileAsRequiringAction])
+
   const getComponentName = (path: string) => {
+    // First check in action required files for missing_import reason with componentName
+    const actionDetails = getActionDetails(path)
+    if (
+      actionDetails?.reason === "missing_import" &&
+      actionDetails.componentName
+    ) {
+      return actionDetails.componentName
+    }
+    // Fallback to old method
     return nonShadcnComponents?.find((comp) => comp.path === path)?.name
   }
 
diff --git a/apps/web/components/features/studio/editor/editor-code-panel.tsx b/apps/web/components/features/studio/editor/editor-code-panel.tsx
index 65c48a50..53d08621 100644
--- a/apps/web/components/features/studio/editor/editor-code-panel.tsx
+++ b/apps/web/components/features/studio/editor/editor-code-panel.tsx
@@ -27,7 +27,8 @@ export const EditorCodePanel = React.memo(function EditorCodePanel({
   const prevCodeRef = useRef<string>(undefined)
   const updatingRef = useRef(false)
   const initialCodeRef = useRef<string | null>(null)
-  const { markFileAsResolved, isActionRequired } = useActionRequired()
+  const { markFileAsResolved, isActionRequired, getActionDetails } =
+    useActionRequired()
 
   let codeManager
   try {
@@ -132,19 +133,24 @@ export const EditorCodePanel = React.memo(function EditorCodePanel({
       // Cache the file content to prevent loss on remounts
       globalFileContentCache.set(normalizedPath, code)
 
-      // If this is an unknown component and the code has been modified from the initial todo placeholder
-      // automatically mark it as resolved
-      if (
-        isUnknownComponent &&
-        initialCodeRef.current &&
-        code !== initialCodeRef.current &&
-        code !== "// TODO: Implement this component" &&
-        code.trim() !== "" &&
-        isActionRequired(normalizedPath)
-      ) {
-        markFileAsResolved(normalizedPath)
+      // Check both path formats (with and without @/ prefix)
+      const pathWithPrefix = `@${normalizedPath}`
+
+      // Automatically resolve any "missing_import" action required status
+      // when file content changes, regardless of content - check both path formats
+      const checkAndResolveActionRequired = (path: string) => {
+        if (isActionRequired(path)) {
+          const actionDetails = getActionDetails(path)
+          if (actionDetails && actionDetails.reason === "missing_import") {
+            markFileAsResolved(path)
+          }
+        }
       }
 
+      // Check both path formats
+      checkAndResolveActionRequired(normalizedPath)
+      checkAndResolveActionRequired(pathWithPrefix)
+
       if (codeManager && normalizedPath) {
         try {
           updatingRef.current = true
@@ -172,6 +178,7 @@ export const EditorCodePanel = React.memo(function EditorCodePanel({
     markFileAsResolved,
     isUnknownComponent,
     isActionRequired,
+    getActionDetails,
   ])
 
   // Call the update handler when code changes
diff --git a/apps/web/components/features/studio/editor/file-explorer.tsx b/apps/web/components/features/studio/editor/file-explorer.tsx
index bf043a21..efb68995 100644
--- a/apps/web/components/features/studio/editor/file-explorer.tsx
+++ b/apps/web/components/features/studio/editor/file-explorer.tsx
@@ -226,29 +226,10 @@ function FileTreeNode({
   // Check if file truly needs action - only for styles or other issues, not for missing_import
   const actionDetails = item.path && getActionDetails(item.path)
 
-  // Log action details for debugging
-  if (actionDetails) {
-    console.log(`[FileExplorer] File ${item.path} requires action:`, {
-      reason: actionDetails.reason,
-      message: actionDetails.message,
-      isUnknownComponent: item.isUnknownComponent,
-    })
-  }
-
-  const needsAction = actionDetails && actionDetails.reason !== "missing_import"
-
-  // Use same condition for both icon and text highlighting
-  const showWarning = needsAction || item.isUnknownComponent
+  // Show warning for all files that need action, regardless of reason
+  const showWarning = !!actionDetails
 
   const handleClick = () => {
-    console.log("[FileTreeNode] Item clicked", {
-      path: item.path,
-      type: item.type,
-      isUnknownComponent: item.isUnknownComponent,
-      actionDetails: actionDetails,
-      showWarning,
-    })
-
     if (item.type === "directory") {
       onToggleDir(item.path)
     } else {

From ea0b009031eb6138a3f3d8f789aef53b5981e824 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Mon, 7 Apr 2025 12:09:18 +0300
Subject: [PATCH 040/143] req panel craft

---
 .../api/studio/preprocess-component/route.ts  |  65 +++-
 .../studio/editor/context/editor-state.tsx    |  14 +
 .../studio/editor/editor-code-panel.tsx       |  29 +-
 .../features/studio/editor/editor.tsx         |  35 ++-
 .../features/studio/editor/file-explorer.tsx  |   8 +-
 .../studio/editor/hooks/use-editor-dialog.ts  |  50 ++-
 .../studio/editor/requirements-panel.tsx      | 292 +++++++-----------
 .../studio/editor/utils}/component-lookup.ts  |   4 +-
 8 files changed, 280 insertions(+), 217 deletions(-)
 rename apps/web/{lib => components/features/studio/editor/utils}/component-lookup.ts (96%)

diff --git a/apps/web/app/api/studio/preprocess-component/route.ts b/apps/web/app/api/studio/preprocess-component/route.ts
index c198d7e9..08abac19 100644
--- a/apps/web/app/api/studio/preprocess-component/route.ts
+++ b/apps/web/app/api/studio/preprocess-component/route.ts
@@ -264,13 +264,13 @@ Respond in JSON format only with the following structure:
     "keyframes": [
       {
         "name": "keyframe-name", // ONLY keyframes not already defined in globals.css
-        "definition": "@keyframes keyframe-name { 0% { ... } 100% { ... } }"
+        "frames": "0% { opacity: 0 } 100% { opacity: 1 }" // The keyframe content without @keyframes wrapper
       }
     ],
     "utilities": [
       {
         "className": ".class-name", // ONLY utility classes not covered by Tailwind or globals.css
-        "definition": "{ property: value; property2: value2; }"
+        "definition": "{ property: value; property2: value2; }" // CSS properties as text
       }
     ]
   }
@@ -291,7 +291,66 @@ Respond in JSON format only with the following structure:
     throw new Error("No content returned from OpenAI")
   }
 
-  return JSON.parse(content)
+  const data = JSON.parse(content)
+
+  // Fix any undefined values in keyframes or utilities
+  if (data.additionalStyles.keyframes) {
+    data.additionalStyles.keyframes = data.additionalStyles.keyframes.map(
+      (keyframe: any) => {
+        // Standardize keyframe structure - ensure we always use 'name' and 'frames'
+        const name = keyframe.name || keyframe.keyframeName || ""
+        const frames = keyframe.frames || keyframe.definition || ""
+
+        if (!frames || frames === "undefined") {
+          // Provide a default example keyframe definition
+          return {
+            name,
+            frames:
+              "0% { opacity: 0; transform: scale(0.95); }\n100% { opacity: 1; transform: scale(1); }",
+          }
+        }
+        return { name, frames }
+      },
+    )
+  }
+
+  if (data.additionalStyles.utilities) {
+    data.additionalStyles.utilities = data.additionalStyles.utilities.map(
+      (utility: any) => {
+        // Standardize utility structure - ensure we always use 'className' and 'definition'
+        const className = utility.className || utility.name || ""
+        const definition = utility.definition || utility.properties || ""
+
+        if (!definition || definition === "undefined") {
+          // Provide a default example utility definition
+          return {
+            className,
+            definition: "/* Add your custom styles here */",
+          }
+        }
+        return { className, definition }
+      },
+    )
+  }
+
+  // Standardize empty objects in tailwindExtensions to prevent inconsistencies
+  if (data.additionalStyles.tailwindExtensions) {
+    const extensions = [
+      "colors",
+      "animations",
+      "fontFamily",
+      "borderRadius",
+      "boxShadow",
+      "spacing",
+    ]
+    extensions.forEach((ext) => {
+      if (!data.additionalStyles.tailwindExtensions[ext]) {
+        data.additionalStyles.tailwindExtensions[ext] = {}
+      }
+    })
+  }
+
+  return data
 }
 
 // Helper function to extract component name from code using regex
diff --git a/apps/web/components/features/studio/editor/context/editor-state.tsx b/apps/web/components/features/studio/editor/context/editor-state.tsx
index 40c3b9bc..cd6af4cc 100644
--- a/apps/web/components/features/studio/editor/context/editor-state.tsx
+++ b/apps/web/components/features/studio/editor/context/editor-state.tsx
@@ -190,13 +190,27 @@ export function CodeManagerProvider({
   const selectFile = (path: string) => {
     if (!path) return
 
+    console.log("[CodeManager] Selecting file:", {
+      path,
+      isUnknown: isUnknownComponentFn(path),
+      activeFiles: Object.keys(sandpack.files),
+      currentActiveFile: sandpack.activeFile,
+    })
+
     // Only update Sandpack if it's not an unknown component
     if (!isUnknownComponentFn(path)) {
+      console.log("[CodeManager] Setting Sandpack active file:", path)
       sandpack.setActiveFile(path)
+    } else {
+      console.log(
+        "[CodeManager] Unknown component - not setting in Sandpack:",
+        path,
+      )
     }
 
     // Update atom state
     setActiveFile(path)
+    console.log("[CodeManager] Updated active file in atom state:", path)
   }
 
   // File content operations
diff --git a/apps/web/components/features/studio/editor/editor-code-panel.tsx b/apps/web/components/features/studio/editor/editor-code-panel.tsx
index 53d08621..cb60d9f2 100644
--- a/apps/web/components/features/studio/editor/editor-code-panel.tsx
+++ b/apps/web/components/features/studio/editor/editor-code-panel.tsx
@@ -30,6 +30,16 @@ export const EditorCodePanel = React.memo(function EditorCodePanel({
   const { markFileAsResolved, isActionRequired, getActionDetails } =
     useActionRequired()
 
+  // Add logging to track component rendering with active path
+  console.log("[EditorCodePanel] Rendering with:", {
+    componentPath,
+    sandpackActiveFile: sandpack.activeFile,
+    fileExistsInSandpack: componentPath
+      ? !!sandpack.files[componentPath]
+      : false,
+    hasCode: !!code,
+  })
+
   let codeManager
   try {
     codeManager = useCodeManager()
@@ -60,11 +70,23 @@ export const EditorCodePanel = React.memo(function EditorCodePanel({
   const handleFileMissing = useCallback(() => {
     if (!normalizedPath || sandpack.files[normalizedPath]) return
 
+    console.log("[EditorCodePanel] File missing check:", {
+      normalizedPath,
+      fileExists: !!sandpack.files[normalizedPath],
+      hasCachedContent: globalFileContentCache.has(normalizedPath),
+      isUnknownComponent,
+      activeFile: sandpack.activeFile,
+    })
+
     // Check if we have cached content for this file
     const cachedContent = globalFileContentCache.get(normalizedPath)
 
     if (cachedContent) {
       try {
+        console.log(
+          "[EditorCodePanel] Restoring file from cache:",
+          normalizedPath,
+        )
         // Restore the file with cached content
         sandpack.addFile(normalizedPath, cachedContent)
 
@@ -80,6 +102,7 @@ export const EditorCodePanel = React.memo(function EditorCodePanel({
       }
     } else if (codeManager) {
       try {
+        console.log("[EditorCodePanel] Creating new file:", normalizedPath)
         // Create the file with placeholder content
         const defaultContent = "// TODO: Implement this component"
         sandpack.addFile(normalizedPath, defaultContent)
@@ -94,11 +117,15 @@ export const EditorCodePanel = React.memo(function EditorCodePanel({
 
         // Add to cache
         globalFileContentCache.set(normalizedPath, defaultContent)
+        console.log(
+          "[EditorCodePanel] File created and cached:",
+          normalizedPath,
+        )
       } catch (error) {
         console.error("[EditorCodePanel] Failed to create file:", error)
       }
     }
-  }, [normalizedPath, sandpack, codeManager])
+  }, [normalizedPath, sandpack, codeManager, isUnknownComponent])
 
   useEffect(() => {
     // If the file doesn't exist and we have a valid path, create it or restore it
diff --git a/apps/web/components/features/studio/editor/editor.tsx b/apps/web/components/features/studio/editor/editor.tsx
index e0798a9c..092379b7 100644
--- a/apps/web/components/features/studio/editor/editor.tsx
+++ b/apps/web/components/features/studio/editor/editor.tsx
@@ -210,6 +210,14 @@ function EditorContent({
       // Only create the file if it doesn't already exist in the codebase
       const fileExists = allFiles.includes(normalizedPath)
 
+      console.log("[Editor] Unknown component selected:", {
+        path,
+        normalizedPath,
+        componentName,
+        fileExists,
+        isInSandpack: allFiles.includes(normalizedPath),
+      })
+
       if (!fileExists) {
         console.log("[Editor] Creating file for unknown component:", {
           originalPath: path,
@@ -237,6 +245,7 @@ function EditorContent({
     }
 
     // Always select the normalized path
+    console.log("[Editor] Selecting file:", normalizedPath)
     selectFile(normalizedPath)
   }
 
@@ -270,24 +279,18 @@ function EditorContent({
             loadingStyleFiles={loadingStyleFiles}
           />
         </div>
-        <div className="flex-1 flex">
-          <div className={cn("flex-1", showStylePanel && "w-2/3")}>
-            <EditorCodePanel
-              componentPath={activeFile || ""}
-              onCodeChange={() => {
-                // This will be handled by the CodeManager through the CodeEditor component
-              }}
-            />
-          </div>
-
-          {/* Style requirements panel */}
-          {showStylePanel && (
-            <div className="w-1/3 p-2">
-              <RequirementsPanel activeFile={activeFile} />
-            </div>
-          )}
+        <div className="flex-1">
+          <EditorCodePanel
+            componentPath={activeFile || ""}
+            onCodeChange={() => {
+              // This will be handled by the CodeManager through the CodeEditor component
+            }}
+          />
         </div>
       </div>
+
+      {/* Style requirements panel - rendered absolutely */}
+      {showStylePanel && <RequirementsPanel activeFile={activeFile} />}
     </SandpackLayout>
   )
 }
diff --git a/apps/web/components/features/studio/editor/file-explorer.tsx b/apps/web/components/features/studio/editor/file-explorer.tsx
index efb68995..c6f04650 100644
--- a/apps/web/components/features/studio/editor/file-explorer.tsx
+++ b/apps/web/components/features/studio/editor/file-explorer.tsx
@@ -242,7 +242,7 @@ function FileTreeNode({
       <button
         className={cn(
           "w-full text-left py-1.5 text-sm flex items-center gap-2 hover:bg-muted/50 transition-colors",
-          isActive && "bg-muted text-primary font-medium",
+          isActive && "bg-muted",
           showWarning && isActive && "bg-yellow-500/10",
         )}
         style={{ paddingLeft: `${level * 12 + 16}px` }}
@@ -371,10 +371,14 @@ export function FileExplorer({
   const handleFileClick = useCallback(
     (path: string) => {
       if (onFileSelect) {
+        console.log("[FileExplorer] File clicked:", {
+          path,
+          isActionRequired: isActionRequired(path),
+        })
         onFileSelect(path)
       }
     },
-    [onFileSelect],
+    [onFileSelect, isActionRequired],
   )
 
   // Check if a file is a loading file
diff --git a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
index ed8349ae..cd8613f4 100644
--- a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
@@ -8,7 +8,7 @@ import { defaultGlobalCss, defaultTailwindConfig } from "@/lib/defaults"
 import {
   lookupComponentsInDatabase,
   convertComponentMatchesToDependencySlugs,
-} from "@/lib/component-lookup"
+} from "@/components/features/studio/editor/utils/component-lookup"
 import type { SandpackFiles } from "@codesandbox/sandpack-react"
 
 // Create a file content cache that persists across component remounts
@@ -265,7 +265,7 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
       }
 
       const data = await response.json()
-
+      console.log("Preprocess component response:", data)
       // Check if the API indicates that style updates are needed
       const styleUpdateFiles: string[] = []
 
@@ -276,6 +276,21 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
           data.additionalStyles.tailwindExtensions = {}
         }
 
+        // Initialize all tailwind extension categories
+        const extensions = [
+          "colors",
+          "animations",
+          "fontFamily",
+          "borderRadius",
+          "boxShadow",
+          "spacing",
+        ]
+        extensions.forEach((ext) => {
+          if (!data.additionalStyles.tailwindExtensions[ext]) {
+            data.additionalStyles.tailwindExtensions[ext] = {}
+          }
+        })
+
         if (!data.additionalStyles.cssVariables) {
           data.additionalStyles.cssVariables = []
         }
@@ -291,9 +306,8 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
         // Check for Tailwind extensions
         if (
           data.additionalStyles.tailwindExtensions &&
-          Object.keys(data.additionalStyles.tailwindExtensions).length > 0 &&
-          Object.values(data.additionalStyles.tailwindExtensions).some(
-            (val: any) => Object.keys(val as object).length > 0,
+          Object.entries(data.additionalStyles.tailwindExtensions).some(
+            ([_, val]: [string, any]) => Object.keys(val || {}).length > 0,
           )
         ) {
           styleUpdateFiles.push("/tailwind.config.js")
@@ -316,8 +330,8 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
         // default to highlighting both files if there are any non-empty style requirements
         const hasActualStyleChanges =
           // Check if there are actual tailwind extensions needed
-          Object.values(data.additionalStyles.tailwindExtensions || {}).some(
-            (val: any) => Object.keys(val as object).length > 0,
+          Object.entries(data.additionalStyles.tailwindExtensions || {}).some(
+            ([_, val]: [string, any]) => Object.keys(val || {}).length > 0,
           ) ||
           // Check if there are CSS variables
           (data.additionalStyles.cssVariables || []).length > 0 ||
@@ -338,15 +352,19 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
         if (data.additionalStyles.keyframes) {
           data.additionalStyles.keyframes = data.additionalStyles.keyframes.map(
             (keyframe: any) => {
-              if (!keyframe.frames || keyframe.frames === "undefined") {
+              // Standardize keyframe structure - ensure we always use 'name' and 'frames'
+              const name = keyframe.name || keyframe.keyframeName || ""
+              const frames = keyframe.frames || keyframe.definition || ""
+
+              if (!frames || frames === "undefined") {
                 // Provide a default example keyframe definition
                 return {
-                  ...keyframe,
+                  name,
                   frames:
                     "0% { opacity: 0; transform: scale(0.95); }\n100% { opacity: 1; transform: scale(1); }",
                 }
               }
-              return keyframe
+              return { name, frames }
             },
           )
         }
@@ -354,14 +372,18 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
         if (data.additionalStyles.utilities) {
           data.additionalStyles.utilities = data.additionalStyles.utilities.map(
             (utility: any) => {
-              if (!utility.properties || utility.properties === "undefined") {
+              // Standardize utility structure - ensure we always use 'className' and 'definition'
+              const className = utility.className || utility.name || ""
+              const definition = utility.definition || utility.properties || ""
+
+              if (!definition || definition === "undefined") {
                 // Provide a default example utility definition
                 return {
-                  ...utility,
-                  properties: "/* Add your custom styles here */",
+                  className,
+                  definition: "/* Add your custom styles here */",
                 }
               }
-              return utility
+              return { className, definition }
             },
           )
         }
diff --git a/apps/web/components/features/studio/editor/requirements-panel.tsx b/apps/web/components/features/studio/editor/requirements-panel.tsx
index b42bd415..ab026b52 100644
--- a/apps/web/components/features/studio/editor/requirements-panel.tsx
+++ b/apps/web/components/features/studio/editor/requirements-panel.tsx
@@ -46,210 +46,144 @@ export function RequirementsPanel({
   const isTailwindConfig = activeFile === "/tailwind.config.js"
   const isGlobalCss = activeFile === "/globals.css"
 
-  // Helper function to format code examples nicely
-  const formatKeyframes = (keyframe: any) => {
-    if (!keyframe.frames || keyframe.frames === "undefined") {
-      // Provide useful default if frames are undefined
-      return `@keyframes ${keyframe.name} {
-  0% { opacity: 0; transform: scale(0.95); }
-  100% { opacity: 1; transform: scale(1); }
-}`
+  // Prepare message content based on additionalStyles
+  const getMessageContent = () => {
+    if (isTailwindConfig) {
+      // Find specific extensions with values
+      const extensionDetails: string[] = []
+
+      if (actionDetails?.tailwindExtensions) {
+        // Check for boxShadow extensions
+        if (
+          actionDetails.tailwindExtensions.boxShadow &&
+          Object.keys(actionDetails.tailwindExtensions.boxShadow).length > 0
+        ) {
+          const shadows = Object.keys(
+            actionDetails.tailwindExtensions.boxShadow,
+          ).join(", ")
+          extensionDetails.push(`shadows: ${shadows}`)
+        }
+
+        // Check for color extensions
+        if (
+          actionDetails.tailwindExtensions.colors &&
+          Object.keys(actionDetails.tailwindExtensions.colors).length > 0
+        ) {
+          const colors = Object.keys(
+            actionDetails.tailwindExtensions.colors,
+          ).join(", ")
+          extensionDetails.push(`colors: ${colors}`)
+        }
+
+        // Check for animation extensions
+        if (
+          actionDetails.tailwindExtensions.animations &&
+          Object.keys(actionDetails.tailwindExtensions.animations).length > 0
+        ) {
+          const animations = Object.keys(
+            actionDetails.tailwindExtensions.animations,
+          ).join(", ")
+          extensionDetails.push(`animations: ${animations}`)
+        }
+
+        // Check for other extensions
+        ;["borderRadius", "fontFamily", "spacing"].forEach((extType) => {
+          if (
+            actionDetails?.tailwindExtensions?.[
+              extType as keyof typeof actionDetails.tailwindExtensions
+            ] &&
+            Object.keys(
+              actionDetails.tailwindExtensions[
+                extType as keyof typeof actionDetails.tailwindExtensions
+              ] || {},
+            ).length > 0
+          ) {
+            const values = Object.keys(
+              actionDetails.tailwindExtensions[
+                extType as keyof typeof actionDetails.tailwindExtensions
+              ] || {},
+            ).join(", ")
+            extensionDetails.push(`${extType}: ${values}`)
+          }
+        })
+      }
+
+      if (extensionDetails.length > 0) {
+        return `Add Tailwind extensions: ${extensionDetails.join("; ")}`
+      }
+
+      return "Tailwind configuration updates required"
     }
-    return `@keyframes ${keyframe.name} {
-${keyframe.frames}
-}`
-  }
 
-  const formatTailwindExtension = (extensions: Record<string, any>) => {
-    // Create a more helpful representation with actual values
-    const formattedExtensions = { ...extensions }
+    if (isGlobalCss) {
+      const parts = []
 
-    // Add example values for empty objects
-    Object.keys(formattedExtensions).forEach((key) => {
+      // Show specific CSS variable names
       if (
-        typeof formattedExtensions[key] === "object" &&
-        Object.keys(formattedExtensions[key]).length === 0
+        actionDetails?.cssVariables &&
+        actionDetails.cssVariables.length > 0
       ) {
-        // Different examples based on the extension type
-        if (key === "colors") {
-          formattedExtensions[key] = {
-            primary: {
-              DEFAULT: "hsl(var(--primary))",
-              foreground: "hsl(var(--primary-foreground))",
-            },
-          }
-        } else if (key === "animations") {
-          formattedExtensions[key] = {
-            appear: "appear 0.2s ease-in-out",
-            "appear-zoom": "appear-zoom 0.2s ease-in-out",
-          }
-        } else if (key === "fontFamily") {
-          formattedExtensions[key] = {
-            sans: ["var(--font-sans)", "sans-serif"],
-          }
-        } else if (key === "borderRadius") {
-          formattedExtensions[key] = {
-            lg: "0.5rem",
-            xl: "1rem",
-          }
-        } else if (key === "boxShadow") {
-          formattedExtensions[key] = {
-            subtle: "0 1px 2px 0 rgb(0 0 0 / 0.1)",
-          }
-        } else if (key === "spacing") {
-          formattedExtensions[key] = {
-            "4.5": "1.125rem",
-          }
-        }
+        const varNames = actionDetails.cssVariables
+          .map((v: any) => v.name)
+          .join(", ")
+        parts.push(`CSS variables: ${varNames}`)
+      }
+
+      // Show specific keyframe names
+      if (actionDetails?.keyframes && actionDetails.keyframes.length > 0) {
+        const keyframeNames = actionDetails.keyframes
+          .map((k: any) => k.name)
+          .join(", ")
+        parts.push(`keyframes: ${keyframeNames}`)
+      }
+
+      // Show specific utility class names
+      if (actionDetails?.utilities && actionDetails.utilities.length > 0) {
+        const classNames = actionDetails.utilities
+          .map((u: any) => {
+            const className = u.className || u.name
+            return className?.startsWith(".") ? className : `.${className}`
+          })
+          .join(", ")
+        parts.push(`utilities: ${classNames}`)
       }
-    })
 
-    return JSON.stringify(formattedExtensions, null, 2)
+      if (parts.length > 0) {
+        return `Add ${parts.join(", ")}`
+      }
+
+      return "CSS updates required"
+    }
+
+    return actionDetails.message || "This file requires updates"
   }
 
-  const title = isTailwindConfig
-    ? "Tailwind Config Extension Required"
-    : isGlobalCss
-      ? "CSS Extension Required"
-      : actionDetails.message ||
-        `${actionDetails.reason.replace("_", " ")} Required`
+  const message = getMessageContent()
 
   return (
     <div
       className={cn(
-        "flex flex-col border border-border h-full rounded-md",
+        "fixed bottom-4 left-1/2 -translate-x-1/2 z-50 max-w-xl w-full",
         className,
       )}
     >
-      {/* Panel Header */}
-      <div className="flex flex-col sm:flex-row justify-between gap-2 border-b border-border p-3 bg-muted/40">
-        <div className="flex items-center gap-2">
-          <AlertCircle className="h-4 w-4 text-yellow-500" />
-          <div className="flex flex-col">
-            <h2 className="font-medium text-sm text-nowrap">{title}</h2>
-            <h3 className="text-xs">AI Suggestion</h3>
+      <div className="flex items-center justify-between p-3 bg-background border border-border rounded-2xl shadow-md">
+        <div className="flex items-start gap-2">
+          <AlertCircle className="h-4 w-4 text-yellow-500 flex-shrink-0" />
+          <div className="flex flex-col gap-1">
+            <span className="text-xs font-medium">AI Suggestion</span>
+            <span className="text-xs">{message}</span>
           </div>
         </div>
         <Button
           variant="outline"
           size="sm"
-          className="self-start sm:self-auto"
           onClick={handleResolve}
+          className="flex items-center gap-1"
         >
-          Mark as resolved
+          <span>Mark as resolved</span>
         </Button>
       </div>
-
-      {/* Panel Content */}
-      <div className="overflow-auto p-3 flex-1 text-xs">
-        {isTailwindConfig && (
-          <div className="space-y-3">
-            <p className="text-muted-foreground text-xs">
-              Add the following to your tailwind.config.js in the theme section:
-            </p>
-
-            {actionDetails?.tailwindExtensions &&
-            Object.keys(actionDetails.tailwindExtensions).length > 0 ? (
-              <pre className="bg-muted p-3 rounded border border-border text-xs font-mono overflow-auto max-h-[calc(100vh-250px)]">
-                <code>
-                  {`module.exports = {
-  // ... other configs
-  theme: {
-    extend: {
-      // ... existing extensions
-      ${formatTailwindExtension(actionDetails.tailwindExtensions).slice(1, -1)}
-    }
-  }
-}`}
-                </code>
-              </pre>
-            ) : (
-              <p className="text-muted-foreground text-xs">
-                Update your Tailwind configuration with additional settings.
-              </p>
-            )}
-          </div>
-        )}
-
-        {isGlobalCss && (
-          <div className="space-y-3">
-            <p className="text-muted-foreground text-xs">
-              Add the following to your globals.css file:
-            </p>
-
-            {actionDetails?.keyframes && actionDetails.keyframes.length > 0 && (
-              <div className="mt-3">
-                <h4 className="font-medium text-xs mb-1">
-                  Keyframe animations:
-                </h4>
-                <pre className="bg-muted p-3 rounded border border-border text-xs font-mono overflow-auto max-h-[200px]">
-                  <code>
-                    {actionDetails.keyframes.map(formatKeyframes).join("\n\n")}
-                  </code>
-                </pre>
-              </div>
-            )}
-
-            {actionDetails?.cssVariables &&
-              actionDetails.cssVariables.length > 0 && (
-                <div className="mt-3">
-                  <h4 className="font-medium text-xs mb-1">CSS variables:</h4>
-                  <pre className="bg-muted p-3 rounded border border-border text-xs font-mono overflow-auto max-h-[200px]">
-                    <code>
-                      {`:root {
-  ${actionDetails.cssVariables
-    .map((variable: any) => `${variable.name}: ${variable.value || "#000000"}`)
-    .join(";\n  ")};
-}`}
-                    </code>
-                  </pre>
-                </div>
-              )}
-
-            {actionDetails?.utilities && actionDetails.utilities.length > 0 && (
-              <div className="mt-3">
-                <h4 className="font-medium text-xs mb-1">Utility classes:</h4>
-                <pre className="bg-muted p-3 rounded border border-border text-xs font-mono overflow-auto max-h-[200px]">
-                  <code>
-                    {actionDetails.utilities
-                      .map(
-                        (utility: any) =>
-                          `.${utility.name} {
-  ${utility.properties || "/* Add properties here */"}
-}`,
-                      )
-                      .join("\n\n")}
-                  </code>
-                </pre>
-              </div>
-            )}
-
-            {!actionDetails?.keyframes?.length &&
-              !actionDetails?.cssVariables?.length &&
-              !actionDetails?.utilities?.length && (
-                <p className="text-muted-foreground text-xs">
-                  Update your global CSS file with additional styles for this
-                  component.
-                </p>
-              )}
-          </div>
-        )}
-
-        {!isTailwindConfig && !isGlobalCss && (
-          <div className="space-y-3">
-            <p className="text-muted-foreground text-xs">
-              {actionDetails.message ||
-                "This file requires action to work properly."}
-            </p>
-          </div>
-        )}
-
-        <div className="mt-3 pt-3 border-t border-border">
-          <p className="text-muted-foreground text-xs">
-            Add these changes to make the component display correctly
-          </p>
-        </div>
-      </div>
     </div>
   )
 }
diff --git a/apps/web/lib/component-lookup.ts b/apps/web/components/features/studio/editor/utils/component-lookup.ts
similarity index 96%
rename from apps/web/lib/component-lookup.ts
rename to apps/web/components/features/studio/editor/utils/component-lookup.ts
index c1ec327d..0b7f2534 100644
--- a/apps/web/lib/component-lookup.ts
+++ b/apps/web/components/features/studio/editor/utils/component-lookup.ts
@@ -85,8 +85,8 @@ export async function lookupComponentsInDatabase(
             slug: matchingComponent.component_slug,
             registry: matchingComponent.registry,
             username:
-              matchingComponent.user?.display_username ||
-              matchingComponent.user?.username,
+              matchingComponent.user?.[0]?.display_username ||
+              matchingComponent.user?.[0]?.username || undefined,
           },
         })
         foundMatch = true

From 029d8ff5b27abdebf64f5f3ae478b6792f296c5e Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Mon, 7 Apr 2025 14:04:18 +0300
Subject: [PATCH 041/143] Update use-editor-dialog.ts

---
 .../features/studio/editor/hooks/use-editor-dialog.ts      | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
index cd8613f4..1c10f857 100644
--- a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
@@ -181,6 +181,9 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
       allFiles[componentPath] = generatedFiles["/components/ui/component.tsx"]
     }
 
+    // Add empty demo.tsx file
+    allFiles["/demo.tsx"] = { code: "// Add your demo code here" }
+
     // Add any cached file content for unknown components
     fileContentCache.forEach((cachedContent, cachedPath) => {
       if (
@@ -610,6 +613,8 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
           "/globals.css",
           "/package.json",
           ...Object.keys(registryDependencies),
+          // Add demo.tsx to visible files after processing is complete
+          ...(processedData && !isProcessing ? ["/demo.tsx"] : []),
         ],
         recompileMode: "delayed" as const,
         recompileDelay: 300,
@@ -637,6 +642,8 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     processedData?.npmDependencies,
     npmDependenciesOfRegistryDependencies,
     isDarkTheme,
+    processedData,
+    isProcessing,
   ])
 
   return {

From 869e55575708bf388af1bfe824a1bca818749715 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Mon, 7 Apr 2025 14:57:25 +0300
Subject: [PATCH 042/143] preview wo styles

---
 .../studio/editor/context/editor-state.tsx    | 110 +++++++++---
 .../features/studio/editor/editor.tsx         |  32 +++-
 .../studio/editor/hooks/use-editor-dialog.ts  | 157 +++++++++++++++++-
 .../studio/editor/utils/sandpack-files.ts     |  39 +++--
 4 files changed, 303 insertions(+), 35 deletions(-)

diff --git a/apps/web/components/features/studio/editor/context/editor-state.tsx b/apps/web/components/features/studio/editor/context/editor-state.tsx
index cd6af4cc..27a4863d 100644
--- a/apps/web/components/features/studio/editor/context/editor-state.tsx
+++ b/apps/web/components/features/studio/editor/context/editor-state.tsx
@@ -6,6 +6,7 @@ import { useSandpack } from "@codesandbox/sandpack-react"
 export const activeFileAtom = atom<string | null>(null)
 export const userModifiedFilesAtom = atom<Record<string, boolean>>({})
 export const loadingComponentsAtom = atom<string[]>([])
+export const previewReadyAtom = atom<boolean>(false)
 
 // New atom for files requiring action
 export interface ActionRequiredDetails {
@@ -56,6 +57,11 @@ interface CodeManagerContextType {
   markFileAsResolved: (path: string) => void
   isActionRequired: (path: string) => boolean
   getActionDetails: (path: string) => ActionRequiredDetails | undefined
+
+  // Preview ready state
+  previewReady: boolean
+  markPreviewReady: () => void
+  markPreviewNotReady: () => void
 }
 
 const CodeManagerContext = createContext<CodeManagerContextType | null>(null)
@@ -145,6 +151,25 @@ export function useActionRequired() {
   }
 }
 
+// New hook to manage preview readiness that doesn't depend on Sandpack
+export function usePreviewReady() {
+  const [previewReady, setPreviewReady] = useAtom(previewReadyAtom)
+
+  const markPreviewReady = useCallback(() => {
+    setPreviewReady(true)
+  }, [setPreviewReady])
+
+  const markPreviewNotReady = useCallback(() => {
+    setPreviewReady(false)
+  }, [setPreviewReady])
+
+  return {
+    previewReady,
+    markPreviewReady,
+    markPreviewNotReady,
+  }
+}
+
 interface CodeManagerProviderProps {
   children: React.ReactNode
   initialComponentPath: string
@@ -160,8 +185,14 @@ export function CodeManagerProvider({
   onFileContentChange,
   isUnknownComponentFn = () => false,
 }: CodeManagerProviderProps) {
-  // Use atoms directly in the context
-  const { sandpack } = useSandpack()
+  // Safely try to access Sandpack - will fail gracefully outside of SandpackProvider
+  let sandpack = null
+  try {
+    sandpack = useSandpack().sandpack
+  } catch (error) {
+    // Outside of SandpackProvider context, continue without Sandpack features
+  }
+
   const [activeFile, setActiveFile] = useAtom(activeFileAtom)
   const [userModifiedFiles, setUserModifiedFiles] = useAtom(
     userModifiedFilesAtom,
@@ -179,12 +210,30 @@ export function CodeManagerProvider({
     getActionDetails,
   } = useActionRequired()
 
+  // Get preview ready functions from the hook
+  const { previewReady, markPreviewReady, markPreviewNotReady } =
+    usePreviewReady()
+
+  // Watch for demo.tsx file changes to automatically set preview ready state
+  useEffect(() => {
+    if (!sandpack) return // Skip if outside of SandpackProvider
+
+    const demoFile = sandpack.files["/demo.tsx"]
+    if (
+      demoFile &&
+      demoFile.code &&
+      demoFile.code !== "// Add your demo code here"
+    ) {
+      markPreviewReady()
+    }
+  }, [sandpack?.files, markPreviewReady, sandpack])
+
   // Initialize with the main component file
   useEffect(() => {
-    if (initialComponentPath && !activeFile) {
+    if (initialComponentPath && !activeFile && sandpack) {
       selectFile(initialComponentPath)
     }
-  }, [initialComponentPath])
+  }, [initialComponentPath, sandpack])
 
   // File selection
   const selectFile = (path: string) => {
@@ -193,15 +242,15 @@ export function CodeManagerProvider({
     console.log("[CodeManager] Selecting file:", {
       path,
       isUnknown: isUnknownComponentFn(path),
-      activeFiles: Object.keys(sandpack.files),
-      currentActiveFile: sandpack.activeFile,
+      activeFiles: sandpack ? Object.keys(sandpack.files) : [],
+      currentActiveFile: sandpack?.activeFile,
     })
 
-    // Only update Sandpack if it's not an unknown component
-    if (!isUnknownComponentFn(path)) {
+    // Only update Sandpack if it's not an unknown component and sandpack is available
+    if (!isUnknownComponentFn(path) && sandpack) {
       console.log("[CodeManager] Setting Sandpack active file:", path)
       sandpack.setActiveFile(path)
-    } else {
+    } else if (isUnknownComponentFn(path)) {
       console.log(
         "[CodeManager] Unknown component - not setting in Sandpack:",
         path,
@@ -215,7 +264,7 @@ export function CodeManagerProvider({
 
   // File content operations
   const getFileContent = (path: string) => {
-    return sandpack.files[path]?.code
+    return sandpack ? sandpack.files[path]?.code : undefined
   }
 
   const updateFileContent = (path: string, content: string) => {
@@ -228,7 +277,15 @@ export function CodeManagerProvider({
     // Mark this file as user-modified in atom state
     setUserModifiedFiles((prev) => ({ ...prev, [path]: true }))
 
-    sandpack.updateFile(path, content)
+    // Update sandpack if available
+    if (sandpack) {
+      sandpack.updateFile(path, content)
+    }
+
+    // Mark preview ready if demo.tsx is edited
+    if (path === "/demo.tsx" && content !== "// Add your demo code here") {
+      markPreviewReady()
+    }
 
     // Notify parent if needed
     if (onFileContentChange) {
@@ -237,14 +294,18 @@ export function CodeManagerProvider({
   }
 
   const addFile = (path: string, content: string = "") => {
-    sandpack.addFile(path, content)
+    if (sandpack) {
+      sandpack.addFile(path, content)
+    }
 
     // Select the newly created file
     selectFile(path)
   }
 
   const renameFile = (from: string, to: string) => {
-    // Get the file content
+    // Get the file content if sandpack is available
+    if (!sandpack) return
+
     const fileObj = sandpack.files[from]
 
     // Proceed only if we have a file to rename
@@ -276,8 +337,10 @@ export function CodeManagerProvider({
   }
 
   const deleteFile = (path: string) => {
-    // Remove from Sandpack
-    sandpack.deleteFile(path)
+    // Remove from Sandpack if available
+    if (sandpack) {
+      sandpack.deleteFile(path)
+    }
 
     // Remove from user modified tracking
     if (userModifiedFiles[path]) {
@@ -291,9 +354,13 @@ export function CodeManagerProvider({
     // Update active file if needed
     if (activeFile === path) {
       // Select another file
-      const files = Object.keys(sandpack.files)
-      if (files.length > 0 && files[0]) {
-        selectFile(files[0])
+      if (sandpack) {
+        const files = Object.keys(sandpack.files)
+        if (files.length > 0 && files[0]) {
+          selectFile(files[0])
+        } else {
+          setActiveFile(null)
+        }
       } else {
         setActiveFile(null)
       }
@@ -355,7 +422,7 @@ export function CodeManagerProvider({
     getComponentName,
 
     // File metadata
-    allFiles: Object.keys(sandpack.files),
+    allFiles: sandpack ? Object.keys(sandpack.files) : [],
     nonShadcnComponents,
 
     // Loading state
@@ -368,6 +435,11 @@ export function CodeManagerProvider({
     markFileAsResolved,
     isActionRequired,
     getActionDetails,
+
+    // Preview ready state
+    previewReady,
+    markPreviewReady,
+    markPreviewNotReady,
   }
 
   return (
diff --git a/apps/web/components/features/studio/editor/editor.tsx b/apps/web/components/features/studio/editor/editor.tsx
index 092379b7..5328ff0a 100644
--- a/apps/web/components/features/studio/editor/editor.tsx
+++ b/apps/web/components/features/studio/editor/editor.tsx
@@ -3,12 +3,15 @@ import {
   SandpackProvider,
   SandpackLayout,
   SandpackFiles,
+  SandpackPreview,
+  OpenInCodeSandboxButton,
 } from "@codesandbox/sandpack-react"
 import {
   CodeManagerProvider,
   useCodeManager,
   useActionRequired,
   ActionRequiredDetails,
+  usePreviewReady,
 } from "./context/editor-state"
 import { EditorCodePanel } from "./editor-code-panel"
 import { FileExplorer } from "./file-explorer"
@@ -129,6 +132,9 @@ function EditorContent({
   const { markFileAsRequiringAction, markFileAsResolved, getActionDetails } =
     useActionRequired()
 
+  // Get preview ready state
+  const { previewReady } = usePreviewReady()
+
   // Initialize action required files from props only when they change
   useEffect(() => {
     // We need to prevent infinite loops by tracking processed files
@@ -279,7 +285,14 @@ function EditorContent({
             loadingStyleFiles={loadingStyleFiles}
           />
         </div>
-        <div className="flex-1">
+
+        {/* Code editor */}
+        <div
+          className={cn(
+            "flex-1",
+            previewReady && "max-w-[50%] border-r border-border",
+          )}
+        >
           <EditorCodePanel
             componentPath={activeFile || ""}
             onCodeChange={() => {
@@ -287,6 +300,23 @@ function EditorContent({
             }}
           />
         </div>
+
+        {/* Show preview when ready */}
+        {previewReady && (
+          <div className="flex-1 flex flex-col">
+            <div className="p-2 border-b border-border bg-muted/30 flex justify-between items-center">
+              <h3 className="text-sm font-medium">Preview</h3>
+              <OpenInCodeSandboxButton />
+            </div>
+            <div className="flex-1">
+              <SandpackPreview
+                showNavigator={true}
+                showRefreshButton={true}
+                showOpenInCodeSandbox={false}
+              />
+            </div>
+          </div>
+        )}
       </div>
 
       {/* Style requirements panel - rendered absolutely */}
diff --git a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
index 1c10f857..421b1af9 100644
--- a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
@@ -136,6 +136,152 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     return fileContentCache.get(path)
   }, [])
 
+  // Helper function to generate a simple App.tsx that can handle demo files with both named and default exports
+  const generateAppTsx = () => {
+    return `import React, { useState, useEffect } from 'react';
+    import { ThemeProvider } from 'next-themes';
+    import { RouterProvider } from 'next/router';
+    import './styles.css';
+    import DefaultExport, * as NamedExports from './demo';
+
+    // Combine named exports and default export components
+    const demoComponentNames = [
+      ...Object.keys(DefaultExport || {}),
+      ...Object.keys(NamedExports).filter(key => 
+        typeof NamedExports[key] === 'function' && key !== 'default'
+      )
+    ];
+
+    const DemoComponents = {
+      ...(DefaultExport || {}),
+      ...Object.fromEntries(
+        Object.entries(NamedExports).filter(([key, value]) => 
+          typeof value === 'function' && key !== 'default'
+        )
+      )
+    };
+
+    export default function App() {
+      const [currentIndex, setCurrentIndex] = useState(0);
+      const CurrentComponent = demoComponentNames.length > 0 
+        ? DemoComponents[demoComponentNames[currentIndex]]
+        : () => <div className="p-6 text-center">Add components to demo.tsx</div>;
+
+      useEffect(() => {
+        const handleKeyDown = (e) => {
+          if ((e.metaKey || e.ctrlKey) && demoComponentNames.length > 1) {
+            if (e.key === 'ArrowDown') {
+              e.preventDefault();
+              setCurrentIndex(prev => (prev + 1) % demoComponentNames.length);
+            } else if (e.key === 'ArrowUp') {
+              e.preventDefault();
+              setCurrentIndex(prev => (prev - 1 + demoComponentNames.length) % demoComponentNames.length);
+            }
+          }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+      }, []);
+
+      return (
+        <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
+          <RouterProvider>
+            <div className="flex flex-col items-center min-h-screen p-4 bg-background text-foreground">
+              {demoComponentNames.length > 1 && (
+                <div className="self-end mb-4">
+                  <select 
+                    value={demoComponentNames[currentIndex]} 
+                    onChange={(e) => {
+                      const idx = demoComponentNames.indexOf(e.target.value);
+                      if (idx !== -1) setCurrentIndex(idx);
+                    }}
+                    className="p-2 border rounded bg-background text-foreground"
+                  >
+                    {demoComponentNames.map(name => (
+                      <option key={name} value={name}>
+                        {name.replace(/([A-Z])/g, ' $1').trim()}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              )}
+              
+              <div className="flex items-center justify-center w-full">
+                <CurrentComponent />
+              </div>
+            </div>
+          </RouterProvider>
+        </ThemeProvider>
+      );
+    }`
+  }
+
+  // Helper function to generate basic styles.css
+  const generateStylesCss = () => {
+    return `
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+  --primary: 240 5.9% 10%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 240 5.9% 10%;
+  --radius: 0.5rem;
+}
+
+.dark {
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+  --card: 240 10% 3.9%;
+  --card-foreground: 0 0% 98%;
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 0 0% 98%;
+  --primary: 0 0% 98%;
+  --primary-foreground: 240 5.9% 10%;
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+  --accent: 240 3.7% 15.9%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --ring: 240 4.9% 83.9%;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+  line-height: 1.5;
+}`
+  }
+
   // Generate files for Sandpack
   const files = useMemo(() => {
     const componentPath = getComponentFilePath()
@@ -155,6 +301,7 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
       componentPath,
       componentCode,
       processedData,
+      theme: isDarkTheme ? "dark" : "light",
       dependencies: {
         ...(processedData?.npmDependencies?.reduce(
           (acc: Record<string, string>, dep: string) => ({
@@ -182,7 +329,9 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     }
 
     // Add empty demo.tsx file
-    allFiles["/demo.tsx"] = { code: "// Add your demo code here" }
+    allFiles["/demo.tsx"] = {
+      code: '// Add your demo code here\nexport default function Demo() {\n  return (\n    <div className="p-4">\n      {/* Add your component demo here */}\n      <div className="border-2 border-dashed border-gray-200 p-6 rounded-lg text-center">\n        Edit this file to create your component demo\n      </div>\n    </div>\n  );\n}',
+    }
 
     // Add any cached file content for unknown components
     fileContentCache.forEach((cachedContent, cachedPath) => {
@@ -200,6 +349,12 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
       }
     })
 
+    // Add a simple App.tsx that imports and renders demo.tsx
+    allFiles["/App.tsx"] = { code: generateAppTsx() }
+
+    // Add styles.css file
+    allFiles["/styles.css"] = { code: generateStylesCss() }
+
     return allFiles
   }, [
     getComponentFilePath,
diff --git a/apps/web/components/features/studio/editor/utils/sandpack-files.ts b/apps/web/components/features/studio/editor/utils/sandpack-files.ts
index bba1bcb8..9f2f5fa8 100644
--- a/apps/web/components/features/studio/editor/utils/sandpack-files.ts
+++ b/apps/web/components/features/studio/editor/utils/sandpack-files.ts
@@ -8,6 +8,7 @@ interface GenerateFilesOptions {
   dependencies?: Record<string, string>
   customTailwindConfig?: string | null
   customGlobalCss?: string | null
+  theme: "light" | "dark"
 }
 
 export function generateSandpackFiles({
@@ -17,6 +18,7 @@ export function generateSandpackFiles({
   dependencies = {},
   customTailwindConfig = null,
   customGlobalCss = null,
+  theme,
 }: GenerateFilesOptions): SandpackFiles {
   const files: SandpackFiles = {
     [componentPath]: {
@@ -89,21 +91,21 @@ root.render(
     },
     "/App.tsx": {
       code: processedData
-        ? `import { ThemeProvider } from "./theme-provider";
+        ? `import { ThemeProvider } from "./next-themes";
 import ${processedData.componentName || "Component"} from "./components/${
             processedData.registryType || "ui"
           }/${processedData.slug?.replace(".tsx", "") || "component"}";
 
 export default function App() {
   return (
-    <ThemeProvider defaultTheme="light" storageKey="sandpack-theme">
+    <ThemeProvider attribute="class" defaultTheme="${theme}" enableSystem={false}>
       <div className="container">
         <${processedData.componentName || "Component"} />
       </div>
     </ThemeProvider>
   );
 }`
-        : `import { ThemeProvider } from "./theme-provider";
+        : `import { ThemeProvider } from "./next-themes";
 import Component from "${componentPath.replace(".tsx", "")}";
 
 export default function App() {
@@ -116,25 +118,34 @@ export default function App() {
   );
 }`,
     },
-    "/theme-provider.tsx": {
-      code: `import * as React from "react"
+    "/next-themes.tsx": {
+      code: `import React, { createContext, useContext, useState, useEffect } from 'react';
 
-const ThemeContext = React.createContext({
-  theme: "light",
+const ThemeContext = createContext({
+  theme: 'light',
   setTheme: (theme: string) => {},
-  resolvedTheme: "light",
+  resolvedTheme: 'light',
 });
 
-export const useTheme = () => React.useContext(ThemeContext);
+export const useTheme = () => useContext(ThemeContext);
 
-export const ThemeProvider = ({ children, defaultTheme = 'light', enableSystem = false }) => {
-  const [theme, setTheme] = React.useState(defaultTheme);
+export const ThemeProvider = ({ children, defaultTheme = 'light', enableSystem = false, attribute = 'data-theme' }) => {
+  const [theme, setTheme] = useState(defaultTheme);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const root = window.document.documentElement;
+    
+    // Remove existing theme classes
     root.classList.remove('light', 'dark');
-    root.classList.add(theme);
-  }, [theme]);
+    
+    if (attribute === 'class') {
+      // If attribute is class, add theme as a class
+      root.classList.add(theme);
+    } else {
+      // Otherwise set it as a data attribute
+      root.setAttribute(attribute, theme);
+    }
+  }, [theme, attribute]);
 
   const resolvedTheme = theme === 'system' ? 'light' : theme;
 

From 933ab32c5c42885ded2006f00dd1d8391b2c0c70 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Mon, 7 Apr 2025 17:47:10 +0300
Subject: [PATCH 043/143] compile css

---
 .../studio/editor/hooks/use-editor-dialog.ts  | 239 +++++++++++++++++-
 apps/web/lib/defaults.ts                      |   1 -
 2 files changed, 238 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
index 421b1af9..b0ffa033 100644
--- a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
@@ -66,6 +66,21 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
   // Add max timeout for safety
   const maxLoadingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 
+  // Add state for compiled CSS
+  const [compiledCss, setCompiledCss] = useState<string | null>(null)
+
+  // Add state to track in-progress compilation
+  const [isCssCompiling, setIsCssCompiling] = useState(false)
+  // Add ref for debouncing
+  const cssCompileTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  // Add ref for previous component code
+  const prevComponentCodeRef = useRef<string>("")
+  // Add ref to track last compilation time
+  const lastCompilationTimeRef = useRef<number>(0)
+
+  // Add ref for tracking the content hash of all files
+  const prevFilesHashRef = useRef<string>("")
+
   // Safety cleanup for loading state
   useEffect(() => {
     // Cleanup on unmount
@@ -353,7 +368,7 @@ body {
     allFiles["/App.tsx"] = { code: generateAppTsx() }
 
     // Add styles.css file
-    allFiles["/styles.css"] = { code: generateStylesCss() }
+    allFiles["/styles.css"] = { code: compiledCss || generateStylesCss() }
 
     return allFiles
   }, [
@@ -365,6 +380,7 @@ body {
     mergedTailwindConfig,
     mergedGlobalCss,
     activePreview?.filePath,
+    compiledCss,
   ])
 
   // Unified handler for preview selection
@@ -801,6 +817,227 @@ body {
     isProcessing,
   ])
 
+  // Helper function to generate a hash of all key file contents
+  // This helps us detect when any important file has changed
+  const generateFilesHash = useCallback(() => {
+    const keyFiles = [
+      "/demo.tsx",
+      getComponentFilePath(),
+      "/styles.css",
+      "/tailwind.config.js",
+    ]
+
+    // Collect content of key files
+    const contents = keyFiles
+      .map((path) => {
+        const file = files[path]
+        return path + ":" + (typeof file === "string" ? file : file?.code || "")
+      })
+      .join("|")
+
+    return contents
+  }, [files, getComponentFilePath])
+
+  // Update the compileCSS function to track compilation state
+  const compileCSS = useCallback(async () => {
+    if (!componentCode || !processedData) {
+      console.log("[compileCSS] Skipping - no component code or processed data")
+      return
+    }
+
+    if (isCssCompiling) {
+      console.log("[compileCSS] Skipping - compilation already in progress")
+      return
+    }
+
+    setIsCssCompiling(true)
+    console.log("[compileCSS] Starting CSS compilation")
+
+    // Always initialize with the default CSS
+    const defaultCss = generateStylesCss()
+    setCompiledCss(defaultCss)
+    console.log("[compileCSS] Set default CSS fallback")
+
+    // Check if backend URL is available
+    const backendUrl = process.env.NEXT_PUBLIC_COMPILE_CSS_URL
+    if (!backendUrl) {
+      console.log("[compileCSS] Backend URL not available, using default CSS")
+      setIsCssCompiling(false)
+      return
+    }
+
+    console.log("[compileCSS] Backend URL:", backendUrl)
+
+    try {
+      // Get the component path based on processed data
+      const componentPath = getComponentFilePath()
+      console.log("[compileCSS] Component path:", componentPath)
+
+      // Extract all registry dependencies correctly (matching preview.tsx format)
+      const registryDependenciesArray = Object.entries(
+        registryDependencies || {},
+      ).map(([_, item]) => (typeof item === "string" ? item : item.code))
+      console.log(
+        "[compileCSS] Registry dependencies count:",
+        registryDependenciesArray.length,
+      )
+
+      // Generate shell code exactly like preview.tsx does
+      const shellCode = Object.entries(files)
+        .filter(([key]) => /\.(tsx|jsx|ts|js)$/.test(key))
+        .map(([key, value]) => {
+          console.log("[compileCSS] Including file:", key)
+          return typeof value === "string" ? value : value.code
+        })
+      console.log("[compileCSS] Shell code count:", shellCode.length)
+
+      // Combine all dependencies (exactly matching preview.tsx)
+      const allDependencies = [...registryDependenciesArray, ...shellCode]
+      console.log(
+        "[compileCSS] Total dependencies count:",
+        allDependencies.length,
+      )
+
+      // Safely get demo code
+      const demoFile = files["/demo.tsx"]
+      const demoCode =
+        typeof demoFile === "string" ? demoFile : demoFile?.code || ""
+      console.log("[compileCSS] Demo code length:", demoCode.length)
+
+      console.log(
+        "[compileCSS] Attempting to compile CSS with backend:",
+        backendUrl,
+      )
+
+      // Prepare request payload - exactly match format from preview.tsx
+      const payload = {
+        code: componentCode,
+        demoCode,
+        baseTailwindConfig: defaultTailwindConfig,
+        baseGlobalCss: defaultGlobalCss,
+        customTailwindConfig: mergedTailwindConfig || null,
+        customGlobalCss: mergedGlobalCss || null,
+        dependencies: allDependencies,
+      }
+
+      console.log("[compileCSS] Request payload keys:", Object.keys(payload))
+
+      // Full URL for debugging
+      const fullUrl = `${backendUrl}/compile-css`
+      console.log("[compileCSS] Full URL:", fullUrl)
+
+      // Make the request with detailed error handling
+      console.log("[compileCSS] Sending request now...")
+
+      const response = await fetch(fullUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+      })
+
+      console.log("[compileCSS] Response status:", response.status)
+
+      if (!response.ok) {
+        console.error(
+          `[compileCSS] Server error: ${response.status} ${response.statusText}`,
+        )
+        throw new Error(
+          `Server responded with ${response.status}: ${response.statusText}`,
+        )
+      }
+
+      const data = await response.json()
+      if (data.error) {
+        console.error("[compileCSS] CSS compilation failed:", {
+          error: data.error,
+          details: data.details,
+        })
+        toast.error(`CSS compilation failed: ${data.details || data.error}`)
+        // Default CSS is already set above
+      } else {
+        console.log(
+          "[compileCSS] CSS compiled successfully, length:",
+          data.css.length,
+        )
+        setCompiledCss(data.css)
+      }
+      setIsCssCompiling(false)
+    } catch (error) {
+      console.error("[compileCSS] Failed to compile CSS:", error)
+      console.log("[compileCSS] Using default CSS instead")
+      // Default CSS is already set above
+      setIsCssCompiling(false)
+    }
+  }, [
+    componentCode,
+    processedData,
+    registryDependencies,
+    files,
+    mergedTailwindConfig,
+    mergedGlobalCss,
+    getComponentFilePath,
+    isCssCompiling,
+  ])
+
+  // Call the compile function when relevant files change, with debouncing
+  useEffect(() => {
+    // Don't compile if we're still processing the component
+    if (isProcessing || !processedData) return
+
+    // Generate a hash of all key files to detect changes
+    const currentFilesHash = generateFilesHash()
+
+    // Don't recompile if no files have changed and it was recently compiled
+    if (
+      currentFilesHash === prevFilesHashRef.current &&
+      Date.now() - lastCompilationTimeRef.current < 5000
+    ) {
+      console.log(
+        "[compileCSS] Skipping - no files have changed since last compilation",
+      )
+      return
+    }
+
+    // Don't compile if a compilation is already in progress
+    if (isCssCompiling) {
+      console.log("[compileCSS] Skipping - compilation already in progress")
+      return
+    }
+
+    // Clear any existing timeout
+    if (cssCompileTimeoutRef.current) {
+      clearTimeout(cssCompileTimeoutRef.current)
+    }
+
+    console.log("[compileCSS] Files have changed, scheduling compilation")
+
+    // Set a new timeout to debounce the compilation
+    cssCompileTimeoutRef.current = setTimeout(() => {
+      // Update the hash reference before compilation
+      prevFilesHashRef.current = currentFilesHash
+      lastCompilationTimeRef.current = Date.now()
+      compileCSS()
+      cssCompileTimeoutRef.current = null
+    }, 1000) // Debounce for 1 second
+
+    // Cleanup timeout on unmount
+    return () => {
+      if (cssCompileTimeoutRef.current) {
+        clearTimeout(cssCompileTimeoutRef.current)
+      }
+    }
+  }, [
+    files, // Track all files - this will catch changes to demo.tsx and other files
+    processedData,
+    isProcessing,
+    registryDependencies,
+    compileCSS,
+    isCssCompiling,
+    generateFilesHash,
+  ])
+
   return {
     open,
     componentCode,
diff --git a/apps/web/lib/defaults.ts b/apps/web/lib/defaults.ts
index c3496c12..4ef7a2a5 100644
--- a/apps/web/lib/defaults.ts
+++ b/apps/web/lib/defaults.ts
@@ -74,7 +74,6 @@ module.exports = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
 }`
 
 // Default global CSS for shadcn UI components

From bde9edc8fab4c09cc6022ca02a24ad3c27406ebf Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Mon, 7 Apr 2025 18:17:47 +0300
Subject: [PATCH 044/143] move to separate file

---
 .../studio/editor/hooks/use-css-compiler.ts   | 407 +++++++++++
 .../studio/editor/hooks/use-editor-dialog.ts  | 644 ++++++------------
 2 files changed, 631 insertions(+), 420 deletions(-)
 create mode 100644 apps/web/components/features/studio/editor/hooks/use-css-compiler.ts

diff --git a/apps/web/components/features/studio/editor/hooks/use-css-compiler.ts b/apps/web/components/features/studio/editor/hooks/use-css-compiler.ts
new file mode 100644
index 00000000..55649f44
--- /dev/null
+++ b/apps/web/components/features/studio/editor/hooks/use-css-compiler.ts
@@ -0,0 +1,407 @@
+import { useState, useCallback, useEffect, useRef } from "react"
+import { toast } from "sonner"
+import { defaultGlobalCss, defaultTailwindConfig } from "@/lib/defaults"
+import type { SandpackFiles } from "@codesandbox/sandpack-react"
+
+interface UseCssCompilerProps {
+  componentCode: string
+  processedData: any | null
+  isProcessing: boolean
+  registryDependencies: Record<string, { code: string; registry: string }>
+  files: SandpackFiles
+  mergedTailwindConfig: string | null
+  mergedGlobalCss: string | null
+  getComponentFilePath: () => string
+}
+
+/**
+ * Hook for handling CSS compilation in the editor
+ * Extracts and manages all CSS compilation logic in one place
+ */
+export function useCssCompiler({
+  componentCode,
+  processedData,
+  isProcessing,
+  registryDependencies,
+  files,
+  mergedTailwindConfig,
+  mergedGlobalCss,
+  getComponentFilePath,
+}: UseCssCompilerProps) {
+  // State for tracking compilation
+  const [compiledCss, setCompiledCss] = useState<string | null>(null)
+  const [isCssCompiling, setIsCssCompiling] = useState(false)
+
+  // Refs for tracking and debouncing
+  const cssCompileTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const prevFilesHashRef = useRef<string>("")
+  const lastCompilationTimeRef = useRef<number>(0)
+
+  // Store the last demo content to track changes specifically to this file
+  const lastDemoContentRef = useRef<string>("")
+
+  // Helper function to generate basic styles.css as fallback
+  const generateStylesCss = useCallback(() => {
+    return defaultGlobalCss
+  }, [])
+
+  // Helper function to generate a hash of all key file contents
+  const generateFilesHash = useCallback(() => {
+    // Always include the demo file as a key file for change detection
+    const keyFiles = [
+      "/demo.tsx", // Ensure demo file is at the beginning for priority
+      getComponentFilePath(),
+      "/styles.css",
+      "/tailwind.config.js",
+    ]
+
+    console.log(
+      "[generateFilesHash] Checking for changes in:",
+      keyFiles.join(", "),
+    )
+
+    // Get the current demo content for separate tracking
+    const demoFile = files["/demo.tsx"]
+    const currentDemoContent =
+      typeof demoFile === "string" ? demoFile : demoFile?.code || ""
+
+    // Check specifically for demo changes
+    const demoChanged = currentDemoContent !== lastDemoContentRef.current
+    if (demoChanged) {
+      console.log(
+        "[generateFilesHash] Demo content changed! Forcing recompilation",
+      )
+    }
+
+    // Collect content of key files
+    const contents = keyFiles
+      .map((path) => {
+        const file = files[path]
+        const fileContent = typeof file === "string" ? file : file?.code || ""
+
+        // Log each file's content length for debugging
+        if (path === "/demo.tsx") {
+          console.log(
+            "[generateFilesHash] Demo file content length:",
+            fileContent.length,
+          )
+          // Store current demo content for future comparison
+          lastDemoContentRef.current = fileContent
+        }
+
+        return `${path}:${fileContent.length}:${fileContent.substring(0, 50)}`
+      })
+      .join("|")
+
+    // If demo changed, add a timestamp to force hash change
+    return demoChanged ? contents + "|demoChanged:" + Date.now() : contents
+  }, [files, getComponentFilePath])
+
+  // The main CSS compilation function
+  const compileCSS = useCallback(async () => {
+    if (!componentCode || !processedData) {
+      console.log("[compileCSS] Skipping - no component code or processed data")
+      return
+    }
+
+    if (isCssCompiling) {
+      console.log("[compileCSS] Skipping - compilation already in progress")
+      return
+    }
+
+    setIsCssCompiling(true)
+    console.log("[compileCSS] Starting CSS compilation")
+
+    // Always initialize with the default CSS
+    const defaultCss = generateStylesCss()
+    setCompiledCss(defaultCss)
+    console.log("[compileCSS] Set default CSS fallback")
+
+    // Check if backend URL is available
+    const backendUrl = process.env.NEXT_PUBLIC_COMPILE_CSS_URL
+    if (!backendUrl) {
+      console.log("[compileCSS] Backend URL not available, using default CSS")
+      setIsCssCompiling(false)
+      return
+    }
+
+    console.log("[compileCSS] Backend URL:", backendUrl)
+
+    try {
+      // Get the component path based on processed data
+      const componentPath = getComponentFilePath()
+      console.log("[compileCSS] Component path:", componentPath)
+
+      // Extract all registry dependencies correctly (matching preview.tsx format)
+      const registryDependenciesArray = Object.entries(
+        registryDependencies || {},
+      ).map(([_, item]) => (typeof item === "string" ? item : item.code))
+      console.log(
+        "[compileCSS] Registry dependencies count:",
+        registryDependenciesArray.length,
+      )
+
+      // Get demo code directly - ensure it's included separately
+      const demoFile = files["/demo.tsx"]
+      const demoCode =
+        typeof demoFile === "string" ? demoFile : demoFile?.code || ""
+      console.log("[compileCSS] Demo code length:", demoCode.length)
+      console.log(
+        "[compileCSS] Demo code preview:",
+        demoCode.substring(0, 100) + "...",
+      )
+
+      // Generate shell code exactly like preview.tsx does - make sure we include everything
+      const shellCode = Object.entries(files)
+        .filter(([key]) => /\.(tsx|jsx|ts|js)$/.test(key))
+        .map(([key, value]) => {
+          console.log("[compileCSS] Including file:", key)
+          return typeof value === "string" ? value : value.code
+        })
+      console.log("[compileCSS] Shell code count:", shellCode.length)
+
+      // Verify demo.tsx is included in the shell code
+      const demoFileIncluded = shellCode.some(
+        (code) =>
+          code.includes("export default function Demo()") ||
+          code.includes("Demo components loaded"),
+      )
+      if (!demoFileIncluded && demoCode) {
+        console.log(
+          "[compileCSS] Demo file not found in shell code, manually adding it",
+        )
+        shellCode.push(demoCode)
+      }
+
+      // Combine all dependencies (exactly matching preview.tsx)
+      const allDependencies = [...registryDependenciesArray, ...shellCode]
+      console.log(
+        "[compileCSS] Total dependencies count:",
+        allDependencies.length,
+      )
+
+      console.log(
+        "[compileCSS] Attempting to compile CSS with backend:",
+        backendUrl,
+      )
+
+      // Prepare request payload - explicitly include demoCode separately to ensure it's used
+      const payload = {
+        code: componentCode,
+        demoCode: demoCode, // Ensure demo code is explicitly included
+        baseTailwindConfig: defaultTailwindConfig,
+        baseGlobalCss: defaultGlobalCss,
+        customTailwindConfig: mergedTailwindConfig || null,
+        customGlobalCss: mergedGlobalCss || null,
+        dependencies: allDependencies,
+      }
+
+      // Additional verification that demo code is included
+      if (!payload.demoCode || payload.demoCode.length === 0) {
+        console.warn(
+          "[compileCSS] Warning: Empty demo code in payload, using default demo code",
+        )
+        // Set a default demo code if somehow it's missing
+        payload.demoCode = `
+          import React from 'react';
+          export default function Demo() {
+            return <div className="p-4">Demo component</div>;
+          }
+        `
+      }
+
+      console.log("[compileCSS] Request payload keys:", Object.keys(payload))
+      console.log(
+        "[compileCSS] Demo code included in payload:",
+        !!payload.demoCode,
+      )
+      console.log(
+        "[compileCSS] Demo code length in payload:",
+        payload.demoCode.length,
+      )
+
+      // Full URL for debugging
+      const fullUrl = `${backendUrl}/compile-css`
+      console.log("[compileCSS] Full URL:", fullUrl)
+
+      // Make the request with detailed error handling
+      console.log("[compileCSS] Sending request now...")
+
+      const response = await fetch(fullUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+      })
+
+      console.log("[compileCSS] Response status:", response.status)
+
+      if (!response.ok) {
+        console.error(
+          `[compileCSS] Server error: ${response.status} ${response.statusText}`,
+        )
+        throw new Error(
+          `Server responded with ${response.status}: ${response.statusText}`,
+        )
+      }
+
+      const data = await response.json()
+      if (data.error) {
+        console.error("[compileCSS] CSS compilation failed:", {
+          error: data.error,
+          details: data.details,
+        })
+        toast.error(`CSS compilation failed: ${data.details || data.error}`)
+        // Default CSS is already set above
+      } else {
+        console.log(
+          "[compileCSS] CSS compiled successfully, length:",
+          data.css.length,
+        )
+        setCompiledCss(data.css)
+      }
+      setIsCssCompiling(false)
+    } catch (error) {
+      console.error("[compileCSS] Failed to compile CSS:", error)
+      console.log("[compileCSS] Using default CSS instead")
+      // Default CSS is already set above
+      setIsCssCompiling(false)
+    }
+  }, [
+    componentCode,
+    processedData,
+    registryDependencies,
+    files,
+    mergedTailwindConfig,
+    mergedGlobalCss,
+    getComponentFilePath,
+    isCssCompiling,
+    generateStylesCss,
+  ])
+
+  // Force recompilation when demo file changes
+  const triggerDemoRecompilation = useCallback(() => {
+    console.log(
+      "[triggerDemoRecompilation] Forcing recompilation due to demo changes",
+    )
+
+    // Clear any existing timeout
+    if (cssCompileTimeoutRef.current) {
+      clearTimeout(cssCompileTimeoutRef.current)
+      cssCompileTimeoutRef.current = null
+    }
+
+    // Force update the hash reference to ensure we detect the change
+    prevFilesHashRef.current = ""
+
+    // Schedule immediate recompilation
+    setTimeout(() => {
+      lastCompilationTimeRef.current = Date.now()
+      compileCSS()
+    }, 300)
+  }, [compileCSS])
+
+  // Set up the effect to trigger CSS compilation when files change
+  useEffect(() => {
+    // Don't compile if we're still processing the component
+    if (isProcessing || !processedData) return
+
+    // Generate a hash of all key files to detect changes
+    const currentFilesHash = generateFilesHash()
+
+    // Check specifically for demo file changes
+    const demoFile = files["/demo.tsx"]
+    const demoContent =
+      typeof demoFile === "string" ? demoFile : demoFile?.code || ""
+    const demoChanged = demoContent !== lastDemoContentRef.current
+
+    if (demoChanged) {
+      console.log(
+        "[useEffect] Demo file changed directly! Length:",
+        demoContent.length,
+      )
+      lastDemoContentRef.current = demoContent
+
+      // Skip debounce for demo changes - compile more aggressively
+      if (cssCompileTimeoutRef.current) {
+        clearTimeout(cssCompileTimeoutRef.current)
+      }
+
+      // Trigger immediate compilation for demo changes
+      cssCompileTimeoutRef.current = setTimeout(() => {
+        prevFilesHashRef.current = currentFilesHash
+        lastCompilationTimeRef.current = Date.now()
+        compileCSS()
+        cssCompileTimeoutRef.current = null
+      }, 500) // Faster debounce for demo changes
+
+      return
+    }
+
+    // Normal debounce logic for other changes
+    // Don't recompile if no files have changed and it was recently compiled
+    if (
+      currentFilesHash === prevFilesHashRef.current &&
+      Date.now() - lastCompilationTimeRef.current < 5000
+    ) {
+      console.log(
+        "[compileCSS] Skipping - no files have changed since last compilation",
+      )
+      return
+    }
+
+    // Don't compile if a compilation is already in progress
+    if (isCssCompiling) {
+      console.log("[compileCSS] Skipping - compilation already in progress")
+      return
+    }
+
+    // Clear any existing timeout
+    if (cssCompileTimeoutRef.current) {
+      clearTimeout(cssCompileTimeoutRef.current)
+    }
+
+    console.log("[compileCSS] Files have changed, scheduling compilation")
+
+    // Set a new timeout to debounce the compilation
+    cssCompileTimeoutRef.current = setTimeout(() => {
+      // Update the hash reference before compilation
+      prevFilesHashRef.current = currentFilesHash
+      lastCompilationTimeRef.current = Date.now()
+      compileCSS()
+      cssCompileTimeoutRef.current = null
+    }, 1000) // Debounce for 1 second
+
+    // Cleanup timeout on unmount
+    return () => {
+      if (cssCompileTimeoutRef.current) {
+        clearTimeout(cssCompileTimeoutRef.current)
+      }
+    }
+  }, [
+    files,
+    processedData,
+    isProcessing,
+    registryDependencies,
+    compileCSS,
+    isCssCompiling,
+    generateFilesHash,
+  ])
+
+  // Clean up on unmount
+  useEffect(() => {
+    return () => {
+      if (cssCompileTimeoutRef.current) {
+        clearTimeout(cssCompileTimeoutRef.current)
+      }
+    }
+  }, [])
+
+  return {
+    compiledCss,
+    isCssCompiling,
+    generateStylesCss,
+    forceRecompile: triggerDemoRecompilation,
+  }
+}
diff --git a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
index b0ffa033..161ff89f 100644
--- a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
@@ -10,6 +10,7 @@ import {
   convertComponentMatchesToDependencySlugs,
 } from "@/components/features/studio/editor/utils/component-lookup"
 import type { SandpackFiles } from "@codesandbox/sandpack-react"
+import { useCssCompiler } from "./use-css-compiler"
 
 // Create a file content cache that persists across component remounts
 const fileContentCache = new Map<string, string>()
@@ -25,6 +26,11 @@ interface UsePublishDialogProps {
   userId: string
 }
 
+// Define the generateStylesCss function up front so it can be used in the files useMemo
+const generateStylesCss = () => {
+  return defaultGlobalCss
+}
+
 export function usePublishDialog({ userId }: UsePublishDialogProps) {
   // Dialog state
   const [open, setOpen] = useState(false)
@@ -66,20 +72,21 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
   // Add max timeout for safety
   const maxLoadingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 
-  // Add state for compiled CSS
-  const [compiledCss, setCompiledCss] = useState<string | null>(null)
+  // We'll track our own initial compiledCss state directly in the files useMemo
+  const [initialCompiledCss, setInitialCompiledCss] = useState<string | null>(
+    null,
+  )
 
-  // Add state to track in-progress compilation
-  const [isCssCompiling, setIsCssCompiling] = useState(false)
-  // Add ref for debouncing
-  const cssCompileTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-  // Add ref for previous component code
-  const prevComponentCodeRef = useRef<string>("")
-  // Add ref to track last compilation time
-  const lastCompilationTimeRef = useRef<number>(0)
+  // Get component file path
+  const getComponentFilePath = useCallback(() => {
+    if (!processedData) return "/components/ui/component.tsx"
 
-  // Add ref for tracking the content hash of all files
-  const prevFilesHashRef = useRef<string>("")
+    const registryType = processedData.registryType || "ui"
+    const fileName = processedData.slug
+      ? `${processedData.slug}.tsx`
+      : "component.tsx"
+    return `/components/${registryType}/${fileName}`
+  }, [processedData])
 
   // Safety cleanup for loading state
   useEffect(() => {
@@ -94,206 +101,103 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     }
   }, [])
 
-  // Get component file path
-  const getComponentFilePath = useCallback(() => {
-    if (!processedData) return "/components/ui/component.tsx"
-
-    const registryType = processedData.registryType || "ui"
-    const fileName = processedData.slug
-      ? `${processedData.slug}.tsx`
-      : "component.tsx"
-    return `/components/${registryType}/${fileName}`
-  }, [processedData])
-
-  // Reset dialog state
-  const resetState = useCallback(() => {
-    setComponentCode("")
-    setProcessedData(null)
-    setIsProcessing(false)
-    setIsPublishing(false)
-    setActivePreview(null)
-    setRegistryDependencies({})
-    setNpmDependenciesOfRegistryDependencies({})
-    setMergedTailwindConfig(null)
-    setMergedGlobalCss(null)
-    setActionRequiredFiles([])
-  }, [])
-
-  // Handle dialog open/close
-  const handleOpenChange = useCallback(
-    (isOpen: boolean) => {
-      setOpen(isOpen)
-      if (!isOpen) resetState()
-    },
-    [resetState],
-  )
-
-  // Set the component code and also update cache
-  const setComponentCodeWithCache = useCallback(
-    (code: string, path?: string) => {
-      const filePath = path || activePreview?.filePath
-      setComponentCode(code)
-
-      // Store in cache if we have a valid path
-      if (filePath) {
-        console.log("[usePublishDialog] Caching file content:", {
-          path: filePath,
-          codeLength: code.length,
-        })
-        fileContentCache.set(filePath, code)
-      }
-    },
-    [activePreview?.filePath],
-  )
-
-  // Helper function to get cached content
-  const getCachedFileContent = useCallback((path: string) => {
-    return fileContentCache.get(path)
-  }, [])
-
   // Helper function to generate a simple App.tsx that can handle demo files with both named and default exports
   const generateAppTsx = () => {
+    console.log("[generateAppTsx] Generating App.tsx with demo import")
     return `import React, { useState, useEffect } from 'react';
-    import { ThemeProvider } from 'next-themes';
-    import { RouterProvider } from 'next/router';
-    import './styles.css';
-    import DefaultExport, * as NamedExports from './demo';
-
-    // Combine named exports and default export components
-    const demoComponentNames = [
-      ...Object.keys(DefaultExport || {}),
-      ...Object.keys(NamedExports).filter(key => 
-        typeof NamedExports[key] === 'function' && key !== 'default'
-      )
-    ];
+import { ThemeProvider } from 'next-themes';
+import { RouterProvider } from 'next/router';
+import './styles.css';
+import DefaultExport, * as NamedExports from './demo';
+
+// Log what's available in the demo file for debugging
+console.log('Demo components loaded:', {
+  defaultExport: DefaultExport,
+  namedExports: Object.keys(NamedExports).filter(k => k !== 'default')
+});
+
+// Combine named exports and default export components
+const demoComponentNames = [
+  ...(DefaultExport && typeof DefaultExport === 'object' ? Object.keys(DefaultExport) : []),
+  ...Object.keys(NamedExports).filter(key => 
+    typeof NamedExports[key] === 'function' && key !== 'default'
+  )
+];
 
-    const DemoComponents = {
-      ...(DefaultExport || {}),
-      ...Object.fromEntries(
-        Object.entries(NamedExports).filter(([key, value]) => 
-          typeof value === 'function' && key !== 'default'
-        )
-      )
-    };
+console.log('Available demo component names:', demoComponentNames);
 
-    export default function App() {
-      const [currentIndex, setCurrentIndex] = useState(0);
-      const CurrentComponent = demoComponentNames.length > 0 
-        ? DemoComponents[demoComponentNames[currentIndex]]
-        : () => <div className="p-6 text-center">Add components to demo.tsx</div>;
-
-      useEffect(() => {
-        const handleKeyDown = (e) => {
-          if ((e.metaKey || e.ctrlKey) && demoComponentNames.length > 1) {
-            if (e.key === 'ArrowDown') {
-              e.preventDefault();
-              setCurrentIndex(prev => (prev + 1) % demoComponentNames.length);
-            } else if (e.key === 'ArrowUp') {
-              e.preventDefault();
-              setCurrentIndex(prev => (prev - 1 + demoComponentNames.length) % demoComponentNames.length);
-            }
-          }
-        };
-        window.addEventListener('keydown', handleKeyDown);
-        return () => window.removeEventListener('keydown', handleKeyDown);
-      }, []);
+const DemoComponents = {
+  ...(DefaultExport && typeof DefaultExport === 'object' ? DefaultExport : {}),
+  ...(typeof DefaultExport === 'function' ? { Demo: DefaultExport } : {}),
+  ...Object.fromEntries(
+    Object.entries(NamedExports).filter(([key, value]) => 
+      typeof value === 'function' && key !== 'default'
+    )
+  )
+};
+
+export default function App() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  
+  // Handle both object of components and direct function component export
+  const getComponent = () => {
+    if (demoComponentNames.length > 0) {
+      return DemoComponents[demoComponentNames[currentIndex]];
+    } else if (typeof DefaultExport === 'function') {
+      return DefaultExport;
+    } else {
+      return () => <div className="p-6 text-center">Add components to demo.tsx</div>;
+    }
+  };
+  
+  const CurrentComponent = getComponent();
 
-      return (
-        <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
-          <RouterProvider>
-            <div className="flex flex-col items-center min-h-screen p-4 bg-background text-foreground">
-              {demoComponentNames.length > 1 && (
-                <div className="self-end mb-4">
-                  <select 
-                    value={demoComponentNames[currentIndex]} 
-                    onChange={(e) => {
-                      const idx = demoComponentNames.indexOf(e.target.value);
-                      if (idx !== -1) setCurrentIndex(idx);
-                    }}
-                    className="p-2 border rounded bg-background text-foreground"
-                  >
-                    {demoComponentNames.map(name => (
-                      <option key={name} value={name}>
-                        {name.replace(/([A-Z])/g, ' $1').trim()}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-              )}
-              
-              <div className="flex items-center justify-center w-full">
-                <CurrentComponent />
-              </div>
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if ((e.metaKey || e.ctrlKey) && demoComponentNames.length > 1) {
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          setCurrentIndex(prev => (prev + 1) % demoComponentNames.length);
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          setCurrentIndex(prev => (prev - 1 + demoComponentNames.length) % demoComponentNames.length);
+        }
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  return (
+    <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
+      <RouterProvider>
+        <div className="flex flex-col items-center justify-center min-h-screen p-4 bg-background text-foreground">
+          {demoComponentNames.length > 1 && (
+            <div className="self-end mb-4">
+              <select 
+                value={demoComponentNames[currentIndex]} 
+                onChange={(e) => {
+                  const idx = demoComponentNames.indexOf(e.target.value);
+                  if (idx !== -1) setCurrentIndex(idx);
+                }}
+                className="p-2 border rounded bg-background text-foreground"
+              >
+                {demoComponentNames.map(name => (
+                  <option key={name} value={name}>
+                    {name.replace(/([A-Z])/g, ' $1').trim()}
+                  </option>
+                ))}
+              </select>
             </div>
-          </RouterProvider>
-        </ThemeProvider>
-      );
-    }`
-  }
-
-  // Helper function to generate basic styles.css
-  const generateStylesCss = () => {
-    return `
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --background: 0 0% 100%;
-  --foreground: 240 10% 3.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 240 10% 3.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 240 10% 3.9%;
-  --primary: 240 5.9% 10%;
-  --primary-foreground: 0 0% 98%;
-  --secondary: 240 4.8% 95.9%;
-  --secondary-foreground: 240 5.9% 10%;
-  --muted: 240 4.8% 95.9%;
-  --muted-foreground: 240 3.8% 46.1%;
-  --accent: 240 4.8% 95.9%;
-  --accent-foreground: 240 5.9% 10%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 240 5.9% 90%;
-  --input: 240 5.9% 90%;
-  --ring: 240 5.9% 10%;
-  --radius: 0.5rem;
-}
-
-.dark {
-  --background: 240 10% 3.9%;
-  --foreground: 0 0% 98%;
-  --card: 240 10% 3.9%;
-  --card-foreground: 0 0% 98%;
-  --popover: 240 10% 3.9%;
-  --popover-foreground: 0 0% 98%;
-  --primary: 0 0% 98%;
-  --primary-foreground: 240 5.9% 10%;
-  --secondary: 240 3.7% 15.9%;
-  --secondary-foreground: 0 0% 98%;
-  --muted: 240 3.7% 15.9%;
-  --muted-foreground: 240 5% 64.9%;
-  --accent: 240 3.7% 15.9%;
-  --accent-foreground: 0 0% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 240 3.7% 15.9%;
-  --input: 240 3.7% 15.9%;
-  --ring: 240 4.9% 83.9%;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  background-color: hsl(var(--background));
-  color: hsl(var(--foreground));
-  line-height: 1.5;
+          )}
+          
+          <div className="flex items-center justify-center w-full">
+            <CurrentComponent />
+          </div>
+        </div>
+      </RouterProvider>
+    </ThemeProvider>
+  );
 }`
   }
 
@@ -345,7 +249,32 @@ body {
 
     // Add empty demo.tsx file
     allFiles["/demo.tsx"] = {
-      code: '// Add your demo code here\nexport default function Demo() {\n  return (\n    <div className="p-4">\n      {/* Add your component demo here */}\n      <div className="border-2 border-dashed border-gray-200 p-6 rounded-lg text-center">\n        Edit this file to create your component demo\n      </div>\n    </div>\n  );\n}',
+      code: `// Add your demo code here
+import React from 'react';
+
+// This component will be recognized by the CSS compiler and styles will be generated
+export default function Demo() {
+  return (
+    <div className="p-4">
+      {/* Add your component demo here */}
+      <div className="border-2 border-dashed border-gray-200 p-6 rounded-lg text-center">
+        Edit this file to create your component demo
+      </div>
+    </div>
+  );
+}
+
+// You can also add named exports for multiple demos
+/*
+export function SecondDemo() {
+  return (
+    <div className="p-4 bg-muted rounded-lg">
+      Another demo component
+    </div>
+  );
+}
+*/
+`,
     }
 
     // Add any cached file content for unknown components
@@ -367,8 +296,10 @@ body {
     // Add a simple App.tsx that imports and renders demo.tsx
     allFiles["/App.tsx"] = { code: generateAppTsx() }
 
-    // Add styles.css file
-    allFiles["/styles.css"] = { code: compiledCss || generateStylesCss() }
+    // Add styles.css file with the compiled CSS from our hook
+    allFiles["/styles.css"] = {
+      code: initialCompiledCss || generateStylesCss(),
+    }
 
     return allFiles
   }, [
@@ -380,9 +311,75 @@ body {
     mergedTailwindConfig,
     mergedGlobalCss,
     activePreview?.filePath,
-    compiledCss,
+    initialCompiledCss,
+    generateStylesCss,
   ])
 
+  // Use our CSS compiler hook
+  const { compiledCss, forceRecompile } = useCssCompiler({
+    componentCode,
+    processedData,
+    isProcessing,
+    registryDependencies,
+    files,
+    mergedTailwindConfig,
+    mergedGlobalCss,
+    getComponentFilePath,
+  })
+
+  // Update the initial compiled CSS when the compiled CSS changes
+  useEffect(() => {
+    if (compiledCss) {
+      setInitialCompiledCss(compiledCss)
+    }
+  }, [compiledCss])
+
+  // Reset dialog state
+  const resetState = useCallback(() => {
+    setComponentCode("")
+    setProcessedData(null)
+    setIsProcessing(false)
+    setIsPublishing(false)
+    setActivePreview(null)
+    setRegistryDependencies({})
+    setNpmDependenciesOfRegistryDependencies({})
+    setMergedTailwindConfig(null)
+    setMergedGlobalCss(null)
+    setActionRequiredFiles([])
+  }, [])
+
+  // Handle dialog open/close
+  const handleOpenChange = useCallback(
+    (isOpen: boolean) => {
+      setOpen(isOpen)
+      if (!isOpen) resetState()
+    },
+    [resetState],
+  )
+
+  // Set the component code and also update cache
+  const setComponentCodeWithCache = useCallback(
+    (code: string, path?: string) => {
+      const filePath = path || activePreview?.filePath
+      setComponentCode(code)
+
+      // Store in cache if we have a valid path
+      if (filePath) {
+        console.log("[usePublishDialog] Caching file content:", {
+          path: filePath,
+          codeLength: code.length,
+        })
+        fileContentCache.set(filePath, code)
+      }
+    },
+    [activePreview?.filePath],
+  )
+
+  // Helper function to get cached content
+  const getCachedFileContent = useCallback((path: string) => {
+    return fileContentCache.get(path)
+  }, [])
+
   // Unified handler for preview selection
   const handlePreviewSelect = useCallback(
     (newPreview: ActivePreview) => {
@@ -817,226 +814,32 @@ body {
     isProcessing,
   ])
 
-  // Helper function to generate a hash of all key file contents
-  // This helps us detect when any important file has changed
-  const generateFilesHash = useCallback(() => {
-    const keyFiles = [
-      "/demo.tsx",
-      getComponentFilePath(),
-      "/styles.css",
-      "/tailwind.config.js",
-    ]
-
-    // Collect content of key files
-    const contents = keyFiles
-      .map((path) => {
-        const file = files[path]
-        return path + ":" + (typeof file === "string" ? file : file?.code || "")
-      })
-      .join("|")
-
-    return contents
-  }, [files, getComponentFilePath])
-
-  // Update the compileCSS function to track compilation state
-  const compileCSS = useCallback(async () => {
-    if (!componentCode || !processedData) {
-      console.log("[compileCSS] Skipping - no component code or processed data")
-      return
-    }
-
-    if (isCssCompiling) {
-      console.log("[compileCSS] Skipping - compilation already in progress")
-      return
-    }
-
-    setIsCssCompiling(true)
-    console.log("[compileCSS] Starting CSS compilation")
-
-    // Always initialize with the default CSS
-    const defaultCss = generateStylesCss()
-    setCompiledCss(defaultCss)
-    console.log("[compileCSS] Set default CSS fallback")
-
-    // Check if backend URL is available
-    const backendUrl = process.env.NEXT_PUBLIC_COMPILE_CSS_URL
-    if (!backendUrl) {
-      console.log("[compileCSS] Backend URL not available, using default CSS")
-      setIsCssCompiling(false)
-      return
-    }
-
-    console.log("[compileCSS] Backend URL:", backendUrl)
-
-    try {
-      // Get the component path based on processed data
-      const componentPath = getComponentFilePath()
-      console.log("[compileCSS] Component path:", componentPath)
-
-      // Extract all registry dependencies correctly (matching preview.tsx format)
-      const registryDependenciesArray = Object.entries(
-        registryDependencies || {},
-      ).map(([_, item]) => (typeof item === "string" ? item : item.code))
-      console.log(
-        "[compileCSS] Registry dependencies count:",
-        registryDependenciesArray.length,
-      )
-
-      // Generate shell code exactly like preview.tsx does
-      const shellCode = Object.entries(files)
-        .filter(([key]) => /\.(tsx|jsx|ts|js)$/.test(key))
-        .map(([key, value]) => {
-          console.log("[compileCSS] Including file:", key)
-          return typeof value === "string" ? value : value.code
-        })
-      console.log("[compileCSS] Shell code count:", shellCode.length)
-
-      // Combine all dependencies (exactly matching preview.tsx)
-      const allDependencies = [...registryDependenciesArray, ...shellCode]
-      console.log(
-        "[compileCSS] Total dependencies count:",
-        allDependencies.length,
-      )
-
-      // Safely get demo code
-      const demoFile = files["/demo.tsx"]
-      const demoCode =
-        typeof demoFile === "string" ? demoFile : demoFile?.code || ""
-      console.log("[compileCSS] Demo code length:", demoCode.length)
-
+  // Handle file changes from Sandpack editor
+  const handleFileChange = useCallback(
+    (path: string, fileContent: string) => {
       console.log(
-        "[compileCSS] Attempting to compile CSS with backend:",
-        backendUrl,
+        `[handleFileChange] File ${path} changed, updating files state`,
       )
 
-      // Prepare request payload - exactly match format from preview.tsx
-      const payload = {
-        code: componentCode,
-        demoCode,
-        baseTailwindConfig: defaultTailwindConfig,
-        baseGlobalCss: defaultGlobalCss,
-        customTailwindConfig: mergedTailwindConfig || null,
-        customGlobalCss: mergedGlobalCss || null,
-        dependencies: allDependencies,
-      }
-
-      console.log("[compileCSS] Request payload keys:", Object.keys(payload))
-
-      // Full URL for debugging
-      const fullUrl = `${backendUrl}/compile-css`
-      console.log("[compileCSS] Full URL:", fullUrl)
-
-      // Make the request with detailed error handling
-      console.log("[compileCSS] Sending request now...")
-
-      const response = await fetch(fullUrl, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(payload),
-      })
-
-      console.log("[compileCSS] Response status:", response.status)
-
-      if (!response.ok) {
-        console.error(
-          `[compileCSS] Server error: ${response.status} ${response.statusText}`,
-        )
-        throw new Error(
-          `Server responded with ${response.status}: ${response.statusText}`,
-        )
-      }
-
-      const data = await response.json()
-      if (data.error) {
-        console.error("[compileCSS] CSS compilation failed:", {
-          error: data.error,
-          details: data.details,
-        })
-        toast.error(`CSS compilation failed: ${data.details || data.error}`)
-        // Default CSS is already set above
-      } else {
+      // If this is the demo file, make sure we update our files state
+      if (path === "/demo.tsx") {
         console.log(
-          "[compileCSS] CSS compiled successfully, length:",
-          data.css.length,
+          "[handleFileChange] Demo file changed, length:",
+          fileContent.length,
         )
-        setCompiledCss(data.css)
-      }
-      setIsCssCompiling(false)
-    } catch (error) {
-      console.error("[compileCSS] Failed to compile CSS:", error)
-      console.log("[compileCSS] Using default CSS instead")
-      // Default CSS is already set above
-      setIsCssCompiling(false)
-    }
-  }, [
-    componentCode,
-    processedData,
-    registryDependencies,
-    files,
-    mergedTailwindConfig,
-    mergedGlobalCss,
-    getComponentFilePath,
-    isCssCompiling,
-  ])
-
-  // Call the compile function when relevant files change, with debouncing
-  useEffect(() => {
-    // Don't compile if we're still processing the component
-    if (isProcessing || !processedData) return
-
-    // Generate a hash of all key files to detect changes
-    const currentFilesHash = generateFilesHash()
-
-    // Don't recompile if no files have changed and it was recently compiled
-    if (
-      currentFilesHash === prevFilesHashRef.current &&
-      Date.now() - lastCompilationTimeRef.current < 5000
-    ) {
-      console.log(
-        "[compileCSS] Skipping - no files have changed since last compilation",
-      )
-      return
-    }
 
-    // Don't compile if a compilation is already in progress
-    if (isCssCompiling) {
-      console.log("[compileCSS] Skipping - compilation already in progress")
-      return
-    }
-
-    // Clear any existing timeout
-    if (cssCompileTimeoutRef.current) {
-      clearTimeout(cssCompileTimeoutRef.current)
-    }
+        // Cache the changes
+        fileContentCache.set(path, fileContent)
 
-    console.log("[compileCSS] Files have changed, scheduling compilation")
+        // Update the files object directly
+        files[path] = { code: fileContent }
 
-    // Set a new timeout to debounce the compilation
-    cssCompileTimeoutRef.current = setTimeout(() => {
-      // Update the hash reference before compilation
-      prevFilesHashRef.current = currentFilesHash
-      lastCompilationTimeRef.current = Date.now()
-      compileCSS()
-      cssCompileTimeoutRef.current = null
-    }, 1000) // Debounce for 1 second
-
-    // Cleanup timeout on unmount
-    return () => {
-      if (cssCompileTimeoutRef.current) {
-        clearTimeout(cssCompileTimeoutRef.current)
+        // Force CSS recompilation to pick up the changes
+        forceRecompile()
       }
-    }
-  }, [
-    files, // Track all files - this will catch changes to demo.tsx and other files
-    processedData,
-    isProcessing,
-    registryDependencies,
-    compileCSS,
-    isCssCompiling,
-    generateFilesHash,
-  ])
+    },
+    [files, forceRecompile],
+  )
 
   return {
     open,
@@ -1056,5 +859,6 @@ body {
     sandpackConfig,
     getComponentFilePath,
     isUnknownComponent,
+    handleFileChange, // Export the handler for Sandpack component
   }
 }

From a7d38201febf98216529ebdaa6807c42d32195b5 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Mon, 7 Apr 2025 18:26:37 +0300
Subject: [PATCH 045/143] refactor - req panel

---
 .../studio/editor/requirements-panel.tsx      | 69 +++++--------------
 1 file changed, 16 insertions(+), 53 deletions(-)

diff --git a/apps/web/components/features/studio/editor/requirements-panel.tsx b/apps/web/components/features/studio/editor/requirements-panel.tsx
index ab026b52..1b937a72 100644
--- a/apps/web/components/features/studio/editor/requirements-panel.tsx
+++ b/apps/web/components/features/studio/editor/requirements-panel.tsx
@@ -49,60 +49,23 @@ export function RequirementsPanel({
   // Prepare message content based on additionalStyles
   const getMessageContent = () => {
     if (isTailwindConfig) {
-      // Find specific extensions with values
       const extensionDetails: string[] = []
-
-      if (actionDetails?.tailwindExtensions) {
-        // Check for boxShadow extensions
-        if (
-          actionDetails.tailwindExtensions.boxShadow &&
-          Object.keys(actionDetails.tailwindExtensions.boxShadow).length > 0
-        ) {
-          const shadows = Object.keys(
-            actionDetails.tailwindExtensions.boxShadow,
-          ).join(", ")
-          extensionDetails.push(`shadows: ${shadows}`)
-        }
-
-        // Check for color extensions
-        if (
-          actionDetails.tailwindExtensions.colors &&
-          Object.keys(actionDetails.tailwindExtensions.colors).length > 0
-        ) {
-          const colors = Object.keys(
-            actionDetails.tailwindExtensions.colors,
-          ).join(", ")
-          extensionDetails.push(`colors: ${colors}`)
-        }
-
-        // Check for animation extensions
-        if (
-          actionDetails.tailwindExtensions.animations &&
-          Object.keys(actionDetails.tailwindExtensions.animations).length > 0
-        ) {
-          const animations = Object.keys(
-            actionDetails.tailwindExtensions.animations,
-          ).join(", ")
-          extensionDetails.push(`animations: ${animations}`)
-        }
-
-        // Check for other extensions
-        ;["borderRadius", "fontFamily", "spacing"].forEach((extType) => {
-          if (
-            actionDetails?.tailwindExtensions?.[
-              extType as keyof typeof actionDetails.tailwindExtensions
-            ] &&
-            Object.keys(
-              actionDetails.tailwindExtensions[
-                extType as keyof typeof actionDetails.tailwindExtensions
-              ] || {},
-            ).length > 0
-          ) {
-            const values = Object.keys(
-              actionDetails.tailwindExtensions[
-                extType as keyof typeof actionDetails.tailwindExtensions
-              ] || {},
-            ).join(", ")
+      const tailwindExtensions = actionDetails?.tailwindExtensions
+
+      if (tailwindExtensions) {
+        const extensionTypes = [
+          "boxShadow",
+          "colors",
+          "animations",
+          "borderRadius",
+          "fontFamily",
+          "spacing",
+        ] as const
+
+        extensionTypes.forEach((extType) => {
+          const extensions = tailwindExtensions[extType]
+          if (extensions && Object.keys(extensions).length > 0) {
+            const values = Object.keys(extensions).join(", ")
             extensionDetails.push(`${extType}: ${values}`)
           }
         })

From 40ec461d16f234ed48e0e1856dc5b108c9fcc037 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Mon, 7 Apr 2025 19:22:01 +0300
Subject: [PATCH 046/143] refactor: remove murge styles

---
 .../editor/component-publish-dialog.tsx       |  6 ---
 .../features/studio/editor/editor.tsx         |  6 ---
 .../features/studio/editor/file-explorer.tsx  | 40 ++-----------------
 .../studio/editor/hooks/use-css-compiler.ts   | 16 ++++----
 .../studio/editor/hooks/use-editor-dialog.ts  | 34 ++++------------
 .../studio/editor/utils/merge-styles.ts       | 16 --------
 6 files changed, 19 insertions(+), 99 deletions(-)

diff --git a/apps/web/components/features/studio/editor/component-publish-dialog.tsx b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
index daaca89c..a6ac7107 100644
--- a/apps/web/components/features/studio/editor/component-publish-dialog.tsx
+++ b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
@@ -66,7 +66,6 @@ export function ComponentPublishDialog({
     isProcessing,
     activePreview,
     loadingShadcnComponents,
-    loadingStyleFiles,
     actionRequiredFiles,
     handleOpenChange,
     handleProcessComponent,
@@ -113,7 +112,6 @@ export function ComponentPublishDialog({
                 ]
           }
           loadingFiles={loadingShadcnComponents}
-          loadingStyleFiles={loadingStyleFiles}
           actionRequiredFiles={actionRequiredFiles}
           processedData={processedData}
         />
@@ -128,7 +126,6 @@ export function ComponentPublishDialog({
           setComponentCode={setComponentCode}
           isUnknownComponent={isUnknownComponent}
           loadingFiles={loadingShadcnComponents}
-          loadingStyleFiles={loadingStyleFiles}
           actionRequiredFiles={actionRequiredFiles}
           processedData={processedData}
         />
@@ -212,7 +209,6 @@ interface SandpackContentProps {
   setComponentCode: (code: string) => void
   isUnknownComponent: (path: string) => boolean
   loadingFiles?: string[]
-  loadingStyleFiles?: string[]
   actionRequiredFiles?: string[]
   processedData?: any
 }
@@ -225,7 +221,6 @@ function SandpackContent({
   setComponentCode,
   isUnknownComponent,
   loadingFiles = [],
-  loadingStyleFiles = [],
   actionRequiredFiles = [],
   processedData,
 }: SandpackContentProps) {
@@ -363,7 +358,6 @@ function SandpackContent({
             selectedFile={activePreview?.filePath || ""}
             visibleFiles={sandpack.visibleFiles || []}
             loadingFiles={loadingFiles}
-            loadingStyleFiles={loadingStyleFiles}
           />
         </div>
         <div className="flex-1 flex">
diff --git a/apps/web/components/features/studio/editor/editor.tsx b/apps/web/components/features/studio/editor/editor.tsx
index 5328ff0a..e1f8b653 100644
--- a/apps/web/components/features/studio/editor/editor.tsx
+++ b/apps/web/components/features/studio/editor/editor.tsx
@@ -29,7 +29,6 @@ interface EditorProps {
   dependencies?: Record<string, string>
   visiblePaths?: string[]
   loadingFiles?: string[]
-  loadingStyleFiles?: string[]
   actionRequiredFiles?: string[]
   processedData?: any
 }
@@ -47,7 +46,6 @@ export function Editor({
   dependencies = {},
   visiblePaths,
   loadingFiles = [],
-  loadingStyleFiles = [],
   actionRequiredFiles = [],
   processedData,
 }: EditorProps) {
@@ -91,7 +89,6 @@ export function Editor({
           <MemoizedEditorContent
             visiblePaths={visiblePaths}
             loadingFiles={loadingFiles}
-            loadingStyleFiles={loadingStyleFiles}
             actionRequiredFiles={actionRequiredFiles}
             processedData={processedData}
           />
@@ -104,7 +101,6 @@ export function Editor({
 interface EditorContentProps {
   visiblePaths?: string[]
   loadingFiles?: string[]
-  loadingStyleFiles?: string[]
   actionRequiredFiles?: string[]
   processedData?: any
 }
@@ -112,7 +108,6 @@ interface EditorContentProps {
 function EditorContent({
   visiblePaths,
   loadingFiles = [],
-  loadingStyleFiles = [],
   actionRequiredFiles = [],
   processedData,
 }: EditorContentProps) {
@@ -282,7 +277,6 @@ function EditorContent({
             selectedFile={activeFile}
             visibleFiles={visiblePaths}
             loadingFiles={allLoadingFiles}
-            loadingStyleFiles={loadingStyleFiles}
           />
         </div>
 
diff --git a/apps/web/components/features/studio/editor/file-explorer.tsx b/apps/web/components/features/studio/editor/file-explorer.tsx
index c6f04650..2f6eeb12 100644
--- a/apps/web/components/features/studio/editor/file-explorer.tsx
+++ b/apps/web/components/features/studio/editor/file-explorer.tsx
@@ -28,12 +28,11 @@ interface FileTreeItem {
 }
 
 export interface FileExplorerProps {
-  nonShadcnComponents?: Array<{ name: string; path: string }>
+  nonShadcnComponents?: Array<{ name: string; path: string }> // TODO: rename to missedComponents
   onFileSelect?: (path: string) => void
   selectedFile?: string | null
   visibleFiles?: string[]
   loadingFiles?: string[]
-  loadingStyleFiles?: string[]
 }
 
 export function buildFileTree(
@@ -41,7 +40,6 @@ export function buildFileTree(
   nonShadcnComponents: Array<{ name: string; path: string }> = [],
   visibleFiles: string[] = [],
   loadingFiles: string[] = [],
-  loadingStyleFiles: string[] = [],
   actionRequiredFiles: string[] = [],
 ) {
   const root: FileTreeItem[] = []
@@ -56,10 +54,6 @@ export function buildFileTree(
       return true
     }
 
-    if (loadingStyleFiles.includes(path)) {
-      return true
-    }
-
     if (!visibleFiles || visibleFiles.length === 0) {
       return true
     }
@@ -107,8 +101,7 @@ export function buildFileTree(
           if (isStyleFile) {
             existingItem.isStyleFile = true
           }
-          existingItem.isLoading =
-            loadingFiles.includes(path) || loadingStyleFiles.includes(path)
+          existingItem.isLoading = loadingFiles.includes(path)
           existingItem.actionRequired = actionRequiredFiles.includes(path)
         }
         current = existingItem.children || []
@@ -120,9 +113,7 @@ export function buildFileTree(
           children: isLast ? undefined : [],
           isUnknownComponent: isLast ? isUnknownComponent : undefined,
           isStyleFile: isLast ? isStyleFile : undefined,
-          isLoading: isLast
-            ? loadingFiles.includes(path) || loadingStyleFiles.includes(path)
-            : undefined,
+          isLoading: isLast ? loadingFiles.includes(path) : undefined,
           actionRequired: isLast
             ? actionRequiredFiles.includes(path)
             : undefined,
@@ -166,10 +157,6 @@ export function buildFileTree(
     addToTree(path, false, componentName)
   })
 
-  loadingStyleFiles.forEach((path) => {
-    addToTree(path, false, "", true)
-  })
-
   const sortTreeRecursively = (items: FileTreeItem[]) => {
     items.sort((a, b) => {
       if (a.type !== b.type) {
@@ -196,7 +183,6 @@ function FileTreeNode({
   expandedDirs,
   onToggleDir,
   isLoading,
-  isStyleLoading,
   isActionRequired,
   activeFile,
   level = 0,
@@ -206,7 +192,6 @@ function FileTreeNode({
   expandedDirs: Set<string>
   onToggleDir: (path: string) => void
   isLoading: (path: string) => boolean
-  isStyleLoading: (path: string) => boolean
   isActionRequired: (path: string) => boolean
   activeFile?: string
   level?: number
@@ -267,10 +252,6 @@ function FileTreeNode({
           <div className="h-4 w-4 flex items-center justify-center">
             <Spinner size={14} />
           </div>
-        ) : isStyleLoading(item.path) ? (
-          <div className="h-4 w-4 flex items-center justify-center">
-            <Spinner size={14} color="#3b82f6" />
-          </div>
         ) : showWarning ? (
           <FileWarning className="h-4 w-4 text-yellow-500" />
         ) : isShadcnFile ? (
@@ -282,7 +263,7 @@ function FileTreeNode({
         ) : (
           <File className="h-4 w-4 text-gray-500" />
         )}
-        {item.isLoading || isLoading(item.path) || isStyleLoading(item.path) ? (
+        {item.isLoading || isLoading(item.path) ? (
           <TextShimmer className="truncate text-sm">{item.name}</TextShimmer>
         ) : (
           <span className={cn("truncate", showWarning && "text-yellow-600")}>
@@ -303,7 +284,6 @@ function FileTreeNode({
               expandedDirs={expandedDirs}
               onToggleDir={onToggleDir}
               isLoading={isLoading}
-              isStyleLoading={isStyleLoading}
               isActionRequired={isActionRequired}
             />
           ))}
@@ -322,7 +302,6 @@ export function FileExplorer({
   selectedFile,
   visibleFiles,
   loadingFiles = [],
-  loadingStyleFiles = [],
 }: FileExplorerProps) {
   const { sandpack } = useSandpack()
   const { visibleFiles: sandpackVisibleFiles } = sandpack
@@ -341,7 +320,6 @@ export function FileExplorer({
         nonShadcnComponents,
         visibleFiles,
         loadingFiles,
-        loadingStyleFiles,
         actionRequiredFilesList,
       ),
     [
@@ -349,7 +327,6 @@ export function FileExplorer({
       nonShadcnComponents,
       visibleFiles,
       loadingFiles,
-      loadingStyleFiles,
       actionRequiredFilesList,
     ],
   )
@@ -389,14 +366,6 @@ export function FileExplorer({
     [loadingFiles],
   )
 
-  // Check if a file is a loading style file
-  const isStyleFileLoading = useCallback(
-    (filePath: string) => {
-      return loadingStyleFiles.includes(filePath)
-    },
-    [loadingStyleFiles],
-  )
-
   // Check if a file needs action
   const isFileActionRequired = useCallback(
     (filePath: string) => {
@@ -419,7 +388,6 @@ export function FileExplorer({
             expandedDirs={expandedDirs}
             onToggleDir={handleToggleDir}
             isLoading={isFileLoading}
-            isStyleLoading={isStyleFileLoading}
             isActionRequired={isFileActionRequired}
             activeFile={selectedFile || undefined}
           />
diff --git a/apps/web/components/features/studio/editor/hooks/use-css-compiler.ts b/apps/web/components/features/studio/editor/hooks/use-css-compiler.ts
index 55649f44..fa3d404e 100644
--- a/apps/web/components/features/studio/editor/hooks/use-css-compiler.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-css-compiler.ts
@@ -9,8 +9,8 @@ interface UseCssCompilerProps {
   isProcessing: boolean
   registryDependencies: Record<string, { code: string; registry: string }>
   files: SandpackFiles
-  mergedTailwindConfig: string | null
-  mergedGlobalCss: string | null
+  globalCss: string
+  tailwindConfig: string
   getComponentFilePath: () => string
 }
 
@@ -24,8 +24,8 @@ export function useCssCompiler({
   isProcessing,
   registryDependencies,
   files,
-  mergedTailwindConfig,
-  mergedGlobalCss,
+  globalCss,
+  tailwindConfig,
   getComponentFilePath,
 }: UseCssCompilerProps) {
   // State for tracking compilation
@@ -191,8 +191,8 @@ export function useCssCompiler({
         demoCode: demoCode, // Ensure demo code is explicitly included
         baseTailwindConfig: defaultTailwindConfig,
         baseGlobalCss: defaultGlobalCss,
-        customTailwindConfig: mergedTailwindConfig || null,
-        customGlobalCss: mergedGlobalCss || null,
+        customTailwindConfig: tailwindConfig,
+        customGlobalCss: globalCss,
         dependencies: allDependencies,
       }
 
@@ -273,8 +273,8 @@ export function useCssCompiler({
     processedData,
     registryDependencies,
     files,
-    mergedTailwindConfig,
-    mergedGlobalCss,
+    tailwindConfig,
+    globalCss,
     getComponentFilePath,
     isCssCompiling,
     generateStylesCss,
diff --git a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
index 161ff89f..be95f0f0 100644
--- a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
@@ -4,7 +4,10 @@ import { useTheme } from "next-themes"
 import { generateSandpackFiles } from "../utils/sandpack-files"
 import { resolveRegistryDependencyTree } from "@/lib/queries.server"
 import { useClerkSupabaseClient } from "@/lib/clerk"
-import { defaultGlobalCss, defaultTailwindConfig } from "@/lib/defaults"
+import {
+  defaultGlobalCss as globalCss,
+  defaultTailwindConfig as tailwindConfig,
+} from "@/lib/defaults"
 import {
   lookupComponentsInDatabase,
   convertComponentMatchesToDependencySlugs,
@@ -28,7 +31,7 @@ interface UsePublishDialogProps {
 
 // Define the generateStylesCss function up front so it can be used in the files useMemo
 const generateStylesCss = () => {
-  return defaultGlobalCss
+  return globalCss
 }
 
 export function usePublishDialog({ userId }: UsePublishDialogProps) {
@@ -49,10 +52,6 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     npmDependenciesOfRegistryDependencies,
     setNpmDependenciesOfRegistryDependencies,
   ] = useState<Record<string, string>>({})
-  const [mergedTailwindConfig, setMergedTailwindConfig] = useState<
-    string | null
-  >(null)
-  const [mergedGlobalCss, setMergedGlobalCss] = useState<string | null>(null)
   const { resolvedTheme } = useTheme()
   const isDarkTheme = resolvedTheme === "dark"
   const supabase = useClerkSupabaseClient()
@@ -61,8 +60,6 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
   const [loadingShadcnComponents, setLoadingShadcnComponents] = useState<
     string[]
   >([])
-  // Add new state for tracking style merging status
-  const [loadingStyleFiles, setLoadingStyleFiles] = useState<string[]>([])
   // Add new state for tracking files that need action (style updates)
   const [actionRequiredFiles, setActionRequiredFiles] = useState<string[]>([])
 
@@ -308,8 +305,6 @@ export function SecondDemo() {
     processedData,
     npmDependenciesOfRegistryDependencies,
     registryDependencies,
-    mergedTailwindConfig,
-    mergedGlobalCss,
     activePreview?.filePath,
     initialCompiledCss,
     generateStylesCss,
@@ -322,8 +317,8 @@ export function SecondDemo() {
     isProcessing,
     registryDependencies,
     files,
-    mergedTailwindConfig,
-    mergedGlobalCss,
+    globalCss,
+    tailwindConfig,
     getComponentFilePath,
   })
 
@@ -343,8 +338,6 @@ export function SecondDemo() {
     setActivePreview(null)
     setRegistryDependencies({})
     setNpmDependenciesOfRegistryDependencies({})
-    setMergedTailwindConfig(null)
-    setMergedGlobalCss(null)
     setActionRequiredFiles([])
   }, [])
 
@@ -420,7 +413,6 @@ export function SecondDemo() {
 
     setIsProcessing(true)
     setLoadingShadcnComponents([]) // Reset loading state at the start
-    setLoadingStyleFiles([]) // Reset style loading state too
     setActionRequiredFiles([]) // Reset action required files
 
     try {
@@ -709,13 +701,6 @@ export function SecondDemo() {
 
           setRegistryDependencies(result.data.filesWithRegistry)
           setNpmDependenciesOfRegistryDependencies(result.data.npmDependencies)
-
-          // Merge styles if we have any
-          if (result.data.styles) {
-            // Use defaults for now
-            setMergedTailwindConfig(defaultTailwindConfig)
-            setMergedGlobalCss(defaultGlobalCss)
-          }
         } catch (depError) {
           console.error("Error resolving dependencies:", depError)
           toast.error(
@@ -735,7 +720,6 @@ export function SecondDemo() {
       console.error("Error processing component:", error)
       // Clear loading state immediately in case of main process error
       setLoadingShadcnComponents([])
-      setLoadingStyleFiles([])
       setActionRequiredFiles([])
     } finally {
       setIsProcessing(false)
@@ -745,9 +729,6 @@ export function SecondDemo() {
         if (loadingShadcnComponents.length > 0) {
           setLoadingShadcnComponents([])
         }
-        if (loadingStyleFiles.length > 0) {
-          setLoadingStyleFiles([])
-        }
         loadingTimeoutRef.current = null
       }, 5000) // 5 seconds should be enough for any remaining files
     }
@@ -849,7 +830,6 @@ export function SecondDemo() {
     isPublishing,
     activePreview,
     loadingShadcnComponents,
-    loadingStyleFiles,
     actionRequiredFiles,
     handleOpenChange,
     handleProcessComponent,
diff --git a/apps/web/components/features/studio/editor/utils/merge-styles.ts b/apps/web/components/features/studio/editor/utils/merge-styles.ts
index bf67ca14..96098711 100644
--- a/apps/web/components/features/studio/editor/utils/merge-styles.ts
+++ b/apps/web/components/features/studio/editor/utils/merge-styles.ts
@@ -5,11 +5,9 @@ import { defaultGlobalCss, defaultTailwindConfig } from "@/lib/defaults"
  * Merges tailwind config and global CSS from dependencies
  *
  * @param styles Array of style objects containing tailwindConfig and globalCss
- * @param setLoadingStyleFiles Optional state setter for tracking loading files
  */
 export async function mergeStyles(
   styles: { tailwindConfig?: string; globalCss?: string }[],
-  setLoadingStyleFiles?: (callback: (prev: string[]) => string[]) => void,
 ) {
   const customTailwindConfigs = styles
     .map((s) => s.tailwindConfig)
@@ -32,8 +30,6 @@ export async function mergeStyles(
   const tailwindConfigPromise =
     customTailwindConfigs.length > 0
       ? (async () => {
-          // Set loading state
-          setLoadingStyleFiles?.((prev) => [...prev, "/tailwind.config.js"])
           console.log("[mergeStyles] Started merging tailwind config")
 
           try {
@@ -55,11 +51,6 @@ export async function mergeStyles(
             console.error("Error merging tailwind config:", error)
             toast.error("Failed to merge tailwind config")
             return { tailwindConfig: defaultTailwindConfig }
-          } finally {
-            // Always clear loading state when done, whether successful or not
-            setLoadingStyleFiles?.((prev) =>
-              prev.filter((filePath) => filePath !== "/tailwind.config.js"),
-            )
           }
         })()
       : Promise.resolve({ tailwindConfig: defaultTailwindConfig })
@@ -67,8 +58,6 @@ export async function mergeStyles(
   const globalCssPromise =
     customGlobalCssStyles.length > 0
       ? (async () => {
-          // Set loading state
-          setLoadingStyleFiles?.((prev) => [...prev, "/globals.css"])
           console.log("[mergeStyles] Started merging global CSS")
 
           try {
@@ -90,11 +79,6 @@ export async function mergeStyles(
             console.error("Error merging global CSS:", error)
             toast.error("Failed to merge global CSS")
             return { globalCss: defaultGlobalCss }
-          } finally {
-            // Always clear loading state when done, whether successful or not
-            setLoadingStyleFiles?.((prev) =>
-              prev.filter((filePath) => filePath !== "/globals.css"),
-            )
           }
         })()
       : Promise.resolve({ globalCss: defaultGlobalCss })

From 2e33f9d195887f9389f0d659c0f8ca72c2bf9f19 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Mon, 7 Apr 2025 19:36:24 +0300
Subject: [PATCH 047/143] refactor - remane

---
 .../api/studio/preprocess-component/route.ts  |  2 +-
 .../features/studio/editor/code-manager.tsx   | 21 +++++++-----
 .../editor/component-publish-dialog.tsx       | 12 +++----
 .../studio/editor/context/editor-state.tsx    | 33 ++++++++++---------
 .../features/studio/editor/editor.tsx         | 12 +++----
 .../features/studio/editor/file-explorer.tsx  | 14 ++++----
 .../studio/editor/hooks/use-editor-dialog.ts  | 16 ++++-----
 7 files changed, 59 insertions(+), 51 deletions(-)

diff --git a/apps/web/app/api/studio/preprocess-component/route.ts b/apps/web/app/api/studio/preprocess-component/route.ts
index 08abac19..9c02b8ac 100644
--- a/apps/web/app/api/studio/preprocess-component/route.ts
+++ b/apps/web/app/api/studio/preprocess-component/route.ts
@@ -17,7 +17,7 @@ const MOCK_RESPONSE = {
     { name: "Dialog", path: "@/components/ui/dialog" },
     { name: "Input", path: "@/components/ui/input" },
   ],
-  nonShadcnComponentsImports: [
+  unresolvedDependencyImports: [
     {
       path: "@/components/ui/some-custom-component",
       names: ["SomeCustomComponent", "CustomComponentPart"],
diff --git a/apps/web/components/features/studio/editor/code-manager.tsx b/apps/web/components/features/studio/editor/code-manager.tsx
index a2e3df40..be114d20 100644
--- a/apps/web/components/features/studio/editor/code-manager.tsx
+++ b/apps/web/components/features/studio/editor/code-manager.tsx
@@ -17,7 +17,7 @@ interface CodeManagerContextType {
 
   // File state (derived from atoms)
   activeFile: string | null
-  selectFile: (path: string) => void
+  selectFile: (path: string | null) => void
 
   // File types and management
   isUnknownComponent: (path: string) => boolean
@@ -25,7 +25,7 @@ interface CodeManagerContextType {
 
   // File metadata
   allFiles: string[]
-  nonShadcnComponents: Array<{ name: string; path: string }> | undefined
+  unresolvedDependencies: Array<{ name: string; path: string }> | undefined
 }
 
 const CodeManagerContext = createContext<CodeManagerContextType | null>(null)
@@ -53,7 +53,7 @@ export function useEditorFile() {
 interface CodeManagerProviderProps {
   children: React.ReactNode
   initialComponentPath: string
-  nonShadcnComponents?: Array<{ name: string; path: string }>
+  unresolvedDependencies?: Array<{ name: string; path: string }>
   onFileContentChange?: (path: string, content: string) => void
   isUnknownComponentFn?: (path: string) => boolean
 }
@@ -61,7 +61,7 @@ interface CodeManagerProviderProps {
 export function CodeManagerProvider({
   children,
   initialComponentPath,
-  nonShadcnComponents = [],
+  unresolvedDependencies = [],
   onFileContentChange,
   isUnknownComponentFn = () => false,
 }: CodeManagerProviderProps) {
@@ -80,8 +80,11 @@ export function CodeManagerProvider({
   }, [initialComponentPath])
 
   // File selection
-  const selectFile = (path: string) => {
-    if (!path) return
+  const selectFile = (path: string | null) => {
+    if (!path) {
+      setActiveFile(null)
+      return
+    }
 
     // Only update Sandpack if it's not an unknown component
     if (!isUnknownComponentFn(path)) {
@@ -185,7 +188,9 @@ export function CodeManagerProvider({
   }
 
   const getComponentName = (path: string) => {
-    return nonShadcnComponents?.find((comp) => comp.path === path)?.name
+    return unresolvedDependencies?.find(
+      (comp: { name: string; path: string }) => comp.path === path,
+    )?.name
   }
 
   // The context now just passes through the atom state + operations
@@ -207,7 +212,7 @@ export function CodeManagerProvider({
 
     // File metadata
     allFiles: Object.keys(sandpack.files),
-    nonShadcnComponents,
+    unresolvedDependencies,
   }
 
   return (
diff --git a/apps/web/components/features/studio/editor/component-publish-dialog.tsx b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
index a6ac7107..7f6c9ead 100644
--- a/apps/web/components/features/studio/editor/component-publish-dialog.tsx
+++ b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
@@ -90,7 +90,7 @@ export function ComponentPublishDialog({
         <MemoizedEditor
           initialFiles={sandpackConfig.files}
           mainComponentPath={getComponentFilePath()}
-          nonShadcnComponents={processedData?.nonShadcnComponentsImports}
+          unresolvedDependencies={processedData?.unresolvedDependencyImports}
           onCodeChange={(path: string, content: string) => {
             if (path === getComponentFilePath()) {
               setComponentCode(content)
@@ -121,7 +121,7 @@ export function ComponentPublishDialog({
         <MemoizedSandpackContent
           activePreview={activePreview}
           onPreviewSelect={handlePreviewSelect}
-          nonShadcnComponents={processedData?.nonShadcnComponentsImports}
+          unresolvedDependencies={processedData?.unresolvedDependencyImports}
           getComponentFilePath={getComponentFilePath}
           setComponentCode={setComponentCode}
           isUnknownComponent={isUnknownComponent}
@@ -204,7 +204,7 @@ interface SandpackContentProps {
     filePath: string
     componentName?: string
   }) => void
-  nonShadcnComponents?: Array<{ name: string; path: string }>
+  unresolvedDependencies?: Array<{ name: string; path: string }>
   getComponentFilePath: () => string
   setComponentCode: (code: string) => void
   isUnknownComponent: (path: string) => boolean
@@ -216,7 +216,7 @@ interface SandpackContentProps {
 function SandpackContent({
   activePreview,
   onPreviewSelect,
-  nonShadcnComponents,
+  unresolvedDependencies,
   getComponentFilePath,
   setComponentCode,
   isUnknownComponent,
@@ -309,7 +309,7 @@ function SandpackContent({
     // Check if this is an unknown component
     if (isUnknownComponent(path)) {
       // For unknown components, get the component name
-      const componentName = nonShadcnComponents?.find(
+      const componentName = unresolvedDependencies?.find(
         (comp) => comp.path === path,
       )?.name
 
@@ -353,7 +353,7 @@ function SandpackContent({
       <div className="flex w-full h-full">
         <div className="flex border-r border-border">
           <FileExplorer
-            nonShadcnComponents={nonShadcnComponents}
+            unresolvedDependencies={unresolvedDependencies}
             onFileSelect={handleFileSelect}
             selectedFile={activePreview?.filePath || ""}
             visibleFiles={sandpack.visibleFiles || []}
diff --git a/apps/web/components/features/studio/editor/context/editor-state.tsx b/apps/web/components/features/studio/editor/context/editor-state.tsx
index 27a4863d..3c83426b 100644
--- a/apps/web/components/features/studio/editor/context/editor-state.tsx
+++ b/apps/web/components/features/studio/editor/context/editor-state.tsx
@@ -29,12 +29,12 @@ interface CodeManagerContextType {
   getFileContent: (path: string) => string | undefined
   updateFileContent: (path: string, content: string) => void
   addFile: (path: string, content: string) => void
-  renameFile: (from: string, to: string) => void
+  renameFile: (oldPath: string, newPath: string) => void
   deleteFile: (path: string) => void
 
-  // File state (derived from atoms)
+  // File state
   activeFile: string | null
-  selectFile: (path: string) => void
+  selectFile: (path: string | null) => void
 
   // File types and management
   isUnknownComponent: (path: string) => boolean
@@ -42,13 +42,13 @@ interface CodeManagerContextType {
 
   // File metadata
   allFiles: string[]
-  nonShadcnComponents: Array<{ name: string; path: string }> | undefined
+  unresolvedDependencies: Array<{ name: string; path: string }> | undefined
 
   // Loading state
   loadingComponents: string[]
   setLoadingComponents: (paths: string[]) => void
 
-  // Action required state - use functions from useActionRequired
+  // Action required state
   actionRequiredFiles: Record<string, ActionRequiredDetails>
   markFileAsRequiringAction: (
     path: string,
@@ -173,7 +173,7 @@ export function usePreviewReady() {
 interface CodeManagerProviderProps {
   children: React.ReactNode
   initialComponentPath: string
-  nonShadcnComponents?: Array<{ name: string; path: string }>
+  unresolvedDependencies?: Array<{ name: string; path: string }>
   onFileContentChange?: (path: string, content: string) => void
   isUnknownComponentFn?: (path: string) => boolean
 }
@@ -181,7 +181,7 @@ interface CodeManagerProviderProps {
 export function CodeManagerProvider({
   children,
   initialComponentPath,
-  nonShadcnComponents = [],
+  unresolvedDependencies = [],
   onFileContentChange,
   isUnknownComponentFn = () => false,
 }: CodeManagerProviderProps) {
@@ -236,8 +236,11 @@ export function CodeManagerProvider({
   }, [initialComponentPath, sandpack])
 
   // File selection
-  const selectFile = (path: string) => {
-    if (!path) return
+  const selectFile = (path: string | null) => {
+    if (!path) {
+      setActiveFile(null)
+      return
+    }
 
     console.log("[CodeManager] Selecting file:", {
       path,
@@ -377,11 +380,11 @@ export function CodeManagerProvider({
     )
   }
 
-  // Update nonShadcnComponents to use the action system
+  // Update unresolvedDependencies to use the action system
   useEffect(() => {
-    if (nonShadcnComponents && nonShadcnComponents.length > 0) {
+    if (unresolvedDependencies && unresolvedDependencies.length > 0) {
       // Register unknown components as files requiring action with missing_import reason
-      nonShadcnComponents.forEach((comp) => {
+      unresolvedDependencies.forEach((comp) => {
         markFileAsRequiringAction(comp.path, {
           reason: "missing_import",
           message: `Missing import for component: ${comp.name || "Unnamed"}`,
@@ -389,7 +392,7 @@ export function CodeManagerProvider({
         })
       })
     }
-  }, [nonShadcnComponents, markFileAsRequiringAction])
+  }, [unresolvedDependencies, markFileAsRequiringAction])
 
   const getComponentName = (path: string) => {
     // First check in action required files for missing_import reason with componentName
@@ -401,7 +404,7 @@ export function CodeManagerProvider({
       return actionDetails.componentName
     }
     // Fallback to old method
-    return nonShadcnComponents?.find((comp) => comp.path === path)?.name
+    return unresolvedDependencies?.find((comp) => comp.path === path)?.name
   }
 
   // The context now just passes through the atom state + operations
@@ -423,7 +426,7 @@ export function CodeManagerProvider({
 
     // File metadata
     allFiles: sandpack ? Object.keys(sandpack.files) : [],
-    nonShadcnComponents,
+    unresolvedDependencies,
 
     // Loading state
     loadingComponents,
diff --git a/apps/web/components/features/studio/editor/editor.tsx b/apps/web/components/features/studio/editor/editor.tsx
index e1f8b653..266c0e7b 100644
--- a/apps/web/components/features/studio/editor/editor.tsx
+++ b/apps/web/components/features/studio/editor/editor.tsx
@@ -21,7 +21,7 @@ import { cn } from "@/lib/utils"
 interface EditorProps {
   initialFiles: SandpackFiles
   mainComponentPath: string
-  nonShadcnComponents?: Array<{ name: string; path: string }>
+  unresolvedDependencies?: Array<{ name: string; path: string }>
   onCodeChange?: (path: string, content: string) => void
   isUnknownComponentFn?: (path: string) => boolean
   activePath?: string
@@ -38,9 +38,9 @@ const MemoizedEditorContent = React.memo(EditorContent)
 export function Editor({
   initialFiles,
   mainComponentPath,
-  nonShadcnComponents = [],
+  unresolvedDependencies = [],
   onCodeChange,
-  isUnknownComponentFn = () => false,
+  isUnknownComponentFn,
   activePath,
   sandpackTemplate = "react-ts",
   dependencies = {},
@@ -81,7 +81,7 @@ export function Editor({
       <CodeManagerProvider
         key={stableKey}
         initialComponentPath={activePath || mainComponentPath}
-        nonShadcnComponents={nonShadcnComponents}
+        unresolvedDependencies={unresolvedDependencies}
         onFileContentChange={onCodeChange}
         isUnknownComponentFn={isUnknownComponentFn}
       >
@@ -116,7 +116,7 @@ function EditorContent({
     selectFile,
     isUnknownComponent,
     getComponentName,
-    nonShadcnComponents,
+    unresolvedDependencies,
     loadingComponents,
     addFile,
     allFiles,
@@ -272,7 +272,7 @@ function EditorContent({
       <div className="flex w-full h-full">
         <div className="flex border-r border-border" data-file-explorer>
           <FileExplorer
-            nonShadcnComponents={nonShadcnComponents}
+            unresolvedDependencies={unresolvedDependencies}
             onFileSelect={handleFileSelect}
             selectedFile={activeFile}
             visibleFiles={visiblePaths}
diff --git a/apps/web/components/features/studio/editor/file-explorer.tsx b/apps/web/components/features/studio/editor/file-explorer.tsx
index 2f6eeb12..f1c37de1 100644
--- a/apps/web/components/features/studio/editor/file-explorer.tsx
+++ b/apps/web/components/features/studio/editor/file-explorer.tsx
@@ -28,7 +28,7 @@ interface FileTreeItem {
 }
 
 export interface FileExplorerProps {
-  nonShadcnComponents?: Array<{ name: string; path: string }> // TODO: rename to missedComponents
+  unresolvedDependencies?: Array<{ name: string; path: string }>
   onFileSelect?: (path: string) => void
   selectedFile?: string | null
   visibleFiles?: string[]
@@ -37,7 +37,7 @@ export interface FileExplorerProps {
 
 export function buildFileTree(
   files: string[],
-  nonShadcnComponents: Array<{ name: string; path: string }> = [],
+  unresolvedDependencies: Array<{ name: string; path: string }> = [],
   visibleFiles: string[] = [],
   loadingFiles: string[] = [],
   actionRequiredFiles: string[] = [],
@@ -46,7 +46,7 @@ export function buildFileTree(
   const directories = new Set<string>()
 
   const isFileVisible = (path: string) => {
-    if (nonShadcnComponents.some((comp) => comp.path === path)) {
+    if (unresolvedDependencies.some((comp) => comp.path === path)) {
       return true
     }
 
@@ -143,7 +143,7 @@ export function buildFileTree(
     addToTree(path)
   })
 
-  nonShadcnComponents.forEach((comp) => {
+  unresolvedDependencies.forEach((comp) => {
     // Extract component name from path if not provided
     const pathParts = comp.path.split("/")
     const fileName = pathParts[pathParts.length - 1]
@@ -297,7 +297,7 @@ function FileTreeNode({
  * FileExplorer component that renders a tree view of files in the SandpackProvider context
  */
 export function FileExplorer({
-  nonShadcnComponents = [],
+  unresolvedDependencies = [],
   onFileSelect,
   selectedFile,
   visibleFiles,
@@ -317,14 +317,14 @@ export function FileExplorer({
     () =>
       buildFileTree(
         sandpackVisibleFiles,
-        nonShadcnComponents,
+        unresolvedDependencies,
         visibleFiles,
         loadingFiles,
         actionRequiredFilesList,
       ),
     [
       sandpackVisibleFiles,
-      nonShadcnComponents,
+      unresolvedDependencies,
       visibleFiles,
       loadingFiles,
       actionRequiredFilesList,
diff --git a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
index be95f0f0..26fcc7f1 100644
--- a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
@@ -277,7 +277,7 @@ export function SecondDemo() {
     // Add any cached file content for unknown components
     fileContentCache.forEach((cachedContent, cachedPath) => {
       if (
-        processedData?.nonShadcnComponentsImports?.some((comp: any) => {
+        processedData?.unresolvedDependencyImports?.some((comp: any) => {
           const normalizedPath = comp.path.replace(/^@\//, "/")
           return normalizedPath === cachedPath
         })
@@ -575,12 +575,12 @@ export function SecondDemo() {
       // Check for non-shadcn components in the database
       const dbComponentSlugs: string[] = []
 
-      if (data.nonShadcnComponentsImports?.length > 0) {
+      if (data.unresolvedDependencyImports?.length > 0) {
         // Look up components in the database
         const { lookupResults, remainingComponents } =
           await lookupComponentsInDatabase(
             supabase,
-            data.nonShadcnComponentsImports,
+            data.unresolvedDependencyImports,
           )
 
         // Update the processedData with found matches
@@ -599,8 +599,8 @@ export function SecondDemo() {
           )
         }
 
-        // Update processed data with the updated non-shadcn component imports
-        data.nonShadcnComponentsImports = remainingComponents
+        // Update processed data with the updated unresolved dependencies
+        data.unresolvedDependencyImports = remainingComponents
       }
 
       // Set processed data BEFORE setting active preview
@@ -632,11 +632,11 @@ export function SecondDemo() {
           )
 
           // Map database components from earlier lookupResults
-          if (data.nonShadcnComponentsImports?.length > 0) {
+          if (data.unresolvedDependencyImports?.length > 0) {
             const { lookupResults: dbLookup } =
               await lookupComponentsInDatabase(
                 supabase,
-                data.nonShadcnComponentsImports,
+                data.unresolvedDependencyImports,
               )
 
             dbLookup.forEach((result: any) => {
@@ -738,7 +738,7 @@ export function SecondDemo() {
   const isUnknownComponent = useCallback(
     (path: string) => {
       return (
-        processedData?.nonShadcnComponentsImports?.some(
+        processedData?.unresolvedDependencyImports?.some(
           (comp: any) => comp.path === path,
         ) ?? false
       )

From 37a2366b129cbfe9dd9ec067a8523fad8450bef5 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Mon, 7 Apr 2025 19:57:38 +0300
Subject: [PATCH 048/143] refactor: addToTree

---
 .../features/studio/editor/file-explorer.tsx  | 151 ++++++++++--------
 1 file changed, 88 insertions(+), 63 deletions(-)

diff --git a/apps/web/components/features/studio/editor/file-explorer.tsx b/apps/web/components/features/studio/editor/file-explorer.tsx
index f1c37de1..fb6e591f 100644
--- a/apps/web/components/features/studio/editor/file-explorer.tsx
+++ b/apps/web/components/features/studio/editor/file-explorer.tsx
@@ -16,22 +16,46 @@ import { TextShimmer } from "@/components/ui/text-shimmer"
 import React from "react"
 import { useActionRequired } from "./context/editor-state"
 
-interface FileTreeItem {
+interface BaseFileTreeItem {
   name: string
   path: string
   type: "file" | "directory"
   children?: FileTreeItem[]
-  isUnknownComponent?: boolean
+}
+
+interface RegularFileTreeItem extends BaseFileTreeItem {
+  type: "file"
+  isLoading?: boolean
+  actionRequired?: boolean
+}
+
+interface DirectoryTreeItem extends BaseFileTreeItem {
+  type: "directory"
+  children: FileTreeItem[]
+}
+
+interface UnknownComponentFileTreeItem extends BaseFileTreeItem {
+  type: "file"
+  isUnknownComponent: true
   isLoading?: boolean
-  isStyleFile?: boolean
   actionRequired?: boolean
 }
 
-export interface FileExplorerProps {
+type FileTreeItem =
+  | RegularFileTreeItem
+  | DirectoryTreeItem
+  | UnknownComponentFileTreeItem
+
+interface FileExplorerProps {
+  /** List of components that need to be imported or created */
   unresolvedDependencies?: Array<{ name: string; path: string }>
+  /** Callback when a file is selected */
   onFileSelect?: (path: string) => void
+  /** Currently selected file path */
   selectedFile?: string | null
+  /** List of files that should be visible in the explorer */
   visibleFiles?: string[]
+  /** List of files that are currently loading */
   loadingFiles?: string[]
 }
 
@@ -46,18 +70,17 @@ export function buildFileTree(
   const directories = new Set<string>()
 
   const isFileVisible = (path: string) => {
+    // Всегда показываем нерешенные зависимости
     if (unresolvedDependencies.some((comp) => comp.path === path)) {
       return true
     }
 
+    // Всегда показываем загружающиеся файлы
     if (loadingFiles.includes(path)) {
       return true
     }
 
-    if (!visibleFiles || visibleFiles.length === 0) {
-      return true
-    }
-
+    // Показываем только файлы, которые явно указаны в visibleFiles
     return visibleFiles.some((visiblePath) => {
       if (visiblePath.endsWith("/")) {
         return path.startsWith(visiblePath)
@@ -70,9 +93,8 @@ export function buildFileTree(
     path: string,
     isUnknownComponent = false,
     componentName?: string,
-    isStyleFile = false,
   ) => {
-    if (!isUnknownComponent && !isStyleFile && !isFileVisible(path)) {
+    if (!isFileVisible(path)) {
       return
     }
 
@@ -85,78 +107,75 @@ export function buildFileTree(
       const isLast = index === parts.length - 1
       const displayName =
         isLast && isUnknownComponent ? `${componentName || part}.tsx` : part
-      const existingItem = current.find((item) => item.name === displayName)
 
       if (!isLast) {
         directories.add(currentPath)
-      }
-
-      if (existingItem) {
-        if (isLast) {
-          existingItem.type = "file"
-          existingItem.path = path
-          if (isUnknownComponent) {
-            existingItem.isUnknownComponent = true
-          }
-          if (isStyleFile) {
-            existingItem.isStyleFile = true
+        // Создаем директорию если её нет
+        const existingDir = current.find(
+          (item): item is DirectoryTreeItem =>
+            item.type === "directory" && item.name === displayName,
+        )
+        if (existingDir) {
+          current = existingDir.children
+        } else {
+          const newDir: DirectoryTreeItem = {
+            name: displayName,
+            path: currentPath,
+            type: "directory",
+            children: [],
           }
-          existingItem.isLoading = loadingFiles.includes(path)
-          existingItem.actionRequired = actionRequiredFiles.includes(path)
+          current.push(newDir)
+          current = newDir.children
         }
-        current = existingItem.children || []
       } else {
-        const newItem: FileTreeItem = {
-          name: displayName,
-          path: isLast ? path : currentPath,
-          type: isLast ? "file" : "directory",
-          children: isLast ? undefined : [],
-          isUnknownComponent: isLast ? isUnknownComponent : undefined,
-          isStyleFile: isLast ? isStyleFile : undefined,
-          isLoading: isLast ? loadingFiles.includes(path) : undefined,
-          actionRequired: isLast
-            ? actionRequiredFiles.includes(path)
-            : undefined,
-        }
-
-        const insertIndex = current.findIndex((item) => {
-          if (item.type === newItem.type) {
-            return item.name.localeCompare(newItem.name) > 0
-          }
-          return item.type === "file"
-        })
-
-        if (insertIndex === -1) {
-          current.push(newItem)
-        } else {
-          current.splice(insertIndex, 0, newItem)
-        }
-
-        if (!isLast) {
-          current = newItem.children!
-        }
+        // Создаем файл
+        const fileItem = isUnknownComponent
+          ? {
+              name: displayName,
+              path,
+              type: "file" as const,
+              isUnknownComponent: true,
+              isLoading: loadingFiles.includes(path),
+              actionRequired: actionRequiredFiles.includes(path),
+            }
+          : {
+              name: displayName,
+              path,
+              type: "file" as const,
+              isLoading: loadingFiles.includes(path),
+              actionRequired: actionRequiredFiles.includes(path),
+            }
+        current.push(fileItem)
       }
     })
   }
 
+  // Добавляем все файлы в дерево
   files.forEach((path) => {
     addToTree(path)
   })
 
+  // Добавляем неразрешенные зависимости
   unresolvedDependencies.forEach((comp) => {
-    // Extract component name from path if not provided
     const pathParts = comp.path.split("/")
     const fileName = pathParts[pathParts.length - 1]
     addToTree(comp.path, true, comp.name || fileName)
   })
 
+  // Добавляем загружающиеся файлы
   loadingFiles.forEach((path) => {
-    const pathParts = path.split("/")
-    const fileName = pathParts[pathParts.length - 1] || ""
-    const componentName = fileName.replace(".tsx", "")
-    addToTree(path, false, componentName)
+    if (
+      !files.includes(path) &&
+      !unresolvedDependencies.some((d) => d.path === path)
+    ) {
+      const pathParts = path.split("/")
+      const fileName = pathParts[pathParts.length - 1] || ""
+      const componentName = fileName.replace(".tsx", "")
+      addToTree(path, false, componentName)
+    }
   })
 
+  // Сортируем дерево рекурсивно
   const sortTreeRecursively = (items: FileTreeItem[]) => {
     items.sort((a, b) => {
       if (a.type !== b.type) {
@@ -166,7 +185,7 @@ export function buildFileTree(
     })
 
     items.forEach((item) => {
-      if (item.children) {
+      if (item.type === "directory") {
         sortTreeRecursively(item.children)
       }
     })
@@ -177,6 +196,12 @@ export function buildFileTree(
   return { tree: root, directories }
 }
 
+function isFileItem(
+  item: FileTreeItem,
+): item is RegularFileTreeItem | UnknownComponentFileTreeItem {
+  return item.type === "file"
+}
+
 function FileTreeNode({
   item,
   onFileClick,
@@ -248,7 +273,7 @@ function FileTreeNode({
           ) : (
             <Folder className="h-4 w-4 text-blue-500" />
           )
-        ) : item.isLoading || isLoading(item.path) ? (
+        ) : isFileItem(item) && (item.isLoading || isLoading(item.path)) ? (
           <div className="h-4 w-4 flex items-center justify-center">
             <Spinner size={14} />
           </div>
@@ -263,7 +288,7 @@ function FileTreeNode({
         ) : (
           <File className="h-4 w-4 text-gray-500" />
         )}
-        {item.isLoading || isLoading(item.path) ? (
+        {isFileItem(item) && (item.isLoading || isLoading(item.path)) ? (
           <TextShimmer className="truncate text-sm">{item.name}</TextShimmer>
         ) : (
           <span className={cn("truncate", showWarning && "text-yellow-600")}>
@@ -272,7 +297,7 @@ function FileTreeNode({
         )}
       </button>
 
-      {item.type === "directory" && isExpanded && item.children && (
+      {item.type === "directory" && isExpanded && (
         <div>
           {item.children.map((child, index) => (
             <FileTreeNode

From d2dd677ddb16da40cb10b9eba68d6ee85c398bee Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Mon, 7 Apr 2025 20:10:26 +0300
Subject: [PATCH 049/143] refactor: FileTreeNode

---
 .../studio/editor/context/editor-state.tsx    |  79 ++++++++++----
 .../features/studio/editor/file-explorer.tsx  |  70 +++++++-----
 .../studio/editor/requirements-panel.tsx      | 100 ++++++++++--------
 apps/web/lib/utils.ts                         |  14 +++
 4 files changed, 170 insertions(+), 93 deletions(-)

diff --git a/apps/web/components/features/studio/editor/context/editor-state.tsx b/apps/web/components/features/studio/editor/context/editor-state.tsx
index 3c83426b..aacaa57d 100644
--- a/apps/web/components/features/studio/editor/context/editor-state.tsx
+++ b/apps/web/components/features/studio/editor/context/editor-state.tsx
@@ -1,6 +1,7 @@
 import React, { createContext, useContext, useEffect, useCallback } from "react"
 import { atom, useAtom } from "jotai"
 import { useSandpack } from "@codesandbox/sandpack-react"
+import { normalizePath } from "@/lib/utils"
 
 // Define atoms for state management (single source of truth)
 export const activeFileAtom = atom<string | null>(null)
@@ -8,21 +9,44 @@ export const userModifiedFilesAtom = atom<Record<string, boolean>>({})
 export const loadingComponentsAtom = atom<string[]>([])
 export const previewReadyAtom = atom<boolean>(false)
 
-// New atom for files requiring action
-export interface ActionRequiredDetails {
-  reason: "styles" | "missing_import" | "other"
+// Improved typing for action required system
+export type ActionRequiredReason = "styles" | "missing_import" | "other"
+
+export interface BaseActionRequiredDetails {
+  reason: ActionRequiredReason
   message?: string
+}
+
+export interface StylesActionDetails extends BaseActionRequiredDetails {
+  reason: "styles"
   tailwindExtensions?: Record<string, any>
   cssVariables?: Array<any>
   keyframes?: Array<any>
   utilities?: Array<any>
+}
+
+export interface MissingImportActionDetails extends BaseActionRequiredDetails {
+  reason: "missing_import"
   componentName?: string
 }
 
+export interface OtherActionDetails extends BaseActionRequiredDetails {
+  reason: "other"
+}
+
+export type ActionRequiredDetails =
+  | StylesActionDetails
+  | MissingImportActionDetails
+  | OtherActionDetails
+
+// State atom with path normalization
 export const actionRequiredFilesAtom = atom<
   Record<string, ActionRequiredDetails>
 >({})
 
+// New atom to track paths that need action (for better performance)
+export const actionRequiredPathsAtom = atom<string[]>([])
+
 // Define the types for our context
 interface CodeManagerContextType {
   // File operations
@@ -50,6 +74,7 @@ interface CodeManagerContextType {
 
   // Action required state
   actionRequiredFiles: Record<string, ActionRequiredDetails>
+  actionRequiredPaths: string[]
   markFileAsRequiringAction: (
     path: string,
     details: ActionRequiredDetails,
@@ -86,64 +111,80 @@ export function useEditorFile() {
   }
 }
 
-// New hook to access action required state directly
+// Hook with improved logic
 export function useActionRequired() {
   const [actionRequiredFiles, setActionRequiredFiles] = useAtom(
     actionRequiredFilesAtom,
   )
+  const [actionRequiredPaths, setActionRequiredPaths] = useAtom(
+    actionRequiredPathsAtom,
+  )
 
   const markFileAsRequiringAction = useCallback(
     (path: string, details: ActionRequiredDetails) => {
+      const normalizedPath = normalizePath(path)
+
       setActionRequiredFiles((prev) => {
-        // Skip update if nothing is changing to prevent loops
+        // Skip update if nothing is changing
         if (
-          prev[path] &&
-          JSON.stringify(prev[path]) === JSON.stringify(details)
+          prev[normalizedPath] &&
+          JSON.stringify(prev[normalizedPath]) === JSON.stringify(details)
         ) {
           return prev
         }
 
-        return {
-          ...prev,
-          [path]: details,
+        const next = { ...prev, [normalizedPath]: details }
+        return next
+      })
+
+      setActionRequiredPaths((prev) => {
+        if (!prev.includes(normalizedPath)) {
+          return [...prev, normalizedPath]
         }
+        return prev
       })
     },
-    [setActionRequiredFiles],
+    [setActionRequiredFiles, setActionRequiredPaths],
   )
 
   const markFileAsResolved = useCallback(
     (path: string) => {
+      const normalizedPath = normalizePath(path)
+
       setActionRequiredFiles((prev) => {
-        // Skip update if file isn't in the list to prevent unnecessary renders
-        if (!prev[path]) {
+        if (!prev[normalizedPath]) {
           return prev
         }
 
         const next = { ...prev }
-        delete next[path]
+        delete next[normalizedPath]
         return next
       })
+
+      setActionRequiredPaths((prev) => prev.filter((p) => p !== normalizedPath))
     },
-    [setActionRequiredFiles],
+    [setActionRequiredFiles, setActionRequiredPaths],
   )
 
   const isActionRequired = useCallback(
     (path: string) => {
-      return !!actionRequiredFiles[path]
+      const normalizedPath = normalizePath(path)
+      return actionRequiredPaths.includes(normalizedPath)
     },
-    [actionRequiredFiles],
+    [actionRequiredPaths],
   )
 
   const getActionDetails = useCallback(
     (path: string) => {
-      return actionRequiredFiles[path]
+      const normalizedPath = normalizePath(path)
+      return actionRequiredFiles[normalizedPath]
     },
     [actionRequiredFiles],
   )
 
   return {
     actionRequiredFiles,
+    actionRequiredPaths,
     markFileAsRequiringAction,
     markFileAsResolved,
     isActionRequired,
@@ -204,6 +245,7 @@ export function CodeManagerProvider({
   // Get action required functions from the hook instead of redefining them
   const {
     actionRequiredFiles,
+    actionRequiredPaths,
     markFileAsRequiringAction,
     markFileAsResolved,
     isActionRequired,
@@ -434,6 +476,7 @@ export function CodeManagerProvider({
 
     // Action required state - using functions from the hook
     actionRequiredFiles,
+    actionRequiredPaths,
     markFileAsRequiringAction,
     markFileAsResolved,
     isActionRequired,
diff --git a/apps/web/components/features/studio/editor/file-explorer.tsx b/apps/web/components/features/studio/editor/file-explorer.tsx
index fb6e591f..cb67ac43 100644
--- a/apps/web/components/features/studio/editor/file-explorer.tsx
+++ b/apps/web/components/features/studio/editor/file-explorer.tsx
@@ -1,5 +1,6 @@
 import { useSandpack } from "@codesandbox/sandpack-react"
 import { cn } from "@/lib/utils"
+import { arePathsEqual, normalizePath } from "@/lib/utils"
 import {
   ChevronRight,
   ChevronDown,
@@ -224,21 +225,54 @@ function FileTreeNode({
   const isExpanded = expandedDirs.has(item.path)
   const { getActionDetails } = useActionRequired()
 
-  // Normalize both paths for comparison to ensure proper highlighting
-  const normalizedItemPath = item.path.replace(/^@\//, "/")
-  const normalizedActiveFile = activeFile?.replace(/^@\//, "/")
-  const isActive = normalizedActiveFile === normalizedItemPath
+  // Use utility functions for path comparison
+  const isActive = activeFile && arePathsEqual(item.path, activeFile)
 
   const isShadcnFile = item.type === "file" && isShadcnComponentPath(item.path)
   const isTailwindConfig = item.path === "/tailwind.config.js"
   const isGlobalsCss = item.path === "/globals.css"
 
-  // Check if file truly needs action - only for styles or other issues, not for missing_import
+  // Get action details and determine warning state
   const actionDetails = item.path && getActionDetails(item.path)
-
-  // Show warning for all files that need action, regardless of reason
   const showWarning = !!actionDetails
 
+  // Determine file icon and state
+  const getFileIcon = () => {
+    if (item.type === "directory") {
+      return isExpanded ? (
+        <FolderOpen className="h-4 w-4 text-blue-500" />
+      ) : (
+        <Folder className="h-4 w-4 text-blue-500" />
+      )
+    }
+
+    if (isFileItem(item) && (item.isLoading || isLoading(item.path))) {
+      return (
+        <div className="h-4 w-4 flex items-center justify-center">
+          <Spinner size={14} />
+        </div>
+      )
+    }
+
+    if (showWarning) {
+      return <FileWarning className="h-4 w-4 text-yellow-500" />
+    }
+
+    if (isShadcnFile) {
+      return <ShadcnFile className="h-4 w-4 text-primary" />
+    }
+
+    if (isTailwindConfig) {
+      return <File className="h-4 w-4 text-emerald-500" />
+    }
+
+    if (isGlobalsCss) {
+      return <File className="h-4 w-4 text-blue-500" />
+    }
+
+    return <File className="h-4 w-4 text-gray-500" />
+  }
+
   const handleClick = () => {
     if (item.type === "directory") {
       onToggleDir(item.path)
@@ -267,27 +301,7 @@ function FileTreeNode({
             )}
           </div>
         )}
-        {item.type === "directory" ? (
-          isExpanded ? (
-            <FolderOpen className="h-4 w-4 text-blue-500" />
-          ) : (
-            <Folder className="h-4 w-4 text-blue-500" />
-          )
-        ) : isFileItem(item) && (item.isLoading || isLoading(item.path)) ? (
-          <div className="h-4 w-4 flex items-center justify-center">
-            <Spinner size={14} />
-          </div>
-        ) : showWarning ? (
-          <FileWarning className="h-4 w-4 text-yellow-500" />
-        ) : isShadcnFile ? (
-          <ShadcnFile className="h-4 w-4 text-primary" />
-        ) : isTailwindConfig ? (
-          <File className="h-4 w-4 text-emerald-500" />
-        ) : isGlobalsCss ? (
-          <File className="h-4 w-4 text-blue-500" />
-        ) : (
-          <File className="h-4 w-4 text-gray-500" />
-        )}
+        {getFileIcon()}
         {isFileItem(item) && (item.isLoading || isLoading(item.path)) ? (
           <TextShimmer className="truncate text-sm">{item.name}</TextShimmer>
         ) : (
diff --git a/apps/web/components/features/studio/editor/requirements-panel.tsx b/apps/web/components/features/studio/editor/requirements-panel.tsx
index 1b937a72..561917f7 100644
--- a/apps/web/components/features/studio/editor/requirements-panel.tsx
+++ b/apps/web/components/features/studio/editor/requirements-panel.tsx
@@ -1,13 +1,22 @@
 import { AlertCircle } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import { useActionRequired, useCodeManager } from "./context/editor-state"
+import {
+  useActionRequired,
+  useCodeManager,
+  StylesActionDetails,
+} from "./context/editor-state"
 
 interface RequirementsPanelProps {
   className?: string
   activeFile?: string
 }
 
+// Type guard to check if action details are style-related
+function isStylesAction(details: any): details is StylesActionDetails {
+  return details?.reason === "styles"
+}
+
 export function RequirementsPanel({
   className,
   activeFile,
@@ -48,11 +57,12 @@ export function RequirementsPanel({
 
   // Prepare message content based on additionalStyles
   const getMessageContent = () => {
-    if (isTailwindConfig) {
-      const extensionDetails: string[] = []
-      const tailwindExtensions = actionDetails?.tailwindExtensions
+    // Only process style-related details for Tailwind and CSS files
+    if ((isTailwindConfig || isGlobalCss) && isStylesAction(actionDetails)) {
+      if (isTailwindConfig) {
+        const extensionDetails: string[] = []
+        const tailwindExtensions = actionDetails.tailwindExtensions || {}
 
-      if (tailwindExtensions) {
         const extensionTypes = [
           "boxShadow",
           "colors",
@@ -69,53 +79,49 @@ export function RequirementsPanel({
             extensionDetails.push(`${extType}: ${values}`)
           }
         })
-      }
 
-      if (extensionDetails.length > 0) {
-        return `Add Tailwind extensions: ${extensionDetails.join("; ")}`
-      }
-
-      return "Tailwind configuration updates required"
-    }
+        if (extensionDetails.length > 0) {
+          return `Add Tailwind extensions: ${extensionDetails.join("; ")}`
+        }
 
-    if (isGlobalCss) {
-      const parts = []
-
-      // Show specific CSS variable names
-      if (
-        actionDetails?.cssVariables &&
-        actionDetails.cssVariables.length > 0
-      ) {
-        const varNames = actionDetails.cssVariables
-          .map((v: any) => v.name)
-          .join(", ")
-        parts.push(`CSS variables: ${varNames}`)
+        return "Tailwind configuration updates required"
       }
 
-      // Show specific keyframe names
-      if (actionDetails?.keyframes && actionDetails.keyframes.length > 0) {
-        const keyframeNames = actionDetails.keyframes
-          .map((k: any) => k.name)
-          .join(", ")
-        parts.push(`keyframes: ${keyframeNames}`)
+      if (isGlobalCss) {
+        const parts = []
+
+        // Show specific CSS variable names
+        const cssVariables = actionDetails.cssVariables || []
+        if (cssVariables.length > 0) {
+          const varNames = cssVariables.map((v) => v.name).join(", ")
+          parts.push(`CSS variables: ${varNames}`)
+        }
+
+        // Show specific keyframe names
+        const keyframes = actionDetails.keyframes || []
+        if (keyframes.length > 0) {
+          const keyframeNames = keyframes.map((k) => k.name).join(", ")
+          parts.push(`keyframes: ${keyframeNames}`)
+        }
+
+        // Show specific utility class names
+        const utilities = actionDetails.utilities || []
+        if (utilities.length > 0) {
+          const classNames = utilities
+            .map((u) => {
+              const className = u.className || u.name
+              return className?.startsWith(".") ? className : `.${className}`
+            })
+            .join(", ")
+          parts.push(`utilities: ${classNames}`)
+        }
+
+        if (parts.length > 0) {
+          return `Add ${parts.join(", ")}`
+        }
+
+        return "CSS updates required"
       }
-
-      // Show specific utility class names
-      if (actionDetails?.utilities && actionDetails.utilities.length > 0) {
-        const classNames = actionDetails.utilities
-          .map((u: any) => {
-            const className = u.className || u.name
-            return className?.startsWith(".") ? className : `.${className}`
-          })
-          .join(", ")
-        parts.push(`utilities: ${classNames}`)
-      }
-
-      if (parts.length > 0) {
-        return `Add ${parts.join(", ")}`
-      }
-
-      return "CSS updates required"
     }
 
     return actionDetails.message || "This file requires updates"
diff --git a/apps/web/lib/utils.ts b/apps/web/lib/utils.ts
index 3354b7c6..ed0cca6e 100644
--- a/apps/web/lib/utils.ts
+++ b/apps/web/lib/utils.ts
@@ -61,3 +61,17 @@ export function formatPrice(price: number) {
     maximumFractionDigits: 2,
   }).format(price)
 }
+
+/**
+ * Normalize file path by removing @/ prefix and ensuring consistent format
+ */
+export function normalizePath(path: string): string {
+  return path.replace(/^@\//, "/")
+}
+
+/**
+ * Compare two paths after normalization
+ */
+export function arePathsEqual(path1: string, path2: string): boolean {
+  return normalizePath(path1) === normalizePath(path2)
+}

From 1a89369e95c695c3aa567da6af091bd78d5fae1a Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Mon, 7 Apr 2025 20:12:54 +0300
Subject: [PATCH 050/143] =?UTF-8?q?refactor:=20missing=5Fimport=20?=
 =?UTF-8?q?=E2=86=92=20unresolved=5Fdependencies?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/component-publish-dialog.tsx       |  2 +-
 .../studio/editor/context/editor-state.tsx    | 24 +++++++++++--------
 .../studio/editor/editor-code-panel.tsx       |  7 ++++--
 .../features/studio/editor/editor.tsx         |  4 ++--
 4 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/apps/web/components/features/studio/editor/component-publish-dialog.tsx b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
index 7f6c9ead..1bd1f1d2 100644
--- a/apps/web/components/features/studio/editor/component-publish-dialog.tsx
+++ b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
@@ -255,7 +255,7 @@ function SandpackContent({
       } else {
         // For other files (likely missing imports)
         markFileAsRequiringAction(file, {
-          reason: "missing_import",
+          reason: "unresolved_dependencies",
           message: "This component requires additional imports",
         })
       }
diff --git a/apps/web/components/features/studio/editor/context/editor-state.tsx b/apps/web/components/features/studio/editor/context/editor-state.tsx
index aacaa57d..fe0a51e5 100644
--- a/apps/web/components/features/studio/editor/context/editor-state.tsx
+++ b/apps/web/components/features/studio/editor/context/editor-state.tsx
@@ -10,7 +10,10 @@ export const loadingComponentsAtom = atom<string[]>([])
 export const previewReadyAtom = atom<boolean>(false)
 
 // Improved typing for action required system
-export type ActionRequiredReason = "styles" | "missing_import" | "other"
+export type ActionRequiredReason =
+  | "styles"
+  | "unresolved_dependencies"
+  | "other"
 
 export interface BaseActionRequiredDetails {
   reason: ActionRequiredReason
@@ -25,8 +28,9 @@ export interface StylesActionDetails extends BaseActionRequiredDetails {
   utilities?: Array<any>
 }
 
-export interface MissingImportActionDetails extends BaseActionRequiredDetails {
-  reason: "missing_import"
+export interface UnresolvedDependenciesActionDetails
+  extends BaseActionRequiredDetails {
+  reason: "unresolved_dependencies"
   componentName?: string
 }
 
@@ -36,7 +40,7 @@ export interface OtherActionDetails extends BaseActionRequiredDetails {
 
 export type ActionRequiredDetails =
   | StylesActionDetails
-  | MissingImportActionDetails
+  | UnresolvedDependenciesActionDetails
   | OtherActionDetails
 
 // State atom with path normalization
@@ -414,10 +418,10 @@ export function CodeManagerProvider({
 
   // Component utilities
   const isUnknownComponent = (path: string) => {
-    // Check if it's marked as a file with missing_import
+    // Check if it's marked as a file with unresolved_dependencies
     const details = getActionDetails(path)
     return (
-      details?.reason === "missing_import" &&
+      details?.reason === "unresolved_dependencies" &&
       details.componentName !== undefined
     )
   }
@@ -425,10 +429,10 @@ export function CodeManagerProvider({
   // Update unresolvedDependencies to use the action system
   useEffect(() => {
     if (unresolvedDependencies && unresolvedDependencies.length > 0) {
-      // Register unknown components as files requiring action with missing_import reason
+      // Register unknown components as files requiring action with unresolved_dependencies reason
       unresolvedDependencies.forEach((comp) => {
         markFileAsRequiringAction(comp.path, {
-          reason: "missing_import",
+          reason: "unresolved_dependencies",
           message: `Missing import for component: ${comp.name || "Unnamed"}`,
           componentName: comp.name,
         })
@@ -437,10 +441,10 @@ export function CodeManagerProvider({
   }, [unresolvedDependencies, markFileAsRequiringAction])
 
   const getComponentName = (path: string) => {
-    // First check in action required files for missing_import reason with componentName
+    // First check in action required files for unresolved_dependencies reason with componentName
     const actionDetails = getActionDetails(path)
     if (
-      actionDetails?.reason === "missing_import" &&
+      actionDetails?.reason === "unresolved_dependencies" &&
       actionDetails.componentName
     ) {
       return actionDetails.componentName
diff --git a/apps/web/components/features/studio/editor/editor-code-panel.tsx b/apps/web/components/features/studio/editor/editor-code-panel.tsx
index cb60d9f2..e3043e78 100644
--- a/apps/web/components/features/studio/editor/editor-code-panel.tsx
+++ b/apps/web/components/features/studio/editor/editor-code-panel.tsx
@@ -163,12 +163,15 @@ export const EditorCodePanel = React.memo(function EditorCodePanel({
       // Check both path formats (with and without @/ prefix)
       const pathWithPrefix = `@${normalizedPath}`
 
-      // Automatically resolve any "missing_import" action required status
+      // Automatically resolve any "unresolved_dependencies" action required status
       // when file content changes, regardless of content - check both path formats
       const checkAndResolveActionRequired = (path: string) => {
         if (isActionRequired(path)) {
           const actionDetails = getActionDetails(path)
-          if (actionDetails && actionDetails.reason === "missing_import") {
+          if (
+            actionDetails &&
+            actionDetails.reason === "unresolved_dependencies"
+          ) {
             markFileAsResolved(path)
           }
         }
diff --git a/apps/web/components/features/studio/editor/editor.tsx b/apps/web/components/features/studio/editor/editor.tsx
index 266c0e7b..47efbcab 100644
--- a/apps/web/components/features/studio/editor/editor.tsx
+++ b/apps/web/components/features/studio/editor/editor.tsx
@@ -157,7 +157,7 @@ function EditorContent({
       } else {
         // For other files (likely missing imports)
         markFileAsRequiringAction(file, {
-          reason: "missing_import",
+          reason: "unresolved_dependencies",
           message: "This component requires additional imports",
         })
       }
@@ -234,7 +234,7 @@ function EditorContent({
 
         // Mark it as requiring action
         markFileAsRequiringAction(normalizedPath, {
-          reason: "missing_import",
+          reason: "unresolved_dependencies",
           message: `This component needs to be implemented`,
         })
       } else {

From e9201f1213766ceffd0f1909f0657693640e1051 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Mon, 7 Apr 2025 20:30:20 +0300
Subject: [PATCH 051/143] =?UTF-8?q?refactor:=20isUnknownComponent=20?=
 =?UTF-8?q?=E2=86=92=20isUnresolvedDependency?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../features/studio/editor/code-manager.tsx      | 16 ++++++++--------
 .../studio/editor/component-publish-dialog.tsx   | 12 ++++++------
 .../studio/editor/context/editor-state.tsx       |  6 +++---
 .../features/studio/editor/editor-code-panel.tsx | 12 ++++++------
 .../components/features/studio/editor/editor.tsx | 16 ++++++++--------
 .../features/studio/editor/file-explorer.tsx     | 10 +++++-----
 .../studio/editor/hooks/use-editor-dialog.ts     |  6 +++---
 7 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/apps/web/components/features/studio/editor/code-manager.tsx b/apps/web/components/features/studio/editor/code-manager.tsx
index be114d20..72afc2f7 100644
--- a/apps/web/components/features/studio/editor/code-manager.tsx
+++ b/apps/web/components/features/studio/editor/code-manager.tsx
@@ -15,12 +15,12 @@ interface CodeManagerContextType {
   renameFile: (from: string, to: string) => void
   deleteFile: (path: string) => void
 
-  // File state (derived from atoms)
+  // File state
   activeFile: string | null
   selectFile: (path: string | null) => void
 
   // File types and management
-  isUnknownComponent: (path: string) => boolean
+  isUnresolvedDependency: (path: string) => boolean
   getComponentName: (path: string) => string | undefined
 
   // File metadata
@@ -55,7 +55,7 @@ interface CodeManagerProviderProps {
   initialComponentPath: string
   unresolvedDependencies?: Array<{ name: string; path: string }>
   onFileContentChange?: (path: string, content: string) => void
-  isUnknownComponentFn?: (path: string) => boolean
+  isUnresolvedDependencyFn?: (path: string) => boolean
 }
 
 export function CodeManagerProvider({
@@ -63,7 +63,7 @@ export function CodeManagerProvider({
   initialComponentPath,
   unresolvedDependencies = [],
   onFileContentChange,
-  isUnknownComponentFn = () => false,
+  isUnresolvedDependencyFn = () => false,
 }: CodeManagerProviderProps) {
   // Use atoms directly in the context
   const { sandpack } = useSandpack()
@@ -87,7 +87,7 @@ export function CodeManagerProvider({
     }
 
     // Only update Sandpack if it's not an unknown component
-    if (!isUnknownComponentFn(path)) {
+    if (!isUnresolvedDependencyFn(path)) {
       sandpack.setActiveFile(path)
     }
 
@@ -183,8 +183,8 @@ export function CodeManagerProvider({
   }
 
   // Component utilities
-  const isUnknownComponent = (path: string) => {
-    return isUnknownComponentFn(path)
+  const isUnresolvedDependency = (path: string) => {
+    return isUnresolvedDependencyFn(path)
   }
 
   const getComponentName = (path: string) => {
@@ -207,7 +207,7 @@ export function CodeManagerProvider({
     selectFile, // Updates atom
 
     // File types and management
-    isUnknownComponent,
+    isUnresolvedDependency,
     getComponentName,
 
     // File metadata
diff --git a/apps/web/components/features/studio/editor/component-publish-dialog.tsx b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
index 1bd1f1d2..ff4086fc 100644
--- a/apps/web/components/features/studio/editor/component-publish-dialog.tsx
+++ b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
@@ -73,7 +73,7 @@ export function ComponentPublishDialog({
     setComponentCode,
     sandpackConfig,
     getComponentFilePath,
-    isUnknownComponent,
+    isUnresolvedDependency,
   } = usePublishDialog({ userId })
 
   // Create a stable reference to dialogContent
@@ -96,7 +96,7 @@ export function ComponentPublishDialog({
               setComponentCode(content)
             }
           }}
-          isUnknownComponentFn={isUnknownComponent}
+          isUnresolvedDependencyFn={isUnresolvedDependency}
           activePath={activePreview?.filePath}
           sandpackTemplate={sandpackConfig.template}
           dependencies={sandpackConfig.customSetup?.dependencies}
@@ -124,7 +124,7 @@ export function ComponentPublishDialog({
           unresolvedDependencies={processedData?.unresolvedDependencyImports}
           getComponentFilePath={getComponentFilePath}
           setComponentCode={setComponentCode}
-          isUnknownComponent={isUnknownComponent}
+          isUnresolvedDependency={isUnresolvedDependency}
           loadingFiles={loadingShadcnComponents}
           actionRequiredFiles={actionRequiredFiles}
           processedData={processedData}
@@ -207,7 +207,7 @@ interface SandpackContentProps {
   unresolvedDependencies?: Array<{ name: string; path: string }>
   getComponentFilePath: () => string
   setComponentCode: (code: string) => void
-  isUnknownComponent: (path: string) => boolean
+  isUnresolvedDependency: (path: string) => boolean
   loadingFiles?: string[]
   actionRequiredFiles?: string[]
   processedData?: any
@@ -219,7 +219,7 @@ function SandpackContent({
   unresolvedDependencies,
   getComponentFilePath,
   setComponentCode,
-  isUnknownComponent,
+  isUnresolvedDependency,
   loadingFiles = [],
   actionRequiredFiles = [],
   processedData,
@@ -307,7 +307,7 @@ function SandpackContent({
     }
 
     // Check if this is an unknown component
-    if (isUnknownComponent(path)) {
+    if (isUnresolvedDependency(path)) {
       // For unknown components, get the component name
       const componentName = unresolvedDependencies?.find(
         (comp) => comp.path === path,
diff --git a/apps/web/components/features/studio/editor/context/editor-state.tsx b/apps/web/components/features/studio/editor/context/editor-state.tsx
index fe0a51e5..aa4ffae2 100644
--- a/apps/web/components/features/studio/editor/context/editor-state.tsx
+++ b/apps/web/components/features/studio/editor/context/editor-state.tsx
@@ -65,7 +65,7 @@ interface CodeManagerContextType {
   selectFile: (path: string | null) => void
 
   // File types and management
-  isUnknownComponent: (path: string) => boolean
+  isUnresolvedDependency: (path: string) => boolean
   getComponentName: (path: string) => string | undefined
 
   // File metadata
@@ -417,7 +417,7 @@ export function CodeManagerProvider({
   }
 
   // Component utilities
-  const isUnknownComponent = (path: string) => {
+  const isUnresolvedDependency = (path: string) => {
     // Check if it's marked as a file with unresolved_dependencies
     const details = getActionDetails(path)
     return (
@@ -467,7 +467,7 @@ export function CodeManagerProvider({
     selectFile, // Updates atom
 
     // File types and management
-    isUnknownComponent,
+    isUnresolvedDependency,
     getComponentName,
 
     // File metadata
diff --git a/apps/web/components/features/studio/editor/editor-code-panel.tsx b/apps/web/components/features/studio/editor/editor-code-panel.tsx
index e3043e78..81a3be3a 100644
--- a/apps/web/components/features/studio/editor/editor-code-panel.tsx
+++ b/apps/web/components/features/studio/editor/editor-code-panel.tsx
@@ -54,8 +54,8 @@ export const EditorCodePanel = React.memo(function EditorCodePanel({
   )
 
   // Check if this is an unknown component that needs action - memoize this value
-  const isUnknownComponent = useMemo(
-    () => codeManager?.isUnknownComponent?.(componentPath) || false,
+  const isUnresolvedDependency = useMemo(
+    () => codeManager?.isUnresolvedDependency?.(componentPath) || false,
     [codeManager, componentPath],
   )
 
@@ -74,7 +74,7 @@ export const EditorCodePanel = React.memo(function EditorCodePanel({
       normalizedPath,
       fileExists: !!sandpack.files[normalizedPath],
       hasCachedContent: globalFileContentCache.has(normalizedPath),
-      isUnknownComponent,
+      isUnresolvedDependency,
       activeFile: sandpack.activeFile,
     })
 
@@ -125,7 +125,7 @@ export const EditorCodePanel = React.memo(function EditorCodePanel({
         console.error("[EditorCodePanel] Failed to create file:", error)
       }
     }
-  }, [normalizedPath, sandpack, codeManager, isUnknownComponent])
+  }, [normalizedPath, sandpack, codeManager, isUnresolvedDependency])
 
   useEffect(() => {
     // If the file doesn't exist and we have a valid path, create it or restore it
@@ -144,7 +144,7 @@ export const EditorCodePanel = React.memo(function EditorCodePanel({
     normalizedPath,
     sandpack.activeFile,
     sandpack.files,
-    isUnknownComponent,
+    isUnresolvedDependency,
     handleFileMissing,
   ])
 
@@ -206,7 +206,7 @@ export const EditorCodePanel = React.memo(function EditorCodePanel({
     normalizedPath,
     codeManager,
     markFileAsResolved,
-    isUnknownComponent,
+    isUnresolvedDependency,
     isActionRequired,
     getActionDetails,
   ])
diff --git a/apps/web/components/features/studio/editor/editor.tsx b/apps/web/components/features/studio/editor/editor.tsx
index 47efbcab..e5a12237 100644
--- a/apps/web/components/features/studio/editor/editor.tsx
+++ b/apps/web/components/features/studio/editor/editor.tsx
@@ -23,7 +23,7 @@ interface EditorProps {
   mainComponentPath: string
   unresolvedDependencies?: Array<{ name: string; path: string }>
   onCodeChange?: (path: string, content: string) => void
-  isUnknownComponentFn?: (path: string) => boolean
+  isUnresolvedDependencyFn?: (path: string) => boolean
   activePath?: string
   sandpackTemplate?: "react" | "react-ts" | "vanilla" | "vanilla-ts"
   dependencies?: Record<string, string>
@@ -40,7 +40,7 @@ export function Editor({
   mainComponentPath,
   unresolvedDependencies = [],
   onCodeChange,
-  isUnknownComponentFn,
+  isUnresolvedDependencyFn,
   activePath,
   sandpackTemplate = "react-ts",
   dependencies = {},
@@ -83,7 +83,7 @@ export function Editor({
         initialComponentPath={activePath || mainComponentPath}
         unresolvedDependencies={unresolvedDependencies}
         onFileContentChange={onCodeChange}
-        isUnknownComponentFn={isUnknownComponentFn}
+        isUnknownComponentFn={isUnresolvedDependencyFn}
       >
         <div className="flex flex-col h-full">
           <MemoizedEditorContent
@@ -114,7 +114,7 @@ function EditorContent({
   const {
     activeFile,
     selectFile,
-    isUnknownComponent,
+    isUnresolvedDependency,
     getComponentName,
     unresolvedDependencies,
     loadingComponents,
@@ -169,7 +169,7 @@ function EditorContent({
     if (!activeFile) return
 
     // Check if this is an unknown component with required action
-    if (isUnknownComponent(activeFile)) {
+    if (isUnresolvedDependency(activeFile)) {
       const actionDetails = getActionDetails(activeFile)
 
       if (actionDetails) {
@@ -186,7 +186,7 @@ function EditorContent({
     }
   }, [
     activeFile,
-    isUnknownComponent,
+    isUnresolvedDependency,
     getActionDetails,
     getFileContent,
     markFileAsResolved,
@@ -196,7 +196,7 @@ function EditorContent({
   const handleFileSelect = (path: string) => {
     console.log("[Editor] File selected:", {
       path,
-      isUnknown: isUnknownComponent(path),
+      isUnknown: isUnresolvedDependency(path),
       existingFiles: allFiles,
     })
 
@@ -204,7 +204,7 @@ function EditorContent({
     const normalizedPath = path.replace(/^@\//, "/")
 
     // Check if this is an unknown component and create an empty file if needed
-    if (isUnknownComponent(path)) {
+    if (isUnresolvedDependency(path)) {
       // Get component name
       const componentName = getComponentName(path)
 
diff --git a/apps/web/components/features/studio/editor/file-explorer.tsx b/apps/web/components/features/studio/editor/file-explorer.tsx
index cb67ac43..4e76459e 100644
--- a/apps/web/components/features/studio/editor/file-explorer.tsx
+++ b/apps/web/components/features/studio/editor/file-explorer.tsx
@@ -37,7 +37,7 @@ interface DirectoryTreeItem extends BaseFileTreeItem {
 
 interface UnknownComponentFileTreeItem extends BaseFileTreeItem {
   type: "file"
-  isUnknownComponent: true
+  isUnresolvedDependency: true
   isLoading?: boolean
   actionRequired?: boolean
 }
@@ -92,7 +92,7 @@ export function buildFileTree(
 
   const addToTree = (
     path: string,
-    isUnknownComponent = false,
+    isUnresolvedDependency = false,
     componentName?: string,
   ) => {
     if (!isFileVisible(path)) {
@@ -107,7 +107,7 @@ export function buildFileTree(
       currentPath += `/${part}`
       const isLast = index === parts.length - 1
       const displayName =
-        isLast && isUnknownComponent ? `${componentName || part}.tsx` : part
+        isLast && isUnresolvedDependency ? `${componentName || part}.tsx` : part
 
       if (!isLast) {
         directories.add(currentPath)
@@ -130,12 +130,12 @@ export function buildFileTree(
         }
       } else {
         // Создаем файл
-        const fileItem = isUnknownComponent
+        const fileItem = isUnresolvedDependency
           ? {
               name: displayName,
               path,
               type: "file" as const,
-              isUnknownComponent: true,
+              isUnresolvedDependency: true,
               isLoading: loadingFiles.includes(path),
               actionRequired: actionRequiredFiles.includes(path),
             }
diff --git a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
index 26fcc7f1..24e350a8 100644
--- a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
@@ -734,8 +734,8 @@ export function SecondDemo() {
     }
   }
 
-  // Helper to check if a file is an unknown component
-  const isUnknownComponent = useCallback(
+  // Helper to check if a file is an unresolved dependency
+  const isUnresolvedDependency = useCallback(
     (path: string) => {
       return (
         processedData?.unresolvedDependencyImports?.some(
@@ -838,7 +838,7 @@ export function SecondDemo() {
     getCachedFileContent,
     sandpackConfig,
     getComponentFilePath,
-    isUnknownComponent,
+    isUnresolvedDependency,
     handleFileChange, // Export the handler for Sandpack component
   }
 }

From 2c5dba43b179012511d2622530cd33192d7e6b7e Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Mon, 7 Apr 2025 20:39:23 +0300
Subject: [PATCH 052/143] refactor: remove unused file

---
 .../features/studio/editor/code-manager.tsx   | 223 ------------------
 .../studio/editor/context/editor-state.tsx    |   2 +-
 2 files changed, 1 insertion(+), 224 deletions(-)
 delete mode 100644 apps/web/components/features/studio/editor/code-manager.tsx

diff --git a/apps/web/components/features/studio/editor/code-manager.tsx b/apps/web/components/features/studio/editor/code-manager.tsx
deleted file mode 100644
index 72afc2f7..00000000
--- a/apps/web/components/features/studio/editor/code-manager.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-import React, { createContext, useContext, useEffect } from "react"
-import { atom, useAtom } from "jotai"
-import { useSandpack } from "@codesandbox/sandpack-react"
-
-// Define atoms for state management (single source of truth)
-export const activeFileAtom = atom<string | null>(null)
-export const userModifiedFilesAtom = atom<Record<string, boolean>>({})
-
-// Define the types for our context
-interface CodeManagerContextType {
-  // File operations
-  getFileContent: (path: string) => string | undefined
-  updateFileContent: (path: string, content: string) => void
-  addFile: (path: string, content: string) => void
-  renameFile: (from: string, to: string) => void
-  deleteFile: (path: string) => void
-
-  // File state
-  activeFile: string | null
-  selectFile: (path: string | null) => void
-
-  // File types and management
-  isUnresolvedDependency: (path: string) => boolean
-  getComponentName: (path: string) => string | undefined
-
-  // File metadata
-  allFiles: string[]
-  unresolvedDependencies: Array<{ name: string; path: string }> | undefined
-}
-
-const CodeManagerContext = createContext<CodeManagerContextType | null>(null)
-
-export function useCodeManager() {
-  const context = useContext(CodeManagerContext)
-  if (!context) {
-    throw new Error("useCodeManager must be used within a CodeManagerProvider")
-  }
-  return context
-}
-
-// Simple hook to access atom state directly
-export function useEditorFile() {
-  const [activeFile, setActiveFile] = useAtom(activeFileAtom)
-  const [userModifiedFiles] = useAtom(userModifiedFilesAtom)
-
-  return {
-    activeFile,
-    setActiveFile,
-    isFileModified: (path: string) => userModifiedFiles[path] || false,
-  }
-}
-
-interface CodeManagerProviderProps {
-  children: React.ReactNode
-  initialComponentPath: string
-  unresolvedDependencies?: Array<{ name: string; path: string }>
-  onFileContentChange?: (path: string, content: string) => void
-  isUnresolvedDependencyFn?: (path: string) => boolean
-}
-
-export function CodeManagerProvider({
-  children,
-  initialComponentPath,
-  unresolvedDependencies = [],
-  onFileContentChange,
-  isUnresolvedDependencyFn = () => false,
-}: CodeManagerProviderProps) {
-  // Use atoms directly in the context
-  const { sandpack } = useSandpack()
-  const [activeFile, setActiveFile] = useAtom(activeFileAtom)
-  const [userModifiedFiles, setUserModifiedFiles] = useAtom(
-    userModifiedFilesAtom,
-  )
-
-  // Initialize with the main component file
-  useEffect(() => {
-    if (initialComponentPath && !activeFile) {
-      selectFile(initialComponentPath)
-    }
-  }, [initialComponentPath])
-
-  // File selection
-  const selectFile = (path: string | null) => {
-    if (!path) {
-      setActiveFile(null)
-      return
-    }
-
-    // Only update Sandpack if it's not an unknown component
-    if (!isUnresolvedDependencyFn(path)) {
-      sandpack.setActiveFile(path)
-    }
-
-    // Update atom state
-    setActiveFile(path)
-  }
-
-  // File content operations
-  const getFileContent = (path: string) => {
-    return sandpack.files[path]?.code
-  }
-
-  const updateFileContent = (path: string, content: string) => {
-    // Check if the content is actually different
-    const currentContent = getFileContent(path)
-    if (currentContent === content) {
-      return
-    }
-
-    // Mark this file as user-modified in atom state
-    setUserModifiedFiles((prev) => ({ ...prev, [path]: true }))
-
-    sandpack.updateFile(path, content)
-
-    // Notify parent if needed
-    if (onFileContentChange) {
-      onFileContentChange(path, content)
-    }
-  }
-
-  const addFile = (path: string, content: string = "") => {
-    sandpack.addFile(path, content)
-
-    // Select the newly created file
-    selectFile(path)
-  }
-
-  const renameFile = (from: string, to: string) => {
-    // Get the file content
-    const fileObj = sandpack.files[from]
-
-    // Proceed only if we have a file to rename
-    if (fileObj) {
-      // Handle both string content and SandpackFile objects
-      const content = typeof fileObj === "string" ? fileObj : fileObj.code || ""
-
-      // Create new file with the content
-      sandpack.addFile(to, content)
-
-      // Transfer user modification state
-      if (userModifiedFiles[from]) {
-        setUserModifiedFiles((prev) => {
-          const newState = { ...prev }
-          delete newState[from]
-          newState[to] = true
-          return newState
-        })
-      }
-
-      // Remove old file
-      deleteFile(from)
-
-      // Update active file if needed
-      if (activeFile === from) {
-        selectFile(to)
-      }
-    }
-  }
-
-  const deleteFile = (path: string) => {
-    // Remove from Sandpack
-    sandpack.deleteFile(path)
-
-    // Remove from user modified tracking
-    if (userModifiedFiles[path]) {
-      setUserModifiedFiles((prev) => {
-        const newState = { ...prev }
-        delete newState[path]
-        return newState
-      })
-    }
-
-    // Update active file if needed
-    if (activeFile === path) {
-      // Select another file
-      const files = Object.keys(sandpack.files)
-      if (files.length > 0 && files[0]) {
-        selectFile(files[0])
-      } else {
-        setActiveFile(null)
-      }
-    }
-  }
-
-  // Component utilities
-  const isUnresolvedDependency = (path: string) => {
-    return isUnresolvedDependencyFn(path)
-  }
-
-  const getComponentName = (path: string) => {
-    return unresolvedDependencies?.find(
-      (comp: { name: string; path: string }) => comp.path === path,
-    )?.name
-  }
-
-  // The context now just passes through the atom state + operations
-  const value: CodeManagerContextType = {
-    // File operations
-    getFileContent,
-    updateFileContent,
-    addFile,
-    renameFile,
-    deleteFile,
-
-    // File state
-    activeFile, // From atom
-    selectFile, // Updates atom
-
-    // File types and management
-    isUnresolvedDependency,
-    getComponentName,
-
-    // File metadata
-    allFiles: Object.keys(sandpack.files),
-    unresolvedDependencies,
-  }
-
-  return (
-    <CodeManagerContext.Provider value={value}>
-      {children}
-    </CodeManagerContext.Provider>
-  )
-}
diff --git a/apps/web/components/features/studio/editor/context/editor-state.tsx b/apps/web/components/features/studio/editor/context/editor-state.tsx
index aa4ffae2..aae63d52 100644
--- a/apps/web/components/features/studio/editor/context/editor-state.tsx
+++ b/apps/web/components/features/studio/editor/context/editor-state.tsx
@@ -52,7 +52,7 @@ export const actionRequiredFilesAtom = atom<
 export const actionRequiredPathsAtom = atom<string[]>([])
 
 // Define the types for our context
-interface CodeManagerContextType {
+export interface CodeManagerContextType {
   // File operations
   getFileContent: (path: string) => string | undefined
   updateFileContent: (path: string, content: string) => void

From 69ec4b372f0123933500e68ef562b6f37cc66457 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Mon, 7 Apr 2025 20:48:50 +0300
Subject: [PATCH 053/143] remove unused file

---
 .../editor/component-publish-dialog.tsx       |  2 +
 .../studio/editor/utils/merge-styles.ts       | 90 -------------------
 2 files changed, 2 insertions(+), 90 deletions(-)
 delete mode 100644 apps/web/components/features/studio/editor/utils/merge-styles.ts

diff --git a/apps/web/components/features/studio/editor/component-publish-dialog.tsx b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
index ff4086fc..421884fe 100644
--- a/apps/web/components/features/studio/editor/component-publish-dialog.tsx
+++ b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
@@ -213,6 +213,8 @@ interface SandpackContentProps {
   processedData?: any
 }
 
+// ЭТО ГОВНО ДОЛЖНО БУДЕТ ПЕРЕЕХТЬ НА EDITOR
+
 function SandpackContent({
   activePreview,
   onPreviewSelect,
diff --git a/apps/web/components/features/studio/editor/utils/merge-styles.ts b/apps/web/components/features/studio/editor/utils/merge-styles.ts
deleted file mode 100644
index 96098711..00000000
--- a/apps/web/components/features/studio/editor/utils/merge-styles.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { toast } from "sonner"
-import { defaultGlobalCss, defaultTailwindConfig } from "@/lib/defaults"
-
-/**
- * Merges tailwind config and global CSS from dependencies
- *
- * @param styles Array of style objects containing tailwindConfig and globalCss
- */
-export async function mergeStyles(
-  styles: { tailwindConfig?: string; globalCss?: string }[],
-) {
-  const customTailwindConfigs = styles
-    .map((s) => s.tailwindConfig)
-    .filter((config): config is string => !!config)
-
-  const customGlobalCssStyles = styles
-    .map((s) => s.globalCss)
-    .filter((css): css is string => !!css)
-
-  // Prepare result object
-  const result: {
-    tailwindConfig: string
-    globalCss: string
-  } = {
-    tailwindConfig: defaultTailwindConfig,
-    globalCss: defaultGlobalCss,
-  }
-
-  // Track each file loading state individually
-  const tailwindConfigPromise =
-    customTailwindConfigs.length > 0
-      ? (async () => {
-          console.log("[mergeStyles] Started merging tailwind config")
-
-          try {
-            const response = await fetch("/api/studio/merge-styles/tailwind", {
-              method: "POST",
-              headers: { "Content-Type": "application/json" },
-              body: JSON.stringify({
-                defaultConfig: defaultTailwindConfig,
-                dependencyConfigs: customTailwindConfigs,
-              }),
-            })
-
-            const data = await response.json()
-            result.tailwindConfig = data.tailwindConfig || defaultTailwindConfig
-
-            console.log("[mergeStyles] Completed merging tailwind config")
-            return data
-          } catch (error) {
-            console.error("Error merging tailwind config:", error)
-            toast.error("Failed to merge tailwind config")
-            return { tailwindConfig: defaultTailwindConfig }
-          }
-        })()
-      : Promise.resolve({ tailwindConfig: defaultTailwindConfig })
-
-  const globalCssPromise =
-    customGlobalCssStyles.length > 0
-      ? (async () => {
-          console.log("[mergeStyles] Started merging global CSS")
-
-          try {
-            const response = await fetch("/api/studio/merge-styles/globals", {
-              method: "POST",
-              headers: { "Content-Type": "application/json" },
-              body: JSON.stringify({
-                defaultGlobalCss: defaultGlobalCss,
-                dependencyGlobalCss: customGlobalCssStyles,
-              }),
-            })
-
-            const data = await response.json()
-            result.globalCss = data.globalCss || defaultGlobalCss
-
-            console.log("[mergeStyles] Completed merging global CSS")
-            return data
-          } catch (error) {
-            console.error("Error merging global CSS:", error)
-            toast.error("Failed to merge global CSS")
-            return { globalCss: defaultGlobalCss }
-          }
-        })()
-      : Promise.resolve({ globalCss: defaultGlobalCss })
-
-  // Wait for both promises to complete
-  await Promise.all([tailwindConfigPromise, globalCssPromise])
-
-  return result
-}

From 5562de874636cdc157d3986131581c4278b39a13 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Mon, 7 Apr 2025 20:55:40 +0300
Subject: [PATCH 054/143] refactor - move dump file separate

---
 .../editor/component-publish-dialog.tsx       | 190 +----------------
 .../editor/sandpack-initial-content.tsx       | 201 ++++++++++++++++++
 2 files changed, 206 insertions(+), 185 deletions(-)
 create mode 100644 apps/web/components/features/studio/editor/sandpack-initial-content.tsx

diff --git a/apps/web/components/features/studio/editor/component-publish-dialog.tsx b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
index 421884fe..739216df 100644
--- a/apps/web/components/features/studio/editor/component-publish-dialog.tsx
+++ b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
@@ -11,21 +11,12 @@ import { PlusCircle } from "lucide-react"
 import { Spinner } from "@/components/icons/spinner"
 import {
   SandpackProvider,
-  SandpackLayout,
-  useSandpack,
 } from "@codesandbox/sandpack-react"
 
-import { FileExplorer } from "./file-explorer"
-import { EditorCodePanel } from "./editor-code-panel"
 import { usePublishDialog } from "./hooks/use-editor-dialog"
 import React, { useEffect, useRef, useState } from "react"
 import { Editor } from "./editor"
-import { RequirementsPanel } from "./requirements-panel"
-import { cn } from "@/lib/utils"
-import {
-  useActionRequired,
-  ActionRequiredDetails,
-} from "./context/editor-state"
+import { SandpackInitialContent } from "./sandpack-initial-content"
 
 interface ComponentPublishDialogProps {
   userId: string
@@ -54,7 +45,9 @@ const StableSandpackContainer = React.memo(
 const MemoizedEditor = React.memo(Editor)
 
 // Memoize SandpackContent component
-const MemoizedSandpackContent = React.memo(SandpackContent)
+const MemoizedSandpackInitialContent = React.memo(
+  SandpackInitialContent,
+)
 
 export function ComponentPublishDialog({
   userId,
@@ -118,7 +111,7 @@ export function ComponentPublishDialog({
       </StableSandpackContainer>
     ) : (
       <StableSandpackContainer config={sandpackConfig}>
-        <MemoizedSandpackContent
+        <MemoizedSandpackInitialContent
           activePreview={activePreview}
           onPreviewSelect={handlePreviewSelect}
           unresolvedDependencies={processedData?.unresolvedDependencyImports}
@@ -212,176 +205,3 @@ interface SandpackContentProps {
   actionRequiredFiles?: string[]
   processedData?: any
 }
-
-// ЭТО ГОВНО ДОЛЖНО БУДЕТ ПЕРЕЕХТЬ НА EDITOR
-
-function SandpackContent({
-  activePreview,
-  onPreviewSelect,
-  unresolvedDependencies,
-  getComponentFilePath,
-  setComponentCode,
-  isUnresolvedDependency,
-  loadingFiles = [],
-  actionRequiredFiles = [],
-  processedData,
-}: SandpackContentProps) {
-  const { sandpack } = useSandpack()
-  const componentPath = getComponentFilePath()
-  const { markFileAsRequiringAction, isActionRequired } = useActionRequired()
-  const fileContentRef = useRef<Record<string, string>>({})
-
-  // Initialize action required files from props
-  useEffect(() => {
-    // Add a tracker to prevent infinite loops
-    const processedFileTracker = new Set<string>()
-
-    // Add each file that requires action to our atom state
-    actionRequiredFiles.forEach((file) => {
-      // Skip if we've already processed this file
-      if (processedFileTracker.has(file)) return
-      processedFileTracker.add(file)
-
-      if (file === "/tailwind.config.js" || file === "/globals.css") {
-        if (processedData?.additionalStyles?.required) {
-          const details: ActionRequiredDetails = {
-            reason: "styles",
-            tailwindExtensions:
-              processedData.additionalStyles.tailwindExtensions,
-            cssVariables: processedData.additionalStyles.cssVariables,
-            keyframes: processedData.additionalStyles.keyframes,
-            utilities: processedData.additionalStyles.utilities,
-          }
-          markFileAsRequiringAction(file, details)
-        }
-      } else {
-        // For other files (likely missing imports)
-        markFileAsRequiringAction(file, {
-          reason: "unresolved_dependencies",
-          message: "This component requires additional imports",
-        })
-      }
-    })
-  }, [actionRequiredFiles, processedData, markFileAsRequiringAction])
-
-  // Store file content when it changes to prevent losing edits
-  useEffect(() => {
-    const currentContent = sandpack.files[sandpack.activeFile]?.code
-
-    if (currentContent && sandpack.activeFile) {
-      const path = sandpack.activeFile
-
-      // Only update if content actually changed
-      if (fileContentRef.current[path] !== currentContent) {
-        fileContentRef.current[path] = currentContent
-      }
-    }
-  }, [sandpack.files, sandpack.activeFile])
-
-  // When a file disappears from sandpack but we have its content, restore it
-  useEffect(() => {
-    Object.entries(fileContentRef.current).forEach(([path, content]) => {
-      if (path && content && !sandpack.files[path]) {
-        try {
-          sandpack.addFile(path, content)
-        } catch (error) {
-          // Error handling without logging
-        }
-      }
-    })
-  }, [sandpack.files, sandpack])
-
-  // Set initial file only once when component mounts
-  useEffect(() => {
-    if (!activePreview) {
-      sandpack.setActiveFile(componentPath)
-      onPreviewSelect({
-        type: "regular",
-        filePath: componentPath,
-      })
-    }
-  }, [componentPath, onPreviewSelect, sandpack, activePreview])
-
-  const handleFileSelect = (path: string) => {
-    // If the file is already selected, don't do anything
-    if (activePreview?.filePath === path) {
-      return
-    }
-
-    // Check if this is an unknown component
-    if (isUnresolvedDependency(path)) {
-      // For unknown components, get the component name
-      const componentName = unresolvedDependencies?.find(
-        (comp) => comp.path === path,
-      )?.name
-
-      if (componentName) {
-        // Set as unknown component type preview
-        onPreviewSelect({
-          type: "unknown",
-          filePath: path,
-          componentName,
-        })
-      }
-    } else {
-      // Set as regular file type preview
-      sandpack.setActiveFile(path)
-      onPreviewSelect({
-        type: "regular",
-        filePath: path,
-      })
-    }
-  }
-
-  // Keep editor file in sync with selection for regular files
-  useEffect(() => {
-    if (
-      activePreview?.type === "regular" &&
-      activePreview.filePath &&
-      sandpack.activeFile !== activePreview.filePath
-    ) {
-      sandpack.setActiveFile(activePreview.filePath)
-    }
-  }, [activePreview, sandpack])
-
-  // Check if the current file needs style updates
-  const showStylePanel =
-    activePreview?.filePath &&
-    isActionRequired(activePreview.filePath) &&
-    activePreview.type !== "unknown" // Don't show panel for unknown components
-
-  return (
-    <SandpackLayout style={{ height: "100%" }}>
-      <div className="flex w-full h-full">
-        <div className="flex border-r border-border">
-          <FileExplorer
-            unresolvedDependencies={unresolvedDependencies}
-            onFileSelect={handleFileSelect}
-            selectedFile={activePreview?.filePath || ""}
-            visibleFiles={sandpack.visibleFiles || []}
-            loadingFiles={loadingFiles}
-          />
-        </div>
-        <div className="flex-1 flex">
-          <>
-            <div className={cn("flex-1", showStylePanel && "w-2/3")}>
-              <EditorCodePanel
-                componentPath={activePreview?.filePath || componentPath}
-                onCodeChange={(code: string) => {
-                  setComponentCode(code)
-                }}
-              />
-            </div>
-
-            {/* Style requirements panel */}
-            {showStylePanel && (
-              <div className="w-1/3 p-2">
-                <RequirementsPanel activeFile={activePreview.filePath} />
-              </div>
-            )}
-          </>
-        </div>
-      </div>
-    </SandpackLayout>
-  )
-}
diff --git a/apps/web/components/features/studio/editor/sandpack-initial-content.tsx b/apps/web/components/features/studio/editor/sandpack-initial-content.tsx
new file mode 100644
index 00000000..993003cf
--- /dev/null
+++ b/apps/web/components/features/studio/editor/sandpack-initial-content.tsx
@@ -0,0 +1,201 @@
+import { SandpackLayout, useSandpack } from "@codesandbox/sandpack-react"
+import { useEffect, useRef } from "react"
+import { cn } from "@/lib/utils"
+import { FileExplorer } from "./file-explorer"
+import { EditorCodePanel } from "./editor-code-panel"
+import { RequirementsPanel } from "./requirements-panel"
+import {
+  useActionRequired,
+  ActionRequiredDetails,
+} from "./context/editor-state"
+
+interface SandpackInitialContentProps {
+  activePreview: {
+    type: "regular" | "unknown"
+    filePath: string
+    componentName?: string
+  } | null
+  onPreviewSelect: (preview: {
+    type: "regular" | "unknown"
+    filePath: string
+    componentName?: string
+  }) => void
+  unresolvedDependencies?: Array<{ name: string; path: string }>
+  getComponentFilePath: () => string
+  setComponentCode: (code: string) => void
+  isUnresolvedDependency: (path: string) => boolean
+  loadingFiles?: string[]
+  actionRequiredFiles?: string[]
+  processedData?: any
+}
+
+export function SandpackInitialContent({
+  activePreview,
+  onPreviewSelect,
+  unresolvedDependencies,
+  getComponentFilePath,
+  setComponentCode,
+  isUnresolvedDependency,
+  loadingFiles = [],
+  actionRequiredFiles = [],
+  processedData,
+}: SandpackInitialContentProps) {
+  const { sandpack } = useSandpack()
+  const componentPath = getComponentFilePath()
+  const { markFileAsRequiringAction, isActionRequired } = useActionRequired()
+  const fileContentRef = useRef<Record<string, string>>({})
+
+  // Initialize action required files from props
+  useEffect(() => {
+    // Add a tracker to prevent infinite loops
+    const processedFileTracker = new Set<string>()
+
+    // Add each file that requires action to our atom state
+    actionRequiredFiles.forEach((file) => {
+      // Skip if we've already processed this file
+      if (processedFileTracker.has(file)) return
+      processedFileTracker.add(file)
+
+      if (file === "/tailwind.config.js" || file === "/globals.css") {
+        if (processedData?.additionalStyles?.required) {
+          const details: ActionRequiredDetails = {
+            reason: "styles",
+            tailwindExtensions:
+              processedData.additionalStyles.tailwindExtensions,
+            cssVariables: processedData.additionalStyles.cssVariables,
+            keyframes: processedData.additionalStyles.keyframes,
+            utilities: processedData.additionalStyles.utilities,
+          }
+          markFileAsRequiringAction(file, details)
+        }
+      } else {
+        // For other files (likely missing imports)
+        markFileAsRequiringAction(file, {
+          reason: "unresolved_dependencies",
+          message: "This component requires additional imports",
+        })
+      }
+    })
+  }, [actionRequiredFiles, processedData, markFileAsRequiringAction])
+
+  // Store file content when it changes to prevent losing edits
+  useEffect(() => {
+    const currentContent = sandpack.files[sandpack.activeFile]?.code
+
+    if (currentContent && sandpack.activeFile) {
+      const path = sandpack.activeFile
+
+      // Only update if content actually changed
+      if (fileContentRef.current[path] !== currentContent) {
+        fileContentRef.current[path] = currentContent
+      }
+    }
+  }, [sandpack.files, sandpack.activeFile])
+
+  // When a file disappears from sandpack but we have its content, restore it
+  useEffect(() => {
+    Object.entries(fileContentRef.current).forEach(([path, content]) => {
+      if (path && content && !sandpack.files[path]) {
+        try {
+          sandpack.addFile(path, content)
+        } catch (error) {
+          // Error handling without logging
+        }
+      }
+    })
+  }, [sandpack.files, sandpack])
+
+  // Set initial file only once when component mounts
+  useEffect(() => {
+    if (!activePreview) {
+      sandpack.setActiveFile(componentPath)
+      onPreviewSelect({
+        type: "regular",
+        filePath: componentPath,
+      })
+    }
+  }, [componentPath, onPreviewSelect, sandpack, activePreview])
+
+  const handleFileSelect = (path: string) => {
+    // If the file is already selected, don't do anything
+    if (activePreview?.filePath === path) {
+      return
+    }
+
+    // Check if this is an unknown component
+    if (isUnresolvedDependency(path)) {
+      // For unknown components, get the component name
+      const componentName = unresolvedDependencies?.find(
+        (comp) => comp.path === path,
+      )?.name
+
+      if (componentName) {
+        // Set as unknown component type preview
+        onPreviewSelect({
+          type: "unknown",
+          filePath: path,
+          componentName,
+        })
+      }
+    } else {
+      // Set as regular file type preview
+      sandpack.setActiveFile(path)
+      onPreviewSelect({
+        type: "regular",
+        filePath: path,
+      })
+    }
+  }
+
+  // Keep editor file in sync with selection for regular files
+  useEffect(() => {
+    if (
+      activePreview?.type === "regular" &&
+      activePreview.filePath &&
+      sandpack.activeFile !== activePreview.filePath
+    ) {
+      sandpack.setActiveFile(activePreview.filePath)
+    }
+  }, [activePreview, sandpack])
+
+  // Check if the current file needs style updates
+  const showStylePanel =
+    activePreview?.filePath &&
+    isActionRequired(activePreview.filePath) &&
+    activePreview.type !== "unknown" // Don't show panel for unknown components
+
+  return (
+    <SandpackLayout style={{ height: "100%" }}>
+      <div className="flex w-full h-full">
+        <div className="flex border-r border-border">
+          <FileExplorer
+            unresolvedDependencies={unresolvedDependencies}
+            onFileSelect={handleFileSelect}
+            selectedFile={activePreview?.filePath || ""}
+            visibleFiles={sandpack.visibleFiles || []}
+            loadingFiles={loadingFiles}
+          />
+        </div>
+        <div className="flex-1 flex">
+          <>
+            <div className={cn("flex-1", showStylePanel && "w-2/3")}>
+              <EditorCodePanel
+                componentPath={activePreview?.filePath || componentPath}
+                onCodeChange={(code: string) => {
+                  setComponentCode(code)
+                }}
+              />
+            </div>
+
+            {/* Style requirements panel */}
+            {showStylePanel && (
+              <div className="w-1/3 p-2">
+                <RequirementsPanel activeFile={activePreview.filePath} />
+              </div>
+            )}
+          </>
+        </div>
+      </div>
+    </SandpackLayout>
+  )
+}

From 41214a4391160aa07ad56b452eae2eea17c76ed8 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Mon, 7 Apr 2025 21:25:52 +0300
Subject: [PATCH 055/143] refactor: separate hooks

---
 .../editor/component-publish-dialog.tsx       |  35 +-
 .../editor/hooks/use-component-processing.ts  | 278 ++++++
 .../studio/editor/hooks/use-dependencies.ts   | 242 +++++
 .../studio/editor/hooks/use-dialog-state.ts   |  36 +
 .../studio/editor/hooks/use-editor-dialog.ts  | 886 +++---------------
 .../editor/hooks/use-file-management.ts       | 247 +++++
 .../editor/hooks/use-sandpack-config.ts       | 202 ++++
 7 files changed, 1118 insertions(+), 808 deletions(-)
 create mode 100644 apps/web/components/features/studio/editor/hooks/use-component-processing.ts
 create mode 100644 apps/web/components/features/studio/editor/hooks/use-dependencies.ts
 create mode 100644 apps/web/components/features/studio/editor/hooks/use-dialog-state.ts
 create mode 100644 apps/web/components/features/studio/editor/hooks/use-file-management.ts
 create mode 100644 apps/web/components/features/studio/editor/hooks/use-sandpack-config.ts

diff --git a/apps/web/components/features/studio/editor/component-publish-dialog.tsx b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
index 739216df..fe961a00 100644
--- a/apps/web/components/features/studio/editor/component-publish-dialog.tsx
+++ b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
@@ -9,9 +9,7 @@ import {
 } from "@/components/ui/dialog"
 import { PlusCircle } from "lucide-react"
 import { Spinner } from "@/components/icons/spinner"
-import {
-  SandpackProvider,
-} from "@codesandbox/sandpack-react"
+import { SandpackProvider } from "@codesandbox/sandpack-react"
 
 import { usePublishDialog } from "./hooks/use-editor-dialog"
 import React, { useEffect, useRef, useState } from "react"
@@ -45,9 +43,7 @@ const StableSandpackContainer = React.memo(
 const MemoizedEditor = React.memo(Editor)
 
 // Memoize SandpackContent component
-const MemoizedSandpackInitialContent = React.memo(
-  SandpackInitialContent,
-)
+const MemoizedSandpackInitialContent = React.memo(SandpackInitialContent)
 
 export function ComponentPublishDialog({
   userId,
@@ -129,9 +125,12 @@ export function ComponentPublishDialog({
   }, [
     open,
     processedData,
-    sandpackConfig,
-    activePreview,
+    getComponentFilePath,
+    activePreview?.filePath,
+    loadingShadcnComponents,
     actionRequiredFiles,
+    // Include only the stable, primitive values from sandpackConfig that should trigger re-renders
+    sandpackConfig.template,
     // Do NOT include frequently changing props that don't affect structure
   ])
 
@@ -185,23 +184,3 @@ export function ComponentPublishDialog({
     </Dialog>
   )
 }
-
-interface SandpackContentProps {
-  activePreview: {
-    type: "regular" | "unknown"
-    filePath: string
-    componentName?: string
-  } | null
-  onPreviewSelect: (preview: {
-    type: "regular" | "unknown"
-    filePath: string
-    componentName?: string
-  }) => void
-  unresolvedDependencies?: Array<{ name: string; path: string }>
-  getComponentFilePath: () => string
-  setComponentCode: (code: string) => void
-  isUnresolvedDependency: (path: string) => boolean
-  loadingFiles?: string[]
-  actionRequiredFiles?: string[]
-  processedData?: any
-}
diff --git a/apps/web/components/features/studio/editor/hooks/use-component-processing.ts b/apps/web/components/features/studio/editor/hooks/use-component-processing.ts
new file mode 100644
index 00000000..26ade74a
--- /dev/null
+++ b/apps/web/components/features/studio/editor/hooks/use-component-processing.ts
@@ -0,0 +1,278 @@
+import { useState, useCallback } from "react"
+import { toast } from "sonner"
+import { ActivePreview } from "./use-file-management"
+
+interface UseComponentProcessingProps {
+  userId: string
+  cleanupTimeouts: () => void
+  setIsProcessing: (isProcessing: boolean) => void
+  setLoadingShadcnComponents: (components: string[]) => void
+  setActionRequiredFiles: (files: string[]) => void
+  handlePreviewSelect: (
+    preview: ActivePreview,
+    files: Record<string, any>,
+  ) => void
+  loadDependencies: (processedData: any) => Promise<{
+    remainingComponents: any[]
+    updatedLoadingPaths: string[]
+    allDependencySlugs: string[]
+  }>
+  resolveDependencies: (
+    dependencySlugs: string[],
+    loadingPaths: string[],
+  ) => Promise<boolean | undefined>
+  setupSafetyTimeout: () => void
+}
+
+/**
+ * Hook for component processing logic
+ */
+export function useComponentProcessing({
+  userId,
+  cleanupTimeouts,
+  setIsProcessing,
+  setLoadingShadcnComponents,
+  setActionRequiredFiles,
+  handlePreviewSelect,
+  loadDependencies,
+  resolveDependencies,
+  setupSafetyTimeout,
+}: UseComponentProcessingProps) {
+  const [processedData, setProcessedData] = useState<any>(null)
+
+  // Get component file path
+  const getComponentFilePath = useCallback(() => {
+    if (!processedData) return "/components/ui/component.tsx"
+
+    const registryType = processedData.registryType || "ui"
+    const fileName = processedData.slug
+      ? `${processedData.slug}.tsx`
+      : "component.tsx"
+    return `/components/${registryType}/${fileName}`
+  }, [processedData])
+
+  // Process component
+  const handleProcessComponent = useCallback(
+    async (componentCode: string) => {
+      if (!componentCode.trim()) {
+        toast.error("Please enter component code")
+        return
+      }
+
+      // Clear any existing timeouts
+      cleanupTimeouts()
+
+      setIsProcessing(true)
+      setLoadingShadcnComponents([]) // Reset loading state at the start
+      setActionRequiredFiles([]) // Reset action required files
+
+      // Save the original component code for later use (prevent it from being cleared)
+      const originalComponentCode = componentCode
+
+      try {
+        const response = await fetch("/api/studio/preprocess-component", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ code: componentCode, userId }),
+        })
+
+        if (!response.ok) {
+          const errorData = await response.json()
+          throw new Error(errorData.error || "Failed to process component")
+        }
+
+        const data = await response.json()
+        console.log("Preprocess component response:", data)
+
+        // Check if the API indicates that style updates are needed
+        const styleUpdateFiles: string[] = []
+
+        // Check the additionalStyles property to determine if styles are needed
+        if (data.additionalStyles && data.additionalStyles.required) {
+          // Ensure the additionalStyles structure is correctly initialized
+          if (!data.additionalStyles.tailwindExtensions) {
+            data.additionalStyles.tailwindExtensions = {}
+          }
+
+          // Initialize all tailwind extension categories
+          const extensions = [
+            "colors",
+            "animations",
+            "fontFamily",
+            "borderRadius",
+            "boxShadow",
+            "spacing",
+          ]
+          extensions.forEach((ext) => {
+            if (!data.additionalStyles.tailwindExtensions[ext]) {
+              data.additionalStyles.tailwindExtensions[ext] = {}
+            }
+          })
+
+          if (!data.additionalStyles.cssVariables) {
+            data.additionalStyles.cssVariables = []
+          }
+
+          if (!data.additionalStyles.keyframes) {
+            data.additionalStyles.keyframes = []
+          }
+
+          if (!data.additionalStyles.utilities) {
+            data.additionalStyles.utilities = []
+          }
+
+          // Check for Tailwind extensions
+          if (
+            data.additionalStyles.tailwindExtensions &&
+            Object.entries(data.additionalStyles.tailwindExtensions).some(
+              ([_, val]: [string, any]) => Object.keys(val || {}).length > 0,
+            )
+          ) {
+            styleUpdateFiles.push("/tailwind.config.js")
+          }
+
+          // Check for CSS variables, keyframes or utilities
+          const hasGlobalCssUpdates =
+            (data.additionalStyles.cssVariables &&
+              data.additionalStyles.cssVariables.length > 0) ||
+            (data.additionalStyles.keyframes &&
+              data.additionalStyles.keyframes.length > 0) ||
+            (data.additionalStyles.utilities &&
+              data.additionalStyles.utilities.length > 0)
+
+          if (hasGlobalCssUpdates) {
+            styleUpdateFiles.push("/globals.css")
+          }
+
+          // If additionalStyles is required but no specific files were marked,
+          // default to highlighting both files if there are any non-empty style requirements
+          const hasActualStyleChanges =
+            // Check if there are actual tailwind extensions needed
+            Object.entries(data.additionalStyles.tailwindExtensions || {}).some(
+              ([_, val]: [string, any]) => Object.keys(val || {}).length > 0,
+            ) ||
+            // Check if there are CSS variables
+            (data.additionalStyles.cssVariables || []).length > 0 ||
+            // Check if there are keyframes
+            (data.additionalStyles.keyframes || []).length > 0 ||
+            // Check if there are utilities
+            (data.additionalStyles.utilities || []).length > 0
+
+          if (styleUpdateFiles.length === 0 && hasActualStyleChanges) {
+            styleUpdateFiles.push("/tailwind.config.js", "/globals.css")
+          } else if (styleUpdateFiles.length === 0 && !hasActualStyleChanges) {
+            // If required is true but there's nothing actually to add, this is a false positive
+            // so we should set it to false
+            data.additionalStyles.required = false
+          }
+
+          // Fix any undefined values in keyframes or utilities
+          if (data.additionalStyles.keyframes) {
+            data.additionalStyles.keyframes =
+              data.additionalStyles.keyframes.map((keyframe: any) => {
+                // Standardize keyframe structure - ensure we always use 'name' and 'frames'
+                const name = keyframe.name || keyframe.keyframeName || ""
+                const frames = keyframe.frames || keyframe.definition || ""
+
+                if (!frames || frames === "undefined") {
+                  // Provide a default example keyframe definition
+                  return {
+                    name,
+                    frames:
+                      "0% { opacity: 0; transform: scale(0.95); }\n100% { opacity: 1; transform: scale(1); }",
+                  }
+                }
+                return { name, frames }
+              })
+          }
+
+          if (data.additionalStyles.utilities) {
+            data.additionalStyles.utilities =
+              data.additionalStyles.utilities.map((utility: any) => {
+                // Standardize utility structure - ensure we always use 'className' and 'definition'
+                const className = utility.className || utility.name || ""
+                const definition =
+                  utility.definition || utility.properties || ""
+
+                if (!definition || definition === "undefined") {
+                  // Provide a default example utility definition
+                  return {
+                    className,
+                    definition: "/* Add your custom styles here */",
+                  }
+                }
+                return { className, definition }
+              })
+          }
+        }
+
+        if (styleUpdateFiles.length > 0) {
+          setActionRequiredFiles(styleUpdateFiles)
+        }
+
+        // Load dependencies and handle the unresolved components
+        const { remainingComponents, updatedLoadingPaths, allDependencySlugs } =
+          await loadDependencies(data)
+
+        // Update processed data with the updated unresolved dependencies
+        data.unresolvedDependencyImports = remainingComponents
+
+        // Set processed data BEFORE setting active preview
+        setProcessedData(data)
+
+        // AFTER setting processed data, set the active preview
+        const newComponentPath = `/components/${data.registryType || "ui"}/${data.slug ? `${data.slug}.tsx` : "component.tsx"}`
+
+        // Create a mock files object for preview selection with the ORIGINAL component code
+        const mockFiles = {
+          [newComponentPath]: { code: originalComponentCode },
+        }
+
+        handlePreviewSelect(
+          {
+            type: "regular",
+            filePath: newComponentPath,
+          },
+          mockFiles,
+        )
+
+        // If we have dependencies to resolve, do that next
+        if (allDependencySlugs.length > 0) {
+          await resolveDependencies(allDependencySlugs, updatedLoadingPaths)
+        }
+
+        toast.success("Component processed successfully")
+      } catch (error) {
+        toast.error(
+          `Processing failed: ${error instanceof Error ? error.message : "Unknown error"}`,
+        )
+        console.error("Error processing component:", error)
+        // Clear loading state immediately in case of main process error
+        setLoadingShadcnComponents([])
+        setActionRequiredFiles([])
+      } finally {
+        setIsProcessing(false)
+        // Set a safety timeout for clearing loading state
+        setupSafetyTimeout()
+      }
+    },
+    [
+      userId,
+      cleanupTimeouts,
+      setIsProcessing,
+      setLoadingShadcnComponents,
+      setActionRequiredFiles,
+      handlePreviewSelect,
+      loadDependencies,
+      resolveDependencies,
+      setupSafetyTimeout,
+    ],
+  )
+
+  return {
+    processedData,
+    getComponentFilePath,
+    handleProcessComponent,
+    setProcessedData,
+  }
+}
diff --git a/apps/web/components/features/studio/editor/hooks/use-dependencies.ts b/apps/web/components/features/studio/editor/hooks/use-dependencies.ts
new file mode 100644
index 00000000..000587ef
--- /dev/null
+++ b/apps/web/components/features/studio/editor/hooks/use-dependencies.ts
@@ -0,0 +1,242 @@
+import { useState, useCallback, useRef } from "react"
+import { useClerkSupabaseClient } from "@/lib/clerk"
+import { toast } from "sonner"
+import { resolveRegistryDependencyTree } from "@/lib/queries.server"
+import {
+  lookupComponentsInDatabase,
+  convertComponentMatchesToDependencySlugs,
+} from "@/components/features/studio/editor/utils/component-lookup"
+
+/**
+ * Hook for managing component dependencies
+ */
+export function useDependencies() {
+  const [registryDependencies, setRegistryDependencies] = useState<
+    Record<string, { code: string; registry: string }>
+  >({})
+  const [
+    npmDependenciesOfRegistryDependencies,
+    setNpmDependenciesOfRegistryDependencies,
+  ] = useState<Record<string, string>>({})
+
+  const [loadingShadcnComponents, setLoadingShadcnComponents] = useState<
+    string[]
+  >([])
+
+  // Add ref to track the timeout ID for loading state
+  const loadingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  // Add max timeout for safety
+  const maxLoadingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const supabase = useClerkSupabaseClient()
+
+  // Cleanup function for timeouts
+  const cleanupTimeouts = useCallback(() => {
+    if (loadingTimeoutRef.current) {
+      clearTimeout(loadingTimeoutRef.current)
+      loadingTimeoutRef.current = null
+    }
+    if (maxLoadingTimeoutRef.current) {
+      clearTimeout(maxLoadingTimeoutRef.current)
+      maxLoadingTimeoutRef.current = null
+    }
+  }, [])
+
+  // Reset dependencies state
+  const resetDependencies = useCallback(() => {
+    setRegistryDependencies({})
+    setNpmDependenciesOfRegistryDependencies({})
+    setLoadingShadcnComponents([])
+    cleanupTimeouts()
+  }, [cleanupTimeouts])
+
+  // Load dependencies for a component
+  const loadDependencies = useCallback(
+    async (processedData: any) => {
+      setLoadingShadcnComponents([]) // Reset loading state
+
+      // Collect shadcn components first
+      const shadcnSlugs: string[] = []
+      let shadcnLoadingPaths: string[] = []
+
+      if (processedData?.shadcnComponentsImports?.length > 0) {
+        shadcnLoadingPaths = processedData.shadcnComponentsImports.map(
+          (component: { name: string }) => {
+            const path = `/components/ui/${component.name.toLowerCase()}.tsx`
+            shadcnSlugs.push(
+              `shadcn/${component.name.toLowerCase().replace(/\s+/g, "-")}`,
+            )
+            return path
+          },
+        )
+        setLoadingShadcnComponents(shadcnLoadingPaths)
+      }
+
+      // Check for non-shadcn components in the database
+      const dbComponentSlugs: string[] = []
+      let dbLoadingPaths: string[] = []
+
+      if (processedData?.unresolvedDependencyImports?.length > 0) {
+        try {
+          // Look up components in the database
+          const { lookupResults, remainingComponents } =
+            await lookupComponentsInDatabase(
+              supabase,
+              processedData.unresolvedDependencyImports,
+            )
+
+          // Update the processedData with found matches
+          if (lookupResults.length > 0) {
+            // Create loading paths for UI feedback
+            dbLoadingPaths = lookupResults.map(
+              ({ match }) => `/components/${match.registry}/${match.slug}.tsx`,
+            )
+
+            // Add paths to loading state
+            setLoadingShadcnComponents((prev) => [...prev, ...dbLoadingPaths])
+
+            // Convert matches to dependency slugs for resolveRegistryDependencyTree
+            dbComponentSlugs.push(
+              ...convertComponentMatchesToDependencySlugs(lookupResults),
+            )
+          }
+
+          // Return the updated unresolved dependencies
+          return {
+            remainingComponents,
+            updatedLoadingPaths: [...shadcnLoadingPaths, ...dbLoadingPaths],
+            allDependencySlugs: [...shadcnSlugs, ...dbComponentSlugs],
+          }
+        } catch (error) {
+          console.error("Error looking up components:", error)
+          toast.error(
+            `Failed to look up components: ${error instanceof Error ? error.message : "Unknown error"}`,
+          )
+          return {
+            remainingComponents: processedData.unresolvedDependencyImports,
+            updatedLoadingPaths: shadcnLoadingPaths,
+            allDependencySlugs: shadcnSlugs,
+          }
+        }
+      }
+
+      return {
+        remainingComponents: processedData.unresolvedDependencyImports,
+        updatedLoadingPaths: [...shadcnLoadingPaths, ...dbLoadingPaths],
+        allDependencySlugs: [...shadcnSlugs, ...dbComponentSlugs],
+      }
+    },
+    [supabase],
+  )
+
+  // Resolve dependencies from the registry
+  const resolveDependencies = useCallback(
+    async (dependencySlugs: string[], loadingPaths: string[]) => {
+      if (dependencySlugs.length === 0) {
+        return
+      }
+
+      try {
+        // Create a mapping of dependency slugs to their file paths for tracking loading state
+        const slugToFilePaths: Record<string, string> = {}
+
+        // Map component paths to slugs
+        loadingPaths.forEach((path) => {
+          const componentName = path.split("/").pop()?.replace(".tsx", "") || ""
+          const registry = path.split("/")[2] || "ui"
+          const slug = `${registry}/${componentName}`
+          slugToFilePaths[slug] = path
+        })
+
+        // Track which dependencies are loaded
+        const loadedDependencies = new Set<string>()
+
+        // Function to call when a dependency is loaded
+        const handleDependencyLoaded = (slug: string) => {
+          // When a dependency is resolved, remove it from the loading state
+          const path = slugToFilePaths[slug]
+          if (path) {
+            setLoadingShadcnComponents((prev) =>
+              prev.filter((filePath) => filePath !== path),
+            )
+            loadedDependencies.add(slug)
+          }
+        }
+
+        const result = await resolveRegistryDependencyTree({
+          supabase,
+          sourceDependencySlugs: dependencySlugs,
+          withDemoDependencies: false,
+          withStyles: true, // Enable styles fetching
+        })
+
+        if (result.error) {
+          throw new Error(
+            `Failed to resolve dependencies: ${result.error.message}`,
+          )
+        }
+
+        if (!result.data) {
+          throw new Error("No data returned from dependency resolution")
+        }
+
+        // Process loaded dependencies directly since we've verified data exists
+        Object.keys(result.data.filesWithRegistry).forEach((path) => {
+          const slug = dependencySlugs.find((s) => {
+            const basePath = path.split("/").pop()?.replace(".tsx", "") || ""
+            return s.includes(basePath)
+          })
+
+          if (slug && !loadedDependencies.has(slug)) {
+            handleDependencyLoaded(slug)
+          }
+
+          // Also check if this is a non-Shadcn component path that we need to remove from loading
+          const nonShadcnPath = path.startsWith("/components/") ? path : null
+          if (nonShadcnPath) {
+            setLoadingShadcnComponents((prev) =>
+              prev.filter((filePath) => filePath !== nonShadcnPath),
+            )
+          }
+        })
+
+        setRegistryDependencies(result.data.filesWithRegistry)
+        setNpmDependenciesOfRegistryDependencies(result.data.npmDependencies)
+
+        return true
+      } catch (error) {
+        console.error("Error resolving dependencies:", error)
+        toast.error(
+          `Failed to resolve dependencies: ${error instanceof Error ? error.message : "Unknown error"}`,
+        )
+
+        // Clear component loading state on error
+        setLoadingShadcnComponents([])
+        return false
+      }
+    },
+    [supabase],
+  )
+
+  // Safety cleanup for loading state
+  const setupSafetyTimeout = useCallback(() => {
+    // Set a final cleanup timer just to be safe (with a shorter timeout)
+    loadingTimeoutRef.current = setTimeout(() => {
+      if (loadingShadcnComponents.length > 0) {
+        setLoadingShadcnComponents([])
+      }
+      loadingTimeoutRef.current = null
+    }, 5000) // 5 seconds should be enough for any remaining files
+  }, [loadingShadcnComponents])
+
+  return {
+    registryDependencies,
+    npmDependenciesOfRegistryDependencies,
+    loadingShadcnComponents,
+    loadDependencies,
+    resolveDependencies,
+    cleanupTimeouts,
+    resetDependencies,
+    setupSafetyTimeout,
+    setLoadingShadcnComponents,
+  }
+}
diff --git a/apps/web/components/features/studio/editor/hooks/use-dialog-state.ts b/apps/web/components/features/studio/editor/hooks/use-dialog-state.ts
new file mode 100644
index 00000000..a0c31333
--- /dev/null
+++ b/apps/web/components/features/studio/editor/hooks/use-dialog-state.ts
@@ -0,0 +1,36 @@
+import { useState, useCallback } from "react"
+
+/**
+ * Hook for managing dialog state in the editor
+ */
+export function useDialogState() {
+  // Dialog state
+  const [open, setOpen] = useState(false)
+  const [isProcessing, setIsProcessing] = useState(false)
+  const [isPublishing, setIsPublishing] = useState(false)
+
+  // Reset dialog state
+  const resetState = useCallback(() => {
+    setIsProcessing(false)
+    setIsPublishing(false)
+  }, [])
+
+  // Handle dialog open/close
+  const handleOpenChange = useCallback(
+    (isOpen: boolean) => {
+      setOpen(isOpen)
+      if (!isOpen) resetState()
+    },
+    [resetState],
+  )
+
+  return {
+    open,
+    isProcessing,
+    isPublishing,
+    setIsProcessing,
+    setIsPublishing,
+    handleOpenChange,
+    resetState,
+  }
+}
diff --git a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
index 24e350a8..efb889eb 100644
--- a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
@@ -1,316 +1,96 @@
-import { useState, useCallback, useMemo, useRef, useEffect } from "react"
-import { toast } from "sonner"
-import { useTheme } from "next-themes"
-import { generateSandpackFiles } from "../utils/sandpack-files"
-import { resolveRegistryDependencyTree } from "@/lib/queries.server"
-import { useClerkSupabaseClient } from "@/lib/clerk"
+import { useEffect } from "react"
 import {
   defaultGlobalCss as globalCss,
   defaultTailwindConfig as tailwindConfig,
 } from "@/lib/defaults"
-import {
-  lookupComponentsInDatabase,
-  convertComponentMatchesToDependencySlugs,
-} from "@/components/features/studio/editor/utils/component-lookup"
-import type { SandpackFiles } from "@codesandbox/sandpack-react"
+import { useDialogState } from "./use-dialog-state"
+import { useFileManagement, ActivePreview } from "./use-file-management"
+import { useDependencies } from "./use-dependencies"
+import { useComponentProcessing } from "./use-component-processing"
+import { useSandpackConfig } from "./use-sandpack-config"
 import { useCssCompiler } from "./use-css-compiler"
 
-// Create a file content cache that persists across component remounts
-const fileContentCache = new Map<string, string>()
-
-// Define a type for the active preview
-type ActivePreview = {
-  type: "regular" | "unknown"
-  filePath: string // The file path (always set)
-  componentName?: string // Only used for unknown components
-}
-
 interface UsePublishDialogProps {
   userId: string
 }
 
-// Define the generateStylesCss function up front so it can be used in the files useMemo
-const generateStylesCss = () => {
-  return globalCss
-}
-
 export function usePublishDialog({ userId }: UsePublishDialogProps) {
   // Dialog state
-  const [open, setOpen] = useState(false)
-  const [componentCode, setComponentCode] = useState("// Paste your code here")
-  const [processedData, setProcessedData] = useState<any>(null)
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [isPublishing, setIsPublishing] = useState(false)
-
-  // Unified active preview state
-  const [activePreview, setActivePreview] = useState<ActivePreview | null>(null)
+  const {
+    open,
+    isProcessing,
+    isPublishing,
+    setIsProcessing,
+    handleOpenChange,
+    resetState: resetDialogState,
+  } = useDialogState()
 
-  const [registryDependencies, setRegistryDependencies] = useState<
-    Record<string, { code: string; registry: string }>
-  >({})
-  const [
+  // File management
+  const {
+    componentCode,
+    activePreview,
+    actionRequiredFiles,
+    initialCompiledCss,
+    generateAppTsx,
+    setComponentCode: setComponentCodeWithCache,
+    getCachedFileContent,
+    handlePreviewSelect: handlePreviewSelectBase,
+    isUnresolvedDependency,
+    handleFileChange: handleFileChangeBase,
+    setInitialCompiledCss,
+    setActionRequiredFiles,
+    setActivePreview,
+    fileContentCache,
+  } = useFileManagement()
+
+  // Dependencies management
+  const {
+    registryDependencies,
     npmDependenciesOfRegistryDependencies,
-    setNpmDependenciesOfRegistryDependencies,
-  ] = useState<Record<string, string>>({})
-  const { resolvedTheme } = useTheme()
-  const isDarkTheme = resolvedTheme === "dark"
-  const supabase = useClerkSupabaseClient()
-
-  // Add new state to track loading components and config files
-  const [loadingShadcnComponents, setLoadingShadcnComponents] = useState<
-    string[]
-  >([])
-  // Add new state for tracking files that need action (style updates)
-  const [actionRequiredFiles, setActionRequiredFiles] = useState<string[]>([])
-
-  // Add ref to track the timeout ID for loading state
-  const loadingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-
-  // Add max timeout for safety
-  const maxLoadingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-
-  // We'll track our own initial compiledCss state directly in the files useMemo
-  const [initialCompiledCss, setInitialCompiledCss] = useState<string | null>(
-    null,
-  )
-
-  // Get component file path
-  const getComponentFilePath = useCallback(() => {
-    if (!processedData) return "/components/ui/component.tsx"
-
-    const registryType = processedData.registryType || "ui"
-    const fileName = processedData.slug
-      ? `${processedData.slug}.tsx`
-      : "component.tsx"
-    return `/components/${registryType}/${fileName}`
-  }, [processedData])
-
-  // Safety cleanup for loading state
-  useEffect(() => {
-    // Cleanup on unmount
-    return () => {
-      if (loadingTimeoutRef.current) {
-        clearTimeout(loadingTimeoutRef.current)
-      }
-      if (maxLoadingTimeoutRef.current) {
-        clearTimeout(maxLoadingTimeoutRef.current)
-      }
-    }
-  }, [])
-
-  // Helper function to generate a simple App.tsx that can handle demo files with both named and default exports
-  const generateAppTsx = () => {
-    console.log("[generateAppTsx] Generating App.tsx with demo import")
-    return `import React, { useState, useEffect } from 'react';
-import { ThemeProvider } from 'next-themes';
-import { RouterProvider } from 'next/router';
-import './styles.css';
-import DefaultExport, * as NamedExports from './demo';
-
-// Log what's available in the demo file for debugging
-console.log('Demo components loaded:', {
-  defaultExport: DefaultExport,
-  namedExports: Object.keys(NamedExports).filter(k => k !== 'default')
-});
-
-// Combine named exports and default export components
-const demoComponentNames = [
-  ...(DefaultExport && typeof DefaultExport === 'object' ? Object.keys(DefaultExport) : []),
-  ...Object.keys(NamedExports).filter(key => 
-    typeof NamedExports[key] === 'function' && key !== 'default'
-  )
-];
-
-console.log('Available demo component names:', demoComponentNames);
-
-const DemoComponents = {
-  ...(DefaultExport && typeof DefaultExport === 'object' ? DefaultExport : {}),
-  ...(typeof DefaultExport === 'function' ? { Demo: DefaultExport } : {}),
-  ...Object.fromEntries(
-    Object.entries(NamedExports).filter(([key, value]) => 
-      typeof value === 'function' && key !== 'default'
-    )
-  )
-};
-
-export default function App() {
-  const [currentIndex, setCurrentIndex] = useState(0);
-  
-  // Handle both object of components and direct function component export
-  const getComponent = () => {
-    if (demoComponentNames.length > 0) {
-      return DemoComponents[demoComponentNames[currentIndex]];
-    } else if (typeof DefaultExport === 'function') {
-      return DefaultExport;
-    } else {
-      return () => <div className="p-6 text-center">Add components to demo.tsx</div>;
-    }
-  };
-  
-  const CurrentComponent = getComponent();
-
-  useEffect(() => {
-    const handleKeyDown = (e) => {
-      if ((e.metaKey || e.ctrlKey) && demoComponentNames.length > 1) {
-        if (e.key === 'ArrowDown') {
-          e.preventDefault();
-          setCurrentIndex(prev => (prev + 1) % demoComponentNames.length);
-        } else if (e.key === 'ArrowUp') {
-          e.preventDefault();
-          setCurrentIndex(prev => (prev - 1 + demoComponentNames.length) % demoComponentNames.length);
-        }
-      }
-    };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, []);
-
-  return (
-    <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
-      <RouterProvider>
-        <div className="flex flex-col items-center justify-center min-h-screen p-4 bg-background text-foreground">
-          {demoComponentNames.length > 1 && (
-            <div className="self-end mb-4">
-              <select 
-                value={demoComponentNames[currentIndex]} 
-                onChange={(e) => {
-                  const idx = demoComponentNames.indexOf(e.target.value);
-                  if (idx !== -1) setCurrentIndex(idx);
-                }}
-                className="p-2 border rounded bg-background text-foreground"
-              >
-                {demoComponentNames.map(name => (
-                  <option key={name} value={name}>
-                    {name.replace(/([A-Z])/g, ' $1').trim()}
-                  </option>
-                ))}
-              </select>
-            </div>
-          )}
-          
-          <div className="flex items-center justify-center w-full">
-            <CurrentComponent />
-          </div>
-        </div>
-      </RouterProvider>
-    </ThemeProvider>
-  );
-}`
-  }
-
-  // Generate files for Sandpack
-  const files = useMemo(() => {
-    const componentPath = getComponentFilePath()
-
-    // Start with a fresh copy of all files
-    const allFiles: SandpackFiles = {}
-
-    // Add registry dependencies first
-    Object.entries(registryDependencies).forEach(([path, content]) => {
-      allFiles[path] = {
-        code: typeof content === "string" ? content : content.code,
-      }
-    })
-
-    // Generate base files
-    const generatedFiles = generateSandpackFiles({
-      componentPath,
-      componentCode,
-      processedData,
-      theme: isDarkTheme ? "dark" : "light",
-      dependencies: {
-        ...(processedData?.npmDependencies?.reduce(
-          (acc: Record<string, string>, dep: string) => ({
-            ...acc,
-            [dep]: "latest",
-          }),
-          {},
-        ) || {}),
-        ...npmDependenciesOfRegistryDependencies,
-      },
-    })
-
-    // Add all generated files
-    Object.entries(generatedFiles).forEach(([path, content]) => {
-      // Skip component.tsx if we have a processed slug
-      if (processedData?.slug && path === "/components/ui/component.tsx") {
-        return
-      }
-      allFiles[path] = content
-    })
-
-    // If we have a processed slug, ensure the component is at the correct path
-    if (processedData?.slug && generatedFiles["/components/ui/component.tsx"]) {
-      allFiles[componentPath] = generatedFiles["/components/ui/component.tsx"]
-    }
-
-    // Add empty demo.tsx file
-    allFiles["/demo.tsx"] = {
-      code: `// Add your demo code here
-import React from 'react';
-
-// This component will be recognized by the CSS compiler and styles will be generated
-export default function Demo() {
-  return (
-    <div className="p-4">
-      {/* Add your component demo here */}
-      <div className="border-2 border-dashed border-gray-200 p-6 rounded-lg text-center">
-        Edit this file to create your component demo
-      </div>
-    </div>
-  );
-}
-
-// You can also add named exports for multiple demos
-/*
-export function SecondDemo() {
-  return (
-    <div className="p-4 bg-muted rounded-lg">
-      Another demo component
-    </div>
-  );
-}
-*/
-`,
-    }
-
-    // Add any cached file content for unknown components
-    fileContentCache.forEach((cachedContent, cachedPath) => {
-      if (
-        processedData?.unresolvedDependencyImports?.some((comp: any) => {
-          const normalizedPath = comp.path.replace(/^@\//, "/")
-          return normalizedPath === cachedPath
-        })
-      ) {
-        console.log(
-          "[usePublishDialog] Restoring cached content for:",
-          cachedPath,
-        )
-        allFiles[cachedPath] = { code: cachedContent }
-      }
-    })
-
-    // Add a simple App.tsx that imports and renders demo.tsx
-    allFiles["/App.tsx"] = { code: generateAppTsx() }
-
-    // Add styles.css file with the compiled CSS from our hook
-    allFiles["/styles.css"] = {
-      code: initialCompiledCss || generateStylesCss(),
-    }
-
-    return allFiles
-  }, [
+    loadingShadcnComponents,
+    loadDependencies,
+    resolveDependencies,
+    cleanupTimeouts,
+    resetDependencies,
+    setupSafetyTimeout,
+    setLoadingShadcnComponents,
+  } = useDependencies()
+
+  // Component processing
+  const {
+    processedData,
     getComponentFilePath,
+    handleProcessComponent: processComponentBase,
+    setProcessedData,
+  } = useComponentProcessing({
+    userId,
+    cleanupTimeouts,
+    setIsProcessing,
+    setLoadingShadcnComponents,
+    setActionRequiredFiles,
+    handlePreviewSelect: (preview, files) =>
+      handlePreviewSelectBase(preview, files),
+    loadDependencies,
+    resolveDependencies,
+    setupSafetyTimeout,
+  })
+
+  // Sandpack configuration
+  const { files, sandpackConfig } = useSandpackConfig({
+    componentPath: getComponentFilePath(),
     componentCode,
     processedData,
-    npmDependenciesOfRegistryDependencies,
     registryDependencies,
-    activePreview?.filePath,
+    npmDependenciesOfRegistryDependencies,
+    activePreviewFilePath: activePreview?.filePath || null,
     initialCompiledCss,
-    generateStylesCss,
-  ])
+    generateStylesCss: () => globalCss,
+    generateAppTsx,
+    fileContentCache,
+    isProcessing,
+  })
 
-  // Use our CSS compiler hook
+  // CSS compiler
   const { compiledCss, forceRecompile } = useCssCompiler({
     componentCode,
     processedData,
@@ -327,500 +107,45 @@ export function SecondDemo() {
     if (compiledCss) {
       setInitialCompiledCss(compiledCss)
     }
-  }, [compiledCss])
-
-  // Reset dialog state
-  const resetState = useCallback(() => {
-    setComponentCode("")
-    setProcessedData(null)
-    setIsProcessing(false)
-    setIsPublishing(false)
-    setActivePreview(null)
-    setRegistryDependencies({})
-    setNpmDependenciesOfRegistryDependencies({})
-    setActionRequiredFiles([])
-  }, [])
-
-  // Handle dialog open/close
-  const handleOpenChange = useCallback(
-    (isOpen: boolean) => {
-      setOpen(isOpen)
-      if (!isOpen) resetState()
-    },
-    [resetState],
-  )
-
-  // Set the component code and also update cache
-  const setComponentCodeWithCache = useCallback(
-    (code: string, path?: string) => {
-      const filePath = path || activePreview?.filePath
-      setComponentCode(code)
-
-      // Store in cache if we have a valid path
-      if (filePath) {
-        console.log("[usePublishDialog] Caching file content:", {
-          path: filePath,
-          codeLength: code.length,
-        })
-        fileContentCache.set(filePath, code)
-      }
-    },
-    [activePreview?.filePath],
-  )
+  }, [compiledCss, setInitialCompiledCss])
 
-  // Helper function to get cached content
-  const getCachedFileContent = useCallback((path: string) => {
-    return fileContentCache.get(path)
-  }, [])
+  // Process component wrapper
+  const handleProcessComponent = () => {
+    if (!componentCode.trim()) return
 
-  // Unified handler for preview selection
-  const handlePreviewSelect = useCallback(
-    (newPreview: ActivePreview) => {
-      setActivePreview(newPreview)
+    // Store the current code to prevent it from being lost during processing
+    const currentCode = componentCode
 
-      // Always update component code for files
-      const fileContent = files[newPreview.filePath]
-
-      if (fileContent) {
-        const newCode =
-          typeof fileContent === "string" ? fileContent : fileContent.code
-
-        if (newCode) {
-          setComponentCode(newCode)
-        }
-      }
-    },
-    [files],
-  )
-
-  // Process component
-  const handleProcessComponent = async () => {
-    if (!componentCode.trim()) {
-      toast.error("Please enter component code")
-      return
-    }
-
-    // Clear any existing timeouts
-    if (loadingTimeoutRef.current) {
-      clearTimeout(loadingTimeoutRef.current)
-      loadingTimeoutRef.current = null
-    }
-
-    if (maxLoadingTimeoutRef.current) {
-      clearTimeout(maxLoadingTimeoutRef.current)
-      maxLoadingTimeoutRef.current = null
-    }
-
-    setIsProcessing(true)
-    setLoadingShadcnComponents([]) // Reset loading state at the start
-    setActionRequiredFiles([]) // Reset action required files
-
-    try {
-      const response = await fetch("/api/studio/preprocess-component", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ code: componentCode, userId }),
-      })
-
-      if (!response.ok) {
-        const errorData = await response.json()
-        throw new Error(errorData.error || "Failed to process component")
-      }
-
-      const data = await response.json()
-      console.log("Preprocess component response:", data)
-      // Check if the API indicates that style updates are needed
-      const styleUpdateFiles: string[] = []
-
-      // Check the additionalStyles property to determine if styles are needed
-      if (data.additionalStyles && data.additionalStyles.required) {
-        // Ensure the additionalStyles structure is correctly initialized
-        if (!data.additionalStyles.tailwindExtensions) {
-          data.additionalStyles.tailwindExtensions = {}
-        }
-
-        // Initialize all tailwind extension categories
-        const extensions = [
-          "colors",
-          "animations",
-          "fontFamily",
-          "borderRadius",
-          "boxShadow",
-          "spacing",
-        ]
-        extensions.forEach((ext) => {
-          if (!data.additionalStyles.tailwindExtensions[ext]) {
-            data.additionalStyles.tailwindExtensions[ext] = {}
-          }
-        })
-
-        if (!data.additionalStyles.cssVariables) {
-          data.additionalStyles.cssVariables = []
-        }
-
-        if (!data.additionalStyles.keyframes) {
-          data.additionalStyles.keyframes = []
-        }
-
-        if (!data.additionalStyles.utilities) {
-          data.additionalStyles.utilities = []
-        }
-
-        // Check for Tailwind extensions
-        if (
-          data.additionalStyles.tailwindExtensions &&
-          Object.entries(data.additionalStyles.tailwindExtensions).some(
-            ([_, val]: [string, any]) => Object.keys(val || {}).length > 0,
-          )
-        ) {
-          styleUpdateFiles.push("/tailwind.config.js")
-        }
-
-        // Check for CSS variables, keyframes or utilities
-        const hasGlobalCssUpdates =
-          (data.additionalStyles.cssVariables &&
-            data.additionalStyles.cssVariables.length > 0) ||
-          (data.additionalStyles.keyframes &&
-            data.additionalStyles.keyframes.length > 0) ||
-          (data.additionalStyles.utilities &&
-            data.additionalStyles.utilities.length > 0)
-
-        if (hasGlobalCssUpdates) {
-          styleUpdateFiles.push("/globals.css")
-        }
-
-        // If additionalStyles is required but no specific files were marked,
-        // default to highlighting both files if there are any non-empty style requirements
-        const hasActualStyleChanges =
-          // Check if there are actual tailwind extensions needed
-          Object.entries(data.additionalStyles.tailwindExtensions || {}).some(
-            ([_, val]: [string, any]) => Object.keys(val || {}).length > 0,
-          ) ||
-          // Check if there are CSS variables
-          (data.additionalStyles.cssVariables || []).length > 0 ||
-          // Check if there are keyframes
-          (data.additionalStyles.keyframes || []).length > 0 ||
-          // Check if there are utilities
-          (data.additionalStyles.utilities || []).length > 0
-
-        if (styleUpdateFiles.length === 0 && hasActualStyleChanges) {
-          styleUpdateFiles.push("/tailwind.config.js", "/globals.css")
-        } else if (styleUpdateFiles.length === 0 && !hasActualStyleChanges) {
-          // If required is true but there's nothing actually to add, this is a false positive
-          // so we should set it to false
-          data.additionalStyles.required = false
-        }
-
-        // Fix any undefined values in keyframes or utilities
-        if (data.additionalStyles.keyframes) {
-          data.additionalStyles.keyframes = data.additionalStyles.keyframes.map(
-            (keyframe: any) => {
-              // Standardize keyframe structure - ensure we always use 'name' and 'frames'
-              const name = keyframe.name || keyframe.keyframeName || ""
-              const frames = keyframe.frames || keyframe.definition || ""
-
-              if (!frames || frames === "undefined") {
-                // Provide a default example keyframe definition
-                return {
-                  name,
-                  frames:
-                    "0% { opacity: 0; transform: scale(0.95); }\n100% { opacity: 1; transform: scale(1); }",
-                }
-              }
-              return { name, frames }
-            },
-          )
-        }
-
-        if (data.additionalStyles.utilities) {
-          data.additionalStyles.utilities = data.additionalStyles.utilities.map(
-            (utility: any) => {
-              // Standardize utility structure - ensure we always use 'className' and 'definition'
-              const className = utility.className || utility.name || ""
-              const definition = utility.definition || utility.properties || ""
-
-              if (!definition || definition === "undefined") {
-                // Provide a default example utility definition
-                return {
-                  className,
-                  definition: "/* Add your custom styles here */",
-                }
-              }
-              return { className, definition }
-            },
-          )
-        }
-      }
-
-      if (styleUpdateFiles.length > 0) {
-        setActionRequiredFiles(styleUpdateFiles)
-      }
-
-      // Set loading state for shadcn components
-      const shadcnSlugs: string[] = []
-
-      if (data.shadcnComponentsImports?.length > 0) {
-        const loadingPaths = data.shadcnComponentsImports.map(
-          (component: { name: string }) => {
-            const path = `/components/ui/${component.name.toLowerCase()}.tsx`
-            shadcnSlugs.push(
-              `shadcn/${component.name.toLowerCase().replace(/\s+/g, "-")}`,
-            )
-            return path
-          },
-        )
-        setLoadingShadcnComponents(loadingPaths)
-      }
-
-      // Check for non-shadcn components in the database
-      const dbComponentSlugs: string[] = []
-
-      if (data.unresolvedDependencyImports?.length > 0) {
-        // Look up components in the database
-        const { lookupResults, remainingComponents } =
-          await lookupComponentsInDatabase(
-            supabase,
-            data.unresolvedDependencyImports,
-          )
-
-        // Update the processedData with found matches
-        if (lookupResults.length > 0) {
-          // Create loading paths for UI feedback
-          const dbLoadingPaths = lookupResults.map(
-            ({ match }) => `/components/${match.registry}/${match.slug}.tsx`,
-          )
-
-          // Add paths to loading state
-          setLoadingShadcnComponents((prev) => [...prev, ...dbLoadingPaths])
-
-          // Convert matches to dependency slugs for resolveRegistryDependencyTree
-          dbComponentSlugs.push(
-            ...convertComponentMatchesToDependencySlugs(lookupResults),
-          )
-        }
-
-        // Update processed data with the updated unresolved dependencies
-        data.unresolvedDependencyImports = remainingComponents
-      }
-
-      // Set processed data BEFORE setting active preview
-      setProcessedData(data)
-
-      // AFTER setting processed data, set the active preview
-      const newComponentPath = `/components/${data.registryType || "ui"}/${data.slug ? `${data.slug}.tsx` : "component.tsx"}`
-      handlePreviewSelect({
-        type: "regular",
-        filePath: newComponentPath,
-      })
-
-      // Combine both shadcn and database components into a single array
-      const allDependencySlugs = [...shadcnSlugs, ...dbComponentSlugs]
-
-      if (allDependencySlugs.length > 0) {
-        try {
-          // Create a mapping of dependency slugs to their file paths for tracking loading state
-          const slugToFilePaths: Record<string, string> = {}
-
-          // Map shadcn components
-          data.shadcnComponentsImports?.forEach(
-            (component: { name: string }) => {
-              const name = component.name.toLowerCase()
-              const slug = `shadcn/${name.replace(/\s+/g, "-")}`
-              const path = `/components/ui/${name}.tsx`
-              slugToFilePaths[slug] = path
-            },
-          )
-
-          // Map database components from earlier lookupResults
-          if (data.unresolvedDependencyImports?.length > 0) {
-            const { lookupResults: dbLookup } =
-              await lookupComponentsInDatabase(
-                supabase,
-                data.unresolvedDependencyImports,
-              )
-
-            dbLookup.forEach((result: any) => {
-              const { match } = result
-              const slug = `${match.registry}/${match.slug}`
-              const path = `/components/${match.registry}/${match.slug}.tsx`
-              slugToFilePaths[slug] = path
-            })
-          }
-
-          // Track which dependencies are loaded
-          const loadedDependencies = new Set<string>()
-
-          // Function to call when a dependency is loaded
-          const handleDependencyLoaded = (slug: string) => {
-            // When a dependency is resolved, remove it from the loading state
-            const path = slugToFilePaths[slug]
-            if (path) {
-              setLoadingShadcnComponents((prev) =>
-                prev.filter((filePath) => filePath !== path),
-              )
-              loadedDependencies.add(slug)
-            }
-          }
-
-          const result = await resolveRegistryDependencyTree({
-            supabase,
-            sourceDependencySlugs: allDependencySlugs,
-            withDemoDependencies: false,
-            withStyles: true, // Enable styles fetching
-          })
-
-          if (result.error) {
-            throw new Error(
-              `Failed to resolve dependencies: ${result.error.message}`,
-            )
-          }
-
-          if (!result.data) {
-            throw new Error("No data returned from dependency resolution")
-          }
-
-          // Process loaded dependencies directly since we've verified data exists
-          Object.keys(result.data.filesWithRegistry).forEach((path) => {
-            const slug = allDependencySlugs.find((s) => {
-              const basePath = path.split("/").pop()?.replace(".tsx", "") || ""
-              return s.includes(basePath)
-            })
-
-            if (slug && !loadedDependencies.has(slug)) {
-              handleDependencyLoaded(slug)
-            }
-
-            // Also check if this is a non-Shadcn component path that we need to remove from loading
-            const nonShadcnPath = path.startsWith("/components/") ? path : null
-            if (nonShadcnPath) {
-              setLoadingShadcnComponents((prev) =>
-                prev.filter((filePath) => filePath !== nonShadcnPath),
-              )
-            }
-          })
-
-          setRegistryDependencies(result.data.filesWithRegistry)
-          setNpmDependenciesOfRegistryDependencies(result.data.npmDependencies)
-        } catch (depError) {
-          console.error("Error resolving dependencies:", depError)
-          toast.error(
-            `Failed to resolve dependencies: ${depError instanceof Error ? depError.message : "Unknown error"}`,
-          )
-
-          // Clear component loading state on error
-          setLoadingShadcnComponents([])
-        }
-      }
-
-      toast.success("Component processed successfully")
-    } catch (error) {
-      toast.error(
-        `Processing failed: ${error instanceof Error ? error.message : "Unknown error"}`,
-      )
-      console.error("Error processing component:", error)
-      // Clear loading state immediately in case of main process error
-      setLoadingShadcnComponents([])
-      setActionRequiredFiles([])
-    } finally {
-      setIsProcessing(false)
-
-      // Set a final cleanup timer just to be safe (with a shorter timeout)
-      loadingTimeoutRef.current = setTimeout(() => {
-        if (loadingShadcnComponents.length > 0) {
-          setLoadingShadcnComponents([])
-        }
-        loadingTimeoutRef.current = null
-      }, 5000) // 5 seconds should be enough for any remaining files
-    }
+    // Process the component with the stored code
+    processComponentBase(currentCode)
   }
 
-  // Helper to check if a file is an unresolved dependency
-  const isUnresolvedDependency = useCallback(
-    (path: string) => {
-      return (
-        processedData?.unresolvedDependencyImports?.some(
-          (comp: any) => comp.path === path,
-        ) ?? false
-      )
-    },
-    [processedData],
-  )
-
-  // Sandpack configuration
-  const sandpackConfig = useMemo(() => {
-    return {
-      files,
-      options: {
-        activeFile:
-          activePreview?.type === "regular"
-            ? activePreview.filePath
-            : getComponentFilePath(),
-        visibleFiles: [
-          getComponentFilePath(),
-          "/components",
-          "/tailwind.config.js",
-          "/globals.css",
-          "/package.json",
-          ...Object.keys(registryDependencies),
-          // Add demo.tsx to visible files after processing is complete
-          ...(processedData && !isProcessing ? ["/demo.tsx"] : []),
-        ],
-        recompileMode: "delayed" as const,
-        recompileDelay: 300,
-      },
-      template: "react-ts" as const,
-      theme: isDarkTheme ? ("dark" as const) : ("light" as const),
-      customSetup: {
-        dependencies: {
-          ...(processedData?.npmDependencies?.reduce(
-            (acc: Record<string, string>, dep: string) => ({
-              ...acc,
-              [dep]: "latest",
-            }),
-            {},
-          ) || {}),
-          ...npmDependenciesOfRegistryDependencies,
-        },
-      },
+  // Preview selection wrapper with files
+  const handlePreviewSelect = (newPreview: ActivePreview) => {
+    // Make sure we have the file content before selecting
+    const fileContent = files[newPreview.filePath]
+    // Extract the code properly regardless of the type
+    const fileCode =
+      typeof fileContent === "string"
+        ? fileContent
+        : fileContent?.code || componentCode
+
+    // Create a files object with the current component code
+    const filesWithCode = {
+      ...files,
+      [newPreview.filePath]: { code: fileCode },
     }
-  }, [
-    files,
-    getComponentFilePath,
-    activePreview,
-    registryDependencies,
-    processedData?.npmDependencies,
-    npmDependenciesOfRegistryDependencies,
-    isDarkTheme,
-    processedData,
-    isProcessing,
-  ])
-
-  // Handle file changes from Sandpack editor
-  const handleFileChange = useCallback(
-    (path: string, fileContent: string) => {
-      console.log(
-        `[handleFileChange] File ${path} changed, updating files state`,
-      )
 
-      // If this is the demo file, make sure we update our files state
-      if (path === "/demo.tsx") {
-        console.log(
-          "[handleFileChange] Demo file changed, length:",
-          fileContent.length,
-        )
-
-        // Cache the changes
-        fileContentCache.set(path, fileContent)
+    handlePreviewSelectBase(newPreview, filesWithCode)
+  }
 
-        // Update the files object directly
-        files[path] = { code: fileContent }
+  // Handle file change wrapper
+  const handleFileChange = (path: string, fileContent: string) => {
+    // Create a files copy we can pass to the base handler
+    const filesCopy = { ...files }
 
-        // Force CSS recompilation to pick up the changes
-        forceRecompile()
-      }
-    },
-    [files, forceRecompile],
-  )
+    handleFileChangeBase(path, fileContent, filesCopy, forceRecompile)
+  }
 
   return {
     open,
@@ -838,7 +163,8 @@ export function SecondDemo() {
     getCachedFileContent,
     sandpackConfig,
     getComponentFilePath,
-    isUnresolvedDependency,
-    handleFileChange, // Export the handler for Sandpack component
+    isUnresolvedDependency: (path: string) =>
+      isUnresolvedDependency(path, processedData),
+    handleFileChange,
   }
 }
diff --git a/apps/web/components/features/studio/editor/hooks/use-file-management.ts b/apps/web/components/features/studio/editor/hooks/use-file-management.ts
new file mode 100644
index 00000000..b6264593
--- /dev/null
+++ b/apps/web/components/features/studio/editor/hooks/use-file-management.ts
@@ -0,0 +1,247 @@
+import { useState, useCallback, useMemo } from "react"
+
+// Create a file content cache that persists across component remounts
+const fileContentCache = new Map<string, string>()
+
+// Define a type for the active preview
+export type ActivePreview = {
+  type: "regular" | "unknown"
+  filePath: string // The file path (always set)
+  componentName?: string // Only used for unknown components
+}
+
+/**
+ * Hook for managing file content in the editor
+ */
+export function useFileManagement() {
+  const [componentCode, setComponentCode] = useState("// Paste your code here")
+  const [initialCompiledCss, setInitialCompiledCss] = useState<string | null>(
+    null,
+  )
+  const [activePreview, setActivePreview] = useState<ActivePreview | null>(null)
+  const [actionRequiredFiles, setActionRequiredFiles] = useState<string[]>([])
+
+  // Helper function to generate a simple App.tsx that can handle demo files with both named and default exports
+  const generateAppTsx = useCallback(() => {
+    console.log("[generateAppTsx] Generating App.tsx with demo import")
+    return `import React, { useState, useEffect } from 'react';
+import { ThemeProvider } from 'next-themes';
+import { RouterProvider } from 'next/router';
+import './styles.css';
+import DefaultExport, * as NamedExports from './demo';
+
+// Log what's available in the demo file for debugging
+console.log('Demo components loaded:', {
+  defaultExport: DefaultExport,
+  namedExports: Object.keys(NamedExports).filter(k => k !== 'default')
+});
+
+// Combine named exports and default export components
+const demoComponentNames = [
+  ...(DefaultExport && typeof DefaultExport === 'object' ? Object.keys(DefaultExport) : []),
+  ...Object.keys(NamedExports).filter(key => 
+    typeof NamedExports[key] === 'function' && key !== 'default'
+  )
+];
+
+console.log('Available demo component names:', demoComponentNames);
+
+const DemoComponents = {
+  ...(DefaultExport && typeof DefaultExport === 'object' ? DefaultExport : {}),
+  ...(typeof DefaultExport === 'function' ? { Demo: DefaultExport } : {}),
+  ...Object.fromEntries(
+    Object.entries(NamedExports).filter(([key, value]) => 
+      typeof value === 'function' && key !== 'default'
+    )
+  )
+};
+
+export default function App() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  
+  // Handle both object of components and direct function component export
+  const getComponent = () => {
+    if (demoComponentNames.length > 0) {
+      return DemoComponents[demoComponentNames[currentIndex]];
+    } else if (typeof DefaultExport === 'function') {
+      return DefaultExport;
+    } else {
+      return () => <div className="p-6 text-center">Add components to demo.tsx</div>;
+    }
+  };
+  
+  const CurrentComponent = getComponent();
+
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if ((e.metaKey || e.ctrlKey) && demoComponentNames.length > 1) {
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          setCurrentIndex(prev => (prev + 1) % demoComponentNames.length);
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          setCurrentIndex(prev => (prev - 1 + demoComponentNames.length) % demoComponentNames.length);
+        }
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  return (
+    <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
+      <RouterProvider>
+        <div className="flex flex-col items-center justify-center min-h-screen p-4 bg-background text-foreground">
+          {demoComponentNames.length > 1 && (
+            <div className="self-end mb-4">
+              <select 
+                value={demoComponentNames[currentIndex]} 
+                onChange={(e) => {
+                  const idx = demoComponentNames.indexOf(e.target.value);
+                  if (idx !== -1) setCurrentIndex(idx);
+                }}
+                className="p-2 border rounded bg-background text-foreground"
+              >
+                {demoComponentNames.map(name => (
+                  <option key={name} value={name}>
+                    {name.replace(/([A-Z])/g, ' $1').trim()}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+          
+          <div className="flex items-center justify-center w-full">
+            <CurrentComponent />
+          </div>
+        </div>
+      </RouterProvider>
+    </ThemeProvider>
+  );
+}`
+  }, [])
+
+  // Set the component code and also update cache
+  const setComponentCodeWithCache = useCallback(
+    (code: string, path?: string) => {
+      const filePath = path || activePreview?.filePath
+      setComponentCode(code)
+
+      // Store in cache if we have a valid path
+      if (filePath) {
+        console.log("[useFileManagement] Caching file content:", {
+          path: filePath,
+          codeLength: code.length,
+        })
+        fileContentCache.set(filePath, code)
+      }
+    },
+    [activePreview?.filePath],
+  )
+
+  // Helper function to get cached content
+  const getCachedFileContent = useCallback((path: string) => {
+    return fileContentCache.get(path)
+  }, [])
+
+  // Unified handler for preview selection
+  const handlePreviewSelect = useCallback(
+    (newPreview: ActivePreview, files: Record<string, any>) => {
+      // First check if this is the same as the current preview to avoid unnecessary updates
+      if (
+        activePreview?.filePath === newPreview.filePath &&
+        activePreview.type === newPreview.type
+      ) {
+        return
+      }
+
+      // Get the file content before changing the active preview
+      const fileContent = files[newPreview.filePath]
+      const newCode = fileContent
+        ? typeof fileContent === "string"
+          ? fileContent
+          : fileContent.code
+        : null
+
+      // Set the active preview
+      setActivePreview(newPreview)
+
+      // If we have valid code, update the component code
+      if (newCode) {
+        console.log(
+          `[handlePreviewSelect] Updating component code for path: ${newPreview.filePath}`,
+        )
+        setComponentCode(newCode)
+
+        // Also update the cache
+        fileContentCache.set(newPreview.filePath, newCode)
+      } else {
+        console.warn(
+          `[handlePreviewSelect] No content found for path: ${newPreview.filePath}`,
+        )
+      }
+    },
+    [activePreview, setComponentCode],
+  )
+
+  // Helper to check if a file is an unresolved dependency
+  const isUnresolvedDependency = useCallback(
+    (path: string, processedData: any) => {
+      return (
+        processedData?.unresolvedDependencyImports?.some(
+          (comp: any) => comp.path === path,
+        ) ?? false
+      )
+    },
+    [],
+  )
+
+  // Handle file changes from Sandpack editor
+  const handleFileChange = useCallback(
+    (
+      path: string,
+      fileContent: string,
+      files: Record<string, any>,
+      forceRecompile: () => void,
+    ) => {
+      console.log(
+        `[handleFileChange] File ${path} changed, updating files state`,
+      )
+
+      // If this is the demo file, make sure we update our files state
+      if (path === "/demo.tsx") {
+        console.log(
+          "[handleFileChange] Demo file changed, length:",
+          fileContent.length,
+        )
+
+        // Cache the changes
+        fileContentCache.set(path, fileContent)
+
+        // Update the files object directly
+        files[path] = { code: fileContent }
+
+        // Force CSS recompilation to pick up the changes
+        forceRecompile()
+      }
+    },
+    [],
+  )
+
+  return {
+    componentCode,
+    activePreview,
+    actionRequiredFiles,
+    initialCompiledCss,
+    generateAppTsx,
+    setComponentCode: setComponentCodeWithCache,
+    getCachedFileContent,
+    handlePreviewSelect,
+    isUnresolvedDependency,
+    handleFileChange,
+    setInitialCompiledCss,
+    setActionRequiredFiles,
+    setActivePreview,
+    fileContentCache,
+  }
+}
diff --git a/apps/web/components/features/studio/editor/hooks/use-sandpack-config.ts b/apps/web/components/features/studio/editor/hooks/use-sandpack-config.ts
new file mode 100644
index 00000000..41e7b65d
--- /dev/null
+++ b/apps/web/components/features/studio/editor/hooks/use-sandpack-config.ts
@@ -0,0 +1,202 @@
+import { useMemo } from "react"
+import { useTheme } from "next-themes"
+import type { SandpackFiles } from "@codesandbox/sandpack-react"
+import { generateSandpackFiles } from "../utils/sandpack-files"
+
+interface UseSandpackConfigProps {
+  componentPath: string
+  componentCode: string
+  processedData: any | null
+  registryDependencies: Record<string, { code: string; registry: string }>
+  npmDependenciesOfRegistryDependencies: Record<string, string>
+  activePreviewFilePath: string | null
+  initialCompiledCss: string | null
+  generateStylesCss: () => string
+  generateAppTsx: () => string
+  fileContentCache: Map<string, string>
+  isProcessing: boolean
+}
+
+/**
+ * Hook for generating and managing Sandpack configuration
+ */
+export function useSandpackConfig({
+  componentPath,
+  componentCode,
+  processedData,
+  registryDependencies,
+  npmDependenciesOfRegistryDependencies,
+  activePreviewFilePath,
+  initialCompiledCss,
+  generateStylesCss,
+  generateAppTsx,
+  fileContentCache,
+  isProcessing,
+}: UseSandpackConfigProps) {
+  const { resolvedTheme } = useTheme()
+  const isDarkTheme = resolvedTheme === "dark"
+
+  // Generate files for Sandpack
+  const files = useMemo(() => {
+    // Start with a fresh copy of all files
+    const allFiles: SandpackFiles = {}
+
+    // Add registry dependencies first
+    Object.entries(registryDependencies).forEach(([path, content]) => {
+      allFiles[path] = {
+        code: typeof content === "string" ? content : content.code,
+      }
+    })
+
+    // Generate base files
+    const generatedFiles = generateSandpackFiles({
+      componentPath,
+      componentCode,
+      processedData,
+      theme: isDarkTheme ? "dark" : "light",
+      dependencies: {
+        ...(processedData?.npmDependencies?.reduce(
+          (acc: Record<string, string>, dep: string) => ({
+            ...acc,
+            [dep]: "latest",
+          }),
+          {},
+        ) || {}),
+        ...npmDependenciesOfRegistryDependencies,
+      },
+    })
+
+    // Add all generated files
+    Object.entries(generatedFiles).forEach(([path, content]) => {
+      // Skip component.tsx if we have a processed slug
+      if (processedData?.slug && path === "/components/ui/component.tsx") {
+        return
+      }
+      allFiles[path] = content
+    })
+
+    // If we have a processed slug, ensure the component is at the correct path
+    if (processedData?.slug && generatedFiles["/components/ui/component.tsx"]) {
+      allFiles[componentPath] = generatedFiles["/components/ui/component.tsx"]
+    }
+
+    // Add empty demo.tsx file
+    allFiles["/demo.tsx"] = {
+      code: `// Add your demo code here
+import React from 'react';
+
+// This component will be recognized by the CSS compiler and styles will be generated
+export default function Demo() {
+  return (
+    <div className="p-4">
+      {/* Add your component demo here */}
+      <div className="border-2 border-dashed border-gray-200 p-6 rounded-lg text-center">
+        Edit this file to create your component demo
+      </div>
+    </div>
+  );
+}
+
+// You can also add named exports for multiple demos
+/*
+export function SecondDemo() {
+  return (
+    <div className="p-4 bg-muted rounded-lg">
+      Another demo component
+    </div>
+  );
+}
+*/
+`,
+    }
+
+    // Add any cached file content for unknown components
+    fileContentCache.forEach((cachedContent, cachedPath) => {
+      if (
+        processedData?.unresolvedDependencyImports?.some((comp: any) => {
+          const normalizedPath = comp.path.replace(/^@\//, "/")
+          return normalizedPath === cachedPath
+        })
+      ) {
+        console.log(
+          "[useSandpackConfig] Restoring cached content for:",
+          cachedPath,
+        )
+        allFiles[cachedPath] = { code: cachedContent }
+      }
+    })
+
+    // Add a simple App.tsx that imports and renders demo.tsx
+    allFiles["/App.tsx"] = { code: generateAppTsx() }
+
+    // Add styles.css file with the compiled CSS from our hook
+    allFiles["/styles.css"] = {
+      code: initialCompiledCss || generateStylesCss(),
+    }
+
+    return allFiles
+  }, [
+    componentPath,
+    componentCode,
+    processedData,
+    npmDependenciesOfRegistryDependencies,
+    registryDependencies,
+    activePreviewFilePath,
+    initialCompiledCss,
+    generateStylesCss,
+    generateAppTsx,
+    fileContentCache,
+    isDarkTheme,
+  ])
+
+  // Sandpack configuration
+  const sandpackConfig = useMemo(() => {
+    return {
+      files,
+      options: {
+        activeFile: activePreviewFilePath || componentPath,
+        visibleFiles: [
+          componentPath,
+          "/components",
+          "/tailwind.config.js",
+          "/globals.css",
+          "/package.json",
+          ...Object.keys(registryDependencies),
+          // Add demo.tsx to visible files after processing is complete
+          ...(processedData && !isProcessing ? ["/demo.tsx"] : []),
+        ],
+        recompileMode: "delayed" as const,
+        recompileDelay: 300,
+      },
+      template: "react-ts" as const,
+      theme: isDarkTheme ? ("dark" as const) : ("light" as const),
+      customSetup: {
+        dependencies: {
+          ...(processedData?.npmDependencies?.reduce(
+            (acc: Record<string, string>, dep: string) => ({
+              ...acc,
+              [dep]: "latest",
+            }),
+            {},
+          ) || {}),
+          ...npmDependenciesOfRegistryDependencies,
+        },
+      },
+    }
+  }, [
+    files,
+    componentPath,
+    activePreviewFilePath,
+    registryDependencies,
+    processedData?.npmDependencies,
+    npmDependenciesOfRegistryDependencies,
+    isDarkTheme,
+    processedData,
+    isProcessing,
+  ])
+
+  return {
+    files,
+    sandpackConfig,
+  }
+}

From 16d7836181d538af58076c9fe40274d5460db45b Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Mon, 7 Apr 2025 21:44:01 +0300
Subject: [PATCH 056/143] refactor: hooks

---
 .../editor/hooks/use-component-processing.ts  | 14 +----
 .../studio/editor/hooks/use-dependencies.ts   | 58 ++++++-------------
 .../studio/editor/hooks/use-editor-dialog.ts  |  6 --
 .../editor/hooks/use-file-management.ts       |  3 +-
 4 files changed, 21 insertions(+), 60 deletions(-)

diff --git a/apps/web/components/features/studio/editor/hooks/use-component-processing.ts b/apps/web/components/features/studio/editor/hooks/use-component-processing.ts
index 26ade74a..04de5a6b 100644
--- a/apps/web/components/features/studio/editor/hooks/use-component-processing.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-component-processing.ts
@@ -4,7 +4,6 @@ import { ActivePreview } from "./use-file-management"
 
 interface UseComponentProcessingProps {
   userId: string
-  cleanupTimeouts: () => void
   setIsProcessing: (isProcessing: boolean) => void
   setLoadingShadcnComponents: (components: string[]) => void
   setActionRequiredFiles: (files: string[]) => void
@@ -21,7 +20,6 @@ interface UseComponentProcessingProps {
     dependencySlugs: string[],
     loadingPaths: string[],
   ) => Promise<boolean | undefined>
-  setupSafetyTimeout: () => void
 }
 
 /**
@@ -29,14 +27,12 @@ interface UseComponentProcessingProps {
  */
 export function useComponentProcessing({
   userId,
-  cleanupTimeouts,
   setIsProcessing,
   setLoadingShadcnComponents,
   setActionRequiredFiles,
   handlePreviewSelect,
   loadDependencies,
   resolveDependencies,
-  setupSafetyTimeout,
 }: UseComponentProcessingProps) {
   const [processedData, setProcessedData] = useState<any>(null)
 
@@ -59,8 +55,8 @@ export function useComponentProcessing({
         return
       }
 
-      // Clear any existing timeouts
-      cleanupTimeouts()
+      // Clear any existing timeouts is no longer needed
+      // cleanupTimeouts()
 
       setIsProcessing(true)
       setLoadingShadcnComponents([]) // Reset loading state at the start
@@ -249,23 +245,19 @@ export function useComponentProcessing({
         console.error("Error processing component:", error)
         // Clear loading state immediately in case of main process error
         setLoadingShadcnComponents([])
-        setActionRequiredFiles([])
       } finally {
         setIsProcessing(false)
-        // Set a safety timeout for clearing loading state
-        setupSafetyTimeout()
+        // Safety timeout for clearing loading state is no longer needed
       }
     },
     [
       userId,
-      cleanupTimeouts,
       setIsProcessing,
       setLoadingShadcnComponents,
       setActionRequiredFiles,
       handlePreviewSelect,
       loadDependencies,
       resolveDependencies,
-      setupSafetyTimeout,
     ],
   )
 
diff --git a/apps/web/components/features/studio/editor/hooks/use-dependencies.ts b/apps/web/components/features/studio/editor/hooks/use-dependencies.ts
index 000587ef..605c4339 100644
--- a/apps/web/components/features/studio/editor/hooks/use-dependencies.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-dependencies.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef } from "react"
+import { useState, useCallback } from "react"
 import { useClerkSupabaseClient } from "@/lib/clerk"
 import { toast } from "sonner"
 import { resolveRegistryDependencyTree } from "@/lib/queries.server"
@@ -23,31 +23,14 @@ export function useDependencies() {
     string[]
   >([])
 
-  // Add ref to track the timeout ID for loading state
-  const loadingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-  // Add max timeout for safety
-  const maxLoadingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
   const supabase = useClerkSupabaseClient()
 
-  // Cleanup function for timeouts
-  const cleanupTimeouts = useCallback(() => {
-    if (loadingTimeoutRef.current) {
-      clearTimeout(loadingTimeoutRef.current)
-      loadingTimeoutRef.current = null
-    }
-    if (maxLoadingTimeoutRef.current) {
-      clearTimeout(maxLoadingTimeoutRef.current)
-      maxLoadingTimeoutRef.current = null
-    }
-  }, [])
-
   // Reset dependencies state
   const resetDependencies = useCallback(() => {
     setRegistryDependencies({})
     setNpmDependenciesOfRegistryDependencies({})
     setLoadingShadcnComponents([])
-    cleanupTimeouts()
-  }, [cleanupTimeouts])
+  }, [])
 
   // Load dependencies for a component
   const loadDependencies = useCallback(
@@ -72,8 +55,8 @@ export function useDependencies() {
       }
 
       // Check for non-shadcn components in the database
-      const dbComponentSlugs: string[] = []
-      let dbLoadingPaths: string[] = []
+      const unresolvedComponentSlugs: string[] = []
+      let unresolvedLoadingPaths: string[] = []
 
       if (processedData?.unresolvedDependencyImports?.length > 0) {
         try {
@@ -87,15 +70,18 @@ export function useDependencies() {
           // Update the processedData with found matches
           if (lookupResults.length > 0) {
             // Create loading paths for UI feedback
-            dbLoadingPaths = lookupResults.map(
+            unresolvedLoadingPaths = lookupResults.map(
               ({ match }) => `/components/${match.registry}/${match.slug}.tsx`,
             )
 
             // Add paths to loading state
-            setLoadingShadcnComponents((prev) => [...prev, ...dbLoadingPaths])
+            setLoadingShadcnComponents((prev) => [
+              ...prev,
+              ...unresolvedLoadingPaths,
+            ])
 
             // Convert matches to dependency slugs for resolveRegistryDependencyTree
-            dbComponentSlugs.push(
+            unresolvedComponentSlugs.push(
               ...convertComponentMatchesToDependencySlugs(lookupResults),
             )
           }
@@ -103,8 +89,11 @@ export function useDependencies() {
           // Return the updated unresolved dependencies
           return {
             remainingComponents,
-            updatedLoadingPaths: [...shadcnLoadingPaths, ...dbLoadingPaths],
-            allDependencySlugs: [...shadcnSlugs, ...dbComponentSlugs],
+            updatedLoadingPaths: [
+              ...shadcnLoadingPaths,
+              ...unresolvedLoadingPaths,
+            ],
+            allDependencySlugs: [...shadcnSlugs, ...unresolvedComponentSlugs],
           }
         } catch (error) {
           console.error("Error looking up components:", error)
@@ -121,8 +110,8 @@ export function useDependencies() {
 
       return {
         remainingComponents: processedData.unresolvedDependencyImports,
-        updatedLoadingPaths: [...shadcnLoadingPaths, ...dbLoadingPaths],
-        allDependencySlugs: [...shadcnSlugs, ...dbComponentSlugs],
+        updatedLoadingPaths: [...shadcnLoadingPaths, ...unresolvedLoadingPaths],
+        allDependencySlugs: [...shadcnSlugs, ...unresolvedComponentSlugs],
       }
     },
     [supabase],
@@ -217,26 +206,13 @@ export function useDependencies() {
     [supabase],
   )
 
-  // Safety cleanup for loading state
-  const setupSafetyTimeout = useCallback(() => {
-    // Set a final cleanup timer just to be safe (with a shorter timeout)
-    loadingTimeoutRef.current = setTimeout(() => {
-      if (loadingShadcnComponents.length > 0) {
-        setLoadingShadcnComponents([])
-      }
-      loadingTimeoutRef.current = null
-    }, 5000) // 5 seconds should be enough for any remaining files
-  }, [loadingShadcnComponents])
-
   return {
     registryDependencies,
     npmDependenciesOfRegistryDependencies,
     loadingShadcnComponents,
     loadDependencies,
     resolveDependencies,
-    cleanupTimeouts,
     resetDependencies,
-    setupSafetyTimeout,
     setLoadingShadcnComponents,
   }
 }
diff --git a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
index efb889eb..1743130a 100644
--- a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
@@ -22,7 +22,6 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     isPublishing,
     setIsProcessing,
     handleOpenChange,
-    resetState: resetDialogState,
   } = useDialogState()
 
   // File management
@@ -39,7 +38,6 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     handleFileChange: handleFileChangeBase,
     setInitialCompiledCss,
     setActionRequiredFiles,
-    setActivePreview,
     fileContentCache,
   } = useFileManagement()
 
@@ -50,9 +48,7 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     loadingShadcnComponents,
     loadDependencies,
     resolveDependencies,
-    cleanupTimeouts,
     resetDependencies,
-    setupSafetyTimeout,
     setLoadingShadcnComponents,
   } = useDependencies()
 
@@ -64,7 +60,6 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     setProcessedData,
   } = useComponentProcessing({
     userId,
-    cleanupTimeouts,
     setIsProcessing,
     setLoadingShadcnComponents,
     setActionRequiredFiles,
@@ -72,7 +67,6 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
       handlePreviewSelectBase(preview, files),
     loadDependencies,
     resolveDependencies,
-    setupSafetyTimeout,
   })
 
   // Sandpack configuration
diff --git a/apps/web/components/features/studio/editor/hooks/use-file-management.ts b/apps/web/components/features/studio/editor/hooks/use-file-management.ts
index b6264593..2ce0f7f0 100644
--- a/apps/web/components/features/studio/editor/hooks/use-file-management.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-file-management.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo } from "react"
+import { useState, useCallback } from "react"
 
 // Create a file content cache that persists across component remounts
 const fileContentCache = new Map<string, string>()
@@ -241,7 +241,6 @@ export default function App() {
     handleFileChange,
     setInitialCompiledCss,
     setActionRequiredFiles,
-    setActivePreview,
     fileContentCache,
   }
 }

From 54286059463101d44aba27cdc1e2a7b7cbc948ed Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Mon, 7 Apr 2025 21:47:04 +0300
Subject: [PATCH 057/143] refactor: use-dependencies

---
 .../studio/editor/hooks/use-dependencies.ts         | 13 ++++++++-----
 .../studio/editor/hooks/use-editor-dialog.ts        |  1 -
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/apps/web/components/features/studio/editor/hooks/use-dependencies.ts b/apps/web/components/features/studio/editor/hooks/use-dependencies.ts
index 605c4339..14f95be7 100644
--- a/apps/web/components/features/studio/editor/hooks/use-dependencies.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-dependencies.ts
@@ -56,7 +56,7 @@ export function useDependencies() {
 
       // Check for non-shadcn components in the database
       const unresolvedComponentSlugs: string[] = []
-      let unresolvedLoadingPaths: string[] = []
+      let resolvedDependencyPaths: string[] = []
 
       if (processedData?.unresolvedDependencyImports?.length > 0) {
         try {
@@ -70,14 +70,14 @@ export function useDependencies() {
           // Update the processedData with found matches
           if (lookupResults.length > 0) {
             // Create loading paths for UI feedback
-            unresolvedLoadingPaths = lookupResults.map(
+            resolvedDependencyPaths = lookupResults.map(
               ({ match }) => `/components/${match.registry}/${match.slug}.tsx`,
             )
 
             // Add paths to loading state
             setLoadingShadcnComponents((prev) => [
               ...prev,
-              ...unresolvedLoadingPaths,
+              ...resolvedDependencyPaths,
             ])
 
             // Convert matches to dependency slugs for resolveRegistryDependencyTree
@@ -91,7 +91,7 @@ export function useDependencies() {
             remainingComponents,
             updatedLoadingPaths: [
               ...shadcnLoadingPaths,
-              ...unresolvedLoadingPaths,
+              ...resolvedDependencyPaths,
             ],
             allDependencySlugs: [...shadcnSlugs, ...unresolvedComponentSlugs],
           }
@@ -110,7 +110,10 @@ export function useDependencies() {
 
       return {
         remainingComponents: processedData.unresolvedDependencyImports,
-        updatedLoadingPaths: [...shadcnLoadingPaths, ...unresolvedLoadingPaths],
+        updatedLoadingPaths: [
+          ...shadcnLoadingPaths,
+          ...resolvedDependencyPaths,
+        ],
         allDependencySlugs: [...shadcnSlugs, ...unresolvedComponentSlugs],
       }
     },
diff --git a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
index 1743130a..6bd2f694 100644
--- a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
@@ -48,7 +48,6 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     loadingShadcnComponents,
     loadDependencies,
     resolveDependencies,
-    resetDependencies,
     setLoadingShadcnComponents,
   } = useDependencies()
 

From 6e3837768c69aa8df250bbabed79181d07b11089 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Mon, 7 Apr 2025 22:23:27 +0300
Subject: [PATCH 058/143] refactor: use compiler

---
 .../studio/editor/hooks/use-css-compiler.ts   | 354 +++++++-----------
 .../studio/editor/hooks/use-editor-dialog.ts  |   8 +-
 2 files changed, 135 insertions(+), 227 deletions(-)

diff --git a/apps/web/components/features/studio/editor/hooks/use-css-compiler.ts b/apps/web/components/features/studio/editor/hooks/use-css-compiler.ts
index fa3d404e..0411386b 100644
--- a/apps/web/components/features/studio/editor/hooks/use-css-compiler.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-css-compiler.ts
@@ -2,6 +2,7 @@ import { useState, useCallback, useEffect, useRef } from "react"
 import { toast } from "sonner"
 import { defaultGlobalCss, defaultTailwindConfig } from "@/lib/defaults"
 import type { SandpackFiles } from "@codesandbox/sandpack-react"
+import { useSandpack } from "@codesandbox/sandpack-react"
 
 interface UseCssCompilerProps {
   componentCode: string
@@ -34,88 +35,80 @@ export function useCssCompiler({
 
   // Refs for tracking and debouncing
   const cssCompileTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-  const prevFilesHashRef = useRef<string>("")
   const lastCompilationTimeRef = useRef<number>(0)
-
-  // Store the last demo content to track changes specifically to this file
   const lastDemoContentRef = useRef<string>("")
 
+  // Get Sandpack context - may be undefined if outside Sandpack provider
+  let sandpack: any = null
+  try {
+    sandpack = useSandpack().sandpack
+  } catch (error) {
+    // Outside of SandpackProvider context, continue without Sandpack features
+  }
+
   // Helper function to generate basic styles.css as fallback
   const generateStylesCss = useCallback(() => {
     return defaultGlobalCss
   }, [])
 
-  // Helper function to generate a hash of all key file contents
-  const generateFilesHash = useCallback(() => {
-    // Always include the demo file as a key file for change detection
-    const keyFiles = [
-      "/demo.tsx", // Ensure demo file is at the beginning for priority
-      getComponentFilePath(),
-      "/styles.css",
-      "/tailwind.config.js",
-    ]
-
-    console.log(
-      "[generateFilesHash] Checking for changes in:",
-      keyFiles.join(", "),
-    )
-
-    // Get the current demo content for separate tracking
-    const demoFile = files["/demo.tsx"]
-    const currentDemoContent =
-      typeof demoFile === "string" ? demoFile : demoFile?.code || ""
+  // Update styles.css file using BOTH methods - direct files update and Sandpack API
+  const updateStylesFile = useCallback(
+    (css: string) => {
+      if (!css) return false
 
-    // Check specifically for demo changes
-    const demoChanged = currentDemoContent !== lastDemoContentRef.current
-    if (demoChanged) {
       console.log(
-        "[generateFilesHash] Demo content changed! Forcing recompilation",
+        "[useCssCompiler] Updating styles.css file, content length:",
+        css.length,
       )
-    }
 
-    // Collect content of key files
-    const contents = keyFiles
-      .map((path) => {
-        const file = files[path]
-        const fileContent = typeof file === "string" ? file : file?.code || ""
-
-        // Log each file's content length for debugging
-        if (path === "/demo.tsx") {
-          console.log(
-            "[generateFilesHash] Demo file content length:",
-            fileContent.length,
-          )
-          // Store current demo content for future comparison
-          lastDemoContentRef.current = fileContent
+      // Method 1: Direct update to files object
+      if (files) {
+        if (typeof files["/styles.css"] === "string") {
+          files["/styles.css"] = css
+        } else {
+          files["/styles.css"] = { code: css }
         }
+      }
 
-        return `${path}:${fileContent.length}:${fileContent.substring(0, 50)}`
-      })
-      .join("|")
+      // Method 2: Using Sandpack API if available
+      if (sandpack) {
+        try {
+          console.log("[useCssCompiler] Updating styles.css via Sandpack API")
+          sandpack.updateFile("/styles.css", css)
+        } catch (error) {
+          console.error(
+            "[useCssCompiler] Error updating file via Sandpack:",
+            error,
+          )
+        }
+      }
 
-    // If demo changed, add a timestamp to force hash change
-    return demoChanged ? contents + "|demoChanged:" + Date.now() : contents
-  }, [files, getComponentFilePath])
+      return true
+    },
+    [files, sandpack],
+  )
 
   // The main CSS compilation function
   const compileCSS = useCallback(async () => {
     if (!componentCode || !processedData) {
-      console.log("[compileCSS] Skipping - no component code or processed data")
+      console.log("[compileCSS] Missing component code or processed data")
       return
     }
 
     if (isCssCompiling) {
-      console.log("[compileCSS] Skipping - compilation already in progress")
+      console.log("[compileCSS] Compilation already in progress")
       return
     }
 
-    setIsCssCompiling(true)
     console.log("[compileCSS] Starting CSS compilation")
+    setIsCssCompiling(true)
 
-    // Always initialize with the default CSS
+    // Set default CSS as fallback
     const defaultCss = generateStylesCss()
     setCompiledCss(defaultCss)
-    console.log("[compileCSS] Set default CSS fallback")
+
+    // Apply default CSS to styles.css right away
+    updateStylesFile(defaultCss)
 
     // Check if backend URL is available
     const backendUrl = process.env.NEXT_PUBLIC_COMPILE_CSS_URL
@@ -125,70 +118,45 @@ export function useCssCompiler({
       return
     }
 
-    console.log("[compileCSS] Backend URL:", backendUrl)
-
     try {
-      // Get the component path based on processed data
+      // Get component path
       const componentPath = getComponentFilePath()
-      console.log("[compileCSS] Component path:", componentPath)
-
-      // Extract all registry dependencies correctly (matching preview.tsx format)
-      const registryDependenciesArray = Object.entries(
-        registryDependencies || {},
-      ).map(([_, item]) => (typeof item === "string" ? item : item.code))
-      console.log(
-        "[compileCSS] Registry dependencies count:",
-        registryDependenciesArray.length,
-      )
 
-      // Get demo code directly - ensure it's included separately
+      // Get demo code
       const demoFile = files["/demo.tsx"]
       const demoCode =
         typeof demoFile === "string" ? demoFile : demoFile?.code || ""
+
       console.log("[compileCSS] Demo code length:", demoCode.length)
-      console.log(
-        "[compileCSS] Demo code preview:",
-        demoCode.substring(0, 100) + "...",
-      )
 
-      // Generate shell code exactly like preview.tsx does - make sure we include everything
+      // Extract registry dependencies
+      const registryDependenciesArray = Object.entries(
+        registryDependencies || {},
+      ).map(([_, item]) => (typeof item === "string" ? item : item.code))
+
+      // Generate shell code from all JS/TS files
       const shellCode = Object.entries(files)
         .filter(([key]) => /\.(tsx|jsx|ts|js)$/.test(key))
-        .map(([key, value]) => {
-          console.log("[compileCSS] Including file:", key)
-          return typeof value === "string" ? value : value.code
-        })
-      console.log("[compileCSS] Shell code count:", shellCode.length)
-
-      // Verify demo.tsx is included in the shell code
-      const demoFileIncluded = shellCode.some(
+        .map(([_, value]) => (typeof value === "string" ? value : value.code))
+
+      // Ensure demo.tsx is included
+      const demoInShellCode = shellCode.some(
         (code) =>
           code.includes("export default function Demo()") ||
           code.includes("Demo components loaded"),
       )
-      if (!demoFileIncluded && demoCode) {
-        console.log(
-          "[compileCSS] Demo file not found in shell code, manually adding it",
-        )
+
+      if (!demoInShellCode && demoCode) {
         shellCode.push(demoCode)
       }
 
-      // Combine all dependencies (exactly matching preview.tsx)
+      // Combine all dependencies
       const allDependencies = [...registryDependenciesArray, ...shellCode]
-      console.log(
-        "[compileCSS] Total dependencies count:",
-        allDependencies.length,
-      )
-
-      console.log(
-        "[compileCSS] Attempting to compile CSS with backend:",
-        backendUrl,
-      )
 
-      // Prepare request payload - explicitly include demoCode separately to ensure it's used
+      // Prepare request payload
       const payload = {
         code: componentCode,
-        demoCode: demoCode, // Ensure demo code is explicitly included
+        demoCode,
         baseTailwindConfig: defaultTailwindConfig,
         baseGlobalCss: defaultGlobalCss,
         customTailwindConfig: tailwindConfig,
@@ -196,95 +164,80 @@ export function useCssCompiler({
         dependencies: allDependencies,
       }
 
-      // Additional verification that demo code is included
-      if (!payload.demoCode || payload.demoCode.length === 0) {
-        console.warn(
-          "[compileCSS] Warning: Empty demo code in payload, using default demo code",
-        )
-        // Set a default demo code if somehow it's missing
-        payload.demoCode = `
-          import React from 'react';
-          export default function Demo() {
-            return <div className="p-4">Demo component</div>;
-          }
-        `
-      }
-
-      console.log("[compileCSS] Request payload keys:", Object.keys(payload))
-      console.log(
-        "[compileCSS] Demo code included in payload:",
-        !!payload.demoCode,
-      )
-      console.log(
-        "[compileCSS] Demo code length in payload:",
-        payload.demoCode.length,
-      )
-
-      // Full URL for debugging
-      const fullUrl = `${backendUrl}/compile-css`
-      console.log("[compileCSS] Full URL:", fullUrl)
-
-      // Make the request with detailed error handling
-      console.log("[compileCSS] Sending request now...")
-
-      const response = await fetch(fullUrl, {
+      // Send request to compile CSS
+      const response = await fetch(`${backendUrl}/compile-css`, {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
+        headers: { "Content-Type": "application/json" },
         body: JSON.stringify(payload),
       })
 
-      console.log("[compileCSS] Response status:", response.status)
-
       if (!response.ok) {
-        console.error(
-          `[compileCSS] Server error: ${response.status} ${response.statusText}`,
-        )
-        throw new Error(
-          `Server responded with ${response.status}: ${response.statusText}`,
-        )
+        throw new Error(`Server error: ${response.status}`)
       }
 
       const data = await response.json()
       if (data.error) {
-        console.error("[compileCSS] CSS compilation failed:", {
-          error: data.error,
-          details: data.details,
-        })
+        console.error("[compileCSS] CSS compilation failed:", data.error)
         toast.error(`CSS compilation failed: ${data.details || data.error}`)
-        // Default CSS is already set above
       } else {
         console.log(
-          "[compileCSS] CSS compiled successfully, length:",
+          "[compileCSS] CSS compiled successfully:",
           data.css.length,
+          "bytes",
         )
+
+        // Update the state
         setCompiledCss(data.css)
+
+        // Update the styles.css file directly
+        updateStylesFile(data.css)
       }
-      setIsCssCompiling(false)
     } catch (error) {
-      console.error("[compileCSS] Failed to compile CSS:", error)
-      console.log("[compileCSS] Using default CSS instead")
-      // Default CSS is already set above
+      console.error("[compileCSS] Error during compilation:", error)
+      if (error instanceof Error) {
+        toast.error(`Failed to compile CSS: ${error.message}`)
+      }
+    } finally {
       setIsCssCompiling(false)
+      lastCompilationTimeRef.current = Date.now()
     }
   }, [
     componentCode,
     processedData,
+    isProcessing,
     registryDependencies,
     files,
     tailwindConfig,
     globalCss,
     getComponentFilePath,
-    isCssCompiling,
     generateStylesCss,
+    isCssCompiling,
+    updateStylesFile,
   ])
 
-  // Force recompilation when demo file changes
-  const triggerDemoRecompilation = useCallback(() => {
-    console.log(
-      "[triggerDemoRecompilation] Forcing recompilation due to demo changes",
-    )
+  // Check for demo.tsx changes and trigger recompilation if needed
+  const checkDemoChanges = useCallback(() => {
+    const demoFile = files["/demo.tsx"]
+    if (!demoFile) return false
+
+    const currentDemoContent =
+      typeof demoFile === "string" ? demoFile : demoFile.code || ""
+
+    // Check if content has changed
+    if (currentDemoContent !== lastDemoContentRef.current) {
+      console.log(
+        "[useCssCompiler] Demo file content changed, triggering recompilation",
+      )
+      lastDemoContentRef.current = currentDemoContent
+      return true
+    }
+
+    return false
+  }, [files])
+
+  // Force recompilation on demand (used by external components)
+  const triggerRecompilation = useCallback(() => {
+    console.log("[useCssCompiler] Force recompilation requested")
 
     // Clear any existing timeout
     if (cssCompileTimeoutRef.current) {
@@ -292,88 +245,43 @@ export function useCssCompiler({
       cssCompileTimeoutRef.current = null
     }
 
-    // Force update the hash reference to ensure we detect the change
-    prevFilesHashRef.current = ""
+    // Reset tracking for demo content
+    lastDemoContentRef.current = ""
 
     // Schedule immediate recompilation
     setTimeout(() => {
-      lastCompilationTimeRef.current = Date.now()
       compileCSS()
     }, 300)
   }, [compileCSS])
 
-  // Set up the effect to trigger CSS compilation when files change
+  // Effect to watch for changes and trigger compilation
   useEffect(() => {
-    // Don't compile if we're still processing the component
+    // Skip if still processing or no data
     if (isProcessing || !processedData) return
 
-    // Generate a hash of all key files to detect changes
-    const currentFilesHash = generateFilesHash()
+    // Check demo changes
+    const demoChanged = checkDemoChanges()
 
-    // Check specifically for demo file changes
-    const demoFile = files["/demo.tsx"]
-    const demoContent =
-      typeof demoFile === "string" ? demoFile : demoFile?.code || ""
-    const demoChanged = demoContent !== lastDemoContentRef.current
-
-    if (demoChanged) {
-      console.log(
-        "[useEffect] Demo file changed directly! Length:",
-        demoContent.length,
-      )
-      lastDemoContentRef.current = demoContent
+    // Skip if compilation in progress
+    if (isCssCompiling) return
 
-      // Skip debounce for demo changes - compile more aggressively
-      if (cssCompileTimeoutRef.current) {
-        clearTimeout(cssCompileTimeoutRef.current)
-      }
-
-      // Trigger immediate compilation for demo changes
-      cssCompileTimeoutRef.current = setTimeout(() => {
-        prevFilesHashRef.current = currentFilesHash
-        lastCompilationTimeRef.current = Date.now()
-        compileCSS()
-        cssCompileTimeoutRef.current = null
-      }, 500) // Faster debounce for demo changes
-
-      return
-    }
-
-    // Normal debounce logic for other changes
-    // Don't recompile if no files have changed and it was recently compiled
-    if (
-      currentFilesHash === prevFilesHashRef.current &&
-      Date.now() - lastCompilationTimeRef.current < 5000
-    ) {
-      console.log(
-        "[compileCSS] Skipping - no files have changed since last compilation",
-      )
-      return
-    }
-
-    // Don't compile if a compilation is already in progress
-    if (isCssCompiling) {
-      console.log("[compileCSS] Skipping - compilation already in progress")
+    // Skip if recently compiled (within 5 seconds) and no demo change
+    if (!demoChanged && Date.now() - lastCompilationTimeRef.current < 5000)
       return
-    }
 
-    // Clear any existing timeout
+    // Clear existing timeout
     if (cssCompileTimeoutRef.current) {
       clearTimeout(cssCompileTimeoutRef.current)
     }
 
-    console.log("[compileCSS] Files have changed, scheduling compilation")
-
-    // Set a new timeout to debounce the compilation
+    // Set timeout with appropriate delay
+    const delay = demoChanged ? 500 : 1000
     cssCompileTimeoutRef.current = setTimeout(() => {
-      // Update the hash reference before compilation
-      prevFilesHashRef.current = currentFilesHash
-      lastCompilationTimeRef.current = Date.now()
       compileCSS()
       cssCompileTimeoutRef.current = null
-    }, 1000) // Debounce for 1 second
+    }, delay)
 
-    // Cleanup timeout on unmount
+    // Cleanup on unmount
     return () => {
       if (cssCompileTimeoutRef.current) {
         clearTimeout(cssCompileTimeoutRef.current)
@@ -383,25 +291,23 @@ export function useCssCompiler({
     files,
     processedData,
     isProcessing,
-    registryDependencies,
-    compileCSS,
     isCssCompiling,
-    generateFilesHash,
+    compileCSS,
+    checkDemoChanges,
   ])
 
-  // Clean up on unmount
+  // Ensure styles.css is always up to date with compiled CSS
   useEffect(() => {
-    return () => {
-      if (cssCompileTimeoutRef.current) {
-        clearTimeout(cssCompileTimeoutRef.current)
-      }
+    if (compiledCss) {
+      updateStylesFile(compiledCss)
     }
-  }, [])
+  }, [compiledCss, updateStylesFile])
 
+  // Return the necessary values and functions
   return {
     compiledCss,
     isCssCompiling,
     generateStylesCss,
-    forceRecompile: triggerDemoRecompilation,
+    forceRecompile: triggerRecompilation,
   }
 }
diff --git a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
index 6bd2f694..4e368c57 100644
--- a/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-editor-dialog.ts
@@ -83,8 +83,8 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     isProcessing,
   })
 
-  // CSS compiler
-  const { compiledCss, forceRecompile } = useCssCompiler({
+  // CSS compiler - will automatically update styles.css in files object
+  const { compiledCss, isCssCompiling, forceRecompile } = useCssCompiler({
     componentCode,
     processedData,
     isProcessing,
@@ -95,7 +95,7 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     getComponentFilePath,
   })
 
-  // Update the initial compiled CSS when the compiled CSS changes
+  // Update the initial compiled CSS when a new CSS is compiled
   useEffect(() => {
     if (compiledCss) {
       setInitialCompiledCss(compiledCss)
@@ -149,6 +149,8 @@ export function usePublishDialog({ userId }: UsePublishDialogProps) {
     activePreview,
     loadingShadcnComponents,
     actionRequiredFiles,
+    compiledCss,
+    isCssCompiling,
     handleOpenChange,
     handleProcessComponent,
     handlePreviewSelect,

From 2a10e900743b3aba0e869397b8a71bfeb7931abf Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Mon, 7 Apr 2025 22:26:54 +0300
Subject: [PATCH 059/143] remove unused staff

---
 .../features/studio/editor/hooks/use-component-processing.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/apps/web/components/features/studio/editor/hooks/use-component-processing.ts b/apps/web/components/features/studio/editor/hooks/use-component-processing.ts
index 04de5a6b..d41d339a 100644
--- a/apps/web/components/features/studio/editor/hooks/use-component-processing.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-component-processing.ts
@@ -55,9 +55,6 @@ export function useComponentProcessing({
         return
       }
 
-      // Clear any existing timeouts is no longer needed
-      // cleanupTimeouts()
-
       setIsProcessing(true)
       setLoadingShadcnComponents([]) // Reset loading state at the start
       setActionRequiredFiles([]) // Reset action required files
@@ -243,11 +240,9 @@ export function useComponentProcessing({
           `Processing failed: ${error instanceof Error ? error.message : "Unknown error"}`,
         )
         console.error("Error processing component:", error)
-        // Clear loading state immediately in case of main process error
         setLoadingShadcnComponents([])
       } finally {
         setIsProcessing(false)
-        // Safety timeout for clearing loading state is no longer needed
       }
     },
     [

From 25f52cd7d7356f109f8d6504866c19565f020730 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Mon, 7 Apr 2025 22:36:19 +0300
Subject: [PATCH 060/143] =?UTF-8?q?NonShadcnComponent=20=E2=86=92=20Unreso?=
 =?UTF-8?q?lvedDependency?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/studio/preprocess-component/route.ts  | 18 +--------
 .../studio/editor/hooks/use-dependencies.ts   |  4 +-
 .../studio/editor/utils/component-lookup.ts   | 37 ++++++++++---------
 3 files changed, 23 insertions(+), 36 deletions(-)

diff --git a/apps/web/app/api/studio/preprocess-component/route.ts b/apps/web/app/api/studio/preprocess-component/route.ts
index 9c02b8ac..20880936 100644
--- a/apps/web/app/api/studio/preprocess-component/route.ts
+++ b/apps/web/app/api/studio/preprocess-component/route.ts
@@ -200,7 +200,7 @@ IMPORTANT RULES FOR COMPONENT PATHS:
 Example of correct path handling:
 If a file "@/components/ui/mockup.tsx" exports both Mockup and MockupFrame components:
 {
-  "nonShadcnComponentsImports": [
+  "unresolvedDependencyImports": [
     { 
       "path": "@/components/ui/mockup",
       "names": ["Mockup", "MockupFrame"]
@@ -218,7 +218,7 @@ Respond in JSON format only with the following structure:
       "path": "@/components/ui/component-name"
     }
   ],
-  "nonShadcnComponentsImports": [
+  "unresolvedDependencyImports": [
     {
       "path": "@/components/[registry]/component-name",
       "names": ["string", "string", ...]
@@ -353,20 +353,6 @@ Respond in JSON format only with the following structure:
   return data
 }
 
-// Helper function to extract component name from code using regex
-function extractComponentName(code: string): string | null {
-  // Look for function/const component declarations
-  const functionMatch = code.match(/function\s+([A-Z][a-zA-Z0-9_]*)/)
-  const constMatch = code.match(
-    /const\s+([A-Z][a-zA-Z0-9_]*)\s*=\s*(\(|\{|React\.forwardRef)/,
-  )
-  const exportMatch = code.match(
-    /export\s+(?:default\s+)?(?:function|const)\s+([A-Z][a-zA-Z0-9_]*)/,
-  )
-
-  return exportMatch?.[1] || functionMatch?.[1] || constMatch?.[1] || null
-}
-
 async function checkSlugUnique(slug: string, userId: string): Promise<boolean> {
   const supabase = supabaseWithAdminAccess
 
diff --git a/apps/web/components/features/studio/editor/hooks/use-dependencies.ts b/apps/web/components/features/studio/editor/hooks/use-dependencies.ts
index 14f95be7..cb581ba7 100644
--- a/apps/web/components/features/studio/editor/hooks/use-dependencies.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-dependencies.ts
@@ -61,7 +61,7 @@ export function useDependencies() {
       if (processedData?.unresolvedDependencyImports?.length > 0) {
         try {
           // Look up components in the database
-          const { lookupResults, remainingComponents } =
+          const { lookupResults, remainingDependencies } =
             await lookupComponentsInDatabase(
               supabase,
               processedData.unresolvedDependencyImports,
@@ -88,7 +88,7 @@ export function useDependencies() {
 
           // Return the updated unresolved dependencies
           return {
-            remainingComponents,
+            remainingComponents: remainingDependencies,
             updatedLoadingPaths: [
               ...shadcnLoadingPaths,
               ...resolvedDependencyPaths,
diff --git a/apps/web/components/features/studio/editor/utils/component-lookup.ts b/apps/web/components/features/studio/editor/utils/component-lookup.ts
index 0b7f2534..ca10adb8 100644
--- a/apps/web/components/features/studio/editor/utils/component-lookup.ts
+++ b/apps/web/components/features/studio/editor/utils/component-lookup.ts
@@ -1,7 +1,7 @@
 import { SupabaseClient } from "@supabase/supabase-js"
 import { Database } from "@/types/supabase"
 
-export type NonShadcnComponent = {
+export type UnresolvedDependency = {
   path: string
   names: string[]
 }
@@ -14,35 +14,35 @@ export type ComponentMatch = {
 }
 
 /**
- * Looks up non-shadcn components in the database
+ * Looks up unresolved dependencies in the database
  * @param supabase Supabase client instance
- * @param components Array of non-shadcn components to look up
- * @returns Object with lookupResults (matches found) and remainingComponents (no matches found)
+ * @param unresolvedDependencies Array of unresolved dependencies to look up
+ * @returns Object with lookupResults (matches found) and remainingDependencies (no matches found)
  */
 export async function lookupComponentsInDatabase(
   supabase: SupabaseClient<Database>,
-  components: NonShadcnComponent[],
+  unresolvedDependencies: UnresolvedDependency[],
 ): Promise<{
-  lookupResults: { component: NonShadcnComponent; match: ComponentMatch }[]
-  remainingComponents: NonShadcnComponent[]
+  lookupResults: { component: UnresolvedDependency; match: ComponentMatch }[]
+  remainingDependencies: UnresolvedDependency[]
 }> {
-  if (!components || components.length === 0) {
-    return { lookupResults: [], remainingComponents: [] }
+  if (!unresolvedDependencies || unresolvedDependencies.length === 0) {
+    return { lookupResults: [], remainingDependencies: [] }
   }
 
   const lookupResults: {
-    component: NonShadcnComponent
+    component: UnresolvedDependency
     match: ComponentMatch
   }[] = []
-  const remainingComponents: NonShadcnComponent[] = []
+  const remainingDependencies: UnresolvedDependency[] = []
 
-  for (const component of components) {
+  for (const component of unresolvedDependencies) {
     const path = component.path
     const pathParts = path.split("/")
     const fileSlug = pathParts[pathParts.length - 1]
 
     if (!fileSlug) {
-      remainingComponents.push(component)
+      remainingDependencies.push(component)
       continue
     }
 
@@ -56,7 +56,7 @@ export async function lookupComponentsInDatabase(
 
     if (error || !matchingComponents || matchingComponents.length === 0) {
       // No matches found, keep as remaining component
-      remainingComponents.push(component)
+      remainingDependencies.push(component)
       continue
     }
 
@@ -86,7 +86,8 @@ export async function lookupComponentsInDatabase(
             registry: matchingComponent.registry,
             username:
               matchingComponent.user?.[0]?.display_username ||
-              matchingComponent.user?.[0]?.username || undefined,
+              matchingComponent.user?.[0]?.username ||
+              undefined,
           },
         })
         foundMatch = true
@@ -96,11 +97,11 @@ export async function lookupComponentsInDatabase(
 
     if (!foundMatch) {
       // No exact match found, add to remaining components
-      remainingComponents.push(component)
+      remainingDependencies.push(component)
     }
   }
 
-  return { lookupResults, remainingComponents }
+  return { lookupResults, remainingDependencies }
 }
 
 /**
@@ -109,7 +110,7 @@ export async function lookupComponentsInDatabase(
  * @returns Array of dependency slugs in the format "username/slug"
  */
 export function convertComponentMatchesToDependencySlugs(
-  matches: { component: NonShadcnComponent; match: ComponentMatch }[],
+  matches: { component: UnresolvedDependency; match: ComponentMatch }[],
 ): string[] {
   return matches.map(({ match }) => {
     // For UI components, use 'shadcn' as the registry name to match shadcn convention

From 29ac11f03a4cb2b1d905ccde3f8607c0de79e4cb Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Mon, 7 Apr 2025 22:39:12 +0300
Subject: [PATCH 061/143] remove unused logic

---
 .../studio/editor/utils/sandpack-files.ts     | 29 -------------------
 1 file changed, 29 deletions(-)

diff --git a/apps/web/components/features/studio/editor/utils/sandpack-files.ts b/apps/web/components/features/studio/editor/utils/sandpack-files.ts
index 9f2f5fa8..7cd97fb8 100644
--- a/apps/web/components/features/studio/editor/utils/sandpack-files.ts
+++ b/apps/web/components/features/studio/editor/utils/sandpack-files.ts
@@ -89,35 +89,6 @@ root.render(
         2,
       ),
     },
-    "/App.tsx": {
-      code: processedData
-        ? `import { ThemeProvider } from "./next-themes";
-import ${processedData.componentName || "Component"} from "./components/${
-            processedData.registryType || "ui"
-          }/${processedData.slug?.replace(".tsx", "") || "component"}";
-
-export default function App() {
-  return (
-    <ThemeProvider attribute="class" defaultTheme="${theme}" enableSystem={false}>
-      <div className="container">
-        <${processedData.componentName || "Component"} />
-      </div>
-    </ThemeProvider>
-  );
-}`
-        : `import { ThemeProvider } from "./next-themes";
-import Component from "${componentPath.replace(".tsx", "")}";
-
-export default function App() {
-  return (
-    <ThemeProvider defaultTheme="light" storageKey="sandpack-theme">
-      <div className="container">
-        <Component />
-      </div>
-    </ThemeProvider>
-  );
-}`,
-    },
     "/next-themes.tsx": {
       code: `import React, { createContext, useContext, useState, useEffect } from 'react';
 

From 570f56d5551afd7f3d01f9844940ddb1f2faf7ac Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Mon, 7 Apr 2025 22:49:01 +0300
Subject: [PATCH 062/143] refactor context

---
 .../studio/editor/context/editor-atoms.ts     |  20 ++
 .../studio/editor/context/editor-state.tsx    | 247 +++---------------
 .../studio/editor/context/editor-types.ts     |  90 +++++++
 .../features/studio/editor/editor.tsx         |   3 +-
 .../features/studio/editor/file-explorer.tsx  |   2 +-
 .../editor/hooks/use-action-required.ts       |  91 +++++++
 .../studio/editor/hooks/use-editor-file.ts    |  16 ++
 .../studio/editor/hooks/use-preview-ready.ts  |  24 ++
 .../editor/hooks/use-sandpack-config.ts       |   2 -
 .../studio/editor/requirements-panel.tsx      |   9 -
 .../editor/sandpack-initial-content.tsx       |   6 +-
 .../studio/editor/utils/sandpack-files.ts     |   4 -
 12 files changed, 281 insertions(+), 233 deletions(-)
 create mode 100644 apps/web/components/features/studio/editor/context/editor-atoms.ts
 create mode 100644 apps/web/components/features/studio/editor/context/editor-types.ts
 create mode 100644 apps/web/components/features/studio/editor/hooks/use-action-required.ts
 create mode 100644 apps/web/components/features/studio/editor/hooks/use-editor-file.ts
 create mode 100644 apps/web/components/features/studio/editor/hooks/use-preview-ready.ts

diff --git a/apps/web/components/features/studio/editor/context/editor-atoms.ts b/apps/web/components/features/studio/editor/context/editor-atoms.ts
new file mode 100644
index 00000000..754d0850
--- /dev/null
+++ b/apps/web/components/features/studio/editor/context/editor-atoms.ts
@@ -0,0 +1,20 @@
+import { atom } from "jotai"
+import { ActionRequiredDetails } from "./editor-types"
+
+/**
+ * Atoms for editor state management (single source of truth)
+ */
+
+// File state atoms
+export const activeFileAtom = atom<string | null>(null)
+export const userModifiedFilesAtom = atom<Record<string, boolean>>({})
+export const loadingComponentsAtom = atom<string[]>([])
+
+// Preview state atom
+export const previewReadyAtom = atom<boolean>(false)
+
+// Action required atoms
+export const actionRequiredFilesAtom = atom<
+  Record<string, ActionRequiredDetails>
+>({})
+export const actionRequiredPathsAtom = atom<string[]>([])
diff --git a/apps/web/components/features/studio/editor/context/editor-state.tsx b/apps/web/components/features/studio/editor/context/editor-state.tsx
index aae63d52..9b498e95 100644
--- a/apps/web/components/features/studio/editor/context/editor-state.tsx
+++ b/apps/web/components/features/studio/editor/context/editor-state.tsx
@@ -1,100 +1,30 @@
-import React, { createContext, useContext, useEffect, useCallback } from "react"
-import { atom, useAtom } from "jotai"
+import React, { createContext, useContext, useEffect } from "react"
+import { useAtom } from "jotai"
 import { useSandpack } from "@codesandbox/sandpack-react"
-import { normalizePath } from "@/lib/utils"
-
-// Define atoms for state management (single source of truth)
-export const activeFileAtom = atom<string | null>(null)
-export const userModifiedFilesAtom = atom<Record<string, boolean>>({})
-export const loadingComponentsAtom = atom<string[]>([])
-export const previewReadyAtom = atom<boolean>(false)
-
-// Improved typing for action required system
-export type ActionRequiredReason =
-  | "styles"
-  | "unresolved_dependencies"
-  | "other"
-
-export interface BaseActionRequiredDetails {
-  reason: ActionRequiredReason
-  message?: string
-}
 
-export interface StylesActionDetails extends BaseActionRequiredDetails {
-  reason: "styles"
-  tailwindExtensions?: Record<string, any>
-  cssVariables?: Array<any>
-  keyframes?: Array<any>
-  utilities?: Array<any>
-}
+// Import types
+import {
+  CodeManagerContextType,
+  CodeManagerProviderProps,
+} from "./editor-types"
 
-export interface UnresolvedDependenciesActionDetails
-  extends BaseActionRequiredDetails {
-  reason: "unresolved_dependencies"
-  componentName?: string
-}
+// Import atoms
+import {
+  activeFileAtom,
+  userModifiedFilesAtom,
+  loadingComponentsAtom,
+} from "./editor-atoms"
 
-export interface OtherActionDetails extends BaseActionRequiredDetails {
-  reason: "other"
-}
-
-export type ActionRequiredDetails =
-  | StylesActionDetails
-  | UnresolvedDependenciesActionDetails
-  | OtherActionDetails
-
-// State atom with path normalization
-export const actionRequiredFilesAtom = atom<
-  Record<string, ActionRequiredDetails>
->({})
-
-// New atom to track paths that need action (for better performance)
-export const actionRequiredPathsAtom = atom<string[]>([])
-
-// Define the types for our context
-export interface CodeManagerContextType {
-  // File operations
-  getFileContent: (path: string) => string | undefined
-  updateFileContent: (path: string, content: string) => void
-  addFile: (path: string, content: string) => void
-  renameFile: (oldPath: string, newPath: string) => void
-  deleteFile: (path: string) => void
-
-  // File state
-  activeFile: string | null
-  selectFile: (path: string | null) => void
-
-  // File types and management
-  isUnresolvedDependency: (path: string) => boolean
-  getComponentName: (path: string) => string | undefined
-
-  // File metadata
-  allFiles: string[]
-  unresolvedDependencies: Array<{ name: string; path: string }> | undefined
-
-  // Loading state
-  loadingComponents: string[]
-  setLoadingComponents: (paths: string[]) => void
-
-  // Action required state
-  actionRequiredFiles: Record<string, ActionRequiredDetails>
-  actionRequiredPaths: string[]
-  markFileAsRequiringAction: (
-    path: string,
-    details: ActionRequiredDetails,
-  ) => void
-  markFileAsResolved: (path: string) => void
-  isActionRequired: (path: string) => boolean
-  getActionDetails: (path: string) => ActionRequiredDetails | undefined
-
-  // Preview ready state
-  previewReady: boolean
-  markPreviewReady: () => void
-  markPreviewNotReady: () => void
-}
+// Import hooks
+import { useActionRequired } from "../hooks/use-action-required"
+import { usePreviewReady } from "../hooks/use-preview-ready"
 
+// Create the context
 const CodeManagerContext = createContext<CodeManagerContextType | null>(null)
 
+/**
+ * Hook to access the CodeManager context
+ */
 export function useCodeManager() {
   const context = useContext(CodeManagerContext)
   if (!context) {
@@ -103,126 +33,21 @@ export function useCodeManager() {
   return context
 }
 
-// Simple hook to access atom state directly
-export function useEditorFile() {
-  const [activeFile, setActiveFile] = useAtom(activeFileAtom)
-  const [userModifiedFiles] = useAtom(userModifiedFilesAtom)
-
-  return {
-    activeFile,
-    setActiveFile,
-    isFileModified: (path: string) => userModifiedFiles[path] || false,
-  }
-}
-
-// Hook with improved logic
-export function useActionRequired() {
-  const [actionRequiredFiles, setActionRequiredFiles] = useAtom(
-    actionRequiredFilesAtom,
-  )
-  const [actionRequiredPaths, setActionRequiredPaths] = useAtom(
-    actionRequiredPathsAtom,
-  )
-
-  const markFileAsRequiringAction = useCallback(
-    (path: string, details: ActionRequiredDetails) => {
-      const normalizedPath = normalizePath(path)
-
-      setActionRequiredFiles((prev) => {
-        // Skip update if nothing is changing
-        if (
-          prev[normalizedPath] &&
-          JSON.stringify(prev[normalizedPath]) === JSON.stringify(details)
-        ) {
-          return prev
-        }
-
-        const next = { ...prev, [normalizedPath]: details }
-        return next
-      })
-
-      setActionRequiredPaths((prev) => {
-        if (!prev.includes(normalizedPath)) {
-          return [...prev, normalizedPath]
-        }
-        return prev
-      })
-    },
-    [setActionRequiredFiles, setActionRequiredPaths],
-  )
-
-  const markFileAsResolved = useCallback(
-    (path: string) => {
-      const normalizedPath = normalizePath(path)
-
-      setActionRequiredFiles((prev) => {
-        if (!prev[normalizedPath]) {
-          return prev
-        }
-
-        const next = { ...prev }
-        delete next[normalizedPath]
-        return next
-      })
-
-      setActionRequiredPaths((prev) => prev.filter((p) => p !== normalizedPath))
-    },
-    [setActionRequiredFiles, setActionRequiredPaths],
-  )
-
-  const isActionRequired = useCallback(
-    (path: string) => {
-      const normalizedPath = normalizePath(path)
-      return actionRequiredPaths.includes(normalizedPath)
-    },
-    [actionRequiredPaths],
-  )
-
-  const getActionDetails = useCallback(
-    (path: string) => {
-      const normalizedPath = normalizePath(path)
-      return actionRequiredFiles[normalizedPath]
-    },
-    [actionRequiredFiles],
-  )
-
-  return {
-    actionRequiredFiles,
-    actionRequiredPaths,
-    markFileAsRequiringAction,
-    markFileAsResolved,
-    isActionRequired,
-    getActionDetails,
-  }
-}
-
-// New hook to manage preview readiness that doesn't depend on Sandpack
-export function usePreviewReady() {
-  const [previewReady, setPreviewReady] = useAtom(previewReadyAtom)
-
-  const markPreviewReady = useCallback(() => {
-    setPreviewReady(true)
-  }, [setPreviewReady])
-
-  const markPreviewNotReady = useCallback(() => {
-    setPreviewReady(false)
-  }, [setPreviewReady])
-
-  return {
-    previewReady,
-    markPreviewReady,
-    markPreviewNotReady,
-  }
-}
-
-interface CodeManagerProviderProps {
-  children: React.ReactNode
-  initialComponentPath: string
-  unresolvedDependencies?: Array<{ name: string; path: string }>
-  onFileContentChange?: (path: string, content: string) => void
-  isUnknownComponentFn?: (path: string) => boolean
-}
-
+// Re-export hooks and types
+export { useEditorFile } from "../hooks/use-editor-file"
+export { useActionRequired } from "../hooks/use-action-required"
+export { usePreviewReady } from "../hooks/use-preview-ready"
+export type {
+  ActionRequiredDetails,
+  ActionRequiredReason,
+  StylesActionDetails,
+  UnresolvedDependenciesActionDetails,
+  OtherActionDetails,
+} from "./editor-types"
+
+/**
+ * CodeManager Provider Component
+ */
 export function CodeManagerProvider({
   children,
   initialComponentPath,
@@ -279,7 +104,7 @@ export function CodeManagerProvider({
     if (initialComponentPath && !activeFile && sandpack) {
       selectFile(initialComponentPath)
     }
-  }, [initialComponentPath, sandpack])
+  }, [initialComponentPath, sandpack, activeFile])
 
   // File selection
   const selectFile = (path: string | null) => {
diff --git a/apps/web/components/features/studio/editor/context/editor-types.ts b/apps/web/components/features/studio/editor/context/editor-types.ts
new file mode 100644
index 00000000..92eea99f
--- /dev/null
+++ b/apps/web/components/features/studio/editor/context/editor-types.ts
@@ -0,0 +1,90 @@
+/**
+ * Types for action required system
+ */
+export type ActionRequiredReason =
+  | "styles"
+  | "unresolved_dependencies"
+  | "other"
+
+export interface BaseActionRequiredDetails {
+  reason: ActionRequiredReason
+  message?: string
+}
+
+export interface StylesActionDetails extends BaseActionRequiredDetails {
+  reason: "styles"
+  tailwindExtensions?: Record<string, any>
+  cssVariables?: Array<any>
+  keyframes?: Array<any>
+  utilities?: Array<any>
+}
+
+export interface UnresolvedDependenciesActionDetails
+  extends BaseActionRequiredDetails {
+  reason: "unresolved_dependencies"
+  componentName?: string
+}
+
+export interface OtherActionDetails extends BaseActionRequiredDetails {
+  reason: "other"
+}
+
+export type ActionRequiredDetails =
+  | StylesActionDetails
+  | UnresolvedDependenciesActionDetails
+  | OtherActionDetails
+
+/**
+ * Types for the code manager context
+ */
+export interface CodeManagerContextType {
+  // File operations
+  getFileContent: (path: string) => string | undefined
+  updateFileContent: (path: string, content: string) => void
+  addFile: (path: string, content: string) => void
+  renameFile: (oldPath: string, newPath: string) => void
+  deleteFile: (path: string) => void
+
+  // File state
+  activeFile: string | null
+  selectFile: (path: string | null) => void
+
+  // File types and management
+  isUnresolvedDependency: (path: string) => boolean
+  getComponentName: (path: string) => string | undefined
+
+  // File metadata
+  allFiles: string[]
+  unresolvedDependencies: Array<{ name: string; path: string }> | undefined
+
+  // Loading state
+  loadingComponents: string[]
+  setLoadingComponents: (paths: string[]) => void
+
+  // Action required state
+  actionRequiredFiles: Record<string, ActionRequiredDetails>
+  actionRequiredPaths: string[]
+  markFileAsRequiringAction: (
+    path: string,
+    details: ActionRequiredDetails,
+  ) => void
+  markFileAsResolved: (path: string) => void
+  isActionRequired: (path: string) => boolean
+  getActionDetails: (path: string) => ActionRequiredDetails | undefined
+
+  // Preview ready state
+  previewReady: boolean
+  markPreviewReady: () => void
+  markPreviewNotReady: () => void
+}
+
+/**
+ * Props for CodeManagerProvider
+ */
+export interface CodeManagerProviderProps {
+  children: React.ReactNode
+  initialComponentPath: string
+  unresolvedDependencies?: Array<{ name: string; path: string }>
+  onFileContentChange?: (path: string, content: string) => void
+  isUnknownComponentFn?: (path: string) => boolean
+}
diff --git a/apps/web/components/features/studio/editor/editor.tsx b/apps/web/components/features/studio/editor/editor.tsx
index e5a12237..a9e789b6 100644
--- a/apps/web/components/features/studio/editor/editor.tsx
+++ b/apps/web/components/features/studio/editor/editor.tsx
@@ -10,9 +10,9 @@ import {
   CodeManagerProvider,
   useCodeManager,
   useActionRequired,
-  ActionRequiredDetails,
   usePreviewReady,
 } from "./context/editor-state"
+import { ActionRequiredDetails } from "./context/editor-types"
 import { EditorCodePanel } from "./editor-code-panel"
 import { FileExplorer } from "./file-explorer"
 import { RequirementsPanel } from "./requirements-panel"
@@ -121,7 +121,6 @@ function EditorContent({
     addFile,
     allFiles,
     getFileContent,
-    updateFileContent,
   } = useCodeManager()
 
   const { markFileAsRequiringAction, markFileAsResolved, getActionDetails } =
diff --git a/apps/web/components/features/studio/editor/file-explorer.tsx b/apps/web/components/features/studio/editor/file-explorer.tsx
index 4e76459e..85ef187f 100644
--- a/apps/web/components/features/studio/editor/file-explorer.tsx
+++ b/apps/web/components/features/studio/editor/file-explorer.tsx
@@ -1,6 +1,6 @@
 import { useSandpack } from "@codesandbox/sandpack-react"
 import { cn } from "@/lib/utils"
-import { arePathsEqual, normalizePath } from "@/lib/utils"
+import { arePathsEqual } from "@/lib/utils"
 import {
   ChevronRight,
   ChevronDown,
diff --git a/apps/web/components/features/studio/editor/hooks/use-action-required.ts b/apps/web/components/features/studio/editor/hooks/use-action-required.ts
new file mode 100644
index 00000000..07e6e722
--- /dev/null
+++ b/apps/web/components/features/studio/editor/hooks/use-action-required.ts
@@ -0,0 +1,91 @@
+import { useAtom } from "jotai"
+import { useCallback } from "react"
+import {
+  actionRequiredFilesAtom,
+  actionRequiredPathsAtom,
+} from "../context/editor-atoms"
+import { ActionRequiredDetails } from "../context/editor-types"
+import { normalizePath } from "@/lib/utils"
+
+/**
+ * Hook with improved logic for tracking files that require action
+ */
+export function useActionRequired() {
+  const [actionRequiredFiles, setActionRequiredFiles] = useAtom(
+    actionRequiredFilesAtom,
+  )
+  const [actionRequiredPaths, setActionRequiredPaths] = useAtom(
+    actionRequiredPathsAtom,
+  )
+
+  const markFileAsRequiringAction = useCallback(
+    (path: string, details: ActionRequiredDetails) => {
+      const normalizedPath = normalizePath(path)
+
+      setActionRequiredFiles((prev) => {
+        // Skip update if nothing is changing
+        if (
+          prev[normalizedPath] &&
+          JSON.stringify(prev[normalizedPath]) === JSON.stringify(details)
+        ) {
+          return prev
+        }
+
+        const next = { ...prev, [normalizedPath]: details }
+        return next
+      })
+
+      setActionRequiredPaths((prev) => {
+        if (!prev.includes(normalizedPath)) {
+          return [...prev, normalizedPath]
+        }
+        return prev
+      })
+    },
+    [setActionRequiredFiles, setActionRequiredPaths],
+  )
+
+  const markFileAsResolved = useCallback(
+    (path: string) => {
+      const normalizedPath = normalizePath(path)
+
+      setActionRequiredFiles((prev) => {
+        if (!prev[normalizedPath]) {
+          return prev
+        }
+
+        const next = { ...prev }
+        delete next[normalizedPath]
+        return next
+      })
+
+      setActionRequiredPaths((prev) => prev.filter((p) => p !== normalizedPath))
+    },
+    [setActionRequiredFiles, setActionRequiredPaths],
+  )
+
+  const isActionRequired = useCallback(
+    (path: string) => {
+      const normalizedPath = normalizePath(path)
+      return actionRequiredPaths.includes(normalizedPath)
+    },
+    [actionRequiredPaths],
+  )
+
+  const getActionDetails = useCallback(
+    (path: string) => {
+      const normalizedPath = normalizePath(path)
+      return actionRequiredFiles[normalizedPath]
+    },
+    [actionRequiredFiles],
+  )
+
+  return {
+    actionRequiredFiles,
+    actionRequiredPaths,
+    markFileAsRequiringAction,
+    markFileAsResolved,
+    isActionRequired,
+    getActionDetails,
+  }
+}
diff --git a/apps/web/components/features/studio/editor/hooks/use-editor-file.ts b/apps/web/components/features/studio/editor/hooks/use-editor-file.ts
new file mode 100644
index 00000000..8fb4ff52
--- /dev/null
+++ b/apps/web/components/features/studio/editor/hooks/use-editor-file.ts
@@ -0,0 +1,16 @@
+import { useAtom } from "jotai"
+import { activeFileAtom, userModifiedFilesAtom } from "../context/editor-atoms"
+
+/**
+ * Simple hook to access editor file state directly
+ */
+export function useEditorFile() {
+  const [activeFile, setActiveFile] = useAtom(activeFileAtom)
+  const [userModifiedFiles] = useAtom(userModifiedFilesAtom)
+
+  return {
+    activeFile,
+    setActiveFile,
+    isFileModified: (path: string) => userModifiedFiles[path] || false,
+  }
+}
diff --git a/apps/web/components/features/studio/editor/hooks/use-preview-ready.ts b/apps/web/components/features/studio/editor/hooks/use-preview-ready.ts
new file mode 100644
index 00000000..c98dfb44
--- /dev/null
+++ b/apps/web/components/features/studio/editor/hooks/use-preview-ready.ts
@@ -0,0 +1,24 @@
+import { useAtom } from "jotai"
+import { useCallback } from "react"
+import { previewReadyAtom } from "../context/editor-atoms"
+
+/**
+ * Hook to manage preview readiness state that doesn't depend on Sandpack
+ */
+export function usePreviewReady() {
+  const [previewReady, setPreviewReady] = useAtom(previewReadyAtom)
+
+  const markPreviewReady = useCallback(() => {
+    setPreviewReady(true)
+  }, [setPreviewReady])
+
+  const markPreviewNotReady = useCallback(() => {
+    setPreviewReady(false)
+  }, [setPreviewReady])
+
+  return {
+    previewReady,
+    markPreviewReady,
+    markPreviewNotReady,
+  }
+}
diff --git a/apps/web/components/features/studio/editor/hooks/use-sandpack-config.ts b/apps/web/components/features/studio/editor/hooks/use-sandpack-config.ts
index 41e7b65d..be304bae 100644
--- a/apps/web/components/features/studio/editor/hooks/use-sandpack-config.ts
+++ b/apps/web/components/features/studio/editor/hooks/use-sandpack-config.ts
@@ -52,8 +52,6 @@ export function useSandpackConfig({
     const generatedFiles = generateSandpackFiles({
       componentPath,
       componentCode,
-      processedData,
-      theme: isDarkTheme ? "dark" : "light",
       dependencies: {
         ...(processedData?.npmDependencies?.reduce(
           (acc: Record<string, string>, dep: string) => ({
diff --git a/apps/web/components/features/studio/editor/requirements-panel.tsx b/apps/web/components/features/studio/editor/requirements-panel.tsx
index 561917f7..3746ab5c 100644
--- a/apps/web/components/features/studio/editor/requirements-panel.tsx
+++ b/apps/web/components/features/studio/editor/requirements-panel.tsx
@@ -3,7 +3,6 @@ import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import {
   useActionRequired,
-  useCodeManager,
   StylesActionDetails,
 } from "./context/editor-state"
 
@@ -23,14 +22,6 @@ export function RequirementsPanel({
 }: RequirementsPanelProps) {
   const { getActionDetails, markFileAsResolved } = useActionRequired()
 
-  // Get code manager
-  let codeManager
-  try {
-    codeManager = useCodeManager()
-  } catch (error) {
-    codeManager = null
-  }
-
   // If no active file, don't show anything
   if (!activeFile) {
     return null
diff --git a/apps/web/components/features/studio/editor/sandpack-initial-content.tsx b/apps/web/components/features/studio/editor/sandpack-initial-content.tsx
index 993003cf..9cd5259e 100644
--- a/apps/web/components/features/studio/editor/sandpack-initial-content.tsx
+++ b/apps/web/components/features/studio/editor/sandpack-initial-content.tsx
@@ -4,10 +4,8 @@ import { cn } from "@/lib/utils"
 import { FileExplorer } from "./file-explorer"
 import { EditorCodePanel } from "./editor-code-panel"
 import { RequirementsPanel } from "./requirements-panel"
-import {
-  useActionRequired,
-  ActionRequiredDetails,
-} from "./context/editor-state"
+import { useActionRequired } from "./context/editor-state"
+import { ActionRequiredDetails } from "./context/editor-types"
 
 interface SandpackInitialContentProps {
   activePreview: {
diff --git a/apps/web/components/features/studio/editor/utils/sandpack-files.ts b/apps/web/components/features/studio/editor/utils/sandpack-files.ts
index 7cd97fb8..fd81069a 100644
--- a/apps/web/components/features/studio/editor/utils/sandpack-files.ts
+++ b/apps/web/components/features/studio/editor/utils/sandpack-files.ts
@@ -4,21 +4,17 @@ import { defaultGlobalCss, defaultTailwindConfig } from "@/lib/defaults"
 interface GenerateFilesOptions {
   componentPath: string
   componentCode: string
-  processedData: any | null
   dependencies?: Record<string, string>
   customTailwindConfig?: string | null
   customGlobalCss?: string | null
-  theme: "light" | "dark"
 }
 
 export function generateSandpackFiles({
   componentPath,
   componentCode,
-  processedData,
   dependencies = {},
   customTailwindConfig = null,
   customGlobalCss = null,
-  theme,
 }: GenerateFilesOptions): SandpackFiles {
   const files: SandpackFiles = {
     [componentPath]: {

From f081a95054467aa1eb16597abd1ba54b21b597e4 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Tue, 15 Apr 2025 14:55:50 +0400
Subject: [PATCH 063/143] init: sandpack new editor

---
 .../web/app/studio/[username]/page.client.tsx |   8 +-
 .../editor-new/component-publish-dialog.tsx   |  97 +++
 .../features/studio/editor-new/editor.tsx     |  64 ++
 .../editor/component-publish-dialog.tsx       |   2 +-
 apps/web/package.json                         |   1 +
 pnpm-lock.yaml                                | 809 +++++++++---------
 6 files changed, 581 insertions(+), 400 deletions(-)
 create mode 100644 apps/web/components/features/studio/editor-new/component-publish-dialog.tsx
 create mode 100644 apps/web/components/features/studio/editor-new/editor.tsx

diff --git a/apps/web/app/studio/[username]/page.client.tsx b/apps/web/app/studio/[username]/page.client.tsx
index bcd8b922..fca83605 100644
--- a/apps/web/app/studio/[username]/page.client.tsx
+++ b/apps/web/app/studio/[username]/page.client.tsx
@@ -3,7 +3,8 @@
 import { User, DemoWithComponent } from "@/types/global"
 import { StudioLayout } from "@/components/features/studio/studio-layout"
 import { DemosTable } from "@/components/features/studio/ui/components-table"
-import { ComponentPublishDialog } from "@/components/features/studio/editor/component-publish-dialog"
+import { ComponentPublishDialog } from "@/components/features/studio/editor-new/component-publish-dialog"
+import { ComponentPublishDialog as ComponentPublishDialogOld } from "@/components/features/studio/editor/component-publish-dialog"
 import Link from "next/link"
 import { ArrowLeft } from "lucide-react"
 
@@ -35,7 +36,10 @@ export function StudioUsernameClient({
           </div>
 
           {(isOwnProfile || isAdmin) && (
-            <ComponentPublishDialog userId={user.id} />
+            <>
+              <ComponentPublishDialog />
+              <ComponentPublishDialogOld userId={user.id} />
+            </>
           )}
         </div>
 
diff --git a/apps/web/components/features/studio/editor-new/component-publish-dialog.tsx b/apps/web/components/features/studio/editor-new/component-publish-dialog.tsx
new file mode 100644
index 00000000..7b5e05d7
--- /dev/null
+++ b/apps/web/components/features/studio/editor-new/component-publish-dialog.tsx
@@ -0,0 +1,97 @@
+import React, { useState } from "react"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { PlusCircle } from "lucide-react"
+import { Spinner } from "@/components/icons/spinner"
+import { Editor } from "./editor"
+
+type ComponentPublishDialogProps = {}
+
+export function ComponentPublishDialog({}: ComponentPublishDialogProps) {
+  const [open, setOpen] = useState(false)
+  const [componentCode, setComponentCode] = useState("")
+  const [isProcessing, setIsProcessing] = useState(false)
+  const [dialogContent, setDialogContent] = useState<React.ReactNode>(null)
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen)
+    if (!newOpen) {
+      setComponentCode("")
+      setDialogContent(null)
+      setIsProcessing(false)
+    }
+  }
+
+  const handleProcessComponent = async () => {
+    setIsProcessing(true)
+    try {
+      // Process component logic here
+      // if (onPublish) {
+      //   onPublish(componentCode)
+      // }
+      // Set dialog content with the result
+      setDialogContent(<div>Component processed successfully</div>)
+    } catch (error) {
+      setDialogContent(<div>Error processing component</div>)
+    } finally {
+      setIsProcessing(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button>
+          <PlusCircle className="mr-2 h-4 w-4" />
+          Publish Component
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent
+        className="sm:max-w-[1600px] sm:w-[95vw] h-[90vh] flex flex-col p-0 gap-0 overflow-hidden"
+        hideCloseButton
+      >
+        <DialogHeader className="flex flex-row p-4 gap-8 items-start justify-between border-b bg-muted">
+          <div className="flex flex-col gap-2">
+            <DialogTitle>Publish New Component</DialogTitle>
+            <DialogDescription>
+              Enter your component code below. Make sure it follows our
+              guidelines and includes all necessary imports.
+            </DialogDescription>
+          </div>
+
+          <Button
+            onClick={handleProcessComponent}
+            disabled={isProcessing || !componentCode.trim()}
+            className="ml-auto !mt-0"
+          >
+            {isProcessing ? (
+              <>
+                <span className="mr-2">
+                  <Spinner size={16} />
+                </span>
+                Processing...
+              </>
+            ) : (
+              "Process Component"
+            )}
+          </Button>
+        </DialogHeader>
+
+        <div className="flex-grow overflow-hidden flex flex-col h-full">
+          <div className="h-full min-h-[400px] overflow-hidden flex-grow">
+            {/* Render the stable dialog content */}
+            <Editor />
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/web/components/features/studio/editor-new/editor.tsx b/apps/web/components/features/studio/editor-new/editor.tsx
new file mode 100644
index 00000000..63de738f
--- /dev/null
+++ b/apps/web/components/features/studio/editor-new/editor.tsx
@@ -0,0 +1,64 @@
+import {
+  SandpackFileExplorer,
+  SandpackProvider,
+  SandpackLayout,
+  SandpackCodeEditor,
+  SandpackPreview,
+} from "@codesandbox/sandpack-react"
+import { useTheme } from "next-themes"
+import { autocompletion, completionKeymap } from "@codemirror/autocomplete"
+
+export const Editor = () => {
+  const { resolvedTheme } = useTheme()
+  const isDark = resolvedTheme === "dark"
+
+  // Define Tailwind classes for autocompletion styling
+  const darkTooltipClasses = "!bg-gray-800 !text-white !border-none"
+  const lightTooltipClasses = "!bg-white !text-gray-800 !border-none"
+  const darkOptionClasses = "!text-gray-100"
+  const lightOptionClasses = "!text-gray-700"
+
+  return (
+    <div className="h-full w-full">
+      <SandpackProvider
+        theme={resolvedTheme as "light" | "dark"}
+        template="react-ts"
+        options={{
+          externalResources: ["https://cdn.tailwindcss.com"],
+        }}
+      >
+        <SandpackLayout>
+          <SandpackFileExplorer />
+          <SandpackCodeEditor
+            showLineNumbers={false}
+            showTabs={false}
+            extensions={[
+              autocompletion({
+                tooltipClass: () =>
+                  isDark ? darkTooltipClasses : lightTooltipClasses,
+                optionClass: () =>
+                  isDark ? darkOptionClasses : lightOptionClasses,
+              }),
+            ]}
+            extensionsKeymap={[completionKeymap]}
+          />
+          <SandpackPreview showRefreshButton />
+        </SandpackLayout>
+      </SandpackProvider>
+    </div>
+  )
+}
+
+// Add this to your global CSS file:
+// .cm-tooltip-autocomplete-dark {
+//   background-color: #2d2d2d !important;
+//   color: #fff !important;
+//   border-color: #444 !important;
+// }
+// .cm-tooltip-autocomplete-dark .cm-completionLabel,
+// .cm-tooltip-autocomplete-dark .cm-completionDetail {
+//   color: #fff !important;
+// }
+// .cm-completion-option-dark.cm-completionIcon {
+//   color: #ddd !important;
+// }
diff --git a/apps/web/components/features/studio/editor/component-publish-dialog.tsx b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
index fe961a00..4cc9ce76 100644
--- a/apps/web/components/features/studio/editor/component-publish-dialog.tsx
+++ b/apps/web/components/features/studio/editor/component-publish-dialog.tsx
@@ -139,7 +139,7 @@ export function ComponentPublishDialog({
       <DialogTrigger asChild>
         <Button>
           <PlusCircle className="mr-2 h-4 w-4" />
-          Publish Component
+          Publish Component | OLD
         </Button>
       </DialogTrigger>
 
diff --git a/apps/web/package.json b/apps/web/package.json
index dfe4aac0..d29bed92 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -23,6 +23,7 @@
     "@babel/types": "^7.25.6",
     "@clerk/nextjs": "^6.11.2",
     "@clerk/themes": "^2.1.35",
+    "@codemirror/autocomplete": "^6.18.6",
     "@codesandbox/sandpack-react": "^2.19.9",
     "@hookform/resolvers": "^3.9.1",
     "@monaco-editor/react": "^4.6.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d307e381..59d7c5f9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,22 +13,22 @@ importers:
     dependencies:
       '@radix-ui/react-radio-group':
         specifier: ^1.2.3
-        version: 1.2.3(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
+        version: 1.2.3(react-dom@18.3.1)(react@18.3.1)
       '@tanstack/react-table':
         specifier: ^8.21.2
-        version: 8.21.2(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
+        version: 8.21.2(react-dom@18.3.1)(react@18.3.1)
       emblor:
         specifier: ^1.4.7
-        version: 1.4.7(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)(typescript@5.6.3)
+        version: 1.4.7(react-dom@18.3.1)(react@18.3.1)(typescript@5.6.3)
       jotai:
         specifier: 2.8.0
-        version: 2.8.0(react@19.0.0-rc-fb9a90fa48-20240614)
+        version: 2.8.0(react@18.3.1)
       next:
         specifier: ^15.2.1
-        version: 15.2.1(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
+        version: 15.2.1(react-dom@18.3.1)(react@18.3.1)
       recharts:
         specifier: ^2.15.1
-        version: 2.15.1(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
+        version: 2.15.1(react-dom@18.3.1)(react@18.3.1)
     devDependencies:
       prettier:
         specifier: ^3.2.5
@@ -127,9 +127,12 @@ importers:
       '@clerk/themes':
         specifier: ^2.1.35
         version: 2.1.39
+      '@codemirror/autocomplete':
+        specifier: ^6.18.6
+        version: 6.18.6
       '@codesandbox/sandpack-react':
         specifier: ^2.19.9
-        version: 2.19.9(@lezer/common@1.2.3)(react-dom@19.0.0)(react@19.0.0)
+        version: 2.19.9(react-dom@19.0.0)(react@19.0.0)
       '@hookform/resolvers':
         specifier: ^3.9.1
         version: 3.9.1(react-hook-form@7.53.1)
@@ -2216,13 +2219,8 @@ packages:
       csstype: 3.1.3
     dev: false
 
-  /@codemirror/autocomplete@6.18.2(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3):
-    resolution: {integrity: sha512-wJGylKtMFR/Ds6Gh01+OovXE/pncPiKZNNBKuC39pKnH+XK5d9+WsNqcrdxPjFPFTigRBqse0rfxw9UxrfyhPg==}
-    peerDependencies:
-      '@codemirror/language': ^6.0.0
-      '@codemirror/state': ^6.0.0
-      '@codemirror/view': ^6.0.0
-      '@lezer/common': ^1.0.0
+  /@codemirror/autocomplete@6.18.6:
+    resolution: {integrity: sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==}
     dependencies:
       '@codemirror/language': 6.10.3
       '@codemirror/state': 6.4.1
@@ -2239,23 +2237,21 @@ packages:
       '@lezer/common': 1.2.3
     dev: false
 
-  /@codemirror/lang-css@6.3.0(@codemirror/view@6.34.1):
+  /@codemirror/lang-css@6.3.0:
     resolution: {integrity: sha512-CyR4rUNG9OYcXDZwMPvJdtb6PHbBDKUc/6Na2BIwZ6dKab1JQqKa4di+RNRY9Myn7JB81vayKwJeQ7jEdmNVDA==}
     dependencies:
-      '@codemirror/autocomplete': 6.18.2(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3)
+      '@codemirror/autocomplete': 6.18.6
       '@codemirror/language': 6.10.3
       '@codemirror/state': 6.4.1
       '@lezer/common': 1.2.3
       '@lezer/css': 1.1.9
-    transitivePeerDependencies:
-      - '@codemirror/view'
     dev: false
 
   /@codemirror/lang-html@6.4.9:
     resolution: {integrity: sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==}
     dependencies:
-      '@codemirror/autocomplete': 6.18.2(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3)
-      '@codemirror/lang-css': 6.3.0(@codemirror/view@6.34.1)
+      '@codemirror/autocomplete': 6.18.6
+      '@codemirror/lang-css': 6.3.0
       '@codemirror/lang-javascript': 6.2.2
       '@codemirror/language': 6.10.3
       '@codemirror/state': 6.4.1
@@ -2268,9 +2264,9 @@ packages:
   /@codemirror/lang-javascript@6.2.2:
     resolution: {integrity: sha512-VGQfY+FCc285AhWuwjYxQyUQcYurWlxdKYT4bqwr3Twnd5wP5WSeu52t4tvvuWmljT4EmgEgZCqSieokhtY8hg==}
     dependencies:
-      '@codemirror/autocomplete': 6.18.2(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3)
+      '@codemirror/autocomplete': 6.18.6
       '@codemirror/language': 6.10.3
-      '@codemirror/lint': 6.8.2
+      '@codemirror/lint': 6.8.5
       '@codemirror/state': 6.4.1
       '@codemirror/view': 6.34.1
       '@lezer/common': 1.2.3
@@ -2288,11 +2284,11 @@ packages:
       style-mod: 4.1.2
     dev: false
 
-  /@codemirror/lint@6.8.2:
-    resolution: {integrity: sha512-PDFG5DjHxSEjOXk9TQYYVjZDqlZTFaDBfhQixHnQOEVDDNHUbEh/hstAjcQJaA6FQdZTD1hquXTK0rVBLADR1g==}
+  /@codemirror/lint@6.8.5:
+    resolution: {integrity: sha512-s3n3KisH7dx3vsoeGMxsbRAgKe4O1vbrnKBClm99PU0fWxmxsx5rR2PfqQgIt+2MMJBHbiJ5rfIdLYfB9NNvsA==}
     dependencies:
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/view': 6.36.5
       crelt: 1.0.6
     dev: false
 
@@ -2300,6 +2296,12 @@ packages:
     resolution: {integrity: sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==}
     dev: false
 
+  /@codemirror/state@6.5.2:
+    resolution: {integrity: sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==}
+    dependencies:
+      '@marijn/find-cluster-break': 1.0.2
+    dev: false
+
   /@codemirror/view@6.34.1:
     resolution: {integrity: sha512-t1zK/l9UiRqwUNPm+pdIT0qzJlzuVckbTEMVNFhfWkGiBQClstzg+78vedCvLSX0xJEZ6lwZbPpnljL7L6iwMQ==}
     dependencies:
@@ -2308,6 +2310,14 @@ packages:
       w3c-keyname: 2.2.8
     dev: false
 
+  /@codemirror/view@6.36.5:
+    resolution: {integrity: sha512-cd+FZEUlu3GQCYnguYm3EkhJ8KJVisqqUsCOKedBoAt/d9c76JUUap6U0UrpElln5k6VyrEOYliMuDAKIeDQLg==}
+    dependencies:
+      '@codemirror/state': 6.5.2
+      style-mod: 4.1.2
+      w3c-keyname: 2.2.8
+    dev: false
+
   /@codesandbox/nodebox@0.1.8:
     resolution: {integrity: sha512-2VRS6JDSk+M+pg56GA6CryyUSGPjBEe8Pnae0QL3jJF1mJZJVMDKr93gJRtBbLkfZN6LD/DwMtf+2L0bpWrjqg==}
     dependencies:
@@ -2326,15 +2336,15 @@ packages:
       static-browser-server: 1.0.3
     dev: false
 
-  /@codesandbox/sandpack-react@2.19.9(@lezer/common@1.2.3)(react-dom@19.0.0)(react@19.0.0):
+  /@codesandbox/sandpack-react@2.19.9(react-dom@19.0.0)(react@19.0.0):
     resolution: {integrity: sha512-a5uXWYdg5Wtz6VHwXIegdS7C63foCofFa/eHO9crtPp1Yf5/npKimds0S3kKJL7jpOmMAascEvAOqOy5S9e6qQ==}
     peerDependencies:
       react: ^16.8.0 || ^17 || ^18
       react-dom: ^16.8.0 || ^17 || ^18
     dependencies:
-      '@codemirror/autocomplete': 6.18.2(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.3)
+      '@codemirror/autocomplete': 6.18.6
       '@codemirror/commands': 6.7.1
-      '@codemirror/lang-css': 6.3.0(@codemirror/view@6.34.1)
+      '@codemirror/lang-css': 6.3.0
       '@codemirror/lang-html': 6.4.9
       '@codemirror/lang-javascript': 6.2.2
       '@codemirror/language': 6.10.3
@@ -2353,8 +2363,6 @@ packages:
       react-devtools-inline: 4.4.0
       react-dom: 19.0.0(react@19.0.0)
       react-is: 17.0.2
-    transitivePeerDependencies:
-      - '@lezer/common'
     dev: false
 
   /@cspotcode/source-map-support@0.8.1:
@@ -2844,26 +2852,26 @@ packages:
       '@floating-ui/utils': 0.2.8
     dev: false
 
-  /@floating-ui/react-dom@2.1.2(react-dom@19.0.0)(react@19.0.0):
+  /@floating-ui/react-dom@2.1.2(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
     dependencies:
       '@floating-ui/dom': 1.6.12
-      react: 19.0.0
-      react-dom: 19.0.0(react@19.0.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@floating-ui/react-dom@2.1.2(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@floating-ui/react-dom@2.1.2(react-dom@19.0.0)(react@19.0.0):
     resolution: {integrity: sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
     dependencies:
       '@floating-ui/dom': 1.6.12
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
     dev: false
 
   /@floating-ui/utils@0.2.8:
@@ -3163,6 +3171,10 @@ packages:
       '@lezer/common': 1.2.3
     dev: false
 
+  /@marijn/find-cluster-break@1.0.2:
+    resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
+    dev: false
+
   /@microsoft/tsdoc-config@0.16.2:
     resolution: {integrity: sha512-OGiIzzoBLgWWR0UdRJX98oYO+XKGf7tiK4Zk6tQ/E4IJqGCe7dvkTvgDZV5cFJUzLGDOjeAXrnZoA6QkVySuxw==}
     dependencies:
@@ -3525,7 +3537,7 @@ packages:
       react-dom: 19.0.0(react@19.0.0)
     dev: false
 
-  /@radix-ui/react-arrow@1.1.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-arrow@1.1.0(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==}
     peerDependencies:
       '@types/react': '*'
@@ -3538,9 +3550,9 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/react-primitive': 2.0.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@radix-ui/react-primitive': 2.0.0(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
   /@radix-ui/react-arrow@1.1.2(@types/react-dom@19.0.4)(@types/react@19.0.10)(react-dom@19.0.0)(react@19.0.0):
@@ -3713,7 +3725,7 @@ packages:
       react-dom: 19.0.0(react@19.0.0)
     dev: false
 
-  /@radix-ui/react-collection@1.1.2(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-collection@1.1.2(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-9z54IEKRxIa9VityapoEYMuByaG42iSy1ZXlY2KcuLSEtq8x4987/N6m15ppoMffgZX72gER2uHe1D9Y6Unlcw==}
     peerDependencies:
       '@types/react': '*'
@@ -3726,21 +3738,21 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.1(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-context': 1.1.1(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-primitive': 2.0.2(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-slot': 1.1.2(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@radix-ui/react-compose-refs': 1.1.1(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.2(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.2(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@radix-ui/react-compose-refs@1.0.0(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-compose-refs@1.0.0(react@18.3.1):
     resolution: {integrity: sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.26.0
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-compose-refs@1.0.1(@types/react@19.0.10)(react@19.0.0):
@@ -3757,7 +3769,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@radix-ui/react-compose-refs@1.0.1(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-compose-refs@1.0.1(react@18.3.1):
     resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
     peerDependencies:
       '@types/react': '*'
@@ -3767,7 +3779,7 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.26.0
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-compose-refs@1.1.0(@types/react@19.0.10)(react@19.0.0):
@@ -3783,7 +3795,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@radix-ui/react-compose-refs@1.1.0(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-compose-refs@1.1.0(react@18.3.1):
     resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==}
     peerDependencies:
       '@types/react': '*'
@@ -3792,7 +3804,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-compose-refs@1.1.1(@types/react@19.0.10)(react@19.0.0):
@@ -3808,7 +3820,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@radix-ui/react-compose-refs@1.1.1(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-compose-refs@1.1.1(react@18.3.1):
     resolution: {integrity: sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==}
     peerDependencies:
       '@types/react': '*'
@@ -3817,7 +3829,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-context-menu@2.2.6(@types/react-dom@19.0.4)(@types/react@19.0.10)(react-dom@19.0.0)(react@19.0.0):
@@ -3845,13 +3857,13 @@ packages:
       react-dom: 19.0.0(react@19.0.0)
     dev: false
 
-  /@radix-ui/react-context@1.0.0(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-context@1.0.0(react@18.3.1):
     resolution: {integrity: sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.26.0
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-context@1.0.1(@types/react@19.0.10)(react@19.0.0):
@@ -3868,7 +3880,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@radix-ui/react-context@1.0.1(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-context@1.0.1(react@18.3.1):
     resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==}
     peerDependencies:
       '@types/react': '*'
@@ -3878,7 +3890,7 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.26.0
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-context@1.1.0(@types/react@19.0.10)(react@19.0.0):
@@ -3894,7 +3906,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@radix-ui/react-context@1.1.0(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-context@1.1.0(react@18.3.1):
     resolution: {integrity: sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==}
     peerDependencies:
       '@types/react': '*'
@@ -3903,7 +3915,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-context@1.1.1(@types/react@19.0.10)(react@19.0.0):
@@ -3919,7 +3931,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@radix-ui/react-context@1.1.1(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-context@1.1.1(react@18.3.1):
     resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==}
     peerDependencies:
       '@types/react': '*'
@@ -3928,10 +3940,10 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
     dev: false
 
-  /@radix-ui/react-dialog@1.0.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-dialog@1.0.0(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-Yn9YU+QlHYLWwV1XfKiqnGVpWYWk6MeBVM6x/bcoyPvxgjQGoeT35482viLPctTMWoMw0PoHgqfSox7Ig+957Q==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
@@ -3939,26 +3951,26 @@ packages:
     dependencies:
       '@babel/runtime': 7.26.0
       '@radix-ui/primitive': 1.0.0
-      '@radix-ui/react-compose-refs': 1.0.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-context': 1.0.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-dismissable-layer': 1.0.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-focus-guards': 1.0.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-focus-scope': 1.0.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-id': 1.0.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-portal': 1.0.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-presence': 1.0.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-primitive': 1.0.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-slot': 1.0.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-use-controllable-state': 1.0.0(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@radix-ui/react-compose-refs': 1.0.0(react@18.3.1)
+      '@radix-ui/react-context': 1.0.0(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.0.0(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.0.0(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.0.0(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-id': 1.0.0(react@18.3.1)
+      '@radix-ui/react-portal': 1.0.0(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-presence': 1.0.0(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.0(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-slot': 1.0.0(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.0.0(react@18.3.1)
       aria-hidden: 1.2.4
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
-      react-remove-scroll: 2.5.4(react@19.0.0-rc-fb9a90fa48-20240614)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.5.4(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
     dev: false
 
-  /@radix-ui/react-dialog@1.0.4(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-dialog@1.0.4(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-hJtRy/jPULGQZceSAP2Re6/4NpKo8im6V8P2hUqZsdFiSL8l35kYsw3qbRI6Ay5mQd2+wlLqje770eq+RJ3yZg==}
     peerDependencies:
       '@types/react': '*'
@@ -3973,21 +3985,21 @@ packages:
     dependencies:
       '@babel/runtime': 7.26.0
       '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-context': 1.0.1(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-dismissable-layer': 1.0.4(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-focus-guards': 1.0.1(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-focus-scope': 1.0.3(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-id': 1.0.1(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-portal': 1.0.3(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-presence': 1.0.1(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-primitive': 1.0.3(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-slot': 1.0.2(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-use-controllable-state': 1.0.1(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@radix-ui/react-compose-refs': 1.0.1(react@18.3.1)
+      '@radix-ui/react-context': 1.0.1(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.0.4(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.0.1(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-id': 1.0.1(react@18.3.1)
+      '@radix-ui/react-portal': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-presence': 1.0.1(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-slot': 1.0.2(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.0.1(react@18.3.1)
       aria-hidden: 1.2.4
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
-      react-remove-scroll: 2.5.5(react@19.0.0-rc-fb9a90fa48-20240614)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.5.5(react@18.3.1)
     dev: false
 
   /@radix-ui/react-dialog@1.0.5(@types/react-dom@19.0.4)(@types/react@19.0.10)(react-dom@19.0.0)(react@19.0.0):
@@ -4070,7 +4082,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@radix-ui/react-direction@1.1.0(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-direction@1.1.0(react@18.3.1):
     resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==}
     peerDependencies:
       '@types/react': '*'
@@ -4079,10 +4091,10 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
     dev: false
 
-  /@radix-ui/react-dismissable-layer@1.0.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-dismissable-layer@1.0.0(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
@@ -4090,15 +4102,15 @@ packages:
     dependencies:
       '@babel/runtime': 7.26.0
       '@radix-ui/primitive': 1.0.0
-      '@radix-ui/react-compose-refs': 1.0.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-primitive': 1.0.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-use-callback-ref': 1.0.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-use-escape-keydown': 1.0.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@radix-ui/react-compose-refs': 1.0.0(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.0(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.0.0(react@18.3.1)
+      '@radix-ui/react-use-escape-keydown': 1.0.0(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@radix-ui/react-dismissable-layer@1.0.4(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-dismissable-layer@1.0.4(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==}
     peerDependencies:
       '@types/react': '*'
@@ -4113,12 +4125,12 @@ packages:
     dependencies:
       '@babel/runtime': 7.26.0
       '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-primitive': 1.0.3(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-use-callback-ref': 1.0.1(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-use-escape-keydown': 1.0.3(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@radix-ui/react-compose-refs': 1.0.1(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.0.1(react@18.3.1)
+      '@radix-ui/react-use-escape-keydown': 1.0.3(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
   /@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@19.0.4)(@types/react@19.0.10)(react-dom@19.0.0)(react@19.0.0):
@@ -4170,7 +4182,7 @@ packages:
       react-dom: 19.0.0(react@19.0.0)
     dev: false
 
-  /@radix-ui/react-dismissable-layer@1.1.1(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-dismissable-layer@1.1.1(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==}
     peerDependencies:
       '@types/react': '*'
@@ -4184,12 +4196,12 @@ packages:
         optional: true
     dependencies:
       '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-compose-refs': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-primitive': 2.0.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-use-callback-ref': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-use-escape-keydown': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@radix-ui/react-compose-refs': 1.1.0(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(react@18.3.1)
+      '@radix-ui/react-use-escape-keydown': 1.1.0(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
   /@radix-ui/react-dismissable-layer@1.1.5(@types/react-dom@19.0.4)(@types/react@19.0.10)(react-dom@19.0.0)(react@19.0.0):
@@ -4242,13 +4254,13 @@ packages:
       react-dom: 19.0.0(react@19.0.0)
     dev: false
 
-  /@radix-ui/react-focus-guards@1.0.0(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-focus-guards@1.0.0(react@18.3.1):
     resolution: {integrity: sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.26.0
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-focus-guards@1.0.1(@types/react@19.0.10)(react@19.0.0):
@@ -4265,7 +4277,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@radix-ui/react-focus-guards@1.0.1(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-focus-guards@1.0.1(react@18.3.1):
     resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==}
     peerDependencies:
       '@types/react': '*'
@@ -4275,7 +4287,7 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.26.0
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-focus-guards@1.1.1(@types/react@19.0.10)(react@19.0.0):
@@ -4291,7 +4303,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@radix-ui/react-focus-guards@1.1.1(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-focus-guards@1.1.1(react@18.3.1):
     resolution: {integrity: sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==}
     peerDependencies:
       '@types/react': '*'
@@ -4300,24 +4312,24 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
     dev: false
 
-  /@radix-ui/react-focus-scope@1.0.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-focus-scope@1.0.0(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-C4SWtsULLGf/2L4oGeIHlvWQx7Rf+7cX/vKOAD2dXW0A1b5QXwi3wWeaEgW+wn+SEVrraMUk05vLU9fZZz5HbQ==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.26.0
-      '@radix-ui/react-compose-refs': 1.0.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-primitive': 1.0.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-use-callback-ref': 1.0.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@radix-ui/react-compose-refs': 1.0.0(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.0(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.0.0(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@radix-ui/react-focus-scope@1.0.3(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-focus-scope@1.0.3(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==}
     peerDependencies:
       '@types/react': '*'
@@ -4331,11 +4343,11 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.26.0
-      '@radix-ui/react-compose-refs': 1.0.1(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-primitive': 1.0.3(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-use-callback-ref': 1.0.1(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@radix-ui/react-compose-refs': 1.0.1(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.0.1(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
   /@radix-ui/react-focus-scope@1.0.4(@types/react-dom@19.0.4)(@types/react@19.0.10)(react-dom@19.0.0)(react@19.0.0):
@@ -4383,7 +4395,7 @@ packages:
       react-dom: 19.0.0(react@19.0.0)
     dev: false
 
-  /@radix-ui/react-focus-scope@1.1.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-focus-scope@1.1.0(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==}
     peerDependencies:
       '@types/react': '*'
@@ -4396,11 +4408,11 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-primitive': 2.0.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-use-callback-ref': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@radix-ui/react-compose-refs': 1.1.0(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
   /@radix-ui/react-focus-scope@1.1.2(@types/react-dom@19.0.4)(@types/react@19.0.10)(react-dom@19.0.0)(react@19.0.0):
@@ -4461,14 +4473,14 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@radix-ui/react-id@1.0.0(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-id@1.0.0(react@18.3.1):
     resolution: {integrity: sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.26.0
-      '@radix-ui/react-use-layout-effect': 1.0.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      '@radix-ui/react-use-layout-effect': 1.0.0(react@18.3.1)
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-id@1.0.1(@types/react@19.0.10)(react@19.0.0):
@@ -4486,7 +4498,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@radix-ui/react-id@1.0.1(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-id@1.0.1(react@18.3.1):
     resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
     peerDependencies:
       '@types/react': '*'
@@ -4496,8 +4508,8 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.26.0
-      '@radix-ui/react-use-layout-effect': 1.0.1(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      '@radix-ui/react-use-layout-effect': 1.0.1(react@18.3.1)
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-id@1.1.0(@types/react@19.0.10)(react@19.0.0):
@@ -4514,7 +4526,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@radix-ui/react-id@1.1.0(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-id@1.1.0(react@18.3.1):
     resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==}
     peerDependencies:
       '@types/react': '*'
@@ -4523,8 +4535,8 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      '@radix-ui/react-use-layout-effect': 1.1.0(react@18.3.1)
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-label@2.1.0(@types/react-dom@19.0.4)(@types/react@19.0.10)(react-dom@19.0.0)(react@19.0.0):
@@ -4688,7 +4700,7 @@ packages:
       react-remove-scroll: 2.6.0(@types/react@19.0.10)(react@19.0.0)
     dev: false
 
-  /@radix-ui/react-popover@1.1.2(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-popover@1.1.2(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-u2HRUyWW+lOiA2g0Le0tMmT55FGOEWHwPFt1EPfbLly7uXQExFo5duNKqG2DzmFXIdqOeNd+TpE8baHWJCyP9w==}
     peerDependencies:
       '@types/react': '*'
@@ -4702,22 +4714,22 @@ packages:
         optional: true
     dependencies:
       '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-compose-refs': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-context': 1.1.1(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-dismissable-layer': 1.1.1(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-focus-guards': 1.1.1(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-focus-scope': 1.1.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-id': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-popper': 1.2.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-portal': 1.1.2(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-presence': 1.1.1(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-primitive': 2.0.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-slot': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-use-controllable-state': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@radix-ui/react-compose-refs': 1.1.0(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.1(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.1(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.0(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.0(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.2(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.1(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.0(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(react@18.3.1)
       aria-hidden: 1.2.4
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
-      react-remove-scroll: 2.6.0(react@19.0.0-rc-fb9a90fa48-20240614)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.6.0(react@18.3.1)
     dev: false
 
   /@radix-ui/react-popper@1.2.0(@types/react-dom@19.0.4)(@types/react@19.0.10)(react-dom@19.0.0)(react@19.0.0):
@@ -4749,7 +4761,7 @@ packages:
       react-dom: 19.0.0(react@19.0.0)
     dev: false
 
-  /@radix-ui/react-popper@1.2.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-popper@1.2.0(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==}
     peerDependencies:
       '@types/react': '*'
@@ -4762,18 +4774,18 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@floating-ui/react-dom': 2.1.2(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-arrow': 1.1.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-compose-refs': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-context': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-primitive': 2.0.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-use-callback-ref': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-use-layout-effect': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-use-rect': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-use-size': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@floating-ui/react-dom': 2.1.2(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-arrow': 1.1.0(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.0(react@18.3.1)
+      '@radix-ui/react-context': 1.1.0(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(react@18.3.1)
+      '@radix-ui/react-use-rect': 1.1.0(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(react@18.3.1)
       '@radix-ui/rect': 1.1.0
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
   /@radix-ui/react-popper@1.2.2(@types/react-dom@19.0.4)(@types/react@19.0.10)(react-dom@19.0.0)(react@19.0.0):
@@ -4805,19 +4817,19 @@ packages:
       react-dom: 19.0.0(react@19.0.0)
     dev: false
 
-  /@radix-ui/react-portal@1.0.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-portal@1.0.0(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.26.0
-      '@radix-ui/react-primitive': 1.0.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@radix-ui/react-primitive': 1.0.0(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@radix-ui/react-portal@1.0.3(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-portal@1.0.3(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==}
     peerDependencies:
       '@types/react': '*'
@@ -4831,9 +4843,9 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.26.0
-      '@radix-ui/react-primitive': 1.0.3(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
   /@radix-ui/react-portal@1.0.4(@types/react-dom@19.0.4)(@types/react@19.0.10)(react-dom@19.0.0)(react@19.0.0):
@@ -4878,7 +4890,7 @@ packages:
       react-dom: 19.0.0(react@19.0.0)
     dev: false
 
-  /@radix-ui/react-portal@1.1.2(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-portal@1.1.2(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==}
     peerDependencies:
       '@types/react': '*'
@@ -4891,10 +4903,10 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/react-primitive': 2.0.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-use-layout-effect': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@radix-ui/react-primitive': 2.0.0(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
   /@radix-ui/react-portal@1.1.4(@types/react-dom@19.0.4)(@types/react@19.0.10)(react-dom@19.0.0)(react@19.0.0):
@@ -4918,17 +4930,17 @@ packages:
       react-dom: 19.0.0(react@19.0.0)
     dev: false
 
-  /@radix-ui/react-presence@1.0.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-presence@1.0.0(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.26.0
-      '@radix-ui/react-compose-refs': 1.0.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-use-layout-effect': 1.0.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@radix-ui/react-compose-refs': 1.0.0(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.0.0(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
   /@radix-ui/react-presence@1.0.1(@types/react-dom@19.0.4)(@types/react@19.0.10)(react-dom@19.0.0)(react@19.0.0):
@@ -4953,7 +4965,7 @@ packages:
       react-dom: 19.0.0(react@19.0.0)
     dev: false
 
-  /@radix-ui/react-presence@1.0.1(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-presence@1.0.1(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
     peerDependencies:
       '@types/react': '*'
@@ -4967,10 +4979,10 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.26.0
-      '@radix-ui/react-compose-refs': 1.0.1(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-use-layout-effect': 1.0.1(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@radix-ui/react-compose-refs': 1.0.1(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.0.1(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
   /@radix-ui/react-presence@1.1.1(@types/react-dom@19.0.4)(@types/react@19.0.10)(react-dom@19.0.0)(react@19.0.0):
@@ -4994,7 +5006,7 @@ packages:
       react-dom: 19.0.0(react@19.0.0)
     dev: false
 
-  /@radix-ui/react-presence@1.1.1(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-presence@1.1.1(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==}
     peerDependencies:
       '@types/react': '*'
@@ -5007,10 +5019,10 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-use-layout-effect': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@radix-ui/react-compose-refs': 1.1.0(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
   /@radix-ui/react-presence@1.1.2(@types/react-dom@19.0.4)(@types/react@19.0.10)(react-dom@19.0.0)(react@19.0.0):
@@ -5034,7 +5046,7 @@ packages:
       react-dom: 19.0.0(react@19.0.0)
     dev: false
 
-  /@radix-ui/react-presence@1.1.2(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-presence@1.1.2(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==}
     peerDependencies:
       '@types/react': '*'
@@ -5047,22 +5059,22 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.1(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-use-layout-effect': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@radix-ui/react-compose-refs': 1.1.1(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@radix-ui/react-primitive@1.0.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-primitive@1.0.0(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.26.0
-      '@radix-ui/react-slot': 1.0.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@radix-ui/react-slot': 1.0.0(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
   /@radix-ui/react-primitive@1.0.3(@types/react-dom@19.0.4)(@types/react@19.0.10)(react-dom@19.0.0)(react@19.0.0):
@@ -5086,7 +5098,7 @@ packages:
       react-dom: 19.0.0(react@19.0.0)
     dev: false
 
-  /@radix-ui/react-primitive@1.0.3(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-primitive@1.0.3(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
     peerDependencies:
       '@types/react': '*'
@@ -5100,9 +5112,9 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.26.0
-      '@radix-ui/react-slot': 1.0.2(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@radix-ui/react-slot': 1.0.2(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
   /@radix-ui/react-primitive@2.0.0(@types/react-dom@19.0.4)(@types/react@19.0.10)(react-dom@19.0.0)(react@19.0.0):
@@ -5125,7 +5137,7 @@ packages:
       react-dom: 19.0.0(react@19.0.0)
     dev: false
 
-  /@radix-ui/react-primitive@2.0.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-primitive@2.0.0(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==}
     peerDependencies:
       '@types/react': '*'
@@ -5138,9 +5150,9 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/react-slot': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@radix-ui/react-slot': 1.1.0(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
   /@radix-ui/react-primitive@2.0.1(@types/react-dom@19.0.4)(@types/react@19.0.10)(react-dom@19.0.0)(react@19.0.0):
@@ -5183,7 +5195,7 @@ packages:
       react-dom: 19.0.0(react@19.0.0)
     dev: false
 
-  /@radix-ui/react-primitive@2.0.2(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-primitive@2.0.2(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==}
     peerDependencies:
       '@types/react': '*'
@@ -5196,9 +5208,9 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/react-slot': 1.1.2(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@radix-ui/react-slot': 1.1.2(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
   /@radix-ui/react-progress@1.1.1(@types/react-dom@19.0.4)(@types/react@19.0.10)(react-dom@19.0.0)(react@19.0.0):
@@ -5222,7 +5234,7 @@ packages:
       react-dom: 19.0.0(react@19.0.0)
     dev: false
 
-  /@radix-ui/react-radio-group@1.2.3(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-radio-group@1.2.3(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-xtCsqt8Rp09FK50ItqEqTJ7Sxanz8EM8dnkVIhJrc/wkMMomSmXHvYbhv3E7Zx4oXh98aaLt9W679SUYXg4IDA==}
     peerDependencies:
       '@types/react': '*'
@@ -5236,17 +5248,17 @@ packages:
         optional: true
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-compose-refs': 1.1.1(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-context': 1.1.1(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-direction': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-presence': 1.1.2(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-primitive': 2.0.2(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-roving-focus': 1.1.2(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-use-controllable-state': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-use-previous': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-use-size': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@radix-ui/react-compose-refs': 1.1.1(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.2(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.2(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
   /@radix-ui/react-roving-focus@1.1.0(@types/react-dom@19.0.4)(@types/react@19.0.10)(react-dom@19.0.0)(react@19.0.0):
@@ -5305,7 +5317,7 @@ packages:
       react-dom: 19.0.0(react@19.0.0)
     dev: false
 
-  /@radix-ui/react-roving-focus@1.1.2(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-roving-focus@1.1.2(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-zgMQWkNO169GtGqRvYrzb0Zf8NhMHS2DuEB/TiEmVnpr5OqPU3i8lfbxaAmC2J/KYuIQxyoQQ6DxepyXp61/xw==}
     peerDependencies:
       '@types/react': '*'
@@ -5319,16 +5331,16 @@ packages:
         optional: true
     dependencies:
       '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-collection': 1.1.2(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-compose-refs': 1.1.1(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-context': 1.1.1(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-direction': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-id': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-primitive': 2.0.2(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-use-callback-ref': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-use-controllable-state': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@radix-ui/react-collection': 1.1.2(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.1(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.2(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
   /@radix-ui/react-scroll-area@1.2.1(@types/react-dom@19.0.4)(@types/react@19.0.10)(react-dom@19.0.0)(react@19.0.0):
@@ -5419,14 +5431,14 @@ packages:
       react-dom: 19.0.0(react@19.0.0)
     dev: false
 
-  /@radix-ui/react-slot@1.0.0(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-slot@1.0.0(react@18.3.1):
     resolution: {integrity: sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.26.0
-      '@radix-ui/react-compose-refs': 1.0.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      '@radix-ui/react-compose-refs': 1.0.0(react@18.3.1)
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-slot@1.0.2(@types/react@19.0.10)(react@19.0.0):
@@ -5444,7 +5456,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@radix-ui/react-slot@1.0.2(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-slot@1.0.2(react@18.3.1):
     resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
     peerDependencies:
       '@types/react': '*'
@@ -5454,8 +5466,8 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.26.0
-      '@radix-ui/react-compose-refs': 1.0.1(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      '@radix-ui/react-compose-refs': 1.0.1(react@18.3.1)
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-slot@1.1.0(@types/react@19.0.10)(react@19.0.0):
@@ -5472,7 +5484,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@radix-ui/react-slot@1.1.0(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-slot@1.1.0(react@18.3.1):
     resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==}
     peerDependencies:
       '@types/react': '*'
@@ -5481,8 +5493,8 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      '@radix-ui/react-compose-refs': 1.1.0(react@18.3.1)
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-slot@1.1.1(@types/react@19.0.10)(react@19.0.0):
@@ -5513,7 +5525,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@radix-ui/react-slot@1.1.2(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-slot@1.1.2(react@18.3.1):
     resolution: {integrity: sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==}
     peerDependencies:
       '@types/react': '*'
@@ -5522,8 +5534,8 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.1(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      '@radix-ui/react-compose-refs': 1.1.1(react@18.3.1)
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-switch@1.1.1(@types/react-dom@19.0.4)(@types/react@19.0.10)(react-dom@19.0.0)(react@19.0.0):
@@ -5663,13 +5675,13 @@ packages:
       react-dom: 19.0.0(react@19.0.0)
     dev: false
 
-  /@radix-ui/react-use-callback-ref@1.0.0(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-use-callback-ref@1.0.0(react@18.3.1):
     resolution: {integrity: sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.26.0
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-use-callback-ref@1.0.1(@types/react@19.0.10)(react@19.0.0):
@@ -5686,7 +5698,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@radix-ui/react-use-callback-ref@1.0.1(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-use-callback-ref@1.0.1(react@18.3.1):
     resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==}
     peerDependencies:
       '@types/react': '*'
@@ -5696,7 +5708,7 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.26.0
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-use-callback-ref@1.1.0(@types/react@19.0.10)(react@19.0.0):
@@ -5712,7 +5724,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@radix-ui/react-use-callback-ref@1.1.0(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-use-callback-ref@1.1.0(react@18.3.1):
     resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
     peerDependencies:
       '@types/react': '*'
@@ -5721,17 +5733,17 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
     dev: false
 
-  /@radix-ui/react-use-controllable-state@1.0.0(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-use-controllable-state@1.0.0(react@18.3.1):
     resolution: {integrity: sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.26.0
-      '@radix-ui/react-use-callback-ref': 1.0.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      '@radix-ui/react-use-callback-ref': 1.0.0(react@18.3.1)
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-use-controllable-state@1.0.1(@types/react@19.0.10)(react@19.0.0):
@@ -5749,7 +5761,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@radix-ui/react-use-controllable-state@1.0.1(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-use-controllable-state@1.0.1(react@18.3.1):
     resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==}
     peerDependencies:
       '@types/react': '*'
@@ -5759,8 +5771,8 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.26.0
-      '@radix-ui/react-use-callback-ref': 1.0.1(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      '@radix-ui/react-use-callback-ref': 1.0.1(react@18.3.1)
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-use-controllable-state@1.1.0(@types/react@19.0.10)(react@19.0.0):
@@ -5777,7 +5789,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@radix-ui/react-use-controllable-state@1.1.0(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-use-controllable-state@1.1.0(react@18.3.1):
     resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==}
     peerDependencies:
       '@types/react': '*'
@@ -5786,18 +5798,18 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      '@radix-ui/react-use-callback-ref': 1.1.0(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@radix-ui/react-use-escape-keydown@1.0.0(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-use-escape-keydown@1.0.0(react@18.3.1):
     resolution: {integrity: sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.26.0
-      '@radix-ui/react-use-callback-ref': 1.0.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      '@radix-ui/react-use-callback-ref': 1.0.0(react@18.3.1)
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-use-escape-keydown@1.0.3(@types/react@19.0.10)(react@19.0.0):
@@ -5815,7 +5827,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@radix-ui/react-use-escape-keydown@1.0.3(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-use-escape-keydown@1.0.3(react@18.3.1):
     resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==}
     peerDependencies:
       '@types/react': '*'
@@ -5825,8 +5837,8 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.26.0
-      '@radix-ui/react-use-callback-ref': 1.0.1(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      '@radix-ui/react-use-callback-ref': 1.0.1(react@18.3.1)
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-use-escape-keydown@1.1.0(@types/react@19.0.10)(react@19.0.0):
@@ -5843,7 +5855,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@radix-ui/react-use-escape-keydown@1.1.0(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-use-escape-keydown@1.1.0(react@18.3.1):
     resolution: {integrity: sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==}
     peerDependencies:
       '@types/react': '*'
@@ -5852,17 +5864,17 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      '@radix-ui/react-use-callback-ref': 1.1.0(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@radix-ui/react-use-layout-effect@1.0.0(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-use-layout-effect@1.0.0(react@18.3.1):
     resolution: {integrity: sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.26.0
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-use-layout-effect@1.0.1(@types/react@19.0.10)(react@19.0.0):
@@ -5879,7 +5891,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@radix-ui/react-use-layout-effect@1.0.1(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-use-layout-effect@1.0.1(react@18.3.1):
     resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==}
     peerDependencies:
       '@types/react': '*'
@@ -5889,7 +5901,7 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.26.0
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-use-layout-effect@1.1.0(@types/react@19.0.10)(react@19.0.0):
@@ -5905,7 +5917,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@radix-ui/react-use-layout-effect@1.1.0(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-use-layout-effect@1.1.0(react@18.3.1):
     resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==}
     peerDependencies:
       '@types/react': '*'
@@ -5914,7 +5926,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-use-previous@1.1.0(@types/react@19.0.10)(react@19.0.0):
@@ -5930,7 +5942,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@radix-ui/react-use-previous@1.1.0(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-use-previous@1.1.0(react@18.3.1):
     resolution: {integrity: sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==}
     peerDependencies:
       '@types/react': '*'
@@ -5939,7 +5951,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-use-rect@1.1.0(@types/react@19.0.10)(react@19.0.0):
@@ -5956,7 +5968,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@radix-ui/react-use-rect@1.1.0(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-use-rect@1.1.0(react@18.3.1):
     resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==}
     peerDependencies:
       '@types/react': '*'
@@ -5966,7 +5978,7 @@ packages:
         optional: true
     dependencies:
       '@radix-ui/rect': 1.1.0
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-use-size@1.1.0(@types/react@19.0.10)(react@19.0.0):
@@ -5983,7 +5995,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@radix-ui/react-use-size@1.1.0(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@radix-ui/react-use-size@1.1.0(react@18.3.1):
     resolution: {integrity: sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==}
     peerDependencies:
       '@types/react': '*'
@@ -5992,8 +6004,8 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.0(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      '@radix-ui/react-use-layout-effect': 1.1.0(react@18.3.1)
+      react: 18.3.1
     dev: false
 
   /@radix-ui/react-visually-hidden@1.1.0(@types/react-dom@19.0.4)(@types/react@19.0.10)(react-dom@19.0.0)(react@19.0.0):
@@ -7398,7 +7410,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /@tanstack/react-table@8.21.2(react-dom@19.0.0)(react@19.0.0):
+  /@tanstack/react-table@8.21.2(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-11tNlEDTdIhMJba2RBH+ecJ9l1zgS2kjmexDPAraulc8jeNA4xocSNeyzextT0XJyASil4XsCYlJmf5jEWAtYg==}
     engines: {node: '>=12'}
     peerDependencies:
@@ -7406,11 +7418,11 @@ packages:
       react-dom: '>=16.8'
     dependencies:
       '@tanstack/table-core': 8.21.2
-      react: 19.0.0
-      react-dom: 19.0.0(react@19.0.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@tanstack/react-table@8.21.2(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@tanstack/react-table@8.21.2(react-dom@19.0.0)(react@19.0.0):
     resolution: {integrity: sha512-11tNlEDTdIhMJba2RBH+ecJ9l1zgS2kjmexDPAraulc8jeNA4xocSNeyzextT0XJyASil4XsCYlJmf5jEWAtYg==}
     engines: {node: '>=12'}
     peerDependencies:
@@ -7418,8 +7430,8 @@ packages:
       react-dom: '>=16.8'
     dependencies:
       '@tanstack/table-core': 8.21.2
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
     dev: false
 
   /@tanstack/table-core@8.21.2:
@@ -8800,15 +8812,15 @@ packages:
       cli-color: 0.3.2
     dev: true
 
-  /cmdk@0.2.1(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /cmdk@0.2.1(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-U6//9lQ6JvT47+6OF6Gi8BvkxYQ8SCRRSKIJkthIMsFsLZRG0cKvTtuTaefyIKMQb8rvvXy0wGdpTNq/jPtm+g==}
     peerDependencies:
       react: ^18.0.0
       react-dom: ^18.0.0
     dependencies:
-      '@radix-ui/react-dialog': 1.0.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@radix-ui/react-dialog': 1.0.0(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
     dev: false
@@ -8849,6 +8861,7 @@ packages:
 
   /color-string@1.9.1:
     resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
+    requiresBuild: true
     dependencies:
       color-name: 1.1.4
       simple-swizzle: 0.2.2
@@ -8858,6 +8871,7 @@ packages:
   /color@4.2.3:
     resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
     engines: {node: '>=12.5.0'}
+    requiresBuild: true
     dependencies:
       color-convert: 2.0.1
       color-string: 1.9.1
@@ -9234,6 +9248,7 @@ packages:
   /detect-libc@2.0.3:
     resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
     engines: {node: '>=8'}
+    requiresBuild: true
     dev: false
     optional: true
 
@@ -9373,22 +9388,22 @@ packages:
   /electron-to-chromium@1.5.49:
     resolution: {integrity: sha512-ZXfs1Of8fDb6z7WEYZjXpgIRF6MEu8JdeGA0A40aZq6OQbS+eJpnnV49epZRna2DU/YsEjSQuGtQPPtvt6J65A==}
 
-  /emblor@1.4.7(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)(typescript@5.6.3):
+  /emblor@1.4.7(react-dom@18.3.1)(react@18.3.1)(typescript@5.6.3):
     resolution: {integrity: sha512-sFrZ96ALdRwsoiWM/fZ2liM6z4CF4iOqPMwi72wDlFm9nIP4wUN01f7dSajrT+L4FAbUf3+e73UWtWXzAOj8zQ==}
     peerDependencies:
       react: ^18.0.0
       react-dom: ^18.0.0
     dependencies:
-      '@radix-ui/react-dialog': 1.0.4(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-popover': 1.1.2(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      '@radix-ui/react-slot': 1.1.2(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@radix-ui/react-dialog': 1.0.4(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-popover': 1.1.2(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.2(react@18.3.1)
       class-variance-authority: 0.7.1
       clsx: 2.1.1
-      cmdk: 0.2.1(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
-      react-easy-sort: 1.6.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      tailwind-merge: 3.1.0
+      cmdk: 0.2.1(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-easy-sort: 1.6.0(react-dom@18.3.1)(react@18.3.1)
+      tailwind-merge: 3.2.0
       tsup: 6.7.0(typescript@5.6.3)
     transitivePeerDependencies:
       - '@swc/core'
@@ -11065,6 +11080,7 @@ packages:
 
   /is-arrayish@0.3.2:
     resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
+    requiresBuild: true
     dev: false
     optional: true
 
@@ -11363,7 +11379,7 @@ packages:
     resolution: {integrity: sha512-1vUQX+IdDMVPj4k8kOxgUqlcK518yluMuGZwqlr44FS1ppZB/5GWh4rZG89erpOBOJjU/OBsnCVFfapsRz6nEA==}
     dev: false
 
-  /jotai@2.8.0(react@19.0.0-rc-fb9a90fa48-20240614):
+  /jotai@2.8.0(react@18.3.1):
     resolution: {integrity: sha512-yZNMC36FdLOksOr8qga0yLf14miCJlEThlp5DeFJNnqzm2+ZG7wLcJzoOyij5K6U6Xlc5ljQqPDlJRgqW0Y18g==}
     engines: {node: '>=12.20.0'}
     peerDependencies:
@@ -11375,7 +11391,7 @@ packages:
       react:
         optional: true
     dependencies:
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
     dev: false
 
   /joycon@3.1.1:
@@ -11922,7 +11938,7 @@ packages:
   /next-tick@1.1.0:
     resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==}
 
-  /next@15.2.1(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /next@15.2.1(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-zxbsdQv3OqWXybK5tMkPCBKyhIz63RstJ+NvlfkaLMc/m5MwXgz2e92k+hSKcyBpyADhMk2C31RIiaDjUZae7g==}
     engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
     hasBin: true
@@ -11949,9 +11965,9 @@ packages:
       busboy: 1.6.0
       caniuse-lite: 1.0.30001675
       postcss: 8.4.31
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
-      styled-jsx: 5.1.6(react@19.0.0-rc-fb9a90fa48-20240614)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      styled-jsx: 5.1.6(react@18.3.1)
     optionalDependencies:
       '@next/swc-darwin-arm64': 15.2.1
       '@next/swc-darwin-x64': 15.2.1
@@ -12717,6 +12733,16 @@ packages:
       es6-symbol: 3.1.4
     dev: false
 
+  /react-dom@18.3.1(react@18.3.1):
+    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
+    peerDependencies:
+      react: ^18.3.1
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.3.1
+      scheduler: 0.23.2
+    dev: false
+
   /react-dom@19.0.0(react@19.0.0):
     resolution: {integrity: sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==}
     peerDependencies:
@@ -12726,15 +12752,6 @@ packages:
       scheduler: 0.25.0
     dev: false
 
-  /react-dom@19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614):
-    resolution: {integrity: sha512-PoEsPe32F7KPLYOBvZfjylEI1B67N44PwY3lyvpmBkhlluLnLz0jH8q2Wg9YidAi6z0k3iUnNRm5x10wurzt9Q==}
-    peerDependencies:
-      react: 19.0.0-rc-fb9a90fa48-20240614
-    dependencies:
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      scheduler: 0.25.0-rc-fb9a90fa48-20240614
-    dev: false
-
   /react-dropzone@14.2.10(react@19.0.0):
     resolution: {integrity: sha512-Y98LOCYxGO2jOFWREeKJlL7gbrHcOlTBp+9DCM1dh9XQ8+P/8ThhZT7kFb05C+bPcTXq/rixpU+5+LzwYrFLUw==}
     engines: {node: '>= 10.13'}
@@ -12747,7 +12764,7 @@ packages:
       react: 19.0.0
     dev: false
 
-  /react-easy-sort@1.6.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /react-easy-sort@1.6.0(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-zd9Nn90wVlZPEwJrpqElN87sf9GZnFR1StfjgNQVbSpR5QTSzCHjEYK6REuwq49Ip+76KOMSln9tg/ST2KLelg==}
     engines: {node: '>=16'}
     peerDependencies:
@@ -12755,8 +12772,8 @@ packages:
       react-dom: '>=16.4.0'
     dependencies:
       array-move: 3.0.1
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
       tslib: 2.0.1
     dev: false
 
@@ -12817,7 +12834,7 @@ packages:
       tslib: 2.8.0
     dev: false
 
-  /react-remove-scroll-bar@2.3.6(react@19.0.0-rc-fb9a90fa48-20240614):
+  /react-remove-scroll-bar@2.3.6(react@18.3.1):
     resolution: {integrity: sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -12827,8 +12844,8 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-style-singleton: 2.2.3(react@19.0.0-rc-fb9a90fa48-20240614)
+      react: 18.3.1
+      react-style-singleton: 2.2.3(react@18.3.1)
       tslib: 2.8.0
     dev: false
 
@@ -12848,7 +12865,7 @@ packages:
       tslib: 2.8.0
     dev: false
 
-  /react-remove-scroll-bar@2.3.8(react@19.0.0-rc-fb9a90fa48-20240614):
+  /react-remove-scroll-bar@2.3.8(react@18.3.1):
     resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -12858,12 +12875,12 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-style-singleton: 2.2.3(react@19.0.0-rc-fb9a90fa48-20240614)
+      react: 18.3.1
+      react-style-singleton: 2.2.3(react@18.3.1)
       tslib: 2.8.0
     dev: false
 
-  /react-remove-scroll@2.5.4(react@19.0.0-rc-fb9a90fa48-20240614):
+  /react-remove-scroll@2.5.4(react@18.3.1):
     resolution: {integrity: sha512-xGVKJJr0SJGQVirVFAUZ2k1QLyO6m+2fy0l8Qawbp5Jgrv3DeLalrfMNBFSlmz5kriGGzsVBtGVnf4pTKIhhWA==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -12873,12 +12890,12 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-remove-scroll-bar: 2.3.8(react@19.0.0-rc-fb9a90fa48-20240614)
-      react-style-singleton: 2.2.3(react@19.0.0-rc-fb9a90fa48-20240614)
+      react: 18.3.1
+      react-remove-scroll-bar: 2.3.8(react@18.3.1)
+      react-style-singleton: 2.2.3(react@18.3.1)
       tslib: 2.8.0
-      use-callback-ref: 1.3.3(react@19.0.0-rc-fb9a90fa48-20240614)
-      use-sidecar: 1.1.3(react@19.0.0-rc-fb9a90fa48-20240614)
+      use-callback-ref: 1.3.3(react@18.3.1)
+      use-sidecar: 1.1.3(react@18.3.1)
     dev: false
 
   /react-remove-scroll@2.5.5(@types/react@19.0.10)(react@19.0.0):
@@ -12900,7 +12917,7 @@ packages:
       use-sidecar: 1.1.3(@types/react@19.0.10)(react@19.0.0)
     dev: false
 
-  /react-remove-scroll@2.5.5(react@19.0.0-rc-fb9a90fa48-20240614):
+  /react-remove-scroll@2.5.5(react@18.3.1):
     resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -12910,12 +12927,12 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-remove-scroll-bar: 2.3.8(react@19.0.0-rc-fb9a90fa48-20240614)
-      react-style-singleton: 2.2.3(react@19.0.0-rc-fb9a90fa48-20240614)
+      react: 18.3.1
+      react-remove-scroll-bar: 2.3.8(react@18.3.1)
+      react-style-singleton: 2.2.3(react@18.3.1)
       tslib: 2.8.0
-      use-callback-ref: 1.3.3(react@19.0.0-rc-fb9a90fa48-20240614)
-      use-sidecar: 1.1.3(react@19.0.0-rc-fb9a90fa48-20240614)
+      use-callback-ref: 1.3.3(react@18.3.1)
+      use-sidecar: 1.1.3(react@18.3.1)
     dev: false
 
   /react-remove-scroll@2.6.0(@types/react@19.0.10)(react@19.0.0):
@@ -12937,7 +12954,7 @@ packages:
       use-sidecar: 1.1.2(@types/react@19.0.10)(react@19.0.0)
     dev: false
 
-  /react-remove-scroll@2.6.0(react@19.0.0-rc-fb9a90fa48-20240614):
+  /react-remove-scroll@2.6.0(react@18.3.1):
     resolution: {integrity: sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -12947,12 +12964,12 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-remove-scroll-bar: 2.3.6(react@19.0.0-rc-fb9a90fa48-20240614)
-      react-style-singleton: 2.2.1(react@19.0.0-rc-fb9a90fa48-20240614)
+      react: 18.3.1
+      react-remove-scroll-bar: 2.3.6(react@18.3.1)
+      react-style-singleton: 2.2.1(react@18.3.1)
       tslib: 2.8.0
-      use-callback-ref: 1.3.2(react@19.0.0-rc-fb9a90fa48-20240614)
-      use-sidecar: 1.1.2(react@19.0.0-rc-fb9a90fa48-20240614)
+      use-callback-ref: 1.3.2(react@18.3.1)
+      use-sidecar: 1.1.2(react@18.3.1)
     dev: false
 
   /react-remove-scroll@2.6.3(@types/react@19.0.10)(react@19.0.0):
@@ -12974,7 +12991,7 @@ packages:
       use-sidecar: 1.1.3(@types/react@19.0.10)(react@19.0.0)
     dev: false
 
-  /react-smooth@4.0.4(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /react-smooth@4.0.4(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -12982,9 +12999,9 @@ packages:
     dependencies:
       fast-equals: 5.2.2
       prop-types: 15.8.1
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
-      react-transition-group: 4.4.5(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-transition-group: 4.4.5(react-dom@18.3.1)(react@18.3.1)
     dev: false
 
   /react-style-singleton@2.2.1(@types/react@19.0.10)(react@19.0.0):
@@ -13004,7 +13021,7 @@ packages:
       tslib: 2.8.0
     dev: false
 
-  /react-style-singleton@2.2.1(react@19.0.0-rc-fb9a90fa48-20240614):
+  /react-style-singleton@2.2.1(react@18.3.1):
     resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -13016,7 +13033,7 @@ packages:
     dependencies:
       get-nonce: 1.0.1
       invariant: 2.2.4
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
       tslib: 2.8.0
     dev: false
 
@@ -13036,7 +13053,7 @@ packages:
       tslib: 2.8.0
     dev: false
 
-  /react-style-singleton@2.2.3(react@19.0.0-rc-fb9a90fa48-20240614):
+  /react-style-singleton@2.2.3(react@18.3.1):
     resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -13047,11 +13064,11 @@ packages:
         optional: true
     dependencies:
       get-nonce: 1.0.1
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
       tslib: 2.8.0
     dev: false
 
-  /react-transition-group@4.4.5(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /react-transition-group@4.4.5(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
     peerDependencies:
       react: '>=16.6.0'
@@ -13061,8 +13078,8 @@ packages:
       dom-helpers: 5.2.1
       loose-envify: 1.4.0
       prop-types: 15.8.1
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
   /react@18.3.1:
@@ -13077,11 +13094,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
-  /react@19.0.0-rc-fb9a90fa48-20240614:
-    resolution: {integrity: sha512-nvE3Gy+IOIfH/DXhkyxFVQSrITarFcQz4+shzC/McxQXEUSonpw2oDy/Wi9hdDtV3hlP12VYuDL95iiBREedNQ==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
   /read-cache@1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
     dependencies:
@@ -13129,7 +13141,7 @@ packages:
       decimal.js-light: 2.5.1
     dev: false
 
-  /recharts@2.15.1(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /recharts@2.15.1(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-v8PUTUlyiDe56qUj82w/EDVuzEFXwEHp9/xOowGAZwfLjB9uAy3GllQVIYMWF6nU+qibx85WF75zD7AjqoT54Q==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -13139,10 +13151,10 @@ packages:
       clsx: 2.1.1
       eventemitter3: 4.0.7
       lodash: 4.17.21
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
       react-is: 18.3.1
-      react-smooth: 4.0.4(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
+      react-smooth: 4.0.4(react-dom@18.3.1)(react@18.3.1)
       recharts-scale: 0.4.5
       tiny-invariant: 1.3.3
       victory-vendor: 36.9.2
@@ -13382,12 +13394,14 @@ packages:
   /safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  /scheduler@0.25.0:
-    resolution: {integrity: sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==}
+  /scheduler@0.23.2:
+    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
+    dependencies:
+      loose-envify: 1.4.0
     dev: false
 
-  /scheduler@0.25.0-rc-fb9a90fa48-20240614:
-    resolution: {integrity: sha512-HHqQ/SqbeiDfXXVKgNxTpbQTD4n7IUb4hZATvHjp03jr3TF7igehCyHdOjeYTrzIseLO93cTTfSb5f4qWcirMQ==}
+  /scheduler@0.25.0:
+    resolution: {integrity: sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==}
     dev: false
 
   /selderee@0.11.0:
@@ -13551,6 +13565,7 @@ packages:
 
   /simple-swizzle@0.2.2:
     resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
+    requiresBuild: true
     dependencies:
       is-arrayish: 0.3.2
     dev: false
@@ -13910,7 +13925,7 @@ packages:
     resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
     dev: false
 
-  /styled-jsx@5.1.6(react@19.0.0):
+  /styled-jsx@5.1.6(react@18.3.1):
     resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
     engines: {node: '>= 12.0.0'}
     peerDependencies:
@@ -13924,10 +13939,10 @@ packages:
         optional: true
     dependencies:
       client-only: 0.0.1
-      react: 19.0.0
+      react: 18.3.1
     dev: false
 
-  /styled-jsx@5.1.6(react@19.0.0-rc-fb9a90fa48-20240614):
+  /styled-jsx@5.1.6(react@19.0.0):
     resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
     engines: {node: '>= 12.0.0'}
     peerDependencies:
@@ -13941,7 +13956,7 @@ packages:
         optional: true
     dependencies:
       client-only: 0.0.1
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 19.0.0
     dev: false
 
   /sucrase@3.35.0:
@@ -14026,8 +14041,8 @@ packages:
     resolution: {integrity: sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==}
     dev: false
 
-  /tailwind-merge@3.1.0:
-    resolution: {integrity: sha512-aV27Oj8B7U/tAOMhJsSGdWqelfmudnGMdXIlMnk1JfsjwSjts6o8HyfN7SFH3EztzH4YH8kk6GbLTHzITJO39Q==}
+  /tailwind-merge@3.2.0:
+    resolution: {integrity: sha512-FQT/OVqCD+7edmmJpsgCsY820RTD5AkBryuG5IUqR5YQZSdj5xlH5nLgH7YPths7WsLPSpSBNneJdM8aS8aeFA==}
     dev: false
 
   /tailwindcss-animate@1.0.7(tailwindcss@3.4.14):
@@ -14556,7 +14571,7 @@ packages:
       tslib: 2.8.0
     dev: false
 
-  /use-callback-ref@1.3.2(react@19.0.0-rc-fb9a90fa48-20240614):
+  /use-callback-ref@1.3.2(react@18.3.1):
     resolution: {integrity: sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -14566,7 +14581,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
       tslib: 2.8.0
     dev: false
 
@@ -14585,7 +14600,7 @@ packages:
       tslib: 2.8.0
     dev: false
 
-  /use-callback-ref@1.3.3(react@19.0.0-rc-fb9a90fa48-20240614):
+  /use-callback-ref@1.3.3(react@18.3.1):
     resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -14595,7 +14610,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
       tslib: 2.8.0
     dev: false
 
@@ -14615,7 +14630,7 @@ packages:
       tslib: 2.8.0
     dev: false
 
-  /use-sidecar@1.1.2(react@19.0.0-rc-fb9a90fa48-20240614):
+  /use-sidecar@1.1.2(react@18.3.1):
     resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -14626,7 +14641,7 @@ packages:
         optional: true
     dependencies:
       detect-node-es: 1.1.0
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
       tslib: 2.8.0
     dev: false
 
@@ -14646,7 +14661,7 @@ packages:
       tslib: 2.8.0
     dev: false
 
-  /use-sidecar@1.1.3(react@19.0.0-rc-fb9a90fa48-20240614):
+  /use-sidecar@1.1.3(react@18.3.1):
     resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -14657,7 +14672,7 @@ packages:
         optional: true
     dependencies:
       detect-node-es: 1.1.0
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
       tslib: 2.8.0
     dev: false
 

From 7e340bd76183bef378f803810edf05589c97eed2 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Thu, 17 Apr 2025 17:22:47 +0400
Subject: [PATCH 064/143] sandpack doesn't work =(

---
 .../web/app/studio/[username]/page.client.tsx | 12 ++++++++-
 .../features/studio/editor-new/editor.tsx     | 27 +++++++++++++++----
 .../studio/editor-new/utils/sandpack-files.ts | 16 +++++++++++
 3 files changed, 49 insertions(+), 6 deletions(-)
 create mode 100644 apps/web/components/features/studio/editor-new/utils/sandpack-files.ts

diff --git a/apps/web/app/studio/[username]/page.client.tsx b/apps/web/app/studio/[username]/page.client.tsx
index fca83605..e5b40af9 100644
--- a/apps/web/app/studio/[username]/page.client.tsx
+++ b/apps/web/app/studio/[username]/page.client.tsx
@@ -6,7 +6,9 @@ import { DemosTable } from "@/components/features/studio/ui/components-table"
 import { ComponentPublishDialog } from "@/components/features/studio/editor-new/component-publish-dialog"
 import { ComponentPublishDialog as ComponentPublishDialogOld } from "@/components/features/studio/editor/component-publish-dialog"
 import Link from "next/link"
-import { ArrowLeft } from "lucide-react"
+import { ArrowLeft, PlusCircle } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useRouter, usePathname } from "next/navigation"
 
 interface StudioUsernameClientProps {
   user: User
@@ -21,6 +23,8 @@ export function StudioUsernameClient({
   isAdmin,
   isOwnProfile,
 }: StudioUsernameClientProps) {
+  const router = useRouter()
+  const pathname = usePathname()
   return (
     <StudioLayout user={user}>
       <div className="space-y-6">
@@ -37,6 +41,12 @@ export function StudioUsernameClient({
 
           {(isOwnProfile || isAdmin) && (
             <>
+              <Button
+                onClick={() => window.open(`${pathname}/publish/123`, "_blank")}
+              >
+                <PlusCircle className="mr-2 h-4 w-4" />
+                Publish Component
+              </Button>
               <ComponentPublishDialog />
               <ComponentPublishDialogOld userId={user.id} />
             </>
diff --git a/apps/web/components/features/studio/editor-new/editor.tsx b/apps/web/components/features/studio/editor-new/editor.tsx
index 63de738f..89524dee 100644
--- a/apps/web/components/features/studio/editor-new/editor.tsx
+++ b/apps/web/components/features/studio/editor-new/editor.tsx
@@ -7,7 +7,7 @@ import {
 } from "@codesandbox/sandpack-react"
 import { useTheme } from "next-themes"
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete"
-
+import { files } from "./utils/sandpack-files"
 export const Editor = () => {
   const { resolvedTheme } = useTheme()
   const isDark = resolvedTheme === "dark"
@@ -21,16 +21,33 @@ export const Editor = () => {
   return (
     <div className="h-full w-full">
       <SandpackProvider
+        files={files}
         theme={resolvedTheme as "light" | "dark"}
-        template="react-ts"
-        options={{
-          externalResources: ["https://cdn.tailwindcss.com"],
+        template="vite-react-ts"
+        // options={{
+        //   externalResources: ["https://cdn.tailwindcss.com"],
+        // }}
+        customSetup={{
+          dependencies: {
+            // default Sandpack dependencies written explicitly
+            react: "^18.3.1",
+            "react-dom": "^18.2.0",
+          },
+          devDependencies: {
+            // default Sandpack dependencies written explicitly
+            "@types/react": "^18.0.28",
+            "@types/react-dom": "^18.0.11",
+            "@vitejs/plugin-react": "^4.1.4",
+            typescript: "^4.9.5",
+            vite: "4.1.4",
+            "esbuild-wasm": "^0.17.12",
+          },
         }}
       >
         <SandpackLayout>
           <SandpackFileExplorer />
           <SandpackCodeEditor
-            showLineNumbers={false}
+            showLineNumbers={true}
             showTabs={false}
             extensions={[
               autocompletion({
diff --git a/apps/web/components/features/studio/editor-new/utils/sandpack-files.ts b/apps/web/components/features/studio/editor-new/utils/sandpack-files.ts
new file mode 100644
index 00000000..6e47f2a4
--- /dev/null
+++ b/apps/web/components/features/studio/editor-new/utils/sandpack-files.ts
@@ -0,0 +1,16 @@
+import type { SandpackFiles } from "@codesandbox/sandpack-react"
+
+const viteConfig = `import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
+`
+
+export const files: SandpackFiles = {
+  "/vite.config.ts": {
+    code: viteConfig,
+  },
+}

From 693d5ff2f968fea30ec03bfaa5afe53a6d88f6a4 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Thu, 17 Apr 2025 17:23:02 +0400
Subject: [PATCH 065/143] we vibing

---
 .../[username]/publish/[sandboxId]/page.tsx   | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 apps/web/app/studio/[username]/publish/[sandboxId]/page.tsx

diff --git a/apps/web/app/studio/[username]/publish/[sandboxId]/page.tsx b/apps/web/app/studio/[username]/publish/[sandboxId]/page.tsx
new file mode 100644
index 00000000..488b4ca9
--- /dev/null
+++ b/apps/web/app/studio/[username]/publish/[sandboxId]/page.tsx
@@ -0,0 +1,36 @@
+import { Sandpack } from "@codesandbox/sandpack-react"
+
+export default function PublishPage() {
+  return (
+    <div className="container mx-auto p-4">
+      <h1 className="text-2xl font-bold mb-4">Publish Your Sandbox</h1>
+      <div className="bg-white rounded-lg shadow p-6">
+        <Sandpack
+          template="react"
+          theme="light"
+          options={{
+            showNavigator: true,
+            showLineNumbers: true,
+            showInlineErrors: true,
+            showConsole: true,
+            showConsoleButton: true,
+          }}
+          files={{
+            "/App.js": {
+              code: `import React from 'react'
+
+export default function App() {
+  return (
+    <div className="p-4">
+      <h1 className="text-2xl font-bold">Hello World</h1>
+      <p className="mt-2">Welcome to your sandbox!</p>
+    </div>
+  )
+}`,
+            },
+          }}
+        />
+      </div>
+    </div>
+  )
+}

From de09e0a34ece9064af0c7cee0e293753806d7fcd Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Mon, 21 Apr 2025 18:42:11 +0400
Subject: [PATCH 066/143] init: code editor & integration with file system

---
 .../web/app/studio/[username]/page.client.tsx |   2 +-
 .../[username]/publish/[sandboxId]/page.tsx   |  36 --
 .../app/studio/[username]/publish/page.tsx    | 553 ++++++++++++++++++
 apps/web/components/ui/resizable.tsx          |  90 +++
 package.json                                  |   6 +
 pnpm-lock.yaml                                | 146 ++++-
 6 files changed, 790 insertions(+), 43 deletions(-)
 delete mode 100644 apps/web/app/studio/[username]/publish/[sandboxId]/page.tsx
 create mode 100644 apps/web/app/studio/[username]/publish/page.tsx
 create mode 100644 apps/web/components/ui/resizable.tsx

diff --git a/apps/web/app/studio/[username]/page.client.tsx b/apps/web/app/studio/[username]/page.client.tsx
index e5b40af9..cb8bcc66 100644
--- a/apps/web/app/studio/[username]/page.client.tsx
+++ b/apps/web/app/studio/[username]/page.client.tsx
@@ -42,7 +42,7 @@ export function StudioUsernameClient({
           {(isOwnProfile || isAdmin) && (
             <>
               <Button
-                onClick={() => window.open(`${pathname}/publish/123`, "_blank")}
+                onClick={() => window.open(`${pathname}/publish`, "_blank")}
               >
                 <PlusCircle className="mr-2 h-4 w-4" />
                 Publish Component
diff --git a/apps/web/app/studio/[username]/publish/[sandboxId]/page.tsx b/apps/web/app/studio/[username]/publish/[sandboxId]/page.tsx
deleted file mode 100644
index 488b4ca9..00000000
--- a/apps/web/app/studio/[username]/publish/[sandboxId]/page.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Sandpack } from "@codesandbox/sandpack-react"
-
-export default function PublishPage() {
-  return (
-    <div className="container mx-auto p-4">
-      <h1 className="text-2xl font-bold mb-4">Publish Your Sandbox</h1>
-      <div className="bg-white rounded-lg shadow p-6">
-        <Sandpack
-          template="react"
-          theme="light"
-          options={{
-            showNavigator: true,
-            showLineNumbers: true,
-            showInlineErrors: true,
-            showConsole: true,
-            showConsoleButton: true,
-          }}
-          files={{
-            "/App.js": {
-              code: `import React from 'react'
-
-export default function App() {
-  return (
-    <div className="p-4">
-      <h1 className="text-2xl font-bold">Hello World</h1>
-      <p className="mt-2">Welcome to your sandbox!</p>
-    </div>
-  )
-}`,
-            },
-          }}
-        />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/web/app/studio/[username]/publish/page.tsx b/apps/web/app/studio/[username]/publish/page.tsx
new file mode 100644
index 00000000..801ccac8
--- /dev/null
+++ b/apps/web/app/studio/[username]/publish/page.tsx
@@ -0,0 +1,553 @@
+"use client"
+
+import { useEffect, useState, useRef, Suspense } from "react"
+import { useSearchParams, useRouter } from "next/navigation"
+import { Sandpack } from "@codesandbox/sandpack-react"
+import { Card, CardContent } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
+import { ResizablePanelGroup, ResizablePanel } from "@/components/ui/resizable"
+import CodeMirror from "@uiw/react-codemirror"
+import { javascript } from "@codemirror/lang-javascript"
+import { html } from "@codemirror/lang-html"
+import { css } from "@codemirror/lang-css"
+import { json } from "@codemirror/lang-json"
+import { oneDark } from "@codemirror/theme-one-dark"
+import { Input } from "@/components/ui/input"
+import {
+  PlusIcon,
+  FolderIcon,
+  FileIcon,
+  RefreshCwIcon,
+  TrashIcon,
+  Loader2Icon,
+} from "lucide-react"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { toast } from "sonner"
+
+// Backend API URL
+const API_BASE_URL = "http://localhost:8080" //"https://21st-studio.up.railway.app"
+
+// Types
+interface FileEntry {
+  name: string
+  isDir: boolean
+  path?: string
+  children?: FileEntry[]
+}
+
+// Utility
+const fetchJSON = async (url: string, opts: RequestInit = {}) => {
+  const fullUrl = url.startsWith("http") ? url : `${API_BASE_URL}${url}`
+  const res = await fetch(fullUrl, opts)
+  if (!res.ok) throw new Error(await res.text())
+  return res.json()
+}
+
+const getFileExtension = (filename: string): string => {
+  return filename.slice(((filename.lastIndexOf(".") - 1) >>> 0) + 2)
+}
+
+const getLanguageExtension = (filename: string) => {
+  const ext = getFileExtension(filename).toLowerCase()
+
+  switch (ext) {
+    case "js":
+    case "jsx":
+    case "ts":
+    case "tsx":
+      return javascript()
+    case "html":
+    case "htm":
+    case "svg":
+    case "xml":
+      return html()
+    case "css":
+    case "scss":
+    case "sass":
+    case "less":
+      return css()
+    case "json":
+      return json()
+    default:
+      return javascript()
+  }
+}
+
+// Main Component Content
+function PublishPageContent() {
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const [projectId, setProjectId] = useState<string | null>(
+    searchParams.get("projectId"),
+  )
+  const [previewURL, setPreviewURL] = useState<string | null>(null)
+  const [files, setFiles] = useState<FileEntry[]>([])
+  const [selectedPath, setSelectedPath] = useState<string | null>(null)
+  const [code, setCode] = useState<string>("")
+  const [newFileName, setNewFileName] = useState("")
+  const [isCreatingFile, setIsCreatingFile] = useState(false)
+  const [isFetching, setIsFetching] = useState(false)
+  const [isInitializing, setIsInitializing] = useState(true)
+  const [isFileLoading, setIsFileLoading] = useState(false)
+  const wsRef = useRef<WebSocket | null>(null)
+  const debounceRef = useRef<NodeJS.Timeout | null>(null)
+
+  // 1. Bootstrap sandbox or load existing one
+  useEffect(() => {
+    const initializeSandbox = async () => {
+      setIsInitializing(true)
+      const existingProjectId = searchParams.get("projectId")
+
+      if (existingProjectId) {
+        try {
+          // Attempt to load existing project details
+          const { previewURL } = await fetchJSON(
+            `/projects/${existingProjectId}`,
+          )
+          setProjectId(existingProjectId)
+          setPreviewURL(previewURL)
+          toast.info(`Restored sandbox: ${existingProjectId}`)
+        } catch (error) {
+          console.error("Failed to load existing sandbox:", error)
+          toast.warning("Failed to load existing sandbox, creating a new one.")
+          // If loading fails, create a new project
+          await createNewSandbox()
+        }
+      } else {
+        // Create a new project if no projectId in URL
+        await createNewSandbox()
+      }
+      setIsInitializing(false)
+    }
+
+    const createNewSandbox = async () => {
+      try {
+        const { projectId: newProjectId, previewURL: newPreviewURL } =
+          await fetchJSON("/projects", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ template: "nextjs-builder" }),
+          })
+        setProjectId(newProjectId)
+        setPreviewURL(newPreviewURL)
+        // Update URL with the new projectId
+        router.push(
+          `${window.location.pathname}?projectId=${newProjectId}`,
+          { scroll: false }, // Use Next.js router for client-side navigation
+        )
+        toast.success("New sandbox created successfully")
+      } catch (error) {
+        console.error("Failed to create sandbox:", error)
+        toast.error("Failed to create sandbox")
+        // Potentially add retry logic or guide user
+      }
+    }
+
+    initializeSandbox()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []) // Run only once on mount
+
+  // 2. Init WebSocket
+  useEffect(() => {
+    if (!projectId) return
+
+    // Create WebSocket connection to the backend
+    const wsUrl = `${API_BASE_URL.replace("https://", "wss://").replace("http://", "ws://")}/ws?projectId=${projectId}`
+    const ws = new WebSocket(wsUrl)
+
+    ws.onopen = () => console.log("WebSocket connected")
+    ws.onerror = (error) => {
+      console.error("WebSocket error:", error)
+      toast.error("WebSocket connection error")
+    }
+    ws.onclose = () => console.log("WebSocket closed")
+
+    wsRef.current = ws
+
+    return () => {
+      ws.close()
+    }
+  }, [projectId])
+
+  // 3. Load file tree
+  const fetchFileTree = async () => {
+    if (!projectId) return
+
+    try {
+      setIsFetching(true)
+      const fileEntries = await fetchJSON(`/projects/${projectId}/files`)
+      setFiles(fileEntries)
+    } catch (error) {
+      console.error("Failed to load files:", error)
+      toast.error("Failed to load files")
+    } finally {
+      setIsFetching(false)
+    }
+  }
+
+  useEffect(() => {
+    if (projectId) {
+      fetchFileTree()
+    }
+  }, [projectId])
+
+  // 4. Load file content when selected
+  useEffect(() => {
+    if (!projectId || !selectedPath) return
+
+    try {
+      setIsFileLoading(true)
+      fetch(
+        `${API_BASE_URL}/projects/${projectId}/file?path=${encodeURIComponent(selectedPath)}`,
+      )
+        .then((res) => res.text())
+        .then(setCode)
+        .catch((error) => {
+          console.error("Failed to load file content:", error)
+          toast.error("Failed to load file content")
+        })
+        .finally(() => setIsFileLoading(false))
+    } catch (error) {
+      setIsFileLoading(false)
+    }
+  }, [projectId, selectedPath])
+
+  // 5. Send code changes (debounced)
+  const sendChange = (content: string) => {
+    if (
+      !wsRef.current ||
+      wsRef.current.readyState !== WebSocket.OPEN ||
+      !selectedPath
+    )
+      return
+
+    wsRef.current.send(
+      JSON.stringify({ type: "fileChange", path: selectedPath, content }),
+    )
+  }
+
+  const handleCodeChange = (value: string) => {
+    setCode(value)
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+    debounceRef.current = setTimeout(() => sendChange(value), 500)
+  }
+
+  // 6. Create new file
+  const createNewFile = () => {
+    if (
+      !projectId ||
+      !wsRef.current ||
+      wsRef.current.readyState !== WebSocket.OPEN ||
+      !newFileName
+    )
+      return
+
+    const newFilePath = `/${newFileName}`
+
+    wsRef.current.send(
+      JSON.stringify({
+        type: "fileCreate",
+        path: newFilePath,
+        content: "",
+      }),
+    )
+
+    // Reset UI state
+    setNewFileName("")
+    setIsCreatingFile(false)
+    toast.success(`Created ${newFileName}`)
+
+    // Refresh file tree and select new file
+    setTimeout(() => {
+      fetchFileTree()
+      setSelectedPath(newFilePath)
+    }, 500)
+  }
+
+  // 7. Delete file
+  const deleteFile = (fileName: string) => {
+    if (
+      !projectId ||
+      !wsRef.current ||
+      wsRef.current.readyState !== WebSocket.OPEN
+    )
+      return
+
+    const filePath = `/${fileName}`
+
+    wsRef.current.send(
+      JSON.stringify({
+        type: "fileDelete",
+        path: filePath,
+      }),
+    )
+
+    // Reset selection if the deleted file was selected
+    if (selectedPath === filePath) {
+      setSelectedPath(null)
+      setCode("")
+    }
+
+    toast.success(`Deleted ${fileName}`)
+
+    // Refresh file tree
+    setTimeout(fetchFileTree, 500)
+  }
+
+  if (isInitializing) {
+    return (
+      <div className="h-screen w-full flex items-center justify-center">
+        <div className="flex flex-col items-center gap-4">
+          <Loader2Icon className="h-12 w-12 animate-spin text-primary" />
+          <p className="text-lg">Initializing sandbox...</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="h-screen w-full flex flex-col">
+      {/* Header */}
+      <header className="flex items-center gap-2 p-4 border-b">
+        <h1 className="text-2xl font-bold">Publish Your Sandbox</h1>
+        {projectId && (
+          <span className="text-xs text-muted-foreground ml-2">
+            {projectId}
+          </span>
+        )}
+        <Button
+          size="sm"
+          onClick={() => window.location.reload()}
+          className="ml-auto"
+        >
+          Reset
+        </Button>
+      </header>
+
+      {/* Main Content */}
+      <ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
+        {/* File Explorer */}
+        <ResizablePanel defaultSize={20} minSize={15} className="border-r">
+          <Card className="h-full rounded-none flex flex-col">
+            <div className="flex items-center justify-between p-2 border-b">
+              <span className="font-medium">Files</span>
+              <div className="flex gap-1">
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  onClick={() => setIsCreatingFile(true)}
+                  disabled={isFetching}
+                >
+                  <PlusIcon className="h-4 w-4" />
+                </Button>
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  onClick={fetchFileTree}
+                  disabled={isFetching}
+                >
+                  {isFetching ? (
+                    <Loader2Icon className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <RefreshCwIcon className="h-4 w-4" />
+                  )}
+                </Button>
+              </div>
+            </div>
+
+            {isCreatingFile && (
+              <div className="p-2 border-b">
+                <div className="flex gap-2">
+                  <Input
+                    placeholder="filename.js"
+                    value={newFileName}
+                    onChange={(e) => setNewFileName(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") createNewFile()
+                      if (e.key === "Escape") {
+                        setIsCreatingFile(false)
+                        setNewFileName("")
+                      }
+                    }}
+                    autoFocus
+                  />
+                  <Button
+                    size="sm"
+                    onClick={createNewFile}
+                    disabled={!newFileName}
+                  >
+                    Create
+                  </Button>
+                </div>
+              </div>
+            )}
+
+            <CardContent className="p-0 overflow-y-auto flex-1">
+              <FileTree
+                entries={files}
+                onSelect={setSelectedPath}
+                selectedPath={selectedPath}
+                onDelete={deleteFile}
+                isLoading={isFetching}
+              />
+            </CardContent>
+          </Card>
+        </ResizablePanel>
+
+        {/* Editor + Preview */}
+        <ResizablePanel defaultSize={80} minSize={55}>
+          <Tabs defaultValue="editor" className="h-full flex flex-col">
+            <TabsList className="mx-2 mt-2">
+              <TabsTrigger value="editor">Editor</TabsTrigger>
+              <TabsTrigger value="preview" disabled={!previewURL}>
+                Preview
+              </TabsTrigger>
+            </TabsList>
+            <TabsContent value="editor" className="flex-1 min-h-0 p-2">
+              {isFileLoading ? (
+                <div className="h-full flex items-center justify-center">
+                  <Loader2Icon className="h-8 w-8 animate-spin text-primary" />
+                </div>
+              ) : selectedPath ? (
+                <CodeMirror
+                  value={code}
+                  height="100%"
+                  extensions={[
+                    selectedPath
+                      ? getLanguageExtension(selectedPath)
+                      : javascript(),
+                  ]}
+                  theme={oneDark}
+                  onChange={handleCodeChange}
+                  basicSetup={{
+                    lineNumbers: true,
+                    highlightActiveLine: true,
+                    highlightSelectionMatches: true,
+                    autocompletion: true,
+                  }}
+                />
+              ) : (
+                <div className="h-full flex items-center justify-center text-muted-foreground">
+                  Select a file to start editing
+                </div>
+              )}
+            </TabsContent>
+            <TabsContent value="preview" className="flex-1 min-h-0 p-2">
+              {previewURL ? (
+                <iframe
+                  src={previewURL}
+                  className="w-full h-full border rounded"
+                />
+              ) : (
+                <div className="h-full flex items-center justify-center text-muted-foreground">
+                  Waiting for dev server...
+                </div>
+              )}
+            </TabsContent>
+          </Tabs>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  )
+}
+
+// Wrap the main component with Suspense for useSearchParams
+export default function PublishPage() {
+  return (
+    <Suspense fallback={<div>Loading project...</div>}>
+      <PublishPageContent />
+    </Suspense>
+  )
+}
+
+// FileTree Component
+function FileTree({
+  entries,
+  onSelect,
+  selectedPath,
+  onDelete,
+  isLoading,
+}: {
+  entries: FileEntry[]
+  onSelect: (path: string) => void
+  selectedPath: string | null
+  onDelete: (fileName: string) => void
+  isLoading: boolean
+}) {
+  const handleFileClick = (fileName: string) => {
+    onSelect(`/${fileName}`)
+  }
+
+  if (isLoading && entries.length === 0) {
+    return (
+      <div className="flex justify-center items-center py-8">
+        <Loader2Icon className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+
+  return (
+    <ul className="text-sm py-2">
+      {entries.map((entry) => (
+        <li key={entry.name} className="py-1">
+          {entry.isDir ? (
+            <details className="group">
+              <summary className="flex items-center px-2 py-1 cursor-pointer hover:bg-muted rounded list-none">
+                <FolderIcon className="h-4 w-4 mr-1 text-blue-500" />
+                <span className="font-medium">{entry.name}</span>
+              </summary>
+              {/* We'd need another API call to get nested files */}
+              <ul className="pl-4 mt-1">
+                <li className="text-xs text-muted-foreground px-2 py-1">
+                  Directory listing not implemented
+                </li>
+              </ul>
+            </details>
+          ) : (
+            <div className="flex items-center group">
+              <button
+                className={`flex items-center w-full text-left px-2 py-1 hover:bg-muted rounded ${
+                  selectedPath === `/${entry.name}`
+                    ? "bg-muted font-medium"
+                    : ""
+                }`}
+                onClick={() => handleFileClick(entry.name)}
+              >
+                <FileIcon className="h-4 w-4 mr-1 text-gray-500" />
+                {entry.name}
+              </button>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity ml-1"
+                  >
+                    <TrashIcon className="h-3 w-3 text-muted-foreground" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem
+                    className="text-destructive focus:text-destructive"
+                    onClick={() => onDelete(entry.name)}
+                  >
+                    Delete file
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          )}
+        </li>
+      ))}
+      {entries.length === 0 && !isLoading && (
+        <li className="px-2 text-muted-foreground">No files found</li>
+      )}
+    </ul>
+  )
+}
diff --git a/apps/web/components/ui/resizable.tsx b/apps/web/components/ui/resizable.tsx
new file mode 100644
index 00000000..edcda86b
--- /dev/null
+++ b/apps/web/components/ui/resizable.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import React, { createContext, useContext, useEffect, useState } from "react"
+import { cn } from "@/lib/utils"
+
+interface ResizablePanelGroupProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  direction: "horizontal" | "vertical"
+  children: React.ReactNode
+}
+
+interface ResizablePanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  defaultSize?: number
+  minSize?: number
+  children: React.ReactNode
+}
+
+const ResizableContext = createContext<{
+  direction: "horizontal" | "vertical"
+}>({
+  direction: "horizontal",
+})
+
+export function ResizablePanelGroup({
+  direction,
+  className,
+  children,
+  ...props
+}: ResizablePanelGroupProps) {
+  return (
+    <ResizableContext.Provider value={{ direction }}>
+      <div
+        className={cn(
+          "flex",
+          direction === "horizontal" ? "flex-row" : "flex-col",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </ResizableContext.Provider>
+  )
+}
+
+export function ResizablePanel({
+  defaultSize = 50,
+  minSize = 10,
+  className,
+  children,
+  ...props
+}: ResizablePanelProps) {
+  const { direction } = useContext(ResizableContext)
+  const [size, setSize] = useState(defaultSize)
+
+  return (
+    <div
+      className={cn("relative", className)}
+      style={{
+        [direction === "horizontal" ? "width" : "height"]: `${size}%`,
+        [direction === "horizontal" ? "minWidth" : "minHeight"]: `${minSize}%`,
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export function ResizableHandle() {
+  const { direction } = useContext(ResizableContext)
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center bg-border",
+        direction === "horizontal"
+          ? "w-[6px] cursor-col-resize h-full"
+          : "h-[6px] cursor-row-resize w-full",
+      )}
+    >
+      <div
+        className={cn(
+          "bg-muted-foreground rounded-full",
+          direction === "horizontal" ? "w-1 h-12" : "h-1 w-12",
+        )}
+      />
+    </div>
+  )
+}
diff --git a/package.json b/package.json
index 91ba80e2..3e6482fd 100644
--- a/package.json
+++ b/package.json
@@ -21,8 +21,14 @@
     "node": ">=18"
   },
   "dependencies": {
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-javascript": "^6.2.3",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/theme-one-dark": "^6.1.2",
     "@radix-ui/react-radio-group": "^1.2.3",
     "@tanstack/react-table": "^8.21.2",
+    "@uiw/react-codemirror": "^4.23.10",
     "emblor": "^1.4.7",
     "jotai": "2.8.0",
     "next": "^15.2.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 59d7c5f9..3c3a3780 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,12 +11,30 @@ importers:
 
   .:
     dependencies:
+      '@codemirror/lang-css':
+        specifier: ^6.3.1
+        version: 6.3.1
+      '@codemirror/lang-html':
+        specifier: ^6.4.9
+        version: 6.4.9
+      '@codemirror/lang-javascript':
+        specifier: ^6.2.3
+        version: 6.2.3
+      '@codemirror/lang-json':
+        specifier: ^6.0.1
+        version: 6.0.1
+      '@codemirror/theme-one-dark':
+        specifier: ^6.1.2
+        version: 6.1.2
       '@radix-ui/react-radio-group':
         specifier: ^1.2.3
         version: 1.2.3(react-dom@18.3.1)(react@18.3.1)
       '@tanstack/react-table':
         specifier: ^8.21.2
         version: 8.21.2(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-codemirror':
+        specifier: ^4.23.10
+        version: 4.23.10(@babel/runtime@7.26.0)(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.10.3)(@codemirror/lint@6.8.5)(@codemirror/search@6.5.10)(@codemirror/state@6.5.2)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.36.5)(codemirror@6.0.1)(react-dom@18.3.1)(react@18.3.1)
       emblor:
         specifier: ^1.4.7
         version: 1.4.7(react-dom@18.3.1)(react@18.3.1)(typescript@5.6.3)
@@ -29,6 +47,9 @@ importers:
       recharts:
         specifier: ^2.15.1
         version: 2.15.1(react-dom@18.3.1)(react@18.3.1)
+      resizable:
+        specifier: link:@/components/ui/resizable
+        version: link:@/components/ui/resizable
     devDependencies:
       prettier:
         specifier: ^3.2.5
@@ -2232,8 +2253,8 @@ packages:
     resolution: {integrity: sha512-llTrboQYw5H4THfhN4U3qCnSZ1SOJ60ohhz+SzU0ADGtwlc533DtklQP0vSFaQuCPDn3BPpOd1GbbnUtwNjsrw==}
     dependencies:
       '@codemirror/language': 6.10.3
-      '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.5
       '@lezer/common': 1.2.3
     dev: false
 
@@ -2247,15 +2268,25 @@ packages:
       '@lezer/css': 1.1.9
     dev: false
 
+  /@codemirror/lang-css@6.3.1:
+    resolution: {integrity: sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==}
+    dependencies:
+      '@codemirror/autocomplete': 6.18.6
+      '@codemirror/language': 6.10.3
+      '@codemirror/state': 6.5.2
+      '@lezer/common': 1.2.3
+      '@lezer/css': 1.1.9
+    dev: false
+
   /@codemirror/lang-html@6.4.9:
     resolution: {integrity: sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==}
     dependencies:
       '@codemirror/autocomplete': 6.18.6
-      '@codemirror/lang-css': 6.3.0
-      '@codemirror/lang-javascript': 6.2.2
+      '@codemirror/lang-css': 6.3.1
+      '@codemirror/lang-javascript': 6.2.3
       '@codemirror/language': 6.10.3
-      '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.5
       '@lezer/common': 1.2.3
       '@lezer/css': 1.1.9
       '@lezer/html': 1.3.10
@@ -2273,6 +2304,25 @@ packages:
       '@lezer/javascript': 1.4.19
     dev: false
 
+  /@codemirror/lang-javascript@6.2.3:
+    resolution: {integrity: sha512-8PR3vIWg7pSu7ur8A07pGiYHgy3hHj+mRYRCSG8q+mPIrl0F02rgpGv+DsQTHRTc30rydOsf5PZ7yjKFg2Ackw==}
+    dependencies:
+      '@codemirror/autocomplete': 6.18.6
+      '@codemirror/language': 6.10.3
+      '@codemirror/lint': 6.8.5
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.5
+      '@lezer/common': 1.2.3
+      '@lezer/javascript': 1.4.19
+    dev: false
+
+  /@codemirror/lang-json@6.0.1:
+    resolution: {integrity: sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==}
+    dependencies:
+      '@codemirror/language': 6.10.3
+      '@lezer/json': 1.0.3
+    dev: false
+
   /@codemirror/language@6.10.3:
     resolution: {integrity: sha512-kDqEU5sCP55Oabl6E7m5N+vZRoc0iWqgDVhEKifcHzPzjqCegcO4amfrYVL9PmPZpl4G0yjkpTpUO/Ui8CzO8A==}
     dependencies:
@@ -2292,6 +2342,14 @@ packages:
       crelt: 1.0.6
     dev: false
 
+  /@codemirror/search@6.5.10:
+    resolution: {integrity: sha512-RMdPdmsrUf53pb2VwflKGHEe1XVM07hI7vV2ntgw1dmqhimpatSJKva4VA9h4TLUDOD4EIF02201oZurpnEFsg==}
+    dependencies:
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.5
+      crelt: 1.0.6
+    dev: false
+
   /@codemirror/state@6.4.1:
     resolution: {integrity: sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==}
     dev: false
@@ -2302,6 +2360,15 @@ packages:
       '@marijn/find-cluster-break': 1.0.2
     dev: false
 
+  /@codemirror/theme-one-dark@6.1.2:
+    resolution: {integrity: sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==}
+    dependencies:
+      '@codemirror/language': 6.10.3
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.5
+      '@lezer/highlight': 1.2.1
+    dev: false
+
   /@codemirror/view@6.34.1:
     resolution: {integrity: sha512-t1zK/l9UiRqwUNPm+pdIT0qzJlzuVckbTEMVNFhfWkGiBQClstzg+78vedCvLSX0xJEZ6lwZbPpnljL7L6iwMQ==}
     dependencies:
@@ -3165,6 +3232,14 @@ packages:
       '@lezer/lr': 1.4.2
     dev: false
 
+  /@lezer/json@1.0.3:
+    resolution: {integrity: sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==}
+    dependencies:
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+    dev: false
+
   /@lezer/lr@1.4.2:
     resolution: {integrity: sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==}
     dependencies:
@@ -8052,6 +8127,53 @@ packages:
       eslint-visitor-keys: 3.4.3
     dev: true
 
+  /@uiw/codemirror-extensions-basic-setup@4.23.10(@codemirror/autocomplete@6.18.6)(@codemirror/commands@6.7.1)(@codemirror/language@6.10.3)(@codemirror/lint@6.8.5)(@codemirror/search@6.5.10)(@codemirror/state@6.5.2)(@codemirror/view@6.36.5):
+    resolution: {integrity: sha512-zpbmSeNs3OU/f/Eyd6brFnjsBUYwv2mFjWxlAsIRSwTlW+skIT60rQHFBSfsj/5UVSxSLWVeUYczN7AyXvgTGQ==}
+    peerDependencies:
+      '@codemirror/autocomplete': '>=6.0.0'
+      '@codemirror/commands': '>=6.0.0'
+      '@codemirror/language': '>=6.0.0'
+      '@codemirror/lint': '>=6.0.0'
+      '@codemirror/search': '>=6.0.0'
+      '@codemirror/state': '>=6.0.0'
+      '@codemirror/view': '>=6.0.0'
+    dependencies:
+      '@codemirror/autocomplete': 6.18.6
+      '@codemirror/commands': 6.7.1
+      '@codemirror/language': 6.10.3
+      '@codemirror/lint': 6.8.5
+      '@codemirror/search': 6.5.10
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.5
+    dev: false
+
+  /@uiw/react-codemirror@4.23.10(@babel/runtime@7.26.0)(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.10.3)(@codemirror/lint@6.8.5)(@codemirror/search@6.5.10)(@codemirror/state@6.5.2)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.36.5)(codemirror@6.0.1)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-AbN4eVHOL4ckRuIXpZxkzEqL/1ChVA+BSdEnAKjIB68pLQvKsVoYbiFP8zkXkYc4+Fcgq5KbAjvYqdo4ewemKw==}
+    peerDependencies:
+      '@babel/runtime': '>=7.11.0'
+      '@codemirror/state': '>=6.0.0'
+      '@codemirror/theme-one-dark': '>=6.0.0'
+      '@codemirror/view': '>=6.0.0'
+      codemirror: '>=6.0.0'
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@codemirror/commands': 6.7.1
+      '@codemirror/state': 6.5.2
+      '@codemirror/theme-one-dark': 6.1.2
+      '@codemirror/view': 6.36.5
+      '@uiw/codemirror-extensions-basic-setup': 4.23.10(@codemirror/autocomplete@6.18.6)(@codemirror/commands@6.7.1)(@codemirror/language@6.10.3)(@codemirror/lint@6.8.5)(@codemirror/search@6.5.10)(@codemirror/state@6.5.2)(@codemirror/view@6.36.5)
+      codemirror: 6.0.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    transitivePeerDependencies:
+      - '@codemirror/autocomplete'
+      - '@codemirror/language'
+      - '@codemirror/lint'
+      - '@codemirror/search'
+    dev: false
+
   /@ungap/structured-clone@1.2.0:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
@@ -8840,6 +8962,18 @@ packages:
       - '@types/react-dom'
     dev: false
 
+  /codemirror@6.0.1:
+    resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
+    dependencies:
+      '@codemirror/autocomplete': 6.18.6
+      '@codemirror/commands': 6.7.1
+      '@codemirror/language': 6.10.3
+      '@codemirror/lint': 6.8.5
+      '@codemirror/search': 6.5.10
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.5
+    dev: false
+
   /color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:

From dde838f27c9dc8f8105b5184aa35fc646851fddf Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Tue, 22 Apr 2025 01:51:44 +0400
Subject: [PATCH 067/143] refactor: update file handling and selection logic

---
 .../app/studio/[username]/publish/page.tsx    | 355 ++++++++++++------
 1 file changed, 231 insertions(+), 124 deletions(-)

diff --git a/apps/web/app/studio/[username]/publish/page.tsx b/apps/web/app/studio/[username]/publish/page.tsx
index 801ccac8..51c3bf98 100644
--- a/apps/web/app/studio/[username]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/publish/page.tsx
@@ -31,13 +31,13 @@ import {
 import { toast } from "sonner"
 
 // Backend API URL
-const API_BASE_URL = "http://localhost:8080" //"https://21st-studio.up.railway.app"
+const API_BASE_URL = "http://localhost:8080" //
 
 // Types
 interface FileEntry {
   name: string
-  isDir: boolean
-  path?: string
+  type: "file" | "dir"
+  path: string
   children?: FileEntry[]
 }
 
@@ -88,14 +88,13 @@ function PublishPageContent() {
   )
   const [previewURL, setPreviewURL] = useState<string | null>(null)
   const [files, setFiles] = useState<FileEntry[]>([])
-  const [selectedPath, setSelectedPath] = useState<string | null>(null)
+  const [selectedEntry, setSelectedEntry] = useState<FileEntry | null>(null)
   const [code, setCode] = useState<string>("")
   const [newFileName, setNewFileName] = useState("")
   const [isCreatingFile, setIsCreatingFile] = useState(false)
   const [isFetching, setIsFetching] = useState(false)
   const [isInitializing, setIsInitializing] = useState(true)
   const [isFileLoading, setIsFileLoading] = useState(false)
-  const wsRef = useRef<WebSocket | null>(null)
   const debounceRef = useRef<NodeJS.Timeout | null>(null)
 
   // 1. Bootstrap sandbox or load existing one
@@ -153,28 +152,6 @@ function PublishPageContent() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []) // Run only once on mount
 
-  // 2. Init WebSocket
-  useEffect(() => {
-    if (!projectId) return
-
-    // Create WebSocket connection to the backend
-    const wsUrl = `${API_BASE_URL.replace("https://", "wss://").replace("http://", "ws://")}/ws?projectId=${projectId}`
-    const ws = new WebSocket(wsUrl)
-
-    ws.onopen = () => console.log("WebSocket connected")
-    ws.onerror = (error) => {
-      console.error("WebSocket error:", error)
-      toast.error("WebSocket connection error")
-    }
-    ws.onclose = () => console.log("WebSocket closed")
-
-    wsRef.current = ws
-
-    return () => {
-      ws.close()
-    }
-  }, [projectId])
-
   // 3. Load file tree
   const fetchFileTree = async () => {
     if (!projectId) return
@@ -182,7 +159,16 @@ function PublishPageContent() {
     try {
       setIsFetching(true)
       const fileEntries = await fetchJSON(`/projects/${projectId}/files`)
-      setFiles(fileEntries)
+
+      // Map the API response to our FileEntry interface
+      const mappedEntries = fileEntries.map((entry: any) => ({
+        name: entry.name,
+        type: entry.type,
+        // Remove "/home/user" prefix from paths
+        path: entry.path.replace(/^\/home\/user/, ""),
+      }))
+
+      setFiles(mappedEntries)
     } catch (error) {
       console.error("Failed to load files:", error)
       toast.error("Failed to load files")
@@ -191,113 +177,173 @@ function PublishPageContent() {
     }
   }
 
+  // Fetch directory content
+  const fetchDirectoryContent = async (
+    dirPath: string,
+  ): Promise<FileEntry[]> => {
+    if (!projectId) return []
+    try {
+      const dirEntries = await fetchJSON(
+        `/projects/${projectId}/dir?path=${encodeURIComponent(dirPath)}`,
+      )
+      // Map the API response to our FileEntry interface
+      return dirEntries.map((entry: any) => ({
+        name: entry.name,
+        type: entry.type,
+        // Remove "/home/user" prefix from paths
+        path: entry.path.replace(/^\/home\/user/, ""),
+      }))
+    } catch (error) {
+      console.error(`Failed to load directory content for ${dirPath}:`, error)
+      toast.error(`Failed to load directory content for ${dirPath}`)
+      return [] // Return empty array on error
+    }
+  }
+
   useEffect(() => {
     if (projectId) {
       fetchFileTree()
     }
   }, [projectId])
 
-  // 4. Load file content when selected
+  // 4. Load content based on selection
   useEffect(() => {
-    if (!projectId || !selectedPath) return
+    // Clear editor if nothing is selected
+    if (!projectId || !selectedEntry) {
+      setCode("")
+      setIsFileLoading(false)
+      return
+    }
+
+    // Load content only if it's a file
+    if (selectedEntry.type === "file") {
+      loadFileContent(selectedEntry.path)
+    } else {
+      // Directory selected, clear editor
+      setCode("")
+      setIsFileLoading(false)
+    }
+    // Depend only on projectId and the selected entry object
+  }, [projectId, selectedEntry])
+
+  const loadFileContent = (filePath: string) => {
+    if (!projectId) return // Added check
+
+    // Ensure path is properly formatted without /home/user prefix
+    const cleanPath = filePath.replace(/^\/home\/user/, "")
 
     try {
       setIsFileLoading(true)
       fetch(
-        `${API_BASE_URL}/projects/${projectId}/file?path=${encodeURIComponent(selectedPath)}`,
+        `${API_BASE_URL}/projects/${projectId}/file?path=${encodeURIComponent(cleanPath)}`,
       )
         .then((res) => res.text())
         .then(setCode)
         .catch((error) => {
-          console.error("Failed to load file content:", error)
+          console.error(`Failed to load file content for ${cleanPath}:`, error)
           toast.error("Failed to load file content")
+          setCode("") // Clear code on error
         })
         .finally(() => setIsFileLoading(false))
     } catch (error) {
+      console.error("Error in loadFileContent:", error) // Log sync errors too
+      toast.error("Error initiating file load")
+      setCode("")
       setIsFileLoading(false)
     }
-  }, [projectId, selectedPath])
+  }
 
   // 5. Send code changes (debounced)
-  const sendChange = (content: string) => {
-    if (
-      !wsRef.current ||
-      wsRef.current.readyState !== WebSocket.OPEN ||
-      !selectedPath
-    )
-      return
+  const saveFileContent = async (filePath: string, content: string) => {
+    if (!projectId || !filePath) return
 
-    wsRef.current.send(
-      JSON.stringify({ type: "fileChange", path: selectedPath, content }),
-    )
+    try {
+      const cleanPath = filePath.replace(/^\/home\/user/, "")
+      await fetchJSON(
+        `/projects/${projectId}/file?path=${encodeURIComponent(cleanPath)}`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ content }),
+        },
+      )
+    } catch (error) {
+      console.error(`Failed to save file ${filePath}:`, error)
+      toast.error("Failed to save file changes")
+    }
   }
 
   const handleCodeChange = (value: string) => {
     setCode(value)
+    if (!selectedEntry || selectedEntry.type !== "file") return
+
     if (debounceRef.current) clearTimeout(debounceRef.current)
-    debounceRef.current = setTimeout(() => sendChange(value), 500)
+    debounceRef.current = setTimeout(
+      () => saveFileContent(selectedEntry.path, value),
+      500,
+    )
   }
 
   // 6. Create new file
-  const createNewFile = () => {
-    if (
-      !projectId ||
-      !wsRef.current ||
-      wsRef.current.readyState !== WebSocket.OPEN ||
-      !newFileName
-    )
-      return
+  const createNewFile = async () => {
+    if (!projectId || !newFileName) return
 
-    const newFilePath = `/${newFileName}`
+    // Make sure the path is properly formatted
+    const newFilePath = newFileName.startsWith("/")
+      ? newFileName
+      : `/${newFileName}`
 
-    wsRef.current.send(
-      JSON.stringify({
-        type: "fileCreate",
-        path: newFilePath,
-        content: "",
-      }),
-    )
+    try {
+      await fetchJSON(
+        `/projects/${projectId}/file?path=${encodeURIComponent(newFilePath)}`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ content: "" }),
+        },
+      )
 
-    // Reset UI state
-    setNewFileName("")
-    setIsCreatingFile(false)
-    toast.success(`Created ${newFileName}`)
+      setNewFileName("")
+      setIsCreatingFile(false)
+      toast.success(`Created ${newFileName}`)
 
-    // Refresh file tree and select new file
-    setTimeout(() => {
-      fetchFileTree()
-      setSelectedPath(newFilePath)
-    }, 500)
+      // Refresh file tree and select the new file
+      await fetchFileTree()
+      const newlyCreatedEntry = files.find((f) => f.path === newFilePath)
+      setSelectedEntry(newlyCreatedEntry || null)
+    } catch (error) {
+      console.error(`Failed to create file ${newFilePath}:`, error)
+      toast.error("Failed to create file")
+    }
   }
 
   // 7. Delete file
-  const deleteFile = (fileName: string) => {
-    if (
-      !projectId ||
-      !wsRef.current ||
-      wsRef.current.readyState !== WebSocket.OPEN
-    )
-      return
+  const deleteFile = async (filePath: string) => {
+    if (!projectId) return
 
-    const filePath = `/${fileName}`
+    // Ensure the path is properly formatted (without /home/user prefix)
+    const cleanPath = filePath.replace(/^\/home\/user/, "")
 
-    wsRef.current.send(
-      JSON.stringify({
-        type: "fileDelete",
-        path: filePath,
-      }),
-    )
-
-    // Reset selection if the deleted file was selected
-    if (selectedPath === filePath) {
-      setSelectedPath(null)
-      setCode("")
-    }
+    try {
+      await fetchJSON(
+        `/projects/${projectId}/file?path=${encodeURIComponent(cleanPath)}`,
+        {
+          method: "DELETE",
+        },
+      )
 
-    toast.success(`Deleted ${fileName}`)
+      // Reset selection if the deleted file was selected
+      if (selectedEntry?.path === filePath) {
+        setSelectedEntry(null)
+        setCode("")
+      }
 
-    // Refresh file tree
-    setTimeout(fetchFileTree, 500)
+      toast.success(`Deleted ${filePath.split("/").pop() || filePath}`) // Show just filename in toast
+      fetchFileTree() // Refresh file tree immediately
+    } catch (error) {
+      console.error(`Failed to delete file ${cleanPath}:`, error)
+      toast.error("Failed to delete file")
+    }
   }
 
   if (isInitializing) {
@@ -391,10 +437,11 @@ function PublishPageContent() {
             <CardContent className="p-0 overflow-y-auto flex-1">
               <FileTree
                 entries={files}
-                onSelect={setSelectedPath}
-                selectedPath={selectedPath}
+                onSelect={setSelectedEntry}
+                selectedPath={selectedEntry?.path || null}
                 onDelete={deleteFile}
                 isLoading={isFetching}
+                fetchDirectoryContent={fetchDirectoryContent}
               />
             </CardContent>
           </Card>
@@ -414,13 +461,13 @@ function PublishPageContent() {
                 <div className="h-full flex items-center justify-center">
                   <Loader2Icon className="h-8 w-8 animate-spin text-primary" />
                 </div>
-              ) : selectedPath ? (
+              ) : selectedEntry && selectedEntry.type === "file" ? (
                 <CodeMirror
                   value={code}
                   height="100%"
                   extensions={[
-                    selectedPath
-                      ? getLanguageExtension(selectedPath)
+                    selectedEntry
+                      ? getLanguageExtension(selectedEntry.path)
                       : javascript(),
                   ]}
                   theme={oneDark}
@@ -434,7 +481,9 @@ function PublishPageContent() {
                 />
               ) : (
                 <div className="h-full flex items-center justify-center text-muted-foreground">
-                  Select a file to start editing
+                  {selectedEntry && selectedEntry.type === "dir"
+                    ? `Directory: ${selectedEntry.path || selectedEntry.name}`
+                    : "Select a file to start editing"}
                 </div>
               )}
             </TabsContent>
@@ -473,15 +522,40 @@ function FileTree({
   selectedPath,
   onDelete,
   isLoading,
+  fetchDirectoryContent,
 }: {
   entries: FileEntry[]
-  onSelect: (path: string) => void
+  onSelect: (entry: FileEntry) => void
   selectedPath: string | null
-  onDelete: (fileName: string) => void
+  onDelete: (filePath: string) => void
   isLoading: boolean
+  fetchDirectoryContent: (dirPath: string) => Promise<FileEntry[]>
 }) {
-  const handleFileClick = (fileName: string) => {
-    onSelect(`/${fileName}`)
+  const [expandedDirs, setExpandedDirs] = useState<Record<string, FileEntry[]>>(
+    {},
+  )
+  const [loadingDirs, setLoadingDirs] = useState<Record<string, boolean>>({})
+
+  // Call onSelect with the full entry when a file is clicked
+  const handleFileClick = (entry: FileEntry) => {
+    onSelect(entry)
+  }
+
+  // Directory clicks load content but don't trigger onSelect for the editor pane
+  const handleDirClick = async (entry: FileEntry, e: React.MouseEvent) => {
+    if (!expandedDirs[entry.path] || e.ctrlKey) {
+      try {
+        setLoadingDirs((prev) => ({ ...prev, [entry.path]: true }))
+        const dirContents = await fetchDirectoryContent(entry.path) // Use prop
+        setExpandedDirs((prev) => ({ ...prev, [entry.path]: dirContents }))
+      } catch (error) {
+        // Error is already handled and toasted in the passed function
+        // console.error(`Failed to load contents of ${entry.path}:`, error) // Optional: log again here if needed
+        toast.error(`UI Error: Could not display contents for ${entry.name}`) // Add UI specific error toast
+      } finally {
+        setLoadingDirs((prev) => ({ ...prev, [entry.path]: false }))
+      }
+    }
   }
 
   if (isLoading && entries.length === 0) {
@@ -492,34 +566,64 @@ function FileTree({
     )
   }
 
-  return (
-    <ul className="text-sm py-2">
-      {entries.map((entry) => (
-        <li key={entry.name} className="py-1">
-          {entry.isDir ? (
-            <details className="group">
-              <summary className="flex items-center px-2 py-1 cursor-pointer hover:bg-muted rounded list-none">
-                <FolderIcon className="h-4 w-4 mr-1 text-blue-500" />
-                <span className="font-medium">{entry.name}</span>
+  const renderEntries = (items: FileEntry[], currentLevel = 0) => (
+    // Added currentLevel for potential indentation styling if needed later
+    <ul className={`text-sm py-1 ${currentLevel > 0 ? "pl-4" : ""}`}>
+      {items.map((entry) => (
+        <li key={entry.path} className="py-0.5">
+          {entry.type === "dir" ? (
+            <details className="group" open={!!expandedDirs[entry.path]}>
+              {" "}
+              {/* Keep details open if loaded */}
+              <summary
+                className={`flex items-center px-2 py-1 cursor-pointer hover:bg-muted rounded list-none ${
+                  selectedPath === entry.path ? "bg-accent" : "" // Highlight selected dir summary
+                }`}
+                onClick={(e) => {
+                  e.preventDefault() // Prevent default details toggle if needed, handle via state?
+                  handleDirClick(entry, e)
+                  // Optionally select the directory itself for context, if desired:
+                  // onSelect(entry)
+                }}
+              >
+                <FolderIcon className="h-4 w-4 mr-1 text-blue-500 flex-shrink-0" />
+                <span className="font-medium truncate" title={entry.name}>
+                  {entry.name}
+                </span>
+                {loadingDirs[entry.path] && (
+                  <Loader2Icon className="h-3 w-3 ml-auto animate-spin flex-shrink-0" />
+                )}
               </summary>
-              {/* We'd need another API call to get nested files */}
-              <ul className="pl-4 mt-1">
-                <li className="text-xs text-muted-foreground px-2 py-1">
-                  Directory listing not implemented
-                </li>
-              </ul>
+              {/* Render contents only if loaded */}
+              {expandedDirs[entry.path] && (
+                <div className="mt-1">
+                  {(() => {
+                    const content = expandedDirs[entry.path] // Assign to variable
+                    if (content && content.length > 0) {
+                      return renderEntries(content, currentLevel + 1)
+                    } else {
+                      return (
+                        <div className="text-xs text-muted-foreground px-2 py-1 pl-6">
+                          Empty directory
+                        </div>
+                      )
+                    }
+                  })()}
+                </div>
+              )}
             </details>
           ) : (
             <div className="flex items-center group">
               <button
-                className={`flex items-center w-full text-left px-2 py-1 hover:bg-muted rounded ${
-                  selectedPath === `/${entry.name}`
-                    ? "bg-muted font-medium"
+                className={`flex items-center w-full text-left px-2 py-1 hover:bg-muted rounded truncate ${
+                  selectedPath === entry.path
+                    ? "bg-accent font-medium" // Use accent for selection
                     : ""
                 }`}
-                onClick={() => handleFileClick(entry.name)}
+                onClick={() => handleFileClick(entry)}
+                title={entry.path}
               >
-                <FileIcon className="h-4 w-4 mr-1 text-gray-500" />
+                <FileIcon className="h-4 w-4 mr-1 text-gray-500 flex-shrink-0" />
                 {entry.name}
               </button>
               <DropdownMenu>
@@ -535,7 +639,7 @@ function FileTree({
                 <DropdownMenuContent align="end">
                   <DropdownMenuItem
                     className="text-destructive focus:text-destructive"
-                    onClick={() => onDelete(entry.name)}
+                    onClick={() => onDelete(entry.path)}
                   >
                     Delete file
                   </DropdownMenuItem>
@@ -545,9 +649,12 @@ function FileTree({
           )}
         </li>
       ))}
-      {entries.length === 0 && !isLoading && (
+      {/* Don't show "No files found" for subdirectories if they are just empty */}
+      {items.length === 0 && currentLevel === 0 && !isLoading && (
         <li className="px-2 text-muted-foreground">No files found</li>
       )}
     </ul>
   )
+
+  return renderEntries(entries)
 }

From 7f2a0094f8ce793e1e3e97d9efb19ac3f00bd171 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Tue, 22 Apr 2025 13:34:14 +0400
Subject: [PATCH 068/143] some state

---
 .../web/app/studio/[username]/page.client.tsx |   2 -
 .../app/studio/[username]/publish/page.tsx    |  53 ++-
 .../editor-new/component-publish-dialog.tsx   |  97 ------
 .../features/studio/editor-new/editor.tsx     |  81 -----
 .../studio/editor-new/utils/sandpack-files.ts |  16 -
 .../studio/publish/hooks/useSandbox.ts        | 329 ++++++++++++++++++
 .../features/studio/publish/index.ts          |   1 +
 package.json                                  |   1 +
 pnpm-lock.yaml                                |  19 +-
 9 files changed, 373 insertions(+), 226 deletions(-)
 delete mode 100644 apps/web/components/features/studio/editor-new/component-publish-dialog.tsx
 delete mode 100644 apps/web/components/features/studio/editor-new/editor.tsx
 delete mode 100644 apps/web/components/features/studio/editor-new/utils/sandpack-files.ts
 create mode 100644 apps/web/components/features/studio/publish/hooks/useSandbox.ts
 create mode 100644 apps/web/components/features/studio/publish/index.ts

diff --git a/apps/web/app/studio/[username]/page.client.tsx b/apps/web/app/studio/[username]/page.client.tsx
index cb8bcc66..e2adb03f 100644
--- a/apps/web/app/studio/[username]/page.client.tsx
+++ b/apps/web/app/studio/[username]/page.client.tsx
@@ -3,7 +3,6 @@
 import { User, DemoWithComponent } from "@/types/global"
 import { StudioLayout } from "@/components/features/studio/studio-layout"
 import { DemosTable } from "@/components/features/studio/ui/components-table"
-import { ComponentPublishDialog } from "@/components/features/studio/editor-new/component-publish-dialog"
 import { ComponentPublishDialog as ComponentPublishDialogOld } from "@/components/features/studio/editor/component-publish-dialog"
 import Link from "next/link"
 import { ArrowLeft, PlusCircle } from "lucide-react"
@@ -47,7 +46,6 @@ export function StudioUsernameClient({
                 <PlusCircle className="mr-2 h-4 w-4" />
                 Publish Component
               </Button>
-              <ComponentPublishDialog />
               <ComponentPublishDialogOld userId={user.id} />
             </>
           )}
diff --git a/apps/web/app/studio/[username]/publish/page.tsx b/apps/web/app/studio/[username]/publish/page.tsx
index 51c3bf98..4828536d 100644
--- a/apps/web/app/studio/[username]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/publish/page.tsx
@@ -7,12 +7,7 @@ import { Card, CardContent } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
 import { ResizablePanelGroup, ResizablePanel } from "@/components/ui/resizable"
-import CodeMirror from "@uiw/react-codemirror"
-import { javascript } from "@codemirror/lang-javascript"
-import { html } from "@codemirror/lang-html"
-import { css } from "@codemirror/lang-css"
-import { json } from "@codemirror/lang-json"
-import { oneDark } from "@codemirror/theme-one-dark"
+import Editor from "@monaco-editor/react"
 import { Input } from "@/components/ui/input"
 import {
   PlusIcon,
@@ -53,29 +48,32 @@ const getFileExtension = (filename: string): string => {
   return filename.slice(((filename.lastIndexOf(".") - 1) >>> 0) + 2)
 }
 
-const getLanguageExtension = (filename: string) => {
+const getMonacoLanguage = (filename: string) => {
   const ext = getFileExtension(filename).toLowerCase()
 
   switch (ext) {
     case "js":
+      return "javascript"
     case "jsx":
+      return "javascript"
     case "ts":
+      return "typescript"
     case "tsx":
-      return javascript()
+      return "typescript"
     case "html":
     case "htm":
     case "svg":
     case "xml":
-      return html()
+      return "html"
     case "css":
     case "scss":
     case "sass":
     case "less":
-      return css()
+      return "css"
     case "json":
-      return json()
+      return "json"
     default:
-      return javascript()
+      return "javascript"
   }
 }
 
@@ -280,7 +278,7 @@ function PublishPageContent() {
     if (debounceRef.current) clearTimeout(debounceRef.current)
     debounceRef.current = setTimeout(
       () => saveFileContent(selectedEntry.path, value),
-      500,
+      800,
     )
   }
 
@@ -462,22 +460,23 @@ function PublishPageContent() {
                   <Loader2Icon className="h-8 w-8 animate-spin text-primary" />
                 </div>
               ) : selectedEntry && selectedEntry.type === "file" ? (
-                <CodeMirror
-                  value={code}
+                <Editor
                   height="100%"
-                  extensions={[
-                    selectedEntry
-                      ? getLanguageExtension(selectedEntry.path)
-                      : javascript(),
-                  ]}
-                  theme={oneDark}
-                  onChange={handleCodeChange}
-                  basicSetup={{
-                    lineNumbers: true,
-                    highlightActiveLine: true,
-                    highlightSelectionMatches: true,
-                    autocompletion: true,
+                  language={getMonacoLanguage(selectedEntry.path)}
+                  value={code}
+                  onChange={(value) => handleCodeChange(value || "")}
+                  theme="vs-dark"
+                  options={{
+                    minimap: { enabled: false },
+                    fontSize: 14,
+                    wordWrap: "on",
+                    automaticLayout: true,
                   }}
+                  loading={
+                    <div className="h-full flex items-center justify-center">
+                      <Loader2Icon className="h-6 w-6 animate-spin text-primary" />
+                    </div>
+                  }
                 />
               ) : (
                 <div className="h-full flex items-center justify-center text-muted-foreground">
diff --git a/apps/web/components/features/studio/editor-new/component-publish-dialog.tsx b/apps/web/components/features/studio/editor-new/component-publish-dialog.tsx
deleted file mode 100644
index 7b5e05d7..00000000
--- a/apps/web/components/features/studio/editor-new/component-publish-dialog.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React, { useState } from "react"
-import { Button } from "@/components/ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog"
-import { PlusCircle } from "lucide-react"
-import { Spinner } from "@/components/icons/spinner"
-import { Editor } from "./editor"
-
-type ComponentPublishDialogProps = {}
-
-export function ComponentPublishDialog({}: ComponentPublishDialogProps) {
-  const [open, setOpen] = useState(false)
-  const [componentCode, setComponentCode] = useState("")
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [dialogContent, setDialogContent] = useState<React.ReactNode>(null)
-
-  const handleOpenChange = (newOpen: boolean) => {
-    setOpen(newOpen)
-    if (!newOpen) {
-      setComponentCode("")
-      setDialogContent(null)
-      setIsProcessing(false)
-    }
-  }
-
-  const handleProcessComponent = async () => {
-    setIsProcessing(true)
-    try {
-      // Process component logic here
-      // if (onPublish) {
-      //   onPublish(componentCode)
-      // }
-      // Set dialog content with the result
-      setDialogContent(<div>Component processed successfully</div>)
-    } catch (error) {
-      setDialogContent(<div>Error processing component</div>)
-    } finally {
-      setIsProcessing(false)
-    }
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogTrigger asChild>
-        <Button>
-          <PlusCircle className="mr-2 h-4 w-4" />
-          Publish Component
-        </Button>
-      </DialogTrigger>
-
-      <DialogContent
-        className="sm:max-w-[1600px] sm:w-[95vw] h-[90vh] flex flex-col p-0 gap-0 overflow-hidden"
-        hideCloseButton
-      >
-        <DialogHeader className="flex flex-row p-4 gap-8 items-start justify-between border-b bg-muted">
-          <div className="flex flex-col gap-2">
-            <DialogTitle>Publish New Component</DialogTitle>
-            <DialogDescription>
-              Enter your component code below. Make sure it follows our
-              guidelines and includes all necessary imports.
-            </DialogDescription>
-          </div>
-
-          <Button
-            onClick={handleProcessComponent}
-            disabled={isProcessing || !componentCode.trim()}
-            className="ml-auto !mt-0"
-          >
-            {isProcessing ? (
-              <>
-                <span className="mr-2">
-                  <Spinner size={16} />
-                </span>
-                Processing...
-              </>
-            ) : (
-              "Process Component"
-            )}
-          </Button>
-        </DialogHeader>
-
-        <div className="flex-grow overflow-hidden flex flex-col h-full">
-          <div className="h-full min-h-[400px] overflow-hidden flex-grow">
-            {/* Render the stable dialog content */}
-            <Editor />
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
diff --git a/apps/web/components/features/studio/editor-new/editor.tsx b/apps/web/components/features/studio/editor-new/editor.tsx
deleted file mode 100644
index 89524dee..00000000
--- a/apps/web/components/features/studio/editor-new/editor.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import {
-  SandpackFileExplorer,
-  SandpackProvider,
-  SandpackLayout,
-  SandpackCodeEditor,
-  SandpackPreview,
-} from "@codesandbox/sandpack-react"
-import { useTheme } from "next-themes"
-import { autocompletion, completionKeymap } from "@codemirror/autocomplete"
-import { files } from "./utils/sandpack-files"
-export const Editor = () => {
-  const { resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === "dark"
-
-  // Define Tailwind classes for autocompletion styling
-  const darkTooltipClasses = "!bg-gray-800 !text-white !border-none"
-  const lightTooltipClasses = "!bg-white !text-gray-800 !border-none"
-  const darkOptionClasses = "!text-gray-100"
-  const lightOptionClasses = "!text-gray-700"
-
-  return (
-    <div className="h-full w-full">
-      <SandpackProvider
-        files={files}
-        theme={resolvedTheme as "light" | "dark"}
-        template="vite-react-ts"
-        // options={{
-        //   externalResources: ["https://cdn.tailwindcss.com"],
-        // }}
-        customSetup={{
-          dependencies: {
-            // default Sandpack dependencies written explicitly
-            react: "^18.3.1",
-            "react-dom": "^18.2.0",
-          },
-          devDependencies: {
-            // default Sandpack dependencies written explicitly
-            "@types/react": "^18.0.28",
-            "@types/react-dom": "^18.0.11",
-            "@vitejs/plugin-react": "^4.1.4",
-            typescript: "^4.9.5",
-            vite: "4.1.4",
-            "esbuild-wasm": "^0.17.12",
-          },
-        }}
-      >
-        <SandpackLayout>
-          <SandpackFileExplorer />
-          <SandpackCodeEditor
-            showLineNumbers={true}
-            showTabs={false}
-            extensions={[
-              autocompletion({
-                tooltipClass: () =>
-                  isDark ? darkTooltipClasses : lightTooltipClasses,
-                optionClass: () =>
-                  isDark ? darkOptionClasses : lightOptionClasses,
-              }),
-            ]}
-            extensionsKeymap={[completionKeymap]}
-          />
-          <SandpackPreview showRefreshButton />
-        </SandpackLayout>
-      </SandpackProvider>
-    </div>
-  )
-}
-
-// Add this to your global CSS file:
-// .cm-tooltip-autocomplete-dark {
-//   background-color: #2d2d2d !important;
-//   color: #fff !important;
-//   border-color: #444 !important;
-// }
-// .cm-tooltip-autocomplete-dark .cm-completionLabel,
-// .cm-tooltip-autocomplete-dark .cm-completionDetail {
-//   color: #fff !important;
-// }
-// .cm-completion-option-dark.cm-completionIcon {
-//   color: #ddd !important;
-// }
diff --git a/apps/web/components/features/studio/editor-new/utils/sandpack-files.ts b/apps/web/components/features/studio/editor-new/utils/sandpack-files.ts
deleted file mode 100644
index 6e47f2a4..00000000
--- a/apps/web/components/features/studio/editor-new/utils/sandpack-files.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { SandpackFiles } from "@codesandbox/sandpack-react"
-
-const viteConfig = `import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-})
-`
-
-export const files: SandpackFiles = {
-  "/vite.config.ts": {
-    code: viteConfig,
-  },
-}
diff --git a/apps/web/components/features/studio/publish/hooks/useSandbox.ts b/apps/web/components/features/studio/publish/hooks/useSandbox.ts
new file mode 100644
index 00000000..1dde1c17
--- /dev/null
+++ b/apps/web/components/features/studio/publish/hooks/useSandbox.ts
@@ -0,0 +1,329 @@
+import { useState, useEffect, useRef, useCallback } from "react"
+import { useRouter, useSearchParams } from "next/navigation"
+import { toast } from "sonner"
+
+interface FileEntry {
+  name: string
+  type: "file" | "dir"
+  path: string
+}
+
+const API_BASE_URL = "http://localhost:8080"
+
+const fetchJSON = async (url: string, opts: RequestInit = {}) => {
+  const fullUrl = url.startsWith("http") ? url : `${API_BASE_URL}${url}`
+  const res = await fetch(fullUrl, opts)
+  if (!res.ok) {
+    const errorText = await res.text()
+    console.error(`API Error (${res.status}): ${errorText} for URL: ${fullUrl}`)
+    throw new Error(errorText || `HTTP error! status: ${res.status}`)
+  }
+  const contentType = res.headers.get("content-type")
+  if (contentType && contentType.indexOf("application/json") !== -1) {
+    return res.json()
+  }
+  return null
+}
+
+/**
+ * Manages the state and backend interactions for the sandbox environment.
+ * Handles project creation/loading, file operations (CRUD), and editor state.
+ */
+export function useSandbox() {
+  const searchParams = useSearchParams()
+  const router = useRouter()
+
+  const [projectId, setProjectId] = useState<string | null>(null)
+  const [previewURL, setPreviewURL] = useState<string | null>(null)
+  const [files, setFiles] = useState<FileEntry[]>([])
+  const [selectedEntry, setSelectedEntry] = useState<FileEntry | null>(null)
+  const [code, setCode] = useState<string>("")
+  const [isInitializing, setIsInitializing] = useState(true)
+  const [isFetchingFiles, setIsFetchingFiles] = useState(false)
+  const [isFileLoading, setIsFileLoading] = useState(false)
+  const debounceRef = useRef<NodeJS.Timeout | null>(null)
+
+  // --- Initialization ---
+  // Fetches or creates a sandbox project based on the URL query parameter.
+  useEffect(() => {
+    const initializeSandbox = async () => {
+      setIsInitializing(true)
+      const existingProjectId = searchParams.get("projectId")
+
+      const createNewSandbox = async () => {
+        try {
+          console.log("Attempting to create a new sandbox...")
+          const { projectId: newProjectId, previewURL: newPreviewURL } =
+            await fetchJSON("/projects", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ template: "nextjs-builder" }),
+            })
+          console.log("New sandbox created:", newProjectId)
+          setProjectId(newProjectId)
+          setPreviewURL(newPreviewURL)
+          router.push(`${window.location.pathname}?projectId=${newProjectId}`, {
+            scroll: false,
+          })
+          toast.success("New sandbox created")
+        } catch (error) {
+          console.error("Failed to create sandbox:", error)
+          toast.error(`Failed to create sandbox: ${error}`)
+        }
+      }
+
+      if (existingProjectId) {
+        try {
+          console.log("Attempting to load existing sandbox:", existingProjectId)
+          const { previewURL: loadedPreviewURL } = await fetchJSON(
+            `/projects/${existingProjectId}`,
+          )
+          console.log("Existing sandbox loaded:", existingProjectId)
+          setProjectId(existingProjectId)
+          setPreviewURL(loadedPreviewURL)
+          toast.info(`Restored sandbox: ${existingProjectId}`)
+        } catch (error) {
+          console.warn(
+            `Failed to load sandbox ${existingProjectId}:`,
+            error,
+            "Creating a new one.",
+          )
+          toast.warning(
+            `Failed to load sandbox ${existingProjectId}. Creating a new one.`,
+          )
+          await createNewSandbox()
+        }
+      } else {
+        console.log("No existing project ID found, creating new sandbox.")
+        await createNewSandbox()
+      }
+      setIsInitializing(false)
+    }
+
+    initializeSandbox()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // --- File Tree Operations ---
+  const fetchFileTree = useCallback(async () => {
+    if (!projectId || isFetchingFiles) return
+
+    console.log(`Fetching file tree for project: ${projectId}`)
+    setIsFetchingFiles(true)
+    try {
+      const fileEntries = await fetchJSON(`/projects/${projectId}/files`)
+      const mappedEntries = fileEntries.map((entry: any) => ({
+        name: entry.name,
+        type: entry.type,
+        path: entry.path.replace(/^\/home\/user/, ""),
+      }))
+      setFiles(mappedEntries)
+      console.log("File tree fetched successfully.")
+    } catch (error) {
+      console.error("Failed to load file tree:", error)
+      toast.error(`Failed to load file tree: ${error}`)
+      setFiles([])
+    } finally {
+      setIsFetchingFiles(false)
+    }
+  }, [projectId, isFetchingFiles])
+
+  // Fetches the initial file tree once the project ID is available.
+  useEffect(() => {
+    if (projectId && !isInitializing) {
+      fetchFileTree()
+    }
+  }, [projectId, isInitializing, fetchFileTree])
+
+  const fetchDirectoryContent = useCallback(
+    async (dirPath: string): Promise<FileEntry[]> => {
+      if (!projectId) return []
+      const cleanPath = dirPath.replace(/^\/home\/user/, "")
+      console.log(`Fetching directory content: ${cleanPath}`)
+      try {
+        const dirEntries = await fetchJSON(
+          `/projects/${projectId}/dir?path=${encodeURIComponent(cleanPath)}`,
+        )
+        console.log(`Directory content fetched for: ${cleanPath}`)
+        return dirEntries.map((entry: any) => ({
+          name: entry.name,
+          type: entry.type,
+          path: entry.path.replace(/^\/home\/user/, ""),
+        }))
+      } catch (error) {
+        console.error(
+          `Failed to load directory content for ${cleanPath}:`,
+          error,
+        )
+        toast.error(`Failed to load directory: ${dirPath.split("/").pop()}`)
+        return []
+      }
+    },
+    [projectId],
+  )
+
+  // --- File Content Operations ---
+  const loadFileContent = useCallback(
+    async (entry: FileEntry) => {
+      if (!projectId || entry.type !== "file") {
+        setCode("")
+        setIsFileLoading(false)
+        return
+      }
+
+      const cleanPath = entry.path.replace(/^\/home\/user/, "")
+      console.log(`Loading file content: ${cleanPath}`)
+      setIsFileLoading(true)
+      try {
+        const response = await fetch(
+          `${API_BASE_URL}/projects/${projectId}/file?path=${encodeURIComponent(cleanPath)}`,
+        )
+        if (!response.ok) {
+          throw new Error(
+            `HTTP error! status: ${response.status}, ${await response.text()}`,
+          )
+        }
+        const textContent = await response.text()
+        setCode(textContent)
+        console.log(`File content loaded: ${cleanPath}`)
+      } catch (error) {
+        console.error(`Failed to load file content for ${cleanPath}:`, error)
+        toast.error(`Failed to load file: ${entry.name}`)
+        setCode("")
+      } finally {
+        setIsFileLoading(false)
+      }
+    },
+    [projectId],
+  )
+
+  // Loads file content when a file entry is selected.
+  useEffect(() => {
+    if (selectedEntry) {
+      if (selectedEntry.type === "file") {
+        loadFileContent(selectedEntry)
+      } else {
+        setCode("")
+        setIsFileLoading(false)
+      }
+    } else {
+      setCode("")
+      setIsFileLoading(false)
+    }
+  }, [selectedEntry, loadFileContent])
+
+  // Saves file content changes to the backend.
+  const saveFileContent = useCallback(
+    async (filePath: string, content: string) => {
+      if (!projectId || !filePath) return
+      const cleanPath = filePath.replace(/^\/home\/user/, "")
+      console.log(`Saving file content: ${cleanPath}`)
+      try {
+        await fetchJSON(
+          `/projects/${projectId}/file?path=${encodeURIComponent(cleanPath)}`,
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ content }),
+          },
+        )
+        console.log(`File content saved: ${cleanPath}`)
+      } catch (error) {
+        console.error(`Failed to save file ${cleanPath}:`, error)
+        toast.error(`Failed to save changes to ${filePath.split("/").pop()}`)
+      }
+    },
+    [projectId],
+  )
+
+  // Debounces the save operation when the editor code changes.
+  const handleCodeChange = useCallback(
+    (value: string) => {
+      setCode(value)
+      if (!selectedEntry || selectedEntry.type !== "file") return
+
+      if (debounceRef.current) clearTimeout(debounceRef.current)
+      debounceRef.current = setTimeout(() => {
+        saveFileContent(selectedEntry.path, value)
+      }, 800)
+    },
+    [selectedEntry, saveFileContent],
+  )
+
+  // --- File Manipulation ---
+  const createNewFile = useCallback(
+    async (newFilePath: string) => {
+      if (!projectId || !newFilePath) return false
+      const cleanPath = newFilePath.startsWith("/")
+        ? newFilePath
+        : `/${newFilePath}`
+
+      console.log(`Creating new file: ${cleanPath}`)
+      try {
+        await fetchJSON(
+          `/projects/${projectId}/file?path=${encodeURIComponent(cleanPath)}`,
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ content: "" }),
+          },
+        )
+        toast.success(`Created ${newFilePath.split("/").pop()}`)
+        await fetchFileTree()
+        console.log(`File created: ${cleanPath}`)
+        return cleanPath
+      } catch (error) {
+        console.error(`Failed to create file ${cleanPath}:`, error)
+        toast.error(`Failed to create file: ${newFilePath.split("/").pop()}`)
+        return false
+      }
+    },
+    [projectId, fetchFileTree],
+  )
+
+  const deleteFile = useCallback(
+    async (filePath: string) => {
+      if (!projectId) return
+      const cleanPath = filePath.replace(/^\/home\/user/, "")
+      console.log(`Deleting file: ${cleanPath}`)
+      try {
+        await fetchJSON(
+          `/projects/${projectId}/file?path=${encodeURIComponent(cleanPath)}`,
+          { method: "DELETE" },
+        )
+
+        toast.success(`Deleted ${filePath.split("/").pop()}`)
+
+        if (selectedEntry?.path === filePath) {
+          setSelectedEntry(null)
+        }
+
+        await fetchFileTree()
+        console.log(`File deleted: ${cleanPath}`)
+      } catch (error) {
+        console.error(`Failed to delete file ${cleanPath}:`, error)
+        toast.error(`Failed to delete file: ${filePath.split("/").pop()}`)
+      }
+    },
+    [projectId, selectedEntry, fetchFileTree],
+  )
+
+  return {
+    projectId,
+    previewURL,
+    files,
+    selectedEntry,
+    code,
+    isInitializing,
+    isFetchingFiles,
+    isFileLoading,
+    setSelectedEntry,
+    handleCodeChange,
+    createNewFile,
+    deleteFile,
+    refreshFileTree: fetchFileTree,
+    fetchDirectoryContent,
+  }
+}
+
+export type UseSandboxReturn = ReturnType<typeof useSandbox>
diff --git a/apps/web/components/features/studio/publish/index.ts b/apps/web/components/features/studio/publish/index.ts
new file mode 100644
index 00000000..49840316
--- /dev/null
+++ b/apps/web/components/features/studio/publish/index.ts
@@ -0,0 +1 @@
+// put some helpers code here
diff --git a/package.json b/package.json
index 3e6482fd..42d88a73 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@codemirror/lang-javascript": "^6.2.3",
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/theme-one-dark": "^6.1.2",
+    "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-radio-group": "^1.2.3",
     "@tanstack/react-table": "^8.21.2",
     "@uiw/react-codemirror": "^4.23.10",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3c3a3780..614a649f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,9 @@ importers:
       '@codemirror/theme-one-dark':
         specifier: ^6.1.2
         version: 6.1.2
+      '@monaco-editor/react':
+        specifier: ^4.6.0
+        version: 4.6.0(monaco-editor@0.52.2)(react-dom@18.3.1)(react@18.3.1)
       '@radix-ui/react-radio-group':
         specifier: ^1.2.3
         version: 1.2.3(react-dom@18.3.1)(react@18.3.1)
@@ -47,9 +50,6 @@ importers:
       recharts:
         specifier: ^2.15.1
         version: 2.15.1(react-dom@18.3.1)(react@18.3.1)
-      resizable:
-        specifier: link:@/components/ui/resizable
-        version: link:@/components/ui/resizable
     devDependencies:
       prettier:
         specifier: ^3.2.5
@@ -3272,6 +3272,19 @@ packages:
       state-local: 1.0.7
     dev: false
 
+  /@monaco-editor/react@4.6.0(monaco-editor@0.52.2)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==}
+    peerDependencies:
+      monaco-editor: '>= 0.25.0 < 1'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@monaco-editor/loader': 1.4.0(monaco-editor@0.52.2)
+      monaco-editor: 0.52.2
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
   /@monaco-editor/react@4.6.0(monaco-editor@0.52.2)(react-dom@19.0.0)(react@19.0.0):
     resolution: {integrity: sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==}
     peerDependencies:

From 5220a34dcba85195b019c8f43d91fc1d020d23aa Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Wed, 23 Apr 2025 10:09:32 +0400
Subject: [PATCH 069/143] add: codesandbox sdk

---
 .../studio/[username]/publish-new/page.tsx    | 47 +++++++++++++++++++
 apps/web/package.json                         |  1 +
 pnpm-lock.yaml                                |  8 ++++
 3 files changed, 56 insertions(+)
 create mode 100644 apps/web/app/studio/[username]/publish-new/page.tsx

diff --git a/apps/web/app/studio/[username]/publish-new/page.tsx b/apps/web/app/studio/[username]/publish-new/page.tsx
new file mode 100644
index 00000000..24cf13f9
--- /dev/null
+++ b/apps/web/app/studio/[username]/publish-new/page.tsx
@@ -0,0 +1,47 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { connectToSandbox } from "@codesandbox/sdk/browser"
+import { SandboxSession, SandboxClient } from "@codesandbox/sdk"
+
+const PublishPage = () => {
+  const [status, setStatus] = useState("Connecting...")
+  const [sandbox, setSandbox] = useState<SandboxSession | null>(null)
+
+  useEffect(() => {
+    const connect = async () => {
+      try {
+        const response = await fetch(
+          "http://localhost:8080/codesandbox/create",
+          {
+            method: "POST",
+          },
+        )
+
+        const startData = await response.json()
+
+        console.log("Start data:", startData)
+
+        const sandbox = await connectToSandbox(startData)
+        setStatus("Connected to sandbox!")
+        setSandbox(sandbox)
+        console.log("Sandbox connected:", sandbox)
+      } catch (error: any) {
+        setStatus("Failed to connect: " + error.message)
+        console.error("Connection error:", error)
+      }
+    }
+
+    connect()
+  }, [])
+
+  useEffect(() => {
+    if (sandbox) {
+      console.log("Sandbox:", sandbox)
+    }
+  }, [sandbox])
+
+  return <div>{status}</div>
+}
+
+export default PublishPage
diff --git a/apps/web/package.json b/apps/web/package.json
index d29bed92..b7b8ca4e 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -25,6 +25,7 @@
     "@clerk/themes": "^2.1.35",
     "@codemirror/autocomplete": "^6.18.6",
     "@codesandbox/sandpack-react": "^2.19.9",
+    "@codesandbox/sdk": "^0.11.2",
     "@hookform/resolvers": "^3.9.1",
     "@monaco-editor/react": "^4.6.0",
     "@next/third-parties": "15.2.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 614a649f..4b7a2291 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -154,6 +154,9 @@ importers:
       '@codesandbox/sandpack-react':
         specifier: ^2.19.9
         version: 2.19.9(react-dom@19.0.0)(react@19.0.0)
+      '@codesandbox/sdk':
+        specifier: ^0.11.2
+        version: 0.11.2
       '@hookform/resolvers':
         specifier: ^3.9.1
         version: 3.9.1(react-hook-form@7.53.1)
@@ -2432,6 +2435,11 @@ packages:
       react-is: 17.0.2
     dev: false
 
+  /@codesandbox/sdk@0.11.2:
+    resolution: {integrity: sha512-sn8+rdrdfRiQ/BeJxHLLXV+J1fiMtL0KGCgFzN8tg/VEHQVvVD31o1xL6j8pg9fm2FVPFWCnZbhMFaj6jOaqyQ==}
+    hasBin: true
+    dev: false
+
   /@cspotcode/source-map-support@0.8.1:
     resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
     engines: {node: '>=12'}

From 35ab64395866c18cb8c77a3db12b5fbcfe945c29 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Wed, 23 Apr 2025 10:56:36 +0400
Subject: [PATCH 070/143] split the logic

---
 .../studio/[username]/publish-new/page.tsx    |   4 +
 .../app/studio/[username]/publish/page.tsx    | 625 +++---------------
 .../components/features/studio/publish/api.ts | 125 ++++
 .../studio/publish/components/EditorPane.tsx  |  56 ++
 .../publish/components/FileExplorer.tsx       | 108 +++
 .../studio/publish/components/FileTree.tsx    | 142 ++++
 .../studio/publish/components/PreviewPane.tsx |  15 +
 .../publish/components/PublishHeader.tsx      |  20 +
 .../features/studio/publish/utils.ts          |  32 +
 9 files changed, 594 insertions(+), 533 deletions(-)
 create mode 100644 apps/web/components/features/studio/publish/api.ts
 create mode 100644 apps/web/components/features/studio/publish/components/EditorPane.tsx
 create mode 100644 apps/web/components/features/studio/publish/components/FileExplorer.tsx
 create mode 100644 apps/web/components/features/studio/publish/components/FileTree.tsx
 create mode 100644 apps/web/components/features/studio/publish/components/PreviewPane.tsx
 create mode 100644 apps/web/components/features/studio/publish/components/PublishHeader.tsx
 create mode 100644 apps/web/components/features/studio/publish/utils.ts

diff --git a/apps/web/app/studio/[username]/publish-new/page.tsx b/apps/web/app/studio/[username]/publish-new/page.tsx
index 24cf13f9..d4ee089b 100644
--- a/apps/web/app/studio/[username]/publish-new/page.tsx
+++ b/apps/web/app/studio/[username]/publish-new/page.tsx
@@ -38,6 +38,10 @@ const PublishPage = () => {
   useEffect(() => {
     if (sandbox) {
       console.log("Sandbox:", sandbox)
+
+      sandbox.fs.readdir("/").then((files) => {
+        console.log("Files:", files)
+      })
     }
   }, [sandbox])
 
diff --git a/apps/web/app/studio/[username]/publish/page.tsx b/apps/web/app/studio/[username]/publish/page.tsx
index 4828536d..c606ff4f 100644
--- a/apps/web/app/studio/[username]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/publish/page.tsx
@@ -2,82 +2,25 @@
 
 import { useEffect, useState, useRef, Suspense } from "react"
 import { useSearchParams, useRouter } from "next/navigation"
-import { Sandpack } from "@codesandbox/sandpack-react"
-import { Card, CardContent } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
 import { ResizablePanelGroup, ResizablePanel } from "@/components/ui/resizable"
-import Editor from "@monaco-editor/react"
-import { Input } from "@/components/ui/input"
-import {
-  PlusIcon,
-  FolderIcon,
-  FileIcon,
-  RefreshCwIcon,
-  TrashIcon,
-  Loader2Icon,
-} from "lucide-react"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
 import { toast } from "sonner"
+import { FileEntry } from "@/components/features/studio/publish/api"
+import {
+  initializeProject,
+  fetchFileTree,
+  fetchDirectoryContent,
+  loadFileContent,
+  saveFileContent,
+  createFile,
+  deleteFile,
+} from "@/components/features/studio/publish/api"
+import { FileExplorer } from "@/components/features/studio/publish/components/FileExplorer"
+import { EditorPane } from "@/components/features/studio/publish/components/EditorPane"
+import { PreviewPane } from "@/components/features/studio/publish/components/PreviewPane"
+import { PublishHeader } from "@/components/features/studio/publish/components/PublishHeader"
+import { Loader2Icon } from "lucide-react"
 
-// Backend API URL
-const API_BASE_URL = "http://localhost:8080" //
-
-// Types
-interface FileEntry {
-  name: string
-  type: "file" | "dir"
-  path: string
-  children?: FileEntry[]
-}
-
-// Utility
-const fetchJSON = async (url: string, opts: RequestInit = {}) => {
-  const fullUrl = url.startsWith("http") ? url : `${API_BASE_URL}${url}`
-  const res = await fetch(fullUrl, opts)
-  if (!res.ok) throw new Error(await res.text())
-  return res.json()
-}
-
-const getFileExtension = (filename: string): string => {
-  return filename.slice(((filename.lastIndexOf(".") - 1) >>> 0) + 2)
-}
-
-const getMonacoLanguage = (filename: string) => {
-  const ext = getFileExtension(filename).toLowerCase()
-
-  switch (ext) {
-    case "js":
-      return "javascript"
-    case "jsx":
-      return "javascript"
-    case "ts":
-      return "typescript"
-    case "tsx":
-      return "typescript"
-    case "html":
-    case "htm":
-    case "svg":
-    case "xml":
-      return "html"
-    case "css":
-    case "scss":
-    case "sass":
-    case "less":
-      return "css"
-    case "json":
-      return "json"
-    default:
-      return "javascript"
-  }
-}
-
-// Main Component Content
 function PublishPageContent() {
   const searchParams = useSearchParams()
   const router = useRouter()
@@ -88,85 +31,40 @@ function PublishPageContent() {
   const [files, setFiles] = useState<FileEntry[]>([])
   const [selectedEntry, setSelectedEntry] = useState<FileEntry | null>(null)
   const [code, setCode] = useState<string>("")
-  const [newFileName, setNewFileName] = useState("")
-  const [isCreatingFile, setIsCreatingFile] = useState(false)
   const [isFetching, setIsFetching] = useState(false)
   const [isInitializing, setIsInitializing] = useState(true)
   const [isFileLoading, setIsFileLoading] = useState(false)
   const debounceRef = useRef<NodeJS.Timeout | null>(null)
 
-  // 1. Bootstrap sandbox or load existing one
   useEffect(() => {
-    const initializeSandbox = async () => {
+    const initialize = async () => {
       setIsInitializing(true)
-      const existingProjectId = searchParams.get("projectId")
-
-      if (existingProjectId) {
-        try {
-          // Attempt to load existing project details
-          const { previewURL } = await fetchJSON(
-            `/projects/${existingProjectId}`,
-          )
-          setProjectId(existingProjectId)
-          setPreviewURL(previewURL)
-          toast.info(`Restored sandbox: ${existingProjectId}`)
-        } catch (error) {
-          console.error("Failed to load existing sandbox:", error)
-          toast.warning("Failed to load existing sandbox, creating a new one.")
-          // If loading fails, create a new project
-          await createNewSandbox()
-        }
-      } else {
-        // Create a new project if no projectId in URL
-        await createNewSandbox()
-      }
-      setIsInitializing(false)
-    }
-
-    const createNewSandbox = async () => {
       try {
         const { projectId: newProjectId, previewURL: newPreviewURL } =
-          await fetchJSON("/projects", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ template: "nextjs-builder" }),
-          })
+          await initializeProject(projectId)
         setProjectId(newProjectId)
         setPreviewURL(newPreviewURL)
-        // Update URL with the new projectId
-        router.push(
-          `${window.location.pathname}?projectId=${newProjectId}`,
-          { scroll: false }, // Use Next.js router for client-side navigation
-        )
-        toast.success("New sandbox created successfully")
+        if (newProjectId !== projectId) {
+          router.push(`${window.location.pathname}?projectId=${newProjectId}`, {
+            scroll: false,
+          })
+        }
       } catch (error) {
-        console.error("Failed to create sandbox:", error)
-        toast.error("Failed to create sandbox")
-        // Potentially add retry logic or guide user
+        console.error("Failed to initialize project:", error)
+        toast.error("Failed to initialize project")
+      } finally {
+        setIsInitializing(false)
       }
     }
 
-    initializeSandbox()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []) // Run only once on mount
-
-  // 3. Load file tree
-  const fetchFileTree = async () => {
-    if (!projectId) return
+    initialize()
+  }, [])
 
+  const loadFileTree = async (projectId: string) => {
     try {
       setIsFetching(true)
-      const fileEntries = await fetchJSON(`/projects/${projectId}/files`)
-
-      // Map the API response to our FileEntry interface
-      const mappedEntries = fileEntries.map((entry: any) => ({
-        name: entry.name,
-        type: entry.type,
-        // Remove "/home/user" prefix from paths
-        path: entry.path.replace(/^\/home\/user/, ""),
-      }))
-
-      setFiles(mappedEntries)
+      const fileEntries = await fetchFileTree(projectId)
+      setFiles(fileEntries)
     } catch (error) {
       console.error("Failed to load files:", error)
       toast.error("Failed to load files")
@@ -175,175 +73,85 @@ function PublishPageContent() {
     }
   }
 
-  // Fetch directory content
-  const fetchDirectoryContent = async (
-    dirPath: string,
-  ): Promise<FileEntry[]> => {
-    if (!projectId) return []
-    try {
-      const dirEntries = await fetchJSON(
-        `/projects/${projectId}/dir?path=${encodeURIComponent(dirPath)}`,
-      )
-      // Map the API response to our FileEntry interface
-      return dirEntries.map((entry: any) => ({
-        name: entry.name,
-        type: entry.type,
-        // Remove "/home/user" prefix from paths
-        path: entry.path.replace(/^\/home\/user/, ""),
-      }))
-    } catch (error) {
-      console.error(`Failed to load directory content for ${dirPath}:`, error)
-      toast.error(`Failed to load directory content for ${dirPath}`)
-      return [] // Return empty array on error
-    }
-  }
-
   useEffect(() => {
     if (projectId) {
-      fetchFileTree()
+      loadFileTree(projectId)
     }
   }, [projectId])
 
-  // 4. Load content based on selection
   useEffect(() => {
-    // Clear editor if nothing is selected
-    if (!projectId || !selectedEntry) {
+    if (!projectId || !selectedEntry || selectedEntry.type !== "file") {
       setCode("")
       setIsFileLoading(false)
       return
     }
 
-    // Load content only if it's a file
-    if (selectedEntry.type === "file") {
-      loadFileContent(selectedEntry.path)
-    } else {
-      // Directory selected, clear editor
-      setCode("")
-      setIsFileLoading(false)
-    }
-    // Depend only on projectId and the selected entry object
-  }, [projectId, selectedEntry])
-
-  const loadFileContent = (filePath: string) => {
-    if (!projectId) return // Added check
-
-    // Ensure path is properly formatted without /home/user prefix
-    const cleanPath = filePath.replace(/^\/home\/user/, "")
-
-    try {
-      setIsFileLoading(true)
-      fetch(
-        `${API_BASE_URL}/projects/${projectId}/file?path=${encodeURIComponent(cleanPath)}`,
-      )
-        .then((res) => res.text())
-        .then(setCode)
-        .catch((error) => {
-          console.error(`Failed to load file content for ${cleanPath}:`, error)
-          toast.error("Failed to load file content")
-          setCode("") // Clear code on error
-        })
-        .finally(() => setIsFileLoading(false))
-    } catch (error) {
-      console.error("Error in loadFileContent:", error) // Log sync errors too
-      toast.error("Error initiating file load")
-      setCode("")
-      setIsFileLoading(false)
+    const loadContent = async () => {
+      try {
+        setIsFileLoading(true)
+        const content = await loadFileContent(projectId, selectedEntry.path)
+        setCode(content)
+      } catch (error) {
+        console.error("Failed to load file content:", error)
+        toast.error("Failed to load file content")
+        setCode("")
+      } finally {
+        setIsFileLoading(false)
+      }
     }
-  }
-
-  // 5. Send code changes (debounced)
-  const saveFileContent = async (filePath: string, content: string) => {
-    if (!projectId || !filePath) return
 
-    try {
-      const cleanPath = filePath.replace(/^\/home\/user/, "")
-      await fetchJSON(
-        `/projects/${projectId}/file?path=${encodeURIComponent(cleanPath)}`,
-        {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ content }),
-        },
-      )
-    } catch (error) {
-      console.error(`Failed to save file ${filePath}:`, error)
-      toast.error("Failed to save file changes")
-    }
-  }
+    loadContent()
+  }, [projectId, selectedEntry])
 
   const handleCodeChange = (value: string) => {
     setCode(value)
     if (!selectedEntry || selectedEntry.type !== "file") return
 
     if (debounceRef.current) clearTimeout(debounceRef.current)
-    debounceRef.current = setTimeout(
-      () => saveFileContent(selectedEntry.path, value),
-      800,
-    )
+    debounceRef.current = setTimeout(async () => {
+      try {
+        await saveFileContent(projectId!, selectedEntry.path, value)
+      } catch (error) {
+        console.error("Failed to save file:", error)
+        toast.error("Failed to save file")
+      }
+    }, 800)
   }
 
-  // 6. Create new file
-  const createNewFile = async () => {
-    if (!projectId || !newFileName) return
-
-    // Make sure the path is properly formatted
-    const newFilePath = newFileName.startsWith("/")
-      ? newFileName
-      : `/${newFileName}`
-
+  const handleCreateFile = async (fileName: string) => {
+    if (!projectId) return
     try {
-      await fetchJSON(
-        `/projects/${projectId}/file?path=${encodeURIComponent(newFilePath)}`,
-        {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ content: "" }),
-        },
-      )
-
-      setNewFileName("")
-      setIsCreatingFile(false)
-      toast.success(`Created ${newFileName}`)
-
-      // Refresh file tree and select the new file
-      await fetchFileTree()
-      const newlyCreatedEntry = files.find((f) => f.path === newFilePath)
-      setSelectedEntry(newlyCreatedEntry || null)
+      await createFile(projectId, fileName)
+      await loadFileTree(projectId)
+      const newFile = files.find((f) => f.path === `/${fileName}`)
+      if (newFile) setSelectedEntry(newFile)
+      toast.success(`Created ${fileName}`)
     } catch (error) {
-      console.error(`Failed to create file ${newFilePath}:`, error)
+      console.error("Failed to create file:", error)
       toast.error("Failed to create file")
     }
   }
 
-  // 7. Delete file
-  const deleteFile = async (filePath: string) => {
+  const handleDeleteFile = async (filePath: string) => {
     if (!projectId) return
-
-    // Ensure the path is properly formatted (without /home/user prefix)
-    const cleanPath = filePath.replace(/^\/home\/user/, "")
-
     try {
-      await fetchJSON(
-        `/projects/${projectId}/file?path=${encodeURIComponent(cleanPath)}`,
-        {
-          method: "DELETE",
-        },
-      )
-
-      // Reset selection if the deleted file was selected
+      await deleteFile(projectId, filePath)
       if (selectedEntry?.path === filePath) {
         setSelectedEntry(null)
         setCode("")
       }
-
-      toast.success(`Deleted ${filePath.split("/").pop() || filePath}`) // Show just filename in toast
-      fetchFileTree() // Refresh file tree immediately
+      await loadFileTree(projectId)
+      toast.success(`Deleted ${filePath.split("/").pop()}`)
     } catch (error) {
-      console.error(`Failed to delete file ${cleanPath}:`, error)
+      console.error("Failed to delete file:", error)
       toast.error("Failed to delete file")
     }
   }
 
+  const handleReset = () => {
+    window.location.reload()
+  }
+
   if (isInitializing) {
     return (
       <div className="h-screen w-full flex items-center justify-center">
@@ -357,95 +165,24 @@ function PublishPageContent() {
 
   return (
     <div className="h-screen w-full flex flex-col">
-      {/* Header */}
-      <header className="flex items-center gap-2 p-4 border-b">
-        <h1 className="text-2xl font-bold">Publish Your Sandbox</h1>
-        {projectId && (
-          <span className="text-xs text-muted-foreground ml-2">
-            {projectId}
-          </span>
-        )}
-        <Button
-          size="sm"
-          onClick={() => window.location.reload()}
-          className="ml-auto"
-        >
-          Reset
-        </Button>
-      </header>
+      <PublishHeader projectId={projectId} onReset={handleReset} />
 
-      {/* Main Content */}
       <ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
-        {/* File Explorer */}
         <ResizablePanel defaultSize={20} minSize={15} className="border-r">
-          <Card className="h-full rounded-none flex flex-col">
-            <div className="flex items-center justify-between p-2 border-b">
-              <span className="font-medium">Files</span>
-              <div className="flex gap-1">
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  onClick={() => setIsCreatingFile(true)}
-                  disabled={isFetching}
-                >
-                  <PlusIcon className="h-4 w-4" />
-                </Button>
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  onClick={fetchFileTree}
-                  disabled={isFetching}
-                >
-                  {isFetching ? (
-                    <Loader2Icon className="h-4 w-4 animate-spin" />
-                  ) : (
-                    <RefreshCwIcon className="h-4 w-4" />
-                  )}
-                </Button>
-              </div>
-            </div>
-
-            {isCreatingFile && (
-              <div className="p-2 border-b">
-                <div className="flex gap-2">
-                  <Input
-                    placeholder="filename.js"
-                    value={newFileName}
-                    onChange={(e) => setNewFileName(e.target.value)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter") createNewFile()
-                      if (e.key === "Escape") {
-                        setIsCreatingFile(false)
-                        setNewFileName("")
-                      }
-                    }}
-                    autoFocus
-                  />
-                  <Button
-                    size="sm"
-                    onClick={createNewFile}
-                    disabled={!newFileName}
-                  >
-                    Create
-                  </Button>
-                </div>
-              </div>
-            )}
-
-            <CardContent className="p-0 overflow-y-auto flex-1">
-              <FileTree
-                entries={files}
-                onSelect={setSelectedEntry}
-                selectedPath={selectedEntry?.path || null}
-                onDelete={deleteFile}
-                isLoading={isFetching}
-                fetchDirectoryContent={fetchDirectoryContent}
-              />
-            </CardContent>
-          </Card>
+          <FileExplorer
+            entries={files}
+            onSelect={setSelectedEntry}
+            selectedPath={selectedEntry?.path || null}
+            onDelete={handleDeleteFile}
+            onCreateFile={handleCreateFile}
+            onRefresh={() => projectId && loadFileTree(projectId)}
+            isLoading={isFetching}
+            fetchDirectoryContent={(dirPath) =>
+              fetchDirectoryContent(projectId!, dirPath)
+            }
+          />
         </ResizablePanel>
 
-        {/* Editor + Preview */}
         <ResizablePanel defaultSize={80} minSize={55}>
           <Tabs defaultValue="editor" className="h-full flex flex-col">
             <TabsList className="mx-2 mt-2">
@@ -455,48 +192,15 @@ function PublishPageContent() {
               </TabsTrigger>
             </TabsList>
             <TabsContent value="editor" className="flex-1 min-h-0 p-2">
-              {isFileLoading ? (
-                <div className="h-full flex items-center justify-center">
-                  <Loader2Icon className="h-8 w-8 animate-spin text-primary" />
-                </div>
-              ) : selectedEntry && selectedEntry.type === "file" ? (
-                <Editor
-                  height="100%"
-                  language={getMonacoLanguage(selectedEntry.path)}
-                  value={code}
-                  onChange={(value) => handleCodeChange(value || "")}
-                  theme="vs-dark"
-                  options={{
-                    minimap: { enabled: false },
-                    fontSize: 14,
-                    wordWrap: "on",
-                    automaticLayout: true,
-                  }}
-                  loading={
-                    <div className="h-full flex items-center justify-center">
-                      <Loader2Icon className="h-6 w-6 animate-spin text-primary" />
-                    </div>
-                  }
-                />
-              ) : (
-                <div className="h-full flex items-center justify-center text-muted-foreground">
-                  {selectedEntry && selectedEntry.type === "dir"
-                    ? `Directory: ${selectedEntry.path || selectedEntry.name}`
-                    : "Select a file to start editing"}
-                </div>
-              )}
+              <EditorPane
+                selectedFile={selectedEntry}
+                code={code}
+                onCodeChange={handleCodeChange}
+                isLoading={isFileLoading}
+              />
             </TabsContent>
             <TabsContent value="preview" className="flex-1 min-h-0 p-2">
-              {previewURL ? (
-                <iframe
-                  src={previewURL}
-                  className="w-full h-full border rounded"
-                />
-              ) : (
-                <div className="h-full flex items-center justify-center text-muted-foreground">
-                  Waiting for dev server...
-                </div>
-              )}
+              <PreviewPane previewURL={previewURL} />
             </TabsContent>
           </Tabs>
         </ResizablePanel>
@@ -505,7 +209,6 @@ function PublishPageContent() {
   )
 }
 
-// Wrap the main component with Suspense for useSearchParams
 export default function PublishPage() {
   return (
     <Suspense fallback={<div>Loading project...</div>}>
@@ -513,147 +216,3 @@ export default function PublishPage() {
     </Suspense>
   )
 }
-
-// FileTree Component
-function FileTree({
-  entries,
-  onSelect,
-  selectedPath,
-  onDelete,
-  isLoading,
-  fetchDirectoryContent,
-}: {
-  entries: FileEntry[]
-  onSelect: (entry: FileEntry) => void
-  selectedPath: string | null
-  onDelete: (filePath: string) => void
-  isLoading: boolean
-  fetchDirectoryContent: (dirPath: string) => Promise<FileEntry[]>
-}) {
-  const [expandedDirs, setExpandedDirs] = useState<Record<string, FileEntry[]>>(
-    {},
-  )
-  const [loadingDirs, setLoadingDirs] = useState<Record<string, boolean>>({})
-
-  // Call onSelect with the full entry when a file is clicked
-  const handleFileClick = (entry: FileEntry) => {
-    onSelect(entry)
-  }
-
-  // Directory clicks load content but don't trigger onSelect for the editor pane
-  const handleDirClick = async (entry: FileEntry, e: React.MouseEvent) => {
-    if (!expandedDirs[entry.path] || e.ctrlKey) {
-      try {
-        setLoadingDirs((prev) => ({ ...prev, [entry.path]: true }))
-        const dirContents = await fetchDirectoryContent(entry.path) // Use prop
-        setExpandedDirs((prev) => ({ ...prev, [entry.path]: dirContents }))
-      } catch (error) {
-        // Error is already handled and toasted in the passed function
-        // console.error(`Failed to load contents of ${entry.path}:`, error) // Optional: log again here if needed
-        toast.error(`UI Error: Could not display contents for ${entry.name}`) // Add UI specific error toast
-      } finally {
-        setLoadingDirs((prev) => ({ ...prev, [entry.path]: false }))
-      }
-    }
-  }
-
-  if (isLoading && entries.length === 0) {
-    return (
-      <div className="flex justify-center items-center py-8">
-        <Loader2Icon className="h-6 w-6 animate-spin text-muted-foreground" />
-      </div>
-    )
-  }
-
-  const renderEntries = (items: FileEntry[], currentLevel = 0) => (
-    // Added currentLevel for potential indentation styling if needed later
-    <ul className={`text-sm py-1 ${currentLevel > 0 ? "pl-4" : ""}`}>
-      {items.map((entry) => (
-        <li key={entry.path} className="py-0.5">
-          {entry.type === "dir" ? (
-            <details className="group" open={!!expandedDirs[entry.path]}>
-              {" "}
-              {/* Keep details open if loaded */}
-              <summary
-                className={`flex items-center px-2 py-1 cursor-pointer hover:bg-muted rounded list-none ${
-                  selectedPath === entry.path ? "bg-accent" : "" // Highlight selected dir summary
-                }`}
-                onClick={(e) => {
-                  e.preventDefault() // Prevent default details toggle if needed, handle via state?
-                  handleDirClick(entry, e)
-                  // Optionally select the directory itself for context, if desired:
-                  // onSelect(entry)
-                }}
-              >
-                <FolderIcon className="h-4 w-4 mr-1 text-blue-500 flex-shrink-0" />
-                <span className="font-medium truncate" title={entry.name}>
-                  {entry.name}
-                </span>
-                {loadingDirs[entry.path] && (
-                  <Loader2Icon className="h-3 w-3 ml-auto animate-spin flex-shrink-0" />
-                )}
-              </summary>
-              {/* Render contents only if loaded */}
-              {expandedDirs[entry.path] && (
-                <div className="mt-1">
-                  {(() => {
-                    const content = expandedDirs[entry.path] // Assign to variable
-                    if (content && content.length > 0) {
-                      return renderEntries(content, currentLevel + 1)
-                    } else {
-                      return (
-                        <div className="text-xs text-muted-foreground px-2 py-1 pl-6">
-                          Empty directory
-                        </div>
-                      )
-                    }
-                  })()}
-                </div>
-              )}
-            </details>
-          ) : (
-            <div className="flex items-center group">
-              <button
-                className={`flex items-center w-full text-left px-2 py-1 hover:bg-muted rounded truncate ${
-                  selectedPath === entry.path
-                    ? "bg-accent font-medium" // Use accent for selection
-                    : ""
-                }`}
-                onClick={() => handleFileClick(entry)}
-                title={entry.path}
-              >
-                <FileIcon className="h-4 w-4 mr-1 text-gray-500 flex-shrink-0" />
-                {entry.name}
-              </button>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button
-                    size="icon"
-                    variant="ghost"
-                    className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity ml-1"
-                  >
-                    <TrashIcon className="h-3 w-3 text-muted-foreground" />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                  <DropdownMenuItem
-                    className="text-destructive focus:text-destructive"
-                    onClick={() => onDelete(entry.path)}
-                  >
-                    Delete file
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
-          )}
-        </li>
-      ))}
-      {/* Don't show "No files found" for subdirectories if they are just empty */}
-      {items.length === 0 && currentLevel === 0 && !isLoading && (
-        <li className="px-2 text-muted-foreground">No files found</li>
-      )}
-    </ul>
-  )
-
-  return renderEntries(entries)
-}
diff --git a/apps/web/components/features/studio/publish/api.ts b/apps/web/components/features/studio/publish/api.ts
new file mode 100644
index 00000000..495c1a49
--- /dev/null
+++ b/apps/web/components/features/studio/publish/api.ts
@@ -0,0 +1,125 @@
+const API_BASE_URL = "http://localhost:8080"
+
+export interface FileEntry {
+  name: string
+  type: "file" | "dir"
+  path: string
+  children?: FileEntry[]
+}
+
+export interface ProjectResponse {
+  projectId: string
+  previewURL: string
+}
+
+const fetchJSON = async (url: string, opts: RequestInit = {}) => {
+  const fullUrl = url.startsWith("http") ? url : `${API_BASE_URL}${url}`
+  const res = await fetch(fullUrl, opts)
+  if (!res.ok) throw new Error(await res.text())
+  return res.json()
+}
+
+export const initializeProject = async (
+  existingProjectId?: string | null,
+): Promise<ProjectResponse> => {
+  if (existingProjectId) {
+    try {
+      const { previewURL } = await fetchJSON(`/projects/${existingProjectId}`)
+      return { projectId: existingProjectId, previewURL }
+    } catch (error) {
+      console.error("Failed to load existing sandbox:", error)
+      return createNewProject()
+    }
+  }
+  return createNewProject()
+}
+
+export const createNewProject = async (): Promise<ProjectResponse> => {
+  const { projectId, previewURL } = await fetchJSON("/projects", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ template: "nextjs-builder" }),
+  })
+  return { projectId, previewURL }
+}
+
+export const fetchFileTree = async (
+  projectId: string,
+): Promise<FileEntry[]> => {
+  const fileEntries = await fetchJSON(`/projects/${projectId}/files`)
+  return fileEntries.map((entry: any) => ({
+    name: entry.name,
+    type: entry.type,
+    path: entry.path.replace(/^\/home\/user/, ""),
+  }))
+}
+
+export const fetchDirectoryContent = async (
+  projectId: string,
+  dirPath: string,
+): Promise<FileEntry[]> => {
+  const dirEntries = await fetchJSON(
+    `/projects/${projectId}/dir?path=${encodeURIComponent(dirPath)}`,
+  )
+  return dirEntries.map((entry: any) => ({
+    name: entry.name,
+    type: entry.type,
+    path: entry.path.replace(/^\/home\/user/, ""),
+  }))
+}
+
+export const loadFileContent = async (
+  projectId: string,
+  filePath: string,
+): Promise<string> => {
+  const cleanPath = filePath.replace(/^\/home\/user/, "")
+  const response = await fetch(
+    `${API_BASE_URL}/projects/${projectId}/file?path=${encodeURIComponent(cleanPath)}`,
+  )
+  if (!response.ok) throw new Error(await response.text())
+  return response.text()
+}
+
+export const saveFileContent = async (
+  projectId: string,
+  filePath: string,
+  content: string,
+): Promise<void> => {
+  const cleanPath = filePath.replace(/^\/home\/user/, "")
+  await fetchJSON(
+    `/projects/${projectId}/file?path=${encodeURIComponent(cleanPath)}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ content }),
+    },
+  )
+}
+
+export const createFile = async (
+  projectId: string,
+  filePath: string,
+): Promise<void> => {
+  const cleanPath = filePath.startsWith("/") ? filePath : `/${filePath}`
+  await fetchJSON(
+    `/projects/${projectId}/file?path=${encodeURIComponent(cleanPath)}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ content: "" }),
+    },
+  )
+}
+
+export const deleteFile = async (
+  projectId: string,
+  filePath: string,
+): Promise<void> => {
+  const cleanPath = filePath.replace(/^\/home\/user/, "")
+  await fetchJSON(
+    `/projects/${projectId}/file?path=${encodeURIComponent(cleanPath)}`,
+    {
+      method: "DELETE",
+    },
+  )
+}
diff --git a/apps/web/components/features/studio/publish/components/EditorPane.tsx b/apps/web/components/features/studio/publish/components/EditorPane.tsx
new file mode 100644
index 00000000..faaa34ca
--- /dev/null
+++ b/apps/web/components/features/studio/publish/components/EditorPane.tsx
@@ -0,0 +1,56 @@
+import { Loader2Icon } from "lucide-react"
+import Editor from "@monaco-editor/react"
+import { getMonacoLanguage } from "../utils"
+
+interface EditorPaneProps {
+  selectedFile: { path: string; type: string } | null
+  code: string
+  onCodeChange: (value: string) => void
+  isLoading: boolean
+}
+
+export function EditorPane({
+  selectedFile,
+  code,
+  onCodeChange,
+  isLoading,
+}: EditorPaneProps) {
+  if (isLoading) {
+    return (
+      <div className="h-full flex items-center justify-center">
+        <Loader2Icon className="h-8 w-8 animate-spin text-primary" />
+      </div>
+    )
+  }
+
+  if (!selectedFile || selectedFile.type !== "file") {
+    return (
+      <div className="h-full flex items-center justify-center text-muted-foreground">
+        {selectedFile && selectedFile.type === "dir"
+          ? `Directory: ${selectedFile.path}`
+          : "Select a file to start editing"}
+      </div>
+    )
+  }
+
+  return (
+    <Editor
+      height="100%"
+      language={getMonacoLanguage(selectedFile.path)}
+      value={code}
+      onChange={(value) => onCodeChange(value || "")}
+      theme="vs-dark"
+      options={{
+        minimap: { enabled: false },
+        fontSize: 14,
+        wordWrap: "on",
+        automaticLayout: true,
+      }}
+      loading={
+        <div className="h-full flex items-center justify-center">
+          <Loader2Icon className="h-6 w-6 animate-spin text-primary" />
+        </div>
+      }
+    />
+  )
+}
diff --git a/apps/web/components/features/studio/publish/components/FileExplorer.tsx b/apps/web/components/features/studio/publish/components/FileExplorer.tsx
new file mode 100644
index 00000000..c430eeb6
--- /dev/null
+++ b/apps/web/components/features/studio/publish/components/FileExplorer.tsx
@@ -0,0 +1,108 @@
+import { useState } from "react"
+import { FileEntry } from "../api"
+import { PlusIcon, RefreshCwIcon, Loader2Icon } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Card, CardContent } from "@/components/ui/card"
+import { FileTree } from "./FileTree"
+
+interface FileExplorerProps {
+  entries: FileEntry[]
+  onSelect: (entry: FileEntry) => void
+  selectedPath: string | null
+  onDelete: (filePath: string) => void
+  onCreateFile: (fileName: string) => void
+  onRefresh: () => void
+  isLoading: boolean
+  fetchDirectoryContent: (dirPath: string) => Promise<FileEntry[]>
+}
+
+export function FileExplorer({
+  entries,
+  onSelect,
+  selectedPath,
+  onDelete,
+  onCreateFile,
+  onRefresh,
+  isLoading,
+  fetchDirectoryContent,
+}: FileExplorerProps) {
+  const [isCreatingFile, setIsCreatingFile] = useState(false)
+  const [newFileName, setNewFileName] = useState("")
+
+  const handleCreateFile = () => {
+    if (newFileName) {
+      onCreateFile(newFileName)
+      setNewFileName("")
+      setIsCreatingFile(false)
+    }
+  }
+
+  return (
+    <Card className="h-full rounded-none flex flex-col">
+      <div className="flex items-center justify-between p-2 border-b">
+        <span className="font-medium">Files</span>
+        <div className="flex gap-1">
+          <Button
+            size="icon"
+            variant="ghost"
+            onClick={() => setIsCreatingFile(true)}
+            disabled={isLoading}
+          >
+            <PlusIcon className="h-4 w-4" />
+          </Button>
+          <Button
+            size="icon"
+            variant="ghost"
+            onClick={onRefresh}
+            disabled={isLoading}
+          >
+            {isLoading ? (
+              <Loader2Icon className="h-4 w-4 animate-spin" />
+            ) : (
+              <RefreshCwIcon className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
+      </div>
+
+      {isCreatingFile && (
+        <div className="p-2 border-b">
+          <div className="flex gap-2">
+            <Input
+              placeholder="filename.js"
+              value={newFileName}
+              onChange={(e) => setNewFileName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") handleCreateFile()
+                if (e.key === "Escape") {
+                  setIsCreatingFile(false)
+                  setNewFileName("")
+                }
+              }}
+              autoFocus
+            />
+            <Button
+              size="sm"
+              onClick={handleCreateFile}
+              disabled={!newFileName}
+            >
+              Create
+            </Button>
+          </div>
+        </div>
+      )}
+
+      <CardContent className="p-0 overflow-y-auto flex-1">
+        <FileTree
+          entries={entries}
+          onSelect={onSelect}
+          selectedPath={selectedPath}
+          onDelete={onDelete}
+          isLoading={isLoading}
+          fetchDirectoryContent={fetchDirectoryContent}
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/web/components/features/studio/publish/components/FileTree.tsx b/apps/web/components/features/studio/publish/components/FileTree.tsx
new file mode 100644
index 00000000..ff153abe
--- /dev/null
+++ b/apps/web/components/features/studio/publish/components/FileTree.tsx
@@ -0,0 +1,142 @@
+import { useState } from "react"
+import { FileEntry } from "../api"
+import { FolderIcon, FileIcon, Loader2Icon, TrashIcon } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+interface FileTreeProps {
+  entries: FileEntry[]
+  onSelect: (entry: FileEntry) => void
+  selectedPath: string | null
+  onDelete: (filePath: string) => void
+  isLoading: boolean
+  fetchDirectoryContent: (dirPath: string) => Promise<FileEntry[]>
+}
+
+export function FileTree({
+  entries,
+  onSelect,
+  selectedPath,
+  onDelete,
+  isLoading,
+  fetchDirectoryContent,
+}: FileTreeProps) {
+  const [expandedDirs, setExpandedDirs] = useState<Record<string, FileEntry[]>>(
+    {},
+  )
+  const [loadingDirs, setLoadingDirs] = useState<Record<string, boolean>>({})
+
+  const handleFileClick = (entry: FileEntry) => {
+    onSelect(entry)
+  }
+
+  const handleDirClick = async (entry: FileEntry, e: React.MouseEvent) => {
+    if (!expandedDirs[entry.path] || e.ctrlKey) {
+      try {
+        setLoadingDirs((prev) => ({ ...prev, [entry.path]: true }))
+        const dirContents = await fetchDirectoryContent(entry.path)
+        setExpandedDirs((prev) => ({ ...prev, [entry.path]: dirContents }))
+      } catch (error) {
+        console.error(`Failed to load contents of ${entry.path}:`, error)
+      } finally {
+        setLoadingDirs((prev) => ({ ...prev, [entry.path]: false }))
+      }
+    }
+  }
+
+  if (isLoading && entries.length === 0) {
+    return (
+      <div className="flex justify-center items-center py-8">
+        <Loader2Icon className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+
+  const renderEntries = (items: FileEntry[], currentLevel = 0) => (
+    <ul className={`text-sm py-1 ${currentLevel > 0 ? "pl-4" : ""}`}>
+      {items.map((entry) => (
+        <li key={entry.path} className="py-0.5">
+          {entry.type === "dir" ? (
+            <details className="group" open={!!expandedDirs[entry.path]}>
+              <summary
+                className={`flex items-center px-2 py-1 cursor-pointer hover:bg-muted rounded list-none ${
+                  selectedPath === entry.path ? "bg-accent" : ""
+                }`}
+                onClick={(e) => {
+                  e.preventDefault()
+                  handleDirClick(entry, e)
+                }}
+              >
+                <FolderIcon className="h-4 w-4 mr-1 text-blue-500 flex-shrink-0" />
+                <span className="font-medium truncate" title={entry.name}>
+                  {entry.name}
+                </span>
+                {loadingDirs[entry.path] && (
+                  <Loader2Icon className="h-3 w-3 ml-auto animate-spin flex-shrink-0" />
+                )}
+              </summary>
+              {expandedDirs[entry.path] && (
+                <div className="mt-1">
+                  {(() => {
+                    const content = expandedDirs[entry.path]
+                    if (content && content.length > 0) {
+                      return renderEntries(content, currentLevel + 1)
+                    } else {
+                      return (
+                        <div className="text-xs text-muted-foreground px-2 py-1 pl-6">
+                          Empty directory
+                        </div>
+                      )
+                    }
+                  })()}
+                </div>
+              )}
+            </details>
+          ) : (
+            <div className="flex items-center group">
+              <button
+                className={`flex items-center w-full text-left px-2 py-1 hover:bg-muted rounded truncate ${
+                  selectedPath === entry.path ? "bg-accent font-medium" : ""
+                }`}
+                onClick={() => handleFileClick(entry)}
+                title={entry.path}
+              >
+                <FileIcon className="h-4 w-4 mr-1 text-gray-500 flex-shrink-0" />
+                {entry.name}
+              </button>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity ml-1"
+                  >
+                    <TrashIcon className="h-3 w-3 text-muted-foreground" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem
+                    className="text-destructive focus:text-destructive"
+                    onClick={() => onDelete(entry.path)}
+                  >
+                    Delete file
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          )}
+        </li>
+      ))}
+      {items.length === 0 && currentLevel === 0 && !isLoading && (
+        <li className="px-2 text-muted-foreground">No files found</li>
+      )}
+    </ul>
+  )
+
+  return renderEntries(entries)
+}
diff --git a/apps/web/components/features/studio/publish/components/PreviewPane.tsx b/apps/web/components/features/studio/publish/components/PreviewPane.tsx
new file mode 100644
index 00000000..068a0846
--- /dev/null
+++ b/apps/web/components/features/studio/publish/components/PreviewPane.tsx
@@ -0,0 +1,15 @@
+interface PreviewPaneProps {
+  previewURL: string | null
+}
+
+export function PreviewPane({ previewURL }: PreviewPaneProps) {
+  if (!previewURL) {
+    return (
+      <div className="h-full flex items-center justify-center text-muted-foreground">
+        Waiting for dev server...
+      </div>
+    )
+  }
+
+  return <iframe src={previewURL} className="w-full h-full border rounded" />
+}
diff --git a/apps/web/components/features/studio/publish/components/PublishHeader.tsx b/apps/web/components/features/studio/publish/components/PublishHeader.tsx
new file mode 100644
index 00000000..27881461
--- /dev/null
+++ b/apps/web/components/features/studio/publish/components/PublishHeader.tsx
@@ -0,0 +1,20 @@
+import { Button } from "@/components/ui/button"
+
+interface PublishHeaderProps {
+  projectId: string | null
+  onReset: () => void
+}
+
+export function PublishHeader({ projectId, onReset }: PublishHeaderProps) {
+  return (
+    <header className="flex items-center gap-2 p-4 border-b">
+      <h1 className="text-2xl font-bold">Publish Your Sandbox</h1>
+      {projectId && (
+        <span className="text-xs text-muted-foreground ml-2">{projectId}</span>
+      )}
+      <Button size="sm" onClick={onReset} className="ml-auto">
+        Reset
+      </Button>
+    </header>
+  )
+}
diff --git a/apps/web/components/features/studio/publish/utils.ts b/apps/web/components/features/studio/publish/utils.ts
new file mode 100644
index 00000000..f0429dec
--- /dev/null
+++ b/apps/web/components/features/studio/publish/utils.ts
@@ -0,0 +1,32 @@
+export const getFileExtension = (filename: string): string => {
+  return filename.slice(((filename.lastIndexOf(".") - 1) >>> 0) + 2)
+}
+
+export const getMonacoLanguage = (filename: string) => {
+  const ext = getFileExtension(filename).toLowerCase()
+
+  switch (ext) {
+    case "js":
+      return "javascript"
+    case "jsx":
+      return "javascript"
+    case "ts":
+      return "typescript"
+    case "tsx":
+      return "typescript"
+    case "html":
+    case "htm":
+    case "svg":
+    case "xml":
+      return "html"
+    case "css":
+    case "scss":
+    case "sass":
+    case "less":
+      return "css"
+    case "json":
+      return "json"
+    default:
+      return "javascript"
+  }
+}

From e13f731952ff88346aafe5730e93b1c85064ccf2 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Wed, 23 Apr 2025 16:11:12 +0400
Subject: [PATCH 071/143] add: csb sdk

---
 .../app/studio/[username]/publish/page.tsx    | 197 ++++++----
 .../components/features/studio/publish/api.ts | 122 +-----
 .../studio/publish/components/EditorPane.tsx  |   5 +-
 .../publish/components/FileExplorer.tsx       |  20 +-
 .../studio/publish/components/FileTree.tsx    |  16 +-
 .../publish/components/PublishHeader.tsx      |   8 +-
 .../studio/publish/hooks/useSandbox.ts        | 346 ++----------------
 7 files changed, 202 insertions(+), 512 deletions(-)

diff --git a/apps/web/app/studio/[username]/publish/page.tsx b/apps/web/app/studio/[username]/publish/page.tsx
index c606ff4f..a6944e10 100644
--- a/apps/web/app/studio/[username]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/publish/page.tsx
@@ -5,146 +5,172 @@ import { useSearchParams, useRouter } from "next/navigation"
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
 import { ResizablePanelGroup, ResizablePanel } from "@/components/ui/resizable"
 import { toast } from "sonner"
-import { FileEntry } from "@/components/features/studio/publish/api"
-import {
-  initializeProject,
-  fetchFileTree,
-  fetchDirectoryContent,
-  loadFileContent,
-  saveFileContent,
-  createFile,
-  deleteFile,
-} from "@/components/features/studio/publish/api"
+import type { ReaddirEntry, FSStatResult } from "@codesandbox/sdk"
 import { FileExplorer } from "@/components/features/studio/publish/components/FileExplorer"
 import { EditorPane } from "@/components/features/studio/publish/components/EditorPane"
 import { PreviewPane } from "@/components/features/studio/publish/components/PreviewPane"
 import { PublishHeader } from "@/components/features/studio/publish/components/PublishHeader"
 import { Loader2Icon } from "lucide-react"
+import { useSandbox } from "@/components/features/studio/publish/hooks/useSandbox"
+
+interface FileEntry {
+  path: string
+  type: "file" | "dir"
+  name: string
+  isSymlink: boolean
+}
 
 function PublishPageContent() {
   const searchParams = useSearchParams()
   const router = useRouter()
-  const [projectId, setProjectId] = useState<string | null>(
-    searchParams.get("projectId"),
-  )
-  const [previewURL, setPreviewURL] = useState<string | null>(null)
   const [files, setFiles] = useState<FileEntry[]>([])
   const [selectedEntry, setSelectedEntry] = useState<FileEntry | null>(null)
   const [code, setCode] = useState<string>("")
-  const [isFetching, setIsFetching] = useState(false)
-  const [isInitializing, setIsInitializing] = useState(true)
+  const [isTreeLoading, setIsTreeLoading] = useState(false)
   const [isFileLoading, setIsFileLoading] = useState(false)
   const debounceRef = useRef<NodeJS.Timeout | null>(null)
 
-  useEffect(() => {
-    const initialize = async () => {
-      setIsInitializing(true)
-      try {
-        const { projectId: newProjectId, previewURL: newPreviewURL } =
-          await initializeProject(projectId)
-        setProjectId(newProjectId)
-        setPreviewURL(newPreviewURL)
-        if (newProjectId !== projectId) {
-          router.push(`${window.location.pathname}?projectId=${newProjectId}`, {
-            scroll: false,
-          })
-        }
-      } catch (error) {
-        console.error("Failed to initialize project:", error)
-        toast.error("Failed to initialize project")
-      } finally {
-        setIsInitializing(false)
-      }
-    }
+  const {
+    sandbox,
+    sandboxId,
+    previewURL,
+    isLoading: isSandboxLoading,
+  } = useSandbox({
+    defaultSandboxId: searchParams.get("sandboxId"),
+  })
 
-    initialize()
-  }, [])
+  console.log("sandbox")
 
-  const loadFileTree = async (projectId: string) => {
+  useEffect(() => {
+    if (sandboxId && sandboxId !== searchParams.get("sandboxId")) {
+      router.push(`${window.location.pathname}?sandboxId=${sandboxId}`, {
+        scroll: false,
+      })
+    }
+  }, [sandboxId, router, searchParams])
+
+  const mapReaddirEntryToFileEntry = (
+    entry: ReaddirEntry,
+    parentPath: string,
+  ): FileEntry => ({
+    name: entry.name,
+    path: `${parentPath === "/" ? "" : parentPath}/${entry.name}`,
+    type: entry.type === "directory" ? "dir" : "file",
+    isSymlink: entry.isSymlink,
+  })
+
+  const loadRootDirectory = async () => {
+    if (!sandbox) return
+    setIsTreeLoading(true)
     try {
-      setIsFetching(true)
-      const fileEntries = await fetchFileTree(projectId)
-      setFiles(fileEntries)
+      const entries = await sandbox.fs.readdir("/")
+      setFiles(entries.map((entry) => mapReaddirEntryToFileEntry(entry, "/")))
     } catch (error) {
-      console.error("Failed to load files:", error)
-      toast.error("Failed to load files")
+      console.error("Failed to load root directory:", error)
+      toast.error("Failed to load project files")
+      setFiles([])
     } finally {
-      setIsFetching(false)
+      setIsTreeLoading(false)
     }
   }
 
   useEffect(() => {
-    if (projectId) {
-      loadFileTree(projectId)
-    }
-  }, [projectId])
+    loadRootDirectory()
+  }, [sandbox])
 
   useEffect(() => {
-    if (!projectId || !selectedEntry || selectedEntry.type !== "file") {
+    if (!sandbox || !selectedEntry || selectedEntry.type !== "file") {
       setCode("")
       setIsFileLoading(false)
       return
     }
 
     const loadContent = async () => {
+      setIsFileLoading(true)
       try {
-        setIsFileLoading(true)
-        const content = await loadFileContent(projectId, selectedEntry.path)
+        const content = await sandbox.fs.readTextFile(selectedEntry.path)
         setCode(content)
       } catch (error) {
         console.error("Failed to load file content:", error)
-        toast.error("Failed to load file content")
+        toast.error(`Failed to load ${selectedEntry.name}`)
         setCode("")
+        setSelectedEntry(null)
       } finally {
         setIsFileLoading(false)
       }
     }
 
     loadContent()
-  }, [projectId, selectedEntry])
+  }, [sandbox, selectedEntry])
 
   const handleCodeChange = (value: string) => {
     setCode(value)
-    if (!selectedEntry || selectedEntry.type !== "file") return
+    if (!sandbox || !selectedEntry || selectedEntry.type !== "file") return
 
     if (debounceRef.current) clearTimeout(debounceRef.current)
     debounceRef.current = setTimeout(async () => {
       try {
-        await saveFileContent(projectId!, selectedEntry.path, value)
+        await sandbox.fs.writeTextFile(selectedEntry.path, value)
       } catch (error) {
         console.error("Failed to save file:", error)
-        toast.error("Failed to save file")
+        toast.error(`Failed to save ${selectedEntry.name}`)
       }
     }, 800)
   }
 
-  const handleCreateFile = async (fileName: string) => {
-    if (!projectId) return
+  const handleCreateFile = async (filePath: string) => {
+    if (!sandbox) return
+    const fullPath = filePath.startsWith("/") ? filePath : `/${filePath}`
     try {
-      await createFile(projectId, fileName)
-      await loadFileTree(projectId)
-      const newFile = files.find((f) => f.path === `/${fileName}`)
-      if (newFile) setSelectedEntry(newFile)
-      toast.success(`Created ${fileName}`)
+      await sandbox.fs.writeTextFile(fullPath, "")
+      await loadRootDirectory()
+      const newEntry: FileEntry = {
+        name: filePath.split("/").pop() || filePath,
+        path: fullPath,
+        type: "file",
+        isSymlink: false,
+      }
+      setSelectedEntry(newEntry)
+      toast.success(`Created ${filePath}`)
     } catch (error) {
       console.error("Failed to create file:", error)
-      toast.error("Failed to create file")
+      toast.error(`Failed to create ${filePath}`)
     }
   }
 
-  const handleDeleteFile = async (filePath: string) => {
-    if (!projectId) return
+  const handleDeleteEntry = async (entryPath: string) => {
+    if (!sandbox) return
     try {
-      await deleteFile(projectId, filePath)
-      if (selectedEntry?.path === filePath) {
+      let isDir = false
+      try {
+        const statResult = await sandbox.fs.stat(entryPath)
+        isDir = statResult.type === "directory"
+      } catch (statError) {
+        console.warn(`Stat failed for ${entryPath} during delete:`, statError)
+      }
+
+      await sandbox.fs.remove(entryPath, isDir)
+      if (selectedEntry?.path === entryPath) {
         setSelectedEntry(null)
         setCode("")
       }
-      await loadFileTree(projectId)
-      toast.success(`Deleted ${filePath.split("/").pop()}`)
+      await loadRootDirectory()
+      toast.success(`Deleted ${entryPath.split("/").pop()}`)
+    } catch (error) {
+      console.error(`Failed to delete ${entryPath}:`, error)
+      toast.error(`Failed to delete ${entryPath.split("/").pop()}`)
+    }
+  }
+
+  const handleLoadDirectory = async (dirPath: string): Promise<FileEntry[]> => {
+    if (!sandbox) throw new Error("Sandbox not available")
+    try {
+      const entries = await sandbox.fs.readdir(dirPath)
+      return entries.map((entry) => mapReaddirEntryToFileEntry(entry, dirPath))
     } catch (error) {
-      console.error("Failed to delete file:", error)
-      toast.error("Failed to delete file")
+      console.error(`Failed to load directory ${dirPath}:`, error)
+      toast.error(`Failed to load contents of ${dirPath.split("/").pop()}`)
+      return []
     }
   }
 
@@ -152,7 +178,7 @@ function PublishPageContent() {
     window.location.reload()
   }
 
-  if (isInitializing) {
+  if (isSandboxLoading) {
     return (
       <div className="h-screen w-full flex items-center justify-center">
         <div className="flex flex-col items-center gap-4">
@@ -163,9 +189,20 @@ function PublishPageContent() {
     )
   }
 
+  if (!sandbox) {
+    return (
+      <div className="h-screen w-full flex items-center justify-center">
+        <div className="flex flex-col items-center gap-4 text-destructive">
+          <p className="text-lg">Failed to initialize sandbox.</p>
+          <button onClick={handleReset}>Retry</button>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="h-screen w-full flex flex-col">
-      <PublishHeader projectId={projectId} onReset={handleReset} />
+      <PublishHeader sandboxId={sandboxId} onReset={handleReset} />
 
       <ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
         <ResizablePanel defaultSize={20} minSize={15} className="border-r">
@@ -173,13 +210,11 @@ function PublishPageContent() {
             entries={files}
             onSelect={setSelectedEntry}
             selectedPath={selectedEntry?.path || null}
-            onDelete={handleDeleteFile}
+            onDelete={handleDeleteEntry}
             onCreateFile={handleCreateFile}
-            onRefresh={() => projectId && loadFileTree(projectId)}
-            isLoading={isFetching}
-            fetchDirectoryContent={(dirPath) =>
-              fetchDirectoryContent(projectId!, dirPath)
-            }
+            onRefresh={loadRootDirectory}
+            isLoading={isTreeLoading}
+            fetchDirectoryContent={handleLoadDirectory}
           />
         </ResizablePanel>
 
diff --git a/apps/web/components/features/studio/publish/api.ts b/apps/web/components/features/studio/publish/api.ts
index 495c1a49..c9e54b91 100644
--- a/apps/web/components/features/studio/publish/api.ts
+++ b/apps/web/components/features/studio/publish/api.ts
@@ -1,125 +1,39 @@
 const API_BASE_URL = "http://localhost:8080"
 
-export interface FileEntry {
-  name: string
-  type: "file" | "dir"
-  path: string
-  children?: FileEntry[]
-}
-
 export interface ProjectResponse {
-  projectId: string
-  previewURL: string
+  sandboxId: string
+  startData: any
 }
 
 const fetchJSON = async (url: string, opts: RequestInit = {}) => {
-  const fullUrl = url.startsWith("http") ? url : `${API_BASE_URL}${url}`
-  const res = await fetch(fullUrl, opts)
+  const res = await fetch(API_BASE_URL + url, opts)
   if (!res.ok) throw new Error(await res.text())
-  return res.json()
+
+  return await res.json()
 }
 
-export const initializeProject = async (
-  existingProjectId?: string | null,
+export const connectToServerSandbox = async (
+  sandboxId?: string | null,
 ): Promise<ProjectResponse> => {
-  if (existingProjectId) {
+  if (sandboxId) {
     try {
-      const { previewURL } = await fetchJSON(`/projects/${existingProjectId}`)
-      return { projectId: existingProjectId, previewURL }
+      const startData = await fetchJSON(`/codesandbox/connect/${sandboxId}`, {
+        method: "POST",
+      })
+
+      return { sandboxId, startData }
     } catch (error) {
       console.error("Failed to load existing sandbox:", error)
-      return createNewProject()
+      return createNewSandbox()
     }
   }
-  return createNewProject()
+  return createNewSandbox()
 }
 
-export const createNewProject = async (): Promise<ProjectResponse> => {
-  const { projectId, previewURL } = await fetchJSON("/projects", {
+const createNewSandbox = async (): Promise<ProjectResponse> => {
+  const { sandboxId, startData } = await fetchJSON("/codesandbox/create", {
     method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ template: "nextjs-builder" }),
   })
-  return { projectId, previewURL }
-}
-
-export const fetchFileTree = async (
-  projectId: string,
-): Promise<FileEntry[]> => {
-  const fileEntries = await fetchJSON(`/projects/${projectId}/files`)
-  return fileEntries.map((entry: any) => ({
-    name: entry.name,
-    type: entry.type,
-    path: entry.path.replace(/^\/home\/user/, ""),
-  }))
-}
-
-export const fetchDirectoryContent = async (
-  projectId: string,
-  dirPath: string,
-): Promise<FileEntry[]> => {
-  const dirEntries = await fetchJSON(
-    `/projects/${projectId}/dir?path=${encodeURIComponent(dirPath)}`,
-  )
-  return dirEntries.map((entry: any) => ({
-    name: entry.name,
-    type: entry.type,
-    path: entry.path.replace(/^\/home\/user/, ""),
-  }))
-}
-
-export const loadFileContent = async (
-  projectId: string,
-  filePath: string,
-): Promise<string> => {
-  const cleanPath = filePath.replace(/^\/home\/user/, "")
-  const response = await fetch(
-    `${API_BASE_URL}/projects/${projectId}/file?path=${encodeURIComponent(cleanPath)}`,
-  )
-  if (!response.ok) throw new Error(await response.text())
-  return response.text()
-}
-
-export const saveFileContent = async (
-  projectId: string,
-  filePath: string,
-  content: string,
-): Promise<void> => {
-  const cleanPath = filePath.replace(/^\/home\/user/, "")
-  await fetchJSON(
-    `/projects/${projectId}/file?path=${encodeURIComponent(cleanPath)}`,
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ content }),
-    },
-  )
-}
-
-export const createFile = async (
-  projectId: string,
-  filePath: string,
-): Promise<void> => {
-  const cleanPath = filePath.startsWith("/") ? filePath : `/${filePath}`
-  await fetchJSON(
-    `/projects/${projectId}/file?path=${encodeURIComponent(cleanPath)}`,
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ content: "" }),
-    },
-  )
-}
 
-export const deleteFile = async (
-  projectId: string,
-  filePath: string,
-): Promise<void> => {
-  const cleanPath = filePath.replace(/^\/home\/user/, "")
-  await fetchJSON(
-    `/projects/${projectId}/file?path=${encodeURIComponent(cleanPath)}`,
-    {
-      method: "DELETE",
-    },
-  )
+  return { sandboxId, startData }
 }
diff --git a/apps/web/components/features/studio/publish/components/EditorPane.tsx b/apps/web/components/features/studio/publish/components/EditorPane.tsx
index faaa34ca..1c1d848d 100644
--- a/apps/web/components/features/studio/publish/components/EditorPane.tsx
+++ b/apps/web/components/features/studio/publish/components/EditorPane.tsx
@@ -1,6 +1,7 @@
 import { Loader2Icon } from "lucide-react"
 import Editor from "@monaco-editor/react"
 import { getMonacoLanguage } from "../utils"
+import { useTheme } from "next-themes"
 
 interface EditorPaneProps {
   selectedFile: { path: string; type: string } | null
@@ -33,13 +34,15 @@ export function EditorPane({
     )
   }
 
+  const { resolvedTheme } = useTheme()
+
   return (
     <Editor
       height="100%"
       language={getMonacoLanguage(selectedFile.path)}
       value={code}
       onChange={(value) => onCodeChange(value || "")}
-      theme="vs-dark"
+      theme={resolvedTheme === "dark" ? "vs-dark" : "vs"}
       options={{
         minimap: { enabled: false },
         fontSize: 14,
diff --git a/apps/web/components/features/studio/publish/components/FileExplorer.tsx b/apps/web/components/features/studio/publish/components/FileExplorer.tsx
index c430eeb6..1fa8bac4 100644
--- a/apps/web/components/features/studio/publish/components/FileExplorer.tsx
+++ b/apps/web/components/features/studio/publish/components/FileExplorer.tsx
@@ -1,5 +1,16 @@
 import { useState } from "react"
-import { FileEntry } from "../api"
+// Remove import of old FileEntry type
+// import { FileEntry } from "../api"
+// Define or import the correct FileEntry type if not globally available
+// Assuming FileEntry is defined in page.tsx or a shared types file
+// If not, define it here:
+interface FileEntry {
+  // Use the same definition as in page.tsx
+  name: string
+  type: "file" | "dir"
+  path: string
+  isSymlink: boolean
+}
 import { PlusIcon, RefreshCwIcon, Loader2Icon } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -8,13 +19,14 @@ import { FileTree } from "./FileTree"
 
 interface FileExplorerProps {
   entries: FileEntry[]
-  onSelect: (entry: FileEntry) => void
+  onSelect: (entry: FileEntry) => void // Should now match FileEntry defined above/in page.tsx
   selectedPath: string | null
-  onDelete: (filePath: string) => void
+  // Update prop types for handlers
+  onDelete: (filePath: string) => void // Kept the simple signature
   onCreateFile: (fileName: string) => void
   onRefresh: () => void
   isLoading: boolean
-  fetchDirectoryContent: (dirPath: string) => Promise<FileEntry[]>
+  fetchDirectoryContent: (dirPath: string) => Promise<FileEntry[]> // Expecting the new FileEntry type
 }
 
 export function FileExplorer({
diff --git a/apps/web/components/features/studio/publish/components/FileTree.tsx b/apps/web/components/features/studio/publish/components/FileTree.tsx
index ff153abe..c06f5c70 100644
--- a/apps/web/components/features/studio/publish/components/FileTree.tsx
+++ b/apps/web/components/features/studio/publish/components/FileTree.tsx
@@ -1,5 +1,4 @@
 import { useState } from "react"
-import { FileEntry } from "../api"
 import { FolderIcon, FileIcon, Loader2Icon, TrashIcon } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import {
@@ -9,6 +8,13 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 
+interface FileEntry {
+  name: string
+  type: "file" | "dir"
+  path: string
+  isSymlink: boolean
+}
+
 interface FileTreeProps {
   entries: FileEntry[]
   onSelect: (entry: FileEntry) => void
@@ -36,7 +42,8 @@ export function FileTree({
   }
 
   const handleDirClick = async (entry: FileEntry, e: React.MouseEvent) => {
-    if (!expandedDirs[entry.path] || e.ctrlKey) {
+    const isCtrlOrCmd = e.ctrlKey || e.metaKey
+    if (!expandedDirs[entry.path] || isCtrlOrCmd) {
       try {
         setLoadingDirs((prev) => ({ ...prev, [entry.path]: true }))
         const dirContents = await fetchDirectoryContent(entry.path)
@@ -46,6 +53,11 @@ export function FileTree({
       } finally {
         setLoadingDirs((prev) => ({ ...prev, [entry.path]: false }))
       }
+    } else {
+      setExpandedDirs((prev) => {
+        const { [entry.path]: _, ...rest } = prev
+        return rest
+      })
     }
   }
 
diff --git a/apps/web/components/features/studio/publish/components/PublishHeader.tsx b/apps/web/components/features/studio/publish/components/PublishHeader.tsx
index 27881461..aac61772 100644
--- a/apps/web/components/features/studio/publish/components/PublishHeader.tsx
+++ b/apps/web/components/features/studio/publish/components/PublishHeader.tsx
@@ -1,16 +1,16 @@
 import { Button } from "@/components/ui/button"
 
 interface PublishHeaderProps {
-  projectId: string | null
+  sandboxId: string | null
   onReset: () => void
 }
 
-export function PublishHeader({ projectId, onReset }: PublishHeaderProps) {
+export function PublishHeader({ sandboxId, onReset }: PublishHeaderProps) {
   return (
     <header className="flex items-center gap-2 p-4 border-b">
       <h1 className="text-2xl font-bold">Publish Your Sandbox</h1>
-      {projectId && (
-        <span className="text-xs text-muted-foreground ml-2">{projectId}</span>
+      {sandboxId && (
+        <span className="text-xs text-muted-foreground ml-2">{sandboxId}</span>
       )}
       <Button size="sm" onClick={onReset} className="ml-auto">
         Reset
diff --git a/apps/web/components/features/studio/publish/hooks/useSandbox.ts b/apps/web/components/features/studio/publish/hooks/useSandbox.ts
index 1dde1c17..deec0f8d 100644
--- a/apps/web/components/features/studio/publish/hooks/useSandbox.ts
+++ b/apps/web/components/features/studio/publish/hooks/useSandbox.ts
@@ -1,329 +1,43 @@
-import { useState, useEffect, useRef, useCallback } from "react"
-import { useRouter, useSearchParams } from "next/navigation"
-import { toast } from "sonner"
-
-interface FileEntry {
-  name: string
-  type: "file" | "dir"
-  path: string
-}
-
-const API_BASE_URL = "http://localhost:8080"
-
-const fetchJSON = async (url: string, opts: RequestInit = {}) => {
-  const fullUrl = url.startsWith("http") ? url : `${API_BASE_URL}${url}`
-  const res = await fetch(fullUrl, opts)
-  if (!res.ok) {
-    const errorText = await res.text()
-    console.error(`API Error (${res.status}): ${errorText} for URL: ${fullUrl}`)
-    throw new Error(errorText || `HTTP error! status: ${res.status}`)
-  }
-  const contentType = res.headers.get("content-type")
-  if (contentType && contentType.indexOf("application/json") !== -1) {
-    return res.json()
-  }
-  return null
-}
-
-/**
- * Manages the state and backend interactions for the sandbox environment.
- * Handles project creation/loading, file operations (CRUD), and editor state.
- */
-export function useSandbox() {
-  const searchParams = useSearchParams()
-  const router = useRouter()
-
-  const [projectId, setProjectId] = useState<string | null>(null)
+import { SandboxSession } from "@codesandbox/sdk"
+import { connectToSandbox } from "@codesandbox/sdk/browser"
+import { useEffect, useState } from "react"
+import { connectToServerSandbox } from "../api"
+
+export const useSandbox = ({
+  defaultSandboxId,
+}: {
+  defaultSandboxId: string | null
+}) => {
+  const [sandbox, setSandbox] = useState<SandboxSession | null>(null)
+  const [sandboxId, setSandboxId] = useState<string | null>(defaultSandboxId)
   const [previewURL, setPreviewURL] = useState<string | null>(null)
-  const [files, setFiles] = useState<FileEntry[]>([])
-  const [selectedEntry, setSelectedEntry] = useState<FileEntry | null>(null)
-  const [code, setCode] = useState<string>("")
-  const [isInitializing, setIsInitializing] = useState(true)
-  const [isFetchingFiles, setIsFetchingFiles] = useState(false)
-  const [isFileLoading, setIsFileLoading] = useState(false)
-  const debounceRef = useRef<NodeJS.Timeout | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
 
-  // --- Initialization ---
-  // Fetches or creates a sandbox project based on the URL query parameter.
   useEffect(() => {
-    const initializeSandbox = async () => {
-      setIsInitializing(true)
-      const existingProjectId = searchParams.get("projectId")
-
-      const createNewSandbox = async () => {
-        try {
-          console.log("Attempting to create a new sandbox...")
-          const { projectId: newProjectId, previewURL: newPreviewURL } =
-            await fetchJSON("/projects", {
-              method: "POST",
-              headers: { "Content-Type": "application/json" },
-              body: JSON.stringify({ template: "nextjs-builder" }),
-            })
-          console.log("New sandbox created:", newProjectId)
-          setProjectId(newProjectId)
-          setPreviewURL(newPreviewURL)
-          router.push(`${window.location.pathname}?projectId=${newProjectId}`, {
-            scroll: false,
-          })
-          toast.success("New sandbox created")
-        } catch (error) {
-          console.error("Failed to create sandbox:", error)
-          toast.error(`Failed to create sandbox: ${error}`)
-        }
-      }
-
-      if (existingProjectId) {
-        try {
-          console.log("Attempting to load existing sandbox:", existingProjectId)
-          const { previewURL: loadedPreviewURL } = await fetchJSON(
-            `/projects/${existingProjectId}`,
-          )
-          console.log("Existing sandbox loaded:", existingProjectId)
-          setProjectId(existingProjectId)
-          setPreviewURL(loadedPreviewURL)
-          toast.info(`Restored sandbox: ${existingProjectId}`)
-        } catch (error) {
-          console.warn(
-            `Failed to load sandbox ${existingProjectId}:`,
-            error,
-            "Creating a new one.",
-          )
-          toast.warning(
-            `Failed to load sandbox ${existingProjectId}. Creating a new one.`,
-          )
-          await createNewSandbox()
-        }
-      } else {
-        console.log("No existing project ID found, creating new sandbox.")
-        await createNewSandbox()
-      }
-      setIsInitializing(false)
-    }
-
-    initializeSandbox()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  // --- File Tree Operations ---
-  const fetchFileTree = useCallback(async () => {
-    if (!projectId || isFetchingFiles) return
-
-    console.log(`Fetching file tree for project: ${projectId}`)
-    setIsFetchingFiles(true)
-    try {
-      const fileEntries = await fetchJSON(`/projects/${projectId}/files`)
-      const mappedEntries = fileEntries.map((entry: any) => ({
-        name: entry.name,
-        type: entry.type,
-        path: entry.path.replace(/^\/home\/user/, ""),
-      }))
-      setFiles(mappedEntries)
-      console.log("File tree fetched successfully.")
-    } catch (error) {
-      console.error("Failed to load file tree:", error)
-      toast.error(`Failed to load file tree: ${error}`)
-      setFiles([])
-    } finally {
-      setIsFetchingFiles(false)
-    }
-  }, [projectId, isFetchingFiles])
-
-  // Fetches the initial file tree once the project ID is available.
-  useEffect(() => {
-    if (projectId && !isInitializing) {
-      fetchFileTree()
-    }
-  }, [projectId, isInitializing, fetchFileTree])
-
-  const fetchDirectoryContent = useCallback(
-    async (dirPath: string): Promise<FileEntry[]> => {
-      if (!projectId) return []
-      const cleanPath = dirPath.replace(/^\/home\/user/, "")
-      console.log(`Fetching directory content: ${cleanPath}`)
+    const initialize = async () => {
+      setIsLoading(true)
       try {
-        const dirEntries = await fetchJSON(
-          `/projects/${projectId}/dir?path=${encodeURIComponent(cleanPath)}`,
-        )
-        console.log(`Directory content fetched for: ${cleanPath}`)
-        return dirEntries.map((entry: any) => ({
-          name: entry.name,
-          type: entry.type,
-          path: entry.path.replace(/^\/home\/user/, ""),
-        }))
-      } catch (error) {
-        console.error(
-          `Failed to load directory content for ${cleanPath}:`,
-          error,
-        )
-        toast.error(`Failed to load directory: ${dirPath.split("/").pop()}`)
-        return []
-      }
-    },
-    [projectId],
-  )
+        const { sandboxId: newSandboxId, startData } =
+          await connectToServerSandbox(defaultSandboxId)
 
-  // --- File Content Operations ---
-  const loadFileContent = useCallback(
-    async (entry: FileEntry) => {
-      if (!projectId || entry.type !== "file") {
-        setCode("")
-        setIsFileLoading(false)
-        return
-      }
+        const connectedSandbox = await connectToSandbox(startData)
+        const newPreviewURL = connectedSandbox.ports.getPreviewUrl(5173)
 
-      const cleanPath = entry.path.replace(/^\/home\/user/, "")
-      console.log(`Loading file content: ${cleanPath}`)
-      setIsFileLoading(true)
-      try {
-        const response = await fetch(
-          `${API_BASE_URL}/projects/${projectId}/file?path=${encodeURIComponent(cleanPath)}`,
-        )
-        if (!response.ok) {
-          throw new Error(
-            `HTTP error! status: ${response.status}, ${await response.text()}`,
-          )
-        }
-        const textContent = await response.text()
-        setCode(textContent)
-        console.log(`File content loaded: ${cleanPath}`)
+        setPreviewURL(newPreviewURL || null)
+        setSandbox(connectedSandbox)
+        setSandboxId(newSandboxId)
       } catch (error) {
-        console.error(`Failed to load file content for ${cleanPath}:`, error)
-        toast.error(`Failed to load file: ${entry.name}`)
-        setCode("")
+        console.error("Failed to initialize sandbox in hook:", error)
+        setSandbox(null)
+        setSandboxId(null)
+        setPreviewURL(null)
       } finally {
-        setIsFileLoading(false)
-      }
-    },
-    [projectId],
-  )
-
-  // Loads file content when a file entry is selected.
-  useEffect(() => {
-    if (selectedEntry) {
-      if (selectedEntry.type === "file") {
-        loadFileContent(selectedEntry)
-      } else {
-        setCode("")
-        setIsFileLoading(false)
+        setIsLoading(false)
       }
-    } else {
-      setCode("")
-      setIsFileLoading(false)
     }
-  }, [selectedEntry, loadFileContent])
-
-  // Saves file content changes to the backend.
-  const saveFileContent = useCallback(
-    async (filePath: string, content: string) => {
-      if (!projectId || !filePath) return
-      const cleanPath = filePath.replace(/^\/home\/user/, "")
-      console.log(`Saving file content: ${cleanPath}`)
-      try {
-        await fetchJSON(
-          `/projects/${projectId}/file?path=${encodeURIComponent(cleanPath)}`,
-          {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ content }),
-          },
-        )
-        console.log(`File content saved: ${cleanPath}`)
-      } catch (error) {
-        console.error(`Failed to save file ${cleanPath}:`, error)
-        toast.error(`Failed to save changes to ${filePath.split("/").pop()}`)
-      }
-    },
-    [projectId],
-  )
-
-  // Debounces the save operation when the editor code changes.
-  const handleCodeChange = useCallback(
-    (value: string) => {
-      setCode(value)
-      if (!selectedEntry || selectedEntry.type !== "file") return
-
-      if (debounceRef.current) clearTimeout(debounceRef.current)
-      debounceRef.current = setTimeout(() => {
-        saveFileContent(selectedEntry.path, value)
-      }, 800)
-    },
-    [selectedEntry, saveFileContent],
-  )
-
-  // --- File Manipulation ---
-  const createNewFile = useCallback(
-    async (newFilePath: string) => {
-      if (!projectId || !newFilePath) return false
-      const cleanPath = newFilePath.startsWith("/")
-        ? newFilePath
-        : `/${newFilePath}`
 
-      console.log(`Creating new file: ${cleanPath}`)
-      try {
-        await fetchJSON(
-          `/projects/${projectId}/file?path=${encodeURIComponent(cleanPath)}`,
-          {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ content: "" }),
-          },
-        )
-        toast.success(`Created ${newFilePath.split("/").pop()}`)
-        await fetchFileTree()
-        console.log(`File created: ${cleanPath}`)
-        return cleanPath
-      } catch (error) {
-        console.error(`Failed to create file ${cleanPath}:`, error)
-        toast.error(`Failed to create file: ${newFilePath.split("/").pop()}`)
-        return false
-      }
-    },
-    [projectId, fetchFileTree],
-  )
-
-  const deleteFile = useCallback(
-    async (filePath: string) => {
-      if (!projectId) return
-      const cleanPath = filePath.replace(/^\/home\/user/, "")
-      console.log(`Deleting file: ${cleanPath}`)
-      try {
-        await fetchJSON(
-          `/projects/${projectId}/file?path=${encodeURIComponent(cleanPath)}`,
-          { method: "DELETE" },
-        )
-
-        toast.success(`Deleted ${filePath.split("/").pop()}`)
+    initialize()
+  }, [defaultSandboxId])
 
-        if (selectedEntry?.path === filePath) {
-          setSelectedEntry(null)
-        }
-
-        await fetchFileTree()
-        console.log(`File deleted: ${cleanPath}`)
-      } catch (error) {
-        console.error(`Failed to delete file ${cleanPath}:`, error)
-        toast.error(`Failed to delete file: ${filePath.split("/").pop()}`)
-      }
-    },
-    [projectId, selectedEntry, fetchFileTree],
-  )
-
-  return {
-    projectId,
-    previewURL,
-    files,
-    selectedEntry,
-    code,
-    isInitializing,
-    isFetchingFiles,
-    isFileLoading,
-    setSelectedEntry,
-    handleCodeChange,
-    createNewFile,
-    deleteFile,
-    refreshFileTree: fetchFileTree,
-    fetchDirectoryContent,
-  }
+  return { sandbox, sandboxId, previewURL, isLoading }
 }
-
-export type UseSandboxReturn = ReturnType<typeof useSandbox>

From 56247c323384104c6a261dbbd563bfe64e8908f4 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Wed, 23 Apr 2025 20:34:47 +0400
Subject: [PATCH 072/143] update fs

---
 .../app/studio/[username]/publish/page.tsx    | 120 +++----------
 .../publish/components/FileExplorer.tsx       |  10 +-
 .../studio/publish/components/FileTree.tsx    |  63 ++-----
 .../studio/publish/hooks/useFileSystem.ts     | 165 ++++++++++++++++++
 4 files changed, 211 insertions(+), 147 deletions(-)
 create mode 100644 apps/web/components/features/studio/publish/hooks/useFileSystem.ts

diff --git a/apps/web/app/studio/[username]/publish/page.tsx b/apps/web/app/studio/[username]/publish/page.tsx
index a6944e10..bc68ede4 100644
--- a/apps/web/app/studio/[username]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/publish/page.tsx
@@ -1,34 +1,25 @@
 "use client"
 
-import { useEffect, useState, useRef, Suspense } from "react"
+import { useEffect, useState, Suspense } from "react"
 import { useSearchParams, useRouter } from "next/navigation"
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
 import { ResizablePanelGroup, ResizablePanel } from "@/components/ui/resizable"
-import { toast } from "sonner"
-import type { ReaddirEntry, FSStatResult } from "@codesandbox/sdk"
 import { FileExplorer } from "@/components/features/studio/publish/components/FileExplorer"
 import { EditorPane } from "@/components/features/studio/publish/components/EditorPane"
 import { PreviewPane } from "@/components/features/studio/publish/components/PreviewPane"
 import { PublishHeader } from "@/components/features/studio/publish/components/PublishHeader"
 import { Loader2Icon } from "lucide-react"
 import { useSandbox } from "@/components/features/studio/publish/hooks/useSandbox"
-
-interface FileEntry {
-  path: string
-  type: "file" | "dir"
-  name: string
-  isSymlink: boolean
-}
+import {
+  useFileSystem,
+  type FileEntry,
+} from "@/components/features/studio/publish/hooks/useFileSystem"
 
 function PublishPageContent() {
   const searchParams = useSearchParams()
   const router = useRouter()
-  const [files, setFiles] = useState<FileEntry[]>([])
   const [selectedEntry, setSelectedEntry] = useState<FileEntry | null>(null)
   const [code, setCode] = useState<string>("")
-  const [isTreeLoading, setIsTreeLoading] = useState(false)
-  const [isFileLoading, setIsFileLoading] = useState(false)
-  const debounceRef = useRef<NodeJS.Timeout | null>(null)
 
   const {
     sandbox,
@@ -39,7 +30,17 @@ function PublishPageContent() {
     defaultSandboxId: searchParams.get("sandboxId"),
   })
 
-  console.log("sandbox")
+  const {
+    files,
+    isTreeLoading,
+    isFileLoading,
+    loadRootDirectory,
+    loadDirectory,
+    loadFileContent,
+    saveFileContent,
+    createFile,
+    deleteEntry,
+  } = useFileSystem(sandbox)
 
   useEffect(() => {
     if (sandboxId && sandboxId !== searchParams.get("sandboxId")) {
@@ -49,128 +50,57 @@ function PublishPageContent() {
     }
   }, [sandboxId, router, searchParams])
 
-  const mapReaddirEntryToFileEntry = (
-    entry: ReaddirEntry,
-    parentPath: string,
-  ): FileEntry => ({
-    name: entry.name,
-    path: `${parentPath === "/" ? "" : parentPath}/${entry.name}`,
-    type: entry.type === "directory" ? "dir" : "file",
-    isSymlink: entry.isSymlink,
-  })
-
-  const loadRootDirectory = async () => {
-    if (!sandbox) return
-    setIsTreeLoading(true)
-    try {
-      const entries = await sandbox.fs.readdir("/")
-      setFiles(entries.map((entry) => mapReaddirEntryToFileEntry(entry, "/")))
-    } catch (error) {
-      console.error("Failed to load root directory:", error)
-      toast.error("Failed to load project files")
-      setFiles([])
-    } finally {
-      setIsTreeLoading(false)
-    }
-  }
-
-  useEffect(() => {
-    loadRootDirectory()
-  }, [sandbox])
-
   useEffect(() => {
     if (!sandbox || !selectedEntry || selectedEntry.type !== "file") {
       setCode("")
-      setIsFileLoading(false)
       return
     }
 
     const loadContent = async () => {
-      setIsFileLoading(true)
       try {
-        const content = await sandbox.fs.readTextFile(selectedEntry.path)
+        const content = await loadFileContent(selectedEntry.path)
         setCode(content)
       } catch (error) {
-        console.error("Failed to load file content:", error)
-        toast.error(`Failed to load ${selectedEntry.name}`)
         setCode("")
         setSelectedEntry(null)
-      } finally {
-        setIsFileLoading(false)
       }
     }
 
     loadContent()
-  }, [sandbox, selectedEntry])
+  }, [sandbox, selectedEntry, loadFileContent])
 
   const handleCodeChange = (value: string) => {
     setCode(value)
     if (!sandbox || !selectedEntry || selectedEntry.type !== "file") return
-
-    if (debounceRef.current) clearTimeout(debounceRef.current)
-    debounceRef.current = setTimeout(async () => {
-      try {
-        await sandbox.fs.writeTextFile(selectedEntry.path, value)
-      } catch (error) {
-        console.error("Failed to save file:", error)
-        toast.error(`Failed to save ${selectedEntry.name}`)
-      }
-    }, 800)
+    saveFileContent(selectedEntry.path, value)
   }
 
   const handleCreateFile = async (filePath: string) => {
-    if (!sandbox) return
-    const fullPath = filePath.startsWith("/") ? filePath : `/${filePath}`
     try {
-      await sandbox.fs.writeTextFile(fullPath, "")
+      await createFile(filePath)
       await loadRootDirectory()
       const newEntry: FileEntry = {
         name: filePath.split("/").pop() || filePath,
-        path: fullPath,
+        path: filePath.startsWith("/") ? filePath : `/${filePath}`,
         type: "file",
         isSymlink: false,
       }
       setSelectedEntry(newEntry)
-      toast.success(`Created ${filePath}`)
     } catch (error) {
-      console.error("Failed to create file:", error)
-      toast.error(`Failed to create ${filePath}`)
+      // Error is handled in the hook
     }
   }
 
   const handleDeleteEntry = async (entryPath: string) => {
-    if (!sandbox) return
     try {
-      let isDir = false
-      try {
-        const statResult = await sandbox.fs.stat(entryPath)
-        isDir = statResult.type === "directory"
-      } catch (statError) {
-        console.warn(`Stat failed for ${entryPath} during delete:`, statError)
-      }
-
-      await sandbox.fs.remove(entryPath, isDir)
+      await deleteEntry(entryPath)
       if (selectedEntry?.path === entryPath) {
         setSelectedEntry(null)
         setCode("")
       }
       await loadRootDirectory()
-      toast.success(`Deleted ${entryPath.split("/").pop()}`)
-    } catch (error) {
-      console.error(`Failed to delete ${entryPath}:`, error)
-      toast.error(`Failed to delete ${entryPath.split("/").pop()}`)
-    }
-  }
-
-  const handleLoadDirectory = async (dirPath: string): Promise<FileEntry[]> => {
-    if (!sandbox) throw new Error("Sandbox not available")
-    try {
-      const entries = await sandbox.fs.readdir(dirPath)
-      return entries.map((entry) => mapReaddirEntryToFileEntry(entry, dirPath))
     } catch (error) {
-      console.error(`Failed to load directory ${dirPath}:`, error)
-      toast.error(`Failed to load contents of ${dirPath.split("/").pop()}`)
-      return []
+      // Error is handled in the hook
     }
   }
 
@@ -214,7 +144,7 @@ function PublishPageContent() {
             onCreateFile={handleCreateFile}
             onRefresh={loadRootDirectory}
             isLoading={isTreeLoading}
-            fetchDirectoryContent={handleLoadDirectory}
+            fetchDirectoryContent={loadDirectory}
           />
         </ResizablePanel>
 
diff --git a/apps/web/components/features/studio/publish/components/FileExplorer.tsx b/apps/web/components/features/studio/publish/components/FileExplorer.tsx
index 1fa8bac4..713211ad 100644
--- a/apps/web/components/features/studio/publish/components/FileExplorer.tsx
+++ b/apps/web/components/features/studio/publish/components/FileExplorer.tsx
@@ -5,11 +5,11 @@ import { useState } from "react"
 // Assuming FileEntry is defined in page.tsx or a shared types file
 // If not, define it here:
 interface FileEntry {
-  // Use the same definition as in page.tsx
   name: string
   type: "file" | "dir"
   path: string
   isSymlink: boolean
+  children?: FileEntry[]
 }
 import { PlusIcon, RefreshCwIcon, Loader2Icon } from "lucide-react"
 import { Button } from "@/components/ui/button"
@@ -19,14 +19,12 @@ import { FileTree } from "./FileTree"
 
 interface FileExplorerProps {
   entries: FileEntry[]
-  onSelect: (entry: FileEntry) => void // Should now match FileEntry defined above/in page.tsx
+  onSelect: (entry: FileEntry) => void
   selectedPath: string | null
-  // Update prop types for handlers
-  onDelete: (filePath: string) => void // Kept the simple signature
+  onDelete: (filePath: string) => void
   onCreateFile: (fileName: string) => void
   onRefresh: () => void
   isLoading: boolean
-  fetchDirectoryContent: (dirPath: string) => Promise<FileEntry[]> // Expecting the new FileEntry type
 }
 
 export function FileExplorer({
@@ -37,7 +35,6 @@ export function FileExplorer({
   onCreateFile,
   onRefresh,
   isLoading,
-  fetchDirectoryContent,
 }: FileExplorerProps) {
   const [isCreatingFile, setIsCreatingFile] = useState(false)
   const [newFileName, setNewFileName] = useState("")
@@ -112,7 +109,6 @@ export function FileExplorer({
           selectedPath={selectedPath}
           onDelete={onDelete}
           isLoading={isLoading}
-          fetchDirectoryContent={fetchDirectoryContent}
         />
       </CardContent>
     </Card>
diff --git a/apps/web/components/features/studio/publish/components/FileTree.tsx b/apps/web/components/features/studio/publish/components/FileTree.tsx
index c06f5c70..0637a8d9 100644
--- a/apps/web/components/features/studio/publish/components/FileTree.tsx
+++ b/apps/web/components/features/studio/publish/components/FileTree.tsx
@@ -13,6 +13,7 @@ interface FileEntry {
   type: "file" | "dir"
   path: string
   isSymlink: boolean
+  children?: FileEntry[]
 }
 
 interface FileTreeProps {
@@ -21,7 +22,6 @@ interface FileTreeProps {
   selectedPath: string | null
   onDelete: (filePath: string) => void
   isLoading: boolean
-  fetchDirectoryContent: (dirPath: string) => Promise<FileEntry[]>
 }
 
 export function FileTree({
@@ -30,35 +30,19 @@ export function FileTree({
   selectedPath,
   onDelete,
   isLoading,
-  fetchDirectoryContent,
 }: FileTreeProps) {
-  const [expandedDirs, setExpandedDirs] = useState<Record<string, FileEntry[]>>(
-    {},
-  )
-  const [loadingDirs, setLoadingDirs] = useState<Record<string, boolean>>({})
+  const [expandedDirs, setExpandedDirs] = useState<Record<string, boolean>>({})
 
   const handleFileClick = (entry: FileEntry) => {
     onSelect(entry)
   }
 
-  const handleDirClick = async (entry: FileEntry, e: React.MouseEvent) => {
-    const isCtrlOrCmd = e.ctrlKey || e.metaKey
-    if (!expandedDirs[entry.path] || isCtrlOrCmd) {
-      try {
-        setLoadingDirs((prev) => ({ ...prev, [entry.path]: true }))
-        const dirContents = await fetchDirectoryContent(entry.path)
-        setExpandedDirs((prev) => ({ ...prev, [entry.path]: dirContents }))
-      } catch (error) {
-        console.error(`Failed to load contents of ${entry.path}:`, error)
-      } finally {
-        setLoadingDirs((prev) => ({ ...prev, [entry.path]: false }))
-      }
-    } else {
-      setExpandedDirs((prev) => {
-        const { [entry.path]: _, ...rest } = prev
-        return rest
-      })
-    }
+  const handleDirClick = (entry: FileEntry, e: React.MouseEvent) => {
+    e.preventDefault()
+    setExpandedDirs((prev) => ({
+      ...prev,
+      [entry.path]: !prev[entry.path],
+    }))
   }
 
   if (isLoading && entries.length === 0) {
@@ -74,38 +58,27 @@ export function FileTree({
       {items.map((entry) => (
         <li key={entry.path} className="py-0.5">
           {entry.type === "dir" ? (
-            <details className="group" open={!!expandedDirs[entry.path]}>
+            <details className="group" open={expandedDirs[entry.path]}>
               <summary
                 className={`flex items-center px-2 py-1 cursor-pointer hover:bg-muted rounded list-none ${
                   selectedPath === entry.path ? "bg-accent" : ""
                 }`}
-                onClick={(e) => {
-                  e.preventDefault()
-                  handleDirClick(entry, e)
-                }}
+                onClick={(e) => handleDirClick(entry, e)}
               >
                 <FolderIcon className="h-4 w-4 mr-1 text-blue-500 flex-shrink-0" />
                 <span className="font-medium truncate" title={entry.name}>
                   {entry.name}
                 </span>
-                {loadingDirs[entry.path] && (
-                  <Loader2Icon className="h-3 w-3 ml-auto animate-spin flex-shrink-0" />
-                )}
               </summary>
-              {expandedDirs[entry.path] && (
+              {entry.children && (
                 <div className="mt-1">
-                  {(() => {
-                    const content = expandedDirs[entry.path]
-                    if (content && content.length > 0) {
-                      return renderEntries(content, currentLevel + 1)
-                    } else {
-                      return (
-                        <div className="text-xs text-muted-foreground px-2 py-1 pl-6">
-                          Empty directory
-                        </div>
-                      )
-                    }
-                  })()}
+                  {entry.children.length > 0 ? (
+                    renderEntries(entry.children, currentLevel + 1)
+                  ) : (
+                    <div className="text-xs text-muted-foreground px-2 py-1 pl-6">
+                      Empty directory
+                    </div>
+                  )}
                 </div>
               )}
             </details>
diff --git a/apps/web/components/features/studio/publish/hooks/useFileSystem.ts b/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
new file mode 100644
index 00000000..fe1f3652
--- /dev/null
+++ b/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
@@ -0,0 +1,165 @@
+import { SandboxSession, ReaddirEntry } from "@codesandbox/sdk"
+import { useState, useEffect, useRef, useCallback } from "react"
+import { toast } from "sonner"
+
+const ROOT_PATH = "/project/sandbox"
+const EXCLUDED_NAMES = ["node_modules", "dist"]
+
+export interface FileEntry {
+  path: string
+  type: "file" | "dir"
+  name: string
+  isSymlink: boolean
+  children?: FileEntry[]
+}
+
+const normalizePath = (path: string) => {
+  if (!path.startsWith(ROOT_PATH)) {
+    return `${ROOT_PATH}${path.startsWith("/") ? path : `/${path}`}`
+  }
+  return path
+}
+
+const mapReaddirEntryToFileEntry = (
+  entry: ReaddirEntry,
+  parentPath: string,
+): FileEntry => ({
+  name: entry.name,
+  path: `${parentPath === ROOT_PATH ? "" : parentPath}/${entry.name}`,
+  type: entry.type === "directory" ? "dir" : "file",
+  isSymlink: entry.isSymlink,
+})
+
+const loadDirectoryRecursively = async (
+  sandbox: SandboxSession,
+  path: string,
+): Promise<FileEntry[]> => {
+  const entries = await sandbox.fs.readdir(normalizePath(path))
+  const filteredEntries = entries.filter(
+    (entry) =>
+      !EXCLUDED_NAMES.includes(entry.name) && !entry.name.startsWith("."),
+  )
+  const fileEntries = filteredEntries.map((entry) =>
+    mapReaddirEntryToFileEntry(entry, path),
+  )
+
+  for (const entry of fileEntries) {
+    if (entry.type === "dir") {
+      entry.children = await loadDirectoryRecursively(sandbox, entry.path)
+    }
+  }
+
+  return fileEntries
+}
+
+export const useFileSystem = (sandbox: SandboxSession | null) => {
+  const [files, setFiles] = useState<FileEntry[]>([])
+  const [isTreeLoading, setIsTreeLoading] = useState(false)
+  const [isFileLoading, setIsFileLoading] = useState(false)
+  const debounceRef = useRef<NodeJS.Timeout | null>(null)
+
+  console.log("files", files)
+
+  const loadRootDirectory = useCallback(async () => {
+    if (!sandbox) return
+    setIsTreeLoading(true)
+    try {
+      const rootEntries = await loadDirectoryRecursively(sandbox, ROOT_PATH)
+      setFiles(rootEntries)
+    } catch (error) {
+      console.error("Failed to load root directory:", error)
+      toast.error("Failed to load project files")
+      setFiles([])
+    } finally {
+      setIsTreeLoading(false)
+    }
+  }, [sandbox])
+
+  useEffect(() => {
+    loadRootDirectory()
+  }, [loadRootDirectory])
+
+  const loadFileContent = useCallback(
+    async (filePath: string): Promise<string> => {
+      if (!sandbox) throw new Error("Sandbox not available")
+      setIsFileLoading(true)
+      try {
+        const content = await sandbox.fs.readTextFile(normalizePath(filePath))
+        return content
+      } catch (error) {
+        console.error(`Failed to load file content for ${filePath}:`, error)
+        toast.error(`Failed to load file`)
+        throw error
+      } finally {
+        setIsFileLoading(false)
+      }
+    },
+    [sandbox],
+  )
+
+  const saveFileContent = useCallback(
+    (filePath: string, value: string) => {
+      if (!sandbox) return
+
+      if (debounceRef.current) clearTimeout(debounceRef.current)
+      debounceRef.current = setTimeout(async () => {
+        try {
+          await sandbox.fs.writeTextFile(normalizePath(filePath), value)
+        } catch (error) {
+          console.error("Failed to save file:", error)
+          toast.error(`Failed to save ${filePath.split("/").pop()}`)
+        }
+      }, 800)
+    },
+    [sandbox],
+  )
+
+  const createFile = useCallback(
+    async (filePath: string) => {
+      if (!sandbox) throw new Error("Sandbox not available")
+      try {
+        await sandbox.fs.writeTextFile(normalizePath(filePath), "")
+        await loadRootDirectory()
+      } catch (error) {
+        console.error(`Failed to create file ${filePath}:`, error)
+        toast.error(`Failed to create ${filePath.split("/").pop()}`)
+        throw error
+      }
+    },
+    [sandbox, loadRootDirectory],
+  )
+
+  const deleteEntry = useCallback(
+    async (entryPath: string) => {
+      if (!sandbox) throw new Error("Sandbox not available")
+      try {
+        let isDir = false
+        try {
+          const statResult = await sandbox.fs.stat(normalizePath(entryPath))
+          isDir = statResult.type === "directory"
+        } catch (statError) {
+          console.warn(`Stat failed for ${entryPath} during delete:`, statError)
+        }
+
+        await sandbox.fs.remove(normalizePath(entryPath), isDir)
+        await loadRootDirectory()
+      } catch (error) {
+        console.error(`Failed to delete ${entryPath}:`, error)
+        toast.error(`Failed to delete ${entryPath.split("/").pop()}`)
+        throw error
+      }
+    },
+    [sandbox, loadRootDirectory],
+  )
+
+  return {
+    files,
+    isTreeLoading,
+    isFileLoading,
+    loadRootDirectory,
+    loadFileContent,
+    saveFileContent,
+    createFile,
+    deleteEntry,
+  }
+}

From c933949ac039f0bc10e1fdc71236a51a11d68f36 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Wed, 23 Apr 2025 20:45:55 +0400
Subject: [PATCH 073/143] clean up

---
 .../app/studio/[username]/publish/page.tsx    | 53 ++++++++++++-------
 .../publish/components/PublishHeader.tsx      | 30 +++++++++--
 .../studio/publish/hooks/useFileSystem.ts     | 11 +++-
 3 files changed, 69 insertions(+), 25 deletions(-)

diff --git a/apps/web/app/studio/[username]/publish/page.tsx b/apps/web/app/studio/[username]/publish/page.tsx
index bc68ede4..ed2cdd20 100644
--- a/apps/web/app/studio/[username]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/publish/page.tsx
@@ -2,8 +2,11 @@
 
 import { useEffect, useState, Suspense } from "react"
 import { useSearchParams, useRouter } from "next/navigation"
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
-import { ResizablePanelGroup, ResizablePanel } from "@/components/ui/resizable"
+import {
+  ResizableHandle,
+  ResizablePanelGroup,
+  ResizablePanel,
+} from "@/components/ui/resizable"
 import { FileExplorer } from "@/components/features/studio/publish/components/FileExplorer"
 import { EditorPane } from "@/components/features/studio/publish/components/EditorPane"
 import { PreviewPane } from "@/components/features/studio/publish/components/PreviewPane"
@@ -20,6 +23,7 @@ function PublishPageContent() {
   const router = useRouter()
   const [selectedEntry, setSelectedEntry] = useState<FileEntry | null>(null)
   const [code, setCode] = useState<string>("")
+  const [isPreviewVisible, setIsPreviewVisible] = useState(true)
 
   const {
     sandbox,
@@ -35,7 +39,6 @@ function PublishPageContent() {
     isTreeLoading,
     isFileLoading,
     loadRootDirectory,
-    loadDirectory,
     loadFileContent,
     saveFileContent,
     createFile,
@@ -108,6 +111,10 @@ function PublishPageContent() {
     window.location.reload()
   }
 
+  const togglePreviewVisibility = () => {
+    setIsPreviewVisible((prev) => !prev)
+  }
+
   if (isSandboxLoading) {
     return (
       <div className="h-screen w-full flex items-center justify-center">
@@ -132,7 +139,12 @@ function PublishPageContent() {
 
   return (
     <div className="h-screen w-full flex flex-col">
-      <PublishHeader sandboxId={sandboxId} onReset={handleReset} />
+      <PublishHeader
+        sandboxId={sandboxId}
+        onReset={handleReset}
+        isPreviewVisible={isPreviewVisible}
+        onTogglePreview={togglePreviewVisibility}
+      />
 
       <ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
         <ResizablePanel defaultSize={20} minSize={15} className="border-r">
@@ -144,30 +156,31 @@ function PublishPageContent() {
             onCreateFile={handleCreateFile}
             onRefresh={loadRootDirectory}
             isLoading={isTreeLoading}
-            fetchDirectoryContent={loadDirectory}
           />
         </ResizablePanel>
-
-        <ResizablePanel defaultSize={80} minSize={55}>
-          <Tabs defaultValue="editor" className="h-full flex flex-col">
-            <TabsList className="mx-2 mt-2">
-              <TabsTrigger value="editor">Editor</TabsTrigger>
-              <TabsTrigger value="preview" disabled={!previewURL}>
-                Preview
-              </TabsTrigger>
-            </TabsList>
-            <TabsContent value="editor" className="flex-1 min-h-0 p-2">
+        <ResizableHandle />
+        <ResizablePanel defaultSize={80} minSize={20}>
+          <ResizablePanelGroup direction="horizontal" className="h-full">
+            <ResizablePanel
+              defaultSize={isPreviewVisible ? 50 : 100}
+              minSize={30}
+            >
               <EditorPane
                 selectedFile={selectedEntry}
                 code={code}
                 onCodeChange={handleCodeChange}
                 isLoading={isFileLoading}
               />
-            </TabsContent>
-            <TabsContent value="preview" className="flex-1 min-h-0 p-2">
-              <PreviewPane previewURL={previewURL} />
-            </TabsContent>
-          </Tabs>
+            </ResizablePanel>
+            {isPreviewVisible && (
+              <>
+                <ResizableHandle />
+                <ResizablePanel defaultSize={50} minSize={30}>
+                  <PreviewPane previewURL={previewURL} />
+                </ResizablePanel>
+              </>
+            )}
+          </ResizablePanelGroup>
         </ResizablePanel>
       </ResizablePanelGroup>
     </div>
diff --git a/apps/web/components/features/studio/publish/components/PublishHeader.tsx b/apps/web/components/features/studio/publish/components/PublishHeader.tsx
index aac61772..44af6c15 100644
--- a/apps/web/components/features/studio/publish/components/PublishHeader.tsx
+++ b/apps/web/components/features/studio/publish/components/PublishHeader.tsx
@@ -1,20 +1,42 @@
 import { Button } from "@/components/ui/button"
+import { PanelRightOpen, PanelRightClose } from "lucide-react"
 
 interface PublishHeaderProps {
   sandboxId: string | null
   onReset: () => void
+  isPreviewVisible: boolean
+  onTogglePreview: () => void
 }
 
-export function PublishHeader({ sandboxId, onReset }: PublishHeaderProps) {
+export function PublishHeader({
+  sandboxId,
+  onReset,
+  isPreviewVisible,
+  onTogglePreview,
+}: PublishHeaderProps) {
   return (
     <header className="flex items-center gap-2 p-4 border-b">
       <h1 className="text-2xl font-bold">Publish Your Sandbox</h1>
       {sandboxId && (
         <span className="text-xs text-muted-foreground ml-2">{sandboxId}</span>
       )}
-      <Button size="sm" onClick={onReset} className="ml-auto">
-        Reset
-      </Button>
+      <div className="ml-auto flex items-center gap-2">
+        <Button
+          size="sm"
+          variant="ghost"
+          onClick={onTogglePreview}
+          title={isPreviewVisible ? "Hide Preview" : "Show Preview"}
+        >
+          {isPreviewVisible ? (
+            <PanelRightClose className="h-4 w-4" />
+          ) : (
+            <PanelRightOpen className="h-4 w-4" />
+          )}
+        </Button>
+        <Button size="sm" onClick={onReset}>
+          Reset
+        </Button>
+      </div>
     </header>
   )
 }
diff --git a/apps/web/components/features/studio/publish/hooks/useFileSystem.ts b/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
index fe1f3652..4205560a 100644
--- a/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
+++ b/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
@@ -3,7 +3,16 @@ import { useState, useEffect, useRef, useCallback } from "react"
 import { toast } from "sonner"
 
 const ROOT_PATH = "/project/sandbox"
-const EXCLUDED_NAMES = ["node_modules", "dist"]
+const EXCLUDED_NAMES = [
+  "node_modules",
+  "dist",
+  "yarn.lock",
+  "vite-env.d.ts",
+  "public",
+  "pnpm-lock.yaml",
+  "index.html",
+  "package.json",
+]
 
 export interface FileEntry {
   path: string

From 9666f58b3e920d9fb00171b5df30b356e523c896 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Thu, 24 Apr 2025 11:59:16 +0400
Subject: [PATCH 074/143] add: create folders & add for each folders

---
 .../app/studio/[username]/publish/page.tsx    |   2 +
 .../publish/components/FileExplorer.tsx       |  69 ++-
 .../studio/publish/components/FileTree.tsx    | 406 +++++++++++++++---
 .../studio/publish/hooks/useFileSystem.ts     |  23 +-
 4 files changed, 434 insertions(+), 66 deletions(-)

diff --git a/apps/web/app/studio/[username]/publish/page.tsx b/apps/web/app/studio/[username]/publish/page.tsx
index ed2cdd20..2da9c7c6 100644
--- a/apps/web/app/studio/[username]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/publish/page.tsx
@@ -43,6 +43,7 @@ function PublishPageContent() {
     saveFileContent,
     createFile,
     deleteEntry,
+    createDirectory,
   } = useFileSystem(sandbox)
 
   useEffect(() => {
@@ -154,6 +155,7 @@ function PublishPageContent() {
             selectedPath={selectedEntry?.path || null}
             onDelete={handleDeleteEntry}
             onCreateFile={handleCreateFile}
+            onCreateDirectory={createDirectory}
             onRefresh={loadRootDirectory}
             isLoading={isTreeLoading}
           />
diff --git a/apps/web/components/features/studio/publish/components/FileExplorer.tsx b/apps/web/components/features/studio/publish/components/FileExplorer.tsx
index 713211ad..44f3aa55 100644
--- a/apps/web/components/features/studio/publish/components/FileExplorer.tsx
+++ b/apps/web/components/features/studio/publish/components/FileExplorer.tsx
@@ -4,6 +4,8 @@ import { useState } from "react"
 // Define or import the correct FileEntry type if not globally available
 // Assuming FileEntry is defined in page.tsx or a shared types file
 // If not, define it here:
+// Remove the local definition if FileEntry is imported from useFileSystem
+/*
 interface FileEntry {
   name: string
   type: "file" | "dir"
@@ -11,7 +13,14 @@ interface FileEntry {
   isSymlink: boolean
   children?: FileEntry[]
 }
-import { PlusIcon, RefreshCwIcon, Loader2Icon } from "lucide-react"
+*/
+import { FileEntry } from "../hooks/useFileSystem"
+import {
+  PlusIcon,
+  RefreshCwIcon,
+  Loader2Icon,
+  FolderPlusIcon,
+} from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Card, CardContent } from "@/components/ui/card"
@@ -23,6 +32,7 @@ interface FileExplorerProps {
   selectedPath: string | null
   onDelete: (filePath: string) => void
   onCreateFile: (fileName: string) => void
+  onCreateDirectory: (dirName: string) => void
   onRefresh: () => void
   isLoading: boolean
 }
@@ -33,11 +43,14 @@ export function FileExplorer({
   selectedPath,
   onDelete,
   onCreateFile,
+  onCreateDirectory,
   onRefresh,
   isLoading,
 }: FileExplorerProps) {
   const [isCreatingFile, setIsCreatingFile] = useState(false)
   const [newFileName, setNewFileName] = useState("")
+  const [isCreatingDirectory, setIsCreatingDirectory] = useState(false)
+  const [newDirectoryName, setNewDirectoryName] = useState("")
 
   const handleCreateFile = () => {
     if (newFileName) {
@@ -47,6 +60,21 @@ export function FileExplorer({
     }
   }
 
+  const handleCreateDirectory = () => {
+    if (newDirectoryName) {
+      onCreateDirectory(newDirectoryName)
+      setNewDirectoryName("")
+      setIsCreatingDirectory(false)
+    }
+  }
+
+  const handleCancel = () => {
+    setIsCreatingFile(false)
+    setNewFileName("")
+    setIsCreatingDirectory(false)
+    setNewDirectoryName("")
+  }
+
   return (
     <Card className="h-full rounded-none flex flex-col">
       <div className="flex items-center justify-between p-2 border-b">
@@ -60,6 +88,14 @@ export function FileExplorer({
           >
             <PlusIcon className="h-4 w-4" />
           </Button>
+          <Button
+            size="icon"
+            variant="ghost"
+            onClick={() => setIsCreatingDirectory(true)}
+            disabled={isLoading}
+          >
+            <FolderPlusIcon className="h-4 w-4" />
+          </Button>
           <Button
             size="icon"
             variant="ghost"
@@ -84,10 +120,7 @@ export function FileExplorer({
               onChange={(e) => setNewFileName(e.target.value)}
               onKeyDown={(e) => {
                 if (e.key === "Enter") handleCreateFile()
-                if (e.key === "Escape") {
-                  setIsCreatingFile(false)
-                  setNewFileName("")
-                }
+                if (e.key === "Escape") handleCancel()
               }}
               autoFocus
             />
@@ -102,6 +135,30 @@ export function FileExplorer({
         </div>
       )}
 
+      {isCreatingDirectory && (
+        <div className="p-2 border-b">
+          <div className="flex gap-2">
+            <Input
+              placeholder="folder-name"
+              value={newDirectoryName}
+              onChange={(e) => setNewDirectoryName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") handleCreateDirectory()
+                if (e.key === "Escape") handleCancel()
+              }}
+              autoFocus
+            />
+            <Button
+              size="sm"
+              onClick={handleCreateDirectory}
+              disabled={!newDirectoryName}
+            >
+              Create
+            </Button>
+          </div>
+        </div>
+      )}
+
       <CardContent className="p-0 overflow-y-auto flex-1">
         <FileTree
           entries={entries}
@@ -109,6 +166,8 @@ export function FileExplorer({
           selectedPath={selectedPath}
           onDelete={onDelete}
           isLoading={isLoading}
+          onCreateFile={onCreateFile}
+          onCreateDirectory={onCreateDirectory}
         />
       </CardContent>
     </Card>
diff --git a/apps/web/components/features/studio/publish/components/FileTree.tsx b/apps/web/components/features/studio/publish/components/FileTree.tsx
index 0637a8d9..a7e3f505 100644
--- a/apps/web/components/features/studio/publish/components/FileTree.tsx
+++ b/apps/web/components/features/studio/publish/components/FileTree.tsx
@@ -1,5 +1,12 @@
 import { useState } from "react"
-import { FolderIcon, FileIcon, Loader2Icon, TrashIcon } from "lucide-react"
+import {
+  FolderIcon,
+  FileIcon,
+  Loader2Icon,
+  TrashIcon,
+  FilePlusIcon,
+  FolderPlusIcon,
+} from "lucide-react"
 import { Button } from "@/components/ui/button"
 import {
   DropdownMenu,
@@ -7,6 +14,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
+import { Input } from "@/components/ui/input"
 
 interface FileEntry {
   name: string
@@ -22,22 +30,49 @@ interface FileTreeProps {
   selectedPath: string | null
   onDelete: (filePath: string) => void
   isLoading: boolean
+  onCreateFile: (filePath: string) => void
+  onCreateDirectory: (dirPath: string) => void
 }
 
-export function FileTree({
-  entries,
+interface FileTreeItemProps {
+  entry: FileEntry
+  level: number
+  onSelect: (entry: FileEntry) => void
+  selectedPath: string | null
+  onDelete: (filePath: string) => void
+  onCreateFile: (filePath: string) => void
+  onCreateDirectory: (dirPath: string) => void
+  expandedDirs: Record<string, boolean>
+  setExpandedDirs: React.Dispatch<React.SetStateAction<Record<string, boolean>>>
+}
+
+function FileTreeItem({
+  entry,
+  level,
   onSelect,
   selectedPath,
   onDelete,
-  isLoading,
-}: FileTreeProps) {
-  const [expandedDirs, setExpandedDirs] = useState<Record<string, boolean>>({})
+  onCreateFile,
+  onCreateDirectory,
+  expandedDirs,
+  setExpandedDirs,
+}: FileTreeItemProps) {
+  const [isCreatingFile, setIsCreatingFile] = useState(false)
+  const [newFileName, setNewFileName] = useState("")
+  const [isCreatingDirectory, setIsCreatingDirectory] = useState(false)
+  const [newDirectoryName, setNewDirectoryName] = useState("")
+  const [showActions, setShowActions] = useState(false)
 
-  const handleFileClick = (entry: FileEntry) => {
+  const handleFileClick = () => {
     onSelect(entry)
   }
 
-  const handleDirClick = (entry: FileEntry, e: React.MouseEvent) => {
+  const handleDirClick = (e: React.MouseEvent) => {
+    // Prevent details toggle when clicking icons
+    if ((e.target as HTMLElement).closest(".action-icon")) {
+      e.preventDefault()
+      return
+    }
     e.preventDefault()
     setExpandedDirs((prev) => ({
       ...prev,
@@ -45,61 +80,105 @@ export function FileTree({
     }))
   }
 
-  if (isLoading && entries.length === 0) {
-    return (
-      <div className="flex justify-center items-center py-8">
-        <Loader2Icon className="h-6 w-6 animate-spin text-muted-foreground" />
-      </div>
-    )
+  const handleCreateFile = () => {
+    if (newFileName) {
+      const parentPath = entry.path === "/" ? "" : entry.path
+      onCreateFile(`${parentPath}/${newFileName}`)
+      setNewFileName("")
+      setIsCreatingFile(false)
+      setShowActions(false) // Hide actions after creation
+    }
   }
 
-  const renderEntries = (items: FileEntry[], currentLevel = 0) => (
-    <ul className={`text-sm py-1 ${currentLevel > 0 ? "pl-4" : ""}`}>
-      {items.map((entry) => (
-        <li key={entry.path} className="py-0.5">
-          {entry.type === "dir" ? (
-            <details className="group" open={expandedDirs[entry.path]}>
-              <summary
-                className={`flex items-center px-2 py-1 cursor-pointer hover:bg-muted rounded list-none ${
-                  selectedPath === entry.path ? "bg-accent" : ""
-                }`}
-                onClick={(e) => handleDirClick(entry, e)}
+  const handleCreateDirectory = () => {
+    if (newDirectoryName) {
+      const parentPath = entry.path === "/" ? "" : entry.path
+      onCreateDirectory(`${parentPath}/${newDirectoryName}`)
+      setNewDirectoryName("")
+      setIsCreatingDirectory(false)
+      setShowActions(false) // Hide actions after creation
+    }
+  }
+
+  const handleCancelCreate = () => {
+    setIsCreatingFile(false)
+    setNewFileName("")
+    setIsCreatingDirectory(false)
+    setNewDirectoryName("")
+  }
+
+  const startCreateFile = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    e.preventDefault()
+    setIsCreatingFile(true)
+    setIsCreatingDirectory(false) // Ensure only one input is shown
+  }
+
+  const startCreateDirectory = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    e.preventDefault()
+    setIsCreatingDirectory(true)
+    setIsCreatingFile(false) // Ensure only one input is shown
+  }
+
+  return (
+    <li
+      className="py-0.5 group/item"
+      onMouseEnter={() => setShowActions(true)}
+      onMouseLeave={() => {
+        // Don't hide actions if an input is active
+        if (!isCreatingFile && !isCreatingDirectory) {
+          setShowActions(false)
+        }
+      }}
+    >
+      {entry.type === "dir" ? (
+        <details className="group" open={expandedDirs[entry.path]}>
+          <summary
+            className={`flex items-center justify-between px-2 py-1 cursor-pointer hover:bg-muted rounded list-none ${
+              selectedPath === entry.path ? "bg-accent" : ""
+            }`}
+            onClick={handleDirClick}
+            style={{ paddingLeft: `${level * 1 + 0.5}rem` }} // Indentation
+          >
+            <div className="flex items-center overflow-hidden">
+              <FolderIcon className="h-4 w-4 mr-1 text-blue-500 flex-shrink-0" />
+              <span className="font-medium truncate" title={entry.name}>
+                {entry.name}
+              </span>
+            </div>
+            <div
+              className={`flex items-center gap-1 action-icon transition-opacity ${
+                showActions
+                  ? "opacity-100"
+                  : "opacity-0 group-hover/item:opacity-100"
+              }`}
+            >
+              <Button
+                size="icon"
+                variant="ghost"
+                className="h-5 w-5"
+                onClick={startCreateFile}
+                title="Create file"
               >
-                <FolderIcon className="h-4 w-4 mr-1 text-blue-500 flex-shrink-0" />
-                <span className="font-medium truncate" title={entry.name}>
-                  {entry.name}
-                </span>
-              </summary>
-              {entry.children && (
-                <div className="mt-1">
-                  {entry.children.length > 0 ? (
-                    renderEntries(entry.children, currentLevel + 1)
-                  ) : (
-                    <div className="text-xs text-muted-foreground px-2 py-1 pl-6">
-                      Empty directory
-                    </div>
-                  )}
-                </div>
-              )}
-            </details>
-          ) : (
-            <div className="flex items-center group">
-              <button
-                className={`flex items-center w-full text-left px-2 py-1 hover:bg-muted rounded truncate ${
-                  selectedPath === entry.path ? "bg-accent font-medium" : ""
-                }`}
-                onClick={() => handleFileClick(entry)}
-                title={entry.path}
+                <FilePlusIcon className="h-3 w-3 text-muted-foreground" />
+              </Button>
+              <Button
+                size="icon"
+                variant="ghost"
+                className="h-5 w-5"
+                onClick={startCreateDirectory}
+                title="Create directory"
               >
-                <FileIcon className="h-4 w-4 mr-1 text-gray-500 flex-shrink-0" />
-                {entry.name}
-              </button>
+                <FolderPlusIcon className="h-3 w-3 text-muted-foreground" />
+              </Button>
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button
                     size="icon"
                     variant="ghost"
-                    className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity ml-1"
+                    className="h-5 w-5"
+                    onClick={(e) => e.stopPropagation()} // Prevent summary click
                   >
                     <TrashIcon className="h-3 w-3 text-muted-foreground" />
                   </Button>
@@ -109,19 +188,226 @@ export function FileTree({
                     className="text-destructive focus:text-destructive"
                     onClick={() => onDelete(entry.path)}
                   >
-                    Delete file
+                    Delete folder
                   </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
             </div>
+          </summary>
+
+          {/* Input field for creating file */}
+          {isCreatingFile && (
+            <div
+              className="flex gap-1 py-1 pl-6"
+              style={{ paddingLeft: `${(level + 1) * 1 + 0.5}rem` }}
+            >
+              <Input
+                placeholder="filename.js"
+                value={newFileName}
+                onChange={(e) => setNewFileName(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") handleCreateFile()
+                  if (e.key === "Escape") handleCancelCreate()
+                }}
+                className="h-6 text-xs"
+                autoFocus
+                onBlur={() => setTimeout(handleCancelCreate, 150)} // Delay blur to allow button click
+              />
+              <Button
+                size="sm"
+                onClick={handleCreateFile}
+                disabled={!newFileName}
+              >
+                Create
+              </Button>
+            </div>
           )}
-        </li>
-      ))}
-      {items.length === 0 && currentLevel === 0 && !isLoading && (
-        <li className="px-2 text-muted-foreground">No files found</li>
+
+          {/* Input field for creating directory */}
+          {isCreatingDirectory && (
+            <div
+              className="flex gap-1 py-1 pl-6"
+              style={{ paddingLeft: `${(level + 1) * 1 + 0.5}rem` }}
+            >
+              <Input
+                placeholder="folder-name"
+                value={newDirectoryName}
+                onChange={(e) => setNewDirectoryName(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") handleCreateDirectory()
+                  if (e.key === "Escape") handleCancelCreate()
+                }}
+                className="h-6 text-xs"
+                autoFocus
+                onBlur={() => setTimeout(handleCancelCreate, 150)} // Delay blur to allow button click
+              />
+              <Button
+                size="sm"
+                onClick={handleCreateDirectory}
+                disabled={!newDirectoryName}
+              >
+                Create
+              </Button>
+            </div>
+          )}
+
+          {/* Render children */}
+          {entry.children && (
+            <div className="mt-0.5">
+              {entry.children.length > 0 ? (
+                <FileTreeRecursive
+                  items={entry.children}
+                  level={level + 1}
+                  onSelect={onSelect}
+                  selectedPath={selectedPath}
+                  onDelete={onDelete}
+                  onCreateFile={onCreateFile}
+                  onCreateDirectory={onCreateDirectory}
+                  expandedDirs={expandedDirs}
+                  setExpandedDirs={setExpandedDirs}
+                />
+              ) : (
+                !isCreatingFile &&
+                !isCreatingDirectory && (
+                  <div
+                    className="text-xs text-muted-foreground px-2 py-1"
+                    style={{ paddingLeft: `${(level + 1) * 1 + 0.5}rem` }}
+                  >
+                    Empty directory
+                  </div>
+                )
+              )}
+            </div>
+          )}
+        </details>
+      ) : (
+        <div
+          className="flex items-center group/item justify-between"
+          style={{ paddingLeft: `${level * 1 + 0.5}rem` }} // Indentation
+          onMouseEnter={() => setShowActions(true)}
+          onMouseLeave={() => setShowActions(false)}
+        >
+          <button
+            className={`flex items-center flex-1 text-left px-2 py-1 hover:bg-muted rounded truncate ${
+              selectedPath === entry.path ? "bg-accent font-medium" : ""
+            }`}
+            onClick={handleFileClick}
+            title={entry.path}
+          >
+            <FileIcon className="h-4 w-4 mr-1 text-gray-500 flex-shrink-0" />
+            {entry.name}
+          </button>
+          <div
+            className={`action-icon transition-opacity ${
+              showActions
+                ? "opacity-100"
+                : "opacity-0 group-hover/item:opacity-100"
+            }`}
+          >
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button size="icon" variant="ghost" className="h-5 w-5">
+                  <TrashIcon className="h-3 w-3 text-muted-foreground" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem
+                  className="text-destructive focus:text-destructive"
+                  onClick={() => onDelete(entry.path)}
+                >
+                  Delete file
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
       )}
+    </li>
+  )
+}
+
+// Renamed original renderEntries to FileTreeRecursive for clarity
+interface FileTreeRecursiveProps {
+  items: FileEntry[]
+  level: number
+  onSelect: (entry: FileEntry) => void
+  selectedPath: string | null
+  onDelete: (filePath: string) => void
+  onCreateFile: (filePath: string) => void
+  onCreateDirectory: (dirPath: string) => void
+  expandedDirs: Record<string, boolean>
+  setExpandedDirs: React.Dispatch<React.SetStateAction<Record<string, boolean>>>
+}
+
+function FileTreeRecursive({
+  items,
+  level,
+  onSelect,
+  selectedPath,
+  onDelete,
+  onCreateFile,
+  onCreateDirectory,
+  expandedDirs,
+  setExpandedDirs,
+}: FileTreeRecursiveProps) {
+  return (
+    <ul className={`text-sm py-0.5`}>
+      {items.map((entry) => (
+        <FileTreeItem
+          key={entry.path}
+          entry={entry}
+          level={level}
+          onSelect={onSelect}
+          selectedPath={selectedPath}
+          onDelete={onDelete}
+          onCreateFile={onCreateFile}
+          onCreateDirectory={onCreateDirectory}
+          expandedDirs={expandedDirs}
+          setExpandedDirs={setExpandedDirs}
+        />
+      ))}
     </ul>
   )
+}
 
-  return renderEntries(entries)
+export function FileTree({
+  entries,
+  onSelect,
+  selectedPath,
+  onDelete,
+  isLoading,
+  onCreateFile,
+  onCreateDirectory,
+}: FileTreeProps) {
+  const [expandedDirs, setExpandedDirs] = useState<Record<string, boolean>>({})
+
+  if (isLoading && entries.length === 0) {
+    return (
+      <div className="flex justify-center items-center py-8">
+        <Loader2Icon className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      {entries.length === 0 && !isLoading ? (
+        <div className="px-2 text-muted-foreground py-4 text-sm">
+          No files found
+        </div>
+      ) : (
+        <FileTreeRecursive
+          items={entries}
+          level={0}
+          onSelect={onSelect}
+          selectedPath={selectedPath}
+          onDelete={onDelete}
+          onCreateFile={onCreateFile}
+          onCreateDirectory={onCreateDirectory}
+          expandedDirs={expandedDirs}
+          setExpandedDirs={setExpandedDirs}
+        />
+      )}
+    </>
+  )
 }
diff --git a/apps/web/components/features/studio/publish/hooks/useFileSystem.ts b/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
index 4205560a..87be5499 100644
--- a/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
+++ b/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
@@ -11,7 +11,12 @@ const EXCLUDED_NAMES = [
   "public",
   "pnpm-lock.yaml",
   "index.html",
-  "package.json",
+  // "package.json",
+  "README.md",
+  "vite.config.ts",
+  "tsconfig.json",
+  "tsconfig.node.json",
+  "main.tsx",
 ]
 
 export interface FileEntry {
@@ -138,6 +143,21 @@ export const useFileSystem = (sandbox: SandboxSession | null) => {
     [sandbox, loadRootDirectory],
   )
 
+  const createDirectory = useCallback(
+    async (dirPath: string) => {
+      if (!sandbox) throw new Error("Sandbox not available")
+      try {
+        await sandbox.fs.mkdir(normalizePath(dirPath))
+        await loadRootDirectory()
+      } catch (error) {
+        console.error(`Failed to create directory ${dirPath}:`, error)
+        toast.error(`Failed to create directory ${dirPath.split("/").pop()}`)
+        throw error
+      }
+    },
+    [sandbox, loadRootDirectory],
+  )
+
   const deleteEntry = useCallback(
     async (entryPath: string) => {
       if (!sandbox) throw new Error("Sandbox not available")
@@ -169,6 +189,7 @@ export const useFileSystem = (sandbox: SandboxSession | null) => {
     loadFileContent,
     saveFileContent,
     createFile,
+    createDirectory,
     deleteEntry,
   }
 }

From 0d5e76b6a9a40cc5f44a8074046aedc81cbf1893 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Thu, 24 Apr 2025 12:28:40 +0400
Subject: [PATCH 075/143] add more

---
 .../app/studio/[username]/publish/page.tsx    |  22 ++
 .../publish/components/FileExplorer.tsx       |   3 +
 .../studio/publish/components/FileTree.tsx    | 276 ++++++++++++------
 .../studio/publish/hooks/useFileSystem.ts     |  24 ++
 4 files changed, 238 insertions(+), 87 deletions(-)

diff --git a/apps/web/app/studio/[username]/publish/page.tsx b/apps/web/app/studio/[username]/publish/page.tsx
index 2da9c7c6..091491ea 100644
--- a/apps/web/app/studio/[username]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/publish/page.tsx
@@ -44,6 +44,7 @@ function PublishPageContent() {
     createFile,
     deleteEntry,
     createDirectory,
+    renameEntry,
   } = useFileSystem(sandbox)
 
   useEffect(() => {
@@ -108,6 +109,26 @@ function PublishPageContent() {
     }
   }
 
+  const handleRenameEntry = async (oldPath: string, newName: string) => {
+    try {
+      const newPath = await renameEntry(oldPath, newName)
+
+      // Update selected entry if it was the renamed one
+      if (selectedEntry?.path === oldPath) {
+        setSelectedEntry({
+          ...selectedEntry,
+          path: newPath,
+          name: newName,
+        })
+      }
+
+      return newPath
+    } catch (error) {
+      // Error is handled in the hook
+      return oldPath
+    }
+  }
+
   const handleReset = () => {
     window.location.reload()
   }
@@ -156,6 +177,7 @@ function PublishPageContent() {
             onDelete={handleDeleteEntry}
             onCreateFile={handleCreateFile}
             onCreateDirectory={createDirectory}
+            onRename={handleRenameEntry}
             onRefresh={loadRootDirectory}
             isLoading={isTreeLoading}
           />
diff --git a/apps/web/components/features/studio/publish/components/FileExplorer.tsx b/apps/web/components/features/studio/publish/components/FileExplorer.tsx
index 44f3aa55..20d0e32b 100644
--- a/apps/web/components/features/studio/publish/components/FileExplorer.tsx
+++ b/apps/web/components/features/studio/publish/components/FileExplorer.tsx
@@ -33,6 +33,7 @@ interface FileExplorerProps {
   onDelete: (filePath: string) => void
   onCreateFile: (fileName: string) => void
   onCreateDirectory: (dirName: string) => void
+  onRename: (oldPath: string, newName: string) => Promise<string>
   onRefresh: () => void
   isLoading: boolean
 }
@@ -44,6 +45,7 @@ export function FileExplorer({
   onDelete,
   onCreateFile,
   onCreateDirectory,
+  onRename,
   onRefresh,
   isLoading,
 }: FileExplorerProps) {
@@ -168,6 +170,7 @@ export function FileExplorer({
           isLoading={isLoading}
           onCreateFile={onCreateFile}
           onCreateDirectory={onCreateDirectory}
+          onRename={onRename}
         />
       </CardContent>
     </Card>
diff --git a/apps/web/components/features/studio/publish/components/FileTree.tsx b/apps/web/components/features/studio/publish/components/FileTree.tsx
index a7e3f505..bc7f9f8d 100644
--- a/apps/web/components/features/studio/publish/components/FileTree.tsx
+++ b/apps/web/components/features/studio/publish/components/FileTree.tsx
@@ -6,6 +6,7 @@ import {
   TrashIcon,
   FilePlusIcon,
   FolderPlusIcon,
+  PencilIcon,
 } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import {
@@ -32,6 +33,7 @@ interface FileTreeProps {
   isLoading: boolean
   onCreateFile: (filePath: string) => void
   onCreateDirectory: (dirPath: string) => void
+  onRename?: (oldPath: string, newName: string) => Promise<string>
 }
 
 interface FileTreeItemProps {
@@ -42,6 +44,7 @@ interface FileTreeItemProps {
   onDelete: (filePath: string) => void
   onCreateFile: (filePath: string) => void
   onCreateDirectory: (dirPath: string) => void
+  onRename?: (oldPath: string, newName: string) => Promise<string>
   expandedDirs: Record<string, boolean>
   setExpandedDirs: React.Dispatch<React.SetStateAction<Record<string, boolean>>>
 }
@@ -54,6 +57,7 @@ function FileTreeItem({
   onDelete,
   onCreateFile,
   onCreateDirectory,
+  onRename,
   expandedDirs,
   setExpandedDirs,
 }: FileTreeItemProps) {
@@ -61,6 +65,8 @@ function FileTreeItem({
   const [newFileName, setNewFileName] = useState("")
   const [isCreatingDirectory, setIsCreatingDirectory] = useState(false)
   const [newDirectoryName, setNewDirectoryName] = useState("")
+  const [isRenaming, setIsRenaming] = useState(false)
+  const [newName, setNewName] = useState("")
   const [showActions, setShowActions] = useState(false)
 
   const handleFileClick = () => {
@@ -105,6 +111,7 @@ function FileTreeItem({
     setNewFileName("")
     setIsCreatingDirectory(false)
     setNewDirectoryName("")
+    setIsRenaming(false)
   }
 
   const startCreateFile = (e: React.MouseEvent) => {
@@ -121,79 +128,134 @@ function FileTreeItem({
     setIsCreatingFile(false) // Ensure only one input is shown
   }
 
+  const startRename = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    e.preventDefault()
+    setNewName(entry.name)
+    setIsRenaming(true)
+  }
+
+  const handleRename = async () => {
+    if (newName && newName !== entry.name && onRename) {
+      try {
+        await onRename(entry.path, newName)
+        setIsRenaming(false)
+      } catch (error) {
+        // Error handling is done in the hook
+      }
+    } else {
+      setIsRenaming(false)
+    }
+  }
+
   return (
     <li
       className="py-0.5 group/item"
       onMouseEnter={() => setShowActions(true)}
       onMouseLeave={() => {
         // Don't hide actions if an input is active
-        if (!isCreatingFile && !isCreatingDirectory) {
+        if (!isCreatingFile && !isCreatingDirectory && !isRenaming) {
           setShowActions(false)
         }
       }}
     >
       {entry.type === "dir" ? (
         <details className="group" open={expandedDirs[entry.path]}>
-          <summary
-            className={`flex items-center justify-between px-2 py-1 cursor-pointer hover:bg-muted rounded list-none ${
-              selectedPath === entry.path ? "bg-accent" : ""
-            }`}
-            onClick={handleDirClick}
-            style={{ paddingLeft: `${level * 1 + 0.5}rem` }} // Indentation
-          >
-            <div className="flex items-center overflow-hidden">
-              <FolderIcon className="h-4 w-4 mr-1 text-blue-500 flex-shrink-0" />
-              <span className="font-medium truncate" title={entry.name}>
-                {entry.name}
-              </span>
-            </div>
+          {isRenaming ? (
             <div
-              className={`flex items-center gap-1 action-icon transition-opacity ${
-                showActions
-                  ? "opacity-100"
-                  : "opacity-0 group-hover/item:opacity-100"
-              }`}
+              className="flex gap-1 py-1 pl-2"
+              style={{ paddingLeft: `${level * 1 + 0.5}rem` }}
             >
+              <Input
+                value={newName}
+                onChange={(e) => setNewName(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") handleRename()
+                  if (e.key === "Escape") handleCancelCreate()
+                }}
+                className="h-6 text-xs"
+                autoFocus
+                onBlur={() => setTimeout(handleCancelCreate, 150)}
+              />
               <Button
-                size="icon"
-                variant="ghost"
-                className="h-5 w-5"
-                onClick={startCreateFile}
-                title="Create file"
-              >
-                <FilePlusIcon className="h-3 w-3 text-muted-foreground" />
-              </Button>
-              <Button
-                size="icon"
-                variant="ghost"
-                className="h-5 w-5"
-                onClick={startCreateDirectory}
-                title="Create directory"
+                size="sm"
+                onClick={handleRename}
+                disabled={!newName || newName === entry.name}
               >
-                <FolderPlusIcon className="h-3 w-3 text-muted-foreground" />
+                Rename
               </Button>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button
-                    size="icon"
-                    variant="ghost"
-                    className="h-5 w-5"
-                    onClick={(e) => e.stopPropagation()} // Prevent summary click
-                  >
-                    <TrashIcon className="h-3 w-3 text-muted-foreground" />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                  <DropdownMenuItem
-                    className="text-destructive focus:text-destructive"
-                    onClick={() => onDelete(entry.path)}
-                  >
-                    Delete folder
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
             </div>
-          </summary>
+          ) : (
+            <summary
+              className={`flex items-center justify-between px-2 py-1 cursor-pointer hover:bg-muted rounded list-none ${
+                selectedPath === entry.path ? "bg-accent" : ""
+              }`}
+              onClick={handleDirClick}
+              style={{ paddingLeft: `${level * 1 + 0.5}rem` }} // Indentation
+            >
+              <div className="flex items-center overflow-hidden">
+                <FolderIcon className="h-4 w-4 mr-1 text-blue-500 flex-shrink-0" />
+                <span className="font-medium truncate" title={entry.name}>
+                  {entry.name}
+                </span>
+              </div>
+              <div
+                className={`flex items-center gap-1 action-icon transition-opacity ${
+                  showActions
+                    ? "opacity-100"
+                    : "opacity-0 group-hover/item:opacity-100"
+                }`}
+              >
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="h-5 w-5"
+                  onClick={startRename}
+                  title="Rename folder"
+                >
+                  <PencilIcon className="h-3 w-3 text-muted-foreground" />
+                </Button>
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="h-5 w-5"
+                  onClick={startCreateFile}
+                  title="Create file"
+                >
+                  <FilePlusIcon className="h-3 w-3 text-muted-foreground" />
+                </Button>
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="h-5 w-5"
+                  onClick={startCreateDirectory}
+                  title="Create directory"
+                >
+                  <FolderPlusIcon className="h-3 w-3 text-muted-foreground" />
+                </Button>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      size="icon"
+                      variant="ghost"
+                      className="h-5 w-5"
+                      onClick={(e) => e.stopPropagation()} // Prevent summary click
+                    >
+                      <TrashIcon className="h-3 w-3 text-muted-foreground" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem
+                      className="text-destructive focus:text-destructive"
+                      onClick={() => onDelete(entry.path)}
+                    >
+                      Delete folder
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </summary>
+          )}
 
           {/* Input field for creating file */}
           {isCreatingFile && (
@@ -263,6 +325,7 @@ function FileTreeItem({
                   onDelete={onDelete}
                   onCreateFile={onCreateFile}
                   onCreateDirectory={onCreateDirectory}
+                  onRename={onRename}
                   expandedDirs={expandedDirs}
                   setExpandedDirs={setExpandedDirs}
                 />
@@ -287,39 +350,73 @@ function FileTreeItem({
           onMouseEnter={() => setShowActions(true)}
           onMouseLeave={() => setShowActions(false)}
         >
-          <button
-            className={`flex items-center flex-1 text-left px-2 py-1 hover:bg-muted rounded truncate ${
-              selectedPath === entry.path ? "bg-accent font-medium" : ""
-            }`}
-            onClick={handleFileClick}
-            title={entry.path}
-          >
-            <FileIcon className="h-4 w-4 mr-1 text-gray-500 flex-shrink-0" />
-            {entry.name}
-          </button>
-          <div
-            className={`action-icon transition-opacity ${
-              showActions
-                ? "opacity-100"
-                : "opacity-0 group-hover/item:opacity-100"
-            }`}
-          >
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button size="icon" variant="ghost" className="h-5 w-5">
-                  <TrashIcon className="h-3 w-3 text-muted-foreground" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <DropdownMenuItem
-                  className="text-destructive focus:text-destructive"
-                  onClick={() => onDelete(entry.path)}
+          {isRenaming ? (
+            <div className="flex gap-1 py-1 flex-1">
+              <Input
+                value={newName}
+                onChange={(e) => setNewName(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") handleRename()
+                  if (e.key === "Escape") handleCancelCreate()
+                }}
+                className="h-6 text-xs"
+                autoFocus
+                onBlur={() => setTimeout(handleCancelCreate, 150)}
+              />
+              <Button
+                size="sm"
+                onClick={handleRename}
+                disabled={!newName || newName === entry.name}
+              >
+                Rename
+              </Button>
+            </div>
+          ) : (
+            <>
+              <button
+                className={`flex items-center flex-1 text-left px-2 py-1 hover:bg-muted rounded truncate ${
+                  selectedPath === entry.path ? "bg-accent font-medium" : ""
+                }`}
+                onClick={handleFileClick}
+                title={entry.path}
+              >
+                <FileIcon className="h-4 w-4 mr-1 text-gray-500 flex-shrink-0" />
+                {entry.name}
+              </button>
+              <div
+                className={`action-icon transition-opacity ${
+                  showActions
+                    ? "opacity-100"
+                    : "opacity-0 group-hover/item:opacity-100"
+                }`}
+              >
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="h-5 w-5"
+                  onClick={startRename}
+                  title="Rename file"
                 >
-                  Delete file
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
+                  <PencilIcon className="h-3 w-3 text-muted-foreground" />
+                </Button>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button size="icon" variant="ghost" className="h-5 w-5">
+                      <TrashIcon className="h-3 w-3 text-muted-foreground" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem
+                      className="text-destructive focus:text-destructive"
+                      onClick={() => onDelete(entry.path)}
+                    >
+                      Delete file
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </>
+          )}
         </div>
       )}
     </li>
@@ -335,6 +432,7 @@ interface FileTreeRecursiveProps {
   onDelete: (filePath: string) => void
   onCreateFile: (filePath: string) => void
   onCreateDirectory: (dirPath: string) => void
+  onRename?: (oldPath: string, newName: string) => Promise<string>
   expandedDirs: Record<string, boolean>
   setExpandedDirs: React.Dispatch<React.SetStateAction<Record<string, boolean>>>
 }
@@ -347,6 +445,7 @@ function FileTreeRecursive({
   onDelete,
   onCreateFile,
   onCreateDirectory,
+  onRename,
   expandedDirs,
   setExpandedDirs,
 }: FileTreeRecursiveProps) {
@@ -362,6 +461,7 @@ function FileTreeRecursive({
           onDelete={onDelete}
           onCreateFile={onCreateFile}
           onCreateDirectory={onCreateDirectory}
+          onRename={onRename}
           expandedDirs={expandedDirs}
           setExpandedDirs={setExpandedDirs}
         />
@@ -378,6 +478,7 @@ export function FileTree({
   isLoading,
   onCreateFile,
   onCreateDirectory,
+  onRename,
 }: FileTreeProps) {
   const [expandedDirs, setExpandedDirs] = useState<Record<string, boolean>>({})
 
@@ -404,6 +505,7 @@ export function FileTree({
           onDelete={onDelete}
           onCreateFile={onCreateFile}
           onCreateDirectory={onCreateDirectory}
+          onRename={onRename}
           expandedDirs={expandedDirs}
           setExpandedDirs={setExpandedDirs}
         />
diff --git a/apps/web/components/features/studio/publish/hooks/useFileSystem.ts b/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
index 87be5499..89ad6a5a 100644
--- a/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
+++ b/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
@@ -181,6 +181,29 @@ export const useFileSystem = (sandbox: SandboxSession | null) => {
     [sandbox, loadRootDirectory],
   )
 
+  const renameEntry = useCallback(
+    async (oldPath: string, newName: string) => {
+      if (!sandbox) throw new Error("Sandbox not available")
+
+      try {
+        const pathParts = oldPath.split("/")
+        const parentPath = pathParts.slice(0, -1).join("/")
+        const newPath = `${parentPath ? parentPath + "/" : ""}${newName}`
+
+        // Use the rename method that is available in the SDK
+        await sandbox.fs.rename(normalizePath(oldPath), normalizePath(newPath))
+
+        await loadRootDirectory()
+        return newPath
+      } catch (error) {
+        console.error(`Failed to rename ${oldPath} to ${newName}:`, error)
+        toast.error(`Failed to rename to ${newName}`)
+        throw error
+      }
+    },
+    [sandbox, loadRootDirectory],
+  )
+
   return {
     files,
     isTreeLoading,
@@ -191,5 +214,6 @@ export const useFileSystem = (sandbox: SandboxSession | null) => {
     createFile,
     createDirectory,
     deleteEntry,
+    renameEntry,
   }
 }

From de186a8764ba4492cf7a83fcf452b7850b8c01a7 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Thu, 24 Apr 2025 18:13:46 +0400
Subject: [PATCH 076/143] add: reconnect on close

---
 .../app/studio/[username]/publish/page.tsx    |  25 +-
 .../studio/publish/hooks/useFileSystem.ts     | 214 +++++++++---------
 .../studio/publish/hooks/useSandbox.ts        |  63 ++++--
 3 files changed, 172 insertions(+), 130 deletions(-)

diff --git a/apps/web/app/studio/[username]/publish/page.tsx b/apps/web/app/studio/[username]/publish/page.tsx
index 091491ea..659c3948 100644
--- a/apps/web/app/studio/[username]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/publish/page.tsx
@@ -26,10 +26,12 @@ function PublishPageContent() {
   const [isPreviewVisible, setIsPreviewVisible] = useState(true)
 
   const {
-    sandbox,
+    sandboxRef,
     sandboxId,
     previewURL,
-    isLoading: isSandboxLoading,
+    isSandboxLoading,
+    sandboxConnectionHash,
+    reconnectSandbox,
   } = useSandbox({
     defaultSandboxId: searchParams.get("sandboxId"),
   })
@@ -45,7 +47,11 @@ function PublishPageContent() {
     deleteEntry,
     createDirectory,
     renameEntry,
-  } = useFileSystem(sandbox)
+  } = useFileSystem({
+    sandboxRef,
+    reconnectSandbox,
+    sandboxConnectionHash,
+  })
 
   useEffect(() => {
     if (sandboxId && sandboxId !== searchParams.get("sandboxId")) {
@@ -56,7 +62,11 @@ function PublishPageContent() {
   }, [sandboxId, router, searchParams])
 
   useEffect(() => {
-    if (!sandbox || !selectedEntry || selectedEntry.type !== "file") {
+    if (
+      !sandboxRef.current ||
+      !selectedEntry ||
+      selectedEntry.type !== "file"
+    ) {
       setCode("")
       return
     }
@@ -72,11 +82,12 @@ function PublishPageContent() {
     }
 
     loadContent()
-  }, [sandbox, selectedEntry, loadFileContent])
+  }, [sandboxRef, selectedEntry, isSandboxLoading])
 
   const handleCodeChange = (value: string) => {
     setCode(value)
-    if (!sandbox || !selectedEntry || selectedEntry.type !== "file") return
+    if (!sandboxRef.current || !selectedEntry || selectedEntry.type !== "file")
+      return
     saveFileContent(selectedEntry.path, value)
   }
 
@@ -148,7 +159,7 @@ function PublishPageContent() {
     )
   }
 
-  if (!sandbox) {
+  if (!sandboxRef.current) {
     return (
       <div className="h-screen w-full flex items-center justify-center">
         <div className="flex flex-col items-center gap-4 text-destructive">
diff --git a/apps/web/components/features/studio/publish/hooks/useFileSystem.ts b/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
index 89ad6a5a..ac869195 100644
--- a/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
+++ b/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
@@ -1,5 +1,5 @@
 import { SandboxSession, ReaddirEntry } from "@codesandbox/sdk"
-import { useState, useEffect, useRef, useCallback } from "react"
+import { useState, useEffect, useRef, RefObject } from "react"
 import { toast } from "sonner"
 
 const ROOT_PATH = "/project/sandbox"
@@ -66,20 +66,47 @@ const loadDirectoryRecursively = async (
   return fileEntries
 }
 
-export const useFileSystem = (sandbox: SandboxSession | null) => {
+export const useFileSystem = ({
+  sandboxRef,
+  reconnectSandbox,
+  sandboxConnectionHash,
+}: {
+  sandboxRef: RefObject<SandboxSession | null>
+  reconnectSandbox: () => Promise<void>
+  sandboxConnectionHash: string | null
+}) => {
   const [files, setFiles] = useState<FileEntry[]>([])
   const [isTreeLoading, setIsTreeLoading] = useState(false)
   const [isFileLoading, setIsFileLoading] = useState(false)
   const debounceRef = useRef<NodeJS.Timeout | null>(null)
 
-  console.log("files", files)
+  const fsWrapper = async <T>(
+    operation: (sandbox: SandboxSession) => Promise<T>,
+  ): Promise<T | undefined> => {
+    if (!sandboxRef.current) return
 
-  const loadRootDirectory = useCallback(async () => {
-    if (!sandbox) return
+    try {
+      return await operation(sandboxRef.current)
+    } catch (error) {
+      try {
+        await reconnectSandbox()
+        if (!sandboxRef.current) throw new Error("Failed to reconnect sandbox")
+        return await operation(sandboxRef.current)
+      } catch (error) {
+        console.error("Failed to execute operation:", error)
+        throw error
+      }
+    }
+  }
+
+  const loadRootDirectory = async () => {
     setIsTreeLoading(true)
     try {
-      const rootEntries = await loadDirectoryRecursively(sandbox, ROOT_PATH)
-      setFiles(rootEntries)
+      const rootEntries = await fsWrapper((sandbox) =>
+        loadDirectoryRecursively(sandbox, ROOT_PATH),
+      )
+      console.log("rootEntries", rootEntries)
+      if (rootEntries) setFiles(rootEntries)
     } catch (error) {
       console.error("Failed to load root directory:", error)
       toast.error("Failed to load project files")
@@ -87,81 +114,71 @@ export const useFileSystem = (sandbox: SandboxSession | null) => {
     } finally {
       setIsTreeLoading(false)
     }
-  }, [sandbox])
+  }
 
   useEffect(() => {
     loadRootDirectory()
-  }, [loadRootDirectory])
-
-  const loadFileContent = useCallback(
-    async (filePath: string): Promise<string> => {
-      if (!sandbox) throw new Error("Sandbox not available")
-      setIsFileLoading(true)
-      try {
-        const content = await sandbox.fs.readTextFile(normalizePath(filePath))
-        return content
-      } catch (error) {
-        console.error(`Failed to load file content for ${filePath}:`, error)
-        toast.error(`Failed to load file`)
-        throw error
-      } finally {
-        setIsFileLoading(false)
-      }
-    },
-    [sandbox],
-  )
+  }, [sandboxConnectionHash])
 
-  const saveFileContent = useCallback(
-    (filePath: string, value: string) => {
-      if (!sandbox) return
+  const loadFileContent = async (filePath: string): Promise<string> => {
+    setIsFileLoading(true)
+    try {
+      const content = await fsWrapper((sandbox) =>
+        sandbox.fs.readTextFile(normalizePath(filePath)),
+      )
+      if (!content) throw new Error("Failed to load file content")
+      return content
+    } catch (error) {
+      console.error(`Failed to load file content for ${filePath}:`, error)
+      toast.error(`Failed to load file`)
+      throw error
+    } finally {
+      setIsFileLoading(false)
+    }
+  }
 
-      if (debounceRef.current) clearTimeout(debounceRef.current)
-      debounceRef.current = setTimeout(async () => {
-        try {
-          await sandbox.fs.writeTextFile(normalizePath(filePath), value)
-        } catch (error) {
-          console.error("Failed to save file:", error)
-          toast.error(`Failed to save ${filePath.split("/").pop()}`)
-        }
-      }, 800)
-    },
-    [sandbox],
-  )
+  const saveFileContent = (filePath: string, value: string) => {
+    if (debounceRef.current) clearTimeout(debounceRef.current)
 
-  const createFile = useCallback(
-    async (filePath: string) => {
-      if (!sandbox) throw new Error("Sandbox not available")
+    debounceRef.current = setTimeout(async () => {
       try {
-        await sandbox.fs.writeTextFile(normalizePath(filePath), "")
-        await loadRootDirectory()
+        await fsWrapper((sandbox) =>
+          sandbox.fs.writeTextFile(normalizePath(filePath), value),
+        )
       } catch (error) {
-        console.error(`Failed to create file ${filePath}:`, error)
-        toast.error(`Failed to create ${filePath.split("/").pop()}`)
-        throw error
+        console.error("Failed to save file:", error)
+        toast.error(`Failed to save ${filePath.split("/").pop()}`)
       }
-    },
-    [sandbox, loadRootDirectory],
-  )
+    }, 800)
+  }
 
-  const createDirectory = useCallback(
-    async (dirPath: string) => {
-      if (!sandbox) throw new Error("Sandbox not available")
-      try {
-        await sandbox.fs.mkdir(normalizePath(dirPath))
-        await loadRootDirectory()
-      } catch (error) {
-        console.error(`Failed to create directory ${dirPath}:`, error)
-        toast.error(`Failed to create directory ${dirPath.split("/").pop()}`)
-        throw error
-      }
-    },
-    [sandbox, loadRootDirectory],
-  )
+  const createFile = async (filePath: string) => {
+    try {
+      await fsWrapper((sandbox) =>
+        sandbox.fs.writeTextFile(normalizePath(filePath), ""),
+      )
+      await loadRootDirectory()
+    } catch (error) {
+      console.error(`Failed to create file ${filePath}:`, error)
+      toast.error(`Failed to create ${filePath.split("/").pop()}`)
+      throw error
+    }
+  }
 
-  const deleteEntry = useCallback(
-    async (entryPath: string) => {
-      if (!sandbox) throw new Error("Sandbox not available")
-      try {
+  const createDirectory = async (dirPath: string) => {
+    try {
+      await fsWrapper((sandbox) => sandbox.fs.mkdir(normalizePath(dirPath)))
+      await loadRootDirectory()
+    } catch (error) {
+      console.error(`Failed to create directory ${dirPath}:`, error)
+      toast.error(`Failed to create directory ${dirPath.split("/").pop()}`)
+      throw error
+    }
+  }
+
+  const deleteEntry = async (entryPath: string) => {
+    try {
+      await fsWrapper(async (sandbox) => {
         let isDir = false
         try {
           const statResult = await sandbox.fs.stat(normalizePath(entryPath))
@@ -170,39 +187,34 @@ export const useFileSystem = (sandbox: SandboxSession | null) => {
           console.warn(`Stat failed for ${entryPath} during delete:`, statError)
         }
 
-        await sandbox.fs.remove(normalizePath(entryPath), isDir)
-        await loadRootDirectory()
-      } catch (error) {
-        console.error(`Failed to delete ${entryPath}:`, error)
-        toast.error(`Failed to delete ${entryPath.split("/").pop()}`)
-        throw error
-      }
-    },
-    [sandbox, loadRootDirectory],
-  )
-
-  const renameEntry = useCallback(
-    async (oldPath: string, newName: string) => {
-      if (!sandbox) throw new Error("Sandbox not available")
+        return sandbox.fs.remove(normalizePath(entryPath), isDir)
+      })
+      await loadRootDirectory()
+    } catch (error) {
+      console.error(`Failed to delete ${entryPath}:`, error)
+      toast.error(`Failed to delete ${entryPath.split("/").pop()}`)
+      throw error
+    }
+  }
 
-      try {
-        const pathParts = oldPath.split("/")
-        const parentPath = pathParts.slice(0, -1).join("/")
-        const newPath = `${parentPath ? parentPath + "/" : ""}${newName}`
+  const renameEntry = async (oldPath: string, newName: string) => {
+    try {
+      const pathParts = oldPath.split("/")
+      const parentPath = pathParts.slice(0, -1).join("/")
+      const newPath = `${parentPath ? parentPath + "/" : ""}${newName}`
 
-        // Use the rename method that is available in the SDK
-        await sandbox.fs.rename(normalizePath(oldPath), normalizePath(newPath))
+      await fsWrapper((sandbox) =>
+        sandbox.fs.rename(normalizePath(oldPath), normalizePath(newPath)),
+      )
 
-        await loadRootDirectory()
-        return newPath
-      } catch (error) {
-        console.error(`Failed to rename ${oldPath} to ${newName}:`, error)
-        toast.error(`Failed to rename to ${newName}`)
-        throw error
-      }
-    },
-    [sandbox, loadRootDirectory],
-  )
+      await loadRootDirectory()
+      return newPath
+    } catch (error) {
+      console.error(`Failed to rename ${oldPath} to ${newName}:`, error)
+      toast.error(`Failed to rename to ${newName}`)
+      throw error
+    }
+  }
 
   return {
     files,
diff --git a/apps/web/components/features/studio/publish/hooks/useSandbox.ts b/apps/web/components/features/studio/publish/hooks/useSandbox.ts
index deec0f8d..40da8a86 100644
--- a/apps/web/components/features/studio/publish/hooks/useSandbox.ts
+++ b/apps/web/components/features/studio/publish/hooks/useSandbox.ts
@@ -1,6 +1,6 @@
 import { SandboxSession } from "@codesandbox/sdk"
 import { connectToSandbox } from "@codesandbox/sdk/browser"
-import { useEffect, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { connectToServerSandbox } from "../api"
 
 export const useSandbox = ({
@@ -8,36 +8,55 @@ export const useSandbox = ({
 }: {
   defaultSandboxId: string | null
 }) => {
-  const [sandbox, setSandbox] = useState<SandboxSession | null>(null)
+  const sandboxRef = useRef<SandboxSession | null>(null)
   const [sandboxId, setSandboxId] = useState<string | null>(defaultSandboxId)
+  const [sandboxConnectionHash, setSandboxConnectionHash] = useState<
+    string | null
+  >(null)
   const [previewURL, setPreviewURL] = useState<string | null>(null)
   const [isLoading, setIsLoading] = useState(true)
 
-  useEffect(() => {
-    const initialize = async () => {
-      setIsLoading(true)
-      try {
-        const { sandboxId: newSandboxId, startData } =
-          await connectToServerSandbox(defaultSandboxId)
+  const initialize = async () => {
+    setIsLoading(true)
+    try {
+      const { sandboxId: newSandboxId, startData } =
+        await connectToServerSandbox(sandboxId)
 
-        const connectedSandbox = await connectToSandbox(startData)
-        const newPreviewURL = connectedSandbox.ports.getPreviewUrl(5173)
+      const connectedSandbox = await connectToSandbox(startData)
+      const newPreviewURL = connectedSandbox.ports.getPreviewUrl(5173)
 
-        setPreviewURL(newPreviewURL || null)
-        setSandbox(connectedSandbox)
-        setSandboxId(newSandboxId)
-      } catch (error) {
-        console.error("Failed to initialize sandbox in hook:", error)
-        setSandbox(null)
-        setSandboxId(null)
-        setPreviewURL(null)
-      } finally {
-        setIsLoading(false)
-      }
+      setPreviewURL(newPreviewURL || null)
+      sandboxRef.current = connectedSandbox
+      setSandboxConnectionHash(
+        Math.random().toString(36).substring(2) + Date.now().toString(36),
+      )
+      setSandboxId(newSandboxId)
+    } catch (error) {
+      console.error("Failed to initialize sandbox in hook:", error)
+      sandboxRef.current = null
+      setSandboxId(null)
+      setSandboxConnectionHash(null)
+      setPreviewURL(null)
+    } finally {
+      setIsLoading(false)
     }
+  }
 
+  useEffect(() => {
     initialize()
   }, [defaultSandboxId])
 
-  return { sandbox, sandboxId, previewURL, isLoading }
+  const reconnectSandbox = async () => {
+    if (!sandboxId) return
+    await initialize()
+  }
+
+  return {
+    sandboxRef,
+    sandboxId,
+    previewURL,
+    isSandboxLoading: isLoading,
+    sandboxConnectionHash,
+    reconnectSandbox,
+  }
 }

From 163f99df0baf280d59a366daf4b4a465558ecefd Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Thu, 24 Apr 2025 21:12:18 +0400
Subject: [PATCH 077/143] feat: integrate monaco-jsx-highlighter for enhanced
 JSX support in EditorPane

---
 .../studio/publish/components/EditorPane.tsx  | 158 +++++++++++++++++-
 apps/web/package.json                         |   1 +
 pnpm-lock.yaml                                |  16 ++
 3 files changed, 171 insertions(+), 4 deletions(-)

diff --git a/apps/web/components/features/studio/publish/components/EditorPane.tsx b/apps/web/components/features/studio/publish/components/EditorPane.tsx
index 1c1d848d..36f59a5e 100644
--- a/apps/web/components/features/studio/publish/components/EditorPane.tsx
+++ b/apps/web/components/features/studio/publish/components/EditorPane.tsx
@@ -1,7 +1,86 @@
+"use client"
 import { Loader2Icon } from "lucide-react"
-import Editor from "@monaco-editor/react"
+import Editor, { useMonaco } from "@monaco-editor/react"
 import { getMonacoLanguage } from "../utils"
 import { useTheme } from "next-themes"
+// import parse from "@babel/parser"
+// import traverse from "@babel/traverse"
+
+import dynamic from "next/dynamic"
+import { useEffect } from "react"
+
+const activateMonacoJSXHighlighter = async (monacoEditor, monaco) => {
+  // monaco-jsx-highlighter depends on these in addition to Monaco and an instance of a Monaco Editor.
+  const { default: traverse } = await import("@babel/traverse")
+  const { parse } = await import("@babel/parser")
+  // >>> The star of the show =P >>>
+  const {
+    default: MonacoJSXHighlighter,
+    JSXTypes,
+    makeBabelParse, //By @HaimCandiTech
+  } = await import(
+    // @ts-ignore
+    "monaco-jsx-highlighter" // Note: there is a polyfilled version alongside the regular version.
+  ) // For example, starting with 2.0.2, 2.0.2-polyfilled is also available.
+
+  const parseJSX = makeBabelParse(parse, true) // param0:Babel's parse, param1: default config for JSX syntax (false), TSX (true).
+  // Instantiate the highlighter
+  const monacoJSXHighlighter = new MonacoJSXHighlighter(
+    monaco, // references Range and other APIs
+    parseJSX, // obtains an AST, internally passes to parse options: {...options, sourceType: "module",plugins: ["jsx"],errorRecovery: true}
+    traverse, // helps collecting the JSX expressions within the AST
+    monacoEditor, // highlights the content of that editor via decorations
+  )
+  // Start the JSX highlighting and get the dispose function
+  let disposeJSXHighlighting =
+    monacoJSXHighlighter.highlightOnDidChangeModelContent()
+  // Enhance monaco's editor.action.commentLine with JSX commenting and get its disposer
+  let disposeJSXCommenting = monacoJSXHighlighter.addJSXCommentCommand()
+  // <<< You are all set. >>>
+
+  // Optional: customize the color font in JSX texts (style class JSXElement.JSXText.tastyPizza from ./index.css)
+  JSXTypes.JSXText.options.inlineClassName = "JSXElement.JSXText.tastyPizza"
+  // more details here: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IModelDecorationOptions.html
+  console.log(
+    "Customize each JSX expression type's options, they must match monaco.editor.IModelDecorationOptions:",
+    JSXTypes,
+  )
+
+  // This example's shorthands for toggling actions
+  const toggleJSXHighlighting = () => {
+    if (disposeJSXHighlighting) {
+      disposeJSXHighlighting()
+      disposeJSXHighlighting = null
+      return false
+    }
+
+    disposeJSXHighlighting =
+      monacoJSXHighlighter.highlightOnDidChangeModelContent()
+    return true
+  }
+
+  const toggleJSXCommenting = () => {
+    if (disposeJSXCommenting) {
+      disposeJSXCommenting()
+      disposeJSXCommenting = null
+      return false
+    }
+
+    disposeJSXCommenting = monacoJSXHighlighter.addJSXCommentCommand()
+    return true
+  }
+
+  const isToggleJSXHighlightingOn = () => !!disposeJSXHighlighting
+  const isToggleJSXCommentingOn = () => !!disposeJSXCommenting
+
+  return {
+    monacoJSXHighlighter,
+    toggleJSXHighlighting,
+    toggleJSXCommenting,
+    isToggleJSXHighlightingOn,
+    isToggleJSXCommentingOn,
+  }
+}
 
 interface EditorPaneProps {
   selectedFile: { path: string; type: string } | null
@@ -10,12 +89,80 @@ interface EditorPaneProps {
   isLoading: boolean
 }
 
-export function EditorPane({
+function EditorPaneOriginal({
   selectedFile,
   code,
   onCodeChange,
   isLoading,
 }: EditorPaneProps) {
+  const { resolvedTheme } = useTheme()
+
+  const handleEditorMount = (monacoEditor, monaco) => {
+    const compilerOpts =
+      monaco.languages.typescript.typescriptDefaults.getCompilerOptions()
+
+    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+      ...compilerOpts,
+      allowUnreachableCode: true, // kills TS 7027
+      allowUnusedLabels: true, // usually paired with it
+    })
+
+    // keep JS in sync if you ever switch languages
+    monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+      ...compilerOpts,
+      allowUnreachableCode: true,
+      allowUnusedLabels: true,
+    })
+
+    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+      noSemanticValidation: true,
+      noSyntaxValidation: true,
+    })
+
+    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+      noSemanticValidation: true,
+      noSyntaxValidation: true,
+    })
+
+    activateMonacoJSXHighlighter(monacoEditor, monaco)
+      .then((monacoJSXHighlighterRefCurrent) => {
+        // monacoJSXHighlighterRefCurrent.isToggleJSXCommentingOn()
+        // monacoJSXHighlighterRefCurrent.isToggleJSXHighlightingOn()
+      })
+      .catch((e) => console.log(e))
+  }
+
+  // const handleEditorMount = (editor: any, monaco: Monaco) => {
+  //   const reactTypesURL = fetch(
+  //     "https://unpkg.com/@types/react@19/index.d.ts?raw",
+  //   ).then((res) => res.text())
+  //   const reactDomTypesURL = fetch(
+  //     "https://unpkg.com/@types/react-dom@19/index.d.ts?raw",
+  //   ).then((res) => res.text())
+
+  //   Promise.all([reactTypesURL, reactDomTypesURL]).then(
+  //     ([reactTypes, reactDomTypes]) => {
+  //       console.log(reactTypes, reactDomTypes)
+  //       monaco.languages.typescript.typescriptDefaults.addExtraLib(
+  //         reactTypes,
+  //         "file:///node_modules/@types/react/index.d.ts",
+  //       )
+  //       monaco.languages.typescript.typescriptDefaults.addExtraLib(
+  //         reactDomTypes,
+  //         "file:///node_modules/@types/react-dom/index.d.ts",
+  //       )
+  //     },
+  //   )
+
+  //   const jsxHighlighter = new MonacoJSXHighlighter(
+  //     monaco,
+  //     parse,
+  //     traverse,
+  //     editor,
+  //   )
+  //   jsxHighlighter.highlightOnDidChangeModelContent()
+  // }
+
   if (isLoading) {
     return (
       <div className="h-full flex items-center justify-center">
@@ -34,8 +181,6 @@ export function EditorPane({
     )
   }
 
-  const { resolvedTheme } = useTheme()
-
   return (
     <Editor
       height="100%"
@@ -49,6 +194,7 @@ export function EditorPane({
         wordWrap: "on",
         automaticLayout: true,
       }}
+      onMount={handleEditorMount}
       loading={
         <div className="h-full flex items-center justify-center">
           <Loader2Icon className="h-6 w-6 animate-spin text-primary" />
@@ -57,3 +203,7 @@ export function EditorPane({
     />
   )
 }
+
+export const EditorPane = dynamic(() => Promise.resolve(EditorPaneOriginal), {
+  ssr: false,
+})
diff --git a/apps/web/package.json b/apps/web/package.json
index b7b8ca4e..9280934f 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -76,6 +76,7 @@
     "lodash": "^4.17.21",
     "lucide-react": "^0.446.0",
     "micro": "^10.0.1",
+    "monaco-jsx-highlighter": "^2.77.77",
     "motion": "^11.18.0",
     "next": "15.2.4",
     "next-themes": "^0.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4b7a2291..bd017082 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -307,6 +307,9 @@ importers:
       micro:
         specifier: ^10.0.1
         version: 10.0.1
+      monaco-jsx-highlighter:
+        specifier: ^2.77.77
+        version: 2.77.77(@babel/parser@7.26.1)(@babel/traverse@7.25.9)(monaco-editor@0.52.2)
       motion:
         specifier: ^11.18.0
         version: 11.18.0(react-dom@19.0.0)(react@19.0.0)
@@ -12002,6 +12005,19 @@ packages:
     resolution: {integrity: sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==}
     dev: false
 
+  /monaco-jsx-highlighter@2.77.77(@babel/parser@7.26.1)(@babel/traverse@7.25.9)(monaco-editor@0.52.2):
+    resolution: {integrity: sha512-goQ4bJtcQzxJnqkx6OvXnlt+28SXt3Dnv9t40BEzv2ElJYjp7SpLqVtzZPnSRn8cisxPBLm6reJ76fOwUnaLiA==}
+    engines: {node: '>=10', npm: '>=7'}
+    peerDependencies:
+      '@babel/parser': 6.x || 7.x
+      '@babel/traverse': 6.x || 7.x
+      monaco-editor: '>=0.21'
+    dependencies:
+      '@babel/parser': 7.26.1
+      '@babel/traverse': 7.25.9
+      monaco-editor: 0.52.2
+    dev: false
+
   /motion-dom@11.16.4:
     resolution: {integrity: sha512-2wuCie206pCiP2K23uvwJeci4pMFfyQKpWI0Vy6HrCTDzDCer4TsYtT7IVnuGbDeoIV37UuZiUr6SZMHEc1Vww==}
     dependencies:

From 1acbf0802fab0e907513fbd0f7df5975b03f22f1 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Thu, 24 Apr 2025 21:31:43 +0400
Subject: [PATCH 078/143] advanced view & open directories

---
 .../app/studio/[username]/publish/page.tsx    |  4 ++
 .../publish/components/FileExplorer.tsx       | 41 ++++++++++++++++
 .../studio/publish/components/FileTree.tsx    | 36 +++++++++++++-
 .../studio/publish/hooks/useFileSystem.ts     | 47 ++++++++++++++-----
 4 files changed, 116 insertions(+), 12 deletions(-)

diff --git a/apps/web/app/studio/[username]/publish/page.tsx b/apps/web/app/studio/[username]/publish/page.tsx
index 659c3948..ff136595 100644
--- a/apps/web/app/studio/[username]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/publish/page.tsx
@@ -40,6 +40,8 @@ function PublishPageContent() {
     files,
     isTreeLoading,
     isFileLoading,
+    advancedView,
+    toggleAdvancedView,
     loadRootDirectory,
     loadFileContent,
     saveFileContent,
@@ -191,6 +193,8 @@ function PublishPageContent() {
             onRename={handleRenameEntry}
             onRefresh={loadRootDirectory}
             isLoading={isTreeLoading}
+            advancedView={advancedView}
+            onToggleAdvancedView={toggleAdvancedView}
           />
         </ResizablePanel>
         <ResizableHandle />
diff --git a/apps/web/components/features/studio/publish/components/FileExplorer.tsx b/apps/web/components/features/studio/publish/components/FileExplorer.tsx
index 20d0e32b..6a8adc15 100644
--- a/apps/web/components/features/studio/publish/components/FileExplorer.tsx
+++ b/apps/web/components/features/studio/publish/components/FileExplorer.tsx
@@ -20,11 +20,20 @@ import {
   RefreshCwIcon,
   Loader2Icon,
   FolderPlusIcon,
+  SlidersHorizontal,
 } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Card, CardContent } from "@/components/ui/card"
 import { FileTree } from "./FileTree"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { Switch } from "@/components/ui/switch"
+import { Label } from "@/components/ui/label"
 
 interface FileExplorerProps {
   entries: FileEntry[]
@@ -36,6 +45,8 @@ interface FileExplorerProps {
   onRename: (oldPath: string, newName: string) => Promise<string>
   onRefresh: () => void
   isLoading: boolean
+  advancedView: boolean
+  onToggleAdvancedView: () => void
 }
 
 export function FileExplorer({
@@ -48,11 +59,14 @@ export function FileExplorer({
   onRename,
   onRefresh,
   isLoading,
+  advancedView,
+  onToggleAdvancedView,
 }: FileExplorerProps) {
   const [isCreatingFile, setIsCreatingFile] = useState(false)
   const [newFileName, setNewFileName] = useState("")
   const [isCreatingDirectory, setIsCreatingDirectory] = useState(false)
   const [newDirectoryName, setNewDirectoryName] = useState("")
+  const [showAdvancedToggle, setShowAdvancedToggle] = useState(false)
 
   const handleCreateFile = () => {
     if (newFileName) {
@@ -110,9 +124,36 @@ export function FileExplorer({
               <RefreshCwIcon className="h-4 w-4" />
             )}
           </Button>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  onClick={() => setShowAdvancedToggle((prev) => !prev)}
+                >
+                  <SlidersHorizontal className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Advanced settings</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         </div>
       </div>
 
+      {showAdvancedToggle && (
+        <div className="p-2 border-b flex items-center gap-2">
+          <Switch
+            id="advanced-view"
+            checked={advancedView}
+            onCheckedChange={onToggleAdvancedView}
+          />
+          <Label htmlFor="advanced-view" className="text-sm">
+            Show all files
+          </Label>
+        </div>
+      )}
+
       {isCreatingFile && (
         <div className="p-2 border-b">
           <div className="flex gap-2">
diff --git a/apps/web/components/features/studio/publish/components/FileTree.tsx b/apps/web/components/features/studio/publish/components/FileTree.tsx
index bc7f9f8d..4d342dc3 100644
--- a/apps/web/components/features/studio/publish/components/FileTree.tsx
+++ b/apps/web/components/features/studio/publish/components/FileTree.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import {
   FolderIcon,
   FileIcon,
@@ -482,6 +482,40 @@ export function FileTree({
 }: FileTreeProps) {
   const [expandedDirs, setExpandedDirs] = useState<Record<string, boolean>>({})
 
+  // Function to recursively collect all directory paths
+  const getAllDirectoryPaths = (items: FileEntry[]): string[] => {
+    let paths: string[] = []
+    for (const item of items) {
+      if (item.type === "dir") {
+        paths.push(item.path)
+        if (item.children) {
+          paths = paths.concat(getAllDirectoryPaths(item.children))
+        }
+      }
+    }
+    return paths
+  }
+
+  // Effect to set initial expanded state
+  useEffect(() => {
+    if (entries.length > 0 && !isLoading) {
+      const allDirPaths = getAllDirectoryPaths(entries)
+      const initialExpandedState = allDirPaths.reduce(
+        (acc, path) => {
+          acc[path] = true
+          return acc
+        },
+        {} as Record<string, boolean>,
+      )
+      // Only set state if it hasn't been set before or entries changed significantly
+      // This basic check prevents resetting on minor updates if needed later.
+      if (Object.keys(expandedDirs).length === 0) {
+        setExpandedDirs(initialExpandedState)
+      }
+    }
+    // Run only when entries load or loading state changes from true to false
+  }, [entries, isLoading])
+
   if (isLoading && entries.length === 0) {
     return (
       <div className="flex justify-center items-center py-8">
diff --git a/apps/web/components/features/studio/publish/hooks/useFileSystem.ts b/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
index ac869195..e017dde6 100644
--- a/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
+++ b/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
@@ -3,15 +3,17 @@ import { useState, useEffect, useRef, RefObject } from "react"
 import { toast } from "sonner"
 
 const ROOT_PATH = "/project/sandbox"
-const EXCLUDED_NAMES = [
+
+const ALWAYS_HIDDEN_FILES = [
   "node_modules",
   "dist",
   "yarn.lock",
   "vite-env.d.ts",
   "public",
   "pnpm-lock.yaml",
+]
+const ADVANCED_VIEW_HIDDEN_FILES = [
   "index.html",
-  // "package.json",
   "README.md",
   "vite.config.ts",
   "tsconfig.json",
@@ -47,19 +49,36 @@ const mapReaddirEntryToFileEntry = (
 const loadDirectoryRecursively = async (
   sandbox: SandboxSession,
   path: string,
+  showAdvancedView: boolean,
 ): Promise<FileEntry[]> => {
   const entries = await sandbox.fs.readdir(normalizePath(path))
-  const filteredEntries = entries.filter(
-    (entry) =>
-      !EXCLUDED_NAMES.includes(entry.name) && !entry.name.startsWith("."),
-  )
+  const filteredEntries = entries.filter((entry) => {
+    // Always filter out certain files
+    if (
+      ALWAYS_HIDDEN_FILES.includes(entry.name) ||
+      entry.name.startsWith(".")
+    ) {
+      return false
+    }
+
+    // Filter out advanced view files only if not in advanced mode
+    if (!showAdvancedView && ADVANCED_VIEW_HIDDEN_FILES.includes(entry.name)) {
+      return false
+    }
+
+    return true
+  })
   const fileEntries = filteredEntries.map((entry) =>
     mapReaddirEntryToFileEntry(entry, path),
   )
 
   for (const entry of fileEntries) {
     if (entry.type === "dir") {
-      entry.children = await loadDirectoryRecursively(sandbox, entry.path)
+      entry.children = await loadDirectoryRecursively(
+        sandbox,
+        entry.path,
+        showAdvancedView,
+      )
     }
   }
 
@@ -78,6 +97,7 @@ export const useFileSystem = ({
   const [files, setFiles] = useState<FileEntry[]>([])
   const [isTreeLoading, setIsTreeLoading] = useState(false)
   const [isFileLoading, setIsFileLoading] = useState(false)
+  const [advancedView, setAdvancedView] = useState(false)
   const debounceRef = useRef<NodeJS.Timeout | null>(null)
 
   const fsWrapper = async <T>(
@@ -103,9 +123,8 @@ export const useFileSystem = ({
     setIsTreeLoading(true)
     try {
       const rootEntries = await fsWrapper((sandbox) =>
-        loadDirectoryRecursively(sandbox, ROOT_PATH),
+        loadDirectoryRecursively(sandbox, ROOT_PATH, advancedView),
       )
-      console.log("rootEntries", rootEntries)
       if (rootEntries) setFiles(rootEntries)
     } catch (error) {
       console.error("Failed to load root directory:", error)
@@ -118,7 +137,7 @@ export const useFileSystem = ({
 
   useEffect(() => {
     loadRootDirectory()
-  }, [sandboxConnectionHash])
+  }, [sandboxConnectionHash, advancedView])
 
   const loadFileContent = async (filePath: string): Promise<string> => {
     setIsFileLoading(true)
@@ -155,7 +174,7 @@ export const useFileSystem = ({
   const createFile = async (filePath: string) => {
     try {
       await fsWrapper((sandbox) =>
-        sandbox.fs.writeTextFile(normalizePath(filePath), ""),
+        sandbox.fs.writeTextFile(normalizePath(filePath), "// TODO: Add code"),
       )
       await loadRootDirectory()
     } catch (error) {
@@ -216,10 +235,16 @@ export const useFileSystem = ({
     }
   }
 
+  const toggleAdvancedView = () => {
+    setAdvancedView((prev) => !prev)
+  }
+
   return {
     files,
     isTreeLoading,
     isFileLoading,
+    advancedView,
+    toggleAdvancedView,
     loadRootDirectory,
     loadFileContent,
     saveFileContent,

From 8c53f11b033bddfbb07ee65d53187a80b7dad7c8 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Thu, 24 Apr 2025 23:13:14 +0400
Subject: [PATCH 079/143] refactor: simplify PublishPage by removing preview
 toggle and integrating PreviewPane directly

---
 .../app/studio/[username]/publish/page.tsx    |  40 ++----
 .../studio/publish/components/PreviewPane.tsx | 115 ++++++++++++++++--
 .../publish/components/PublishHeader.tsx      |  24 +---
 .../studio/publish/hooks/useSandbox.ts        |  10 +-
 4 files changed, 126 insertions(+), 63 deletions(-)

diff --git a/apps/web/app/studio/[username]/publish/page.tsx b/apps/web/app/studio/[username]/publish/page.tsx
index ff136595..7ec8abc7 100644
--- a/apps/web/app/studio/[username]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/publish/page.tsx
@@ -23,7 +23,6 @@ function PublishPageContent() {
   const router = useRouter()
   const [selectedEntry, setSelectedEntry] = useState<FileEntry | null>(null)
   const [code, setCode] = useState<string>("")
-  const [isPreviewVisible, setIsPreviewVisible] = useState(true)
 
   const {
     sandboxRef,
@@ -146,10 +145,6 @@ function PublishPageContent() {
     window.location.reload()
   }
 
-  const togglePreviewVisibility = () => {
-    setIsPreviewVisible((prev) => !prev)
-  }
-
   if (isSandboxLoading) {
     return (
       <div className="h-screen w-full flex items-center justify-center">
@@ -174,12 +169,7 @@ function PublishPageContent() {
 
   return (
     <div className="h-screen w-full flex flex-col">
-      <PublishHeader
-        sandboxId={sandboxId}
-        onReset={handleReset}
-        isPreviewVisible={isPreviewVisible}
-        onTogglePreview={togglePreviewVisibility}
-      />
+      <PublishHeader sandboxId={sandboxId} onReset={handleReset} />
 
       <ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
         <ResizablePanel defaultSize={20} minSize={15} className="border-r">
@@ -199,27 +189,13 @@ function PublishPageContent() {
         </ResizablePanel>
         <ResizableHandle />
         <ResizablePanel defaultSize={80} minSize={20}>
-          <ResizablePanelGroup direction="horizontal" className="h-full">
-            <ResizablePanel
-              defaultSize={isPreviewVisible ? 50 : 100}
-              minSize={30}
-            >
-              <EditorPane
-                selectedFile={selectedEntry}
-                code={code}
-                onCodeChange={handleCodeChange}
-                isLoading={isFileLoading}
-              />
-            </ResizablePanel>
-            {isPreviewVisible && (
-              <>
-                <ResizableHandle />
-                <ResizablePanel defaultSize={50} minSize={30}>
-                  <PreviewPane previewURL={previewURL} />
-                </ResizablePanel>
-              </>
-            )}
-          </ResizablePanelGroup>
+          <PreviewPane
+            previewURL={previewURL}
+            selectedFile={selectedEntry}
+            code={code}
+            onCodeChange={handleCodeChange}
+            isFileLoading={isFileLoading}
+          />
         </ResizablePanel>
       </ResizablePanelGroup>
     </div>
diff --git a/apps/web/components/features/studio/publish/components/PreviewPane.tsx b/apps/web/components/features/studio/publish/components/PreviewPane.tsx
index 068a0846..84bc0f39 100644
--- a/apps/web/components/features/studio/publish/components/PreviewPane.tsx
+++ b/apps/web/components/features/studio/publish/components/PreviewPane.tsx
@@ -1,15 +1,114 @@
+import { useState } from "react"
+import { RefreshCw, PanelRightOpen, PanelRightClose } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable"
+import { EditorPane } from "./EditorPane"
+import { cn } from "@/lib/utils"
+
 interface PreviewPaneProps {
   previewURL: string | null
+  isPreviewVisible?: boolean
+  selectedFile?: any
+  code?: string
+  onCodeChange?: (value: string) => void
+  isFileLoading?: boolean
 }
 
-export function PreviewPane({ previewURL }: PreviewPaneProps) {
-  if (!previewURL) {
-    return (
-      <div className="h-full flex items-center justify-center text-muted-foreground">
-        Waiting for dev server...
-      </div>
-    )
+export function PreviewPane({
+  previewURL,
+  isPreviewVisible = true,
+  selectedFile = null,
+  code = "",
+  onCodeChange = () => {},
+  isFileLoading = false,
+}: PreviewPaneProps) {
+  const [iframeKey, setIframeKey] = useState<number>(0)
+  const [showPreview, setShowPreview] = useState<boolean>(isPreviewVisible)
+
+  const handleRefresh = () => {
+    setIframeKey((prev) => prev + 1)
   }
 
-  return <iframe src={previewURL} className="w-full h-full border rounded" />
+  const togglePreview = () => {
+    setShowPreview((prev) => !prev)
+  }
+
+  return (
+    <div className="relative h-full">
+      <ResizablePanelGroup direction="horizontal" className="h-full">
+        <ResizablePanel defaultSize={showPreview ? 50 : 100} minSize={30}>
+          <EditorPane
+            selectedFile={selectedFile}
+            code={code}
+            onCodeChange={onCodeChange}
+            isLoading={isFileLoading}
+          />
+        </ResizablePanel>
+        {showPreview && (
+          <>
+            <ResizableHandle />
+            <ResizablePanel defaultSize={50} minSize={30}>
+              <div className="flex flex-col h-full">
+                <div className="flex items-center justify-between px-3 py-2 border-b bg-muted/40">
+                  <div className="text-sm h-7 font-medium mt-2 ">Preview</div>
+                </div>
+                {!previewURL ? (
+                  <div className="h-full flex items-center justify-center text-muted-foreground">
+                    Waiting for dev server...
+                  </div>
+                ) : (
+                  <iframe
+                    key={iframeKey}
+                    src={previewURL}
+                    className="w-full h-full border rounded-b"
+                  />
+                )}
+              </div>
+            </ResizablePanel>
+          </>
+        )}
+      </ResizablePanelGroup>
+
+      <div className="absolute right-4 top-2 z-10 flex gap-2">
+        {showPreview && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleRefresh}
+            title="Reload preview"
+            className="bg-background/80 backdrop-blur-sm shadow-sm border"
+          >
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Reload
+          </Button>
+        )}
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={togglePreview}
+          title={showPreview ? "Hide Preview" : "Show Preview"}
+          className={cn(
+            "bg-background/80 backdrop-blur-sm shadow-sm border transition-colors",
+            !showPreview && "border-primary text-primary",
+          )}
+        >
+          {showPreview ? (
+            <>
+              <PanelRightClose className="h-4 w-4 mr-2" />
+              Hide Preview
+            </>
+          ) : (
+            <>
+              <PanelRightOpen className="h-4 w-4 mr-2" />
+              Show Preview
+            </>
+          )}
+        </Button>
+      </div>
+    </div>
+  )
 }
diff --git a/apps/web/components/features/studio/publish/components/PublishHeader.tsx b/apps/web/components/features/studio/publish/components/PublishHeader.tsx
index 44af6c15..fd664361 100644
--- a/apps/web/components/features/studio/publish/components/PublishHeader.tsx
+++ b/apps/web/components/features/studio/publish/components/PublishHeader.tsx
@@ -1,19 +1,11 @@
 import { Button } from "@/components/ui/button"
-import { PanelRightOpen, PanelRightClose } from "lucide-react"
 
 interface PublishHeaderProps {
   sandboxId: string | null
   onReset: () => void
-  isPreviewVisible: boolean
-  onTogglePreview: () => void
 }
 
-export function PublishHeader({
-  sandboxId,
-  onReset,
-  isPreviewVisible,
-  onTogglePreview,
-}: PublishHeaderProps) {
+export function PublishHeader({ sandboxId, onReset }: PublishHeaderProps) {
   return (
     <header className="flex items-center gap-2 p-4 border-b">
       <h1 className="text-2xl font-bold">Publish Your Sandbox</h1>
@@ -21,20 +13,8 @@ export function PublishHeader({
         <span className="text-xs text-muted-foreground ml-2">{sandboxId}</span>
       )}
       <div className="ml-auto flex items-center gap-2">
-        <Button
-          size="sm"
-          variant="ghost"
-          onClick={onTogglePreview}
-          title={isPreviewVisible ? "Hide Preview" : "Show Preview"}
-        >
-          {isPreviewVisible ? (
-            <PanelRightClose className="h-4 w-4" />
-          ) : (
-            <PanelRightOpen className="h-4 w-4" />
-          )}
-        </Button>
         <Button size="sm" onClick={onReset}>
-          Reset
+          Publish
         </Button>
       </div>
     </header>
diff --git a/apps/web/components/features/studio/publish/hooks/useSandbox.ts b/apps/web/components/features/studio/publish/hooks/useSandbox.ts
index 40da8a86..f32a6ca6 100644
--- a/apps/web/components/features/studio/publish/hooks/useSandbox.ts
+++ b/apps/web/components/features/studio/publish/hooks/useSandbox.ts
@@ -25,8 +25,16 @@ export const useSandbox = ({
       const connectedSandbox = await connectToSandbox(startData)
       const newPreviewURL = connectedSandbox.ports.getPreviewUrl(5173)
 
-      setPreviewURL(newPreviewURL || null)
       sandboxRef.current = connectedSandbox
+
+      setInterval(() => {
+        const newPreviewURL = sandboxRef.current?.ports.getPreviewUrl(5173)
+        console.log("newPreviewURL", newPreviewURL)
+        setPreviewURL(newPreviewURL || null)
+      }, 1000 * 5)
+
+      setPreviewURL(newPreviewURL || null)
+
       setSandboxConnectionHash(
         Math.random().toString(36).substring(2) + Date.now().toString(36),
       )

From 035ebbf60e74400603f32f6e806384b17689951b Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Fri, 25 Apr 2025 00:42:20 +0400
Subject: [PATCH 080/143] add: nice resizable

---
 .../app/studio/[username]/publish/page.tsx    |   1 -
 .../studio/publish/components/EditorPane.tsx  |   7 ++
 apps/web/components/ui/resizable.tsx          | 116 ++++++------------
 apps/web/package.json                         |   1 +
 pnpm-lock.yaml                                |  13 ++
 5 files changed, 56 insertions(+), 82 deletions(-)

diff --git a/apps/web/app/studio/[username]/publish/page.tsx b/apps/web/app/studio/[username]/publish/page.tsx
index 7ec8abc7..1608e817 100644
--- a/apps/web/app/studio/[username]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/publish/page.tsx
@@ -8,7 +8,6 @@ import {
   ResizablePanel,
 } from "@/components/ui/resizable"
 import { FileExplorer } from "@/components/features/studio/publish/components/FileExplorer"
-import { EditorPane } from "@/components/features/studio/publish/components/EditorPane"
 import { PreviewPane } from "@/components/features/studio/publish/components/PreviewPane"
 import { PublishHeader } from "@/components/features/studio/publish/components/PublishHeader"
 import { Loader2Icon } from "lucide-react"
diff --git a/apps/web/components/features/studio/publish/components/EditorPane.tsx b/apps/web/components/features/studio/publish/components/EditorPane.tsx
index 36f59a5e..fdc73937 100644
--- a/apps/web/components/features/studio/publish/components/EditorPane.tsx
+++ b/apps/web/components/features/studio/publish/components/EditorPane.tsx
@@ -188,11 +188,18 @@ function EditorPaneOriginal({
       value={code}
       onChange={(value) => onCodeChange(value || "")}
       theme={resolvedTheme === "dark" ? "vs-dark" : "vs"}
+      className="oveflow-hidden"
       options={{
         minimap: { enabled: false },
         fontSize: 14,
         wordWrap: "on",
         automaticLayout: true,
+        scrollbar: {
+          verticalScrollbarSize: 5,
+        },
+        overviewRulerLanes: 5,
+        hideCursorInOverviewRuler: true,
+        overviewRulerBorder: false,
       }}
       onMount={handleEditorMount}
       loading={
diff --git a/apps/web/components/ui/resizable.tsx b/apps/web/components/ui/resizable.tsx
index edcda86b..2f83b002 100644
--- a/apps/web/components/ui/resizable.tsx
+++ b/apps/web/components/ui/resizable.tsx
@@ -1,90 +1,44 @@
 "use client"
+import * as ResizablePrimitive from "react-resizable-panels"
 
-import React, { createContext, useContext, useEffect, useState } from "react"
 import { cn } from "@/lib/utils"
+import { DragHandleDots2Icon } from "@radix-ui/react-icons"
 
-interface ResizablePanelGroupProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  direction: "horizontal" | "vertical"
-  children: React.ReactNode
-}
-
-interface ResizablePanelProps extends React.HTMLAttributes<HTMLDivElement> {
-  defaultSize?: number
-  minSize?: number
-  children: React.ReactNode
-}
-
-const ResizableContext = createContext<{
-  direction: "horizontal" | "vertical"
-}>({
-  direction: "horizontal",
-})
-
-export function ResizablePanelGroup({
-  direction,
+const ResizablePanelGroup = ({
   className,
-  children,
   ...props
-}: ResizablePanelGroupProps) {
-  return (
-    <ResizableContext.Provider value={{ direction }}>
-      <div
-        className={cn(
-          "flex",
-          direction === "horizontal" ? "flex-row" : "flex-col",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    </ResizableContext.Provider>
-  )
-}
-
-export function ResizablePanel({
-  defaultSize = 50,
-  minSize = 10,
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
   className,
-  children,
   ...props
-}: ResizablePanelProps) {
-  const { direction } = useContext(ResizableContext)
-  const [size, setSize] = useState(defaultSize)
-
-  return (
-    <div
-      className={cn("relative", className)}
-      style={{
-        [direction === "horizontal" ? "width" : "height"]: `${size}%`,
-        [direction === "horizontal" ? "minWidth" : "minHeight"]: `${minSize}%`,
-      }}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
-
-export function ResizableHandle() {
-  const { direction } = useContext(ResizableContext)
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <DragHandleDots2Icon className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
 
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-center bg-border",
-        direction === "horizontal"
-          ? "w-[6px] cursor-col-resize h-full"
-          : "h-[6px] cursor-row-resize w-full",
-      )}
-    >
-      <div
-        className={cn(
-          "bg-muted-foreground rounded-full",
-          direction === "horizontal" ? "w-1 h-12" : "h-1 w-12",
-        )}
-      />
-    </div>
-  )
-}
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/apps/web/package.json b/apps/web/package.json
index 9280934f..e04dc425 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -89,6 +89,7 @@
     "react-dropzone": "^14.2.9",
     "react-hook-form": "^7.53.1",
     "react-hotkeys-hook": "^4.6.1",
+    "react-resizable-panels": "^2.1.8",
     "resend": "^4.1.2",
     "shiki": "^3.0.0",
     "sonner": "^1.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bd017082..fe5c8e28 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -346,6 +346,9 @@ importers:
       react-hotkeys-hook:
         specifier: ^4.6.1
         version: 4.6.1(react-dom@19.0.0)(react@19.0.0)
+      react-resizable-panels:
+        specifier: ^2.1.8
+        version: 2.1.8(react-dom@19.0.0)(react@19.0.0)
       resend:
         specifier: ^4.1.2
         version: 4.1.2(react-dom@19.0.0)(react@19.0.0)
@@ -13162,6 +13165,16 @@ packages:
       use-sidecar: 1.1.3(@types/react@19.0.10)(react@19.0.0)
     dev: false
 
+  /react-resizable-panels@2.1.8(react-dom@19.0.0)(react@19.0.0):
+    resolution: {integrity: sha512-oDvD0sw34Ecx00cQFLiRJpAE2fCgNLBr8DMrBzkrsaUiLpAycIQoY3eAWfMblDql3pTIMZ60wJ/P89RO1htM2w==}
+    peerDependencies:
+      react: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    dependencies:
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+    dev: false
+
   /react-smooth@4.0.4(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==}
     peerDependencies:

From 405d44cc3622928ffe592d0dd690737c0e6e6427 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Fri, 25 Apr 2025 00:43:22 +0400
Subject: [PATCH 081/143] refactor: enhance sandbox initialization logic to
 manage loading state during reconnections

---
 .../studio/publish/hooks/useSandbox.ts        | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/apps/web/components/features/studio/publish/hooks/useSandbox.ts b/apps/web/components/features/studio/publish/hooks/useSandbox.ts
index f32a6ca6..0b68f1a2 100644
--- a/apps/web/components/features/studio/publish/hooks/useSandbox.ts
+++ b/apps/web/components/features/studio/publish/hooks/useSandbox.ts
@@ -16,8 +16,10 @@ export const useSandbox = ({
   const [previewURL, setPreviewURL] = useState<string | null>(null)
   const [isLoading, setIsLoading] = useState(true)
 
-  const initialize = async () => {
-    setIsLoading(true)
+  const initialize = async (isReconnecting = false) => {
+    if (!isReconnecting) {
+      setIsLoading(true)
+    }
     try {
       const { sandboxId: newSandboxId, startData } =
         await connectToServerSandbox(sandboxId)
@@ -27,11 +29,11 @@ export const useSandbox = ({
 
       sandboxRef.current = connectedSandbox
 
-      setInterval(() => {
-        const newPreviewURL = sandboxRef.current?.ports.getPreviewUrl(5173)
-        console.log("newPreviewURL", newPreviewURL)
-        setPreviewURL(newPreviewURL || null)
-      }, 1000 * 5)
+      // setInterval(() => {
+      //   const newPreviewURL = sandboxRef.current?.ports.getPreviewUrl(5173)
+      //   console.log("newPreviewURL", newPreviewURL)
+      //   setPreviewURL(newPreviewURL || null)
+      // }, 1000 * 5)
 
       setPreviewURL(newPreviewURL || null)
 
@@ -46,12 +48,14 @@ export const useSandbox = ({
       setSandboxConnectionHash(null)
       setPreviewURL(null)
     } finally {
-      setIsLoading(false)
+      if (!isReconnecting) {
+        setIsLoading(false)
+      }
     }
   }
 
   useEffect(() => {
-    initialize()
+    initialize(true)
   }, [defaultSandboxId])
 
   const reconnectSandbox = async () => {

From 5188c2ccafd5178e33856d1c54969e1faa0a62c4 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Fri, 25 Apr 2025 01:28:13 +0400
Subject: [PATCH 082/143] chore: enable noUnusedLocals and noUnusedParameters
 in TypeScript compiler options

---
 .../features/studio/publish/components/EditorPane.tsx         | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/web/components/features/studio/publish/components/EditorPane.tsx b/apps/web/components/features/studio/publish/components/EditorPane.tsx
index fdc73937..26645be0 100644
--- a/apps/web/components/features/studio/publish/components/EditorPane.tsx
+++ b/apps/web/components/features/studio/publish/components/EditorPane.tsx
@@ -105,6 +105,8 @@ function EditorPaneOriginal({
       ...compilerOpts,
       allowUnreachableCode: true, // kills TS 7027
       allowUnusedLabels: true, // usually paired with it
+      noUnusedLocals: true,
+      noUnusedParameters: true,
     })
 
     // keep JS in sync if you ever switch languages
@@ -112,6 +114,8 @@ function EditorPaneOriginal({
       ...compilerOpts,
       allowUnreachableCode: true,
       allowUnusedLabels: true,
+      noUnusedLocals: true,
+      noUnusedParameters: true,
     })
 
     monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({

From 021a79d0ce304e4e0b4624e3d3b9c45ea00ed0a2 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Fri, 25 Apr 2025 01:28:20 +0400
Subject: [PATCH 083/143] refactor: streamline sandbox initialization by
 removing redundant parameter

---
 .../components/features/studio/publish/hooks/useSandbox.ts   | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/web/components/features/studio/publish/hooks/useSandbox.ts b/apps/web/components/features/studio/publish/hooks/useSandbox.ts
index 0b68f1a2..f64f3950 100644
--- a/apps/web/components/features/studio/publish/hooks/useSandbox.ts
+++ b/apps/web/components/features/studio/publish/hooks/useSandbox.ts
@@ -26,7 +26,6 @@ export const useSandbox = ({
 
       const connectedSandbox = await connectToSandbox(startData)
       const newPreviewURL = connectedSandbox.ports.getPreviewUrl(5173)
-
       sandboxRef.current = connectedSandbox
 
       // setInterval(() => {
@@ -55,12 +54,12 @@ export const useSandbox = ({
   }
 
   useEffect(() => {
-    initialize(true)
+    initialize()
   }, [defaultSandboxId])
 
   const reconnectSandbox = async () => {
     if (!sandboxId) return
-    await initialize()
+    await initialize(true)
   }
 
   return {

From 9a4f029e756210a0700f28e4d07b68c8d3a20b36 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Fri, 25 Apr 2025 01:42:51 +0400
Subject: [PATCH 084/143] advanced view styles

---
 .../publish/components/FileExplorer.tsx       | 55 +++++++++++--------
 .../studio/publish/hooks/useFileSystem.ts     | 14 +++--
 2 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/apps/web/components/features/studio/publish/components/FileExplorer.tsx b/apps/web/components/features/studio/publish/components/FileExplorer.tsx
index 6a8adc15..8203b5f4 100644
--- a/apps/web/components/features/studio/publish/components/FileExplorer.tsx
+++ b/apps/web/components/features/studio/publish/components/FileExplorer.tsx
@@ -20,20 +20,20 @@ import {
   RefreshCwIcon,
   Loader2Icon,
   FolderPlusIcon,
-  SlidersHorizontal,
+  EyeIcon,
+  EyeOffIcon,
 } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Card, CardContent } from "@/components/ui/card"
 import { FileTree } from "./FileTree"
+import { cn } from "@/lib/utils"
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
-import { Switch } from "@/components/ui/switch"
-import { Label } from "@/components/ui/label"
 
 interface FileExplorerProps {
   entries: FileEntry[]
@@ -66,7 +66,6 @@ export function FileExplorer({
   const [newFileName, setNewFileName] = useState("")
   const [isCreatingDirectory, setIsCreatingDirectory] = useState(false)
   const [newDirectoryName, setNewDirectoryName] = useState("")
-  const [showAdvancedToggle, setShowAdvancedToggle] = useState(false)
 
   const handleCreateFile = () => {
     if (newFileName) {
@@ -112,7 +111,7 @@ export function FileExplorer({
           >
             <FolderPlusIcon className="h-4 w-4" />
           </Button>
-          <Button
+          {/* <Button
             size="icon"
             variant="ghost"
             onClick={onRefresh}
@@ -123,37 +122,45 @@ export function FileExplorer({
             ) : (
               <RefreshCwIcon className="h-4 w-4" />
             )}
-          </Button>
+          </Button> */}
           <TooltipProvider>
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
-                  size="icon"
-                  variant="ghost"
-                  onClick={() => setShowAdvancedToggle((prev) => !prev)}
+                  variant="outline"
+                  size="sm"
+                  onClick={onToggleAdvancedView}
+                  className={cn(
+                    "bg-background/80 backdrop-blur-sm shadow-sm border transition-colors",
+                  )}
                 >
-                  <SlidersHorizontal className="h-4 w-4" />
+                  {advancedView ? (
+                    <>
+                      <EyeIcon className="h-4 w-4 mr-2" />
+                      Simple view
+                    </>
+                  ) : (
+                    <>
+                      <EyeOffIcon className="h-4 w-4 mr-2" />
+                      Advanced view
+                    </>
+                  )}
                 </Button>
               </TooltipTrigger>
-              <TooltipContent>Advanced settings</TooltipContent>
+              <TooltipContent
+                side="bottom"
+                align="end"
+                className="max-w-[220px]"
+              >
+                {advancedView
+                  ? "Switch to Simple view: only shows files that you need"
+                  : "Switch to Advanced view: shows files that are used under the hood"}
+              </TooltipContent>
             </Tooltip>
           </TooltipProvider>
         </div>
       </div>
 
-      {showAdvancedToggle && (
-        <div className="p-2 border-b flex items-center gap-2">
-          <Switch
-            id="advanced-view"
-            checked={advancedView}
-            onCheckedChange={onToggleAdvancedView}
-          />
-          <Label htmlFor="advanced-view" className="text-sm">
-            Show all files
-          </Label>
-        </div>
-      )}
-
       {isCreatingFile && (
         <div className="p-2 border-b">
           <div className="flex gap-2">
diff --git a/apps/web/components/features/studio/publish/hooks/useFileSystem.ts b/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
index e017dde6..3284cd2a 100644
--- a/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
+++ b/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
@@ -11,14 +11,19 @@ const ALWAYS_HIDDEN_FILES = [
   "vite-env.d.ts",
   "public",
   "pnpm-lock.yaml",
-]
-const ADVANCED_VIEW_HIDDEN_FILES = [
-  "index.html",
-  "README.md",
   "vite.config.ts",
   "tsconfig.json",
   "tsconfig.node.json",
+  "index.html",
   "main.tsx",
+  "README.md",
+  "components.json",
+]
+const ADVANCED_VIEW_HIDDEN_FILES = [
+  "package.json",
+  "app.tsx",
+  "lib",
+  "components",
 ]
 
 export interface FileEntry {
@@ -52,6 +57,7 @@ const loadDirectoryRecursively = async (
   showAdvancedView: boolean,
 ): Promise<FileEntry[]> => {
   const entries = await sandbox.fs.readdir(normalizePath(path))
+
   const filteredEntries = entries.filter((entry) => {
     // Always filter out certain files
     if (

From 4057133cfdd00c73886c097b7c6cb0502f0ad480 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Fri, 25 Apr 2025 01:53:34 +0400
Subject: [PATCH 085/143] fix: set default selected file entry in PublishPage
 and improve expandedDirs state management in FileTree

---
 apps/web/app/studio/[username]/publish/page.tsx      | 11 ++++++++++-
 .../features/studio/publish/components/FileTree.tsx  | 12 ++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/apps/web/app/studio/[username]/publish/page.tsx b/apps/web/app/studio/[username]/publish/page.tsx
index 1608e817..9b166e78 100644
--- a/apps/web/app/studio/[username]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/publish/page.tsx
@@ -17,10 +17,19 @@ import {
   type FileEntry,
 } from "@/components/features/studio/publish/hooks/useFileSystem"
 
+const DEFAULT_FILE_ENTRY: FileEntry = {
+  name: "component.tsx",
+  path: "/src/component.tsx",
+  type: "file",
+  isSymlink: false,
+}
+
 function PublishPageContent() {
   const searchParams = useSearchParams()
   const router = useRouter()
-  const [selectedEntry, setSelectedEntry] = useState<FileEntry | null>(null)
+  const [selectedEntry, setSelectedEntry] = useState<FileEntry | null>(
+    DEFAULT_FILE_ENTRY,
+  )
   const [code, setCode] = useState<string>("")
 
   const {
diff --git a/apps/web/components/features/studio/publish/components/FileTree.tsx b/apps/web/components/features/studio/publish/components/FileTree.tsx
index 4d342dc3..a0d3009c 100644
--- a/apps/web/components/features/studio/publish/components/FileTree.tsx
+++ b/apps/web/components/features/studio/publish/components/FileTree.tsx
@@ -507,13 +507,17 @@ export function FileTree({
         },
         {} as Record<string, boolean>,
       )
-      // Only set state if it hasn't been set before or entries changed significantly
-      // This basic check prevents resetting on minor updates if needed later.
-      if (Object.keys(expandedDirs).length === 0) {
+
+      // Reset expanded state when entries structure changes significantly
+      const currentDirPaths = Object.keys(expandedDirs)
+      const entriesChanged =
+        allDirPaths.length !== currentDirPaths.length ||
+        allDirPaths.some((path) => !currentDirPaths.includes(path))
+
+      if (Object.keys(expandedDirs).length === 0 || entriesChanged) {
         setExpandedDirs(initialExpandedState)
       }
     }
-    // Run only when entries load or loading state changes from true to false
   }, [entries, isLoading])
 
   if (isLoading && entries.length === 0) {

From 24fd421d31a999133e9f2435cb37dae75944978a Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Fri, 25 Apr 2025 02:16:34 +0400
Subject: [PATCH 086/143] refactor

---
 .../publish/components/FileExplorer.tsx       |   1 +
 .../studio/publish/components/FileTree.tsx    | 738 ++++++++++--------
 2 files changed, 397 insertions(+), 342 deletions(-)

diff --git a/apps/web/components/features/studio/publish/components/FileExplorer.tsx b/apps/web/components/features/studio/publish/components/FileExplorer.tsx
index 8203b5f4..35d83b9f 100644
--- a/apps/web/components/features/studio/publish/components/FileExplorer.tsx
+++ b/apps/web/components/features/studio/publish/components/FileExplorer.tsx
@@ -133,6 +133,7 @@ export function FileExplorer({
                   className={cn(
                     "bg-background/80 backdrop-blur-sm shadow-sm border transition-colors",
                   )}
+                  disabled={isLoading}
                 >
                   {advancedView ? (
                     <>
diff --git a/apps/web/components/features/studio/publish/components/FileTree.tsx b/apps/web/components/features/studio/publish/components/FileTree.tsx
index a0d3009c..423e5d46 100644
--- a/apps/web/components/features/studio/publish/components/FileTree.tsx
+++ b/apps/web/components/features/studio/publish/components/FileTree.tsx
@@ -36,20 +36,217 @@ interface FileTreeProps {
   onRename?: (oldPath: string, newName: string) => Promise<string>
 }
 
-interface FileTreeItemProps {
+// Reusable input form for file/directory creation and renaming
+function InlineInputForm({
+  placeholder,
+  value,
+  onChange,
+  onSubmit,
+  onCancel,
+  buttonText = "Create",
+  autoFocus = true,
+}: {
+  placeholder?: string
+  value: string
+  onChange: (value: string) => void
+  onSubmit: () => void
+  onCancel: () => void
+  buttonText?: string
+  autoFocus?: boolean
+}) {
+  return (
+    <div className="flex gap-1 py-1">
+      <Input
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") onSubmit()
+          if (e.key === "Escape") onCancel()
+        }}
+        className="h-6 text-xs"
+        autoFocus={autoFocus}
+        onBlur={() => setTimeout(onCancel, 150)}
+      />
+      <Button size="sm" onClick={onSubmit} disabled={!value}>
+        {buttonText}
+      </Button>
+    </div>
+  )
+}
+
+// Action buttons for file/directory operations
+function TreeItemActions({
+  showActions,
+  onRename,
+  onDelete,
+  onCreateFile,
+  onCreateDirectory,
+  itemType,
+  itemName,
+}: {
+  showActions: boolean
+  onRename?: () => void
+  onDelete: () => void
+  onCreateFile?: () => void
+  onCreateDirectory?: () => void
+  itemType: "file" | "dir"
+  itemName: string
+}) {
+  const actionClasses = `transition-opacity ${
+    showActions ? "opacity-100" : "opacity-0 group-hover/item:opacity-100"
+  }`
+
+  return (
+    <div className={`flex items-center gap-1 action-icon ${actionClasses}`}>
+      {onRename && (
+        <Button
+          size="icon"
+          variant="ghost"
+          className="h-5 w-5"
+          onClick={onRename}
+          title={`Rename ${itemType}`}
+        >
+          <PencilIcon className="h-3 w-3 text-muted-foreground" />
+        </Button>
+      )}
+
+      {itemType === "dir" && onCreateFile && (
+        <Button
+          size="icon"
+          variant="ghost"
+          className="h-5 w-5"
+          onClick={onCreateFile}
+          title="Create file"
+        >
+          <FilePlusIcon className="h-3 w-3 text-muted-foreground" />
+        </Button>
+      )}
+
+      {itemType === "dir" && onCreateDirectory && (
+        <Button
+          size="icon"
+          variant="ghost"
+          className="h-5 w-5"
+          onClick={onCreateDirectory}
+          title="Create directory"
+        >
+          <FolderPlusIcon className="h-3 w-3 text-muted-foreground" />
+        </Button>
+      )}
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            size="icon"
+            variant="ghost"
+            className="h-5 w-5"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <TrashIcon className="h-3 w-3 text-muted-foreground" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem
+            className="text-destructive focus:text-destructive"
+            onClick={onDelete}
+          >
+            Delete {itemType}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}
+
+// Component for file entries
+function FileItem({
+  entry,
+  level,
+  onSelect,
+  selectedPath,
+  onDelete,
+  onRename,
+}: {
   entry: FileEntry
   level: number
   onSelect: (entry: FileEntry) => void
   selectedPath: string | null
   onDelete: (filePath: string) => void
-  onCreateFile: (filePath: string) => void
-  onCreateDirectory: (dirPath: string) => void
   onRename?: (oldPath: string, newName: string) => Promise<string>
-  expandedDirs: Record<string, boolean>
-  setExpandedDirs: React.Dispatch<React.SetStateAction<Record<string, boolean>>>
+}) {
+  const [isRenaming, setIsRenaming] = useState(false)
+  const [newName, setNewName] = useState(entry.name)
+  const [showActions, setShowActions] = useState(false)
+
+  const handleRename = async () => {
+    if (newName && newName !== entry.name && onRename) {
+      try {
+        await onRename(entry.path, newName)
+      } catch (error) {
+        // Error handling is done in the hook
+      }
+      setIsRenaming(false)
+    } else {
+      setIsRenaming(false)
+    }
+  }
+
+  const startRename = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setNewName(entry.name)
+    setIsRenaming(true)
+  }
+
+  const cancelRename = () => {
+    setIsRenaming(false)
+  }
+
+  return (
+    <li
+      className="py-0.5 group/item"
+      onMouseEnter={() => setShowActions(true)}
+      onMouseLeave={() => !isRenaming && setShowActions(false)}
+      style={{ paddingLeft: `${level * 1}rem` }}
+    >
+      {isRenaming ? (
+        <InlineInputForm
+          value={newName}
+          onChange={setNewName}
+          onSubmit={handleRename}
+          onCancel={cancelRename}
+          buttonText="Rename"
+        />
+      ) : (
+        <div className="flex items-center justify-between">
+          <button
+            className={`flex items-center flex-1 text-left px-2 py-1 hover:bg-muted rounded truncate ${
+              selectedPath === entry.path ? "bg-accent font-medium" : ""
+            }`}
+            onClick={() => onSelect(entry)}
+            title={entry.path}
+          >
+            <FileIcon className="h-4 w-4 mr-1 text-gray-500 flex-shrink-0" />
+            {entry.name}
+          </button>
+
+          <TreeItemActions
+            showActions={showActions}
+            onRename={() =>
+              startRename({ stopPropagation: () => {} } as React.MouseEvent)
+            }
+            onDelete={() => onDelete(entry.path)}
+            itemType="file"
+            itemName={entry.name}
+          />
+        </div>
+      )}
+    </li>
+  )
 }
 
-function FileTreeItem({
+// Component for directory entries
+function DirectoryItem({
   entry,
   level,
   onSelect,
@@ -60,21 +257,27 @@ function FileTreeItem({
   onRename,
   expandedDirs,
   setExpandedDirs,
-}: FileTreeItemProps) {
+}: {
+  entry: FileEntry
+  level: number
+  onSelect: (entry: FileEntry) => void
+  selectedPath: string | null
+  onDelete: (filePath: string) => void
+  onCreateFile: (filePath: string) => void
+  onCreateDirectory: (dirPath: string) => void
+  onRename?: (oldPath: string, newName: string) => Promise<string>
+  expandedDirs: Record<string, boolean>
+  setExpandedDirs: React.Dispatch<React.SetStateAction<Record<string, boolean>>>
+}) {
+  const [isRenaming, setIsRenaming] = useState(false)
+  const [newName, setNewName] = useState(entry.name)
   const [isCreatingFile, setIsCreatingFile] = useState(false)
   const [newFileName, setNewFileName] = useState("")
   const [isCreatingDirectory, setIsCreatingDirectory] = useState(false)
   const [newDirectoryName, setNewDirectoryName] = useState("")
-  const [isRenaming, setIsRenaming] = useState(false)
-  const [newName, setNewName] = useState("")
   const [showActions, setShowActions] = useState(false)
 
-  const handleFileClick = () => {
-    onSelect(entry)
-  }
-
-  const handleDirClick = (e: React.MouseEvent) => {
-    // Prevent details toggle when clicking icons
+  const toggleExpanded = (e: React.MouseEvent) => {
     if ((e.target as HTMLElement).closest(".action-icon")) {
       e.preventDefault()
       return
@@ -92,7 +295,6 @@ function FileTreeItem({
       onCreateFile(`${parentPath}/${newFileName}`)
       setNewFileName("")
       setIsCreatingFile(false)
-      setShowActions(false) // Hide actions after creation
     }
   }
 
@@ -102,342 +304,174 @@ function FileTreeItem({
       onCreateDirectory(`${parentPath}/${newDirectoryName}`)
       setNewDirectoryName("")
       setIsCreatingDirectory(false)
-      setShowActions(false) // Hide actions after creation
     }
   }
 
-  const handleCancelCreate = () => {
-    setIsCreatingFile(false)
-    setNewFileName("")
-    setIsCreatingDirectory(false)
-    setNewDirectoryName("")
-    setIsRenaming(false)
+  const handleRename = async () => {
+    if (newName && newName !== entry.name && onRename) {
+      try {
+        await onRename(entry.path, newName)
+        setIsRenaming(false)
+      } catch (error) {
+        // Error handling is done in the hook
+      }
+    } else {
+      setIsRenaming(false)
+    }
+  }
+
+  const startRename = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    e.preventDefault()
+    setNewName(entry.name)
+    setIsRenaming(true)
   }
 
   const startCreateFile = (e: React.MouseEvent) => {
     e.stopPropagation()
     e.preventDefault()
     setIsCreatingFile(true)
-    setIsCreatingDirectory(false) // Ensure only one input is shown
+    setIsCreatingDirectory(false)
   }
 
   const startCreateDirectory = (e: React.MouseEvent) => {
     e.stopPropagation()
     e.preventDefault()
     setIsCreatingDirectory(true)
-    setIsCreatingFile(false) // Ensure only one input is shown
+    setIsCreatingFile(false)
   }
 
-  const startRename = (e: React.MouseEvent) => {
-    e.stopPropagation()
-    e.preventDefault()
-    setNewName(entry.name)
-    setIsRenaming(true)
+  const cancelCreate = () => {
+    setIsCreatingFile(false)
+    setNewFileName("")
+    setIsCreatingDirectory(false)
+    setNewDirectoryName("")
+    setIsRenaming(false)
   }
 
-  const handleRename = async () => {
-    if (newName && newName !== entry.name && onRename) {
-      try {
-        await onRename(entry.path, newName)
-        setIsRenaming(false)
-      } catch (error) {
-        // Error handling is done in the hook
-      }
-    } else {
-      setIsRenaming(false)
-    }
-  }
+  const indentStyle = { paddingLeft: `${level * 1 + 0.5}rem` }
+  const childIndentStyle = { paddingLeft: `${(level + 1) * 1 + 0.5}rem` }
 
   return (
     <li
       className="py-0.5 group/item"
       onMouseEnter={() => setShowActions(true)}
       onMouseLeave={() => {
-        // Don't hide actions if an input is active
         if (!isCreatingFile && !isCreatingDirectory && !isRenaming) {
           setShowActions(false)
         }
       }}
     >
-      {entry.type === "dir" ? (
-        <details className="group" open={expandedDirs[entry.path]}>
-          {isRenaming ? (
-            <div
-              className="flex gap-1 py-1 pl-2"
-              style={{ paddingLeft: `${level * 1 + 0.5}rem` }}
-            >
-              <Input
-                value={newName}
-                onChange={(e) => setNewName(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter") handleRename()
-                  if (e.key === "Escape") handleCancelCreate()
-                }}
-                className="h-6 text-xs"
-                autoFocus
-                onBlur={() => setTimeout(handleCancelCreate, 150)}
-              />
-              <Button
-                size="sm"
-                onClick={handleRename}
-                disabled={!newName || newName === entry.name}
-              >
-                Rename
-              </Button>
+      <details className="group" open={expandedDirs[entry.path]}>
+        {isRenaming ? (
+          <div className="flex gap-1 py-1 pl-2" style={indentStyle}>
+            <InlineInputForm
+              value={newName}
+              onChange={setNewName}
+              onSubmit={handleRename}
+              onCancel={cancelCreate}
+              buttonText="Rename"
+            />
+          </div>
+        ) : (
+          <summary
+            className={`flex items-center justify-between px-2 py-1 cursor-pointer hover:bg-muted rounded list-none ${
+              selectedPath === entry.path ? "bg-accent" : ""
+            }`}
+            onClick={toggleExpanded}
+            style={indentStyle}
+          >
+            <div className="flex items-center overflow-hidden">
+              <FolderIcon className="h-4 w-4 mr-1 text-blue-500 flex-shrink-0" />
+              <span className="font-medium truncate" title={entry.name}>
+                {entry.name}
+              </span>
             </div>
-          ) : (
-            <summary
-              className={`flex items-center justify-between px-2 py-1 cursor-pointer hover:bg-muted rounded list-none ${
-                selectedPath === entry.path ? "bg-accent" : ""
-              }`}
-              onClick={handleDirClick}
-              style={{ paddingLeft: `${level * 1 + 0.5}rem` }} // Indentation
-            >
-              <div className="flex items-center overflow-hidden">
-                <FolderIcon className="h-4 w-4 mr-1 text-blue-500 flex-shrink-0" />
-                <span className="font-medium truncate" title={entry.name}>
-                  {entry.name}
-                </span>
-              </div>
-              <div
-                className={`flex items-center gap-1 action-icon transition-opacity ${
-                  showActions
-                    ? "opacity-100"
-                    : "opacity-0 group-hover/item:opacity-100"
-                }`}
-              >
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="h-5 w-5"
-                  onClick={startRename}
-                  title="Rename folder"
-                >
-                  <PencilIcon className="h-3 w-3 text-muted-foreground" />
-                </Button>
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="h-5 w-5"
-                  onClick={startCreateFile}
-                  title="Create file"
-                >
-                  <FilePlusIcon className="h-3 w-3 text-muted-foreground" />
-                </Button>
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="h-5 w-5"
-                  onClick={startCreateDirectory}
-                  title="Create directory"
-                >
-                  <FolderPlusIcon className="h-3 w-3 text-muted-foreground" />
-                </Button>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button
-                      size="icon"
-                      variant="ghost"
-                      className="h-5 w-5"
-                      onClick={(e) => e.stopPropagation()} // Prevent summary click
-                    >
-                      <TrashIcon className="h-3 w-3 text-muted-foreground" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem
-                      className="text-destructive focus:text-destructive"
-                      onClick={() => onDelete(entry.path)}
-                    >
-                      Delete folder
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </div>
-            </summary>
-          )}
 
-          {/* Input field for creating file */}
-          {isCreatingFile && (
-            <div
-              className="flex gap-1 py-1 pl-6"
-              style={{ paddingLeft: `${(level + 1) * 1 + 0.5}rem` }}
-            >
-              <Input
-                placeholder="filename.js"
-                value={newFileName}
-                onChange={(e) => setNewFileName(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter") handleCreateFile()
-                  if (e.key === "Escape") handleCancelCreate()
-                }}
-                className="h-6 text-xs"
-                autoFocus
-                onBlur={() => setTimeout(handleCancelCreate, 150)} // Delay blur to allow button click
-              />
-              <Button
-                size="sm"
-                onClick={handleCreateFile}
-                disabled={!newFileName}
-              >
-                Create
-              </Button>
-            </div>
-          )}
+            <TreeItemActions
+              showActions={showActions}
+              onRename={() =>
+                startRename({
+                  stopPropagation: () => {},
+                  preventDefault: () => {},
+                } as React.MouseEvent)
+              }
+              onCreateFile={() =>
+                startCreateFile({
+                  stopPropagation: () => {},
+                  preventDefault: () => {},
+                } as React.MouseEvent)
+              }
+              onCreateDirectory={() =>
+                startCreateDirectory({
+                  stopPropagation: () => {},
+                  preventDefault: () => {},
+                } as React.MouseEvent)
+              }
+              onDelete={() => onDelete(entry.path)}
+              itemType="dir"
+              itemName={entry.name}
+            />
+          </summary>
+        )}
 
-          {/* Input field for creating directory */}
-          {isCreatingDirectory && (
-            <div
-              className="flex gap-1 py-1 pl-6"
-              style={{ paddingLeft: `${(level + 1) * 1 + 0.5}rem` }}
-            >
-              <Input
-                placeholder="folder-name"
-                value={newDirectoryName}
-                onChange={(e) => setNewDirectoryName(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter") handleCreateDirectory()
-                  if (e.key === "Escape") handleCancelCreate()
-                }}
-                className="h-6 text-xs"
-                autoFocus
-                onBlur={() => setTimeout(handleCancelCreate, 150)} // Delay blur to allow button click
-              />
-              <Button
-                size="sm"
-                onClick={handleCreateDirectory}
-                disabled={!newDirectoryName}
-              >
-                Create
-              </Button>
-            </div>
-          )}
+        {isCreatingFile && (
+          <div className="flex gap-1 py-1" style={childIndentStyle}>
+            <InlineInputForm
+              placeholder="filename.js"
+              value={newFileName}
+              onChange={setNewFileName}
+              onSubmit={handleCreateFile}
+              onCancel={cancelCreate}
+            />
+          </div>
+        )}
 
-          {/* Render children */}
-          {entry.children && (
-            <div className="mt-0.5">
-              {entry.children.length > 0 ? (
-                <FileTreeRecursive
-                  items={entry.children}
-                  level={level + 1}
-                  onSelect={onSelect}
-                  selectedPath={selectedPath}
-                  onDelete={onDelete}
-                  onCreateFile={onCreateFile}
-                  onCreateDirectory={onCreateDirectory}
-                  onRename={onRename}
-                  expandedDirs={expandedDirs}
-                  setExpandedDirs={setExpandedDirs}
-                />
-              ) : (
-                !isCreatingFile &&
-                !isCreatingDirectory && (
-                  <div
-                    className="text-xs text-muted-foreground px-2 py-1"
-                    style={{ paddingLeft: `${(level + 1) * 1 + 0.5}rem` }}
-                  >
-                    Empty directory
-                  </div>
-                )
-              )}
-            </div>
-          )}
-        </details>
-      ) : (
-        <div
-          className="flex items-center group/item justify-between"
-          style={{ paddingLeft: `${level * 1 + 0.5}rem` }} // Indentation
-          onMouseEnter={() => setShowActions(true)}
-          onMouseLeave={() => setShowActions(false)}
-        >
-          {isRenaming ? (
-            <div className="flex gap-1 py-1 flex-1">
-              <Input
-                value={newName}
-                onChange={(e) => setNewName(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter") handleRename()
-                  if (e.key === "Escape") handleCancelCreate()
-                }}
-                className="h-6 text-xs"
-                autoFocus
-                onBlur={() => setTimeout(handleCancelCreate, 150)}
-              />
-              <Button
-                size="sm"
-                onClick={handleRename}
-                disabled={!newName || newName === entry.name}
-              >
-                Rename
-              </Button>
-            </div>
+        {isCreatingDirectory && (
+          <div className="flex gap-1 py-1" style={childIndentStyle}>
+            <InlineInputForm
+              placeholder="folder-name"
+              value={newDirectoryName}
+              onChange={setNewDirectoryName}
+              onSubmit={handleCreateDirectory}
+              onCancel={cancelCreate}
+            />
+          </div>
+        )}
+
+        <div className="mt-0.5">
+          {entry.children && entry.children.length > 0 ? (
+            <FileList
+              items={entry.children}
+              level={level + 1}
+              onSelect={onSelect}
+              selectedPath={selectedPath}
+              onDelete={onDelete}
+              onCreateFile={onCreateFile}
+              onCreateDirectory={onCreateDirectory}
+              onRename={onRename}
+              expandedDirs={expandedDirs}
+              setExpandedDirs={setExpandedDirs}
+            />
           ) : (
-            <>
-              <button
-                className={`flex items-center flex-1 text-left px-2 py-1 hover:bg-muted rounded truncate ${
-                  selectedPath === entry.path ? "bg-accent font-medium" : ""
-                }`}
-                onClick={handleFileClick}
-                title={entry.path}
-              >
-                <FileIcon className="h-4 w-4 mr-1 text-gray-500 flex-shrink-0" />
-                {entry.name}
-              </button>
+            !isCreatingFile &&
+            !isCreatingDirectory && (
               <div
-                className={`action-icon transition-opacity ${
-                  showActions
-                    ? "opacity-100"
-                    : "opacity-0 group-hover/item:opacity-100"
-                }`}
+                className="text-xs text-muted-foreground px-2 py-1"
+                style={childIndentStyle}
               >
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="h-5 w-5"
-                  onClick={startRename}
-                  title="Rename file"
-                >
-                  <PencilIcon className="h-3 w-3 text-muted-foreground" />
-                </Button>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button size="icon" variant="ghost" className="h-5 w-5">
-                      <TrashIcon className="h-3 w-3 text-muted-foreground" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem
-                      className="text-destructive focus:text-destructive"
-                      onClick={() => onDelete(entry.path)}
-                    >
-                      Delete file
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
+                Empty directory
               </div>
-            </>
+            )
           )}
         </div>
-      )}
+      </details>
     </li>
   )
 }
 
-// Renamed original renderEntries to FileTreeRecursive for clarity
-interface FileTreeRecursiveProps {
-  items: FileEntry[]
-  level: number
-  onSelect: (entry: FileEntry) => void
-  selectedPath: string | null
-  onDelete: (filePath: string) => void
-  onCreateFile: (filePath: string) => void
-  onCreateDirectory: (dirPath: string) => void
-  onRename?: (oldPath: string, newName: string) => Promise<string>
-  expandedDirs: Record<string, boolean>
-  setExpandedDirs: React.Dispatch<React.SetStateAction<Record<string, boolean>>>
-}
-
-function FileTreeRecursive({
+// Renamed from FileTreeRecursive to FileList for clarity
+function FileList({
   items,
   level,
   onSelect,
@@ -448,24 +482,47 @@ function FileTreeRecursive({
   onRename,
   expandedDirs,
   setExpandedDirs,
-}: FileTreeRecursiveProps) {
+}: {
+  items: FileEntry[]
+  level: number
+  onSelect: (entry: FileEntry) => void
+  selectedPath: string | null
+  onDelete: (filePath: string) => void
+  onCreateFile: (filePath: string) => void
+  onCreateDirectory: (dirPath: string) => void
+  onRename?: (oldPath: string, newName: string) => Promise<string>
+  expandedDirs: Record<string, boolean>
+  setExpandedDirs: React.Dispatch<React.SetStateAction<Record<string, boolean>>>
+}) {
   return (
-    <ul className={`text-sm py-0.5`}>
-      {items.map((entry) => (
-        <FileTreeItem
-          key={entry.path}
-          entry={entry}
-          level={level}
-          onSelect={onSelect}
-          selectedPath={selectedPath}
-          onDelete={onDelete}
-          onCreateFile={onCreateFile}
-          onCreateDirectory={onCreateDirectory}
-          onRename={onRename}
-          expandedDirs={expandedDirs}
-          setExpandedDirs={setExpandedDirs}
-        />
-      ))}
+    <ul className="text-sm py-0.5">
+      {items.map((entry) =>
+        entry.type === "dir" ? (
+          <DirectoryItem
+            key={entry.path}
+            entry={entry}
+            level={level}
+            onSelect={onSelect}
+            selectedPath={selectedPath}
+            onDelete={onDelete}
+            onCreateFile={onCreateFile}
+            onCreateDirectory={onCreateDirectory}
+            onRename={onRename}
+            expandedDirs={expandedDirs}
+            setExpandedDirs={setExpandedDirs}
+          />
+        ) : (
+          <FileItem
+            key={entry.path}
+            entry={entry}
+            level={level}
+            onSelect={onSelect}
+            selectedPath={selectedPath}
+            onDelete={onDelete}
+            onRename={onRename}
+          />
+        ),
+      )}
     </ul>
   )
 }
@@ -482,21 +539,6 @@ export function FileTree({
 }: FileTreeProps) {
   const [expandedDirs, setExpandedDirs] = useState<Record<string, boolean>>({})
 
-  // Function to recursively collect all directory paths
-  const getAllDirectoryPaths = (items: FileEntry[]): string[] => {
-    let paths: string[] = []
-    for (const item of items) {
-      if (item.type === "dir") {
-        paths.push(item.path)
-        if (item.children) {
-          paths = paths.concat(getAllDirectoryPaths(item.children))
-        }
-      }
-    }
-    return paths
-  }
-
-  // Effect to set initial expanded state
   useEffect(() => {
     if (entries.length > 0 && !isLoading) {
       const allDirPaths = getAllDirectoryPaths(entries)
@@ -508,7 +550,6 @@ export function FileTree({
         {} as Record<string, boolean>,
       )
 
-      // Reset expanded state when entries structure changes significantly
       const currentDirPaths = Object.keys(expandedDirs)
       const entriesChanged =
         allDirPaths.length !== currentDirPaths.length ||
@@ -520,6 +561,19 @@ export function FileTree({
     }
   }, [entries, isLoading])
 
+  const getAllDirectoryPaths = (items: FileEntry[]): string[] => {
+    let paths: string[] = []
+    for (const item of items) {
+      if (item.type === "dir") {
+        paths.push(item.path)
+        if (item.children) {
+          paths = paths.concat(getAllDirectoryPaths(item.children))
+        }
+      }
+    }
+    return paths
+  }
+
   if (isLoading && entries.length === 0) {
     return (
       <div className="flex justify-center items-center py-8">
@@ -535,7 +589,7 @@ export function FileTree({
           No files found
         </div>
       ) : (
-        <FileTreeRecursive
+        <FileList
           items={entries}
           level={0}
           onSelect={onSelect}

From 3421405e26ceb560934c82720d88718bf27cea3c Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Fri, 25 Apr 2025 03:39:30 +0400
Subject: [PATCH 087/143] add: dependecy resolve

---
 .../app/studio/[username]/publish/page.tsx    | 14 ++++
 .../publish/components/FileExplorer.tsx       |  8 +-
 .../studio/publish/hooks/useFileSystem.ts     | 36 +++++++++
 .../studio/publish/hooks/useSandbox.ts        | 50 ++++++++++++-
 .../studio/publish/utils/dependencies.ts      | 73 +++++++++++++++++++
 5 files changed, 173 insertions(+), 8 deletions(-)
 create mode 100644 apps/web/components/features/studio/publish/utils/dependencies.ts

diff --git a/apps/web/app/studio/[username]/publish/page.tsx b/apps/web/app/studio/[username]/publish/page.tsx
index 9b166e78..8884dab7 100644
--- a/apps/web/app/studio/[username]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/publish/page.tsx
@@ -39,6 +39,9 @@ function PublishPageContent() {
     isSandboxLoading,
     sandboxConnectionHash,
     reconnectSandbox,
+    // dependencies
+    missingDependencyInfo,
+    clearMissingDependencyInfo,
   } = useSandbox({
     defaultSandboxId: searchParams.get("sandboxId"),
   })
@@ -56,12 +59,23 @@ function PublishPageContent() {
     deleteEntry,
     createDirectory,
     renameEntry,
+    addDependencyToPackageJson,
   } = useFileSystem({
     sandboxRef,
     reconnectSandbox,
     sandboxConnectionHash,
   })
 
+  useEffect(() => {
+    if (missingDependencyInfo) {
+      addDependencyToPackageJson(
+        missingDependencyInfo.packageName,
+        missingDependencyInfo.latestVersion,
+      )
+      clearMissingDependencyInfo()
+    }
+  }, [missingDependencyInfo])
+
   useEffect(() => {
     if (sandboxId && sandboxId !== searchParams.get("sandboxId")) {
       router.push(`${window.location.pathname}?sandboxId=${sandboxId}`, {
diff --git a/apps/web/components/features/studio/publish/components/FileExplorer.tsx b/apps/web/components/features/studio/publish/components/FileExplorer.tsx
index 35d83b9f..273c5224 100644
--- a/apps/web/components/features/studio/publish/components/FileExplorer.tsx
+++ b/apps/web/components/features/studio/publish/components/FileExplorer.tsx
@@ -137,13 +137,13 @@ export function FileExplorer({
                 >
                   {advancedView ? (
                     <>
-                      <EyeIcon className="h-4 w-4 mr-2" />
-                      Simple view
+                      <EyeOffIcon className="h-4 w-4 mr-2" />
+                      Advanced view
                     </>
                   ) : (
                     <>
-                      <EyeOffIcon className="h-4 w-4 mr-2" />
-                      Advanced view
+                      <EyeIcon className="h-4 w-4 mr-2" />
+                      Simple view
                     </>
                   )}
                 </Button>
diff --git a/apps/web/components/features/studio/publish/hooks/useFileSystem.ts b/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
index 3284cd2a..d9099b0a 100644
--- a/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
+++ b/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
@@ -241,6 +241,41 @@ export const useFileSystem = ({
     }
   }
 
+  const addDependencyToPackageJson = async (
+    packageName: string,
+    version: string,
+  ) => {
+    try {
+      const packageJsonPath = normalizePath("/package.json")
+      const content = await fsWrapper((sandbox) =>
+        sandbox.fs.readTextFile(packageJsonPath),
+      )
+
+      if (!content) throw new Error("Failed to read package.json")
+
+      const packageJson = JSON.parse(content)
+      if (!packageJson.dependencies) {
+        packageJson.dependencies = {}
+      }
+
+      packageJson.dependencies[packageName] = `^${version}`
+
+      await fsWrapper((sandbox) =>
+        sandbox.fs.writeTextFile(
+          packageJsonPath,
+          JSON.stringify(packageJson, null, 2),
+        ),
+      )
+
+      toast.success(`Added ${packageName}@${version} to dependencies`)
+      await loadRootDirectory()
+    } catch (error) {
+      console.error(`Failed to add dependency ${packageName}:`, error)
+      toast.error(`Failed to add ${packageName} to dependencies`)
+      throw error
+    }
+  }
+
   const toggleAdvancedView = () => {
     setAdvancedView((prev) => !prev)
   }
@@ -258,5 +293,6 @@ export const useFileSystem = ({
     createDirectory,
     deleteEntry,
     renameEntry,
+    addDependencyToPackageJson,
   }
 }
diff --git a/apps/web/components/features/studio/publish/hooks/useSandbox.ts b/apps/web/components/features/studio/publish/hooks/useSandbox.ts
index f64f3950..f8ca4a52 100644
--- a/apps/web/components/features/studio/publish/hooks/useSandbox.ts
+++ b/apps/web/components/features/studio/publish/hooks/useSandbox.ts
@@ -2,6 +2,7 @@ import { SandboxSession } from "@codesandbox/sdk"
 import { connectToSandbox } from "@codesandbox/sdk/browser"
 import { useEffect, useRef, useState } from "react"
 import { connectToServerSandbox } from "../api"
+import { getLatestPackageVersionFromError } from "../utils/dependencies"
 
 export const useSandbox = ({
   defaultSandboxId,
@@ -9,16 +10,21 @@ export const useSandbox = ({
   defaultSandboxId: string | null
 }) => {
   const sandboxRef = useRef<SandboxSession | null>(null)
+  const shellRef = useRef(null)
   const [sandboxId, setSandboxId] = useState<string | null>(defaultSandboxId)
   const [sandboxConnectionHash, setSandboxConnectionHash] = useState<
     string | null
   >(null)
   const [previewURL, setPreviewURL] = useState<string | null>(null)
-  const [isLoading, setIsLoading] = useState(true)
+  const [isSandboxLoading, setIsSandboxLoading] = useState(true)
+  const [missingDependencyInfo, setMissingDependencyInfo] = useState<{
+    packageName: string
+    latestVersion: string
+  } | null>(null)
 
   const initialize = async (isReconnecting = false) => {
     if (!isReconnecting) {
-      setIsLoading(true)
+      setIsSandboxLoading(true)
     }
     try {
       const { sandboxId: newSandboxId, startData } =
@@ -28,6 +34,36 @@ export const useSandbox = ({
       const newPreviewURL = connectedSandbox.ports.getPreviewUrl(5173)
       sandboxRef.current = connectedSandbox
 
+      const shells = await connectedSandbox.shells.getShells()
+      // console.log("ALL SHELS", shells.map((s) => s.name))
+
+      shells.forEach((shell) => {
+        console.log(shell.name, "shell output", shell.status)
+      })
+
+      const runningShell = shells.find(
+        (shell) =>
+          shell.name === "pnpm run install-and-dev" &&
+          shell.status === "RUNNING",
+      )
+
+      const openedRunningShell = await connectedSandbox.shells.open(
+        runningShell!.id,
+      )
+
+      openedRunningShell.onOutput(async (data) => {
+        console.log("data", data)
+        const latestPackageVersion =
+          await getLatestPackageVersionFromError(data)
+        if (latestPackageVersion) {
+          setMissingDependencyInfo(latestPackageVersion)
+        }
+      })
+
+      console.log("openedRunningShell", openedRunningShell)
+
+      console.log("runningShell", runningShell)
+
       // setInterval(() => {
       //   const newPreviewURL = sandboxRef.current?.ports.getPreviewUrl(5173)
       //   console.log("newPreviewURL", newPreviewURL)
@@ -48,7 +84,7 @@ export const useSandbox = ({
       setPreviewURL(null)
     } finally {
       if (!isReconnecting) {
-        setIsLoading(false)
+        setIsSandboxLoading(false)
       }
     }
   }
@@ -62,12 +98,18 @@ export const useSandbox = ({
     await initialize(true)
   }
 
+  const clearMissingDependencyInfo = () => {
+    setMissingDependencyInfo(null)
+  }
+
   return {
     sandboxRef,
     sandboxId,
     previewURL,
-    isSandboxLoading: isLoading,
+    isSandboxLoading,
     sandboxConnectionHash,
     reconnectSandbox,
+    missingDependencyInfo,
+    clearMissingDependencyInfo,
   }
 }
diff --git a/apps/web/components/features/studio/publish/utils/dependencies.ts b/apps/web/components/features/studio/publish/utils/dependencies.ts
new file mode 100644
index 00000000..4e4908e9
--- /dev/null
+++ b/apps/web/components/features/studio/publish/utils/dependencies.ts
@@ -0,0 +1,73 @@
+export const getLatestPackageVersionFromError = async (
+  errorMessage: string,
+): Promise<{ packageName: string; latestVersion: string } | null> => {
+  const match = errorMessage.match(/Failed to resolve import "([^"]+)" from/)
+  let potentialPackageName = match?.[1]
+
+  if (
+    !potentialPackageName ||
+    potentialPackageName.startsWith(".") ||
+    potentialPackageName.startsWith("/")
+  ) {
+    console.log(`Skipping lookup for non-package path: ${potentialPackageName}`)
+    return null
+  }
+
+  while (potentialPackageName) {
+    try {
+      console.log(
+        `Attempting to fetch package info for: ${potentialPackageName}`,
+      )
+      const response = await fetch(
+        `https://registry.npmjs.org/${potentialPackageName}`,
+      )
+
+      if (response.ok) {
+        const data = await response.json()
+        const latestVersion = data?.["dist-tags"]?.latest
+
+        if (latestVersion) {
+          console.log(
+            `Found latest version for ${potentialPackageName}: ${latestVersion}`,
+          )
+          return { packageName: potentialPackageName, latestVersion }
+        } else {
+          console.log(
+            `Found package ${potentialPackageName}, but no 'latest' version tag.`,
+          )
+          // Package exists, but no version found? Treat as not found for simplicity,
+          // or could implement alternative logic (e.g., find highest version).
+          return null
+        }
+      } else if (response.status === 404) {
+        console.log(`Package ${potentialPackageName} not found (404).`)
+        // Package not found, try removing the last path segment
+        const lastSlashIndex = potentialPackageName.lastIndexOf("/")
+        if (lastSlashIndex !== -1) {
+          potentialPackageName = potentialPackageName.substring(
+            0,
+            lastSlashIndex,
+          )
+        } else {
+          // No more slashes, this was the last attempt
+          break // Exit the loop
+        }
+      } else {
+        // Other HTTP error
+        console.error(
+          `Failed to fetch package info for ${potentialPackageName}: ${response.status} ${response.statusText}`,
+        )
+        return null
+      }
+    } catch (error) {
+      console.error(
+        `Error fetching latest version for ${potentialPackageName}:`,
+        error,
+      )
+      return null // Network error or other fetch issue
+    }
+  }
+
+  console.log("Could not determine package name after checking paths.")
+  return null
+}

From 067ca6557ad2c10c8012739018ac8cac6f203aaa Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Fri, 25 Apr 2025 04:09:48 +0400
Subject: [PATCH 088/143] type $hi

---
 .../app/studio/[username]/publish/page.tsx    |   2 +
 .../studio/publish/components/PreviewPane.tsx |   4 +-
 .../studio/publish/hooks/useSandbox.ts        | 113 ++++++++++++------
 3 files changed, 82 insertions(+), 37 deletions(-)

diff --git a/apps/web/app/studio/[username]/publish/page.tsx b/apps/web/app/studio/[username]/publish/page.tsx
index 8884dab7..b2577bea 100644
--- a/apps/web/app/studio/[username]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/publish/page.tsx
@@ -42,6 +42,7 @@ function PublishPageContent() {
     // dependencies
     missingDependencyInfo,
     clearMissingDependencyInfo,
+    shellConnectionHash,
   } = useSandbox({
     defaultSandboxId: searchParams.get("sandboxId"),
   })
@@ -212,6 +213,7 @@ function PublishPageContent() {
         <ResizableHandle />
         <ResizablePanel defaultSize={80} minSize={20}>
           <PreviewPane
+            shellConnectionHash={shellConnectionHash}
             previewURL={previewURL}
             selectedFile={selectedEntry}
             code={code}
diff --git a/apps/web/components/features/studio/publish/components/PreviewPane.tsx b/apps/web/components/features/studio/publish/components/PreviewPane.tsx
index 84bc0f39..9635e6e7 100644
--- a/apps/web/components/features/studio/publish/components/PreviewPane.tsx
+++ b/apps/web/components/features/studio/publish/components/PreviewPane.tsx
@@ -16,6 +16,7 @@ interface PreviewPaneProps {
   code?: string
   onCodeChange?: (value: string) => void
   isFileLoading?: boolean
+  shellConnectionHash?: string
 }
 
 export function PreviewPane({
@@ -25,6 +26,7 @@ export function PreviewPane({
   code = "",
   onCodeChange = () => {},
   isFileLoading = false,
+  shellConnectionHash = "",
 }: PreviewPaneProps) {
   const [iframeKey, setIframeKey] = useState<number>(0)
   const [showPreview, setShowPreview] = useState<boolean>(isPreviewVisible)
@@ -62,7 +64,7 @@ export function PreviewPane({
                   </div>
                 ) : (
                   <iframe
-                    key={iframeKey}
+                    key={`${iframeKey}-${shellConnectionHash}`}
                     src={previewURL}
                     className="w-full h-full border rounded-b"
                   />
diff --git a/apps/web/components/features/studio/publish/hooks/useSandbox.ts b/apps/web/components/features/studio/publish/hooks/useSandbox.ts
index f8ca4a52..19f77db0 100644
--- a/apps/web/components/features/studio/publish/hooks/useSandbox.ts
+++ b/apps/web/components/features/studio/publish/hooks/useSandbox.ts
@@ -15,6 +15,7 @@ export const useSandbox = ({
   const [sandboxConnectionHash, setSandboxConnectionHash] = useState<
     string | null
   >(null)
+  const [shellConnectionHash, setShellConnectionHash] = useState<string>("")
   const [previewURL, setPreviewURL] = useState<string | null>(null)
   const [isSandboxLoading, setIsSandboxLoading] = useState(true)
   const [missingDependencyInfo, setMissingDependencyInfo] = useState<{
@@ -22,36 +23,55 @@ export const useSandbox = ({
     latestVersion: string
   } | null>(null)
 
-  const initialize = async (isReconnecting = false) => {
-    if (!isReconnecting) {
-      setIsSandboxLoading(true)
+  const initShellSubsciption = async () => {
+    if (!sandboxRef.current) {
+      return
     }
-    try {
-      const { sandboxId: newSandboxId, startData } =
-        await connectToServerSandbox(sandboxId)
 
-      const connectedSandbox = await connectToSandbox(startData)
-      const newPreviewURL = connectedSandbox.ports.getPreviewUrl(5173)
-      sandboxRef.current = connectedSandbox
-
-      const shells = await connectedSandbox.shells.getShells()
-      // console.log("ALL SHELS", shells.map((s) => s.name))
-
-      shells.forEach((shell) => {
-        console.log(shell.name, "shell output", shell.status)
-      })
+    // setInterval(async () => {
+    //   const shells = await sandboxRef.current?.shells.getShells()
+
+    //   const runningShells = shells?.filter(
+    //     (shell) =>
+    //       shell.name === "pnpm run install-and-dev" &&
+    //       shell.status === "RUNNING",
+    //   )
+
+    //   console.log(
+    //     "shells",
+    //     runningShells?.map((shell) => {
+    //       return {
+    //         id: shell.id,
+    //         name: shell.name,
+    //         status: shell.status,
+    //       }
+    //     }),
+    //   )
+    // }, 1000 * 5)
+
+    const shells = await sandboxRef.current?.shells.getShells()
+
+    const runningShells = shells?.filter(
+      (shell) =>
+        shell.name === "pnpm run install-and-dev" && shell.status === "RUNNING",
+    )
+
+    if (!runningShells?.length) {
+      return
+    }
 
-      const runningShell = shells.find(
-        (shell) =>
-          shell.name === "pnpm run install-and-dev" &&
-          shell.status === "RUNNING",
-      )
+    const openedRunningShells = await Promise.all(
+      shells.map(async (shell) => {
+        return await sandboxRef.current?.shells.open(shell.id)
+      }),
+    )
 
-      const openedRunningShell = await connectedSandbox.shells.open(
-        runningShell!.id,
-      )
+    setShellConnectionHash(
+      Math.random().toString(36).substring(2) + Date.now().toString(36),
+    )
 
-      openedRunningShell.onOutput(async (data) => {
+    openedRunningShells.forEach((shell) => {
+      shell!.onOutput(async (data) => {
         console.log("data", data)
         const latestPackageVersion =
           await getLatestPackageVersionFromError(data)
@@ -60,21 +80,39 @@ export const useSandbox = ({
         }
       })
 
-      console.log("openedRunningShell", openedRunningShell)
+      // shell!.onWillDispose(() => {
+      //   console.log("openedRunningShell disposed")
+      //   setTimeout(() => {
+      //     initShellSubsciption()
+      //   }, 1000 * 10)
+      // })
+    })
+  }
 
-      console.log("runningShell", runningShell)
+  // PLAN B => with more checks it will work actually
+  // useEffect(() => {
+  //   setInterval(async () => {
+  //     await initShellSubsciption()
+  //   }, 1000 * 5)
+  // }, [])
 
-      // setInterval(() => {
-      //   const newPreviewURL = sandboxRef.current?.ports.getPreviewUrl(5173)
-      //   console.log("newPreviewURL", newPreviewURL)
-      //   setPreviewURL(newPreviewURL || null)
-      // }, 1000 * 5)
+  const initialize = async (isReconnecting = false) => {
+    if (!isReconnecting) {
+      setIsSandboxLoading(true)
+    }
+    try {
+      const { sandboxId: newSandboxId, startData } =
+        await connectToServerSandbox(sandboxId)
 
-      setPreviewURL(newPreviewURL || null)
+      const connectedSandbox = await connectToSandbox(startData)
+      const newPreviewURL = connectedSandbox.ports.getPreviewUrl(5173)
+      sandboxRef.current = connectedSandbox
 
-      setSandboxConnectionHash(
-        Math.random().toString(36).substring(2) + Date.now().toString(36),
-      )
+      await initShellSubsciption()
+      setPreviewURL(newPreviewURL || null)
+      // setSandboxConnectionHash(
+      //   Math.random().toString(36).substring(2) + Date.now().toString(36),
+      // )
       setSandboxId(newSandboxId)
     } catch (error) {
       console.error("Failed to initialize sandbox in hook:", error)
@@ -109,7 +147,10 @@ export const useSandbox = ({
     isSandboxLoading,
     sandboxConnectionHash,
     reconnectSandbox,
+    // dependencies
     missingDependencyInfo,
     clearMissingDependencyInfo,
+    // unique hash of a shell connection
+    shellConnectionHash,
   }
 }

From fac96afa6ab88186c4b323f2c464aa1e4ac0fdef Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Sat, 26 Apr 2025 13:06:17 +0400
Subject: [PATCH 089/143] =?UTF-8?q?=F0=9F=8D=BB=F0=9F=8D=BB=F0=9F=8D=BB?=
 =?UTF-8?q?=F0=9F=8D=BB=20PREVIEW=20PORTS=20=F0=9F=8D=BB=F0=9F=8D=BB?=
 =?UTF-8?q?=F0=9F=8D=BB=F0=9F=8D=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/studio/[username]/publish/page.tsx    |   4 +-
 .../components/features/auth/login-form.tsx   |  86 +++++++++++
 .../studio/publish/components/PreviewPane.tsx |  24 +++-
 .../studio/publish/hooks/useSandbox.ts        | 135 ++++++++----------
 4 files changed, 169 insertions(+), 80 deletions(-)
 create mode 100644 apps/web/components/features/auth/login-form.tsx

diff --git a/apps/web/app/studio/[username]/publish/page.tsx b/apps/web/app/studio/[username]/publish/page.tsx
index b2577bea..642c1c76 100644
--- a/apps/web/app/studio/[username]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/publish/page.tsx
@@ -42,7 +42,7 @@ function PublishPageContent() {
     // dependencies
     missingDependencyInfo,
     clearMissingDependencyInfo,
-    shellConnectionHash,
+    connectedShellId,
   } = useSandbox({
     defaultSandboxId: searchParams.get("sandboxId"),
   })
@@ -213,7 +213,7 @@ function PublishPageContent() {
         <ResizableHandle />
         <ResizablePanel defaultSize={80} minSize={20}>
           <PreviewPane
-            shellConnectionHash={shellConnectionHash}
+            connectedShellId={connectedShellId}
             previewURL={previewURL}
             selectedFile={selectedEntry}
             code={code}
diff --git a/apps/web/components/features/auth/login-form.tsx b/apps/web/components/features/auth/login-form.tsx
new file mode 100644
index 00000000..a4f36e77
--- /dev/null
+++ b/apps/web/components/features/auth/login-form.tsx
@@ -0,0 +1,86 @@
+"use client"
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+
+interface IconProps extends React.HTMLAttributes<SVGElement> {}
+
+const Icons = {
+  gitHub: (props: IconProps) => (
+    <svg viewBox="0 0 438.549 438.549" {...props}>
+      <path
+        fill="currentColor"
+        d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
+      ></path>
+    </svg>
+  ),
+  google: (props: IconProps) => (
+    <svg role="img" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+      />
+    </svg>
+  ),
+}
+
+function LoginForm() {
+  return (
+    <div className="grid w-full grow items-center px-4 sm:justify-center">
+      <Card className="w-full sm:w-96">
+        <CardHeader>
+          <CardTitle>Sign in to Acme Co</CardTitle>
+          <CardDescription>
+            Welcome back! Please sign in to continue
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-y-4">
+          <div className="grid grid-cols-2 gap-x-4">
+            <Button size="sm" variant="outline" type="button">
+              <Icons.gitHub className="mr-2 size-4" />
+              GitHub
+            </Button>
+            <Button size="sm" variant="outline" type="button">
+              <Icons.google className="mr-2 size-4" />
+              Google
+            </Button>
+          </div>
+
+          <p className="flex items-center gap-x-3 text-sm text-muted-foreground before:h-px before:flex-1 before:bg-border after:h-px after:flex-1 after:bg-border">
+            or
+          </p>
+
+          <div className="space-y-2">
+            <Label>Email address</Label>
+            <Input type="email" required />
+          </div>
+
+          <div className="space-y-2">
+            <Label>Password</Label>
+            <Input type="password" required />
+          </div>
+        </CardContent>
+
+        <CardFooter>
+          <div className="grid w-full gap-y-4">
+            <Button>Sign in</Button>
+            <Button variant="link" size="sm" asChild>
+              <Link href="/signup">Don&apos;t have an account? Sign up</Link>
+            </Button>
+          </div>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}
+
+export default LoginForm
diff --git a/apps/web/components/features/studio/publish/components/PreviewPane.tsx b/apps/web/components/features/studio/publish/components/PreviewPane.tsx
index 9635e6e7..a77f6584 100644
--- a/apps/web/components/features/studio/publish/components/PreviewPane.tsx
+++ b/apps/web/components/features/studio/publish/components/PreviewPane.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { RefreshCw, PanelRightOpen, PanelRightClose } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import {
@@ -16,7 +16,7 @@ interface PreviewPaneProps {
   code?: string
   onCodeChange?: (value: string) => void
   isFileLoading?: boolean
-  shellConnectionHash?: string
+  connectedShellId?: string
 }
 
 export function PreviewPane({
@@ -26,11 +26,27 @@ export function PreviewPane({
   code = "",
   onCodeChange = () => {},
   isFileLoading = false,
-  shellConnectionHash = "",
+  connectedShellId = "",
 }: PreviewPaneProps) {
   const [iframeKey, setIframeKey] = useState<number>(0)
   const [showPreview, setShowPreview] = useState<boolean>(isPreviewVisible)
 
+  const [previousConnectedShellId, setPreviousConnectedShellId] = useState<
+    string | null
+  >(connectedShellId)
+
+  //  takes time to complile need to reload iframe, will be fixed at codesandbox SDK team side
+  useEffect(() => {
+    if (
+      previousConnectedShellId !== connectedShellId &&
+      previousConnectedShellId !== ""
+    ) {
+      setTimeout(() => {
+        setIframeKey((prev) => prev + 1)
+      }, 1000 * 8)
+    }
+  }, [connectedShellId])
+
   const handleRefresh = () => {
     setIframeKey((prev) => prev + 1)
   }
@@ -64,7 +80,7 @@ export function PreviewPane({
                   </div>
                 ) : (
                   <iframe
-                    key={`${iframeKey}-${shellConnectionHash}`}
+                    key={`${iframeKey}-${connectedShellId}`}
                     src={previewURL}
                     className="w-full h-full border rounded-b"
                   />
diff --git a/apps/web/components/features/studio/publish/hooks/useSandbox.ts b/apps/web/components/features/studio/publish/hooks/useSandbox.ts
index 19f77db0..664df3a1 100644
--- a/apps/web/components/features/studio/publish/hooks/useSandbox.ts
+++ b/apps/web/components/features/studio/publish/hooks/useSandbox.ts
@@ -10,12 +10,11 @@ export const useSandbox = ({
   defaultSandboxId: string | null
 }) => {
   const sandboxRef = useRef<SandboxSession | null>(null)
-  const shellRef = useRef(null)
   const [sandboxId, setSandboxId] = useState<string | null>(defaultSandboxId)
   const [sandboxConnectionHash, setSandboxConnectionHash] = useState<
     string | null
   >(null)
-  const [shellConnectionHash, setShellConnectionHash] = useState<string>("")
+  const [connectedShellId, setConnectedShellId] = useState<string>("")
   const [previewURL, setPreviewURL] = useState<string | null>(null)
   const [isSandboxLoading, setIsSandboxLoading] = useState(true)
   const [missingDependencyInfo, setMissingDependencyInfo] = useState<{
@@ -23,56 +22,77 @@ export const useSandbox = ({
     latestVersion: string
   } | null>(null)
 
-  const initShellSubsciption = async () => {
+  const initialize = async (isReconnecting = false) => {
+    if (!isReconnecting) {
+      setIsSandboxLoading(true)
+    }
+    try {
+      const { sandboxId: newSandboxId, startData } =
+        await connectToServerSandbox(sandboxId)
+
+      console.log("startData", startData)
+      const connectedSandbox = await connectToSandbox(startData)
+
+      console.log("connectedSandbox", connectedSandbox)
+      const newPreviewURL = connectedSandbox.ports.getPreviewUrl(5173)
+      sandboxRef.current = connectedSandbox
+
+      setPreviewURL(newPreviewURL || null)
+      checkShells()
+      setSandboxId(newSandboxId)
+    } catch (error) {
+      console.error("Failed to initialize sandbox in hook:", error)
+      sandboxRef.current = null
+      setSandboxId(null)
+      setSandboxConnectionHash(null)
+      setPreviewURL(null)
+    } finally {
+      if (!isReconnecting) {
+        setIsSandboxLoading(false)
+      }
+    }
+  }
+
+  const subscribedShells = useRef<Set<string>>(new Set())
+
+  const checkShells = async () => {
     if (!sandboxRef.current) {
       return
     }
 
-    // setInterval(async () => {
-    //   const shells = await sandboxRef.current?.shells.getShells()
-
-    //   const runningShells = shells?.filter(
-    //     (shell) =>
-    //       shell.name === "pnpm run install-and-dev" &&
-    //       shell.status === "RUNNING",
-    //   )
-
-    //   console.log(
-    //     "shells",
-    //     runningShells?.map((shell) => {
-    //       return {
-    //         id: shell.id,
-    //         name: shell.name,
-    //         status: shell.status,
-    //       }
-    //     }),
-    //   )
-    // }, 1000 * 5)
-
     const shells = await sandboxRef.current?.shells.getShells()
 
-    const runningShells = shells?.filter(
+    console.log("shells", shells)
+    const allRunningShells = shells?.filter(
       (shell) =>
         shell.name === "pnpm run install-and-dev" && shell.status === "RUNNING",
     )
 
-    if (!runningShells?.length) {
+    const newRunningShells = allRunningShells?.filter(
+      (shell) => !subscribedShells.current.has(shell.id),
+    )
+    const shellsToShutdown = allRunningShells?.filter((shell) =>
+      subscribedShells.current.has(shell.id),
+    )
+
+    if (!newRunningShells?.length) {
       return
     }
 
     const openedRunningShells = await Promise.all(
-      shells.map(async (shell) => {
+      newRunningShells.map(async (shell) => {
         return await sandboxRef.current?.shells.open(shell.id)
       }),
     )
 
-    setShellConnectionHash(
-      Math.random().toString(36).substring(2) + Date.now().toString(36),
-    )
+    shellsToShutdown.forEach((shell) => {
+      shell!.dispose()
+    })
 
     openedRunningShells.forEach((shell) => {
       shell!.onOutput(async (data) => {
-        console.log("data", data)
+        console.log("SHELL", shell!.id, "OUTPUT", data)
+
         const latestPackageVersion =
           await getLatestPackageVersionFromError(data)
         if (latestPackageVersion) {
@@ -80,52 +100,19 @@ export const useSandbox = ({
         }
       })
 
-      // shell!.onWillDispose(() => {
-      //   console.log("openedRunningShell disposed")
-      //   setTimeout(() => {
-      //     initShellSubsciption()
-      //   }, 1000 * 10)
-      // })
+      subscribedShells.current.add(shell!.id)
+      setConnectedShellId(shell!.id)
     })
   }
 
-  // PLAN B => with more checks it will work actually
-  // useEffect(() => {
-  //   setInterval(async () => {
-  //     await initShellSubsciption()
-  //   }, 1000 * 5)
-  // }, [])
-
-  const initialize = async (isReconnecting = false) => {
-    if (!isReconnecting) {
-      setIsSandboxLoading(true)
-    }
-    try {
-      const { sandboxId: newSandboxId, startData } =
-        await connectToServerSandbox(sandboxId)
-
-      const connectedSandbox = await connectToSandbox(startData)
-      const newPreviewURL = connectedSandbox.ports.getPreviewUrl(5173)
-      sandboxRef.current = connectedSandbox
+  // subscribe to shells to read output & remount iframe when new shell is created
+  useEffect(() => {
+    const interval = setInterval(async () => {
+      await checkShells()
+    }, 1000 * 5)
 
-      await initShellSubsciption()
-      setPreviewURL(newPreviewURL || null)
-      // setSandboxConnectionHash(
-      //   Math.random().toString(36).substring(2) + Date.now().toString(36),
-      // )
-      setSandboxId(newSandboxId)
-    } catch (error) {
-      console.error("Failed to initialize sandbox in hook:", error)
-      sandboxRef.current = null
-      setSandboxId(null)
-      setSandboxConnectionHash(null)
-      setPreviewURL(null)
-    } finally {
-      if (!isReconnecting) {
-        setIsSandboxLoading(false)
-      }
-    }
-  }
+    return () => clearInterval(interval)
+  }, [])
 
   useEffect(() => {
     initialize()
@@ -151,6 +138,6 @@ export const useSandbox = ({
     missingDependencyInfo,
     clearMissingDependencyInfo,
     // unique hash of a shell connection
-    shellConnectionHash,
+    connectedShellId,
   }
 }

From 8aada153c115e5c3261753124a5eec23a2b3839c Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Sat, 26 Apr 2025 16:35:23 +0400
Subject: [PATCH 090/143] =?UTF-8?q?=F0=9F=94=A5=20add=20sandbox=20sdk=20ro?=
 =?UTF-8?q?utes=20inside=20next=20app=F0=9F=94=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/app/api/sandbox/connect/route.ts     |   49 +
 apps/web/app/api/sandbox/new/route.ts         |   59 +
 .../web/app/studio/[username]/page.client.tsx |   32 +-
 .../{publish => sandbox/[sandboxId]}/page.tsx |   16 +-
 .../components/features/studio/publish/api.ts |   56 +-
 .../studio/publish/hooks/useSandbox.ts        |   29 +-
 apps/web/lib/codesandbox-sdk.ts               |   11 +
 apps/web/package.json                         |    1 +
 apps/web/types/supabase.ts                    | 2744 +----------------
 pnpm-lock.yaml                                |   15 +
 turbo.json                                    |    3 +-
 11 files changed, 213 insertions(+), 2802 deletions(-)
 create mode 100644 apps/web/app/api/sandbox/connect/route.ts
 create mode 100644 apps/web/app/api/sandbox/new/route.ts
 rename apps/web/app/studio/[username]/{publish => sandbox/[sandboxId]}/page.tsx (94%)
 create mode 100644 apps/web/lib/codesandbox-sdk.ts

diff --git a/apps/web/app/api/sandbox/connect/route.ts b/apps/web/app/api/sandbox/connect/route.ts
new file mode 100644
index 00000000..c7515c35
--- /dev/null
+++ b/apps/web/app/api/sandbox/connect/route.ts
@@ -0,0 +1,49 @@
+import { auth } from "@clerk/nextjs/server"
+import { NextResponse } from "next/server"
+import { supabaseWithAdminAccess } from "@/lib/supabase"
+import { codesandboxSdk } from "@/lib/codesandbox-sdk"
+import ShortUUID from "short-uuid"
+
+export async function POST(request: Request) {
+  try {
+    const { userId } = await auth()
+    if (!userId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+    }
+
+    const { shortSandboxId } = await request.json()
+
+    const sandboxId = ShortUUID().toUUID(shortSandboxId)
+
+    if (!sandboxId) {
+      return NextResponse.json(
+        { error: "Sandbox ID is required" },
+        { status: 400 },
+      )
+    }
+
+    const { data: sandbox, error } = await supabaseWithAdminAccess
+      .from("sandboxes")
+      .select("codesandbox_id")
+      .eq("id", sandboxId)
+      .eq("user_id", userId)
+      .single()
+
+    if (error || !sandbox) {
+      return NextResponse.json(
+        { error: "Sandbox not found or access denied" },
+        { status: 404 },
+      )
+    }
+
+    const startData = await codesandboxSdk.sandbox.start(sandbox.codesandbox_id)
+
+    return NextResponse.json({ success: true, startData })
+  } catch (error) {
+    console.error("Error connecting to sandbox:", error)
+    return NextResponse.json(
+      { error: "Internal Server Error" },
+      { status: 500 },
+    )
+  }
+}
diff --git a/apps/web/app/api/sandbox/new/route.ts b/apps/web/app/api/sandbox/new/route.ts
new file mode 100644
index 00000000..dfb17cb8
--- /dev/null
+++ b/apps/web/app/api/sandbox/new/route.ts
@@ -0,0 +1,59 @@
+import { auth } from "@clerk/nextjs/server"
+import { NextResponse } from "next/server"
+import { supabaseWithAdminAccess } from "@/lib/supabase"
+import ShortUUID from "short-uuid"
+import {
+  DEFAULT_HIBERNATION_TIMEOUT,
+  DEFAULT_TEMPLATE,
+  TEMPLATES,
+  codesandboxSdk,
+} from "@/lib/codesandbox-sdk"
+
+export async function POST() {
+  try {
+    const { userId } = await auth()
+
+    if (!userId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+    }
+
+    console.log("Creating CodeSandbox instance...")
+    const sandbox = await codesandboxSdk.sandbox.create({
+      template: TEMPLATES[DEFAULT_TEMPLATE],
+      hibernationTimeoutSeconds: DEFAULT_HIBERNATION_TIMEOUT,
+      privacy: "public", // Public visibility
+    })
+
+    const codesandboxId = sandbox.id
+    console.log(`CodeSandbox instance created: ${codesandboxId}`)
+
+    const now = new Date().toISOString()
+    const { data: dbSandbox, error: dbError } = await supabaseWithAdminAccess
+      .from("sandboxes")
+      .insert({
+        user_id: userId,
+        codesandbox_id: codesandboxId,
+        created_at: now,
+        updated_at: now,
+      })
+      .select()
+      .single()
+
+    if (dbError) {
+      console.error("Error storing sandbox:", dbError)
+      return new NextResponse("Failed to save sandbox data", { status: 500 })
+    }
+
+    console.log(`Sandbox created and stored with ID: ${dbSandbox.id}`)
+
+    const shortId = ShortUUID().fromUUID(dbSandbox.id)
+
+    return NextResponse.json({
+      success: true,
+      shortSandboxId: shortId,
+    })
+  } catch (error) {
+    console.error("Error creating sandbox:", error)
+    return new NextResponse("Internal Server Error", { status: 500 })
+  }
+}
diff --git a/apps/web/app/studio/[username]/page.client.tsx b/apps/web/app/studio/[username]/page.client.tsx
index e2adb03f..f0db2034 100644
--- a/apps/web/app/studio/[username]/page.client.tsx
+++ b/apps/web/app/studio/[username]/page.client.tsx
@@ -5,9 +5,11 @@ import { StudioLayout } from "@/components/features/studio/studio-layout"
 import { DemosTable } from "@/components/features/studio/ui/components-table"
 import { ComponentPublishDialog as ComponentPublishDialogOld } from "@/components/features/studio/editor/component-publish-dialog"
 import Link from "next/link"
-import { ArrowLeft, PlusCircle } from "lucide-react"
+import { ArrowLeft, PlusCircle, Loader2 } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { useRouter, usePathname } from "next/navigation"
+import { createNewSandbox } from "@/components/features/studio/publish/api"
+import { useState } from "react"
 
 interface StudioUsernameClientProps {
   user: User
@@ -24,6 +26,20 @@ export function StudioUsernameClient({
 }: StudioUsernameClientProps) {
   const router = useRouter()
   const pathname = usePathname()
+  const [isCreating, setIsCreating] = useState(false)
+
+  const handleCreateNewSandbox = async () => {
+    try {
+      setIsCreating(true)
+      const { sandboxId } = await createNewSandbox()
+      router.push(`${pathname}/sandbox/${sandboxId}`)
+    } catch (error) {
+      console.error("Failed to create sandbox:", error)
+    } finally {
+      setIsCreating(false)
+    }
+  }
+
   return (
     <StudioLayout user={user}>
       <div className="space-y-6">
@@ -40,13 +56,15 @@ export function StudioUsernameClient({
 
           {(isOwnProfile || isAdmin) && (
             <>
-              <Button
-                onClick={() => window.open(`${pathname}/publish`, "_blank")}
-              >
-                <PlusCircle className="mr-2 h-4 w-4" />
-                Publish Component
+              <Button onClick={handleCreateNewSandbox} disabled={isCreating}>
+                {isCreating ? (
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                ) : (
+                  <PlusCircle className="mr-2 h-4 w-4" />
+                )}
+                Create new component
               </Button>
-              <ComponentPublishDialogOld userId={user.id} />
+              {/* <ComponentPublishDialogOld userId={user.id} /> */}
             </>
           )}
         </div>
diff --git a/apps/web/app/studio/[username]/publish/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
similarity index 94%
rename from apps/web/app/studio/[username]/publish/page.tsx
rename to apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
index 642c1c76..9ddab131 100644
--- a/apps/web/app/studio/[username]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useEffect, useState, Suspense } from "react"
-import { useSearchParams, useRouter } from "next/navigation"
+import { useSearchParams, useRouter, useParams } from "next/navigation"
 import {
   ResizableHandle,
   ResizablePanelGroup,
@@ -25,6 +25,8 @@ const DEFAULT_FILE_ENTRY: FileEntry = {
 }
 
 function PublishPageContent() {
+  const params = useParams()
+  const sandboxId = params.sandboxId as string
   const searchParams = useSearchParams()
   const router = useRouter()
   const [selectedEntry, setSelectedEntry] = useState<FileEntry | null>(
@@ -34,17 +36,15 @@ function PublishPageContent() {
 
   const {
     sandboxRef,
-    sandboxId,
     previewURL,
     isSandboxLoading,
     sandboxConnectionHash,
     reconnectSandbox,
-    // dependencies
     missingDependencyInfo,
     clearMissingDependencyInfo,
     connectedShellId,
   } = useSandbox({
-    defaultSandboxId: searchParams.get("sandboxId"),
+    sandboxId,
   })
 
   const {
@@ -77,14 +77,6 @@ function PublishPageContent() {
     }
   }, [missingDependencyInfo])
 
-  useEffect(() => {
-    if (sandboxId && sandboxId !== searchParams.get("sandboxId")) {
-      router.push(`${window.location.pathname}?sandboxId=${sandboxId}`, {
-        scroll: false,
-      })
-    }
-  }, [sandboxId, router, searchParams])
-
   useEffect(() => {
     if (
       !sandboxRef.current ||
diff --git a/apps/web/components/features/studio/publish/api.ts b/apps/web/components/features/studio/publish/api.ts
index c9e54b91..2d30856c 100644
--- a/apps/web/components/features/studio/publish/api.ts
+++ b/apps/web/components/features/studio/publish/api.ts
@@ -1,39 +1,43 @@
-const API_BASE_URL = "http://localhost:8080"
-
-export interface ProjectResponse {
-  sandboxId: string
-  startData: any
-}
-
-const fetchJSON = async (url: string, opts: RequestInit = {}) => {
-  const res = await fetch(API_BASE_URL + url, opts)
-  if (!res.ok) throw new Error(await res.text())
-
-  return await res.json()
-}
-
-export const connectToServerSandbox = async (
-  sandboxId?: string | null,
-): Promise<ProjectResponse> => {
-  if (sandboxId) {
+export const connectToSandbox = async (
+  shortSandboxId: string,
+): Promise<{ startData: any } | null> => {
+  let retries = 3
+  while (retries > 0) {
     try {
-      const startData = await fetchJSON(`/codesandbox/connect/${sandboxId}`, {
+      const res = await fetch(`/api/sandbox/connect`, {
         method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ shortSandboxId }),
       })
 
-      return { sandboxId, startData }
+      if (!res.ok) throw new Error(await res.text())
+      const response = await res.json()
+
+      return { startData: response.startData }
     } catch (error) {
-      console.error("Failed to load existing sandbox:", error)
-      return createNewSandbox()
+      console.error(
+        `Failed to load existing sandbox (${retries} retries left):`,
+        error,
+      )
+      retries--
+      if (retries === 0) return null
+      await new Promise((resolve) => setTimeout(resolve, 1000))
     }
   }
-  return createNewSandbox()
+  return null
 }
 
-const createNewSandbox = async (): Promise<ProjectResponse> => {
-  const { sandboxId, startData } = await fetchJSON("/codesandbox/create", {
+export const createNewSandbox = async (): Promise<{
+  sandboxId: string
+}> => {
+  const res = await fetch("/api/sandbox/new", {
     method: "POST",
   })
 
-  return { sandboxId, startData }
+  if (!res.ok) throw new Error(await res.text())
+  const response = await res.json()
+
+  return { sandboxId: response.shortSandboxId }
 }
diff --git a/apps/web/components/features/studio/publish/hooks/useSandbox.ts b/apps/web/components/features/studio/publish/hooks/useSandbox.ts
index 664df3a1..72f4b088 100644
--- a/apps/web/components/features/studio/publish/hooks/useSandbox.ts
+++ b/apps/web/components/features/studio/publish/hooks/useSandbox.ts
@@ -1,16 +1,11 @@
 import { SandboxSession } from "@codesandbox/sdk"
-import { connectToSandbox } from "@codesandbox/sdk/browser"
+import { connectToSandbox as connectToCodeSandboxSDK } from "@codesandbox/sdk/browser"
 import { useEffect, useRef, useState } from "react"
-import { connectToServerSandbox } from "../api"
+import { connectToSandbox } from "../api"
 import { getLatestPackageVersionFromError } from "../utils/dependencies"
 
-export const useSandbox = ({
-  defaultSandboxId,
-}: {
-  defaultSandboxId: string | null
-}) => {
+export const useSandbox = ({ sandboxId }: { sandboxId: string }) => {
   const sandboxRef = useRef<SandboxSession | null>(null)
-  const [sandboxId, setSandboxId] = useState<string | null>(defaultSandboxId)
   const [sandboxConnectionHash, setSandboxConnectionHash] = useState<
     string | null
   >(null)
@@ -27,11 +22,17 @@ export const useSandbox = ({
       setIsSandboxLoading(true)
     }
     try {
-      const { sandboxId: newSandboxId, startData } =
-        await connectToServerSandbox(sandboxId)
+      const response = await connectToSandbox(sandboxId)
+
+      if (!response) {
+        // Implement failed logic; redirect to studio page
+        throw new Error("Failed to connect to sandbox")
+      }
+
+      const { startData } = response
 
       console.log("startData", startData)
-      const connectedSandbox = await connectToSandbox(startData)
+      const connectedSandbox = await connectToCodeSandboxSDK(startData)
 
       console.log("connectedSandbox", connectedSandbox)
       const newPreviewURL = connectedSandbox.ports.getPreviewUrl(5173)
@@ -39,11 +40,9 @@ export const useSandbox = ({
 
       setPreviewURL(newPreviewURL || null)
       checkShells()
-      setSandboxId(newSandboxId)
     } catch (error) {
       console.error("Failed to initialize sandbox in hook:", error)
       sandboxRef.current = null
-      setSandboxId(null)
       setSandboxConnectionHash(null)
       setPreviewURL(null)
     } finally {
@@ -105,7 +104,7 @@ export const useSandbox = ({
     })
   }
 
-  // subscribe to shells to read output & remount iframe when new shell is created
+  // Subscribe to shells to read output & remount iframe when new shell is created
   useEffect(() => {
     const interval = setInterval(async () => {
       await checkShells()
@@ -116,7 +115,7 @@ export const useSandbox = ({
 
   useEffect(() => {
     initialize()
-  }, [defaultSandboxId])
+  }, [sandboxId])
 
   const reconnectSandbox = async () => {
     if (!sandboxId) return
diff --git a/apps/web/lib/codesandbox-sdk.ts b/apps/web/lib/codesandbox-sdk.ts
new file mode 100644
index 00000000..f1110c4a
--- /dev/null
+++ b/apps/web/lib/codesandbox-sdk.ts
@@ -0,0 +1,11 @@
+import { CodeSandbox } from "@codesandbox/sdk"
+
+export const codesandboxSdk = new CodeSandbox(process.env.CSB_API_KEY!)
+
+export const DEFAULT_TEMPLATE = "21st-vite"
+
+export const TEMPLATES = {
+  "21st-vite": "7jrj3k",
+}
+
+export const DEFAULT_HIBERNATION_TIMEOUT = 60 * 1000 // 1 minute
diff --git a/apps/web/package.json b/apps/web/package.json
index e04dc425..99ebcda4 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -92,6 +92,7 @@
     "react-resizable-panels": "^2.1.8",
     "resend": "^4.1.2",
     "shiki": "^3.0.0",
+    "short-uuid": "^5.2.0",
     "sonner": "^1.5.0",
     "stripe": "^17.6.0",
     "svix": "^1.37.0",
diff --git a/apps/web/types/supabase.ts b/apps/web/types/supabase.ts
index eba5204d..dd7a5544 100644
--- a/apps/web/types/supabase.ts
+++ b/apps/web/types/supabase.ts
@@ -1,2741 +1,3 @@
-export type Json =
-  | string
-  | number
-  | boolean
-  | null
-  | { [key: string]: Json | undefined }
-  | Json[]
-
-export type Database = {
-  public: {
-    Tables: {
-      api_keys: {
-        Row: {
-          created_at: string | null
-          expires_at: string | null
-          id: string
-          is_active: boolean | null
-          key: string
-          last_used_at: string | null
-          plan: Database["public"]["Enums"]["api_plan"] | null
-          project_url: string | null
-          requests_count: number | null
-          requests_limit: number | null
-          user_id: string
-        }
-        Insert: {
-          created_at?: string | null
-          expires_at?: string | null
-          id?: string
-          is_active?: boolean | null
-          key: string
-          last_used_at?: string | null
-          plan?: Database["public"]["Enums"]["api_plan"] | null
-          project_url?: string | null
-          requests_count?: number | null
-          requests_limit?: number | null
-          user_id: string
-        }
-        Update: {
-          created_at?: string | null
-          expires_at?: string | null
-          id?: string
-          is_active?: boolean | null
-          key?: string
-          last_used_at?: string | null
-          plan?: Database["public"]["Enums"]["api_plan"] | null
-          project_url?: string | null
-          requests_count?: number | null
-          requests_limit?: number | null
-          user_id?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "api_keys_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "referral_analytics"
-            referencedColumns: ["user_id"]
-          },
-          {
-            foreignKeyName: "api_keys_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "users"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      backup_code_embeddings: {
-        Row: {
-          created_at: string | null
-          embedding: string | null
-          id: string | null
-          item_id: number | null
-          item_type: string | null
-          metadata: Json | null
-        }
-        Insert: {
-          created_at?: string | null
-          embedding?: string | null
-          id?: string | null
-          item_id?: number | null
-          item_type?: string | null
-          metadata?: Json | null
-        }
-        Update: {
-          created_at?: string | null
-          embedding?: string | null
-          id?: string | null
-          item_id?: number | null
-          item_type?: string | null
-          metadata?: Json | null
-        }
-        Relationships: []
-      }
-      backup_usage_embeddings: {
-        Row: {
-          created_at: string | null
-          embedding: string | null
-          id: string | null
-          item_id: number | null
-          item_type: string | null
-          metadata: Json | null
-          usage_description: string | null
-        }
-        Insert: {
-          created_at?: string | null
-          embedding?: string | null
-          id?: string | null
-          item_id?: number | null
-          item_type?: string | null
-          metadata?: Json | null
-          usage_description?: string | null
-        }
-        Update: {
-          created_at?: string | null
-          embedding?: string | null
-          id?: string | null
-          item_id?: number | null
-          item_type?: string | null
-          metadata?: Json | null
-          usage_description?: string | null
-        }
-        Relationships: []
-      }
-      code_embeddings: {
-        Row: {
-          created_at: string | null
-          embedding: string
-          id: string
-          item_id: number
-          item_type: string
-          metadata: Json | null
-        }
-        Insert: {
-          created_at?: string | null
-          embedding: string
-          id?: string
-          item_id: number
-          item_type: string
-          metadata?: Json | null
-        }
-        Update: {
-          created_at?: string | null
-          embedding?: string
-          id?: string
-          item_id?: number
-          item_type?: string
-          metadata?: Json | null
-        }
-        Relationships: []
-      }
-      collections: {
-        Row: {
-          cover_url: string | null
-          created_at: string
-          description: string | null
-          id: string
-          is_public: boolean
-          name: string
-          slug: string
-          updated_at: string
-          user_id: string
-        }
-        Insert: {
-          cover_url?: string | null
-          created_at?: string
-          description?: string | null
-          id?: string
-          is_public?: boolean
-          name: string
-          slug: string
-          updated_at?: string
-          user_id: string
-        }
-        Update: {
-          cover_url?: string | null
-          created_at?: string
-          description?: string | null
-          id?: string
-          is_public?: boolean
-          name?: string
-          slug?: string
-          updated_at?: string
-          user_id?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "collections_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "referral_analytics"
-            referencedColumns: ["user_id"]
-          },
-          {
-            foreignKeyName: "collections_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "users"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      component_analytics: {
-        Row: {
-          activity_type: string | null
-          component_id: number
-          created_at: string
-          id: number
-          user_id: string | null
-        }
-        Insert: {
-          activity_type?: string | null
-          component_id: number
-          created_at?: string
-          id?: number
-          user_id?: string | null
-        }
-        Update: {
-          activity_type?: string | null
-          component_id?: number
-          created_at?: string
-          id?: number
-          user_id?: string | null
-        }
-        Relationships: [
-          {
-            foreignKeyName: "component_analytics_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_analytics_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view_v2"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_analytics_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "components"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_analytics_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "components_with_username"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_analytics_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "referral_analytics"
-            referencedColumns: ["user_id"]
-          },
-          {
-            foreignKeyName: "component_analytics_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "users"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      component_dependencies_closure: {
-        Row: {
-          component_id: number
-          dependency_component_id: number
-          depth: number
-          is_demo_dependency: boolean
-        }
-        Insert: {
-          component_id: number
-          dependency_component_id: number
-          depth: number
-          is_demo_dependency?: boolean
-        }
-        Update: {
-          component_id?: number
-          dependency_component_id?: number
-          depth?: number
-          is_demo_dependency?: boolean
-        }
-        Relationships: [
-          {
-            foreignKeyName: "component_dependencies_closure_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_dependencies_closure_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view_v2"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_dependencies_closure_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "components"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_dependencies_closure_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "components_with_username"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_dependencies_closure_dependency_component_id_fkey"
-            columns: ["dependency_component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_dependencies_closure_dependency_component_id_fkey"
-            columns: ["dependency_component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view_v2"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_dependencies_closure_dependency_component_id_fkey"
-            columns: ["dependency_component_id"]
-            isOneToOne: false
-            referencedRelation: "components"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_dependencies_closure_dependency_component_id_fkey"
-            columns: ["dependency_component_id"]
-            isOneToOne: false
-            referencedRelation: "components_with_username"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      component_likes: {
-        Row: {
-          component_id: number
-          liked_at: string | null
-          user_id: string
-        }
-        Insert: {
-          component_id: number
-          liked_at?: string | null
-          user_id: string
-        }
-        Update: {
-          component_id?: number
-          liked_at?: string | null
-          user_id?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "component_likes_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_likes_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view_v2"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_likes_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "components"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_likes_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "components_with_username"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_likes_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "referral_analytics"
-            referencedColumns: ["user_id"]
-          },
-          {
-            foreignKeyName: "component_likes_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "users"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      component_tags: {
-        Row: {
-          component_id: number
-          tag_id: number
-        }
-        Insert: {
-          component_id?: number
-          tag_id: number
-        }
-        Update: {
-          component_id?: number
-          tag_id?: number
-        }
-        Relationships: [
-          {
-            foreignKeyName: "component_tags_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_tags_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view_v2"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_tags_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "components"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_tags_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "components_with_username"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_tags_tag_id_fkey"
-            columns: ["tag_id"]
-            isOneToOne: false
-            referencedRelation: "tags"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      components: {
-        Row: {
-          code: string
-          compiled_css: string | null
-          component_names: Json
-          component_slug: string
-          created_at: string
-          demo_code: string | null
-          demo_dependencies: Json | null
-          demo_direct_registry_dependencies: Json
-          dependencies: Json | null
-          description: string | null
-          direct_registry_dependencies: Json
-          downloads_count: number
-          fts: unknown | null
-          global_css_extension: string | null
-          hunter_username: string | null
-          id: number
-          is_paid: boolean
-          is_public: boolean
-          license: string
-          likes_count: number
-          name: string
-          payment_url: string | null
-          preview_url: string
-          price: number
-          pro_preview_image_url: string | null
-          registry: string
-          registry_url: string | null
-          tailwind_config_extension: string | null
-          updated_at: string
-          user_id: string
-          video_url: string | null
-          website_url: string | null
-        }
-        Insert: {
-          code?: string
-          compiled_css?: string | null
-          component_names: Json
-          component_slug: string
-          created_at?: string
-          demo_code?: string | null
-          demo_dependencies?: Json | null
-          demo_direct_registry_dependencies?: Json
-          dependencies?: Json | null
-          description?: string | null
-          direct_registry_dependencies?: Json
-          downloads_count?: number
-          fts?: unknown | null
-          global_css_extension?: string | null
-          hunter_username?: string | null
-          id?: number
-          is_paid?: boolean
-          is_public?: boolean
-          license?: string
-          likes_count?: number
-          name: string
-          payment_url?: string | null
-          preview_url: string
-          price?: number
-          pro_preview_image_url?: string | null
-          registry?: string
-          registry_url?: string | null
-          tailwind_config_extension?: string | null
-          updated_at?: string
-          user_id: string
-          video_url?: string | null
-          website_url?: string | null
-        }
-        Update: {
-          code?: string
-          compiled_css?: string | null
-          component_names?: Json
-          component_slug?: string
-          created_at?: string
-          demo_code?: string | null
-          demo_dependencies?: Json | null
-          demo_direct_registry_dependencies?: Json
-          dependencies?: Json | null
-          description?: string | null
-          direct_registry_dependencies?: Json
-          downloads_count?: number
-          fts?: unknown | null
-          global_css_extension?: string | null
-          hunter_username?: string | null
-          id?: number
-          is_paid?: boolean
-          is_public?: boolean
-          license?: string
-          likes_count?: number
-          name?: string
-          payment_url?: string | null
-          preview_url?: string
-          price?: number
-          pro_preview_image_url?: string | null
-          registry?: string
-          registry_url?: string | null
-          tailwind_config_extension?: string | null
-          updated_at?: string
-          user_id?: string
-          video_url?: string | null
-          website_url?: string | null
-        }
-        Relationships: [
-          {
-            foreignKeyName: "components_hunter_username_fkey"
-            columns: ["hunter_username"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view"
-            referencedColumns: ["source_author_username"]
-          },
-          {
-            foreignKeyName: "components_hunter_username_fkey"
-            columns: ["hunter_username"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view"
-            referencedColumns: ["dependency_author_username"]
-          },
-          {
-            foreignKeyName: "components_hunter_username_fkey"
-            columns: ["hunter_username"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view_v2"
-            referencedColumns: ["source_author_username"]
-          },
-          {
-            foreignKeyName: "components_hunter_username_fkey"
-            columns: ["hunter_username"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view_v2"
-            referencedColumns: ["dependency_author_username"]
-          },
-          {
-            foreignKeyName: "components_hunter_username_fkey"
-            columns: ["hunter_username"]
-            isOneToOne: false
-            referencedRelation: "components_with_username"
-            referencedColumns: ["username"]
-          },
-          {
-            foreignKeyName: "components_hunter_username_fkey"
-            columns: ["hunter_username"]
-            isOneToOne: false
-            referencedRelation: "users"
-            referencedColumns: ["username"]
-          },
-          {
-            foreignKeyName: "components_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "referral_analytics"
-            referencedColumns: ["user_id"]
-          },
-          {
-            foreignKeyName: "components_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "users"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      components_purchases: {
-        Row: {
-          component_id: number
-          created_at: string | null
-          id: string
-          price_paid: number
-          user_id: string
-        }
-        Insert: {
-          component_id: number
-          created_at?: string | null
-          id?: string
-          price_paid: number
-          user_id: string
-        }
-        Update: {
-          component_id?: number
-          created_at?: string | null
-          id?: string
-          price_paid?: number
-          user_id?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "components_purchases_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "components_purchases_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view_v2"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "components_purchases_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "components"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "components_purchases_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "components_with_username"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "components_purchases_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "referral_analytics"
-            referencedColumns: ["user_id"]
-          },
-          {
-            foreignKeyName: "components_purchases_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "users"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      components_to_collections: {
-        Row: {
-          collection_id: string
-          component_id: number
-          created_at: string
-        }
-        Insert: {
-          collection_id: string
-          component_id: number
-          created_at?: string
-        }
-        Update: {
-          collection_id?: string
-          component_id?: number
-          created_at?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "components_to_collections_collection_id_fkey"
-            columns: ["collection_id"]
-            isOneToOne: false
-            referencedRelation: "collections"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "components_to_collections_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "components_to_collections_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view_v2"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "components_to_collections_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "components"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "components_to_collections_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "components_with_username"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      demo_bookmarks: {
-        Row: {
-          bookmarked_at: string | null
-          demo_id: number
-          user_id: string
-        }
-        Insert: {
-          bookmarked_at?: string | null
-          demo_id: number
-          user_id: string
-        }
-        Update: {
-          bookmarked_at?: string | null
-          demo_id?: number
-          user_id?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "fk_demo"
-            columns: ["demo_id"]
-            isOneToOne: false
-            referencedRelation: "demos"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      demo_tags: {
-        Row: {
-          created_at: string | null
-          demo_id: number
-          id: number
-          tag_id: number
-        }
-        Insert: {
-          created_at?: string | null
-          demo_id: number
-          id?: never
-          tag_id: number
-        }
-        Update: {
-          created_at?: string | null
-          demo_id?: number
-          id?: never
-          tag_id?: number
-        }
-        Relationships: [
-          {
-            foreignKeyName: "demo_tags_demo_id_fkey"
-            columns: ["demo_id"]
-            isOneToOne: false
-            referencedRelation: "demos"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "demo_tags_tag_id_fkey"
-            columns: ["tag_id"]
-            isOneToOne: false
-            referencedRelation: "tags"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      demos: {
-        Row: {
-          bookmarks_count: number | null
-          bundle_hash?: string | null
-          bundle_html_url?: string | null
-          compiled_css: string | null
-          component_id: number | null
-          created_at: string | null
-          demo_code: string
-          demo_dependencies: Json | null
-          demo_direct_registry_dependencies: Json | null
-          demo_slug: string
-          embedding: string | null
-          embedding_oai: string | null
-          fts: unknown | null
-          id: number
-          name: string | null
-          preview_url: string | null
-          pro_preview_image_url: string | null
-          updated_at: string | null
-          user_id: string
-          video_url: string | null
-        }
-        Insert: {
-          bookmarks_count?: number | null
-          bundle_hash?: string | null
-          bundle_html_url?: string | null
-          compiled_css?: string | null
-          component_id?: number | null
-          created_at?: string | null
-          demo_code: string
-          demo_dependencies?: Json | null
-          demo_direct_registry_dependencies?: Json | null
-          demo_slug?: string
-          embedding?: string | null
-          embedding_oai?: string | null
-          fts?: unknown | null
-          id?: number
-          name?: string | null
-          preview_url?: string | null
-          pro_preview_image_url?: string | null
-          updated_at?: string | null
-          user_id: string
-          video_url?: string | null
-        }
-        Update: {
-          bookmarks_count?: number | null
-          bundle_hash?: string | null
-          bundle_html_url?: string | null
-          compiled_css?: string | null
-          component_id?: number | null
-          created_at?: string | null
-          demo_code?: string
-          demo_dependencies?: Json | null
-          demo_direct_registry_dependencies?: Json | null
-          demo_slug?: string
-          embedding?: string | null
-          embedding_oai?: string | null
-          fts?: unknown | null
-          id?: number
-          name?: string | null
-          preview_url?: string | null
-          pro_preview_image_url?: string | null
-          updated_at?: string | null
-          user_id?: string
-          video_url?: string | null
-        }
-        Relationships: [
-          {
-            foreignKeyName: "demos_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "demos_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view_v2"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "demos_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "components"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "demos_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "components_with_username"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "demos_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "referral_analytics"
-            referencedColumns: ["user_id"]
-          },
-          {
-            foreignKeyName: "demos_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "users"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      feedback: {
-        Row: {
-          content: string
-          created_at: string
-          id: number
-          response: string | null
-          status: string | null
-          type: string
-          user_id: string
-        }
-        Insert: {
-          content: string
-          created_at?: string
-          id?: number
-          response?: string | null
-          status?: string | null
-          type: string
-          user_id: string
-        }
-        Update: {
-          content?: string
-          created_at?: string
-          id?: number
-          response?: string | null
-          status?: string | null
-          type?: string
-          user_id?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "feedback_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "referral_analytics"
-            referencedColumns: ["user_id"]
-          },
-          {
-            foreignKeyName: "feedback_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "users"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      mcp_author_payouts: {
-        Row: {
-          author_id: string
-          created_at: string | null
-          id: number
-          paypal_email: string
-          period_end: string
-          period_start: string
-          processed_at: string | null
-          status: string
-          total_amount: number
-          total_usage: number
-          transaction_id: string | null
-        }
-        Insert: {
-          author_id: string
-          created_at?: string | null
-          id?: never
-          paypal_email: string
-          period_end: string
-          period_start: string
-          processed_at?: string | null
-          status?: string
-          total_amount: number
-          total_usage: number
-          transaction_id?: string | null
-        }
-        Update: {
-          author_id?: string
-          created_at?: string | null
-          id?: never
-          paypal_email?: string
-          period_end?: string
-          period_start?: string
-          processed_at?: string | null
-          status?: string
-          total_amount?: number
-          total_usage?: number
-          transaction_id?: string | null
-        }
-        Relationships: [
-          {
-            foreignKeyName: "fk_author"
-            columns: ["author_id"]
-            isOneToOne: false
-            referencedRelation: "referral_analytics"
-            referencedColumns: ["user_id"]
-          },
-          {
-            foreignKeyName: "fk_author"
-            columns: ["author_id"]
-            isOneToOne: false
-            referencedRelation: "users"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      mcp_component_usage: {
-        Row: {
-          author_id: string
-          author_share: number
-          component_id: number
-          created_at: string | null
-          generation_request_id: number
-          id: number
-          payout_id: number | null
-          payout_status: string
-        }
-        Insert: {
-          author_id: string
-          author_share: number
-          component_id: number
-          created_at?: string | null
-          generation_request_id: number
-          id?: never
-          payout_id?: number | null
-          payout_status?: string
-        }
-        Update: {
-          author_id?: string
-          author_share?: number
-          component_id?: number
-          created_at?: string | null
-          generation_request_id?: number
-          id?: never
-          payout_id?: number | null
-          payout_status?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "fk_author"
-            columns: ["author_id"]
-            isOneToOne: false
-            referencedRelation: "referral_analytics"
-            referencedColumns: ["user_id"]
-          },
-          {
-            foreignKeyName: "fk_author"
-            columns: ["author_id"]
-            isOneToOne: false
-            referencedRelation: "users"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "fk_component"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "fk_component"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view_v2"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "fk_component"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "components"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "fk_component"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "components_with_username"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "fk_generation_request"
-            columns: ["generation_request_id"]
-            isOneToOne: false
-            referencedRelation: "mcp_generation_requests"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      mcp_generation_requests: {
-        Row: {
-          api_key: string
-          created_at: string | null
-          generation_cost: number
-          id: number
-          search_query: string
-          subscription_plan: string
-          user_id: string
-        }
-        Insert: {
-          api_key: string
-          created_at?: string | null
-          generation_cost: number
-          id?: never
-          search_query: string
-          subscription_plan: string
-          user_id: string
-        }
-        Update: {
-          api_key?: string
-          created_at?: string | null
-          generation_cost?: number
-          id?: never
-          search_query?: string
-          subscription_plan?: string
-          user_id?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "fk_user"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "referral_analytics"
-            referencedColumns: ["user_id"]
-          },
-          {
-            foreignKeyName: "fk_user"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "users"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      plans: {
-        Row: {
-          add_usage: number | null
-          created_at: string
-          env: string | null
-          id: number
-          period: string | null
-          price: number | null
-          stripe_plan_id: string | null
-          type: string | null
-        }
-        Insert: {
-          add_usage?: number | null
-          created_at?: string
-          env?: string | null
-          id?: number
-          period?: string | null
-          price?: number | null
-          stripe_plan_id?: string | null
-          type?: string | null
-        }
-        Update: {
-          add_usage?: number | null
-          created_at?: string
-          env?: string | null
-          id?: number
-          period?: string | null
-          price?: number | null
-          stripe_plan_id?: string | null
-          type?: string | null
-        }
-        Relationships: []
-      }
-      prompt_rules: {
-        Row: {
-          additional_context: string | null
-          created_at: string | null
-          id: number
-          name: string
-          tech_stack: Json | null
-          theme: Json | null
-          updated_at: string | null
-          user_id: string
-        }
-        Insert: {
-          additional_context?: string | null
-          created_at?: string | null
-          id?: number
-          name: string
-          tech_stack?: Json | null
-          theme?: Json | null
-          updated_at?: string | null
-          user_id: string
-        }
-        Update: {
-          additional_context?: string | null
-          created_at?: string | null
-          id?: number
-          name?: string
-          tech_stack?: Json | null
-          theme?: Json | null
-          updated_at?: string | null
-          user_id?: string
-        }
-        Relationships: []
-      }
-      referral_payments: {
-        Row: {
-          amount: number
-          created_at: string
-          currency: string
-          id: number
-          notes: string | null
-          payment_date: string
-          reference_number: string | null
-          status: Database["public"]["Enums"]["payment_status"]
-          updated_at: string
-          user_id: string
-        }
-        Insert: {
-          amount: number
-          created_at?: string
-          currency?: string
-          id?: number
-          notes?: string | null
-          payment_date: string
-          reference_number?: string | null
-          status?: Database["public"]["Enums"]["payment_status"]
-          updated_at?: string
-          user_id: string
-        }
-        Update: {
-          amount?: number
-          created_at?: string
-          currency?: string
-          id?: number
-          notes?: string | null
-          payment_date?: string
-          reference_number?: string | null
-          status?: Database["public"]["Enums"]["payment_status"]
-          updated_at?: string
-          user_id?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "referral_payments_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "referral_analytics"
-            referencedColumns: ["user_id"]
-          },
-          {
-            foreignKeyName: "referral_payments_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "users"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      submissions: {
-        Row: {
-          component_id: number
-          created_at: string
-          id: number
-          moderators_feedback: string | null
-          status: Database["public"]["Enums"]["submission_status"]
-        }
-        Insert: {
-          component_id: number
-          created_at?: string
-          id?: number
-          moderators_feedback?: string | null
-          status?: Database["public"]["Enums"]["submission_status"]
-        }
-        Update: {
-          component_id?: number
-          created_at?: string
-          id?: number
-          moderators_feedback?: string | null
-          status?: Database["public"]["Enums"]["submission_status"]
-        }
-        Relationships: [
-          {
-            foreignKeyName: "submissions_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: true
-            referencedRelation: "component_dependencies_graph_view"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "submissions_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: true
-            referencedRelation: "component_dependencies_graph_view_v2"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "submissions_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: true
-            referencedRelation: "components"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "submissions_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: true
-            referencedRelation: "components_with_username"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      tags: {
-        Row: {
-          id: number
-          name: string
-          slug: string
-        }
-        Insert: {
-          id?: number
-          name: string
-          slug: string
-        }
-        Update: {
-          id?: number
-          name?: string
-          slug?: string
-        }
-        Relationships: []
-      }
-      templates: {
-        Row: {
-          created_at: string
-          description: string | null
-          downloads_count: number | null
-          id: number
-          is_public: boolean | null
-          likes_count: number | null
-          name: string
-          payment_url: string | null
-          preview_url: string
-          price: number
-          template_slug: string
-          updated_at: string
-          user_id: string
-          video_url: string | null
-          website_preview_url: string
-        }
-        Insert: {
-          created_at?: string
-          description?: string | null
-          downloads_count?: number | null
-          id?: number
-          is_public?: boolean | null
-          likes_count?: number | null
-          name: string
-          payment_url?: string | null
-          preview_url: string
-          price?: number
-          template_slug: string
-          updated_at?: string
-          user_id: string
-          video_url?: string | null
-          website_preview_url: string
-        }
-        Update: {
-          created_at?: string
-          description?: string | null
-          downloads_count?: number | null
-          id?: number
-          is_public?: boolean | null
-          likes_count?: number | null
-          name?: string
-          payment_url?: string | null
-          preview_url?: string
-          price?: number
-          template_slug?: string
-          updated_at?: string
-          user_id?: string
-          video_url?: string | null
-          website_preview_url?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "templates_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "referral_analytics"
-            referencedColumns: ["user_id"]
-          },
-          {
-            foreignKeyName: "templates_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "users"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      templates_tags: {
-        Row: {
-          created_at: string | null
-          id: number
-          tag_id: number
-          template_id: number
-        }
-        Insert: {
-          created_at?: string | null
-          id?: number
-          tag_id: number
-          template_id: number
-        }
-        Update: {
-          created_at?: string | null
-          id?: number
-          tag_id?: number
-          template_id?: number
-        }
-        Relationships: [
-          {
-            foreignKeyName: "templates_tags_tag_id_fkey"
-            columns: ["tag_id"]
-            isOneToOne: false
-            referencedRelation: "tags"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "templates_tags_template_id_fkey"
-            columns: ["template_id"]
-            isOneToOne: false
-            referencedRelation: "templates"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      usage_embeddings: {
-        Row: {
-          created_at: string | null
-          embedding: string
-          id: string
-          item_id: number
-          item_type: string
-          metadata: Json | null
-          usage_description: string | null
-        }
-        Insert: {
-          created_at?: string | null
-          embedding: string
-          id?: string
-          item_id: number
-          item_type: string
-          metadata?: Json | null
-          usage_description?: string | null
-        }
-        Update: {
-          created_at?: string | null
-          embedding?: string
-          id?: string
-          item_id?: number
-          item_type?: string
-          metadata?: Json | null
-          usage_description?: string | null
-        }
-        Relationships: []
-      }
-      usages: {
-        Row: {
-          created_at: string
-          id: number
-          limit: number | null
-          usage: number | null
-          user_id: string | null
-        }
-        Insert: {
-          created_at?: string
-          id?: number
-          limit?: number | null
-          usage?: number | null
-          user_id?: string | null
-        }
-        Update: {
-          created_at?: string
-          id?: number
-          limit?: number | null
-          usage?: number | null
-          user_id?: string | null
-        }
-        Relationships: [
-          {
-            foreignKeyName: "usage_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: true
-            referencedRelation: "referral_analytics"
-            referencedColumns: ["user_id"]
-          },
-          {
-            foreignKeyName: "usage_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: true
-            referencedRelation: "users"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      users: {
-        Row: {
-          bio: string | null
-          created_at: string
-          display_image_url: string | null
-          display_name: string | null
-          display_username: string | null
-          email: string
-          github_url: string | null
-          id: string
-          image_url: string | null
-          is_admin: boolean
-          manually_added: boolean
-          name: string | null
-          paypal_email: string | null
-          pro_banner_url: string | null
-          pro_referral_url: string | null
-          ref: string | null
-          role: Database["public"]["Enums"]["user_role"] | null
-          twitter_url: string | null
-          updated_at: string | null
-          username: string | null
-          website_url: string | null
-        }
-        Insert: {
-          bio?: string | null
-          created_at?: string
-          display_image_url?: string | null
-          display_name?: string | null
-          display_username?: string | null
-          email?: string
-          github_url?: string | null
-          id: string
-          image_url?: string | null
-          is_admin?: boolean
-          manually_added?: boolean
-          name?: string | null
-          paypal_email?: string | null
-          pro_banner_url?: string | null
-          pro_referral_url?: string | null
-          ref?: string | null
-          role?: Database["public"]["Enums"]["user_role"] | null
-          twitter_url?: string | null
-          updated_at?: string | null
-          username?: string | null
-          website_url?: string | null
-        }
-        Update: {
-          bio?: string | null
-          created_at?: string
-          display_image_url?: string | null
-          display_name?: string | null
-          display_username?: string | null
-          email?: string
-          github_url?: string | null
-          id?: string
-          image_url?: string | null
-          is_admin?: boolean
-          manually_added?: boolean
-          name?: string | null
-          paypal_email?: string | null
-          pro_banner_url?: string | null
-          pro_referral_url?: string | null
-          ref?: string | null
-          role?: Database["public"]["Enums"]["user_role"] | null
-          twitter_url?: string | null
-          updated_at?: string | null
-          username?: string | null
-          website_url?: string | null
-        }
-        Relationships: []
-      }
-      users_to_plans: {
-        Row: {
-          created_at: string
-          id: number
-          last_paid_at: string | null
-          meta: Json | null
-          plan_id: number | null
-          status: string | null
-          updated_at: string
-          user_id: string | null
-        }
-        Insert: {
-          created_at?: string
-          id?: number
-          last_paid_at?: string | null
-          meta?: Json | null
-          plan_id?: number | null
-          status?: string | null
-          updated_at?: string
-          user_id?: string | null
-        }
-        Update: {
-          created_at?: string
-          id?: number
-          last_paid_at?: string | null
-          meta?: Json | null
-          plan_id?: number | null
-          status?: string | null
-          updated_at?: string
-          user_id?: string | null
-        }
-        Relationships: [
-          {
-            foreignKeyName: "users_to_plans_plan_id_fkey"
-            columns: ["plan_id"]
-            isOneToOne: false
-            referencedRelation: "plans"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "users_to_plans_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: true
-            referencedRelation: "referral_analytics"
-            referencedColumns: ["user_id"]
-          },
-          {
-            foreignKeyName: "users_to_plans_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: true
-            referencedRelation: "users"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-    }
-    Views: {
-      component_dependencies_graph_view: {
-        Row: {
-          code: string | null
-          component_id: number | null
-          component_names: Json | null
-          component_slug: string | null
-          created_at: string | null
-          demo_code: string | null
-          demo_dependencies: Json | null
-          demo_direct_registry_dependencies: Json | null
-          dependencies: Json | null
-          dependency_author_display_username: string | null
-          dependency_author_username: string | null
-          dependency_component_id: number | null
-          depth: number | null
-          description: string | null
-          direct_registry_dependencies: Json | null
-          downloads_count: number | null
-          fts: unknown | null
-          id: number | null
-          is_demo_dependency: boolean | null
-          is_public: boolean | null
-          license: string | null
-          likes_count: number | null
-          name: string | null
-          preview_url: string | null
-          registry: string | null
-          source_author_display_username: string | null
-          source_author_username: string | null
-          source_component_slug: string | null
-          updated_at: string | null
-          user_id: string | null
-        }
-        Relationships: [
-          {
-            foreignKeyName: "component_dependencies_closure_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_dependencies_closure_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view_v2"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_dependencies_closure_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "components"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_dependencies_closure_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "components_with_username"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_dependencies_closure_dependency_component_id_fkey"
-            columns: ["dependency_component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_dependencies_closure_dependency_component_id_fkey"
-            columns: ["dependency_component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view_v2"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_dependencies_closure_dependency_component_id_fkey"
-            columns: ["dependency_component_id"]
-            isOneToOne: false
-            referencedRelation: "components"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_dependencies_closure_dependency_component_id_fkey"
-            columns: ["dependency_component_id"]
-            isOneToOne: false
-            referencedRelation: "components_with_username"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "components_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "referral_analytics"
-            referencedColumns: ["user_id"]
-          },
-          {
-            foreignKeyName: "components_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "users"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      component_dependencies_graph_view_v2: {
-        Row: {
-          code: string | null
-          component_id: number | null
-          component_names: Json | null
-          component_slug: string | null
-          created_at: string | null
-          demo_code: string | null
-          demo_dependencies: Json | null
-          demo_direct_registry_dependencies: Json | null
-          dependencies: Json | null
-          dependency_author_display_username: string | null
-          dependency_author_username: string | null
-          dependency_component_id: number | null
-          depth: number | null
-          description: string | null
-          direct_registry_dependencies: Json | null
-          downloads_count: number | null
-          fts: unknown | null
-          global_css_extension: string | null
-          id: number | null
-          is_demo_dependency: boolean | null
-          is_public: boolean | null
-          license: string | null
-          likes_count: number | null
-          name: string | null
-          preview_url: string | null
-          registry: string | null
-          source_author_display_username: string | null
-          source_author_username: string | null
-          source_component_slug: string | null
-          tailwind_config_extension: string | null
-          updated_at: string | null
-          user_id: string | null
-        }
-        Relationships: [
-          {
-            foreignKeyName: "component_dependencies_closure_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_dependencies_closure_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view_v2"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_dependencies_closure_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "components"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_dependencies_closure_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "components_with_username"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_dependencies_closure_dependency_component_id_fkey"
-            columns: ["dependency_component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_dependencies_closure_dependency_component_id_fkey"
-            columns: ["dependency_component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view_v2"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_dependencies_closure_dependency_component_id_fkey"
-            columns: ["dependency_component_id"]
-            isOneToOne: false
-            referencedRelation: "components"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_dependencies_closure_dependency_component_id_fkey"
-            columns: ["dependency_component_id"]
-            isOneToOne: false
-            referencedRelation: "components_with_username"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "components_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "referral_analytics"
-            referencedColumns: ["user_id"]
-          },
-          {
-            foreignKeyName: "components_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "users"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      component_stats: {
-        Row: {
-          count: number | null
-          filter_type: string | null
-        }
-        Relationships: []
-      }
-      components_with_username: {
-        Row: {
-          code: string | null
-          component_names: Json | null
-          component_slug: string | null
-          created_at: string | null
-          demo_code: string | null
-          demo_dependencies: Json | null
-          demo_direct_registry_dependencies: Json | null
-          dependencies: Json | null
-          description: string | null
-          direct_registry_dependencies: Json | null
-          downloads_count: number | null
-          fts: unknown | null
-          id: number | null
-          is_public: boolean | null
-          license: string | null
-          likes_count: number | null
-          name: string | null
-          preview_url: string | null
-          registry: string | null
-          updated_at: string | null
-          user: Json | null
-          user_id: string | null
-          username: string | null
-          video_url: string | null
-        }
-        Relationships: [
-          {
-            foreignKeyName: "components_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "referral_analytics"
-            referencedColumns: ["user_id"]
-          },
-          {
-            foreignKeyName: "components_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "users"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      monthly_referral_analytics: {
-        Row: {
-          avg_amount: number | null
-          month: string | null
-          payments_count: number | null
-          total_amount: number | null
-        }
-        Relationships: []
-      }
-      mv_component_analytics: {
-        Row: {
-          activity_type: string | null
-          component_id: number | null
-          count: number | null
-        }
-        Relationships: [
-          {
-            foreignKeyName: "component_analytics_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_analytics_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "component_dependencies_graph_view_v2"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_analytics_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "components"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "component_analytics_component_id_fkey"
-            columns: ["component_id"]
-            isOneToOne: false
-            referencedRelation: "components_with_username"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      referral_analytics: {
-        Row: {
-          avg_payment: number | null
-          email: string | null
-          first_payment: string | null
-          last_payment: string | null
-          referral_code: string | null
-          total_earned: number | null
-          total_payments: number | null
-          user_id: string | null
-        }
-        Relationships: []
-      }
-    }
-    Functions: {
-      analyze_author_payouts: {
-        Args: Record<PropertyKey, never>
-        Returns: {
-          author_id: string
-          username: string
-          display_name: string
-          published_components: number
-          total_usage: number
-          free_plan_usage: number
-          paid_plan_usage: number
-          potential_amount: number
-          actual_amount: number
-          has_payouts: boolean
-          last_payout_date: string
-          last_payout_status: string
-        }[]
-      }
-      analyze_component_usage: {
-        Args: Record<PropertyKey, never>
-        Returns: {
-          author_id: string
-          username: string
-          display_name: string
-          component_id: number
-          component_name: string
-          total_usage: number
-          free_plan_usage: number
-          paid_plan_usage: number
-          total_amount: number
-          has_payouts: boolean
-        }[]
-      }
-      check_api_key: {
-        Args: {
-          api_key: string
-        }
-        Returns: Json
-      }
-      create_api_key: {
-        Args: {
-          user_id: string
-          plan?: Database["public"]["Enums"]["api_plan"]
-          requests_limit?: number
-        }
-        Returns: {
-          created_at: string | null
-          expires_at: string | null
-          id: string
-          is_active: boolean | null
-          key: string
-          last_used_at: string | null
-          plan: Database["public"]["Enums"]["api_plan"] | null
-          project_url: string | null
-          requests_count: number | null
-          requests_limit: number | null
-          user_id: string
-        }
-      }
-      delete_component: {
-        Args: {
-          component_id: number
-        }
-        Returns: boolean
-      }
-      get_active_authors: {
-        Args: Record<PropertyKey, never>
-        Returns: {
-          id: string
-          username: string
-          name: string
-          image_url: string
-          display_username: string
-          display_name: string
-          display_image_url: string
-          bio: string
-          total_downloads: number
-          total_usages: number
-          total_views: number
-          total_engagement: number
-        }[]
-      }
-      get_active_authors_with_top_components: {
-        Args: {
-          p_offset?: number
-          p_limit?: number
-        }
-        Returns: {
-          id: string
-          username: string
-          name: string
-          image_url: string
-          display_username: string
-          display_name: string
-          display_image_url: string
-          bio: string
-          total_downloads: number
-          total_usages: number
-          total_views: number
-          total_engagement: number
-          top_components: Json
-          total_count: number
-        }[]
-      }
-      get_admin_liked_demos_v1: {
-        Args: {
-          p_user_id: string
-          p_limit?: number
-        }
-        Returns: {
-          id: number
-          name: string
-          preview_url: string
-          video_url: string
-          updated_at: string
-          demo_slug: string
-          component_data: Json
-          user_data: Json
-          component_user_data: Json
-          total_count: number
-          view_count: number
-          bookmarks_count: number
-          bundle_url: Json
-        }[]
-      }
-      get_all_author_payouts: {
-        Args: {
-          p_period?: string
-          p_min_amount?: number
-          p_max_amount?: number
-          p_status?: string
-          p_sort_by?: string
-          p_sort_order?: string
-          p_limit?: number
-          p_offset?: number
-        }
-        Returns: Json[]
-      }
-      get_all_author_payouts_count: {
-        Args: {
-          p_period?: string
-          p_min_amount?: number
-          p_max_amount?: number
-          p_status?: string
-        }
-        Returns: number
-      }
-      get_author_payout_stats: {
-        Args: {
-          p_author_id: string
-        }
-        Returns: Json
-      }
-      get_collection_components_v1: {
-        Args: {
-          p_collection_id: string
-          p_sort_by: string
-          p_offset: number
-          p_limit: number
-        }
-        Returns: {
-          id: number
-          name: string
-          preview_url: string
-          video_url: string
-          updated_at: string
-          demo_slug: string
-          component_data: Json
-          user_data: Json
-          component_user_data: Json
-          total_count: number
-          view_count: number
-          bookmarks_count: number
-        }[]
-      }
-      get_collections_v1: {
-        Args: {
-          p_offset?: number
-          p_limit?: number
-          p_include_private?: boolean
-        }
-        Returns: {
-          id: string
-          name: string
-          description: string
-          cover_url: string
-          user_id: string
-          created_at: string
-          updated_at: string
-          is_public: boolean
-          slug: string
-          components_count: number
-          user_data: Json
-        }[]
-      }
-      get_demos_list: {
-        Args: {
-          p_sort_by: string
-          p_offset: number
-          p_limit: number
-          p_tag_slug?: string
-          p_include_private?: boolean
-        }
-        Returns: {
-          id: number
-          name: string
-          preview_url: string
-          video_url: string
-          updated_at: string
-          demo_slug: string
-          component_data: Json
-          user_data: Json
-          component_user_data: Json
-          total_count: number
-          view_count: number
-          bookmarks_count: number
-        }[]
-      }
-      get_demos_list_v2: {
-        Args: {
-          p_sort_by: string
-          p_offset: number
-          p_limit: number
-          p_tag_slug?: string
-          p_include_private?: boolean
-        }
-        Returns: {
-          id: number
-          name: string
-          preview_url: string
-          video_url: string
-          updated_at: string
-          demo_slug: string
-          component_data: Json
-          user_data: Json
-          component_user_data: Json
-          total_count: number
-          view_count: number
-          bookmarks_count: number
-          bundle_url: Json
-        }[]
-      }
-      get_liked_components: {
-        Args: {
-          p_user_id: string
-        }
-        Returns: Json[]
-      }
-      get_pro_publishers: {
-        Args: Record<PropertyKey, never>
-        Returns: {
-          id: string
-          created_at: string
-          updated_at: string
-          image_url: string
-          username: string
-          name: string
-          email: string
-          manually_added: boolean
-          is_admin: boolean
-          twitter_url: string
-          bio: string
-          github_url: string
-          pro_referral_url: string
-          website_url: string
-          pro_banner_url: string
-          display_name: string
-          display_username: string
-          display_image_url: string
-          ref: string
-        }[]
-      }
-      get_prompt: {
-        Args: {
-          p_prompt_type: string
-          p_rule_id?: number
-          p_additional_context?: string
-        }
-        Returns: string
-      }
-      get_section_previews: {
-        Args: {
-          p_demo_ids: number[]
-        }
-        Returns: {
-          demo_id: number
-          preview_url: string
-          video_url: string
-        }[]
-      }
-      get_template_tags: {
-        Args: Record<PropertyKey, never>
-        Returns: {
-          tag_id: number
-          tag_name: string
-          tag_slug: string
-          templates_count: number
-        }[]
-      }
-      get_templates_v3: {
-        Args: {
-          p_offset?: number
-          p_limit?: number
-          p_include_private?: boolean
-          p_tag_slug?: string
-        }
-        Returns: {
-          id: number
-          name: string
-          description: string
-          preview_url: string
-          video_url: string
-          website_preview_url: string
-          price: number
-          payment_url: string
-          created_at: string
-          updated_at: string
-          user_data: Json
-          downloads_count: number
-          likes_count: number
-        }[]
-      }
-      get_top_components_for_email: {
-        Args: Record<PropertyKey, never>
-        Returns: {
-          id: string
-          name: string
-          description: string
-          username: string
-          component_slug: string
-          preview_url: string
-          demo_slug: string
-          demo_preview_url: string
-          is_paid: boolean
-          is_current_week: boolean
-        }[]
-      }
-      get_user_bookmarks_list: {
-        Args: {
-          p_user_id: string
-          p_include_private?: boolean
-        }
-        Returns: {
-          id: number
-          name: string
-          preview_url: string
-          video_url: string
-          updated_at: string
-          demo_slug: string
-          component_data: Json
-          user_data: Json
-          component_user_data: Json
-        }[]
-      }
-      get_user_components_counts: {
-        Args: {
-          p_user_id: string
-        }
-        Returns: Json
-      }
-      get_user_profile_demo_list: {
-        Args: {
-          p_user_id: string
-          p_include_private?: boolean
-        }
-        Returns: {
-          id: number
-          name: string
-          preview_url: string
-          video_url: string
-          updated_at: string
-          demo_slug: string
-          component_data: Json
-          user_data: Json
-          component_user_data: Json
-        }[]
-      }
-      get_user_profile_demo_list_v2: {
-        Args: {
-          p_user_id: string
-        }
-        Returns: {
-          id: number
-          name: string
-          preview_url: string
-          video_url: string
-          updated_at: string
-          created_at: string
-          demo_slug: string
-          component_data: Json
-          user_data: Json
-          component_user_data: Json
-          total_count: number
-          view_count: number
-          bookmarks_count: number
-          bundle_url: Json
-          is_private: boolean
-          submission_status: string
-          moderators_feedback: string
-        }[]
-      }
-      get_user_state: {
-        Args: {
-          user_id_param: string
-        }
-        Returns: Json
-      }
-      increment: {
-        Args: Record<PropertyKey, never>
-        Returns: number
-      }
-      increment_api_requests: {
-        Args: {
-          key_id: string
-        }
-        Returns: undefined
-      }
-      insert_code_embedding: {
-        Args: {
-          p_id: string
-          p_item_id: number
-          p_item_type: string
-          p_embedding: string
-          p_code: string
-          p_metadata: Json
-        }
-        Returns: undefined
-      }
-      insert_embedding:
-        | {
-            Args: {
-              p_id: string
-              p_item_id: number
-              p_item_type: string
-              p_embedding: string
-              p_usage_description: string
-              p_metadata: Json
-            }
-            Returns: undefined
-          }
-        | {
-            Args: {
-              p_item_id: number
-              p_item_type: string
-              p_embedding: string
-              p_usage_description: string
-              p_metadata: Json
-            }
-            Returns: undefined
-          }
-      is_trigger_operation: {
-        Args: Record<PropertyKey, never>
-        Returns: boolean
-      }
-      like_component_by_demo: {
-        Args: {
-          p_user_id: string
-          p_demo_id: number
-          p_liked: boolean
-        }
-        Returns: undefined
-      }
-      match_embeddings: {
-        Args: {
-          query_embedding: string
-          match_threshold: number
-          match_count: number
-          filter?: string
-          table_name?: string
-        }
-        Returns: {
-          id: string
-          item_id: number
-          item_type: string
-          embedding: string
-          similarity: number
-        }[]
-      }
-      match_embeddings_with_details: {
-        Args: {
-          query_embedding: string
-          match_threshold: number
-          match_count: number
-        }
-        Returns: {
-          id: number
-          name: string
-          preview_url: string
-          video_url: string
-          demo_slug: string
-          user_id: string
-          component_data: Json
-          user_data: Json
-          usage_data: Json
-        }[]
-      }
-      purchase_component: {
-        Args: {
-          p_user_id: string
-          p_component_id: number
-        }
-        Returns: Json
-      }
-      record_mcp_component_usage:
-        | {
-            Args: {
-              p_user_id: string
-              p_api_key: string
-              p_search_query: string
-              p_component_ids: number[]
-              p_author_ids: string[]
-            }
-            Returns: Json
-          }
-        | {
-            Args: {
-              p_user_id: string
-              p_api_key: string
-              p_search_query: string
-              p_component_ids: number[]
-              p_component_names: string[]
-              p_author_ids: string[]
-            }
-            Returns: Json
-          }
-      requesting_user_id: {
-        Args: Record<PropertyKey, never>
-        Returns: string
-      }
-      search_components_preview: {
-        Args: {
-          p_search_query: string
-        }
-        Returns: {
-          id: number
-          name: string
-          description: string
-          preview_url: string
-          user_data: Json
-          downloads_count: number
-          likes_count: number
-          component_slug: string
-        }[]
-      }
-      search_demos_ai: {
-        Args: {
-          match_threshold?: number
-          query_embedding?: string
-          search_query?: string
-        }
-        Returns: {
-          id: number
-          name: string
-          preview_url: string
-          video_url: string
-          demo_id: number
-          component_data: Json
-          user_data: Json
-          usage_data: Json
-        }[]
-      }
-      search_demos_ai_oai: {
-        Args: {
-          match_threshold?: number
-          query_embedding?: string
-          search_query?: string
-        }
-        Returns: {
-          id: number
-          name: string
-          preview_url: string
-          video_url: string
-          demo_slug: string
-          user_id: string
-          component_data: Json
-          user_data: Json
-          usage_data: Json
-        }[]
-      }
-      update_component_dependencies_closure: {
-        Args: {
-          p_component_id: number
-          p_demo_slug?: string
-        }
-        Returns: undefined
-      }
-      update_component_with_tags:
-        | {
-            Args: {
-              p_component_id: number
-              p_name?: string
-              p_description?: string
-              p_license?: string
-              p_preview_url?: string
-              p_tags?: Json
-            }
-            Returns: undefined
-          }
-        | {
-            Args: {
-              p_component_id: number
-              p_name?: string
-              p_description?: string
-              p_license?: string
-              p_preview_url?: string
-              p_website_url?: string
-              p_tags?: Json
-            }
-            Returns: undefined
-          }
-      update_demo_tags: {
-        Args: {
-          p_demo_id: number
-          p_tags: Json
-        }
-        Returns: undefined
-      }
-      update_template_tags: {
-        Args: {
-          p_template_id: number
-          p_tags: Json
-        }
-        Returns: undefined
-      }
-      vec_dim: {
-        Args: {
-          v: string
-        }
-        Returns: number
-      }
-    }
-    Enums: {
-      api_plan: "free" | "pro" | "enterprise"
-      payment_status: "pending" | "paid" | "rejected"
-      submission_status: "on_review" | "featured" | "posted"
-      user_role:
-        | "designer"
-        | "frontend_developer"
-        | "backend_developer"
-        | "product_manager"
-        | "entrepreneur"
-    }
-    CompositeTypes: {
-      component_with_user: {
-        id: number | null
-        component_names: Json | null
-        description: string | null
-        code: string | null
-        demo_code: string | null
-        created_at: string | null
-        updated_at: string | null
-        user_id: string | null
-        dependencies: Json | null
-        is_public: boolean | null
-        downloads_count: number | null
-        likes_count: number | null
-        component_slug: string | null
-        name: string | null
-        demo_dependencies: Json | null
-        registry: string | null
-        direct_registry_dependencies: Json | null
-        demo_direct_registry_dependencies: Json | null
-        preview_url: string | null
-        license: string | null
-        video_url: string | null
-        user_data: Json | null
-        compiled_css: string | null
-        global_css_extension: string | null
-        tailwind_config_extension: string | null
-        website_url: string | null
-        is_paid: boolean | null
-        payment_url: string | null
-        price: number | null
-        pro_preview_image_url: string | null
-      }
-    }
-  }
-}
-
-type PublicSchema = Database[Extract<keyof Database, "public">]
-
-export type Tables<
-  PublicTableNameOrOptions extends
-    | keyof (PublicSchema["Tables"] & PublicSchema["Views"])
-    | { schema: keyof Database },
-  TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
-    ? keyof (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
-        Database[PublicTableNameOrOptions["schema"]]["Views"])
-    : never = never,
-> = PublicTableNameOrOptions extends { schema: keyof Database }
-  ? (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
-      Database[PublicTableNameOrOptions["schema"]]["Views"])[TableName] extends {
-      Row: infer R
-    }
-    ? R
-    : never
-  : PublicTableNameOrOptions extends keyof (PublicSchema["Tables"] &
-        PublicSchema["Views"])
-    ? (PublicSchema["Tables"] &
-        PublicSchema["Views"])[PublicTableNameOrOptions] extends {
-        Row: infer R
-      }
-      ? R
-      : never
-    : never
-
-export type TablesInsert<
-  PublicTableNameOrOptions extends
-    | keyof PublicSchema["Tables"]
-    | { schema: keyof Database },
-  TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
-    ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
-    : never = never,
-> = PublicTableNameOrOptions extends { schema: keyof Database }
-  ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
-      Insert: infer I
-    }
-    ? I
-    : never
-  : PublicTableNameOrOptions extends keyof PublicSchema["Tables"]
-    ? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
-        Insert: infer I
-      }
-      ? I
-      : never
-    : never
-
-export type TablesUpdate<
-  PublicTableNameOrOptions extends
-    | keyof PublicSchema["Tables"]
-    | { schema: keyof Database },
-  TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
-    ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
-    : never = never,
-> = PublicTableNameOrOptions extends { schema: keyof Database }
-  ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
-      Update: infer U
-    }
-    ? U
-    : never
-  : PublicTableNameOrOptions extends keyof PublicSchema["Tables"]
-    ? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
-        Update: infer U
-      }
-      ? U
-      : never
-    : never
-
-export type Enums<
-  PublicEnumNameOrOptions extends
-    | keyof PublicSchema["Enums"]
-    | { schema: keyof Database },
-  EnumName extends PublicEnumNameOrOptions extends { schema: keyof Database }
-    ? keyof Database[PublicEnumNameOrOptions["schema"]]["Enums"]
-    : never = never,
-> = PublicEnumNameOrOptions extends { schema: keyof Database }
-  ? Database[PublicEnumNameOrOptions["schema"]]["Enums"][EnumName]
-  : PublicEnumNameOrOptions extends keyof PublicSchema["Enums"]
-    ? PublicSchema["Enums"][PublicEnumNameOrOptions]
-    : never
-
-export type CompositeTypes<
-  PublicCompositeTypeNameOrOptions extends
-    | keyof PublicSchema["CompositeTypes"]
-    | { schema: keyof Database },
-  CompositeTypeName extends PublicCompositeTypeNameOrOptions extends {
-    schema: keyof Database
-  }
-    ? keyof Database[PublicCompositeTypeNameOrOptions["schema"]]["CompositeTypes"]
-    : never = never,
-> = PublicCompositeTypeNameOrOptions extends { schema: keyof Database }
-  ? Database[PublicCompositeTypeNameOrOptions["schema"]]["CompositeTypes"][CompositeTypeName]
-  : PublicCompositeTypeNameOrOptions extends keyof PublicSchema["CompositeTypes"]
-    ? PublicSchema["CompositeTypes"][PublicCompositeTypeNameOrOptions]
-    : never
+Need to install the following packages:
+supabase@2.22.6
+Ok to proceed? (y) 
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fe5c8e28..8ec03608 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -355,6 +355,9 @@ importers:
       shiki:
         specifier: ^3.0.0
         version: 3.0.0
+      short-uuid:
+        specifier: ^5.2.0
+        version: 5.2.0
       sonner:
         specifier: ^1.5.0
         version: 1.5.0(react-dom@19.0.0)(react@19.0.0)
@@ -8389,6 +8392,10 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
+  /any-base@1.1.0:
+    resolution: {integrity: sha512-uMgjozySS8adZZYePpaWs8cxB9/kdzmpX6SgJZ+wbz1K5eYk5QMYDVJaZKhxyIHUdnnJkfR7SVgStgH7LkGUyg==}
+    dev: false
+
   /any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
     dev: false
@@ -13703,6 +13710,14 @@ packages:
       '@types/hast': 3.0.4
     dev: false
 
+  /short-uuid@5.2.0:
+    resolution: {integrity: sha512-296/Nzi4DmANh93iYBwT4NoYRJuHnKEzefrkSagQbTH/A6NTaB68hSPDjm5IlbI5dx9FXdmtqPcj6N5H+CPm6w==}
+    engines: {node: '>=14'}
+    dependencies:
+      any-base: 1.1.0
+      uuid: 9.0.1
+    dev: false
+
   /side-channel-list@1.0.0:
     resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
     engines: {node: '>= 0.4'}
diff --git a/turbo.json b/turbo.json
index c22d4623..17092c77 100644
--- a/turbo.json
+++ b/turbo.json
@@ -17,7 +17,8 @@
     "CLOUDFLARE_ZONE_ID",
     "INTERNAL_API_SECRET",
     "STRIPE_SECRET_KEY",
-    "STRIPE_WEBHOOK_SECRET"
+    "STRIPE_WEBHOOK_SECRET",
+    "CSB_API_KEY"
   ],
   "tasks": {
     "build": {

From 26ed0568545b2ba0df27d2c7478fbfe9cb0bf9c6 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Sat, 26 Apr 2025 16:44:23 +0400
Subject: [PATCH 091/143] add mock publishing

---
 apps/web/app/api/sandbox/publish/route.ts     | 59 +++++++++++++++++++
 .../[username]/sandbox/[sandboxId]/page.tsx   |  3 +-
 .../components/features/studio/publish/api.ts | 17 ++++++
 .../publish/components/PublishHeader.tsx      | 34 ++++++++++-
 4 files changed, 110 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/app/api/sandbox/publish/route.ts

diff --git a/apps/web/app/api/sandbox/publish/route.ts b/apps/web/app/api/sandbox/publish/route.ts
new file mode 100644
index 00000000..70660376
--- /dev/null
+++ b/apps/web/app/api/sandbox/publish/route.ts
@@ -0,0 +1,59 @@
+import { auth } from "@clerk/nextjs/server"
+import { NextResponse } from "next/server"
+import { supabaseWithAdminAccess } from "@/lib/supabase"
+import ShortUUID from "short-uuid"
+
+export async function POST(request: Request) {
+  try {
+    const { userId } = await auth()
+    if (!userId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+    }
+
+    const { shortSandboxId } = await request.json()
+
+    const sandboxId = ShortUUID().toUUID(shortSandboxId)
+
+    if (!sandboxId) {
+      return NextResponse.json(
+        { error: "Sandbox ID is required" },
+        { status: 400 },
+      )
+    }
+
+    const { data: sandbox, error } = await supabaseWithAdminAccess
+      .from("sandboxes")
+      .select("codesandbox_id")
+      .eq("id", sandboxId)
+      .eq("user_id", userId)
+      .single()
+
+    if (error || !sandbox) {
+      return NextResponse.json(
+        { error: "Sandbox not found or access denied" },
+        { status: 404 },
+      )
+    }
+
+    const { error: updateError } = await supabaseWithAdminAccess
+      .from("sandboxes")
+      .update({ status: "on_review" })
+      .eq("id", sandboxId)
+      .eq("user_id", userId)
+
+    if (updateError) {
+      return NextResponse.json(
+        { error: "Failed to update sandbox status" },
+        { status: 500 },
+      )
+    }
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error("Error connecting to sandbox:", error)
+    return NextResponse.json(
+      { error: "Internal Server Error" },
+      { status: 500 },
+    )
+  }
+}
diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
index 9ddab131..03d8cd6d 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
@@ -16,6 +16,7 @@ import {
   useFileSystem,
   type FileEntry,
 } from "@/components/features/studio/publish/hooks/useFileSystem"
+import { publishSandbox } from "@/components/features/studio/publish/api"
 
 const DEFAULT_FILE_ENTRY: FileEntry = {
   name: "component.tsx",
@@ -27,8 +28,6 @@ const DEFAULT_FILE_ENTRY: FileEntry = {
 function PublishPageContent() {
   const params = useParams()
   const sandboxId = params.sandboxId as string
-  const searchParams = useSearchParams()
-  const router = useRouter()
   const [selectedEntry, setSelectedEntry] = useState<FileEntry | null>(
     DEFAULT_FILE_ENTRY,
   )
diff --git a/apps/web/components/features/studio/publish/api.ts b/apps/web/components/features/studio/publish/api.ts
index 2d30856c..e7501d09 100644
--- a/apps/web/components/features/studio/publish/api.ts
+++ b/apps/web/components/features/studio/publish/api.ts
@@ -41,3 +41,20 @@ export const createNewSandbox = async (): Promise<{
 
   return { sandboxId: response.shortSandboxId }
 }
+
+export const publishSandbox = async (
+  shortSandboxId: string,
+): Promise<{ success: boolean }> => {
+  const res = await fetch("/api/sandbox/publish", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ shortSandboxId }),
+  })
+
+  if (!res.ok) throw new Error(await res.text())
+  const response = await res.json()
+
+  return { success: response.success }
+}
diff --git a/apps/web/components/features/studio/publish/components/PublishHeader.tsx b/apps/web/components/features/studio/publish/components/PublishHeader.tsx
index fd664361..aae4f43e 100644
--- a/apps/web/components/features/studio/publish/components/PublishHeader.tsx
+++ b/apps/web/components/features/studio/publish/components/PublishHeader.tsx
@@ -1,4 +1,9 @@
 import { Button } from "@/components/ui/button"
+import { useParams, useRouter } from "next/navigation"
+import { publishSandbox } from "../api"
+import { useState } from "react"
+import { RocketIcon, Loader2 } from "lucide-react"
+import { toast } from "sonner"
 
 interface PublishHeaderProps {
   sandboxId: string | null
@@ -6,6 +11,23 @@ interface PublishHeaderProps {
 }
 
 export function PublishHeader({ sandboxId, onReset }: PublishHeaderProps) {
+  const [isLoading, setIsLoading] = useState(false)
+
+  const params = useParams()
+  const router = useRouter()
+  const handlePublish = async () => {
+    if (!sandboxId) return
+    setIsLoading(true)
+    try {
+      const { success } = await publishSandbox(sandboxId)
+      if (success) {
+        toast.success("Sandbox sent to review")
+        await router.push(`/studio/${params.username}`)
+      }
+    } finally {
+      setIsLoading(false)
+    }
+  }
   return (
     <header className="flex items-center gap-2 p-4 border-b">
       <h1 className="text-2xl font-bold">Publish Your Sandbox</h1>
@@ -13,7 +35,17 @@ export function PublishHeader({ sandboxId, onReset }: PublishHeaderProps) {
         <span className="text-xs text-muted-foreground ml-2">{sandboxId}</span>
       )}
       <div className="ml-auto flex items-center gap-2">
-        <Button size="sm" onClick={onReset}>
+        <Button
+          size="sm"
+          onClick={handlePublish}
+          disabled={isLoading}
+          className="gap-2"
+        >
+          {isLoading ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            <RocketIcon className="h-4 w-4" />
+          )}
           Publish
         </Button>
       </div>

From a8ff291211d4582e02ac482aaa61ed9936611ef6 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Sat, 26 Apr 2025 16:51:53 +0400
Subject: [PATCH 092/143] add preview of sandboxes

---
 .../web/app/studio/[username]/page.client.tsx |  43 +++--
 apps/web/app/studio/[username]/page.tsx       |  12 ++
 .../features/studio/ui/sandboxes-table.tsx    | 182 ++++++++++++++++++
 3 files changed, 223 insertions(+), 14 deletions(-)
 create mode 100644 apps/web/components/features/studio/ui/sandboxes-table.tsx

diff --git a/apps/web/app/studio/[username]/page.client.tsx b/apps/web/app/studio/[username]/page.client.tsx
index f0db2034..f10bb9f7 100644
--- a/apps/web/app/studio/[username]/page.client.tsx
+++ b/apps/web/app/studio/[username]/page.client.tsx
@@ -3,17 +3,19 @@
 import { User, DemoWithComponent } from "@/types/global"
 import { StudioLayout } from "@/components/features/studio/studio-layout"
 import { DemosTable } from "@/components/features/studio/ui/components-table"
-import { ComponentPublishDialog as ComponentPublishDialogOld } from "@/components/features/studio/editor/component-publish-dialog"
+import { SandboxesTable } from "@/components/features/studio/ui/sandboxes-table"
 import Link from "next/link"
 import { ArrowLeft, PlusCircle, Loader2 } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { useRouter, usePathname } from "next/navigation"
 import { createNewSandbox } from "@/components/features/studio/publish/api"
 import { useState } from "react"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 
 interface StudioUsernameClientProps {
   user: User
   demos: DemoWithComponent[]
+  sandboxes: any[]
   isAdmin: boolean
   isOwnProfile: boolean
 }
@@ -21,6 +23,7 @@ interface StudioUsernameClientProps {
 export function StudioUsernameClient({
   user,
   demos,
+  sandboxes,
   isAdmin,
   isOwnProfile,
 }: StudioUsernameClientProps) {
@@ -40,6 +43,10 @@ export function StudioUsernameClient({
     }
   }
 
+  const handleOpenSandbox = (sandbox: any) => {
+    router.push(`${pathname}/sandbox/${sandbox.id}`)
+  }
+
   return (
     <StudioLayout user={user}>
       <div className="space-y-6">
@@ -51,25 +58,33 @@ export function StudioUsernameClient({
             >
               <ArrowLeft className="h-4 w-4" />
             </Link>
-            <h1 className="text-xl font-bold">Components</h1>
+            <h1 className="text-xl font-bold">Studio</h1>
           </div>
 
           {(isOwnProfile || isAdmin) && (
-            <>
-              <Button onClick={handleCreateNewSandbox} disabled={isCreating}>
-                {isCreating ? (
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                ) : (
-                  <PlusCircle className="mr-2 h-4 w-4" />
-                )}
-                Create new component
-              </Button>
-              {/* <ComponentPublishDialogOld userId={user.id} /> */}
-            </>
+            <Button onClick={handleCreateNewSandbox} disabled={isCreating}>
+              {isCreating ? (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              ) : (
+                <PlusCircle className="mr-2 h-4 w-4" />
+              )}
+              Create new component
+            </Button>
           )}
         </div>
 
-        <DemosTable demos={demos} />
+        <Tabs defaultValue="components">
+          <TabsList>
+            <TabsTrigger value="components">Components</TabsTrigger>
+            <TabsTrigger value="sandboxes">Sandboxes</TabsTrigger>
+          </TabsList>
+          <TabsContent value="components" className="mt-4">
+            <DemosTable demos={demos} />
+          </TabsContent>
+          <TabsContent value="sandboxes" className="mt-4">
+            <SandboxesTable sandboxes={sandboxes} onOpen={handleOpenSandbox} />
+          </TabsContent>
+        </Tabs>
       </div>
     </StudioLayout>
   )
diff --git a/apps/web/app/studio/[username]/page.tsx b/apps/web/app/studio/[username]/page.tsx
index 6005a121..0c97856e 100644
--- a/apps/web/app/studio/[username]/page.tsx
+++ b/apps/web/app/studio/[username]/page.tsx
@@ -5,6 +5,7 @@ import { unstable_cache } from "next/cache"
 import { getUserData } from "@/lib/queries"
 import { StudioUsernameClient } from "./page.client"
 import { transformDemoResult } from "@/lib/utils/transformData"
+import ShortUUID from "short-uuid"
 
 // Get user data by username
 const getCachedUser = unstable_cache(
@@ -83,6 +84,16 @@ export default async function StudioUsernamePage({
     redirect("/studio")
   }
 
+  const sandboxesPre = await supabaseWithAdminAccess
+    .from("sandboxes")
+    .select("*")
+    .eq("user_id", user.id)
+
+  const sandboxes = sandboxesPre.data?.map((sandbox) => ({
+    ...sandbox,
+    id: ShortUUID().fromUUID(sandbox.id),
+  }))
+
   // Verify logged in user has access to this user's components
   // Admin can access any user's components, users can only access their own
   const { data: currentUser } = await supabaseWithAdminAccess
@@ -106,6 +117,7 @@ export default async function StudioUsernamePage({
     <StudioUsernameClient
       user={user}
       demos={demos}
+      sandboxes={sandboxes}
       isAdmin={isAdmin}
       isOwnProfile={isOwnProfile}
     />
diff --git a/apps/web/components/features/studio/ui/sandboxes-table.tsx b/apps/web/components/features/studio/ui/sandboxes-table.tsx
new file mode 100644
index 00000000..e275d2e0
--- /dev/null
+++ b/apps/web/components/features/studio/ui/sandboxes-table.tsx
@@ -0,0 +1,182 @@
+"use client"
+
+import { useState } from "react"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { Button } from "@/components/ui/button"
+import { ExternalLink } from "lucide-react"
+import { cn } from "@/lib/utils"
+import {
+  ColumnDef,
+  SortingState,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+
+interface Sandbox {
+  id: string
+  name: string
+  status: string
+  updated_at?: string
+  created_at?: string
+}
+
+interface SandboxesTableProps {
+  sandboxes: Sandbox[]
+  onOpen?: (sandbox: Sandbox) => void
+}
+
+export function SandboxesTable({
+  sandboxes = [],
+  onOpen,
+}: SandboxesTableProps) {
+  const [sorting, setSorting] = useState<SortingState>([
+    {
+      id: "created_at",
+      desc: true,
+    },
+  ])
+
+  const columns: ColumnDef<Sandbox>[] = [
+    {
+      header: "Name",
+      accessorKey: "name",
+      cell: ({ row }) => (
+        <div className="font-medium truncate">
+          {row.getValue("name") || "Untitled"}
+        </div>
+      ),
+    },
+    {
+      header: "Status",
+      accessorKey: "status",
+      cell: ({ row }) => {
+        const status = row.getValue("status") as string
+        return (
+          <div>
+            <span
+              className={cn(
+                "px-2 py-1 text-xs rounded",
+                status === "on_review" && "bg-yellow-100 text-yellow-700",
+                status === "draft" && "bg-gray-100 text-gray-700",
+              )}
+            >
+              {status === "on_review"
+                ? "On Review"
+                : status === "draft"
+                  ? "Draft"
+                  : status}
+            </span>
+          </div>
+        )
+      },
+    },
+    {
+      header: "Created",
+      id: "created_at",
+      accessorFn: (row) => row.updated_at || row.created_at || "",
+      cell: ({ row }) => {
+        const dateValue = row.original.created_at || row.original.updated_at
+
+        try {
+          const date = new Date(dateValue || "")
+          return (
+            <div>
+              {date.toLocaleDateString("en-US", {
+                year: "numeric",
+                month: "short",
+                day: "numeric",
+              })}
+            </div>
+          )
+        } catch (e) {
+          return <div>Unknown</div>
+        }
+      },
+    },
+    {
+      id: "actions",
+      cell: ({ row }) => {
+        return (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => onOpen?.(row.original)}
+            className="flex items-center gap-1"
+          >
+            <ExternalLink className="h-4 w-4" />
+            Open
+          </Button>
+        )
+      },
+    },
+  ]
+
+  const safeData = Array.isArray(sandboxes) ? sandboxes : []
+
+  const table = useReactTable({
+    data: safeData,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    onSortingChange: setSorting,
+    enableSortingRemoval: false,
+    state: {
+      sorting,
+    },
+  })
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-border bg-background">
+      <Table className="table-fixed">
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className="hover:bg-transparent">
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {flexRender(
+                    header.column.columnDef.header,
+                    header.getContext(),
+                  )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell
+                colSpan={columns.length}
+                className="h-24 text-center text-muted-foreground"
+              >
+                No sandboxes found
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}

From 1bbf3d7dfe436832ebfe926c3d797632c5ab7656 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Sat, 26 Apr 2025 16:53:18 +0400
Subject: [PATCH 093/143] give hash back

---
 apps/web/components/features/studio/publish/hooks/useSandbox.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/web/components/features/studio/publish/hooks/useSandbox.ts b/apps/web/components/features/studio/publish/hooks/useSandbox.ts
index 72f4b088..9629bcff 100644
--- a/apps/web/components/features/studio/publish/hooks/useSandbox.ts
+++ b/apps/web/components/features/studio/publish/hooks/useSandbox.ts
@@ -38,6 +38,8 @@ export const useSandbox = ({ sandboxId }: { sandboxId: string }) => {
       const newPreviewURL = connectedSandbox.ports.getPreviewUrl(5173)
       sandboxRef.current = connectedSandbox
 
+      const hash = Math.random().toString(36).substring(2, 15)
+      setSandboxConnectionHash(hash)
       setPreviewURL(newPreviewURL || null)
       checkShells()
     } catch (error) {

From 772a9b75dbc74343eba89f46bb23ed1baccf5e52 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Sat, 26 Apr 2025 16:54:42 +0400
Subject: [PATCH 094/143] HIDE ACTIONS FOR NOW

---
 .../features/studio/publish/components/FileExplorer.tsx   | 4 ++--
 .../features/studio/publish/components/FileTree.tsx       | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/web/components/features/studio/publish/components/FileExplorer.tsx b/apps/web/components/features/studio/publish/components/FileExplorer.tsx
index 273c5224..108ec8aa 100644
--- a/apps/web/components/features/studio/publish/components/FileExplorer.tsx
+++ b/apps/web/components/features/studio/publish/components/FileExplorer.tsx
@@ -95,7 +95,7 @@ export function FileExplorer({
       <div className="flex items-center justify-between p-2 border-b">
         <span className="font-medium">Files</span>
         <div className="flex gap-1">
-          <Button
+          {/* <Button
             size="icon"
             variant="ghost"
             onClick={() => setIsCreatingFile(true)}
@@ -110,7 +110,7 @@ export function FileExplorer({
             disabled={isLoading}
           >
             <FolderPlusIcon className="h-4 w-4" />
-          </Button>
+          </Button> */}
           {/* <Button
             size="icon"
             variant="ghost"
diff --git a/apps/web/components/features/studio/publish/components/FileTree.tsx b/apps/web/components/features/studio/publish/components/FileTree.tsx
index 423e5d46..6d387663 100644
--- a/apps/web/components/features/studio/publish/components/FileTree.tsx
+++ b/apps/web/components/features/studio/publish/components/FileTree.tsx
@@ -230,7 +230,7 @@ function FileItem({
             {entry.name}
           </button>
 
-          <TreeItemActions
+          {/* <TreeItemActions
             showActions={showActions}
             onRename={() =>
               startRename({ stopPropagation: () => {} } as React.MouseEvent)
@@ -238,7 +238,7 @@ function FileItem({
             onDelete={() => onDelete(entry.path)}
             itemType="file"
             itemName={entry.name}
-          />
+          /> */}
         </div>
       )}
     </li>
@@ -388,7 +388,7 @@ function DirectoryItem({
               </span>
             </div>
 
-            <TreeItemActions
+            {/* <TreeItemActions
               showActions={showActions}
               onRename={() =>
                 startRename({
@@ -411,7 +411,7 @@ function DirectoryItem({
               onDelete={() => onDelete(entry.path)}
               itemType="dir"
               itemName={entry.name}
-            />
+            /> */}
           </summary>
         )}
 

From 619f8bb5710d83e7bcf466dd1a86709250152ffd Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Mon, 28 Apr 2025 15:03:31 +0400
Subject: [PATCH 095/143] updates

---
 apps/web/app/api/sandbox/connect/route.ts     |   4 +-
 apps/web/app/api/sandbox/edit/route.ts        |  66 ++++++++
 .../studio/[username]/publish-new/page.tsx    |  51 ------
 .../[username]/sandbox/[sandboxId]/page.tsx   |   5 +-
 .../components/features/studio/publish/api.ts |  24 ++-
 .../studio/publish/components/PreviewPane.tsx |   1 +
 .../publish/components/PublishHeader.tsx      | 149 +++++++++++++++---
 .../studio/publish/hooks/useFileSystem.ts     |   3 +-
 .../studio/publish/hooks/useSandbox.ts        |  10 +-
 apps/web/lib/codesandbox-sdk.ts               |   2 +-
 10 files changed, 232 insertions(+), 83 deletions(-)
 create mode 100644 apps/web/app/api/sandbox/edit/route.ts
 delete mode 100644 apps/web/app/studio/[username]/publish-new/page.tsx

diff --git a/apps/web/app/api/sandbox/connect/route.ts b/apps/web/app/api/sandbox/connect/route.ts
index c7515c35..c49721d3 100644
--- a/apps/web/app/api/sandbox/connect/route.ts
+++ b/apps/web/app/api/sandbox/connect/route.ts
@@ -24,7 +24,7 @@ export async function POST(request: Request) {
 
     const { data: sandbox, error } = await supabaseWithAdminAccess
       .from("sandboxes")
-      .select("codesandbox_id")
+      .select("codesandbox_id, name")
       .eq("id", sandboxId)
       .eq("user_id", userId)
       .single()
@@ -38,7 +38,7 @@ export async function POST(request: Request) {
 
     const startData = await codesandboxSdk.sandbox.start(sandbox.codesandbox_id)
 
-    return NextResponse.json({ success: true, startData })
+    return NextResponse.json({ success: true, startData, sandbox })
   } catch (error) {
     console.error("Error connecting to sandbox:", error)
     return NextResponse.json(
diff --git a/apps/web/app/api/sandbox/edit/route.ts b/apps/web/app/api/sandbox/edit/route.ts
new file mode 100644
index 00000000..a483aafd
--- /dev/null
+++ b/apps/web/app/api/sandbox/edit/route.ts
@@ -0,0 +1,66 @@
+import { auth } from "@clerk/nextjs/server"
+import { NextResponse } from "next/server"
+import { supabaseWithAdminAccess } from "@/lib/supabase"
+import ShortUUID from "short-uuid"
+
+export async function PUT(request: Request) {
+  try {
+    const { userId } = await auth()
+    if (!userId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+    }
+
+    const { shortSandboxId, ...updateData } = await request.json()
+
+    if (!shortSandboxId) {
+      return NextResponse.json(
+        { error: "Sandbox ID is required" },
+        { status: 400 },
+      )
+    }
+
+    if (Object.keys(updateData).length === 0) {
+      return NextResponse.json(
+        { error: "No update data provided" },
+        { status: 400 },
+      )
+    }
+
+    const sandboxId = ShortUUID().toUUID(shortSandboxId)
+
+    const { data: sandbox, error } = await supabaseWithAdminAccess
+      .from("sandboxes")
+      .select("id")
+      .eq("id", sandboxId)
+      .eq("user_id", userId)
+      .single()
+
+    if (error || !sandbox) {
+      return NextResponse.json(
+        { error: "Sandbox not found or access denied" },
+        { status: 404 },
+      )
+    }
+
+    const { error: updateError } = await supabaseWithAdminAccess
+      .from("sandboxes")
+      .update(updateData)
+      .eq("id", sandboxId)
+      .eq("user_id", userId)
+
+    if (updateError) {
+      return NextResponse.json(
+        { error: "Failed to update sandbox" },
+        { status: 500 },
+      )
+    }
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error("Error updating sandbox:", error)
+    return NextResponse.json(
+      { error: "Internal Server Error" },
+      { status: 500 },
+    )
+  }
+}
diff --git a/apps/web/app/studio/[username]/publish-new/page.tsx b/apps/web/app/studio/[username]/publish-new/page.tsx
deleted file mode 100644
index d4ee089b..00000000
--- a/apps/web/app/studio/[username]/publish-new/page.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-"use client"
-
-import { useEffect, useState } from "react"
-import { connectToSandbox } from "@codesandbox/sdk/browser"
-import { SandboxSession, SandboxClient } from "@codesandbox/sdk"
-
-const PublishPage = () => {
-  const [status, setStatus] = useState("Connecting...")
-  const [sandbox, setSandbox] = useState<SandboxSession | null>(null)
-
-  useEffect(() => {
-    const connect = async () => {
-      try {
-        const response = await fetch(
-          "http://localhost:8080/codesandbox/create",
-          {
-            method: "POST",
-          },
-        )
-
-        const startData = await response.json()
-
-        console.log("Start data:", startData)
-
-        const sandbox = await connectToSandbox(startData)
-        setStatus("Connected to sandbox!")
-        setSandbox(sandbox)
-        console.log("Sandbox connected:", sandbox)
-      } catch (error: any) {
-        setStatus("Failed to connect: " + error.message)
-        console.error("Connection error:", error)
-      }
-    }
-
-    connect()
-  }, [])
-
-  useEffect(() => {
-    if (sandbox) {
-      console.log("Sandbox:", sandbox)
-
-      sandbox.fs.readdir("/").then((files) => {
-        console.log("Files:", files)
-      })
-    }
-  }, [sandbox])
-
-  return <div>{status}</div>
-}
-
-export default PublishPage
diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
index 03d8cd6d..4bc83e9e 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
@@ -20,7 +20,7 @@ import { publishSandbox } from "@/components/features/studio/publish/api"
 
 const DEFAULT_FILE_ENTRY: FileEntry = {
   name: "component.tsx",
-  path: "/src/component.tsx",
+  path: "/src/components/ui/component.tsx",
   type: "file",
   isSymlink: false,
 }
@@ -36,6 +36,7 @@ function PublishPageContent() {
   const {
     sandboxRef,
     previewURL,
+    serverSandbox,
     isSandboxLoading,
     sandboxConnectionHash,
     reconnectSandbox,
@@ -183,7 +184,7 @@ function PublishPageContent() {
 
   return (
     <div className="h-screen w-full flex flex-col">
-      <PublishHeader sandboxId={sandboxId} onReset={handleReset} />
+      <PublishHeader sandboxId={sandboxId} sandboxName={serverSandbox?.name} />
 
       <ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
         <ResizablePanel defaultSize={20} minSize={15} className="border-r">
diff --git a/apps/web/components/features/studio/publish/api.ts b/apps/web/components/features/studio/publish/api.ts
index e7501d09..326f2512 100644
--- a/apps/web/components/features/studio/publish/api.ts
+++ b/apps/web/components/features/studio/publish/api.ts
@@ -1,6 +1,6 @@
 export const connectToSandbox = async (
   shortSandboxId: string,
-): Promise<{ startData: any } | null> => {
+): Promise<{ startData: any; sandbox: any } | null> => {
   let retries = 3
   while (retries > 0) {
     try {
@@ -13,9 +13,7 @@ export const connectToSandbox = async (
       })
 
       if (!res.ok) throw new Error(await res.text())
-      const response = await res.json()
-
-      return { startData: response.startData }
+      return await res.json()
     } catch (error) {
       console.error(
         `Failed to load existing sandbox (${retries} retries left):`,
@@ -58,3 +56,21 @@ export const publishSandbox = async (
 
   return { success: response.success }
 }
+
+export const editSandbox = async (
+  shortSandboxId: string,
+  updateData: Record<string, any>,
+): Promise<{ success: boolean }> => {
+  const res = await fetch("/api/sandbox/edit", {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ shortSandboxId, ...updateData }),
+  })
+
+  if (!res.ok) throw new Error(await res.text())
+  const response = await res.json()
+
+  return { success: response.success }
+}
diff --git a/apps/web/components/features/studio/publish/components/PreviewPane.tsx b/apps/web/components/features/studio/publish/components/PreviewPane.tsx
index a77f6584..91b31d87 100644
--- a/apps/web/components/features/studio/publish/components/PreviewPane.tsx
+++ b/apps/web/components/features/studio/publish/components/PreviewPane.tsx
@@ -37,6 +37,7 @@ export function PreviewPane({
 
   //  takes time to complile need to reload iframe, will be fixed at codesandbox SDK team side
   useEffect(() => {
+    setPreviousConnectedShellId(connectedShellId)
     if (
       previousConnectedShellId !== connectedShellId &&
       previousConnectedShellId !== ""
diff --git a/apps/web/components/features/studio/publish/components/PublishHeader.tsx b/apps/web/components/features/studio/publish/components/PublishHeader.tsx
index aae4f43e..17e7a59d 100644
--- a/apps/web/components/features/studio/publish/components/PublishHeader.tsx
+++ b/apps/web/components/features/studio/publish/components/PublishHeader.tsx
@@ -1,20 +1,42 @@
 import { Button } from "@/components/ui/button"
 import { useParams, useRouter } from "next/navigation"
-import { publishSandbox } from "../api"
-import { useState } from "react"
-import { RocketIcon, Loader2 } from "lucide-react"
+import { publishSandbox, editSandbox } from "../api"
+import { useEffect, useState } from "react"
+import {
+  RocketIcon,
+  Loader2,
+  PenIcon,
+  CheckIcon,
+  XIcon,
+  ArrowLeftIcon,
+} from "lucide-react"
 import { toast } from "sonner"
+import { Input } from "@/components/ui/input"
 
 interface PublishHeaderProps {
   sandboxId: string | null
-  onReset: () => void
+  sandboxName?: string
+  username?: string
 }
 
-export function PublishHeader({ sandboxId, onReset }: PublishHeaderProps) {
+export function PublishHeader({
+  sandboxId,
+  sandboxName = "Untitled KEK",
+  username,
+}: PublishHeaderProps) {
   const [isLoading, setIsLoading] = useState(false)
+  const [isEditing, setIsEditing] = useState(false)
+  const [name, setName] = useState(sandboxName)
+
+  useEffect(() => {
+    setName(sandboxName)
+  }, [sandboxName])
+
+  const [editLoading, setEditLoading] = useState(false)
 
   const params = useParams()
   const router = useRouter()
+
   const handlePublish = async () => {
     if (!sandboxId) return
     setIsLoading(true)
@@ -28,27 +50,112 @@ export function PublishHeader({ sandboxId, onReset }: PublishHeaderProps) {
       setIsLoading(false)
     }
   }
+
+  const handleEditName = async () => {
+    if (!sandboxId || name === sandboxName) {
+      setIsEditing(false)
+      return
+    }
+
+    setEditLoading(true)
+    try {
+      const { success } = await editSandbox(sandboxId, { name })
+      if (success) {
+        toast.success("Sandbox name updated")
+        setIsEditing(false)
+      }
+    } catch (error) {
+      toast.error("Failed to update sandbox name")
+      setName(sandboxName)
+    } finally {
+      setEditLoading(false)
+    }
+  }
+
+  const handleCancel = () => {
+    setName(sandboxName)
+    setIsEditing(false)
+  }
+
+  const handleBackToStudio = () => {
+    router.push(`/studio/${params.username}`)
+  }
+
   return (
-    <header className="flex items-center gap-2 p-4 border-b">
-      <h1 className="text-2xl font-bold">Publish Your Sandbox</h1>
-      {sandboxId && (
-        <span className="text-xs text-muted-foreground ml-2">{sandboxId}</span>
-      )}
-      <div className="ml-auto flex items-center gap-2">
+    <header className="flex flex-col p-4 border-b">
+      <div className="flex items-center">
         <Button
-          size="sm"
-          onClick={handlePublish}
-          disabled={isLoading}
-          className="gap-2"
+          size="icon"
+          variant="outline"
+          onClick={handleBackToStudio}
+          className="mr-2"
         >
-          {isLoading ? (
-            <Loader2 className="h-4 w-4 animate-spin" />
-          ) : (
-            <RocketIcon className="h-4 w-4" />
-          )}
-          Publish
+          <ArrowLeftIcon className="h-4 w-4" />
         </Button>
+
+        {isEditing ? (
+          <div className="flex items-center gap-2">
+            <Input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="text-xl font-bold h-9 w-[300px]"
+              autoFocus
+            />
+            <Button
+              size="icon"
+              variant="ghost"
+              onClick={handleEditName}
+              disabled={editLoading}
+            >
+              {editLoading ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <CheckIcon className="h-4 w-4" />
+              )}
+            </Button>
+            <Button
+              size="icon"
+              variant="ghost"
+              onClick={handleCancel}
+              disabled={editLoading}
+            >
+              <XIcon className="h-4 w-4" />
+            </Button>
+          </div>
+        ) : (
+          <div className="flex items-center gap-2">
+            <h1 className="text-2xl font-bold">{name}</h1>
+            <Button
+              size="icon"
+              variant="ghost"
+              onClick={() => setIsEditing(true)}
+              className="h-8 w-8"
+            >
+              <PenIcon className="h-4 w-4" />
+            </Button>
+          </div>
+        )}
+        <div className="ml-auto flex items-center gap-2">
+          <Button
+            size="sm"
+            onClick={handlePublish}
+            disabled={isLoading}
+            className="gap-2"
+          >
+            {isLoading ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <RocketIcon className="h-4 w-4" />
+            )}
+            Publish
+          </Button>
+        </div>
       </div>
+      {params.username && (
+        <p className="ml-10 text-sm text-muted-foreground mt-1">
+          By {params.username}
+        </p>
+      )}
     </header>
   )
 }
diff --git a/apps/web/components/features/studio/publish/hooks/useFileSystem.ts b/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
index d9099b0a..6cc6c851 100644
--- a/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
+++ b/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
@@ -18,12 +18,13 @@ const ALWAYS_HIDDEN_FILES = [
   "main.tsx",
   "README.md",
   "components.json",
+  "app.tsx",
 ]
 const ADVANCED_VIEW_HIDDEN_FILES = [
   "package.json",
   "app.tsx",
   "lib",
-  "components",
+  // "components",
 ]
 
 export interface FileEntry {
diff --git a/apps/web/components/features/studio/publish/hooks/useSandbox.ts b/apps/web/components/features/studio/publish/hooks/useSandbox.ts
index 9629bcff..a130625e 100644
--- a/apps/web/components/features/studio/publish/hooks/useSandbox.ts
+++ b/apps/web/components/features/studio/publish/hooks/useSandbox.ts
@@ -9,6 +9,7 @@ export const useSandbox = ({ sandboxId }: { sandboxId: string }) => {
   const [sandboxConnectionHash, setSandboxConnectionHash] = useState<
     string | null
   >(null)
+  const [serverSandbox, setServerSandbox] = useState<any>(null)
   const [connectedShellId, setConnectedShellId] = useState<string>("")
   const [previewURL, setPreviewURL] = useState<string | null>(null)
   const [isSandboxLoading, setIsSandboxLoading] = useState(true)
@@ -29,7 +30,11 @@ export const useSandbox = ({ sandboxId }: { sandboxId: string }) => {
         throw new Error("Failed to connect to sandbox")
       }
 
-      const { startData } = response
+      const { startData, sandbox: serverSandbox } = response
+
+      console.log("serverSandbox", serverSandbox)
+
+      setServerSandbox(serverSandbox)
 
       console.log("startData", startData)
       const connectedSandbox = await connectToCodeSandboxSDK(startData)
@@ -140,5 +145,8 @@ export const useSandbox = ({ sandboxId }: { sandboxId: string }) => {
     clearMissingDependencyInfo,
     // unique hash of a shell connection
     connectedShellId,
+
+    // sandbox from the server containing metadata
+    serverSandbox,
   }
 }
diff --git a/apps/web/lib/codesandbox-sdk.ts b/apps/web/lib/codesandbox-sdk.ts
index f1110c4a..fafc44d4 100644
--- a/apps/web/lib/codesandbox-sdk.ts
+++ b/apps/web/lib/codesandbox-sdk.ts
@@ -5,7 +5,7 @@ export const codesandboxSdk = new CodeSandbox(process.env.CSB_API_KEY!)
 export const DEFAULT_TEMPLATE = "21st-vite"
 
 export const TEMPLATES = {
-  "21st-vite": "7jrj3k",
+  "21st-vite": "3cpq99",
 }
 
 export const DEFAULT_HIBERNATION_TIMEOUT = 60 * 1000 // 1 minute

From 35a1814eaf96b59a8d9b7c054cd0db0db7f4bdfa Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Mon, 28 Apr 2025 15:04:22 +0400
Subject: [PATCH 096/143] rm unused

---
 apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
index 4bc83e9e..5a615eac 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useEffect, useState, Suspense } from "react"
-import { useSearchParams, useRouter, useParams } from "next/navigation"
+import { useParams } from "next/navigation"
 import {
   ResizableHandle,
   ResizablePanelGroup,
@@ -16,7 +16,6 @@ import {
   useFileSystem,
   type FileEntry,
 } from "@/components/features/studio/publish/hooks/useFileSystem"
-import { publishSandbox } from "@/components/features/studio/publish/api"
 
 const DEFAULT_FILE_ENTRY: FileEntry = {
   name: "component.tsx",

From 25995538f6a7887fcbcbc8b73962b1cfe2752582 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Mon, 28 Apr 2025 19:38:54 +0400
Subject: [PATCH 097/143] Implement registry generation feature in PublishPage
 and update PublishHeader

---
 .../[username]/sandbox/[sandboxId]/page.tsx   | 17 ++++++-
 .../publish/components/PublishHeader.tsx      | 20 +++++++-
 .../studio/publish/hooks/useFileSystem.ts     | 50 +++++++++++++++++++
 apps/web/lib/codesandbox-sdk.ts               |  2 +-
 4 files changed, 85 insertions(+), 4 deletions(-)

diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
index 5a615eac..a80afa8b 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
@@ -16,6 +16,7 @@ import {
   useFileSystem,
   type FileEntry,
 } from "@/components/features/studio/publish/hooks/useFileSystem"
+import { toast } from "sonner"
 
 const DEFAULT_FILE_ENTRY: FileEntry = {
   name: "component.tsx",
@@ -31,6 +32,7 @@ function PublishPageContent() {
     DEFAULT_FILE_ENTRY,
   )
   const [code, setCode] = useState<string>("")
+  const [isRegenerating, setIsRegenerating] = useState(false)
 
   const {
     sandboxRef,
@@ -50,6 +52,7 @@ function PublishPageContent() {
     files,
     isTreeLoading,
     isFileLoading,
+    isCompiling,
     advancedView,
     toggleAdvancedView,
     loadRootDirectory,
@@ -60,6 +63,7 @@ function PublishPageContent() {
     createDirectory,
     renameEntry,
     addDependencyToPackageJson,
+    generateRegistry,
   } = useFileSystem({
     sandboxRef,
     reconnectSandbox,
@@ -155,6 +159,12 @@ function PublishPageContent() {
     }
   }
 
+  const handleGenerateRegistry = async () => {
+    console.log("Starting registry generation...")
+    // setIsRegenerating(true)
+    generateRegistry()
+  }
+
   const handleReset = () => {
     window.location.reload()
   }
@@ -183,7 +193,12 @@ function PublishPageContent() {
 
   return (
     <div className="h-screen w-full flex flex-col">
-      <PublishHeader sandboxId={sandboxId} sandboxName={serverSandbox?.name} />
+      <PublishHeader
+        onGenerateRegistry={handleGenerateRegistry}
+        isRegenerating={isRegenerating || isCompiling}
+        sandboxId={sandboxId}
+        sandboxName={serverSandbox?.name}
+      />
 
       <ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
         <ResizablePanel defaultSize={20} minSize={15} className="border-r">
diff --git a/apps/web/components/features/studio/publish/components/PublishHeader.tsx b/apps/web/components/features/studio/publish/components/PublishHeader.tsx
index 17e7a59d..a61f1e0b 100644
--- a/apps/web/components/features/studio/publish/components/PublishHeader.tsx
+++ b/apps/web/components/features/studio/publish/components/PublishHeader.tsx
@@ -9,6 +9,7 @@ import {
   CheckIcon,
   XIcon,
   ArrowLeftIcon,
+  ArchiveIcon,
 } from "lucide-react"
 import { toast } from "sonner"
 import { Input } from "@/components/ui/input"
@@ -17,12 +18,15 @@ interface PublishHeaderProps {
   sandboxId: string | null
   sandboxName?: string
   username?: string
+  onGenerateRegistry?: () => void
+  isRegenerating?: boolean
 }
 
 export function PublishHeader({
   sandboxId,
-  sandboxName = "Untitled KEK",
-  username,
+  sandboxName = "Untitled",
+  onGenerateRegistry,
+  isRegenerating = false,
 }: PublishHeaderProps) {
   const [isLoading, setIsLoading] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
@@ -136,6 +140,18 @@ export function PublishHeader({
           </div>
         )}
         <div className="ml-auto flex items-center gap-2">
+          <Button
+            onClick={onGenerateRegistry}
+            disabled={isRegenerating}
+            className="gap-2"
+          >
+            {isRegenerating ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <ArchiveIcon className="h-4 w-4" />
+            )}
+            {isRegenerating ? "Generating registry..." : "Generate registry"}
+          </Button>
           <Button
             size="sm"
             onClick={handlePublish}
diff --git a/apps/web/components/features/studio/publish/hooks/useFileSystem.ts b/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
index 6cc6c851..0e25283a 100644
--- a/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
+++ b/apps/web/components/features/studio/publish/hooks/useFileSystem.ts
@@ -19,6 +19,8 @@ const ALWAYS_HIDDEN_FILES = [
   "README.md",
   "components.json",
   "app.tsx",
+  "scripts",
+  "registry.json",
 ]
 const ADVANCED_VIEW_HIDDEN_FILES = [
   "package.json",
@@ -104,6 +106,7 @@ export const useFileSystem = ({
   const [files, setFiles] = useState<FileEntry[]>([])
   const [isTreeLoading, setIsTreeLoading] = useState(false)
   const [isFileLoading, setIsFileLoading] = useState(false)
+  const [isCompiling, setIsCompiling] = useState(false)
   const [advancedView, setAdvancedView] = useState(false)
   const debounceRef = useRef<NodeJS.Timeout | null>(null)
 
@@ -281,10 +284,56 @@ export const useFileSystem = ({
     setAdvancedView((prev) => !prev)
   }
 
+  // Function to compile the project into a shadcn registry
+  const generateRegistry = async () => {
+    const task = await sandboxRef.current?.tasks.runTask("generate:registry")
+
+    const getContentOfRegistryJson = async () => {
+      const registryJsonPath = normalizePath("public/r/component.json")
+      const content = await fsWrapper((sandbox) =>
+        sandbox.fs.readTextFile(registryJsonPath),
+      )
+      return content
+    }
+
+    let counter = 0
+    const interval = setInterval(async () => {
+      const shells = await sandboxRef.current?.shells.getShells()
+      const shell = shells?.find((shell) => shell.id === task?.shellId)
+
+      if (!shell) {
+        return
+      }
+
+      const connectedShell = await sandboxRef.current?.shells.open(shell.id)
+
+      if (connectedShell) {
+        clearInterval(interval)
+        console.log("CONNECTED SHELL", connectedShell)
+        connectedShell?.onOutput(async (data) => {
+          if (data.includes("FINISH")) {
+            console.log("FINISH")
+            setIsCompiling(false)
+            const content = await getContentOfRegistryJson()
+            console.log("CONTENT OF REGISTRY JSON", content)
+            toast.success("Registry generated successfully")
+            connectedShell.dispose()
+          }
+        })
+      }
+
+      counter++
+      if (counter > 35) {
+        clearInterval(interval)
+      }
+    }, 1000)
+  }
+
   return {
     files,
     isTreeLoading,
     isFileLoading,
+    isCompiling,
     advancedView,
     toggleAdvancedView,
     loadRootDirectory,
@@ -295,5 +344,6 @@ export const useFileSystem = ({
     deleteEntry,
     renameEntry,
     addDependencyToPackageJson,
+    generateRegistry,
   }
 }
diff --git a/apps/web/lib/codesandbox-sdk.ts b/apps/web/lib/codesandbox-sdk.ts
index fafc44d4..a4ecd4bc 100644
--- a/apps/web/lib/codesandbox-sdk.ts
+++ b/apps/web/lib/codesandbox-sdk.ts
@@ -5,7 +5,7 @@ export const codesandboxSdk = new CodeSandbox(process.env.CSB_API_KEY!)
 export const DEFAULT_TEMPLATE = "21st-vite"
 
 export const TEMPLATES = {
-  "21st-vite": "3cpq99",
+  "21st-vite": "672j5x",
 }
 
 export const DEFAULT_HIBERNATION_TIMEOUT = 60 * 1000 // 1 minute

From 4d6ae600280404ea062a441df43beb0dd4ad96ac Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Tue, 29 Apr 2025 14:27:57 +0400
Subject: [PATCH 098/143] rework sandpack timeouts

---
 apps/web/app/api/sandbox/connect/route.ts | 12 ++++++++++--
 apps/web/app/api/sandbox/new/route.ts     |  2 ++
 apps/web/lib/codesandbox-sdk.ts           |  2 +-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/apps/web/app/api/sandbox/connect/route.ts b/apps/web/app/api/sandbox/connect/route.ts
index c49721d3..a5c690cf 100644
--- a/apps/web/app/api/sandbox/connect/route.ts
+++ b/apps/web/app/api/sandbox/connect/route.ts
@@ -1,7 +1,10 @@
 import { auth } from "@clerk/nextjs/server"
 import { NextResponse } from "next/server"
 import { supabaseWithAdminAccess } from "@/lib/supabase"
-import { codesandboxSdk } from "@/lib/codesandbox-sdk"
+import {
+  codesandboxSdk,
+  DEFAULT_HIBERNATION_TIMEOUT,
+} from "@/lib/codesandbox-sdk"
 import ShortUUID from "short-uuid"
 
 export async function POST(request: Request) {
@@ -36,7 +39,12 @@ export async function POST(request: Request) {
       )
     }
 
-    const startData = await codesandboxSdk.sandbox.start(sandbox.codesandbox_id)
+    const startData = await codesandboxSdk.sandbox.start(
+      sandbox.codesandbox_id,
+      {
+        hibernationTimeoutSeconds: DEFAULT_HIBERNATION_TIMEOUT,
+      },
+    )
 
     return NextResponse.json({ success: true, startData, sandbox })
   } catch (error) {
diff --git a/apps/web/app/api/sandbox/new/route.ts b/apps/web/app/api/sandbox/new/route.ts
index dfb17cb8..07b2b450 100644
--- a/apps/web/app/api/sandbox/new/route.ts
+++ b/apps/web/app/api/sandbox/new/route.ts
@@ -13,6 +13,8 @@ export async function POST() {
   try {
     const { userId } = await auth()
 
+    console.log("userId", userId)
+
     if (!userId) {
       return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
     }
diff --git a/apps/web/lib/codesandbox-sdk.ts b/apps/web/lib/codesandbox-sdk.ts
index a4ecd4bc..40d56c7f 100644
--- a/apps/web/lib/codesandbox-sdk.ts
+++ b/apps/web/lib/codesandbox-sdk.ts
@@ -8,4 +8,4 @@ export const TEMPLATES = {
   "21st-vite": "672j5x",
 }
 
-export const DEFAULT_HIBERNATION_TIMEOUT = 60 * 1000 // 1 minute
+export const DEFAULT_HIBERNATION_TIMEOUT = 60

From 3f5e16aaa3c9f16d0407e21fa1724ab31cf298a5 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Tue, 29 Apr 2025 16:03:43 +0400
Subject: [PATCH 099/143] resolve dependencies erors for codemirror

---
 .../component-page/component-preview.tsx      |    4 +-
 apps/web/lib/queries.ts                       |    2 +-
 apps/web/package.json                         |    1 -
 package.json                                  |    6 -
 pnpm-lock.yaml                                | 7690 +++++++----------
 5 files changed, 2905 insertions(+), 4798 deletions(-)

diff --git a/apps/web/components/features/component-page/component-preview.tsx b/apps/web/components/features/component-page/component-preview.tsx
index 6323ce67..0932c7f3 100644
--- a/apps/web/components/features/component-page/component-preview.tsx
+++ b/apps/web/components/features/component-page/component-preview.tsx
@@ -296,7 +296,7 @@ export function ComponentPagePreview({
     },
     ...({ fileLabels: customFileLabels } as any),
   }
-  console.log(demo?.bundle_hash)
+
   return (
     <motion.div
       layout
@@ -409,7 +409,7 @@ export function ComponentPagePreview({
                                 </TabsList>
                                 <div className="">
                                   <SandpackCodeViewer
-                                    wrapContent={true}
+                                    wrapContent
                                     showTabs={false}
                                   />
                                 </div>
diff --git a/apps/web/lib/queries.ts b/apps/web/lib/queries.ts
index 55083a90..518df069 100644
--- a/apps/web/lib/queries.ts
+++ b/apps/web/lib/queries.ts
@@ -12,7 +12,7 @@ import {
   useQueryClient,
   useQuery,
 } from "@tanstack/react-query"
-import { makeSlugFromName } from "@/components/features/publish/hooks/use-is-check-slug-available"
+import { makeSlugFromName } from "@/components/features/publish-old/hooks/use-is-check-slug-available"
 import { SupabaseClient } from "@supabase/supabase-js"
 import { useClerkSupabaseClient } from "@/lib/clerk"
 import { useUser } from "@clerk/nextjs"
diff --git a/apps/web/package.json b/apps/web/package.json
index ab4b1a2b..34ea0003 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -23,7 +23,6 @@
     "@babel/types": "^7.25.6",
     "@clerk/nextjs": "^6.11.2",
     "@clerk/themes": "^2.1.35",
-    "@codemirror/autocomplete": "^6.18.6",
     "@codesandbox/sandpack-react": "^2.19.9",
     "@codesandbox/sdk": "^0.11.2",
     "@hookform/resolvers": "^3.9.1",
diff --git a/package.json b/package.json
index 42d88a73..dcb57bba 100644
--- a/package.json
+++ b/package.json
@@ -21,15 +21,9 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@codemirror/lang-css": "^6.3.1",
-    "@codemirror/lang-html": "^6.4.9",
-    "@codemirror/lang-javascript": "^6.2.3",
-    "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/theme-one-dark": "^6.1.2",
     "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-radio-group": "^1.2.3",
     "@tanstack/react-table": "^8.21.2",
-    "@uiw/react-codemirror": "^4.23.10",
     "emblor": "^1.4.7",
     "jotai": "2.8.0",
     "next": "^15.2.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 59ad94d8..ccc5b538 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,155 +11,137 @@ importers:
 
   .:
     dependencies:
-      '@codemirror/lang-css':
-        specifier: ^6.3.1
-        version: 6.3.1
-      '@codemirror/lang-html':
-        specifier: ^6.4.9
-        version: 6.4.9
-      '@codemirror/lang-javascript':
-        specifier: ^6.2.3
-        version: 6.2.3
-      '@codemirror/lang-json':
-        specifier: ^6.0.1
-        version: 6.0.1
-      '@codemirror/theme-one-dark':
-        specifier: ^6.1.2
-        version: 6.1.2
       '@monaco-editor/react':
         specifier: ^4.6.0
-        version: 4.6.0(monaco-editor@0.52.2)(react-dom@18.3.1)(react@18.3.1)
+        version: 4.7.0(monaco-editor@0.52.2)(react-dom@18.3.1)(react@18.3.1)
       '@radix-ui/react-radio-group':
         specifier: ^1.2.3
-        version: 1.2.3(react-dom@18.3.1)(react@18.3.1)
+        version: 1.3.4(react-dom@18.3.1)(react@18.3.1)
       '@tanstack/react-table':
         specifier: ^8.21.2
-        version: 8.21.2(react-dom@18.3.1)(react@18.3.1)
-      '@uiw/react-codemirror':
-        specifier: ^4.23.10
-        version: 4.23.10(@babel/runtime@7.26.0)(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.10.3)(@codemirror/lint@6.8.5)(@codemirror/search@6.5.10)(@codemirror/state@6.5.2)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.36.5)(codemirror@6.0.1)(react-dom@18.3.1)(react@18.3.1)
+        version: 8.21.3(react-dom@18.3.1)(react@18.3.1)
       emblor:
         specifier: ^1.4.7
-        version: 1.4.7(react-dom@18.3.1)(react@18.3.1)(typescript@5.6.3)
+        version: 1.4.8(react-dom@18.3.1)(react@18.3.1)
       jotai:
         specifier: 2.8.0
         version: 2.8.0(react@18.3.1)
       next:
         specifier: ^15.2.1
-        version: 15.2.1(react-dom@18.3.1)(react@18.3.1)
+        version: 15.3.0(react-dom@18.3.1)(react@18.3.1)
       recharts:
         specifier: ^2.15.1
-        version: 2.15.1(react-dom@18.3.1)(react@18.3.1)
+        version: 2.15.3(react-dom@18.3.1)(react@18.3.1)
     devDependencies:
       prettier:
         specifier: ^3.2.5
-        version: 3.3.3
+        version: 3.5.3
       stripe-cli:
         specifier: ^0.1.0
         version: 0.1.0
       turbo:
         specifier: ^2.0.7
-        version: 2.2.3
+        version: 2.5.2
       typescript:
         specifier: ^5.4.5
-        version: 5.6.3
+        version: 5.8.3
 
   apps/backend:
     dependencies:
       '@aws-sdk/client-s3':
         specifier: ^3.758.0
-        version: 3.758.0
+        version: 3.798.0
       '@babel/preset-react':
         specifier: ^7.26.3
-        version: 7.26.3(@babel/core@7.26.0)
+        version: 7.26.3(@babel/core@7.26.10)
       '@babel/preset-typescript':
         specifier: ^7.26.0
-        version: 7.26.0(@babel/core@7.26.0)
+        version: 7.27.0(@babel/core@7.26.10)
       '@vitejs/plugin-react':
         specifier: ^4.3.4
-        version: 4.3.4(vite@6.2.1)
+        version: 4.4.1(vite@6.3.3)
       endent:
         specifier: ^2.1.0
         version: 2.1.0
       esbuild:
         specifier: ^0.25.0
-        version: 0.25.0
+        version: 0.25.3
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
       postcss:
         specifier: ^8.4.35
-        version: 8.4.47
+        version: 8.5.3
       react:
         specifier: ^19.0.0
-        version: 19.0.0
+        version: 19.1.0
       react-dom:
         specifier: 19.0.0
-        version: 19.0.0(react@19.0.0)
+        version: 19.0.0(react@19.1.0)
       tailwindcss:
         specifier: ^3.4.1
-        version: 3.4.14(ts-node@10.9.2)
+        version: 3.4.17(ts-node@10.9.2)
       typescript:
         specifier: ^5.3.3
-        version: 5.6.3
+        version: 5.8.3
       vite:
         specifier: ^6.2.1
-        version: 6.2.1
+        version: 6.3.3
       vite-plugin-singlefile:
         specifier: ^2.1.0
-        version: 2.1.0(rollup@4.38.0)(vite@6.2.1)
+        version: 2.2.0(rollup@4.40.1)(vite@6.3.3)
     devDependencies:
       '@types/bun':
         specifier: ^1.1.14
-        version: 1.1.14
+        version: 1.2.11
       '@types/lodash':
         specifier: ^4.14.202
-        version: 4.17.13
+        version: 4.17.16
 
   apps/web:
     dependencies:
       '@amplitude/analytics-browser':
         specifier: ^2.11.10
-        version: 2.11.10
+        version: 2.16.0
       '@amplitude/plugin-session-replay-browser':
         specifier: ^1.12.0
-        version: 1.12.0
+        version: 1.16.0
       '@aws-sdk/client-s3':
         specifier: ^3.735.0
-        version: 3.735.0
+        version: 3.798.0
       '@aws-sdk/credential-providers':
         specifier: ^3.734.0
-        version: 3.734.0
+        version: 3.798.0
       '@aws-sdk/s3-request-presigner':
         specifier: ^3.735.0
-        version: 3.735.0
+        version: 3.798.0
       '@babel/parser':
         specifier: ^7.25.6
-        version: 7.26.1
+        version: 7.27.0
       '@babel/traverse':
         specifier: ^7.25.6
-        version: 7.25.9
+        version: 7.27.0
       '@babel/types':
         specifier: ^7.25.6
-        version: 7.26.0
+        version: 7.27.0
       '@clerk/nextjs':
         specifier: ^6.11.2
-        version: 6.11.2(next@15.3.0)(react-dom@19.1.0)(react@19.1.0)
+        version: 6.18.0(next@15.3.0)(react-dom@19.1.0)(react@19.1.0)(svix@1.64.1)
       '@clerk/themes':
         specifier: ^2.1.35
-        version: 2.1.39
-      '@codemirror/autocomplete':
-        specifier: ^6.18.6
-        version: 6.18.6
+        version: 2.2.36
       '@codesandbox/sandpack-react':
         specifier: ^2.19.9
-        version: 2.19.9(@lezer/common@1.2.3)(react-dom@19.1.0)(react@19.1.0)
+        version: 2.20.0(react-dom@19.1.0)(react@19.1.0)
+      '@codesandbox/sdk':
+        specifier: ^0.11.2
+        version: 0.11.2
       '@hookform/resolvers':
         specifier: ^3.9.1
-        version: 3.9.1(react-hook-form@7.53.1)
+        version: 3.10.0(react-hook-form@7.56.1)
       '@monaco-editor/react':
         specifier: ^4.6.0
-        version: 4.6.0(monaco-editor@0.52.2)(react-dom@19.1.0)(react@19.1.0)
+        version: 4.7.0(monaco-editor@0.52.2)(react-dom@19.1.0)(react@19.1.0)
       '@next/third-parties':
         specifier: 15.3.0
         version: 15.3.0(next@15.3.0)(react@19.1.0)
@@ -168,73 +150,73 @@ importers:
         version: 0.4.4(react-dom@19.1.0)(react@19.1.0)
       '@radix-ui/react-accordion':
         specifier: ^1.2.1
-        version: 1.2.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+        version: 1.2.8(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@radix-ui/react-alert-dialog':
         specifier: ^1.1.1
-        version: 1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+        version: 1.1.11(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@radix-ui/react-avatar':
         specifier: ^1.1.2
-        version: 1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+        version: 1.1.7(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@radix-ui/react-checkbox':
         specifier: ^1.1.2
-        version: 1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+        version: 1.2.3(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@radix-ui/react-collapsible':
         specifier: ^1.1.2
-        version: 1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+        version: 1.1.8(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@radix-ui/react-context-menu':
         specifier: ^2.2.6
-        version: 2.2.6(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+        version: 2.2.12(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@radix-ui/react-dialog':
         specifier: ^1.1.2
-        version: 1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+        version: 1.1.11(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.1.2
-        version: 2.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+        version: 2.1.12(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@radix-ui/react-hover-card':
         specifier: ^1.1.2
-        version: 1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+        version: 1.1.11(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@radix-ui/react-icons':
         specifier: ^1.3.0
-        version: 1.3.0(react@19.1.0)
+        version: 1.3.2(react@19.1.0)
       '@radix-ui/react-label':
         specifier: ^2.1.0
-        version: 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+        version: 2.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@radix-ui/react-navigation-menu':
         specifier: ^1.2.1
-        version: 1.2.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+        version: 1.2.10(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@radix-ui/react-popover':
         specifier: ^1.1.2
-        version: 1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+        version: 1.1.11(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@radix-ui/react-progress':
         specifier: ^1.1.1
-        version: 1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+        version: 1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@radix-ui/react-scroll-area':
         specifier: ^1.2.1
-        version: 1.2.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+        version: 1.2.6(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@radix-ui/react-select':
         specifier: ^2.1.2
-        version: 2.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+        version: 2.2.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@radix-ui/react-separator':
         specifier: ^1.1.0
-        version: 1.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+        version: 1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@radix-ui/react-slot':
         specifier: ^1.1.0
-        version: 1.1.0(@types/react@19.1.1)(react@19.1.0)
+        version: 1.2.0(@types/react@19.1.1)(react@19.1.0)
       '@radix-ui/react-switch':
         specifier: ^1.1.1
-        version: 1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+        version: 1.2.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@radix-ui/react-tabs':
         specifier: ^1.1.1
-        version: 1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+        version: 1.1.9(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@radix-ui/react-toast':
         specifier: ^1.2.1
-        version: 1.2.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+        version: 1.2.11(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@radix-ui/react-toggle':
         specifier: ^1.1.1
-        version: 1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+        version: 1.1.6(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@radix-ui/react-tooltip':
         specifier: ^1.1.3
-        version: 1.1.3(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+        version: 1.2.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@react-email/components':
         specifier: ^0.0.33
         version: 0.0.33(react-dom@19.1.0)(react@19.1.0)
@@ -243,34 +225,37 @@ importers:
         version: link:../../packages/ui
       '@supabase/auth-helpers-nextjs':
         specifier: ^0.10.0
-        version: 0.10.0(@supabase/supabase-js@2.46.1)
+        version: 0.10.0(@supabase/supabase-js@2.49.4)
       '@supabase/postgrest-js':
         specifier: ^1.16.2
-        version: 1.17.0
+        version: 1.19.4
       '@supabase/supabase-js':
         specifier: ^2.45.4
-        version: 2.46.1
+        version: 2.49.4
       '@tabler/icons-react':
         specifier: ^3.26.0
-        version: 3.26.0(react@19.1.0)
+        version: 3.31.0(react@19.1.0)
       '@tailwindcss/typography':
         specifier: ^0.5.15
-        version: 0.5.15(tailwindcss@3.4.14)
+        version: 0.5.16(tailwindcss@3.4.17)
       '@tanstack/react-query':
         specifier: ^5.59.0
-        version: 5.59.16(react@19.1.0)
+        version: 5.74.9(react@19.1.0)
+      '@tanstack/react-table':
+        specifier: ^8.21.2
+        version: 8.21.3(react-dom@19.1.0)(react@19.1.0)
       '@types/prismjs':
         specifier: ^1.26.4
         version: 1.26.5
       autoprefixer:
         specifier: ^10.4.20
-        version: 10.4.20(postcss@8.4.47)
+        version: 10.4.21(postcss@8.5.3)
       cheerio:
         specifier: ^1.0.0
         version: 1.0.0
       class-variance-authority:
         specifier: ^0.7.0
-        version: 0.7.0
+        version: 0.7.1
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -303,10 +288,10 @@ importers:
         version: 10.0.1
       monaco-jsx-highlighter:
         specifier: ^2.77.77
-        version: 2.77.77(@babel/parser@7.26.1)(@babel/traverse@7.25.9)(monaco-editor@0.52.2)
+        version: 2.77.77(@babel/parser@7.27.0)(@babel/traverse@7.27.0)(monaco-editor@0.52.2)
       motion:
         specifier: ^11.18.0
-        version: 11.18.0(react-dom@19.1.0)(react@19.1.0)
+        version: 11.18.2(react-dom@19.1.0)(react@19.1.0)
       next:
         specifier: 15.3.0
         version: 15.3.0(react-dom@19.1.0)(react@19.1.0)
@@ -318,10 +303,10 @@ importers:
         version: 3.3.2
       openai:
         specifier: ^4.86.1
-        version: 4.86.1(zod@3.23.8)
+        version: 4.96.0(zod@3.24.3)
       postcss:
         specifier: ^8.4.47
-        version: 8.4.47
+        version: 8.5.3
       qss:
         specifier: ^3.0.0
         version: 3.0.0
@@ -333,46 +318,49 @@ importers:
         version: 19.1.0(react@19.1.0)
       react-dropzone:
         specifier: ^14.2.9
-        version: 14.2.10(react@19.1.0)
+        version: 14.3.8(react@19.1.0)
       react-hook-form:
         specifier: ^7.53.1
-        version: 7.53.1(react@19.1.0)
+        version: 7.56.1(react@19.1.0)
       react-hotkeys-hook:
         specifier: ^4.6.1
-        version: 4.6.1(react-dom@19.1.0)(react@19.1.0)
+        version: 4.6.2(react-dom@19.1.0)(react@19.1.0)
+      react-resizable-panels:
+        specifier: ^2.1.8
+        version: 2.1.9(react-dom@19.1.0)(react@19.1.0)
       resend:
         specifier: ^4.1.2
-        version: 4.1.2(react-dom@19.1.0)(react@19.1.0)
+        version: 4.4.1(react-dom@19.1.0)(react@19.1.0)
       shiki:
         specifier: ^3.0.0
-        version: 3.0.0
+        version: 3.3.0
       short-uuid:
         specifier: ^5.2.0
         version: 5.2.0
       sonner:
         specifier: ^1.5.0
-        version: 1.5.0(react-dom@19.1.0)(react@19.1.0)
+        version: 1.7.4(react-dom@19.1.0)(react@19.1.0)
       stripe:
         specifier: ^17.6.0
-        version: 17.6.0
+        version: 17.7.0
       svix:
         specifier: ^1.37.0
-        version: 1.37.0
+        version: 1.64.1
       tailwind-merge:
         specifier: ^2.5.2
-        version: 2.5.4
+        version: 2.6.0
       tailwindcss:
         specifier: ^3.4.14
-        version: 3.4.14(ts-node@10.9.2)
+        version: 3.4.17(ts-node@10.9.2)
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.14)
+        version: 1.0.7(tailwindcss@3.4.17)
       vaul:
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       zod:
         specifier: ^3.23.8
-        version: 3.23.8
+        version: 3.24.3
     devDependencies:
       '@repo/eslint-config':
         specifier: workspace:*
@@ -382,13 +370,13 @@ importers:
         version: link:../../packages/typescript-config
       '@types/babel__traverse':
         specifier: ^7.20.6
-        version: 7.20.6
+        version: 7.20.7
       '@types/lodash':
         specifier: ^4.17.12
-        version: 4.17.13
+        version: 4.17.16
       '@types/node':
         specifier: ^20
-        version: 20.17.3
+        version: 20.17.32
       '@types/react':
         specifier: 19.1.1
         version: 19.1.1
@@ -400,46 +388,46 @@ importers:
         version: 15.5.13
       dotenv:
         specifier: ^16.4.5
-        version: 16.4.5
+        version: 16.5.0
       eslint:
         specifier: ^8
         version: 8.57.1
       eslint-config-next:
         specifier: 15.3.0
-        version: 15.3.0(eslint@8.57.1)(typescript@5.6.3)
+        version: 15.3.0(eslint@8.57.1)(typescript@5.8.3)
       supabase:
         specifier: link:supabase/tap/supabase
         version: link:supabase/tap/supabase
       ts-node:
         specifier: ^10.9.2
-        version: 10.9.2(@types/node@20.17.3)(typescript@5.6.3)
+        version: 10.9.2(@types/node@20.17.32)(typescript@5.8.3)
       typescript:
         specifier: ^5.4.5
-        version: 5.6.3
+        version: 5.8.3
 
   packages/eslint-config:
     devDependencies:
       '@typescript-eslint/eslint-plugin':
         specifier: ^7.1.0
-        version: 7.18.0(@typescript-eslint/parser@7.18.0)(eslint@8.57.1)(typescript@5.6.3)
+        version: 7.18.0(@typescript-eslint/parser@7.18.0)(eslint@8.57.1)(typescript@5.8.3)
       '@typescript-eslint/parser':
         specifier: ^7.1.0
-        version: 7.18.0(eslint@8.57.1)(typescript@5.6.3)
+        version: 7.18.0(eslint@8.57.1)(typescript@5.8.3)
       '@vercel/style-guide':
         specifier: ^5.2.0
-        version: 5.2.0(eslint@8.57.1)(prettier@3.3.3)(typescript@5.6.3)
+        version: 5.2.0(eslint@8.57.1)(prettier@3.5.3)(typescript@5.8.3)
       eslint-config-prettier:
         specifier: ^9.1.0
         version: 9.1.0(eslint@8.57.1)
       eslint-config-turbo:
         specifier: ^2.0.0
-        version: 2.2.3(eslint@8.57.1)
+        version: 2.5.2(eslint@8.57.1)(turbo@2.5.2)
       eslint-plugin-only-warn:
         specifier: ^1.1.0
         version: 1.1.0
       typescript:
         specifier: ^5.3.3
-        version: 5.6.3
+        version: 5.8.3
 
   packages/typescript-config: {}
 
@@ -457,25 +445,25 @@ importers:
         version: link:../typescript-config
       '@turbo/gen':
         specifier: ^1.12.4
-        version: 1.13.4(@types/node@20.17.3)(typescript@5.6.3)
+        version: 1.13.4(@types/node@20.17.32)(typescript@5.8.3)
       '@types/eslint':
         specifier: ^8.56.5
         version: 8.56.12
       '@types/node':
         specifier: ^20.11.24
-        version: 20.17.3
+        version: 20.17.32
       '@types/react':
         specifier: ^18.2.61
-        version: 18.3.12
+        version: 18.3.20
       '@types/react-dom':
         specifier: ^18.2.19
-        version: 18.3.1
+        version: 18.3.6(@types/react@18.3.20)
       eslint:
         specifier: ^8.57.0
         version: 8.57.1
       typescript:
         specifier: ^5.3.3
-        version: 5.6.3
+        version: 5.8.3
 
 packages:
 
@@ -484,153 +472,155 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
-  /@amplitude/analytics-browser@2.11.10:
-    resolution: {integrity: sha512-+bc+KvAvrFTQefmq+iGDuzdtPdJm9HXHPI58yTnHJeXhXDhneH8cGmT6dfL1SvW/W2kGvBdFXiZMoPuHcR0xKg==}
+  /@amplitude/analytics-browser@2.16.0:
+    resolution: {integrity: sha512-wf0r5bEQJC1u2vUXMNovgiJKXlHUDeB1jSc6Zykgnpg44hEyZyoP7CyjUoxPN+CskyW5NldPIaCqHLrDoLymmg==}
     dependencies:
-      '@amplitude/analytics-client-common': 2.3.6
-      '@amplitude/analytics-core': 2.5.5
+      '@amplitude/analytics-core': 2.10.1
       '@amplitude/analytics-remote-config': 0.4.1
-      '@amplitude/analytics-types': 2.8.4
-      '@amplitude/plugin-autocapture-browser': 1.0.4
-      '@amplitude/plugin-page-view-tracking-browser': 2.3.6
-      tslib: 2.8.0
+      '@amplitude/plugin-autocapture-browser': 1.1.9
+      '@amplitude/plugin-page-view-tracking-browser': 2.3.19
+      tslib: 2.8.1
     dev: false
 
-  /@amplitude/analytics-client-common@2.3.6:
-    resolution: {integrity: sha512-4KAaqevqzYJIUzgjBmH80QDmYgzUAE0JpKz2s7w6cjeoX9DrB1gBa+RqWySULiUeIDfx+DTlhsZPMzFn+og17w==}
+  /@amplitude/analytics-client-common@2.3.17:
+    resolution: {integrity: sha512-NCOEQzRn4bIMFLICtfg72KHF9KZyCSHYmALlOMh9wXmgBndPF4e2vrhXwNu65rIfP21Vb9Zm/MbPh8RKJ+bJ5w==}
     dependencies:
-      '@amplitude/analytics-connector': 1.6.2
-      '@amplitude/analytics-core': 2.5.5
-      '@amplitude/analytics-types': 2.8.4
-      tslib: 2.8.0
+      '@amplitude/analytics-connector': 1.6.4
+      '@amplitude/analytics-core': 2.10.1
+      '@amplitude/analytics-types': 2.9.1
+      tslib: 2.8.1
+    dev: false
+
+  /@amplitude/analytics-connector@1.6.4:
+    resolution: {integrity: sha512-SpIv0IQMNIq6SH3UqFGiaZyGSc7PBZwRdq7lvP0pBxW8i4Ny+8zwI0pV+VMfMHQwWY3wdIbWw5WQphNjpdq1/Q==}
     dev: false
 
-  /@amplitude/analytics-connector@1.6.2:
-    resolution: {integrity: sha512-9bk2IjyV3VgUdbI3ounKUuP+4u4ABftDWGdOKxshEQrHg6WhgC8V4hdhSHv9wOHebGTvZntRKM5LlSXUyDYBpw==}
+  /@amplitude/analytics-core@1.2.7:
+    resolution: {integrity: sha512-SM9jdQ+l2q+hy+DdCQm5vtfOTiI+53c+alSSc7fwiuFnTExllXHf9RUK6kKhw3ky+N2o6yqbo+0OGoepLhNf6w==}
     dependencies:
-      '@amplitude/experiment-core': 0.10.1
+      '@amplitude/analytics-types': 1.3.5
+      tslib: 2.8.1
     dev: false
 
-  /@amplitude/analytics-core@2.5.5:
-    resolution: {integrity: sha512-OSB1WSD6qYoHyHliZaSujyatik2SP+vtoy8Y0vgRdYIpbE24F2q+SwBF3X5A1IeUqZ5fdpz+BNMwwUVl0Z4Ykg==}
+  /@amplitude/analytics-core@2.10.1:
+    resolution: {integrity: sha512-QWCGNVDYIsQKoEMJF3o79QlWFytYxowUYtfEQshTQcV9DXo7+sbuntkPbX0kEgZJRAiIwO1NA1bMMQZiSTeuXg==}
     dependencies:
-      '@amplitude/analytics-types': 2.8.4
-      tslib: 2.8.0
+      '@amplitude/analytics-connector': 1.6.4
+      tslib: 2.8.1
     dev: false
 
   /@amplitude/analytics-remote-config@0.4.1:
     resolution: {integrity: sha512-BYl6kQ9qjztrCACsugpxO+foLaQIC0aSEzoXEAb/gwOzInmqkyyI+Ub+aWTBih4xgB/lhWlOcidWHAmNiTJTNw==}
     dependencies:
-      '@amplitude/analytics-client-common': 2.3.6
-      '@amplitude/analytics-core': 2.5.5
-      '@amplitude/analytics-types': 2.8.4
-      tslib: 2.8.0
+      '@amplitude/analytics-client-common': 2.3.17
+      '@amplitude/analytics-core': 2.10.1
+      '@amplitude/analytics-types': 2.9.1
+      tslib: 2.8.1
     dev: false
 
-  /@amplitude/analytics-remote-config@0.6.0:
-    resolution: {integrity: sha512-2VgRG2spUcpoU8IR+CSYJK8ugtYvPOM7EPl+nZ3amYngbF+/ASMx+kJUG+CzlWNz2CvRwP/6ipdhBGhd/p5htg==}
+  /@amplitude/analytics-remote-config@0.6.1:
+    resolution: {integrity: sha512-Eyvo2+ASomUBxqRTuxAtkJj7vdRngwHwiYk4ov+J2RxDZOmhmTDkqpN6geW1cKKW7wu82bsj6GCmH4sZWbjzqg==}
     dependencies:
-      '@amplitude/analytics-client-common': 2.3.6
-      '@amplitude/analytics-core': 2.5.5
-      '@amplitude/analytics-types': 2.8.4
-      tslib: 2.8.0
+      '@amplitude/analytics-core': 1.2.7
+      '@amplitude/analytics-types': 1.3.5
+      tslib: 2.8.1
     dev: false
 
-  /@amplitude/analytics-types@2.8.4:
-    resolution: {integrity: sha512-jQ8WY1aPbpBshl0L/0YEeQn/wZlBr8Jlqc20qf8nbuDuimFy8RqAkE+BVaMI86FCkr3AJ7PjMXkGwCSbUx88CA==}
+  /@amplitude/analytics-types@1.3.5:
+    resolution: {integrity: sha512-IpncCNTZZ6VoGe4fNwTTZtpi+ZNm3mtsocdbCHtIwmKg2wmOF2E09CAwvyF7mK5aRlMIrSAKQyR3GwraATghSw==}
     dev: false
 
-  /@amplitude/experiment-core@0.10.1:
-    resolution: {integrity: sha512-2h0vqOaHoACmNiliGT78hnu9K/tmb7pWU1xw1KitlTtxK6wQqsY/IZPLMwBMG5MLp/AOzNEA/uelODfhBC5+SQ==}
-    dependencies:
-      js-base64: 3.7.7
+  /@amplitude/analytics-types@2.9.1:
+    resolution: {integrity: sha512-Hw0pgUQCDV6AgvZD8ymBF3mzyBnPrIvXiPxfTNTg/bAkg1h+GVNdJIL6VAXd53kYuO7Lx/vjdhZS54i+RYtgMA==}
     dev: false
 
-  /@amplitude/plugin-autocapture-browser@1.0.4:
-    resolution: {integrity: sha512-+aUSsH4hRX4bWtSL90S3Irb3JctvIM+6aQ/wRSo1bYtnpXp7JQjWKzTYVxKx41b92Cb5DCBvmYgcWyg75BKi9Q==}
+  /@amplitude/plugin-autocapture-browser@1.1.9:
+    resolution: {integrity: sha512-xv8MMCSj2Fx4oYlUR6G/qaPeeKiAM7oSEEXgTuwtOOps1Aw2gsZW40atVolpc1cGxM2B/HMe8H0OnrAyQ0DmiQ==}
     dependencies:
-      '@amplitude/analytics-client-common': 2.3.6
-      '@amplitude/analytics-types': 2.8.4
-      rxjs: 7.8.1
-      tslib: 2.8.0
+      '@amplitude/analytics-core': 2.10.1
+      rxjs: 7.8.2
+      tslib: 2.8.1
     dev: false
 
-  /@amplitude/plugin-page-view-tracking-browser@2.3.6:
-    resolution: {integrity: sha512-3NsXskUxIA9m4GedGOCIKOkQ1uGUhuYnP/DpvSXXosJEMRSi82vFxBRX7FnYT1AmV32Du2Z2626CEAEy5W4yeQ==}
+  /@amplitude/plugin-page-view-tracking-browser@2.3.19:
+    resolution: {integrity: sha512-4mAdIY5+AwBDd7MBsZSLrXQpPPGRWVhtZGi9gqjzzZC27H2YfAh1xi7evGBhsZrE1bfoOLbqxC5B6Ma4U3wMQg==}
     dependencies:
-      '@amplitude/analytics-client-common': 2.3.6
-      '@amplitude/analytics-types': 2.8.4
-      tslib: 2.8.0
+      '@amplitude/analytics-client-common': 2.3.17
+      '@amplitude/analytics-types': 2.9.1
+      tslib: 2.8.1
     dev: false
 
-  /@amplitude/plugin-session-replay-browser@1.12.0:
-    resolution: {integrity: sha512-jpPVu+43LvAW7JVQYUvc5sHqSkgitxESg+Ye03MxulqYe/Mpo7pBHYLoUTFEkg50iN++k3328S3cvFRJc5ilIg==}
+  /@amplitude/plugin-session-replay-browser@1.16.0:
+    resolution: {integrity: sha512-3SteZNS7m46pgc3YgUfxVJW9JqKQ+0XtMs/oe58HkbvrGIJxmMgEJTHVMtppZL5g4oSfHuLqd3Tmkv4xTaWAbg==}
     dependencies:
-      '@amplitude/analytics-client-common': 2.3.6
-      '@amplitude/analytics-core': 2.5.5
-      '@amplitude/analytics-types': 2.8.4
-      '@amplitude/session-replay-browser': 1.19.0
+      '@amplitude/analytics-core': 2.10.1
+      '@amplitude/session-replay-browser': 1.22.0
       idb-keyval: 6.2.1
-      tslib: 2.8.0
+      tslib: 2.8.1
     transitivePeerDependencies:
       - rollup
     dev: false
 
-  /@amplitude/rrdom@2.0.0-alpha.26:
-    resolution: {integrity: sha512-pxuDZjc86cCrNwjQ+00TYNmVKZHm50wmcCd0u0bHgrasVuRSBWddB5Nt70TyvXC40oelAEDYyJWOoVWU+W+9gA==}
+  /@amplitude/rrdom@2.0.0-alpha.29:
+    resolution: {integrity: sha512-g1YCIor5iCAxTcHxikLHj0KdW1Rt6tKXzzYSR0IQTw/wcNERxRseILRq6LppSTcFN0q6CyWHUtNrWA2Eh2XmkQ==}
     dependencies:
-      '@amplitude/rrweb-snapshot': 2.0.0-alpha.26
+      '@amplitude/rrweb-snapshot': 2.0.0-alpha.29
     dev: false
 
-  /@amplitude/rrweb-packer@2.0.0-alpha.26:
-    resolution: {integrity: sha512-uJM5/VFdjLUsKM++pAaXAAxpkBbh3r2Skxjx+3YS4OY49/kjA+KgzX1ottT8niOWQCxPngFgfOwle18z0QBXGA==}
+  /@amplitude/rrweb-packer@2.0.0-alpha.29:
+    resolution: {integrity: sha512-OzxD2iyZ7f0XBQsBPeRzUSg2yGSNM1fihY6NgS6caagwmi/BN9F8e10dMe0/4Ykob6T/TGMJ91RDFeVv3Wpo6A==}
     dependencies:
-      '@amplitude/rrweb-types': 2.0.0-alpha.26
+      '@amplitude/rrweb-types': 2.0.0-alpha.29
       fflate: 0.4.8
     dev: false
 
-  /@amplitude/rrweb-snapshot@2.0.0-alpha.26:
-    resolution: {integrity: sha512-ZXAqF+fX/0ngyCS8/Iu83FeMMMXuw9FRKFFK6vTUjvXXvFnBx1WjQZLVNJbaZu3hZUN7sECATuOXQklccY/TJw==}
+  /@amplitude/rrweb-plugin-console-record@2.0.0-alpha.29(@amplitude/rrweb@2.0.0-alpha.29):
+    resolution: {integrity: sha512-PnbPpdyxRoS9VU7GZ0vH82QWysBJ63fp2KbmaoA6XC4OK/fg7i2woHCAhdDUa0Q3aCzf6iOVcEOcfhn1JnJf0A==}
+    peerDependencies:
+      '@amplitude/rrweb': ^2.0.0-alpha.29
     dependencies:
-      postcss: 8.5.3
+      '@amplitude/rrweb': 2.0.0-alpha.29
     dev: false
 
-  /@amplitude/rrweb-types@2.0.0-alpha.26:
-    resolution: {integrity: sha512-50SnMId2Xp3dGaVAEAQCwF3PkX0As8JSMpBoqrw+0bX8uubUySE4mR/tpv75wQ81JK49ruwrdMcmFWSWLfHA/w==}
+  /@amplitude/rrweb-snapshot@2.0.0-alpha.29:
+    resolution: {integrity: sha512-V8ff1MyUUFMcj1ckqXtiQluM4fjQVJMWeWjZ2kIDfx26cCHBrKnQ19VpBjundjU+ViwI5ckATlfWxix7281fAg==}
     dependencies:
-      '@amplitude/rrweb-snapshot': 2.0.0-alpha.26
+      postcss: 8.5.3
     dev: false
 
-  /@amplitude/rrweb-utils@2.0.0-alpha.26:
-    resolution: {integrity: sha512-8GHzpI3nqI6GKGGwrBj3TClWqQ4g9TwXlnPZthGbiUgJ1U3mgF06u4e4tsort958IujYZQf0hk6JdLwB9HgvCg==}
+  /@amplitude/rrweb-types@2.0.0-alpha.29:
+    resolution: {integrity: sha512-dhHKBFvXFEA97x34xp3ZDXFbJR0+yza9UdEckrU99uWtp/7oOwD6nJPynu2AqcCSVfoAsMol3idYw941FQAXCQ==}
     dev: false
 
-  /@amplitude/rrweb@2.0.0-alpha.26:
-    resolution: {integrity: sha512-VDJc81dNyzYSlC+afCG7kikT6OjiWjxo1o/75jNu67AAxOKRuQkddGn0jiwJDgwMYDmqw6jje0QNufbsTpci2g==}
+  /@amplitude/rrweb-utils@2.0.0-alpha.29:
+    resolution: {integrity: sha512-0DV25KDlA3pQjRZGIgaDAoUsY6PjaGufZrpOF9rCv3r6yn8yFcckAxCVz0blNwgI1w0COyaiytaT1UEhT3bK7A==}
+    dev: false
+
+  /@amplitude/rrweb@2.0.0-alpha.29:
+    resolution: {integrity: sha512-UZgo7Y+5RpNdplIRzqc7WJXn0jgqpx6/hjW3vxr1QACJQPgL25zIfrO7FUe9SBOodOsG42bgv9DHEVEwCOC8Bg==}
     dependencies:
-      '@amplitude/rrdom': 2.0.0-alpha.26
-      '@amplitude/rrweb-snapshot': 2.0.0-alpha.26
-      '@amplitude/rrweb-types': 2.0.0-alpha.26
-      '@amplitude/rrweb-utils': 2.0.0-alpha.26
+      '@amplitude/rrdom': 2.0.0-alpha.29
+      '@amplitude/rrweb-snapshot': 2.0.0-alpha.29
+      '@amplitude/rrweb-types': 2.0.0-alpha.29
+      '@amplitude/rrweb-utils': 2.0.0-alpha.29
       '@types/css-font-loading-module': 0.0.7
       '@xstate/fsm': 1.6.5
       base64-arraybuffer: 1.0.2
       mitt: 3.0.1
     dev: false
 
-  /@amplitude/session-replay-browser@1.19.0:
-    resolution: {integrity: sha512-6WADPKj14vpQP71FUnf6Jq6Mbr1De+/+hOLBu+gXxVXpXyhPvJYm2sd/bkDEutHNgGy9BheXPvrMMNVNFED1NQ==}
+  /@amplitude/session-replay-browser@1.22.0:
+    resolution: {integrity: sha512-Jzi+KM+jt7KYiyHq0VLgeZ3y1Zk3bFDT+1AIpcrQeyb6SDeyzdIPior1hBEM1GDbEsaVPnp4WE2h87esFn00fw==}
     dependencies:
-      '@amplitude/analytics-client-common': 2.3.6
-      '@amplitude/analytics-core': 2.5.5
-      '@amplitude/analytics-remote-config': 0.6.0
-      '@amplitude/analytics-types': 2.8.4
-      '@amplitude/rrweb': 2.0.0-alpha.26
-      '@amplitude/rrweb-packer': 2.0.0-alpha.26
-      '@amplitude/rrweb-snapshot': 2.0.0-alpha.26
+      '@amplitude/analytics-core': 2.10.1
+      '@amplitude/analytics-remote-config': 0.6.1
+      '@amplitude/rrweb': 2.0.0-alpha.29
+      '@amplitude/rrweb-packer': 2.0.0-alpha.29
+      '@amplitude/rrweb-plugin-console-record': 2.0.0-alpha.29(@amplitude/rrweb@2.0.0-alpha.29)
+      '@amplitude/rrweb-snapshot': 2.0.0-alpha.29
       '@rollup/plugin-replace': 6.0.2
-      idb: 8.0.1
-      tslib: 2.8.0
+      idb: 8.0.0
+      tslib: 2.8.1
     transitivePeerDependencies:
       - rollup
     dev: false
@@ -639,7 +629,7 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/gen-mapping': 0.3.8
       '@jridgewell/trace-mapping': 0.3.25
 
   /@aws-crypto/crc32@5.2.0:
@@ -647,16 +637,16 @@ packages:
     engines: {node: '>=16.0.0'}
     dependencies:
       '@aws-crypto/util': 5.2.0
-      '@aws-sdk/types': 3.734.0
-      tslib: 2.8.0
+      '@aws-sdk/types': 3.775.0
+      tslib: 2.8.1
     dev: false
 
   /@aws-crypto/crc32c@5.2.0:
     resolution: {integrity: sha512-+iWb8qaHLYKrNvGRbiYRHSdKRWhto5XlZUEBwDjYNf+ly5SVYG6zEoYIdxvf5R3zyeP16w4PLBn3rH1xc74Rag==}
     dependencies:
       '@aws-crypto/util': 5.2.0
-      '@aws-sdk/types': 3.734.0
-      tslib: 2.8.0
+      '@aws-sdk/types': 3.775.0
+      tslib: 2.8.1
     dev: false
 
   /@aws-crypto/sha1-browser@5.2.0:
@@ -664,10 +654,10 @@ packages:
     dependencies:
       '@aws-crypto/supports-web-crypto': 5.2.0
       '@aws-crypto/util': 5.2.0
-      '@aws-sdk/types': 3.734.0
-      '@aws-sdk/util-locate-window': 3.679.0
+      '@aws-sdk/types': 3.775.0
+      '@aws-sdk/util-locate-window': 3.723.0
       '@smithy/util-utf8': 2.3.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@aws-crypto/sha256-browser@5.2.0:
@@ -676,10 +666,10 @@ packages:
       '@aws-crypto/sha256-js': 5.2.0
       '@aws-crypto/supports-web-crypto': 5.2.0
       '@aws-crypto/util': 5.2.0
-      '@aws-sdk/types': 3.734.0
-      '@aws-sdk/util-locate-window': 3.679.0
+      '@aws-sdk/types': 3.775.0
+      '@aws-sdk/util-locate-window': 3.723.0
       '@smithy/util-utf8': 2.3.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@aws-crypto/sha256-js@5.2.0:
@@ -687,1006 +677,621 @@ packages:
     engines: {node: '>=16.0.0'}
     dependencies:
       '@aws-crypto/util': 5.2.0
-      '@aws-sdk/types': 3.734.0
-      tslib: 2.8.0
+      '@aws-sdk/types': 3.775.0
+      tslib: 2.8.1
     dev: false
 
   /@aws-crypto/supports-web-crypto@5.2.0:
     resolution: {integrity: sha512-iAvUotm021kM33eCdNfwIN//F77/IADDSs58i+MDaOqFrVjZo9bAal0NK7HurRuWLLpF1iLX7gbWrjHjeo+YFg==}
     dependencies:
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@aws-crypto/util@5.2.0:
     resolution: {integrity: sha512-4RkU9EsI6ZpBve5fseQlGNUWKMa1RLPQ1dnjnQoe07ldfIzcsGb5hC5W0Dm7u423KWzawlrpbjXBrXCEv9zazQ==}
     dependencies:
-      '@aws-sdk/types': 3.734.0
+      '@aws-sdk/types': 3.775.0
       '@smithy/util-utf8': 2.3.0
-      tslib: 2.8.0
-    dev: false
-
-  /@aws-sdk/client-cognito-identity@3.734.0:
-    resolution: {integrity: sha512-qfieHPeLga8MXH1PabQtb9+5etkViUcI4t33dndLHNn46vMhzfTztzkNtjUgN3fg4SrOjnxZd33pR9lRquMRvA==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@aws-crypto/sha256-browser': 5.2.0
-      '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/core': 3.734.0
-      '@aws-sdk/credential-provider-node': 3.734.0
-      '@aws-sdk/middleware-host-header': 3.734.0
-      '@aws-sdk/middleware-logger': 3.734.0
-      '@aws-sdk/middleware-recursion-detection': 3.734.0
-      '@aws-sdk/middleware-user-agent': 3.734.0
-      '@aws-sdk/region-config-resolver': 3.734.0
-      '@aws-sdk/types': 3.734.0
-      '@aws-sdk/util-endpoints': 3.734.0
-      '@aws-sdk/util-user-agent-browser': 3.734.0
-      '@aws-sdk/util-user-agent-node': 3.734.0
-      '@smithy/config-resolver': 4.0.1
-      '@smithy/core': 3.1.1
-      '@smithy/fetch-http-handler': 5.0.1
-      '@smithy/hash-node': 4.0.1
-      '@smithy/invalid-dependency': 4.0.1
-      '@smithy/middleware-content-length': 4.0.1
-      '@smithy/middleware-endpoint': 4.0.2
-      '@smithy/middleware-retry': 4.0.3
-      '@smithy/middleware-serde': 4.0.1
-      '@smithy/middleware-stack': 4.0.1
-      '@smithy/node-config-provider': 4.0.1
-      '@smithy/node-http-handler': 4.0.2
-      '@smithy/protocol-http': 5.0.1
-      '@smithy/smithy-client': 4.1.2
-      '@smithy/types': 4.1.0
-      '@smithy/url-parser': 4.0.1
-      '@smithy/util-base64': 4.0.0
-      '@smithy/util-body-length-browser': 4.0.0
-      '@smithy/util-body-length-node': 4.0.0
-      '@smithy/util-defaults-mode-browser': 4.0.3
-      '@smithy/util-defaults-mode-node': 4.0.3
-      '@smithy/util-endpoints': 3.0.1
-      '@smithy/util-middleware': 4.0.1
-      '@smithy/util-retry': 4.0.1
-      '@smithy/util-utf8': 4.0.0
-      tslib: 2.8.0
-    transitivePeerDependencies:
-      - aws-crt
-    dev: false
-
-  /@aws-sdk/client-s3@3.735.0:
-    resolution: {integrity: sha512-6NcxX06c4tnnu6FTFiyS8shoYLy+8TvIDkYjJ5r9tvbaysOptUKQdolOuh7+Lz95QyaqiznpCsNTxsfywLXcqw==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@aws-crypto/sha1-browser': 5.2.0
-      '@aws-crypto/sha256-browser': 5.2.0
-      '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/core': 3.734.0
-      '@aws-sdk/credential-provider-node': 3.734.0
-      '@aws-sdk/middleware-bucket-endpoint': 3.734.0
-      '@aws-sdk/middleware-expect-continue': 3.734.0
-      '@aws-sdk/middleware-flexible-checksums': 3.735.0
-      '@aws-sdk/middleware-host-header': 3.734.0
-      '@aws-sdk/middleware-location-constraint': 3.734.0
-      '@aws-sdk/middleware-logger': 3.734.0
-      '@aws-sdk/middleware-recursion-detection': 3.734.0
-      '@aws-sdk/middleware-sdk-s3': 3.734.0
-      '@aws-sdk/middleware-ssec': 3.734.0
-      '@aws-sdk/middleware-user-agent': 3.734.0
-      '@aws-sdk/region-config-resolver': 3.734.0
-      '@aws-sdk/signature-v4-multi-region': 3.734.0
-      '@aws-sdk/types': 3.734.0
-      '@aws-sdk/util-endpoints': 3.734.0
-      '@aws-sdk/util-user-agent-browser': 3.734.0
-      '@aws-sdk/util-user-agent-node': 3.734.0
-      '@aws-sdk/xml-builder': 3.734.0
-      '@smithy/config-resolver': 4.0.1
-      '@smithy/core': 3.1.1
-      '@smithy/eventstream-serde-browser': 4.0.1
-      '@smithy/eventstream-serde-config-resolver': 4.0.1
-      '@smithy/eventstream-serde-node': 4.0.1
-      '@smithy/fetch-http-handler': 5.0.1
-      '@smithy/hash-blob-browser': 4.0.1
-      '@smithy/hash-node': 4.0.1
-      '@smithy/hash-stream-node': 4.0.1
-      '@smithy/invalid-dependency': 4.0.1
-      '@smithy/md5-js': 4.0.1
-      '@smithy/middleware-content-length': 4.0.1
-      '@smithy/middleware-endpoint': 4.0.2
-      '@smithy/middleware-retry': 4.0.3
-      '@smithy/middleware-serde': 4.0.1
-      '@smithy/middleware-stack': 4.0.1
-      '@smithy/node-config-provider': 4.0.1
-      '@smithy/node-http-handler': 4.0.2
-      '@smithy/protocol-http': 5.0.1
-      '@smithy/smithy-client': 4.1.2
-      '@smithy/types': 4.1.0
-      '@smithy/url-parser': 4.0.1
-      '@smithy/util-base64': 4.0.0
-      '@smithy/util-body-length-browser': 4.0.0
-      '@smithy/util-body-length-node': 4.0.0
-      '@smithy/util-defaults-mode-browser': 4.0.3
-      '@smithy/util-defaults-mode-node': 4.0.3
-      '@smithy/util-endpoints': 3.0.1
-      '@smithy/util-middleware': 4.0.1
-      '@smithy/util-retry': 4.0.1
-      '@smithy/util-stream': 4.0.2
-      '@smithy/util-utf8': 4.0.0
-      '@smithy/util-waiter': 4.0.2
-      tslib: 2.8.0
-    transitivePeerDependencies:
-      - aws-crt
+      tslib: 2.8.1
     dev: false
 
-  /@aws-sdk/client-s3@3.758.0:
-    resolution: {integrity: sha512-f8SlhU9/93OC/WEI6xVJf/x/GoQFj9a/xXK6QCtr5fvCjfSLgMVFmKTiIl/tgtDRzxUDc8YS6EGtbHjJ3Y/atg==}
+  /@aws-sdk/client-cognito-identity@3.798.0:
+    resolution: {integrity: sha512-36vZT6hyYRJRNGBdxintkIZwq8hWsMCTKmi6ZqtcV4Jt65yNjQZTXuGui6/NdGj7KAmOh/RoyTpJzWKwIA5sTA==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-crypto/sha1-browser': 5.2.0
       '@aws-crypto/sha256-browser': 5.2.0
       '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/core': 3.758.0
-      '@aws-sdk/credential-provider-node': 3.758.0
-      '@aws-sdk/middleware-bucket-endpoint': 3.734.0
-      '@aws-sdk/middleware-expect-continue': 3.734.0
-      '@aws-sdk/middleware-flexible-checksums': 3.758.0
-      '@aws-sdk/middleware-host-header': 3.734.0
-      '@aws-sdk/middleware-location-constraint': 3.734.0
-      '@aws-sdk/middleware-logger': 3.734.0
-      '@aws-sdk/middleware-recursion-detection': 3.734.0
-      '@aws-sdk/middleware-sdk-s3': 3.758.0
-      '@aws-sdk/middleware-ssec': 3.734.0
-      '@aws-sdk/middleware-user-agent': 3.758.0
-      '@aws-sdk/region-config-resolver': 3.734.0
-      '@aws-sdk/signature-v4-multi-region': 3.758.0
-      '@aws-sdk/types': 3.734.0
-      '@aws-sdk/util-endpoints': 3.743.0
-      '@aws-sdk/util-user-agent-browser': 3.734.0
-      '@aws-sdk/util-user-agent-node': 3.758.0
-      '@aws-sdk/xml-builder': 3.734.0
-      '@smithy/config-resolver': 4.0.1
-      '@smithy/core': 3.2.0
-      '@smithy/eventstream-serde-browser': 4.0.1
-      '@smithy/eventstream-serde-config-resolver': 4.0.1
-      '@smithy/eventstream-serde-node': 4.0.1
-      '@smithy/fetch-http-handler': 5.0.1
-      '@smithy/hash-blob-browser': 4.0.1
-      '@smithy/hash-node': 4.0.1
-      '@smithy/hash-stream-node': 4.0.1
-      '@smithy/invalid-dependency': 4.0.1
-      '@smithy/md5-js': 4.0.1
-      '@smithy/middleware-content-length': 4.0.1
-      '@smithy/middleware-endpoint': 4.1.0
-      '@smithy/middleware-retry': 4.1.0
+      '@aws-sdk/core': 3.798.0
+      '@aws-sdk/credential-provider-node': 3.798.0
+      '@aws-sdk/middleware-host-header': 3.775.0
+      '@aws-sdk/middleware-logger': 3.775.0
+      '@aws-sdk/middleware-recursion-detection': 3.775.0
+      '@aws-sdk/middleware-user-agent': 3.798.0
+      '@aws-sdk/region-config-resolver': 3.775.0
+      '@aws-sdk/types': 3.775.0
+      '@aws-sdk/util-endpoints': 3.787.0
+      '@aws-sdk/util-user-agent-browser': 3.775.0
+      '@aws-sdk/util-user-agent-node': 3.798.0
+      '@smithy/config-resolver': 4.1.0
+      '@smithy/core': 3.3.0
+      '@smithy/fetch-http-handler': 5.0.2
+      '@smithy/hash-node': 4.0.2
+      '@smithy/invalid-dependency': 4.0.2
+      '@smithy/middleware-content-length': 4.0.2
+      '@smithy/middleware-endpoint': 4.1.1
+      '@smithy/middleware-retry': 4.1.1
       '@smithy/middleware-serde': 4.0.3
-      '@smithy/middleware-stack': 4.0.1
-      '@smithy/node-config-provider': 4.0.1
+      '@smithy/middleware-stack': 4.0.2
+      '@smithy/node-config-provider': 4.0.2
       '@smithy/node-http-handler': 4.0.4
-      '@smithy/protocol-http': 5.0.1
-      '@smithy/smithy-client': 4.2.0
-      '@smithy/types': 4.1.0
-      '@smithy/url-parser': 4.0.1
+      '@smithy/protocol-http': 5.1.0
+      '@smithy/smithy-client': 4.2.1
+      '@smithy/types': 4.2.0
+      '@smithy/url-parser': 4.0.2
       '@smithy/util-base64': 4.0.0
       '@smithy/util-body-length-browser': 4.0.0
       '@smithy/util-body-length-node': 4.0.0
-      '@smithy/util-defaults-mode-browser': 4.0.8
-      '@smithy/util-defaults-mode-node': 4.0.8
-      '@smithy/util-endpoints': 3.0.1
-      '@smithy/util-middleware': 4.0.1
-      '@smithy/util-retry': 4.0.1
-      '@smithy/util-stream': 4.2.0
+      '@smithy/util-defaults-mode-browser': 4.0.9
+      '@smithy/util-defaults-mode-node': 4.0.9
+      '@smithy/util-endpoints': 3.0.2
+      '@smithy/util-middleware': 4.0.2
+      '@smithy/util-retry': 4.0.2
       '@smithy/util-utf8': 4.0.0
-      '@smithy/util-waiter': 4.0.2
-      tslib: 2.8.0
+      tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
     dev: false
 
-  /@aws-sdk/client-sso@3.734.0:
-    resolution: {integrity: sha512-oerepp0mut9VlgTwnG5Ds/lb0C0b2/rQ+hL/rF6q+HGKPfGsCuPvFx1GtwGKCXd49ase88/jVgrhcA9OQbz3kg==}
+  /@aws-sdk/client-s3@3.798.0:
+    resolution: {integrity: sha512-MmVWlRK8n7cAfdtcNK7KAhiSbMt2KBLAcnvIpDx37jpQGjEe/ahQ6xOi9r1JdNaIg4SyMZsbmeLVtvDntwlxqQ==}
     engines: {node: '>=18.0.0'}
     dependencies:
+      '@aws-crypto/sha1-browser': 5.2.0
       '@aws-crypto/sha256-browser': 5.2.0
       '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/core': 3.734.0
-      '@aws-sdk/middleware-host-header': 3.734.0
-      '@aws-sdk/middleware-logger': 3.734.0
-      '@aws-sdk/middleware-recursion-detection': 3.734.0
-      '@aws-sdk/middleware-user-agent': 3.734.0
-      '@aws-sdk/region-config-resolver': 3.734.0
-      '@aws-sdk/types': 3.734.0
-      '@aws-sdk/util-endpoints': 3.734.0
-      '@aws-sdk/util-user-agent-browser': 3.734.0
-      '@aws-sdk/util-user-agent-node': 3.734.0
+      '@aws-sdk/core': 3.798.0
+      '@aws-sdk/credential-provider-node': 3.798.0
+      '@aws-sdk/middleware-bucket-endpoint': 3.775.0
+      '@aws-sdk/middleware-expect-continue': 3.775.0
+      '@aws-sdk/middleware-flexible-checksums': 3.798.0
+      '@aws-sdk/middleware-host-header': 3.775.0
+      '@aws-sdk/middleware-location-constraint': 3.775.0
+      '@aws-sdk/middleware-logger': 3.775.0
+      '@aws-sdk/middleware-recursion-detection': 3.775.0
+      '@aws-sdk/middleware-sdk-s3': 3.798.0
+      '@aws-sdk/middleware-ssec': 3.775.0
+      '@aws-sdk/middleware-user-agent': 3.798.0
+      '@aws-sdk/region-config-resolver': 3.775.0
+      '@aws-sdk/signature-v4-multi-region': 3.798.0
+      '@aws-sdk/types': 3.775.0
+      '@aws-sdk/util-endpoints': 3.787.0
+      '@aws-sdk/util-user-agent-browser': 3.775.0
+      '@aws-sdk/util-user-agent-node': 3.798.0
+      '@aws-sdk/xml-builder': 3.775.0
       '@smithy/config-resolver': 4.1.0
-      '@smithy/core': 3.2.0
+      '@smithy/core': 3.3.0
+      '@smithy/eventstream-serde-browser': 4.0.2
+      '@smithy/eventstream-serde-config-resolver': 4.1.0
+      '@smithy/eventstream-serde-node': 4.0.2
       '@smithy/fetch-http-handler': 5.0.2
-      '@smithy/hash-node': 4.0.1
-      '@smithy/invalid-dependency': 4.0.1
-      '@smithy/middleware-content-length': 4.0.1
-      '@smithy/middleware-endpoint': 4.1.0
-      '@smithy/middleware-retry': 4.1.0
+      '@smithy/hash-blob-browser': 4.0.2
+      '@smithy/hash-node': 4.0.2
+      '@smithy/hash-stream-node': 4.0.2
+      '@smithy/invalid-dependency': 4.0.2
+      '@smithy/md5-js': 4.0.2
+      '@smithy/middleware-content-length': 4.0.2
+      '@smithy/middleware-endpoint': 4.1.1
+      '@smithy/middleware-retry': 4.1.1
       '@smithy/middleware-serde': 4.0.3
       '@smithy/middleware-stack': 4.0.2
       '@smithy/node-config-provider': 4.0.2
       '@smithy/node-http-handler': 4.0.4
       '@smithy/protocol-http': 5.1.0
-      '@smithy/smithy-client': 4.2.0
+      '@smithy/smithy-client': 4.2.1
       '@smithy/types': 4.2.0
       '@smithy/url-parser': 4.0.2
       '@smithy/util-base64': 4.0.0
       '@smithy/util-body-length-browser': 4.0.0
       '@smithy/util-body-length-node': 4.0.0
-      '@smithy/util-defaults-mode-browser': 4.0.8
-      '@smithy/util-defaults-mode-node': 4.0.8
-      '@smithy/util-endpoints': 3.0.1
+      '@smithy/util-defaults-mode-browser': 4.0.9
+      '@smithy/util-defaults-mode-node': 4.0.9
+      '@smithy/util-endpoints': 3.0.2
       '@smithy/util-middleware': 4.0.2
       '@smithy/util-retry': 4.0.2
+      '@smithy/util-stream': 4.2.0
       '@smithy/util-utf8': 4.0.0
-      tslib: 2.8.0
+      '@smithy/util-waiter': 4.0.3
+      tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
     dev: false
 
-  /@aws-sdk/client-sso@3.758.0:
-    resolution: {integrity: sha512-BoGO6IIWrLyLxQG6txJw6RT2urmbtlwfggapNCrNPyYjlXpzTSJhBYjndg7TpDATFd0SXL0zm8y/tXsUXNkdYQ==}
+  /@aws-sdk/client-sso@3.798.0:
+    resolution: {integrity: sha512-Si4W7kFflNXC48lr05n2Fc5nrD6whbfgR7c5/7hYSXP52DOqy2kMle+bZx5EkmQ/e/5nAPW0DS4ABeLprVSghw==}
     engines: {node: '>=18.0.0'}
     dependencies:
       '@aws-crypto/sha256-browser': 5.2.0
       '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/core': 3.758.0
-      '@aws-sdk/middleware-host-header': 3.734.0
-      '@aws-sdk/middleware-logger': 3.734.0
-      '@aws-sdk/middleware-recursion-detection': 3.734.0
-      '@aws-sdk/middleware-user-agent': 3.758.0
-      '@aws-sdk/region-config-resolver': 3.734.0
-      '@aws-sdk/types': 3.734.0
-      '@aws-sdk/util-endpoints': 3.743.0
-      '@aws-sdk/util-user-agent-browser': 3.734.0
-      '@aws-sdk/util-user-agent-node': 3.758.0
+      '@aws-sdk/core': 3.798.0
+      '@aws-sdk/middleware-host-header': 3.775.0
+      '@aws-sdk/middleware-logger': 3.775.0
+      '@aws-sdk/middleware-recursion-detection': 3.775.0
+      '@aws-sdk/middleware-user-agent': 3.798.0
+      '@aws-sdk/region-config-resolver': 3.775.0
+      '@aws-sdk/types': 3.775.0
+      '@aws-sdk/util-endpoints': 3.787.0
+      '@aws-sdk/util-user-agent-browser': 3.775.0
+      '@aws-sdk/util-user-agent-node': 3.798.0
       '@smithy/config-resolver': 4.1.0
-      '@smithy/core': 3.2.0
+      '@smithy/core': 3.3.0
       '@smithy/fetch-http-handler': 5.0.2
-      '@smithy/hash-node': 4.0.1
-      '@smithy/invalid-dependency': 4.0.1
-      '@smithy/middleware-content-length': 4.0.1
-      '@smithy/middleware-endpoint': 4.1.0
-      '@smithy/middleware-retry': 4.1.0
+      '@smithy/hash-node': 4.0.2
+      '@smithy/invalid-dependency': 4.0.2
+      '@smithy/middleware-content-length': 4.0.2
+      '@smithy/middleware-endpoint': 4.1.1
+      '@smithy/middleware-retry': 4.1.1
       '@smithy/middleware-serde': 4.0.3
       '@smithy/middleware-stack': 4.0.2
       '@smithy/node-config-provider': 4.0.2
       '@smithy/node-http-handler': 4.0.4
       '@smithy/protocol-http': 5.1.0
-      '@smithy/smithy-client': 4.2.0
+      '@smithy/smithy-client': 4.2.1
       '@smithy/types': 4.2.0
       '@smithy/url-parser': 4.0.2
       '@smithy/util-base64': 4.0.0
       '@smithy/util-body-length-browser': 4.0.0
       '@smithy/util-body-length-node': 4.0.0
-      '@smithy/util-defaults-mode-browser': 4.0.8
-      '@smithy/util-defaults-mode-node': 4.0.8
-      '@smithy/util-endpoints': 3.0.1
+      '@smithy/util-defaults-mode-browser': 4.0.9
+      '@smithy/util-defaults-mode-node': 4.0.9
+      '@smithy/util-endpoints': 3.0.2
       '@smithy/util-middleware': 4.0.2
       '@smithy/util-retry': 4.0.2
       '@smithy/util-utf8': 4.0.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
     dev: false
 
-  /@aws-sdk/core@3.734.0:
-    resolution: {integrity: sha512-SxnDqf3vobdm50OLyAKfqZetv6zzwnSqwIwd3jrbopxxHKqNIM/I0xcYjD6Tn+mPig+u7iRKb9q3QnEooFTlmg==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@aws-sdk/types': 3.734.0
-      '@smithy/core': 3.1.1
-      '@smithy/node-config-provider': 4.0.1
-      '@smithy/property-provider': 4.0.1
-      '@smithy/protocol-http': 5.0.1
-      '@smithy/signature-v4': 5.0.1
-      '@smithy/smithy-client': 4.1.2
-      '@smithy/types': 4.1.0
-      '@smithy/util-middleware': 4.0.1
-      fast-xml-parser: 4.4.1
-      tslib: 2.8.0
-    dev: false
-
-  /@aws-sdk/core@3.758.0:
-    resolution: {integrity: sha512-0RswbdR9jt/XKemaLNuxi2gGr4xGlHyGxkTdhSQzCyUe9A9OPCoLl3rIESRguQEech+oJnbHk/wuiwHqTuP9sg==}
+  /@aws-sdk/core@3.798.0:
+    resolution: {integrity: sha512-hITxDE4pVkeJqz0LXjQRDgR+noxJ5oOxG38fgmQXjPXsdwVKnNIiMJ5S2WFMVSszU7ebGSyHdPHENQKu6TReVA==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-sdk/types': 3.734.0
-      '@smithy/core': 3.2.0
-      '@smithy/node-config-provider': 4.0.1
-      '@smithy/property-provider': 4.0.1
-      '@smithy/protocol-http': 5.0.1
-      '@smithy/signature-v4': 5.0.1
-      '@smithy/smithy-client': 4.2.0
-      '@smithy/types': 4.1.0
-      '@smithy/util-middleware': 4.0.1
+      '@aws-sdk/types': 3.775.0
+      '@smithy/core': 3.3.0
+      '@smithy/node-config-provider': 4.0.2
+      '@smithy/property-provider': 4.0.2
+      '@smithy/protocol-http': 5.1.0
+      '@smithy/signature-v4': 5.1.0
+      '@smithy/smithy-client': 4.2.1
+      '@smithy/types': 4.2.0
+      '@smithy/util-middleware': 4.0.2
       fast-xml-parser: 4.4.1
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /@aws-sdk/credential-provider-cognito-identity@3.734.0:
-    resolution: {integrity: sha512-9/5SZsg7aZVssWFPWedRv9UNFMI3Vjf83DqVQUCzsSgpIQNtqlxC30WeFXtC/rP5ulOqmF5xHs9zv3bcETAzsg==}
+  /@aws-sdk/credential-provider-cognito-identity@3.798.0:
+    resolution: {integrity: sha512-uZ204ov8uQFRYNp8NGGP/oVBkE+PDzyFBlCpluBHsnOUZtVL2QJRcBHZqYWbHfoJ8x+WuD6VNU2pG4kxzQCSyw==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-sdk/client-cognito-identity': 3.734.0
-      '@aws-sdk/types': 3.734.0
-      '@smithy/property-provider': 4.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      '@aws-sdk/client-cognito-identity': 3.798.0
+      '@aws-sdk/types': 3.775.0
+      '@smithy/property-provider': 4.0.2
+      '@smithy/types': 4.2.0
+      tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
     dev: false
 
-  /@aws-sdk/credential-provider-env@3.734.0:
-    resolution: {integrity: sha512-gtRkzYTGafnm1FPpiNO8VBmJrYMoxhDlGPYDVcijzx3DlF8dhWnowuSBCxLSi+MJMx5hvwrX2A+e/q0QAeHqmw==}
+  /@aws-sdk/credential-provider-env@3.798.0:
+    resolution: {integrity: sha512-EsfzTEeoaHY1E+g3S6AmC3bF6euZN5SrLcLh5Oxhx5q2qjWUsKEK0fwek+jlt2GH7zB3F9IArV4z+8CsDQdKYw==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-sdk/core': 3.734.0
-      '@aws-sdk/types': 3.734.0
-      '@smithy/property-provider': 4.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
-    dev: false
-
-  /@aws-sdk/credential-provider-env@3.758.0:
-    resolution: {integrity: sha512-N27eFoRrO6MeUNumtNHDW9WOiwfd59LPXPqDrIa3kWL/s+fOKFHb9xIcF++bAwtcZnAxKkgpDCUP+INNZskE+w==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@aws-sdk/core': 3.758.0
-      '@aws-sdk/types': 3.734.0
+      '@aws-sdk/core': 3.798.0
+      '@aws-sdk/types': 3.775.0
       '@smithy/property-provider': 4.0.2
       '@smithy/types': 4.2.0
-      tslib: 2.8.0
-    dev: false
-
-  /@aws-sdk/credential-provider-http@3.734.0:
-    resolution: {integrity: sha512-JFSL6xhONsq+hKM8xroIPhM5/FOhiQ1cov0lZxhzZWj6Ai3UAjucy3zyIFDr9MgP1KfCYNdvyaUq9/o+HWvEDg==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@aws-sdk/core': 3.734.0
-      '@aws-sdk/types': 3.734.0
-      '@smithy/fetch-http-handler': 5.0.1
-      '@smithy/node-http-handler': 4.0.2
-      '@smithy/property-provider': 4.0.1
-      '@smithy/protocol-http': 5.0.1
-      '@smithy/smithy-client': 4.1.2
-      '@smithy/types': 4.1.0
-      '@smithy/util-stream': 4.0.2
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /@aws-sdk/credential-provider-http@3.758.0:
-    resolution: {integrity: sha512-Xt9/U8qUCiw1hihztWkNeIR+arg6P+yda10OuCHX6kFVx3auTlU7+hCqs3UxqniGU4dguHuftf3mRpi5/GJ33Q==}
+  /@aws-sdk/credential-provider-http@3.798.0:
+    resolution: {integrity: sha512-bw5TmcJqpBVQlXzkL63545iHQ9mxwQeXTS/rgUQ5rmNNS3yiGDekVZOLXo/Gs4wmt2/59UN/sWIRFxvxDpMQEg==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-sdk/core': 3.758.0
-      '@aws-sdk/types': 3.734.0
+      '@aws-sdk/core': 3.798.0
+      '@aws-sdk/types': 3.775.0
       '@smithy/fetch-http-handler': 5.0.2
       '@smithy/node-http-handler': 4.0.4
       '@smithy/property-provider': 4.0.2
       '@smithy/protocol-http': 5.1.0
-      '@smithy/smithy-client': 4.2.0
+      '@smithy/smithy-client': 4.2.1
       '@smithy/types': 4.2.0
       '@smithy/util-stream': 4.2.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /@aws-sdk/credential-provider-ini@3.734.0:
-    resolution: {integrity: sha512-HEyaM/hWI7dNmb4NhdlcDLcgJvrilk8G4DQX6qz0i4pBZGC2l4iffuqP8K6ZQjUfz5/6894PzeFuhTORAMd+cg==}
+  /@aws-sdk/credential-provider-ini@3.798.0:
+    resolution: {integrity: sha512-zqWwKhhdf5CVRL6+4vNNTZVHWH9OiiwUWA3ka44jJaAMBRbbryjRedzwkWbgDaL1EbfTbcBZTYzE7N/vK7UUVA==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-sdk/core': 3.734.0
-      '@aws-sdk/credential-provider-env': 3.734.0
-      '@aws-sdk/credential-provider-http': 3.734.0
-      '@aws-sdk/credential-provider-process': 3.734.0
-      '@aws-sdk/credential-provider-sso': 3.734.0
-      '@aws-sdk/credential-provider-web-identity': 3.734.0
-      '@aws-sdk/nested-clients': 3.734.0
-      '@aws-sdk/types': 3.734.0
-      '@smithy/credential-provider-imds': 4.0.1
-      '@smithy/property-provider': 4.0.1
-      '@smithy/shared-ini-file-loader': 4.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
-    transitivePeerDependencies:
-      - aws-crt
-    dev: false
-
-  /@aws-sdk/credential-provider-ini@3.758.0:
-    resolution: {integrity: sha512-cymSKMcP5d+OsgetoIZ5QCe1wnp2Q/tq+uIxVdh9MbfdBBEnl9Ecq6dH6VlYS89sp4QKuxHxkWXVnbXU3Q19Aw==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@aws-sdk/core': 3.758.0
-      '@aws-sdk/credential-provider-env': 3.758.0
-      '@aws-sdk/credential-provider-http': 3.758.0
-      '@aws-sdk/credential-provider-process': 3.758.0
-      '@aws-sdk/credential-provider-sso': 3.758.0
-      '@aws-sdk/credential-provider-web-identity': 3.758.0
-      '@aws-sdk/nested-clients': 3.758.0
-      '@aws-sdk/types': 3.734.0
+      '@aws-sdk/core': 3.798.0
+      '@aws-sdk/credential-provider-env': 3.798.0
+      '@aws-sdk/credential-provider-http': 3.798.0
+      '@aws-sdk/credential-provider-process': 3.798.0
+      '@aws-sdk/credential-provider-sso': 3.798.0
+      '@aws-sdk/credential-provider-web-identity': 3.798.0
+      '@aws-sdk/nested-clients': 3.798.0
+      '@aws-sdk/types': 3.775.0
       '@smithy/credential-provider-imds': 4.0.2
       '@smithy/property-provider': 4.0.2
       '@smithy/shared-ini-file-loader': 4.0.2
       '@smithy/types': 4.2.0
-      tslib: 2.8.0
-    transitivePeerDependencies:
-      - aws-crt
-    dev: false
-
-  /@aws-sdk/credential-provider-node@3.734.0:
-    resolution: {integrity: sha512-9NOSNbkPVb91JwaXOhyfahkzAwWdMsbWHL6fh5/PHlXYpsDjfIfT23I++toepNF2nODAJNLnOEHGYIxgNgf6jQ==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@aws-sdk/credential-provider-env': 3.734.0
-      '@aws-sdk/credential-provider-http': 3.734.0
-      '@aws-sdk/credential-provider-ini': 3.734.0
-      '@aws-sdk/credential-provider-process': 3.734.0
-      '@aws-sdk/credential-provider-sso': 3.734.0
-      '@aws-sdk/credential-provider-web-identity': 3.734.0
-      '@aws-sdk/types': 3.734.0
-      '@smithy/credential-provider-imds': 4.0.1
-      '@smithy/property-provider': 4.0.1
-      '@smithy/shared-ini-file-loader': 4.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
-    transitivePeerDependencies:
-      - aws-crt
-    dev: false
-
-  /@aws-sdk/credential-provider-node@3.758.0:
-    resolution: {integrity: sha512-+DaMv63wiq7pJrhIQzZYMn4hSarKiizDoJRvyR7WGhnn0oQ/getX9Z0VNCV3i7lIFoLNTb7WMmQ9k7+z/uD5EQ==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@aws-sdk/credential-provider-env': 3.758.0
-      '@aws-sdk/credential-provider-http': 3.758.0
-      '@aws-sdk/credential-provider-ini': 3.758.0
-      '@aws-sdk/credential-provider-process': 3.758.0
-      '@aws-sdk/credential-provider-sso': 3.758.0
-      '@aws-sdk/credential-provider-web-identity': 3.758.0
-      '@aws-sdk/types': 3.734.0
-      '@smithy/credential-provider-imds': 4.0.1
-      '@smithy/property-provider': 4.0.1
-      '@smithy/shared-ini-file-loader': 4.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
     dev: false
 
-  /@aws-sdk/credential-provider-process@3.734.0:
-    resolution: {integrity: sha512-zvjsUo+bkYn2vjT+EtLWu3eD6me+uun+Hws1IyWej/fKFAqiBPwyeyCgU7qjkiPQSXqk1U9+/HG9IQ6Iiz+eBw==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@aws-sdk/core': 3.734.0
-      '@aws-sdk/types': 3.734.0
-      '@smithy/property-provider': 4.0.1
-      '@smithy/shared-ini-file-loader': 4.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
-    dev: false
-
-  /@aws-sdk/credential-provider-process@3.758.0:
-    resolution: {integrity: sha512-AzcY74QTPqcbXWVgjpPZ3HOmxQZYPROIBz2YINF0OQk0MhezDWV/O7Xec+K1+MPGQO3qS6EDrUUlnPLjsqieHA==}
+  /@aws-sdk/credential-provider-node@3.798.0:
+    resolution: {integrity: sha512-Mrhl4wS4lMpuw2NCga5/rtQehNfyRs8NUHfvrLK5bZvJbjanrh8QtdRVhrAjw71OwFh3GK49QMByGkUssALJ+g==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-sdk/core': 3.758.0
-      '@aws-sdk/types': 3.734.0
+      '@aws-sdk/credential-provider-env': 3.798.0
+      '@aws-sdk/credential-provider-http': 3.798.0
+      '@aws-sdk/credential-provider-ini': 3.798.0
+      '@aws-sdk/credential-provider-process': 3.798.0
+      '@aws-sdk/credential-provider-sso': 3.798.0
+      '@aws-sdk/credential-provider-web-identity': 3.798.0
+      '@aws-sdk/types': 3.775.0
+      '@smithy/credential-provider-imds': 4.0.2
       '@smithy/property-provider': 4.0.2
       '@smithy/shared-ini-file-loader': 4.0.2
       '@smithy/types': 4.2.0
-      tslib: 2.8.0
-    dev: false
-
-  /@aws-sdk/credential-provider-sso@3.734.0:
-    resolution: {integrity: sha512-cCwwcgUBJOsV/ddyh1OGb4gKYWEaTeTsqaAK19hiNINfYV/DO9r4RMlnWAo84sSBfJuj9shUNsxzyoe6K7R92Q==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@aws-sdk/client-sso': 3.734.0
-      '@aws-sdk/core': 3.734.0
-      '@aws-sdk/token-providers': 3.734.0
-      '@aws-sdk/types': 3.734.0
-      '@smithy/property-provider': 4.0.1
-      '@smithy/shared-ini-file-loader': 4.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
     dev: false
 
-  /@aws-sdk/credential-provider-sso@3.758.0:
-    resolution: {integrity: sha512-x0FYJqcOLUCv8GLLFDYMXRAQKGjoM+L0BG4BiHYZRDf24yQWFCAZsCQAYKo6XZYh2qznbsW6f//qpyJ5b0QVKQ==}
+  /@aws-sdk/credential-provider-process@3.798.0:
+    resolution: {integrity: sha512-BbRq8bhCHC94OTRIg5edgGTaWUzBH0h/IZJZ0vERle8A9nfl+5jUplvC8cvh3/8cNgHIRXj5HzlDjeSVe9dySg==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-sdk/client-sso': 3.758.0
-      '@aws-sdk/core': 3.758.0
-      '@aws-sdk/token-providers': 3.758.0
-      '@aws-sdk/types': 3.734.0
+      '@aws-sdk/core': 3.798.0
+      '@aws-sdk/types': 3.775.0
       '@smithy/property-provider': 4.0.2
       '@smithy/shared-ini-file-loader': 4.0.2
       '@smithy/types': 4.2.0
-      tslib: 2.8.0
-    transitivePeerDependencies:
-      - aws-crt
+      tslib: 2.8.1
     dev: false
 
-  /@aws-sdk/credential-provider-web-identity@3.734.0:
-    resolution: {integrity: sha512-t4OSOerc+ppK541/Iyn1AS40+2vT/qE+MFMotFkhCgCJbApeRF2ozEdnDN6tGmnl4ybcUuxnp9JWLjwDVlR/4g==}
+  /@aws-sdk/credential-provider-sso@3.798.0:
+    resolution: {integrity: sha512-MLpQRb7xkqI9w0slEA76QiHGzM0PDMcpVcQG0wFHrpLKkQYjYlD9H3VfxdYGUh+FPOaR1fFpRZb18Gz9MR/2eQ==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-sdk/core': 3.734.0
-      '@aws-sdk/nested-clients': 3.734.0
-      '@aws-sdk/types': 3.734.0
-      '@smithy/property-provider': 4.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      '@aws-sdk/client-sso': 3.798.0
+      '@aws-sdk/core': 3.798.0
+      '@aws-sdk/token-providers': 3.798.0
+      '@aws-sdk/types': 3.775.0
+      '@smithy/property-provider': 4.0.2
+      '@smithy/shared-ini-file-loader': 4.0.2
+      '@smithy/types': 4.2.0
+      tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
     dev: false
 
-  /@aws-sdk/credential-provider-web-identity@3.758.0:
-    resolution: {integrity: sha512-XGguXhBqiCXMXRxcfCAVPlMbm3VyJTou79r/3mxWddHWF0XbhaQiBIbUz6vobVTD25YQRbWSmSch7VA8kI5Lrw==}
+  /@aws-sdk/credential-provider-web-identity@3.798.0:
+    resolution: {integrity: sha512-OWBDy/ZiC0pxLzp1Nhah5jxDZ/onLTjouIVGPyc9E8/KzUJxqQbR6fk43VqhpYdVp/S7yDDbaOpO072RRZJQrw==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-sdk/core': 3.758.0
-      '@aws-sdk/nested-clients': 3.758.0
-      '@aws-sdk/types': 3.734.0
+      '@aws-sdk/core': 3.798.0
+      '@aws-sdk/nested-clients': 3.798.0
+      '@aws-sdk/types': 3.775.0
       '@smithy/property-provider': 4.0.2
       '@smithy/types': 4.2.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
     dev: false
 
-  /@aws-sdk/credential-providers@3.734.0:
-    resolution: {integrity: sha512-3q76ngVxwX/kSRA0bjH7hUkIOVf/38aACmYpbwwr7jyRU3Cpbsj57W9YtRd7zS9/A4Jt6fYx7VFEA52ajyoGAQ==}
+  /@aws-sdk/credential-providers@3.798.0:
+    resolution: {integrity: sha512-xHEroRdp01YSZ6zi/SrYLoN2faUfkZqgA1kvcv/z+3kl5R6OVNBvMsfoO/jYtuovsw/ve7zDg/62ezAZrdbV3g==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-sdk/client-cognito-identity': 3.734.0
-      '@aws-sdk/core': 3.734.0
-      '@aws-sdk/credential-provider-cognito-identity': 3.734.0
-      '@aws-sdk/credential-provider-env': 3.734.0
-      '@aws-sdk/credential-provider-http': 3.734.0
-      '@aws-sdk/credential-provider-ini': 3.734.0
-      '@aws-sdk/credential-provider-node': 3.734.0
-      '@aws-sdk/credential-provider-process': 3.734.0
-      '@aws-sdk/credential-provider-sso': 3.734.0
-      '@aws-sdk/credential-provider-web-identity': 3.734.0
-      '@aws-sdk/nested-clients': 3.734.0
-      '@aws-sdk/types': 3.734.0
-      '@smithy/core': 3.1.1
-      '@smithy/credential-provider-imds': 4.0.1
-      '@smithy/property-provider': 4.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      '@aws-sdk/client-cognito-identity': 3.798.0
+      '@aws-sdk/core': 3.798.0
+      '@aws-sdk/credential-provider-cognito-identity': 3.798.0
+      '@aws-sdk/credential-provider-env': 3.798.0
+      '@aws-sdk/credential-provider-http': 3.798.0
+      '@aws-sdk/credential-provider-ini': 3.798.0
+      '@aws-sdk/credential-provider-node': 3.798.0
+      '@aws-sdk/credential-provider-process': 3.798.0
+      '@aws-sdk/credential-provider-sso': 3.798.0
+      '@aws-sdk/credential-provider-web-identity': 3.798.0
+      '@aws-sdk/nested-clients': 3.798.0
+      '@aws-sdk/types': 3.775.0
+      '@smithy/config-resolver': 4.1.0
+      '@smithy/core': 3.3.0
+      '@smithy/credential-provider-imds': 4.0.2
+      '@smithy/node-config-provider': 4.0.2
+      '@smithy/property-provider': 4.0.2
+      '@smithy/types': 4.2.0
+      tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
     dev: false
 
-  /@aws-sdk/middleware-bucket-endpoint@3.734.0:
-    resolution: {integrity: sha512-etC7G18aF7KdZguW27GE/wpbrNmYLVT755EsFc8kXpZj8D6AFKxc7OuveinJmiy0bYXAMspJUWsF6CrGpOw6CQ==}
+  /@aws-sdk/middleware-bucket-endpoint@3.775.0:
+    resolution: {integrity: sha512-qogMIpVChDYr4xiUNC19/RDSw/sKoHkAhouS6Skxiy6s27HBhow1L3Z1qVYXuBmOZGSWPU0xiyZCvOyWrv9s+Q==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-sdk/types': 3.734.0
+      '@aws-sdk/types': 3.775.0
       '@aws-sdk/util-arn-parser': 3.723.0
-      '@smithy/node-config-provider': 4.0.1
-      '@smithy/protocol-http': 5.0.1
-      '@smithy/types': 4.1.0
+      '@smithy/node-config-provider': 4.0.2
+      '@smithy/protocol-http': 5.1.0
+      '@smithy/types': 4.2.0
       '@smithy/util-config-provider': 4.0.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /@aws-sdk/middleware-expect-continue@3.734.0:
-    resolution: {integrity: sha512-P38/v1l6HjuB2aFUewt7ueAW5IvKkFcv5dalPtbMGRhLeyivBOHwbCyuRKgVs7z7ClTpu9EaViEGki2jEQqEsQ==}
+  /@aws-sdk/middleware-expect-continue@3.775.0:
+    resolution: {integrity: sha512-Apd3owkIeUW5dnk3au9np2IdW2N0zc9NjTjHiH+Mx3zqwSrc+m+ANgJVgk9mnQjMzU/vb7VuxJ0eqdEbp5gYsg==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-sdk/types': 3.734.0
-      '@smithy/protocol-http': 5.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
-    dev: false
-
-  /@aws-sdk/middleware-flexible-checksums@3.735.0:
-    resolution: {integrity: sha512-Tx7lYTPwQFRe/wQEHMR6Drh/S+X0ToAEq1Ava9QyxV1riwtepzRLojpNDELFb3YQVVYbX7FEiBMCJLMkmIIY+A==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@aws-crypto/crc32': 5.2.0
-      '@aws-crypto/crc32c': 5.2.0
-      '@aws-crypto/util': 5.2.0
-      '@aws-sdk/core': 3.734.0
-      '@aws-sdk/types': 3.734.0
-      '@smithy/is-array-buffer': 4.0.0
-      '@smithy/node-config-provider': 4.0.1
-      '@smithy/protocol-http': 5.0.1
-      '@smithy/types': 4.1.0
-      '@smithy/util-middleware': 4.0.1
-      '@smithy/util-stream': 4.0.2
-      '@smithy/util-utf8': 4.0.0
-      tslib: 2.8.0
+      '@aws-sdk/types': 3.775.0
+      '@smithy/protocol-http': 5.1.0
+      '@smithy/types': 4.2.0
+      tslib: 2.8.1
     dev: false
 
-  /@aws-sdk/middleware-flexible-checksums@3.758.0:
-    resolution: {integrity: sha512-o8Rk71S08YTKLoSobucjnbj97OCGaXgpEDNKXpXaavUM5xLNoHCLSUPRCiEN86Ivqxg1n17Y2nSRhfbsveOXXA==}
+  /@aws-sdk/middleware-flexible-checksums@3.798.0:
+    resolution: {integrity: sha512-NR3YdVq2IiVYq5mLn5DpTLFSvz3+G78dE7RtWk6Jv2FCflXiWersU9lg4zisOQxHkwDy10lVlxQUlEJdJk0EQg==}
     engines: {node: '>=18.0.0'}
     dependencies:
       '@aws-crypto/crc32': 5.2.0
       '@aws-crypto/crc32c': 5.2.0
       '@aws-crypto/util': 5.2.0
-      '@aws-sdk/core': 3.758.0
-      '@aws-sdk/types': 3.734.0
+      '@aws-sdk/core': 3.798.0
+      '@aws-sdk/types': 3.775.0
       '@smithy/is-array-buffer': 4.0.0
-      '@smithy/node-config-provider': 4.0.1
-      '@smithy/protocol-http': 5.0.1
-      '@smithy/types': 4.1.0
-      '@smithy/util-middleware': 4.0.1
+      '@smithy/node-config-provider': 4.0.2
+      '@smithy/protocol-http': 5.1.0
+      '@smithy/types': 4.2.0
+      '@smithy/util-middleware': 4.0.2
       '@smithy/util-stream': 4.2.0
       '@smithy/util-utf8': 4.0.0
-      tslib: 2.8.0
-    dev: false
-
-  /@aws-sdk/middleware-host-header@3.734.0:
-    resolution: {integrity: sha512-LW7RRgSOHHBzWZnigNsDIzu3AiwtjeI2X66v+Wn1P1u+eXssy1+up4ZY/h+t2sU4LU36UvEf+jrZti9c6vRnFw==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@aws-sdk/types': 3.734.0
-      '@smithy/protocol-http': 5.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /@aws-sdk/middleware-location-constraint@3.734.0:
-    resolution: {integrity: sha512-EJEIXwCQhto/cBfHdm3ZOeLxd2NlJD+X2F+ZTOxzokuhBtY0IONfC/91hOo5tWQweerojwshSMHRCKzRv1tlwg==}
+  /@aws-sdk/middleware-host-header@3.775.0:
+    resolution: {integrity: sha512-tkSegM0Z6WMXpLB8oPys/d+umYIocvO298mGvcMCncpRl77L9XkvSLJIFzaHes+o7djAgIduYw8wKIMStFss2w==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-sdk/types': 3.734.0
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      '@aws-sdk/types': 3.775.0
+      '@smithy/protocol-http': 5.1.0
+      '@smithy/types': 4.2.0
+      tslib: 2.8.1
     dev: false
 
-  /@aws-sdk/middleware-logger@3.734.0:
-    resolution: {integrity: sha512-mUMFITpJUW3LcKvFok176eI5zXAUomVtahb9IQBwLzkqFYOrMJvWAvoV4yuxrJ8TlQBG8gyEnkb9SnhZvjg67w==}
+  /@aws-sdk/middleware-location-constraint@3.775.0:
+    resolution: {integrity: sha512-8TMXEHZXZTFTckQLyBT5aEI8fX11HZcwZseRifvBKKpj0RZDk4F0EEYGxeNSPpUQ7n+PRWyfAEnnZNRdAj/1NQ==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-sdk/types': 3.734.0
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      '@aws-sdk/types': 3.775.0
+      '@smithy/types': 4.2.0
+      tslib: 2.8.1
     dev: false
 
-  /@aws-sdk/middleware-recursion-detection@3.734.0:
-    resolution: {integrity: sha512-CUat2d9ITsFc2XsmeiRQO96iWpxSKYFjxvj27Hc7vo87YUHRnfMfnc8jw1EpxEwMcvBD7LsRa6vDNky6AjcrFA==}
+  /@aws-sdk/middleware-logger@3.775.0:
+    resolution: {integrity: sha512-FaxO1xom4MAoUJsldmR92nT1G6uZxTdNYOFYtdHfd6N2wcNaTuxgjIvqzg5y7QIH9kn58XX/dzf1iTjgqUStZw==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-sdk/types': 3.734.0
-      '@smithy/protocol-http': 5.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      '@aws-sdk/types': 3.775.0
+      '@smithy/types': 4.2.0
+      tslib: 2.8.1
     dev: false
 
-  /@aws-sdk/middleware-sdk-s3@3.734.0:
-    resolution: {integrity: sha512-zeZPenDhkP/RXYMFG3exhNOe2Qukg2l2KpIjxq9o66meELiTULoIXjCmgPoWcM8zzrue06SBdTsaJDHfDl2vdA==}
+  /@aws-sdk/middleware-recursion-detection@3.775.0:
+    resolution: {integrity: sha512-GLCzC8D0A0YDG5u3F5U03Vb9j5tcOEFhr8oc6PDk0k0vm5VwtZOE6LvK7hcCSoAB4HXyOUM0sQuXrbaAh9OwXA==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-sdk/core': 3.734.0
-      '@aws-sdk/types': 3.734.0
-      '@aws-sdk/util-arn-parser': 3.723.0
-      '@smithy/core': 3.1.1
-      '@smithy/node-config-provider': 4.0.1
-      '@smithy/protocol-http': 5.0.1
-      '@smithy/signature-v4': 5.0.1
-      '@smithy/smithy-client': 4.1.2
-      '@smithy/types': 4.1.0
-      '@smithy/util-config-provider': 4.0.0
-      '@smithy/util-middleware': 4.0.1
-      '@smithy/util-stream': 4.0.2
-      '@smithy/util-utf8': 4.0.0
-      tslib: 2.8.0
+      '@aws-sdk/types': 3.775.0
+      '@smithy/protocol-http': 5.1.0
+      '@smithy/types': 4.2.0
+      tslib: 2.8.1
     dev: false
 
-  /@aws-sdk/middleware-sdk-s3@3.758.0:
-    resolution: {integrity: sha512-6mJ2zyyHPYSV6bAcaFpsdoXZJeQlR1QgBnZZ6juY/+dcYiuyWCdyLUbGzSZSE7GTfx6i+9+QWFeoIMlWKgU63A==}
+  /@aws-sdk/middleware-sdk-s3@3.798.0:
+    resolution: {integrity: sha512-UvficjDO/Vrxd1xufR+5ey8NdDUrvIuiEWP/uu4kOkUTXk3IR89F+5UbYWSadhkysbyWN3tui09bWbIbq2Vhag==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-sdk/core': 3.758.0
-      '@aws-sdk/types': 3.734.0
+      '@aws-sdk/core': 3.798.0
+      '@aws-sdk/types': 3.775.0
       '@aws-sdk/util-arn-parser': 3.723.0
-      '@smithy/core': 3.2.0
-      '@smithy/node-config-provider': 4.0.1
-      '@smithy/protocol-http': 5.0.1
-      '@smithy/signature-v4': 5.0.1
-      '@smithy/smithy-client': 4.2.0
-      '@smithy/types': 4.1.0
+      '@smithy/core': 3.3.0
+      '@smithy/node-config-provider': 4.0.2
+      '@smithy/protocol-http': 5.1.0
+      '@smithy/signature-v4': 5.1.0
+      '@smithy/smithy-client': 4.2.1
+      '@smithy/types': 4.2.0
       '@smithy/util-config-provider': 4.0.0
-      '@smithy/util-middleware': 4.0.1
+      '@smithy/util-middleware': 4.0.2
       '@smithy/util-stream': 4.2.0
       '@smithy/util-utf8': 4.0.0
-      tslib: 2.8.0
-    dev: false
-
-  /@aws-sdk/middleware-ssec@3.734.0:
-    resolution: {integrity: sha512-d4yd1RrPW/sspEXizq2NSOUivnheac6LPeLSLnaeTbBG9g1KqIqvCzP1TfXEqv2CrWfHEsWtJpX7oyjySSPvDQ==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@aws-sdk/types': 3.734.0
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
-    dev: false
-
-  /@aws-sdk/middleware-user-agent@3.734.0:
-    resolution: {integrity: sha512-MFVzLWRkfFz02GqGPjqSOteLe5kPfElUrXZft1eElnqulqs6RJfVSpOV7mO90gu293tNAeggMWAVSGRPKIYVMg==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@aws-sdk/core': 3.734.0
-      '@aws-sdk/types': 3.734.0
-      '@aws-sdk/util-endpoints': 3.734.0
-      '@smithy/core': 3.1.1
-      '@smithy/protocol-http': 5.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /@aws-sdk/middleware-user-agent@3.758.0:
-    resolution: {integrity: sha512-iNyehQXtQlj69JCgfaOssgZD4HeYGOwxcaKeG6F+40cwBjTAi0+Ph1yfDwqk2qiBPIRWJ/9l2LodZbxiBqgrwg==}
+  /@aws-sdk/middleware-ssec@3.775.0:
+    resolution: {integrity: sha512-Iw1RHD8vfAWWPzBBIKaojO4GAvQkHOYIpKdAfis/EUSUmSa79QsnXnRqsdcE0mCB0Ylj23yi+ah4/0wh9FsekA==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-sdk/core': 3.758.0
-      '@aws-sdk/types': 3.734.0
-      '@aws-sdk/util-endpoints': 3.743.0
-      '@smithy/core': 3.2.0
-      '@smithy/protocol-http': 5.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      '@aws-sdk/types': 3.775.0
+      '@smithy/types': 4.2.0
+      tslib: 2.8.1
     dev: false
 
-  /@aws-sdk/nested-clients@3.734.0:
-    resolution: {integrity: sha512-iph2XUy8UzIfdJFWo1r0Zng9uWj3253yvW9gljhtu+y/LNmNvSnJxQk1f3D2BC5WmcoPZqTS3UsycT3mLPSzWA==}
+  /@aws-sdk/middleware-user-agent@3.798.0:
+    resolution: {integrity: sha512-nb3YvLokpu/2meKVH5hGVLNg+hz3IyFCESEJW+SpK7bW/SfaKpukGY1lqwqbf+edl+s20MRXeK/by1rvBChixQ==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-crypto/sha256-browser': 5.2.0
-      '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/core': 3.734.0
-      '@aws-sdk/middleware-host-header': 3.734.0
-      '@aws-sdk/middleware-logger': 3.734.0
-      '@aws-sdk/middleware-recursion-detection': 3.734.0
-      '@aws-sdk/middleware-user-agent': 3.734.0
-      '@aws-sdk/region-config-resolver': 3.734.0
-      '@aws-sdk/types': 3.734.0
-      '@aws-sdk/util-endpoints': 3.734.0
-      '@aws-sdk/util-user-agent-browser': 3.734.0
-      '@aws-sdk/util-user-agent-node': 3.734.0
-      '@smithy/config-resolver': 4.0.1
-      '@smithy/core': 3.1.1
-      '@smithy/fetch-http-handler': 5.0.1
-      '@smithy/hash-node': 4.0.1
-      '@smithy/invalid-dependency': 4.0.1
-      '@smithy/middleware-content-length': 4.0.1
-      '@smithy/middleware-endpoint': 4.0.2
-      '@smithy/middleware-retry': 4.0.3
-      '@smithy/middleware-serde': 4.0.1
-      '@smithy/middleware-stack': 4.0.1
-      '@smithy/node-config-provider': 4.0.1
-      '@smithy/node-http-handler': 4.0.2
-      '@smithy/protocol-http': 5.0.1
-      '@smithy/smithy-client': 4.1.2
-      '@smithy/types': 4.1.0
-      '@smithy/url-parser': 4.0.1
-      '@smithy/util-base64': 4.0.0
-      '@smithy/util-body-length-browser': 4.0.0
-      '@smithy/util-body-length-node': 4.0.0
-      '@smithy/util-defaults-mode-browser': 4.0.3
-      '@smithy/util-defaults-mode-node': 4.0.3
-      '@smithy/util-endpoints': 3.0.1
-      '@smithy/util-middleware': 4.0.1
-      '@smithy/util-retry': 4.0.1
-      '@smithy/util-utf8': 4.0.0
-      tslib: 2.8.0
-    transitivePeerDependencies:
-      - aws-crt
+      '@aws-sdk/core': 3.798.0
+      '@aws-sdk/types': 3.775.0
+      '@aws-sdk/util-endpoints': 3.787.0
+      '@smithy/core': 3.3.0
+      '@smithy/protocol-http': 5.1.0
+      '@smithy/types': 4.2.0
+      tslib: 2.8.1
     dev: false
 
-  /@aws-sdk/nested-clients@3.758.0:
-    resolution: {integrity: sha512-YZ5s7PSvyF3Mt2h1EQulCG93uybprNGbBkPmVuy/HMMfbFTt4iL3SbKjxqvOZelm86epFfj7pvK7FliI2WOEcg==}
+  /@aws-sdk/nested-clients@3.798.0:
+    resolution: {integrity: sha512-14iBJgg2Qqf74IeUY+z1nP5GIJIBZj8lv9mdpXrHlK8k+FcMXjpHg/B+JguSMhb2sbLeb5N0H8HLJGIRNALVWw==}
     engines: {node: '>=18.0.0'}
     dependencies:
       '@aws-crypto/sha256-browser': 5.2.0
       '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/core': 3.758.0
-      '@aws-sdk/middleware-host-header': 3.734.0
-      '@aws-sdk/middleware-logger': 3.734.0
-      '@aws-sdk/middleware-recursion-detection': 3.734.0
-      '@aws-sdk/middleware-user-agent': 3.758.0
-      '@aws-sdk/region-config-resolver': 3.734.0
-      '@aws-sdk/types': 3.734.0
-      '@aws-sdk/util-endpoints': 3.743.0
-      '@aws-sdk/util-user-agent-browser': 3.734.0
-      '@aws-sdk/util-user-agent-node': 3.758.0
+      '@aws-sdk/core': 3.798.0
+      '@aws-sdk/middleware-host-header': 3.775.0
+      '@aws-sdk/middleware-logger': 3.775.0
+      '@aws-sdk/middleware-recursion-detection': 3.775.0
+      '@aws-sdk/middleware-user-agent': 3.798.0
+      '@aws-sdk/region-config-resolver': 3.775.0
+      '@aws-sdk/types': 3.775.0
+      '@aws-sdk/util-endpoints': 3.787.0
+      '@aws-sdk/util-user-agent-browser': 3.775.0
+      '@aws-sdk/util-user-agent-node': 3.798.0
       '@smithy/config-resolver': 4.1.0
-      '@smithy/core': 3.2.0
+      '@smithy/core': 3.3.0
       '@smithy/fetch-http-handler': 5.0.2
-      '@smithy/hash-node': 4.0.1
-      '@smithy/invalid-dependency': 4.0.1
-      '@smithy/middleware-content-length': 4.0.1
-      '@smithy/middleware-endpoint': 4.1.0
-      '@smithy/middleware-retry': 4.1.0
+      '@smithy/hash-node': 4.0.2
+      '@smithy/invalid-dependency': 4.0.2
+      '@smithy/middleware-content-length': 4.0.2
+      '@smithy/middleware-endpoint': 4.1.1
+      '@smithy/middleware-retry': 4.1.1
       '@smithy/middleware-serde': 4.0.3
       '@smithy/middleware-stack': 4.0.2
       '@smithy/node-config-provider': 4.0.2
       '@smithy/node-http-handler': 4.0.4
       '@smithy/protocol-http': 5.1.0
-      '@smithy/smithy-client': 4.2.0
+      '@smithy/smithy-client': 4.2.1
       '@smithy/types': 4.2.0
       '@smithy/url-parser': 4.0.2
       '@smithy/util-base64': 4.0.0
       '@smithy/util-body-length-browser': 4.0.0
       '@smithy/util-body-length-node': 4.0.0
-      '@smithy/util-defaults-mode-browser': 4.0.8
-      '@smithy/util-defaults-mode-node': 4.0.8
-      '@smithy/util-endpoints': 3.0.1
+      '@smithy/util-defaults-mode-browser': 4.0.9
+      '@smithy/util-defaults-mode-node': 4.0.9
+      '@smithy/util-endpoints': 3.0.2
       '@smithy/util-middleware': 4.0.2
       '@smithy/util-retry': 4.0.2
       '@smithy/util-utf8': 4.0.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
     dev: false
 
-  /@aws-sdk/region-config-resolver@3.734.0:
-    resolution: {integrity: sha512-Lvj1kPRC5IuJBr9DyJ9T9/plkh+EfKLy+12s/mykOy1JaKHDpvj+XGy2YO6YgYVOb8JFtaqloid+5COtje4JTQ==}
+  /@aws-sdk/region-config-resolver@3.775.0:
+    resolution: {integrity: sha512-40iH3LJjrQS3LKUJAl7Wj0bln7RFPEvUYKFxtP8a+oKFDO0F65F52xZxIJbPn6sHkxWDAnZlGgdjZXM3p2g5wQ==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-sdk/types': 3.734.0
-      '@smithy/node-config-provider': 4.0.1
-      '@smithy/types': 4.1.0
+      '@aws-sdk/types': 3.775.0
+      '@smithy/node-config-provider': 4.0.2
+      '@smithy/types': 4.2.0
       '@smithy/util-config-provider': 4.0.0
-      '@smithy/util-middleware': 4.0.1
-      tslib: 2.8.0
-    dev: false
-
-  /@aws-sdk/s3-request-presigner@3.735.0:
-    resolution: {integrity: sha512-PzfS4rWDLlp22NORWmezA8ZH6uwz7fAmYfdIbWsPKoy1Rpm+/6Kqn7Nx+Taz6UKNhGPtexutCoJqsMxCy0ZmxQ==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@aws-sdk/signature-v4-multi-region': 3.734.0
-      '@aws-sdk/types': 3.734.0
-      '@aws-sdk/util-format-url': 3.734.0
-      '@smithy/middleware-endpoint': 4.0.2
-      '@smithy/protocol-http': 5.0.1
-      '@smithy/smithy-client': 4.1.2
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
-    dev: false
-
-  /@aws-sdk/signature-v4-multi-region@3.734.0:
-    resolution: {integrity: sha512-GSRP8UH30RIYkcpPILV4pWrKFjRmmNjtUd41HTKWde5GbjJvNYpxqFXw2aIJHjKTw/js3XEtGSNeTaQMVVt3CQ==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@aws-sdk/middleware-sdk-s3': 3.734.0
-      '@aws-sdk/types': 3.734.0
-      '@smithy/protocol-http': 5.0.1
-      '@smithy/signature-v4': 5.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      '@smithy/util-middleware': 4.0.2
+      tslib: 2.8.1
     dev: false
 
-  /@aws-sdk/signature-v4-multi-region@3.758.0:
-    resolution: {integrity: sha512-0RPCo8fYJcrenJ6bRtiUbFOSgQ1CX/GpvwtLU2Fam1tS9h2klKK8d74caeV6A1mIUvBU7bhyQ0wMGlwMtn3EYw==}
+  /@aws-sdk/s3-request-presigner@3.798.0:
+    resolution: {integrity: sha512-LeaOPfoWBa15RGhKUDN2Wderv0ybvKJ1sqWas/faruBg8AjN4CCxRSWtWsolppBsymP9RS+qoUF3gDHlNRoupA==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-sdk/middleware-sdk-s3': 3.758.0
-      '@aws-sdk/types': 3.734.0
-      '@smithy/protocol-http': 5.0.1
-      '@smithy/signature-v4': 5.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      '@aws-sdk/signature-v4-multi-region': 3.798.0
+      '@aws-sdk/types': 3.775.0
+      '@aws-sdk/util-format-url': 3.775.0
+      '@smithy/middleware-endpoint': 4.1.1
+      '@smithy/protocol-http': 5.1.0
+      '@smithy/smithy-client': 4.2.1
+      '@smithy/types': 4.2.0
+      tslib: 2.8.1
     dev: false
 
-  /@aws-sdk/token-providers@3.734.0:
-    resolution: {integrity: sha512-2U6yWKrjWjZO8Y5SHQxkFvMVWHQWbS0ufqfAIBROqmIZNubOL7jXCiVdEFekz6MZ9LF2tvYGnOW4jX8OKDGfIw==}
+  /@aws-sdk/signature-v4-multi-region@3.798.0:
+    resolution: {integrity: sha512-DF6itw3Wv1GxnkiJEdNOBfhcG3BNCL3jAFxpNNUHpjq9GmLyGRyu3CgLSRRt/TXSwWhIQZ+dWeF/hE3TERDZTQ==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-sdk/nested-clients': 3.734.0
-      '@aws-sdk/types': 3.734.0
-      '@smithy/property-provider': 4.0.2
-      '@smithy/shared-ini-file-loader': 4.0.2
+      '@aws-sdk/middleware-sdk-s3': 3.798.0
+      '@aws-sdk/types': 3.775.0
+      '@smithy/protocol-http': 5.1.0
+      '@smithy/signature-v4': 5.1.0
       '@smithy/types': 4.2.0
-      tslib: 2.8.0
-    transitivePeerDependencies:
-      - aws-crt
+      tslib: 2.8.1
     dev: false
 
-  /@aws-sdk/token-providers@3.758.0:
-    resolution: {integrity: sha512-ckptN1tNrIfQUaGWm/ayW1ddG+imbKN7HHhjFdS4VfItsP0QQOB0+Ov+tpgb4MoNR4JaUghMIVStjIeHN2ks1w==}
+  /@aws-sdk/token-providers@3.798.0:
+    resolution: {integrity: sha512-iYhNmHXfWLUwcMP9ldb/H+RMRLHZbBUWBgsoQqfb7sl6z24nH0qBJyL+oXHTCVBUYLP20CvUrVkcwlejDzyoRw==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-sdk/nested-clients': 3.758.0
-      '@aws-sdk/types': 3.734.0
+      '@aws-sdk/nested-clients': 3.798.0
+      '@aws-sdk/types': 3.775.0
       '@smithy/property-provider': 4.0.2
       '@smithy/shared-ini-file-loader': 4.0.2
       '@smithy/types': 4.2.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
     dev: false
 
-  /@aws-sdk/types@3.734.0:
-    resolution: {integrity: sha512-o11tSPTT70nAkGV1fN9wm/hAIiLPyWX6SuGf+9JyTp7S/rC2cFWhR26MvA69nplcjNaXVzB0f+QFrLXXjOqCrg==}
+  /@aws-sdk/types@3.775.0:
+    resolution: {integrity: sha512-ZoGKwa4C9fC9Av6bdfqcW6Ix5ot05F/S4VxWR2nHuMv7hzfmAjTOcUiWT7UR4hM/U0whf84VhDtXN/DWAk52KA==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      '@smithy/types': 4.2.0
+      tslib: 2.8.1
     dev: false
 
   /@aws-sdk/util-arn-parser@3.723.0:
     resolution: {integrity: sha512-ZhEfvUwNliOQROcAk34WJWVYTlTa4694kSVhDSjW6lE1bMataPnIN8A0ycukEzBXmd8ZSoBcQLn6lKGl7XIJ5w==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /@aws-sdk/util-endpoints@3.734.0:
-    resolution: {integrity: sha512-w2+/E88NUbqql6uCVAsmMxDQKu7vsKV0KqhlQb0lL+RCq4zy07yXYptVNs13qrnuTfyX7uPXkXrlugvK9R1Ucg==}
+  /@aws-sdk/util-endpoints@3.787.0:
+    resolution: {integrity: sha512-fd3zkiOkwnbdbN0Xp9TsP5SWrmv0SpT70YEdbb8wAj2DWQwiCmFszaSs+YCvhoCdmlR3Wl9Spu0pGpSAGKeYvQ==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-sdk/types': 3.734.0
-      '@smithy/types': 4.1.0
-      '@smithy/util-endpoints': 3.0.1
-      tslib: 2.8.0
+      '@aws-sdk/types': 3.775.0
+      '@smithy/types': 4.2.0
+      '@smithy/util-endpoints': 3.0.2
+      tslib: 2.8.1
     dev: false
 
-  /@aws-sdk/util-endpoints@3.743.0:
-    resolution: {integrity: sha512-sN1l559zrixeh5x+pttrnd0A3+r34r0tmPkJ/eaaMaAzXqsmKU/xYre9K3FNnsSS1J1k4PEfk/nHDTVUgFYjnw==}
+  /@aws-sdk/util-format-url@3.775.0:
+    resolution: {integrity: sha512-Nw4nBeyCbWixoGh8NcVpa/i8McMA6RXJIjQFyloJLaPr7CPquz7ZbSl0MUWMFVwP/VHaJ7B+lNN3Qz1iFCEP/Q==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-sdk/types': 3.734.0
-      '@smithy/types': 4.1.0
-      '@smithy/util-endpoints': 3.0.1
-      tslib: 2.8.0
+      '@aws-sdk/types': 3.775.0
+      '@smithy/querystring-builder': 4.0.2
+      '@smithy/types': 4.2.0
+      tslib: 2.8.1
     dev: false
 
-  /@aws-sdk/util-format-url@3.734.0:
-    resolution: {integrity: sha512-TxZMVm8V4aR/QkW9/NhujvYpPZjUYqzLwSge5imKZbWFR806NP7RMwc5ilVuHF/bMOln/cVHkl42kATElWBvNw==}
+  /@aws-sdk/util-locate-window@3.723.0:
+    resolution: {integrity: sha512-Yf2CS10BqK688DRsrKI/EO6B8ff5J86NXe4C+VCysK7UOgN0l1zOTeTukZ3H8Q9tYYX3oaF1961o8vRkFm7Nmw==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@aws-sdk/types': 3.734.0
-      '@smithy/querystring-builder': 4.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
-    dev: false
-
-  /@aws-sdk/util-locate-window@3.679.0:
-    resolution: {integrity: sha512-zKTd48/ZWrCplkXpYDABI74rQlbR0DNHs8nH95htfSLj9/mWRSwaGptoxwcihaq/77vi/fl2X3y0a1Bo8bt7RA==}
-    engines: {node: '>=16.0.0'}
-    dependencies:
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /@aws-sdk/util-user-agent-browser@3.734.0:
-    resolution: {integrity: sha512-xQTCus6Q9LwUuALW+S76OL0jcWtMOVu14q+GoLnWPUM7QeUw963oQcLhF7oq0CtaLLKyl4GOUfcwc773Zmwwng==}
+  /@aws-sdk/util-user-agent-browser@3.775.0:
+    resolution: {integrity: sha512-txw2wkiJmZKVdDbscK7VBK+u+TJnRtlUjRTLei+elZg2ADhpQxfVAQl436FUeIv6AhB/oRHW6/K/EAGXUSWi0A==}
     dependencies:
-      '@aws-sdk/types': 3.734.0
-      '@smithy/types': 4.1.0
+      '@aws-sdk/types': 3.775.0
+      '@smithy/types': 4.2.0
       bowser: 2.11.0
-      tslib: 2.8.0
-    dev: false
-
-  /@aws-sdk/util-user-agent-node@3.734.0:
-    resolution: {integrity: sha512-c6Iinh+RVQKs6jYUFQ64htOU2HUXFQ3TVx+8Tu3EDF19+9vzWi9UukhIMH9rqyyEXIAkk9XL7avt8y2Uyw2dGA==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      aws-crt: '>=1.0.0'
-    peerDependenciesMeta:
-      aws-crt:
-        optional: true
-    dependencies:
-      '@aws-sdk/middleware-user-agent': 3.734.0
-      '@aws-sdk/types': 3.734.0
-      '@smithy/node-config-provider': 4.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /@aws-sdk/util-user-agent-node@3.758.0:
-    resolution: {integrity: sha512-A5EZw85V6WhoKMV2hbuFRvb9NPlxEErb4HPO6/SPXYY4QrjprIzScHxikqcWv1w4J3apB1wto9LPU3IMsYtfrw==}
+  /@aws-sdk/util-user-agent-node@3.798.0:
+    resolution: {integrity: sha512-yncgNd2inI+y5kdfn2i0oBwgCxwdtcVShNNVQ+5b/nuC1Lgjgcb+hmHAeTFMge7vhDP2Md8I+ih6bPMpK79lQQ==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       aws-crt: '>=1.0.0'
@@ -1694,29 +1299,21 @@ packages:
       aws-crt:
         optional: true
     dependencies:
-      '@aws-sdk/middleware-user-agent': 3.758.0
-      '@aws-sdk/types': 3.734.0
-      '@smithy/node-config-provider': 4.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      '@aws-sdk/middleware-user-agent': 3.798.0
+      '@aws-sdk/types': 3.775.0
+      '@smithy/node-config-provider': 4.0.2
+      '@smithy/types': 4.2.0
+      tslib: 2.8.1
     dev: false
 
-  /@aws-sdk/xml-builder@3.734.0:
-    resolution: {integrity: sha512-Zrjxi5qwGEcUsJ0ru7fRtW74WcTS0rbLcehoFB+rN1GRi2hbLcFaYs4PwVA5diLeAJH0gszv3x4Hr/S87MfbKQ==}
+  /@aws-sdk/xml-builder@3.775.0:
+    resolution: {integrity: sha512-b9NGO6FKJeLGYnV7Z1yvcP1TNU4dkD5jNsLWOF1/sygZoASaQhNOlaiJ/1OH331YQ1R1oWk38nBb0frsYkDsOQ==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      '@smithy/types': 4.2.0
+      tslib: 2.8.1
     dev: false
 
-  /@babel/code-frame@7.26.0:
-    resolution: {integrity: sha512-INCKxTtbXtcNbUZ3YXutwMpEleqttcswhAdee7dhuoVrD2cnuc3PqtERBtxkX5nziX9vnBL8WXmSGwv8CuPV6g==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/helper-validator-identifier': 7.25.9
-      js-tokens: 4.0.0
-      picocolors: 1.1.1
-
   /@babel/code-frame@7.26.2:
     resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
     engines: {node: '>=6.9.0'}
@@ -1725,95 +1322,84 @@ packages:
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
-  /@babel/compat-data@7.26.0:
-    resolution: {integrity: sha512-qETICbZSLe7uXv9VE8T/RWOdIE5qqyTucOt4zLYMafj2MRO271VGgLd4RACJMeBO37UPWhXiKMBk7YlJ0fOzQA==}
+  /@babel/compat-data@7.26.8:
+    resolution: {integrity: sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ==}
     engines: {node: '>=6.9.0'}
 
-  /@babel/core@7.26.0:
-    resolution: {integrity: sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==}
+  /@babel/core@7.26.10:
+    resolution: {integrity: sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@ampproject/remapping': 2.3.0
-      '@babel/code-frame': 7.26.0
-      '@babel/generator': 7.26.0
-      '@babel/helper-compilation-targets': 7.25.9
-      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.0)
-      '@babel/helpers': 7.26.0
-      '@babel/parser': 7.26.1
-      '@babel/template': 7.25.9
-      '@babel/traverse': 7.25.9
-      '@babel/types': 7.26.0
+      '@babel/code-frame': 7.26.2
+      '@babel/generator': 7.27.0
+      '@babel/helper-compilation-targets': 7.27.0
+      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.10)
+      '@babel/helpers': 7.27.0
+      '@babel/parser': 7.27.0
+      '@babel/template': 7.27.0
+      '@babel/traverse': 7.27.0
+      '@babel/types': 7.27.0
       convert-source-map: 2.0.0
-      debug: 4.3.7
+      debug: 4.4.0
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  /@babel/eslint-parser@7.25.9(@babel/core@7.26.0)(eslint@8.57.1):
-    resolution: {integrity: sha512-5UXfgpK0j0Xr/xIdgdLEhOFxaDZ0bRPWJJchRpqOSur/3rZoPbqqki5mm0p4NE2cs28krBEiSM2MB7//afRSQQ==}
+  /@babel/eslint-parser@7.27.0(@babel/core@7.26.10)(eslint@8.57.1):
+    resolution: {integrity: sha512-dtnzmSjXfgL/HDgMcmsLSzyGbEosi4DrGWoCNfuI+W4IkVJw6izpTe7LtOdwAXnkDqw5yweboYCTkM2rQizCng==}
     engines: {node: ^10.13.0 || ^12.13.0 || >=14.0.0}
     peerDependencies:
       '@babel/core': ^7.11.0
       eslint: ^7.5.0 || ^8.0.0 || ^9.0.0
     dependencies:
-      '@babel/core': 7.26.0
+      '@babel/core': 7.26.10
       '@nicolo-ribaudo/eslint-scope-5-internals': 5.1.1-v1
       eslint: 8.57.1
       eslint-visitor-keys: 2.1.0
       semver: 6.3.1
     dev: true
 
-  /@babel/generator@7.26.0:
-    resolution: {integrity: sha512-/AIkAmInnWwgEAJGQr9vY0c66Mj6kjkE2ZPB1PurTRaRAh3U+J45sAQMjQDJdh4WbR3l0x5xkimXBKyBXXAu2w==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/parser': 7.26.1
-      '@babel/types': 7.26.0
-      '@jridgewell/gen-mapping': 0.3.5
-      '@jridgewell/trace-mapping': 0.3.25
-      jsesc: 3.0.2
-
   /@babel/generator@7.27.0:
     resolution: {integrity: sha512-VybsKvpiN1gU1sdMZIp7FcqphVVKEwcuj02x73uvcHE0PTihx1nlBcowYWhDwjpoAXRv43+gDzyggGnn1XZhVw==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/parser': 7.27.0
       '@babel/types': 7.27.0
-      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/gen-mapping': 0.3.8
       '@jridgewell/trace-mapping': 0.3.25
-      jsesc: 3.0.2
-    dev: false
+      jsesc: 3.1.0
 
   /@babel/helper-annotate-as-pure@7.25.9:
     resolution: {integrity: sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.26.0
+      '@babel/types': 7.27.0
     dev: false
 
-  /@babel/helper-compilation-targets@7.25.9:
-    resolution: {integrity: sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ==}
+  /@babel/helper-compilation-targets@7.27.0:
+    resolution: {integrity: sha512-LVk7fbXml0H2xH34dFzKQ7TDZ2G4/rVTOrq9V+icbbadjbVxxeFeDsNHv2SrZeWoA+6ZiTyWYWtScEIW07EAcA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/compat-data': 7.26.0
+      '@babel/compat-data': 7.26.8
       '@babel/helper-validator-option': 7.25.9
-      browserslist: 4.24.2
+      browserslist: 4.24.4
       lru-cache: 5.1.1
       semver: 6.3.1
 
-  /@babel/helper-create-class-features-plugin@7.27.0(@babel/core@7.26.0):
+  /@babel/helper-create-class-features-plugin@7.27.0(@babel/core@7.26.10):
     resolution: {integrity: sha512-vSGCvMecvFCd/BdpGlhpXYNhhC4ccxyvQWpbGL4CWbvfEoLFWUZuSuf7s9Aw70flgQF+6vptvgK2IfOnKlRmBg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.26.0
+      '@babel/core': 7.26.10
       '@babel/helper-annotate-as-pure': 7.25.9
       '@babel/helper-member-expression-to-functions': 7.25.9
       '@babel/helper-optimise-call-expression': 7.25.9
-      '@babel/helper-replace-supers': 7.26.5(@babel/core@7.26.0)
+      '@babel/helper-replace-supers': 7.26.5(@babel/core@7.26.10)
       '@babel/helper-skip-transparent-expression-wrappers': 7.25.9
       '@babel/traverse': 7.27.0
       semver: 6.3.1
@@ -1826,7 +1412,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/traverse': 7.27.0
-      '@babel/types': 7.26.0
+      '@babel/types': 7.27.0
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -1835,21 +1421,21 @@ packages:
     resolution: {integrity: sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/traverse': 7.25.9
-      '@babel/types': 7.26.0
+      '@babel/traverse': 7.27.0
+      '@babel/types': 7.27.0
     transitivePeerDependencies:
       - supports-color
 
-  /@babel/helper-module-transforms@7.26.0(@babel/core@7.26.0):
+  /@babel/helper-module-transforms@7.26.0(@babel/core@7.26.10):
     resolution: {integrity: sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.26.0
+      '@babel/core': 7.26.10
       '@babel/helper-module-imports': 7.25.9
       '@babel/helper-validator-identifier': 7.25.9
-      '@babel/traverse': 7.25.9
+      '@babel/traverse': 7.27.0
     transitivePeerDependencies:
       - supports-color
 
@@ -1857,7 +1443,7 @@ packages:
     resolution: {integrity: sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.26.0
+      '@babel/types': 7.27.0
     dev: false
 
   /@babel/helper-plugin-utils@7.26.5:
@@ -1865,13 +1451,13 @@ packages:
     engines: {node: '>=6.9.0'}
     dev: false
 
-  /@babel/helper-replace-supers@7.26.5(@babel/core@7.26.0):
+  /@babel/helper-replace-supers@7.26.5(@babel/core@7.26.10):
     resolution: {integrity: sha512-bJ6iIVdYX1YooY2X7w1q6VITt+LnUILtNk7zT78ykuwStx8BauCzxvFqFaHjOpW1bVnSUM1PN1f0p5P21wHxvg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.26.0
+      '@babel/core': 7.26.10
       '@babel/helper-member-expression-to-functions': 7.25.9
       '@babel/helper-optimise-call-expression': 7.25.9
       '@babel/traverse': 7.27.0
@@ -1883,8 +1469,8 @@ packages:
     resolution: {integrity: sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/traverse': 7.25.9
-      '@babel/types': 7.26.0
+      '@babel/traverse': 7.27.0
+      '@babel/types': 7.27.0
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -1901,19 +1487,12 @@ packages:
     resolution: {integrity: sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==}
     engines: {node: '>=6.9.0'}
 
-  /@babel/helpers@7.26.0:
-    resolution: {integrity: sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==}
+  /@babel/helpers@7.27.0:
+    resolution: {integrity: sha512-U5eyP/CTFPuNE3qk+WZMxFkp/4zUzdceQlfzf7DdGdhp+Fezd7HD+i8Y24ZuTMKX3wQBld449jijbGq6OdGNQg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/template': 7.25.9
-      '@babel/types': 7.26.0
-
-  /@babel/parser@7.26.1:
-    resolution: {integrity: sha512-reoQYNiAJreZNsJzyrDNzFQ+IQ5JFiIzAHJg9bn94S3l+4++J7RsIhNMoB+lgP/9tpmiAQqspv+xfdxTSzREOw==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-    dependencies:
-      '@babel/types': 7.26.0
+      '@babel/template': 7.27.0
+      '@babel/types': 7.27.0
 
   /@babel/parser@7.27.0:
     resolution: {integrity: sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg==}
@@ -1921,182 +1500,173 @@ packages:
     hasBin: true
     dependencies:
       '@babel/types': 7.27.0
-    dev: false
 
-  /@babel/plugin-syntax-jsx@7.25.9(@babel/core@7.26.0):
+  /@babel/plugin-syntax-jsx@7.25.9(@babel/core@7.26.10):
     resolution: {integrity: sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.26.0
+      '@babel/core': 7.26.10
       '@babel/helper-plugin-utils': 7.26.5
     dev: false
 
-  /@babel/plugin-syntax-typescript@7.25.9(@babel/core@7.26.0):
+  /@babel/plugin-syntax-typescript@7.25.9(@babel/core@7.26.10):
     resolution: {integrity: sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.26.0
+      '@babel/core': 7.26.10
       '@babel/helper-plugin-utils': 7.26.5
     dev: false
 
-  /@babel/plugin-transform-modules-commonjs@7.26.3(@babel/core@7.26.0):
+  /@babel/plugin-transform-modules-commonjs@7.26.3(@babel/core@7.26.10):
     resolution: {integrity: sha512-MgR55l4q9KddUDITEzEFYn5ZsGDXMSsU9E+kh7fjRXTIC3RHqfCo8RPRbyReYJh44HQ/yomFkqbOFohXvDCiIQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.26.0
-      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.0)
+      '@babel/core': 7.26.10
+      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.10)
       '@babel/helper-plugin-utils': 7.26.5
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /@babel/plugin-transform-react-display-name@7.25.9(@babel/core@7.26.0):
+  /@babel/plugin-transform-react-display-name@7.25.9(@babel/core@7.26.10):
     resolution: {integrity: sha512-KJfMlYIUxQB1CJfO3e0+h0ZHWOTLCPP115Awhaz8U0Zpq36Gl/cXlpoyMRnUWlhNUBAzldnCiAZNvCDj7CrKxQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.26.0
+      '@babel/core': 7.26.10
       '@babel/helper-plugin-utils': 7.26.5
     dev: false
 
-  /@babel/plugin-transform-react-jsx-development@7.25.9(@babel/core@7.26.0):
+  /@babel/plugin-transform-react-jsx-development@7.25.9(@babel/core@7.26.10):
     resolution: {integrity: sha512-9mj6rm7XVYs4mdLIpbZnHOYdpW42uoiBCTVowg7sP1thUOiANgMb4UtpRivR0pp5iL+ocvUv7X4mZgFRpJEzGw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.26.0
-      '@babel/plugin-transform-react-jsx': 7.25.9(@babel/core@7.26.0)
+      '@babel/core': 7.26.10
+      '@babel/plugin-transform-react-jsx': 7.25.9(@babel/core@7.26.10)
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /@babel/plugin-transform-react-jsx-self@7.25.9(@babel/core@7.26.0):
+  /@babel/plugin-transform-react-jsx-self@7.25.9(@babel/core@7.26.10):
     resolution: {integrity: sha512-y8quW6p0WHkEhmErnfe58r7x0A70uKphQm8Sp8cV7tjNQwK56sNVK0M73LK3WuYmsuyrftut4xAkjjgU0twaMg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.26.0
+      '@babel/core': 7.26.10
       '@babel/helper-plugin-utils': 7.26.5
     dev: false
 
-  /@babel/plugin-transform-react-jsx-source@7.25.9(@babel/core@7.26.0):
+  /@babel/plugin-transform-react-jsx-source@7.25.9(@babel/core@7.26.10):
     resolution: {integrity: sha512-+iqjT8xmXhhYv4/uiYd8FNQsraMFZIfxVSqxxVSZP0WbbSAWvBXAul0m/zu+7Vv4O/3WtApy9pmaTMiumEZgfg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.26.0
+      '@babel/core': 7.26.10
       '@babel/helper-plugin-utils': 7.26.5
     dev: false
 
-  /@babel/plugin-transform-react-jsx@7.25.9(@babel/core@7.26.0):
+  /@babel/plugin-transform-react-jsx@7.25.9(@babel/core@7.26.10):
     resolution: {integrity: sha512-s5XwpQYCqGerXl+Pu6VDL3x0j2d82eiV77UJ8a2mDHAW7j9SWRqQ2y1fNo1Z74CdcYipl5Z41zvjj4Nfzq36rw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.26.0
+      '@babel/core': 7.26.10
       '@babel/helper-annotate-as-pure': 7.25.9
       '@babel/helper-module-imports': 7.25.9
       '@babel/helper-plugin-utils': 7.26.5
-      '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.0)
-      '@babel/types': 7.26.0
+      '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.10)
+      '@babel/types': 7.27.0
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /@babel/plugin-transform-react-pure-annotations@7.25.9(@babel/core@7.26.0):
+  /@babel/plugin-transform-react-pure-annotations@7.25.9(@babel/core@7.26.10):
     resolution: {integrity: sha512-KQ/Takk3T8Qzj5TppkS1be588lkbTp5uj7w6a0LeQaTMSckU/wK0oJ/pih+T690tkgI5jfmg2TqDJvd41Sj1Cg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.26.0
+      '@babel/core': 7.26.10
       '@babel/helper-annotate-as-pure': 7.25.9
       '@babel/helper-plugin-utils': 7.26.5
     dev: false
 
-  /@babel/plugin-transform-typescript@7.27.0(@babel/core@7.26.0):
+  /@babel/plugin-transform-typescript@7.27.0(@babel/core@7.26.10):
     resolution: {integrity: sha512-fRGGjO2UEGPjvEcyAZXRXAS8AfdaQoq7HnxAbJoAoW10B9xOKesmmndJv+Sym2a+9FHWZ9KbyyLCe9s0Sn5jtg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.26.0
+      '@babel/core': 7.26.10
       '@babel/helper-annotate-as-pure': 7.25.9
-      '@babel/helper-create-class-features-plugin': 7.27.0(@babel/core@7.26.0)
+      '@babel/helper-create-class-features-plugin': 7.27.0(@babel/core@7.26.10)
       '@babel/helper-plugin-utils': 7.26.5
       '@babel/helper-skip-transparent-expression-wrappers': 7.25.9
-      '@babel/plugin-syntax-typescript': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-syntax-typescript': 7.25.9(@babel/core@7.26.10)
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /@babel/preset-react@7.26.3(@babel/core@7.26.0):
+  /@babel/preset-react@7.26.3(@babel/core@7.26.10):
     resolution: {integrity: sha512-Nl03d6T9ky516DGK2YMxrTqvnpUW63TnJMOMonj+Zae0JiPC5BC9xPMSL6L8fiSpA5vP88qfygavVQvnLp+6Cw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.26.0
+      '@babel/core': 7.26.10
       '@babel/helper-plugin-utils': 7.26.5
       '@babel/helper-validator-option': 7.25.9
-      '@babel/plugin-transform-react-display-name': 7.25.9(@babel/core@7.26.0)
-      '@babel/plugin-transform-react-jsx': 7.25.9(@babel/core@7.26.0)
-      '@babel/plugin-transform-react-jsx-development': 7.25.9(@babel/core@7.26.0)
-      '@babel/plugin-transform-react-pure-annotations': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-react-display-name': 7.25.9(@babel/core@7.26.10)
+      '@babel/plugin-transform-react-jsx': 7.25.9(@babel/core@7.26.10)
+      '@babel/plugin-transform-react-jsx-development': 7.25.9(@babel/core@7.26.10)
+      '@babel/plugin-transform-react-pure-annotations': 7.25.9(@babel/core@7.26.10)
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /@babel/preset-typescript@7.26.0(@babel/core@7.26.0):
-    resolution: {integrity: sha512-NMk1IGZ5I/oHhoXEElcm+xUnL/szL6xflkFZmoEU9xj1qSJXpiS7rsspYo92B4DRCDvZn2erT5LdsCeXAKNCkg==}
+  /@babel/preset-typescript@7.27.0(@babel/core@7.26.10):
+    resolution: {integrity: sha512-vxaPFfJtHhgeOVXRKuHpHPAOgymmy8V8I65T1q53R7GCZlefKeCaTyDs3zOPHTTbmquvNlQYC5klEvWsBAtrBQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.26.0
+      '@babel/core': 7.26.10
       '@babel/helper-plugin-utils': 7.26.5
       '@babel/helper-validator-option': 7.25.9
-      '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.0)
-      '@babel/plugin-transform-modules-commonjs': 7.26.3(@babel/core@7.26.0)
-      '@babel/plugin-transform-typescript': 7.27.0(@babel/core@7.26.0)
+      '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.10)
+      '@babel/plugin-transform-modules-commonjs': 7.26.3(@babel/core@7.26.10)
+      '@babel/plugin-transform-typescript': 7.27.0(@babel/core@7.26.10)
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /@babel/runtime-corejs3@7.26.0:
-    resolution: {integrity: sha512-YXHu5lN8kJCb1LOb9PgV6pvak43X2h4HvRApcN5SdWeaItQOzfn1hgP6jasD6KWQyJDBxrVmA9o9OivlnNJK/w==}
+  /@babel/runtime-corejs3@7.27.0:
+    resolution: {integrity: sha512-UWjX6t+v+0ckwZ50Y5ShZLnlk95pP5MyW/pon9tiYzl3+18pkTHTFNTKr7rQbfRXPkowt2QAn30o1b6oswszew==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      core-js-pure: 3.38.1
+      core-js-pure: 3.41.0
       regenerator-runtime: 0.14.1
     dev: true
 
-  /@babel/runtime@7.26.0:
-    resolution: {integrity: sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==}
+  /@babel/runtime@7.27.0:
+    resolution: {integrity: sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==}
     engines: {node: '>=6.9.0'}
     dependencies:
       regenerator-runtime: 0.14.1
     dev: false
 
-  /@babel/template@7.25.9:
-    resolution: {integrity: sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/code-frame': 7.26.0
-      '@babel/parser': 7.26.1
-      '@babel/types': 7.26.0
-
   /@babel/template@7.27.0:
     resolution: {integrity: sha512-2ncevenBqXI6qRMukPlXwHKHchC7RyMuu4xv5JBXRfOGVcTy1mXCD12qrp7Jsoxll1EV3+9sE4GugBVRjT2jFA==}
     engines: {node: '>=6.9.0'}
@@ -2104,21 +1674,6 @@ packages:
       '@babel/code-frame': 7.26.2
       '@babel/parser': 7.27.0
       '@babel/types': 7.27.0
-    dev: false
-
-  /@babel/traverse@7.25.9:
-    resolution: {integrity: sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/code-frame': 7.26.0
-      '@babel/generator': 7.26.0
-      '@babel/parser': 7.26.1
-      '@babel/template': 7.25.9
-      '@babel/types': 7.26.0
-      debug: 4.3.7
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
 
   /@babel/traverse@7.27.0:
     resolution: {integrity: sha512-19lYZFzYVQkkHkl4Cy4WrAVcqBkgvV2YM2TU3xG6DIwO7O3ecbDPfW3yM3bjAGcqcQHi+CCtjMR3dIEHxsd6bA==}
@@ -2129,77 +1684,75 @@ packages:
       '@babel/parser': 7.27.0
       '@babel/template': 7.27.0
       '@babel/types': 7.27.0
-      debug: 4.3.7
+      debug: 4.4.0
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
-  /@babel/types@7.26.0:
-    resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==}
+  /@babel/types@7.27.0:
+    resolution: {integrity: sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/helper-string-parser': 7.25.9
       '@babel/helper-validator-identifier': 7.25.9
 
-  /@babel/types@7.27.0:
-    resolution: {integrity: sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/helper-string-parser': 7.25.9
-      '@babel/helper-validator-identifier': 7.25.9
-    dev: false
-
-  /@clerk/backend@1.24.0(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-DlOZ9pnCY77ngHKFZzC7ZImHBVjMf2whPLvnnBt4YXjkvuQ3m1v1tQHUXb8qqlwilptHU4/WzkOlXytez+iJ+A==}
+  /@clerk/backend@1.30.0(react-dom@19.1.0)(react@19.1.0)(svix@1.64.1):
+    resolution: {integrity: sha512-VB8a0jbfb5eiHENCT9ts8ISozUbKOcREj2rXQaYcOhEQ1EzO6Jng1Pb0nRR4RojsAvPe9XGMQrA4FufHp+dUWQ==}
     engines: {node: '>=18.17.0'}
+    peerDependencies:
+      svix: ^1.62.0
+    peerDependenciesMeta:
+      svix:
+        optional: true
     dependencies:
-      '@clerk/shared': 2.21.0(react-dom@19.1.0)(react@19.1.0)
-      '@clerk/types': 4.45.1
+      '@clerk/shared': 3.7.4(react-dom@19.1.0)(react@19.1.0)
+      '@clerk/types': 4.55.1
       cookie: 1.0.2
       snakecase-keys: 8.0.1
-      tslib: 2.4.1
+      svix: 1.64.1
+      tslib: 2.8.1
     transitivePeerDependencies:
       - react
       - react-dom
     dev: false
 
-  /@clerk/clerk-react@5.22.12(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-afaatXlyBlG1zRSQyRGLKS7eJZn46WZhAyBAswfIahXBtf9rMTzT4gCj4vYUm5wtnypneOIl3RYy07CkCSRcCQ==}
+  /@clerk/clerk-react@5.30.0(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-ruC8I31wu5vpYFTZ5Qj+avZwHbyzmhY6fatV6EzYMCIu7tOgDK5Af92gerfJ5drbRTL+NM4tDPmSNXiMIdS/nw==}
     engines: {node: '>=18.17.0'}
     peerDependencies:
       react: ^18.0.0 || ^19.0.0 || ^19.0.0-0
       react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-0
     dependencies:
-      '@clerk/shared': 2.21.0(react-dom@19.1.0)(react@19.1.0)
-      '@clerk/types': 4.45.1
+      '@clerk/shared': 3.7.4(react-dom@19.1.0)(react@19.1.0)
+      '@clerk/types': 4.55.1
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
-      tslib: 2.4.1
+      tslib: 2.8.1
     dev: false
 
-  /@clerk/nextjs@6.11.2(next@15.3.0)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-n8pwaKIdkk/AGmadIyhfsOmFixFXrmjAL524B1zJ+L6nOApyXpn8XncNavkdkoiZaP9j6iyhJUOXFZZ7IhVaNQ==}
+  /@clerk/nextjs@6.18.0(next@15.3.0)(react-dom@19.1.0)(react@19.1.0)(svix@1.64.1):
+    resolution: {integrity: sha512-7cWFserYByK65eSX7eCyGXHlDb3ejNTyf3O8nHc4DgDLHjZn5dJA+6J0Hz1XSgUATOCSbnmkKSy1iekNMvSnYA==}
     engines: {node: '>=18.17.0'}
     peerDependencies:
-      next: ^13.5.4 || ^14.0.3 || ^15.0.0
+      next: ^13.5.7 || ^14.2.25 || ^15.2.3
       react: ^18.0.0 || ^19.0.0 || ^19.0.0-0
       react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-0
     dependencies:
-      '@clerk/backend': 1.24.0(react-dom@19.1.0)(react@19.1.0)
-      '@clerk/clerk-react': 5.22.12(react-dom@19.1.0)(react@19.1.0)
-      '@clerk/shared': 2.21.0(react-dom@19.1.0)(react@19.1.0)
-      '@clerk/types': 4.45.1
-      crypto-js: 4.2.0
+      '@clerk/backend': 1.30.0(react-dom@19.1.0)(react@19.1.0)(svix@1.64.1)
+      '@clerk/clerk-react': 5.30.0(react-dom@19.1.0)(react@19.1.0)
+      '@clerk/shared': 3.7.4(react-dom@19.1.0)(react@19.1.0)
+      '@clerk/types': 4.55.1
       next: 15.3.0(react-dom@19.1.0)(react@19.1.0)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
       server-only: 0.0.1
-      tslib: 2.4.1
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - svix
     dev: false
 
-  /@clerk/shared@2.21.0(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-8uszJbdyfpk/qmu4SoIiT3T79TgSJe2uRm0m2isRZeGWw5DQFlf/dAF3iGOj7p2ad+24SGYb4cXwrrRdYyO8KQ==}
+  /@clerk/shared@3.7.4(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-Ua6MyDyXjkfrV4h7ftC5LUsz7YL+0athsiNuMUyYjE3x8r/vmJzhLjZJ7C2C3KhDq2XnMWud0iQ7SGRTop+9WQ==}
     engines: {node: '>=18.17.0'}
     requiresBuild: true
     peerDependencies:
@@ -2211,33 +1764,26 @@ packages:
       react-dom:
         optional: true
     dependencies:
-      '@clerk/types': 4.45.1
+      '@clerk/types': 4.55.1
       dequal: 2.0.3
       glob-to-regexp: 0.4.1
       js-cookie: 3.0.5
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
-      std-env: 3.8.0
-      swr: 2.3.2(react@19.1.0)
-    dev: false
-
-  /@clerk/themes@2.1.39:
-    resolution: {integrity: sha512-sa5uO3/77ESsQ/2JrhZsspEKHBhtTgMohtNxsdN/gzJtH+gxs9gVN7ecbnVPAKsSrTjUYdwvWnfOTT+A26Et/g==}
-    engines: {node: '>=18.17.0'}
-    dependencies:
-      '@clerk/types': 4.28.0
-      tslib: 2.4.1
+      std-env: 3.9.0
+      swr: 2.3.3(react@19.1.0)
     dev: false
 
-  /@clerk/types@4.28.0:
-    resolution: {integrity: sha512-RPdrUs8HYfhXaZ0MOVBkzy7lilsU9lDVSC88a5o/cEMmTML+BTDfLHMlLG81kgvagSLCKKbl28iocb8y7stm1Q==}
+  /@clerk/themes@2.2.36:
+    resolution: {integrity: sha512-XAuSavhI77pOiI6XGEGcsmMGG3VrxFrd/kaDfQYiUtHgEoAZvyDVPrmjPgiI2oYMcphIHXYJ7hPJZYp1ixWUZg==}
     engines: {node: '>=18.17.0'}
     dependencies:
-      csstype: 3.1.1
+      '@clerk/types': 4.55.1
+      tslib: 2.8.1
     dev: false
 
-  /@clerk/types@4.45.1:
-    resolution: {integrity: sha512-lS3Q8Ih4CasMY3ed7u+bXdO/s0OF1DIbSUhzQSKpfluzUxxkkFlPiRKsefctL4cnGt4fOzyD+T9ebF0up6sUkA==}
+  /@clerk/types@4.55.1:
+    resolution: {integrity: sha512-BS/shDMWfQ7M8Jlms/RJFH20N8cK1EfAWKTpiIiICFi5e/5H0gpaaWx277x341GQz4gZzVDPGdF+EhoknYOrWQ==}
     engines: {node: '>=18.17.0'}
     dependencies:
       csstype: 3.1.3
@@ -2246,39 +1792,29 @@ packages:
   /@codemirror/autocomplete@6.18.6:
     resolution: {integrity: sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==}
     dependencies:
-      '@codemirror/language': 6.10.3
-      '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
-      '@lezer/common': 1.2.3
-    dev: false
-
-  /@codemirror/commands@6.7.1:
-    resolution: {integrity: sha512-llTrboQYw5H4THfhN4U3qCnSZ1SOJ60ohhz+SzU0ADGtwlc533DtklQP0vSFaQuCPDn3BPpOd1GbbnUtwNjsrw==}
-    dependencies:
-      '@codemirror/language': 6.10.3
+      '@codemirror/language': 6.11.0
       '@codemirror/state': 6.5.2
-      '@codemirror/view': 6.36.5
+      '@codemirror/view': 6.36.6
       '@lezer/common': 1.2.3
     dev: false
 
-  /@codemirror/lang-css@6.3.0:
-    resolution: {integrity: sha512-CyR4rUNG9OYcXDZwMPvJdtb6PHbBDKUc/6Na2BIwZ6dKab1JQqKa4di+RNRY9Myn7JB81vayKwJeQ7jEdmNVDA==}
+  /@codemirror/commands@6.8.1:
+    resolution: {integrity: sha512-KlGVYufHMQzxbdQONiLyGQDUW0itrLZwq3CcY7xpv9ZLRHqzkBSoteocBHtMCoY7/Ci4xhzSrToIeLg7FxHuaw==}
     dependencies:
-      '@codemirror/autocomplete': 6.18.6
-      '@codemirror/language': 6.10.3
-      '@codemirror/state': 6.4.1
+      '@codemirror/language': 6.11.0
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.6
       '@lezer/common': 1.2.3
-      '@lezer/css': 1.1.9
     dev: false
 
   /@codemirror/lang-css@6.3.1:
     resolution: {integrity: sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==}
     dependencies:
       '@codemirror/autocomplete': 6.18.6
-      '@codemirror/language': 6.10.3
+      '@codemirror/language': 6.11.0
       '@codemirror/state': 6.5.2
       '@lezer/common': 1.2.3
-      '@lezer/css': 1.1.9
+      '@lezer/css': 1.1.11
     dev: false
 
   /@codemirror/lang-html@6.4.9:
@@ -2287,50 +1823,31 @@ packages:
       '@codemirror/autocomplete': 6.18.6
       '@codemirror/lang-css': 6.3.1
       '@codemirror/lang-javascript': 6.2.3
-      '@codemirror/language': 6.10.3
+      '@codemirror/language': 6.11.0
       '@codemirror/state': 6.5.2
-      '@codemirror/view': 6.36.5
+      '@codemirror/view': 6.36.6
       '@lezer/common': 1.2.3
-      '@lezer/css': 1.1.9
+      '@lezer/css': 1.1.11
       '@lezer/html': 1.3.10
     dev: false
 
-  /@codemirror/lang-javascript@6.2.2:
-    resolution: {integrity: sha512-VGQfY+FCc285AhWuwjYxQyUQcYurWlxdKYT4bqwr3Twnd5wP5WSeu52t4tvvuWmljT4EmgEgZCqSieokhtY8hg==}
-    dependencies:
-      '@codemirror/autocomplete': 6.18.6
-      '@codemirror/language': 6.10.3
-      '@codemirror/lint': 6.8.5
-      '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
-      '@lezer/common': 1.2.3
-      '@lezer/javascript': 1.4.19
-    dev: false
-
   /@codemirror/lang-javascript@6.2.3:
     resolution: {integrity: sha512-8PR3vIWg7pSu7ur8A07pGiYHgy3hHj+mRYRCSG8q+mPIrl0F02rgpGv+DsQTHRTc30rydOsf5PZ7yjKFg2Ackw==}
     dependencies:
       '@codemirror/autocomplete': 6.18.6
-      '@codemirror/language': 6.10.3
+      '@codemirror/language': 6.11.0
       '@codemirror/lint': 6.8.5
       '@codemirror/state': 6.5.2
-      '@codemirror/view': 6.36.5
+      '@codemirror/view': 6.36.6
       '@lezer/common': 1.2.3
-      '@lezer/javascript': 1.4.19
+      '@lezer/javascript': 1.5.1
     dev: false
 
-  /@codemirror/lang-json@6.0.1:
-    resolution: {integrity: sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==}
+  /@codemirror/language@6.11.0:
+    resolution: {integrity: sha512-A7+f++LodNNc1wGgoRDTt78cOwWm9KVezApgjOMp1W4hM0898nsqBXwF+sbePE7ZRcjN7Sa1Z5m2oN27XkmEjQ==}
     dependencies:
-      '@codemirror/language': 6.10.3
-      '@lezer/json': 1.0.3
-    dev: false
-
-  /@codemirror/language@6.10.3:
-    resolution: {integrity: sha512-kDqEU5sCP55Oabl6E7m5N+vZRoc0iWqgDVhEKifcHzPzjqCegcO4amfrYVL9PmPZpl4G0yjkpTpUO/Ui8CzO8A==}
-    dependencies:
-      '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.6
       '@lezer/common': 1.2.3
       '@lezer/highlight': 1.2.1
       '@lezer/lr': 1.4.2
@@ -2339,49 +1856,20 @@ packages:
 
   /@codemirror/lint@6.8.5:
     resolution: {integrity: sha512-s3n3KisH7dx3vsoeGMxsbRAgKe4O1vbrnKBClm99PU0fWxmxsx5rR2PfqQgIt+2MMJBHbiJ5rfIdLYfB9NNvsA==}
-    dependencies:
-      '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.36.5
-      crelt: 1.0.6
-    dev: false
-
-  /@codemirror/search@6.5.10:
-    resolution: {integrity: sha512-RMdPdmsrUf53pb2VwflKGHEe1XVM07hI7vV2ntgw1dmqhimpatSJKva4VA9h4TLUDOD4EIF02201oZurpnEFsg==}
     dependencies:
       '@codemirror/state': 6.5.2
-      '@codemirror/view': 6.36.5
+      '@codemirror/view': 6.36.6
       crelt: 1.0.6
     dev: false
 
-  /@codemirror/state@6.4.1:
-    resolution: {integrity: sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==}
-    dev: false
-
   /@codemirror/state@6.5.2:
     resolution: {integrity: sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==}
     dependencies:
       '@marijn/find-cluster-break': 1.0.2
     dev: false
 
-  /@codemirror/theme-one-dark@6.1.2:
-    resolution: {integrity: sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==}
-    dependencies:
-      '@codemirror/language': 6.10.3
-      '@codemirror/state': 6.5.2
-      '@codemirror/view': 6.36.5
-      '@lezer/highlight': 1.2.1
-    dev: false
-
-  /@codemirror/view@6.34.1:
-    resolution: {integrity: sha512-t1zK/l9UiRqwUNPm+pdIT0qzJlzuVckbTEMVNFhfWkGiBQClstzg+78vedCvLSX0xJEZ6lwZbPpnljL7L6iwMQ==}
-    dependencies:
-      '@codemirror/state': 6.4.1
-      style-mod: 4.1.2
-      w3c-keyname: 2.2.8
-    dev: false
-
-  /@codemirror/view@6.36.5:
-    resolution: {integrity: sha512-cd+FZEUlu3GQCYnguYm3EkhJ8KJVisqqUsCOKedBoAt/d9c76JUUap6U0UrpElln5k6VyrEOYliMuDAKIeDQLg==}
+  /@codemirror/view@6.36.6:
+    resolution: {integrity: sha512-uxugGLet+Nzp0Jcit8Hn3LypM8ioMLKTsdf8FRoT3HWvZtb9GhaWMe0Cc15rz90Ljab4YFJiAulmIVB74OY0IQ==}
     dependencies:
       '@codemirror/state': 6.5.2
       style-mod: 4.1.2
@@ -2401,30 +1889,30 @@ packages:
       '@codesandbox/nodebox': 0.1.8
       buffer: 6.0.3
       dequal: 2.0.3
-      mime-db: 1.53.0
+      mime-db: 1.54.0
       outvariant: 1.4.0
       static-browser-server: 1.0.3
     dev: false
 
-  /@codesandbox/sandpack-react@2.19.9(@lezer/common@1.2.3)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-a5uXWYdg5Wtz6VHwXIegdS7C63foCofFa/eHO9crtPp1Yf5/npKimds0S3kKJL7jpOmMAascEvAOqOy5S9e6qQ==}
+  /@codesandbox/sandpack-react@2.20.0(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-takd1YpW/PMQ6KPQfvseWLHWklJovGY8QYj8MtWnskGKbjOGJ6uZfyZbcJ6aCFLQMpNyjTqz9AKNbvhCOZ1TUQ==}
     peerDependencies:
-      react: ^16.8.0 || ^17 || ^18
-      react-dom: ^16.8.0 || ^17 || ^18
+      react: ^16.8.0 || ^17 || ^18 || ^19
+      react-dom: ^16.8.0 || ^17 || ^18 || ^19
     dependencies:
       '@codemirror/autocomplete': 6.18.6
-      '@codemirror/commands': 6.7.1
-      '@codemirror/lang-css': 6.3.0
+      '@codemirror/commands': 6.8.1
+      '@codemirror/lang-css': 6.3.1
       '@codemirror/lang-html': 6.4.9
-      '@codemirror/lang-javascript': 6.2.2
-      '@codemirror/language': 6.10.3
-      '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.34.1
+      '@codemirror/lang-javascript': 6.2.3
+      '@codemirror/language': 6.11.0
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.6
       '@codesandbox/sandpack-client': 2.19.8
       '@lezer/highlight': 1.2.1
       '@react-hook/intersection-observer': 3.1.2(react@19.1.0)
       '@stitches/core': 1.2.8
-      anser: 2.3.0
+      anser: 2.3.2
       clean-set: 1.1.2
       dequal: 2.0.3
       escape-carriage: 1.3.1
@@ -2446,52 +1934,50 @@ packages:
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
 
-  /@emnapi/runtime@1.4.1:
-    resolution: {integrity: sha512-LMshMVP0ZhACNjQNYXiU1iZJ6QCcv0lUdPDPugqGvCGXt5xtRVBPdtA0qU12pEXZzpWAhWlZYptfdAFq10DOVQ==}
+  /@emnapi/core@1.4.3:
+    resolution: {integrity: sha512-4m62DuCE07lw01soJwPiBGC0nAww0Q+RY70VZ+n49yDIO13yyinhbWCeNnaob0lakDtWQzSdtNWzJeOJt2ma+g==}
     requiresBuild: true
     dependencies:
-      tslib: 2.8.0
-    dev: false
+      '@emnapi/wasi-threads': 1.0.2
+      tslib: 2.8.1
+    dev: true
     optional: true
 
-  /@esbuild/aix-ppc64@0.25.0:
-    resolution: {integrity: sha512-O7vun9Sf8DFjH2UtqK8Ku3LkquL9SZL8OLY1T5NZkA34+wG3OQF7cl4Ql8vdNzM6fzBbYfLaiRLIOZ+2FOCgBQ==}
-    engines: {node: '>=18'}
-    cpu: [ppc64]
-    os: [aix]
+  /@emnapi/runtime@1.4.3:
+    resolution: {integrity: sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==}
     requiresBuild: true
-    dev: false
+    dependencies:
+      tslib: 2.8.1
     optional: true
 
-  /@esbuild/android-arm64@0.17.19:
-    resolution: {integrity: sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
+  /@emnapi/wasi-threads@1.0.2:
+    resolution: {integrity: sha512-5n3nTJblwRi8LlXkJ9eBzu+kZR8Yxcc7ubakyQTFzPMtIhFpUBRbsnc2Dv88IZDIbCDlBiWrknhB4Lsz7mg6BA==}
     requiresBuild: true
-    dev: false
+    dependencies:
+      tslib: 2.8.1
+    dev: true
     optional: true
 
-  /@esbuild/android-arm64@0.25.0:
-    resolution: {integrity: sha512-grvv8WncGjDSyUBjN9yHXNt+cq0snxXbDxy5pJtzMKGmmpPxeAmAhWxXI+01lU5rwZomDgD3kJwulEnhTRUd6g==}
+  /@esbuild/aix-ppc64@0.25.3:
+    resolution: {integrity: sha512-W8bFfPA8DowP8l//sxjJLSLkD8iEjMc7cBVyP+u4cEv9sM7mdUCkgsj+t0n/BWPFtv7WWCN5Yzj0N6FJNUUqBQ==}
     engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [android]
+    cpu: [ppc64]
+    os: [aix]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@esbuild/android-arm@0.17.19:
-    resolution: {integrity: sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==}
-    engines: {node: '>=12'}
-    cpu: [arm]
+  /@esbuild/android-arm64@0.25.3:
+    resolution: {integrity: sha512-XelR6MzjlZuBM4f5z2IQHK6LkK34Cvv6Rj2EntER3lwCBFdg6h2lKbtRjpTTsdEjD/WSe1q8UyPBXP1x3i/wYQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
     os: [android]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@esbuild/android-arm@0.25.0:
-    resolution: {integrity: sha512-PTyWCYYiU0+1eJKmw21lWtC+d08JDZPQ5g+kFyxP0V+es6VPPSUhM6zk8iImp2jbV6GwjX4pap0JFbUQN65X1g==}
+  /@esbuild/android-arm@0.25.3:
+    resolution: {integrity: sha512-PuwVXbnP87Tcff5I9ngV0lmiSu40xw1At6i3GsU77U7cjDDB4s0X2cyFuBiDa1SBk9DnvWwnGvVaGBqoFWPb7A==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [android]
@@ -2499,17 +1985,8 @@ packages:
     dev: false
     optional: true
 
-  /@esbuild/android-x64@0.17.19:
-    resolution: {integrity: sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [android]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@esbuild/android-x64@0.25.0:
-    resolution: {integrity: sha512-m/ix7SfKG5buCnxasr52+LI78SQ+wgdENi9CqyCXwjVR2X4Jkz+BpC3le3AoBPYTC9NHklwngVXvbJ9/Akhrfg==}
+  /@esbuild/android-x64@0.25.3:
+    resolution: {integrity: sha512-ogtTpYHT/g1GWS/zKM0cc/tIebFjm1F9Aw1boQ2Y0eUQ+J89d0jFY//s9ei9jVIlkYi8AfOjiixcLJSGNSOAdQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [android]
@@ -2517,17 +1994,8 @@ packages:
     dev: false
     optional: true
 
-  /@esbuild/darwin-arm64@0.17.19:
-    resolution: {integrity: sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@esbuild/darwin-arm64@0.25.0:
-    resolution: {integrity: sha512-mVwdUb5SRkPayVadIOI78K7aAnPamoeFR2bT5nszFUZ9P8UpK4ratOdYbZZXYSqPKMHfS1wdHCJk1P1EZpRdvw==}
+  /@esbuild/darwin-arm64@0.25.3:
+    resolution: {integrity: sha512-eESK5yfPNTqpAmDfFWNsOhmIOaQA59tAcF/EfYvo5/QWQCzXn5iUSOnqt3ra3UdzBv073ykTtmeLJZGt3HhA+w==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [darwin]
@@ -2535,17 +2003,8 @@ packages:
     dev: false
     optional: true
 
-  /@esbuild/darwin-x64@0.17.19:
-    resolution: {integrity: sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@esbuild/darwin-x64@0.25.0:
-    resolution: {integrity: sha512-DgDaYsPWFTS4S3nWpFcMn/33ZZwAAeAFKNHNa1QN0rI4pUjgqf0f7ONmXf6d22tqTY+H9FNdgeaAa+YIFUn2Rg==}
+  /@esbuild/darwin-x64@0.25.3:
+    resolution: {integrity: sha512-Kd8glo7sIZtwOLcPbW0yLpKmBNWMANZhrC1r6K++uDR2zyzb6AeOYtI6udbtabmQpFaxJ8uduXMAo1gs5ozz8A==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [darwin]
@@ -2553,17 +2012,8 @@ packages:
     dev: false
     optional: true
 
-  /@esbuild/freebsd-arm64@0.17.19:
-    resolution: {integrity: sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@esbuild/freebsd-arm64@0.25.0:
-    resolution: {integrity: sha512-VN4ocxy6dxefN1MepBx/iD1dH5K8qNtNe227I0mnTRjry8tj5MRk4zprLEdG8WPyAPb93/e4pSgi1SoHdgOa4w==}
+  /@esbuild/freebsd-arm64@0.25.3:
+    resolution: {integrity: sha512-EJiyS70BYybOBpJth3M0KLOus0n+RRMKTYzhYhFeMwp7e/RaajXvP+BWlmEXNk6uk+KAu46j/kaQzr6au+JcIw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [freebsd]
@@ -2571,17 +2021,8 @@ packages:
     dev: false
     optional: true
 
-  /@esbuild/freebsd-x64@0.17.19:
-    resolution: {integrity: sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@esbuild/freebsd-x64@0.25.0:
-    resolution: {integrity: sha512-mrSgt7lCh07FY+hDD1TxiTyIHyttn6vnjesnPoVDNmDfOmggTLXRv8Id5fNZey1gl/V2dyVK1VXXqVsQIiAk+A==}
+  /@esbuild/freebsd-x64@0.25.3:
+    resolution: {integrity: sha512-Q+wSjaLpGxYf7zC0kL0nDlhsfuFkoN+EXrx2KSB33RhinWzejOd6AvgmP5JbkgXKmjhmpfgKZq24pneodYqE8Q==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [freebsd]
@@ -2589,17 +2030,8 @@ packages:
     dev: false
     optional: true
 
-  /@esbuild/linux-arm64@0.17.19:
-    resolution: {integrity: sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@esbuild/linux-arm64@0.25.0:
-    resolution: {integrity: sha512-9QAQjTWNDM/Vk2bgBl17yWuZxZNQIF0OUUuPZRKoDtqF2k4EtYbpyiG5/Dk7nqeK6kIJWPYldkOcBqjXjrUlmg==}
+  /@esbuild/linux-arm64@0.25.3:
+    resolution: {integrity: sha512-xCUgnNYhRD5bb1C1nqrDV1PfkwgbswTTBRbAd8aH5PhYzikdf/ddtsYyMXFfGSsb/6t6QaPSzxtbfAZr9uox4A==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [linux]
@@ -2607,17 +2039,8 @@ packages:
     dev: false
     optional: true
 
-  /@esbuild/linux-arm@0.17.19:
-    resolution: {integrity: sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@esbuild/linux-arm@0.25.0:
-    resolution: {integrity: sha512-vkB3IYj2IDo3g9xX7HqhPYxVkNQe8qTK55fraQyTzTX/fxaDtXiEnavv9geOsonh2Fd2RMB+i5cbhu2zMNWJwg==}
+  /@esbuild/linux-arm@0.25.3:
+    resolution: {integrity: sha512-dUOVmAUzuHy2ZOKIHIKHCm58HKzFqd+puLaS424h6I85GlSDRZIA5ycBixb3mFgM0Jdh+ZOSB6KptX30DD8YOQ==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [linux]
@@ -2625,17 +2048,8 @@ packages:
     dev: false
     optional: true
 
-  /@esbuild/linux-ia32@0.17.19:
-    resolution: {integrity: sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@esbuild/linux-ia32@0.25.0:
-    resolution: {integrity: sha512-43ET5bHbphBegyeqLb7I1eYn2P/JYGNmzzdidq/w0T8E2SsYL1U6un2NFROFRg1JZLTzdCoRomg8Rvf9M6W6Gg==}
+  /@esbuild/linux-ia32@0.25.3:
+    resolution: {integrity: sha512-yplPOpczHOO4jTYKmuYuANI3WhvIPSVANGcNUeMlxH4twz/TeXuzEP41tGKNGWJjuMhotpGabeFYGAOU2ummBw==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [linux]
@@ -2643,17 +2057,8 @@ packages:
     dev: false
     optional: true
 
-  /@esbuild/linux-loong64@0.17.19:
-    resolution: {integrity: sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==}
-    engines: {node: '>=12'}
-    cpu: [loong64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@esbuild/linux-loong64@0.25.0:
-    resolution: {integrity: sha512-fC95c/xyNFueMhClxJmeRIj2yrSMdDfmqJnyOY4ZqsALkDrrKJfIg5NTMSzVBr5YW1jf+l7/cndBfP3MSDpoHw==}
+  /@esbuild/linux-loong64@0.25.3:
+    resolution: {integrity: sha512-P4BLP5/fjyihmXCELRGrLd793q/lBtKMQl8ARGpDxgzgIKJDRJ/u4r1A/HgpBpKpKZelGct2PGI4T+axcedf6g==}
     engines: {node: '>=18'}
     cpu: [loong64]
     os: [linux]
@@ -2661,17 +2066,8 @@ packages:
     dev: false
     optional: true
 
-  /@esbuild/linux-mips64el@0.17.19:
-    resolution: {integrity: sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==}
-    engines: {node: '>=12'}
-    cpu: [mips64el]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@esbuild/linux-mips64el@0.25.0:
-    resolution: {integrity: sha512-nkAMFju7KDW73T1DdH7glcyIptm95a7Le8irTQNO/qtkoyypZAnjchQgooFUDQhNAy4iu08N79W4T4pMBwhPwQ==}
+  /@esbuild/linux-mips64el@0.25.3:
+    resolution: {integrity: sha512-eRAOV2ODpu6P5divMEMa26RRqb2yUoYsuQQOuFUexUoQndm4MdpXXDBbUoKIc0iPa4aCO7gIhtnYomkn2x+bag==}
     engines: {node: '>=18'}
     cpu: [mips64el]
     os: [linux]
@@ -2679,17 +2075,8 @@ packages:
     dev: false
     optional: true
 
-  /@esbuild/linux-ppc64@0.17.19:
-    resolution: {integrity: sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@esbuild/linux-ppc64@0.25.0:
-    resolution: {integrity: sha512-NhyOejdhRGS8Iwv+KKR2zTq2PpysF9XqY+Zk77vQHqNbo/PwZCzB5/h7VGuREZm1fixhs4Q/qWRSi5zmAiO4Fw==}
+  /@esbuild/linux-ppc64@0.25.3:
+    resolution: {integrity: sha512-ZC4jV2p7VbzTlnl8nZKLcBkfzIf4Yad1SJM4ZMKYnJqZFD4rTI+pBG65u8ev4jk3/MPwY9DvGn50wi3uhdaghg==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [linux]
@@ -2697,17 +2084,8 @@ packages:
     dev: false
     optional: true
 
-  /@esbuild/linux-riscv64@0.17.19:
-    resolution: {integrity: sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==}
-    engines: {node: '>=12'}
-    cpu: [riscv64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@esbuild/linux-riscv64@0.25.0:
-    resolution: {integrity: sha512-5S/rbP5OY+GHLC5qXp1y/Mx//e92L1YDqkiBbO9TQOvuFXM+iDqUNG5XopAnXoRH3FjIUDkeGcY1cgNvnXp/kA==}
+  /@esbuild/linux-riscv64@0.25.3:
+    resolution: {integrity: sha512-LDDODcFzNtECTrUUbVCs6j9/bDVqy7DDRsuIXJg6so+mFksgwG7ZVnTruYi5V+z3eE5y+BJZw7VvUadkbfg7QA==}
     engines: {node: '>=18'}
     cpu: [riscv64]
     os: [linux]
@@ -2715,17 +2093,8 @@ packages:
     dev: false
     optional: true
 
-  /@esbuild/linux-s390x@0.17.19:
-    resolution: {integrity: sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==}
-    engines: {node: '>=12'}
-    cpu: [s390x]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@esbuild/linux-s390x@0.25.0:
-    resolution: {integrity: sha512-XM2BFsEBz0Fw37V0zU4CXfcfuACMrppsMFKdYY2WuTS3yi8O1nFOhil/xhKTmE1nPmVyvQJjJivgDT+xh8pXJA==}
+  /@esbuild/linux-s390x@0.25.3:
+    resolution: {integrity: sha512-s+w/NOY2k0yC2p9SLen+ymflgcpRkvwwa02fqmAwhBRI3SC12uiS10edHHXlVWwfAagYSY5UpmT/zISXPMW3tQ==}
     engines: {node: '>=18'}
     cpu: [s390x]
     os: [linux]
@@ -2733,17 +2102,8 @@ packages:
     dev: false
     optional: true
 
-  /@esbuild/linux-x64@0.17.19:
-    resolution: {integrity: sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@esbuild/linux-x64@0.25.0:
-    resolution: {integrity: sha512-9yl91rHw/cpwMCNytUDxwj2XjFpxML0y9HAOH9pNVQDpQrBxHy01Dx+vaMu0N1CKa/RzBD2hB4u//nfc+Sd3Cw==}
+  /@esbuild/linux-x64@0.25.3:
+    resolution: {integrity: sha512-nQHDz4pXjSDC6UfOE1Fw9Q8d6GCAd9KdvMZpfVGWSJztYCarRgSDfOVBY5xwhQXseiyxapkiSJi/5/ja8mRFFA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [linux]
@@ -2751,8 +2111,8 @@ packages:
     dev: false
     optional: true
 
-  /@esbuild/netbsd-arm64@0.25.0:
-    resolution: {integrity: sha512-RuG4PSMPFfrkH6UwCAqBzauBWTygTvb1nxWasEJooGSJ/NwRw7b2HOwyRTQIU97Hq37l3npXoZGYMy3b3xYvPw==}
+  /@esbuild/netbsd-arm64@0.25.3:
+    resolution: {integrity: sha512-1QaLtOWq0mzK6tzzp0jRN3eccmN3hezey7mhLnzC6oNlJoUJz4nym5ZD7mDnS/LZQgkrhEbEiTn515lPeLpgWA==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [netbsd]
@@ -2760,17 +2120,8 @@ packages:
     dev: false
     optional: true
 
-  /@esbuild/netbsd-x64@0.17.19:
-    resolution: {integrity: sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [netbsd]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@esbuild/netbsd-x64@0.25.0:
-    resolution: {integrity: sha512-jl+qisSB5jk01N5f7sPCsBENCOlPiS/xptD5yxOx2oqQfyourJwIKLRA2yqWdifj3owQZCL2sn6o08dBzZGQzA==}
+  /@esbuild/netbsd-x64@0.25.3:
+    resolution: {integrity: sha512-i5Hm68HXHdgv8wkrt+10Bc50zM0/eonPb/a/OFVfB6Qvpiirco5gBA5bz7S2SHuU+Y4LWn/zehzNX14Sp4r27g==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
@@ -2778,8 +2129,8 @@ packages:
     dev: false
     optional: true
 
-  /@esbuild/openbsd-arm64@0.25.0:
-    resolution: {integrity: sha512-21sUNbq2r84YE+SJDfaQRvdgznTD8Xc0oc3p3iW/a1EVWeNj/SdUCbm5U0itZPQYRuRTW20fPMWMpcrciH2EJw==}
+  /@esbuild/openbsd-arm64@0.25.3:
+    resolution: {integrity: sha512-zGAVApJEYTbOC6H/3QBr2mq3upG/LBEXr85/pTtKiv2IXcgKV0RT0QA/hSXZqSvLEpXeIxah7LczB4lkiYhTAQ==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openbsd]
@@ -2787,17 +2138,8 @@ packages:
     dev: false
     optional: true
 
-  /@esbuild/openbsd-x64@0.17.19:
-    resolution: {integrity: sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [openbsd]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@esbuild/openbsd-x64@0.25.0:
-    resolution: {integrity: sha512-2gwwriSMPcCFRlPlKx3zLQhfN/2WjJ2NSlg5TKLQOJdV0mSxIcYNTMhk3H3ulL/cak+Xj0lY1Ym9ysDV1igceg==}
+  /@esbuild/openbsd-x64@0.25.3:
+    resolution: {integrity: sha512-fpqctI45NnCIDKBH5AXQBsD0NDPbEFczK98hk/aa6HJxbl+UtLkJV2+Bvy5hLSLk3LHmqt0NTkKNso1A9y1a4w==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [openbsd]
@@ -2805,17 +2147,8 @@ packages:
     dev: false
     optional: true
 
-  /@esbuild/sunos-x64@0.17.19:
-    resolution: {integrity: sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [sunos]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@esbuild/sunos-x64@0.25.0:
-    resolution: {integrity: sha512-bxI7ThgLzPrPz484/S9jLlvUAHYMzy6I0XiU1ZMeAEOBcS0VePBFxh1JjTQt3Xiat5b6Oh4x7UC7IwKQKIJRIg==}
+  /@esbuild/sunos-x64@0.25.3:
+    resolution: {integrity: sha512-ROJhm7d8bk9dMCUZjkS8fgzsPAZEjtRJqCAmVgB0gMrvG7hfmPmz9k1rwO4jSiblFjYmNvbECL9uhaPzONMfgA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [sunos]
@@ -2823,17 +2156,8 @@ packages:
     dev: false
     optional: true
 
-  /@esbuild/win32-arm64@0.17.19:
-    resolution: {integrity: sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@esbuild/win32-arm64@0.25.0:
-    resolution: {integrity: sha512-ZUAc2YK6JW89xTbXvftxdnYy3m4iHIkDtK3CLce8wg8M2L+YZhIvO1DKpxrd0Yr59AeNNkTiic9YLf6FTtXWMw==}
+  /@esbuild/win32-arm64@0.25.3:
+    resolution: {integrity: sha512-YWcow8peiHpNBiIXHwaswPnAXLsLVygFwCB3A7Bh5jRkIBFWHGmNQ48AlX4xDvQNoMZlPYzjVOQDYEzWCqufMQ==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [win32]
@@ -2841,17 +2165,8 @@ packages:
     dev: false
     optional: true
 
-  /@esbuild/win32-ia32@0.17.19:
-    resolution: {integrity: sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@esbuild/win32-ia32@0.25.0:
-    resolution: {integrity: sha512-eSNxISBu8XweVEWG31/JzjkIGbGIJN/TrRoiSVZwZ6pkC6VX4Im/WV2cz559/TXLcYbcrDN8JtKgd9DJVIo8GA==}
+  /@esbuild/win32-ia32@0.25.3:
+    resolution: {integrity: sha512-qspTZOIGoXVS4DpNqUYUs9UxVb04khS1Degaw/MnfMe7goQ3lTfQ13Vw4qY/Nj0979BGvMRpAYbs/BAxEvU8ew==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [win32]
@@ -2859,17 +2174,8 @@ packages:
     dev: false
     optional: true
 
-  /@esbuild/win32-x64@0.17.19:
-    resolution: {integrity: sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@esbuild/win32-x64@0.25.0:
-    resolution: {integrity: sha512-ZENoHJBxA20C2zFzh6AI4fT6RraMzjYw4xKWemRTRmRVtN9c5DcH9r/f2ihEkMjOW5eGgrwCslG/+Y/3bL+DHQ==}
+  /@esbuild/win32-x64@0.25.3:
+    resolution: {integrity: sha512-ICgUR+kPimx0vvRzf+N/7L7tVSQeE3BYY+NhHRHXS1kBuPO7z2+7ea2HbhDyZdTephgvNvKrlDDKUexuCVBVvg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [win32]
@@ -2877,8 +2183,8 @@ packages:
     dev: false
     optional: true
 
-  /@eslint-community/eslint-utils@4.4.1(eslint@8.57.1):
-    resolution: {integrity: sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==}
+  /@eslint-community/eslint-utils@4.6.1(eslint@8.57.1):
+    resolution: {integrity: sha512-KTsJMmobmbrFLe3LDh0PC2FXpcSYJt/MLjlkh/9LEnmKYLSYmT/0EW9JWANjeoemiuZrmogti0tW5Ch+qNUYDw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
@@ -2897,11 +2203,11 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.7
+      debug: 4.4.0
       espree: 9.6.1
       globals: 13.24.0
       ignore: 5.3.2
-      import-fresh: 3.3.0
+      import-fresh: 3.3.1
       js-yaml: 4.1.0
       minimatch: 3.1.2
       strip-json-comments: 3.1.1
@@ -2914,28 +2220,28 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@floating-ui/core@1.6.8:
-    resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==}
+  /@floating-ui/core@1.6.9:
+    resolution: {integrity: sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==}
     dependencies:
-      '@floating-ui/utils': 0.2.8
+      '@floating-ui/utils': 0.2.9
     dev: false
 
-  /@floating-ui/dom@1.6.12:
-    resolution: {integrity: sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==}
+  /@floating-ui/dom@1.6.13:
+    resolution: {integrity: sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==}
     dependencies:
-      '@floating-ui/core': 1.6.8
-      '@floating-ui/utils': 0.2.8
+      '@floating-ui/core': 1.6.9
+      '@floating-ui/utils': 0.2.9
     dev: false
 
-  /@floating-ui/react-dom@2.1.2(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614):
+  /@floating-ui/react-dom@2.1.2(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
     dependencies:
-      '@floating-ui/dom': 1.6.12
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
+      '@floating-ui/dom': 1.6.13
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
   /@floating-ui/react-dom@2.1.2(react-dom@19.1.0)(react@19.1.0):
@@ -2944,21 +2250,21 @@ packages:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
     dependencies:
-      '@floating-ui/dom': 1.6.12
+      '@floating-ui/dom': 1.6.13
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@floating-ui/utils@0.2.8:
-    resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
+  /@floating-ui/utils@0.2.9:
+    resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
     dev: false
 
-  /@hookform/resolvers@3.9.1(react-hook-form@7.53.1):
-    resolution: {integrity: sha512-ud2HqmGBM0P0IABqoskKWI6PEf6ZDDBZkFqe2Vnl+mTHCEHzr3ISjjZyCwTjC/qpL25JC9aIDkloQejvMeq0ug==}
+  /@hookform/resolvers@3.10.0(react-hook-form@7.56.1):
+    resolution: {integrity: sha512-79Dv+3mDF7i+2ajj7SkypSKHhl1cbln1OGavqrsF7p6mbUv11xpqpacPsGDCTRvCSjEEIez2ef1NveSVL3b0Ag==}
     peerDependencies:
       react-hook-form: ^7.0.0
     dependencies:
-      react-hook-form: 7.53.1(react@19.1.0)
+      react-hook-form: 7.56.1(react@19.1.0)
     dev: false
 
   /@humanwhocodes/config-array@0.13.0:
@@ -2967,7 +2273,7 @@ packages:
     deprecated: Use @eslint/config-array instead
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
-      debug: 4.3.7
+      debug: 4.4.0
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -2983,17 +2289,6 @@ packages:
     deprecated: Use @eslint/object-schema instead
     dev: true
 
-  /@img/sharp-darwin-arm64@0.33.5:
-    resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-darwin-arm64': 1.0.4
-    dev: false
-    optional: true
-
   /@img/sharp-darwin-arm64@0.34.1:
     resolution: {integrity: sha512-pn44xgBtgpEbZsu+lWf2KNb6OAf70X68k+yk69Ic2Xz11zHR/w24/U49XT7AeRwJ0Px+mhALhU5LPci1Aymk7A==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -3005,17 +2300,6 @@ packages:
     dev: false
     optional: true
 
-  /@img/sharp-darwin-x64@0.33.5:
-    resolution: {integrity: sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-darwin-x64': 1.0.4
-    dev: false
-    optional: true
-
   /@img/sharp-darwin-x64@0.34.1:
     resolution: {integrity: sha512-VfuYgG2r8BpYiOUN+BfYeFo69nP/MIwAtSJ7/Zpxc5QF3KS22z8Pvg3FkrSFJBPNQ7mmcUcYQFBmEQp7eu1F8Q==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -3027,14 +2311,6 @@ packages:
     dev: false
     optional: true
 
-  /@img/sharp-libvips-darwin-arm64@1.0.4:
-    resolution: {integrity: sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
   /@img/sharp-libvips-darwin-arm64@1.1.0:
     resolution: {integrity: sha512-HZ/JUmPwrJSoM4DIQPv/BfNh9yrOA8tlBbqbLz4JZ5uew2+o22Ik+tHQJcih7QJuSa0zo5coHTfD5J8inqj9DA==}
     cpu: [arm64]
@@ -3043,14 +2319,6 @@ packages:
     dev: false
     optional: true
 
-  /@img/sharp-libvips-darwin-x64@1.0.4:
-    resolution: {integrity: sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
   /@img/sharp-libvips-darwin-x64@1.1.0:
     resolution: {integrity: sha512-Xzc2ToEmHN+hfvsl9wja0RlnXEgpKNmftriQp6XzY/RaSfwD9th+MSh0WQKzUreLKKINb3afirxW7A0fz2YWuQ==}
     cpu: [x64]
@@ -3059,14 +2327,6 @@ packages:
     dev: false
     optional: true
 
-  /@img/sharp-libvips-linux-arm64@1.0.4:
-    resolution: {integrity: sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
   /@img/sharp-libvips-linux-arm64@1.1.0:
     resolution: {integrity: sha512-IVfGJa7gjChDET1dK9SekxFFdflarnUB8PwW8aGwEoF3oAsSDuNUTYS+SKDOyOJxQyDC1aPFMuRYLoDInyV9Ew==}
     cpu: [arm64]
@@ -3075,14 +2335,6 @@ packages:
     dev: false
     optional: true
 
-  /@img/sharp-libvips-linux-arm@1.0.5:
-    resolution: {integrity: sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
   /@img/sharp-libvips-linux-arm@1.1.0:
     resolution: {integrity: sha512-s8BAd0lwUIvYCJyRdFqvsj+BJIpDBSxs6ivrOPm/R7piTs5UIwY5OjXrP2bqXC9/moGsyRa37eYWYCOGVXxVrA==}
     cpu: [arm]
@@ -3099,14 +2351,6 @@ packages:
     dev: false
     optional: true
 
-  /@img/sharp-libvips-linux-s390x@1.0.4:
-    resolution: {integrity: sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==}
-    cpu: [s390x]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
   /@img/sharp-libvips-linux-s390x@1.1.0:
     resolution: {integrity: sha512-xukSwvhguw7COyzvmjydRb3x/09+21HykyapcZchiCUkTThEQEOMtBj9UhkaBRLuBrgLFzQ2wbxdeCCJW/jgJA==}
     cpu: [s390x]
@@ -3115,14 +2359,6 @@ packages:
     dev: false
     optional: true
 
-  /@img/sharp-libvips-linux-x64@1.0.4:
-    resolution: {integrity: sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
   /@img/sharp-libvips-linux-x64@1.1.0:
     resolution: {integrity: sha512-yRj2+reB8iMg9W5sULM3S74jVS7zqSzHG3Ol/twnAAkAhnGQnpjj6e4ayUz7V+FpKypwgs82xbRdYtchTTUB+Q==}
     cpu: [x64]
@@ -3131,14 +2367,6 @@ packages:
     dev: false
     optional: true
 
-  /@img/sharp-libvips-linuxmusl-arm64@1.0.4:
-    resolution: {integrity: sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
   /@img/sharp-libvips-linuxmusl-arm64@1.1.0:
     resolution: {integrity: sha512-jYZdG+whg0MDK+q2COKbYidaqW/WTz0cc1E+tMAusiDygrM4ypmSCjOJPmFTvHHJ8j/6cAGyeDWZOsK06tP33w==}
     cpu: [arm64]
@@ -3147,14 +2375,6 @@ packages:
     dev: false
     optional: true
 
-  /@img/sharp-libvips-linuxmusl-x64@1.0.4:
-    resolution: {integrity: sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
   /@img/sharp-libvips-linuxmusl-x64@1.1.0:
     resolution: {integrity: sha512-wK7SBdwrAiycjXdkPnGCPLjYb9lD4l6Ze2gSdAGVZrEL05AOUJESWU2lhlC+Ffn5/G+VKuSm6zzbQSzFX/P65A==}
     cpu: [x64]
@@ -3163,17 +2383,6 @@ packages:
     dev: false
     optional: true
 
-  /@img/sharp-linux-arm64@0.33.5:
-    resolution: {integrity: sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-linux-arm64': 1.0.4
-    dev: false
-    optional: true
-
   /@img/sharp-linux-arm64@0.34.1:
     resolution: {integrity: sha512-kX2c+vbvaXC6vly1RDf/IWNXxrlxLNpBVWkdpRq5Ka7OOKj6nr66etKy2IENf6FtOgklkg9ZdGpEu9kwdlcwOQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -3185,36 +2394,14 @@ packages:
     dev: false
     optional: true
 
-  /@img/sharp-linux-arm@0.33.5:
-    resolution: {integrity: sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-linux-arm': 1.0.5
-    dev: false
-    optional: true
-
   /@img/sharp-linux-arm@0.34.1:
     resolution: {integrity: sha512-anKiszvACti2sGy9CirTlNyk7BjjZPiML1jt2ZkTdcvpLU1YH6CXwRAZCA2UmRXnhiIftXQ7+Oh62Ji25W72jA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-linux-arm': 1.1.0
-    dev: false
-    optional: true
-
-  /@img/sharp-linux-s390x@0.33.5:
-    resolution: {integrity: sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [s390x]
+    cpu: [arm]
     os: [linux]
     requiresBuild: true
     optionalDependencies:
-      '@img/sharp-libvips-linux-s390x': 1.0.4
+      '@img/sharp-libvips-linux-arm': 1.1.0
     dev: false
     optional: true
 
@@ -3229,17 +2416,6 @@ packages:
     dev: false
     optional: true
 
-  /@img/sharp-linux-x64@0.33.5:
-    resolution: {integrity: sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-linux-x64': 1.0.4
-    dev: false
-    optional: true
-
   /@img/sharp-linux-x64@0.34.1:
     resolution: {integrity: sha512-wExv7SH9nmoBW3Wr2gvQopX1k8q2g5V5Iag8Zk6AVENsjwd+3adjwxtp3Dcu2QhOXr8W9NusBU6XcQUohBZ5MA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -3251,17 +2427,6 @@ packages:
     dev: false
     optional: true
 
-  /@img/sharp-linuxmusl-arm64@0.33.5:
-    resolution: {integrity: sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-arm64': 1.0.4
-    dev: false
-    optional: true
-
   /@img/sharp-linuxmusl-arm64@0.34.1:
     resolution: {integrity: sha512-DfvyxzHxw4WGdPiTF0SOHnm11Xv4aQexvqhRDAoD00MzHekAj9a/jADXeXYCDFH/DzYruwHbXU7uz+H+nWmSOQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -3273,17 +2438,6 @@ packages:
     dev: false
     optional: true
 
-  /@img/sharp-linuxmusl-x64@0.33.5:
-    resolution: {integrity: sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-x64': 1.0.4
-    dev: false
-    optional: true
-
   /@img/sharp-linuxmusl-x64@0.34.1:
     resolution: {integrity: sha512-pax/kTR407vNb9qaSIiWVnQplPcGU8LRIJpDT5o8PdAx5aAA7AS3X9PS8Isw1/WfqgQorPotjrZL3Pqh6C5EBg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -3295,32 +2449,13 @@ packages:
     dev: false
     optional: true
 
-  /@img/sharp-wasm32@0.33.5:
-    resolution: {integrity: sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [wasm32]
-    requiresBuild: true
-    dependencies:
-      '@emnapi/runtime': 1.4.1
-    dev: false
-    optional: true
-
   /@img/sharp-wasm32@0.34.1:
     resolution: {integrity: sha512-YDybQnYrLQfEpzGOQe7OKcyLUCML4YOXl428gOOzBgN6Gw0rv8dpsJ7PqTHxBnXnwXr8S1mYFSLSa727tpz0xg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [wasm32]
     requiresBuild: true
     dependencies:
-      '@emnapi/runtime': 1.4.1
-    dev: false
-    optional: true
-
-  /@img/sharp-win32-ia32@0.33.5:
-    resolution: {integrity: sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
+      '@emnapi/runtime': 1.4.3
     dev: false
     optional: true
 
@@ -3333,15 +2468,6 @@ packages:
     dev: false
     optional: true
 
-  /@img/sharp-win32-x64@0.33.5:
-    resolution: {integrity: sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
   /@img/sharp-win32-x64@0.34.1:
     resolution: {integrity: sha512-hw1iIAHpNE8q3uMIRCgGOeDoz9KtFNarFLQclLxr/LK1VBkj8nby18RjFvr6aP7USRYAjTZW6yisnBWMX571Tw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -3363,8 +2489,8 @@ packages:
       wrap-ansi-cjs: /wrap-ansi@7.0.0
     dev: false
 
-  /@jridgewell/gen-mapping@0.3.5:
-    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
+  /@jridgewell/gen-mapping@0.3.8:
+    resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
     engines: {node: '>=6.0.0'}
     dependencies:
       '@jridgewell/set-array': 1.2.1
@@ -3398,8 +2524,8 @@ packages:
     resolution: {integrity: sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==}
     dev: false
 
-  /@lezer/css@1.1.9:
-    resolution: {integrity: sha512-TYwgljcDv+YrV0MZFFvYFQHCfGgbPMR6nuqLabBdmZoFH3EP1gvw8t0vae326Ne3PszQkbXfVBjCnf3ZVCr0bA==}
+  /@lezer/css@1.1.11:
+    resolution: {integrity: sha512-FuAnusbLBl1SEAtfN8NdShxYJiESKw9LAFysfea1T96jD3ydBn12oYjaSG1a04BQRIUd93/0D8e5CV1cUMkmQg==}
     dependencies:
       '@lezer/common': 1.2.3
       '@lezer/highlight': 1.2.1
@@ -3420,16 +2546,8 @@ packages:
       '@lezer/lr': 1.4.2
     dev: false
 
-  /@lezer/javascript@1.4.19:
-    resolution: {integrity: sha512-j44kbR1QL26l6dMunZ1uhKBFteVGLVCBGNUD2sUaMnic+rbTviVuoK0CD1l9FTW31EueWvFFswCKMH7Z+M3JRA==}
-    dependencies:
-      '@lezer/common': 1.2.3
-      '@lezer/highlight': 1.2.1
-      '@lezer/lr': 1.4.2
-    dev: false
-
-  /@lezer/json@1.0.3:
-    resolution: {integrity: sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==}
+  /@lezer/javascript@1.5.1:
+    resolution: {integrity: sha512-ATOImjeVJuvgm3JQ/bpo2Tmv55HSScE2MTPnKRMRIPx2cLhHGyX2VnqpHhtIV1tVzIjZDbcWQm+NCTF40ggZVw==}
     dependencies:
       '@lezer/common': 1.2.3
       '@lezer/highlight': 1.2.1
@@ -3459,31 +2577,47 @@ packages:
     resolution: {integrity: sha512-9b8mPpKrfeGRuhFH5iO1iwCLeIIsV6+H1sRfxbkoGXIyQE2BTsPd9zqSqQJ+pv5sJ/hT5M1zvOFL02MnEezFug==}
     dev: true
 
-  /@monaco-editor/loader@1.4.0(monaco-editor@0.52.2):
-    resolution: {integrity: sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==}
+  /@monaco-editor/loader@1.5.0:
+    resolution: {integrity: sha512-hKoGSM+7aAc7eRTRjpqAZucPmoNOC4UUbknb/VNoTkEIkCPhqV8LfbsgM1webRM7S/z21eHEx9Fkwx8Z/C/+Xw==}
+    dependencies:
+      state-local: 1.0.7
+    dev: false
+
+  /@monaco-editor/react@4.7.0(monaco-editor@0.52.2)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==}
     peerDependencies:
-      monaco-editor: '>= 0.21.0 < 1'
+      monaco-editor: '>= 0.25.0 < 1'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
     dependencies:
+      '@monaco-editor/loader': 1.5.0
       monaco-editor: 0.52.2
-      state-local: 1.0.7
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@monaco-editor/react@4.6.0(monaco-editor@0.52.2)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==}
+  /@monaco-editor/react@4.7.0(monaco-editor@0.52.2)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==}
     peerDependencies:
       monaco-editor: '>= 0.25.0 < 1'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
     dependencies:
-      '@monaco-editor/loader': 1.4.0(monaco-editor@0.52.2)
+      '@monaco-editor/loader': 1.5.0
       monaco-editor: 0.52.2
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@next/env@15.2.1:
-    resolution: {integrity: sha512-JmY0qvnPuS2NCWOz2bbby3Pe0VzdAQ7XpEB6uLIHmtXNfAsAO0KLQLkuAoc42Bxbo3/jMC3dcn9cdf+piCcG2Q==}
-    dev: false
+  /@napi-rs/wasm-runtime@0.2.9:
+    resolution: {integrity: sha512-OKRBiajrrxB9ATokgEQoG87Z25c67pCpYcCwmXYX8PBftC9pBfN18gnm/fh1wurSLEKIAt+QRFLFCQISrb66Jg==}
+    requiresBuild: true
+    dependencies:
+      '@emnapi/core': 1.4.3
+      '@emnapi/runtime': 1.4.3
+      '@tybys/wasm-util': 0.9.0
+    dev: true
+    optional: true
 
   /@next/env@15.3.0:
     resolution: {integrity: sha512-6mDmHX24nWlHOlbwUiAOmMyY7KELimmi+ed8qWcJYjqXeC+G6JzPZ3QosOAfjNwgMIzwhXBiRiCgdh8axTTdTA==}
@@ -3495,15 +2629,6 @@ packages:
       fast-glob: 3.3.1
     dev: true
 
-  /@next/swc-darwin-arm64@15.2.1:
-    resolution: {integrity: sha512-aWXT+5KEREoy3K5AKtiKwioeblmOvFFjd+F3dVleLvvLiQ/mD//jOOuUcx5hzcO9ISSw4lrqtUPntTpK32uXXQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
   /@next/swc-darwin-arm64@15.3.0:
     resolution: {integrity: sha512-PDQcByT0ZfF2q7QR9d+PNj3wlNN4K6Q8JoHMwFyk252gWo4gKt7BF8Y2+KBgDjTFBETXZ/TkBEUY7NIIY7A/Kw==}
     engines: {node: '>= 10'}
@@ -3513,15 +2638,6 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-darwin-x64@15.2.1:
-    resolution: {integrity: sha512-E/w8ervu4fcG5SkLhvn1NE/2POuDCDEy5gFbfhmnYXkyONZR68qbUlJlZwuN82o7BrBVAw+tkR8nTIjGiMW1jQ==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
   /@next/swc-darwin-x64@15.3.0:
     resolution: {integrity: sha512-m+eO21yg80En8HJ5c49AOQpFDq+nP51nu88ZOMCorvw3g//8g1JSUsEiPSiFpJo1KCTQ+jm9H0hwXK49H/RmXg==}
     engines: {node: '>= 10'}
@@ -3531,15 +2647,6 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm64-gnu@15.2.1:
-    resolution: {integrity: sha512-gXDX5lIboebbjhiMT6kFgu4svQyjoSed6dHyjx5uZsjlvTwOAnZpn13w9XDaIMFFHw7K8CpBK7HfDKw0VZvUXQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
   /@next/swc-linux-arm64-gnu@15.3.0:
     resolution: {integrity: sha512-H0Kk04ZNzb6Aq/G6e0un4B3HekPnyy6D+eUBYPJv9Abx8KDYgNMWzKt4Qhj57HXV3sTTjsfc1Trc1SxuhQB+Tg==}
     engines: {node: '>= 10'}
@@ -3549,15 +2656,6 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm64-musl@15.2.1:
-    resolution: {integrity: sha512-3v0pF/adKZkBWfUffmB/ROa+QcNTrnmYG4/SS+r52HPwAK479XcWoES2I+7F7lcbqc7mTeVXrIvb4h6rR/iDKg==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
   /@next/swc-linux-arm64-musl@15.3.0:
     resolution: {integrity: sha512-k8GVkdMrh/+J9uIv/GpnHakzgDQhrprJ/FbGQvwWmstaeFG06nnAoZCJV+wO/bb603iKV1BXt4gHG+s2buJqZA==}
     engines: {node: '>= 10'}
@@ -3567,15 +2665,6 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-x64-gnu@15.2.1:
-    resolution: {integrity: sha512-RbsVq2iB6KFJRZ2cHrU67jLVLKeuOIhnQB05ygu5fCNgg8oTewxweJE8XlLV+Ii6Y6u4EHwETdUiRNXIAfpBww==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
   /@next/swc-linux-x64-gnu@15.3.0:
     resolution: {integrity: sha512-ZMQ9yzDEts/vkpFLRAqfYO1wSpIJGlQNK9gZ09PgyjBJUmg8F/bb8fw2EXKgEaHbCc4gmqMpDfh+T07qUphp9A==}
     engines: {node: '>= 10'}
@@ -3585,15 +2674,6 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-x64-musl@15.2.1:
-    resolution: {integrity: sha512-QHsMLAyAIu6/fWjHmkN/F78EFPKmhQlyX5C8pRIS2RwVA7z+t9cTb0IaYWC3EHLOTjsU7MNQW+n2xGXr11QPpg==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
   /@next/swc-linux-x64-musl@15.3.0:
     resolution: {integrity: sha512-RFwq5VKYTw9TMr4T3e5HRP6T4RiAzfDJ6XsxH8j/ZeYq2aLsBqCkFzwMI0FmnSsLaUbOb46Uov0VvN3UciHX5A==}
     engines: {node: '>= 10'}
@@ -3603,15 +2683,6 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-arm64-msvc@15.2.1:
-    resolution: {integrity: sha512-Gk42XZXo1cE89i3hPLa/9KZ8OuupTjkDmhLaMKFohjf9brOeZVEa3BQy1J9s9TWUqPhgAEbwv6B2+ciGfe54Vw==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
   /@next/swc-win32-arm64-msvc@15.3.0:
     resolution: {integrity: sha512-a7kUbqa/k09xPjfCl0RSVAvEjAkYBYxUzSVAzk2ptXiNEL+4bDBo9wNC43G/osLA/EOGzG4CuNRFnQyIHfkRgQ==}
     engines: {node: '>= 10'}
@@ -3621,15 +2692,6 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-x64-msvc@15.2.1:
-    resolution: {integrity: sha512-YjqXCl8QGhVlMR8uBftWk0iTmvtntr41PhG1kvzGp0sUP/5ehTM+cwx25hKE54J0CRnHYjSGjSH3gkHEaHIN9g==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
   /@next/swc-win32-x64-msvc@15.3.0:
     resolution: {integrity: sha512-vHUQS4YVGJPmpjn7r5lEZuMhK5UQBNBRSB+iGDvJjaNk649pTIcRluDWNb9siunyLLiu/LDPHfvxBtNamyuLTw==}
     engines: {node: '>= 10'}
@@ -3672,7 +2734,7 @@ packages:
     engines: {node: '>= 8'}
     dependencies:
       '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.17.1
+      fastq: 1.19.1
 
   /@nolyfill/is-core-module@1.0.39:
     resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
@@ -3685,16 +2747,12 @@ packages:
       react: ^18 || ^19
       react-dom: ^18 || ^19
     dependencies:
-      esm-env: 1.2.1
+      esm-env: 1.2.2
       number-flow: 0.4.2
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@one-ini/wasm@0.1.1:
-    resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
-    dev: false
-
   /@open-draft/deferred-promise@2.2.0:
     resolution: {integrity: sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==}
     dev: false
@@ -3706,37 +2764,33 @@ packages:
     dev: false
     optional: true
 
-  /@pkgr/core@0.1.1:
-    resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==}
+  /@pkgr/core@0.1.2:
+    resolution: {integrity: sha512-fdDH1LSGfZdTH2sxdpVMw31BanV28K/Gry0cVFxaNP77neJSkd82mM8ErPNYs9e+0O7SdHBLTDzDgwUuy18RnQ==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
     dev: true
 
-  /@radix-ui/number@1.1.0:
-    resolution: {integrity: sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==}
+  /@radix-ui/number@1.1.1:
+    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
     dev: false
 
   /@radix-ui/primitive@1.0.0:
     resolution: {integrity: sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==}
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
     dev: false
 
   /@radix-ui/primitive@1.0.1:
     resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==}
     dependencies:
-      '@babel/runtime': 7.26.0
-    dev: false
-
-  /@radix-ui/primitive@1.1.0:
-    resolution: {integrity: sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==}
+      '@babel/runtime': 7.27.0
     dev: false
 
-  /@radix-ui/primitive@1.1.1:
-    resolution: {integrity: sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==}
+  /@radix-ui/primitive@1.1.2:
+    resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
     dev: false
 
-  /@radix-ui/react-accordion@1.2.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-bg/l7l5QzUjgsh8kjwDFommzAshnUsuVMV5NM56QVCm+7ZckYdd9P/ExR8xG/Oup0OajVxNLaHJ1tb8mXk+nzQ==}
+  /@radix-ui/react-accordion@1.2.8(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-c7OKBvO36PfQIUGIjj1Wko0hH937pYFU2tR5zbIJDUsmTzHoZVHHt4bmb7OOJbzTaWJtVELKWojBHa7OcnUHmQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -3748,23 +2802,23 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-collapsible': 1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-collection': 1.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-id': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collapsible': 1.1.8(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-collection': 1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-alert-dialog@1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-eGSlLzPhKO+TErxkiGcCZGuvbVMnLA1MTnyBksGOeGRGkxHiiJUujsjmNTdWTm4iHVSRaUao9/4Ur671auMghQ==}
+  /@radix-ui/react-alert-dialog@1.1.11(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-4KfkwrFnAw3Y5Jeoq6G+JYSKW0JfIS3uDdFC/79Jw9AsMayZMizSSMxk1gkrolYXsa/WzbbDfOA7/D8N5D+l1g==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -3776,20 +2830,20 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-dialog': 1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-slot': 1.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-dialog': 1.1.11(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.0(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-arrow@1.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==}
+  /@radix-ui/react-arrow@1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-qz+fxrqgNxG0dYew5l7qR3c7wdgRu1XVUHGnGYX7rg5HM4p9SWaRmJwfgR3J0SgyUKayLmzQIun+N6rWRgiRKw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -3801,15 +2855,15 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-arrow@1.1.0(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==}
+  /@radix-ui/react-arrow@1.1.4(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-qz+fxrqgNxG0dYew5l7qR3c7wdgRu1XVUHGnGYX7rg5HM4p9SWaRmJwfgR3J0SgyUKayLmzQIun+N6rWRgiRKw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -3821,83 +2875,13 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/react-primitive': 2.0.0(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.0(react-dom@18.3.1)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@radix-ui/react-arrow@1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-G+KcpzXHq24iH0uGG/pF8LyzpFJYGD4RfLjCIBfGdSLXvjLHST31RUiRVrupIBMvIppMgSzQ6l66iAxl03tdlg==}
-    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
-    dependencies:
-      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@types/react': 19.1.1
-      '@types/react-dom': 19.1.2(@types/react@19.1.1)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    dev: false
-
-  /@radix-ui/react-avatar@1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-GaC7bXQZ5VgZvVvsJ5mu/AEbjYLnhhkoidOboC50Z6FFlLA03wG2ianUoH+zgDQ31/9gCF59bE4+2bBgTyMiig==}
-    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
-    dependencies:
-      '@radix-ui/react-context': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@types/react': 19.1.1
-      '@types/react-dom': 19.1.2(@types/react@19.1.1)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    dev: false
-
-  /@radix-ui/react-checkbox@1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-/i0fl686zaJbDQLNKrkCbMyDm6FQMt4jg323k7HuqitoANm9sE23Ql8yOK3Wusk34HSLKDChhMux05FnP6KUkw==}
-    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
-    dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-previous': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-size': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@types/react': 19.1.1
-      '@types/react-dom': 19.1.2(@types/react@19.1.1)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    dev: false
-
-  /@radix-ui/react-collapsible@1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-1///SnrfQHJEofLokyczERxQbWfCGQlQ2XsCZMucVs6it+lq9iw4vXy+uDn1edlb58cOZOWSldnfPAYcT4O/Yg==}
+  /@radix-ui/react-avatar@1.1.7(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-V7ODUt4mUoJTe3VUxZw6nfURxaPALVqmDQh501YmaQsk3D8AZQrOPRnfKn4H7JGDLBc0KqLhT94H79nV88ppNg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -3909,22 +2893,19 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-id': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-collapsible@1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-PliMB63vxz7vggcyq0IxNYk8vGDrLXVWw4+W4B8YnwI1s18x7YZYqlG9PLX7XxAJUi0g2DxP4XKJMFHh/iVh9A==}
+  /@radix-ui/react-checkbox@1.2.3(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-pHVzDYsnaDmBlAuwim45y3soIN8H4R7KbkSVirGhXO+R/kO2OLCe0eucUEbddaTcdMHHdzcIGHtZSMSQlA+apw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -3936,22 +2917,22 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-id': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-collection@1.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==}
+  /@radix-ui/react-collapsible@1.1.8(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-hxEsLvK9WxIAPyxdDRULL4hcaSjMZCfP7fHB0Z1uUnDoDBat1Zh46hwYfa69DeZAbJrPckjf0AGAtEZyvDyJbw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -3963,18 +2944,22 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-slot': 1.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-collection@1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-9z54IEKRxIa9VityapoEYMuByaG42iSy1ZXlY2KcuLSEtq8x4987/N6m15ppoMffgZX72gER2uHe1D9Y6Unlcw==}
+  /@radix-ui/react-collection@1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-cv4vSf7HttqXilDnAnvINd53OTl1/bjUYVZrkFnA7nwmY9Ob2POUy0WY0sfqBAe1s5FyKsyceQlqiEGPYNTadg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -3986,18 +2971,18 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-slot': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.0(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-collection@1.1.2(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-9z54IEKRxIa9VityapoEYMuByaG42iSy1ZXlY2KcuLSEtq8x4987/N6m15ppoMffgZX72gER2uHe1D9Y6Unlcw==}
+  /@radix-ui/react-collection@1.1.4(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-cv4vSf7HttqXilDnAnvINd53OTl1/bjUYVZrkFnA7nwmY9Ob2POUy0WY0sfqBAe1s5FyKsyceQlqiEGPYNTadg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -4009,10 +2994,10 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.1(react@18.3.1)
-      '@radix-ui/react-context': 1.1.1(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.2(react-dom@18.3.1)(react@18.3.1)
-      '@radix-ui/react-slot': 1.1.2(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.0(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.0(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     dev: false
@@ -4022,7 +3007,7 @@ packages:
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       react: 18.3.1
     dev: false
 
@@ -4035,7 +3020,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@types/react': 19.1.1
       react: 19.1.0
     dev: false
@@ -4049,37 +3034,12 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
-      react: 18.3.1
-    dev: false
-
-  /@radix-ui/react-compose-refs@1.1.0(@types/react@19.1.1)(react@19.1.0):
-    resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@types/react': 19.1.1
-      react: 19.1.0
-    dev: false
-
-  /@radix-ui/react-compose-refs@1.1.0(react@18.3.1):
-    resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
+      '@babel/runtime': 7.27.0
       react: 18.3.1
     dev: false
 
-  /@radix-ui/react-compose-refs@1.1.1(@types/react@19.1.1)(react@19.1.0):
-    resolution: {integrity: sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==}
+  /@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.1)(react@19.1.0):
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -4091,8 +3051,8 @@ packages:
       react: 19.1.0
     dev: false
 
-  /@radix-ui/react-compose-refs@1.1.1(react@18.3.1):
-    resolution: {integrity: sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==}
+  /@radix-ui/react-compose-refs@1.1.2(react@18.3.1):
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -4103,8 +3063,8 @@ packages:
       react: 18.3.1
     dev: false
 
-  /@radix-ui/react-context-menu@2.2.6(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-aUP99QZ3VU84NPsHeaFt4cQUNgJqFsLLOt/RbbWXszZ6MP0DpDyjkFZORr4RpAEx3sUBk+Kc8h13yGtC5Qw8dg==}
+  /@radix-ui/react-context-menu@2.2.12(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-5UFKuTMX8F2/KjHvyqu9IYT8bEtDSCJwwIx1PghBo4jh9S6jJVsceq9xIjqsOVcxsynGwV5eaqPE3n/Cu+DrSA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -4116,12 +3076,12 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-context': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-menu': 2.1.6(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-menu': 2.1.12(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
@@ -4133,7 +3093,7 @@ packages:
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       react: 18.3.1
     dev: false
 
@@ -4146,7 +3106,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@types/react': 19.1.1
       react: 19.1.0
     dev: false
@@ -4160,37 +3120,12 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
-      react: 18.3.1
-    dev: false
-
-  /@radix-ui/react-context@1.1.0(@types/react@19.1.1)(react@19.1.0):
-    resolution: {integrity: sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@types/react': 19.1.1
-      react: 19.1.0
-    dev: false
-
-  /@radix-ui/react-context@1.1.0(react@18.3.1):
-    resolution: {integrity: sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
+      '@babel/runtime': 7.27.0
       react: 18.3.1
     dev: false
 
-  /@radix-ui/react-context@1.1.1(@types/react@19.1.1)(react@19.1.0):
-    resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==}
+  /@radix-ui/react-context@1.1.2(@types/react@19.1.1)(react@19.1.0):
+    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -4202,8 +3137,8 @@ packages:
       react: 19.1.0
     dev: false
 
-  /@radix-ui/react-context@1.1.1(react@18.3.1):
-    resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==}
+  /@radix-ui/react-context@1.1.2(react@18.3.1):
+    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -4220,7 +3155,7 @@ packages:
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/primitive': 1.0.0
       '@radix-ui/react-compose-refs': 1.0.0(react@18.3.1)
       '@radix-ui/react-context': 1.0.0(react@18.3.1)
@@ -4254,7 +3189,7 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(react@18.3.1)
       '@radix-ui/react-context': 1.0.1(react@18.3.1)
@@ -4286,7 +3221,7 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@19.1.1)(react@19.1.0)
       '@radix-ui/react-context': 1.0.1(@types/react@19.1.1)(react@19.1.0)
@@ -4307,8 +3242,8 @@ packages:
       react-remove-scroll: 2.5.5(@types/react@19.1.1)(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-dialog@1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==}
+  /@radix-ui/react-dialog@1.1.11(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-yI7S1ipkP5/+99qhSI6nthfo/tR6bL6Zgxi/+1UO6qPa6UeM6nlafWcQ65vB4rU2XjgjMfMhI3k9Y5MztA62VQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -4320,28 +3255,28 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-dismissable-layer': 1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-focus-guards': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-focus-scope': 1.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-id': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-portal': 1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-slot': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.7(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-focus-scope': 1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.6(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       aria-hidden: 1.2.4
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
-      react-remove-scroll: 2.6.0(@types/react@19.1.1)(react@19.1.0)
+      react-remove-scroll: 2.6.3(@types/react@19.1.1)(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-direction@1.1.0(@types/react@19.1.1)(react@19.1.0):
-    resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==}
+  /@radix-ui/react-direction@1.1.1(@types/react@19.1.1)(react@19.1.0):
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -4353,8 +3288,8 @@ packages:
       react: 19.1.0
     dev: false
 
-  /@radix-ui/react-direction@1.1.0(react@18.3.1):
-    resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==}
+  /@radix-ui/react-direction@1.1.1(react@18.3.1):
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -4371,7 +3306,7 @@ packages:
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/primitive': 1.0.0
       '@radix-ui/react-compose-refs': 1.0.0(react@18.3.1)
       '@radix-ui/react-primitive': 1.0.0(react-dom@18.3.1)(react@18.3.1)
@@ -4394,7 +3329,7 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(react@18.3.1)
       '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
@@ -4417,7 +3352,7 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@19.1.1)(react@19.1.0)
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
@@ -4429,8 +3364,8 @@ packages:
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-dismissable-layer@1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==}
+  /@radix-ui/react-dismissable-layer@1.1.7(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-j5+WBUdhccJsmH5/H0K6RncjDtoALSEr6jbkaZu+bjw6hOPOhHycr6vEUujl+HBK8kjUfWcoCJXxP6e4lUlMZw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -4442,19 +3377,19 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-escape-keydown': 1.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-dismissable-layer@1.1.1(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==}
+  /@radix-ui/react-dismissable-layer@1.1.7(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-j5+WBUdhccJsmH5/H0K6RncjDtoALSEr6jbkaZu+bjw6hOPOhHycr6vEUujl+HBK8kjUfWcoCJXxP6e4lUlMZw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -4466,41 +3401,17 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-compose-refs': 1.1.0(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.0(react-dom@18.3.1)(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.1.0(react@18.3.1)
-      '@radix-ui/react-use-escape-keydown': 1.1.0(react@18.3.1)
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.0(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(react@18.3.1)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@radix-ui/react-dismissable-layer@1.1.5(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==}
-    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
-    dependencies:
-      '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-escape-keydown': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@types/react': 19.1.1
-      '@types/react-dom': 19.1.2(@types/react@19.1.1)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    dev: false
-
-  /@radix-ui/react-dropdown-menu@2.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-GVZMR+eqK8/Kes0a36Qrv+i20bAPXSn8rCBTHx30w+3ECnR5o3xixAlqcVaYvLeyKUsm0aqyhWfmUcqufM8nYA==}
+  /@radix-ui/react-dropdown-menu@2.1.12(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-VJoMs+BWWE7YhzEQyVwvF9n22Eiyr83HotCVrMQzla/OwRovXCgah7AcaEr4hMNj4gJxSdtIbcHGvmJXOoJVHA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -4512,13 +3423,13 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-id': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-menu': 2.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-menu': 2.1.12(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
@@ -4530,7 +3441,7 @@ packages:
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       react: 18.3.1
     dev: false
 
@@ -4543,7 +3454,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@types/react': 19.1.1
       react: 19.1.0
     dev: false
@@ -4557,12 +3468,12 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       react: 18.3.1
     dev: false
 
-  /@radix-ui/react-focus-guards@1.1.1(@types/react@19.1.1)(react@19.1.0):
-    resolution: {integrity: sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==}
+  /@radix-ui/react-focus-guards@1.1.2(@types/react@19.1.1)(react@19.1.0):
+    resolution: {integrity: sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -4574,8 +3485,8 @@ packages:
       react: 19.1.0
     dev: false
 
-  /@radix-ui/react-focus-guards@1.1.1(react@18.3.1):
-    resolution: {integrity: sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==}
+  /@radix-ui/react-focus-guards@1.1.2(react@18.3.1):
+    resolution: {integrity: sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -4592,7 +3503,7 @@ packages:
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/react-compose-refs': 1.0.0(react@18.3.1)
       '@radix-ui/react-primitive': 1.0.0(react-dom@18.3.1)(react@18.3.1)
       '@radix-ui/react-use-callback-ref': 1.0.0(react@18.3.1)
@@ -4613,7 +3524,7 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/react-compose-refs': 1.0.1(react@18.3.1)
       '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
       '@radix-ui/react-use-callback-ref': 1.0.1(react@18.3.1)
@@ -4634,7 +3545,7 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@19.1.1)(react@19.1.0)
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@19.1.1)(react@19.1.0)
@@ -4644,8 +3555,8 @@ packages:
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-focus-scope@1.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==}
+  /@radix-ui/react-focus-scope@1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-r2annK27lIW5w9Ho5NyQgqs0MmgZSTIKXWpVCJaLC1q2kZrZkcqnmHkCHMEmv8XLvsLlurKMPT+kbKkRkm/xVA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -4657,37 +3568,17 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    dev: false
-
-  /@radix-ui/react-focus-scope@1.1.0(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==}
-    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
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.0(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.0(react-dom@18.3.1)(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.1.0(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-focus-scope@1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-zxwE80FCU7lcXUGWkdt6XpTTCKPitG1XKOwViTxHVKIJhZl9MvIl2dVHeZENCWD9+EdWv05wlaEkRXUykU27RA==}
+  /@radix-ui/react-focus-scope@1.1.4(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-r2annK27lIW5w9Ho5NyQgqs0MmgZSTIKXWpVCJaLC1q2kZrZkcqnmHkCHMEmv8XLvsLlurKMPT+kbKkRkm/xVA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -4699,17 +3590,15 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@types/react': 19.1.1
-      '@types/react-dom': 19.1.2(@types/react@19.1.1)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.0(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@radix-ui/react-hover-card@1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-Y5w0qGhysvmqsIy6nQxaPa6mXNKznfoGjOfBgzOjocLxr2XlSjqBMYQQL+FfyogsMuX+m8cZyQGYhJxvxUzO4w==}
+  /@radix-ui/react-hover-card@1.1.11(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-q9h9grUpGZKR3MNhtVCLVnPGmx1YnzBgGR+O40mhSNGsUnkR+LChVH8c7FB0mkS+oudhd8KAkZGTJPJCjdAPIg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -4721,25 +3610,25 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-dismissable-layer': 1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-popper': 1.2.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-portal': 1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.7(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-popper': 1.2.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.6(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-icons@1.3.0(react@19.1.0):
-    resolution: {integrity: sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==}
+  /@radix-ui/react-icons@1.3.2(react@19.1.0):
+    resolution: {integrity: sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==}
     peerDependencies:
-      react: ^16.x || ^17.x || ^18.x
+      react: ^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc
     dependencies:
       react: 19.1.0
     dev: false
@@ -4749,7 +3638,7 @@ packages:
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/react-use-layout-effect': 1.0.0(react@18.3.1)
       react: 18.3.1
     dev: false
@@ -4763,7 +3652,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       react: 19.1.0
@@ -4778,13 +3667,13 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/react-use-layout-effect': 1.0.1(react@18.3.1)
       react: 18.3.1
     dev: false
 
-  /@radix-ui/react-id@1.1.0(@types/react@19.1.1)(react@19.1.0):
-    resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==}
+  /@radix-ui/react-id@1.1.1(@types/react@19.1.1)(react@19.1.0):
+    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -4792,13 +3681,13 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       react: 19.1.0
     dev: false
 
-  /@radix-ui/react-id@1.1.0(react@18.3.1):
-    resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==}
+  /@radix-ui/react-id@1.1.1(react@18.3.1):
+    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -4806,32 +3695,12 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.0(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(react@18.3.1)
       react: 18.3.1
     dev: false
 
-  /@radix-ui/react-label@2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==}
-    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
-    dependencies:
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@types/react': 19.1.1
-      '@types/react-dom': 19.1.2(@types/react@19.1.1)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    dev: false
-
-  /@radix-ui/react-menu@2.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-lZ0R4qR2Al6fZ4yCCZzu/ReTFrylHFxIqy7OezIpWF4bL0o9biKo0pFIvkaew3TyZ9Fy5gYVrR5zCGZBVbO1zg==}
+  /@radix-ui/react-label@2.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-wy3dqizZnZVV4ja0FNnUhIWNwWdoldXrneEyUcVtLYDAt8ovGS4ridtMAOGgXBBIfggL4BOveVWsjXDORdGEQg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -4843,32 +3712,15 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-collection': 1.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-dismissable-layer': 1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-focus-guards': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-focus-scope': 1.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-id': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-popper': 1.2.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-portal': 1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-roving-focus': 1.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-slot': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
-      aria-hidden: 1.2.4
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
-      react-remove-scroll: 2.6.0(@types/react@19.1.1)(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-menu@2.1.6(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-tBBb5CXDJW3t2mo9WlO7r6GTmWV0F0uzHZVFmlRmYpiSK1CDU5IKojP1pm7oknpBOrFZx/YgBRW9oorPO2S/Lg==}
+  /@radix-ui/react-menu@2.1.12(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-+qYq6LfbiGo97Zz9fioX83HCiIYYFNs8zAsVCMQrIakoNYylIzWuoD/anAD3UzvvR6cnswmfRFJFq/zYYq/k7Q==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -4880,22 +3732,22 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-collection': 1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-dismissable-layer': 1.1.5(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-focus-guards': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-focus-scope': 1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-id': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-popper': 1.2.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-portal': 1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-roving-focus': 1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-slot': 1.1.2(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.7(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-focus-scope': 1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-popper': 1.2.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.6(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-roving-focus': 1.1.7(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       aria-hidden: 1.2.4
@@ -4904,8 +3756,8 @@ packages:
       react-remove-scroll: 2.6.3(@types/react@19.1.1)(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-navigation-menu@1.2.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-egDo0yJD2IK8L17gC82vptkvW1jLeni1VuqCyzY727dSJdk5cDjINomouLoNk8RVF7g2aNIfENKWL4UzeU9c8Q==}
+  /@radix-ui/react-navigation-menu@1.2.10(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-kGDqMVPj2SRB1vJmXN/jnhC66REAXNyDmDRubbbmJ+360zSIJUDmWGMKIJOf72PHMwPENrbtJVb3CMAUJDjEIA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -4917,28 +3769,28 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-collection': 1.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-dismissable-layer': 1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-id': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-previous': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-visually-hidden': 1.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.7(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-visually-hidden': 1.2.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-popover@1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-u2HRUyWW+lOiA2g0Le0tMmT55FGOEWHwPFt1EPfbLly7uXQExFo5duNKqG2DzmFXIdqOeNd+TpE8baHWJCyP9w==}
+  /@radix-ui/react-popover@1.1.11(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-yFMfZkVA5G3GJnBgb2PxrrcLKm1ZLWXrbYVgdyTl//0TYEIHS9LJbnyz7WWcZ0qCq7hIlJZpRtxeSeIG5T5oJw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -4950,29 +3802,29 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-dismissable-layer': 1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-focus-guards': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-focus-scope': 1.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-id': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-popper': 1.2.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-portal': 1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-slot': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.7(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-focus-scope': 1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-popper': 1.2.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.6(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       aria-hidden: 1.2.4
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
-      react-remove-scroll: 2.6.0(@types/react@19.1.1)(react@19.1.0)
+      react-remove-scroll: 2.6.3(@types/react@19.1.1)(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-popover@1.1.2(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-u2HRUyWW+lOiA2g0Le0tMmT55FGOEWHwPFt1EPfbLly7uXQExFo5duNKqG2DzmFXIdqOeNd+TpE8baHWJCyP9w==}
+  /@radix-ui/react-popover@1.1.11(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-yFMfZkVA5G3GJnBgb2PxrrcLKm1ZLWXrbYVgdyTl//0TYEIHS9LJbnyz7WWcZ0qCq7hIlJZpRtxeSeIG5T5oJw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -4984,27 +3836,27 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-compose-refs': 1.1.0(react@18.3.1)
-      '@radix-ui/react-context': 1.1.1(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.1.1(react-dom@18.3.1)(react@18.3.1)
-      '@radix-ui/react-focus-guards': 1.1.1(react@18.3.1)
-      '@radix-ui/react-focus-scope': 1.1.0(react-dom@18.3.1)(react@18.3.1)
-      '@radix-ui/react-id': 1.1.0(react@18.3.1)
-      '@radix-ui/react-popper': 1.2.0(react-dom@18.3.1)(react@18.3.1)
-      '@radix-ui/react-portal': 1.1.2(react-dom@18.3.1)(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.1(react-dom@18.3.1)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.0(react-dom@18.3.1)(react@18.3.1)
-      '@radix-ui/react-slot': 1.1.0(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.1.0(react@18.3.1)
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.7(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.2(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.4(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.4(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.6(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.4(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.0(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.0(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(react@18.3.1)
       aria-hidden: 1.2.4
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      react-remove-scroll: 2.6.0(react@18.3.1)
+      react-remove-scroll: 2.6.3(react@18.3.1)
     dev: false
 
-  /@radix-ui/react-popper@1.2.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==}
+  /@radix-ui/react-popper@1.2.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-3p2Rgm/a1cK0r/UVkx5F/K9v/EplfjAeIFCGOPYPO4lZ0jtg4iSQXt/YGTSLWaf4x7NG6Z4+uKFcylcTZjeqDA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -5017,23 +3869,23 @@ packages:
         optional: true
     dependencies:
       '@floating-ui/react-dom': 2.1.2(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-arrow': 1.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-rect': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-size': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/rect': 1.1.0
+      '@radix-ui/react-arrow': 1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/rect': 1.1.1
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-popper@1.2.0(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==}
+  /@radix-ui/react-popper@1.2.4(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-3p2Rgm/a1cK0r/UVkx5F/K9v/EplfjAeIFCGOPYPO4lZ0jtg4iSQXt/YGTSLWaf4x7NG6Z4+uKFcylcTZjeqDA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -5046,55 +3898,26 @@ packages:
         optional: true
     dependencies:
       '@floating-ui/react-dom': 2.1.2(react-dom@18.3.1)(react@18.3.1)
-      '@radix-ui/react-arrow': 1.1.0(react-dom@18.3.1)(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.1.0(react@18.3.1)
-      '@radix-ui/react-context': 1.1.0(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.0(react-dom@18.3.1)(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.1.0(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.1.0(react@18.3.1)
-      '@radix-ui/react-use-rect': 1.1.0(react@18.3.1)
-      '@radix-ui/react-use-size': 1.1.0(react@18.3.1)
-      '@radix-ui/rect': 1.1.0
+      '@radix-ui/react-arrow': 1.1.4(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.0(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(react@18.3.1)
+      '@radix-ui/react-use-rect': 1.1.1(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.1(react@18.3.1)
+      '@radix-ui/rect': 1.1.1
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@radix-ui/react-popper@1.2.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-Rvqc3nOpwseCyj/rgjlJDYAgyfw7OC1tTkKn2ivhaMGcYt8FSBlahHOZak2i3QwkRXUXgGgzeEe2RuqeEHuHgA==}
-    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
-    dependencies:
-      '@floating-ui/react-dom': 2.1.2(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-arrow': 1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-rect': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-size': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/rect': 1.1.0
-      '@types/react': 19.1.1
-      '@types/react-dom': 19.1.2(@types/react@19.1.1)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    dev: false
-
   /@radix-ui/react-portal@1.0.0(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/react-primitive': 1.0.0(react-dom@18.3.1)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -5113,7 +3936,7 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -5132,7 +3955,7 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
@@ -5140,8 +3963,8 @@ packages:
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-portal@1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==}
+  /@radix-ui/react-portal@1.1.6(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-XmsIl2z1n/TsYFLIdYam2rmFwf9OC/Sh2avkbmVMDuBZIe7hSpM0cYnWPAo7nHOVx8zTuwDZGByfcqLdnzp3Vw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -5153,16 +3976,16 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-portal@1.1.2(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==}
+  /@radix-ui/react-portal@1.1.6(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-XmsIl2z1n/TsYFLIdYam2rmFwf9OC/Sh2avkbmVMDuBZIe7hSpM0cYnWPAo7nHOVx8zTuwDZGByfcqLdnzp3Vw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -5174,40 +3997,19 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/react-primitive': 2.0.0(react-dom@18.3.1)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.1.0(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.0(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@radix-ui/react-portal@1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA==}
-    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
-    dependencies:
-      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@types/react': 19.1.1
-      '@types/react-dom': 19.1.2(@types/react@19.1.1)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    dev: false
-
   /@radix-ui/react-presence@1.0.0(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/react-compose-refs': 1.0.0(react@18.3.1)
       '@radix-ui/react-use-layout-effect': 1.0.0(react@18.3.1)
       react: 18.3.1
@@ -5227,7 +4029,7 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@19.1.1)(react@19.1.0)
       '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
@@ -5249,55 +4051,15 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/react-compose-refs': 1.0.1(react@18.3.1)
       '@radix-ui/react-use-layout-effect': 1.0.1(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@radix-ui/react-presence@1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==}
-    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
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@types/react': 19.1.1
-      '@types/react-dom': 19.1.2(@types/react@19.1.1)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    dev: false
-
-  /@radix-ui/react-presence@1.1.1(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==}
-    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
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.0(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.1.0(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-    dev: false
-
-  /@radix-ui/react-presence@1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==}
+  /@radix-ui/react-presence@1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -5309,16 +4071,16 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-presence@1.1.2(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==}
+  /@radix-ui/react-presence@1.1.4(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -5330,8 +4092,8 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.1(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.1.0(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     dev: false
@@ -5342,7 +4104,7 @@ packages:
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/react-slot': 1.0.0(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -5361,7 +4123,7 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/react-slot': 1.0.2(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
@@ -5382,72 +4144,14 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/react-slot': 1.0.2(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@radix-ui/react-primitive@2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==}
-    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
-    dependencies:
-      '@radix-ui/react-slot': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@types/react': 19.1.1
-      '@types/react-dom': 19.1.2(@types/react@19.1.1)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    dev: false
-
-  /@radix-ui/react-primitive@2.0.0(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==}
-    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
-    dependencies:
-      '@radix-ui/react-slot': 1.1.0(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-    dev: false
-
-  /@radix-ui/react-primitive@2.0.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==}
-    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
-    dependencies:
-      '@radix-ui/react-slot': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@types/react': 19.1.1
-      '@types/react-dom': 19.1.2(@types/react@19.1.1)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    dev: false
-
-  /@radix-ui/react-primitive@2.0.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==}
+  /@radix-ui/react-primitive@2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-/J/FhLdK0zVcILOwt5g+dH4KnkonCtkVJsa2G6JmvbbtZfBEI1gMsO3QMjseL4F/SwfAMt1Vc/0XKYKq+xJ1sw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -5459,15 +4163,15 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/react-slot': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.0(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-primitive@2.0.2(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==}
+  /@radix-ui/react-primitive@2.1.0(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-/J/FhLdK0zVcILOwt5g+dH4KnkonCtkVJsa2G6JmvbbtZfBEI1gMsO3QMjseL4F/SwfAMt1Vc/0XKYKq+xJ1sw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -5479,13 +4183,13 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/react-slot': 1.1.2(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.0(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@radix-ui/react-progress@1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-6diOawA84f/eMxFHcWut0aE1C2kyE9dOyCTQOMRR2C/qPiXz/X0SaiA/RLbapQaXUCmy0/hLMf9meSccD1N0pA==}
+  /@radix-ui/react-progress@1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-8rl9w7lJdcVPor47Dhws9mUHRHLE+8JEgyJRdNWCpGPa6HIlr3eh+Yn9gyx1CnCLbw5naHsI2gaO9dBWO50vzw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -5497,16 +4201,16 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/react-context': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-radio-group@1.2.3(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-xtCsqt8Rp09FK50ItqEqTJ7Sxanz8EM8dnkVIhJrc/wkMMomSmXHvYbhv3E7Zx4oXh98aaLt9W679SUYXg4IDA==}
+  /@radix-ui/react-radio-group@1.3.4(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-N4J9QFdW5zcJNxxY/zwTXBN4Uc5VEuRM7ZLjNfnWoKmNvgrPtNNw4P8zY532O3qL6aPkaNO+gY9y6bfzmH4U1g==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -5518,50 +4222,22 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-compose-refs': 1.1.1(react@18.3.1)
-      '@radix-ui/react-context': 1.1.1(react@18.3.1)
-      '@radix-ui/react-direction': 1.1.0(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.2(react-dom@18.3.1)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.2(react-dom@18.3.1)(react@18.3.1)
-      '@radix-ui/react-roving-focus': 1.1.2(react-dom@18.3.1)(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.1.0(react@18.3.1)
-      '@radix-ui/react-use-previous': 1.1.0(react@18.3.1)
-      '@radix-ui/react-use-size': 1.1.0(react@18.3.1)
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.4(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.0(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.7(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.1(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.1(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@radix-ui/react-roving-focus@1.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==}
-    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
-    dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-collection': 1.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-id': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@types/react': 19.1.1
-      '@types/react-dom': 19.1.2(@types/react@19.1.1)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    dev: false
-
-  /@radix-ui/react-roving-focus@1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-zgMQWkNO169GtGqRvYrzb0Zf8NhMHS2DuEB/TiEmVnpr5OqPU3i8lfbxaAmC2J/KYuIQxyoQQ6DxepyXp61/xw==}
+  /@radix-ui/react-roving-focus@1.1.7(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-C6oAg451/fQT3EGbWHbCQjYTtbyjNO1uzQgMzwyivcHT3GKNEmu1q3UuREhN+HzHAVtv3ivMVK08QlC+PkYw9Q==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -5573,23 +4249,23 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-collection': 1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-id': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-roving-focus@1.1.2(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-zgMQWkNO169GtGqRvYrzb0Zf8NhMHS2DuEB/TiEmVnpr5OqPU3i8lfbxaAmC2J/KYuIQxyoQQ6DxepyXp61/xw==}
+  /@radix-ui/react-roving-focus@1.1.7(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-C6oAg451/fQT3EGbWHbCQjYTtbyjNO1uzQgMzwyivcHT3GKNEmu1q3UuREhN+HzHAVtv3ivMVK08QlC+PkYw9Q==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -5601,21 +4277,21 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-collection': 1.1.2(react-dom@18.3.1)(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.1.1(react@18.3.1)
-      '@radix-ui/react-context': 1.1.1(react@18.3.1)
-      '@radix-ui/react-direction': 1.1.0(react@18.3.1)
-      '@radix-ui/react-id': 1.1.0(react@18.3.1)
-      '@radix-ui/react-primitive': 2.0.2(react-dom@18.3.1)(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.1.0(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.1.0(react@18.3.1)
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.4(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.0(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@radix-ui/react-scroll-area@1.2.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-FnM1fHfCtEZ1JkyfH/1oMiTcFBQvHKl4vD9WnpwkLgtF+UmnXMCad6ECPTaAjcDjam+ndOEJWgHyKDGNteWSHw==}
+  /@radix-ui/react-scroll-area@1.2.6(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-lj8OMlpPERXrQIHlEQdlXHJoRT52AMpBrgyPYylOhXYq5e/glsEdtOc/kCQlsTdtgN5U0iDbrrolDadvektJGQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -5627,23 +4303,23 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/number': 1.1.0
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-select@2.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-rZJtWmorC7dFRi0owDmoijm6nSJH1tVw64QGiNIZ9PNLyBDtG+iAq+XGsya052At4BfarzY/Dhv9wrrUr6IMZA==}
+  /@radix-ui/react-select@2.2.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-HjkVHtBkuq+r3zUAZ/CvNWUGKPfuicGDbgtZgiQuFmNcV5F+Tgy24ep2nsAW2nFgvhGPJVqeBZa6KyVN0EyrBA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -5655,35 +4331,35 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/number': 1.1.0
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-collection': 1.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-dismissable-layer': 1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-focus-guards': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-focus-scope': 1.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-id': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-popper': 1.2.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-portal': 1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-slot': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-previous': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-visually-hidden': 1.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.7(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-focus-scope': 1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-popper': 1.2.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.6(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-visually-hidden': 1.2.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       aria-hidden: 1.2.4
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
-      react-remove-scroll: 2.6.0(@types/react@19.1.1)(react@19.1.0)
+      react-remove-scroll: 2.6.3(@types/react@19.1.1)(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-separator@1.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==}
+  /@radix-ui/react-separator@1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-2fTm6PSiUm8YPq9W0E4reYuv01EE3aFSzt8edBiXqPHshF8N9+Kymt/k0/R+F3dkY5lQyB/zPtrP82phskLi7w==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -5695,7 +4371,7 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
@@ -5707,7 +4383,7 @@ packages:
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/react-compose-refs': 1.0.0(react@18.3.1)
       react: 18.3.1
     dev: false
@@ -5721,7 +4397,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       react: 19.1.0
@@ -5736,54 +4412,13 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/react-compose-refs': 1.0.1(react@18.3.1)
       react: 18.3.1
     dev: false
 
-  /@radix-ui/react-slot@1.1.0(@types/react@19.1.1)(react@19.1.0):
-    resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@types/react': 19.1.1
-      react: 19.1.0
-    dev: false
-
-  /@radix-ui/react-slot@1.1.0(react@18.3.1):
-    resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.0(react@18.3.1)
-      react: 18.3.1
-    dev: false
-
-  /@radix-ui/react-slot@1.1.1(@types/react@19.1.1)(react@19.1.0):
-    resolution: {integrity: sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@types/react': 19.1.1
-      react: 19.1.0
-    dev: false
-
-  /@radix-ui/react-slot@1.1.2(@types/react@19.1.1)(react@19.1.0):
-    resolution: {integrity: sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==}
+  /@radix-ui/react-slot@1.2.0(@types/react@19.1.1)(react@19.1.0):
+    resolution: {integrity: sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -5791,13 +4426,13 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       react: 19.1.0
     dev: false
 
-  /@radix-ui/react-slot@1.1.2(react@18.3.1):
-    resolution: {integrity: sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==}
+  /@radix-ui/react-slot@1.2.0(react@18.3.1):
+    resolution: {integrity: sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -5805,12 +4440,12 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.1(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(react@18.3.1)
       react: 18.3.1
     dev: false
 
-  /@radix-ui/react-switch@1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-diPqDDoBcZPSicYoMWdWx+bCPuTRH4QSp9J+65IvtdS0Kuzt67bI6n32vCj8q6NZmYW/ah+2orOtMwcX5eQwIg==}
+  /@radix-ui/react-switch@1.2.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-7Z8n6L+ifMIIYZ83f28qWSceUpkXuslI2FJ34+kDMTiyj91ENdpdQ7VCidrzj5JfwfZTeano/BnGBbu/jqa5rQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -5822,21 +4457,21 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-previous': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-size': 1.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-tabs@1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-3GBUDmP2DvzmtYLMsHmpA1GtR46ZDZ+OreXM/N+kkQJOPIgytFWWTfDQmBQKBvaFS0Vno0FktdbVzN28KGrMdw==}
+  /@radix-ui/react-tabs@1.1.9(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-KIjtwciYvquiW/wAFkELZCVnaNLBsYNhTNcvl+zfMAbMhRkcvNuCLXDDd22L0j7tagpzVh/QwbFpwAATg7ILPw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -5848,22 +4483,22 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-context': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-id': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-roving-focus': 1.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-roving-focus': 1.1.7(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-toast@1.2.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-Z6pqSzmAP/bFJoqMAston4eSNa+ud44NSZTiZUmUen+IOZ5nBY8kzuU5WDBVyFXPtcW6yUalOHsxM/BP6Sv8ww==}
+  /@radix-ui/react-toast@1.2.11(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-Ed2mlOmT+tktOsu2NZBK1bCSHh/uqULu1vWOkpQTVq53EoOuZUZw7FInQoDB3uil5wZc2oe0XN9a7uVZB7/6AQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -5875,26 +4510,26 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-collection': 1.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-dismissable-layer': 1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-portal': 1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-visually-hidden': 1.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.7(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.6(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-visually-hidden': 1.2.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-toggle@1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-i77tcgObYr743IonC1hrsnnPmszDRn8p+EGUsUt+5a/JFn28fxaM88Py6V2mc8J5kELMWishI0rLnuGLFD/nnQ==}
+  /@radix-ui/react-toggle@1.1.6(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-3SeJxKeO3TO1zVw1Nl++Cp0krYk6zHDHMCUXXVkosIzl6Nxcvb07EerQpyD2wXQSJ5RZajrYAmPaydU8Hk1IyQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -5906,17 +4541,17 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@radix-ui/react-tooltip@1.1.3(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-Z4w1FIS0BqVFI2c1jZvb/uDVJijJjJ2ZMuPV81oVgTZ7g3BZxobplnMVvXtFWgtozdvYJ+MFWtwkM5S2HnAong==}
+  /@radix-ui/react-tooltip@1.2.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-DyW8VVeeMSSLFvAmnVnCwvI3H+1tpJFHT50r+tdOoMse9XqYDBCcyux8u3G2y+LOpt7fPQ6KKH0mhs+ce1+Z5w==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -5928,18 +4563,18 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-dismissable-layer': 1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-id': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-popper': 1.2.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-portal': 1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.1(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
-      '@radix-ui/react-slot': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.1.1)(react@19.1.0)
-      '@radix-ui/react-visually-hidden': 1.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.7(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-popper': 1.2.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.6(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-visually-hidden': 1.2.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
@@ -5951,7 +4586,7 @@ packages:
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       react: 18.3.1
     dev: false
 
@@ -5964,7 +4599,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@types/react': 19.1.1
       react: 19.1.0
     dev: false
@@ -5978,12 +4613,12 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       react: 18.3.1
     dev: false
 
-  /@radix-ui/react-use-callback-ref@1.1.0(@types/react@19.1.1)(react@19.1.0):
-    resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
+  /@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.1.1)(react@19.1.0):
+    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -5995,8 +4630,8 @@ packages:
       react: 19.1.0
     dev: false
 
-  /@radix-ui/react-use-callback-ref@1.1.0(react@18.3.1):
-    resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
+  /@radix-ui/react-use-callback-ref@1.1.1(react@18.3.1):
+    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -6012,7 +4647,7 @@ packages:
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/react-use-callback-ref': 1.0.0(react@18.3.1)
       react: 18.3.1
     dev: false
@@ -6026,7 +4661,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       react: 19.1.0
@@ -6041,13 +4676,13 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/react-use-callback-ref': 1.0.1(react@18.3.1)
       react: 18.3.1
     dev: false
 
-  /@radix-ui/react-use-controllable-state@1.1.0(@types/react@19.1.1)(react@19.1.0):
-    resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==}
+  /@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.1.1)(react@19.1.0):
+    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -6055,13 +4690,14 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       react: 19.1.0
     dev: false
 
-  /@radix-ui/react-use-controllable-state@1.1.0(react@18.3.1):
-    resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==}
+  /@radix-ui/react-use-controllable-state@1.2.2(react@18.3.1):
+    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -6069,7 +4705,35 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.0(react@18.3.1)
+      '@radix-ui/react-use-effect-event': 0.0.2(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(react@18.3.1)
+      react: 18.3.1
+    dev: false
+
+  /@radix-ui/react-use-effect-event@0.0.2(@types/react@19.1.1)(react@19.1.0):
+    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.1)(react@19.1.0)
+      '@types/react': 19.1.1
+      react: 19.1.0
+    dev: false
+
+  /@radix-ui/react-use-effect-event@0.0.2(react@18.3.1):
+    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -6078,7 +4742,7 @@ packages:
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/react-use-callback-ref': 1.0.0(react@18.3.1)
       react: 18.3.1
     dev: false
@@ -6092,7 +4756,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       react: 19.1.0
@@ -6107,13 +4771,13 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@radix-ui/react-use-callback-ref': 1.0.1(react@18.3.1)
       react: 18.3.1
     dev: false
 
-  /@radix-ui/react-use-escape-keydown@1.1.0(@types/react@19.1.1)(react@19.1.0):
-    resolution: {integrity: sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==}
+  /@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.1.1)(react@19.1.0):
+    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -6121,13 +4785,13 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       react: 19.1.0
     dev: false
 
-  /@radix-ui/react-use-escape-keydown@1.1.0(react@18.3.1):
-    resolution: {integrity: sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==}
+  /@radix-ui/react-use-escape-keydown@1.1.1(react@18.3.1):
+    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -6135,16 +4799,30 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.0(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(react@18.3.1)
       react: 18.3.1
     dev: false
 
+  /@radix-ui/react-use-is-hydrated@0.1.0(@types/react@19.1.1)(react@19.1.0):
+    resolution: {integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 19.1.1
+      react: 19.1.0
+      use-sync-external-store: 1.5.0(react@19.1.0)
+    dev: false
+
   /@radix-ui/react-use-layout-effect@1.0.0(react@18.3.1):
     resolution: {integrity: sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       react: 18.3.1
     dev: false
 
@@ -6157,7 +4835,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       '@types/react': 19.1.1
       react: 19.1.0
     dev: false
@@ -6171,12 +4849,12 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       react: 18.3.1
     dev: false
 
-  /@radix-ui/react-use-layout-effect@1.1.0(@types/react@19.1.1)(react@19.1.0):
-    resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==}
+  /@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.1)(react@19.1.0):
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -6188,8 +4866,8 @@ packages:
       react: 19.1.0
     dev: false
 
-  /@radix-ui/react-use-layout-effect@1.1.0(react@18.3.1):
-    resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==}
+  /@radix-ui/react-use-layout-effect@1.1.1(react@18.3.1):
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -6200,8 +4878,8 @@ packages:
       react: 18.3.1
     dev: false
 
-  /@radix-ui/react-use-previous@1.1.0(@types/react@19.1.1)(react@19.1.0):
-    resolution: {integrity: sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==}
+  /@radix-ui/react-use-previous@1.1.1(@types/react@19.1.1)(react@19.1.0):
+    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -6213,8 +4891,8 @@ packages:
       react: 19.1.0
     dev: false
 
-  /@radix-ui/react-use-previous@1.1.0(react@18.3.1):
-    resolution: {integrity: sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==}
+  /@radix-ui/react-use-previous@1.1.1(react@18.3.1):
+    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -6225,8 +4903,8 @@ packages:
       react: 18.3.1
     dev: false
 
-  /@radix-ui/react-use-rect@1.1.0(@types/react@19.1.1)(react@19.1.0):
-    resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==}
+  /@radix-ui/react-use-rect@1.1.1(@types/react@19.1.1)(react@19.1.0):
+    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -6234,13 +4912,13 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@radix-ui/rect': 1.1.0
+      '@radix-ui/rect': 1.1.1
       '@types/react': 19.1.1
       react: 19.1.0
     dev: false
 
-  /@radix-ui/react-use-rect@1.1.0(react@18.3.1):
-    resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==}
+  /@radix-ui/react-use-rect@1.1.1(react@18.3.1):
+    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -6248,12 +4926,12 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@radix-ui/rect': 1.1.0
+      '@radix-ui/rect': 1.1.1
       react: 18.3.1
     dev: false
 
-  /@radix-ui/react-use-size@1.1.0(@types/react@19.1.1)(react@19.1.0):
-    resolution: {integrity: sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==}
+  /@radix-ui/react-use-size@1.1.1(@types/react@19.1.1)(react@19.1.0):
+    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -6261,13 +4939,13 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.1)(react@19.1.0)
       '@types/react': 19.1.1
       react: 19.1.0
     dev: false
 
-  /@radix-ui/react-use-size@1.1.0(react@18.3.1):
-    resolution: {integrity: sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==}
+  /@radix-ui/react-use-size@1.1.1(react@18.3.1):
+    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -6275,12 +4953,12 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.0(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(react@18.3.1)
       react: 18.3.1
     dev: false
 
-  /@radix-ui/react-visually-hidden@1.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==}
+  /@radix-ui/react-visually-hidden@1.2.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-rQj0aAWOpCdCMRbI6pLQm8r7S2BM3YhTa0SzOYD55k+hJA8oo9J+H+9wLM9oMlZWOX/wJWPTzfDfmZkf7LvCfg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -6292,15 +4970,15 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       '@types/react': 19.1.1
       '@types/react-dom': 19.1.2(@types/react@19.1.1)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@radix-ui/rect@1.1.0:
-    resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==}
+  /@radix-ui/rect@1.1.1:
+    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
     dev: false
 
   /@react-email/body@0.0.11(react@19.1.0):
@@ -6469,29 +5147,29 @@ packages:
       react: 19.1.0
     dev: false
 
-  /@react-email/render@1.0.1(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-W3gTrcmLOVYnG80QuUp22ReIT/xfLsVJ+n7ghSlG2BITB8evNABn1AO2rGQoXuK84zKtDAlxCdm3hRyIpZdGSA==}
+  /@react-email/render@1.0.5(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-CA69HYXPk21HhtAXATIr+9JJwpDNmAFCvdMUjWmeoD1+KhJ9NAxusMRxKNeibdZdslmq3edaeOKGbdQ9qjK8LQ==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
       react-dom: ^18.0 || ^19.0 || ^19.0.0-rc
     dependencies:
       html-to-text: 9.0.5
-      js-beautify: 1.15.3
+      prettier: 3.4.2
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
       react-promise-suspense: 0.3.4
     dev: false
 
-  /@react-email/render@1.0.5(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-CA69HYXPk21HhtAXATIr+9JJwpDNmAFCvdMUjWmeoD1+KhJ9NAxusMRxKNeibdZdslmq3edaeOKGbdQ9qjK8LQ==}
+  /@react-email/render@1.0.6(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-zNueW5Wn/4jNC1c5LFgXzbUdv5Lhms+FWjOvWAhal7gx5YVf0q6dPJ0dnR70+ifo59gcMLwCZEaTS9EEuUhKvQ==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
       react-dom: ^18.0 || ^19.0 || ^19.0.0-rc
     dependencies:
       html-to-text: 9.0.5
-      prettier: 3.4.2
+      prettier: 3.5.3
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
       react-promise-suspense: 0.3.4
@@ -6578,160 +5256,160 @@ packages:
       picomatch: 4.0.2
     dev: false
 
-  /@rollup/rollup-android-arm-eabi@4.38.0:
-    resolution: {integrity: sha512-ldomqc4/jDZu/xpYU+aRxo3V4mGCV9HeTgUBANI3oIQMOL+SsxB+S2lxMpkFp5UamSS3XuTMQVbsS24R4J4Qjg==}
+  /@rollup/rollup-android-arm-eabi@4.40.1:
+    resolution: {integrity: sha512-kxz0YeeCrRUHz3zyqvd7n+TVRlNyTifBsmnmNPtk3hQURUyG9eAB+usz6DAwagMusjx/zb3AjvDUvhFGDAexGw==}
     cpu: [arm]
     os: [android]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@rollup/rollup-android-arm64@4.38.0:
-    resolution: {integrity: sha512-VUsgcy4GhhT7rokwzYQP+aV9XnSLkkhlEJ0St8pbasuWO/vwphhZQxYEKUP3ayeCYLhk6gEtacRpYP/cj3GjyQ==}
+  /@rollup/rollup-android-arm64@4.40.1:
+    resolution: {integrity: sha512-PPkxTOisoNC6TpnDKatjKkjRMsdaWIhyuMkA4UsBXT9WEZY4uHezBTjs6Vl4PbqQQeu6oION1w2voYZv9yquCw==}
     cpu: [arm64]
     os: [android]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@rollup/rollup-darwin-arm64@4.38.0:
-    resolution: {integrity: sha512-buA17AYXlW9Rn091sWMq1xGUvWQFOH4N1rqUxGJtEQzhChxWjldGCCup7r/wUnaI6Au8sKXpoh0xg58a7cgcpg==}
+  /@rollup/rollup-darwin-arm64@4.40.1:
+    resolution: {integrity: sha512-VWXGISWFY18v/0JyNUy4A46KCFCb9NVsH+1100XP31lud+TzlezBbz24CYzbnA4x6w4hx+NYCXDfnvDVO6lcAA==}
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@rollup/rollup-darwin-x64@4.38.0:
-    resolution: {integrity: sha512-Mgcmc78AjunP1SKXl624vVBOF2bzwNWFPMP4fpOu05vS0amnLcX8gHIge7q/lDAHy3T2HeR0TqrriZDQS2Woeg==}
+  /@rollup/rollup-darwin-x64@4.40.1:
+    resolution: {integrity: sha512-nIwkXafAI1/QCS7pxSpv/ZtFW6TXcNUEHAIA9EIyw5OzxJZQ1YDrX+CL6JAIQgZ33CInl1R6mHet9Y/UZTg2Bw==}
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@rollup/rollup-freebsd-arm64@4.38.0:
-    resolution: {integrity: sha512-zzJACgjLbQTsscxWqvrEQAEh28hqhebpRz5q/uUd1T7VTwUNZ4VIXQt5hE7ncs0GrF+s7d3S4on4TiXUY8KoQA==}
+  /@rollup/rollup-freebsd-arm64@4.40.1:
+    resolution: {integrity: sha512-BdrLJ2mHTrIYdaS2I99mriyJfGGenSaP+UwGi1kB9BLOCu9SR8ZpbkmmalKIALnRw24kM7qCN0IOm6L0S44iWw==}
     cpu: [arm64]
     os: [freebsd]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@rollup/rollup-freebsd-x64@4.38.0:
-    resolution: {integrity: sha512-hCY/KAeYMCyDpEE4pTETam0XZS4/5GXzlLgpi5f0IaPExw9kuB+PDTOTLuPtM10TlRG0U9OSmXJ+Wq9J39LvAg==}
+  /@rollup/rollup-freebsd-x64@4.40.1:
+    resolution: {integrity: sha512-VXeo/puqvCG8JBPNZXZf5Dqq7BzElNJzHRRw3vjBE27WujdzuOPecDPc/+1DcdcTptNBep3861jNq0mYkT8Z6Q==}
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@rollup/rollup-linux-arm-gnueabihf@4.38.0:
-    resolution: {integrity: sha512-mimPH43mHl4JdOTD7bUMFhBdrg6f9HzMTOEnzRmXbOZqjijCw8LA5z8uL6LCjxSa67H2xiLFvvO67PT05PRKGg==}
+  /@rollup/rollup-linux-arm-gnueabihf@4.40.1:
+    resolution: {integrity: sha512-ehSKrewwsESPt1TgSE/na9nIhWCosfGSFqv7vwEtjyAqZcvbGIg4JAcV7ZEh2tfj/IlfBeZjgOXm35iOOjadcg==}
     cpu: [arm]
     os: [linux]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@rollup/rollup-linux-arm-musleabihf@4.38.0:
-    resolution: {integrity: sha512-tPiJtiOoNuIH8XGG8sWoMMkAMm98PUwlriOFCCbZGc9WCax+GLeVRhmaxjJtz6WxrPKACgrwoZ5ia/uapq3ZVg==}
+  /@rollup/rollup-linux-arm-musleabihf@4.40.1:
+    resolution: {integrity: sha512-m39iO/aaurh5FVIu/F4/Zsl8xppd76S4qoID8E+dSRQvTyZTOI2gVk3T4oqzfq1PtcvOfAVlwLMK3KRQMaR8lg==}
     cpu: [arm]
     os: [linux]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@rollup/rollup-linux-arm64-gnu@4.38.0:
-    resolution: {integrity: sha512-wZco59rIVuB0tjQS0CSHTTUcEde+pXQWugZVxWaQFdQQ1VYub/sTrNdY76D1MKdN2NB48JDuGABP6o6fqos8mA==}
+  /@rollup/rollup-linux-arm64-gnu@4.40.1:
+    resolution: {integrity: sha512-Y+GHnGaku4aVLSgrT0uWe2o2Rq8te9hi+MwqGF9r9ORgXhmHK5Q71N757u0F8yU1OIwUIFy6YiJtKjtyktk5hg==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@rollup/rollup-linux-arm64-musl@4.38.0:
-    resolution: {integrity: sha512-fQgqwKmW0REM4LomQ+87PP8w8xvU9LZfeLBKybeli+0yHT7VKILINzFEuggvnV9M3x1Ed4gUBmGUzCo/ikmFbQ==}
+  /@rollup/rollup-linux-arm64-musl@4.40.1:
+    resolution: {integrity: sha512-jEwjn3jCA+tQGswK3aEWcD09/7M5wGwc6+flhva7dsQNRZZTe30vkalgIzV4tjkopsTS9Jd7Y1Bsj6a4lzz8gQ==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@rollup/rollup-linux-loongarch64-gnu@4.38.0:
-    resolution: {integrity: sha512-hz5oqQLXTB3SbXpfkKHKXLdIp02/w3M+ajp8p4yWOWwQRtHWiEOCKtc9U+YXahrwdk+3qHdFMDWR5k+4dIlddg==}
+  /@rollup/rollup-linux-loongarch64-gnu@4.40.1:
+    resolution: {integrity: sha512-ySyWikVhNzv+BV/IDCsrraOAZ3UaC8SZB67FZlqVwXwnFhPihOso9rPOxzZbjp81suB1O2Topw+6Ug3JNegejQ==}
     cpu: [loong64]
     os: [linux]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@rollup/rollup-linux-powerpc64le-gnu@4.38.0:
-    resolution: {integrity: sha512-NXqygK/dTSibQ+0pzxsL3r4Xl8oPqVoWbZV9niqOnIHV/J92fe65pOir0xjkUZDRSPyFRvu+4YOpJF9BZHQImw==}
+  /@rollup/rollup-linux-powerpc64le-gnu@4.40.1:
+    resolution: {integrity: sha512-BvvA64QxZlh7WZWqDPPdt0GH4bznuL6uOO1pmgPnnv86rpUpc8ZxgZwcEgXvo02GRIZX1hQ0j0pAnhwkhwPqWg==}
     cpu: [ppc64]
     os: [linux]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@rollup/rollup-linux-riscv64-gnu@4.38.0:
-    resolution: {integrity: sha512-GEAIabR1uFyvf/jW/5jfu8gjM06/4kZ1W+j1nWTSSB3w6moZEBm7iBtzwQ3a1Pxos2F7Gz+58aVEnZHU295QTg==}
+  /@rollup/rollup-linux-riscv64-gnu@4.40.1:
+    resolution: {integrity: sha512-EQSP+8+1VuSulm9RKSMKitTav89fKbHymTf25n5+Yr6gAPZxYWpj3DzAsQqoaHAk9YX2lwEyAf9S4W8F4l3VBQ==}
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@rollup/rollup-linux-riscv64-musl@4.38.0:
-    resolution: {integrity: sha512-9EYTX+Gus2EGPbfs+fh7l95wVADtSQyYw4DfSBcYdUEAmP2lqSZY0Y17yX/3m5VKGGJ4UmIH5LHLkMJft3bYoA==}
+  /@rollup/rollup-linux-riscv64-musl@4.40.1:
+    resolution: {integrity: sha512-n/vQ4xRZXKuIpqukkMXZt9RWdl+2zgGNx7Uda8NtmLJ06NL8jiHxUawbwC+hdSq1rrw/9CghCpEONor+l1e2gA==}
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@rollup/rollup-linux-s390x-gnu@4.38.0:
-    resolution: {integrity: sha512-Mpp6+Z5VhB9VDk7RwZXoG2qMdERm3Jw07RNlXHE0bOnEeX+l7Fy4bg+NxfyN15ruuY3/7Vrbpm75J9QHFqj5+Q==}
+  /@rollup/rollup-linux-s390x-gnu@4.40.1:
+    resolution: {integrity: sha512-h8d28xzYb98fMQKUz0w2fMc1XuGzLLjdyxVIbhbil4ELfk5/orZlSTpF/xdI9C8K0I8lCkq+1En2RJsawZekkg==}
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@rollup/rollup-linux-x64-gnu@4.38.0:
-    resolution: {integrity: sha512-vPvNgFlZRAgO7rwncMeE0+8c4Hmc+qixnp00/Uv3ht2x7KYrJ6ERVd3/R0nUtlE6/hu7/HiiNHJ/rP6knRFt1w==}
+  /@rollup/rollup-linux-x64-gnu@4.40.1:
+    resolution: {integrity: sha512-XiK5z70PEFEFqcNj3/zRSz/qX4bp4QIraTy9QjwJAb/Z8GM7kVUsD0Uk8maIPeTyPCP03ChdI+VVmJriKYbRHQ==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@rollup/rollup-linux-x64-musl@4.38.0:
-    resolution: {integrity: sha512-q5Zv+goWvQUGCaL7fU8NuTw8aydIL/C9abAVGCzRReuj5h30TPx4LumBtAidrVOtXnlB+RZkBtExMsfqkMfb8g==}
+  /@rollup/rollup-linux-x64-musl@4.40.1:
+    resolution: {integrity: sha512-2BRORitq5rQ4Da9blVovzNCMaUlyKrzMSvkVR0D4qPuOy/+pMCrh1d7o01RATwVy+6Fa1WBw+da7QPeLWU/1mQ==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@rollup/rollup-win32-arm64-msvc@4.38.0:
-    resolution: {integrity: sha512-u/Jbm1BU89Vftqyqbmxdq14nBaQjQX1HhmsdBWqSdGClNaKwhjsg5TpW+5Ibs1mb8Es9wJiMdl86BcmtUVXNZg==}
+  /@rollup/rollup-win32-arm64-msvc@4.40.1:
+    resolution: {integrity: sha512-b2bcNm9Kbde03H+q+Jjw9tSfhYkzrDUf2d5MAd1bOJuVplXvFhWz7tRtWvD8/ORZi7qSCy0idW6tf2HgxSXQSg==}
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@rollup/rollup-win32-ia32-msvc@4.38.0:
-    resolution: {integrity: sha512-mqu4PzTrlpNHHbu5qleGvXJoGgHpChBlrBx/mEhTPpnAL1ZAYFlvHD7rLK839LLKQzqEQMFJfGrrOHItN4ZQqA==}
+  /@rollup/rollup-win32-ia32-msvc@4.40.1:
+    resolution: {integrity: sha512-DfcogW8N7Zg7llVEfpqWMZcaErKfsj9VvmfSyRjCyo4BI3wPEfrzTtJkZG6gKP/Z92wFm6rz2aDO7/JfiR/whA==}
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
     dev: false
     optional: true
 
-  /@rollup/rollup-win32-x64-msvc@4.38.0:
-    resolution: {integrity: sha512-jjqy3uWlecfB98Psxb5cD6Fny9Fupv9LrDSPTQZUROqjvZmcCqNu4UMl7qqhlUUGpwiAkotj6GYu4SZdcr/nLw==}
+  /@rollup/rollup-win32-x64-msvc@4.40.1:
+    resolution: {integrity: sha512-ECyOuDeH3C1I8jH2MK1RtBJW+YPMvSfT0a5NN0nHfQYnDSJ6tUiZH3gzwVP5/Kfh/+Tt7tpWVF9LXNTnhTJ3kA==}
     cpu: [x64]
     os: [win32]
     requiresBuild: true
@@ -6742,8 +5420,8 @@ packages:
     resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
     dev: true
 
-  /@rushstack/eslint-patch@1.10.4:
-    resolution: {integrity: sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==}
+  /@rushstack/eslint-patch@1.11.0:
+    resolution: {integrity: sha512-zxnHvoMQVqewTJr/W4pKjF0bMGiKJv1WX7bSrkl46Hg0QjESbzBROWK0Wg4RphzSOS5Jiy7eFimmM3UgMrMZbQ==}
     dev: true
 
   /@selderee/plugin-htmlparser2@0.11.0:
@@ -6753,44 +5431,44 @@ packages:
       selderee: 0.11.0
     dev: false
 
-  /@shikijs/core@3.0.0:
-    resolution: {integrity: sha512-gSm3JQf2J2psiUn5bWokmZwnu5N0jfBtRps4CQ1B+qrFvmZCRAkMVoaxgl9qZgAFK5KisLAS3//XaMFVytYHKw==}
+  /@shikijs/core@3.3.0:
+    resolution: {integrity: sha512-CovkFL2WVaHk6PCrwv6ctlmD4SS1qtIfN8yEyDXDYWh4ONvomdM9MaFw20qHuqJOcb8/xrkqoWQRJ//X10phOQ==}
     dependencies:
-      '@shikijs/types': 3.0.0
+      '@shikijs/types': 3.3.0
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
       hast-util-to-html: 9.0.5
     dev: false
 
-  /@shikijs/engine-javascript@3.0.0:
-    resolution: {integrity: sha512-zoB10hTfvk1iZk1ldt6VaF+0iucQL+4TtSvTdTu5MhOeLPLEf5nZ8Wz6uxlp99y627OLalYa2z4W0iTTwb6oyA==}
+  /@shikijs/engine-javascript@3.3.0:
+    resolution: {integrity: sha512-XlhnFGv0glq7pfsoN0KyBCz9FJU678LZdQ2LqlIdAj6JKsg5xpYKay3DkazXWExp3DTJJK9rMOuGzU2911pg7Q==}
     dependencies:
-      '@shikijs/types': 3.0.0
+      '@shikijs/types': 3.3.0
       '@shikijs/vscode-textmate': 10.0.2
-      oniguruma-to-es: 3.1.1
+      oniguruma-to-es: 4.3.1
     dev: false
 
-  /@shikijs/engine-oniguruma@3.0.0:
-    resolution: {integrity: sha512-uM9lqwMrlPHPVcdpAN/4pAzTJah1pY7mi9f1MxG887SDkjF/tdiQK+5200Y8N5Hg125sewdMQ1K2agoAo8hDiA==}
+  /@shikijs/engine-oniguruma@3.3.0:
+    resolution: {integrity: sha512-l0vIw+GxeNU7uGnsu6B+Crpeqf+WTQ2Va71cHb5ZYWEVEPdfYwY5kXwYqRJwHrxz9WH+pjSpXQz+TJgAsrkA5A==}
     dependencies:
-      '@shikijs/types': 3.0.0
+      '@shikijs/types': 3.3.0
       '@shikijs/vscode-textmate': 10.0.2
     dev: false
 
-  /@shikijs/langs@3.0.0:
-    resolution: {integrity: sha512-HBsZAukiYz7k3hzttPWa0en3PABEwK3cpxcAcERRwvwuKc5pn0Y+yPxAIYZtN9cFdtNqrbFJNhfcEu/xbG1u/A==}
+  /@shikijs/langs@3.3.0:
+    resolution: {integrity: sha512-zt6Kf/7XpBQKSI9eqku+arLkAcDQ3NHJO6zFjiChI8w0Oz6Jjjay7pToottjQGjSDCFk++R85643WbyINcuL+g==}
     dependencies:
-      '@shikijs/types': 3.0.0
+      '@shikijs/types': 3.3.0
     dev: false
 
-  /@shikijs/themes@3.0.0:
-    resolution: {integrity: sha512-mz63nyVB5nXWsv5H2hifDFIThZEJ/cJhMq1/+0JjMdOuuBq2H2D1Fn8UM5yzUtEvap/ipRltv381+hsHZFs4ug==}
+  /@shikijs/themes@3.3.0:
+    resolution: {integrity: sha512-tXeCvLXBnqq34B0YZUEaAD1lD4lmN6TOHAhnHacj4Owh7Ptb/rf5XCDeROZt2rEOk5yuka3OOW2zLqClV7/SOg==}
     dependencies:
-      '@shikijs/types': 3.0.0
+      '@shikijs/types': 3.3.0
     dev: false
 
-  /@shikijs/types@3.0.0:
-    resolution: {integrity: sha512-kh/xgZHxI6m9trVvPw+C47jyVHx190r0F5gkF+VO5vYB54UtcoPJe66dzZmK7GbJbzmtGEGbOwct/jsoPjjUqg==}
+  /@shikijs/types@3.3.0:
+    resolution: {integrity: sha512-KPCGnHG6k06QG/2pnYGbFtFvpVJmC3uIpXrAiPrawETifujPBv0Se2oUxm5qYgjCvGJS9InKvjytOdN+bGuX+Q==}
     dependencies:
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
@@ -6800,20 +5478,12 @@ packages:
     resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
     dev: false
 
-  /@smithy/abort-controller@4.0.1:
-    resolution: {integrity: sha512-fiUIYgIgRjMWznk6iLJz35K2YxSLHzLBA/RC6lBrKfQ8fHbPfvk7Pk9UvpKoHgJjI18MnbPuEju53zcVy6KF1g==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@smithy/types': 4.2.0
-      tslib: 2.8.0
-    dev: false
-
   /@smithy/abort-controller@4.0.2:
     resolution: {integrity: sha512-Sl/78VDtgqKxN2+1qduaVE140XF+Xg+TafkncspwM4jFP/LHr76ZHmIY/y3V1M0mMLNk+Je6IGbzxy23RSToMw==}
     engines: {node: '>=18.0.0'}
     dependencies:
       '@smithy/types': 4.2.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/chunked-blob-reader-native@4.0.0:
@@ -6821,25 +5491,14 @@ packages:
     engines: {node: '>=18.0.0'}
     dependencies:
       '@smithy/util-base64': 4.0.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/chunked-blob-reader@5.0.0:
     resolution: {integrity: sha512-+sKqDBQqb036hh4NPaUiEkYFkTUGYzRsn3EuFhyfQfMy6oGHEUJDurLP9Ufb5dasr/XiAmPNMr6wa9afjQB+Gw==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      tslib: 2.8.0
-    dev: false
-
-  /@smithy/config-resolver@4.0.1:
-    resolution: {integrity: sha512-Igfg8lKu3dRVkTSEm98QpZUvKEOa71jDX4vKRcvJVyRc3UgN3j7vFMf0s7xLQhYmKa8kyJGQgUJDOV5V3neVlQ==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@smithy/node-config-provider': 4.0.1
-      '@smithy/types': 4.1.0
-      '@smithy/util-config-provider': 4.0.0
-      '@smithy/util-middleware': 4.0.1
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/config-resolver@4.1.0:
@@ -6850,25 +5509,11 @@ packages:
       '@smithy/types': 4.2.0
       '@smithy/util-config-provider': 4.0.0
       '@smithy/util-middleware': 4.0.2
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /@smithy/core@3.1.1:
-    resolution: {integrity: sha512-hhUZlBWYuh9t6ycAcN90XOyG76C1AzwxZZgaCVPMYpWqqk9uMFo7HGG5Zu2cEhCJn7DdOi5krBmlibWWWPgdsw==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@smithy/middleware-serde': 4.0.1
-      '@smithy/protocol-http': 5.0.1
-      '@smithy/types': 4.1.0
-      '@smithy/util-body-length-browser': 4.0.0
-      '@smithy/util-middleware': 4.0.1
-      '@smithy/util-stream': 4.0.2
-      '@smithy/util-utf8': 4.0.0
-      tslib: 2.8.0
-    dev: false
-
-  /@smithy/core@3.2.0:
-    resolution: {integrity: sha512-k17bgQhVZ7YmUvA8at4af1TDpl0NDMBuBKJl8Yg0nrefwmValU+CnA5l/AriVdQNthU/33H3nK71HrLgqOPr1Q==}
+  /@smithy/core@3.3.0:
+    resolution: {integrity: sha512-r6gvs5OfRq/w+9unPm7B3po4rmWaGh0CIL/OwHntGGux7+RhOOZLGuurbeMgWV6W55ZuyMTypJLeH0vn/ZRaWQ==}
     engines: {node: '>=18.0.0'}
     dependencies:
       '@smithy/middleware-serde': 4.0.3
@@ -6878,18 +5523,7 @@ packages:
       '@smithy/util-middleware': 4.0.2
       '@smithy/util-stream': 4.2.0
       '@smithy/util-utf8': 4.0.0
-      tslib: 2.8.0
-    dev: false
-
-  /@smithy/credential-provider-imds@4.0.1:
-    resolution: {integrity: sha512-l/qdInaDq1Zpznpmev/+52QomsJNZ3JkTl5yrTl02V6NBgJOQ4LY0SFw/8zsMwj3tLe8vqiIuwF6nxaEwgf6mg==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@smithy/node-config-provider': 4.0.1
-      '@smithy/property-provider': 4.0.1
-      '@smithy/types': 4.1.0
-      '@smithy/url-parser': 4.0.1
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/credential-provider-imds@4.0.2:
@@ -6900,63 +5534,52 @@ packages:
       '@smithy/property-provider': 4.0.2
       '@smithy/types': 4.2.0
       '@smithy/url-parser': 4.0.2
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /@smithy/eventstream-codec@4.0.1:
-    resolution: {integrity: sha512-Q2bCAAR6zXNVtJgifsU16ZjKGqdw/DyecKNgIgi7dlqw04fqDu0mnq+JmGphqheypVc64CYq3azSuCpAdFk2+A==}
+  /@smithy/eventstream-codec@4.0.2:
+    resolution: {integrity: sha512-p+f2kLSK7ZrXVfskU/f5dzksKTewZk8pJLPvER3aFHPt76C2MxD9vNatSfLzzQSQB4FNO96RK4PSXfhD1TTeMQ==}
     engines: {node: '>=18.0.0'}
     dependencies:
       '@aws-crypto/crc32': 5.2.0
       '@smithy/types': 4.2.0
       '@smithy/util-hex-encoding': 4.0.0
-      tslib: 2.8.0
-    dev: false
-
-  /@smithy/eventstream-serde-browser@4.0.1:
-    resolution: {integrity: sha512-HbIybmz5rhNg+zxKiyVAnvdM3vkzjE6ccrJ620iPL8IXcJEntd3hnBl+ktMwIy12Te/kyrSbUb8UCdnUT4QEdA==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@smithy/eventstream-serde-universal': 4.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /@smithy/eventstream-serde-config-resolver@4.0.1:
-    resolution: {integrity: sha512-lSipaiq3rmHguHa3QFF4YcCM3VJOrY9oq2sow3qlhFY+nBSTF/nrO82MUQRPrxHQXA58J5G1UnU2WuJfi465BA==}
+  /@smithy/eventstream-serde-browser@4.0.2:
+    resolution: {integrity: sha512-CepZCDs2xgVUtH7ZZ7oDdZFH8e6Y2zOv8iiX6RhndH69nlojCALSKK+OXwZUgOtUZEUaZ5e1hULVCHYbCn7pug==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      '@smithy/eventstream-serde-universal': 4.0.2
+      '@smithy/types': 4.2.0
+      tslib: 2.8.1
     dev: false
 
-  /@smithy/eventstream-serde-node@4.0.1:
-    resolution: {integrity: sha512-o4CoOI6oYGYJ4zXo34U8X9szDe3oGjmHgsMGiZM0j4vtNoT+h80TLnkUcrLZR3+E6HIxqW+G+9WHAVfl0GXK0Q==}
+  /@smithy/eventstream-serde-config-resolver@4.1.0:
+    resolution: {integrity: sha512-1PI+WPZ5TWXrfj3CIoKyUycYynYJgZjuQo8U+sphneOtjsgrttYybdqESFReQrdWJ+LKt6NEdbYzmmfDBmjX2A==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@smithy/eventstream-serde-universal': 4.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      '@smithy/types': 4.2.0
+      tslib: 2.8.1
     dev: false
 
-  /@smithy/eventstream-serde-universal@4.0.1:
-    resolution: {integrity: sha512-Z94uZp0tGJuxds3iEAZBqGU2QiaBHP4YytLUjwZWx+oUeohCsLyUm33yp4MMBmhkuPqSbQCXq5hDet6JGUgHWA==}
+  /@smithy/eventstream-serde-node@4.0.2:
+    resolution: {integrity: sha512-C5bJ/C6x9ENPMx2cFOirspnF9ZsBVnBMtP6BdPl/qYSuUawdGQ34Lq0dMcf42QTjUZgWGbUIZnz6+zLxJlb9aw==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@smithy/eventstream-codec': 4.0.1
+      '@smithy/eventstream-serde-universal': 4.0.2
       '@smithy/types': 4.2.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /@smithy/fetch-http-handler@5.0.1:
-    resolution: {integrity: sha512-3aS+fP28urrMW2KTjb6z9iFow6jO8n3MFfineGbndvzGZit3taZhKWtTorf+Gp5RpFDDafeHlhfsGlDCXvUnJA==}
+  /@smithy/eventstream-serde-universal@4.0.2:
+    resolution: {integrity: sha512-St8h9JqzvnbB52FtckiHPN4U/cnXcarMniXRXTKn0r4b4XesZOGiAyUdj1aXbqqn1icSqBlzzUsCl6nPB018ng==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@smithy/protocol-http': 5.0.1
-      '@smithy/querystring-builder': 4.0.1
-      '@smithy/types': 4.1.0
-      '@smithy/util-base64': 4.0.0
-      tslib: 2.8.0
+      '@smithy/eventstream-codec': 4.0.2
+      '@smithy/types': 4.2.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/fetch-http-handler@5.0.2:
@@ -6967,158 +5590,113 @@ packages:
       '@smithy/querystring-builder': 4.0.2
       '@smithy/types': 4.2.0
       '@smithy/util-base64': 4.0.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /@smithy/hash-blob-browser@4.0.1:
-    resolution: {integrity: sha512-rkFIrQOKZGS6i1D3gKJ8skJ0RlXqDvb1IyAphksaFOMzkn3v3I1eJ8m7OkLj0jf1McP63rcCEoLlkAn/HjcTRw==}
+  /@smithy/hash-blob-browser@4.0.2:
+    resolution: {integrity: sha512-3g188Z3DyhtzfBRxpZjU8R9PpOQuYsbNnyStc/ZVS+9nVX1f6XeNOa9IrAh35HwwIZg+XWk8bFVtNINVscBP+g==}
     engines: {node: '>=18.0.0'}
     dependencies:
       '@smithy/chunked-blob-reader': 5.0.0
       '@smithy/chunked-blob-reader-native': 4.0.0
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      '@smithy/types': 4.2.0
+      tslib: 2.8.1
     dev: false
 
-  /@smithy/hash-node@4.0.1:
-    resolution: {integrity: sha512-TJ6oZS+3r2Xu4emVse1YPB3Dq3d8RkZDKcPr71Nj/lJsdAP1c7oFzYqEn1IBc915TsgLl2xIJNuxCz+gLbLE0w==}
+  /@smithy/hash-node@4.0.2:
+    resolution: {integrity: sha512-VnTpYPnRUE7yVhWozFdlxcYknv9UN7CeOqSrMH+V877v4oqtVYuoqhIhtSjmGPvYrYnAkaM61sLMKHvxL138yg==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@smithy/types': 4.1.0
+      '@smithy/types': 4.2.0
       '@smithy/util-buffer-from': 4.0.0
       '@smithy/util-utf8': 4.0.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /@smithy/hash-stream-node@4.0.1:
-    resolution: {integrity: sha512-U1rAE1fxmReCIr6D2o/4ROqAQX+GffZpyMt3d7njtGDr2pUNmAKRWa49gsNVhCh2vVAuf3wXzWwNr2YN8PAXIw==}
+  /@smithy/hash-stream-node@4.0.2:
+    resolution: {integrity: sha512-POWDuTznzbIwlEXEvvXoPMS10y0WKXK790soe57tFRfvf4zBHyzE529HpZMqmDdwG9MfFflnyzndUQ8j78ZdSg==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@smithy/types': 4.1.0
+      '@smithy/types': 4.2.0
       '@smithy/util-utf8': 4.0.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /@smithy/invalid-dependency@4.0.1:
-    resolution: {integrity: sha512-gdudFPf4QRQ5pzj7HEnu6FhKRi61BfH/Gk5Yf6O0KiSbr1LlVhgjThcvjdu658VE6Nve8vaIWB8/fodmS1rBPQ==}
+  /@smithy/invalid-dependency@4.0.2:
+    resolution: {integrity: sha512-GatB4+2DTpgWPday+mnUkoumP54u/MDM/5u44KF9hIu8jF0uafZtQLcdfIKkIcUNuF/fBojpLEHZS/56JqPeXQ==}
     engines: {node: '>=18.0.0'}
     dependencies:
       '@smithy/types': 4.2.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/is-array-buffer@2.2.0:
     resolution: {integrity: sha512-GGP3O9QFD24uGeAXYUjwSTXARoqpZykHadOmA8G5vfJPK0/DC67qa//0qvqrJzL1xc8WQWX7/yc7fwudjPHPhA==}
     engines: {node: '>=14.0.0'}
     dependencies:
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/is-array-buffer@4.0.0:
     resolution: {integrity: sha512-saYhF8ZZNoJDTvJBEWgeBccCg+yvp1CX+ed12yORU3NilJScfc6gfch2oVb4QgxZrGUx3/ZJlb+c/dJbyupxlw==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /@smithy/md5-js@4.0.1:
-    resolution: {integrity: sha512-HLZ647L27APi6zXkZlzSFZIjpo8po45YiyjMGJZM3gyDY8n7dPGdmxIIljLm4gPt/7rRvutLTTkYJpZVfG5r+A==}
+  /@smithy/md5-js@4.0.2:
+    resolution: {integrity: sha512-Hc0R8EiuVunUewCse2syVgA2AfSRco3LyAv07B/zCOMa+jpXI9ll+Q21Nc6FAlYPcpNcAXqBzMhNs1CD/pP2bA==}
     engines: {node: '>=18.0.0'}
     dependencies:
       '@smithy/types': 4.2.0
       '@smithy/util-utf8': 4.0.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /@smithy/middleware-content-length@4.0.1:
-    resolution: {integrity: sha512-OGXo7w5EkB5pPiac7KNzVtfCW2vKBTZNuCctn++TTSOMpe6RZO/n6WEC1AxJINn3+vWLKW49uad3lo/u0WJ9oQ==}
+  /@smithy/middleware-content-length@4.0.2:
+    resolution: {integrity: sha512-hAfEXm1zU+ELvucxqQ7I8SszwQ4znWMbNv6PLMndN83JJN41EPuS93AIyh2N+gJ6x8QFhzSO6b7q2e6oClDI8A==}
     engines: {node: '>=18.0.0'}
     dependencies:
       '@smithy/protocol-http': 5.1.0
       '@smithy/types': 4.2.0
-      tslib: 2.8.0
-    dev: false
-
-  /@smithy/middleware-endpoint@4.0.2:
-    resolution: {integrity: sha512-Z9m67CXizGpj8CF/AW/7uHqYNh1VXXOn9Ap54fenWsCa0HnT4cJuE61zqG3cBkTZJDCy0wHJphilI41co/PE5g==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@smithy/core': 3.1.1
-      '@smithy/middleware-serde': 4.0.1
-      '@smithy/node-config-provider': 4.0.1
-      '@smithy/shared-ini-file-loader': 4.0.1
-      '@smithy/types': 4.1.0
-      '@smithy/url-parser': 4.0.1
-      '@smithy/util-middleware': 4.0.1
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /@smithy/middleware-endpoint@4.1.0:
-    resolution: {integrity: sha512-xhLimgNCbCzsUppRTGXWkZywksuTThxaIB0HwbpsVLY5sceac4e1TZ/WKYqufQLaUy+gUSJGNdwD2jo3cXL0iA==}
+  /@smithy/middleware-endpoint@4.1.1:
+    resolution: {integrity: sha512-z5RmcHxjvScL+LwEDU2mTNCOhgUs4lu5PGdF1K36IPRmUHhNFxNxgenSB7smyDiYD4vdKQ7CAZtG5cUErqib9w==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@smithy/core': 3.2.0
+      '@smithy/core': 3.3.0
       '@smithy/middleware-serde': 4.0.3
       '@smithy/node-config-provider': 4.0.2
       '@smithy/shared-ini-file-loader': 4.0.2
       '@smithy/types': 4.2.0
       '@smithy/url-parser': 4.0.2
       '@smithy/util-middleware': 4.0.2
-      tslib: 2.8.0
-    dev: false
-
-  /@smithy/middleware-retry@4.0.3:
-    resolution: {integrity: sha512-TiKwwQTwUDeDtwWW8UWURTqu7s6F3wN2pmziLU215u7bqpVT9Mk2oEvURjpRLA+5XeQhM68R5BpAGzVtomsqgA==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@smithy/node-config-provider': 4.0.1
-      '@smithy/protocol-http': 5.0.1
-      '@smithy/service-error-classification': 4.0.1
-      '@smithy/smithy-client': 4.1.2
-      '@smithy/types': 4.1.0
-      '@smithy/util-middleware': 4.0.1
-      '@smithy/util-retry': 4.0.1
-      tslib: 2.8.0
-      uuid: 9.0.1
+      tslib: 2.8.1
     dev: false
 
-  /@smithy/middleware-retry@4.1.0:
-    resolution: {integrity: sha512-2zAagd1s6hAaI/ap6SXi5T3dDwBOczOMCSkkYzktqN1+tzbk1GAsHNAdo/1uzxz3Ky02jvZQwbi/vmDA6z4Oyg==}
+  /@smithy/middleware-retry@4.1.1:
+    resolution: {integrity: sha512-mBJOxn9aUYwcBUPQpKv9ifzrCn4EbhPUFguEZv3jB57YOMh0caS4P8HoLvUeNUI1nx4bIVH2SIbogbDfFI9DUA==}
     engines: {node: '>=18.0.0'}
     dependencies:
       '@smithy/node-config-provider': 4.0.2
       '@smithy/protocol-http': 5.1.0
       '@smithy/service-error-classification': 4.0.2
-      '@smithy/smithy-client': 4.2.0
+      '@smithy/smithy-client': 4.2.1
       '@smithy/types': 4.2.0
       '@smithy/util-middleware': 4.0.2
       '@smithy/util-retry': 4.0.2
-      tslib: 2.8.0
+      tslib: 2.8.1
       uuid: 9.0.1
     dev: false
 
-  /@smithy/middleware-serde@4.0.1:
-    resolution: {integrity: sha512-Fh0E2SOF+S+P1+CsgKyiBInAt3o2b6Qk7YOp2W0Qx2XnfTdfMuSDKUEcnrtpxCzgKJnqXeLUZYqtThaP0VGqtA==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
-    dev: false
-
   /@smithy/middleware-serde@4.0.3:
     resolution: {integrity: sha512-rfgDVrgLEVMmMn0BI8O+8OVr6vXzjV7HZj57l0QxslhzbvVfikZbVfBVthjLHqib4BW44QhcIgJpvebHlRaC9A==}
     engines: {node: '>=18.0.0'}
     dependencies:
       '@smithy/types': 4.2.0
-      tslib: 2.8.0
-    dev: false
-
-  /@smithy/middleware-stack@4.0.1:
-    resolution: {integrity: sha512-dHwDmrtR/ln8UTHpaIavRSzeIk5+YZTBtLnKwDW3G2t6nAupCiQUvNzNoHBpik63fwUaJPtlnMzXbQrNFWssIA==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/middleware-stack@4.0.2:
@@ -7126,17 +5704,7 @@ packages:
     engines: {node: '>=18.0.0'}
     dependencies:
       '@smithy/types': 4.2.0
-      tslib: 2.8.0
-    dev: false
-
-  /@smithy/node-config-provider@4.0.1:
-    resolution: {integrity: sha512-8mRTjvCtVET8+rxvmzRNRR0hH2JjV0DFOmwXPrISmTIJEfnCBugpYYGAsCj8t41qd+RB5gbheSQ/6aKZCQvFLQ==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@smithy/property-provider': 4.0.1
-      '@smithy/shared-ini-file-loader': 4.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/node-config-provider@4.0.2:
@@ -7146,18 +5714,7 @@ packages:
       '@smithy/property-provider': 4.0.2
       '@smithy/shared-ini-file-loader': 4.0.2
       '@smithy/types': 4.2.0
-      tslib: 2.8.0
-    dev: false
-
-  /@smithy/node-http-handler@4.0.2:
-    resolution: {integrity: sha512-X66H9aah9hisLLSnGuzRYba6vckuFtGE+a5DcHLliI/YlqKrGoxhisD5XbX44KyoeRzoNlGr94eTsMVHFAzPOw==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@smithy/abort-controller': 4.0.1
-      '@smithy/protocol-http': 5.0.1
-      '@smithy/querystring-builder': 4.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/node-http-handler@4.0.4:
@@ -7168,15 +5725,7 @@ packages:
       '@smithy/protocol-http': 5.1.0
       '@smithy/querystring-builder': 4.0.2
       '@smithy/types': 4.2.0
-      tslib: 2.8.0
-    dev: false
-
-  /@smithy/property-provider@4.0.1:
-    resolution: {integrity: sha512-o+VRiwC2cgmk/WFV0jaETGOtX16VNPp2bSQEzu0whbReqE1BMqsP2ami2Vi3cbGVdKu1kq9gQkDAGKbt0WOHAQ==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/property-provider@4.0.2:
@@ -7184,15 +5733,7 @@ packages:
     engines: {node: '>=18.0.0'}
     dependencies:
       '@smithy/types': 4.2.0
-      tslib: 2.8.0
-    dev: false
-
-  /@smithy/protocol-http@5.0.1:
-    resolution: {integrity: sha512-TE4cpj49jJNB/oHyh/cRVEgNZaoPaxd4vteJNB0yGidOCVR0jCw/hjPVsT8Q8FRmj8Bd3bFZt8Dh7xGCT+xMBQ==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/protocol-http@5.1.0:
@@ -7200,16 +5741,7 @@ packages:
     engines: {node: '>=18.0.0'}
     dependencies:
       '@smithy/types': 4.2.0
-      tslib: 2.8.0
-    dev: false
-
-  /@smithy/querystring-builder@4.0.1:
-    resolution: {integrity: sha512-wU87iWZoCbcqrwszsOewEIuq+SU2mSoBE2CcsLwE0I19m0B2gOJr1MVjxWcDQYOzHbR1xCk7AcOBbGFUYOKvdg==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@smithy/types': 4.2.0
-      '@smithy/util-uri-escape': 4.0.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/querystring-builder@4.0.2:
@@ -7218,15 +5750,7 @@ packages:
     dependencies:
       '@smithy/types': 4.2.0
       '@smithy/util-uri-escape': 4.0.0
-      tslib: 2.8.0
-    dev: false
-
-  /@smithy/querystring-parser@4.0.1:
-    resolution: {integrity: sha512-Ma2XC7VS9aV77+clSFylVUnPZRindhB7BbmYiNOdr+CHt/kZNJoPP0cd3QxCnCFyPXC4eybmyE98phEHkqZ5Jw==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@smithy/types': 4.2.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/querystring-parser@4.0.2:
@@ -7234,14 +5758,7 @@ packages:
     engines: {node: '>=18.0.0'}
     dependencies:
       '@smithy/types': 4.2.0
-      tslib: 2.8.0
-    dev: false
-
-  /@smithy/service-error-classification@4.0.1:
-    resolution: {integrity: sha512-3JNjBfOWpj/mYfjXJHB4Txc/7E4LVq32bwzE7m28GN79+M1f76XHflUaSUkhOriprPDzev9cX/M+dEB80DNDKA==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@smithy/types': 4.2.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/service-error-classification@4.0.2:
@@ -7251,24 +5768,16 @@ packages:
       '@smithy/types': 4.2.0
     dev: false
 
-  /@smithy/shared-ini-file-loader@4.0.1:
-    resolution: {integrity: sha512-hC8F6qTBbuHRI/uqDgqqi6J0R4GtEZcgrZPhFQnMhfJs3MnUTGSnR1NSJCJs5VWlMydu0kJz15M640fJlRsIOw==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@smithy/types': 4.2.0
-      tslib: 2.8.0
-    dev: false
-
   /@smithy/shared-ini-file-loader@4.0.2:
     resolution: {integrity: sha512-J9/gTWBGVuFZ01oVA6vdb4DAjf1XbDhK6sLsu3OS9qmLrS6KB5ygpeHiM3miIbj1qgSJ96GYszXFWv6ErJ8QEw==}
     engines: {node: '>=18.0.0'}
     dependencies:
       '@smithy/types': 4.2.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /@smithy/signature-v4@5.0.1:
-    resolution: {integrity: sha512-nCe6fQ+ppm1bQuw5iKoeJ0MJfz2os7Ic3GBjOkLOPtavbD1ONoyE3ygjBfz2ythFWm4YnRm6OxW+8p/m9uCoIA==}
+  /@smithy/signature-v4@5.1.0:
+    resolution: {integrity: sha512-4t5WX60sL3zGJF/CtZsUQTs3UrZEDO2P7pEaElrekbLqkWPYkgqNW1oeiNYC6xXifBnT9dVBOnNQRvOE9riU9w==}
     engines: {node: '>=18.0.0'}
     dependencies:
       '@smithy/is-array-buffer': 4.0.0
@@ -7278,56 +5787,27 @@ packages:
       '@smithy/util-middleware': 4.0.2
       '@smithy/util-uri-escape': 4.0.0
       '@smithy/util-utf8': 4.0.0
-      tslib: 2.8.0
-    dev: false
-
-  /@smithy/smithy-client@4.1.2:
-    resolution: {integrity: sha512-0yApeHWBqocelHGK22UivZyShNxFbDNrgREBllGh5Ws0D0rg/yId/CJfeoKKpjbfY2ju8j6WgDUGZHYQmINZ5w==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@smithy/core': 3.1.1
-      '@smithy/middleware-endpoint': 4.0.2
-      '@smithy/middleware-stack': 4.0.1
-      '@smithy/protocol-http': 5.0.1
-      '@smithy/types': 4.1.0
-      '@smithy/util-stream': 4.0.2
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /@smithy/smithy-client@4.2.0:
-    resolution: {integrity: sha512-Qs65/w30pWV7LSFAez9DKy0Koaoh3iHhpcpCCJ4waj/iqwsuSzJna2+vYwq46yBaqO5ZbP9TjUsATUNxrKeBdw==}
+  /@smithy/smithy-client@4.2.1:
+    resolution: {integrity: sha512-fbniZef60QdsBc4ZY0iyI8xbFHIiC/QRtPi66iE4ufjiE/aaz7AfUXzcWMkpO8r+QhLeNRIfmPchIG+3/QDZ6g==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@smithy/core': 3.2.0
-      '@smithy/middleware-endpoint': 4.1.0
+      '@smithy/core': 3.3.0
+      '@smithy/middleware-endpoint': 4.1.1
       '@smithy/middleware-stack': 4.0.2
       '@smithy/protocol-http': 5.1.0
       '@smithy/types': 4.2.0
       '@smithy/util-stream': 4.2.0
-      tslib: 2.8.0
-    dev: false
-
-  /@smithy/types@4.1.0:
-    resolution: {integrity: sha512-enhjdwp4D7CXmwLtD6zbcDMbo6/T6WtuuKCY49Xxc6OMOmUWlBEBDREsxxgV2LIdeQPW756+f97GzcgAwp3iLw==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/types@4.2.0:
     resolution: {integrity: sha512-7eMk09zQKCO+E/ivsjQv+fDlOupcFUCSC/L2YUPgwhvowVGWbPQHjEFcmjt7QQ4ra5lyowS92SV53Zc6XD4+fg==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      tslib: 2.8.0
-    dev: false
-
-  /@smithy/url-parser@4.0.1:
-    resolution: {integrity: sha512-gPXcIEUtw7VlK8f/QcruNXm7q+T5hhvGu9tl63LsJPZ27exB6dtNwvh2HIi0v7JcXJ5emBxB+CJxwaLEdJfA+g==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@smithy/querystring-parser': 4.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/url-parser@4.0.2:
@@ -7336,7 +5816,7 @@ packages:
     dependencies:
       '@smithy/querystring-parser': 4.0.2
       '@smithy/types': 4.2.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/util-base64@4.0.0:
@@ -7345,21 +5825,21 @@ packages:
     dependencies:
       '@smithy/util-buffer-from': 4.0.0
       '@smithy/util-utf8': 4.0.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/util-body-length-browser@4.0.0:
     resolution: {integrity: sha512-sNi3DL0/k64/LO3A256M+m3CDdG6V7WKWHdAiBBMUN8S3hK3aMPhwnPik2A/a2ONN+9doY9UxaLfgqsIRg69QA==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/util-body-length-node@4.0.0:
     resolution: {integrity: sha512-q0iDP3VsZzqJyje8xJWEJCNIu3lktUGVoSy1KB0UWym2CL1siV3artm+u1DFYTLejpsrdGyCSWBdGNjJzfDPjg==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/util-buffer-from@2.2.0:
@@ -7367,7 +5847,7 @@ packages:
     engines: {node: '>=14.0.0'}
     dependencies:
       '@smithy/is-array-buffer': 2.2.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/util-buffer-from@4.0.0:
@@ -7375,86 +5855,54 @@ packages:
     engines: {node: '>=18.0.0'}
     dependencies:
       '@smithy/is-array-buffer': 4.0.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/util-config-provider@4.0.0:
     resolution: {integrity: sha512-L1RBVzLyfE8OXH+1hsJ8p+acNUSirQnWQ6/EgpchV88G6zGBTDPdXiiExei6Z1wR2RxYvxY/XLw6AMNCCt8H3w==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      tslib: 2.8.0
-    dev: false
-
-  /@smithy/util-defaults-mode-browser@4.0.3:
-    resolution: {integrity: sha512-7c5SF1fVK0EOs+2EOf72/qF199zwJflU1d02AevwKbAUPUZyE9RUZiyJxeUmhVxfKDWdUKaaVojNiaDQgnHL9g==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@smithy/property-provider': 4.0.1
-      '@smithy/smithy-client': 4.1.2
-      '@smithy/types': 4.1.0
-      bowser: 2.11.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /@smithy/util-defaults-mode-browser@4.0.8:
-    resolution: {integrity: sha512-ZTypzBra+lI/LfTYZeop9UjoJhhGRTg3pxrNpfSTQLd3AJ37r2z4AXTKpq1rFXiiUIJsYyFgNJdjWRGP/cbBaQ==}
+  /@smithy/util-defaults-mode-browser@4.0.9:
+    resolution: {integrity: sha512-B8j0XsElvyhv6+5hlFf6vFV/uCSyLKcInpeXOGnOImX2mGXshE01RvPoGipTlRpIk53e6UfYj7WdDdgbVfXDZw==}
     engines: {node: '>=18.0.0'}
     dependencies:
       '@smithy/property-provider': 4.0.2
-      '@smithy/smithy-client': 4.2.0
+      '@smithy/smithy-client': 4.2.1
       '@smithy/types': 4.2.0
       bowser: 2.11.0
-      tslib: 2.8.0
-    dev: false
-
-  /@smithy/util-defaults-mode-node@4.0.3:
-    resolution: {integrity: sha512-CVnD42qYD3JKgDlImZ9+On+MqJHzq9uJgPbMdeBE8c2x8VJ2kf2R3XO/yVFx+30ts5lD/GlL0eFIShY3x9ROgQ==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@smithy/config-resolver': 4.0.1
-      '@smithy/credential-provider-imds': 4.0.1
-      '@smithy/node-config-provider': 4.0.1
-      '@smithy/property-provider': 4.0.1
-      '@smithy/smithy-client': 4.1.2
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /@smithy/util-defaults-mode-node@4.0.8:
-    resolution: {integrity: sha512-Rgk0Jc/UDfRTzVthye/k2dDsz5Xxs9LZaKCNPgJTRyoyBoeiNCnHsYGOyu1PKN+sDyPnJzMOz22JbwxzBp9NNA==}
+  /@smithy/util-defaults-mode-node@4.0.9:
+    resolution: {integrity: sha512-wTDU8P/zdIf9DOpV5qm64HVgGRXvqjqB/fJZTEQbrz3s79JHM/E7XkMm/876Oq+ZLHJQgnXM9QHDo29dlM62eA==}
     engines: {node: '>=18.0.0'}
     dependencies:
       '@smithy/config-resolver': 4.1.0
       '@smithy/credential-provider-imds': 4.0.2
       '@smithy/node-config-provider': 4.0.2
       '@smithy/property-provider': 4.0.2
-      '@smithy/smithy-client': 4.2.0
+      '@smithy/smithy-client': 4.2.1
       '@smithy/types': 4.2.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /@smithy/util-endpoints@3.0.1:
-    resolution: {integrity: sha512-zVdUENQpdtn9jbpD9SCFK4+aSiavRb9BxEtw9ZGUR1TYo6bBHbIoi7VkrFQ0/RwZlzx0wRBaRmPclj8iAoJCLA==}
+  /@smithy/util-endpoints@3.0.2:
+    resolution: {integrity: sha512-6QSutU5ZyrpNbnd51zRTL7goojlcnuOB55+F9VBD+j8JpRY50IGamsjlycrmpn8PQkmJucFW8A0LSfXj7jjtLQ==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@smithy/node-config-provider': 4.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      '@smithy/node-config-provider': 4.0.2
+      '@smithy/types': 4.2.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/util-hex-encoding@4.0.0:
     resolution: {integrity: sha512-Yk5mLhHtfIgW2W2WQZWSg5kuMZCVbvhFmC7rV4IO2QqnZdbEFPmQnCcGMAX2z/8Qj3B9hYYNjZOhWym+RwhePw==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      tslib: 2.8.0
-    dev: false
-
-  /@smithy/util-middleware@4.0.1:
-    resolution: {integrity: sha512-HiLAvlcqhbzhuiOa0Lyct5IIlyIz0PQO5dnMlmQ/ubYM46dPInB+3yQGkfxsk6Q24Y0n3/JmcA1v5iEhmOF5mA==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/util-middleware@4.0.2:
@@ -7462,16 +5910,7 @@ packages:
     engines: {node: '>=18.0.0'}
     dependencies:
       '@smithy/types': 4.2.0
-      tslib: 2.8.0
-    dev: false
-
-  /@smithy/util-retry@4.0.1:
-    resolution: {integrity: sha512-WmRHqNVwn3kI3rKk1LsKcVgPBG6iLTBGC1iYOV3GQegwJ3E8yjzHytPt26VNzOWr1qu0xE03nK0Ug8S7T7oufw==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@smithy/service-error-classification': 4.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/util-retry@4.0.2:
@@ -7480,21 +5919,7 @@ packages:
     dependencies:
       '@smithy/service-error-classification': 4.0.2
       '@smithy/types': 4.2.0
-      tslib: 2.8.0
-    dev: false
-
-  /@smithy/util-stream@4.0.2:
-    resolution: {integrity: sha512-0eZ4G5fRzIoewtHtwaYyl8g2C+osYOT4KClXgfdNEDAgkbe2TYPqcnw4GAWabqkZCax2ihRGPe9LZnsPdIUIHA==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      '@smithy/fetch-http-handler': 5.0.1
-      '@smithy/node-http-handler': 4.0.2
-      '@smithy/types': 4.1.0
-      '@smithy/util-base64': 4.0.0
-      '@smithy/util-buffer-from': 4.0.0
-      '@smithy/util-hex-encoding': 4.0.0
-      '@smithy/util-utf8': 4.0.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/util-stream@4.2.0:
@@ -7508,14 +5933,14 @@ packages:
       '@smithy/util-buffer-from': 4.0.0
       '@smithy/util-hex-encoding': 4.0.0
       '@smithy/util-utf8': 4.0.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/util-uri-escape@4.0.0:
     resolution: {integrity: sha512-77yfbCbQMtgtTylO9itEAdpPXSog3ZxMe09AEhm0dU0NLTalV70ghDZFR+Nfi1C60jnJoh/Re4090/DuZh2Omg==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/util-utf8@2.3.0:
@@ -7523,7 +5948,7 @@ packages:
     engines: {node: '>=14.0.0'}
     dependencies:
       '@smithy/util-buffer-from': 2.2.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /@smithy/util-utf8@4.0.0:
@@ -7531,16 +5956,16 @@ packages:
     engines: {node: '>=18.0.0'}
     dependencies:
       '@smithy/util-buffer-from': 4.0.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /@smithy/util-waiter@4.0.2:
-    resolution: {integrity: sha512-piUTHyp2Axx3p/kc2CIJkYSv0BAaheBQmbACZgQSSfWUumWNW+R1lL+H9PDBxKJkvOeEX+hKYEFiwO8xagL8AQ==}
+  /@smithy/util-waiter@4.0.3:
+    resolution: {integrity: sha512-JtaY3FxmD+te+KSI2FJuEcfNC9T/DGGVf551babM7fAaXhjJUt7oSYurH1Devxd2+BOSUACCgt3buinx4UnmEA==}
     engines: {node: '>=18.0.0'}
     dependencies:
-      '@smithy/abort-controller': 4.0.1
-      '@smithy/types': 4.1.0
-      tslib: 2.8.0
+      '@smithy/abort-controller': 4.0.2
+      '@smithy/types': 4.2.0
+      tslib: 2.8.1
     dev: false
 
   /@stablelib/base64@1.0.1:
@@ -7551,33 +5976,35 @@ packages:
     resolution: {integrity: sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==}
     dev: false
 
-  /@supabase/auth-helpers-nextjs@0.10.0(@supabase/supabase-js@2.46.1):
+  /@supabase/auth-helpers-nextjs@0.10.0(@supabase/supabase-js@2.49.4):
     resolution: {integrity: sha512-2dfOGsM4yZt0oS4TPiE7bD4vf7EVz7NRz/IJrV6vLg0GP7sMUx8wndv2euLGq4BjN9lUCpu6DG/uCC8j+ylwPg==}
+    deprecated: This package is now deprecated - please use the @supabase/ssr package instead.
     peerDependencies:
       '@supabase/supabase-js': ^2.39.8
     dependencies:
-      '@supabase/auth-helpers-shared': 0.7.0(@supabase/supabase-js@2.46.1)
-      '@supabase/supabase-js': 2.46.1
+      '@supabase/auth-helpers-shared': 0.7.0(@supabase/supabase-js@2.49.4)
+      '@supabase/supabase-js': 2.49.4
       set-cookie-parser: 2.7.1
     dev: false
 
-  /@supabase/auth-helpers-shared@0.7.0(@supabase/supabase-js@2.46.1):
+  /@supabase/auth-helpers-shared@0.7.0(@supabase/supabase-js@2.49.4):
     resolution: {integrity: sha512-FBFf2ei2R7QC+B/5wWkthMha8Ca2bWHAndN+syfuEUUfufv4mLcAgBCcgNg5nJR8L0gZfyuaxgubtOc9aW3Cpg==}
+    deprecated: This package is now deprecated - please use the @supabase/ssr package instead.
     peerDependencies:
       '@supabase/supabase-js': ^2.39.8
     dependencies:
-      '@supabase/supabase-js': 2.46.1
+      '@supabase/supabase-js': 2.49.4
       jose: 4.15.9
     dev: false
 
-  /@supabase/auth-js@2.65.1:
-    resolution: {integrity: sha512-IA7i2Xq2SWNCNMKxwmPlHafBQda0qtnFr8QnyyBr+KaSxoXXqEzFCnQ1dGTy6bsZjVBgXu++o3qrDypTspaAPw==}
+  /@supabase/auth-js@2.69.1:
+    resolution: {integrity: sha512-FILtt5WjCNzmReeRLq5wRs3iShwmnWgBvxHfqapC/VoljJl+W8hDAyFmf1NVw3zH+ZjZ05AKxiKxVeb0HNWRMQ==}
     dependencies:
       '@supabase/node-fetch': 2.6.15
     dev: false
 
-  /@supabase/functions-js@2.4.3:
-    resolution: {integrity: sha512-sOLXy+mWRyu4LLv1onYydq+10mNRQ4rzqQxNhbrKLTLTcdcmS9hbWif0bGz/NavmiQfPs4ZcmQJp4WqOXlR4AQ==}
+  /@supabase/functions-js@2.4.4:
+    resolution: {integrity: sha512-WL2p6r4AXNGwop7iwvul2BvOtuJ1YQy8EbOd0dhG1oN1q8el/BIRSFCFnWAMM/vJJlHWLi4ad22sKbKr9mvjoA==}
     dependencies:
       '@supabase/node-fetch': 2.6.15
     dev: false
@@ -7589,25 +6016,19 @@ packages:
       whatwg-url: 5.0.0
     dev: false
 
-  /@supabase/postgrest-js@1.16.3:
-    resolution: {integrity: sha512-HI6dsbW68AKlOPofUjDTaosiDBCtW4XAm0D18pPwxoW3zKOE2Ru13Z69Wuys9fd6iTpfDViNco5sgrtnP0666A==}
-    dependencies:
-      '@supabase/node-fetch': 2.6.15
-    dev: false
-
-  /@supabase/postgrest-js@1.17.0:
-    resolution: {integrity: sha512-vbtb72VpyCkDjcD95SAW4C+3B6NNEICNlEN9H6LcSfIxk5qPImwZ9hVYLa20i+P8GXmKWDoSjjJEK2j6qlR1qQ==}
+  /@supabase/postgrest-js@1.19.4:
+    resolution: {integrity: sha512-O4soKqKtZIW3olqmbXXbKugUtByD2jPa8kL2m2c1oozAO11uCcGrRhkZL0kVxjBLrXHE0mdSkFsMj7jDSfyNpw==}
     dependencies:
       '@supabase/node-fetch': 2.6.15
     dev: false
 
-  /@supabase/realtime-js@2.10.7:
-    resolution: {integrity: sha512-OLI0hiSAqQSqRpGMTUwoIWo51eUivSYlaNBgxsXZE7PSoWh12wPRdVt0psUMaUzEonSB85K21wGc7W5jHnT6uA==}
+  /@supabase/realtime-js@2.11.2:
+    resolution: {integrity: sha512-u/XeuL2Y0QEhXSoIPZZwR6wMXgB+RQbJzG9VErA3VghVt7uRfSVsjeqd7m5GhX3JR6dM/WRmLbVR8URpDWG4+w==}
     dependencies:
       '@supabase/node-fetch': 2.6.15
-      '@types/phoenix': 1.6.5
-      '@types/ws': 8.5.12
-      ws: 8.18.0
+      '@types/phoenix': 1.6.6
+      '@types/ws': 8.18.1
+      ws: 8.18.1
     transitivePeerDependencies:
       - bufferutil
       - utf-8-validate
@@ -7619,14 +6040,14 @@ packages:
       '@supabase/node-fetch': 2.6.15
     dev: false
 
-  /@supabase/supabase-js@2.46.1:
-    resolution: {integrity: sha512-HiBpd8stf7M6+tlr+/82L8b2QmCjAD8ex9YdSAKU+whB/SHXXJdus1dGlqiH9Umy9ePUuxaYmVkGd9BcvBnNvg==}
+  /@supabase/supabase-js@2.49.4:
+    resolution: {integrity: sha512-jUF0uRUmS8BKt37t01qaZ88H9yV1mbGYnqLeuFWLcdV+x1P4fl0yP9DGtaEhFPZcwSom7u16GkLEH9QJZOqOkw==}
     dependencies:
-      '@supabase/auth-js': 2.65.1
-      '@supabase/functions-js': 2.4.3
+      '@supabase/auth-js': 2.69.1
+      '@supabase/functions-js': 2.4.4
       '@supabase/node-fetch': 2.6.15
-      '@supabase/postgrest-js': 1.16.3
-      '@supabase/realtime-js': 2.10.7
+      '@supabase/postgrest-js': 1.19.4
+      '@supabase/realtime-js': 2.11.2
       '@supabase/storage-js': 2.7.1
     transitivePeerDependencies:
       - bufferutil
@@ -7640,73 +6061,73 @@ packages:
   /@swc/helpers@0.5.15:
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
     dependencies:
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /@tabler/icons-react@3.26.0(react@19.1.0):
-    resolution: {integrity: sha512-t18Zmu1ROktB7M8hWQ6vJw+mNpI/LPk5PPxLuE+kNB+4Zzf38GfETL8VF98inhzcfHohsggdROzMzwSAfjcAxw==}
+  /@tabler/icons-react@3.31.0(react@19.1.0):
+    resolution: {integrity: sha512-2rrCM5y/VnaVKnORpDdAua9SEGuJKVqPtWxeQ/vUVsgaUx30LDgBZph7/lterXxDY1IKR6NO//HDhWiifXTi3w==}
     peerDependencies:
       react: '>= 16'
     dependencies:
-      '@tabler/icons': 3.26.0
+      '@tabler/icons': 3.31.0
       react: 19.1.0
     dev: false
 
-  /@tabler/icons@3.26.0:
-    resolution: {integrity: sha512-oO3D4ss+DxzxqU1aDy0f1HmToyrO0gcQWIMpzHAfV1quPUx0BZYvNm5xz1DQb4DxNm/+xNvbBGLJy4pzTLYWag==}
+  /@tabler/icons@3.31.0:
+    resolution: {integrity: sha512-dblAdeKY3+GA1U+Q9eziZ0ooVlZMHsE8dqP0RkwvRtEsAULoKOYaCUOcJ4oW1DjWegdxk++UAt2SlQVnmeHv+g==}
     dev: false
 
-  /@tailwindcss/typography@0.5.15(tailwindcss@3.4.14):
-    resolution: {integrity: sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==}
+  /@tailwindcss/typography@0.5.16(tailwindcss@3.4.17):
+    resolution: {integrity: sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==}
     peerDependencies:
-      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20'
+      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
     dependencies:
       lodash.castarray: 4.4.0
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 3.4.14(ts-node@10.9.2)
+      tailwindcss: 3.4.17(ts-node@10.9.2)
     dev: false
 
-  /@tanstack/query-core@5.59.16:
-    resolution: {integrity: sha512-crHn+G3ltqb5JG0oUv6q+PMz1m1YkjpASrXTU+sYWW9pLk0t2GybUHNRqYPZWhxgjPaVGC4yp92gSFEJgYEsPw==}
+  /@tanstack/query-core@5.74.9:
+    resolution: {integrity: sha512-qmjXpWyigDw4SfqdSBy24FzRvpBPXlaSbl92N77lcrL+yvVQLQkf0T6bQNbTxl9IEB/SvVFhhVZoIlQvFnNuuw==}
     dev: false
 
-  /@tanstack/react-query@5.59.16(react@19.1.0):
-    resolution: {integrity: sha512-MuyWheG47h6ERd4PKQ6V8gDyBu3ThNG22e1fRVwvq6ap3EqsFhyuxCAwhNP/03m/mLg+DAb0upgbPaX6VB+CkQ==}
+  /@tanstack/react-query@5.74.9(react@19.1.0):
+    resolution: {integrity: sha512-F8xCXDQRDgsPzLzX9+d6ycNoITAIU2bycc1idZd06bt/GjN1quEJDjHvEDWZGoVn0A/ZmntVrYv6TE0kR7c7LA==}
     peerDependencies:
       react: ^18 || ^19
     dependencies:
-      '@tanstack/query-core': 5.59.16
+      '@tanstack/query-core': 5.74.9
       react: 19.1.0
     dev: false
 
-  /@tanstack/react-table@8.21.2(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-11tNlEDTdIhMJba2RBH+ecJ9l1zgS2kjmexDPAraulc8jeNA4xocSNeyzextT0XJyASil4XsCYlJmf5jEWAtYg==}
+  /@tanstack/react-table@8.21.3(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
     engines: {node: '>=12'}
     peerDependencies:
       react: '>=16.8'
       react-dom: '>=16.8'
     dependencies:
-      '@tanstack/table-core': 8.21.2
+      '@tanstack/table-core': 8.21.3
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@tanstack/react-table@8.21.2(react-dom@19.0.0)(react@19.0.0):
-    resolution: {integrity: sha512-11tNlEDTdIhMJba2RBH+ecJ9l1zgS2kjmexDPAraulc8jeNA4xocSNeyzextT0XJyASil4XsCYlJmf5jEWAtYg==}
+  /@tanstack/react-table@8.21.3(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
     engines: {node: '>=12'}
     peerDependencies:
       react: '>=16.8'
       react-dom: '>=16.8'
     dependencies:
-      '@tanstack/table-core': 8.21.2
-      react: 19.0.0
-      react-dom: 19.0.0(react@19.0.0)
+      '@tanstack/table-core': 8.21.3
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /@tanstack/table-core@8.21.2:
-    resolution: {integrity: sha512-uvXk/U4cBiFMxt+p9/G7yUWI/UbHYbyghLCjlpWZ3mLeIZiUBSKcUnw9UnKkdRz7Z/N4UBuFLWQdJCjUe7HjvA==}
+  /@tanstack/table-core@8.21.3:
+    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
     engines: {node: '>=12'}
     dev: false
 
@@ -7726,7 +6147,7 @@ packages:
   /@tsconfig/node16@1.0.4:
     resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
 
-  /@turbo/gen@1.13.4(@types/node@20.17.3)(typescript@5.6.3):
+  /@turbo/gen@1.13.4(@types/node@20.17.32)(typescript@5.8.3):
     resolution: {integrity: sha512-PK38N1fHhDUyjLi0mUjv0RbX0xXGwDLQeRSGsIlLcVpP1B5fwodSIwIYXc9vJok26Yne94BX5AGjueYsUT3uUw==}
     hasBin: true
     dependencies:
@@ -7737,8 +6158,8 @@ packages:
       inquirer: 8.2.6
       minimatch: 9.0.5
       node-plop: 0.26.3
-      proxy-agent: 6.4.0
-      ts-node: 10.9.2(@types/node@20.17.3)(typescript@5.6.3)
+      proxy-agent: 6.5.0
+      ts-node: 10.9.2(@types/node@20.17.32)(typescript@5.8.3)
       update-check: 1.5.4
       validate-npm-package-name: 5.0.1
     transitivePeerDependencies:
@@ -7756,49 +6177,57 @@ packages:
       chalk: 2.4.2
       commander: 10.0.1
       execa: 5.1.1
-      fast-glob: 3.3.2
+      fast-glob: 3.3.3
       fs-extra: 10.1.0
       gradient-string: 2.0.2
       inquirer: 8.2.6
       js-yaml: 4.1.0
       ora: 4.1.1
       rimraf: 3.0.2
-      semver: 7.6.3
+      semver: 7.7.1
       update-check: 1.5.4
     dev: true
 
+  /@tybys/wasm-util@0.9.0:
+    resolution: {integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==}
+    requiresBuild: true
+    dependencies:
+      tslib: 2.8.1
+    dev: true
+    optional: true
+
   /@types/babel__core@7.20.5:
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
     dependencies:
-      '@babel/parser': 7.26.1
-      '@babel/types': 7.26.0
-      '@types/babel__generator': 7.6.8
+      '@babel/parser': 7.27.0
+      '@babel/types': 7.27.0
+      '@types/babel__generator': 7.27.0
       '@types/babel__template': 7.4.4
-      '@types/babel__traverse': 7.20.6
+      '@types/babel__traverse': 7.20.7
     dev: false
 
-  /@types/babel__generator@7.6.8:
-    resolution: {integrity: sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==}
+  /@types/babel__generator@7.27.0:
+    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
     dependencies:
-      '@babel/types': 7.26.0
+      '@babel/types': 7.27.0
     dev: false
 
   /@types/babel__template@7.4.4:
     resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
     dependencies:
-      '@babel/parser': 7.26.1
-      '@babel/types': 7.26.0
+      '@babel/parser': 7.27.0
+      '@babel/types': 7.27.0
     dev: false
 
-  /@types/babel__traverse@7.20.6:
-    resolution: {integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==}
+  /@types/babel__traverse@7.20.7:
+    resolution: {integrity: sha512-dkO5fhS7+/oos4ciWxyEyjWe48zmG6wbCheo/G2ZnHx4fs3EU6YC6UM8rk56gAjNJ9P3MTH2jo5jb92/K6wbng==}
     dependencies:
-      '@babel/types': 7.26.0
+      '@babel/types': 7.27.0
 
-  /@types/bun@1.1.14:
-    resolution: {integrity: sha512-opVYiFGtO2af0dnWBdZWlioLBoxSdDO5qokaazLhq8XQtGZbY4pY3/JxY8Zdf/hEwGubbp7ErZXoN1+h2yesxA==}
+  /@types/bun@1.2.11:
+    resolution: {integrity: sha512-ZLbbI91EmmGwlWTRWuV6J19IUiUC5YQ3TCEuSHI3usIP75kuoA8/0PVF+LTrbEnVc8JIhpElWOxv1ocI1fJBbw==}
     dependencies:
-      bun-types: 1.1.37
+      bun-types: 1.2.11
     dev: true
 
   /@types/css-font-loading-module@0.0.7:
@@ -7850,29 +6279,24 @@ packages:
   /@types/eslint@8.56.12:
     resolution: {integrity: sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==}
     dependencies:
-      '@types/estree': 1.0.6
+      '@types/estree': 1.0.7
       '@types/json-schema': 7.0.15
     dev: true
 
-  /@types/estree@1.0.6:
-    resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
-    dev: true
-
   /@types/estree@1.0.7:
     resolution: {integrity: sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==}
-    dev: false
 
   /@types/glob@7.2.0:
     resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
     dependencies:
       '@types/minimatch': 5.1.2
-      '@types/node': 20.17.3
+      '@types/node': 20.17.32
     dev: true
 
   /@types/hast@3.0.4:
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
     dependencies:
-      '@types/unist': 2.0.11
+      '@types/unist': 3.0.3
     dev: false
 
   /@types/inquirer@6.5.0:
@@ -7890,8 +6314,8 @@ packages:
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
     dev: true
 
-  /@types/lodash@4.17.13:
-    resolution: {integrity: sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==}
+  /@types/lodash@4.17.16:
+    resolution: {integrity: sha512-HX7Em5NYQAXKW+1T+FiuG27NGwzJfCX3s1GjOa7ujxZa52kjJLOr4FUxT+giF6Tgxv1e+/czV/iTtBw27WTU9g==}
     dev: true
 
   /@types/mdast@4.0.4:
@@ -7907,47 +6331,49 @@ packages:
   /@types/node-fetch@2.6.12:
     resolution: {integrity: sha512-8nneRWKCg3rMtF69nLQJnOYUcbafYeFSjqkw3jCRLsqkWFlHaoQrr5mXmofFGOx3DKn7UfmBMyov8ySvLRVldA==}
     dependencies:
-      '@types/node': 20.17.3
+      '@types/node': 20.17.32
       form-data: 4.0.2
     dev: false
 
-  /@types/node@18.19.79:
-    resolution: {integrity: sha512-90K8Oayimbctc5zTPHPfZloc/lGVs7f3phUAAMcTgEPtg8kKquGZDERC8K4vkBYkQQh48msiYUslYtxTWvqcAg==}
+  /@types/node@18.19.87:
+    resolution: {integrity: sha512-OIAAu6ypnVZHmsHCeJ+7CCSub38QNBS9uceMQeg7K5Ur0Jr+wG9wEOEvvMbhp09pxD5czIUy/jND7s7Tb6Nw7A==}
     dependencies:
       undici-types: 5.26.5
     dev: false
 
-  /@types/node@20.12.14:
-    resolution: {integrity: sha512-scnD59RpYD91xngrQQLGkE+6UrHUPzeKZWhhjBSa3HSkwjbQc38+q3RoIVEwxQGRw3M+j5hpNAM+lgV3cVormg==}
+  /@types/node@20.17.32:
+    resolution: {integrity: sha512-zeMXFn8zQ+UkjK4ws0RiOC9EWByyW1CcVmLe+2rQocXRsGEDxUCwPEIVgpsGcLHS/P8JkT0oa3839BRABS0oPw==}
     dependencies:
-      undici-types: 5.26.5
-    dev: true
+      undici-types: 6.19.8
 
-  /@types/node@20.17.3:
-    resolution: {integrity: sha512-tSQrmKKatLDGnG92h40GD7FzUt0MjahaHwOME4VAFeeA/Xopayq5qLyQRy7Jg/pjgKIFBXuKcGhJo+UdYG55jQ==}
+  /@types/node@22.15.3:
+    resolution: {integrity: sha512-lX7HFZeHf4QG/J7tBZqrCAXwz9J5RD56Y6MpP0eJkka8p+K0RY/yBTW7CYFJ4VGCclxqOLKmiGP5juQc6MKgcw==}
     dependencies:
-      undici-types: 6.19.8
+      undici-types: 6.21.0
+    dev: false
 
   /@types/normalize-package-data@2.4.4:
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
     dev: true
 
-  /@types/phoenix@1.6.5:
-    resolution: {integrity: sha512-xegpDuR+z0UqG9fwHqNoy3rI7JDlvaPh2TY47Fl80oq6g+hXT+c/LEuE43X48clZ6lOfANl5WrPur9fYO1RJ/w==}
+  /@types/phoenix@1.6.6:
+    resolution: {integrity: sha512-PIzZZlEppgrpoT2QgbnDU+MMzuR6BbCjllj0bM70lWoejMeNJAxCchxnv7J3XFkI8MpygtRpzXrIlmWUBclP5A==}
     dev: false
 
   /@types/prismjs@1.26.5:
     resolution: {integrity: sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==}
     dev: false
 
-  /@types/prop-types@15.7.13:
-    resolution: {integrity: sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==}
+  /@types/prop-types@15.7.14:
+    resolution: {integrity: sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==}
     dev: true
 
-  /@types/react-dom@18.3.1:
-    resolution: {integrity: sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==}
+  /@types/react-dom@18.3.6(@types/react@18.3.20):
+    resolution: {integrity: sha512-nf22//wEbKXusP6E9pfOCDwFdHAX4u172eaJI4YkDRQEZiorm6KfYnSC2SWLDMVWUOWPERmJnN0ujeAfTBLvrw==}
+    peerDependencies:
+      '@types/react': ^18.0.0
     dependencies:
-      '@types/react': 18.3.12
+      '@types/react': 18.3.20
     dev: true
 
   /@types/react-dom@19.1.2(@types/react@19.1.1):
@@ -7960,13 +6386,13 @@ packages:
   /@types/react-syntax-highlighter@15.5.13:
     resolution: {integrity: sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==}
     dependencies:
-      '@types/react': 18.3.12
+      '@types/react': 19.1.1
     dev: true
 
-  /@types/react@18.3.12:
-    resolution: {integrity: sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==}
+  /@types/react@18.3.20:
+    resolution: {integrity: sha512-IPaCZN7PShZK/3t6Q87pfTkRm6oLTd4vztyoj+cbHUF1g3FfVb2tFIL79uCRKEfv16AhqDMBywP2VW3KIZUvcg==}
     dependencies:
-      '@types/prop-types': 15.7.13
+      '@types/prop-types': 15.7.14
       csstype: 3.1.3
     dev: true
 
@@ -7975,34 +6401,31 @@ packages:
     dependencies:
       csstype: 3.1.3
 
-  /@types/semver@7.5.8:
-    resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
+  /@types/semver@7.7.0:
+    resolution: {integrity: sha512-k107IF4+Xr7UHjwDc7Cfd6PRQfbdkiRabXGRjo07b4WyPahFBZCZ1sE+BNxYIJPPg73UkfOsVOLwqVc/6ETrIA==}
     dev: true
 
   /@types/through@0.0.33:
     resolution: {integrity: sha512-HsJ+z3QuETzP3cswwtzt2vEIiHBk/dCcHGhbmG5X3ecnwFD/lPrMpliGXxSCg03L9AhrdwA4Oz/qfspkDW+xGQ==}
     dependencies:
-      '@types/node': 20.17.3
+      '@types/node': 20.17.32
     dev: true
 
   /@types/tinycolor2@1.4.6:
     resolution: {integrity: sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw==}
     dev: true
 
-  /@types/unist@2.0.11:
-    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
-    dev: false
-
   /@types/unist@3.0.3:
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
     dev: false
 
-  /@types/ws@8.5.12:
-    resolution: {integrity: sha512-3tPRkv1EtkDpzlgyKyI8pGsGZAGPEaXeu0DOj5DI25Ja91bdAYddYHbADRYVrZMRbfW+1l5YwXVDKohDJNQxkQ==}
+  /@types/ws@8.18.1:
+    resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==}
     dependencies:
-      '@types/node': 20.17.3
+      '@types/node': 20.17.32
+    dev: false
 
-  /@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.1)(typescript@5.6.3):
+  /@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.1)(typescript@5.8.3):
     resolution: {integrity: sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -8014,24 +6437,24 @@ packages:
         optional: true
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.6.3)
+      '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.8.3)
       '@typescript-eslint/scope-manager': 6.21.0
-      '@typescript-eslint/type-utils': 6.21.0(eslint@8.57.1)(typescript@5.6.3)
-      '@typescript-eslint/utils': 6.21.0(eslint@8.57.1)(typescript@5.6.3)
+      '@typescript-eslint/type-utils': 6.21.0(eslint@8.57.1)(typescript@5.8.3)
+      '@typescript-eslint/utils': 6.21.0(eslint@8.57.1)(typescript@5.8.3)
       '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.3.7
+      debug: 4.4.0
       eslint: 8.57.1
       graphemer: 1.4.0
       ignore: 5.3.2
       natural-compare: 1.4.0
-      semver: 7.6.3
-      ts-api-utils: 1.3.0(typescript@5.6.3)
-      typescript: 5.6.3
+      semver: 7.7.1
+      ts-api-utils: 1.4.3(typescript@5.8.3)
+      typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0)(eslint@8.57.1)(typescript@5.6.3):
+  /@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0)(eslint@8.57.1)(typescript@5.8.3):
     resolution: {integrity: sha512-94EQTWZ40mzBc42ATNIBimBEDltSJ9RQHCC8vc/PDbxi4k8dVwUAv4o98dk50M1zB+JGFxp43FP7f8+FP8R6Sw==}
     engines: {node: ^18.18.0 || >=20.0.0}
     peerDependencies:
@@ -8043,22 +6466,22 @@ packages:
         optional: true
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 7.18.0(eslint@8.57.1)(typescript@5.6.3)
+      '@typescript-eslint/parser': 7.18.0(eslint@8.57.1)(typescript@5.8.3)
       '@typescript-eslint/scope-manager': 7.18.0
-      '@typescript-eslint/type-utils': 7.18.0(eslint@8.57.1)(typescript@5.6.3)
-      '@typescript-eslint/utils': 7.18.0(eslint@8.57.1)(typescript@5.6.3)
+      '@typescript-eslint/type-utils': 7.18.0(eslint@8.57.1)(typescript@5.8.3)
+      '@typescript-eslint/utils': 7.18.0(eslint@8.57.1)(typescript@5.8.3)
       '@typescript-eslint/visitor-keys': 7.18.0
       eslint: 8.57.1
       graphemer: 1.4.0
       ignore: 5.3.2
       natural-compare: 1.4.0
-      ts-api-utils: 1.3.0(typescript@5.6.3)
-      typescript: 5.6.3
+      ts-api-utils: 1.4.3(typescript@5.8.3)
+      typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.3):
+  /@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.3):
     resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -8070,16 +6493,16 @@ packages:
     dependencies:
       '@typescript-eslint/scope-manager': 6.21.0
       '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.6.3)
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.8.3)
       '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.3.7
+      debug: 4.4.0
       eslint: 8.57.1
-      typescript: 5.6.3
+      typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3):
+  /@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.8.3):
     resolution: {integrity: sha512-4Z+L8I2OqhZV8qA132M4wNL30ypZGYOQVBfMgxDH/K5UX0PNqTu1c6za9ST5r9+tavvHiTWmBnKzpCJ/GlVFtg==}
     engines: {node: ^18.18.0 || >=20.0.0}
     peerDependencies:
@@ -8091,11 +6514,11 @@ packages:
     dependencies:
       '@typescript-eslint/scope-manager': 7.18.0
       '@typescript-eslint/types': 7.18.0
-      '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.6.3)
+      '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.8.3)
       '@typescript-eslint/visitor-keys': 7.18.0
-      debug: 4.3.7
+      debug: 4.4.0
       eslint: 8.57.1
-      typescript: 5.6.3
+      typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -8124,7 +6547,7 @@ packages:
       '@typescript-eslint/visitor-keys': 7.18.0
     dev: true
 
-  /@typescript-eslint/type-utils@6.21.0(eslint@8.57.1)(typescript@5.6.3):
+  /@typescript-eslint/type-utils@6.21.0(eslint@8.57.1)(typescript@5.8.3):
     resolution: {integrity: sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -8134,17 +6557,17 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.6.3)
-      '@typescript-eslint/utils': 6.21.0(eslint@8.57.1)(typescript@5.6.3)
-      debug: 4.3.7
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.8.3)
+      '@typescript-eslint/utils': 6.21.0(eslint@8.57.1)(typescript@5.8.3)
+      debug: 4.4.0
       eslint: 8.57.1
-      ts-api-utils: 1.3.0(typescript@5.6.3)
-      typescript: 5.6.3
+      ts-api-utils: 1.4.3(typescript@5.8.3)
+      typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/type-utils@7.18.0(eslint@8.57.1)(typescript@5.6.3):
+  /@typescript-eslint/type-utils@7.18.0(eslint@8.57.1)(typescript@5.8.3):
     resolution: {integrity: sha512-XL0FJXuCLaDuX2sYqZUUSOJ2sG5/i1AAze+axqmLnSkNEVMVYLF+cbwlB2w8D1tinFuSikHmFta+P+HOofrLeA==}
     engines: {node: ^18.18.0 || >=20.0.0}
     peerDependencies:
@@ -8154,12 +6577,12 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.6.3)
-      '@typescript-eslint/utils': 7.18.0(eslint@8.57.1)(typescript@5.6.3)
-      debug: 4.3.7
+      '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.8.3)
+      '@typescript-eslint/utils': 7.18.0(eslint@8.57.1)(typescript@5.8.3)
+      debug: 4.4.0
       eslint: 8.57.1
-      ts-api-utils: 1.3.0(typescript@5.6.3)
-      typescript: 5.6.3
+      ts-api-utils: 1.4.3(typescript@5.8.3)
+      typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -8179,7 +6602,7 @@ packages:
     engines: {node: ^18.18.0 || >=20.0.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree@5.62.0(typescript@5.6.3):
+  /@typescript-eslint/typescript-estree@5.62.0(typescript@5.8.3):
     resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -8190,17 +6613,17 @@ packages:
     dependencies:
       '@typescript-eslint/types': 5.62.0
       '@typescript-eslint/visitor-keys': 5.62.0
-      debug: 4.3.7
+      debug: 4.4.0
       globby: 11.1.0
       is-glob: 4.0.3
-      semver: 7.6.3
-      tsutils: 3.21.0(typescript@5.6.3)
-      typescript: 5.6.3
+      semver: 7.7.1
+      tsutils: 3.21.0(typescript@5.8.3)
+      typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/typescript-estree@6.21.0(typescript@5.6.3):
+  /@typescript-eslint/typescript-estree@6.21.0(typescript@5.8.3):
     resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -8211,18 +6634,18 @@ packages:
     dependencies:
       '@typescript-eslint/types': 6.21.0
       '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.3.7
+      debug: 4.4.0
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.3
-      semver: 7.6.3
-      ts-api-utils: 1.3.0(typescript@5.6.3)
-      typescript: 5.6.3
+      semver: 7.7.1
+      ts-api-utils: 1.4.3(typescript@5.8.3)
+      typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/typescript-estree@7.18.0(typescript@5.6.3):
+  /@typescript-eslint/typescript-estree@7.18.0(typescript@5.8.3):
     resolution: {integrity: sha512-aP1v/BSPnnyhMHts8cf1qQ6Q1IFwwRvAQGRvBFkWlo3/lH29OXA3Pts+c10nxRxIBrDnoMqzhgdwVe5f2D6OzA==}
     engines: {node: ^18.18.0 || >=20.0.0}
     peerDependencies:
@@ -8233,66 +6656,66 @@ packages:
     dependencies:
       '@typescript-eslint/types': 7.18.0
       '@typescript-eslint/visitor-keys': 7.18.0
-      debug: 4.3.7
+      debug: 4.4.0
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.5
-      semver: 7.6.3
-      ts-api-utils: 1.3.0(typescript@5.6.3)
-      typescript: 5.6.3
+      semver: 7.7.1
+      ts-api-utils: 1.4.3(typescript@5.8.3)
+      typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils@5.62.0(eslint@8.57.1)(typescript@5.6.3):
+  /@typescript-eslint/utils@5.62.0(eslint@8.57.1)(typescript@5.8.3):
     resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1)
+      '@eslint-community/eslint-utils': 4.6.1(eslint@8.57.1)
       '@types/json-schema': 7.0.15
-      '@types/semver': 7.5.8
+      '@types/semver': 7.7.0
       '@typescript-eslint/scope-manager': 5.62.0
       '@typescript-eslint/types': 5.62.0
-      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.6.3)
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.8.3)
       eslint: 8.57.1
       eslint-scope: 5.1.1
-      semver: 7.6.3
+      semver: 7.7.1
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /@typescript-eslint/utils@6.21.0(eslint@8.57.1)(typescript@5.6.3):
+  /@typescript-eslint/utils@6.21.0(eslint@8.57.1)(typescript@5.8.3):
     resolution: {integrity: sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1)
+      '@eslint-community/eslint-utils': 4.6.1(eslint@8.57.1)
       '@types/json-schema': 7.0.15
-      '@types/semver': 7.5.8
+      '@types/semver': 7.7.0
       '@typescript-eslint/scope-manager': 6.21.0
       '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.6.3)
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.8.3)
       eslint: 8.57.1
-      semver: 7.6.3
+      semver: 7.7.1
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /@typescript-eslint/utils@7.18.0(eslint@8.57.1)(typescript@5.6.3):
+  /@typescript-eslint/utils@7.18.0(eslint@8.57.1)(typescript@5.8.3):
     resolution: {integrity: sha512-kK0/rNa2j74XuHVcoCZxdFBMF+aq/vH83CXAOHieC+2Gis4mF8jJXT5eAfyD3K0sAxtPuwxaIOIOvhwzVDt/kw==}
     engines: {node: ^18.18.0 || >=20.0.0}
     peerDependencies:
       eslint: ^8.56.0
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1)
+      '@eslint-community/eslint-utils': 4.6.1(eslint@8.57.1)
       '@typescript-eslint/scope-manager': 7.18.0
       '@typescript-eslint/types': 7.18.0
-      '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.6.3)
+      '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.8.3)
       eslint: 8.57.1
     transitivePeerDependencies:
       - supports-color
@@ -8323,57 +6746,148 @@ packages:
       eslint-visitor-keys: 3.4.3
     dev: true
 
-  /@uiw/codemirror-extensions-basic-setup@4.23.10(@codemirror/autocomplete@6.18.6)(@codemirror/commands@6.7.1)(@codemirror/language@6.10.3)(@codemirror/lint@6.8.5)(@codemirror/search@6.5.10)(@codemirror/state@6.5.2)(@codemirror/view@6.36.5):
-    resolution: {integrity: sha512-zpbmSeNs3OU/f/Eyd6brFnjsBUYwv2mFjWxlAsIRSwTlW+skIT60rQHFBSfsj/5UVSxSLWVeUYczN7AyXvgTGQ==}
-    peerDependencies:
-      '@codemirror/autocomplete': '>=6.0.0'
-      '@codemirror/commands': '>=6.0.0'
-      '@codemirror/language': '>=6.0.0'
-      '@codemirror/lint': '>=6.0.0'
-      '@codemirror/search': '>=6.0.0'
-      '@codemirror/state': '>=6.0.0'
-      '@codemirror/view': '>=6.0.0'
-    dependencies:
-      '@codemirror/autocomplete': 6.18.6
-      '@codemirror/commands': 6.7.1
-      '@codemirror/language': 6.10.3
-      '@codemirror/lint': 6.8.5
-      '@codemirror/search': 6.5.10
-      '@codemirror/state': 6.5.2
-      '@codemirror/view': 6.36.5
-    dev: false
+  /@ungap/structured-clone@1.3.0:
+    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
 
-  /@uiw/react-codemirror@4.23.10(@babel/runtime@7.26.0)(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.10.3)(@codemirror/lint@6.8.5)(@codemirror/search@6.5.10)(@codemirror/state@6.5.2)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.36.5)(codemirror@6.0.1)(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-AbN4eVHOL4ckRuIXpZxkzEqL/1ChVA+BSdEnAKjIB68pLQvKsVoYbiFP8zkXkYc4+Fcgq5KbAjvYqdo4ewemKw==}
-    peerDependencies:
-      '@babel/runtime': '>=7.11.0'
-      '@codemirror/state': '>=6.0.0'
-      '@codemirror/theme-one-dark': '>=6.0.0'
-      '@codemirror/view': '>=6.0.0'
-      codemirror: '>=6.0.0'
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
+  /@unrs/resolver-binding-darwin-arm64@1.7.2:
+    resolution: {integrity: sha512-vxtBno4xvowwNmO/ASL0Y45TpHqmNkAaDtz4Jqb+clmcVSSl8XCG/PNFFkGsXXXS6AMjP+ja/TtNCFFa1QwLRg==}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-darwin-x64@1.7.2:
+    resolution: {integrity: sha512-qhVa8ozu92C23Hsmv0BF4+5Dyyd5STT1FolV4whNgbY6mj3kA0qsrGPe35zNR3wAN7eFict3s4Rc2dDTPBTuFQ==}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-freebsd-x64@1.7.2:
+    resolution: {integrity: sha512-zKKdm2uMXqLFX6Ac7K5ElnnG5VIXbDlFWzg4WJ8CGUedJryM5A3cTgHuGMw1+P5ziV8CRhnSEgOnurTI4vpHpg==}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-linux-arm-gnueabihf@1.7.2:
+    resolution: {integrity: sha512-8N1z1TbPnHH+iDS/42GJ0bMPLiGK+cUqOhNbMKtWJ4oFGzqSJk/zoXFzcQkgtI63qMcUI7wW1tq2usZQSb2jxw==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-linux-arm-musleabihf@1.7.2:
+    resolution: {integrity: sha512-tjYzI9LcAXR9MYd9rO45m1s0B/6bJNuZ6jeOxo1pq1K6OBuRMMmfyvJYval3s9FPPGmrldYA3mi4gWDlWuTFGA==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-linux-arm64-gnu@1.7.2:
+    resolution: {integrity: sha512-jon9M7DKRLGZ9VYSkFMflvNqu9hDtOCEnO2QAryFWgT6o6AXU8du56V7YqnaLKr6rAbZBWYsYpikF226v423QA==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-linux-arm64-musl@1.7.2:
+    resolution: {integrity: sha512-c8Cg4/h+kQ63pL43wBNaVMmOjXI/X62wQmru51qjfTvI7kmCy5uHTJvK/9LrF0G8Jdx8r34d019P1DVJmhXQpA==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-linux-ppc64-gnu@1.7.2:
+    resolution: {integrity: sha512-A+lcwRFyrjeJmv3JJvhz5NbcCkLQL6Mk16kHTNm6/aGNc4FwPHPE4DR9DwuCvCnVHvF5IAd9U4VIs/VvVir5lg==}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-linux-riscv64-gnu@1.7.2:
+    resolution: {integrity: sha512-hQQ4TJQrSQW8JlPm7tRpXN8OCNP9ez7PajJNjRD1ZTHQAy685OYqPrKjfaMw/8LiHCt8AZ74rfUVHP9vn0N69Q==}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-linux-riscv64-musl@1.7.2:
+    resolution: {integrity: sha512-NoAGbiqrxtY8kVooZ24i70CjLDlUFI7nDj3I9y54U94p+3kPxwd2L692YsdLa+cqQ0VoqMWoehDFp21PKRUoIQ==}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-linux-s390x-gnu@1.7.2:
+    resolution: {integrity: sha512-KaZByo8xuQZbUhhreBTW+yUnOIHUsv04P8lKjQ5otiGoSJ17ISGYArc+4vKdLEpGaLbemGzr4ZeUbYQQsLWFjA==}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-linux-x64-gnu@1.7.2:
+    resolution: {integrity: sha512-dEidzJDubxxhUCBJ/SHSMJD/9q7JkyfBMT77Px1npl4xpg9t0POLvnWywSk66BgZS/b2Hy9Y1yFaoMTFJUe9yg==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-linux-x64-musl@1.7.2:
+    resolution: {integrity: sha512-RvP+Ux3wDjmnZDT4XWFfNBRVG0fMsc+yVzNFUqOflnDfZ9OYujv6nkh+GOr+watwrW4wdp6ASfG/e7bkDradsw==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-wasm32-wasi@1.7.2:
+    resolution: {integrity: sha512-y797JBmO9IsvXVRCKDXOxjyAE4+CcZpla2GSoBQ33TVb3ILXuFnMrbR/QQZoauBYeOFuu4w3ifWLw52sdHGz6g==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    requiresBuild: true
     dependencies:
-      '@babel/runtime': 7.26.0
-      '@codemirror/commands': 6.7.1
-      '@codemirror/state': 6.5.2
-      '@codemirror/theme-one-dark': 6.1.2
-      '@codemirror/view': 6.36.5
-      '@uiw/codemirror-extensions-basic-setup': 4.23.10(@codemirror/autocomplete@6.18.6)(@codemirror/commands@6.7.1)(@codemirror/language@6.10.3)(@codemirror/lint@6.8.5)(@codemirror/search@6.5.10)(@codemirror/state@6.5.2)(@codemirror/view@6.36.5)
-      codemirror: 6.0.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-    transitivePeerDependencies:
-      - '@codemirror/autocomplete'
-      - '@codemirror/language'
-      - '@codemirror/lint'
-      - '@codemirror/search'
-    dev: false
+      '@napi-rs/wasm-runtime': 0.2.9
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-win32-arm64-msvc@1.7.2:
+    resolution: {integrity: sha512-gtYTh4/VREVSLA+gHrfbWxaMO/00y+34htY7XpioBTy56YN2eBjkPrY1ML1Zys89X3RJDKVaogzwxlM1qU7egg==}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/resolver-binding-win32-ia32-msvc@1.7.2:
+    resolution: {integrity: sha512-Ywv20XHvHTDRQs12jd3MY8X5C8KLjDbg/jyaal/QLKx3fAShhJyD4blEANInsjxW3P7isHx1Blt56iUDDJO3jg==}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  /@ungap/structured-clone@1.2.0:
-    resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
+  /@unrs/resolver-binding-win32-x64-msvc@1.7.2:
+    resolution: {integrity: sha512-friS8NEQfHaDbkThxopGk+LuE5v3iY0StruifjQEt7SLbA46OnfgMO15sOTkbpJkol6RB+1l1TYPXh0sCddpvA==}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  /@vercel/style-guide@5.2.0(eslint@8.57.1)(prettier@3.3.3)(typescript@5.6.3):
+  /@vercel/style-guide@5.2.0(eslint@8.57.1)(prettier@3.5.3)(typescript@5.8.3):
     resolution: {integrity: sha512-fNSKEaZvSkiBoF6XEefs8CcgAV9K9e+MbcsDZjUsktHycKdA0jvjAzQi1W/FzLS+Nr5zZ6oejCwq/97dHUKe0g==}
     engines: {node: '>=16'}
     peerDependencies:
@@ -8391,59 +6905,53 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@babel/core': 7.26.0
-      '@babel/eslint-parser': 7.25.9(@babel/core@7.26.0)(eslint@8.57.1)
-      '@rushstack/eslint-patch': 1.10.4
-      '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.1)(typescript@5.6.3)
-      '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.6.3)
+      '@babel/core': 7.26.10
+      '@babel/eslint-parser': 7.27.0(@babel/core@7.26.10)(eslint@8.57.1)
+      '@rushstack/eslint-patch': 1.11.0
+      '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.1)(typescript@5.8.3)
+      '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.8.3)
       eslint: 8.57.1
       eslint-config-prettier: 9.1.0(eslint@8.57.1)
       eslint-import-resolver-alias: 1.1.2(eslint-plugin-import@2.31.0)
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@6.21.0)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.31.0)(eslint@8.57.1)
       eslint-plugin-eslint-comments: 3.2.0(eslint@8.57.1)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.18.0)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
-      eslint-plugin-jest: 27.9.0(@typescript-eslint/eslint-plugin@6.21.0)(eslint@8.57.1)(typescript@5.6.3)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.18.0)(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
+      eslint-plugin-jest: 27.9.0(@typescript-eslint/eslint-plugin@6.21.0)(eslint@8.57.1)(typescript@5.8.3)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
       eslint-plugin-playwright: 0.16.0(eslint-plugin-jest@27.9.0)(eslint@8.57.1)
-      eslint-plugin-react: 7.37.2(eslint@8.57.1)
+      eslint-plugin-react: 7.37.5(eslint@8.57.1)
       eslint-plugin-react-hooks: 4.6.2(eslint@8.57.1)
-      eslint-plugin-testing-library: 6.4.0(eslint@8.57.1)(typescript@5.6.3)
+      eslint-plugin-testing-library: 6.5.0(eslint@8.57.1)(typescript@5.8.3)
       eslint-plugin-tsdoc: 0.2.17
       eslint-plugin-unicorn: 48.0.1(eslint@8.57.1)
-      prettier: 3.3.3
-      prettier-plugin-packagejson: 2.5.3(prettier@3.3.3)
-      typescript: 5.6.3
+      prettier: 3.5.3
+      prettier-plugin-packagejson: 2.5.10(prettier@3.5.3)
+      typescript: 5.8.3
     transitivePeerDependencies:
-      - eslint-import-resolver-node
       - eslint-import-resolver-webpack
       - eslint-plugin-import-x
       - jest
       - supports-color
     dev: true
 
-  /@vitejs/plugin-react@4.3.4(vite@6.2.1):
-    resolution: {integrity: sha512-SCCPBJtYLdE8PX/7ZQAs1QAZ8Jqwih+0VBLum1EGqmCCQal+MIUqLCzj3ZUy8ufbC0cAM4LRlSTm7IQJwWT4ug==}
+  /@vitejs/plugin-react@4.4.1(vite@6.3.3):
+    resolution: {integrity: sha512-IpEm5ZmeXAP/osiBXVVP5KjFMzbWOonMs0NaQQl+xYnUAcq4oHUBsF2+p4MgKWG4YMmFYJU8A6sxRPuowllm6w==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       vite: ^4.2.0 || ^5.0.0 || ^6.0.0
     dependencies:
-      '@babel/core': 7.26.0
-      '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.26.0)
-      '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.0)
+      '@babel/core': 7.26.10
+      '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.26.10)
+      '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.10)
       '@types/babel__core': 7.20.5
-      react-refresh: 0.14.2
-      vite: 6.2.1
+      react-refresh: 0.17.0
+      vite: 6.3.3
     transitivePeerDependencies:
       - supports-color
     dev: false
 
   /@xstate/fsm@1.6.5:
-    resolution: {integrity: sha512-b5o1I6aLNeYlU/3CPlj/Z91ybk1gUsKT+5NAJI+2W4UjvS5KLG28K9v5UvNoFVjHV8PajVZ00RH3vnjyQO7ZAw==}
-    dev: false
-
-  /abbrev@3.0.0:
-    resolution: {integrity: sha512-+/kfrslGQ7TNV2ecmQwMJj/B65g5KVq1/L3SGVZ3tCYGqlzFuFCGBZJtMP99wH3NpEUyAjn0zPdPUg0D+DwrOA==}
-    engines: {node: ^18.17.0 || >=20.5.0}
+    resolution: {integrity: sha512-b5o1I6aLNeYlU/3CPlj/Z91ybk1gUsKT+5NAJI+2W4UjvS5KLG28K9v5UvNoFVjHV8PajVZ00RH3vnjyQO7ZAw==}
     dev: false
 
   /abort-controller@3.0.0:
@@ -8453,32 +6961,28 @@ packages:
       event-target-shim: 5.0.1
     dev: false
 
-  /acorn-jsx@5.3.2(acorn@8.14.0):
+  /acorn-jsx@5.3.2(acorn@8.14.1):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      acorn: 8.14.0
+      acorn: 8.14.1
     dev: true
 
   /acorn-walk@8.3.4:
     resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==}
     engines: {node: '>=0.4.0'}
     dependencies:
-      acorn: 8.14.0
+      acorn: 8.14.1
 
-  /acorn@8.14.0:
-    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
+  /acorn@8.14.1:
+    resolution: {integrity: sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==}
     engines: {node: '>=0.4.0'}
     hasBin: true
 
-  /agent-base@7.1.1:
-    resolution: {integrity: sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==}
+  /agent-base@7.1.3:
+    resolution: {integrity: sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==}
     engines: {node: '>= 14'}
-    dependencies:
-      debug: 4.3.7
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /agentkeepalive@4.6.0:
@@ -8505,8 +7009,8 @@ packages:
       uri-js: 4.4.1
     dev: true
 
-  /anser@2.3.0:
-    resolution: {integrity: sha512-pGGR7Nq1K/i9KGs29PvHDXA8AsfZ3OiYRMDClT3FIC085Kbns9CJ7ogq9MEiGnrjd9THOGoh7B+kWzePHzZyJQ==}
+  /anser@2.3.2:
+    resolution: {integrity: sha512-PMqBCBvrOVDRqLGooQb+z+t1Q0PiPyurUQeZRR5uHBOVZcW8B04KMmnT12USnhpNX2wCPagWzLVppQMUG3u0Dw==}
     dev: false
 
   /ansi-escapes@3.2.0:
@@ -8593,7 +7097,7 @@ packages:
     resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
     engines: {node: '>=10'}
     dependencies:
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /aria-query@5.3.2:
@@ -8601,24 +7105,24 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /array-buffer-byte-length@1.0.1:
-    resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==}
+  /array-buffer-byte-length@1.0.2:
+    resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
-      is-array-buffer: 3.0.4
+      call-bound: 1.0.4
+      is-array-buffer: 3.0.5
     dev: true
 
   /array-includes@3.1.8:
     resolution: {integrity: sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-object-atoms: 1.0.0
-      get-intrinsic: 1.2.7
-      is-string: 1.0.7
+      es-abstract: 1.23.9
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      is-string: 1.1.1
     dev: true
 
   /array-move@3.0.1:
@@ -8629,74 +7133,75 @@ packages:
   /array-union@2.1.0:
     resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
     engines: {node: '>=8'}
+    dev: true
 
   /array.prototype.findlast@1.2.5:
     resolution: {integrity: sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.9
       es-errors: 1.3.0
-      es-object-atoms: 1.0.0
-      es-shim-unscopables: 1.0.2
+      es-object-atoms: 1.1.1
+      es-shim-unscopables: 1.1.0
     dev: true
 
-  /array.prototype.findlastindex@1.2.5:
-    resolution: {integrity: sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==}
+  /array.prototype.findlastindex@1.2.6:
+    resolution: {integrity: sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.9
       es-errors: 1.3.0
-      es-object-atoms: 1.0.0
-      es-shim-unscopables: 1.0.2
+      es-object-atoms: 1.1.1
+      es-shim-unscopables: 1.1.0
     dev: true
 
-  /array.prototype.flat@1.3.2:
-    resolution: {integrity: sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==}
+  /array.prototype.flat@1.3.3:
+    resolution: {integrity: sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-shim-unscopables: 1.0.2
+      es-abstract: 1.23.9
+      es-shim-unscopables: 1.1.0
     dev: true
 
-  /array.prototype.flatmap@1.3.2:
-    resolution: {integrity: sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==}
+  /array.prototype.flatmap@1.3.3:
+    resolution: {integrity: sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-shim-unscopables: 1.0.2
+      es-abstract: 1.23.9
+      es-shim-unscopables: 1.1.0
     dev: true
 
   /array.prototype.tosorted@1.1.4:
     resolution: {integrity: sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.9
       es-errors: 1.3.0
-      es-shim-unscopables: 1.0.2
+      es-shim-unscopables: 1.1.0
     dev: true
 
-  /arraybuffer.prototype.slice@1.0.3:
-    resolution: {integrity: sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==}
+  /arraybuffer.prototype.slice@1.0.4:
+    resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
     engines: {node: '>= 0.4'}
     dependencies:
-      array-buffer-byte-length: 1.0.1
-      call-bind: 1.0.7
+      array-buffer-byte-length: 1.0.2
+      call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.9
       es-errors: 1.3.0
-      get-intrinsic: 1.2.7
-      is-array-buffer: 3.0.4
-      is-shared-array-buffer: 1.0.3
+      get-intrinsic: 1.3.0
+      is-array-buffer: 3.0.5
     dev: true
 
   /ast-types-flow@0.0.8:
@@ -8707,31 +7212,36 @@ packages:
     resolution: {integrity: sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==}
     engines: {node: '>=4'}
     dependencies:
-      tslib: 2.8.0
+      tslib: 2.8.1
+    dev: true
+
+  /async-function@1.0.0:
+    resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
+    engines: {node: '>= 0.4'}
     dev: true
 
   /asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
     dev: false
 
-  /attr-accept@2.2.4:
-    resolution: {integrity: sha512-2pA6xFIbdTUDCAwjN8nQwI+842VwzbDUXO2IYlpPXQIORgKnavorcr4Ce3rwh+zsNg9zK7QPsdvDj3Lum4WX4w==}
+  /attr-accept@2.2.5:
+    resolution: {integrity: sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==}
     engines: {node: '>=4'}
     dev: false
 
-  /autoprefixer@10.4.20(postcss@8.4.47):
-    resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==}
+  /autoprefixer@10.4.21(postcss@8.5.3):
+    resolution: {integrity: sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==}
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      browserslist: 4.24.2
-      caniuse-lite: 1.0.30001675
+      browserslist: 4.24.4
+      caniuse-lite: 1.0.30001715
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.1.1
-      postcss: 8.4.47
+      postcss: 8.5.3
       postcss-value-parser: 4.2.0
     dev: false
 
@@ -8739,11 +7249,11 @@ packages:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
     dependencies:
-      possible-typed-array-names: 1.0.0
+      possible-typed-array-names: 1.1.0
     dev: true
 
-  /axe-core@4.10.2:
-    resolution: {integrity: sha512-RE3mdQ7P3FRSe7eqCWoeQ/Z9QXrtniSjp1wUjt5nRC3WIpz5rSCve6o3fsZ2aCpJtrZjSZgjwXAoTO5k4tEI0w==}
+  /axe-core@4.10.3:
+    resolution: {integrity: sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==}
     engines: {node: '>=4'}
     dev: true
 
@@ -8807,15 +7317,15 @@ packages:
     dependencies:
       fill-range: 7.1.1
 
-  /browserslist@4.24.2:
-    resolution: {integrity: sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==}
+  /browserslist@4.24.4:
+    resolution: {integrity: sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001675
-      electron-to-chromium: 1.5.49
-      node-releases: 2.0.18
-      update-browserslist-db: 1.1.1(browserslist@4.24.2)
+      caniuse-lite: 1.0.30001715
+      electron-to-chromium: 1.5.144
+      node-releases: 2.0.19
+      update-browserslist-db: 1.1.3(browserslist@4.24.4)
 
   /buffer@5.7.1:
     resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
@@ -8836,23 +7346,12 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /bun-types@1.1.37:
-    resolution: {integrity: sha512-C65lv6eBr3LPJWFZ2gswyrGZ82ljnH8flVE03xeXxKhi2ZGtFiO4isRKTKnitbSqtRAcaqYSR6djt1whI66AbA==}
+  /bun-types@1.2.11:
+    resolution: {integrity: sha512-dbkp5Lo8HDrXkLrONm6bk+yiiYQSntvFUzQp0v3pzTAsXk6FtgVMjdQ+lzFNVAmQFUkPQZ3WMZqH5tTo+Dp/IA==}
     dependencies:
-      '@types/node': 20.12.14
-      '@types/ws': 8.5.12
+      '@types/node': 20.17.32
     dev: true
 
-  /bundle-require@4.2.1(esbuild@0.17.19):
-    resolution: {integrity: sha512-7Q/6vkyYAwOmQNRw75x+4yRtZCZJXUDmHHlFdkiV0wgv/reNjtJwpu1jPJ0w2kbEpIM0uoKI3S4/f39dU7AjSA==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    peerDependencies:
-      esbuild: '>=0.17'
-    dependencies:
-      esbuild: 0.17.19
-      load-tsconfig: 0.2.5
-    dev: false
-
   /busboy@1.6.0:
     resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
     engines: {node: '>=10.16.0'}
@@ -8865,11 +7364,6 @@ packages:
     engines: {node: '>= 0.8'}
     dev: false
 
-  /cac@6.7.14:
-    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
-    engines: {node: '>=8'}
-    dev: false
-
   /call-bind-apply-helpers@1.0.2:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
     engines: {node: '>= 0.4'}
@@ -8877,23 +7371,22 @@ packages:
       es-errors: 1.3.0
       function-bind: 1.1.2
 
-  /call-bind@1.0.7:
-    resolution: {integrity: sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==}
+  /call-bind@1.0.8:
+    resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
     engines: {node: '>= 0.4'}
     dependencies:
+      call-bind-apply-helpers: 1.0.2
       es-define-property: 1.0.1
-      es-errors: 1.3.0
-      function-bind: 1.1.2
-      get-intrinsic: 1.2.7
+      get-intrinsic: 1.3.0
       set-function-length: 1.2.2
     dev: true
 
-  /call-bound@1.0.3:
-    resolution: {integrity: sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==}
+  /call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
     engines: {node: '>= 0.4'}
     dependencies:
       call-bind-apply-helpers: 1.0.2
-      get-intrinsic: 1.2.7
+      get-intrinsic: 1.3.0
 
   /callsites@3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
@@ -8912,8 +7405,8 @@ packages:
     engines: {node: '>= 6'}
     dev: false
 
-  /caniuse-lite@1.0.30001675:
-    resolution: {integrity: sha512-/wV1bQwPrkLiQMjaJF5yUMVM/VdRPOCU8QZ+PmG6uW6DvYSrNY1bpwHI/3mOcUosLaJCzYDi5o91IQB51ft6cg==}
+  /caniuse-lite@1.0.30001715:
+    resolution: {integrity: sha512-7ptkFGMm2OAOgvZpwgA4yjQ5SQbrNVGdRjzH0pBdy1Fasvcr+KAeECmbCAECzTuDuoX0FCY8KzUxjf9+9kfZEw==}
 
   /ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@@ -9000,7 +7493,7 @@ packages:
       css-what: 6.1.0
       domelementtype: 2.3.0
       domhandler: 5.0.3
-      domutils: 3.2.1
+      domutils: 3.2.2
     dev: false
 
   /cheerio@1.0.0:
@@ -9010,13 +7503,13 @@ packages:
       cheerio-select: 2.1.0
       dom-serializer: 2.0.0
       domhandler: 5.0.3
-      domutils: 3.2.1
+      domutils: 3.2.2
       encoding-sniffer: 0.2.0
       htmlparser2: 9.1.0
-      parse5: 7.2.1
+      parse5: 7.3.0
       parse5-htmlparser2-tree-adapter: 7.1.0
       parse5-parser-stream: 7.1.2
-      undici: 6.21.0
+      undici: 6.21.2
       whatwg-mimetype: 4.0.0
     dev: false
 
@@ -9040,12 +7533,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /class-variance-authority@0.7.0:
-    resolution: {integrity: sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==}
-    dependencies:
-      clsx: 2.0.0
-    dev: false
-
   /class-variance-authority@0.7.1:
     resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
     dependencies:
@@ -9118,11 +7605,6 @@ packages:
     engines: {node: '>=0.8'}
     dev: true
 
-  /clsx@2.0.0:
-    resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==}
-    engines: {node: '>=6'}
-    dev: false
-
   /clsx@2.1.1:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
@@ -9162,18 +7644,6 @@ packages:
       - '@types/react-dom'
     dev: false
 
-  /codemirror@6.0.1:
-    resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
-    dependencies:
-      '@codemirror/autocomplete': 6.18.6
-      '@codemirror/commands': 6.7.1
-      '@codemirror/language': 6.10.3
-      '@codemirror/lint': 6.8.5
-      '@codemirror/search': 6.5.10
-      '@codemirror/state': 6.5.2
-      '@codemirror/view': 6.36.5
-    dev: false
-
   /color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -9226,6 +7696,7 @@ packages:
   /commander@10.0.1:
     resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
     engines: {node: '>=14'}
+    dev: true
 
   /commander@4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
@@ -9236,13 +7707,6 @@ packages:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
 
-  /config-chain@1.1.13:
-    resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
-    dependencies:
-      ini: 1.3.8
-      proto-list: 1.2.4
-    dev: false
-
   /configstore@4.0.0:
     resolution: {integrity: sha512-CmquAXFBocrzaSM8mtGPMM/HiWmyIpr4CcJl/rgY2uCObZ/S7cKU0silxslqJejl+t/T9HS8E0PUNQD81JGUEQ==}
     engines: {node: '>=6'}
@@ -9275,8 +7739,8 @@ packages:
     engines: {node: '>=18'}
     dev: false
 
-  /core-js-pure@3.38.1:
-    resolution: {integrity: sha512-BY8Etc1FZqdw1glX0XNOq2FDwfrg/VGqoZOZCdaL+UmdaqDwQwYXkMJT4t6In+zfEfOJDcM9T0KdbBeJg8KKCQ==}
+  /core-js-pure@3.41.0:
+    resolution: {integrity: sha512-71Gzp96T9YPk63aUvE5Q5qP+DryB4ZloUZPSOebGM88VNw8VNfvdA7z6kGA8iGOTEzAomsRidp4jXSmUIJsL+Q==}
     requiresBuild: true
     dev: true
 
@@ -9287,18 +7751,14 @@ packages:
     resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
     dev: false
 
-  /cross-spawn@7.0.3:
-    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
+  /cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
     dependencies:
       path-key: 3.1.1
       shebang-command: 2.0.0
       which: 2.0.2
 
-  /crypto-js@4.2.0:
-    resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==}
-    dev: false
-
   /crypto-random-string@1.0.0:
     resolution: {integrity: sha512-GsVpkFPlycH7/fRR7Dhcmnoii54gV1nz7y4CWyeFS14N+JVBBhY+r8amRHE4BwSYal7BPTDp8isvAlCxyFt3Hg==}
     engines: {node: '>=4'}
@@ -9310,7 +7770,7 @@ packages:
       boolbase: 1.0.0
       css-what: 6.1.0
       domhandler: 5.0.3
-      domutils: 3.2.1
+      domutils: 3.2.2
       nth-check: 2.1.1
     dev: false
 
@@ -9325,10 +7785,6 @@ packages:
     hasBin: true
     dev: false
 
-  /csstype@3.1.1:
-    resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
-    dev: false
-
   /csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
@@ -9430,31 +7886,31 @@ packages:
     engines: {node: '>= 14'}
     dev: true
 
-  /data-view-buffer@1.0.1:
-    resolution: {integrity: sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==}
+  /data-view-buffer@1.0.2:
+    resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
       es-errors: 1.3.0
-      is-data-view: 1.0.1
+      is-data-view: 1.0.2
     dev: true
 
-  /data-view-byte-length@1.0.1:
-    resolution: {integrity: sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==}
+  /data-view-byte-length@1.0.2:
+    resolution: {integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
       es-errors: 1.3.0
-      is-data-view: 1.0.1
+      is-data-view: 1.0.2
     dev: true
 
-  /data-view-byte-offset@1.0.0:
-    resolution: {integrity: sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==}
+  /data-view-byte-offset@1.0.1:
+    resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
       es-errors: 1.3.0
-      is-data-view: 1.0.1
+      is-data-view: 1.0.2
     dev: true
 
   /date-fns@4.1.0:
@@ -9472,8 +7928,8 @@ packages:
       ms: 2.1.3
     dev: true
 
-  /debug@4.3.7:
-    resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==}
+  /debug@4.4.0:
+    resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
     engines: {node: '>=6.0'}
     peerDependencies:
       supports-color: '*'
@@ -9579,8 +8035,8 @@ packages:
     engines: {node: '>=12.20'}
     dev: true
 
-  /detect-libc@2.0.3:
-    resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
+  /detect-libc@2.0.4:
+    resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
     engines: {node: '>=8'}
     requiresBuild: true
     dev: false
@@ -9614,6 +8070,7 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       path-type: 4.0.0
+    dev: true
 
   /dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
@@ -9636,7 +8093,7 @@ packages:
   /dom-helpers@5.2.1:
     resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       csstype: 3.1.3
     dev: false
 
@@ -9659,8 +8116,8 @@ packages:
       domelementtype: 2.3.0
     dev: false
 
-  /domutils@3.2.1:
-    resolution: {integrity: sha512-xWXmuRnN9OMP6ptPd2+H0cCbcYBULa5YDTbMm/2lvkWvNA3O4wcW+GvzooqBuNM8yy6pl3VIAeJTUUWUbfI5Fw==}
+  /domutils@3.2.2:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
     dependencies:
       dom-serializer: 2.0.0
       domelementtype: 2.3.0
@@ -9677,7 +8134,7 @@ packages:
     resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==}
     dependencies:
       no-case: 3.0.4
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /dot-prop@4.2.1:
@@ -9692,8 +8149,8 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /dotenv@16.4.5:
-    resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==}
+  /dotenv@16.5.0:
+    resolution: {integrity: sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==}
     engines: {node: '>=12'}
 
   /dunder-proto@1.0.1:
@@ -9708,49 +8165,28 @@ packages:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
     dev: false
 
-  /editorconfig@1.0.4:
-    resolution: {integrity: sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==}
-    engines: {node: '>=14'}
-    hasBin: true
-    dependencies:
-      '@one-ini/wasm': 0.1.1
-      commander: 10.0.1
-      minimatch: 9.0.1
-      semver: 7.6.3
-    dev: false
-
-  /electron-to-chromium@1.5.49:
-    resolution: {integrity: sha512-ZXfs1Of8fDb6z7WEYZjXpgIRF6MEu8JdeGA0A40aZq6OQbS+eJpnnV49epZRna2DU/YsEjSQuGtQPPtvt6J65A==}
+  /electron-to-chromium@1.5.144:
+    resolution: {integrity: sha512-eJIaMRKeAzxfBSxtjYnoIAw/tdD6VIH6tHBZepZnAbE3Gyqqs5mGN87DvcldPUbVkIljTK8pY0CMcUljP64lfQ==}
 
-  /emblor@1.4.7(react-dom@18.3.1)(react@18.3.1)(typescript@5.6.3):
-    resolution: {integrity: sha512-sFrZ96ALdRwsoiWM/fZ2liM6z4CF4iOqPMwi72wDlFm9nIP4wUN01f7dSajrT+L4FAbUf3+e73UWtWXzAOj8zQ==}
+  /emblor@1.4.8(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-Vqtz4Gepa7CIkmplQ+kvJnsSZJ4sAyHvQqqX2iCmgoRo5iRQFxr+5FJkk6QuLVNH5vrbBZEYxg7sMZuDCnQ/PQ==}
     peerDependencies:
       react: ^18.0.0
       react-dom: ^18.0.0
     dependencies:
       '@radix-ui/react-dialog': 1.0.4(react-dom@18.3.1)(react@18.3.1)
-      '@radix-ui/react-popover': 1.1.2(react-dom@18.3.1)(react@18.3.1)
-      '@radix-ui/react-slot': 1.1.2(react@18.3.1)
+      '@radix-ui/react-popover': 1.1.11(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.0(react@18.3.1)
       class-variance-authority: 0.7.1
       clsx: 2.1.1
-      cmdk: 0.2.1(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614)
-      react-easy-sort: 1.6.0(react-dom@19.0.0-rc-fb9a90fa48-20240614)(react@19.0.0-rc-fb9a90fa48-20240614)
+      cmdk: 0.2.1(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-easy-sort: 1.6.0(react-dom@18.3.1)(react@18.3.1)
       tailwind-merge: 3.2.0
-      tsup: 6.7.0(typescript@5.6.3)
     transitivePeerDependencies:
-      - '@swc/core'
       - '@types/react'
       - '@types/react-dom'
-      - postcss
-      - supports-color
-      - ts-node
-      - typescript
-    dev: false
-
-  /emoji-regex-xs@1.0.0:
-    resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
     dev: false
 
   /emoji-regex@8.0.0:
@@ -9774,75 +8210,77 @@ packages:
       objectorarray: 1.0.5
     dev: false
 
-  /enhanced-resolve@5.17.1:
-    resolution: {integrity: sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==}
-    engines: {node: '>=10.13.0'}
-    dependencies:
-      graceful-fs: 4.2.11
-      tapable: 2.2.1
-    dev: true
-
   /entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
     dev: false
 
+  /entities@6.0.0:
+    resolution: {integrity: sha512-aKstq2TDOndCn4diEyp9Uq/Flu2i1GlLkc6XIDQSDMuaFE3OPW5OphLCyQ5SpSJZTb4reN+kTcYru5yIfXoRPw==}
+    engines: {node: '>=0.12'}
+    dev: false
+
   /error-ex@1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
     dependencies:
       is-arrayish: 0.2.1
     dev: true
 
-  /es-abstract@1.23.3:
-    resolution: {integrity: sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==}
+  /es-abstract@1.23.9:
+    resolution: {integrity: sha512-py07lI0wjxAC/DcfK1S6G7iANonniZwTISvdPzk9hzeH0IZIshbuuFxLIU96OyF89Yb9hiqWn8M/bY83KY5vzA==}
     engines: {node: '>= 0.4'}
     dependencies:
-      array-buffer-byte-length: 1.0.1
-      arraybuffer.prototype.slice: 1.0.3
+      array-buffer-byte-length: 1.0.2
+      arraybuffer.prototype.slice: 1.0.4
       available-typed-arrays: 1.0.7
-      call-bind: 1.0.7
-      data-view-buffer: 1.0.1
-      data-view-byte-length: 1.0.1
-      data-view-byte-offset: 1.0.0
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      data-view-buffer: 1.0.2
+      data-view-byte-length: 1.0.2
+      data-view-byte-offset: 1.0.1
       es-define-property: 1.0.1
       es-errors: 1.3.0
-      es-object-atoms: 1.0.0
+      es-object-atoms: 1.1.1
       es-set-tostringtag: 2.1.0
-      es-to-primitive: 1.2.1
-      function.prototype.name: 1.1.6
-      get-intrinsic: 1.2.7
-      get-symbol-description: 1.0.2
+      es-to-primitive: 1.3.0
+      function.prototype.name: 1.1.8
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      get-symbol-description: 1.1.0
       globalthis: 1.0.4
       gopd: 1.2.0
       has-property-descriptors: 1.0.2
-      has-proto: 1.0.3
+      has-proto: 1.2.0
       has-symbols: 1.1.0
       hasown: 2.0.2
-      internal-slot: 1.0.7
-      is-array-buffer: 3.0.4
+      internal-slot: 1.1.0
+      is-array-buffer: 3.0.5
       is-callable: 1.2.7
-      is-data-view: 1.0.1
-      is-negative-zero: 2.0.3
-      is-regex: 1.1.4
-      is-shared-array-buffer: 1.0.3
-      is-string: 1.0.7
-      is-typed-array: 1.1.13
-      is-weakref: 1.0.2
+      is-data-view: 1.0.2
+      is-regex: 1.2.1
+      is-shared-array-buffer: 1.0.4
+      is-string: 1.1.1
+      is-typed-array: 1.1.15
+      is-weakref: 1.1.1
+      math-intrinsics: 1.1.0
       object-inspect: 1.13.4
       object-keys: 1.1.1
-      object.assign: 4.1.5
-      regexp.prototype.flags: 1.5.3
-      safe-array-concat: 1.1.2
-      safe-regex-test: 1.0.3
-      string.prototype.trim: 1.2.9
-      string.prototype.trimend: 1.0.8
+      object.assign: 4.1.7
+      own-keys: 1.0.1
+      regexp.prototype.flags: 1.5.4
+      safe-array-concat: 1.1.3
+      safe-push-apply: 1.0.0
+      safe-regex-test: 1.1.0
+      set-proto: 1.0.0
+      string.prototype.trim: 1.2.10
+      string.prototype.trimend: 1.0.9
       string.prototype.trimstart: 1.0.8
-      typed-array-buffer: 1.0.2
-      typed-array-byte-length: 1.0.1
-      typed-array-byte-offset: 1.0.2
-      typed-array-length: 1.0.6
-      unbox-primitive: 1.0.2
-      which-typed-array: 1.1.15
+      typed-array-buffer: 1.0.3
+      typed-array-byte-length: 1.0.3
+      typed-array-byte-offset: 1.0.4
+      typed-array-length: 1.0.7
+      unbox-primitive: 1.1.0
+      which-typed-array: 1.1.19
     dev: true
 
   /es-define-property@1.0.1:
@@ -9853,28 +8291,30 @@ packages:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
-  /es-iterator-helpers@1.1.0:
-    resolution: {integrity: sha512-/SurEfycdyssORP/E+bj4sEu1CWw4EmLDsHynHwSXQ7utgbrMRWW195pTrCjFgFCddf/UkYm3oqKPRq5i8bJbw==}
+  /es-iterator-helpers@1.2.1:
+    resolution: {integrity: sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.9
       es-errors: 1.3.0
       es-set-tostringtag: 2.1.0
       function-bind: 1.1.2
-      get-intrinsic: 1.2.7
+      get-intrinsic: 1.3.0
       globalthis: 1.0.4
+      gopd: 1.2.0
       has-property-descriptors: 1.0.2
-      has-proto: 1.0.3
+      has-proto: 1.2.0
       has-symbols: 1.1.0
-      internal-slot: 1.0.7
-      iterator.prototype: 1.1.3
-      safe-array-concat: 1.1.2
+      internal-slot: 1.1.0
+      iterator.prototype: 1.1.5
+      safe-array-concat: 1.1.3
     dev: true
 
-  /es-object-atoms@1.0.0:
-    resolution: {integrity: sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==}
+  /es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
     engines: {node: '>= 0.4'}
     dependencies:
       es-errors: 1.3.0
@@ -9884,23 +8324,24 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       es-errors: 1.3.0
-      get-intrinsic: 1.2.7
+      get-intrinsic: 1.3.0
       has-tostringtag: 1.0.2
       hasown: 2.0.2
 
-  /es-shim-unscopables@1.0.2:
-    resolution: {integrity: sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==}
+  /es-shim-unscopables@1.1.0:
+    resolution: {integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==}
+    engines: {node: '>= 0.4'}
     dependencies:
       hasown: 2.0.2
     dev: true
 
-  /es-to-primitive@1.2.1:
-    resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
+  /es-to-primitive@1.3.0:
+    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
     engines: {node: '>= 0.4'}
     dependencies:
       is-callable: 1.2.7
-      is-date-object: 1.0.5
-      is-symbol: 1.0.4
+      is-date-object: 1.1.0
+      is-symbol: 1.1.1
     dev: true
 
   /es5-ext@0.10.64:
@@ -9955,67 +8396,37 @@ packages:
       es6-symbol: 2.0.1
     dev: true
 
-  /esbuild@0.17.19:
-    resolution: {integrity: sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
-    optionalDependencies:
-      '@esbuild/android-arm': 0.17.19
-      '@esbuild/android-arm64': 0.17.19
-      '@esbuild/android-x64': 0.17.19
-      '@esbuild/darwin-arm64': 0.17.19
-      '@esbuild/darwin-x64': 0.17.19
-      '@esbuild/freebsd-arm64': 0.17.19
-      '@esbuild/freebsd-x64': 0.17.19
-      '@esbuild/linux-arm': 0.17.19
-      '@esbuild/linux-arm64': 0.17.19
-      '@esbuild/linux-ia32': 0.17.19
-      '@esbuild/linux-loong64': 0.17.19
-      '@esbuild/linux-mips64el': 0.17.19
-      '@esbuild/linux-ppc64': 0.17.19
-      '@esbuild/linux-riscv64': 0.17.19
-      '@esbuild/linux-s390x': 0.17.19
-      '@esbuild/linux-x64': 0.17.19
-      '@esbuild/netbsd-x64': 0.17.19
-      '@esbuild/openbsd-x64': 0.17.19
-      '@esbuild/sunos-x64': 0.17.19
-      '@esbuild/win32-arm64': 0.17.19
-      '@esbuild/win32-ia32': 0.17.19
-      '@esbuild/win32-x64': 0.17.19
-    dev: false
-
-  /esbuild@0.25.0:
-    resolution: {integrity: sha512-BXq5mqc8ltbaN34cDqWuYKyNhX8D/Z0J1xdtdQ8UcIIIyJyz+ZMKUt58tF3SrZ85jcfN/PZYhjR5uDQAYNVbuw==}
+  /esbuild@0.25.3:
+    resolution: {integrity: sha512-qKA6Pvai73+M2FtftpNKRxJ78GIjmFXFxd/1DVBqGo/qNhLSfv+G12n9pNoWdytJC8U00TrViOwpjT0zgqQS8Q==}
     engines: {node: '>=18'}
     hasBin: true
     requiresBuild: true
     optionalDependencies:
-      '@esbuild/aix-ppc64': 0.25.0
-      '@esbuild/android-arm': 0.25.0
-      '@esbuild/android-arm64': 0.25.0
-      '@esbuild/android-x64': 0.25.0
-      '@esbuild/darwin-arm64': 0.25.0
-      '@esbuild/darwin-x64': 0.25.0
-      '@esbuild/freebsd-arm64': 0.25.0
-      '@esbuild/freebsd-x64': 0.25.0
-      '@esbuild/linux-arm': 0.25.0
-      '@esbuild/linux-arm64': 0.25.0
-      '@esbuild/linux-ia32': 0.25.0
-      '@esbuild/linux-loong64': 0.25.0
-      '@esbuild/linux-mips64el': 0.25.0
-      '@esbuild/linux-ppc64': 0.25.0
-      '@esbuild/linux-riscv64': 0.25.0
-      '@esbuild/linux-s390x': 0.25.0
-      '@esbuild/linux-x64': 0.25.0
-      '@esbuild/netbsd-arm64': 0.25.0
-      '@esbuild/netbsd-x64': 0.25.0
-      '@esbuild/openbsd-arm64': 0.25.0
-      '@esbuild/openbsd-x64': 0.25.0
-      '@esbuild/sunos-x64': 0.25.0
-      '@esbuild/win32-arm64': 0.25.0
-      '@esbuild/win32-ia32': 0.25.0
-      '@esbuild/win32-x64': 0.25.0
+      '@esbuild/aix-ppc64': 0.25.3
+      '@esbuild/android-arm': 0.25.3
+      '@esbuild/android-arm64': 0.25.3
+      '@esbuild/android-x64': 0.25.3
+      '@esbuild/darwin-arm64': 0.25.3
+      '@esbuild/darwin-x64': 0.25.3
+      '@esbuild/freebsd-arm64': 0.25.3
+      '@esbuild/freebsd-x64': 0.25.3
+      '@esbuild/linux-arm': 0.25.3
+      '@esbuild/linux-arm64': 0.25.3
+      '@esbuild/linux-ia32': 0.25.3
+      '@esbuild/linux-loong64': 0.25.3
+      '@esbuild/linux-mips64el': 0.25.3
+      '@esbuild/linux-ppc64': 0.25.3
+      '@esbuild/linux-riscv64': 0.25.3
+      '@esbuild/linux-s390x': 0.25.3
+      '@esbuild/linux-x64': 0.25.3
+      '@esbuild/netbsd-arm64': 0.25.3
+      '@esbuild/netbsd-x64': 0.25.3
+      '@esbuild/openbsd-arm64': 0.25.3
+      '@esbuild/openbsd-x64': 0.25.3
+      '@esbuild/sunos-x64': 0.25.3
+      '@esbuild/win32-arm64': 0.25.3
+      '@esbuild/win32-ia32': 0.25.3
+      '@esbuild/win32-x64': 0.25.3
     dev: false
 
   /escalade@3.2.0:
@@ -10048,7 +8459,7 @@ packages:
       source-map: 0.6.1
     dev: true
 
-  /eslint-config-next@15.3.0(eslint@8.57.1)(typescript@5.6.3):
+  /eslint-config-next@15.3.0(eslint@8.57.1)(typescript@5.8.3):
     resolution: {integrity: sha512-+Z3M1W9MnJjX3W4vI9CHfKlEyhTWOUHvc5dB89FyRnzPsUkJlLWZOi8+1pInuVcSztSM4MwBFB0hIHf4Rbwu4g==}
     peerDependencies:
       eslint: ^7.23.0 || ^8.0.0 || ^9.0.0
@@ -10058,17 +8469,17 @@ packages:
         optional: true
     dependencies:
       '@next/eslint-plugin-next': 15.3.0
-      '@rushstack/eslint-patch': 1.10.4
-      '@typescript-eslint/eslint-plugin': 7.18.0(@typescript-eslint/parser@7.18.0)(eslint@8.57.1)(typescript@5.6.3)
-      '@typescript-eslint/parser': 7.18.0(eslint@8.57.1)(typescript@5.6.3)
+      '@rushstack/eslint-patch': 1.11.0
+      '@typescript-eslint/eslint-plugin': 7.18.0(@typescript-eslint/parser@7.18.0)(eslint@8.57.1)(typescript@5.8.3)
+      '@typescript-eslint/parser': 7.18.0(eslint@8.57.1)(typescript@5.8.3)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.18.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.18.0)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.31.0)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.18.0)(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
-      eslint-plugin-react: 7.37.2(eslint@8.57.1)
-      eslint-plugin-react-hooks: 5.1.0(eslint@8.57.1)
-      typescript: 5.6.3
+      eslint-plugin-react: 7.37.5(eslint@8.57.1)
+      eslint-plugin-react-hooks: 5.2.0(eslint@8.57.1)
+      typescript: 5.8.3
     transitivePeerDependencies:
       - eslint-import-resolver-webpack
       - eslint-plugin-import-x
@@ -10084,13 +8495,15 @@ packages:
       eslint: 8.57.1
     dev: true
 
-  /eslint-config-turbo@2.2.3(eslint@8.57.1):
-    resolution: {integrity: sha512-/zwNU+G2w0HszXzWILdl6/Catt86ejUG7vsFSdpnFzFAAUbbT2TxgoCFvC1fKtm6+SkQsXwkRRe9tFz0aMftpg==}
+  /eslint-config-turbo@2.5.2(eslint@8.57.1)(turbo@2.5.2):
+    resolution: {integrity: sha512-aZdMUCJE5sC9UHZPOu6GiqCijw0HzlcxTbGZeESMFanYShhxrO6mAZy02zYOYK+y184HnxAngcfmtgDt8cIUxw==}
     peerDependencies:
       eslint: '>6.6.0'
+      turbo: '>2.0.0'
     dependencies:
       eslint: 8.57.1
-      eslint-plugin-turbo: 2.2.3(eslint@8.57.1)
+      eslint-plugin-turbo: 2.5.2(eslint@8.57.1)(turbo@2.5.2)
+      turbo: 2.5.2
     dev: true
 
   /eslint-import-resolver-alias@1.1.2(eslint-plugin-import@2.31.0):
@@ -10099,51 +8512,21 @@ packages:
     peerDependencies:
       eslint-plugin-import: '>=1.4.0'
     dependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.18.0)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.18.0)(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
     dev: true
 
   /eslint-import-resolver-node@0.3.9:
     resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
     dependencies:
       debug: 3.2.7
-      is-core-module: 2.15.1
-      resolve: 1.22.8
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@6.21.0)(eslint-plugin-import@2.31.0)(eslint@8.57.1):
-    resolution: {integrity: sha512-ud9aw4szY9cCT1EWWdGv1L1XR6hh2PaRWif0j2QjQ0pgTY/69iw+W0Z4qZv5wHahOl8isEr+k/JnyAqNQkLkIA==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      eslint: '*'
-      eslint-plugin-import: '*'
-      eslint-plugin-import-x: '*'
-    peerDependenciesMeta:
-      eslint-plugin-import:
-        optional: true
-      eslint-plugin-import-x:
-        optional: true
-    dependencies:
-      '@nolyfill/is-core-module': 1.0.39
-      debug: 4.3.7
-      enhanced-resolve: 5.17.1
-      eslint: 8.57.1
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.18.0)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
-      fast-glob: 3.3.2
-      get-tsconfig: 4.8.1
-      is-bun-module: 1.2.1
-      is-glob: 4.0.3
+      is-core-module: 2.16.1
+      resolve: 1.22.10
     transitivePeerDependencies:
-      - '@typescript-eslint/parser'
-      - eslint-import-resolver-node
-      - eslint-import-resolver-webpack
       - supports-color
     dev: true
 
-  /eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.18.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1):
-    resolution: {integrity: sha512-ud9aw4szY9cCT1EWWdGv1L1XR6hh2PaRWif0j2QjQ0pgTY/69iw+W0Z4qZv5wHahOl8isEr+k/JnyAqNQkLkIA==}
+  /eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.31.0)(eslint@8.57.1):
+    resolution: {integrity: sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       eslint: '*'
@@ -10156,53 +8539,19 @@ packages:
         optional: true
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
-      debug: 4.3.7
-      enhanced-resolve: 5.17.1
-      eslint: 8.57.1
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.18.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.18.0)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
-      fast-glob: 3.3.2
-      get-tsconfig: 4.8.1
-      is-bun-module: 1.2.1
-      is-glob: 4.0.3
-    transitivePeerDependencies:
-      - '@typescript-eslint/parser'
-      - eslint-import-resolver-node
-      - eslint-import-resolver-webpack
-      - supports-color
-    dev: true
-
-  /eslint-module-utils@2.12.0(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1):
-    resolution: {integrity: sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint:
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
-    dependencies:
-      '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.6.3)
-      debug: 3.2.7
+      debug: 4.4.0
       eslint: 8.57.1
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@6.21.0)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.18.0)(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
+      get-tsconfig: 4.10.0
+      is-bun-module: 2.0.0
+      stable-hash: 0.0.5
+      tinyglobby: 0.2.13
+      unrs-resolver: 1.7.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /eslint-module-utils@2.12.0(@typescript-eslint/parser@7.18.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1):
+  /eslint-module-utils@2.12.0(@typescript-eslint/parser@7.18.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1):
     resolution: {integrity: sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -10223,11 +8572,11 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 7.18.0(eslint@8.57.1)(typescript@5.6.3)
+      '@typescript-eslint/parser': 7.18.0(eslint@8.57.1)(typescript@5.8.3)
       debug: 3.2.7
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.18.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.31.0)(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -10243,7 +8592,7 @@ packages:
       ignore: 5.3.2
     dev: true
 
-  /eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.18.0)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1):
+  /eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.18.0)(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1):
     resolution: {integrity: sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -10254,25 +8603,25 @@ packages:
         optional: true
     dependencies:
       '@rtsao/scc': 1.1.0
-      '@typescript-eslint/parser': 7.18.0(eslint@8.57.1)(typescript@5.6.3)
+      '@typescript-eslint/parser': 7.18.0(eslint@8.57.1)(typescript@5.8.3)
       array-includes: 3.1.8
-      array.prototype.findlastindex: 1.2.5
-      array.prototype.flat: 1.3.2
-      array.prototype.flatmap: 1.3.2
+      array.prototype.findlastindex: 1.2.6
+      array.prototype.flat: 1.3.3
+      array.prototype.flatmap: 1.3.3
       debug: 3.2.7
       doctrine: 2.1.0
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.18.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.18.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
       hasown: 2.0.2
-      is-core-module: 2.15.1
+      is-core-module: 2.16.1
       is-glob: 4.0.3
       minimatch: 3.1.2
       object.fromentries: 2.0.8
       object.groupby: 1.0.3
-      object.values: 1.2.0
+      object.values: 1.2.1
       semver: 6.3.1
-      string.prototype.trimend: 1.0.8
+      string.prototype.trimend: 1.0.9
       tsconfig-paths: 3.15.0
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
@@ -10280,7 +8629,7 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-plugin-jest@27.9.0(@typescript-eslint/eslint-plugin@6.21.0)(eslint@8.57.1)(typescript@5.6.3):
+  /eslint-plugin-jest@27.9.0(@typescript-eslint/eslint-plugin@6.21.0)(eslint@8.57.1)(typescript@5.8.3):
     resolution: {integrity: sha512-QIT7FH7fNmd9n4se7FFKHbsLKGQiw885Ds6Y/sxKgCZ6natwCsXdgPOADnYVxN2QrRweF0FZWbJ6S7Rsn7llug==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
@@ -10293,8 +8642,8 @@ packages:
       jest:
         optional: true
     dependencies:
-      '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.1)(typescript@5.6.3)
-      '@typescript-eslint/utils': 5.62.0(eslint@8.57.1)(typescript@5.6.3)
+      '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.1)(typescript@5.8.3)
+      '@typescript-eslint/utils': 5.62.0(eslint@8.57.1)(typescript@5.8.3)
       eslint: 8.57.1
     transitivePeerDependencies:
       - supports-color
@@ -10309,9 +8658,9 @@ packages:
     dependencies:
       aria-query: 5.3.2
       array-includes: 3.1.8
-      array.prototype.flatmap: 1.3.2
+      array.prototype.flatmap: 1.3.3
       ast-types-flow: 0.0.8
-      axe-core: 4.10.2
+      axe-core: 4.10.3
       axobject-query: 4.1.0
       damerau-levenshtein: 1.0.8
       emoji-regex: 9.2.2
@@ -10321,7 +8670,7 @@ packages:
       language-tags: 1.0.9
       minimatch: 3.1.2
       object.fromentries: 2.0.8
-      safe-regex-test: 1.0.3
+      safe-regex-test: 1.1.0
       string.prototype.includes: 2.0.1
     dev: true
 
@@ -10340,7 +8689,7 @@ packages:
         optional: true
     dependencies:
       eslint: 8.57.1
-      eslint-plugin-jest: 27.9.0(@typescript-eslint/eslint-plugin@6.21.0)(eslint@8.57.1)(typescript@5.6.3)
+      eslint-plugin-jest: 27.9.0(@typescript-eslint/eslint-plugin@6.21.0)(eslint@8.57.1)(typescript@5.8.3)
     dev: true
 
   /eslint-plugin-react-hooks@4.6.2(eslint@8.57.1):
@@ -10352,8 +8701,8 @@ packages:
       eslint: 8.57.1
     dev: true
 
-  /eslint-plugin-react-hooks@5.1.0(eslint@8.57.1):
-    resolution: {integrity: sha512-mpJRtPgHN2tNAvZ35AMfqeB3Xqeo273QxrHJsbBEPWODRM4r0yB6jfoROqKEYrOn27UtRPpcpHc2UqyBSuUNTw==}
+  /eslint-plugin-react-hooks@5.2.0(eslint@8.57.1):
+    resolution: {integrity: sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==}
     engines: {node: '>=10'}
     peerDependencies:
       eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
@@ -10361,40 +8710,40 @@ packages:
       eslint: 8.57.1
     dev: true
 
-  /eslint-plugin-react@7.37.2(eslint@8.57.1):
-    resolution: {integrity: sha512-EsTAnj9fLVr/GZleBLFbj/sSuXeWmp1eXIN60ceYnZveqEaUCyW4X+Vh4WTdUhCkW4xutXYqTXCUSyqD4rB75w==}
+  /eslint-plugin-react@7.37.5(eslint@8.57.1):
+    resolution: {integrity: sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==}
     engines: {node: '>=4'}
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
     dependencies:
       array-includes: 3.1.8
       array.prototype.findlast: 1.2.5
-      array.prototype.flatmap: 1.3.2
+      array.prototype.flatmap: 1.3.3
       array.prototype.tosorted: 1.1.4
       doctrine: 2.1.0
-      es-iterator-helpers: 1.1.0
+      es-iterator-helpers: 1.2.1
       eslint: 8.57.1
       estraverse: 5.3.0
       hasown: 2.0.2
       jsx-ast-utils: 3.3.5
       minimatch: 3.1.2
-      object.entries: 1.1.8
+      object.entries: 1.1.9
       object.fromentries: 2.0.8
-      object.values: 1.2.0
+      object.values: 1.2.1
       prop-types: 15.8.1
       resolve: 2.0.0-next.5
       semver: 6.3.1
-      string.prototype.matchall: 4.0.11
+      string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
     dev: true
 
-  /eslint-plugin-testing-library@6.4.0(eslint@8.57.1)(typescript@5.6.3):
-    resolution: {integrity: sha512-yeWF+YgCgvNyPNI9UKnG0FjeE2sk93N/3lsKqcmR8dSfeXJwFT5irnWo7NjLf152HkRzfoFjh3LsBUrhvFz4eA==}
+  /eslint-plugin-testing-library@6.5.0(eslint@8.57.1)(typescript@5.8.3):
+    resolution: {integrity: sha512-Ls5TUfLm5/snocMAOlofSOJxNN0aKqwTlco7CrNtMjkTdQlkpSMaeTCDHCuXfzrI97xcx2rSCNeKeJjtpkNC1w==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0, npm: '>=6'}
     peerDependencies:
       eslint: ^7.5.0 || ^8.0.0 || ^9.0.0
     dependencies:
-      '@typescript-eslint/utils': 5.62.0(eslint@8.57.1)(typescript@5.6.3)
+      '@typescript-eslint/utils': 5.62.0(eslint@8.57.1)(typescript@5.8.3)
       eslint: 8.57.1
     transitivePeerDependencies:
       - supports-color
@@ -10408,13 +8757,15 @@ packages:
       '@microsoft/tsdoc-config': 0.16.2
     dev: true
 
-  /eslint-plugin-turbo@2.2.3(eslint@8.57.1):
-    resolution: {integrity: sha512-LHt35VwxthdGVO6hQRfvmFb6ee8/exAzAYWCy4o87Bnp7urltP8qg7xMd4dPSLAhtfnI2xSo1WgeVaR3MeItxw==}
+  /eslint-plugin-turbo@2.5.2(eslint@8.57.1)(turbo@2.5.2):
+    resolution: {integrity: sha512-B+vdgOtBuDbRI3sIRayV3HZK1XcwlNuksmJJIgggkXTsNehMEbreJBkIda4qvA/STHnGAl2bUGev0Jx8Rijiwg==}
     peerDependencies:
       eslint: '>6.6.0'
+      turbo: '>2.0.0'
     dependencies:
       dotenv: 16.0.3
       eslint: 8.57.1
+      turbo: 2.5.2
     dev: true
 
   /eslint-plugin-unicorn@48.0.1(eslint@8.57.1):
@@ -10424,20 +8775,20 @@ packages:
       eslint: '>=8.44.0'
     dependencies:
       '@babel/helper-validator-identifier': 7.25.9
-      '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1)
+      '@eslint-community/eslint-utils': 4.6.1(eslint@8.57.1)
       ci-info: 3.9.0
       clean-regexp: 1.0.0
       eslint: 8.57.1
       esquery: 1.6.0
       indent-string: 4.0.0
       is-builtin-module: 3.2.1
-      jsesc: 3.0.2
+      jsesc: 3.1.0
       lodash: 4.17.21
       pluralize: 8.0.0
       read-pkg-up: 7.0.1
       regexp-tree: 0.1.27
       regjsparser: 0.10.0
-      semver: 7.6.3
+      semver: 7.7.1
       strip-indent: 3.0.0
     dev: true
 
@@ -10473,18 +8824,18 @@ packages:
     deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
     hasBin: true
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1)
+      '@eslint-community/eslint-utils': 4.6.1(eslint@8.57.1)
       '@eslint-community/regexpp': 4.12.1
       '@eslint/eslintrc': 2.1.4
       '@eslint/js': 8.57.1
       '@humanwhocodes/config-array': 0.13.0
       '@humanwhocodes/module-importer': 1.0.1
       '@nodelib/fs.walk': 1.2.8
-      '@ungap/structured-clone': 1.2.0
+      '@ungap/structured-clone': 1.3.0
       ajv: 6.12.6
       chalk: 4.1.2
-      cross-spawn: 7.0.3
-      debug: 4.3.7
+      cross-spawn: 7.0.6
+      debug: 4.4.0
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.2.2
@@ -10515,8 +8866,8 @@ packages:
       - supports-color
     dev: true
 
-  /esm-env@1.2.1:
-    resolution: {integrity: sha512-U9JedYYjCnadUlXk7e1Kr+aENQhtUaoaV9+gZm1T8LC/YBAPJx3NSPIAurFOC0U5vrdSevnUJS2/wUVxGwPhng==}
+  /esm-env@1.2.2:
+    resolution: {integrity: sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==}
     dev: false
 
   /esniff@2.0.1:
@@ -10532,8 +8883,8 @@ packages:
     resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      acorn: 8.14.0
-      acorn-jsx: 5.3.2(acorn@8.14.0)
+      acorn: 8.14.1
+      acorn-jsx: 5.3.2(acorn@8.14.1)
       eslint-visitor-keys: 3.4.3
     dev: true
 
@@ -10595,7 +8946,7 @@ packages:
     resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
     engines: {node: '>=10'}
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       get-stream: 6.0.1
       human-signals: 2.1.0
       is-stream: 2.0.1
@@ -10604,6 +8955,7 @@ packages:
       onetime: 5.1.2
       signal-exit: 3.0.7
       strip-final-newline: 2.0.0
+    dev: true
 
   /ext@1.7.0:
     resolution: {integrity: sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==}
@@ -10643,8 +8995,8 @@ packages:
       micromatch: 4.0.8
     dev: true
 
-  /fast-glob@3.3.2:
-    resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
+  /fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
     engines: {node: '>=8.6.0'}
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -10673,13 +9025,23 @@ packages:
     resolution: {integrity: sha512-xkjOecfnKGkSsOwtZ5Pz7Us/T6mrbPQrq0nh+aCO5V9nk5NLWmasAHumTKjiPJPWANe+kAZ84Jc8ooJkzZ88Sw==}
     hasBin: true
     dependencies:
-      strnum: 1.0.5
+      strnum: 1.1.2
     dev: false
 
-  /fastq@1.17.1:
-    resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
+  /fastq@1.19.1:
+    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
+    dependencies:
+      reusify: 1.1.0
+
+  /fdir@6.4.4(picomatch@4.0.2):
+    resolution: {integrity: sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
     dependencies:
-      reusify: 1.0.4
+      picomatch: 4.0.2
 
   /fetch-blob@3.2.0:
     resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
@@ -10699,8 +9061,8 @@ packages:
       when: 3.7.8
     dev: false
 
-  /figlet@1.8.0:
-    resolution: {integrity: sha512-chzvGjd+Sp7KUvPHZv6EXV5Ir3Q7kYNpCr4aHrRW79qFtTefmQZNny+W1pW9kf5zeE6dikku2W50W/wAH2xWgw==}
+  /figlet@1.8.1:
+    resolution: {integrity: sha512-kEC3Sme+YvA8Hkibv0NR1oClGcWia0VB2fC1SlMy027cwe795Xx40Xiv/nw/iFAwQLupymWh+uhAAErn/7hwPg==}
     engines: {node: '>= 0.4.0'}
     hasBin: true
     dev: true
@@ -10726,11 +9088,11 @@ packages:
       flat-cache: 3.2.0
     dev: true
 
-  /file-selector@0.6.0:
-    resolution: {integrity: sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==}
+  /file-selector@2.1.2:
+    resolution: {integrity: sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==}
     engines: {node: '>= 12'}
     dependencies:
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /fill-range@7.1.1:
@@ -10759,26 +9121,27 @@ packages:
     resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
     engines: {node: ^10.12.0 || >=12.0.0}
     dependencies:
-      flatted: 3.3.1
+      flatted: 3.3.3
       keyv: 4.5.4
       rimraf: 3.0.2
     dev: true
 
-  /flatted@3.3.1:
-    resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
+  /flatted@3.3.3:
+    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
     dev: true
 
-  /for-each@0.3.3:
-    resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
+  /for-each@0.3.5:
+    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
+    engines: {node: '>= 0.4'}
     dependencies:
       is-callable: 1.2.7
     dev: true
 
-  /foreground-child@3.3.0:
-    resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==}
+  /foreground-child@3.3.1:
+    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
     engines: {node: '>=14'}
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       signal-exit: 4.1.0
     dev: false
 
@@ -10815,8 +9178,8 @@ packages:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
     dev: false
 
-  /framer-motion@11.18.0(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-Vmjl5Al7XqKHzDFnVqzi1H9hzn5w4eN/bdqXTymVpU2UuMQuz9w6UPdsL9dFBeH7loBlnu4qcEXME+nvbkcIOw==}
+  /framer-motion@11.18.2(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==}
     peerDependencies:
       '@emotion/is-prop-valid': '*'
       react: ^18.0.0 || ^19.0.0
@@ -10829,11 +9192,11 @@ packages:
       react-dom:
         optional: true
     dependencies:
-      motion-dom: 11.16.4
-      motion-utils: 11.16.0
+      motion-dom: 11.18.1
+      motion-utils: 11.18.1
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /fs-extra@10.1.0:
@@ -10845,15 +9208,6 @@ packages:
       universalify: 2.0.1
     dev: true
 
-  /fs-extra@11.2.0:
-    resolution: {integrity: sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==}
-    engines: {node: '>=14.14'}
-    dependencies:
-      graceful-fs: 4.2.11
-      jsonfile: 6.1.0
-      universalify: 2.0.1
-    dev: true
-
   /fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
     dev: true
@@ -10873,14 +9227,16 @@ packages:
   /function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
-  /function.prototype.name@1.1.6:
-    resolution: {integrity: sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==}
+  /function.prototype.name@1.1.8:
+    resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.23.3
       functions-have-names: 1.2.3
+      hasown: 2.0.2
+      is-callable: 1.2.7
     dev: true
 
   /functions-have-names@1.2.3:
@@ -10899,14 +9255,14 @@ packages:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
 
-  /get-intrinsic@1.2.7:
-    resolution: {integrity: sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==}
+  /get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
     dependencies:
       call-bind-apply-helpers: 1.0.2
       es-define-property: 1.0.1
       es-errors: 1.3.0
-      es-object-atoms: 1.0.0
+      es-object-atoms: 1.1.1
       function-bind: 1.1.2
       get-proto: 1.0.1
       gopd: 1.2.0
@@ -10924,7 +9280,7 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       dunder-proto: 1.0.1
-      es-object-atoms: 1.0.0
+      es-object-atoms: 1.1.1
 
   /get-stdin@9.0.0:
     resolution: {integrity: sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA==}
@@ -10934,36 +9290,36 @@ packages:
   /get-stream@6.0.1:
     resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
     engines: {node: '>=10'}
+    dev: true
 
-  /get-symbol-description@1.0.2:
-    resolution: {integrity: sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==}
+  /get-symbol-description@1.1.0:
+    resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
       es-errors: 1.3.0
-      get-intrinsic: 1.2.7
+      get-intrinsic: 1.3.0
     dev: true
 
-  /get-tsconfig@4.8.1:
-    resolution: {integrity: sha512-k9PN+cFBmaLWtVz29SkUoqU5O0slLuHJXt/2P+tMVFT+phsSGXGkp9t3rQIqdz0e+06EHNGs3oM6ZX1s2zHxRg==}
+  /get-tsconfig@4.10.0:
+    resolution: {integrity: sha512-kGzZ3LWWQcGIAmg6iWvXn0ei6WDtV26wzHRMwDSzmAbcXrTEXxHy6IehI6/4eT6VRKyMP1eF1VqwrVUmE/LR7A==}
     dependencies:
       resolve-pkg-maps: 1.0.0
     dev: true
 
-  /get-uri@6.0.3:
-    resolution: {integrity: sha512-BzUrJBS9EcUb4cFol8r4W3v1cPsSyajLSthNkz5BxbpDcHN5tIrM10E2eNvfnvBn3DaT3DUgx0OpsBKkaOpanw==}
+  /get-uri@6.0.4:
+    resolution: {integrity: sha512-E1b1lFFLvLgak2whF2xDBcOy6NLVGZBqqjJjsIhvopKfWWEi64pLVTWWehV8KlLerZkfNTA95sTe2OdJKm1OzQ==}
     engines: {node: '>= 14'}
     dependencies:
       basic-ftp: 5.0.5
       data-uri-to-buffer: 6.0.2
-      debug: 4.3.7
-      fs-extra: 11.2.0
+      debug: 4.4.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /git-hooks-list@3.1.0:
-    resolution: {integrity: sha512-LF8VeHeR7v+wAbXqfgRlTSX/1BJR9Q1vEMR8JAz1cEg6GX07+zyj3sAdDvYjj/xnlIfVuGgj4qBei1K3hKH+PA==}
+  /git-hooks-list@3.2.0:
+    resolution: {integrity: sha512-ZHG9a1gEhUMX1TvGrLdyWb9kDopCBbTnI8z4JgRMYxsijWipgjSEYoPWqBuIB0DnRnvqlQSEeVmzpeuPm7NdFQ==}
     dev: true
 
   /glob-parent@5.1.2:
@@ -10986,7 +9342,7 @@ packages:
     resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
     hasBin: true
     dependencies:
-      foreground-child: 3.3.0
+      foreground-child: 3.3.1
       jackspeak: 3.4.3
       minimatch: 9.0.5
       minipass: 7.1.2
@@ -11032,7 +9388,7 @@ packages:
       '@types/glob': 7.2.0
       array-union: 2.1.0
       dir-glob: 3.0.1
-      fast-glob: 3.3.2
+      fast-glob: 3.3.3
       glob: 7.2.3
       ignore: 5.3.2
       merge2: 1.4.1
@@ -11045,20 +9401,10 @@ packages:
     dependencies:
       array-union: 2.1.0
       dir-glob: 3.0.1
-      fast-glob: 3.3.2
+      fast-glob: 3.3.3
       ignore: 5.3.2
       merge2: 1.4.1
       slash: 3.0.0
-
-  /globby@13.2.2:
-    resolution: {integrity: sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    dependencies:
-      dir-glob: 3.0.1
-      fast-glob: 3.3.2
-      ignore: 5.3.2
-      merge2: 1.4.1
-      slash: 4.0.0
     dev: true
 
   /gopd@1.2.0:
@@ -11094,8 +9440,9 @@ packages:
       uglify-js: 3.19.3
     dev: true
 
-  /has-bigints@1.0.2:
-    resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
+  /has-bigints@1.1.0:
+    resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
+    engines: {node: '>= 0.4'}
     dev: true
 
   /has-flag@3.0.0:
@@ -11114,9 +9461,11 @@ packages:
       es-define-property: 1.0.1
     dev: true
 
-  /has-proto@1.0.3:
-    resolution: {integrity: sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==}
+  /has-proto@1.2.0:
+    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
     engines: {node: '>= 0.4'}
+    dependencies:
+      dunder-proto: 1.0.1
     dev: true
 
   /has-symbols@1.1.0:
@@ -11188,7 +9537,7 @@ packages:
     dependencies:
       domelementtype: 2.3.0
       domhandler: 5.0.3
-      domutils: 3.2.1
+      domutils: 3.2.2
       entities: 4.5.0
     dev: false
 
@@ -11197,7 +9546,7 @@ packages:
     dependencies:
       domelementtype: 2.3.0
       domhandler: 5.0.3
-      domutils: 3.2.1
+      domutils: 3.2.2
       entities: 4.5.0
     dev: false
 
@@ -11216,18 +9565,18 @@ packages:
     resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
     dependencies:
-      agent-base: 7.1.1
-      debug: 4.3.7
+      agent-base: 7.1.3
+      debug: 4.4.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /https-proxy-agent@7.0.5:
-    resolution: {integrity: sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==}
+  /https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
     engines: {node: '>= 14'}
     dependencies:
-      agent-base: 7.1.1
-      debug: 4.3.7
+      agent-base: 7.1.3
+      debug: 4.4.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -11235,6 +9584,7 @@ packages:
   /human-signals@2.1.0:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
     engines: {node: '>=10.17.0'}
+    dev: true
 
   /humanize-ms@1.2.1:
     resolution: {integrity: sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==}
@@ -11259,8 +9609,8 @@ packages:
     resolution: {integrity: sha512-8Sb3veuYCyrZL+VBt9LJfZjLUPWVvqn8tG28VqYNFCo43KHcKuq+b4EiXGeuaLAQWL2YmyDgMp2aSpH9JHsEQg==}
     dev: false
 
-  /idb@8.0.1:
-    resolution: {integrity: sha512-EkBCzUZSdhJV8PxMSbeEV//xguVKZu9hZZulM+2gHXI0t2hGVU3eYE6/XnH77DS6FM2FY8wl17aDcu9vXpvLWQ==}
+  /idb@8.0.0:
+    resolution: {integrity: sha512-l//qvlAKGmQO31Qn7xdzagVPPaHTxXx199MhrAFuVBTPqydcPYBWjkrbv4Y0ktB+GmWOiwHl237UUOrLmQxLvw==}
     dev: false
 
   /ieee754@1.2.1:
@@ -11269,9 +9619,10 @@ packages:
   /ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
+    dev: true
 
-  /import-fresh@3.3.0:
-    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
+  /import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
     engines: {node: '>=6'}
     dependencies:
       parent-module: 1.0.1
@@ -11301,6 +9652,7 @@ packages:
 
   /ini@1.3.8:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
+    dev: true
 
   /inquirer@6.5.2:
     resolution: {integrity: sha512-cntlB5ghuB0iuO65Ovoi8ogLHiWGs/5yNrtUcKjFhSSiVeAIVpD7koaSU9RM8mpXw5YDi9RdYXGQMaOURB7ycQ==}
@@ -11354,15 +9706,15 @@ packages:
       mute-stream: 0.0.8
       ora: 5.4.1
       run-async: 2.4.1
-      rxjs: 7.8.1
+      rxjs: 7.8.2
       string-width: 4.2.3
       strip-ansi: 6.0.1
       through: 2.3.8
       wrap-ansi: 6.2.0
     dev: true
 
-  /internal-slot@1.0.7:
-    resolution: {integrity: sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==}
+  /internal-slot@1.1.0:
+    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
     dependencies:
       es-errors: 1.3.0
@@ -11379,12 +9731,6 @@ packages:
     resolution: {integrity: sha512-fn4bQ0Xq8FTej09YC/jqKZwtijpvARlRp6wxL5WTA6yPe2YWSJ5RJh7Nm79rK2qB0wr6iDQzH60XGq5V/7u8YQ==}
     dev: false
 
-  /invariant@2.2.4:
-    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
-    dependencies:
-      loose-envify: 1.4.0
-    dev: false
-
   /ip-address@9.0.5:
     resolution: {integrity: sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==}
     engines: {node: '>= 12'}
@@ -11400,12 +9746,13 @@ packages:
       hasown: 2.0.2
     dev: true
 
-  /is-array-buffer@3.0.4:
-    resolution: {integrity: sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==}
+  /is-array-buffer@3.0.5:
+    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
-      get-intrinsic: 1.2.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
     dev: true
 
   /is-arrayish@0.2.1:
@@ -11418,17 +9765,22 @@ packages:
     dev: false
     optional: true
 
-  /is-async-function@2.0.0:
-    resolution: {integrity: sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==}
+  /is-async-function@2.1.1:
+    resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
     engines: {node: '>= 0.4'}
     dependencies:
+      async-function: 1.0.0
+      call-bound: 1.0.4
+      get-proto: 1.0.1
       has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
     dev: true
 
-  /is-bigint@1.0.4:
-    resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
+  /is-bigint@1.1.0:
+    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
+    engines: {node: '>= 0.4'}
     dependencies:
-      has-bigints: 1.0.2
+      has-bigints: 1.1.0
     dev: true
 
   /is-binary-path@2.1.0:
@@ -11438,11 +9790,11 @@ packages:
       binary-extensions: 2.3.0
     dev: false
 
-  /is-boolean-object@1.1.2:
-    resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
+  /is-boolean-object@1.2.2:
+    resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
       has-tostringtag: 1.0.2
     dev: true
 
@@ -11457,10 +9809,10 @@ packages:
       builtin-modules: 3.3.0
     dev: true
 
-  /is-bun-module@1.2.1:
-    resolution: {integrity: sha512-AmidtEM6D6NmUiLOvvU7+IePxjEjOzra2h0pSrsfSAcXwl/83zLLXDByafUJy9k/rKK0pvXMLdwKwGHlX2Ke6Q==}
+  /is-bun-module@2.0.0:
+    resolution: {integrity: sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==}
     dependencies:
-      semver: 7.6.3
+      semver: 7.7.1
     dev: true
 
   /is-callable@1.2.7:
@@ -11468,8 +9820,8 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /is-core-module@2.15.1:
-    resolution: {integrity: sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==}
+  /is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
     engines: {node: '>= 0.4'}
     dependencies:
       hasown: 2.0.2
@@ -11481,17 +9833,20 @@ packages:
       hasown: 2.0.2
     dev: true
 
-  /is-data-view@1.0.1:
-    resolution: {integrity: sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==}
+  /is-data-view@1.0.2:
+    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
     engines: {node: '>= 0.4'}
     dependencies:
-      is-typed-array: 1.1.13
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      is-typed-array: 1.1.15
     dev: true
 
-  /is-date-object@1.0.5:
-    resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
+  /is-date-object@1.1.0:
+    resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
     engines: {node: '>= 0.4'}
     dependencies:
+      call-bound: 1.0.4
       has-tostringtag: 1.0.2
     dev: true
 
@@ -11507,10 +9862,11 @@ packages:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
 
-  /is-finalizationregistry@1.0.2:
-    resolution: {integrity: sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==}
+  /is-finalizationregistry@1.1.1:
+    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
+    engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
     dev: true
 
   /is-fullwidth-code-point@2.0.0:
@@ -11522,11 +9878,14 @@ packages:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
 
-  /is-generator-function@1.0.10:
-    resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
+  /is-generator-function@1.1.0:
+    resolution: {integrity: sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==}
     engines: {node: '>= 0.4'}
     dependencies:
+      call-bound: 1.0.4
+      get-proto: 1.0.1
       has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
     dev: true
 
   /is-glob@4.0.3:
@@ -11551,15 +9910,11 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /is-negative-zero@2.0.3:
-    resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
-    engines: {node: '>= 0.4'}
-    dev: true
-
-  /is-number-object@1.0.7:
-    resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
+  /is-number-object@1.1.1:
+    resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
     engines: {node: '>= 0.4'}
     dependencies:
+      call-bound: 1.0.4
       has-tostringtag: 1.0.2
     dev: true
 
@@ -11594,12 +9949,14 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /is-regex@1.1.4:
-    resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
+  /is-regex@1.2.1:
+    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
+      gopd: 1.2.0
       has-tostringtag: 1.0.2
+      hasown: 2.0.2
     dev: true
 
   /is-set@2.0.3:
@@ -11607,36 +9964,40 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /is-shared-array-buffer@1.0.3:
-    resolution: {integrity: sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==}
+  /is-shared-array-buffer@1.0.4:
+    resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
     dev: true
 
   /is-stream@2.0.1:
     resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
     engines: {node: '>=8'}
+    dev: true
 
-  /is-string@1.0.7:
-    resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
+  /is-string@1.1.1:
+    resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
     engines: {node: '>= 0.4'}
     dependencies:
+      call-bound: 1.0.4
       has-tostringtag: 1.0.2
     dev: true
 
-  /is-symbol@1.0.4:
-    resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==}
+  /is-symbol@1.1.1:
+    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
     engines: {node: '>= 0.4'}
     dependencies:
+      call-bound: 1.0.4
       has-symbols: 1.1.0
+      safe-regex-test: 1.1.0
     dev: true
 
-  /is-typed-array@1.1.13:
-    resolution: {integrity: sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==}
+  /is-typed-array@1.1.15:
+    resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
     engines: {node: '>= 0.4'}
     dependencies:
-      which-typed-array: 1.1.15
+      which-typed-array: 1.1.19
     dev: true
 
   /is-unicode-supported@0.1.0:
@@ -11655,18 +10016,19 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /is-weakref@1.0.2:
-    resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
+  /is-weakref@1.1.1:
+    resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
+    engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
     dev: true
 
-  /is-weakset@2.0.3:
-    resolution: {integrity: sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==}
+  /is-weakset@2.0.4:
+    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
-      get-intrinsic: 1.2.7
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
     dev: true
 
   /isarray@2.0.5:
@@ -11681,14 +10043,15 @@ packages:
   /isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
-  /iterator.prototype@1.1.3:
-    resolution: {integrity: sha512-FW5iMbeQ6rBGm/oKgzq2aW4KvAGpxPzYES8N4g4xNXUKpL1mclMvOe+76AcLDTvD+Ze+sOpVhgdAQEKF4L9iGQ==}
+  /iterator.prototype@1.1.5:
+    resolution: {integrity: sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==}
     engines: {node: '>= 0.4'}
     dependencies:
-      define-properties: 1.2.1
-      get-intrinsic: 1.2.7
+      define-data-property: 1.1.4
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
       has-symbols: 1.1.0
-      reflect.getprototypeof: 1.0.6
       set-function-name: 2.0.2
     dev: true
 
@@ -11700,8 +10063,8 @@ packages:
       '@pkgjs/parseargs': 0.11.0
     dev: false
 
-  /jiti@1.21.6:
-    resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
+  /jiti@1.21.7:
+    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
     hasBin: true
     dev: false
 
@@ -11728,27 +10091,6 @@ packages:
       react: 18.3.1
     dev: false
 
-  /joycon@3.1.1:
-    resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /js-base64@3.7.7:
-    resolution: {integrity: sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw==}
-    dev: false
-
-  /js-beautify@1.15.3:
-    resolution: {integrity: sha512-rKKGuyTxGNlyN4EQKWzNndzXpi0bOl8Gl8YQAW1as/oMz0XhD6sHJO1hTvoBDOSzKuJb9WkwoAb34FfdkKMv2A==}
-    engines: {node: '>=14'}
-    hasBin: true
-    dependencies:
-      config-chain: 1.1.13
-      editorconfig: 1.0.4
-      glob: 10.4.5
-      js-cookie: 3.0.5
-      nopt: 8.1.0
-    dev: false
-
   /js-cookie@3.0.5:
     resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
     engines: {node: '>=14'}
@@ -11773,8 +10115,8 @@ packages:
     hasBin: true
     dev: true
 
-  /jsesc@3.0.2:
-    resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
+  /jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
     engines: {node: '>=6'}
     hasBin: true
 
@@ -11819,9 +10161,9 @@ packages:
     engines: {node: '>=4.0'}
     dependencies:
       array-includes: 3.1.8
-      array.prototype.flat: 1.3.2
-      object.assign: 4.1.5
-      object.values: 1.2.0
+      array.prototype.flat: 1.3.3
+      object.assign: 4.1.7
+      object.values: 1.2.1
     dev: true
 
   /keyv@4.5.4:
@@ -11860,24 +10202,14 @@ packages:
       type-check: 0.4.0
     dev: true
 
-  /lilconfig@2.1.0:
-    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /lilconfig@3.1.2:
-    resolution: {integrity: sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==}
+  /lilconfig@3.1.3:
+    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
     dev: false
 
   /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
-  /load-tsconfig@0.2.5:
-    resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    dev: false
-
   /locate-path@5.0.0:
     resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
     engines: {node: '>=8'}
@@ -11898,6 +10230,7 @@ packages:
 
   /lodash.get@4.4.2:
     resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
+    deprecated: This package is deprecated. Use the optional chaining (?.) operator instead.
     dev: true
 
   /lodash.isplainobject@4.0.6:
@@ -11906,10 +10239,6 @@ packages:
   /lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
-  /lodash.sortby@4.7.0:
-    resolution: {integrity: sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==}
-    dev: false
-
   /lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
@@ -11947,7 +10276,7 @@ packages:
   /lower-case@2.0.2:
     resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
     dependencies:
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /lru-cache@10.4.3:
@@ -12028,7 +10357,7 @@ packages:
     dependencies:
       '@types/hast': 3.0.4
       '@types/mdast': 4.0.4
-      '@ungap/structured-clone': 1.2.0
+      '@ungap/structured-clone': 1.3.0
       devlop: 1.1.0
       micromark-util-sanitize-uri: 2.0.1
       trim-lines: 3.0.1
@@ -12051,6 +10380,7 @@ packages:
 
   /merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+    dev: true
 
   /merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
@@ -12070,7 +10400,7 @@ packages:
     resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
     dependencies:
       micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.1
+      micromark-util-types: 2.0.2
     dev: false
 
   /micromark-util-encode@2.0.1:
@@ -12089,8 +10419,8 @@ packages:
     resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
     dev: false
 
-  /micromark-util-types@2.0.1:
-    resolution: {integrity: sha512-534m2WhVTddrcKVepwmVEVnUAmtrx9bfIjNoQHRqfnvdaHQiFytEhJoTgpWJvDEXCO5gLTQh3wYC1PgOJA4NSQ==}
+  /micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
     dev: false
 
   /micromatch@4.0.8:
@@ -12105,8 +10435,8 @@ packages:
     engines: {node: '>= 0.6'}
     dev: false
 
-  /mime-db@1.53.0:
-    resolution: {integrity: sha512-oHlN/w+3MQ3rba9rqFr6V/ypF10LSkdwUysQL7GkXoTgIWeV+tcXGA852TBxH+gsh8UWoyhR1hKcoMJTuWflpg==}
+  /mime-db@1.54.0:
+    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
     engines: {node: '>= 0.6'}
     dev: false
 
@@ -12125,6 +10455,7 @@ packages:
   /mimic-fn@2.1.0:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
+    dev: true
 
   /min-indent@1.0.1:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
@@ -12137,13 +10468,6 @@ packages:
       brace-expansion: 1.1.11
     dev: true
 
-  /minimatch@9.0.1:
-    resolution: {integrity: sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==}
-    engines: {node: '>=16 || 14 >=14.17'}
-    dependencies:
-      brace-expansion: 2.0.1
-    dev: false
-
   /minimatch@9.0.3:
     resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -12181,7 +10505,7 @@ packages:
     resolution: {integrity: sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==}
     dev: false
 
-  /monaco-jsx-highlighter@2.77.77(@babel/parser@7.26.1)(@babel/traverse@7.25.9)(monaco-editor@0.52.2):
+  /monaco-jsx-highlighter@2.77.77(@babel/parser@7.27.0)(@babel/traverse@7.27.0)(monaco-editor@0.52.2):
     resolution: {integrity: sha512-goQ4bJtcQzxJnqkx6OvXnlt+28SXt3Dnv9t40BEzv2ElJYjp7SpLqVtzZPnSRn8cisxPBLm6reJ76fOwUnaLiA==}
     engines: {node: '>=10', npm: '>=7'}
     peerDependencies:
@@ -12189,23 +10513,23 @@ packages:
       '@babel/traverse': 6.x || 7.x
       monaco-editor: '>=0.21'
     dependencies:
-      '@babel/parser': 7.26.1
-      '@babel/traverse': 7.25.9
+      '@babel/parser': 7.27.0
+      '@babel/traverse': 7.27.0
       monaco-editor: 0.52.2
     dev: false
 
-  /motion-dom@11.16.4:
-    resolution: {integrity: sha512-2wuCie206pCiP2K23uvwJeci4pMFfyQKpWI0Vy6HrCTDzDCer4TsYtT7IVnuGbDeoIV37UuZiUr6SZMHEc1Vww==}
+  /motion-dom@11.18.1:
+    resolution: {integrity: sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==}
     dependencies:
-      motion-utils: 11.16.0
+      motion-utils: 11.18.1
     dev: false
 
-  /motion-utils@11.16.0:
-    resolution: {integrity: sha512-ngdWPjg31rD4WGXFi0eZ00DQQqKKu04QExyv/ymlC+3k+WIgYVFbt6gS5JsFPbJODTF/r8XiE/X+SsoT9c0ocw==}
+  /motion-utils@11.18.1:
+    resolution: {integrity: sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==}
     dev: false
 
-  /motion@11.18.0(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-uJ4zNXh/4K9C5wftxHKlXLHC0Rc9dHSHPyO1P6T9XE2bTn2z8C2lOZX/M8vAmFp0gtJTJ3aYkv44lTtJSfv6+A==}
+  /motion@11.18.2(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-JLjvFDuFr42NFtcVoMAyC2sEjnpA8xpy6qWPyzQvCloznAyQ8FIXioxWfHiLtgYhoVpfUqSWpn1h9++skj9+Wg==}
     peerDependencies:
       '@emotion/is-prop-valid': '*'
       react: ^18.0.0 || ^19.0.0
@@ -12218,10 +10542,10 @@ packages:
       react-dom:
         optional: true
     dependencies:
-      framer-motion: 11.18.0(react-dom@19.1.0)(react@19.1.0)
+      framer-motion: 11.18.2(react-dom@19.1.0)(react@19.1.0)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /ms@2.1.3:
@@ -12243,17 +10567,17 @@ packages:
       thenify-all: 1.6.0
     dev: false
 
-  /nanoid@3.3.7:
-    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
+  /nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
     dev: false
 
-  /nanoid@3.3.8:
-    resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+  /napi-postinstall@0.2.3:
+    resolution: {integrity: sha512-Mi7JISo/4Ij2tDZ2xBE2WH+/KvVlkhA6juEjpEeRAVPNCpN3nxJo/5FhDNKgBcdmcmhaH6JjgST4xY/23ZYK0w==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
     hasBin: true
-    dev: false
+    dev: true
 
   /natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
@@ -12285,8 +10609,8 @@ packages:
   /next-tick@1.1.0:
     resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==}
 
-  /next@15.2.1(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-zxbsdQv3OqWXybK5tMkPCBKyhIz63RstJ+NvlfkaLMc/m5MwXgz2e92k+hSKcyBpyADhMk2C31RIiaDjUZae7g==}
+  /next@15.3.0(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-k0MgP6BsK8cZ73wRjMazl2y2UcXj49ZXLDEgx6BikWuby/CN+nh81qFFI16edgd7xYpe/jj2OZEIwCoqnzz0bQ==}
     engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
     hasBin: true
     peerDependencies:
@@ -12306,25 +10630,25 @@ packages:
       sass:
         optional: true
     dependencies:
-      '@next/env': 15.2.1
+      '@next/env': 15.3.0
       '@swc/counter': 0.1.3
       '@swc/helpers': 0.5.15
       busboy: 1.6.0
-      caniuse-lite: 1.0.30001675
+      caniuse-lite: 1.0.30001715
       postcss: 8.4.31
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       styled-jsx: 5.1.6(react@18.3.1)
     optionalDependencies:
-      '@next/swc-darwin-arm64': 15.2.1
-      '@next/swc-darwin-x64': 15.2.1
-      '@next/swc-linux-arm64-gnu': 15.2.1
-      '@next/swc-linux-arm64-musl': 15.2.1
-      '@next/swc-linux-x64-gnu': 15.2.1
-      '@next/swc-linux-x64-musl': 15.2.1
-      '@next/swc-win32-arm64-msvc': 15.2.1
-      '@next/swc-win32-x64-msvc': 15.2.1
-      sharp: 0.33.5
+      '@next/swc-darwin-arm64': 15.3.0
+      '@next/swc-darwin-x64': 15.3.0
+      '@next/swc-linux-arm64-gnu': 15.3.0
+      '@next/swc-linux-arm64-musl': 15.3.0
+      '@next/swc-linux-x64-gnu': 15.3.0
+      '@next/swc-linux-x64-musl': 15.3.0
+      '@next/swc-win32-arm64-msvc': 15.3.0
+      '@next/swc-win32-x64-msvc': 15.3.0
+      sharp: 0.34.1
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
@@ -12355,7 +10679,7 @@ packages:
       '@swc/counter': 0.1.3
       '@swc/helpers': 0.5.15
       busboy: 1.6.0
-      caniuse-lite: 1.0.30001675
+      caniuse-lite: 1.0.30001715
       postcss: 8.4.31
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
@@ -12385,12 +10709,13 @@ packages:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
     dependencies:
       lower-case: 2.0.2
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /node-domexception@1.0.0:
     resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
     engines: {node: '>=10.5.0'}
+    deprecated: Use your platform's native DOMException instead
     dev: false
 
   /node-fetch@2.7.0:
@@ -12418,7 +10743,7 @@ packages:
     resolution: {integrity: sha512-Cov028YhBZ5aB7MdMWJEmwyBig43aGL5WT4vdoB28Oitau1zZAcHUn8Sgfk9HM33TqhtLJ9PlM/O0Mv+QpV/4Q==}
     engines: {node: '>=8.9.4'}
     dependencies:
-      '@babel/runtime-corejs3': 7.26.0
+      '@babel/runtime-corejs3': 7.27.0
       '@types/inquirer': 6.5.0
       change-case: 3.1.0
       del: 5.1.0
@@ -12428,25 +10753,17 @@ packages:
       isbinaryfile: 4.0.10
       lodash.get: 4.4.2
       mkdirp: 0.5.6
-      resolve: 1.22.8
+      resolve: 1.22.10
     dev: true
 
-  /node-releases@2.0.18:
-    resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==}
-
-  /nopt@8.1.0:
-    resolution: {integrity: sha512-ieGu42u/Qsa4TFktmaKEwM6MQH0pOWnaB3htzh0JRtx84+Mebc0cbZYN5bC+6WTZ4+77xrL9Pn5m7CV6VIkV7A==}
-    engines: {node: ^18.17.0 || >=20.5.0}
-    hasBin: true
-    dependencies:
-      abbrev: 3.0.0
-    dev: false
+  /node-releases@2.0.19:
+    resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
 
   /normalize-package-data@2.5.0:
     resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
     dependencies:
       hosted-git-info: 2.8.9
-      resolve: 1.22.8
+      resolve: 1.22.10
       semver: 5.7.2
       validate-npm-package-license: 3.0.4
     dev: true
@@ -12466,6 +10783,7 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       path-key: 3.1.1
+    dev: true
 
   /nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
@@ -12476,7 +10794,7 @@ packages:
   /number-flow@0.4.2:
     resolution: {integrity: sha512-YLN73/m8BUU4r/6mq9zqLdpFKt3LSPPRectOECheA9jtNWF4PP8EIz0+Z1giqu/x9nS86KnKwwouLXXiqnjhQQ==}
     dependencies:
-      esm-env: 1.2.1
+      esm-env: 1.2.2
     dev: false
 
   /object-assign@4.1.1:
@@ -12497,51 +10815,55 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /object.assign@4.1.5:
-    resolution: {integrity: sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==}
+  /object.assign@4.1.7:
+    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
       define-properties: 1.2.1
+      es-object-atoms: 1.1.1
       has-symbols: 1.1.0
       object-keys: 1.1.1
     dev: true
 
-  /object.entries@1.1.8:
-    resolution: {integrity: sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==}
+  /object.entries@1.1.9:
+    resolution: {integrity: sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
       define-properties: 1.2.1
-      es-object-atoms: 1.0.0
+      es-object-atoms: 1.1.1
     dev: true
 
   /object.fromentries@2.0.8:
     resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-object-atoms: 1.0.0
+      es-abstract: 1.23.9
+      es-object-atoms: 1.1.1
     dev: true
 
   /object.groupby@1.0.3:
     resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.9
     dev: true
 
-  /object.values@1.2.0:
-    resolution: {integrity: sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==}
+  /object.values@1.2.1:
+    resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
       define-properties: 1.2.1
-      es-object-atoms: 1.0.0
+      es-object-atoms: 1.1.1
     dev: true
 
   /objectorarray@1.0.5:
@@ -12566,17 +10888,22 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       mimic-fn: 2.1.0
+    dev: true
+
+  /oniguruma-parser@0.12.0:
+    resolution: {integrity: sha512-fD9o5ebCmEAA9dLysajdQvuKzLL7cj+w7DQjuO3Cb6IwafENfx6iL+RGkmyW82pVRsvgzixsWinHvgxTMJvdIA==}
+    dev: false
 
-  /oniguruma-to-es@3.1.1:
-    resolution: {integrity: sha512-bUH8SDvPkH3ho3dvwJwfonjlQ4R80vjyvrU8YpxuROddv55vAEJrTuCuCVUhhsHbtlD9tGGbaNApGQckXhS8iQ==}
+  /oniguruma-to-es@4.3.1:
+    resolution: {integrity: sha512-VtX1kepWO+7HG7IWV5v72JhiqofK7XsiHmtgnvurnNOTdIvE5mrdWYtsOrQyrXCv1L2Ckm08hywp+MFO7rC4Ug==}
     dependencies:
-      emoji-regex-xs: 1.0.0
+      oniguruma-parser: 0.12.0
       regex: 6.0.1
       regex-recursion: 6.0.2
     dev: false
 
-  /openai@4.86.1(zod@3.23.8):
-    resolution: {integrity: sha512-x3iCLyaC3yegFVZaxOmrYJjitKxZ9hpVbLi+ZlT5UHuHTMlEQEbKXkGOM78z9qm2T5GF+XRUZCP2/aV4UPFPJQ==}
+  /openai@4.96.0(zod@3.24.3):
+    resolution: {integrity: sha512-dKoW56i02Prv2XQolJ9Rl9Svqubqkzg3QpwEOBuSVZLk05Shelu7s+ErRTwFc1Bs3JZ2qBqBfVpXQiJhwOGG8A==}
     hasBin: true
     peerDependencies:
       ws: ^8.18.0
@@ -12587,14 +10914,14 @@ packages:
       zod:
         optional: true
     dependencies:
-      '@types/node': 18.19.79
+      '@types/node': 18.19.87
       '@types/node-fetch': 2.6.12
       abort-controller: 3.0.0
       agentkeepalive: 4.6.0
       form-data-encoder: 1.7.2
       formdata-node: 4.4.1
       node-fetch: 2.7.0
-      zod: 3.23.8
+      zod: 3.24.3
     transitivePeerDependencies:
       - encoding
     dev: false
@@ -12649,6 +10976,15 @@ packages:
     resolution: {integrity: sha512-AlWY719RF02ujitly7Kk/0QlV+pXGFDHrHf9O2OKqyqgBieaPOIeuSkL8sRK6j2WK+/ZAURq2kZsY0d8JapUiw==}
     dev: false
 
+  /own-keys@1.0.1:
+    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      get-intrinsic: 1.3.0
+      object-keys: 1.1.1
+      safe-push-apply: 1.0.0
+    dev: true
+
   /p-limit@2.3.0:
     resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
     engines: {node: '>=6'}
@@ -12689,18 +11025,18 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /pac-proxy-agent@7.0.2:
-    resolution: {integrity: sha512-BFi3vZnO9X5Qt6NRz7ZOaPja3ic0PhlsmCRYLOpN11+mWBCR6XJDqW5RF3j8jm4WGGQZtBA+bTfxYzeKW73eHg==}
+  /pac-proxy-agent@7.2.0:
+    resolution: {integrity: sha512-TEB8ESquiLMc0lV8vcd5Ql/JAKAoyzHFXaStwjkzpOpC5Yv+pIzLfHvjTSdf3vpa2bMiUQrg9i6276yn8666aA==}
     engines: {node: '>= 14'}
     dependencies:
       '@tootallnate/quickjs-emscripten': 0.23.0
-      agent-base: 7.1.1
-      debug: 4.3.7
-      get-uri: 6.0.3
+      agent-base: 7.1.3
+      debug: 4.4.0
+      get-uri: 6.0.4
       http-proxy-agent: 7.0.2
-      https-proxy-agent: 7.0.5
+      https-proxy-agent: 7.0.6
       pac-resolver: 7.0.1
-      socks-proxy-agent: 8.0.4
+      socks-proxy-agent: 8.0.5
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -12744,19 +11080,19 @@ packages:
     resolution: {integrity: sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==}
     dependencies:
       domhandler: 5.0.3
-      parse5: 7.2.1
+      parse5: 7.3.0
     dev: false
 
   /parse5-parser-stream@7.1.2:
     resolution: {integrity: sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==}
     dependencies:
-      parse5: 7.2.1
+      parse5: 7.3.0
     dev: false
 
-  /parse5@7.2.1:
-    resolution: {integrity: sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==}
+  /parse5@7.3.0:
+    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
     dependencies:
-      entities: 4.5.0
+      entities: 6.0.0
     dev: false
 
   /parseley@0.12.1:
@@ -12807,6 +11143,7 @@ packages:
   /path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
+    dev: true
 
   /peberminta@0.9.0:
     resolution: {integrity: sha512-XIxfHpEuSJbITd1H3EeQwpcZbTLHc+VVr8ANI9t5sit565tsI4/xK3KWTUFE2e6QiangUkh3B0jihzmGnNrRsQ==}
@@ -12822,7 +11159,6 @@ packages:
   /picomatch@4.0.2:
     resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
     engines: {node: '>=12'}
-    dev: false
 
   /pify@2.3.0:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
@@ -12834,8 +11170,8 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /pirates@4.0.6:
-    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
+  /pirates@4.0.7:
+    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
     engines: {node: '>= 6'}
     dev: false
 
@@ -12844,50 +11180,34 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /possible-typed-array-names@1.0.0:
-    resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
+  /possible-typed-array-names@1.1.0:
+    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
     dev: true
 
-  /postcss-import@15.1.0(postcss@8.4.47):
+  /postcss-import@15.1.0(postcss@8.5.3):
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       postcss: ^8.0.0
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.5.3
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
-      resolve: 1.22.8
+      resolve: 1.22.10
     dev: false
 
-  /postcss-js@4.0.1(postcss@8.4.47):
+  /postcss-js@4.0.1(postcss@8.5.3):
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
     engines: {node: ^12 || ^14 || >= 16}
     peerDependencies:
       postcss: ^8.4.21
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.4.47
-    dev: false
-
-  /postcss-load-config@3.1.4:
-    resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
-    engines: {node: '>= 10'}
-    peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
-    dependencies:
-      lilconfig: 2.1.0
-      yaml: 1.10.2
+      postcss: 8.5.3
     dev: false
 
-  /postcss-load-config@4.0.2(postcss@8.4.47)(ts-node@10.9.2):
+  /postcss-load-config@4.0.2(postcss@8.5.3)(ts-node@10.9.2):
     resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
     engines: {node: '>= 14'}
     peerDependencies:
@@ -12899,19 +11219,19 @@ packages:
       ts-node:
         optional: true
     dependencies:
-      lilconfig: 3.1.2
-      postcss: 8.4.47
-      ts-node: 10.9.2(@types/node@20.17.3)(typescript@5.6.3)
-      yaml: 2.6.0
+      lilconfig: 3.1.3
+      postcss: 8.5.3
+      ts-node: 10.9.2(@types/node@20.17.32)(typescript@5.8.3)
+      yaml: 2.7.1
     dev: false
 
-  /postcss-nested@6.2.0(postcss@8.4.47):
+  /postcss-nested@6.2.0(postcss@8.5.3):
     resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.2.14
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.5.3
       postcss-selector-parser: 6.1.2
     dev: false
 
@@ -12930,25 +11250,16 @@ packages:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
     dev: false
-
-  /postcss-value-parser@4.2.0:
-    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: false
-
-  /postcss@8.4.31:
-    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.8
-      picocolors: 1.1.1
-      source-map-js: 1.2.1
+
+  /postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
     dev: false
 
-  /postcss@8.4.47:
-    resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==}
+  /postcss@8.4.31:
+    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
-      nanoid: 3.3.7
+      nanoid: 3.3.11
       picocolors: 1.1.1
       source-map-js: 1.2.1
     dev: false
@@ -12957,7 +11268,7 @@ packages:
     resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
-      nanoid: 3.3.8
+      nanoid: 3.3.11
       picocolors: 1.1.1
       source-map-js: 1.2.1
     dev: false
@@ -12967,31 +11278,30 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: true
 
-  /prettier-plugin-packagejson@2.5.3(prettier@3.3.3):
-    resolution: {integrity: sha512-ATMEEXr+ywls1kgrZEWl4SBPEm0uDdyDAjyNzUC0/Z8WZTD3RqbJcQDR+Dau+wYkW9KHK6zqQIsFyfn+9aduWg==}
+  /prettier-plugin-packagejson@2.5.10(prettier@3.5.3):
+    resolution: {integrity: sha512-LUxATI5YsImIVSaaLJlJ3aE6wTD+nvots18U3GuQMJpUyClChaZlQrqx3dBnbhF20OnKWZyx8EgyZypQtBDtgQ==}
     peerDependencies:
       prettier: '>= 1.16.0'
     peerDependenciesMeta:
       prettier:
         optional: true
     dependencies:
-      prettier: 3.3.3
-      sort-package-json: 2.10.1
+      prettier: 3.5.3
+      sort-package-json: 2.15.1
       synckit: 0.9.2
     dev: true
 
-  /prettier@3.3.3:
-    resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==}
-    engines: {node: '>=14'}
-    hasBin: true
-    dev: true
-
   /prettier@3.4.2:
     resolution: {integrity: sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==}
     engines: {node: '>=14'}
     hasBin: true
     dev: false
 
+  /prettier@3.5.3:
+    resolution: {integrity: sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   /prismjs@1.29.0:
     resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
     engines: {node: '>=6'}
@@ -13008,22 +11318,18 @@ packages:
     resolution: {integrity: sha512-7D/qOz/+Y4X/rzSB6jKxKUsQnphO046ei8qxG59mtM3RG3DHgTK81HrxrmoDVINJb8NKT5ZsRbwHvQ6B68Iyhg==}
     dev: false
 
-  /proto-list@1.2.4:
-    resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
-    dev: false
-
-  /proxy-agent@6.4.0:
-    resolution: {integrity: sha512-u0piLU+nCOHMgGjRbimiXmA9kM/L9EHh3zL81xCdp7m+Y2pHIsnmbdDoEDoAz5geaonNR6q6+yOPQs6n4T6sBQ==}
+  /proxy-agent@6.5.0:
+    resolution: {integrity: sha512-TmatMXdr2KlRiA2CyDu8GqR8EjahTG3aY3nXjdzFyoZbmB8hrBsTyMezhULIXKnC0jpfjlmiZ3+EaCzoInSu/A==}
     engines: {node: '>= 14'}
     dependencies:
-      agent-base: 7.1.1
-      debug: 4.3.7
+      agent-base: 7.1.3
+      debug: 4.4.0
       http-proxy-agent: 7.0.2
-      https-proxy-agent: 7.0.5
+      https-proxy-agent: 7.0.6
       lru-cache: 7.18.3
-      pac-proxy-agent: 7.0.2
+      pac-proxy-agent: 7.2.0
       proxy-from-env: 1.1.0
-      socks-proxy-agent: 8.0.4
+      socks-proxy-agent: 8.0.5
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -13035,6 +11341,7 @@ packages:
   /punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
+    dev: true
 
   /qs@6.14.0:
     resolution: {integrity: sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==}
@@ -13090,24 +11397,15 @@ packages:
       scheduler: 0.23.2
     dev: false
 
-  /react-dom@19.0.0(react@19.0.0):
+  /react-dom@19.0.0(react@19.1.0):
     resolution: {integrity: sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==}
     peerDependencies:
       react: ^19.0.0
     dependencies:
-      react: 19.0.0
+      react: 19.1.0
       scheduler: 0.25.0
     dev: false
 
-  /react-dom@19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-fb9a90fa48-20240614):
-    resolution: {integrity: sha512-PoEsPe32F7KPLYOBvZfjylEI1B67N44PwY3lyvpmBkhlluLnLz0jH8q2Wg9YidAi6z0k3iUnNRm5x10wurzt9Q==}
-    peerDependencies:
-      react: 19.0.0-rc-fb9a90fa48-20240614
-    dependencies:
-      react: 19.0.0-rc-fb9a90fa48-20240614
-      scheduler: 0.25.0-rc-fb9a90fa48-20240614
-    dev: false
-
   /react-dom@19.1.0(react@19.1.0):
     resolution: {integrity: sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==}
     peerDependencies:
@@ -13117,14 +11415,14 @@ packages:
       scheduler: 0.26.0
     dev: false
 
-  /react-dropzone@14.2.10(react@19.1.0):
-    resolution: {integrity: sha512-Y98LOCYxGO2jOFWREeKJlL7gbrHcOlTBp+9DCM1dh9XQ8+P/8ThhZT7kFb05C+bPcTXq/rixpU+5+LzwYrFLUw==}
+  /react-dropzone@14.3.8(react@19.1.0):
+    resolution: {integrity: sha512-sBgODnq+lcA4P296DY4wacOZz3JFpD99fp+hb//iBO2HHnyeZU3FwWyXJ6salNpqQdsZrgMrotuko/BdJMV8Ug==}
     engines: {node: '>= 10.13'}
     peerDependencies:
       react: '>= 16.8 || 18.0.0'
     dependencies:
-      attr-accept: 2.2.4
-      file-selector: 0.6.0
+      attr-accept: 2.2.5
+      file-selector: 2.1.2
       prop-types: 15.8.1
       react: 19.1.0
     dev: false
@@ -13142,8 +11440,8 @@ packages:
       tslib: 2.0.1
     dev: false
 
-  /react-hook-form@7.53.1(react@19.1.0):
-    resolution: {integrity: sha512-6aiQeBda4zjcuaugWvim9WsGqisoUk+etmFEsSUMm451/Ic8L/UAb7sRtMj3V+Hdzm6mMjU1VhiSzYUZeBm0Vg==}
+  /react-hook-form@7.56.1(react@19.1.0):
+    resolution: {integrity: sha512-qWAVokhSpshhcEuQDSANHx3jiAEFzu2HAaaQIzi/r9FNPm1ioAvuJSD4EuZzWd7Al7nTRKcKPnBKO7sRn+zavQ==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       react: ^16.8.0 || ^17 || ^18 || ^19
@@ -13151,8 +11449,8 @@ packages:
       react: 19.1.0
     dev: false
 
-  /react-hotkeys-hook@4.6.1(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-XlZpbKUj9tkfgPgT9gA+1p7Ey6vFIZHttUjPqpTdyT5nqQ8mHL7elxvSbaC+dpSiHUSmr21Ya1mDxBZG3aje4Q==}
+  /react-hotkeys-hook@4.6.2(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-FmP+ZriY3EG59Ug/lxNfrObCnW9xQShgk7Nb83+CkpfkcCpfS95ydv+E9JuXA5cp8KtskU7LGlIARpkc92X22Q==}
     peerDependencies:
       react: '>=16.8.1'
       react-dom: '>=16.8.1'
@@ -13178,42 +11476,11 @@ packages:
       fast-deep-equal: 2.0.1
     dev: false
 
-  /react-refresh@0.14.2:
-    resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
+  /react-refresh@0.17.0:
+    resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
     engines: {node: '>=0.10.0'}
     dev: false
 
-  /react-remove-scroll-bar@2.3.6(@types/react@19.1.1)(react@19.1.0):
-    resolution: {integrity: sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@types/react': 19.1.1
-      react: 19.1.0
-      react-style-singleton: 2.2.3(@types/react@19.1.1)(react@19.1.0)
-      tslib: 2.8.0
-    dev: false
-
-  /react-remove-scroll-bar@2.3.6(react@18.3.1):
-    resolution: {integrity: sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      react: 18.3.1
-      react-style-singleton: 2.2.3(react@18.3.1)
-      tslib: 2.8.0
-    dev: false
-
   /react-remove-scroll-bar@2.3.8(@types/react@19.1.1)(react@19.1.0):
     resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
     engines: {node: '>=10'}
@@ -13227,7 +11494,7 @@ packages:
       '@types/react': 19.1.1
       react: 19.1.0
       react-style-singleton: 2.2.3(@types/react@19.1.1)(react@19.1.0)
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /react-remove-scroll-bar@2.3.8(react@18.3.1):
@@ -13242,7 +11509,7 @@ packages:
     dependencies:
       react: 18.3.1
       react-style-singleton: 2.2.3(react@18.3.1)
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /react-remove-scroll@2.5.4(react@18.3.1):
@@ -13258,7 +11525,7 @@ packages:
       react: 18.3.1
       react-remove-scroll-bar: 2.3.8(react@18.3.1)
       react-style-singleton: 2.2.3(react@18.3.1)
-      tslib: 2.8.0
+      tslib: 2.8.1
       use-callback-ref: 1.3.3(react@18.3.1)
       use-sidecar: 1.1.3(react@18.3.1)
     dev: false
@@ -13277,7 +11544,7 @@ packages:
       react: 19.1.0
       react-remove-scroll-bar: 2.3.8(@types/react@19.1.1)(react@19.1.0)
       react-style-singleton: 2.2.3(@types/react@19.1.1)(react@19.1.0)
-      tslib: 2.8.0
+      tslib: 2.8.1
       use-callback-ref: 1.3.3(@types/react@19.1.1)(react@19.1.0)
       use-sidecar: 1.1.3(@types/react@19.1.1)(react@19.1.0)
     dev: false
@@ -13295,48 +11562,11 @@ packages:
       react: 18.3.1
       react-remove-scroll-bar: 2.3.8(react@18.3.1)
       react-style-singleton: 2.2.3(react@18.3.1)
-      tslib: 2.8.0
+      tslib: 2.8.1
       use-callback-ref: 1.3.3(react@18.3.1)
       use-sidecar: 1.1.3(react@18.3.1)
     dev: false
 
-  /react-remove-scroll@2.6.0(@types/react@19.1.1)(react@19.1.0):
-    resolution: {integrity: sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@types/react': 19.1.1
-      react: 19.1.0
-      react-remove-scroll-bar: 2.3.6(@types/react@19.1.1)(react@19.1.0)
-      react-style-singleton: 2.2.1(@types/react@19.1.1)(react@19.1.0)
-      tslib: 2.8.0
-      use-callback-ref: 1.3.2(@types/react@19.1.1)(react@19.1.0)
-      use-sidecar: 1.1.2(@types/react@19.1.1)(react@19.1.0)
-    dev: false
-
-  /react-remove-scroll@2.6.0(react@18.3.1):
-    resolution: {integrity: sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      react: 18.3.1
-      react-remove-scroll-bar: 2.3.6(react@18.3.1)
-      react-style-singleton: 2.2.1(react@18.3.1)
-      tslib: 2.8.0
-      use-callback-ref: 1.3.2(react@18.3.1)
-      use-sidecar: 1.1.2(react@18.3.1)
-    dev: false
-
   /react-remove-scroll@2.6.3(@types/react@19.1.1)(react@19.1.0):
     resolution: {integrity: sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ==}
     engines: {node: '>=10'}
@@ -13351,42 +11581,50 @@ packages:
       react: 19.1.0
       react-remove-scroll-bar: 2.3.8(@types/react@19.1.1)(react@19.1.0)
       react-style-singleton: 2.2.3(@types/react@19.1.1)(react@19.1.0)
-      tslib: 2.8.0
+      tslib: 2.8.1
       use-callback-ref: 1.3.3(@types/react@19.1.1)(react@19.1.0)
       use-sidecar: 1.1.3(@types/react@19.1.1)(react@19.1.0)
     dev: false
 
-  /react-style-singleton@2.2.1(@types/react@19.1.1)(react@19.1.0):
-    resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
+  /react-remove-scroll@2.6.3(react@18.3.1):
+    resolution: {integrity: sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ==}
     engines: {node: '>=10'}
     peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 19.1.1
-      get-nonce: 1.0.1
-      invariant: 2.2.4
+      react: 18.3.1
+      react-remove-scroll-bar: 2.3.8(react@18.3.1)
+      react-style-singleton: 2.2.3(react@18.3.1)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(react@18.3.1)
+      use-sidecar: 1.1.3(react@18.3.1)
+    dev: false
+
+  /react-resizable-panels@2.1.9(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-z77+X08YDIrgAes4jl8xhnUu1LNIRp4+E7cv4xHmLOxxUPO/ML7PSrE813b90vj7xvQ1lcf7g2uA9GeMZonjhQ==}
+    peerDependencies:
+      react: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    dependencies:
       react: 19.1.0
-      tslib: 2.8.0
+      react-dom: 19.1.0(react@19.1.0)
     dev: false
 
-  /react-style-singleton@2.2.1(react@18.3.1):
-    resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
-    engines: {node: '>=10'}
+  /react-smooth@4.0.4(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==}
     peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
     dependencies:
-      get-nonce: 1.0.1
-      invariant: 2.2.4
+      fast-equals: 5.2.2
+      prop-types: 15.8.1
       react: 18.3.1
-      tslib: 2.8.0
+      react-dom: 18.3.1(react@18.3.1)
+      react-transition-group: 4.4.5(react-dom@18.3.1)(react@18.3.1)
     dev: false
 
   /react-style-singleton@2.2.3(@types/react@19.1.1)(react@19.1.0):
@@ -13402,7 +11640,7 @@ packages:
       '@types/react': 19.1.1
       get-nonce: 1.0.1
       react: 19.1.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /react-style-singleton@2.2.3(react@18.3.1):
@@ -13417,7 +11655,7 @@ packages:
     dependencies:
       get-nonce: 1.0.1
       react: 18.3.1
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /react-transition-group@4.4.5(react-dom@18.3.1)(react@18.3.1):
@@ -13426,7 +11664,7 @@ packages:
       react: '>=16.6.0'
       react-dom: '>=16.6.0'
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.27.0
       dom-helpers: 5.2.1
       loose-envify: 1.4.0
       prop-types: 15.8.1
@@ -13441,16 +11679,6 @@ packages:
       loose-envify: 1.4.0
     dev: false
 
-  /react@19.0.0:
-    resolution: {integrity: sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /react@19.0.0-rc-fb9a90fa48-20240614:
-    resolution: {integrity: sha512-nvE3Gy+IOIfH/DXhkyxFVQSrITarFcQz4+shzC/McxQXEUSonpw2oDy/Wi9hdDtV3hlP12VYuDL95iiBREedNQ==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
   /react@19.1.0:
     resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==}
     engines: {node: '>=0.10.0'}
@@ -13503,8 +11731,8 @@ packages:
       decimal.js-light: 2.5.1
     dev: false
 
-  /recharts@2.15.1(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-v8PUTUlyiDe56qUj82w/EDVuzEFXwEHp9/xOowGAZwfLjB9uAy3GllQVIYMWF6nU+qibx85WF75zD7AjqoT54Q==}
+  /recharts@2.15.3(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-EdOPzTwcFSuqtvkDoaM5ws/Km1+WTAO2eizL7rqiG0V2UVhTnz0m7J2i0CjVPUCdEkZImaWvXLbZDS2H5t6GFQ==}
     engines: {node: '>=14'}
     peerDependencies:
       react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -13522,17 +11750,18 @@ packages:
       victory-vendor: 36.9.2
     dev: false
 
-  /reflect.getprototypeof@1.0.6:
-    resolution: {integrity: sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==}
+  /reflect.getprototypeof@1.0.10:
+    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.9
       es-errors: 1.3.0
-      get-intrinsic: 1.2.7
-      globalthis: 1.0.4
-      which-builtin-type: 1.1.4
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      which-builtin-type: 1.2.1
     dev: true
 
   /regenerator-runtime@0.14.1:
@@ -13559,13 +11788,15 @@ packages:
     hasBin: true
     dev: true
 
-  /regexp.prototype.flags@1.5.3:
-    resolution: {integrity: sha512-vqlC04+RQoFalODCbCumG2xIOvapzVMHwsyIGM/SIE8fRhFFsXeH8/QQ+s0T0kDAhKc4k30s73/0ydkHQz6HlQ==}
+  /regexp.prototype.flags@1.5.4:
+    resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
       define-properties: 1.2.1
       es-errors: 1.3.0
+      get-proto: 1.0.1
+      gopd: 1.2.0
       set-function-name: 2.0.2
     dev: true
 
@@ -13594,11 +11825,11 @@ packages:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
     dev: false
 
-  /resend@4.1.2(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-km0btrAj/BqIaRlS+SoLNMaCAUUWEgcEvZpycfVvoXEwAHCxU+vp/ikxPgKRkyKyiR2iDcdUq5uIBTDK9oSSSQ==}
+  /resend@4.4.1(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-FR22bzMW3VfoyZSBc8ScGo8ShrMWHmWB0G3FrispzWCnYSEEK5M7pyRvZtInKmM/09lsJETKc2q66mX+dXPSmg==}
     engines: {node: '>=18'}
     dependencies:
-      '@react-email/render': 1.0.1(react-dom@19.1.0)(react@19.1.0)
+      '@react-email/render': 1.0.6(react-dom@19.1.0)(react@19.1.0)
     transitivePeerDependencies:
       - react
       - react-dom
@@ -13609,11 +11840,6 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /resolve-from@5.0.0:
-    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
-    engines: {node: '>=8'}
-    dev: false
-
   /resolve-pkg-maps@1.0.0:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
     dev: true
@@ -13621,15 +11847,16 @@ packages:
   /resolve@1.19.0:
     resolution: {integrity: sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==}
     dependencies:
-      is-core-module: 2.15.1
+      is-core-module: 2.16.1
       path-parse: 1.0.7
     dev: true
 
-  /resolve@1.22.8:
-    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
+  /resolve@1.22.10:
+    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
+    engines: {node: '>= 0.4'}
     hasBin: true
     dependencies:
-      is-core-module: 2.15.1
+      is-core-module: 2.16.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
@@ -13637,7 +11864,7 @@ packages:
     resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
     hasBin: true
     dependencies:
-      is-core-module: 2.15.1
+      is-core-module: 2.16.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
     dev: true
@@ -13658,8 +11885,8 @@ packages:
       signal-exit: 3.0.7
     dev: true
 
-  /reusify@1.0.4:
-    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
+  /reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
   /rimraf@3.0.2:
@@ -13670,41 +11897,33 @@ packages:
       glob: 7.2.3
     dev: true
 
-  /rollup@3.29.5:
-    resolution: {integrity: sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==}
-    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
-    hasBin: true
-    optionalDependencies:
-      fsevents: 2.3.3
-    dev: false
-
-  /rollup@4.38.0:
-    resolution: {integrity: sha512-5SsIRtJy9bf1ErAOiFMFzl64Ex9X5V7bnJ+WlFMb+zmP459OSWCEG7b0ERZ+PEU7xPt4OG3RHbrp1LJlXxYTrw==}
+  /rollup@4.40.1:
+    resolution: {integrity: sha512-C5VvvgCCyfyotVITIAv+4efVytl5F7wt+/I2i9q9GZcEXW9BP52YYOXC58igUi+LFZVHukErIIqQSWwv/M3WRw==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
     dependencies:
       '@types/estree': 1.0.7
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.38.0
-      '@rollup/rollup-android-arm64': 4.38.0
-      '@rollup/rollup-darwin-arm64': 4.38.0
-      '@rollup/rollup-darwin-x64': 4.38.0
-      '@rollup/rollup-freebsd-arm64': 4.38.0
-      '@rollup/rollup-freebsd-x64': 4.38.0
-      '@rollup/rollup-linux-arm-gnueabihf': 4.38.0
-      '@rollup/rollup-linux-arm-musleabihf': 4.38.0
-      '@rollup/rollup-linux-arm64-gnu': 4.38.0
-      '@rollup/rollup-linux-arm64-musl': 4.38.0
-      '@rollup/rollup-linux-loongarch64-gnu': 4.38.0
-      '@rollup/rollup-linux-powerpc64le-gnu': 4.38.0
-      '@rollup/rollup-linux-riscv64-gnu': 4.38.0
-      '@rollup/rollup-linux-riscv64-musl': 4.38.0
-      '@rollup/rollup-linux-s390x-gnu': 4.38.0
-      '@rollup/rollup-linux-x64-gnu': 4.38.0
-      '@rollup/rollup-linux-x64-musl': 4.38.0
-      '@rollup/rollup-win32-arm64-msvc': 4.38.0
-      '@rollup/rollup-win32-ia32-msvc': 4.38.0
-      '@rollup/rollup-win32-x64-msvc': 4.38.0
+      '@rollup/rollup-android-arm-eabi': 4.40.1
+      '@rollup/rollup-android-arm64': 4.40.1
+      '@rollup/rollup-darwin-arm64': 4.40.1
+      '@rollup/rollup-darwin-x64': 4.40.1
+      '@rollup/rollup-freebsd-arm64': 4.40.1
+      '@rollup/rollup-freebsd-x64': 4.40.1
+      '@rollup/rollup-linux-arm-gnueabihf': 4.40.1
+      '@rollup/rollup-linux-arm-musleabihf': 4.40.1
+      '@rollup/rollup-linux-arm64-gnu': 4.40.1
+      '@rollup/rollup-linux-arm64-musl': 4.40.1
+      '@rollup/rollup-linux-loongarch64-gnu': 4.40.1
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.40.1
+      '@rollup/rollup-linux-riscv64-gnu': 4.40.1
+      '@rollup/rollup-linux-riscv64-musl': 4.40.1
+      '@rollup/rollup-linux-s390x-gnu': 4.40.1
+      '@rollup/rollup-linux-x64-gnu': 4.40.1
+      '@rollup/rollup-linux-x64-musl': 4.40.1
+      '@rollup/rollup-win32-arm64-msvc': 4.40.1
+      '@rollup/rollup-win32-ia32-msvc': 4.40.1
+      '@rollup/rollup-win32-x64-msvc': 4.40.1
       fsevents: 2.3.3
     dev: false
 
@@ -13725,17 +11944,18 @@ packages:
       tslib: 1.14.1
     dev: true
 
-  /rxjs@7.8.1:
-    resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}
+  /rxjs@7.8.2:
+    resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
     dependencies:
-      tslib: 2.8.0
+      tslib: 2.8.1
 
-  /safe-array-concat@1.1.2:
-    resolution: {integrity: sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==}
+  /safe-array-concat@1.1.3:
+    resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
     engines: {node: '>=0.4'}
     dependencies:
-      call-bind: 1.0.7
-      get-intrinsic: 1.2.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
       has-symbols: 1.1.0
       isarray: 2.0.5
     dev: true
@@ -13744,13 +11964,21 @@ packages:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
     dev: true
 
-  /safe-regex-test@1.0.3:
-    resolution: {integrity: sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==}
+  /safe-push-apply@1.0.0:
+    resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-errors: 1.3.0
+      isarray: 2.0.5
+    dev: true
+
+  /safe-regex-test@1.1.0:
+    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
       es-errors: 1.3.0
-      is-regex: 1.1.4
+      is-regex: 1.2.1
     dev: true
 
   /safer-buffer@2.1.2:
@@ -13785,17 +12013,10 @@ packages:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
 
-  /semver@7.6.3:
-    resolution: {integrity: sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==}
-    engines: {node: '>=10'}
-    hasBin: true
-
   /semver@7.7.1:
     resolution: {integrity: sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==}
     engines: {node: '>=10'}
     hasBin: true
-    dev: false
-    optional: true
 
   /sentence-case@2.1.1:
     resolution: {integrity: sha512-ENl7cYHaK/Ktwk5OTD+aDbQ3uC8IByu/6Bkg+HDv8Mm+XnBnppVNalcfJTNsp1ibstKh030/JKQQWglDvtKwEQ==}
@@ -13819,7 +12040,7 @@ packages:
       define-data-property: 1.1.4
       es-errors: 1.3.0
       function-bind: 1.1.2
-      get-intrinsic: 1.2.7
+      get-intrinsic: 1.3.0
       gopd: 1.2.0
       has-property-descriptors: 1.0.2
     dev: true
@@ -13834,48 +12055,26 @@ packages:
       has-property-descriptors: 1.0.2
     dev: true
 
+  /set-proto@1.0.0:
+    resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      dunder-proto: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+    dev: true
+
   /setprototypeof@1.1.1:
     resolution: {integrity: sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==}
     dev: false
 
-  /sharp@0.33.5:
-    resolution: {integrity: sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    requiresBuild: true
-    dependencies:
-      color: 4.2.3
-      detect-libc: 2.0.3
-      semver: 7.6.3
-    optionalDependencies:
-      '@img/sharp-darwin-arm64': 0.33.5
-      '@img/sharp-darwin-x64': 0.33.5
-      '@img/sharp-libvips-darwin-arm64': 1.0.4
-      '@img/sharp-libvips-darwin-x64': 1.0.4
-      '@img/sharp-libvips-linux-arm': 1.0.5
-      '@img/sharp-libvips-linux-arm64': 1.0.4
-      '@img/sharp-libvips-linux-s390x': 1.0.4
-      '@img/sharp-libvips-linux-x64': 1.0.4
-      '@img/sharp-libvips-linuxmusl-arm64': 1.0.4
-      '@img/sharp-libvips-linuxmusl-x64': 1.0.4
-      '@img/sharp-linux-arm': 0.33.5
-      '@img/sharp-linux-arm64': 0.33.5
-      '@img/sharp-linux-s390x': 0.33.5
-      '@img/sharp-linux-x64': 0.33.5
-      '@img/sharp-linuxmusl-arm64': 0.33.5
-      '@img/sharp-linuxmusl-x64': 0.33.5
-      '@img/sharp-wasm32': 0.33.5
-      '@img/sharp-win32-ia32': 0.33.5
-      '@img/sharp-win32-x64': 0.33.5
-    dev: false
-    optional: true
-
   /sharp@0.34.1:
     resolution: {integrity: sha512-1j0w61+eVxu7DawFJtnfYcvSv6qPFvfTaqzTQ2BLknVhHTwGS8sc63ZBF4rzkWMBVKybo4S5OBtDdZahh2A1xg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     requiresBuild: true
     dependencies:
       color: 4.2.3
-      detect-libc: 2.0.3
+      detect-libc: 2.0.4
       semver: 7.7.1
     optionalDependencies:
       '@img/sharp-darwin-arm64': 0.34.1
@@ -13911,15 +12110,15 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
-  /shiki@3.0.0:
-    resolution: {integrity: sha512-x6MMdYN9auPGx7kMFtyKbaj65eCdetfrfkvQZwqisZLnGMnAZsZxOpcWD0ElvLPFWHOSMukVyN9Opm7TxQjnZA==}
+  /shiki@3.3.0:
+    resolution: {integrity: sha512-j0Z1tG5vlOFGW8JVj0Cpuatzvshes7VJy5ncDmmMaYcmnGW0Js1N81TOW98ivTFNZfKRn9uwEg/aIm638o368g==}
     dependencies:
-      '@shikijs/core': 3.0.0
-      '@shikijs/engine-javascript': 3.0.0
-      '@shikijs/engine-oniguruma': 3.0.0
-      '@shikijs/langs': 3.0.0
-      '@shikijs/themes': 3.0.0
-      '@shikijs/types': 3.0.0
+      '@shikijs/core': 3.3.0
+      '@shikijs/engine-javascript': 3.3.0
+      '@shikijs/engine-oniguruma': 3.3.0
+      '@shikijs/langs': 3.3.0
+      '@shikijs/themes': 3.3.0
+      '@shikijs/types': 3.3.0
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
     dev: false
@@ -13943,18 +12142,18 @@ packages:
     resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bound: 1.0.3
+      call-bound: 1.0.4
       es-errors: 1.3.0
-      get-intrinsic: 1.2.7
+      get-intrinsic: 1.3.0
       object-inspect: 1.13.4
 
   /side-channel-weakmap@1.0.2:
     resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bound: 1.0.3
+      call-bound: 1.0.4
       es-errors: 1.3.0
-      get-intrinsic: 1.2.7
+      get-intrinsic: 1.3.0
       object-inspect: 1.13.4
       side-channel-map: 1.0.1
 
@@ -13970,6 +12169,7 @@ packages:
 
   /signal-exit@3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+    dev: true
 
   /signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
@@ -13987,10 +12187,6 @@ packages:
   /slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
-
-  /slash@4.0.0:
-    resolution: {integrity: sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==}
-    engines: {node: '>=12'}
     dev: true
 
   /smart-buffer@4.2.0:
@@ -14008,7 +12204,7 @@ packages:
     resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==}
     dependencies:
       dot-case: 3.0.4
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /snakecase-keys@8.0.1:
@@ -14017,33 +12213,33 @@ packages:
     dependencies:
       map-obj: 4.3.0
       snake-case: 3.0.4
-      type-fest: 4.34.1
+      type-fest: 4.40.1
     dev: false
 
-  /socks-proxy-agent@8.0.4:
-    resolution: {integrity: sha512-GNAq/eg8Udq2x0eNiFkr9gRg5bA7PXEWagQdeRX4cPSG+X/8V38v637gim9bjFptMk1QWsCTr0ttrJEiXbNnRw==}
+  /socks-proxy-agent@8.0.5:
+    resolution: {integrity: sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==}
     engines: {node: '>= 14'}
     dependencies:
-      agent-base: 7.1.1
-      debug: 4.3.7
-      socks: 2.8.3
+      agent-base: 7.1.3
+      debug: 4.4.0
+      socks: 2.8.4
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /socks@2.8.3:
-    resolution: {integrity: sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==}
+  /socks@2.8.4:
+    resolution: {integrity: sha512-D3YaD0aRxR3mEcqnidIs7ReYJFVzWdd6fXJYUM8ixcQcJRGTka/b3saV0KflYhyVJXKhb947GndU35SxYNResQ==}
     engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
     dependencies:
       ip-address: 9.0.5
       smart-buffer: 4.2.0
     dev: true
 
-  /sonner@1.5.0(react-dom@19.1.0)(react@19.1.0):
-    resolution: {integrity: sha512-FBjhG/gnnbN6FY0jaNnqZOMmB73R+5IiyYAw8yBj7L54ER7HB3fOSE5OFiQiE2iXWxeXKvg6fIP4LtVppHEdJA==}
+  /sonner@1.7.4(react-dom@19.1.0)(react@19.1.0):
+    resolution: {integrity: sha512-DIS8z4PfJRbIyfVFDVnK9rO3eYDtse4Omcm6bt0oEr5/jtLgysmjuBl1frJ9E/EQZrFmKx2A8m/s5s9CRXIzhw==}
     peerDependencies:
-      react: ^18.0.0
-      react-dom: ^18.0.0
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
     dependencies:
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
@@ -14053,18 +12249,18 @@ packages:
     resolution: {integrity: sha512-855pvK+VkU7PaKYPc+Jjnmt4EzejQHyhhF33q31qG8x7maDzkeFhAAThdCYay11CISO+qAMwjOBP+fPZe0IPyg==}
     dev: true
 
-  /sort-package-json@2.10.1:
-    resolution: {integrity: sha512-d76wfhgUuGypKqY72Unm5LFnMpACbdxXsLPcL27pOsSrmVqH3PztFp1uq+Z22suk15h7vXmTesuh2aEjdCqb5w==}
+  /sort-package-json@2.15.1:
+    resolution: {integrity: sha512-9x9+o8krTT2saA9liI4BljNjwAbvUnWf11Wq+i/iZt8nl2UGYnf3TH5uBydE7VALmP7AGwlfszuEeL8BDyb0YA==}
     hasBin: true
     dependencies:
       detect-indent: 7.0.1
       detect-newline: 4.0.1
       get-stdin: 9.0.0
-      git-hooks-list: 3.1.0
-      globby: 13.2.2
+      git-hooks-list: 3.2.0
       is-plain-obj: 4.1.0
-      semver: 7.6.3
+      semver: 7.7.1
       sort-object-keys: 1.1.3
+      tinyglobby: 0.2.13
     dev: true
 
   /source-map-js@1.2.1:
@@ -14077,13 +12273,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /source-map@0.8.0-beta.0:
-    resolution: {integrity: sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==}
-    engines: {node: '>= 8'}
-    dependencies:
-      whatwg-url: 7.1.0
-    dev: false
-
   /space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
     dev: false
@@ -14092,7 +12281,7 @@ packages:
     resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
     dependencies:
       spdx-expression-parse: 3.0.1
-      spdx-license-ids: 3.0.20
+      spdx-license-ids: 3.0.21
     dev: true
 
   /spdx-exceptions@2.5.0:
@@ -14103,17 +12292,21 @@ packages:
     resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
     dependencies:
       spdx-exceptions: 2.5.0
-      spdx-license-ids: 3.0.20
+      spdx-license-ids: 3.0.21
     dev: true
 
-  /spdx-license-ids@3.0.20:
-    resolution: {integrity: sha512-jg25NiDV/1fLtSgEgyvVyDunvaNHbuwF9lfNV17gSmPFAlYzdfNBlLtLzXTevwkPj7DhGbmN9VnmJIgLnhvaBw==}
+  /spdx-license-ids@3.0.21:
+    resolution: {integrity: sha512-Bvg/8F5XephndSK3JffaRqdT+gyhfqIPwDHpX80tJrF8QQRYMo8sNMeaZ2Dp5+jhwKnUmIOyFFQfHRkjJm5nXg==}
     dev: true
 
   /sprintf-js@1.1.3:
     resolution: {integrity: sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==}
     dev: true
 
+  /stable-hash@0.0.5:
+    resolution: {integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==}
+    dev: true
+
   /state-local@1.0.7:
     resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==}
     dev: false
@@ -14122,8 +12315,8 @@ packages:
     resolution: {integrity: sha512-ZUyfgGDdFRbZGGJQ1YhiM930Yczz5VlbJObrQLlk24+qNHVQx4OlLcYswEUo3bIyNAbQUIUR9Yr5/Hqjzqb4zA==}
     dependencies:
       '@open-draft/deferred-promise': 2.2.0
-      dotenv: 16.4.5
-      mime-db: 1.53.0
+      dotenv: 16.5.0
+      mime-db: 1.54.0
       outvariant: 1.4.0
     dev: false
 
@@ -14132,8 +12325,8 @@ packages:
     engines: {node: '>= 0.6'}
     dev: false
 
-  /std-env@3.8.0:
-    resolution: {integrity: sha512-Bc3YwwCB+OzldMxOXJIIvC6cPRWr/LxOp48CdQTOkPyk/t4JWWJbrilwBd7RJzKV8QW7tJkcgAmeuLLJugl5/w==}
+  /std-env@3.9.0:
+    resolution: {integrity: sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==}
     dev: false
 
   /streamsearch@1.1.0:
@@ -14174,25 +12367,26 @@ packages:
     resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.9
     dev: true
 
-  /string.prototype.matchall@4.0.11:
-    resolution: {integrity: sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==}
+  /string.prototype.matchall@4.0.12:
+    resolution: {integrity: sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.9
       es-errors: 1.3.0
-      es-object-atoms: 1.0.0
-      get-intrinsic: 1.2.7
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
       gopd: 1.2.0
       has-symbols: 1.1.0
-      internal-slot: 1.0.7
-      regexp.prototype.flags: 1.5.3
+      internal-slot: 1.1.0
+      regexp.prototype.flags: 1.5.4
       set-function-name: 2.0.2
       side-channel: 1.1.0
     dev: true
@@ -14201,34 +12395,39 @@ packages:
     resolution: {integrity: sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==}
     dependencies:
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.9
     dev: true
 
-  /string.prototype.trim@1.2.9:
-    resolution: {integrity: sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==}
+  /string.prototype.trim@1.2.10:
+    resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-data-property: 1.1.4
       define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-object-atoms: 1.0.0
+      es-abstract: 1.23.9
+      es-object-atoms: 1.1.1
+      has-property-descriptors: 1.0.2
     dev: true
 
-  /string.prototype.trimend@1.0.8:
-    resolution: {integrity: sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==}
+  /string.prototype.trimend@1.0.9:
+    resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
+    engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
       define-properties: 1.2.1
-      es-object-atoms: 1.0.0
+      es-object-atoms: 1.1.1
     dev: true
 
   /string.prototype.trimstart@1.0.8:
     resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bind: 1.0.8
       define-properties: 1.2.1
-      es-object-atoms: 1.0.0
+      es-object-atoms: 1.1.1
     dev: true
 
   /string_decoder@1.3.0:
@@ -14279,6 +12478,7 @@ packages:
   /strip-final-newline@2.0.0:
     resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
     engines: {node: '>=6'}
+    dev: true
 
   /strip-indent@3.0.0:
     resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
@@ -14306,17 +12506,17 @@ packages:
       clear: 0.1.0
       clui: 0.3.6
       configstore: 4.0.0
-      figlet: 1.8.0
+      figlet: 1.8.1
       inquirer: 6.5.2
       minimist: 1.2.8
       stripe: 6.36.0
     dev: true
 
-  /stripe@17.6.0:
-    resolution: {integrity: sha512-+HB6+SManp0gSRB0dlPmXO+io18krlAe0uimXhhIkL/RG/VIRigkfoM3QDJPkqbuSW0XsA6uzsivNCJU1ELEDA==}
+  /stripe@17.7.0:
+    resolution: {integrity: sha512-aT2BU9KkizY9SATf14WhhYVv2uOapBWX0OFWF4xvcj1mPaNotlSc2CsxpS4DS46ZueSppmCF5BX1sNYBtwBvfw==}
     engines: {node: '>=12.*'}
     dependencies:
-      '@types/node': 20.17.3
+      '@types/node': 20.17.32
       qs: 6.14.0
     dev: false
 
@@ -14330,15 +12530,15 @@ packages:
       uuid: 3.4.0
     dev: true
 
-  /strnum@1.0.5:
-    resolution: {integrity: sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA==}
+  /strnum@1.1.2:
+    resolution: {integrity: sha512-vrN+B7DBIoTTZjnPNewwhx6cBA/H+IS7rfW68n7XxC1y7uoiGQBxaKzqucGUgavX15dJgiGztLJ8vxuEzwqBdA==}
     dev: false
 
   /style-mod@4.1.2:
     resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
     dev: false
 
-  /styled-jsx@5.1.6(react@19.0.0-rc-fb9a90fa48-20240614):
+  /styled-jsx@5.1.6(react@18.3.1):
     resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
     engines: {node: '>= 12.0.0'}
     peerDependencies:
@@ -14352,7 +12552,7 @@ packages:
         optional: true
     dependencies:
       client-only: 0.0.1
-      react: 19.0.0-rc-fb9a90fa48-20240614
+      react: 18.3.1
     dev: false
 
   /styled-jsx@5.1.6(react@19.1.0):
@@ -14377,12 +12577,12 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/gen-mapping': 0.3.8
       commander: 4.1.1
       glob: 10.4.5
       lines-and-columns: 1.2.4
       mz: 2.7.0
-      pirates: 4.0.6
+      pirates: 4.0.7
       ts-interface-checker: 0.1.13
     dev: false
 
@@ -14413,10 +12613,11 @@ packages:
       - encoding
     dev: false
 
-  /svix@1.37.0:
-    resolution: {integrity: sha512-zXtHLEN54ajW/qLreLLWbAyjHQVrpUnULIZY7WgneBVS/LdWVc3xR5vqLKzGVA4XWl/B9GXrs4+OL8EoFNWfIQ==}
+  /svix@1.64.1:
+    resolution: {integrity: sha512-9qq8h7Ex6IjtaDiuq93tL4/YfnV431/e1ieVfkwVaiyVbLUuOfScgary1a+uGygdbqARj9ye/yO+kBun7oCnbA==}
     dependencies:
       '@stablelib/base64': 1.0.1
+      '@types/node': 22.15.3
       es6-promise: 4.2.8
       fast-sha256: 1.3.0
       svix-fetch: 3.0.0
@@ -14432,42 +12633,42 @@ packages:
       upper-case: 1.1.3
     dev: true
 
-  /swr@2.3.2(react@19.1.0):
-    resolution: {integrity: sha512-RosxFpiabojs75IwQ316DGoDRmOqtiAj0tg8wCcbEu4CiLZBs/a9QNtHV7TUfDXmmlgqij/NqzKq/eLelyv9xA==}
+  /swr@2.3.3(react@19.1.0):
+    resolution: {integrity: sha512-dshNvs3ExOqtZ6kJBaAsabhPdHyeY4P2cKwRCniDVifBMoG/SVI7tfLWqPXriVspf2Rg4tPzXJTnwaihIeFw2A==}
     peerDependencies:
       react: ^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
     dependencies:
       dequal: 2.0.3
       react: 19.1.0
-      use-sync-external-store: 1.4.0(react@19.1.0)
+      use-sync-external-store: 1.5.0(react@19.1.0)
     dev: false
 
   /synckit@0.9.2:
     resolution: {integrity: sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     dependencies:
-      '@pkgr/core': 0.1.1
-      tslib: 2.8.0
+      '@pkgr/core': 0.1.2
+      tslib: 2.8.1
     dev: true
 
-  /tailwind-merge@2.5.4:
-    resolution: {integrity: sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==}
+  /tailwind-merge@2.6.0:
+    resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
     dev: false
 
   /tailwind-merge@3.2.0:
     resolution: {integrity: sha512-FQT/OVqCD+7edmmJpsgCsY820RTD5AkBryuG5IUqR5YQZSdj5xlH5nLgH7YPths7WsLPSpSBNneJdM8aS8aeFA==}
     dev: false
 
-  /tailwindcss-animate@1.0.7(tailwindcss@3.4.14):
+  /tailwindcss-animate@1.0.7(tailwindcss@3.4.17):
     resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders'
     dependencies:
-      tailwindcss: 3.4.14(ts-node@10.9.2)
+      tailwindcss: 3.4.17(ts-node@10.9.2)
     dev: false
 
-  /tailwindcss@3.4.14(ts-node@10.9.2):
-    resolution: {integrity: sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==}
+  /tailwindcss@3.4.17(ts-node@10.9.2):
+    resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
     engines: {node: '>=14.0.0'}
     hasBin: true
     dependencies:
@@ -14476,32 +12677,27 @@ packages:
       chokidar: 3.6.0
       didyoumean: 1.2.2
       dlv: 1.1.3
-      fast-glob: 3.3.2
+      fast-glob: 3.3.3
       glob-parent: 6.0.2
       is-glob: 4.0.3
-      jiti: 1.21.6
-      lilconfig: 2.1.0
+      jiti: 1.21.7
+      lilconfig: 3.1.3
       micromatch: 4.0.8
       normalize-path: 3.0.0
       object-hash: 3.0.0
       picocolors: 1.1.1
-      postcss: 8.4.47
-      postcss-import: 15.1.0(postcss@8.4.47)
-      postcss-js: 4.0.1(postcss@8.4.47)
-      postcss-load-config: 4.0.2(postcss@8.4.47)(ts-node@10.9.2)
-      postcss-nested: 6.2.0(postcss@8.4.47)
+      postcss: 8.5.3
+      postcss-import: 15.1.0(postcss@8.5.3)
+      postcss-js: 4.0.1(postcss@8.5.3)
+      postcss-load-config: 4.0.2(postcss@8.5.3)(ts-node@10.9.2)
+      postcss-nested: 6.2.0(postcss@8.5.3)
       postcss-selector-parser: 6.1.2
-      resolve: 1.22.8
+      resolve: 1.22.10
       sucrase: 3.35.0
     transitivePeerDependencies:
       - ts-node
     dev: false
 
-  /tapable@2.2.1:
-    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
-    engines: {node: '>=6'}
-    dev: true
-
   /text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
@@ -14543,6 +12739,13 @@ packages:
     resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
     dev: true
 
+  /tinyglobby@0.2.13:
+    resolution: {integrity: sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==}
+    engines: {node: '>=12.0.0'}
+    dependencies:
+      fdir: 6.4.4(picomatch@4.0.2)
+      picomatch: 4.0.2
+
   /tinygradient@1.1.5:
     resolution: {integrity: sha512-8nIfc2vgQ4TeLnk2lFj4tRLvvJwEfQuabdsmvDdQPT0xlk9TaNtpGd6nNRxXoK6vQhN6RSzj+Cnp5tTQmpxmbw==}
     dependencies:
@@ -14579,35 +12782,24 @@ packages:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
     dev: false
 
-  /tr46@1.0.1:
-    resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==}
-    dependencies:
-      punycode: 2.3.1
-    dev: false
-
-  /tree-kill@1.2.2:
-    resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
-    hasBin: true
-    dev: false
-
   /trim-lines@3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
     dev: false
 
-  /ts-api-utils@1.3.0(typescript@5.6.3):
-    resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==}
+  /ts-api-utils@1.4.3(typescript@5.8.3):
+    resolution: {integrity: sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==}
     engines: {node: '>=16'}
     peerDependencies:
       typescript: '>=4.2.0'
     dependencies:
-      typescript: 5.6.3
+      typescript: 5.8.3
     dev: true
 
   /ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
     dev: false
 
-  /ts-node@10.9.2(@types/node@20.17.3)(typescript@5.6.3):
+  /ts-node@10.9.2(@types/node@20.17.32)(typescript@5.8.3):
     resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
     hasBin: true
     peerDependencies:
@@ -14626,14 +12818,14 @@ packages:
       '@tsconfig/node12': 1.0.11
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
-      '@types/node': 20.17.3
-      acorn: 8.14.0
+      '@types/node': 20.17.32
+      acorn: 8.14.1
       acorn-walk: 8.3.4
       arg: 4.1.3
       create-require: 1.1.1
       diff: 4.0.2
       make-error: 1.3.6
-      typescript: 5.6.3
+      typescript: 5.8.3
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
 
@@ -14654,117 +12846,77 @@ packages:
     resolution: {integrity: sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ==}
     dev: false
 
-  /tslib@2.4.1:
-    resolution: {integrity: sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==}
-    dev: false
-
-  /tslib@2.8.0:
-    resolution: {integrity: sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==}
-
-  /tsup@6.7.0(typescript@5.6.3):
-    resolution: {integrity: sha512-L3o8hGkaHnu5TdJns+mCqFsDBo83bJ44rlK7e6VdanIvpea4ArPcU3swWGsLVbXak1PqQx/V+SSmFPujBK+zEQ==}
-    engines: {node: '>=14.18'}
-    hasBin: true
-    peerDependencies:
-      '@swc/core': ^1
-      postcss: ^8.4.12
-      typescript: '>=4.1.0'
-    peerDependenciesMeta:
-      '@swc/core':
-        optional: true
-      postcss:
-        optional: true
-      typescript:
-        optional: true
-    dependencies:
-      bundle-require: 4.2.1(esbuild@0.17.19)
-      cac: 6.7.14
-      chokidar: 3.6.0
-      debug: 4.3.7
-      esbuild: 0.17.19
-      execa: 5.1.1
-      globby: 11.1.0
-      joycon: 3.1.1
-      postcss-load-config: 3.1.4
-      resolve-from: 5.0.0
-      rollup: 3.29.5
-      source-map: 0.8.0-beta.0
-      sucrase: 3.35.0
-      tree-kill: 1.2.2
-      typescript: 5.6.3
-    transitivePeerDependencies:
-      - supports-color
-      - ts-node
-    dev: false
+  /tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
-  /tsutils@3.21.0(typescript@5.6.3):
+  /tsutils@3.21.0(typescript@5.8.3):
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
     peerDependencies:
       typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
     dependencies:
       tslib: 1.14.1
-      typescript: 5.6.3
+      typescript: 5.8.3
     dev: true
 
-  /turbo-darwin-64@2.2.3:
-    resolution: {integrity: sha512-Rcm10CuMKQGcdIBS3R/9PMeuYnv6beYIHqfZFeKWVYEWH69sauj4INs83zKMTUiZJ3/hWGZ4jet9AOwhsssLyg==}
+  /turbo-darwin-64@2.5.2:
+    resolution: {integrity: sha512-2aIl0Sx230nLk+Cg2qSVxvPOBWCZpwKNuAMKoROTvWKif6VMpkWWiR9XEPoz7sHeLmCOed4GYGMjL1bqAiIS/g==}
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-darwin-arm64@2.2.3:
-    resolution: {integrity: sha512-+EIMHkuLFqUdJYsA3roj66t9+9IciCajgj+DVek+QezEdOJKcRxlvDOS2BUaeN8kEzVSsNiAGnoysFWYw4K0HA==}
+  /turbo-darwin-arm64@2.5.2:
+    resolution: {integrity: sha512-MrFYhK/jYu8N6QlqZtqSHi3e4QVxlzqU3ANHTKn3/tThuwTLbNHEvzBPWSj5W7nZcM58dCqi6gYrfRz6bJZyAA==}
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-linux-64@2.2.3:
-    resolution: {integrity: sha512-UBhJCYnqtaeOBQLmLo8BAisWbc9v9daL9G8upLR+XGj6vuN/Nz6qUAhverN4Pyej1g4Nt1BhROnj6GLOPYyqxQ==}
+  /turbo-linux-64@2.5.2:
+    resolution: {integrity: sha512-LxNqUE2HmAJQ/8deoLgMUDzKxd5bKxqH0UBogWa+DF+JcXhtze3UTMr6lEr0dEofdsEUYK1zg8FRjglmwlN5YA==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-linux-arm64@2.2.3:
-    resolution: {integrity: sha512-hJYT9dN06XCQ3jBka/EWvvAETnHRs3xuO/rb5bESmDfG+d9yQjeTMlhRXKrr4eyIMt6cLDt1LBfyi+6CQ+VAwQ==}
+  /turbo-linux-arm64@2.5.2:
+    resolution: {integrity: sha512-0MI1Ao1q8zhd+UUbIEsrM+yLq1BsrcJQRGZkxIsHFlGp7WQQH1oR3laBgfnUCNdCotCMD6w4moc9pUbXdOR3bg==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-windows-64@2.2.3:
-    resolution: {integrity: sha512-NPrjacrZypMBF31b4HE4ROg4P3nhMBPHKS5WTpMwf7wydZ8uvdEHpESVNMOtqhlp857zbnKYgP+yJF30H3N2dQ==}
+  /turbo-windows-64@2.5.2:
+    resolution: {integrity: sha512-hOLcbgZzE5ttACHHyc1ajmWYq4zKT42IC3G6XqgiXxMbS+4eyVYTL+7UvCZBd3Kca1u4TLQdLQjeO76zyDJc2A==}
     cpu: [x64]
     os: [win32]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-windows-arm64@2.2.3:
-    resolution: {integrity: sha512-fnNrYBCqn6zgKPKLHu4sOkihBI/+0oYFr075duRxqUZ+1aLWTAGfHZLgjVeLh3zR37CVzuerGIPWAEkNhkWEIw==}
+  /turbo-windows-arm64@2.5.2:
+    resolution: {integrity: sha512-fMU41ABhSLa18H8V3Z7BMCGynQ8x+wj9WyBMvWm1jeyRKgkvUYJsO2vkIsy8m0vrwnIeVXKOIn6eSe1ddlBVqw==}
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo@2.2.3:
-    resolution: {integrity: sha512-5lDvSqIxCYJ/BAd6rQGK/AzFRhBkbu4JHVMLmGh/hCb7U3CqSnr5Tjwfy9vc+/5wG2DJ6wttgAaA7MoCgvBKZQ==}
+  /turbo@2.5.2:
+    resolution: {integrity: sha512-Qo5lfuStr6LQh3sPQl7kIi243bGU4aHGDQJUf6ylAdGwks30jJFloc9NYHP7Y373+gGU9OS0faA4Mb5Sy8X9Xw==}
     hasBin: true
     optionalDependencies:
-      turbo-darwin-64: 2.2.3
-      turbo-darwin-arm64: 2.2.3
-      turbo-linux-64: 2.2.3
-      turbo-linux-arm64: 2.2.3
-      turbo-windows-64: 2.2.3
-      turbo-windows-arm64: 2.2.3
+      turbo-darwin-64: 2.5.2
+      turbo-darwin-arm64: 2.5.2
+      turbo-linux-64: 2.5.2
+      turbo-linux-arm64: 2.5.2
+      turbo-windows-64: 2.5.2
+      turbo-windows-arm64: 2.5.2
     dev: true
 
   /type-check@0.4.0:
@@ -14794,60 +12946,61 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /type-fest@4.34.1:
-    resolution: {integrity: sha512-6kSc32kT0rbwxD6QL1CYe8IqdzN/J/ILMrNK+HMQCKH3insCDRY/3ITb0vcBss0a3t72fzh2YSzj8ko1HgwT3g==}
+  /type-fest@4.40.1:
+    resolution: {integrity: sha512-9YvLNnORDpI+vghLU/Nf+zSv0kL47KbVJ1o3sKgoTefl6i+zebxbiDQWoe/oWWqPhIgQdRZRT1KA9sCPL810SA==}
     engines: {node: '>=16'}
     dev: false
 
   /type@2.7.3:
     resolution: {integrity: sha512-8j+1QmAbPvLZow5Qpi6NCaN8FB60p/6x8/vfNqOk/hC+HuvFZhL4+WfekuhQLiqFZXOgQdrs3B+XxEmCc6b3FQ==}
 
-  /typed-array-buffer@1.0.2:
-    resolution: {integrity: sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==}
+  /typed-array-buffer@1.0.3:
+    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
+      call-bound: 1.0.4
       es-errors: 1.3.0
-      is-typed-array: 1.1.13
+      is-typed-array: 1.1.15
     dev: true
 
-  /typed-array-byte-length@1.0.1:
-    resolution: {integrity: sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==}
+  /typed-array-byte-length@1.0.3:
+    resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
-      for-each: 0.3.3
+      call-bind: 1.0.8
+      for-each: 0.3.5
       gopd: 1.2.0
-      has-proto: 1.0.3
-      is-typed-array: 1.1.13
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
     dev: true
 
-  /typed-array-byte-offset@1.0.2:
-    resolution: {integrity: sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==}
+  /typed-array-byte-offset@1.0.4:
+    resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
     engines: {node: '>= 0.4'}
     dependencies:
       available-typed-arrays: 1.0.7
-      call-bind: 1.0.7
-      for-each: 0.3.3
+      call-bind: 1.0.8
+      for-each: 0.3.5
       gopd: 1.2.0
-      has-proto: 1.0.3
-      is-typed-array: 1.1.13
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
+      reflect.getprototypeof: 1.0.10
     dev: true
 
-  /typed-array-length@1.0.6:
-    resolution: {integrity: sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==}
+  /typed-array-length@1.0.7:
+    resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
-      for-each: 0.3.3
+      call-bind: 1.0.8
+      for-each: 0.3.5
       gopd: 1.2.0
-      has-proto: 1.0.3
-      is-typed-array: 1.1.13
-      possible-typed-array-names: 1.0.0
+      is-typed-array: 1.1.15
+      possible-typed-array-names: 1.1.0
+      reflect.getprototypeof: 1.0.10
     dev: true
 
-  /typescript@5.6.3:
-    resolution: {integrity: sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==}
+  /typescript@5.8.3:
+    resolution: {integrity: sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==}
     engines: {node: '>=14.17'}
     hasBin: true
 
@@ -14859,23 +13012,29 @@ packages:
     dev: true
     optional: true
 
-  /unbox-primitive@1.0.2:
-    resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
+  /unbox-primitive@1.1.0:
+    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
+    engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.7
-      has-bigints: 1.0.2
+      call-bound: 1.0.4
+      has-bigints: 1.1.0
       has-symbols: 1.1.0
-      which-boxed-primitive: 1.0.2
+      which-boxed-primitive: 1.1.1
     dev: true
 
   /undici-types@5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
+    dev: false
 
   /undici-types@6.19.8:
     resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
 
-  /undici@6.21.0:
-    resolution: {integrity: sha512-BUgJXc752Kou3oOIuU1i+yZZypyZRqNPW0vqoMPl8VaoalSfeR0D8/t4iAS3yirs79SSMTxTag+ZC86uswv+Cw==}
+  /undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+    dev: false
+
+  /undici@6.21.2:
+    resolution: {integrity: sha512-uROZWze0R0itiAKVPsYhFov9LxrPMHLMEQFszeI2gCN6bnIIZ8twzBCJcN2LJrBBLfrP0t1FW0g+JmKVl8Vk1g==}
     engines: {node: '>=18.17'}
     dev: false
 
@@ -14929,13 +13088,38 @@ packages:
     engines: {node: '>= 0.8'}
     dev: false
 
-  /update-browserslist-db@1.1.1(browserslist@4.24.2):
-    resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==}
+  /unrs-resolver@1.7.2:
+    resolution: {integrity: sha512-BBKpaylOW8KbHsu378Zky/dGh4ckT/4NW/0SHRABdqRLcQJ2dAOjDo9g97p04sWflm0kqPqpUatxReNV/dqI5A==}
+    requiresBuild: true
+    dependencies:
+      napi-postinstall: 0.2.3
+    optionalDependencies:
+      '@unrs/resolver-binding-darwin-arm64': 1.7.2
+      '@unrs/resolver-binding-darwin-x64': 1.7.2
+      '@unrs/resolver-binding-freebsd-x64': 1.7.2
+      '@unrs/resolver-binding-linux-arm-gnueabihf': 1.7.2
+      '@unrs/resolver-binding-linux-arm-musleabihf': 1.7.2
+      '@unrs/resolver-binding-linux-arm64-gnu': 1.7.2
+      '@unrs/resolver-binding-linux-arm64-musl': 1.7.2
+      '@unrs/resolver-binding-linux-ppc64-gnu': 1.7.2
+      '@unrs/resolver-binding-linux-riscv64-gnu': 1.7.2
+      '@unrs/resolver-binding-linux-riscv64-musl': 1.7.2
+      '@unrs/resolver-binding-linux-s390x-gnu': 1.7.2
+      '@unrs/resolver-binding-linux-x64-gnu': 1.7.2
+      '@unrs/resolver-binding-linux-x64-musl': 1.7.2
+      '@unrs/resolver-binding-wasm32-wasi': 1.7.2
+      '@unrs/resolver-binding-win32-arm64-msvc': 1.7.2
+      '@unrs/resolver-binding-win32-ia32-msvc': 1.7.2
+      '@unrs/resolver-binding-win32-x64-msvc': 1.7.2
+    dev: true
+
+  /update-browserslist-db@1.1.3(browserslist@4.24.4):
+    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
     dependencies:
-      browserslist: 4.24.2
+      browserslist: 4.24.4
       escalade: 3.2.0
       picocolors: 1.1.1
 
@@ -14969,35 +13153,6 @@ packages:
       requires-port: 1.0.0
     dev: false
 
-  /use-callback-ref@1.3.2(@types/react@19.1.1)(react@19.1.0):
-    resolution: {integrity: sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@types/react': 19.1.1
-      react: 19.1.0
-      tslib: 2.8.0
-    dev: false
-
-  /use-callback-ref@1.3.2(react@18.3.1):
-    resolution: {integrity: sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      react: 18.3.1
-      tslib: 2.8.0
-    dev: false
-
   /use-callback-ref@1.3.3(@types/react@19.1.1)(react@19.1.0):
     resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
     engines: {node: '>=10'}
@@ -15010,7 +13165,7 @@ packages:
     dependencies:
       '@types/react': 19.1.1
       react: 19.1.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /use-callback-ref@1.3.3(react@18.3.1):
@@ -15024,38 +13179,7 @@ packages:
         optional: true
     dependencies:
       react: 18.3.1
-      tslib: 2.8.0
-    dev: false
-
-  /use-sidecar@1.1.2(@types/react@19.1.1)(react@19.1.0):
-    resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@types/react': 19.1.1
-      detect-node-es: 1.1.0
-      react: 19.1.0
-      tslib: 2.8.0
-    dev: false
-
-  /use-sidecar@1.1.2(react@18.3.1):
-    resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      detect-node-es: 1.1.0
-      react: 18.3.1
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /use-sidecar@1.1.3(@types/react@19.1.1)(react@19.1.0):
@@ -15071,7 +13195,7 @@ packages:
       '@types/react': 19.1.1
       detect-node-es: 1.1.0
       react: 19.1.0
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
   /use-sidecar@1.1.3(react@18.3.1):
@@ -15086,11 +13210,11 @@ packages:
     dependencies:
       detect-node-es: 1.1.0
       react: 18.3.1
-      tslib: 2.8.0
+      tslib: 2.8.1
     dev: false
 
-  /use-sync-external-store@1.4.0(react@19.1.0):
-    resolution: {integrity: sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==}
+  /use-sync-external-store@1.5.0(react@19.1.0):
+    resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
     dependencies:
@@ -15132,7 +13256,7 @@ packages:
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
       react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
     dependencies:
-      '@radix-ui/react-dialog': 1.1.2(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
+      '@radix-ui/react-dialog': 1.1.11(@types/react-dom@19.1.2)(@types/react@19.1.1)(react-dom@19.1.0)(react@19.1.0)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     transitivePeerDependencies:
@@ -15173,20 +13297,20 @@ packages:
       d3-timer: 3.0.1
     dev: false
 
-  /vite-plugin-singlefile@2.1.0(rollup@4.38.0)(vite@6.2.1):
-    resolution: {integrity: sha512-7tJo+UgZABlKpY/nubth/wxJ4+pUGREPnEwNOknxwl2MM0zTvF14KTU4Ln1lc140gjLLV5mjDrvuoquU7OZqCg==}
+  /vite-plugin-singlefile@2.2.0(rollup@4.40.1)(vite@6.3.3):
+    resolution: {integrity: sha512-Ik1wXmJaGzeQtUeIV7JprDUqqy6DlLzXAY27Blei5peE4c9VJF+Kp9xWDJeuX0RJUZmFbIAuw1/RAh06A+Ql7w==}
     engines: {node: '>18.0.0'}
     peerDependencies:
-      rollup: ^4.28.1
+      rollup: ^4.35.0
       vite: ^5.4.11 || ^6.0.0
     dependencies:
       micromatch: 4.0.8
-      rollup: 4.38.0
-      vite: 6.2.1
+      rollup: 4.40.1
+      vite: 6.3.3
     dev: false
 
-  /vite@6.2.1:
-    resolution: {integrity: sha512-n2GnqDb6XPhlt9B8olZPrgMD/es/Nd1RdChF6CBD/fHW6pUyUTt2sQW2fPRX5GiD9XEa6+8A6A4f2vT6pSsE7Q==}
+  /vite@6.3.3:
+    resolution: {integrity: sha512-5nXH+QsELbFKhsEfWLkHrvgRpTdGJzqOZ+utSdmPTvwHmvU6ITTm3xx+mRusihkcI8GeC7lCDyn3kDtiki9scw==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
     peerDependencies:
@@ -15225,9 +13349,12 @@ packages:
       yaml:
         optional: true
     dependencies:
-      esbuild: 0.25.0
+      esbuild: 0.25.3
+      fdir: 6.4.4(picomatch@4.0.2)
+      picomatch: 4.0.2
       postcss: 8.5.3
-      rollup: 4.38.0
+      rollup: 4.40.1
+      tinyglobby: 0.2.13
     optionalDependencies:
       fsevents: 2.3.3
     dev: false
@@ -15256,10 +13383,6 @@ packages:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
     dev: false
 
-  /webidl-conversions@4.0.2:
-    resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
-    dev: false
-
   /whatwg-encoding@3.1.1:
     resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
     engines: {node: '>=18'}
@@ -15283,44 +13406,38 @@ packages:
       webidl-conversions: 3.0.1
     dev: false
 
-  /whatwg-url@7.1.0:
-    resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}
-    dependencies:
-      lodash.sortby: 4.7.0
-      tr46: 1.0.1
-      webidl-conversions: 4.0.2
-    dev: false
-
   /when@3.7.8:
     resolution: {integrity: sha512-5cZ7mecD3eYcMiCH4wtRPA5iFJZ50BJYDfckI5RRpQiktMiYTcn0ccLTZOvcbBume+1304fQztxeNzNS9Gvrnw==}
     dev: false
 
-  /which-boxed-primitive@1.0.2:
-    resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
+  /which-boxed-primitive@1.1.1:
+    resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
+    engines: {node: '>= 0.4'}
     dependencies:
-      is-bigint: 1.0.4
-      is-boolean-object: 1.1.2
-      is-number-object: 1.0.7
-      is-string: 1.0.7
-      is-symbol: 1.0.4
+      is-bigint: 1.1.0
+      is-boolean-object: 1.2.2
+      is-number-object: 1.1.1
+      is-string: 1.1.1
+      is-symbol: 1.1.1
     dev: true
 
-  /which-builtin-type@1.1.4:
-    resolution: {integrity: sha512-bppkmBSsHFmIMSl8BO9TbsyzsvGjVoppt8xUiGzwiu/bhDCGxnpOKCxgqj6GuyHE0mINMDecBFPlOm2hzY084w==}
+  /which-builtin-type@1.2.1:
+    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
     engines: {node: '>= 0.4'}
     dependencies:
-      function.prototype.name: 1.1.6
+      call-bound: 1.0.4
+      function.prototype.name: 1.1.8
       has-tostringtag: 1.0.2
-      is-async-function: 2.0.0
-      is-date-object: 1.0.5
-      is-finalizationregistry: 1.0.2
-      is-generator-function: 1.0.10
-      is-regex: 1.1.4
-      is-weakref: 1.0.2
+      is-async-function: 2.1.1
+      is-date-object: 1.1.0
+      is-finalizationregistry: 1.1.1
+      is-generator-function: 1.1.0
+      is-regex: 1.2.1
+      is-weakref: 1.1.1
       isarray: 2.0.5
-      which-boxed-primitive: 1.0.2
+      which-boxed-primitive: 1.1.1
       which-collection: 1.0.2
-      which-typed-array: 1.1.15
+      which-typed-array: 1.1.19
     dev: true
 
   /which-collection@1.0.2:
@@ -15330,16 +13447,18 @@ packages:
       is-map: 2.0.3
       is-set: 2.0.3
       is-weakmap: 2.0.2
-      is-weakset: 2.0.3
+      is-weakset: 2.0.4
     dev: true
 
-  /which-typed-array@1.1.15:
-    resolution: {integrity: sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==}
+  /which-typed-array@1.1.19:
+    resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
     engines: {node: '>= 0.4'}
     dependencies:
       available-typed-arrays: 1.0.7
-      call-bind: 1.0.7
-      for-each: 0.3.3
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      for-each: 0.3.5
+      get-proto: 1.0.1
       gopd: 1.2.0
       has-tostringtag: 1.0.2
     dev: true
@@ -15408,8 +13527,8 @@ packages:
       signal-exit: 3.0.7
     dev: true
 
-  /ws@8.18.0:
-    resolution: {integrity: sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==}
+  /ws@8.18.1:
+    resolution: {integrity: sha512-RKW2aJZMXeMxVpnZ6bck+RswznaxmzdULiBr6KY7XkTnW8uvt0iT9H5DkHUChXrc+uurzwa0rVI16n/Xzjdz1w==}
     engines: {node: '>=10.0.0'}
     peerDependencies:
       bufferutil: ^4.0.1
@@ -15429,13 +13548,8 @@ packages:
   /yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
-  /yaml@1.10.2:
-    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
-    engines: {node: '>= 6'}
-    dev: false
-
-  /yaml@2.6.0:
-    resolution: {integrity: sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==}
+  /yaml@2.7.1:
+    resolution: {integrity: sha512-10ULxpnOCQXxJvBgxsn9ptjq6uviG/htZKk9veJGhlqn3w/DxQ631zFF+nlQXLwmImeS5amR2dl2U8sg6U9jsQ==}
     engines: {node: '>= 14'}
     hasBin: true
     dev: false
@@ -15449,8 +13563,8 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /zod@3.23.8:
-    resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==}
+  /zod@3.24.3:
+    resolution: {integrity: sha512-HhY1oqzWCQWuUqvBFnsyrtZRhyPeR7SUGv+C4+MsisMuVfSPx8HpwWqH8tRahSlt6M3PiFAcoeFhZAqIXTxoSg==}
     dev: false
 
   /zwitch@2.0.4:

From 15f089f7aafc67452c6a525b9c8b3e3a22b5c431 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Wed, 30 Apr 2025 14:19:54 +0400
Subject: [PATCH 100/143] code migration

---
 .../web/app/studio/[username]/page.client.tsx |   2 +-
 .../[username]/sandbox/[sandboxId]/page.tsx   |  13 +-
 .../sandbox/[sandboxId]/publish/page.tsx      | 367 +++++++++++++
 .../components/forms/component-form.tsx       | 488 ++++++++++++++++++
 .../publish/components/forms/demo-form.tsx    | 457 ++++++++++++++++
 .../features/studio/publish/config/utils.ts   | 108 ++++
 .../studio/publish/hooks/use-hooks.ts         |  58 +++
 .../hooks/use-is-check-slug-available.ts      | 163 ++++++
 .../publish/hooks/use-name-slug-form.ts       |  64 +++
 .../publish/hooks/use-video-dropzone.ts       | 130 +++++
 .../features/studio/publish/pbulish.tsx       |   0
 .../studio/{publish => sandbox}/api.ts        |   0
 .../components/EditorPane.tsx                 |   0
 .../components/FileExplorer.tsx               |   0
 .../components/FileTree.tsx                   |   0
 .../components/PreviewPane.tsx                |   0
 .../components/PublishHeader.tsx              |   9 +-
 .../hooks/useFileSystem.ts                    |   0
 .../{publish => sandbox}/hooks/useSandbox.ts  |   0
 .../studio/{publish => sandbox}/index.ts      |   0
 .../studio/{publish => sandbox}/utils.ts      |   0
 .../utils/dependencies.ts                     |   0
 22 files changed, 1850 insertions(+), 9 deletions(-)
 create mode 100644 apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
 create mode 100644 apps/web/components/features/studio/publish/components/forms/component-form.tsx
 create mode 100644 apps/web/components/features/studio/publish/components/forms/demo-form.tsx
 create mode 100644 apps/web/components/features/studio/publish/config/utils.ts
 create mode 100644 apps/web/components/features/studio/publish/hooks/use-hooks.ts
 create mode 100644 apps/web/components/features/studio/publish/hooks/use-is-check-slug-available.ts
 create mode 100644 apps/web/components/features/studio/publish/hooks/use-name-slug-form.ts
 create mode 100644 apps/web/components/features/studio/publish/hooks/use-video-dropzone.ts
 create mode 100644 apps/web/components/features/studio/publish/pbulish.tsx
 rename apps/web/components/features/studio/{publish => sandbox}/api.ts (100%)
 rename apps/web/components/features/studio/{publish => sandbox}/components/EditorPane.tsx (100%)
 rename apps/web/components/features/studio/{publish => sandbox}/components/FileExplorer.tsx (100%)
 rename apps/web/components/features/studio/{publish => sandbox}/components/FileTree.tsx (100%)
 rename apps/web/components/features/studio/{publish => sandbox}/components/PreviewPane.tsx (100%)
 rename apps/web/components/features/studio/{publish => sandbox}/components/PublishHeader.tsx (95%)
 rename apps/web/components/features/studio/{publish => sandbox}/hooks/useFileSystem.ts (100%)
 rename apps/web/components/features/studio/{publish => sandbox}/hooks/useSandbox.ts (100%)
 rename apps/web/components/features/studio/{publish => sandbox}/index.ts (100%)
 rename apps/web/components/features/studio/{publish => sandbox}/utils.ts (100%)
 rename apps/web/components/features/studio/{publish => sandbox}/utils/dependencies.ts (100%)

diff --git a/apps/web/app/studio/[username]/page.client.tsx b/apps/web/app/studio/[username]/page.client.tsx
index f10bb9f7..d0becce2 100644
--- a/apps/web/app/studio/[username]/page.client.tsx
+++ b/apps/web/app/studio/[username]/page.client.tsx
@@ -8,7 +8,7 @@ import Link from "next/link"
 import { ArrowLeft, PlusCircle, Loader2 } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { useRouter, usePathname } from "next/navigation"
-import { createNewSandbox } from "@/components/features/studio/publish/api"
+import { createNewSandbox } from "@/components/features/studio/sandbox/api"
 import { useState } from "react"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 
diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
index a80afa8b..0f6367b9 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
@@ -1,22 +1,21 @@
 "use client"
 
 import { useEffect, useState, Suspense } from "react"
-import { useParams } from "next/navigation"
+import { useParams, useRouter } from "next/navigation"
 import {
   ResizableHandle,
   ResizablePanelGroup,
   ResizablePanel,
 } from "@/components/ui/resizable"
-import { FileExplorer } from "@/components/features/studio/publish/components/FileExplorer"
-import { PreviewPane } from "@/components/features/studio/publish/components/PreviewPane"
-import { PublishHeader } from "@/components/features/studio/publish/components/PublishHeader"
+import { FileExplorer } from "@/components/features/studio/sandbox/components/FileExplorer"
+import { PreviewPane } from "@/components/features/studio/sandbox/components/PreviewPane"
+import { PublishHeader } from "@/components/features/studio/sandbox/components/PublishHeader"
 import { Loader2Icon } from "lucide-react"
-import { useSandbox } from "@/components/features/studio/publish/hooks/useSandbox"
+import { useSandbox } from "@/components/features/studio/sandbox/hooks/useSandbox"
 import {
   useFileSystem,
   type FileEntry,
-} from "@/components/features/studio/publish/hooks/useFileSystem"
-import { toast } from "sonner"
+} from "@/components/features/studio/sandbox/hooks/useFileSystem"
 
 const DEFAULT_FILE_ENTRY: FileEntry = {
   name: "component.tsx",
diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
new file mode 100644
index 00000000..4d58e5c7
--- /dev/null
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
@@ -0,0 +1,367 @@
+"use client"
+
+import React, { useState, useCallback } from "react"
+import { useTheme } from "next-themes"
+import { useParams } from "next/navigation"
+import { useForm } from "react-hook-form"
+import { Trash2 } from "lucide-react"
+
+import { Form } from "@/components/ui/form"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
+
+import { ComponentForm } from "@/components/features/studio/publish/components/forms/component-form"
+import { DemoDetailsForm } from "@/components/features/studio/publish/components/forms/demo-form"
+// import { EditCodeFileCard } from "@/components/features/publish-old/components/edit-code-file-card"
+
+import { cn } from "@/lib/utils"
+import { useSandbox } from "@/components/features/studio/sandbox/hooks/useSandbox"
+
+// Define types needed for the form
+type FormStep =
+  | "nameSlugForm"
+  | "code"
+  | "demoCode"
+  | "demoDetails"
+  | "detailedForm"
+
+// Basic form data structure
+type FormData = {
+  name: string
+  component_slug: string
+  registry: string
+  description: string
+  license: string
+  is_public: boolean
+  code: string
+  demos: {
+    name: string
+    demo_code: string
+    demo_slug: string
+    tags: any[]
+    preview_image_data_url: string
+    preview_image_file?: File
+    demo_direct_registry_dependencies: string[]
+  }[]
+}
+
+type ParsedCodeData = {
+  componentNames: string[]
+}
+
+const PublishPage = () => {
+  const params = useParams()
+  const sandboxId = params.sandboxId as string
+  const { previewURL } = useSandbox({
+    sandboxId,
+  })
+
+  // Theme state
+  const { resolvedTheme } = useTheme()
+  const isDarkTheme = resolvedTheme === "dark"
+
+  // UI states
+  const [formStep, setFormStep] = useState<FormStep>("detailedForm")
+  const [openAccordion, setOpenAccordion] = useState("component-info")
+  const [currentDemoIndex, setCurrentDemoIndex] = useState(0)
+  const [isEditingFromCard, setIsEditingFromCard] = useState(false)
+  const [isAddingNewDemo, setIsAddingNewDemo] = useState(false)
+  const [previousStep, setPreviousStep] = useState<FormStep>()
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [isSuccessDialogOpen, setIsSuccessDialogOpen] = useState(false)
+
+  // Code parsing state
+  const [parsedCode, setParsedCode] = useState<ParsedCodeData>({
+    componentNames: [],
+  })
+
+  // Initialize form
+  const form = useForm<FormData>({
+    defaultValues: {
+      name: "",
+      component_slug: "",
+      registry: "ui",
+      description: "",
+      license: "mit",
+      is_public: true,
+      code: "",
+      demos: [
+        {
+          name: "",
+          demo_code: "",
+          demo_slug: "default",
+          tags: [],
+          preview_image_data_url: "",
+          preview_image_file: undefined,
+          demo_direct_registry_dependencies: [],
+        },
+      ],
+    },
+  })
+
+  // Get values from form
+  const { component_slug: componentSlug, demos } = form.getValues()
+  const currentDemo = demos?.[currentDemoIndex]
+  const demoCode = currentDemo?.demo_code || ""
+  const mode = "full" // Default mode
+
+  // Handlers
+  const handleStepChange = (newStep: FormStep) => {
+    setPreviousStep(formStep)
+    setFormStep(newStep)
+
+    if (newStep === "detailedForm") {
+      setIsAddingNewDemo(false)
+      setIsEditingFromCard(false)
+    }
+  }
+
+  const handleAccordionChange = useCallback((value: string) => {
+    setOpenAccordion(value || "")
+  }, [])
+
+  const handleAddNewDemo = () => {
+    const demos = form.getValues().demos || []
+    const newDemoIndex = demos.length
+
+    form.setValue("demos", [
+      ...demos,
+      {
+        name: "",
+        demo_slug: `demo-${newDemoIndex + 1}`,
+        demo_code: "",
+        tags: [],
+        preview_image_data_url: "",
+        preview_image_file: undefined,
+        demo_direct_registry_dependencies: [],
+      },
+    ])
+
+    setCurrentDemoIndex(newDemoIndex)
+    setIsAddingNewDemo(true)
+    handleStepChange("demoCode")
+    setOpenAccordion(`demo-${newDemoIndex}`)
+  }
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault()
+    console.log("Form submitted:", form.getValues())
+    setIsSubmitting(true)
+    // Add actual submission logic here
+    setTimeout(() => {
+      setIsSubmitting(false)
+      setIsSuccessDialogOpen(true)
+    }, 1000)
+  }
+
+  // Utility functions
+  const isComponentInfoComplete = useCallback(() => {
+    const { description, license, name, component_slug, registry } =
+      form.getValues()
+    return (
+      !!description && !!license && !!name && !!component_slug && !!registry
+    )
+  }, [form])
+
+  const isDemoComplete = (demoIndex: number) => {
+    const demo = form.getValues().demos[demoIndex]
+    return !!(demo?.name && demo?.demo_code)
+  }
+
+  return (
+    <Form {...form}>
+      {formStep !== "nameSlugForm" && (
+        <div className="flex flex-col h-screen w-full">
+          {(formStep === "demoCode" ||
+            formStep === "demoDetails" ||
+            formStep === "detailedForm") && (
+            <>
+              <div className="flex h-[calc(100vh-3.5rem)]">
+                <div
+                  className={cn(
+                    "border-r pointer-events-auto transition-[width] duration-300 max-h-screen overflow-y-auto",
+                    formStep === "demoCode" ? "w-1/2" : "w-1/3",
+                    formStep === "demoCode" && "!w-1/2",
+                  )}
+                >
+                  {formStep === "detailedForm" && (
+                    <div className="w-full flex flex-col gap-4 overflow-y-auto p-4">
+                      <div className="space-y-4 p-[2px]">
+                        <Accordion
+                          type="single"
+                          value={openAccordion}
+                          onValueChange={handleAccordionChange}
+                          collapsible
+                          className="w-full"
+                        >
+                          <AccordionItem value="component-info">
+                            <AccordionTrigger className="py-2 text-[15px] leading-6 hover:no-underline hover:bg-muted/50 rounded-md data-[state=open]:rounded-b-none transition-all duration-200 ease-in-out -mx-2 px-2">
+                              <div className="flex items-center gap-2">
+                                Component info
+                                <Badge
+                                  variant="outline"
+                                  className={cn(
+                                    "gap-1.5 text-xs font-medium",
+                                    isComponentInfoComplete()
+                                      ? "border-emerald-500/20"
+                                      : "border-amber-500/20",
+                                  )}
+                                >
+                                  <span
+                                    className={cn(
+                                      "size-1.5 rounded-full",
+                                      isComponentInfoComplete()
+                                        ? "bg-emerald-500"
+                                        : "bg-amber-500",
+                                    )}
+                                    aria-hidden="true"
+                                  />
+                                  {isComponentInfoComplete()
+                                    ? "Complete"
+                                    : "Required"}
+                                </Badge>
+                              </div>
+                            </AccordionTrigger>
+                            <AccordionContent className="text-muted-foreground">
+                              <div className="text-foreground">
+                                <ComponentForm
+                                  form={form}
+                                  handleSubmit={handleSubmit}
+                                  isSubmitting={isSubmitting}
+                                  hotkeysEnabled={!isSuccessDialogOpen}
+                                />
+
+                                <div className="space-y-3 mt-6">
+                                  {/* <EditCodeFileCard
+                                    iconSrc={
+                                      isDarkTheme
+                                        ? "/tsx-file-dark.svg"
+                                        : "/tsx-file.svg"
+                                    }
+                                    mainText={`${form.getValues("name") || "Component"} code`}
+                                    subText={
+                                      parsedCode.componentNames.length > 0
+                                        ? `${parsedCode.componentNames.slice(0, 2).join(", ")}${parsedCode.componentNames.length > 2 ? ` +${parsedCode.componentNames.length - 2}` : ""}`
+                                        : "No components detected"
+                                    }
+                                    onEditClick={() => {
+                                      handleStepChange("code")
+                                      setIsEditingFromCard(true)
+                                    }}
+                                  /> */}
+                                  {/* <EditCodeFileCard
+                                    iconSrc={
+                                      isDarkTheme
+                                        ? "/css-file-dark.svg"
+                                        : "/css-file.svg"
+                                    }
+                                    mainText="Custom styles"
+                                    subText="Tailwind config and globals.css"
+                                    onEditClick={() => {
+                                      handleStepChange("code")
+                                      setIsEditingFromCard(true)
+                                    }}
+                                  /> */}
+                                </div>
+                              </div>
+                            </AccordionContent>
+                          </AccordionItem>
+
+                          {demos?.map((demo, index) => (
+                            <AccordionItem
+                              key={index}
+                              value={`demo-${index}`}
+                              className="bg-background border-none group"
+                            >
+                              <AccordionTrigger className="py-2 text-[15px] leading-6 hover:no-underline hover:bg-muted/50 rounded-md data-[state=open]:rounded-b-none transition-all duration-200 ease-in-out -mx-2 px-2">
+                                <div className="flex items-center gap-2 w-full">
+                                  <div className="flex items-center gap-2 flex-1 min-w-0 overflow-hidden">
+                                    <div className="truncate flex-shrink min-w-0">
+                                      {demo.name || `Demo ${index + 1}`}
+                                    </div>
+                                    <Badge
+                                      variant="outline"
+                                      className={cn(
+                                        "gap-1.5 text-xs font-medium shrink-0",
+                                        isDemoComplete(index)
+                                          ? "border-emerald-500/20"
+                                          : "border-amber-500/20",
+                                      )}
+                                    >
+                                      <span
+                                        className={cn(
+                                          "size-1.5 rounded-full",
+                                          isDemoComplete(index)
+                                            ? "bg-emerald-500"
+                                            : "bg-amber-500",
+                                        )}
+                                        aria-hidden="true"
+                                      />
+                                      {isDemoComplete(index)
+                                        ? "Complete"
+                                        : "Required"}
+                                    </Badge>
+                                  </div>
+                                  {demos.length > 1 && (
+                                    <Button
+                                      variant="ghost"
+                                      size="icon"
+                                      className="opacity-0 group-hover:opacity-100 transition-opacity h-8 w-8 ml-auto mr-1 shrink-0"
+                                      onClick={(e) => {
+                                        e.stopPropagation()
+                                        // Handle demo deletion here
+                                        console.log("Delete demo:", index)
+                                      }}
+                                    >
+                                      <Trash2 className="h-4 w-4 text-muted-foreground hover:text-destructive transition-colors" />
+                                    </Button>
+                                  )}
+                                </div>
+                              </AccordionTrigger>
+                              <AccordionContent>
+                                <div className="text-foreground space-y-4">
+                                  <DemoDetailsForm
+                                    form={form}
+                                    demoIndex={index}
+                                    mode={mode}
+                                  />
+                                  {/* <EditCodeFileCard
+                                    iconSrc={
+                                      isDarkTheme
+                                        ? "/demo-file-dark.svg"
+                                        : "/demo-file.svg"
+                                    }
+                                    mainText={`Demo ${index + 1} code`}
+                                    onEditClick={() => {
+                                      handleStepChange("demoCode")
+                                      setIsEditingFromCard(true)
+                                      setCurrentDemoIndex(index)
+                                    }}
+                                  /> */}
+                                </div>
+                              </AccordionContent>
+                            </AccordionItem>
+                          ))}
+                        </Accordion>
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                <iframe src={previewURL || ""} className="w-2/3" />
+              </div>
+            </>
+          )}
+        </div>
+      )}
+    </Form>
+  )
+}
+
+export default PublishPage
diff --git a/apps/web/components/features/studio/publish/components/forms/component-form.tsx b/apps/web/components/features/studio/publish/components/forms/component-form.tsx
new file mode 100644
index 00000000..4f413e2e
--- /dev/null
+++ b/apps/web/components/features/studio/publish/components/forms/component-form.tsx
@@ -0,0 +1,488 @@
+import { useState, useId, ChangeEvent } from "react"
+import { UseFormReturn, useController } from "react-hook-form"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { FormField } from "@/components/ui/form"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { FormData } from "../../config/utils"
+import { licenses } from "@/lib/licenses"
+import { useSubmitFormHotkeys } from "../../hooks/use-hooks"
+import { Input } from "@/components/ui/input"
+import { useUser } from "@clerk/nextjs"
+import { Switch } from "@/components/ui/switch"
+import {
+  makeSlugFromName,
+  useIsCheckSlugAvailable,
+} from "../../hooks/use-is-check-slug-available"
+import { usePrefillAutogeneratedSlug } from "../../hooks/use-name-slug-form"
+import Link from "next/link"
+import { cn } from "@/lib/utils"
+
+export const ComponentForm = ({
+  form,
+  handleSubmit,
+  hotkeysEnabled = true,
+  isSlugReadOnly = true,
+  publishAsUserId,
+  showOptionalFields = true,
+  placeholderName = "",
+  isFirstStep = false,
+}: {
+  form: UseFormReturn<FormData>
+  handleSubmit?: (event: React.FormEvent) => void
+  isSubmitting?: boolean
+  hotkeysEnabled?: boolean
+  isSlugReadOnly?: boolean
+  publishAsUserId?: string
+  showOptionalFields?: boolean
+  placeholderName?: string
+  isEditMode?: boolean
+  isFirstStep?: boolean
+}) => {
+  const { user: currentUser } = useUser()
+  const [isSlugManuallyEdited, setIsSlugManuallyEdited] = useState(false)
+  const slug = form.watch("component_slug")
+  const userId = publishAsUserId ?? currentUser?.id
+
+  const {
+    isAvailable: slugAvailable,
+    isChecking: isSlugChecking,
+    error: slugError,
+  } = useIsCheckSlugAvailable({
+    slug,
+    userId: userId ?? "",
+    type: "component",
+    enabled: !isSlugReadOnly,
+  })
+
+  if (
+    slugAvailable !== undefined &&
+    form.getValues("slug_available") !== slugAvailable
+  ) {
+    form.setValue("slug_available", slugAvailable)
+  }
+
+  usePrefillAutogeneratedSlug({
+    form,
+    isSlugReadOnly,
+    isSlugManuallyEdited,
+    publishAsUserId: userId,
+  })
+
+  if (handleSubmit) {
+    useSubmitFormHotkeys(form, handleSubmit, hotkeysEnabled)
+  }
+
+  const nameId = useId()
+  const slugId = useId()
+  const descriptionId = useId()
+  const registryId = useId()
+  const licenseId = useId()
+  const websiteId = useId()
+  const defaultRows = 2
+
+  const handleTextareaInput = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    const textarea = e.target
+    textarea.style.height = "auto"
+
+    const style = window.getComputedStyle(textarea)
+    const borderHeight =
+      parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth)
+
+    const newHeight = textarea.scrollHeight + borderHeight
+
+    textarea.style.height = `${newHeight}px`
+  }
+
+  const { field: nameField } = useController({
+    name: "name",
+    control: form.control,
+    rules: { required: true },
+  })
+
+  const { field } = useController({
+    name: "website_url",
+    control: form.control,
+    defaultValue: "",
+    rules: {
+      onChange: (e) => {
+        const rawValue = e.target.value
+
+        // Remove any protocols from input
+        const cleanUrl = rawValue
+          .trim()
+          .replace(/^(https?:\/\/)+(www\.)?/, "")
+          .replace(/\/$/, "")
+
+        // Simple URL validation
+        const urlRegex =
+          /^[a-zA-Z0-9][a-zA-Z0-9-]{0,61}[a-zA-Z0-9](\.[a-zA-Z]{2,})+([/?].*)?$/
+        const isValid = urlRegex.test(cleanUrl)
+
+        if (cleanUrl && !isValid) {
+          form.setError("website_url", {
+            type: "manual",
+            message: "Please enter a valid URL",
+          })
+        } else {
+          form.clearErrors("website_url")
+        }
+
+        // Store with https:// in form
+        const formValue = cleanUrl ? `https://${cleanUrl}` : ""
+        return formValue
+      },
+    },
+  })
+  return (
+    <div className="flex flex-col gap-4 w-full">
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor={nameId}>
+            Name <span className="text-destructive">*</span>
+          </Label>
+          <Input
+            id={nameId}
+            ref={nameField.ref}
+            placeholder={`e.g. "${(placeholderName || "Button").replace(/([a-z])([A-Z])/g, "$1 $2")}"`}
+            value={nameField.value}
+            onChange={nameField.onChange}
+            onBlur={nameField.onBlur}
+            className="w-full text-foreground"
+            required
+          />
+          <p
+            className="text-xs text-muted-foreground"
+            role="region"
+            aria-live="polite"
+          >
+            The display name of your component
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor={slugId}>
+            Slug <span className="text-destructive">*</span>
+          </Label>
+          <Input
+            id={slugId}
+            {...form.register("component_slug", { required: true })}
+            className="w-full"
+            placeholder={`e.g. "${makeSlugFromName(placeholderName || "Button")}"`}
+            disabled={
+              isSlugReadOnly || (isSlugChecking && !isSlugManuallyEdited)
+            }
+            onChange={(e) => {
+              setIsSlugManuallyEdited(true)
+              form.setValue("component_slug", e.target.value)
+            }}
+            required
+          />
+          <p
+            className="text-xs text-muted-foreground"
+            role="region"
+            aria-live="polite"
+          >
+            Used in the URL and imports, can't be changed later
+          </p>
+        </div>
+      </div>
+
+      {slugError && (
+        <p className="text-red-500 text-sm mt-2">{slugError.message}</p>
+      )}
+
+      {slug?.length > 0 && !slugError && isSlugManuallyEdited && (
+        <>
+          {isSlugChecking ? (
+            <p className="text-muted-foreground text-sm mt-2">
+              Checking slug availability...
+            </p>
+          ) : slugAvailable === true ? (
+            <p className="text-green-500 text-sm mt-2">
+              This slug is available
+            </p>
+          ) : (
+            <p className="text-red-500 text-sm mt-2">
+              You already have a component with this slug
+            </p>
+          )}
+        </>
+      )}
+
+      {showOptionalFields && (
+        <div className="space-y-6">
+          <div
+            className={cn(
+              "grid gap-4",
+              isFirstStep ? "grid-cols-2" : "grid-cols-1",
+            )}
+          >
+            <div className="space-y-2">
+              <Label htmlFor={descriptionId}>
+                Description <span className="text-destructive">*</span>
+              </Label>
+              <FormField
+                control={form.control}
+                name="description"
+                render={({ field }) => (
+                  <Textarea
+                    id={descriptionId}
+                    placeholder="Add some description to help others discover your component"
+                    className="min-h-[none] resize-none"
+                    rows={defaultRows}
+                    required
+                    {...field}
+                    onChange={(e) => {
+                      field.onChange(e)
+                      handleTextareaInput(e)
+                    }}
+                    ref={(e) => {
+                      if (e) {
+                        const style = window.getComputedStyle(e)
+                        const lineHeight = parseInt(style.lineHeight)
+                        const borderHeight =
+                          parseInt(style.borderTopWidth) +
+                          parseInt(style.borderBottomWidth)
+                        const paddingHeight =
+                          parseInt(style.paddingTop) +
+                          parseInt(style.paddingBottom)
+                        const initialHeight =
+                          lineHeight * defaultRows +
+                          borderHeight +
+                          paddingHeight
+                        e.style.height = `${initialHeight}px`
+                      }
+                    }}
+                  />
+                )}
+              />
+              <p
+                className="text-xs text-muted-foreground"
+                role="region"
+                aria-live="polite"
+              >
+                A brief description of what your component does
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label>
+                  Pricing <span className="text-destructive">*</span>
+                </Label>
+                <Link
+                  href="/settings/payouts"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-xs text-muted-foreground flex gap-2 pb-2"
+                >
+                  View payouts
+                  <svg
+                    className="ml-1 h-3 w-3"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="M7 17L17 7" />
+                    <path d="M7 7h10v10" />
+                  </svg>
+                </Link>
+              </div>
+              <div className="border-input relative flex w-full items-start gap-2 rounded-md border p-3 shadow-xs outline-none has-data-[state=checked]:border-ring">
+                <Switch
+                  id="is-paid"
+                  checked={form.watch("is_paid") || false}
+                  onCheckedChange={(checked) => {
+                    form.setValue("is_paid", checked, { shouldValidate: true })
+                    form.setValue("price", checked ? 5 : 0, {
+                      shouldValidate: true,
+                    })
+                    // Set MPL-2.0 license for paid components, MIT for free
+                    form.setValue("license", checked ? "mpl-2.0" : "mit", {
+                      shouldValidate: true,
+                    })
+                  }}
+                  className="order-1 h-4 w-6 after:absolute after:inset-0 [&_span]:size-3 data-[state=checked]:[&_span]:translate-x-2 data-[state=checked]:[&_span]:rtl:-translate-x-2"
+                />
+                <div className="grid grow gap-[4px]">
+                  <Label htmlFor="is-paid">
+                    Paid Component{" "}
+                    <span className="text-xs font-normal leading-[inherit] text-muted-foreground">
+                      ($0.70 per unlock)
+                    </span>
+                  </Label>
+                  <p className="text-xs text-muted-foreground">
+                    Earn money when others use your component
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div
+            className={cn(
+              "grid gap-4",
+              isFirstStep ? "grid-cols-2" : "grid-cols-1",
+            )}
+          >
+            <div className="space-y-2">
+              <Label htmlFor={registryId}>
+                Component type <span className="text-destructive">*</span>
+              </Label>
+              <FormField
+                control={form.control}
+                name="registry"
+                render={({ field }) => (
+                  <Select
+                    value={field.value}
+                    onValueChange={field.onChange}
+                    required
+                  >
+                    <SelectTrigger
+                      id={registryId}
+                      className="[&_[data-desc]]:hidden"
+                    >
+                      <SelectValue placeholder="Select component type" />
+                    </SelectTrigger>
+                    <SelectContent className="[&_*[role=option]>span]:end-2 [&_*[role=option]>span]:start-auto [&_*[role=option]]:pe-8 [&_*[role=option]]:ps-2">
+                      <SelectItem value="ui">
+                        UI Component
+                        <span
+                          className="mt-1 block text-xs text-muted-foreground"
+                          data-desc
+                        >
+                          Reusable interface elements like buttons, inputs, and
+                          cards
+                        </span>
+                      </SelectItem>
+                      <SelectItem value="hooks">
+                        Hook
+                        <span
+                          className="mt-1 block text-xs text-muted-foreground"
+                          data-desc
+                        >
+                          Custom React hooks for state and logic management
+                        </span>
+                      </SelectItem>
+                      <SelectItem value="blocks">
+                        Block
+                        <span
+                          className="mt-1 block text-xs text-muted-foreground"
+                          data-desc
+                        >
+                          Larger sections like Hero, Features, or Testimonials
+                        </span>
+                      </SelectItem>
+                      <SelectItem value="icons">
+                        Icon
+                        <span
+                          className="mt-1 block text-xs text-muted-foreground"
+                          data-desc
+                        >
+                          Custom icon components and icon sets
+                        </span>
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+              <p
+                className="text-xs text-muted-foreground"
+                role="region"
+                aria-live="polite"
+              >
+                The category your component belongs to
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor={licenseId}>
+                License <span className="text-destructive">*</span>
+              </Label>
+              <FormField
+                control={form.control}
+                name="license"
+                render={({ field }) => (
+                  <Select
+                    value={field.value}
+                    onValueChange={field.onChange}
+                    required
+                    disabled={form.watch("is_paid")}
+                  >
+                    <SelectTrigger id={licenseId}>
+                      <SelectValue placeholder="Select a license" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {Object.entries(licenses).map(([key, license]) => (
+                        <SelectItem key={key} value={license.value}>
+                          {license.label}
+                          {form.watch("is_paid") && license.value === "mpl-2.0"}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+              <p
+                className="text-xs text-muted-foreground"
+                role="region"
+                aria-live="polite"
+              >
+                {form.watch("is_paid")
+                  ? "Paid components must use the Mozilla Public License 2.0"
+                  : "Choose how others can use your component"}
+              </p>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor={websiteId}>Website URL</Label>
+            <div className="relative">
+              <Input
+                type="text"
+                id={websiteId}
+                value={
+                  field.value?.replace(/^(https?:\/\/)+(www\.)?/, "") || ""
+                }
+                onChange={(e) => field.onChange(e)}
+                placeholder="your-website.com"
+                className="w-full peer ps-16"
+              />
+              <span className="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm text-muted-foreground peer-disabled:opacity-50">
+                https://
+              </span>
+            </div>
+            {form.formState.errors.website_url ? (
+              <p
+                className="text-xs text-destructive"
+                role="region"
+                aria-live="polite"
+              >
+                {form.formState.errors.website_url.message}
+              </p>
+            ) : (
+              <p
+                className="text-xs text-muted-foreground"
+                role="region"
+                aria-live="polite"
+              >
+                Link to your component's documentation or demo
+              </p>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/apps/web/components/features/studio/publish/components/forms/demo-form.tsx b/apps/web/components/features/studio/publish/components/forms/demo-form.tsx
new file mode 100644
index 00000000..0c4b19f2
--- /dev/null
+++ b/apps/web/components/features/studio/publish/components/forms/demo-form.tsx
@@ -0,0 +1,457 @@
+/* eslint-disable @next/next/no-img-element */
+import React, { useId } from "react"
+import { UseFormReturn } from "react-hook-form"
+import { Label } from "@/components/ui/label"
+import { FormData } from "../../config/utils"
+import { useVideoDropzone } from "../../hooks/use-video-dropzone"
+import { useDropzone } from "react-dropzone"
+import { Button } from "@/components/ui/button"
+import UploadIcon from "@/components/icons/upload"
+import { cn } from "@/lib/utils"
+import { useTheme } from "next-themes"
+import { useAvailableTags } from "@/lib/queries"
+import MultipleSelector, { Option } from "@/components/ui/multiselect"
+import { Input } from "@/components/ui/input"
+import { FormField } from "@/components/ui/form"
+import { makeSlugFromName } from "../../hooks/use-is-check-slug-available"
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from "@/components/ui/collapsible"
+import { Textarea } from "@/components/ui/textarea"
+
+export const DemoDetailsForm = ({
+  form,
+  demoIndex,
+  mode,
+}: {
+  form: UseFormReturn<FormData>
+  demoIndex: number
+  mode?: string
+}) => {
+  const { resolvedTheme } = useTheme()
+  const isDarkTheme = resolvedTheme === "dark"
+  const previewImageDataUrl = form.watch(
+    `demos.${demoIndex}.preview_image_data_url`,
+  )
+
+  const { data: availableTags = [] } = useAvailableTags()
+  const tagsId = useId()
+  const previewImageId = useId()
+  const previewVideoId = useId()
+  const demoNameId = useId()
+
+  React.useEffect(() => {
+    if (
+      mode === "full" &&
+      demoIndex === 0 &&
+      !form.getValues(`demos.${demoIndex}.demo_slug`)
+    ) {
+      form.setValue(`demos.${demoIndex}.demo_slug`, "default")
+      if (!form.getValues("component_slug")) {
+        const currentName = form.getValues(`demos.${demoIndex}.name`)
+        if (!currentName) {
+          handleDemoNameChange("Default")
+        }
+      }
+    }
+  }, [demoIndex, form, mode])
+
+  // Convert tags to MultipleSelector options format
+  const tagOptions: Option[] = availableTags.map((tag) => ({
+    value: tag.slug,
+    label: tag.name,
+  }))
+
+  const {
+    previewVideoDataUrl,
+    isProcessingVideo,
+    isVideoDragActive,
+    getVideoRootProps,
+    getVideoInputProps,
+    removeVideo,
+    openFileDialog,
+  } = useVideoDropzone({ form, demoIndex })
+
+  const handleFileChange = (event: { target: { files: File[] } }) => {
+    const file = event.target.files[0]
+
+    if (file) {
+      if (file.size > 5 * 1024 * 1024) {
+        alert("File is too large. Maximum size is 5 MB.")
+        return
+      }
+
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        const dataUrl = e.target?.result as string
+
+        form.setValue(`demos.${demoIndex}.preview_image_data_url`, dataUrl)
+      }
+
+      form.setValue(`demos.${demoIndex}.preview_image_file`, file)
+
+      reader.readAsDataURL(file)
+    }
+  }
+
+  const {
+    getRootProps: getImageRootProps,
+    getInputProps: getImageInputProps,
+    isDragActive: isImageDragActive,
+  } = useDropzone({
+    onDrop: (acceptedFiles: File[]) => {
+      if (acceptedFiles.length > 0) {
+        handleFileChange({ target: { files: acceptedFiles } })
+      }
+    },
+    accept: {
+      "image/jpeg": [],
+      "image/png": [],
+    },
+    multiple: false,
+  })
+
+  const handleDemoNameChange = (name: string) => {
+    const currentDemoSlug = form.getValues(`demos.${demoIndex}.demo_slug`)
+    const shouldKeepCurrentSlug =
+      mode === "full" && demoIndex === 0 && currentDemoSlug === "default"
+    const demoSlug = shouldKeepCurrentSlug ? "default" : makeSlugFromName(name)
+
+    form.setValue(`demos.${demoIndex}.name`, name)
+    form.setValue(`demos.${demoIndex}.demo_slug`, demoSlug)
+  }
+
+  return (
+    <div className="flex flex-col gap-4 w-full">
+      <div className="space-y-6">
+        <div className="space-y-2">
+          <Label htmlFor={demoNameId}>
+            Demo Name <span className="text-destructive">*</span>
+          </Label>
+          <FormField
+            control={form.control}
+            name={`demos.${demoIndex}.name`}
+            render={({ field }) => (
+              <Input
+                id={demoNameId}
+                placeholder="Enter demo name"
+                {...field}
+                onChange={(e) => {
+                  handleDemoNameChange(e.target.value)
+                }}
+              />
+            )}
+          />
+          <p
+            className="text-xs text-muted-foreground"
+            role="region"
+            aria-live="polite"
+          >
+            A name that describes this demo implementation
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor={tagsId}>
+            Tags <span className="text-destructive">*</span>
+          </Label>
+          <div>
+            <MultipleSelector
+              value={form.watch(`demos.${demoIndex}.tags`)?.map((tag) => ({
+                value: tag.slug,
+                label: tag.name,
+              }))}
+              onChange={(options) => {
+                form.setValue(
+                  `demos.${demoIndex}.tags`,
+                  options.map((option) => ({
+                    name: option.label,
+                    slug: option.value,
+                  })),
+                )
+              }}
+              defaultOptions={tagOptions}
+              options={tagOptions}
+              placeholder="Search tags..."
+              creatable={true}
+              emptyIndicator={
+                <p className="text-center text-sm">No tags found</p>
+              }
+              onSearchSync={(search) => {
+                if (!search) return tagOptions
+                return tagOptions.filter(
+                  (option) =>
+                    option.label.toLowerCase().includes(search.toLowerCase()) ||
+                    option.value.toLowerCase().includes(search.toLowerCase()),
+                )
+              }}
+            />
+          </div>
+          <p
+            className="text-xs text-muted-foreground"
+            role="region"
+            aria-live="polite"
+          >
+            Add tags to help others discover your component
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor={previewImageId}>
+            Cover Image <span className="text-destructive">*</span>
+          </Label>
+          {!previewImageDataUrl ? (
+            <div
+              {...getImageRootProps()}
+              className={`flex flex-col !justify-between w-full border border-dashed bg-background rounded-md p-8 text-center cursor-pointer hover:border-gray-400 transition-colors relative`}
+            >
+              <input {...getImageInputProps()} id={previewImageId} />
+              <UploadIcon />
+              <p className="mt-2 text-xs font-medium">
+                Click to upload&nbsp;
+                <span className="text-muted-foreground font-normal">
+                  or drag and drop
+                </span>
+              </p>
+              <p className="mt-1 text-xs text-muted-foreground">
+                PNG, JPEG (max. 5MB)
+              </p>
+              {isImageDragActive && (
+                <div className="absolute inset-0 bg-background bg-opacity-90 flex items-center justify-center rounded-md">
+                  <p className="text-xs text-muted-foreground">
+                    Drop image here
+                  </p>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div
+              {...getImageRootProps()}
+              className={`w-full border ${
+                isDarkTheme ? "border-gray-600" : "border-gray-300"
+              } rounded-md p-2 flex items-center gap-2 relative`}
+            >
+              <input {...getImageInputProps()} id={previewImageId} />
+              <div className="w-40 h-32 relative">
+                <img
+                  src={previewImageDataUrl}
+                  alt="Preview"
+                  style={{
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover",
+                  }}
+                  className="rounded-sm border shadow-sm"
+                />
+              </div>
+              <div className="flex flex-col items-start">
+                <div className="flex flex-col gap-2">
+                  <Button
+                    variant="outline"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      const input = document.createElement("input")
+                      input.type = "file"
+                      input.accept = "image/jpeg, image/png"
+                      input.onchange = (e) => {
+                        const file = (e.target as HTMLInputElement).files?.[0]
+                        if (file) {
+                          handleFileChange({
+                            target: { files: [file] },
+                          })
+                        }
+                      }
+                      input.click()
+                    }}
+                  >
+                    Change cover
+                  </Button>
+                  <div className="h-px bg-border w-full" />
+                  <span className="text-sm text-muted-foreground self-center">
+                    or drop it here
+                  </span>
+                </div>
+              </div>
+              {isImageDragActive && (
+                <div className="absolute inset-0 bg-background bg-opacity-90 flex items-center justify-center">
+                  <p className="text-xs text-muted-foreground">
+                    Drop new image here
+                  </p>
+                </div>
+              )}
+            </div>
+          )}
+          <p
+            className="text-xs text-muted-foreground"
+            role="region"
+            aria-live="polite"
+          >
+            A preview image that represents your component (1200x900
+            recommended)
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label htmlFor={previewVideoId}>Video Preview</Label>
+            <span className="text-xs text-muted-foreground">Optional</span>
+          </div>
+          {!previewVideoDataUrl ? (
+            <div
+              {...getVideoRootProps()}
+              className={`flex flex-col !justify-between w-full border border-dashed bg-background rounded-md p-8 text-center cursor-pointer hover:border-gray-400 transition-colors relative`}
+            >
+              <input {...getVideoInputProps()} id={previewVideoId} />
+              <UploadIcon />
+              <p className="mt-2 text-xs font-medium">
+                Click to upload&nbsp;
+                <span className="text-muted-foreground font-normal">
+                  or drag and drop
+                </span>
+              </p>
+              <p className="mt-1 text-xs text-muted-foreground">
+                MOV, MP4 (max. 50MB)
+              </p>
+              {isProcessingVideo && (
+                <div className="absolute inset-0 bg-background bg-opacity-90 flex items-center justify-center rounded-md">
+                  <p className="text-xs text-muted-foreground">
+                    Processing video...
+                  </p>
+                </div>
+              )}
+              {isVideoDragActive && (
+                <div className="absolute inset-0 bg-background bg-opacity-90 flex items-center justify-center rounded-md">
+                  <p className="text-xs text-muted-foreground">
+                    Drop video here
+                  </p>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div
+              className={cn(
+                "w-full border rounded-md p-2 flex items-center gap-2 relative",
+                isDarkTheme ? "border-gray-600" : "border-gray-300",
+              )}
+            >
+              <div className="w-40 h-32 relative">
+                <video
+                  src={previewVideoDataUrl || ""}
+                  controls
+                  style={{
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover",
+                  }}
+                  className="rounded-sm border shadow-sm"
+                />
+              </div>
+              <div className="flex flex-col items-start">
+                <div className="flex flex-col gap-2">
+                  <Button variant="outline" onClick={openFileDialog}>
+                    Change video
+                  </Button>
+                  <Button variant="outline" onClick={removeVideo}>
+                    Remove video
+                  </Button>
+                </div>
+              </div>
+            </div>
+          )}
+          <p
+            className="text-xs text-muted-foreground"
+            role="region"
+            aria-live="polite"
+          >
+            A short video demonstrating animation or interaction with your
+            component
+          </p>
+        </div>
+
+        <Collapsible>
+          <CollapsibleTrigger asChild>
+            <Button
+              variant="ghost"
+              className="text-muted-foreground hover:text-foreground"
+            >
+              Advanced
+            </Button>
+          </CollapsibleTrigger>
+          <CollapsibleContent className="space-y-4 mt-4">
+            <div className="space-y-2">
+              <Label>Demo Slug</Label>
+              <FormField
+                control={form.control}
+                name={`demos.${demoIndex}.demo_slug`}
+                render={({ field }) => (
+                  <Input placeholder="demo-slug" {...field} />
+                )}
+              />
+              <p className="text-xs text-muted-foreground">
+                URL-friendly identifier for this demo
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <Label>Registry Dependencies</Label>
+              <FormField
+                control={form.control}
+                name={`demos.${demoIndex}.demo_direct_registry_dependencies`}
+                render={({ field }) => (
+                  <Textarea
+                    placeholder='["username/component-slug"]'
+                    className="font-mono text-sm"
+                    value={JSON.stringify(field.value || [], null, 2)}
+                    onChange={(e) => {
+                      try {
+                        const value = JSON.parse(e.target.value)
+                        if (Array.isArray(value)) {
+                          field.onChange(value)
+                        }
+                      } catch (e) {
+                        // Invalid JSON, ignore
+                      }
+                    }}
+                  />
+                )}
+              />
+              <p className="text-xs text-muted-foreground">
+                Direct dependencies from the registry
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <Label>NPM Dependencies</Label>
+              <FormField
+                control={form.control}
+                name={`demos.${demoIndex}.demo_dependencies`}
+                render={({ field }) => (
+                  <Textarea
+                    placeholder='{"package": "^1.0.0"}'
+                    className="font-mono text-sm"
+                    value={JSON.stringify(field.value || {}, null, 2)}
+                    onChange={(e) => {
+                      try {
+                        const value = JSON.parse(e.target.value)
+                        if (typeof value === "object" && value !== null) {
+                          field.onChange(value)
+                        }
+                      } catch (e) {
+                        // Invalid JSON, ignore
+                      }
+                    }}
+                  />
+                )}
+              />
+              <p className="text-xs text-muted-foreground">
+                NPM package dependencies
+              </p>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/components/features/studio/publish/config/utils.ts b/apps/web/components/features/studio/publish/config/utils.ts
new file mode 100644
index 00000000..29be5d92
--- /dev/null
+++ b/apps/web/components/features/studio/publish/config/utils.ts
@@ -0,0 +1,108 @@
+import { UseFormReturn } from "react-hook-form"
+import { z } from "zod"
+
+const demoSchema = z.object({
+  name: z.string().min(2, {
+    message: "Demo name must be at least 2 characters.",
+  }),
+  demo_code: z.string().min(1, {
+    message: "Demo code is required.",
+  }),
+  demo_slug: z.string().min(1, {
+    message: "Demo slug is required.",
+  }),
+  preview_image_data_url: z.string({
+    required_error: "Preview image is required.",
+  }),
+  preview_image_file: z.instanceof(File, {
+    message: "Preview image file is required.",
+  }),
+  preview_video_data_url: z.string().optional(),
+  preview_video_file: z.instanceof(File).optional(),
+  tags: z
+    .array(
+      z.object({
+        id: z.number().optional(),
+        name: z.string(),
+        slug: z.string(),
+      }),
+    )
+    .min(1, {
+      message: "At least one tag is required.",
+    }),
+  demo_direct_registry_dependencies: z.array(z.string()).default([]),
+  demo_dependencies: z.record(z.string()).default({}),
+  tailwind_config: z.string().optional(),
+  global_css: z.string().optional(),
+})
+
+export const formSchema = z.object({
+  name: z.string().min(2, {
+    message: "Name must be at least 2 characters.",
+  }),
+  component_slug: z.string().min(2, {
+    message: "Slug must be at least 2 characters.",
+  }),
+  code: z.string().min(1, {
+    message: "Component code is required.",
+  }),
+  demos: z.array(demoSchema).default([]),
+  description: z.string().optional(),
+  license: z.string(),
+  website_url: z.string().optional(),
+  is_public: z.boolean(),
+  unknown_dependencies: z.array(z.string()).default([]),
+  unknown_dependencies_with_metadata: z
+    .array(
+      z.object({
+        slugWithUsername: z.string(),
+        registry: z.string(),
+        isDemoDependency: z.boolean(),
+      }),
+    )
+    .default([]),
+  direct_registry_dependencies: z.array(z.string()).default([]),
+  registry: z.string(),
+  publish_as_username: z.string().optional(),
+  slug_available: z.boolean().optional(),
+  tailwind_config: z.string().optional(),
+  globals_css: z.string().optional(),
+  is_paid: z.boolean().default(false),
+  price: z.number().default(0),
+})
+
+export type FormData = z.infer<typeof formSchema>
+
+export type DemoFormData = z.infer<typeof demoSchema>
+
+export interface TagOption {
+  value: number
+  label: string
+  __isNew__?: boolean
+}
+
+export const formatComponentName = (name: string): string => {
+  return name.replace(/([A-Z])/g, " $1").trim()
+}
+
+export const isFormValid = (form: UseFormReturn<FormData>): boolean => {
+  const {
+    name,
+    component_slug,
+    code,
+    demos,
+    registry,
+    license,
+    unknown_dependencies,
+  } = form.getValues()
+
+  return Boolean(
+    name?.length >= 2 &&
+      component_slug?.length >= 2 &&
+      code?.length > 0 &&
+      demos?.length > 0 &&
+      registry &&
+      license &&
+      unknown_dependencies?.length === 0,
+  )
+}
diff --git a/apps/web/components/features/studio/publish/hooks/use-hooks.ts b/apps/web/components/features/studio/publish/hooks/use-hooks.ts
new file mode 100644
index 00000000..5eb8d99c
--- /dev/null
+++ b/apps/web/components/features/studio/publish/hooks/use-hooks.ts
@@ -0,0 +1,58 @@
+import { useEffect } from "react"
+import { UseFormReturn } from "react-hook-form"
+import { FormData, isFormValid } from "../config/utils"
+
+export const useSubmitFormHotkeys = (
+  form: UseFormReturn<FormData>,
+  // eslint-disable-next-line no-unused-vars
+  handleSubmit: (event: React.FormEvent) => void,
+  enabled: boolean,
+) => {
+  useEffect(() => {
+    const keyDownHandler = (e: KeyboardEvent) => {
+      const isFormComplete = isFormValid(form)
+      if (isFormComplete && enabled) {
+        if (e.code === "Enter" && (e.metaKey || e.ctrlKey)) {
+          e.preventDefault()
+          handleSubmit(e as unknown as React.FormEvent)
+        }
+      }
+    }
+
+    if (enabled) {
+      window.addEventListener("keydown", keyDownHandler)
+    }
+
+    return () => {
+      window.removeEventListener("keydown", keyDownHandler)
+    }
+  }, [form, handleSubmit, enabled])
+}
+
+export const useSuccessDialogHotkeys = ({
+  isOpen,
+  onAddAnother,
+  onGoToComponent,
+}: {
+  isOpen: boolean
+  onAddAnother: () => void
+  onGoToComponent: () => void
+}) => {
+  useEffect(() => {
+    const keyDownHandler = (e: KeyboardEvent) => {
+      if (isOpen && e.code === "KeyN") {
+        e.preventDefault()
+        onAddAnother()
+      }
+      if (isOpen && e.code === "Enter" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        onGoToComponent()
+      }
+    }
+
+    window.addEventListener("keydown", keyDownHandler)
+    return () => {
+      window.removeEventListener("keydown", keyDownHandler)
+    }
+  }, [isOpen, onAddAnother, onGoToComponent])
+}
diff --git a/apps/web/components/features/studio/publish/hooks/use-is-check-slug-available.ts b/apps/web/components/features/studio/publish/hooks/use-is-check-slug-available.ts
new file mode 100644
index 00000000..ee2f9894
--- /dev/null
+++ b/apps/web/components/features/studio/publish/hooks/use-is-check-slug-available.ts
@@ -0,0 +1,163 @@
+import { useQuery } from "@tanstack/react-query"
+import { useClerkSupabaseClient } from "@/lib/clerk"
+import { SupabaseClient } from "@supabase/supabase-js"
+
+export const makeSlugFromName = (name: string): string => {
+  return name
+    .replace(/([a-z])([A-Z])/g, "$1-$2")
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .replace(/-+/g, "-")
+}
+
+const isValidSlug = (slug: string): boolean => {
+  const slugRegex = /^[a-z0-9]+(?:-[a-z0-9]+)*$/
+  return slugRegex.test(slug)
+}
+
+type SlugType = "component" | "demo"
+
+const checkSlugUnique = async (
+  supabase: SupabaseClient,
+  slug: string,
+  type: SlugType,
+  userId: string,
+  componentId?: number,
+): Promise<boolean> => {
+  if (type === "component") {
+    const { data, error } = await supabase
+      .from("components")
+      .select("id")
+      .eq("component_slug", slug)
+      .eq("user_id", userId)
+
+    if (error) {
+      console.error("Error checking component slug uniqueness:", error)
+      return false
+    }
+
+    return data?.length === 0
+  } else {
+    const { data, error } = await supabase
+      .from("demos")
+      .select("id")
+      .eq("demo_slug", slug)
+      .eq("component_id", componentId)
+
+    if (error) {
+      console.error("Error checking demo slug uniqueness:", error)
+      return false
+    }
+
+    return data?.length === 0
+  }
+}
+
+export const generateUniqueSlug = async (
+  supabase: SupabaseClient,
+  baseName: string,
+  type: SlugType,
+  userId: string,
+  componentId?: number,
+) => {
+  let newSlug = makeSlugFromName(baseName)
+  let isUnique = await checkSlugUnique(
+    supabase,
+    newSlug,
+    type,
+    userId,
+    componentId,
+  )
+  let suffix = 1
+
+  while (!isUnique) {
+    newSlug = `${makeSlugFromName(baseName)}-${suffix}`
+    isUnique = await checkSlugUnique(
+      supabase,
+      newSlug,
+      type,
+      userId,
+      componentId,
+    )
+    suffix += 1
+  }
+
+  return newSlug
+}
+
+export const generateDemoSlug = async (
+  supabase: SupabaseClient,
+  name: string,
+  componentId: number | null,
+  userId: string,
+): Promise<string> => {
+  // For new components, just generate a slug from name
+  if (componentId === null) {
+    return makeSlugFromName(name) || "default"
+  }
+
+  const { data: existingDemos, error: demosError } = await supabase
+    .from("demos")
+    .select("id, demo_slug, component_id")
+    .eq("component_id", componentId)
+
+  if (demosError) {
+    throw demosError
+  }
+
+  let baseSlug = makeSlugFromName(name) || "demo"
+  let finalSlug = baseSlug
+  let counter = 1
+
+  // Keep trying new slugs until we find a unique one
+  while (existingDemos?.some((demo) => demo.demo_slug === finalSlug)) {
+    finalSlug = `${baseSlug}-${counter}`
+    counter++
+  }
+
+  return finalSlug
+}
+
+export const useIsCheckSlugAvailable = ({
+  slug,
+  type,
+  userId,
+  componentId,
+  enabled = true,
+}: {
+  slug: string
+  type: SlugType
+  userId: string
+  componentId?: number
+  enabled?: boolean
+}) => {
+  const client = useClerkSupabaseClient()
+
+  const {
+    data: isAvailable,
+    isFetching: isChecking,
+    error: error,
+  } = useQuery({
+    queryKey: ["slugCheck", slug, type, userId, componentId],
+    queryFn: async () => {
+      if (!isValidSlug(slug)) {
+        throw new Error(
+          "Slug should contain only lowercase letters, numbers and dashes. It should end with a letter or a number",
+        )
+      }
+      return await checkSlugUnique(client, slug, type, userId, componentId)
+    },
+    enabled:
+      !!slug &&
+      !!userId &&
+      (type === "demo" ? !!componentId : true) &&
+      !!enabled,
+  })
+
+  return {
+    isAvailable,
+    isChecking,
+    error,
+  }
+}
diff --git a/apps/web/components/features/studio/publish/hooks/use-name-slug-form.ts b/apps/web/components/features/studio/publish/hooks/use-name-slug-form.ts
new file mode 100644
index 00000000..ad3e694d
--- /dev/null
+++ b/apps/web/components/features/studio/publish/hooks/use-name-slug-form.ts
@@ -0,0 +1,64 @@
+import { useEffect } from "react"
+import { UseFormReturn } from "react-hook-form"
+import { debounce } from "lodash"
+import { FormData } from "../config/utils"
+import { useClerkSupabaseClient } from "@/lib/clerk"
+import { useUser } from "@clerk/nextjs"
+import { useQuery } from "@tanstack/react-query"
+import { generateUniqueSlug } from "./use-is-check-slug-available"
+
+export const useAutoFocusNameInput = (
+  nameInputRef: React.RefObject<HTMLInputElement>,
+) => {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (nameInputRef.current) {
+        nameInputRef.current.focus()
+      }
+    }, 100)
+    return () => clearTimeout(timer)
+  }, [])
+}
+
+const debouncedPrefillSlug = debounce((prefillSlug: () => void) => {
+  prefillSlug()
+}, 200)
+
+export const usePrefillAutogeneratedSlug = ({
+  form,
+  isSlugReadOnly,
+  isSlugManuallyEdited,
+  publishAsUserId,
+}: {
+  form: UseFormReturn<FormData>
+  isSlugReadOnly: boolean
+  isSlugManuallyEdited: boolean
+  publishAsUserId?: string | null
+}) => {
+  const client = useClerkSupabaseClient()
+  const { user: currentUser } = useUser()
+  const userId = publishAsUserId ?? currentUser?.id
+  const name = form.watch("name")
+
+  const { data: generatedSlug } = useQuery({
+    queryKey: ["generateUniqueSlug", name, userId],
+    queryFn: async () => {
+      if (name && !isSlugManuallyEdited && !isSlugReadOnly) {
+        return await generateUniqueSlug(client, name, "component", userId ?? "")
+      }
+      return null
+    },
+    enabled: !!name && !isSlugManuallyEdited && !isSlugReadOnly,
+  })
+
+  useEffect(() => {
+    if (isSlugReadOnly) return
+
+    debouncedPrefillSlug(() => {
+      if (generatedSlug) {
+        form.setValue("component_slug", generatedSlug)
+      }
+    })
+    return () => debouncedPrefillSlug.cancel()
+  }, [generatedSlug, isSlugReadOnly])
+}
diff --git a/apps/web/components/features/studio/publish/hooks/use-video-dropzone.ts b/apps/web/components/features/studio/publish/hooks/use-video-dropzone.ts
new file mode 100644
index 00000000..eeacf754
--- /dev/null
+++ b/apps/web/components/features/studio/publish/hooks/use-video-dropzone.ts
@@ -0,0 +1,130 @@
+import { useState } from "react"
+import { useDropzone } from "react-dropzone"
+import { UseFormReturn } from "react-hook-form"
+import type { FormData } from "../config/utils"
+
+async function convertVideoToMP4(file: File): Promise<File> {
+  const videoFormData = new FormData()
+  videoFormData.append("video", file)
+
+  const response = await fetch(
+    `${process.env.NEXT_PUBLIC_BACKEND_URL}/convert`,
+    {
+      method: "POST",
+      body: videoFormData,
+    },
+  )
+
+  if (!response.ok) {
+    const error = await response.json()
+    throw new Error(error.message || "Failed to process video")
+  }
+
+  const processedVideoBlob = await response.blob()
+  return new File(
+    [processedVideoBlob],
+    file.name.replace(/\.[^/.]+$/, ".mp4"),
+    {
+      type: "video/mp4",
+    },
+  )
+}
+
+export function useVideoDropzone({
+  form,
+  demoIndex,
+}: {
+  form: UseFormReturn<FormData>
+  demoIndex: number
+}) {
+  const [isProcessingVideo, setIsProcessingVideo] = useState(false)
+  const previewVideoDataUrl = form.watch(
+    `demos.${demoIndex}.preview_video_data_url`,
+  )
+
+  const handleVideoChange = async (file: File) => {
+    if (file.size > 50 * 1024 * 1024) {
+      alert("File is too large. Maximum size is 50 MB.")
+      return
+    }
+
+    try {
+      setIsProcessingVideo(true)
+      const previewUrl = URL.createObjectURL(file)
+
+      console.log("🎥 Before setting video file:", {
+        file,
+        previewUrl,
+      })
+
+      form.setValue(`demos.${demoIndex}.preview_video_data_url`, previewUrl)
+      form.setValue(`demos.${demoIndex}.preview_video_file`, file)
+
+      const processedFile = await convertVideoToMP4(file)
+      console.log("🎥 After processing video:", {
+        processedFile,
+        size: processedFile.size,
+        type: processedFile.type,
+      })
+
+      form.setValue(`demos.${demoIndex}.preview_video_file`, processedFile)
+    } catch (error) {
+      console.error("Error processing video:", error)
+      alert("Error processing video. Please try again.")
+      form.setValue(`demos.${demoIndex}.preview_video_data_url`, undefined)
+      form.setValue(`demos.${demoIndex}.preview_video_file`, undefined)
+    } finally {
+      setIsProcessingVideo(false)
+    }
+  }
+
+  const removeVideo = () => {
+    const videoUrl = form.getValues(`demos.${demoIndex}.preview_video_data_url`)
+    if (videoUrl) {
+      URL.revokeObjectURL(videoUrl)
+    }
+    form.setValue(`demos.${demoIndex}.preview_video_data_url`, undefined)
+    form.setValue(`demos.${demoIndex}.preview_video_file`, undefined)
+  }
+
+  const {
+    getRootProps: getVideoRootProps,
+    getInputProps: getVideoInputProps,
+    isDragActive: isVideoDragActive,
+  } = useDropzone({
+    onDrop: (acceptedFiles: File[]) => {
+      if (acceptedFiles.length > 0) {
+        handleVideoChange(acceptedFiles[0] as File)
+      }
+    },
+    accept: {
+      "video/quicktime": [],
+      "video/mp4": [],
+    },
+    multiple: false,
+  })
+
+  const openFileDialog = () => {
+    const input = document.createElement("input")
+    input.type = "file"
+    input.accept = "video/quicktime,video/mp4"
+    input.onchange = (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0]
+      if (file) {
+        handleVideoChange(file)
+      }
+    }
+    input.click()
+  }
+
+  return {
+    previewVideoDataUrl,
+    isProcessingVideo,
+    isVideoDragActive,
+    getVideoRootProps,
+    getVideoInputProps,
+    handleVideoChange,
+    removeVideo,
+    openFileDialog,
+  }
+}
diff --git a/apps/web/components/features/studio/publish/pbulish.tsx b/apps/web/components/features/studio/publish/pbulish.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/apps/web/components/features/studio/publish/api.ts b/apps/web/components/features/studio/sandbox/api.ts
similarity index 100%
rename from apps/web/components/features/studio/publish/api.ts
rename to apps/web/components/features/studio/sandbox/api.ts
diff --git a/apps/web/components/features/studio/publish/components/EditorPane.tsx b/apps/web/components/features/studio/sandbox/components/EditorPane.tsx
similarity index 100%
rename from apps/web/components/features/studio/publish/components/EditorPane.tsx
rename to apps/web/components/features/studio/sandbox/components/EditorPane.tsx
diff --git a/apps/web/components/features/studio/publish/components/FileExplorer.tsx b/apps/web/components/features/studio/sandbox/components/FileExplorer.tsx
similarity index 100%
rename from apps/web/components/features/studio/publish/components/FileExplorer.tsx
rename to apps/web/components/features/studio/sandbox/components/FileExplorer.tsx
diff --git a/apps/web/components/features/studio/publish/components/FileTree.tsx b/apps/web/components/features/studio/sandbox/components/FileTree.tsx
similarity index 100%
rename from apps/web/components/features/studio/publish/components/FileTree.tsx
rename to apps/web/components/features/studio/sandbox/components/FileTree.tsx
diff --git a/apps/web/components/features/studio/publish/components/PreviewPane.tsx b/apps/web/components/features/studio/sandbox/components/PreviewPane.tsx
similarity index 100%
rename from apps/web/components/features/studio/publish/components/PreviewPane.tsx
rename to apps/web/components/features/studio/sandbox/components/PreviewPane.tsx
diff --git a/apps/web/components/features/studio/publish/components/PublishHeader.tsx b/apps/web/components/features/studio/sandbox/components/PublishHeader.tsx
similarity index 95%
rename from apps/web/components/features/studio/publish/components/PublishHeader.tsx
rename to apps/web/components/features/studio/sandbox/components/PublishHeader.tsx
index a61f1e0b..13e2c67a 100644
--- a/apps/web/components/features/studio/publish/components/PublishHeader.tsx
+++ b/apps/web/components/features/studio/sandbox/components/PublishHeader.tsx
@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button"
-import { useParams, useRouter } from "next/navigation"
+import { useParams, usePathname, useRouter } from "next/navigation"
 import { publishSandbox, editSandbox } from "../api"
 import { useEffect, useState } from "react"
 import {
@@ -32,6 +32,8 @@ export function PublishHeader({
   const [isEditing, setIsEditing] = useState(false)
   const [name, setName] = useState(sandboxName)
 
+  const pathname = usePathname()
+
   useEffect(() => {
     setName(sandboxName)
   }, [sandboxName])
@@ -85,6 +87,10 @@ export function PublishHeader({
     router.push(`/studio/${params.username}`)
   }
 
+  const handleNextStep = () => {
+    router.push(`${pathname}/publish`)
+  }
+
   return (
     <header className="flex flex-col p-4 border-b">
       <div className="flex items-center">
@@ -140,6 +146,7 @@ export function PublishHeader({
           </div>
         )}
         <div className="ml-auto flex items-center gap-2">
+          <Button onClick={handleNextStep}>Next step</Button>
           <Button
             onClick={onGenerateRegistry}
             disabled={isRegenerating}
diff --git a/apps/web/components/features/studio/publish/hooks/useFileSystem.ts b/apps/web/components/features/studio/sandbox/hooks/useFileSystem.ts
similarity index 100%
rename from apps/web/components/features/studio/publish/hooks/useFileSystem.ts
rename to apps/web/components/features/studio/sandbox/hooks/useFileSystem.ts
diff --git a/apps/web/components/features/studio/publish/hooks/useSandbox.ts b/apps/web/components/features/studio/sandbox/hooks/useSandbox.ts
similarity index 100%
rename from apps/web/components/features/studio/publish/hooks/useSandbox.ts
rename to apps/web/components/features/studio/sandbox/hooks/useSandbox.ts
diff --git a/apps/web/components/features/studio/publish/index.ts b/apps/web/components/features/studio/sandbox/index.ts
similarity index 100%
rename from apps/web/components/features/studio/publish/index.ts
rename to apps/web/components/features/studio/sandbox/index.ts
diff --git a/apps/web/components/features/studio/publish/utils.ts b/apps/web/components/features/studio/sandbox/utils.ts
similarity index 100%
rename from apps/web/components/features/studio/publish/utils.ts
rename to apps/web/components/features/studio/sandbox/utils.ts
diff --git a/apps/web/components/features/studio/publish/utils/dependencies.ts b/apps/web/components/features/studio/sandbox/utils/dependencies.ts
similarity index 100%
rename from apps/web/components/features/studio/publish/utils/dependencies.ts
rename to apps/web/components/features/studio/sandbox/utils/dependencies.ts

From 2d72e9a84f4afef002b3946eef1022eee2c75839 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Wed, 30 Apr 2025 14:20:29 +0400
Subject: [PATCH 101/143] delete unused

---
 apps/web/components/features/studio/publish/pbulish.tsx | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 apps/web/components/features/studio/publish/pbulish.tsx

diff --git a/apps/web/components/features/studio/publish/pbulish.tsx b/apps/web/components/features/studio/publish/pbulish.tsx
deleted file mode 100644
index e69de29b..00000000

From 5968aec5c621fdb73ac3507e6e9aa10d07e949c7 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Wed, 30 Apr 2025 14:22:07 +0400
Subject: [PATCH 102/143] commented out pricing

---
 .../publish/components/forms/component-form.tsx       | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/apps/web/components/features/studio/publish/components/forms/component-form.tsx b/apps/web/components/features/studio/publish/components/forms/component-form.tsx
index 4f413e2e..16c9d173 100644
--- a/apps/web/components/features/studio/publish/components/forms/component-form.tsx
+++ b/apps/web/components/features/studio/publish/components/forms/component-form.tsx
@@ -15,13 +15,11 @@ import { licenses } from "@/lib/licenses"
 import { useSubmitFormHotkeys } from "../../hooks/use-hooks"
 import { Input } from "@/components/ui/input"
 import { useUser } from "@clerk/nextjs"
-import { Switch } from "@/components/ui/switch"
 import {
   makeSlugFromName,
   useIsCheckSlugAvailable,
 } from "../../hooks/use-is-check-slug-available"
 import { usePrefillAutogeneratedSlug } from "../../hooks/use-name-slug-form"
-import Link from "next/link"
 import { cn } from "@/lib/utils"
 
 export const ComponentForm = ({
@@ -272,7 +270,8 @@ export const ComponentForm = ({
               </p>
             </div>
 
-            <div className="space-y-2">
+            {/* TODO: PRICING FOR BETTER TIMES; NOW IT's FREEEEEEE */}
+            {/* <div className="space-y-2">
               <div className="flex items-center justify-between">
                 <Label>
                   Pricing <span className="text-destructive">*</span>
@@ -327,7 +326,7 @@ export const ComponentForm = ({
                   </p>
                 </div>
               </div>
-            </div>
+            </div> */}
           </div>
 
           <div
@@ -406,7 +405,7 @@ export const ComponentForm = ({
               </p>
             </div>
 
-            <div className="space-y-2">
+            {/* <div className="space-y-2">
               <Label htmlFor={licenseId}>
                 License <span className="text-destructive">*</span>
               </Label>
@@ -443,7 +442,7 @@ export const ComponentForm = ({
                   ? "Paid components must use the Mozilla Public License 2.0"
                   : "Choose how others can use your component"}
               </p>
-            </div>
+            </div> */}
           </div>
 
           <div className="space-y-2">

From dba982a097a99e07b3c561cde8e301aacf3107fc Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Wed, 30 Apr 2025 14:22:25 +0400
Subject: [PATCH 103/143] refactor: clean up commented code in component form

---
 .../studio/publish/components/forms/component-form.tsx        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/features/studio/publish/components/forms/component-form.tsx b/apps/web/components/features/studio/publish/components/forms/component-form.tsx
index 16c9d173..314b9d68 100644
--- a/apps/web/components/features/studio/publish/components/forms/component-form.tsx
+++ b/apps/web/components/features/studio/publish/components/forms/component-form.tsx
@@ -405,7 +405,7 @@ export const ComponentForm = ({
               </p>
             </div>
 
-            {/* <div className="space-y-2">
+            <div className="space-y-2">
               <Label htmlFor={licenseId}>
                 License <span className="text-destructive">*</span>
               </Label>
@@ -442,7 +442,7 @@ export const ComponentForm = ({
                   ? "Paid components must use the Mozilla Public License 2.0"
                   : "Choose how others can use your component"}
               </p>
-            </div> */}
+            </div>
           </div>
 
           <div className="space-y-2">

From 20d334892859a20057608b5eb1feab688cc87c5d Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Wed, 30 Apr 2025 14:24:01 +0400
Subject: [PATCH 104/143] rm license selection

---
 .../components/forms/component-form.tsx       | 45 -------------------
 1 file changed, 45 deletions(-)

diff --git a/apps/web/components/features/studio/publish/components/forms/component-form.tsx b/apps/web/components/features/studio/publish/components/forms/component-form.tsx
index 314b9d68..0a248707 100644
--- a/apps/web/components/features/studio/publish/components/forms/component-form.tsx
+++ b/apps/web/components/features/studio/publish/components/forms/component-form.tsx
@@ -11,7 +11,6 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import { FormData } from "../../config/utils"
-import { licenses } from "@/lib/licenses"
 import { useSubmitFormHotkeys } from "../../hooks/use-hooks"
 import { Input } from "@/components/ui/input"
 import { useUser } from "@clerk/nextjs"
@@ -81,7 +80,6 @@ export const ComponentForm = ({
   const slugId = useId()
   const descriptionId = useId()
   const registryId = useId()
-  const licenseId = useId()
   const websiteId = useId()
   const defaultRows = 2
 
@@ -307,10 +305,6 @@ export const ComponentForm = ({
                     form.setValue("price", checked ? 5 : 0, {
                       shouldValidate: true,
                     })
-                    // Set MPL-2.0 license for paid components, MIT for free
-                    form.setValue("license", checked ? "mpl-2.0" : "mit", {
-                      shouldValidate: true,
-                    })
                   }}
                   className="order-1 h-4 w-6 after:absolute after:inset-0 [&_span]:size-3 data-[state=checked]:[&_span]:translate-x-2 data-[state=checked]:[&_span]:rtl:-translate-x-2"
                 />
@@ -404,45 +398,6 @@ export const ComponentForm = ({
                 The category your component belongs to
               </p>
             </div>
-
-            <div className="space-y-2">
-              <Label htmlFor={licenseId}>
-                License <span className="text-destructive">*</span>
-              </Label>
-              <FormField
-                control={form.control}
-                name="license"
-                render={({ field }) => (
-                  <Select
-                    value={field.value}
-                    onValueChange={field.onChange}
-                    required
-                    disabled={form.watch("is_paid")}
-                  >
-                    <SelectTrigger id={licenseId}>
-                      <SelectValue placeholder="Select a license" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {Object.entries(licenses).map(([key, license]) => (
-                        <SelectItem key={key} value={license.value}>
-                          {license.label}
-                          {form.watch("is_paid") && license.value === "mpl-2.0"}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                )}
-              />
-              <p
-                className="text-xs text-muted-foreground"
-                role="region"
-                aria-live="polite"
-              >
-                {form.watch("is_paid")
-                  ? "Paid components must use the Mozilla Public License 2.0"
-                  : "Choose how others can use your component"}
-              </p>
-            </div>
           </div>
 
           <div className="space-y-2">

From b3b3f4de92233a16049af13a0ecff63a87a29834 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Wed, 30 Apr 2025 14:24:54 +0400
Subject: [PATCH 105/143] rm website field

---
 .../components/forms/component-form.tsx       | 39 +------------------
 1 file changed, 2 insertions(+), 37 deletions(-)

diff --git a/apps/web/components/features/studio/publish/components/forms/component-form.tsx b/apps/web/components/features/studio/publish/components/forms/component-form.tsx
index 0a248707..13d6641d 100644
--- a/apps/web/components/features/studio/publish/components/forms/component-form.tsx
+++ b/apps/web/components/features/studio/publish/components/forms/component-form.tsx
@@ -80,7 +80,6 @@ export const ComponentForm = ({
   const slugId = useId()
   const descriptionId = useId()
   const registryId = useId()
-  const websiteId = useId()
   const defaultRows = 2
 
   const handleTextareaInput = (e: ChangeEvent<HTMLTextAreaElement>) => {
@@ -102,40 +101,6 @@ export const ComponentForm = ({
     rules: { required: true },
   })
 
-  const { field } = useController({
-    name: "website_url",
-    control: form.control,
-    defaultValue: "",
-    rules: {
-      onChange: (e) => {
-        const rawValue = e.target.value
-
-        // Remove any protocols from input
-        const cleanUrl = rawValue
-          .trim()
-          .replace(/^(https?:\/\/)+(www\.)?/, "")
-          .replace(/\/$/, "")
-
-        // Simple URL validation
-        const urlRegex =
-          /^[a-zA-Z0-9][a-zA-Z0-9-]{0,61}[a-zA-Z0-9](\.[a-zA-Z]{2,})+([/?].*)?$/
-        const isValid = urlRegex.test(cleanUrl)
-
-        if (cleanUrl && !isValid) {
-          form.setError("website_url", {
-            type: "manual",
-            message: "Please enter a valid URL",
-          })
-        } else {
-          form.clearErrors("website_url")
-        }
-
-        // Store with https:// in form
-        const formValue = cleanUrl ? `https://${cleanUrl}` : ""
-        return formValue
-      },
-    },
-  })
   return (
     <div className="flex flex-col gap-4 w-full">
       <div className="grid grid-cols-2 gap-4">
@@ -400,7 +365,7 @@ export const ComponentForm = ({
             </div>
           </div>
 
-          <div className="space-y-2">
+          {/* <div className="space-y-2">
             <Label htmlFor={websiteId}>Website URL</Label>
             <div className="relative">
               <Input
@@ -434,7 +399,7 @@ export const ComponentForm = ({
                 Link to your component's documentation or demo
               </p>
             )}
-          </div>
+          </div> */}
         </div>
       )}
     </div>

From 01c0737116f4d34f2f6baf879445094c536389b6 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Wed, 30 Apr 2025 15:34:07 +0400
Subject: [PATCH 106/143] migrated

---
 .../features/studio/publish/components/forms/demo-form.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/features/studio/publish/components/forms/demo-form.tsx b/apps/web/components/features/studio/publish/components/forms/demo-form.tsx
index 0c4b19f2..6988d54b 100644
--- a/apps/web/components/features/studio/publish/components/forms/demo-form.tsx
+++ b/apps/web/components/features/studio/publish/components/forms/demo-form.tsx
@@ -370,7 +370,7 @@ export const DemoDetailsForm = ({
           </p>
         </div>
 
-        <Collapsible>
+        {/* <Collapsible>
           <CollapsibleTrigger asChild>
             <Button
               variant="ghost"
@@ -450,7 +450,7 @@ export const DemoDetailsForm = ({
               </p>
             </div>
           </CollapsibleContent>
-        </Collapsible>
+        </Collapsible> */}
       </div>
     </div>
   )

From c220cf8da61c4230029a6a6fc1233f6bcc1bdfc0 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Thu, 1 May 2025 00:38:28 +0400
Subject: [PATCH 107/143] update: generate registry

---
 .../sandbox/[sandboxId]/publish/page.tsx      | 323 ++++++++++--------
 .../studio/sandbox/hooks/useFileSystem.ts     | 134 +++++---
 apps/web/lib/codesandbox-sdk.ts               |   2 +-
 3 files changed, 271 insertions(+), 188 deletions(-)

diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
index 4d58e5c7..497cba66 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import React, { useState, useCallback } from "react"
+import React, { useState, useCallback, useEffect } from "react"
 import { useTheme } from "next-themes"
 import { useParams } from "next/navigation"
 import { useForm } from "react-hook-form"
@@ -22,6 +22,7 @@ import { DemoDetailsForm } from "@/components/features/studio/publish/components
 
 import { cn } from "@/lib/utils"
 import { useSandbox } from "@/components/features/studio/sandbox/hooks/useSandbox"
+import { useFileSystem } from "@/components/features/studio/sandbox/hooks/useFileSystem"
 
 // Define types needed for the form
 type FormStep =
@@ -58,9 +59,45 @@ type ParsedCodeData = {
 const PublishPage = () => {
   const params = useParams()
   const sandboxId = params.sandboxId as string
-  const { previewURL } = useSandbox({
+  const {
+    previewURL,
+    sandboxRef,
+    reconnectSandbox,
+    connectedShellId,
+    sandboxConnectionHash,
+  } = useSandbox({
     sandboxId,
   })
+  const { generateRegistry } = useFileSystem({
+    sandboxRef: sandboxRef,
+    reconnectSandbox: reconnectSandbox,
+    sandboxConnectionHash: sandboxConnectionHash,
+  })
+
+  useEffect(() => {
+    if (!connectedShellId) {
+      return
+    }
+
+    const fetchRegistryJSON = async () => {
+      console.log("Generating registry...")
+      const { componentRegistryJSON, demoRegistryJSON } =
+        await generateRegistry()
+      console.log("componentRegistryJSON", componentRegistryJSON)
+      console.log("demoRegistryJSON", demoRegistryJSON)
+    }
+    fetchRegistryJSON()
+  }, [connectedShellId])
+
+  // useEffect(() => {
+  //   const fetchRegistryJSON = async () => {
+  //     const componentRegistryJSON = await getComponentRegistryJSON()
+  //     const demoRegistryJSON = await getDemoRegistryJSON()
+  //     console.log("componentRegistryJSON", componentRegistryJSON)
+  //     console.log("demoRegistryJSON", demoRegistryJSON)
+  //   }
+  //   fetchRegistryJSON()
+  // }, [])
 
   // Theme state
   const { resolvedTheme } = useTheme()
@@ -68,7 +105,10 @@ const PublishPage = () => {
 
   // UI states
   const [formStep, setFormStep] = useState<FormStep>("detailedForm")
-  const [openAccordion, setOpenAccordion] = useState("component-info")
+  const [openAccordion, setOpenAccordion] = useState([
+    "component-info",
+    "demo-0",
+  ])
   const [currentDemoIndex, setCurrentDemoIndex] = useState(0)
   const [isEditingFromCard, setIsEditingFromCard] = useState(false)
   const [isAddingNewDemo, setIsAddingNewDemo] = useState(false)
@@ -122,8 +162,8 @@ const PublishPage = () => {
     }
   }
 
-  const handleAccordionChange = useCallback((value: string) => {
-    setOpenAccordion(value || "")
+  const handleAccordionChange = useCallback((value: string[]) => {
+    setOpenAccordion(value)
   }, [])
 
   const handleAddNewDemo = () => {
@@ -146,7 +186,7 @@ const PublishPage = () => {
     setCurrentDemoIndex(newDemoIndex)
     setIsAddingNewDemo(true)
     handleStepChange("demoCode")
-    setOpenAccordion(`demo-${newDemoIndex}`)
+    setOpenAccordion([`demo-${newDemoIndex}`, "component-info"])
   }
 
   const handleSubmit = (event: React.FormEvent) => {
@@ -175,70 +215,74 @@ const PublishPage = () => {
   }
 
   return (
-    <Form {...form}>
-      {formStep !== "nameSlugForm" && (
-        <div className="flex flex-col h-screen w-full">
-          {(formStep === "demoCode" ||
-            formStep === "demoDetails" ||
-            formStep === "detailedForm") && (
-            <>
-              <div className="flex h-[calc(100vh-3.5rem)]">
-                <div
-                  className={cn(
-                    "border-r pointer-events-auto transition-[width] duration-300 max-h-screen overflow-y-auto",
-                    formStep === "demoCode" ? "w-1/2" : "w-1/3",
-                    formStep === "demoCode" && "!w-1/2",
-                  )}
-                >
-                  {formStep === "detailedForm" && (
-                    <div className="w-full flex flex-col gap-4 overflow-y-auto p-4">
-                      <div className="space-y-4 p-[2px]">
-                        <Accordion
-                          type="single"
-                          value={openAccordion}
-                          onValueChange={handleAccordionChange}
-                          collapsible
-                          className="w-full"
-                        >
-                          <AccordionItem value="component-info">
-                            <AccordionTrigger className="py-2 text-[15px] leading-6 hover:no-underline hover:bg-muted/50 rounded-md data-[state=open]:rounded-b-none transition-all duration-200 ease-in-out -mx-2 px-2">
-                              <div className="flex items-center gap-2">
-                                Component info
-                                <Badge
-                                  variant="outline"
-                                  className={cn(
-                                    "gap-1.5 text-xs font-medium",
-                                    isComponentInfoComplete()
-                                      ? "border-emerald-500/20"
-                                      : "border-amber-500/20",
-                                  )}
-                                >
-                                  <span
+    <>
+      <div className="flex justify-between items-center">
+        <Button variant="outline"> {"< "} Back to edit</Button>
+        <Button onClick={handleSubmit}> Send to review</Button>
+      </div>
+      <Form {...form}>
+        {formStep !== "nameSlugForm" && (
+          <div className="flex flex-col h-screen w-full">
+            {(formStep === "demoCode" ||
+              formStep === "demoDetails" ||
+              formStep === "detailedForm") && (
+              <>
+                <div className="flex h-[calc(100vh-3.5rem)]">
+                  <div
+                    className={cn(
+                      "border-r pointer-events-auto transition-[width] duration-300 max-h-screen overflow-y-auto",
+                      formStep === "demoCode" ? "w-1/2" : "w-1/3",
+                      formStep === "demoCode" && "!w-1/2",
+                    )}
+                  >
+                    {formStep === "detailedForm" && (
+                      <div className="w-full flex flex-col gap-4 overflow-y-auto p-4">
+                        <div className="space-y-4 p-[2px]">
+                          <Accordion
+                            type="multiple"
+                            value={openAccordion}
+                            onValueChange={handleAccordionChange}
+                            className="w-full"
+                          >
+                            <AccordionItem value="component-info">
+                              <AccordionTrigger className="py-2 text-[15px] leading-6 hover:no-underline hover:bg-muted/50 rounded-md data-[state=open]:rounded-b-none transition-all duration-200 ease-in-out -mx-2 px-2">
+                                <div className="flex items-center gap-2">
+                                  Component info
+                                  <Badge
+                                    variant="outline"
                                     className={cn(
-                                      "size-1.5 rounded-full",
+                                      "gap-1.5 text-xs font-medium",
                                       isComponentInfoComplete()
-                                        ? "bg-emerald-500"
-                                        : "bg-amber-500",
+                                        ? "border-emerald-500/20"
+                                        : "border-amber-500/20",
                                     )}
-                                    aria-hidden="true"
+                                  >
+                                    <span
+                                      className={cn(
+                                        "size-1.5 rounded-full",
+                                        isComponentInfoComplete()
+                                          ? "bg-emerald-500"
+                                          : "bg-amber-500",
+                                      )}
+                                      aria-hidden="true"
+                                    />
+                                    {isComponentInfoComplete()
+                                      ? "Complete"
+                                      : "Required"}
+                                  </Badge>
+                                </div>
+                              </AccordionTrigger>
+                              <AccordionContent className="text-muted-foreground">
+                                <div className="text-foreground">
+                                  <ComponentForm
+                                    form={form}
+                                    handleSubmit={handleSubmit}
+                                    isSubmitting={isSubmitting}
+                                    hotkeysEnabled={!isSuccessDialogOpen}
                                   />
-                                  {isComponentInfoComplete()
-                                    ? "Complete"
-                                    : "Required"}
-                                </Badge>
-                              </div>
-                            </AccordionTrigger>
-                            <AccordionContent className="text-muted-foreground">
-                              <div className="text-foreground">
-                                <ComponentForm
-                                  form={form}
-                                  handleSubmit={handleSubmit}
-                                  isSubmitting={isSubmitting}
-                                  hotkeysEnabled={!isSuccessDialogOpen}
-                                />
 
-                                <div className="space-y-3 mt-6">
-                                  {/* <EditCodeFileCard
+                                  <div className="space-y-3 mt-6">
+                                    {/* <EditCodeFileCard
                                     iconSrc={
                                       isDarkTheme
                                         ? "/tsx-file-dark.svg"
@@ -255,7 +299,7 @@ const PublishPage = () => {
                                       setIsEditingFromCard(true)
                                     }}
                                   /> */}
-                                  {/* <EditCodeFileCard
+                                    {/* <EditCodeFileCard
                                     iconSrc={
                                       isDarkTheme
                                         ? "/css-file-dark.svg"
@@ -268,70 +312,70 @@ const PublishPage = () => {
                                       setIsEditingFromCard(true)
                                     }}
                                   /> */}
+                                  </div>
                                 </div>
-                              </div>
-                            </AccordionContent>
-                          </AccordionItem>
+                              </AccordionContent>
+                            </AccordionItem>
 
-                          {demos?.map((demo, index) => (
-                            <AccordionItem
-                              key={index}
-                              value={`demo-${index}`}
-                              className="bg-background border-none group"
-                            >
-                              <AccordionTrigger className="py-2 text-[15px] leading-6 hover:no-underline hover:bg-muted/50 rounded-md data-[state=open]:rounded-b-none transition-all duration-200 ease-in-out -mx-2 px-2">
-                                <div className="flex items-center gap-2 w-full">
-                                  <div className="flex items-center gap-2 flex-1 min-w-0 overflow-hidden">
-                                    <div className="truncate flex-shrink min-w-0">
-                                      {demo.name || `Demo ${index + 1}`}
-                                    </div>
-                                    <Badge
-                                      variant="outline"
-                                      className={cn(
-                                        "gap-1.5 text-xs font-medium shrink-0",
-                                        isDemoComplete(index)
-                                          ? "border-emerald-500/20"
-                                          : "border-amber-500/20",
-                                      )}
-                                    >
-                                      <span
+                            {demos?.map((demo, index) => (
+                              <AccordionItem
+                                key={index}
+                                value={`demo-${index}`}
+                                className="bg-background border-none group"
+                              >
+                                <AccordionTrigger className="py-2 text-[15px] leading-6 hover:no-underline hover:bg-muted/50 rounded-md data-[state=open]:rounded-b-none transition-all duration-200 ease-in-out -mx-2 px-2">
+                                  <div className="flex items-center gap-2 w-full">
+                                    <div className="flex items-center gap-2 flex-1 min-w-0 overflow-hidden">
+                                      <div className="truncate flex-shrink min-w-0">
+                                        {demo.name || `Demo ${index + 1}`}
+                                      </div>
+                                      <Badge
+                                        variant="outline"
                                         className={cn(
-                                          "size-1.5 rounded-full",
+                                          "gap-1.5 text-xs font-medium shrink-0",
                                           isDemoComplete(index)
-                                            ? "bg-emerald-500"
-                                            : "bg-amber-500",
+                                            ? "border-emerald-500/20"
+                                            : "border-amber-500/20",
                                         )}
-                                        aria-hidden="true"
-                                      />
-                                      {isDemoComplete(index)
-                                        ? "Complete"
-                                        : "Required"}
-                                    </Badge>
+                                      >
+                                        <span
+                                          className={cn(
+                                            "size-1.5 rounded-full",
+                                            isDemoComplete(index)
+                                              ? "bg-emerald-500"
+                                              : "bg-amber-500",
+                                          )}
+                                          aria-hidden="true"
+                                        />
+                                        {isDemoComplete(index)
+                                          ? "Complete"
+                                          : "Required"}
+                                      </Badge>
+                                    </div>
+                                    {demos.length > 1 && (
+                                      <Button
+                                        variant="ghost"
+                                        size="icon"
+                                        className="opacity-0 group-hover:opacity-100 transition-opacity h-8 w-8 ml-auto mr-1 shrink-0"
+                                        onClick={(e) => {
+                                          e.stopPropagation()
+                                          // Handle demo deletion here
+                                          console.log("Delete demo:", index)
+                                        }}
+                                      >
+                                        <Trash2 className="h-4 w-4 text-muted-foreground hover:text-destructive transition-colors" />
+                                      </Button>
+                                    )}
                                   </div>
-                                  {demos.length > 1 && (
-                                    <Button
-                                      variant="ghost"
-                                      size="icon"
-                                      className="opacity-0 group-hover:opacity-100 transition-opacity h-8 w-8 ml-auto mr-1 shrink-0"
-                                      onClick={(e) => {
-                                        e.stopPropagation()
-                                        // Handle demo deletion here
-                                        console.log("Delete demo:", index)
-                                      }}
-                                    >
-                                      <Trash2 className="h-4 w-4 text-muted-foreground hover:text-destructive transition-colors" />
-                                    </Button>
-                                  )}
-                                </div>
-                              </AccordionTrigger>
-                              <AccordionContent>
-                                <div className="text-foreground space-y-4">
-                                  <DemoDetailsForm
-                                    form={form}
-                                    demoIndex={index}
-                                    mode={mode}
-                                  />
-                                  {/* <EditCodeFileCard
+                                </AccordionTrigger>
+                                <AccordionContent>
+                                  <div className="text-foreground space-y-4">
+                                    <DemoDetailsForm
+                                      form={form}
+                                      demoIndex={index}
+                                      mode={mode}
+                                    />
+                                    {/* <EditCodeFileCard
                                     iconSrc={
                                       isDarkTheme
                                         ? "/demo-file-dark.svg"
@@ -344,23 +388,24 @@ const PublishPage = () => {
                                       setCurrentDemoIndex(index)
                                     }}
                                   /> */}
-                                </div>
-                              </AccordionContent>
-                            </AccordionItem>
-                          ))}
-                        </Accordion>
+                                  </div>
+                                </AccordionContent>
+                              </AccordionItem>
+                            ))}
+                          </Accordion>
+                        </div>
                       </div>
-                    </div>
-                  )}
-                </div>
+                    )}
+                  </div>
 
-                <iframe src={previewURL || ""} className="w-2/3" />
-              </div>
-            </>
-          )}
-        </div>
-      )}
-    </Form>
+                  <iframe src={previewURL || ""} className="w-2/3" />
+                </div>
+              </>
+            )}
+          </div>
+        )}
+      </Form>
+    </>
   )
 }
 
diff --git a/apps/web/components/features/studio/sandbox/hooks/useFileSystem.ts b/apps/web/components/features/studio/sandbox/hooks/useFileSystem.ts
index 0e25283a..dd62b561 100644
--- a/apps/web/components/features/studio/sandbox/hooks/useFileSystem.ts
+++ b/apps/web/components/features/studio/sandbox/hooks/useFileSystem.ts
@@ -110,7 +110,7 @@ export const useFileSystem = ({
   const [advancedView, setAdvancedView] = useState(false)
   const debounceRef = useRef<NodeJS.Timeout | null>(null)
 
-  const fsWrapper = async <T>(
+  const sbWrapper = async <T>(
     operation: (sandbox: SandboxSession) => Promise<T>,
   ): Promise<T | undefined> => {
     if (!sandboxRef.current) return
@@ -132,7 +132,7 @@ export const useFileSystem = ({
   const loadRootDirectory = async () => {
     setIsTreeLoading(true)
     try {
-      const rootEntries = await fsWrapper((sandbox) =>
+      const rootEntries = await sbWrapper((sandbox) =>
         loadDirectoryRecursively(sandbox, ROOT_PATH, advancedView),
       )
       if (rootEntries) setFiles(rootEntries)
@@ -152,7 +152,7 @@ export const useFileSystem = ({
   const loadFileContent = async (filePath: string): Promise<string> => {
     setIsFileLoading(true)
     try {
-      const content = await fsWrapper((sandbox) =>
+      const content = await sbWrapper((sandbox) =>
         sandbox.fs.readTextFile(normalizePath(filePath)),
       )
       if (!content) throw new Error("Failed to load file content")
@@ -171,7 +171,7 @@ export const useFileSystem = ({
 
     debounceRef.current = setTimeout(async () => {
       try {
-        await fsWrapper((sandbox) =>
+        await sbWrapper((sandbox) =>
           sandbox.fs.writeTextFile(normalizePath(filePath), value),
         )
       } catch (error) {
@@ -183,7 +183,7 @@ export const useFileSystem = ({
 
   const createFile = async (filePath: string) => {
     try {
-      await fsWrapper((sandbox) =>
+      await sbWrapper((sandbox) =>
         sandbox.fs.writeTextFile(normalizePath(filePath), "// TODO: Add code"),
       )
       await loadRootDirectory()
@@ -196,7 +196,7 @@ export const useFileSystem = ({
 
   const createDirectory = async (dirPath: string) => {
     try {
-      await fsWrapper((sandbox) => sandbox.fs.mkdir(normalizePath(dirPath)))
+      await sbWrapper((sandbox) => sandbox.fs.mkdir(normalizePath(dirPath)))
       await loadRootDirectory()
     } catch (error) {
       console.error(`Failed to create directory ${dirPath}:`, error)
@@ -207,7 +207,7 @@ export const useFileSystem = ({
 
   const deleteEntry = async (entryPath: string) => {
     try {
-      await fsWrapper(async (sandbox) => {
+      await sbWrapper(async (sandbox) => {
         let isDir = false
         try {
           const statResult = await sandbox.fs.stat(normalizePath(entryPath))
@@ -232,7 +232,7 @@ export const useFileSystem = ({
       const parentPath = pathParts.slice(0, -1).join("/")
       const newPath = `${parentPath ? parentPath + "/" : ""}${newName}`
 
-      await fsWrapper((sandbox) =>
+      await sbWrapper((sandbox) =>
         sandbox.fs.rename(normalizePath(oldPath), normalizePath(newPath)),
       )
 
@@ -251,7 +251,7 @@ export const useFileSystem = ({
   ) => {
     try {
       const packageJsonPath = normalizePath("/package.json")
-      const content = await fsWrapper((sandbox) =>
+      const content = await sbWrapper((sandbox) =>
         sandbox.fs.readTextFile(packageJsonPath),
       )
 
@@ -264,7 +264,7 @@ export const useFileSystem = ({
 
       packageJson.dependencies[packageName] = `^${version}`
 
-      await fsWrapper((sandbox) =>
+      await sbWrapper((sandbox) =>
         sandbox.fs.writeTextFile(
           packageJsonPath,
           JSON.stringify(packageJson, null, 2),
@@ -285,48 +285,83 @@ export const useFileSystem = ({
   }
 
   // Function to compile the project into a shadcn registry
-  const generateRegistry = async () => {
-    const task = await sandboxRef.current?.tasks.runTask("generate:registry")
-
-    const getContentOfRegistryJson = async () => {
-      const registryJsonPath = normalizePath("public/r/component.json")
-      const content = await fsWrapper((sandbox) =>
-        sandbox.fs.readTextFile(registryJsonPath),
-      )
-      return content
-    }
+  const generateRegistry = async (): Promise<{
+    componentRegistryJSON: string
+    demoRegistryJSON: string
+  }> => {
+    console.log("Generating registry...")
+
+    const task = await sbWrapper((sandbox) =>
+      sandbox.tasks.runTask("generate:registry"),
+    )
+    setIsCompiling(true)
+
+    console.log("Task:", task)
+
+    return new Promise<{
+      componentRegistryJSON: string
+      demoRegistryJSON: string
+    }>((resolve, reject) => {
+      let counter = 0
+      const interval = setInterval(async () => {
+        const shells = await sandboxRef.current?.shells.getShells()
+        const shell = shells?.find((shell) => shell.id === task?.shellId)
+
+        if (!shell) {
+          counter++
+          if (counter > 35) {
+            clearInterval(interval)
+            reject(new Error("Shell not found"))
+          }
+          return
+        }
 
-    let counter = 0
-    const interval = setInterval(async () => {
-      const shells = await sandboxRef.current?.shells.getShells()
-      const shell = shells?.find((shell) => shell.id === task?.shellId)
+        const connectedShell = await sandboxRef.current?.shells.open(shell.id)
+
+        if (connectedShell) {
+          clearInterval(interval)
+          connectedShell.onOutput(async (data) => {
+            if (data.includes("FINISH")) {
+              setIsCompiling(false)
+              try {
+                const componentRegistryJSON =
+                  await getContentOfComponentRegistryJSON()
+                const demoRegistryJSON = await getContentOfDemoRegistryJSON()
+                connectedShell.dispose()
+                if (!componentRegistryJSON || !demoRegistryJSON) {
+                  throw new Error("Failed to generate registry")
+                }
+                resolve({ componentRegistryJSON, demoRegistryJSON })
+              } catch (error) {
+                reject(error)
+              }
+            }
+          })
+        }
 
-      if (!shell) {
-        return
-      }
+        counter++
+        if (counter > 50) {
+          clearInterval(interval)
+          reject(new Error("Timeout"))
+        }
+      }, 1000)
+    })
+  }
 
-      const connectedShell = await sandboxRef.current?.shells.open(shell.id)
-
-      if (connectedShell) {
-        clearInterval(interval)
-        console.log("CONNECTED SHELL", connectedShell)
-        connectedShell?.onOutput(async (data) => {
-          if (data.includes("FINISH")) {
-            console.log("FINISH")
-            setIsCompiling(false)
-            const content = await getContentOfRegistryJson()
-            console.log("CONTENT OF REGISTRY JSON", content)
-            toast.success("Registry generated successfully")
-            connectedShell.dispose()
-          }
-        })
-      }
+  const getContentOfComponentRegistryJSON = async () => {
+    const registryJsonPath = normalizePath("public/r/component.json")
+    const content = await sbWrapper((sandbox) =>
+      sandbox.fs.readTextFile(registryJsonPath),
+    )
+    return content
+  }
 
-      counter++
-      if (counter > 35) {
-        clearInterval(interval)
-      }
-    }, 1000)
+  const getContentOfDemoRegistryJSON = async () => {
+    const registryJsonPath = normalizePath("public/r/demo.json")
+    const content = await sbWrapper((sandbox) =>
+      sandbox.fs.readTextFile(registryJsonPath),
+    )
+    return content
   }
 
   return {
@@ -344,6 +379,9 @@ export const useFileSystem = ({
     deleteEntry,
     renameEntry,
     addDependencyToPackageJson,
+    // registry
     generateRegistry,
+    // getContentOfComponentRegistryJSON,
+    // getContentOfDemoRegistryJSON,
   }
 }
diff --git a/apps/web/lib/codesandbox-sdk.ts b/apps/web/lib/codesandbox-sdk.ts
index 40d56c7f..2dd5d2a8 100644
--- a/apps/web/lib/codesandbox-sdk.ts
+++ b/apps/web/lib/codesandbox-sdk.ts
@@ -5,7 +5,7 @@ export const codesandboxSdk = new CodeSandbox(process.env.CSB_API_KEY!)
 export const DEFAULT_TEMPLATE = "21st-vite"
 
 export const TEMPLATES = {
-  "21st-vite": "672j5x",
+  "21st-vite": "mwmkcv",
 }
 
 export const DEFAULT_HIBERNATION_TIMEOUT = 60

From 90e2e859cf4abd88c8a23ea7be204243000dc65e Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Thu, 1 May 2025 01:07:36 +0400
Subject: [PATCH 108/143] add some publishing logic

---
 .../sandbox/[sandboxId]/publish/page.tsx      | 504 +++++++-----------
 .../features/studio/publish/config/utils.ts   |  41 +-
 .../publish/hooks/use-submit-component.ts     | 289 ++++++++++
 .../studio/sandbox/hooks/useFileSystem.ts     |  20 +-
 4 files changed, 555 insertions(+), 299 deletions(-)
 create mode 100644 apps/web/components/features/studio/publish/hooks/use-submit-component.ts

diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
index 497cba66..5e9f00ac 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
@@ -1,10 +1,11 @@
 "use client"
 
 import React, { useState, useCallback, useEffect } from "react"
-import { useTheme } from "next-themes"
 import { useParams } from "next/navigation"
 import { useForm } from "react-hook-form"
 import { Trash2 } from "lucide-react"
+import { useUser } from "@clerk/nextjs"
+import { toast } from "sonner"
 
 import { Form } from "@/components/ui/form"
 import { Badge } from "@/components/ui/badge"
@@ -15,45 +16,25 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion"
+import { LoadingDialog } from "@/components/ui/loading-dialog"
 
 import { ComponentForm } from "@/components/features/studio/publish/components/forms/component-form"
 import { DemoDetailsForm } from "@/components/features/studio/publish/components/forms/demo-form"
-// import { EditCodeFileCard } from "@/components/features/publish-old/components/edit-code-file-card"
+import { SuccessDialog } from "@/components/features/publish-old/components/success-dialog"
+import { FormData } from "@/components/features/studio/publish/config/utils"
+import { useSubmitComponent } from "@/components/features/studio/publish/hooks/use-submit-component"
 
 import { cn } from "@/lib/utils"
 import { useSandbox } from "@/components/features/studio/sandbox/hooks/useSandbox"
 import { useFileSystem } from "@/components/features/studio/sandbox/hooks/useFileSystem"
+import { usePublishAs } from "@/components/features/publish-old/hooks/use-publish-as"
 
-// Define types needed for the form
-type FormStep =
-  | "nameSlugForm"
-  | "code"
-  | "demoCode"
-  | "demoDetails"
-  | "detailedForm"
-
-// Basic form data structure
-type FormData = {
-  name: string
-  component_slug: string
-  registry: string
-  description: string
-  license: string
-  is_public: boolean
-  code: string
-  demos: {
-    name: string
-    demo_code: string
-    demo_slug: string
-    tags: any[]
-    preview_image_data_url: string
-    preview_image_file?: File
-    demo_direct_registry_dependencies: string[]
-  }[]
-}
+type FormStep = "detailedForm"
 
 type ParsedCodeData = {
   componentNames: string[]
+  dependencies?: Record<string, string>
+  demoDependencies?: Record<string, string>
 }
 
 const PublishPage = () => {
@@ -72,56 +53,28 @@ const PublishPage = () => {
     sandboxRef: sandboxRef,
     reconnectSandbox: reconnectSandbox,
     sandboxConnectionHash: sandboxConnectionHash,
+    connectedShellId,
   })
-
-  useEffect(() => {
-    if (!connectedShellId) {
-      return
-    }
-
-    const fetchRegistryJSON = async () => {
-      console.log("Generating registry...")
-      const { componentRegistryJSON, demoRegistryJSON } =
-        await generateRegistry()
-      console.log("componentRegistryJSON", componentRegistryJSON)
-      console.log("demoRegistryJSON", demoRegistryJSON)
-    }
-    fetchRegistryJSON()
-  }, [connectedShellId])
+  const { user } = useUser()
 
   // useEffect(() => {
+  //   if (!connectedShellId) return
+
   //   const fetchRegistryJSON = async () => {
-  //     const componentRegistryJSON = await getComponentRegistryJSON()
-  //     const demoRegistryJSON = await getDemoRegistryJSON()
+  //     console.log("Generating registry...")
+
   //     console.log("componentRegistryJSON", componentRegistryJSON)
   //     console.log("demoRegistryJSON", demoRegistryJSON)
   //   }
   //   fetchRegistryJSON()
-  // }, [])
-
-  // Theme state
-  const { resolvedTheme } = useTheme()
-  const isDarkTheme = resolvedTheme === "dark"
+  // }, [connectedShellId, generateRegistry])
 
-  // UI states
-  const [formStep, setFormStep] = useState<FormStep>("detailedForm")
+  const [formStep] = useState<FormStep>("detailedForm")
   const [openAccordion, setOpenAccordion] = useState([
     "component-info",
     "demo-0",
   ])
-  const [currentDemoIndex, setCurrentDemoIndex] = useState(0)
-  const [isEditingFromCard, setIsEditingFromCard] = useState(false)
-  const [isAddingNewDemo, setIsAddingNewDemo] = useState(false)
-  const [previousStep, setPreviousStep] = useState<FormStep>()
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [isSuccessDialogOpen, setIsSuccessDialogOpen] = useState(false)
 
-  // Code parsing state
-  const [parsedCode, setParsedCode] = useState<ParsedCodeData>({
-    componentNames: [],
-  })
-
-  // Initialize form
   const form = useForm<FormData>({
     defaultValues: {
       name: "",
@@ -129,78 +82,75 @@ const PublishPage = () => {
       registry: "ui",
       description: "",
       license: "mit",
+      website_url: "",
       is_public: true,
-      code: "",
+      publish_as_username: user?.username ?? undefined,
+      is_paid: false,
+      price: 0,
+      unknown_dependencies: [],
+      direct_registry_dependencies: [],
+      code: `// Mock component code for ${sandboxId}\nexport default function MockComponent() { return <div>Hello</div>; }`,
       demos: [
         {
-          name: "",
-          demo_code: "",
+          name: "Default Demo",
+          demo_code: `// Mock demo code for ${sandboxId}\nimport MockComponent from './component';\nexport default function Demo() { return <MockComponent />; }`,
           demo_slug: "default",
           tags: [],
           preview_image_data_url: "",
           preview_image_file: undefined,
+          preview_video_data_url: "",
+          preview_video_file: undefined,
           demo_direct_registry_dependencies: [],
+          demo_dependencies: {},
         },
       ],
     },
   })
 
-  // Get values from form
-  const { component_slug: componentSlug, demos } = form.getValues()
-  const currentDemo = demos?.[currentDemoIndex]
-  const demoCode = currentDemo?.demo_code || ""
-  const mode = "full" // Default mode
-
-  // Handlers
-  const handleStepChange = (newStep: FormStep) => {
-    setPreviousStep(formStep)
-    setFormStep(newStep)
+  const publishAsUsername = form.watch("publish_as_username")
+  const { user: publishAsUser } = usePublishAs({
+    username: publishAsUsername ?? user?.username ?? "",
+  })
 
-    if (newStep === "detailedForm") {
-      setIsAddingNewDemo(false)
-      setIsEditingFromCard(false)
+  useEffect(() => {
+    if (form.getValues("publish_as_username") === undefined && user?.username) {
+      form.setValue("publish_as_username", user.username)
     }
-  }
+  }, [user?.username, form])
+
+  const {
+    isSubmitting,
+    isLoadingDialogOpen,
+    publishProgress,
+    isSuccessDialogOpen,
+    createdDemoSlug,
+    submitComponent,
+    setIsSuccessDialogOpen,
+  } = useSubmitComponent({ generateRegistry })
 
   const handleAccordionChange = useCallback((value: string[]) => {
     setOpenAccordion(value)
   }, [])
 
-  const handleAddNewDemo = () => {
-    const demos = form.getValues().demos || []
-    const newDemoIndex = demos.length
-
-    form.setValue("demos", [
-      ...demos,
-      {
-        name: "",
-        demo_slug: `demo-${newDemoIndex + 1}`,
-        demo_code: "",
-        tags: [],
-        preview_image_data_url: "",
-        preview_image_file: undefined,
-        demo_direct_registry_dependencies: [],
-      },
-    ])
-
-    setCurrentDemoIndex(newDemoIndex)
-    setIsAddingNewDemo(true)
-    handleStepChange("demoCode")
-    setOpenAccordion([`demo-${newDemoIndex}`, "component-info"])
-  }
-
-  const handleSubmit = (event: React.FormEvent) => {
-    event.preventDefault()
-    console.log("Form submitted:", form.getValues())
-    setIsSubmitting(true)
-    // Add actual submission logic here
-    setTimeout(() => {
-      setIsSubmitting(false)
-      setIsSuccessDialogOpen(true)
-    }, 1000)
+  const handleSubmit = (event?: React.FormEvent) => {
+    event?.preventDefault()
+    const formData = form.getValues()
+    const data = {
+      ...formData,
+      website_url: formData.website_url || "",
+    }
+    if (!publishAsUser?.id) {
+      toast.error(
+        "Cannot determine user to publish as. Please ensure you are logged in.",
+      )
+      return
+    }
+    submitComponent(data, {
+      id: publishAsUser.id,
+      username: publishAsUser.username || undefined,
+    })
   }
 
-  // Utility functions
   const isComponentInfoComplete = useCallback(() => {
     const { description, license, name, component_slug, registry } =
       form.getValues()
@@ -209,202 +159,162 @@ const PublishPage = () => {
     )
   }, [form])
 
-  const isDemoComplete = (demoIndex: number) => {
-    const demo = form.getValues().demos[demoIndex]
-    return !!(demo?.name && demo?.demo_code)
+  const handleGoToComponent = useCallback(() => {
+    const username = publishAsUser?.username || user?.username
+    const slug = form.getValues("component_slug")
+    const demoSlug = createdDemoSlug || "default"
+    if (username && slug) {
+      console.log(`Redirecting to /${username}/${slug}/${demoSlug}`)
+    } else {
+      console.warn("Could not determine redirect path.")
+    }
+    setIsSuccessDialogOpen(false)
+  }, [publishAsUser, user, form, createdDemoSlug])
+
+  const handleAddAnother = () => {
+    form.reset()
+    setIsSuccessDialogOpen(false)
+    setOpenAccordion(["component-info", "demo-0"])
   }
 
   return (
     <>
-      <div className="flex justify-between items-center">
+      <div className="flex justify-between items-center p-4 border-b">
         <Button variant="outline"> {"< "} Back to edit</Button>
-        <Button onClick={handleSubmit}> Send to review</Button>
+        <Button onClick={() => handleSubmit()} disabled={isSubmitting}>
+          {isSubmitting ? "Submitting..." : "Send to review"}
+        </Button>
       </div>
       <Form {...form}>
-        {formStep !== "nameSlugForm" && (
-          <div className="flex flex-col h-screen w-full">
-            {(formStep === "demoCode" ||
-              formStep === "demoDetails" ||
-              formStep === "detailedForm") && (
-              <>
-                <div className="flex h-[calc(100vh-3.5rem)]">
-                  <div
-                    className={cn(
-                      "border-r pointer-events-auto transition-[width] duration-300 max-h-screen overflow-y-auto",
-                      formStep === "demoCode" ? "w-1/2" : "w-1/3",
-                      formStep === "demoCode" && "!w-1/2",
-                    )}
+        <div className="flex flex-col h-screen w-full">
+          <div className="flex h-[calc(100vh-3.5rem)]">
+            <div className="border-r pointer-events-auto transition-[width] duration-300 max-h-screen overflow-y-auto w-1/3">
+              <div className="w-full flex flex-col gap-4 overflow-y-auto p-4">
+                <div className="space-y-4 p-[2px]">
+                  <Accordion
+                    type="multiple"
+                    value={openAccordion}
+                    onValueChange={handleAccordionChange}
+                    className="w-full"
                   >
-                    {formStep === "detailedForm" && (
-                      <div className="w-full flex flex-col gap-4 overflow-y-auto p-4">
-                        <div className="space-y-4 p-[2px]">
-                          <Accordion
-                            type="multiple"
-                            value={openAccordion}
-                            onValueChange={handleAccordionChange}
-                            className="w-full"
+                    <AccordionItem value="component-info">
+                      <AccordionTrigger className="py-2 text-[15px] leading-6 hover:no-underline hover:bg-muted/50 rounded-md data-[state=open]:rounded-b-none transition-all duration-200 ease-in-out -mx-2 px-2">
+                        <div className="flex items-center gap-2">
+                          Component info
+                          <Badge
+                            variant="outline"
+                            className={cn(
+                              "gap-1.5 text-xs font-medium",
+                              isComponentInfoComplete()
+                                ? "border-emerald-500/20"
+                                : "border-amber-500/20",
+                            )}
                           >
-                            <AccordionItem value="component-info">
-                              <AccordionTrigger className="py-2 text-[15px] leading-6 hover:no-underline hover:bg-muted/50 rounded-md data-[state=open]:rounded-b-none transition-all duration-200 ease-in-out -mx-2 px-2">
-                                <div className="flex items-center gap-2">
-                                  Component info
-                                  <Badge
-                                    variant="outline"
-                                    className={cn(
-                                      "gap-1.5 text-xs font-medium",
-                                      isComponentInfoComplete()
-                                        ? "border-emerald-500/20"
-                                        : "border-amber-500/20",
-                                    )}
-                                  >
-                                    <span
-                                      className={cn(
-                                        "size-1.5 rounded-full",
-                                        isComponentInfoComplete()
-                                          ? "bg-emerald-500"
-                                          : "bg-amber-500",
-                                      )}
-                                      aria-hidden="true"
-                                    />
-                                    {isComponentInfoComplete()
-                                      ? "Complete"
-                                      : "Required"}
-                                  </Badge>
-                                </div>
-                              </AccordionTrigger>
-                              <AccordionContent className="text-muted-foreground">
-                                <div className="text-foreground">
-                                  <ComponentForm
-                                    form={form}
-                                    handleSubmit={handleSubmit}
-                                    isSubmitting={isSubmitting}
-                                    hotkeysEnabled={!isSuccessDialogOpen}
-                                  />
-
-                                  <div className="space-y-3 mt-6">
-                                    {/* <EditCodeFileCard
-                                    iconSrc={
-                                      isDarkTheme
-                                        ? "/tsx-file-dark.svg"
-                                        : "/tsx-file.svg"
-                                    }
-                                    mainText={`${form.getValues("name") || "Component"} code`}
-                                    subText={
-                                      parsedCode.componentNames.length > 0
-                                        ? `${parsedCode.componentNames.slice(0, 2).join(", ")}${parsedCode.componentNames.length > 2 ? ` +${parsedCode.componentNames.length - 2}` : ""}`
-                                        : "No components detected"
-                                    }
-                                    onEditClick={() => {
-                                      handleStepChange("code")
-                                      setIsEditingFromCard(true)
-                                    }}
-                                  /> */}
-                                    {/* <EditCodeFileCard
-                                    iconSrc={
-                                      isDarkTheme
-                                        ? "/css-file-dark.svg"
-                                        : "/css-file.svg"
-                                    }
-                                    mainText="Custom styles"
-                                    subText="Tailwind config and globals.css"
-                                    onEditClick={() => {
-                                      handleStepChange("code")
-                                      setIsEditingFromCard(true)
-                                    }}
-                                  /> */}
-                                  </div>
-                                </div>
-                              </AccordionContent>
-                            </AccordionItem>
-
-                            {demos?.map((demo, index) => (
-                              <AccordionItem
-                                key={index}
-                                value={`demo-${index}`}
-                                className="bg-background border-none group"
-                              >
-                                <AccordionTrigger className="py-2 text-[15px] leading-6 hover:no-underline hover:bg-muted/50 rounded-md data-[state=open]:rounded-b-none transition-all duration-200 ease-in-out -mx-2 px-2">
-                                  <div className="flex items-center gap-2 w-full">
-                                    <div className="flex items-center gap-2 flex-1 min-w-0 overflow-hidden">
-                                      <div className="truncate flex-shrink min-w-0">
-                                        {demo.name || `Demo ${index + 1}`}
-                                      </div>
-                                      <Badge
-                                        variant="outline"
-                                        className={cn(
-                                          "gap-1.5 text-xs font-medium shrink-0",
-                                          isDemoComplete(index)
-                                            ? "border-emerald-500/20"
-                                            : "border-amber-500/20",
-                                        )}
-                                      >
-                                        <span
-                                          className={cn(
-                                            "size-1.5 rounded-full",
-                                            isDemoComplete(index)
-                                              ? "bg-emerald-500"
-                                              : "bg-amber-500",
-                                          )}
-                                          aria-hidden="true"
-                                        />
-                                        {isDemoComplete(index)
-                                          ? "Complete"
-                                          : "Required"}
-                                      </Badge>
-                                    </div>
-                                    {demos.length > 1 && (
-                                      <Button
-                                        variant="ghost"
-                                        size="icon"
-                                        className="opacity-0 group-hover:opacity-100 transition-opacity h-8 w-8 ml-auto mr-1 shrink-0"
-                                        onClick={(e) => {
-                                          e.stopPropagation()
-                                          // Handle demo deletion here
-                                          console.log("Delete demo:", index)
-                                        }}
-                                      >
-                                        <Trash2 className="h-4 w-4 text-muted-foreground hover:text-destructive transition-colors" />
-                                      </Button>
-                                    )}
-                                  </div>
-                                </AccordionTrigger>
-                                <AccordionContent>
-                                  <div className="text-foreground space-y-4">
-                                    <DemoDetailsForm
-                                      form={form}
-                                      demoIndex={index}
-                                      mode={mode}
-                                    />
-                                    {/* <EditCodeFileCard
-                                    iconSrc={
-                                      isDarkTheme
-                                        ? "/demo-file-dark.svg"
-                                        : "/demo-file.svg"
-                                    }
-                                    mainText={`Demo ${index + 1} code`}
-                                    onEditClick={() => {
-                                      handleStepChange("demoCode")
-                                      setIsEditingFromCard(true)
-                                      setCurrentDemoIndex(index)
-                                    }}
-                                  /> */}
-                                  </div>
-                                </AccordionContent>
-                              </AccordionItem>
-                            ))}
-                          </Accordion>
+                            <span
+                              className={cn(
+                                "size-1.5 rounded-full",
+                                isComponentInfoComplete()
+                                  ? "bg-emerald-500"
+                                  : "bg-amber-500",
+                              )}
+                              aria-hidden="true"
+                            />
+                            {isComponentInfoComplete()
+                              ? "Complete"
+                              : "Required"}
+                          </Badge>
+                        </div>
+                      </AccordionTrigger>
+                      <AccordionContent className="text-muted-foreground pt-4">
+                        <div className="text-foreground">
+                          <ComponentForm
+                            form={form as any}
+                            handleSubmit={handleSubmit}
+                            isSubmitting={isSubmitting}
+                            hotkeysEnabled={!isSuccessDialogOpen}
+                          />
                         </div>
-                      </div>
-                    )}
-                  </div>
+                      </AccordionContent>
+                    </AccordionItem>
 
-                  <iframe src={previewURL || ""} className="w-2/3" />
+                    {form.getValues().demos?.map((demo, index) => (
+                      <AccordionItem
+                        key={index}
+                        value={`demo-${index}`}
+                        className="bg-background border-none group"
+                      >
+                        <AccordionTrigger className="py-2 text-[15px] leading-6 hover:no-underline hover:bg-muted/50 rounded-md data-[state=open]:rounded-b-none transition-all duration-200 ease-in-out -mx-2 px-2">
+                          <div className="flex items-center gap-2 w-full">
+                            <div className="flex items-center gap-2 flex-1 min-w-0 overflow-hidden">
+                              <div className="truncate flex-shrink min-w-0">
+                                {demo.name || `Demo ${index + 1}`}
+                              </div>
+                              <Badge
+                                variant="outline"
+                                className={cn(
+                                  "gap-1.5 text-xs font-medium shrink-0",
+                                  demo.name && demo.demo_code
+                                    ? "border-emerald-500/20"
+                                    : "border-amber-500/20",
+                                )}
+                              >
+                                <span
+                                  className={cn(
+                                    "size-1.5 rounded-full",
+                                    demo.name && demo.demo_code
+                                      ? "bg-emerald-500"
+                                      : "bg-amber-500",
+                                  )}
+                                  aria-hidden="true"
+                                />
+                                {demo.name && demo.demo_code
+                                  ? "Complete"
+                                  : "Required"}
+                              </Badge>
+                            </div>
+                            {form.getValues().demos.length > 1 && (
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="opacity-0 group-hover:opacity-100 transition-opacity h-8 w-8 ml-auto mr-1 shrink-0"
+                                onClick={(e) => {
+                                  e.stopPropagation()
+                                  console.log("Delete demo:", index)
+                                }}
+                              >
+                                <Trash2 className="h-4 w-4 text-muted-foreground hover:text-destructive transition-colors" />
+                              </Button>
+                            )}
+                          </div>
+                        </AccordionTrigger>
+                        <AccordionContent className="pt-4">
+                          <div className="text-foreground space-y-4">
+                            <DemoDetailsForm
+                              form={form as any}
+                              demoIndex={index}
+                            />
+                          </div>
+                        </AccordionContent>
+                      </AccordionItem>
+                    ))}
+                  </Accordion>
                 </div>
-              </>
-            )}
+              </div>
+            </div>
+
+            <iframe src={previewURL || ""} className="w-2/3" />
           </div>
-        )}
+        </div>
       </Form>
+
+      <LoadingDialog isOpen={isLoadingDialogOpen} message={publishProgress} />
+      <SuccessDialog
+        isOpen={isSuccessDialogOpen}
+        onOpenChange={setIsSuccessDialogOpen}
+        onAddAnother={handleAddAnother}
+        onGoToComponent={handleGoToComponent}
+        mode={"component"}
+      />
     </>
   )
 }
diff --git a/apps/web/components/features/studio/publish/config/utils.ts b/apps/web/components/features/studio/publish/config/utils.ts
index 29be5d92..63b1e7b2 100644
--- a/apps/web/components/features/studio/publish/config/utils.ts
+++ b/apps/web/components/features/studio/publish/config/utils.ts
@@ -71,7 +71,46 @@ export const formSchema = z.object({
   price: z.number().default(0),
 })
 
-export type FormData = z.infer<typeof formSchema>
+export type FormData = {
+  name: string
+  component_slug: string
+  registry: string
+  description: string
+  license: string
+  website_url?: string
+  is_public: boolean
+  publish_as_username?: string
+  code: string
+  demos: Demo[]
+  is_paid?: boolean
+  price?: number
+  unknown_dependencies?: string[]
+  direct_registry_dependencies?: string[]
+  slug_available?: boolean
+  tailwind_config?: string
+  globals_css?: string
+}
+
+export type Demo = {
+  name: string
+  demo_code: string
+  demo_slug: string
+  tags: Tag[]
+  preview_image_data_url: string
+  preview_image_file?: File
+  preview_video_data_url?: string
+  preview_video_file?: File
+  demo_direct_registry_dependencies?: string[]
+  demo_dependencies?: Record<string, string>
+  tailwind_config?: string
+  global_css?: string
+}
+
+export type Tag = {
+  id?: number
+  name: string
+  slug: string
+}
 
 export type DemoFormData = z.infer<typeof demoSchema>
 
diff --git a/apps/web/components/features/studio/publish/hooks/use-submit-component.ts b/apps/web/components/features/studio/publish/hooks/use-submit-component.ts
new file mode 100644
index 00000000..71f1db9f
--- /dev/null
+++ b/apps/web/components/features/studio/publish/hooks/use-submit-component.ts
@@ -0,0 +1,289 @@
+import { useState } from "react"
+import { toast } from "sonner"
+import { Tables } from "@/types/supabase"
+import { Tag } from "@/types/global"
+import { addVersionToUrl } from "@/lib/utils/url"
+import { addTagsToDemo } from "@/lib/queries"
+import { generateDemoSlug } from "@/components/features/publish-old/hooks/use-is-check-slug-available"
+import { useClerkSupabaseClient } from "@/lib/clerk"
+import { FormData } from "../config/utils"
+import { uploadToR2 } from "@/lib/r2"
+import { useR2Upload } from "@/components/features/publish-old/hooks/use-r2-upload"
+
+type ParsedCodeData = {
+  componentCode: string
+  demoCode: string
+  componentNames: string[]
+  dependencies?: Record<string, string>
+  demoDependencies?: Record<string, string>
+}
+
+export const useSubmitComponent = ({
+  generateRegistry,
+}: {
+  generateRegistry: () => Promise<{
+    componentRegistryJSON: string
+    demoRegistryJSON: string
+  }>
+}) => {
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [isLoadingDialogOpen, setIsLoadingDialogOpen] = useState(false)
+  const [publishProgress, setPublishProgress] = useState("")
+  const [isSuccessDialogOpen, setIsSuccessDialogOpen] = useState(false)
+  const [createdDemoSlug, setCreatedDemoSlug] = useState<string>()
+  const client = useClerkSupabaseClient()
+  const { upload: uploadToR2ClientSide } = useR2Upload()
+
+  const getParsedCode = async () => {
+    const { componentRegistryJSON, demoRegistryJSON } = await generateRegistry()
+
+    const componentRegistry = JSON.parse(componentRegistryJSON)
+    const demoRegistry = JSON.parse(demoRegistryJSON)
+
+    const componentCode = componentRegistry.files[0].content
+    const demoCode = demoRegistry.files[0].content
+
+    return {
+      componentCode,
+      demoCode,
+      componentNames: [componentRegistry.name],
+      dependencies: componentRegistry.dependencies.reduce(
+        (acc: Record<string, string>, dep: string) => {
+          acc[dep] = "latest"
+          return acc
+        },
+        {},
+      ),
+      demoDependencies: demoRegistry.dependencies.reduce(
+        (acc: Record<string, string>, dep: string) => {
+          acc[dep] = "latest"
+          return acc
+        },
+        {},
+      ),
+    }
+  }
+
+  const submitComponent = async (
+    data: FormData,
+    publishAsUser: { id: string; username?: string },
+  ) => {
+    const parsedCode = await getParsedCode()
+    const { componentCode, demoCode, componentNames, dependencies } = parsedCode
+
+    console.log("componentCode", componentCode)
+    console.log("demoCode", demoCode)
+    console.log("componentNames", componentNames)
+    console.log("dependencies", dependencies)
+
+    setIsSubmitting(true)
+    setIsLoadingDialogOpen(true)
+    setPublishProgress("Starting submission...")
+
+    try {
+      if (!publishAsUser?.id) {
+        throw new Error(
+          "Cannot determine user to publish as. Please ensure you are logged in.",
+        )
+      }
+      if (!data.component_slug) {
+        throw new Error("Component slug is required.")
+      }
+      if (!data.demos || data.demos.length === 0) {
+        throw new Error("At least one demo is required.")
+      }
+      const demo = data.demos[0]!
+
+      setPublishProgress("Uploading component files...")
+      const baseFolder = `${publishAsUser.id}/${data.component_slug}`
+
+      const [codeUrl, demoCodeUrl, previewImageR2Url, videoR2Url] =
+        await Promise.all([
+          uploadToR2({
+            file: {
+              name: "code.tsx",
+              type: "text/plain",
+              textContent: componentCode,
+            },
+            fileKey: `${baseFolder}/code.tsx`,
+            bucketName: "components-code",
+          }),
+          uploadToR2({
+            file: {
+              name: "demo.tsx",
+              type: "text/plain",
+              textContent: demoCode,
+            },
+            fileKey: `${baseFolder}/${demo.demo_slug}/code.demo.tsx`,
+            bucketName: "components-code",
+          }),
+          demo.preview_image_file &&
+          demo.preview_image_file.size > 0 &&
+          demo.preview_image_data_url
+            ? uploadToR2({
+                file: {
+                  name: "preview.png",
+                  type: demo.preview_image_file.type,
+                  encodedContent: demo.preview_image_data_url.replace(
+                    /^data:image\/(png|jpeg|jpg);base64,/,
+                    "",
+                  ),
+                },
+                fileKey: `${baseFolder}/${demo.demo_slug}/preview.png`,
+                bucketName: "components-code",
+                contentType: demo.preview_image_file.type,
+              })
+            : Promise.resolve(null),
+          demo.preview_video_file &&
+          demo.preview_video_file.size > 0 &&
+          demo.preview_video_data_url
+            ? uploadToR2ClientSide({
+                file: demo.preview_video_file,
+                fileKey: `${baseFolder}/${demo.demo_slug}/video.mp4`,
+                bucketName: "components-code",
+                contentType: "video/mp4",
+              })
+            : Promise.resolve(null),
+        ])
+
+      console.log("Actual Uploading Results:", {
+        codeUrl,
+        demoCodeUrl,
+        previewImageR2Url,
+        videoR2Url,
+      })
+
+      setPublishProgress("Creating component entry...")
+      const componentData: Omit<
+        Tables<"components">,
+        | "id"
+        | "created_at"
+        | "updated_at"
+        | "embedding"
+        | "embedding_oai"
+        | "fts"
+        | "bookmarks_count"
+        | "compiled_css"
+        | "demo_code"
+        | "demo_direct_registry_dependencies"
+        | "downloads_count"
+        | "likes_count"
+        | "views_count"
+        | "version"
+        | "hunter_username"
+        | "payment_url"
+        | "pro_preview_image_url"
+        | "registry_url"
+      > = {
+        name: data.name,
+        component_names: parsedCode.componentNames,
+        component_slug: data.component_slug,
+        code: addVersionToUrl(codeUrl) || "",
+        tailwind_config_extension: null,
+        global_css_extension: null,
+        description: data.description ?? null,
+        user_id: publishAsUser.id,
+        dependencies: parsedCode.dependencies || {},
+        demo_dependencies: parsedCode.demoDependencies || {},
+        direct_registry_dependencies: data.direct_registry_dependencies || [],
+        preview_url: addVersionToUrl(previewImageR2Url),
+        video_url: addVersionToUrl(videoR2Url),
+        registry: data.registry,
+        license: data.license,
+        website_url: data.website_url || null,
+        is_public: data.is_public,
+        is_paid: data.is_paid || false,
+        price: data.is_paid ? data.price || 5 : 0,
+      }
+
+      // Mock Supabase Component Insert
+      console.log("Mock Inserting Component:", componentData)
+      const insertedComponent = {
+        id: `mock-component-id-${Date.now()}`,
+        ...componentData,
+      }
+      await new Promise((resolve) => setTimeout(resolve, 500)) // Simulate network delay
+
+      if (!data.is_public) {
+        setPublishProgress("Creating submission entry...")
+        console.log(
+          "Mock Inserting Submission for component:",
+          insertedComponent.id,
+        )
+        await new Promise((resolve) => setTimeout(resolve, 200))
+      }
+
+      setPublishProgress("Creating demo entry...")
+      const demoSlug =
+        demo.demo_slug ||
+        (await generateDemoSlug(
+          client,
+          demo.name || "Default",
+          typeof insertedComponent.id === "string"
+            ? parseInt(insertedComponent.id.split("-").pop() || "0")
+            : insertedComponent.id,
+          publishAsUser.id,
+        ))
+      setCreatedDemoSlug(demoSlug)
+
+      const demoData: Omit<
+        Tables<"demos">,
+        | "id"
+        | "created_at"
+        | "updated_at"
+        | "embedding"
+        | "embedding_oai"
+        | "fts"
+        | "bookmarks_count"
+      > = {
+        component_id:
+          typeof insertedComponent.id === "string"
+            ? parseInt(insertedComponent.id.split("-").pop() || "0")
+            : insertedComponent.id,
+        demo_code: addVersionToUrl(demoCodeUrl) || "",
+        demo_dependencies: demo.demo_dependencies || {},
+        preview_url: addVersionToUrl(previewImageR2Url),
+        video_url: addVersionToUrl(videoR2Url),
+        compiled_css: null,
+        pro_preview_image_url: null,
+        name: demo.name || "Default Demo",
+        demo_direct_registry_dependencies:
+          demo.demo_direct_registry_dependencies || null,
+        user_id: publishAsUser.id,
+        demo_slug: demoSlug,
+      }
+
+      console.log("Mock Inserting Demo:", demoData)
+      const insertedDemo = { id: `mock-demo-id-${Date.now()}`, ...demoData }
+      await new Promise((resolve) => setTimeout(resolve, 500))
+
+      if (demo.tags?.length > 0) {
+        setPublishProgress("Adding tags...")
+        console.log("Mock Adding Tags:", demo.tags, "to demo:", insertedDemo.id)
+        await new Promise((resolve) => setTimeout(resolve, 200))
+      }
+
+      setPublishProgress("Done!")
+      setIsSuccessDialogOpen(true)
+    } catch (error) {
+      console.error("Error submitting component:", error)
+      toast.error(
+        `Submission failed: ${error instanceof Error ? error.message : String(error)}`,
+      )
+      setPublishProgress("Submission failed")
+    } finally {
+      setIsSubmitting(false)
+      setTimeout(() => setIsLoadingDialogOpen(false), 1500)
+    }
+  }
+
+  return {
+    isSubmitting,
+    isLoadingDialogOpen,
+    publishProgress,
+    isSuccessDialogOpen,
+    createdDemoSlug,
+    submitComponent,
+    setIsSuccessDialogOpen,
+  }
+}
diff --git a/apps/web/components/features/studio/sandbox/hooks/useFileSystem.ts b/apps/web/components/features/studio/sandbox/hooks/useFileSystem.ts
index dd62b561..10a0dac0 100644
--- a/apps/web/components/features/studio/sandbox/hooks/useFileSystem.ts
+++ b/apps/web/components/features/studio/sandbox/hooks/useFileSystem.ts
@@ -98,10 +98,12 @@ export const useFileSystem = ({
   sandboxRef,
   reconnectSandbox,
   sandboxConnectionHash,
+  connectedShellId,
 }: {
   sandboxRef: RefObject<SandboxSession | null>
   reconnectSandbox: () => Promise<void>
   sandboxConnectionHash: string | null
+  connectedShellId: string | null
 }) => {
   const [files, setFiles] = useState<FileEntry[]>([])
   const [isTreeLoading, setIsTreeLoading] = useState(false)
@@ -289,8 +291,24 @@ export const useFileSystem = ({
     componentRegistryJSON: string
     demoRegistryJSON: string
   }> => {
-    console.log("Generating registry...")
+    if (!connectedShellId) {
+      return new Promise((resolve, reject) => {
+        let counter = 0
+        const interval = setInterval(() => {
+          if (connectedShellId) {
+            clearInterval(interval)
+            generateRegistry().then(resolve).catch(reject)
+          }
+          counter++
+          if (counter > 50) {
+            clearInterval(interval)
+            reject(new Error("Timeout waiting for shell connection"))
+          }
+        }, 1000)
+      })
+    }
 
+    console.log("Generating registry...")
     const task = await sbWrapper((sandbox) =>
       sandbox.tasks.runTask("generate:registry"),
     )

From 9b3bb7f41e8ef3dcd0c4f6ce972d55fa2b0041d2 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Thu, 1 May 2025 01:08:12 +0400
Subject: [PATCH 109/143] renname & update imports

---
 apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx   | 4 ++--
 .../studio/[username]/sandbox/[sandboxId]/publish/page.tsx    | 4 ++--
 .../features/studio/sandbox/components/FileExplorer.tsx       | 2 +-
 .../sandbox/hooks/{useFileSystem.ts => use-file-system.ts}    | 0
 .../studio/sandbox/hooks/{useSandbox.ts => use-sandbox.ts}    | 0
 5 files changed, 5 insertions(+), 5 deletions(-)
 rename apps/web/components/features/studio/sandbox/hooks/{useFileSystem.ts => use-file-system.ts} (100%)
 rename apps/web/components/features/studio/sandbox/hooks/{useSandbox.ts => use-sandbox.ts} (100%)

diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
index 0f6367b9..5dea7dd1 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
@@ -11,11 +11,11 @@ import { FileExplorer } from "@/components/features/studio/sandbox/components/Fi
 import { PreviewPane } from "@/components/features/studio/sandbox/components/PreviewPane"
 import { PublishHeader } from "@/components/features/studio/sandbox/components/PublishHeader"
 import { Loader2Icon } from "lucide-react"
-import { useSandbox } from "@/components/features/studio/sandbox/hooks/useSandbox"
+import { useSandbox } from "@/components/features/studio/sandbox/hooks/use-sandbox"
 import {
   useFileSystem,
   type FileEntry,
-} from "@/components/features/studio/sandbox/hooks/useFileSystem"
+} from "@/components/features/studio/sandbox/hooks/use-file-system"
 
 const DEFAULT_FILE_ENTRY: FileEntry = {
   name: "component.tsx",
diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
index 5e9f00ac..1d5d837b 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
@@ -25,8 +25,8 @@ import { FormData } from "@/components/features/studio/publish/config/utils"
 import { useSubmitComponent } from "@/components/features/studio/publish/hooks/use-submit-component"
 
 import { cn } from "@/lib/utils"
-import { useSandbox } from "@/components/features/studio/sandbox/hooks/useSandbox"
-import { useFileSystem } from "@/components/features/studio/sandbox/hooks/useFileSystem"
+import { useSandbox } from "@/components/features/studio/sandbox/hooks/use-sandbox"
+import { useFileSystem } from "@/components/features/studio/sandbox/hooks/use-file-system"
 import { usePublishAs } from "@/components/features/publish-old/hooks/use-publish-as"
 
 type FormStep = "detailedForm"
diff --git a/apps/web/components/features/studio/sandbox/components/FileExplorer.tsx b/apps/web/components/features/studio/sandbox/components/FileExplorer.tsx
index 108ec8aa..ececde58 100644
--- a/apps/web/components/features/studio/sandbox/components/FileExplorer.tsx
+++ b/apps/web/components/features/studio/sandbox/components/FileExplorer.tsx
@@ -14,7 +14,7 @@ interface FileEntry {
   children?: FileEntry[]
 }
 */
-import { FileEntry } from "../hooks/useFileSystem"
+import { FileEntry } from "../hooks/use-file-system"
 import {
   PlusIcon,
   RefreshCwIcon,
diff --git a/apps/web/components/features/studio/sandbox/hooks/useFileSystem.ts b/apps/web/components/features/studio/sandbox/hooks/use-file-system.ts
similarity index 100%
rename from apps/web/components/features/studio/sandbox/hooks/useFileSystem.ts
rename to apps/web/components/features/studio/sandbox/hooks/use-file-system.ts
diff --git a/apps/web/components/features/studio/sandbox/hooks/useSandbox.ts b/apps/web/components/features/studio/sandbox/hooks/use-sandbox.ts
similarity index 100%
rename from apps/web/components/features/studio/sandbox/hooks/useSandbox.ts
rename to apps/web/components/features/studio/sandbox/hooks/use-sandbox.ts

From ba835a0c93c3e8c4db1b6dc93b18038671e4fdf2 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Thu, 1 May 2025 02:31:07 +0400
Subject: [PATCH 110/143] refactor: simplify useSubmitComponent and update
 submit logic

---
 .../sandbox/[sandboxId]/publish/page.tsx      |  12 +-
 .../components/forms/component-form.tsx       |   9 +-
 .../publish/hooks/use-submit-component.ts     | 133 +++++++++++++-----
 3 files changed, 113 insertions(+), 41 deletions(-)

diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
index 1d5d837b..7976ec0f 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
@@ -126,7 +126,7 @@ const PublishPage = () => {
     createdDemoSlug,
     submitComponent,
     setIsSuccessDialogOpen,
-  } = useSubmitComponent({ generateRegistry })
+  } = useSubmitComponent()
 
   const handleAccordionChange = useCallback((value: string[]) => {
     setOpenAccordion(value)
@@ -145,9 +145,13 @@ const PublishPage = () => {
       )
       return
     }
-    submitComponent(data, {
-      id: publishAsUser.id,
-      username: publishAsUser.username || undefined,
+    submitComponent({
+      data,
+      publishAsUser: {
+        id: publishAsUser.id,
+        username: publishAsUser.username || undefined,
+      },
+      generateRegistry,
     })
   }
 
diff --git a/apps/web/components/features/studio/publish/components/forms/component-form.tsx b/apps/web/components/features/studio/publish/components/forms/component-form.tsx
index 13d6641d..be7a7ac2 100644
--- a/apps/web/components/features/studio/publish/components/forms/component-form.tsx
+++ b/apps/web/components/features/studio/publish/components/forms/component-form.tsx
@@ -1,4 +1,4 @@
-import { useState, useId, ChangeEvent } from "react"
+import { useState, useId, ChangeEvent, useEffect } from "react"
 import { UseFormReturn, useController } from "react-hook-form"
 import { Label } from "@/components/ui/label"
 import { Textarea } from "@/components/ui/textarea"
@@ -101,6 +101,13 @@ export const ComponentForm = ({
     rules: { required: true },
   })
 
+  useEffect(() => {
+    if (!isSlugManuallyEdited && nameField.value) {
+      const newSlug = makeSlugFromName(nameField.value)
+      form.setValue("component_slug", newSlug)
+    }
+  }, [nameField.value, isSlugManuallyEdited, form])
+
   return (
     <div className="flex flex-col gap-4 w-full">
       <div className="grid grid-cols-2 gap-4">
diff --git a/apps/web/components/features/studio/publish/hooks/use-submit-component.ts b/apps/web/components/features/studio/publish/hooks/use-submit-component.ts
index 71f1db9f..a65743c0 100644
--- a/apps/web/components/features/studio/publish/hooks/use-submit-component.ts
+++ b/apps/web/components/features/studio/publish/hooks/use-submit-component.ts
@@ -18,14 +18,7 @@ type ParsedCodeData = {
   demoDependencies?: Record<string, string>
 }
 
-export const useSubmitComponent = ({
-  generateRegistry,
-}: {
-  generateRegistry: () => Promise<{
-    componentRegistryJSON: string
-    demoRegistryJSON: string
-  }>
-}) => {
+export const useSubmitComponent = () => {
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [isLoadingDialogOpen, setIsLoadingDialogOpen] = useState(false)
   const [publishProgress, setPublishProgress] = useState("")
@@ -34,7 +27,12 @@ export const useSubmitComponent = ({
   const client = useClerkSupabaseClient()
   const { upload: uploadToR2ClientSide } = useR2Upload()
 
-  const getParsedCode = async () => {
+  const getParsedCode = async (
+    generateRegistry: () => Promise<{
+      componentRegistryJSON: string
+      demoRegistryJSON: string
+    }>,
+  ) => {
     const { componentRegistryJSON, demoRegistryJSON } = await generateRegistry()
 
     const componentRegistry = JSON.parse(componentRegistryJSON)
@@ -64,11 +62,19 @@ export const useSubmitComponent = ({
     }
   }
 
-  const submitComponent = async (
-    data: FormData,
-    publishAsUser: { id: string; username?: string },
-  ) => {
-    const parsedCode = await getParsedCode()
+  const submitComponent = async ({
+    data,
+    publishAsUser,
+    generateRegistry,
+  }: {
+    data: FormData
+    publishAsUser: { id: string; username?: string }
+    generateRegistry: () => Promise<{
+      componentRegistryJSON: string
+      demoRegistryJSON: string
+    }>
+  }) => {
+    const parsedCode = await getParsedCode(generateRegistry)
     const { componentCode, demoCode, componentNames, dependencies } = parsedCode
 
     console.log("componentCode", componentCode)
@@ -197,20 +203,45 @@ export const useSubmitComponent = ({
       }
 
       // Mock Supabase Component Insert
-      console.log("Mock Inserting Component:", componentData)
-      const insertedComponent = {
-        id: `mock-component-id-${Date.now()}`,
-        ...componentData,
+      // console.log("Mock Inserting Component:", componentData)
+      // const insertedComponent = {
+      //   id: `mock-component-id-${Date.now()}`,
+      //   ...componentData,
+      // }
+      // await new Promise((resolve) => setTimeout(resolve, 500)) // Simulate network delay
+      const { data: insertedComponent, error: componentError } = await client
+        .from("components")
+        .insert(componentData)
+        .select()
+        .single()
+
+      if (componentError) {
+        console.error("Error inserting component:", componentError)
+        throw componentError
+      }
+      if (!insertedComponent) {
+        throw new Error("Failed to insert component, no data returned.")
       }
-      await new Promise((resolve) => setTimeout(resolve, 500)) // Simulate network delay
 
       if (!data.is_public) {
         setPublishProgress("Creating submission entry...")
-        console.log(
-          "Mock Inserting Submission for component:",
-          insertedComponent.id,
-        )
-        await new Promise((resolve) => setTimeout(resolve, 200))
+        // console.log(
+        //   "Mock Inserting Submission for component:",
+        //   insertedComponent.id,
+        // )
+        // await new Promise((resolve) => setTimeout(resolve, 200))
+        const { error: submissionError } = await client
+          .from("submissions")
+          .insert({
+            component_id: insertedComponent.id,
+            status: "on_review",
+          })
+        if (submissionError) {
+          console.error("Error inserting submission:", submissionError)
+          // Decide if this should be a fatal error - potentially rollback or just log?
+          // For now, we throw to indicate failure.
+          throw submissionError
+        }
       }
 
       setPublishProgress("Creating demo entry...")
@@ -219,15 +250,15 @@ export const useSubmitComponent = ({
         (await generateDemoSlug(
           client,
           demo.name || "Default",
-          typeof insertedComponent.id === "string"
-            ? parseInt(insertedComponent.id.split("-").pop() || "0")
-            : insertedComponent.id,
+          insertedComponent.id, // Use the actual ID
           publishAsUser.id,
         ))
       setCreatedDemoSlug(demoSlug)
 
       const demoData: Omit<
         Tables<"demos">,
+        // Keep the omissions consistent with your original type definition if needed
+        // For simplicity, only omitting ID and audit stamps here, adjust as per your exact schema/type
         | "id"
         | "created_at"
         | "updated_at"
@@ -236,10 +267,7 @@ export const useSubmitComponent = ({
         | "fts"
         | "bookmarks_count"
       > = {
-        component_id:
-          typeof insertedComponent.id === "string"
-            ? parseInt(insertedComponent.id.split("-").pop() || "0")
-            : insertedComponent.id,
+        component_id: insertedComponent.id, // Use the actual ID
         demo_code: addVersionToUrl(demoCodeUrl) || "",
         demo_dependencies: demo.demo_dependencies || {},
         preview_url: addVersionToUrl(previewImageR2Url),
@@ -253,18 +281,51 @@ export const useSubmitComponent = ({
         demo_slug: demoSlug,
       }
 
-      console.log("Mock Inserting Demo:", demoData)
-      const insertedDemo = { id: `mock-demo-id-${Date.now()}`, ...demoData }
-      await new Promise((resolve) => setTimeout(resolve, 500))
+      // Mock Inserting Demo
+      // console.log("Mock Inserting Demo:", demoData)
+      // const insertedDemo = { id: `mock-demo-id-${Date.now()}`, ...demoData }
+      // await new Promise((resolve) => setTimeout(resolve, 500))
+      const { data: insertedDemo, error: demoError } = await client
+        .from("demos")
+        .insert(demoData)
+        .select()
+        .single()
+
+      if (demoError) {
+        console.error("Error inserting demo:", demoError)
+        // Consider rollback logic if component insert succeeded but demo failed
+        throw demoError
+      }
+      if (!insertedDemo) {
+        throw new Error("Failed to insert demo, no data returned.")
+      }
 
       if (demo.tags?.length > 0) {
         setPublishProgress("Adding tags...")
-        console.log("Mock Adding Tags:", demo.tags, "to demo:", insertedDemo.id)
-        await new Promise((resolve) => setTimeout(resolve, 200))
+        // console.log("Mock Adding Tags:", demo.tags, "to demo:", insertedDemo.id)
+        // await new Promise((resolve) => setTimeout(resolve, 200))
+        await addTagsToDemo(
+          client,
+          insertedDemo.id, // Use the actual ID
+          demo.tags.filter((tag): tag is Tag => !!tag && !!tag.slug) as Tag[], // Ensure tags are valid
+        )
+        // addTagsToDemo likely has its own error handling, but you might want to add more here
       }
 
       setPublishProgress("Done!")
       setIsSuccessDialogOpen(true)
+
+      // Log newly inserted/updated rows
+      console.log("Newly inserted component:", insertedComponent)
+      console.log("Newly inserted demo:", insertedDemo)
+      if (!data.is_public) {
+        const { data: submission } = await client
+          .from("submissions")
+          .select()
+          .eq("component_id", insertedComponent.id)
+          .single()
+        console.log("Newly inserted submission:", submission)
+      }
     } catch (error) {
       console.error("Error submitting component:", error)
       toast.error(

From 04d15fa8927595558facdd92fa386b01a9d63ff6 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Thu, 1 May 2025 12:25:24 +0400
Subject: [PATCH 111/143] upload with preview

---
 .../sandbox/[sandboxId]/publish/page.tsx      |   3 +-
 .../component-page/component-preview.tsx      |   9 +-
 .../publish/hooks/use-submit-component.ts     | 154 ++++++++------
 .../studio/sandbox/hooks/use-file-system.ts   | 190 +++++++++++++-----
 apps/web/lib/codesandbox-sdk.ts               |   2 +-
 5 files changed, 242 insertions(+), 116 deletions(-)

diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
index 7976ec0f..3d2da267 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
@@ -49,7 +49,7 @@ const PublishPage = () => {
   } = useSandbox({
     sandboxId,
   })
-  const { generateRegistry } = useFileSystem({
+  const { generateRegistry, bundleDemo } = useFileSystem({
     sandboxRef: sandboxRef,
     reconnectSandbox: reconnectSandbox,
     sandboxConnectionHash: sandboxConnectionHash,
@@ -152,6 +152,7 @@ const PublishPage = () => {
         username: publishAsUser.username || undefined,
       },
       generateRegistry,
+      bundleDemo,
     })
   }
 
diff --git a/apps/web/components/features/component-page/component-preview.tsx b/apps/web/components/features/component-page/component-preview.tsx
index 0932c7f3..88e7b61c 100644
--- a/apps/web/components/features/component-page/component-preview.tsx
+++ b/apps/web/components/features/component-page/component-preview.tsx
@@ -334,9 +334,14 @@ export function ComponentPagePreview({
             <LoadingSpinner text={loadingText} />
           </div>
         )}
-        {bundle?.html && demo?.bundle_hash !== "0" && (
+        {(demo.bundle_html_url ||
+          (bundle?.html && demo?.bundle_hash !== "0")) && (
           <iframe
-            src={isDarkTheme ? `${bundle?.html}?dark=true` : bundle?.html}
+            src={
+              isDarkTheme
+                ? `${demo.bundle_html_url || bundle?.html}?dark=true`
+                : demo.bundle_html_url || bundle?.html
+            }
             className="w-full h-full"
             onLoad={() => {
               setIsLoading(false)
diff --git a/apps/web/components/features/studio/publish/hooks/use-submit-component.ts b/apps/web/components/features/studio/publish/hooks/use-submit-component.ts
index a65743c0..66ca4713 100644
--- a/apps/web/components/features/studio/publish/hooks/use-submit-component.ts
+++ b/apps/web/components/features/studio/publish/hooks/use-submit-component.ts
@@ -27,13 +27,11 @@ export const useSubmitComponent = () => {
   const client = useClerkSupabaseClient()
   const { upload: uploadToR2ClientSide } = useR2Upload()
 
-  const getParsedCode = async (
-    generateRegistry: () => Promise<{
-      componentRegistryJSON: string
-      demoRegistryJSON: string
-    }>,
-  ) => {
-    const { componentRegistryJSON, demoRegistryJSON } = await generateRegistry()
+  const getParsedCode = async (registryResult: {
+    componentRegistryJSON: string
+    demoRegistryJSON: string
+  }) => {
+    const { componentRegistryJSON, demoRegistryJSON } = registryResult
 
     const componentRegistry = JSON.parse(componentRegistryJSON)
     const demoRegistry = JSON.parse(demoRegistryJSON)
@@ -66,17 +64,34 @@ export const useSubmitComponent = () => {
     data,
     publishAsUser,
     generateRegistry,
+    bundleDemo,
   }: {
     data: FormData
     publishAsUser: { id: string; username?: string }
-    generateRegistry: () => Promise<{
-      componentRegistryJSON: string
-      demoRegistryJSON: string
-    }>
+    generateRegistry: () => Promise<
+      | {
+          componentRegistryJSON: string
+          demoRegistryJSON: string
+        }
+      | undefined
+    >
+    bundleDemo: () => Promise<string | undefined>
   }) => {
-    const parsedCode = await getParsedCode(generateRegistry)
+    const resultOfGenerateRegistry = await generateRegistry()
+    if (!resultOfGenerateRegistry) {
+      toast.error("Failed to bundle component; Please try again.")
+      return
+    }
+    const parsedCode = await getParsedCode(resultOfGenerateRegistry)
     const { componentCode, demoCode, componentNames, dependencies } = parsedCode
 
+    const bundleDemoResult = await bundleDemo()
+    if (!bundleDemoResult) {
+      toast.error("Failed to bundle component; Please try again.")
+      return
+    }
+    const contentOfHtml = bundleDemoResult
+
     console.log("componentCode", componentCode)
     console.log("demoCode", demoCode)
     console.log("componentNames", componentNames)
@@ -101,62 +116,78 @@ export const useSubmitComponent = () => {
       const demo = data.demos[0]!
 
       setPublishProgress("Uploading component files...")
-      const baseFolder = `${publishAsUser.id}/${data.component_slug}`
+      const baseFolder = `${publishAsUser.username}/${data.component_slug}`
 
-      const [codeUrl, demoCodeUrl, previewImageR2Url, videoR2Url] =
-        await Promise.all([
-          uploadToR2({
-            file: {
-              name: "code.tsx",
-              type: "text/plain",
-              textContent: componentCode,
-            },
-            fileKey: `${baseFolder}/code.tsx`,
-            bucketName: "components-code",
-          }),
-          uploadToR2({
-            file: {
-              name: "demo.tsx",
-              type: "text/plain",
-              textContent: demoCode,
-            },
-            fileKey: `${baseFolder}/${demo.demo_slug}/code.demo.tsx`,
-            bucketName: "components-code",
-          }),
-          demo.preview_image_file &&
-          demo.preview_image_file.size > 0 &&
-          demo.preview_image_data_url
-            ? uploadToR2({
-                file: {
-                  name: "preview.png",
-                  type: demo.preview_image_file.type,
-                  encodedContent: demo.preview_image_data_url.replace(
-                    /^data:image\/(png|jpeg|jpg);base64,/,
-                    "",
-                  ),
-                },
-                fileKey: `${baseFolder}/${demo.demo_slug}/preview.png`,
-                bucketName: "components-code",
-                contentType: demo.preview_image_file.type,
-              })
-            : Promise.resolve(null),
-          demo.preview_video_file &&
-          demo.preview_video_file.size > 0 &&
-          demo.preview_video_data_url
-            ? uploadToR2ClientSide({
-                file: demo.preview_video_file,
-                fileKey: `${baseFolder}/${demo.demo_slug}/video.mp4`,
-                bucketName: "components-code",
-                contentType: "video/mp4",
-              })
-            : Promise.resolve(null),
-        ])
+      const [
+        codeUrl,
+        demoCodeUrl,
+        previewImageR2Url,
+        videoR2Url,
+        bundleHtmlUrl,
+      ] = await Promise.all([
+        uploadToR2({
+          file: {
+            name: "code.tsx",
+            type: "text/plain",
+            textContent: componentCode,
+          },
+          fileKey: `${baseFolder}/code.tsx`,
+          bucketName: "components-code",
+        }),
+        uploadToR2({
+          file: {
+            name: "demo.tsx",
+            type: "text/plain",
+            textContent: demoCode,
+          },
+          fileKey: `${baseFolder}/${demo.demo_slug}/code.demo.tsx`,
+          bucketName: "components-code",
+        }),
+        demo.preview_image_file &&
+        demo.preview_image_file.size > 0 &&
+        demo.preview_image_data_url
+          ? uploadToR2({
+              file: {
+                name: "preview.png",
+                type: demo.preview_image_file.type,
+                encodedContent: demo.preview_image_data_url.replace(
+                  /^data:image\/(png|jpeg|jpg);base64,/,
+                  "",
+                ),
+              },
+              fileKey: `${baseFolder}/${demo.demo_slug}/preview.png`,
+              bucketName: "components-code",
+              contentType: demo.preview_image_file.type,
+            })
+          : Promise.resolve(null),
+        demo.preview_video_file &&
+        demo.preview_video_file.size > 0 &&
+        demo.preview_video_data_url
+          ? uploadToR2ClientSide({
+              file: demo.preview_video_file,
+              fileKey: `${baseFolder}/${demo.demo_slug}/video.mp4`,
+              bucketName: "components-code",
+              contentType: "video/mp4",
+            })
+          : Promise.resolve(null),
+        uploadToR2({
+          file: {
+            name: "bundle.html",
+            type: "text/html",
+            textContent: contentOfHtml,
+          },
+          fileKey: `${baseFolder}/${demo.demo_slug}/bundle.html`,
+          bucketName: "components-code",
+          contentType: "text/html",
+        }),
+      ])
 
       console.log("Actual Uploading Results:", {
         codeUrl,
         demoCodeUrl,
         previewImageR2Url,
         videoR2Url,
+        bundleHtmlUrl,
       })
 
       setPublishProgress("Creating component entry...")
@@ -279,6 +310,7 @@ export const useSubmitComponent = () => {
           demo.demo_direct_registry_dependencies || null,
         user_id: publishAsUser.id,
         demo_slug: demoSlug,
+        bundle_html_url: bundleHtmlUrl,
       }
 
       // Mock Inserting Demo
diff --git a/apps/web/components/features/studio/sandbox/hooks/use-file-system.ts b/apps/web/components/features/studio/sandbox/hooks/use-file-system.ts
index 10a0dac0..ab7121f9 100644
--- a/apps/web/components/features/studio/sandbox/hooks/use-file-system.ts
+++ b/apps/web/components/features/studio/sandbox/hooks/use-file-system.ts
@@ -108,7 +108,6 @@ export const useFileSystem = ({
   const [files, setFiles] = useState<FileEntry[]>([])
   const [isTreeLoading, setIsTreeLoading] = useState(false)
   const [isFileLoading, setIsFileLoading] = useState(false)
-  const [isCompiling, setIsCompiling] = useState(false)
   const [advancedView, setAdvancedView] = useState(false)
   const debounceRef = useRef<NodeJS.Timeout | null>(null)
 
@@ -286,99 +285,188 @@ export const useFileSystem = ({
     setAdvancedView((prev) => !prev)
   }
 
-  // Function to compile the project into a shadcn registry
-  const generateRegistry = async (): Promise<{
-    componentRegistryJSON: string
-    demoRegistryJSON: string
-  }> => {
-    if (!connectedShellId) {
+  // Helper function to run a task, wait for specific output, and execute a callback
+  const _runTaskAndWaitForOutput = async <T>(
+    taskName: string,
+    completionOutput: string,
+    onComplete: (shell: any, sandbox: SandboxSession) => Promise<T | undefined>,
+  ): Promise<T | undefined> => {
+    // Guranties that the sandbox is connected
+    if (!sandboxConnectionHash) {
       return new Promise((resolve, reject) => {
         let counter = 0
         const interval = setInterval(() => {
-          if (connectedShellId) {
+          if (sandboxConnectionHash) {
             clearInterval(interval)
-            generateRegistry().then(resolve).catch(reject)
+            _runTaskAndWaitForOutput(taskName, completionOutput, onComplete)
+              .then(resolve)
+              .catch(reject)
           }
           counter++
           if (counter > 50) {
             clearInterval(interval)
-            reject(new Error("Timeout waiting for shell connection"))
+            reject(new Error("Timeout waiting for sandbox connection"))
           }
         }, 1000)
       })
     }
 
-    console.log("Generating registry...")
-    const task = await sbWrapper((sandbox) =>
-      sandbox.tasks.runTask("generate:registry"),
-    )
-    setIsCompiling(true)
+    console.log(`Starting ${taskName} task...`)
+    if (!sandboxRef.current) {
+      throw new Error("Sandbox not available")
+    }
+    const task = await sandboxRef.current.tasks.runTask(taskName)
+
+    if (!task) {
+      throw new Error(`Failed to start ${taskName} task`)
+    }
 
-    console.log("Task:", task)
+    console.log(`${taskName} Task:`, task)
 
-    return new Promise<{
-      componentRegistryJSON: string
-      demoRegistryJSON: string
-    }>((resolve, reject) => {
+    return new Promise<T | undefined>((resolve, reject) => {
       let counter = 0
       const interval = setInterval(async () => {
-        const shells = await sandboxRef.current?.shells.getShells()
-        const shell = shells?.find((shell) => shell.id === task?.shellId)
-
-        if (!shell) {
+        if (!task?.shellId) {
           counter++
-          if (counter > 35) {
+          if (counter > 50) {
             clearInterval(interval)
-            reject(new Error("Shell not found"))
+            reject(new Error(`Timeout waiting for ${taskName} shellId`))
           }
           return
         }
 
-        const connectedShell = await sandboxRef.current?.shells.open(shell.id)
+        let connectedShell
+        try {
+          if (!sandboxRef.current) {
+            throw new Error("Sandbox disconnected while waiting for shell")
+          }
+          connectedShell = await sandboxRef.current.shells.open(task.shellId)
+        } catch (error) {
+          console.error(`Failed to open shell for ${taskName}:`, error)
+          counter++
+          if (counter > 50) {
+            clearInterval(interval)
+            reject(new Error(`Timeout connecting to ${taskName} shell`))
+          }
+          return
+        }
 
         if (connectedShell) {
           clearInterval(interval)
+
+          let outputTimeout: NodeJS.Timeout | null = null
+          const disposeShellAndClearTimeout = () => {
+            if (outputTimeout) clearTimeout(outputTimeout)
+            connectedShell?.dispose()
+          }
+
           connectedShell.onOutput(async (data) => {
-            if (data.includes("FINISH")) {
-              setIsCompiling(false)
+            console.log(`${taskName} Output:`, data)
+            if (data.includes(completionOutput)) {
+              console.log(
+                `${taskName} finished, executing onComplete callback...`,
+              )
               try {
-                const componentRegistryJSON =
-                  await getContentOfComponentRegistryJSON()
-                const demoRegistryJSON = await getContentOfDemoRegistryJSON()
-                connectedShell.dispose()
-                if (!componentRegistryJSON || !demoRegistryJSON) {
-                  throw new Error("Failed to generate registry")
+                if (!sandboxRef.current) {
+                  throw new Error("Sandbox disconnected before onComplete")
                 }
-                resolve({ componentRegistryJSON, demoRegistryJSON })
+                const result = await onComplete(
+                  connectedShell,
+                  sandboxRef.current,
+                )
+                console.log(`${taskName} onComplete finished successfully.`)
+                disposeShellAndClearTimeout()
+                resolve(result)
               } catch (error) {
+                console.error(`Error during ${taskName} onComplete:`, error)
+                disposeShellAndClearTimeout()
                 reject(error)
               }
             }
           })
-        }
 
-        counter++
-        if (counter > 50) {
-          clearInterval(interval)
-          reject(new Error("Timeout"))
+          outputTimeout = setTimeout(() => {
+            console.error(`Timeout waiting for '${completionOutput}' message.`)
+            disposeShellAndClearTimeout()
+            reject(new Error(`${taskName}: Timeout waiting for output`))
+          }, 120000) // Increased timeout to 120 seconds
+
+          // Wrap resolve/reject to clear timeout
+          const originalResolve = resolve
+          resolve = (value) => {
+            disposeShellAndClearTimeout()
+            originalResolve(value)
+          }
+          const originalReject = reject
+          reject = (reason) => {
+            disposeShellAndClearTimeout()
+            originalReject(reason)
+          }
+        } else {
+          counter++
+          if (counter > 50) {
+            clearInterval(interval)
+            reject(new Error(`Timeout connecting to ${taskName} shell`))
+          }
         }
       }, 1000)
     })
   }
 
-  const getContentOfComponentRegistryJSON = async () => {
-    const registryJsonPath = normalizePath("public/r/component.json")
-    const content = await sbWrapper((sandbox) =>
-      sandbox.fs.readTextFile(registryJsonPath),
+  const bundleDemo = async (): Promise<string | undefined> => {
+    return _runTaskAndWaitForOutput<string>(
+      "build",
+      "built in",
+      async (shell, sandbox) => {
+        const content = await getContentOfBundleIndexHTML(sandbox)
+        if (!content) {
+          throw new Error("Failed to read dist/index.html")
+        }
+        return content
+      },
     )
+  }
+
+  // Function to compile the project into a shadcn registry
+  const generateRegistry = async (): Promise<
+    | {
+        componentRegistryJSON: string
+        demoRegistryJSON: string
+      }
+    | undefined
+  > => {
+    return _runTaskAndWaitForOutput<
+      | {
+          componentRegistryJSON: string
+          demoRegistryJSON: string
+        }
+      | undefined
+    >("generate:registry", "FINISH", async (shell, sandbox) => {
+      const componentRegistryJSON =
+        await getContentOfComponentRegistryJSON(sandbox)
+      const demoRegistryJSON = await getContentOfDemoRegistryJSON(sandbox)
+      if (!componentRegistryJSON || !demoRegistryJSON) {
+        throw new Error("Failed to read generated registry files")
+      }
+      return { componentRegistryJSON, demoRegistryJSON }
+    })
+  }
+
+  const getContentOfBundleIndexHTML = async (sandbox: SandboxSession) => {
+    const indexPath = normalizePath("dist/index.html")
+    const content = await sandbox.fs.readTextFile(indexPath)
     return content
   }
 
-  const getContentOfDemoRegistryJSON = async () => {
+  const getContentOfComponentRegistryJSON = async (sandbox: SandboxSession) => {
+    const registryJsonPath = normalizePath("public/r/component.json")
+    const content = await sandbox.fs.readTextFile(registryJsonPath)
+    return content
+  }
+
+  const getContentOfDemoRegistryJSON = async (sandbox: SandboxSession) => {
     const registryJsonPath = normalizePath("public/r/demo.json")
-    const content = await sbWrapper((sandbox) =>
-      sandbox.fs.readTextFile(registryJsonPath),
-    )
+    const content = await sandbox.fs.readTextFile(registryJsonPath)
     return content
   }
 
@@ -386,7 +474,6 @@ export const useFileSystem = ({
     files,
     isTreeLoading,
     isFileLoading,
-    isCompiling,
     advancedView,
     toggleAdvancedView,
     loadRootDirectory,
@@ -399,7 +486,8 @@ export const useFileSystem = ({
     addDependencyToPackageJson,
     // registry
     generateRegistry,
-    // getContentOfComponentRegistryJSON,
+    bundleDemo,
+    // getContentOfComponentRegistryJSON, // Keep these private
     // getContentOfDemoRegistryJSON,
   }
 }
diff --git a/apps/web/lib/codesandbox-sdk.ts b/apps/web/lib/codesandbox-sdk.ts
index 2dd5d2a8..ed7f2a78 100644
--- a/apps/web/lib/codesandbox-sdk.ts
+++ b/apps/web/lib/codesandbox-sdk.ts
@@ -5,7 +5,7 @@ export const codesandboxSdk = new CodeSandbox(process.env.CSB_API_KEY!)
 export const DEFAULT_TEMPLATE = "21st-vite"
 
 export const TEMPLATES = {
-  "21st-vite": "mwmkcv",
+  "21st-vite": "d5t2cg",
 }
 
 export const DEFAULT_HIBERNATION_TIMEOUT = 60

From 079f8a074c6ae4acad1089deccc01478405c3394 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Thu, 1 May 2025 15:43:55 +0400
Subject: [PATCH 112/143] add some stuff

---
 apps/web/app/api/sandbox/connect/route.ts     |   2 +-
 .../sandbox/[sandboxId]/publish/page.tsx      | 261 ++++++++++------
 .../publish/hooks/use-component-data.ts       | 110 +++++++
 .../publish/hooks/use-submit-component.ts     | 290 +++++++++++++-----
 .../sandbox/components/PublishHeader.tsx      |   8 +-
 .../studio/sandbox/hooks/use-sandbox.ts       |   8 +-
 apps/web/types/supabase.ts                    |  19 ++
 7 files changed, 519 insertions(+), 179 deletions(-)
 create mode 100644 apps/web/components/features/studio/publish/hooks/use-component-data.ts

diff --git a/apps/web/app/api/sandbox/connect/route.ts b/apps/web/app/api/sandbox/connect/route.ts
index a5c690cf..718ff119 100644
--- a/apps/web/app/api/sandbox/connect/route.ts
+++ b/apps/web/app/api/sandbox/connect/route.ts
@@ -27,7 +27,7 @@ export async function POST(request: Request) {
 
     const { data: sandbox, error } = await supabaseWithAdminAccess
       .from("sandboxes")
-      .select("codesandbox_id, name")
+      .select("codesandbox_id, name, id, component_id")
       .eq("id", sandboxId)
       .eq("user_id", userId)
       .single()
diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
index 3d2da267..8609fd45 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
@@ -17,12 +17,14 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion"
 import { LoadingDialog } from "@/components/ui/loading-dialog"
+import { Skeleton } from "@/components/ui/skeleton"
 
 import { ComponentForm } from "@/components/features/studio/publish/components/forms/component-form"
 import { DemoDetailsForm } from "@/components/features/studio/publish/components/forms/demo-form"
 import { SuccessDialog } from "@/components/features/publish-old/components/success-dialog"
 import { FormData } from "@/components/features/studio/publish/config/utils"
 import { useSubmitComponent } from "@/components/features/studio/publish/hooks/use-submit-component"
+import { useComponentData } from "@/components/features/studio/publish/hooks/use-component-data"
 
 import { cn } from "@/lib/utils"
 import { useSandbox } from "@/components/features/studio/sandbox/hooks/use-sandbox"
@@ -46,9 +48,15 @@ const PublishPage = () => {
     reconnectSandbox,
     connectedShellId,
     sandboxConnectionHash,
+    serverSandbox,
   } = useSandbox({
     sandboxId,
   })
+
+  // Fetch component data if sandbox is linked to a component
+  const { isLoading: isComponentDataLoading, formData: componentFormData } =
+    useComponentData(serverSandbox?.component_id)
+
   const { generateRegistry, bundleDemo } = useFileSystem({
     sandboxRef: sandboxRef,
     reconnectSandbox: reconnectSandbox,
@@ -57,6 +65,8 @@ const PublishPage = () => {
   })
   const { user } = useUser()
 
+  console.log("serverSandbox", serverSandbox)
+
   // useEffect(() => {
   //   if (!connectedShellId) return
 
@@ -83,7 +93,7 @@ const PublishPage = () => {
       description: "",
       license: "mit",
       website_url: "",
-      is_public: true,
+      is_public: false,
       publish_as_username: user?.username ?? undefined,
       is_paid: false,
       price: 0,
@@ -107,6 +117,26 @@ const PublishPage = () => {
     },
   })
 
+  // Update form with component data when available
+  useEffect(() => {
+    if (componentFormData && !isComponentDataLoading) {
+      form.reset({
+        ...componentFormData,
+        publish_as_username:
+          user?.username ?? componentFormData.publish_as_username,
+      })
+
+      // Open all demo accordions
+      if (componentFormData.demos.length > 0) {
+        const newOpenAccordion = ["component-info"]
+        componentFormData.demos.forEach((_, index) => {
+          newOpenAccordion.push(`demo-${index}`)
+        })
+        setOpenAccordion(newOpenAccordion)
+      }
+    }
+  }, [componentFormData, isComponentDataLoading, form, user?.username])
+
   const publishAsUsername = form.watch("publish_as_username")
   const { user: publishAsUser } = usePublishAs({
     username: publishAsUsername ?? user?.username ?? "",
@@ -153,6 +183,7 @@ const PublishPage = () => {
       },
       generateRegistry,
       bundleDemo,
+      sandboxId: serverSandbox!.id,
     })
   }
 
@@ -182,128 +213,156 @@ const PublishPage = () => {
     setOpenAccordion(["component-info", "demo-0"])
   }
 
+  if (!serverSandbox?.id) {
+    return (
+      <div>
+        <h1>Loader lol</h1>
+      </div>
+    )
+  }
+
   return (
     <>
       <div className="flex justify-between items-center p-4 border-b">
         <Button variant="outline"> {"< "} Back to edit</Button>
-        <Button onClick={() => handleSubmit()} disabled={isSubmitting}>
-          {isSubmitting ? "Submitting..." : "Send to review"}
-        </Button>
+        <div className="flex items-center gap-2">
+          {serverSandbox?.component_id ? (
+            <Badge variant="outline" className="mr-2">
+              Editing existing component
+            </Badge>
+          ) : (
+            <Badge variant="outline" className="mr-2">
+              Creating new component
+            </Badge>
+          )}
+          <Button onClick={() => handleSubmit()} disabled={isSubmitting}>
+            {isSubmitting ? "Submitting..." : "Send to review"}
+          </Button>
+        </div>
       </div>
       <Form {...form}>
         <div className="flex flex-col h-screen w-full">
           <div className="flex h-[calc(100vh-3.5rem)]">
             <div className="border-r pointer-events-auto transition-[width] duration-300 max-h-screen overflow-y-auto w-1/3">
               <div className="w-full flex flex-col gap-4 overflow-y-auto p-4">
-                <div className="space-y-4 p-[2px]">
-                  <Accordion
-                    type="multiple"
-                    value={openAccordion}
-                    onValueChange={handleAccordionChange}
-                    className="w-full"
-                  >
-                    <AccordionItem value="component-info">
-                      <AccordionTrigger className="py-2 text-[15px] leading-6 hover:no-underline hover:bg-muted/50 rounded-md data-[state=open]:rounded-b-none transition-all duration-200 ease-in-out -mx-2 px-2">
-                        <div className="flex items-center gap-2">
-                          Component info
-                          <Badge
-                            variant="outline"
-                            className={cn(
-                              "gap-1.5 text-xs font-medium",
-                              isComponentInfoComplete()
-                                ? "border-emerald-500/20"
-                                : "border-amber-500/20",
-                            )}
-                          >
-                            <span
+                {isComponentDataLoading ? (
+                  <div className="space-y-4">
+                    <Skeleton className="h-10 w-full" />
+                    <Skeleton className="h-24 w-full" />
+                    <Skeleton className="h-10 w-full" />
+                    <Skeleton className="h-24 w-full" />
+                  </div>
+                ) : (
+                  <div className="space-y-4 p-[2px]">
+                    <Accordion
+                      type="multiple"
+                      value={openAccordion}
+                      onValueChange={handleAccordionChange}
+                      className="w-full"
+                    >
+                      <AccordionItem value="component-info">
+                        <AccordionTrigger className="py-2 text-[15px] leading-6 hover:no-underline hover:bg-muted/50 rounded-md data-[state=open]:rounded-b-none transition-all duration-200 ease-in-out -mx-2 px-2">
+                          <div className="flex items-center gap-2">
+                            Component info
+                            <Badge
+                              variant="outline"
                               className={cn(
-                                "size-1.5 rounded-full",
+                                "gap-1.5 text-xs font-medium",
                                 isComponentInfoComplete()
-                                  ? "bg-emerald-500"
-                                  : "bg-amber-500",
+                                  ? "border-emerald-500/20"
+                                  : "border-amber-500/20",
                               )}
-                              aria-hidden="true"
-                            />
-                            {isComponentInfoComplete()
-                              ? "Complete"
-                              : "Required"}
-                          </Badge>
-                        </div>
-                      </AccordionTrigger>
-                      <AccordionContent className="text-muted-foreground pt-4">
-                        <div className="text-foreground">
-                          <ComponentForm
-                            form={form as any}
-                            handleSubmit={handleSubmit}
-                            isSubmitting={isSubmitting}
-                            hotkeysEnabled={!isSuccessDialogOpen}
-                          />
-                        </div>
-                      </AccordionContent>
-                    </AccordionItem>
-
-                    {form.getValues().demos?.map((demo, index) => (
-                      <AccordionItem
-                        key={index}
-                        value={`demo-${index}`}
-                        className="bg-background border-none group"
-                      >
-                        <AccordionTrigger className="py-2 text-[15px] leading-6 hover:no-underline hover:bg-muted/50 rounded-md data-[state=open]:rounded-b-none transition-all duration-200 ease-in-out -mx-2 px-2">
-                          <div className="flex items-center gap-2 w-full">
-                            <div className="flex items-center gap-2 flex-1 min-w-0 overflow-hidden">
-                              <div className="truncate flex-shrink min-w-0">
-                                {demo.name || `Demo ${index + 1}`}
-                              </div>
-                              <Badge
-                                variant="outline"
+                            >
+                              <span
                                 className={cn(
-                                  "gap-1.5 text-xs font-medium shrink-0",
-                                  demo.name && demo.demo_code
-                                    ? "border-emerald-500/20"
-                                    : "border-amber-500/20",
+                                  "size-1.5 rounded-full",
+                                  isComponentInfoComplete()
+                                    ? "bg-emerald-500"
+                                    : "bg-amber-500",
                                 )}
-                              >
-                                <span
-                                  className={cn(
-                                    "size-1.5 rounded-full",
-                                    demo.name && demo.demo_code
-                                      ? "bg-emerald-500"
-                                      : "bg-amber-500",
-                                  )}
-                                  aria-hidden="true"
-                                />
-                                {demo.name && demo.demo_code
-                                  ? "Complete"
-                                  : "Required"}
-                              </Badge>
-                            </div>
-                            {form.getValues().demos.length > 1 && (
-                              <Button
-                                variant="ghost"
-                                size="icon"
-                                className="opacity-0 group-hover:opacity-100 transition-opacity h-8 w-8 ml-auto mr-1 shrink-0"
-                                onClick={(e) => {
-                                  e.stopPropagation()
-                                  console.log("Delete demo:", index)
-                                }}
-                              >
-                                <Trash2 className="h-4 w-4 text-muted-foreground hover:text-destructive transition-colors" />
-                              </Button>
-                            )}
+                                aria-hidden="true"
+                              />
+                              {isComponentInfoComplete()
+                                ? "Complete"
+                                : "Required"}
+                            </Badge>
                           </div>
                         </AccordionTrigger>
-                        <AccordionContent className="pt-4">
-                          <div className="text-foreground space-y-4">
-                            <DemoDetailsForm
+                        <AccordionContent className="text-muted-foreground pt-4">
+                          <div className="text-foreground">
+                            <ComponentForm
                               form={form as any}
-                              demoIndex={index}
+                              handleSubmit={handleSubmit}
+                              isSubmitting={isSubmitting}
+                              hotkeysEnabled={!isSuccessDialogOpen}
                             />
                           </div>
                         </AccordionContent>
                       </AccordionItem>
-                    ))}
-                  </Accordion>
-                </div>
+
+                      {form.getValues().demos?.map((demo, index) => (
+                        <AccordionItem
+                          key={index}
+                          value={`demo-${index}`}
+                          className="bg-background border-none group"
+                        >
+                          <AccordionTrigger className="py-2 text-[15px] leading-6 hover:no-underline hover:bg-muted/50 rounded-md data-[state=open]:rounded-b-none transition-all duration-200 ease-in-out -mx-2 px-2">
+                            <div className="flex items-center gap-2 w-full">
+                              <div className="flex items-center gap-2 flex-1 min-w-0 overflow-hidden">
+                                <div className="truncate flex-shrink min-w-0">
+                                  {demo.name || `Demo ${index + 1}`}
+                                </div>
+                                <Badge
+                                  variant="outline"
+                                  className={cn(
+                                    "gap-1.5 text-xs font-medium shrink-0",
+                                    demo.name && demo.demo_code
+                                      ? "border-emerald-500/20"
+                                      : "border-amber-500/20",
+                                  )}
+                                >
+                                  <span
+                                    className={cn(
+                                      "size-1.5 rounded-full",
+                                      demo.name && demo.demo_code
+                                        ? "bg-emerald-500"
+                                        : "bg-amber-500",
+                                    )}
+                                    aria-hidden="true"
+                                  />
+                                  {demo.name && demo.demo_code
+                                    ? "Complete"
+                                    : "Required"}
+                                </Badge>
+                              </div>
+                              {form.getValues().demos.length > 1 && (
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="opacity-0 group-hover:opacity-100 transition-opacity h-8 w-8 ml-auto mr-1 shrink-0"
+                                  onClick={(e) => {
+                                    e.stopPropagation()
+                                    console.log("Delete demo:", index)
+                                  }}
+                                >
+                                  <Trash2 className="h-4 w-4 text-muted-foreground hover:text-destructive transition-colors" />
+                                </Button>
+                              )}
+                            </div>
+                          </AccordionTrigger>
+                          <AccordionContent className="pt-4">
+                            <div className="text-foreground space-y-4">
+                              <DemoDetailsForm
+                                form={form as any}
+                                demoIndex={index}
+                              />
+                            </div>
+                          </AccordionContent>
+                        </AccordionItem>
+                      ))}
+                    </Accordion>
+                  </div>
+                )}
               </div>
             </div>
 
diff --git a/apps/web/components/features/studio/publish/hooks/use-component-data.ts b/apps/web/components/features/studio/publish/hooks/use-component-data.ts
new file mode 100644
index 00000000..45358051
--- /dev/null
+++ b/apps/web/components/features/studio/publish/hooks/use-component-data.ts
@@ -0,0 +1,110 @@
+import { useEffect, useState } from "react"
+import { toast } from "sonner"
+import { FormData } from "../config/utils"
+import { createSupabaseClerkClient, useClerkSupabaseClient } from "@/lib/clerk"
+import { Database } from "@/types/supabase"
+
+type Tag = {
+  id?: number
+  name: string
+  slug: string
+}
+
+export const useComponentData = (componentId: string | null | undefined) => {
+  const [isLoading, setIsLoading] = useState(false)
+  const [formData, setFormData] = useState<FormData | null>(null)
+  const client = useClerkSupabaseClient()
+
+  useEffect(() => {
+    const fetchComponentData = async () => {
+      if (!componentId) {
+        setFormData(null)
+        return
+      }
+
+      setIsLoading(true)
+      try {
+        // Fetch component data
+        const { data: componentData, error: componentError } = await client
+          .from("components")
+          .select("*")
+          .eq("id", componentId)
+          .single()
+
+        if (componentError) throw componentError
+
+        // Fetch demo data
+        const { data: demosData, error: demosError } = await client
+          .from("demos")
+          .select("*")
+          .eq("component_id", componentId)
+          .order("created_at", { ascending: true })
+
+        if (demosError) throw demosError
+
+        // Fetch tags for each demo
+        const demoWithTags = await Promise.all(
+          demosData.map(
+            async (demo: Database["public"]["Tables"]["demos"]["Row"]) => {
+              const { data: tagsData, error: tagsError } = await client
+                .from("demo_tags")
+                .select("tags(*)")
+                .eq("demo_id", demo.id)
+
+              if (tagsError) {
+                console.error("Error fetching tags:", tagsError)
+                return { ...demo, tags: [] }
+              }
+
+              const tags = tagsData.map((tagItem: any) => tagItem.tags)
+              return { ...demo, tags }
+            },
+          ),
+        )
+
+        // Transform data to match FormData structure
+        const transformedData: FormData = {
+          name: componentData.name,
+          component_slug: componentData.component_slug,
+          registry: componentData.registry,
+          description: componentData.description || "",
+          license: componentData.license,
+          website_url: componentData.website_url || "",
+          is_public: componentData.is_public,
+          is_paid: componentData.is_paid,
+          price: componentData.price,
+          publish_as_username: undefined, // Will be set by main component
+          code: "", // Will be populated by sandbox
+          unknown_dependencies: [],
+          direct_registry_dependencies:
+            componentData.direct_registry_dependencies || [],
+          demos: demoWithTags.map((demo: any) => ({
+            name: demo.name,
+            demo_code: "", // Will be populated by sandbox
+            demo_slug: demo.demo_slug,
+            tags: demo.tags || [],
+            preview_image_data_url: demo.preview_url || "",
+            preview_image_file: undefined,
+            preview_video_data_url: demo.video_url || "",
+            preview_video_file: undefined,
+            demo_direct_registry_dependencies:
+              demo.demo_direct_registry_dependencies || [],
+            demo_dependencies: demo.demo_dependencies || {},
+          })),
+        }
+
+        setFormData(transformedData)
+      } catch (error) {
+        console.error("Error fetching component data:", error)
+        toast.error("Failed to load component data")
+        setFormData(null)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchComponentData()
+  }, [componentId, client])
+
+  return { isLoading, formData }
+}
diff --git a/apps/web/components/features/studio/publish/hooks/use-submit-component.ts b/apps/web/components/features/studio/publish/hooks/use-submit-component.ts
index 66ca4713..3eb7f310 100644
--- a/apps/web/components/features/studio/publish/hooks/use-submit-component.ts
+++ b/apps/web/components/features/studio/publish/hooks/use-submit-component.ts
@@ -65,6 +65,7 @@ export const useSubmitComponent = () => {
     publishAsUser,
     generateRegistry,
     bundleDemo,
+    sandboxId,
   }: {
     data: FormData
     publishAsUser: { id: string; username?: string }
@@ -76,7 +77,11 @@ export const useSubmitComponent = () => {
       | undefined
     >
     bundleDemo: () => Promise<string | undefined>
+    sandboxId: string
   }) => {
+    setIsSubmitting(true)
+    setIsLoadingDialogOpen(true)
+    setPublishProgress("Bundling component...")
     const resultOfGenerateRegistry = await generateRegistry()
     if (!resultOfGenerateRegistry) {
       toast.error("Failed to bundle component; Please try again.")
@@ -97,9 +102,8 @@ export const useSubmitComponent = () => {
     console.log("componentNames", componentNames)
     console.log("dependencies", dependencies)
 
-    setIsSubmitting(true)
-    setIsLoadingDialogOpen(true)
-    setPublishProgress("Starting submission...")
+    let componentIdToUse: string | null = null
+    let existingDemoId: string | null = null
 
     try {
       if (!publishAsUser?.id) {
@@ -107,6 +111,9 @@ export const useSubmitComponent = () => {
           "Cannot determine user to publish as. Please ensure you are logged in.",
         )
       }
+      if (!sandboxId) {
+        throw new Error("Sandbox ID is required.")
+      }
       if (!data.component_slug) {
         throw new Error("Component slug is required.")
       }
@@ -115,6 +122,48 @@ export const useSubmitComponent = () => {
       }
       const demo = data.demos[0]!
 
+      console.log("BEFORE DATA sandboxId", sandboxId)
+
+      // 1. Check if sandbox is already linked to a component
+      setPublishProgress("Checking sandbox status...")
+      const { data: sandboxData, error: sandboxError } = await client
+        .from("sandboxes")
+        .select("component_id")
+        .eq("id", sandboxId)
+        .maybeSingle()
+
+      if (sandboxError) {
+        console.error("Error fetching sandbox:", sandboxError)
+        throw new Error(
+          `Failed to fetch sandbox details: ${sandboxError.message}`,
+        )
+      }
+
+      if (sandboxData?.component_id) {
+        componentIdToUse = sandboxData.component_id
+        setPublishProgress("Found existing component link. Preparing update...")
+        // Optionally fetch the existing demo ID if needed for update logic
+        const { data: existingDemoData, error: demoFetchError } = await client
+          .from("demos")
+          .select("id")
+          .eq("component_id", componentIdToUse)
+          .order("created_at", { ascending: true }) // Get the first demo
+          .limit(1)
+          .single()
+
+        if (demoFetchError && demoFetchError.code !== "PGRST116") {
+          // Ignore 'not found' error
+          console.error("Error fetching existing demo:", demoFetchError)
+          // Decide how to handle this - fail, or proceed to create a new demo?
+          // For now, let's proceed assuming we might create a new one if needed, or update logic handles null demoId
+        }
+        existingDemoId = existingDemoData?.id ?? null
+      } else {
+        setPublishProgress(
+          "No existing component link found. Preparing creation...",
+        )
+      }
+
       setPublishProgress("Uploading component files...")
       const baseFolder = `${publishAsUser.username}/${data.component_slug}`
 
@@ -190,7 +239,11 @@ export const useSubmitComponent = () => {
         bundleHtmlUrl,
       })
 
-      setPublishProgress("Creating component entry...")
+      setPublishProgress(
+        componentIdToUse
+          ? "Updating component entry..."
+          : "Creating component entry...",
+      )
       const componentData: Omit<
         Tables<"components">,
         | "id"
@@ -231,65 +284,135 @@ export const useSubmitComponent = () => {
         is_public: data.is_public,
         is_paid: data.is_paid || false,
         price: data.is_paid ? data.price || 5 : 0,
+        sandbox_id: sandboxId,
       }
 
-      // Mock Supabase Component Insert
-      // console.log("Mock Inserting Component:", componentData)
-      // const insertedComponent = {
-      //   id: `mock-component-id-${Date.now()}`,
-      //   ...componentData,
-      // }
-      // await new Promise((resolve) => setTimeout(resolve, 500)) // Simulate network delay
-      const { data: insertedComponent, error: componentError } = await client
-        .from("components")
-        .insert(componentData)
-        .select()
-        .single()
-
-      if (componentError) {
-        console.error("Error inserting component:", componentError)
-        throw componentError
-      }
-      if (!insertedComponent) {
-        throw new Error("Failed to insert component, no data returned.")
+      let finalComponent: Tables<"components"> | null = null
+
+      if (componentIdToUse) {
+        // Update existing component
+        const { data: updatedComponent, error: updateComponentError } =
+          await client
+            .from("components")
+            .update(componentData)
+            .eq("id", componentIdToUse)
+            .select()
+            .single()
+
+        if (updateComponentError) {
+          console.error("Error updating component:", updateComponentError)
+          throw updateComponentError
+        }
+        if (!updatedComponent) {
+          throw new Error("Failed to update component, no data returned.")
+        }
+        finalComponent = updatedComponent
+        console.log("Successfully updated component:", finalComponent)
+      } else {
+        // Insert new component
+        const { data: insertedComponent, error: insertComponentError } =
+          await client
+            .from("components")
+            .insert(componentData)
+            .select()
+            .single()
+
+        if (insertComponentError) {
+          console.error("Error inserting component:", insertComponentError)
+          throw insertComponentError
+        }
+        if (!insertedComponent) {
+          throw new Error("Failed to insert component, no data returned.")
+        }
+        finalComponent = insertedComponent
+        componentIdToUse = String(finalComponent!.id) // Convert number to string and assert non-null
+        console.log("Successfully created component:", finalComponent)
+
+        // Link sandbox to the new component
+        setPublishProgress("Linking sandbox to new component...")
+        const { error: updateSandboxError } = await client
+          .from("sandboxes")
+          .update({ component_id: componentIdToUse })
+          .eq("id", sandboxId)
+
+        if (updateSandboxError) {
+          console.error("Error updating sandbox link:", updateSandboxError)
+          // Non-fatal? Log error and continue? Or throw?
+          // Let's log and continue for now, but this might need review
+          toast.warning("Failed to link sandbox to the new component.")
+        } else {
+          console.log(
+            `Sandbox ${sandboxId} linked to component ${componentIdToUse}`,
+          )
+        }
+
+        // Handle submission entry only for new, non-public components
+        if (!data.is_public) {
+          setPublishProgress("Creating submission entry...")
+          const { error: submissionError } = await client
+            .from("submissions")
+            .insert({
+              component_id: componentIdToUse,
+              status: "on_review",
+            })
+          if (submissionError) {
+            console.error("Error inserting submission:", submissionError)
+            throw submissionError // Throw as this seems critical for review process
+          }
+          console.log(
+            "Submission entry created for component:",
+            componentIdToUse,
+          )
+        }
+      } // End of create/update component block
+
+      // Ensure we have a component ID before proceeding to demo
+      if (!componentIdToUse) {
+        throw new Error("Component ID is missing after create/update.")
       }
 
-      if (!data.is_public) {
-        setPublishProgress("Creating submission entry...")
-        // console.log(
-        //   "Mock Inserting Submission for component:",
-        //   insertedComponent.id,
-        // )
-        // await new Promise((resolve) => setTimeout(resolve, 200))
-        const { error: submissionError } = await client
-          .from("submissions")
-          .insert({
-            component_id: insertedComponent.id,
-            status: "on_review",
-          })
-        if (submissionError) {
-          console.error("Error inserting submission:", submissionError)
-          // Decide if this should be a fatal error - potentially rollback or just log?
-          // For now, we throw to indicate failure.
-          throw submissionError
+      console.log("-------------")
+      console.log("-------------")
+      console.log("-------------")
+      console.log("-------------")
+      console.log("------WURUP-------")
+      console.log("sandboxData", sandboxData)
+      console.log("componentIdToUse", componentIdToUse)
+
+      // Ensure the sandbox is linked to the component
+      if (!sandboxData?.component_id) {
+        setPublishProgress("Updating sandbox link...")
+        const { error: updateSandboxError } = await client
+          .from("sandboxes")
+          .update({ component_id: componentIdToUse })
+          .eq("id", sandboxId)
+
+        if (updateSandboxError) {
+          console.error("Error updating sandbox link:", updateSandboxError)
+          toast.warning("Failed to update sandbox component link.")
+        } else {
+          console.log(
+            `Sandbox ${sandboxId} link updated with component ${componentIdToUse}`,
+          )
         }
       }
 
-      setPublishProgress("Creating demo entry...")
+      // Prepare Demo Data (common for create/update)
+      setPublishProgress(
+        existingDemoId ? "Updating demo entry..." : "Creating demo entry...",
+      )
       const demoSlug =
         demo.demo_slug ||
         (await generateDemoSlug(
           client,
           demo.name || "Default",
-          insertedComponent.id, // Use the actual ID
+          Number(componentIdToUse), // Convert string to number for generateDemoSlug
           publishAsUser.id,
         ))
       setCreatedDemoSlug(demoSlug)
 
       const demoData: Omit<
         Tables<"demos">,
-        // Keep the omissions consistent with your original type definition if needed
-        // For simplicity, only omitting ID and audit stamps here, adjust as per your exact schema/type
         | "id"
         | "created_at"
         | "updated_at"
@@ -298,7 +421,7 @@ export const useSubmitComponent = () => {
         | "fts"
         | "bookmarks_count"
       > = {
-        component_id: insertedComponent.id, // Use the actual ID
+        component_id: Number(componentIdToUse), // Convert string to number for demoData
         demo_code: addVersionToUrl(demoCodeUrl) || "",
         demo_dependencies: demo.demo_dependencies || {},
         preview_url: addVersionToUrl(previewImageR2Url),
@@ -313,48 +436,71 @@ export const useSubmitComponent = () => {
         bundle_html_url: bundleHtmlUrl,
       }
 
-      // Mock Inserting Demo
-      // console.log("Mock Inserting Demo:", demoData)
-      // const insertedDemo = { id: `mock-demo-id-${Date.now()}`, ...demoData }
-      // await new Promise((resolve) => setTimeout(resolve, 500))
-      const { data: insertedDemo, error: demoError } = await client
-        .from("demos")
-        .insert(demoData)
-        .select()
-        .single()
-
-      if (demoError) {
-        console.error("Error inserting demo:", demoError)
-        // Consider rollback logic if component insert succeeded but demo failed
-        throw demoError
+      let finalDemo: Tables<"demos"> | null = null
+
+      if (existingDemoId) {
+        // Update existing demo
+        const { data: updatedDemo, error: updateDemoError } = await client
+          .from("demos")
+          .update(demoData)
+          .eq("id", existingDemoId)
+          .select()
+          .single()
+
+        if (updateDemoError) {
+          console.error("Error updating demo:", updateDemoError)
+          throw updateDemoError
+        }
+        if (!updatedDemo) {
+          throw new Error("Failed to update demo, no data returned.")
+        }
+        finalDemo = updatedDemo
+        console.log("Successfully updated demo:", finalDemo)
+      } else {
+        // Insert new demo
+        const { data: insertedDemo, error: insertDemoError } = await client
+          .from("demos")
+          .insert(demoData)
+          .select()
+          .single()
+
+        if (insertDemoError) {
+          console.error("Error inserting demo:", insertDemoError)
+          throw insertDemoError
+        }
+        if (!insertedDemo) {
+          throw new Error("Failed to insert demo, no data returned.")
+        }
+        finalDemo = insertedDemo
+        console.log("Successfully created demo:", finalDemo)
       }
-      if (!insertedDemo) {
-        throw new Error("Failed to insert demo, no data returned.")
+
+      if (!finalDemo) {
+        throw new Error("Demo operation failed.") // Should not happen if errors above are thrown
       }
 
       if (demo.tags?.length > 0) {
-        setPublishProgress("Adding tags...")
-        // console.log("Mock Adding Tags:", demo.tags, "to demo:", insertedDemo.id)
-        // await new Promise((resolve) => setTimeout(resolve, 200))
+        setPublishProgress("Updating tags...")
         await addTagsToDemo(
           client,
-          insertedDemo.id, // Use the actual ID
+          finalDemo.id, // Use the final demo ID
           demo.tags.filter((tag): tag is Tag => !!tag && !!tag.slug) as Tag[], // Ensure tags are valid
         )
-        // addTagsToDemo likely has its own error handling, but you might want to add more here
+        console.log("Tags updated for demo:", finalDemo.id)
       }
 
       setPublishProgress("Done!")
       setIsSuccessDialogOpen(true)
 
-      // Log newly inserted/updated rows
-      console.log("Newly inserted component:", insertedComponent)
-      console.log("Newly inserted demo:", insertedDemo)
-      if (!data.is_public) {
+      // Log final state
+      console.log("Final component state:", finalComponent!)
+      console.log("Final demo state:", finalDemo!)
+      if (!data.is_public && !existingDemoId) {
+        // Only log submission if it was newly created
         const { data: submission } = await client
           .from("submissions")
           .select()
-          .eq("component_id", insertedComponent.id)
+          .eq("component_id", componentIdToUse)
           .single()
         console.log("Newly inserted submission:", submission)
       }
diff --git a/apps/web/components/features/studio/sandbox/components/PublishHeader.tsx b/apps/web/components/features/studio/sandbox/components/PublishHeader.tsx
index 13e2c67a..8794dfda 100644
--- a/apps/web/components/features/studio/sandbox/components/PublishHeader.tsx
+++ b/apps/web/components/features/studio/sandbox/components/PublishHeader.tsx
@@ -147,7 +147,7 @@ export function PublishHeader({
         )}
         <div className="ml-auto flex items-center gap-2">
           <Button onClick={handleNextStep}>Next step</Button>
-          <Button
+          {/* <Button
             onClick={onGenerateRegistry}
             disabled={isRegenerating}
             className="gap-2"
@@ -158,8 +158,8 @@ export function PublishHeader({
               <ArchiveIcon className="h-4 w-4" />
             )}
             {isRegenerating ? "Generating registry..." : "Generate registry"}
-          </Button>
-          <Button
+          </Button> */}
+          {/* <Button
             size="sm"
             onClick={handlePublish}
             disabled={isLoading}
@@ -171,7 +171,7 @@ export function PublishHeader({
               <RocketIcon className="h-4 w-4" />
             )}
             Publish
-          </Button>
+          </Button> */}
         </div>
       </div>
       {params.username && (
diff --git a/apps/web/components/features/studio/sandbox/hooks/use-sandbox.ts b/apps/web/components/features/studio/sandbox/hooks/use-sandbox.ts
index a130625e..6ec4eecf 100644
--- a/apps/web/components/features/studio/sandbox/hooks/use-sandbox.ts
+++ b/apps/web/components/features/studio/sandbox/hooks/use-sandbox.ts
@@ -3,13 +3,19 @@ import { connectToSandbox as connectToCodeSandboxSDK } from "@codesandbox/sdk/br
 import { useEffect, useRef, useState } from "react"
 import { connectToSandbox } from "../api"
 import { getLatestPackageVersionFromError } from "../utils/dependencies"
+import { Tables } from "@/types/supabase"
+
+type ServerSandbox = Pick<
+  Tables<"sandboxes">,
+  "codesandbox_id" | "name" | "id" | "component_id"
+> | null
 
 export const useSandbox = ({ sandboxId }: { sandboxId: string }) => {
   const sandboxRef = useRef<SandboxSession | null>(null)
   const [sandboxConnectionHash, setSandboxConnectionHash] = useState<
     string | null
   >(null)
-  const [serverSandbox, setServerSandbox] = useState<any>(null)
+  const [serverSandbox, setServerSandbox] = useState<ServerSandbox>(null)
   const [connectedShellId, setConnectedShellId] = useState<string>("")
   const [previewURL, setPreviewURL] = useState<string | null>(null)
   const [isSandboxLoading, setIsSandboxLoading] = useState(true)
diff --git a/apps/web/types/supabase.ts b/apps/web/types/supabase.ts
index 71df6213..61975c45 100644
--- a/apps/web/types/supabase.ts
+++ b/apps/web/types/supabase.ts
@@ -527,6 +527,7 @@ export type Database = {
           user_id: string
           video_url: string | null
           website_url: string | null
+          sandbox_id: string | null
         }
         Insert: {
           code?: string
@@ -561,6 +562,7 @@ export type Database = {
           user_id: string
           video_url?: string | null
           website_url?: string | null
+          sandbox_id?: string | null
         }
         Update: {
           code?: string
@@ -595,6 +597,7 @@ export type Database = {
           user_id?: string
           video_url?: string | null
           website_url?: string | null
+          sandbox_id?: string | null
         }
         Relationships: [
           {
@@ -653,6 +656,13 @@ export type Database = {
             referencedRelation: "users"
             referencedColumns: ["id"]
           },
+          {
+            foreignKeyName: "components_sandbox_id_fkey"
+            columns: ["sandbox_id"]
+            isOneToOne: false
+            referencedRelation: "sandbox"
+            referencedColumns: ["id"]
+          },
         ]
       }
       components_purchases: {
@@ -1479,6 +1489,7 @@ export type Database = {
           status: string | null
           updated_at: string
           user_id: string
+          component_id: string | null
         }
         Insert: {
           codesandbox_id?: string | null
@@ -1488,6 +1499,7 @@ export type Database = {
           status?: string | null
           updated_at?: string
           user_id: string
+          component_id?: string | null
         }
         Update: {
           codesandbox_id?: string | null
@@ -1497,6 +1509,7 @@ export type Database = {
           status?: string | null
           updated_at?: string
           user_id?: string
+          component_id?: string | null
         }
         Relationships: [
           {
@@ -1513,6 +1526,12 @@ export type Database = {
             referencedRelation: "users"
             referencedColumns: ["id"]
           },
+          {
+            foreignKeyName: "sandbox_component_id_fkey"
+            columns: ["component_id"]
+            isOneToOne: false
+            referencedRelation: "components"
+          },
         ]
       }
       submissions: {

From e5507029e2845714fcd64fd343f3461b0f792622 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Thu, 1 May 2025 17:03:23 +0400
Subject: [PATCH 113/143] feat: add onSuccess callback to publish logic and
 improve file system output handling

---
 .../studio/[username]/sandbox/[sandboxId]/publish/page.tsx    | 3 +++
 .../features/studio/publish/hooks/use-submit-component.ts     | 3 +++
 .../features/studio/sandbox/hooks/use-file-system.ts          | 4 +++-
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
index 8609fd45..19052e5a 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
@@ -184,6 +184,9 @@ const PublishPage = () => {
       generateRegistry,
       bundleDemo,
       sandboxId: serverSandbox!.id,
+      onSuccess: () => {
+        reconnectSandbox()
+      },
     })
   }
 
diff --git a/apps/web/components/features/studio/publish/hooks/use-submit-component.ts b/apps/web/components/features/studio/publish/hooks/use-submit-component.ts
index 3eb7f310..a90ffd34 100644
--- a/apps/web/components/features/studio/publish/hooks/use-submit-component.ts
+++ b/apps/web/components/features/studio/publish/hooks/use-submit-component.ts
@@ -66,6 +66,7 @@ export const useSubmitComponent = () => {
     generateRegistry,
     bundleDemo,
     sandboxId,
+    onSuccess,
   }: {
     data: FormData
     publishAsUser: { id: string; username?: string }
@@ -78,6 +79,7 @@ export const useSubmitComponent = () => {
     >
     bundleDemo: () => Promise<string | undefined>
     sandboxId: string
+    onSuccess: () => void
   }) => {
     setIsSubmitting(true)
     setIsLoadingDialogOpen(true)
@@ -512,6 +514,7 @@ export const useSubmitComponent = () => {
       setPublishProgress("Submission failed")
     } finally {
       setIsSubmitting(false)
+      onSuccess()
       setTimeout(() => setIsLoadingDialogOpen(false), 1500)
     }
   }
diff --git a/apps/web/components/features/studio/sandbox/hooks/use-file-system.ts b/apps/web/components/features/studio/sandbox/hooks/use-file-system.ts
index ab7121f9..0c0f71c2 100644
--- a/apps/web/components/features/studio/sandbox/hooks/use-file-system.ts
+++ b/apps/web/components/features/studio/sandbox/hooks/use-file-system.ts
@@ -362,7 +362,9 @@ export const useFileSystem = ({
 
           connectedShell.onOutput(async (data) => {
             console.log(`${taskName} Output:`, data)
-            if (data.includes(completionOutput)) {
+            // listening for finsih word and not echo (to prevent return from first stateng)
+            //  eg: npm run build && echo "FINISH"
+            if (data.includes(completionOutput) && !data.includes("echo")) {
               console.log(
                 `${taskName} finished, executing onComplete callback...`,
               )

From 522eb88590c6b8b6a7f4da5b132ee5832b058675 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Thu, 1 May 2025 21:31:18 +0300
Subject: [PATCH 114/143] table and sidebar

---
 .../web/app/studio/[username]/page.client.tsx | 10 ++--------
 .../features/studio/sandbox/index.ts          |  1 -
 .../features/studio/studio-layout.tsx         |  3 +--
 .../features/studio/ui/studio-sidebar.tsx     | 19 +++++++++++++++++--
 4 files changed, 20 insertions(+), 13 deletions(-)
 delete mode 100644 apps/web/components/features/studio/sandbox/index.ts

diff --git a/apps/web/app/studio/[username]/page.client.tsx b/apps/web/app/studio/[username]/page.client.tsx
index d0becce2..c68e8fcf 100644
--- a/apps/web/app/studio/[username]/page.client.tsx
+++ b/apps/web/app/studio/[username]/page.client.tsx
@@ -51,14 +51,8 @@ export function StudioUsernameClient({
     <StudioLayout user={user}>
       <div className="space-y-6">
         <div className="flex flex-row items-center justify-between">
-          <div className="flex items-center gap-3">
-            <Link
-              href="/studio"
-              className="text-muted-foreground hover:text-foreground"
-            >
-              <ArrowLeft className="h-4 w-4" />
-            </Link>
-            <h1 className="text-xl font-bold">Studio</h1>
+          <div className="flex items-center">
+            <h1 className="text-xl font-bold">Components</h1>
           </div>
 
           {(isOwnProfile || isAdmin) && (
diff --git a/apps/web/components/features/studio/sandbox/index.ts b/apps/web/components/features/studio/sandbox/index.ts
deleted file mode 100644
index 49840316..00000000
--- a/apps/web/components/features/studio/sandbox/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-// put some helpers code here
diff --git a/apps/web/components/features/studio/studio-layout.tsx b/apps/web/components/features/studio/studio-layout.tsx
index f741a730..0d1ce3ef 100644
--- a/apps/web/components/features/studio/studio-layout.tsx
+++ b/apps/web/components/features/studio/studio-layout.tsx
@@ -14,8 +14,7 @@ interface StudioLayoutProps {
 export function StudioLayout({ user, children }: StudioLayoutProps) {
   return (
     <div className="min-h-screen flex flex-col">
-      <Header />
-      <div className="flex-1 pt-14">
+      <div className="flex-1">
         <SidebarProvider defaultOpen={true}>
           <StudioSidebar user={user} />
           <SidebarInset className="p-8">{children}</SidebarInset>
diff --git a/apps/web/components/features/studio/ui/studio-sidebar.tsx b/apps/web/components/features/studio/ui/studio-sidebar.tsx
index 287c70c9..dddb820f 100644
--- a/apps/web/components/features/studio/ui/studio-sidebar.tsx
+++ b/apps/web/components/features/studio/ui/studio-sidebar.tsx
@@ -5,7 +5,14 @@ import { usePathname } from "next/navigation"
 import { cn } from "@/lib/utils"
 import { UserAvatar } from "@/components/ui/user-avatar"
 import { User } from "@/types/global"
-import { BarChartBig, CreditCard, Layers } from "lucide-react"
+import {
+  BarChartBig,
+  CreditCard,
+  Layers,
+  Home,
+  Settings,
+  ArrowLeft,
+} from "lucide-react"
 import {
   Sidebar,
   SidebarContent,
@@ -109,10 +116,18 @@ export function StudioSidebar({ user }: StudioSidebarProps) {
       <SidebarFooter className="border-t">
         <Link
           href="/settings/profile"
-          className="flex w-full items-center gap-2 p-3 text-sm text-muted-foreground hover:text-foreground rounded-md hover:bg-muted"
+          className="flex w-full items-center gap-2 h-9 px-4 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-md"
         >
+          <Settings className="h-4 w-4" />
           <span>Settings</span>
         </Link>
+        <Link
+          href="/"
+          className="flex w-full items-center gap-2 h-9 px-4 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-md"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          <span>Back to 21st.dev</span>
+        </Link>
       </SidebarFooter>
     </Sidebar>
   )

From 13890b022bab73f5ac0c57d583a08514225d701e Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Thu, 1 May 2025 21:37:06 +0300
Subject: [PATCH 115/143] create button

---
 .../web/app/studio/[username]/page.client.tsx | 25 +++++++++++----
 .../features/studio/ui/components-table.tsx   | 32 +++----------------
 2 files changed, 23 insertions(+), 34 deletions(-)

diff --git a/apps/web/app/studio/[username]/page.client.tsx b/apps/web/app/studio/[username]/page.client.tsx
index c68e8fcf..6c36e3df 100644
--- a/apps/web/app/studio/[username]/page.client.tsx
+++ b/apps/web/app/studio/[username]/page.client.tsx
@@ -11,6 +11,8 @@ import { useRouter, usePathname } from "next/navigation"
 import { createNewSandbox } from "@/components/features/studio/sandbox/api"
 import { useState } from "react"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Spinner } from "@/components/icons/spinner"
+import { cn } from "@/lib/utils"
 
 interface StudioUsernameClientProps {
   user: User
@@ -56,13 +58,24 @@ export function StudioUsernameClient({
           </div>
 
           {(isOwnProfile || isAdmin) && (
-            <Button onClick={handleCreateNewSandbox} disabled={isCreating}>
-              {isCreating ? (
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-              ) : (
-                <PlusCircle className="mr-2 h-4 w-4" />
+            <Button
+              onClick={handleCreateNewSandbox}
+              disabled={isCreating}
+              className={cn(
+                "transition-[width] duration-200",
+                isCreating ? "w-[120px]" : "w-[80px]",
               )}
-              Create new component
+            >
+              <div className="flex items-center gap-2 justify-center w-full">
+                {isCreating ? (
+                  <>
+                    <Spinner size={16} color="white" />
+                    <span>Creating...</span>
+                  </>
+                ) : (
+                  <span>Create</span>
+                )}
+              </div>
             </Button>
           )}
         </div>
diff --git a/apps/web/components/features/studio/ui/components-table.tsx b/apps/web/components/features/studio/ui/components-table.tsx
index a5ba1f0a..01ef3451 100644
--- a/apps/web/components/features/studio/ui/components-table.tsx
+++ b/apps/web/components/features/studio/ui/components-table.tsx
@@ -10,7 +10,6 @@ import {
   TableRow,
 } from "@/components/ui/table"
 import { cn } from "@/lib/utils"
-import { Checkbox } from "@/components/ui/checkbox"
 import {
   Pagination,
   PaginationContent,
@@ -120,28 +119,6 @@ export function DemosTable({ demos = [], onEdit }: DemosTableProps) {
   ])
 
   const columns: ColumnDef<ExtendedDemoWithComponent>[] = [
-    {
-      id: "select",
-      header: ({ table }) => (
-        <Checkbox
-          checked={
-            table.getIsAllPageRowsSelected() ||
-            (table.getIsSomePageRowsSelected() && "indeterminate")
-          }
-          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-          aria-label="Select all"
-        />
-      ),
-      cell: ({ row }) => (
-        <Checkbox
-          checked={row.getIsSelected()}
-          onCheckedChange={(value) => row.toggleSelected(!!value)}
-          aria-label="Select row"
-        />
-      ),
-      size: 28,
-      enableSorting: false,
-    },
     {
       header: "Component",
       accessorKey: "name",
@@ -466,10 +443,7 @@ export function DemosTable({ demos = [], onEdit }: DemosTableProps) {
           <TableBody>
             {table.getRowModel().rows?.length ? (
               table.getRowModel().rows.map((row) => (
-                <TableRow
-                  key={row.id}
-                  data-state={row.getIsSelected() && "selected"}
-                >
+                <TableRow key={row.id}>
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>
                       {flexRender(
@@ -499,7 +473,9 @@ export function DemosTable({ demos = [], onEdit }: DemosTableProps) {
         <div className="flex items-center justify-between gap-8">
           {/* Results per page */}
           <div className="flex items-center gap-3">
-            <Label htmlFor={id} className="max-sm:sr-only whitespace-nowrap">Rows per page</Label>
+            <Label htmlFor={id} className="max-sm:sr-only whitespace-nowrap">
+              Rows per page
+            </Label>
             <Select
               value={table.getState().pagination.pageSize.toString()}
               onValueChange={(value) => {

From 69cccc7e80314982bb5165ea70c98a747d631b76 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Thu, 1 May 2025 21:51:07 +0300
Subject: [PATCH 116/143] error and loading

---
 apps/web/app/magic/console/page.client.tsx    |  1 -
 .../web/app/studio/[username]/page.client.tsx | 15 +++---
 .../[username]/sandbox/[sandboxId]/page.tsx   | 46 ++++++++++++++++---
 3 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/apps/web/app/magic/console/page.client.tsx b/apps/web/app/magic/console/page.client.tsx
index 7050dd8e..42d254c7 100644
--- a/apps/web/app/magic/console/page.client.tsx
+++ b/apps/web/app/magic/console/page.client.tsx
@@ -10,7 +10,6 @@ import {
   LoaderCircle,
   Copy,
   AlertTriangle,
-  MessageSquare,
   RefreshCw,
 } from "lucide-react"
 import { PLAN_LIMITS, PlanType } from "@/lib/config/subscription-plans"
diff --git a/apps/web/app/studio/[username]/page.client.tsx b/apps/web/app/studio/[username]/page.client.tsx
index 6c36e3df..f2672c3e 100644
--- a/apps/web/app/studio/[username]/page.client.tsx
+++ b/apps/web/app/studio/[username]/page.client.tsx
@@ -4,8 +4,6 @@ import { User, DemoWithComponent } from "@/types/global"
 import { StudioLayout } from "@/components/features/studio/studio-layout"
 import { DemosTable } from "@/components/features/studio/ui/components-table"
 import { SandboxesTable } from "@/components/features/studio/ui/sandboxes-table"
-import Link from "next/link"
-import { ArrowLeft, PlusCircle, Loader2 } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { useRouter, usePathname } from "next/navigation"
 import { createNewSandbox } from "@/components/features/studio/sandbox/api"
@@ -79,11 +77,14 @@ export function StudioUsernameClient({
             </Button>
           )}
         </div>
-
-        <Tabs defaultValue="components">
-          <TabsList>
-            <TabsTrigger value="components">Components</TabsTrigger>
-            <TabsTrigger value="sandboxes">Sandboxes</TabsTrigger>
+        <Tabs defaultValue="components" className="w-full">
+          <TabsList className="grid grid-cols-2 mb-4 rounded-md h-7 p-0.5 w-[200px]">
+            <TabsTrigger className="text-xs h-6" value="components">
+              Components
+            </TabsTrigger>
+            <TabsTrigger className="text-xs h-6" value="sandboxes">
+              Sandboxes
+            </TabsTrigger>
           </TabsList>
           <TabsContent value="components" className="mt-4">
             <DemosTable demos={demos} />
diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
index 5dea7dd1..0a79ee88 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
@@ -10,12 +10,15 @@ import {
 import { FileExplorer } from "@/components/features/studio/sandbox/components/FileExplorer"
 import { PreviewPane } from "@/components/features/studio/sandbox/components/PreviewPane"
 import { PublishHeader } from "@/components/features/studio/sandbox/components/PublishHeader"
-import { Loader2Icon } from "lucide-react"
+import { Spinner } from "@/components/icons/spinner"
 import { useSandbox } from "@/components/features/studio/sandbox/hooks/use-sandbox"
 import {
   useFileSystem,
   type FileEntry,
 } from "@/components/features/studio/sandbox/hooks/use-file-system"
+import { Button } from "@/components/ui/button"
+import { Icons } from "@/components/icons"
+import { XCircle } from "lucide-react"
 
 const DEFAULT_FILE_ENTRY: FileEntry = {
   name: "component.tsx",
@@ -26,6 +29,7 @@ const DEFAULT_FILE_ENTRY: FileEntry = {
 
 function PublishPageContent() {
   const params = useParams()
+  const router = useRouter()
   const sandboxId = params.sandboxId as string
   const [selectedEntry, setSelectedEntry] = useState<FileEntry | null>(
     DEFAULT_FILE_ENTRY,
@@ -168,12 +172,26 @@ function PublishPageContent() {
     window.location.reload()
   }
 
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!sandboxRef.current) {
+        if (e.key === "Escape") {
+          router.back()
+        } else if (e.key === "Enter") {
+          handleReset()
+        }
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [router, sandboxRef])
+
   if (isSandboxLoading) {
     return (
-      <div className="h-screen w-full flex items-center justify-center">
+      <div className="h-screen w-full flex items-center justify-center bg-background">
         <div className="flex flex-col items-center gap-4">
-          <Loader2Icon className="h-12 w-12 animate-spin text-primary" />
-          <p className="text-lg">Initializing sandbox...</p>
+          <Spinner color="hsl(var(--foreground))" />
+          <p className="text-muted-foreground">Initializing sandbox</p>
         </div>
       </div>
     )
@@ -182,9 +200,23 @@ function PublishPageContent() {
   if (!sandboxRef.current) {
     return (
       <div className="h-screen w-full flex items-center justify-center">
-        <div className="flex flex-col items-center gap-4 text-destructive">
-          <p className="text-lg">Failed to initialize sandbox.</p>
-          <button onClick={handleReset}>Retry</button>
+        <div className="flex flex-col items-center gap-4">
+          <XCircle className="h-6 w-6 text-muted-foreground" />
+          <p className="text-base">Failed to initialize sandbox</p>
+          <div className="flex gap-3">
+            <Button onClick={() => router.back()} variant="outline">
+              Go Back
+              <kbd className="pointer-events-none hidden md:inline-flex h-5 select-none items-center rounded border-muted-foreground/40 bg-muted-foreground/20 px-1.5 ml-1.5 font-sans text-[11px] text-kbd leading-none opacity-100">
+                ESC
+              </kbd>
+            </Button>
+            <Button onClick={handleReset}>
+              Try Again
+              <kbd className="pointer-events-none hidden md:inline-flex h-5 select-none items-center gap-1 rounded border-muted-foreground/40 bg-muted-foreground/20 px-1.5 ml-1.5 font-sans text-[11px] text-kbd leading-none opacity-100">
+                <Icons.enter className="h-2.5 w-2.5" />
+              </kbd>
+            </Button>
+          </div>
         </div>
       </div>
     )

From 612546b0d1ccd5a6a472fd80429308a9c622e50c Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Thu, 1 May 2025 21:59:33 +0300
Subject: [PATCH 117/143] Rename files to follow Next.js standards

---
 .../web/app/studio/[username]/page.client.tsx | 67 +++++++++++--------
 .../[username]/sandbox/[sandboxId]/page.tsx   |  6 +-
 .../{EditorPane.tsx => editor-pane.tsx}       |  0
 .../{FileExplorer.tsx => file-explorer.tsx}   |  2 +-
 .../{FileTree.tsx => file-tree.tsx}           |  0
 .../{PreviewPane.tsx => preview-pane.tsx}     |  2 +-
 .../{PublishHeader.tsx => publish-header.tsx} |  0
 .../features/studio/ui/studio-sidebar.tsx     | 30 ++++-----
 8 files changed, 55 insertions(+), 52 deletions(-)
 rename apps/web/components/features/studio/sandbox/components/{EditorPane.tsx => editor-pane.tsx} (100%)
 rename apps/web/components/features/studio/sandbox/components/{FileExplorer.tsx => file-explorer.tsx} (99%)
 rename apps/web/components/features/studio/sandbox/components/{FileTree.tsx => file-tree.tsx} (100%)
 rename apps/web/components/features/studio/sandbox/components/{PreviewPane.tsx => preview-pane.tsx} (98%)
 rename apps/web/components/features/studio/sandbox/components/{PublishHeader.tsx => publish-header.tsx} (100%)

diff --git a/apps/web/app/studio/[username]/page.client.tsx b/apps/web/app/studio/[username]/page.client.tsx
index f2672c3e..987724b9 100644
--- a/apps/web/app/studio/[username]/page.client.tsx
+++ b/apps/web/app/studio/[username]/page.client.tsx
@@ -54,38 +54,47 @@ export function StudioUsernameClient({
           <div className="flex items-center">
             <h1 className="text-xl font-bold">Components</h1>
           </div>
+        </div>
 
-          {(isOwnProfile || isAdmin) && (
-            <Button
-              onClick={handleCreateNewSandbox}
-              disabled={isCreating}
-              className={cn(
-                "transition-[width] duration-200",
-                isCreating ? "w-[120px]" : "w-[80px]",
+        <Tabs defaultValue="components" className="w-full">
+          <div className="flex flex-row items-center justify-between">
+            <div className="flex items-center justify-between">
+              <TabsList className="grid grid-cols-2 mb-4 rounded-md h-7 p-0.5 w-[200px]">
+                <TabsTrigger className="text-xs h-6" value="components">
+                  Components
+                </TabsTrigger>
+                <TabsTrigger className="text-xs h-6" value="sandboxes">
+                  Sandboxes
+                </TabsTrigger>
+              </TabsList>
+              {isCreating && (
+                <Spinner size={16} color="hsl(var(--foreground))" />
               )}
-            >
-              <div className="flex items-center gap-2 justify-center w-full">
-                {isCreating ? (
-                  <>
-                    <Spinner size={16} color="white" />
-                    <span>Creating...</span>
-                  </>
-                ) : (
-                  <span>Create</span>
+            </div>
+
+            {(isOwnProfile || isAdmin) && (
+              <Button
+                onClick={handleCreateNewSandbox}
+                disabled={isCreating}
+                className={cn(
+                  "transition-[width] duration-200",
+                  isCreating ? "w-[120px]" : "w-[80px]",
                 )}
-              </div>
-            </Button>
-          )}
-        </div>
-        <Tabs defaultValue="components" className="w-full">
-          <TabsList className="grid grid-cols-2 mb-4 rounded-md h-7 p-0.5 w-[200px]">
-            <TabsTrigger className="text-xs h-6" value="components">
-              Components
-            </TabsTrigger>
-            <TabsTrigger className="text-xs h-6" value="sandboxes">
-              Sandboxes
-            </TabsTrigger>
-          </TabsList>
+              >
+                <div className="flex items-center gap-2 justify-center w-full">
+                  {isCreating ? (
+                    <>
+                      <Spinner size={16} color="white" />
+                      <span>Creating...</span>
+                    </>
+                  ) : (
+                    <span>Create</span>
+                  )}
+                </div>
+              </Button>
+            )}
+          </div>
+
           <TabsContent value="components" className="mt-4">
             <DemosTable demos={demos} />
           </TabsContent>
diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
index 0a79ee88..f9200e10 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
@@ -7,9 +7,9 @@ import {
   ResizablePanelGroup,
   ResizablePanel,
 } from "@/components/ui/resizable"
-import { FileExplorer } from "@/components/features/studio/sandbox/components/FileExplorer"
-import { PreviewPane } from "@/components/features/studio/sandbox/components/PreviewPane"
-import { PublishHeader } from "@/components/features/studio/sandbox/components/PublishHeader"
+import { FileExplorer } from "@/components/features/studio/sandbox/components/file-explorer"
+import { PreviewPane } from "@/components/features/studio/sandbox/components/preview-pane"
+import { PublishHeader } from "@/components/features/studio/sandbox/components/publish-header"
 import { Spinner } from "@/components/icons/spinner"
 import { useSandbox } from "@/components/features/studio/sandbox/hooks/use-sandbox"
 import {
diff --git a/apps/web/components/features/studio/sandbox/components/EditorPane.tsx b/apps/web/components/features/studio/sandbox/components/editor-pane.tsx
similarity index 100%
rename from apps/web/components/features/studio/sandbox/components/EditorPane.tsx
rename to apps/web/components/features/studio/sandbox/components/editor-pane.tsx
diff --git a/apps/web/components/features/studio/sandbox/components/FileExplorer.tsx b/apps/web/components/features/studio/sandbox/components/file-explorer.tsx
similarity index 99%
rename from apps/web/components/features/studio/sandbox/components/FileExplorer.tsx
rename to apps/web/components/features/studio/sandbox/components/file-explorer.tsx
index ececde58..966badcd 100644
--- a/apps/web/components/features/studio/sandbox/components/FileExplorer.tsx
+++ b/apps/web/components/features/studio/sandbox/components/file-explorer.tsx
@@ -26,7 +26,7 @@ import {
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Card, CardContent } from "@/components/ui/card"
-import { FileTree } from "./FileTree"
+import { FileTree } from "./file-tree"
 import { cn } from "@/lib/utils"
 import {
   Tooltip,
diff --git a/apps/web/components/features/studio/sandbox/components/FileTree.tsx b/apps/web/components/features/studio/sandbox/components/file-tree.tsx
similarity index 100%
rename from apps/web/components/features/studio/sandbox/components/FileTree.tsx
rename to apps/web/components/features/studio/sandbox/components/file-tree.tsx
diff --git a/apps/web/components/features/studio/sandbox/components/PreviewPane.tsx b/apps/web/components/features/studio/sandbox/components/preview-pane.tsx
similarity index 98%
rename from apps/web/components/features/studio/sandbox/components/PreviewPane.tsx
rename to apps/web/components/features/studio/sandbox/components/preview-pane.tsx
index 91b31d87..6bbf9954 100644
--- a/apps/web/components/features/studio/sandbox/components/PreviewPane.tsx
+++ b/apps/web/components/features/studio/sandbox/components/preview-pane.tsx
@@ -6,7 +6,7 @@ import {
   ResizablePanel,
   ResizablePanelGroup,
 } from "@/components/ui/resizable"
-import { EditorPane } from "./EditorPane"
+import { EditorPane } from "./editor-pane"
 import { cn } from "@/lib/utils"
 
 interface PreviewPaneProps {
diff --git a/apps/web/components/features/studio/sandbox/components/PublishHeader.tsx b/apps/web/components/features/studio/sandbox/components/publish-header.tsx
similarity index 100%
rename from apps/web/components/features/studio/sandbox/components/PublishHeader.tsx
rename to apps/web/components/features/studio/sandbox/components/publish-header.tsx
diff --git a/apps/web/components/features/studio/ui/studio-sidebar.tsx b/apps/web/components/features/studio/ui/studio-sidebar.tsx
index dddb820f..164582db 100644
--- a/apps/web/components/features/studio/ui/studio-sidebar.tsx
+++ b/apps/web/components/features/studio/ui/studio-sidebar.tsx
@@ -86,26 +86,20 @@ export function StudioSidebar({ user }: StudioSidebarProps) {
             <SidebarMenuItem key={item.href}>
               <Link
                 href={item.disabled ? "#" : item.href}
-                passHref
-                legacyBehavior
+                className={cn(
+                  "flex items-center gap-2",
+                  item.disabled &&
+                    "opacity-50 cursor-not-allowed pointer-events-none",
+                )}
               >
-                <SidebarMenuButton
-                  asChild
-                  isActive={pathname === item.href}
-                  className={cn(
-                    item.disabled &&
-                      "opacity-50 cursor-not-allowed pointer-events-none",
+                <SidebarMenuButton isActive={pathname === item.href}>
+                  {item.icon}
+                  <span>{item.title}</span>
+                  {item.disabled && (
+                    <span className="ml-auto text-xs px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground">
+                      Soon
+                    </span>
                   )}
-                >
-                  <a className="flex items-center gap-2">
-                    {item.icon}
-                    <span>{item.title}</span>
-                    {item.disabled && (
-                      <span className="ml-auto text-xs px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground">
-                        Soon
-                      </span>
-                    )}
-                  </a>
                 </SidebarMenuButton>
               </Link>
             </SidebarMenuItem>

From cd6aa34117ad7ddce5a7b0bef5181a9cfef02cea Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Thu, 1 May 2025 22:12:28 +0300
Subject: [PATCH 118/143] craft header

---
 .../web/app/studio/[username]/page.client.tsx |   3 -
 .../sandbox/components/publish-header.tsx     | 141 +++++++++++-------
 2 files changed, 91 insertions(+), 53 deletions(-)

diff --git a/apps/web/app/studio/[username]/page.client.tsx b/apps/web/app/studio/[username]/page.client.tsx
index 987724b9..1fcacf4c 100644
--- a/apps/web/app/studio/[username]/page.client.tsx
+++ b/apps/web/app/studio/[username]/page.client.tsx
@@ -67,9 +67,6 @@ export function StudioUsernameClient({
                   Sandboxes
                 </TabsTrigger>
               </TabsList>
-              {isCreating && (
-                <Spinner size={16} color="hsl(var(--foreground))" />
-              )}
             </div>
 
             {(isOwnProfile || isAdmin) && (
diff --git a/apps/web/components/features/studio/sandbox/components/publish-header.tsx b/apps/web/components/features/studio/sandbox/components/publish-header.tsx
index 8794dfda..b1beea95 100644
--- a/apps/web/components/features/studio/sandbox/components/publish-header.tsx
+++ b/apps/web/components/features/studio/sandbox/components/publish-header.tsx
@@ -1,7 +1,7 @@
 import { Button } from "@/components/ui/button"
 import { useParams, usePathname, useRouter } from "next/navigation"
 import { publishSandbox, editSandbox } from "../api"
-import { useEffect, useState } from "react"
+import { useEffect, useState, useRef } from "react"
 import {
   RocketIcon,
   Loader2,
@@ -13,6 +13,7 @@ import {
 } from "lucide-react"
 import { toast } from "sonner"
 import { Input } from "@/components/ui/input"
+import { motion } from "motion/react"
 
 interface PublishHeaderProps {
   sandboxId: string | null
@@ -31,6 +32,8 @@ export function PublishHeader({
   const [isLoading, setIsLoading] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
   const [name, setName] = useState(sandboxName)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const textRef = useRef<HTMLHeadingElement>(null)
 
   const pathname = usePathname()
 
@@ -38,6 +41,24 @@ export function PublishHeader({
     setName(sandboxName)
   }, [sandboxName])
 
+  // Set input width to match text width when editing starts
+  useEffect(() => {
+    if (isEditing && inputRef.current && textRef.current) {
+      // Get the computed style to calculate exact width
+      const styles = window.getComputedStyle(textRef.current)
+      const width = textRef.current.getBoundingClientRect().width
+
+      // Add a small buffer to ensure text isn't cut off
+      inputRef.current.style.width = `${width + 8}px`
+
+      // Set min-width to avoid too narrow inputs
+      inputRef.current.style.minWidth = "120px"
+
+      // Focus after width is set
+      inputRef.current.focus()
+    }
+  }, [isEditing])
+
   const [editLoading, setEditLoading] = useState(false)
 
   const params = useParams()
@@ -91,8 +112,16 @@ export function PublishHeader({
     router.push(`${pathname}/publish`)
   }
 
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      handleEditName()
+    } else if (e.key === "Escape") {
+      handleCancel()
+    }
+  }
+
   return (
-    <header className="flex flex-col p-4 border-b">
+    <header className="flex flex-col px-4 py-2 border-b">
       <div className="flex items-center">
         <Button
           size="icon"
@@ -103,50 +132,67 @@ export function PublishHeader({
           <ArrowLeftIcon className="h-4 w-4" />
         </Button>
 
-        {isEditing ? (
-          <div className="flex items-center gap-2">
-            <Input
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              className="text-xl font-bold h-9 w-[300px]"
-              autoFocus
-            />
-            <Button
-              size="icon"
-              variant="ghost"
-              onClick={handleEditName}
-              disabled={editLoading}
-            >
-              {editLoading ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <CheckIcon className="h-4 w-4" />
-              )}
-            </Button>
-            <Button
-              size="icon"
-              variant="ghost"
-              onClick={handleCancel}
-              disabled={editLoading}
-            >
-              <XIcon className="h-4 w-4" />
-            </Button>
-          </div>
-        ) : (
-          <div className="flex items-center gap-2">
-            <h1 className="text-2xl font-bold">{name}</h1>
-            <Button
-              size="icon"
-              variant="ghost"
-              onClick={() => setIsEditing(true)}
-              className="h-8 w-8"
-            >
-              <PenIcon className="h-4 w-4" />
-            </Button>
-          </div>
-        )}
+        <div className="flex items-center gap-2 group relative">
+          {isEditing ? (
+            <>
+              <Input
+                ref={inputRef}
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="text-base font-medium bg-transparent border-0 border-b border-primary/50 focus-visible:ring-0 focus-visible:ring-offset-0 rounded-none p-0 h-auto"
+                autoFocus
+                onKeyDown={handleKeyDown}
+                onBlur={handleEditName}
+              />
+              <div className="flex absolute right-0 top-0 opacity-70 -mr-16">
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  onClick={handleEditName}
+                  disabled={editLoading}
+                  className="h-7 w-7"
+                >
+                  {editLoading ? (
+                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                  ) : (
+                    <CheckIcon className="h-3.5 w-3.5" />
+                  )}
+                </Button>
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  onClick={handleCancel}
+                  disabled={editLoading}
+                  className="h-7 w-7"
+                >
+                  <XIcon className="h-3.5 w-3.5" />
+                </Button>
+              </div>
+            </>
+          ) : (
+            <>
+              <h1
+                ref={textRef}
+                className="text-base font-medium py-0.5 px-0 cursor-text transition-colors hover:bg-accent/30 rounded"
+                onClick={() => setIsEditing(true)}
+              >
+                {name}
+              </h1>
+              <div className="absolute -right-7 opacity-0 group-hover:opacity-70 transition-opacity">
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  onClick={() => setIsEditing(true)}
+                  className="h-7 w-7"
+                >
+                  <PenIcon className="h-3.5 w-3.5" />
+                </Button>
+              </div>
+            </>
+          )}
+        </div>
         <div className="ml-auto flex items-center gap-2">
-          <Button onClick={handleNextStep}>Next step</Button>
+          <Button onClick={handleNextStep}>Continue</Button>
           {/* <Button
             onClick={onGenerateRegistry}
             disabled={isRegenerating}
@@ -174,11 +220,6 @@ export function PublishHeader({
           </Button> */}
         </div>
       </div>
-      {params.username && (
-        <p className="ml-10 text-sm text-muted-foreground mt-1">
-          By {params.username}
-        </p>
-      )}
     </header>
   )
 }

From 06a325d4a771963f29efeb14ea9a5ebb9d4be8ea Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Thu, 1 May 2025 22:31:12 +0300
Subject: [PATCH 119/143] edit

---
 apps/web/app/studio/[username]/page.client.tsx       |  2 +-
 .../studio/sandbox/components/publish-header.tsx     | 12 +-----------
 2 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/apps/web/app/studio/[username]/page.client.tsx b/apps/web/app/studio/[username]/page.client.tsx
index 1fcacf4c..58b11de2 100644
--- a/apps/web/app/studio/[username]/page.client.tsx
+++ b/apps/web/app/studio/[username]/page.client.tsx
@@ -57,7 +57,7 @@ export function StudioUsernameClient({
         </div>
 
         <Tabs defaultValue="components" className="w-full">
-          <div className="flex flex-row items-center justify-between">
+          <div className="flex flex-row items-end justify-between">
             <div className="flex items-center justify-between">
               <TabsList className="grid grid-cols-2 mb-4 rounded-md h-7 p-0.5 w-[200px]">
                 <TabsTrigger className="text-xs h-6" value="components">
diff --git a/apps/web/components/features/studio/sandbox/components/publish-header.tsx b/apps/web/components/features/studio/sandbox/components/publish-header.tsx
index b1beea95..19eb5dec 100644
--- a/apps/web/components/features/studio/sandbox/components/publish-header.tsx
+++ b/apps/web/components/features/studio/sandbox/components/publish-header.tsx
@@ -5,7 +5,6 @@ import { useEffect, useState, useRef } from "react"
 import {
   RocketIcon,
   Loader2,
-  PenIcon,
   CheckIcon,
   XIcon,
   ArrowLeftIcon,
@@ -178,16 +177,7 @@ export function PublishHeader({
               >
                 {name}
               </h1>
-              <div className="absolute -right-7 opacity-0 group-hover:opacity-70 transition-opacity">
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  onClick={() => setIsEditing(true)}
-                  className="h-7 w-7"
-                >
-                  <PenIcon className="h-3.5 w-3.5" />
-                </Button>
-              </div>
+              
             </>
           )}
         </div>

From 4328b162b09abd347cd42eef2541aa2e8e2c01a0 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Fri, 2 May 2025 01:21:32 +0400
Subject: [PATCH 120/143] update

---
 apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx   | 4 ++--
 apps/web/app/studio/page.tsx                                  | 4 ++--
 .../components/features/component-page/component-preview.tsx  | 4 ++++
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
index f9200e10..bd11d2d0 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
@@ -55,7 +55,6 @@ function PublishPageContent() {
     files,
     isTreeLoading,
     isFileLoading,
-    isCompiling,
     advancedView,
     toggleAdvancedView,
     loadRootDirectory,
@@ -71,6 +70,7 @@ function PublishPageContent() {
     sandboxRef,
     reconnectSandbox,
     sandboxConnectionHash,
+    connectedShellId,
   })
 
   useEffect(() => {
@@ -226,7 +226,7 @@ function PublishPageContent() {
     <div className="h-screen w-full flex flex-col">
       <PublishHeader
         onGenerateRegistry={handleGenerateRegistry}
-        isRegenerating={isRegenerating || isCompiling}
+        isRegenerating={isRegenerating}
         sandboxId={sandboxId}
         sandboxName={serverSandbox?.name}
       />
diff --git a/apps/web/app/studio/page.tsx b/apps/web/app/studio/page.tsx
index 26ee6256..8ad65877 100644
--- a/apps/web/app/studio/page.tsx
+++ b/apps/web/app/studio/page.tsx
@@ -1,6 +1,6 @@
 import { Footer } from "@/components/ui/footer"
 import { redirect } from "next/navigation"
-import { auth } from "@clerk/nextjs/server"
+import { useAuth } from "@clerk/nextjs"
 import Link from "next/link"
 import { supabaseWithAdminAccess } from "@/lib/supabase"
 
@@ -11,7 +11,7 @@ export const metadata = {
 }
 
 export default async function StudioPage() {
-  const { userId } = await auth()
+  const { userId } = useAuth()
 
   if (!userId) {
     redirect("/sign-in")
diff --git a/apps/web/components/features/component-page/component-preview.tsx b/apps/web/components/features/component-page/component-preview.tsx
index 88e7b61c..9babd854 100644
--- a/apps/web/components/features/component-page/component-preview.tsx
+++ b/apps/web/components/features/component-page/component-preview.tsx
@@ -197,6 +197,7 @@ export function ComponentPagePreview({
     [dependencies, demoDependencies, npmDependenciesOfRegistryDependencies],
   )
   const [previewError, setPreviewError] = useState(false)
+
   const { bundle, error } = useBundleDemo(
     bundleFiles,
     allDependencies,
@@ -208,6 +209,9 @@ export function ComponentPagePreview({
   )
 
   useEffect(() => {
+    if (demo.bundle_html_url) {
+      return
+    }
     if (error) {
       setPreviewError(true)
     }

From 1973a99038169a76ca081289e511042f8b1aae49 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Fri, 2 May 2025 01:41:19 +0400
Subject: [PATCH 121/143] add client side validation

---
 .../sandbox/[sandboxId]/publish/page.tsx      | 62 ++++++++++++-------
 .../components/forms/component-form.tsx       | 26 +++++++-
 .../publish/components/forms/demo-form.tsx    | 41 ++++++++++--
 .../features/studio/publish/config/utils.ts   | 23 ++++---
 4 files changed, 114 insertions(+), 38 deletions(-)

diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
index 19052e5a..ecb9a344 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
@@ -6,6 +6,7 @@ import { useForm } from "react-hook-form"
 import { Trash2 } from "lucide-react"
 import { useUser } from "@clerk/nextjs"
 import { toast } from "sonner"
+import { zodResolver } from "@hookform/resolvers/zod"
 
 import { Form } from "@/components/ui/form"
 import { Badge } from "@/components/ui/badge"
@@ -22,7 +23,10 @@ import { Skeleton } from "@/components/ui/skeleton"
 import { ComponentForm } from "@/components/features/studio/publish/components/forms/component-form"
 import { DemoDetailsForm } from "@/components/features/studio/publish/components/forms/demo-form"
 import { SuccessDialog } from "@/components/features/publish-old/components/success-dialog"
-import { FormData } from "@/components/features/studio/publish/config/utils"
+import {
+  FormData,
+  formSchema,
+} from "@/components/features/studio/publish/config/utils"
 import { useSubmitComponent } from "@/components/features/studio/publish/hooks/use-submit-component"
 import { useComponentData } from "@/components/features/studio/publish/hooks/use-component-data"
 
@@ -86,6 +90,7 @@ const PublishPage = () => {
   ])
 
   const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
     defaultValues: {
       name: "",
       component_slug: "",
@@ -142,6 +147,8 @@ const PublishPage = () => {
     username: publishAsUsername ?? user?.username ?? "",
   })
 
+  console.log("ERRORS", form.formState.errors)
+
   useEffect(() => {
     if (form.getValues("publish_as_username") === undefined && user?.username) {
       form.setValue("publish_as_username", user.username)
@@ -164,30 +171,39 @@ const PublishPage = () => {
 
   const handleSubmit = (event?: React.FormEvent) => {
     event?.preventDefault()
-    const formData = form.getValues()
-    const data = {
-      ...formData,
-      website_url: formData.website_url || "",
-    }
-    if (!publishAsUser?.id) {
-      toast.error(
-        "Cannot determine user to publish as. Please ensure you are logged in.",
-      )
-      return
-    }
-    submitComponent({
-      data,
-      publishAsUser: {
-        id: publishAsUser.id,
-        username: publishAsUser.username || undefined,
+    form.handleSubmit(
+      (formData) => {
+        console.log("Form data is valid:", formData)
+        console.log("Form errors:", form.formState.errors)
+        const data = {
+          ...formData,
+          website_url: formData.website_url || "",
+        }
+        if (!publishAsUser?.id) {
+          toast.error(
+            "Cannot determine user to publish as. Please ensure you are logged in.",
+          )
+          return
+        }
+        submitComponent({
+          data,
+          publishAsUser: {
+            id: publishAsUser.id,
+            username: publishAsUser.username || undefined,
+          },
+          generateRegistry,
+          bundleDemo,
+          sandboxId: serverSandbox!.id,
+          onSuccess: () => {
+            reconnectSandbox()
+          },
+        })
       },
-      generateRegistry,
-      bundleDemo,
-      sandboxId: serverSandbox!.id,
-      onSuccess: () => {
-        reconnectSandbox()
+      (errors) => {
+        console.error("Form validation errors:", errors)
+        toast.error("Please fill all the required fields")
       },
-    })
+    )(event) // Immediately invoke the handler
   }
 
   const isComponentInfoComplete = useCallback(() => {
diff --git a/apps/web/components/features/studio/publish/components/forms/component-form.tsx b/apps/web/components/features/studio/publish/components/forms/component-form.tsx
index be7a7ac2..b2d80126 100644
--- a/apps/web/components/features/studio/publish/components/forms/component-form.tsx
+++ b/apps/web/components/features/studio/publish/components/forms/component-form.tsx
@@ -132,6 +132,11 @@ export const ComponentForm = ({
           >
             The display name of your component
           </p>
+          {form.formState.errors.name && (
+            <p className="text-xs text-destructive mt-1">
+              {form.formState.errors.name.message}
+            </p>
+          )}
         </div>
 
         <div className="space-y-2">
@@ -159,6 +164,11 @@ export const ComponentForm = ({
           >
             Used in the URL and imports, can't be changed later
           </p>
+          {form.formState.errors.component_slug && (
+            <p className="text-xs text-destructive mt-1">
+              {form.formState.errors.component_slug.message}
+            </p>
+          )}
         </div>
       </div>
 
@@ -203,7 +213,10 @@ export const ComponentForm = ({
                   <Textarea
                     id={descriptionId}
                     placeholder="Add some description to help others discover your component"
-                    className="min-h-[none] resize-none"
+                    className={cn(
+                      "min-h-[none] resize-none",
+                      form.formState.errors.description && "border-destructive",
+                    )}
                     rows={defaultRows}
                     required
                     {...field}
@@ -238,6 +251,11 @@ export const ComponentForm = ({
               >
                 A brief description of what your component does
               </p>
+              {form.formState.errors.description && (
+                <p className="text-xs text-destructive mt-1">
+                  {form.formState.errors.description.message}
+                </p>
+              )}
             </div>
 
             {/* TODO: PRICING FOR BETTER TIMES; NOW IT's FREEEEEEE */}
@@ -361,6 +379,7 @@ export const ComponentForm = ({
                     </SelectContent>
                   </Select>
                 )}
+                rules={{ required: "Component type is required" }}
               />
               <p
                 className="text-xs text-muted-foreground"
@@ -369,6 +388,11 @@ export const ComponentForm = ({
               >
                 The category your component belongs to
               </p>
+              {form.formState.errors.registry && (
+                <p className="text-xs text-destructive mt-1">
+                  {form.formState.errors.registry.message}
+                </p>
+              )}
             </div>
           </div>
 
diff --git a/apps/web/components/features/studio/publish/components/forms/demo-form.tsx b/apps/web/components/features/studio/publish/components/forms/demo-form.tsx
index 6988d54b..82b69269 100644
--- a/apps/web/components/features/studio/publish/components/forms/demo-form.tsx
+++ b/apps/web/components/features/studio/publish/components/forms/demo-form.tsx
@@ -151,6 +151,11 @@ export const DemoDetailsForm = ({
           >
             A name that describes this demo implementation
           </p>
+          {form.formState.errors.demos?.[demoIndex]?.name && (
+            <p className="text-xs text-destructive mt-1">
+              {form.formState.errors.demos[demoIndex]?.name?.message}
+            </p>
+          )}
         </div>
 
         <div className="space-y-2">
@@ -196,6 +201,11 @@ export const DemoDetailsForm = ({
           >
             Add tags to help others discover your component
           </p>
+          {form.formState.errors.demos?.[demoIndex]?.tags && (
+            <p className="text-xs text-destructive mt-1">
+              {form.formState.errors.demos[demoIndex]?.tags?.message}
+            </p>
+          )}
         </div>
 
         <div className="space-y-2">
@@ -205,7 +215,11 @@ export const DemoDetailsForm = ({
           {!previewImageDataUrl ? (
             <div
               {...getImageRootProps()}
-              className={`flex flex-col !justify-between w-full border border-dashed bg-background rounded-md p-8 text-center cursor-pointer hover:border-gray-400 transition-colors relative`}
+              className={cn(
+                "flex flex-col !justify-between w-full border border-dashed bg-background rounded-md p-8 text-center cursor-pointer hover:border-gray-400 transition-colors relative",
+                form.formState.errors.demos?.[demoIndex]
+                  ?.preview_image_data_url && "border-destructive",
+              )}
             >
               <input {...getImageInputProps()} id={previewImageId} />
               <UploadIcon />
@@ -229,9 +243,12 @@ export const DemoDetailsForm = ({
           ) : (
             <div
               {...getImageRootProps()}
-              className={`w-full border ${
-                isDarkTheme ? "border-gray-600" : "border-gray-300"
-              } rounded-md p-2 flex items-center gap-2 relative`}
+              className={cn(
+                "w-full border rounded-md p-2 flex items-center gap-2 relative",
+                isDarkTheme ? "border-gray-600" : "border-gray-300",
+                form.formState.errors.demos?.[demoIndex]
+                  ?.preview_image_data_url && "border-destructive",
+              )}
             >
               <input {...getImageInputProps()} id={previewImageId} />
               <div className="w-40 h-32 relative">
@@ -291,6 +308,22 @@ export const DemoDetailsForm = ({
             A preview image that represents your component (1200x900
             recommended)
           </p>
+          {form.formState.errors.demos?.[demoIndex]?.preview_image_data_url && (
+            <p className="text-xs text-destructive mt-1">
+              {
+                form.formState.errors.demos[demoIndex]?.preview_image_data_url
+                  ?.message
+              }
+            </p>
+          )}
+          {form.formState.errors.demos?.[demoIndex]?.preview_image_file && (
+            <p className="text-xs text-destructive mt-1">
+              {
+                form.formState.errors.demos[demoIndex]?.preview_image_file
+                  ?.message
+              }
+            </p>
+          )}
         </div>
 
         <div className="space-y-2">
diff --git a/apps/web/components/features/studio/publish/config/utils.ts b/apps/web/components/features/studio/publish/config/utils.ts
index 63b1e7b2..8c12efae 100644
--- a/apps/web/components/features/studio/publish/config/utils.ts
+++ b/apps/web/components/features/studio/publish/config/utils.ts
@@ -11,12 +11,13 @@ const demoSchema = z.object({
   demo_slug: z.string().min(1, {
     message: "Demo slug is required.",
   }),
-  preview_image_data_url: z.string({
-    required_error: "Preview image is required.",
-  }),
-  preview_image_file: z.instanceof(File, {
-    message: "Preview image file is required.",
-  }),
+  preview_image_data_url: z
+    .string({
+      required_error: "Cover image is required.",
+    })
+    .min(1, {
+      message: "Cover image is required.",
+    }),
   preview_video_data_url: z.string().optional(),
   preview_video_file: z.instanceof(File).optional(),
   tags: z
@@ -40,14 +41,16 @@ export const formSchema = z.object({
   name: z.string().min(2, {
     message: "Name must be at least 2 characters.",
   }),
-  component_slug: z.string().min(2, {
-    message: "Slug must be at least 2 characters.",
-  }),
+  // component_slug: z.string().min(2, {
+  //   message: "Slug must be at least 2 characters.",
+  // }),
   code: z.string().min(1, {
     message: "Component code is required.",
   }),
   demos: z.array(demoSchema).default([]),
-  description: z.string().optional(),
+  description: z.string().min(10, {
+    message: "Description must be at least 10 characters.",
+  }),
   license: z.string(),
   website_url: z.string().optional(),
   is_public: z.boolean(),

From 8626e50ba5f236ed975f7411b34ce7a325d52373 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Fri, 2 May 2025 12:41:25 +0300
Subject: [PATCH 122/143] fix: studio auth hotfix

---
 apps/web/app/studio/page.tsx | 46 ++++++++++++++++++------------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/apps/web/app/studio/page.tsx b/apps/web/app/studio/page.tsx
index 8ad65877..385457db 100644
--- a/apps/web/app/studio/page.tsx
+++ b/apps/web/app/studio/page.tsx
@@ -1,35 +1,35 @@
+"use client"
+
 import { Footer } from "@/components/ui/footer"
-import { redirect } from "next/navigation"
 import { useAuth } from "@clerk/nextjs"
 import Link from "next/link"
-import { supabaseWithAdminAccess } from "@/lib/supabase"
+import { useEffect, useState } from "react"
+import { useClerkSupabaseClient } from "@/lib/clerk"
 
-export const metadata = {
-  title: "Creator Studio | 21st.dev - The NPM for Design Engineers",
-  description:
-    "Publish and manage your components on 21st.dev - reach thousands of developers and grow your audience",
-}
 
-export default async function StudioPage() {
+export default function StudioPage() {
   const { userId } = useAuth()
+  const [studioUrl, setStudioUrl] = useState("/studio")
 
-  if (!userId) {
-    redirect("/sign-in")
-  }
+  useEffect(() => {
+    
+    const fetchUserData = async () => {
+      const supabase = useClerkSupabaseClient()
+      const { data: userData } = await supabase
+        .from("users")
+        .select("display_username, username")
+        .eq("id", userId)
+        .single()
 
-  // Get the user data from Supabase to determine username
-  const { data: userData } = await supabaseWithAdminAccess
-    .from("users")
-    .select("display_username, username")
-    .eq("id", userId)
-    .single()
+      if (userData?.display_username) {
+        setStudioUrl(`/studio/${userData.display_username}`)
+      } else if (userData?.username) {
+        setStudioUrl(`/studio/${userData.username}`)
+      }
+    }
 
-  // Construct the studio URL using the same logic as header.client.tsx
-  const studioUrl = userData?.display_username
-    ? `/studio/${userData.display_username}`
-    : userData?.username
-      ? `/studio/${userData.username}`
-      : "/studio"
+    fetchUserData()
+  }, [userId])
 
   return (
     <div className="min-h-screen flex flex-col">

From 4bbe55a63a775e389999131a96d67b4b0ab4a45b Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Fri, 2 May 2025 13:01:44 +0300
Subject: [PATCH 123/143] feat: show all files button

---
 .../sandbox/components/file-explorer.tsx      | 151 +++++++-----------
 1 file changed, 62 insertions(+), 89 deletions(-)

diff --git a/apps/web/components/features/studio/sandbox/components/file-explorer.tsx b/apps/web/components/features/studio/sandbox/components/file-explorer.tsx
index 966badcd..c6603c9a 100644
--- a/apps/web/components/features/studio/sandbox/components/file-explorer.tsx
+++ b/apps/web/components/features/studio/sandbox/components/file-explorer.tsx
@@ -15,25 +15,12 @@ interface FileEntry {
 }
 */
 import { FileEntry } from "../hooks/use-file-system"
-import {
-  PlusIcon,
-  RefreshCwIcon,
-  Loader2Icon,
-  FolderPlusIcon,
-  EyeIcon,
-  EyeOffIcon,
-} from "lucide-react"
+import { FolderIcon, FolderOpenIcon } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
-import { Card, CardContent } from "@/components/ui/card"
 import { FileTree } from "./file-tree"
 import { cn } from "@/lib/utils"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
+import { motion } from "motion/react"
 
 interface FileExplorerProps {
   entries: FileEntry[]
@@ -91,77 +78,7 @@ export function FileExplorer({
   }
 
   return (
-    <Card className="h-full rounded-none flex flex-col">
-      <div className="flex items-center justify-between p-2 border-b">
-        <span className="font-medium">Files</span>
-        <div className="flex gap-1">
-          {/* <Button
-            size="icon"
-            variant="ghost"
-            onClick={() => setIsCreatingFile(true)}
-            disabled={isLoading}
-          >
-            <PlusIcon className="h-4 w-4" />
-          </Button>
-          <Button
-            size="icon"
-            variant="ghost"
-            onClick={() => setIsCreatingDirectory(true)}
-            disabled={isLoading}
-          >
-            <FolderPlusIcon className="h-4 w-4" />
-          </Button> */}
-          {/* <Button
-            size="icon"
-            variant="ghost"
-            onClick={onRefresh}
-            disabled={isLoading}
-          >
-            {isLoading ? (
-              <Loader2Icon className="h-4 w-4 animate-spin" />
-            ) : (
-              <RefreshCwIcon className="h-4 w-4" />
-            )}
-          </Button> */}
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={onToggleAdvancedView}
-                  className={cn(
-                    "bg-background/80 backdrop-blur-sm shadow-sm border transition-colors",
-                  )}
-                  disabled={isLoading}
-                >
-                  {advancedView ? (
-                    <>
-                      <EyeOffIcon className="h-4 w-4 mr-2" />
-                      Advanced view
-                    </>
-                  ) : (
-                    <>
-                      <EyeIcon className="h-4 w-4 mr-2" />
-                      Simple view
-                    </>
-                  )}
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent
-                side="bottom"
-                align="end"
-                className="max-w-[220px]"
-              >
-                {advancedView
-                  ? "Switch to Simple view: only shows files that you need"
-                  : "Switch to Advanced view: shows files that are used under the hood"}
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        </div>
-      </div>
-
+    <div className="h-full flex flex-col relative px-1">
       {isCreatingFile && (
         <div className="p-2 border-b">
           <div className="flex gap-2">
@@ -210,7 +127,7 @@ export function FileExplorer({
         </div>
       )}
 
-      <CardContent className="p-0 overflow-y-auto flex-1">
+      <div className="overflow-y-auto flex-1">
         <FileTree
           entries={entries}
           onSelect={onSelect}
@@ -221,7 +138,63 @@ export function FileExplorer({
           onCreateDirectory={onCreateDirectory}
           onRename={onRename}
         />
-      </CardContent>
-    </Card>
+      </div>
+
+      <motion.div
+        className="absolute bottom-4 left-4 z-10 rounded-full overflow-hidden transition-all duration-200 ease-in-out w-auto"
+        initial={{ opacity: 0.95 }}
+        whileHover={{
+          opacity: 1,
+          boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
+        }}
+        transition={{ duration: 0.15 }}
+      >
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onToggleAdvancedView}
+          className={cn(
+            "bg-background/90 backdrop-blur-md shadow-sm border rounded-full pl-1.5 pr-3 h-8",
+            "flex items-center gap-1.5 transition-all duration-200 ease-in-out w-auto",
+            advancedView ? "border-primary/30" : "border-muted-foreground/30",
+          )}
+          disabled={isLoading}
+        >
+          <motion.div
+            initial={false}
+            animate={{
+              rotateY: advancedView ? 180 : 0,
+              backgroundColor: advancedView
+                ? "rgba(var(--primary), 0.1)"
+                : "hsl(var(--muted))",
+            }}
+            transition={{ duration: 0.3 }}
+            className={cn(
+              "rounded-full flex items-center justify-center w-5 h-5",
+              advancedView ? "text-primary" : "text-muted-foreground",
+            )}
+            style={{ transformStyle: "preserve-3d" }}
+          >
+            {advancedView ? (
+              <FolderOpenIcon
+                className="h-3 w-3 absolute transform"
+                style={{
+                  backfaceVisibility: "hidden",
+                  transform: "rotateY(180deg)",
+                }}
+              />
+            ) : (
+              <FolderIcon
+                className="h-3 w-3 absolute transform"
+                style={{ backfaceVisibility: "hidden" }}
+              />
+            )}
+          </motion.div>
+          <span className="text-xs font-medium whitespace-nowrap">
+            {advancedView ? "Hide system files" : "Show all files"}
+          </span>
+        </Button>
+      </motion.div>
+    </div>
   )
 }

From 4ab32c77f3c653ab40a0449f8aed4a22c034c42f Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Fri, 2 May 2025 13:09:37 +0300
Subject: [PATCH 124/143] craft: file tree

Update file-tree.tsx

Update file-tree.tsx
---
 .../studio/sandbox/components/file-tree.tsx   | 151 +++++++++++++-----
 1 file changed, 110 insertions(+), 41 deletions(-)

diff --git a/apps/web/components/features/studio/sandbox/components/file-tree.tsx b/apps/web/components/features/studio/sandbox/components/file-tree.tsx
index 6d387663..3eab879a 100644
--- a/apps/web/components/features/studio/sandbox/components/file-tree.tsx
+++ b/apps/web/components/features/studio/sandbox/components/file-tree.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react"
 import {
   FolderIcon,
+  FolderOpenIcon,
   FileIcon,
   Loader2Icon,
   TrashIcon,
@@ -16,6 +17,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { Input } from "@/components/ui/input"
+import { motion } from "motion/react"
 
 interface FileEntry {
   name: string
@@ -204,7 +206,7 @@ function FileItem({
 
   return (
     <li
-      className="py-0.5 group/item"
+      className="py-0.5 group/item relative select-none"
       onMouseEnter={() => setShowActions(true)}
       onMouseLeave={() => !isRenaming && setShowActions(false)}
       style={{ paddingLeft: `${level * 1}rem` }}
@@ -220,8 +222,8 @@ function FileItem({
       ) : (
         <div className="flex items-center justify-between">
           <button
-            className={`flex items-center flex-1 text-left px-2 py-1 hover:bg-muted rounded truncate ${
-              selectedPath === entry.path ? "bg-accent font-medium" : ""
+            className={`flex items-center flex-1 text-left px-2 py-1 hover:bg-muted rounded truncate select-none ${
+              selectedPath === entry.path ? "bg-accent" : ""
             }`}
             onClick={() => onSelect(entry)}
             title={entry.path}
@@ -351,10 +353,11 @@ function DirectoryItem({
 
   const indentStyle = { paddingLeft: `${level * 1 + 0.5}rem` }
   const childIndentStyle = { paddingLeft: `${(level + 1) * 1 + 0.5}rem` }
+  const isExpanded = expandedDirs[entry.path]
 
   return (
     <li
-      className="py-0.5 group/item"
+      className="py-0.5 group/item relative select-none"
       onMouseEnter={() => setShowActions(true)}
       onMouseLeave={() => {
         if (!isCreatingFile && !isCreatingDirectory && !isRenaming) {
@@ -362,7 +365,7 @@ function DirectoryItem({
         }
       }}
     >
-      <details className="group" open={expandedDirs[entry.path]}>
+      <details className="group select-none" open={isExpanded}>
         {isRenaming ? (
           <div className="flex gap-1 py-1 pl-2" style={indentStyle}>
             <InlineInputForm
@@ -375,15 +378,55 @@ function DirectoryItem({
           </div>
         ) : (
           <summary
-            className={`flex items-center justify-between px-2 py-1 cursor-pointer hover:bg-muted rounded list-none ${
+            className={`flex items-center justify-between px-2 py-1 cursor-pointer hover:bg-muted rounded list-none select-none ${
               selectedPath === entry.path ? "bg-accent" : ""
-            }`}
+            } relative z-10`}
             onClick={toggleExpanded}
             style={indentStyle}
           >
             <div className="flex items-center overflow-hidden">
-              <FolderIcon className="h-4 w-4 mr-1 text-blue-500 flex-shrink-0" />
-              <span className="font-medium truncate" title={entry.name}>
+              <div className="relative h-4 w-4 mr-1 flex-shrink-0 group/folder">
+                <motion.div
+                  className="absolute inset-0 flex items-center justify-center"
+                  initial={false}
+                  animate={{ opacity: isExpanded ? 0 : 1 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  <FolderIcon className="h-4 w-4 text-blue-500" />
+                </motion.div>
+                <motion.div
+                  className="absolute inset-0 flex items-center justify-center"
+                  initial={false}
+                  animate={{ opacity: isExpanded ? 1 : 0 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  <FolderOpenIcon className="h-4 w-4 text-blue-500" />
+                </motion.div>
+                <div
+                  className="absolute inset-0 opacity-0 transition-all duration-500 transform
+                  group-hover/folder:opacity-100 group-hover/folder:scale-100 origin-center"
+                >
+                  <div className="relative w-full h-full">
+                    <span
+                      className="absolute inset-0 text-[0.75rem] flex items-center justify-center
+                      animate-in zoom-in-95 duration-300"
+                      style={{
+                        animationFillMode: "forwards",
+                        transform: "translateY(-0.5px)",
+                      }}
+                    ></span>
+                    <div
+                      className="absolute inset-0 rounded-full bg-blue-500/20 animate-ping-slow 
+                      group-hover/folder:opacity-100 opacity-0 transition-opacity duration-300"
+                    />
+                    <div
+                      className="absolute inset-0 rounded-full bg-blue-500/10
+                      group-hover/folder:animate-scale-pulse opacity-0 group-hover/folder:opacity-100 transition-opacity duration-300"
+                    />
+                  </div>
+                </div>
+              </div>
+              <span className="truncate" title={entry.name}>
                 {entry.name}
               </span>
             </div>
@@ -439,7 +482,15 @@ function DirectoryItem({
           </div>
         )}
 
-        <div className="mt-0.5">
+        <div className="mt-0.5 relative">
+          {/* Directory connector line */}
+          {isExpanded && entry.children && entry.children.length > 0 && (
+            <div
+              className="absolute left-3 top-0 bottom-0 w-px bg-gray-200/0 dark:bg-gray-700/0 transition-colors duration-200 group-hover:bg-gray-200 group-hover:dark:bg-gray-700"
+              style={{ left: `${level * 16 + 10}px` }}
+            />
+          )}
+
           {entry.children && entry.children.length > 0 ? (
             <FileList
               items={entry.children}
@@ -495,34 +546,52 @@ function FileList({
   setExpandedDirs: React.Dispatch<React.SetStateAction<Record<string, boolean>>>
 }) {
   return (
-    <ul className="text-sm py-0.5">
-      {items.map((entry) =>
-        entry.type === "dir" ? (
-          <DirectoryItem
-            key={entry.path}
-            entry={entry}
-            level={level}
-            onSelect={onSelect}
-            selectedPath={selectedPath}
-            onDelete={onDelete}
-            onCreateFile={onCreateFile}
-            onCreateDirectory={onCreateDirectory}
-            onRename={onRename}
-            expandedDirs={expandedDirs}
-            setExpandedDirs={setExpandedDirs}
-          />
-        ) : (
-          <FileItem
-            key={entry.path}
-            entry={entry}
-            level={level}
-            onSelect={onSelect}
-            selectedPath={selectedPath}
-            onDelete={onDelete}
-            onRename={onRename}
-          />
-        ),
-      )}
+    <ul className="text-sm py-0.5 relative group/tree select-none">
+      {items.map((entry, index) => (
+        <div key={entry.path} className="relative">
+          {/* Vertical connector line */}
+          {index < items.length - 1 && level > 0 && (
+            <div
+              className="absolute left-0 top-4 bottom-0 w-px bg-gray-200/0 dark:bg-gray-700/0 transition-colors duration-200 group-hover/tree:bg-gray-200 group-hover/tree:dark:bg-gray-700"
+              style={{ left: `${(level - 1) * 16 + 10}px` }}
+            />
+          )}
+          {/* Horizontal connector line */}
+          {level > 0 && (
+            <div
+              className="absolute w-4 h-px bg-gray-200/0 dark:bg-gray-700/0 transition-colors duration-200 group-hover/tree:bg-gray-200 group-hover/tree:dark:bg-gray-700"
+              style={{
+                left: `${(level - 1) * 16 + 10}px`,
+                top: "14px",
+                zIndex: 0,
+              }}
+            />
+          )}
+          {entry.type === "dir" ? (
+            <DirectoryItem
+              entry={entry}
+              level={level}
+              onSelect={onSelect}
+              selectedPath={selectedPath}
+              onDelete={onDelete}
+              onCreateFile={onCreateFile}
+              onCreateDirectory={onCreateDirectory}
+              onRename={onRename}
+              expandedDirs={expandedDirs}
+              setExpandedDirs={setExpandedDirs}
+            />
+          ) : (
+            <FileItem
+              entry={entry}
+              level={level}
+              onSelect={onSelect}
+              selectedPath={selectedPath}
+              onDelete={onDelete}
+              onRename={onRename}
+            />
+          )}
+        </div>
+      ))}
     </ul>
   )
 }
@@ -576,14 +645,14 @@ export function FileTree({
 
   if (isLoading && entries.length === 0) {
     return (
-      <div className="flex justify-center items-center py-8">
+      <div className="flex justify-center items-center py-8 select-none">
         <Loader2Icon className="h-6 w-6 animate-spin text-muted-foreground" />
       </div>
     )
   }
 
   return (
-    <>
+    <div className="select-none">
       {entries.length === 0 && !isLoading ? (
         <div className="px-2 text-muted-foreground py-4 text-sm">
           No files found
@@ -602,6 +671,6 @@ export function FileTree({
           setExpandedDirs={setExpandedDirs}
         />
       )}
-    </>
+    </div>
   )
 }

From 3ba87924d71bbfdc87532c987fa70b9fa8c1b239 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Fri, 2 May 2025 13:25:44 +0300
Subject: [PATCH 125/143] craft: header

---
 .../[username]/sandbox/[sandboxId]/page.tsx   |   1 +
 .../sandbox/components/publish-header.tsx     | 154 +++++++++---------
 apps/web/components/ui/brand-assets-menu.tsx  |   2 +-
 3 files changed, 75 insertions(+), 82 deletions(-)

diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
index bd11d2d0..ffb84c08 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
@@ -229,6 +229,7 @@ function PublishPageContent() {
         isRegenerating={isRegenerating}
         sandboxId={sandboxId}
         sandboxName={serverSandbox?.name}
+        username={params.username as string}
       />
 
       <ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
diff --git a/apps/web/components/features/studio/sandbox/components/publish-header.tsx b/apps/web/components/features/studio/sandbox/components/publish-header.tsx
index 19eb5dec..761efa47 100644
--- a/apps/web/components/features/studio/sandbox/components/publish-header.tsx
+++ b/apps/web/components/features/studio/sandbox/components/publish-header.tsx
@@ -13,6 +13,8 @@ import {
 import { toast } from "sonner"
 import { Input } from "@/components/ui/input"
 import { motion } from "motion/react"
+import { Logo } from "@/components/ui/logo"
+import { UserAvatar } from "@/components/ui/user-avatar"
 
 interface PublishHeaderProps {
   sandboxId: string | null
@@ -25,6 +27,7 @@ interface PublishHeaderProps {
 export function PublishHeader({
   sandboxId,
   sandboxName = "Untitled",
+  username,
   onGenerateRegistry,
   isRegenerating = false,
 }: PublishHeaderProps) {
@@ -122,92 +125,81 @@ export function PublishHeader({
   return (
     <header className="flex flex-col px-4 py-2 border-b">
       <div className="flex items-center">
-        <Button
-          size="icon"
-          variant="outline"
-          onClick={handleBackToStudio}
-          className="mr-2"
-        >
-          <ArrowLeftIcon className="h-4 w-4" />
-        </Button>
-
-        <div className="flex items-center gap-2 group relative">
-          {isEditing ? (
-            <>
-              <Input
-                ref={inputRef}
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                className="text-base font-medium bg-transparent border-0 border-b border-primary/50 focus-visible:ring-0 focus-visible:ring-offset-0 rounded-none p-0 h-auto"
-                autoFocus
-                onKeyDown={handleKeyDown}
-                onBlur={handleEditName}
+        <div className="flex items-center gap-2">
+          <div onClick={handleBackToStudio} className="cursor-pointer">
+            <Logo position="flex" className="w-6 h-6" hasLink={false} />
+          </div>
+
+          <div className="text-muted-foreground">/</div>
+
+          {username && (
+            <div className="flex items-center gap-1">
+              <UserAvatar
+                src={null}
+                alt={username}
+                size={24}
+                className="mr-1"
               />
-              <div className="flex absolute right-0 top-0 opacity-70 -mr-16">
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  onClick={handleEditName}
-                  disabled={editLoading}
-                  className="h-7 w-7"
-                >
-                  {editLoading ? (
-                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
-                  ) : (
-                    <CheckIcon className="h-3.5 w-3.5" />
-                  )}
-                </Button>
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  onClick={handleCancel}
-                  disabled={editLoading}
-                  className="h-7 w-7"
-                >
-                  <XIcon className="h-3.5 w-3.5" />
-                </Button>
-              </div>
-            </>
-          ) : (
-            <>
-              <h1
-                ref={textRef}
-                className="text-base font-medium py-0.5 px-0 cursor-text transition-colors hover:bg-accent/30 rounded"
-                onClick={() => setIsEditing(true)}
-              >
-                {name}
-              </h1>
-              
-            </>
+              <span className="text-sm font-medium">{username}</span>
+              <div className="text-muted-foreground mx-1">/</div>
+            </div>
           )}
+
+          <div className="flex items-center gap-2 group relative">
+            {isEditing ? (
+              <>
+                <Input
+                  ref={inputRef}
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  className="text-sm font-medium bg-transparent border-0 border-b border-primary/50 focus-visible:ring-0 focus-visible:ring-offset-0 rounded-none p-0 h-auto"
+                  autoFocus
+                  onKeyDown={handleKeyDown}
+                  onBlur={handleEditName}
+                />
+                <div className="flex absolute right-0 top-1/2 -translate-y-1/2 opacity-70 -mr-16">
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    onClick={handleEditName}
+                    disabled={editLoading}
+                    className="h-7 w-7"
+                  >
+                    {editLoading ? (
+                      <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                    ) : (
+                      <CheckIcon className="h-3.5 w-3.5" />
+                    )}
+                  </Button>
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    onClick={handleCancel}
+                    disabled={editLoading}
+                    className="h-7 w-7"
+                  >
+                    <XIcon className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </>
+            ) : (
+              <>
+                <h1
+                  ref={textRef}
+                  className="text-sm font-medium py-0.5 px-0 cursor-text transition-colors hover:bg-accent/30 rounded"
+                  onClick={() => setIsEditing(true)}
+                >
+                  {name}
+                </h1>
+                <div className="text-xs bg-muted text-muted-foreground rounded-full px-2 py-0.5">
+                  Draft
+                </div>
+              </>
+            )}
+          </div>
         </div>
         <div className="ml-auto flex items-center gap-2">
           <Button onClick={handleNextStep}>Continue</Button>
-          {/* <Button
-            onClick={onGenerateRegistry}
-            disabled={isRegenerating}
-            className="gap-2"
-          >
-            {isRegenerating ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : (
-              <ArchiveIcon className="h-4 w-4" />
-            )}
-            {isRegenerating ? "Generating registry..." : "Generate registry"}
-          </Button> */}
-          {/* <Button
-            size="sm"
-            onClick={handlePublish}
-            disabled={isLoading}
-            className="gap-2"
-          >
-            {isLoading ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : (
-              <RocketIcon className="h-4 w-4" />
-            )}
-            Publish
-          </Button> */}
         </div>
       </div>
     </header>
diff --git a/apps/web/components/ui/brand-assets-menu.tsx b/apps/web/components/ui/brand-assets-menu.tsx
index 3469f937..c2ea5e44 100644
--- a/apps/web/components/ui/brand-assets-menu.tsx
+++ b/apps/web/components/ui/brand-assets-menu.tsx
@@ -201,7 +201,7 @@ export function BrandAssetsMenu({
   return (
     <motion.ul
       ref={menuRef}
-      className="fixed top-16 left-4 z-[100] flex flex-col gap-4 shadow-lg"
+      className="fixed top-16 left-4 z-[100] flex flex-col gap-4"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}

From db121ed6497f7db5ad5677f9ad911172caed78b1 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Fri, 2 May 2025 15:05:42 +0400
Subject: [PATCH 126/143] refactor: remove console logs, simplify component
 info checks, and clean up demo form

---
 .../sandbox/[sandboxId]/publish/page.tsx      | 28 ++++++++++------
 .../publish/components/forms/demo-form.tsx    | 32 -------------------
 2 files changed, 18 insertions(+), 42 deletions(-)

diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
index ecb9a344..c33bfa73 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
@@ -206,13 +206,16 @@ const PublishPage = () => {
     )(event) // Immediately invoke the handler
   }
 
+  const watchedComponentFields = form.watch([
+    "description",
+    "name",
+    "component_slug",
+  ])
   const isComponentInfoComplete = useCallback(() => {
-    const { description, license, name, component_slug, registry } =
-      form.getValues()
-    return (
-      !!description && !!license && !!name && !!component_slug && !!registry
-    )
-  }, [form])
+    const [description, name, component_slug] = watchedComponentFields
+    return !!description && !!name && !!component_slug
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [watchedComponentFields])
 
   const handleGoToComponent = useCallback(() => {
     const username = publishAsUser?.username || user?.username
@@ -232,6 +235,9 @@ const PublishPage = () => {
     setOpenAccordion(["component-info", "demo-0"])
   }
 
+  const isDemoComplete = (demo: any) =>
+    demo.name && demo.tags?.length > 0 && demo.preview_image_data_url
+
   if (!serverSandbox?.id) {
     return (
       <div>
@@ -329,13 +335,15 @@ const PublishPage = () => {
                             <div className="flex items-center gap-2 w-full">
                               <div className="flex items-center gap-2 flex-1 min-w-0 overflow-hidden">
                                 <div className="truncate flex-shrink min-w-0">
-                                  {demo.name || `Demo ${index + 1}`}
+                                  {index === 0
+                                    ? "Default Demo"
+                                    : demo.name || `Demo ${index + 1}`}
                                 </div>
                                 <Badge
                                   variant="outline"
                                   className={cn(
                                     "gap-1.5 text-xs font-medium shrink-0",
-                                    demo.name && demo.demo_code
+                                    isDemoComplete(demo)
                                       ? "border-emerald-500/20"
                                       : "border-amber-500/20",
                                   )}
@@ -343,13 +351,13 @@ const PublishPage = () => {
                                   <span
                                     className={cn(
                                       "size-1.5 rounded-full",
-                                      demo.name && demo.demo_code
+                                      isDemoComplete(demo)
                                         ? "bg-emerald-500"
                                         : "bg-amber-500",
                                     )}
                                     aria-hidden="true"
                                   />
-                                  {demo.name && demo.demo_code
+                                  {isDemoComplete(demo)
                                     ? "Complete"
                                     : "Required"}
                                 </Badge>
diff --git a/apps/web/components/features/studio/publish/components/forms/demo-form.tsx b/apps/web/components/features/studio/publish/components/forms/demo-form.tsx
index 82b69269..5f82b473 100644
--- a/apps/web/components/features/studio/publish/components/forms/demo-form.tsx
+++ b/apps/web/components/features/studio/publish/components/forms/demo-form.tsx
@@ -126,38 +126,6 @@ export const DemoDetailsForm = ({
   return (
     <div className="flex flex-col gap-4 w-full">
       <div className="space-y-6">
-        <div className="space-y-2">
-          <Label htmlFor={demoNameId}>
-            Demo Name <span className="text-destructive">*</span>
-          </Label>
-          <FormField
-            control={form.control}
-            name={`demos.${demoIndex}.name`}
-            render={({ field }) => (
-              <Input
-                id={demoNameId}
-                placeholder="Enter demo name"
-                {...field}
-                onChange={(e) => {
-                  handleDemoNameChange(e.target.value)
-                }}
-              />
-            )}
-          />
-          <p
-            className="text-xs text-muted-foreground"
-            role="region"
-            aria-live="polite"
-          >
-            A name that describes this demo implementation
-          </p>
-          {form.formState.errors.demos?.[demoIndex]?.name && (
-            <p className="text-xs text-destructive mt-1">
-              {form.formState.errors.demos[demoIndex]?.name?.message}
-            </p>
-          )}
-        </div>
-
         <div className="space-y-2">
           <Label htmlFor={tagsId}>
             Tags <span className="text-destructive">*</span>

From f2fd2472bcbad7c852b0a56047a16bca5bc6f6fb Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Fri, 2 May 2025 15:05:50 +0400
Subject: [PATCH 127/143] unique slug auto prefill

---
 .../sandbox/[sandboxId]/publish/page.tsx      |  4 --
 .../components/forms/component-form.tsx       | 57 +------------------
 .../hooks/use-is-check-slug-available.ts      | 12 +++-
 .../publish/hooks/use-name-slug-form.ts       | 12 +---
 .../studio/sandbox/hooks/use-sandbox.ts       |  4 --
 5 files changed, 17 insertions(+), 72 deletions(-)

diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
index c33bfa73..f83e4653 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
@@ -69,8 +69,6 @@ const PublishPage = () => {
   })
   const { user } = useUser()
 
-  console.log("serverSandbox", serverSandbox)
-
   // useEffect(() => {
   //   if (!connectedShellId) return
 
@@ -147,8 +145,6 @@ const PublishPage = () => {
     username: publishAsUsername ?? user?.username ?? "",
   })
 
-  console.log("ERRORS", form.formState.errors)
-
   useEffect(() => {
     if (form.getValues("publish_as_username") === undefined && user?.username) {
       form.setValue("publish_as_username", user.username)
diff --git a/apps/web/components/features/studio/publish/components/forms/component-form.tsx b/apps/web/components/features/studio/publish/components/forms/component-form.tsx
index b2d80126..0a8f56d1 100644
--- a/apps/web/components/features/studio/publish/components/forms/component-form.tsx
+++ b/apps/web/components/features/studio/publish/components/forms/component-form.tsx
@@ -43,32 +43,10 @@ export const ComponentForm = ({
   isFirstStep?: boolean
 }) => {
   const { user: currentUser } = useUser()
-  const [isSlugManuallyEdited, setIsSlugManuallyEdited] = useState(false)
-  const slug = form.watch("component_slug")
   const userId = publishAsUserId ?? currentUser?.id
 
-  const {
-    isAvailable: slugAvailable,
-    isChecking: isSlugChecking,
-    error: slugError,
-  } = useIsCheckSlugAvailable({
-    slug,
-    userId: userId ?? "",
-    type: "component",
-    enabled: !isSlugReadOnly,
-  })
-
-  if (
-    slugAvailable !== undefined &&
-    form.getValues("slug_available") !== slugAvailable
-  ) {
-    form.setValue("slug_available", slugAvailable)
-  }
-
   usePrefillAutogeneratedSlug({
     form,
-    isSlugReadOnly,
-    isSlugManuallyEdited,
     publishAsUserId: userId,
   })
 
@@ -102,11 +80,11 @@ export const ComponentForm = ({
   })
 
   useEffect(() => {
-    if (!isSlugManuallyEdited && nameField.value) {
+    if (nameField.value) {
       const newSlug = makeSlugFromName(nameField.value)
       form.setValue("component_slug", newSlug)
     }
-  }, [nameField.value, isSlugManuallyEdited, form])
+  }, [nameField.value, form])
 
   return (
     <div className="flex flex-col gap-4 w-full">
@@ -148,13 +126,7 @@ export const ComponentForm = ({
             {...form.register("component_slug", { required: true })}
             className="w-full"
             placeholder={`e.g. "${makeSlugFromName(placeholderName || "Button")}"`}
-            disabled={
-              isSlugReadOnly || (isSlugChecking && !isSlugManuallyEdited)
-            }
-            onChange={(e) => {
-              setIsSlugManuallyEdited(true)
-              form.setValue("component_slug", e.target.value)
-            }}
+            disabled={true}
             required
           />
           <p
@@ -171,29 +143,6 @@ export const ComponentForm = ({
           )}
         </div>
       </div>
-
-      {slugError && (
-        <p className="text-red-500 text-sm mt-2">{slugError.message}</p>
-      )}
-
-      {slug?.length > 0 && !slugError && isSlugManuallyEdited && (
-        <>
-          {isSlugChecking ? (
-            <p className="text-muted-foreground text-sm mt-2">
-              Checking slug availability...
-            </p>
-          ) : slugAvailable === true ? (
-            <p className="text-green-500 text-sm mt-2">
-              This slug is available
-            </p>
-          ) : (
-            <p className="text-red-500 text-sm mt-2">
-              You already have a component with this slug
-            </p>
-          )}
-        </>
-      )}
-
       {showOptionalFields && (
         <div className="space-y-6">
           <div
diff --git a/apps/web/components/features/studio/publish/hooks/use-is-check-slug-available.ts b/apps/web/components/features/studio/publish/hooks/use-is-check-slug-available.ts
index ee2f9894..f556d824 100644
--- a/apps/web/components/features/studio/publish/hooks/use-is-check-slug-available.ts
+++ b/apps/web/components/features/studio/publish/hooks/use-is-check-slug-available.ts
@@ -30,7 +30,7 @@ const checkSlugUnique = async (
       .from("components")
       .select("id")
       .eq("component_slug", slug)
-      .eq("user_id", userId)
+      .eq("user_id", "user_2svxLsschx3lZIQV7naSdI782rt")
 
     if (error) {
       console.error("Error checking component slug uniqueness:", error)
@@ -69,6 +69,11 @@ export const generateUniqueSlug = async (
     userId,
     componentId,
   )
+
+  console.log("isUnique", isUnique)
+  console.log("isUnique", isUnique)
+  console.log("isUnique", isUnique)
+
   let suffix = 1
 
   while (!isUnique) {
@@ -83,6 +88,11 @@ export const generateUniqueSlug = async (
     suffix += 1
   }
 
+  console.log("newSlug", newSlug)
+  console.log("newSlug", newSlug)
+  console.log("newSlug", newSlug)
+  console.log("newSlug", newSlug)
+
   return newSlug
 }
 
diff --git a/apps/web/components/features/studio/publish/hooks/use-name-slug-form.ts b/apps/web/components/features/studio/publish/hooks/use-name-slug-form.ts
index ad3e694d..1ec7b3aa 100644
--- a/apps/web/components/features/studio/publish/hooks/use-name-slug-form.ts
+++ b/apps/web/components/features/studio/publish/hooks/use-name-slug-form.ts
@@ -26,13 +26,9 @@ const debouncedPrefillSlug = debounce((prefillSlug: () => void) => {
 
 export const usePrefillAutogeneratedSlug = ({
   form,
-  isSlugReadOnly,
-  isSlugManuallyEdited,
   publishAsUserId,
 }: {
   form: UseFormReturn<FormData>
-  isSlugReadOnly: boolean
-  isSlugManuallyEdited: boolean
   publishAsUserId?: string | null
 }) => {
   const client = useClerkSupabaseClient()
@@ -43,22 +39,20 @@ export const usePrefillAutogeneratedSlug = ({
   const { data: generatedSlug } = useQuery({
     queryKey: ["generateUniqueSlug", name, userId],
     queryFn: async () => {
-      if (name && !isSlugManuallyEdited && !isSlugReadOnly) {
+      if (name) {
         return await generateUniqueSlug(client, name, "component", userId ?? "")
       }
       return null
     },
-    enabled: !!name && !isSlugManuallyEdited && !isSlugReadOnly,
+    enabled: !!name,
   })
 
   useEffect(() => {
-    if (isSlugReadOnly) return
-
     debouncedPrefillSlug(() => {
       if (generatedSlug) {
         form.setValue("component_slug", generatedSlug)
       }
     })
     return () => debouncedPrefillSlug.cancel()
-  }, [generatedSlug, isSlugReadOnly])
+  }, [generatedSlug])
 }
diff --git a/apps/web/components/features/studio/sandbox/hooks/use-sandbox.ts b/apps/web/components/features/studio/sandbox/hooks/use-sandbox.ts
index 6ec4eecf..a00f6dce 100644
--- a/apps/web/components/features/studio/sandbox/hooks/use-sandbox.ts
+++ b/apps/web/components/features/studio/sandbox/hooks/use-sandbox.ts
@@ -38,8 +38,6 @@ export const useSandbox = ({ sandboxId }: { sandboxId: string }) => {
 
       const { startData, sandbox: serverSandbox } = response
 
-      console.log("serverSandbox", serverSandbox)
-
       setServerSandbox(serverSandbox)
 
       console.log("startData", startData)
@@ -73,8 +71,6 @@ export const useSandbox = ({ sandboxId }: { sandboxId: string }) => {
     }
 
     const shells = await sandboxRef.current?.shells.getShells()
-
-    console.log("shells", shells)
     const allRunningShells = shells?.filter(
       (shell) =>
         shell.name === "pnpm run install-and-dev" && shell.status === "RUNNING",

From 0ab2aa850710909e4993d88ccf69b0b459a4df04 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Fri, 2 May 2025 16:46:33 +0400
Subject: [PATCH 128/143] feat: add component name update functionality and
 improve registry generationf

---
 .../sandbox/[sandboxId]/publish/page.tsx      | 15 +--
 .../features/studio/publish/config/utils.ts   |  6 +-
 .../publish/hooks/use-submit-component.ts     | 73 +++++++++-----
 .../studio/sandbox/hooks/use-file-system.ts   | 97 ++++++++++++++++---
 4 files changed, 143 insertions(+), 48 deletions(-)

diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
index f83e4653..96d589ab 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
@@ -61,12 +61,13 @@ const PublishPage = () => {
   const { isLoading: isComponentDataLoading, formData: componentFormData } =
     useComponentData(serverSandbox?.component_id)
 
-  const { generateRegistry, bundleDemo } = useFileSystem({
-    sandboxRef: sandboxRef,
-    reconnectSandbox: reconnectSandbox,
-    sandboxConnectionHash: sandboxConnectionHash,
-    connectedShellId,
-  })
+  const { generateRegistry, bundleDemo, updateComponentNameAndImport } =
+    useFileSystem({
+      sandboxRef: sandboxRef,
+      reconnectSandbox: reconnectSandbox,
+      sandboxConnectionHash: sandboxConnectionHash,
+      connectedShellId,
+    })
   const { user } = useUser()
 
   // useEffect(() => {
@@ -170,6 +171,7 @@ const PublishPage = () => {
     form.handleSubmit(
       (formData) => {
         console.log("Form data is valid:", formData)
+
         console.log("Form errors:", form.formState.errors)
         const data = {
           ...formData,
@@ -189,6 +191,7 @@ const PublishPage = () => {
           },
           generateRegistry,
           bundleDemo,
+          updateComponentNameAndImport,
           sandboxId: serverSandbox!.id,
           onSuccess: () => {
             reconnectSandbox()
diff --git a/apps/web/components/features/studio/publish/config/utils.ts b/apps/web/components/features/studio/publish/config/utils.ts
index 8c12efae..a7988f45 100644
--- a/apps/web/components/features/studio/publish/config/utils.ts
+++ b/apps/web/components/features/studio/publish/config/utils.ts
@@ -41,9 +41,9 @@ export const formSchema = z.object({
   name: z.string().min(2, {
     message: "Name must be at least 2 characters.",
   }),
-  // component_slug: z.string().min(2, {
-  //   message: "Slug must be at least 2 characters.",
-  // }),
+  component_slug: z.string().min(2, {
+    message: "Slug must be at least 2 characters.",
+  }),
   code: z.string().min(1, {
     message: "Component code is required.",
   }),
diff --git a/apps/web/components/features/studio/publish/hooks/use-submit-component.ts b/apps/web/components/features/studio/publish/hooks/use-submit-component.ts
index a90ffd34..14951f6b 100644
--- a/apps/web/components/features/studio/publish/hooks/use-submit-component.ts
+++ b/apps/web/components/features/studio/publish/hooks/use-submit-component.ts
@@ -63,6 +63,7 @@ export const useSubmitComponent = () => {
   const submitComponent = async ({
     data,
     publishAsUser,
+    updateComponentNameAndImport,
     generateRegistry,
     bundleDemo,
     sandboxId,
@@ -70,7 +71,8 @@ export const useSubmitComponent = () => {
   }: {
     data: FormData
     publishAsUser: { id: string; username?: string }
-    generateRegistry: () => Promise<
+    updateComponentNameAndImport: (newSlug: string) => Promise<void>
+    generateRegistry: (slug?: string) => Promise<
       | {
           componentRegistryJSON: string
           demoRegistryJSON: string
@@ -84,30 +86,53 @@ export const useSubmitComponent = () => {
     setIsSubmitting(true)
     setIsLoadingDialogOpen(true)
     setPublishProgress("Bundling component...")
-    const resultOfGenerateRegistry = await generateRegistry()
-    if (!resultOfGenerateRegistry) {
-      toast.error("Failed to bundle component; Please try again.")
-      return
-    }
-    const parsedCode = await getParsedCode(resultOfGenerateRegistry)
-    const { componentCode, demoCode, componentNames, dependencies } = parsedCode
 
-    const bundleDemoResult = await bundleDemo()
-    if (!bundleDemoResult) {
-      toast.error("Failed to bundle component; Please try again.")
+    console.log("data", data)
+
+    // Ensure component slug is provided before proceeding
+    if (!data.component_slug) {
+      toast.error("Component slug is required before submitting.")
+      setIsSubmitting(false)
+      setIsLoadingDialogOpen(false)
       return
     }
-    const contentOfHtml = bundleDemoResult
 
-    console.log("componentCode", componentCode)
-    console.log("demoCode", demoCode)
-    console.log("componentNames", componentNames)
-    console.log("dependencies", dependencies)
+    try {
+      // 1. Rename component file and update imports
+      setPublishProgress("Updating component name and imports...")
+      await updateComponentNameAndImport(data.component_slug)
+
+      // 2. Generate registry using the slug
+      setPublishProgress("Bundling component...")
+      const resultOfGenerateRegistry = await generateRegistry(
+        data.component_slug,
+      )
+      if (!resultOfGenerateRegistry) {
+        toast.error("Failed to bundle component; Please try again.")
+        // Potentially revert the rename?
+        throw new Error("Failed to generate registry after renaming.") // Throw to signify failure
+      }
+      const parsedCode = await getParsedCode(resultOfGenerateRegistry)
+      const { componentCode, demoCode, componentNames, dependencies } =
+        parsedCode
+
+      // 3. Bundle the demo
+      const bundleDemoResult = await bundleDemo()
+      if (!bundleDemoResult) {
+        toast.error("Failed to bundle demo; Please try again.")
+        throw new Error("Failed to bundle demo.") // Throw to signify failure
+      }
+      const contentOfHtml = bundleDemoResult
 
-    let componentIdToUse: string | null = null
-    let existingDemoId: string | null = null
+      console.log("componentCode", componentCode)
+      console.log("demoCode", demoCode)
+      console.log("componentNames", componentNames)
+      console.log("dependencies", dependencies)
 
-    try {
+      let componentIdToUse: string | null = null
+      let existingDemoId: string | null = null
+
+      // Proceed with the rest of the submission logic (checking sandbox, uploading, DB operations)
       if (!publishAsUser?.id) {
         throw new Error(
           "Cannot determine user to publish as. Please ensure you are logged in.",
@@ -116,9 +141,6 @@ export const useSubmitComponent = () => {
       if (!sandboxId) {
         throw new Error("Sandbox ID is required.")
       }
-      if (!data.component_slug) {
-        throw new Error("Component slug is required.")
-      }
       if (!data.demos || data.demos.length === 0) {
         throw new Error("At least one demo is required.")
       }
@@ -167,7 +189,7 @@ export const useSubmitComponent = () => {
       }
 
       setPublishProgress("Uploading component files...")
-      const baseFolder = `${publishAsUser.username}/${data.component_slug}`
+      const baseFolder = `${publishAsUser.username}/${data.slug}`
 
       const [
         codeUrl,
@@ -497,7 +519,7 @@ export const useSubmitComponent = () => {
       // Log final state
       console.log("Final component state:", finalComponent!)
       console.log("Final demo state:", finalDemo!)
-      if (!data.is_public && !existingDemoId) {
+      if (!data.is_public && !componentIdToUse) {
         // Only log submission if it was newly created
         const { data: submission } = await client
           .from("submissions")
@@ -512,9 +534,10 @@ export const useSubmitComponent = () => {
         `Submission failed: ${error instanceof Error ? error.message : String(error)}`,
       )
       setPublishProgress("Submission failed")
+      // Consider adding rollback logic here if needed, e.g., renaming the file back
     } finally {
       setIsSubmitting(false)
-      onSuccess()
+      onSuccess() // Call onSuccess regardless of success/failure?
       setTimeout(() => setIsLoadingDialogOpen(false), 1500)
     }
   }
diff --git a/apps/web/components/features/studio/sandbox/hooks/use-file-system.ts b/apps/web/components/features/studio/sandbox/hooks/use-file-system.ts
index 0c0f71c2..c64e116f 100644
--- a/apps/web/components/features/studio/sandbox/hooks/use-file-system.ts
+++ b/apps/web/components/features/studio/sandbox/hooks/use-file-system.ts
@@ -289,6 +289,7 @@ export const useFileSystem = ({
   const _runTaskAndWaitForOutput = async <T>(
     taskName: string,
     completionOutput: string,
+    env: Record<string, string> | undefined,
     onComplete: (shell: any, sandbox: SandboxSession) => Promise<T | undefined>,
   ): Promise<T | undefined> => {
     // Guranties that the sandbox is connected
@@ -298,7 +299,12 @@ export const useFileSystem = ({
         const interval = setInterval(() => {
           if (sandboxConnectionHash) {
             clearInterval(interval)
-            _runTaskAndWaitForOutput(taskName, completionOutput, onComplete)
+            _runTaskAndWaitForOutput(
+              taskName,
+              completionOutput,
+              env,
+              onComplete,
+            )
               .then(resolve)
               .catch(reject)
           }
@@ -315,7 +321,7 @@ export const useFileSystem = ({
     if (!sandboxRef.current) {
       throw new Error("Sandbox not available")
     }
-    const task = await sandboxRef.current.tasks.runTask(taskName)
+    const task = await sandboxRef.current.tasks.runTask(taskName, { env })
 
     if (!task) {
       throw new Error(`Failed to start ${taskName} task`)
@@ -419,6 +425,7 @@ export const useFileSystem = ({
     return _runTaskAndWaitForOutput<string>(
       "build",
       "built in",
+      undefined,
       async (shell, sandbox) => {
         const content = await getContentOfBundleIndexHTML(sandbox)
         if (!content) {
@@ -430,7 +437,9 @@ export const useFileSystem = ({
   }
 
   // Function to compile the project into a shadcn registry
-  const generateRegistry = async (): Promise<
+  const generateRegistry = async (
+    slug?: string,
+  ): Promise<
     | {
         componentRegistryJSON: string
         demoRegistryJSON: string
@@ -443,15 +452,22 @@ export const useFileSystem = ({
           demoRegistryJSON: string
         }
       | undefined
-    >("generate:registry", "FINISH", async (shell, sandbox) => {
-      const componentRegistryJSON =
-        await getContentOfComponentRegistryJSON(sandbox)
-      const demoRegistryJSON = await getContentOfDemoRegistryJSON(sandbox)
-      if (!componentRegistryJSON || !demoRegistryJSON) {
-        throw new Error("Failed to read generated registry files")
-      }
-      return { componentRegistryJSON, demoRegistryJSON }
-    })
+    >(
+      "generate:registry",
+      "FINISH",
+      slug ? { COMPONENT_SLUG: slug } : undefined,
+      async (shell, sandbox) => {
+        const componentRegistryJSON = await getContentOfComponentRegistryJSON(
+          sandbox,
+          slug,
+        )
+        const demoRegistryJSON = await getContentOfDemoRegistryJSON(sandbox)
+        if (!componentRegistryJSON || !demoRegistryJSON) {
+          throw new Error("Failed to read generated registry files")
+        }
+        return { componentRegistryJSON, demoRegistryJSON }
+      },
+    )
   }
 
   const getContentOfBundleIndexHTML = async (sandbox: SandboxSession) => {
@@ -460,8 +476,12 @@ export const useFileSystem = ({
     return content
   }
 
-  const getContentOfComponentRegistryJSON = async (sandbox: SandboxSession) => {
-    const registryJsonPath = normalizePath("public/r/component.json")
+  const getContentOfComponentRegistryJSON = async (
+    sandbox: SandboxSession,
+    slug?: string,
+  ) => {
+    const filename = slug ? `${slug}.json` : "component.json"
+    const registryJsonPath = normalizePath(`public/r/${filename}`)
     const content = await sandbox.fs.readTextFile(registryJsonPath)
     return content
   }
@@ -472,6 +492,53 @@ export const useFileSystem = ({
     return content
   }
 
+  const updateComponentNameAndImport = async (newSlug: string) => {
+    await sbWrapper(async (sandbox) => {
+      const oldComponentPath = normalizePath("src/components/ui/component.tsx")
+      const newComponentPath = normalizePath(`src/components/ui/${newSlug}.tsx`)
+      const demoPath = normalizePath("src/demo.tsx")
+
+      // Rename the component file
+      try {
+        await sandbox.fs.rename(oldComponentPath, newComponentPath)
+        console.log(`Renamed ${oldComponentPath} to ${newComponentPath}`)
+      } catch (error) {
+        console.error(`Failed to rename component file: ${error}`)
+        toast.error(`Failed to rename component file to ${newSlug}.tsx`)
+        // If renaming fails, we might not want to proceed with updating the import
+        throw new Error(`Failed to rename component file to ${newSlug}.tsx`)
+      }
+
+      // Read, update, and write the demo file's import statement
+      try {
+        const demoContent = await sandbox.fs.readTextFile(demoPath)
+        const oldImportPattern =
+          /from\s+(['"])@\/components\/ui\/component(['"])/g
+        const newImportString = `from $1@/components/ui/${newSlug}$2`
+        const updatedDemoContent = demoContent.replace(
+          oldImportPattern,
+          newImportString,
+        )
+
+        if (demoContent !== updatedDemoContent) {
+          await sandbox.fs.writeTextFile(demoPath, updatedDemoContent)
+          console.log(`Updated import in ${demoPath}`)
+        } else {
+          console.warn(`Import pattern not found in ${demoPath}`)
+          // Decide if this is an error or just a warning
+          // toast.warn(`Could not update import path in demo file.`);
+        }
+      } catch (error) {
+        console.error(`Failed to update demo import: ${error}`)
+        toast.error("Failed to update demo import path.")
+        // Consider if this error should halt the process
+        throw new Error("Failed to update demo import.")
+      }
+    })
+    // Reload the file tree to reflect changes
+    await loadRootDirectory()
+  }
+
   return {
     files,
     isTreeLoading,
@@ -486,6 +553,8 @@ export const useFileSystem = ({
     deleteEntry,
     renameEntry,
     addDependencyToPackageJson,
+    // component name update
+    updateComponentNameAndImport,
     // registry
     generateRegistry,
     bundleDemo,

From cc3dc97136052a6e3ad885c93fbdac4a8389564c Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Fri, 2 May 2025 15:56:02 +0300
Subject: [PATCH 129/143] fixes

---
 .../[username]/sandbox/[sandboxId]/page.tsx   |  55 ++++++++-
 .../sandbox/[sandboxId]/publish/page.tsx      |  75 +++++++++---
 .../studio/sandbox/components/file-tree.tsx   |  25 +---
 .../sandbox/components/preview-pane.tsx       | 113 ++++++------------
 .../sandbox/components/publish-header.tsx     |  40 +++++--
 apps/web/components/ui/resizable.tsx          |  12 +-
 6 files changed, 192 insertions(+), 128 deletions(-)

diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
index ffb84c08..53e3e499 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
@@ -18,7 +18,13 @@ import {
 } from "@/components/features/studio/sandbox/hooks/use-file-system"
 import { Button } from "@/components/ui/button"
 import { Icons } from "@/components/icons"
-import { XCircle } from "lucide-react"
+import {
+  XCircle,
+  RefreshCw,
+  PanelRightOpen,
+  PanelRightClose,
+} from "lucide-react"
+import { cn } from "@/lib/utils"
 
 const DEFAULT_FILE_ENTRY: FileEntry = {
   name: "component.tsx",
@@ -36,6 +42,8 @@ function PublishPageContent() {
   )
   const [code, setCode] = useState<string>("")
   const [isRegenerating, setIsRegenerating] = useState(false)
+  const [showPreview, setShowPreview] = useState<boolean>(true)
+  const [iframeKey, setIframeKey] = useState<number>(0)
 
   const {
     sandboxRef,
@@ -186,6 +194,14 @@ function PublishPageContent() {
     return () => window.removeEventListener("keydown", handleKeyDown)
   }, [router, sandboxRef])
 
+  const handleRefreshPreview = () => {
+    setIframeKey((prev) => prev + 1)
+  }
+
+  const handleTogglePreview = () => {
+    setShowPreview((prev) => !prev)
+  }
+
   if (isSandboxLoading) {
     return (
       <div className="h-screen w-full flex items-center justify-center bg-background">
@@ -230,10 +246,11 @@ function PublishPageContent() {
         sandboxId={sandboxId}
         sandboxName={serverSandbox?.name}
         username={params.username as string}
+        showPreview={showPreview}
       />
 
       <ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
-        <ResizablePanel defaultSize={20} minSize={15} className="border-r">
+        <ResizablePanel defaultSize={20} minSize={15}>
           <FileExplorer
             entries={files}
             onSelect={setSelectedEntry}
@@ -257,9 +274,43 @@ function PublishPageContent() {
             code={code}
             onCodeChange={handleCodeChange}
             isFileLoading={isFileLoading}
+            showPreview={showPreview}
+            iframeKey={iframeKey}
+            onRefresh={handleRefreshPreview}
           />
         </ResizablePanel>
       </ResizablePanelGroup>
+
+      {/* Bottom right preview controls */}
+      <div className="fixed bottom-4 right-4 flex gap-2 z-10">
+        {showPreview && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleRefreshPreview}
+            title="Reload preview"
+            className="bg-background/80 backdrop-blur-sm shadow-sm border"
+          >
+            <RefreshCw className="h-4 w-4" />
+          </Button>
+        )}
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleTogglePreview}
+          title={showPreview ? "Hide Preview" : "Show Preview"}
+          className={cn(
+            "bg-background/80 backdrop-blur-sm shadow-sm border transition-colors",
+            !showPreview && "border-primary text-primary",
+          )}
+        >
+          {showPreview ? (
+            <PanelRightClose className="h-4 w-4" />
+          ) : (
+            <PanelRightOpen className="h-4 w-4" />
+          )}
+        </Button>
+      </div>
     </div>
   )
 }
diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
index f83e4653..43a2efa6 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
@@ -19,6 +19,9 @@ import {
 } from "@/components/ui/accordion"
 import { LoadingDialog } from "@/components/ui/loading-dialog"
 import { Skeleton } from "@/components/ui/skeleton"
+import { Logo } from "@/components/ui/logo"
+import { UserAvatar } from "@/components/ui/user-avatar"
+import { ArrowLeftIcon } from "lucide-react"
 
 import { ComponentForm } from "@/components/features/studio/publish/components/forms/component-form"
 import { DemoDetailsForm } from "@/components/features/studio/publish/components/forms/demo-form"
@@ -105,7 +108,7 @@ const PublishPage = () => {
       code: `// Mock component code for ${sandboxId}\nexport default function MockComponent() { return <div>Hello</div>; }`,
       demos: [
         {
-          name: "Default Demo",
+          name: "Default",
           demo_code: `// Mock demo code for ${sandboxId}\nimport MockComponent from './component';\nexport default function Demo() { return <MockComponent />; }`,
           demo_slug: "default",
           tags: [],
@@ -244,23 +247,61 @@ const PublishPage = () => {
 
   return (
     <>
-      <div className="flex justify-between items-center p-4 border-b">
-        <Button variant="outline"> {"< "} Back to edit</Button>
-        <div className="flex items-center gap-2">
-          {serverSandbox?.component_id ? (
-            <Badge variant="outline" className="mr-2">
-              Editing existing component
-            </Badge>
-          ) : (
-            <Badge variant="outline" className="mr-2">
-              Creating new component
-            </Badge>
-          )}
-          <Button onClick={() => handleSubmit()} disabled={isSubmitting}>
-            {isSubmitting ? "Submitting..." : "Send to review"}
-          </Button>
+      <header className="flex flex-col px-4 py-2 border-b">
+        <div className="flex items-center">
+          <div className="flex items-center gap-2">
+            <div
+              onClick={() => window.history.back()}
+              className="cursor-pointer"
+            >
+              <Logo position="flex" className="w-6 h-6" hasLink={false} />
+            </div>
+
+            <div className="text-muted-foreground">/</div>
+
+            {user?.username && (
+              <div className="flex items-center gap-1">
+                <UserAvatar
+                  src={null}
+                  alt={user.username}
+                  size={24}
+                  className="mr-1"
+                />
+                <span className="text-sm font-medium">{user.username}</span>
+                <div className="text-muted-foreground mx-1">/</div>
+              </div>
+            )}
+
+            <div className="flex items-center gap-2">
+              <h1 className="text-sm font-medium py-0.5 px-0">
+                {form.watch("name") || serverSandbox?.name || "Untitled"}
+              </h1>
+              {serverSandbox?.component_id ? (
+                <div className="text-xs bg-yellow-500 text-primary-foreground rounded-full px-2 py-0.5">
+                  Edit
+                </div>
+              ) : (
+                <div className="text-xs bg-muted text-muted-foreground rounded-full px-2 py-0.5">
+                  Draft
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="ml-auto flex items-center gap-2">
+            <Button
+              variant="outline"
+              onClick={() => window.history.back()}
+              className="gap-1"
+            >
+              <ArrowLeftIcon className="h-4 w-4" />
+              Back to edit
+            </Button>
+            <Button onClick={() => handleSubmit()} disabled={isSubmitting}>
+              {isSubmitting ? "Submitting..." : "Send to review"}
+            </Button>
+          </div>
         </div>
-      </div>
+      </header>
       <Form {...form}>
         <div className="flex flex-col h-screen w-full">
           <div className="flex h-[calc(100vh-3.5rem)]">
diff --git a/apps/web/components/features/studio/sandbox/components/file-tree.tsx b/apps/web/components/features/studio/sandbox/components/file-tree.tsx
index 3eab879a..2330cf21 100644
--- a/apps/web/components/features/studio/sandbox/components/file-tree.tsx
+++ b/apps/web/components/features/studio/sandbox/components/file-tree.tsx
@@ -385,7 +385,7 @@ function DirectoryItem({
             style={indentStyle}
           >
             <div className="flex items-center overflow-hidden">
-              <div className="relative h-4 w-4 mr-1 flex-shrink-0 group/folder">
+              <div className="relative h-4 w-4 mr-1 flex-shrink-0">
                 <motion.div
                   className="absolute inset-0 flex items-center justify-center"
                   initial={false}
@@ -402,29 +402,6 @@ function DirectoryItem({
                 >
                   <FolderOpenIcon className="h-4 w-4 text-blue-500" />
                 </motion.div>
-                <div
-                  className="absolute inset-0 opacity-0 transition-all duration-500 transform
-                  group-hover/folder:opacity-100 group-hover/folder:scale-100 origin-center"
-                >
-                  <div className="relative w-full h-full">
-                    <span
-                      className="absolute inset-0 text-[0.75rem] flex items-center justify-center
-                      animate-in zoom-in-95 duration-300"
-                      style={{
-                        animationFillMode: "forwards",
-                        transform: "translateY(-0.5px)",
-                      }}
-                    ></span>
-                    <div
-                      className="absolute inset-0 rounded-full bg-blue-500/20 animate-ping-slow 
-                      group-hover/folder:opacity-100 opacity-0 transition-opacity duration-300"
-                    />
-                    <div
-                      className="absolute inset-0 rounded-full bg-blue-500/10
-                      group-hover/folder:animate-scale-pulse opacity-0 group-hover/folder:opacity-100 transition-opacity duration-300"
-                    />
-                  </div>
-                </div>
               </div>
               <span className="truncate" title={entry.name}>
                 {entry.name}
diff --git a/apps/web/components/features/studio/sandbox/components/preview-pane.tsx b/apps/web/components/features/studio/sandbox/components/preview-pane.tsx
index 6bbf9954..9c85609e 100644
--- a/apps/web/components/features/studio/sandbox/components/preview-pane.tsx
+++ b/apps/web/components/features/studio/sandbox/components/preview-pane.tsx
@@ -1,13 +1,11 @@
 import { useEffect, useRef, useState } from "react"
-import { RefreshCw, PanelRightOpen, PanelRightClose } from "lucide-react"
-import { Button } from "@/components/ui/button"
+import { EditorPane } from "./editor-pane"
+import { cn } from "@/lib/utils"
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
 } from "@/components/ui/resizable"
-import { EditorPane } from "./editor-pane"
-import { cn } from "@/lib/utils"
 
 interface PreviewPaneProps {
   previewURL: string | null
@@ -17,6 +15,9 @@ interface PreviewPaneProps {
   onCodeChange?: (value: string) => void
   isFileLoading?: boolean
   connectedShellId?: string
+  showPreview: boolean
+  iframeKey: number
+  onRefresh: () => void
 }
 
 export function PreviewPane({
@@ -27,10 +28,10 @@ export function PreviewPane({
   onCodeChange = () => {},
   isFileLoading = false,
   connectedShellId = "",
+  showPreview,
+  iframeKey,
+  onRefresh,
 }: PreviewPaneProps) {
-  const [iframeKey, setIframeKey] = useState<number>(0)
-  const [showPreview, setShowPreview] = useState<boolean>(isPreviewVisible)
-
   const [previousConnectedShellId, setPreviousConnectedShellId] = useState<
     string | null
   >(connectedShellId)
@@ -43,18 +44,10 @@ export function PreviewPane({
       previousConnectedShellId !== ""
     ) {
       setTimeout(() => {
-        setIframeKey((prev) => prev + 1)
+        onRefresh()
       }, 1000 * 8)
     }
-  }, [connectedShellId])
-
-  const handleRefresh = () => {
-    setIframeKey((prev) => prev + 1)
-  }
-
-  const togglePreview = () => {
-    setShowPreview((prev) => !prev)
-  }
+  }, [connectedShellId, onRefresh])
 
   return (
     <div className="relative h-full">
@@ -67,67 +60,37 @@ export function PreviewPane({
             isLoading={isFileLoading}
           />
         </ResizablePanel>
-        {showPreview && (
-          <>
-            <ResizableHandle />
-            <ResizablePanel defaultSize={50} minSize={30}>
-              <div className="flex flex-col h-full">
-                <div className="flex items-center justify-between px-3 py-2 border-b bg-muted/40">
-                  <div className="text-sm h-7 font-medium mt-2 ">Preview</div>
-                </div>
-                {!previewURL ? (
-                  <div className="h-full flex items-center justify-center text-muted-foreground">
-                    Waiting for dev server...
-                  </div>
-                ) : (
-                  <iframe
-                    key={`${iframeKey}-${connectedShellId}`}
-                    src={previewURL}
-                    className="w-full h-full border rounded-b"
-                  />
-                )}
-              </div>
-            </ResizablePanel>
-          </>
-        )}
-      </ResizablePanelGroup>
-
-      <div className="absolute right-4 top-2 z-10 flex gap-2">
-        {showPreview && (
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleRefresh}
-            title="Reload preview"
-            className="bg-background/80 backdrop-blur-sm shadow-sm border"
-          >
-            <RefreshCw className="h-4 w-4 mr-2" />
-            Reload
-          </Button>
-        )}
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={togglePreview}
-          title={showPreview ? "Hide Preview" : "Show Preview"}
+        <ResizableHandle
           className={cn(
-            "bg-background/80 backdrop-blur-sm shadow-sm border transition-colors",
-            !showPreview && "border-primary text-primary",
+            showPreview ? "opacity-100 scale-100" : "opacity-0 scale-95",
           )}
+        />
+        <ResizablePanel
+          defaultSize={50}
+          minSize={30}
+          style={{
+            maxWidth: showPreview ? "100%" : "0px",
+            minWidth: showPreview ? "30%" : "0px",
+            opacity: showPreview ? 1 : 0,
+            overflow: "hidden",
+            transition: "all 450ms cubic-bezier(0.23, 1, 0.32, 1)",
+          }}
         >
-          {showPreview ? (
-            <>
-              <PanelRightClose className="h-4 w-4 mr-2" />
-              Hide Preview
-            </>
-          ) : (
-            <>
-              <PanelRightOpen className="h-4 w-4 mr-2" />
-              Show Preview
-            </>
-          )}
-        </Button>
-      </div>
+          <div className="flex flex-col h-full">
+            {!previewURL ? (
+              <div className="h-full flex items-center justify-center text-muted-foreground">
+                Waiting for dev server...
+              </div>
+            ) : (
+              <iframe
+                key={`${iframeKey}-${connectedShellId}`}
+                src={previewURL}
+                className="w-full h-full rounded-b"
+              />
+            )}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
     </div>
   )
 }
diff --git a/apps/web/components/features/studio/sandbox/components/publish-header.tsx b/apps/web/components/features/studio/sandbox/components/publish-header.tsx
index 761efa47..02ee56cf 100644
--- a/apps/web/components/features/studio/sandbox/components/publish-header.tsx
+++ b/apps/web/components/features/studio/sandbox/components/publish-header.tsx
@@ -15,6 +15,13 @@ import { Input } from "@/components/ui/input"
 import { motion } from "motion/react"
 import { Logo } from "@/components/ui/logo"
 import { UserAvatar } from "@/components/ui/user-avatar"
+import { cn } from "@/lib/utils"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 
 interface PublishHeaderProps {
   sandboxId: string | null
@@ -22,6 +29,8 @@ interface PublishHeaderProps {
   username?: string
   onGenerateRegistry?: () => void
   isRegenerating?: boolean
+  showPreview?: boolean
+  onNameChange?: (newName: string) => void
 }
 
 export function PublishHeader({
@@ -30,6 +39,8 @@ export function PublishHeader({
   username,
   onGenerateRegistry,
   isRegenerating = false,
+  showPreview = true,
+  onNameChange,
 }: PublishHeaderProps) {
   const [isLoading, setIsLoading] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
@@ -92,6 +103,11 @@ export function PublishHeader({
       if (success) {
         toast.success("Sandbox name updated")
         setIsEditing(false)
+
+        // Notify parent component about the name change
+        if (onNameChange) {
+          onNameChange(name)
+        }
       }
     } catch (error) {
       toast.error("Failed to update sandbox name")
@@ -184,13 +200,23 @@ export function PublishHeader({
               </>
             ) : (
               <>
-                <h1
-                  ref={textRef}
-                  className="text-sm font-medium py-0.5 px-0 cursor-text transition-colors hover:bg-accent/30 rounded"
-                  onClick={() => setIsEditing(true)}
-                >
-                  {name}
-                </h1>
+                <TooltipProvider>
+                  <Tooltip delayDuration={1}>
+                    <TooltipTrigger asChild>
+                      <h1
+                        ref={textRef}
+                        className="text-sm font-medium py-0.5 px-0 cursor-text transition-colors hover:bg-accent/30 relative after:absolute after:left-0 after:right-0 after:bottom-0 after:h-[1px] after:bg-black after:opacity-0 hover:after:opacity-100 group-hover:after:opacity-100"
+                        onClick={() => setIsEditing(true)}
+                      >
+                        {name}
+                      </h1>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom">
+                      <p>Rename component</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+
                 <div className="text-xs bg-muted text-muted-foreground rounded-full px-2 py-0.5">
                   Draft
                 </div>
diff --git a/apps/web/components/ui/resizable.tsx b/apps/web/components/ui/resizable.tsx
index 2f83b002..9d4f6de6 100644
--- a/apps/web/components/ui/resizable.tsx
+++ b/apps/web/components/ui/resizable.tsx
@@ -11,7 +11,7 @@ const ResizablePanelGroup = ({
   <ResizablePrimitive.PanelGroup
     className={cn(
       "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-      className
+      className,
     )}
     {...props}
   />
@@ -28,8 +28,14 @@ const ResizableHandle = ({
 }) => (
   <ResizablePrimitive.PanelResizeHandle
     className={cn(
-      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-      className
+      "relative flex items-center justify-center bg-border",
+      "w-[1px]",
+      "before:absolute before:content-[''] before:inset-y-0 before:-left-3 before:-right-3 before:z-10",
+      "after:absolute after:content-[''] after:inset-y-0 after:w-[1px] after:bg-border hover:after:w-[3px] hover:after:bg-primary after:transition-all after:duration-200 after:z-20",
+      "data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full",
+      "data-[panel-group-direction=vertical]:after:h-[1px] data-[panel-group-direction=vertical]:after:inset-x-0 data-[panel-group-direction=vertical]:hover:after:h-[3px]",
+      "[&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className,
     )}
     {...props}
   >

From 1c74a8d3deb6e0121eed14167078969ce158017d Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Fri, 2 May 2025 16:32:08 +0300
Subject: [PATCH 130/143] fix demo name

---
 .../sandbox/[sandboxId]/publish/page.tsx      | 159 ++++++++++++------
 .../publish/components/forms/demo-form.tsx    |  46 +++++
 .../sandbox/components/publish-header.tsx     |  15 +-
 3 files changed, 160 insertions(+), 60 deletions(-)

diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
index 43a2efa6..48bfa0ff 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
@@ -1,12 +1,13 @@
 "use client"
 
-import React, { useState, useCallback, useEffect } from "react"
+import React, { useState, useEffect, useRef } from "react"
 import { useParams } from "next/navigation"
 import { useForm } from "react-hook-form"
-import { Trash2 } from "lucide-react"
+import { Trash2, ArrowLeftIcon } from "lucide-react"
 import { useUser } from "@clerk/nextjs"
 import { toast } from "sonner"
 import { zodResolver } from "@hookform/resolvers/zod"
+import { debounce } from "lodash"
 
 import { Form } from "@/components/ui/form"
 import { Badge } from "@/components/ui/badge"
@@ -21,7 +22,6 @@ import { LoadingDialog } from "@/components/ui/loading-dialog"
 import { Skeleton } from "@/components/ui/skeleton"
 import { Logo } from "@/components/ui/logo"
 import { UserAvatar } from "@/components/ui/user-avatar"
-import { ArrowLeftIcon } from "lucide-react"
 
 import { ComponentForm } from "@/components/features/studio/publish/components/forms/component-form"
 import { DemoDetailsForm } from "@/components/features/studio/publish/components/forms/demo-form"
@@ -37,6 +37,7 @@ import { cn } from "@/lib/utils"
 import { useSandbox } from "@/components/features/studio/sandbox/hooks/use-sandbox"
 import { useFileSystem } from "@/components/features/studio/sandbox/hooks/use-file-system"
 import { usePublishAs } from "@/components/features/publish-old/hooks/use-publish-as"
+import { editSandbox } from "@/components/features/studio/sandbox/api"
 
 type FormStep = "detailedForm"
 
@@ -72,28 +73,18 @@ const PublishPage = () => {
   })
   const { user } = useUser()
 
-  // useEffect(() => {
-  //   if (!connectedShellId) return
-
-  //   const fetchRegistryJSON = async () => {
-  //     console.log("Generating registry...")
-
-  //     console.log("componentRegistryJSON", componentRegistryJSON)
-  //     console.log("demoRegistryJSON", demoRegistryJSON)
-  //   }
-  //   fetchRegistryJSON()
-  // }, [connectedShellId, generateRegistry])
-
+  // Declare all state hooks first
   const [formStep] = useState<FormStep>("detailedForm")
   const [openAccordion, setOpenAccordion] = useState([
     "component-info",
     "demo-0",
   ])
 
+  // Form setup
   const form = useForm<FormData>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      name: "",
+      name: serverSandbox?.name || "",
       component_slug: "",
       registry: "ui",
       description: "",
@@ -123,6 +114,54 @@ const PublishPage = () => {
     },
   })
 
+  const publishAsUsername = form.watch("publish_as_username")
+  const { user: publishAsUser } = usePublishAs({
+    username: publishAsUsername ?? user?.username ?? "",
+  })
+
+  useEffect(() => {
+    if (form.getValues("publish_as_username") === undefined && user?.username) {
+      form.setValue("publish_as_username", user.username)
+    }
+  }, [user?.username, form])
+
+  const {
+    isSubmitting,
+    isLoadingDialogOpen,
+    publishProgress,
+    isSuccessDialogOpen,
+    createdDemoSlug,
+    submitComponent,
+    setIsSuccessDialogOpen,
+  } = useSubmitComponent()
+
+  const handleGoToComponent = () => {
+    const username = publishAsUser?.username || user?.username
+    const slug = form.getValues("component_slug")
+    const demoSlug = createdDemoSlug || "default"
+    if (username && slug) {
+      console.log(`Redirecting to /${username}/${slug}/${demoSlug}`)
+    } else {
+      console.warn("Could not determine redirect path.")
+    }
+    setIsSuccessDialogOpen(false)
+  }
+
+  // Log form state changes
+  useEffect(() => {
+    const subscription = form.watch((value) => {
+      console.log("Form state updated:", value)
+    })
+    return () => subscription.unsubscribe()
+  }, [form])
+
+  // Update form name when serverSandbox name changes
+  useEffect(() => {
+    if (serverSandbox?.name && !componentFormData) {
+      form.setValue("name", serverSandbox.name)
+    }
+  }, [serverSandbox?.name, form, componentFormData])
+
   // Update form with component data when available
   useEffect(() => {
     if (componentFormData && !isComponentDataLoading) {
@@ -143,30 +182,56 @@ const PublishPage = () => {
     }
   }, [componentFormData, isComponentDataLoading, form, user?.username])
 
-  const publishAsUsername = form.watch("publish_as_username")
-  const { user: publishAsUser } = usePublishAs({
-    username: publishAsUsername ?? user?.username ?? "",
-  })
+  // Предыдущее значение имени для сравнения
+  const prevNameRef = useRef<string>("")
+
+  // Создаем дебаунсированную функцию для обновления имени
+  const debouncedUpdateName = useRef(
+    debounce(async (newName: string) => {
+      if (!sandboxId) return
+
+      try {
+        // Проверяем, что имя действительно изменилось
+        if (newName !== prevNameRef.current) {
+          console.log(
+            `Updating sandbox name from "${prevNameRef.current}" to "${newName}"`,
+          )
+          prevNameRef.current = newName
+
+          const result = await editSandbox(sandboxId, { name: newName })
+          console.log("Updated sandbox name in database:", result)
+        }
+      } catch (error) {
+        console.error("Failed to update sandbox name in database:", error)
+      }
+    }, 800), // задержка 800мс
+  ).current
 
+  // Инициализируем prevNameRef при загрузке формы
   useEffect(() => {
-    if (form.getValues("publish_as_username") === undefined && user?.username) {
-      form.setValue("publish_as_username", user.username)
-    }
-  }, [user?.username, form])
+    prevNameRef.current = form.getValues("name") || serverSandbox?.name || ""
+  }, [serverSandbox?.name, form])
 
-  const {
-    isSubmitting,
-    isLoadingDialogOpen,
-    publishProgress,
-    isSuccessDialogOpen,
-    createdDemoSlug,
-    submitComponent,
-    setIsSuccessDialogOpen,
-  } = useSubmitComponent()
+  // Главное: следим за изменениями поля name в форме и обновляем в базе
+  useEffect(() => {
+    // Используем мутацию формы вместо watch для уменьшения количества срабатываний
+    const subscription = form.watch((value, { name: fieldName }) => {
+      if (fieldName === "name" && value.name) {
+        const newName = value.name as string
+
+        // Запускаем дебаунс только если значение изменилось
+        if (newName !== prevNameRef.current) {
+          console.log(`Name field changed, scheduling update to: "${newName}"`)
+          debouncedUpdateName(newName)
+        }
+      }
+    })
 
-  const handleAccordionChange = useCallback((value: string[]) => {
-    setOpenAccordion(value)
-  }, [])
+    return () => {
+      debouncedUpdateName.cancel()
+      subscription.unsubscribe()
+    }
+  }, [form, debouncedUpdateName])
 
   const handleSubmit = (event?: React.FormEvent) => {
     event?.preventDefault()
@@ -210,23 +275,10 @@ const PublishPage = () => {
     "name",
     "component_slug",
   ])
-  const isComponentInfoComplete = useCallback(() => {
+  const isComponentInfoComplete = () => {
     const [description, name, component_slug] = watchedComponentFields
     return !!description && !!name && !!component_slug
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [watchedComponentFields])
-
-  const handleGoToComponent = useCallback(() => {
-    const username = publishAsUser?.username || user?.username
-    const slug = form.getValues("component_slug")
-    const demoSlug = createdDemoSlug || "default"
-    if (username && slug) {
-      console.log(`Redirecting to /${username}/${slug}/${demoSlug}`)
-    } else {
-      console.warn("Could not determine redirect path.")
-    }
-    setIsSuccessDialogOpen(false)
-  }, [publishAsUser, user, form, createdDemoSlug])
+  }
 
   const handleAddAnother = () => {
     form.reset()
@@ -273,6 +325,7 @@ const PublishPage = () => {
             )}
 
             <div className="flex items-center gap-2">
+              {/* Только отображение имени без редактирования */}
               <h1 className="text-sm font-medium py-0.5 px-0">
                 {form.watch("name") || serverSandbox?.name || "Untitled"}
               </h1>
@@ -319,7 +372,7 @@ const PublishPage = () => {
                     <Accordion
                       type="multiple"
                       value={openAccordion}
-                      onValueChange={handleAccordionChange}
+                      onValueChange={setOpenAccordion}
                       className="w-full"
                     >
                       <AccordionItem value="component-info">
@@ -373,7 +426,7 @@ const PublishPage = () => {
                               <div className="flex items-center gap-2 flex-1 min-w-0 overflow-hidden">
                                 <div className="truncate flex-shrink min-w-0">
                                   {index === 0
-                                    ? "Default Demo"
+                                    ? "Default"
                                     : demo.name || `Demo ${index + 1}`}
                                 </div>
                                 <Badge
diff --git a/apps/web/components/features/studio/publish/components/forms/demo-form.tsx b/apps/web/components/features/studio/publish/components/forms/demo-form.tsx
index 5f82b473..d25c464b 100644
--- a/apps/web/components/features/studio/publish/components/forms/demo-form.tsx
+++ b/apps/web/components/features/studio/publish/components/forms/demo-form.tsx
@@ -58,6 +58,16 @@ export const DemoDetailsForm = ({
     }
   }, [demoIndex, form, mode])
 
+  // Добавим эффект, чтобы убедиться, что первая демо всегда называется "Default"
+  React.useEffect(() => {
+    if (demoIndex === 0) {
+      if (form.getValues(`demos.${demoIndex}.name`) !== "Default") {
+        form.setValue(`demos.${demoIndex}.name`, "Default")
+        form.setValue(`demos.${demoIndex}.demo_slug`, "default")
+      }
+    }
+  }, [demoIndex, form])
+
   // Convert tags to MultipleSelector options format
   const tagOptions: Option[] = availableTags.map((tag) => ({
     value: tag.slug,
@@ -126,6 +136,42 @@ export const DemoDetailsForm = ({
   return (
     <div className="flex flex-col gap-4 w-full">
       <div className="space-y-6">
+        <div className="space-y-2">
+          <Label htmlFor={demoNameId}>
+            Demo Name <span className="text-destructive">*</span>
+          </Label>
+          <FormField
+            control={form.control}
+            name={`demos.${demoIndex}.name`}
+            render={({ field }) => (
+              <Input
+                id={demoNameId}
+                placeholder="Name your demo"
+                {...field}
+                value={demoIndex === 0 ? "Default" : field.value || ""}
+                disabled={demoIndex === 0} // Отключаем редактирование для первой демо
+                className={demoIndex === 0 ? "bg-muted cursor-not-allowed" : ""}
+                onChange={(e) => {
+                  if (demoIndex === 0) return
+                  const newValue = e.target.value
+                  field.onChange(newValue)
+                  handleDemoNameChange(newValue)
+                }}
+              />
+            )}
+          />
+          {demoIndex === 0 && (
+            <p className="text-xs text-muted-foreground">
+              The default demo name cannot be changed
+            </p>
+          )}
+          {demoIndex > 0 && (
+            <p className="text-xs text-muted-foreground">
+              A name for this demo variation
+            </p>
+          )}
+        </div>
+
         <div className="space-y-2">
           <Label htmlFor={tagsId}>
             Tags <span className="text-destructive">*</span>
diff --git a/apps/web/components/features/studio/sandbox/components/publish-header.tsx b/apps/web/components/features/studio/sandbox/components/publish-header.tsx
index 02ee56cf..f3d06ae5 100644
--- a/apps/web/components/features/studio/sandbox/components/publish-header.tsx
+++ b/apps/web/components/features/studio/sandbox/components/publish-header.tsx
@@ -101,16 +101,12 @@ export function PublishHeader({
     try {
       const { success } = await editSandbox(sandboxId, { name })
       if (success) {
-        toast.success("Sandbox name updated")
+        toast.success("Component name updated")
         setIsEditing(false)
-
-        // Notify parent component about the name change
-        if (onNameChange) {
-          onNameChange(name)
-        }
+        onNameChange?.(name)
       }
     } catch (error) {
-      toast.error("Failed to update sandbox name")
+      toast.error("Failed to update component name")
       setName(sandboxName)
     } finally {
       setEditLoading(false)
@@ -138,6 +134,11 @@ export function PublishHeader({
     }
   }
 
+  // Update outside components when name changes
+  useEffect(() => {
+    onNameChange?.(name)
+  }, [name, onNameChange])
+
   return (
     <header className="flex flex-col px-4 py-2 border-b">
       <div className="flex items-center">

From 3dc7db17ad82049facc08862b915b33f0e6db71e Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Fri, 2 May 2025 16:34:27 +0300
Subject: [PATCH 131/143] fix

---
 .../studio/[username]/sandbox/[sandboxId]/publish/page.tsx  | 6 +++---
 .../features/studio/publish/components/forms/demo-form.tsx  | 6 ------
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
index 48bfa0ff..9e486c41 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
@@ -425,9 +425,9 @@ const PublishPage = () => {
                             <div className="flex items-center gap-2 w-full">
                               <div className="flex items-center gap-2 flex-1 min-w-0 overflow-hidden">
                                 <div className="truncate flex-shrink min-w-0">
-                                  {index === 0
-                                    ? "Default"
-                                    : demo.name || `Demo ${index + 1}`}
+                                  {form.getValues().demos.length > 1
+                                    ? `${demo.name || `Demo ${index + 1}`} Details`
+                                    : "Demo Details"}
                                 </div>
                                 <Badge
                                   variant="outline"
diff --git a/apps/web/components/features/studio/publish/components/forms/demo-form.tsx b/apps/web/components/features/studio/publish/components/forms/demo-form.tsx
index d25c464b..bc516d9f 100644
--- a/apps/web/components/features/studio/publish/components/forms/demo-form.tsx
+++ b/apps/web/components/features/studio/publish/components/forms/demo-form.tsx
@@ -14,12 +14,6 @@ import MultipleSelector, { Option } from "@/components/ui/multiselect"
 import { Input } from "@/components/ui/input"
 import { FormField } from "@/components/ui/form"
 import { makeSlugFromName } from "../../hooks/use-is-check-slug-available"
-import {
-  Collapsible,
-  CollapsibleTrigger,
-  CollapsibleContent,
-} from "@/components/ui/collapsible"
-import { Textarea } from "@/components/ui/textarea"
 
 export const DemoDetailsForm = ({
   form,

From bf681f64d595424cc5cfeec2f20cdefb1d528fb6 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Fri, 2 May 2025 17:47:59 +0400
Subject: [PATCH 132/143] feat: implement initial UI file selection logic in
 PublishPageContent

---
 .../[username]/sandbox/[sandboxId]/page.tsx   | 75 ++++++++++++++++---
 .../features/studio/publish/config/utils.ts   |  6 --
 .../hooks/use-is-check-slug-available.ts      |  2 +-
 3 files changed, 66 insertions(+), 17 deletions(-)

diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
index ffb84c08..5ac87ade 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
@@ -20,20 +20,11 @@ import { Button } from "@/components/ui/button"
 import { Icons } from "@/components/icons"
 import { XCircle } from "lucide-react"
 
-const DEFAULT_FILE_ENTRY: FileEntry = {
-  name: "component.tsx",
-  path: "/src/components/ui/component.tsx",
-  type: "file",
-  isSymlink: false,
-}
-
 function PublishPageContent() {
   const params = useParams()
   const router = useRouter()
   const sandboxId = params.sandboxId as string
-  const [selectedEntry, setSelectedEntry] = useState<FileEntry | null>(
-    DEFAULT_FILE_ENTRY,
-  )
+  const [selectedEntry, setSelectedEntry] = useState<FileEntry | null>(null)
   const [code, setCode] = useState<string>("")
   const [isRegenerating, setIsRegenerating] = useState(false)
 
@@ -73,6 +64,70 @@ function PublishPageContent() {
     connectedShellId,
   })
 
+  useEffect(() => {
+    // Renamed function for clarity
+    const findAndSelectFirstUiFile = async () => {
+      console.log("Attempting to find initial UI file...") // Log: Start
+      console.log(
+        "isTreeLoading:",
+        isTreeLoading,
+        "files.length:",
+        files.length,
+        "selectedEntry:",
+        selectedEntry,
+      ) // Log: State check
+      if (!isTreeLoading && files.length > 0 && !selectedEntry) {
+        console.log("Files list:", JSON.stringify(files, null, 2)) // Log: Full file list (can be verbose)
+
+        const findFirstUiFile = (entries: FileEntry[]): FileEntry | null => {
+          for (const entry of entries) {
+            // Check if path starts with /src/components/ui AND is not a directory itself
+            if (entry.path.startsWith("/src/components/ui")) {
+              if (entry.type === "file") {
+                console.log("Found potential UI file:", entry.path) // Log: Potential find
+                return entry
+              } else if (entry.type === "dir" && entry.children) {
+                // Recurse only if it's a directory within the target path
+                const fileInChildren = findFirstUiFile(entry.children)
+                if (fileInChildren) return fileInChildren
+              }
+            }
+            // Also check children even if parent doesn't match, path might be nested deeper
+            else if (entry.type === "dir" && entry.children) {
+              const fileInChildren = findFirstUiFile(entry.children)
+              if (fileInChildren) return fileInChildren
+            }
+          }
+          return null
+        }
+
+        const firstUiFile = findFirstUiFile(files)
+        console.log("Result of findFirstUiFile:", firstUiFile) // Log: Result
+
+        if (firstUiFile) {
+          console.log("Setting selected entry:", firstUiFile.path) // Log: Setting state
+          setSelectedEntry(firstUiFile)
+          // Explicitly load content after setting the entry
+          try {
+            console.log("Calling loadFileContent for:", firstUiFile.path) // Log: Loading content
+            const content = await loadFileContent(firstUiFile.path)
+            console.log("Content loaded successfully.") // Log: Load success
+            setCode(content)
+          } catch (error) {
+            // Handle error if initial load fails
+            console.error("Failed to load initial file content:", error) // Log: Load error
+            setCode("")
+            setSelectedEntry(null)
+          }
+        } else {
+          console.log("No initial UI file found in /src/components/ui") // Log: Not found
+        }
+      }
+    }
+
+    findAndSelectFirstUiFile()
+  }, [files, isTreeLoading, selectedEntry, loadFileContent]) // Add loadFileContent to dependencies
+
   useEffect(() => {
     if (missingDependencyInfo) {
       addDependencyToPackageJson(
diff --git a/apps/web/components/features/studio/publish/config/utils.ts b/apps/web/components/features/studio/publish/config/utils.ts
index a7988f45..1099c2a0 100644
--- a/apps/web/components/features/studio/publish/config/utils.ts
+++ b/apps/web/components/features/studio/publish/config/utils.ts
@@ -5,9 +5,6 @@ const demoSchema = z.object({
   name: z.string().min(2, {
     message: "Demo name must be at least 2 characters.",
   }),
-  demo_code: z.string().min(1, {
-    message: "Demo code is required.",
-  }),
   demo_slug: z.string().min(1, {
     message: "Demo slug is required.",
   }),
@@ -44,9 +41,6 @@ export const formSchema = z.object({
   component_slug: z.string().min(2, {
     message: "Slug must be at least 2 characters.",
   }),
-  code: z.string().min(1, {
-    message: "Component code is required.",
-  }),
   demos: z.array(demoSchema).default([]),
   description: z.string().min(10, {
     message: "Description must be at least 10 characters.",
diff --git a/apps/web/components/features/studio/publish/hooks/use-is-check-slug-available.ts b/apps/web/components/features/studio/publish/hooks/use-is-check-slug-available.ts
index f556d824..54690dda 100644
--- a/apps/web/components/features/studio/publish/hooks/use-is-check-slug-available.ts
+++ b/apps/web/components/features/studio/publish/hooks/use-is-check-slug-available.ts
@@ -30,7 +30,7 @@ const checkSlugUnique = async (
       .from("components")
       .select("id")
       .eq("component_slug", slug)
-      .eq("user_id", "user_2svxLsschx3lZIQV7naSdI782rt")
+      .eq("user_id", userId)
 
     if (error) {
       console.error("Error checking component slug uniqueness:", error)

From 72b9f4010d35206a5c80daf72fe98bd7036bdd56 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Fri, 2 May 2025 16:50:14 +0300
Subject: [PATCH 133/143] feat: sandbox header

---
 .../[username]/sandbox/[sandboxId]/page.tsx   |  22 +-
 .../sandbox/[sandboxId]/publish/page.tsx      |  70 +----
 .../sandbox/components/publish-header.tsx     | 193 ++----------
 .../sandbox/components/sandbox-header.tsx     | 295 ++++++++++++++++++
 4 files changed, 343 insertions(+), 237 deletions(-)
 create mode 100644 apps/web/components/features/studio/sandbox/components/sandbox-header.tsx

diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
index 0860f8eb..cc05a821 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useEffect, useState, Suspense } from "react"
-import { useParams, useRouter } from "next/navigation"
+import { useParams, useRouter, usePathname } from "next/navigation"
 import {
   ResizableHandle,
   ResizablePanelGroup,
@@ -9,7 +9,7 @@ import {
 } from "@/components/ui/resizable"
 import { FileExplorer } from "@/components/features/studio/sandbox/components/file-explorer"
 import { PreviewPane } from "@/components/features/studio/sandbox/components/preview-pane"
-import { PublishHeader } from "@/components/features/studio/sandbox/components/publish-header"
+import { SandboxHeader } from "@/components/features/studio/sandbox/components/sandbox-header"
 import { Spinner } from "@/components/icons/spinner"
 import { useSandbox } from "@/components/features/studio/sandbox/hooks/use-sandbox"
 import {
@@ -29,12 +29,14 @@ import { cn } from "@/lib/utils"
 function PublishPageContent() {
   const params = useParams()
   const router = useRouter()
+  const pathname = usePathname()
   const sandboxId = params.sandboxId as string
   const [selectedEntry, setSelectedEntry] = useState<FileEntry | null>(null)
   const [code, setCode] = useState<string>("")
   const [isRegenerating, setIsRegenerating] = useState(false)
   const [showPreview, setShowPreview] = useState<boolean>(true)
   const [iframeKey, setIframeKey] = useState<number>(0)
+  const [isNavigating, setIsNavigating] = useState(false)
 
   const {
     sandboxRef,
@@ -257,6 +259,11 @@ function PublishPageContent() {
     setShowPreview((prev) => !prev)
   }
 
+  const handleNextStep = () => {
+    setIsNavigating(true)
+    router.push(`${pathname}/publish`)
+  }
+
   if (isSandboxLoading) {
     return (
       <div className="h-screen w-full flex items-center justify-center bg-background">
@@ -295,13 +302,16 @@ function PublishPageContent() {
 
   return (
     <div className="h-screen w-full flex flex-col">
-      <PublishHeader
-        onGenerateRegistry={handleGenerateRegistry}
-        isRegenerating={isRegenerating}
+      <SandboxHeader
         sandboxId={sandboxId}
         sandboxName={serverSandbox?.name}
         username={params.username as string}
-        showPreview={showPreview}
+        onNameChange={(newName) => {
+          // Update the sandbox name in the parent component if needed
+        }}
+        customNextLabel="Continue"
+        customNextAction={handleNextStep}
+        isNextLoading={isNavigating}
       />
 
       <ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
index ca9b3fc3..160ffe28 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
@@ -38,6 +38,7 @@ import { useSandbox } from "@/components/features/studio/sandbox/hooks/use-sandb
 import { useFileSystem } from "@/components/features/studio/sandbox/hooks/use-file-system"
 import { usePublishAs } from "@/components/features/publish-old/hooks/use-publish-as"
 import { editSandbox } from "@/components/features/studio/sandbox/api"
+import { SandboxHeader } from "@/components/features/studio/sandbox/components/sandbox-header"
 
 type FormStep = "detailedForm"
 
@@ -302,62 +303,19 @@ const PublishPage = () => {
 
   return (
     <>
-      <header className="flex flex-col px-4 py-2 border-b">
-        <div className="flex items-center">
-          <div className="flex items-center gap-2">
-            <div
-              onClick={() => window.history.back()}
-              className="cursor-pointer"
-            >
-              <Logo position="flex" className="w-6 h-6" hasLink={false} />
-            </div>
-
-            <div className="text-muted-foreground">/</div>
-
-            {user?.username && (
-              <div className="flex items-center gap-1">
-                <UserAvatar
-                  src={null}
-                  alt={user.username}
-                  size={24}
-                  className="mr-1"
-                />
-                <span className="text-sm font-medium">{user.username}</span>
-                <div className="text-muted-foreground mx-1">/</div>
-              </div>
-            )}
-
-            <div className="flex items-center gap-2">
-              {/* Только отображение имени без редактирования */}
-              <h1 className="text-sm font-medium py-0.5 px-0">
-                {form.watch("name") || serverSandbox?.name || "Untitled"}
-              </h1>
-              {serverSandbox?.component_id ? (
-                <div className="text-xs bg-yellow-500 text-primary-foreground rounded-full px-2 py-0.5">
-                  Edit
-                </div>
-              ) : (
-                <div className="text-xs bg-muted text-muted-foreground rounded-full px-2 py-0.5">
-                  Draft
-                </div>
-              )}
-            </div>
-          </div>
-          <div className="ml-auto flex items-center gap-2">
-            <Button
-              variant="outline"
-              onClick={() => window.history.back()}
-              className="gap-1"
-            >
-              <ArrowLeftIcon className="h-4 w-4" />
-              Back to edit
-            </Button>
-            <Button onClick={() => handleSubmit()} disabled={isSubmitting}>
-              {isSubmitting ? "Submitting..." : "Send to review"}
-            </Button>
-          </div>
-        </div>
-      </header>
+      <SandboxHeader
+        sandboxId={serverSandbox.id || ""}
+        sandboxName={form.watch("name") || serverSandbox?.name || "Untitled"}
+        username={params.username as string}
+        status={serverSandbox?.component_id ? "edit" : "draft"}
+        showEditName={false}
+        customBackLabel="Back to edit"
+        customBackUrl={`/studio/${params.username}/sandbox/${sandboxId}`}
+        customNextLabel={isSubmitting ? "Submitting..." : "Send to review"}
+        customNextAction={handleSubmit}
+        hideNext={false}
+        isNextLoading={isSubmitting}
+      />
       <Form {...form}>
         <div className="flex flex-col h-screen w-full">
           <div className="flex h-[calc(100vh-3.5rem)]">
diff --git a/apps/web/components/features/studio/sandbox/components/publish-header.tsx b/apps/web/components/features/studio/sandbox/components/publish-header.tsx
index f3d06ae5..b6f5f9c7 100644
--- a/apps/web/components/features/studio/sandbox/components/publish-header.tsx
+++ b/apps/web/components/features/studio/sandbox/components/publish-header.tsx
@@ -1,27 +1,10 @@
 import { Button } from "@/components/ui/button"
 import { useParams, usePathname, useRouter } from "next/navigation"
 import { publishSandbox, editSandbox } from "../api"
-import { useEffect, useState, useRef } from "react"
-import {
-  RocketIcon,
-  Loader2,
-  CheckIcon,
-  XIcon,
-  ArrowLeftIcon,
-  ArchiveIcon,
-} from "lucide-react"
+import { useEffect, useState } from "react"
+import { RocketIcon, Loader2 } from "lucide-react"
 import { toast } from "sonner"
-import { Input } from "@/components/ui/input"
-import { motion } from "motion/react"
-import { Logo } from "@/components/ui/logo"
-import { UserAvatar } from "@/components/ui/user-avatar"
-import { cn } from "@/lib/utils"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
+import { SandboxHeader } from "./sandbox-header"
 
 interface PublishHeaderProps {
   sandboxId: string | null
@@ -43,40 +26,17 @@ export function PublishHeader({
   onNameChange,
 }: PublishHeaderProps) {
   const [isLoading, setIsLoading] = useState(false)
-  const [isEditing, setIsEditing] = useState(false)
   const [name, setName] = useState(sandboxName)
-  const inputRef = useRef<HTMLInputElement>(null)
-  const textRef = useRef<HTMLHeadingElement>(null)
+  const [isNavigating, setIsNavigating] = useState(false)
 
   const pathname = usePathname()
+  const params = useParams()
+  const router = useRouter()
 
   useEffect(() => {
     setName(sandboxName)
   }, [sandboxName])
 
-  // Set input width to match text width when editing starts
-  useEffect(() => {
-    if (isEditing && inputRef.current && textRef.current) {
-      // Get the computed style to calculate exact width
-      const styles = window.getComputedStyle(textRef.current)
-      const width = textRef.current.getBoundingClientRect().width
-
-      // Add a small buffer to ensure text isn't cut off
-      inputRef.current.style.width = `${width + 8}px`
-
-      // Set min-width to avoid too narrow inputs
-      inputRef.current.style.minWidth = "120px"
-
-      // Focus after width is set
-      inputRef.current.focus()
-    }
-  }, [isEditing])
-
-  const [editLoading, setEditLoading] = useState(false)
-
-  const params = useParams()
-  const router = useRouter()
-
   const handlePublish = async () => {
     if (!sandboxId) return
     setIsLoading(true)
@@ -91,144 +51,27 @@ export function PublishHeader({
     }
   }
 
-  const handleEditName = async () => {
-    if (!sandboxId || name === sandboxName) {
-      setIsEditing(false)
-      return
-    }
-
-    setEditLoading(true)
-    try {
-      const { success } = await editSandbox(sandboxId, { name })
-      if (success) {
-        toast.success("Component name updated")
-        setIsEditing(false)
-        onNameChange?.(name)
-      }
-    } catch (error) {
-      toast.error("Failed to update component name")
-      setName(sandboxName)
-    } finally {
-      setEditLoading(false)
-    }
-  }
-
-  const handleCancel = () => {
-    setName(sandboxName)
-    setIsEditing(false)
-  }
-
-  const handleBackToStudio = () => {
-    router.push(`/studio/${params.username}`)
-  }
-
   const handleNextStep = () => {
+    setIsNavigating(true)
     router.push(`${pathname}/publish`)
   }
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter") {
-      handleEditName()
-    } else if (e.key === "Escape") {
-      handleCancel()
-    }
-  }
-
   // Update outside components when name changes
   useEffect(() => {
     onNameChange?.(name)
   }, [name, onNameChange])
 
   return (
-    <header className="flex flex-col px-4 py-2 border-b">
-      <div className="flex items-center">
-        <div className="flex items-center gap-2">
-          <div onClick={handleBackToStudio} className="cursor-pointer">
-            <Logo position="flex" className="w-6 h-6" hasLink={false} />
-          </div>
-
-          <div className="text-muted-foreground">/</div>
-
-          {username && (
-            <div className="flex items-center gap-1">
-              <UserAvatar
-                src={null}
-                alt={username}
-                size={24}
-                className="mr-1"
-              />
-              <span className="text-sm font-medium">{username}</span>
-              <div className="text-muted-foreground mx-1">/</div>
-            </div>
-          )}
-
-          <div className="flex items-center gap-2 group relative">
-            {isEditing ? (
-              <>
-                <Input
-                  ref={inputRef}
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  className="text-sm font-medium bg-transparent border-0 border-b border-primary/50 focus-visible:ring-0 focus-visible:ring-offset-0 rounded-none p-0 h-auto"
-                  autoFocus
-                  onKeyDown={handleKeyDown}
-                  onBlur={handleEditName}
-                />
-                <div className="flex absolute right-0 top-1/2 -translate-y-1/2 opacity-70 -mr-16">
-                  <Button
-                    size="icon"
-                    variant="ghost"
-                    onClick={handleEditName}
-                    disabled={editLoading}
-                    className="h-7 w-7"
-                  >
-                    {editLoading ? (
-                      <Loader2 className="h-3.5 w-3.5 animate-spin" />
-                    ) : (
-                      <CheckIcon className="h-3.5 w-3.5" />
-                    )}
-                  </Button>
-                  <Button
-                    size="icon"
-                    variant="ghost"
-                    onClick={handleCancel}
-                    disabled={editLoading}
-                    className="h-7 w-7"
-                  >
-                    <XIcon className="h-3.5 w-3.5" />
-                  </Button>
-                </div>
-              </>
-            ) : (
-              <>
-                <TooltipProvider>
-                  <Tooltip delayDuration={1}>
-                    <TooltipTrigger asChild>
-                      <h1
-                        ref={textRef}
-                        className="text-sm font-medium py-0.5 px-0 cursor-text transition-colors hover:bg-accent/30 relative after:absolute after:left-0 after:right-0 after:bottom-0 after:h-[1px] after:bg-black after:opacity-0 hover:after:opacity-100 group-hover:after:opacity-100"
-                        onClick={() => setIsEditing(true)}
-                      >
-                        {name}
-                      </h1>
-                    </TooltipTrigger>
-                    <TooltipContent side="bottom">
-                      <p>Rename component</p>
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
-
-                <div className="text-xs bg-muted text-muted-foreground rounded-full px-2 py-0.5">
-                  Draft
-                </div>
-              </>
-            )}
-          </div>
-        </div>
-        <div className="ml-auto flex items-center gap-2">
-          <Button onClick={handleNextStep}>Continue</Button>
-        </div>
-      </div>
-    </header>
+    <SandboxHeader
+      sandboxId={sandboxId}
+      sandboxName={sandboxName}
+      username={username}
+      status="draft"
+      showEditName={true}
+      onNameChange={onNameChange}
+      customNextLabel="Continue"
+      customNextAction={handleNextStep}
+      isNextLoading={isNavigating}
+    />
   )
 }
diff --git a/apps/web/components/features/studio/sandbox/components/sandbox-header.tsx b/apps/web/components/features/studio/sandbox/components/sandbox-header.tsx
new file mode 100644
index 00000000..8a743d3f
--- /dev/null
+++ b/apps/web/components/features/studio/sandbox/components/sandbox-header.tsx
@@ -0,0 +1,295 @@
+import { Button } from "@/components/ui/button"
+import { useParams, usePathname, useRouter } from "next/navigation"
+import { useState, useRef, useEffect } from "react"
+import { Loader2, CheckIcon, XIcon, ArrowLeftIcon } from "lucide-react"
+import { toast } from "sonner"
+import { Input } from "@/components/ui/input"
+import { Logo } from "@/components/ui/logo"
+import { UserAvatar } from "@/components/ui/user-avatar"
+import { cn } from "@/lib/utils"
+import { Spinner } from "@/components/icons/spinner"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { editSandbox } from "../api"
+
+interface SandboxHeaderProps {
+  sandboxId: string | null | undefined
+  sandboxName?: string
+  username?: string
+  status?: "draft" | "edit" | "published"
+  showEditName?: boolean
+  onNameChange?: (newName: string) => void
+  customBackUrl?: string
+  customBackLabel?: string
+  customNextUrl?: string
+  customNextLabel?: string
+  customNextAction?: () => void
+  hideNext?: boolean
+  isNextLoading?: boolean
+  isBackLoading?: boolean
+}
+
+export function SandboxHeader({
+  sandboxId,
+  sandboxName = "Untitled",
+  username,
+  status = "draft",
+  showEditName = true,
+  onNameChange,
+  customBackUrl,
+  customBackLabel,
+  customNextUrl,
+  customNextLabel = "Continue",
+  customNextAction,
+  hideNext = false,
+  isNextLoading = false,
+  isBackLoading = false,
+}: SandboxHeaderProps) {
+  const [isEditing, setIsEditing] = useState(false)
+  const [name, setName] = useState(sandboxName)
+  const [editLoading, setEditLoading] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const textRef = useRef<HTMLHeadingElement>(null)
+
+  const params = useParams()
+  const pathname = usePathname()
+  const router = useRouter()
+
+  // Update local state when prop changes
+  useEffect(() => {
+    setName(sandboxName)
+  }, [sandboxName])
+
+  // Set input width to match text width when editing starts
+  useEffect(() => {
+    if (isEditing && inputRef.current && textRef.current) {
+      // Get the computed style to calculate exact width
+      const styles = window.getComputedStyle(textRef.current)
+      const width = textRef.current.getBoundingClientRect().width
+
+      // Add a small buffer to ensure text isn't cut off
+      inputRef.current.style.width = `${width + 8}px`
+
+      // Set min-width to avoid too narrow inputs
+      inputRef.current.style.minWidth = "120px"
+
+      // Focus after width is set
+      inputRef.current.focus()
+    }
+  }, [isEditing])
+
+  const handleEditName = async () => {
+    if (!sandboxId || name === sandboxName) {
+      setIsEditing(false)
+      return
+    }
+
+    setEditLoading(true)
+    try {
+      const { success } = await editSandbox(sandboxId, { name })
+      if (success) {
+        toast.success("Component name updated")
+        setIsEditing(false)
+        onNameChange?.(name)
+      }
+    } catch (error) {
+      toast.error("Failed to update component name")
+      setName(sandboxName)
+    } finally {
+      setEditLoading(false)
+    }
+  }
+
+  const handleCancel = () => {
+    setName(sandboxName)
+    setIsEditing(false)
+  }
+
+  const handleBackToStudio = () => {
+    if (customBackUrl) {
+      router.push(customBackUrl)
+    } else {
+      router.push(`/studio/${params.username}`)
+    }
+  }
+
+  const handleNextStep = () => {
+    if (customNextAction) {
+      customNextAction()
+    } else if (customNextUrl) {
+      router.push(customNextUrl)
+    } else {
+      router.push(`${pathname}/publish`)
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      handleEditName()
+    } else if (e.key === "Escape") {
+      handleCancel()
+    }
+  }
+
+  // Update outside components when name changes
+  useEffect(() => {
+    onNameChange?.(name)
+  }, [name, onNameChange])
+
+  const getStatusBadge = () => {
+    switch (status) {
+      case "edit":
+        return (
+          <div className="text-xs bg-yellow-500 text-primary-foreground rounded-full px-2 py-0.5">
+            Edit
+          </div>
+        )
+      case "published":
+        return (
+          <div className="text-xs bg-emerald-500 text-primary-foreground rounded-full px-2 py-0.5">
+            Published
+          </div>
+        )
+      case "draft":
+      default:
+        return (
+          <div className="text-xs bg-muted text-muted-foreground rounded-full px-2 py-0.5">
+            Draft
+          </div>
+        )
+    }
+  }
+
+  return (
+    <header className="flex flex-col px-4 py-2 border-b">
+      <div className="flex items-center">
+        <div className="flex items-center gap-2">
+          <div onClick={handleBackToStudio} className="cursor-pointer">
+            <Logo position="flex" className="w-6 h-6" hasLink={false} />
+          </div>
+
+          <div className="text-muted-foreground">/</div>
+
+          {username && (
+            <div className="flex items-center gap-1">
+              <UserAvatar
+                src={null}
+                alt={username}
+                size={24}
+                className="mr-1"
+              />
+              <span className="text-sm font-medium">{username}</span>
+              <div className="text-muted-foreground mx-1">/</div>
+            </div>
+          )}
+
+          <div className="flex items-center gap-2 group relative">
+            {isEditing && showEditName ? (
+              <>
+                <div className="relative">
+                  <Input
+                    ref={inputRef}
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    className="text-sm font-medium bg-transparent border-0 focus-visible:ring-0 focus-visible:ring-offset-0 rounded-none p-0 h-auto shadow-none  "
+                    autoFocus
+                    onKeyDown={handleKeyDown}
+                    onBlur={handleEditName}
+                  />
+                  <div className="absolute left-0 right-0 bottom-0 h-[1px] bg-black opacity-100 -mb-[2px]"></div>
+                </div>
+                <div className="flex absolute right-0 top-1/2 -translate-y-1/2 opacity-70 -mr-16">
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    onClick={handleEditName}
+                    disabled={editLoading}
+                    className="h-7 w-7"
+                  >
+                    {editLoading ? (
+                      <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                    ) : (
+                      <CheckIcon className="h-3.5 w-3.5" />
+                    )}
+                  </Button>
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    onClick={handleCancel}
+                    disabled={editLoading}
+                    className="h-7 w-7"
+                  >
+                    <XIcon className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </>
+            ) : (
+              <>
+                {showEditName ? (
+                  <TooltipProvider>
+                    <Tooltip delayDuration={1}>
+                      <TooltipTrigger asChild>
+                        <h1
+                          ref={textRef}
+                          className="text-sm font-medium py-0.5 px-0 cursor-text transition-colors relative after:absolute after:left-0 after:right-0 after:bottom-0 after:h-[1px] after:bg-black after:opacity-0 hover:after:opacity-100 group-hover:after:opacity-100"
+                          onClick={() => setIsEditing(true)}
+                        >
+                          {name}
+                        </h1>
+                      </TooltipTrigger>
+                      <TooltipContent side="bottom">
+                        <p>Rename component</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                ) : (
+                  <h1 className="text-sm font-medium py-0.5 px-0">{name}</h1>
+                )}
+
+                {getStatusBadge()}
+              </>
+            )}
+          </div>
+        </div>
+        <div className="ml-auto flex items-center gap-2">
+          {customBackLabel && (
+            <Button
+              variant="outline"
+              onClick={handleBackToStudio}
+              className="gap-1"
+              disabled={isBackLoading}
+            >
+              {isBackLoading ? (
+                <div className="flex items-center justify-center gap-2">
+                  <Spinner size={16} color="currentColor" />
+                  {customBackLabel}
+                </div>
+              ) : (
+                <>
+                  <ArrowLeftIcon className="h-4 w-4" />
+                  {customBackLabel}
+                </>
+              )}
+            </Button>
+          )}
+          {!hideNext && (
+            <Button
+              onClick={handleNextStep}
+              disabled={isNextLoading}
+              className="relative transition-all duration-200"
+            >
+              <div className="flex items-center justify-center gap-2">
+                {isNextLoading && <Spinner size={16} color="white" />}
+                {customNextLabel}
+              </div>
+            </Button>
+          )}
+        </div>
+      </div>
+    </header>
+  )
+}

From 470614d29357891631332a441c82be4c789e1179 Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Fri, 2 May 2025 17:36:19 +0300
Subject: [PATCH 134/143] server side header

---
 .../sandbox/[sandboxId]/page.client.tsx       | 375 +++++++++++++++++
 .../[username]/sandbox/[sandboxId]/page.tsx   | 391 +-----------------
 .../sandbox/[sandboxId]/publish/page.tsx      |   4 +-
 3 files changed, 396 insertions(+), 374 deletions(-)
 create mode 100644 apps/web/app/studio/[username]/sandbox/[sandboxId]/page.client.tsx

diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.client.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.client.tsx
new file mode 100644
index 00000000..b1fdc215
--- /dev/null
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.client.tsx
@@ -0,0 +1,375 @@
+"use client"
+
+import { useEffect, useState, Suspense } from "react"
+import { useParams, useRouter, usePathname } from "next/navigation"
+import {
+  ResizableHandle,
+  ResizablePanelGroup,
+  ResizablePanel,
+} from "@/components/ui/resizable"
+import { FileExplorer } from "@/components/features/studio/sandbox/components/file-explorer"
+import { PreviewPane } from "@/components/features/studio/sandbox/components/preview-pane"
+import { Spinner } from "@/components/icons/spinner"
+import { useSandbox } from "@/components/features/studio/sandbox/hooks/use-sandbox"
+import {
+  useFileSystem,
+  type FileEntry,
+} from "@/components/features/studio/sandbox/hooks/use-file-system"
+import { Button } from "@/components/ui/button"
+import { Icons } from "@/components/icons"
+import {
+  XCircle,
+  RefreshCw,
+  PanelRightOpen,
+  PanelRightClose,
+} from "lucide-react"
+import { cn } from "@/lib/utils"
+
+function PublishClientPageContent() {
+  const params = useParams()
+  const router = useRouter()
+  const pathname = usePathname()
+  const sandboxId = params.sandboxId as string
+  const [selectedEntry, setSelectedEntry] = useState<FileEntry | null>(null)
+  const [code, setCode] = useState<string>("")
+  const [isRegenerating, setIsRegenerating] = useState(false)
+  const [showPreview, setShowPreview] = useState<boolean>(true)
+  const [iframeKey, setIframeKey] = useState<number>(0)
+  const [isNavigating, setIsNavigating] = useState(false)
+
+  const {
+    sandboxRef,
+    previewURL,
+    isSandboxLoading,
+    sandboxConnectionHash,
+    reconnectSandbox,
+    missingDependencyInfo,
+    clearMissingDependencyInfo,
+    connectedShellId,
+  } = useSandbox({ sandboxId })
+
+  const {
+    files,
+    isTreeLoading,
+    isFileLoading,
+    advancedView,
+    toggleAdvancedView,
+    loadRootDirectory,
+    loadFileContent,
+    saveFileContent,
+    createFile,
+    deleteEntry,
+    createDirectory,
+    renameEntry,
+    addDependencyToPackageJson,
+    generateRegistry,
+  } = useFileSystem({
+    sandboxRef,
+    reconnectSandbox,
+    sandboxConnectionHash,
+    connectedShellId,
+  })
+
+  useEffect(() => {
+    // Renamed function for clarity
+    const findAndSelectFirstUiFile = async () => {
+      console.log("Attempting to find initial UI file...") // Log: Start
+      console.log(
+        "isTreeLoading:",
+        isTreeLoading,
+        "files.length:",
+        files.length,
+        "selectedEntry:",
+        selectedEntry,
+      ) // Log: State check
+      if (!isTreeLoading && files.length > 0 && !selectedEntry) {
+        console.log("Files list:", JSON.stringify(files, null, 2)) // Log: Full file list (can be verbose)
+
+        const findFirstUiFile = (entries: FileEntry[]): FileEntry | null => {
+          for (const entry of entries) {
+            // Check if path starts with /src/components/ui AND is not a directory itself
+            if (entry.path.startsWith("/src/components/ui")) {
+              if (entry.type === "file") {
+                console.log("Found potential UI file:", entry.path) // Log: Potential find
+                return entry
+              } else if (entry.type === "dir" && entry.children) {
+                // Recurse only if it's a directory within the target path
+                const fileInChildren = findFirstUiFile(entry.children)
+                if (fileInChildren) return fileInChildren
+              }
+            }
+            // Also check children even if parent doesn't match, path might be nested deeper
+            else if (entry.type === "dir" && entry.children) {
+              const fileInChildren = findFirstUiFile(entry.children)
+              if (fileInChildren) return fileInChildren
+            }
+          }
+          return null
+        }
+
+        const firstUiFile = findFirstUiFile(files)
+        console.log("Result of findFirstUiFile:", firstUiFile) // Log: Result
+
+        if (firstUiFile) {
+          console.log("Setting selected entry:", firstUiFile.path) // Log: Setting state
+          setSelectedEntry(firstUiFile)
+          // Explicitly load content after setting the entry
+          try {
+            console.log("Calling loadFileContent for:", firstUiFile.path) // Log: Loading content
+            const content = await loadFileContent(firstUiFile.path)
+            console.log("Content loaded successfully.") // Log: Load success
+            setCode(content)
+          } catch (error) {
+            // Handle error if initial load fails
+            console.error("Failed to load initial file content:", error) // Log: Load error
+            setCode("")
+            setSelectedEntry(null)
+          }
+        } else {
+          console.log("No initial UI file found in /src/components/ui") // Log: Not found
+        }
+      }
+    }
+
+    findAndSelectFirstUiFile()
+  }, [files, isTreeLoading, selectedEntry, loadFileContent]) // Add loadFileContent to dependencies
+
+  useEffect(() => {
+    if (missingDependencyInfo) {
+      addDependencyToPackageJson(
+        missingDependencyInfo.packageName,
+        missingDependencyInfo.latestVersion,
+      )
+      clearMissingDependencyInfo()
+    }
+  }, [missingDependencyInfo])
+
+  useEffect(() => {
+    if (
+      !sandboxRef.current ||
+      !selectedEntry ||
+      selectedEntry.type !== "file"
+    ) {
+      setCode("")
+      return
+    }
+
+    const loadContent = async () => {
+      try {
+        const content = await loadFileContent(selectedEntry.path)
+        setCode(content)
+      } catch (error) {
+        setCode("")
+        setSelectedEntry(null)
+      }
+    }
+
+    loadContent()
+  }, [sandboxRef, selectedEntry, isSandboxLoading])
+
+  const handleCodeChange = (value: string) => {
+    setCode(value)
+    if (!sandboxRef.current || !selectedEntry || selectedEntry.type !== "file")
+      return
+    saveFileContent(selectedEntry.path, value)
+  }
+
+  const handleCreateFile = async (filePath: string) => {
+    try {
+      await createFile(filePath)
+      await loadRootDirectory()
+      const newEntry: FileEntry = {
+        name: filePath.split("/").pop() || filePath,
+        path: filePath.startsWith("/") ? filePath : `/${filePath}`,
+        type: "file",
+        isSymlink: false,
+      }
+      setSelectedEntry(newEntry)
+    } catch (error) {
+      // Error is handled in the hook
+    }
+  }
+
+  const handleDeleteEntry = async (entryPath: string) => {
+    try {
+      await deleteEntry(entryPath)
+      if (selectedEntry?.path === entryPath) {
+        setSelectedEntry(null)
+        setCode("")
+      }
+      await loadRootDirectory()
+    } catch (error) {
+      // Error is handled in the hook
+    }
+  }
+
+  const handleRenameEntry = async (oldPath: string, newName: string) => {
+    try {
+      const newPath = await renameEntry(oldPath, newName)
+
+      // Update selected entry if it was the renamed one
+      if (selectedEntry?.path === oldPath) {
+        setSelectedEntry({
+          ...selectedEntry,
+          path: newPath,
+          name: newName,
+        })
+      }
+
+      return newPath
+    } catch (error) {
+      // Error is handled in the hook
+      return oldPath
+    }
+  }
+
+  const handleGenerateRegistry = async () => {
+    console.log("Starting registry generation...")
+    // setIsRegenerating(true)
+    generateRegistry()
+  }
+
+  const handleReset = () => {
+    window.location.reload()
+  }
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!sandboxRef.current) {
+        if (e.key === "Escape") {
+          router.back()
+        } else if (e.key === "Enter") {
+          handleReset()
+        }
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [router, sandboxRef])
+
+  const handleRefreshPreview = () => {
+    setIframeKey((prev) => prev + 1)
+  }
+
+  const handleTogglePreview = () => {
+    setShowPreview((prev) => !prev)
+  }
+
+  const handleNextStep = () => {
+    setIsNavigating(true)
+    router.push(`${pathname}/publish`)
+  }
+
+  if (isSandboxLoading) {
+    return (
+      <div className="h-screen w-full flex items-center justify-center bg-background">
+        <div className="flex flex-col items-center gap-4">
+          <Spinner color="hsl(var(--foreground))" />
+          <p className="text-muted-foreground">Initializing sandbox</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (!sandboxRef.current) {
+    return (
+      <div className="h-screen w-full flex items-center justify-center">
+        <div className="flex flex-col items-center gap-4">
+          <XCircle className="h-6 w-6 text-muted-foreground" />
+          <p className="text-base">Failed to initialize sandbox</p>
+          <div className="flex gap-3">
+            <Button onClick={() => router.back()} variant="outline">
+              Go Back
+              <kbd className="pointer-events-none hidden md:inline-flex h-5 select-none items-center rounded border-muted-foreground/40 bg-muted-foreground/20 px-1.5 ml-1.5 font-sans text-[11px] text-kbd leading-none opacity-100">
+                ESC
+              </kbd>
+            </Button>
+            <Button onClick={handleReset}>
+              Try Again
+              <kbd className="pointer-events-none hidden md:inline-flex h-5 select-none items-center gap-1 rounded border-muted-foreground/40 bg-muted-foreground/20 px-1.5 ml-1.5 font-sans text-[11px] text-kbd leading-none opacity-100">
+                <Icons.enter className="h-2.5 w-2.5" />
+              </kbd>
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="h-screen w-full flex flex-col">
+      {/* Header is rendered in page.tsx */}
+
+      <ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
+        <ResizablePanel defaultSize={20} minSize={15}>
+          <FileExplorer
+            entries={files}
+            onSelect={setSelectedEntry}
+            selectedPath={selectedEntry?.path || null}
+            onDelete={handleDeleteEntry}
+            onCreateFile={handleCreateFile}
+            onCreateDirectory={createDirectory}
+            onRename={handleRenameEntry}
+            onRefresh={loadRootDirectory}
+            isLoading={isTreeLoading}
+            advancedView={advancedView}
+            onToggleAdvancedView={toggleAdvancedView}
+          />
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel defaultSize={80} minSize={20}>
+          <PreviewPane
+            connectedShellId={connectedShellId}
+            previewURL={previewURL}
+            selectedFile={selectedEntry}
+            code={code}
+            onCodeChange={handleCodeChange}
+            isFileLoading={isFileLoading}
+            showPreview={showPreview}
+            iframeKey={iframeKey}
+            onRefresh={handleRefreshPreview}
+          />
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* Bottom right preview controls */}
+      <div className="fixed bottom-4 right-4 flex gap-2 z-10">
+        {showPreview && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleRefreshPreview}
+            title="Reload preview"
+            className="bg-background/80 backdrop-blur-sm shadow-sm border"
+          >
+            <RefreshCw className="h-4 w-4" />
+          </Button>
+        )}
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleTogglePreview}
+          title={showPreview ? "Hide Preview" : "Show Preview"}
+          className={cn(
+            "bg-background/80 backdrop-blur-sm shadow-sm border transition-colors",
+            !showPreview && "border-primary text-primary",
+          )}
+        >
+          {showPreview ? (
+            <PanelRightClose className="h-4 w-4" />
+          ) : (
+            <PanelRightOpen className="h-4 w-4" />
+          )}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default function PublishPage() {
+  return (
+    <Suspense fallback={<div>Loading project...</div>}>
+      <PublishClientPageContent />
+    </Suspense>
+  )
+}
diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
index cc05a821..eb2bb2f3 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.tsx
@@ -1,389 +1,38 @@
 "use client"
 
-import { useEffect, useState, Suspense } from "react"
-import { useParams, useRouter, usePathname } from "next/navigation"
-import {
-  ResizableHandle,
-  ResizablePanelGroup,
-  ResizablePanel,
-} from "@/components/ui/resizable"
-import { FileExplorer } from "@/components/features/studio/sandbox/components/file-explorer"
-import { PreviewPane } from "@/components/features/studio/sandbox/components/preview-pane"
+import { useParams } from "next/navigation"
 import { SandboxHeader } from "@/components/features/studio/sandbox/components/sandbox-header"
-import { Spinner } from "@/components/icons/spinner"
+import { useRouter, usePathname } from "next/navigation"
+import { useState } from "react"
 import { useSandbox } from "@/components/features/studio/sandbox/hooks/use-sandbox"
-import {
-  useFileSystem,
-  type FileEntry,
-} from "@/components/features/studio/sandbox/hooks/use-file-system"
-import { Button } from "@/components/ui/button"
-import { Icons } from "@/components/icons"
-import {
-  XCircle,
-  RefreshCw,
-  PanelRightOpen,
-  PanelRightClose,
-} from "lucide-react"
-import { cn } from "@/lib/utils"
+import PageClient from "./page.client"
 
-function PublishPageContent() {
-  const params = useParams()
+export default function Page() {
+  const { username, sandboxId } = useParams() as {
+    username: string
+    sandboxId: string
+  }
   const router = useRouter()
   const pathname = usePathname()
-  const sandboxId = params.sandboxId as string
-  const [selectedEntry, setSelectedEntry] = useState<FileEntry | null>(null)
-  const [code, setCode] = useState<string>("")
-  const [isRegenerating, setIsRegenerating] = useState(false)
-  const [showPreview, setShowPreview] = useState<boolean>(true)
-  const [iframeKey, setIframeKey] = useState<number>(0)
-  const [isNavigating, setIsNavigating] = useState(false)
-
-  const {
-    sandboxRef,
-    previewURL,
-    serverSandbox,
-    isSandboxLoading,
-    sandboxConnectionHash,
-    reconnectSandbox,
-    missingDependencyInfo,
-    clearMissingDependencyInfo,
-    connectedShellId,
-  } = useSandbox({
-    sandboxId,
-  })
-
-  const {
-    files,
-    isTreeLoading,
-    isFileLoading,
-    advancedView,
-    toggleAdvancedView,
-    loadRootDirectory,
-    loadFileContent,
-    saveFileContent,
-    createFile,
-    deleteEntry,
-    createDirectory,
-    renameEntry,
-    addDependencyToPackageJson,
-    generateRegistry,
-  } = useFileSystem({
-    sandboxRef,
-    reconnectSandbox,
-    sandboxConnectionHash,
-    connectedShellId,
-  })
-
-  useEffect(() => {
-    // Renamed function for clarity
-    const findAndSelectFirstUiFile = async () => {
-      console.log("Attempting to find initial UI file...") // Log: Start
-      console.log(
-        "isTreeLoading:",
-        isTreeLoading,
-        "files.length:",
-        files.length,
-        "selectedEntry:",
-        selectedEntry,
-      ) // Log: State check
-      if (!isTreeLoading && files.length > 0 && !selectedEntry) {
-        console.log("Files list:", JSON.stringify(files, null, 2)) // Log: Full file list (can be verbose)
-
-        const findFirstUiFile = (entries: FileEntry[]): FileEntry | null => {
-          for (const entry of entries) {
-            // Check if path starts with /src/components/ui AND is not a directory itself
-            if (entry.path.startsWith("/src/components/ui")) {
-              if (entry.type === "file") {
-                console.log("Found potential UI file:", entry.path) // Log: Potential find
-                return entry
-              } else if (entry.type === "dir" && entry.children) {
-                // Recurse only if it's a directory within the target path
-                const fileInChildren = findFirstUiFile(entry.children)
-                if (fileInChildren) return fileInChildren
-              }
-            }
-            // Also check children even if parent doesn't match, path might be nested deeper
-            else if (entry.type === "dir" && entry.children) {
-              const fileInChildren = findFirstUiFile(entry.children)
-              if (fileInChildren) return fileInChildren
-            }
-          }
-          return null
-        }
-
-        const firstUiFile = findFirstUiFile(files)
-        console.log("Result of findFirstUiFile:", firstUiFile) // Log: Result
-
-        if (firstUiFile) {
-          console.log("Setting selected entry:", firstUiFile.path) // Log: Setting state
-          setSelectedEntry(firstUiFile)
-          // Explicitly load content after setting the entry
-          try {
-            console.log("Calling loadFileContent for:", firstUiFile.path) // Log: Loading content
-            const content = await loadFileContent(firstUiFile.path)
-            console.log("Content loaded successfully.") // Log: Load success
-            setCode(content)
-          } catch (error) {
-            // Handle error if initial load fails
-            console.error("Failed to load initial file content:", error) // Log: Load error
-            setCode("")
-            setSelectedEntry(null)
-          }
-        } else {
-          console.log("No initial UI file found in /src/components/ui") // Log: Not found
-        }
-      }
-    }
-
-    findAndSelectFirstUiFile()
-  }, [files, isTreeLoading, selectedEntry, loadFileContent]) // Add loadFileContent to dependencies
-
-  useEffect(() => {
-    if (missingDependencyInfo) {
-      addDependencyToPackageJson(
-        missingDependencyInfo.packageName,
-        missingDependencyInfo.latestVersion,
-      )
-      clearMissingDependencyInfo()
-    }
-  }, [missingDependencyInfo])
-
-  useEffect(() => {
-    if (
-      !sandboxRef.current ||
-      !selectedEntry ||
-      selectedEntry.type !== "file"
-    ) {
-      setCode("")
-      return
-    }
-
-    const loadContent = async () => {
-      try {
-        const content = await loadFileContent(selectedEntry.path)
-        setCode(content)
-      } catch (error) {
-        setCode("")
-        setSelectedEntry(null)
-      }
-    }
+  const [isNextLoading, setIsNextLoading] = useState(false)
+  // Fetch sandbox metadata for header
+  const { serverSandbox } = useSandbox({ sandboxId })
 
-    loadContent()
-  }, [sandboxRef, selectedEntry, isSandboxLoading])
-
-  const handleCodeChange = (value: string) => {
-    setCode(value)
-    if (!sandboxRef.current || !selectedEntry || selectedEntry.type !== "file")
-      return
-    saveFileContent(selectedEntry.path, value)
-  }
-
-  const handleCreateFile = async (filePath: string) => {
-    try {
-      await createFile(filePath)
-      await loadRootDirectory()
-      const newEntry: FileEntry = {
-        name: filePath.split("/").pop() || filePath,
-        path: filePath.startsWith("/") ? filePath : `/${filePath}`,
-        type: "file",
-        isSymlink: false,
-      }
-      setSelectedEntry(newEntry)
-    } catch (error) {
-      // Error is handled in the hook
-    }
-  }
-
-  const handleDeleteEntry = async (entryPath: string) => {
-    try {
-      await deleteEntry(entryPath)
-      if (selectedEntry?.path === entryPath) {
-        setSelectedEntry(null)
-        setCode("")
-      }
-      await loadRootDirectory()
-    } catch (error) {
-      // Error is handled in the hook
-    }
-  }
-
-  const handleRenameEntry = async (oldPath: string, newName: string) => {
-    try {
-      const newPath = await renameEntry(oldPath, newName)
-
-      // Update selected entry if it was the renamed one
-      if (selectedEntry?.path === oldPath) {
-        setSelectedEntry({
-          ...selectedEntry,
-          path: newPath,
-          name: newName,
-        })
-      }
-
-      return newPath
-    } catch (error) {
-      // Error is handled in the hook
-      return oldPath
-    }
-  }
-
-  const handleGenerateRegistry = async () => {
-    console.log("Starting registry generation...")
-    // setIsRegenerating(true)
-    generateRegistry()
-  }
-
-  const handleReset = () => {
-    window.location.reload()
-  }
-
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (!sandboxRef.current) {
-        if (e.key === "Escape") {
-          router.back()
-        } else if (e.key === "Enter") {
-          handleReset()
-        }
-      }
-    }
-    window.addEventListener("keydown", handleKeyDown)
-    return () => window.removeEventListener("keydown", handleKeyDown)
-  }, [router, sandboxRef])
-
-  const handleRefreshPreview = () => {
-    setIframeKey((prev) => prev + 1)
-  }
-
-  const handleTogglePreview = () => {
-    setShowPreview((prev) => !prev)
-  }
-
-  const handleNextStep = () => {
-    setIsNavigating(true)
+  const handleNext = () => {
+    setIsNextLoading(true)
     router.push(`${pathname}/publish`)
   }
 
-  if (isSandboxLoading) {
-    return (
-      <div className="h-screen w-full flex items-center justify-center bg-background">
-        <div className="flex flex-col items-center gap-4">
-          <Spinner color="hsl(var(--foreground))" />
-          <p className="text-muted-foreground">Initializing sandbox</p>
-        </div>
-      </div>
-    )
-  }
-
-  if (!sandboxRef.current) {
-    return (
-      <div className="h-screen w-full flex items-center justify-center">
-        <div className="flex flex-col items-center gap-4">
-          <XCircle className="h-6 w-6 text-muted-foreground" />
-          <p className="text-base">Failed to initialize sandbox</p>
-          <div className="flex gap-3">
-            <Button onClick={() => router.back()} variant="outline">
-              Go Back
-              <kbd className="pointer-events-none hidden md:inline-flex h-5 select-none items-center rounded border-muted-foreground/40 bg-muted-foreground/20 px-1.5 ml-1.5 font-sans text-[11px] text-kbd leading-none opacity-100">
-                ESC
-              </kbd>
-            </Button>
-            <Button onClick={handleReset}>
-              Try Again
-              <kbd className="pointer-events-none hidden md:inline-flex h-5 select-none items-center gap-1 rounded border-muted-foreground/40 bg-muted-foreground/20 px-1.5 ml-1.5 font-sans text-[11px] text-kbd leading-none opacity-100">
-                <Icons.enter className="h-2.5 w-2.5" />
-              </kbd>
-            </Button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
   return (
-    <div className="h-screen w-full flex flex-col">
+    <>
       <SandboxHeader
         sandboxId={sandboxId}
         sandboxName={serverSandbox?.name}
-        username={params.username as string}
-        onNameChange={(newName) => {
-          // Update the sandbox name in the parent component if needed
-        }}
-        customNextLabel="Continue"
-        customNextAction={handleNextStep}
-        isNextLoading={isNavigating}
+        username={username}
+        customNextAction={handleNext}
+        isNextLoading={isNextLoading}
       />
-
-      <ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
-        <ResizablePanel defaultSize={20} minSize={15}>
-          <FileExplorer
-            entries={files}
-            onSelect={setSelectedEntry}
-            selectedPath={selectedEntry?.path || null}
-            onDelete={handleDeleteEntry}
-            onCreateFile={handleCreateFile}
-            onCreateDirectory={createDirectory}
-            onRename={handleRenameEntry}
-            onRefresh={loadRootDirectory}
-            isLoading={isTreeLoading}
-            advancedView={advancedView}
-            onToggleAdvancedView={toggleAdvancedView}
-          />
-        </ResizablePanel>
-        <ResizableHandle />
-        <ResizablePanel defaultSize={80} minSize={20}>
-          <PreviewPane
-            connectedShellId={connectedShellId}
-            previewURL={previewURL}
-            selectedFile={selectedEntry}
-            code={code}
-            onCodeChange={handleCodeChange}
-            isFileLoading={isFileLoading}
-            showPreview={showPreview}
-            iframeKey={iframeKey}
-            onRefresh={handleRefreshPreview}
-          />
-        </ResizablePanel>
-      </ResizablePanelGroup>
-
-      {/* Bottom right preview controls */}
-      <div className="fixed bottom-4 right-4 flex gap-2 z-10">
-        {showPreview && (
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleRefreshPreview}
-            title="Reload preview"
-            className="bg-background/80 backdrop-blur-sm shadow-sm border"
-          >
-            <RefreshCw className="h-4 w-4" />
-          </Button>
-        )}
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={handleTogglePreview}
-          title={showPreview ? "Hide Preview" : "Show Preview"}
-          className={cn(
-            "bg-background/80 backdrop-blur-sm shadow-sm border transition-colors",
-            !showPreview && "border-primary text-primary",
-          )}
-        >
-          {showPreview ? (
-            <PanelRightClose className="h-4 w-4" />
-          ) : (
-            <PanelRightOpen className="h-4 w-4" />
-          )}
-        </Button>
-      </div>
-    </div>
-  )
-}
-
-export default function PublishPage() {
-  return (
-    <Suspense fallback={<div>Loading project...</div>}>
-      <PublishPageContent />
-    </Suspense>
+      <PageClient />
+    </>
   )
 }
diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
index 160ffe28..50a90da9 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
@@ -3,7 +3,7 @@
 import React, { useState, useEffect, useRef } from "react"
 import { useParams } from "next/navigation"
 import { useForm } from "react-hook-form"
-import { Trash2, ArrowLeftIcon } from "lucide-react"
+import { Trash2 } from "lucide-react"
 import { useUser } from "@clerk/nextjs"
 import { toast } from "sonner"
 import { zodResolver } from "@hookform/resolvers/zod"
@@ -20,8 +20,6 @@ import {
 } from "@/components/ui/accordion"
 import { LoadingDialog } from "@/components/ui/loading-dialog"
 import { Skeleton } from "@/components/ui/skeleton"
-import { Logo } from "@/components/ui/logo"
-import { UserAvatar } from "@/components/ui/user-avatar"
 
 import { ComponentForm } from "@/components/features/studio/publish/components/forms/component-form"
 import { DemoDetailsForm } from "@/components/features/studio/publish/components/forms/demo-form"

From 863f65ad17da18f8acc4d04a1f8e4cbe899dfb8b Mon Sep 17 00:00:00 2001
From: "serafim.eth" <serafimcloud@gmail.com>
Date: Fri, 2 May 2025 19:35:02 +0300
Subject: [PATCH 135/143] loadings

---
 .../sandbox/[sandboxId]/page.client.tsx       |  79 ++-
 .../[sandboxId]/publish/page.client.tsx       | 578 ++++++++++++++++++
 .../sandbox/[sandboxId]/publish/page.tsx      | 465 +-------------
 .../publish-old/hooks/use-publish-as.ts       |   8 +-
 .../publish/hooks/use-submit-component.ts     |  29 +-
 5 files changed, 715 insertions(+), 444 deletions(-)
 create mode 100644 apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.client.tsx

diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.client.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.client.tsx
index b1fdc215..ba580971 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.client.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/page.client.tsx
@@ -24,6 +24,7 @@ import {
   PanelRightClose,
 } from "lucide-react"
 import { cn } from "@/lib/utils"
+import { Skeleton } from "@/components/ui/skeleton"
 
 function PublishClientPageContent() {
   const params = useParams()
@@ -261,11 +262,79 @@ function PublishClientPageContent() {
   }
 
   if (isSandboxLoading) {
+    // Skeleton Loader for Sandbox UI (3-panel layout, no header skeleton)
     return (
-      <div className="h-screen w-full flex items-center justify-center bg-background">
-        <div className="flex flex-col items-center gap-4">
-          <Spinner color="hsl(var(--foreground))" />
-          <p className="text-muted-foreground">Initializing sandbox</p>
+      <div className="h-[calc(100vh-56px)] w-full flex flex-col bg-background">
+        {" "}
+        {/* Added top padding for header */}
+        {/* Skeleton Resizable Panel Group - Represents the main content area below the header */}
+        <div className="flex flex-1 min-h-0">
+          {/* Skeleton File Explorer Panel (Left) */}
+          <div className="w-[20%] p-2 space-y-2 overflow-hidden">
+            <Skeleton className="h-6 w-3/4" />
+            <Skeleton className="h-6 w-full" />
+            <div className="pl-4 space-y-2">
+              <Skeleton className="h-6 w-5/6" />
+              <Skeleton className="h-6 w-1/2" />
+            </div>
+            <Skeleton className="h-6 w-2/3" />
+            <Skeleton className="h-6 w-full" />
+          </div>
+
+          {/* Skeleton Resizable Handle 1 */}
+          <div className="w-[1px] bg-border cursor-col-resize flex-shrink-0"></div>
+
+          {/* Skeleton Editor Panel (Middle) */}
+          <div className="w-[40%] flex flex-col overflow-hidden">
+            {/* Skeleton Editor Content */}
+            <div className="flex-1 p-4 space-y-2 overflow-y-auto">
+              {[...Array(15)].map((_, i) => (
+                <Skeleton
+                  key={i}
+                  className="h-4 w-full"
+                  style={{ width: `${Math.random() * 30 + 70}%` }}
+                />
+              ))}
+            </div>
+          </div>
+
+          {/* Skeleton Resizable Handle 2 */}
+          <div className="w-[1px] bg-border cursor-col-resize flex-shrink-0"></div>
+
+          {/* Skeleton Preview Panel (Right) */}
+          <div className="w-[40%] bg-muted/30 flex flex-col justify-center p-6 overflow-hidden">
+            <div className="flex items-center justify-between mb-4">
+              <Skeleton className="h-8 w-32" />
+              <div className="flex gap-2">
+                <Skeleton className="h-6 w-6 rounded-full" />
+                <Skeleton className="h-6 w-6 rounded-full" />
+              </div>
+            </div>
+
+            <div className="flex gap-4 mb-6">
+              <Skeleton className="h-24 w-24 rounded-md" />
+              <div className="flex-1 space-y-2">
+                <Skeleton className="h-5 w-3/4" />
+                <Skeleton className="h-5 w-1/2" />
+                <Skeleton className="h-5 w-5/6" />
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-4 mb-6">
+              <Skeleton className="h-28 w-full rounded-md" />
+              <Skeleton className="h-28 w-full rounded-md" />
+            </div>
+
+            <div className="flex justify-end gap-3">
+              <Skeleton className="h-9 w-24 rounded-md" />
+              <Skeleton className="h-9 w-24 rounded-md" />
+            </div>
+          </div>
+        </div>
+        {/* Skeleton Bottom Right Controls */}
+        <div className="fixed bottom-4 right-4 flex gap-2 z-10">
+          <Skeleton className="h-9 w-9 rounded-md" />
+          <Skeleton className="h-9 w-9 rounded-md" />
         </div>
       </div>
     )
@@ -297,7 +366,7 @@ function PublishClientPageContent() {
   }
 
   return (
-    <div className="h-screen w-full flex flex-col">
+    <div className="h-[calc(100vh-56px)] w-full flex flex-col">
       {/* Header is rendered in page.tsx */}
 
       <ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.client.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.client.tsx
new file mode 100644
index 00000000..a0fadd8b
--- /dev/null
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.client.tsx
@@ -0,0 +1,578 @@
+"use client"
+
+import React, { useState, useEffect, useRef } from "react"
+import { useParams } from "next/navigation"
+import { useForm } from "react-hook-form"
+import { Trash2 } from "lucide-react"
+import { useUser } from "@clerk/nextjs"
+import { toast } from "sonner"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { debounce } from "lodash"
+
+import { Form } from "@/components/ui/form"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
+import { LoadingDialog } from "@/components/ui/loading-dialog"
+import { Skeleton } from "@/components/ui/skeleton"
+
+import { ComponentForm } from "@/components/features/studio/publish/components/forms/component-form"
+import { DemoDetailsForm } from "@/components/features/studio/publish/components/forms/demo-form"
+import { SuccessDialog } from "@/components/features/publish-old/components/success-dialog"
+import {
+  FormData,
+  formSchema,
+} from "@/components/features/studio/publish/config/utils"
+import { useSubmitComponent } from "@/components/features/studio/publish/hooks/use-submit-component"
+import { useComponentData } from "@/components/features/studio/publish/hooks/use-component-data"
+
+import { cn } from "@/lib/utils"
+import { useSandbox } from "@/components/features/studio/sandbox/hooks/use-sandbox"
+import { useFileSystem } from "@/components/features/studio/sandbox/hooks/use-file-system"
+import { usePublishAs } from "@/components/features/publish-old/hooks/use-publish-as"
+import { editSandbox } from "@/components/features/studio/sandbox/api"
+
+type FormStep = "detailedForm"
+
+type ParsedCodeData = {
+  componentNames: string[]
+  dependencies?: Record<string, string>
+  demoDependencies?: Record<string, string>
+}
+
+interface PageClientProps {
+  onSubmitStatusChange: (isSubmitting: boolean) => void
+  onSubmitHandlerReady: (submitHandler: () => void) => void
+}
+
+const PageClient: React.FC<PageClientProps> = ({
+  onSubmitStatusChange,
+  onSubmitHandlerReady,
+}) => {
+  const params = useParams()
+  const sandboxId = params.sandboxId as string
+  const {
+    previewURL,
+    sandboxRef,
+    reconnectSandbox,
+    connectedShellId,
+    sandboxConnectionHash,
+    serverSandbox,
+  } = useSandbox({
+    sandboxId,
+  })
+
+  // Fetch component data if sandbox is linked to a component
+  const { isLoading: isComponentDataLoading, formData: componentFormData } =
+    useComponentData(serverSandbox?.component_id)
+
+  const { generateRegistry, bundleDemo, updateComponentNameAndImport } =
+    useFileSystem({
+      sandboxRef: sandboxRef,
+      reconnectSandbox: reconnectSandbox,
+      sandboxConnectionHash: sandboxConnectionHash,
+      connectedShellId,
+    })
+  const { user } = useUser()
+
+  // Declare all state hooks first
+  const [formStep] = useState<FormStep>("detailedForm")
+  const [openAccordion, setOpenAccordion] = useState([
+    "component-info",
+    "demo-0",
+  ])
+
+  // Form setup
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: serverSandbox?.name || "",
+      component_slug: "",
+      registry: "ui",
+      description: "",
+      license: "mit",
+      website_url: "",
+      is_public: false,
+      publish_as_username: user?.username ?? undefined,
+      is_paid: false,
+      price: 0,
+      unknown_dependencies: [],
+      direct_registry_dependencies: [],
+      code: `// Mock component code for ${sandboxId}\nexport default function MockComponent() { return <div>Hello</div>; }`,
+      demos: [
+        {
+          name: "Default",
+          demo_code: `// Mock demo code for ${sandboxId}\nimport MockComponent from './component';\nexport default function Demo() { return <MockComponent />; }`,
+          demo_slug: "default",
+          tags: [],
+          preview_image_data_url: "",
+          preview_image_file: undefined,
+          preview_video_data_url: "",
+          preview_video_file: undefined,
+          demo_direct_registry_dependencies: [],
+          demo_dependencies: {},
+        },
+      ],
+    },
+  })
+
+  const publishAsUsername = form.watch("publish_as_username")
+  const { user: publishAsUser, isLoading: isPublishAsLoading } = usePublishAs({
+    username: publishAsUsername ?? user?.username ?? "",
+  })
+  const { isLoaded: isClerkUserLoaded } = useUser() // Get Clerk's loading state
+
+  // Log user data for debugging
+  useEffect(() => {
+    console.log("Clerk user:", user)
+    console.log("Publish as username:", publishAsUsername)
+    console.log("Publish as user:", publishAsUser)
+  }, [user, publishAsUsername, publishAsUser])
+
+  useEffect(() => {
+    if (form.getValues("publish_as_username") === undefined && user?.username) {
+      console.log("Setting publish_as_username to", user.username)
+      form.setValue("publish_as_username", user.username)
+    }
+  }, [user?.username, form])
+
+  const {
+    isSubmitting,
+    isLoadingDialogOpen,
+    publishProgress,
+    isSuccessDialogOpen,
+    createdDemoSlug,
+    submitComponent,
+    setIsSuccessDialogOpen,
+  } = useSubmitComponent()
+
+  useEffect(() => {
+    onSubmitStatusChange(isSubmitting)
+  }, [isSubmitting, onSubmitStatusChange])
+
+  // Provide the submit handler to the parent component
+  useEffect(() => {
+    // We need to wrap handleSubmit in a function to avoid circular references
+    const submitWrapper = () => {
+      console.log("Submit handler called from parent component")
+      handleSubmit()
+    }
+
+    onSubmitHandlerReady(submitWrapper)
+  }, [onSubmitHandlerReady])
+
+  const handleGoToComponent = () => {
+    const username = publishAsUser?.username || user?.username
+    const slug = form.getValues("component_slug")
+    const demoSlug = createdDemoSlug || "default"
+    if (username && slug) {
+      console.log(`Redirecting to /${username}/${slug}/${demoSlug}`)
+    } else {
+      console.warn("Could not determine redirect path.")
+    }
+    setIsSuccessDialogOpen(false)
+  }
+
+  // Log form state changes
+  useEffect(() => {
+    const subscription = form.watch((value) => {
+      // console.log("Form state updated:", value); // Optional: keep for debugging
+    })
+    return () => subscription.unsubscribe()
+  }, [form])
+
+  // Update form name when serverSandbox name changes
+  useEffect(() => {
+    if (serverSandbox?.name && !componentFormData) {
+      form.setValue("name", serverSandbox.name)
+    }
+  }, [serverSandbox?.name, form, componentFormData])
+
+  // Update form with component data when available
+  useEffect(() => {
+    if (componentFormData && !isComponentDataLoading) {
+      form.reset({
+        ...componentFormData,
+        publish_as_username:
+          user?.username ?? componentFormData.publish_as_username,
+      })
+
+      // Open all demo accordions
+      if (componentFormData.demos.length > 0) {
+        const newOpenAccordion = ["component-info"]
+        componentFormData.demos.forEach((_, index) => {
+          newOpenAccordion.push(`demo-${index}`)
+        })
+        setOpenAccordion(newOpenAccordion)
+      }
+    }
+  }, [componentFormData, isComponentDataLoading, form, user?.username])
+
+  const prevNameRef = useRef<string>("")
+
+  const debouncedUpdateName = useRef(
+    debounce(async (newName: string) => {
+      if (!sandboxId) return
+
+      try {
+        if (newName !== prevNameRef.current) {
+          console.log(
+            `Updating sandbox name from "${prevNameRef.current}" to "${newName}"`,
+          )
+          prevNameRef.current = newName
+
+          const result = await editSandbox(sandboxId, { name: newName })
+          console.log("Updated sandbox name in database:", result)
+        }
+      } catch (error) {
+        console.error("Failed to update sandbox name in database:", error)
+      }
+    }, 800),
+  ).current
+
+  useEffect(() => {
+    prevNameRef.current = form.getValues("name") || serverSandbox?.name || ""
+  }, [serverSandbox?.name, form])
+
+  useEffect(() => {
+    const subscription = form.watch((value, { name: fieldName }) => {
+      if (fieldName === "name" && value.name) {
+        const newName = value.name as string
+        if (newName !== prevNameRef.current) {
+          console.log(`Name field changed, scheduling update to: "${newName}"`)
+          debouncedUpdateName(newName)
+        }
+      }
+    })
+
+    return () => {
+      debouncedUpdateName.cancel()
+      subscription.unsubscribe()
+    }
+  }, [form, debouncedUpdateName])
+
+  const handleSubmit = (event?: React.FormEvent) => {
+    event?.preventDefault()
+
+    // --- Enhanced Debugging ---
+    console.log("handleSubmit triggered")
+    console.log("Clerk user state:", JSON.stringify(user, null, 2))
+    console.log("Clerk user loaded:", isClerkUserLoaded)
+    console.log("Publish as username:", publishAsUsername)
+    console.log(
+      "Publish as user state:",
+      JSON.stringify(publishAsUser, null, 2),
+    )
+    console.log("Publish as user loading:", isPublishAsLoading)
+    // --- End Enhanced Debugging ---
+
+    // --- Check Loading States ---
+    if (!isClerkUserLoaded || isPublishAsLoading) {
+      console.warn("User data is still loading. Aborting submission.")
+      toast.info("User data is loading, please wait...")
+      return // Prevent submission if data isn't ready
+    }
+    // --- End Check Loading States ---
+
+    let finalPublishUser: { id: string; username?: string } | null = null
+
+    if (publishAsUser?.id) {
+      finalPublishUser = {
+        id: publishAsUser.id,
+        username: publishAsUser.username || undefined,
+      }
+      console.log("Using publishAsUser:", finalPublishUser)
+    } else if (user?.id) {
+      finalPublishUser = {
+        id: user.id,
+        username: user.username || undefined,
+      }
+      console.log("Using fallback Clerk user:", finalPublishUser)
+    } else {
+      console.error(
+        "Cannot determine user to publish as. Clerk user and publishAsUser are both missing.",
+      )
+      toast.error(
+        "Cannot determine user to publish as. Please ensure you are logged in and try again.",
+      )
+      return // Stop submission if no valid user found
+    }
+
+    const currentSandbox = serverSandbox
+
+    // Now we know finalPublishUser is not null and has an id
+    form.handleSubmit(
+      (formData) => {
+        console.log("Form data is valid:", formData)
+
+        // --- Add check for serverSandbox ---
+        if (!currentSandbox?.id) {
+          console.error(
+            "Captured currentSandbox or currentSandbox.id is null/undefined.",
+            currentSandbox,
+          )
+          toast.error("Sandbox data is missing. Cannot submit.")
+          return // Abort if sandbox data is missing
+        }
+        // --- End check for serverSandbox ---
+
+        const data = {
+          ...formData,
+          website_url: formData.website_url || "",
+        }
+
+        submitComponent({
+          data,
+          publishAsUser: finalPublishUser!, // Non-null assertion is safe here
+          generateRegistry,
+          bundleDemo,
+          updateComponentNameAndImport,
+          sandboxId: currentSandbox.id, // Use the captured value's id
+          onSuccess: () => {
+            reconnectSandbox()
+          },
+        })
+      },
+      (errors) => {
+        console.error("Form validation errors:", errors)
+        toast.error("Please fill all the required fields")
+      },
+    )(event)
+  }
+
+  const watchedComponentFields = form.watch([
+    "description",
+    "name",
+    "component_slug",
+  ])
+  const isComponentInfoComplete = () => {
+    const [description, name, component_slug] = watchedComponentFields
+    return !!description && !!name && !!component_slug
+  }
+
+  const handleAddAnother = () => {
+    form.reset()
+    setIsSuccessDialogOpen(false)
+    setOpenAccordion(["component-info", "demo-0"])
+  }
+
+  const isDemoComplete = (demo: any) =>
+    demo.name && demo.tags?.length > 0 && demo.preview_image_data_url
+
+  if (isComponentDataLoading || !serverSandbox?.id) {
+    return (
+      <div className="flex flex-col h-[calc(100vh-56px)] w-full">
+        <div className="flex h-full">
+          {/* Left Panel Skeleton */}
+          <div className="border-r pointer-events-none transition-[width] duration-300 max-h-screen overflow-y-auto w-1/3 p-4">
+            <div className="space-y-6">
+              {/* Component Info Skeleton */}
+              <div className="space-y-4">
+                {/* Accordion Trigger - Wider */}
+                <Skeleton className="h-10 w-full rounded-md" />
+                {/* Removed indent div, adjusted label/input widths */}
+                <div className="space-y-4 pt-4">
+                  {" "}
+                  {/* Added pt-4 to mimic AccordionContent padding */}
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <Skeleton className="h-4 w-1/3 mb-1" /> {/* Label */}
+                      <Skeleton className="h-10 w-full" /> {/* Input */}
+                    </div>
+                    <div className="space-y-2">
+                      <Skeleton className="h-4 w-1/3 mb-1" /> {/* Label */}
+                      <Skeleton className="h-10 w-full" /> {/* Input */}
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    <Skeleton className="h-4 w-1/3 mb-1" /> {/* Label */}
+                    <Skeleton className="h-20 w-full" /> {/* Textarea */}
+                  </div>
+                  <div className="space-y-2">
+                    <Skeleton className="h-4 w-1/3 mb-1" /> {/* Label */}
+                    <Skeleton className="h-10 w-full" /> {/* Select */}
+                  </div>
+                </div>
+              </div>
+
+              {/* Demo Details Skeleton */}
+              <div className="space-y-4">
+                {/* Accordion Trigger - Wider */}
+                <Skeleton className="h-10 w-full rounded-md" />
+                {/* Removed indent div, adjusted label/input widths */}
+                <div className="space-y-4 pt-4">
+                  {" "}
+                  {/* Added pt-4 */}
+                  <div className="space-y-2">
+                    <Skeleton className="h-4 w-1/3 mb-1" />{" "}
+                    {/* Label - Demo Name */}
+                    <Skeleton className="h-10 w-full" /> {/* Input */}
+                  </div>
+                  <div className="space-y-2">
+                    <Skeleton className="h-4 w-1/3 mb-1" /> {/* Label - Tags */}
+                    <Skeleton className="h-10 w-full" /> {/* Tags Input */}
+                  </div>
+                  <div className="space-y-2">
+                    <Skeleton className="h-4 w-1/3 mb-1" />{" "}
+                    {/* Label - Cover Image */}
+                    <Skeleton className="h-32 w-full" /> {/* File Upload */}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Right Panel Skeleton (Iframe) */}
+          <div className="w-2/3 h-full bg-muted flex items-center justify-center">
+            <Skeleton className="w-full h-full" />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <Form {...form}>
+        <div className="flex flex-col h-[calc(100vh-3.5rem)] w-full">
+          <div className="flex flex-1 min-h-0">
+            <div className="border-r transition-[width] duration-300 max-h-full overflow-y-auto w-1/3">
+              <div className="w-full flex flex-col gap-4 overflow-y-auto p-4">
+                <div className="space-y-4 p-[2px]">
+                  <Accordion
+                    type="multiple"
+                    value={openAccordion}
+                    onValueChange={setOpenAccordion}
+                    className="w-full"
+                  >
+                    <AccordionItem value="component-info">
+                      <AccordionTrigger className="py-2 text-[15px] leading-6 hover:no-underline hover:bg-muted/50 rounded-md data-[state=open]:rounded-b-none transition-all duration-200 ease-in-out -mx-2 px-2">
+                        <div className="flex items-center gap-2">
+                          Component info
+                          <Badge
+                            variant="outline"
+                            className={cn(
+                              "gap-1.5 text-xs font-medium",
+                              isComponentInfoComplete()
+                                ? "border-emerald-500/20"
+                                : "border-amber-500/20",
+                            )}
+                          >
+                            <span
+                              className={cn(
+                                "size-1.5 rounded-full",
+                                isComponentInfoComplete()
+                                  ? "bg-emerald-500"
+                                  : "bg-amber-500",
+                              )}
+                              aria-hidden="true"
+                            />
+                            {isComponentInfoComplete()
+                              ? "Complete"
+                              : "Required"}
+                          </Badge>
+                        </div>
+                      </AccordionTrigger>
+                      <AccordionContent className="text-muted-foreground pt-4">
+                        <div className="text-foreground">
+                          <ComponentForm
+                            form={form as any}
+                            handleSubmit={handleSubmit}
+                            isSubmitting={isSubmitting}
+                            hotkeysEnabled={!isSuccessDialogOpen}
+                          />
+                        </div>
+                      </AccordionContent>
+                    </AccordionItem>
+
+                    {form.getValues().demos?.map((demo, index) => (
+                      <AccordionItem
+                        key={index}
+                        value={`demo-${index}`}
+                        className="bg-background border-none group"
+                      >
+                        <AccordionTrigger className="py-2 text-[15px] leading-6 hover:no-underline hover:bg-muted/50 rounded-md data-[state=open]:rounded-b-none transition-all duration-200 ease-in-out -mx-2 px-2">
+                          <div className="flex items-center gap-2 w-full">
+                            <div className="flex items-center gap-2 flex-1 min-w-0 overflow-hidden">
+                              <div className="truncate flex-shrink min-w-0">
+                                {form.getValues().demos.length > 1
+                                  ? `${demo.name || `Demo ${index + 1}`} Details`
+                                  : "Demo Details"}
+                              </div>
+                              <Badge
+                                variant="outline"
+                                className={cn(
+                                  "gap-1.5 text-xs font-medium shrink-0",
+                                  isDemoComplete(demo)
+                                    ? "border-emerald-500/20"
+                                    : "border-amber-500/20",
+                                )}
+                              >
+                                <span
+                                  className={cn(
+                                    "size-1.5 rounded-full",
+                                    isDemoComplete(demo)
+                                      ? "bg-emerald-500"
+                                      : "bg-amber-500",
+                                  )}
+                                  aria-hidden="true"
+                                />
+                                {isDemoComplete(demo) ? "Complete" : "Required"}
+                              </Badge>
+                            </div>
+                            {form.getValues().demos.length > 1 && (
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="opacity-0 group-hover:opacity-100 transition-opacity h-8 w-8 ml-auto mr-1 shrink-0"
+                                onClick={(e) => {
+                                  e.stopPropagation()
+                                  console.log("Delete demo:", index)
+                                  toast.info(
+                                    `Demo ${index + 1} deletion not implemented yet.`,
+                                  )
+                                }}
+                              >
+                                <Trash2 className="h-4 w-4 text-muted-foreground hover:text-destructive transition-colors" />
+                              </Button>
+                            )}
+                          </div>
+                        </AccordionTrigger>
+                        <AccordionContent className="pt-4">
+                          <div className="text-foreground space-y-4">
+                            <DemoDetailsForm
+                              form={form as any}
+                              demoIndex={index}
+                            />
+                          </div>
+                        </AccordionContent>
+                      </AccordionItem>
+                    ))}
+                  </Accordion>
+                </div>
+              </div>
+            </div>
+
+            <iframe src={previewURL || ""} className="w-2/3 h-full" />
+          </div>
+        </div>
+      </Form>
+
+      <LoadingDialog isOpen={isLoadingDialogOpen} message={publishProgress} />
+      <SuccessDialog
+        isOpen={isSuccessDialogOpen}
+        onOpenChange={setIsSuccessDialogOpen}
+        onAddAnother={handleAddAnother}
+        onGoToComponent={handleGoToComponent}
+        mode={"component"}
+      />
+    </>
+  )
+}
+
+export default PageClient
diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
index 50a90da9..92766c53 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
@@ -1,462 +1,55 @@
 "use client"
 
-import React, { useState, useEffect, useRef } from "react"
 import { useParams } from "next/navigation"
-import { useForm } from "react-hook-form"
-import { Trash2 } from "lucide-react"
-import { useUser } from "@clerk/nextjs"
-import { toast } from "sonner"
-import { zodResolver } from "@hookform/resolvers/zod"
-import { debounce } from "lodash"
-
-import { Form } from "@/components/ui/form"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion"
-import { LoadingDialog } from "@/components/ui/loading-dialog"
-import { Skeleton } from "@/components/ui/skeleton"
-
-import { ComponentForm } from "@/components/features/studio/publish/components/forms/component-form"
-import { DemoDetailsForm } from "@/components/features/studio/publish/components/forms/demo-form"
-import { SuccessDialog } from "@/components/features/publish-old/components/success-dialog"
-import {
-  FormData,
-  formSchema,
-} from "@/components/features/studio/publish/config/utils"
-import { useSubmitComponent } from "@/components/features/studio/publish/hooks/use-submit-component"
-import { useComponentData } from "@/components/features/studio/publish/hooks/use-component-data"
-
-import { cn } from "@/lib/utils"
-import { useSandbox } from "@/components/features/studio/sandbox/hooks/use-sandbox"
-import { useFileSystem } from "@/components/features/studio/sandbox/hooks/use-file-system"
-import { usePublishAs } from "@/components/features/publish-old/hooks/use-publish-as"
-import { editSandbox } from "@/components/features/studio/sandbox/api"
+import { useState, useCallback } from "react"
 import { SandboxHeader } from "@/components/features/studio/sandbox/components/sandbox-header"
+import { useSandbox } from "@/components/features/studio/sandbox/hooks/use-sandbox"
+import PageClient from "./page.client"
 
-type FormStep = "detailedForm"
-
-type ParsedCodeData = {
-  componentNames: string[]
-  dependencies?: Record<string, string>
-  demoDependencies?: Record<string, string>
-}
-
-const PublishPage = () => {
-  const params = useParams()
-  const sandboxId = params.sandboxId as string
-  const {
-    previewURL,
-    sandboxRef,
-    reconnectSandbox,
-    connectedShellId,
-    sandboxConnectionHash,
-    serverSandbox,
-  } = useSandbox({
-    sandboxId,
-  })
-
-  // Fetch component data if sandbox is linked to a component
-  const { isLoading: isComponentDataLoading, formData: componentFormData } =
-    useComponentData(serverSandbox?.component_id)
-
-  const { generateRegistry, bundleDemo, updateComponentNameAndImport } =
-    useFileSystem({
-      sandboxRef: sandboxRef,
-      reconnectSandbox: reconnectSandbox,
-      sandboxConnectionHash: sandboxConnectionHash,
-      connectedShellId,
-    })
-  const { user } = useUser()
-
-  // Declare all state hooks first
-  const [formStep] = useState<FormStep>("detailedForm")
-  const [openAccordion, setOpenAccordion] = useState([
-    "component-info",
-    "demo-0",
-  ])
-
-  // Form setup
-  const form = useForm<FormData>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      name: serverSandbox?.name || "",
-      component_slug: "",
-      registry: "ui",
-      description: "",
-      license: "mit",
-      website_url: "",
-      is_public: false,
-      publish_as_username: user?.username ?? undefined,
-      is_paid: false,
-      price: 0,
-      unknown_dependencies: [],
-      direct_registry_dependencies: [],
-      code: `// Mock component code for ${sandboxId}\nexport default function MockComponent() { return <div>Hello</div>; }`,
-      demos: [
-        {
-          name: "Default",
-          demo_code: `// Mock demo code for ${sandboxId}\nimport MockComponent from './component';\nexport default function Demo() { return <MockComponent />; }`,
-          demo_slug: "default",
-          tags: [],
-          preview_image_data_url: "",
-          preview_image_file: undefined,
-          preview_video_data_url: "",
-          preview_video_file: undefined,
-          demo_direct_registry_dependencies: [],
-          demo_dependencies: {},
-        },
-      ],
-    },
-  })
-
-  const publishAsUsername = form.watch("publish_as_username")
-  const { user: publishAsUser } = usePublishAs({
-    username: publishAsUsername ?? user?.username ?? "",
-  })
-
-  useEffect(() => {
-    if (form.getValues("publish_as_username") === undefined && user?.username) {
-      form.setValue("publish_as_username", user.username)
-    }
-  }, [user?.username, form])
-
-  const {
-    isSubmitting,
-    isLoadingDialogOpen,
-    publishProgress,
-    isSuccessDialogOpen,
-    createdDemoSlug,
-    submitComponent,
-    setIsSuccessDialogOpen,
-  } = useSubmitComponent()
-
-  const handleGoToComponent = () => {
-    const username = publishAsUser?.username || user?.username
-    const slug = form.getValues("component_slug")
-    const demoSlug = createdDemoSlug || "default"
-    if (username && slug) {
-      console.log(`Redirecting to /${username}/${slug}/${demoSlug}`)
-    } else {
-      console.warn("Could not determine redirect path.")
-    }
-    setIsSuccessDialogOpen(false)
+export default function Page() {
+  const { username, sandboxId } = useParams() as {
+    username: string
+    sandboxId: string
   }
+  const [isNextLoading, setIsNextLoading] = useState(false)
+  const [submitHandler, setSubmitHandler] = useState<(() => void) | null>(null)
 
-  // Log form state changes
-  useEffect(() => {
-    const subscription = form.watch((value) => {
-      console.log("Form state updated:", value)
-    })
-    return () => subscription.unsubscribe()
-  }, [form])
+  // Fetch sandbox metadata for header
+  const { serverSandbox } = useSandbox({ sandboxId })
 
-  // Update form name when serverSandbox name changes
-  useEffect(() => {
-    if (serverSandbox?.name && !componentFormData) {
-      form.setValue("name", serverSandbox.name)
-    }
-  }, [serverSandbox?.name, form, componentFormData])
+  const handleSubmitStatusChange = useCallback((isSubmitting: boolean) => {
+    setIsNextLoading(isSubmitting)
+  }, [])
 
-  // Update form with component data when available
-  useEffect(() => {
-    if (componentFormData && !isComponentDataLoading) {
-      form.reset({
-        ...componentFormData,
-        publish_as_username:
-          user?.username ?? componentFormData.publish_as_username,
-      })
+  const handleSubmitHandlerReady = useCallback((handler: () => void) => {
+    setSubmitHandler(() => handler)
+  }, [])
 
-      // Open all demo accordions
-      if (componentFormData.demos.length > 0) {
-        const newOpenAccordion = ["component-info"]
-        componentFormData.demos.forEach((_, index) => {
-          newOpenAccordion.push(`demo-${index}`)
-        })
-        setOpenAccordion(newOpenAccordion)
-      }
+  const handleSubmit = () => {
+    if (submitHandler) {
+      submitHandler()
     }
-  }, [componentFormData, isComponentDataLoading, form, user?.username])
-
-  // Предыдущее значение имени для сравнения
-  const prevNameRef = useRef<string>("")
-
-  // Создаем дебаунсированную функцию для обновления имени
-  const debouncedUpdateName = useRef(
-    debounce(async (newName: string) => {
-      if (!sandboxId) return
-
-      try {
-        // Проверяем, что имя действительно изменилось
-        if (newName !== prevNameRef.current) {
-          console.log(
-            `Updating sandbox name from "${prevNameRef.current}" to "${newName}"`,
-          )
-          prevNameRef.current = newName
-
-          const result = await editSandbox(sandboxId, { name: newName })
-          console.log("Updated sandbox name in database:", result)
-        }
-      } catch (error) {
-        console.error("Failed to update sandbox name in database:", error)
-      }
-    }, 800), // задержка 800мс
-  ).current
-
-  // Инициализируем prevNameRef при загрузке формы
-  useEffect(() => {
-    prevNameRef.current = form.getValues("name") || serverSandbox?.name || ""
-  }, [serverSandbox?.name, form])
-
-  // Главное: следим за изменениями поля name в форме и обновляем в базе
-  useEffect(() => {
-    // Используем мутацию формы вместо watch для уменьшения количества срабатываний
-    const subscription = form.watch((value, { name: fieldName }) => {
-      if (fieldName === "name" && value.name) {
-        const newName = value.name as string
-
-        // Запускаем дебаунс только если значение изменилось
-        if (newName !== prevNameRef.current) {
-          console.log(`Name field changed, scheduling update to: "${newName}"`)
-          debouncedUpdateName(newName)
-        }
-      }
-    })
-
-    return () => {
-      debouncedUpdateName.cancel()
-      subscription.unsubscribe()
-    }
-  }, [form, debouncedUpdateName])
-
-  const handleSubmit = (event?: React.FormEvent) => {
-    event?.preventDefault()
-    form.handleSubmit(
-      (formData) => {
-        console.log("Form data is valid:", formData)
-
-        console.log("Form errors:", form.formState.errors)
-        const data = {
-          ...formData,
-          website_url: formData.website_url || "",
-        }
-        if (!publishAsUser?.id) {
-          toast.error(
-            "Cannot determine user to publish as. Please ensure you are logged in.",
-          )
-          return
-        }
-        submitComponent({
-          data,
-          publishAsUser: {
-            id: publishAsUser.id,
-            username: publishAsUser.username || undefined,
-          },
-          generateRegistry,
-          bundleDemo,
-          updateComponentNameAndImport,
-          sandboxId: serverSandbox!.id,
-          onSuccess: () => {
-            reconnectSandbox()
-          },
-        })
-      },
-      (errors) => {
-        console.error("Form validation errors:", errors)
-        toast.error("Please fill all the required fields")
-      },
-    )(event) // Immediately invoke the handler
-  }
-
-  const watchedComponentFields = form.watch([
-    "description",
-    "name",
-    "component_slug",
-  ])
-  const isComponentInfoComplete = () => {
-    const [description, name, component_slug] = watchedComponentFields
-    return !!description && !!name && !!component_slug
-  }
-
-  const handleAddAnother = () => {
-    form.reset()
-    setIsSuccessDialogOpen(false)
-    setOpenAccordion(["component-info", "demo-0"])
-  }
-
-  const isDemoComplete = (demo: any) =>
-    demo.name && demo.tags?.length > 0 && demo.preview_image_data_url
-
-  if (!serverSandbox?.id) {
-    return (
-      <div>
-        <h1>Loader lol</h1>
-      </div>
-    )
   }
 
   return (
     <>
       <SandboxHeader
-        sandboxId={serverSandbox.id || ""}
-        sandboxName={form.watch("name") || serverSandbox?.name || "Untitled"}
-        username={params.username as string}
+        sandboxId={sandboxId}
+        sandboxName={serverSandbox?.name}
+        username={username}
         status={serverSandbox?.component_id ? "edit" : "draft"}
         showEditName={false}
         customBackLabel="Back to edit"
-        customBackUrl={`/studio/${params.username}/sandbox/${sandboxId}`}
-        customNextLabel={isSubmitting ? "Submitting..." : "Send to review"}
+        customBackUrl={`/studio/${username}/sandbox/${sandboxId}`}
+        customNextLabel={isNextLoading ? "Submitting..." : "Send to review"}
         customNextAction={handleSubmit}
         hideNext={false}
-        isNextLoading={isSubmitting}
+        isNextLoading={isNextLoading}
       />
-      <Form {...form}>
-        <div className="flex flex-col h-screen w-full">
-          <div className="flex h-[calc(100vh-3.5rem)]">
-            <div className="border-r pointer-events-auto transition-[width] duration-300 max-h-screen overflow-y-auto w-1/3">
-              <div className="w-full flex flex-col gap-4 overflow-y-auto p-4">
-                {isComponentDataLoading ? (
-                  <div className="space-y-4">
-                    <Skeleton className="h-10 w-full" />
-                    <Skeleton className="h-24 w-full" />
-                    <Skeleton className="h-10 w-full" />
-                    <Skeleton className="h-24 w-full" />
-                  </div>
-                ) : (
-                  <div className="space-y-4 p-[2px]">
-                    <Accordion
-                      type="multiple"
-                      value={openAccordion}
-                      onValueChange={setOpenAccordion}
-                      className="w-full"
-                    >
-                      <AccordionItem value="component-info">
-                        <AccordionTrigger className="py-2 text-[15px] leading-6 hover:no-underline hover:bg-muted/50 rounded-md data-[state=open]:rounded-b-none transition-all duration-200 ease-in-out -mx-2 px-2">
-                          <div className="flex items-center gap-2">
-                            Component info
-                            <Badge
-                              variant="outline"
-                              className={cn(
-                                "gap-1.5 text-xs font-medium",
-                                isComponentInfoComplete()
-                                  ? "border-emerald-500/20"
-                                  : "border-amber-500/20",
-                              )}
-                            >
-                              <span
-                                className={cn(
-                                  "size-1.5 rounded-full",
-                                  isComponentInfoComplete()
-                                    ? "bg-emerald-500"
-                                    : "bg-amber-500",
-                                )}
-                                aria-hidden="true"
-                              />
-                              {isComponentInfoComplete()
-                                ? "Complete"
-                                : "Required"}
-                            </Badge>
-                          </div>
-                        </AccordionTrigger>
-                        <AccordionContent className="text-muted-foreground pt-4">
-                          <div className="text-foreground">
-                            <ComponentForm
-                              form={form as any}
-                              handleSubmit={handleSubmit}
-                              isSubmitting={isSubmitting}
-                              hotkeysEnabled={!isSuccessDialogOpen}
-                            />
-                          </div>
-                        </AccordionContent>
-                      </AccordionItem>
-
-                      {form.getValues().demos?.map((demo, index) => (
-                        <AccordionItem
-                          key={index}
-                          value={`demo-${index}`}
-                          className="bg-background border-none group"
-                        >
-                          <AccordionTrigger className="py-2 text-[15px] leading-6 hover:no-underline hover:bg-muted/50 rounded-md data-[state=open]:rounded-b-none transition-all duration-200 ease-in-out -mx-2 px-2">
-                            <div className="flex items-center gap-2 w-full">
-                              <div className="flex items-center gap-2 flex-1 min-w-0 overflow-hidden">
-                                <div className="truncate flex-shrink min-w-0">
-                                  {form.getValues().demos.length > 1
-                                    ? `${demo.name || `Demo ${index + 1}`} Details`
-                                    : "Demo Details"}
-                                </div>
-                                <Badge
-                                  variant="outline"
-                                  className={cn(
-                                    "gap-1.5 text-xs font-medium shrink-0",
-                                    isDemoComplete(demo)
-                                      ? "border-emerald-500/20"
-                                      : "border-amber-500/20",
-                                  )}
-                                >
-                                  <span
-                                    className={cn(
-                                      "size-1.5 rounded-full",
-                                      isDemoComplete(demo)
-                                        ? "bg-emerald-500"
-                                        : "bg-amber-500",
-                                    )}
-                                    aria-hidden="true"
-                                  />
-                                  {isDemoComplete(demo)
-                                    ? "Complete"
-                                    : "Required"}
-                                </Badge>
-                              </div>
-                              {form.getValues().demos.length > 1 && (
-                                <Button
-                                  variant="ghost"
-                                  size="icon"
-                                  className="opacity-0 group-hover:opacity-100 transition-opacity h-8 w-8 ml-auto mr-1 shrink-0"
-                                  onClick={(e) => {
-                                    e.stopPropagation()
-                                    console.log("Delete demo:", index)
-                                  }}
-                                >
-                                  <Trash2 className="h-4 w-4 text-muted-foreground hover:text-destructive transition-colors" />
-                                </Button>
-                              )}
-                            </div>
-                          </AccordionTrigger>
-                          <AccordionContent className="pt-4">
-                            <div className="text-foreground space-y-4">
-                              <DemoDetailsForm
-                                form={form as any}
-                                demoIndex={index}
-                              />
-                            </div>
-                          </AccordionContent>
-                        </AccordionItem>
-                      ))}
-                    </Accordion>
-                  </div>
-                )}
-              </div>
-            </div>
-
-            <iframe src={previewURL || ""} className="w-2/3" />
-          </div>
-        </div>
-      </Form>
-
-      <LoadingDialog isOpen={isLoadingDialogOpen} message={publishProgress} />
-      <SuccessDialog
-        isOpen={isSuccessDialogOpen}
-        onOpenChange={setIsSuccessDialogOpen}
-        onAddAnother={handleAddAnother}
-        onGoToComponent={handleGoToComponent}
-        mode={"component"}
+      <PageClient
+        onSubmitStatusChange={handleSubmitStatusChange}
+        onSubmitHandlerReady={handleSubmitHandlerReady}
       />
     </>
   )
 }
-
-export default PublishPage
diff --git a/apps/web/components/features/publish-old/hooks/use-publish-as.ts b/apps/web/components/features/publish-old/hooks/use-publish-as.ts
index c0995569..fcc307ea 100644
--- a/apps/web/components/features/publish-old/hooks/use-publish-as.ts
+++ b/apps/web/components/features/publish-old/hooks/use-publish-as.ts
@@ -8,7 +8,10 @@ export const usePublishAs = ({ username }: { username: string }) => {
   const { user } = useUser()
   const client = useClerkSupabaseClient()
 
-  const { data: isCurrentUserAdmin = false } = useQuery({
+  const {
+    data: isCurrentUserAdmin = false,
+    isLoading: isCurrentUserAdminLoading,
+  } = useQuery({
     queryKey: ["user", user?.id, "isAdmin"],
     queryFn: async () => {
       if (!user?.id) return false
@@ -22,7 +25,7 @@ export const usePublishAs = ({ username }: { username: string }) => {
     enabled: !!user?.id,
   })
 
-  const { data: publishAsUser } = useQuery({
+  const { data: publishAsUser, isLoading: isPublishAsUserLoading } = useQuery({
     queryKey: ["publishAsUser", username],
     queryFn: async () => {
       const { data } = await client
@@ -38,5 +41,6 @@ export const usePublishAs = ({ username }: { username: string }) => {
   return {
     isAdmin: isCurrentUserAdmin,
     user: publishAsUser,
+    isLoading: isPublishAsUserLoading || isCurrentUserAdminLoading,
   }
 }
diff --git a/apps/web/components/features/studio/publish/hooks/use-submit-component.ts b/apps/web/components/features/studio/publish/hooks/use-submit-component.ts
index 14951f6b..04dcd572 100644
--- a/apps/web/components/features/studio/publish/hooks/use-submit-component.ts
+++ b/apps/web/components/features/studio/publish/hooks/use-submit-component.ts
@@ -315,25 +315,37 @@ export const useSubmitComponent = () => {
 
       if (componentIdToUse) {
         // Update existing component
+        console.log(
+          `Attempting to update component with ID: ${componentIdToUse}`,
+        )
         const { data: updatedComponent, error: updateComponentError } =
           await client
             .from("components")
             .update(componentData)
             .eq("id", componentIdToUse)
             .select()
-            .single()
+
+        console.log("Update component result:", {
+          updatedComponent,
+          updateComponentError,
+        })
 
         if (updateComponentError) {
           console.error("Error updating component:", updateComponentError)
           throw updateComponentError
         }
         if (!updatedComponent) {
+          console.error("Update component failed: No data returned.") // Log specific error
           throw new Error("Failed to update component, no data returned.")
         }
         finalComponent = updatedComponent
         console.log("Successfully updated component:", finalComponent)
       } else {
         // Insert new component
+        console.log(
+          "Attempting to insert new component with data:",
+          componentData,
+        )
         const { data: insertedComponent, error: insertComponentError } =
           await client
             .from("components")
@@ -341,11 +353,17 @@ export const useSubmitComponent = () => {
             .select()
             .single()
 
+        console.log("Insert component result:", {
+          insertedComponent,
+          insertComponentError,
+        })
+
         if (insertComponentError) {
           console.error("Error inserting component:", insertComponentError)
           throw insertComponentError
         }
         if (!insertedComponent) {
+          console.error("Insert component failed: No data returned.") // Log specific error
           throw new Error("Failed to insert component, no data returned.")
         }
         finalComponent = insertedComponent
@@ -464,6 +482,7 @@ export const useSubmitComponent = () => {
 
       if (existingDemoId) {
         // Update existing demo
+        console.log(`Attempting to update demo with ID: ${existingDemoId}`)
         const { data: updatedDemo, error: updateDemoError } = await client
           .from("demos")
           .update(demoData)
@@ -471,28 +490,35 @@ export const useSubmitComponent = () => {
           .select()
           .single()
 
+        console.log("Update demo result:", { updatedDemo, updateDemoError })
+
         if (updateDemoError) {
           console.error("Error updating demo:", updateDemoError)
           throw updateDemoError
         }
         if (!updatedDemo) {
+          console.error("Update demo failed: No data returned.") // Log specific error
           throw new Error("Failed to update demo, no data returned.")
         }
         finalDemo = updatedDemo
         console.log("Successfully updated demo:", finalDemo)
       } else {
         // Insert new demo
+        console.log("Attempting to insert new demo with data:", demoData)
         const { data: insertedDemo, error: insertDemoError } = await client
           .from("demos")
           .insert(demoData)
           .select()
           .single()
 
+        console.log("Insert demo result:", { insertedDemo, insertDemoError })
+
         if (insertDemoError) {
           console.error("Error inserting demo:", insertDemoError)
           throw insertDemoError
         }
         if (!insertedDemo) {
+          console.error("Insert demo failed: No data returned.") // Log specific error
           throw new Error("Failed to insert demo, no data returned.")
         }
         finalDemo = insertedDemo
@@ -500,6 +526,7 @@ export const useSubmitComponent = () => {
       }
 
       if (!finalDemo) {
+        console.error("Final demo object is null after create/update attempts.") // Log if somehow finalDemo is still null
         throw new Error("Demo operation failed.") // Should not happen if errors above are thrown
       }
 

From a95823b2a87d9718c7d9cf01cc865160b53cf200 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Mon, 5 May 2025 07:30:02 +0700
Subject: [PATCH 136/143] new template

---
 apps/web/lib/codesandbox-sdk.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/lib/codesandbox-sdk.ts b/apps/web/lib/codesandbox-sdk.ts
index ed7f2a78..246cf0cc 100644
--- a/apps/web/lib/codesandbox-sdk.ts
+++ b/apps/web/lib/codesandbox-sdk.ts
@@ -5,7 +5,7 @@ export const codesandboxSdk = new CodeSandbox(process.env.CSB_API_KEY!)
 export const DEFAULT_TEMPLATE = "21st-vite"
 
 export const TEMPLATES = {
-  "21st-vite": "d5t2cg",
+  "21st-vite": "yj7qjv", // "d5t2cg",
 }
 
 export const DEFAULT_HIBERNATION_TIMEOUT = 60

From 61f6b60bf689f57f591f98e97e1f2447a5178d72 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Mon, 5 May 2025 07:30:25 +0700
Subject: [PATCH 137/143] restore previous functionality

---
 .../[sandboxId]/publish/page.client.tsx       | 238 ++++++------------
 .../sandbox/[sandboxId]/publish/page.tsx      |  24 +-
 2 files changed, 85 insertions(+), 177 deletions(-)

diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.client.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.client.tsx
index a0fadd8b..e536b56d 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.client.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.client.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import React, { useState, useEffect, useRef } from "react"
+import React, { useState, useCallback, useEffect, useRef } from "react"
 import { useParams } from "next/navigation"
 import { useForm } from "react-hook-form"
 import { Trash2 } from "lucide-react"
@@ -45,14 +45,10 @@ type ParsedCodeData = {
   demoDependencies?: Record<string, string>
 }
 
-interface PageClientProps {
-  onSubmitStatusChange: (isSubmitting: boolean) => void
-  onSubmitHandlerReady: (submitHandler: () => void) => void
-}
-
-const PageClient: React.FC<PageClientProps> = ({
-  onSubmitStatusChange,
-  onSubmitHandlerReady,
+const PublishPage = ({
+  submitHandlerRef,
+}: {
+  submitHandlerRef?: React.MutableRefObject<(() => void) | null>
 }) => {
   const params = useParams()
   const sandboxId = params.sandboxId as string
@@ -79,15 +75,14 @@ const PageClient: React.FC<PageClientProps> = ({
       connectedShellId,
     })
   const { user } = useUser()
+  const { isLoaded: isClerkUserLoaded } = useUser()
 
-  // Declare all state hooks first
   const [formStep] = useState<FormStep>("detailedForm")
   const [openAccordion, setOpenAccordion] = useState([
     "component-info",
     "demo-0",
   ])
 
-  // Form setup
   const form = useForm<FormData>({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -106,7 +101,7 @@ const PageClient: React.FC<PageClientProps> = ({
       code: `// Mock component code for ${sandboxId}\nexport default function MockComponent() { return <div>Hello</div>; }`,
       demos: [
         {
-          name: "Default",
+          name: "Default Demo",
           demo_code: `// Mock demo code for ${sandboxId}\nimport MockComponent from './component';\nexport default function Demo() { return <MockComponent />; }`,
           demo_slug: "default",
           tags: [],
@@ -125,18 +120,9 @@ const PageClient: React.FC<PageClientProps> = ({
   const { user: publishAsUser, isLoading: isPublishAsLoading } = usePublishAs({
     username: publishAsUsername ?? user?.username ?? "",
   })
-  const { isLoaded: isClerkUserLoaded } = useUser() // Get Clerk's loading state
-
-  // Log user data for debugging
-  useEffect(() => {
-    console.log("Clerk user:", user)
-    console.log("Publish as username:", publishAsUsername)
-    console.log("Publish as user:", publishAsUser)
-  }, [user, publishAsUsername, publishAsUser])
 
   useEffect(() => {
     if (form.getValues("publish_as_username") === undefined && user?.username) {
-      console.log("Setting publish_as_username to", user.username)
       form.setValue("publish_as_username", user.username)
     }
   }, [user?.username, form])
@@ -151,68 +137,6 @@ const PageClient: React.FC<PageClientProps> = ({
     setIsSuccessDialogOpen,
   } = useSubmitComponent()
 
-  useEffect(() => {
-    onSubmitStatusChange(isSubmitting)
-  }, [isSubmitting, onSubmitStatusChange])
-
-  // Provide the submit handler to the parent component
-  useEffect(() => {
-    // We need to wrap handleSubmit in a function to avoid circular references
-    const submitWrapper = () => {
-      console.log("Submit handler called from parent component")
-      handleSubmit()
-    }
-
-    onSubmitHandlerReady(submitWrapper)
-  }, [onSubmitHandlerReady])
-
-  const handleGoToComponent = () => {
-    const username = publishAsUser?.username || user?.username
-    const slug = form.getValues("component_slug")
-    const demoSlug = createdDemoSlug || "default"
-    if (username && slug) {
-      console.log(`Redirecting to /${username}/${slug}/${demoSlug}`)
-    } else {
-      console.warn("Could not determine redirect path.")
-    }
-    setIsSuccessDialogOpen(false)
-  }
-
-  // Log form state changes
-  useEffect(() => {
-    const subscription = form.watch((value) => {
-      // console.log("Form state updated:", value); // Optional: keep for debugging
-    })
-    return () => subscription.unsubscribe()
-  }, [form])
-
-  // Update form name when serverSandbox name changes
-  useEffect(() => {
-    if (serverSandbox?.name && !componentFormData) {
-      form.setValue("name", serverSandbox.name)
-    }
-  }, [serverSandbox?.name, form, componentFormData])
-
-  // Update form with component data when available
-  useEffect(() => {
-    if (componentFormData && !isComponentDataLoading) {
-      form.reset({
-        ...componentFormData,
-        publish_as_username:
-          user?.username ?? componentFormData.publish_as_username,
-      })
-
-      // Open all demo accordions
-      if (componentFormData.demos.length > 0) {
-        const newOpenAccordion = ["component-info"]
-        componentFormData.demos.forEach((_, index) => {
-          newOpenAccordion.push(`demo-${index}`)
-        })
-        setOpenAccordion(newOpenAccordion)
-      }
-    }
-  }, [componentFormData, isComponentDataLoading, form, user?.username])
-
   const prevNameRef = useRef<string>("")
 
   const debouncedUpdateName = useRef(
@@ -226,8 +150,8 @@ const PageClient: React.FC<PageClientProps> = ({
           )
           prevNameRef.current = newName
 
-          const result = await editSandbox(sandboxId, { name: newName })
-          console.log("Updated sandbox name in database:", result)
+          await editSandbox(sandboxId, { name: newName })
+          console.log("Updated sandbox name in database")
         }
       } catch (error) {
         console.error("Failed to update sandbox name in database:", error)
@@ -237,12 +161,12 @@ const PageClient: React.FC<PageClientProps> = ({
 
   useEffect(() => {
     prevNameRef.current = form.getValues("name") || serverSandbox?.name || ""
-  }, [serverSandbox?.name, form])
+  }, [serverSandbox?.name, form, componentFormData])
 
   useEffect(() => {
     const subscription = form.watch((value, { name: fieldName }) => {
-      if (fieldName === "name" && value.name) {
-        const newName = value.name as string
+      if (fieldName === "name" && typeof value.name === "string") {
+        const newName = value.name
         if (newName !== prevNameRef.current) {
           console.log(`Name field changed, scheduling update to: "${newName}"`)
           debouncedUpdateName(newName)
@@ -256,28 +180,18 @@ const PageClient: React.FC<PageClientProps> = ({
     }
   }, [form, debouncedUpdateName])
 
+  const handleAccordionChange = useCallback((value: string[]) => {
+    setOpenAccordion(value)
+  }, [])
+
   const handleSubmit = (event?: React.FormEvent) => {
     event?.preventDefault()
 
-    // --- Enhanced Debugging ---
-    console.log("handleSubmit triggered")
-    console.log("Clerk user state:", JSON.stringify(user, null, 2))
-    console.log("Clerk user loaded:", isClerkUserLoaded)
-    console.log("Publish as username:", publishAsUsername)
-    console.log(
-      "Publish as user state:",
-      JSON.stringify(publishAsUser, null, 2),
-    )
-    console.log("Publish as user loading:", isPublishAsLoading)
-    // --- End Enhanced Debugging ---
-
-    // --- Check Loading States ---
     if (!isClerkUserLoaded || isPublishAsLoading) {
       console.warn("User data is still loading. Aborting submission.")
       toast.info("User data is loading, please wait...")
-      return // Prevent submission if data isn't ready
+      return
     }
-    // --- End Check Loading States ---
 
     let finalPublishUser: { id: string; username?: string } | null = null
 
@@ -286,40 +200,29 @@ const PageClient: React.FC<PageClientProps> = ({
         id: publishAsUser.id,
         username: publishAsUser.username || undefined,
       }
-      console.log("Using publishAsUser:", finalPublishUser)
     } else if (user?.id) {
-      finalPublishUser = {
-        id: user.id,
-        username: user.username || undefined,
-      }
-      console.log("Using fallback Clerk user:", finalPublishUser)
-    } else {
-      console.error(
-        "Cannot determine user to publish as. Clerk user and publishAsUser are both missing.",
-      )
+      finalPublishUser = { id: user.id, username: user.username || undefined }
+    }
+
+    if (!finalPublishUser) {
+      console.error("Cannot determine user to publish as.")
       toast.error(
-        "Cannot determine user to publish as. Please ensure you are logged in and try again.",
+        "Cannot determine user to publish as. Please ensure you are logged in.",
       )
-      return // Stop submission if no valid user found
+      return
     }
 
     const currentSandbox = serverSandbox
 
-    // Now we know finalPublishUser is not null and has an id
     form.handleSubmit(
       (formData) => {
         console.log("Form data is valid:", formData)
 
-        // --- Add check for serverSandbox ---
         if (!currentSandbox?.id) {
-          console.error(
-            "Captured currentSandbox or currentSandbox.id is null/undefined.",
-            currentSandbox,
-          )
+          console.error("Sandbox data is missing.", currentSandbox)
           toast.error("Sandbox data is missing. Cannot submit.")
-          return // Abort if sandbox data is missing
+          return
         }
-        // --- End check for serverSandbox ---
 
         const data = {
           ...formData,
@@ -328,11 +231,11 @@ const PageClient: React.FC<PageClientProps> = ({
 
         submitComponent({
           data,
-          publishAsUser: finalPublishUser!, // Non-null assertion is safe here
+          publishAsUser: finalPublishUser,
           generateRegistry,
           bundleDemo,
           updateComponentNameAndImport,
-          sandboxId: currentSandbox.id, // Use the captured value's id
+          sandboxId: currentSandbox.id,
           onSuccess: () => {
             reconnectSandbox()
           },
@@ -350,10 +253,33 @@ const PageClient: React.FC<PageClientProps> = ({
     "name",
     "component_slug",
   ])
-  const isComponentInfoComplete = () => {
+  const isComponentInfoComplete = useCallback(() => {
     const [description, name, component_slug] = watchedComponentFields
     return !!description && !!name && !!component_slug
-  }
+  }, [watchedComponentFields])
+
+  const handleGoToComponent = useCallback(() => {
+    let finalPublishUser: { id: string; username?: string } | null = null
+    if (publishAsUser?.id) {
+      finalPublishUser = {
+        id: publishAsUser.id,
+        username: publishAsUser.username || undefined,
+      }
+    } else if (user?.id) {
+      finalPublishUser = { id: user.id, username: user.username || undefined }
+    }
+
+    const username = finalPublishUser?.username
+    const slug = form.getValues("component_slug")
+    const demoSlug = createdDemoSlug || "default"
+    if (username && slug) {
+      window.location.href = `/${username}/${slug}/${demoSlug}`
+      console.log(`Redirecting to /${username}/${slug}/${demoSlug}`)
+    } else {
+      console.warn("Could not determine redirect path.")
+    }
+    setIsSuccessDialogOpen(false)
+  }, [form, createdDemoSlug, setIsSuccessDialogOpen, publishAsUser, user])
 
   const handleAddAnother = () => {
     form.reset()
@@ -364,70 +290,58 @@ const PageClient: React.FC<PageClientProps> = ({
   const isDemoComplete = (demo: any) =>
     demo.name && demo.tags?.length > 0 && demo.preview_image_data_url
 
-  if (isComponentDataLoading || !serverSandbox?.id) {
+  submitHandlerRef!.current = handleSubmit
+
+  if (isComponentDataLoading || (!serverSandbox?.id && !componentFormData)) {
     return (
       <div className="flex flex-col h-[calc(100vh-56px)] w-full">
         <div className="flex h-full">
-          {/* Left Panel Skeleton */}
           <div className="border-r pointer-events-none transition-[width] duration-300 max-h-screen overflow-y-auto w-1/3 p-4">
             <div className="space-y-6">
-              {/* Component Info Skeleton */}
               <div className="space-y-4">
-                {/* Accordion Trigger - Wider */}
                 <Skeleton className="h-10 w-full rounded-md" />
-                {/* Removed indent div, adjusted label/input widths */}
                 <div className="space-y-4 pt-4">
-                  {" "}
-                  {/* Added pt-4 to mimic AccordionContent padding */}
                   <div className="grid grid-cols-2 gap-4">
                     <div className="space-y-2">
-                      <Skeleton className="h-4 w-1/3 mb-1" /> {/* Label */}
-                      <Skeleton className="h-10 w-full" /> {/* Input */}
+                      <Skeleton className="h-4 w-1/3 mb-1" />
+                      <Skeleton className="h-10 w-full" />
                     </div>
                     <div className="space-y-2">
-                      <Skeleton className="h-4 w-1/3 mb-1" /> {/* Label */}
-                      <Skeleton className="h-10 w-full" /> {/* Input */}
+                      <Skeleton className="h-4 w-1/3 mb-1" />
+                      <Skeleton className="h-10 w-full" />
                     </div>
                   </div>
                   <div className="space-y-2">
-                    <Skeleton className="h-4 w-1/3 mb-1" /> {/* Label */}
-                    <Skeleton className="h-20 w-full" /> {/* Textarea */}
+                    <Skeleton className="h-4 w-1/3 mb-1" />
+                    <Skeleton className="h-20 w-full" />
                   </div>
                   <div className="space-y-2">
-                    <Skeleton className="h-4 w-1/3 mb-1" /> {/* Label */}
-                    <Skeleton className="h-10 w-full" /> {/* Select */}
+                    <Skeleton className="h-4 w-1/3 mb-1" />
+                    <Skeleton className="h-10 w-full" />
                   </div>
                 </div>
               </div>
 
-              {/* Demo Details Skeleton */}
               <div className="space-y-4">
-                {/* Accordion Trigger - Wider */}
                 <Skeleton className="h-10 w-full rounded-md" />
-                {/* Removed indent div, adjusted label/input widths */}
                 <div className="space-y-4 pt-4">
-                  {" "}
-                  {/* Added pt-4 */}
                   <div className="space-y-2">
-                    <Skeleton className="h-4 w-1/3 mb-1" />{" "}
-                    {/* Label - Demo Name */}
-                    <Skeleton className="h-10 w-full" /> {/* Input */}
+                    <Skeleton className="h-4 w-1/3 mb-1" />
+                    <Skeleton className="h-10 w-full" />
                   </div>
                   <div className="space-y-2">
-                    <Skeleton className="h-4 w-1/3 mb-1" /> {/* Label - Tags */}
-                    <Skeleton className="h-10 w-full" /> {/* Tags Input */}
+                    <Skeleton className="h-4 w-1/3 mb-1" />
+                    <Skeleton className="h-10 w-full" />
                   </div>
                   <div className="space-y-2">
-                    <Skeleton className="h-4 w-1/3 mb-1" />{" "}
-                    {/* Label - Cover Image */}
-                    <Skeleton className="h-32 w-full" /> {/* File Upload */}
+                    <Skeleton className="h-4 w-1/3 mb-1" />
+                    <Skeleton className="h-32 w-full" />
                   </div>
                 </div>
               </div>
             </div>
           </div>
 
-          {/* Right Panel Skeleton (Iframe) */}
           <div className="w-2/3 h-full bg-muted flex items-center justify-center">
             <Skeleton className="w-full h-full" />
           </div>
@@ -447,7 +361,7 @@ const PageClient: React.FC<PageClientProps> = ({
                   <Accordion
                     type="multiple"
                     value={openAccordion}
-                    onValueChange={setOpenAccordion}
+                    onValueChange={handleAccordionChange}
                     className="w-full"
                   >
                     <AccordionItem value="component-info">
@@ -500,9 +414,9 @@ const PageClient: React.FC<PageClientProps> = ({
                           <div className="flex items-center gap-2 w-full">
                             <div className="flex items-center gap-2 flex-1 min-w-0 overflow-hidden">
                               <div className="truncate flex-shrink min-w-0">
-                                {form.getValues().demos.length > 1
-                                  ? `${demo.name || `Demo ${index + 1}`} Details`
-                                  : "Demo Details"}
+                                {index === 0 && !demo.name
+                                  ? "Default Demo"
+                                  : demo.name || `Demo ${index + 1}`}
                               </div>
                               <Badge
                                 variant="outline"
@@ -534,7 +448,7 @@ const PageClient: React.FC<PageClientProps> = ({
                                   e.stopPropagation()
                                   console.log("Delete demo:", index)
                                   toast.info(
-                                    `Demo ${index + 1} deletion not implemented yet.`,
+                                    `Demo deletion for index ${index} not implemented yet.`,
                                   )
                                 }}
                               >
@@ -575,4 +489,4 @@ const PageClient: React.FC<PageClientProps> = ({
   )
 }
 
-export default PageClient
+export default PublishPage
diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
index 92766c53..df157db7 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useParams } from "next/navigation"
-import { useState, useCallback } from "react"
+import { useState, useRef } from "react"
 import { SandboxHeader } from "@/components/features/studio/sandbox/components/sandbox-header"
 import { useSandbox } from "@/components/features/studio/sandbox/hooks/use-sandbox"
 import PageClient from "./page.client"
@@ -12,22 +12,19 @@ export default function Page() {
     sandboxId: string
   }
   const [isNextLoading, setIsNextLoading] = useState(false)
-  const [submitHandler, setSubmitHandler] = useState<(() => void) | null>(null)
+
+  const submitHandlerRef = useRef<(() => void) | null>(null)
 
   // Fetch sandbox metadata for header
   const { serverSandbox } = useSandbox({ sandboxId })
 
-  const handleSubmitStatusChange = useCallback((isSubmitting: boolean) => {
-    setIsNextLoading(isSubmitting)
-  }, [])
-
-  const handleSubmitHandlerReady = useCallback((handler: () => void) => {
-    setSubmitHandler(() => handler)
-  }, [])
+  // const handleSubmitStatusChange = useCallback((isSubmitting: boolean) => {
+  //   setIsNextLoading(isSubmitting)
+  // }, [])
 
   const handleSubmit = () => {
-    if (submitHandler) {
-      submitHandler()
+    if (submitHandlerRef.current) {
+      submitHandlerRef.current()
     }
   }
 
@@ -46,10 +43,7 @@ export default function Page() {
         hideNext={false}
         isNextLoading={isNextLoading}
       />
-      <PageClient
-        onSubmitStatusChange={handleSubmitStatusChange}
-        onSubmitHandlerReady={handleSubmitHandlerReady}
-      />
+      <PageClient submitHandlerRef={submitHandlerRef} />
     </>
   )
 }

From 7537a0445abba4b2ce4154ce8ab462587319cfe2 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Mon, 5 May 2025 07:30:48 +0700
Subject: [PATCH 138/143] refactor: remove default demo name handling from
 DemoDetailsForm

---
 .../publish/components/forms/demo-form.tsx    | 48 -------------------
 1 file changed, 48 deletions(-)

diff --git a/apps/web/components/features/studio/publish/components/forms/demo-form.tsx b/apps/web/components/features/studio/publish/components/forms/demo-form.tsx
index bc516d9f..1af8b6f9 100644
--- a/apps/web/components/features/studio/publish/components/forms/demo-form.tsx
+++ b/apps/web/components/features/studio/publish/components/forms/demo-form.tsx
@@ -11,8 +11,6 @@ import { cn } from "@/lib/utils"
 import { useTheme } from "next-themes"
 import { useAvailableTags } from "@/lib/queries"
 import MultipleSelector, { Option } from "@/components/ui/multiselect"
-import { Input } from "@/components/ui/input"
-import { FormField } from "@/components/ui/form"
 import { makeSlugFromName } from "../../hooks/use-is-check-slug-available"
 
 export const DemoDetailsForm = ({
@@ -52,16 +50,6 @@ export const DemoDetailsForm = ({
     }
   }, [demoIndex, form, mode])
 
-  // Добавим эффект, чтобы убедиться, что первая демо всегда называется "Default"
-  React.useEffect(() => {
-    if (demoIndex === 0) {
-      if (form.getValues(`demos.${demoIndex}.name`) !== "Default") {
-        form.setValue(`demos.${demoIndex}.name`, "Default")
-        form.setValue(`demos.${demoIndex}.demo_slug`, "default")
-      }
-    }
-  }, [demoIndex, form])
-
   // Convert tags to MultipleSelector options format
   const tagOptions: Option[] = availableTags.map((tag) => ({
     value: tag.slug,
@@ -130,42 +118,6 @@ export const DemoDetailsForm = ({
   return (
     <div className="flex flex-col gap-4 w-full">
       <div className="space-y-6">
-        <div className="space-y-2">
-          <Label htmlFor={demoNameId}>
-            Demo Name <span className="text-destructive">*</span>
-          </Label>
-          <FormField
-            control={form.control}
-            name={`demos.${demoIndex}.name`}
-            render={({ field }) => (
-              <Input
-                id={demoNameId}
-                placeholder="Name your demo"
-                {...field}
-                value={demoIndex === 0 ? "Default" : field.value || ""}
-                disabled={demoIndex === 0} // Отключаем редактирование для первой демо
-                className={demoIndex === 0 ? "bg-muted cursor-not-allowed" : ""}
-                onChange={(e) => {
-                  if (demoIndex === 0) return
-                  const newValue = e.target.value
-                  field.onChange(newValue)
-                  handleDemoNameChange(newValue)
-                }}
-              />
-            )}
-          />
-          {demoIndex === 0 && (
-            <p className="text-xs text-muted-foreground">
-              The default demo name cannot be changed
-            </p>
-          )}
-          {demoIndex > 0 && (
-            <p className="text-xs text-muted-foreground">
-              A name for this demo variation
-            </p>
-          )}
-        </div>
-
         <div className="space-y-2">
           <Label htmlFor={tagsId}>
             Tags <span className="text-destructive">*</span>

From 85330b5a55b4009cfae5198f33e9563632d35bd9 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Mon, 5 May 2025 07:42:23 +0700
Subject: [PATCH 139/143] single table

---
 .../web/app/studio/[username]/page.client.tsx |  39 ++--
 apps/web/app/studio/[username]/page.tsx       |  69 +++++--
 .../features/studio/ui/components-table.tsx   | 112 +++++++----
 .../features/studio/ui/sandboxes-table.tsx    | 182 ------------------
 apps/web/lib/utils/transformData.ts           |   9 +-
 5 files changed, 153 insertions(+), 258 deletions(-)
 delete mode 100644 apps/web/components/features/studio/ui/sandboxes-table.tsx

diff --git a/apps/web/app/studio/[username]/page.client.tsx b/apps/web/app/studio/[username]/page.client.tsx
index 58b11de2..e7e7df12 100644
--- a/apps/web/app/studio/[username]/page.client.tsx
+++ b/apps/web/app/studio/[username]/page.client.tsx
@@ -1,21 +1,19 @@
 "use client"
 
-import { User, DemoWithComponent } from "@/types/global"
+import { User } from "@/types/global"
 import { StudioLayout } from "@/components/features/studio/studio-layout"
 import { DemosTable } from "@/components/features/studio/ui/components-table"
-import { SandboxesTable } from "@/components/features/studio/ui/sandboxes-table"
 import { Button } from "@/components/ui/button"
 import { useRouter, usePathname } from "next/navigation"
 import { createNewSandbox } from "@/components/features/studio/sandbox/api"
 import { useState } from "react"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Spinner } from "@/components/icons/spinner"
 import { cn } from "@/lib/utils"
+import { ExtendedDemoWithComponent } from "@/lib/utils/transformData"
 
 interface StudioUsernameClientProps {
   user: User
-  demos: DemoWithComponent[]
-  sandboxes: any[]
+  demos: ExtendedDemoWithComponent[]
   isAdmin: boolean
   isOwnProfile: boolean
 }
@@ -23,7 +21,6 @@ interface StudioUsernameClientProps {
 export function StudioUsernameClient({
   user,
   demos,
-  sandboxes,
   isAdmin,
   isOwnProfile,
 }: StudioUsernameClientProps) {
@@ -43,8 +40,8 @@ export function StudioUsernameClient({
     }
   }
 
-  const handleOpenSandbox = (sandbox: any) => {
-    router.push(`${pathname}/sandbox/${sandbox.id}`)
+  const handleOpenSandbox = (item: ExtendedDemoWithComponent) => {
+    router.push(`${pathname}/sandbox/${item.id}`)
   }
 
   return (
@@ -56,19 +53,8 @@ export function StudioUsernameClient({
           </div>
         </div>
 
-        <Tabs defaultValue="components" className="w-full">
-          <div className="flex flex-row items-end justify-between">
-            <div className="flex items-center justify-between">
-              <TabsList className="grid grid-cols-2 mb-4 rounded-md h-7 p-0.5 w-[200px]">
-                <TabsTrigger className="text-xs h-6" value="components">
-                  Components
-                </TabsTrigger>
-                <TabsTrigger className="text-xs h-6" value="sandboxes">
-                  Sandboxes
-                </TabsTrigger>
-              </TabsList>
-            </div>
-
+        <div className="flex flex-row items-end justify-between">
+          <div className="flex items-center justify-between">
             {(isOwnProfile || isAdmin) && (
               <Button
                 onClick={handleCreateNewSandbox}
@@ -91,14 +77,11 @@ export function StudioUsernameClient({
               </Button>
             )}
           </div>
+        </div>
 
-          <TabsContent value="components" className="mt-4">
-            <DemosTable demos={demos} />
-          </TabsContent>
-          <TabsContent value="sandboxes" className="mt-4">
-            <SandboxesTable sandboxes={sandboxes} onOpen={handleOpenSandbox} />
-          </TabsContent>
-        </Tabs>
+        <div className="mt-4">
+          <DemosTable demos={demos} onOpenSandbox={handleOpenSandbox} />
+        </div>
       </div>
     </StudioLayout>
   )
diff --git a/apps/web/app/studio/[username]/page.tsx b/apps/web/app/studio/[username]/page.tsx
index 0c97856e..4b8f6e56 100644
--- a/apps/web/app/studio/[username]/page.tsx
+++ b/apps/web/app/studio/[username]/page.tsx
@@ -4,7 +4,10 @@ import { auth } from "@clerk/nextjs/server"
 import { unstable_cache } from "next/cache"
 import { getUserData } from "@/lib/queries"
 import { StudioUsernameClient } from "./page.client"
-import { transformDemoResult } from "@/lib/utils/transformData"
+import {
+  transformDemoResult,
+  ExtendedDemoWithComponent,
+} from "@/lib/utils/transformData"
 import ShortUUID from "short-uuid"
 
 // Get user data by username
@@ -44,6 +47,51 @@ const getCachedUserDemos = unstable_cache(
   },
 )
 
+// Get sandboxes by user ID
+const getCachedUserSandboxes = unstable_cache(
+  async (userId: string) => {
+    const { data: sandboxesData, error } = await supabaseWithAdminAccess
+      .from("sandboxes")
+      .select("*")
+      .eq("user_id", userId)
+
+    if (error) {
+      console.error("Error fetching user sandboxes:", error)
+      return []
+    }
+
+    // Transform sandboxes to ExtendedDemoWithComponent format
+    const shortUUID = ShortUUID()
+    return (sandboxesData || []).map(
+      (sandbox): ExtendedDemoWithComponent => ({
+        id: shortUUID.fromUUID(sandbox.id), // Use short UUID if needed, or original ID if consistent
+        name: sandbox.name || "Untitled Sandbox",
+        created_at: sandbox.created_at,
+        updated_at: sandbox.updated_at,
+        submission_status: "draft", // Mark as draft
+        is_private: true, // Sandboxes are typically private initially
+        // Add default/null values for other required fields
+        demo_slug: sandbox.id, // Use sandbox id as a placeholder slug
+        preview_url: null,
+        video_url: null,
+        component: null, // No linked component initially
+        user: null, // User data can be added if needed, but might not be necessary for table display
+        component_user: null,
+        total_count: 0,
+        view_count: 0,
+        bookmarks_count: 0,
+        bundle_url: null,
+        moderators_feedback: null,
+      }),
+    )
+  },
+  ["user-sandboxes"],
+  {
+    revalidate: 30,
+    tags: ["user-sandboxes"],
+  },
+)
+
 export async function generateMetadata({
   params,
 }: {
@@ -84,15 +132,12 @@ export default async function StudioUsernamePage({
     redirect("/studio")
   }
 
-  const sandboxesPre = await supabaseWithAdminAccess
-    .from("sandboxes")
-    .select("*")
-    .eq("user_id", user.id)
+  // Fetch demos and sandboxes
+  const demos = await getCachedUserDemos(user.id)
+  const sandboxes = await getCachedUserSandboxes(user.id)
 
-  const sandboxes = sandboxesPre.data?.map((sandbox) => ({
-    ...sandbox,
-    id: ShortUUID().fromUUID(sandbox.id),
-  }))
+  // Combine demos and sandboxes into a single list
+  const combinedItems = [...demos, ...sandboxes]
 
   // Verify logged in user has access to this user's components
   // Admin can access any user's components, users can only access their own
@@ -109,15 +154,11 @@ export default async function StudioUsernamePage({
     redirect("/studio")
   }
 
-  // Get demos for the specified user
-  const demos = await getCachedUserDemos(user.id)
-
   // Pass everything to the client component
   return (
     <StudioUsernameClient
       user={user}
-      demos={demos}
-      sandboxes={sandboxes}
+      demos={combinedItems}
       isAdmin={isAdmin}
       isOwnProfile={isOwnProfile}
     />
diff --git a/apps/web/components/features/studio/ui/components-table.tsx b/apps/web/components/features/studio/ui/components-table.tsx
index 01ef3451..2763b8b4 100644
--- a/apps/web/components/features/studio/ui/components-table.tsx
+++ b/apps/web/components/features/studio/ui/components-table.tsx
@@ -39,20 +39,21 @@ import {
 } from "@tanstack/react-table"
 import { ChevronDown, ChevronUp } from "lucide-react"
 import { useId } from "react"
-import { DemoWithComponent } from "@/types/global"
-
-interface ExtendedDemoWithComponent extends DemoWithComponent {
-  is_private?: boolean
-  submission_status?: string
-  moderators_feedback?: string
-}
+import { Button } from "@/components/ui/button"
+import { ExternalLink } from "lucide-react"
+import { ExtendedDemoWithComponent } from "@/lib/utils/transformData"
 
 interface DemosTableProps {
   demos: ExtendedDemoWithComponent[]
   onEdit?: (demo: ExtendedDemoWithComponent) => void
+  onOpenSandbox?: (demo: ExtendedDemoWithComponent) => void
 }
 
-export function DemosTable({ demos = [], onEdit }: DemosTableProps) {
+export function DemosTable({
+  demos = [],
+  onEdit,
+  onOpenSandbox,
+}: DemosTableProps) {
   const id = useId()
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
@@ -122,30 +123,35 @@ export function DemosTable({ demos = [], onEdit }: DemosTableProps) {
     {
       header: "Component",
       accessorKey: "name",
-      cell: ({ row }) => (
-        <div className="flex items-center gap-3">
-          <div className="h-12 w-20 overflow-hidden rounded-md border bg-muted shrink-0">
-            {row.original.preview_url ? (
-              <div
-                className="h-12 w-20 bg-cover bg-center"
-                style={{
-                  backgroundImage: `url(${row.original.preview_url})`,
-                }}
-              />
-            ) : (
-              <div className="flex h-full w-full items-center justify-center text-xs text-muted-foreground">
-                No preview
+      cell: ({ row }) => {
+        const isDraft = row.original.submission_status === "draft"
+        return (
+          <div className="flex items-center gap-3">
+            <div className="h-12 w-20 overflow-hidden rounded-md border bg-muted shrink-0">
+              {row.original.preview_url ? (
+                <div
+                  className="h-12 w-20 bg-cover bg-center"
+                  style={{
+                    backgroundImage: `url(${row.original.preview_url})`,
+                  }}
+                />
+              ) : (
+                <div className="flex h-full w-full items-center justify-center text-xs text-muted-foreground">
+                  {isDraft ? "Draft" : "No preview"}
+                </div>
+              )}
+            </div>
+            <div className="flex flex-col min-w-0">
+              <div className="font-medium truncate">{row.getValue("name")}</div>
+              <div className="text-sm text-muted-foreground truncate">
+                {isDraft
+                  ? "Sandbox"
+                  : row.original.component?.name || "Unknown component"}
               </div>
-            )}
-          </div>
-          <div className="flex flex-col min-w-0">
-            <div className="font-medium truncate">{row.getValue("name")}</div>
-            <div className="text-sm text-muted-foreground truncate">
-              {row.original.component?.name || "Unknown component"}
             </div>
           </div>
-        </div>
-      ),
+        )
+      },
       size: 300,
     },
     {
@@ -162,6 +168,7 @@ export function DemosTable({ demos = [], onEdit }: DemosTableProps) {
                 status === "on_review" && "bg-yellow-100 text-yellow-700",
                 status === "featured" && "bg-green-100 text-green-700",
                 status === "posted" && "bg-blue-100 text-blue-700",
+                status === "draft" && "bg-gray-100 text-gray-700",
                 !status && "bg-gray-100 text-gray-700",
               )}
               title={
@@ -176,7 +183,9 @@ export function DemosTable({ demos = [], onEdit }: DemosTableProps) {
                   ? "Featured"
                   : status === "posted"
                     ? "Posted"
-                    : "None"}
+                    : status === "draft"
+                      ? "Draft"
+                      : "None"}
             </span>
           </div>
         )
@@ -267,6 +276,39 @@ export function DemosTable({ demos = [], onEdit }: DemosTableProps) {
       size: 80,
       sortingFn: "alphanumeric",
     },
+    {
+      id: "actions",
+      header: () => <div className="text-right">Actions</div>,
+      cell: ({ row }) => {
+        const isDraft = row.original.submission_status === "draft"
+        return (
+          <div className="text-right">
+            {isDraft && onOpenSandbox && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onOpenSandbox(row.original)}
+                className="flex items-center gap-1 ml-auto"
+              >
+                <ExternalLink className="h-4 w-4" />
+                Open
+              </Button>
+            )}
+            {!isDraft && onEdit && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onEdit(row.original)}
+                className="flex items-center gap-1 ml-auto"
+              >
+                Edit
+              </Button>
+            )}
+          </div>
+        )
+      },
+      size: 100,
+    },
   ]
 
   // Ensure demos is always an array
@@ -312,11 +354,12 @@ export function DemosTable({ demos = [], onEdit }: DemosTableProps) {
           featured: 4,
           posted: 3,
           on_review: 2,
+          draft: 1,
           null: 1,
         }
 
-        const statusA = rowA.original.submission_status || "featured"
-        const statusB = rowB.original.submission_status || "featured"
+        const statusA = rowA.original.submission_status || "draft"
+        const statusB = rowB.original.submission_status || "draft"
 
         const priorityA =
           statusPriority[statusA as keyof typeof statusPriority] || 0
@@ -445,7 +488,10 @@ export function DemosTable({ demos = [], onEdit }: DemosTableProps) {
               table.getRowModel().rows.map((row) => (
                 <TableRow key={row.id}>
                   {row.getVisibleCells().map((cell) => (
-                    <TableCell key={cell.id}>
+                    <TableCell
+                      key={cell.id}
+                      className={cn(cell.column.id === "actions" && "pr-4")}
+                    >
                       {flexRender(
                         cell.column.columnDef.cell,
                         cell.getContext(),
diff --git a/apps/web/components/features/studio/ui/sandboxes-table.tsx b/apps/web/components/features/studio/ui/sandboxes-table.tsx
deleted file mode 100644
index e275d2e0..00000000
--- a/apps/web/components/features/studio/ui/sandboxes-table.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table"
-import { Button } from "@/components/ui/button"
-import { ExternalLink } from "lucide-react"
-import { cn } from "@/lib/utils"
-import {
-  ColumnDef,
-  SortingState,
-  flexRender,
-  getCoreRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table"
-
-interface Sandbox {
-  id: string
-  name: string
-  status: string
-  updated_at?: string
-  created_at?: string
-}
-
-interface SandboxesTableProps {
-  sandboxes: Sandbox[]
-  onOpen?: (sandbox: Sandbox) => void
-}
-
-export function SandboxesTable({
-  sandboxes = [],
-  onOpen,
-}: SandboxesTableProps) {
-  const [sorting, setSorting] = useState<SortingState>([
-    {
-      id: "created_at",
-      desc: true,
-    },
-  ])
-
-  const columns: ColumnDef<Sandbox>[] = [
-    {
-      header: "Name",
-      accessorKey: "name",
-      cell: ({ row }) => (
-        <div className="font-medium truncate">
-          {row.getValue("name") || "Untitled"}
-        </div>
-      ),
-    },
-    {
-      header: "Status",
-      accessorKey: "status",
-      cell: ({ row }) => {
-        const status = row.getValue("status") as string
-        return (
-          <div>
-            <span
-              className={cn(
-                "px-2 py-1 text-xs rounded",
-                status === "on_review" && "bg-yellow-100 text-yellow-700",
-                status === "draft" && "bg-gray-100 text-gray-700",
-              )}
-            >
-              {status === "on_review"
-                ? "On Review"
-                : status === "draft"
-                  ? "Draft"
-                  : status}
-            </span>
-          </div>
-        )
-      },
-    },
-    {
-      header: "Created",
-      id: "created_at",
-      accessorFn: (row) => row.updated_at || row.created_at || "",
-      cell: ({ row }) => {
-        const dateValue = row.original.created_at || row.original.updated_at
-
-        try {
-          const date = new Date(dateValue || "")
-          return (
-            <div>
-              {date.toLocaleDateString("en-US", {
-                year: "numeric",
-                month: "short",
-                day: "numeric",
-              })}
-            </div>
-          )
-        } catch (e) {
-          return <div>Unknown</div>
-        }
-      },
-    },
-    {
-      id: "actions",
-      cell: ({ row }) => {
-        return (
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => onOpen?.(row.original)}
-            className="flex items-center gap-1"
-          >
-            <ExternalLink className="h-4 w-4" />
-            Open
-          </Button>
-        )
-      },
-    },
-  ]
-
-  const safeData = Array.isArray(sandboxes) ? sandboxes : []
-
-  const table = useReactTable({
-    data: safeData,
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onSortingChange: setSorting,
-    enableSortingRemoval: false,
-    state: {
-      sorting,
-    },
-  })
-
-  return (
-    <div className="overflow-hidden rounded-lg border border-border bg-background">
-      <Table className="table-fixed">
-        <TableHeader>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id} className="hover:bg-transparent">
-              {headerGroup.headers.map((header) => (
-                <TableHead key={header.id}>
-                  {flexRender(
-                    header.column.columnDef.header,
-                    header.getContext(),
-                  )}
-                </TableHead>
-              ))}
-            </TableRow>
-          ))}
-        </TableHeader>
-        <TableBody>
-          {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => (
-              <TableRow
-                key={row.id}
-                data-state={row.getIsSelected() && "selected"}
-              >
-                {row.getVisibleCells().map((cell) => (
-                  <TableCell key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </TableCell>
-                ))}
-              </TableRow>
-            ))
-          ) : (
-            <TableRow>
-              <TableCell
-                colSpan={columns.length}
-                className="h-24 text-center text-muted-foreground"
-              >
-                No sandboxes found
-              </TableCell>
-            </TableRow>
-          )}
-        </TableBody>
-      </Table>
-    </div>
-  )
-}
diff --git a/apps/web/lib/utils/transformData.ts b/apps/web/lib/utils/transformData.ts
index 9f5dbe3d..7dd66013 100644
--- a/apps/web/lib/utils/transformData.ts
+++ b/apps/web/lib/utils/transformData.ts
@@ -1,6 +1,13 @@
 import { Component, DemoWithComponent, User, Tag } from "@/types/global"
 
-export const transformDemoResult = (result: any): DemoWithComponent => {
+// Define the extended type here
+export interface ExtendedDemoWithComponent extends DemoWithComponent {
+  is_private?: boolean
+  submission_status?: string
+  moderators_feedback?: string
+}
+
+export const transformDemoResult = (result: any): ExtendedDemoWithComponent => {
   const componentUser =
     result.component_user_data ||
     (result.component_data && result.component_data.user) ||

From 6cefef53b31eb4afdb5efa072c8366b6e84c892c Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Mon, 5 May 2025 13:30:56 +0700
Subject: [PATCH 140/143] feat: enhance DemosTable interactivity and dynamic
 column handling

---
 .../web/app/studio/[username]/page.client.tsx | 49 ++++++--------
 .../features/studio/ui/components-table.tsx   | 67 +++++++++----------
 2 files changed, 53 insertions(+), 63 deletions(-)

diff --git a/apps/web/app/studio/[username]/page.client.tsx b/apps/web/app/studio/[username]/page.client.tsx
index e7e7df12..69838a32 100644
--- a/apps/web/app/studio/[username]/page.client.tsx
+++ b/apps/web/app/studio/[username]/page.client.tsx
@@ -48,35 +48,28 @@ export function StudioUsernameClient({
     <StudioLayout user={user}>
       <div className="space-y-6">
         <div className="flex flex-row items-center justify-between">
-          <div className="flex items-center">
-            <h1 className="text-xl font-bold">Components</h1>
-          </div>
-        </div>
-
-        <div className="flex flex-row items-end justify-between">
-          <div className="flex items-center justify-between">
-            {(isOwnProfile || isAdmin) && (
-              <Button
-                onClick={handleCreateNewSandbox}
-                disabled={isCreating}
-                className={cn(
-                  "transition-[width] duration-200",
-                  isCreating ? "w-[120px]" : "w-[80px]",
+          <h1 className="text-xl font-bold">Components</h1>
+          {(isOwnProfile || isAdmin) && (
+            <Button
+              onClick={handleCreateNewSandbox}
+              disabled={isCreating}
+              className={cn(
+                "transition-[width] duration-200",
+                isCreating ? "w-[120px]" : "w-[80px]",
+              )}
+            >
+              <div className="flex items-center gap-2 justify-center w-full">
+                {isCreating ? (
+                  <>
+                    <Spinner size={16} color="white" />
+                    <span>Creating...</span>
+                  </>
+                ) : (
+                  <span>Create</span>
                 )}
-              >
-                <div className="flex items-center gap-2 justify-center w-full">
-                  {isCreating ? (
-                    <>
-                      <Spinner size={16} color="white" />
-                      <span>Creating...</span>
-                    </>
-                  ) : (
-                    <span>Create</span>
-                  )}
-                </div>
-              </Button>
-            )}
-          </div>
+              </div>
+            </Button>
+          )}
         </div>
 
         <div className="mt-4">
diff --git a/apps/web/components/features/studio/ui/components-table.tsx b/apps/web/components/features/studio/ui/components-table.tsx
index 2763b8b4..28c1be0f 100644
--- a/apps/web/components/features/studio/ui/components-table.tsx
+++ b/apps/web/components/features/studio/ui/components-table.tsx
@@ -125,8 +125,34 @@ export function DemosTable({
       accessorKey: "name",
       cell: ({ row }) => {
         const isDraft = row.original.submission_status === "draft"
+        const handleRowClick = () => {
+          if (isDraft && onOpenSandbox) {
+            onOpenSandbox(row.original)
+          }
+          // Optionally, add navigation for non-draft items here if needed
+          // else { router.push(`/component/${row.original.demo_slug}`) }
+        }
+
         return (
-          <div className="flex items-center gap-3">
+          <div
+            className={cn(
+              "flex items-center gap-3",
+              isDraft && onOpenSandbox && "cursor-pointer", // Add cursor pointer for drafts
+            )}
+            onClick={handleRowClick}
+            onKeyDown={(e) => {
+              if (
+                isDraft &&
+                onOpenSandbox &&
+                (e.key === "Enter" || e.key === " ")
+              ) {
+                e.preventDefault()
+                handleRowClick()
+              }
+            }}
+            role={isDraft && onOpenSandbox ? "button" : undefined}
+            tabIndex={isDraft && onOpenSandbox ? 0 : undefined}
+          >
             <div className="h-12 w-20 overflow-hidden rounded-md border bg-muted shrink-0">
               {row.original.preview_url ? (
                 <div
@@ -153,6 +179,7 @@ export function DemosTable({
         )
       },
       size: 300,
+      sortingFn: "alphanumeric",
     },
     {
       header: "Status",
@@ -276,41 +303,11 @@ export function DemosTable({
       size: 80,
       sortingFn: "alphanumeric",
     },
-    {
-      id: "actions",
-      header: () => <div className="text-right">Actions</div>,
-      cell: ({ row }) => {
-        const isDraft = row.original.submission_status === "draft"
-        return (
-          <div className="text-right">
-            {isDraft && onOpenSandbox && (
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => onOpenSandbox(row.original)}
-                className="flex items-center gap-1 ml-auto"
-              >
-                <ExternalLink className="h-4 w-4" />
-                Open
-              </Button>
-            )}
-            {!isDraft && onEdit && (
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => onEdit(row.original)}
-                className="flex items-center gap-1 ml-auto"
-              >
-                Edit
-              </Button>
-            )}
-          </div>
-        )
-      },
-      size: 100,
-    },
   ]
 
+  // Adjust colSpan for the empty state
+  const columnCount = columns.length
+
   // Ensure demos is always an array
   const safeData = Array.isArray(demos) ? demos : []
 
@@ -503,7 +500,7 @@ export function DemosTable({
             ) : (
               <TableRow>
                 <TableCell
-                  colSpan={columns.length}
+                  colSpan={columnCount} // Use dynamic column count
                   className="h-24 text-center text-muted-foreground"
                 >
                   No demos published yet

From e85a9ed3765c9192454224123e5378e1db6d4f4a Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Mon, 5 May 2025 13:49:05 +0700
Subject: [PATCH 141/143] update pre-fetch logic

---
 .../sandbox/[sandboxId]/publish/page.client.tsx  | 16 ++++++++++++++++
 .../publish/hooks/use-is-check-slug-available.ts |  9 ---------
 apps/web/components/ui/logo.tsx                  |  2 --
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.client.tsx b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.client.tsx
index e536b56d..2037aaf5 100644
--- a/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.client.tsx
+++ b/apps/web/app/studio/[username]/sandbox/[sandboxId]/publish/page.client.tsx
@@ -116,6 +116,22 @@ const PublishPage = ({
     },
   })
 
+  // Prefill form with component data if available
+  useEffect(() => {
+    if (componentFormData) {
+      const { code, demos, ...rest } = componentFormData
+      form.reset({
+        ...rest,
+        code: form.getValues("code"),
+        demos: (demos || []).map((demo, i) => ({
+          ...demo,
+          demo_code: form.getValues(`demos.${i}.demo_code`) || demo.demo_code,
+        })),
+      })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [componentFormData])
+
   const publishAsUsername = form.watch("publish_as_username")
   const { user: publishAsUser, isLoading: isPublishAsLoading } = usePublishAs({
     username: publishAsUsername ?? user?.username ?? "",
diff --git a/apps/web/components/features/studio/publish/hooks/use-is-check-slug-available.ts b/apps/web/components/features/studio/publish/hooks/use-is-check-slug-available.ts
index 54690dda..3ce53ea4 100644
--- a/apps/web/components/features/studio/publish/hooks/use-is-check-slug-available.ts
+++ b/apps/web/components/features/studio/publish/hooks/use-is-check-slug-available.ts
@@ -70,10 +70,6 @@ export const generateUniqueSlug = async (
     componentId,
   )
 
-  console.log("isUnique", isUnique)
-  console.log("isUnique", isUnique)
-  console.log("isUnique", isUnique)
-
   let suffix = 1
 
   while (!isUnique) {
@@ -88,11 +84,6 @@ export const generateUniqueSlug = async (
     suffix += 1
   }
 
-  console.log("newSlug", newSlug)
-  console.log("newSlug", newSlug)
-  console.log("newSlug", newSlug)
-  console.log("newSlug", newSlug)
-
   return newSlug
 }
 
diff --git a/apps/web/components/ui/logo.tsx b/apps/web/components/ui/logo.tsx
index 91040044..8cee62d4 100644
--- a/apps/web/components/ui/logo.tsx
+++ b/apps/web/components/ui/logo.tsx
@@ -58,8 +58,6 @@ export function Logo({
     </svg>
   )
 
-  console.log("Rendering Logo component, isVisible:", isVisible)
-
   const renderMenu = () => {
     if (!isVisible) return null
 

From ea4b3036149ab6b4002c2c34e8d36615a1057565 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Mon, 5 May 2025 13:53:57 +0700
Subject: [PATCH 142/143] feat: add user authentication and redirect logic in
 publish page

---
 apps/web/app/publish/page.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 apps/web/app/publish/page.tsx

diff --git a/apps/web/app/publish/page.tsx b/apps/web/app/publish/page.tsx
new file mode 100644
index 00000000..c1000c78
--- /dev/null
+++ b/apps/web/app/publish/page.tsx
@@ -0,0 +1,17 @@
+import { redirect } from "next/navigation"
+import { auth } from "@clerk/nextjs/server"
+import { supabaseWithAdminAccess } from "@/lib/supabase"
+
+export default async function Page() {
+  const { userId } = await auth()
+  if (!userId) redirect("/")
+  const { data: user } = await supabaseWithAdminAccess
+    .from("users")
+    .select("display_username,username")
+    .eq("id", userId)
+    .single()
+  if (!user) redirect("/")
+  const username = user.display_username || user.username
+  if (!username) redirect("/")
+  redirect(`/studio/${username}`)
+}

From 4396a7654ed5c5a0e951bcdb8f8e686681a272a5 Mon Sep 17 00:00:00 2001
From: Serge Bunas <Sergeibynas@gmail.com>
Date: Mon, 5 May 2025 17:07:50 +0700
Subject: [PATCH 143/143] fix errors

---
 apps/web/app/admin/submissions/page.tsx           |  2 +-
 apps/web/app/import-old/page.client.tsx           |  6 +++---
 apps/web/app/publish-old/demo/page.tsx            |  2 +-
 apps/web/app/publish-old/page.tsx                 |  2 +-
 apps/web/app/publish-old/template/page.tsx        |  2 +-
 apps/web/app/sitemap.ts                           |  2 +-
 apps/web/app/studio/[username]/page.tsx           |  9 +++++++--
 .../features/categories/category-list.tsx         |  2 +-
 .../features/collections/collections-list.tsx     |  2 +-
 .../import-old/components/import-form.tsx         | 15 ++++++++-------
 10 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/apps/web/app/admin/submissions/page.tsx b/apps/web/app/admin/submissions/page.tsx
index 9127c410..ffce2b0f 100644
--- a/apps/web/app/admin/submissions/page.tsx
+++ b/apps/web/app/admin/submissions/page.tsx
@@ -2,7 +2,7 @@
 
 import { FC } from "react"
 import { motion } from "motion/react"
-import { useIsAdmin } from "@/components/features/publish/hooks/use-is-admin"
+import { useIsAdmin } from "@/components/features/publish-old/hooks/use-is-admin"
 import AdminHeader from "@/components/features/admin/AdminHeader"
 import SubmissionCard from "@/components/features/admin/SubmissionCard"
 import ManageSubmissionModal from "@/components/features/admin/ManageSubmissionModal"
diff --git a/apps/web/app/import-old/page.client.tsx b/apps/web/app/import-old/page.client.tsx
index 89a7cd8d..7c6d3985 100644
--- a/apps/web/app/import-old/page.client.tsx
+++ b/apps/web/app/import-old/page.client.tsx
@@ -3,7 +3,7 @@
 import { useState } from "react"
 import { useForm, FormProvider } from "react-hook-form"
 import { toast } from "sonner"
-import { FormData } from "@/components/features/publish/config/utils"
+import { FormData } from "@/components/features/publish-old/config/utils"
 import { useTheme } from "next-themes"
 import {
   extractDemoComponentNames,
@@ -14,7 +14,7 @@ import {
 import { UrlInput } from "@/components/features/import-old/components/url-input"
 import { ImportForm } from "@/components/features/import-old/components/import-form"
 import { ImportHeader } from "@/components/features/import-old/components/import-header"
-import { SuccessDialog } from "@/components/features/publish/components/success-dialog"
+import { SuccessDialog } from "@/components/features/publish-old/components/success-dialog"
 import { useRouter } from "next/navigation"
 import { useUser } from "@clerk/nextjs"
 import {
@@ -24,7 +24,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog"
 import { WorkflowIcon } from "@/components/icons/workslow"
-import { ResolveUnknownDependenciesAlertForm } from "@/components/features/publish/components/alerts"
+import { ResolveUnknownDependenciesAlertForm } from "@/components/features/publish-old/components/alerts"
 
 interface RegistryComponent {
   name: string
diff --git a/apps/web/app/publish-old/demo/page.tsx b/apps/web/app/publish-old/demo/page.tsx
index c6142d5c..75599eec 100644
--- a/apps/web/app/publish-old/demo/page.tsx
+++ b/apps/web/app/publish-old/demo/page.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useState, Suspense } from "react"
 import { useSearchParams } from "next/navigation"
 import { useClerkSupabaseClient } from "@/lib/clerk"
-import PublishComponentForm from "@/components/features/publish/publish-layout"
+import PublishComponentForm from "@/components/features/publish-old/publish-layout"
 import fetchFileTextContent from "@/lib/utils/fetchFileTextContent"
 import { LoadingSpinnerPage } from "@/components/ui/loading-spinner"
 
diff --git a/apps/web/app/publish-old/page.tsx b/apps/web/app/publish-old/page.tsx
index 3266c055..fd18d7fa 100644
--- a/apps/web/app/publish-old/page.tsx
+++ b/apps/web/app/publish-old/page.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { SignedIn, SignedOut, RedirectToSignIn } from "@clerk/nextjs"
-import PublishComponentForm from "@/components/features/publish/publish-layout"
+import PublishComponentForm from "@/components/features/publish-old/publish-layout"
 import { Metadata } from "next"
 
 import { Header } from "@/components/ui/header.client"
diff --git a/apps/web/app/publish-old/template/page.tsx b/apps/web/app/publish-old/template/page.tsx
index c5e84e14..98fd5510 100644
--- a/apps/web/app/publish-old/template/page.tsx
+++ b/apps/web/app/publish-old/template/page.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { SignedIn, SignedOut, RedirectToSignIn } from "@clerk/nextjs"
-import { PublishTemplateForm } from "@/components/features/publish/template/publish-template-form"
+import { PublishTemplateForm } from "@/components/features/publish-old/template/publish-template-form"
 import { Metadata } from "next"
 import { Header } from "@/components/ui/header.client"
 
diff --git a/apps/web/app/sitemap.ts b/apps/web/app/sitemap.ts
index dbd0cb7d..9d2cb93e 100644
--- a/apps/web/app/sitemap.ts
+++ b/apps/web/app/sitemap.ts
@@ -20,7 +20,7 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
     .select("username, updated_at")
 
   const componentUrls = (components || []).map((component) => ({
-    url: `${baseUrl}/${component.users?.username}/${component.component_slug}`,
+    url: `${baseUrl}/${component.users?.[0]?.username}/${component.component_slug}`,
     lastModified: component.updated_at,
     changeFrequency: "weekly" as const,
     priority: 0.8,
diff --git a/apps/web/app/studio/[username]/page.tsx b/apps/web/app/studio/[username]/page.tsx
index 4b8f6e56..3b8a1cc1 100644
--- a/apps/web/app/studio/[username]/page.tsx
+++ b/apps/web/app/studio/[username]/page.tsx
@@ -64,7 +64,8 @@ const getCachedUserSandboxes = unstable_cache(
     const shortUUID = ShortUUID()
     return (sandboxesData || []).map(
       (sandbox): ExtendedDemoWithComponent => ({
-        id: shortUUID.fromUUID(sandbox.id), // Use short UUID if needed, or original ID if consistent
+        id: sandbox.id,
+        sandbox_id: shortUUID.fromUUID(sandbox.id), // Use short UUID if needed, or original ID if consistent
         name: sandbox.name || "Untitled Sandbox",
         created_at: sandbox.created_at,
         updated_at: sandbox.updated_at,
@@ -74,13 +75,17 @@ const getCachedUserSandboxes = unstable_cache(
         demo_slug: sandbox.id, // Use sandbox id as a placeholder slug
         preview_url: null,
         video_url: null,
-        component: null, // No linked component initially
+        // @ts-ignore
+        component: undefined, // No linked component initially
+        // @ts-ignore
         user: null, // User data can be added if needed, but might not be necessary for table display
         component_user: null,
         total_count: 0,
         view_count: 0,
         bookmarks_count: 0,
+        // @ts-ignore
         bundle_url: null,
+        // @ts-ignore
         moderators_feedback: null,
       }),
     )
diff --git a/apps/web/components/features/categories/category-list.tsx b/apps/web/components/features/categories/category-list.tsx
index 852d1625..bb4d1481 100644
--- a/apps/web/components/features/categories/category-list.tsx
+++ b/apps/web/components/features/categories/category-list.tsx
@@ -44,7 +44,7 @@ export function CategoriesList({
           category.items.map((item) => {
             if (!item.demoId) return null
             const preview = categoryPreviews?.find(
-              (s) => s.demo_id === item.demoId,
+              (s: { demo_id: number }) => s.demo_id === item.demoId,
             )
             if (!preview) return null
 
diff --git a/apps/web/components/features/collections/collections-list.tsx b/apps/web/components/features/collections/collections-list.tsx
index b9baae65..a6980e75 100644
--- a/apps/web/components/features/collections/collections-list.tsx
+++ b/apps/web/components/features/collections/collections-list.tsx
@@ -40,7 +40,7 @@ export function CollectionsContainer({ tagSlug }: CollectionsContainerProps) {
       if (error) throw error
       if (!data) return []
 
-      return data.map((collection) => ({
+      return data.map((collection: CollectionWithUser) => ({
         ...collection,
         user_data: collection.user_data || {
           id: "",
diff --git a/apps/web/components/features/import-old/components/import-form.tsx b/apps/web/components/features/import-old/components/import-form.tsx
index 09c43d48..9d1447ad 100644
--- a/apps/web/components/features/import-old/components/import-form.tsx
+++ b/apps/web/components/features/import-old/components/import-form.tsx
@@ -1,10 +1,10 @@
 import { UseFormReturn } from "react-hook-form"
-import { FormData } from "@/components/features/publish/config/utils"
-import { DemoDetailsForm } from "@/components/features/publish/components/forms/demo-form"
-import { NameSlugForm } from "@/components/features/publish/components/forms/component-details-form"
-import { EditCodeFileCard } from "@/components/features/publish/components/edit-code-file-card"
-import { DemoPreviewTabs } from "@/components/features/publish/components/preview-with-tabs"
-import { EditorStep } from "@/components/features/publish/components/code-editor"
+import { FormData } from "@/components/features/publish-old/config/utils"
+import { DemoDetailsForm } from "@/components/features/publish-old/components/forms/demo-form"
+import { NameSlugForm } from "@/components/features/publish-old/components/forms/component-details-form"
+import { EditCodeFileCard } from "@/components/features/publish-old/components/edit-code-file-card"
+import { DemoPreviewTabs } from "@/components/features/publish-old/components/preview-with-tabs"
+import { EditorStep } from "@/components/features/publish-old/components/code-editor"
 import { cn } from "@/lib/utils"
 
 interface ImportFormProps {
@@ -83,7 +83,8 @@ export function ImportForm({
           formStep === "demoCode" ? "w-1/2" : "w-2/3",
         )}
       >
-        {(!form.watch("unknown_dependencies") || form.watch("unknown_dependencies").length === 0) && (
+        {(!form.watch("unknown_dependencies") ||
+          form.watch("unknown_dependencies").length === 0) && (
           <DemoPreviewTabs
             code={code}
             slugToPublish={componentSlug}