@pylonsync/create-pylon 0.19.1 → 0.21.0

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

@@ -3,13 +3,27 @@
 import React, { useEffect, useState } from "react";
 import { db, callFn } from "@pylonsync/react";
 import { useAuth } from "@pylonsync/client";
-import { parseTags, type SubmissionRow, type OwnerSubmissionsResult } from "@/lib/directory";
+import { ArrowUpRight, Check, LogOut, X } from "lucide-react";
+import {
+  monogram,
+  parseTags,
+  type SubmissionRow,
+  type OwnerSubmissionsResult,
+} from "@/lib/directory";
 
 // The curator's moderation queue. Liveness rides the public Listing table:
 // `db.useQuery("Listing")` re-renders when listings change (approving a
 // submission creates one), and that same signal re-fetches the owner-gated
-// `submissionsForOwner` — so the queue stays current without a reload, while
+// `submissionsForOwner`, so the queue stays current without a reload, while
 // submitter PII only ever travels through the gated call.
+type Filter = "new" | "approved" | "rejected";
+
+const FILTERS: { id: Filter; label: string }[] = [
+  { id: "new", label: "Pending" },
+  { id: "approved", label: "Approved" },
+  { id: "rejected", label: "Rejected" },
+];
+
 export function DirectoryDashboard({ userEmail }: { userEmail: string }) {
   const { data: listings } = db.useQuery<{ id: string }>("Listing");
   const liveCount = listings.length;
@@ -18,6 +32,8 @@ export function DirectoryDashboard({ userEmail }: { userEmail: string }) {
   const [denied, setDenied] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [busyId, setBusyId] = useState<string | null>(null);
+  const [filter, setFilter] = useState<Filter>("new");
+  const [seedDone, setSeedDone] = useState(false);
 
   async function load() {
     try {
@@ -33,10 +49,20 @@ export function DirectoryDashboard({ userEmail }: { userEmail: string }) {
     }
   }
 
+  // In `pylon dev` an empty queue gets demo submissions (functions/seedDemo.ts)
+  // before the first load. On a deploy, or for a non-owner, the call writes
+  // nothing.
   useEffect(() => {
+    void callFn("seedDemo", {})
+      .catch(() => {})
+      .finally(() => setSeedDone(true));
+  }, []);
+
+  useEffect(() => {
+    if (!seedDone) return;
     void load();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [liveCount]);
+  }, [liveCount, seedDone]);
 
   async function act(id: string, fn: "approveSubmission" | "rejectSubmission") {
     setBusyId(id);
@@ -50,113 +76,170 @@ export function DirectoryDashboard({ userEmail }: { userEmail: string }) {
 
   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>;
+    return <div className="border border-red-200 bg-red-50 px-5 py-4 text-sm text-red-700">{error}</div>;
   }
   if (!submissions) return <Skeleton />;
 
-  const pending = submissions.filter((s) => s.status === "new");
-  const approved = submissions.filter((s) => s.status === "approved").length;
+  const counts: Record<Filter, number> = { new: 0, approved: 0, rejected: 0 };
+  for (const s of submissions) {
+    if (s.status === "new" || s.status === "approved" || s.status === "rejected") counts[s.status]++;
+  }
+  const shown = submissions.filter((s) => s.status === filter);
 
   return (
     <div className="space-y-8">
       <div>
-        <h1 className="text-xl font-semibold tracking-tight">Submissions</h1>
-        <p className="mt-1 text-sm text-zinc-500">
-          Live — new submissions land here; approving one publishes it to the directory instantly.
+        <h1 className="text-[1.75rem] font-semibold leading-tight tracking-[-0.02em] text-zinc-900 sm:text-[2rem]">
+          Review queue
+        </h1>
+        <p className="mt-2 max-w-xl text-[14px] leading-relaxed text-zinc-600">
+          New submissions land here. Approving one publishes it to the directory right away.
         </p>
       </div>
 
-      <div className="grid gap-4 sm:grid-cols-3">
-        <Stat label="Pending" value={String(pending.length)} />
-        <Stat label="Approved" value={String(approved)} />
-        <Stat label="Live listings" value={String(liveCount)} />
-      </div>
+      <dl className="grid grid-cols-3 divide-x divide-zinc-200 border-y border-zinc-200">
+        <Stat label="Pending" value={counts.new} accent={counts.new > 0} />
+        <Stat label="Approved" value={counts.approved} />
+        <Stat label="Live listings" value={liveCount} />
+      </dl>
 
-      <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">
-          Queue <span className="font-normal text-zinc-400">({submissions.length})</span>
+      <section>
+        <div className="flex items-center gap-4 border-b border-zinc-200">
+          {FILTERS.map((f) => (
+            <button
+              key={f.id}
+              type="button"
+              onClick={() => setFilter(f.id)}
+              aria-pressed={filter === f.id}
+              className={
+                "-mb-px border-b-2 pb-2 text-[14px] transition-colors " +
+                (filter === f.id
+                  ? "border-zinc-900 font-medium text-zinc-900"
+                  : "border-transparent text-zinc-500 hover:text-zinc-900")
+              }
+            >
+              {f.label} <span className="font-mono text-[12px] text-zinc-400">{counts[f.id]}</span>
+            </button>
+          ))}
         </div>
-        {submissions.length === 0 ? (
-          <p className="p-8 text-center text-sm text-zinc-500">No submissions yet.</p>
+
+        {shown.length === 0 ? (
+          <p className="py-12 text-center text-[14px] text-zinc-500">
+            {filter === "new"
+              ? "Nothing to review. New submissions appear here as they arrive."
+              : `No ${filter} submissions.`}
+          </p>
         ) : (
-          <ul className="divide-y divide-zinc-100">
-            {submissions.map((s) => (
-              <li key={s.id} className="px-4 py-3.5">
-                <div className="flex flex-wrap items-start justify-between gap-x-4 gap-y-2">
-                  <div className="min-w-0 flex-1">
-                    <div className="flex flex-wrap items-center gap-2">
-                      <a href={s.url} target="_blank" rel="noopener noreferrer" className="text-[14px] font-medium text-zinc-900 hover:text-brand">
-                        {s.name}
-                      </a>
-                      <span className="rounded-full bg-zinc-100 px-2 py-0.5 text-[11px] font-medium text-zinc-500">{s.category}</span>
-                      <StatusBadge status={s.status} />
-                    </div>
-                    {s.tagline ? <p className="mt-1 text-[13.5px] text-zinc-600">{s.tagline}</p> : null}
-                    <div className="mt-1 truncate text-[12px] text-zinc-400">
-                      {s.submitterName} · {s.submitterEmail}
-                      {parseTags(s.tags).length ? ` · ${parseTags(s.tags).map((t) => "#" + t).join(" ")}` : ""}
-                    </div>
-                  </div>
-                  {s.status === "new" ? (
-                    <div className="flex items-center gap-2">
-                      <button
-                        type="button"
-                        disabled={busyId === s.id}
-                        onClick={() => act(s.id, "approveSubmission")}
-                        className="rounded-md bg-brand px-3 py-1.5 text-[12.5px] font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-50"
-                      >
-                        {busyId === s.id ? "…" : "Approve"}
-                      </button>
-                      <button
-                        type="button"
-                        disabled={busyId === s.id}
-                        onClick={() => act(s.id, "rejectSubmission")}
-                        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"
-                      >
-                        Reject
-                      </button>
-                    </div>
-                  ) : null}
-                </div>
-              </li>
+          <ul>
+            {shown.map((s) => (
+              <QueueItem key={s.id} s={s} busy={busyId === s.id} onAct={act} />
             ))}
           </ul>
         )}
-      </div>
+      </section>
     </div>
   );
 }
 
-function Stat({ label, value }: { label: string; value: string }) {
+function QueueItem({
+  s,
+  busy,
+  onAct,
+}: {
+  s: SubmissionRow;
+  busy: boolean;
+  onAct: (id: string, fn: "approveSubmission" | "rejectSubmission") => void;
+}) {
+  const m = monogram(s.name);
+  const tags = parseTags(s.tags);
   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>
+    <li className="grid grid-cols-[36px_minmax(0,1fr)] gap-x-3 gap-y-3 border-b border-zinc-200 py-4 sm:grid-cols-[36px_minmax(0,1fr)_auto]">
+      <span
+        aria-hidden
+        className="flex size-9 items-center justify-center rounded-md font-mono text-[13px] font-semibold"
+        style={{ backgroundColor: m.bg, color: m.fg }}
+      >
+        {m.letters}
+      </span>
+      <div className="min-w-0">
+        <div className="flex flex-wrap items-baseline gap-x-2">
+          <a
+            href={s.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1 text-[15px] font-semibold text-zinc-900 hover:text-brand"
+          >
+            {s.name}
+            <ArrowUpRight aria-hidden className="size-3.5 text-zinc-400" />
+          </a>
+          <span className="font-mono text-[12px] text-zinc-400">{s.category}</span>
+        </div>
+        <p className="mt-0.5 text-[14px] leading-snug text-zinc-700">{s.tagline}</p>
+        {s.description ? (
+          <p className="mt-1 max-w-2xl text-[13px] leading-relaxed text-zinc-500">{s.description}</p>
+        ) : null}
+        <p className="mt-1.5 truncate font-mono text-[12px] text-zinc-400">
+          {s.submitterName} · {s.submitterEmail} · {ago(s.createdAt)}
+          {tags.length ? ` · ${tags.join(", ")}` : ""}
+        </p>
+      </div>
+      {s.status === "new" ? (
+        <div className="col-start-2 flex items-center gap-2 sm:col-start-3 sm:self-start">
+          <button
+            type="button"
+            disabled={busy}
+            onClick={() => onAct(s.id, "approveSubmission")}
+            className="inline-flex h-8 items-center gap-1.5 bg-brand px-3 text-[13px] font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-50"
+          >
+            <Check aria-hidden className="size-3.5" />
+            Approve
+          </button>
+          <button
+            type="button"
+            disabled={busy}
+            onClick={() => onAct(s.id, "rejectSubmission")}
+            className="inline-flex h-8 items-center gap-1.5 border border-zinc-300 px-3 text-[13px] font-medium text-zinc-600 transition-colors hover:border-zinc-500 hover:text-zinc-900 disabled:opacity-50"
+          >
+            <X aria-hidden className="size-3.5" />
+            Reject
+          </button>
+        </div>
+      ) : null}
+    </li>
   );
 }
 
-function StatusBadge({ status }: { status: string }) {
-  const tone =
-    status === "approved"
-      ? "bg-green-50 text-green-700"
-      : status === "rejected"
-        ? "bg-zinc-100 text-zinc-400"
-        : "bg-amber-50 text-amber-700"; // new
-  const label = status === "new" ? "pending" : status;
-  return <span className={"rounded-full px-2 py-0.5 text-[10px] font-medium capitalize " + tone}>{label}</span>;
+function ago(iso: string): string {
+  const mins = Math.max(0, Math.round((Date.now() - Date.parse(iso)) / 60_000));
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.round(mins / 60);
+  if (hours < 48) return `${hours}h ago`;
+  return `${Math.round(hours / 24)}d ago`;
+}
+
+function Stat({ label, value, accent }: { label: string; value: number; accent?: boolean }) {
+  return (
+    <div className="px-4 py-4 first:pl-0">
+      <dt className="text-[12px] font-medium uppercase tracking-wide text-zinc-500">{label}</dt>
+      <dd className={"mt-1 font-mono text-[1.75rem] leading-none tabular-nums " + (accent ? "text-brand" : "text-zinc-900")}>
+        {value}
+      </dd>
+    </div>
+  );
 }
 
 function OwnerOnly({ email }: { email: string }) {
   return (
-    <div className="rounded-xl border border-dashed border-zinc-300 px-6 py-12 text-center">
+    <div className="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 curator can review submissions. Set{" "}
-        <code className="rounded bg-zinc-100 px-1.5 py-0.5 text-[12px]">PYLON_OWNER_EMAIL={email || "you@yourdirectory.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.
+        You are signed in as <span className="font-medium text-zinc-700">{email || "this account"}</span>.
+        Only the directory owner can review submissions. Set{" "}
+        <code className="bg-zinc-100 px-1.5 py-0.5 font-mono text-[12px]">
+          PYLON_OWNER_EMAIL={email || "you@yourdirectory.com"}
+        </code>{" "}
+        in <code className="bg-zinc-100 px-1.5 py-0.5 font-mono text-[12px]">.env</code>, restart, and
+        reload. Or sign in with the owner account.
       </p>
     </div>
   );
@@ -171,18 +254,22 @@ export function UserMenu({ email }: { email: string }) {
   }
   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">
+      <summary
+        aria-label="Account"
+        className="flex size-7 cursor-pointer select-none list-none items-center justify-center bg-zinc-900 font-mono 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 className="absolute right-0 top-full z-40 mt-2 w-60 border border-zinc-200 bg-white py-1 shadow-[0_16px_40px_-20px_rgba(0,0,0,0.3)]">
+        <div className="truncate border-b border-zinc-100 px-3 py-2 font-mono text-[12px] text-zinc-700">
+          {email || "Signed in"}
         </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"
+          className="flex w-full items-center gap-2 px-3 py-2 text-left text-[13px] text-zinc-700 transition-colors hover:bg-zinc-50"
         >
+          <LogOut aria-hidden className="size-3.5" />
           Sign out
         </button>
       </div>
@@ -193,13 +280,13 @@ export function UserMenu({ email }: { email: string }) {
 function Skeleton() {
   return (
     <div className="space-y-8">
-      <div className="h-6 w-32 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 className="h-8 w-48 animate-pulse bg-zinc-100" />
+      <div className="h-20 animate-pulse bg-zinc-50" />
+      <div className="space-y-3">
+        {[0, 1, 2, 3].map((i) => (
+          <div key={i} className="h-16 animate-pulse bg-zinc-50" />
         ))}
       </div>
-      <div className="h-48 animate-pulse rounded-xl bg-zinc-100" />
     </div>
   );
 }

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

@@ -1,6 +1,8 @@
 import React, { use } from "react";
 import { Link, type Metadata, type PageProps } from "@pylonsync/react";
+import { ArrowUpRight } from "lucide-react";
 import { siteConfig } from "@/lib/site.config";
+import { WRAP } from "@/components/marketing";
 import { UserMenu, DirectoryDashboard } from "./dashboard-client";
 
 export const metadata: Metadata = {
@@ -35,35 +37,35 @@ export default function DashboardPage({ auth, response, serverData }: PageProps)
   );
 }
 
-// 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).
+// Dashboard chrome in the site's own look: the same slim white nav with the
+// directory name, a link back to the 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">/ curator</span>
-            </span>
+        <div className={`${WRAP} flex h-12 items-center justify-between`}>
+          <div className="flex items-baseline gap-2.5">
+            <Link href="/" className="text-[15px] font-semibold text-zinc-900">
+              {brand.name}
+            </Link>
+            <span className="font-mono text-[12px] text-zinc-400">curator</span>
           </div>
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-5">
             <Link
               href="/"
-              className="text-[13px] text-zinc-500 transition-colors hover:text-zinc-900"
+              className="hidden items-center gap-1 text-[14px] text-zinc-600 hover:text-zinc-900 sm:inline-flex"
             >
-              View site ↗
+              View site
+              <ArrowUpRight aria-hidden className="size-3.5" />
             </Link>
             <UserMenu email={email} />
           </div>
         </div>
       </header>
       <main className="flex-1">
-        <div className="mx-auto max-w-4xl px-6 py-8">{children}</div>
+        <div className={`${WRAP} py-10`}>{children}</div>
       </main>
     </div>
   );

package/templates/directory/app/icon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="12" fill="#1d4ed8"/>
+<rect x="14" y="14" width="36" height="9" rx="2" fill="#ffffff"/>
+<rect x="14" y="27.5" width="28" height="9" rx="2" fill="#ffffff" opacity="0.8"/>
+<rect x="14" y="41" width="20" height="9" rx="2" fill="#ffffff" opacity="0.6"/></svg>

package/templates/directory/app/login/page.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Link, type Metadata, type PageProps } from "@pylonsync/react";
 import { AuthForm } from "../auth-form";
 import { siteConfig } from "@/lib/site.config";
+import { WRAP } from "@/components/marketing";
 
 export const metadata: Metadata = {
   title: `Sign in — ${siteConfig.brand.name}`,
@@ -18,21 +19,21 @@ export default function LoginPage({ auth, response }: PageProps) {
   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 className="flex min-h-screen flex-col bg-white text-zinc-900">
+      <div className="border-b border-zinc-200">
+        <div className={`${WRAP} flex h-12 items-center`}>
+          <Link href="/" className="text-[15px] font-semibold">
+            {brand.name}
+          </Link>
+        </div>
+      </div>
+      <div className="flex flex-1 items-center justify-center px-5 py-16">
+        <div className="w-full max-w-[380px]">
+          <h1 className="text-[1.75rem] font-semibold tracking-[-0.02em]">Curator sign in</h1>
+          <p className="mt-2 text-[14px] text-zinc-600">Review submissions and publish them to {brand.name}.</p>
+          <div className="mt-8 border border-zinc-200 p-6">
+            <AuthForm />
+          </div>
         </div>
       </div>
     </div>

package/templates/directory/functions/seedDemo.ts

@@ -0,0 +1,43 @@
+import { mutation } from "@pylonsync/functions";
+import { emailMatchesOwner } from "../lib/owner";
+import { DEMO_SUBMISSIONS, demoDataEnabled } from "../lib/demo";
+
+// seedDemo — owner-only, development-only. Fills an empty review queue with the
+// fictional submissions in lib/demo.ts, so the curator dashboard has entries.
+//
+// It writes nothing unless demo data is on (lib/demo.ts: PYLON_DEMO_DATA, else
+// a `pylon dev` process), so `pylon start`, Docker, and Pylon Cloud deploys do
+// not get demo rows. It also writes nothing once any Submission exists.
+// Submissions carry submitter emails (PII), so only the signed-in owner can run
+// it, like the rest of the curator surface.
+export default mutation<Record<string, never>, { seeded: boolean }>({
+  auth: "user",
+  async handler(ctx) {
+    const me = await ctx.db.get("User", ctx.auth.userId);
+    if (!emailMatchesOwner(me?.email as string | undefined, ctx.env.PYLON_OWNER_EMAIL)) {
+      throw ctx.error("POLICY_DENIED", "Only the owner can seed the review queue.");
+    }
+    if (!demoDataEnabled(ctx.env)) return { seeded: false };
+
+    await ctx.db.advisoryLock("directory_seed_demo");
+    const existing = await ctx.db.unsafe.list("Submission");
+    if (existing.length > 0) return { seeded: false };
+
+    const nowMs = Date.now();
+    for (const s of DEMO_SUBMISSIONS) {
+      await ctx.db.unsafe.insert("Submission", {
+        submitterName: s.submitterName,
+        submitterEmail: s.submitterEmail,
+        name: s.name,
+        tagline: s.tagline,
+        url: s.url,
+        category: s.category,
+        tags: s.tags,
+        description: s.description || null,
+        status: s.status,
+        createdAt: new Date(nowMs - s.hoursAgo * 3_600_000).toISOString(),
+      });
+    }
+    return { seeded: true };
+  },
+});

package/templates/directory/lib/demo.ts

@@ -0,0 +1,145 @@
+// Demo review queue for local development.
+//
+// The curator's first dashboard load in `pylon dev` fills an empty Submission
+// table with fictional tool submissions (functions/seedDemo.ts), so the queue
+// has entries to approve or reject. A deploy does not seed: `demoDataEnabled`
+// is true only when PYLON_DEMO_DATA is on, or when it is unset and the process
+// runs under `pylon dev`. Set PYLON_DEMO_DATA=0 to turn it off in development too.
+//
+// The starter listings (functions/seedListings.ts) are different: they are the
+// directory's own content from lib/site.config.ts, so they seed everywhere.
+
+const ON = new Set(["1", "true", "yes", "on"]);
+const OFF = new Set(["0", "false", "no", "off"]);
+
+/**
+ * True when demo rows may be written. An explicit PYLON_DEMO_DATA wins.
+ * Otherwise it needs both PYLON_DEV_MODE on and PYLON_DEV_WATCH_DIR set. Only
+ * `pylon dev` sets PYLON_DEV_WATCH_DIR; `pylon start` and the Docker image do
+ * not, and the image turns PYLON_DEV_MODE on by default, so dev mode alone is
+ * not proof of a local machine.
+ */
+export function demoDataEnabled(env: Record<string, string | undefined>): boolean {
+  const explicit = env.PYLON_DEMO_DATA?.trim().toLowerCase();
+  if (explicit && ON.has(explicit)) return true;
+  if (explicit && OFF.has(explicit)) return false;
+  const dev = env.PYLON_DEV_MODE?.trim().toLowerCase();
+  const devMode = dev === "1" || dev === "true";
+  return devMode && Boolean(env.PYLON_DEV_WATCH_DIR?.trim());
+}
+
+export interface DemoSubmission {
+  submitterName: string;
+  submitterEmail: string;
+  name: string;
+  tagline: string;
+  url: string;
+  category: string;
+  tags: string;
+  description: string;
+  status: "new" | "approved" | "rejected";
+  /** Hours before the seed runs. */
+  hoursAgo: number;
+}
+
+// Fictional tools and submitters. The two "approved" rows name starter
+// listings from lib/site.config.ts, so every approved submission is live.
+// Starter listings added from config have no submission row.
+export const DEMO_SUBMISSIONS: DemoSubmission[] = [
+  {
+    submitterName: "Nadia Haddad",
+    submitterEmail: "nadia@example.com",
+    name: "Querybird",
+    tagline: "Explain plans for Postgres, drawn as a tree you can click through.",
+    url: "https://example.com/querybird",
+    category: "Database",
+    tags: "postgres, performance",
+    description: "Paste a query, get the plan with the slow node marked. Runs in the browser; nothing leaves your machine.",
+    status: "new",
+    hoursAgo: 2,
+  },
+  {
+    submitterName: "Owen Reilly",
+    submitterEmail: "owen@example.com",
+    name: "Flagpost",
+    tagline: "Feature flags stored in your own database, with a small admin UI.",
+    url: "https://example.com/flagpost",
+    category: "DevOps",
+    tags: "feature flags, self-hosted",
+    description: "One table, one SDK call, and an admin page you mount in your app.",
+    status: "new",
+    hoursAgo: 9,
+  },
+  {
+    submitterName: "Hana Sato",
+    submitterEmail: "hana@example.com",
+    name: "Palettier",
+    tagline: "Generate accessible color scales from one brand color.",
+    url: "https://example.com/palettier",
+    category: "Design",
+    tags: "color, accessibility, tokens",
+    description: "Every step is checked for WCAG contrast against white and black. Exports CSS variables and a Figma file.",
+    status: "new",
+    hoursAgo: 26,
+  },
+  {
+    submitterName: "Felix Wagner",
+    submitterEmail: "felix@example.com",
+    name: "Logline",
+    tagline: "Structured logs you can search from the terminal.",
+    url: "https://example.com/logline",
+    category: "DevOps",
+    tags: "logging, cli",
+    description: "Pipe JSON logs in, then filter with a short query language. Keeps a week of history on disk.",
+    status: "new",
+    hoursAgo: 40,
+  },
+  {
+    submitterName: "Isabel Cruz",
+    submitterEmail: "isabel@example.com",
+    name: "Promptdeck",
+    tagline: "Version and diff the prompts your app sends to a model.",
+    url: "https://example.com/promptdeck",
+    category: "AI",
+    tags: "llm, prompts, versioning",
+    description: "Each prompt change gets a version and a side-by-side diff of outputs on your saved test inputs.",
+    status: "new",
+    hoursAgo: 55,
+  },
+  {
+    submitterName: "Ruth Castillo",
+    submitterEmail: "ruth@example.com",
+    name: "Brineway",
+    tagline: "S3-compatible object storage at the edge.",
+    url: "https://example.com/brineway",
+    category: "Hosting",
+    tags: "storage, edge, s3",
+    description: "",
+    status: "approved",
+    hoursAgo: 150,
+  },
+  {
+    submitterName: "Daniel Park",
+    submitterEmail: "daniel@example.com",
+    name: "Countwell",
+    tagline: "Privacy-first product analytics you can self-host.",
+    url: "https://example.com/countwell",
+    category: "Analytics",
+    tags: "analytics, privacy",
+    description: "",
+    status: "approved",
+    hoursAgo: 210,
+  },
+  {
+    submitterName: "Luca Romano",
+    submitterEmail: "luca@example.com",
+    name: "Best AI Tools 2026",
+    tagline: "A list of 500 AI tools.",
+    url: "https://example.com/best-ai-tools",
+    category: "AI",
+    tags: "list",
+    description: "",
+    status: "rejected",
+    hoursAgo: 96,
+  },
+];