@suphark/ui 0.18.0 → 0.20.0

package/CHANGELOG.md

@@ -2,6 +2,53 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.20.0] — 2026-10-01
+
+ขั้น "layout" ของแผนรวม UI ทุกแอป (ดู `todo/todo.md`) — เพิ่มอย่างเดียว ไม่มี prop เดิมเปลี่ยนความหมาย
+
+### Added
+
+- **`MobileTabBar`** (`/next`) + **`AppShell mobileTabs`** — แถบเมนูล่างของมือถือ 3–5 แท็บ (ยกจาก DueBell `MobileNav`): ซ่อนตั้งแต่ `md`, แท็บสูง ≥ 56px, `badge` เป็น `CountBadge` บนไอคอน (รวมใน aria-label), `onClick` แทนการไปหน้า, ไฮไลต์ตาม path (`/` ตรงตัว, อื่น ๆ prefix หรือ `exact`); `icon` เป็น **element** (`<Home />`) จึงส่งจาก server layout ได้เหมือน `AppNav`; `AppShell` ทั้ง layout sidebar/top เว้นที่ใต้เนื้อหาให้เอง
+- utility **`pb-safe`** (safe-area ล่างของ iPhone) และ **`pb-tab-bar`** (เว้นที่ให้พ้นแถบล่าง) ใน `styles.css`
+- **`SettingsLayout`** — หน้าตั้งค่าหลายหัวข้อ (ยกจาก DueBell master-detail + PDF ค้นหาได้): จอกว้างสารบัญซ้าย sticky + เนื้อหา, มือถือรายการหัวข้อ → หน้าหัวข้อ + ปุ่ม "กลับ" (ย้ายโฟกัสไปหัวข้อให้ screen reader), `searchable` ค้น label/description/`keywords` (ไทย+อังกฤษ), `badge` ท้ายรายการ, คุมเองด้วย `value`/`onValueChange` หรือ `initialSection`
+- **`FilterBar`** — แถบค้นหา + select ตัวกรองเหนือรายการ client-side (Pi Auth เขียนซ้ำ 14 หน้า): ปุ่ม "ล้างตัวกรอง" โผล่เมื่อมีค่าค้าง (เทียบกับ `allValue` ของแต่ละตัว) และตั้งกลับให้เองถ้าไม่ส่ง `onClear`; ตัวกรองแบบอื่นใส่เป็น `children` + `active`
+- **`SetupChecklist`** — รายการ "ต้องตั้งอะไรให้ครบ" (ยกจาก Pi Auth `SetupSteps`): ✓ เมื่อทำแล้ว, ขั้นบังคับถัดไปถูกเน้น (`aria-current="step"`), ขั้น `optional` ไม่นับ, ครบแล้วซ่อนทั้งกล่อง (`hideWhenComplete`); `action` รับ `{ current, done }` ให้แอปส่ง `LinkButton` เอง (barrel ไม่พึ่ง next)
+- **`MonthStepper`** + **`useMonthCursor`** — เลือกเดือน ‹ เดือน › กดชื่อเดือนกลับเดือนนี้, `min`/`max`, `locale` (`th-TH` = พ.ศ., `th-TH-u-ca-gregory` = ค.ศ.), `format` long|short, `formatLabel` (ยกจาก DueBell `MonthSelector`)
+- **`lib/month.ts`** (barrel): `MonthKey` (`"YYYY-MM"` แบบเดียวกับ `CalendarMonthGrid`), `parseMonthKey`, `isMonthKey`, `toMonthKey`, `currentMonthKey`, `shiftMonth` (ข้ามปีให้), `compareMonth`, `formatMonthKey` — แทน `CycleMonth` ของ DueBell
+- `UiText` key ใหม่ (optional ทั้งหมด มีค่าไทย/อังกฤษใน `UI_TEXT_TH`/`UI_TEXT_EN`): `month`, `setup`, `filters`, `settings`, `mobileTabs`
+- **ชุด component สำเร็จรูป (Simple\*)** — ทิศทางของแพ็กเกจ: แอปเขียน component เดียว + props แทนการประกอบ primitive หลายชิ้นซ้อนกันแบบ shadcn (ดู `docs/agent-rules.md` "ใช้ตัวสำเร็จรูปก่อน"):
+  - `SimpleDialog` (แทน Dialog 7 ชิ้น) / `SimpleSheet` (+ `side`) — trigger, title, description, children, `footer` (ReactNode หรือ `(close) => …`), `size`, controlled ได้; **ปุ่ม X อ่าน `UiText.close`** แก้ปัญหา "Close" แปลภาษาไม่ได้โดยไม่แตะไฟล์ shadcn
+  - `SimpleTabs` (items: value/label/content/icon/badge/disabled, `variant` default|line, `fullWidth`) / `SimpleAccordion` (`multiple`, `initialOpen`)
+  - `SimpleTooltip` (ห่อ element เดียว, content ว่าง = ไม่มี tooltip) / `SimplePopover` (trigger + title/description + เนื้อหา)
+  - `ActionMenu` — เมนูคำสั่งจาก array: icon, shortcut, separator, label, href/external, destructive, **`confirm` เปิด `ConfirmDialog` ก่อนเรียก onClick**; trigger ไม่ส่ง = ปุ่ม …
+  - `SimplePagination` + `paginationRange` — page/pageCount/onPageChange, จำนวนปุ่มคงที่, มือถือเหลือ "x / y"
+  - `SimpleTable<T>` — columns (key/header/cell/align/className) + rows + getRowKey + empty + onRowClick; ค่าจาก key ตรง ๆ ถ้าไม่ส่ง cell
+  - `SegmentedControl<T>` — เลือกทีละหนึ่งและต้องมีค่าเสมอ (กดตัวเดิมไม่หลุด), `count`, `icon`, `size`, `fullWidth`
+  - `UiText` key ใหม่: `close`, `pagination`
+- **shadcn/ui base-nova ล่าสุดทั้งชุด** (`shadcn add --all --overwrite`, CLI 4.21.0): primitive ใหม่ `bubble`, `marker`, `message`, `message-scroller`, `questionnaire`, `direction` (export ใน barrel) และ `toast` (Base UI — **ไม่อยู่ใน barrel** เพราะชื่อ `toast`/`Toaster` ชนกับ sonner ที่แพ็กเกจใช้; import จาก `@suphark/ui/components/ui/toast`); dep ใหม่ `@shadcn/react`
+  - ไฟล์เดิมได้ class/ลำดับจาก upstream (ส่วนใหญ่เรียง class ใหม่) + sidebar deps ของ useEffect/useMemo ครบขึ้น
+  - **คงของที่แก้ไว้เอง** (ติดมาจาก supplychain ตั้งแต่ 0.1.0 — upstream ยังไม่มี): `scroll-area.tsx` (`data-[orientation=…]` ของ Base UI — ไม่งั้นแถบเลื่อนกว้าง 0 มองไม่เห็นทั้งแอป), `slider.tsx`, `tabs.tsx` (orientation แบบเดียวกัน), `table.tsx` (prop `containerClassName`)
+  - CLI รุ่นนี้เขียน `import { cn } from "cn"` — เปลี่ยนกลับเป็น `@suphark/ui/lib/utils` ทุกไฟล์ เพราะ `cn` ของแพ็กเกจรู้จักคลาสตามบทบาท (`text-body` ฯลฯ, 0.13.1) ส่วน `cn` ทั่วไปจะลบทิ้งเงียบ ๆ
+  - `hooks/use-mobile.ts` (CLI เขียนทับ) เติม `"use client"` คืน; biome ปิด `noDoubleEquals` เฉพาะ `components/ui/**` (`field.tsx` ของ upstream ใช้ `==`)
+- showcase: หน้า `/components/{month-stepper,filter-bar,setup-checklist,settings-layout,mobile-tab-bar,simple-dialog,simple-sheet,simple-tabs,simple-accordion,simple-tooltip,simple-popover,action-menu,simple-pagination,simple-table,segmented-control}` (118 หน้า) + `/shell` มี `mobileTabs` ให้ลองบนจอมือถือ; tests 20 กรณีเพิ่ม (รวม 183)
+
+## [0.19.0] — 2026-09-30
+
+ปิดรายการ "component เล็กที่ใช้ร่วม" ของแผนรวม UI ทุกแอป (ดู `todo/todo.md`) — เพิ่มอย่างเดียว ไม่มี prop เดิมเปลี่ยนความหมาย
+
+### Added
+
+- **`Stat` เพิ่ม `icon` / `badge` / `delta` / `tone`** + **`StatGrid`** (Pi Auth มี 17 การ์ดแบบนี้, DueBell มี DeltaBadge เอง): `delta` = `{ value, direction: "up"|"down"|"flat", tone?, hint? }` เลือกไอคอนเทรนด์และสีให้ (ขึ้น = success, ลง = destructive — ทับด้วย `tone` ได้เพราะบางตัวชี้วัด "ลง" คือดี), `icon` มีกรอบพื้นตามโทน, `tone` เปลี่ยนสีตัวเลข (`default|success|warning|destructive|info`); `StatGrid` คอลัมน์ 2|3|4 (มือถือ 1 → sm 2)
+- **`SettingsRow`** / **`SwitchRow`** / **`DangerZone`** (barrel) — แถวตั้งค่า: ชื่อ+คำอธิบายซ้าย control ขวา (จอแคบตกลงมา), `htmlFor` ผูกชื่อกับ control, `tone="destructive"`; `SwitchRow` = แถว + `Switch` ที่ผูก id ให้แล้ว (คลิกชื่อแล้วสลับ) รับ props ของ `Switch` ทั้งหมด; `DangerZone` = กรอบ `border-destructive/40` + พื้น subtle + เส้นคั่นแถว (Pi Auth/Pi PDF เขียน layout นี้ซ้ำ)
+- **`ConfirmDialog` / `useConfirm` `requireText`** — ต้องพิมพ์ข้อความให้ตรงก่อนปุ่มยืนยันจะกดได้ (ลบของที่กู้ไม่ได้ แบบ GitHub); `requireTextLabel` ทับข้อความเหนือช่อง, ค่าเริ่มต้นจาก `UiText.confirmTypeToConfirm`/`…Suffix` (key ใหม่); ปิดกล่องแล้วล้างสิ่งที่พิมพ์เสมอ (ยืนยันรายการถัดไปทันทีไม่ได้) — ใช้ผ่าน `confirm({ requireText: app.name, destructive: true })` ได้เลย
+- **`UserIdentity`** (barrel) — avatar (`Initials` สีพื้นคงที่ต่อชื่อ) + ชื่อ + อีเมล + `badge`/`hint`, `size` sm|default, `hideAvatar`; **ไม่มีชื่อ = ใช้อีเมลเป็นบรรทัดหลัก** (ผู้ใช้ที่ยังไม่ตั้งชื่อ) — Pi Auth เขียนซ้ำ ~15 จุด
+- **`CountBadge`** (barrel) — ป้ายจำนวนท้ายเมนู/แท็บ: เกิน `max` เป็น `99+`, `0` ซ่อนอัตโนมัติ (`showZero` บังคับแสดง), `tone` muted|primary|destructive
+- **`SaveStatus`** (barrel, ยกจาก Pi PDF) — สถานะบันทึกอัตโนมัติบรรทัดเดียว: `saving` (spinner) / `saved` (✓ เขียว) / `error` (`role="alert"`, ข้อความของแอปหรือ `UiText.actionFailed`) / `idle` + `savedAt` = เวลาสัมพัทธ์ผ่าน `ClientDateFormatter` (อัปเดตเองหลัง mount ไม่ทำ hydration mismatch); `language`/`text`
+- **`SliderField`** (barrel, ยกจาก Pi PDF) — ช่องเลื่อน + ป้ายชื่อ + ค่าปัจจุบันมุมขวา: `value`/`onValueChange` เป็น number เดี่ยว, `unit` หรือ `formatValue`, `description`, `size` sm|default, `disabled`
+- **`SkipLink`** (barrel) — ลิงก์ "ข้ามไปเนื้อหา" สำหรับหน้าที่ไม่ได้ใช้ `AppShell` (Pi PDF มีของตัวเอง); `AppShell` เปลี่ยนมาใช้ตัวเดียวกันนี้ภายใน
+- **`FormDialog` `revealSuccess`** — แบบ **ไม่ต้องส่งฟังก์ชัน** จึงใช้จาก **server component** ได้ (รายงานจาก Pi Auth: `renderSuccess` เป็นฟังก์ชัน ข้าม server/client boundary ไม่ได้ → `Functions cannot be passed directly to Client Components`): server action คืน `{ ok: true, data: { values: { "Signing secret": "whsec_…" } } }` แล้ว dialog แสดง `SecretReveal` ให้เอง + ปุ่ม "เสร็จแล้ว" (ไม่ปิดเอง); `successTitle` (ค่าเริ่มต้น `UiText.showOnce`), `successDescription` แทน description ของฟอร์ม — เคส "สร้างแล้วโชว์ secret ครั้งเดียว" (webhook secret / SCIM token / service account key / client secret) ซ้ำกันทุกแอป; `renderSuccess` เดิมยังใช้ได้จาก client component
+- showcase: หน้า `/components/settings-row`, `/components/user-identity` + หน้า `stat` ใหม่ (ไอคอน/delta/StatGrid) — 104 หน้า; tests 9 กรณีเพิ่ม (รวม 163)
+
 ## [0.18.0] — 2026-09-30
 
 > 0.17.0 ถูก publish ตอนที่ `LanguageSwitch` ยังไม่เข้า (commit ถัดไป) — ของชิ้นนี้จึงออกเป็น 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.18.0",
