@pylonsync/create-pylon 0.3.273 → 0.3.275

package/templates/shop/app/auth-form.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import React, { useState } from "react";
+import {
+  passwordLogin,
+  passwordRegister,
+  persistSession,
+  ApiError,
+} from "@pylonsync/client";
+
+// The owner's email/password form — one form, two modes. It calls the built-in
+// auth API directly (`passwordLogin` / `passwordRegister` POST to
+// `/api/auth/password/*`), then `persistSession` writes the freshly-minted
+// token to local storage so the sync engine + `callFn` authenticate AS THE
+// OWNER on the next load. This step matters here specifically: the landing page
+// mints an anonymous guest session (for the live counter), and without
+// persisting the real session that stale guest token would shadow the owner's
+// — so the owner-only `waitlistStats` call would come back as a guest and get
+// rejected. We then do a full navigation to /dashboard so the SSR runtime
+// re-resolves auth from the HttpOnly cookie and renders server-side.
+//
+// A waitlist is single-tenant: there's no public signup funnel, just the owner
+// creating their one account. Whoever signs in only sees data if their email
+// matches PYLON_OWNER_EMAIL — enforced by the waitlistStats function.
+export function AuthForm() {
+  const [mode, setMode] = useState<"login" | "signup">("login");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setPending(true);
+    try {
+      const session =
+        mode === "login"
+          ? await passwordLogin({ email, password })
+          : await passwordRegister({ email, password });
+      // Make this session authoritative, replacing any anonymous guest token.
+      persistSession(session);
+      window.location.assign("/dashboard");
+    } catch (err) {
+      setError(messageFor(err));
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="space-y-5">
+      <form onSubmit={onSubmit} className="space-y-4">
+        <label className="block">
+          <span className="mb-1.5 block text-[13px] font-medium text-zinc-700">Email</span>
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+            autoComplete="email"
+            placeholder="you@yourbusiness.com"
+            className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20"
+          />
+        </label>
+        <label className="block">
+          <span className="mb-1.5 block text-[13px] font-medium text-zinc-700">Password</span>
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            autoComplete={mode === "login" ? "current-password" : "new-password"}
+            placeholder={mode === "login" ? "Your password" : "At least 10 characters"}
+            className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20"
+          />
+        </label>
+        {error ? (
+          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-[13px] leading-snug text-red-700">
+            {error}
+          </p>
+        ) : null}
+        <button
+          type="submit"
+          disabled={pending}
+          className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-zinc-900 text-sm font-medium text-white transition-colors hover:bg-zinc-700 disabled:opacity-60"
+        >
+          {pending ? "…" : mode === "login" ? "Sign in" : "Create account"}
+        </button>
+      </form>
+
+      <p className="text-center text-[13px] text-zinc-500">
+        {mode === "login" ? "First time here?" : "Already have an account?"}{" "}
+        <button
+          type="button"
+          onClick={() => {
+            setMode(mode === "login" ? "signup" : "login");
+            setError(null);
+          }}
+          className="font-medium text-zinc-900 underline underline-offset-2"
+        >
+          {mode === "login" ? "Create the owner account" : "Sign in"}
+        </button>
+      </p>
+    </div>
+  );
+}
+
+// Map the framework's auth error codes to friendly copy. `ApiError` carries a
+// stable `.code` so you branch on the code, not the message.
+function messageFor(err: unknown): string {
+  if (err instanceof ApiError) {
+    switch (err.code) {
+      case "INVALID_CREDENTIALS":
+        return "Wrong email or password.";
+      case "USER_EXISTS":
+        return "That email is already registered — sign in instead.";
+      case "WEAK_PASSWORD":
+        return "Pick a longer password — at least 10 characters.";
+      case "PWNED_PASSWORD":
+        return "That password has appeared in a known data breach. Choose a different one.";
+      case "RATE_LIMITED":
+        return "Too many attempts — try again in a minute.";
+      default:
+        return err.message;
+    }
+  }
+  if (err instanceof Error) return err.message;
+  return "Something went wrong. Try again.";
+}

package/templates/shop/app/dashboard/dashboard-client.tsx

