@lucasvu/scope-ui 0.0.3 → 0.0.5

package/bin/scope-ui-init.mjs

@@ -5,30 +5,264 @@ import { dirname, resolve } from 'node:path'
 import process from 'node:process'
 
 const PACKAGE_NAME = '@lucasvu/scope-ui'
+const DEFAULT_THEME_PRESET = 'ocean'
+
+const THEME_PRESETS = {
+  ocean: {
+    id: 'ocean',
+    label: 'Ocean Glass',
+    description:
+      'Blue-cyan preset with clean glass surfaces. Matches the current default visual language.',
+    recommendedFor: [
+      'Admin dashboards',
+      'SaaS CRUD screens',
+      'Projects that want the existing package look',
+    ],
+    tokens: {
+      light: {
+        '--tw-background': '0 0% 100%',
+        '--tw-foreground': '222.2 47.4% 11.2%',
+        '--tw-primary': '221.2 83.2% 53.3%',
+        '--tw-accent': '199 89% 48%',
+        '--tw-success': '142.1 76.2% 36.3%',
+        '--tw-destructive': '0 84.2% 60.2%',
+        '--tw-border': '214.3 31.8% 91.4%',
+        '--radius': '0.75rem',
+        '--surface': 'rgba(255, 255, 255, 0.92)',
+        '--surface-strong': 'rgba(241, 245, 249, 0.96)',
+        '--grey': 'rgba(248, 250, 252, 0.96)',
+        '--grey-strong': 'rgba(241, 245, 249, 0.98)',
+        '--shadow-sm': '0 10px 28px -18px rgba(15, 23, 42, 0.22)',
+        '--shadow': '0 24px 60px -28px rgba(15, 23, 42, 0.3)',
+        '--primary-grad-from': '199 89% 48%',
+        '--primary-grad-to': '221.2 83.2% 53.3%',
+      },
+      dark: {
+        '--tw-background': '222.2 84% 4.9%',
+        '--tw-foreground': '210 40% 98%',
+        '--tw-primary': '217.2 91.2% 59.8%',
+        '--tw-accent': '199 89% 48%',
+        '--tw-success': '142.1 70.6% 45.3%',
+        '--tw-destructive': '0 62.8% 30.6%',
+        '--tw-border': '217.2 32.6% 17.5%',
+        '--radius': '0.75rem',
+        '--surface': 'rgba(15, 23, 42, 0.78)',
+        '--surface-strong': 'rgba(30, 41, 59, 0.92)',
+        '--grey': 'rgba(30, 41, 59, 0.88)',
+        '--grey-strong': 'rgba(51, 65, 85, 0.92)',
+        '--shadow-sm': '0 16px 32px -18px rgba(2, 6, 23, 0.48)',
+        '--shadow': '0 28px 80px -32px rgba(2, 6, 23, 0.7)',
+        '--primary-grad-from': '198.6 88.7% 48.4%',
+        '--primary-grad-to': '221.2 83.2% 53.3%',
+      },
+    },
+  },
+  sunset: {
+    id: 'sunset',
+    label: 'Sunset Ember',
+    description:
+      'Warm orange-coral preset with softer cream surfaces for branded landing or growth products.',
+    recommendedFor: [
+      'Growth products',
+      'Commerce backoffices',
+      'Projects that want a warmer visual tone',
+    ],
+    tokens: {
+      light: {
+        '--tw-background': '30 100% 98%',
+        '--tw-foreground': '20 24% 14%',
+        '--tw-primary': '14 90% 56%',
+        '--tw-accent': '29 100% 58%',
+        '--tw-success': '145 63% 38%',
+        '--tw-destructive': '0 78% 58%',
+        '--tw-border': '24 45% 89%',
+        '--radius': '0.85rem',
+        '--surface': 'rgba(255, 247, 240, 0.92)',
+        '--surface-strong': 'rgba(255, 237, 223, 0.96)',
+        '--grey': 'rgba(255, 243, 231, 0.96)',
+        '--grey-strong': 'rgba(255, 232, 214, 0.98)',
+        '--shadow-sm': '0 12px 30px -18px rgba(194, 65, 12, 0.18)',
+        '--shadow': '0 28px 64px -30px rgba(154, 52, 18, 0.24)',
+        '--primary-grad-from': '29 100% 58%',
+        '--primary-grad-to': '14 90% 56%',
+      },
+      dark: {
+        '--tw-background': '20 24% 8%',
+        '--tw-foreground': '40 33% 96%',
+        '--tw-primary': '18 100% 62%',
+        '--tw-accent': '35 100% 58%',
+        '--tw-success': '145 60% 47%',
+        '--tw-destructive': '0 73% 52%',
+        '--tw-border': '18 24% 22%',
+        '--radius': '0.85rem',
+        '--surface': 'rgba(41, 24, 18, 0.84)',
+        '--surface-strong': 'rgba(59, 34, 24, 0.9)',
+        '--grey': 'rgba(70, 42, 29, 0.88)',
+        '--grey-strong': 'rgba(92, 54, 38, 0.9)',
+        '--shadow-sm': '0 18px 36px -20px rgba(67, 20, 7, 0.48)',
+        '--shadow': '0 30px 84px -34px rgba(67, 20, 7, 0.62)',
+        '--primary-grad-from': '35 100% 58%',
+        '--primary-grad-to': '18 100% 62%',
+      },
+    },
+  },
+  forest: {
+    id: 'forest',
+    label: 'Forest Mist',
+    description:
+      'Emerald-teal preset with soft botanical surfaces for calmer productivity products.',
+    recommendedFor: [
+      'Operations tools',
+      'Internal platforms',
+      'Products that want a calmer green tone',
+    ],
+    tokens: {
+      light: {
+        '--tw-background': '138 40% 98%',
+        '--tw-foreground': '160 25% 14%',
+        '--tw-primary': '158 64% 40%',
+        '--tw-accent': '173 58% 44%',
+        '--tw-success': '145 63% 36%',
+        '--tw-destructive': '0 78% 58%',
+        '--tw-border': '143 21% 88%',
+        '--radius': '0.8rem',
+        '--surface': 'rgba(245, 252, 249, 0.92)',
+        '--surface-strong': 'rgba(232, 245, 239, 0.96)',
+        '--grey': 'rgba(240, 248, 244, 0.96)',
+        '--grey-strong': 'rgba(225, 240, 232, 0.98)',
+        '--shadow-sm': '0 12px 28px -18px rgba(5, 86, 66, 0.18)',
+        '--shadow': '0 26px 62px -30px rgba(6, 78, 59, 0.24)',
+        '--primary-grad-from': '173 58% 44%',
+        '--primary-grad-to': '158 64% 40%',
+      },
+      dark: {
+        '--tw-background': '164 35% 8%',
+        '--tw-foreground': '144 35% 96%',
+        '--tw-primary': '160 70% 46%',
+        '--tw-accent': '174 72% 45%',
+        '--tw-success': '145 68% 46%',
+        '--tw-destructive': '0 70% 52%',
+        '--tw-border': '160 20% 20%',
+        '--radius': '0.8rem',
+        '--surface': 'rgba(16, 36, 31, 0.84)',
+        '--surface-strong': 'rgba(21, 51, 44, 0.9)',
+        '--grey': 'rgba(24, 61, 52, 0.88)',
+        '--grey-strong': 'rgba(31, 77, 65, 0.9)',
+        '--shadow-sm': '0 18px 34px -20px rgba(1, 44, 34, 0.48)',
+        '--shadow': '0 30px 82px -34px rgba(1, 44, 34, 0.6)',
+        '--primary-grad-from': '174 72% 45%',
+        '--primary-grad-to': '160 70% 46%',
+      },
+    },
+  },
+  graphite: {
+    id: 'graphite',
+    label: 'Graphite Pulse',
+    description:
+      'Neutral slate preset with restrained blue accents for products that need a steadier enterprise tone.',
+    recommendedFor: [
+      'Enterprise admin panels',
+      'B2B internal tools',
+      'Projects that want a more neutral interface',
+    ],
+    tokens: {
+      light: {
+        '--tw-background': '220 18% 97%',
+        '--tw-foreground': '222 24% 14%',
+        '--tw-primary': '221 24% 32%',
+        '--tw-accent': '198 83% 44%',
+        '--tw-success': '160 56% 38%',
+        '--tw-destructive': '0 72% 54%',
+        '--tw-border': '218 17% 86%',
+        '--radius': '0.7rem',
+        '--surface': 'rgba(248, 250, 252, 0.94)',
+        '--surface-strong': 'rgba(226, 232, 240, 0.96)',
+        '--grey': 'rgba(241, 245, 249, 0.98)',
+        '--grey-strong': 'rgba(226, 232, 240, 0.99)',
+        '--shadow-sm': '0 12px 30px -20px rgba(15, 23, 42, 0.18)',
+        '--shadow': '0 28px 66px -30px rgba(15, 23, 42, 0.24)',
+        '--primary-grad-from': '198 83% 44%',
+        '--primary-grad-to': '221 24% 32%',
+      },
+      dark: {
+        '--tw-background': '222 32% 8%',
+        '--tw-foreground': '210 25% 96%',
+        '--tw-primary': '210 24% 82%',
+        '--tw-accent': '192 92% 52%',
+        '--tw-success': '158 64% 45%',
+        '--tw-destructive': '0 72% 56%',
+        '--tw-border': '217 19% 24%',
+        '--radius': '0.7rem',
+        '--surface': 'rgba(15, 23, 42, 0.82)',
+        '--surface-strong': 'rgba(30, 41, 59, 0.92)',
+        '--grey': 'rgba(30, 41, 59, 0.9)',
+        '--grey-strong': 'rgba(51, 65, 85, 0.92)',
+        '--shadow-sm': '0 18px 38px -22px rgba(2, 6, 23, 0.48)',
+        '--shadow': '0 32px 88px -34px rgba(2, 6, 23, 0.68)',
+        '--primary-grad-from': '192 92% 52%',
+        '--primary-grad-to': '210 24% 82%',
+      },
+    },
+  },
+}
+
+function exitWithMissingValue(optionName) {
+  console.error(`Missing value for ${optionName}`)
+  process.exit(1)
+}
 
 function parseArgs(argv) {
   const args = {
     force: false,
     agentsFile: 'AGENTS.md',
     themeFile: 'src/styles/ui-theme.css',
+    theme: DEFAULT_THEME_PRESET,
+    listThemes: false,
   }
 
   for (let index = 0; index < argv.length; index += 1) {
     const arg = argv[index]
+
     if (arg === '--force') {
       args.force = true
       continue
     }
+
     if (arg === '--agents-file') {
-      args.agentsFile = argv[index + 1] ?? args.agentsFile
+      const value = argv[index + 1]
+      if (!value || value.startsWith('--')) {
+        exitWithMissingValue('--agents-file')
+      }
+      args.agentsFile = value
       index += 1
       continue
     }
+
     if (arg === '--theme-file') {
-      args.themeFile = argv[index + 1] ?? args.themeFile
+      const value = argv[index + 1]
+      if (!value || value.startsWith('--')) {
+        exitWithMissingValue('--theme-file')
+      }
+      args.themeFile = value
       index += 1
       continue
     }
+
+    if (arg === '--theme') {
+      const value = argv[index + 1]
+      if (!value || value.startsWith('--')) {
+        exitWithMissingValue('--theme')
+      }
+      args.theme = value
+      index += 1
+      continue
+    }
+
+    if (arg === '--list-themes') {
+      args.listThemes = true
+      continue
+    }
+
     if (arg === '--help' || arg === '-h') {
       printHelp()
       process.exit(0)
@@ -45,38 +279,85 @@ Create bootstrap files for using ${PACKAGE_NAME} with AI/codegen.
 
 Usage:
   npx scope-ui-init
-  npx scope-ui-init --force
+    Run this after @lucasvu/scope-ui has been installed in the consumer project.
+
+  npx scope-ui-init --list-themes
+  npx scope-ui-init --theme sunset
+  npx scope-ui-init --theme forest --force
   npx scope-ui-init --agents-file AGENTS.md --theme-file src/styles/ui-theme.css
 
 Options:
   --force        overwrite existing files
   --agents-file  target path for the generated AGENTS.md file
   --theme-file   target path for the generated theme override file
+  --theme        theme preset id (${Object.keys(THEME_PRESETS).join(', ')})
+  --list-themes  show the approved preset list
   --help, -h     show this help
 `)
 }
 
-function createAgentsTemplate({ themeFile }) {
+function printThemeList() {
+  console.log('Approved theme presets:\n')
+
+  for (const themePreset of Object.values(THEME_PRESETS)) {
+    console.log(`${themePreset.id} - ${themePreset.label}`)
+    console.log(`  ${themePreset.description}`)
+    console.log(`  Recommended for: ${themePreset.recommendedFor.join(', ')}`)
+    console.log('')
+  }
+}
+
+function getThemePreset(themeId) {
+  return THEME_PRESETS[themeId]
+}
+
+function resolveThemePreset(themeId) {
+  const themePreset = getThemePreset(themeId)
+
+  if (themePreset) {
+    return themePreset
+  }
+
+  console.error(`Unknown theme preset: ${themeId}\n`)
+  printThemeList()
+  process.exit(1)
+}
+
+function renderTokenBlock(tokens) {
+  return Object.entries(tokens)
+    .map(([token, value]) => `  ${token}: ${value};`)
+    .join('\n')
+}
+
+function createAgentsTemplate({ themeFile, themePreset }) {
   return `# Agent Rules
 
 This repo uses \`${PACKAGE_NAME}\` as the default UI library.
+This repo is locked to the \`${themePreset.label}\` theme preset (\`${themePreset.id}\`).
 
 Primary references:
 - \`node_modules/${PACKAGE_NAME}/README.md\`
 - \`node_modules/${PACKAGE_NAME}/AI_SETUP.md\`
 - \`${themeFile}\`
 
+Theme preset summary:
+- ${themePreset.description}
+- Recommended for: ${themePreset.recommendedFor.join(', ')}
+
 Always:
 - import \`${PACKAGE_NAME}/styles.css\` once at the app entry
 - import the project theme override file after the package stylesheet
 - use root exports from \`${PACKAGE_NAME}\`
+- use \`${themeFile}\` as the only source of truth for colors, radius, surfaces, and shadows
+- keep layouts and component choices aligned with the shared preset-driven UI used across projects
 - read \`uiAiManifest\` before choosing components
-- read \`uiThemeContract\` before changing colors, surfaces, borders, or shadows
+- read \`uiThemeContract\` before changing colors, surfaces, borders, radius, or shadows
 - keep UI token-driven and theme-driven
 
 Do not:
 - import from \`MainFe\` unless the task explicitly targets a legacy screen
-- hardcode brand colors inside page components when a theme token already exists
+- invent a second palette or one-off brand colors outside \`${themeFile}\`
+- restyle individual pages if the preset tokens can solve it globally
 - create duplicate Button/Input/Select wrappers unless a project-specific behavior is required
 
 Component choice:
@@ -92,20 +373,18 @@ Component choice:
 `
 }
 
-function createThemeTemplate() {
-  return `:root {
-  /* Override only the tokens you need for the project brand. */
-  /* --tw-primary: 221.2 83.2% 53.3%; */
-  /* --tw-accent: 199 89% 48%; */
-  /* --primary-grad-from: 199 89% 48%; */
-  /* --primary-grad-to: 221.2 83.2% 53.3%; */
-  /* --surface: rgba(255, 255, 255, 0.92); */
+function createThemeTemplate({ themePreset }) {
+  return `/* Generated by scope-ui-init. */
+/* Theme preset: ${themePreset.label} (${themePreset.id}) */
+/* Re-run \`npx scope-ui-init --theme <preset> --force\` to switch preset. */
+
+:root {
+${renderTokenBlock(themePreset.tokens.light)}
 }
 
-.dark {
-  /* --tw-primary: 217.2 91.2% 59.8%; */
-  /* --tw-accent: 199 89% 48%; */
-  /* --surface: rgba(15, 23, 42, 0.78); */
+.dark,
+[data-ui-theme='dark'] {
+${renderTokenBlock(themePreset.tokens.dark)}
 }
 `
 }
@@ -125,19 +404,27 @@ function writeFile(targetPath, content, force) {
 
 const options = parseArgs(process.argv.slice(2))
 
+if (options.listThemes) {
+  printThemeList()
+  process.exit(0)
+}
+
+const themePreset = resolveThemePreset(options.theme)
+
 const agentsResult = writeFile(
   options.agentsFile,
-  createAgentsTemplate({ themeFile: options.themeFile }),
+  createAgentsTemplate({ themeFile: options.themeFile, themePreset }),
   options.force,
 )
 
 const themeResult = writeFile(
   options.themeFile,
-  createThemeTemplate(),
+  createThemeTemplate({ themePreset }),
   options.force,
 )
 
 console.log(`Initialized ${PACKAGE_NAME}`)
+console.log(`- theme preset: ${themePreset.label} (${themePreset.id})`)
 console.log(`- ${agentsResult.path}: ${agentsResult.status}`)
 console.log(`- ${themeResult.path}: ${themeResult.status}`)
 console.log('')
@@ -145,3 +432,4 @@ console.log('Next steps:')
 console.log(`1. Import \`${PACKAGE_NAME}/styles.css\` once at your app entry.`)
 console.log(`2. Import \`${options.themeFile}\` right after the package stylesheet.`)
 console.log(`3. Let your agent read \`${options.agentsFile}\` before generating UI.`)
+console.log(`4. Re-run this command with \`--theme <preset> --force\` if you want another approved preset.`)