create-brainerce-store 1.21.0 → 1.23.0

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.21.0",
+      version: "1.22.0",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"
@@ -220,8 +220,16 @@ async function runInteractive(defaults) {
           description: "Clean, neutral design with Inter font",
           value: "minimal"
         },
-        { title: "Luxury (coming soon)", value: "luxury", disabled: true },
-        { title: "Playful (coming soon)", value: "playful", disabled: true }
+        {
+          title: "Luxury",
+          description: "Dark, sophisticated design with Cormorant Garamond serif font",
+          value: "luxury"
+        },
+        {
+          title: "Playful",
+          description: "Warm, vibrant design with Nunito rounded font",
+          value: "playful"
+        }
       ],
       initial: 0
     },
@@ -260,8 +268,23 @@ var import_ejs = __toESM(require("ejs"));
 function getDirection(language) {
   return language === "he" ? "rtl" : "ltr";
 }
-function getFontConfig(language) {
-  if (language === "he") {
+function getFontConfig(language, theme) {
+  const isHebrew = language === "he";
+  if (theme === "luxury") {
+    const subsets = isHebrew ? "['latin']" : "['latin']";
+    return {
+      fontImport: "import { Cormorant_Garamond } from 'next/font/google';",
+      fontVariable: `const font = Cormorant_Garamond({ weight: ['400', '500', '600', '700'], subsets: ${subsets} });`
+    };
+  }
+  if (theme === "playful") {
+    const subsets = isHebrew ? "['latin']" : "['latin']";
+    return {
+      fontImport: "import { Nunito } from 'next/font/google';",
+      fontVariable: `const font = Nunito({ subsets: ${subsets} });`
+    };
+  }
+  if (isHebrew) {
     return {
       fontImport: "import { Rubik } from 'next/font/google';",
       fontVariable: "const font = Rubik({ subsets: ['hebrew', 'latin'] });"
@@ -288,7 +311,7 @@ async function scaffold(options) {
     throw new Error(`Template "${framework}" not found at ${baseDir}`);
   }
   const direction = getDirection(options.language);
-  const fontConfig = getFontConfig(options.language);
+  const fontConfig = getFontConfig(options.language, theme);
   const ogLocale = options.language === "he" ? "he_IL" : "en_US";
   const isMultiLocale = options.i18n?.enabled === true && options.i18n.supportedLocales.length > 1;
   const supportedLocales = options.i18n?.supportedLocales || [options.language];
@@ -303,7 +326,7 @@ async function scaffold(options) {
     fontImport: fontConfig.fontImport,
     fontVariable: fontConfig.fontVariable,
     ogLocale,
-    apiBaseUrl: "https://api.brainerce.com",
+    apiBaseUrl: options.apiBaseUrl || "https://api.brainerce.com",
     i18nEnabled: isMultiLocale,
     supportedLocales: JSON.stringify(supportedLocales),
     defaultLocale
@@ -387,47 +410,39 @@ async function copyWithEjs(srcDir, destDir, vars) {
 }
 
 // src/fetch-store-info.ts
-var import_https = __toESM(require("https"));
-var import_http = __toESM(require("http"));
 async function fetchStoreInfo(connectionId, baseUrl = "https://api.brainerce.com") {
   const url = `${baseUrl}/api/vc/${connectionId}/info`;
-  return new Promise((resolve, reject) => {
-    const client = url.startsWith("https") ? import_https.default : import_http.default;
-    const req = client.get(url, { timeout: 1e4 }, (res) => {
-      let data = "";
-      res.on("data", (chunk) => {
-        data += chunk;
-      });
-      res.on("end", () => {
-        if (res.statusCode && res.statusCode >= 400) {
-          if (res.statusCode === 404) {
-            reject(new Error(`Connection ID "${connectionId}" not found. Check your dashboard.`));
-          } else {
-            reject(new Error(`API returned status ${res.statusCode}`));
-          }
-          return;
-        }
-        try {
-          const json = JSON.parse(data);
-          resolve({
-            name: json.name || json.storeName || "My Store",
-            currency: json.currency || "USD",
-            language: json.language || "en",
-            ...json.i18n ? { i18n: json.i18n } : {}
-          });
-        } catch {
-          reject(new Error("Invalid response from API"));
-        }
-      });
-    });
-    req.on("error", (err) => {
-      reject(new Error(`Failed to connect to Brainerce API: ${err.message}`));
-    });
-    req.on("timeout", () => {
-      req.destroy();
-      reject(new Error("Request timed out"));
-    });
-  });
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 1e4);
+  let res;
+  try {
+    res = await fetch(url, { signal: controller.signal });
+  } catch (err) {
+    if (err.name === "AbortError") {
+      throw new Error("Request timed out");
+    }
+    throw new Error(`Failed to connect to Brainerce API: ${err.message}`);
+  } finally {
+    clearTimeout(timeout);
+  }
+  if (res.status === 404) {
+    throw new Error(`Connection ID "${connectionId}" not found. Check your dashboard.`);
+  }
+  if (!res.ok) {
+    throw new Error(`API returned status ${res.status}`);
+  }
+  let json;
+  try {
+    json = await res.json();
+  } catch {
+    throw new Error("Invalid response from API");
+  }
+  return {
+    name: json.name || json.storeName || "My Store",
+    currency: json.currency || "USD",
+    language: json.language || "en",
+    ...json.i18n ? { i18n: json.i18n } : {}
+  };
 }
 
 // src/utils/logger.ts
@@ -479,9 +494,9 @@ function createSpinner(text) {
 var pkg = require_package();
 async function checkForUpdate(name, current) {
   try {
-    const https2 = require("https");
+    const https = require("https");
     return await new Promise((resolve) => {
-      const req = https2.get(
+      const req = https.get(
         `https://registry.npmjs.org/${name}/latest`,
         { timeout: 3e3 },
         (res) => {
@@ -508,7 +523,10 @@ async function checkForUpdate(name, current) {
   }
 }
 var program = new import_commander.Command();
-program.name("create-brainerce-store").description("Scaffold a production-ready e-commerce storefront connected to Brainerce").version(pkg.version).argument("[project-name]", "Name for the project directory").option("--connection-id <id>", "Brainerce vibe-coded connection ID (vc_*)").option("--language <lang>", "Store language (en, he)").option("--framework <framework>", "Framework to use", "nextjs").option("--theme <theme>", "Theme to apply", "minimal").option("--pkg-manager <manager>", "Package manager (npm, pnpm, yarn, bun)").option("--no-git", "Skip git initialization").option("--no-install", "Skip dependency installation").action(async (projectNameArg, options) => {
+program.name("create-brainerce-store").description("Scaffold a production-ready e-commerce storefront connected to Brainerce").version(pkg.version).argument("[project-name]", "Name for the project directory").option("--connection-id <id>", "Brainerce vibe-coded connection ID (vc_*)").option(
+  "--api-url <url>",
+  "Brainerce API base URL (overrides BRAINERCE_API_URL env, defaults to https://api.brainerce.com)"
+).option("--language <lang>", "Store language (en, he)").option("--framework <framework>", "Framework to use", "nextjs").option("--theme <theme>", "Theme to apply", "minimal").option("--pkg-manager <manager>", "Package manager (npm, pnpm, yarn, bun)").option("--no-git", "Skip git initialization").option("--no-install", "Skip dependency installation").action(async (projectNameArg, options) => {
   try {
     logger.banner(pkg.version);
     const updateCheck = checkForUpdate(pkg.name, pkg.version);
@@ -519,6 +537,7 @@ program.name("create-brainerce-store").description("Scaffold a production-ready
       scaffoldInPlace = true;
     }
     let connectionId = options.connectionId;
+    const apiBaseUrl = (options.apiUrl || process.env.BRAINERCE_API_URL || "https://api.brainerce.com").replace(/\/$/, "");
     let language = options.language;
     let framework = options.framework;
     let theme = options.theme;
@@ -555,7 +574,7 @@ program.name("create-brainerce-store").description("Scaffold a production-ready
     spinner.start();
     let storeInfo;
     try {
-      storeInfo = await fetchStoreInfo(connectionId);
+      storeInfo = await fetchStoreInfo(connectionId, apiBaseUrl);
       const i18nStatus = storeInfo.i18n?.enabled && storeInfo.i18n.supportedLocales.length > 1 ? ` | i18n: ${storeInfo.i18n.supportedLocales.join(", ")}` : "";
       spinner.succeed(
         `Store: "${storeInfo.name}" | ${storeInfo.currency} | ${storeInfo.language}${i18nStatus}`
@@ -575,6 +594,7 @@ program.name("create-brainerce-store").description("Scaffold a production-ready
     await scaffold({
       projectName,
       connectionId,
+      apiBaseUrl,
       framework,
       theme,
       storeName: storeInfo.name,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.21.0",
+  "version": "1.23.0",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "bin": {
     "create-brainerce-store": "dist/index.js"

package/templates/nextjs/base/src/components/checkout/payment-step.tsx

@@ -534,15 +534,45 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
 
   if (sdk.renderType === 'iframe') {
     return (
-      <div className={cn('py-4', className)}>
-        <iframe
-          src={paymentIntent.clientSecret}
-          className="w-full border-0"
-          style={{ minHeight: '500px' }}
-          title={t('payment')}
-          allow="payment"
-        />
-      </div>
+      <>
+        {/* Modal overlay */}
+        <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/50 py-6 backdrop-blur-sm">
+          <div className="relative mx-4 w-full max-w-md rounded-2xl bg-white shadow-2xl">
+            {/* Close button */}
+            <button
+              onClick={() => {
+                window.location.href = `/checkout?checkout_id=${checkoutId}&canceled=true`;
+              }}
+              className="absolute end-3 top-3 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white/80 text-gray-500 shadow-sm transition-colors hover:bg-gray-100 hover:text-gray-700"
+              aria-label="Close"
+            >
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+              >
+                <path d="M1 1l12 12M13 1L1 13" />
+              </svg>
+            </button>
+            <iframe
+              src={paymentIntent.clientSecret}
+              className="w-full rounded-2xl border-0"
+              style={{ height: '80vh' }}
+              title={t('payment')}
+              allow="payment"
+            />
+          </div>
+        </div>
+        {/* Placeholder so the checkout layout doesn't collapse */}
+        <div className={cn('flex flex-col items-center justify-center py-12', className)}>
+          <LoadingSpinner size="lg" />
+          <p className="text-muted-foreground mt-4 text-sm">{t('preparingPayment')}</p>
+        </div>
+      </>
     );
   }
 

package/templates/nextjs/themes/luxury/globals.css

@@ -0,0 +1,399 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 20 14% 4%;
+    --foreground: 38 25% 86%;
+    --primary: 38 60% 55%;
+    --primary-foreground: 20 14% 4%;
+    --secondary: 20 10% 10%;
+    --secondary-foreground: 38 25% 86%;
+    --muted: 20 10% 12%;
+    --muted-foreground: 30 10% 50%;
+    --accent: 38 60% 55%;
+    --accent-foreground: 20 14% 4%;
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 38 25% 86%;
+    --border: 30 10% 16%;
+    --radius: 0.25rem;
+
+    /* Luxury-specific tokens */
+    --gold: 38 60% 55%;
+    --gold-light: 38 50% 72%;
+    --gold-dark: 38 70% 40%;
+    --surface: 20 12% 7%;
+    --surface-elevated: 20 10% 10%;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+    letter-spacing: 0.01em;
+    line-height: 1.7;
+  }
+
+  /* Luxury typography — editorial serif hierarchy */
+  h1,
+  h2,
+  h3,
+  h4 {
+    letter-spacing: 0.04em;
+    font-weight: 500;
+    line-height: 1.2;
+  }
+
+  h1 {
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    font-weight: 400;
+    line-height: 1.1;
+  }
+
+  h2 {
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+
+  /* Elegant link underline animation */
+  a:not([class*="bg-"]) {
+    position: relative;
+    transition: color 0.3s ease, opacity 0.3s ease;
+  }
+
+  main a:not([class*="bg-"]):not([class*="group"])::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    width: 0;
+    height: 1px;
+    background: hsl(var(--gold));
+    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+
+  main a:not([class*="bg-"]):not([class*="group"]):hover::after {
+    width: 100%;
+  }
+
+  /* Refined text selection */
+  ::selection {
+    background: hsl(var(--gold) / 0.3);
+    color: hsl(38 25% 96%);
+  }
+
+  /* Subtle body texture overlay */
+  body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.015'/%3E%3C/svg%3E");
+    pointer-events: none;
+    z-index: 9999;
+  }
+
+  /* Custom scrollbar */
+  ::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: hsl(20 14% 4%);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: hsl(30 10% 18%);
+    border-radius: 3px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--gold) / 0.5);
+  }
+
+  /* Smooth focus states */
+  :focus-visible {
+    outline: 1px solid hsl(var(--gold) / 0.5);
+    outline-offset: 3px;
+  }
+}
+
+@layer components {
+  /* ─── Buttons ─── */
+
+  /* Primary CTA — gold with shimmer sweep */
+  button[class*="bg-primary"],
+  a[class*="bg-primary"] {
+    position: relative;
+    overflow: hidden;
+    font-weight: 500;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    font-size: 0.78rem;
+    border: 1px solid hsl(var(--gold) / 0.3);
+    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+
+  button[class*="bg-primary"]:hover,
+  a[class*="bg-primary"]:hover {
+    box-shadow:
+      0 0 20px hsl(var(--gold) / 0.2),
+      0 4px 16px hsl(0 0% 0% / 0.3);
+    border-color: hsl(var(--gold) / 0.6);
+    opacity: 1 !important;
+  }
+
+  button[class*="bg-primary"]::after,
+  a[class*="bg-primary"]::after {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -75%;
+    width: 50%;
+    height: 200%;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      hsl(var(--gold-light) / 0.12),
+      hsl(var(--gold-light) / 0.2),
+      transparent
+    );
+    transform: skewX(-20deg);
+    transition: left 0.7s ease;
+    pointer-events: none;
+  }
+
+  button[class*="bg-primary"]:hover::after,
+  a[class*="bg-primary"]:hover::after {
+    left: 130%;
+  }
+
+  /* Secondary/ghost buttons — thin border, minimal */
+  [class*="bg-secondary"] {
+    border: 1px solid hsl(var(--border));
+    transition: all 0.3s ease;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    font-size: 0.8rem;
+  }
+
+  [class*="bg-secondary"]:hover {
+    border-color: hsl(var(--gold) / 0.4);
+    background: hsl(var(--surface-elevated)) !important;
+  }
+
+  /* ─── Product Cards ─── */
+
+  [class*="group"][class*="border"] {
+    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    border-color: hsl(var(--border) / 0.5);
+    background: hsl(var(--surface));
+  }
+
+  [class*="group"][class*="border"]:hover {
+    border-color: hsl(var(--gold) / 0.25);
+    box-shadow:
+      0 8px 40px hsl(0 0% 0% / 0.5),
+      0 0 0 1px hsl(var(--gold) / 0.08);
+  }
+
+  /* Product image — slow cinematic zoom */
+  [class*="group-hover\\:scale-105"] {
+    transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
+  }
+
+  /* Product image overlay on hover — subtle dark gradient */
+  [class*="group"] [class*="aspect-square"] {
+    position: relative;
+  }
+
+  [class*="group"]:hover [class*="aspect-square"]::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      to top,
+      hsl(20 14% 4% / 0.3),
+      transparent 50%
+    );
+    pointer-events: none;
+    transition: opacity 0.5s ease;
+  }
+
+  /* ─── Form Elements ─── */
+
+  input[class*="border-border"],
+  select[class*="border-border"],
+  textarea[class*="border-border"] {
+    background: hsl(var(--surface)) !important;
+    transition: all 0.3s ease;
+  }
+
+  input[class*="border-border"]:focus,
+  select[class*="border-border"]:focus,
+  textarea[class*="border-border"]:focus {
+    border-color: hsl(var(--gold) / 0.5) !important;
+    box-shadow: 0 0 0 3px hsl(var(--gold) / 0.08);
+    background: hsl(var(--surface-elevated)) !important;
+  }
+
+  /* Placeholder text */
+  input::placeholder,
+  textarea::placeholder {
+    letter-spacing: 0.03em;
+    font-size: 0.85rem;
+  }
+
+  /* ─── Navigation & Header ─── */
+
+  header[class*="sticky"] {
+    backdrop-filter: blur(16px) saturate(1.2);
+    background: hsl(20 14% 4% / 0.8) !important;
+    border-bottom: 1px solid hsl(var(--gold) / 0.08) !important;
+  }
+
+  /* Nav links */
+  nav a {
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+
+  /* ─── Badges & Tags ─── */
+
+  [class*="bg-muted"][class*="text-xs"] {
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    font-size: 0.6rem;
+    font-weight: 600;
+    border: 1px solid hsl(var(--border));
+  }
+
+  /* Sale badges — dark red, refined */
+  [class*="bg-destructive"] {
+    background: hsl(0 60% 38%) !important;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    font-size: 0.65rem;
+  }
+
+  /* ─── Price Display ─── */
+
+  /* Gold gradient on prices */
+  [class*="font-bold"][class*="text-lg"],
+  [class*="font-bold"][class*="text-xl"],
+  [class*="font-bold"][class*="text-2xl"] {
+    background: linear-gradient(
+      135deg,
+      hsl(var(--gold-light)),
+      hsl(var(--gold)),
+      hsl(var(--gold-dark))
+    );
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  /* Strikethrough original prices */
+  [class*="line-through"] {
+    opacity: 0.4;
+  }
+
+  /* ─── Dividers & Separators ─── */
+
+  hr {
+    border-color: hsl(var(--border) / 0.3);
+  }
+
+  /* Decorative gold separator */
+  main > section + section {
+    border-top: 1px solid hsl(var(--gold) / 0.06);
+  }
+
+  /* ─── Cart & Checkout ─── */
+
+  /* Sticky summary panel */
+  [class*="sticky"][class*="top-"] {
+    background: hsl(var(--surface));
+    border: 1px solid hsl(var(--border) / 0.5);
+  }
+}
+
+/* ─── Animations ─── */
+
+/* Elegant fade-in-up */
+@keyframes luxury-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+main > * {
+  animation: luxury-fade-in 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+
+main > *:nth-child(2) {
+  animation-delay: 0.1s;
+}
+
+main > *:nth-child(3) {
+  animation-delay: 0.2s;
+}
+
+main > *:nth-child(4) {
+  animation-delay: 0.3s;
+}
+
+/* Staggered grid item reveal */
+@keyframes luxury-grid-item {
+  from {
+    opacity: 0;
+    transform: translateY(12px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+[class*="grid"] > [class*="group"] {
+  animation: luxury-grid-item 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(2) {
+  animation-delay: 0.08s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(3) {
+  animation-delay: 0.16s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(4) {
+  animation-delay: 0.24s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(5) {
+  animation-delay: 0.32s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(6) {
+  animation-delay: 0.4s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(7) {
+  animation-delay: 0.48s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(8) {
+  animation-delay: 0.56s;
+}

package/templates/nextjs/themes/luxury/theme.json

@@ -0,0 +1,23 @@
+{
+  "name": "Luxury",
+  "description": "Dark, sophisticated design with Cormorant Garamond serif font and warm gold accents",
+  "font": {
+    "family": "Cormorant Garamond",
+    "import": "next/font/google"
+  },
+  "colors": {
+    "background": "20 14% 4%",
+    "foreground": "38 25% 86%",
+    "primary": "38 60% 55%",
+    "primary-foreground": "20 14% 4%",
+    "secondary": "20 10% 10%",
+    "secondary-foreground": "38 25% 86%",
+    "muted": "20 10% 12%",
+    "muted-foreground": "30 10% 50%",
+    "accent": "38 60% 55%",
+    "accent-foreground": "20 14% 4%",
+    "destructive": "0 72% 51%",
+    "border": "30 10% 16%"
+  },
+  "radius": "0.25rem"
+}

package/templates/nextjs/themes/playful/globals.css

@@ -0,0 +1,400 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 99%;
+    --foreground: 260 25% 16%;
+    --primary: 330 75% 56%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 260 50% 94%;
+    --secondary-foreground: 260 25% 16%;
+    --muted: 270 30% 95%;
+    --muted-foreground: 260 10% 45%;
+    --accent: 280 60% 60%;
+    --accent-foreground: 0 0% 100%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 270 20% 88%;
+    --radius: 1rem;
+
+    /* Playful-specific tokens */
+    --pink: 330 75% 56%;
+    --purple: 280 60% 60%;
+    --lavender: 260 50% 94%;
+    --peach: 20 80% 88%;
+    --mint: 160 50% 88%;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+    line-height: 1.65;
+  }
+
+  /* Playful typography — friendly, bold, tight */
+  h1,
+  h2,
+  h3,
+  h4 {
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+  }
+
+  h1 {
+    font-weight: 800;
+    letter-spacing: -0.03em;
+  }
+
+  /* Fun colorful selection */
+  ::selection {
+    background: hsl(var(--pink) / 0.25);
+    color: hsl(260 25% 16%);
+  }
+
+  /* Colorful focus rings */
+  :focus-visible {
+    outline: 2.5px solid hsl(var(--purple));
+    outline-offset: 3px;
+    border-radius: var(--radius);
+  }
+
+  /* Playful scrollbar */
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: hsl(var(--lavender));
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: linear-gradient(
+      180deg,
+      hsl(var(--pink)),
+      hsl(var(--purple))
+    );
+    border-radius: 999px;
+  }
+}
+
+@layer components {
+  /* ─── Buttons ─── */
+
+  /* Primary CTA — gradient with bounce and glow */
+  button[class*="bg-primary"],
+  a[class*="bg-primary"] {
+    font-weight: 700;
+    letter-spacing: 0.01em;
+    background: linear-gradient(
+      135deg,
+      hsl(var(--pink)),
+      hsl(330 80% 52%),
+      hsl(var(--purple))
+    ) !important;
+    background-size: 200% 200%;
+    box-shadow:
+      0 4px 14px hsl(var(--pink) / 0.3),
+      0 2px 6px hsl(var(--purple) / 0.15);
+    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    border: none;
+  }
+
+  button[class*="bg-primary"]:hover,
+  a[class*="bg-primary"]:hover {
+    transform: translateY(-3px) scale(1.03);
+    box-shadow:
+      0 8px 28px hsl(var(--pink) / 0.4),
+      0 4px 12px hsl(var(--purple) / 0.2);
+    background-position: 100% 0;
+    opacity: 1 !important;
+  }
+
+  button[class*="bg-primary"]:active,
+  a[class*="bg-primary"]:active {
+    transform: translateY(0) scale(0.97);
+    box-shadow: 0 2px 8px hsl(var(--pink) / 0.2);
+  }
+
+  /* Secondary buttons — soft pill with hover pop */
+  [class*="bg-secondary"] {
+    border-radius: 999px !important;
+    font-weight: 600;
+    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+
+  [class*="bg-secondary"]:hover {
+    background: hsl(var(--lavender)) !important;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 16px hsl(var(--purple) / 0.12);
+  }
+
+  /* ─── Product Cards ─── */
+
+  [class*="group"][class*="border"] {
+    border-radius: var(--radius);
+    overflow: hidden;
+    border: 2px solid hsl(var(--border));
+    background: white;
+    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+
+  [class*="group"][class*="border"]:hover {
+    transform: translateY(-6px) rotate(-0.5deg);
+    border-color: hsl(var(--pink) / 0.3);
+    box-shadow:
+      0 16px 40px hsl(var(--purple) / 0.12),
+      0 6px 16px hsl(var(--pink) / 0.1);
+  }
+
+  /* Product image hover — fun overshoot zoom */
+  [class*="group-hover\\:scale-105"] {
+    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
+  }
+
+  [class*="group"]:hover [class*="group-hover\\:scale-105"] {
+    transform: scale(1.08) !important;
+  }
+
+  /* ─── Form Elements ─── */
+
+  input[class*="border-border"],
+  select[class*="border-border"],
+  textarea[class*="border-border"] {
+    border-radius: var(--radius);
+    border-width: 2px;
+    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+
+  input[class*="border-border"]:focus,
+  select[class*="border-border"]:focus,
+  textarea[class*="border-border"]:focus {
+    border-color: hsl(var(--purple)) !important;
+    box-shadow: 0 0 0 4px hsl(var(--purple) / 0.1);
+    transform: scale(1.01);
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    color: hsl(var(--muted-foreground) / 0.6);
+  }
+
+  /* ─── Navigation & Header ─── */
+
+  header[class*="sticky"] {
+    border-bottom: none !important;
+    box-shadow: 0 4px 20px hsl(var(--purple) / 0.06);
+    background: hsl(0 0% 99% / 0.9) !important;
+    backdrop-filter: blur(10px);
+  }
+
+  /* Nav link hover — colorful underline */
+  nav a {
+    position: relative;
+    font-weight: 600;
+    transition: color 0.2s ease;
+  }
+
+  nav a::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 50%;
+    width: 0;
+    height: 3px;
+    background: linear-gradient(90deg, hsl(var(--pink)), hsl(var(--purple)));
+    border-radius: 999px;
+    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    transform: translateX(-50%);
+  }
+
+  nav a:hover::after {
+    width: 100%;
+  }
+
+  nav a:hover {
+    color: hsl(var(--pink));
+  }
+
+  /* ─── Badges & Tags ─── */
+
+  /* Category/filter pills */
+  [class*="bg-muted"][class*="text-xs"] {
+    border-radius: 999px;
+    font-weight: 700;
+    padding-left: 0.85rem;
+    padding-right: 0.85rem;
+    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+
+  [class*="bg-muted"][class*="text-xs"]:hover {
+    background: hsl(var(--lavender)) !important;
+    transform: scale(1.05);
+  }
+
+  /* Sale/discount badges — fun wiggle + pill */
+  [class*="bg-destructive"] {
+    border-radius: 999px;
+    font-weight: 800;
+    box-shadow: 0 2px 8px hsl(0 84% 60% / 0.3);
+    animation: playful-wiggle 3s ease-in-out infinite;
+  }
+
+  /* ─── Price Display ─── */
+
+  [class*="font-bold"][class*="text-lg"],
+  [class*="font-bold"][class*="text-xl"],
+  [class*="font-bold"][class*="text-2xl"] {
+    color: hsl(var(--pink));
+  }
+
+  /* Strikethrough — more playful */
+  [class*="line-through"] {
+    opacity: 0.4;
+    text-decoration-color: hsl(var(--purple) / 0.4);
+    text-decoration-thickness: 2px;
+  }
+
+  /* ─── Dividers ─── */
+
+  hr {
+    border: none;
+    height: 3px;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      hsl(var(--lavender)),
+      hsl(var(--pink) / 0.2),
+      hsl(var(--lavender)),
+      transparent
+    );
+    border-radius: 999px;
+  }
+
+  /* ─── Cart & Checkout ─── */
+
+  /* Sticky summary — playful card */
+  [class*="sticky"][class*="top-"] {
+    border-radius: var(--radius);
+    border: 2px solid hsl(var(--border));
+    box-shadow: 0 4px 20px hsl(var(--purple) / 0.06);
+  }
+
+  /* Quantity buttons */
+  button[class*="h-8"][class*="w-8"],
+  button[class*="h-10"][class*="w-10"] {
+    border-radius: 999px !important;
+    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+
+  button[class*="h-8"][class*="w-8"]:hover,
+  button[class*="h-10"][class*="w-10"]:hover {
+    transform: scale(1.1);
+    background: hsl(var(--lavender)) !important;
+  }
+
+  /* ─── Images ─── */
+
+  /* Product images — rounded */
+  [class*="aspect-square"] {
+    border-radius: calc(var(--radius) - 2px);
+    overflow: hidden;
+  }
+}
+
+/* ─── Animations ─── */
+
+/* Bouncy slide-up entrance */
+@keyframes playful-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(24px) scale(0.96);
+  }
+  50% {
+    transform: translateY(-6px) scale(1.01);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Wiggle for discount badges */
+@keyframes playful-wiggle {
+  0%,
+  85%,
+  100% {
+    transform: rotate(0deg);
+  }
+  90% {
+    transform: rotate(-3deg);
+  }
+  95% {
+    transform: rotate(3deg);
+  }
+}
+
+/* Pop-in for grid items */
+@keyframes playful-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.9) translateY(16px);
+  }
+  60% {
+    transform: scale(1.02) translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+main > * {
+  animation: playful-slide-up 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+main > *:nth-child(2) {
+  animation-delay: 0.06s;
+}
+
+main > *:nth-child(3) {
+  animation-delay: 0.12s;
+}
+
+/* Staggered grid items — playful pop */
+[class*="grid"] > [class*="group"] {
+  animation: playful-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(2) {
+  animation-delay: 0.06s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(3) {
+  animation-delay: 0.12s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(4) {
+  animation-delay: 0.18s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(5) {
+  animation-delay: 0.24s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(6) {
+  animation-delay: 0.3s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(7) {
+  animation-delay: 0.36s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(8) {
+  animation-delay: 0.42s;
+}

package/templates/nextjs/themes/playful/theme.json

@@ -0,0 +1,23 @@
+{
+  "name": "Playful",
+  "description": "Warm, vibrant design with Nunito rounded font and energetic pink-purple palette",
+  "font": {
+    "family": "Nunito",
+    "import": "next/font/google"
+  },
+  "colors": {
+    "background": "0 0% 99%",
+    "foreground": "260 25% 16%",
+    "primary": "330 75% 56%",
+    "primary-foreground": "0 0% 100%",
+    "secondary": "260 50% 94%",
+    "secondary-foreground": "260 25% 16%",
+    "muted": "270 30% 95%",
+    "muted-foreground": "260 10% 45%",
+    "accent": "280 60% 60%",
+    "accent-foreground": "0 0% 100%",
+    "destructive": "0 84% 60%",
+    "border": "270 20% 88%"
+  },
+  "radius": "1rem"
+}