create-bw-app 0.12.0 → 0.13.0

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

@@ -1,42 +1,21 @@
 # Agent Examples
 
-Use these workflows after reading `AGENTS.md`, `docs/ai/README.md`, and `docs/ai/app-context.json`.
-
 ## First local setup
 
-Goal: get the generated starter running with real credentials.
-
-- Review `.env.local` and replace placeholder values.
-- Review `config/brand.ts` and confirm client identity.
-- Review `app/globals.css` and confirm brand tokens map to the intended visual system.
-- Review `config/modules.ts` before touching module routes.
-- Run the local dev server for this app or workspace.
-- Validate `/`, `/bootstrap`, `/preview/app-shell`, and `/playground/auth`.
-- Validate `/crm`, `/playground/projects`, and `/playground/admin` only when those modules are enabled.
-
-## Change brand identity
-
-Goal: update the starter to the real client name and support details.
-
-- Edit `config/brand.ts`.
-- Edit `app/globals.css` when palette or theme token mapping needs to change.
-- Move route-specific presentation into `components/` when the home or preview surfaces need app-owned UI.
-- Check `config/client.ts` or `config/bootstrap.ts` if starter copy still references old defaults.
-- Validate the home page and `/preview/app-shell` after the change.
-
-## Replace starter routes with product routes
-
-Goal: move from validation surfaces to product-owned pages.
+- Fill `.env.local`.
+- Review `config/brand.ts`, `config/modules.ts`, and `app/theme.css`.
+- Run the app build.
+- Validate the package routes listed in `docs/ai/app-context.json`.
 
-- Build the real routes in `app/` first.
-- Keep reusable route UI in `components/` so the app follows the expected Next.js folder split.
-- Update `config/shell.overrides.ts` if navigation or toolbar behavior changes.
-- Remove `/bootstrap`, `/preview/app-shell`, or `/playground/*` only after links and config references are cleaned up.
+## Add a product surface
 
-## Make a module-aware change
+- Implement and export the surface from its `@brightweblabs/*` package.
+- Add any package contract entry and tests there.
+- Add a route file containing only a direct package re-export.
+- Register the route in module and shell settings.
 
-Goal: add or modify functionality without assuming a module exists.
+## Customize the shell
 
-- Check `config/modules.ts` first.
-- If the module is enabled, edit the app-owned route or API surface before considering package forks.
-- If the module is not enabled, do not create links or routes that assume it exists.
+- Keep package registrations intact.
+- Put app-specific href or visibility changes in `config/shell.overrides.ts`.
+- Rebuild and verify the affected mounted route.

package/template/base/public/brand/logo-dark.svg

@@ -2,6 +2,6 @@
   <rect width="44" height="44" rx="12" fill="#F5F4EC"/>
   <path d="M12 32V12H22.2C26.18 12 28.52 13.94 28.52 17.06C28.52 19.04 27.56 20.48 25.86 21.22C28.08 21.88 29.4 23.54 29.4 25.94C29.4 29.7 26.68 32 22.22 32H12ZM16.42 20.04H21.48C23.1 20.04 24.02 19.24 24.02 17.86C24.02 16.46 23.1 15.68 21.48 15.68H16.42V20.04ZM16.42 28.28H21.96C23.82 28.28 24.86 27.42 24.86 25.86C24.86 24.32 23.82 23.46 21.96 23.46H16.42V28.28Z" fill="#102015"/>
   <path d="M30.2 12H34.58L36.72 23.86L39.32 12H43.1L39 32H34.88L32.38 19.64L29.9 32H25.82L25.1 28.56H29.1L30.2 12Z" fill="#2C8A53"/>
-  <text x="58" y="19" fill="#F5F4EC" font-family="Georgia, serif" font-size="11" letter-spacing="2">BRIGHTWEB</text>
-  <text x="58" y="33" fill="#C8D0C9" font-family="'IBM Plex Sans', sans-serif" font-size="15">starter client</text>
+  <text x="58" y="19" fill="#F5F4EC" font-family="'Segoe UI', Arial, sans-serif" font-size="11" letter-spacing="2">BRIGHTWEB</text>
+  <text x="58" y="33" fill="#C8D0C9" font-family="'Segoe UI', Arial, sans-serif" font-size="15">starter client</text>
 </svg>

package/template/base/public/brand/logo-light.svg

