@pylonsync/create-pylon 0.3.273 → 0.3.275

package/templates/ai-studio/app.ts

@@ -0,0 +1,108 @@
+import {
+  entity,
+  field,
+  policy,
+  auth,
+  buildManifest,
+  discoverAppRoutes,
+} from "@pylonsync/sdk";
+
+// ---------------------------------------------------------------------------
+// ai-studio — a generative media studio (image / audio / video). The realtime
+// hook is the generation gallery: kick off a generation and a "generating…"
+// card appears instantly, then flips to the finished result the moment the
+// server-side `generate` action resolves — live, across every open tab. The
+// provider call (and your API key) stays on the server.
+//
+// Two entities:
+//   • Generation — one generation request + its result. Owner-scoped: you only
+//                  see your own. Written ONLY by the generate action (clients
+//                  can't insert), and read live via `db.useQuery`.
+//   • User       — the account (email/password is built in).
+//
+// Multi-user: every signed-in (or guest) visitor gets their own private studio.
+// Image + audio call OpenAI when OPENAI_API_KEY is set; with no key the studio
+// returns a clearly-labeled placeholder so the whole flow + live gallery work
+// with zero config. Video is a stubbed extension point — see functions/generate.ts.
+// ---------------------------------------------------------------------------
+
+const Generation = entity(
+  "Generation",
+  {
+    // Stamped from the session inside the generate action (server-side), not by
+    // the client — so it's an owner-scoped READ, with no client writes at all.
+    userId: field.string(),
+    kind: field.string(), // "image" | "audio" | "video"
+    prompt: field.string(),
+    status: field.string().default("pending"), // "pending" | "processing" | "done" | "failed"
+    // The result: an image/audio/video URL (or data: URL), ready to drop into
+    // an <img>/<audio>/<video>.
+    resultUrl: field.string().optional(),
+    error: field.string().optional(),
+    // The Replicate prediction id, while a generation is "processing" — the
+    // client polls checkGeneration with the row's id until it settles.
+    predictionId: field.string().optional(),
+    // True when this is the no-API-key placeholder (the UI shows a "demo" badge).
+    demo: field.boolean().default(false),
+    createdAt: field.datetime().defaultNow(),
+  },
+  {
+    indexes: [
+      { name: "by_user", fields: ["userId"], unique: false },
+      { name: "by_created", fields: ["createdAt"], unique: false },
+    ],
+  },
+);
+
+const User = entity(
+  "User",
+  {
+    email: field.string(),
+    displayName: field.string().optional(),
+    passwordHash: field.string().serverOnly().optional(),
+    avatarColor: field.string().optional(),
+    emailVerified: field.datetime().optional(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_email", fields: ["email"], unique: true }] },
+);
+
+// Generations are PRIVATE per user: you can READ only your own, and you can't
+// write them from the client at all — the generate action (which runs the
+// provider call with the server-side key) is the only writer. So the gallery is
+// live (the sync engine ships you your rows as the action updates them) without
+// ever exposing one user's generations to another.
+const generationPolicy = policy({
+  name: "generation_owner_read",
+  entity: "Generation",
+  allowRead: "auth.userId == data.userId",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+const userPolicy = policy({
+  name: "user_self",
+  entity: "User",
+  allowRead: "auth.userId == data.id",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+const manifest = buildManifest({
+  name: "__APP_NAME__",
+  version: "0.1.0",
+  entities: [Generation, User],
+  // generate (public action) + _createGeneration / _finishGeneration (internal
+  // mutations it calls) live in functions/ and are discovered automatically.
+  queries: [],
+  actions: [],
+  policies: [generationPolicy, userPolicy],
+  auth: auth(),
+  routes: await discoverAppRoutes(),
+});
+
+console.log(JSON.stringify(manifest, null, 2));
+
+export default manifest;

package/templates/ai-studio/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/templates/ai-studio/functions/_getGeneration.ts

@@ -0,0 +1,25 @@
+import { query, v } from "@pylonsync/functions";
+
+// Internal: read a Generation by id, bypassing the owner read-policy (the
+// pollGeneration job runs without a user session). Returns the fields the job
+// needs, or null.
+export default query<
+  { id: string },
+  | {
+      id: string;
+      kind: string;
+      prompt: string;
+      status: string;
+      predictionId?: string | null;
+    }
+  | null
+>({
+  internal: true,
+  args: { id: v.id("Generation") },
+  async handler(ctx, args) {
+    const g = (await ctx.db.unsafe.get("Generation", args.id)) as
+      | { id: string; kind: string; prompt: string; status: string; predictionId?: string | null }
+      | null;
+    return g;
+  },
+});

package/templates/ai-studio/functions/_updateGeneration.ts

@@ -0,0 +1,37 @@
+import { mutation, v } from "@pylonsync/functions";
+
+// Internal: patch a Generation. Called by the pollGeneration background job to
+// move a row through pending → processing → done/failed. Each write syncs to the
+// owner's open tabs, so the gallery card updates live. Only set fields are
+// touched. Not client-reachable (Generation is allowInsert/Update:"false").
+export default mutation<
+  {
+    id: string;
+    status?: string;
+    resultUrl?: string | null;
+    error?: string | null;
+    demo?: boolean;
+    predictionId?: string;
+  },
+  { ok: boolean }
+>({
+  internal: true,
+  args: {
+    id: v.id("Generation"),
+    status: v.optional(v.string()),
+    resultUrl: v.optional(v.string()),
+    error: v.optional(v.string()),
+    demo: v.optional(v.boolean()),
+    predictionId: v.optional(v.string()),
+  },
+  async handler(ctx, args) {
+    const patch: Record<string, unknown> = {};
+    if (args.status !== undefined) patch.status = args.status;
+    if (args.resultUrl !== undefined) patch.resultUrl = args.resultUrl;
+    if (args.error !== undefined) patch.error = args.error;
+    if (args.demo !== undefined) patch.demo = args.demo;
+    if (args.predictionId !== undefined) patch.predictionId = args.predictionId;
+    await ctx.db.unsafe.update("Generation", args.id, patch);
+    return { ok: true };
+  },
+});

package/templates/ai-studio/functions/generate.ts

@@ -0,0 +1,42 @@
+import { mutation, v } from "@pylonsync/functions";
+
+// generate — kick off a generation. A `mutation`: it inserts a pending row
+// (stamped to the caller) and enqueues the `pollGeneration` background job, then
+// returns. It does NO network I/O itself — generation runs in the job, off the
+// request path, so a slow model (video can take minutes) never blocks or times
+// out the call. The pending row syncs to the gallery instantly; the job flips it
+// to the result when it's ready.
+//
+// `auth: "user"` — generating requires a signed-in account (the page already
+// redirects anyone else to /login).
+export default mutation<{ kind: string; prompt: string }, { id: string }>({
+  auth: "user",
+  args: { kind: v.string(), prompt: v.string() },
+  async handler(ctx, args) {
+    const userId = ctx.auth.userId;
+    if (!userId) throw ctx.error("AUTH_REQUIRED", "Sign in to generate.");
+    const kind = args.kind;
+    const prompt = args.prompt.trim();
+    if (!["image", "audio", "video"].includes(kind)) {
+      throw ctx.error("INVALID_ARGS", "kind must be image, audio, or video.");
+    }
+    if (prompt.length < 2 || prompt.length > 1000) {
+      throw ctx.error("INVALID_ARGS", "Enter a prompt (up to 1000 characters).");
+    }
+
+    const id = await ctx.db.unsafe.insert("Generation", {
+      userId,
+      kind,
+      prompt,
+      status: "pending",
+      demo: false,
+      createdAt: new Date().toISOString(),
+    });
+
+    // Enqueue the background job (deferred until this mutation commits). It
+    // owns the provider call + polling + the final update.
+    await ctx.scheduler.runAfter(0, "pollGeneration", { id });
+
+    return { id };
+  },
+});

package/templates/ai-studio/functions/pollGeneration.ts

@@ -0,0 +1,134 @@
+import { action, v } from "@pylonsync/functions";
+import { placeholderImage } from "../lib/studio";
+
+// pollGeneration — the background job (enqueued by `generate` via
+// ctx.scheduler.runAfter). It runs OFF the request path, so slow models can take
+// as long as they need without blocking or timing out the user's call. It:
+//   1. starts the Replicate prediction (first run), then
+//   2. re-checks it and RESCHEDULES ITSELF every few seconds until it settles,
+//   3. writes the result/error to the Generation — which syncs live to the
+//      owner's gallery (pending → processing → done/failed) via db.useQuery.
+//
+// With no REPLICATE_API_TOKEN it returns a clearly-labeled placeholder instead,
+// so the whole flow (and this job) work with zero config.
+//
+// Not internal, but harmless if called directly: it only advances a generation's
+// own prediction; results sync only to the owner (Generation is owner-read).
+
+const REPLICATE = "https://api.replicate.com/v1";
+const POLL_MS = 3000;
+const MAX_ATTEMPTS = 200; // ~10 min ceiling, then give up
+
+export default action<{ id: string; attempts?: number }, { ok: boolean }>({
+  auth: "public",
+  args: { id: v.id("Generation"), attempts: v.optional(v.int()) },
+  async handler(ctx, args) {
+    const attempts = args.attempts ?? 0;
+    const gen = await ctx.runQuery<{
+      id: string;
+      kind: string;
+      prompt: string;
+      status: string;
+      predictionId?: string | null;
+    } | null>("_getGeneration", { id: args.id });
+    if (!gen || gen.status === "done" || gen.status === "failed") return { ok: true };
+
+    const update = (patch: Record<string, unknown>) => ctx.runMutation("_updateGeneration", { id: args.id, ...patch });
+    const reschedule = () =>
+      ctx.scheduler.runAfter(POLL_MS, "pollGeneration", { id: args.id, attempts: attempts + 1 });
+
+    if (attempts > MAX_ATTEMPTS) {
+      await update({ status: "failed", error: "Generation timed out." });
+      return { ok: true };
+    }
+
+    const token = ctx.env.REPLICATE_API_TOKEN?.trim();
+
+    // ── Demo mode: no token → a labeled placeholder, no provider call. ──
+    if (!token) {
+      await update({
+        status: "done",
+        demo: true,
+        resultUrl: gen.kind === "image" ? placeholderImage(gen.prompt) : null,
+      });
+      return { ok: true };
+    }
+
+    try {
+      // First run: kick off the Replicate prediction.
+      if (!gen.predictionId) {
+        const model = modelFor(gen.kind, ctx.env);
+        const pred = await replicateCreate(model, gen.prompt, token);
+        if (pred.error) {
+          await update({ status: "failed", error: String(pred.error).slice(0, 300) });
+          return { ok: true };
+        }
+        const out = pickOutput(pred.output);
+        if (pred.status === "succeeded" && out) {
+          await update({ status: "done", resultUrl: out });
+        } else if (pred.status === "failed" || pred.status === "canceled") {
+          await update({ status: "failed", error: "Provider rejected the request." });
+        } else {
+          await update({ status: "processing", predictionId: pred.id });
+          await reschedule();
+        }
+        return { ok: true };
+      }
+
+      // Subsequent runs: check the in-flight prediction.
+      const pred = await replicateGet(gen.predictionId, token);
+      const out = pickOutput(pred.output);
+      if (pred.status === "succeeded" && out) {
+        await update({ status: "done", resultUrl: out });
+      } else if (pred.status === "failed" || pred.status === "canceled") {
+        await update({ status: "failed", error: String(pred.error || "Generation failed.").slice(0, 300) });
+      } else {
+        await reschedule();
+      }
+    } catch (err) {
+      // Transient network blip → try again; otherwise the attempts cap ends it.
+      await reschedule();
+    }
+    return { ok: true };
+  },
+});
+
+// Default models (run the latest version via the model-name endpoint). Override
+// any of them with env so swapping models needs no code change.
+function modelFor(kind: string, env: Record<string, string>): string {
+  if (kind === "image") return env.REPLICATE_IMAGE_MODEL?.trim() || "black-forest-labs/flux-schnell";
+  if (kind === "video") return env.REPLICATE_VIDEO_MODEL?.trim() || "minimax/video-01";
+  return env.REPLICATE_AUDIO_MODEL?.trim() || "meta/musicgen";
+}
+
+function pickOutput(output: unknown): string | null {
+  if (Array.isArray(output)) return typeof output[0] === "string" ? output[0] : null;
+  return typeof output === "string" ? output : null;
+}
+
+interface Prediction {
+  id: string;
+  status: string;
+  output?: unknown;
+  error?: unknown;
+}
+
+async function replicateCreate(model: string, prompt: string, token: string): Promise<Prediction> {
+  const res = await fetch(`${REPLICATE}/models/${model}/predictions`, {
+    method: "POST",
+    headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" },
+    body: JSON.stringify({ input: { prompt } }),
+  });
+  const j = (await res.json().catch(() => ({}))) as Prediction & { detail?: string };
+  if (!res.ok) return { id: "", status: "failed", error: j?.detail || `Replicate ${res.status}` };
+  return j;
+}
+
+async function replicateGet(predictionId: string, token: string): Promise<Prediction> {
+  const res = await fetch(`${REPLICATE}/predictions/${predictionId}`, {
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  const j = (await res.json().catch(() => ({}))) as Prediction;
+  if (!res.ok) return { id: predictionId, status: "processing" }; // transient — keep polling
+  return j;
+}

package/templates/ai-studio/gitignore

@@ -0,0 +1,10 @@
+node_modules/
+.pylon/
+pylon.manifest.json
+pylon.client.ts
+web/dist/
+*.db
+*.db-*
+.env
+.env.local
+.DS_Store

package/templates/ai-studio/lib/site.config.ts

@@ -0,0 +1,80 @@
+// THE single source of truth for everything brand-specific on this AI media
+// studio. Rebrand by editing this ONE file — the layout + studio UI read from
+// here. The create-pylon scaffolder and Mast target this file.
+//
+// Colors live here (applied as CSS variables on <html> in app/layout.tsx).
+// Fictional demo copy — replace the values, keep the shape.
+
+import type { GenerationKind } from "./studio";
+
+export type Social = { label: string; href: string; path: string };
+
+export type BaseConfig = {
+  brand: {
+    name: string;
+    letter: string;
+    domain: string;
+    email: string;
+    footerBlurb: string;
+    copyrightName: string;
+    socials: Social[];
+  };
+  colors: { brand: string; brandSoft: string; paper: string };
+  seo: { title: string; description: string };
+};
+
+export type StudioConfig = BaseConfig & {
+  studio: {
+    headline: string;
+    subcopy: string;
+    inputPlaceholder: string;
+    // The generation kinds shown as a selector. `wired` flags which actually
+    // call a provider (image + audio); video is a labeled extension point.
+    kinds: { id: GenerationKind; label: string; wired: boolean }[];
+    // Starter prompts; clicking one fills the box.
+    examples: string[];
+  };
+};
+
+export const siteConfig: StudioConfig = {
+  brand: {
+    name: "Prism",
+    letter: "P",
+    domain: "prism.studio",
+    email: "hello@prism.example",
+    footerBlurb: "A generative media studio built on Pylon — image, audio, and video from a prompt.",
+    copyrightName: "Prism",
+    socials: [
+      {
+        label: "X",
+        href: "https://x.com",
+        path: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z",
+      },
+    ],
+  },
+
+  colors: { brand: "#c026d3", brandSoft: "#fae8ff", paper: "#fdf9fe" },
+
+  seo: {
+    title: "Prism — a generative AI media studio.",
+    description:
+      "Generate images, audio, and video from a prompt. A live gallery that updates in realtime as each generation finishes, built on Pylon. Your API key stays server-side.",
+  },
+
+  studio: {
+    headline: "Make something.",
+    subcopy: "Describe it, pick a medium, and watch it land in your gallery — live, the moment it's done.",
+    inputPlaceholder: "A neon koi swimming through a rainy Tokyo alley at night…",
+    kinds: [
+      { id: "image", label: "Image", wired: true },
+      { id: "audio", label: "Audio", wired: true },
+      { id: "video", label: "Video", wired: true },
+    ],
+    examples: [
+      "A cozy reading nook in a treehouse, golden hour, watercolor",
+      "An upbeat lo-fi hip-hop loop with mellow piano",
+      "Isometric illustration of a tiny island data center",
+      "A timelapse of a city skyline as day turns to night",
+    ],
+  },
+};

package/templates/ai-studio/lib/studio.ts

@@ -0,0 +1,52 @@
+// Shared studio types + the no-API-key placeholder generator (pure, so the
+// generate action can call it server-side and the client imports only the type).
+
+export type GenerationKind = "image" | "audio" | "video";
+
+export interface GenerationRow {
+  id: string;
+  userId: string;
+  kind: string;
+  prompt: string;
+  status: string; // "pending" | "done" | "failed"
+  resultUrl?: string | null;
+  error?: string | null;
+  demo: boolean;
+  createdAt: string;
+}
+
+// Deterministic small hash → drives the placeholder gradient hue.
+function hashHue(s: string): number {
+  let h = 0;
+  for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) >>> 0;
+  return h % 360;
+}
+
+function escapeXml(s: string): string {
+  return s
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&apos;");
+}
+
+// A self-contained SVG "image" data URL — used when no OPENAI_API_KEY is set, so
+// the gallery + realtime flow work with zero config. Clearly a placeholder (it
+// renders the prompt over a gradient), not a fake photo. Returns a `data:` URL
+// that drops straight into an <img>.
+export function placeholderImage(prompt: string): string {
+  const hue = hashHue(prompt);
+  const hue2 = (hue + 60) % 360;
+  const text = escapeXml(prompt.slice(0, 80));
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="640" height="640" viewBox="0 0 640 640">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="hsl(${hue} 70% 55%)"/>
+    <stop offset="1" stop-color="hsl(${hue2} 70% 45%)"/>
+  </linearGradient></defs>
+  <rect width="640" height="640" fill="url(#g)"/>
+  <text x="50%" y="44%" fill="rgba(255,255,255,0.95)" font-family="system-ui,sans-serif" font-size="26" font-weight="600" text-anchor="middle">${text}</text>
+  <text x="50%" y="54%" fill="rgba(255,255,255,0.7)" font-family="system-ui,sans-serif" font-size="15" text-anchor="middle">placeholder · set OPENAI_API_KEY for real images</text>
+</svg>`;
+  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+}

package/templates/ai-studio/lib/utils.ts

@@ -0,0 +1,10 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+// `cn` — the shadcn class merger. clsx resolves conditional/array class
+// inputs; tailwind-merge then dedupes conflicting Tailwind utilities so
+// the last one wins (e.g. `cn("px-2", "px-4")` → "px-4"). Every shadcn
+// component routes its className through this.
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/templates/ai-studio/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "__APP_NAME_KEBAB__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "pylon dev",
+    "deploy": "pylon deploy",
+    "check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@pylonsync/react": "^__PYLON_VERSION__",
+    "@pylonsync/sdk": "^__PYLON_VERSION__",
+    "@pylonsync/functions": "^__PYLON_VERSION__",
+    "@pylonsync/client": "^__PYLON_VERSION__",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.3.0",
+    "@tailwindcss/cli": "^4.3.0",
+    "tw-animate-css": "^1.2.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.0",
+    "lucide-react": "^0.460.0",
+    "@radix-ui/react-slot": "^1.1.0"
+  },
+  "devDependencies": {
+    "@pylonsync/cli": "^__PYLON_VERSION__",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.6.0"
+  }
+}

package/templates/ai-studio/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "lib": ["ES2022", "DOM"],
+    "types": ["react", "react-dom", "node"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["app.ts", "app/**/*", "components/**/*", "lib/**/*", "functions/**/*"]
+}

package/templates/creator/.env.example

@@ -0,0 +1,12 @@
+# Copy to `.env` and fill in. `pylon dev` loads `.env` automatically.
+
+# ── Owner (required to use the dashboard) ────────────────────────────────────
+# A waitlist is single-tenant: one business, one owner. The /dashboard is
+# unlocked only for the account whose email matches this value, and the
+# owner-only data function refuses to return any signups otherwise. Set this to
+# the email you'll sign in with, then create that account at /login.
+PYLON_OWNER_EMAIL=you@yourbusiness.com
+
+# ── Site URL (optional) ──────────────────────────────────────────────────────
+# Used by robots.txt + sitemap.xml. Point it at your real domain in production.
+# SITE_URL=https://yourbusiness.com