From b3b884c736b435bd9e4ca140861e73ed302a9af9 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 14 Sep 2026 13:07:08 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=88=E0=B8=AD=E0=B8=AA=E0=B8=B1=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=9C=E0=B8=B1=E0=B8=AA=20(iOS/Android):=20=E0=B9=84?=
 =?UTF-8?q?=E0=B8=AE=E0=B9=84=E0=B8=A5=E0=B8=95=E0=B9=8C=20commit=20?=
 =?UTF-8?q?=E0=B8=9C=E0=B9=88=E0=B8=B2=E0=B8=99=E0=B8=9B=E0=B8=B8=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20"=E0=B9=84=E0=B8=AE=E0=B9=84=E0=B8=A5=E0=B8=95?=
 =?UTF-8?q?=E0=B9=8C"=20=E0=B8=A5=E0=B8=AD=E0=B8=A2=E0=B9=83=E0=B8=95?=
 =?UTF-8?q?=E0=B9=89=20selection=20+=20=E0=B8=A5=E0=B8=B2=E0=B8=81=20handl?=
 =?UTF-8?q?e=20=E0=B8=81=E0=B8=A3=E0=B8=AD=E0=B8=9A=20selection=20?=
 =?UTF-8?q?=E0=B9=84=E0=B8=94=E0=B9=89=E0=B8=88=E0=B8=A3=E0=B8=B4=E0=B8=87?=
 =?UTF-8?q?:=20(1)=20=E0=B8=9A=E0=B8=99=20touch=20=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=A5=E0=B8=B2=E0=B8=81=E0=B8=84=E0=B8=A5=E0=B8=B8?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=84=E0=B8=A7=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A1=E0=B9=84=E0=B8=A1=E0=B9=88=E0=B8=A2=E0=B8=B4=E0=B8=87?=
 =?UTF-8?q?=20synthetic=20mouseup=20(=E0=B8=A2=E0=B8=B4=E0=B8=87=E0=B9=80?=
 =?UTF-8?q?=E0=B8=89=E0=B8=9E=E0=B8=B2=E0=B8=B0=20tap)=20=E0=B8=97?=
 =?UTF-8?q?=E0=B8=B3=E0=B9=83=E0=B8=AB=E0=B9=89=20HIGHLIGHT=20=E0=B9=84?=
 =?UTF-8?q?=E0=B8=A1=E0=B9=88=E0=B8=96=E0=B8=B9=E0=B8=81=E0=B8=AA=E0=B8=A3?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B9=80=E0=B8=A5=E0=B8=A2=20?=
 =?UTF-8?q?=E2=80=94=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=B8=E0=B9=88=E0=B8=A1=20"=E0=B9=84=E0=B8=AE?=
 =?UTF-8?q?=E0=B9=84=E0=B8=A5=E0=B8=95=E0=B9=8C"=20=E0=B8=A5=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A2=E0=B9=83=E0=B8=95=E0=B9=89=E0=B8=9A=E0=B8=A3=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B1=E0=B8=94=E0=B8=AA=E0=B8=B8=E0=B8=94=E0=B8=97?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=A2=E0=B8=82=E0=B8=AD=E0=B8=87=20select?=
 =?UTF-8?q?ion=20(=E0=B9=81=E0=B8=9E=E0=B8=97=E0=B9=80=E0=B8=97=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=8C=E0=B8=99=20Acrobat=20mobile;=20=E0=B8=94?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=99=E0=B8=9A=E0=B8=99=E0=B8=96=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=81=E0=B9=80=E0=B8=A1=E0=B8=99=E0=B8=B9/handles=20?=
 =?UTF-8?q?=E0=B8=82=E0=B8=AD=E0=B8=87=20OS=20=E0=B8=A2=E0=B8=B6=E0=B8=94?=
 =?UTF-8?q?=20=E0=B9=83=E0=B8=81=E0=B8=A5=E0=B9=89=E0=B8=82=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=A5=E0=B9=88=E0=B8=B2=E0=B8=87=E0=B8=AB=E0=B8=99?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B9=80=E0=B8=81=E0=B8=B4=E0=B8=99=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B4=E0=B8=81=E0=B8=82=E0=B8=B6=E0=B9=89=E0=B8=99?=
 =?UTF-8?q?=E0=B9=80=E0=B8=AB=E0=B8=99=E0=B8=B7=E0=B8=AD=20rect=20?=
 =?UTF-8?q?=E0=B9=81=E0=B8=A3=E0=B8=81)=20=E0=B9=81=E0=B8=AA=E0=B8=94?=
 =?UTF-8?q?=E0=B8=87=E0=B9=80=E0=B8=89=E0=B8=9E=E0=B8=B2=E0=B8=B0=20pointe?=
 =?UTF-8?q?r:coarse=20+=20tool=20highlight=20=E0=B9=80=E0=B8=A1=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=20selection=20=E0=B8=AB=E0=B8=A2=E0=B8=B8?=
 =?UTF-8?q?=E0=B8=94=E0=B8=99=E0=B8=B4=E0=B9=88=E0=B8=87=20~400ms=20(debou?=
 =?UTF-8?q?nce=20=E0=B9=83=E0=B8=99=20effect=20selectionchange=20=E0=B8=82?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=A1=E0=B8=8A=E0=B9=88=E0=B8=A7=E0=B8=87?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B2=E0=B8=81=20handles)=20(2)=20=E0=B9=81?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B0=E0=B8=9B=E0=B8=B8=E0=B9=88=E0=B8=A1=20commit?=
 =?UTF-8?q?=20=E0=B8=88=E0=B8=B2=E0=B8=81=20snapshot=20=E0=B9=83=E0=B8=99?=
 =?UTF-8?q?=20touchSelRef=20=E0=B9=84=E0=B8=A1=E0=B9=88=E0=B9=83=E0=B8=8A?=
 =?UTF-8?q?=E0=B9=88=20selection=20=E0=B8=AA=E0=B8=94=20=E0=B9=80=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=B0=20iOS=20=E0=B9=80=E0=B8=84=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=A3=E0=B9=8C=20selection=20=E0=B8=97?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=99=E0=B8=97=E0=B8=B5=E0=B8=97=E0=B8=B5=E0=B9=88?=
 =?UTF-8?q?=E0=B9=81=E0=B8=95=E0=B8=B0=E0=B8=9B=E0=B8=B8=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=81=E0=B9=88=E0=B8=AD=E0=B8=99=20tap=20=E0=B8=88=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=96=E0=B8=B6=E0=B8=87=20=E2=80=94=20=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=8B=E0=B9=88=E0=B8=AD=E0=B8=99=E0=B8=9B=E0=B8=B8?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1+=E0=B8=A5=E0=B9=89=E0=B8=B2=E0=B8=87=20snaps?=
 =?UTF-8?q?hot=20=E0=B8=88=E0=B8=B6=E0=B8=87=E0=B8=AB=E0=B8=99=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=87=20250ms=20(scheduleTouchHide)=20=E0=B9=83?=
 =?UTF-8?q?=E0=B8=AB=E0=B9=89=20tap=20=E0=B8=99=E0=B8=B1=E0=B9=89=E0=B8=99?=
 =?UTF-8?q?=20commit=20=E0=B9=84=E0=B8=94=E0=B9=89=E0=B8=81=E0=B9=88?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=99=20=E0=B9=81=E0=B8=A5=E0=B8=B0=E0=B8=9C?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=81=20commit=20=E0=B8=97=E0=B8=B5=E0=B9=88=20poi?=
 =?UTF-8?q?nterdown=20(=E0=B9=80=E0=B8=A3=E0=B9=87=E0=B8=A7=E0=B8=81?=
 =?UTF-8?q?=E0=B8=A7=E0=B9=88=E0=B8=B2=20click);=20desktop=20=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=87=E0=B9=83=E0=B8=8A=E0=B9=89=20mouseup=20?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B2=E0=B8=A1=E0=B9=80=E0=B8=94=E0=B8=B4=E0=B8=A1?=
 =?UTF-8?q?=20=E2=80=94=20=E0=B8=AA=E0=B8=AD=E0=B8=87=20path=20=E0=B8=9C?=
 =?UTF-8?q?=E0=B9=88=E0=B8=B2=E0=B8=99=20commitHighlight=20=E0=B8=8A?=
 =?UTF-8?q?=E0=B8=B8=E0=B8=94=E0=B9=80=E0=B8=94=E0=B8=B5=E0=B8=A2=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B1=E0=B8=99=20+=20=E0=B8=95=E0=B8=B1=E0=B9=89?=
 =?UTF-8?q?=E0=B8=87=20lastSelectionTextRef=20(=E0=B8=8A=E0=B8=B7=E0=B9=88?=
 =?UTF-8?q?=E0=B8=AD=20bookmark=20default)=20=E0=B9=83=E0=B8=99=20debounce?=
 =?UTF-8?q?=20=E0=B9=80=E0=B8=AB=E0=B8=A1=E0=B8=B7=E0=B8=AD=E0=B8=99=20mou?=
 =?UTF-8?q?seup=20(3)=20=E0=B9=80=E0=B8=95=E0=B8=B4=E0=B8=A1=20touch-none?=
 =?UTF-8?q?=20=E0=B8=97=E0=B8=B5=E0=B9=88=20handle=20=E0=B8=97=E0=B8=B1?=
 =?UTF-8?q?=E0=B9=89=E0=B8=87=208=20=E0=B8=82=E0=B8=AD=E0=B8=87=20Annotati?=
 =?UTF-8?q?onSelectionLayer=20(=E0=B8=82=E0=B8=AD=E0=B8=9A=204=20+=20?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B8=E0=B8=A1=204=20=E2=80=94=20InkLayer=20?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B5=E0=B8=AD=E0=B8=A2=E0=B8=B9=E0=B9=88=E0=B9=81?=
 =?UTF-8?q?=E0=B8=A5=E0=B9=89=E0=B8=A7)=20=E0=B9=84=E0=B8=A1=E0=B9=88?=
 =?UTF-8?q?=E0=B8=87=E0=B8=B1=E0=B9=89=E0=B8=99=20browser=20=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=B6=E0=B8=94=20gesture=20=E0=B9=80=E0=B8=9B=E0=B9=87?=
 =?UTF-8?q?=E0=B8=99=20scroll=20=E0=B8=AA=E0=B9=88=E0=B8=87=20pointercance?=
 =?UTF-8?q?l=20=E0=B8=81=E0=B8=A5=E0=B8=B2=E0=B8=A2=E0=B9=80=E0=B8=9B?=
 =?UTF-8?q?=E0=B9=87=E0=B8=99=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B9=88=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=99=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B9=81=E0=B8=97?=
 =?UTF-8?q?=E0=B8=99=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A5=E0=B8=B2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=A2=E0=B9=89=E0=B8=B2=E0=B8=A2/=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=9A=E0=B8=82=E0=B8=99=E0=B8=B2=E0=B8=94=20(4)=20?=
 =?UTF-8?q?sync=20rules/pdf-viewer.md=20=E2=80=94=20verify=20=E0=B8=94?=
 =?UTF-8?q?=E0=B9=89=E0=B8=A7=E0=B8=A2=20Playwright=20touch=20emulation:?=
 =?UTF-8?q?=20=E0=B8=9B=E0=B8=B8=E0=B9=88=E0=B8=A1=E0=B9=82=E0=B8=9C?=
 =?UTF-8?q?=E0=B8=A5=E0=B9=88=E0=B8=AB=E0=B8=A5=E0=B8=B1=E0=B8=87=20deboun?=
 =?UTF-8?q?ce,=20=E0=B9=81=E0=B8=95=E0=B8=B0=E0=B9=81=E0=B8=A5=E0=B9=89?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=AA=E0=B8=A3=E0=B9=89=E0=B8=B2=E0=B8=87=20HIGHLI?=
 =?UTF-8?q?GHT=20=E0=B8=88=E0=B8=A3=E0=B8=B4=E0=B8=87=20(server=20action?=
 =?UTF-8?q?=20+=20DOM=20+=20sidebar),=20=E0=B8=A7=E0=B8=B2=E0=B8=94?=
 =?UTF-8?q?=E0=B9=80=E0=B8=AA=E0=B9=89=E0=B8=99=E0=B8=94=E0=B9=89=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=B4=E0=B9=89=E0=B8=A7=E0=B9=84=E0=B8=94?=
 =?UTF-8?q?=E0=B9=89,=20handles=209=20=E0=B8=88=E0=B8=B8=E0=B8=94=20touch-?=
 =?UTF-8?q?action:none=20=E0=B8=84=E0=B8=A3=E0=B8=9A,=20tsc=20=E0=B8=9C?=
 =?UTF-8?q?=E0=B9=88=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Code <noreply@anthropic.com>
