gradient-forge 1.0.0

package/components/ui/skeleton.tsx

@@ -0,0 +1,102 @@
+import { cn } from "@/lib/utils";
+
+interface SkeletonProps {
+  className?: string;
+}
+
+export function Skeleton({ className }: SkeletonProps) {
+  return (
+    <div
+      className={cn(
+        "animate-pulse rounded-xl bg-muted/50",
+        className
+      )}
+    />
+  );
+}
+
+export function CardSkeleton({ className }: SkeletonProps) {
+  return (
+    <div className={cn("rounded-3xl border border-border/50 bg-background/60 p-6", className)}>
+      <Skeleton className="h-6 w-1/3 mb-4" />
+      <Skeleton className="h-4 w-full mb-2" />
+      <Skeleton className="h-4 w-2/3 mb-6" />
+      <div className="flex gap-2">
+        <Skeleton className="h-10 w-24" />
+        <Skeleton className="h-10 w-24" />
+      </div>
+    </div>
+  );
+}
+
+export function ThemeCardSkeleton() {
+  return (
+    <div className="rounded-3xl border border-border/50 bg-background/60 p-4">
+      <Skeleton className="h-32 w-full rounded-2xl mb-4" />
+      <Skeleton className="h-5 w-3/4 mb-2" />
+      <Skeleton className="h-4 w-1/2" />
+    </div>
+  );
+}
+
+export function ComponentShowcaseSkeleton() {
+  return (
+    <div className="rounded-3xl border border-border/50 bg-background/60 p-8">
+      <div className="flex items-center gap-4 mb-8">
+        <Skeleton className="h-12 w-12 rounded-2xl" />
+        <div>
+          <Skeleton className="h-6 w-32 mb-2" />
+          <Skeleton className="h-4 w-48" />
+        </div>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <Skeleton className="h-20 w-full" />
+        <Skeleton className="h-20 w-full" />
+        <Skeleton className="h-20 w-full" />
+        <Skeleton className="h-20 w-full" />
+      </div>
+    </div>
+  );
+}
+
+export function GalleryGridSkeleton({ count = 8 }: { count?: number }) {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+      {Array.from({ length: count }).map((_, i) => (
+        <ThemeCardSkeleton key={i} />
+      ))}
+    </div>
+  );
+}
+
+export function TextSkeleton({ lines = 3 }: { lines?: number }) {
+  return (
+    <div className="space-y-2">
+      {Array.from({ length: lines }).map((_, i) => (
+        <Skeleton 
+          key={i} 
+          className={cn(
+            "h-4",
+            i === lines - 1 ? "w-2/3" : "w-full"
+          )} 
+        />
+      ))}
+    </div>
+  );
+}
+
+export function HeroSkeleton() {
+  return (
+    <div className="relative overflow-hidden rounded-3xl border border-border/50 bg-background/60 p-12">
+      <div className="max-w-3xl">
+        <Skeleton className="h-12 w-3/4 mb-6" />
+        <Skeleton className="h-6 w-full mb-4" />
+        <Skeleton className="h-6 w-2/3 mb-8" />
+        <div className="flex gap-4">
+          <Skeleton className="h-12 w-32" />
+          <Skeleton className="h-12 w-32" />
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/ui/switch.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+type SwitchProps = {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  label?: string;
+};
+
+export function Switch({ checked, defaultChecked = false, onCheckedChange, label }: SwitchProps) {
+  const [internalChecked, setInternalChecked] = React.useState(defaultChecked);
+  const isControlled = checked !== undefined;
+  const isChecked = isControlled ? checked : internalChecked;
+
+  const handleClick = () => {
+    const newValue = !isChecked;
+    if (!isControlled) {
+      setInternalChecked(newValue);
+    }
+    onCheckedChange?.(newValue);
+  };
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={isChecked}
+      aria-label={label}
+      onClick={handleClick}
+      className={cn(
+        "relative inline-flex h-7 w-12 items-center rounded-full border border-border/60 bg-background/40 transition-all",
+        isChecked && "bg-primary/30 border-primary/50",
+      )}
+    >
+      <span
+        className={cn(
+          "h-5 w-5 translate-x-1 rounded-full bg-foreground/80 shadow transition-all",
+          isChecked && "translate-x-6 bg-primary",
+        )}
+      />
+    </button>
+  );
+}

package/components/ui/tabs.tsx

@@ -0,0 +1,115 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+interface TabsProps {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface TabsListProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface TabsTriggerProps {
+  value: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface TabsContentProps {
+  value: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const TabsContext = React.createContext<{
+  value: string;
+  onValueChange: (value: string) => void;
+} | null>(null);
+
+function useTabs() {
+  const context = React.useContext(TabsContext);
+  if (!context) {
+    throw new Error("Tabs components must be used within a Tabs provider");
+  }
+  return context;
+}
+
+export function Tabs({ value, defaultValue, onValueChange, children, className }: TabsProps) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue ?? "");
+  
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? value : internalValue;
+  
+  const handleValueChange = React.useCallback((newValue: string) => {
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    onValueChange?.(newValue);
+  }, [isControlled, onValueChange]);
+
+  return (
+    <TabsContext.Provider value={{ value: currentValue, onValueChange: handleValueChange }}>
+      <div className={cn("w-full", className)}>{children}</div>
+    </TabsContext.Provider>
+  );
+}
+
+export function TabsList({ children, className }: TabsListProps) {
+  return (
+    <div
+      className={cn(
+        "inline-flex h-10 items-center justify-center rounded-full bg-muted/50 p-1 text-muted-foreground",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function TabsTrigger({ value, children, className }: TabsTriggerProps) {
+  const { value: selectedValue, onValueChange } = useTabs();
+  const isSelected = selectedValue === value;
+
+  return (
+    <button
+      type="button"
+      role="tab"
+      aria-selected={isSelected}
+      onClick={() => onValueChange(value)}
+      className={cn(
+        "inline-flex items-center justify-center whitespace-nowrap rounded-full px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+        isSelected
+          ? "bg-background text-foreground shadow-sm"
+          : "hover:bg-muted/70 hover:text-foreground",
+        className
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function TabsContent({ value, children, className }: TabsContentProps) {
+  const { value: selectedValue } = useTabs();
+  const isSelected = selectedValue === value;
+
+  if (!isSelected) return null;
+
+  return (
+    <div
+      role="tabpanel"
+      className={cn(
+        "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/components/ui/toast.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { createContext, useContext, useState, useCallback, type ReactNode } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Check, X, AlertCircle, Info } from "lucide-react";
+
+type ToastType = "success" | "error" | "warning" | "info";
+
+interface Toast {
+  id: string;
+  message: string;
+  type: ToastType;
+  duration?: number;
+}
+
+interface ToastContextType {
+  showToast: (message: string, type?: ToastType, duration?: number) => void;
+  removeToast: (id: string) => void;
+}
+
+const ToastContext = createContext<ToastContextType | null>(null);
+
+export function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within ToastProvider");
+  }
+  return context;
+}
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const showToast = useCallback((message: string, type: ToastType = "info", duration = 3000) => {
+    const id = Math.random().toString(36).substring(2, 9);
+    const toast: Toast = { id, message, type, duration };
+    
+    setToasts((prev) => [...prev, toast]);
+    
+    if (duration > 0) {
+      setTimeout(() => removeToast(id), duration);
+    }
+  }, [removeToast]);
+
+  return (
+    <ToastContext.Provider value={{ showToast, removeToast }}>
+      {children}
+      <ToastContainer toasts={toasts} removeToast={removeToast} />
+    </ToastContext.Provider>
+  );
+}
+
+function ToastContainer({ 
+  toasts, 
+  removeToast 
+}: { 
+  toasts: Toast[]; 
+  removeToast: (id: string) => void;
+}) {
+  return (
+    <div className="fixed bottom-4 right-4 z-[100] flex flex-col gap-2">
+      <AnimatePresence mode="popLayout">
+        {toasts.map((toast) => (
+          <ToastItem key={toast.id} toast={toast} onClose={() => removeToast(toast.id)} />
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+function ToastItem({ 
+  toast, 
+  onClose 
+}: { 
+  toast: Toast; 
+  onClose: () => void;
+}) {
+  const icons = {
+    success: <Check className="h-4 w-4 text-emerald-500" />,
+    error: <X className="h-4 w-4 text-red-500" />,
+    warning: <AlertCircle className="h-4 w-4 text-amber-500" />,
+    info: <Info className="h-4 w-4 text-blue-500" />,
+  };
+
+  const borders = {
+    success: "border-emerald-500/30",
+    error: "border-red-500/30",
+    warning: "border-amber-500/30",
+    info: "border-blue-500/30",
+  };
+
+  return (
+    <motion.div
+      layout
+      initial={{ opacity: 0, x: 50, scale: 0.9 }}
+      animate={{ opacity: 1, x: 0, scale: 1 }}
+      exit={{ opacity: 0, x: 50, scale: 0.9 }}
+      transition={{ type: "spring", stiffness: 400, damping: 30 }}
+      className={`
+        flex items-center gap-3 px-4 py-3 rounded-2xl
+        bg-background/80 backdrop-blur-xl border ${borders[toast.type]}
+        shadow-lg shadow-black/5 min-w-[300px] max-w-[400px]
+      `}
+    >
+      {icons[toast.type]}
+      <p className="text-sm font-medium flex-1">{toast.message}</p>
+      <button
+        onClick={onClose}
+        className="p-1 rounded-full hover:bg-muted/50 transition-colors"
+      >
+        <X className="h-3 w-3 text-muted-foreground" />
+      </button>
+    </motion.div>
+  );
+}

package/gradient-forge/theme-context.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import {
+  type ColorMode,
+  type ThemeId,
+  MEMORY_LANE_THEME,
+  NITRO_ALL_THEMES,
+  NITRO_PUBLIC_THEMES,
+  applyTheme,
+  defaultColorMode,
+  defaultTheme,
+  getStoredColorMode,
+  getStoredTheme,
+  persistTourProgress,
+  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 = publicThemeIds.includes(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;
+};