@pylonsync/create-pylon 0.11.1 → 0.11.4

package/templates/consumer/lib/social.ts

@@ -0,0 +1,245 @@
+// The social model: usernames, counts, time labels, and which posts a
+// person sees. Pure — no React, no `db` — so the rules are testable without a
+// server, and the components stay thin.
+
+export interface Profile {
+  id: string;
+  userId: string;
+  username: string;
+  displayName: string;
+  bio?: string | null;
+  avatarUrl?: string | null;
+  createdAt?: string | null;
+}
+
+export interface Post {
+  id: string;
+  authorId: string;
+  imageUrl: string;
+  caption?: string | null;
+  /** "square" (1:1) or "portrait" (4:5). The feed crops to this shape. */
+  shape?: string | null;
+  createdAt: string;
+}
+
+export interface Like {
+  id: string;
+  userId: string;
+  postId: string;
+}
+
+export interface Comment {
+  id: string;
+  postId: string;
+  authorId: string;
+  text: string;
+  createdAt: string;
+}
+
+export interface Follow {
+  id: string;
+  followerId: string;
+  followingId: string;
+}
+
+export interface Save {
+  id: string;
+  userId: string;
+  postId: string;
+}
+
+// ---------------------------------------------------------------------------
+// Usernames
+// ---------------------------------------------------------------------------
+
+export const USERNAME_MIN = 3;
+export const USERNAME_MAX = 30;
+export const CAPTION_MAX = 2200;
+export const COMMENT_MAX = 500;
+export const BIO_MAX = 150;
+export const DISPLAY_NAME_MAX = 40;
+
+/** Lowercase, trimmed, a leading @ dropped. Does not validate. */
+export function normalizeUsername(raw: string): string {
+  return raw.trim().replace(/^@+/, "").toLowerCase();
+}
+
+/**
+ * Why a username is refused, or null when it is fine: 3 to 30 characters of
+ * letters, digits, periods, and underscores, not starting or ending with a
+ * period, and no two periods in a row.
+ */
+export function usernameProblem(username: string): string | null {
+  if (username.length < USERNAME_MIN) return `Use at least ${USERNAME_MIN} characters.`;
+  if (username.length > USERNAME_MAX) return `Use at most ${USERNAME_MAX} characters.`;
+  if (!/^[a-z0-9._]+$/.test(username)) return "Use letters, numbers, periods, and underscores only.";
+  if (username.startsWith(".") || username.endsWith(".")) return "A username cannot start or end with a period.";
+  if (username.includes("..")) return "A username cannot have two periods in a row.";
+  return null;
+}
+
+/** A stable starting username for a new account, from its user id. */
+export function starterUsername(userId: string): string {
+  let hash = 2166136261;
+  for (let i = 0; i < userId.length; i++) {
+    hash ^= userId.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return `visitor_${(hash >>> 0).toString(36).slice(0, 6)}`;
+}
+
+// ---------------------------------------------------------------------------
+// Labels
+// ---------------------------------------------------------------------------
+
+/** 999 → "999", 1204 → "1,204", 12_500 → "12.5K", 3_400_000 → "3.4M". */
+export function formatCount(n: number): string {
+  if (n < 10_000) return n.toLocaleString("en-US");
+  if (n < 1_000_000) return `${trimZero((n / 1000).toFixed(1))}K`;
+  return `${trimZero((n / 1_000_000).toFixed(1))}M`;
+}
+
+function trimZero(s: string): string {
+  return s.endsWith(".0") ? s.slice(0, -2) : s;
+}
+
+/** "1 like", "2 likes". */
+export function plural(n: number, one: string, many = `${one}s`): string {
+  return `${formatCount(n)} ${n === 1 ? one : many}`;
+}
+
+const MINUTE = 60_000;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const WEEK = 7 * DAY;
+
+/** Short age: "now", "5m", "3h", "4d", "2w", then a date. */
+export function timeAgo(iso: string, now: number = Date.now()): string {
+  const then = Date.parse(iso);
+  if (Number.isNaN(then)) return "";
+  const age = Math.max(0, now - then);
+  if (age < MINUTE) return "now";
+  if (age < HOUR) return `${Math.floor(age / MINUTE)}m`;
+  if (age < DAY) return `${Math.floor(age / HOUR)}h`;
+  if (age < WEEK) return `${Math.floor(age / DAY)}d`;
+  if (age < 5 * WEEK) return `${Math.floor(age / WEEK)}w`;
+  const date = new Date(then);
+  const sameYear = date.getUTCFullYear() === new Date(now).getUTCFullYear();
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    ...(sameYear ? {} : { year: "numeric" }),
+    timeZone: "UTC",
+  });
+}
+
+/**
+ * A caption or comment split into text and @mentions, so a mention can link to
+ * the profile. Only names that pass `usernameProblem` become links.
+ */
+export type TextPart = { kind: "text"; text: string } | { kind: "mention"; username: string };
+
+export function splitMentions(text: string): TextPart[] {
+  const parts: TextPart[] = [];
+  const pattern = /@([a-z0-9._]{3,30})/gi;
+  let last = 0;
+  for (const match of text.matchAll(pattern)) {
+    const username = match[1].toLowerCase().replace(/\.+$/, "");
+    if (usernameProblem(username)) continue;
+    const start = match.index ?? 0;
+    if (start > last) parts.push({ kind: "text", text: text.slice(last, start) });
+    parts.push({ kind: "mention", username });
+    last = start + 1 + username.length;
+  }
+  if (last < text.length) parts.push({ kind: "text", text: text.slice(last) });
+  return parts;
+}
+
+// ---------------------------------------------------------------------------
+// Who sees what
+// ---------------------------------------------------------------------------
+
+export function newestFirst<T extends { createdAt: string }>(rows: T[]): T[] {
+  return [...rows].sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+}
+
+/** The user ids `userId` follows. */
+export function followingOf(follows: Follow[], userId: string | null | undefined): Set<string> {
+  const out = new Set<string>();
+  if (!userId) return out;
+  for (const f of follows) if (f.followerId === userId) out.add(f.followingId);
+  return out;
+}
+
+/**
+ * The home feed: posts by the people you follow and your own, newest first.
+ * Someone who follows nobody yet sees every post, so a new account does not
+ * open on an empty page.
+ */
+export function homeFeed(posts: Post[], following: Set<string>, me: string | null | undefined): { posts: Post[]; everyone: boolean } {
+  if (following.size === 0) return { posts: newestFirst(posts), everyone: true };
+  return {
+    posts: newestFirst(posts.filter((p) => following.has(p.authorId) || p.authorId === me)),
+    everyone: false,
+  };
+}
+
+/** Accounts to suggest: not you, not already followed, most followed first. */
+export function suggestions(
+  profiles: Profile[],
+  follows: Follow[],
+  following: Set<string>,
+  me: string | null | undefined,
+  limit = 5,
+): Profile[] {
+  const followers = new Map<string, number>();
+  for (const f of follows) followers.set(f.followingId, (followers.get(f.followingId) ?? 0) + 1);
+  return profiles
+    .filter((p) => p.userId !== me && !following.has(p.userId))
+    .sort((a, b) => (followers.get(b.userId) ?? 0) - (followers.get(a.userId) ?? 0) || a.username.localeCompare(b.username))
+    .slice(0, limit);
+}
+
+/** People who posted in the last `hours`, most recent first, one entry each. */
+export function recentPosters(posts: Post[], now: number = Date.now(), hours = 48): string[] {
+  const cutoff = now - hours * HOUR;
+  const seen = new Set<string>();
+  const out: string[] = [];
+  for (const post of newestFirst(posts)) {
+    if (Date.parse(post.createdAt) < cutoff) break;
+    if (seen.has(post.authorId)) continue;
+    seen.add(post.authorId);
+    out.push(post.authorId);
+  }
+  return out;
+}
+
+export function countBy<T>(rows: T[], key: (row: T) => string): Map<string, number> {
+  const out = new Map<string, number>();
+  for (const row of rows) {
+    const k = key(row);
+    out.set(k, (out.get(k) ?? 0) + 1);
+  }
+  return out;
+}
+
+export function groupBy<T>(rows: T[], key: (row: T) => string): Map<string, T[]> {
+  const out = new Map<string, T[]>();
+  for (const row of rows) {
+    const k = key(row);
+    const list = out.get(k);
+    if (list) list.push(row);
+    else out.set(k, [row]);
+  }
+  return out;
+}
+
+/** A photo URL a post may use: an uploaded file, a file in public/, or https. */
+export function isPostImageUrl(url: string): boolean {
+  if (url.startsWith("/api/files/") || url.startsWith("/images/")) return !url.includes("..");
+  try {
+    return new URL(url).protocol === "https:";
+  } catch {
+    return false;
+  }
+}

