@pylonsync/create-pylon 0.3.274 → 0.3.275

package/templates/agency/app/dashboard/page.tsx

@@ -0,0 +1,70 @@
+import React, { use } from "react";
+import { Link, type Metadata, type PageProps } from "@pylonsync/react";
+import { siteConfig } from "@/lib/site.config";
+import { UserMenu, AgencyDashboard } from "./dashboard-client";
+
+export const metadata: Metadata = {
+  title: `Dashboard — ${siteConfig.brand.name}`,
+  robots: "noindex",
+};
+
+// `app/dashboard/page.tsx` → `/dashboard`. Server-side auth gate only — any
+// signed-in user can load the shell. The OWNER gate (a studio is single-tenant:
+// only PYLON_OWNER_EMAIL may see the inquiries) lives in the `inquiriesForOwner`
+// function, which checks `ctx.env.PYLON_OWNER_EMAIL` — the authoritative server
+// env. Non-owners get a clean "owner-only" card from the client when that call
+// is denied. (Env-based config is read in the function, not here: an SSR page
+// render can't reliably read arbitrary `process.env`.)
+export default function DashboardPage({ auth, response, serverData }: PageProps) {
+  // Anonymous visitors and guest sessions (guest_… ids) get bounced to login —
+  // the dashboard is for the real, signed-in owner only.
+  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
+    response.redirect("/login");
+    return null;
+  }
+
+  // The User self-read policy lets the signed-in user read their own row → the
+  // email shown in the account menu (and on the owner-only card).
+  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+  const email = me?.email ?? "";
+
+  return (
+    <Shell email={email}>
+      <AgencyDashboard userEmail={email} />
+    </Shell>
+  );
+}
+
+// Dashboard chrome: a slim top bar with the logo, a link back to the public
+// site, and the account menu (a client island for sign-out).
+function Shell({ email, children }: { email: string; children: React.ReactNode }) {
+  const { brand } = siteConfig;
+  return (
+    <div className="flex min-h-screen flex-col bg-white text-zinc-900">
+      <header className="border-b border-zinc-200">
+        <div className="mx-auto flex h-14 max-w-4xl items-center justify-between px-6">
+          <div 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">
+              {brand.name} <span className="text-zinc-400">/ studio</span>
+            </span>
+          </div>
+          <div className="flex items-center gap-4">
+            <Link
+              href="/"
+              className="text-[13px] text-zinc-500 transition-colors hover:text-zinc-900"
+            >
+              View site ↗
+            </Link>
+            <UserMenu email={email} />
+          </div>
+        </div>
+      </header>
+      <main className="flex-1">
+        <div className="mx-auto max-w-4xl px-6 py-8">{children}</div>
+      </main>
+    </div>
+  );
+}

package/templates/agency/app/error.tsx

@@ -0,0 +1,26 @@
+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.
+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">
+      <h1 className="text-2xl font-semibold tracking-tight">Something went wrong</h1>
+      <p className="mt-2 text-zinc-500">{error.message}</p>
+      {error.digest ? (
+        <p className="mt-1 text-xs text-zinc-400">
+          Reference: <code>{error.digest}</code>
+        </p>
+      ) : null}
+      <button
+        type="button"
+        onClick={reset}
+        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"
+      >
+        Try again
+      </button>
+    </div>
+  );
+}

package/templates/agency/app/globals.css

@@ -0,0 +1,148 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+/* Tailwind v4 scans these globs for class names. Add more @source lines if you
+   put markup elsewhere. The @pylonsync/client line lets its components
+   (EnsureGuest, auth helpers) keep any classes they ship. */
+@source "../app/**/*.{tsx,ts,jsx,js}";
+@source "../components/**/*.{tsx,ts,jsx,js}";
+@source "../lib/**/*.{tsx,ts,jsx,js}";
+@source "../node_modules/@pylonsync/client/**/*.{tsx,ts,jsx,js}";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* shadcn/ui design tokens (new-york / zinc) + the marketing brand accent. The
+   three brand vars are defaults — app/layout.tsx overrides them from
+   lib/site.config.ts on <html>, so re-theming the whole page is one edit there. */
+:root {
+  --radius: 0.625rem;
+  --brand: #4f46e5;
+  --brand-soft: #eef2ff;
+  --paper: #fafafa;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-brand: var(--brand);
+  --color-brand-soft: var(--brand-soft);
+  --color-paper: var(--paper);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-border, currentColor);
+    outline-color: var(--color-ring);
+  }
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+  button {
+    cursor: pointer;
+  }
+}

package/templates/agency/app/layout.tsx

@@ -0,0 +1,174 @@
+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 + "/"));
+
+  return (
+    <html
+      lang="en"
+      // Marketing theme colors come from the single site config. Set as inline
+      // CSS vars on <html> so they override globals.css and the whole page
+      // re-themes from one place — no CSS edit needed.
+      style={
+        {
+          "--brand": colors.brand,
+          "--brand-soft": colors.brandSoft,
+          "--paper": colors.paper,
+        } as React.CSSProperties
+      }
+    >
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        {/* No <title> here — each page's exported `metadata` sets it. */}
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+        />
+        {/* Tailwind is compiled by Pylon from app/globals.css and injected here. */}
+      </head>
+      <body className="flex min-h-screen flex-col bg-background text-foreground antialiased">
+        <SectionScroller />
+        {isBare ? (
+          children
+        ) : (
+          <>
+            <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="/#work" 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">
+                    Work
+                  </a>
+                  <a href="/#services" 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">
+                    Services
+                  </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>
+                      <a
+                        href="/#contact"
+                        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}
+                      </a>
+                    </>
+                  )}
+                </nav>
+              </div>
+            </header>
+
+            <main className="flex-1">{children}</main>
+
+            <SiteFooter />
+          </>
+        )}
+      </body>
+    </html>
+  );
+}
+
+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/agency/app/login/page.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { Link, type Metadata, type PageProps } from "@pylonsync/react";
+import { AuthForm } from "../auth-form";
+import { siteConfig } from "@/lib/site.config";
+
+export const metadata: Metadata = {
+  title: `Sign in — ${siteConfig.brand.name}`,
+  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?
+// 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) {
+  // Already signed in (a real account, not an anonymous guest)? Skip the form.
+  if (auth.user_id && !auth.user_id.startsWith("guest_")) response.redirect("/dashboard");
+  const { brand } = siteConfig;
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-white px-6 py-12">
+      <div className="w-full max-w-[400px] rounded-2xl border border-zinc-200/70 p-8">
+        <Link href="/" className="inline-flex">
+          <span className="flex size-9 items-center justify-center rounded-xl bg-zinc-900 text-base font-bold text-white">
+            {brand.letter}
+          </span>
+        </Link>
+        <h1 className="mt-5 text-[22px] font-semibold tracking-tight text-zinc-900">
+          {brand.name} dashboard
+        </h1>
+        <p className="mt-1 text-[13px] text-zinc-500">
+          Sign in to manage your inquiries.
+        </p>
+        <div className="mt-6">
+          <AuthForm />
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/agency/app/not-found.tsx

@@ -0,0 +1,19 @@
+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.
+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>
+  );
+}