create-brainerce-store 1.52.0 → 1.52.1

package/README.md

@@ -22,7 +22,7 @@ It's a starting point, not a lock-in: the entire look lives in `src/ui/` + `glob
 npm create brainerce-store@latest my-store -- --connection-id vc_xxx --canvas
 ```
 
-`--canvas` ships `src/ui/` as bare, semantic, essentially-unstyled skeletons (`DESIGN ME` markers included) with zero aesthetic opinion — commerce stays fully wired. It's the starting point for designing a storefront from scratch with an AI session, and the authoring substrate for new gallery designs. Canvas mode skips design packs and theme overlays entirely.
+`--canvas` ships `src/ui/` as bare, semantic, essentially-unstyled skeletons (`DESIGN ME` markers included) with zero aesthetic opinion — commerce stays fully wired. It's the starting point for designing a storefront from scratch with an AI session, and the authoring substrate for new gallery designs. Canvas mode skips the design pack entirely.
 
 ## AI-first by default
 
@@ -51,7 +51,6 @@ Full details: [TEMPLATE-ARCHITECTURE.md](./TEMPLATE-ARCHITECTURE.md).
 | `--language <lang>` | Store language (`en`, `he`) | fetched from store |
 | `--pkg-manager <pm>` | `npm`, `pnpm`, `yarn`, `bun` | auto-detected |
 | `--framework <fw>` | `nextjs` (Vite/Remix coming) | `nextjs` |
-| `--theme <name>` | Token theme (`minimal`, `luxury`, `playful`) — kept for backward compat | `minimal` |
 | `--api-url <url>` | Brainerce API base URL (or `BRAINERCE_API_URL` env) | auto-discovered |
 | `--no-git` | Skip git initialization | git on |
 | `--no-install` | Skip dependency installation | install on |

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.52.0",
+      version: "1.52.1",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"
@@ -322,7 +322,6 @@ async function runInteractive(defaults) {
     connectionId: defaults.connectionId || response.connectionId,
     language: response.language || defaults.language || "en",
     framework: defaults.framework || "nextjs",
-    theme: response.theme || defaults.theme || "minimal",
     design: response.design || defaults.design || "atelier",
     pkgManager: response.pkgManager || defaults.pkgManager || detectInvokingPackageManager()
   };
@@ -721,7 +720,7 @@ 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(
   "--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)").addOption(new import_commander.Option("--framework <framework>", "Framework to use").default("nextjs").hideHelp()).option("--theme <theme>", "Token theme to apply (kept for backward compat)", "minimal").addOption(new import_commander.Option("--design <design>", "Storefront design pack").hideHelp()).option("--pkg-manager <manager>", "Package manager (npm, pnpm, yarn, bun)").option(
+).option("--language <lang>", "Store language (en, he)").addOption(new import_commander.Option("--framework <framework>", "Framework to use").default("nextjs").hideHelp()).addOption(new import_commander.Option("--design <design>", "Storefront design pack").hideHelp()).option("--pkg-manager <manager>", "Package manager (npm, pnpm, yarn, bun)").option(
   "--canvas",
   "Scaffold src/ui as bare unstyled skeletons \u2014 a blank canvas for AI-driven design (commerce stays fully wired)"
 ).option("--no-git", "Skip git initialization").option("--no-install", "Skip dependency installation").action(async (projectNameArg, options) => {
@@ -755,7 +754,6 @@ program.name("create-brainerce-store").description("Scaffold a production-ready
     const VALID_LANGUAGES = ["en", "he"];
     const VALID_PKG_MANAGERS = ["npm", "pnpm", "yarn", "bun"];
     const VALID_FRAMEWORKS = ["nextjs"];
-    const VALID_THEMES = ["minimal", "luxury", "playful"];
     const VALID_DESIGNS = ["minimal", "atelier"];
     let language = options.language;
     if (language && !VALID_LANGUAGES.includes(language)) {
@@ -771,11 +769,6 @@ program.name("create-brainerce-store").description("Scaffold a production-ready
       );
       process.exit(1);
     }
-    let theme = options.theme;
-    if (!VALID_THEMES.includes(theme)) {
-      logger.error(`Invalid --theme "${theme}". Expected one of: ${VALID_THEMES.join(", ")}`);
-      process.exit(1);
-    }
     let design = options.design;
     if (design && !VALID_DESIGNS.includes(design)) {
       logger.error(`Invalid --design "${design}". Expected one of: ${VALID_DESIGNS.join(", ")}`);
@@ -829,7 +822,6 @@ program.name("create-brainerce-store").description("Scaffold a production-ready
         connectionId,
         language: languageDefault,
         framework,
-        theme,
         design,
         pkgManager,
         canvas
@@ -838,7 +830,6 @@ program.name("create-brainerce-store").description("Scaffold a production-ready
       connectionId = answers.connectionId;
       language = answers.language;
       framework = answers.framework;
-      theme = answers.theme;
       design = answers.design;
       pkgManager = answers.pkgManager;
     }
@@ -886,7 +877,6 @@ program.name("create-brainerce-store").description("Scaffold a production-ready
       connectionId,
       apiBaseUrl: resolvedApiUrl,
       framework,
-      theme,
       storeName: storeInfo.name,
       currency: storeInfo.currency,
       language: language || storeInfo.language,
@@ -907,9 +897,16 @@ program.name("create-brainerce-store").description("Scaffold a production-ready
         const gitOpts = { cwd, stdio: ["ignore", "ignore", "pipe"] };
         execFileSync("git", ["init"], gitOpts);
         execFileSync("git", ["add", "-A"], gitOpts);
+        let hasIdentity = true;
+        try {
+          execFileSync("git", ["config", "user.email"], gitOpts);
+        } catch {
+          hasIdentity = false;
+        }
+        const identityArgs = hasIdentity ? [] : ["-c", "user.name=Brainerce", "-c", "user.email=scaffold@brainerce.com"];
         execFileSync(
           "git",
-          ["commit", "-m", "Initial commit from create-brainerce-store"],
+          [...identityArgs, "commit", "-m", "Initial commit from create-brainerce-store"],
           gitOpts
         );
         gitSpinner.succeed("Git initialized");
@@ -922,8 +919,14 @@ program.name("create-brainerce-store").description("Scaffold a production-ready
     if (!skipInstall) {
       const installSpinner = createSpinner(`Installing dependencies with ${pkgManager}...`);
       installSpinner.start();
+      const installDir = scaffoldInPlace ? "." : projectName;
       try {
-        await installDependencies(scaffoldInPlace ? "." : projectName, pkgManager);
+        const installArgs = pkgManager === "pnpm" ? ["--ignore-workspace"] : [];
+        await installDependencies(installDir, pkgManager, { args: installArgs });
+        const fsExtra = require("fs-extra");
+        if (!await fsExtra.pathExists(import_path2.default.join(installDir, "node_modules"))) {
+          throw new Error("Install completed but node_modules was not created.");
+        }
         installSpinner.succeed("Dependencies installed");
       } catch (err) {
         installSpinner.fail("Dependency installation failed");

package/package.json

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

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

@@ -1,405 +0,0 @@
-@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%;
-    --input: 30 10% 16%;
-    --ring: 38 60% 55%;
-    --card: 20 12% 7%;
-    --card-foreground: 38 25% 86%;
-    --popover: 20 10% 10%;
-    --popover-foreground: 38 25% 86%;
-    --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

@@ -1,23 +0,0 @@
-{
-  "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/minimal/globals.css

@@ -1,36 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96%;
-    --muted-foreground: 0 0% 45%;
-    --accent: 0 0% 96%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84% 60%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 90%;
-    --input: 0 0% 90%;
-    --ring: 0 0% 9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 9%;
-    --radius: 0.5rem;
-  }
-
-  * {
-    @apply border-border;
-  }
-
-  body {
-    @apply bg-background text-foreground antialiased;
-  }
-}

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

@@ -1,23 +0,0 @@
-{
-  "name": "Minimal",
-  "description": "Clean, neutral design with Inter font and medium radius",
-  "font": {
-    "family": "Inter",
-    "import": "next/font/google"
-  },
-  "colors": {
-    "background": "0 0% 100%",
-    "foreground": "0 0% 9%",
-    "primary": "0 0% 9%",
-    "primary-foreground": "0 0% 98%",
-    "secondary": "0 0% 96%",
-    "secondary-foreground": "0 0% 9%",
-    "muted": "0 0% 96%",
-    "muted-foreground": "0 0% 45%",
-    "accent": "0 0% 96%",
-    "accent-foreground": "0 0% 9%",
-    "destructive": "0 84% 60%",
-    "border": "0 0% 90%"
-  },
-  "radius": "0.5rem"
-}

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

@@ -1,406 +0,0 @@
-@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%;
-    --input: 270 20% 88%;
-    --ring: 330 75% 56%;
-    --card: 0 0% 100%;
-    --card-foreground: 260 25% 16%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 260 25% 16%;
-    --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

@@ -1,23 +0,0 @@
-{
-  "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"
-}