@suphark/ui 0.28.0 → 0.30.0

package/CHANGELOG.md

@@ -2,6 +2,37 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.30.0] — 2026-10-05
+
+### Added
+
+- **ข้อความที่ผู้ใช้เห็นในแพ็กเกจเปลี่ยนภาษาได้ครบแล้ว** — เก็บข้อความไทยที่ฝังตายใน JSX อีก 34 จุดเข้า `UiText`: `DataTableToolbar` (ค้นหา/ล้าง/ตัวกรอง/คำอธิบาย/ปิด), `DataTableFacetedFilter` + `FormFieldCombobox` ("ไม่พบข้อมูล"), `MultiSelectCombobox` (ล้างทั้งหมด/ลบ/เพิ่ม), `ResourcePropertyFilter` (ทั้งแผง 14 จุด), `AppShell`/`SubNav`/`TopTabs` (เมนูหลัก/เมนูย่อย/เลือกหน้า/ไม่พบ/ล้างคำค้นหา), `ErrorState` (เซสชันหมดอายุ) — คีย์ใหม่: `UiText.combobox`, `UiText.filter`, `UiText.nav`, `UiText.sessionExpired` และ `UiText.table.{search,clearSearch,filters,filtersDescription,closeFilters,clearFilter}`
+- **เทสต์กันข้อความฝังตาย** `no-hardcoded-text` (อยู่ใน `pnpm test`/CI): ไล่ JSX ของ `shared`/`app-shell`/`data-table`/`sortable` หาข้อความไทยที่ไม่มีทาง override — ยกเว้นได้แต่ต้องเขียนเหตุผลใน ALLOW; มีชุด "ปลูกการละเมิด" พิสูจน์ว่าตัวตรวจจับของจริงได้และไม่จับของที่ถูกต้อง (คอมเมนต์/JSDoc/`?? "…"`/พจนานุกรมของ component) — ไอเดียจาก Pi Config ที่เจอว่าเทสต์แบบนี้ล้มเหลวเงียบได้ง่าย
+- `SegmentedControl`: `tone` ต่อตัวเลือก (`success` / `warning` / `destructive` / `info`) — ลงสีเฉพาะตัวที่ถูกเลือก ใช้กับตัวกรองที่ "ประเภท" มีความหมายทางสี เช่นรายรับ/รายจ่าย (คำขอจาก DueBell ที่ต้องใช้ไอคอนแทนไปก่อน)
+
+### Fixed
+
+- `MonthStepper`: ปุ่มกลางตอนอยู่เดือนปัจจุบันเคยเป็น `<Button disabled>` ซึ่ง screen reader อ่านว่า "ปุ่ม ปิดใช้งาน" ทั้งที่มันคือป้ายชื่อเดือน — ตอนนี้เรนเดอร์เป็นป้ายธรรมดาเมื่อไม่มีอะไรให้กด (รายงานจาก DueBell) และตอนกดได้ใช้ tooltip ของ `Button` แทน `title` (เลิก tooltip ซ้อนของเบราว์เซอร์)
+
+## [0.29.0] — 2026-10-05
+
+### Added
+
+- `InlineEdit`: คุมโหมดแก้ไขจากข้างนอกได้ — `editing` + `onEditingChange` (controlled), `defaultEditing` และ `onCancel` (กด Esc/✕) สำหรับแอปที่เข้าโหมดแก้ไขด้วย F2 หรือเมนูคลิกขวา "เปลี่ยนชื่อ" (คำขอจาก Pi Files — เดิมต้อง `.click()` ปุ่มดินสอผ่าน DOM)
+- **`@suphark/ui/sortable` — ลากจัดลำดับ 2 ระดับ (กลุ่ม + รายการในกลุ่ม)** entry ใหม่บน dnd-kit (แยกจาก barrel เหมือน `data-table`/`kanban` เพราะ dnd-kit สร้าง context ตอน import) — ยกสมองส่วนลากออกจากแอป ส่วนการเรนเดอร์แถวยังเป็นของแอป (ตาราง/การ์ด/รายการ) ตามสเปกของ Pi Config (`values-table.tsx`)
+  - `SortableProvider` — sensors (เมาส์ + คีย์บอร์ด), collision ที่กันลากข้ามชนิด (กลุ่มชนได้แค่กลุ่ม, รายการชนได้แค่รายการกับที่วางของกลุ่ม), ย้ายข้ามกลุ่มระหว่างลาก, commit ตอนปล่อย และ **คืนลำดับเดิมอัตโนมัติเมื่อบันทึกล้มเหลว** (throw หรือ `{ ok: false, error }`) — ไม่มี `onCommitError` = ขึ้น toast ให้; ส่งมา = ส่ง error ดิบให้แอปจัดการเอง ไม่กลืนเงียบ
+  - `SortableGroup` (ขอบเขตการเรียงของกลุ่ม), `useSortableRow({ type, id })` → `{ ref, style, handleProps, isDragging }`, `useSortableDropZone(groupId)` (แปะที่ไหนก็ได้ — หัวกลุ่ม หรือแถว placeholder ของกลุ่มที่ไม่มีหัว; กลุ่มที่ย่ออยู่ก็ยังรับการวางได้), `useSortableState()` → `{ dragging, disabled }`, `DragHandle` (ใช้ `Button` ของแพ็กเกจ จึงได้ tooltip จาก `aria-label`; ปิดการลากแล้วที่จับจางลงเอง หรือซ่อนไปเลยด้วย `hideWhenDisabled`)
+  - `announcements` + `screenReaderInstructions` ส่งเป็น prop ได้ (callback ได้ `{ id, kind, groupId, index, total }` ให้แอปประกอบข้อความจากชื่อจริง) ไม่ส่ง = แม่แบบจาก `UiText.sortable`
+  - helper แบบ pure ใน `lib/sortable-order`: `sortableOrderOf`, `reorderGroups`, `reorderItems`, `moveItemToGroup`, `groupOfItem`, `sameOrder`, `moveWithin`, `sortableOrderToPayload` (คืน `{ groups: string[], items: [{ groupId: string | null, itemIds }] }` — ลำดับกลุ่มกับรายการในกลุ่มครบในก้อนเดียว, `UNGROUPED` → `null`)
+- `UiText.sortable` — `handle`, `instructions`, `started`, `moved`, `dropped`, `cancelled` (`{index}` / `{total}`)
+- showcase: หน้า `/components/sortable-list` — ตาราง 2 ระดับ ลากเรียงกลุ่ม/คีย์/ย้ายข้ามกลุ่ม พร้อมแถว "ลากมาที่นี่เพื่อเอาออกจากกลุ่ม" ที่โผล่เฉพาะตอนลากคีย์
+
+## [0.28.1] — 2026-10-05
+
+### Fixed
+
+- **`AppShell` ปุ่มย่อ/ขยายเมนูยังมี "Toggle Sidebar" อังกฤษค้างอยู่ใน `sr-only`** (รายงานจาก DueBell): `SidebarTrigger` ของ shadcn ฝังข้อความนั้นเป็น children ซึ่งแทนด้วย props ไม่ได้ (JSX children ชนะ) — 0.27.1 เปลี่ยนได้แค่ `aria-label` ตอนนี้ `AppShell` เรนเดอร์ปุ่มเองจาก `Button` ของแพ็กเกจ + `useSidebar()` จึงใช้ `UiText.toggleSidebar` ทั้งชื่อและ tooltip และไม่มีข้อความอังกฤษเหลือในปุ่ม (ยังคง `data-sidebar="trigger"` ไว้ให้ selector เดิมใช้ได้)
+
 ## [0.28.0] — 2026-10-05
 
 ### Added

