จอสัมผัส (iOS/Android): แก้ครบตาม UX audit C1+M1–M6 + code review + งาน export PDF ที่ค้างใน working tree:

(1) C1 — เมนู dropdown 5 ตัว + popup bookmark เดิมเป็น absolute ใน scroll container ของแถบ tool ที่สลับ overflow ตอนเปิด ทำให้บนมือถือ scroll position รีเซ็ต (ปุ่มเด้งกลับซ้าย) เมนูเปิดนอก viewport และทั้ง app เอียงเลื่อนแนวนอนได้ — ย้ายทั้งหมดไป createPortal(document.body) เป็น position:fixed ตาม rect จริงของปุ่มตอนคลิก (fixedMenuPos + clamp ให้อยู่ในจอ; bookmarkPos จาก ref ปุ่ม 🔖 ใช้ร่วมทุกทางเข้า รวมคีย์ลัด B) + ถอดการสลับ overflow (คง overflow-x-auto เสมอ) + ปิดเมนูเมื่อเลื่อนแถบต่อ หรือ "ความกว้าง" จอเปลี่ยน (code review Major1: resize ที่เปลี่ยนแค่ความสูง เช่น URL bar ยุบ/คีย์บอร์ดของมือถือ ไม่ปิด — เมนู fixed ยึด sticky header อยู่กับที่อยู่แล้ว กันเมนู/popup ที่เปิดค้างปรับค่าโดนปิดกลางคัน) + outside-click ข้ามโหนดใน [data-tool-menu] (ref ของ wrapper มองไม่เห็นโหนดใน portal ไม่ข้ามแล้วคลิกในเมนู=ปิดเมนูเอง) + rule ปุ่ม 36px ใน globals.css เปลี่ยนไป target [data-tool-menu] ตรง ๆ (เดิมเจาะผ่าน .z-50 ที่ไม่มีแล้ว)

(2) M4 — tap/คลิกที่ใช้ "ปิดเมนู" (mousedown ปิดก่อน click ยิงถึง page) กลายเป็นวาง comment/textbox/stamp โดยไม่ตั้งใจ — menuClosedAtRef (markMenuClosed ทุก path ปิด: outside-click/Escape/switchTool เฉพาะเมื่อมีเมนูเปิดจริง/เลื่อนแถบ/resize) แล้ว handlePageClick เฉย 300ms แรก คลิกที่สองค่อยวาง (มาตรฐาน dropdown ใช้ทั้ง desktop+touch — pattern เดียวกับ touchHideTimerRef ของปุ่มไฮไลต์)

(3) M1+M2 ของ TEXTBOX — ทางเข้า editor เคยผูก double-click อย่างเดียว (บน iOS double-tap = zoom หน้า แก้ข้อความไม่ได้เลยตลอดชีวิตบนมือถือ) — เพิ่มปุ่ม "แก้ไขข้อความ" ในแผง selection (onStartEdit → startTextboxEdit) ใช้ได้ทั้ง touch/desktop และ default fontSize 1.2% (≈7px เล็กกว่า preset ต่ำสุด 10px ของตัวเอง) → 2.5% (≈15px อ่านออกทันที) กระทบเฉพาะกล่องใหม่

(4) M3+clamp — hit area บน pointer:coarse โดยของที่มองเห็นคงขนาดเดิม: มุมกรอบใช้ ::after (10→hit 28px), แถบขอบ (8→16px), ปุ่มแผง 20→36px, swatch 16→32px, icon sidebar 16/14→32px (hooks sel-handle/sel-strip/sel-panel/sel-panel-btn/color-swatches + aside[data-sidebar]) และ clamp แนวนอนของแผง selection (left: max(0, min(box.x, size.width-244))) กันรายการชิดขวาทำแผง w-60 ล้นขอบจอแคบจนปุ่มลบหลุดจอ (เจอตอน verify จอ 390px)

(5) M5 — undo/redo max-lg:order-first ไปหัวแถวเลื่อน: เห็นเสมอโดยไม่ต้องเลื่อนแถบ (undo คือทางแก้พลาดหลักของจอสัมผัส) จอ ≥ lg ไม่มี order ลำดับ/หน้าตาเดิมทุกประการ