package/templates/consumer/tests/social.test.ts

@@ -0,0 +1,157 @@
+import { describe, expect, test } from "bun:test";
+import {
+  formatCount,
+  homeFeed,
+  isPostImageUrl,
+  normalizeUsername,
+  recentPosters,
+  splitMentions,
+  starterUsername,
+  suggestions,
+  timeAgo,
+  usernameProblem,
+  type Follow,
+  type Post,
+  type Profile,
+} from "../lib/social";
+import { SEED_COMMENTS, SEED_FOLLOWS, SEED_POSTS, SEED_PROFILES, likersOf, shapeSeed } from "../lib/seed";
+
+const NOW = Date.parse("2026-09-17T12:00:00Z");
+const hoursAgo = (h: number) => new Date(NOW - h * 3_600_000).toISOString();
+const post = (id: string, authorId: string, h: number): Post => ({ id, authorId, imageUrl: `/images/posts/${id}.jpg`, createdAt: hoursAgo(h) });
+const profile = (userId: string, username: string): Profile => ({ id: `p_${userId}`, userId, username, displayName: username });
+const follow = (followerId: string, followingId: string): Follow => ({ id: `${followerId}>${followingId}`, followerId, followingId });
+
+describe("usernames", () => {
+  test("accepts the usual shapes and explains refusals", () => {
+    for (const ok of ["mara.bakes", "june_surfs", "abc", "a1.b2_c3"]) expect(usernameProblem(ok)).toBeNull();
+    expect(usernameProblem("ab")).toContain("at least");
+    expect(usernameProblem("x".repeat(31))).toContain("at most");
+    expect(usernameProblem("has space")).toContain("letters");
+    expect(usernameProblem("Upper")).toContain("letters");
+    expect(usernameProblem(".dot")).toContain("start or end");
+    expect(usernameProblem("dot.")).toContain("start or end");
+    expect(usernameProblem("two..dots")).toContain("two periods");
+  });
+
+  test("normalizes input and starts new accounts on a valid, stable name", () => {
+    expect(normalizeUsername("  @Mara.Bakes ")).toBe("mara.bakes");
+    const name = starterUsername("guest_4f2a9c");
+    expect(name).toBe(starterUsername("guest_4f2a9c"));
+    expect(name).not.toBe(starterUsername("guest_4f2a9d"));
+    expect(usernameProblem(name)).toBeNull();
+  });
+});
+
+describe("labels", () => {
+  test("counts", () => {
+    expect(formatCount(0)).toBe("0");
+    expect(formatCount(1204)).toBe("1,204");
+    expect(formatCount(12_500)).toBe("12.5K");
+    expect(formatCount(40_000)).toBe("40K");
+    expect(formatCount(3_400_000)).toBe("3.4M");
+  });
+
+  test("ages", () => {
+    expect(timeAgo(hoursAgo(0), NOW)).toBe("now");
+    expect(timeAgo(new Date(NOW - 5 * 60_000).toISOString(), NOW)).toBe("5m");
+    expect(timeAgo(hoursAgo(3), NOW)).toBe("3h");
+    expect(timeAgo(hoursAgo(50), NOW)).toBe("2d");
+    expect(timeAgo(hoursAgo(24 * 15), NOW)).toBe("2w");
+    expect(timeAgo("2026-03-04T10:00:00Z", NOW)).toBe("Mar 4");
+    expect(timeAgo("2024-03-04T10:00:00Z", NOW)).toBe("Mar 4, 2024");
+    expect(timeAgo("not a date", NOW)).toBe("");
+  });
+
+  test("mentions become links only when the name is valid", () => {
+    expect(splitMentions("thanks @nora.h and @biscuit.corgi.")).toEqual([
+      { kind: "text", text: "thanks " },
+      { kind: "mention", username: "nora.h" },
+      { kind: "text", text: " and " },
+      { kind: "mention", username: "biscuit.corgi" },
+      { kind: "text", text: "." },
+    ]);
+    expect(splitMentions("email me@x or @ab")).toEqual([{ kind: "text", text: "email me@x or @ab" }]);
+  });
+
+  test("post images: uploads, public files, or https only", () => {
+    expect(isPostImageUrl("/api/files/abc123")).toBe(true);
+    expect(isPostImageUrl("/images/posts/a.jpg")).toBe(true);
+    expect(isPostImageUrl("https://cdn.example.com/a.jpg")).toBe(true);
+    expect(isPostImageUrl("http://cdn.example.com/a.jpg")).toBe(false);
+    expect(isPostImageUrl("javascript:alert(1)")).toBe(false);
+    expect(isPostImageUrl("/images/../app.ts")).toBe(false);
+    expect(isPostImageUrl("")).toBe(false);
+  });
+});
+
+describe("who sees what", () => {
+  const posts = [post("a", "u1", 1), post("b", "u2", 2), post("c", "me", 3), post("d", "u3", 100)];
+
+  test("someone who follows nobody sees everything", () => {
+    const feed = homeFeed(posts, new Set(), "me");
+    expect(feed.everyone).toBe(true);
+    expect(feed.posts.map((p) => p.id)).toEqual(["a", "b", "c", "d"]);
+  });
+
+  test("otherwise the people you follow and yourself, newest first", () => {
+    const feed = homeFeed(posts, new Set(["u2", "u3"]), "me");
+    expect(feed.everyone).toBe(false);
+    expect(feed.posts.map((p) => p.id)).toEqual(["b", "c", "d"]);
+  });
+
+  test("suggestions skip you and people you follow, most followed first", () => {
+    const profiles = [profile("me", "me.me"), profile("u1", "zed"), profile("u2", "amy"), profile("u3", "bob")];
+    const follows = [follow("u1", "u3"), follow("u2", "u3"), follow("u3", "u1"), follow("me", "u2")];
+    const out = suggestions(profiles, follows, new Set(["u2"]), "me");
+    expect(out.map((p) => p.userId)).toEqual(["u3", "u1"]);
+  });
+
+  test("recent posters are unique and inside the window", () => {
+    const list = [post("a", "u1", 1), post("b", "u1", 2), post("c", "u2", 5), post("d", "u3", 60)];
+    expect(recentPosters(list, NOW, 48)).toEqual(["u1", "u2"]);
+  });
+});
+
+describe("demo data", () => {
+  const usernames = new Set(SEED_PROFILES.map((p) => p.username));
+
+  test("every username is valid and every reference points at a real row", () => {
+    for (const u of usernames) expect(usernameProblem(u)).toBeNull();
+    const keys = new Set(SEED_POSTS.map((p) => p.key));
+    expect(keys.size).toBe(SEED_POSTS.length);
+    for (const p of SEED_POSTS) expect(usernames.has(p.author)).toBe(true);
+    for (const c of SEED_COMMENTS) {
+      expect(keys.has(c.post)).toBe(true);
+      expect(usernames.has(c.author)).toBe(true);
+    }
+    for (const [from, tos] of Object.entries(SEED_FOLLOWS)) {
+      expect(usernames.has(from)).toBe(true);
+      for (const to of tos) {
+        expect(usernames.has(to)).toBe(true);
+        expect(to).not.toBe(from);
+      }
+    }
+  });
+
+  test("likes: four to eleven people, never the author, no one twice", () => {
+    for (const p of SEED_POSTS) {
+      const likers = likersOf(p);
+      expect(likers.length).toBeGreaterThanOrEqual(4);
+      expect(likers.length).toBeLessThanOrEqual(11);
+      expect(likers).not.toContain(p.author);
+      expect(new Set(likers).size).toBe(likers.length);
+    }
+  });
+
+  test("shaped rows are dated in the past relative to now", () => {
+    const seed = shapeSeed(NOW);
+    expect(seed.profiles).toHaveLength(SEED_PROFILES.length);
+    for (const row of [...seed.posts.map((p) => p.row), ...seed.likes.map((l) => l.row), ...seed.comments.map((c) => c.row)]) {
+      expect(Date.parse(String(row.createdAt))).toBeLessThanOrEqual(NOW);
+    }
+    // A comment never predates its post.
+    const postTime = new Map(seed.posts.map((p) => [p.key, Date.parse(String(p.row.createdAt))]));
+    for (const c of seed.comments) expect(Date.parse(String(c.row.createdAt))).toBeGreaterThanOrEqual(postTime.get(c.post)!);
+  });
+});

