xertica-ui 2.7.0 → 2.9.6

package/bin/cli.ts

@@ -17,6 +17,7 @@ import {
   syncLocaleFiles,
   generateI18nFile,
   generateAppTsx,
+  generateLandingAppTsx,
 } from './language-config';
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -31,6 +32,8 @@ interface XerticaConfig {
   hasAssistant: boolean;
   disableDarkMode?: boolean;
   themeId?: string;
+  /** Missing on projects scaffolded before this field existed — treat as 'system'. */
+  projectType?: 'page' | 'system';
 }
 
 async function readXerticaConfig(targetDir: string): Promise<XerticaConfig | null> {
@@ -286,6 +289,165 @@ export function TemplatePage() {
 `;
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// package.json copy helper — shared by the 'system' and 'page' init flows.
+// ─────────────────────────────────────────────────────────────────────────────
+
+async function copyPackageJson(templatesDir: string, targetDir: string): Promise<void> {
+  const pkgTemplatePath = path.join(templatesDir, 'package.json');
+  if (await fs.pathExists(pkgTemplatePath)) {
+    const pkgContent = await fs.readJson(pkgTemplatePath);
+    const projectName = path.basename(targetDir) || 'my-xertica-app';
+    pkgContent.name = projectName.toLowerCase().replace(/[^a-z0-9-]/g, '-');
+    await fs.writeJson(path.join(targetDir, 'package.json'), pkgContent, { spaces: 2 });
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Minimal "web page" scaffold — just the marketing LandingPage, no auth shell.
+// ─────────────────────────────────────────────────────────────────────────────
+
+async function initPageProject(targetDir: string, templatesDir: string): Promise<void> {
+  const response = await prompts([
+    {
+      type: 'multiselect',
+      name: 'languages',
+      message: 'Which languages should the page support?',
+      instructions: false,
+      hint: 'Select at least 1. Single-language apps auto-hide the LanguageSelector.',
+      min: 1,
+      choices: SUPPORTED_LANGUAGES.map(l => ({
+        title: l.label,
+        value: l.code,
+        selected: true,
+      })),
+    },
+    {
+      type: 'select',
+      name: 'theme',
+      message: 'Select the default color theme for your project:',
+      choices: colorThemes.map(t => ({
+        title: t.name,
+        description: t.description,
+        value: t.id,
+      })),
+      initial: 0,
+    },
+    {
+      type: 'confirm',
+      name: 'install',
+      message: 'Install dependencies automatically?',
+      initial: true,
+    },
+  ]);
+
+  if (!response.languages || !response.theme) return;
+
+  const spinner = ora('Initializing project...').start();
+
+  try {
+    await fs.ensureDir(targetDir);
+
+    const selectedLanguages: string[] =
+      Array.isArray(response.languages) && response.languages.length > 0
+        ? response.languages
+        : DEFAULT_SELECTION;
+
+    // 1. Copy root config files (no CLAUDE.md/guidelines — those document the
+    //    FSD auth-app architecture, which this scaffold doesn't have; no
+    //    .env.example — its keys are only used by the assistant/maps pages).
+    const rootFilesToCopy = [
+      'index.html',
+      'vite.config.ts',
+      'tsconfig.json',
+      'tsconfig.node.json',
+      'postcss.config.js',
+      'vite-env.d.ts',
+      'eslint.config.js',
+      '.gitignore',
+      '.prettierrc',
+    ];
+
+    for (const file of rootFilesToCopy) {
+      const srcPath = path.join(templatesDir, file);
+      if (await fs.pathExists(srcPath)) {
+        await fs.copy(srcPath, path.join(targetDir, file));
+      }
+    }
+
+    // 2. Copy package.json
+    await copyPackageJson(templatesDir, targetDir);
+
+    // 3. Copy src/main.tsx (unchanged regardless of App.tsx variant)
+    await fs.copy(
+      path.join(templatesDir, 'src', 'main.tsx'),
+      path.join(targetDir, 'src', 'main.tsx')
+    );
+
+    // 4. Generate src/app/App.tsx rendering LandingPage directly
+    await fs.ensureDir(path.join(targetDir, 'src', 'app'));
+    await fs.writeFile(
+      path.join(targetDir, 'src', 'app', 'App.tsx'),
+      generateLandingAppTsx(selectedLanguages)
+    );
+
+    // 5. Generate i18n.ts + copy selected locales
+    await fs.writeFile(
+      path.join(targetDir, 'src', 'i18n.ts'),
+      generateI18nFile(selectedLanguages)
+    );
+    await syncLocaleFiles(templatesDir, targetDir, selectedLanguages, { pruneOthers: true });
+    await writeLanguagesConfig(targetDir, selectedLanguages);
+
+    // 6. Persist project config
+    await writeXerticaConfig(targetDir, {
+      hasAssistant: false,
+      disableDarkMode: false,
+      themeId: response.theme,
+      projectType: 'page',
+    });
+
+    // 7. Copy the LandingPage re-export shim
+    await fs.ensureDir(path.join(targetDir, 'src', 'pages'));
+    await fs.copy(
+      path.join(templatesDir, 'src', 'pages', 'LandingPage.tsx'),
+      path.join(targetDir, 'src', 'pages', 'LandingPage.tsx')
+    );
+
+    // 8. Generate theme tokens
+    const selectedTheme = colorThemes.find(t => t.id === response.theme) || colorThemes[0];
+    const tokensDir = path.join(targetDir, 'src', 'styles', 'xertica');
+    await fs.ensureDir(tokensDir);
+    await fs.copy(
+      path.join(templatesDir, 'src', 'styles', 'index.css'),
+      path.join(targetDir, 'src', 'styles', 'index.css')
+    );
+    await fs.writeFile(path.join(tokensDir, 'tokens.css'), generateTokensCss(selectedTheme));
+
+    spinner.succeed('Project initialized successfully!');
+
+    if (response.install) {
+      const installSpinner = ora('Installing dependencies...').start();
+      await execa('npm', ['install'], { cwd: targetDir });
+      installSpinner.succeed('Dependencies installed!');
+    }
+
+    console.log(chalk.green('\n✅ Done! Your Xertica UI landing page is ready.'));
+    console.log(chalk.cyan(`\n  cd ${path.relative(process.cwd(), targetDir) || '.'}`));
+    if (!response.install) {
+      console.log(chalk.cyan('  npm install'));
+    }
+    console.log(chalk.cyan('  npm run dev'));
+    console.log();
+    console.log(chalk.gray('  The page is composed in xertica-ui/pages — edit src/app/App.tsx'));
+    console.log(chalk.gray('  Customize the theme in src/styles/xertica/tokens.css'));
+    console.log(chalk.gray('  To change the theme or languages later: npx xertica-ui update'));
+  } catch (error) {
+    spinner.fail('Failed to initialize project');
+    console.error(error);
+  }
+}
+
 const program = new Command();
 
 program
@@ -303,6 +465,32 @@ program
 
     console.log(chalk.blue(`🚀 Welcome to Xertica UI CLI! ${chalk.dim(`v${pkgJson.version}`)}`));
 
+    const { projectType } = await prompts({
+      type: 'select',
+      name: 'projectType',
+      message: 'What do you want to create?',
+      choices: [
+        {
+          title: 'Full system',
+          description: 'Auth, sidebar, pages, i18n — the current full scaffold',
+          value: 'system',
+        },
+        {
+          title: 'Web page',
+          description: 'Just the marketing landing page — pick a theme and languages, done',
+          value: 'page',
+        },
+      ],
+      initial: 0,
+    });
+
+    if (!projectType) return;
+
+    if (projectType === 'page') {
+      await initPageProject(targetDir, templatesDir);
+      return;
+    }
+
     const response = await prompts([
       {
         type: 'multiselect',
@@ -408,13 +596,7 @@ program
       }
 
       // 2. Copy package.json
-      const pkgTemplatePath = path.join(templatesDir, 'package.json');
-      if (await fs.pathExists(pkgTemplatePath)) {
-        const pkgContent = await fs.readJson(pkgTemplatePath);
-        const projectName = path.basename(targetDir) || 'my-xertica-app';
-        pkgContent.name = projectName.toLowerCase().replace(/[^a-z0-9-]/g, '-');
-        await fs.writeJson(path.join(targetDir, 'package.json'), pkgContent, { spaces: 2 });
-      }
+      await copyPackageJson(templatesDir, targetDir);
 
       // 3. Copy src/main.tsx
       await fs.copy(
@@ -458,7 +640,12 @@ program
       await writeLanguagesConfig(targetDir, selectedLanguages);
 
       // 6.5 Persist project feature flags (.xertica.json)
-      await writeXerticaConfig(targetDir, { hasAssistant, disableDarkMode, themeId: response.theme });
+      await writeXerticaConfig(targetDir, {
+        hasAssistant,
+        disableDarkMode,
+        themeId: response.theme,
+        projectType: 'system',
+      });
 
       // 6.4 Copy context
       await fs.ensureDir(path.join(targetDir, 'src', 'app', 'context'));
@@ -610,6 +797,8 @@ program
     console.log(chalk.blue(`🔧 Xertica UI CLI ${chalk.dim(`v${pkgJson.version}`)}`));
 
     const currentConfig = await readXerticaConfig(targetDir);
+    const projectType = currentConfig?.projectType ?? 'system';
+    const isPageProject = projectType === 'page';
 
     const { updateType } = await prompts({
       type: 'select',
@@ -626,13 +815,17 @@ program
           description: 'Add or remove supported languages (pt-BR, en, es, …)',
           value: 'languages',
         },
-        {
-          title: 'Assistant',
-          description: currentConfig?.hasAssistant
-            ? 'Remove the AI Assistant from your project'
-            : 'Add the AI Assistant to your project',
-          value: 'assistant',
-        },
+        ...(isPageProject
+          ? []
+          : [
+              {
+                title: 'Assistant',
+                description: currentConfig?.hasAssistant
+                  ? 'Remove the AI Assistant from your project'
+                  : 'Add the AI Assistant to your project',
+                value: 'assistant',
+              },
+            ]),
         {
           title: 'Dark Mode',
           description: currentConfig?.disableDarkMode
@@ -642,7 +835,9 @@ program
         },
         {
           title: 'Project files',
-          description: 'Update app shell, shared, features and pages to a specific version',
+          description: isPageProject
+            ? 'Update the app shell and landing page to a specific version'
+            : 'Update app shell, shared, features and pages to a specific version',
           value: 'project',
         },
       ],
@@ -798,7 +993,9 @@ program
         // 3) Regenerate App.tsx so the `availableLanguages` prop matches
         await fs.writeFile(
           path.join(targetDir, 'src', 'app', 'App.tsx'),
-          generateAppTsx(newCodes, currentConfig?.disableDarkMode ?? false)
+          isPageProject
+            ? generateLandingAppTsx(newCodes, currentConfig?.disableDarkMode ?? false)
+            : generateAppTsx(newCodes, currentConfig?.disableDarkMode ?? false)
         );
 
         // 4) Persist the new selection
@@ -1014,7 +1211,9 @@ program
 
         await fs.writeFile(
           path.join(targetDir, 'src', 'app', 'App.tsx'),
-          generateAppTsx(selectedCodes, newDisableDarkMode)
+          isPageProject
+            ? generateLandingAppTsx(selectedCodes, newDisableDarkMode)
+            : generateAppTsx(selectedCodes, newDisableDarkMode)
         );
 
         spinner.succeed(
@@ -1063,38 +1262,53 @@ program
       type: 'multiselect',
       name: 'filesToUpdate',
       message: 'Select which parts of the project to update:',
-      choices: [
-        {
-          title: 'App shell (src/app/)',
-          description: 'App.tsx, AppLayout.tsx',
-          value: 'app',
-          selected: true,
-        },
-        {
-          title: 'Shared utilities (src/shared/)',
-          description: 'auth.ts, navigation.ts, types',
-          value: 'shared',
-          selected: true,
-        },
-        {
-          title: 'Features (src/features/)',
-          description: 'auth, home, template UI components',
-          value: 'features',
-          selected: true,
-        },
-        {
-          title: 'Pages (src/pages/)',
-          description: 'Thin page wrapper components',
-          value: 'pages',
-          selected: true,
-        },
-        {
-          title: 'Root config files',
-          description: 'vite.config.ts, tsconfig.json, etc.',
-          value: 'config',
-          selected: false,
-        },
-      ],
+      choices: isPageProject
+        ? [
+            {
+              title: 'App shell + landing page',
+              description: 'App.tsx and the LandingPage re-export',
+              value: 'app',
+              selected: true,
+            },
+            {
+              title: 'Root config files',
+              description: 'vite.config.ts, tsconfig.json, etc.',
+              value: 'config',
+              selected: false,
+            },
+          ]
+        : [
+            {
+              title: 'App shell (src/app/)',
+              description: 'App.tsx, AppLayout.tsx',
+              value: 'app',
+              selected: true,
+            },
+            {
+              title: 'Shared utilities (src/shared/)',
+              description: 'auth.ts, navigation.ts, types',
+              value: 'shared',
+              selected: true,
+            },
+            {
+              title: 'Features (src/features/)',
+              description: 'auth, home, template UI components',
+              value: 'features',
+              selected: true,
+            },
+            {
+              title: 'Pages (src/pages/)',
+              description: 'Thin page wrapper components',
+              value: 'pages',
+              selected: true,
+            },
+            {
+              title: 'Root config files',
+              description: 'vite.config.ts, tsconfig.json, etc.',
+              value: 'config',
+              selected: false,
+            },
+          ],
     });
 
     if (!filesToUpdate || filesToUpdate.length === 0) return;
@@ -1124,13 +1338,6 @@ program
       const updatedTemplatesDir = path.join(targetDir, 'node_modules', 'xertica-ui', 'templates');
 
       if (filesToUpdate.includes('app')) {
-        // AppLayout is always safe to overwrite (no per-project config baked in)
-        await fs.copy(
-          path.join(updatedTemplatesDir, 'src', 'app', 'components', 'AppLayout.tsx'),
-          path.join(targetDir, 'src', 'app', 'components', 'AppLayout.tsx'),
-          { overwrite: true }
-        );
-
         // For App.tsx and i18n.ts we must preserve the user's language selection.
         // Read it from .languages.json (or fall back to inspecting locales/ for
         // projects scaffolded before the file existed).
@@ -1152,38 +1359,71 @@ program
 
         const projectConfig = await readXerticaConfig(targetDir);
 
-        // Regenerate App.tsx and i18n.ts honoring the persisted language set
-        await fs.writeFile(
-          path.join(targetDir, 'src', 'app', 'App.tsx'),
-          generateAppTsx(selectedCodes, projectConfig?.disableDarkMode ?? false)
-        );
-        await fs.writeFile(path.join(targetDir, 'src', 'i18n.ts'), generateI18nFile(selectedCodes));
+        if (isPageProject) {
+          // Regenerate App.tsx and i18n.ts, re-copy the LandingPage shim —
+          // no AppLayout/AuthGuard exist in a page-only project.
+          await fs.writeFile(
+            path.join(targetDir, 'src', 'app', 'App.tsx'),
+            generateLandingAppTsx(selectedCodes, projectConfig?.disableDarkMode ?? false)
+          );
+          await fs.writeFile(
+            path.join(targetDir, 'src', 'i18n.ts'),
+            generateI18nFile(selectedCodes)
+          );
+          await syncLocaleFiles(updatedTemplatesDir, targetDir, selectedCodes, {
+            pruneOthers: true,
+          });
+          await fs.copy(
+            path.join(updatedTemplatesDir, 'src', 'pages', 'LandingPage.tsx'),
+            path.join(targetDir, 'src', 'pages', 'LandingPage.tsx'),
+            { overwrite: true }
+          );
+        } else {
+          // AppLayout is always safe to overwrite (no per-project config baked in)
+          await fs.copy(
+            path.join(updatedTemplatesDir, 'src', 'app', 'components', 'AppLayout.tsx'),
+            path.join(targetDir, 'src', 'app', 'components', 'AppLayout.tsx'),
+            { overwrite: true }
+          );
 
-        // Refresh locale JSON files for the selected languages (keys grow over
-        // library updates) — but prune any orphans from prior selections.
-        await syncLocaleFiles(updatedTemplatesDir, targetDir, selectedCodes, {
-          pruneOthers: true,
-        });
+          // Regenerate App.tsx and i18n.ts honoring the persisted language set
+          await fs.writeFile(
+            path.join(targetDir, 'src', 'app', 'App.tsx'),
+            generateAppTsx(selectedCodes, projectConfig?.disableDarkMode ?? false)
+          );
+          await fs.writeFile(
+            path.join(targetDir, 'src', 'i18n.ts'),
+            generateI18nFile(selectedCodes)
+          );
 
-        // Regenerate AuthGuard preserving the current page set and assistant flag
-        const pagesDir = path.join(targetDir, 'src', 'pages');
-        const existingPages = (await fs.pathExists(pagesDir)) ? await fs.readdir(pagesDir) : [];
-        const hasLoginP = existingPages.includes('LoginPage.tsx');
-        const hasHomeP = existingPages.includes('HomePage.tsx');
-        const hasTemplateP = existingPages.includes('TemplatePage.tsx');
-        const hasAssistantP =
-          projectConfig?.hasAssistant ?? existingPages.includes('AssistantPage.tsx');
-        const firstProtectedP = hasHomeP ? '/home' : hasTemplateP ? '/template' : '/login';
-        await fs.writeFile(
-          path.join(targetDir, 'src', 'app', 'components', 'AuthGuard.tsx'),
-          generateAuthGuard({
-            hasLogin: hasLoginP,
-            hasHome: hasHomeP,
-            hasTemplate: hasTemplateP,
-            hasAssistant: hasAssistantP,
-            firstProtectedPath: firstProtectedP,
-          })
-        );
+          // Refresh locale JSON files for the selected languages (keys grow over
+          // library updates) — but prune any orphans from prior selections.
+          await syncLocaleFiles(updatedTemplatesDir, targetDir, selectedCodes, {
+            pruneOthers: true,
+          });
+
+          // Regenerate AuthGuard preserving the current page set and assistant flag
+          const pagesDir = path.join(targetDir, 'src', 'pages');
+          const existingPages = (await fs.pathExists(pagesDir))
+            ? await fs.readdir(pagesDir)
+            : [];
+          const hasLoginP = existingPages.includes('LoginPage.tsx');
+          const hasHomeP = existingPages.includes('HomePage.tsx');
+          const hasTemplateP = existingPages.includes('TemplatePage.tsx');
+          const hasAssistantP =
+            projectConfig?.hasAssistant ?? existingPages.includes('AssistantPage.tsx');
+          const firstProtectedP = hasHomeP ? '/home' : hasTemplateP ? '/template' : '/login';
+          await fs.writeFile(
+            path.join(targetDir, 'src', 'app', 'components', 'AuthGuard.tsx'),
+            generateAuthGuard({
+              hasLogin: hasLoginP,
+              hasHome: hasHomeP,
+              hasTemplate: hasTemplateP,
+              hasAssistant: hasAssistantP,
+              firstProtectedPath: firstProtectedP,
+            })
+          );
+        }
       }
 
       if (filesToUpdate.includes('shared')) {

package/bin/generate-tokens.ts

@@ -42,13 +42,13 @@ export const generateTokensCss = (theme: ColorTheme): string => {
   --xertica-dark: ${rgba(colors.sidebarDark)};
   
   /* Semantic Colors */
-  --background: rgba(255, 255, 255, 1);
+  --background: ${colors.backgroundLight ? rgba(colors.backgroundLight) : 'rgba(255, 255, 255, 1)'};
   --foreground: rgba(9, 9, 11, 1);
-  
-  --card: rgba(255, 255, 255, 1);
+
+  --card: ${colors.cardLight ? rgba(colors.cardLight) : 'rgba(255, 255, 255, 1)'};
   --card-foreground: rgba(9, 9, 11, 1);
-  
-  --popover: rgba(255, 255, 255, 1);
+
+  --popover: ${colors.cardLight ? rgba(colors.cardLight) : 'rgba(255, 255, 255, 1)'};
   --popover-foreground: rgba(9, 9, 11, 1);
   
   --primary: var(--xertica-primary);
@@ -59,7 +59,7 @@ export const generateTokensCss = (theme: ColorTheme): string => {
   --secondary: rgba(244, 244, 245, 1);
   --secondary-foreground: rgba(24, 24, 27, 1);
   
-  --muted: rgba(244, 244, 245, 1);
+  --muted: ${colors.backgroundLight ? rgba(colors.backgroundLight) : 'rgba(244, 244, 245, 1)'};
   --muted-foreground: rgba(113, 113, 122, 1);
   
   --accent: rgba(244, 244, 245, 1);
@@ -77,6 +77,7 @@ export const generateTokensCss = (theme: ColorTheme): string => {
   --warning-foreground: rgba(28, 25, 23, 1);
   
   --border: rgba(228, 228, 231, 1);
+  --input-border: ${colors.inputBorderColor || 'var(--border)'};
   --input: rgba(244, 244, 245, 0.5);
   --input-background: rgba(244, 244, 245, 0.5);
   --ring: ${rgba(colors.primary, 0.5)};
@@ -106,9 +107,17 @@ export const generateTokensCss = (theme: ColorTheme): string => {
   
   /* Spacing & Radius */
   --radius: 6px;
-  --radius-button: 12px;
+  --radius-button: ${colors.buttonRadius || '12px'};
   --radius-card: 12px;
-  
+
+  /* Button stroke & secondary (theme-overridable; defaults preserve the flat look) */
+  --button-stroke-width: ${colors.buttonStrokeWidth || '0px'};
+  --button-stroke-color: ${colors.buttonStrokeColor || 'transparent'};
+  --button-secondary-bg: ${colors.buttonSecondaryBg || 'var(--secondary)'};
+  --button-secondary-foreground: ${colors.buttonSecondaryForeground || 'var(--secondary-foreground)'};
+  --button-primary-bg: ${colors.buttonPrimaryBg || 'var(--primary)'};
+  --button-primary-foreground: ${colors.buttonPrimaryForeground || 'var(--primary-foreground)'};
+
   --elevation-sm: 0px 0px 48px 0px rgba(0, 0, 0, 0.1);
   
   /* Typography */
@@ -209,7 +218,14 @@ export const generateTokensCss = (theme: ColorTheme): string => {
   --input: ${rgba(colors.darkMuted, 0.5)};
   --input-background: ${rgba(colors.darkMuted, 0.5)};
   --ring: ${rgba(colors.primaryDarkMode, 0.5)};
-  
+
+  /* Button stroke & secondary (theme-overridable; defaults preserve the flat look) */
+  --button-stroke-color: ${colors.buttonStrokeColorDark || colors.buttonStrokeColor || 'transparent'};
+  --button-secondary-bg: ${colors.buttonSecondaryBgDark || colors.buttonSecondaryBg || 'var(--secondary)'};
+  --button-secondary-foreground: ${colors.buttonSecondaryForegroundDark || colors.buttonSecondaryForeground || 'var(--secondary-foreground)'};
+  --button-primary-bg: ${colors.buttonPrimaryBgDark || colors.buttonPrimaryBg || 'var(--primary)'};
+  --button-primary-foreground: ${colors.buttonPrimaryForegroundDark || colors.buttonPrimaryForeground || 'var(--primary-foreground)'};
+
   --elevation-sm: 0px 0px 48px 0px rgba(0, 0, 0, 0.3);
 
   /* Charts — dark mode: slightly lighter/more saturated for contrast on dark bg */

package/bin/language-config.ts

@@ -299,24 +299,7 @@ export function generateAppTsx(selectedCodes: string[], disableDarkMode: boolean
   const selectedLangs = SUPPORTED_LANGUAGES.filter(l => selectedCodes.includes(l.code));
   const isMonolingual = selectedLangs.length === 1;
   const disableDarkModeProp = disableDarkMode ? `\n          disableDarkMode={true}` : '';
-  const isAllDefaults =
-    selectedLangs.length === SUPPORTED_LANGUAGES.length &&
-    selectedLangs.every(l => DEFAULT_SELECTION.includes(l.code));
-
-  // Decide whether and how to render the `availableLanguages` prop on
-  // XerticaProvider. When the user selected all 3 defaults, we can omit the
-  // prop (the library default matches). Otherwise we emit the explicit set.
-  const languagesArrayLiteral = selectedLangs
-    .map(
-      l => `            { code: '${l.code}', label: '${l.label}', shortLabel: '${l.shortLabel}' },`
-    )
-    .join('\n');
-
-  const availableLanguagesProp = isAllDefaults
-    ? ''
-    : `\n          availableLanguages={[
-${languagesArrayLiteral}
-          ]}`;
+  const availableLanguagesProp = buildAvailableLanguagesProp(selectedCodes, '          ');
 
   const monolingualBanner = isMonolingual
     ? `\n// This project is configured for a single language — the LanguageSelector
@@ -376,8 +359,65 @@ export default function App() {
 `;
 }
 
+/**
+ * Generate the App.tsx source for a minimal "web page" project — renders the
+ * marketing `LandingPage` directly under `XerticaProvider`, with none of the
+ * router/query-client/auth machinery the full system scaffold needs (the
+ * landing page itself has no dependency on any of it).
+ */
+export function generateLandingAppTsx(
+  selectedCodes: string[],
+  disableDarkMode: boolean = false
+): string {
+  const disableDarkModeProp = disableDarkMode ? `\n      disableDarkMode={true}` : '';
+  const availableLanguagesProp = buildAvailableLanguagesProp(selectedCodes, '      ');
+
+  return `import React from 'react';
+import { XerticaProvider } from 'xertica-ui/brand';
+import { LandingPage } from 'xertica-ui/pages';
+
+export default function App() {
+  return (
+    <XerticaProvider
+      useCustomTokens={true}${availableLanguagesProp}${disableDarkModeProp}
+    >
+      <LandingPage />
+    </XerticaProvider>
+  );
+}
+`;
+}
+
 // ── Internal ─────────────────────────────────────────────────────────────────
 
+/**
+ * Build the `availableLanguages` prop source for `<XerticaProvider>`. When the
+ * selection matches the library's default 3 languages, the prop is omitted
+ * entirely (the library default already matches). `indent` is the whitespace
+ * prefix the prop line itself should have — array items are indented one
+ * level deeper.
+ */
+function buildAvailableLanguagesProp(selectedCodes: string[], indent: string): string {
+  const selectedLangs = SUPPORTED_LANGUAGES.filter(l => selectedCodes.includes(l.code));
+  const isAllDefaults =
+    selectedLangs.length === SUPPORTED_LANGUAGES.length &&
+    selectedLangs.every(l => DEFAULT_SELECTION.includes(l.code));
+
+  if (isAllDefaults) return '';
+
+  const itemIndent = `${indent}  `;
+  const languagesArrayLiteral = selectedLangs
+    .map(
+      l =>
+        `${itemIndent}{ code: '${l.code}', label: '${l.label}', shortLabel: '${l.shortLabel}' },`
+    )
+    .join('\n');
+
+  return `\n${indent}availableLanguages={[
+${languagesArrayLiteral}
+${indent}]}`;
+}
+
 /** Convert a BCP-47 code to a safe JS identifier (e.g. 'pt-BR' → 'ptBR'). */
 function toJsIdent(code: string): string {
   return code.replace(/[^a-zA-Z0-9]/g, '');