(6) M6 อื่น ๆ — -webkit-tap-highlight-color: transparent + overscroll-behavior-y: contain (กัน pull-to-refresh ของ Android ล้าง undo history ฝั่ง client), button/label touch-action: manipulation (ตัด double-tap zoom), safe-area inset แบบ defensive (จะมีค่าเมื่อใส่ viewport-fit=cover ในอนาคต), no-callout กัน long-press magnifier เฉพาะ layer TEXTBOX/STAMP (textLayer ยัง select/copy ได้), ปุ่ม composer/popover/pin 24→36px (coarse-36), ปุ่มหน้าสรุป 30→44px (summary-page), ซ่อนชื่อไฟล์บนจอเล็ก, ปุ่ม X ปิด sidebar บน max-lg (เดิมปิดได้ทางเดียวคือจิ้ม backdrop เพราะ overlay z-50 กลบปุ่ม toggle ใน header), tab sidebar เป็นไทย "ที่คั่นหน้า/หมายเหตุ" ให้สอดคล้อง UI ไทยล้วน, chip แจ้ง "หน้าที่เปิดดูเป็นภาพสแกน" เมื่อ tool highlight และทุกหน้าที่ render มี 0 text spans (onTextLayerRendered รายงานต่อหน้า + pageSpanCount)

(7) งาน export PDF ที่อยู่ใน working tree ก่อนหน้า + แก้ตาม code review — COMMENT กลายเป็น sticky note จริง (/Subtype /Text), bookmark → PDF outline (/Dest คำนวณตาม /Rotate เหมือน annotation), โน้ต N1 → sticky note แนบตำแหน่ง, นิยาม yOffset เป็น "ขอบบนของสิ่งที่ดูอยู่" + goToBookmark ใช้ scrollToBelowHeader, และเพิ่ม guard roots.length===0 ใน buildOutline กัน bookmark cycle ไร้ root (DB ถูกแก้ตรง ๆ) ทำ kids[0].ref พังเป็น 500 ทั้ง export

(8) sync .claude/rules/pdf-viewer.md — portal เมนู+ห้ามสลับ overflow ของแถบ, guard 300ms, hit-area hooks ระดับ coarse, TEXTBOX default 2.5% + ปุ่มแก้ไขข้อความ

verify: tsc ผ่าน · vitest 100/100 · Playwright touch emulation จริง (iPhone 390×844 / iPad 820×1180 / desktop 1280): เมนูอยู่ใน viewport ทุกสถานะหลังเลื่อนแถบ + scrollLeft คงที่ + ไม่มี horizontal overflow, แตะในเมนูไม่ปิดเอง, เลื่อนแถบ/กว้างจอเปลี่ยน=ปิด/สูงเปลี่ยน=ค้าง, guard 300ms ทั้ง stamp/textbox/comment, ปุ่มแก้ไขข้อความเปิด editor พร้อมข้อความเดิม, fontSize ใหม่ 14.9px, hit มุม 28px/ปุ่มลบ 36px/swatch 32px, undo อยู่ในจอ + undo/redo ทำงาน, X ปิด sidebar, chip สแกนโชว์/ไฟล์ text ไม่โชว์, desktop เหมือนเดิม, แผง clamp (x=130..370 ปุ่มลบจบ 363) — annotation ทดสอบลบเฉพาะ id ที่สร้างเองทั้งหมด DB กลับสะอาด

Co-Authored-By: Claude Code <noreply@anthropic.com>

app/api/annotations/export/route.ts

@@ -2,20 +2,35 @@ import fs from "node:fs";
 import path from "node:path";
 
 import fontkit from "@pdf-lib/fontkit";
