proto-plugin 0.1.0

package/src/server/create-prototype-api-routes.ts

@@ -0,0 +1,428 @@
+import { mkdir, writeFile } from "fs/promises";
+import { NextRequest, NextResponse } from "next/server";
+import path from "path";
+
+import { createPrototypeRegistry } from "@prototype/lib/prototypes/create-prototype-registry";
+import type { PrototypeConfig } from "@prototype/lib/prototypes/prototype-config-types";
+import { isValidAnnotation } from "@prototype/lib/prototype-comments/core/validation";
+import {
+  isValidChangelogMeta,
+  normalizeChangelogMetaPayload,
+} from "@prototype/lib/prototypes/changelog-meta";
+import {
+  sanitizeStateIdForFilename,
+  stateScreenshotManifestKey,
+} from "@prototype/lib/prototypes/prototype-state-screenshot";
+
+import {
+  readScreenshotManifest,
+  touchScreenshotManifest,
+  touchScreenshotManifestKey,
+} from "../lib/prototypes/screenshot-manifest";
+import { getRedisStatus } from "./redis/client";
+import {
+  listPrototypeComments,
+  mergePrototypeComments,
+  upsertPrototypeComment,
+} from "./redis/prototype-comments";
+import {
+  isValidDesignExplorationDefaultRecord,
+  normalizeDesignExplorationDefaultPayload,
+} from "@prototype/lib/prototypes/design-exploration-default";
+import {
+  getPrototypeChangelogMeta,
+  setPrototypeChangelogMeta,
+} from "./redis/prototype-changelog-meta";
+import {
+  getPrototypeDesignExplorationDefault,
+  setPrototypeDesignExplorationDefault,
+} from "./redis/prototype-design-exploration-default";
+
+type SlugRouteContext = {
+  params: Promise<{ slug: string }>;
+};
+
+type CommentIdRouteContext = {
+  params: Promise<{ slug: string; id: string }>;
+};
+
+function commentStorageUnavailableResponse() {
+  const status = getRedisStatus();
+  return NextResponse.json(
+    {
+      error: "Comment storage is not configured.",
+      missing: status.missing,
+    },
+    { status: 503 },
+  );
+}
+
+function changelogStorageUnavailableResponse() {
+  const status = getRedisStatus();
+  return NextResponse.json(
+    {
+      error: "Change log storage is not configured.",
+      missing: status.missing,
+    },
+    { status: 503 },
+  );
+}
+
+function designDefaultStorageUnavailableResponse() {
+  const status = getRedisStatus();
+  return NextResponse.json(
+    {
+      error: "Design default storage is not configured.",
+      missing: status.missing,
+    },
+    { status: 503 },
+  );
+}
+
+export function createPrototypeCommentsRoute(config: PrototypeConfig) {
+  const registry = createPrototypeRegistry(config);
+
+  async function GET(_request: NextRequest, { params }: SlugRouteContext) {
+    const { slug } = await params;
+    const prototype = registry.getPrototype(slug);
+
+    if (!prototype) {
+      return NextResponse.json({ error: "Unknown prototype" }, { status: 404 });
+    }
+
+    const redisStatus = getRedisStatus();
+    if (!redisStatus.ok) {
+      return commentStorageUnavailableResponse();
+    }
+
+    try {
+      const annotations = await listPrototypeComments(slug);
+      return NextResponse.json(annotations);
+    } catch (error) {
+      console.error("Prototype comments GET error:", error);
+      return NextResponse.json({ error: "Failed to load comments" }, { status: 500 });
+    }
+  }
+
+  async function PUT(request: NextRequest, { params }: SlugRouteContext) {
+    const { slug } = await params;
+    const prototype = registry.getPrototype(slug);
+
+    if (!prototype) {
+      return NextResponse.json({ error: "Unknown prototype" }, { status: 404 });
+    }
+
+    const redisStatus = getRedisStatus();
+    if (!redisStatus.ok) {
+      return commentStorageUnavailableResponse();
+    }
+
+    let body: unknown;
+    try {
+      body = await request.json();
+    } catch {
+      return NextResponse.json({ error: "Invalid JSON body" }, { status: 400 });
+    }
+
+    if (!Array.isArray(body)) {
+      return NextResponse.json({ error: "Body must be an array" }, { status: 400 });
+    }
+
+    const annotations = body.filter(isValidAnnotation);
+    if (annotations.length === 0 && body.length > 0) {
+      return NextResponse.json({ error: "No valid comments in body" }, { status: 400 });
+    }
+
+    try {
+      const count = await mergePrototypeComments(slug, annotations);
+      return NextResponse.json({ ok: true, count });
+    } catch (error) {
+      console.error("Prototype comments PUT error:", error);
+      return NextResponse.json({ error: "Failed to save comments" }, { status: 500 });
+    }
+  }
+
+  return { GET, PUT };
+}
+
+export function createPrototypeCommentIdRoute(config: PrototypeConfig) {
+  const registry = createPrototypeRegistry(config);
+
+  async function PUT(request: NextRequest, { params }: CommentIdRouteContext) {
+    const { slug, id } = await params;
+    const prototype = registry.getPrototype(slug);
+
+    if (!prototype) {
+      return NextResponse.json({ error: "Unknown prototype" }, { status: 404 });
+    }
+
+    const redisStatus = getRedisStatus();
+    if (!redisStatus.ok) {
+      return commentStorageUnavailableResponse();
+    }
+
+    let body: unknown;
+    try {
+      body = await request.json();
+    } catch {
+      return NextResponse.json({ error: "Invalid JSON body" }, { status: 400 });
+    }
+
+    if (!isValidAnnotation(body)) {
+      return NextResponse.json({ error: "Invalid comment annotation" }, { status: 400 });
+    }
+
+    const annotation = body as Record<string, unknown>;
+    if (annotation.id !== id) {
+      return NextResponse.json(
+        { error: "Comment id must match the URL path." },
+        { status: 400 },
+      );
+    }
+
+    try {
+      await upsertPrototypeComment(slug, body);
+      return NextResponse.json({ ok: true, id });
+    } catch (error) {
+      console.error("Prototype comment PUT error:", error);
+      return NextResponse.json({ error: "Failed to save comment" }, { status: 500 });
+    }
+  }
+
+  return { PUT };
+}
+
+export function createPrototypeChangelogMetaRoute(config: PrototypeConfig) {
+  const registry = createPrototypeRegistry(config);
+
+  async function GET(_request: NextRequest, { params }: SlugRouteContext) {
+    const { slug } = await params;
+    const prototype = registry.getPrototype(slug);
+
+    if (!prototype) {
+      return NextResponse.json({ error: "Unknown prototype" }, { status: 404 });
+    }
+
+    const redisStatus = getRedisStatus();
+    if (!redisStatus.ok) {
+      return changelogStorageUnavailableResponse();
+    }
+
+    try {
+      const meta = await getPrototypeChangelogMeta(slug);
+      return NextResponse.json(meta);
+    } catch (error) {
+      console.error("Prototype changelog-meta GET error:", error);
+      return NextResponse.json(
+        { error: "Failed to load change log overview" },
+        { status: 500 },
+      );
+    }
+  }
+
+  async function PUT(request: NextRequest, { params }: SlugRouteContext) {
+    const { slug } = await params;
+    const prototype = registry.getPrototype(slug);
+
+    if (!prototype) {
+      return NextResponse.json({ error: "Unknown prototype" }, { status: 404 });
+    }
+
+    const redisStatus = getRedisStatus();
+    if (!redisStatus.ok) {
+      return changelogStorageUnavailableResponse();
+    }
+
+    let body: unknown;
+    try {
+      body = await request.json();
+    } catch {
+      return NextResponse.json({ error: "Invalid JSON body" }, { status: 400 });
+    }
+
+    if (!isValidChangelogMeta(body)) {
+      return NextResponse.json(
+        { error: "Invalid change log meta body" },
+        { status: 400 },
+      );
+    }
+
+    const meta = normalizeChangelogMetaPayload(body);
+    if (!meta) {
+      return NextResponse.json(
+        { error: "Invalid change log meta body" },
+        { status: 400 },
+      );
+    }
+
+    try {
+      await setPrototypeChangelogMeta(slug, meta);
+      return NextResponse.json({ ok: true });
+    } catch (error) {
+      console.error("Prototype changelog-meta PUT error:", error);
+      return NextResponse.json(
+        { error: "Failed to save change log overview" },
+        { status: 500 },
+      );
+    }
+  }
+
+  return { GET, PUT };
+}
+
+export function createPrototypeDesignExplorationDefaultRoute(
+  config: PrototypeConfig,
+) {
+  const registry = createPrototypeRegistry(config);
+
+  async function GET(request: NextRequest, { params }: SlugRouteContext) {
+    const { slug } = await params;
+    const prototype = registry.getPrototype(slug);
+
+    if (!prototype) {
+      return NextResponse.json({ error: "Unknown prototype" }, { status: 404 });
+    }
+
+    const storageKeyPrefix = request.nextUrl.searchParams.get("key")?.trim();
+    if (!storageKeyPrefix) {
+      return NextResponse.json(
+        { error: "Missing key query parameter." },
+        { status: 400 },
+      );
+    }
+
+    const redisStatus = getRedisStatus();
+    if (!redisStatus.ok) {
+      return designDefaultStorageUnavailableResponse();
+    }
+
+    try {
+      const record = await getPrototypeDesignExplorationDefault(storageKeyPrefix);
+      return NextResponse.json(record);
+    } catch (error) {
+      console.error("Prototype design-exploration-default GET error:", error);
+      return NextResponse.json(
+        { error: "Failed to load design default variant" },
+        { status: 500 },
+      );
+    }
+  }
+
+  async function PUT(request: NextRequest, { params }: SlugRouteContext) {
+    const { slug } = await params;
+    const prototype = registry.getPrototype(slug);
+
+    if (!prototype) {
+      return NextResponse.json({ error: "Unknown prototype" }, { status: 404 });
+    }
+
+    const storageKeyPrefix = request.nextUrl.searchParams.get("key")?.trim();
+    if (!storageKeyPrefix) {
+      return NextResponse.json(
+        { error: "Missing key query parameter." },
+        { status: 400 },
+      );
+    }
+
+    const redisStatus = getRedisStatus();
+    if (!redisStatus.ok) {
+      return designDefaultStorageUnavailableResponse();
+    }
+
+    let body: unknown;
+    try {
+      body = await request.json();
+    } catch {
+      return NextResponse.json({ error: "Invalid JSON body" }, { status: 400 });
+    }
+
+    if (!isValidDesignExplorationDefaultRecord(body)) {
+      return NextResponse.json(
+        { error: "Invalid design default record body" },
+        { status: 400 },
+      );
+    }
+
+    const record = normalizeDesignExplorationDefaultPayload(body);
+    if (!record) {
+      return NextResponse.json(
+        { error: "Invalid design default record body" },
+        { status: 400 },
+      );
+    }
+
+    try {
+      await setPrototypeDesignExplorationDefault(storageKeyPrefix, record);
+      return NextResponse.json({ ok: true });
+    } catch (error) {
+      console.error("Prototype design-exploration-default PUT error:", error);
+      return NextResponse.json(
+        { error: "Failed to save design default variant" },
+        { status: 500 },
+      );
+    }
+  }
+
+  return { GET, PUT };
+}
+
+export function createPrototypeScreenshotRoute(config: PrototypeConfig) {
+  const registry = createPrototypeRegistry(config);
+
+  async function POST(request: NextRequest, { params }: SlugRouteContext) {
+    if (process.env.NODE_ENV !== "development") {
+      return NextResponse.json({ error: "Not available" }, { status: 404 });
+    }
+
+    const { slug } = await params;
+    const prototype = registry.getPrototype(slug);
+
+    if (!prototype) {
+      return NextResponse.json({ error: "Unknown prototype" }, { status: 404 });
+    }
+
+    const body = (await request.json()) as {
+      image?: string;
+      stateId?: string;
+    };
+
+    if (
+      typeof body.image !== "string" ||
+      !body.image.startsWith("data:image/png;base64,")
+    ) {
+      return NextResponse.json({ error: "Invalid image" }, { status: 400 });
+    }
+
+    const buffer = Buffer.from(
+      body.image.replace(/^data:image\/png;base64,/, ""),
+      "base64",
+    );
+
+    const screenshotsDir = path.join(
+      process.cwd(),
+      "public/prototypes/screenshots",
+    );
+
+    if (typeof body.stateId === "string" && body.stateId.length > 0) {
+      const stateDir = path.join(screenshotsDir, slug, "states");
+      await mkdir(stateDir, { recursive: true });
+      const filename = `${sanitizeStateIdForFilename(body.stateId)}.png`;
+      await writeFile(path.join(stateDir, filename), buffer);
+
+      const version = await touchScreenshotManifestKey(
+        stateScreenshotManifestKey(slug, body.stateId),
+      );
+
+      return NextResponse.json({ ok: true, version, stateId: body.stateId });
+    }
+
+    await mkdir(screenshotsDir, { recursive: true });
+    await writeFile(path.join(screenshotsDir, `${slug}.png`), buffer);
+
+    const version = await touchScreenshotManifest(slug);
+
+    return NextResponse.json({ ok: true, version });
+  }
+
+  return { POST };
+}

