npm - @pylonsync/create-pylon - Versions diffs - 0.3.373 → 0.3.375 - Mend

@pylonsync/create-pylon 0.3.373 → 0.3.375

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (121) hide show

package/templates/ai-studio/app/layout.tsx CHANGED Viewed

@@ -1,24 +1,15 @@
 import React from "react";
-import { Link, type PageAuth } from "@pylonsync/react";
 import { siteConfig } from "@/lib/site.config";
-// App shell: a slim top bar over the studio. `auth.user_id` is resolved
-// server-side from the session cookie before any HTML is sent, so the bar shows
-// the account / "Sign in" with no flash. The header is h-14; the studio page
-// fills the rest of the viewport (min-h-[calc(100vh-3.5rem)]).
+// The root layout is only the document shell: <html>, <head>, <body>, and the
+// theme variables. The app shell (top bar) lives in the `(studio)` route-group
+// layout, so /login — outside the group — renders bare with its own chrome.
 interface LayoutProps {
   children: React.ReactNode;
-  url: string;
-  auth: PageAuth;
 }
-export default function RootLayout({ children, url, auth }: LayoutProps) {
-  const signedIn = Boolean(auth?.user_id);
-  const { brand, colors } = siteConfig;
-  // The auth screen brings its own chrome → render it bare.
-  const path = (url ?? "").split("?")[0];
-  const isBare = path === "/login" || path.startsWith("/login/");
+export default function RootLayout({ children }: LayoutProps) {
+  const { colors } = siteConfig;
   return (
     <html
@@ -40,31 +31,7 @@ export default function RootLayout({ children, url, auth }: LayoutProps) {
             no layout shift; change the family in app.ts. */}
       </head>
       <body className="bg-background text-foreground antialiased">
-        {isBare ? (
-          children
-        ) : (
-          <>
-            <header className="flex h-14 items-center justify-between border-b border-zinc-200 bg-white px-4">
-              <Link href="/" className="flex items-center gap-2">
-                <span className="flex size-6 items-center justify-center rounded-[7px] bg-brand text-[13px] font-bold text-white">
-                  {brand.letter}
-                </span>
-                <span className="text-[15px] font-semibold tracking-tight text-zinc-900">{brand.name}</span>
-              </Link>
-              {signedIn ? (
-                <span className="text-[13px] text-zinc-400">Signed in</span>
-              ) : (
-                <Link
-                  href="/login"
-                  className="rounded-full border border-zinc-300 px-3.5 py-1.5 text-[13px] font-medium text-zinc-700 transition-colors hover:bg-zinc-50"
-                >
-                  Sign in
-                </Link>
-              )}
-            </header>
-            {children}
-          </>
-        )}
+        {children}
       </body>
     </html>
   );

package/templates/ai-studio/app/login/page.tsx CHANGED Viewed

@@ -9,7 +9,8 @@ export const metadata: Metadata = {
 };
 // `app/login/page.tsx` → `/login`. Sign-in is required to use the studio
-// (generations are tied to your account). Rendered bare. Already signed in? Skip
+// (generations are tied to your account). It sits outside the `(studio)` route
+// group, so it renders bare — no app top bar. Already signed in? Skip
 // back to the studio — `response.redirect` in the synchronous shell render is a
 // real 307 before any HTML is sent.
 export default function LoginPage({ auth, response }: PageProps) {

package/templates/barebones/AGENTS.md CHANGED Viewed

@@ -6,7 +6,7 @@ Pylon serves the API, auth, sync, WebSocket, SSE, and native React 19 SSR from o
 **Unified SSR app:**
 - `app.ts`: data model + manifest (`entity()` + `field.*`, queries/actions/policies, `routes: await discoverAppRoutes()`). Ends with `console.log(JSON.stringify(manifest))`.
-- `app/`: file-based SSR routes. `app/page.tsx` → `/`, `app/about/page.tsx` → `/about`, `app/blog/[slug]/page.tsx` → `/blog/:slug`. `app/layout.tsx` is the shell; `app/error.tsx` / `app/not-found.tsx` are boundaries.
+- `app/`: file-based SSR routes. `app/page.tsx` → `/`, `app/about/page.tsx` → `/about`, `app/blog/[slug]/page.tsx` → `/blog/:slug`. A `(group)` directory is stripped from the URL — `app/(marketing)/about/page.tsx` still serves `/about` — so a group's `layout.tsx` gives one section its own chrome (nav, footer) without changing any path; routes outside the group render without it. `app/layout.tsx` is the document shell; `app/error.tsx` / `app/not-found.tsx` are boundaries.
 - `app/globals.css`: Tailwind v4 entrypoint (auto-compiled and injected).
 - `functions/`: server functions, one per file, `default`-exported.
 - `.pylon/`: local dev state (SQLite, jobs, sessions, uploads). Created by `pylon dev`. Do not commit.

package/templates/chat/AGENTS.md CHANGED Viewed

@@ -6,7 +6,7 @@ Pylon serves the API, auth, sync, WebSocket, SSE, and native React 19 SSR from o
 **Unified SSR app:**
 - `app.ts`: data model + manifest (`entity()` + `field.*`, queries/actions/policies, `routes: await discoverAppRoutes()`). Ends with `console.log(JSON.stringify(manifest))`.
-- `app/`: file-based SSR routes. `app/page.tsx` → `/`, `app/about/page.tsx` → `/about`, `app/blog/[slug]/page.tsx` → `/blog/:slug`. `app/layout.tsx` is the shell; `app/error.tsx` / `app/not-found.tsx` are boundaries.
+- `app/`: file-based SSR routes. `app/page.tsx` → `/`, `app/about/page.tsx` → `/about`, `app/blog/[slug]/page.tsx` → `/blog/:slug`. A `(group)` directory is stripped from the URL — `app/(marketing)/about/page.tsx` still serves `/about` — so a group's `layout.tsx` gives one section its own chrome (nav, footer) without changing any path; routes outside the group render without it. `app/layout.tsx` is the document shell; `app/error.tsx` / `app/not-found.tsx` are boundaries.
 - `app/globals.css`: Tailwind v4 entrypoint (auto-compiled and injected).
 - `functions/`: server functions, one per file, `default`-exported.
 - `.pylon/`: local dev state (SQLite, jobs, sessions, uploads). Created by `pylon dev`. Do not commit.

package/templates/consumer/AGENTS.md CHANGED Viewed

@@ -6,7 +6,7 @@ Pylon serves the API, auth, sync, WebSocket, SSE, and native React 19 SSR from o
 **Unified SSR app:**
 - `app.ts`: data model + manifest (`entity()` + `field.*`, queries/actions/policies, `routes: await discoverAppRoutes()`). Ends with `console.log(JSON.stringify(manifest))`.
-- `app/`: file-based SSR routes. `app/page.tsx` → `/`, `app/about/page.tsx` → `/about`, `app/blog/[slug]/page.tsx` → `/blog/:slug`. `app/layout.tsx` is the shell; `app/error.tsx` / `app/not-found.tsx` are boundaries.
+- `app/`: file-based SSR routes. `app/page.tsx` → `/`, `app/about/page.tsx` → `/about`, `app/blog/[slug]/page.tsx` → `/blog/:slug`. A `(group)` directory is stripped from the URL — `app/(marketing)/about/page.tsx` still serves `/about` — so a group's `layout.tsx` gives one section its own chrome (nav, footer) without changing any path; routes outside the group render without it. `app/layout.tsx` is the document shell; `app/error.tsx` / `app/not-found.tsx` are boundaries.
 - `app/globals.css`: Tailwind v4 entrypoint (auto-compiled and injected).
 - `functions/`: server functions, one per file, `default`-exported.
 - `.pylon/`: local dev state (SQLite, jobs, sessions, uploads). Created by `pylon dev`. Do not commit.

package/templates/creator/AGENTS.md CHANGED Viewed

@@ -6,7 +6,7 @@ Pylon serves the API, auth, sync, WebSocket, SSE, and native React 19 SSR from o
 **Unified SSR app:**
 - `app.ts`: data model + manifest (`entity()` + `field.*`, queries/actions/policies, `routes: await discoverAppRoutes()`). Ends with `console.log(JSON.stringify(manifest))`.
-- `app/`: file-based SSR routes. `app/page.tsx` → `/`, `app/about/page.tsx` → `/about`, `app/blog/[slug]/page.tsx` → `/blog/:slug`. `app/layout.tsx` is the shell; `app/error.tsx` / `app/not-found.tsx` are boundaries.
+- `app/`: file-based SSR routes. `app/page.tsx` → `/`, `app/about/page.tsx` → `/about`, `app/blog/[slug]/page.tsx` → `/blog/:slug`. A `(group)` directory is stripped from the URL — `app/(marketing)/about/page.tsx` still serves `/about` — so a group's `layout.tsx` gives one section its own chrome (nav, footer) without changing any path; routes outside the group render without it. `app/layout.tsx` is the document shell; `app/error.tsx` / `app/not-found.tsx` are boundaries.
 - `app/globals.css`: Tailwind v4 entrypoint (auto-compiled and injected).
 - `functions/`: server functions, one per file, `default`-exported.
 - `.pylon/`: local dev state (SQLite, jobs, sessions, uploads). Created by `pylon dev`. Do not commit.

package/templates/creator/app/(marketing)/layout.tsx ADDED Viewed

@@ -0,0 +1,122 @@
+import React from "react";
+import { Link, type PageAuth } from "@pylonsync/react";
+import { siteConfig } from "@/lib/site.config";
+// `(marketing)` is a ROUTE GROUP: the parens segment is stripped from every
+// URL (so `(marketing)/page.tsx` still serves `/`), and this layout wraps
+// only the pages inside the group — a slim nav up top and a footer below,
+// both driven by lib/site.config.ts. Routes outside the group (/login,
+// /dashboard) render bare in the root shell. `auth.user_id` is resolved
+// server-side from the session cookie before any HTML is sent, so the nav
+// shows "Dashboard" once the owner is signed in and "Sign in" otherwise —
+// no flash, no client fetch.
+interface LayoutProps {
+  children: React.ReactNode;
+  auth: PageAuth;
+}
+export default function MarketingLayout({ children, auth }: LayoutProps) {
+  // A guest session (minted by <EnsureGuest> for the live counter) has a
+  // `guest_…` user id — that's an anonymous visitor, NOT the signed-in owner,
+  // so it shouldn't flip the nav to "Dashboard".
+  const signedIn = Boolean(auth?.user_id && !auth.user_id.startsWith("guest_"));
+  const { brand } = siteConfig;
+  return (
+    <>
+      <header className="sticky top-0 z-30 bg-white/80 backdrop-blur">
+        <div className="mx-auto flex h-14 max-w-3xl items-center justify-between px-6">
+          <Link href="/" className="flex items-center gap-2">
+            <span className="flex size-6 items-center justify-center rounded-[7px] bg-zinc-900 text-[13px] font-bold text-white">
+              {brand.letter}
+            </span>
+            <span className="text-[15px] font-semibold tracking-tight text-zinc-900">
+              {brand.name}
+            </span>
+          </Link>
+          <nav className="flex items-center gap-2">
+            {signedIn ? (
+              <Link
+                href="/dashboard"
+                className="inline-flex items-center rounded-full bg-zinc-900 px-3.5 py-1.5 text-[13px] font-medium text-white transition-colors hover:bg-zinc-700"
+              >
+                Dashboard
+              </Link>
+            ) : (
+              <Link
+                href="/login"
+                className="rounded-full px-3 py-1.5 text-[13px] font-medium text-zinc-600 transition-colors hover:text-zinc-900"
+              >
+                Sign in
+              </Link>
+            )}
+          </nav>
+        </div>
+      </header>
+      <main className="flex-1">{children}</main>
+      <SiteFooter />
+    </>
+  );
+}
+function SiteFooter() {
+  const { brand } = siteConfig;
+  return (
+    <footer className="border-t border-zinc-200/70 bg-white">
+      <div className="mx-auto max-w-3xl px-6 py-12">
+        <div className="flex flex-col items-start justify-between gap-6 sm:flex-row">
+          <div className="max-w-sm">
+            <Link href="/" className="inline-flex items-center gap-2">
+              <span className="flex size-6 items-center justify-center rounded-[7px] bg-zinc-900 text-[13px] font-bold text-white">
+                {brand.letter}
+              </span>
+              <span className="text-[15px] font-semibold tracking-tight text-zinc-900">
+                {brand.name}
+              </span>
+            </Link>
+            <p className="mt-3 text-[13px] leading-relaxed text-zinc-500">
+              {brand.footerBlurb}
+            </p>
+          </div>
+          <div className="flex items-center gap-4">
+            {brand.socials.map((s) => (
+              <a
+                key={s.label}
+                href={s.href}
+                aria-label={s.label}
+                className="text-zinc-400 transition-colors hover:text-zinc-900"
+              >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                  <path d={s.path} />
+                </svg>
+              </a>
+            ))}
+            <a
+              href={`mailto:${brand.email}`}
+              aria-label="Email"
+              className="text-zinc-400 transition-colors hover:text-zinc-900"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <rect x="3" y="5" width="18" height="14" rx="2" />
+                <path d="m3 7 9 6 9-6" />
+              </svg>
+            </a>
+          </div>
+        </div>
+        <div className="mt-10 flex flex-col items-start justify-between gap-3 border-t border-zinc-200/70 pt-6 text-[12px] text-zinc-400 sm:flex-row sm:items-center">
+          <span>
+            © {new Date().getFullYear()} {brand.copyrightName}
+          </span>
+          <span>
+            Built with{" "}
+            <a href="https://pylonsync.com" className="font-medium text-zinc-600 hover:text-zinc-900">
+              Pylon
+            </a>
+          </span>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/templates/{ai-studio/app → creator/app/(marketing)}/not-found.tsx RENAMED Viewed

@@ -1,8 +1,12 @@
 import React from "react";
 import { Link, type NotFoundProps } from "@pylonsync/react";
-// `app/not-found.tsx` → rendered at HTTP 404 for any unmatched URL (and when a
-// page calls `response.notFound()`). Hydrated, so the link is a client nav.
+// `(marketing)/not-found.tsx` → rendered at HTTP 404 for any unmatched URL
+// (and when a page calls `response.notFound()`). It lives inside the
+// `(marketing)` group on purpose: a group segment adds no URL prefix, so this
+// is still the root 404 boundary, but it wraps in the marketing layout — a
+// missing URL gets the site nav + footer instead of a bare page. Hydrated, so
+// the link is a client nav.
 export default function NotFound(_props: NotFoundProps) {
   return (
     <div className="mx-auto flex min-h-[60vh] max-w-3xl flex-col items-center justify-center px-6 text-center">

package/templates/creator/app/error.tsx CHANGED Viewed

@@ -1,9 +1,12 @@
 import React from "react";
 import { type ErrorBoundaryProps } from "@pylonsync/react";
-// `app/error.tsx` → the error boundary for this segment. Hydrated + interactive:
-// `reset()` re-attempts the route. The thrown error reaches the client as
-// `{ message, digest }` only — the stack stays in the dev overlay / server logs.
+// `app/error.tsx` → the GLOBAL error boundary. Sitting at the app root
+// (outside the `(marketing)` group), it catches a throw from any section —
+// marketing, auth, or dashboard — and renders at HTTP 500 in the bare root
+// shell. Hydrated + interactive: `reset()` re-attempts the route. The thrown
+// error reaches the client as `{ message, digest }` only — the stack stays
+// in the dev overlay / server logs.
 export default function Error({ error, reset }: ErrorBoundaryProps) {
   return (
     <div className="mx-auto flex min-h-[60vh] max-w-3xl flex-col items-center justify-center px-6 text-center">

package/templates/creator/app/layout.tsx CHANGED Viewed

@@ -1,32 +1,18 @@
 import React from "react";
-import { Link, type PageAuth } from "@pylonsync/react";
 import { siteConfig } from "@/lib/site.config";
 import { SectionScroller } from "@/components/section-scroller";
-// A layout wraps every page. This marketing layout renders a slim nav up top
-// and a footer below, both driven by lib/site.config.ts. `auth.user_id` is
-// resolved server-side from the session cookie before any HTML is sent, so the
-// nav shows "Dashboard" once the owner is signed in and "Sign in" otherwise —
-// no flash, no client fetch.
 interface LayoutProps {
   children: React.ReactNode;
-  url: string;
-  auth: PageAuth;
 }
-export default function RootLayout({ children, url, auth }: LayoutProps) {
-  // A guest session (minted by <EnsureGuest> for the live counter) has a
-  // `guest_…` user id — that's an anonymous visitor, NOT the signed-in owner,
-  // so it shouldn't flip the nav to "Dashboard".
-  const signedIn = Boolean(auth?.user_id && !auth.user_id.startsWith("guest_"));
-  const { brand, colors } = siteConfig;
-  // The auth screens and the dashboard bring their own chrome, so they render
-  // bare (no marketing nav/footer). Match on the path PREFIX, not a substring.
-  const path = (url ?? "").split("?")[0];
-  const BARE_PREFIXES = ["/login", "/dashboard"];
-  const isBare = BARE_PREFIXES.some((p) => path === p || path.startsWith(p + "/"));
+// The root layout is only the document shell: <html>, <head>, <body>, and the
+// site-wide theme variables. Section chrome lives in route-group layouts —
+// `(marketing)/layout.tsx` adds the nav + footer for every marketing page.
+// Routes outside the group (/login, /dashboard) render bare here: the auth
+// screen and the dashboard bring their own chrome.
+export default function RootLayout({ children }: LayoutProps) {
+  const { colors } = siteConfig;
   return (
     <html
       lang="en"
@@ -53,106 +39,8 @@ export default function RootLayout({ children, url, auth }: LayoutProps) {
       </head>
       <body className="flex min-h-screen flex-col bg-background text-foreground antialiased">
         <SectionScroller />
-        {isBare ? (
-          children
-        ) : (
-          <>
-            <header className="sticky top-0 z-30 bg-white/80 backdrop-blur">
-              <div className="mx-auto flex h-14 max-w-3xl items-center justify-between px-6">
-                <Link href="/" className="flex items-center gap-2">
-                  <span className="flex size-6 items-center justify-center rounded-[7px] bg-zinc-900 text-[13px] font-bold text-white">
-                    {brand.letter}
-                  </span>
-                  <span className="text-[15px] font-semibold tracking-tight text-zinc-900">
-                    {brand.name}
-                  </span>
-                </Link>
-                <nav className="flex items-center gap-2">
-                  {signedIn ? (
-                    <Link
-                      href="/dashboard"
-                      className="inline-flex items-center rounded-full bg-zinc-900 px-3.5 py-1.5 text-[13px] font-medium text-white transition-colors hover:bg-zinc-700"
-                    >
-                      Dashboard
-                    </Link>
-                  ) : (
-                    <Link
-                      href="/login"
-                      className="rounded-full px-3 py-1.5 text-[13px] font-medium text-zinc-600 transition-colors hover:text-zinc-900"
-                    >
-                      Sign in
-                    </Link>
-                  )}
-                </nav>
-              </div>
-            </header>
-            <main className="flex-1">{children}</main>
-            <SiteFooter />
-          </>
-        )}
+        {children}
       </body>
     </html>
   );
 }
-function SiteFooter() {
-  const { brand } = siteConfig;
-  return (
-    <footer className="border-t border-zinc-200/70 bg-white">
-      <div className="mx-auto max-w-3xl px-6 py-12">
-        <div className="flex flex-col items-start justify-between gap-6 sm:flex-row">
-          <div className="max-w-sm">
-            <Link href="/" className="inline-flex items-center gap-2">
-              <span className="flex size-6 items-center justify-center rounded-[7px] bg-zinc-900 text-[13px] font-bold text-white">
-                {brand.letter}
-              </span>
-              <span className="text-[15px] font-semibold tracking-tight text-zinc-900">
-                {brand.name}
-              </span>
-            </Link>
-            <p className="mt-3 text-[13px] leading-relaxed text-zinc-500">
-              {brand.footerBlurb}
-            </p>
-          </div>
-          <div className="flex items-center gap-4">
-            {brand.socials.map((s) => (
-              <a
-                key={s.label}
-                href={s.href}
-                aria-label={s.label}
-                className="text-zinc-400 transition-colors hover:text-zinc-900"
-              >
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                  <path d={s.path} />
-                </svg>
-              </a>
-            ))}
-            <a
-              href={`mailto:${brand.email}`}
-              aria-label="Email"
-              className="text-zinc-400 transition-colors hover:text-zinc-900"
-            >
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <rect x="3" y="5" width="18" height="14" rx="2" />
-                <path d="m3 7 9 6 9-6" />
-              </svg>
-            </a>
-          </div>
-        </div>
-        <div className="mt-10 flex flex-col items-start justify-between gap-3 border-t border-zinc-200/70 pt-6 text-[12px] text-zinc-400 sm:flex-row sm:items-center">
-          <span>
-            © {new Date().getFullYear()} {brand.copyrightName}
-          </span>
-          <span>
-            Built with{" "}
-            <a href="https://pylonsync.com" className="font-medium text-zinc-600 hover:text-zinc-900">
-              Pylon
-            </a>
-          </span>
-        </div>
-      </div>
-    </footer>
-  );
-}

package/templates/creator/app/login/page.tsx CHANGED Viewed

@@ -8,8 +8,9 @@ export const metadata: Metadata = {
   robots: "noindex",
 };
-// `app/login/page.tsx` → `/login`. The owner's sign-in. Rendered bare (the
-// layout suppresses the marketing nav/footer for /login). Already signed in?
+// `app/login/page.tsx` → `/login`. The owner's sign-in. It sits outside the
+// `(marketing)` route group, so it renders bare — no marketing nav/footer.
+// Already signed in?
 // Skip straight to the dashboard — `response.redirect` in the synchronous shell
 // render is a real 307 before any HTML is sent.
 export default function LoginPage({ auth, response }: PageProps) {

package/templates/crm/AGENTS.md CHANGED Viewed

@@ -6,7 +6,7 @@ Pylon serves the API, auth, sync, WebSocket, SSE, and native React 19 SSR from o
 **Unified SSR app:**
 - `app.ts`: data model + manifest (`entity()` + `field.*`, queries/actions/policies, `routes: await discoverAppRoutes()`). Ends with `console.log(JSON.stringify(manifest))`.
-- `app/`: file-based SSR routes. `app/page.tsx` → `/`, `app/about/page.tsx` → `/about`, `app/blog/[slug]/page.tsx` → `/blog/:slug`. `app/layout.tsx` is the shell; `app/error.tsx` / `app/not-found.tsx` are boundaries.
+- `app/`: file-based SSR routes. `app/page.tsx` → `/`, `app/about/page.tsx` → `/about`, `app/blog/[slug]/page.tsx` → `/blog/:slug`. A `(group)` directory is stripped from the URL — `app/(marketing)/about/page.tsx` still serves `/about` — so a group's `layout.tsx` gives one section its own chrome (nav, footer) without changing any path; routes outside the group render without it. `app/layout.tsx` is the document shell; `app/error.tsx` / `app/not-found.tsx` are boundaries.
 - `app/globals.css`: Tailwind v4 entrypoint (auto-compiled and injected).
 - `functions/`: server functions, one per file, `default`-exported.
 - `.pylon/`: local dev state (SQLite, jobs, sessions, uploads). Created by `pylon dev`. Do not commit.

package/templates/directory/AGENTS.md CHANGED Viewed

@@ -6,7 +6,7 @@ Pylon serves the API, auth, sync, WebSocket, SSE, and native React 19 SSR from o
 **Unified SSR app:**
 - `app.ts`: data model + manifest (`entity()` + `field.*`, queries/actions/policies, `routes: await discoverAppRoutes()`). Ends with `console.log(JSON.stringify(manifest))`.
-- `app/`: file-based SSR routes. `app/page.tsx` → `/`, `app/about/page.tsx` → `/about`, `app/blog/[slug]/page.tsx` → `/blog/:slug`. `app/layout.tsx` is the shell; `app/error.tsx` / `app/not-found.tsx` are boundaries.
+- `app/`: file-based SSR routes. `app/page.tsx` → `/`, `app/about/page.tsx` → `/about`, `app/blog/[slug]/page.tsx` → `/blog/:slug`. A `(group)` directory is stripped from the URL — `app/(marketing)/about/page.tsx` still serves `/about` — so a group's `layout.tsx` gives one section its own chrome (nav, footer) without changing any path; routes outside the group render without it. `app/layout.tsx` is the document shell; `app/error.tsx` / `app/not-found.tsx` are boundaries.
 - `app/globals.css`: Tailwind v4 entrypoint (auto-compiled and injected).
 - `functions/`: server functions, one per file, `default`-exported.
 - `.pylon/`: local dev state (SQLite, jobs, sessions, uploads). Created by `pylon dev`. Do not commit.

package/templates/directory/app/(marketing)/layout.tsx ADDED Viewed

@@ -0,0 +1,133 @@
+import React from "react";
+import { Link, type PageAuth } from "@pylonsync/react";
+import { siteConfig } from "@/lib/site.config";
+// `(marketing)` is a ROUTE GROUP: the parens segment is stripped from every
+// URL (so `(marketing)/page.tsx` still serves `/`), and this layout wraps
+// only the pages inside the group — a slim nav up top and a footer below,
+// both driven by lib/site.config.ts. Routes outside the group (/login,
+// /dashboard) render bare in the root shell. `auth.user_id` is resolved
+// server-side from the session cookie before any HTML is sent, so the nav
+// shows "Dashboard" once the owner is signed in and "Sign in" otherwise —
+// no flash, no client fetch.
+interface LayoutProps {
+  children: React.ReactNode;
+  auth: PageAuth;
+}
+export default function MarketingLayout({ children, auth }: LayoutProps) {
+  // A guest session (minted by <EnsureGuest> for the live counter) has a
+  // `guest_…` user id — that's an anonymous visitor, NOT the signed-in owner,
+  // so it shouldn't flip the nav to "Dashboard".
+  const signedIn = Boolean(auth?.user_id && !auth.user_id.startsWith("guest_"));
+  const { brand } = siteConfig;
+  return (
+    <>
+      <header className="sticky top-0 z-30 border-b border-zinc-200/70 bg-white/85 backdrop-blur">
+        <div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-6">
+          <Link href="/" className="flex items-center gap-2">
+            <span className="flex size-6 items-center justify-center rounded-[7px] bg-zinc-900 text-[13px] font-bold text-white">
+              {brand.letter}
+            </span>
+            <span className="text-[15px] font-semibold tracking-tight text-zinc-900">
+              {brand.name}
+            </span>
+          </Link>
+          <nav className="flex items-center gap-1 sm:gap-2">
+            <a href="/#browse" className="hidden rounded-full px-3 py-1.5 text-[13px] font-medium text-zinc-600 transition-colors hover:text-zinc-900 sm:inline-flex">
+              Browse
+            </a>
+            {signedIn ? (
+              <Link
+                href="/dashboard"
+                className="inline-flex items-center rounded-full bg-zinc-900 px-3.5 py-1.5 text-[13px] font-medium text-white transition-colors hover:bg-zinc-700"
+              >
+                Dashboard
+              </Link>
+            ) : (
+              <>
+                <Link
+                  href="/login"
+                  className="hidden rounded-full px-3 py-1.5 text-[13px] font-medium text-zinc-600 transition-colors hover:text-zinc-900 sm:inline-flex"
+                >
+                  Sign in
+                </Link>
+                <Link
+                  href="/submit"
+                  className="inline-flex items-center rounded-full bg-brand px-3.5 py-1.5 text-[13px] font-medium text-white transition-opacity hover:opacity-90"
+                >
+                  {siteConfig.hero.ctaLabel}
+                </Link>
+              </>
+            )}
+          </nav>
+        </div>
+      </header>
+      <main className="flex-1">{children}</main>
+      <SiteFooter />
+    </>
+  );
+}
+function SiteFooter() {
+  const { brand } = siteConfig;
+  return (
+    <footer className="border-t border-zinc-200/70 bg-white">
+      <div className="mx-auto max-w-5xl px-6 py-12">
+        <div className="flex flex-col items-start justify-between gap-6 sm:flex-row">
+          <div className="max-w-sm">
+            <Link href="/" className="inline-flex items-center gap-2">
+              <span className="flex size-6 items-center justify-center rounded-[7px] bg-zinc-900 text-[13px] font-bold text-white">
+                {brand.letter}
+              </span>
+              <span className="text-[15px] font-semibold tracking-tight text-zinc-900">
+                {brand.name}
+              </span>
+            </Link>
+            <p className="mt-3 text-[13px] leading-relaxed text-zinc-500">
+              {brand.footerBlurb}
+            </p>
+          </div>
+          <div className="flex items-center gap-4">
+            {brand.socials.map((s) => (
+              <a
+                key={s.label}
+                href={s.href}
+                aria-label={s.label}
+                className="text-zinc-400 transition-colors hover:text-zinc-900"
+              >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                  <path d={s.path} />
+                </svg>
+              </a>
+            ))}
+            <a
+              href={`mailto:${brand.email}`}
+              aria-label="Email"
+              className="text-zinc-400 transition-colors hover:text-zinc-900"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <rect x="3" y="5" width="18" height="14" rx="2" />
+                <path d="m3 7 9 6 9-6" />
+              </svg>
+            </a>
+          </div>
+        </div>
+        <div className="mt-10 flex flex-col items-start justify-between gap-3 border-t border-zinc-200/70 pt-6 text-[12px] text-zinc-400 sm:flex-row sm:items-center">
+          <span>
+            © {new Date().getFullYear()} {brand.copyrightName}
+          </span>
+          <span>
+            Built with{" "}
+            <a href="https://pylonsync.com" className="font-medium text-zinc-600 hover:text-zinc-900">
+              Pylon
+            </a>
+          </span>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/templates/directory/app/(marketing)/not-found.tsx ADDED Viewed

@@ -0,0 +1,23 @@
+import React from "react";
+import { Link, type NotFoundProps } from "@pylonsync/react";
+// `(marketing)/not-found.tsx` → rendered at HTTP 404 for any unmatched URL
+// (and when a page calls `response.notFound()`). It lives inside the
+// `(marketing)` group on purpose: a group segment adds no URL prefix, so this
+// is still the root 404 boundary, but it wraps in the marketing layout — a
+// missing URL gets the site nav + footer instead of a bare page. Hydrated, so
+// the link is a client nav.
+export default function NotFound(_props: NotFoundProps) {
+  return (
+    <div className="mx-auto flex min-h-[60vh] max-w-3xl flex-col items-center justify-center px-6 text-center">
+      <h1 className="text-3xl font-semibold tracking-tight">404</h1>
+      <p className="mt-2 text-zinc-500">We couldn&apos;t find that page.</p>
+      <Link
+        href="/"
+        className="mt-6 inline-flex h-10 items-center rounded-full bg-zinc-900 px-5 text-sm font-medium text-white transition-colors hover:bg-zinc-700"
+      >
+        Back home
+      </Link>
+    </div>
+  );
+}

package/templates/directory/app/error.tsx CHANGED Viewed

@@ -1,9 +1,12 @@
 import React from "react";
 import { type ErrorBoundaryProps } from "@pylonsync/react";
-// `app/error.tsx` → the error boundary for this segment. Hydrated + interactive:
-// `reset()` re-attempts the route. The thrown error reaches the client as
-// `{ message, digest }` only — the stack stays in the dev overlay / server logs.
+// `app/error.tsx` → the GLOBAL error boundary. Sitting at the app root
+// (outside the `(marketing)` group), it catches a throw from any section —
+// marketing, auth, or dashboard — and renders at HTTP 500 in the bare root
+// shell. Hydrated + interactive: `reset()` re-attempts the route. The thrown
+// error reaches the client as `{ message, digest }` only — the stack stays
+// in the dev overlay / server logs.
 export default function Error({ error, reset }: ErrorBoundaryProps) {
   return (
     <div className="mx-auto flex min-h-[60vh] max-w-3xl flex-col items-center justify-center px-6 text-center">