---
 .claude/rules/pdf-viewer.md                 |   3 +-
 components/pdf/AnnotationSelectionLayer.tsx |  13 +-
 components/pdf/PDFViewer.tsx                | 158 ++++++++++++++++++--
 3 files changed, 158 insertions(+), 16 deletions(-)

diff --git a/.claude/rules/pdf-viewer.md b/.claude/rules/pdf-viewer.md
index 6cc7d4b..22a138c 100644
--- a/.claude/rules/pdf-viewer.md
+++ b/.claude/rules/pdf-viewer.md
@@ -23,8 +23,9 @@ paths:
 - DRAW วาดเส้นตรง: **ปล่อยเมาส์แล้ว snap อัตโนมัติ** เมื่อจุดทุกจุดห่างจากเส้นตรง จุดเริ่ม→จุดสุดท้าย ไม่เกิน max(5% ของความยาว, 3px) และเส้นยาว ≥ 24px (`isNearlyStraight`) — หรือกดค้าง **Shift** ระหว่างลาก (กด/ปล่อยกลางทางได้ — listener ระดับ window + reset ตอน blur) เพื่อบังคับตรงเสมอ → บันทึกเหลือจุดเริ่ม→จุดสุดท้าย 2 จุด (ความหนา uniform — ไม่เก็บ `widths` จาก pressure) — ใช้ได้เฉพาะโหมดวาดอิสระ ไม่ใช่ shape/eraser/redact; เส้นโค้ง/ขดจริงหลุดเกณฑ์จึงเหลือ freehand
 - 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` + ซ่อน native selection) — tool "เลือกข้อความ" คลุมแล้วเกิด popup ไม่ได้แล้ว (ถอดออก) และคีย์ลัด `H` สลับไป tool highlight
+- **จอสัมผัส (iOS/Android) ไม่มี `mouseup` หลังคลุมข้อความด้วยนิ้ว** (synthetic mouse events เกิดเฉพาะ tap — การ commit ตอนปล่อยเมาส์ใช้ไม่ได้): อุปกรณ์ที่ `matchMedia("(pointer: coarse)")` จริง + tool highlight → effect `selectionchange` debounce ~400ms หลัง selection หยุดนิ่ง แล้ว snapshot (rects + ข้อความผ่าน `readTextSelection(pi, { withText: true })`) เก็บใน `touchSelRef` + แสดงปุ่ม "ไฮไลต์" ลอย**ใต้**บรรทัดสุดท้ายของ selection (ด้านบนถูกเมนู/handles ของ OS ยึด — ใกล้ขอบล่างหน้าเกินพลิกขึ้นเหนือ rect แรก) — commit ต้องใช้ **snapshot ใน ref เท่านั้น ไม่ใช่ selection สด** เพราะ iOS เคลียร์ selection ทันทีที่แตะปุ่ม ก่อน click ยิง; ทั้ง desktop (mouseup) และ touch (ปุ่มยืนยัน) ผ่าน `commitHighlight` ชุดเดียวกัน; เคลียร์ปุ่ม+timer ทุกครั้งที่ selection หาย/ออกนอกหน้า/เปลี่ยน tool
 - **คลุมข้อความได้ 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 ย้าย/ขยาย** (ผูกกับตำแหน่งข้อความจริง เลือกเพื่อเปลี่ยนสี/รูปแบบ/ลบได้อย่างเดียว)
+- กรอบ 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` อยู่แล้ว)
 - 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 หุ้มข้อความตามพฤติกรรมเดิมทั้งหมด
 - คลิกเลือกบนหน้า: tool select/highlight คลิกบน annotation = `setSelectedId` ผ่าน `hitTestAnnotation` (DRAW/SHAPE ใช้ hit-test แม่นเดียวกับ eraser, HIGHLIGHT ดู rect, ที่เหลือ bbox+padding) — เช็คจากรายการหลังสุดก่อน (ตัวบนสุดชนะ), คลิกที่ว่าง = deselect; ใช้ `visibleAnnotations` (เคารพ filter รายคน F4)
