@nqlib/nqui 0.1.0

package/scripts/init-css.js

@@ -0,0 +1,568 @@
+#!/usr/bin/env node
+
+/**
+ * nqui CSS initialization script
+ *
+ * Copies the nqui design system CSS (variables, colors, tokens) to the user's project.
+ * Usage: npx nqui init-css [target-path]
+ */
+
+import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'fs';
+import { join, dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+import { createInterface } from 'readline';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Get the project root (where package.json is)
+const projectRoot = resolve(__dirname, '..');
+const indexCssPath = join(projectRoot, 'src', 'index.css');
+const colorsCssPath = join(projectRoot, 'src', 'styles', 'colors.css');
+const examplesDir = join(projectRoot, 'scripts', 'examples');
+
+// Function to find actual CSS file location for Next.js
+function findNextJsCssFile() {
+  const possiblePaths = [
+    'src/app/globals.css',
+    'app/globals.css',
+    'src/app/layout.css',
+    'app/layout.css',
+  ];
+
+  for (const path of possiblePaths) {
+    const fullPath = join(process.cwd(), path);
+    if (existsSync(fullPath)) {
+      return path;
+    }
+  }
+
+  // Default fallback based on directory structure
+  if (existsSync(join(process.cwd(), 'src', 'app'))) {
+    return 'src/app/globals.css';
+  }
+  return 'app/globals.css';
+}
+
+// Function to find actual CSS file location for Vite
+function findViteCssFile() {
+  const possiblePaths = [
+    'src/index.css',
+    'src/main.css',
+    'src/App.css',
+  ];
+
+  for (const path of possiblePaths) {
+    const fullPath = join(process.cwd(), path);
+    if (existsSync(fullPath)) {
+      return path;
+    }
+  }
+
+  return 'src/index.css';
+}
+
+// Get default path based on project type (uses detection functions)
+function getDefaultPath(projectType) {
+  switch (projectType) {
+    case 'nextjs':
+      return findNextJsCssFile();
+    case 'vite':
+      return findViteCssFile();
+    case 'remix':
+      return 'app/root.css';
+    case 'create-react-app':
+      return 'src/index.css';
+    default:
+      return 'nqui.css';
+  }
+}
+
+function findProjectType() {
+  // Check for framework-specific files
+  if (existsSync(join(process.cwd(), 'next.config.js')) ||
+      existsSync(join(process.cwd(), 'next.config.ts'))) {
+    return 'nextjs';
+  }
+  if (existsSync(join(process.cwd(), 'vite.config.js')) ||
+      existsSync(join(process.cwd(), 'vite.config.ts'))) {
+    return 'vite';
+  }
+  if (existsSync(join(process.cwd(), 'remix.config.js'))) {
+    return 'remix';
+  }
+  if (existsSync(join(process.cwd(), 'src', 'index.css'))) {
+    return 'create-react-app';
+  }
+  return null;
+}
+
+function extractStandaloneCSS() {
+  // Read the source CSS files
+  if (!existsSync(indexCssPath)) {
+    throw new Error(`Source CSS file not found: ${indexCssPath}`);
+  }
+  if (!existsSync(colorsCssPath)) {
+    throw new Error(`Colors CSS file not found: ${colorsCssPath}`);
+  }
+
+  let indexCss = readFileSync(indexCssPath, 'utf-8');
+  let colorsCss = readFileSync(colorsCssPath, 'utf-8');
+
+  // Extract :root and .dark blocks from colors.css (they're wrapped in @layer base)
+  // We need to unwrap them and merge with index.css's :root and .dark
+  const colorsRootMatch = colorsCss.match(/@layer base\s*\{\s*:root\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}\s*\.dark\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}\s*\}/s);
+
+  let colorsRootContent = '';
+  let colorsDarkContent = '';
+
+  if (colorsRootMatch) {
+    colorsRootContent = colorsRootMatch[1].trim();
+    colorsDarkContent = colorsRootMatch[2].trim();
+  } else {
+    // Fallback: try to extract without @layer base wrapper
+    const rootMatch = colorsCss.match(/:root\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/s);
+    const darkMatch = colorsCss.match(/\.dark\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/s);
+    if (rootMatch) colorsRootContent = rootMatch[1].trim();
+    if (darkMatch) colorsDarkContent = darkMatch[1].trim();
+  }
+
+  // Remove imports that require build tools (users should handle these in their own setup)
+  // Keep only the design tokens and variables
+  indexCss = indexCss
+    .replace(/@import\s+["']tailwindcss["'];?\s*\n/g, '')
+    .replace(/@import\s+["']tw-animate-css["'];?\s*\n/g, '')
+    .replace(/@import\s+["']shadcn\/tailwind\.css["'];?\s*\n/g, '')
+    .replace(/@import\s+["']@fontsource-variable\/inter["'];?\s*\n/g, '')
+    .replace(/@import\s+["']\.\/styles\/colors\.css["'];?\s*\n/g, '')
+    .replace(/\/\*\s*Import enhanced color system\s*\*\//g, '');
+
+  // Extract :root and .dark blocks from index.css
+  const indexRootMatch = indexCss.match(/:root\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/s);
+  const indexDarkMatch = indexCss.match(/\.dark\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/s);
+
+  let indexRootContent = '';
+  let indexDarkContent = '';
+
+  if (indexRootMatch) indexRootContent = indexRootMatch[1].trim();
+  if (indexDarkMatch) indexDarkContent = indexDarkMatch[1].trim();
+
+  // Merge :root blocks (colors.css first, then index.css)
+  const mergedRootContent = colorsRootContent
+    ? colorsRootContent + '\n\n    /* Additional variables from index.css */\n    ' + indexRootContent
+    : indexRootContent;
+
+  // Merge .dark blocks (colors.css first, then index.css)
+  const mergedDarkContent = colorsDarkContent
+    ? colorsDarkContent + '\n\n    /* Additional variables from index.css */\n    ' + indexDarkContent
+    : indexDarkContent;
+
+  // Replace :root and .dark in index.css with merged versions
+  if (indexRootMatch) {
+    indexCss = indexCss.replace(/:root\s*\{[^}]+(?:\{[^}]*\}[^}]*)*\}/s, `:root {\n    ${mergedRootContent}\n}`);
+  }
+
+  if (indexDarkMatch) {
+    indexCss = indexCss.replace(/\.dark\s*\{[^}]+(?:\{[^}]*\}[^}]*)*\}/s, `.dark {\n    ${mergedDarkContent}\n}`);
+  }
+
+  // Remove duplicate @layer base blocks (there are two identical ones in index.css)
+  // Match @layer base blocks with proper brace counting
+  const lines = indexCss.split('\n');
+  let inLayerBase = false;
+  let layerBaseStart = -1;
+  let braceCount = 0;
+  const layerBaseBlocks = [];
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (line.includes('@layer base')) {
+      if (!inLayerBase) {
+        inLayerBase = true;
+        layerBaseStart = i;
+        braceCount = (line.match(/\{/g) || []).length - (line.match(/\}/g) || []).length;
+      } else {
+        braceCount += (line.match(/\{/g) || []).length - (line.match(/\}/g) || []).length;
+      }
+    } else if (inLayerBase) {
+      braceCount += (line.match(/\{/g) || []).length - (line.match(/\}/g) || []).length;
+      if (braceCount === 0) {
+        layerBaseBlocks.push({ start: layerBaseStart, end: i });
+        inLayerBase = false;
+      }
+    }
+  }
+
+  // If we found duplicate @layer base blocks, remove all but the first
+  if (layerBaseBlocks.length > 1) {
+    const firstBlock = layerBaseBlocks[0];
+    const firstBlockContent = lines.slice(firstBlock.start, firstBlock.end + 1).join('\n');
+
+    // Check if all blocks are identical
+    const allIdentical = layerBaseBlocks.every(block => {
+      const blockContent = lines.slice(block.start, block.end + 1).join('\n');
+      return blockContent === firstBlockContent;
+    });
+
+    if (allIdentical) {
+      // Remove all but the first block (working backwards to preserve indices)
+      for (let i = layerBaseBlocks.length - 1; i > 0; i--) {
+        const block = layerBaseBlocks[i];
+        lines.splice(block.start, block.end - block.start + 1);
+      }
+      indexCss = lines.join('\n');
+    }
+  }
+
+  // The :root and .dark blocks are already merged into indexCss
+  // Now we just need to add a comment header
+  let combinedCss = indexCss;
+
+  // Add comment before :root if it doesn't already have one
+  if (combinedCss.includes(':root') && !combinedCss.includes('nqui Color System')) {
+    const rootIndex = combinedCss.indexOf(':root');
+    combinedCss = combinedCss.slice(0, rootIndex) +
+                  '/* ============================================\n' +
+                  '   nqui Color System & Design Tokens\n' +
+                  '   ============================================ */\n\n' +
+                  combinedCss.slice(rootIndex);
+  }
+
+  // Clean up extra blank lines
+  combinedCss = combinedCss.replace(/\n{4,}/g, '\n\n\n');
+
+  // Add header comment
+  const header = `/* nqui Design System CSS
+ *
+ * This file contains ALL design tokens, CSS variables, and color scales from nqui.
+ * It includes everything the library needs to style components correctly.
+ *
+ * IMPORTANT: This file does NOT include Tailwind CSS imports.
+ * You must have Tailwind CSS configured in your project.
+ *
+ * For Tailwind CSS v4, add this at the TOP of your CSS file:
+ *   @import "tailwindcss";
+ *
+ * For Tailwind CSS v3, configure it in your tailwind.config.js
+ *
+ * This file includes:
+ * - All CSS variables (--primary, --background, --foreground, etc.)
+ * - Complete color scales (100-600) for all semantic colors
+ * - Light and dark mode support
+ * - Base layer styles
+ * - Utility animations
+ *
+ * Generated by: npx nqui init-css
+ * Do not edit manually - regenerate if nqui is updated
+ */
+
+`;
+
+  return header + combinedCss;
+}
+
+function getFrameworkDirectives(projectType) {
+  switch (projectType) {
+    case 'nextjs':
+      return `@import "tailwindcss";
+@source "./**/*.{js,ts,jsx,tsx,mdx}";
+@source "../components/**/*.{js,ts,jsx,tsx,mdx}";
+@source "../node_modules/@nqlib/nqui/dist/**/*.js";
+@import "../node_modules/tw-animate-css/dist/tw-animate.css";
+@custom-variant dark (&:is(.dark *));
+
+`;
+    case 'vite':
+    case 'create-react-app':
+      return `@import "tailwindcss";
+@import "../node_modules/tw-animate-css/dist/tw-animate.css";
+
+`;
+    case 'remix':
+      return `@import "tailwindcss";
+@import "../node_modules/tw-animate-css/dist/tw-animate.css";
+
+`;
+    default:
+      return '';
+  }
+}
+
+// Function to ask user for input
+function askQuestion(question) {
+  const rl = createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve(answer.trim().toLowerCase());
+    });
+  });
+}
+
+// Function to find Next.js page.tsx file
+function findNextJsPageFile() {
+  const possiblePaths = [
+    'src/app/page.tsx',
+    'app/page.tsx',
+  ];
+
+  for (const path of possiblePaths) {
+    const fullPath = join(process.cwd(), path);
+    if (existsSync(fullPath)) {
+      return path;
+    }
+  }
+
+  // Default fallback based on directory structure
+  if (existsSync(join(process.cwd(), 'src', 'app'))) {
+    return 'src/app/page.tsx';
+  }
+  return 'app/page.tsx';
+}
+
+// Function to find Next.js layout.tsx file
+function findNextJsLayoutFile() {
+  const possiblePaths = [
+    'src/app/layout.tsx',
+    'app/layout.tsx',
+  ];
+
+  for (const path of possiblePaths) {
+    const fullPath = join(process.cwd(), path);
+    if (existsSync(fullPath)) {
+      return path;
+    }
+  }
+
+  // Default fallback based on directory structure
+  if (existsSync(join(process.cwd(), 'src', 'app'))) {
+    return 'src/app/layout.tsx';
+  }
+  return 'app/layout.tsx';
+}
+
+// Function to copy example files for Next.js
+async function copyNextJsExamples() {
+  const pageExamplePath = join(examplesDir, 'nextjs-page.tsx');
+  const layoutExamplePath = join(examplesDir, 'nextjs-layout.tsx');
+
+  if (!existsSync(pageExamplePath) || !existsSync(layoutExamplePath)) {
+    console.log('⚠️  Example files not found. Skipping example copy.');
+    return;
+  }
+
+  const targetPagePath = findNextJsPageFile();
+  const targetLayoutPath = findNextJsLayoutFile();
+  const fullPagePath = resolve(process.cwd(), targetPagePath);
+  const fullLayoutPath = resolve(process.cwd(), targetLayoutPath);
+
+  // Check if files exist
+  const pageExists = existsSync(fullPagePath);
+  const layoutExists = existsSync(fullLayoutPath);
+
+  if (pageExists || layoutExists) {
+    console.log('\n📄 Found existing Next.js files:');
+    if (pageExists) console.log(`   - ${targetPagePath}`);
+    if (layoutExists) console.log(`   - ${targetLayoutPath}`);
+
+    const overwrite = await askQuestion('\n   Do you want to overwrite them with nqui examples? (y/n): ');
+    if (overwrite !== 'y' && overwrite !== 'yes') {
+      console.log('   Skipping example files...');
+      return;
+    }
+  }
+
+  // Create directories if needed
+  const pageDir = dirname(fullPagePath);
+  const layoutDir = dirname(fullLayoutPath);
+  if (!existsSync(pageDir)) {
+    mkdirSync(pageDir, { recursive: true });
+  }
+  if (!existsSync(layoutDir)) {
+    mkdirSync(layoutDir, { recursive: true });
+  }
+
+  // Copy example files
+  try {
+    const pageContent = readFileSync(pageExamplePath, 'utf-8');
+    const layoutContent = readFileSync(layoutExamplePath, 'utf-8');
+
+    writeFileSync(fullPagePath, pageContent, 'utf-8');
+    writeFileSync(fullLayoutPath, layoutContent, 'utf-8');
+
+    console.log(`✅ Copied example page: ${targetPagePath}`);
+    console.log(`✅ Copied example layout: ${targetLayoutPath}`);
+    console.log('\n📝 Note: Make sure to install next-themes if not already installed:');
+    console.log('   npm install next-themes');
+  } catch (error) {
+    console.error('❌ Error copying example files:', error.message);
+  }
+}
+
+async function main() {
+  const args = process.argv.slice(2);
+  const targetPath = args[0];
+
+  try {
+    // Extract standalone CSS
+    const standaloneCss = extractStandaloneCSS();
+
+    let finalTargetPath;
+    let projectType = null;
+
+    if (targetPath) {
+      // User provided a custom path
+      finalTargetPath = resolve(process.cwd(), targetPath);
+      projectType = findProjectType();
+    } else {
+      // Auto-detect project type
+      projectType = findProjectType();
+
+      if (projectType) {
+        const defaultPath = getDefaultPath(projectType);
+        finalTargetPath = resolve(process.cwd(), defaultPath);
+        console.log(`📦 Detected ${projectType} project`);
+        console.log(`   Found CSS file: ${defaultPath}`);
+      } else {
+        // Fallback: create a new CSS file
+        finalTargetPath = resolve(process.cwd(), 'nqui.css');
+        console.log('⚠️  Could not detect project type.');
+        console.log(`   Creating standalone file: nqui.css`);
+        console.log('   You can import this file manually in your app.');
+      }
+    }
+
+    // Create target directory if it doesn't exist
+    const targetDir = dirname(finalTargetPath);
+    if (!existsSync(targetDir)) {
+      mkdirSync(targetDir, { recursive: true });
+    }
+
+    // Get framework-specific directives
+    const frameworkDirectives = projectType ? getFrameworkDirectives(projectType) : '';
+    const fullCss = frameworkDirectives + standaloneCss;
+
+    // Check if target file exists
+    if (existsSync(finalTargetPath)) {
+      console.log(`\n⚠️  File already exists: ${finalTargetPath}`);
+
+      // Read existing content
+      const existingContent = readFileSync(finalTargetPath, 'utf-8');
+
+      // Check if nqui CSS is already present
+      if (existingContent.includes('nqui Design System CSS') ||
+          existingContent.includes('nqui Color System')) {
+        console.log('   ⚠️  nqui CSS already present in file.');
+        const update = await askQuestion('   Do you want to update it? (y/n): ');
+        if (update !== 'y' && update !== 'yes') {
+          console.log('   Skipping...');
+          return;
+        }
+        // Remove old nqui CSS and add new
+        const cleaned = existingContent.replace(
+          /\/\* nqui Design System CSS[\s\S]*?(?=\n\n|\n$|$)/,
+          ''
+        ).replace(
+          /\/\* ============================================[\s\S]*?============================================ \*\/[\s\S]*?}/g,
+          ''
+        );
+        const hasTailwindImport = cleaned.includes('@import "tailwindcss"');
+        if (hasTailwindImport && frameworkDirectives) {
+          writeFileSync(finalTargetPath, cleaned.trim() + '\n\n' + standaloneCss, 'utf-8');
+        } else {
+          writeFileSync(finalTargetPath, fullCss + '\n\n' + cleaned.trim(), 'utf-8');
+        }
+        console.log(`✅ Updated nqui CSS in: ${finalTargetPath}`);
+        console.log('\n✨ Done!');
+        return;
+      }
+
+      // Ask user what to do
+      console.log('\n   What would you like to do?');
+      console.log('   1. Overwrite the file (replace all content)');
+      console.log('   2. Append nqui CSS to the file');
+      console.log('   3. Create a separate file (nqui.css) and import it');
+
+      const choice = await askQuestion('\n   Enter your choice (1/2/3): ');
+
+      if (choice === '1') {
+        // Overwrite
+        const hasTailwindImport = existingContent.includes('@import "tailwindcss"');
+        if (hasTailwindImport && frameworkDirectives) {
+          // Keep existing Tailwind setup, add nqui CSS
+          writeFileSync(finalTargetPath, existingContent + '\n\n' + standaloneCss, 'utf-8');
+        } else {
+          // Replace with framework directives + nqui CSS
+          writeFileSync(finalTargetPath, fullCss, 'utf-8');
+        }
+        console.log(`✅ Updated: ${finalTargetPath}`);
+      } else if (choice === '2') {
+        // Append
+        const hasTailwindImport = existingContent.includes('@import "tailwindcss"');
+        if (hasTailwindImport && frameworkDirectives) {
+          writeFileSync(finalTargetPath, existingContent + '\n\n' + standaloneCss, 'utf-8');
+        } else {
+          writeFileSync(finalTargetPath, fullCss + '\n\n' + existingContent, 'utf-8');
+        }
+        console.log(`✅ Appended nqui CSS to: ${finalTargetPath}`);
+      } else if (choice === '3') {
+        // Create separate file
+        const separatePath = join(dirname(finalTargetPath), 'nqui.css');
+        writeFileSync(separatePath, standaloneCss, 'utf-8');
+        console.log(`✅ Created: ${separatePath}`);
+        console.log(`\n📝 Next step: Import this file in ${finalTargetPath}:`);
+        const relativeSeparatePath = separatePath.replace(process.cwd() + '/', '');
+        const relativeTargetPath = finalTargetPath.replace(process.cwd() + '/', '');
+        const importPath = relativeSeparatePath.replace(dirname(relativeTargetPath) + '/', './');
+        console.log(`   @import "${importPath}";`);
+        console.log('\n✨ Done!');
+        return;
+      } else {
+        console.log('   Invalid choice. Skipping...');
+        return;
+      }
+    } else {
+      // Create new file with framework directives + nqui CSS
+      writeFileSync(finalTargetPath, fullCss, 'utf-8');
+      console.log(`✅ Created: ${finalTargetPath}`);
+      if (frameworkDirectives) {
+        console.log(`   Added ${projectType}-specific Tailwind setup`);
+      }
+    }
+
+    // Provide next steps
+    console.log('\n📝 Next steps:');
+    if (!frameworkDirectives) {
+      console.log('   1. Ensure Tailwind CSS is configured in your project');
+      console.log('   2. Add Tailwind imports at the top of this CSS file if needed');
+    }
+    console.log('   3. The CSS file is ready to use!');
+
+    // Offer to copy example files for Next.js
+    if (projectType === 'nextjs') {
+      const copyExamples = await askQuestion('\n   Would you like to copy example Next.js files (page.tsx, layout.tsx)? (y/n): ');
+      if (copyExamples === 'y' || copyExamples === 'yes') {
+        await copyNextJsExamples();
+      }
+    }
+
+    console.log('\n✨ Done!');
+  } catch (error) {
+    console.error('❌ Error:', error.message);
+    if (error.message.includes('not found')) {
+      console.error('   Please ensure you are running this from the nqui package directory');
+      console.error('   or that the source CSS files exist.');
+    }
+    process.exit(1);
+  }
+}
+
+main().catch((error) => {
+  console.error('❌ Unexpected error:', error);
+  process.exit(1);
+});
+

