create-waypoint-app 1.0.0

package/dist/index.js

@@ -0,0 +1,1806 @@
+// src/index.ts
+import { program } from "commander";
+import chalk4 from "chalk";
+
+// src/prompts.ts
+import prompts from "prompts";
+import chalk from "chalk";
+async function gatherProjectConfig(initialName) {
+  const response = await prompts([
+    {
+      type: "text",
+      name: "projectName",
+      message: "Project name:",
+      initial: initialName || "my-waypoint-app",
+      validate: (value) => {
+        if (!value) return "Project name is required";
+        if (!/^[a-z0-9-]+$/.test(value)) {
+          return "Project name can only contain lowercase letters, numbers, and hyphens";
+        }
+        return true;
+      }
+    },
+    {
+      type: "text",
+      name: "description",
+      message: "Project description:",
+      initial: "A Waypoint 2.0 design system project"
+    },
+    {
+      type: "multiselect",
+      name: "themeModes",
+      message: "Select theme modes:",
+      choices: [
+        { title: "Light Mode", value: "light", selected: true },
+        { title: "Dark Mode", value: "dark", selected: true },
+        { title: "High Contrast Light", value: "high-contrast-light" },
+        { title: "High Contrast Dark", value: "high-contrast-dark" }
+      ],
+      hint: "- Space to select, Enter to confirm",
+      min: 1
+    },
+    {
+      type: "select",
+      name: "themePreset",
+      message: "Default theme preset:",
+      choices: [
+        { title: "Default", value: "default", description: "Neutral grays with accent colors" },
+        { title: "Warm", value: "warm", description: "Oranges and earthy tones" },
+        { title: "Cool", value: "cool", description: "Blues and teals" },
+        { title: "Pastel", value: "pastel", description: "Soft, muted colors" },
+        { title: "Bold", value: "bold", description: "High contrast, vibrant colors" },
+        { title: "Ocean", value: "ocean", description: "Deep blues and aquatics" }
+      ]
+    },
+    {
+      type: "confirm",
+      name: "enableRTL",
+      message: "Enable RTL (Right-to-Left) support?",
+      initial: false
+    },
+    {
+      type: "confirm",
+      name: "enableFontScaling",
+      message: "Enable font scaling accessibility?",
+      initial: true
+    },
+    {
+      type: "multiselect",
+      name: "features",
+      message: "Select component groups to include:",
+      choices: [
+        { title: "Core Components", value: "core", selected: true, description: "Button, Card, Input, Dialog, etc." },
+        { title: "Form Components", value: "forms", selected: true, description: "Form, Checkbox, Select, Switch, etc." },
+        { title: "Feedback Components", value: "feedback", selected: true, description: "Toast, Alert, Progress, Skeleton" },
+        { title: "Navigation Components", value: "navigation", selected: true, description: "Tabs, Breadcrumb, Pagination, Menu" },
+        { title: "Data Components", value: "data", description: "Table, Calendar, Data display" },
+        { title: "Advanced Components", value: "advanced", description: "Command, Carousel, Resizable, Drawer" },
+        { title: "Chart Components", value: "charts", description: "Recharts-based chart components" }
+      ],
+      hint: "- Space to select, Enter to confirm"
+    },
+    {
+      type: "confirm",
+      name: "includePageTemplates",
+      message: "Include page templates (27+ layouts)?",
+      initial: false
+    },
+    {
+      type: "confirm",
+      name: "includeComposer",
+      message: "Include Composer visual builder tool?",
+      initial: false
+    },
+    {
+      type: "confirm",
+      name: "includeAuth",
+      message: "Include authentication scaffolding?",
+      initial: false
+    }
+  ], {
+    onCancel: () => {
+      console.log(chalk.red("\n  Setup cancelled.\n"));
+      process.exit(0);
+    }
+  });
+  return {
+    projectName: response.projectName,
+    description: response.description,
+    themeModes: response.themeModes,
+    themePreset: response.themePreset,
+    enableRTL: response.enableRTL,
+    enableFontScaling: response.enableFontScaling,
+    features: response.features,
+    includeAuth: response.includeAuth,
+    includePageTemplates: response.includePageTemplates,
+    includeComposer: response.includeComposer
+  };
+}
+
+// src/scaffolder.ts
+import path3 from "path";
+import fs3 from "fs-extra";
+import ora from "ora";
+
+// src/generators/package.ts
+function generatePackageJson(config) {
+  const dependencies = {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.12.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.2",
+    "lucide-react": "^0.462.0",
+    "@radix-ui/react-slot": "^1.1.0"
+  };
+  const devDependencies = {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.14",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10"
+  };
+  if (config.features.includes("core")) {
+    Object.assign(dependencies, {
+      "@radix-ui/react-dialog": "^1.1.2",
+      "@radix-ui/react-dropdown-menu": "^2.1.1",
+      "@radix-ui/react-tooltip": "^1.1.4",
+      "@radix-ui/react-popover": "^1.1.1",
+      "@radix-ui/react-separator": "^1.1.0",
+      "@radix-ui/react-scroll-area": "^1.1.0",
+      "@radix-ui/react-avatar": "^1.1.0",
+      "@radix-ui/react-aspect-ratio": "^1.1.0",
+      "@radix-ui/react-collapsible": "^1.1.0",
+      "@radix-ui/react-accordion": "^1.2.0"
+    });
+  }
+  if (config.features.includes("forms")) {
+    Object.assign(dependencies, {
+      "@radix-ui/react-checkbox": "^1.1.1",
+      "@radix-ui/react-radio-group": "^1.2.0",
+      "@radix-ui/react-select": "^2.1.1",
+      "@radix-ui/react-switch": "^1.1.0",
+      "@radix-ui/react-slider": "^1.2.0",
+      "@radix-ui/react-label": "^2.1.0",
+      "@hookform/resolvers": "^3.9.0",
+      "react-hook-form": "^7.53.0",
+      "zod": "^3.23.8",
+      "input-otp": "^1.2.4"
+    });
+  }
+  if (config.features.includes("feedback")) {
+    Object.assign(dependencies, {
+      "@radix-ui/react-toast": "^1.2.1",
+      "@radix-ui/react-alert-dialog": "^1.1.1",
+      "@radix-ui/react-progress": "^1.1.0",
+      "sonner": "^1.5.0"
+    });
+  }
+  if (config.features.includes("navigation")) {
+    Object.assign(dependencies, {
+      "@radix-ui/react-tabs": "^1.1.0",
+      "@radix-ui/react-navigation-menu": "^1.2.0",
+      "@radix-ui/react-menubar": "^1.1.1",
+      "@radix-ui/react-context-menu": "^2.2.1",
+      "@radix-ui/react-toggle": "^1.1.0",
+      "@radix-ui/react-toggle-group": "^1.1.0"
+    });
+  }
+  if (config.features.includes("data")) {
+    Object.assign(dependencies, {
+      "react-day-picker": "^8.10.1",
+      "date-fns": "^3.6.0"
+    });
+  }
+  if (config.features.includes("advanced")) {
+    Object.assign(dependencies, {
+      "cmdk": "^1.0.0",
+      "embla-carousel-react": "^8.3.0",
+      "embla-carousel-autoplay": "^8.6.0",
+      "react-resizable-panels": "^2.1.3",
+      "vaul": "^1.1.2",
+      "@radix-ui/react-hover-card": "^1.1.1"
+    });
+  }
+  if (config.features.includes("charts")) {
+    Object.assign(dependencies, {
+      "recharts": "^2.12.7"
+    });
+  }
+  dependencies["motion"] = "^12.18.1";
+  dependencies["next-themes"] = "^0.3.0";
+  if (config.includeAuth) {
+    dependencies["@supabase/supabase-js"] = "^2.84.0";
+    dependencies["@tanstack/react-query"] = "^5.56.2";
+  }
+  return {
+    name: config.projectName,
+    private: true,
+    version: "0.1.0",
+    description: config.description,
+    type: "module",
+    scripts: {
+      "dev": "vite",
+      "build": "tsc && vite build",
+      "preview": "vite preview",
+      "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+    },
+    dependencies,
+    devDependencies
+  };
+}
+
+// src/generators/tailwind.ts
+function generateTailwindConfig(config) {
+  return `import type { Config } from "tailwindcss";
+
+const config = {
+  darkMode: ["class"],
+  content: [
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+  ],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    screens: {
+      sm: "640px",
+      md: "768px",
+      lg: "1024px",
+      xl: "1200px",
+      "2xl": "1400px",
+    },
+    extend: {
+      fontFamily: {
+        sans: ['Circular', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+        heading: ['"Circular 20"', 'Circular', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+      },
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+          text: "hsl(var(--destructive-text))",
+        },
+        success: {
+          DEFAULT: "hsl(var(--success))",
+          foreground: "hsl(var(--success-foreground))",
+        },
+        warning: {
+          DEFAULT: "hsl(var(--warning))",
+          foreground: "hsl(var(--warning-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
+        brand: {
+          DEFAULT: "hsl(var(--brand))",
+          dark: "hsl(var(--brand-dark))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        "spin-slow": "spin 8s linear infinite",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+} satisfies Config;
+
+export default config;
+`;
+}
+
+// src/generators/vite.ts
+function generateViteConfig() {
+  return `import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import path from "path";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    host: "::",
+    port: 8080,
+  },
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});
+`;
+}
+
+// src/generators/styles.ts
+function generateIndexCSS(config) {
+  let css = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Waypoint 2.0 Design System */
+
+`;
+  css += `@layer base {
+`;
+  if (config.themeModes.includes("light")) {
+    css += `  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --destructive-text: 0 84.2% 45%;
+
+    --success: 142 76% 36%;
+    --success-foreground: 0 0% 100%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 38 92% 20%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+
+    --brand: 217 100% 50%;
+    --brand-dark: 218 100% 33%;
+
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+`;
+  }
+  if (config.themeModes.includes("dark")) {
+    css += `  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --destructive-text: 0 84.2% 65%;
+
+    --success: 142 76% 46%;
+    --success-foreground: 0 0% 100%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 38 92% 90%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+
+    --brand: 217 100% 50%;
+    --brand-dark: 218 100% 33%;
+
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+`;
+  }
+  if (config.themeModes.includes("high-contrast-light")) {
+    css += `  /* High Contrast Light Mode */
+  .high-contrast {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 0%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 0%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 0%;
+
+    --primary: 0 0% 0%;
+    --primary-foreground: 0 0% 100%;
+
+    --secondary: 0 0% 96%;
+    --secondary-foreground: 0 0% 0%;
+
+    --muted: 0 0% 96%;
+    --muted-foreground: 0 0% 25%;
+
+    --accent: 0 0% 96%;
+    --accent-foreground: 0 0% 0%;
+
+    --destructive: 0 100% 40%;
+    --destructive-foreground: 0 0% 100%;
+
+    --border: 0 0% 0%;
+    --input: 0 0% 0%;
+    --ring: 0 0% 0%;
+
+    --sidebar-background: 0 0% 100%;
+    --sidebar-foreground: 0 0% 0%;
+    --sidebar-primary: 0 0% 0%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 0 0% 96%;
+    --sidebar-accent-foreground: 0 0% 0%;
+    --sidebar-border: 0 0% 0%;
+    --sidebar-ring: 0 0% 0%;
+  }
+
+`;
+  }
+  if (config.themeModes.includes("high-contrast-dark")) {
+    css += `  /* High Contrast Dark Mode */
+  .dark.high-contrast {
+    --background: 0 0% 0%;
+    --foreground: 0 0% 100%;
+
+    --card: 0 0% 0%;
+    --card-foreground: 0 0% 100%;
+
+    --popover: 0 0% 0%;
+    --popover-foreground: 0 0% 100%;
+
+    --primary: 0 0% 100%;
+    --primary-foreground: 0 0% 0%;
+
+    --secondary: 0 0% 15%;
+    --secondary-foreground: 0 0% 100%;
+
+    --muted: 0 0% 15%;
+    --muted-foreground: 0 0% 75%;
+
+    --accent: 0 0% 15%;
+    --accent-foreground: 0 0% 100%;
+
+    --destructive: 0 100% 60%;
+    --destructive-foreground: 0 0% 0%;
+
+    --border: 0 0% 100%;
+    --input: 0 0% 100%;
+    --ring: 0 0% 100%;
+
+    --sidebar-background: 0 0% 0%;
+    --sidebar-foreground: 0 0% 100%;
+    --sidebar-primary: 0 0% 100%;
+    --sidebar-primary-foreground: 0 0% 0%;
+    --sidebar-accent: 0 0% 15%;
+    --sidebar-accent-foreground: 0 0% 100%;
+    --sidebar-border: 0 0% 100%;
+    --sidebar-ring: 0 0% 100%;
+  }
+
+`;
+  }
+  if (config.enableFontScaling) {
+    css += `  /* Font scaling classes */
+  .font-scale-small {
+    font-size: calc(var(--font-scale, 1) * 1rem);
+  }
+  
+  .font-scale-medium {
+    font-size: calc(var(--font-scale, 1) * 1rem);
+  }
+  
+  .font-scale-large {
+    font-size: calc(var(--font-scale, 1) * 1rem);
+  }
+`;
+  }
+  css += `}
+
+`;
+  css += `@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;`;
+  if (config.enableFontScaling) {
+    css += `
+    font-size: calc(1rem * var(--font-scale, 1));`;
+  }
+  css += `
+  }
+
+`;
+  if (config.enableRTL) {
+    css += `  /* RTL Support */
+  .rtl {
+    direction: rtl;
+  }
+  
+  .rtl .text-left {
+    text-align: right;
+  }
+  
+  .rtl .text-right {
+    text-align: left;
+  }
+  
+  .rtl .ml-2 {
+    margin-left: 0;
+    margin-right: 0.5rem;
+  }
+  
+  .rtl .mr-2 {
+    margin-right: 0;
+    margin-left: 0.5rem;
+  }
+  
+  .rtl .pl-3 {
+    padding-left: 0;
+    padding-right: 0.75rem;
+  }
+  
+  .rtl .pr-3 {
+    padding-right: 0;
+    padding-left: 0.75rem;
+  }
+
+`;
+  }
+  if (config.enableFontScaling) {
+    css += `  /* Scale all text elements */
+  h1, h2, h3, h4, h5, h6, p, span, div, button, input, textarea, label, a {
+    font-size: calc(1em * var(--font-scale, 1));
+  }
+
+`;
+  }
+  css += `  /* Heading font family + size hierarchy */
+  h1, h2, h3, h4, h5, h6 {
+    font-family: "Circular 20", Circular, ui-sans-serif, system-ui, sans-serif;
+    font-weight: 700;
+  }
+`;
+  if (config.enableFontScaling) {
+    css += `  h1 { font-size: calc(2.25rem * var(--font-scale, 1)); }
+  h2 { font-size: calc(1.875rem * var(--font-scale, 1)); }
+  h3 { font-size: calc(1.5rem * var(--font-scale, 1)); }
+  h4 { font-size: calc(1.25rem * var(--font-scale, 1)); }
+  h5 { font-size: calc(1.125rem * var(--font-scale, 1)); }
+  h6 { font-size: calc(1rem * var(--font-scale, 1)); }
+
+  /* Scale text utility classes */
+  .text-sm { font-size: calc(0.875rem * var(--font-scale, 1)); }
+  .text-xs { font-size: calc(0.75rem * var(--font-scale, 1)); }
+  .text-lg { font-size: calc(1.125rem * var(--font-scale, 1)); }
+  .text-xl { font-size: calc(1.25rem * var(--font-scale, 1)); }
+  .text-2xl { font-size: calc(1.5rem * var(--font-scale, 1)); }
+  .text-3xl { font-size: calc(1.875rem * var(--font-scale, 1)); }
+`;
+  }
+  css += `
+  pre {
+    @apply text-left;
+  }
+}
+`;
+  return css;
+}
+
+// src/generators/config.ts
+function generateTsConfig() {
+  return {
+    compilerOptions: {
+      target: "ES2020",
+      useDefineForClassFields: true,
+      lib: ["ES2020", "DOM", "DOM.Iterable"],
+      module: "ESNext",
+      skipLibCheck: true,
+      moduleResolution: "bundler",
+      allowImportingTsExtensions: true,
+      resolveJsonModule: true,
+      isolatedModules: true,
+      noEmit: true,
+      jsx: "react-jsx",
+      strict: true,
+      noUnusedLocals: true,
+      noUnusedParameters: true,
+      noFallthroughCasesInSwitch: true,
+      baseUrl: ".",
+      paths: {
+        "@/*": ["./src/*"]
+      }
+    },
+    include: ["src"],
+    references: [{ path: "./tsconfig.node.json" }]
+  };
+}
+function generateComponentsJson() {
+  return {
+    "$schema": "https://ui.shadcn.com/schema.json",
+    style: "default",
+    rsc: false,
+    tsx: true,
+    tailwind: {
+      config: "tailwind.config.ts",
+      css: "src/index.css",
+      baseColor: "slate",
+      cssVariables: true,
+      prefix: ""
+    },
+    aliases: {
+      components: "@/components",
+      utils: "@/lib/utils",
+      ui: "@/components/ui",
+      lib: "@/lib",
+      hooks: "@/hooks"
+    }
+  };
+}
+
+// src/generators/components.ts
+import path from "path";
+import fs from "fs-extra";
+var componentMappings = {
+  core: [
+    "button",
+    "card",
+    "dialog",
+    "dropdown-menu",
+    "input",
+    "separator",
+    "scroll-area",
+    "avatar",
+    "aspect-ratio",
+    "collapsible",
+    "accordion",
+    "badge",
+    "skeleton",
+    "tooltip",
+    "popover"
+  ],
+  forms: [
+    "checkbox",
+    "form",
+    "input",
+    "label",
+    "radio-group",
+    "select",
+    "slider",
+    "switch",
+    "textarea",
+    "input-otp"
+  ],
+  feedback: [
+    "alert",
+    "alert-dialog",
+    "progress",
+    "toast",
+    "toaster",
+    "sonner"
+  ],
+  navigation: [
+    "breadcrumb",
+    "navigation-menu",
+    "menubar",
+    "context-menu",
+    "pagination",
+    "tabs",
+    "toggle",
+    "toggle-group"
+  ],
+  data: [
+    "calendar",
+    "table"
+  ],
+  advanced: [
+    "carousel",
+    "command",
+    "drawer",
+    "hover-card",
+    "resizable",
+    "sheet"
+  ],
+  charts: [
+    "chart"
+  ]
+};
+async function generateComponents(projectPath, config) {
+  await generateUtilFiles(projectPath);
+  const componentsToGenerate = /* @__PURE__ */ new Set();
+  for (const feature of config.features) {
+    const components = componentMappings[feature] || [];
+    components.forEach((c) => componentsToGenerate.add(c));
+  }
+  for (const component of componentsToGenerate) {
+    await generateComponentFile(projectPath, component);
+  }
+  await generateComponentIndex(projectPath, Array.from(componentsToGenerate));
+}
+async function generateUtilFiles(projectPath) {
+  const utilsContent = `import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+`;
+  await fs.writeFile(path.join(projectPath, "src/lib/utils.ts"), utilsContent);
+  const useMobileContent = `import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(\`(max-width: \${MOBILE_BREAKPOINT - 1}px)\`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}
+`;
+  await fs.writeFile(path.join(projectPath, "src/hooks/use-mobile.tsx"), useMobileContent);
+  const useToastContent = `import * as React from "react";
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: React.ReactNode;
+  variant?: "default" | "destructive";
+};
+
+type State = {
+  toasts: ToasterToast[];
+};
+
+let count = 0;
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+type Action =
+  | { type: "ADD_TOAST"; toast: ToasterToast }
+  | { type: "UPDATE_TOAST"; toast: Partial<ToasterToast> }
+  | { type: "DISMISS_TOAST"; toastId?: string }
+  | { type: "REMOVE_TOAST"; toastId?: string };
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      };
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+      return state;
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return { ...state, toasts: [] };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+}
+
+function toast({ ...props }: Omit<ToasterToast, "id">) {
+  const id = genId();
+  dispatch({
+    type: "ADD_TOAST",
+    toast: { ...props, id },
+  });
+  return {
+    id,
+    dismiss: () => dispatch({ type: "DISMISS_TOAST", toastId: id }),
+    update: (props: Partial<ToasterToast>) =>
+      dispatch({ type: "UPDATE_TOAST", toast: { ...props, id } }),
+  };
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  };
+}
+
+export { useToast, toast };
+`;
+  await fs.writeFile(path.join(projectPath, "src/hooks/use-toast.ts"), useToastContent);
+}
+async function generateComponentFile(projectPath, componentName) {
+  const content = getComponentTemplate(componentName);
+  if (content) {
+    const fileName = `${componentName}.tsx`;
+    await fs.writeFile(path.join(projectPath, "src/components/ui", fileName), content);
+  }
+}
+async function generateComponentIndex(projectPath, components) {
+  const exports = components.map((c) => `export * from "./${c}";`).join("\n");
+  await fs.writeFile(path.join(projectPath, "src/components/ui/index.ts"), exports + "\n");
+}
+function getComponentTemplate(name) {
+  const templates = {
+    button: `import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 min-w-6 min-h-6",
+  {
+    variants: {
+      variant: {
+        default: "bg-blue-600 text-white hover:bg-blue-700",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        "outline-destructive": "border border-input bg-background text-destructive-text hover:bg-destructive/10 hover:text-destructive-text",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        tertiary: "hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        success: "bg-green-600 text-white hover:bg-green-700",
+        cautionary: "bg-orange-500 text-white hover:bg-orange-600",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-11 w-11",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
+`,
+    card: `import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+`,
+    input: `import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };
+`,
+    label: `import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
+`,
+    badge: `import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };
+`,
+    separator: `import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cn } from "@/lib/utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
+`,
+    skeleton: `import { cn } from "@/lib/utils";
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };
+`
+  };
+  return templates[name] || null;
+}
+
+// src/generators/app.ts
+import path2 from "path";
+import fs2 from "fs-extra";
+async function generateAppFiles(projectPath, config) {
+  const mainContent = `import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import App from "./App.tsx";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>
+);
+`;
+  await fs2.writeFile(path2.join(projectPath, "src/main.tsx"), mainContent);
+  const appContent = generateAppComponent(config);
+  await fs2.writeFile(path2.join(projectPath, "src/App.tsx"), appContent);
+  const homeContent = generateHomePage(config);
+  await fs2.writeFile(path2.join(projectPath, "src/pages/Home.tsx"), homeContent);
+  if (config.themeModes.includes("dark")) {
+    await generateThemeProvider(projectPath);
+  }
+  const tsconfigNode = {
+    compilerOptions: {
+      composite: true,
+      skipLibCheck: true,
+      module: "ESNext",
+      moduleResolution: "bundler",
+      allowSyntheticDefaultImports: true,
+      strict: true
+    },
+    include: ["vite.config.ts"]
+  };
+  await fs2.writeJson(path2.join(projectPath, "tsconfig.node.json"), tsconfigNode, { spaces: 2 });
+  const viteSvg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFBD4F"></stop><stop offset="100%" stop-color="#FF980E"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>`;
+  await fs2.writeFile(path2.join(projectPath, "public/vite.svg"), viteSvg);
+}
+function generateAppComponent(config) {
+  const hasDarkMode = config.themeModes.includes("dark");
+  if (hasDarkMode) {
+    return `import { Routes, Route } from "react-router-dom";
+import { ThemeProvider } from "./contexts/ThemeProvider";
+import { Toaster } from "sonner";
+import Home from "./pages/Home";
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme="system" storageKey="waypoint-theme">
+      <Routes>
+        <Route path="/" element={<Home />} />
+      </Routes>
+      <Toaster />
+    </ThemeProvider>
+  );
+}
+
+export default App;
+`;
+  }
+  return `import { Routes, Route } from "react-router-dom";
+import { Toaster } from "sonner";
+import Home from "./pages/Home";
+
+function App() {
+  return (
+    <>
+      <Routes>
+        <Route path="/" element={<Home />} />
+      </Routes>
+      <Toaster />
+    </>
+  );
+}
+
+export default App;
+`;
+}
+function generateHomePage(config) {
+  return `import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function Home() {
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <CardTitle className="text-3xl font-bold">
+            Welcome to ${config.projectName}
+          </CardTitle>
+          <CardDescription>
+            Built with Waypoint 2.0 Design System
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-muted-foreground text-center">
+            Your project is ready! Start building something amazing.
+          </p>
+          <div className="flex gap-2 justify-center">
+            <Button>Get Started</Button>
+            <Button variant="outline">Documentation</Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+`;
+}
+async function generateThemeProvider(projectPath) {
+  const themeProviderContent = `import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "dark" | "light" | "system";
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+  theme: "system",
+  setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "vite-ui-theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+  );
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove("light", "dark");
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
+
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider");
+
+  return context;
+};
+`;
+  await fs2.writeFile(path2.join(projectPath, "src/contexts/ThemeProvider.tsx"), themeProviderContent);
+}
+
+// src/generators/readme.ts
+function generateReadme(config) {
+  const themeModesList = config.themeModes.map((m) => {
+    switch (m) {
+      case "light":
+        return "Light Mode";
+      case "dark":
+        return "Dark Mode";
+      case "high-contrast-light":
+        return "High Contrast Light";
+      case "high-contrast-dark":
+        return "High Contrast Dark";
+      default:
+        return m;
+    }
+  }).join(", ");
+  const featuresList = config.features.map((f) => {
+    switch (f) {
+      case "core":
+        return "Core UI Components";
+      case "forms":
+        return "Form Components";
+      case "feedback":
+        return "Feedback Components";
+      case "navigation":
+        return "Navigation Components";
+      case "data":
+        return "Data Display Components";
+      case "advanced":
+        return "Advanced Components";
+      case "charts":
+        return "Chart Components";
+      default:
+        return f;
+    }
+  }).join(", ");
+  return `# ${config.projectName}
+
+${config.description}
+
+Built with [Waypoint 2.0 Design System](https://waypoint-2-dot-0.lovable.app).
+
+## Features
+
+- **Theme Modes:** ${themeModesList}
+- **Theme Preset:** ${config.themePreset.charAt(0).toUpperCase() + config.themePreset.slice(1)}
+- **Components:** ${featuresList}
+${config.enableRTL ? "- **RTL Support:** Enabled" : ""}
+${config.enableFontScaling ? "- **Font Scaling:** Enabled for accessibility" : ""}
+${config.includeAuth ? "- **Authentication:** Scaffolding included" : ""}
+${config.includePageTemplates ? "- **Page Templates:** 27+ responsive layouts" : ""}
+${config.includeComposer ? "- **Composer:** Visual page builder tool" : ""}
+
+## Getting Started
+
+\`\`\`bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+\`\`\`
+
+## Project Structure
+
+\`\`\`
+${config.projectName}/
+\u251C\u2500\u2500 public/
+\u2502   \u2514\u2500\u2500 vite.svg
+\u251C\u2500\u2500 src/
+\u2502   \u251C\u2500\u2500 components/
+\u2502   \u2502   \u2514\u2500\u2500 ui/          # Waypoint UI components
+\u2502   \u251C\u2500\u2500 contexts/        # React contexts (theme, etc.)
+\u2502   \u251C\u2500\u2500 hooks/           # Custom React hooks
+\u2502   \u251C\u2500\u2500 lib/             # Utilities
+\u2502   \u251C\u2500\u2500 pages/           # Page components
+\u2502   \u251C\u2500\u2500 App.tsx
+\u2502   \u251C\u2500\u2500 main.tsx
+\u2502   \u2514\u2500\u2500 index.css        # Tailwind + design tokens
+\u251C\u2500\u2500 index.html
+\u251C\u2500\u2500 package.json
+\u251C\u2500\u2500 tailwind.config.ts
+\u251C\u2500\u2500 vite.config.ts
+\u2514\u2500\u2500 tsconfig.json
+\`\`\`
+
+## Customization
+
+### Theme Colors
+
+Edit the CSS variables in \`src/index.css\` to customize your color palette:
+
+\`\`\`css
+:root {
+  --primary: 222.2 47.4% 11.2%;
+  --secondary: 210 40% 96.1%;
+  /* ... other tokens */
+}
+\`\`\`
+
+### Adding Components
+
+Use the shadcn/ui CLI to add more components:
+
+\`\`\`bash
+npx shadcn-ui@latest add [component-name]
+\`\`\`
+
+## Documentation
+
+- [Waypoint 2.0 Design System](https://waypoint-2-dot-0.lovable.app)
+- [Component Library](https://waypoint-2-dot-0.lovable.app/components)
+- [Tailwind CSS](https://tailwindcss.com/docs)
+- [Radix UI](https://www.radix-ui.com/docs)
+
+## License
+
+MIT
+`;
+}
+
+// src/scaffolder.ts
+async function scaffoldProject(config) {
+  const projectPath = path3.resolve(process.cwd(), config.projectName);
+  if (await fs3.pathExists(projectPath)) {
+    throw new Error(`Directory "${config.projectName}" already exists`);
+  }
+  const spinner = ora("Creating project structure...").start();
+  try {
+    await fs3.ensureDir(projectPath);
+    await createDirectoryStructure(projectPath);
+    spinner.text = "Generating configuration files...";
+    await generateConfigFiles(projectPath, config);
+    spinner.text = "Generating styles...";
+    await generateStyleFiles(projectPath, config);
+    spinner.text = "Generating components...";
+    await generateComponents(projectPath, config);
+    spinner.text = "Generating application files...";
+    await generateAppFiles(projectPath, config);
+    spinner.text = "Generating documentation...";
+    await generateDocs(projectPath, config);
+    spinner.succeed("Project created successfully!");
+  } catch (error) {
+    spinner.fail("Failed to create project");
+    await fs3.remove(projectPath);
+    throw error;
+  }
+}
+async function createDirectoryStructure(projectPath) {
+  const directories = [
+    "src",
+    "src/components",
+    "src/components/ui",
+    "src/lib",
+    "src/hooks",
+    "src/contexts",
+    "src/pages",
+    "src/assets",
+    "public"
+  ];
+  for (const dir of directories) {
+    await fs3.ensureDir(path3.join(projectPath, dir));
+  }
+}
+async function generateConfigFiles(projectPath, config) {
+  const packageJson = generatePackageJson(config);
+  await fs3.writeJson(path3.join(projectPath, "package.json"), packageJson, { spaces: 2 });
+  const tailwindConfig = generateTailwindConfig(config);
+  await fs3.writeFile(path3.join(projectPath, "tailwind.config.ts"), tailwindConfig);
+  const viteConfig = generateViteConfig();
+  await fs3.writeFile(path3.join(projectPath, "vite.config.ts"), viteConfig);
+  const tsConfig = generateTsConfig();
+  await fs3.writeJson(path3.join(projectPath, "tsconfig.json"), tsConfig, { spaces: 2 });
+  const componentsJson = generateComponentsJson();
+  await fs3.writeJson(path3.join(projectPath, "components.json"), componentsJson, { spaces: 2 });
+  const postcssConfig = `export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+`;
+  await fs3.writeFile(path3.join(projectPath, "postcss.config.js"), postcssConfig);
+  const gitignore = `# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Build
+dist
+dist-ssr
+*.local
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# OS
+.DS_Store
+Thumbs.db
+`;
+  await fs3.writeFile(path3.join(projectPath, ".gitignore"), gitignore);
+  const indexHtml = `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${config.projectName}</title>
+    <meta name="description" content="${config.description}" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`;
+  await fs3.writeFile(path3.join(projectPath, "index.html"), indexHtml);
+}
+async function generateStyleFiles(projectPath, config) {
+  const indexCSS = generateIndexCSS(config);
+  await fs3.writeFile(path3.join(projectPath, "src/index.css"), indexCSS);
+}
+async function generateDocs(projectPath, config) {
+  const readme = generateReadme(config);
+  await fs3.writeFile(path3.join(projectPath, "README.md"), readme);
+}
+
+// src/utils/post-setup.ts
+import { exec } from "child_process";
+import { promisify } from "util";
+import ora2 from "ora";
+import chalk2 from "chalk";
+var execAsync = promisify(exec);
+async function installDependencies(projectName) {
+  const spinner = ora2("Installing dependencies...").start();
+  try {
+    await execAsync("npm install", { cwd: projectName });
+    spinner.succeed("Dependencies installed");
+  } catch (error) {
+    spinner.fail("Failed to install dependencies");
+    console.log(chalk2.yellow("  Run `npm install` manually to install dependencies"));
+  }
+}
+async function initializeGit(projectName) {
+  const spinner = ora2("Initializing git repository...").start();
+  try {
+    await execAsync("git init", { cwd: projectName });
+    await execAsync("git add .", { cwd: projectName });
+    await execAsync('git commit -m "Initial commit from create-waypoint-app"', { cwd: projectName });
+    spinner.succeed("Git repository initialized");
+  } catch (error) {
+    spinner.fail("Failed to initialize git");
+    console.log(chalk2.yellow("  Run `git init` manually to initialize the repository"));
+  }
+}
+
+// src/utils/messages.ts
+import chalk3 from "chalk";
+function printWelcome() {
+  console.log();
+  console.log(chalk3.cyan.bold("  \u2566 \u2566\u250C\u2500\u2510\u252C \u252C\u250C\u2500\u2510\u250C\u2500\u2510\u252C\u250C\u2510\u250C\u250C\u252C\u2510  \u250C\u2500\u2510 \u250C\u2500\u2510"));
+  console.log(chalk3.cyan.bold("  \u2551\u2551\u2551\u251C\u2500\u2524\u2514\u252C\u2518\u251C\u2500\u2518\u2502 \u2502\u2502\u2502\u2502\u2502 \u2502   \u250C\u2500\u2518 \u2502 \u2502"));
+  console.log(chalk3.cyan.bold("  \u255A\u2569\u255D\u2534 \u2534 \u2534 \u2534  \u2514\u2500\u2518\u2534\u2518\u2514\u2518 \u2534   \u2514\u2500\u2518o\u2514\u2500\u2518"));
+  console.log();
+  console.log(chalk3.white("  Create beautiful, accessible React applications"));
+  console.log(chalk3.dim("  with the Waypoint 2.0 Design System"));
+  console.log();
+}
+function printSuccess(config) {
+  console.log();
+  console.log(chalk3.green.bold("  \u2713 Success!") + ` Created ${chalk3.cyan(config.projectName)}`);
+  console.log();
+  console.log("  Next steps:");
+  console.log();
+  console.log(chalk3.cyan(`    cd ${config.projectName}`));
+  console.log(chalk3.cyan("    npm run dev"));
+  console.log();
+  console.log("  Documentation:");
+  console.log(chalk3.dim("    https://waypoint-2-dot-0.lovable.app"));
+  console.log();
+  console.log(chalk3.dim(`  Theme modes: ${config.themeModes.join(", ")}`));
+  console.log(chalk3.dim(`  Components: ${config.features.length} groups included`));
+  if (config.enableRTL) console.log(chalk3.dim("  RTL support: enabled"));
+  console.log();
+}
+
+// src/index.ts
+async function createProject() {
+  program.name("create-waypoint-app").description("Scaffold a new Waypoint 2.0 design system project").argument("[project-name]", "Name of the project").option("-t, --template <template>", "Use a template: minimal, full, dashboard, marketing, ecommerce").option("--no-install", "Skip dependency installation").option("--no-git", "Skip git initialization").option("-y, --yes", "Use default options (skip prompts)").parse();
+  const options = program.opts();
+  const args = program.args;
+  printWelcome();
+  let config;
+  if (options.yes) {
+    config = getDefaultConfig(args[0] || "waypoint-app");
+  } else {
+    config = await gatherProjectConfig(args[0]);
+  }
+  console.log();
+  console.log(chalk4.cyan("  Creating your Waypoint 2.0 project..."));
+  console.log();
+  try {
+    await scaffoldProject(config);
+    if (options.install !== false) {
+      await installDependencies(config.projectName);
+    }
+    if (options.git !== false) {
+      await initializeGit(config.projectName);
+    }
+    printSuccess(config);
+  } catch (error) {
+    console.error(chalk4.red("  Error creating project:"), error);
+    process.exit(1);
+  }
+}
+function getDefaultConfig(projectName) {
+  return {
+    projectName,
+    description: "A Waypoint 2.0 design system project",
+    themeModes: ["light", "dark"],
+    themePreset: "default",
+    enableRTL: false,
+    enableFontScaling: true,
+    features: ["core", "forms", "feedback", "navigation"],
+    includeAuth: false,
+    includePageTemplates: false,
+    includeComposer: false
+  };
+}
+export {
+  createProject
+};