feat(ui): implement split-pane live preview for design systems

vibn-frontend/app/api/design-systems/[id]/preview/route.ts

@@ -0,0 +1,45 @@
+import { NextResponse } from "next/server";
+import fs from "fs";
+import path from "path";
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params;
+
+  if (!id || id.includes("..") || id.includes("/")) {
+    return new NextResponse("Invalid design system ID", { status: 400 });
+  }
+
+  const htmlPath = path.join(
+    process.cwd(),
+    "lib",
+    "scaffold",
+    "open-design",
+    "design-systems",
+    id,
+    "components.html"
+  );
+
+  try {
+    if (!fs.existsSync(htmlPath)) {
+      return new NextResponse(`Preview not found for ${id}`, { status: 404 });
+    }
+
+    const html = await fs.promises.readFile(htmlPath, "utf-8");
+
+    return new NextResponse(html, {
+      status: 200,
+      headers: {
+        "Content-Type": "text/html; charset=utf-8",
+        // Allow framing only from same origin for security
+        "X-Frame-Options": "SAMEORIGIN",
+      },
+    });
+  } catch (err: any) {
+    return new NextResponse(`Error loading preview: ${err.message}`, {
+      status: 500,
+    });
+  }
+}