gradient-forge 1.0.0

package/cli/templates/theme-context.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import {
+  type ColorMode,
+  type ThemeId,
+  MEMORY_LANE_THEME,
+  NITRO_ALL_THEMES,
+  NITRO_PUBLIC_THEMES,
+  applyTheme,
+  defaultColorMode,
+  defaultTheme,
+  getStoredColorMode,
+  getStoredTheme,
+  persistTourProgress,
+  publicThemeIdSet,
+  publicThemeIds,
+  readTourProgress,
+} from "./theme-engine";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+
+type ThemeContextValue = {
+  themeId: ThemeId;
+  colorMode: ColorMode;
+  availableThemes: typeof NITRO_ALL_THEMES;
+  viewedThemeIds: string[];
+  memoryLaneUnlocked: boolean;
+  remainingForUnlock: number;
+  setThemeId: (themeId: ThemeId) => void;
+  setColorMode: (mode: ColorMode) => void;
+};
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
+  const [themeId, setThemeIdState] = useState<ThemeId>(defaultTheme);
+  const [colorMode, setColorModeState] = useState<ColorMode>(defaultColorMode);
+  const [viewedThemeIds, setViewedThemeIds] = useState<string[]>([]);
+  const [memoryLaneUnlocked, setMemoryLaneUnlocked] = useState(false);
+
+  useEffect(() => {
+    const storedTheme = getStoredTheme();
+    const storedMode = getStoredColorMode();
+    const tour = readTourProgress();
+
+    setThemeIdState(storedTheme);
+    setColorModeState(storedMode);
+    setViewedThemeIds(tour.viewedThemeIds);
+    setMemoryLaneUnlocked(tour.memoryLaneUnlocked);
+    applyTheme(storedTheme, storedMode);
+  }, []);
+
+  useEffect(() => {
+    applyTheme(themeId, colorMode);
+  }, [themeId, colorMode]);
+
+  const setThemeId = (nextTheme: ThemeId) => {
+    const isPublic = publicThemeIdSet.has(nextTheme);
+    const nextViewedThemeIds = isPublic
+      ? Array.from(new Set([...viewedThemeIds, nextTheme]))
+      : viewedThemeIds;
+
+    const hasCompletedTour = publicThemeIds.every((id) =>
+      nextViewedThemeIds.includes(id),
+    );
+    const nextMemoryLaneUnlocked = memoryLaneUnlocked || hasCompletedTour;
+
+    setThemeIdState(nextTheme);
+    setViewedThemeIds(nextViewedThemeIds);
+    setMemoryLaneUnlocked(nextMemoryLaneUnlocked);
+    persistTourProgress({
+      viewedThemeIds: nextViewedThemeIds,
+      memoryLaneUnlocked: nextMemoryLaneUnlocked,
+    });
+  };
+
+  const setColorMode = (mode: ColorMode) => {
+    setColorModeState(mode);
+  };
+
+  const availableThemes = useMemo(
+    () => (memoryLaneUnlocked ? NITRO_ALL_THEMES : NITRO_PUBLIC_THEMES),
+    [memoryLaneUnlocked],
+  );
+
+  const remainingForUnlock = useMemo(() => {
+    const remaining = publicThemeIds.length - viewedThemeIds.length;
+    return Math.max(0, remaining);
+  }, [viewedThemeIds]);
+
+  useEffect(() => {
+    if (themeId === MEMORY_LANE_THEME.id && !memoryLaneUnlocked) {
+      setMemoryLaneUnlocked(true);
+    }
+  }, [themeId, memoryLaneUnlocked]);
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        themeId,
+        colorMode,
+        availableThemes: availableThemes as typeof NITRO_ALL_THEMES,
+        viewedThemeIds,
+        memoryLaneUnlocked,
+        remainingForUnlock,
+        setThemeId,
+        setColorMode,
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useThemeContext = () => {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error("useThemeContext must be used within ThemeProvider");
+  }
+  return ctx;
+};

package/cli/templates/theme-engine.ts

