gradient-forge 1.0.0 → 1.0.2

package/cli/index.mjs

@@ -567,16 +567,10 @@ const promptSelect = async (title, items, defaultIndex = 0) => {
     }
 
     let index = defaultIndex;
-    let isFirstRender = true;
+    let buffer = "";
 
     const render = () => {
-      if (isFirstRender) {
-        process.stdout.write("\x1b[s");
-        isFirstRender = false;
-      } else {
-        process.stdout.write("\x1b[u");
-        process.stdout.write("\x1b[0J");
-      }
+      process.stdout.write("\x1b[2J\x1b[H");
       log(title);
       log("");
       items.forEach((item, i) => {
@@ -588,27 +582,35 @@ const promptSelect = async (title, items, defaultIndex = 0) => {
     };
 
     const onKey = (data) => {
-      const key = data.toString();
-      if (key === "\u0003") {
-        process.stdin.setRawMode(false);
-        process.stdin.pause();
-        process.exit(1);
-      }
-      if (key === "\r") {
+      buffer += data.toString();
+      
+      // Handle escape sequences for arrow keys
+      if (buffer.includes("\u001b[A")) {
+        // Up arrow
+        index = index > 0 ? index - 1 : items.length - 1;
+        buffer = "";
+        render();
+      } else if (buffer.includes("\u001b[B")) {
+        // Down arrow  
+        index = index < items.length - 1 ? index + 1 : 0;
+        buffer = "";
+        render();
+      } else if (buffer.includes("\r") || buffer.includes("\n")) {
+        // Enter key
         process.stdin.setRawMode(false);
         process.stdin.pause();
         process.stdin.removeListener("data", onKey);
         process.stdout.write("\x1b[?25h");
         resolve(items[index]);
         return;
-      }
-      if (key === "\u001b[A") {
-        index = (index - 1 + items.length) % items.length;
-        render();
-      }
-      if (key === "\u001b[B") {
-        index = (index + 1) % items.length;
-        render();
+      } else if (buffer.includes("\u0003")) {
+        // Ctrl+C
+        process.stdin.setRawMode(false);
+        process.stdin.pause();
+        process.exit(1);
+      } else {
+        // Clear buffer after processing
+        buffer = "";
       }
     };
 
@@ -685,8 +687,13 @@ type ThemeContextValue = {
   colorMode: ColorMode;
   setThemeId: (themeId: ThemeId) => void;
   setColorMode: (mode: ColorMode) => void;
+  themes: { id: ThemeId; label: string }[];
 };
 
+const allThemes: { id: ThemeId; label: string }[] = [
+${themes.map(t => `  { id: "${t.id}", label: "${t.label}" },`).join("\n")}
+];
+
 const ThemeContext = createContext<ThemeContextValue | null>(null);
 
 export const ThemeProvider = ({ children }: { children: ReactNode }) => {
@@ -696,7 +703,7 @@ export const ThemeProvider = ({ children }: { children: ReactNode }) => {
   useEffect(() => {
     const root = document.documentElement;
     root.classList.remove("dark", "light");
-    root.classList.remove(${themes.map(t => `"${t.id}"`).join(", ")});
+${themes.map(t => `    root.classList.remove("${t.id}");`).join("\n")}
     
     root.classList.add(colorMode, themeId);
     root.setAttribute("data-theme", themeId);
@@ -707,7 +714,7 @@ export const ThemeProvider = ({ children }: { children: ReactNode }) => {
   }, [themeId, colorMode]);
 
   return (
-    <ThemeContext.Provider value={{ themeId, colorMode, setThemeId, setColorMode }}>
+    <ThemeContext.Provider value={{ themeId, colorMode, setThemeId, setColorMode, themes: allThemes }}>
       {children}
     </ThemeContext.Provider>
   );
@@ -718,6 +725,31 @@ export const useTheme = () => {
   if (!ctx) throw new Error("useTheme must be used within ThemeProvider");
   return ctx;
 };
+
+// Simple theme switcher component - drop into your app!
+export function ThemeSwitcher() {
+  const { themeId, colorMode, setThemeId, setColorMode, themes } = useTheme();
+  
+  return (
+    <div className="flex items-center gap-2 p-2 rounded-lg bg-card border">
+      <select 
+        value={themeId} 
+        onChange={(e) => setThemeId(e.target.value as ThemeId)}
+        className="bg-background text-foreground px-2 py-1 rounded border"
+      >
+        {themes.map(t => (
+          <option key={t.id} value={t.id}>{t.label}</option>
+        ))}
+      </select>
+      <button 
+        onClick={() => setColorMode(colorMode === "dark" ? "light" : "dark")}
+        className="px-2 py-1 rounded bg-primary text-primary-foreground"
+      >
+        {colorMode === "dark" ? "🌙" : "☀️"}
+      </button>
+    </div>
+  );
+}
 `;
 };
 
@@ -727,41 +759,73 @@ const generateSetupInstructions = (projectRoot, themeId, mode, themeLabel) => {
 Theme: ${themeLabel}
 Mode: ${mode}
 
-## What was created:
-- components/theme/theme-engine.ts - Theme definitions
-- components/theme/theme-context.tsx - React context provider
-- app/gradient-forge.css - Theme CSS variables
-
-## Next steps:
+✅ All files created automatically!
+✅ Theme applied! 
 
-1. Import the CSS in your layout:
-   import "./app/gradient-forge.css";
+Your app now has beautiful gradient themes! 🎉
 
-2. Wrap your app with ThemeProvider:
-   import { ThemeProvider } from "./components/theme/theme-context";
-   
-   export default function RootLayout({ children }) {
-     return (
-       <html lang="en" className="${mode} ${themeId}" data-theme="${themeId}" data-color-mode="${mode}">
-         <body>
-           <ThemeProvider>{children}</ThemeProvider>
-         </body>
-       </html>
-     );
-   }
-
-3. Use the theme in your components:
-   import { useTheme } from "./components/theme/theme-context";
-   
-   function MyComponent() {
-     const { themeId, colorMode } = useTheme();
-     // ...
-   }
-
-## For more themes, visit: https://gradient-forge.vercel.app
+For more themes, visit: https://gradient-forge.vercel.app
 `;
 };
 
+const autoInjectLayout = (projectRoot, themeId, mode) => {
+  const layoutPaths = [
+    path.join(projectRoot, "app", "layout.tsx"),
+    path.join(projectRoot, "src", "app", "layout.tsx"),
+  ];
+  
+  for (const layoutPath of layoutPaths) {
+    if (fs.existsSync(layoutPath)) {
+      let content = fs.readFileSync(layoutPath, "utf8");
+      
+      // Check if already has ThemeProvider
+      if (content.includes("ThemeProvider")) {
+        return { success: true, path: layoutPath, message: "Already configured" };
+      }
+      
+      // Add import - insert after the first import or at the start
+      const importStatement = `import { ThemeProvider } from "./components/theme/theme-context";`;
+      
+      // Find position after the last import line
+      const lines = content.split('\n');
+      let insertIndex = 0;
+      for (let i = 0; i < lines.length; i++) {
+        if (lines[i].trim().startsWith('import ') && !lines[i].includes('from "') && !lines[i].includes("from '")) {
+          continue;
+        }
+        if (lines[i].trim().startsWith('import ')) {
+          insertIndex = i + 1;
+        }
+      }
+      
+      // Insert the import
+      if (insertIndex > 0 && lines[insertIndex - 1].trim() !== '') {
+        lines.splice(insertIndex, 0, importStatement);
+      } else {
+        lines.splice(insertIndex, 0, importStatement);
+      }
+      content = lines.join('\n');
+      
+      // Wrap body content with ThemeProvider
+      content = content.replace(
+        /(<body[^>]*>)([\s\S]*)(<\/body>)/,
+        '$1<ThemeProvider>$2</ThemeProvider>$3'
+      );
+      
+      // Add theme classes to html tag - use className for JSX
+      content = content.replace(
+        /<html[^>]*>/,
+        `<html lang="en" className="${mode} ${themeId}" data-theme="${themeId}" data-color-mode="${mode}">`
+      );
+      
+      fs.writeFileSync(layoutPath, content);
+      return { success: true, path: layoutPath };
+    }
+  }
+  
+  return { success: false, message: "No layout.tsx found" };
+};
+
 const init = async () => {
   log("");
   log("🎨 Gradient Forge CLI - Initialize Theme");
@@ -841,17 +905,23 @@ const init = async () => {
     }
   }
   
-  // Generate setup instructions
-  const instructions = generateSetupInstructions(projectRoot, themeId, mode, selectedTheme.label);
-  const readmePath = path.join(projectRoot, "GRADIENT_FORGE_SETUP.md");
-  fs.writeFileSync(readmePath, instructions);
-  logSuccess(`Created setup guide: ${path.relative(projectRoot, readmePath)}`);
-  
+  // Auto-inject into layout.tsx
+  const layoutResult = autoInjectLayout(projectRoot, themeId, mode);
+  if (layoutResult.success) {
+    logSuccess(`Updated layout: ${path.relative(projectRoot, layoutResult.path)}`);
+  } else {
+    logInfo("Note: Could not auto-detect layout.tsx");
+  }
+
   log("");
   log("======================================");
   logSuccess("Theme setup complete! 🎉");
   log("");
-  log(instructions);
+  log(`Theme: ${selectedTheme.label} (${mode})`);
+  log("");
+  log("Your app now has beautiful gradient themes!");
+  log("Run: npm run dev");
+  log("");
 };
 
 const exportCommand = async () => {

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "gradient-forge",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A production-ready gradient theming framework for shadcn/ui with CLI support",
-  "main": "index.js",
   "type": "module",
   "bin": {
     "gradient-forge": "./cli/index.mjs"