@@ -2,6 +2,6 @@
   <rect width="44" height="44" rx="12" fill="#13251A"/>
   <path d="M12 32V12H22.2C26.18 12 28.52 13.94 28.52 17.06C28.52 19.04 27.56 20.48 25.86 21.22C28.08 21.88 29.4 23.54 29.4 25.94C29.4 29.7 26.68 32 22.22 32H12ZM16.42 20.04H21.48C23.1 20.04 24.02 19.24 24.02 17.86C24.02 16.46 23.1 15.68 21.48 15.68H16.42V20.04ZM16.42 28.28H21.96C23.82 28.28 24.86 27.42 24.86 25.86C24.86 24.32 23.82 23.46 21.96 23.46H16.42V28.28Z" fill="#F5F4EC"/>
   <path d="M30.2 12H34.58L36.72 23.86L39.32 12H43.1L39 32H34.88L32.38 19.64L29.9 32H25.82L25.1 28.56H29.1L30.2 12Z" fill="#71C48B"/>
-  <text x="58" y="19" fill="#13251A" font-family="Georgia, serif" font-size="11" letter-spacing="2">BRIGHTWEB</text>
-  <text x="58" y="33" fill="#516252" font-family="'IBM Plex Sans', sans-serif" font-size="15">starter client</text>
+  <text x="58" y="19" fill="#13251A" font-family="'Segoe UI', Arial, sans-serif" font-size="11" letter-spacing="2">BRIGHTWEB</text>
+  <text x="58" y="33" fill="#516252" font-family="'Segoe UI', Arial, sans-serif" font-size="15">starter client</text>
 </svg>

package/template/modules/admin/app/admin/users/page.tsx

@@ -0,0 +1,2 @@
+export const dynamic = "force-dynamic";
+export { AdminUsersPage as default } from "@brightweblabs/module-admin";

package/template/modules/admin/app/api/admin/users/roles/route.ts

@@ -1,6 +1 @@
-export const dynamic = "force-dynamic";
-
-export async function POST(request: Request) {
-  const { handleAdminUsersRoleChangeRequest } = await import("@brightweblabs/module-admin");
-  return handleAdminUsersRoleChangeRequest(request);
-}
+export { handleAdminUsersRoleChangeRequest as POST } from "@brightweblabs/module-admin";

package/template/modules/admin/app/api/admin/users/route.ts

@@ -1,6 +1 @@
-export const dynamic = "force-dynamic";
-
-export async function GET(request: Request) {
-  const { handleAdminUsersGetRequest } = await import("@brightweblabs/module-admin");
-  return handleAdminUsersGetRequest(request);
-}
+export { handleAdminUsersGetRequest as GET } from "@brightweblabs/module-admin";

package/template/modules/crm/app/api/crm/contacts/route.ts

@@ -1,18 +1,3 @@
-import { createModuleRouteHandler } from "../_shared/create-module-route-handler";
-
-export const dynamic = "force-dynamic";
-
-export const GET = createModuleRouteHandler(
-  () => import("@brightweblabs/module-crm"),
-  "handleCrmContactsGetRequest",
-);
-
-export const POST = createModuleRouteHandler(
-  () => import("@brightweblabs/module-crm"),
-  "handleCrmContactsPostRequest",
-);
-
-export const PATCH = createModuleRouteHandler(
-  () => import("@brightweblabs/module-crm"),
-  "handleCrmContactsPatchRequest",
-);
+export { handleCrmContactsGetRequest as GET } from "@brightweblabs/module-crm";
+export { handleCrmContactsPatchRequest as PATCH } from "@brightweblabs/module-crm";
+export { handleCrmContactsPostRequest as POST } from "@brightweblabs/module-crm";

package/template/modules/crm/app/api/crm/organizations/route.ts

@@ -1,8 +1 @@
-import { createModuleRouteHandler } from "../_shared/create-module-route-handler";
-
-export const dynamic = "force-dynamic";
-
-export const GET = createModuleRouteHandler(
-  () => import("@brightweblabs/module-crm"),
-  "handleCrmOrganizationsGetRequest",
-);
+export { handleCrmOrganizationsGetRequest as GET } from "@brightweblabs/module-crm";

package/template/modules/crm/app/api/crm/owners/route.ts

@@ -1,8 +1 @@
-import { createModuleRouteHandler } from "../_shared/create-module-route-handler";
-
-export const dynamic = "force-dynamic";
-
-export const GET = createModuleRouteHandler(
-  () => import("@brightweblabs/module-crm"),
-  "handleCrmOwnersGetRequest",
-);
+export { handleCrmOwnersGetRequest as GET } from "@brightweblabs/module-crm";

package/template/modules/crm/app/api/crm/stats/route.ts