-import { PDFDocument, LineCapStyle, rgb, type PDFFont } from "pdf-lib";
-import { asc, eq } from "drizzle-orm";
+import {
+  PDFDocument,
+  PDFHexString,
+  PDFName,
+  PDFString,
+  LineCapStyle,
+  rgb,
+  type PDFFont,
+  type PDFDict,
+  type PDFPage,
+  type PDFRef,
+} from "pdf-lib";
+import { asc, eq, inArray } from "drizzle-orm";
 
 import { db } from "@/db";
 import { PdfPathError, readPublicPdf } from "@/lib/server-pdf";
 import {
+  annotationReplies,
   annotations,
+  bookmarks,
   files,
   toAnnotationDTO,
   type AnnotationType,
+  type BookmarkRow,
   type CommentData,
   type DrawData,
   type HighlightData,
   type RedactionData,
+  type ReplyRow,
   type ShapeData,
   type StampData,
   type TextboxData,
@@ -27,28 +42,39 @@ import {
   encodeRFC5987,
   hexToRgb01,
   wrapStyledText,
-  wrapTextByWidth,
   type Rot,
   type StyledRun,
 } from "@/utils/pdf-export";
-import type { Rect } from "@/db/schema";
+import type { AnnotationDTO, Rect } from "@/db/schema";
 import { toPx, type Point, type Size } from "@/utils/coordinates";
-import { STAMP_HEIGHT_RATIO, textboxMaxWidthPct } from "@/utils/geometry";
-import { STAMP_COLOR, effectiveDrawOpacity, stampFitFontSize } from "@/utils/annotation-display";
+import {
+  STAMP_HEIGHT_RATIO,
+  annotationBBox,
+  textboxMaxWidthPct,
+} from "@/utils/geometry";
+import {
+  STAMP_COLOR,
+  annotationNote,
+  effectiveDrawOpacity,
+  stampFitFontSize,
+} from "@/utils/annotation-display";
 
-// Export PDF ฝัง annotation (F8/C1 — PLAN-FEAT.md §3)
+// Export PDF ฝัง annotation + bookmarks (F8/C1 — PLAN-FEAT.md §3)
 // - อ่าน PDF ต้นฉบับจาก public/ แบบ **อ่านอย่างเดียว** (invariant #1) — pdf-lib load
 //   เป็นสำเนาในหน่วยความจำ แล้ว save() คืน bytes ใหม่ ไม่เขียนทับไฟล์เดิม
-// - วาดต่อหน้าตามลำดับ: HIGHLIGHT → DRAW → SHAPE → REDACTION (ดำทึบ) → COMMENT หมุด
+// - วาดต่อหน้าตามลำดับ: HIGHLIGHT → DRAW → SHAPE → REDACTION (ดำทึบ) → TEXTBOX/STAMP
 //   (+ข้อความถ้ามีฟอนต์ Sarabun — D5: ไม่มีฟอนต์ต้องไม่พัง)
+// - COMMENT เป็น sticky note จริงของ PDF (/Subtype /Text — คลิกหมุดที่ reader เปิด
+//   popup อ่าน message + replies), bookmarks เป็น PDF outline (แผง Bookmarks)
 
 const UUID_RE =
   /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
 
 const SARABUN_REL = path.join("fonts", "Sarabun-Regular.ttf");
 
-// ลำดับวาดต่อหน้าตามสเปก §3 F8 ข้อ 3: HIGHLIGHT → DRAW → SHAPE → REDACTION → COMMENT
-// (REDACTION ดำทึบต้องทับทุกอย่างที่สร้างก่อนหน้า และหมุด COMMENT ต้องไม่ถูกกลบ — D4)
+// ลำดับวาดต่อหน้าตามสเปก §3 F8 ข้อ 3: HIGHLIGHT → DRAW → SHAPE → REDACTION → TEXTBOX → STAMP
+// (REDACTION ดำทึบต้องทับทุกอย่างที่สร้างก่อนหน้า — D4) — COMMENT ไม่เข้าลำดับนี้แล้ว:
+// เป็น annotation object ที่ reader วาดเหนือ content เสมอ จึงไม่มีปัญหาถูกกลบ
 const TYPE_ORDER: Record<AnnotationType, number> = {
   HIGHLIGHT: 0,
   DRAW: 1,
@@ -59,6 +85,126 @@ const TYPE_ORDER: Record<AnnotationType, number> = {
   STAMP: 6,
 };
 
+/** ISO string → PDF date string (D:YYYYMMDDHHmmSSZ) สำหรับ /M ของ annotation */
+function toPdfDate(iso: string): string {
+  const d = new Date(iso);
+  const p = (n: number) => String(n).padStart(2, "0");
+  return `D:${d.getUTCFullYear()}${p(d.getUTCMonth() + 1)}${p(d.getUTCDate())}${p(d.getUTCHours())}${p(d.getUTCMinutes())}${p(d.getUTCSeconds())}Z`;
+}
+
+/**
+ * โน้ตคำอธิบาย (N1) ของ annotation → sticky note เล็กแนบมุมขวาบนของ bbox —
+ * Chrome/Edge แสดง tooltip จาก /Contents ตอน hover, Acrobat คลิกเปิด popup
+ * (แทน hover tooltip บนเว็บที่ flatten ลงหน้าแล้วอ่านไม่ได้)
+ */
+function attachNoteSticky(
+  doc: PDFDocument,
+  page: PDFPage,
+  a: AnnotationDTO,
+  note: string,
+  anchor: Point, // มุมขวาบนของ bbox ในพิกัด PDF (pt)
+): void {
+  const annot = doc.context.obj({
+    Type: "Annot",
+    Subtype: "Text",
+    // หมุดเล็ก 16pt ห้อยลงจากจุดยึด (แกน y ของ PDF ชี้ขึ้น)
+    Rect: [anchor.x, anchor.y - 16, anchor.x + 16, anchor.y],
+    Contents: PDFHexString.fromText(note),
+    T: PDFHexString.fromText(a.userName),
+    C: [254 / 255, 243 / 255, 199 / 255],
+    M: PDFString.of(toPdfDate(a.updatedAt)),
+    F: 4, // Print — พิมพ์แล้ว icon ติดไปด้วย
+  });
+  page.node.addAnnot(doc.context.register(annot));
+}
+
+/**
+ * ฝัง bookmarks เป็น PDF outline (แผง Bookmarks ของ reader กดกระโดดได้) — โครงสร้าง
+ * ตาม parentId (DB จำกัด 3 ระดับอยู่แล้ว) เรียงตาม createdAt เหมือน sidebar แต่ละรายการ
+ * /Dest ชี้หน้า + ตำแหน่ง yOffset — pdf-lib ไม่มี API ระดับสูงสำหรับ outline จึงต่อ
+ * PDFDict เอง (Title เป็น PDFHexString UTF-16BE รองรับภาษาไทย)
+ */
+function buildOutline(doc: PDFDocument, rows: BookmarkRow[]): void {
+  if (rows.length === 0) return;
+  const ctx = doc.context;
+  const ids = new Set(rows.map((b) => b.id));
+  const childrenOf = new Map<string, BookmarkRow[]>();
+  const roots: BookmarkRow[] = [];
+  for (const b of rows) {
+    // parent หาย (ความครบถ้วนของข้อมูล) → ผลักขึ้น root เหมือนที่ sidebar ทำ
+    if (b.parentId && ids.has(b.parentId)) {
+      const list = childrenOf.get(b.parentId) ?? [];
+      list.push(b);
+      childrenOf.set(b.parentId, list);
+    } else {
+      roots.push(b);
+    }
+  }
+  // Major 2 (code review): ข้อมูลวนซ้ำไร้ root (A แม่ของ B, B แม่ของ A — action/sidebar กัน
+  // ตอนเขียนแล้ว แต่กันเคส DB ถูกแก้ตรง ๆ) roots จะว่างและ kids[0] พังทั้ง export (500) —
+  // ปล่อยเป็นไฟล์ไม่มี outline เงียบ ๆ ดีกว่าไฟล์พังทั้งใบ
+  if (roots.length === 0) return;
+
+  const buildNode = (
+    b: BookmarkRow,
+    parentRef: PDFRef,
+  ): { ref: PDFRef; dict: PDFDict; count: number } => {
+    const ref = ctx.nextRef();
+    const kids = (childrenOf.get(b.id) ?? []).map((k) => buildNode(k, ref));
+    const page = doc.getPage(
+      Math.min(Math.max(b.pageIndex, 0), doc.getPageCount() - 1),
+    );
+    const size = page.getSize();
+    const rotation = (((page.getRotation().angle % 360) + 360) % 360) as Rot;
+    const display = displaySize(size, rotation);
+    // yOffset (% ของความสูงหน้าบนจอ) → พิกัด PDF ทางเดียวกับ annotation (invariant #2)
+    // นิยาม yOffset = "จุดจริงบนหน้า" (ขอบบนของสิ่งที่ดูอยู่ตอนสร้าง) และในเว็บกดแล้ว
+    // จุดถูกดันชิดใต้ header — dest /XYZ ของ PDF ก็วางจุดยึดติดขอบบน viewport เหมือนกัน
+    // จึงใช้ตำแหน่งเป๊ะ ๆ ไม่ต้องชดเชย (ก่อนหน้านี้ yOffset เป็น "กึ่งกลางจอตอนสร้าง"
+    // จึงเคยต้องเลื่อนไถออก 25% ของความสูงหน้า)
+    const dest = displayToPdfPoint(
+      { x: 0, y: toPx(b.yOffset, display.height) },
+      size,
+      rotation,
+    );
+    const count = kids.reduce((sum, k) => sum + 1 + k.count, 0);
+    const dict = ctx.obj({
+      Title: PDFHexString.fromText(b.title),
+      Parent: parentRef,
+      // /XYZ = กระโดดไปตำแหน่งนี้โดยคง zoom ของผู้อ่าน (null)
+      Dest: [page.ref, PDFName.of("XYZ"), dest.x, dest.y, null],
+      ...(kids.length > 0
+        ? { First: kids[0].ref, Last: kids[kids.length - 1].ref, Count: count }
+        : {}),
+    });
+    for (let i = 0; i < kids.length; i++) {
+      if (i > 0) kids[i].dict.set(PDFName.of("Prev"), kids[i - 1].ref);
+      if (i < kids.length - 1)
+        kids[i].dict.set(PDFName.of("Next"), kids[i + 1].ref);
+    }
+    ctx.assign(ref, dict);
+    return { ref, dict, count };
+  };
+
+  const rootRef = ctx.nextRef();
+  const kids = roots.map((r) => buildNode(r, rootRef));
+  for (let i = 0; i < kids.length; i++) {
+    if (i > 0) kids[i].dict.set(PDFName.of("Prev"), kids[i - 1].ref);
+    if (i < kids.length - 1) kids[i].dict.set(PDFName.of("Next"), kids[i + 1].ref);
+  }
+  ctx.assign(
+    rootRef,
+    ctx.obj({
+      Type: "Outlines",
+      First: kids[0].ref,
+      Last: kids[kids.length - 1].ref,
+      // Count เป็นบวก = แผง outline เปิดทั้งหมดตอนเปิดไฟล์
+      Count: kids.reduce((sum, k) => sum + 1 + k.count, 0),
+    }),
+  );
+  doc.catalog.set(PDFName.of("Outlines"), rootRef);
+}
+
 export async function GET(req: Request) {
   const url = new URL(req.url);
   const fileId = url.searchParams.get("fileId") ?? "";
@@ -118,6 +264,22 @@ export async function GET(req: Request) {
     .map(toAnnotationDTO)
     .sort((a, b) => TYPE_ORDER[a.type] - TYPE_ORDER[b.type]);
 
+  // replies ของ COMMENT สำหรับฝังลง popup ของ sticky note (F9) — query เฉพาะเมื่อมี COMMENT
+  const repliesByAnnotation = new Map<string, ReplyRow[]>();
+  const commentIds = dtos.filter((a) => a.type === "COMMENT").map((a) => a.id);
+  if (commentIds.length > 0) {
+    const replyRows = await db
+      .select()
+      .from(annotationReplies)
+      .where(inArray(annotationReplies.annotationId, commentIds))
+      .orderBy(asc(annotationReplies.createdAt));
+    for (const r of replyRows) {
+      const list = repliesByAnnotation.get(r.annotationId) ?? [];
+      list.push(r);
+      repliesByAnnotation.set(r.annotationId, list);
+    }
+  }
+
   for (const a of dtos) {
     const page = doc.getPage(Math.min(a.pageIndex, doc.getPageCount() - 1));
     const pageSize = page.getSize();
@@ -294,43 +456,27 @@ export async function GET(req: Request) {
         break;
       }
       case "COMMENT": {
+        // sticky note จริงของ PDF (/Subtype /Text) — คลิกหมุดที่ reader แล้วเปิด popup
+        // อ่าน message + replies (F9); ไม่ต้องมี /AP เพราะ reader วาด icon เอง
         const d = a.data as CommentData;
         const pin = toPdf(pxPoint(d.position));
-        page.drawCircle({
-          x: pin.x,
-          y: pin.y,
-          size: 12,
-          color: rgb(254 / 255, 243 / 255, 199 / 255),
-          borderColor: rgb(252 / 255, 211 / 255, 77 / 255),
-          borderWidth: 1,
-        });
-        if (thaiFont) {
-          const font = thaiFont;
-          const fontSize = 9;
-          // FIX-5: ย่อความกว้างกล่องตามหน้าจริง — หน้าแคบกว่า 220pt
-          // เดิมทำให้ x ติดลบจนข้อความหลุดออกนอกขอบซ้ายเงียบ ๆ
-          const maxWidth = Math.min(220, size.width);
-          const lines = wrapTextByWidth(
-            `${a.userName}: ${d.message}`,
-            maxWidth,
-            (s) => font.widthOfTextAtSize(s, fontSize),
-          );
-          // FIX-5 (ต่อ): กันหลุดขอบบน — ข้อความวาด "ขึ้น" จากหมุด (แกน y ของ PDF ชี้ขึ้น)
-          // เมื่อหมุดใกล้ขอบบนหรือ wrap ยาวหลายบรรทัดจนบรรทัดบนสุดเลยขอบหน้า
-          // เลื่อนทั้งก้อนลงมาเท่าที่จำเป็น (ไม่ clamp รายบรรทัด ไม่งั้นบรรทัดซ้อนกัน)
-          const lineH = fontSize + 2;
-          const blockTop = pin.y + 4 + (lines.length - 1) * lineH;
-          const shift = Math.max(0, blockTop + fontSize - size.height);
-          lines.forEach((line, i) => {
-            page.drawText(line, {
-              x: Math.max(0, Math.min(pin.x + 10, size.width - maxWidth)),
-              y: pin.y + 4 + i * lineH - shift,
-              size: fontSize,
-              font,
-              color: rgb(0.2, 0.2, 0.2),
-            });
-          });
+        const parts = [d.message];
+        for (const r of repliesByAnnotation.get(a.id) ?? []) {
+          parts.push(`— ${r.userName}: ${r.message}`);
         }
+        const annot = doc.context.obj({
+          Type: "Annot",
+          Subtype: "Text",
+          // หมุด icon 20pt ห้อยลงจากจุด position (แกน y ของ PDF ชี้ขึ้น)
+          Rect: [pin.x, pin.y - 20, pin.x + 20, pin.y],
+          Contents: PDFHexString.fromText(parts.join("\n")),
+          T: PDFHexString.fromText(a.userName),
+          // สีเดียวกับหมุดบนจอ (เหลืองอ่อน) — reader เอาไปทา icon
+          C: [254 / 255, 243 / 255, 199 / 255],
+          M: PDFString.of(toPdfDate(a.updatedAt)),
+          F: 4, // Print — พิมพ์แล้ว icon ติดไปด้วย
+        });
+        page.node.addAnnot(doc.context.register(annot));
         break;
       }
       case "TEXTBOX": {
@@ -451,8 +597,33 @@ export async function GET(req: Request) {
         break;
       }
     }
+
+    // โน้ตคำอธิบาย (N1) → sticky note แนบมุมขวาบนของ bbox — COMMENT ไม่มี note
+    // (มี message อยู่ใน popup ของตัวเองแล้ว)
+    if (a.type !== "COMMENT") {
+      const note = annotationNote(a);
+      if (note) {
+        // annotationBBox คืน pt ของ "หน้าบนจอ" อยู่แล้ว — แปลงตรงเข้าพิกัด PDF
+        const bbox = annotationBBox(a, display);
+        attachNoteSticky(
+          doc,
+          page,
+          a,
+          note,
+          toPdf({ x: bbox.x + bbox.width, y: bbox.y }),
+        );
+      }
+    }
   }
 
+  // bookmarks → PDF outline (แผง Bookmarks ของ reader กดกระโดดไปหน้า + yOffset)
+  const bookmarkRows = await db
+    .select()
+    .from(bookmarks)
+    .where(eq(bookmarks.fileId, fileId))
+    .orderBy(asc(bookmarks.createdAt));
+  buildOutline(doc, bookmarkRows);
+
   const out = await doc.save();
   const filename = encodeRFC5987(`${file.title}-annotated.pdf`);
   return new Response(new Uint8Array(out), {