Add display frames and improve create-page page management.

Store phone/tablet/photo-frame shells with catalogs, append pages from extra images or PDFs, and reorder drafts with drag-and-drop.

Co-authored-by: Cursor <cursoragent@cursor.com>

server/routes/catalogs.ts

@@ -5,6 +5,8 @@ import {
   clampFlipMs,
   fileTooLargeMessage,
   isEffectId,
+  isFrameId,
+  DEFAULT_FRAME,
   LIMITS,
   tooManyPagesMessage,
   type CreateCatalogResponse,
@@ -37,6 +39,7 @@ function toPublic(row: {
   id: string;
   title: string;
   effect: CatalogPublic["effect"];
+  frame: CatalogPublic["frame"];
   pageCount: number;
   flipMs: number;
   createdAt: string;
@@ -45,6 +48,7 @@ function toPublic(row: {
     id: row.id,
     title: row.title,
     effect: row.effect,
+    frame: row.frame,
     pageCount: row.pageCount,
     flipMs: row.flipMs,
     createdAt: row.createdAt,
@@ -102,6 +106,10 @@ export function catalogRoutes(opts: {
       throw new HttpError(400, messages.badEffect);
     }
     const flipMs = clampFlipMs(body.flipMs);
+    const frameRaw = typeof body.frame === "string" && body.frame ? body.frame : DEFAULT_FRAME;
+    if (!isFrameId(frameRaw)) {
+      throw new HttpError(400, messages.badFrame);
+    }
 
     const pages = asFileArray(body.pages);
     if (pages.length < 1) {
@@ -127,6 +135,7 @@ export function catalogRoutes(opts: {
       effect: effectRaw,
       pageCount: buffers.length,
       flipMs,
+      frame: frameRaw,
     });
 
     const payload: CreateCatalogResponse = {