@suphark/ui 0.57.0 → 0.60.0

package/CHANGELOG.md

@@ -2,6 +2,43 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.60.0] — 2026-10-24
+
+### Added
+- `DataTable variant="quiet"` บนมือถือ (ตาม mockup รอบ 2): **กดค้างที่แถว (500 ms) เข้าโหมดเลือกหมู่** — ช่องเลือก (คอลัมน์ `select`) ซ่อนจากสายตาจนกว่าจะเลือก (คีย์บอร์ด/โปรแกรมอ่านจอยังโฟกัสได้ตลอด), หัว "เลือก N รายการ · เลือกทั้งหมด" (`role="status"`), แตะแถวสลับการเลือก, เอาออกหมด = ออกจากโหมด, สั่นเบา ๆ ถ้าอุปกรณ์รองรับ · บรรทัดบอกใบ้ "กดค้างที่แถวเพื่อเลือกหมู่" แสดงครั้งแรกครั้งเดียว (หายเองใน 6 วินาที จำใน localStorage)
+- `DataTable variant="quiet"` แผ่นตัวกรอง: ตัวกรองแบบรายการติ๊ก (`DataTableFilterSections`) หัวข้อเปิดไว้ แถวสูง 44px มีจำนวนต่อค่า (ใช้ `getFacetedUniqueValues` ของแอปถ้าส่งมา ไม่งั้นนับจากแถวที่ผ่านตัวกรองคอลัมน์อื่น) + ปุ่มล่าง "ล้าง / ดู N รายการ" แทนปุ่ม popover ต่อคอลัมน์
+- `DataTable densityStorageKey` (`quiet`): จำความหนาแน่นที่ผู้ใช้เลือกใน localStorage — ไม่ส่ง = ไม่จำ; localStorage ใช้ไม่ได้ก็ทำงานต่อ
+- `UiText.table.selectedCount` / `selectedPill` / `selectAll` / `longPressHint` / `clearFilters` / `showResults`
+
+### Changed
+- แคปซูลเลือกหมู่ของ `quiet` แสดง "N รายการ" (สั้นลง เพราะหัวรายการมือถือบอก "เลือก N รายการ" แล้ว)
+
+### Fixed
+- `SelectionBar` แบบลอย (`floating`/`pill`): กว้างตามเนื้อหา (`w-max`) — เดิมถูกบีบเหลือครึ่งจอจากการยึด `left-1/2` ทำให้ปุ่มตัดคำและทับกันบนมือถือ · `pill` เป็นบรรทัดเดียวเสมอ ปุ่มที่แอปส่งมาใช้สีตัวอักษรบนพื้นสีหลัก และสูง 44px บนจอสัมผัส · ปุ่มปิดแผ่นตัวกรองสูง 44px บนจอสัมผัส
+
+## [0.59.1] — 2026-10-24
+
+### Fixed
+- `DataTable variant="quiet"` บนจอสัมผัส (`pointer-coarse`): ปุ่ม "ตัวกรอง", ช่องค้นหา, ปุ่มก่อนหน้า/ถัดไป สูง 44px · พื้นที่แตะช่องเลือกของรายการมือถือขยายเป็น 44px (แตะส่วนที่เกินช่องก็สลับการเลือก) · ปุ่มลบชิปตัวกรองมีพื้นที่แตะกว้างขึ้น · วัด contrast ข้อความรอง/สถานะแล้ว ≥ 4.5:1 ทั้งโหมดสว่างและมืด (ไม่ต้องแก้)
+
+## [0.59.0] — 2026-10-24
+
+### Added
+- `DataTable variant="quiet"` (opt-in, ค่าเริ่มต้น `default` เหมือนเดิม — ตาม mockup "Calm toolbar, dense rows"): แถบเครื่องมือบรรทัดเดียว — ช่องค้นหา + ชิปตัวกรองที่ลบได้ + ปุ่ม "ตัวกรอง" ปุ่มเดียว (เปิดแผ่นตัวกรอง: ขวาบนเดสก์ท็อป · ล่างบนมือถือ) + ตัวนับ "N จาก M รายการ" + สลับความหนาแน่น (`defaultDensity`) + ไอคอนคอลัมน์ · หัวตารางเรียบ (ลูกศรเรียงของคอลัมน์ที่ไม่ได้เรียงโผล่เมื่อชี้) · ช่องเลือก (`[role=checkbox]`) และปุ่มท้ายแถว (`DataTableRowActions`) โผล่เมื่อชี้/โฟกัส/เลือก (จอสัมผัสเห็นตลอด) · `StatusBadge` ในตารางเป็นจุดสี · แถวที่เลือกมีแถบสีซ้าย · เลือกแล้วขึ้นแคปซูล `SelectionBar variant="pill"` (`selectionActions` ใส่ปุ่มคำสั่ง) แทนข้อความ "เลือก N จาก M แถว" · เลขหน้าย่อ "1–10 จาก 128 · ‹ 1 / 13 ›"
+- มือถือ (< sm) ของ `variant="quiet"`: คอลัมน์ที่ใส่ `columnDef.meta = { mobile: "title" | "end" | "sub" | "status" | "meta" | "hidden" }` (type `DataTableMobileSlot`) แสดงเป็นรายการแถวละ 3 บรรทัด (ชื่อ + ยอด / รอง / สถานะ · meta) แทนตารางเลื่อนแนวนอน · ไม่ใส่ slot ใดเลย = ตารางเหมือนเดิม · คอลัมน์ `select` แสดงที่ซ้ายของรายการ
+- `DataTablePagination variant="quiet"`, `DataTableViewOptions iconOnly`, `UiText.table.rangeOf` / `shownOf` / `density`
+- `NotificationCenter headerAction` (ขอโดย pi-done): ปุ่มคำสั่งของทั้งกล่อง เช่น "อ่านทั้งหมดแล้ว" ที่หัว ข้างปุ่ม "ดูทั้งหมด" — ไม่ต้องยืม `viewAll`
+- `SwitchField labelClassName` (ขอโดย pi-done): ทับสไตล์ข้อความป้าย (ค่าเริ่มต้น `text-sm`)
+
+### Fixed
+- `useIsMobile` ไม่พังเมื่อไม่มี `window.matchMedia` (jsdom/เบราว์เซอร์เก่า) — ใช้ค่าตอน mount อย่างเดียว (กระทบ `DataTableToolbar` ที่เรียก hook นี้ แอปที่เทสต์ DataTable ใน jsdom ไม่ต้อง mock matchMedia)
+- showcase: `/components/data-table` ตัวอย่างใหม่ (สลับ default/quiet, เลือกแถว, ใบสั่งซื้อสมมติ)
+
+## [0.58.0] — 2026-10-24
+
+### Added
+- `PullToRefresh variant="circle"` (`@suphark/ui/pwa`, ขอโดย pi-done — เจ้าของเลือกแบบวงกลม): วงกลม 40px ไอคอนล้วน (ลูกศร → หมุนตอนรีเฟรช) กลางแนวนอน พักที่ 16px ใต้ขอบบนของ root · เริ่มทำงานที่ 64px สูงสุด 104px แรงต้าน 0.5 · `role="status"` + ข้อความ `sr-only` จาก `text` (ปกติ `PULL_TO_REFRESH_TEXT_*`) · ค่าเริ่มต้นยัง `variant="pill"` (แคปซูลมีข้อความ) เหมือนเดิม
+
 ## [0.57.0] — 2026-10-24
 
 ยกจาก pi-done (รอบสองของคำขอย้าย component ที่แอปทำเอง)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.57.0",
