npm - @mars-stack/cli - Versions diffs - 0.2.2 → 2.0.0 - Mend

@mars-stack/cli 0.2.2 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/index.js +267 -56
package/dist/index.js.map +1 -1
package/package.json +3 -2
package/template/.cursor/skills/add-audit-log/SKILL.md +4 -2
package/template/src/styles/brand.css +12 -14
package/template/src/styles/globals.css +1 -0

package/dist/index.js CHANGED Viewed

@@ -686,6 +686,21 @@ var init_blog = __esm({
   }
 });
+// src/utils/client-file-patch.ts
+function insertImportAfterDirectives(content, lineToInsert) {
+  if (CLIENT_DIRECTIVE.test(content)) {
+    return content.replace(/^(['"]use client['"];?\s*\n)/, `$1${lineToInsert}`);
+  }
+  return lineToInsert + content;
+}
+var CLIENT_DIRECTIVE;
+var init_client_file_patch = __esm({
+  "src/utils/client-file-patch.ts"() {
+    "use strict";
+    CLIENT_DIRECTIVE = /^['"]use client['"];?\s*\n/;
+  }
+});
 // src/generators/features/dark-mode.ts
 var dark_mode_exports = {};
 __export(dark_mode_exports, {
@@ -716,9 +731,13 @@ async function generateDarkMode(projectRoot) {
       await fs6.writeFile(fullPath, content);
       count++;
     }
+    await wireLayout(projectRoot, ctx);
+    await wireProviders(projectRoot, ctx);
+    await wireProtectedNav(projectRoot, ctx);
+    await wireTailwindDarkMode(projectRoot, ctx);
     await setConfigFlag2(projectRoot, ctx);
     await ctx.commit();
-    log.success(`Generated dark mode feature with ${count} files`);
+    log.success(`Generated and wired dark mode feature (${count} files created)`);
     log.blank();
     log.step("src/lib/shared/components/providers/ThemeProvider.tsx \u2014 context, hook, persistence");
     log.step("src/lib/shared/components/patterns/ThemeToggle.tsx \u2014 three-option toggle");
@@ -726,14 +745,12 @@ async function generateDarkMode(projectRoot) {
     log.step("src/features/dark-mode/theme-script.ts \u2014 FOUC prevention script");
     log.step("src/features/dark-mode/index.ts \u2014 barrel exports");
     log.blank();
-    log.warn("Complete setup in your root layout (src/app/layout.tsx):");
-    log.step("1. Add suppressHydrationWarning to <html>");
-    log.step("2. Add the theme script to <head>:");
-    log.step('   import { getThemeScript } from "@/features/dark-mode/theme-script"');
-    log.step("   <script dangerouslySetInnerHTML={{ __html: getThemeScript() }} />");
-    log.step("3. Wrap the app with <ThemeProvider>");
-    log.step("4. Add <ThemeToggle /> or <ThemeToggleSimple /> to your navbar");
-    log.step('5. Ensure darkMode: "class" is set in your Tailwind config');
+    log.step("Wired automatically:");
+    log.step("  \u2713 FOUC-prevention script added to <head> in layout.tsx");
+    log.step("  \u2713 suppressHydrationWarning on <html>");
+    log.step("  \u2713 ThemeProvider wrapping app in providers.tsx");
+    log.step("  \u2713 ThemeToggleSimple added to navigation bar");
+    log.step("  \u2713 Tailwind dark mode class variant configured in globals.css");
     log.blank();
   } catch (error) {
     await ctx.rollback();
@@ -748,6 +765,84 @@ async function setConfigFlag2(projectRoot, ctx) {
   const updated = content.replace(/darkMode:\s*false/, "darkMode: true");
   await fs6.writeFile(configPath, updated);
 }
+async function wireLayout(projectRoot, ctx) {
+  const layoutPath = path6.join(projectRoot, "src", "app", "layout.tsx");
+  if (!await fs6.pathExists(layoutPath)) return;
+  await ctx.trackModifiedFile(layoutPath);
+  let content = await fs6.readFile(layoutPath, "utf-8");
+  if (!content.includes("getThemeScript")) {
+    content = `import { getThemeScript } from '@/features/dark-mode';
+${content}`;
+  }
+  if (!content.includes("suppressHydrationWarning")) {
+    content = content.replace(/<html\s+lang="en"/, '<html lang="en" suppressHydrationWarning');
+  }
+  if (!content.includes("getThemeScript()")) {
+    content = content.replace(
+      /(<html[^>]*>)\s*\n(\s*<body)/,
+      "$1\n      <head>\n        <script dangerouslySetInnerHTML={{ __html: getThemeScript() }} />\n      </head>\n$2"
+    );
+  }
+  await fs6.writeFile(layoutPath, content);
+}
+async function wireProviders(projectRoot, ctx) {
+  const providersPath = path6.join(projectRoot, "src", "app", "providers.tsx");
+  if (!await fs6.pathExists(providersPath)) return;
+  await ctx.trackModifiedFile(providersPath);
+  let content = await fs6.readFile(providersPath, "utf-8");
+  if (content.includes("ThemeProvider")) return;
+  content = insertImportAfterDirectives(
+    content,
+    `import { ThemeProvider } from '@/features/dark-mode';
+`
+  );
+  content = content.replace(
+    /return\s+(?:\(\s*)?((?:<\w+[^>]*>)[\s\S]*?\{children\}[\s\S]*?(?:<\/\w+>))\s*(?:\)\s*)?;/,
+    (_match, jsx) => {
+      const wrapped = jsx.replace(
+        /(\{children\})/,
+        "<ThemeProvider>$1</ThemeProvider>"
+      );
+      return `return (
+    ${wrapped}
+  );`;
+    }
+  );
+  await fs6.writeFile(providersPath, content);
+}
+async function wireProtectedNav(projectRoot, ctx) {
+  const navPath = path6.join(projectRoot, "src", "app", "(protected)", "layout.tsx");
+  if (!await fs6.pathExists(navPath)) return;
+  await ctx.trackModifiedFile(navPath);
+  let content = await fs6.readFile(navPath, "utf-8");
+  if (content.includes("ThemeToggleSimple")) return;
+  content = insertImportAfterDirectives(
+    content,
+    `import { ThemeToggleSimple } from '@/features/dark-mode';
+`
+  );
+  content = content.replace(
+    /(<div className="hidden md:block">)\s*\n(\s*)(<UserMenu \/>)/,
+    "$1\n$2<ThemeToggleSimple />\n$2$3"
+  );
+  content = content.replace(
+    /(<div className="border-t border-border-default px-4 py-3">\s*\n\s*<UserMenu \/>)/,
+    '$1\n              <div className="mt-2">\n                <ThemeToggleSimple />\n              </div>'
+  );
+  await fs6.writeFile(navPath, content);
+}
+async function wireTailwindDarkMode(projectRoot, ctx) {
+  const globalsPath = path6.join(projectRoot, "src", "styles", "globals.css");
+  if (!await fs6.pathExists(globalsPath)) return;
+  await ctx.trackModifiedFile(globalsPath);
+  let content = await fs6.readFile(globalsPath, "utf-8");
+  if (content.includes("@custom-variant dark")) return;
+  content = content.replace(
+    /@import 'tailwindcss';/,
+    "@import 'tailwindcss';\n@custom-variant dark (&:where(.dark, .dark *));"
+  );
+  await fs6.writeFile(globalsPath, content);
+}
 function themeProvider() {
   return `${STAMP2}
 'use client';
@@ -1017,9 +1112,10 @@ var GENERATOR_VERSION2, STAMP2;
 var init_dark_mode = __esm({
   "src/generators/features/dark-mode.ts"() {
     "use strict";
+    init_client_file_patch();
     init_logger();
     init_rollback();
-    GENERATOR_VERSION2 = "0.1.0";
+    GENERATOR_VERSION2 = "0.2.0";
     STAMP2 = `// @mars-generated dark-mode@${GENERATOR_VERSION2}`;
   }
 });
@@ -1069,6 +1165,7 @@ async function generateNotifications(projectRoot) {
       "src/features/notifications/components/NotificationBell.tsx": notificationBell(),
       "src/features/notifications/components/NotificationPanel.tsx": notificationPanel(),
       "src/features/notifications/components/index.ts": componentIndex2(),
+      "src/features/notifications/index.ts": featureIndex(),
       "src/app/api/protected/notifications/route.ts": listRoute(),
       "src/app/api/protected/notifications/[id]/read/route.ts": markReadRoute(),
       "src/app/api/protected/notifications/read-all/route.ts": markAllReadRoute(),
@@ -1083,18 +1180,21 @@ async function generateNotifications(projectRoot) {
       count++;
     }
     await addUserRelation(projectRoot, "notifications Notification[]", ctx);
+    await wireProtectedNav2(projectRoot, ctx);
     await setConfigFlag3(projectRoot, ctx);
     await ctx.commit();
-    log.success(`Generated notifications feature with ${count} files`);
+    log.success(`Generated and wired notifications feature (${count} files created)`);
     log.blank();
     log.step("prisma/schema/notification.prisma \u2014 Notification model");
     log.step("src/features/notifications/ \u2014 types, validation, server logic, hooks, components");
     log.step("src/app/api/protected/notifications/ \u2014 CRUD API routes");
     log.blank();
+    log.step("Wired automatically:");
+    log.step("  \u2713 NotificationBell added to navigation bar");
+    log.blank();
     log.warn("Next steps:");
     log.step("1. Run yarn db:push to sync the Prisma schema");
-    log.step("2. Add <NotificationBell /> to your navbar/header");
-    log.step("3. Import createNotification from server to trigger notifications from other features:");
+    log.step("2. Import createNotification from server to trigger notifications from other features:");
     log.step('   import { createNotification } from "@/features/notifications/server"');
     log.blank();
   } catch (error) {
@@ -1102,6 +1202,23 @@ async function generateNotifications(projectRoot) {
     throw error;
   }
 }
+async function wireProtectedNav2(projectRoot, ctx) {
+  const navPath = path8.join(projectRoot, "src", "app", "(protected)", "layout.tsx");
+  if (!await fs8.pathExists(navPath)) return;
+  await ctx.trackModifiedFile(navPath);
+  let content = await fs8.readFile(navPath, "utf-8");
+  if (content.includes("NotificationBell")) return;
+  content = insertImportAfterDirectives(
+    content,
+    `import { NotificationBell } from '@/features/notifications';
+`
+  );
+  content = content.replace(
+    /(<div className="flex items-center gap-3">)\s*\n(\s*)(<div className="hidden md:block">)/,
+    "$1\n$2<NotificationBell />\n$2$3"
+  );
+  await fs8.writeFile(navPath, content);
+}
 async function setConfigFlag3(projectRoot, ctx) {
   const configPath = path8.join(projectRoot, "src", "config", "app.config.ts");
   if (!await fs8.pathExists(configPath)) return;
@@ -1585,6 +1702,11 @@ export function NotificationPanel({
 }
 `;
 }
+function featureIndex() {
+  return `${STAMP3}
+export { NotificationBell, NotificationPanel } from './components';
+`;
+}
 function componentIndex2() {
   return `${STAMP3}
 export { NotificationBell } from './NotificationBell';
@@ -1685,6 +1807,7 @@ var GENERATOR_VERSION3, STAMP3;
 var init_notifications = __esm({
   "src/generators/features/notifications.ts"() {
     "use strict";
+    init_client_file_patch();
     init_logger();
     init_rollback();
     init_prisma();
@@ -1723,15 +1846,19 @@ async function generateAnalytics(projectRoot) {
       await fs9.writeFile(fullPath, content);
       count++;
     }
+    await wireProviders2(projectRoot, ctx);
     await setConfigFlag4(projectRoot, ctx);
     await ctx.commit();
-    log.success(`Generated analytics feature with ${count} files`);
+    log.success(`Generated and wired analytics feature (${count} files created)`);
     log.blank();
     log.step("src/features/analytics/ \u2014 types and barrel exports");
     log.step("src/lib/shared/components/providers/AnalyticsProvider.tsx \u2014 provider wrapper");
     log.step("src/lib/shared/utils/analytics.ts \u2014 unified tracking API");
     log.step("src/lib/shared/components/patterns/ConsentBanner.tsx \u2014 cookie consent banner");
     log.blank();
+    log.step("Wired automatically:");
+    log.step("  \u2713 AnalyticsProvider wrapping app in providers.tsx");
+    log.blank();
     log.warn("Install dependencies for your chosen provider:");
     log.step("Vercel:  yarn add @vercel/analytics @vercel/speed-insights");
     log.step("PostHog: yarn add posthog-js");
@@ -1740,13 +1867,39 @@ async function generateAnalytics(projectRoot) {
     log.warn("Next steps:");
     log.step("Set the provider in appConfig.services.analytics.provider");
     log.step("Set required environment variables for the chosen provider");
-    log.step("Add <AnalyticsProvider> and <ConsentBanner /> to your root layout");
     log.blank();
   } catch (error) {
     await ctx.rollback();
     throw error;
   }
 }
+async function wireProviders2(projectRoot, ctx) {
+  const providersPath = path9.join(projectRoot, "src", "app", "providers.tsx");
+  if (!await fs9.pathExists(providersPath)) return;
+  await ctx.trackModifiedFile(providersPath);
+  let content = await fs9.readFile(providersPath, "utf-8");
+  if (content.includes("AnalyticsProvider")) return;
+  content = insertImportAfterDirectives(
+    content,
+    `import { AnalyticsProvider } from '@/lib/shared/components/providers/AnalyticsProvider';
+`
+  );
+  content = content.replace(
+    /return\s+(?:\(\s*)?((?:<\w+[^>]*>)[\s\S]*?\{children\}[\s\S]*?(?:<\/\w+>))\s*(?:\)\s*)?;/,
+    (_match, jsx) => {
+      return `return (
+    <AnalyticsProvider>${jsx}</AnalyticsProvider>
+  );`;
+    }
+  );
+  await fs9.writeFile(providersPath, content);
+  const written = await fs9.readFile(providersPath, "utf-8");
+  if (!written.includes("AnalyticsProvider")) {
+    throw new Error(
+      "wireProviders: AnalyticsProvider was not inserted into providers.tsx \u2014 the return statement pattern did not match. Review the template file structure."
+    );
+  }
+}
 async function setConfigFlag4(projectRoot, ctx) {
   const configPath = path9.join(projectRoot, "src", "config", "app.config.ts");
   if (!await fs9.pathExists(configPath)) return;
@@ -1776,7 +1929,7 @@ function analyticsProvider() {
   return `${STAMP4}
 'use client';
-import { useEffect, useState } from 'react';
+import { Suspense, useEffect, useState } from 'react';
 import { usePathname, useSearchParams } from 'next/navigation';
 import Script from 'next/script';
 import { appConfig } from '@/config/app.config';
@@ -1799,7 +1952,9 @@ export function AnalyticsProvider({ children }: AnalyticsProviderProps) {
       {provider === 'vercel' && <VercelAnalyticsProvider />}
       {provider === 'posthog' && <PostHogAnalyticsProvider />}
       {provider === 'google' && <GoogleAnalyticsProvider />}
-      <PageViewTracker />
+      <Suspense>
+        <PageViewTracker />
+      </Suspense>
       {children}
     </>
   );
@@ -1963,22 +2118,18 @@ export function trackEvent(
   switch (provider) {
     case 'vercel': {
-      try {
-        const { track } = require('@vercel/analytics');
-        track(eventName, properties);
-      } catch {
-        // @vercel/analytics not available
-      }
+      const vercelSpec = '@vercel/analytics';
+      import(/* webpackIgnore: true */ vercelSpec)
+        .then((mod) => mod.track(eventName, properties))
+        .catch(() => {});
       break;
     }
     case 'posthog': {
-      try {
-        const posthog = require('posthog-js').default;
-        posthog.capture(eventName, properties);
-      } catch {
-        // posthog-js not available
-      }
+      const phSpec = 'posthog-js';
+      import(/* webpackIgnore: true */ phSpec)
+        .then((mod) => mod.default.capture(eventName, properties))
+        .catch(() => {});
       break;
     }
@@ -2009,12 +2160,10 @@ export function identifyUser(
       break;
     case 'posthog': {
-      try {
-        const posthog = require('posthog-js').default;
-        posthog.identify(userId, traits);
-      } catch {
-        // posthog-js not available
-      }
+      const phSpec = 'posthog-js';
+      import(/* webpackIgnore: true */ phSpec)
+        .then((mod) => mod.default.identify(userId, traits))
+        .catch(() => {});
       break;
     }
@@ -2103,6 +2252,7 @@ var GENERATOR_VERSION4, STAMP4;
 var init_analytics = __esm({
   "src/generators/features/analytics.ts"() {
     "use strict";
+    init_client_file_patch();
     init_logger();
     init_rollback();
     GENERATOR_VERSION4 = "0.1.0";
@@ -2133,7 +2283,7 @@ async function generateCommandPalette(projectRoot) {
       "src/features/command-palette/components/CommandPalette.tsx": commandPalette(),
       "src/features/command-palette/components/CommandTrigger.tsx": commandTrigger(),
       "src/features/command-palette/components/index.ts": componentIndex3(),
-      "src/features/command-palette/index.ts": featureIndex()
+      "src/features/command-palette/index.ts": featureIndex2()
     };
     let count = 0;
     for (const [filePath, content] of Object.entries(files)) {
@@ -2144,15 +2294,17 @@ async function generateCommandPalette(projectRoot) {
       count++;
     }
     await addDependencies(projectRoot, { cmdk: "^1.0.0" });
+    await wireLayout2(projectRoot, ctx);
     await setConfigFlag5(projectRoot, ctx);
     await ctx.commit();
-    log.success(`Generated command palette feature with ${count} files`);
+    log.success(`Generated and wired command palette feature (${count} files created)`);
     log.blank();
     log.step("src/features/command-palette/ \u2014 types, actions, registry, recent, components");
     log.blank();
-    log.warn("Integration steps:");
-    log.step("Add <CommandPalette /> to your protected layout");
-    log.step("Optionally add <CommandTrigger /> to your navbar for discoverability");
+    log.step("Wired automatically:");
+    log.step("  \u2713 CommandPalette overlay mounted in root layout");
+    log.step("  \u2713 Press \u2318K / Ctrl+K to open");
+    log.blank();
     log.step("Register custom actions with registerAction() from any feature");
     log.blank();
   } catch (error) {
@@ -2160,6 +2312,20 @@ async function generateCommandPalette(projectRoot) {
     throw error;
   }
 }
+async function wireLayout2(projectRoot, ctx) {
+  const layoutPath = path10.join(projectRoot, "src", "app", "layout.tsx");
+  if (!await fs10.pathExists(layoutPath)) return;
+  await ctx.trackModifiedFile(layoutPath);
+  let content = await fs10.readFile(layoutPath, "utf-8");
+  if (content.includes("CommandPalette")) return;
+  content = `import { CommandPalette } from '@/features/command-palette';
+${content}`;
+  content = content.replace(
+    /(\s*)(<Providers>\{children\}<\/Providers>)/,
+    "$1$2\n$1<CommandPalette />"
+  );
+  await fs10.writeFile(layoutPath, content);
+}
 async function setConfigFlag5(projectRoot, ctx) {
   const configPath = path10.join(projectRoot, "src", "config", "app.config.ts");
   if (!await fs10.pathExists(configPath)) return;
@@ -2556,7 +2722,7 @@ export { CommandPalette } from './CommandPalette';
 export { CommandTrigger } from './CommandTrigger';
 `;
 }
-function featureIndex() {
+function featureIndex2() {
   return `${STAMP5}
 export { CommandPalette, CommandTrigger } from './components';
 export { registerAction, getCustomActions } from './registry';
@@ -2604,7 +2770,7 @@ async function generateOnboarding(projectRoot) {
       "src/app/(protected)/onboarding/page.tsx": onboardingPage(),
       "src/app/api/protected/onboarding/route.ts": getProgressRoute(),
       "src/app/api/protected/onboarding/step/route.ts": stepActionRoute(),
-      "src/features/onboarding/index.ts": featureIndex2()
+      "src/features/onboarding/index.ts": featureIndex3()
     };
     let count = 0;
     for (const [filePath, content] of Object.entries(files)) {
@@ -3135,7 +3301,7 @@ export const POST = withAuthNoParams(async (request: AuthenticatedRequest) => {
 });
 `;
 }
-function featureIndex2() {
+function featureIndex3() {
   return `${STAMP6}
 export { ONBOARDING_STEPS } from './config';
 export type { OnboardingStep } from './config';
@@ -3184,7 +3350,7 @@ async function generateSearch(projectRoot) {
       "src/features/search/hooks/use-search.ts": useSearchHook(),
       "src/features/search/components/SearchInput.tsx": searchInput(),
       "src/features/search/components/index.ts": componentIndex5(),
-      "src/features/search/index.ts": featureIndex3(),
+      "src/features/search/index.ts": featureIndex4(),
       "src/app/api/protected/search/route.ts": searchRoute()
     };
     let count = 0;
@@ -3496,7 +3662,7 @@ function componentIndex5() {
 export { SearchInput } from './SearchInput';
 `;
 }
-function featureIndex3() {
+function featureIndex4() {
   return `${STAMP7}
 export type { SearchResult, SearchOptions, SearchProvider } from './types';
 export { searchParamsSchema } from './validation/schemas';
@@ -3568,7 +3734,7 @@ async function generateRealtime(projectRoot) {
       "src/features/realtime/server/sse.ts": sseProvider(),
       "src/features/realtime/hooks/use-event-source.ts": useEventSourceHook(),
       "src/features/realtime/hooks/index.ts": hooksIndex(),
-      "src/features/realtime/index.ts": featureIndex4(),
+      "src/features/realtime/index.ts": featureIndex5(),
       "src/app/api/protected/realtime/stream/route.ts": sseStreamRoute()
     };
     let count = 0;
@@ -3816,7 +3982,7 @@ function hooksIndex() {
 export { useEventSource } from './use-event-source';
 `;
 }
-function featureIndex4() {
+function featureIndex5() {
   return `${STAMP8}
 export type {
   RealtimeProvider,
@@ -4426,7 +4592,7 @@ async function generateCookieConsent(projectRoot) {
       "src/features/cookie-consent/components/CookieConsentBanner.tsx": cookieConsentBanner(),
       "src/features/cookie-consent/components/CookiePreferencesDialog.tsx": cookiePreferencesDialog(),
       "src/features/cookie-consent/components/index.ts": componentsIndex(),
-      "src/features/cookie-consent/index.ts": featureIndex5()
+      "src/features/cookie-consent/index.ts": featureIndex6()
     };
     let count = 0;
     for (const [filePath, content] of Object.entries(files)) {
@@ -4436,17 +4602,19 @@ async function generateCookieConsent(projectRoot) {
       await fs15.writeFile(fullPath, content);
       count++;
     }
+    await wireLayout3(projectRoot, ctx);
     await setConfigFlag10(projectRoot, ctx);
     await ctx.commit();
-    log.success(`Generated cookie consent feature with ${count} files`);
+    log.success(`Generated and wired cookie consent feature (${count} files created)`);
     log.blank();
     log.step("src/features/cookie-consent/types.ts \u2014 ConsentStatus, ConsentPreferences");
     log.step("src/features/cookie-consent/hooks/use-consent.ts \u2014 useConsent hook");
     log.step("src/features/cookie-consent/components/CookieConsentBanner.tsx \u2014 banner");
     log.step("src/features/cookie-consent/components/CookiePreferencesDialog.tsx \u2014 preferences modal");
     log.blank();
-    log.warn("Complete setup:");
-    log.step("Add <CookieConsentBanner /> to your root layout");
+    log.step("Wired automatically:");
+    log.step("  \u2713 CookieConsentBanner mounted in root layout");
+    log.blank();
     log.step("Optionally add <CookiePreferencesDialog /> for granular consent management");
     log.step("Check consent status with useConsent() before loading tracking scripts");
     log.blank();
@@ -4455,6 +4623,20 @@ async function generateCookieConsent(projectRoot) {
     throw error;
   }
 }
+async function wireLayout3(projectRoot, ctx) {
+  const layoutPath = path15.join(projectRoot, "src", "app", "layout.tsx");
+  if (!await fs15.pathExists(layoutPath)) return;
+  await ctx.trackModifiedFile(layoutPath);
+  let content = await fs15.readFile(layoutPath, "utf-8");
+  if (content.includes("CookieConsentBanner")) return;
+  content = `import { CookieConsentBanner } from '@/features/cookie-consent';
+${content}`;
+  content = content.replace(
+    /(\s*)(<Providers>\{children\}<\/Providers>)/,
+    "$1$2\n$1<CookieConsentBanner />"
+  );
+  await fs15.writeFile(layoutPath, content);
+}
 async function setConfigFlag10(projectRoot, ctx) {
   const configPath = path15.join(projectRoot, "src", "config", "app.config.ts");
   if (!await fs15.pathExists(configPath)) return;
@@ -4723,7 +4905,7 @@ export { CookieConsentBanner } from './CookieConsentBanner';
 export { CookiePreferencesDialog } from './CookiePreferencesDialog';
 `;
 }
-function featureIndex5() {
+function featureIndex6() {
   return `${STAMP10}
 export type { ConsentStatus, ConsentPreferences } from './types';
 export { useConsent } from './hooks/use-consent';
@@ -5196,7 +5378,7 @@ async function generateFeatureFlags(projectRoot) {
       "src/features/feature-flags/hooks/use-feature-flag.ts": useFeatureFlag(),
       "src/features/feature-flags/components/FeatureGate.tsx": featureGate(),
       "src/features/feature-flags/components/index.ts": componentsIndex3(),
-      "src/features/feature-flags/index.ts": featureIndex6(),
+      "src/features/feature-flags/index.ts": featureIndex7(),
       "src/config/feature-flags.json": featureFlagsJson(),
       "src/app/api/protected/feature-flags/route.ts": apiRoute()
     };
@@ -5407,7 +5589,7 @@ function componentsIndex3() {
 export { FeatureGate } from './FeatureGate';
 `;
 }
-function featureIndex6() {
+function featureIndex7() {
   return `${STAMP13}
 export { getFlag } from './server';
 export { useFeatureFlag } from './hooks/use-feature-flag';
@@ -5901,6 +6083,7 @@ async function promptTheme() {
 init_logger();
 import fs2 from "fs-extra";
 import path2 from "path";
+import { generateBrandCss } from "@mars-stack/ui/utils";
 // src/generators/app-config.ts
 function escapeQuotes(value) {
@@ -6374,10 +6557,24 @@ async function scaffoldProject(targetDir, config) {
   await fs2.writeFile(path2.join(targetDir, ".env"), generateEnvFile(config));
   await fs2.writeFile(path2.join(targetDir, ".env.example"), generateEnvExample(config));
   await fs2.writeFile(path2.join(targetDir, ".gitignore"), generateGitignore());
-  await patchGlobalsCssForScaffoldedProject(targetDir);
+  await patchGlobalsCssForScaffoldedProject(targetDir, config);
+  await generateBrandCssForProject(targetDir, config);
   return { fileCount };
 }
-async function patchGlobalsCssForScaffoldedProject(targetDir) {
+async function generateBrandCssForProject(targetDir, config) {
+  const brandPath = path2.join(targetDir, "src", "styles", "brand.css");
+  if (!await fs2.pathExists(brandPath)) return;
+  const css = generateBrandCss(config.theme.primaryColor);
+  await fs2.writeFile(brandPath, css);
+}
+var VALID_DESIGN_DIRECTIONS = [
+  "modern-saas",
+  "minimal",
+  "enterprise",
+  "creative",
+  "dashboard"
+];
+async function patchGlobalsCssForScaffoldedProject(targetDir, config) {
   const globalsPath = path2.join(targetDir, "src", "styles", "globals.css");
   if (!await fs2.pathExists(globalsPath)) return;
   let content = await fs2.readFile(globalsPath, "utf-8");
@@ -6385,6 +6582,20 @@ async function patchGlobalsCssForScaffoldedProject(targetDir) {
     '@source "../../../node_modules/@mars-stack/ui/dist/**/*.js";',
     '@source "../../node_modules/@mars-stack/ui/dist/**/*.js";'
   );
+  const direction = VALID_DESIGN_DIRECTIONS.includes(
+    config.theme.designDirection
+  ) ? config.theme.designDirection : "modern-saas";
+  const currentMetaImport = /@import\s+['"]@mars-stack\/ui\/styles\/meta-[^'"]+['"]\s*;/;
+  const newImport = `@import '@mars-stack/ui/styles/meta-${direction}.css';`;
+  if (currentMetaImport.test(content)) {
+    content = content.replace(currentMetaImport, newImport);
+  } else {
+    content = content.replace(
+      "@import '@mars-stack/ui/styles/index.css';",
+      `@import '@mars-stack/ui/styles/index.css';
+${newImport}`
+    );
+  }
   await fs2.writeFile(globalsPath, content);
 }