create-bw-app 0.3.0

package/template/base/app/bootstrap/page.tsx

@@ -0,0 +1,75 @@
+import Link from "next/link";
+import { getStarterBootstrapChecklist } from "../../config/bootstrap";
+
+export default function BootstrapPage() {
+  const checklist = getStarterBootstrapChecklist();
+
+  return (
+    <main className="shell">
+      <div className="frame">
+        <section className="hero">
+          <span className="eyebrow">Client Bootstrap</span>
+          <h1 className="title">Launch checklist for {checklist.client.brand.companyName}</h1>
+          <p className="lead">
+            This page turns the starter config into an operational checklist for provisioning a new client instance.
+          </p>
+          <div className="actions">
+            <Link href="/" className="action">Back to overview</Link>
+            <Link href="/playground/auth" className="action secondary">Open playgrounds</Link>
+          </div>
+        </section>
+
+        <section className="panel">
+          <div className="panel-inner">
+            <h2>Client summary</h2>
+            <div className="grid">
+              <article className="panel" style={{ background: "rgba(255,255,255,0.72)" }}>
+                <div className="panel-inner">
+                  <p className="status ok">{checklist.client.brand.slug}</p>
+                  <h3>{checklist.client.brand.productName}</h3>
+                  <p className="muted">{checklist.client.brand.tagline}</p>
+                </div>
+              </article>
+              <article className="panel" style={{ background: "rgba(255,255,255,0.72)" }}>
+                <div className="panel-inner">
+                  <p className={`status ${checklist.client.envReadiness.allReady ? "ok" : "warn"}`}>
+                    {checklist.client.envReadiness.allReady ? "Ready" : "Blocked"}
+                  </p>
+                  <h3>Environment status</h3>
+                  <p className="muted">
+                    {checklist.client.envReadiness.allReady
+                      ? "All required environment keys are configured."
+                      : `${checklist.client.envReadiness.missing.length} required key(s) still missing.`}
+                  </p>
+                </div>
+              </article>
+            </div>
+          </div>
+        </section>
+
+        <section className="grid" style={{ marginTop: 18 }}>
+          {checklist.sections.map((section) => (
+            <article key={section.key} className="panel">
+              <div className="panel-inner">
+                <h2>{section.title}</h2>
+                <ul className="list">
+                  {section.items.map((item) => (
+                    <li key={item.label}>
+                      <div className="check-row">
+                        <span className={`check-dot ${item.done ? "done" : "pending"}`} aria-hidden="true" />
+                        <div>
+                          <strong>{item.label}</strong>
+                          {item.detail ? <p className="muted inline-detail">{item.detail}</p> : null}
+                        </div>
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </article>
+          ))}
+        </section>
+      </div>
+    </main>
+  );
+}

package/template/base/app/globals.css

@@ -0,0 +1,545 @@
+:root {
+  color-scheme: light;
+  --bg: #f3efe5;
+  --panel: rgba(255, 255, 255, 0.82);
+  --panel-strong: #ffffff;
+  --text: #18241d;
+  --muted: #5a665c;
+  --line: rgba(24, 36, 29, 0.12);
+  --accent: #266946;
+  --accent-soft: rgba(38, 105, 70, 0.12);
+  --danger: #b43f3f;
+  --ink-soft: #eef1e8;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  background:
+    radial-gradient(circle at 15% 10%, rgba(126, 170, 112, 0.18), transparent 22%),
+    radial-gradient(circle at 85% 12%, rgba(189, 140, 89, 0.12), transparent 18%),
+    linear-gradient(180deg, #faf8f1 0%, var(--bg) 48%, #e8e0cf 100%);
+  color: var(--text);
+  font-family: "IBM Plex Sans", "Segoe UI", 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, rgba(38, 105, 70, 0.18), transparent 45%);
+}
+
+.starter-hero-card::after {
+  content: "";
+  position: absolute;
+  inset: auto -36px -36px auto;
+  width: 150px;
+  height: 150px;
+  border-radius: 999px;
+  background: rgba(38, 105, 70, 0.08);
+}
+
+.starter-stat-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 18px;
+}
+
+.stat-number {
+  display: block;
+  font-family: Georgia, "Times New Roman", 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: Georgia, "Times New Roman", 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, rgba(38, 105, 70, 0.08), 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, rgba(38, 105, 70, 0.12), 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, rgba(38, 105, 70, 0.14), 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, rgba(113, 196, 139, 0.15), 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: rgba(113, 196, 139, 0.5);
+  background: rgba(113, 196, 139, 0.14);
+}
+
+.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(31, 122, 69, 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;
+  }
+}

package/template/base/app/layout.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import { starterBrandConfig } from "../config/brand";
+import "./globals.css";
+
+export const metadata = {
+  title: `${starterBrandConfig.companyName} Starter`,
+  description: starterBrandConfig.tagline,
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}