@@ -1,8 +1 @@
-import { createModuleRouteHandler } from "../_shared/create-module-route-handler";
-
-export const dynamic = "force-dynamic";
-
-export const GET = createModuleRouteHandler(
-  () => import("@brightweblabs/module-crm"),
-  "handleCrmStatsGetRequest",
-);
+export { handleCrmStatsGetRequest as GET } from "@brightweblabs/module-crm";

package/template/modules/crm/app/api/crm/timeline/route.ts

@@ -1,8 +1 @@
-import { createModuleRouteHandler } from "../_shared/create-module-route-handler";
-
-export const dynamic = "force-dynamic";
-
-export const GET = createModuleRouteHandler(
-  () => import("@brightweblabs/module-crm"),
-  "handleCrmTimelineGetRequest",
-);
+export { handleCrmTimelineGetRequest as GET } from "@brightweblabs/module-crm";

package/template/site/base/AGENTS.md

@@ -1,25 +1,12 @@
 # AGENTS.md
 
-This generated project is a BrightWeb site starter. Use this file as the local entrypoint for AI agents working inside the app.
-
-## Start here
-
-- `README.md`: local setup commands and the starter surface list.
-- `docs/ai/README.md`: app-specific routing guide for agents.
-- `docs/ai/examples.md`: common setup and customization flows.
-- `docs/ai/app-context.json`: machine-readable app summary for quick discovery.
-- `config/site.ts`: site name, description, and starter CTAs.
-- `app/page.tsx`: starter landing page composition.
-- `app/globals.css`: global design language and theme tokens.
+This is a thin BrightWeb site shell. It intentionally ships no feature page or local component library.
 
 ## Working rules
 
-- Treat this starter as app-owned. Prefer editing local routes, sections, and UI primitives instead of introducing shared BrightWeb runtime dependencies.
-- Update `config/site.ts` before rewriting copy inline across multiple components.
-- Keep reusable UI tweaks inside `components/ui/` when the change should affect multiple sections.
-
-## First validation pass
+- Keep site identity in `config/site.ts` and theme values in `app/globals.css`.
+- Add routes only as direct mounts of package-owned surfaces.
+- Do not add demos, feature components, hooks, data access, or helper libraries to the scaffold layer.
+- Build reusable site UI in a package, then mount its export here.
 
-1. Run the local dev server from this project or workspace.
-2. Open `/` and confirm the starter content renders correctly.
-3. Check `config/site.ts`, `app/page.tsx`, and `app/globals.css` together before making large copy or layout changes.
+Run the build after changing settings, theme files, or package mounts.

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

@@ -1,37 +1,10 @@
 # Agent Guide
 
-This file is the local routing guide for AI agents working inside a generated BrightWeb site app.
+This generated site contains settings, theme files, root layout wiring, and docs only. It has no default feature surface.
 
-It is intentionally app-scoped. It explains the generated project you are in, not the maintainer-only BrightWeb monorepo internals.
+- `config/site.ts`: site identity settings.
+- `app/globals.css`: site theme tokens and global styling.
+- `app/layout.tsx`: root document wiring.
+- `docs/ai/app-context.json`: machine-readable ownership summary.
 
-## Project shape
-
-This app is a normal Next.js App Router project with a local UI layer and light configuration.
-
-- `app/`: route tree, layouts, and the starter landing page.
-- `components/ui/`: local UI primitives used by the starter surface.
-- `config/site.ts`: generated site identity, description, and CTA defaults.
-- `lib/`: helper utilities such as class merging.
-
-## 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.
-- `config/site.ts`: site name, description, eyebrow, and starter CTA links.
-- `app/page.tsx`: starter composition for the home page.
-- `app/globals.css`: theme tokens, layout defaults, and base typography.
-- `components/ui/*`: local component primitives used by the starter.
-
-## Editing strategy
-
-- Change `config/site.ts` first when the task is mostly copy or link updates.
-- Change `app/page.tsx` first when the task is about page structure or section flow.
-- Change `app/globals.css` and `components/ui/*` when the task affects the visual system.
-- Keep changes local to this app unless the task explicitly requires a shared BrightWeb package.
-
-## Validation checklist
-
-1. Run the app locally.
-2. Validate `/` on desktop and mobile sizes.
-3. If you changed the visual system, check both `app/globals.css` and the affected `components/ui/*` files.
+Create UI in a reusable package and add only a direct package re-export under `app/`.

package/template/site/base/docs/ai/examples.md

@@ -1,35 +1,13 @@
 # Agent Examples
 
