diff --git a/.claude/rules/data-layer.md b/.claude/rules/data-layer.md
index aefeff4..b1ffff4 100644
--- a/.claude/rules/data-layer.md
+++ b/.claude/rules/data-layer.md
@@ -18,3 +18,5 @@ paths:
 - `annotations.resolved` (NOT NULL default false) + `resolved_at` (NULL) — F10/A5: `setAnnotationResolved` **ใครก็ได้ toggle** (D6 คลายคืนได้ ต่างจาก delete ที่จำกัดเจ้าของ) + publish update event; ไม่เข้า history undo ของ F2
 - ตาราง `annotation_versions` (F19/A7): `annotation_id` เป็น uuid **ไม่ FK** (D8 — snapshot ตอน delete ต้องรอดจาก CASCADE ของแม่) + `file_id` FK CASCADE + `page_index` (restore ต้องรู้หน้า) + `kind` text `'update' | 'delete'` + index `(file_id)`; `updateAnnotation`/`deleteAnnotation` snapshot row เดิม **ก่อนเขียน/ลบ ใน transaction เดียวกัน**; `restoreVersion(versionId, userId)` — **เจ้าของเท่านั้น (D9)**: guard `userId` ทั้ง row ปัจจุบัน (ต้นทางยังอยู่) และ snapshot (ต้นทางถูกลบ) / ต้นทางยังอยู่ = **เขียนกลับ row เดิม** (snapshot ปัจจุบันก่อน) + publish update event / ต้นทางถูกลบ = สร้างใหม่ id ใหม่ + publish create event (ห้ามสร้างสำเนาใหม่ทุกกรณี — เคยทำให้เกิดรายการซ้ำบนหน้า)
 - ห้ามเพิ่มตาราง/column ที่ไม่มีในแผน (ดู out of scope §9) โดยไม่อัปเดต `docs/PLAN.md` ก่อน
+- `files.pdf_url` เก็บ path **รูปภาพ** (jpg/jpeg/png/tif/tiff) ใน `public/` ได้เหมือน PDF (N3) — **ไม่มี column kind**: ชนิดไฟล์ derive จาก extension ผ่าน `utils/file-kind.ts` เท่านั้น (จะเพิ่ม column ต้องแก้แผนก่อน); TIFF หลายเฟรม = `pageIndex` ต่อเฟรม (1 เฟรม = 1 หน้า)
+- Server Action `uploadFile` (`app/actions/files.ts`, N4): validate extension (whitelist `SAMPLE_FILE_EXTENSIONS`) + ≤ 100MB ก่อนเขียน — บันทึกเป็นไฟล์**ใหม่** `public/uploads/<uuid>.<ext>` เท่านั้น (ชื่อจาก randomUUID — ห้ามใช้ชื่อผู้ใช้ตกแต่ง path), insert row แล้ว `revalidatePath("/")` — ไม่ publish SSE event (รายการไฟล์ไม่ได้ sync ผ่าน SSE); seed-samples จัดการเฉพาะ `/samples/%` ไม่แตะ `/uploads/`
diff --git a/.claude/rules/pdf-viewer.md b/.claude/rules/pdf-viewer.md
index 23e0039..8c2778d 100644
--- a/.claude/rules/pdf-viewer.md
+++ b/.claude/rules/pdf-viewer.md
@@ -25,10 +25,12 @@ paths:
 - Tool `pan` (มือเลื่อนหน้า — ปุ่มแยกถัดจาก select ในแถบ tool): ลากบน `<main>` = `window.scrollBy` สวนทางการลาก + cursor grab/grabbing; ระหว่างใช้ pan ทุก overlay ปิด pointer-events ผ่านตัวแปร `overlayFrozen` (`inkActive || pan`) **ยกเว้น InkLayer ต้องไม่ active** (ไม่งั้น pan กลายเป็นวาดเส้น)
 - HIGHLIGHT มี `style?` 4 แบบ: highlight ทึบเหมือนเดิม / underline = เส้นที่ขอบล่าง rect ต่อบรรทัด / strikethrough = เส้นกลางบรรทัด / squiggle = svg path ขยุกขยิก (`squigglePath`) ที่ขอบล่าง — export วาด line/sine แทน rect ทึบ; สร้างได้จาก **tool "highlight" ทางเดียว** (dropdown บนปุ่ม = รูปแบบ + สี → คลุมข้อความ = สร้างทันที พร้อม live preview ผ่าน `selectionchange` บน desktop / custom selection ของ `useCustomSelection` บนจอสัมผัส + ซ่อน native selection) — tool "เลือกข้อความ" คลุมแล้วเกิด popup ไม่ได้แล้ว (ถอดออก) และคีย์ลัด `H` สลับไป tool highlight
 - **จอสัมผัส (iOS/Android) + tool highlight ใช้ custom selection ผ่าน `hooks/useCustomSelection.ts`** (ไม่พึ่ง native selection ของ OS อีก — OS ยึด gesture ปล่อยนิ้วไปแสดงเมนู/handles เอง ทำให้ commit-on-release ทำไม่ได้): เปิดเฉพาะอุปกรณ์ที่ `matchMedia("(pointer: coarse)")` จริง (`enabled = tool highlight + coarse` — **desktop ใช้ native mouse selection + commit ตอน mouseup ตามเดิม ไม่เปลี่ยน**; tool อื่นบนจอสัมผัสก็ native selection + long-press copy ของ OS ตามปกติ) — Pointer Events ชุดเดียวคุม mouse+touch บน `<main>`: `pointerdown` เก็บ anchor caret (จาก `caretRangeFromPoint` → fallback `caretPositionFromPoint` → ไม่มี = bail เงียบ ๆ; ต้องเป็น text node + เริ่มบน `.textLayer` เท่านั้น) ยังไม่ทำอะไร → เลย threshold **8px** จึง `setPointerCapture` + เริ่ม select จริง (**จับ pointer ตอนเริ่ม select ไม่ใช่ pointerdown** — capture ตั้งแต่กดจะ retarget click ไป container จน tap เลือก annotation/ปุ่ม pin ใช้ไม่ได้; tap ที่ไม่ขยับ = ไม่ capture click ไปถึงเป้าหมายตามเดิม และ click หลังลากจริง retarget ไป main = ไม่หลุดเข้า handlePageClick) — ระหว่างลาก: อ่าน focus caret ที่จุดนิ้ว**เลื่อนขึ้น 12px** (`FINGER_OFFSET_PX` เฉพาะ pointerType touch — นิ้วบังข้อความ), **word snap** ขอบคำทั้ง anchor/focus (`Intl.Segmenter` แยกคำไทยได้ → fallback regex `\S+`, กลางช่องว่าง = ไม่ขยาย), live preview ผ่าน **rAF throttle** (Range → `getClientRects` → `rectsInSweptPath` กรองแนวเส้นทางนิ้ว → `rectToPercent`+`mergeRectsByLine` — รูปร่างเดียวกับ liveMark ส่งเข้า PdfPage ทดแทนตอนมีค่า `customSelPreview ?? liveMark` — **จุดเส้นทางที่ใช้กรองต้องเป็นจุดเดียวกับที่หา caret (จอสัมผัส = จุด y−12)**: เก็บ `anchorPathPt` = จุด probe ที่ resolve anchor สำเร็จ และ `pathEnd` = จุด focus ที่หัก offset แล้ว ใช้ทั้งใน preview และ payload commit — ใช้พิกัดนิ้ว raw ตรง ๆ จะคลาด 12px จนบรรทัดเป้าหมายโดน lineTol ตัดทิ้ง (ลากขึ้น) หรือมาร์กเกิน (ลากลง) เมื่อฟอนต์เล็ก), **auto-scroll** rAF loop เมื่อนิ้วใกล้ขอบบน/ล่าง viewport 60px (เลื่อนแล้วคำนวณ preview ใหม่ที่จุดนิ้วเดิม) — **`pointerup` = commit ทันที**ผ่าน `onCommit(range,start,end)` → `handleCustomSelectionCommit` (ยืม `selDragStart/EndRef` ชั่วคราว + `readTextSelection(pi, { withText: true, range })` ชุดเดียวกับ desktop) → `commitHighlight` — **ไม่มีปุ่มยืนยันลอย/debounce/snapshot ใน ref อีกต่อไป** (selectionchange ของ tool highlight บน coarse ไม่ยิงเพราะไม่มี native selection); ระหว่าง enabled ให้ `<main>` ได้ class `.pdf-custom-select` (globals.css: `user-select`/`-webkit-user-select`/`-webkit-touch-callout: none` + `touch-action: none` กัน browser ยึด gesture เป็น scroll → pointercancel; restore `user-select:text` ให้ input/textarea/contenteditable ใต้ main) **ถอดทันที**เมื่อ tool เปลี่ยน/ปิด — ผลคือช่วง tool highlight บนจอสัมผัส **ลากที่ไหนก็ไม่เลื่อนหน้า** (gesture เป็นของ selection หมด เลื่อนหน้าต่อได้ด้วย auto-scroll ระหว่างลาก หรือสลับ tool) — เคลียร์ state ครบทุกทาง: pointerup/pointercancel (cancel = ทิ้ง selection ไม่ commit), enabled เปลี่ยน, unmount — ยกเลิก rAF ทั้ง preview/auto-scroll ไม่มี loop ค้าง — **กัน "ลากแล้วบางทีไม่ commit" ด้วยกลไก 3 จุด** (bug report 2026-09-15): (1) การหา caret เป็น 4 ชั้นเรียงตามต้นทุน (`resolveTextCaretDeep` — ใช้**เฉพาะตอน pointerdown** กับทั้งจุดชดเชยนิ้ว y−12 และจุดแตะจริง): ① `caretRangeFromPoint`/`caretPositionFromPoint` → startContainer เป็น Element (จุดตก gap/padding ระหว่าง span) ให้ดำดิ่งหา text node ผ่าน `childNodes[startOffset]` + `findFirstTextNode` DFS → ② retry ขยับพิกัด 8 ทิศ (±2/±3px) → ③ `elementsFromPoint` เจาะผ่าน overlay ที่ไร้ text (SVG ของ InkLayer/มาร์ก/กรอบ) จับ span ข้อความใต้จุด → ④ span ของหน้านั้นที่**ใกล้สุดแนวตั้ง ≤40px** (`NEAREST_SPAN_MAX_PX` — เกินถือว่าจุดนั้นไม่มีข้อความจริง) — หมดทั้ง 4 ชั้นค่อย bail เป็น tap ธรรมดา; **ระหว่างลาก (ทุก rAF frame) ใช้เฉพาะชั้น ①② ที่ถูก** — หาไม่เจอ (ลากผ่านพื้นที่ว่าง/ช่องว่างระหว่างหน้า) ให้**คง focus เดิมจาก frame ก่อน** (`dragRef.lastFocus`) แทน re-scan ด้วยชั้นแพง — selection หยุดรอที่ข้อความสุดท้ายแล้วขยายต่อเมื่อนิ้วถึงข้อความอีก (cache รายชื่อ span ต่อ 1 gesture สำหรับชั้น ④) (2) `lastRef` (payload commit ล่าสุด) **เคลียร์เฉพาะตอน pointerdown, finish และเมื่อหน้า anchor ถูก virtualization unmount กลางลาก (`anchorPageEl.isConnected === false` — rects ของ detached nodes ว่างหมด ต้องไม่ commit ของเก่าเงียบ ๆ) เท่านั้น** — frame ที่ `rectsInSweptPath` กรองว่าง (ลากเร็ว sample ห่าง/นิ้วสั่นตอนปล่อย) ล้างแค่ preview เพื่อให้ pointerup ยัง commit selection ล่าสุดที่ไม่ว่างได้ (3) ลากล้ำเข้าหน้าถัดไป (range คร่อม 2 หน้า → หา `[data-page]` ไม่ได้) **ห้าม bail** — `clampToAnchorPage`: clamp ฝั่ง focus ไปท้ายหน้า anchor (ลากลง) หรือต้นหน้า anchor (ลากขึ้น) ด้วย text node แรก/สุดท้ายของ textLayer หน้า anchor (`anchorPageEl` เก็บตั้งแต่ pointerdown, boundary cache ต่อ gesture ใน `clampBounds` — ห้ามเดิน TreeWalker ใหม่ทุก rAF frame) — selection จบที่ขอบหน้า anchor แทนการหายทั้งเส้น
-- **tap/คลิกที่ใช้ "ปิดเมนู" ต้องไม่สร้างรายการ**: outside-click ปิดเมนูที่ `mousedown` ก่อน `click` ยิงถึง page wrapper ทำให้ tool comment/textbox/stamp วางรายการจาก tap ปิดเมนูโดยไม่ตั้งใจ — `handlePageClick` เช็ค `menuClosedAtRef` (เขียนทุก path ปิดเมนูผ่าน `markMenuClosed`: outside-click/Escape/switchTool/เลื่อนแถบ/resize) และเฉย 300ms แรก คลิกที่สองค่อยวาง (มาตรฐาน dropdown ทั่วไป ใช้ทั้ง desktop และ touch)
+- **tap/คลิกที่ใช้ "ปิดเมนู" ต้องไม่สร้างรายการ**: outside-click ปิดเมนูที่ `mousedown` ก่อน `click` ยิงถึง page wrapper ทำให้ tool comment/textbox/stamp วางรายการจาก tap ปิดเมนูโดยไม่ตั้งใจ — `handlePageClick` เช็ค `menuClosedAtRef` (เขียนทุก path ปิดเมนูผ่าน `markMenuClosed`: outside-click/Escape/switchTool/เลื่อนแถบ/resize; ยกเว้นคีย์ B ปิดเมนูเพื่อเปิด popup bookmark — คีย์บอร์ดไม่มี click หลงเหลือให้กลืน) และเฉย 300ms แรก คลิกที่สองค่อยวาง (มาตรฐาน dropdown ทั่วไป ใช้ทั้ง desktop และ touch)
+- **popup บนหน้าเปิดได้ทีละชุด ห้ามค้างเปิดซ้อนกัน** (bug "กดแก้ไขแล้วกดปุ่ม tool popup ไม่ปิด/ซ้อนกัน"): ปุ่ม dropdown ทั้ง 5 **เรียก `switchTool` เสมอแม้เป็น tool เดิม** (จำ intent เปิด/พับเมนูไว้ก่อนเรียก เพราะ `switchTool` ปิดเมนูทุกตัว) เนื่องจาก `switchTool` เป็นที่เดียวที่เคลียร์ popup บนหน้าทั้งหมด — composer/pin popover/แผง selection/editing comment·textbox + popup bookmark (`setBookmarkComposer(null)`); คลิกหน้าว่าง (`handlePageClick`) ปิด popover ของ pin + popup bookmark; เลือกรายการอื่น (`handleSelectAnnotation`/`goToAnnotation`) ปิด popover เดิม; popover ของ COMMENT เปิดอยู่ (`openPinId === selectedId`) = **ไม่ render กรอบ selection/แผงเครื่องมือของตัวนั้น** — bbox ของ COMMENT ครอบพื้นที่ pin พอดี แผงจะทับ popover และแถบ handle บังการคลิก (sidebar ยังตาม `selectedId` ไฮไลต์เหมือนเดิม)
 - **คลุมข้อความได้ 5 tool** (`TEXT_SELECTION_TOOLS` set ใน PDFViewer: select/highlight/comment/textbox/stamp — ที่เหลือ textLayer ปิด pointer-events คลุมไม่ได้): ทั้งหมด inject `<style>` ซ่อน native selection + ฟัง `selectionchange` วาดของเราเอง (highlight = preview มาร์ก, ที่เหลือ = selection สีฟ้า) + tracking เส้นทางลาก (`selDragStart/EndRef` ที่ mousedown/move) + Ctrl+C กรองข้อความตามเส้นทาง — comment/textbox/stamp ปล่อยเมาส์จากการลากคลุม**ไม่วางรายการ** (guard `!selection.isCollapsed` ต้น `handlePageClick`: click ที่ยิงต่อจาก drag คลุมต้องเฉยไป เหมือน tool เลือกข้อความ คลิกล้วน ๆ ต่างหากที่เปิด composer/วางตรายาง)
 - กรอบ selection (F1) ของทุกชนิดที่เป็นรายการของตัวเองมี**แผงเครื่องมือ** (`w-60` เหมือน dropdown ของ tool) ที่ใช้**ตัวควบคุมชุดเดียวกับ dropdown ของ tool ผู้สร้าง** (จาก `components/pdf/ToolControls.tsx` — ColorSwatches/NumberCombo/PanelRow แชร์กับ PDFViewer) ตามชนิด: HIGHLIGHT = สี+รูปแบบมาร์ก, DRAW/SHAPE = สี+ความหนา (×10), STAMP = สี+ขนาด, TEXTBOX = สี+ขนาด+ความทึบ+ตัวหนา+จัดแนว — ปิดท้ายด้วย **ปุ่มลบ** (`onDelete`) เสมอ; ชนิดที่ไม่มีสไตล์ให้แก้ (REDACTION/COMMENT) ได้อย่างน้อยปุ่มลบ — **HIGHLIGHT ไม่มี handle ย้าย/ขยาย** (ผูกกับตำแหน่งข้อความจริง เลือกเพื่อเปลี่ยนสี/รูปแบบ/ลบได้อย่างเดียว) — handle ทุกตัว (ขอบ 4 + มุม 4) ต้องมี `touch-none`: จอสัมผัสไม่มี touch-action:none แล้ว browser ยึด gesture เป็น scroll ส่ง `pointercancel` กลายเป็นเลื่อนหน้าแทนการลาก (InkLayer มี `touch-none` อยู่แล้ว) — บน `pointer: coarse` ขยาย hit area โดยไม่ขยายของที่มองเห็น (rule ใน globals.css เท่านั้น desktop ไม่แตะ): มุม/แถบเป็น div ขนาดจาก inline style (10px/8px) แก้ตรง ๆ ไม่ได้ จึงใช้ `::after` (hook `sel-handle` hit 28px, `sel-strip` hit 16px), ปุ่มแผงใช้ `sel-panel-btn` (36px), swatch ในแผง `.sel-panel .color-swatches` (32px), ปุ่ม icon ใน sidebar `aside[data-sidebar] button.shrink-0` (32px), ปุ่มเล็กใน composer/popover/pin ใช้ class `coarse-36` — ปุ่มในเมนูที่ portal ต้องครอบด้วย selector `[data-tool-menu]` คู่กับ `header .touch-44 .z-50` เดิม
 - TEXTBOX (F17) `position` เป็น**มุมซ้ายบนของกล่องเสมอ** — `align` จัดข้อความ*ใน*กล่องอย่างเดียว (`textAlign`, แบบ Smallpdf: กดจัดแนวแล้วกล่องไม่ขยับ ขยับแค่ข้อความข้างใน — เคยทดลองให้ align เป็น "จุดยึด" ที่ขยับทั้งกล่องแล้วถอดออกเพราะผู้ใช้รู้สึกว่ากล่องเด้ง); ความกว้างสูงสุดจาก `textboxMaxWidthPct(x)` (`utils/geometry.ts`) บีบตามพื้นที่จริงถึงขอบขวา (cap 50% ของหน้า, ขั้นต่ำ 1%) **กันข้อความล้นขอบกระดาษ** — ใช้สูตรเดียวกันทั้ง render (`TextboxStampLayer`), bbox กรอบ selection/hit-test (`annotationBBox`) และ export PDF
 - TEXTBOX กล่องกว้างคงที่ (`width?` สไตล์ Smallpdf/Acrobat): กล่องที่สร้างใหม่คลิกเดียวได้ `width = min(TEXTBOX_DEFAULT_WIDTH_PCT=30, textboxMaxWidthPct)` — **ลากขอบซ้าย/ขวาของกรอบ selection = ปรับความกว้าง** (mode `wleft`/`wright` ใน AnnotationSelectionLayer: ขอบซ้ายขยับ = เลื่อนกล่อง+เปลี่ยนกว้าง (`position.x` = ขอบซ้ายตรง ๆ), ขอบขวาขยับ = เปลี่ยนกว้างอย่างเดียว, clamp กว้าง 2–50% และอยู่ในหน้า) ฟอนต์คงขนาด ข้อความ wrap ใหม่ ส่วนสูงตามจำนวนบรรทัดอัตโนมัติ — กล่องแบบนี้**ซ่อนมุมกรอบ** (scale ไม่มีความหมาย) ย้ายกล่องใช้ขอบบน/ล่าง; กล่องเก่าที่ไม่มี `width` = shrink-to-fit หุ้มข้อความตามพฤติกรรมเดิมทั้งหมด; ฟอนต์ default ตอนสร้าง = `TEXTBOX_DEFAULT_FONT_SIZE_PCT` 2.5% (≈15px — เดิม 1.2% ≈ 7px อ่านไม่ออก และเล็กกว่า preset ต่ำสุด 10px ของตัวเอง) และเข้าโหมดแก้ข้อความได้จากปุ่ม "แก้ไขข้อความ" ในแผง selection (`onStartEdit`) นอกเหนือจาก double-click (จอสัมผัส iOS double-tap = zoom หน้า dblclick จึงใช้ไม่ได้)
 - คลิกเลือกบนหน้า: tool select/highlight คลิกบน annotation = `setSelectedId` ผ่าน `hitTestAnnotation` (DRAW/SHAPE ใช้ hit-test แม่นเดียวกับ eraser, HIGHLIGHT ดู rect, ที่เหลือ bbox+padding) — เช็คจากรายการหลังสุดก่อน (ตัวบนสุดชนะ), คลิกที่ว่าง = deselect; ใช้ `visibleAnnotations` (เคารพ filter รายคน F4)
 - Tooltip hover (N1): `onMouseMove` ของ page wrapper ทำ hit-test ชุดเดียวกับคลิก → `hoveredId` state **เดี่ยวระดับ root เปลี่ยนเฉพาะเมื่อ id เปลี่ยน** (ห้าม setState ทุก mousemove, hit-test เดินจากท้าย array ไม่ allocate ต่อ event) → tooltip "ชนิด · ผู้ทำ + โน้ต" ลอยข้าง bbox (`pointer-events: none` เสมอ, z-[5], ยกเว้น COMMENT) — ปิดช่วง tool ที่รับ pointer (`draw/shape/erase/redact/pan`), `e.buttons !== 0` และตอน `openPinId !== null` (popover ของ pin เปิดอยู่)