package/templates/creator/AGENTS.md

@@ -65,7 +65,7 @@ this pass before the user has to ask.
 - **`ctx.llm.stream(request, onEvent)` streams tokens as they generate** and still resolves with the full response, so `stop_reason === "tool_use"` drives an agent tool loop. Events are `text_delta` / `tool_use_start` / `tool_input_delta` / `done`. Same auth + model-allowlist gating as `ctx.llm.complete`. Streaming does NOT extend the call deadline (`PYLON_FN_CALL_TIMEOUT`, 30s default) — set `timeout: <secs>` on the def for a long run.
 - **`ctx.stream.write(text)` streams to the caller — and every fn stream is RESUMABLE**: the server buffers frames under a stream id (`streamFn`'s `onStreamId`), so a dropped connection or closed tab catches up via `resumeStream(id)`, including the final result after the handler finished. `ctx.rooms.broadcast(room, topic, data)` fans out to every CURRENTLY-CONNECTED subscriber (second device, second tab) but does not replay missed messages — use the stream id for anything that must survive a gap. Broadcast resolves `{ delivered: false }` when the room has no members — a no-op, not an error. Clients receive with `useRoomMessages(room, cb)` from `@pylonsync/react`; `useRoom` is the send side.
 - **It's `db.useQueryOne`, not `useOne`.** Validators and field types have aliases: `v.bool`/`v.boolean`, `v.float`/`v.number`.
-- **Use the supported file and scheduling APIs.** Files go through `<FileUpload>` and `/api/files/*`; there is no `ctx.files`. One-shot work uses `ctx.scheduler.runAfter`, `runAt`, or `cancel`; there is no `defineWorkflow` or `defineJob`. Recurring work uses `cron("0 * * * *", "fnName")` in `buildManifest({ crons: [...] })`, imported from `@pylonsync/sdk`. Make the target function `internal: true`. It runs with anonymous auth, but its own `ctx.db.*` calls are server-side and bypass policies. Use `ctx.auth.elevate({ admin: true, reason: "..." })`, with a mandatory reason, only when chaining another internal function through `ctx.scheduler`.
+- **Use the supported file and scheduling APIs.** Files go through `<FileUpload>` and `/api/files/*`; an upload is readable by its uploader only, so pass `visibility: "public"` to `uploadFile` or `<FileUpload>` for files every visitor sees; there is no `ctx.files`. One-shot work uses `ctx.scheduler.runAfter`, `runAt`, or `cancel`; there is no `defineWorkflow` or `defineJob`. Recurring work uses `cron("0 * * * *", "fnName")` in `buildManifest({ crons: [...] })`, imported from `@pylonsync/sdk`. Make the target function `internal: true`. It runs with anonymous auth, but its own `ctx.db.*` calls are server-side and bypass policies. Use `ctx.auth.elevate({ admin: true, reason: "..." })`, with a mandatory reason, only when chaining another internal function through `ctx.scheduler`.
 
 ## Testing
 

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

@@ -1,15 +1,16 @@
 import React from "react";
 import { Link, type PageAuth } from "@pylonsync/react";
 import { siteConfig } from "@/lib/site.config";
+import { WRAP } from "@/components/marketing";
 
 // `(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.
+// only the pages inside the group: the name up top, 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;
@@ -17,36 +18,25 @@ interface LayoutProps {
 
 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".
+  // `guest_…` user id. That is an anonymous visitor, not the signed-in owner,
+  // so it must not 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>
+    <div className="font-display flex min-h-screen flex-1 flex-col bg-paper text-ink">
+      <header>
+        <div className={`${WRAP} flex h-16 items-center justify-between`}>
+          <Link href="/" className="text-[17px] font-medium text-ink">
+            {brand.name}
           </Link>
-          <nav className="flex items-center gap-2">
+          <nav>
             {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"
-              >
+              <Link href="/dashboard" className="text-[16px] text-ink-2 hover:text-ink">
                 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"
-              >
+              <Link href="/login" className="text-[16px] text-ink-2 hover:text-ink">
                 Sign in
               </Link>
             )}
@@ -57,61 +47,37 @@ export default function MarketingLayout({ children, auth }: LayoutProps) {
       <main className="flex-1">{children}</main>
 
       <SiteFooter />
-    </>
+    </div>
   );
 }
 
 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>
