@lucaismyname/create-l1-stack 0.0.18 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucaismyname/create-l1-stack",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/index.js

@@ -77,6 +77,106 @@ const THEME_PRESETS = {
   },
 }
 
+const INTEGRATIONS = {
+  contentful: {
+    label: 'Contentful',
+    env: {
+      VITE_CONTENTFUL_SPACE_ID: '',
+      VITE_CONTENTFUL_ENVIRONMENT: 'master',
+      VITE_CONTENTFUL_ACCESS_TOKEN: '',
+    },
+    clientOnlyWarning: false,
+  },
+  notion: {
+    label: 'Notion (frontend-only template; do not ship secret token to browser)',
+    env: {
+      VITE_NOTION_TOKEN: '',
+    },
+    clientOnlyWarning: true,
+  },
+  strapi: {
+    label: 'Strapi',
+    env: {
+      VITE_STRAPI_URL: 'https://example.com',
+      VITE_STRAPI_TOKEN: '',
+    },
+    clientOnlyWarning: false,
+  },
+  sanity: {
+    label: 'Sanity',
+    env: {
+      VITE_SANITY_PROJECT_ID: '',
+      VITE_SANITY_DATASET: 'production',
+      VITE_SANITY_API_VERSION: '2024-01-01',
+      VITE_SANITY_TOKEN: '',
+      VITE_SANITY_USE_CDN: 'true',
+    },
+    clientOnlyWarning: false,
+  },
+  mysql: {
+    label: 'MySQL (backend-only; template will only include docs)',
+    env: {
+      VITE_MYSQL_HOST: 'localhost',
+      VITE_MYSQL_USER: '',
+      VITE_MYSQL_PASSWORD: '',
+      VITE_MYSQL_DATABASE: '',
+    },
+    clientOnlyWarning: true,
+  },
+}
+
+const LAYOUTS = {
+  topNav: { label: 'Top nav (default)' },
+  sidebar: { label: 'Sidebar (responsive + collapsible)' },
+  blank: { label: 'Blank' },
+}
+
+const CONTAINER_PRESETS = {
+  narrow: { label: 'Narrow', maxW: 'max-w-3xl' },
+  default: { label: 'Default', maxW: 'max-w-5xl' },
+  wide: { label: 'Wide', maxW: 'max-w-7xl' },
+}
+
+const DEPLOY_TARGETS = {
+  static: { label: 'Static (Apache/Nginx)' },
+  netlify: { label: 'Netlify' },
+  vercel: { label: 'Vercel' },
+  cloudflare: { label: 'Cloudflare Pages' },
+}
+
+const ICON_SETS = {
+  lucide: {
+    dependency: { name: 'lucide-react', version: '^0.563.0' },
+    tsx: `import * as React from "react"\nimport {\n  Check,\n  ChevronDown,\n  ChevronUp,\n  Database,\n  NotebookPen,\n  Rocket,\n  Server,\n} from "lucide-react"\n\ntype IconProps = React.SVGProps<SVGSVGElement>\n\nexport const Icons = {\n  Check: (props: IconProps) => <Check {...props} />,\n  ChevronDown: (props: IconProps) => <ChevronDown {...props} />,\n  ChevronUp: (props: IconProps) => <ChevronUp {...props} />,\n  Database: (props: IconProps) => <Database {...props} />,\n  NotebookPen: (props: IconProps) => <NotebookPen {...props} />,\n  Rocket: (props: IconProps) => <Rocket {...props} />,\n  Server: (props: IconProps) => <Server {...props} />,\n}\n`,
+    jsx: `import {\n  Check,\n  ChevronDown,\n  ChevronUp,\n  Database,\n  NotebookPen,\n  Rocket,\n  Server,\n} from "lucide-react"\n\nexport const Icons = {\n  Check: (props) => <Check {...props} />,\n  ChevronDown: (props) => <ChevronDown {...props} />,\n  ChevronUp: (props) => <ChevronUp {...props} />,\n  Database: (props) => <Database {...props} />,\n  NotebookPen: (props) => <NotebookPen {...props} />,\n  Rocket: (props) => <Rocket {...props} />,\n  Server: (props) => <Server {...props} />,\n}\n`,
+  },
+  heroicons: {
+    dependency: { name: '@heroicons/react', version: '^2.2.0' },
+    tsx: `import * as React from "react"\nimport {\n  CheckIcon,\n  ChevronDownIcon,\n  ChevronUpIcon,\n  CircleStackIcon,\n  PencilSquareIcon,\n  RocketLaunchIcon,\n  ServerIcon,\n} from "@heroicons/react/24/outline"\n\ntype IconProps = React.SVGProps<SVGSVGElement>\n\nexport const Icons = {\n  Check: (props: IconProps) => <CheckIcon {...props} />,\n  ChevronDown: (props: IconProps) => <ChevronDownIcon {...props} />,\n  ChevronUp: (props: IconProps) => <ChevronUpIcon {...props} />,\n  Database: (props: IconProps) => <CircleStackIcon {...props} />,\n  NotebookPen: (props: IconProps) => <PencilSquareIcon {...props} />,\n  Rocket: (props: IconProps) => <RocketLaunchIcon {...props} />,\n  Server: (props: IconProps) => <ServerIcon {...props} />,\n}\n`,
+    jsx: `import {\n  CheckIcon,\n  ChevronDownIcon,\n  ChevronUpIcon,\n  CircleStackIcon,\n  PencilSquareIcon,\n  RocketLaunchIcon,\n  ServerIcon,\n} from "@heroicons/react/24/outline"\n\nexport const Icons = {\n  Check: (props) => <CheckIcon {...props} />,\n  ChevronDown: (props) => <ChevronDownIcon {...props} />,\n  ChevronUp: (props) => <ChevronUpIcon {...props} />,\n  Database: (props) => <CircleStackIcon {...props} />,\n  NotebookPen: (props) => <PencilSquareIcon {...props} />,\n  Rocket: (props) => <RocketLaunchIcon {...props} />,\n  Server: (props) => <ServerIcon {...props} />,\n}\n`,
+  },
+  tabler: {
+    dependency: { name: '@tabler/icons-react', version: '^3.31.0' },
+    tsx: `import * as React from "react"\nimport {\n  IconCheck,\n  IconChevronDown,\n  IconChevronUp,\n  IconDatabase,\n  IconNotebook,\n  IconRocket,\n  IconServer,\n} from "@tabler/icons-react"\n\ntype IconProps = React.SVGProps<SVGSVGElement>\n\nexport const Icons = {\n  Check: (props: IconProps) => <IconCheck {...props} />,\n  ChevronDown: (props: IconProps) => <IconChevronDown {...props} />,\n  ChevronUp: (props: IconProps) => <IconChevronUp {...props} />,\n  Database: (props: IconProps) => <IconDatabase {...props} />,\n  NotebookPen: (props: IconProps) => <IconNotebook {...props} />,\n  Rocket: (props: IconProps) => <IconRocket {...props} />,\n  Server: (props: IconProps) => <IconServer {...props} />,\n}\n`,
+    jsx: `import {\n  IconCheck,\n  IconChevronDown,\n  IconChevronUp,\n  IconDatabase,\n  IconNotebook,\n  IconRocket,\n  IconServer,\n} from "@tabler/icons-react"\n\nexport const Icons = {\n  Check: (props) => <IconCheck {...props} />,\n  ChevronDown: (props) => <IconChevronDown {...props} />,\n  ChevronUp: (props) => <IconChevronUp {...props} />,\n  Database: (props) => <IconDatabase {...props} />,\n  NotebookPen: (props) => <IconNotebook {...props} />,\n  Rocket: (props) => <IconRocket {...props} />,\n  Server: (props) => <IconServer {...props} />,\n}\n`,
+  },
+  radix: {
+    dependency: { name: '@radix-ui/react-icons', version: '^1.3.2' },
+    tsx: `import * as React from "react"\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons"\n\ntype IconProps = React.SVGProps<SVGSVGElement>\n\nconst FallbackIcon = (props: IconProps) => (\n  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>\n    <path d="M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7l3-7z" />\n  </svg>\n)\n\nexport const Icons = {\n  Check: (props: IconProps) => <CheckIcon {...props} />,\n  ChevronDown: (props: IconProps) => <ChevronDownIcon {...props} />,\n  ChevronUp: (props: IconProps) => <ChevronUpIcon {...props} />,\n  Database: (props: IconProps) => <FallbackIcon {...props} />,\n  NotebookPen: (props: IconProps) => <FallbackIcon {...props} />,\n  Rocket: (props: IconProps) => <FallbackIcon {...props} />,\n  Server: (props: IconProps) => <FallbackIcon {...props} />,\n}\n`,
+    jsx: `import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons"\n\nconst FallbackIcon = (props) => (\n  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>\n    <path d="M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7l3-7z" />\n  </svg>\n)\n\nexport const Icons = {\n  Check: (props) => <CheckIcon {...props} />,\n  ChevronDown: (props) => <ChevronDownIcon {...props} />,\n  ChevronUp: (props) => <ChevronUpIcon {...props} />,\n  Database: (props) => <FallbackIcon {...props} />,\n  NotebookPen: (props) => <FallbackIcon {...props} />,\n  Rocket: (props) => <FallbackIcon {...props} />,\n  Server: (props) => <FallbackIcon {...props} />,\n}\n`,
+  },
+  feather: {
+    dependency: { name: 'react-feather', version: '^2.0.10' },
+    tsx: `import * as React from "react"\nimport { Check, ChevronDown, ChevronUp, Database, Edit3, Send, Server } from "react-feather"\n\ntype IconProps = React.SVGProps<SVGSVGElement>\n\nexport const Icons = {\n  Check: (props: IconProps) => <Check {...props} />,\n  ChevronDown: (props: IconProps) => <ChevronDown {...props} />,\n  ChevronUp: (props: IconProps) => <ChevronUp {...props} />,\n  Database: (props: IconProps) => <Database {...props} />,\n  NotebookPen: (props: IconProps) => <Edit3 {...props} />,\n  Rocket: (props: IconProps) => <Send {...props} />,\n  Server: (props: IconProps) => <Server {...props} />,\n}\n`,
+    jsx: `import { Check, ChevronDown, ChevronUp, Database, Edit3, Send, Server } from "react-feather"\n\nexport const Icons = {\n  Check: (props) => <Check {...props} />,\n  ChevronDown: (props) => <ChevronDown {...props} />,\n  ChevronUp: (props) => <ChevronUp {...props} />,\n  Database: (props) => <Database {...props} />,\n  NotebookPen: (props) => <Edit3 {...props} />,\n  Rocket: (props) => <Send {...props} />,\n  Server: (props) => <Server {...props} />,\n}\n`,
+  },
+  materialSymbols: {
+    dependency: { name: 'react-material-symbols', version: '^4.1.0' },
+    tsx: `import * as React from "react"\nimport { MaterialSymbol } from "react-material-symbols"\n\ntype IconProps = React.SVGProps<SVGSVGElement>\n\ntype MaterialProps = IconProps & { icon: string }\n\nconst MS = ({ icon, className }: MaterialProps) => (\n  <MaterialSymbol icon={icon} className={className} size={24} fill={0} grade={0} opticalSize={24} />\n)\n\nexport const Icons = {\n  Check: (props: IconProps) => <MS icon="check" {...props} />,\n  ChevronDown: (props: IconProps) => <MS icon="keyboard_arrow_down" {...props} />,\n  ChevronUp: (props: IconProps) => <MS icon="keyboard_arrow_up" {...props} />,\n  Database: (props: IconProps) => <MS icon="database" {...props} />,\n  NotebookPen: (props: IconProps) => <MS icon="edit_note" {...props} />,\n  Rocket: (props: IconProps) => <MS icon="rocket_launch" {...props} />,\n  Server: (props: IconProps) => <MS icon="dns" {...props} />,\n}\n`,
+    jsx: `import { MaterialSymbol } from "react-material-symbols"\n\nconst MS = ({ icon, className }) => (\n  <MaterialSymbol icon={icon} className={className} size={24} fill={0} grade={0} opticalSize={24} />\n)\n\nexport const Icons = {\n  Check: (props) => <MS icon="check" {...props} />,\n  ChevronDown: (props) => <MS icon="keyboard_arrow_down" {...props} />,\n  ChevronUp: (props) => <MS icon="keyboard_arrow_up" {...props} />,\n  Database: (props) => <MS icon="database" {...props} />,\n  NotebookPen: (props) => <MS icon="edit_note" {...props} />,\n  Rocket: (props) => <MS icon="rocket_launch" {...props} />,\n  Server: (props) => <MS icon="dns" {...props} />,\n}\n`,
+  },
+}
+
 function updateCssVarInBlock(css, blockSelector, varName, value) {
   const blockRe = new RegExp(`(${blockSelector}\\s*\\{)([\\s\\S]*?)(\\})`, 'm')
   const match = css.match(blockRe)
@@ -112,6 +212,280 @@ async function applyPrimaryTheme(targetDir, preset) {
   }
 }
 