@@ -0,0 +1,264 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { db, callFn } from "@pylonsync/react";
+import { useAuth } from "@pylonsync/client";
+import { formatPrice, type OrderRow, type OwnerOrdersResult } from "@/lib/shop";
+
+interface ProductRow {
+  id: string;
+  slug: string;
+  name: string;
+  stock: number;
+  priceCents: number;
+}
+
+// The owner's live dashboard. Stock rides the public Product entity
+// (`db.useQuery`), so the stock table updates live as orders land; that same
+// change also triggers a re-fetch of the owner-gated `ordersForOwner`, so new
+// orders appear without a refresh. Customer PII only travels through that gated
+// call.
+export function ShopDashboard({ userEmail }: { userEmail: string }) {
+  const { data: products } = db.useQuery<ProductRow>("Product");
+  // A signature of stock state — changes whenever any product's stock moves,
+  // which is exactly when a new order landed or one was cancelled.
+  const liveKey = products.reduce((s, p) => s + p.stock, 0) + ":" + products.length;
+
+  const [orders, setOrders] = useState<OrderRow[] | null>(null);
+  const [denied, setDenied] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [busyId, setBusyId] = useState<string | null>(null);
+
+  async function load() {
+    try {
+      const r = await callFn<OwnerOrdersResult>("ordersForOwner", {});
+      if (!r.authorized) setDenied(true);
+      else {
+        setOrders(r.orders);
+        setDenied(false);
+        setError(null);
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  }
+
+  useEffect(() => {
+    void load();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [liveKey]);
+
+  async function orderAction(id: string, fn: "fulfillOrder" | "cancelOrder") {
+    setBusyId(id);
+    try {
+      await callFn(fn, { orderId: id });
+      await load();
+    } finally {
+      setBusyId(null);
+    }
+  }
+
+  async function restock(slug: string) {
+    setBusyId(slug);
+    try {
+      await callFn("restockProduct", { slug, add: 10 });
+    } finally {
+      setBusyId(null);
+    }
+  }
+
+  if (denied) return <OwnerOnly email={userEmail} />;
+  if (error) {
+    return <div className="rounded-xl border border-red-200 bg-red-50 px-5 py-4 text-sm text-red-700">{error}</div>;
+  }
+  if (!orders) return <Skeleton />;
+
+  const active = orders.filter((o) => o.status !== "cancelled");
+  // A sale = paid / reserved / fulfilled. "pending" is an unpaid Stripe checkout
+  // still in flight (stock held), so it doesn't count toward sold/revenue yet.
+  const sales = active.filter((o) => o.status !== "pending");
+  const toFulfill = sales.filter((o) => o.status === "paid" || o.status === "reserved").length;
+  const unitsSold = sales.reduce((s, o) => s + o.qty, 0);
+  const revenue = sales.reduce((s, o) => s + o.qty * o.unitPriceCents, 0);
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h1 className="text-xl font-semibold tracking-tight">Orders</h1>
+        <p className="mt-1 text-sm text-zinc-500">
+          Live — orders land here the moment they happen; cancelling returns the units to stock on
+          the site instantly.
+        </p>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-3">
+        <Stat label="To fulfill" value={String(toFulfill)} />
+        <Stat label="Units sold" value={String(unitsSold)} />
+        <Stat label="Revenue" value={formatPrice(revenue)} />
+      </div>
+
+      {/* Stock */}
+      <div className="rounded-xl border border-zinc-200 bg-white">
+        <div className="border-b border-zinc-100 px-4 py-3 text-sm font-semibold text-zinc-900">Stock</div>
+        <ul className="divide-y divide-zinc-100">
+          {products
+            .slice()
+            .sort((a, b) => a.name.localeCompare(b.name))
+            .map((p) => (
+              <li key={p.id} className="flex items-center justify-between gap-3 px-4 py-2.5">
+                <span className="truncate text-sm text-zinc-800">{p.name}</span>
+                <div className="flex items-center gap-3">
+                  <span
+                    className={
+                      "text-[13px] font-medium tabular-nums " +
+                      (p.stock <= 0 ? "text-zinc-400" : p.stock <= 3 ? "text-red-600" : "text-zinc-700")
+                    }
+                  >
+                    {p.stock <= 0 ? "Sold out" : `${p.stock} in stock`}
+                  </span>
+                  <button
+                    type="button"
+                    disabled={busyId === p.slug}
+                    onClick={() => restock(p.slug)}
+                    className="rounded-md border border-zinc-300 px-2.5 py-1 text-[12px] font-medium text-zinc-600 transition-colors hover:bg-zinc-50 disabled:opacity-50"
+                  >
+                    +10
+                  </button>
+                </div>
+              </li>
+            ))}
+        </ul>
+      </div>
+
+      {/* Orders */}
+      <div className="rounded-xl border border-zinc-200 bg-white">
+        <div className="border-b border-zinc-100 px-4 py-3 text-sm font-semibold text-zinc-900">
+          Orders <span className="font-normal text-zinc-400">({active.length})</span>
+        </div>
+        {active.length === 0 ? (
+          <p className="p-8 text-center text-sm text-zinc-500">No orders yet — share your shop.</p>
+        ) : (
+          <ul className="divide-y divide-zinc-100">
+            {active.map((o) => (
+              <li key={o.id} className="flex flex-wrap items-center gap-x-4 gap-y-2 px-4 py-3">
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="text-[14px] font-medium text-zinc-900">
+                      {o.qty}× {o.productName}
+                    </span>
+                    <StatusBadge status={o.status} />
+                  </div>
+                  <div className="truncate text-[12.5px] text-zinc-500">
+                    {o.customerName} · {o.customerEmail} · {formatPrice(o.qty * o.unitPriceCents)}
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  {o.status === "reserved" || o.status === "paid" ? (
+                    <button
+                      type="button"
+                      disabled={busyId === o.id}
+                      onClick={() => orderAction(o.id, "fulfillOrder")}
+                      className="rounded-md bg-zinc-900 px-3 py-1.5 text-[12.5px] font-medium text-white transition-colors hover:bg-zinc-700 disabled:opacity-50"
+                    >
+                      {busyId === o.id ? "…" : "Mark fulfilled"}
+                    </button>
+                  ) : null}
+                  <button
+                    type="button"
+                    disabled={busyId === o.id}
+                    onClick={() => orderAction(o.id, "cancelOrder")}
+                    className="rounded-md border border-zinc-300 px-3 py-1.5 text-[12.5px] font-medium text-zinc-600 transition-colors hover:border-red-300 hover:text-red-600 disabled:opacity-50"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Stat({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="rounded-xl border border-zinc-200 bg-white p-4">
+      <div className="text-[11px] font-medium uppercase tracking-wide text-zinc-400">{label}</div>
+      <div className="mt-1 text-2xl font-semibold tabular-nums text-zinc-900">{value}</div>
+    </div>
+  );
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const tone =
+    status === "fulfilled"
+      ? "bg-green-50 text-green-700"
+      : status === "paid"
+        ? "bg-emerald-50 text-emerald-700"
+        : status === "pending"
+          ? "bg-zinc-100 text-zinc-500"
+          : status === "cancelled"
+            ? "bg-zinc-100 text-zinc-400"
+            : "bg-amber-50 text-amber-700"; // reserved
+  const label = status === "pending" ? "awaiting payment" : status;
+  return <span className={"rounded-full px-2 py-0.5 text-[10px] font-medium capitalize " + tone}>{label}</span>;
+}
+
+function OwnerOnly({ email }: { email: string }) {
+  return (
+    <div className="rounded-xl border border-dashed border-zinc-300 px-6 py-12 text-center">
+      <h1 className="text-lg font-semibold">This dashboard is owner-only</h1>
+      <p className="mx-auto mt-2 max-w-md text-sm text-zinc-500">
+        You&apos;re signed in as <span className="font-medium text-zinc-700">{email || "this account"}</span>.
+        Only the shop owner can see orders. Set{" "}
+        <code className="rounded bg-zinc-100 px-1.5 py-0.5 text-[12px]">PYLON_OWNER_EMAIL={email || "you@yourshop.com"}</code>{" "}
+        in your <code className="rounded bg-zinc-100 px-1.5 py-0.5 text-[12px]">.env</code>, restart, and reload —
+        or sign in with the owner account.
+      </p>
+    </div>
+  );
+}
+
+export function UserMenu({ email }: { email: string }) {
+  const { signOut } = useAuth();
+  const initial = (email.trim()[0] || "?").toUpperCase();
+  async function onSignOut() {
+    await signOut();
+    window.location.assign("/");
+  }
+  return (
+    <details className="group relative">
+      <summary className="flex size-8 cursor-pointer select-none list-none items-center justify-center rounded-full bg-zinc-900 text-[12px] font-semibold text-white marker:hidden [&::-webkit-details-marker]:hidden">
+        {initial}
+      </summary>
+      <div className="absolute right-0 top-full z-40 mt-2 w-56 overflow-hidden rounded-xl border border-zinc-200 bg-white py-1 shadow-[0_16px_48px_-16px_rgba(0,0,0,0.25)]">
+        <div className="border-b border-zinc-100 px-3 py-2">
+          <div className="truncate text-[13px] font-medium text-zinc-900">{email || "Signed in"}</div>
+        </div>
+        <button
+          type="button"
+          onClick={onSignOut}
+          className="flex w-full items-center px-3 py-2 text-left text-[13px] text-zinc-700 transition-colors hover:bg-zinc-50"
+        >
+          Sign out
+        </button>
+      </div>
+    </details>
+  );
+}
+
+function Skeleton() {
+  return (
+    <div className="space-y-8">
+      <div className="h-6 w-28 animate-pulse rounded bg-zinc-100" />
+      <div className="grid gap-4 sm:grid-cols-3">
+        {[0, 1, 2].map((i) => (
+          <div key={i} className="h-20 animate-pulse rounded-xl bg-zinc-100" />
+        ))}
+      </div>
+      <div className="h-40 animate-pulse rounded-xl bg-zinc-100" />
+      <div className="h-48 animate-pulse rounded-xl bg-zinc-100" />
+    </div>
+  );
+}

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

@@ -0,0 +1,59 @@
+import React, { use } from "react";
+import { Link, type Metadata, type PageProps } from "@pylonsync/react";
+import { siteConfig } from "@/lib/site.config";
+import { UserMenu, ShopDashboard } from "./dashboard-client";
+
+export const metadata: Metadata = {
+  title: `Dashboard — ${siteConfig.brand.name}`,
+  robots: "noindex",
+};
+
+// `app/dashboard/page.tsx` → `/dashboard`. Server-side auth gate; the OWNER gate
+// (only PYLON_OWNER_EMAIL sees orders + customer PII) lives in the
+// `ordersForOwner` function via `ctx.env`. Reading `auth` opts the render out of
+// caching — correct, the dashboard is private + noindex.
+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;
+  }
+  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+  const email = me?.email ?? "";
+
+  return (
+    <Shell email={email}>
+      <ShopDashboard userEmail={email} />
+    </Shell>
+  );
+}
+
+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">/ orders</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/shop/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/shop/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;
+  }
+}