diff --git a/components/pdf/AnnotationSelectionLayer.tsx b/components/pdf/AnnotationSelectionLayer.tsx
index f9af5ba..d5d606a 100644
--- a/components/pdf/AnnotationSelectionLayer.tsx
+++ b/components/pdf/AnnotationSelectionLayer.tsx
@@ -398,9 +398,10 @@ export default function AnnotationSelectionLayer({
           สี/รูปแบบ/ลบได้อย่างเดียว) จึงไม่มี handle ขอบกรอบและมุม */}
       {editable && !disabled && !isHighlightMark && (
         <>
-          {/* ขอบกรอบ 4 ด้าน — ลาก = translate ทั้งกลุ่ม */}
+          {/* ขอบกรอบ 4 ด้าน — ลาก = translate ทั้งกลุ่ม (touch-none: จอสัมผัสลาก
+              ได้จริง ไม่ถูก browser ยึดเป็น scroll แล้วส่ง pointercancel) */}
           <div
-            className="absolute cursor-move"
+            className="absolute cursor-move touch-none"
             style={{
               left: boxPx.x - STRIP_PX / 2,
               top: boxPx.y - STRIP_PX / 2,
@@ -414,7 +415,7 @@ export default function AnnotationSelectionLayer({
             onPointerCancel={cancelDrag}
           />
           <div
-            className="absolute cursor-move"
+            className="absolute cursor-move touch-none"
             style={{
               left: boxPx.x - STRIP_PX / 2,
               top: boxPx.y + boxPx.height - STRIP_PX / 2,
@@ -428,7 +429,7 @@ export default function AnnotationSelectionLayer({
             onPointerCancel={cancelDrag}
           />
           <div
-            className={`absolute ${isFixedTextbox ? "cursor-ew-resize" : "cursor-move"}`}
+            className={`absolute touch-none ${isFixedTextbox ? "cursor-ew-resize" : "cursor-move"}`}
             style={{
               left: boxPx.x - STRIP_PX / 2,
               top: boxPx.y,
@@ -444,7 +445,7 @@ export default function AnnotationSelectionLayer({
             onPointerCancel={cancelDrag}
           />
           <div
-            className={`absolute ${isFixedTextbox ? "cursor-ew-resize" : "cursor-move"}`}
+            className={`absolute touch-none ${isFixedTextbox ? "cursor-ew-resize" : "cursor-move"}`}
             style={{
               left: boxPx.x + boxPx.width - STRIP_PX / 2,
               top: boxPx.y,
@@ -465,7 +466,7 @@ export default function AnnotationSelectionLayer({
           {!isFixedTextbox && corners.map((c) => (
             <div
               key={c.key}
-              className="absolute rounded-sm border border-primary bg-primary/50"
+              className="absolute touch-none rounded-sm border border-primary bg-primary/50"
               style={{
                 left: c.x - HANDLE_PX / 2,
                 top: c.y - HANDLE_PX / 2,
diff --git a/components/pdf/PDFViewer.tsx b/components/pdf/PDFViewer.tsx
index b31b809..6d7beac 100644
--- a/components/pdf/PDFViewer.tsx
+++ b/components/pdf/PDFViewer.tsx
@@ -1776,6 +1776,23 @@ export default function PDFViewer({
     raw: string;
   } | null>(null);
 
+  /** จอสัมผัส: selection ล่าสุดที่หยุดนิ่งแล้ว (snapshot) + ตำแหน่งปุ่มยืนยัน —
+   *  บน touch ไม่มี mouseup หลังคลุมข้อความด้วยนิ้ว (synthetic mouse events เกิด
+   *  เฉพาะ tap) จึง commit ผ่านปุ่ม "ไฮไลต์" ลอยใต้ selection แทน — ปุ่มอ่านจาก
+   *  snapshot ใน ref เพราะ iOS เคลียร์ selection ทันทีที่แตะปุ่ม ก่อน click ยิง */
+  const [touchConfirm, setTouchConfirm] = useState<{
+    pageIndex: number;
+    x: number; // จุดยึดกึ่งกลางแนวนอนของแถบ (px อิงหน้า)
+    y: number; // ขอบบนของแถบ (px อิงหน้า)
+  } | null>(null);
+  const touchSelRef = useRef<{
+    pageIndex: number;
+    rects: HighlightData["rects"];
+    text: string;
+  } | null>(null);
+  const touchSelTimerRef = useRef<number | null>(null);
+  const touchHideTimerRef = useRef<number | null>(null);
+
   /** ความลึกของ bookmark (root = 1) บน state ปัจจุบัน — popup ใช้กรองเป้าหมายระดับ 1–2
    *  (cap 100 กันลูปไม่รู้จบหากข้อมูลวนซ้ำ) */
   function bookmarkDepthOf(b: BookmarkDTO): number {
@@ -1982,6 +1999,7 @@ export default function PDFViewer({
       // — text ใช้แค่ค้นหา/preview/ชื่อ bookmark
       text: opts?.withText ? selectionTextWithin(sweptRects, range) : "",
       first: sweptRects[0],
+      last: sweptRects[sweptRects.length - 1],
     };
   }
 
@@ -1993,13 +2011,44 @@ export default function PDFViewer({
     if (!TEXT_SELECTION_TOOLS.has(tool)) {
       setLiveMark(null);
       setSelectPreview(null);
+      setTouchConfirm(null);
+      touchSelRef.current = null;
       return;
     }
+    // จอสัมผัส: หลังคลุมข้อความด้วยนิ้วไม่มี mouseup ให้ commit (synthetic mouse
+    // events เกิดเฉพาะ tap) → tool highlight แสดงปุ่ม "ไฮไลต์" ลอยใต้ selection
+    // แทนการสร้างตอนปล่อยเมาส์ — เฉพาะอุปกรณ์ที่ pointer หลักเป็น coarse (เมาส์
+    // ยังใช้ mouseup ตามเดิม ไม่โผล่ปุ่มมารบกวน)
+    const coarse = window.matchMedia("(pointer: coarse)").matches;
+    // ซ่อนปุ่ม + ล้าง snapshot แบบหน่วงเวลา: บน iOS การแตะปุ่มเองทำให้ OS เคลียร์
+    // selection ก่อน tap จะถึงปุ่ม (selectionchange collapsed ยิงก่อน pointerdown
+    // ของปุ่ม) — หน่วงไว้ให้ tap นั้น commit จาก snapshot ได้ก่อน ปุ่มจึงไม่หายกลางคัน
+    const scheduleTouchHide = () => {
+      if (touchHideTimerRef.current !== null) {
+        window.clearTimeout(touchHideTimerRef.current);
+      }
+      touchHideTimerRef.current = window.setTimeout(() => {
+        touchHideTimerRef.current = null;
+        touchSelRef.current = null;
+        setTouchConfirm(null);
+      }, 250);
+    };
     const onSelectionChange = () => {
+      // selection กำลังเปลี่ยนอยู่ — ยกเลิก snapshot ที่ค้าง + การซ่อนปุ่มที่ค้าง
+      // (selection กลับมา = ผู้ใช้เริ่ม/ปรับ selection ใหม่ ปุ่มต้องอยู่ต่อ)
+      if (touchSelTimerRef.current !== null) {
+        window.clearTimeout(touchSelTimerRef.current);
+        touchSelTimerRef.current = null;
+      }
+      if (touchHideTimerRef.current !== null) {
+        window.clearTimeout(touchHideTimerRef.current);
+        touchHideTimerRef.current = null;
+      }
       const selection = window.getSelection();
       if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
         setLiveMark(null);
         setSelectPreview(null);
+        scheduleTouchHide();
         return;
       }
       const node = selection.getRangeAt(0).commonAncestorContainer;
@@ -2008,6 +2057,7 @@ export default function PDFViewer({
       if (!pageEl) {
         setLiveMark(null);
         setSelectPreview(null);
+        scheduleTouchHide();
         return;
       }
       const pi = Number(pageEl.dataset.page);
@@ -2030,6 +2080,34 @@ export default function PDFViewer({
           );
         return same ? prev : next;
       });
+      // จอสัมผัส + tool highlight — selection หยุดนิ่ง ~400ms แล้ว snapshot (rects +
+      // ข้อความ) ให้ปุ่มยืนยันใช้: debounce ข้ามช่วงที่ผู้ใช้ยังลาก handles อยู่
+      if (coarse && tool === "highlight") {
+        touchSelTimerRef.current = window.setTimeout(() => {
+          touchSelTimerRef.current = null;
+          const snap = readTextSelection(pi, { withText: true });
+          if (!snap) {
+            scheduleTouchHide();
+            return;
+          }
+          touchSelRef.current = {
+            pageIndex: pi,
+            rects: snap.rects,
+            text: snap.text,
+          };
+          // ชื่อ bookmark default จาก selection เหมือน mouseup ของ desktop
+          lastSelectionTextRef.current = normalizeBookmarkTitle(snap.text);
+          const pr = pageEl.getBoundingClientRect();
+          // แถบลอยใต้บรรทัดสุดท้ายของ selection — ด้านบนถูกเมนู/handles ของ OS
+          // ยึดไว้ ใกล้ขอบล่างหน้าเกิน → พลิกขึ้นเหนือ rect แรกแทน
+          const below = snap.last.bottom - pr.top + 8;
+          setTouchConfirm({
+            pageIndex: pi,
+            x: snap.first.left + snap.first.width / 2 - pr.left,
+            y: below + 40 <= pr.height ? below : snap.first.top - pr.top - 44,
+          });
+        }, 400);
+      }
     };
     document.addEventListener("selectionchange", onSelectionChange);
     // เคลียร์เส้นทางลากตอนปล่อยเมาส์ — listener นี้ที่ document ยิงหลัง React
@@ -2042,6 +2120,14 @@ export default function PDFViewer({
     return () => {
       document.removeEventListener("selectionchange", onSelectionChange);
       document.removeEventListener("mouseup", onMouseUpDoc);
+      if (touchSelTimerRef.current !== null) {
+        window.clearTimeout(touchSelTimerRef.current);
+        touchSelTimerRef.current = null;
+      }
+      if (touchHideTimerRef.current !== null) {
+        window.clearTimeout(touchHideTimerRef.current);
+        touchHideTimerRef.current = null;
+      }
     };
   }, [tool]);
 
@@ -2087,6 +2173,38 @@ export default function PDFViewer({
     return () => document.removeEventListener("copy", onCopy);
   }, [tool]);
 
+  /** สร้าง HIGHLIGHT จาก selection ที่อ่านได้ — ใช้ร่วมกันทั้ง desktop (mouseup บนหน้า)
+   *  และจอสัมผัส (ปุ่ม "ไฮไลต์" ลอยใต้ selection) */
+  function commitHighlight(
+    pageIndex: number,
+    sel: { rects: HighlightData["rects"]; text: string },
+  ) {
+    setLiveMark(null);
+    window.getSelection()?.removeAllRanges();
+    void handleCreateAnnotation(pageIndex, "HIGHLIGHT", {
+      text: sel.text,
+      color: highlightColor,
+      rects: sel.rects,
+      ...(highlightStyle !== "highlight" ? { style: highlightStyle } : {}),
+      ...(highlightOpacityPct < 100 ? { opacity: highlightOpacityPct / 100 } : {}),
+    });
+  }
+
+  /** จอสัมผัส: แตะปุ่ม "ไฮไลต์" ลอยใต้ selection — commit จาก snapshot ใน ref
+   *  (ไม่ใช่ selection สด เพราะ iOS เคลียร์ selection ก่อน tap จะถึงปุ่ม —
+   *  จึงผูกกับ onPointerDown ที่ยิงก่อน click ด้วย) */
+  function handleTouchConfirmHighlight() {
+    const snap = touchSelRef.current;
+    touchSelRef.current = null;
+    if (touchHideTimerRef.current !== null) {
+      window.clearTimeout(touchHideTimerRef.current);
+      touchHideTimerRef.current = null;
+    }
+    setTouchConfirm(null);
+    if (!snap) return;
+    commitHighlight(snap.pageIndex, snap);
+  }
+
   function handleMouseUpOnPage(pageIndex: number) {
     // N2: จำข้อความที่เพิ่งคลุมบนหน้า (ทุก tool) — ใช้เป็นชื่อ default ของ popup bookmark
     // (คลิกปุ่ม 🔖 ใน header ไม่ผ่าน mouseup ของหน้า ค่าจึงไม่โดนเคลียร์ก่อนเปิด popup)
@@ -2097,15 +2215,7 @@ export default function PDFViewer({
     // tool select คลุมข้อความเฉย ๆ — ไม่มี popup
     if (tool !== "highlight") return;
     if (!sel) return;
-    setLiveMark(null);
-    window.getSelection()?.removeAllRanges();
-    void handleCreateAnnotation(pageIndex, "HIGHLIGHT", {
-      text: sel.text,
-      color: highlightColor,
-      rects: sel.rects,
-      ...(highlightStyle !== "highlight" ? { style: highlightStyle } : {}),
-      ...(highlightOpacityPct < 100 ? { opacity: highlightOpacityPct / 100 } : {}),
-    });
+    commitHighlight(pageIndex, sel);
   }
 
   // ─── Comment (PLAN.md §6.3) ────────────────────────────────────────────────
@@ -3255,6 +3365,36 @@ export default function PDFViewer({
                       </div>
                     );
                   })()}
+
+                  {/* จอสัมผัส: ปุ่มยืนยันสร้าง highlight หลังคลุมข้อความเสร็จ (บน
+                      touch ไม่มี mouseup) — ลอยใต้ selection แตะแล้ว commit จาก
+                      snapshot; commit ที่ pointerdown (เร็วกว่า click) +
+                      stopPropagation กัน bubble ไป handler ของหน้า */}
+                  {touchConfirm?.pageIndex === i && (
+                    <div
+                      className="absolute z-[5] select-none"
+                      style={{
+                        left: touchConfirm.x,
+                        top: touchConfirm.y,
+                        transform: "translate(-50%, 0)",
+                      }}
+                      onPointerDown={(e) => {
+                        e.stopPropagation();
+                        handleTouchConfirmHighlight();
+                      }}
+                    >
+                      <button
+                        type="button"
+                        className="flex touch-manipulation items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm font-medium text-slate-700 shadow-lg"
+                      >
+                        <span
+                          className="h-3.5 w-3.5 rounded-[2px]"
+                          style={{ backgroundColor: highlightColor }}
+                        />
+                        ไฮไลต์
+                      </button>
+                    </div>
+                  )}
                 </div>
               );
             })