@pylonsync/create-pylon 0.11.1 → 0.11.3

package/templates/directory/app/(marketing)/submit-form.tsx

@@ -3,10 +3,11 @@
 import React, { useState } from "react";
 import { callFn } from "@pylonsync/react";
 import { siteConfig } from "@/lib/site.config";
+import { LINK } from "@/components/marketing";
 
 // The "submit a tool" form. submitListing is a public mutation, so it works for
 // anonymous visitors with no session. PRIVACY: the submission (incl. the
-// submitter's email) is written to the deny-all Submission table — it is NOT
+// submitter's email) is written to the deny-all Submission table. It is NOT
 // public and never syncs to a browser. It shows up in the directory only after
 // the owner approves it from the dashboard.
 export function SubmitForm() {
@@ -33,7 +34,7 @@ export function SubmitForm() {
     e.preventDefault();
     if (status === "sending") return;
     if (!form.submitterName.trim() || !form.submitterEmail.trim() || !form.name.trim() || !form.url.trim()) {
-      setError("Your name + email and the tool's name + URL are required.");
+      setError("Your name, your email, the tool name, and the URL are required.");
       return;
     }
     setStatus("sending");
@@ -58,8 +59,8 @@ export function SubmitForm() {
           : /valid URL/i.test(msg)
             ? "Enter a valid URL (https://…)."
             : /INVALID_ARGS/i.test(msg)
-              ? "Please fill in the required fields."
-              : "Something went wrong — try again in a moment.",
+              ? "Fill in the required fields."
+              : "The submission failed. Try again in a moment.",
       );
       setStatus("idle");
     }
@@ -67,10 +68,9 @@ export function SubmitForm() {
 
   if (status === "done") {
     return (
-      <div className="rounded-2xl border border-brand/30 bg-brand-soft/50 px-6 py-10 text-center">
-        <div className="mx-auto flex size-10 items-center justify-center rounded-full bg-brand text-white">✓</div>
-        <p className="mt-3 text-[15px] font-semibold text-zinc-900">{submit.confirmationMessage}</p>
-        <a href="/" className="mt-5 inline-flex h-10 items-center rounded-full border border-zinc-300 px-5 text-sm font-medium text-zinc-700 hover:bg-zinc-50">
+      <div className="border-t border-zinc-200 pt-4">
+        <p className="text-[14px] font-medium text-zinc-900">{submit.confirmationMessage}</p>
+        <a href="/" className={`${LINK} mt-2 inline-block text-[14px]`}>
           Back to the directory
         </a>
       </div>
@@ -78,8 +78,8 @@ export function SubmitForm() {
   }
 
   return (
-    <form onSubmit={onSubmit} className="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm sm:p-7">
-      <div className="grid gap-3 sm:grid-cols-2">
+    <form onSubmit={onSubmit} className="border-t border-zinc-200 pt-5">
+      <div className="grid gap-4 sm:grid-cols-2">
         <Field label="Your name" required>
           <input value={form.submitterName} onChange={set("submitterName")} autoComplete="name" className={inputCls} />
         </Field>
@@ -88,8 +88,8 @@ export function SubmitForm() {
         </Field>
       </div>
 
-      <div className="mt-3 border-t border-zinc-100 pt-4">
-        <div className="grid gap-3 sm:grid-cols-2">
+      <div className="mt-5 border-t border-zinc-200 pt-5">
+        <div className="grid gap-4 sm:grid-cols-2">
           <Field label="Tool name" required>
             <input value={form.name} onChange={set("name")} className={inputCls} />
           </Field>
@@ -101,33 +101,33 @@ export function SubmitForm() {
             </select>
           </Field>
         </div>
-        <div className="mt-3">
+        <div className="mt-4">
           <Field label="URL" required>
-            <input value={form.url} onChange={set("url")} placeholder="https://…" inputMode="url" className={inputCls} />
+            <input value={form.url} onChange={set("url")} placeholder="https://" inputMode="url" className={`${inputCls} font-mono text-[13px]`} />
           </Field>
         </div>
-        <div className="mt-3">
-          <Field label="One-line tagline">
-            <input value={form.tagline} onChange={set("tagline")} placeholder="What it does, in a sentence." className={inputCls} />
+        <div className="mt-4">
+          <Field label="One-line description">
+            <input value={form.tagline} onChange={set("tagline")} placeholder="What it does, in one sentence." className={inputCls} />
           </Field>
         </div>
-        <div className="mt-3">
+        <div className="mt-4">
           <Field label="Tags">
-            <input value={form.tags} onChange={set("tags")} placeholder="comma, separated, tags" className={inputCls} />
+            <input value={form.tags} onChange={set("tags")} placeholder="comma, separated" className={`${inputCls} font-mono text-[13px]`} />
           </Field>
         </div>
-        <div className="mt-3">
-          <Field label="Anything else?">
-            <textarea value={form.description} onChange={set("description")} rows={3} className={inputCls + " resize-none py-2.5"} />
+        <div className="mt-4">
+          <Field label="Notes for the reviewer">
+            <textarea value={form.description} onChange={set("description")} rows={3} className={`${inputCls} h-auto resize-none py-2`} />
           </Field>
         </div>
       </div>
 
-      {error ? <p className="mt-3 text-[13px] text-red-600">{error}</p> : null}
+      {error ? <p className="mt-4 text-[13px] text-red-700">{error}</p> : null}
       <button
         type="submit"
         disabled={status === "sending"}
-        className="mt-5 inline-flex h-11 w-full items-center justify-center rounded-full bg-brand text-[15px] font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-60 sm:w-auto sm:px-7"
+        className="mt-6 h-10 border border-brand bg-brand px-5 text-[14px] font-medium text-white hover:opacity-90 disabled:opacity-60"
       >
         {status === "sending" ? "Submitting…" : "Submit for review"}
       </button>
@@ -138,7 +138,7 @@ export function SubmitForm() {
 function Field({ label, required, children }: { label: string; required?: boolean; children: React.ReactNode }) {
   return (
     <label className="block">
-      <span className="mb-1.5 block text-[12.5px] font-medium text-zinc-600">
+      <span className="mb-1 block text-[12px] font-medium uppercase tracking-wide text-zinc-500">
         {label}
         {required ? <span className="text-brand"> *</span> : null}
       </span>
@@ -148,4 +148,4 @@ function Field({ label, required, children }: { label: string; required?: boolea
 }
 
 const inputCls =
-  "h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 text-[14px] text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20";
+  "h-10 w-full border border-zinc-300 bg-white px-3 text-[14px] text-zinc-900 outline-none placeholder:text-zinc-400 focus:border-brand";

package/templates/directory/app/globals.css

@@ -15,10 +15,10 @@
    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;
+  --radius: 0.125rem;
+  --brand: #1d4ed8;
+  --brand-soft: #eff6ff;
+  --paper: #ffffff;
   --background: oklch(1 0 0);
   --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
@@ -125,6 +125,8 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  /* `font-mono` utility. IBM Plex Mono is declared in app.ts as --font-code. */
+  --font-mono: var(--font-code, "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
 }
 
 @layer base {
@@ -153,3 +155,12 @@
     cursor: pointer;
   }
 }
+
+/* Headings. The page uses Inter semibold at modest sizes; no separate display
+   face. Kept as a class so a template fork can swap the heading font in one
+   place (declare it in app.ts as --font-display). */
+.font-display {
+  font-family: var(--font-display, var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif));
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}

package/templates/directory/app.ts

@@ -158,6 +158,16 @@ const manifest = buildManifest({
       display: "swap",
       preload: true,
     }),
+    // The mono face for tags, counts, and the search hint. globals.css maps it
+    // onto Tailwind's `font-mono` utility.
+    font({
+      family: "IBM Plex Mono",
+      variable: "--font-code",
+      weights: ["400", "500"],
+      subsets: ["latin"],
+      display: "swap",
+      preload: true,
+    }),
   ],
   routes: await discoverAppRoutes(),
 });

package/templates/directory/components/marketing.tsx

@@ -1,91 +1,33 @@
 import React from "react";
 
-// Reusable presentational pieces for the landing page. All server-rendered —
-// no client JS. Restyle here and the whole page follows. The brand accent
-// (`text-brand`, `bg-brand-soft`) comes from CSS vars set on <html> in
-// app/layout.tsx, which read lib/site.config.ts — so re-theming is one edit.
+// Reusable presentational pieces for the marketing pages. All server-rendered,
+// no client JS. The brand accent (`text-brand`) comes from CSS vars set on
+// <html> in app/layout.tsx, which read lib/site.config.ts.
 
 // Shared container: a contained, centered column.
-export const WRAP = "mx-auto w-full max-w-5xl px-6";
+export const WRAP = "mx-auto w-full max-w-5xl px-5 sm:px-8";
 
-export function Eyebrow({ children }: { children: React.ReactNode }) {
-  return (
-    <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.14em] text-brand">
-      {children}
-    </p>
-  );
-}
-
-// "New / Coming soon"-style pill for the hero.
-export function Badge({ children }: { children: React.ReactNode }) {
-  return (
-    <span className="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white py-1 pl-1.5 pr-3 text-[13px] text-zinc-600 shadow-sm">
-      <span className="inline-block size-1.5 rounded-full bg-brand" />
-      {children}
-    </span>
-  );
-}
+// Plain text link in the accent color. Used for nav, rail, and inline links.
+export const LINK = "text-brand underline-offset-2 hover:underline";
 
 export function Divider() {
   return (
     <div className={WRAP}>
-      <div className="border-t border-zinc-200/70" />
+      <div className="border-t border-zinc-200" />
     </div>
   );
 }
 
-export function SectionHead({
-  eyebrow,
-  title,
-  body,
-}: {
-  eyebrow: string;
-  title: string;
-  body?: string;
-}) {
+export function SectionHead({ title, body }: { title: string; body?: string }) {
   return (
     <div>
-      <Eyebrow>{eyebrow}</Eyebrow>
-      <h2 className="mt-4 text-balance text-2xl font-semibold leading-[1.15] tracking-[-0.02em] sm:text-3xl">
-        {title}
-      </h2>
-      {body ? (
-        <p className="mt-4 max-w-xl text-[15px] leading-relaxed text-zinc-500">
-          {body}
-        </p>
-      ) : null}
+      <h2 className="font-display text-[20px] leading-tight text-zinc-900">{title}</h2>
+      {body ? <p className="mt-2 max-w-xl text-[14px] leading-relaxed text-zinc-600">{body}</p> : null}
     </div>
   );
 }
 
-// A grid of value props — icon + title + body.
-export function FeatureGrid({
-  items,
-}: {
-  items: { title: string; body: string; icon?: string }[];
-}) {
-  return (
-    <div className="grid gap-6 sm:grid-cols-3">
-      {items.map((f) => (
-        <div key={f.title}>
-          {f.icon ? (
-            <span className="flex size-9 items-center justify-center rounded-lg bg-brand-soft text-brand">
-              {f.icon}
-            </span>
-          ) : null}
-          <h3 className="mt-4 text-[15px] font-semibold text-zinc-900">
-            {f.title}
-          </h3>
-          <p className="mt-2 text-[14px] leading-relaxed text-zinc-500">
-            {f.body}
-          </p>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-// Initials for testimonial avatars, so the cards look finished without a photo.
+// Initials for avatars, so a row looks finished without a photo.
 export function initials(name: string) {
   return name
     .split(/\s+/)
@@ -95,23 +37,24 @@ export function initials(name: string) {
     .toUpperCase();
 }
 
-// A deliberately-obvious image placeholder. Real sites drop a photo here; this
-// makes the spot unmistakable — dashed border, a photo glyph, and a one-line
-// "swap this" instruction telling you exactly what to replace and where. Looks
-// tidy enough to demo, but no one will mistake it for a finished design.
+// An image slot. With `src` it renders the image; without, a dashed box with a
+// title naming the image that belongs there and a hint on where to replace it.
 //
 //   shape  — "landscape" | "portrait" | "square" | "circle"
-//   title  — what photo belongs here ("Your headshot")
+//   title  — what image belongs here
 //   hint   — how to replace it ("Replace in app/page.tsx")
 export function ImagePlaceholder({
   shape = "landscape",
   title,
   hint,
+  src,
   className = "",
 }: {
   shape?: "landscape" | "portrait" | "square" | "circle";
   title: string;
   hint?: string;
+  /** A real image under public/images. */
+  src?: string;
   className?: string;
 }) {
   const aspect =
@@ -120,27 +63,20 @@ export function ImagePlaceholder({
       : shape === "square" || shape === "circle"
         ? "aspect-square"
         : "aspect-[4/3]";
-  const radius = shape === "circle" ? "rounded-full" : "rounded-2xl";
+  const radius = shape === "circle" ? "rounded-full" : "";
+  if (src) {
+    return (
+      <div className={`relative overflow-hidden bg-zinc-100 ${aspect} ${radius} ${className}`}>
+        <img src={src} alt={title} className="absolute inset-0 size-full object-cover" loading="lazy" />
+      </div>
+    );
+  }
   return (
     <div
-      className={`relative grid place-items-center overflow-hidden border-2 border-dashed border-zinc-300 bg-zinc-50 ${aspect} ${radius} ${className}`}
+      className={`relative grid place-items-center overflow-hidden border border-dashed border-zinc-300 bg-zinc-50 ${aspect} ${radius} ${className}`}
     >
       <div className="px-4 text-center">
-        <svg
-          className="mx-auto size-7 text-zinc-300"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          aria-hidden
-        >
-          <rect x="3" y="3" width="18" height="18" rx="2" />
-          <circle cx="9" cy="9" r="1.6" />
-          <path d="m21 15-4.5-4.5L7 20" />
-        </svg>
-        <p className="mt-2 text-[12.5px] font-medium text-zinc-500">{title}</p>
+        <p className="font-mono text-[12px] text-zinc-500">{title}</p>
         {hint ? <p className="mt-1 text-[11px] leading-snug text-zinc-400">{hint}</p> : null}
       </div>
     </div>

package/templates/directory/lib/site.config.ts

@@ -36,21 +36,18 @@ export type SeedListing = {
 };
 
 export type DirectoryConfig = BaseConfig & {
-  hero: {
-    tagline: string;
-    headline: string;
-    subcopy: string;
+  // The page opens with the brand name, this one line, and the search box.
+  intro: {
+    description: string;
     ctaLabel: string;
     searchPlaceholder: string;
   };
-  browse: { eyebrow: string; headline: string };
   // The facet values offered in the submit form's category select. The browse
   // facet sidebar is built live from the data, so this only needs to cover what
   // submitters can pick.
   categories: string[];
   seedListings: SeedListing[];
   submit: {
-    eyebrow: string;
     headline: string;
     subcopy: string;
     confirmationMessage: string;
@@ -77,26 +74,19 @@ export const siteConfig: DirectoryConfig = {
     ],
   },
 
-  colors: { brand: "#7c3aed", brandSoft: "#ede9fe", paper: "#faf9fc" },
+  colors: { brand: "#1d4ed8", brandSoft: "#eff6ff", paper: "#ffffff" },
 
   seo: {
-    title: "Stacked — the developer tools directory.",
+    title: "Stacked, a developer tools directory",
     description:
-      "A searchable, community-voted directory of developer tools. Full-text search, filter by category, upvote your favorites, and submit the ones we're missing.",
+      "A searchable, community-voted directory of developer tools. Full-text search, category filters, upvotes, and a submit form.",
   },
 
-  hero: {
-    tagline: "The dev tools directory",
-    headline: "Developer tools, checked by hand.",
-    subcopy:
-      "Search a hand-checked directory, filter by category, and upvote useful tools. Results and vote counts update live, and browsing requires no account.",
+  intro: {
+    description:
+      "A hand-checked directory of developer tools. Search, filter by category, and upvote. No account needed.",
     ctaLabel: "Submit a tool",
-    searchPlaceholder: "Search tools — try “database”, “deploy”, “auth”…",
-  },
-
-  browse: {
-    eyebrow: "Browse",
-    headline: "Find your next tool.",
+    searchPlaceholder: "search: database, deploy, auth",
   },
 
   categories: ["Database", "Hosting", "Auth", "AI", "Analytics", "Design", "Productivity", "DevOps"],
@@ -119,10 +109,9 @@ export const siteConfig: DirectoryConfig = {
   ],
 
   submit: {
-    eyebrow: "Submit a tool",
-    headline: "Know one we're missing?",
+    headline: "Submit a tool",
     subcopy:
-      "Send it over. Submissions land in the curator's queue — once it's approved it shows up in the directory for everyone.",
-    confirmationMessage: "Thanks — your submission's in the queue. We review new tools a few times a week.",
+      "Submissions go to the review queue. Approved tools appear in the directory.",
+    confirmationMessage: "Your submission is in the queue. We review new tools a few times a week.",
   },
 };

package/templates/helpdesk/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