create-bw-app 0.12.0 → 0.13.0

package/template/base/app/globals.css

@@ -1,572 +1,8 @@
 @import "tailwindcss";
 @import "@brightweblabs/theme/css";
+@import "./theme.css";
 
-:root {
-  color-scheme: light;
-  --font-sans: "IBM Plex Sans", "Segoe UI", sans-serif;
-  --font-display: Georgia, "Times New Roman", serif;
-  /* Raw brand tokens: customize these first per client. */
-  --brand-primary: #266946;
-  --brand-primary-rgb: 38, 105, 70;
-  --brand-secondary-rgb: 126, 170, 112;
-  --brand-highlight-rgb: 189, 140, 89;
-  --brand-positive-rgb: 113, 196, 139;
-  /* Semantic theme tokens consumed by the UI. */
-  --background: #f3efe5;
-  --foreground: #18241d;
-  --muted-foreground: #5a665c;
-  --border: rgba(24, 36, 29, 0.12);
-  --panel: rgba(255, 255, 255, 0.82);
-  --panel-strong: #ffffff;
-  --accent: var(--brand-primary);
-  --accent-soft: rgba(var(--brand-primary-rgb), 0.12);
-  --danger: #b43f3f;
-  --ink-soft: #eef1e8;
-  --ring: rgba(var(--brand-primary-rgb), 0.28);
-  --surface-glow-cool: rgba(var(--brand-secondary-rgb), 0.18);
-  --surface-glow-warm: rgba(var(--brand-highlight-rgb), 0.12);
-  --accent-glow-strong: rgba(var(--brand-primary-rgb), 0.18);
-  --accent-glow-mid: rgba(var(--brand-primary-rgb), 0.14);
-  --accent-glow-soft: rgba(var(--brand-primary-rgb), 0.08);
-  --positive-glow-strong: rgba(var(--brand-positive-rgb), 0.5);
-  --positive-glow-soft: rgba(var(--brand-positive-rgb), 0.14);
-  --positive-glow-subtle: rgba(var(--brand-positive-rgb), 0.15);
-
-  /* Compatibility aliases so both starters expose the same token surface. */
-  --bg: var(--background);
-  --text: var(--foreground);
-  --muted: var(--muted-foreground);
-  --line: var(--border);
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  margin: 0;
-  padding: 0;
-  background:
-    radial-gradient(circle at 15% 10%, var(--surface-glow-cool), transparent 22%),
-    radial-gradient(circle at 85% 12%, var(--surface-glow-warm), transparent 18%),
-    linear-gradient(180deg, #faf8f1 0%, var(--bg) 48%, #e8e0cf 100%);
-  color: var(--text);
-  font-family: var(--font-sans), sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-button,
-input {
-  font: inherit;
-}
-
-.shell {
-  min-height: 100vh;
-  padding: 32px 20px 56px;
-}
-
-.frame {
-  margin: 0 auto;
-  max-width: 1120px;
-}
-
-.starter-home .frame {
-  position: relative;
-}
-
-.hero {
-  display: grid;
-  gap: 16px;
-  margin-bottom: 28px;
-}
-
-.starter-hero {
-  display: grid;
-  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
-  gap: 20px;
-  align-items: stretch;
-  margin-bottom: 28px;
-}
-
-.starter-hero-copy {
-  position: relative;
-  display: grid;
-  gap: 16px;
-  padding: 30px 0 8px;
-}
-
-.starter-hero-copy::before {
-  content: "";
-  position: absolute;
-  inset: 0 0 auto 0;
-  height: 1px;
-  background: linear-gradient(90deg, rgba(24, 36, 29, 0.35), transparent);
-}
-
-.starter-hero-card {
-  position: relative;
-  overflow: hidden;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(247, 244, 235, 0.84)),
-    radial-gradient(circle at top right, var(--accent-glow-strong), transparent 45%);
-}
-
-.starter-hero-card::after {
-  content: "";
-  position: absolute;
-  inset: auto -36px -36px auto;
-  width: 150px;
-  height: 150px;
-  border-radius: 999px;
-  background: var(--accent-glow-soft);
-}
-
-.starter-stat-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 16px;
-  margin-top: 18px;
-}
-
-.stat-number {
-  display: block;
-  font-family: var(--font-display), serif;
-  font-size: clamp(2rem, 4vw, 3rem);
-  line-height: 1;
-  letter-spacing: -0.04em;
-}
-
-.starter-hero-note {
-  margin-top: 24px;
-  padding-top: 16px;
-  border-top: 1px solid var(--line);
-}
-
-.eyebrow {
-  display: inline-flex;
-  width: fit-content;
-  padding: 6px 10px;
-  border-radius: 999px;
-  background: var(--accent-soft);
-  color: var(--accent);
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.title {
-  margin: 0;
-  font-family: var(--font-display), serif;
-  font-size: clamp(2.4rem, 5.5vw, 4.8rem);
-  line-height: 0.92;
-  letter-spacing: -0.04em;
-}
-
-.lead {
-  max-width: 760px;
-  margin: 0;
-  color: var(--muted);
-  font-size: 18px;
-  line-height: 1.6;
-}
-
-.grid {
-  display: grid;
-  gap: 18px;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-}
-
-.starter-signal-grid {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.panel {
-  border: 1px solid var(--line);
-  border-radius: 24px;
-  background: var(--panel);
-  backdrop-filter: blur(10px);
-  box-shadow: 0 18px 50px rgba(23, 34, 22, 0.08);
-}
-
-.panel-inner {
-  padding: 22px;
-}
-
-.preview-glass-card {
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(246, 244, 236, 0.76)),
-    radial-gradient(circle at top right, var(--accent-glow-soft), transparent 45%);
-}
-
-.panel h2,
-.panel h3,
-.panel p {
-  margin-top: 0;
-}
-
-.panel p:last-child {
-  margin-bottom: 0;
-}
-
-.muted {
-  color: var(--muted);
-}
-
-.list {
-  display: grid;
-  gap: 10px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.list li {
-  padding: 12px 14px;
-  border-radius: 16px;
-  background: rgba(255, 255, 255, 0.78);
-  border: 1px solid rgba(23, 34, 22, 0.08);
-}
-
-.actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  margin-top: 10px;
-}
-
-.action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 12px 16px;
-  border-radius: 14px;
-  background: var(--text);
-  color: white;
-  font-weight: 600;
-}
-
-.action.secondary {
-  background: white;
-  color: var(--text);
-  border: 1px solid var(--line);
-}
-
-.inline-link {
-  display: inline-flex;
-  margin-top: 12px;
-  color: var(--accent);
-  font-weight: 700;
-}
-
-.package-name {
-  margin-top: 12px;
-  color: var(--muted);
-  font-size: 13px;
-  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
-}
-
-.check-row {
-  display: flex;
-  gap: 12px;
-  align-items: flex-start;
-}
-
-.check-dot {
-  width: 12px;
-  height: 12px;
-  margin-top: 5px;
-  border-radius: 999px;
-  flex: 0 0 auto;
-}
-
-.check-dot.done {
-  background: var(--accent);
-}
-
-.check-dot.pending {
-  background: #c99925;
-}
-
-.inline-detail {
-  margin-top: 6px;
-  margin-bottom: 0;
-}
-
-.playground-layout {
-  display: grid;
-  gap: 18px;
-  grid-template-columns: 280px 1fr;
-  align-items: start;
-}
-
-.shell-preview-page {
-  padding-top: 22px;
-}
-
-.app-preview-shell {
-  display: grid;
-  grid-template-columns: 320px minmax(0, 1fr);
-  gap: 20px;
-  align-items: start;
-}
-
-.app-preview-sidebar {
-  position: sticky;
-  top: 24px;
-  min-height: calc(100vh - 72px);
-  border: 1px solid var(--line);
-  border-radius: 28px;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(241, 237, 226, 0.84)),
-    radial-gradient(circle at top, var(--accent-soft), transparent 34%);
-  backdrop-filter: blur(16px);
-  box-shadow: 0 22px 60px rgba(24, 36, 29, 0.1);
-}
-
-.app-preview-main {
-  display: grid;
-  gap: 18px;
-}
-
-.app-preview-header {
-  display: flex;
-  justify-content: space-between;
-  gap: 20px;
-  align-items: flex-start;
-  padding: 24px 26px;
-  border: 1px solid var(--line);
-  border-radius: 28px;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(246, 243, 235, 0.86)),
-    radial-gradient(circle at right top, var(--accent-glow-mid), transparent 35%);
-  backdrop-filter: blur(16px);
-}
-
-.app-preview-header-copy h1 {
-  margin-bottom: 8px;
-  font-family: Georgia, "Times New Roman", serif;
-  font-size: clamp(2rem, 4vw, 3rem);
-  line-height: 0.96;
-  letter-spacing: -0.04em;
-}
-
-.app-preview-header-actions {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.app-preview-mobile-nav {
-  display: none;
-}
-
-.app-preview-content {
-  display: grid;
-}
-
-.app-preview-stage {
-  display: grid;
-  gap: 18px;
-}
-
-.preview-card-icon {
-  display: inline-flex;
-  margin-bottom: 16px;
-  width: 38px;
-  height: 38px;
-  align-items: center;
-  justify-content: center;
-  border-radius: 14px;
-  background: var(--ink-soft);
-  color: var(--accent);
-}
-
-.preview-stage-panel {
-  background:
-    linear-gradient(180deg, rgba(23, 37, 29, 0.96), rgba(18, 30, 24, 0.95)),
-    radial-gradient(circle at top left, var(--positive-glow-subtle), transparent 34%);
-  color: #f4f1e8;
-  border-color: rgba(255, 255, 255, 0.1);
-}
-
-.preview-stage-panel .muted {
-  color: rgba(244, 241, 232, 0.72);
-}
-
-.preview-stage-head {
-  display: flex;
-  justify-content: space-between;
-  gap: 16px;
-  align-items: flex-start;
-  margin-bottom: 24px;
-}
-
-.preview-stage-head h2 {
-  margin-bottom: 0;
-  font-size: 1.75rem;
-}
-
-.nav-chip {
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.04);
-  color: #f4f1e8;
-  border-radius: 999px;
-  padding: 10px 14px;
-  font-size: 12px;
-  font-weight: 700;
-  transition: 160ms ease;
-}
-
-.nav-chip.active,
-.nav-chip:hover {
-  border-color: var(--positive-glow-strong);
-  background: var(--positive-glow-soft);
-}
-
-.preview-surface-grid {
-  display: grid;
-  gap: 14px;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.preview-surface-card {
-  display: grid;
-  gap: 6px;
-  padding: 16px;
-  border-radius: 20px;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.preview-label {
-  margin: 0;
-  color: rgba(244, 241, 232, 0.62);
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.sidebar {
-  position: sticky;
-  top: 20px;
-}
-
-.nav-list {
-  display: grid;
-  gap: 8px;
-}
-
-.nav-item {
-  display: block;
-  padding: 12px 14px;
-  border-radius: 14px;
-  border: 1px solid transparent;
-  color: var(--muted);
-}
-
-.nav-item.active,
-.nav-item:hover {
-  background: white;
-  border-color: var(--line);
-  color: var(--text);
-}
-
-.stack {
-  display: grid;
-  gap: 18px;
-}
-
-.form-grid {
-  display: grid;
-  gap: 14px;
-}
-
-.field {
-  display: grid;
-  gap: 8px;
-}
-
-.field label {
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.field input {
-  width: 100%;
-  padding: 13px 14px;
-  border-radius: 14px;
-  border: 1px solid var(--line);
-  background: white;
-}
-
-.result-box,
-.code-box {
-  padding: 16px;
-  border-radius: 16px;
-  background: #fff;
-  border: 1px solid var(--line);
-  overflow: auto;
-}
-
-.status {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-radius: 999px;
-  font-size: 13px;
-  font-weight: 700;
-}
-
-.status.ok {
-  background: rgba(var(--brand-primary-rgb), 0.14);
-  color: var(--accent);
-}
-
-.status.warn {
-  background: rgba(180, 127, 34, 0.14);
-  color: #8d5f00;
-}
-
-.status.error {
-  background: rgba(180, 63, 63, 0.12);
-  color: var(--danger);
-}
-
-@media (max-width: 900px) {
-  .starter-hero,
-  .starter-signal-grid,
-  .app-preview-shell,
-  .preview-surface-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .playground-layout {
-    grid-template-columns: 1fr;
-  }
-
-  .sidebar {
-    position: static;
-  }
-
-  .app-preview-sidebar {
-    display: none;
-  }
-
-  .app-preview-mobile-nav {
-    display: block;
-  }
-
-  .app-preview-header,
-  .preview-stage-head {
-    grid-template-columns: 1fr;
-    display: grid;
-  }
-}
+/* BRIGHTWEB_SOURCES_START */
+@source "../node_modules/@brightweblabs/ui/src";
+@source "../node_modules/@brightweblabs/app-shell/src";
+/* BRIGHTWEB_SOURCES_END */

package/template/base/app/theme.css

@@ -0,0 +1,5 @@
+/* App-owned theme overrides belong here so managed source scanning and shared
+   starter styles in globals.css can be upgraded safely. */
+:root {
+  /* Example: --brand-accent: your-client-color; */
+}

package/template/base/config/modules.ts

@@ -6,7 +6,7 @@ export type StarterModuleConfig = {
   description: string;
   enabled: boolean;
   packageName: string;
-  playgroundHref?: string;
+  routeHref?: string;
   placement: "core" | "primary" | "admin";
 };
 
@@ -17,7 +17,6 @@ export const starterModuleConfig: StarterModuleConfig[] = [
     description: "Login, reset-password, callback URLs, and shared auth validation utilities.",
     enabled: true,
     packageName: "@brightweblabs/core-auth",
-    playgroundHref: "/playground/auth",
     placement: "core",
   },
   {
@@ -26,7 +25,7 @@ export const starterModuleConfig: StarterModuleConfig[] = [
     description: "Contacts and CRM server/data layer, with marketing-adjacent operational data stored in Supabase.",
     enabled: true,
     packageName: "@brightweblabs/module-crm",
-    playgroundHref: "/crm",
+    routeHref: "/crm",
     placement: "primary",
   },
   {
@@ -35,7 +34,6 @@ export const starterModuleConfig: StarterModuleConfig[] = [
     description: "Project portfolio, detail routes, and work-management server logic.",
     enabled: true,
     packageName: "@brightweblabs/module-projects",
-    playgroundHref: "/playground/projects",
     placement: "primary",
   },
   {
@@ -44,7 +42,7 @@ export const starterModuleConfig: StarterModuleConfig[] = [
     description: "User role governance, admin tools, and access-control surfaces.",
     enabled: true,
     packageName: "@brightweblabs/module-admin",
-    playgroundHref: "/playground/admin",
+    routeHref: "/admin/users",
     placement: "admin",
   },
 ];

package/template/base/docs/ai/README.md

@@ -1,52 +1,26 @@
 # Agent Guide
 
-This file is the local routing guide for AI agents working inside a generated BrightWeb platform app.
-
-It is intentionally app-scoped. It explains the generated project you are in, not the maintainer-only BrightWeb monorepo internals.
+This generated project follows BrightWeb's thin-app contract: environment values, settings, theme overrides, shell wiring, assets, migrations, docs, and direct package mounts only.
 
 ## Project shape
 
-This app is a normal Next.js App Router project with BrightWeb runtime wiring layered on top.
-
-- `app/`: route tree, layouts, pages, starter previews, and playground routes.
-- `components/`: local React components used by starter routes and app-owned product work.
-- `config/`: generated app configuration for brand, env readiness, enabled modules, bootstrap content, and shell registration.
-- `public/brand/`: starter logos used by the shell lockups.
-- `.env.local`: local service configuration for Supabase, Resend, and runtime URLs.
-
-## Fast routing map
-
-- `docs/ai/app-context.json`: machine-readable summary of this app's template, starter routes, and first-read files.
-- `docs/ai/examples.md`: common setup and customization workflows.
-- `README.md`: first-run setup steps.
-- `components/`: local app component layer for starter surfaces and future product UI.
-- `config/brand.ts`: client identity, product naming, and contact inboxes.
-- `config/modules.ts`: module metadata and enablement flags for CRM, Projects, and Admin.
-- `config/client.ts`: aggregated state consumed by starter pages.
-- `config/bootstrap.ts`: bootstrap checklist content for `/bootstrap`.
-- `config/shell.ts`: managed app-shell registration and navigation wiring.
-- `config/shell.overrides.ts`: app-owned shell registration customizations preserved across updates.
-- `app/globals.css`: color tokens (raw brand + semantic mappings), typography, and global surface styling.
-- `app/page.tsx`: starter landing page for the generated app.
-- `app/bootstrap/page.tsx`: setup checklist surface.
-- `app/preview/app-shell/page.tsx`: shell preview validation route.
-- `app/playground/auth/page.tsx`: auth validation route.
-- `app/playground/*`: optional module playgrounds when those modules were selected at scaffold time.
+- `app/`: root layout plus direct package mounts.
+- `config/`: brand, module, and shell settings.
+- `public/brand/`: shell brand assets.
+- `supabase/`: selected module migrations.
+- `.env.local`: local service configuration.
 
 ## Editing strategy
 
-- Change client identity first in `config/brand.ts`.
-- Change colors and theme tokens in `app/globals.css`.
-- Check module presence in `config/modules.ts` before editing or creating module-specific routes.
-- Add app-specific UI in `components/` before forking shared package code.
-- Use `config/shell.overrides.ts` when navigation or toolbar behavior needs to change.
-- Use `config/bootstrap.ts` and `config/client.ts` when the setup checklist or readiness messaging is wrong.
-- Keep starter validation routes until the real product routes replace their purpose.
+- Change identity in `config/brand.ts` and visual tokens in `app/theme.css`.
+- Use `config/shell.overrides.ts` for app-specific navigation or toolbar changes.
+- Keep route files declarative: direct package re-exports, or one import plus one component return when Next.js requires a no-props page wrapper.
+- Move any new UI, data access, state, or helpers to the owning package before mounting it.
+- Projects intentionally contributes no route until its package ships a mountable UI surface.
 
 ## Validation checklist
 
-1. Confirm `.env.local` is populated with real values.
-2. Run the app locally.
-3. Validate `/`, `/bootstrap`, `/preview/app-shell`, and `/playground/auth`.
-4. Validate the playground route for each enabled optional module.
-5. If a starter route is removed, also remove any links or config references that still point to it.
+1. Confirm `.env.local` is populated.
+2. Run the app build or type check.
+3. Validate each route listed in `docs/ai/app-context.json`.
+4. Confirm new route files contain no JSX, function bodies, fetches, or state.