create-brainerce-store 1.61.0 → 1.63.0

package/templates/nextjs/base/tailwind.config.ts

@@ -1,69 +1,69 @@
-import type { Config } from 'tailwindcss';
-import tailwindcssAnimate from 'tailwindcss-animate';
-
-const config: Config = {
-  darkMode: ['class'],
-  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
-  theme: {
-    extend: {
-      colors: {
-        primary: 'hsl(var(--primary))',
-        'primary-foreground': 'hsl(var(--primary-foreground))',
-        secondary: 'hsl(var(--secondary))',
-        'secondary-foreground': 'hsl(var(--secondary-foreground))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        muted: 'hsl(var(--muted))',
-        'muted-foreground': 'hsl(var(--muted-foreground))',
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        destructive: 'hsl(var(--destructive))',
-        'destructive-foreground': 'hsl(var(--destructive-foreground))',
-        accent: 'hsl(var(--accent))',
-        'accent-foreground': 'hsl(var(--accent-foreground))',
-        card: 'hsl(var(--card))',
-        'card-foreground': 'hsl(var(--card-foreground))',
-        popover: 'hsl(var(--popover))',
-        'popover-foreground': 'hsl(var(--popover-foreground))',
-        // Extended tokens used by design packs (defined in their globals.css).
-        // Harmless when a design doesn't set the CSS variables — the classes
-        // simply aren't used by the base ui.
-        surface: 'hsl(var(--surface))',
-        plinth: 'hsl(var(--plinth))',
-      },
-      fontFamily: {
-        // Design packs set --font-sans / --font-serif via next/font variables
-        // in app/layout.tsx; the fallbacks keep font-sans/font-serif usable
-        // even when a layout doesn't define them.
-        sans: ['var(--font-sans)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
-        serif: ['var(--font-serif)', 'ui-serif', 'Georgia', 'serif'],
-      },
-      borderRadius: {
-        // shadcn/ui convention: every radius derives from the --radius token,
-        // so `rounded`, `rounded-md`, `rounded-lg` all follow the theme.
-        DEFAULT: 'var(--radius)',
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      keyframes: {
-        'accordion-down': {
-          from: { height: '0' },
-          to: { height: 'var(--radix-accordion-content-height)' },
-        },
-        'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
-          to: { height: '0' },
-        },
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-      },
-    },
-  },
-  plugins: [tailwindcssAnimate],
-};
-
-export default config;
+import type { Config } from 'tailwindcss';
+import tailwindcssAnimate from 'tailwindcss-animate';
+
+const config: Config = {
+  darkMode: ['class'],
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  theme: {
+    extend: {
+      colors: {
+        primary: 'hsl(var(--primary))',
+        'primary-foreground': 'hsl(var(--primary-foreground))',
+        secondary: 'hsl(var(--secondary))',
+        'secondary-foreground': 'hsl(var(--secondary-foreground))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        muted: 'hsl(var(--muted))',
+        'muted-foreground': 'hsl(var(--muted-foreground))',
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        destructive: 'hsl(var(--destructive))',
+        'destructive-foreground': 'hsl(var(--destructive-foreground))',
+        accent: 'hsl(var(--accent))',
+        'accent-foreground': 'hsl(var(--accent-foreground))',
+        card: 'hsl(var(--card))',
+        'card-foreground': 'hsl(var(--card-foreground))',
+        popover: 'hsl(var(--popover))',
+        'popover-foreground': 'hsl(var(--popover-foreground))',
+        // Extended tokens used by design packs (defined in their globals.css).
+        // Harmless when a design doesn't set the CSS variables — the classes
+        // simply aren't used by the base ui.
+        surface: 'hsl(var(--surface))',
+        plinth: 'hsl(var(--plinth))',
+      },
+      fontFamily: {
+        // Design packs set --font-sans / --font-serif via next/font variables
+        // in app/layout.tsx; the fallbacks keep font-sans/font-serif usable
+        // even when a layout doesn't define them.
+        sans: ['var(--font-sans)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+        serif: ['var(--font-serif)', 'ui-serif', 'Georgia', 'serif'],
+      },
+      borderRadius: {
+        // shadcn/ui convention: every radius derives from the --radius token,
+        // so `rounded`, `rounded-md`, `rounded-lg` all follow the theme.
+        DEFAULT: 'var(--radius)',
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
+  },
+  plugins: [tailwindcssAnimate],
+};
+
+export default config;

package/templates/nextjs/designs/atelier/app-overlay/layout.tsx.ejs

@@ -7,6 +7,7 @@ import { SiteHeader } from '@/ui/layout/site-header';
 import { SiteFooter } from '@/ui/layout/site-footer';
 import { CartDrawer } from '@/ui/cart/cart-drawer';
 import { BrainerceBotWidget } from '@/components/brainerce-bot';
+import { TrackingBootstrap } from '@/components/tracking-bootstrap';
 import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce';
 import { getDirection, getMessages, supportedLocales } from '@/i18n';
 import { getNonce } from '@/core/lib/nonce';
@@ -118,6 +119,10 @@ export default async function RootLayout({
       </head>
       <body className={`${sans.variable} ${serif.variable} font-sans`}>
         <StoreProvider locale={locale} initialStoreInfo={storeInfo} initialMessages={messages}>
+          {/* Mounted ahead of the page tree on purpose: React runs effects in
+              tree order, so booting the tags here guarantees fbq/ttq exist by
+              the time a page component fires its first e-commerce event. */}
+          <TrackingBootstrap />
           <div className="min-h-screen flex flex-col">
             <AnnouncementBar announcements={announcements} />
             <SiteHeader header={siteHeader} storeName={<%- storeNameJs %>} />
@@ -140,6 +145,7 @@ import { SiteHeader } from '@/ui/layout/site-header';
 import { SiteFooter } from '@/ui/layout/site-footer';
 import { CartDrawer } from '@/ui/cart/cart-drawer';
 import { BrainerceBotWidget } from '@/components/brainerce-bot';
+import { TrackingBootstrap } from '@/components/tracking-bootstrap';
 import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce';
 import { getNonce } from '@/core/lib/nonce';
 import './globals.css';
@@ -239,6 +245,10 @@ export default async function RootLayout({
       </head>
       <body className={`${sans.variable} ${serif.variable} font-sans`}>
         <StoreProvider initialStoreInfo={storeInfo}>
+          {/* Mounted ahead of the page tree on purpose: React runs effects in
+              tree order, so booting the tags here guarantees fbq/ttq exist by
+              the time a page component fires its first e-commerce event. */}
+          <TrackingBootstrap />
           <div className="min-h-screen flex flex-col">
             <AnnouncementBar announcements={announcements} />
             <SiteHeader header={siteHeader} storeName={<%- storeNameJs %>} />