feat: design page scaffold previews with library toggle

Each surface now shows a realistic scaffold preview in a browser chrome
frame. Tab bar at the top toggles between library options (shadcn,
DaisyUI, HeroUI, Mantine, Aceternity, etc.) — the scaffold updates
instantly to show that library's visual language. Lock in confirms
the choice. Scaffolds cover all 6 surfaces × their library options.

Made-with: Cursor

app/[workspace]/project/[projectId]/design/page.tsx

@@ -9,6 +9,7 @@ import {
   Monitor, Globe, Settings, Smartphone, Mail, BookOpen,
   Lock, CheckCircle2, Loader2, ChevronRight, Pencil,
 } from "lucide-react";
+import { SCAFFOLD_REGISTRY } from "@/components/design-scaffolds";
 
 // ---------------------------------------------------------------------------
 // Surface definitions
@@ -290,77 +291,7 @@ const ALL_SURFACES: Surface[] = [
 ];
 
 // ---------------------------------------------------------------------------
-// Theme option card
-// ---------------------------------------------------------------------------
-
-function ThemeCard({
-  theme,
-  selected,
-  locked,
-  onSelect,
-}: {
-  theme: Theme;
-  selected: boolean;
-  locked: boolean;
-  onSelect: () => void;
-}) {
-  return (
-    <button
-      onClick={onSelect}
-      disabled={locked && !selected}
-      className={cn(
-        "flex flex-col text-left rounded-xl border transition-all overflow-hidden",
-        "w-52 shrink-0",
-        selected && locked
-          ? "border-foreground ring-2 ring-foreground shadow-sm"
-          : selected
-          ? "border-foreground ring-1 ring-foreground"
-          : "border-border hover:border-foreground/40",
-        locked && !selected && "opacity-40 cursor-not-allowed"
-      )}
-    >
-      {/* Preview */}
-      <div className="h-28 p-2 bg-zinc-50 border-b border-border relative">
-        {theme.preview}
-        {selected && locked && (
-          <div className="absolute top-1.5 right-1.5 w-5 h-5 rounded-full bg-foreground flex items-center justify-center">
-            <Lock className="w-2.5 h-2.5 text-background" />
-          </div>
-        )}
-        {selected && !locked && (
-          <div className="absolute top-1.5 right-1.5 w-5 h-5 rounded-full bg-foreground flex items-center justify-center">
-            <CheckCircle2 className="w-2.5 h-2.5 text-background" />
-          </div>
-        )}
-      </div>
-
-      {/* Info */}
-      <div className="p-3 flex flex-col gap-1.5">
-        <div className="flex items-center justify-between gap-2">
-          <p className="text-xs font-semibold text-foreground">{theme.name}</p>
-          <a
-            href={theme.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            onClick={e => e.stopPropagation()}
-            className="text-[10px] text-muted-foreground hover:text-foreground transition-colors shrink-0"
-          >
-            Docs ↗
-          </a>
-        </div>
-        <p className="text-[11px] text-muted-foreground leading-relaxed">{theme.description}</p>
-        <div className="flex flex-wrap gap-1 mt-0.5">
-          {theme.tags.map(t => (
-            <Badge key={t} variant="secondary" className="text-[9px] px-1.5 py-0">{t}</Badge>
-          ))}
-        </div>
-      </div>
-    </button>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Surface section
+// Surface section — tab toggle + scaffold preview + lock in
 // ---------------------------------------------------------------------------
 
 function SurfaceSection({
@@ -380,35 +311,56 @@ function SurfaceSection({
   onUnlock: () => void;
   saving: boolean;
 }) {
-  const Icon = surface.icon;
-  const lockedTheme = surface.themes.find(t => t.id === lockedThemeId);
+  // Active preview tab — if locked show that, otherwise the selected/first
+  const previewId = lockedThemeId ?? selectedThemeId ?? surface.themes[0]?.id ?? null;
+  const activeTheme = surface.themes.find(t => t.id === previewId);
+  const ScaffoldComponent = previewId
+    ? SCAFFOLD_REGISTRY[surface.id]?.[previewId]
+    : null;
 
   return (
-    <div className="space-y-3">
-      {/* Surface header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2.5">
-          <div className="w-8 h-8 rounded-lg bg-muted flex items-center justify-center">
-            <Icon className="h-4 w-4 text-muted-foreground" />
-          </div>
-          <div>
-            <div className="flex items-center gap-2">
-              <p className="text-sm font-semibold">{surface.name}</p>
-              {lockedTheme && (
-                <Badge variant="secondary" className="text-[10px] gap-1 px-1.5">
-                  <Lock className="w-2.5 h-2.5" />
-                  {lockedTheme.name}
-                </Badge>
+    <div className="flex flex-col h-full gap-0">
+      {/* Tab bar */}
+      <div className="flex items-center gap-1 px-1 pb-3 flex-wrap">
+        {surface.themes.map(theme => {
+          const isActive = theme.id === previewId;
+          const isLocked = theme.id === lockedThemeId;
+          return (
+            <button
+              key={theme.id}
+              onClick={() => !lockedThemeId && onSelect(theme.id)}
+              disabled={!!lockedThemeId && !isLocked}
+              className={cn(
+                "flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all border",
+                isActive && isLocked
+                  ? "bg-foreground text-background border-foreground"
+                  : isActive
+                  ? "bg-foreground text-background border-foreground"
+                  : lockedThemeId
+                  ? "opacity-30 border-transparent text-muted-foreground cursor-not-allowed"
+                  : "border-border text-muted-foreground hover:border-foreground/40 hover:text-foreground"
               )}
-            </div>
-            <p className="text-xs text-muted-foreground">{surface.description}</p>
-          </div>
-        </div>
+            >
+              {isLocked && <Lock className="w-2.5 h-2.5" />}
+              {theme.name}
+            </button>
+          );
+        })}
 
-        {/* Lock / Unlock controls */}
-        <div className="flex items-center gap-2 shrink-0">
+        {/* Spacer + actions */}
+        <div className="ml-auto flex items-center gap-2">
+          {activeTheme && (
+            <a
+              href={activeTheme.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-[11px] text-muted-foreground hover:text-foreground transition-colors"
+            >
+              {activeTheme.name} docs ↗
+            </a>
+          )}
           {lockedThemeId ? (
-            <Button variant="outline" size="sm" onClick={onUnlock} className="gap-1.5 text-xs">
+            <Button variant="outline" size="sm" onClick={onUnlock} className="gap-1.5 text-xs h-7">
               <Pencil className="h-3 w-3" />
               Change
             </Button>
@@ -417,7 +369,7 @@ function SurfaceSection({
               size="sm"
               onClick={onLock}
               disabled={!selectedThemeId || saving}
-              className="gap-1.5 text-xs"
+              className="gap-1.5 text-xs h-7"
             >
               {saving ? <Loader2 className="h-3 w-3 animate-spin" /> : <Lock className="h-3 w-3" />}
               Lock in
@@ -426,33 +378,41 @@ function SurfaceSection({
         </div>
       </div>
 
-      {/* Theme cards — horizontal scroll */}
-      {!lockedThemeId && (
-        <div className="flex gap-3 overflow-x-auto pb-2 -mx-1 px-1">
-          {surface.themes.map(theme => (
-            <ThemeCard
-              key={theme.id}
-              theme={theme}
-              selected={selectedThemeId === theme.id}
-              locked={false}
-              onSelect={() => onSelect(theme.id)}
-            />
-          ))}
+      {/* Scaffold preview — browser chrome frame */}
+      <div className="flex-1 rounded-xl overflow-hidden border" style={{ minHeight: 460 }}>
+        {/* Browser chrome */}
+        <div className="flex items-center gap-1.5 px-3 h-8 border-b bg-muted/50 shrink-0">
+          <div className="w-2.5 h-2.5 rounded-full bg-zinc-300" />
+          <div className="w-2.5 h-2.5 rounded-full bg-zinc-300" />
+          <div className="w-2.5 h-2.5 rounded-full bg-zinc-300" />
+          <div className="ml-3 flex-1 max-w-xs h-5 rounded-md bg-border/60 flex items-center px-2">
+            <span className="text-[9px] text-muted-foreground truncate">
+              {activeTheme ? `/${surface.id} — ${activeTheme.name}` : ""}
+            </span>
+          </div>
         </div>
-      )}
+        {/* Scaffold */}
+        <div style={{ height: 460 }}>
+          {ScaffoldComponent
+            ? <ScaffoldComponent />
+            : (
+              <div className="h-full flex items-center justify-center text-muted-foreground text-xs">
+                Select a library above to preview
+              </div>
+            )
+          }
+        </div>
+      </div>
 
-      {/* Locked state — show only selected */}
-      {lockedThemeId && (
-        <div className="flex gap-3 overflow-x-auto pb-2 -mx-1 px-1">
-          {surface.themes.map(theme => (
-            <ThemeCard
-              key={theme.id}
-              theme={theme}
-              selected={theme.id === lockedThemeId}
-              locked={true}
-              onSelect={() => {}}
-            />
-          ))}
+      {/* Theme description */}
+      {activeTheme && (
+        <div className="pt-3 flex items-center gap-3">
+          <p className="text-xs text-muted-foreground flex-1">{activeTheme.description}</p>
+          <div className="flex gap-1">
+            {activeTheme.tags.map(t => (
+              <Badge key={t} variant="secondary" className="text-[9px] px-1.5 py-0">{t}</Badge>
+            ))}
+          </div>
         </div>
       )}
     </div>