@linktr.ee/linkapp 0.0.48 → 0.0.49

package/dist/commands/dev.js

@@ -1,16 +1,13 @@
 import pc from 'picocolors';
 import { createRsbuild, logger } from '@rsbuild/core';
 import { pluginReact } from '@rsbuild/plugin-react';
-import { dirname, resolve, join, extname, relative, sep } from 'node:path';
+import { dirname, join, relative, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { validateLayouts, detectLayouts } from '../lib/build/detect-layouts.js';
 import { loadConfig } from '../lib/config/load-config.js';
 import { detect } from 'detect-port';
-import { existsSync, readFileSync, statSync, writeFileSync, mkdirSync } from 'node:fs';
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
 import chokidar from 'chokidar';
-const writeLine = (message = '') => {
-    process.stdout.write(`${message}\n`);
-};
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 /**
@@ -34,7 +31,7 @@ function createConfigWatcherPlugin(userProjectPath, onConfigChange) {
                     ignorePermissionErrors: true,
                 });
                 const onChange = async (filePath) => {
-                    writeLine(pc.cyan(`\n  ○ ${relative(userProjectPath, filePath)} changed, restarting dev server...\n`));
+                    console.log(pc.cyan(`\n  ○ ${relative(userProjectPath, filePath)} changed, restarting dev server...\n`));
                     await onConfigChange();
                 };
                 watcher.on('change', onChange);
@@ -48,293 +45,79 @@ function createConfigWatcherPlugin(userProjectPath, onConfigChange) {
     };
 }
 /**
- * Creates middleware to serve static assets from the user's public directory
- * while matching the legacy dev server behavior.
+ * Serves app/icon.svg from user's project at /app-icon.svg
  */
-function createPublicDirPlugin(userPublicDir) {
-    const contentTypes = {
-        css: 'text/css',
-        gif: 'image/gif',
-        html: 'text/html',
-        ico: 'image/x-icon',
-        jpeg: 'image/jpeg',
-        jpg: 'image/jpeg',
-        js: 'application/javascript',
-        json: 'application/json',
-        png: 'image/png',
-        svg: 'image/svg+xml',
-        txt: 'text/plain',
-        webp: 'image/webp',
-    };
+function createAppIconPlugin(userProjectPath) {
     return {
-        name: 'linkapp:public-dir',
+        name: 'linkapp:app-icon',
         setup(api) {
             api.onBeforeStartDevServer(async ({ server }) => {
-                if (!existsSync(userPublicDir)) {
-                    return;
-                }
-                const publicDirRoot = resolve(userPublicDir);
+                const iconPath = join(userProjectPath, 'app', 'icon.svg');
                 server.middlewares.use((req, res, next) => {
-                    if (!req.url) {
-                        next();
-                        return;
-                    }
-                    const method = req.method ?? 'GET';
-                    if (method !== 'GET' && method !== 'HEAD') {
-                        next();
-                        return;
-                    }
-                    const [rawPath] = req.url.split('?');
-                    if (!rawPath || rawPath === '/' || rawPath === '') {
-                        next();
-                        return;
-                    }
-                    let decodedPath;
-                    try {
-                        decodedPath = decodeURIComponent(rawPath);
-                    }
-                    catch {
-                        next();
-                        return;
-                    }
-                    const normalizedPath = decodedPath.startsWith('/') ? decodedPath : `/${decodedPath}`;
-                    const targetPath = resolve(publicDirRoot, `.${normalizedPath}`);
-                    const relativePath = relative(publicDirRoot, targetPath);
-                    if (relativePath.startsWith('..') ||
-                        relativePath.includes(`..${sep}`) ||
-                        targetPath === publicDirRoot) {
-                        next();
-                        return;
-                    }
-                    let stats;
-                    try {
-                        stats = statSync(targetPath);
-                    }
-                    catch {
-                        next();
-                        return;
-                    }
-                    if (!stats.isFile()) {
-                        next();
+                    if (req.url === '/app-icon.svg' && existsSync(iconPath)) {
+                        res.setHeader('Content-Type', 'image/svg+xml');
+                        res.setHeader('Cache-Control', 'no-cache');
+                        res.end(readFileSync(iconPath));
                         return;
                     }
-                    const extension = extname(targetPath).slice(1).toLowerCase();
-                    const contentType = (extension && contentTypes[extension]) || 'application/octet-stream';
-                    res.setHeader('Content-Type', contentType);
-                    res.setHeader('Cache-Control', 'no-cache');
-                    if (method === 'HEAD') {
-                        res.end();
-                        return;
-                    }
-                    try {
-                        const content = readFileSync(targetPath);
-                        res.end(content);
-                    }
-                    catch (error) {
-                        next(error);
-                    }
+                    next();
                 });
             });
         },
     };
 }
 /**
- * Generates the expanded entry point dynamically
+ * Generates an entry point for layout components (expanded, featured, featured-carousel)
  */
-function generateExpandedEntryPoint(devServerPath, expandedImportPath) {
-    // Use absolute paths to shared theme files in the dev-server directory
+function generateEntryPoint(devServerPath, config) {
+    const { componentImport, componentName, includeFont = false, includeGroupLayoutOption = false } = config;
     const themePresetsPath = resolve(devServerPath, 'shared/theme-presets');
     const themeUtilsPath = resolve(devServerPath, 'shared/theme-utils');
-    return `import Expanded from "${expandedImportPath}";
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import "@/app/globals.css";
-import { THEME_PRESETS } from "${themePresetsPath}";
-import { getThemeFromUrl, mergeThemeProps } from "${themeUtilsPath}";
-
-// Declare global window properties for theme and font application
-declare global {
-  interface Window {
-    __linkapp_applyTheme?: (variables: Record<string, string>) => void
-    __linkapp_applyFont?: (fontData: {
-      fontFamily: string
-      fontStyle?: string
-      cssUrl?: string
-    }) => void
-  }
-}
-
-// Preview props injected by dev server via Rsbuild define
-declare const __PREVIEW_PROPS__: Record<string, unknown>;
-
-// Extract just the variables from THEME_PRESETS for theme lookups
-const THEME_VARS = Object.fromEntries(
-  Object.entries(THEME_PRESETS).map(([key, { variables }]) => [key, variables])
-);
-
-// Get theme variables from URL (defaults to 'default' theme)
-const themeVariables = getThemeFromUrl(THEME_VARS) || THEME_PRESETS.default.variables;
-
-// Get the selected theme key from URL or default to "default"
-const urlParams = new URLSearchParams(window.location.search);
-const themeKey = urlParams.get("theme") || "default";
-const selectedTheme = THEME_PRESETS[themeKey as keyof typeof THEME_PRESETS] || THEME_PRESETS.default;
-
-// Merge with preview props
-const previewProps = __PREVIEW_PROPS__ || {};
-const mergedProps = mergeThemeProps(themeVariables, previewProps);
-
-// Apply theme CSS variables on mount (always apply, even if default)
-if (window.__linkapp_applyTheme) {
-  window.__linkapp_applyTheme(themeVariables);
-}
-
-// Apply font on mount
+    const fontDeclaration = includeFont
+        ? '    __linkapp_applyFont?: (fontData: { fontFamily: string; fontStyle?: string; cssUrl?: string }) => void'
+        : '';
+    const fontApplication = includeFont
+        ? `
 if (selectedTheme.font && window.__linkapp_applyFont) {
   window.__linkapp_applyFont(selectedTheme.font);
-}
-
-const rootElement = document.getElementById("root");
-if (!rootElement) {
-  throw new Error("Root element not found");
-}
-
-createRoot(rootElement).render(
-  <StrictMode>
-    <Expanded {...mergedProps} />
-  </StrictMode>,
-);
-`;
-}
-/**
- * Generates the featured-carousel entry point (always uses FeaturedCarousel component)
- */
-function generateFeaturedCarouselEntryPoint(devServerPath) {
-    // Use absolute paths to shared theme files in the dev-server directory
-    const themePresetsPath = resolve(devServerPath, 'shared/theme-presets');
-    const themeUtilsPath = resolve(devServerPath, 'shared/theme-utils');
-    return `import FeaturedCarousel from "@/app/featured-carousel";
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import "@/app/globals.css";
-import { THEME_PRESETS } from "${themePresetsPath}";
-import { getThemeFromUrl, mergeThemeProps } from "${themeUtilsPath}";
-
-// Declare global window property for theme application
-declare global {
-  interface Window {
-    __linkapp_applyTheme?: (variables: Record<string, string>) => void
-  }
-}
-
-// Preview props injected by dev server via Rsbuild define
-declare const __PREVIEW_PROPS__: Record<string, unknown>;
-
-// Extract just the variables from THEME_PRESETS for theme lookups
-const THEME_VARS = Object.fromEntries(
-  Object.entries(THEME_PRESETS).map(([key, { variables }]) => [key, variables])
-);
-
-// Get theme variables from URL
-const themeVariables = getThemeFromUrl(THEME_VARS) || THEME_PRESETS.default.variables;
-
-// Merge with preview props
-const previewProps = __PREVIEW_PROPS__ || {};
-const mergedProps = mergeThemeProps(themeVariables, previewProps);
-
-// Apply theme CSS variables on mount (always apply, even if default)
-if (window.__linkapp_applyTheme) {
-  window.__linkapp_applyTheme(themeVariables);
-}
-
-const rootElement = document.getElementById("root");
-if (!rootElement) {
-  throw new Error("Root element not found");
-}
-
-createRoot(rootElement).render(
-  <StrictMode>
-    <FeaturedCarousel {...mergedProps} />
-  </StrictMode>,
-);
-`;
-}
-/**
- * Generates the featured entry point dynamically based on available layouts
- */
-function generateFeaturedEntryPoint(devServerPath, hasFeaturedCarousel) {
-    // Use absolute paths to shared theme files in the dev-server directory
-    const themePresetsPath = resolve(devServerPath, 'shared/theme-presets');
-    const themeUtilsPath = resolve(devServerPath, 'shared/theme-utils');
-    const featuredCarouselImport = hasFeaturedCarousel
-        ? `import FeaturedCarousel from "@/app/featured-carousel";`
+}`
         : '';
-    const componentSelection = hasFeaturedCarousel
-        ? `// Select the appropriate component based on groupLayoutOption parameter
-const LayoutComponent = (groupLayoutOptionParam === 'carousel' && FeaturedCarousel)
-  ? FeaturedCarousel
-  : Featured;`
-        : `// Only Featured layout is available
-const LayoutComponent = Featured;`;
-    return `import Featured from "@/app/featured";
-${featuredCarouselImport}
-import { StrictMode } from "react";
+    return `import ${componentName} from "${componentImport}";
+${config.additionalImports || ''}import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "@/app/globals.css";
 import { THEME_PRESETS } from "${themePresetsPath}";
 import { getThemeFromUrl, mergeThemeProps } from "${themeUtilsPath}";
 
-// Declare global window properties for theme and font application
 declare global {
   interface Window {
     __linkapp_applyTheme?: (variables: Record<string, string>) => void
-    __linkapp_applyFont?: (fontData: {
-      fontFamily: string
-      fontStyle?: string
-      cssUrl?: string
-    }) => void
-  }
+${fontDeclaration}  }
 }
 
-// Preview props injected by dev server via Rsbuild define
 declare const __PREVIEW_PROPS__: Record<string, unknown>;
 
-// Extract just the variables from THEME_PRESETS for theme lookups
 const THEME_VARS = Object.fromEntries(
   Object.entries(THEME_PRESETS).map(([key, { variables }]) => [key, variables])
 );
 
-// Get theme variables and groupLayoutOption from URL
 const params = new URLSearchParams(window.location.search);
-const groupLayoutOptionParam = params.get('groupLayoutOption');
+${includeGroupLayoutOption ? `const groupLayoutOptionParam = params.get('groupLayoutOption');\n` : ''}const themeKey = params.get("theme") || "default";
 const themeVariables = getThemeFromUrl(THEME_VARS) || THEME_PRESETS.default.variables;
-
-// Get the selected theme for font application
-const themeKey = params.get("theme") || "default";
 const selectedTheme = THEME_PRESETS[themeKey as keyof typeof THEME_PRESETS] || THEME_PRESETS.default;
 
-// Merge with preview props and add groupLayoutOption
 const previewProps = __PREVIEW_PROPS__ || {};
-const mergedProps = mergeThemeProps(themeVariables, previewProps, {
-  groupLayoutOption: groupLayoutOptionParam || undefined,
-});
+const mergedProps = mergeThemeProps(themeVariables, previewProps${includeGroupLayoutOption ? ', { groupLayoutOption: groupLayoutOptionParam || undefined }' : ''});
 
-// Apply theme CSS variables on mount (always apply, even if default)
 if (window.__linkapp_applyTheme) {
   window.__linkapp_applyTheme(themeVariables);
 }
-
-// Apply font on mount
-if (selectedTheme.font && window.__linkapp_applyFont) {
-  window.__linkapp_applyFont(selectedTheme.font);
-}
+${fontApplication}
 
 const rootElement = document.getElementById("root");
-if (!rootElement) {
-  throw new Error("Root element not found");
-}
+if (!rootElement) throw new Error("Root element not found");
 
-${componentSelection}
+${config.componentSelection || `const LayoutComponent = ${componentName};`}
 
 createRoot(rootElement).render(
   <StrictMode>
@@ -353,41 +136,78 @@ export async function devCommand(options) {
     });
     try {
         const startTime = Date.now();
+        // Detect headless mode
+        const layoutDetection = detectLayouts(userProjectPath);
+        const isHeadless = layoutDetection.layouts.length === 0;
+        if (isHeadless) {
+            console.log(`
+${pc.cyan('📋 Headless LinkApp - No frontend to serve')}
+${pc.dim('This LinkApp only contains settings schema')}
+`);
+            try {
+                const config = loadConfig(userProjectPath);
+                if (config.settings) {
+                    console.log(`${pc.bold('Settings schema:')}
+${JSON.stringify(config.settings, null, 2)}
+`);
+                }
+            }
+            catch (error) {
+                console.log(`${pc.yellow('⚠ Warning: Could not load config')}
+${pc.dim(`  ${error instanceof Error ? error.message : error}`)}
+`);
+            }
+            console.log(pc.dim('To develop UI, work in linktr.ee-profiles repo\n'));
+            return;
+        }
         // Validate layouts exist
         const validation = validateLayouts(userProjectPath);
         if (!validation.valid) {
-            writeLine(pc.red('✗ Invalid project structure'));
+            console.log(pc.red('✗ Invalid project structure'));
             for (const error of validation.errors) {
-                writeLine(pc.red(`  ${error}`));
+                console.log(pc.red(`  ${error}`));
             }
             process.exit(1);
         }
         // Get dev server path (needed for generating entry points and later for Rsbuild config)
         const devServerPath = resolve(__dirname, '../../dev-server');
-        // Detect available layouts for dynamic entry generation
-        const layoutDetection = detectLayouts(userProjectPath);
-        const hasFeatured = layoutDetection.layouts.some(l => l.name === 'featured');
-        const hasFeaturedCarousel = layoutDetection.layouts.some(l => l.name === 'featured-carousel');
-        const expandedLayout = layoutDetection.layouts.find(l => l.name === 'expanded');
+        // Detect available layouts for dynamic entry generation (already detected above for headless check)
+        const hasFeatured = layoutDetection.layouts.some((l) => l.name === 'featured');
+        const hasFeaturedCarousel = layoutDetection.layouts.some((l) => l.name === 'featured-carousel');
+        const expandedLayout = layoutDetection.layouts.find((l) => l.name === 'expanded');
         const expandedImportPath = expandedLayout
             ? `@/app/${expandedLayout.fileName.replace(/\.(jsx?|tsx?)$/, '')}`
             : '@/app/expanded';
         // Generate dynamic entry points in .linkapp directory
-        const linkappDir = join(userProjectPath, ".linkapp");
+        const linkappDir = join(userProjectPath, '.linkapp');
         if (!existsSync(linkappDir)) {
             mkdirSync(linkappDir, { recursive: true });
         }
-        const expandedEntryPath = join(linkappDir, "dev-expanded-main.tsx");
-        const featuredEntryPath = join(linkappDir, "dev-featured-main.tsx");
-        const featuredCarouselEntryPath = join(linkappDir, "dev-featured-carousel-main.tsx");
-        writeFileSync(expandedEntryPath, generateExpandedEntryPoint(devServerPath, expandedImportPath), "utf-8");
-        // Only generate featured entry if the layout exists
+        const expandedEntryPath = join(linkappDir, 'dev-expanded-main.tsx');
+        const featuredEntryPath = join(linkappDir, 'dev-featured-main.tsx');
+        const featuredCarouselEntryPath = join(linkappDir, 'dev-featured-carousel-main.tsx');
+        writeFileSync(expandedEntryPath, generateEntryPoint(devServerPath, {
+            componentImport: expandedImportPath,
+            componentName: 'Expanded',
+            includeFont: true,
+        }), 'utf-8');
         if (hasFeatured) {
-            writeFileSync(featuredEntryPath, generateFeaturedEntryPoint(devServerPath, hasFeaturedCarousel), "utf-8");
+            writeFileSync(featuredEntryPath, generateEntryPoint(devServerPath, {
+                componentImport: '@/app/featured',
+                componentName: 'Featured',
+                includeFont: true,
+                includeGroupLayoutOption: true,
+                additionalImports: hasFeaturedCarousel ? `import FeaturedCarousel from "@/app/featured-carousel";\n` : '',
+                componentSelection: hasFeaturedCarousel
+                    ? `const LayoutComponent = (groupLayoutOptionParam === 'carousel' && FeaturedCarousel) ? FeaturedCarousel : Featured;`
+                    : undefined,
+            }), 'utf-8');
         }
-        // Only generate featured-carousel entry if the layout exists
         if (hasFeaturedCarousel) {
-            writeFileSync(featuredCarouselEntryPath, generateFeaturedCarouselEntryPoint(devServerPath), "utf-8");
+            writeFileSync(featuredCarouselEntryPath, generateEntryPoint(devServerPath, {
+                componentImport: '@/app/featured-carousel',
+                componentName: 'FeaturedCarousel',
+            }), 'utf-8');
         }
         // Helper to load config (called on initial start and on config changes)
         const loadProjectConfig = () => {
@@ -396,82 +216,40 @@ export async function devCommand(options) {
                 return {
                     previewProps: config.preview_props || {},
                     settingsConfig: config.settings || {},
+                    manifestConfig: config.manifest || { name: 'LinkApp', tagline: '' },
                 };
             }
             catch (error) {
-                writeLine(pc.yellow('⚠ Warning: Could not load config, using default preview props'));
-                writeLine(pc.dim(`  ${error instanceof Error ? error.message : error}`));
+                console.log(pc.yellow('⚠ Warning: Could not load config, using default preview props'));
+                console.log(pc.dim(`  ${error instanceof Error ? error.message : error}`));
                 return {
                     previewProps: {},
                     settingsConfig: {},
+                    manifestConfig: { name: 'LinkApp', tagline: '' },
                 };
             }
         };
         // Load config initially
-        let { previewProps, settingsConfig } = loadProjectConfig();
+        let { previewProps, settingsConfig, manifestConfig } = loadProjectConfig();
         const requestedPort = options.port || 3000;
         const availablePort = await detect(requestedPort);
         // Show warning if the requested port was occupied
         if (requestedPort !== availablePort) {
-            writeLine(pc.yellow(`  ⚠ Port ${requestedPort} is in use, using ${availablePort} instead`));
-            writeLine();
+            console.log(pc.yellow(`  ⚠ Port ${requestedPort} is in use, using ${availablePort} instead`));
+            console.log();
         }
         const port = availablePort;
         const userPublicDir = join(userProjectPath, 'public');
         const printReadyMessage = (readyTime, urls) => {
-            writeLine();
-            writeLine(pc.bold(pc.cyan('  LinkApp')) + pc.dim(' ready'));
-            writeLine();
+            console.log();
+            console.log(pc.bold(pc.cyan('  LinkApp')) + pc.dim(' ready'));
+            console.log();
             if (urls.length > 0) {
-                writeLine(`  ${pc.green('➜')}  ${pc.bold('Local:')}   ${pc.cyan(urls[0])}`);
+                console.log(`  ${pc.green('➜')}  ${pc.bold('Local:')}   ${pc.cyan(urls[0])}`);
             }
-            writeLine();
-            writeLine(pc.green(`  ✓ Ready in ${readyTime}s`));
+            console.log();
+            console.log(pc.green(`  ✓ Ready in ${readyTime}s`));
         };
-        const setupKeyboardShortcuts = (handlers) => {
-            if (!process.stdin.isTTY) {
-                return () => { };
-            }
-            const handleData = (data) => {
-                if (data === '\u0003') {
-                    void handlers.exit();
-                    return;
-                }
-                const key = data.trim().toLowerCase();
-                if (key === '') {
-                    return;
-                }
-                switch (key) {
-                    case 'r':
-                        void handlers.restart();
-                        break;
-                    case 'u':
-                        handlers.showUrls();
-                        break;
-                    case 'c':
-                        handlers.clear();
-                        break;
-                    case 'q':
-                        void handlers.exit();
-                        break;
-                    default:
-                        break;
-                }
-            };
-            process.stdin.setRawMode(true);
-            process.stdin.resume();
-            process.stdin.setEncoding('utf8');
-            process.stdin.on('data', handleData);
-            return () => {
-                process.stdin.off('data', handleData);
-                if (process.stdin.isTTY) {
-                    process.stdin.setRawMode(false);
-                }
-                process.stdin.pause();
-            };
-        };
-        // Callback wrapper for config watcher (will be assigned after restartServer is defined)
-        let restartCallback;
         // Helper to create Rsbuild instance with current config values
         const createRsbuildInstance = async () => {
             return await createRsbuild({
@@ -481,26 +259,24 @@ export async function devCommand(options) {
                     },
                     plugins: [
                         pluginReact(),
-                        createPublicDirPlugin(userPublicDir),
-                        createConfigWatcherPlugin(userProjectPath, async () => {
-                            await restartCallback?.();
-                        }),
+                        createAppIconPlugin(userProjectPath),
+                        // Use lazy callback to avoid TDZ error - restartServer is defined after this function
+                        createConfigWatcherPlugin(userProjectPath, () => restartServer()),
                     ],
                     source: {
                         entry: {
-                            index: resolve(devServerPath, "preview/main.tsx"),
+                            index: resolve(devServerPath, 'preview/main.tsx'),
                             expanded: expandedEntryPath,
                             sheet: expandedEntryPath, // Legacy alias for expanded layout
                             ...(hasFeatured ? { featured: featuredEntryPath } : {}),
-                            ...(hasFeaturedCarousel
-                                ? { "featured-carousel": featuredCarouselEntryPath }
-                                : {}),
+                            ...(hasFeaturedCarousel ? { 'featured-carousel': featuredCarouselEntryPath } : {}),
                         },
                         define: {
                             __PREVIEW_PROPS__: JSON.stringify(previewProps),
                             __SETTINGS_CONFIG__: JSON.stringify(settingsConfig),
+                            __MANIFEST_CONFIG__: JSON.stringify(manifestConfig),
                             __HAS_FEATURED__: JSON.stringify(hasFeatured),
-                            __HAS_CAROUSEL__: JSON.stringify(hasFeaturedCarousel),
+                            __HAS_FEATURED_CAROUSEL__: JSON.stringify(hasFeaturedCarousel),
                         },
                     },
                     resolve: {
@@ -510,6 +286,7 @@ export async function devCommand(options) {
                         dedupe: ['react', 'react-dom'],
                     },
                     html: {
+                        title: manifestConfig.name || 'LinkApp',
                         template({ entryName }) {
                             const templates = {
                                 index: resolve(devServerPath, 'index.html'),
@@ -535,24 +312,26 @@ export async function devCommand(options) {
                     tools: {
                         postcss: (opts) => {
                             // Load PostCSS config from dev-server directory
-                            opts.postcssOptions = {
-                                ...opts.postcssOptions,
-                                config: resolve(devServerPath, 'postcss.config.mjs'),
-                            };
+                            const postcssOptions = (opts.postcssOptions ?? {});
+                            postcssOptions.config = resolve(devServerPath, 'postcss.config.mjs');
+                            opts.postcssOptions = postcssOptions;
                             return opts;
                         },
                         rspack: (config) => {
                             // Add linkapp package's node_modules to module resolution paths
                             // This allows dev-server files to import dependencies from @linktr.ee/linkapp
                             // In workspaces, dependencies might be hoisted, so we check multiple locations
-                            config.resolve = config.resolve || {};
-                            const possibleNodeModulesPaths = [
-                                resolve(__dirname, '../../node_modules'), // Package root (when published standalone)
-                                resolve(__dirname, '../../../node_modules'), // Monorepo root (workspace)
-                                resolve(__dirname, '../../../../node_modules'), // Parent monorepo
-                                'node_modules', // Current directory
+                            config.resolve = config.resolve ?? {};
+                            // Get the linkapp package root (from dist/commands/ go up 2 levels)
+                            const linkappPackageRoot = resolve(__dirname, '../..');
+                            const additionalNodeModulesPaths = [
+                                resolve(linkappPackageRoot, 'node_modules'), // Package's own node_modules
+                                resolve(linkappPackageRoot, '../node_modules'), // packages/node_modules (if hoisted to packages level)
+                                resolve(linkappPackageRoot, '../../node_modules'), // Root monorepo node_modules
                             ];
-                            config.resolve.modules = possibleNodeModulesPaths;
+                            // Append to existing modules array rather than replacing
+                            const existingModules = config.resolve.modules ?? ['node_modules'];
+                            config.resolve.modules = [...additionalNodeModulesPaths, ...existingModules];
                             return config;
                         },
                     },
@@ -562,87 +341,52 @@ export async function devCommand(options) {
         // Create initial Rsbuild instance
         let rsbuild = await createRsbuildInstance();
         let currentServer;
-        let cleanupShortcuts;
         let isRestarting = false;
         let isShuttingDown = false;
-        let currentUrls = [];
-        let lastReadyTime = '';
-        const startServer = async (startedAt) => {
-            const result = await rsbuild.startDevServer();
-            currentServer = result;
-            currentUrls = result.urls;
-            lastReadyTime = ((Date.now() - startedAt) / 1000).toFixed(1);
-            printReadyMessage(lastReadyTime, currentUrls);
-        };
         const restartServer = async () => {
             if (isShuttingDown || isRestarting || !currentServer) {
                 return;
             }
             isRestarting = true;
-            writeLine(pc.cyan('  ↻ Restarting dev server...'));
+            const restartStartTime = Date.now();
+            console.log(pc.cyan('  ↻ Restarting dev server...'));
             try {
-                // Close current server
                 await currentServer.server.close();
-                // Reload config to get fresh preview props
                 const freshConfig = loadProjectConfig();
                 previewProps = freshConfig.previewProps;
                 settingsConfig = freshConfig.settingsConfig;
-                // Recreate Rsbuild instance with fresh config
+                manifestConfig = freshConfig.manifestConfig;
                 rsbuild = await createRsbuildInstance();
-                // Start new server
-                const restartStart = Date.now();
-                await startServer(restartStart);
+                currentServer = await rsbuild.startDevServer();
+                const restartTime = ((Date.now() - restartStartTime) / 1000).toFixed(1);
+                printReadyMessage(restartTime, currentServer.urls);
             }
             catch (error) {
                 currentServer = undefined;
-                writeLine(pc.red('✗ Failed to restart dev server'));
-                writeLine(pc.dim(`  ${error instanceof Error ? error.message : error}`));
+                console.log(pc.red('✗ Failed to restart dev server'));
+                console.log(pc.dim(`  ${error instanceof Error ? error.message : error}`));
             }
             finally {
                 isRestarting = false;
             }
         };
-        const showUrls = () => {
-            writeLine();
-            if (currentUrls.length > 0) {
-                writeLine(`  ${pc.green('➜')}  ${pc.bold('Local:')}   ${pc.cyan(currentUrls[0])}`);
-            }
-            writeLine();
-        };
-        const clearConsole = () => {
-            console.clear();
-            if (lastReadyTime) {
-                printReadyMessage(lastReadyTime, currentUrls);
-            }
-        };
         const shutdown = async () => {
-            if (isShuttingDown) {
+            if (isShuttingDown)
                 return;
-            }
             isShuttingDown = true;
-            cleanupShortcuts?.();
             try {
-                if (currentServer) {
-                    await currentServer.server.close();
-                }
+                await currentServer?.server.close();
             }
-            catch (closeError) {
-                writeLine(pc.red('✗ Error while closing dev server'));
-                writeLine(pc.dim(`  ${closeError instanceof Error ? closeError.message : closeError}`));
+            catch {
+                // Ignore close errors during shutdown
             }
             finally {
                 process.exit(0);
             }
         };
-        // Assign restart callback for config watcher
-        restartCallback = restartServer;
-        await startServer(startTime);
-        cleanupShortcuts = setupKeyboardShortcuts({
-            restart: restartServer,
-            showUrls,
-            clear: clearConsole,
-            exit: shutdown,
-        });
+        currentServer = await rsbuild.startDevServer();
+        const readyTime = ((Date.now() - startTime) / 1000).toFixed(1);
+        printReadyMessage(readyTime, currentServer.urls);
         process.on('SIGINT', () => {
             void shutdown();
         });
@@ -650,7 +394,7 @@ export async function devCommand(options) {
         await new Promise(() => { });
     }
     catch (error) {
-        writeLine(pc.red('✗ Failed to start server'));
+        console.log(pc.red('✗ Failed to start server'));
         console.error(pc.red('✗ Error:'), error);
         process.exit(1);
     }