package/scripts/init-debug-css.js

@@ -0,0 +1,123 @@
+#!/usr/bin/env node
+
+/**
+ * nqui debug CSS initialization script
+ *
+ * Copies the debug CSS file to the user's project.
+ * Usage: npx nqui init-debug-css [target-path]
+ */
+
+import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'fs';
+import { join, dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Get the project root (where package.json is)
+const projectRoot = resolve(__dirname, '..');
+const cssSourcePath = join(projectRoot, 'dist', 'nqui.css');
+
+// Default target paths for common frameworks
+const defaultTargets = {
+  nextjs: 'app/globals.css', // or styles/globals.css
+  vite: 'src/index.css',
+  remix: 'app/root.css',
+  'create-react-app': 'src/index.css',
+};
+
+function findProjectType() {
+  // Check for framework-specific files
+  if (existsSync(join(process.cwd(), 'next.config.js')) ||
+      existsSync(join(process.cwd(), 'next.config.ts'))) {
+    return 'nextjs';
+  }
+  if (existsSync(join(process.cwd(), 'vite.config.js')) ||
+      existsSync(join(process.cwd(), 'vite.config.ts'))) {
+    return 'vite';
+  }
+  if (existsSync(join(process.cwd(), 'remix.config.js'))) {
+    return 'remix';
+  }
+  if (existsSync(join(process.cwd(), 'src', 'index.css'))) {
+    return 'create-react-app';
+  }
+  return null;
+}
+
+function main() {
+  const args = process.argv.slice(2);
+  const targetPath = args[0];
+
+  // Check if CSS source exists
+  if (!existsSync(cssSourcePath)) {
+    console.error('❌ Error: nqui.css not found in dist folder.');
+    console.error('   Please run "npm run build:lib" first to build the library.');
+    process.exit(1);
+  }
+
+  let finalTargetPath;
+
+  if (targetPath) {
+    // User provided a custom path
+    finalTargetPath = resolve(process.cwd(), targetPath);
+  } else {
+    // Auto-detect project type
+    const projectType = findProjectType();
+
+    if (projectType) {
+      const defaultPath = defaultTargets[projectType];
+      finalTargetPath = resolve(process.cwd(), defaultPath);
+      console.log(`📦 Detected ${projectType} project`);
+      console.log(`   Using default path: ${defaultPath}`);
+    } else {
+      // Fallback: create a new CSS file
+      finalTargetPath = resolve(process.cwd(), 'nqui-debug.css');
+      console.log('⚠️  Could not detect project type.');
+      console.log(`   Creating standalone file: nqui-debug.css`);
+      console.log('   You can import this file manually in your app.');
+    }
+  }
+
+  // Read the CSS file
+  const cssContent = readFileSync(cssSourcePath, 'utf-8');
+
+  // Create target directory if it doesn't exist
+  const targetDir = dirname(finalTargetPath);
+  if (!existsSync(targetDir)) {
+    mkdirSync(targetDir, { recursive: true });
+  }
+
+  // Check if target file exists
+  if (existsSync(finalTargetPath)) {
+    console.log(`⚠️  File already exists: ${finalTargetPath}`);
+    console.log('   The CSS will be appended to the existing file.');
+
+    // Append import statement instead of overwriting
+    const existingContent = readFileSync(finalTargetPath, 'utf-8');
+    const importStatement = '\n\n/* nqui debug tools CSS - imported via init script */\n';
+
+    if (!existingContent.includes('nqui-debug') && !existingContent.includes('data-debug-panel')) {
+      writeFileSync(finalTargetPath, existingContent + importStatement + cssContent, 'utf-8');
+      console.log(`✅ Appended nqui debug CSS to: ${finalTargetPath}`);
+    } else {
+      console.log('   CSS already imported. Skipping...');
+    }
+  } else {
+    // Create new file
+    writeFileSync(finalTargetPath, cssContent, 'utf-8');
+    console.log(`✅ Created: ${finalTargetPath}`);
+  }
+
+  // Provide next steps
+  console.log('\n📝 Next steps:');
+  console.log('   1. Import the CSS in your app entry point:');
+  console.log(`      import './${finalTargetPath.replace(process.cwd() + '/', '')}'`);
+  console.log('   2. Use DebugPanel in your app:');
+  console.log('      import { DebugPanel } from "nqui"');
+  console.log('   3. Add DebugPanel to your root component');
+  console.log('\n✨ Done!');
+}
+
+main();
+