package/README.md

@@ -197,6 +197,32 @@ webview/automation บางตัวปิด `window.confirm` ทิ้ง (
 
 ต้องการ `alert` / `prompt` / `choose` (หลายปุ่ม) / `checklist` ด้วย หรือไม่อยาก render `confirmDialog` ทุกที่: ครอบ `<DialogsProvider>` ที่ root แล้ว `const dialogs = useDialogs()` — `await dialogs.prompt({ description: "ชื่อใหม่", defaultValue })` คืน string หรือ null; หัว/ปุ่มค่าเริ่มต้นจาก `UiText.ok/alertTitle/promptTitle/chooseTitle/checklistTitle`
 
+### ลากจัดลำดับ (`@suphark/ui/sortable`)
+
+ลากเรียงกลุ่ม เรียงรายการในกลุ่ม และย้ายรายการข้ามกลุ่ม ในตาราง/รายการเดียวกัน — แพ็กเกจดูแล sensors, collision, การย้ายระหว่างลาก และ **คืนลำดับเดิมให้เองเมื่อบันทึกไม่สำเร็จ** ส่วนการเรนเดอร์แถวยังเป็นของแอป
+
+```tsx
+const [order, setOrder] = useState(() =>
+  sortableOrderOf(groups, items, { groupId: (g) => g.id, itemId: (i) => i.id, itemGroupId: (i) => i.groupId }),
+);
+
+<SortableProvider order={order} onOrderChange={setOrder} onCommit={(next) => saveOrder(sortableOrderToPayload(next))}>
+  <SortableGroup itemIds={order.items[groupId] ?? []}>
+    {/* แต่ละแถว: const row = useSortableRow({ type: "item", id }); */}
+    <TableRow ref={row.ref} style={row.style}>
+      <TableCell><DragHandle label={`ลาก ${item.name}`} {...row.handleProps} /></TableCell>
+      …
+    </TableRow>
+  </SortableGroup>
+</SortableProvider>
+```
+
+- กลุ่มที่ไม่มีหัวกลุ่ม (เช่น "ยังไม่จัดกลุ่ม") ใช้ `useSortableDropZone(groupId)` แปะกับแถว placeholder ของตัวเอง และดูว่าควรแสดงเมื่อไหร่จาก `useSortableState().dragging`
+- `onCommit` ล้มเหลว (throw หรือ `{ ok: false, error }`) = คืนลำดับเดิม + toast; ถ้าอยากจัดการ error เองใส่ `onCommitError`
+- `sortableOrderToPayload(order)` คืน `{ groups, items }` — `groups` คือลำดับของกลุ่ม, `items` คือรายการในแต่ละกลุ่มเรียงตามนั้น (ของที่ยังไม่มีกลุ่มมาก่อนด้วย `groupId: null`)
+- `SortableProvider disabled` (เช่นระหว่างกรอง ซึ่งลำดับที่เห็นไม่ใช่ลำดับจริง) ทำให้ `DragHandle` จางลงและกดไม่ได้ — ไม่อยากให้เห็นเลยใส่ `hideWhenDisabled`
+- ข้อความ screen reader: ใส่ `announcements`/`screenReaderInstructions` เป็น prop (callback ได้ `{ id, kind, groupId, index, total }`) หรือปล่อยให้ใช้แม่แบบจาก `UiText.sortable`
+
 ### PWA (`@suphark/ui/pwa`)
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.28.0",
+  "version": "0.30.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 เอง",
@@ -44,6 +44,7 @@
     "./data-table": "./src/data-table.ts",
     "./pwa": "./src/pwa.ts",
     "./kanban": "./src/kanban.ts",
+    "./sortable": "./src/sortable.ts",
     "./styles.css": "./src/styles.css",
     "./components/shared/button": "./src/components/shared/button/index.ts",
     "./components/shared/theme": "./src/components/shared/theme/index.ts",

package/scripts/hardcoded-text.d.mts

@@ -0,0 +1,3 @@
+/** ชนิดของ `hardcoded-text.mjs` (สคริปต์เป็น .mjs เพราะ CI/เทสต์เรียกได้ทั้งคู่) */
+export declare function stripComments(source: string): string[];
+export declare function findHardcodedThai(source: string): Array<{ line: number; text: string }>;

package/scripts/hardcoded-text.mjs

@@ -0,0 +1,101 @@
+/**
+ * หา "ข้อความที่ผู้ใช้เห็น" ซึ่งฝังภาษาไทยตายไว้ใน JSX ของแพ็กเกจ
+ * ข้อความแบบนั้นแอปสองภาษาแปลไม่ได้เลย — ต้องผ่าน `UiText` (`text.x ?? "ไทย"`) หรือ prop
+ *
+ * ตรวจเฉพาะ **ข้อความใน JSX** สองแบบ (จุดที่ override ไม่ได้จริง ๆ):
+ *   1. attribute ที่ผู้ใช้/screen reader เห็น: `aria-label` `placeholder` `title` `alt` ฯลฯ
+ *   2. ข้อความที่เป็นลูกของ element: `<CommandEmpty>ไม่พบข้อมูล</CommandEmpty>`
+ * ไม่ตรวจ: คอมเมนต์ (รวม JSDoc ตัวอย่างโค้ด), ค่าเริ่มต้นของ prop, พจนานุกรมของ component
+ * (`const TEXT = { th, en }`) และ `text.x ?? "ไทย"` — ทั้งหมดนั้นแอปเปลี่ยนได้อยู่แล้ว
+ *
+ * export เป็นฟังก์ชันล้วนเพื่อให้เทสต์ "ปลูกไฟล์ละเมิด" พิสูจน์ได้ว่าจับได้จริงทั้งสองทาง
+ * (เทสต์ประเภทนี้ล้มเหลวเงียบง่ายมาก — ผ่านเพราะไม่ได้ตรวจอะไร)
+ */
+
+const THAI = "[\\u0E00-\\u0E7F]";
+const VISIBLE_ATTR = new RegExp(
+  `\\s(?:aria-label|aria-description|aria-roledescription|placeholder|title|alt|label)=\\{?["'\`][^"'\`]*${THAI}`,
+);
+const JSX_CHILD = new RegExp(`>\\s*[^<>{}\\n]*${THAI}`);
+const THAI_ANY = new RegExp(THAI);
+
+/** ตัดคอมเมนต์ออกทั้งไฟล์ (`//`, `/* *\/` ทั้งบรรทัดเดียวและหลายบรรทัด) โดยคงจำนวนบรรทัดไว้ */
+export function stripComments(source) {
+  const out = [];
+  let inBlock = false;
+  for (const line of source.split("\n")) {
+    let rest = line;
+    let kept = "";
+    while (rest !== "") {
+      if (inBlock) {
+        const end = rest.indexOf("*/");
+        if (end === -1) {
+          rest = "";
+          break;
+        }
+        inBlock = false;
+        rest = rest.slice(end + 2);
+        continue;
+      }
+      const block = rest.indexOf("/*");
+      const lineComment = rest.indexOf("//");
+      const blockOutside = block !== -1 && balanced(rest.slice(0, block));
+      const lineOutside = lineComment !== -1 && balanced(rest.slice(0, lineComment));
+      if (lineOutside && (!blockOutside || lineComment < block)) {
+        kept += rest.slice(0, lineComment);
+        rest = "";
+        break;
+      }
+      if (!blockOutside) {
+        kept += rest;
+        rest = "";
+        break;
+      }
+      kept += rest.slice(0, block);
+      rest = rest.slice(block + 2);
+      inBlock = true;
+    }
+    out.push(kept);
+  }
+  return out;
+}
+
+/** quote เปิด-ปิดครบไหม (ใช้ตัดสินว่า `//` หรือ `/*` อยู่นอก string เช่น "https://…") */
+function balanced(text) {
+  let quote = null;
+  for (let i = 0; i < text.length; i += 1) {
+    const ch = text[i];
+    if (ch === "\\") {
+      i += 1;
+      continue;
+    }
+    if (quote) {
+      if (ch === quote) quote = null;
+    } else if (ch === '"' || ch === "'" || ch === "`") {
+      quote = ch;
+    }
+  }
+  return quote === null;
+}
+
+/** บรรทัดนี้มีทางให้แอปเปลี่ยนข้อความอยู่แล้วไหม */
+function hasEscapeHatch(line) {
+  // `text.x ?? "ไทย"` / `text?.x?.y ?? "ไทย"` (ค่าเริ่มต้นของ UiText)
+  if (/\?\?\s*["'`]/.test(line)) return true;
+  return false;
+}
+
+/** คืนรายการละเมิดของไฟล์เดียว: `{ line, text }` */
+export function findHardcodedThai(source) {
+  const lines = stripComments(source);
+  const found = [];
+  lines.forEach((line, index) => {
+    if (!THAI_ANY.test(line)) return;
+    if (hasEscapeHatch(line)) return;
+    // บรรทัดที่ไม่มีแท็กเลยไม่ใช่ JSX (เช่น object ของข้อความ หรือ `throw new Error(...)`)
+    const looksJsx = line.includes("<");
+    if (!VISIBLE_ATTR.test(line) && !(looksJsx && JSX_CHILD.test(line))) return;
+    found.push({ line: index + 1, text: line.trim() });
+  });
+  return found;
+}

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { SimpleTooltip } from "@suphark/ui/components/shared/simple-tooltip";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { SkipLink } from "@suphark/ui/components/shared/skip-link";
 import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import {
@@ -18,11 +18,10 @@ import {
   SidebarInset,
   SidebarProvider,
   SidebarRail,
-  SidebarTrigger,
   useSidebar,
 } from "@suphark/ui/components/ui/sidebar";
 import { cn } from "@suphark/ui/lib/utils";
-import { Search, X } from "lucide-react";
+import { PanelLeftIcon, Search, X } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import {
@@ -78,7 +77,7 @@ export interface AppShellProps {
   /** ท้าย sidebar — ปกติคือ `<UserMenu variant="sidebar" />` */
   sidebarFooter?: ReactNode;
   /**
-   * header ของเนื้อหา: `false` = ไม่มี header, `true`/ไม่ส่ง = SidebarTrigger + breadcrumb อัตโนมัติ
+   * header ของเนื้อหา: `false` = ไม่มี header, `true`/ไม่ส่ง = ปุ่มย่อ/ขยายเมนู + breadcrumb อัตโนมัติ
    * ส่ง object เพื่อกำหนดเอง
    */
   header?:
@@ -207,9 +206,7 @@ function SidebarShell({
               )}
             >
               <div className="flex h-12 min-w-0 flex-1 items-center gap-2 md:h-full">
-                <SimpleTooltip content={toggleSidebarLabel}>
-                  <SidebarTrigger className="-ml-1" aria-label={toggleSidebarLabel} />
-                </SimpleTooltip>
+                <SidebarToggle label={toggleSidebarLabel} />
                 {breadcrumbs && (
                   <>
                     <Separator orientation="vertical" className="mr-2 hidden h-4 md:block" />
@@ -357,6 +354,28 @@ function TopShell({
   );
 }
 
+/**
+ * ปุ่มย่อ/ขยายเมนูในหัวเรื่อง — เขียนเองแทน `SidebarTrigger` ของ shadcn เพราะตัวนั้นฝัง
+ * `<span className="sr-only">Toggle Sidebar</span>` เป็นภาษาอังกฤษไว้ใน children (แทนไม่ได้
+ * เพราะ JSX children ชนะ props) ตัวนี้ใช้ `UiText` และได้ tooltip จาก `Button` ของแพ็กเกจ
+ * คง `data-sidebar="trigger"` ไว้ให้แอปที่ยิง selector เดิมยังใช้ได้
+ */
+function SidebarToggle({ label }: { label: string }) {
+  const { toggleSidebar } = useSidebar();
+  return (
+    <Button
+      data-sidebar="trigger"
+      variant="ghost"
+      size="icon-sm"
+      aria-label={label}
+      className="-ml-1"
+      onClick={toggleSidebar}
+    >
+      <PanelLeftIcon />
+    </Button>
+  );
+}
+
 /** แผง sidebar — แยกเพื่อใช้ useSidebar (ล้างคำค้นเมื่อยุบ ไม่ให้เมนูถูกกรองทั้งที่มองไม่เห็นช่องค้นหา) */
 function ShellSidebar({
   brand,
@@ -417,7 +436,7 @@ function ShellSidebar({
                 <InputGroupAddon align="inline-end">
                   <InputGroupButton
                     onClick={() => setQuery("")}
-                    aria-label="ล้างคำค้นหาเมนู"
+                    aria-label={text.nav?.clearSearch ?? "ล้างคำค้นหาเมนู"}
                     className="size-6 p-0 hover:bg-transparent"
                   >
                     <X aria-hidden="true" />

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import {
   InputGroup,
   InputGroupAddon,
@@ -30,6 +31,7 @@ export function SubNav({
   searchPlaceholder?: string;
   className?: string;
 }) {
+  const text = useUiText();
   const pathname = usePathname();
   const router = useRouter();
   const [query, setQuery] = useState("");
@@ -66,9 +68,9 @@ export function SubNav({
           className="h-9 rounded-md border bg-background px-2 text-foreground text-sm"
           value={current?.href ?? ""}
           onChange={(e) => e.target.value && router.push(e.target.value)}
-          aria-label={typeof title === "string" ? title : "เมนูย่อย"}
+          aria-label={typeof title === "string" ? title : (text.nav?.sub ?? "เมนูย่อย")}
         >
-          {!current && <option value="">เลือกหน้า…</option>}
+          {!current && <option value="">{text.nav?.choosePage ?? "เลือกหน้า…"}</option>}
           {sections.map((s, si) => (
             // biome-ignore lint/suspicious/noArrayIndexKey: กลุ่มคงที่
             <optgroup key={si} label={s.title ?? ""}>
@@ -84,7 +86,7 @@ export function SubNav({
 
       {/* เดสก์ท็อป */}
       <nav
-        aria-label={typeof title === "string" ? title : "เมนูย่อย"}
+        aria-label={typeof title === "string" ? title : (text.nav?.sub ?? "เมนูย่อย")}
         className={cn(
           "sticky top-28 hidden w-56 shrink-0 flex-col gap-3 self-start lg:flex",
           className,
@@ -142,7 +144,9 @@ export function SubNav({
           </div>
         ))}
         {sections.length === 0 && (
-          <p className="px-2 text-muted-foreground text-xs">ไม่พบ “{query}”</p>
+          <p className="px-2 text-muted-foreground text-xs">
+            {(text.nav?.noResults ?? "ไม่พบ “{query}”").replace("{query}", query)}
+          </p>
         )}
       </nav>
     </>

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

@@ -1,5 +1,6 @@
 "use client";
 
+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";
@@ -34,11 +35,15 @@ export function isTabActive(pathname: string, tab: AppNavItem): boolean {
 
 /** แท็บหลักแนวนอนใต้ header (แบบ Clerk: Overview · Users · …) — active มีเส้นใต้; จอแคบเลื่อนแนวนอน */
 export function TopTabs({ nav, className }: { nav: AppNavGroup[]; className?: string }) {
+  const text = useUiText();
   const pathname = usePathname();
   const tabs = topLevelTabs(nav);
   if (tabs.length === 0) return null;
   return (
-    <nav aria-label="เมนูหลัก" className={cn("no-scrollbar -mb-px flex overflow-x-auto", className)}>
+    <nav
+      aria-label={text.nav?.main ?? "เมนูหลัก"}
+      className={cn("no-scrollbar -mb-px flex overflow-x-auto", className)}
+    >
       {tabs.map((tab) => {
         const active = isTabActive(pathname, tab);
         return (

package/src/components/data-table/data-table-faceted-filter.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Button } from "@suphark/ui/components/shared/button/button";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import { Badge } from "@suphark/ui/components/ui/badge";
 import {
   Command,
@@ -37,6 +38,7 @@ export function DataTableFacetedFilter<TData, TValue>({
   compact = false,
   fullWidth = false,
 }: DataTableFacetedFilterProps<TData, TValue>) {
+  const text = useUiText();
   const facets = column?.getFacetedUniqueValues();
   const filterValue = column?.getFilterValue();
   // Set + ลำดับ memo จากค่า filter จริง (เดิมสร้าง Set ใหม่ทุก render ทำให้ memo ไม่เคย hit)
@@ -109,7 +111,7 @@ export function DataTableFacetedFilter<TData, TValue>({
         <Command>
           {!compact ? <CommandInput placeholder={title} /> : null}
           <CommandList>
-            <CommandEmpty>ไม่พบข้อมูล</CommandEmpty>
+            <CommandEmpty>{text.combobox?.empty ?? "ไม่พบข้อมูล"}</CommandEmpty>
             <CommandGroup>
               {sortedOptions.map((option) => {
                 const valueAsString = String(option.value);

package/src/components/data-table/data-table-toolbar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Button } from "@suphark/ui/components/shared/button/button";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import { Badge } from "@suphark/ui/components/ui/badge";
 import {
   InputGroup,
@@ -43,6 +44,7 @@ export function DataTableToolbar<TData>({
   toolbarFilters,
   preservedFilterIds = [],
 }: DataTableToolbarProps<TData>) {
+  const text = useUiText();
   const globalFilter = table.getState().globalFilter;
   // ค้นหา: เก็บข้อความในช่องเอง แล้วส่งให้ตารางเมื่อหยุดพิมพ์ 250 ms — เดิมกรอง/เรียง/render ทุกแถวทุกตัวอักษร
   // (และถ้าแอปผูก globalFilter กับ URL = router.replace ทุกตัวอักษร)
@@ -121,7 +123,7 @@ export function DataTableToolbar<TData>({
               <Search aria-hidden="true" className="size-4" />
             </InputGroupAddon>
             <InputGroupInput
-              aria-label="ค้นหาข้อมูลในตาราง"
+              aria-label={text.table?.search ?? "ค้นหาข้อมูลในตาราง"}
               name="table-search"
               autoComplete="off"
               placeholder={globalFilterPlaceholder}
@@ -135,7 +137,7 @@ export function DataTableToolbar<TData>({
               <InputGroupAddon align="inline-end">
                 <InputGroupButton
                   variant="ghost"
-                  aria-label="ล้างคำค้นหา"
+                  aria-label={text.table?.clearSearch ?? "ล้างคำค้นหา"}
                   onClick={() => commitSearch("")}
                 >
                   <X aria-hidden="true" className="size-4" />
@@ -166,15 +168,17 @@ export function DataTableToolbar<TData>({
             className="w-[min(24rem,calc(100vw-1rem))] sm:max-w-md"
           >
             <SheetHeader className="border-b pr-12">
-              <SheetTitle>ตัวกรองข้อมูล</SheetTitle>
-              <SheetDescription>เลือกได้หลายเงื่อนไข ผลลัพธ์จะอัปเดตทันที</SheetDescription>
+              <SheetTitle>{text.table?.filters ?? "ตัวกรองข้อมูล"}</SheetTitle>
+              <SheetDescription>
+                {text.table?.filtersDescription ?? "เลือกได้หลายเงื่อนไข ผลลัพธ์จะอัปเดตทันที"}
+              </SheetDescription>
               <SheetClose
                 render={
                   <Button variant="ghost" size="icon-sm" className="absolute top-3 right-3" />
                 }
               >
                 <X />
-                <span className="sr-only">ปิดตัวกรอง</span>
+                <span className="sr-only">{text.table?.closeFilters ?? "ปิดตัวกรอง"}</span>
               </SheetClose>
             </SheetHeader>
             <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto px-4">
@@ -231,7 +235,10 @@ export function DataTableToolbar<TData>({
                 <span className="font-medium">{displayedLabels}</span>
                 <button
                   type="button"
-                  aria-label={`ล้างตัวกรอง ${config.title}: ${displayedLabels}`}
+                  aria-label={`${(text.table?.clearFilter ?? "ล้างตัวกรอง {name}").replace(
+                    "{name}",
+                    config.title,
+                  )}: ${displayedLabels}`}
                   onClick={() => table.getColumn(filter.id)?.setFilterValue(undefined)}
                   className="ml-1 rounded-full outline-none hover:bg-muted-foreground/20"
                 >

package/src/components/shared/form/form-field-combobox.tsx

@@ -2,6 +2,7 @@
 
 import { Button } from "@suphark/ui/components/shared/button/button";
 import { SwitcherChevron } from "@suphark/ui/components/shared/switcher-chevron";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import {
   Command,
   CommandEmpty,
@@ -68,6 +69,7 @@ export function FormFieldCombobox<T extends FieldValues>({
   autoFocus,
   onSelect,
 }: FormFieldComboboxProps<T>) {
+  const text = useUiText();
   const cacheKey = fetcherKey ?? fetcher;
   const [options, setOptions] = useState<{ label: string; value: string; subLabel?: string }[]>(
     () => cacheGet(cacheKey) || [],
@@ -133,9 +135,14 @@ export function FormFieldCombobox<T extends FieldValues>({
               </PopoverTrigger>
               <PopoverContent className="w-[--anchor-width] p-0">
                 <Command>
-                  <CommandInput placeholder={`ค้นหา ${placeholder.toLowerCase()}...`} />
+                  <CommandInput
+                    placeholder={(text.combobox?.search ?? "ค้นหา {label}…").replace(
+                      "{label}",
+                      placeholder.toLowerCase(),
+                    )}
+                  />
                   <CommandList>
-                    <CommandEmpty>ไม่พบข้อมูล</CommandEmpty>
+                    <CommandEmpty>{text.combobox?.empty ?? "ไม่พบข้อมูล"}</CommandEmpty>
                     <CommandGroup>
                       {options.map((option) => (
                         <CommandItem

package/src/components/shared/inline-edit.tsx

@@ -20,6 +20,16 @@ export interface InlineEditProps {
   emptyLabel?: ReactNode;
   /** ตรวจก่อนบันทึก — คืนข้อความ = ไม่ผ่าน */
   validate?: (value: string) => string | null | undefined;
+  /**
+   * คุมโหมดแก้ไขจากข้างนอก (เช่นเข้าโหมดแก้ไขด้วย F2 หรือเมนูคลิกขวา "เปลี่ยนชื่อ")
+   * ส่ง `editing` คู่กับ `onEditingChange` = controlled; ไม่ส่ง = component คุมเอง
+   */
+  editing?: boolean;
+  onEditingChange?: (editing: boolean) => void;
+  /** เริ่มต้นอยู่ในโหมดแก้ไขเลย (uncontrolled — เช่นแถวที่เพิ่งสร้าง) */
+  defaultEditing?: boolean;
+  /** กด Esc / ปุ่ม ✕ (ไม่ถูกเรียกเมื่อบันทึกสำเร็จ) */
+  onCancel?: () => void;
   /** ค่าเดิมกับค่าใหม่เท่ากัน = ปิดโหมดแก้ไขโดยไม่เรียก `onSave` (ค่าเริ่มต้น true) */
   skipWhenUnchanged?: boolean;
   disabled?: boolean;
@@ -42,25 +52,49 @@ export function InlineEdit({
   placeholder,
   emptyLabel = "—",
   validate,
+  editing: editingProp,
+  onEditingChange,
+  defaultEditing = false,
+  onCancel,
   skipWhenUnchanged = true,
   disabled = false,
   size = "default",
   className,
 }: InlineEditProps) {
   const text = useUiText();
-  const [editing, setEditing] = useState(false);
+  const [uncontrolledEditing, setUncontrolledEditing] = useState(defaultEditing);
+  const editing = editingProp ?? uncontrolledEditing;
   const [draft, setDraft] = useState(value);
   const [pending, setPending] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
   // เลือกข้อความทั้งหมดครั้งแรกที่เข้าโหมดแก้ไข — พิมพ์ทับได้ทันที (โฟกัสรอบหลังไม่เลือกซ้ำ)
   const selectedOnOpen = useRef(false);
 
+  // เข้าโหมดแก้ไขจากข้างนอก (F2/เมนู) ก็ต้องเริ่มจากค่าปัจจุบันเหมือนกดปุ่มดินสอ
+  const wasEditing = useRef(editing);
+  if (editing && !wasEditing.current) {
+    setDraft(value);
+    selectedOnOpen.current = false;
+  }
+  wasEditing.current = editing;
+
+  function setEditing(next: boolean) {
+    if (editingProp === undefined) setUncontrolledEditing(next);
+    onEditingChange?.(next);
+  }
+
   function start() {
     setDraft(value);
     selectedOnOpen.current = false;
     setEditing(true);
   }
 
+  /** ยกเลิก (Esc / ปุ่ม ✕) — ต่างจากบันทึกสำเร็จตรงที่บอกแอปด้วย */
+  function cancel() {
+    setEditing(false);
+    onCancel?.();
+  }
+
   async function commit() {
     const next = draft.trim();
     if (skipWhenUnchanged && next === value.trim()) {
@@ -148,7 +182,7 @@ export function InlineEdit({
             void commit();
           } else if (e.key === "Escape") {
             e.preventDefault();
-            setEditing(false);
+            cancel();
           }
         }}
       />
@@ -166,7 +200,7 @@ export function InlineEdit({
         size={compact ? "icon-xs" : "icon-sm"}
         aria-label={text.cancel}
         disabled={pending}
-        onClick={() => setEditing(false)}
+        onClick={cancel}
       >
         <XIcon />
       </Button>

package/src/components/shared/layout/error-state.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Button } from "@suphark/ui/components/shared/button/button";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import { buttonVariants } from "@suphark/ui/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@suphark/ui/components/ui/card";
 import { cn } from "@suphark/ui/lib/utils";
@@ -55,6 +56,7 @@ export function ErrorState({
   signInHref = "/sign-in",
   className,
 }: ErrorStateProps) {
+  const text = useUiText();
   const [sessionExpired, setSessionExpired] = useState(false);
 
   useEffect(() => {
@@ -100,19 +102,21 @@ export function ErrorState({
                 <LogIn className="h-10 w-10 text-primary" />
               </div>
             </div>
-            <CardTitle className="text-2xl">เซสชันหมดอายุ</CardTitle>
+            <CardTitle className="text-2xl">
+              {text.sessionExpired?.title ?? "เซสชันหมดอายุ"}
+            </CardTitle>
           </CardHeader>
           <CardContent className="space-y-4 text-center">
             <p className="text-muted-foreground">
-              คุณถูกออกจากระบบระหว่างใช้งาน ข้อมูลที่ยังไม่ได้บันทึกจะหายไป กรุณาเข้าสู่ระบบอีกครั้ง
-              แล้วระบบจะพากลับมาหน้านี้
+              {text.sessionExpired?.description ??
+                "คุณถูกออกจากระบบระหว่างใช้งาน ข้อมูลที่ยังไม่ได้บันทึกจะหายไป กรุณาเข้าสู่ระบบอีกครั้ง แล้วระบบจะพากลับมาหน้านี้"}
             </p>
             <div className="flex justify-center pt-2">
               {/* full page load เพื่อให้ proxy/เซสชันเริ่มใหม่สะอาด ๆ */}
               {/* eslint-disable-next-line @next/next/no-html-link-for-pages */}
               <a href={signInUrl} className={cn(buttonVariants())}>
                 <LogIn className="mr-2 h-4 w-4" />
-                เข้าสู่ระบบ
+                {text.sessionExpired?.signIn ?? "เข้าสู่ระบบ"}
               </a>
             </div>
           </CardContent>