@cmssy/cli 0.3.0 → 0.4.0

package/dist/commands/dev.js

@@ -1,106 +1,31 @@
 import chalk from "chalk";
-import { exec } from "child_process";
-import express from "express";
+import { spawn } from "child_process";
 import fs from "fs-extra";
-import { GraphQLClient } from "graphql-request";
 import ora from "ora";
 import path from "path";
-import { fileURLToPath } from "url";
-import { createServer as createViteServer } from "vite";
-import react from "@vitejs/plugin-react";
-import tailwindcss from "@tailwindcss/postcss";
-// Custom Vite plugin to resolve @import "main.css" from styles folder
-// Inlines the imported CSS content to avoid Vite's postcss-import issues
-function cmssyStylesImportPlugin(projectRoot) {
-    return {
-        name: "cmssy-styles-import",
-        enforce: "pre",
-        async load(id) {
-            // Strip query params for matching
-            const cleanId = id.split("?")[0];
-            // Only process CSS files in blocks/templates
-            if (!cleanId.endsWith(".css"))
-                return null;
-            if (!cleanId.includes("/blocks/") && !cleanId.includes("/templates/"))
-                return null;
-            const content = await fs.readFile(cleanId, "utf-8");
-            // Check if it has @import "main.css" or similar simple imports
-            if (!content.includes('@import "') && !content.includes("@import '")) {
-                return null;
-            }
-            // Replace @import "filename.css" with the actual file content (inline it)
-            const stylesDir = path.join(projectRoot, "styles");
-            let transformed = content;
-            // Match @import "filename.css" or @import 'filename.css' (without path)
-            const importRegex = /@import\s+["']([^"'\/]+\.css)["']\s*;/g;
-            transformed = transformed.replace(importRegex, (match, filename) => {
-                const fullPath = path.join(stylesDir, filename);
-                if (fs.existsSync(fullPath)) {
-                    // Inline the CSS content instead of keeping the import
-                    const importedContent = fs.readFileSync(fullPath, "utf-8");
-                    return `/* Inlined from ${filename} */\n${importedContent}`;
-                }
-                return match; // Keep original if file doesn't exist
-            });
-            if (transformed !== content) {
-                return transformed;
-            }
-            return null;
-        },
-    };
-}
-import { loadBlockConfig, validateSchema as validateBlockSchema } from "../utils/block-config.js";
-import { loadMetaCache, updateBlockInCache } from "../utils/blocks-meta-cache.js";
-import { isTemplateConfig } from "../types/block-config.js";
-import { loadConfig } from "../utils/cmssy-config.js";
-import { loadConfig as loadEnvConfig } from "../utils/config.js";
-import { getFieldTypes } from "../utils/field-schema.js";
+import { generateDevApp, regeneratePreviewPages } from "../utils/dev-generator.js";
+import { loadMetaCache } from "../utils/blocks-meta-cache.js";
 import { scanResources } from "../utils/scanner.js";