+  "version": "0.20.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 เอง",
@@ -54,11 +54,21 @@
     "./hooks/*": "./src/hooks/*.ts",
     "./package.json": "./package.json"
   },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "audit": "node scripts/audit.mjs src --important",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint:base-ui": "node scripts/audit-base-ui-props.mjs",
+    "check:typography": "node scripts/audit-tailwind-typography.mjs",
+    "verify": "pnpm typecheck && pnpm lint:base-ui && pnpm check:typography && pnpm test"
+  },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@fontsource/noto-sans-thai-looped": "^5.3.0",
+    "@shadcn/react": "^0.3.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -67,7 +77,7 @@
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.5.0",
     "next-themes": "^0.4.6",
-    "react-day-picker": "^10.0.1",
+    "react-day-picker": "^10.0.2",
     "react-number-format": "^5.4.5",
     "react-resizable-panels": "^4.12.3",
     "sonner": "^2.0.8",
@@ -112,18 +122,9 @@
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-hook-form": "^7.86.0",
-    "recharts": "^3.10.1",
+    "recharts": "^3.8.0",
     "tailwindcss": "^4.3.3",
     "typescript": "^6.0.3",
     "vitest": "^4.1.11"
-  },
-  "scripts": {
-    "typecheck": "tsc --noEmit",
-    "audit": "node scripts/audit.mjs src --important",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "lint:base-ui": "node scripts/audit-base-ui-props.mjs",
-    "check:typography": "node scripts/audit-tailwind-typography.mjs",
-    "verify": "pnpm typecheck && pnpm lint:base-ui && pnpm check:typography && pnpm test"
   }