+async function applyIconSet(targetDir, language, iconSetKey) {
+  const iconSet = ICON_SETS[iconSetKey] ?? ICON_SETS.lucide
+
+  const pkgJsonPath = path.join(targetDir, 'package.json')
+  const pkg = await fse.readJson(pkgJsonPath)
+  pkg.dependencies ??= {}
+
+  for (const key of Object.keys(ICON_SETS)) {
+    const depName = ICON_SETS[key]?.dependency?.name
+    if (depName && pkg.dependencies[depName]) {
+      delete pkg.dependencies[depName]
+    }
+  }
+
+  pkg.dependencies[iconSet.dependency.name] = iconSet.dependency.version
+  await fse.writeJson(pkgJsonPath, pkg, { spaces: 2 })
+
+  const iconFile = path.join(
+    targetDir,
+    'src',
+    'components',
+    language === 'ts' ? 'icons.tsx' : 'icons.jsx'
+  )
+  await fs.mkdir(path.dirname(iconFile), { recursive: true })
+  await fs.writeFile(iconFile, language === 'ts' ? iconSet.tsx : iconSet.jsx, 'utf8')
+}
+
+function renderEnvFile(envMap) {
+  const keys = Object.keys(envMap)
+  keys.sort()
+  return keys.map((k) => `${k}=${envMap[k] ?? ''}`).join('\n') + '\n'
+}
+
+function configModuleTs() {
+  return `type Env = ImportMetaEnv\n\nfunction required(key: keyof Env): string {\n  const value = import.meta.env[key]\n  if (!value) throw new Error(\`Missing env: \${String(key)}\`)\n  return value\n}\n\nexport const config = {\n  contentful: {\n    spaceId: import.meta.env.VITE_CONTENTFUL_SPACE_ID ?? \"\",\n    environment: import.meta.env.VITE_CONTENTFUL_ENVIRONMENT,\n    accessToken: import.meta.env.VITE_CONTENTFUL_ACCESS_TOKEN ?? \"\",\n  },\n  notion: {\n    token: import.meta.env.VITE_NOTION_TOKEN,\n  },\n  strapi: {\n    url: import.meta.env.VITE_STRAPI_URL ?? \"\",\n    token: import.meta.env.VITE_STRAPI_TOKEN,\n  },\n  sanity: {\n    projectId: import.meta.env.VITE_SANITY_PROJECT_ID ?? \"\",\n    dataset: import.meta.env.VITE_SANITY_DATASET ?? \"\",\n    apiVersion: import.meta.env.VITE_SANITY_API_VERSION,\n    token: import.meta.env.VITE_SANITY_TOKEN,\n    useCdn: import.meta.env.VITE_SANITY_USE_CDN === \"true\",\n  },\n}\n\nexport const env = { required }\n`
+}
+
+function configModuleJs() {
+  return `function required(key) {\n  const value = import.meta.env[key]\n  if (!value) throw new Error(\`Missing env: \${String(key)}\`)\n  return value\n}\n\nexport const config = {\n  contentful: {\n    spaceId: import.meta.env.VITE_CONTENTFUL_SPACE_ID ?? \"\",\n    environment: import.meta.env.VITE_CONTENTFUL_ENVIRONMENT,\n    accessToken: import.meta.env.VITE_CONTENTFUL_ACCESS_TOKEN ?? \"\",\n  },\n  notion: {\n    token: import.meta.env.VITE_NOTION_TOKEN,\n  },\n  strapi: {\n    url: import.meta.env.VITE_STRAPI_URL ?? \"\",\n    token: import.meta.env.VITE_STRAPI_TOKEN,\n  },\n  sanity: {\n    projectId: import.meta.env.VITE_SANITY_PROJECT_ID ?? \"\",\n    dataset: import.meta.env.VITE_SANITY_DATASET ?? \"\",\n    apiVersion: import.meta.env.VITE_SANITY_API_VERSION,\n    token: import.meta.env.VITE_SANITY_TOKEN,\n    useCdn: import.meta.env.VITE_SANITY_USE_CDN === \"true\",\n  },\n}\n\nexport const env = { required }\n`
+}
+
+async function applyEnvAndConfig(targetDir, language, enabledIntegrations) {
+  const envExample = {}
+  const envLocal = {}
+
+  let hasClientWarning = false
+
+  for (const key of enabledIntegrations) {
+    const integration = INTEGRATIONS[key]
+    if (!integration) continue
+    if (integration.clientOnlyWarning) hasClientWarning = true
+    for (const [envKey, envValue] of Object.entries(integration.env)) {
+      envExample[envKey] = envValue
+      envLocal[envKey] = envValue
+    }
+  }
+
+  if (hasClientWarning) {
+    envExample.VITE_CLIENT_SIDE_SECRET_WARNING =
+      'DO_NOT_PUT_SECRETS_IN_VITE_ENV__MOVE_TO_SERVER'
+    envLocal.VITE_CLIENT_SIDE_SECRET_WARNING =
+      'DO_NOT_PUT_SECRETS_IN_VITE_ENV__MOVE_TO_SERVER'
+  }
+
+  const envExamplePath = path.join(targetDir, '.env.example')
+  const envLocalPath = path.join(targetDir, '.env.local')
+  await fs.writeFile(envExamplePath, renderEnvFile(envExample), 'utf8')
+  await fs.writeFile(envLocalPath, renderEnvFile(envLocal), 'utf8')
+
+  const configPath = path.join(
+    targetDir,
+    'src',
+    language === 'ts' ? 'config.ts' : 'config.js'
+  )
+  await fs.writeFile(configPath, language === 'ts' ? configModuleTs() : configModuleJs(), 'utf8')
+}
+
+async function applyIntegrations(targetDir, language, enabledIntegrations) {
+  const libDir = path.join(targetDir, 'src', 'lib')
+  await fs.mkdir(libDir, { recursive: true })
+
+  const ext = language === 'ts' ? 'ts' : 'js'
+  const configImport = "import { config } from '@/config'"
+
+  if (!enabledIntegrations.includes('contentful')) {
+    await fse.remove(path.join(libDir, `contentful.${ext}`))
+  } else {
+    const content = `${configImport}\nimport { createContentfulClient } from '@lucaismyname/l1-utils'\n\nexport const contentful = createContentfulClient({\n  spaceId: config.contentful.spaceId,\n  environment: config.contentful.environment,\n  accessToken: config.contentful.accessToken,\n})\n`
+    await fs.writeFile(path.join(libDir, `contentful.${ext}`), content, 'utf8')
+  }
+
+  if (!enabledIntegrations.includes('strapi')) {
+    await fse.remove(path.join(libDir, `strapi.${ext}`))
+  } else {
+    const content = `${configImport}\nimport { createStrapiClient } from '@lucaismyname/l1-utils'\n\nexport const strapi = createStrapiClient({\n  baseUrl: config.strapi.url,\n  apiToken: config.strapi.token,\n})\n`
+    await fs.writeFile(path.join(libDir, `strapi.${ext}`), content, 'utf8')
+  }
+
+  if (!enabledIntegrations.includes('sanity')) {
+    await fse.remove(path.join(libDir, `sanity.${ext}`))
+  } else {
+    const content = `${configImport}\nimport { createSanityClient } from '@lucaismyname/l1-utils'\n\nexport const sanity = createSanityClient({\n  projectId: config.sanity.projectId,\n  dataset: config.sanity.dataset,\n  apiVersion: config.sanity.apiVersion,\n  token: config.sanity.token,\n  useCdn: config.sanity.useCdn,\n})\n`
+    await fs.writeFile(path.join(libDir, `sanity.${ext}`), content, 'utf8')
+  }
+
+  if (!enabledIntegrations.includes('notion')) {
+    await fse.remove(path.join(libDir, `notion.${ext}`))
+  } else {
+    const content = `${configImport}\nimport { createNotionClient } from '@lucaismyname/l1-utils'\n\nexport async function getNotion() {\n  const token = config.notion.token\n  if (!token) throw new Error('Missing VITE_NOTION_TOKEN')\n  return createNotionClient({ token })\n}\n`
+    await fs.writeFile(path.join(libDir, `notion.${ext}`), content, 'utf8')
+  }
+
+  if (!enabledIntegrations.includes('mysql')) {
+    await fse.remove(path.join(libDir, `mysql.${ext}`))
+  } else {
+    const content = `// MySQL is backend-only.\n// Do not use MySQL from a Vite frontend app.\n// Use @lucaismyname/l1-utils from a Node server (Express/Fastify/Next API route, etc.).\n// Example (Node):\n//   import { createMySqlPool } from '@lucaismyname/l1-utils'\n//   const db = await createMySqlPool({ host, user, password, database })\n`
+    await fs.writeFile(path.join(libDir, `mysql.${ext}`), content, 'utf8')
+  }
+}
+
+async function applyContainerPreset(targetDir, language, presetKey) {
+  const preset = CONTAINER_PRESETS[presetKey] ?? CONTAINER_PRESETS.default
+  const appPath = path.join(targetDir, 'src', language === 'ts' ? 'App.tsx' : 'App.jsx')
+  const topNavPath = path.join(
+    targetDir,
+    'src',
+    'components',
+    language === 'ts' ? 'TopNav.tsx' : 'TopNav.jsx'
+  )
+
+  const patchMaxW = async (filePath) => {
+    try {
+      const src = await fs.readFile(filePath, 'utf8')
+      const next = src
+        .replace(/max-w-5xl/g, preset.maxW)
+        .replace(/max-w-7xl/g, preset.maxW)
+        .replace(/max-w-3xl/g, preset.maxW)
+      if (next !== src) await fs.writeFile(filePath, next, 'utf8')
+    } catch {
+      // ignore
+    }
+  }
+
+  await patchMaxW(appPath)
+  await patchMaxW(topNavPath)
+}
+
+function notFoundPageTs() {
+  return `import { Link } from 'react-router-dom'\n\nexport default function NotFound() {\n  return (\n    <div className=\"space-y-2\">\n      <h1 className=\"text-2xl font-semibold tracking-tight\">Page not found</h1>\n      <p className=\"text-muted-foreground\">The page you’re looking for doesn’t exist.</p>\n      <Link to=\"/\" className=\"text-sm font-medium underline underline-offset-4\">\n        Go home\n      </Link>\n    </div>\n  )\n}\n`
+}
+
+function notFoundPageJs() {
+  return `import { Link } from 'react-router-dom'\n\nexport default function NotFound() {\n  return (\n    <div className=\"space-y-2\">\n      <h1 className=\"text-2xl font-semibold tracking-tight\">Page not found</h1>\n      <p className=\"text-muted-foreground\">The page you’re looking for doesn’t exist.</p>\n      <Link to=\"/\" className=\"text-sm font-medium underline underline-offset-4\">\n        Go home\n      </Link>\n    </div>\n  )\n}\n`
+}
+
+function errorBoundaryTs() {
+  return `import * as React from 'react'\n\ntype Props = { children: React.ReactNode }\n\ntype State = { hasError: boolean; error?: unknown }\n\nexport class ErrorBoundary extends React.Component<Props, State> {\n  state: State = { hasError: false }\n\n  static getDerivedStateFromError(error: unknown) {\n    return { hasError: true, error }\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return (\n        <div className=\"space-y-2\">\n          <h1 className=\"text-2xl font-semibold tracking-tight\">Something went wrong</h1>\n          <p className=\"text-muted-foreground\">An unexpected error occurred.</p>\n        </div>\n      )\n    }\n\n    return this.props.children\n  }\n}\n`
+}
+
+function errorBoundaryJs() {
+  return `import * as React from 'react'\n\nexport class ErrorBoundary extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = { hasError: false }\n  }\n\n  static getDerivedStateFromError(error) {\n    return { hasError: true, error }\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return (\n        <div className=\"space-y-2\">\n          <h1 className=\"text-2xl font-semibold tracking-tight\">Something went wrong</h1>\n          <p className=\"text-muted-foreground\">An unexpected error occurred.</p>\n        </div>\n      )\n    }\n\n    return this.props.children\n  }\n}\n`
+}
+
+function sidebarLayoutTs(containerMaxW) {
+  return `import { useMemo, useState } from 'react'\nimport { Link, NavLink, useLocation } from 'react-router-dom'\n\nconst navLinkClassName = ({ isActive }: { isActive: boolean }) =>\n  [\n    'flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors',\n    isActive ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-accent/40',\n  ].join(' ')\n\nexport default function SidebarLayout({ children }: { children: React.ReactNode }) {\n  const [open, setOpen] = useState(false)\n  const location = useLocation()\n\n  useMemo(() => {\n    setOpen(false)\n  }, [location.pathname])\n\n  return (\n    <div className=\"min-h-dvh\">\n      <header className=\"border-b md:hidden\">\n        <div className=\"mx-auto flex h-14 ${containerMaxW} items-center justify-between px-4\">\n          <Link to=\"/\" className=\"text-sm font-semibold\">\n            L1 Stack\n          </Link>\n          <button\n            type=\"button\"\n            className=\"inline-flex items-center justify-center rounded-md border px-3 py-2 text-sm\"\n            onClick={() => setOpen((v) => !v)}\n          >\n            Menu\n          </button>\n        </div>\n      </header>\n\n      <div className=\"mx-auto ${containerMaxW} px-4\">\n        <div className=\"grid grid-cols-1 md:grid-cols-[240px_1fr] md:gap-8\">\n          <aside className=\"md:sticky md:top-6 md:h-[calc(100dvh-3rem)] md:py-6\">\n            <div className={open ? 'block' : 'hidden md:block'}>\n              <div className=\"py-6 md:py-0\">\n                <div className=\"mb-6 hidden md:block\">\n                  <Link to=\"/\" className=\"text-sm font-semibold\">\n                    L1 Stack\n                  </Link>\n                </div>\n                <nav className=\"space-y-1\">\n                  <NavLink to=\"/\" end className={navLinkClassName}>\n                    Home\n                  </NavLink>\n                  <NavLink to=\"/integrations\" className={navLinkClassName}>\n                    Integrations\n                  </NavLink>\n                </nav>\n              </div>\n            </div>\n          </aside>\n\n          <main className=\"py-10\">{children}</main>\n        </div>\n      </div>\n    </div>\n  )\n}\n`
+}
+
+function sidebarLayoutJs(containerMaxW) {
+  return `import { useMemo, useState } from 'react'\nimport { Link, NavLink, useLocation } from 'react-router-dom'\n\nconst navLinkClassName = ({ isActive }) =>\n  [\n    'flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors',\n    isActive ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-accent/40',\n  ].join(' ')\n\nexport default function SidebarLayout({ children }) {\n  const [open, setOpen] = useState(false)\n  const location = useLocation()\n\n  useMemo(() => {\n    setOpen(false)\n  }, [location.pathname])\n\n  return (\n    <div className=\"min-h-dvh\">\n      <header className=\"border-b md:hidden\">\n        <div className=\"mx-auto flex h-14 ${containerMaxW} items-center justify-between px-4\">\n          <Link to=\"/\" className=\"text-sm font-semibold\">\n            L1 Stack\n          </Link>\n          <button\n            type=\"button\"\n            className=\"inline-flex items-center justify-center rounded-md border px-3 py-2 text-sm\"\n            onClick={() => setOpen((v) => !v)}\n          >\n            Menu\n          </button>\n        </div>\n      </header>\n\n      <div className=\"mx-auto ${containerMaxW} px-4\">\n        <div className=\"grid grid-cols-1 md:grid-cols-[240px_1fr] md:gap-8\">\n          <aside className=\"md:sticky md:top-6 md:h-[calc(100dvh-3rem)] md:py-6\">\n            <div className={open ? 'block' : 'hidden md:block'}>\n              <div className=\"py-6 md:py-0\">\n                <div className=\"mb-6 hidden md:block\">\n                  <Link to=\"/\" className=\"text-sm font-semibold\">\n                    L1 Stack\n                  </Link>\n                </div>\n                <nav className=\"space-y-1\">\n                  <NavLink to=\"/\" end className={navLinkClassName}>\n                    Home\n                  </NavLink>\n                  <NavLink to=\"/integrations\" className={navLinkClassName}>\n                    Integrations\n                  </NavLink>\n                </nav>\n              </div>\n            </div>\n          </aside>\n\n          <main className=\"py-10\">{children}</main>\n        </div>\n      </div>\n    </div>\n  )\n}\n`
+}
+
+async function applyLayout(targetDir, language, layoutKey, containerPresetKey) {
+  const appPath = path.join(targetDir, 'src', language === 'ts' ? 'App.tsx' : 'App.jsx')
+  const notFoundPath = path.join(
+    targetDir,
+    'src',
+    'pages',
+    language === 'ts' ? 'NotFound.tsx' : 'NotFound.jsx'
+  )
+  const errorBoundaryPath = path.join(
+    targetDir,
+    'src',
+    'components',
+    language === 'ts' ? 'ErrorBoundary.tsx' : 'ErrorBoundary.jsx'
+  )
+
+  await fs.mkdir(path.dirname(notFoundPath), { recursive: true })
+  await fs.mkdir(path.dirname(errorBoundaryPath), { recursive: true })
+  await fs.writeFile(notFoundPath, language === 'ts' ? notFoundPageTs() : notFoundPageJs(), 'utf8')
+  await fs.writeFile(errorBoundaryPath, language === 'ts' ? errorBoundaryTs() : errorBoundaryJs(), 'utf8')
+
+  const preset = CONTAINER_PRESETS[containerPresetKey] ?? CONTAINER_PRESETS.default
+  const containerMaxW = preset.maxW
+
+  if (layoutKey === 'sidebar') {
+    const sidebarPath = path.join(
+      targetDir,
+      'src',
+      'components',
+      language === 'ts' ? 'SidebarLayout.tsx' : 'SidebarLayout.jsx'
+    )
+    await fs.mkdir(path.dirname(sidebarPath), { recursive: true })
+    await fs.writeFile(
+      sidebarPath,
+      language === 'ts' ? sidebarLayoutTs(containerMaxW) : sidebarLayoutJs(containerMaxW),
+      'utf8'
+    )
+
+    const app = `import { Route, Routes } from 'react-router-dom'\nimport SidebarLayout from './components/SidebarLayout'\nimport { ErrorBoundary } from './components/ErrorBoundary'\nimport Home from './pages/Home'\nimport Integrations from './pages/Integrations'\nimport NotFound from './pages/NotFound'\n\nfunction App() {\n  return (\n    <SidebarLayout>\n      <ErrorBoundary>\n        <Routes>\n          <Route path=\"/\" element={<Home />} />\n          <Route path=\"/integrations\" element={<Integrations />} />\n          <Route path=\"*\" element={<NotFound />} />\n        </Routes>\n      </ErrorBoundary>\n    </SidebarLayout>\n  )\n}\n\nexport default App\n`
+    await fs.writeFile(appPath, app, 'utf8')
+    return
+  }
+
+  if (layoutKey === 'blank') {
+    const app = `import { Route, Routes } from 'react-router-dom'\nimport { ErrorBoundary } from './components/ErrorBoundary'\nimport Home from './pages/Home'\nimport Integrations from './pages/Integrations'\nimport NotFound from './pages/NotFound'\n\nfunction App() {\n  return (\n    <div className=\"min-h-dvh\">\n      <main className=\"mx-auto ${containerMaxW} px-4 py-10\">\n        <ErrorBoundary>\n          <Routes>\n            <Route path=\"/\" element={<Home />} />\n            <Route path=\"/integrations\" element={<Integrations />} />\n            <Route path=\"*\" element={<NotFound />} />\n          </Routes>\n        </ErrorBoundary>\n      </main>\n    </div>\n  )\n}\n\nexport default App\n`
+    await fs.writeFile(appPath, app, 'utf8')
+    return
+  }
+
+  // topNav: patch existing App if possible
+  try {
+    const src = await fs.readFile(appPath, 'utf8')
+    let next = src
+    next = next.replace(
+      /import \{ Navigate, Route, Routes \} from 'react-router-dom'/g,
+      "import { Route, Routes } from 'react-router-dom'"
+    )
+    if (!next.includes("./components/ErrorBoundary")) {
+      next = next.replace(
+        /import TopNav from '\.\/components\/TopNav'\n/,
+        "import TopNav from './components/TopNav'\nimport { ErrorBoundary } from './components/ErrorBoundary'\n"
+      )
+    }
+    if (!next.includes("./pages/NotFound")) {
+      next = next.replace(
+        /import Integrations from '\.\/pages\/Integrations'\n/,
+        "import Integrations from './pages/Integrations'\nimport NotFound from './pages/NotFound'\n"
+      )
+    }
+    next = next.replace(
+      /<Routes>[\s\S]*?<\/Routes>/m,
+      `<ErrorBoundary>\n        <Routes>\n          <Route path="/" element={<Home />} />\n          <Route path="/integrations" element={<Integrations />} />\n          <Route path="*" element={<NotFound />} />\n        </Routes>\n      </ErrorBoundary>`
+    )
+    if (next !== src) await fs.writeFile(appPath, next, 'utf8')
+  } catch {
+    // ignore
+  }
+}
+
+async function applyDeployTarget(targetDir, targetKey) {
+  const target = DEPLOY_TARGETS[targetKey] ? targetKey : 'static'
+
+  const publicDir = path.join(targetDir, 'public')
+  await fs.mkdir(publicDir, { recursive: true })
+
+  const redirectsPath = path.join(publicDir, '_redirects')
+  const redirects = `/*    /index.html   200\n`
+  await fs.writeFile(redirectsPath, redirects, 'utf8')
+
+  const nginxSnippetPath = path.join(targetDir, 'nginx.conf.snippet')
+  const nginxSnippet = `location / {\n  try_files $uri $uri/ /index.html;\n}\n`
+  await fs.writeFile(nginxSnippetPath, nginxSnippet, 'utf8')
+
+  if (target === 'netlify') {
+    const netlifyToml = `[build]\n  command = "npm run build"\n  publish = "dist"\n\n[[redirects]]\n  from = "/*"\n  to = "/index.html"\n  status = 200\n`
+    await fs.writeFile(path.join(targetDir, 'netlify.toml'), netlifyToml, 'utf8')
+  }
+
+  if (target === 'vercel') {
+    const vercelJson = `{"rewrites":[{"source":"/(.*)","destination":"/index.html"}]}`
+    await fs.writeFile(path.join(targetDir, 'vercel.json'), vercelJson, 'utf8')
+  }
+}
+
 function toKebabCaseName(input) {
   return input
     .trim()
@@ -257,6 +631,83 @@ async function main() {
     process.exit(0)
   }
 
+  const iconSet = await select({
+    message: 'Icon set',
+    options: [
+      { value: 'lucide', label: 'Lucide (default)' },
+      { value: 'heroicons', label: 'HeroIcons' },
+      { value: 'materialSymbols', label: 'Material Symbols' },
+      { value: 'tabler', label: 'Tabler Icons' },
+      { value: 'radix', label: 'Radix Icons' },
+      { value: 'feather', label: 'Feather Icons' },
+    ],
+    initialValue: 'lucide',
+  })
+  if (isCancel(iconSet)) {
+    cancel('Cancelled')
+    process.exit(0)
+  }
+
+  const integrations = []
+  for (const key of Object.keys(INTEGRATIONS)) {
+    const enabled = await select({
+      message: `Enable ${INTEGRATIONS[key].label}?`,
+      options: [
+        { value: 'yes', label: 'Yes' },
+        { value: 'no', label: 'No' },
+      ],
+      initialValue: 'no',
+    })
+    if (isCancel(enabled)) {
+      cancel('Cancelled')
+      process.exit(0)
+    }
+    if (enabled === 'yes') integrations.push(key)
+  }
+
+  const layout = await select({
+    message: 'Layout',
+    options: [
+      { value: 'topNav', label: LAYOUTS.topNav.label },
+      { value: 'sidebar', label: LAYOUTS.sidebar.label },
+      { value: 'blank', label: LAYOUTS.blank.label },
+    ],
+    initialValue: 'topNav',
+  })
+  if (isCancel(layout)) {
+    cancel('Cancelled')
+    process.exit(0)
+  }
+
+  const containerPreset = await select({
+    message: 'Content width',
+    options: [
+      { value: 'narrow', label: CONTAINER_PRESETS.narrow.label },
+      { value: 'default', label: CONTAINER_PRESETS.default.label },
+      { value: 'wide', label: CONTAINER_PRESETS.wide.label },
+    ],
+    initialValue: 'default',
+  })
+  if (isCancel(containerPreset)) {
+    cancel('Cancelled')
+    process.exit(0)
+  }
+
+  const deployTarget = await select({
+    message: 'Deploy to',
+    options: [
+      { value: 'static', label: DEPLOY_TARGETS.static.label },
+      { value: 'netlify', label: DEPLOY_TARGETS.netlify.label },
+      { value: 'vercel', label: DEPLOY_TARGETS.vercel.label },
+      { value: 'cloudflare', label: DEPLOY_TARGETS.cloudflare.label },
+    ],
+    initialValue: 'static',
+  })
+  if (isCancel(deployTarget)) {
+    cancel('Cancelled')
+    process.exit(0)
+  }
+
   const targetDir = path.resolve(process.cwd(), projectName)
   // NOTE: npm downloads the CLI package before prompts run.
   // To avoid downloading both templates, we fetch only the chosen template from npm.
@@ -309,6 +760,12 @@ async function main() {
   }
 
   await applyPrimaryTheme(targetDir, THEME_PRESETS[primaryColor] ?? THEME_PRESETS.slate)
+  await applyIconSet(targetDir, language, iconSet)
+  await applyEnvAndConfig(targetDir, language, integrations)
+  await applyIntegrations(targetDir, language, integrations)
+  await applyLayout(targetDir, language, layout, containerPreset)
+  await applyContainerPreset(targetDir, language, containerPreset)
+  await applyDeployTarget(targetDir, deployTarget)
 
   // Update package name
   const pkgJsonPath = path.join(targetDir, 'package.json')