gradient-forge 1.0.0

package/components/ui/animated.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import * as React from "react";
+import { motion } from "framer-motion";
+import { fadeInUp, staggerContainer, staggerItem } from "@/lib/animations";
+
+interface AnimatedSectionProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function AnimatedSection({ children, className = "" }: AnimatedSectionProps) {
+  return (
+    <motion.section
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true, margin: "-100px" }}
+      variants={fadeInUp}
+      className={className}
+    >
+      {children}
+    </motion.section>
+  );
+}
+
+interface StaggerContainerProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function StaggerContainer({ children, className = "" }: StaggerContainerProps) {
+  return (
+    <motion.div
+      initial="hidden"
+      animate="visible"
+      variants={staggerContainer}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+interface StaggerItemProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function StaggerItem({ children, className = "" }: StaggerItemProps) {
+  return (
+    <motion.div variants={staggerItem} className={className}>
+      {children}
+    </motion.div>
+  );
+}

package/components/ui/avatar.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+interface AvatarProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function Avatar({ className, children }: AvatarProps) {
+  return (
+    <div
+      className={cn(
+        "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface AvatarFallbackProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function AvatarFallback({ className, children }: AvatarFallbackProps) {
+  return (
+    <div
+      className={cn(
+        "flex h-full w-full items-center justify-center rounded-full bg-muted",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/components/ui/badge.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+type BadgeVariant = "default" | "outline" | "glass";
+
+type BadgeProps = React.HTMLAttributes<HTMLDivElement> & {
+  variant?: BadgeVariant;
+};
+
+const variantClasses: Record<BadgeVariant, string> = {
+  default: "bg-primary/15 text-primary border border-primary/30",
+  outline: "border border-border/60 text-foreground",
+  glass:
+    "bg-background/30 border border-border/30 backdrop-blur text-foreground",
+};
+
+export function Badge({
+  className,
+  variant = "default",
+  ...props
+}: BadgeProps) {
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-[0.2em]",
+        variantClasses[variant],
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/components/ui/button.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+type ButtonVariant =
+  | "default"
+  | "secondary"
+  | "ghost"
+  | "outline"
+  | "glow";
+
+type ButtonSize = "sm" | "md" | "lg";
+
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  asChild?: boolean;
+};
+
+const variantClasses: Record<ButtonVariant, string> = {
+  default:
+    "bg-primary text-primary-foreground shadow-sm hover:shadow-md hover:translate-y-[-1px]",
+  secondary:
+    "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+  ghost: "bg-transparent hover:bg-muted/70",
+  outline:
+    "border border-border/70 bg-transparent hover:bg-muted/70 text-foreground",
+  glow:
+    "bg-primary text-primary-foreground shadow-[0_0_25px_hsl(var(--primary)_/_0.35)] hover:shadow-[0_0_35px_hsl(var(--primary)_/_0.55)]",
+};
+
+const sizeClasses: Record<ButtonSize, string> = {
+  sm: "h-8 px-3 text-xs",
+  md: "h-10 px-4 text-sm",
+  lg: "h-12 px-5 text-base",
+};
+
+export function Button({
+  className,
+  variant = "default",
+  size = "md",
+  asChild = false,
+  children,
+  ...props
+}: ButtonProps) {
+  const classes = cn(
+    "inline-flex items-center justify-center gap-2 rounded-full font-semibold transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
+    variantClasses[variant],
+    sizeClasses[size],
+    className,
+  );
+
+  if (asChild && React.isValidElement(children)) {
+    const child = children as React.ReactElement<{ className?: string }>;
+    return React.cloneElement(child, {
+      className: cn(classes, child.props.className),
+      ...(props as Record<string, unknown>),
+    });
+  }
+
+  return (
+    <button className={classes} {...props}>
+      {children}
+    </button>
+  );
+}

package/components/ui/card.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export function Card({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "rounded-3xl border border-border/40 bg-card/70 text-card-foreground shadow-[0_20px_80px_-60px_rgba(0,0,0,0.5)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function CardHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn("p-6 pb-3", className)} {...props} />
+  );
+}
+
+export function CardTitle({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h3
+      className={cn("text-lg font-semibold tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+export function CardDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p className={cn("text-sm text-muted-foreground", className)} {...props} />
+  );
+}
+
+export function CardContent({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn("p-6 pt-0", className)} {...props} />
+  );
+}

package/components/ui/checkbox.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  className?: string;
+}
+
+export function Checkbox({ className, ...props }: CheckboxProps) {
+  return (
+    <input
+      type="checkbox"
+      className={cn(
+        "h-4 w-4 rounded border border-border/50 bg-background text-primary focus:outline-none focus:ring-2 focus:ring-primary/20",
+        className
+      )}
+      {...props}
+    />
+  );
+}

package/components/ui/command-palette.tsx

@@ -0,0 +1,245 @@
+"use client";
+
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Search, Command, Sun, Moon, Palette, Code, LayoutTemplate, Image, FileText, Home, X, Sparkles } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useThemeContext } from "@/components/theme/theme-context";
+import { NITRO_ALL_THEMES, type ThemeId } from "@/components/theme/theme-engine";
+
+interface CommandItem {
+  id: string;
+  label: string;
+  shortcut?: string;
+  icon: React.ReactNode;
+  action: () => void;
+  category: string;
+}
+
+export function CommandPalette() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const router = useRouter();
+  const { themeId, setThemeId, colorMode, setColorMode } = useThemeContext();
+
+  const toggle = useCallback(() => setIsOpen((prev) => !prev), []);
+  const close = useCallback(() => {
+    setIsOpen(false);
+    setSearch("");
+  }, []);
+
+  // Keyboard shortcut listener
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        toggle();
+      }
+      if (e.key === "Escape") {
+        close();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggle, close]);
+
+  const commands: CommandItem[] = useMemo(() => [
+    // Navigation
+    {
+      id: "nav-home",
+      label: "Go to Home",
+      shortcut: "H",
+      icon: <Home className="h-4 w-4" />,
+      action: () => { router.push("/"); close(); },
+      category: "Navigation",
+    },
+    {
+      id: "nav-studio",
+      label: "Open Studio",
+      shortcut: "T",
+      icon: <Palette className="h-4 w-4" />,
+      action: () => { router.push("/studio"); close(); },
+      category: "Navigation",
+    },
+    {
+      id: "nav-gallery",
+      label: "View Gallery",
+      shortcut: "G",
+      icon: <Image className="h-4 w-4" />,
+      action: () => { router.push("/gallery"); close(); },
+      category: "Navigation",
+    },
+    {
+      id: "nav-showcase",
+      label: "View Showcase",
+      shortcut: "S",
+      icon: <LayoutTemplate className="h-4 w-4" />,
+      action: () => { router.push("/showcase"); close(); },
+      category: "Navigation",
+    },
+    {
+      id: "nav-docs",
+      label: "Read Documentation",
+      shortcut: "D",
+      icon: <FileText className="h-4 w-4" />,
+      action: () => { router.push("/docs"); close(); },
+      category: "Navigation",
+    },
+    // Theme
+    {
+      id: "theme-toggle",
+      label: `Switch to ${colorMode === "dark" ? "Light" : "Dark"} Mode`,
+      shortcut: "T",
+      icon: colorMode === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />,
+      action: () => { setColorMode(colorMode === "dark" ? "light" : "dark"); close(); },
+      category: "Theme",
+    },
+    // Export
+    {
+      id: "export-css",
+      label: "Export Theme as CSS",
+      icon: <Code className="h-4 w-4" />,
+      action: () => { router.push("/studio"); close(); },
+      category: "Export",
+    },
+  ], [router, close, colorMode, setColorMode]);
+
+  // Theme commands
+  const themeCommands: CommandItem[] = useMemo(() => 
+    NITRO_ALL_THEMES.map((theme) => ({
+      id: `theme-${theme.id}`,
+      label: `Apply ${theme.label} Theme`,
+      icon: <Sparkles className="h-4 w-4" />,
+      action: () => { setThemeId(theme.id as ThemeId); close(); },
+      category: "Themes",
+    }))
+  , [setThemeId, close]);
+
+  const allCommands = useMemo(() => [...commands, ...themeCommands], [commands, themeCommands]);
+
+  const filteredCommands = useMemo(() => {
+    if (!search.trim()) return allCommands;
+    const query = search.toLowerCase();
+    return allCommands.filter((cmd) => 
+      cmd.label.toLowerCase().includes(query) ||
+      cmd.category.toLowerCase().includes(query)
+    );
+  }, [allCommands, search]);
+
+  const groupedCommands = useMemo(() => {
+    const groups: Record<string, CommandItem[]> = {};
+    filteredCommands.forEach((cmd) => {
+      if (!groups[cmd.category]) groups[cmd.category] = [];
+      groups[cmd.category].push(cmd);
+    });
+    return groups;
+  }, [filteredCommands]);
+
+  if (!isOpen) return null;
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+        onClick={close}
+      >
+        <motion.div
+          initial={{ opacity: 0, scale: 0.95, y: 20 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
+          exit={{ opacity: 0, scale: 0.95, y: 20 }}
+          transition={{ type: "spring", stiffness: 400, damping: 30 }}
+          className="fixed left-1/2 top-[20%] -translate-x-1/2 w-full max-w-2xl px-4"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className="bg-background/95 backdrop-blur-xl rounded-3xl border border-border/50 shadow-2xl overflow-hidden">
+            {/* Search header */}
+            <div className="flex items-center gap-3 px-6 py-4 border-b border-border/50">
+              <Search className="h-5 w-5 text-muted-foreground" />
+              <input
+                type="text"
+                placeholder="Search commands, themes, or pages..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                className="flex-1 bg-transparent text-lg outline-none placeholder:text-muted-foreground"
+                autoFocus
+              />
+              <div className="flex items-center gap-2">
+                <kbd className="hidden sm:inline-flex items-center gap-1 px-2 py-1 text-xs font-mono bg-muted rounded-lg border">
+                  <Command className="h-3 w-3" /> K
+                </kbd>
+                <button
+                  onClick={close}
+                  className="p-2 rounded-full hover:bg-muted/50 transition-colors"
+                >
+                  <X className="h-4 w-4" />
+                </button>
+              </div>
+            </div>
+
+            {/* Results */}
+            <div className="max-h-[400px] overflow-y-auto p-2">
+              {Object.entries(groupedCommands).map(([category, items]) => (
+                items.length > 0 && (
+                  <div key={category} className="mb-2">
+                    <div className="px-4 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                      {category}
+                    </div>
+                    {items.map((cmd) => (
+                      <CommandItem key={cmd.id} item={cmd} onSelect={cmd.action} />
+                    ))}
+                  </div>
+                )
+              ))}
+              
+              {filteredCommands.length === 0 && (
+                <div className="px-4 py-8 text-center text-muted-foreground">
+                  <p>No commands found</p>
+                  <p className="text-sm mt-1">Try a different search term</p>
+                </div>
+              )}
+            </div>
+
+            {/* Footer */}
+            <div className="px-6 py-3 border-t border-border/50 text-xs text-muted-foreground flex items-center justify-between">
+              <div className="flex items-center gap-4">
+                <span className="flex items-center gap-1">
+                  <kbd className="px-1.5 py-0.5 bg-muted rounded border">↑</kbd>
+                  <kbd className="px-1.5 py-0.5 bg-muted rounded border">↓</kbd>
+                  <span className="ml-1">Navigate</span>
+                </span>
+                <span className="flex items-center gap-1">
+                  <kbd className="px-1.5 py-0.5 bg-muted rounded border">Enter</kbd>
+                  <span className="ml-1">Select</span>
+                </span>
+              </div>
+              <span>{filteredCommands.length} results</span>
+            </div>
+          </div>
+        </motion.div>
+      </motion.div>
+    </AnimatePresence>
+  );
+}
+
+function CommandItem({ item, onSelect }: { item: CommandItem; onSelect: () => void }) {
+  return (
+    <button
+      onClick={onSelect}
+      className="w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-left hover:bg-accent hover:text-accent-foreground transition-colors group"
+    >
+      <span className="text-muted-foreground group-hover:text-accent-foreground">
+        {item.icon}
+      </span>
+      <span className="flex-1 font-medium">{item.label}</span>
+      {item.shortcut && (
+        <kbd className="px-2 py-0.5 text-xs font-mono bg-muted rounded border group-hover:bg-accent-foreground/10">
+          {item.shortcut}
+        </kbd>
+      )}
+    </button>
+  );
+}