From c236b0f62122e943c8af45f1fe7cecdf04a4a328 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdi.banilohi@gmail.com>
Date: Thu, 20 Aug 2026 14:20:16 +0330
Subject: [PATCH] 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>
---
 client/src/api.ts                             |   4 +-
 client/src/components/CatalogShell.vue        |  38 +
 client/src/components/CatalogViewer.vue       |  90 ++-
 client/src/components/FrameSelect.vue         |  29 +
 client/src/components/PageList.vue            |  71 +-
 .../src/components/effects/CssPageEffect.vue  |  24 +-
 .../src/components/effects/MagazineEffect.vue |  81 ++-
 .../src/components/effects/ScrollEffect.vue   |  19 +-
 client/src/constants.ts                       |  11 +-
 client/src/pages/CreatePage.vue               | 100 +--
 client/src/pages/ViewPage.vue                 |   3 +-
 client/src/styles.css                         | 653 +++++++++++++++++-
 docs/PROJECT.md                               |   8 +-
 package.json                                  |   5 +-
 scripts/migrate-db.ts                         |   6 +
 server/catalog-repo.ts                        |  13 +-
 server/db.ts                                  |   5 +
 server/errors.ts                              |   1 +
 server/routes/catalogs.ts                     |   9 +
 server/schema.ts                              |   1 +
 shared/types.ts                               |  16 +
 tests/server/catalog-repo.test.ts             |   1 +
 tests/server/catalogs.test.ts                 |  15 +
 23 files changed, 1069 insertions(+), 134 deletions(-)
 create mode 100644 client/src/components/CatalogShell.vue
 create mode 100644 client/src/components/FrameSelect.vue
 create mode 100644 scripts/migrate-db.ts

