@suphark/ui 0.47.0 → 0.57.0

package/CHANGELOG.md

@@ -2,6 +2,113 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.57.0] — 2026-10-24
+
+ยกจาก pi-done (รอบสองของคำขอย้าย component ที่แอปทำเอง)
+
+### Added
+- `RowTable` / `RowTableHeader` / `RowTableRow` / `RowTableCell` / `RowTableActions` / `RowTableGroup` — ตาราง grid ที่หัว/แถว/แถวกลุ่มใช้คอลัมน์ชุดเดียว (`columns` + `mobileColumns` เป็น `grid-template-columns` ผ่านตัวแปร CSS) หัวซ่อนบนมือถือ ช่อง `hideOnMobile` ซ่อนบนมือถือ ปุ่มท้ายแถวโผล่ตอนชี้/โฟกัส (เห็นตลอดบนจอสัมผัส) — แทนที่ pi-done เขียนซ้ำ 4 ที่
+- `ListSection` / `ListSectionHeader` — กลุ่มรายการแบบไม่มีกล่อง (หัว + จำนวน + ปุ่มขวา + เส้นบาง + แถวคั่นเส้น) = `SectionPanel plain` + `TaskGroupHeader`
+- `SidebarNavItem` / `SidebarCountBadge` — แถวเมนูข้างแบบเรียบ (active = `bg-primary/10 text-primary`, ตัวเลขเป็นข้อความเทา ไม่ใช่ pill, 44px บนจอสัมผัส, `draggingOver`)
+- `ProgressBar tone="auto"` — เขียวเมื่อครบ (value ≥ max) นอกนั้นสีหลัก (ครอบคลุม `ProgressBar` ของ pi-done: ใช้ `<ProgressBar value={percent} tone="auto" className="w-10" />`)
+- showcase: หน้า `/components/row-table`, `/components/list-section`, `/components/sidebar-nav-item`
+
+## [0.56.0] — 2026-10-24
+
+### Added
+- `DatePicker` `minDate` / `maxDate` (`"YYYY-MM-DD"` | Date, รวมวันนั้น) ทั้งวันเดียวและ `mode="range"` (ขอโดย DueBell แทนการกันที่ `onChange`): ปฏิทินกดวันนอกช่วงไม่ได้ · เดือน/ปีเลื่อนไปนอกช่วงไม่ได้ (ลูกศรเดือน + ตารางเลือกเดือน) · ค่าที่พิมพ์แล้วอยู่นอกช่วง = ไม่ยืนยัน (Enter/Tab/ปุ่มผล) และกล่องผลแสดงเหตุผลสีแดงแทน · ค่าที่ส่งเข้ามาเองนอกช่วงไม่ถูกแก้ ช่องขึ้น `aria-invalid` · ข้อความ `UiText.datePicker.beforeMin` / `afterMax` (`{date}` ตาม `locale` ของช่อง) แอปทับได้
+
+## [0.55.0] — 2026-10-24
+
+ยกจาก pi-done (รอบแรกของคำขอย้าย component ที่แอปทำเอง)
+
+### Added
+- `ResponsivePopover` / `ResponsivePopoverTrigger` / `ResponsivePopoverContent` / `ResponsivePopoverItem` / `useIsResponsiveSheet()` — Popover บนจอ ≥ 768px · แผ่นล่าง (Drawer) บนมือถือ: สูงตามเนื้อหา, `footer` ค้างล่าง, ปัดลงปิด; `useIsResponsiveSheet()` ให้ picker ขยายพื้นที่แตะ (`ResponsivePopoverItem` = 44px ในแผ่น) · `sheetContentClassName` ทับสไตล์ตัวแผ่น 
+- `SwitchField` — สวิตช์ + ป้ายในตัว (คลิกป้ายสลับ, `hint` ได้, ป้ายสูง 44px บนจอสัมผัส) แทน `<label><Switch/>…</label>` ที่ต้อง biome-ignore เพราะ Switch เป็น span
+- `PullToRefresh` (`@suphark/ui/pwa`) prop `onRefresh` — รีเฟรชเองได้ (แอป local-first ที่ `router.refresh()` ไปไม่ถึง) · คืน promise = หมุนจนเสร็จ ขั้นต่ำ 500ms (ไม่ส่ง = `router.refresh()` แล้วหมุน 700ms เหมือนเดิม)
+
+### Fixed
+- `PullToRefresh`: วงโผล่ใต้ขอบบนของ root (เดิมติดขอบจอ จมใต้ header ที่ sticky) และ `z-50` · เริ่มดึงได้เฉพาะเมื่อแตะ "ในส่วน root" ที่เลื่อนอยู่บนสุด — sheet/dialog ที่ portal ออกไปนอก root จึงปัดลงของตัวเองได้ ไม่ถูกแย่งไปรีเฟรชหน้า (root เป็น `<html>`/`<body>` ทำงานเหมือนเดิม)
+- showcase: หน้า `/components/responsive-popover` ใหม่ · labeled-field มีตัวอย่าง `SwitchField`
+
+## [0.54.0] — 2026-10-24
+
+### Added
+- `AccessibleCalendar` — `Calendar` ที่ลูกศร/Home/End/PageUp/PageDown เลือกวันด้วยคีย์บอร์ดได้จริง (props เหมือน `Calendar` ทุกอย่าง) · ใช้แทน `Calendar` ดิบเมื่อวางปฏิทินเอง (ปุ่มวันของ shadcn ไม่ผูก `ref` ลูกศรจึงเลื่อนได้แค่สถานะภายใน) · `FocusableDayButton` ย้ายจาก `date-picker.tsx` มาอยู่ `shared/date/accessible-calendar.tsx`
+
+### Fixed
+- `DateRangePicker` (ตัวกรอง) และ `DateTimePicker`: ปฏิทินใช้ `AccessibleCalendar` — เลือกวันด้วยคีย์บอร์ดได้จริง (เดิมโฟกัสค้างที่เดิม)
+- `DateRangePicker`: ข้อความ placeholder/"ล้างช่วงวันที่" มาจาก `UiText.datePicker` (`rangePlaceholder`, ใหม่ `clearRange`) — แอปที่ไม่ส่ง `placeholder` และใช้ UiText ไทยจะเห็นข้อความไทยแทนอังกฤษ; ส่ง `placeholder` เองยังชนะเสมอ
+- showcase: `/components/calendar` ใช้ `AccessibleCalendar`
+
+## [0.53.0] — 2026-10-23
+
+### Changed
+- showcase: `/components/sortable-list` ปรับให้ตรง mockup — หัวตาราง "ตัวแปรสภาพแวดล้อม · N คีย์" + ปุ่ม ? ด้านบน, ตัวเลขจำนวนคีย์ในหัวกลุ่ม, เส้นนำแนวตั้งของคีย์ในกลุ่ม, สีตอนชี้แถว, เส้นแทรกสีหลักที่แถวที่กำลังลาก, แคปซูลเลือกหมู่อยู่ใต้ตาราง
+- `DatePicker` ปรับให้ตรง mockup "Type first" (0.49.0 วาดไม่ตรง): ไอคอนปฏิทินอยู่ซ้ายของช่อง · ป้าย `Enter` อยู่ในช่องขวา (เดิมอยู่ในกล่องผล) · กล่องผลที่อ่านออก (เขียว) แยกเป็นกล่องของตัวเองเหนือการ์ดปฏิทิน · หัวปฏิทินเป็นปุ่มเดียว "ตุลาคม 2569 ▾" กดแล้วเป็นตารางเลือกเดือน/ปี (แทนเมนูเดือน + เมนูปีสองอัน) · แผ่น "ทั้งหมด" มีหัว "พิมพ์ลัดทั้งหมด · กดเพื่อเติมในช่อง" · `UiText.datePicker.allShortcuts`/`tapToFill`
+
+## [0.52.0] — 2026-10-23
+
+### Changed
+- `variant="quiet"` ของ `RecordCard`/`NotificationCenter` ปรับให้ตรงแบบ mockup จริง (0.51.0 วาดไม่ตรง): ไอคอนอยู่ในกรอบ 36px พื้น muted สีตาม accent · `StatusBadge` ที่อยู่ในแถว quiet กลายเป็น "จุดสี + ข้อความสี" ไม่มีกรอบ/พื้นอัตโนมัติ (CSS `in-data-[variant=quiet]`, นอก quiet เหมือนเดิม) · ปุ่มรองเป็น outline (เดิม ghost) ปุ่มหลักใช้แถวเดียว
+
+### Added
+- `RecordCard`/`NotificationEntry` `highlight` (quiet: พื้น accent จาง ๆ เน้นแถวที่ต้องจัดการก่อน) และ `progress` (quiet: แถบความคืบหน้า 0–100 ใต้ยอด)
+- showcase: notification-center โหมด quiet ตามแบบ — ยอดไม่มีสตางค์, แถวแรกเน้น + ปุ่มหลักตัวเดียว, แถบ 35/60 รอบ, เมนู … ทุกแถว
+
+## [0.51.0] — 2026-10-23
+
+### Added
+- `useSortableRow().toggleSelected()` — เลือก/ไม่เลือกแถวจากช่องติ๊กในแถว (ช่องติ๊กโผล่เมื่อชี้ เหมือนที่จับ)
+- `SelectionBar variant="pill"` — แคปซูลสีหลักลอยกลางล่างจอ เด่นกว่า `floating` (ใช้กับแถบเลือกหมู่ของ Sortable)
+- `RecordCard variant="quiet"` (opt-in, ค่าเริ่มต้น `card` เหมือนเดิม) — แถวเรียบแบบสมุดบัญชี "Quiet ledger": ไม่มีกรอบ/พื้นสี สีของ `accent` เหลือแค่ไอคอน, ชื่อ + (สถานะ · meta) ซ้าย, ยอดเงินขวา, ปุ่มท้ายแถว — เห็นได้มากกว่าเท่าตัวในที่เท่ากัน · props เดิมทั้งหมดใช้ต่อได้ ไม่ใช่ major
+- `NotificationCenter variant="quiet"` + `NotificationEntry.section` — ชิปนับเป็นแท็บขีดเส้นใต้ (ตัวเลข danger เป็นสีแดง) รายการเป็นแถว quiet ในกรอบเดียว มีหัวกลุ่มคั่นตาม `section`
+- showcase: sortable-list มีช่องติ๊กโผล่เมื่อชี้ + แคปซูลเลือกหมู่ + กรอบบอกตำแหน่งเดิมตอนลาก; record-card / notification-center มีตัวอย่าง quiet (notification-center สลับ card/quiet ได้)
+
+## [0.50.0] — 2026-10-23
+
+### Added
+- `@suphark/ui/sortable`: `DragHandle reveal` (opt-in, ค่าเริ่มต้นเหมือนเดิม) — "สงบจนกว่าจะแตะ": ซ่อนที่จับ โผล่เมื่อชี้แถว / โฟกัสในแถว / แถวถูกเลือก (จอสัมผัสเห็นตลอด, Tab ถึงที่จับได้เสมอ) · แอปใส่ `group/row` ที่แถว
+- showcase: `/components/sortable-list` ใช้ `reveal` และย้ายข้อความสอนยาวไว้หลังปุ่ม ? (แผ่นลัดแป้นพิมพ์)
+
+## [0.49.0] — 2026-10-23
+
+### Changed
+
+- **`DatePicker` redesign "Type first"** (ทั้งวันเดียวและ `mode="range"`; API/props/ค่าที่ส่งในฟอร์ม `name`/`defaultValue`/`required` เหมือนเดิมทุกตัว — แอปที่ใช้อยู่ไม่ต้องแก้):
+  - **ช่องคือ input ที่พิมพ์ได้โดยตรง** (เดิมเป็นปุ่มที่ต้องเปิดป๊อปอัปก่อนถึงมีช่องพิมพ์ซ้อนอยู่ข้างใน) — คลิกช่อง = เลือกทั้งข้อความ พิมพ์ทับได้เลย · `<label>` ที่ครอบ/ชี้ (`LabeledField`) โฟกัสที่ช่องพิมพ์โดยตรง
+  - **เห็นผลที่อ่านออกใต้ช่องทันที**: "จ. 26 ต.ค. 2569 · ในอีก 3 วัน" / ช่วง "16–23 ต.ค. 2569 · 8 วัน" (กดผลนั้นหรือ Enter เพื่อยืนยัน) — แก้ปัญหา "10/02 อ่านได้สองแบบ"; อ่านไม่ออก = "อ่านไม่ออก — ลองพิมพ์ t+3" ไม่ทิ้งค่าที่พิมพ์ทิ้งเงียบ ๆ; พิมพ์วันเดียวในช่องช่วง = ช่วงหนึ่งวัน
+  - ปฏิทินเลื่อนตามข้อความที่พิมพ์และไฮไลต์วันที่อ่านได้ทันที · แถวพิมพ์ลัดบรรทัดเดียวใต้ปฏิทิน (กดเติมลงช่อง) + "ทั้งหมด ›" เปิดแผ่นตัวอย่างวิธีพิมพ์ในกล่องเดียวกัน — **เลิกปุ่ม (i) / ตารางวิธีพิมพ์ที่กินที่ / ปุ่ม "ตกลง"**
+  - ปุ่ม ✕ ล้างค่าและปุ่มเปิดปฏิทินเป็น `<button>` จริง (เดิม ✕ เป็น `<span role="button">`) · วันที่สัมพัทธ์ "(พรุ่งนี้)" ยังแสดงท้ายช่องตาม `showRelative`
+  - **ปฏิทินใช้ภาษา/ปีเดียวกับช่อง** (เดิมไม่ส่ง `locale` แล้วขึ้น "Oct 2026" อังกฤษ ทั้งที่ช่องแสดง พ.ศ.) · หัวคอลัมน์วันไทย 2 ตัว (อา จ อ พ พฤ ศ ส) แทนตัวเดียวที่ "อ"/"พ" กำกวม
+  - คลิกวันที่ที่เลือกอยู่แล้วในปฏิทิน = ยืนยันวันนั้น (เดิมล้างค่าแบบ toggle — ล้างใช้ปุ่ม ✕)
+  - `showSmartInput={false}` = ช่องอ่านอย่างเดียว กดแล้วเปิดปฏิทินอย่างเดียว (แบบเดิม ไม่มีแถบพิมพ์ลัด) · `showPresets` ยัง deprecated ไม่มีผล
+  - ป๊อปอัปไม่มี animation ตอนปิด (Base UI ถอดตัวดักโฟกัส `<span tabindex=0>` ที่วางต่อท้ายช่องก็ต่อเมื่อ animation จบ ระหว่างนั้น Tab ตกไปที่มัน)
+- `UiText.datePicker` เพิ่ม `cannotRead` (`{example}`), `shortcutsLabel`, `showAll`, `backToCalendar`, `openCalendar`, `dayCount` (`{count}`) — ไทย/อังกฤษในตัว
+
+### Fixed
+
+- **คีย์บอร์ด: ลูกศรเลือกวันในปฏิทินไม่ย้ายโฟกัสจริง** — `CalendarDayButton` ใน `components/ui/calendar.tsx` (ไฟล์ shadcn) มี effect สั่ง `ref.current?.focus()` แต่ **ไม่เคยผูก `ref` กับปุ่ม** ลูกศรจึงเลื่อนแค่สถานะภายในของ react-day-picker โฟกัสจริงค้างที่เดิม (กระทบ `Calendar` ทุกที่ รวม DatePicker แบบเดิม) · `DatePicker` แก้ที่ฝั่งตัวเองด้วย `components={{ DayButton }}` ที่ผูก ref ให้ · **`Calendar` ดิบที่แอปใช้เองยังมีบั๊กนี้** (ห้ามแก้ไฟล์ shadcn — จดใน todo)
+- ป๊อปอัป DatePicker สูง ~400px ไม่พอทั้งบนและล่างแล้ว Base UI ย้ายไปวางข้างช่อง (ทับเนื้อหา) → พลิกได้เฉพาะบน↔ล่าง
+- Tab ออกจากช่องที่เปิดป๊อปอัปอยู่ แล้วโฟกัสหลุดไป `body` แทนที่จะไปช่องถัดไป (ตัวดักโฟกัสของ Base UI)
+
+### Security
+
+- อัป `next` (devDependency ของแพ็กเกจ + showcase ui.suphark.com) เป็น `^16.4.2` — ปิดช่องโหว่ใน `next >=16.0.0 <=16.4.0`: **critical** RCE ไม่ต้องล็อกอินใน Image Optimization API เมื่อใช้ไฟล์ SVG (GHSA-2464-fhr4-w9xw) · **critical** RCE ไม่ต้องล็อกอินใน `use cache` ที่คืน typed array (GHSA-673q-mjm6-r5xr) · high DoS ใน App Router ที่ใช้ Server Actions · override `source-map-js >=1.2.2` (high DoS ที่ติดมากับ postcss) · `pnpm audit --prod --audit-level=high` สะอาด · **peerDependency `next >=15` ไม่เปลี่ยน** — แอปที่ใช้ Next 16 อัปเองเป็น `^16.4.2` (แพ็กเกจส่ง source ไม่ได้บังคับเวอร์ชัน next)
+
+### Added
+
+- `HeaderBreadcrumbs` (และ `AppShell` `header.breadcrumbs: { upButton }`): **`upButton`** + `upLabel` — ปุ่ม X ท้าย breadcrumb ถอยขึ้นหนึ่งระดับแบบ Vercel (ไปที่ segment ก่อนหน้า หรือ `homeHref` ถ้ามี segment เดียว · ไม่แสดงหน้าแรก) · ปิดไว้เป็นค่าเริ่มต้น แอปเดิมไม่เปลี่ยน (ขอจาก Pi Config ซึ่งทำเองใน `breadcrumbs.tsx` แล้ว) · showcase `/shell` เปิดใช้
+
+## [0.48.0] — 2026-10-10
+
+> ประกาศพร้อม publish แล้วแต่ยังไม่ขึ้น npm — รวมอยู่ใน 0.49.0
+
+### Added
+
+- showcase: หน้า `/components/web-push-row` (demo WebPushRow)
+- WebPushRow (@suphark/ui/pwa): แถวตั้งค่าเปิด/ปิดการแจ้งเตือน Web Push บนเบราว์เซอร์ พร้อมจัดการ Service Worker registration, PushManager subscription, permission check, และ Feedback toast อัตโนมัติ
+
 ## [0.47.0] — 2026-10-08
 
 ### Changed

