new publishing flow

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"
 

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"

apps/web/app/api/sandbox/connect/route.ts

@@ -0,0 +1,57 @@
+import { auth } from "@clerk/nextjs/server"
+import { NextResponse } from "next/server"
+import { supabaseWithAdminAccess } from "@/lib/supabase"
+import {
+  codesandboxSdk,
+  DEFAULT_HIBERNATION_TIMEOUT,
+} 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, name, id, component_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,
+      {
+        hibernationTimeoutSeconds: DEFAULT_HIBERNATION_TIMEOUT,
+      },
+    )
+
+    return NextResponse.json({ success: true, startData, sandbox })
+  } catch (error) {
+    console.error("Error connecting to sandbox:", error)
+    return NextResponse.json(
+      { error: "Internal Server Error" },
+      { status: 500 },
+    )
+  }
+}

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 },
+    )
+  }
+}

apps/web/app/api/sandbox/new/route.ts

@@ -0,0 +1,61 @@
+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()
+
+    console.log("userId", userId)
+
+    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 })
+  }
+}

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 },
+    )
+  }
+}

apps/web/app/api/studio/merge-styles/globals/route.ts

@@ -0,0 +1,120 @@
+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
+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 complete 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. Always include all content completely without summarizing or truncating. Preserve all keyframes, animations, and complex styles fully.",
+        },
+        {
+          role: "user",
+          content: prompt,
+        },
+      ],
+      model: "gpt-4o-mini",
+      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)
+
+    // 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: "",
+    }
+
+    // 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) {
+    console.error("❌ [Global CSS Merge] Error:", error)
+    return NextResponse.json(
+      { error: "Failed to merge global CSS" },
+      { status: 500 },
+    )
+  }
+}