+    <footer>
+      <div className={`${WRAP} border-t border-rule py-10 text-[15px] text-ink-2`}>
+        <p className="max-w-md leading-relaxed">{brand.footerBlurb}</p>
+        <ul className="mt-5 flex flex-wrap gap-x-5 gap-y-2">
+          {brand.socials.map((s) => (
+            <li key={s.label}>
+              <a href={s.href} className="underline decoration-rule underline-offset-4 hover:text-ink">
+                {s.label}
               </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>
+            </li>
+          ))}
+          <li>
+            <a href={`mailto:${brand.email}`} className="underline decoration-rule underline-offset-4 hover:text-ink">
+              {brand.email}
             </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">
+          </li>
+        </ul>
+        <div className="mt-8 flex flex-col gap-1 text-[14px] sm:flex-row sm:justify-between">
           <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">
+            <a href="https://pylonsync.com" className="underline decoration-rule underline-offset-4 hover:text-ink">
               Pylon
             </a>
           </span>

package/templates/creator/app/(marketing)/newsletter-signup.tsx

@@ -22,7 +22,7 @@ export function NewsletterSignup({ newsletter }: Props) {
   return (
     <div>
       <SubscribeForm newsletter={newsletter} />
-      <div className="mt-5">
+      <div className="mt-3">
         <LiveCounter seed={newsletter.seedCount ?? 0} label={newsletter.counterLabel} />
       </div>
     </div>
@@ -52,7 +52,7 @@ function SubscribeForm({ newsletter }: Props) {
       setError(
         /valid email|INVALID_ARGS/i.test(msg)
           ? "Enter a valid email address."
-          : "Something went wrong — try again in a moment.",
+          : "Something went wrong. Try again in a moment.",
       );
       setStatus("idle");
     }
@@ -60,17 +60,15 @@ function SubscribeForm({ newsletter }: Props) {
 
   if (status === "done") {
     return (
-      <div className="rounded-xl border border-brand/30 bg-brand-soft/50 px-5 py-4">
-        <p className="text-[15px] font-medium text-zinc-900">
-          {alreadyJoined ? "You're already subscribed." : newsletter.successMessage}
-        </p>
-      </div>
+      <p className="border-l-2 border-brand pl-4 text-[17.5px] leading-[1.65] text-ink">
+        {alreadyJoined ? "You are already subscribed." : newsletter.successMessage}
+      </p>
     );
   }
 
   return (
     <form onSubmit={onSubmit} className="max-w-md">
-      <div className="flex flex-col gap-2 sm:flex-row">
+      <div className="flex gap-2">
         <input
           type="email"
           inputMode="email"
@@ -80,21 +78,19 @@ function SubscribeForm({ newsletter }: Props) {
           placeholder={newsletter.emailPlaceholder}
           aria-label="Email address"
           required
-          className="h-11 flex-1 rounded-full border border-zinc-300 bg-white px-4 text-[15px] text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20"
+          className="h-11 min-w-0 flex-1 rounded-md border border-rule bg-white px-3.5 text-[16px] text-ink outline-none transition placeholder:text-ink-2/60 focus:border-brand focus:ring-2 focus:ring-brand/20"
         />
         <button
           type="submit"
           disabled={status === "sending"}
-          className="inline-flex h-11 items-center justify-center rounded-full bg-brand px-6 text-[15px] font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-60"
+          className="inline-flex h-11 shrink-0 items-center justify-center rounded-md bg-brand px-5 text-[16px] font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-60"
         >
           {status === "sending" ? "Subscribing…" : newsletter.ctaLabel}
         </button>
       </div>
       {error ? (
-        <p className="mt-2 text-[13px] text-red-600">{error}</p>
-      ) : (
-        <p className="mt-2 text-[13px] text-zinc-400">One email a week. Unsubscribe anytime.</p>
-      )}
+        <p className="mt-2 text-[15px] text-red-700">{error}</p>
+      ) : null}
     </form>
   );
 }
@@ -118,21 +114,14 @@ function LiveCounterInner({ seed, label }: { seed: number; label: string }) {
   return <CounterView value={seed + real} label={label} live={!loading} />;
 }
 
+// Plain text under the form. The fallback shows the seed until the guest
+// session connects; `live` is set once the count is synced.
 function CounterView({ value, label, live }: { value: number; label: string; live?: boolean }) {
   const shown = useCountUp(value);
   return (
-    <div className="inline-flex items-center gap-2.5 text-[14px] text-zinc-500">
-      {live ? (
-        <span className="relative flex size-2">
-          <span className="absolute inline-flex size-2 animate-ping rounded-full bg-brand/70" />
-          <span className="relative inline-flex size-2 rounded-full bg-brand" />
-        </span>
-      ) : (
-        <span className="inline-flex size-2 rounded-full bg-zinc-300" />
-      )}
-      <span className="font-semibold tabular-nums text-zinc-900">{shown.toLocaleString()}</span>
-      {label}
-    </div>
+    <p className="text-[15px] text-ink-2" data-live={live ? "true" : undefined}>
+      <span className="tabular-nums text-ink">{shown.toLocaleString()}</span> {label}
+    </p>
   );
 }