@@ -0,0 +1,237 @@
+export const NITRO_PUBLIC_THEMES = [
+  {
+    id: "theme-nitro-mint-apple",
+    label: "Mint Apple",
+    preview:
+      "radial-gradient(circle at 12% 10%, #b2ffe1 0%, transparent 42%), linear-gradient(145deg, #2d8e74 0%, #70c76a 46%, #d5ef91 100%)",
+  },
+  {
+    id: "theme-nitro-citrus-sherbert",
+    label: "Citrus Sherbert",
+    preview:
+      "radial-gradient(circle at 10% 10%, #ffd37d 0%, transparent 42%), linear-gradient(145deg, #e67d35 0%, #f7bb54 46%, #fff0a3 100%)",
+  },
+  {
+    id: "theme-nitro-retro-raincloud",
+    label: "Retro Raincloud",
+    preview:
+      "radial-gradient(circle at 12% 10%, #b3c6dc 0%, transparent 42%), linear-gradient(145deg, #4e6077 0%, #6f86a0 46%, #98aec3 100%)",
+  },
+  {
+    id: "theme-nitro-hanami",
+    label: "Hanami",
+    preview:
+      "radial-gradient(circle at 12% 10%, #ffd5e7 0%, transparent 42%), linear-gradient(145deg, #995382 0%, #c77ca9 46%, #f0b7ce 100%)",
+  },
+  {
+    id: "theme-nitro-sunrise",
+    label: "Sunrise",
+    preview:
+      "radial-gradient(circle at 12% 10%, #ffb596 0%, transparent 42%), linear-gradient(145deg, #e25263 0%, #ef8a57 46%, #ffd07a 100%)",
+  },
+  {
+    id: "theme-nitro-cotton-candy",
+    label: "Cotton Candy",
+    preview:
+      "radial-gradient(circle at 12% 10%, #c8e9ff 0%, transparent 42%), linear-gradient(145deg, #5aa2ff 0%, #9b78f0 46%, #f39bca 100%)",
+  },
+  {
+    id: "theme-nitro-lofi-vibes",
+    label: "Lofi Vibes",
+    preview:
+      "radial-gradient(circle at 10% 10%, #8e97c6 0%, transparent 42%), linear-gradient(145deg, #3f476c 0%, #59608f 46%, #7a6f9f 100%)",
+  },
+  {
+    id: "theme-nitro-desert-khaki",
+    label: "Desert Khaki",
+    preview:
+      "radial-gradient(circle at 10% 10%, #d5bf92 0%, transparent 42%), linear-gradient(145deg, #6d5c49 0%, #8f7a5d 46%, #b49f76 100%)",
+  },
+  {
+    id: "theme-nitro-sunset",
+    label: "Sunset",
+    preview:
+      "radial-gradient(circle at 10% 10%, #d66a82 0%, transparent 42%), linear-gradient(145deg, #3f1b4d 0%, #8c335f 46%, #f4874f 100%)",
+  },
+  {
+    id: "theme-nitro-chroma-glow",
+    label: "Chroma Glow",
+    preview:
+      "radial-gradient(circle at 10% 10%, #7f8dff 0%, transparent 42%), linear-gradient(145deg, #2d3eff 0%, #a726fa 46%, #00c7ff 100%)",
+  },
+  {
+    id: "theme-nitro-forest",
+    label: "Forest",
+    preview:
+      "radial-gradient(circle at 10% 10%, #56be87 0%, transparent 42%), linear-gradient(145deg, #163f2e 0%, #246b49 46%, #59a86c 100%)",
+  },
+  {
+    id: "theme-nitro-crimson",
+    label: "Crimson",
+    preview:
+      "radial-gradient(circle at 10% 10%, #c23956 0%, transparent 42%), linear-gradient(145deg, #2d050f 0%, #681126 46%, #a82435 100%)",
+  },
+  {
+    id: "theme-nitro-midnight-blurple",
+    label: "Midnight Blurple",
+    preview:
+      "radial-gradient(circle at 10% 10%, #6d6eff 0%, transparent 42%), linear-gradient(145deg, #0f1232 0%, #25366f 46%, #5757dc 100%)",
+  },
+  {
+    id: "theme-nitro-mars",
+    label: "Mars",
+    preview:
+      "radial-gradient(circle at 10% 10%, #cc654c 0%, transparent 42%), linear-gradient(145deg, #2e140f 0%, #5e261d 46%, #9c422f 100%)",
+  },
+  {
+    id: "theme-nitro-dusk",
+    label: "Dusk",
+    preview:
+      "radial-gradient(circle at 10% 10%, #9475c1 0%, transparent 42%), linear-gradient(145deg, #1b1632 0%, #3b2d5b 46%, #745495 100%)",
+  },
+  {
+    id: "theme-nitro-under-the-sea",
+    label: "Under The Sea",
+    preview:
+      "radial-gradient(circle at 10% 10%, #3ea6b7 0%, transparent 42%), linear-gradient(145deg, #0b2242 0%, #0d4f69 46%, #2b848e 100%)",
+  },
+  {
+    id: "theme-nitro-retro-storm",
+    label: "Retro Storm",
+    preview:
+      "radial-gradient(circle at 10% 10%, #7e95ab 0%, transparent 42%), linear-gradient(145deg, #1d2b3a 0%, #354657 46%, #55667a 100%)",
+  },
+  {
+    id: "theme-nitro-neon-nights",
+    label: "Neon Nights",
+    preview:
+      "radial-gradient(circle at 10% 10%, #d13eff 0%, transparent 42%), linear-gradient(145deg, #05061a 0%, #180f52 46%, #00bde6 100%)",
+  },
+  {
+    id: "theme-nitro-strawberry-lemonade",
+    label: "Strawberry Lemonade",
+    preview:
+      "radial-gradient(circle at 10% 10%, #ff8aa8 0%, transparent 42%), linear-gradient(145deg, #8f1847 0%, #cc3f5e 46%, #efc141 100%)",
+  },
+  {
+    id: "theme-nitro-aurora",
+    label: "Aurora",
+    preview:
+      "radial-gradient(circle at 10% 10%, #41cbb1 0%, transparent 42%), linear-gradient(145deg, #083142 0%, #1b7e74 46%, #5fbf75 100%)",
+  },
+  {
+    id: "theme-nitro-sepia",
+    label: "Sepia",
+    preview:
+      "radial-gradient(circle at 10% 10%, #b99672 0%, transparent 42%), linear-gradient(145deg, #35261d 0%, #5d4636 46%, #927454 100%)",
+  },
+] as const;
+
+export const MEMORY_LANE_THEME = {
+  id: "theme-nitro-memory-lane",
+  label: "Memory Lane",
+  preview:
+    "radial-gradient(circle at 10% 10%, #ba8fd4 0%, transparent 42%), linear-gradient(145deg, #462d42 0%, #684b75 35%, #4a7199 68%, #77ad9f 100%)",
+} as const;
+
+export const NITRO_ALL_THEMES = [
+  ...NITRO_PUBLIC_THEMES,
+  MEMORY_LANE_THEME,
+] as const;
+
+export type ThemeId = (typeof NITRO_ALL_THEMES)[number]["id"];
+export type ColorMode = "dark" | "light";
+
+type ThemeTourProgress = {
+  viewedThemeIds: string[];
+  memoryLaneUnlocked: boolean;
+};
+
+const DEFAULT_THEME: ThemeId = "theme-nitro-midnight-blurple";
+const DEFAULT_COLOR_MODE: ColorMode = "dark";
+const THEME_STORAGE_KEY = "shadcn-gradient.theme";
+const COLOR_MODE_STORAGE_KEY = "shadcn-gradient.color-mode";
+const THEME_TOUR_STORAGE_KEY = "shadcn-gradient.theme-tour.v1";
+
+const NITRO_THEME_IDS = new Set<string>(NITRO_ALL_THEMES.map((theme) => theme.id));
+
+export const normalizeTheme = (theme?: string | null): ThemeId => {
+  if (!theme || !NITRO_THEME_IDS.has(theme)) {
+    return DEFAULT_THEME;
+  }
+
+  return theme as ThemeId;
+};
+
+export const normalizeColorMode = (mode?: string | null): ColorMode => {
+  if (mode === "light") return "light";
+  return DEFAULT_COLOR_MODE;
+};
+
+export const getStoredTheme = (): ThemeId => {
+  if (typeof window === "undefined") return DEFAULT_THEME;
+  return normalizeTheme(localStorage.getItem(THEME_STORAGE_KEY));
+};
+
+export const getStoredColorMode = (): ColorMode => {
+  if (typeof window === "undefined") return DEFAULT_COLOR_MODE;
+  return normalizeColorMode(localStorage.getItem(COLOR_MODE_STORAGE_KEY));
+};
+
+export const readTourProgress = (): ThemeTourProgress => {
+  if (typeof window === "undefined") {
+    return { viewedThemeIds: [], memoryLaneUnlocked: false };
+  }
+
+  const raw = localStorage.getItem(THEME_TOUR_STORAGE_KEY);
+  if (!raw) {
+    return { viewedThemeIds: [], memoryLaneUnlocked: false };
+  }
+
+  try {
+    const parsed = JSON.parse(raw) as ThemeTourProgress;
+    return {
+      viewedThemeIds: Array.isArray(parsed.viewedThemeIds)
+        ? parsed.viewedThemeIds.filter((id) => NITRO_THEME_IDS.has(id))
+        : [],
+      memoryLaneUnlocked: Boolean(parsed.memoryLaneUnlocked),
+    };
+  } catch {
+    return { viewedThemeIds: [], memoryLaneUnlocked: false };
+  }
+};
+
+export const persistTourProgress = (progress: ThemeTourProgress) => {
+  if (typeof window === "undefined") return;
+  localStorage.setItem(THEME_TOUR_STORAGE_KEY, JSON.stringify(progress));
+};
+
+export const applyTheme = (theme?: string | null, mode?: ColorMode) => {
+  if (typeof window === "undefined") return;
+
+  const normalizedTheme = normalizeTheme(theme);
+  const normalizedMode = normalizeColorMode(mode ?? getStoredColorMode());
+  const root = document.documentElement;
+
+  Array.from(root.classList).forEach((className) => {
+    if (
+      className === "dark" ||
+      className === "light" ||
+      className.startsWith("theme-nitro-")
+    ) {
+      root.classList.remove(className);
+    }
+  });
+
+  root.classList.add(normalizedMode, normalizedTheme);
+  root.setAttribute("data-theme", normalizedTheme);
+  root.setAttribute("data-color-mode", normalizedMode);
+
+  localStorage.setItem(THEME_STORAGE_KEY, normalizedTheme);
+  localStorage.setItem(COLOR_MODE_STORAGE_KEY, normalizedMode);
+};
+
+export const defaultTheme = DEFAULT_THEME;
+export const defaultColorMode = DEFAULT_COLOR_MODE;
+export const publicThemeIds = NITRO_PUBLIC_THEMES.map((theme) => theme.id);
+export const publicThemeIdSet = new Set<string>(publicThemeIds);