+  "version": "0.60.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 เอง",

package/src/components/data-table/data-table-column-header.tsx

@@ -40,7 +40,7 @@ export function DataTableColumnHeader<TData, TValue>({
           ) : column.getIsSorted() === "asc" ? (
             <ArrowUp />
           ) : (
-            <ChevronsUpDown />
+            <ChevronsUpDown data-sort-idle="" />
           )}
           {column.getIsFiltered() && (
             <Filter className="ml-1 size-3 fill-primary/10 text-primary" />

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

@@ -0,0 +1,108 @@
+"use client";
+
+import { Checkbox } from "@suphark/ui/components/ui/checkbox";
+import { cn } from "@suphark/ui/lib/utils";
+import type { Table } from "@tanstack/react-table";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+import type { FacetedFilterConfig } from "./types";
+
+/**
+ * `variant="quiet"`: ตัวกรองแบบรายการติ๊กในแผ่นตัวกรอง — หัวข้อเปิดไว้ตั้งแต่แรก แถวสูง 44px
+ * แต่ละค่ามีจำนวนแถวกำกับ (แทนปุ่ม popover ต่อคอลัมน์ของตัวกรองปกติ)
+ */
+export function DataTableFilterSections<TData>({
+  table,
+  filters,
+}: {
+  table: Table<TData>;
+  filters: FacetedFilterConfig[];
+}) {
+  return (
+    <div className="flex flex-col">
+      {filters.map((filter) => (
+        <FilterSection key={filter.columnId} table={table} filter={filter} />
+      ))}
+    </div>
+  );
+}
+
+function FilterSection<TData>({
+  table,
+  filter,
+}: {
+  table: Table<TData>;
+  filter: FacetedFilterConfig;
+}) {
+  const [open, setOpen] = React.useState(true);
+  const id = React.useId();
+  const column = table.getColumn(filter.columnId);
+  if (!column) return null;
+  // จำนวนต่อค่า: ใช้ที่แอปส่งมา (`getFacetedUniqueValues`) ถ้ามี ไม่งั้นนับเองจากแถวที่ผ่านตัวกรองคอลัมน์อื่น
+  const provided = column.getFacetedUniqueValues();
+  const counted = new Map<unknown, number>();
+  if (!provided || provided.size === 0) {
+    for (const row of column.getFacetedRowModel().rows) {
+      const key = String(row.getValue(filter.columnId));
+      counted.set(key, (counted.get(key) ?? 0) + 1);
+    }
+  }
+  const facets = provided && provided.size > 0 ? provided : counted;
+  const current = column.getFilterValue();
+  const selected = new Set(Array.isArray(current) ? current.map(String) : []);
+
+  const toggle = (value: string) => {
+    const next = new Set(selected);
+    if (next.has(value)) next.delete(value);
+    else next.add(value);
+    column.setFilterValue(next.size ? Array.from(next) : undefined);
+  };
+
+  return (
+    <section className="border-b last:border-b-0">
+      <button
+        type="button"
+        aria-expanded={open}
+        aria-controls={id}
+        onClick={() => setOpen((value) => !value)}
+        className="flex h-11 w-full items-center justify-between text-muted-foreground text-sm outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+      >
+        <span>
+          {filter.title}
+          {selected.size > 0 && (
+            <span className="ms-1.5 font-semibold text-foreground tabular-nums">
+              {selected.size}
+            </span>
+          )}
+        </span>
+        <ChevronDown
+          aria-hidden="true"
+          className={cn("size-4 transition-transform", open && "rotate-180")}
+        />
+      </button>
+      <div id={id} hidden={!open}>
+        {filter.options.map((option) => {
+          const value = String(option.value);
+          const count = facets?.get(option.value) ?? facets?.get(value);
+          return (
+            <label
+              key={value}
+              className="flex h-11 cursor-pointer items-center gap-3 border-t text-sm first:border-t-0"
+            >
+              <Checkbox
+                aria-label={option.label}
+                checked={selected.has(value)}
+                onCheckedChange={() => toggle(value)}
+              />
+              {option.icon && <option.icon className="size-4 text-muted-foreground" />}
+              <span className="min-w-0 flex-1 truncate">{option.label}</span>
+              {count !== undefined && (
+                <span className="text-muted-foreground text-xs tabular-nums">{count}</span>
+              )}
+            </label>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

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

@@ -17,14 +17,84 @@ interface DataTablePaginationProps<TData> {
   table: Table<TData>;
   pageSizeOptions?: number[];
   onPageSizeChange?: (pageSize: number) => void;
+  /** `quiet` = "1–10 จาก 128 · แถวต่อหน้า · ‹ 1 / 13 ›" (ตัดปุ่มหน้าแรก/สุดท้ายและข้อความจำนวนที่เลือก) */
+  variant?: "default" | "quiet";
 }
 
 export function DataTablePagination<TData>({
   table,
   pageSizeOptions = [10, 20, 30, 40, 50],
   onPageSizeChange,
+  variant = "default",
 }: DataTablePaginationProps<TData>) {
   const text = useUiText();
+  if (variant === "quiet") {
+    const { pageIndex, pageSize } = table.getState().pagination;
+    const total = table.options.manualPagination
+      ? (table.options.rowCount ?? table.getRowModel().rows.length)
+      : table.getFilteredRowModel().rows.length;
+    const from = total === 0 ? 0 : pageIndex * pageSize + 1;
+    const to = Math.min(total, (pageIndex + 1) * pageSize);
+    return (
+      <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 px-1 text-muted-foreground text-xs">
+        <span className="tabular-nums">
+          {(text.table?.rangeOf ?? "{from}–{to} จาก {total}")
+            .replace("{from}", String(from))
+            .replace("{to}", String(to))
+            .replace("{total}", String(total))}
+        </span>
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-1.5 max-sm:hidden">
+            <span>{text.table?.rowsPerPage ?? "แถวต่อหน้า"}</span>
+            <Select
+              value={`${pageSize}`}
+              onValueChange={(value) => {
+                const newSize = Number(value);
+                table.setPageSize(newSize);
+                onPageSizeChange?.(newSize);
+              }}
+            >
+              <SelectTrigger size="sm" className="h-7 w-16 border-transparent bg-muted shadow-none">
+                <SelectValue placeholder={pageSize} />
+              </SelectTrigger>
+              <SelectContent side="top">
+                {pageSizeOptions.map((size) => (
+                  <SelectItem key={size} value={`${size}`}>
+                    {size}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex items-center gap-0.5">
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              aria-label={text.pagination?.previous ?? "ก่อนหน้า"}
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+              className="pointer-coarse:h-11 pointer-coarse:w-11"
+            >
+              <ChevronLeft />
+            </Button>
+            <span className="px-1.5 font-semibold text-foreground tabular-nums">
+              {pageIndex + 1} / {Math.max(1, table.getPageCount())}
+            </span>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              aria-label={text.pagination?.next ?? "ถัดไป"}
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+              className="pointer-coarse:h-11 pointer-coarse:w-11"
+            >
+              <ChevronRight />
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
   const isRowSelectionEnabled = table.options.enableRowSelection !== false;
 
   return (

package/src/components/data-table/data-table-row-actions.tsx

@@ -108,7 +108,7 @@ export function DataTableRowActions<TData>({
   };
 
   return (
-    <div className="flex justify-end">
+    <div data-slot="data-table-row-actions" className="flex justify-end">
       <DropdownMenu>
         <DropdownMenuTrigger
           render={

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

@@ -19,12 +19,14 @@ import {
   SheetTitle,
   SheetTrigger,
 } from "@suphark/ui/components/ui/sheet";
+import { useIsMobile } from "@suphark/ui/hooks/use-mobile";
 import type { Table } from "@tanstack/react-table";
-import { Search, SlidersHorizontal, X } from "lucide-react";
+import { Rows3, Rows4, Search, SlidersHorizontal, X } from "lucide-react";
 import type React from "react";
 import { useEffect, useRef, useState } from "react";
 import type { FacetedFilterConfig } from ".";
 import { DataTableFacetedFilter } from "./data-table-faceted-filter";
+import { DataTableFilterSections } from "./data-table-filter-sections";
 import { DataTableViewOptions } from "./data-table-view-option";
 
 interface DataTableToolbarProps<TData> {
@@ -34,6 +36,10 @@ interface DataTableToolbarProps<TData> {
   globalFilterPlaceholder?: string;
   toolbarFilters?: React.ReactNode;
   preservedFilterIds?: string[];
+  /** `quiet`: ตัวกรองปุ่มเดียว + ชิป + ตัวนับ + สลับความหนาแน่นในบรรทัดเดียว (ดู `DataTableProps.variant`) */
+  variant?: "default" | "quiet";
+  density?: "comfortable" | "compact";
+  onDensityChange?: (density: "comfortable" | "compact") => void;
 }
 
 export function DataTableToolbar<TData>({
@@ -43,8 +49,12 @@ export function DataTableToolbar<TData>({
   globalFilterPlaceholder,
   toolbarFilters,
   preservedFilterIds = [],
+  variant = "default",
+  density = "comfortable",
+  onDensityChange,
 }: DataTableToolbarProps<TData>) {
   const text = useUiText();
+  const isMobile = useIsMobile();
   const globalFilter = table.getState().globalFilter;
   // ค้นหา: เก็บข้อความในช่องเอง แล้วส่งให้ตารางเมื่อหยุดพิมพ์ 250 ms — เดิมกรอง/เรียง/render ทุกแถวทุกตัวอักษร
   // (และถ้าแอปผูก globalFilter กับ URL = router.replace ทุกตัวอักษร)
@@ -114,6 +124,185 @@ export function DataTableToolbar<TData>({
       );
     });
 
+  const renderSheet = ({
+    side,
+    triggerVariant,
+    triggerClassName,
+  }: {
+    side: "right" | "bottom";
+    triggerVariant: "outline" | "ghost";
+    triggerClassName?: string;
+  }) => (
+    <Sheet>
+      <SheetTrigger
+        render={<Button variant={triggerVariant} size="sm" className={triggerClassName} />}
+      >
+        <SlidersHorizontal />
+        ตัวกรอง
+        {activeFilterCount > 0 && (
+          <Badge variant="secondary" className="ml-1 px-1.5 tabular-nums">
+            {activeFilterCount}
+          </Badge>
+        )}
+      </SheetTrigger>
+      <SheetContent
+        side={side}
+        showCloseButton={false}
+        className={
+          side === "bottom"
+            ? "max-h-[85dvh] rounded-t-2xl"
+            : "w-[min(24rem,calc(100vw-1rem))] sm:max-w-md"
+        }
+      >
+        <SheetHeader className="border-b pr-12">
+          <SheetTitle>{text.table?.filters ?? "ตัวกรองข้อมูล"}</SheetTitle>
+          <SheetDescription>
+            {text.table?.filtersDescription ?? "เลือกได้หลายเงื่อนไข ผลลัพธ์จะอัปเดตทันที"}
+          </SheetDescription>
+          <SheetClose
+            render={
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                className="absolute top-3 right-3 pointer-coarse:h-11 pointer-coarse:w-11"
+              />
+            }
+          >
+            <X />
+            <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">
+          {variant === "quiet" && facetedFilters ? (
+            <DataTableFilterSections table={table} filters={facetedFilters} />
+          ) : (
+            renderFilterControls(true)
+          )}
+          {toolbarFilters}
+        </div>
+        {variant === "quiet" ? (
+          <SheetFooter className="grid grid-cols-2 gap-2 border-t">
+            <Button variant="outline" className="pointer-coarse:h-11" onClick={resetUserFilters}>
+              {text.table?.clearFilters ?? "ล้าง"}
+            </Button>
+            <SheetClose render={<Button className="pointer-coarse:h-11" />}>
+              {(text.table?.showResults ?? "ดู {count} รายการ").replace(
+                "{count}",
+                String(table.getFilteredRowModel().rows.length),
+              )}
+            </SheetClose>
+          </SheetFooter>
+        ) : (
+          isFiltered && (
+            <SheetFooter className="border-t">
+              <Button variant="secondary" onClick={resetUserFilters}>
+                <X />
+                ล้างตัวกรองทั้งหมด
+              </Button>
+            </SheetFooter>
+          )
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+
+  if (variant === "quiet") {
+    const total = table.getCoreRowModel().rows.length;
+    const shown = table.getFilteredRowModel().rows.length;
+    return (
+      <div className="flex flex-wrap items-center gap-2">
+        {globalFilterPlaceholder && (
+          <InputGroup className="h-8 w-full pointer-coarse:h-11 sm:w-[220px]">
+            <InputGroupAddon align="inline-start">
+              <Search aria-hidden="true" className="size-4" />
+            </InputGroupAddon>
+            <InputGroupInput
+              aria-label={text.table?.search ?? "ค้นหาข้อมูลในตาราง"}
+              name="table-search"
+              autoComplete="off"
+              placeholder={globalFilterPlaceholder}
+              value={searchDraft}
+              onChange={(event) => setSearchDraft(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") commitSearch(searchDraft);
+              }}
+            />
+            {!!searchDraft && (
+              <InputGroupAddon align="inline-end">
+                <InputGroupButton
+                  variant="ghost"
+                  aria-label={text.table?.clearSearch ?? "ล้างคำค้นหา"}
+                  onClick={() => commitSearch("")}
+                >
+                  <X aria-hidden="true" className="size-4" />
+                </InputGroupButton>
+              </InputGroupAddon>
+            )}
+          </InputGroup>
+        )}
+        {userColumnFilters.map((filter) => {
+          const config = facetedFilters?.find((f) => f.columnId === filter.id);
+          if (!config) return null;
+          const values = Array.isArray(filter.value) ? filter.value : [filter.value];
+          const labels = values
+            .map((val) => {
+              const option = config.options.find((opt) => String(opt.value) === String(val));
+              return option ? option.label : String(val);
+            })
+            .join(", ");
+          const displayed =
+            config.compact && values.length > 1 ? `${values.length} รายการ` : labels;
+          return (
+            <span
+              key={filter.id}
+              className="inline-flex h-7 items-center gap-1.5 rounded-full border bg-muted ps-2.5 pe-1 text-xs"
+            >
+              <span className="text-muted-foreground">{config.title}</span>
+              <b className="font-semibold">{displayed}</b>
+              <button
+                type="button"
+                aria-label={`${(text.table?.clearFilter ?? "ล้างตัวกรอง {name}").replace(
+                  "{name}",
+                  config.title,
+                )}: ${displayed}`}
+                onClick={() => table.getColumn(filter.id)?.setFilterValue(undefined)}
+                className="relative flex size-5 items-center justify-center rounded-full text-muted-foreground outline-none after:absolute after:-inset-3 after:content-[''] hover:bg-foreground/10 focus-visible:ring-3 focus-visible:ring-ring/50"
+              >
+                <X className="size-3" aria-hidden="true" />
+              </button>
+            </span>
+          );
+        })}
+        {renderSheet({
+          side: isMobile ? "bottom" : "right",
+          triggerVariant: "ghost",
+          triggerClassName: "text-muted-foreground pointer-coarse:h-11",
+        })}
+        <div className="ml-auto flex items-center gap-1">
+          <span className="me-1 text-muted-foreground text-xs tabular-nums">
+            {(text.table?.shownOf ?? "{shown} จาก {total} รายการ")
+              .replace("{shown}", String(shown))
+              .replace("{total}", String(total))}
+          </span>
+          {actionsComponent}
+          {onDensityChange && (
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              aria-label={text.table?.density ?? "ความหนาแน่นของแถว"}
+              aria-pressed={density === "compact"}
+              onClick={() => onDensityChange(density === "compact" ? "comfortable" : "compact")}
+              className="max-sm:hidden"
+            >
+              {density === "compact" ? <Rows4 /> : <Rows3 />}
+            </Button>
+          )}
+          <DataTableViewOptions table={table} iconOnly />
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-wrap items-center gap-2">
       <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
@@ -152,49 +341,7 @@ export function DataTableToolbar<TData>({
           {toolbarFilters}
         </div>
 
-        <Sheet>
-          <SheetTrigger render={<Button variant="outline" size="sm" className="xl:hidden" />}>
-            <SlidersHorizontal />
-            ตัวกรอง
-            {activeFilterCount > 0 && (
-              <Badge variant="secondary" className="ml-1 px-1.5 tabular-nums">
-                {activeFilterCount}
-              </Badge>
-            )}
-          </SheetTrigger>
-          <SheetContent
-            side="right"
-            showCloseButton={false}
-            className="w-[min(24rem,calc(100vw-1rem))] sm:max-w-md"
-          >
-            <SheetHeader className="border-b pr-12">
-              <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">{text.table?.closeFilters ?? "ปิดตัวกรอง"}</span>
-              </SheetClose>
-            </SheetHeader>
-            <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto px-4">
-              {renderFilterControls(true)}
-              {toolbarFilters}
-            </div>
-            {isFiltered && (
-              <SheetFooter className="border-t">
-                <Button variant="secondary" onClick={resetUserFilters}>
-                  <X />
-                  ล้างตัวกรองทั้งหมด
-                </Button>
-              </SheetFooter>
-            )}
-          </SheetContent>
-        </Sheet>
+        {renderSheet({ side: "right", triggerVariant: "outline", triggerClassName: "xl:hidden" })}
 
         {isFiltered && (
           <Button variant="secondary" size="sm" onClick={resetUserFilters}>

package/src/components/data-table/data-table-view-option.tsx

@@ -15,16 +15,27 @@ import { Settings2 } from "lucide-react";
 
 interface DataTableViewOptionsProps<TData> {
   table: Table<TData>;
+  /** ปุ่มไอคอนล้วน (`variant="quiet"`) */
+  iconOnly?: boolean;
 }
 
-export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>) {
+export function DataTableViewOptions<TData>({
+  table,
+  iconOnly = false,
+}: DataTableViewOptionsProps<TData>) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger
-        render={<Button variant="outline" size="sm" className="ml-auto hidden h-8 lg:flex" />}
+        render={
+          iconOnly ? (
+            <Button variant="ghost" size="icon-sm" aria-label="View" className="hidden lg:flex" />
+          ) : (
+            <Button variant="outline" size="sm" className="ml-auto hidden h-8 lg:flex" />
+          )
+        }
       >
-        <Settings2 className="mr-2 h-4 w-4" />
-        View
+        <Settings2 className={iconOnly ? undefined : "mr-2 h-4 w-4"} />
+        {!iconOnly && "View"}
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-[150px]">
         <DropdownMenuGroup>

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

@@ -1,5 +1,7 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
+import { SelectionBar } from "@suphark/ui/components/shared/selection-bar";
 import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import {
   TableBody,
@@ -14,7 +16,7 @@ import { flexRender } from "@tanstack/react-table";
 import * as React from "react";
 import { DataTablePagination } from "./data-table-pagination";
 import { DataTableToolbar } from "./data-table-toolbar";
-import type { DataTableProps } from "./types";
+import type { DataTableMobileSlot, DataTableProps } from "./types";
 import { useDataTable } from "./use-data-table";
 
 // ส่วนลากเรียง (dnd-kit) โหลดเฉพาะตารางที่ส่ง onReorder
@@ -80,8 +82,29 @@ export function DataTable<TData, TValue>({
   preservedFilterIds,
   onReorder,
   renderCustomView,
+  variant = "default",
+  defaultDensity = "comfortable",
+  selectionActions,
+  densityStorageKey,
 }: DataTableProps<TData, TValue>) {
   const text = useUiText();
+  const quiet = variant === "quiet";
+  const [density, setDensityState] = React.useState<"comfortable" | "compact">(defaultDensity);
+  // จำความหนาแน่น: อ่านหลัง mount (กัน hydration mismatch) — localStorage ใช้ไม่ได้ก็ข้าม
+  React.useEffect(() => {
+    if (!densityStorageKey) return;
+    try {
+      const saved = localStorage.getItem(densityStorageKey);
+      if (saved === "compact" || saved === "comfortable") setDensityState(saved);
+    } catch {}
+  }, [densityStorageKey]);
+  const setDensity = (next: "comfortable" | "compact") => {
+    setDensityState(next);
+    if (!densityStorageKey) return;
+    try {
+      localStorage.setItem(densityStorageKey, next);
+    } catch {}
+  };
   const { table } = useDataTable({
     columns,
     data,
@@ -231,10 +254,21 @@ export function DataTable<TData, TValue>({
     </UiTable>
   );
 
+  const hasMobileSlots = table
+    .getAllLeafColumns()
+    .some((column) => (column.columnDef.meta as { mobile?: string } | undefined)?.mobile);
+  const mobileList =
+    quiet && hasMobileSlots && !isLoading && table.getRowModel().rows.length > 0 ? (
+      <QuietMobileList table={table} />
+    ) : null;
+
   const customView = renderCustomView?.(table);
 
   return (
-    <div className={cn("flex flex-col gap-4", containerClassName)}>
+    <div
+      data-variant={quiet ? "quiet" : undefined}
+      className={cn("flex flex-col gap-4", containerClassName)}
+    >
       {showToolbar && (
         <DataTableToolbar
           table={table}
@@ -243,6 +277,9 @@ export function DataTable<TData, TValue>({
           globalFilterPlaceholder={globalFilterPlaceholder}
           toolbarFilters={toolbarFilters?.(table)}
           preservedFilterIds={preservedFilterIds}
+          variant={variant}
+          density={density}
+          onDensityChange={setDensity}
         />
       )}
       {customView ? (
@@ -253,12 +290,21 @@ export function DataTable<TData, TValue>({
               table={table}
               pageSizeOptions={pageSizeOptions}
               onPageSizeChange={onPageSizeChange}
+              variant={variant}
             />
           )}
         </>
       ) : (
         <>
-          <div className="overflow-x-auto rounded-lg border bg-card shadow-sm max-sm:-mx-2 max-sm:rounded-none max-sm:border-x-0">
+          {quiet && mobileList}
+          <div
+            data-density={quiet ? density : undefined}
+            className={cn(
+              "overflow-x-auto rounded-lg border bg-card shadow-sm max-sm:-mx-2 max-sm:rounded-none max-sm:border-x-0",
+              quiet && QUIET_TABLE,
+              quiet && mobileList && "max-sm:hidden",
+            )}
+          >
             {onReorder ? (
               // ระหว่างโหลดส่วนลากเรียง แสดงตารางปกติไปก่อน (ลากไม่ได้ชั่วคราว)
               <React.Suspense fallback={renderTable(false)}>
@@ -287,11 +333,274 @@ export function DataTable<TData, TValue>({
                 table={table}
                 pageSizeOptions={pageSizeOptions}
                 onPageSizeChange={onPageSizeChange}
+                variant={variant}
               />
             </div>
           )}
         </>
       )}
+      {quiet &&
+        enableRowSelection !== false &&
+        table.getFilteredSelectedRowModel().rows.length > 0 && (
+          <SelectionBar
+            variant="pill"
+            label={text.table?.selectedPill ?? "{count} รายการ"}
+            count={table.getFilteredSelectedRowModel().rows.length}
+            onClear={() => table.resetRowSelection()}
+          >
+            {selectionActions?.(table)}
+          </SelectionBar>
+        )}
+    </div>
+  );
+}
+
+/** `variant="quiet"`: สไตล์ตารางทั้งก้อนผ่านตัวเลือก CSS (ไม่แตะ markup ของแถว/เซลล์ของแอป) */
+const QUIET_TABLE = [
+  "rounded-xl shadow-none",
+  // หัวตาราง: เรียบ ลูกศรเรียงโผล่เมื่อชี้ (คอลัมน์ที่เรียงอยู่แสดงตลอด)
+  "[&_thead]:bg-muted/40 [&_th]:h-9 [&_th]:font-semibold [&_th]:text-label [&_th]:text-muted-foreground",
+  "[&_[data-sort-idle]]:opacity-0 [&_th:hover_[data-sort-idle]]:opacity-60",
+  // แถว: พื้นตอนชี้ · แถวที่เลือกมีแถบสีซ้าย
+  "[&_tbody_tr]:hover:bg-muted/40",
+  "[&_tbody_tr[data-state=selected]]:bg-primary/[0.07] [&_tbody_tr[data-state=selected]]:shadow-[inset_3px_0_0_var(--primary)]",
+  // ช่องเลือก/ปุ่มท้ายแถว: ซ่อนจนกว่าจะชี้/โฟกัส/เลือก (อุปกรณ์ที่ชี้ไม่ได้เห็นตลอด)
+  "[@media(hover:hover)]:[&_tbody_tr:not(:hover):not(:focus-within):not([data-state=selected])_[role=checkbox]]:opacity-0",
+  "[@media(hover:hover)]:[&_tbody_tr:not(:hover):not(:focus-within)_[data-slot=data-table-row-actions]]:opacity-0",
+  "[&_[role=checkbox]]:transition-opacity [&_[data-slot=data-table-row-actions]]:transition-opacity",
+  // ความหนาแน่น
+  "data-[density=comfortable]:[&_td]:py-2.5 data-[density=compact]:[&_td]:py-1",
+].join(" ");
+
+const SLOT_ORDER: DataTableMobileSlot[] = ["title", "end", "sub", "status", "meta"];
+
+const LONG_PRESS_MS = 500;
+const HINT_KEY = "ui:data-table:long-press-hint";
+
+/** กดค้าง (≥ 500 ms โดยไม่ขยับเกิน 8 px) → เรียก `onLongPress`; `fired` บอกว่า click ถัดไปคือแรงที่ตามหลังการกดค้าง */
+function useLongPress(onLongPress: () => void, enabled: boolean) {
+  const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const origin = React.useRef<{ x: number; y: number } | null>(null);
+  const fired = React.useRef(false);
+  const cancel = () => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+  };
+  React.useEffect(() => cancel, []);
+  const handlers = {
+    onPointerDown: (event: React.PointerEvent) => {
+      // ล้างธงของการกดค้างรอบก่อนทุกครั้งที่เริ่มแตะใหม่ (แม้ปิดการกดค้างอยู่)
+      fired.current = false;
+      cancel();
+      if (!enabled) return;
+      origin.current = { x: event.clientX, y: event.clientY };
+      timer.current = setTimeout(() => {
+        timer.current = null;
+        fired.current = true;
+        onLongPress();
+      }, LONG_PRESS_MS);
+    },
+    onPointerMove: (event: React.PointerEvent) => {
+      const start = origin.current;
+      if (start && Math.hypot(event.clientX - start.x, event.clientY - start.y) > 8) cancel();
+    },
+    onPointerUp: cancel,
+    onPointerCancel: cancel,
+    onPointerLeave: cancel,
+    // เมนูบริบทของเบราว์เซอร์มือถือเด้งตอนกดค้าง — กันไว้เฉพาะช่วงที่เพิ่งกดค้างสำเร็จ
+    onContextMenu: (event: React.MouseEvent) => {
+      if (fired.current) event.preventDefault();
+    },
+  };
+  return { fired, handlers };
+}
+
+/**
+ * `variant="quiet"` บนมือถือ: รายการแถวละ 3 บรรทัดจากคอลัมน์ที่ใส่ `meta.mobile`
+ * ช่องเลือก (คอลัมน์ `select`) ซ่อนจากสายตาจนกว่าจะเลือก — กดค้างที่แถวเพื่อเข้าโหมดเลือกหมู่,
+ * แตะแถวเพื่อสลับ · คีย์บอร์ด/โปรแกรมอ่านจอยังเข้าถึงช่องเลือกได้ตลอด
+ */
+function QuietMobileList<TData>({
+  table,
+}: {
+  table: import("@tanstack/react-table").Table<TData>;
+}) {
+  const text = useUiText();
+  const slotOf = (column: { columnDef: { meta?: unknown } }) =>
+    (column.columnDef.meta as { mobile?: DataTableMobileSlot } | undefined)?.mobile;
+  const rows = table.getRowModel().rows;
+  const selectedCount = table.getFilteredSelectedRowModel().rows.length;
+  const selecting = selectedCount > 0;
+  const hasSelect = table.getAllLeafColumns().some((column) => column.id === "select");
+
+  // บรรทัดบอกใบ้: แสดงครั้งแรกครั้งเดียว (หายเองใน 6 วินาที หรือเมื่อกดค้างสำเร็จ) แล้วจำไว้
+  const [hint, setHint] = React.useState(false);
+  const markHintSeen = React.useCallback(() => {
+    setHint(false);
+    try {
+      localStorage.setItem(HINT_KEY, "1");
+    } catch {}
+  }, []);
+  React.useEffect(() => {
+    if (!hasSelect) return;
+    try {
+      if (localStorage.getItem(HINT_KEY)) return;
+    } catch {}
+    setHint(true);
+    const id = setTimeout(markHintSeen, 6000);
+    return () => clearTimeout(id);
+  }, [hasSelect, markHintSeen]);
+
+  return (
+    <div className="flex flex-col gap-2 sm:hidden">
+      {selecting && (
+        <div
+          role="status"
+          aria-live="polite"
+          className="flex h-11 items-center justify-between px-1 text-sm"
+        >
+          <span className="font-semibold">
+            {(text.table?.selectedCount ?? "เลือก {count} รายการ").replace(
+              "{count}",
+              String(selectedCount),
+            )}
+          </span>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-primary pointer-coarse:h-11"
+            onClick={() => table.toggleAllPageRowsSelected(true)}
+          >
+            {text.table?.selectAll ?? "เลือกทั้งหมด"}
+          </Button>
+        </div>
+      )}
+      <ul className="divide-y overflow-hidden rounded-xl border bg-card">
+        {rows.map((row) => (
+          <QuietMobileRow
+            key={row.id}
+            row={row}
+            selecting={selecting}
+            canLongPress={hasSelect && row.getCanSelect()}
+            slotOf={slotOf}
+            onLongPress={() => {
+              row.toggleSelected(true);
+              markHintSeen();
+              try {
+                navigator.vibrate?.(10);
+              } catch {}
+            }}
+          />
+        ))}
+      </ul>
+      {!selecting && hint && (
+        <p className="text-center text-muted-foreground text-xs">
+          {text.table?.longPressHint ?? "กดค้างที่แถวเพื่อเลือกหมู่"}
+        </p>
+      )}
     </div>
   );
 }
+
+function QuietMobileRow<TData>({
+  row,
+  selecting,
+  canLongPress,
+  slotOf,
+  onLongPress,
+}: {
+  row: import("@tanstack/react-table").Row<TData>;
+  selecting: boolean;
+  canLongPress: boolean;
+  slotOf: (column: { columnDef: { meta?: unknown } }) => DataTableMobileSlot | undefined;
+  onLongPress: () => void;
+}) {
+  const { fired, handlers } = useLongPress(onLongPress, canLongPress && !selecting);
+  const cells = row.getVisibleCells();
+  const pick = (slot: DataTableMobileSlot) => cells.filter((cell) => slotOf(cell.column) === slot);
+  const select = cells.find((cell) => cell.column.id === "select");
+  return (
+    <li
+      data-state={row.getIsSelected() ? "selected" : undefined}
+      {...handlers}
+      onClick={(event) => {
+        // click ที่ตามหลังการกดค้างสำเร็จ ไม่นับเป็นการแตะ (ไม่งั้นเลือกแล้วถูกยกเลิกทันที)
+        if (fired.current) {
+          fired.current = false;
+          return;
+        }
+        if (!selecting || !canLongPress) return;
+        if ((event.target as HTMLElement).closest("a,button,input,[role=checkbox]")) return;
+        row.toggleSelected();
+      }}
+      className={cn(
+        "flex items-start gap-3 px-4 py-2.5 data-[state=selected]:bg-primary/[0.07] data-[state=selected]:shadow-[inset_3px_0_0_var(--primary)]",
+        selecting && "cursor-pointer",
+      )}
+    >
+      {select && (
+        // ขยายพื้นที่แตะเป็น 44px (ช่องติ๊กจริงเล็ก 16px); แตะส่วนที่เกินช่องก็สลับการเลือก
+        // ยังไม่เลือก = ซ่อนจากสายตาแต่ยังโฟกัสด้วยคีย์บอร์ดได้ (sr-only + แสดงตอนโฟกัส)
+        // biome-ignore lint/a11y/useKeyWithClickEvents: คีย์บอร์ดใช้ช่องติ๊กข้างใน
+        // biome-ignore lint/a11y/noStaticElementInteractions: เป็นแค่พื้นที่แตะเสริม
+        <div
+          className={cn(
+            "-m-3.5 -mt-3 shrink-0 p-3.5",
+            !selecting && "sr-only focus-within:not-sr-only",
+          )}
+          onClick={(event) => {
+            if (event.target === event.currentTarget) row.toggleSelected();
+          }}
+        >
+          {flexRender(select.column.columnDef.cell, select.getContext())}
+        </div>
+      )}
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        {SLOT_ORDER.map((slot) => {
+          const found = pick(slot);
+          if (slot === "meta" || found.length === 0) return null;
+          const content = found.map((cell) => (
+            <span key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</span>
+          ));
+          if (slot === "title") {
+            const end = pick("end");
+            return (
+              <div
+                key={slot}
+                className="flex items-baseline justify-between gap-2 font-semibold text-sm"
+              >
+                <span className="min-w-0 truncate">{content}</span>
+                <span className="shrink-0 tabular-nums">
+                  {end.map((cell) => (
+                    <span key={cell.id}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </span>
+                  ))}
+                </span>
+              </div>
+            );
+          }
+          if (slot === "end") return null;
+          if (slot === "sub") {
+            return (
+              <div key={slot} className="truncate text-muted-foreground text-sm">
+                {content}
+              </div>
+            );
+          }
+          const meta = pick("meta");
+          return (
+            <div key={slot} className="flex items-center gap-1.5 text-xs">
+              {content}
+              {meta.map((cell) => (
+                <span key={cell.id} className="text-muted-foreground">
+                  · {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </span>
+              ))}
+            </div>
+          );
+        })}
+      </div>
+    </li>
+  );
+}

package/src/components/data-table/index.ts

@@ -5,5 +5,5 @@ export { DataTableFacetedFilter } from "./data-table-faceted-filter";
 export { DataTablePagination } from "./data-table-pagination";
 export { DataTableToolbar } from "./data-table-toolbar";
 export { DataTableViewOptions } from "./data-table-view-option";
-export type { DataTableProps, FacetedFilterConfig } from "./types";
+export type { DataTableMobileSlot, DataTableProps, FacetedFilterConfig } from "./types";
 export { useDataTable } from "./use-data-table";

package/src/components/data-table/types.ts

@@ -107,4 +107,28 @@ export interface DataTableProps<TData, TValue> {
   pageSizeOptions?: number[];
   onReorder?: (newData: TData[]) => void;
   renderCustomView?: (table: Table<TData>) => React.ReactNode;
+
+  /**
+   * `default` = เหมือนเดิม · `quiet` = "Calm toolbar, dense rows": ตัวกรองรวมเป็นปุ่มเดียว + ชิปที่ลบได้ในบรรทัดเดียวกับช่องค้นหา,
+   * ตัวนับ "N จาก M รายการ" + สลับความหนาแน่น, หัวตารางเรียบ (ลูกศรเรียงโผล่เมื่อชี้), ช่องเลือก/ปุ่มท้ายแถวโผล่เมื่อชี้,
+   * `StatusBadge` ในตารางเป็นจุดสี, แถวที่เลือกมีแถบสีซ้าย, แถบเลือกหมู่เป็นแคปซูล, เลขหน้าย่อ ·
+   * จอ < sm: ถ้ามีคอลัมน์ที่ใส่ `meta.mobile` จะแสดงเป็นรายการแถวละ 3 บรรทัดแทนตาราง (ดู `DataTableMobileSlot`)
+   */
+  variant?: "default" | "quiet";
+  /** `quiet`: ความหนาแน่นเริ่มต้น (ผู้ใช้สลับได้ที่แถบเครื่องมือ) — ค่าเริ่มต้น comfortable */
+  defaultDensity?: "comfortable" | "compact";
+  /**
+   * `quiet`: จำความหนาแน่นที่ผู้ใช้เลือกไว้ใน localStorage ด้วยคีย์นี้ (เช่น `"po-table-density"`) —
+   * ไม่ส่ง = ไม่จำ (กลับเป็น `defaultDensity` ทุกครั้ง) · localStorage ใช้ไม่ได้ก็ทำงานต่อโดยไม่จำ
+   */
+  densityStorageKey?: string;
+  /** `quiet`: ปุ่มคำสั่งในแคปซูลเลือกหมู่ (ส่งออก/ลบ …) — ไม่ส่ง = แคปซูลมีแค่จำนวนที่เลือกและปุ่มล้าง */
+  selectionActions?: (table: Table<TData>) => React.ReactNode;
 }
+
+/**
+ * `variant="quiet"` บนจอ < sm: วางที่ `columnDef.meta = { mobile: "title" }` — ชื่อบรรทัดแรกซ้าย · `end` ยอด/ตัวเลข บรรทัดแรกขวา ·
+ * `sub` บรรทัดรอง · `status` บรรทัดสถานะ (ต่อท้ายด้วย `meta`) · `meta` ข้อความเล็กต่อท้ายสถานะ · `hidden` ไม่แสดงบนมือถือ
+ * ไม่ประกาศ slot ใดเลย = แสดงตารางเลื่อนแนวนอนเหมือนเดิม
+ */
+export type DataTableMobileSlot = "title" | "end" | "sub" | "status" | "meta" | "hidden";

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

@@ -1,12 +1,18 @@
 "use client";
 
 import { cn } from "@suphark/ui/lib/utils";
-import { Loader2, RefreshCw } from "lucide-react";
+import { ArrowDown, Loader2, RefreshCw } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 
-const ACTIVATION_DISTANCE = 72;
-const MAX_PULL_DISTANCE = 112;
+/** ระยะเริ่มทำงาน / สูงสุด / แรงต้าน (px) ต่อแบบ — circle ดึงสั้นกว่า หนักมือกว่า */
+const DIMS = {
+  pill: { activation: 72, max: 112, resistance: 0.62 },
+  circle: { activation: 64, max: 104, resistance: 0.5 },
+} as const;
+/** circle: ขนาดวงและที่พักใต้ขอบบนของ root ตอนกำลังรีเฟรช */
+const CIRCLE_SIZE = 40;
+const CIRCLE_REST = 16;
 const MOBILE_BREAKPOINT = 768;
 /** หมุนอย่างน้อยเท่านี้ — refresh ที่เสร็จทันทีจะไม่กะพริบหายไปเลย */
 const MIN_SPIN_MS = 500;
@@ -43,11 +49,17 @@ export function PullToRefresh({
   text = PULL_TO_REFRESH_TEXT_TH,
   rootSelector = "[data-pull-to-refresh-root]",
   onRefresh,
+  variant = "pill",
 }: {
   text?: PullToRefreshText;
   rootSelector?: string;
   /** รีเฟรชเอง (คืน promise = หมุนจนเสร็จ) — ไม่ส่ง = `router.refresh()` แล้วหมุน 700ms */
   onRefresh?: () => Promise<unknown> | void;
+  /**
+   * `pill` (ค่าเริ่มต้น) = แคปซูลมีข้อความ · `circle` = วงกลม 40px ไอคอนล้วน (ลูกศร → หมุน) อยู่กลาง พักที่ 16px ใต้ขอบบนของ root
+   * ข้อความยังอยู่เป็น `sr-only` + `role="status"` สำหรับ screen reader
+   */
+  variant?: "pill" | "circle";
 }) {
   const router = useRouter();
   const onRefreshRef = useRef(onRefresh);
@@ -64,6 +76,7 @@ export function PullToRefresh({
   isRefreshingRef.current = isRefreshing;
 
   useEffect(() => {
+    const dims = DIMS[variant];
     const isRefreshing = () => isRefreshingRef.current;
     const isMobileViewport = () => window.innerWidth < MOBILE_BREAKPOINT;
     const getRoot = () => document.querySelector<HTMLElement>(rootSelector);
@@ -125,11 +138,11 @@ export function PullToRefresh({
         isPullingRef.current = true;
       }
       event.preventDefault();
-      setPullDistance(Math.min(MAX_PULL_DISTANCE, deltaY * 0.62));
+      setPullDistance(Math.min(dims.max, deltaY * dims.resistance));
     };
 
     const handleTouchEnd = async () => {
-      const shouldRefresh = pullDistanceRef.current >= ACTIVATION_DISTANCE;
+      const shouldRefresh = pullDistanceRef.current >= dims.activation;
       resetPull();
       if (!shouldRefresh || isRefreshing()) return;
       isRefreshingRef.current = true;
@@ -182,12 +195,44 @@ export function PullToRefresh({
       window.removeEventListener("touchend", handleTouchEnd);
       window.removeEventListener("touchcancel", resetPull);
     };
-  }, [router, rootSelector]);
+  }, [router, rootSelector, variant]);
 
   const isVisible = pullDistance > 0 || isRefreshing;
-  const progress = Math.min(1, pullDistance / ACTIVATION_DISTANCE);
+  const progress = Math.min(1, pullDistance / DIMS[variant].activation);
   const label = isRefreshing ? text.refreshing : progress >= 1 ? text.release : text.pull;
 
+  if (variant === "circle") {
+    const armed = !isRefreshing && progress >= 1;
+    return (
+      <div
+        role="status"
+        aria-live="polite"
+        className={cn(
+          "pointer-events-none fixed left-1/2 z-50 flex size-10 items-center justify-center rounded-full border bg-background text-muted-foreground shadow-md md:hidden",
+          pullDistance === 0 && "transition-[transform,opacity] duration-200 ease-out",
+          armed && "text-primary",
+        )}
+        style={{
+          top: rootTop - CIRCLE_SIZE,
+          marginLeft: -CIRCLE_SIZE / 2,
+          opacity: isRefreshing ? 1 : pullDistance > 0 ? Math.max(0.35, progress) : 0,
+          transform: `translateY(${isRefreshing ? CIRCLE_REST + CIRCLE_SIZE : pullDistance}px) scale(${isVisible ? 0.7 + 0.3 * progress : 0.6})`,
+        }}
+      >
+        {isRefreshing ? (
+          <Loader2 className="size-5 animate-spin text-primary" aria-hidden="true" />
+        ) : (
+          <ArrowDown
+            className="size-5 transition-transform duration-150"
+            style={{ transform: `rotate(${armed ? 180 : 0}deg)` }}
+            aria-hidden="true"
+          />
+        )}
+        <span className="sr-only">{isVisible ? label : ""}</span>
+      </div>
+    );
+  }
+
   return (
     <div
       aria-live="polite"

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

@@ -109,11 +109,14 @@ export function SwitchField({
   label,
   hint,
   className,
+  labelClassName,
   ...props
 }: ComponentProps<typeof Switch> & {
   label: ReactNode;
   /** คำอธิบายใต้ label (เยื้องตรงกับ label) */
   hint?: ReactNode;
+  /** ทับสไตล์ข้อความป้าย (ค่าเริ่มต้น `text-sm`) เช่น `text-caption font-semibold` */
+  labelClassName?: string;
 }) {
   return (
     <Label
@@ -125,7 +128,7 @@ export function SwitchField({
     >
       <Switch className={cn(hint && "mt-0.5")} {...props} />
       <span className="flex flex-col gap-0.5">
-        <span className="text-sm">{label}</span>
+        <span className={cn("text-sm", labelClassName)}>{label}</span>
         {hint && <span className="text-muted-foreground text-xs">{hint}</span>}
       </span>
     </Label>

package/src/components/shared/notification-center.tsx

@@ -122,6 +122,8 @@ export interface NotificationCenterProps {
   description?: ReactNode;
   /** ไม่มีรายการ — ส่ง element เองได้ทั้งก้อน */
   empty?: ReactNode;
+  /** ปุ่มคำสั่งของทั้งกล่องที่หัว เช่น "อ่านทั้งหมดแล้ว" (ซ้ายของ "ดูทั้งหมด") — ไม่ต้องยืม `viewAll` มาใช้ผิดความหมาย */
+  headerAction?: ReactNode;
   /** ลิงก์/ปุ่ม "ดูทั้งหมด" มุมขวาบน */
   viewAll?: { label?: ReactNode; onSelect: () => void };
   /** กำลังทำคำสั่งลัดอยู่ — ปิดปุ่มทั้งหมดกันกดซ้ำ */
@@ -159,6 +161,7 @@ export function NotificationCenter({
   description,
   empty,
   viewAll,
+  headerAction,
   busy = false,
   variant = "card",
   renderItem,
@@ -186,11 +189,16 @@ export function NotificationCenter({
             </div>
           )}
         </div>
-        {viewAll && (
-          <Button variant="ghost" size="sm" onClick={viewAll.onSelect} className="shrink-0">
-            {viewAll.label ?? text.notifications?.viewAll ?? "ดูทั้งหมด"}
-            <ChevronRightIcon />
-          </Button>
+        {(headerAction || viewAll) && (
+          <div className="flex shrink-0 items-center gap-1">
+            {headerAction}
+            {viewAll && (
+              <Button variant="ghost" size="sm" onClick={viewAll.onSelect} className="shrink-0">
+                {viewAll.label ?? text.notifications?.viewAll ?? "ดูทั้งหมด"}
+                <ChevronRightIcon />
+              </Button>
+            )}
+          </div>
         )}
       </div>
 

package/src/components/shared/selection-bar.tsx

@@ -67,12 +67,20 @@ export function SelectionBar({
           ? "h-11 rounded-full bg-primary py-0 ps-4 pe-2 text-primary-foreground"
           : "rounded-xl border bg-card",
         variant !== "inline" &&
-          "-translate-x-1/2 fixed bottom-[calc(1rem+env(safe-area-inset-bottom))] left-1/2 z-40 max-w-[calc(100vw-2rem)]",
+          "-translate-x-1/2 fixed bottom-[calc(1rem+env(safe-area-inset-bottom))] left-1/2 z-40 w-max max-w-[calc(100vw-2rem)]",
         className,
       )}
     >
       <span className="shrink-0 font-medium text-sm tabular-nums">{message}</span>
-      <div className="flex min-w-0 flex-wrap items-center gap-1.5">
+      <div
+        className={cn(
+          "flex min-w-0 items-center gap-1.5",
+          // pill: บรรทัดเดียวเสมอ ปุ่มไม่ตัดคำ และปุ่มที่แอปส่งมาใช้สีตัวอักษรบนพื้นสีหลัก
+          pill
+            ? "[&_button]:whitespace-nowrap [&_button]:text-primary-foreground [&_button]:hover:bg-primary-foreground/15 pointer-coarse:[&_button]:h-11"
+            : "flex-wrap",
+        )}
+      >
         {actions?.map((action) => (
           <Button
             key={action.label}
@@ -98,6 +106,7 @@ export function SelectionBar({
         onClick={onClear}
         className={cn(
           "ml-auto shrink-0",
+          pill && "pointer-coarse:h-11 pointer-coarse:w-11",
           pill && "rounded-full hover:bg-primary-foreground/15 hover:text-primary-foreground",
         )}
       >

package/src/components/shared/ui-text.tsx

@@ -81,6 +81,18 @@ export interface UiText {
   table?: Partial<{
     rowsPerPage: string;
     pageOf: string;
+    /** `variant="quiet"` — `{from}`/`{to}`/`{total}` และ `{shown}`/`{total}` */
+    rangeOf: string;
+    shownOf: string;
+    density: string;
+    /** `variant="quiet"` มือถือ — `{count}` */
+    selectedCount: string;
+    /** ข้อความในแคปซูลเลือกหมู่ (สั้นกว่า `selectedCount` เพราะหัวรายการมือถือบอก "เลือก N รายการ" อยู่แล้ว) */
+    selectedPill: string;
+    selectAll: string;
+    longPressHint: string;
+    clearFilters: string;
+    showResults: string;
     rowsSelected: string;
     noResults: string;
     deleteTitle: string;
@@ -316,6 +328,15 @@ export const UI_TEXT_TH: UiText = {
   table: {
     rowsPerPage: "แถวต่อหน้า",
     pageOf: "หน้า {page} จาก {pages}",
+    rangeOf: "{from}–{to} จาก {total}",
+    shownOf: "{shown} จาก {total} รายการ",
+    density: "ความหนาแน่นของแถว",
+    selectedCount: "เลือก {count} รายการ",
+    selectedPill: "{count} รายการ",
+    selectAll: "เลือกทั้งหมด",
+    longPressHint: "กดค้างที่แถวเพื่อเลือกหมู่",
+    clearFilters: "ล้าง",
+    showResults: "ดู {count} รายการ",
     rowsSelected: "เลือก {selected} จาก {total} แถว",
     noResults: "ไม่พบข้อมูล",
     deleteTitle: "ยืนยันการลบ",
@@ -530,6 +551,15 @@ export const UI_TEXT_EN: UiText = {
   table: {
     rowsPerPage: "Rows per page",
     pageOf: "Page {page} of {pages}",
+    rangeOf: "{from}–{to} of {total}",
+    shownOf: "{shown} of {total} items",
+    density: "Row density",
+    selectedCount: "{count} selected",
+    selectedPill: "{count} items",
+    selectAll: "Select all",
+    longPressHint: "Press and hold a row to select several",
+    clearFilters: "Clear",
+    showResults: "Show {count} items",
     rowsSelected: "{selected} of {total} row(s) selected",
     noResults: "No results",
     deleteTitle: "Are you sure?",

package/src/data-table.ts

@@ -12,6 +12,7 @@ export {
   DataTableColumnHeader,
   DataTableDateRangeFilter,
   DataTableFacetedFilter,
+  type DataTableMobileSlot,
   DataTablePagination,
   type DataTableProps,
   DataTableToolbar,

package/src/hooks/use-mobile.ts

@@ -8,12 +8,14 @@ export function useIsMobile() {
   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
 
   React.useEffect(() => {
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    // เบราว์เซอร์เก่า/jsdom ที่ไม่มี matchMedia: ใช้ค่าตอน mount อย่างเดียว (ไม่ติดตามการปรับขนาด) แทนที่จะพังทั้งหน้า
+    if (typeof window.matchMedia !== "function") return;
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
     };
     mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
     return () => mql.removeEventListener("change", onChange);
   }, []);