package/src/server/gallery/create-gallery-api.ts

@@ -0,0 +1,56 @@
+import { NextRequest } from "next/server";
+
+import {
+  DELETE as deleteGallery,
+  GET as getGallery,
+  POST as postGallery,
+} from "./gallery-route";
+import { createFoldersRouteHandlers } from "./folders-route";
+import { GET as getGalleryImage } from "./image-route";
+import {
+  DELETE as deleteGalleryItem,
+  PATCH as patchGalleryItem,
+} from "./item-route";
+import type { GalleryConfig } from "./gallery-types";
+
+export function createGalleryApi(_config?: GalleryConfig) {
+  const foldersRoute = createFoldersRouteHandlers();
+
+  async function dispatch(request: NextRequest, path: string[]): Promise<Response | null> {
+    const method = request.method;
+
+    if (path[0] === "gallery") {
+      if (path.length === 1) {
+        if (method === "GET") return getGallery();
+        if (method === "POST") return postGallery(request);
+        if (method === "DELETE") return deleteGallery();
+      }
+
+      if (path.length === 2 && path[1] === "folders") {
+        if (method === "GET") return foldersRoute.GET();
+        if (method === "POST") return foldersRoute.POST(request);
+        if (method === "PUT") return foldersRoute.PUT(request);
+        if (method === "PATCH") return foldersRoute.PATCH(request);
+      }
+
+      if (path.length === 2) {
+        const id = path[1]!;
+        if (method === "PATCH") {
+          return patchGalleryItem(request, { params: Promise.resolve({ id }) });
+        }
+        if (method === "DELETE") {
+          return deleteGalleryItem(request, { params: Promise.resolve({ id }) });
+        }
+      }
+
+      if (path.length === 3 && path[2] === "image" && method === "GET") {
+        const id = path[1]!;
+        return getGalleryImage(request, { params: Promise.resolve({ id }) });
+      }
+    }
+
+    return null;
+  }
+
+  return { dispatch };
+}