+- **N3 ไฟล์รูปภาพ (jpg/jpeg/png/tif — `fileKindFromUrl` จาก `utils/file-kind.ts`):** รูป**โหลดจาก static `pdfUrl` ตรง ๆ ไม่ผ่าน `/api/pdf`** (ไม่มี ToUnicode ให้ซ่อม — route นั้นมี defensive branch คืน bytes ดิบ + content-type รูป กัน stray call เข้า `fixPdfActualText`) — หน้ารูป render เป็น `<img>` แทน canvas ที่ z-1 (`pointer-events:none` เหมือน canvas — invariant #3, DOM order ไม่ขยับ) + **ไม่มี textLayer** (conditional render เฉพาะ pdf) → PdfPage เรียก `onTextLayerRendered(pageIndex, 0)` ให้ hint "ภาพสแกน" + custom selection จอสัมผัส bail เอง — **toolbar คงทุก tool รวม HIGHLIGHT** (คลุมข้อความบนรูปไม่ได้ = no-op มี hint อธิบาย); `pageSizes` จาก `naturalWidth/Height` (browser คิด EXIF orientation ให้แล้ว) **normalize กว้าง `IMAGE_PAGE_WIDTH`=595** สัดส่วนเดิม — scale contract เดียวกับ export (`utils/image-to-pdf.ts`) ให้ zoom %/fit-width clamp 0.5–3/fontSize % ทำงานเหมือนหน้า A4; TIFF decode ผ่าน `utif2` **dynamic import เฉพาะไฟล์ tif** (pattern เดียวกับ invariant #6) → หนึ่ง PNG blob URL ต่อเฟรม (**หลายเฟรม = หลายหน้า**) และ **revoke ทุก blob URL ตอน cleanup ของ load effect**; เฟรมที่ decode พัง = `src: null` → placeholder เทาแต่ขนาดหน้ายังเอาจาก IFD header ได้
diff --git a/.gitignore b/.gitignore
index aa9db7e..e52b340 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,4 +27,6 @@ dev-server.log
 next-env.d.ts
 
 # Claude Code
-.claude/settings.local.json
\ No newline at end of file
+.claude/settings.local.json
+# N4: ไฟล์ที่ผู้ใช้อัปโหลดผ่านหน้ารายการ (รันไทม์ — ไม่เข้า repo)
+public/uploads/
diff --git a/CLAUDE.md b/CLAUDE.md
index 762d380..d490d3f 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -5,7 +5,7 @@
 **Judge's Note** — ระบบ PDF Annotation สำหรับ e-Court (โปรเจกต์ Next.js แยกต่างหาก ไม่เกี่ยวกับ dms-main ที่เป็น Nuxt)
 
 - ฟีเจอร์: highlight ข้อความ, วาดเส้น freehand, sticky note comment, bookmark
-- **อ่านแผนฉบับเต็มก่อนเริ่มงานใด ๆ:** `docs/PLAN.md` (สถาปัตยกรรม, schema, พฤติกรรม feature, ลำดับ implement, edge cases) — ฟีเจอร์ต่อยอด (F1–F19 + N1/N2) อ่านเพิ่ม: `docs/PLAN-FEAT.md`
+- **อ่านแผนฉบับเต็มก่อนเริ่มงานใด ๆ:** `docs/PLAN.md` (สถาปัตยกรรม, schema, พฤติกรรม feature, ลำดับ implement, edge cases) — ฟีเจอร์ต่อยอด (F1–F19 + N1–N4) อ่านเพิ่ม: `docs/PLAN-FEAT.md`
 
 ## Tech Stack
 
@@ -17,7 +17,7 @@
 
 ## Invariants ที่ต้องรักษา (ห้ามละเมิด)
 
-1. **Non-Destructive:** ไฟล์ PDF ต้นฉบับไม่ถูกแก้ไขเด็ดขาด — annotation เก็บใน DB เป็นพิกัดเท่านั้น (export PDF ของ F8 สร้างไฟล์ใหม่จากสำเนาในหน่วยความจำ — อ่าน `public/` อย่างเดียว ห้ามเขียนทับ)
+1. **Non-Destructive:** ไฟล์ต้นฉบับ (PDF/รูปภาพ) ไม่ถูกแก้ไขเด็ดขาด — annotation เก็บใน DB เป็นพิกัดเท่านั้น (export PDF ของ F8/N3 สร้างไฟล์ใหม่จากสำเนาในหน่วยความจำ — อ่าน `public/` อย่างเดียว ห้ามเขียนทับ; อัปโหลด N4 เขียนไฟล์**ใหม่**ที่ `public/uploads/` เท่านั้น ห้ามแตะไฟล์เดิม)
 2. **พิกัดทุกอย่างใน DB เป็น % ของขนาดหน้า** — `rects`, `paths`, `position`, `strokeWidth` (% ของ width), `yOffset` (% ของ height) — แปลง px⇄% ผ่าน `utils/coordinates.ts` เท่านั้น และก่อนบันทึก HIGHLIGHT ต้องรวบ rects ด้วย `mergeRectsByLine` เหลือ 1 rect ต่อบรรทัด
 3. **ลำดับ layer ตาม PLAN.md §1:** canvas (`pointer-events: none` เสมอ) → highlight-layer (`none` เสมอ, `mix-blend-mode: multiply`) → textLayer → InkLayer (SVG) → comment pins — สลับ pointer-events ตาม tool ปัจจุบัน
 4. **เขียนผ่าน Server Actions เท่านั้น** (`app/actions/annotations.ts`) และ**หลังเขียน DB สำเร็จทุกครั้ง ต้อง publish event ผ่าน `lib/annotate-events.ts` + `revalidatePath` หน้า viewer และ summary ของ fileId นั้น** (helper `revalidateFilePages` — สั่ง browser ทิ้ง Router Cache ฝั่ง client, `force-dynamic` ปิดแค่ฝั่ง server ไม่พอ: ไม่งั้นกด back แล้วคลิกเข้าไฟล์ใหม่ยังได้ initial data เก่าจนต้อง hard refresh) / **อ่าน + sync ผ่าน SSE hook** (`hooks/useAnnotationRealtime.ts` เปิด `EventSource` ไป `/api/annotations/stream?fileId=`) — event เป็น DTO (camelCase + ISO string) จาก server ตรง ๆ
@@ -41,9 +41,13 @@ utils/geometry.ts     ← bbox/translate/scale/hitTestPath ของ annotation
 utils/annotation-display.ts ← label/ข้อความย่อต่อชนิด + ค่า default TEXTBOX/STAMP (sidebar/สรุป/CSV ใช้ร่วม)
 utils/pdf-export.ts   ← แปลงพิกัดจอ⇄PDF (/Rotate) + wrapText + hexToRgb (export route)
 utils/user.ts         ← anonymous identity (localStorage)
+utils/file-kind.ts    ← derive ชนิดไฟล์ pdf/image จาก extension ของ path (N3 — ใช้ร่วม viewer/export/หน้ารายการ/seed)
+utils/tiff-client.ts  ← decode TIFF ทุกเฟรม → PNG blob URL ฝั่ง client (N3)
+utils/image-to-pdf.ts ← สร้าง PDF ใหม่จากไฟล์รูป embedJpg/embedPng + EXIF rotate + TIFF→PNG (N3, export route)
 hooks/useAnnotationRealtime.ts     ← EventSource ต่อ SSE stream + dedupe ด้วย id
 hooks/useHistory.ts   ← undo/redo stack ฝั่ง client (F2)
 app/actions/annotations.ts          ← Server Actions CRUD + validation + publish event
+app/actions/files.ts  ← Server Action uploadFile — validate + เขียนไฟล์ใหม่ที่ public/uploads/ (N4)
 app/api/annotations/stream/route.ts ← SSE endpoint (GET ?fileId=)
 app/api/annotations/export/route.ts      ← export PDF ฝัง annotation (pdf-lib, F8)
 app/api/annotations/export-csv/route.ts  ← export สรุป CSV พร้อม BOM (F16)
@@ -55,16 +59,17 @@ components/pdf/InkLayer.tsx         ← SVG freehand + รูปทรง + reda
 components/pdf/TextboxStampLayer.tsx ← overlay TEXTBOX + STAMP (F17/F18)
 components/pdf/AnnotationSelectionLayer.tsx ← กรอบ selection + handles ย้าย/ปรับขนาด (F1) + แถบสี/ความหนา + ปุ่มลบ
 components/sidebar/AnnotationSidebar.tsx ← + โน้ตคำอธิบาย (note) inline ต่อรายการ (PLAN-FEAT.md §7 N1)
+components/UploadFileForm.tsx ← ฟอร์มอัปโหลดไฟล์บนหน้ารายการ (N4)
 ```
 
 ## ขอบเขต — ห้ามทำเกิน (Out of Scope)
 
-> ขอบเขตด้านล่างเป็นของ**เฟสแรก** — ฟีเจอร์ต่อยอด (edit/ย้าย, undo/redo, export, reply, resolve ฯลฯ) อนุญาต**เฉพาะตาม task F1–F19 ใน `docs/PLAN-FEAT.md`** และทำผ่าน `/implement-feat` เท่านั้น ห้ามทำเกินสเปกของแผนนั้น — **ปัจจุบันทำครบตามแผนแล้ว ยกเว้น F11 (export/import JSON) ที่ถูกถอดออกจากโค้ดแล้ว**: แก้ไข/ย้าย/ปรับขนาด (F1), undo/redo (F2), คีย์ลัด (F3), กรองรายคน (F4), รูปทรง (F5), eraser (F6), สไตลัส/pressure (F7), redaction + export PDF (F8), reply เธรด (F9), resolve (F10), deep link (F12), แก้ไข comment (F13), ค้นหา (F14), หน้าสรุป (F15), export CSV (F16), text box (F17), stamp (F18), version history + กู้คืน (F19) — ฟีเจอร์เสริมหลังแผน (อนุญาตตาม §7 ของ `docs/PLAN-FEAT.md`): โน้ตคำอธิบาย `note?` ฝังใน annotation ทุกชนิดยกเว้น COMMENT แก้ไขใน sidebar + hover tooltip (N1), bookmark โครงสร้าง 3 ระดับ `parent_id` + โน้ต + popup สร้าง/แก้ไข/ย้ายหัวข้อ + ปุ่ม bookmark ในแผง selection + ชื่อ default จากข้อความที่คลุม (N2)
+> ขอบเขตด้านล่างเป็นของ**เฟสแรก** — ฟีเจอร์ต่อยอด (edit/ย้าย, undo/redo, export, reply, resolve ฯลฯ) อนุญาต**เฉพาะตาม task F1–F19 ใน `docs/PLAN-FEAT.md`** และทำผ่าน `/implement-feat` เท่านั้น ห้ามทำเกินสเปกของแผนนั้น — **ปัจจุบันทำครบตามแผนแล้ว ยกเว้น F11 (export/import JSON) ที่ถูกถอดออกจากโค้ดแล้ว**: แก้ไข/ย้าย/ปรับขนาด (F1), undo/redo (F2), คีย์ลัด (F3), กรองรายคน (F4), รูปทรง (F5), eraser (F6), สไตลัส/pressure (F7), redaction + export PDF (F8), reply เธรด (F9), resolve (F10), deep link (F12), แก้ไข comment (F13), ค้นหา (F14), หน้าสรุป (F15), export CSV (F16), text box (F17), stamp (F18), version history + กู้คืน (F19) — ฟีเจอร์เสริมหลังแผน (อนุญาตตาม §7 ของ `docs/PLAN-FEAT.md`): โน้ตคำอธิบาย `note?` ฝังใน annotation ทุกชนิดยกเว้น COMMENT แก้ไขใน sidebar + hover tooltip (N1), bookmark โครงสร้าง 3 ระดับ `parent_id` + โน้ต + popup สร้าง/แก้ไข/ย้ายหัวข้อ + ปุ่ม bookmark ในแผง selection + ชื่อ default จากข้อความที่คลุม (N2), รองรับไฟล์รูปภาพ jpg/jpeg/png/tif เป็นเอกสาร annotate ได้ครบทุกชนิด + TIFF หลายเฟรม = หลายหน้า + export PDF ฝังรูป (N3 — แผน `docs/PLAN-IMAGE.md`), อัปโหลดไฟล์ PDF/รูปผ่านหน้ารายการแบบง่าย (N4)
 
 - ไม่มี login/roles, ไม่มี presence — undo/redo เป็น history ฝั่ง client ต่อ session ต่อผู้ใช้ ไม่เก็บใน DB (D10) ส่วน version history/กู้คืน (F19) เก็บในตาราง `annotation_versions`
 - Annotation: สร้าง + ลบ + แก้ไข/ย้าย/ปรับขนาด/เปลี่ยนสี–ความหนา/แก้ไขข้อความ **ของตัวเอง ในหน้าเดียวกัน** — resolve เป็นสิ่งเดียวที่ใครก็ toggle ได้ (D6)
 - ปุ่มลบ/แก้ไข/ประวัติแสดงเฉพาะรายการของตัวเอง (`userId` ตรงกัน) เท่านั้น
-- หน้า `/` อ่านรายการจาก DB เท่านั้น — ไม่มีหน้า upload ไฟล์ (sample data seed ด้วย SQL ใน README)
+- หน้า `/` อ่านรายการจาก DB + ฟอร์มอัปโหลดไฟล์เดียวแบบง่าย (N4 — PDF/jpg/jpeg/png/tif/tiff ≤ 100MB เขียนไฟล์ใหม่ที่ `public/uploads/` เท่านั้น; ไม่มีหน้าจัดการ/ลบไฟล์ใน UI; sample data sync ด้วย `npm run seed-samples`)
 - ลายเซ็นจากรูป/upload ยังเป็น out of scope (D7 — stamp เป็น preset ข้อความเท่านั้น, ลายเซ็นใช้ tool DRAW วาด)
 
 ## Claude Tooling (ใน `.claude/`)
diff --git a/README.md b/README.md
index 59864ae..ba8a69b 100644
--- a/README.md
+++ b/README.md
@@ -59,7 +59,7 @@ npx drizzle-kit push
 
 ### 5. Seed ไฟล์ตัวอย่าง
 
-ไฟล์ตัวอย่างอยู่ที่ `public/samples/` แล้ว — sync ลงตาราง `files` (idempotent รันซ้ำได้):
+ไฟล์ตัวอย่างอยู่ที่ `public/samples/` แล้ว — sync ลงตาราง `files` (idempotent รันซ้ำได้) — รองรับทั้ง `.pdf` และรูปภาพ `.jpg/.jpeg/.png/.tif/.tiff` (N3):
 
 ```bash
 npm run seed-samples
@@ -73,7 +73,7 @@ npm run seed-samples
 npm run dev
 ```
 
-เปิด http://localhost:3000 — คลิกไฟล์เพื่อเข้าหน้า annotate
+เปิด http://localhost:3000 — คลิกไฟล์เพื่อเข้าหน้า annotate หรืออัปโหลดไฟล์ใหม่ (PDF/รูปภาพ ≤ 100MB) ผ่านฟอร์มบนหน้ารายการ (N4 — ไฟล์เก็บที่ `public/uploads/`)
 
 ## การใช้งานบนหน้า annotate
 
@@ -116,9 +116,10 @@ utils/user.ts             anonymous identity (localStorage)
 hooks/useAnnotationRealtime.ts   EventSource รับ SSE event + dedupe ด้วย id
 app/actions/annotations.ts       Server Actions CRUD + publish event (ทางเขียนทางเดียว)
 app/api/annotations/stream/route.ts  SSE endpoint (GET ?fileId=)
-app/page.tsx              รายการไฟล์
+app/page.tsx              รายการไฟล์ + ฟอร์มอัปโหลด (N4)
 app/annotate/[id]/page.tsx  โหลด file + initial data → PDFViewer
 components/pdf/           PDFViewer (root + virtualization), InkLayer, HighlightToolbar
 components/sidebar/       AnnotationSidebar
-public/samples/           ไฟล์ PDF ตัวอย่าง
+public/samples/           ไฟล์ตัวอย่าง (PDF + รูปภาพ) — seed ด้วย npm run seed-samples
+public/uploads/           ไฟล์ที่อัปโหลดผ่านหน้ารายการ (N4)
 ```
diff --git a/app/actions/files.ts b/app/actions/files.ts
new file mode 100644
index 0000000..6826269
--- /dev/null
+++ b/app/actions/files.ts
@@ -0,0 +1,107 @@
+"use server";
+
+// N4 — อัปโหลดไฟล์เอกสารแบบง่าย (PDF/jpg/jpeg/png/tif/tiff) ผ่านหน้ารายการ
+// เขียนไฟล์**ใหม่**ที่ public/uploads/<uuid>.<ext> เท่านั้น (ชื่อจาก randomUUID — กันชนกัน/กัน path traversal)
+// ไม่มี SSE event: รายการไฟล์ไม่ได้ sync ผ่าน SSE — revalidatePath("/") พอ (สเปก PLAN-FEAT.md §7 N4)
+import { randomUUID } from "node:crypto";
+import { mkdir, unlink, writeFile } from "node:fs/promises";
+import path from "node:path";
+
+import { revalidatePath } from "next/cache";
+
+import { db } from "@/db";
+import { files } from "@/db/schema";
+import { SAMPLE_FILE_EXTENSIONS } from "@/utils/file-kind";
+
+const MAX_UPLOAD_BYTES = 100 * 1024 * 1024; // 100MB (ตาม bodySizeLimit ใน next.config.mjs)
+const UPLOAD_DIR = path.join(process.cwd(), "public", "uploads");
+
+export type UploadFileResult =
+  | { ok: true; fileId: string; title: string }
+  | { ok: false; error: string };
+
+/** นามสกุล (ตัวเล็ก มีจุด) จากชื่อไฟล์ที่ browser ส่ง — ต้องอยู่ใน whitelist */
+function allowedExt(name: string): string | null {
+  const dot = name.lastIndexOf(".");
+  if (dot <= 0) return null;
+  const ext = name.slice(dot).toLowerCase();
+  return SAMPLE_FILE_EXTENSIONS.includes(ext) ? ext : null;
+}
+
+/** title สำหรับแสดงในรายการ: ชื่อไฟล์เดิม ตัด path ที่ฝังมา จำกัดความยาว */
+function sanitizeTitle(name: string): string {
+  const base = name.split(/[\\/]/).pop() ?? name;
+  return base.trim().slice(0, 200) || "ไฟล์ไม่มีชื่อ";
+}
+
+/** ตรวจ magic bytes ตรงกับ extension — กันไฟล์เปลี่ยนชื่อนามสกุล/ไฟล์เสี้ยวจากการโอน
+ *  เข้าระบบแล้วไปพังทีหลังทั้ง viewer (ค้างโหลด) และ export (500) */
+function matchesSignature(bytes: Buffer, ext: string): boolean {
+  switch (ext) {
+    case ".pdf":
+      return bytes.subarray(0, 5).toString("latin1") === "%PDF-";
+    case ".jpg":
+    case ".jpeg":
+      return bytes[0] === 0xff && bytes[1] === 0xd8 && bytes[2] === 0xff;
+    case ".png":
+      return (
+        bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4e && bytes[3] === 0x47
+      );
+    case ".tif":
+    case ".tiff":
+      return (
+        (bytes[0] === 0x49 && bytes[1] === 0x49 && bytes[2] === 0x2a && bytes[3] === 0x00) || // II*\0
+        (bytes[0] === 0x4d && bytes[1] === 0x4d && bytes[2] === 0x00 && bytes[3] === 0x2a) // MM\0*
+      );
+    default:
+      return false;
+  }
+}
+
+export async function uploadFile(formData: FormData): Promise<UploadFileResult> {
+  const file = formData.get("file");
+  if (!(file instanceof File)) {
+    return { ok: false, error: "เลือกไฟล์ก่อนอัปโหลด" };
+  }
+  if (file.size === 0) {
+    return { ok: false, error: "ไฟล์ว่าง (0 ไบต์) — เลือกไฟล์ที่สมบูรณ์" };
+  }
+  const ext = allowedExt(file.name);
+  if (!ext) {
+    return {
+      ok: false,
+      error: `รองรับเฉพาะไฟล์ ${SAMPLE_FILE_EXTENSIONS.join(" / ")}`,
+    };
+  }
+  if (file.size > MAX_UPLOAD_BYTES) {
+    return { ok: false, error: "ไฟล์ใหญ่เกิน 100MB" };
+  }
+
+  // uuid เป็นทั้งชื่อไฟล์บนดิสก์และ id ของ row — ไม่ใช้ชื่อผู้ใช้ตกแต่ง path เด็ดขาด
+  const id = randomUUID();
+  const diskName = `${id}${ext}`;
+  const bytes = Buffer.from(await file.arrayBuffer());
+  if (!matchesSignature(bytes, ext)) {
+    return {
+      ok: false,
+      error: "เนื้อไฟล์ไม่ตรงกับนามสกุล (ไฟล์อาจเสียหรือถูกเปลี่ยนชื่อ) — ตรวจไฟล์แล้วลองใหม่",
+    };
+  }
+
+  await mkdir(UPLOAD_DIR, { recursive: true });
+  const diskPath = path.join(UPLOAD_DIR, diskName);
+  await writeFile(diskPath, bytes);
+
+  const title = sanitizeTitle(file.name);
+  const pdfUrl = `/uploads/${diskName}`;
+  try {
+    await db.insert(files).values({ id, title, pdfUrl });
+  } catch (err) {
+    // DB fail หลังเขียนไฟล์ — เก็บกวาดไฟล์ก่อนโยนต่อ กันไฟล์กำพร้าไม่มี row ชี้ (ไม่มีกลไกเก็บอื่น)
+    await unlink(diskPath).catch(() => undefined);
+    throw err;
+  }
+
+  revalidatePath("/");
+  return { ok: true, fileId: id, title };
+}
diff --git a/app/api/annotations/export/route.ts b/app/api/annotations/export/route.ts
index 2bc0568..d635a3b 100644
--- a/app/api/annotations/export/route.ts
+++ b/app/api/annotations/export/route.ts
@@ -47,6 +47,8 @@ import {
 } from "@/utils/pdf-export";
 import type { AnnotationDTO, Rect } from "@/db/schema";
 import { toPx, type Point, type Size } from "@/utils/coordinates";
+import { fileKindFromUrl } from "@/utils/file-kind";
+import { imageDocFromBytes } from "@/utils/image-to-pdf";
 import {
   STAMP_HEIGHT_RATIO,
   annotationBBox,
@@ -226,7 +228,20 @@ export async function GET(req: Request) {
     return new Response("อ่านไฟล์ PDF ต้นฉบับไม่ได้", { status: 404 });
   }
 
-  const doc = await PDFDocument.load(srcBytes);
+  // N3: ไฟล์รูปภาพ — สร้าง PDF ใหม่ที่ฝังรูปเต็มหน้า (embedJpg/embedPng + EXIF rotate)
+  // แล้ววาด annotation ต่อด้วย pipeline เดิมทั้งหมด (rotation=0, page 595×สัดส่วนรูป
+  // ตรง scale contract ฝั่ง viewer → พิกัด % ตรงกันทั้งจอและ export)
+  // ไฟล์เสีย (ผ่าน magic bytes ตอนอัปโหลดแต่เนื้อข้างในพัง) → ข้อความชัด ๆ แทน 500 เปล่า
+  let doc: Awaited<ReturnType<typeof PDFDocument.load>>;
+  try {
+    doc =
+      fileKindFromUrl(file.pdfUrl) === "image"
+        ? await imageDocFromBytes(srcBytes, file.pdfUrl)
+        : await PDFDocument.load(srcBytes);
+  } catch (err) {
+    console.error("สร้างเอกสารสำหรับ export ไม่สำเร็จ", err);
+    return new Response("ไฟล์ต้นฉบับเสียหาย สร้างเอกสาร export ไม่ได้", { status: 500 });
+  }
   doc.registerFontkit(fontkit);
 
   // D5: ฟอนต์ไทย optional — ไม่มีก็ export สำเร็จ (COMMENT เป็นหมุดอย่างเดียว)
diff --git a/app/api/pdf/route.ts b/app/api/pdf/route.ts
index 605fde8..d675f55 100644
--- a/app/api/pdf/route.ts
+++ b/app/api/pdf/route.ts
@@ -4,6 +4,7 @@ import { db } from "@/db";
 import { files } from "@/db/schema";
 import { fixPdfActualText } from "@/lib/pdf-actual-text";
 import { PdfPathError, readPublicPdf } from "@/lib/server-pdf";
+import { fileKindFromUrl, imageContentTypeFromUrl } from "@/utils/file-kind";
 
 // ให้ viewer โหลด PDF ผ่านทางนี้แทนไฟล์ดิบใน public/ — ซ่อม ToUnicode จาก ActualText
 // ของ PDF ไทยที่ cmap ของฟอนต์เพี้ยน (สกัดข้อความได้ control char ขยะแทนสระ/วรรณยุกต์)
@@ -32,6 +33,18 @@ export async function GET(req: Request) {
     throw err;
   }
 
+  // N3: ไฟล์รูปภาพไม่มี ToUnicode ให้ซ่อม — คืน bytes ดิบ + content-type ถูกต้อง
+  // (viewer โหลดรูปจาก static pdfUrl ตรง ๆ อยู่แล้ว — branch นี้กัน stray call
+  // หลุดเข้า fixPdfActualText ที่จะ throw กับ bytes ที่ไม่ใช่ PDF)
+  if (fileKindFromUrl(file.pdfUrl) === "image") {
+    return new Response(new Uint8Array(srcBytes), {
+      headers: {
+        "Content-Type": imageContentTypeFromUrl(file.pdfUrl),
+        "Cache-Control": "no-store",
+      },
+    });
+  }
+
   const fixed = await fixPdfActualText(srcBytes);
   return new Response(new Uint8Array(fixed), {
     headers: {
diff --git a/app/page.tsx b/app/page.tsx
index b656947..b607cc8 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,13 +1,29 @@
 import Link from "next/link";
 import { asc } from "drizzle-orm";
-import { FileText } from "lucide-react";
+import { FileImage, FileText } from "lucide-react";
 
 import { db } from "@/db";
 import { files } from "@/db/schema";
 import UserPicker from "@/components/UserPicker";
+import UploadFileForm from "@/components/UploadFileForm";
+import { imageFormatFromUrl } from "@/utils/file-kind";
 
 export const dynamic = "force-dynamic";
 
+/** badge ชนิดไฟล์ต่อรายการ (N3) */
+function kindBadge(pdfUrl: string): string {
+  switch (imageFormatFromUrl(pdfUrl)) {
+    case "jpeg":
+      return "JPG";
+    case "png":
+      return "PNG";
+    case "tiff":
+      return "TIFF";
+    default:
+      return "PDF";
+  }
+}
+
 export default async function HomePage() {
   const rows = await db.select().from(files).orderBy(asc(files.createdAt));
 
@@ -35,6 +51,7 @@ export default async function HomePage() {
           <span className="text-xs text-slate-400">{rows.length} ไฟล์</span>
         )}
       </div>
+      <UploadFileForm />
 
       {rows.length === 0 ? (
         <div className="mt-3 rounded-xl border border-dashed border-slate-300 bg-white/60 p-10 text-center">
@@ -54,13 +71,20 @@ export default async function HomePage() {
               className="group flex items-center gap-3 rounded-xl border border-slate-200 bg-white p-4 shadow-sm transition hover:border-primary/30 hover:shadow-md"
             >
               <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
-                <FileText className="h-5 w-5 text-primary" />
+                {imageFormatFromUrl(f.pdfUrl) ? (
+                  <FileImage className="h-5 w-5 text-primary" />
+                ) : (
+                  <FileText className="h-5 w-5 text-primary" />
+                )}
               </div>
               <span className="min-w-0 flex-1">
                 <span className="block break-all line-clamp-2 text-sm font-medium text-slate-900">
                   {f.title}
                 </span>
                 <span className="mt-0.5 block text-xs text-slate-400">
+                  <span className="mr-1.5 rounded bg-slate-100 px-1 py-0.5 font-medium text-slate-500">
+                    {kindBadge(f.pdfUrl)}
+                  </span>
                   {new Date(f.createdAt).toLocaleString("th-TH")}
                 </span>
               </span>
diff --git a/components/UploadFileForm.tsx b/components/UploadFileForm.tsx
new file mode 100644
index 0000000..def61ab
--- /dev/null
+++ b/components/UploadFileForm.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+// N4 — ฟอร์มอัปโหลดไฟล์เอกสารแบบง่ายบนหน้ารายการ (PDF/รูป รับพร้อมกัน)
+// เสร็จแล้วรายการโผล่เองจาก revalidatePath("/") ของ action
+import { useState, useTransition } from "react";
+
+import { uploadFile } from "@/app/actions/files";
+
+const ACCEPT = ".pdf,.jpg,.jpeg,.png,.tif,.tiff";
+
+export default function UploadFileForm() {
+  const [error, setError] = useState<string | null>(null);
+  const [pending, startTransition] = useTransition();
+
+  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const form = e.currentTarget;
+    setError(null);
+    startTransition(async () => {
+      try {
+        const result = await uploadFile(new FormData(form));
+        if (result.ok) {
+          form.reset();
+        } else {
+          setError(result.error);
+        }
+      } catch {
+        // action fail ที่ระดับ transport (เช่น body ใหญ่เกิน bodySizeLimit ของ next.config)
+        setError("อัปโหลดไม่สำเร็จ — ลองใหม่อีกครั้ง");
+      }
+    });
+  };
+
+  return (
+    <form
+      onSubmit={onSubmit}
+      className="mt-3 flex flex-wrap items-center gap-2 rounded-xl border border-dashed border-slate-300 bg-white/60 p-4"
+    >
+      <input
+        type="file"
+        name="file"
+        accept={ACCEPT}
+        required
+        disabled={pending}
+        className="block w-full max-w-xs text-sm text-slate-600 file:mr-3 file:cursor-pointer file:rounded-md file:border-0 file:bg-primary/10 file:px-3 file:py-1.5 file:text-sm file:font-medium file:text-primary"
+      />
+      <button
+        type="submit"
+        disabled={pending}
+        className="shrink-0 rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-white transition hover:opacity-90 disabled:opacity-50"
+      >
+        {pending ? "กำลังอัปโหลด…" : "อัปโหลด"}
+      </button>
+      {error && <p className="w-full text-xs text-red-600">{error}</p>}
+    </form>
+  );
+}
diff --git a/components/pdf/PDFViewer.tsx b/components/pdf/PDFViewer.tsx
index b6598da..e5c5c23 100644
--- a/components/pdf/PDFViewer.tsx
+++ b/components/pdf/PDFViewer.tsx
@@ -114,6 +114,8 @@ import {
   type Size,
 } from "@/utils/coordinates";
 import { getLocalUser, type LocalUser } from "@/utils/user";
+import { fileKindFromUrl, imageFormatFromUrl } from "@/utils/file-kind";
+import { decodeTiffPages } from "@/utils/tiff-client";
 import {
   TEXTBOX_DEFAULT_WIDTH_PCT,
   annotationBBox,
@@ -538,9 +540,18 @@ function ReplyBox({
 
 // ─── หน้าเดียว: canvas + highlight-layer + textLayer + InkLayer + pins ──────
 
+/** N3: เนื้อหาหนึ่งหน้า — pdf (pdfjs) หรือรูปภาพ (src = URL รูป; null = เฟรม TIFF decode
+ *  ไม่ได้ → placeholder เทา แต่หน้ายังมีขนาดจาก IFD header ให้ scroll/bookmark เสถียร) */
+type PageContent =
+  | { kind: "pdf"; pdfjs: typeof import("pdfjs-dist"); doc: import("pdfjs-dist").PDFDocumentProxy }
+  | { kind: "image"; src: string | null };
+
+/** N3: หน้ารูปภาพ normalize กว้าง 595 (เท่าหน้า A4 pt) — scale contract เดียวกับ export
+ *  (utils/image-to-pdf.ts) ให้ zoom %/fit-width clamp 0.5–3/fontSize % ทำงานเหมือนหน้า PDF */
+const IMAGE_PAGE_WIDTH = 595;
+
 function PdfPage({
-  pdfjs,
-  doc,
+  content,
   pageNumber,
   width,
   height,
@@ -578,8 +589,7 @@ function PdfPage({
   onErase,
   onTextLayerRendered,
 }: {
-  pdfjs: typeof import("pdfjs-dist");
-  doc: import("pdfjs-dist").PDFDocumentProxy;
+  content: PageContent;
   /** 1-based */
   pageNumber: number;
   width: number;
@@ -641,12 +651,17 @@ function PdfPage({
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const textLayerRef = useRef<HTMLDivElement | null>(null);
 
+  // N3: หน้ารูปภาพไม่มี canvas/textLayer — effect ของ pdfjs ทำงานเฉพาะหน้า pdf
+  const pdfjsLib = content.kind === "pdf" ? content.pdfjs : null;
+  const pdfDoc = content.kind === "pdf" ? content.doc : null;
+
   useEffect(() => {
     let cancelled = false;
     let renderTask: import("pdfjs-dist").RenderTask | null = null;
+    if (!pdfjsLib || !pdfDoc) return;
 
     (async () => {
-      const page = await doc.getPage(pageNumber);
+      const page = await pdfDoc.getPage(pageNumber);
       if (cancelled) return;
 
       const scale = width / page.getViewport({ scale: 1 }).width;
@@ -677,7 +692,7 @@ function PdfPage({
       if (cancelled) return;
       container.replaceChildren();
       container.style.setProperty("--scale-factor", String(scale));
-      const textLayer = new pdfjs.TextLayer({
+      const textLayer = new pdfjsLib.TextLayer({
         textContentSource: textContent,
         container,
         viewport,
@@ -698,7 +713,14 @@ function PdfPage({
     // onTextLayerRendered ตั้งใจไม่อยู่ใน deps: callback ต้องเป็น useCallback [] เสถียร
     // เท่านั้น (handleTextLayerRendered) — ถ้าวันหน้าทำให้ identity เปลี่ยนได้ ต้องย้าย
     // ไปเก็บใน ref ก่อน ไม่งั้น effect นี้จะไม่รันซ้ำและค่า span count ของ chip จะเก่า
-  }, [pdfjs, doc, pageNumber, width, height]);
+  }, [pdfjsLib, pdfDoc, pageNumber, width, height]);
+
+  // N3: หน้ารูปไม่มี textLayer — รายงาน span count = 0 ให้ hint "ภาพสแกน" ของ tool
+  // highlight ทำงาน (พฤติกรรมเดียวกับ PDF สแกน) — onTextLayerRendered ไม่อยู่ใน deps
+  // เพราะเป็น useCallback [] เสถียร (เหมือน effect ด้านบน)
+  useEffect(() => {
+    if (content.kind === "image") onTextLayerRendered?.(pageNumber - 1, 0);
+  }, [content.kind, pageNumber]);
 
   const highlights = annotations.filter(isHighlight);
   const inkStrokes: InkStroke[] = annotations
@@ -812,8 +834,22 @@ function PdfPage({
 
   return (
     <>
-      {/* z-1: canvas — pointer-events: none เสมอ */}
-      <canvas ref={canvasRef} className="absolute inset-0 z-[1] pointer-events-none" />
+      {/* z-1: canvas (pdf) / <img> (รูปภาพ N3) — pointer-events: none เสมอ (invariant #3)
+          รูป: browser render ที่ devicePixelRatio เต็มเอง เทียบเท่า canvas×dpr ของ pdfjs */}
+      {content.kind === "pdf" ? (
+        <canvas ref={canvasRef} className="absolute inset-0 z-[1] pointer-events-none" />
+      ) : content.src ? (
+        <img
+          src={content.src}
+          alt=""
+          draggable={false}
+          className="pointer-events-none absolute inset-0 z-[1] h-full w-full select-none"
+        />
+      ) : (
+        <div className="pointer-events-none absolute inset-0 z-[1] flex items-center justify-center bg-slate-200 text-xs text-slate-500">
+          ถอดรหัสหน้านี้ไม่ได้
+        </div>
+      )}
 
       {/* z-2: highlight-layer — pointer-events: none เสมอ, อยู่หน้า textLayer ใน DOM order
           แสดงผลตาม style: ทึบ / เส้นใต้ (ขอบล่าง) / ขีดฆ่า (กลางบรรทัด) / ขยุกขยิก (svg) */}
@@ -856,12 +892,15 @@ function PdfPage({
           )}
       </div>
 
-      {/* z-2: textLayer (pdfjs) — อยู่หลัง highlight-layer ใน DOM → อยู่บนสุดของ z-2 */}
-      <div
-        ref={textLayerRef}
-        className="textLayer absolute inset-0 z-[2]"
-        style={{ pointerEvents: overlayFrozen ? "none" : "auto" }}
-      />
+      {/* z-2: textLayer (pdfjs — pdf เท่านั้น, N3: หน้ารูปไม่มี) — อยู่หลัง highlight-layer
+          ใน DOM → อยู่บนสุดของ z-2 (conditional render ไม่ย้ายโหนด — invariant #3) */}
+      {content.kind === "pdf" && (
+        <div
+          ref={textLayerRef}
+          className="textLayer absolute inset-0 z-[2]"
+          style={{ pointerEvents: overlayFrozen ? "none" : "auto" }}
+        />
+      )}
 
       {/* z-3: InkLayer (SVG freehand + รูปทรง F5) */}
       <InkLayer
@@ -1054,7 +1093,9 @@ function PdfPage({
       {/* z-4: กรอบ selection + handles ของรายการที่เลือก (F1) — หลัง pins ใน DOM */}
       {(() => {
         const selected = annotations.find((a) => a.id === selectedId);
-        if (!selected) return null;
+        // COMMENT ที่เปิด popover อยู่ไม่วาดกรอบ/แผง — bbox ของ COMMENT ครอบพื้นที่ pin
+        // พอดี แผงจะทับ popover และแถบ handle บังการคลิก (sidebar ยังตาม selectedId เหมือนเดิม)
+        if (!selected || (selected.type === "COMMENT" && openPinId === selected.id)) return null;
         return (
           <AnnotationSelectionLayer
             annotation={selected}
@@ -1089,6 +1130,13 @@ export default function PDFViewer({
 }) {
   const [pdfjs, setPdfjs] = useState<typeof import("pdfjs-dist") | null>(null);
   const [doc, setDoc] = useState<import("pdfjs-dist").PDFDocumentProxy | null>(null);
+  // N3: src ของรูปภาพต่อหน้า (คู่ขนานกับ doc ของ pdf — ไฟล์รูปใช้อันนี้แทน pdfjs/doc)
+  const [imageSrcs, setImageSrcs] = useState<(string | null)[] | null>(null);
+  // โหลดเอกสารพัง (ไฟล์เสีย/decode ไม่ได้) — แสดงข้อความแทน "กำลังโหลด…" ค้างตลอดไป
+  const [loadError, setLoadError] = useState<string | null>(null);
+  // F8: Export PDF ดาวน์โหลดในแท็บเดิม (fetch → blob → <a download>) ไม่เปิดแท็บใหม่
+  const [exporting, setExporting] = useState(false);
+  const [exportError, setExportError] = useState<string | null>(null);
   const [pageSizes, setPageSizes] = useState<Size[]>([]);
   const [tool, setTool] = useState<Tool>("select");
   const [shapeKind, setShapeKind] = useState<ShapeKind>("rect"); // F5: ชนิดรูปทรงของ tool shape
@@ -1317,11 +1365,99 @@ export default function PDFViewer({
     );
   }, []);
 
+  // F8: Export PDF — ดาวน์โหลดเงียบ ๆ ในแท็บเดิม (เดิม window.open _blank จะแวบแท็บใหม่
+  // และ error พา viewer ไปโผล่แท็บนั้น): fetch เป็น blob แล้วกด <a download> โดยรับชื่อ
+  // ไฟล์จาก Content-Disposition ของ route (รองรับภาษาไทยผ่าน filename*) — พัง = toast ในหน้า
+  const handleExportPdf = async () => {
+    if (exporting) return;
+    setExporting(true);
+    setExportError(null);
+    try {
+      const res = await fetch(`/api/annotations/export?fileId=${file.id}`);
+      if (!res.ok) {
+        const text = await res.text().catch(() => "");
+        throw new Error(text || `HTTP ${res.status}`);
+      }
+      const blob = await res.blob();
+      const disposition = res.headers.get("Content-Disposition") ?? "";
+      const utf8 = /filename\*=UTF-8''([^;\s]+)/i.exec(disposition);
+      const ascii = /filename="([^"]+)"/i.exec(disposition);
+      const name = utf8 ? decodeURIComponent(utf8[1]) : (ascii?.[1] ?? `${file.title}.pdf`);
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = name;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error("export PDF ไม่สำเร็จ", err);
+      setExportError("Export PDF ไม่สำเร็จ — ลองอีกครั้ง (ไฟล์อาจใหญ่เกินหรือต้นฉบับเสียหาย)");
+      window.setTimeout(() => setExportError(null), 6000);
+    } finally {
+      setExporting(false);
+    }
+  };
+
   // โหลดเอกสาร: dynamic import ภายใน useEffect เท่านั้น (invariant #6)
   useEffect(() => {
     let cancelled = false;
     let loadedDoc: import("pdfjs-dist").PDFDocumentProxy | null = null;
 
+    // สลับไฟล์ (Next reuse component เดิมเมื่อเปลี่ยน dynamic param): เคลียร์เอกสาร
+    // ก่อนหน้าก่อนโหลดใหม่ — กัน state เก่า (doc ที่ถูก destroy / blob URL ที่ถูก revoke
+    // / span count ของหน้าเดิม) ถูก render ชั่วขณะกลางทาง แล้วกลับไป "กำลังโหลด…" ตามปกติ
+    setLoadError(null);
+    setPageSizes([]);
+    setImageSrcs(null);
+    setPageSpanCount({});
+
+    // N3: ไฟล์รูปภาพไม่ผ่าน pdfjs — โหลด static pdfUrl ตรง ๆ (ไม่มี ToUnicode ให้ซ่อม
+    // ตาม rules/pdf-viewer.md) แล้วผลิต pageSizes จาก naturalWidth/Height (browser คิด
+    // EXIF orientation ให้แล้ว) normalize กว้าง IMAGE_PAGE_WIDTH ให้ zoom/fit-width
+    // ทำงานเหมือนหน้า A4 — jpg/png คือ 1 หน้าเสมอ
+    if (fileKindFromUrl(file.pdfUrl) === "image") {
+      setDoc(null);
+      setPdfjs(null);
+      const objectUrls: string[] = [];
+      (async () => {
+        let pages: { src: string | null; width: number; height: number }[];
+        if (imageFormatFromUrl(file.pdfUrl) === "tiff") {
+          // N3: TIFF หลายเฟรม = หลายหน้า — decode ครั้งเดียวต่อการเปิดไฟล์
+          // (utif2 dynamic import ภายใน decodeTiffPages) แล้วเก็บ blob URL ไว้ใช้ต่อ
+          const buffer = await (await fetch(file.pdfUrl)).arrayBuffer();
+          pages = await decodeTiffPages(buffer, IMAGE_PAGE_WIDTH);
+          for (const p of pages) if (p.src) objectUrls.push(p.src);
+        } else {
+          const img = new Image();
+          img.src = file.pdfUrl;
+          await img.decode();
+          const factor = IMAGE_PAGE_WIDTH / img.naturalWidth;
+          pages = [
+            { src: file.pdfUrl, width: IMAGE_PAGE_WIDTH, height: img.naturalHeight * factor },
+          ];
+        }
+        if (cancelled) {
+          // cleanup ของ effect รันไปแล้วตอน objectUrls ยังว่าง (สลับไฟล์กลาง decode)
+          // — ต้อง revoke เอง ไม่งั้น blob ทั้งชุดรั่ว (plan-reviewer)
+          objectUrls.forEach((u) => URL.revokeObjectURL(u));
+          return;
+        }
+        setImageSrcs(pages.map((p) => p.src));
+        setPageSizes(pages.map((p) => ({ width: p.width, height: p.height })));
+      })().catch((err) => {
+        console.error("โหลดรูปไม่สำเร็จ", err);
+        if (!cancelled) setLoadError("โหลดรูปไม่สำเร็จ — ไฟล์อาจเสียหรือรูปแบบไม่รองรับ");
+        objectUrls.forEach((u) => URL.revokeObjectURL(u));
+      });
+      return () => {
+        cancelled = true;
+        // N3: revoke ทุก blob URL ตอนสลับไฟล์/unmount กัน memory leak (rules/pdf-viewer.md)
+        objectUrls.forEach((u) => URL.revokeObjectURL(u));
+      };
+    }
+
     (async () => {
       const pdfjs = await import("pdfjs-dist");
       pdfjs.GlobalWorkerOptions.workerSrc = "/pdf.worker.min.mjs";
@@ -1357,6 +1493,7 @@ export default function PDFViewer({
       setPageSizes(sizes);
     })().catch((err) => {
       console.error("โหลดเอกสารไม่สำเร็จ", err);
+      if (!cancelled) setLoadError("โหลดเอกสารไม่สำเร็จ — ไฟล์อาจเสียหรือไม่ใช่ PDF ที่รองรับ");
     });
 
     return () => {
@@ -1899,6 +2036,14 @@ export default function PDFViewer({
   }, []);
 
   function openBookmarkComposer() {
+    // ปิดเมนู tool ที่เปิดอยู่ก่อน (เช่นคีย์ลัด B ระหว่างเมนูเปิด) — popup bookmark (z เดียวกัน
+    // ทั้งคู่ fixed ใต้แถบ tool) เปิดซ้อนบนเมนูได้; ไม่ markMenuClosed เพราะ B เป็นคีย์บอร์ด
+    // ไม่มี click หลงเหลือให้กลืน
+    setStampMenuOpen(false);
+    setShapeMenuOpen(false);
+    setDrawMenuOpen(false);
+    setTextboxMenuOpen(false);
+    setHighlightMenuOpen(false);
     const pos = currentViewPosition();
     if (!pos) return;
     setBookmarkError(null);
@@ -2359,6 +2504,9 @@ export default function PDFViewer({
     // ต้องไม่กลายเป็นการวาง comment/textbox/stamp — คลิกที่สอง (หลัง 300ms) ค่อยวาง
     if (Date.now() - menuClosedAtRef.current < 300) return;
     if (bookmarkComposer) setBookmarkComposer(null); // คลิกหน้า = ปิด popup bookmark (N2)
+    // คลิกหน้าว่าง = ปิด popover ของ comment pin ด้วย — คลิกใน popover/pin ถูก
+    // stopPropagation ไว้แล้วจึงไม่โดนบรรทัดนี้
+    if (openPinId) setOpenPinId(null);
     // คลิกลงหน้า = เลิกเลือก annotation ก่อนทุก tool — แผงเครื่องมือของกรอบ selection
     // ต้องปิดเมื่อคลิกไปสร้างรายการใหม่ (comment/textbox/stamp เดิม return ก่อนถึง
     // logic เลิกเลือกท้ายฟังก์ชัน แผงจึงค้างเปิด) — คลิกบนตัว annotation เองถูก
@@ -2437,6 +2585,7 @@ export default function PDFViewer({
     // กรณีรายการอยู่ส่วนบนสุดของหน้า)
     setSelectedId(a.id);
     setPreviewData(null);
+    setOpenPinId(null); // กระโดดไปเลือกรายการอื่น = ปิด popover ของ pin เดิมทิ้ง
     const el = pageWrapRefs.current[a.pageIndex];
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -2454,6 +2603,8 @@ export default function PDFViewer({
   function handleSelectAnnotation(id: string) {
     setSelectedId(id);
     setPreviewData(null);
+    // เลือกรายการอื่น = ปิด popover ของ pin เดิม (คลิก pin จะไม่ผ่านที่นี่ — มัน toggle เอง)
+    setOpenPinId(null);
   }
 
   /** F13/A6: เข้าสู่โหมดแก้ไขข้อความ comment (null = ยกเลิก) — draft เริ่มจากข้อความปัจจุบัน */
@@ -2517,6 +2668,9 @@ export default function PDFViewer({
     setDrawMenuOpen(false);
     setTextboxMenuOpen(false);
     setHighlightMenuOpen(false);
+    // popup bookmark ก็ปิดตาม — สลับ tool แล้ว popup ค้างเปิดจะซ้อนกับสิ่งที่ทำต่อ
+    // (anyMenuOpen นับ bookmarkComposer อยู่แล้ว พฤติกรรม M4 เท่าเดิม)
+    setBookmarkComposer(null);
     setComposer(null);
     setOpenPinId(null);
     setSelectedId(null);
@@ -2744,11 +2898,12 @@ export default function PDFViewer({
                       className={`flex items-center gap-0.5 px-2 py-2 transition ${activeCls}`}
                       onClick={(e) => {
                         openToolMenu(e.currentTarget);
-                        if (tool === "highlight") setHighlightMenuOpen((o) => !o);
-                        else {
-                          switchTool("highlight");
-                          setHighlightMenuOpen(true);
-                        }
+                        // เรียก switchTool เสมอแม้เป็น tool เดิม — เคลียร์ popup บนหน้าที่ค้างเปิด
+                        // (editor/แผง selection/popover) ไม่ให้ซ้อนกับเมนู; จำ intent เปิด/พับ
+                        // ไว้ก่อนเพราะ switchTool ปิดเมนูทุกตัวก่อน
+                        const reopen = tool !== "highlight" || !highlightMenuOpen;
+                        switchTool("highlight");
+                        if (reopen) setHighlightMenuOpen(true);
                       }}
                     >
                       <CurrentIcon className="h-4 w-4" />
@@ -2825,11 +2980,10 @@ export default function PDFViewer({
                       className={`flex items-center gap-0.5 px-2 py-2 transition ${activeCls}`}
                       onClick={(e) => {
                         openToolMenu(e.currentTarget);
-                        if (tool === "draw") setDrawMenuOpen((o) => !o);
-                        else {
-                          switchTool("draw"); // switchTool ปิดเมนูก่อน แล้วค่อยเปิดทีหลัง
-                          setDrawMenuOpen(true);
-                        }
+                        // switchTool เสมอแม้เป็น tool เดิม — เคลียร์ popup บนหน้า (จำ intent ก่อน)
+                        const reopen = tool !== "draw" || !drawMenuOpen;
+                        switchTool("draw");
+                        if (reopen) setDrawMenuOpen(true);
                       }}
                     >
                       <CurrentPenIcon className="h-4 w-4" />
@@ -2926,11 +3080,10 @@ export default function PDFViewer({
                       className={`flex items-center gap-0.5 px-2 py-2 transition ${activeCls}`}
                       onClick={(e) => {
                         openToolMenu(e.currentTarget);
-                        if (tool === "shape") setShapeMenuOpen((o) => !o);
-                        else {
-                          switchTool("shape"); // switchTool ปิดเมนูก่อน แล้วค่อยเปิดทีหลัง
-                          setShapeMenuOpen(true);
-                        }
+                        // switchTool เสมอแม้เป็น tool เดิม — เคลียร์ popup บนหน้า (จำ intent ก่อน)
+                        const reopen = tool !== "shape" || !shapeMenuOpen;
+                        switchTool("shape");
+                        if (reopen) setShapeMenuOpen(true);
                       }}
                     >
                       <Icon className="h-4 w-4" />
@@ -3003,11 +3156,10 @@ export default function PDFViewer({
                       className={`flex items-center gap-0.5 px-2 py-2 transition ${corner} ${activeCls}`}
                       onClick={(e) => {
                         openToolMenu(e.currentTarget);
-                        if (tool === "stamp") setStampMenuOpen((o) => !o);
-                        else {
-                          switchTool("stamp");
-                          setStampMenuOpen(true);
-                        }
+                        // switchTool เสมอแม้เป็น tool เดิม — เคลียร์ popup บนหน้า (จำ intent ก่อน)
+                        const reopen = tool !== "stamp" || !stampMenuOpen;
+                        switchTool("stamp");
+                        if (reopen) setStampMenuOpen(true);
                       }}
                     >
                       <Icon className="h-4 w-4" />
@@ -3081,11 +3233,10 @@ export default function PDFViewer({
                       className={`flex items-center gap-0.5 px-2 py-2 transition ${activeCls}`}
                       onClick={(e) => {
                         openToolMenu(e.currentTarget);
-                        if (tool === "textbox") setTextboxMenuOpen((o) => !o);
-                        else {
-                          switchTool("textbox"); // switchTool ปิดเมนูก่อน แล้วค่อยเปิดทีหลัง
-                          setTextboxMenuOpen(true);
-                        }
+                        // switchTool เสมอแม้เป็น tool เดิม — เคลียร์ popup บนหน้า (จำ intent ก่อน)
+                        const reopen = tool !== "textbox" || !textboxMenuOpen;
+                        switchTool("textbox");
+                        if (reopen) setTextboxMenuOpen(true);
                       }}
                     >
                       <Icon className="h-4 w-4" />
@@ -3363,14 +3514,13 @@ export default function PDFViewer({
           {/* F8/C1: export PDF ฝัง annotation (redaction ติดไปเสมอ — D4) */}
           <button
             type="button"
-            title="Export PDF พร้อม annotation (เปิดแท็บใหม่)"
-            aria-label="Export PDF พร้อม annotation (เปิดแท็บใหม่)"
-            className={`max-lg:shrink-0 rounded-lg border border-slate-300 px-2 py-2 text-slate-500 hover:bg-slate-100 ${FOCUS_RING_CLS}`}
-            onClick={() =>
-              window.open(`/api/annotations/export?fileId=${file.id}`, "_blank")
-            }
+            title="Export PDF พร้อม annotation"
+            aria-label="Export PDF พร้อม annotation"
+            disabled={exporting}
+            className={`max-lg:shrink-0 rounded-lg border border-slate-300 px-2 py-2 text-slate-500 hover:bg-slate-100 disabled:opacity-50 ${FOCUS_RING_CLS}`}
+            onClick={() => void handleExportPdf()}
           >
-            <Download className="h-4 w-4" />
+            <Download className={`h-4 w-4 ${exporting ? "animate-pulse" : ""}`} />
           </button>
           </div>
           {/* M5: เงาขวาบอกว่าเลื่อนต่อได้ — หายเมื่อถึงท้ายแถบ (จอ ≥ lg ไม่มีการ scroll) */}
@@ -3425,14 +3575,29 @@ export default function PDFViewer({
               </p>
             )}
           {pageSizes.length === 0 ? (
-            <div className="flex h-[70vh] items-center justify-center text-sm text-slate-400">
-              กำลังโหลดเอกสาร…
-            </div>
+            loadError ? (
+              <div className="flex h-[70vh] items-center justify-center px-6">
+                <p className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+                  {loadError}
+                </p>
+              </div>
+            ) : (
+              <div className="flex h-[70vh] items-center justify-center text-sm text-slate-400">
+                กำลังโหลดเอกสาร…
+              </div>
+            )
           ) : (
             pageSizes.map((size, i) => {
               const w = Math.ceil(size.width * scale);
               const h = Math.ceil(size.height * scale);
               const mounted = renderPages.has(i);
+              // N3: เนื้อหาหน้า = pdf (pdfjs) หรือรูปภาพ — เลือกจาก state ที่โหลดแล้ว
+              const content: PageContent | null =
+                pdfjs && doc
+                  ? { kind: "pdf", pdfjs, doc }
+                  : imageSrcs
+                    ? { kind: "image", src: imageSrcs[i] ?? null }
+                    : null;
               return (
                 <div
                   key={i}
@@ -3459,10 +3624,9 @@ export default function PDFViewer({
                   }}
                   onMouseLeave={() => setHoveredId(null)}
                 >
-                  {mounted && pdfjs && doc ? (
+                  {mounted && content ? (
                     <PdfPage
-                      pdfjs={pdfjs}
-                      doc={doc}
+                      content={content}
                       pageNumber={i + 1}
                       width={w}
                       height={h}
@@ -3625,6 +3789,16 @@ export default function PDFViewer({
           </div>
         </div>
       )}
+
+      {/* F8: export พัง — toast แจ้งในหน้า (portal ตามกติกา fixed UI ของ rules/pdf-viewer.md) */}
+      {exportError &&
+        typeof document !== "undefined" &&
+        createPortal(
+          <div className="fixed bottom-4 right-4 z-[60] max-w-sm rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 shadow-xl">
+            {exportError}
+          </div>,
+          document.body,
+        )}
     </div>
   );
 }
diff --git a/components/sidebar/AnnotationSidebar.tsx b/components/sidebar/AnnotationSidebar.tsx
index be58877..e345a51 100644
--- a/components/sidebar/AnnotationSidebar.tsx
+++ b/components/sidebar/AnnotationSidebar.tsx
@@ -167,9 +167,19 @@ export default function AnnotationSidebar({
   // แล้วเลื่อนแถวนั้นเข้ามุมมอง — แถว render หลัง setTab จึงค่อยเลื่อนใน rAF ถัดไป
   // (dep รวม tab ตาม lint — ผลข้างเคียง: เปิดแท็บนี้ตอนยังมีรายการถูกเลือก = เลื่อนไปแถวนั้นเช่นกัน)
   const listRef = useRef<HTMLDivElement>(null);
+  // id ล่าสุดที่ประกาศไปแล้ว — บังคับสลับแท็บเฉพาะตอน selectedId "เพิ่งเปลี่ยน" เท่านั้น
+  // ไม่ใช่ทุกครั้งที่ effect รัน เพราะ dep มี tab ด้วย ไม่งั้นผู้ใช้กดกลับมาแท็บ bookmarks
+  // ไม่ได้เลยตอนมีรายการถูกเลือกอยู่ (ถูกดึงกลับ annotations ทันที); เคลียร์เป็น null
+  // ตอนไม่มีรายการถูกเลือก เพื่อให้เลือกรายการเดิมซ้ำภายหลังยังสลับแท็บให้เหมือนเดิม
+  const announcedSelRef = useRef<string | null>(null);
   useEffect(() => {
-    if (!selectedId) return;
-    if (tab !== "annotations") setTab("annotations");
+    if (!selectedId) {
+      announcedSelRef.current = null;
+      return;
+    }
+    const firstAnnounce = announcedSelRef.current !== selectedId;
+    announcedSelRef.current = selectedId;
+    if (firstAnnounce && tab !== "annotations") setTab("annotations");
     const raf = requestAnimationFrame(() => {
       listRef.current
         ?.querySelector(`[data-ann-id="${CSS.escape(selectedId)}"]`)
diff --git a/docs/PLAN-FEAT.md b/docs/PLAN-FEAT.md
index c244106..538ee45 100644
--- a/docs/PLAN-FEAT.md
+++ b/docs/PLAN-FEAT.md
@@ -288,3 +288,23 @@ Dependencies เพิ่มเติม: F3 ← F2 · F12/F13/F19 ← F1 · F15
 - **การแสดง (sidebar tab Bookmarks):** ต้นไม้ 3 ระดับ (indent ตามระดับ 1/2/3), หัวข้อมี chevron กาง/หุ่ม (state local ต่อ client) + จำนวน sub `(n)`, โน้ตแสดงใต้ชื่อ (clamp 2 บรรทัด), กดชื่อ = กระโดดหน้า (หัวข้อใหญ่ชี้หน้าของตัวเองได้), เรียงตาม createdAt
 - **Realtime:** SSE event ของ bookmarks เพิ่ม action **update** (แก้ชื่อ/โน้ต/ย้าย + ลูกที่ถูกยกขึ้น root ตอนแม่ถูกลบ) — client replace by id
 - **Out of scope ของ N2:** drag เพื่อจัดลำดับ/ย้าย, sub ลึกเกิน 3 ระดับ, bookmark ในหน้าสรุป/CSV
+
+### N3 · รองรับไฟล์รูปภาพ (jpg/jpeg/png/tif) เป็นเอกสารที่ annotate ได้เหมือน PDF (2026-09-15)
+
+> แผนงานฉบับเต็ม: `docs/PLAN-IMAGE.md` — requirement 5.3.4
+
+- **ข้อมูล (ไม่แตะ schema):** `files.pdf_url` เก็บ path รูปใน `public/` ได้เหมือน PDF — ชนิดไฟล์ derive จาก extension ผ่าน `utils/file-kind.ts` (`fileKindFromUrl`/`imageFormatFromUrl`/`imageContentTypeFromUrl`) ใช้ร่วม viewer/export/หน้ารายการ/seed — annotation/bookmark ใช้พิกัด % + `pageIndex` 0-based เหมือนเดิม (**TIFF หลายเฟรม = หลายหน้า** เหมือน PDF หลายหน้า) — invariant #1/#2/#10 ครอบคลุมรูปอัตโนมัติ
+- **การโหลด (viewer):** jpg/png โหลดจาก **static `pdfUrl` ตรง ๆ** (ไม่ผ่าน `/api/pdf` — ไม่มี ToUnicode ให้ซ่อม) ด้วย `new Image()` + `decode()` ขนาดจาก `naturalWidth/Height` (browser คิด EXIF orientation ให้แล้ว); TIFF (`utils/tiff-client.ts`): fetch bytes → `utif2` (**dynamic import เฉพาะ tif** ตาม pattern invariant #6) decode ทุก IFD → `toRGBA8` → canvas (หมุนตาม orientation tag 274, cap ด้านยาว 4096px กัน memory) → PNG blob URL ต่อเฟรม — **revoke ทุก blob URL ตอน unload/สลับไฟล์**; ทุกหน้ารูป normalize กว้าง **595** สัดส่วนเดิม (scale contract กับ export) ให้ zoom %/fit-width clamp 0.5–3/fontSize % ทำงานเหมือนหน้า A4
+- **การแสดง:** prop `content: PageContent` (union `pdf` | `image`) ใน `PdfPage` — รูป: `<img>` ที่ z-1 `pointer-events:none` เหมือน canvas (invariant #3 — DOM order ไม่ขยับ, textLayer เป็น conditional render เฉพาะ pdf), ไม่มี TextLayer → เรียก `onTextLayerRendered(pageIndex, 0)` ให้ hint "ภาพสแกน" + custom selection จอสัมผัส bail เอง; **toolbar คงทุก tool รวม HIGHLIGHT** (คลุมข้อความบนรูปไม่ได้ = no-op มี hint อธิบาย); เฟรม TIFF ที่ decode พัง = placeholder เทาแต่เอาขนาดจาก IFD header → page count/scroll/bookmark/deep link เสถียร ไฟล์ไม่พังทั้งเล่ม
+- **Export PDF (ต่อยอด F8):** branch ก่อน `PDFDocument.load` → `imageDocFromBytes` (`utils/image-to-pdf.ts`): `PDFDocument.create` + `embedJpg`/`embedPng` + `addPage([595, 595·h/w])` + `drawImage` เต็มหน้า (rotation=0) แล้ววาด annotation + bookmark outline ด้วย pipeline เดิมทั้งหมด; TIFF decode ทุกเฟรม → หมุน/mirror ครบทุก orientation 1–8 (`rotateRgba` — ตรงกับฝั่ง client) → PNG (`pngjs`) → embedPng (เฟรมพัง = หน้าขาวให้ pageIndex map ตรง); **JPEG EXIF orientation:** exact สำหรับ 3/6/8 (parse APP1 → swap กว้าง-สูง + `drawImage` rotate) — **mirror 2/4/5/7 เป็น known limitation** (pdf-lib วาด mirror ไม่ได้ และพบน้อยมากในไฟล์สแกน — มักเจอจากกล้องหน้ามือถือ: 5/7 ประมาณด้วยการหมุนของ 8/6, 2/4 แสดงตรง ๆ); `/api/pdf` เพิ่ม defensive branch คืน bytes ดิบ + content-type ถูกสำหรับรูป (กัน stray call เข้า `fixPdfActualText`)
+- **Realtime:** ไม่มี event/schema ใหม่ — SSE ผูก `fileId` เหมือนเดิม
+- **หน้ารายการ/seed:** หน้า `/` แสดงไอคอน + badge ชนิด (PDF/JPG/PNG/TIFF); `scripts/seed-samples.mjs` sync ทุก extension ใน `SAMPLE_FILE_EXTENSIONS`
+- **Out of scope ของ N3:** รูปแบบอื่น (gif/webp/bmp/heic), หมุน/ครอปรูปใน viewer, OCR, TIFF CCITT G3/G4 + JPEG-in-TIFF (เฟรมพัง = placeholder เทา), แปลงหรือเขียนไฟล์ต้นฉบับเด็ดขาด
+
+### N4 · อัปโหลดไฟล์แบบง่าย (2026-09-15)
+
+- **UI:** ฟอร์มเดียวบนหน้า `/` (`components/UploadFileForm.tsx`) — `<input type="file" accept=".pdf,.jpg,.jpeg,.png,.tif,.tiff">` + ปุ่มอัปโหลด (`useTransition`, disabled ระหว่างส่ง) รับทั้ง PDF และรูป
+- **Server Action `uploadFile`** (`app/actions/files.ts`): รับ `FormData` — validate extension (whitelist เดียวกับ `SAMPLE_FILE_EXTENSIONS`) + ขนาด ≤ 100MB + ไฟล์ไม่ว่าง → เขียน `public/uploads/<uuid>.<ext>` (**ชื่อไฟล์บนดิสก์จาก randomUUID เท่านั้น** — กันชนกันและกัน path traversal; `title` = ชื่อไฟล์เดิมที่ sanitize) → insert `files (title, pdf_url)` → `revalidatePath("/")` — ไม่มี SSE event (รายการไฟล์ไม่ได้ sync ผ่าน SSE)
+- **next.config:** `experimental.serverActions.bodySizeLimit = "100mb"` (default 1MB ไม่พอสำหรับ PDF/สแกนศาล)
+- **ความสัมพันธ์กับ seed:** seed-samples จัดการเฉพาะ `/samples/%` — ไฟล์อัปโหลดใน `/uploads/` ไม่ถูก seed ลบ
+- **Out of scope ของ N4:** หน้าจัดการ/ลบ/แก้ชื่อไฟล์ใน UI, drag-drop, progress bar, multi-file พร้อมกัน, auth ผูกเจ้าของไฟล์, สิทธิ์ต่อไฟล์
diff --git a/docs/PLAN-IMAGE.md b/docs/PLAN-IMAGE.md
new file mode 100644
index 0000000..6350871
--- /dev/null
+++ b/docs/PLAN-IMAGE.md
@@ -0,0 +1,132 @@
+# แผน 5.3.4 — รองรับไฟล์รูปภาพ (jpg/jpeg/png/tif) + อัปโหลดไฟล์ (N3 + N4)
+
+> สถานะ: **implement เสร็จสมบูรณ์** (2026-09-15) — ทำครบทั้ง 6 task ตามลำดับ, `tsc` ผ่าน, vitest 120/120, plan-reviewer + code-reviewer ผ่าน (findings ทั้งหมดแก้แล้ว: blob revoke race, TIFF orientation 7 บนจอ, **EXIF 6/8 export anchor สลับที่ทำหน้าเปล่า** — re-verify ด้วยการ render ไฟล์ export กลับด้วย pdfjs แล้วภาพอยู่ในหน้าจริง, magic bytes ตอนอัปโหลด, unlink ไฟล์กำพร้าเมื่อ DB fail, EXIF parser ทนไฟล์เสี้ยว, cap ขนาด TIFF ฝั่ง server 4096px)
+> อ้างอิง: requirement 5.3.4 (gap analysis `docs/requirement/gap-analysis.md` กลุ่ม C) + คำขอเพิ่มอัปโหลดแบบง่าย
+> ตาม governance ของโปรเจกต์: implement ต้องเขียนสเปกลง `docs/PLAN-FEAT.md` §7 (N3/N4) + ขยาย whitelist ใน `CLAUDE.md` ก่อน — เป็น task ที่ 1 ของแผนนี้
+
+## Context
+
+Requirement 5.3.4 กำหนดรูปแบบเอกสาร: PDF + รูปภาพ (jpg, jpeg, png, tif) เป็นอย่างน้อย — ปัจจุบันรองรับ PDF เท่านั้น และไฟล์เข้าระบบได้ทางเดียวคือ seed script เป้าหมาย: อัปโหลด/เปิดไฟล์รูปภาพ → annotate ครบทุกชนิด → realtime → export PDF/CSV ได้ เหมือน PDF ทุกประการ
+
+## การตัดสินใจ (ยืนยันกับผู้ใช้แล้ว)
+
+1. **สถาปัตยกรรม "ไม่แปลงก่อนใช้":** รูปคือ "หน้าเอกสาร" — viewer แสดง `<img>` แทน canvas ของ pdfjs, layers ซ้อนบนรูปตรง ๆ, annotation เก็บเป็นพิกัด % ใน DB เหมือนเดิม — PDF เกิดจริงเฉพาะไฟล์ export (สร้างใหม่ใน memory ตาม invariant #1)
+2. **TIFF: รองรับเลยด้วย UTIF.js** (`utif2` — decode รันไทม์ฝั่ง client แสดงผล + ฝั่ง server transcode PNG ตอน export), TIFF หลายเฟรม = หลายหน้า
+3. **toolbar คงทุก tool** กับทุกเอกสาร — ไม่ซ่อน HIGHLIGHT บนรูป (no-op แบบเดียวกับ PDF สแกน มี hint "ภาพสแกน" โผล่เอง)
+4. **อัปโหลดแบบง่าย:** ฟอร์มเดียวบนหน้า `/` รับทั้ง PDF และรูป — ไม่มีหน้าจัดการ/ลบ/drag-drop/progress
+5. **EXIF-rotated JPEG:** จัดการตอน export ใน scope นี้ (parse APP1 orientation 5–8 → swap ขนาดหน้า + drawImage rotate — ไม่งั้น export ได้สัดส่วนบิดต่างจากจอ)
+6. **รับ `.tiff` (สะกดยาว) ด้วย**, หน้ารูป normalize กว้าง **595** (scale contract — zoom %/fit-width/fontSize% ทำงานเหมือนหน้า A4 ทุกประการ)
+
+## หลักตั้งต้น (จากการสำรวจโค้ด + spot-check)
+
+- ทุก layer เหนือ canvas เป็น generic ต่อ "หน้า W×H + พิกัด %" — สิ่งที่ PDF-specific มีแค่ 3 จุด: (1) load effect `PDFViewer.tsx:1320-1366` (2) canvas+textLayer ใน `PdfPage` 541-1075 (3) `PDFDocument.load` ที่ `app/api/annotations/export/route.ts:229` — แทรก branch เพียง 3 จุด ที่เหลือ reuse
+- spot-check แล้ว: `PDFViewer.tsx:3462` = `{mounted && pdfjs && doc ? (`, `seed-samples.mjs:18` = filter `.endsWith(".pdf")`, มี vitest tests ที่ `tests/utils/*.test.ts` (เพิ่ม test ตาม pattern นี้ได้)
+- `lib/server-pdf.ts` path guard เป็น path-containment ล้วน (ไม่เช็ค extension) — ใช้กับรูปได้เลย
+- pdf-lib ^1.17.1 มี `embedJpg`/`embedPng` แล้ว, ไม่มี TIFF embed → ต้อง transcode
+- deps ใหม่: `utif2` + `@types/utif`, `pngjs` + `@types/pngjs` (pure JS ทั้งคู่)
+
+## Design
+
+### D1. ชนิดไฟล์ — derive จาก extension (ไม่เพิ่ม DB column)
+
+ไฟล์ใหม่ `utils/file-kind.ts` (pure, ใช้ได้ทั้ง server/client):
+
+```ts
+export type FileKind = "pdf" | "image";
+export type ImageFormat = "jpeg" | "png" | "tiff";
+export function fileKindFromUrl(url: string): FileKind;      // .jpg/.jpeg/.png/.tif/.tiff → "image" (case-insensitive)
+export function imageFormatFromUrl(url: string): ImageFormat | null;
+export const SAMPLE_FILE_EXTENSIONS: readonly string[];      // [".pdf",".jpg",".jpeg",".png",".tif",".tiff"]
+export function imageContentTypeFromUrl(url: string): string; // image/jpeg | image/png | image/tiff
+```
+
+เหตุผล: extension เก็บอยู่ใน `pdf_url` อยู่แล้ว (single source of truth, seed idempotent อิง URL) — ไม่ต้อง migrate schema / drizzle push / backfill → `docs/PLAN.md` §3 ไม่ต้องแตะ ผู้ใช้ 4 จุด: PDFViewer (derive ใน client จาก `file.pdfUrl` — `app/annotate/[id]/page.tsx` ไม่ต้องแก้), `app/page.tsx` (badge), export route, seed script (.mjs duplicate list + comment ให้ sync)
+
+### D2. Viewer — `PageContent` union + branch 3 จุดใน `components/pdf/PDFViewer.tsx`
+
+```ts
+type PageContent =
+  | { kind: "pdf"; pdfjs: typeof import("pdfjs-dist"); doc: import("pdfjs-dist").PDFDocumentProxy }
+  | { kind: "image"; src: string | null };   // null = เฟรม decode ไม่ได้ (placeholder เทา)
+type ImagePage = { src: string | null; width: number; height: number }; // normalize กว้าง 595
+```
+
+1. **load effect (1320-1366):** state ใหม่ `imagePages: ImagePage[] | null` คู่ขนาน `doc`/`pdfjs` — branch บนสุดของ effect เดิม:
+   - jpeg/png: `new Image()` + `img.src = file.pdfUrl` + `await img.decode()` → pageSizes จาก `naturalWidth/Height` (browser คิด EXIF orientation แล้ว) → normalize 595
+   - tiff: `fetch(file.pdfUrl)` → **`await import("utif2")`** (dynamic import เฉพาะ tif ตาม pattern invariant #6) → `UTIF.decode` วนทุก IFD → `decodeImage`+`toRGBA8` → canvas → `toBlob("image/png")` → `URL.createObjectURL` ต่อเฟรม + **revoke ทุก blob URL ใน cleanup** (กัน leak ตอนสลับไฟล์); TIFF orientation tag 274 หมุนตอนวาง canvas; cap ด้านยาว decoded frame 4096px (resample ใน canvas — annotation เป็น % ไม่กระทบ)
+   - pdf: โค้ดเดิมไม่แตะ
+2. **mount condition (3462):** สร้าง `PageContent` จาก state ใด state หนึ่งแทน `pdfjs && doc`
+3. **PdfPage (541-1075):** prop `pdfjs`+`doc` รวมเป็น `content` — z-1: `kind==="pdf" ? <canvas> : <img className="absolute inset-0 z-[1] pointer-events-none" draggable={false}>` (**pointer-events:none เหมือน canvas ตาม invariant #3**); pdfjs render effect (644-701) guard `if (content.kind !== "pdf") return`; textLayer div render เฉพาะ pdf (conditional render ไม่ย้ายโหนด — DOM order คงเดิมตาม invariant #3); effect เล็ก `onTextLayerRendered(pageNumber-1, 0)` ให้ hint "ภาพสแกน" + `useCustomSelection` bail ทำงานเอง
+
+ไม่ต้องแตะเลย: virtualization, zoom/fit-width, `basePageWidth`, deep link `?page`/`?ann`, bookmark scroll, InkLayer/TextboxStampLayer/AnnotationSelectionLayer/pins/tooltip/hit-test, sidebar, Server Actions, SSE, summary, CSV
+
+### D3. `/api/pdf` — รูปโหลด static `pdfUrl` ตรง ๆ + defensive branch
+
+รูปไม่ต้องผ่าน `/api/pdf` (ไม่มี ToUnicode ให้ซ่อม, ได้ static cache ฟรี + Content-Type ถูก) — แต่เพิ่ม guard ใน `app/api/pdf/route.ts` หลัง `readPublicPdf`: ถ้า `fileKindFromUrl === "image"` คืน bytes ดิบ + content-type ถูก (กัน stray call หลุดเข้า `fixPdfActualText` ที่จะ throw)
+
+### D4. Export — branch ก่อน `PDFDocument.load` แล้ว reuse pipeline 100%
+
+ที่ `app/api/annotations/export/route.ts:229`:
+
+```ts
+const doc = fileKindFromUrl(file.pdfUrl) === "image"
+  ? await imageDocFromBytes(srcBytes, file.pdfUrl)
+  : await PDFDocument.load(srcBytes);
+```
+
+ไฟล์ใหม่ `utils/image-to-pdf.ts` (server-only): `PDFDocument.create()` → jpeg `embedJpg` / อื่น ๆ `embedPng` → `addPage([595, 595·h/w])` + `drawImage` เต็มหน้า → คืน doc แล้ววาด annotation + bookmark outline ด้วย pipeline เดิมทั้งหมด (rotation=0 → `displaySize`/`displayToPdfPoint`/`pxPoint` ใช้ได้ทันที, `doc.getPage(pageIndex)` map ตรง 1 เฟรม = 1 หน้า)
+
+- **JPEG EXIF orientation 5–8:** parse APP1 เอง ~30 บรรทัด → swap กว้าง-สูง + `drawImage` ด้วย `rotate` radians
+- **TIFF:** `tiffFramesToPng(bytes)` = utif2 decode ทุก IFD → toRGBA8 → pngjs `PNG.sync.write` → embedPng (เฟรม decode พัง = หน้าขาว + console.error เพื่อให้ pageIndex map ตรง)
+
+### D5. อัปโหลดแบบง่าย (N4)
+
+- **UI:** หน้า `app/page.tsx` — ฟอร์มเล็ก: `<input type="file" accept=".pdf,.jpg,.jpeg,.png,.tif,.tiff">` + ปุ่ม "อัปโหลด" (client component แยกไฟล์ `components/UploadFileForm.tsx`, `useTransition` + ปุ่ม disabled ระหว่างอัป)
+- **Server Action `uploadFile`** ใน `app/actions/files.ts` (ไฟล์ใหม่): รับ `FormData` — validate extension (whitelist เดียวกับ `SAMPLE_FILE_EXTENSIONS`) + ขนาด ≤ 100MB + ไม่ว่าง → เขียน `public/uploads/<uuid>.<ext>` (ชื่อ random กันชน/กัน traversal — ใช้ชื่อจาก randomUUID ไม่ใช่ชื่อผู้ใช้) → insert `files (title = ชื่อไฟล์เดิมที่ sanitize, pdf_url = /uploads/<uuid>.<ext>)` → `revalidatePath("/")`
+- **`next.config.mjs`:** `experimental: { serverActions: { bodySizeLimit: "100mb" } }` (Next 14 default 1MB)
+- seed script จัดการเฉพาะ `/samples/%` → uploads ไม่โดน seed ลบ
+- Out of scope: ลบ/แก้ชื่อไฟล์ใน UI, drag-drop, progress bar, multi-file, auth ผูกเจ้าของไฟล์
+
+### D6. Seed + หน้ารายการ
+
+- `scripts/seed-samples.mjs:18`: filter เป็น `SAMPLE_FILE_EXTENSIONS.some(...)` + แก้ comment บรรทัด 2 ให้ตรง
+- `app/page.tsx`: ไอคอน `FileImage` (lucide, fallback `Image`) + badge `PDF/JPG/PNG/TIFF` ต่อ row
+
+## Docs/rules sync (plan-first — ทำเป็น task แรก ก่อนแตะโค้ด)
+
+| ไฟล์ | สิ่งที่แก้ |
+|---|---|
+| `docs/PLAN-FEAT.md` §7 | หัวข้อใหม่ **N3 รองรับไฟล์รูปภาพ** + **N4 อัปโหลดไฟล์แบบง่าย** (format ตาม N1/N2: ข้อมูล/การโหลด/การแสดง/Export/Realtime/Out of scope ต่อฟีเจอร์) |
+| `CLAUDE.md` | (1) whitelist ขอบเขตเพิ่ม N3/N4 (2) ลบข้อ "ไม่มีหน้า upload" ออกจาก Out of Scope (3) invariant #1 "ไฟล์ PDF ต้นฉบับ" → "ไฟล์ต้นฉบับ (PDF/รูปภาพ)" (4) โครงสร้างไฟล์เพิ่ม `utils/file-kind.ts`, `utils/image-to-pdf.ts`, `app/actions/files.ts`, `components/UploadFileForm.tsx` |
+| `docs/PLAN.md` | §3 ไม่แตะ (ไม่มี schema change); §0 A5 "ไม่มีหน้า upload" → อัปเดตเป็นมี upload แบบง่าย (N4) |
+| `.claude/rules/pdf-viewer.md` | แก้ bullet "โหลด PDF ผ่าน /api/pdf เสมอ" → เพิ่มข้อยกเว้นรูปโหลด static ตรง, `<img>` z-1 pointer-events:none, `onTextLayerRendered(pi, 0)`, normalize 595, utif2 dynamic import + revoke blob URL |
+| `.claude/rules/data-layer.md` | `files.pdf_url` เก็บ path รูปได้ — derive ชนิดผ่าน `utils/file-kind.ts` เท่านั้น (ไม่มี column kind), TIFF หลายเฟรม = pageIndex ต่อเฟรม, Server Action `uploadFile` เขียนไฟล์ใหม่ที่ `public/uploads/` เท่านั้น (ต้องไม่แตะไฟล์เดิม) |
+| `README.md` | ส่วน seed: extension ที่รับ + วิธีอัปโหลดผ่านหน้า `/` |
+
+## ลำดับ task + verify (ทุก task: `npx tsc --noEmit` ผ่าน + agent plan-reviewer)
+
+| # | งาน | ไฟล์หลัก | Verify เพิ่มเติม |
+|---|---|---|---|
+| 1 | Docs sync N3/N4 + `utils/file-kind.ts` + unit test | `docs/PLAN-FEAT.md`, `CLAUDE.md`, `docs/PLAN.md` §0, `utils/file-kind.ts`, `tests/utils/file-kind.test.ts` | vitest ผ่านทุก case (uppercase/ไม่มี extension/.tiff ยาว); N3/N4 spec ครบตาม format §7 |
+| 2 | Upload (Server Action + ฟอร์ม + next.config) | `app/actions/files.ts`, `components/UploadFileForm.tsx`, `app/page.tsx`, `next.config.mjs`, `.claude/rules/data-layer.md` | Playwright: อัปโหลด PDF + jpg → row ใหม่โผล่ + เปิด PDF ได้เหมือนเดิม; ไฟล์ >100MB ถูกปฏิเสธพร้อมข้อความ; ชื่อไฟล์พิเศษ (ภาษาไทย/`../`) ไม่หลุดออกนอก `public/uploads/` |
+| 3 | Viewer jpg/png (`PageContent`) + `/api/pdf` defensive branch | `components/pdf/PDFViewer.tsx`, `app/api/pdf/route.ts`, `.claude/rules/pdf-viewer.md` | อัปโหลด jpg/png แล้วเปิด: fit-width เต็มจอ, annotate ครบ DRAW/SHAPE/TEXTBOX/STAMP/REDACTION/COMMENT + bookmark, HIGHLIGHT ยังอยู่ + hint "ภาพสแกน", 2 แท็บ realtime, zoom 0.5-3 annotation ไม่เบี้ยว; **regression: PDF มี text highlight ได้เหมือนเดิม + PDF หลายสิบหน้า virtualization ปกติ**; จอ coarse (Playwright touch) วาดบนรูปได้ไม่กลายเป็น scroll |
+| 4 | TIFF ฝั่ง client (utif2) | `components/pdf/PDFViewer.tsx`, `utils/tiff-client.ts`, `package.json` (`utif2`, `@types/utif`) | อัปโหลด tif หลายเฟรม = หลายหน้า, เลื่อนลื่น, `?page=N` + bookmark กระโดดถูกเฟรม, สลับไฟล์หลายรอบ memory ไม่โต (blob revoke), เฟรมพัง = placeholder เทาแต่ไฟล์ไม่พังทั้งเล่ม |
+| 5 | Export PDF จากรูป + EXIF | `app/api/annotations/export/route.ts`, `utils/image-to-pdf.ts` | annotate ครบทุกชนิดบน jpg → export → เปิดด้วย pdf.js viewer: หน้า 595×สัดส่วนรูป, annotation ตรงตำแหน่ง, REDACTION ทึบ, COMMENT sticky เปิด popup, bookmark outline กระโดดถูกหน้า; JPEG เอียง 90° (fixture สร้างเอง) export ตรงกับจอ; **hash ต้นฉบับใน public/ ไม่เปลี่ยน** (`certutil -hashfile` ก่อน/หลัง); export PDF/CSV เดิมได้เหมือนเดิม (regression) |
+| 6 | TIFF ฝั่ง server ตอน export + ปิดงาน | `utils/image-to-pdf.ts` (`tiffFramesToPng`), `package.json` (`pngjs`, `@types/pngjs`) | export tif 3 เฟรม → PDF 3 หน้า + annotation บนเฟรม 2/3 ตกหน้าถูก + outline; hash ต้นฉบับไม่เปลี่ยน; plan-reviewer ผ่านทุก invariant ที่ N3/N4 แตะ |
+
+## Edge cases (ออกแบบไว้ล่วงหน้า)
+
+1. **EXIF JPEG:** viewer ปลอดภัยอัตโนมัติ (`<img>` ใช้ orientation เป็น default, `naturalWidth/Height` = หลังหมุน) — จุดรั่วคือ export (pdf-lib ฝัง JPEG ดิบ) → จัดการใน D4; PNG ไม่มีปัญหา
+2. **TIFF orientation tag 274:** UTIF ไม่หมุนให้ — หมุนเอง client (ตอนวาง canvas) + server (transpose RGBA ก่อน PNG encode) ให้สองฝั่งตรงกัน
+3. **Retina:** `<img>` browser render ที่ dpr เต็ม — เทียบเท่า canvas×dpr ของ pdfjs ไม่ต้องทำอะไร
+4. **รูปใหญ่ (สแกน 600dpi ~5000px):** normalize 595 ทำให้ zoom clamp 0.5-3 ใช้ได้ + cap 4096px ตอน decode กัน memory
+5. **TIFF compression ที่ utif2 ไม่รอง (CCITT G3/G4):** เฟรมนั้น placeholder เทาแต่เอาขนาดจาก IFD header → page count/scroll/bookmark เสถียร (จดไว้ใน out of scope ของ N3)
+6. **stray `/api/pdf?fileId=<รูป>`:** defensive branch คืน bytes ดิบ — ไม่หลุดเข้า `fixPdfActualText`
+7. **อัปโหลดชื่อซ้ำ/ชื่อแปลก:** uuid เป็นชื่อไฟล์บนดิสก์ + sanitize title — ไม่ชนกัน ไม่ traversal
+
+## Verification (ภาพรวม end-to-end)
+
+1. `npm run dev` + `npm run seed-samples` — รายการเดิมไม่หาย (dev DB ผู้ใช้ใช้ร่วม — ห้าม reset DB)
+2. Playwright: อัปโหลด `sample.jpg` → เปิด → ทดสอบเต็มวงจร (วาดเส้น/รูปทรง/TEXTBOX/STAMP/COMMENT/bookmark) → แท็บที่สองเห็น realtime → export PDF → เปิดด้วย pdf.js viewer ตรวจตำแหน่ง + `certutil -hashfile` ต้นฉบับก่อน/หลังเทียบกัน
+3. เช่นเดียวกับ `.tif` หลายเฟรม + `?page=2` deep link
+4. Regression PDF เดิม: highlight ข้อความ + export ได้เหมือนก่อนแก้
diff --git a/docs/PLAN.md b/docs/PLAN.md
index 5517e5e..39c946d 100644
--- a/docs/PLAN.md
+++ b/docs/PLAN.md
@@ -12,7 +12,7 @@
 | A2 | **Framework** | Next.js 14 (App Router) + TypeScript strict |
 | A3 | **PDF Renderer** | `pdfjs-dist` เวอร์ชัน **v4** (`^4.10.38`) — ใช้ built-in `TextLayer` class; worker ตั้ง path ตรง ๆ: คัดลอก `pdf.worker.min.mjs` (จาก `node_modules/pdfjs-dist/build/`) มาไว้ที่ `public/` ด้วย **postinstall script** แล้วตั้ง `pdfjs.GlobalWorkerOptions.workerSrc = "/pdf.worker.min.mjs"` — **ไม่ใช้** `new URL(..., import.meta.url)` เพราะ v4 เป็นไฟล์ `.mjs` และมักชนกับ Turbopack/webpack ใน Next 14 |
 | A4 | **Identity** | สเปกไม่ระบุระบบ auth → ใช้ **anonymous user** สร้างครั้งเดียวเก็บใน `localStorage` (`userId` = UUID, `userName` = "ผู้ใช้ XXXX") เพื่อเติม field `userId`/`userName` ในตาราง |
-| A5 | **ไม่มีไฟล์ปุ่ม Upload** | หน้า `/` อ่านรายการจาก DB เท่านั้น (ตามสเปก) — sample PDF เก็บใน `public/samples/` แล้ว seed ด้วย SQL ใน README (รายละเอียดด้านล่าง) |
+| A5 | **Upload แบบง่าย (ปรับปรุง 2026-09-15 — N4)** | หน้า `/` อ่านรายการจาก DB + ฟอร์มอัปโหลดไฟล์เดียว (PDF/jpg/jpeg/png/tif/tiff, ≤ 100MB) ผ่าน Server Action เขียนไฟล์**ใหม่**ที่ `public/uploads/<uuid>.<ext>` เท่านั้น (ไม่แตะไฟล์เดิม) — sample เก็บใน `public/samples/` แล้ว sync ด้วย `npm run seed-samples` (รายละเอียดด้านล่าง) |
 | A6 | **ทุก annotation ลบได้** | แสดงปุ่มลบเฉพาะรายการของตัวเอง (`userId` ตรงกัน) — ไม่มี role/permission ในเฟสนี้ |
 | A7 | **Database & Realtime (ปรับปรุง 2026-09-08)** | PostgreSQL แบบ **plain container เดียว** (`judes-note-db`, Docker, image `postgres:17-alpine`, พอร์ต 54322) — **เลิกใช้ Supabase stack ทั้งหมด** (ไม่มี CLI/Kong/realtime container) เพราะโปรเจกต์ใช้จริงแค่ DB + sync; realtime sync ใช้ **SSE (Server-Sent Events) + pub/sub in-process** แทน Supabase Realtime |
 | A8 | **Event ของ SSE เป็น DTO ตรง ๆ (2026-09-08)** | Server Actions publish event ผ่าน `lib/annotate-events.ts` หลังเขียน DB สำเร็จ — payload เป็น DTO (camelCase + ISO string) โดยตรง **ไม่มีการแปลง snake_case** เหมือนสมัยใช้ Supabase Realtime |
diff --git a/docs/requirement/gap-analysis.md b/docs/requirement/gap-analysis.md
index ba1a8a7..7b2b8b7 100644
--- a/docs/requirement/gap-analysis.md
+++ b/docs/requirement/gap-analysis.md
@@ -31,7 +31,7 @@
 | **5.3.1** เรียกดูเอกสารที่เกี่ยวข้องและตรวจสอบจากระบบงานคดีปกครองได้โดยตรง | ⚠️ | ตัว viewer แสดงไฟล์ PDF ที่ระบุใน DB ได้ แต่**ไม่มีการเชื่อมต่อระบบงานคดีปกครอง** (ไม่มี integration/API ดึงเอกสารโดยตรง) และไม่มีหน้า upload — หน้า `/` อ่านรายการจาก DB เท่านั้น (sample data seed ด้วย SQL) — ผูกกับ gap 5.3.14 (API) และ 5.3.16 (integrate) |
 | **5.3.2** ระบบต้องไม่สามารถแก้ไขไฟล์ต้นฉบับได้ (Non-Destructive) | ✅ | เป็น **invariant หลักของโปรเจกต์** (CLAUDE.md ข้อ 1): annotation เก็บใน DB เป็นพิกัด % เท่านั้น, ไฟล์ PDF ใน `public/` ถูกอ่านอย่างเดียวผ่าน path guard (`lib/server-pdf.ts`), export PDF (F8) สร้างไฟล์ใหม่จากสำเนาในหน่วยความจำ (pdf-lib load แล้ว save คืน bytes ใหม่) — ไม่เขียนทับต้นฉบับเด็ดขาด |
 | **5.3.3** จัดเก็บข้อมูล Bookmark แยกจากเอกสารโดยเก็บไว้ในฐานข้อมูล และสามารถนำข้อมูลดังกล่าวมาแสดงได้ | ✅ | เป็น**สถาปัตยกรรมแกนกลางของโปรเจกต์** (invariant #1–2): bookmark เก็บใน PostgreSQL ตาราง `bookmarks` เป็นพิกัด/ข้อมูลล้วน (pageIndex, ชื่อ, โครงสร้าง parent_id) แยกจากไฟล์ PDF ใน `public/` — นำกลับมาแสดงได้ทั้งแท็บ Bookmarks ใน sidebar (scroll ไปหน้านั้น), หน้าสรุป F15 และ export |
-| **5.3.4** รูปแบบเอกสารที่รองรับได้ — ไฟล์เอกสาร PDF และไฟล์รูปภาพ (jpg, jpeg, png, tif) เป็นอย่างน้อย | ❌ | **รองรับ PDF เท่านั้น** — viewer ใช้ pdfjs-dist ล้วน ไม่มีการรับไฟล์รูปภาพ (ไม่เคยอยู่ในแผน) |
+| **5.3.4** รูปแบบเอกสารที่รองรับได้ — ไฟล์เอกสาร PDF และไฟล์รูปภาพ (jpg, jpeg, png, tif) เป็นอย่างน้อย | ✅ | รองรับครบทุกนามสกุลแล้ว (N3 — แผน `docs/PLAN-IMAGE.md`, 2026-09-15): รูปคือ "หน้าเอกสาร" แสดง `<img>` แทน canvas + annotate ครบทุกชนิด + bookmark + realtime + export PDF ฝังรูป/CSV; TIFF รองรับทั้งหลายเฟรม (decode ด้วย utif2) และ EXIF orientation ตอน export; อัปโหลดไฟล์ PDF/รูปผ่านหน้ารายการได้ (N4) |
 | **5.3.5** บันทึกความเห็น (Bookmark) ทั้งแบบกรอกข้อความ (Text Box) และเขียนด้วยมือ (Freehand Drawing) | ✅ | TEXTBOX (F17) + DRAW freehand ดินสอ/ไฮไลต์เตอร์ + รองรับสไตลัส pressure (F7) |
 | **5.3.6** เพิ่ม ลบ แก้ไขความเห็นในกล่องข้อความได้ | ✅ | TEXTBOX (F17): สร้างกล่องข้อความ + แก้ไขข้อความในกล่องโดยตรง (editor รองรับตัวหนาบางส่วน — rich text) + ลบ/ย้าย/ปรับขนาด ของตัวเอง (F1, F13) |
 
@@ -82,7 +82,7 @@
 - **รายงานรายการ bookmark เป็น PDF** (5.3.15) — ต่อจากหน้าสรุป F15 หรือ export route เดิม
 
 ### กลุ่ม C — ของใหม่ที่ไม่เคยอยู่ในแผน
-- **รองรับไฟล์รูปภาพ jpg/jpeg/png/tif** (5.3.4) — กระทบ viewer เป็นวงกว้าง (pdfjs-dist อ่าน PDF เท่านั้น ต้องเพิ่ม image viewer path แยก + คิดเรื่องพิกัด % ของหน้ารูปภาพ)
+- ~~**รองรับไฟล์รูปภาพ jpg/jpeg/png/tif** (5.3.4)~~ — **ทำแล้ว (2026-09-15, N3 + N4 ตามแผน `docs/PLAN-IMAGE.md`)**: รูปคือ "หน้าเอกสาร" (layers เดิมซ้อนบน `<img>` พิกัด % ใช้ของเดิมได้ทันที) + TIFF หลายเฟรม + EXIF orientation + export PDF ฝังรูป + อัปโหลดผ่านหน้ารายการ
 - **ชุดของเอกสาร (document set) + แสดง bookmark รวมหลายไฟล์** (5.3.10) — ต้องเพิ่ม data model จัดกลุ่มไฟล์ + หน้ารวม bookmark ข้ามไฟล์ (ตอนนี้ไฟล์เป็นลิสต์แบนหน้าเดียว)
 
 ### กลุ่ม D — infrastructure (ระยะยาว)
@@ -93,5 +93,5 @@
 ## 4. ข้อเสนอแนะลำดับความสำคัญ
 
 1. **ทำกลุ่ม B ก่อน** — คุ้มค่าต่อแรง เห็นผลไว เสริมฟีเจอร์ bookmark ให้ครบ requirement โดยไม่แตะสถาปัตยกรรม
-2. **ตัดสินใจเรื่องรูปภาพ (กลุ่ม C)** — เป็น requirement ที่ชัดเจนใน 5.3.4 แต่แพงที่สุดในเชิงโครงสร้าง ควรตัดสินใจก่อนว่าจะอยู่ในขอบเขตจริงไหม
+2. ~~**ตัดสินใจเรื่องรูปภาพ (กลุ่ม C)**~~ — **ตัดสินใจและทำเสร็จแล้ว (2026-09-15)**: 5.3.4 ครบทุกนามสกุลตาม N3 + อัปโหลดไฟล์ (N4)
 3. **กลุ่ม A ตามด้วย D** — ต้องอัปเดต `docs/PLAN.md` ขยายขอบเขตอย่างเป็นทางการก่อน implement ตามกระบวนการของโปรเจกต์
diff --git a/next.config.mjs b/next.config.mjs
index 366308b..cf3bd9b 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,6 +2,12 @@
 const nextConfig = {
   // สำหรับ Docker (docker/web.Dockerfile) — build แล้วได้ .next/standalone รันด้วย node server.js
   output: "standalone",
+  // N4 อัปโหลดไฟล์ผ่าน Server Action — default 1MB ไม่พอสำหรับ PDF/สแกนศาล (ต้องตรงกับ MAX_UPLOAD_BYTES ใน app/actions/files.ts)
+  experimental: {
+    serverActions: {
+      bodySizeLimit: "100mb",
+    },
+  },
 };
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index 107fc21..08b5d75 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,12 +15,15 @@
         "next": "^14.2.35",
         "pdf-lib": "^1.17.1",
         "pdfjs-dist": "^4.10.38",
+        "pngjs": "^7.0.0",
         "postgres": "^3.4.9",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "utif2": "^4.1.0"
       },
       "devDependencies": {
         "@types/node": "^26.5.0",
+        "@types/pngjs": "^6.0.5",
         "@types/react": "^18.3.31",
         "@types/react-dom": "^18.3.7",
         "autoprefixer": "^10.5.5",
@@ -1757,6 +1760,16 @@
         "undici-types": "~8.9.0"
       }
     },
+    "node_modules/@types/pngjs": {
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/@types/pngjs/-/pngjs-6.0.5.tgz",
+      "integrity": "sha512-0k5eKfrA83JOZPppLtS2C7OUtyNAl2wKNxfyYl9Q5g9lPkgBl/9hNyAu6HuEH2J4XmIv2znEpkDd0SaZVxW6iQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.15",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
@@ -3636,6 +3649,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/pngjs": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-7.0.0.tgz",
+      "integrity": "sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.19.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.28",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.28.tgz",
@@ -4337,6 +4359,15 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/utif2": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/utif2/-/utif2-4.1.0.tgz",
+      "integrity": "sha512-+oknB9FHrJ7oW7A2WZYajOcv4FcDR4CfoGB0dPNfxbi4GO05RRnFmt5oa23+9w32EanrYcSJWspUiJkLMs+37w==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^1.0.11"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index be05a5c..cf5542a 100644
--- a/package.json
+++ b/package.json
@@ -17,12 +17,15 @@
     "next": "^14.2.35",
     "pdf-lib": "^1.17.1",
     "pdfjs-dist": "^4.10.38",
+    "pngjs": "^7.0.0",
     "postgres": "^3.4.9",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "utif2": "^4.1.0"
   },
   "devDependencies": {
     "@types/node": "^26.5.0",
+    "@types/pngjs": "^6.0.5",
     "@types/react": "^18.3.31",
     "@types/react-dom": "^18.3.7",
     "autoprefixer": "^10.5.5",
diff --git a/scripts/seed-samples.mjs b/scripts/seed-samples.mjs
index fb3760c..058eee3 100644
--- a/scripts/seed-samples.mjs
+++ b/scripts/seed-samples.mjs
@@ -1,5 +1,6 @@
 // Sync ตาราง files กับไฟล์จริงใน public/samples/ (idempotent — รันซ้ำได้ทุกครั้ง)
-// - INSERT ไฟล์ .pdf ที่ยังไม่มี row (pdf_url = /samples/<ชื่อไฟล์>)
+// - INSERT ไฟล์ .pdf/.jpg/.jpeg/.png/.tif/.tiff ที่ยังไม่มี row (pdf_url = /samples/<ชื่อไฟล์> — N3)
+//   (สำเนารายการ extension นี้ต้อง sync กับ SAMPLE_FILE_EXTENSIONS ใน utils/file-kind.ts)
 // - DELETE row ที่ชี้ /samples/* แต่ไฟล์หายจาก disk (CASCADE ลบ annotation/bookmark ตาม)
 // รันตอน container start ต่อจาก migrate.mjs และรันมือบนเครื่อง dev ได้ผ่าน npm run seed-samples
 import fs from "node:fs";
@@ -8,6 +9,9 @@ import postgres from "postgres";
 
 const SAMPLES_DIR = path.join(process.cwd(), "public", "samples");
 
+// ต้องตรงกับ SAMPLE_FILE_EXTENSIONS ใน utils/file-kind.ts (script .mjs import TS ไม่ได้)
+const SAMPLE_FILE_EXTENSIONS = [".pdf", ".jpg", ".jpeg", ".png", ".tif", ".tiff"];
+
 const dbUrl = process.env.DATABASE_URL;
 if (!dbUrl) throw new Error("ต้องตั้ง DATABASE_URL ก่อนรัน seed-samples");
 
@@ -15,7 +19,7 @@ const sql = postgres(dbUrl, { prepare: false, max: 1 });
 try {
   const onDisk = fs
     .readdirSync(SAMPLES_DIR)
-    .filter((f) => f.toLowerCase().endsWith(".pdf"))
+    .filter((f) => SAMPLE_FILE_EXTENSIONS.some((ext) => f.toLowerCase().endsWith(ext)))
     .map((f) => ({ title: f, pdfUrl: `/samples/${f}` }));
   const diskUrls = new Set(onDisk.map((f) => f.pdfUrl));
 
diff --git a/tests/utils/file-kind.test.ts b/tests/utils/file-kind.test.ts
new file mode 100644
index 0000000..6c1dfde
--- /dev/null
+++ b/tests/utils/file-kind.test.ts
@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+import {
+  SAMPLE_FILE_EXTENSIONS,
+  fileKindFromUrl,
+  imageContentTypeFromUrl,
+  imageFormatFromUrl,
+} from "@/utils/file-kind";
+
+describe("fileKindFromUrl", () => {
+  it("pdf → pdf, รูปทุกนามสกุล → image (case-insensitive)", () => {
+    expect(fileKindFromUrl("/samples/a.pdf")).toBe("pdf");
+    expect(fileKindFromUrl("/samples/photo.JPG")).toBe("image");
+    expect(fileKindFromUrl("/uploads/scan.Jpeg")).toBe("image");
+    expect(fileKindFromUrl("/uploads/scan.png")).toBe("image");
+    expect(fileKindFromUrl("/uploads/scan.TIF")).toBe("image");
+    expect(fileKindFromUrl("/uploads/scan.tiff")).toBe("image");
+  });
+
+  it("ไม่รู้จัก extension = pdf ตามพฤติกรรมก่อน N3", () => {
+    expect(fileKindFromUrl("/samples/file.docx")).toBe("pdf");
+    expect(fileKindFromUrl("/samples/noext")).toBe("pdf");
+    expect(fileKindFromUrl("/samples/.jpg")).toBe("pdf"); // dotfile ไม่ใช่ extension
+  });
+});
+
+describe("imageFormatFromUrl", () => {
+  it("จับคู่นามสกุล → format (รวม query string / จุดซ้ำในชื่อ)", () => {
+    expect(imageFormatFromUrl("/a/b/x.jpg?v=2")).toBe("jpeg");
+    expect(imageFormatFromUrl("/a/b/x.jpeg")).toBe("jpeg");
+    expect(imageFormatFromUrl("/a/b/scan.v2.png")).toBe("png");
+    expect(imageFormatFromUrl("/a/b/x.tif")).toBe("tiff");
+    expect(imageFormatFromUrl("/a/b/x.tiff")).toBe("tiff");
+  });
+
+  it("ไม่ใช่รูป → null (รวมชื่อที่คล้ายนามสกุลแต่เป็นโฟลเดอร์)", () => {
+    expect(imageFormatFromUrl("/a/b/x.pdf")).toBeNull();
+    expect(imageFormatFromUrl("/jpg.png/jpg")).toBeNull();
+    expect(imageFormatFromUrl("")).toBeNull();
+  });
+});
+
+describe("imageContentTypeFromUrl", () => {
+  it("map format → MIME ที่ถูกต้อง", () => {
+    expect(imageContentTypeFromUrl("/a/x.jpg")).toBe("image/jpeg");
+    expect(imageContentTypeFromUrl("/a/x.PNG")).toBe("image/png");
+    expect(imageContentTypeFromUrl("/a/x.tiff")).toBe("image/tiff");
+    expect(imageContentTypeFromUrl("/a/x.pdf")).toBe("application/octet-stream");
+  });
+});
+
+describe("SAMPLE_FILE_EXTENSIONS", () => {
+  it("ครบทุกนามสกุลที่ requirement 5.3.4 ระบุ", () => {
+    for (const ext of [".pdf", ".jpg", ".jpeg", ".png", ".tif", ".tiff"]) {
+      expect(SAMPLE_FILE_EXTENSIONS).toContain(ext);
+    }
+  });
+});
diff --git a/tests/utils/image-to-pdf.test.ts b/tests/utils/image-to-pdf.test.ts
new file mode 100644
index 0000000..65a6b9b
--- /dev/null
+++ b/tests/utils/image-to-pdf.test.ts
@@ -0,0 +1,113 @@
+import { describe, expect, it } from "vitest";
+import { jpegExifOrientation, rotateRgba } from "@/utils/image-to-pdf";
+
+/** สร้าง JPEG หลอง (SOI + marker ที่กำหนด + SOI-trailer) สำหรับทดสอบ parser */
+function fakeJpeg(markers: Buffer[]): Buffer {
+  return Buffer.concat([Buffer.from([0xff, 0xd8]), ...markers]);
+}
+
+/** APP1 Exif ที่มีแค่ tag Orientation (274) ตาม byte layout จริง */
+function app1Exif(orientation: number): Buffer {
+  const tiff = Buffer.alloc(26);
+  tiff.write("II", 0, "ascii");
+  tiff.writeUInt16LE(42, 2);
+  tiff.writeUInt32LE(8, 4);
+  tiff.writeUInt16LE(1, 8);
+  tiff.writeUInt16LE(274, 10);
+  tiff.writeUInt16LE(3, 12);
+  tiff.writeUInt32LE(1, 14);
+  tiff.writeUInt16LE(orientation, 18);
+  const payload = Buffer.concat([Buffer.from("Exif\0\0", "latin1"), tiff]);
+  const app1 = Buffer.alloc(4 + payload.length);
+  app1[0] = 0xff;
+  app1[1] = 0xe1;
+  app1.writeUInt16BE(payload.length + 2, 2);
+  payload.copy(app1, 4);
+  return app1;
+}
+
+describe("jpegExifOrientation", () => {
+  it("อ่าน orientation จาก APP1 ได้ (ค่า 1–8)", () => {
+    for (const v of [1, 3, 6, 8]) {
+      expect(jpegExifOrientation(fakeJpeg([app1Exif(v)]))).toBe(v);
+    }
+  });
+
+  it("ไม่มี EXIF / ไม่ใช่ JPEG = 1", () => {
+    expect(jpegExifOrientation(fakeJpeg([]))).toBe(1);
+    expect(jpegExifOrientation(Buffer.from([0x89, 0x50]))).toBe(1); // PNG signature
+  });
+
+  it("ข้าม marker อื่นก่อนเจอ APP1 (เช่น APP0 JFIF)", () => {
+    const app0 = Buffer.from([0xff, 0xe0, 0x00, 0x04, 0x4a, 0x46]); // len=4
+    expect(jpegExifOrientation(fakeJpeg([app0, app1Exif(6)]))).toBe(6);
+  });
+
+  it("APP1 ที่ไม่ใช่ Exif หรือ value ผิดพิสัย = 1", () => {
+    const notExif = Buffer.from([0xff, 0xe1, 0x00, 0x0a, 0x58, 0x4d, 0x4c, 0, 0, 1, 2, 3]); // "XML..."
+    expect(jpegExifOrientation(fakeJpeg([notExif]))).toBe(1);
+    expect(jpegExifOrientation(fakeJpeg([app1Exif(99)]))).toBe(1);
+  });
+
+  it("ทนไฟล์เสี้ยว — APP1 ถูกตัดกลางคันไม่โยน exception (คืน 1)", () => {
+    const full = app1Exif(6);
+    for (const cut of [10, 14, 20, 24]) {
+      const truncated = full.subarray(0, cut);
+      expect(jpegExifOrientation(fakeJpeg([truncated]))).toBe(1);
+    }
+  });
+
+  it("ข้าม fill bytes (0xFF ซ้ำ) ก่อน marker ได้", () => {
+    const fills = Buffer.from([0xff, 0xff, 0xff]);
+    expect(jpegExifOrientation(fakeJpeg([fills, app1Exif(6)]))).toBe(6);
+  });
+});
+
+/** ตาราง 3×2 RGBA — pixel ระบุตำแหน่งด้วยค่าสี r=x, g=y เพื่อตรวจ mapping */
+const W = 3;
+const H = 2;
+const rgba = new Uint8Array(W * H * 4);
+for (let y = 0; y < H; y++) {
+  for (let x = 0; x < W; x++) {
+    const i = (y * W + x) * 4;
+    rgba[i] = x; // r = ตำแหน่ง x เดิม
+    rgba[i + 1] = y; // g = ตำแหน่ง y เดิม
+    rgba[i + 2] = 0;
+    rgba[i + 3] = 255;
+  }
+}
+const pixel = (data: Uint8Array, x: number, y: number, width: number) => {
+  const i = (y * width + x) * 4;
+  return [data[i], data[i + 1]];
+};
+
+describe("rotateRgba", () => {
+  it("orientation 1 = ไม่แปลง", () => {
+    const out = rotateRgba(rgba, W, H, 1);
+    expect(out.width).toBe(W);
+    expect(pixel(out.data, 2, 1, W)).toEqual([2, 1]);
+  });
+
+  it("6 = หมุน 90°CW: สลับกว้าง-สูง, มุมซ้ายบนเดิมไปมุมขวาบน", () => {
+    const out = rotateRgba(rgba, W, H, 6);
+    expect(out.width).toBe(H);
+    expect(out.height).toBe(W);
+    expect(pixel(out.data, H - 1, 0, H)).toEqual([0, 0]); // (0,0) → (h-1, 0)
+    expect(pixel(out.data, 0, W - 1, H)).toEqual([W - 1, H - 1]); // (w-1,h-1) → (0, w-1)
+  });
+
+  it("5 = transpose และ 7 = anti-transpose (mirror + หมุน)", () => {
+    const t5 = rotateRgba(rgba, W, H, 5);
+    expect(t5.width).toBe(H);
+    expect(pixel(t5.data, 1, 2, H)).toEqual([2, 1]); // (x,y) → (y,x)
+    const t7 = rotateRgba(rgba, W, H, 7);
+    expect(t7.width).toBe(H);
+    expect(pixel(t7.data, H - 1 - 1, W - 1 - 2, H)).toEqual([2, 1]); // (x,y) → (h-1-y, w-1-x)
+  });
+
+  it("2 = flip แนวนอน, 3 = 180°, 4 = flip แนวตั้ง", () => {
+    expect(pixel(rotateRgba(rgba, W, H, 2).data, W - 1, 0, W)).toEqual([0, 0]);
+    expect(pixel(rotateRgba(rgba, W, H, 3).data, W - 1, H - 1, W)).toEqual([0, 0]);
+    expect(pixel(rotateRgba(rgba, W, H, 4).data, 0, H - 1, W)).toEqual([0, 0]);
+  });
+});
diff --git a/utils/file-kind.ts b/utils/file-kind.ts
new file mode 100644
index 0000000..c9f2672
--- /dev/null
+++ b/utils/file-kind.ts
@@ -0,0 +1,54 @@
+// ชนิดไฟล์เอกสาร — derive จาก extension ของ path ที่เก็บใน files.pdf_url (N3)
+// ไม่มี column kind ใน DB: extension คือ single source of truth (seed idempotent อิง URL)
+// pure module — ใช้ได้ทั้ง server และ client
+
+export type FileKind = "pdf" | "image";
+export type ImageFormat = "jpeg" | "png" | "tiff";
+
+const IMAGE_EXTENSIONS: Record<string, ImageFormat> = {
+  ".jpg": "jpeg",
+  ".jpeg": "jpeg",
+  ".png": "png",
+  ".tif": "tiff",
+  ".tiff": "tiff",
+};
+
+/** extension (ตัวเล็ก พร้อมจุดนำหน้า) ของ path หลังตัด query string — ไม่มี = "" */
+function extOf(url: string): string {
+  const clean = url.split(/[?#]/, 1)[0];
+  const slash = Math.max(clean.lastIndexOf("/"), clean.lastIndexOf("\\"));
+  const name = slash >= 0 ? clean.slice(slash + 1) : clean;
+  const dot = name.lastIndexOf(".");
+  return dot <= 0 ? "" : name.slice(dot).toLowerCase();
+}
+
+export function imageFormatFromUrl(url: string): ImageFormat | null {
+  return IMAGE_EXTENSIONS[extOf(url)] ?? null;
+}
+
+/** ไม่รู้จัก extension → "pdf" ตามพฤติกรรมเดิม (ก่อน N3 ทุกไฟล์เปิดเป็น PDF) */
+export function fileKindFromUrl(url: string): FileKind {
+  if (imageFormatFromUrl(url)) return "image";
+  return "pdf";
+}
+
+/** whitelist extension ที่ seed-samples sync จาก public/samples/ (seed .mjs มีสำเนา — sync กัน) */
+export const SAMPLE_FILE_EXTENSIONS: readonly string[] = [
+  ".pdf",
+  ".jpg",
+  ".jpeg",
+  ".png",
+  ".tif",
+  ".tiff",
+];
+
+const IMAGE_CONTENT_TYPES: Record<ImageFormat, string> = {
+  jpeg: "image/jpeg",
+  png: "image/png",
+  tiff: "image/tiff",
+};
+
+export function imageContentTypeFromUrl(url: string): string {
+  const format = imageFormatFromUrl(url);
+  return format ? IMAGE_CONTENT_TYPES[format] : "application/octet-stream";
+}
diff --git a/utils/image-to-pdf.ts b/utils/image-to-pdf.ts
new file mode 100644
index 0000000..7a2c794
--- /dev/null
+++ b/utils/image-to-pdf.ts
@@ -0,0 +1,252 @@
+// N3 — สร้าง PDF document ใหม่จากไฟล์รูปภาพ (jpeg/png) สำหรับ export route
+// ต้นฉบับไม่ถูกแตะ: อ่าน bytes จาก public/ อย่างเดียวแล้ว embed ลง PDF ใหม่ในหน่วยความจำ (invariant #1)
+// หลังสร้างเสร็จ pipeline วาด annotation/bookmark outline ของ route ใช้ได้ทันที
+// (rotation=0, page.getSize() = [595, h] ตรง scale contract ฝั่ง viewer)
+import { degrees, PDFDocument } from "pdf-lib";
+import { PNG } from "pngjs";
+import UTIF from "utif2";
+
+import { imageFormatFromUrl } from "./file-kind";
+
+/** กว้างหน้า normalize — ต้องเท่ากับ IMAGE_PAGE_WIDTH ใน PDFViewer.tsx
+ *  (scale contract: zoom %/พิกัด % ของ annotation ตรงกันทั้งจอและไฟล์ export) */
+export const IMAGE_PAGE_WIDTH = 595;
+
+/** อ่าน EXIF orientation (APP1) ของ JPEG → 1–8 (ไม่มี EXIF/อ่านไม่ได้ = 1)
+ *  pdf-lib embedJpg ฝัง JPEG ดิบไม่สน EXIF แต่ browser (<img>) ใช้ orientation เป็น default
+ *  → ค่า 3/6/8 ต้องหมุนตอน drawImage เอง ไม่งั้นหน้า export สัดส่วนบิดต่างจากที่เห็นบนจอ */
+export function jpegExifOrientation(bytes: Buffer): number {
+  // ทนไฟล์เสี้ยว: อะไรก็ตามที่อ่านเกิน buffer/ผิดรูปแบบ = ไม่มี EXIF (คืน 1) ห้ามโยนออกไป
+  // ทำให้ export route พัง (code-review: RangeError จาก APP1 ถูกตัดกลางคัน)
+  try {
+    return jpegExifOrientationUnsafe(bytes);
+  } catch {
+    return 1;
+  }
+}
+
+function jpegExifOrientationUnsafe(bytes: Buffer): number {
+  // เดิน marker ของ JPEG: SOI → ... จนเจอ APP1 (FFE1) ที่ขึ้นต้น "Exif\0\0" (หยุดที่ SOS/EOI)
+  if (bytes[0] !== 0xff || bytes[1] !== 0xd8) return 1;
+  let o = 2;
+  while (o + 4 <= bytes.length) {
+    if (bytes[o] !== 0xff) return 1;
+    if (bytes[o + 1] === 0xff) {
+      o++; // fill bytes ก่อน marker (JPEG spec อนุญาต) — ไม่ข้ามแล้วเลข length เพี้ยน
+      continue;
+    }
+    const marker = bytes[o + 1];
+    if (marker === 0xd8 || marker === 0x01 || (marker >= 0xd0 && marker <= 0xd7)) {
+      o += 2; // standalone marker ไม่มี length
+      continue;
+    }
+    if (marker === 0xd9 || marker === 0xda) return 1; // จบ header แล้ว ไม่มี EXIF
+    const len = bytes.readUInt16BE(o + 2);
+    if (len < 2) return 1; // length ไม่สมเหตุสมผล — กันวนลูป
+    if (marker === 0xe1 && len >= 16 && bytes.toString("latin1", o + 4, o + 10) === "Exif\0\0") {
+      const tiff = o + 10;
+      const le = bytes.toString("latin1", tiff, tiff + 2) === "II";
+      const u16 = (p: number) => (le ? bytes.readUInt16LE(p) : bytes.readUInt16BE(p));
+      const u32 = (p: number) => (le ? bytes.readUInt32LE(p) : bytes.readUInt32BE(p));
+      if (u16(tiff + 2) !== 42) return 1;
+      const ifd = tiff + u32(tiff + 4);
+      if (ifd + 2 > bytes.length) return 1;
+      const count = u16(ifd);
+      for (let i = 0; i < count && ifd + 2 + (i + 1) * 12 <= bytes.length; i++) {
+        const entry = ifd + 2 + i * 12;
+        if (u16(entry) === 274) {
+          const value = u16(entry + 8);
+          return value >= 1 && value <= 8 ? value : 1;
+        }
+      }
+      return 1;
+    }
+    o += 2 + len;
+  }
+  return 1;
+}
+
+/** หมุน/mirror RGBA buffer ตาม EXIF/TIFF orientation ครบทุกค่า 1–8 ตามมาตรฐาน
+ *  (3=180°, 6=90°CW, 8=270°CW, 2/4=flip แนวนอน/ตั้ง, 5=transpose, 7=anti-transpose)
+ *  ต้องให้ผลตรงกับ rgbaToCanvas ของ utils/tiff-client.ts ฝั่ง viewer เสมอ
+ *  (export เพื่อ unit test) */
+export function rotateRgba(
+  rgba: Uint8Array,
+  w: number,
+  h: number,
+  orientation: number,
+): { data: Uint8Array; width: number; height: number } {
+  if (orientation < 2 || orientation > 8) return { data: rgba, width: w, height: h };
+  const swap = orientation >= 5;
+  const nw = swap ? h : w;
+  const nh = swap ? w : h;
+  const out = new Uint8Array(rgba.length);
+  for (let y = 0; y < h; y++) {
+    for (let x = 0; x < w; x++) {
+      let dx = x;
+      let dy = y;
+      switch (orientation) {
+        case 2:
+          dx = w - 1 - x;
+          break;
+        case 3:
+          dx = w - 1 - x;
+          dy = h - 1 - y;
+          break;
+        case 4:
+          dy = h - 1 - y;
+          break;
+        case 5:
+          dx = y;
+          dy = x;
+          break;
+        case 6:
+          dx = h - 1 - y;
+          dy = x;
+          break;
+        case 7:
+          dx = h - 1 - y;
+          dy = w - 1 - x;
+          break;
+        case 8:
+          dx = y;
+          dy = w - 1 - x;
+          break;
+      }
+      const src = (y * w + x) * 4;
+      const dst = (dy * nw + dx) * 4;
+      out[dst] = rgba[src];
+      out[dst + 1] = rgba[src + 1];
+      out[dst + 2] = rgba[src + 2];
+      out[dst + 3] = rgba[src + 3];
+    }
+  }
+  return { data: out, width: nw, height: nh };
+}
+
+/** JPEG export ทำได้แค่ rotate (pdf-lib ไม่มี mirror ตอน drawImage) → exact สำหรับ
+ *  1/3/6/8 ส่วน mirror 2/4/5/7 (พบน้อยมากในไฟล์สแกน — มักเจอจากกล้องหน้ามือถือ)
+ *  ประมาณด้วยการหมุนของคู่ตรงข้าม (5→8, 7→6) หรือแสดงตรง ๆ (2/4) —
+ *  known limitation จดใน PLAN-FEAT.md §7 N3 */
+function approxJpegOrientation(orientation: number): number {
+  if (orientation === 5) return 8;
+  if (orientation === 7) return 6;
+  if (orientation === 2 || orientation === 4) return 1;
+  return orientation;
+}
+
+function rgbaToPng(data: Uint8Array, width: number, height: number): Buffer {
+  const png = new PNG({ width, height });
+  Buffer.from(data.buffer, data.byteOffset, data.byteLength).copy(png.data);
+  return PNG.sync.write(png);
+}
+
+/** cap ด้านยาว decoded frame ให้เท่าฝั่ง client (MAX_FRAME_DIMENSION ของ tiff-client.ts)
+ *  — สแกน 600dpi ~5000×7000 จะกิน RGBA ~140MB ต่อเฟรม คูณจำนวนเฟรมตอน export
+ *  downscale แบบ nearest ก็พอเพราะเป็นแค่เรือ่ง guard memory ไม่ใช่คุณภาพหลัก
+ *  (annotation เป็น % ของหน้า — ย่อภาพแล้วตำแหน่งไม่กระทบ) */
+const MAX_TIFF_EXPORT_DIMENSION = 4096;
+
+function downscaleRgba(
+  data: Uint8Array,
+  w: number,
+  h: number,
+): { data: Uint8Array; width: number; height: number } {
+  const long = Math.max(w, h);
+  if (long <= MAX_TIFF_EXPORT_DIMENSION) return { data, width: w, height: h };
+  const k = MAX_TIFF_EXPORT_DIMENSION / long;
+  const nw = Math.max(1, Math.round(w * k));
+  const nh = Math.max(1, Math.round(h * k));
+  const out = new Uint8Array(nw * nh * 4);
+  for (let y = 0; y < nh; y++) {
+    const sy = Math.min(h - 1, Math.round(y / k));
+    for (let x = 0; x < nw; x++) {
+      const sx = Math.min(w - 1, Math.round(x / k));
+      const src = (sy * w + sx) * 4;
+      const dst = (y * nw + x) * 4;
+      out[dst] = data[src];
+      out[dst + 1] = data[src + 1];
+      out[dst + 2] = data[src + 2];
+      out[dst + 3] = data[src + 3];
+    }
+  }
+  return { data: out, width: nw, height: nh };
+}
+
+/** TIFF decode ทุกเฟรม (IFD) → PNG buffer ต่อเฟรม (TIFF หลายเฟรม = หลายหน้า)
+ *  เฟรมที่ decode พัง (เช่น compression ที่ utif2 ไม่รอง) = หน้าขาวสัดส่วนตาม header
+ *  เพื่อให้จำนวนหน้า/pageIndex map ตรงกับฝั่ง viewer เสมอ */
+function tiffFramesToPng(bytes: Buffer): { bytes: Buffer; jpeg: boolean }[] {
+  const ifds = UTIF.decode(bytes);
+  // เอาเฉพาะ IFD ที่เป็นเฟรมรูป — เรียงลำดับ/เงื่อนไขเดียวกับ decodeTiffPages ฝั่ง client
+  const frames = ifds.filter(
+    (ifd) => Array.isArray(ifd.t256) && Array.isArray(ifd.t257),
+  );
+  return frames.map((ifd) => {
+    const headerW = Array.isArray(ifd.t256) ? Number(ifd.t256[0]) || 1 : 1;
+    const headerH = Array.isArray(ifd.t257) ? Number(ifd.t257[0]) || 1 : 1;
+    try {
+      UTIF.decodeImage(bytes, ifd);
+      const rgba = UTIF.toRGBA8(ifd);
+      const orientation = Array.isArray(ifd.t274) ? Number(ifd.t274[0]) || 1 : 1;
+      const scaled = downscaleRgba(rgba, ifd.width, ifd.height);
+      const rotated = rotateRgba(scaled.data, scaled.width, scaled.height, orientation);
+      return { bytes: rgbaToPng(rotated.data, rotated.width, rotated.height), jpeg: false };
+    } catch (err) {
+      console.error("decode เฟรม TIFF ตอน export ไม่ได้ — ใส่หน้าขาวแทน", err);
+      // หน้าขาวจอง buffer ที่ขนาด capped พอ (สัดส่วนเดียวกับ header — หน้า PDF ได้ ratio เดิม)
+      const capped = downscaleRgba(new Uint8Array(0), headerW, headerH);
+      const white = new Uint8Array(capped.width * capped.height * 4).fill(255);
+      return { bytes: rgbaToPng(white, capped.width, capped.height), jpeg: false };
+    }
+  });
+}
+
+/** สร้าง PDF ใหม่ที่มีรูปเต็มหน้าทุกเฟรม (TIFF หลายเฟรม = หลายหน้า)
+ *  คืน PDFDocument ให้ export route วาด annotation ต่อด้วย pipeline เดิม */
+export async function imageDocFromBytes(bytes: Buffer, url: string): Promise<PDFDocument> {
+  const format = imageFormatFromUrl(url);
+  if (!format) throw new Error(`ไฟล์ ${url} ไม่ใช่รูปภาพที่รองรับ`);
+
+  const doc = await PDFDocument.create();
+  const frames: { bytes: Buffer; jpeg: boolean }[] =
+    format === "tiff" ? tiffFramesToPng(bytes) : [{ bytes, jpeg: format === "jpeg" }];
+  // guard เดียวกับ decodeTiffPages ฝั่ง client — PDF 0 หน้าจะทำให้ getPage(-1) throw ทีหลัง
+  if (frames.length === 0) throw new Error("ไม่พบเฟรมรูปในไฟล์ TIFF");
+
+  for (const frame of frames) {
+    const image = frame.jpeg ? await doc.embedJpg(frame.bytes) : await doc.embedPng(frame.bytes);
+    // PNG ไม่มี EXIF; TIFF ถูกหมุนครบทุกค่าตั้งแต่ tiffFramesToPng แล้ว — เหลือ JPEG (approx)
+    const orientation = frame.jpeg ? approxJpegOrientation(jpegExifOrientation(frame.bytes)) : 1;
+    const quarter = orientation >= 5 && orientation <= 8; // หมุน 90° → สลับกว้าง-สูงของภาพที่แสดง
+
+    // ขนาดหน้า: กว้าง 595 เสมอ สูงตามสัดส่วน "ภาพหลังหมุน" (ตรงกับที่แสดงบนจอ)
+    const storedW = image.width;
+    const storedH = image.height;
+    const displayedRatio = quarter ? storedW / storedH : storedH / storedW;
+    const pageW = IMAGE_PAGE_WIDTH;
+    const pageH = pageW * displayedRatio;
+    const page = doc.addPage([pageW, pageH]);
+
+    if (orientation === 6) {
+      // 90°CW: anchor มุมล่างซ้าย วาดแล้วหมุน -90° รอบ anchor (pdf-lib หมุนรอบ x,y —
+      // bbox ที่ได้ต้องครอบหน้าพอดี ตรวจด้วยการคูณ matrix จาก content stream จริง)
+      page.drawImage(image, {
+        x: 0, y: pageH, width: pageH, height: pageW, rotate: degrees(-90),
+      });
+    } else if (orientation === 8) {
+      // 270°CW: anchor มุมล่างขวา วาดแล้วหมุน +90°
+      page.drawImage(image, {
+        x: pageW, y: 0, width: pageH, height: pageW, rotate: degrees(90),
+      });
+    } else if (orientation === 3) {
+      // 180°: anchor มุมบนขวา
+      page.drawImage(image, {
+        x: pageW, y: pageH, width: pageW, height: pageH, rotate: degrees(180),
+      });
+    } else {
+      page.drawImage(image, { x: 0, y: 0, width: pageW, height: pageH });
+    }
+  }
+  return doc;
+}
diff --git a/utils/tiff-client.ts b/utils/tiff-client.ts
new file mode 100644
index 0000000..20b5621
--- /dev/null
+++ b/utils/tiff-client.ts
@@ -0,0 +1,108 @@
+// N3 — decode TIFF ฝั่ง client: ทุกเฟรม (IFD) → RGBA → canvas → PNG blob URL ต่อเฟรม
+// (TIFF หลายเฟรม = หลายหน้าเหมือน PDF หลายหน้า)
+// utif2 ถูก dynamic import เฉพาะไฟล์ tif เท่านั้น (pattern invariant #6)
+// ขนาดหน้า normalize กว้าง imagePageWidth (scale contract เดียวกับ jpg/png และ export)
+// caller ต้อง revoke ทุก src ที่ไม่ null ตอน cleanup กัน memory leak (rules/pdf-viewer.md)
+
+const MAX_FRAME_DIMENSION = 4096; // cap ด้านยาว decoded frame (สแกน 600dpi ~5000px — annotation เป็น % ไม่กระทบ)
+
+type TiffIfd = import("utif2").IFD;
+
+/** อ่านค่าตัวเลขแรกของ tag (คืน 0 ถ้าไม่ใช่ array ตัวเลข — เช่น tag ชนิดอื่น) */
+function tagNumber(ifd: TiffIfd, tag: "t256" | "t257" | "t274"): number {
+  const value = ifd[tag];
+  return Array.isArray(value) ? Number(value[0]) || 0 : 0;
+}
+
+export type DecodedTiffPage = {
+  /** PNG blob URL ของเฟรม (null = เฟรมนี้ decode ไม่ได้ → placeholder เทา แต่หน้ายังมีขนาดจาก header) */
+  src: string | null;
+  width: number;
+  height: number;
+};
+
+/** TIFF orientation tag (274) — ครบทุกค่า 1–8 ตามมาตรฐาน EXIF (หมุน + mirror)
+ *  โดย transform matrix มาตรฐาน (canvas ปลายทางสลับกว้าง-สูงสำหรับ 5–8)
+ *  ต้องตรงกับ rotateRgba ของ utils/image-to-pdf.ts ฝั่ง export เสมอ */
+function rgbaToCanvas(rgba: Uint8Array, w: number, h: number, orientation: number): HTMLCanvasElement {
+  const swap = orientation >= 5 && orientation <= 8; // หมุน 90° → สลับกว้าง-สูง
+  const targetW = swap ? h : w;
+  const targetH = swap ? w : h;
+  const scale = Math.min(1, MAX_FRAME_DIMENSION / Math.max(targetW, targetH));
+
+  // วาด RGBA ลง canvas ต้นทางก่อน แล้วค่อย transform (orientation + downscale) ลง canvas จริง
+  const src = document.createElement("canvas");
+  src.width = w;
+  src.height = h;
+  src.getContext("2d")!.putImageData(new ImageData(new Uint8ClampedArray(rgba), w, h), 0, 0);
+
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, Math.round(targetW * scale));
+  canvas.height = Math.max(1, Math.round(targetH * scale));
+  const ctx = canvas.getContext("2d")!;
+  ctx.imageSmoothingQuality = "high";
+  ctx.scale(scale, scale);
+  switch (orientation) {
+    case 2:
+      ctx.transform(-1, 0, 0, 1, w, 0);
+      break;
+    case 3:
+      ctx.transform(-1, 0, 0, -1, w, h);
+      break;
+    case 4:
+      ctx.transform(1, 0, 0, -1, 0, h);
+      break;
+    case 5:
+      ctx.transform(0, 1, 1, 0, 0, 0);
+      break;
+    case 6:
+      ctx.transform(0, 1, -1, 0, h, 0);
+      break;
+    case 7:
+      // anti-transpose: (x,y) → (h-1-y, w-1-x) — e/f เป็น h,w ตาม rotateRgba ฝั่ง export
+      ctx.transform(0, -1, -1, 0, h, w);
+      break;
+    case 8:
+      ctx.transform(0, -1, 1, 0, 0, w);
+      break;
+  }
+  ctx.drawImage(src, 0, 0);
+  return canvas;
+}
+
+export async function decodeTiffPages(
+  buffer: ArrayBuffer,
+  imagePageWidth: number,
+): Promise<DecodedTiffPage[]> {
+  const UTIF = await import("utif2");
+  const ifds = UTIF.decode(buffer);
+  // เอาเฉพาะ IFD ที่เป็นเฟรมรูป (มี tag ขนาด t256/t257) — ไม่ใช่ EXIF metadata IFD
+  const frames = ifds.filter((ifd) => Array.isArray(ifd.t256) && Array.isArray(ifd.t257));
+  if (frames.length === 0) throw new Error("ไม่พบเฟรมรูปในไฟล์ TIFF");
+
+  const pages: DecodedTiffPage[] = [];
+  for (const ifd of frames) {
+    const headerW = tagNumber(ifd, "t256");
+    const headerH = tagNumber(ifd, "t257");
+    try {
+      UTIF.decodeImage(buffer, ifd);
+      const rgba = UTIF.toRGBA8(ifd);
+      const orientation = tagNumber(ifd, "t274") || 1;
+      const canvas = rgbaToCanvas(rgba, ifd.width, ifd.height, orientation);
+      const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, "image/png"));
+      if (!blob) throw new Error("แปลง canvas เป็น PNG ไม่ได้");
+      pages.push({
+        src: URL.createObjectURL(blob),
+        width: imagePageWidth,
+        height: (canvas.height / canvas.width) * imagePageWidth,
+      });
+    } catch (err) {
+      // เฟรมเดียวพัง (เช่น compression ที่ utif2 ไม่รอง) ไม่ทำให้ทั้งไฟล์พัง — placeholder เทา
+      // แต่ขนาดหน้ายังเอาจาก header ได้ → page count/scroll/bookmark/deep link เสถียร
+      console.error("decode เฟรม TIFF ไม่ได้ — แสดง placeholder", err);
+      const ratio = headerW > 0 && headerH > 0 ? headerH / headerW : 1.4;
+      pages.push({ src: null, width: imagePageWidth, height: imagePageWidth * ratio });
+    }
+  }
+  return pages;
+}