-import { generateTypes } from "../utils/type-generator.js";
-// Merge default values from schema into preview data
-// Preview data values take precedence over defaults
-function mergeDefaultsWithPreview(schema, previewData) {
-    const merged = { ...previewData };
-    for (const [key, field] of Object.entries(schema)) {
-        // If field is missing or undefined, use defaultValue
-        if (merged[key] === undefined || merged[key] === null) {
-            if (field.defaultValue !== undefined) {
-                merged[key] = field.defaultValue;
-            }
-            else if (field.type === "repeater") {
-                // Repeaters default to empty array if no defaultValue
-                merged[key] = [];
-            }
-        }
-        // For repeaters with items, merge nested defaults
-        if (field.type === "repeater" && field.schema && Array.isArray(merged[key])) {
-            merged[key] = merged[key].map((item) => {
-                const mergedItem = { ...item };
-                for (const [nestedKey, nestedField] of Object.entries(field.schema)) {
-                    // Add default value if missing
-                    if (mergedItem[nestedKey] === undefined && nestedField.defaultValue !== undefined) {
-                        mergedItem[nestedKey] = nestedField.defaultValue;
-                    }
-                }
-                return mergedItem;
-            });
-        }
-    }
-    return merged;
-}
 export async function devCommand(options) {
-    const spinner = ora("Starting development server...").start();
+    const spinner = ora("Starting Next.js dev server...").start();
     try {
-        const config = await loadConfig();
-        const port = parseInt(options.port, 10);
         const projectRoot = process.cwd();
-        // Scan for blocks and templates - FAST: no config loading at startup
+        const port = parseInt(options.port, 10);
+        // Ensure next.config exists
+        const hasNextConfig = fs.existsSync(path.join(projectRoot, "next.config.mjs")) ||
+            fs.existsSync(path.join(projectRoot, "next.config.js")) ||
+            fs.existsSync(path.join(projectRoot, "next.config.ts"));
+        if (!hasNextConfig) {
+            spinner.fail("No next.config found. Run 'cmssy init' to create a new project.");
+            process.exit(1);
+        }
+        // Scan blocks
         spinner.text = "Scanning blocks...";
         const resources = await scanResources({
             strict: false,
-            loadConfig: false, // Lazy load configs when needed
+            loadConfig: false,
             validateSchema: false,
-            loadPreview: false, // Lazy load preview data
+            loadPreview: false,
             requirePackageJson: false,
         });
         if (resources.length === 0) {
@@ -109,851 +34,87 @@ export async function devCommand(options) {
             console.log(chalk.white("  npx cmssy create block my-block\n"));
             process.exit(0);
         }
-        // Load metadata cache for instant filters
-        spinner.text = "Loading metadata cache...";
+        // Load metadata cache
         const metaCache = loadMetaCache(projectRoot);
-        let cachedCount = 0;
-        // Merge cached metadata into resources
         resources.forEach((r) => {
             const cached = metaCache.blocks[r.name];
             if (cached) {
                 r.category = cached.category;
                 r.displayName = cached.displayName || r.name;
                 r.description = cached.description;
-                // Store tags in a temp property for API
-                r.cachedTags = cached.tags;
-                cachedCount++;
             }
         });
-        if (cachedCount > 0) {
-            spinner.text = `Loaded ${cachedCount} blocks from cache`;
-        }
-        // Fetch field types from backend (used for type generation)
-        spinner.text = "Fetching field types...";
-        let fieldTypes = [];
-        try {
-            fieldTypes = await getFieldTypes();
-        }
-        catch (error) {
-            // Will use fallback types if backend is unreachable
-        }
-        spinner.text = "Starting Vite server...";
-        // Dev UI paths (must be before Vite config)
-        const __filename = fileURLToPath(import.meta.url);
-        const __dirname = path.dirname(__filename);
-        const devUiReactPath = path.join(__dirname, "../dev-ui-react");
-        // Create Express app for API routes
-        const app = express();
-        app.use(express.json());
-        // Create Vite server in middleware mode
-        const vite = await createViteServer({
-            root: projectRoot,
-            server: {
-                middlewareMode: true,
-                hmr: { port: port + 1 },
-                fs: {
-                    // Allow serving files from cmssy-cli package (dev-ui-react)
-                    allow: [projectRoot, path.dirname(__dirname)],
-                },
-            },
-            appType: "custom",
-            plugins: [cmssyStylesImportPlugin(projectRoot), react()],
-            resolve: {
-                alias: [
-                    // React packages must resolve from user's project, not cmssy-cli
-                    { find: "react", replacement: path.join(projectRoot, "node_modules/react") },
-                    { find: "react-dom", replacement: path.join(projectRoot, "node_modules/react-dom") },
-                    // Common @ alias for project root (shadcn/ui convention)
-                    { find: /^@\/(.*)/, replacement: path.join(projectRoot, "$1") },
-                    { find: "@blocks", replacement: path.join(projectRoot, "blocks") },
-                    { find: "@templates", replacement: path.join(projectRoot, "templates") },
-                    { find: "@styles", replacement: path.join(projectRoot, "styles") },
-                    { find: "@lib", replacement: path.join(projectRoot, "lib") },
-                    // Handle relative imports to lib from any depth
-                    { find: /^(\.\.\/)+lib/, replacement: path.join(projectRoot, "lib") },
-                    // Serve dev UI React files from cmssy-cli package
-                    { find: /^\/dev-ui-react\/(.*)/, replacement: path.join(devUiReactPath, "$1") },
-                ],
+        // Generate the .cmssy/dev/ Next.js app
+        spinner.text = "Generating Next.js dev app...";
+        const devRoot = generateDevApp(projectRoot, resources);
+        // Symlink node_modules from project root into dev app
+        // so Next.js can resolve react, react-dom, next, etc.
+        const devNodeModules = path.join(devRoot, "node_modules");
+        const projectNodeModules = path.join(projectRoot, "node_modules");
+        if (!fs.existsSync(devNodeModules) && fs.existsSync(projectNodeModules)) {
+            fs.symlinkSync(projectNodeModules, devNodeModules, "junction");
+        }
+        // Find next binary from project's node_modules
+        const nextBin = path.join(projectRoot, "node_modules/.bin/next");
+        if (!fs.existsSync(nextBin)) {
+            spinner.fail("'next' not found in node_modules. Run: npm install next");
+            process.exit(1);
+        }
+        spinner.succeed("Next.js dev app generated");
+        console.log(chalk.green.bold("\n─────────────────────────────────────────"));
+        console.log(chalk.green.bold("   Cmssy Dev Server (Next.js)"));
+        console.log(chalk.green.bold("─────────────────────────────────────────\n"));
+        const blocks = resources.filter((r) => r.type === "block");
+        const templates = resources.filter((r) => r.type === "template");
+        console.log(chalk.cyan(`   ${blocks.length} blocks, ${templates.length} templates`));
+        console.log(chalk.green(`\n   Local:   ${chalk.cyan(`http://localhost:${port}`)}`));
+        console.log(chalk.green("   Next.js Fast Refresh enabled"));
+        console.log(chalk.green("   Press Ctrl+C to stop"));
+        console.log(chalk.green.bold("\n─────────────────────────────────────────\n"));
+        // Spawn next dev from project root so the project's own PostCSS config,
+        // Tailwind setup, and node_modules resolution all work naturally.
+        // The dev app directory is passed as argument to next dev.
+        const nextProcess = spawn(nextBin, ["dev", devRoot, "--port", String(port)], {
+            cwd: projectRoot,
+            stdio: "inherit",
+            env: {
+                ...process.env,
+                CMSSY_PROJECT_ROOT: projectRoot,
             },
-            css: {
-                postcss: {
-                    plugins: [tailwindcss()],
-                },
-            },
-            optimizeDeps: {
-                include: ["react", "react-dom", "framer-motion"],
-            },
-        });
-        // API: Get all blocks (uses cache for instant filters)
-        app.get("/api/blocks", (_req, res) => {
-            const blockList = resources.map((r) => ({
-                type: r.type,
-                name: r.name,
-                displayName: r.displayName || r.name,
-                version: r.packageJson?.version || "1.0.0",
-                // Use cached or loaded metadata
-                category: r.blockConfig?.category || r.category || "other",
-                tags: r.blockConfig?.tags || r.cachedTags || [],
-                description: r.blockConfig?.description || r.description,
-                hasConfig: !!r.blockConfig,
-            }));
-            res.json(blockList);
-        });
-        // API: Lazy load block config (called when block is selected)
-        app.get("/api/blocks/:name/config", async (req, res) => {
-            const { name } = req.params;
-            const resource = resources.find((r) => r.name === name);
-            if (!resource) {
-                res.status(404).json({ error: "Block not found" });
-                return;
-            }
-            // Load config if not already loaded
-            if (!resource.blockConfig) {
-                try {
-                    const blockConfig = await loadBlockConfig(resource.path);
-                    if (blockConfig) {
-                        // Validate schema
-                        if (blockConfig.schema) {
-                            const validation = await validateBlockSchema(blockConfig.schema, resource.path);
-                            if (!validation.valid) {
-                                console.log(chalk.yellow(`\n⚠️  Schema warnings for ${name}:`));
-                                validation.errors.forEach((err) => console.log(chalk.yellow(`   • ${err}`)));
-                            }
-                        }
-                        resource.blockConfig = blockConfig;
-                        resource.displayName = blockConfig.name || resource.name;
-                        resource.description = blockConfig.description;
-                        resource.category = blockConfig.category;
-                        // Update metadata cache
-                        updateBlockInCache(name, resource.type, blockConfig, resource.packageJson?.version, projectRoot);
-                    }
-                }
-                catch (error) {
-                    console.log(chalk.red(`\n❌ Failed to load config for ${name}: ${error.message}`));
-                    res.status(500).json({ error: error.message });
-                    return;
-                }
-            }
-            // Always load preview data fresh from file (don't use stale cache)
-            const previewPath = path.join(resource.path, "preview.json");
-            if (fs.existsSync(previewPath)) {
-                resource.previewData = fs.readJsonSync(previewPath);
-            }
-            else {
-                resource.previewData = {};
-            }
-            const cfg = resource.blockConfig;
-            // Merge default values from schema into previewData (preview.json values take precedence)
-            const mergedPreviewData = mergeDefaultsWithPreview(cfg?.schema || {}, resource.previewData || {});
-            // Build response with template-specific fields if applicable
-            const response = {
-                name: resource.name,
-                displayName: cfg?.name || resource.displayName || resource.name,
-                description: cfg?.description || resource.description,
-                category: cfg?.category || "other",
-                tags: cfg?.tags || [],
-                schema: cfg?.schema || {},
-                previewData: mergedPreviewData,
-                version: resource.packageJson?.version || "1.0.0",
-            };
-            // Add template-specific fields
-            if (cfg && isTemplateConfig(cfg)) {
-                response.pages = cfg.pages;
-                response.layoutPositions = cfg.layoutPositions || [];
-            }
-            res.json(response);
-        });
-        // API: Get user's workspaces
-        app.get("/api/workspaces", async (_req, res) => {
-            try {
-                const envConfig = loadEnvConfig();
-                if (!envConfig.apiToken) {
-                    res.status(401).json({
-                        error: "API token not configured",
-                        message: "Run 'cmssy configure' to set up your API credentials",
-                    });
-                    return;
-                }
-                const client = new GraphQLClient(envConfig.apiUrl, {
-                    headers: {
-                        "Content-Type": "application/json",
-                        Authorization: `Bearer ${envConfig.apiToken}`,
-                    },
-                });
-                const query = `
-          query MyWorkspaces {
-            myWorkspaces {
-              id
-              slug
-              name
-              myRole { name slug }
-            }
-          }
-        `;
-                const data = await client.request(query);
-                res.json(data.myWorkspaces || []);
-            }
-            catch (error) {
-                console.error("Failed to fetch workspaces:", error);
-                res.status(500).json({
-                    error: "Failed to fetch workspaces",
-                    message: error.message || "Unknown error",
-                });
-            }
-        });
-        // API: Get preview data for a block (lazy loads if needed)
-        app.get("/api/preview/:blockName", (req, res) => {
-            const { blockName } = req.params;
-            const resource = resources.find((r) => r.name === blockName);
-            if (!resource) {
-                res.status(404).json({ error: "Block not found" });
-                return;
-            }
-            // Always load preview data fresh from file
-            const previewPath = path.join(resource.path, "preview.json");
-            if (fs.existsSync(previewPath)) {
-                resource.previewData = fs.readJsonSync(previewPath);
-            }
-            else {
-                resource.previewData = {};
-            }
-            res.json(resource.previewData);
-        });
-        // API: Save preview data for a block
-        app.post("/api/preview/:blockName", (req, res) => {
-            const { blockName } = req.params;
-            const newPreviewData = req.body;
-            const resource = resources.find((r) => r.name === blockName);
-            if (!resource) {
-                res.status(404).json({ error: "Block not found" });
-                return;
-            }
-            resource.previewData = newPreviewData;
-            const previewPath = path.join(resource.path, "preview.json");
-            try {
-                fs.writeJsonSync(previewPath, newPreviewData, { spaces: 2 });
-                res.json({ success: true });
-            }
-            catch (error) {
-                res.status(500).json({ error: error.message });
-            }
-        });
-        // API: Get published version from backend
-        app.get("/api/blocks/:name/published-version", async (req, res) => {
-            const { name } = req.params;
-            const { workspaceId } = req.query;
-            const resource = resources.find((r) => r.name === name);
-            if (!resource) {
-                res.status(404).json({ error: "Block not found" });
-                return;
-            }
-            if (!workspaceId) {
-                res.status(400).json({ error: "workspaceId is required" });
-                return;
-            }
-            try {
-                const envConfig = loadEnvConfig();
-                if (!envConfig.apiToken) {
-                    res.json({ version: null, published: false });
-                    return;
-                }
-                const client = new GraphQLClient(envConfig.apiUrl, {
-                    headers: {
-                        Authorization: `Bearer ${envConfig.apiToken}`,
-                        "x-workspace-id": workspaceId,
-                    },
-                });
-                const packageName = resource.packageJson?.name || "";
-                const blockType = packageName.split(".").pop() || name;
-                const query = `
-          query GetPublishedVersion($blockType: String!) {
-            workspaceBlockByType(blockType: $blockType) { version }
-          }
-        `;
-                const data = await client.request(query, { blockType });
-                const publishedVersion = data.workspaceBlockByType?.version || null;
-                res.json({ version: publishedVersion, published: publishedVersion !== null });
-            }
-            catch (error) {
-                res.json({ version: null, published: false, error: error.message });
-            }
-        });
-        // API: Get block publish status
-        app.get("/api/blocks/:name/status", (req, res) => {
-            const { name } = req.params;
-            const resource = resources.find((r) => r.name === name);
-            if (!resource) {
-                res.status(404).json({ error: "Block not found" });
-                return;
-            }
-            res.json({
-                name: resource.name,
-                version: resource.packageJson?.version || "1.0.0",
-                packageName: resource.packageJson?.name || `@local/${resource.type}s.${resource.name}`,
-                published: false,
-                lastPublished: null,
-            });
-        });
-        // API: Publish block
-        app.post("/api/blocks/:name/publish", async (req, res) => {
-            const { name } = req.params;
-            const { target, workspaceId, versionBump } = req.body;
-            const resource = resources.find((r) => r.name === name);
-            if (!resource) {
-                res.status(404).json({ error: "Block not found" });
-                return;
-            }
-            if (!target || target !== "workspace") {
-                res.status(400).json({ error: "Invalid target. Only 'workspace' is supported." });
-                return;
-            }
-            if (!workspaceId) {
-                res.status(400).json({ error: "Workspace ID required" });
-                return;
-            }
-            const args = ["publish", resource.name, "--workspace", workspaceId];
-            if (versionBump && versionBump !== "none") {
-                args.push(`--${versionBump}`);
-            }
-            else {
-                args.push("--no-bump");
-            }
-            const command = `cmssy ${args.join(" ")}`;
-            console.log("[PUBLISH] Executing:", command);
-            exec(command, {
-                cwd: projectRoot,
-                timeout: 60000,
-                maxBuffer: 10 * 1024 * 1024,
-                env: { ...process.env, CI: "true", FORCE_COLOR: "0", NO_COLOR: "1" },
-            }, (error, stdout, stderr) => {
-                const output = `${stdout}\n${stderr}`;
-                const success = output.includes("published successfully") ||
-                    output.includes("published to workspace");
-                if (success) {
-                    const pkgPath = path.join(resource.path, "package.json");
-                    if (fs.existsSync(pkgPath)) {
-                        resource.packageJson = fs.readJsonSync(pkgPath);
-                    }
-                    res.json({
-                        success: true,
-                        message: "Published to workspace",
-                        version: resource.packageJson?.version,
-                    });
-                }
-                else {
-                    res.status(500).json({ success: false, error: stderr || error?.message || "Publish failed" });
-                }
-            });
-        });
-        // API: List resources (legacy)
-        app.get("/api/resources", (_req, res) => {
-            res.json(resources.map((r) => ({
-                type: r.type,
-                name: r.name,
-                displayName: r.displayName,
-                description: r.description,
-                category: r.category,
-            })));
         });
-        // API: Get template pages (for template preview)
-        app.get("/api/templates/:name/pages", async (req, res) => {
-            const { name } = req.params;
-            const resource = resources.find((r) => r.name === name && r.type === "template");
-            if (!resource) {
-                res.status(404).json({ error: "Template not found" });
-                return;
-            }
-            // Lazy load config if needed
-            if (!resource.blockConfig) {
-                try {
-                    const blockConfig = await loadBlockConfig(resource.path);
-                    if (blockConfig) {
-                        resource.blockConfig = blockConfig;
-                    }
-                }
-                catch (error) {
-                    res.status(500).json({ error: error.message });
-                    return;
-                }
-            }
-            const config = resource.blockConfig;
-            if (!config || !isTemplateConfig(config)) {
-                res.status(400).json({ error: "Not a valid template (missing pages)" });
-                return;
-            }
-            res.json({
-                name: resource.name,
-                displayName: config.name || resource.name,
-                pages: config.pages.map((p) => ({
-                    name: p.name,
-                    slug: p.slug,
-                    blocksCount: p.blocks.length,
-                })),
-                layoutPositions: config.layoutPositions || [],
+        nextProcess.on("error", (err) => {
+            console.error(chalk.red("Failed to start Next.js:"), err.message);
+            process.exit(1);
+        });
+        nextProcess.on("exit", (code) => {
+            process.exit(code || 0);
+        });
+        // Watch for new blocks
+        const chokidar = await import("chokidar");
+        const watcher = chokidar.watch([path.join(projectRoot, "blocks/*/package.json"), path.join(projectRoot, "templates/*/package.json")], { ignoreInitial: true });
+        watcher.on("add", async () => {
+            console.log(chalk.green("\n  New block detected, regenerating preview pages..."));
+            const newResources = await scanResources({
+                strict: false,
+                loadConfig: false,
+                validateSchema: false,
+                loadPreview: false,
+                requirePackageJson: false,
             });
+            regeneratePreviewPages(projectRoot, newResources);
+            console.log(chalk.green("  Preview pages regenerated. Refresh browser.\n"));
         });
-        // Template page preview - renders full page with all blocks
-        app.get("/preview/template/:name/:pageSlug?", async (req, res) => {
-            const { name, pageSlug } = req.params;
-            const resource = resources.find((r) => r.name === name && r.type === "template");
-            if (!resource) {
-                res.status(404).send("Template not found");
-                return;
-            }
-            // Lazy load config if needed
-            if (!resource.blockConfig) {
-                try {
-                    const blockConfig = await loadBlockConfig(resource.path);
-                    if (blockConfig) {
-                        resource.blockConfig = blockConfig;
-                    }
-                }
-                catch (error) {
-                    res.status(500).send(`Failed to load template: ${error.message}`);
-                    return;
-                }
-            }
-            const templateConfig = resource.blockConfig;
-            if (!templateConfig || !isTemplateConfig(templateConfig)) {
-                res.status(400).send("Not a valid template (missing pages)");
-                return;
-            }
-            // Find page (default to first page)
-            const page = pageSlug
-                ? templateConfig.pages.find((p) => p.slug === pageSlug)
-                : templateConfig.pages[0];
-            if (!page) {
-                res.status(404).send(`Page "${pageSlug}" not found in template`);
-                return;
-            }
-            const html = generateTemplatePreviewHTML(resource, templateConfig, page, resources, port);
-            const transformed = await vite.transformIndexHtml(req.url, html);
-            res.send(transformed);
-        });
-        // Preview page - serves HTML that loads block via Vite
-        app.get("/preview/:name", async (req, res) => {
-            const { name } = req.params;
-            const resource = resources.find((r) => r.name === name);
-            if (!resource) {
-                res.status(404).send("Resource not found");
-                return;
-            }
-            // Always load preview data fresh from file
-            const previewPath = path.join(resource.path, "preview.json");
-            if (fs.existsSync(previewPath)) {
-                resource.previewData = fs.readJsonSync(previewPath);
-            }
-            else {
-                resource.previewData = {};
-            }
-            const html = generatePreviewHTML(resource, config, port);
-            const transformed = await vite.transformIndexHtml(req.url, html);
-            res.send(transformed);
-        });
-        // Legacy preview route
-        app.get("/preview/:type/:name", async (req, res) => {
-            const { name } = req.params;
-            const resource = resources.find((r) => r.name === name);
-            if (!resource) {
-                res.status(404).send("Resource not found");
-                return;
-            }
-            // Always load preview data fresh from file
-            const previewPath2 = path.join(resource.path, "preview.json");
-            if (fs.existsSync(previewPath2)) {
-                resource.previewData = fs.readJsonSync(previewPath2);
-            }
-            else {
-                resource.previewData = {};
-            }
-            const html = generatePreviewHTML(resource, config, port);
-            const transformed = await vite.transformIndexHtml(req.url, html);
-            res.send(transformed);
-        });
-        // Home page - serve React dev UI
-        app.get("/", async (req, res) => {
-            const indexPath = path.join(devUiReactPath, "index.html");
-            let html = fs.readFileSync(indexPath, "utf-8");
-            // Transform HTML through Vite for HMR support
-            html = await vite.transformIndexHtml(req.url, html);
-            res.send(html);
-        });
-        // Use Vite's middleware for JS/TS/CSS transforms (handles /dev-ui-react/ via alias)
-        app.use(vite.middlewares);
-        // Start server
-        const server = app.listen(port, () => {
-            spinner.succeed("Development server started (Vite)");
-            console.log(chalk.green.bold("\n─────────────────────────────────────────"));
-            console.log(chalk.green.bold("   Cmssy Dev Server (Vite HMR)"));
-            console.log(chalk.green.bold("─────────────────────────────────────────\n"));
-            const blocks = resources.filter((r) => r.type === "block");
-            const templates = resources.filter((r) => r.type === "template");
-            console.log(chalk.cyan(`   ${blocks.length} blocks, ${templates.length} templates`));
-            console.log(chalk.green(`\n   Local:   ${chalk.cyan(`http://localhost:${port}`)}`));
-            console.log(chalk.green("   Vite HMR enabled ✓"));
-            console.log(chalk.green("   Press Ctrl+C to stop"));
-            console.log(chalk.green.bold("\n─────────────────────────────────────────\n"));
-            // Listen for Ctrl+C directly on stdin (works even if SIGINT is blocked)
-            if (process.stdin.isTTY) {
-                process.stdin.setRawMode(true);
-                process.stdin.resume();
-                process.stdin.on("data", (data) => {
-                    // Ctrl+C = \x03, Ctrl+D = \x04
-                    if (data[0] === 0x03 || data[0] === 0x04) {
-                        console.log(chalk.yellow("\n\nShutting down..."));
-                        process.exit(0);
-                    }
-                });
-            }
-            // Also register SIGINT as fallback
-            process.removeAllListeners("SIGINT");
-            process.on("SIGINT", () => {
-                console.log(chalk.yellow("\n\nShutting down..."));
-                process.exit(0);
-            });
+        // Handle Ctrl+C
+        process.on("SIGINT", () => {
+            nextProcess.kill("SIGINT");
+            watcher.close();
+            process.exit(0);
         });
-        // Watch for new blocks/config changes
-        setupConfigWatcher({ resources, vite, fieldTypes });
     }
     catch (error) {
-        spinner.fail("Failed to start development server");
+        spinner.fail("Failed to start Next.js dev server");
         console.error(chalk.red("Error:"), error);
         process.exit(1);
     }
 }
-function setupConfigWatcher(options) {
-    const { resources, vite, fieldTypes } = options;
-    const projectRoot = process.cwd();
-    // Watch for block.config.ts changes to regenerate types
-    vite.watcher.on("change", async (filePath) => {
-        if (filePath.endsWith("block.config.ts")) {
-            const relativePath = path.relative(projectRoot, filePath);
-            const parts = relativePath.split(path.sep);
-            const resourceName = parts[1]; // blocks/hero/block.config.ts -> hero
-            const resource = resources.find((r) => r.name === resourceName);
-            if (resource) {
-                console.log(chalk.blue(`\n⚙️  Config changed: ${resourceName}`));
-                try {
-                    const blockConfig = await loadBlockConfig(resource.path);
-                    if (blockConfig) {
-                        // Validate schema and show errors
-                        if (blockConfig.schema) {
-                            const validation = await validateBlockSchema(blockConfig.schema, resource.path);
-                            if (!validation.valid) {
-                                console.log(chalk.red(`\n❌ Schema validation errors in ${resourceName}:`));
-                                validation.errors.forEach((err) => {
-                                    console.log(chalk.red(`   • ${err}`));
-                                });
-                                console.log(chalk.yellow(`\nFix the errors above in block.config.ts\n`));
-                            }
-                        }
-                        resource.blockConfig = blockConfig;
-                        resource.displayName = blockConfig.name || resource.name;
-                        resource.description = blockConfig.description;
-                        resource.category = blockConfig.category;
-                        if (blockConfig.schema) {
-                            await generateTypes({
-                                blockPath: resource.path,
-                                schema: blockConfig.schema,
-                                fieldTypes,
-                            });
-                        }
-                        // Update metadata cache
-                        updateBlockInCache(resourceName, resource.type, blockConfig, resource.packageJson?.version);
-                        console.log(chalk.green(`✓ Types regenerated for ${resourceName}\n`));
-                    }
-                }
-                catch (error) {
-                    console.log(chalk.red(`\n❌ Failed to load config for ${resourceName}:`));
-                    console.log(chalk.red(`   ${error.message}\n`));
-                    // Show hint for common errors
-                    if (error.message.includes('SyntaxError') || error.message.includes('Unexpected')) {
-                        console.log(chalk.yellow(`   Hint: Check for syntax errors in block.config.ts\n`));
-                    }
-                }
-            }
-        }
-        // Watch for new package.json (new block detection)
-        if (filePath.endsWith("package.json") && !filePath.includes("node_modules")) {
-            const relativePath = path.relative(projectRoot, filePath);
-            const parts = relativePath.split(path.sep);
-            if ((parts[0] === "blocks" || parts[0] === "templates") && parts.length === 3) {
-                const resourceName = parts[1];
-                if (!resources.find((r) => r.name === resourceName)) {
-                    console.log(chalk.green(`\n✨ New block detected: ${resourceName}`));
-                    // Re-scan resources
-                    try {
-                        const newResources = await scanResources({
-                            strict: false,
-                            loadConfig: true,
-                            validateSchema: true,
-                            loadPreview: true,
-                            requirePackageJson: true,
-                        });
-                        const newResource = newResources.find((r) => r.name === resourceName);
-                        if (newResource) {
-                            resources.push(newResource);
-                            console.log(chalk.green(`✓ ${resourceName} added\n`));
-                        }
-                    }
-                    catch (error) {
-                        console.error(chalk.red(`Failed to scan new block ${resourceName}:`), error);
-                    }
-                }
-            }
-        }
-    });
-}
-function generatePreviewHTML(resource, config, port) {
-    const blockPath = `/${resource.type}s/${resource.name}/src/index.tsx`;
-    const cssPath = `/${resource.type}s/${resource.name}/src/index.css`;
-    return `
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${resource.displayName} - Preview</title>
-  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='20' fill='%23667eea'/%3E%3Ctext x='50' y='70' font-size='60' font-weight='bold' text-anchor='middle' fill='white' font-family='system-ui'%3EC%3C/text%3E%3C/svg%3E">
-  <script type="module" src="/@vite/client"></script>
-  <link rel="stylesheet" href="${cssPath}">
-  <style>
-    body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
-    .preview-header {
-      position: fixed; top: 0; left: 0; right: 0;
-      background: white; border-bottom: 1px solid #e0e0e0;
-      padding: 1rem 2rem; z-index: 1000;
-      display: flex; justify-content: space-between; align-items: center;
-    }
-    .preview-title { font-size: 1.25rem; font-weight: 600; margin: 0; }
-    .preview-back { color: #667eea; text-decoration: none; font-weight: 500; }
-    .preview-container { margin-top: 60px; min-height: calc(100vh - 60px); }
-  </style>
-</head>
-<body>
-  <div class="preview-header">
-    <div class="preview-title">${resource.displayName}</div>
-    <a href="/" class="preview-back" target="_parent">← Back to Home</a>
-  </div>
-  <div class="preview-container">
-    <div id="preview-root"></div>
-  </div>
-
-  <script type="module">
-    import module from '${blockPath}';
-    const element = document.getElementById('preview-root');
-    let props = ${JSON.stringify(resource.previewData || {})};
-    let context = module.mount(element, props);
-
-    // Listen for prop updates from parent
-    window.addEventListener('message', (event) => {
-      if (event.data.type === 'UPDATE_PROPS') {
-        props = event.data.props;
-        if (module.update && context) {
-          module.update(element, props, context);
-        } else {
-          if (context && module.unmount) module.unmount(element, context);
-          context = module.mount(element, props);
-        }
-      }
-    });
-
-    // Vite HMR
-    if (import.meta.hot) {
-      import.meta.hot.accept('${blockPath}', (newModule) => {
-        if (newModule) {
-          console.log('🔄 HMR update');
-          if (context && module.unmount) module.unmount(element, context);
-          context = newModule.default.mount(element, props);
-        }
-      });
-    }
-  </script>
-</body>
-</html>
-  `;
-}
-function generateTemplatePreviewHTML(resource, templateConfig, page, allResources, port) {
-    // Find all blocks used in this page
-    const blockImports = [];
-    const blockMounts = [];
-    // Generate imports and mounts for each block in the page
-    page.blocks.forEach((blockInstance, index) => {
-        // Block type can be "hero" or "@vendor/blocks.hero" - extract the block name
-        const blockName = blockInstance.type.includes('.')
-            ? blockInstance.type.split('.').pop()
-            : blockInstance.type;
-        // Find the block resource
-        const blockResource = allResources.find((r) => r.type === "block" && r.name === blockName);
-        if (blockResource) {
-            const blockPath = `/blocks/${blockName}/src/index.tsx`;
-            const cssPath = `/blocks/${blockName}/src/index.css`;
-            const varName = `block_${index}`;
-            const containerId = `block-${index}`;
-            blockImports.push(`import ${varName} from '${blockPath}';`);
-            blockImports.push(`import '${cssPath}';`);
-            const props = JSON.stringify(blockInstance.content || {});
-            blockMounts.push(`
-        {
-          const el = document.getElementById('${containerId}');
-          if (el && ${varName}.mount) {
-            ${varName}.mount(el, ${props});
-          }
-        }
-      `);
-        }
-    });
-    // Generate layout slot imports/mounts
-    const layoutPositions = templateConfig.layoutPositions || [];
-    const headerSlot = layoutPositions.find((s) => s.position === "header");
-    const footerSlot = layoutPositions.find((s) => s.position === "footer");
-    if (headerSlot) {
-        const blockName = headerSlot.type.includes('.')
-            ? headerSlot.type.split('.').pop()
-            : headerSlot.type;
-        const blockResource = allResources.find((r) => r.type === "block" && r.name === blockName);
-        if (blockResource) {
-            blockImports.push(`import headerBlock from '/blocks/${blockName}/src/index.tsx';`);
-            blockImports.push(`import '/blocks/${blockName}/src/index.css';`);
-            blockMounts.push(`
-        {
-          const el = document.getElementById('layout-header');
-          if (el && headerBlock.mount) {
-            headerBlock.mount(el, ${JSON.stringify(headerSlot.content || {})});
-          }
-        }
-      `);
-        }
-    }
-    if (footerSlot) {
-        const blockName = footerSlot.type.includes('.')
-            ? footerSlot.type.split('.').pop()
-            : footerSlot.type;
-        const blockResource = allResources.find((r) => r.type === "block" && r.name === blockName);
-        if (blockResource) {
-            blockImports.push(`import footerBlock from '/blocks/${blockName}/src/index.tsx';`);
-            blockImports.push(`import '/blocks/${blockName}/src/index.css';`);
-            blockMounts.push(`
-        {
-          const el = document.getElementById('layout-footer');
-          if (el && footerBlock.mount) {
-            footerBlock.mount(el, ${JSON.stringify(footerSlot.content || {})});
-          }
-        }
-      `);
-        }
-    }
-    // Generate page navigation tabs
-    const pageTabs = templateConfig.pages.map((p) => {
-        const isActive = p.slug === page.slug;
-        return `<a href="/preview/template/${resource.name}/${p.slug}" class="page-tab ${isActive ? 'active' : ''}">${p.name}</a>`;
-    }).join('');
-    // Generate block containers HTML
-    const blockContainers = page.blocks.map((_, index) => {
-        return `<div id="block-${index}" class="template-block"></div>`;
-    }).join('\n      ');
-    return `
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${templateConfig.name} - ${page.name}</title>
-  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='20' fill='%23667eea'/%3E%3Ctext x='50' y='70' font-size='60' font-weight='bold' text-anchor='middle' fill='white' font-family='system-ui'%3EC%3C/text%3E%3C/svg%3E">
-  <script type="module" src="/@vite/client"></script>
-  <style>
-    * { box-sizing: border-box; }
-    body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
-
-    .template-header {
-      position: fixed; top: 0; left: 0; right: 0;
-      background: #1a1a2e; color: white;
-      padding: 0.75rem 1.5rem; z-index: 1000;
-      display: flex; justify-content: space-between; align-items: center;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-    }
-    .template-header-left {
-      display: flex; align-items: center; gap: 1.5rem;
-    }
-    .template-title {
-      font-size: 1rem; font-weight: 600; margin: 0;
-      display: flex; align-items: center; gap: 0.5rem;
-    }
-    .template-badge {
-      background: #667eea; color: white;
-      padding: 0.15rem 0.5rem; border-radius: 4px;
-      font-size: 0.7rem; font-weight: 500;
-    }
-    .page-tabs {
-      display: flex; gap: 0.25rem;
-    }
-    .page-tab {
-      color: rgba(255,255,255,0.7); text-decoration: none;
-      padding: 0.4rem 0.75rem; border-radius: 6px;
-      font-size: 0.85rem; font-weight: 500;
-      transition: all 0.2s;
-    }
-    .page-tab:hover { color: white; background: rgba(255,255,255,0.1); }
-    .page-tab.active { color: white; background: #667eea; }
-
-    .template-back {
-      color: rgba(255,255,255,0.8); text-decoration: none;
-      font-size: 0.85rem; font-weight: 500;
-      padding: 0.4rem 0.75rem; border-radius: 6px;
-      transition: all 0.2s;
-    }
-    .template-back:hover { color: white; background: rgba(255,255,255,0.1); }
-
-    .template-content {
-      margin-top: 52px;
-      min-height: calc(100vh - 52px);
-    }
-    .template-block {
-      /* Blocks render their own styles */
-    }
-    #layout-header, #layout-footer {
-      /* Layout slots */
-    }
-
-    .block-error {
-      padding: 2rem;
-      background: #fff3cd;
-      border: 1px solid #ffc107;
-      color: #856404;
-      text-align: center;
-    }
-  </style>
-</head>
-<body>
-  <div class="template-header">
-    <div class="template-header-left">
-      <h1 class="template-title">
-        <span class="template-badge">Template</span>
-        ${templateConfig.name}
-      </h1>
-      <div class="page-tabs">
-        ${pageTabs}
-      </div>
-    </div>
-    <a href="/" class="template-back" target="_parent">← Back to Dev</a>
-  </div>
-
-  <div class="template-content">
-    ${headerSlot ? '<div id="layout-header"></div>' : ''}
-    <main>
-      ${blockContainers || '<div class="block-error">No blocks defined for this page</div>'}
-    </main>
-    ${footerSlot ? '<div id="layout-footer"></div>' : ''}
-  </div>
-
-  <script type="module">
-    ${blockImports.join('\n    ')}
-
-    // Mount all blocks
-    ${blockMounts.join('\n    ')}
-  </script>
-</body>
-</html>
-  `;
-}
 //# sourceMappingURL=dev.js.map