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>

shared/types.ts

@@ -5,10 +5,25 @@ export function isEffectId(value: string): value is EffectId {
   return (EFFECTS as readonly string[]).includes(value);
 }
 
+export const FRAMES = [
+  "none",
+  "phone",
+  "tablet",
+  "frame-modern",
+  "frame-kids",
+  "frame-classic",
+] as const;
+export type FrameId = (typeof FRAMES)[number];
+
+export function isFrameId(value: string): value is FrameId {
+  return (FRAMES as readonly string[]).includes(value);
+}
+
 export type CatalogPublic = {
   id: string;
   title: string;
   effect: EffectId;
+  frame: FrameId;
   pageCount: number;
   flipMs: number;
   createdAt: string;
@@ -35,6 +50,7 @@ export const LIMITS = {
 
 export const DEFAULT_TITLE = "کاتالوگ";
 export const DEFAULT_FLIP_MS = 1000;
+export const DEFAULT_FRAME: FrameId = "none";
 
 export function clampFlipMs(value: unknown): number {
   const n = Number(value);