popcn 0.0.1

package/dist/index.js

@@ -0,0 +1,1503 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { Command } from "commander";
+
+// src/commands/init.ts
+import * as fs3 from "fs";
+import * as path3 from "path";
+import chalk from "chalk";
+import prompts from "prompts";
+import ora from "ora";
+
+// src/utils/get-config.ts
+import * as fs from "fs";
+import * as path from "path";
+
+// src/schemas/config.ts
+import { z } from "zod";
+var componentsConfigSchema = z.object({
+  $schema: z.string().optional(),
+  style: z.string().default("aurorapop"),
+  skin: z.enum(["aurora", "neumopop", "glasspop"]).default("aurora"),
+  theme: z.string().default("cosmic"),
+  tailwind: z.object({
+    config: z.string(),
+    css: z.string()
+  }),
+  aliases: z.object({
+    components: z.string(),
+    utils: z.string(),
+    lib: z.string()
+  }),
+  registryUrl: z.string().url().optional()
+});
+function validateConfig(data) {
+  const result = componentsConfigSchema.safeParse(data);
+  if (result.success) {
+    return result.data;
+  }
+  return null;
+}
+
+// src/utils/get-config.ts
+var CONFIG_FILE = "components.json";
+function getConfigPath(cwd = process.cwd()) {
+  return path.join(cwd, CONFIG_FILE);
+}
+function configExists(cwd = process.cwd()) {
+  return fs.existsSync(getConfigPath(cwd));
+}
+function getConfig(cwd = process.cwd()) {
+  const configPath = getConfigPath(cwd);
+  if (!fs.existsSync(configPath)) {
+    return null;
+  }
+  try {
+    const content = fs.readFileSync(configPath, "utf-8");
+    const data = JSON.parse(content);
+    return validateConfig(data);
+  } catch {
+    return null;
+  }
+}
+function writeConfig(config, cwd = process.cwd()) {
+  const configPath = getConfigPath(cwd);
+  fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
+}
+function resolveAlias(alias, cwd = process.cwd()) {
+  if (alias.startsWith("@/")) {
+    return path.join(cwd, alias.slice(2));
+  }
+  return path.join(cwd, alias);
+}
+
+// src/utils/get-package-manager.ts
+import * as fs2 from "fs";
+import * as path2 from "path";
+function getPackageManager(cwd = process.cwd()) {
+  if (fs2.existsSync(path2.join(cwd, "bun.lockb"))) {
+    return "bun";
+  }
+  if (fs2.existsSync(path2.join(cwd, "pnpm-lock.yaml"))) {
+    return "pnpm";
+  }
+  if (fs2.existsSync(path2.join(cwd, "yarn.lock"))) {
+    return "yarn";
+  }
+  if (fs2.existsSync(path2.join(cwd, "package-lock.json"))) {
+    return "npm";
+  }
+  const packageJsonPath = path2.join(cwd, "package.json");
+  if (fs2.existsSync(packageJsonPath)) {
+    try {
+      const packageJson = JSON.parse(fs2.readFileSync(packageJsonPath, "utf-8"));
+      if (packageJson.packageManager) {
+        if (packageJson.packageManager.startsWith("pnpm")) return "pnpm";
+        if (packageJson.packageManager.startsWith("yarn")) return "yarn";
+        if (packageJson.packageManager.startsWith("bun")) return "bun";
+      }
+    } catch {
+    }
+  }
+  return "npm";
+}
+function getInstallCommand(pm) {
+  switch (pm) {
+    case "pnpm":
+      return "pnpm add";
+    case "yarn":
+      return "yarn add";
+    case "bun":
+      return "bun add";
+    default:
+      return "npm install";
+  }
+}
+
+// src/utils/templates.ts
+var AURORAPOP_CSS = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* =====================================================
+   AuroraPop Design System - CSS Tokens
+   ===================================================== */
+
+:root {
+  /* Base colors (r g b format for Tailwind alpha) */
+  --ap-background: 10 10 20;
+  --ap-foreground: 255 255 255;
+
+  /* Primary/Secondary - Cosmic theme default */
+  --ap-primary: 99 102 241;
+  --ap-primary-foreground: 255 255 255;
+  --ap-secondary: 168 85 247;
+  --ap-secondary-foreground: 255 255 255;
+
+  /* Aurora gradient tokens - Cosmic */
+  --ap-aurora-1: 99 102 241;
+  --ap-aurora-2: 139 92 246;
+  --ap-aurora-3: 56 189 248;
+
+  /* Glow */
+  --ap-glow-strength: 1;
+
+  /* Gradient control */
+  --ap-grad: 1;
+
+  /* =====================================================
+     Gradient Direction Tokens
+     ===================================================== */
+
+  /* Gradient angle (0=top, 90=right, 180=bottom, 270=left) */
+  --ap-grad-angle: 135deg;      /* Default: top-left to bottom-right */
+
+  /* Shine/shimmer angle */
+  --ap-shine-angle: 105deg;     /* Shimmer sweep angle */
+
+  /* Shine thickness (percentage for gradient spread) */
+  --ap-shine-width: 10%;        /* Width of the shine band (5%=thin, 10%=normal, 20%=wide) */
+
+  /* =====================================================
+     Animation Tokens
+     ===================================================== */
+
+  /* Duration tokens */
+  --ap-dur-1: 100ms;   /* Micro: button press */
+  --ap-dur-2: 200ms;   /* Quick: pop, snap */
+  --ap-dur-3: 300ms;   /* Standard: most transitions */
+  --ap-dur-4: 500ms;   /* Emphasis: entrance animations, morph */
+  --ap-dur-5: 800ms;   /* Dramatic: confetti, complex sequences */
+
+  /* Easing tokens */
+  --ap-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);       /* Bouncy */
+  --ap-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);           /* Soft */
+  --ap-ease-snap: cubic-bezier(0.2, 0, 0, 1);             /* Sharp */
+  --ap-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Elastic */
+
+  /* Motion control tokens */
+  --ap-motion: 1;        /* 1=enabled, 0=disabled (follows --ap-grad pattern) */
+  --ap-motion-scale: 1;  /* Intensity scale (0.5=subtle, 1=normal, 1.5=dramatic) */
+
+  /* Borders/Muted */
+  --ap-border: 63 63 70;
+  --ap-muted: 39 39 42;
+  --ap-muted-foreground: 161 161 170;
+
+  /* Ring */
+  --ap-ring: 99 102 241;
+
+  /* Radius */
+  --ap-radius: 0.5rem;
+}
+
+/* Dark theme (default) */
+.dark,
+[data-theme="dark"] {
+  --ap-background: 10 10 20;
+  --ap-foreground: 255 255 255;
+  --ap-border: 63 63 70;
+  --ap-muted: 39 39 42;
+  --ap-muted-foreground: 161 161 170;
+}
+
+/* Light theme */
+.light,
+[data-theme="light"] {
+  --ap-background: 250 250 252;
+  --ap-foreground: 15 15 20;
+  --ap-primary-foreground: 255 255 255;
+  --ap-secondary-foreground: 255 255 255;
+  --ap-border: 228 228 231;
+  --ap-muted: 244 244 245;
+  --ap-muted-foreground: 113 113 122;
+}
+
+/* Theme Preset: Sunset (Pink/Orange/Yellow) */
+.theme-sunset,
+[data-theme="sunset"] {
+  --ap-primary: 236 72 153;
+  --ap-secondary: 251 146 60;
+  --ap-aurora-1: 236 72 153;
+  --ap-aurora-2: 251 146 60;
+  --ap-aurora-3: 250 204 21;
+  --ap-ring: 236 72 153;
+}
+
+/* Theme Preset: Neon (Cyan/Magenta/Lime) */
+.theme-neon,
+[data-theme="neon"] {
+  --ap-primary: 6 182 212;
+  --ap-secondary: 217 70 239;
+  --ap-aurora-1: 6 182 212;
+  --ap-aurora-2: 217 70 239;
+  --ap-aurora-3: 163 230 53;
+  --ap-ring: 6 182 212;
+}
+
+/* Theme Preset: Mono (Grayscale) */
+.theme-mono,
+[data-theme="mono"] {
+  --ap-primary: 161 161 170;
+  --ap-primary-foreground: 10 10 20;
+  --ap-secondary: 113 113 122;
+  --ap-secondary-foreground: 255 255 255;
+  --ap-aurora-1: 161 161 170;
+  --ap-aurora-2: 113 113 122;
+  --ap-aurora-3: 82 82 91;
+  --ap-ring: 161 161 170;
+  --ap-glow-strength: 0.5;
+}
+
+/* Gradient disable */
+.ap-no-gradient {
+  --ap-grad: 0;
+}
+
+/* Motion disable */
+.ap-no-motion {
+  --ap-motion: 0;
+}
+
+/* Respect system reduced-motion preference */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --ap-motion: 0;
+    --ap-motion-scale: 0;
+  }
+}
+
+/* =====================================================
+   Base Styles
+   ===================================================== */
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+  }
+}
+
+/* =====================================================
+   Aurora Background Component
+   ===================================================== */
+
+.aurora-bg {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  overflow: hidden;
+  background: rgb(var(--ap-background));
+}
+
+.aurora-bg::before {
+  content: "";
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(
+      ellipse 80% 50% at 20% 40%,
+      rgba(var(--ap-aurora-1), 0.15),
+      transparent 50%
+    ),
+    radial-gradient(
+      ellipse 60% 40% at 80% 60%,
+      rgba(var(--ap-aurora-2), 0.12),
+      transparent 50%
+    ),
+    radial-gradient(
+      ellipse 50% 60% at 40% 80%,
+      rgba(var(--ap-aurora-3), 0.1),
+      transparent 50%
+    );
+  animation: aurora-shift 15s ease infinite;
+  background-size: 200% 200%;
+}
+
+@keyframes aurora-shift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+/* =====================================================
+   Utility Classes
+   ===================================================== */
+
+/* Aurora gradient text */
+.text-aurora {
+  background: linear-gradient(
+    var(--ap-grad-angle, 135deg),
+    rgb(var(--ap-aurora-1)),
+    rgb(var(--ap-aurora-2)),
+    rgb(var(--ap-aurora-3))
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+/* Aurora gradient background */
+.bg-aurora {
+  background: linear-gradient(
+    var(--ap-grad-angle, 135deg),
+    rgb(var(--ap-aurora-1)),
+    rgb(var(--ap-aurora-2)),
+    rgb(var(--ap-aurora-3))
+  );
+}
+
+/* Shine effect overlay (use on ::before pseudo-element) */
+.shine-effect::before {
+  background: linear-gradient(
+    var(--ap-shine-angle, 105deg),
+    transparent calc(50% - var(--ap-shine-width, 10%)),
+    rgba(255, 255, 255, 0.35) 50%,
+    transparent calc(50% + var(--ap-shine-width, 10%))
+  );
+}
+
+/* Switch aurora variant */
+.switch-aurora[data-state="checked"] {
+  background: linear-gradient(
+    var(--ap-grad-angle, 135deg),
+    rgb(var(--ap-aurora-1)),
+    rgb(var(--ap-aurora-2)),
+    rgb(var(--ap-aurora-3))
+  );
+}
+
+/* ===== Gradient Direction Utilities ===== */
+.ap-grad-t { --ap-grad-angle: 0deg; }
+.ap-grad-tr { --ap-grad-angle: 45deg; }
+.ap-grad-r { --ap-grad-angle: 90deg; }
+.ap-grad-br { --ap-grad-angle: 135deg; }
+.ap-grad-b { --ap-grad-angle: 180deg; }
+.ap-grad-bl { --ap-grad-angle: 225deg; }
+.ap-grad-l { --ap-grad-angle: 270deg; }
+.ap-grad-tl { --ap-grad-angle: 315deg; }
+
+/* Shine direction utilities */
+.ap-shine-t { --ap-shine-angle: 0deg; }
+.ap-shine-tr { --ap-shine-angle: 45deg; }
+.ap-shine-r { --ap-shine-angle: 90deg; }
+.ap-shine-br { --ap-shine-angle: 135deg; }
+.ap-shine-b { --ap-shine-angle: 180deg; }
+.ap-shine-bl { --ap-shine-angle: 225deg; }
+.ap-shine-l { --ap-shine-angle: 270deg; }
+.ap-shine-tl { --ap-shine-angle: 315deg; }
+
+/* Shine width utilities */
+.ap-shine-thin { --ap-shine-width: 5%; }
+.ap-shine-normal { --ap-shine-width: 10%; }
+.ap-shine-wide { --ap-shine-width: 20%; }
+.ap-shine-ultra { --ap-shine-width: 30%; }
+
+/* Glass effect */
+.glass {
+  background: rgba(var(--ap-background), 0.6);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(var(--ap-border), 0.3);
+}
+
+/* Glow effect on hover */
+.glow-hover {
+  transition: box-shadow 0.3s ease;
+}
+
+.glow-hover:hover {
+  box-shadow:
+    0 0 20px rgba(var(--ap-primary), calc(0.3 * var(--ap-glow-strength))),
+    0 0 40px rgba(var(--ap-secondary), calc(0.2 * var(--ap-glow-strength)));
+}
+
+/* =====================================================
+   Animation Utility Classes
+   ===================================================== */
+
+@layer utilities {
+  /* ===== Transition Presets ===== */
+  .ap-trans-pop {
+    transition-property: transform, opacity, box-shadow;
+    transition-duration: var(--ap-dur-2);
+    transition-timing-function: var(--ap-ease-pop);
+  }
+
+  .ap-trans-snap {
+    transition-property: transform, opacity, box-shadow;
+    transition-duration: var(--ap-dur-1);
+    transition-timing-function: var(--ap-ease-snap);
+  }
+
+  .ap-trans-soft {
+    transition-property: transform, opacity, box-shadow;
+    transition-duration: var(--ap-dur-3);
+    transition-timing-function: var(--ap-ease-soft);
+  }
+
+  .ap-trans-spring {
+    transition-property: transform, opacity, box-shadow;
+    transition-duration: var(--ap-dur-3);
+    transition-timing-function: var(--ap-ease-spring);
+  }
+
+  /* ===== Hover States ===== */
+  .ap-hover-float {
+    transition: transform var(--ap-dur-3) var(--ap-ease-soft);
+  }
+  .ap-hover-float:hover {
+    transform: translateY(calc(-4px * var(--ap-motion-scale, 1)));
+  }
+
+  .ap-hover-glow {
+    transition: box-shadow var(--ap-dur-3) var(--ap-ease-soft);
+  }
+  .ap-hover-glow:hover {
+    box-shadow: 0 0 calc(20px * var(--ap-motion-scale, 1)) rgba(var(--ap-primary), 0.4);
+  }
+
+  .ap-hover-scale {
+    transition: transform var(--ap-dur-2) var(--ap-ease-pop);
+  }
+  .ap-hover-scale:hover {
+    transform: scale(calc(1 + 0.05 * var(--ap-motion-scale, 1)));
+  }
+
+  .ap-hover-tilt {
+    transition: transform var(--ap-dur-2) var(--ap-ease-pop);
+  }
+  .ap-hover-tilt:hover {
+    transform: rotate(calc(3deg * var(--ap-motion-scale, 1)));
+  }
+
+  /* ===== Active States ===== */
+  .ap-active-squish {
+    transition: transform var(--ap-dur-1) var(--ap-ease-snap);
+  }
+  .ap-active-squish:active {
+    transform: scale(0.95, 0.97);
+  }
+
+  .ap-active-press {
+    transition: transform var(--ap-dur-1) var(--ap-ease-snap);
+  }
+  .ap-active-press:active {
+    transform: scale(0.97);
+  }
+
+  /* ===== Enter Animations ===== */
+  .ap-enter-pop {
+    animation: ap-scale-in var(--ap-dur-2) var(--ap-ease-pop) forwards;
+  }
+
+  .ap-enter-slide {
+    animation: ap-slide-up var(--ap-dur-3) var(--ap-ease-spring) forwards;
+  }
+
+  .ap-enter-bounce {
+    animation: ap-bounce var(--ap-dur-3) var(--ap-ease-pop) forwards;
+  }
+
+  .ap-enter-jelly {
+    animation: ap-jelly var(--ap-dur-3) var(--ap-ease-spring) forwards;
+  }
+
+  /* ===== Exit Animations ===== */
+  .ap-exit-fade {
+    animation: ap-scale-out var(--ap-dur-2) var(--ap-ease-soft) forwards;
+  }
+
+  .ap-exit-slide {
+    animation: ap-slide-down var(--ap-dur-2) var(--ap-ease-soft) forwards;
+  }
+
+  /* ===== Special Effects ===== */
+  .ap-wiggle {
+    animation: ap-wiggle var(--ap-dur-4) var(--ap-ease-snap);
+  }
+
+  .ap-pulse-ring {
+    animation: ap-pulse-ring var(--ap-dur-4) var(--ap-ease-soft) forwards;
+  }
+
+  .ap-confetti {
+    animation: ap-confetti var(--ap-dur-5) var(--ap-ease-soft) forwards;
+  }
+
+  /* ===== Motion Reduce ===== */
+  .ap-motion-reduce,
+  .ap-motion-reduce * {
+    --ap-motion: 0 !important;
+    --ap-motion-scale: 0 !important;
+    animation: none !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Global reduced motion override */
+@media (prefers-reduced-motion: reduce) {
+  .ap-hover-float:hover,
+  .ap-hover-scale:hover,
+  .ap-hover-tilt:hover,
+  .ap-active-squish:active,
+  .ap-active-press:active {
+    transform: none;
+  }
+
+  .ap-enter-pop,
+  .ap-enter-slide,
+  .ap-enter-bounce,
+  .ap-enter-jelly,
+  .ap-exit-fade,
+  .ap-exit-slide,
+  .ap-wiggle,
+  .ap-pulse-ring,
+  .ap-confetti {
+    animation: none;
+    opacity: 1;
+  }
+}
+`;
+var NEUMOPOP_CSS = `
+/* =====================================================
+   NeumoPop Skin - Neumorphism + Pop Design
+   ===================================================== */
+
+[data-skin="neumopop"] {
+  --ap-shadow-light: rgba(255, 255, 255, 0.05);
+  --ap-shadow-dark: rgba(0, 0, 0, 0.4);
+  --ap-elev-1: 4px 4px 8px var(--ap-shadow-dark),
+               -4px -4px 8px var(--ap-shadow-light);
+  --ap-elev-2: 6px 6px 12px var(--ap-shadow-dark),
+               -6px -6px 12px var(--ap-shadow-light);
+  --ap-elev-3: 10px 10px 20px var(--ap-shadow-dark),
+               -10px -10px 20px var(--ap-shadow-light);
+  --ap-inset-1: inset 2px 2px 5px var(--ap-shadow-dark),
+                inset -2px -2px 5px var(--ap-shadow-light);
+  --ap-inset-2: inset 4px 4px 8px var(--ap-shadow-dark),
+                inset -4px -4px 8px var(--ap-shadow-light);
+  --ap-glow-strength: 0.3;
+}
+
+[data-skin="neumopop"].light,
+.light[data-skin="neumopop"],
+.light [data-skin="neumopop"] {
+  --ap-shadow-light: rgba(255, 255, 255, 0.7);
+  --ap-shadow-dark: rgba(0, 0, 0, 0.12);
+}
+
+[data-skin="neumopop"] .bg-aurora {
+  background: rgb(var(--ap-primary));
+  box-shadow: var(--ap-elev-2);
+}
+
+[data-skin="neumopop"] .text-aurora {
+  background: none;
+  -webkit-background-clip: unset;
+  background-clip: unset;
+  color: rgb(var(--ap-primary));
+}
+
+[data-skin="neumopop"] .glass {
+  background: rgb(var(--ap-muted));
+  backdrop-filter: none;
+  border: 1px solid rgba(var(--ap-border), 0.2);
+  box-shadow: var(--ap-elev-1);
+}
+
+[data-skin="neumopop"] .shine-effect::before {
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.1) 0%,
+    transparent 50%
+  );
+}
+
+[data-skin="neumopop"] .glow-hover:hover {
+  box-shadow: var(--ap-elev-3);
+}
+
+[data-skin="neumopop"] .switch-aurora[data-state="checked"] {
+  background: rgb(var(--ap-primary));
+  box-shadow: var(--ap-inset-2);
+}
+
+[data-skin="neumopop"] .aurora-bg::before {
+  background: none;
+  animation: none;
+}
+
+[data-skin="neumopop"] button.bg-aurora:active,
+[data-skin="neumopop"] [role="button"].bg-aurora:active {
+  box-shadow: var(--ap-inset-1);
+}
+
+[data-skin="neumopop"] input,
+[data-skin="neumopop"] textarea,
+[data-skin="neumopop"] select {
+  box-shadow: var(--ap-inset-1);
+}
+`;
+var GLASSPOP_CSS = `
+/* =====================================================
+   GlassPop Skin - Apple Liquid Glass Design
+   ===================================================== */
+
+[data-skin="glasspop"] {
+  --ap-glass-bg: var(--ap-background);
+  --ap-glass-alpha: 0.22;
+  --ap-glass-blur: 32px;
+  --ap-glass-saturation: 1.7;
+  --ap-glass-brightness: 1.08;
+  --ap-glass-contrast: 1.05;
+  --ap-glass-border-alpha: 0.22;
+  --ap-glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.18),
+                   inset 0 -1px 0 rgba(0, 0, 0, 0.18);
+  --ap-glass-highlight-alpha: 0.18;
+  --ap-glass-shadow-alpha: 0.22;
+  --ap-liquid-shine-alpha: 0.22;
+  --ap-liquid-shine-speed: 4s;
+  --ap-liquid-noise-alpha: 0.015;
+  --ap-liquid-refract-alpha: 0.12;
+  --ap-glass: 1;
+  --ap-liquid: 1;
+  --ap-glow-strength: 0.5;
+  --ap-surface: rgba(var(--ap-glass-bg), var(--ap-glass-alpha));
+  --ap-surface-border: rgba(var(--ap-border), var(--ap-glass-border-alpha));
+  --ap-surface-shadow: 0 10px 40px rgba(0, 0, 0, var(--ap-glass-shadow-alpha)),
+                        0 2px 8px rgba(0, 0, 0, calc(var(--ap-glass-shadow-alpha) * 0.6));
+}
+
+[data-skin="glasspop"].light,
+.light[data-skin="glasspop"],
+.light [data-skin="glasspop"] {
+  --ap-glass-alpha: 0.38;
+  --ap-glass-blur: 34px;
+  --ap-glass-saturation: 1.5;
+  --ap-glass-brightness: 1.02;
+  --ap-glass-contrast: 1.02;
+  --ap-glass-border-alpha: 0.35;
+  --ap-glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.65),
+                   inset 0 -1px 0 rgba(0, 0, 0, 0.06);
+  --ap-glass-highlight-alpha: 0.22;
+  --ap-glass-shadow-alpha: 0.08;
+  --ap-liquid-shine-alpha: 0.24;
+  --ap-liquid-refract-alpha: 0.14;
+}
+
+.ap-no-glass { --ap-glass: 0; }
+.ap-no-liquid { --ap-liquid: 0; }
+
+[data-skin="glasspop"] .glass {
+  position: relative;
+  background:
+    linear-gradient(
+      135deg,
+      rgba(255, 255, 255, var(--ap-glass-highlight-alpha)) 0%,
+      rgba(255, 255, 255, 0) 45%
+    ),
+    linear-gradient(
+      315deg,
+      rgba(0, 0, 0, 0.22) 0%,
+      rgba(0, 0, 0, 0) 50%
+    ),
+    var(--ap-surface);
+  backdrop-filter: blur(var(--ap-glass-blur)) saturate(var(--ap-glass-saturation))
+    brightness(var(--ap-glass-brightness)) contrast(var(--ap-glass-contrast));
+  -webkit-backdrop-filter: blur(var(--ap-glass-blur)) saturate(var(--ap-glass-saturation))
+    brightness(var(--ap-glass-brightness)) contrast(var(--ap-glass-contrast));
+  border: 1px solid var(--ap-surface-border);
+  box-shadow: var(--ap-glass-edge), var(--ap-surface-shadow);
+}
+
+[data-skin="glasspop"] .glass::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background:
+    radial-gradient(
+      120% 140% at 0% 0%,
+      rgba(255, 255, 255, var(--ap-glass-highlight-alpha)) 0%,
+      transparent 55%
+    ),
+    radial-gradient(
+      120% 120% at 100% 0%,
+      rgba(255, 255, 255, calc(var(--ap-glass-highlight-alpha) * 0.7)) 0%,
+      transparent 60%
+    ),
+    radial-gradient(
+      160% 120% at 50% 120%,
+      rgba(0, 0, 0, calc(var(--ap-liquid-refract-alpha) * 0.7)) 0%,
+      transparent 60%
+    );
+  pointer-events: none;
+}
+
+[data-skin="glasspop"] .bg-aurora {
+  position: relative;
+  background: rgba(var(--ap-primary), 0.7);
+  backdrop-filter: blur(var(--ap-glass-blur)) saturate(var(--ap-glass-saturation))
+    brightness(var(--ap-glass-brightness)) contrast(var(--ap-glass-contrast));
+  -webkit-backdrop-filter: blur(var(--ap-glass-blur)) saturate(var(--ap-glass-saturation))
+    brightness(var(--ap-glass-brightness)) contrast(var(--ap-glass-contrast));
+  border: 1px solid rgba(255, 255, 255, calc(var(--ap-glass-border-alpha) + 0.08));
+  box-shadow: var(--ap-glass-edge), var(--ap-surface-shadow);
+}
+
+[data-skin="glasspop"] .aurora-bg {
+  background-color: rgb(var(--ap-background));
+  background-image: linear-gradient(
+    var(--ap-grad-angle, 135deg),
+    rgb(var(--ap-aurora-1)),
+    rgb(var(--ap-aurora-2)),
+    rgb(var(--ap-aurora-3))
+  );
+}
+
+[data-skin="glasspop"] .ap-dialog-overlay {
+  background: rgba(0, 0, 0, 0.35);
+}
+
+[data-skin="glasspop"].light .ap-dialog-overlay,
+.light [data-skin="glasspop"] .ap-dialog-overlay {
+  background: rgba(15, 23, 42, 0.18);
+}
+
+[data-skin="glasspop"] .ap-dialog-content {
+  position: fixed;
+  z-index: 60;
+  background:
+    linear-gradient(
+      135deg,
+      rgba(255, 255, 255, calc(var(--ap-glass-highlight-alpha) * 0.8)) 0%,
+      rgba(255, 255, 255, 0) 45%
+    ),
+    var(--ap-surface);
+  backdrop-filter: blur(calc(var(--ap-glass-blur) * 0.9))
+    saturate(var(--ap-glass-saturation))
+    brightness(var(--ap-glass-brightness))
+    contrast(var(--ap-glass-contrast));
+  -webkit-backdrop-filter: blur(calc(var(--ap-glass-blur) * 0.9))
+    saturate(var(--ap-glass-saturation))
+    brightness(var(--ap-glass-brightness))
+    contrast(var(--ap-glass-contrast));
+  border-color: rgba(255, 255, 255, calc(var(--ap-glass-border-alpha) + 0.08));
+  box-shadow: var(--ap-glass-edge),
+              0 24px 80px rgba(0, 0, 0, 0.35);
+}
+
+[data-skin="glasspop"] .bg-aurora::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, calc(var(--ap-glass-highlight-alpha) * 0.8)) 0%,
+    rgba(255, 255, 255, 0) 55%
+  );
+  pointer-events: none;
+}
+
+[data-skin="glasspop"] .glow-hover:hover {
+  box-shadow: var(--ap-glass-edge),
+              0 8px 32px rgba(var(--ap-primary), calc(0.15 * var(--ap-glow-strength))),
+              0 2px 8px rgba(0, 0, 0, var(--ap-glass-shadow-alpha));
+}
+
+[data-skin="glasspop"] .switch-aurora[data-state="checked"] {
+  background: rgba(var(--ap-primary), 0.75);
+  backdrop-filter: blur(10px) saturate(1.4) brightness(1.05);
+  -webkit-backdrop-filter: blur(10px) saturate(1.4) brightness(1.05);
+  box-shadow: var(--ap-glass-edge);
+}
+
+[data-skin="glasspop"] button.bg-aurora:active,
+[data-skin="glasspop"] [role="button"].bg-aurora:active {
+  background: rgba(var(--ap-primary), 0.85);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15),
+              0 1px 2px rgba(0, 0, 0, var(--ap-glass-shadow-alpha));
+  transform: scale(0.98);
+}
+
+[data-skin="glasspop"] input,
+[data-skin="glasspop"] textarea,
+[data-skin="glasspop"] select {
+  background:
+    linear-gradient(
+      135deg,
+      rgba(255, 255, 255, calc(var(--ap-glass-highlight-alpha) * 0.6)) 0%,
+      rgba(255, 255, 255, 0) 45%
+    ),
+    rgba(var(--ap-glass-bg), calc(var(--ap-glass-alpha) * 0.55));
+  backdrop-filter: blur(calc(var(--ap-glass-blur) * 0.55)) saturate(var(--ap-glass-saturation))
+    brightness(var(--ap-glass-brightness));
+  -webkit-backdrop-filter: blur(calc(var(--ap-glass-blur) * 0.55)) saturate(var(--ap-glass-saturation))
+    brightness(var(--ap-glass-brightness));
+  border-color: var(--ap-surface-border);
+  box-shadow: var(--ap-glass-edge),
+              inset 0 1px 3px rgba(0, 0, 0, calc(var(--ap-glass-shadow-alpha) * 0.4));
+}
+
+[data-skin="glasspop"] input:focus,
+[data-skin="glasspop"] textarea:focus,
+[data-skin="glasspop"] select:focus {
+  border-color: rgba(var(--ap-primary), 0.6);
+  box-shadow: var(--ap-glass-edge),
+              0 0 0 3px rgba(var(--ap-primary), 0.15),
+              inset 0 1px 3px rgba(0, 0, 0, calc(var(--ap-glass-shadow-alpha) * 0.3));
+}
+`;
+var UTILS_TS = `import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+`;
+
+// src/commands/init.ts
+function detectFramework(cwd) {
+  const packageJsonPath = path3.join(cwd, "package.json");
+  if (!fs3.existsSync(packageJsonPath)) {
+    return null;
+  }
+  try {
+    const packageJson = JSON.parse(fs3.readFileSync(packageJsonPath, "utf-8"));
+    const deps = {
+      ...packageJson.dependencies,
+      ...packageJson.devDependencies
+    };
+    if (deps.next) return "next";
+    if (deps.astro) return "astro";
+    if (deps.vite) return "vite";
+  } catch {
+  }
+  return null;
+}
+function detectTailwind(cwd) {
+  const possibleConfigs = [
+    "tailwind.config.js",
+    "tailwind.config.ts",
+    "tailwind.config.mjs",
+    "tailwind.config.cjs"
+  ];
+  for (const config of possibleConfigs) {
+    if (fs3.existsSync(path3.join(cwd, config))) {
+      return config;
+    }
+  }
+  return null;
+}
+function detectCssFile(cwd, framework) {
+  const possiblePaths = [
+    "app/globals.css",
+    "src/app/globals.css",
+    "styles/globals.css",
+    "src/styles/globals.css",
+    "src/index.css",
+    "src/styles.css",
+    "styles/index.css"
+  ];
+  for (const cssPath of possiblePaths) {
+    if (fs3.existsSync(path3.join(cwd, cssPath))) {
+      return cssPath;
+    }
+  }
+  if (framework === "next") return "app/globals.css";
+  if (framework === "vite") return "src/index.css";
+  if (framework === "astro") return "src/styles/globals.css";
+  return "styles/globals.css";
+}
+async function initCommand(options) {
+  const cwd = process.cwd();
+  console.log();
+  console.log(chalk.bold("  popcn/ui ") + chalk.dim("- AuroraPop Design System"));
+  console.log();
+  if (configExists(cwd) && !options.force) {
+    console.log(
+      chalk.yellow("  Project already initialized. Use --force to reinitialize.")
+    );
+    return;
+  }
+  const detectedFramework = detectFramework(cwd);
+  const detectedTailwind = detectTailwind(cwd);
+  const pm = getPackageManager(cwd);
+  let framework = detectedFramework || "next";
+  let tailwindConfig = detectedTailwind || "tailwind.config.ts";
+  let cssFile = detectCssFile(cwd, detectedFramework);
+  let componentsPath = "@/components";
+  let utilsPath = "@/lib/utils";
+  let skin = "aurora";
+  let theme = "cosmic";
+  if (!options.yes && !options.defaults) {
+    const response = await prompts([
+      {
+        type: "select",
+        name: "framework",
+        message: "Which framework are you using?",
+        choices: [
+          { title: "Next.js", value: "next" },
+          { title: "Vite + React", value: "vite" },
+          { title: "Astro + React", value: "astro" }
+        ],
+        initial: framework === "next" ? 0 : framework === "vite" ? 1 : 2
+      },
+      {
+        type: "text",
+        name: "tailwindConfig",
+        message: "Where is your Tailwind config?",
+        initial: tailwindConfig
+      },
+      {
+        type: "text",
+        name: "cssFile",
+        message: "Where is your global CSS file?",
+        initial: cssFile
+      },
+      {
+        type: "text",
+        name: "componentsPath",
+        message: "Where should components be installed?",
+        initial: componentsPath
+      },
+      {
+        type: "text",
+        name: "utilsPath",
+        message: "Where should utils be installed?",
+        initial: utilsPath
+      },
+      {
+        type: "select",
+        name: "skin",
+        message: "Which skin style?",
+        choices: [
+          { title: "Aurora (Gradient-driven)", value: "aurora" },
+          { title: "NeumoPop (Neumorphism)", value: "neumopop" },
+          { title: "GlassPop (Liquid Glass)", value: "glasspop" }
+        ],
+        initial: 0
+      },
+      {
+        type: "select",
+        name: "theme",
+        message: "Which theme preset?",
+        choices: [
+          { title: "Cosmic (Indigo/Purple/Sky)", value: "cosmic" },
+          { title: "Sunset (Pink/Orange/Yellow)", value: "sunset" },
+          { title: "Neon (Cyan/Magenta/Lime)", value: "neon" }
+        ],
+        initial: 0
+      }
+    ]);
+    if (!response.framework) {
+      console.log(chalk.red("  Cancelled."));
+      return;
+    }
+    framework = response.framework;
+    tailwindConfig = response.tailwindConfig;
+    cssFile = response.cssFile;
+    componentsPath = response.componentsPath;
+    utilsPath = response.utilsPath;
+    skin = response.skin;
+    theme = response.theme;
+  }
+  const spinner = ora("Initializing popcn/ui...").start();
+  try {
+    const config = {
+      $schema: "https://popcnui.com/schema.json",
+      style: "aurorapop",
+      skin,
+      theme,
+      tailwind: {
+        config: tailwindConfig,
+        css: cssFile
+      },
+      aliases: {
+        components: componentsPath,
+        utils: utilsPath,
+        lib: utilsPath.replace("/utils", "")
+      }
+    };
+    writeConfig(config, cwd);
+    spinner.text = "Created components.json";
+    const resolveAlias2 = (alias) => {
+      if (alias.startsWith("@/")) {
+        return path3.join(cwd, alias.slice(2));
+      }
+      return path3.join(cwd, alias);
+    };
+    const componentsDir = resolveAlias2(componentsPath);
+    const libDir = resolveAlias2(config.aliases.lib);
+    fs3.mkdirSync(path3.join(componentsDir, "ui"), { recursive: true });
+    fs3.mkdirSync(libDir, { recursive: true });
+    const utilsFilePath = path3.join(libDir, "utils.ts");
+    if (!fs3.existsSync(utilsFilePath) || options.force) {
+      fs3.writeFileSync(utilsFilePath, UTILS_TS);
+      spinner.text = "Created lib/utils.ts";
+    }
+    const cssFilePath = path3.join(cwd, cssFile);
+    const cssDir = path3.dirname(cssFilePath);
+    fs3.mkdirSync(cssDir, { recursive: true });
+    const skinCssMap = {
+      aurora: AURORAPOP_CSS,
+      neumopop: AURORAPOP_CSS + "\n" + NEUMOPOP_CSS,
+      glasspop: AURORAPOP_CSS + "\n" + GLASSPOP_CSS
+    };
+    const cssTemplate = skinCssMap[skin] ?? AURORAPOP_CSS;
+    if (!fs3.existsSync(cssFilePath)) {
+      fs3.writeFileSync(cssFilePath, cssTemplate);
+      spinner.text = `Created ${cssFile}`;
+    } else {
+      const existingCss = fs3.readFileSync(cssFilePath, "utf-8");
+      if (!existingCss.includes("--ap-primary")) {
+        const tailwindDirectives = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+`;
+        const cssWithoutDirectives = existingCss.replace(/@tailwind base;?\n?/g, "").replace(/@tailwind components;?\n?/g, "").replace(/@tailwind utilities;?\n?/g, "").trim();
+        fs3.writeFileSync(
+          cssFilePath,
+          AURORAPOP_CSS + "\n\n/* Your existing styles */\n" + cssWithoutDirectives
+        );
+        spinner.text = `Updated ${cssFile} with AuroraPop tokens`;
+      }
+    }
+    spinner.succeed(chalk.green("Initialized popcn/ui"));
+    console.log();
+    console.log(chalk.dim("  Next steps:"));
+    console.log();
+    console.log(
+      chalk.cyan(`  ${getInstallCommand(pm)} class-variance-authority clsx tailwind-merge`)
+    );
+    console.log();
+    console.log(chalk.dim("  Then add components:"));
+    console.log(chalk.cyan("  npx popcn add button"));
+    console.log();
+  } catch (error) {
+    spinner.fail(chalk.red("Failed to initialize"));
+    console.error(error);
+    process.exit(1);
+  }
+}
+
+// src/commands/add.ts
+import * as fs4 from "fs";
+import * as path4 from "path";
+import chalk2 from "chalk";
+import prompts2 from "prompts";
+import ora2 from "ora";
+
+// src/schemas/registry.ts
+import { z as z2 } from "zod";
+var registryItemTypeSchema = z2.enum([
+  "ui",
+  "component",
+  "util",
+  "style",
+  "theme",
+  "hook",
+  "lib"
+]);
+var registryFileSchema = z2.object({
+  path: z2.string(),
+  type: z2.string(),
+  content: z2.string()
+});
+var registryComponentSchema = z2.object({
+  name: z2.string(),
+  type: registryItemTypeSchema,
+  description: z2.string().optional(),
+  files: z2.array(registryFileSchema),
+  dependencies: z2.array(z2.string()).optional(),
+  devDependencies: z2.array(z2.string()).optional(),
+  registryDependencies: z2.array(z2.string()).optional()
+});
+var registryStyleSchema = z2.object({
+  name: z2.string(),
+  type: z2.literal("style"),
+  description: z2.string().optional(),
+  cssVars: z2.object({
+    dark: z2.record(z2.string()),
+    light: z2.record(z2.string())
+  }),
+  tailwindConfig: z2.record(z2.unknown()).optional()
+});
+var registryThemeSchema = z2.object({
+  name: z2.string(),
+  type: z2.literal("theme"),
+  label: z2.string().optional(),
+  description: z2.string().optional(),
+  cssVars: z2.record(z2.string())
+});
+var registryIndexSchema = z2.object({
+  version: z2.string(),
+  components: z2.array(
+    z2.object({
+      name: z2.string(),
+      type: z2.string(),
+      description: z2.string().optional(),
+      dependencies: z2.array(z2.string()).optional(),
+      registryDependencies: z2.array(z2.string()).optional()
+    })
+  ),
+  styles: z2.array(
+    z2.object({
+      name: z2.string(),
+      type: z2.string(),
+      description: z2.string().optional()
+    })
+  ),
+  themes: z2.array(
+    z2.object({
+      name: z2.string(),
+      type: z2.string(),
+      description: z2.string().optional()
+    })
+  )
+});
+
+// src/utils/registry.ts
+var DEFAULT_REGISTRY_URL = "https://popcnui.com/api/registry";
+function getRegistryUrl() {
+  return process.env.POPCN_REGISTRY_URL || DEFAULT_REGISTRY_URL;
+}
+var RegistryError = class extends Error {
+  constructor(message, code) {
+    super(message);
+    this.code = code;
+    this.name = "RegistryError";
+  }
+};
+async function fetchRegistry() {
+  const url = getRegistryUrl();
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new RegistryError(
+        `Failed to fetch registry: ${response.statusText}`,
+        response.status === 404 ? "NOT_FOUND" : "NETWORK"
+      );
+    }
+    const data = await response.json();
+    const result = registryIndexSchema.safeParse(data);
+    if (!result.success) {
+      throw new RegistryError(
+        `Invalid registry format: ${result.error.errors[0]?.message}`,
+        "VALIDATION"
+      );
+    }
+    return result.data;
+  } catch (err) {
+    if (err instanceof RegistryError) throw err;
+    throw new RegistryError(
+      `Network error: ${err instanceof Error ? err.message : "Unknown error"}`,
+      "NETWORK"
+    );
+  }
+}
+async function fetchComponent(name) {
+  const url = `${getRegistryUrl()}/ui/${name}`;
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new RegistryError(
+        `Component "${name}" not found`,
+        response.status === 404 ? "NOT_FOUND" : "NETWORK"
+      );
+    }
+    const data = await response.json();
+    const result = registryComponentSchema.safeParse(data);
+    if (!result.success) {
+      throw new RegistryError(
+        `Invalid component format for "${name}": ${result.error.errors[0]?.message}`,
+        "VALIDATION"
+      );
+    }
+    return result.data;
+  } catch (err) {
+    if (err instanceof RegistryError) throw err;
+    throw new RegistryError(
+      `Failed to fetch component "${name}": ${err instanceof Error ? err.message : "Unknown error"}`,
+      "NETWORK"
+    );
+  }
+}
+
+// src/commands/add.ts
+async function addCommand(components, options) {
+  const cwd = process.cwd();
+  console.log();
+  if (!configExists(cwd)) {
+    console.log(
+      chalk2.red("  Project not initialized. Run ") + chalk2.cyan("popcn init") + chalk2.red(" first.")
+    );
+    return;
+  }
+  const config = getConfig(cwd);
+  if (!config) {
+    console.log(chalk2.red("  Failed to read components.json"));
+    return;
+  }
+  if (!components || components.length === 0) {
+    const spinner = ora2("Fetching available components...").start();
+    try {
+      const registry = await fetchRegistry();
+      spinner.stop();
+      console.log(chalk2.bold("  Available components:"));
+      console.log();
+      for (const component of registry.components) {
+        console.log(
+          chalk2.cyan(`  ${component.name}`) + chalk2.dim(` - ${component.description || ""}`)
+        );
+      }
+      console.log();
+      console.log(chalk2.dim("  Usage: ") + chalk2.cyan("popcn add <component>"));
+      console.log();
+      if (!options.yes) {
+        const response = await prompts2({
+          type: "multiselect",
+          name: "components",
+          message: "Which components would you like to add?",
+          choices: registry.components.map((c) => ({
+            title: c.name,
+            value: c.name,
+            description: c.description
+          }))
+        });
+        if (response.components && response.components.length > 0) {
+          components = response.components;
+        } else {
+          return;
+        }
+      } else {
+        return;
+      }
+    } catch (error) {
+      spinner.fail(chalk2.red("Failed to fetch registry"));
+      console.error(error);
+      return;
+    }
+  }
+  const pm = getPackageManager(cwd);
+  const allDependencies = /* @__PURE__ */ new Set();
+  const installedComponents = [];
+  for (const componentName of components) {
+    const spinner = ora2(`Adding ${componentName}...`).start();
+    try {
+      const component = await fetchComponent(componentName);
+      if (component.dependencies) {
+        component.dependencies.forEach((dep) => allDependencies.add(dep));
+      }
+      if (component.registryDependencies && component.registryDependencies.length > 0) {
+        for (const depName of component.registryDependencies) {
+          if (!installedComponents.includes(depName)) {
+            spinner.text = `Adding dependency: ${depName}...`;
+            const depComponent = await fetchComponent(depName);
+            await writeComponentFiles(depComponent, config, cwd, options.overwrite);
+            installedComponents.push(depName);
+            if (depComponent.dependencies) {
+              depComponent.dependencies.forEach((dep) => allDependencies.add(dep));
+            }
+          }
+        }
+      }
+      await writeComponentFiles(component, config, cwd, options.overwrite);
+      installedComponents.push(componentName);
+      spinner.succeed(chalk2.green(`Added ${componentName}`));
+    } catch (error) {
+      spinner.fail(chalk2.red(`Failed to add ${componentName}`));
+      if (error instanceof Error) {
+        console.log(chalk2.dim(`  ${error.message}`));
+      }
+    }
+  }
+  if (allDependencies.size > 0) {
+    console.log();
+    console.log(chalk2.dim("  Install dependencies:"));
+    console.log();
+    console.log(
+      chalk2.cyan(`  ${getInstallCommand(pm)} ${Array.from(allDependencies).join(" ")}`)
+    );
+    console.log();
+  }
+}
+async function writeComponentFiles(component, config, cwd, overwrite) {
+  if (!config) return;
+  for (const file of component.files) {
+    let outputPath;
+    if (file.path.startsWith("components/ui/")) {
+      const fileName = path4.basename(file.path);
+      const componentsDir = resolveAlias(config.aliases.components, cwd);
+      outputPath = path4.join(componentsDir, "ui", fileName);
+    } else if (file.path.startsWith("lib/")) {
+      const fileName = path4.basename(file.path);
+      const libDir = resolveAlias(config.aliases.lib, cwd);
+      outputPath = path4.join(libDir, fileName);
+    } else {
+      outputPath = path4.join(cwd, file.path);
+    }
+    if (fs4.existsSync(outputPath) && !overwrite) {
+      console.log(chalk2.dim(`  Skipping ${file.path} (already exists)`));
+      continue;
+    }
+    fs4.mkdirSync(path4.dirname(outputPath), { recursive: true });
+    let content = file.content;
+    if (config.aliases.utils !== "@/lib/utils") {
+      content = content.replace(
+        /@\/lib\/utils/g,
+        config.aliases.utils
+      );
+    }
+    fs4.writeFileSync(outputPath, content);
+  }
+}
+
+// src/commands/list.ts
+import chalk3 from "chalk";
+import ora3 from "ora";
+function groupRegistry(registry) {
+  return {
+    components: registry.components || [],
+    styles: registry.styles || [],
+    themes: registry.themes || []
+  };
+}
+function printGroupedItems(title, items) {
+  if (items.length === 0) return;
+  console.log();
+  console.log(chalk3.bold.cyan(`  ${title}`));
+  console.log(chalk3.dim("  " + "\u2500".repeat(40)));
+  for (const item of items) {
+    const description = item.description ? chalk3.dim(` - ${item.description}`) : "";
+    console.log(`  ${chalk3.white(item.name)}${description}`);
+  }
+}
+async function listCommand(options) {
+  console.log();
+  const spinner = ora3("Fetching registry...").start();
+  try {
+    const registry = await fetchRegistry();
+    spinner.stop();
+    if (options.json) {
+      const grouped2 = groupRegistry(registry);
+      console.log(JSON.stringify(grouped2, null, 2));
+      return;
+    }
+    console.log(chalk3.bold("  popcn/ui Registry"));
+    console.log();
+    const grouped = groupRegistry(registry);
+    printGroupedItems("Components", grouped.components);
+    printGroupedItems("Styles", grouped.styles);
+    printGroupedItems("Themes", grouped.themes);
+    const totalCount = grouped.components.length + grouped.styles.length + grouped.themes.length;
+    console.log();
+    console.log(chalk3.dim(`  ${totalCount} items available`));
+    console.log();
+    console.log(chalk3.dim("  Usage:"));
+    console.log(chalk3.cyan("    popcn add <component>") + chalk3.dim(" - Add a component"));
+    console.log(chalk3.cyan("    popcn list --json") + chalk3.dim("    - Output as JSON"));
+    console.log();
+  } catch (error) {
+    spinner.fail(chalk3.red("Failed to fetch registry"));
+    if (error instanceof Error) {
+      console.log(chalk3.dim(`  ${error.message}`));
+    }
+    process.exit(1);
+  }
+}
+
+// package.json
+var package_default = {
+  name: "popcn",
+  version: "0.0.1",
+  description: "CLI for popcn/ui - AuroraPop design system",
+  publishConfig: {
+    access: "public"
+  },
+  type: "module",
+  bin: "./dist/index.js",
+  main: "./dist/index.js",
+  types: "./dist/index.d.ts",
+  exports: {
+    ".": {
+      types: "./dist/index.d.ts",
+      default: "./dist/index.js"
+    }
+  },
+  files: [
+    "dist"
+  ],
+  engines: {
+    node: ">=18.0.0"
+  },
+  scripts: {
+    dev: "tsup --watch",
+    build: "tsup",
+    test: "vitest run",
+    "test:watch": "vitest",
+    clean: "rm -rf dist node_modules",
+    "pub:beta": "pnpm build && pnpm publish --no-git-checks --access public --tag beta",
+    "pub:next": "pnpm build && pnpm publish --no-git-checks --access public --tag next",
+    "pub:release": "pnpm build && pnpm publish --access public"
+  },
+  dependencies: {
+    chalk: "^5.3.0",
+    commander: "^12.1.0",
+    "fs-extra": "^11.2.0",
+    ora: "^8.1.1",
+    prompts: "^2.4.2",
+    zod: "^3.24.1"
+  },
+  devDependencies: {
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^22.10.0",
+    "@types/prompts": "^2.4.9",
+    tsup: "^8.3.5",
+    typescript: "^5.7.2",
+    vitest: "^2.1.8"
+  },
+  keywords: [
+    "cli",
+    "ui",
+    "components",
+    "aurora",
+    "aurorapop",
+    "tailwind",
+    "radix-ui",
+    "design-system",
+    "gradient",
+    "motion"
+  ],
+  author: {
+    name: "popcn",
+    url: "https://popcnui.com"
+  },
+  license: "MIT",
+  repository: {
+    type: "git",
+    url: "https://github.com/popcn/ui.git",
+    directory: "packages/popcn"
+  }
+};
+
+// src/index.ts
+var program = new Command();
+program.name("popcn").description("CLI for popcn/ui - AuroraPop design system").version(package_default.version);
+program.command("init").description("Initialize popcn/ui in your project").option("-y, --yes", "Skip confirmation prompts", false).option("-d, --defaults", "Use default configuration", false).option("-f, --force", "Force overwrite existing files", false).action(initCommand);
+program.command("add").description("Add a component to your project").argument("[components...]", "Components to add").option("-y, --yes", "Skip confirmation prompts", false).option("-o, --overwrite", "Overwrite existing files", false).option("-p, --path <path>", "Custom path for components").action(addCommand);
+program.command("list").description("List all available components, styles, and themes").option("--json", "Output as JSON", false).action(listCommand);
+program.parse();