gradient-forge 1.0.0 → 1.0.1

package/cli/index.mjs

@@ -567,16 +567,9 @@ const promptSelect = async (title, items, defaultIndex = 0) => {
     }
 
     let index = defaultIndex;
-    let isFirstRender = true;
 
     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) => {
@@ -603,11 +596,11 @@ const promptSelect = async (title, items, defaultIndex = 0) => {
         return;
       }
       if (key === "\u001b[A") {
-        index = (index - 1 + items.length) % items.length;
+        index = index > 0 ? index - 1 : items.length - 1;
         render();
       }
       if (key === "\u001b[B") {
-        index = (index + 1) % items.length;
+        index = index < items.length - 1 ? index + 1 : 0;
         render();
       }
     };
@@ -685,8 +678,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 +694,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 +705,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 +716,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,17 +750,17 @@ 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
+## Quick Setup (Done!)
 
-## Next steps:
+✅ Already configured:
+- app/gradient-forge.css - Theme CSS
+- components/theme/theme-context.tsx - Theme provider + ThemeSwitcher component
+- components/theme/theme-engine.ts - Theme definitions
+- app/globals.css - Theme imported
 
-1. Import the CSS in your layout:
-   import "./app/gradient-forge.css";
+## Add to your app:
 
-2. Wrap your app with ThemeProvider:
+1. Wrap your app with ThemeProvider in layout.tsx:
    import { ThemeProvider } from "./components/theme/theme-context";
    
    export default function RootLayout({ children }) {
@@ -750,15 +773,14 @@ Mode: ${mode}
      );
    }
 
-3. Use the theme in your components:
-   import { useTheme } from "./components/theme/theme-context";
+2. Add the theme switcher anywhere in your app:
+   import { ThemeSwitcher } from "./components/theme/theme-context";
    
-   function MyComponent() {
-     const { themeId, colorMode } = useTheme();
-     // ...
-   }
+   // Add <ThemeSwitcher /> anywhere to let users change themes!
+
+## Done! 🎉 Your app now has gradient themes!
 
-## For more themes, visit: https://gradient-forge.vercel.app
+For more themes, visit: https://gradient-forge.vercel.app
 `;
 };
 

package/package.json

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