gradient-forge 1.0.0

package/cli/index.mjs

@@ -0,0 +1,1141 @@
+#!/usr/bin/env node
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import readline from "node:readline";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const templateDir = path.join(__dirname, "templates");
+
+const args = process.argv.slice(2);
+const command = args[0] ?? "help";
+
+const readArg = (flag, fallback) => {
+  const idx = args.indexOf(flag);
+  if (idx === -1) return fallback;
+  const next = args[idx + 1];
+  if (!next || next.startsWith("--")) return fallback;
+  return next;
+};
+
+const hasFlag = (flag) => args.includes(flag);
+
+const log = (message) => process.stdout.write(`${message}\n`);
+const logError = (message) => process.stderr.write(`${message}\n`);
+const logSuccess = (message) => process.stdout.write(`✅ ${message}\n`);
+const logInfo = (message) => process.stdout.write(`ℹ️  ${message}\n`);
+
+const themes = [
+  { id: "theme-nitro-mint-apple", label: "Mint Apple", preview: "linear-gradient(145deg, #2d8e74, #70c76a, #d5ef91)" },
+  { id: "theme-nitro-citrus-sherbert", label: "Citrus Sherbert", preview: "linear-gradient(145deg, #e67d35, #f7bb54, #fff0a3)" },
+  { id: "theme-nitro-retro-raincloud", label: "Retro Raincloud", preview: "linear-gradient(145deg, #4e6077, #6f86a0, #98aec3)" },
+  { id: "theme-nitro-hanami", label: "Hanami", preview: "linear-gradient(145deg, #995382, #c77ca9, #f0b7ce)" },
+  { id: "theme-nitro-sunrise", label: "Sunrise", preview: "linear-gradient(145deg, #e25263, #ef8a57, #ffd07a)" },
+  { id: "theme-nitro-cotton-candy", label: "Cotton Candy", preview: "linear-gradient(145deg, #5aa2ff, #9b78f0, #f39bca)" },
+  { id: "theme-nitro-lofi-vibes", label: "Lofi Vibes", preview: "linear-gradient(145deg, #3f476c, #59608f, #7a6f9f)" },
+  { id: "theme-nitro-desert-khaki", label: "Desert Khaki", preview: "linear-gradient(145deg, #6d5c49, #8f7a5d, #b49f76)" },
+  { id: "theme-nitro-sunset", label: "Sunset", preview: "linear-gradient(145deg, #3f1b4d, #8c335f, #f4874f)" },
+  { id: "theme-nitro-chroma-glow", label: "Chroma Glow", preview: "linear-gradient(145deg, #2d3eff, #a726fa, #00c7ff)" },
+  { id: "theme-nitro-forest", label: "Forest", preview: "linear-gradient(145deg, #163f2e, #246b49, #59a86c)" },
+  { id: "theme-nitro-crimson", label: "Crimson", preview: "linear-gradient(145deg, #2d050f, #681126, #a82435)" },
+  { id: "theme-nitro-midnight-blurple", label: "Midnight Blurple", preview: "linear-gradient(145deg, #0f1232, #25366f, #5757dc)" },
+  { id: "theme-nitro-mars", label: "Mars", preview: "linear-gradient(145deg, #2e140f, #5e261d, #9c422f)" },
+  { id: "theme-nitro-dusk", label: "Dusk", preview: "linear-gradient(145deg, #1b1632, #3b2d5b, #745495)" },
+  { id: "theme-nitro-under-the-sea", label: "Under The Sea", preview: "linear-gradient(145deg, #0b2242, #0d4f69, #2b848e)" },
+  { id: "theme-nitro-retro-storm", label: "Retro Storm", preview: "linear-gradient(145deg, #1d2b3a, #354657, #55667a)" },
+  { id: "theme-nitro-neon-nights", label: "Neon Nights", preview: "linear-gradient(145deg, #05061a, #180f52, #00bde6)" },
+  { id: "theme-nitro-strawberry-lemonade", label: "Strawberry Lemonade", preview: "linear-gradient(145deg, #8f1847, #cc3f5e, #efc141)" },
+  { id: "theme-nitro-aurora", label: "Aurora", preview: "linear-gradient(145deg, #083142, #1b7e74, #5fbf75)" },
+  { id: "theme-nitro-sepia", label: "Sepia", preview: "linear-gradient(145deg, #35261d, #5d4636, #927454)" },
+];
+
+const themeTokens = {
+  "theme-nitro-mint-apple": {
+    "--background": "160 45% 18%",
+    "--foreground": "150 40% 95%",
+    "--card": "160 40% 20%",
+    "--card-foreground": "150 40% 95%",
+    "--popover": "160 40% 20%",
+    "--popover-foreground": "150 40% 95%",
+    "--primary": "145 50% 55%",
+    "--primary-foreground": "160 40% 10%",
+    "--secondary": "100 45% 68%",
+    "--secondary-foreground": "160 40% 10%",
+    "--muted": "160 35% 25%",
+    "--muted-foreground": "150 30% 70%",
+    "--accent": "100 45% 68%",
+    "--accent-foreground": "160 40% 10%",
+    "--destructive": "0 84% 60%",
+    "--destructive-foreground": "0 0% 98%",
+    "--border": "160 30% 30%",
+    "--input": "160 30% 30%",
+    "--ring": "145 50% 55%",
+    "--app-gradient": "radial-gradient(1050px 560px at -10% -20%, hsl(156 58% 60% / 0.3), transparent 60%), radial-gradient(940px 520px at 114% 0%, hsl(96 64% 62% / 0.22), transparent 58%), linear-gradient(160deg, hsl(156 27% 13%) 0%, hsl(149 23% 13%) 50%, hsl(136 21% 10%) 100%)",
+    "--app-surface-tint": "hsl(145 50% 55% / 0.1)",
+  },
+  "theme-nitro-citrus-sherbert": {
+    "--background": "25 70% 15%",
+    "--foreground": "35 60% 95%",
+    "--card": "25 65% 18%",
+    "--card-foreground": "35 60% 95%",
+    "--popover": "25 65% 18%",
+    "--popover-foreground": "35 60% 95%",
+    "--primary": "25 80% 55%",
+    "--primary-foreground": "25 70% 10%",
+    "--secondary": "45 85% 65%",
+    "--secondary-foreground": "25 70% 10%",
+    "--muted": "25 50% 25%",
+    "--muted-foreground": "35 40% 70%",
+    "--accent": "55 90% 75%",
+    "--accent-foreground": "25 70% 10%",
+    "--destructive": "0 84% 60%",
+    "--destructive-foreground": "0 0% 98%",
+    "--border": "25 45% 30%",
+    "--input": "25 45% 30%",
+    "--ring": "25 80% 55%",
+    "--app-gradient": "radial-gradient(1060px 560px at -10% -20%, hsl(28 97% 66% / 0.3), transparent 58%), radial-gradient(920px 520px at 112% 4%, hsl(53 95% 68% / 0.22), transparent 58%), linear-gradient(160deg, hsl(34 29% 12%) 0%, hsl(32 24% 13%) 50%, hsl(27 21% 10%) 100%)",
+    "--app-surface-tint": "hsl(25 80% 55% / 0.1)",
+  },
+  "theme-nitro-retro-raincloud": {
+    "--background": "215 25% 20%",
+    "--foreground": "210 30% 95%",
+    "--card": "215 22% 23%",
+    "--card-foreground": "210 30% 95%",
+    "--popover": "215 22% 23%",
+    "--popover-foreground": "210 30% 95%",
+    "--primary": "210 25% 55%",
+    "--primary-foreground": "215 25% 15%",
+    "--secondary": "210 20% 65%",
+    "--secondary-foreground": "215 25% 15%",
+    "--muted": "215 20% 30%",
+    "--muted-foreground": "210 20% 70%",
+    "--accent": "210 20% 65%",
+    "--accent-foreground": "215 25% 15%",
+    "--destructive": "0 84% 60%",
+    "--destructive-foreground": "0 0% 98%",
+    "--border": "215 20% 35%",
+    "--input": "215 20% 35%",
+    "--ring": "210 25% 55%",
+    "--app-gradient": "radial-gradient(1080px 560px at -8% -20%, hsl(215 36% 66% / 0.28), transparent 60%), radial-gradient(940px 520px at 114% 2%, hsl(206 30% 64% / 0.2), transparent 58%), linear-gradient(160deg, hsl(217 21% 13%) 0%, hsl(214 18% 13%) 52%, hsl(211 16% 10%) 100%)",
+    "--app-surface-tint": "hsl(210 25% 55% / 0.1)",
+  },
+  "theme-nitro-hanami": {
+    "--background": "330 30% 20%",
+    "--foreground": "330 30% 95%",
+    "--card": "330 25% 23%",
+    "--card-foreground": "330 30% 95%",
+    "--popover": "330 25% 23%",
+    "--popover-foreground": "330 30% 95%",
+    "--primary": "330 40% 55%",
+    "--primary-foreground": "330 30% 10%",
+    "--secondary": "340 45% 65%",
+    "--secondary-foreground": "330 30% 10%",
+    "--muted": "330 20% 30%",
+    "--muted-foreground": "330 25% 70%",
+    "--accent": "350 50% 75%",
+    "--accent-foreground": "330 30% 10%",
+    "--destructive": "0 84% 60%",
+    "--destructive-foreground": "0 0% 98%",
+    "--border": "330 20% 35%",
+    "--input": "330 20% 35%",
+    "--ring": "330 40% 55%",
+    "--app-gradient": "radial-gradient(1040px 560px at -10% -20%, hsl(319 65% 69% / 0.3), transparent 58%), radial-gradient(920px 520px at 112% 2%, hsl(339 58% 75% / 0.22), transparent 58%), linear-gradient(160deg, hsl(323 27% 12%) 0%, hsl(315 23% 13%) 50%, hsl(304 19% 10%) 100%)",
+    "--app-surface-tint": "hsl(330 40% 55% / 0.1)",
+  },
+  "theme-nitro-sunrise": {
+    "--background": "350 50% 18%",
+    "--foreground": "30 60% 95%",
+    "--card": "350 45% 21%",
+    "--card-foreground": "30 60% 95%",
+    "--popover": "350 45% 21%",
+    "--popover-foreground": "30 60% 95%",
+    "--primary": "355 75% 60%",
+    "--primary-foreground": "350 50% 10%",
+    "--secondary": "25 85% 65%",
+    "--secondary-foreground": "350 50% 10%",
+    "--muted": "350 30% 28%",
+    "--muted-foreground": "30 40% 75%",
+    "--accent": "45 90% 73%",
+    "--accent-foreground": "350 50% 10%",
+    "--destructive": "0 84% 60%",
+    "--destructive-foreground": "0 0% 98%",
+    "--border": "350 25% 35%",
+    "--input": "350 25% 35%",
+    "--ring": "355 75% 60%",
+    "--app-gradient": "radial-gradient(1080px 560px at -12% -20%, hsl(2 88% 66% / 0.28), transparent 58%), radial-gradient(920px 520px at 114% 4%, hsl(35 96% 67% / 0.24), transparent 58%), linear-gradient(160deg, hsl(9 30% 12%) 0%, hsl(13 26% 13%) 50%, hsl(21 21% 10%) 100%)",
+    "--app-surface-tint": "hsl(355 75% 60% / 0.1)",
+  },
+  "theme-nitro-cotton-candy": {
+    "--background": "220 50% 20%",
+    "--foreground": "220 40% 95%",
+    "--card": "220 45% 23%",
+    "--card-foreground": "220 40% 95%",
+    "--popover": "220 45% 23%",
+    "--popover-foreground": "220 40% 95%",
+    "--primary": "220 70% 65%",
+    "--primary-foreground": "220 50% 10%",
+    "--secondary": "270 60% 70%",
+    "--secondary-foreground": "220 50% 10%",
+    "--muted": "220 30% 30%",
+    "--muted-foreground": "220 30% 75%",
+    "--accent": "330 65% 75%",
+    "--accent-foreground": "220 50% 10%",
+    "--destructive": "0 84% 60%",
+    "--destructive-foreground": "0 0% 98%",
+    "--border": "220 25% 35%",
+    "--input": "220 25% 35%",
+    "--ring": "220 70% 65%",
+    "--app-gradient": "radial-gradient(1040px 560px at -10% -20%, hsl(208 95% 74% / 0.28), transparent 58%), radial-gradient(940px 520px at 112% 4%, hsl(328 87% 73% / 0.24), transparent 58%), linear-gradient(160deg, hsl(247 30% 12%) 0%, hsl(258 26% 13%) 48%, hsl(286 20% 10%) 100%)",
+    "--app-surface-tint": "hsl(220 70% 65% / 0.1)",
+  },
+  "theme-nitro-lofi-vibes": {
+    "--background": "230 25% 18%",
+    "--foreground": "230 20% 95%",
+    "--card": "230 22% 21%",
+    "--card-foreground": "230 20% 95%",
+    "--popover": "230 22% 21%",
+    "--popover-foreground": "230 20% 95%",
+    "--primary": "230 25% 55%",
+    "--primary-foreground": "230 25% 10%",
+    "--secondary": "260 20% 60%",
+    "--secondary-foreground": "230 25% 10%",
+    "--muted": "230 15% 28%",
+    "--muted-foreground": "230 15% 70%",
+    "--accent": "280 20% 55%",
+    "--accent-foreground": "230 25% 10%",
+    "--destructive": "0 84% 60%",
+    "--destructive-foreground": "0 0% 98%",
+    "--border": "230 15% 33%",
+    "--input": "230 15% 33%",
+    "--ring": "230 25% 55%",
+    "--app-gradient": "radial-gradient(1060px 560px at -10% -20%, hsl(228 44% 63% / 0.26), transparent 60%), radial-gradient(940px 520px at 112% 2%, hsl(267 38% 64% / 0.2), transparent 58%), linear-gradient(160deg, hsl(236 26% 13%) 0%, hsl(232 22% 13%) 50%, hsl(258 16% 10%) 100%)",
+    "--app-surface-tint": "hsl(230 25% 55% / 0.1)",
+  },
+  "theme-nitro-desert-khaki": {
+    "--background": "35 25% 18%",
+    "--foreground": "35 30% 95%",
+    "--card": "35 22% 21%",
+    "--card-foreground": "35 30% 95%",
+    "--popover": "35 22% 21%",
+    "--popover-foreground": "35 30% 95%",
+    "--primary": "35 25% 50%",
+    "--primary-foreground": "35 25% 10%",
+    "--secondary": "40 20% 58%",
+    "--secondary-foreground": "35 25% 10%",
+    "--muted": "35 15% 28%",
+    "--muted-foreground": "35 20% 70%",
+    "--accent": "45 25% 60%",
+    "--accent-foreground": "35 25% 10%",
+    "--destructive": "0 84% 60%",
+    "--destructive-foreground": "0 0% 98%",
+    "--border": "35 15% 33%",
+    "--input": "35 15% 33%",
+    "--ring": "35 25% 50%",
+    "--app-gradient": "radial-gradient(1060px 560px at -10% -18%, hsl(34 44% 58% / 0.26), transparent 58%), radial-gradient(920px 520px at 112% 2%, hsl(48 33% 63% / 0.18), transparent 58%), linear-gradient(160deg, hsl(37 23% 13%) 0%, hsl(34 20% 13%) 52%, hsl(30 16% 10%) 100%)",
+    "--app-surface-tint": "hsl(35 25% 50% / 0.1)",
+  },
+  "theme-nitro-sunset": {
+    "--background": "320 40% 15%",
+    "--foreground": "25 60% 95%",
+    "--card": "320 35% 18%",
+    "--card-foreground": "25 60% 95%",
+    "--popover": "320 35% 18%",
+    "--popover-foreground": "25 60% 95%",
+    "--primary": "335 60% 50%",
+    "--primary-foreground": "320 40% 10%",
+    "--secondary": "20 70% 55%",
+    "--secondary-foreground": "320 40% 10%",
+    "--muted": "320 25% 25%",
+    "--muted-foreground": "25 40% 75%",
+    "--accent": "25 85% 62%",
+    "--accent-foreground": "320 40% 10%",
+    "--destructive": "0 84% 60%",
+    "--destructive-foreground": "0 0% 98%",
+    "--border": "320 20% 32%",
+    "--input": "320 20% 32%",
+    "--ring": "335 60% 50%",
+    "--app-gradient": "radial-gradient(1040px 560px at -12% -20%, hsl(325 84% 62% / 0.31), transparent 58%), radial-gradient(900px 520px at 112% 6%, hsl(24 97% 66% / 0.24), transparent 58%), linear-gradient(160deg, hsl(304 29% 12%) 0%, hsl(298 24% 13%) 50%, hsl(287 22% 10%) 100%)",
+    "--app-surface-tint": "hsl(335 60% 50% / 0.1)",
+  },
+  "theme-nitro-chroma-glow": {
+    "--background": "246 33% 11%",
+    "--foreground": "240 40% 95%",
+    "--card": "246 28% 13%",
+    "--card-foreground": "240 40% 95%",
+    "--popover": "246 28% 13%",
+    "--popover-foreground": "240 40% 95%",
+    "--primary": "286 94% 67%",
+    "--primary-foreground": "246 36% 10%",
+    "--secondary": "195 100% 61%",
+    "--secondary-foreground": "246 36% 10%",
+    "--muted": "246 30% 22%",
+    "--muted-foreground": "240 25% 75%",
+    "--accent": "195 100% 61%",
+    "--accent-foreground": "246 36% 10%",
+    "--destructive": "0 84% 60%",
+    "--destructive-foreground": "0 0% 98%",
+    "--border": "246 25% 28%",
+    "--input": "246 25% 28%",
+    "--ring": "286 94% 67%",
+    "--app-gradient": "radial-gradient(1020px 560px at -12% -18%, hsl(226 95% 63% / 0.32), transparent 58%), radial-gradient(940px 520px at 112% 2%, hsl(194 100% 62% / 0.28), transparent 58%), linear-gradient(160deg, hsl(246 36% 12%) 0%, hsl(272 30% 12%) 50%, hsl(305 24% 10%) 100%)",
+    "--app-surface-tint": "hsl(286 94% 67% / 0.1)",
+  },
+  "theme-nitro-forest": {
+    "--background": "150 40% 12%",
+    "--foreground": "140 30% 95%",
+    "--card": "150 35% 15%",
+    "--card-foreground": "140 30% 95%",
+    "--popover": "150 35% 15%",
+    "--popover-foreground": "140 30% 95%",
+    "--primary": "145 45% 45%",
+    "--primary-foreground": "150 40% 10%",
+    "--secondary": "100 40% 55%",
+    "--secondary-foreground": "150 40% 10%",
+    "--muted": "150 25% 22%",
+    "--muted-foreground": "140 20% 70%",
+    "--accent": "85 45% 52%",
+    "--accent-foreground": "150 40% 10%",
+    "--destructive": "0 84% 60%",
+    "--destructive-foreground": "0 0% 98%",
+    "--border": "150 20% 28%",
+    "--input": "150 20% 28%",
+    "--ring": "145 45% 45%",
+    "--app-gradient": "radial-gradient(1080px 560px at -10% -20%, hsl(145 62% 53% / 0.3), transparent 60%), radial-gradient(920px 520px at 112% 2%, hsl(170 48% 53% / 0.22), transparent 58%), linear-gradient(160deg, hsl(149 30% 12%) 0%, hsl(146 26% 12%) 52%, hsl(160 21% 10%) 100%)",
+    "--app-surface-tint": "hsl(145 45% 45% / 0.1)",
+  },
+  "theme-nitro-crimson": {
+    "--background": "345 60% 8%",
+    "--foreground": "345 40% 95%",
+    "--card": "345 55% 11%",
+    "--card-foreground": "345 40% 95%",
+    "--popover": "345 55% 11%",
+    "--popover-foreground": "345 40% 95%",
+    "--primary": "350 65% 45%",
+    "--primary-foreground": "345 60% 98%",
+    "--secondary": "350 50% 55%",
+    "--secondary-foreground": "345 60% 98%",
+    "--muted": "345 30% 18%",
+    "--muted-foreground": "345 25% 70%",
+    "--accent": "355 55% 60%",
+    "--accent-foreground": "345 60% 10%",
+    "--destructive": "0 84% 60%",
+    "--destructive-foreground": "0 0% 98%",
+    "--border": "345 25% 25%",
+    "--input": "345 25% 25%",
+    "--ring": "350 65% 45%",
+    "--app-gradient": "radial-gradient(1040px 560px at -12% -18%, hsl(352 85% 59% / 0.34), transparent 58%), radial-gradient(900px 520px at 112% 4%, hsl(9 84% 58% / 0.22), transparent 58%), linear-gradient(160deg, hsl(349 37% 11%) 0%, hsl(342 31% 12%) 50%, hsl(326 24% 10%) 100%)",
+    "--app-surface-tint": "hsl(350 65% 45% / 0.1)",
+  },
+  "theme-nitro-midnight-blurple": {
+    "--background": "235 26% 11%",
+    "--foreground": "235 30% 95%",
+    "--card": "235 22% 12%",
+    "--card-foreground": "235 30% 95%",
+    "--popover": "235 22% 12%",
+    "--popover-foreground": "235 30% 95%",
+    "--primary": "241 92% 70%",
+    "--primary-foreground": "235 26% 98%",
+    "--secondary": "210 92% 65%",
+    "--secondary-foreground": "235 26% 98%",
+    "--muted": "235 20% 20%",
+    "--muted-foreground": "235 20% 72%",
+    "--accent": "210 92% 65%",
+    "--accent-foreground": "235 26% 98%",
+    "--destructive": "0 84% 60%",
+    "--destructive-foreground": "0 0% 98%",
+    "--border": "235 18% 25%",
+    "--input": "235 18% 25%",
+    "--ring": "241 92% 70%",
+    "--app-gradient": "radial-gradient(1050px 560px at -10% -20%, hsl(246 92% 66% / 0.3), transparent 60%), radial-gradient(920px 520px at 112% 2%, hsl(201 92% 63% / 0.22), transparent 58%), linear-gradient(160deg, hsl(232 29% 12%) 0%, hsl(231 24% 12%) 50%, hsl(228 22% 10%) 100%)",
+    "--app-surface-tint": "hsl(241 92% 70% / 0.1)",
+  },
+  "theme-nitro-mars": {
+    "--background": "12 30% 10%",
+    "--foreground": "20 40% 95%",
+    "--card": "12 25% 12%",
+    "--card-foreground": "20 40% 95%",
+    "--popover": "12 25% 12%",
+    "--popover-foreground": "20 40% 95%",
+    "--primary": "14 74% 61%",
+    "--primary-foreground": "12 30% 10%",
+    "--secondary": "22 78% 62%",
+    "--secondary-foreground": "12 30% 10%",
+    "--muted": "12 25% 20%",
+    "--muted-foreground": "20 25% 72%",
+    "--accent": "22 78% 62%",
+    "--accent-foreground": "12 30% 10%",
+    "--destructive": "0 84% 60%",
+    "--destructive-foreground": "0 0% 98%",
+    "--border": "12 20% 25%",
+    "--input": "12 20% 25%",
+    "--ring": "14 74% 61%",
+    "--app-gradient": "radial-gradient(1040px 560px at -10% -20%, hsl(12 78% 62% / 0.3), transparent 60%), radial-gradient(920px 520px at 112% 2%, hsl(22 78% 60% / 0.22), transparent 58%), linear-gradient(160deg, hsl(13 29% 11%) 0%, hsl(11 25% 11%) 52%, hsl(8 21% 9%) 100%)",
+    "--app-surface-tint": "hsl(14 74% 61% / 0.1)",
+  },
+  "theme-nitro-dusk": {
+    "--background": "256 23% 11%",
+    "--foreground": "256 30% 95%",
+    "--card": "256 20% 13%",
+    "--card-foreground": "256 30% 95%",
+    "--popover": "256 20% 13%",
+    "--popover-foreground": "256 30% 95%",
+    "--primary": "263 53% 67%",
+    "--primary-foreground": "256 23% 10%",
+    "--secondary": "299 44% 64%",
+    "--secondary-foreground": "256 23% 10%",
+    "--muted": "256 20% 22%",
+    "--muted-foreground": "256 20% 72%",
+    "--accent": "299 44% 64%",
+    "--accent-foreground": "256 23% 10%",
+    "--destructive": "0 84% 60%",
+    "--destructive-foreground": "0 0% 98%",
+    "--border": "256 15% 28%",
+    "--input": "256 15% 28%",
+    "--ring": "263 53% 67%",
+    "--app-gradient": "radial-gradient(1020px 560px at -10% -20%, hsl(262 60% 62% / 0.28), transparent 58%), radial-gradient(920px 520px at 112% 2%, hsl(298 48% 60% / 0.2), transparent 58%), linear-gradient(160deg, hsl(256 26% 12%) 0%, hsl(256 23% 12%) 50%, hsl(258 20% 10%) 100%)",
+    "--app-surface-tint": "hsl(263 53% 67% / 0.1)",
+  },
+  "theme-nitro-under-the-sea": {
+    "--background": "205 33% 10%",
+    "--foreground": "190 40% 95%",
+    "--card": "205 28% 12%",
+    "--card-foreground": "190 40% 95%",
+    "--popover": "205 28% 12%",
+    "--popover-foreground": "190 40% 95%",
+    "--primary": "186 70% 58%",
+    "--primary-foreground": "205 33% 10%",
+    "--secondary": "197 74% 55%",
+    "--secondary-foreground": "205 33% 10%",
+    "--muted": "205 28% 20%",
+    "--muted-foreground": "190 25% 72%",
+    "--accent": "197 74% 55%",
+    "--accent-foreground": "205 33% 10%",
+    "--destructive": "0 84% 60%",
+    "--destructive-foreground": "0 0% 98%",
+    "--border": "205 22% 25%",
+    "--input": "205 22% 25%",
+    "--ring": "186 70% 58%",
+    "--app-gradient": "radial-gradient(1040px 560px at -10% -20%, hsl(186 75% 58% / 0.3), transparent 58%), radial-gradient(920px 520px at 112% 2%, hsl(197 76% 55% / 0.22), transparent 58%), linear-gradient(160deg, hsl(204 30% 11%) 0%, hsl(205 26% 11%) 50%, hsl(206 22% 9%) 100%)",
+    "--app-surface-tint": "hsl(186 70% 58% / 0.1)",
+  },
+  "theme-nitro-retro-storm": {
+    "--background": "216 20% 11%",
+    "--foreground": "216 20% 95%",
+    "--card": "216 18% 13%",
+    "--card-foreground": "216 20% 95%",
+    "--popover": "216 18% 13%",
+    "--popover-foreground": "216 20% 95%",
+    "--primary": "213 33% 66%",
+    "--primary-foreground": "216 20% 10%",
+    "--secondary": "214 26% 62%",
+    "--secondary-foreground": "216 20% 10%",
+    "--muted": "216 18% 22%",
+    "--muted-foreground": "216 15% 70%",
+    "--accent": "214 26% 62%",
+    "--accent-foreground": "216 20% 10%",
+    "--destructive": "0 84% 60%",
+    "--destructive-foreground": "0 0% 98%",
+    "--border": "216 15% 28%",
+    "--input": "216 15% 28%",
+    "--ring": "213 33% 66%",
+    "--app-gradient": "radial-gradient(1040px 560px at -10% -20%, hsl(213 35% 64% / 0.26), transparent 58%), radial-gradient(920px 520px at 112% 2%, hsl(214 27% 62% / 0.2), transparent 58%), linear-gradient(160deg, hsl(216 24% 11%) 0%, hsl(215 20% 11%) 50%, hsl(214 18% 9%) 100%)",
+    "--app-surface-tint": "hsl(213 33% 66% / 0.1)",
+  },
+  "theme-nitro-neon-nights": {
+    "--background": "245 36% 10%",
+    "--foreground": "260 40% 95%",
+    "--card": "245 31% 12%",
+    "--card-foreground": "260 40% 95%",
+    "--popover": "245 31% 12%",
+    "--popover-foreground": "260 40% 95%",
+    "--primary": "292 96% 66%",
+    "--primary-foreground": "245 36% 10%",
+    "--secondary": "190 94% 56%",
+    "--secondary-foreground": "245 36% 10%",
+    "--muted": "245 30% 18%",
+    "--muted-foreground": "260 25% 75%",
+    "--accent": "190 94% 56%",
+    "--accent-foreground": "245 36% 10%",
+    "--destructive": "0 84% 60%",
+    "--destructive-foreground": "0 0% 98%",
+    "--border": "245 25% 25%",
+    "--input": "245 25% 25%",
+    "--ring": "292 96% 66%",
+    "--app-gradient": "radial-gradient(1040px 560px at -10% -20%, hsl(280 92% 62% / 0.28), transparent 58%), radial-gradient(920px 520px at 112% 2%, hsl(191 94% 56% / 0.24), transparent 58%), linear-gradient(160deg, hsl(233 36% 10%) 0%, hsl(229 32% 9%) 50%, hsl(227 28% 8%) 100%)",
+    "--app-surface-tint": "hsl(292 96% 66% / 0.1)",
+  },
+  "theme-nitro-strawberry-lemonade": {
+    "--background": "334 31% 10%",
+    "--foreground": "40 70% 95%",
+    "--card": "334 27% 12%",
+    "--card-foreground": "40 70% 95%",
+    "--popover": "334 27% 12%",
+    "--popover-foreground": "40 70% 95%",
+    "--primary": "342 83% 67%",
+    "--primary-foreground": "334 31% 10%",
+    "--secondary": "46 89% 63%",
+    "--secondary-foreground": "334 31% 10%",
+    "--muted": "334 27% 20%",
+    "--muted-foreground": "40 40% 75%",
+    "--accent": "46 89% 63%",
+    "--accent-foreground": "334 31% 10%",
+    "--destructive": "0 84% 60%",
+    "--destructive-foreground": "0 0% 98%",
+    "--border": "334 22% 28%",
+    "--input": "334 22% 28%",
+    "--ring": "342 83% 67%",
+    "--app-gradient": "radial-gradient(1040px 560px at -10% -20%, hsl(342 86% 64% / 0.3), transparent 58%), radial-gradient(920px 520px at 112% 2%, hsl(46 90% 62% / 0.24), transparent 58%), linear-gradient(160deg, hsl(334 30% 11%) 0%, hsl(333 26% 11%) 50%, hsl(331 22% 9%) 100%)",
+    "--app-surface-tint": "hsl(342 83% 67% / 0.1)",
+  },
+  "theme-nitro-aurora": {
+    "--background": "174 25% 10%",
+    "--foreground": "160 50% 95%",
+    "--card": "174 22% 12%",
+    "--card-foreground": "160 50% 95%",
+    "--popover": "174 22% 12%",
+    "--popover-foreground": "160 50% 95%",
+    "--primary": "164 63% 57%",
+    "--primary-foreground": "174 25% 10%",
+    "--secondary": "145 62% 58%",
+    "--secondary-foreground": "174 25% 10%",
+    "--muted": "174 22% 20%",
+    "--muted-foreground": "160 30% 72%",
+    "--accent": "145 62% 58%",
+    "--accent-foreground": "174 25% 10%",
+    "--destructive": "0 84% 60%",
+    "--destructive-foreground": "0 0% 98%",
+    "--border": "174 18% 25%",
+    "--input": "174 18% 25%",
+    "--ring": "164 63% 57%",
+    "--app-gradient": "radial-gradient(1040px 560px at -10% -20%, hsl(164 66% 56% / 0.28), transparent 58%), radial-gradient(920px 520px at 112% 2%, hsl(145 64% 56% / 0.22), transparent 58%), linear-gradient(160deg, hsl(176 28% 11%) 0%, hsl(172 24% 11%) 50%, hsl(169 20% 9%) 100%)",
+    "--app-surface-tint": "hsl(164 63% 57% / 0.1)",
+  },
+  "theme-nitro-sepia": {
+    "--background": "27 24% 11%",
+    "--foreground": "35 30% 95%",
+    "--card": "27 21% 13%",
+    "--card-foreground": "35 30% 95%",
+    "--popover": "27 21% 13%",
+    "--popover-foreground": "35 30% 95%",
+    "--primary": "28 44% 62%",
+    "--primary-foreground": "27 24% 10%",
+    "--secondary": "36 39% 62%",
+    "--secondary-foreground": "27 24% 10%",
+    "--muted": "27 18% 20%",
+    "--muted-foreground": "35 20% 70%",
+    "--accent": "36 39% 62%",
+    "--accent-foreground": "27 24% 10%",
+    "--destructive": "0 84% 60%",
+    "--destructive-foreground": "0 0% 98%",
+    "--border": "27 15% 25%",
+    "--input": "27 15% 25%",
+    "--ring": "28 44% 62%",
+    "--app-gradient": "radial-gradient(1040px 560px at -10% -20%, hsl(28 45% 60% / 0.26), transparent 58%), radial-gradient(920px 520px at 112% 2%, hsl(36 40% 60% / 0.2), transparent 58%), linear-gradient(160deg, hsl(27 25% 12%) 0%, hsl(26 22% 12%) 50%, hsl(24 19% 10%) 100%)",
+    "--app-surface-tint": "hsl(28 44% 62% / 0.1)",
+  },
+};
+
+const getThemeTokens = (themeId) => {
+  return themeTokens[themeId] || themeTokens["theme-nitro-midnight-blurple"];
+};
+
+const ensureDir = (dir) => {
+  fs.mkdirSync(dir, { recursive: true });
+};
+
+const copyTemplate = (name, dest, force) => {
+  const src = path.join(templateDir, name);
+  if (!fs.existsSync(src)) {
+    throw new Error(`Missing template: ${name}`);
+  }
+  if (fs.existsSync(dest) && !force) {
+    return { skipped: true, dest };
+  }
+  fs.copyFileSync(src, dest);
+  return { skipped: false, dest };
+};
+
+const DEFAULT_THEME = "theme-nitro-midnight-blurple";
+const DEFAULT_MODE = "dark";
+
+const promptSelect = async (title, items, defaultIndex = 0) => {
+  return new Promise((resolve) => {
+    if (!process.stdin.isTTY) {
+      resolve(items[defaultIndex]);
+      return;
+    }
+
+    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");
+      }
+      log(title);
+      log("");
+      items.forEach((item, i) => {
+        const prefix = i === index ? ">" : " ";
+        log(`${prefix} ${i + 1}. ${item.label ?? item}`);
+      });
+      log("");
+      log("Use up/down arrows and press Enter.");
+    };
+
+    const onKey = (data) => {
+      const key = data.toString();
+      if (key === "\u0003") {
+        process.stdin.setRawMode(false);
+        process.stdin.pause();
+        process.exit(1);
+      }
+      if (key === "\r") {
+        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();
+      }
+    };
+
+    process.stdin.setRawMode(true);
+    process.stdin.resume();
+    process.stdin.on("data", onKey);
+    process.stdout.write("\x1b[?25l");
+    render();
+  });
+};
+
+const promptYesNo = async (title, defaultYes = true) => {
+  const items = defaultYes ? ["Yes", "No"] : ["No", "Yes"];
+  const choice = await promptSelect(title, items, defaultYes ? 0 : 1);
+  return choice === "Yes";
+};
+
+const generateCSSVariables = (themeId, mode) => {
+  const tokens = getThemeTokens(themeId);
+  const theme = themes.find((t) => t.id === themeId);
+  
+  let css = `/* Gradient Forge Theme: ${theme?.label ?? themeId} */\n`;
+  css += `/* Color Mode: ${mode} */\n\n`;
+  
+  css += `.${themeId} {\n`;
+  Object.entries(tokens).forEach(([key, value]) => {
+    if (key !== "--app-gradient") {
+      css += `  ${key}: ${value};\n`;
+    }
+  });
+  css += `  --app-gradient: ${tokens["--app-gradient"]};\n`;
+  css += `}\n\n`;
+  
+  css += `/* Surface Layer Styles */\n`;
+  css += `.bg-card,\n.bg-popover,\n.bg-sidebar {\n`;
+  css += `  background-color: hsl(var(--background) / 0.34);\n`;
+  css += `  background-image: linear-gradient(var(--app-surface-tint), var(--app-surface-tint));\n`;
+  css += `  backdrop-filter: blur(16px);\n`;
+  css += `}\n`;
+  
+  return css;
+};
+
+const generateThemeEngine = (themeId, mode) => {
+  return `export const NITRO_PUBLIC_THEMES = [
+  ${themes.map(t => `{
+    id: "${t.id}",
+    label: "${t.label}",
+    preview: "${t.preview}",
+  }`).join(",\n  ")},
+] as const;
+
+export type ThemeId = typeof NITRO_PUBLIC_THEMES[number]["id"];
+export type ColorMode = "dark" | "light";
+
+const DEFAULT_THEME: ThemeId = "${themeId}";
+const DEFAULT_COLOR_MODE: ColorMode = "${mode}";
+
+export const defaultTheme = DEFAULT_THEME;
+export const defaultColorMode = DEFAULT_COLOR_MODE;
+`;
+};
+
+const generateThemeContext = (themeId, mode) => {
+  return `"use client";
+
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
+
+export type ThemeId = "${themeId}";
+export type ColorMode = "${mode}";
+
+type ThemeContextValue = {
+  themeId: ThemeId;
+  colorMode: ColorMode;
+  setThemeId: (themeId: ThemeId) => void;
+  setColorMode: (mode: ColorMode) => void;
+};
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export const ThemeProvider = ({ children }: { children: ReactNode }) => {
+  const [themeId, setThemeId] = useState<ThemeId>("${themeId}");
+  const [colorMode, setColorMode] = useState<ColorMode>("${mode}");
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.classList.remove("dark", "light");
+    root.classList.remove(${themes.map(t => `"${t.id}"`).join(", ")});
+    
+    root.classList.add(colorMode, themeId);
+    root.setAttribute("data-theme", themeId);
+    root.setAttribute("data-color-mode", colorMode);
+    
+    localStorage.setItem("gradient-forge.theme", themeId);
+    localStorage.setItem("gradient-forge.color-mode", colorMode);
+  }, [themeId, colorMode]);
+
+  return (
+    <ThemeContext.Provider value={{ themeId, colorMode, setThemeId, setColorMode }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used within ThemeProvider");
+  return ctx;
+};
+`;
+};
+
+const generateSetupInstructions = (projectRoot, themeId, mode, themeLabel) => {
+  return `# Gradient Forge Setup Complete! 🎨
+
+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:
+
+1. Import the CSS in your layout:
+   import "./app/gradient-forge.css";
+
+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
+`;
+};
+
+const init = async () => {
+  log("");
+  log("🎨 Gradient Forge CLI - Initialize Theme");
+  log("======================================");
+  log("");
+  
+  const projectRoot = readArg("--path", process.cwd());
+  const force = hasFlag("--force");
+  const skipInject = hasFlag("--no-inject");
+  
+  logInfo(`Project root: ${projectRoot}`);
+  log("");
+  
+  // Check if it's a Next.js project
+  const packageJsonPath = path.join(projectRoot, "package.json");
+  if (!fs.existsSync(packageJsonPath)) {
+    logError("Error: Not a valid Node.js project. No package.json found.");
+    process.exit(1);
+  }
+  
+  // Select theme
+  log("Select a theme:");
+  log("");
+  const selectedTheme = await promptSelect("Choose your theme:", themes, 12); // Default: Midnight Blurple
+  log(`\n✓ Selected: ${selectedTheme.label}`);
+  
+  // Select mode
+  log("");
+  const modeOptions = [
+    { id: "dark", label: "Dark Mode" },
+    { id: "light", label: "Light Mode" },
+  ];
+  log("Select color mode:");
+  const selectedMode = await promptSelect("Choose color mode:", modeOptions, 0);
+  log(`\n✓ Selected: ${selectedMode.label}`);
+  
+  const themeId = selectedTheme.id;
+  const mode = selectedMode.id;
+  
+  log("");
+  logInfo("Generating theme files...");
+  log("");
+  
+  // Create directories
+  const themeDir = path.join(projectRoot, "components", "theme");
+  const appDir = path.join(projectRoot, "app");
+  
+  ensureDir(themeDir);
+  ensureDir(appDir);
+  
+  // Generate and write files
+  const cssContent = generateCSSVariables(themeId, mode);
+  const cssPath = path.join(appDir, "gradient-forge.css");
+  fs.writeFileSync(cssPath, cssContent);
+  logSuccess(`Created: ${path.relative(projectRoot, cssPath)}`);
+  
+  const engineContent = generateThemeEngine(themeId, mode);
+  const enginePath = path.join(themeDir, "theme-engine.ts");
+  fs.writeFileSync(enginePath, engineContent);
+  logSuccess(`Created: ${path.relative(projectRoot, enginePath)}`);
+  
+  const contextContent = generateThemeContext(themeId, mode);
+  const contextPath = path.join(themeDir, "theme-context.tsx");
+  fs.writeFileSync(contextPath, contextContent);
+  logSuccess(`Created: ${path.relative(projectRoot, contextPath)}`);
+  
+  // Inject into globals.css if it exists and not skipped
+  const globalsPath = path.join(appDir, "globals.css");
+  if (!skipInject && fs.existsSync(globalsPath)) {
+    const marker = "/* gradient-forge */";
+    const existing = fs.readFileSync(globalsPath, "utf8");
+    
+    if (!existing.includes(marker)) {
+      const importStatement = '@import "./gradient-forge.css";';
+      fs.writeFileSync(globalsPath, `${importStatement}\n${existing}`);
+      logSuccess(`Injected theme import into: ${path.relative(projectRoot, globalsPath)}`);
+    }
+  }
+  
+  // 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)}`);
+  
+  log("");
+  log("======================================");
+  logSuccess("Theme setup complete! 🎉");
+  log("");
+  log(instructions);
+};
+
+const exportCommand = async () => {
+  const themeId = readArg("--theme", DEFAULT_THEME);
+  const mode = readArg("--mode", DEFAULT_MODE);
+  const format = readArg("--format", "css");
+  const output = readArg("--output", process.cwd());
+  
+  const generator = exportGenerators[format];
+  if (!generator) {
+    logError(`Unknown format: ${format}`);
+    log("Available formats: css, scss, json, tailwind, w3c-tokens, figma-tokens, css-variables, html-root, all");
+    process.exit(1);
+  }
+  
+  const result = generator(themeId, mode);
+  
+  ensureDir(output);
+  const outputPath = path.join(output, result.filename);
+  fs.writeFileSync(outputPath, result.content);
+  
+  logSuccess(`Exported: ${outputPath}`);
+};
+
+const exportGenerators = {
+  css: (themeId, mode) => {
+    const tokens = getThemeTokens(themeId);
+    const theme = themes.find((t) => t.id === themeId);
+    
+    let css = `/* Gradient Forge Theme: ${theme?.label ?? themeId} */\n`;
+    css += `/* Color Mode: ${mode} */\n\n`;
+    css += `.${themeId} {\n`;
+    Object.entries(tokens).forEach(([key, value]) => {
+      if (key !== "--app-gradient") {
+        css += `  ${key}: ${value};\n`;
+      }
+    });
+    css += `  --app-gradient: ${tokens["--app-gradient"]};\n`;
+    css += `}\n\n`;
+    css += `.bg-card, .bg-popover, .bg-sidebar {\n`;
+    css += `  background-color: hsl(var(--background) / 0.34);\n`;
+    css += `  background-image: linear-gradient(var(--app-surface-tint), var(--app-surface-tint));\n`;
+    css += `  backdrop-filter: blur(16px);\n`;
+    css += `}\n`;
+    
+    return { filename: `${themeId}-theme.css`, content: css };
+  },
+  
+  scss: (themeId, mode) => {
+    const tokens = getThemeTokens(themeId);
+    const theme = themes.find((t) => t.id === themeId);
+    
+    let scss = `// Gradient Forge Theme: ${theme?.label ?? themeId}\n`;
+    scss += `// Color Mode: ${mode}\n\n`;
+    
+    Object.entries(tokens).forEach(([key, value]) => {
+      if (key !== "--app-gradient") {
+        scss += `$${key.replace("--", "")}: ${value};\n`;
+      }
+    });
+    scss += `$app-gradient: ${tokens["--app-gradient"]};\n`;
+    
+    return { filename: `${themeId}-theme.scss`, content: scss };
+  },
+  
+  json: (themeId, mode) => {
+    const tokens = getThemeTokens(themeId);
+    const theme = themes.find((t) => t.id === themeId);
+    
+    const colorTokens = {};
+    Object.entries(tokens).forEach(([key, value]) => {
+      colorTokens[key.replace("--", "")] = key === "--app-surface-tint" ? value : `hsl(${value})`;
+    });
+    
+    const data = {
+      name: theme?.label ?? themeId,
+      id: themeId,
+      colorMode: mode,
+      version: "1.0.0",
+      generatedAt: new Date().toISOString(),
+      colors: colorTokens,
+    };
+    
+    return { filename: `${themeId}-tokens.json`, content: JSON.stringify(data, null, 2) };
+  },
+  
+  tailwind: (themeId, mode) => {
+    const tokens = getThemeTokens(themeId);
+    const theme = themes.find((t) => t.id === themeId);
+    
+    const colors = {};
+    Object.entries(tokens).forEach(([key, value]) => {
+      if (key !== "--app-gradient" && key !== "--app-surface-tint") {
+        colors[key.replace("--", "")] = `"hsl(var(${key}))"`;
+      }
+    });
+    
+    const content = `// Gradient Forge Theme: ${theme?.label ?? themeId}
+// Color Mode: ${mode}
+
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  theme: {
+    extend: {
+      colors: ${JSON.stringify(colors, null, 6).replace(/"/g, "'")},
+      backgroundImage: {
+        "app-gradient": "var(--app-gradient)",
+      },
+    },
+  },
+};
+
+export default config;
+`;
+    
+    return { filename: `${themeId}-tailwind.ts`, content };
+  },
+  
+  "w3c-tokens": (themeId, mode) => {
+    const tokens = getThemeTokens(themeId);
+    const theme = themes.find((t) => t.id === themeId);
+    
+    const colorTokens = {};
+    Object.entries(tokens).forEach(([key, value]) => {
+      const tokenName = key.replace("--", "").replace(/-/g, ".");
+      colorTokens[tokenName] = {
+        $type: "color",
+        $value: key === "--app-surface-tint" ? value : `hsl(${value})`,
+      };
+    });
+    
+    const data = {
+      $schema: "https://design-tokens.github.io/schema/format.json",
+      name: theme?.label ?? themeId,
+      id: themeId,
+      colorMode: mode,
+      version: "1.0.0",
+      generatedAt: new Date().toISOString(),
+      colors: colorTokens,
+    };
+    
+    return { filename: `${themeId}-w3c-tokens.json`, content: JSON.stringify(data, null, 2) };
+  },
+  
+  "figma-tokens": (themeId, mode) => {
+    const tokens = getThemeTokens(themeId);
+    const theme = themes.find((t) => t.id === themeId);
+    
+    const colorTokens = {};
+    Object.entries(tokens).forEach(([key, value]) => {
+      colorTokens[key.replace("--", "")] = {
+        value: key === "--app-surface-tint" ? value : `hsl(${value})`,
+        type: "color",
+      };
+    });
+    
+    const data = {
+      GradientForge: {
+        [theme?.label ?? themeId]: { colors: colorTokens },
+      },
+    };
+    
+    return { filename: `${themeId}-figma-tokens.json`, content: JSON.stringify(data, null, 2) };
+  },
+  
+  "css-variables": (themeId, mode) => {
+    const tokens = getThemeTokens(themeId);
+    const theme = themes.find((t) => t.id === themeId);
+    
+    let css = `/* Gradient Forge Theme: ${theme?.label ?? themeId} */\n`;
+    css += `/* Color Mode: ${mode} */\n`;
+    css += `/* Paste these into your :root or theme class */\n\n`;
+    
+    Object.entries(tokens).forEach(([key, value]) => {
+      if (key !== "--app-gradient") {
+        css += `${key}: ${value};\n`;
+      }
+    });
+    css += `--app-gradient: ${tokens["--app-gradient"]};\n`;
+    
+    return { filename: `${themeId}-variables.css`, content: css };
+  },
+  
+  "html-root": (themeId, mode) => {
+    const theme = themes.find((t) => t.id === themeId);
+    
+    const content = `<!-- Gradient Forge Theme: ${theme?.label ?? themeId} -->
+<!-- Add these attributes to your <html> element -->
+
+<html 
+  lang="en"
+  class="${mode} ${themeId}"
+  data-theme="${themeId}"
+  data-color-mode="${mode}"
+  suppressHydrationWarning
+>
+  <!-- Your app content -->
+</html>`;
+    
+    return { filename: `${themeId}-html-root.html`, content };
+  },
+  
+  all: (themeId, mode) => {
+    const allContent = Object.keys(exportGenerators)
+      .filter(f => f !== "all")
+      .map(format => {
+        const gen = exportGenerators[format];
+        const result = gen(themeId, mode);
+        return `/* ===== ${result.filename} ===== */\n\n${result.content}`;
+      })
+      .join("\n\n\n");
+    
+    return { filename: `${themeId}-all-formats.txt`, content: allContent };
+  },
+};
+
+const usage = () => {
+  log("🎨 Gradient Forge CLI");
+  log("");
+  log("Usage:");
+  log("  gradient-forge init [--path <project-root>] [--inject|--no-inject] [--force]");
+  log("  gradient-forge export --theme <theme-id> --format <format> [--output <path>]");
+  log("  gradient-forge list");
+  log("  gradient-forge help");
+  log("");
+  log("Commands:");
+  log("  init     Initialize gradient-forge in a project (-interactive)");
+  log("  export   Export theme tokens in various formats");
+  log("  list     List all available themes");
+  log("  help     Show this help message");
+  log("");
+  log("Init Options:");
+  log("  --path        Target project root (default: current directory)");
+  log("  --inject      Append theme CSS to app/globals.css (default)");
+  log("  --no-inject   Skip CSS injection");
+  log("  --force       Overwrite existing files");
+  log("");
+  log("Export Options:");
+  log("  --theme   Theme ID to export (default: theme-nitro-midnight-blurple)");
+  log("  --format  Export format: css, scss, json, tailwind, w3c-tokens, figma-tokens, css-variables, html-root, all");
+  log("  --output  Output directory (default: current directory)");
+  log("  --mode    Color mode: dark, light (default: dark)");
+  log("");
+  log("Examples:");
+  log("  gradient-forge init --path my-app");
+  log("  gradient-forge export --theme theme-nitro-midnight-blurple --format css");
+  log("  gradient-forge export --theme theme-nitro-aurora --format tailwind --output ./themes");
+  log("");
+  log("Available Themes:");
+  themes.forEach((t, i) => {
+    log(`  ${String(i + 1).padStart(2, " ")}. ${t.label}`);
+  });
+};
+
+const listThemes = () => {
+  log("🎨 Available Themes:");
+  log("");
+  themes.forEach((t, i) => {
+    log(`  ${String(i + 1).padStart(2, " ")}. ${t.id}`);
+    log(`      ${t.label}`);
+  });
+};
+
+switch (command) {
+  case "init":
+    init().catch((error) => {
+      logError(`Error: ${error instanceof Error ? error.message : String(error)}`);
+      process.exit(1);
+    });
+    break;
+  case "export":
+    exportCommand().catch((error) => {
+      logError(`Error: ${error instanceof Error ? error.message : String(error)}`);
+      process.exit(1);
+    });
+    break;
+  case "list":
+    listThemes();
+    break;
+  case "help":
+  case "--help":
+  case "-h":
+  default:
+    usage();
+    break;
+}