package/src/server/gallery/folders-route.ts

@@ -0,0 +1,156 @@
+import { kv } from "@vercel/kv";
+import { NextRequest, NextResponse } from "next/server";
+
+import { getGalleryKvStatus } from "./gallery-env";
+
+const FOLDERS_KEY = "gallery:folders";
+const GALLERY_KEY = "gallery:items";
+
+export function createFoldersRouteHandlers() {
+  async function getFolders(): Promise<string[]> {
+    const stored = await kv.get<string[]>(FOLDERS_KEY);
+    return stored ?? [];
+  }
+
+  async function GET() {
+    const status = getGalleryKvStatus();
+    if (!status.ok) {
+      return NextResponse.json({ error: "Gallery not configured" }, { status: 503 });
+    }
+
+    try {
+      const folders = await getFolders();
+      return NextResponse.json(folders);
+    } catch (error) {
+      console.error("Folders GET error:", error);
+      return NextResponse.json({ error: "Failed to fetch folders" }, { status: 500 });
+    }
+  }
+
+  async function POST(request: NextRequest) {
+    const status = getGalleryKvStatus();
+    if (!status.ok) {
+      return NextResponse.json({ error: "Gallery not configured" }, { status: 503 });
+    }
+
+    try {
+      const body = await request.json();
+      const name = typeof body.name === "string" ? body.name.trim() : "";
+
+      if (!name) {
+        return NextResponse.json({ error: "Folder name is required" }, { status: 400 });
+      }
+      if (name.length > 50) {
+        return NextResponse.json(
+          { error: "Folder name must be 50 characters or fewer" },
+          { status: 400 },
+        );
+      }
+
+      const folders = await getFolders();
+      if (folders.some((f) => f.toLowerCase() === name.toLowerCase())) {
+        return NextResponse.json(
+          { error: "A folder with that name already exists" },
+          { status: 409 },
+        );
+      }
+
+      const updated = [...folders, name];
+      await kv.set(FOLDERS_KEY, updated);
+
+      return NextResponse.json(updated);
+    } catch (error) {
+      console.error("Folders POST error:", error);
+      const message = error instanceof Error ? error.message : "Failed to create folder";
+      return NextResponse.json({ error: message }, { status: 500 });
+    }
+  }
+
+  async function PUT(request: NextRequest) {
+    const status = getGalleryKvStatus();
+    if (!status.ok) {
+      return NextResponse.json({ error: "Gallery not configured" }, { status: 503 });
+    }
+
+    try {
+      const body = await request.json();
+      const folders = body.folders;
+      if (
+        !Array.isArray(folders) ||
+        folders.some((f: unknown) => typeof f !== "string" || !(f as string).trim())
+      ) {
+        return NextResponse.json(
+          { error: "folders must be an array of non-empty strings" },
+          { status: 400 },
+        );
+      }
+      await kv.set(FOLDERS_KEY, folders);
+      return NextResponse.json(folders);
+    } catch (error) {
+      console.error("Folders PUT error:", error);
+      const message = error instanceof Error ? error.message : "Failed to reorder folders";
+      return NextResponse.json({ error: message }, { status: 500 });
+    }
+  }
+
+  async function PATCH(request: NextRequest) {
+    const status = getGalleryKvStatus();
+    if (!status.ok) {
+      return NextResponse.json({ error: "Gallery not configured" }, { status: 503 });
+    }
+
+    try {
+      const body = await request.json();
+      const oldName = typeof body.oldName === "string" ? body.oldName.trim() : "";
+      const newName = typeof body.newName === "string" ? body.newName.trim() : "";
+
+      if (!oldName || !newName) {
+        return NextResponse.json({ error: "oldName and newName are required" }, { status: 400 });
+      }
+      if (newName.length > 50) {
+        return NextResponse.json(
+          { error: "Folder name must be 50 characters or fewer" },
+          { status: 400 },
+        );
+      }
+
+      const folders = await getFolders();
+      const idx = folders.findIndex((f) => f === oldName);
+      if (idx === -1) {
+        return NextResponse.json({ error: "Folder not found" }, { status: 404 });
+      }
+      if (oldName !== newName && folders.some((f) => f.toLowerCase() === newName.toLowerCase())) {
+        return NextResponse.json(
+          { error: "A folder with that name already exists" },
+          { status: 409 },
+        );
+      }
+
+      folders[idx] = newName;
+      await kv.set(FOLDERS_KEY, folders);
+
+      const items = (await kv.get<Record<string, unknown>[]>(GALLERY_KEY)) ?? [];
+      let changed = false;
+      for (const item of items) {
+        if (Array.isArray(item.tags)) {
+          const tagIdx = (item.tags as string[]).indexOf(oldName);
+          if (tagIdx !== -1) {
+            (item.tags as string[])[tagIdx] = newName;
+            changed = true;
+          }
+        }
+      }
+      if (changed) {
+        await kv.set(GALLERY_KEY, items);
+      }
+
+      return NextResponse.json(folders);
+    } catch (error) {
+      console.error("Folders PATCH error:", error);
+      const message = error instanceof Error ? error.message : "Failed to rename folder";
+      return NextResponse.json({ error: message }, { status: 500 });
+    }
+  }
+
+  return { GET, POST, PUT, PATCH };
+}