-}
+}

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { SkipLink } from "@suphark/ui/components/shared/skip-link";
 import {
   InputGroup,
   InputGroupAddon,
@@ -34,6 +35,7 @@ import { AppBrand, type AppBrandProps } from "./app-brand";
 import { AppNav, type AppNavPinProps } from "./app-nav";
 import { HeaderBreadcrumbs, type HeaderBreadcrumbsProps } from "./header-breadcrumbs";
 import { HeaderCrumbs } from "./header-crumb";
+import { MobileTabBar, type MobileTabItem } from "./mobile-tab-bar";
 import { SubNav } from "./sub-nav";
 import { isTabActive, TopTabs, topLevelTabs } from "./top-tabs";
 import { type AppNavGroup, searchNav } from "./types";
@@ -101,6 +103,11 @@ export interface AppShellProps {
   contentClassName?: string;
   /** จำกัดความกว้างเนื้อหา เช่น `max-w-5xl` (Pi Auth) — ไม่ส่ง = เต็มจอ (supplychain) */
   contentMaxWidth?: string;
+  /**
+   * แถบเมนูล่างบนมือถือ (< md) 3–5 แท็บ — เว้นที่ใต้เนื้อหาให้เอง; เดสก์ท็อปยังใช้ sidebar/แท็บบนตามเดิม
+   * (ยกจาก DueBell MobileNav)
+   */
+  mobileTabs?: ReadonlyArray<MobileTabItem>;
   children: ReactNode;
 }
 
@@ -123,16 +130,9 @@ export function AppShell(props: AppShellProps) {
 /** id ของ <main> ของ AppShell (sidebar: SidebarInset, top: main ในเนื้อหา) — ใช้อ้างจาก skip link / anchor */
 export const APP_MAIN_ID = "app-main";
 
-/** ลิงก์ "ข้ามไปเนื้อหา" สำหรับคีย์บอร์ด/screen reader — มองไม่เห็นจนกด Tab ตัวแรก */
+/** ลิงก์ "ข้ามไปเนื้อหา" ของ AppShell — ใช้ `SkipLink` ตัวเดียวกับที่ export ให้แอปใช้นอก AppShell */
 function SkipToMain() {
-  return (
-    <a
-      href={`#${APP_MAIN_ID}`}
-      className="sr-only z-[60] rounded-md bg-background px-3 py-2 text-sm font-medium ring-2 ring-ring focus:not-sr-only focus:fixed focus:top-2 focus:left-2"
-    >
-      ข้ามไปเนื้อหา
-    </a>
-  );
+  return <SkipLink href={`#${APP_MAIN_ID}`} />;
 }
 
 function SidebarShell({
@@ -153,6 +153,7 @@ function SidebarShell({
   defaultOpen = true,
   contentClassName,
   contentMaxWidth,
+  mobileTabs,
   children,
 }: AppShellProps) {
   const style = brandColor
@@ -230,12 +231,14 @@ function SidebarShell({
         <div
           className={cn(
             "flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6 print:overflow-visible",
+            mobileTabs?.length && "pb-tab-bar md:pb-6",
             contentMaxWidth && cn("mx-auto w-full", contentMaxWidth),
             contentClassName,
           )}
         >
           {children}
         </div>
+        {mobileTabs?.length ? <MobileTabBar items={mobileTabs} /> : null}
       </SidebarInset>
     </SidebarProvider>
   );
@@ -254,6 +257,7 @@ function TopShell({
   brandForeground,
   contentClassName,
   contentMaxWidth,
+  mobileTabs,
   children,
 }: AppShellProps) {
   const pathname = usePathname();
@@ -318,6 +322,7 @@ function TopShell({
       <div
         className={cn(
           "flex w-full flex-1 flex-col gap-4 p-4 md:flex-row md:gap-8 md:p-6",
+          mobileTabs?.length && "pb-tab-bar md:pb-6",
           contentMaxWidth && cn("mx-auto", contentMaxWidth),
         )}
       >
@@ -341,6 +346,7 @@ function TopShell({
           {children}
         </main>
       </div>
+      {mobileTabs?.length ? <MobileTabBar items={mobileTabs} /> : null}
     </div>
   );
 }

package/src/components/app-shell/index.ts

@@ -10,6 +10,7 @@ export {
 } from "./command-palette";
 export { HeaderBreadcrumbs, type HeaderBreadcrumbsProps } from "./header-breadcrumbs";
 export { HeaderCrumb, HeaderCrumbs } from "./header-crumb";
+export { MobileTabBar, type MobileTabItem } from "./mobile-tab-bar";
 export { NavLink } from "./nav-link";
 export {
   type OrganizationOption,

package/src/components/app-shell/mobile-tab-bar.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { CountBadge } from "@suphark/ui/components/shared/count-badge";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import { cn } from "@suphark/ui/lib/utils";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import type { ReactNode } from "react";
+import { isNavActive } from "./types";
+
+export interface MobileTabItem {
+  href: string;
+  label: string;
+  /** element เช่น `<Home />` (ไม่ใช่ component) — ส่งจาก server layout ได้เหมือน AppNav */
+  icon: ReactNode;
+  /** ตัวเลขบนไอคอน (เช่นแจ้งเตือนค้าง) — 0/undefined ไม่แสดง */
+  badge?: number;
+  /** ไฮไลต์เฉพาะ path ตรงตัว (ค่าเริ่มต้น: href "/" ตรงตัว, อื่น ๆ prefix) */
+  exact?: boolean;
+  /** กดแล้วทำ action แทนการไปหน้า (เช่นเปิด sheet แจ้งเตือน) */
+  onClick?: () => void;
+}
+
+/**
+ * แถบเมนูล่างสำหรับมือถือ (ยกจาก DueBell `MobileNav`) — ซ่อนตั้งแต่ md, เผื่อ safe-area ของ iPhone,
+ * แท็บละ ≥ 44px ตามเกณฑ์จอสัมผัส; ใช้ผ่าน `AppShell mobileTabs` (เว้นที่ใต้เนื้อหาให้เอง)
+ * หรือวางเองแล้วใส่ `pb-[calc(4rem+env(safe-area-inset-bottom))] md:pb-0` ให้เนื้อหา
+ * ควรมี 3–5 แท็บ — เกินนั้นให้ใช้เมนู sidebar
+ */
+export function MobileTabBar({
+  items,
+  className,
+  "aria-label": ariaLabel,
+}: {
+  items: ReadonlyArray<MobileTabItem>;
+  className?: string;
+  "aria-label"?: string;
+}) {
+  const pathname = usePathname();
+  const text = useUiText();
+  return (
+    <nav
+      data-slot="mobile-tab-bar"
+      aria-label={ariaLabel ?? text.mobileTabs ?? "เมนูหลัก"}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-40 border-t bg-background/95 pb-safe backdrop-blur md:hidden print:hidden",
+        className,
+      )}
+    >
+      <ul className="mx-auto flex max-w-lg items-stretch justify-around px-1">
+        {items.map((item) => {
+          const active = isNavActive(pathname, item.href, item.exact ?? item.href === "/");
+          const content: ReactNode = (
+            <>
+              <span className="relative">
+                <span
+                  aria-hidden
+                  className={cn("flex [&_svg]:size-5", active && "[&_svg]:stroke-[2.5]")}
+                >
+                  {item.icon}
+                </span>
+                {item.badge ? (
+                  <CountBadge
+                    value={item.badge}
+                    tone="destructive"
+                    className="absolute -top-1.5 -right-3 min-w-4 px-1"
+                  />
+                ) : null}
+              </span>
+              <span className="text-label leading-tight">{item.label}</span>
+            </>
+          );
+          const itemClass = cn(
+            "flex min-h-14 w-full min-w-14 flex-col items-center justify-center gap-0.5 rounded-lg px-2 py-1.5 no-underline outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
+            active ? "font-semibold text-primary" : "text-muted-foreground hover:text-foreground",
+          );
+          return (
+            <li key={item.href} className="flex flex-1">
+              {item.onClick ? (
+                <button
+                  type="button"
+                  onClick={item.onClick}
+                  className={itemClass}
+                  aria-label={item.badge ? `${item.label} (${item.badge})` : undefined}
+                >
+                  {content}
+                </button>
+              ) : (
+                <Link
+                  href={item.href}
+                  className={itemClass}
+                  aria-current={active ? "page" : undefined}
+                  aria-label={item.badge ? `${item.label} (${item.badge})` : undefined}
+                >
+                  {content}
+                </Link>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}

package/src/components/shared/action-menu.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@suphark/ui/components/ui/dropdown-menu";
+import { MoreHorizontal } from "lucide-react";
+import { type ReactElement, type ReactNode, useState } from "react";
+import { ConfirmDialog, type ConfirmSpec, normalizeConfirm } from "./confirm-dialog";
+import { useUiText } from "./ui-text";
+
+export interface ActionMenuCommand {
+  type?: "item";
+  label: ReactNode;
+  icon?: ReactNode;
+  onClick?: () => unknown;
+  /** ลิงก์ธรรมดา (`<a>`) — ลิงก์ภายในของ Next ที่ต้อง prefetch ใช้ onClick + router.push */
+  href?: string;
+  /** เปิดแท็บใหม่ (ใช้กับ href) */
+  external?: boolean;
+  shortcut?: string;
+  destructive?: boolean;
+  disabled?: boolean;
+  /** ถามยืนยันก่อน onClick (string = คำถาม หรือ object กำหนดหัว/ปุ่มเอง) */
+  confirm?: ConfirmSpec;
+}
+
+export type ActionMenuItem =
+  | ActionMenuCommand
+  | { type: "separator" }
+  | { type: "label"; label: ReactNode };
+
+/**
+ * เมนูคำสั่งสำเร็จรูปจาก array (แทน DropdownMenu/Trigger/Content/Item/Separator/Label/Shortcut)
+ * trigger ไม่ส่ง = ปุ่มไอคอน "…" (aria-label จาก `label` หรือ UiText.actions)
+ * แถวในตาราง/รายการที่เรียก server action + refresh ใช้ `RowActions` (`@suphark/ui/next`)
+ *
+ *   <ActionMenu items={[
+ *     { label: "แก้ไข", icon: <Pencil />, onClick: edit },
+ *     { type: "separator" },
+ *     { label: "ลบ", icon: <Trash2 />, destructive: true, confirm: "ลบรายการนี้?", onClick: remove },
+ *   ]} />
+ */
+export function ActionMenu({
+  items,
+  trigger,
+  label,
+  align = "end",
+}: {
+  items: ReadonlyArray<ActionMenuItem>;
+  trigger?: ReactElement;
+  /** aria-label ของปุ่ม … (ค่าเริ่มต้น UiText.actions) */
+  label?: string;
+  align?: "start" | "center" | "end";
+}) {
+  const text = useUiText();
+  const [confirming, setConfirming] = useState<ActionMenuCommand | null>(null);
+  const [pending, setPending] = useState(false);
+
+  const run = async (fn?: () => unknown) => {
+    if (!fn) return;
+    setPending(true);
+    try {
+      await fn();
+    } finally {
+      setPending(false);
+    }
+  };
+
+  const spec = confirming?.confirm ? normalizeConfirm(confirming.confirm) : null;
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={
+            trigger ?? (
+              <Button variant="ghost" size="icon-sm" aria-label={label ?? text.actions}>
+                <MoreHorizontal />
+              </Button>
+            )
+          }
+        />
+        <DropdownMenuContent align={align} className="min-w-40">
+          <DropdownMenuGroup>
+            {items.map((item, i) => {
+              if (item.type === "separator") {
+                // biome-ignore lint/suspicious/noArrayIndexKey: ตัวคั่นไม่มี id — ลำดับคงที่ตาม items
+                return <DropdownMenuSeparator key={`sep-${i}`} />;
+              }
+              if (item.type === "label") {
+                // biome-ignore lint/suspicious/noArrayIndexKey: หัวกลุ่มไม่มี id — ลำดับคงที่ตาม items
+                return <DropdownMenuLabel key={`label-${i}`}>{item.label}</DropdownMenuLabel>;
+              }
+              const content = (
+                <>
+                  {item.icon}
+                  {item.label}
+                  {item.shortcut && <DropdownMenuShortcut>{item.shortcut}</DropdownMenuShortcut>}
+                </>
+              );
+              return (
+                <DropdownMenuItem
+                  // biome-ignore lint/suspicious/noArrayIndexKey: label เป็น ReactNode ใช้เป็น key ไม่ได้
+                  key={`item-${i}`}
+                  variant={item.destructive ? "destructive" : "default"}
+                  disabled={item.disabled}
+                  render={
+                    item.href ? (
+                      <a
+                        href={item.href}
+                        target={item.external ? "_blank" : undefined}
+                        rel={item.external ? "noreferrer" : undefined}
+                      />
+                    ) : undefined
+                  }
+                  onClick={() => {
+                    if (item.href) return;
+                    if (item.confirm) setConfirming(item);
+                    else void run(item.onClick);
+                  }}
+                >
+                  {content}
+                </DropdownMenuItem>
+              );
+            })}
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {spec && confirming && (
+        <ConfirmDialog
+          open
+          onOpenChange={(o) => !o && setConfirming(null)}
+          title={spec.title}
+          description={spec.description}
+          confirmLabel={spec.confirmLabel}
+          cancelLabel={spec.cancelLabel}
+          destructive={spec.destructive ?? confirming.destructive}
+          pending={pending}
+          onConfirm={async () => {
+            await run(confirming.onClick);
+            setConfirming(null);
+          }}
+        />
+      )}
+    </>
+  );
+}

package/src/components/shared/confirm-dialog.tsx

@@ -10,8 +10,10 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@suphark/ui/components/ui/alert-dialog";
+import { Input } from "@suphark/ui/components/ui/input";
+import { Label } from "@suphark/ui/components/ui/label";
 import { Loader2 } from "lucide-react";
-import type { ReactNode } from "react";
+import { type ReactNode, useEffect, useId, useState } from "react";
 import { useUiText } from "./ui-text";
 
 /** สเปกการยืนยัน — string = description อย่างเดียว (title/ปุ่มใช้ค่าเริ่มต้นจาก UiText) */
@@ -24,6 +26,10 @@ export type ConfirmSpec =
       cancelLabel?: string;
       /** ปุ่มยืนยันสีแดง (RowActions ใช้ `destructive` ของรายการเป็นค่าเริ่มต้นอยู่แล้ว) */
       destructive?: boolean;
+      /** ต้องพิมพ์ข้อความนี้ให้ตรงก่อนกดยืนยันได้ (ลบของที่กู้คืนไม่ได้ — แบบ GitHub) */
+      requireText?: string;
+      /** คำอธิบายเหนือช่องพิมพ์ (ค่าเริ่มต้น "พิมพ์ \"X\" เพื่อยืนยัน") */
+      requireTextLabel?: ReactNode;
     };
 
 /** แปลง ConfirmSpec เป็น object เสมอ */
@@ -45,6 +51,8 @@ export function ConfirmDialog({
   cancelLabel,
   destructive = false,
   pending = false,
+  requireText,
+  requireTextLabel,
   onConfirm,
 }: {
   open: boolean;
@@ -56,9 +64,19 @@ export function ConfirmDialog({
   /** ปุ่มยืนยันสีแดง (ลบ/เพิกถอน) */
   destructive?: boolean;
   pending?: boolean;
+  /** ต้องพิมพ์ข้อความนี้ให้ตรงก่อนปุ่มยืนยันจะกดได้ (ชื่อแอป/โปรเจกต์ที่กำลังจะลบ) */
+  requireText?: string;
+  requireTextLabel?: ReactNode;
   onConfirm: () => void;
 }) {
   const text = useUiText();
+  const inputId = useId();
+  const [typed, setTyped] = useState("");
+  // เปิดใหม่ทุกครั้ง = ล้างสิ่งที่พิมพ์ไว้ (ไม่ให้ยืนยันรายการถัดไปได้ทันที)
+  useEffect(() => {
+    if (!open) setTyped("");
+  }, [open]);
+  const blocked = Boolean(requireText) && typed.trim() !== requireText;
   return (
     <AlertDialog open={open} onOpenChange={(o) => !pending && onOpenChange(o)}>
       <AlertDialogContent>
@@ -66,11 +84,32 @@ export function ConfirmDialog({
           <AlertDialogTitle>{title ?? text.confirmTitle ?? "ยืนยันการทำรายการ"}</AlertDialogTitle>
           <AlertDialogDescription>{description}</AlertDialogDescription>
         </AlertDialogHeader>
+        {requireText && (
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor={inputId} className="font-normal text-sm">
+              {requireTextLabel ?? (
+                <>
+                  {text.confirmTypeToConfirm ?? "พิมพ์"}{" "}
+                  <span className="font-medium">{requireText}</span>{" "}
+                  {text.confirmTypeToConfirmSuffix ?? "เพื่อยืนยัน"}
+                </>
+              )}
+            </Label>
+            <Input
+              id={inputId}
+              value={typed}
+              onChange={(e) => setTyped(e.target.value)}
+              autoComplete="off"
+              spellCheck={false}
+              disabled={pending}
+            />
+          </div>
+        )}
         <AlertDialogFooter>
           <AlertDialogCancel disabled={pending}>{cancelLabel ?? text.cancel}</AlertDialogCancel>
           <AlertDialogAction
             variant={destructive ? "destructive" : "default"}
-            disabled={pending}
+            disabled={pending || blocked}
             aria-busy={pending || undefined}
             onClick={onConfirm}
           >

package/src/components/shared/count-badge.tsx

@@ -0,0 +1,41 @@
+import { cn } from "@suphark/ui/lib/utils";
+import type { ComponentProps } from "react";
+
+/**
+ * ป้ายจำนวนเล็ก ๆ ท้ายชื่อเมนู/แท็บ/หัวข้อ — เกิน `max` แสดง "99+"; 0 ซ่อนอัตโนมัติ (`showZero` เพื่อบังคับแสดง)
+ *
+ *   ผู้ใช้ <CountBadge value={members.length} />
+ */
+export function CountBadge({
+  value,
+  max = 99,
+  showZero = false,
+  tone = "muted",
+  className,
+  ...props
+}: Omit<ComponentProps<"span">, "children"> & {
+  value: number | null | undefined;
+  max?: number;
+  showZero?: boolean;
+  /** muted = พื้นเทา (ค่าเริ่มต้น), primary/destructive = เน้น (เช่นจำนวนที่ยังไม่อ่าน) */
+  tone?: "muted" | "primary" | "destructive";
+}) {
+  if (value == null || (!showZero && value <= 0)) return null;
+  return (
+    <span
+      data-slot="count-badge"
+      className={cn(
+        "inline-flex min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 font-medium text-label tabular-nums",
+        tone === "primary"
+          ? "bg-primary text-primary-foreground"
+          : tone === "destructive"
+            ? "bg-destructive text-white"
+            : "bg-muted text-muted-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {value > max ? `${max}+` : value}
+    </span>
+  );
+}