-Use these workflows after reading `AGENTS.md`, `docs/ai/README.md`, and `docs/ai/app-context.json`.
-
-## First local setup
-
-Goal: get the generated site starter running and ready for edits.
-
-- Run the local dev server for this app or workspace.
-- Open `/` and confirm the starter renders correctly.
-- Review `config/site.ts`, `app/page.tsx`, and `app/globals.css` before making large changes.
-
 ## Change site identity
 
-Goal: update the starter name, description, and CTA links.
-
 - Edit `config/site.ts`.
-- Validate `/` after the change.
-- If copy still exists outside the config file, update `app/page.tsx`.
-
-## Restyle the starter
-
-Goal: change the visual language without rewriting everything at once.
-
-- Start in `app/globals.css` for colors, spacing, and typography direction.
-- Update `components/ui/*` if shared primitives need to change.
-- Validate `/` on both desktop and mobile sizes.
-
-## Replace the starter sections
+- Adjust theme tokens in `app/globals.css` if needed.
+- Run the build.
 
-Goal: turn the scaffold into a real site.
+## Mount a site surface
 
-- Edit `app/page.tsx` section by section.
-- Keep shared button, badge, and card behavior in `components/ui/*`.
-- Remove starter content only after the replacement section is in place.
+- Export the complete surface from a package.
+- Add `app/page.tsx` as a direct package re-export.
+- Keep feature code and reusable components out of the app scaffold.

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

@@ -1,75 +0,0 @@
-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/page.tsx

@@ -1,145 +0,0 @@
-import Link from "next/link";
-import { getStarterClientConfig } from "../config/client";
-
-export default function HomePage() {
-  const config = getStarterClientConfig();
-
-  return (
-    <main className="shell starter-home">
-      <div className="frame">
-        <section className="starter-hero">
-          <div className="starter-hero-copy">
-            <span className="eyebrow">{config.brand.companyName}</span>
-            <h1 className="title">{config.brand.productName}</h1>
-            <p className="lead">{config.brand.tagline}</p>
-            <div className="actions">
-              <Link href="/preview/app-shell" className="action">Preview App Shell</Link>
-              <Link href="/bootstrap" className="action secondary">Open Bootstrap Checklist</Link>
-              <Link href="/playground/auth" className="action secondary">Open Module Playgrounds</Link>
-            </div>
-          </div>
-
-          <div className="starter-hero-card panel">
-            <div className="panel-inner">
-              <p className={`status ${config.envReadiness.allReady ? "ok" : "warn"}`}>
-                {config.envReadiness.allReady ? "Starter ready" : "Setup in progress"}
-              </p>
-              <div className="starter-stat-grid">
-                <div>
-                  <span className="stat-number">{config.enabledModules.length}</span>
-                  <p className="muted">enabled modules</p>
-                </div>
-                <div>
-                  <span className="stat-number">{config.envStatus.filter((item) => item.present).length}</span>
-                  <p className="muted">configured env keys</p>
-                </div>
-              </div>
-              <div className="starter-hero-note">
-                <strong>What this template gives you</strong>
-                <p className="muted">
-                  One place to brand, provision, preview, and validate a new client before the first deployment.
-                </p>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        <section className="grid starter-signal-grid">
-          <article className="panel preview-glass-card">
-            <div className="panel-inner">
-              <p className="eyebrow">Brand</p>
-              <h2>{config.brand.companyName}</h2>
-              <p className="muted">{config.brand.contactEmail} · {config.brand.supportEmail}</p>
-              <p className="package-name">{config.brand.slug}</p>
-            </div>
-          </article>
-
-          <article className="panel preview-glass-card">
-            <div className="panel-inner">
-              <p className="eyebrow">Infrastructure</p>
-              <h2>{config.envReadiness.allReady ? "Ready to validate" : "Needs provisioning"}</h2>
-              <p className="muted">
-                {config.envReadiness.allReady
-                  ? "Core env and service wiring are present."
-                  : `${config.envReadiness.missing.length} required environment key(s) are still missing.`}
-              </p>
-            </div>
-          </article>
-        </section>
-
-        <section className="panel" style={{ marginTop: 18 }}>
-          <div className="panel-inner">
-            <h2>Enabled platform modules</h2>
-            <div className="grid">
-              {config.enabledModules.map((moduleConfig) => (
-                <article key={moduleConfig.key} className="panel preview-glass-card" style={{ background: "rgba(255,255,255,0.72)" }}>
-                  <div className="panel-inner">
-                    <p className={`status ${moduleConfig.enabled ? "ok" : "warn"}`}>{moduleConfig.placement}</p>
-                    <h3>{moduleConfig.label}</h3>
-                    <p className="muted">{moduleConfig.description}</p>
-                    <p className="package-name">{moduleConfig.packageName}</p>
-                    {moduleConfig.playgroundHref ? (
-                      <Link href={moduleConfig.playgroundHref} className="inline-link">
-                        Open module playground
-                      </Link>
-                    ) : null}
-                  </div>
-                </article>
-              ))}
-            </div>
-          </div>
-        </section>
-
-        <section className="grid" style={{ marginTop: 18 }}>
-          <article className="panel preview-glass-card">
-            <div className="panel-inner">
-              <h2>App-shell surfaces</h2>
-              <ul className="list">
-                {config.shellPreview.primaryNav.map((item) => (
-                  <li key={item.href}>{item.label} · {item.href}</li>
-                ))}
-                {config.shellPreview.moduleGroups.map((group) => (
-                  <li key={group.key}>
-                    {group.label} · {group.children.length} item(s)
-                  </li>
-                ))}
-                {config.shellPreview.adminNavItem ? <li>{config.shellPreview.adminNavItem.label} · {config.shellPreview.adminNavItem.href}</li> : null}
-              </ul>
-            </div>
-          </article>
-
-          <article className="panel preview-glass-card">
-            <div className="panel-inner">
-              <h2>Starter controls</h2>
-              <ul className="list">
-                <li>`config/brand.ts` for client identity and contact details.</li>
-                <li>`app/globals.css` for color and theme token management.</li>
-                <li>`config/modules.ts` for enabled platform modules.</li>
-                <li>`config/env.ts` for infra requirements and readiness checks.</li>
-                <li>`.env.local` for per-client service credentials and local runtime overrides.</li>
-              </ul>
-            </div>
-          </article>
-        </section>
-
-        <section className="panel" style={{ marginTop: 18 }}>
-          <div className="panel-inner">
-            <h2>Infrastructure checklist</h2>
-            <div className="grid">
-              {config.envStatus.map((item) => (
-                <article key={item.key} className="panel preview-glass-card" style={{ background: "rgba(255,255,255,0.72)" }}>
-                  <div className="panel-inner">
-                    <p className={`status ${item.present ? "ok" : "warn"}`}>{item.present ? "Configured" : "Missing"}</p>
-                    <h3>{item.key}</h3>
-                    <p className="muted">{item.description}</p>
-                    <p className="package-name">{item.scope} · {item.requiredFor.join(", ")}</p>
-                  </div>
-                </article>
-                ))}
-              </div>
-          </div>
-        </section>
-      </div>
-    </main>
-  );
-}