diff --git a/client/src/api.ts b/client/src/api.ts
index 6d1bfd0..5245521 100644
--- a/client/src/api.ts
+++ b/client/src/api.ts
@@ -1,4 +1,4 @@
-import type { CatalogPublic, CreateCatalogResponse, EffectId } from "@shared/types";
+import type { CatalogPublic, CreateCatalogResponse, EffectId, FrameId } from "@shared/types";
 
 async function readError(res: Response): Promise<string> {
   try {
@@ -14,10 +14,12 @@ export async function createCatalog(input: {
   effect: EffectId;
   pages: Blob[];
   flipMs: number;
+  frame: FrameId;
 }): Promise<CreateCatalogResponse> {
   const data = new FormData();
   data.set("title", input.title);
   data.set("effect", input.effect);
+  data.set("frame", input.frame);
   data.set("flipMs", String(input.flipMs));
   input.pages.forEach((page, i) => {
     data.append("pages", page, `page-${String(i + 1).padStart(3, "0")}.jpg`);
diff --git a/client/src/components/CatalogShell.vue b/client/src/components/CatalogShell.vue
new file mode 100644
index 0000000..9b6e5a1
--- /dev/null
+++ b/client/src/components/CatalogShell.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { FrameId } from "@shared/types";
+
+const props = defineProps<{
+  frame: FrameId;
+}>();
+</script>
+
+<template>
+  <div v-if="props.frame === 'none'" class="shell-plain">
+    <slot />
+  </div>
+  <div v-else class="device-shell" :class="props.frame">
+    <div class="device-bezel">
+      <i v-if="props.frame === 'phone'" class="device-btn volume"></i>
+      <i v-if="props.frame === 'phone'" class="device-btn mute"></i>
+      <i v-if="props.frame === 'phone'" class="device-btn power"></i>
+      <i v-if="props.frame === 'tablet'" class="device-cam"></i>
+      <div class="device-screen">
+        <i v-if="props.frame === 'phone'" class="device-island">
+          <span class="lens"></span>
+        </i>
+        <slot />
+        <i v-if="props.frame === 'phone'" class="device-bar"></i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.shell-plain {
+  width: 100%;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+</style>
diff --git a/client/src/components/CatalogViewer.vue b/client/src/components/CatalogViewer.vue
index 996cfb4..1139a50 100644
--- a/client/src/components/CatalogViewer.vue
+++ b/client/src/components/CatalogViewer.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
-import type { EffectId } from "@shared/types";
-import { DEFAULT_FLIP_MS } from "@shared/types";
+import type { EffectId, FrameId } from "@shared/types";
+import { DEFAULT_FLIP_MS, DEFAULT_FRAME } from "@shared/types";
 import CssPageEffect from "./effects/CssPageEffect.vue";
 import MagazineEffect from "./effects/MagazineEffect.vue";
 import ScrollEffect from "./effects/ScrollEffect.vue";
+import CatalogShell from "./CatalogShell.vue";
 
 const AUTO_DELAY_MS = 3000;
 const AUTO_PAUSE_AFTER_FLIP_MS = 2200;
@@ -13,6 +14,7 @@ const props = defineProps<{
   effect: EffectId;
   images: string[];
   flipMs?: number;
+  frame?: FrameId;
 }>();
 
 const emit = defineEmits<{
@@ -20,6 +22,8 @@ const emit = defineEmits<{
 }>();
 
 const flipMs = computed(() => props.flipMs ?? DEFAULT_FLIP_MS);
+const frame = computed(() => props.frame ?? DEFAULT_FRAME);
+const framed = computed(() => frame.value !== "none");
 const autoIntervalMs = computed(() => flipMs.value + AUTO_PAUSE_AFTER_FLIP_MS);
 
 const index = ref(0);
@@ -33,15 +37,20 @@ const stage = ref<HTMLElement | null>(null);
 const magazine = ref<{ next: () => void; prev: () => void } | null>(null);
 
 const windowInner = ref(typeof window === "undefined" ? 1200 : window.innerWidth);
-const singlePage = computed(() => windowInner.value < 900);
+const compactUi = computed(() => windowInner.value < 900);
+const singlePage = computed(() => compactUi.value || framed.value);
 
 const visualEffect = computed<EffectId>(() => {
   if (fallbackSlide.value && props.effect === "magazine") return "slide";
   return props.effect;
 });
 
+const chromeHidden = computed(() => compactUi.value && hideChrome.value);
 const immersive = computed(
-  () => singlePage.value && (hideChrome.value || (playing.value && !waiting.value)),
+  () =>
+    !framed.value &&
+    compactUi.value &&
+    (hideChrome.value || (playing.value && !waiting.value)),
 );
 
 watch(immersive, (value) => emit("immersive", value), { immediate: true });
@@ -134,7 +143,7 @@ function fullscreenElement() {
 }
 
 async function toggleFullscreen() {
-  if (singlePage.value) {
+  if (compactUi.value) {
     hideChrome.value = true;
     waiting.value = false;
     return;
@@ -211,7 +220,11 @@ watch(
 </script>
 
 <template>
-  <div ref="stage" class="viewer-wrap cinematic" :class="{ immersive }">
+  <div
+    ref="stage"
+    class="viewer-wrap cinematic"
+    :class="{ immersive, framed, 'chrome-hidden': chromeHidden }"
+  >
     <div class="stage-bar page-chrome">
       <div class="chrome-nav">
         <button class="btn chrome-btn" type="button" @click="onUserNav(prev)">قبلی</button>
@@ -242,36 +255,43 @@ watch(
       <i class="hint-bar"></i>
     </div>
 
-    <ScrollEffect
-      v-if="visualEffect === 'scroll'"
-      :images="images"
-      :index="index"
-      @update:index="onUserNav(() => go($event))"
-    />
-    <MagazineEffect
-      v-else-if="visualEffect === 'magazine'"
-      ref="magazine"
-      :images="images"
-      :index="index"
-      :single-page="singlePage"
-      :flip-ms="flipMs"
-      :immersive="immersive"
-      @update:index="index = $event"
-      @fallback="fallbackSlide = true"
-    />
-    <CssPageEffect
-      v-else
-      :images="images"
-      :index="index"
-      :mode="visualEffect === 'fade' ? 'fade' : visualEffect === 'card' ? 'card' : 'slide'"
-      :zoom="zoom"
-      :flip-ms="flipMs"
-      :immersive="immersive"
-      @next="onUserNav(next)"
-      @prev="onUserNav(prev)"
-    />
+    <CatalogShell :frame="frame">
+      <div class="catalog-stage">
+        <ScrollEffect
+          v-if="visualEffect === 'scroll'"
+          :images="images"
+          :index="index"
+          :contained="framed"
+          @update:index="onUserNav(() => go($event))"
+        />
+        <MagazineEffect
+          v-else-if="visualEffect === 'magazine'"
+          ref="magazine"
+          :images="images"
+          :index="index"
+          :single-page="singlePage"
+          :flip-ms="flipMs"
+          :immersive="immersive"
+          :contained="framed"
+          @update:index="index = $event"
+          @fallback="fallbackSlide = true"
+        />
+        <CssPageEffect
+          v-else
+          :images="images"
+          :index="index"
+          :mode="visualEffect === 'fade' ? 'fade' : visualEffect === 'card' ? 'card' : 'slide'"
+          :zoom="zoom"
+          :flip-ms="flipMs"
+          :immersive="immersive"
+          :contained="framed"
+          @next="onUserNav(next)"
+          @prev="onUserNav(prev)"
+        />
+      </div>
+    </CatalogShell>
 
-    <div v-if="visualEffect !== 'scroll'" class="thumbs">
+    <div v-if="visualEffect !== 'scroll' && !framed" class="thumbs">
       <img
         v-for="(src, i) in images"
         :key="src"
diff --git a/client/src/components/FrameSelect.vue b/client/src/components/FrameSelect.vue
new file mode 100644
index 0000000..d1d26ca
--- /dev/null
+++ b/client/src/components/FrameSelect.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { FrameId } from "@shared/types";
+import { FRAME_OPTIONS } from "../constants";
+
+defineProps<{
+  modelValue: FrameId;
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [value: FrameId];
+}>();
+</script>
+
+<template>
+  <div class="effects frames">
+    <label v-for="opt in FRAME_OPTIONS" :key="opt.id" class="effect">
+      <input
+        type="radio"
+        name="frame"
+        :value="opt.id"
+        :checked="modelValue === opt.id"
+        @change="emit('update:modelValue', opt.id)"
+      />
+      <span class="frame-mini" :class="opt.id" aria-hidden="true"></span>
+      <strong>{{ opt.title }}</strong>
+      <small>{{ opt.hint }}</small>
+    </label>
+  </div>
+</template>
diff --git a/client/src/components/PageList.vue b/client/src/components/PageList.vue
index 5aa5605..bcf9a50 100644
--- a/client/src/components/PageList.vue
+++ b/client/src/components/PageList.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref } from "vue";
+
 export type DraftPage = {
   key: string;
   preview: string;
@@ -10,19 +12,70 @@ defineProps<{
 }>();
 
 const emit = defineEmits<{
-  move: [index: number, dir: -1 | 1];
+  reorder: [from: number, to: number];
   remove: [index: number];
 }>();
+
+const dragFrom = ref<number | null>(null);
+const dragOver = ref<number | null>(null);
+
+function onDragStart(index: number, ev: DragEvent) {
+  dragFrom.value = index;
+  if (ev.dataTransfer) {
+    ev.dataTransfer.effectAllowed = "move";
+    ev.dataTransfer.setData("text/plain", String(index));
+  }
+}
+
+function onDragOver(index: number, ev: DragEvent) {
+  ev.preventDefault();
+  if (ev.dataTransfer) ev.dataTransfer.dropEffect = "move";
+  dragOver.value = index;
+}
+
+function onDrop(index: number, ev: DragEvent) {
+  ev.preventDefault();
+  const from = dragFrom.value;
+  dragFrom.value = null;
+  dragOver.value = null;
+  if (from === null || from === index) return;
+  emit("reorder", from, index);
+}
+
+function onDragEnd() {
+  dragFrom.value = null;
+  dragOver.value = null;
+}
 </script>
 
 <template>
-  <div class="pages">
-    <div v-for="(page, index) in pages" :key="page.key" class="page-row">
-      <img :src="page.preview" alt="" />
-      <div class="grow">صفحه {{ index + 1 }}</div>
-      <button class="icon-btn" type="button" @click="emit('move', index, -1)">بالا</button>
-      <button class="icon-btn" type="button" @click="emit('move', index, 1)">پایین</button>
-      <button class="icon-btn" type="button" @click="emit('remove', index)">حذف</button>
-    </div>
+  <div class="pages-grid" role="list">
+    <article
+      v-for="(page, index) in pages"
+      :key="page.key"
+      class="page-tile"
+      :class="{ dragging: dragFrom === index, 'drop-target': dragOver === index && dragFrom !== index }"
+      role="listitem"
+      draggable="true"
+      :aria-label="`صفحه ${index + 1}`"
+      @dragstart="onDragStart(index, $event)"
+      @dragover="onDragOver(index, $event)"
+      @drop="onDrop(index, $event)"
+      @dragend="onDragEnd"
+      @dragleave="dragOver === index && (dragOver = null)"
+    >
+      <img :src="page.preview" alt="" draggable="false" />
+      <span class="page-num">{{ index + 1 }}</span>
+      <button
+        class="page-delete"
+        type="button"
+        title="حذف"
+        aria-label="حذف صفحه"
+        @click.stop="emit('remove', index)"
+        @pointerdown.stop
+      >
+        ×
+      </button>
+    </article>
   </div>
 </template>
diff --git a/client/src/components/effects/CssPageEffect.vue b/client/src/components/effects/CssPageEffect.vue
index 230e2d8..4336a84 100644
--- a/client/src/components/effects/CssPageEffect.vue
+++ b/client/src/components/effects/CssPageEffect.vue
@@ -8,6 +8,7 @@ const props = defineProps<{
   zoom: boolean;
   flipMs: number;
   immersive?: boolean;
+  contained?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -55,7 +56,7 @@ function onPointerUp(ev: PointerEvent) {
 <template>
   <div
     class="fx-stage"
-    :class="[mode, { 'zoom-in': zoom, fill: immersive }]"
+    :class="[mode, { 'zoom-in': zoom, fill: immersive || contained, contained }]"
     :style="{ '--flip-ms': `${flipMs}ms` }"
     @pointerdown.prevent="onPointerDown"
     @pointerup.prevent="onPointerUp"
@@ -93,6 +94,27 @@ function onPointerUp(ev: PointerEvent) {
   max-height: 100dvh;
 }
 
+.fx-stage.contained,
+.fx-stage.contained.fill {
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  min-height: 0;
+  margin: 0;
+  overflow: hidden;
+}
+
+.fx-stage.contained .page-img,
+.fx-stage.contained.fill .page-img {
+  max-width: none;
+  max-height: none;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 0;
+  box-shadow: none;
+}
+
 .fx-stage.card {
   perspective: 2600px;
 }
diff --git a/client/src/components/effects/MagazineEffect.vue b/client/src/components/effects/MagazineEffect.vue
index 023c1ac..3810deb 100644
--- a/client/src/components/effects/MagazineEffect.vue
+++ b/client/src/components/effects/MagazineEffect.vue
@@ -8,6 +8,7 @@ const props = defineProps<{
   singlePage: boolean;
   flipMs: number;
   immersive?: boolean;
+  contained?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -24,9 +25,10 @@ let ignore = false;
 let prepared: string[] = [];
 let makeGen = 0;
 let fitTimer = 0;
+let resizeObs: ResizeObserver | null = null;
 
 function updateFitScale() {
-  if (!props.immersive || !host.value || !outer.value) {
+  if ((!props.immersive && !props.contained) || !host.value || !outer.value) {
     fitScale.value = 1;
     return;
   }
@@ -38,13 +40,14 @@ function updateFitScale() {
     fitScale.value = 1;
     return;
   }
-    const pad = 16;
-    const s = Math.min((maxW - pad) / w, (maxH - pad) / h);
-    if (!Number.isFinite(s) || s <= 0) {
-      fitScale.value = 1;
-      return;
-    }
-    fitScale.value = Math.min(s, 8);
+  const pad = props.contained ? 0 : 16;
+  const s = Math.min((maxW - pad) / w, (maxH - pad) / h);
+  if (!Number.isFinite(s) || s <= 0) {
+    fitScale.value = 1;
+    return;
+  }
+  /* داخل قاب گوشی کمی بزرگ‌تر تا حاشیه بریده شود */
+  fitScale.value = Math.min(s * (props.contained ? 1.04 : 1), props.contained ? 1.2 : 8);
 }
 
 function scheduleFit() {
@@ -131,7 +134,7 @@ async function makeBook() {
     /* ignore */
   }
   book = null;
-  mountKey.value += 1;
+
   await nextTick();
   if (gen !== makeGen) {
     for (const url of previous) URL.revokeObjectURL(url);
@@ -142,11 +145,28 @@ async function makeBook() {
     return;
   }
 
+  if (props.contained) {
+    let attempts = 0;
+    while (outer.value.clientHeight < 80 && attempts < 20) {
+      await new Promise((resolve) => window.setTimeout(resolve, 50));
+      attempts += 1;
+      if (gen !== makeGen) return;
+    }
+  }
+
+  mountKey.value += 1;
+  await nextTick();
+  if (gen !== makeGen || !host.value || !outer.value) {
+    for (const url of previous) URL.revokeObjectURL(url);
+    return;
+  }
+
   try {
     const first = await loadImage(props.images[0]);
     if (gen !== makeGen) return;
-    const maxW = Math.max(280, outer.value.clientWidth - 16);
-    const maxH = Math.max(320, outer.value.clientHeight - 16);
+    const pad = props.contained ? 4 : 16;
+    const maxW = Math.max(160, outer.value.clientWidth - pad);
+    const maxH = Math.max(160, outer.value.clientHeight - pad);
     const { pageW, pageH } = pageBox(first, maxW, maxH);
 
     const fitted: string[] = [];
@@ -214,18 +234,27 @@ watch(
 );
 
 watch(
-  () => props.immersive,
+  () => [props.immersive, props.contained] as const,
   () => {
     scheduleFit();
   },
 );
 
+watch(outer, (el, prev) => {
+  if (prev && resizeObs) resizeObs.unobserve(prev);
+  if (!el || typeof ResizeObserver === "undefined") return;
+  resizeObs ??= new ResizeObserver(() => scheduleFit());
+  resizeObs.observe(el);
+});
+
 onMounted(() => {
   window.addEventListener("resize", scheduleFit);
 });
 
 onBeforeUnmount(() => {
   window.removeEventListener("resize", scheduleFit);
+  resizeObs?.disconnect();
+  resizeObs = null;
   window.clearTimeout(fitTimer);
   try {
     book?.destroy();
@@ -268,7 +297,7 @@ function onPointerUp(ev: PointerEvent) {
 </script>
 
 <template>
-  <div class="magazine-frame" dir="ltr" :class="{ fill: immersive }">
+  <div class="magazine-frame" dir="ltr" :class="{ fill: immersive || contained, contained }">
     <div class="magazine-glow"></div>
     <div
       ref="outer"
@@ -314,10 +343,36 @@ function onPointerUp(ev: PointerEvent) {
   max-width: none;
   height: 100%;
 }
+
 .magazine-frame.fill .magazine-outer {
   width: 100%;
   height: 100%;
 }
+
+.magazine-frame.contained,
+.magazine-frame.contained.fill {
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  min-height: 0;
+  margin: 0;
+}
+
+.magazine-frame.contained .magazine-outer,
+.magazine-frame.contained.fill .magazine-outer {
+  height: 100% !important;
+  max-height: 100% !important;
+  min-height: 0;
+}
+
+.magazine-frame.contained .magazine-glow {
+  display: none;
+}
+
+.magazine-frame.contained .magazine-host {
+  filter: none;
+}
+
 .magazine-host {
   width: max-content;
   height: max-content;
diff --git a/client/src/components/effects/ScrollEffect.vue b/client/src/components/effects/ScrollEffect.vue
index 1c69f5d..ccbe9d3 100644
--- a/client/src/components/effects/ScrollEffect.vue
+++ b/client/src/components/effects/ScrollEffect.vue
@@ -4,6 +4,7 @@ import { nextTick, watch } from "vue";
 const props = defineProps<{
   images: string[];
   index: number;
+  contained?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -21,7 +22,7 @@ watch(
 </script>
 
 <template>
-  <div class="scroll-list">
+  <div class="scroll-list" :class="{ contained }">
     <article
       v-for="(src, i) in images"
       :id="`scroll-page-${i}`"
@@ -58,6 +59,22 @@ watch(
   transform: scale(1);
   opacity: 1;
 }
+.scroll-list.contained {
+  max-width: none;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 8px;
+  gap: 12px;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+.scroll-list.contained .scroll-card img {
+  border-radius: 4px;
+  box-shadow: none;
+}
+
 .scroll-card img {
   display: block;
   width: 100%;
diff --git a/client/src/constants.ts b/client/src/constants.ts
index 4b76a94..29ab048 100644
--- a/client/src/constants.ts
+++ b/client/src/constants.ts
@@ -1,4 +1,4 @@
-import type { EffectId } from "@shared/types";
+import type { EffectId, FrameId } from "@shared/types";
 
 export const EFFECT_OPTIONS: { id: EffectId; title: string; hint: string }[] = [
   { id: "magazine", title: "ورق مجله", hint: "سه‌بعدی، شبیه ورق زدن کاغذ" },
@@ -7,3 +7,12 @@ export const EFFECT_OPTIONS: { id: EffectId; title: string; hint: string }[] = [
   { id: "card", title: "کارت", hint: "ورق دوبعدی مثل کارت" },
   { id: "scroll", title: "اسکرول عمودی", hint: "همه صفحات زیر هم" },
 ];
+
+export const FRAME_OPTIONS: { id: FrameId; title: string; hint: string }[] = [
+  { id: "none", title: "بدون قالب", hint: "فقط صفحات، مثل حالا" },
+  { id: "phone", title: "آیفون پرو مکس", hint: "شبیه آیفون ۱۸ پرو مکس" },
+  { id: "tablet", title: "تبلت", hint: "صفحه داخل تبلت" },
+  { id: "frame-modern", title: "قاب مدرن", hint: "قاب عکس ساده و باریک" },
+  { id: "frame-kids", title: "قاب کودکانه", hint: "رنگارنگ و گرد" },
+  { id: "frame-classic", title: "قاب کلاسیک", hint: "چوبی با حاشیه پهن" },
+];
diff --git a/client/src/pages/CreatePage.vue b/client/src/pages/CreatePage.vue
index 6355c11..7c25cca 100644
--- a/client/src/pages/CreatePage.vue
+++ b/client/src/pages/CreatePage.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { useRouter } from "vue-router";
-import type { EffectId } from "@shared/types";
-import { DEFAULT_FLIP_MS, LIMITS, tooManyPagesMessage } from "@shared/types";
+import type { EffectId, FrameId } from "@shared/types";
+import { DEFAULT_FLIP_MS, DEFAULT_FRAME, LIMITS, tooManyPagesMessage } from "@shared/types";
 import { createCatalog } from "../api";
 import EffectSelect from "../components/EffectSelect.vue";
+import FrameSelect from "../components/FrameSelect.vue";
 import PageList, { type DraftPage } from "../components/PageList.vue";
 import { filesToJpegs, isImageFile, isPdfFile } from "../images";
 import { renderPdfToJpegs } from "../pdf";
@@ -12,6 +13,7 @@ import { renderPdfToJpegs } from "../pdf";
 const router = useRouter();
 const title = ref("");
 const effect = ref<EffectId>("magazine");
+const frame = ref<FrameId>(DEFAULT_FRAME);
 const flipMs = ref(DEFAULT_FLIP_MS);
 const pages = ref<DraftPage[]>([]);
 const busy = ref(false);
@@ -34,25 +36,30 @@ function setProgress(message: string, done = 0, total = 0) {
   progressTotal.value = total;
 }
 
-function revokeAll() {
-  for (const page of pages.value) URL.revokeObjectURL(page.preview);
-}
-
-function setPages(blobs: Blob[]) {
-  revokeAll();
-  pages.value = blobs.map((blob, i) => ({
-    key: `${Date.now()}-${i}`,
+function toDraftPages(blobs: Blob[], keyOffset = 0): DraftPage[] {
+  const stamp = Date.now();
+  return blobs.map((blob, i) => ({
+    key: `${stamp}-${keyOffset + i}`,
     blob,
     preview: URL.createObjectURL(blob),
   }));
 }
 
-function move(index: number, dir: -1 | 1) {
-  const next = index + dir;
-  if (next < 0 || next >= pages.value.length) return;
+function appendPages(blobs: Blob[]) {
+  const nextCount = pages.value.length + blobs.length;
+  if (nextCount > LIMITS.maxPages) {
+    throw new Error(tooManyPagesMessage(nextCount));
+  }
+  pages.value = [...pages.value, ...toDraftPages(blobs, pages.value.length)];
+}
+
+function reorder(from: number, to: number) {
+  if (from === to || from < 0 || to < 0 || from >= pages.value.length || to >= pages.value.length) {
+    return;
+  }
   const copy = [...pages.value];
-  const [item] = copy.splice(index, 1);
-  copy.splice(next, 0, item);
+  const [item] = copy.splice(from, 1);
+  copy.splice(to, 0, item);
   pages.value = copy;
 }
 
@@ -78,44 +85,44 @@ async function ingest(fileList: File[]) {
     return;
   }
   if (pdfs.length > 1) {
-    error.value = "فقط یک فایل PDF انتخاب کنید.";
+    error.value = "فقط یک فایل PDF در هر بار انتخاب کنید.";
     return;
   }
 
   busy.value = true;
   setProgress("در حال خواندن فایل…");
   try {
+    let blobs: Blob[];
     if (pdfs.length === 1) {
       setProgress("در حال خواندن PDF…");
-      const blobs = await renderPdfToJpegs(pdfs[0], (done, total) => {
+      blobs = await renderPdfToJpegs(pdfs[0], (done, total) => {
         setProgress(
           done === 0 ? "در حال آماده‌سازی صفحات…" : `تبدیل PDF: ${done} از ${total}`,
           done,
           total,
         );
       });
-      setPages(blobs);
     } else {
-      if (images.length > LIMITS.maxPages) {
-        throw new Error(tooManyPagesMessage(images.length));
-      }
       setProgress("در حال آماده‌سازی تصاویر…");
-      setPages(
-        await filesToJpegs(images, (done, total) => {
-          setProgress(
-            done === 0 ? "در حال آماده‌سازی تصاویر…" : `تبدیل تصویر: ${done} از ${total}`,
-            done,
-            total,
-          );
-        }),
-      );
+      blobs = await filesToJpegs(images, (done, total) => {
+        setProgress(
+          done === 0 ? "در حال آماده‌سازی تصاویر…" : `تبدیل تصویر: ${done} از ${total}`,
+          done,
+          total,
+        );
+      });
     }
+    if (pages.value.length + blobs.length > LIMITS.maxPages) {
+      throw new Error(tooManyPagesMessage(pages.value.length + blobs.length));
+    }
+    appendPages(blobs);
     setProgress(`${pages.value.length} صفحه آماده است`);
   } catch (err) {
     error.value = err instanceof Error ? err.message : "خطا در خواندن فایل";
-    setProgress("");
+    setProgress(pages.value.length ? `${pages.value.length} صفحه آماده است` : "");
   } finally {
     busy.value = false;
+    if (fileInput.value) fileInput.value.value = "";
   }
 }
 
@@ -134,6 +141,7 @@ async function submit() {
     const created = await createCatalog({
       title: title.value,
       effect: effect.value,
+      frame: frame.value,
       flipMs: flipMs.value,
       pages: pages.value.map((p) => p.blob),
     });
@@ -178,8 +186,9 @@ async function submit() {
         @drop.prevent="onDrop"
       >
         <p>فایل را اینجا رها کنید یا انتخاب کنید</p>
+        <p v-if="pages.length" class="drop-hint">می‌توانید تصویر یا PDF بیشتری اضافه کنید</p>
         <button class="btn" type="button" :disabled="busy" @click="fileInput?.click()">
-          انتخاب فایل
+          {{ pages.length ? "افزودن فایل" : "انتخاب فایل" }}
         </button>
         <input
           ref="fileInput"
@@ -190,14 +199,9 @@ async function submit() {
         />
       </div>
 
-      <div class="field">
-        <label>عنوان (اختیاری)</label>
-        <input v-model="title" type="text" placeholder="کاتالوگ" maxlength="80" />
-      </div>
-
-      <div class="field">
-        <label>افکت ورق‌زدن</label>
-        <EffectSelect v-model="effect" />
+      <div v-if="pages.length" class="field pages-field">
+        <label>صفحات ({{ pages.length }}) — بکشید تا جابه‌جا کنید</label>
+        <PageList :pages="pages" @reorder="reorder" @remove="remove" />
       </div>
 
       <div class="field">
@@ -215,9 +219,19 @@ async function submit() {
         </div>
       </div>
 
-      <div v-if="pages.length" class="field">
-        <label>صفحات ({{ pages.length }})</label>
-        <PageList :pages="pages" @move="move" @remove="remove" />
+      <div class="field">
+        <label>عنوان (اختیاری)</label>
+        <input v-model="title" type="text" placeholder="کاتالوگ" maxlength="80" />
+      </div>
+
+      <div class="field">
+        <label>افکت ورق‌زدن</label>
+        <EffectSelect v-model="effect" />
+      </div>
+
+      <div class="field">
+        <label>قالب نمایش</label>
+        <FrameSelect v-model="frame" />
       </div>
 
       <p v-if="progress && !busy" class="ok">{{ progress }}</p>
diff --git a/client/src/pages/ViewPage.vue b/client/src/pages/ViewPage.vue
index 7b50228..3cfd454 100644
--- a/client/src/pages/ViewPage.vue
+++ b/client/src/pages/ViewPage.vue
@@ -31,7 +31,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="stage-page" :class="{ immersive }">
+  <div class="stage-page" :class="{ immersive, framed: catalog && catalog.frame !== 'none' }">
     <header class="stage-bar page-chrome">
       <h1>{{ catalog?.title || "کاتالوگ دیجیتال" }}</h1>
       <router-link class="btn chrome-btn" to="/">ساخت جدید</router-link>
@@ -43,6 +43,7 @@ onMounted(async () => {
       :effect="catalog.effect"
       :images="images"
       :flip-ms="catalog.flipMs"
+      :frame="catalog.frame"
       @immersive="immersive = $event"
     />
   </div>
diff --git a/client/src/styles.css b/client/src/styles.css
index 243e1dd..6c5b2d3 100644
--- a/client/src/styles.css
+++ b/client/src/styles.css
@@ -151,6 +151,12 @@ a {
   display: none;
 }
 
+.drop-hint {
+  margin: 0;
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+
 .effects {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
@@ -159,6 +165,10 @@ a {
 }
 
 .effect {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
   border: 1px solid var(--line);
   border-radius: 14px;
   padding: 12px;
@@ -167,13 +177,151 @@ a {
 }
 
 .effect input {
-  margin-left: 8px;
+  margin: 0;
+}
+
+.effect strong {
+  display: block;
+  line-height: 1.35;
 }
 
 .effect small {
   display: block;
   color: var(--muted);
-  margin-top: 4px;
+  font-size: 0.85rem;
+  line-height: 1.45;
+}
+
+.frame-mini {
+  position: relative;
+  display: block;
+  width: 52px;
+  height: 68px;
+  margin: 0 auto 10px;
+  border: 3px solid #a8a29e;
+  background: #f5f5f4;
+  box-sizing: border-box;
+}
+
+.frame-mini.none {
+  border-radius: 6px;
+  background: linear-gradient(180deg, #fff 40%, #e7e5e4);
+}
+
+.frame-mini.none::after {
+  content: "";
+  position: absolute;
+  inset: 8px;
+  background: #d6d3d1;
+  border-radius: 2px;
+}
+
+.frame-mini.phone {
+  width: 38px;
+  height: 78px;
+  border-radius: 11px;
+  border-color: #8a8580;
+  background: linear-gradient(145deg, #d4cfc8, #9a9590 45%, #6f6a66);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
+}
+
+.frame-mini.phone::before {
+  content: "";
+  position: absolute;
+  top: 9px;
+  left: 50%;
+  z-index: 2;
+  width: 16px;
+  height: 5px;
+  transform: translateX(-50%);
+  background: #0a0a0a;
+  border-radius: 99px;
+}
+
+.frame-mini.phone::after {
+  content: "";
+  position: absolute;
+  inset: 3px;
+  background: #0a0a0a;
+  border-radius: 9px;
+}
+
+.frame-mini.tablet {
+  width: 54px;
+  height: 68px;
+  border-radius: 6px;
+  background: linear-gradient(180deg, #e4e4e7, #a1a1aa);
+  border-color: #71717a;
+}
+
+.frame-mini.tablet::before {
+  content: "";
+  position: absolute;
+  top: 4px;
+  left: 50%;
+  width: 4px;
+  height: 4px;
+  transform: translateX(-50%);
+  background: #27272a;
+  border-radius: 50%;
+}
+
+.frame-mini.tablet::after {
+  content: "";
+  position: absolute;
+  inset: 10px 6px 12px;
+  background: #111;
+  border-radius: 3px;
+}
+
+.frame-mini.frame-modern {
+  border-width: 5px;
+  border-color: #1c1917;
+  background: #111;
+}
+
+.frame-mini.frame-modern::after {
+  content: "";
+  position: absolute;
+  inset: 5px;
+  background: #fff;
+}
+
+.frame-mini.frame-kids {
+  border-radius: 14px;
+  border: none;
+  background: linear-gradient(135deg, #fb7185, #fbbf24 50%, #34d399);
+  padding: 5px;
+  box-shadow: 0 3px 10px rgba(251, 113, 133, 0.35);
+}
+
+.frame-mini.frame-kids::after {
+  content: "";
+  position: absolute;
+  inset: 8px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: inset 0 0 0 2px #fde68a;
+}
+
+.frame-mini.frame-classic {
+  border: none;
+  background: linear-gradient(145deg, #a16207, #78350f);
+  padding: 6px;
+  box-shadow: inset 0 0 0 2px #fbbf24;
+}
+
+.frame-mini.frame-classic::after {
+  content: "";
+  position: absolute;
+  inset: 10px;
+  background: #f5f0e6;
+  box-shadow: inset 0 0 0 1px #d6d3d1;
+}
+
+.effects.frames .effect {
+  align-items: center;
+  text-align: center;
 }
 
 .flip-speed {
@@ -192,32 +340,94 @@ a {
   white-space: nowrap;
 }
 
-.pages {
+.pages-field {
+  margin-top: 4px;
+}
+
+.pages-grid {
   display: grid;
-  gap: 8px;
-  margin-top: 12px;
+  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+  gap: 12px;
+  margin-top: 10px;
 }
 
-.page-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  border: 1px solid var(--line);
+.page-tile {
+  position: relative;
+  aspect-ratio: 3 / 4;
   border-radius: 12px;
-  padding: 8px;
-  background: #fff;
+  overflow: hidden;
+  border: 2px solid var(--line);
+  background: #f5f5f4;
+  cursor: grab;
+  user-select: none;
+  touch-action: none;
+  transition:
+    border-color 0.15s ease,
+    transform 0.15s ease,
+    box-shadow 0.15s ease;
 }
 
-.page-row img {
-  width: 52px;
-  height: 68px;
+.page-tile:active {
+  cursor: grabbing;
+}
+
+.page-tile.dragging {
+  opacity: 0.45;
+  transform: scale(0.96);
+}
+
+.page-tile.drop-target {
+  border-color: #b45309;
+  box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.25);
+}
+
+.page-tile img {
+  display: block;
+  width: 100%;
+  height: 100%;
   object-fit: cover;
-  border-radius: 6px;
-  background: #eee;
+  pointer-events: none;
 }
 
-.page-row .grow {
-  flex: 1;
+.page-num {
+  position: absolute;
+  bottom: 6px;
+  right: 6px;
+  z-index: 1;
+  min-width: 22px;
+  height: 22px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: rgba(28, 25, 23, 0.75);
+  color: #fff;
+  font-size: 0.75rem;
+  line-height: 22px;
+  text-align: center;
+  pointer-events: none;
+}
+
+.page-delete {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  z-index: 2;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: #dc2626;
+  color: #fff;
+  font-size: 1rem;
+  line-height: 1;
+  cursor: pointer;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+  display: grid;
+  place-items: center;
+}
+
+.page-delete:hover {
+  background: #b91c1c;
 }
 
 .icon-btn,
@@ -430,12 +640,264 @@ a {
   height: 100dvh;
 }
 
-.stage-page.immersive .magazine-frame,
-.stage-page.immersive .fx-stage {
+.stage-page.immersive:not(.framed) .magazine-frame,
+.stage-page.immersive:not(.framed) .fx-stage {
   width: 100%;
   height: 100%;
 }
 
+.viewer-wrap.chrome-hidden > .page-chrome {
+  display: none !important;
+}
+
+/* ── device shells (frame / phone / tablet) ── */
+.device-shell {
+  position: relative;
+  margin: 0 auto;
+  flex-shrink: 0;
+  display: block;
+  box-sizing: border-box;
+  filter: drop-shadow(0 20px 44px rgba(0, 0, 0, 0.55));
+}
+
+.device-bezel {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.device-screen {
+  position: absolute;
+  overflow: hidden;
+  background: #000;
+  z-index: 1;
+}
+
+.device-shell.phone {
+  /* نسبت نزدیک به آیفون پرو مکس (~19.5:9) */
+  width: min(292px, 86vw);
+  height: min(632px, 72dvh);
+}
+
+.device-shell.tablet {
+  width: min(520px, 94vw);
+  height: min(680px, 62dvh);
+}
+
+.device-shell.frame-modern {
+  width: min(420px, 92vw);
+  height: min(560px, 62dvh);
+}
+
+.device-shell.frame-kids {
+  width: min(400px, 92vw);
+  height: min(500px, 62dvh);
+}
+
+.device-shell.frame-classic {
+  width: min(440px, 92vw);
+  height: min(560px, 62dvh);
+}
+
+
+.device-shell.phone .device-bezel {
+  /* بدنه تیتانیوم طبیعی آیفون پرو مکس */
+  background:
+    linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent 8%, transparent 92%, rgba(0, 0, 0, 0.18)),
+    linear-gradient(180deg, #e8e4df 0%, #c4beb6 18%, #a59e96 50%, #8f887f 82%, #b7b0a8 100%);
+  border-radius: 48px;
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
+    inset 0 0 0 2.5px #6d6760,
+    0 0 0 1px #4a4641,
+    0 18px 40px rgba(0, 0, 0, 0.4);
+}
+
+.device-shell.phone .device-screen {
+  top: 1.1%;
+  right: 2.4%;
+  bottom: 1.1%;
+  left: 2.4%;
+  border-radius: 42px;
+  background: #000;
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
+    0 0 0 1px #1a1816;
+}
+
+/* کمی زوم تا حاشیهٔ عکس داخل قاب دیده نشود */
+.device-shell.phone .device-screen .catalog-stage {
+  transform: scale(1.04);
+  transform-origin: center center;
+}
+
+.device-shell.phone .page-img {
+  object-fit: cover !important;
+  width: 100% !important;
+  height: 100% !important;
+  max-width: none !important;
+  max-height: none !important;
+}
+
+.device-shell.phone .device-island {
+  position: absolute;
+  top: 2.4%;
+  left: 50%;
+  z-index: 4;
+  display: block;
+  width: 34%;
+  height: 3.6%;
+  min-height: 22px;
+  max-height: 28px;
+  transform: translateX(-50%);
+  background: #000;
+  border-radius: 99px;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+  pointer-events: none;
+}
+
+.device-shell.phone .device-island .lens {
+  position: absolute;
+  top: 50%;
+  right: 10%;
+  width: 9px;
+  height: 9px;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at 35% 35%, #4b5563, #111827 55%, #000 80%);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
+}
+
+.device-shell.phone .device-bar {
+  position: absolute;
+  bottom: 1.6%;
+  left: 50%;
+  z-index: 4;
+  width: 34%;
+  height: 4px;
+  transform: translateX(-50%);
+  background: rgba(255, 255, 255, 0.55);
+  border-radius: 99px;
+  pointer-events: none;
+}
+
+.device-shell.phone .device-btn {
+  position: absolute;
+  z-index: 0;
+  background: linear-gradient(180deg, #d2ccc5, #8a837b);
+  border-radius: 2px;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
+  pointer-events: none;
+}
+
+.device-shell.phone .device-btn.mute {
+  top: 14%;
+  right: -2px;
+  width: 3px;
+  height: 3.2%;
+  min-height: 14px;
+}
+
+.device-shell.phone .device-btn.volume {
+  top: 20%;
+  right: -2px;
+  width: 3px;
+  height: 9%;
+  min-height: 42px;
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
+    0 28px 0 0 #8a837b;
+}
+
+.device-shell.phone .device-btn.power {
+  top: 24%;
+  left: -2px;
+  width: 3px;
+  height: 8%;
+  min-height: 48px;
+}
+
+.device-shell.tablet .device-bezel {
+  background: linear-gradient(180deg, #fafafa 0%, #e4e4e7 48%, #a1a1aa 100%);
+  border-radius: 18px;
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
+    0 0 0 2px #71717a,
+    0 0 0 4px rgba(0, 0, 0, 0.12);
+}
+
+.device-shell.tablet .device-screen {
+  top: 7%;
+  right: 2.8%;
+  bottom: 2.8%;
+  left: 2.8%;
+  border-radius: 4px;
+}
+
+.device-shell.tablet .device-cam {
+  position: absolute;
+  top: 2.8%;
+  left: 50%;
+  z-index: 2;
+  width: 7px;
+  height: 7px;
+  transform: translateX(-50%);
+  background: #27272a;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px #52525b;
+  pointer-events: none;
+}
+
+.device-shell.frame-modern .device-bezel {
+  background: #fafafa;
+  box-shadow:
+    0 0 0 4px #e7e5e4,
+    0 0 0 8px #1c1917;
+}
+
+.device-shell.frame-modern .device-screen {
+  top: 4%;
+  right: 4%;
+  bottom: 4%;
+  left: 4%;
+}
+
+.device-shell.frame-kids .device-bezel {
+  background: linear-gradient(135deg, #fb7185, #fbbf24 45%, #34d399);
+  border-radius: 28px;
+  box-shadow: 0 0 0 5px #fff;
+}
+
+.device-shell.frame-kids .device-screen {
+  top: 5%;
+  right: 5%;
+  bottom: 5%;
+  left: 5%;
+  border-radius: 12px;
+  box-shadow: inset 0 0 0 3px #fde68a;
+}
+
+.device-shell.frame-classic .device-bezel {
+  background:
+    radial-gradient(circle at 25% 15%, #fde68a, transparent 42%),
+    linear-gradient(145deg, #b45309, #78350f 55%, #451a03);
+  border-radius: 6px;
+  box-shadow:
+    inset 0 0 0 4px #fbbf24,
+    0 0 0 2px #78350f,
+    0 14px 32px rgba(0, 0, 0, 0.4);
+}
+
+.device-shell.frame-classic .device-screen {
+  top: 7%;
+  right: 6%;
+  bottom: 7%;
+  left: 6%;
+  box-shadow: inset 0 0 0 2px #d6d3d1;
+}
+
 .tap-exit {
   position: absolute;
   inset: 0;
@@ -486,6 +948,82 @@ a {
   .viewer-wrap:not(.immersive) {
     padding: 10px 8px 16px;
   }
+
+  /* قاب آیفون روی موبایل واقعی: تا حد ممکن پر کردن صفحه */
+  .stage-page.framed {
+    height: 100dvh;
+    max-height: 100dvh;
+    overflow: hidden;
+  }
+
+  .stage-page.framed > .page-chrome {
+    padding: 6px 8px;
+  }
+
+  .viewer-wrap.framed {
+    padding: 4px 6px 8px;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .viewer-wrap.framed > .stage-bar {
+    width: 100%;
+    flex-shrink: 0;
+    margin-bottom: 4px;
+  }
+
+  .device-shell.phone {
+    width: min(96vw, calc((100dvh - 7.2rem) * 9 / 19.5));
+    height: min(calc(100dvh - 7.2rem), calc(96vw * 19.5 / 9));
+    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45));
+  }
+
+  .device-shell.phone .device-bezel {
+    border-radius: clamp(30px, 11vw, 48px);
+  }
+
+  .device-shell.phone .device-screen {
+    top: 0.9%;
+    right: 2%;
+    bottom: 0.9%;
+    left: 2%;
+    border-radius: clamp(26px, 9.5vw, 42px);
+  }
+
+  .device-shell.phone .device-btn {
+    display: none;
+  }
+
+  .device-shell.phone .device-island {
+    top: 2%;
+    width: 32%;
+    min-height: 18px;
+    max-height: 24px;
+  }
+
+  .device-shell.phone .device-island .lens {
+    width: 7px;
+    height: 7px;
+  }
+
+  .device-shell.phone .device-bar {
+    bottom: 1.2%;
+    height: 3px;
+  }
+
+  /* تمام‌صفحه موبایل: قاب تقریباً کل صفحه، بدون حذف طرح */
+  .viewer-wrap.framed.chrome-hidden {
+    padding: 2px;
+  }
+
+  .viewer-wrap.framed.chrome-hidden .device-shell.phone {
+    width: min(calc(100vw - 4px), calc((100dvh - 4px) * 9 / 19.5));
+    height: min(calc(100dvh - 4px), calc((100vw - 4px) * 19.5 / 9));
+  }
+
+  .viewer-wrap.framed.chrome-hidden .device-shell.phone .device-screen .catalog-stage {
+    transform: scale(1.1);
+  }
 }
 
 .auto-hint {
@@ -585,3 +1123,76 @@ a {
   max-height: 92vh;
   max-width: 100%;
 }
+
+.viewer-wrap.framed {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  min-height: 0;
+  padding: 12px;
+  overflow: auto;
+}
+
+.viewer-wrap.framed .device-shell {
+  margin: 0 auto;
+  z-index: 2;
+}
+
+.viewer-wrap.framed.cinematic {
+  background: transparent;
+  border-radius: 0;
+}
+
+.catalog-stage {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.viewer-wrap.framed .catalog-stage {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+.device-screen .catalog-stage {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.viewer-wrap.framed .magazine-frame,
+.viewer-wrap.framed .fx-stage,
+.viewer-wrap.framed .scroll-list {
+  flex: 1;
+  width: 100% !important;
+  height: 100% !important;
+  max-height: 100% !important;
+  min-height: 0 !important;
+  margin: 0 !important;
+}
+
+.viewer-wrap.framed .magazine-outer {
+  width: 100% !important;
+  height: 100% !important;
+  max-height: 100% !important;
+}
+
+.stage-page.framed {
+  align-items: stretch;
+}
+
+.stage-page.framed .viewer-wrap {
+  justify-content: center;
+  min-height: 0;
+  height: auto;
+  flex: 1;
+}
diff --git a/docs/PROJECT.md b/docs/PROJECT.md
index c4cf80c..3020a86 100644
--- a/docs/PROJECT.md
+++ b/docs/PROJECT.md
@@ -78,6 +78,7 @@
 - یک PDF **یا** چند تصویر (نه هر دو با هم در یک کاتالوگ)
 - ترتیب تصاویر = ترتیب انتخاب / ترتیب نام فایل؛ امکان جابه‌جایی قبل از ساخت
 - انتخاب یکی از افکت‌های ورق‌زدن
+- انتخاب قالب نمایش (بدون قالب، گوشی، تبلت، قاب مدرن/کودکانه/کلاسیک). قالب دور کل کاتالوگ است و صفحات داخل همان صفحه/شیشه ورق می‌خورند. بعد از ساخت عوض نمی‌شود
 - تعیین زمان ورق‌خوردن (۴۰۰ تا ۵۰۰۰ میلی‌ثانیه؛ پیش‌فرض ۱ ثانیه). بعد از ساخت عوض نمی‌شود. روی مجله، اسلاید، محو و کارت اعمال می‌شود؛ اسکرول عمودی فقط فاصلهٔ پخش خودکار را از همین زمان می‌گیرد
 - عنوان اختیاری (اگر خالی باشد: «کاتالوگ»)
 
@@ -177,6 +178,7 @@ Nuxt و فریم‌ورک سنگین بک‌اند رد شد: نمایش کات
 | `delete_token` | متن، حدود ۲۴ کاراکتر | فقط برای حذف؛ در URL مشاهده نیست |
 | `title` | متن | عنوان |
 | `effect` | متن | یکی از شناسه‌های بخش ۶ |
+| `frame` | متن | قالب پوسته: `none`، `phone`، `tablet`، `frame-modern`، `frame-kids`، `frame-classic` |
 | `page_count` | عدد | تعداد صفحات ذخیره‌شده |
 | `flip_ms` | عدد | مدت انیمیشن ورق‌خوردن به میلی‌ثانیه (۴۰۰–۵۰۰۰) |
 | `created_at` | زمان | |
@@ -201,8 +203,8 @@ storage/catalogs/{id}/
 
 | متد | مسیر | کار |
 |---|---|---|
-| `POST` | `/catalogs` | ساخت. بدنه: تصاویر JPEG صفحات (نه خود PDF) + `title` + `effect` + `flipMs` |
-| `GET` | `/catalogs/:id` | متادیتا برای بیننده (بدون `delete_token`)؛ شامل `flipMs` |
+| `POST` | `/catalogs` | ساخت. بدنه: تصاویر JPEG صفحات (نه خود PDF) + `title` + `effect` + `flipMs` + `frame` |
+| `GET` | `/catalogs/:id` | متادیتا برای بیننده (بدون `delete_token`)؛ شامل `flipMs` و `frame` |
 | `GET` | `/catalogs/:id/pages/:n` | فایل تصویر صفحه |
 | `GET` | `/catalogs/:id/qr` | PNG کد QR. عمومی است چون فقط همان لینک مشاهده را کد می‌کند |
 | `DELETE` | `/catalogs/:id` | حذف؛ کوئری `token` باید با `delete_token` یکی باشد |
@@ -373,4 +375,4 @@ DATABASE_PATH=/var/www/ktg/data/catalogs.sqlite
 | ۲۰۲۶-۰۸-۱۸ | لودینگ هنگام خواندن فایل، آماده‌سازی صفحات و ساخت کاتالوگ |
 | ۲۰۲۶-۰۸-۱۹ | استقرار روی هاست مشترک؛ دامنه `ktg.montzar.ir`؛ پورت ۳۰۲۰؛ SQLite جدا |
 | ۲۰۲۶-۰۸-۱۹ | مخزن Gitea: `http://get.feep.ir/Mahdi/digitalcatalog.git` |
-| ۲۰۲۶-۰۸-۱۹ | لاگین بعدی اگر آمد به Nest/Postgres بقیه وصل نمی‌شود |
+| ۲۰۲۶-۰۸-۲۰ | قالب پوسته دور کاتالوگ: گوشی، تبلت، سه قاب عکس؛ SVG/CSS |
diff --git a/package.json b/package.json
index dd20dfa..ba6e29d 100644
--- a/package.json
+++ b/package.json
@@ -5,11 +5,12 @@
   "type": "module",
   "scripts": {
     "dev": "concurrently -n api,web -c blue,green \"npm run dev:api\" \"npm run dev:web\"",
-    "dev:api": "tsx --env-file=.env server/index.ts",
+    "dev:api": "tsx watch --env-file=.env server/index.ts",
     "dev:web": "vite",
     "build": "vite build",
     "start": "tsx --env-file=.env server/index.ts",
-    "test": "vitest run"
+    "test": "vitest run",
+    "migrate": "tsx scripts/migrate-db.ts"
   },
   "dependencies": {
     "@hono/node-server": "^2.1.1",
diff --git a/scripts/migrate-db.ts b/scripts/migrate-db.ts
new file mode 100644
index 0000000..3c42005
--- /dev/null
+++ b/scripts/migrate-db.ts
@@ -0,0 +1,6 @@
+import { openDatabase } from "../server/db.ts";
+import { loadEnv } from "../server/env.ts";
+
+const env = loadEnv();
+await openDatabase(env.databasePath);
+console.log("Database migrated:", env.databasePath);
diff --git a/server/catalog-repo.ts b/server/catalog-repo.ts
index 707aa22..eb74cc4 100644
--- a/server/catalog-repo.ts
+++ b/server/catalog-repo.ts
@@ -1,6 +1,6 @@
 import { eq } from "drizzle-orm";
-import type { EffectId } from "../shared/types";
-import { DEFAULT_FLIP_MS } from "../shared/types";
+import type { EffectId, FrameId } from "../shared/types";
+import { DEFAULT_FLIP_MS, DEFAULT_FRAME, isFrameId } from "../shared/types";
 import type { DbBundle } from "./db";
 import { catalogsTable } from "./schema";
 
@@ -9,22 +9,26 @@ export type CatalogRow = {
   deleteToken: string;
   title: string;
   effect: EffectId;
+  frame: FrameId;
   pageCount: number;
   flipMs: number;
   createdAt: string;
 };
 
-export type CatalogInsert = Omit<CatalogRow, "createdAt" | "flipMs"> & {
+export type CatalogInsert = Omit<CatalogRow, "createdAt" | "flipMs" | "frame"> & {
   createdAt?: string;
   flipMs?: number;
+  frame?: FrameId;
 };
 
 function toRow(record: typeof catalogsTable.$inferSelect): CatalogRow {
+  const frameRaw = record.frame ?? DEFAULT_FRAME;
   return {
     id: record.id,
     deleteToken: record.deleteToken,
     title: record.title,
     effect: record.effect as EffectId,
+    frame: isFrameId(frameRaw) ? frameRaw : DEFAULT_FRAME,
     pageCount: record.pageCount,
     flipMs: record.flipMs ?? DEFAULT_FLIP_MS,
     createdAt: record.createdAt,
@@ -36,6 +40,7 @@ export function createCatalogRepo(db: DbBundle) {
     create(input: CatalogInsert): CatalogRow {
       const createdAt = input.createdAt ?? new Date().toISOString();
       const flipMs = input.flipMs ?? DEFAULT_FLIP_MS;
+      const frame = input.frame ?? DEFAULT_FRAME;
       db.drizzle.insert(catalogsTable).values({
         id: input.id,
         deleteToken: input.deleteToken,
@@ -43,6 +48,7 @@ export function createCatalogRepo(db: DbBundle) {
         effect: input.effect,
         pageCount: input.pageCount,
         flipMs,
+        frame,
         createdAt,
       }).run();
       db.persist();
@@ -51,6 +57,7 @@ export function createCatalogRepo(db: DbBundle) {
         deleteToken: input.deleteToken,
         title: input.title,
         effect: input.effect,
+        frame,
         pageCount: input.pageCount,
         flipMs,
         createdAt,
diff --git a/server/db.ts b/server/db.ts
index 327d2cb..1cae829 100644
--- a/server/db.ts
+++ b/server/db.ts
@@ -33,6 +33,7 @@ export async function openDatabase(databasePath: string): Promise<DbBundle> {
       effect TEXT NOT NULL,
       page_count INTEGER NOT NULL,
       flip_ms INTEGER NOT NULL DEFAULT 1000,
+      frame TEXT NOT NULL DEFAULT 'none',
       created_at TEXT NOT NULL
     )
   `);
@@ -42,6 +43,10 @@ export async function openDatabase(databasePath: string): Promise<DbBundle> {
   if (!colNames.has("flip_ms")) {
     sqlite.run("ALTER TABLE catalogs ADD COLUMN flip_ms INTEGER NOT NULL DEFAULT 1000");
   }
+  if (!colNames.has("frame")) {
+    sqlite.run("ALTER TABLE catalogs ADD COLUMN frame TEXT NOT NULL DEFAULT 'none'");
+    console.log("[db] added catalogs.frame column");
+  }
 
   const persist = () => {
     fs.mkdirSync(path.dirname(databasePath), { recursive: true });
diff --git a/server/errors.ts b/server/errors.ts
index 14a10e9..2bbdb78 100644
--- a/server/errors.ts
+++ b/server/errors.ts
@@ -12,6 +12,7 @@ export const messages = {
   tooLarge: "حجم یا تعداد صفحه بیش از حد مجاز است",
   badType: "نوع فایل پشتیبانی نمی‌شود",
   badEffect: "افکت نامعتبر است",
+  badFrame: "قالب نامعتبر است",
   notFound: "کاتالوگ پیدا نشد",
   forbiddenDelete: "اجازه حذف ندارید",
   rateLimited: "تعداد ساخت از این آدرس بیش از حد مجاز است",
diff --git a/server/routes/catalogs.ts b/server/routes/catalogs.ts
index 8043c22..2c0d058 100644
--- a/server/routes/catalogs.ts
+++ b/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 = {
diff --git a/server/schema.ts b/server/schema.ts
index e6b877f..dcb187d 100644
--- a/server/schema.ts
+++ b/server/schema.ts
@@ -7,5 +7,6 @@ export const catalogsTable = sqliteTable("catalogs", {
   effect: text("effect").notNull(),
   pageCount: integer("page_count").notNull(),
   flipMs: integer("flip_ms").notNull(),
+  frame: text("frame").notNull(),
   createdAt: text("created_at").notNull(),
 });
diff --git a/shared/types.ts b/shared/types.ts
index 5ed7bfe..a24c648 100644
--- a/shared/types.ts
+++ b/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);
diff --git a/tests/server/catalog-repo.test.ts b/tests/server/catalog-repo.test.ts
index 099bbcb..c71e01f 100644
--- a/tests/server/catalog-repo.test.ts
+++ b/tests/server/catalog-repo.test.ts
@@ -31,6 +31,7 @@ describe("catalog repo", () => {
     const found = repo.getById("abc12xyz90");
     expect(found).toEqual(created);
     expect(found?.flipMs).toBe(1000);
+    expect(found?.frame).toBe("none");
     expect(found?.deleteToken).toBe("token-token-token-token-12");
   });
 
diff --git a/tests/server/catalogs.test.ts b/tests/server/catalogs.test.ts
index 2eaeafc..f1379d5 100644
--- a/tests/server/catalogs.test.ts
+++ b/tests/server/catalogs.test.ts
@@ -26,6 +26,7 @@ function form(pages: File[], extra: Record<string, string> = {}) {
   data.set("title", extra.title ?? "");
   data.set("effect", extra.effect ?? "magazine");
   if (extra.flipMs) data.set("flipMs", extra.flipMs);
+  if (extra.frame) data.set("frame", extra.frame);
   for (const page of pages) data.append("pages", page);
   return data;
 }
@@ -56,6 +57,7 @@ describe("catalog HTTP API", () => {
     expect(publicBody.title).toBe("نمونه");
     expect(publicBody.pageCount).toBe(2);
     expect(publicBody.flipMs).toBe(1000);
+    expect(publicBody.frame).toBe("none");
     expect(publicBody.deleteToken).toBeUndefined();
     expect(JSON.stringify(publicBody)).not.toContain("delete");
   });
@@ -73,6 +75,19 @@ describe("catalog HTTP API", () => {
     expect((await pub.json()).flipMs).toBe(1800);
   });
 
+  it("stores a catalog frame", async () => {
+    const app = await testApp();
+    const created = await app.request("/api/catalogs", {
+      method: "POST",
+      body: form([jpegFile()], { frame: "phone" }),
+      headers: { "x-forwarded-for": "10.0.0.21" },
+    });
+    expect(created.status).toBe(201);
+    const { id } = await created.json();
+    const pub = await app.request(`/api/catalogs/${id}`);
+    expect((await pub.json()).frame).toBe("phone");
+  });
+
   it("clamps flip duration to the allowed range", async () => {
     const app = await testApp();
     const tooFast = await app.request("/api/catalogs", {