package/src/server/gallery/gallery-env.ts

@@ -0,0 +1,39 @@
+export function normalizeGalleryEnv(): void {
+  if (!process.env.KV_REST_API_URL) {
+    const urlKey = Object.keys(process.env).find((k) => k.endsWith("_KV_REST_API_URL"));
+    if (urlKey) process.env.KV_REST_API_URL = process.env[urlKey];
+  }
+  if (!process.env.KV_REST_API_TOKEN) {
+    const tokenKey = Object.keys(process.env).find((k) => k.endsWith("_KV_REST_API_TOKEN"));
+    if (tokenKey) process.env.KV_REST_API_TOKEN = process.env[tokenKey];
+  }
+  if (!process.env.BLOB_READ_WRITE_TOKEN) {
+    const blobKey = Object.keys(process.env).find(
+      (k) => k.includes("BLOB_READ_WRITE_TOKEN") || k.includes("BLOB_READ_WRITE"),
+    );
+    if (blobKey) process.env.BLOB_READ_WRITE_TOKEN = process.env[blobKey];
+  }
+}
+
+export function getGalleryStorageStatus(): {
+  ok: boolean;
+  missing: string[];
+} {
+  normalizeGalleryEnv();
+  const missing: string[] = [];
+  if (!process.env.KV_REST_API_URL) missing.push("KV_REST_API_URL");
+  if (!process.env.KV_REST_API_TOKEN) missing.push("KV_REST_API_TOKEN");
+  if (!process.env.BLOB_READ_WRITE_TOKEN) missing.push("BLOB_READ_WRITE_TOKEN");
+  return { ok: missing.length === 0, missing };
+}
+
+export function getGalleryKvStatus(): {
+  ok: boolean;
+  missing: string[];
+} {
+  normalizeGalleryEnv();
+  const missing: string[] = [];
+  if (!process.env.KV_REST_API_URL) missing.push("KV_REST_API_URL");
+  if (!process.env.KV_REST_API_TOKEN) missing.push("KV_REST_API_TOKEN");
+  return { ok: missing.length === 0, missing };
+}