package/template/base/app/playground/auth/page.tsx

@@ -1,5 +0,0 @@
-import { AuthPlayground } from "../../../components/auth-playground";
-
-export default function AuthPlaygroundPage() {
-  return <AuthPlayground />;
-}

package/template/base/app/playground/layout.tsx

@@ -1,41 +0,0 @@
-import type { ReactNode } from "react";
-import Link from "next/link";
-import { getEnabledStarterModules } from "../../config/modules";
-
-const links = getEnabledStarterModules()
-  .filter((moduleConfig) => moduleConfig.playgroundHref)
-  .map((moduleConfig) => ({
-    href: moduleConfig.playgroundHref!,
-    label: moduleConfig.label,
-  }));
-
-export default function PlaygroundLayout({ children }: { children: ReactNode }) {
-  return (
-    <main className="shell">
-      <div className="frame playground-layout">
-        <aside className="panel sidebar">
-          <div className="panel-inner stack">
-            <div>
-              <span className="eyebrow">Sandbox</span>
-              <h2 style={{ marginBottom: 8 }}>Module Playground</h2>
-              <p className="muted">
-                Use these routes to inspect package behavior while editing the shared repo.
-              </p>
-            </div>
-            <nav className="nav-list">
-              {links.map((link) => (
-                <Link key={link.href} href={link.href} className="nav-item">
-                  {link.label}
-                </Link>
-              ))}
-              <Link href="/" className="nav-item">
-                Back to overview
-              </Link>
-            </nav>
-          </div>
-        </aside>
-        <section className="stack">{children}</section>
-      </div>
-    </main>
-  );
-}

package/template/base/app/preview/app-shell/page.tsx

@@ -1,11 +0,0 @@
-import { AppShellPreview } from "../../../components/app-shell-preview";
-
-export default function AppShellPreviewPage() {
-  return (
-    <main className="shell shell-preview-page">
-      <div className="frame">
-        <AppShellPreview />
-      </div>
-    </main>
-  );
-}