package/README.md

@@ -236,6 +236,7 @@ const [order, setOrder] = useState(() =>
 - การ์ดลอยตามเมาส์: `renderOverlay={(drag) => drag.kind === "item" ? <ItemCard id={drag.id} /> : <GroupCard id={drag.id} />}` (วาดใน portal จึงเป็น `div` ได้ ไม่ต้องเป็น `<tr>`) — ไม่ใส่ = แถวขยับเองแบบเดิม · โฟลเดอร์ที่ย่ออยู่: `useSortableDropZone(id, { onDwell: collapsed ? open : undefined })` ลากค้าง 600ms แล้วเปิดให้ · วางบนหัวกลุ่ม = ขึ้นบนสุดของกลุ่ม, วางบนโซนของ `UNGROUPED` = ต่อท้าย
 - เลือกหลายรายการแล้วลากพร้อมกัน: `SortableProvider multiSelect` แล้วกระจาย `row.selectProps` ลงแถว (ทำสีด้วย `data-[selected]:bg-primary/10`) — ⌘/Ctrl+คลิก, Shift+คลิก, ที่จับกด `x` / ⌘/Ctrl+A, Esc ล้าง · แถบนับใช้ `SelectionBar` + `useSortableState().selected/clearSelection` · `renderOverlay` ได้ `drag.ids` ไว้ทำการ์ดซ้อน
 - จัดชั้นบนสุดอิสระ (กลุ่มกับรายการไม่มีกลุ่มสลับกันได้): `SortableProvider freeLayout` + เรนเดอร์ตาม `rootEntries(order)` (ครอบทั้งหมดด้วย `<SortableGroup itemIds={order.items[UNGROUPED]}>` แล้วแต่ละกลุ่มมี `SortableGroup` ของตัวเองข้างใน) + บันทึก `payload.root` และส่งกลับ `sortableOrderOf(..., { root })` ตอนโหลด · หัวกลุ่มครึ่งบน = ก่อนกลุ่ม, ครึ่งล่าง = เข้ากลุ่ม
+- `DatePicker`: ช่องพิมพ์ได้โดยตรง — "15/3", "15/3/69", "t+3", "t+1m", ช่วง "1/7-5/7" / "t-7..t" (`mode="range"`) เห็นผลที่อ่านออกใต้ช่อง กด Enter ยืนยัน · ↓ เปิดปฏิทิน/เข้าปฏิทิน (ลูกศร+Enter เลือกวัน) · Esc ยกเลิก · ในฟอร์ม `name`/`defaultValue`/`required` ส่ง YYYY-MM-DD · ห่อใน `LabeledField` ได้ (label โฟกัสที่ช่องพิมพ์)
 - ห่อ component ที่ props เป็น union (เช่น `DatePicker` ที่มี `mode="range"`): ใช้ `DistributiveOmit`/`DistributivePick` แทน `Omit`/`Pick` ไม่งั้น union ถูกยุบจนแยกตาม `mode` ไม่ได้
 - `sortableOrderToPayload(order)` คืน `{ groups, items }` — `groups` คือลำดับของกลุ่ม, `items` คือรายการในแต่ละกลุ่มเรียงตามนั้น (ของที่ยังไม่มีกลุ่มมาก่อนด้วย `groupId: null`)
 - `SortableProvider disabled` (เช่นระหว่างกรอง ซึ่งลำดับที่เห็นไม่ใช่ลำดับจริง) ทำให้ `DragHandle` จางลงและกดไม่ได้ — ไม่อยากให้เห็นเลยใส่ `hideWhenDisabled`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.47.0",
+  "version": "0.57.0",
   "private": false,
   "type": "module",
   "description": "Design system กลางของ Suphark apps: shadcn/ui (base-nova, Base UI, Tailwind v4) + shared components + token/ฟอนต์ Noto Sans Thai Looped — ส่งเป็น source ให้แอป Next transpile เอง",
@@ -120,7 +120,7 @@
     "@vitejs/plugin-react": "^6.1.0",
     "jsdom": "^29.1.1",
     "lucide-react": "^1.45.0",
-    "next": "^16.3.8",
+    "next": "^16.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-hook-form": "^7.86.0",

package/src/components/app-shell/header-breadcrumbs.tsx

@@ -8,6 +8,7 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from "@suphark/ui/components/ui/breadcrumb";
+import { XIcon } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { Fragment, type ReactNode } from "react";
@@ -28,6 +29,13 @@ export interface HeaderBreadcrumbsProps {
   skip?: string[];
   /** ซ่อน segment ที่ดูเหมือน id (ตัวเลข/uuid/cuid) */
   hideIds?: boolean;
+  /**
+   * ปุ่ม X ท้าย breadcrumb ถอยขึ้นหนึ่งระดับ (แบบ Vercel) — ไปที่ segment ก่อนหน้า หรือ `homeHref` ถ้ามี segment เดียว
+   * ไม่แสดงในหน้าแรก (ไม่มี segment) · ปิดไว้เป็นค่าเริ่มต้น จึงไม่เปลี่ยนแอปเดิม
+   */
+  upButton?: boolean;
+  /** ข้อความของปุ่ม X (aria-label + tooltip) — ค่าเริ่มต้น "Back" */
+  upLabel?: string;
 }
 
 // ตัวเลขล้วน / uuid / cuid / ตัวอักษร+ตัวเลขปน ≥16 ตัว (ต้องมีตัวเลขอย่างน้อย 1 — คำธรรมดายาว ๆ ไม่ใช่ id)
@@ -47,6 +55,8 @@ export function HeaderBreadcrumbs({
   homeLabel = "Home",
   skip = [],
   hideIds = false,
+  upButton = false,
+  upLabel = "Back",
 }: HeaderBreadcrumbsProps) {
   const pathname = usePathname();
   const all = pathname.split("/").filter(Boolean);
@@ -55,6 +65,8 @@ export function HeaderBreadcrumbs({
     .map((segment, index) => ({ segment, href: `/${all.slice(0, index + 1).join("/")}` }))
     .filter(({ segment }) => !skip.includes(segment) && !(hideIds && ID_LIKE.test(segment)));
 
+  const upHref = shown.length >= 2 ? (shown[shown.length - 2]?.href ?? homeHref) : homeHref;
+
   return (
     <Breadcrumb>
       <BreadcrumbList>
@@ -80,6 +92,18 @@ export function HeaderBreadcrumbs({
             </Fragment>
           );
         })}
+        {upButton && shown.length > 0 && (
+          <BreadcrumbItem>
+            <Link
+              href={upHref}
+              aria-label={upLabel}
+              title={upLabel}
+              className="inline-flex size-6 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+            >
+              <XIcon className="size-3.5" aria-hidden="true" />
+            </Link>
+          </BreadcrumbItem>
+        )}
       </BreadcrumbList>
     </Breadcrumb>
   );

package/src/components/pwa/pull-to-refresh.tsx

@@ -8,6 +8,8 @@ import { useEffect, useRef, useState } from "react";
 const ACTIVATION_DISTANCE = 72;
 const MAX_PULL_DISTANCE = 112;
 const MOBILE_BREAKPOINT = 768;
+/** หมุนอย่างน้อยเท่านี้ — refresh ที่เสร็จทันทีจะไม่กะพริบหายไปเลย */
+const MIN_SPIN_MS = 500;
 
 export interface PullToRefreshText {
   pull: string;
@@ -28,20 +30,29 @@ export const PULL_TO_REFRESH_TEXT_EN: PullToRefreshText = {
 };
 
 /**
- * ดึงลงเพื่อรีเฟรช (มือถือ, < 768px) — เรียก `router.refresh()` เมื่อดึงเกินระยะ
- * ใส่ `data-pull-to-refresh-root` บน element ที่เลื่อนได้ของหน้า (ดึงได้เมื่อเลื่อนอยู่บนสุดเท่านั้น)
+ * ดึงลงเพื่อรีเฟรช (มือถือ, < 768px) — เรียก `onRefresh` (ไม่ส่ง = `router.refresh()`) เมื่อดึงเกินระยะ
+ * ใส่ `data-pull-to-refresh-root` บน element ที่เลื่อนได้ของหน้า — ดึงได้เมื่อแตะ "ในนั้น" และเลื่อนอยู่บนสุดเท่านั้น
+ * (sheet/dialog ที่ portal ออกไปนอก root จึงปัดลงของตัวเองได้ ไม่ถูกแย่งไปรีเฟรชหน้า) · วงโผล่ใต้ขอบบนของ root
+ * (ไม่จมใต้ header ที่ sticky) และหมุนจนกว่า `onRefresh` จะเสร็จ (ขั้นต่ำ 500ms)
  *
  *   <main data-pull-to-refresh-root className="overflow-y-auto">…</main>
- *   <PullToRefresh />
+ *   <PullToRefresh />                                  // รีเฟรช server component
+ *   <PullToRefresh onRefresh={() => store.sync()} />   // แอป local-first / ดึงข้อมูลเอง
  */
 export function PullToRefresh({
   text = PULL_TO_REFRESH_TEXT_TH,
   rootSelector = "[data-pull-to-refresh-root]",
+  onRefresh,
 }: {
   text?: PullToRefreshText;
   rootSelector?: string;
+  /** รีเฟรชเอง (คืน promise = หมุนจนเสร็จ) — ไม่ส่ง = `router.refresh()` แล้วหมุน 700ms */
+  onRefresh?: () => Promise<unknown> | void;
 }) {
   const router = useRouter();
+  const onRefreshRef = useRef(onRefresh);
+  onRefreshRef.current = onRefresh;
+  const [rootTop, setRootTop] = useState(0);
   const startRef = useRef<{ x: number; y: number } | null>(null);
   const isPullingRef = useRef(false);
   const [pullDistance, setPullDistance] = useState(0);
@@ -81,6 +92,13 @@ export function PullToRefresh({
         resetPull();
         return;
       }
+      // root ปกติ = ต้องแตะ "ในนั้น" (portal ของ sheet/dialog อยู่นอก root จึงไม่เริ่มดึง) · root เป็น <html>/<body> ครอบทุกอย่างอยู่แล้ว
+      const whole = root === document.documentElement || root === document.body;
+      if (!whole && !(event.target instanceof Node && root.contains(event.target))) {
+        resetPull();
+        return;
+      }
+      setRootTop(whole ? 0 : Math.max(0, root.getBoundingClientRect().top));
       startRef.current = { x: touch.clientX, y: touch.clientY };
       isPullingRef.current = false;
     };
@@ -110,13 +128,27 @@ export function PullToRefresh({
       setPullDistance(Math.min(MAX_PULL_DISTANCE, deltaY * 0.62));
     };
 
-    const handleTouchEnd = () => {
+    const handleTouchEnd = async () => {
       const shouldRefresh = pullDistanceRef.current >= ACTIVATION_DISTANCE;
       resetPull();
       if (!shouldRefresh || isRefreshing()) return;
+      isRefreshingRef.current = true;
       setIsRefreshing(true);
-      router.refresh();
-      window.setTimeout(() => setIsRefreshing(false), 700);
+      const startedAt = Date.now();
+      const custom = onRefreshRef.current;
+      try {
+        if (custom) await custom();
+        else {
+          router.refresh();
+          await new Promise((resolve) => setTimeout(resolve, 700));
+        }
+      } catch {
+        // งาน refresh รายงานข้อผิดพลาดเอง — วงแค่หยุดหมุน
+      }
+      const wait = MIN_SPIN_MS - (Date.now() - startedAt);
+      if (wait > 0) await new Promise((resolve) => setTimeout(resolve, wait));
+      isRefreshingRef.current = false;
+      setIsRefreshing(false);
     };
 
     // touchmove ต้อง non-passive (preventDefault ระหว่างดึง) ซึ่งทำให้ browser ต้องรอ JS ก่อนเลื่อนหน้าทุกครั้ง
@@ -160,10 +192,14 @@ export function PullToRefresh({
     <div
       aria-live="polite"
       className={cn(
-        "pointer-events-none fixed top-3 left-1/2 flex -translate-x-1/2 items-center gap-2 rounded-full border bg-card/95 px-3.5 py-2 text-xs font-medium text-foreground shadow-lg backdrop-blur-md transition-all duration-150 md:hidden",
+        "pointer-events-none fixed left-1/2 z-50 flex -translate-x-1/2 items-center gap-2 rounded-full border bg-card/95 px-3.5 py-2 text-xs font-medium text-foreground shadow-lg backdrop-blur-md transition-all duration-150 md:hidden",
         isVisible ? "translate-y-0 opacity-100" : "-translate-y-8 opacity-0",
       )}
-      style={{ transform: `translate(-50%, ${isRefreshing ? 0 : progress * 18}px)` }}
+      style={{
+        // วงอยู่ใต้ขอบบนของ root (ไม่ใช่ขอบจอ) จึงไม่โดน header ที่ sticky บัง
+        top: rootTop + 12,
+        transform: `translate(-50%, ${isRefreshing ? 0 : progress * 18}px)`,
+      }}
     >
       {isRefreshing ? (
         <Loader2 className="size-3.5 animate-spin" aria-hidden="true" />

package/src/components/pwa/web-push-row.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { SwitchRow } from "@suphark/ui/components/shared/settings-row";
+import { type ReactNode, useEffect, useState, useTransition } from "react";
+import { toast } from "sonner";
+
+export interface WebPushRowProps {
+  /** ฟังก์ชันดึง VAPID Public Key จาก server action */
+  getPublicKey: () => Promise<string>;
+  /** Callback เมื่อผู้ใช้เปิดรับการแจ้งเตือน (ส่ง subscription ให้ server บันทึก) */
+  onSubscribe: (subscription: PushSubscriptionJSON) => Promise<unknown>;
+  /** Callback เมื่อผู้ใช้ปิดการแจ้งเตือน (ส่ง endpoint ให้ server ลบ) */
+  onUnsubscribe?: (endpoint: string) => Promise<unknown>;
+  /** Path ของ Service Worker (default: "/sw.js") */
+  swPath?: string;
+  /** หัวข้อแถว (default: "การแจ้งเตือนบนเบราว์เซอร์") */
+  title?: ReactNode;
+  /** คำอธิบาย (default: "รับแจ้งเตือนเตือนความจำและอัปเดตงานทันทีผ่าน Web Push") */
+  description?: ReactNode;
+  /** ข้อความเมื่อเปิดสำเร็จ (default: "เปิดรับการแจ้งเตือนบนเบราว์เซอร์แล้ว") */
+  successSubscribeMessage?: string;
+  /** ข้อความเมื่อปิดสำเร็จ (default: "ปิดการแจ้งเตือนแล้ว") */
+  successUnsubscribeMessage?: string;
+  /** ปิดการทำงาน (disabled) เพิ่มเติม */
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * แถวตั้งค่าเปิด/ปิดการแจ้งเตือน Web Push บนเบราว์เซอร์
+ * จัดการ Service Worker registration, PushManager subscription, และ Feedback toast อัตโนมัติ
+ *
+ *   <WebPushRow
+ *     getPublicKey={getVapidKey}
+ *     onSubscribe={registerPush}
+ *     onUnsubscribe={unregisterPush}
+ *   />
+ */
+export function WebPushRow({
+  getPublicKey,
+  onSubscribe,
+  onUnsubscribe,
+  swPath = "/sw.js",
+  title = "การแจ้งเตือนบนเบราว์เซอร์",
+  description = "รับแจ้งเตือนเตือนความจำและอัปเดตงานทันทีผ่าน Web Push",
+  successSubscribeMessage = "เปิดรับการแจ้งเตือนบนเบราว์เซอร์แล้ว",
+  successUnsubscribeMessage = "ปิดการแจ้งเตือนแล้ว",
+  disabled: customDisabled,
+  className,
+}: WebPushRowProps) {
+  const [enabled, setEnabled] = useState(false);
+  const [supported, setSupported] = useState(true);
+  const [pending, startTransition] = useTransition();
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (!("serviceWorker" in navigator) || !("PushManager" in window)) {
+      setSupported(false);
+      return;
+    }
+    navigator.serviceWorker.ready
+      .then((reg) => reg.pushManager.getSubscription())
+      .then((sub) => {
+        setEnabled(Boolean(sub));
+      })
+      .catch(() => {
+        setEnabled(false);
+      });
+  }, []);
+
+  const handleToggle = (checked: boolean) => {
+    if (!supported) {
+      toast.error("เบราว์เซอร์นี้ไม่รองรับ Web Push");
+      return;
+    }
+
+    startTransition(async () => {
+      try {
+        const reg = await navigator.serviceWorker.register(swPath);
+        await navigator.serviceWorker.ready;
+
+        if (checked) {
+          if (Notification.permission === "denied") {
+            toast.error("คุณบล็อกการแจ้งเตือนไว้ในเบราว์เซอร์ โปรดปลดบล็อกในการตั้งค่าไซต์");
+            return;
+          }
+
+          const key = await getPublicKey();
+          const sub = await reg.pushManager.subscribe({
+            userVisibleOnly: true,
+            applicationServerKey: key,
+          });
+
+          await onSubscribe(sub.toJSON());
+          setEnabled(true);
+          toast.success(successSubscribeMessage);
+        } else {
+          const sub = await reg.pushManager.getSubscription();
+          if (sub) {
+            const endpoint = sub.endpoint;
+            await sub.unsubscribe();
+            if (onUnsubscribe) {
+              await onUnsubscribe(endpoint);
+            }
+          }
+          setEnabled(false);
+          toast.success(successUnsubscribeMessage);
+        }
+      } catch (err) {
+        console.error("WebPushRow error:", err);
+        toast.error("ตั้งค่าไม่สำเร็จ (ตรวจดูการอนุญาตแจ้งเตือนในเบราว์เซอร์)");
+      }
+    });
+  };
+
+  return (
+    <SwitchRow
+      title={title}
+      description={supported ? description : "เบราว์เซอร์นี้ไม่รองรับการแจ้งเตือน Web Push"}
+      checked={enabled}
+      disabled={!supported || pending || customDisabled}
+      onCheckedChange={handleToggle}
+      className={className}
+    />
+  );
+}

package/src/components/shared/date/accessible-calendar.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { Calendar, CalendarDayButton } from "@suphark/ui/components/ui/calendar";
+import { type ComponentProps, useEffect, useMemo, useRef } from "react";
+
+/**
+ * ปุ่มวันของปฏิทินที่ย้ายโฟกัสจริงตามลูกศรคีย์บอร์ด — `CalendarDayButton` ของ shadcn (ไฟล์ห้ามแก้มือ) มี effect สั่ง
+ * `ref.current?.focus()` แต่ไม่เคยผูก `ref` กับปุ่ม ลูกศรจึงเลื่อนได้แค่สถานะภายในของ react-day-picker โฟกัสจริงอยู่ที่เดิม
+ * (ใช้เลือกวันด้วยคีย์บอร์ดไม่ได้) — ผูก ref ผ่าน `{...props}` ที่ CalendarDayButton ส่งต่อให้ปุ่ม
+ */
+export function FocusableDayButton(props: ComponentProps<typeof CalendarDayButton>) {
+  const ref = useRef<HTMLButtonElement>(null);
+  const focused = props.modifiers.focused;
+  useEffect(() => {
+    if (focused) ref.current?.focus();
+  }, [focused]);
+  // React 19: ref เป็น prop ธรรมดาที่ถูก spread ต่อไปถึง <Button> — แต่ type ของ react-day-picker ไม่ประกาศ ref
+  return <CalendarDayButton {...props} {...({ ref } as Record<string, unknown>)} />;
+}
+
+/**
+ * `Calendar` ที่ใช้ลูกศร/Home/End/PageUp/PageDown เลือกวันด้วยคีย์บอร์ดได้จริง — ใช้แทน `Calendar` ดิบเสมอเมื่อวางปฏิทินเอง
+ * (`Calendar` ของ shadcn ย้ายโฟกัสวันไม่ได้ ดูคำอธิบายที่ `FocusableDayButton`) · props เหมือน `Calendar` ทุกอย่าง
+ * ส่ง `components.DayButton` เองได้ (ทับตัวนี้)
+ */
+export function AccessibleCalendar({
+  components,
+  locale,
+  ...props
+}: ComponentProps<typeof Calendar>) {
+  // ผูก locale เข้ากับปุ่มวัน (Calendar ของ shadcn ส่ง locale ให้ปุ่มของมันเอง แต่ปุ่มที่เราแทนต้องส่งต่อเอง)
+  const DayButton = useMemo(
+    () =>
+      function DayButtonWithLocale(buttonProps: ComponentProps<typeof CalendarDayButton>) {
+        return <FocusableDayButton locale={locale} {...buttonProps} />;
+      },
+    [locale],
+  );
+  return <Calendar locale={locale} components={{ DayButton, ...components }} {...props} />;
+}