@suphark/ui 0.45.2 → 0.53.0

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

@@ -89,8 +89,14 @@ export interface NotificationEntry {
   details?: ReactNode;
   /** ซ้ายของแถบล่าง — เรื่องเฉพาะโดเมน เช่นยอดเงิน (ซ่อนได้) หรือความคืบหน้ารอบ */
   footer?: ReactNode;
+  /** `variant="quiet"`: เน้นแถวที่ต้องจัดการก่อน (พื้นสี accent/tone จาง ๆ) — ปกติใช้แถวเดียว */
+  highlight?: boolean;
+  /** `variant="quiet"`: แถบความคืบหน้า 0–100 ใต้ยอด (`footer`) */
+  progress?: number;
   /** ยังไม่ได้อ่าน — จุดหน้าชื่อ + พื้นจาง */
   unread?: boolean;
+  /** หัวข้อกลุ่มคั่น (`variant="quiet"`) — แถวติดกันที่ `section` เดียวกันอยู่ใต้หัวเดียว เช่น "ต้องจัดการก่อน" */
+  section?: string;
   /** ปุ่มในแถว (ปุ่มที่ `primary` จะเด่นสุด) */
   actions?: ReadonlyArray<NotificationAction>;
   /** คำสั่งรองใน "…" */
@@ -120,6 +126,11 @@ export interface NotificationCenterProps {
   viewAll?: { label?: ReactNode; onSelect: () => void };
   /** กำลังทำคำสั่งลัดอยู่ — ปิดปุ่มทั้งหมดกันกดซ้ำ */
   busy?: boolean;
+  /**
+   * `card` (ค่าเริ่มต้น) = ชิปนับ + การ์ดแยกใบ · `quiet` = "Quiet ledger": ชิปนับเป็นแท็บขีดเส้นใต้ (ตัวเลข tone danger เป็นสีแดง)
+   * รายการเป็นแถวเรียบในกรอบเดียว (`RecordCard variant="quiet"`) มีหัวกลุ่มคั่นด้วย `section` — เห็นได้มากกว่าเท่าตัว
+   */
+  variant?: "card" | "quiet";
   /**
    * เรนเดอร์แถวเอง (การ์ดของแอป) — ปกติไม่ต้องใช้: แถวมาตรฐานคือ `RecordCard` ตัวเดียวกับที่แอปใช้ทำรายการ
    * อยู่แล้ว · คืน node ที่จะอยู่ใน `<li>`
@@ -149,9 +160,11 @@ export function NotificationCenter({
   empty,
   viewAll,
   busy = false,
+  variant = "card",
   renderItem,
   className,
 }: NotificationCenterProps) {
+  const quiet = variant === "quiet";
   const text = useUiText();
   const heading = title ?? text.notifications?.title ?? "การแจ้งเตือน";
 
@@ -165,7 +178,7 @@ export function NotificationCenter({
         <div className="flex min-w-0 flex-col gap-1.5">
           <Heading className={cn("font-semibold text-sm", headingClassName)}>{heading}</Heading>
           {description && <p className="text-muted-foreground text-xs">{description}</p>}
-          {counts && counts.length > 0 && (
+          {counts && counts.length > 0 && !quiet && (
             <div className="flex flex-wrap items-center gap-1.5">
               {counts.map((chip) => (
                 <CountChip key={chip.key} chip={chip} />
@@ -181,6 +194,8 @@ export function NotificationCenter({
         )}
       </div>
 
+      {quiet && counts && counts.length > 0 && <QuietTabs counts={counts} />}
+
       {items.length === 0 ? (
         (empty ?? (
           <div className="flex flex-col items-center gap-1 py-8 text-center">
@@ -191,16 +206,31 @@ export function NotificationCenter({
           </div>
         ))
       ) : (
-        <ul className="flex flex-col gap-2">
-          {items.map((item) =>
-            renderItem ? (
-              <li key={item.id} data-slot="notification-row" className="min-w-0">
-                {renderItem(item, { busy })}
-              </li>
-            ) : (
-              <NotificationRow key={item.id} item={item} busy={busy} />
-            ),
+        <ul
+          className={cn(
+            "flex flex-col",
+            quiet ? "overflow-hidden rounded-xl border bg-card" : "gap-2",
           )}
+        >
+          {items.map((item, index) => (
+            <Fragment key={item.id}>
+              {quiet && item.section && item.section !== items[index - 1]?.section && (
+                <li
+                  role="presentation"
+                  className="border-b bg-muted px-3.5 pt-2 pb-1.5 font-semibold text-muted-foreground text-xs not-first:border-t"
+                >
+                  {item.section}
+                </li>
+              )}
+              {renderItem ? (
+                <li data-slot="notification-row" className="min-w-0">
+                  {renderItem(item, { busy })}
+                </li>
+              ) : (
+                <NotificationRow item={item} busy={busy} quiet={quiet} />
+              )}
+            </Fragment>
+          ))}
         </ul>
       )}
     </section>
@@ -230,12 +260,70 @@ function CountChip({ chip }: { chip: NotificationChip }) {
   );
 }
 
-function NotificationRow({ item, busy }: { item: NotificationEntry; busy: boolean }) {
+/** แท็บนับแบบขีดเส้นใต้ (`variant="quiet"`) — ตัวเลขของ tone danger เป็นสีแดงตัวหนา */
+function QuietTabs({ counts }: { counts: ReadonlyArray<NotificationChip> }) {
+  return (
+    <div className="flex flex-wrap gap-x-5 border-b">
+      {counts.map((chip) => {
+        const body = (
+          <>
+            {chip.label}
+            <span
+              className={cn(
+                "ms-1 text-xs tabular-nums",
+                isDanger(chip.tone) ? "font-bold text-destructive" : "text-muted-foreground",
+              )}
+            >
+              {chip.count}
+            </span>
+          </>
+        );
+        const tab = cn(
+          "-mb-px border-b-2 px-0.5 pt-2 pb-2.5 text-sm",
+          chip.active
+            ? "border-primary font-semibold"
+            : "border-transparent font-medium text-muted-foreground",
+        );
+        return chip.onSelect ? (
+          <button
+            key={chip.key}
+            type="button"
+            aria-pressed={chip.active ?? false}
+            onClick={chip.onSelect}
+            className={cn(
+              tab,
+              "cursor-pointer outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
+            )}
+          >
+            {body}
+          </button>
+        ) : (
+          <span key={chip.key} className={tab}>
+            {body}
+          </span>
+        );
+      })}
+    </div>
+  );
+}
+
+function NotificationRow({
+  item,
+  busy,
+  quiet,
+}: {
+  item: NotificationEntry;
+  busy: boolean;
+  quiet: boolean;
+}) {
   const text = useUiText();
   const hasActions = Boolean(item.actions?.length || item.menuActions?.length);
   return (
     <RecordCard
       as="li"
+      variant={quiet ? "quiet" : "card"}
+      highlight={item.highlight}
+      progress={item.progress}
       accent={item.accent ?? item.tone}
       icon={item.icon}
       title={item.title}

package/src/components/shared/record-card.tsx

@@ -32,6 +32,16 @@ export function recordAccentColor(accent: RecordAccent | undefined): string | un
 }
 
 export interface RecordCardProps {
+  /**
+   * `card` (ค่าเริ่มต้น) = การ์ดมีสี/ขอบ/พื้นไล่สีครบ · `quiet` = แถวเรียบแบบสมุดบัญชี ("Quiet ledger"):
+   * ไม่มีกรอบ/พื้นสี เส้นคั่นล่างบาง ๆ สีของ `accent` เหลือแค่ไอคอน · ชื่อ + (status · meta) ซ้าย, `footerSummary` (ยอดเงิน) ขวา,
+   * `actions` ท้ายแถว — ยัดได้มากกว่าเท่าตัวในที่เท่ากัน · วางในกรอบ/`<ul>` เดียวกัน (เส้นคั่นล่างของแถวสุดท้ายหายเอง)
+   */
+  variant?: "card" | "quiet";
+  /** `quiet` เท่านั้น: เน้นแถวที่ต้องจัดการก่อน — พื้นไล่เป็นสีของ `accent` จางมาก (ใช้ตัวเดียวต่อรายการ ไม่ใช่ทุกแถว) */
+  highlight?: boolean;
+  /** `quiet` เท่านั้น: แถบความคืบหน้า 0–100 ใต้ `footerSummary` (เช่นรอบที่ทำแล้ว 35/60 = 58) */
+  progress?: number;
   /** สีประจำการ์ด: ขอบซ้าย 3px + ขอบจาง ๆ + พื้นไล่สีจากซ้าย — tone หรือสี CSS (`var(--type-income)`) */
   accent?: RecordAccent;
   /** ไอคอน — ใส่ในกรอบสี่เหลี่ยมมนตามสี accent ให้เอง (`iconTile={false}` = วางตามที่ส่งมา) */
@@ -96,10 +106,23 @@ export function RecordCard({
   unread = false,
   onSelect,
   as: Root = "article",
+  variant = "card",
+  highlight = false,
+  progress,
   className,
 }: RecordCardProps) {
   const text = useUiText();
   const color = recordAccentColor(accent);
+  if (variant === "quiet") {
+    return (
+      <QuietRecord
+        {...{ Root, Title, color, icon, title, titleClassName, status, meta, description }}
+        {...{ details, detailsLabel, footerSummary, actions, unread, onSelect, className }}
+        {...{ highlight, progress }}
+        fallbackDetailsLabel={text.record?.details ?? "ข้อมูลเพิ่มเติม"}
+      />
+    );
+  }
   const small = iconSize === "sm";
   // เยื้อง = ความกว้างไอคอน + gap-3 (44+12 = 56 = ml-14, 36+12 = 48 = ml-12)
   const indent = icon ? (small ? "ml-12 ps-0" : "ml-14 ps-0") : "";
@@ -203,3 +226,138 @@ export function RecordCard({
     </Root>
   );
 }
+
+/** variant="quiet": แถวเดียวต่อรายการ — ไอคอน | ชื่อ + (สถานะ · meta) | ยอด | ปุ่ม */
+function QuietRecord({
+  Root,
+  Title,
+  color,
+  icon,
+  title,
+  titleClassName,
+  status,
+  meta,
+  description,
+  details,
+  detailsLabel,
+  fallbackDetailsLabel,
+  footerSummary,
+  actions,
+  unread,
+  onSelect,
+  highlight,
+  progress,
+  className,
+}: Pick<
+  RecordCardProps,
+  | "icon"
+  | "title"
+  | "titleClassName"
+  | "status"
+  | "meta"
+  | "description"
+  | "details"
+  | "detailsLabel"
+  | "footerSummary"
+  | "actions"
+  | "unread"
+  | "onSelect"
+  | "highlight"
+  | "progress"
+  | "className"
+> & {
+  Root: "article" | "li" | "div";
+  Title: "h2" | "h3" | "h4" | "p";
+  color: string | undefined;
+  fallbackDetailsLabel: string;
+}) {
+  return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: คลิกทั้งแถวเป็นทางลัดของเมาส์ ปุ่มข้างในใช้คีย์บอร์ดได้อยู่แล้ว
+    <Root
+      data-slot="record-card"
+      data-variant="quiet"
+      data-unread={unread || undefined}
+      onClick={onSelect}
+      style={color ? ({ "--record-accent": color } as CSSProperties) : undefined}
+      className={cn(
+        "min-w-0 border-b bg-transparent px-3.5 py-2.5 text-card-foreground last:border-b-0",
+        unread && "bg-muted/40",
+        highlight && color && "bg-[color-mix(in_oklab,var(--record-accent)_9%,var(--card))]",
+        onSelect && "cursor-pointer transition-colors hover:bg-muted/60",
+        className,
+      )}
+    >
+      <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2">
+        {icon && (
+          <div
+            data-slot="record-card-icon"
+            className={cn(
+              "flex size-9 shrink-0 items-center justify-center rounded-[10px] bg-muted [&_svg]:size-[1.125rem]",
+              color ? "text-(--record-accent)" : "text-muted-foreground",
+            )}
+          >
+            {icon}
+          </div>
+        )}
+        <div className="min-w-0 flex-1 basis-48">
+          <Title className={cn("truncate font-semibold text-sm leading-snug", titleClassName)}>
+            {unread && (
+              <span
+                className="me-1.5 inline-block size-1.5 rounded-full bg-primary align-middle"
+                aria-hidden="true"
+              />
+            )}
+            {title}
+          </Title>
+          {(status != null || meta != null) && (
+            <div className="mt-0.5 flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-0.5 text-muted-foreground text-xs">
+              {status}
+              {status != null && meta != null && <span aria-hidden="true">·</span>}
+              {meta}
+            </div>
+          )}
+          {description != null && (
+            <p className="mt-0.5 text-muted-foreground text-xs">{description}</p>
+          )}
+        </div>
+        {footerSummary != null && (
+          <div className="min-w-24 shrink-0 text-end tabular-nums">
+            {footerSummary}
+            {progress != null && (
+              <div
+                role="progressbar"
+                aria-valuenow={progress}
+                aria-valuemin={0}
+                aria-valuemax={100}
+                className="mt-1 h-[3px] overflow-hidden rounded-full bg-muted"
+              >
+                <div
+                  className="h-full rounded-full bg-info"
+                  style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}
+                />
+              </div>
+            )}
+          </div>
+        )}
+        {actions != null && (
+          // biome-ignore lint/a11y/noStaticElementInteractions: ตัวกั้นคลิกเฉย ๆ ไม่ใช่ตัวควบคุม
+          <div
+            className="flex shrink-0 items-center gap-1.5"
+            onClick={(event: MouseEvent) => event.stopPropagation()}
+            onKeyDown={(event: KeyboardEvent) => event.stopPropagation()}
+          >
+            {actions}
+          </div>
+        )}
+      </div>
+      {details != null && (
+        <section
+          aria-label={detailsLabel ?? fallbackDetailsLabel}
+          className={cn("mt-2 border-t pt-2", icon && "ms-12")}
+        >
+          {details}
+        </section>
+      )}
+    </Root>
+  );
+}

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

@@ -24,8 +24,11 @@ export interface SelectionBarProps {
   children?: ReactNode;
   /** ข้อความนับ ใช้ `{count}` เช่น "เลือก {count} รายการ" (ไม่ส่ง = `UiText.selection.selected`) */
   label?: string;
-  /** floating = แถบลอยกลางล่างจอ (ค่าเริ่มต้น) · inline = แถบในหน้า เหนือตาราง */
-  variant?: "floating" | "inline";
+  /**
+   * floating = แถบลอยกลางล่างจอ (ค่าเริ่มต้น) · inline = แถบในหน้า เหนือตาราง ·
+   * pill = แคปซูลสีหลักลอยกลางล่างจอ (กลับสีเข้ม เด่นกว่า floating, ปุ่มโปร่งบนพื้นสีหลัก)
+   */
+  variant?: "floating" | "inline" | "pill";
   className?: string;
 }
 
@@ -48,6 +51,7 @@ export function SelectionBar({
 }: SelectionBarProps) {
   const text = useUiText();
   if (count <= 0) return null;
+  const pill = variant === "pill";
 
   const template = label ?? text.selection?.selected ?? "เลือก {count} รายการ";
   const message = template.replace("{count}", String(count));
@@ -58,8 +62,11 @@ export function SelectionBar({
       // อ่านออกเสียงจำนวนที่เลือกให้ screen reader โดยไม่ขัดจังหวะ
       aria-live="polite"
       className={cn(
-        "flex items-center gap-2 rounded-xl border bg-card px-3 py-2 shadow-lg",
-        variant === "floating" &&
+        "flex items-center gap-2 px-3 py-2 shadow-lg",
+        pill
+          ? "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)]",
         className,
       )}
@@ -70,7 +77,11 @@ export function SelectionBar({
           <Button
             key={action.label}
             size="sm"
-            variant={action.destructive ? "destructive" : "outline"}
+            variant={pill ? "ghost" : action.destructive ? "destructive" : "outline"}
+            className={cn(
+              pill && "rounded-full hover:bg-primary-foreground/15 hover:text-primary-foreground",
+              pill && action.destructive && "text-primary-foreground",
+            )}
             disabled={action.disabled}
             onClick={action.onClick}
           >
@@ -85,7 +96,10 @@ export function SelectionBar({
         size="icon-sm"
         aria-label={text.selection?.clear ?? "ล้างการเลือก"}
         onClick={onClear}
-        className="ml-auto shrink-0"
+        className={cn(
+          "ml-auto shrink-0",
+          pill && "rounded-full hover:bg-primary-foreground/15 hover:text-primary-foreground",
+        )}
       >
         <XIcon />
       </Button>

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

@@ -12,13 +12,27 @@ const TONE: Record<Tone, string> = {
   info: "border-info-border bg-info-subtle text-info-subtle-foreground",
 };
 
-/** Badge ของ shadcn (variant outline) + สีตามความหมายของสถานะ */
+/**
+ * Badge ของ shadcn (variant outline) + สีตามความหมายของสถานะ
+ * อยู่ใน `RecordCard variant="quiet"` (data-variant="quiet") จะกลายเป็น "จุดสี + ข้อความสี" ไม่มีกรอบ/พื้น อัตโนมัติ
+ */
 export function StatusBadge({
   tone = "neutral",
   className,
   ...props
 }: Omit<ComponentProps<typeof Badge>, "variant"> & { tone?: Tone }) {
-  return <Badge variant="outline" className={cn(TONE[tone], className)} {...props} />;
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        TONE[tone],
+        "in-data-[variant=quiet]:h-auto in-data-[variant=quiet]:border-transparent in-data-[variant=quiet]:bg-transparent in-data-[variant=quiet]:px-0 in-data-[variant=quiet]:py-0 in-data-[variant=quiet]:font-semibold",
+        "in-data-[variant=quiet]:before:size-1.5 in-data-[variant=quiet]:before:shrink-0 in-data-[variant=quiet]:before:rounded-full in-data-[variant=quiet]:before:bg-current in-data-[variant=quiet]:before:content-['']",
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 /** สถานะที่ใช้บ่อยในระบบ → tone */

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

@@ -204,6 +204,15 @@ export interface UiText {
     helpRange: string;
     helpRangeShortcut: string;
     pickEnd: string;
+    /** ช่องพิมพ์ (0.49.0) — `{example}` = ตัวอย่างที่พิมพ์ได้, `{count}` = จำนวนวัน */
+    cannotRead: string;
+    shortcutsLabel: string;
+    showAll: string;
+    backToCalendar: string;
+    openCalendar: string;
+    dayCount: string;
+    allShortcuts: string;
+    tapToFill: string;
     last7Days: string;
     last30Days: string;
     thisMonth: string;
@@ -401,6 +410,14 @@ export const UI_TEXT_TH: UiText = {
     helpRange: "1–5 ก.ค.",
     helpRangeShortcut: "ช่วงจากตัวย่อ (คั่นด้วย .. ~ ถึง to)",
     pickEnd: "เลือกวันสุดท้ายของช่วง",
+    cannotRead: "อ่านไม่ออก — ลองพิมพ์ {example}",
+    shortcutsLabel: "พิมพ์ลัด",
+    showAll: "ทั้งหมด",
+    backToCalendar: "ปฏิทิน",
+    openCalendar: "เปิดปฏิทิน",
+    dayCount: "{count} วัน",
+    allShortcuts: "พิมพ์ลัดทั้งหมด",
+    tapToFill: "กดเพื่อเติมในช่อง",
     last7Days: "7 วันล่าสุด",
     last30Days: "30 วันล่าสุด",
     thisMonth: "เดือนนี้",
@@ -604,6 +621,14 @@ export const UI_TEXT_EN: UiText = {
     helpRange: "1–5 Jul",
     helpRangeShortcut: "Range from shortcuts (separate with .. ~ to)",
     pickEnd: "Pick the last day of the range",
+    cannotRead: "Can't read that — try {example}",
+    shortcutsLabel: "Shortcuts",
+    showAll: "All",
+    backToCalendar: "Calendar",
+    openCalendar: "Open calendar",
+    dayCount: "{count} days",
+    allShortcuts: "All shortcuts",
+    tapToFill: "Tap to fill the field",
     last7Days: "Last 7 days",
     last30Days: "Last 30 days",
     thisMonth: "This month",

package/src/components/sortable/sortable-list.tsx

@@ -153,8 +153,6 @@ interface SortableState {
   selected: ReadonlySet<string>;
   select: (id: string, mode: SelectMode) => void;
   groupOf: (itemId: string) => string | undefined;
-  /** แถวรายการอยู่ใน node ของกลุ่มเองไหม (กลุ่มเป็น <tbody> ทั้งก้อน) — ถ้าใช่ เลื่อนตามพ่ออยู่แล้ว */
-  insideGroup: (itemId: string, groupId: string) => boolean;
   register: (kind: SortableKind, id: string, node: HTMLElement | null) => void;
   shifts: ShiftStore;
 }
@@ -173,7 +171,6 @@ const SortableStateContext = createContext<SortableState>({
   selected: EMPTY,
   select: () => {},
   groupOf: () => undefined,
-  insideGroup: () => false,
   register: () => {},
   shifts: createShiftStore(),
 });
@@ -399,14 +396,16 @@ export function SortableProvider({
     } else map.delete(rowId);
   }, []);
 
-  /** กรอบของทั้งก้อน: หัวกลุ่ม + แถวรายการที่แสดงอยู่ (ไม่สนใจ transform ระหว่างลาก) */
+  /**
+   * กรอบของทั้งก้อน: หัวกลุ่ม + แถวรายการที่แสดงอยู่ (ไม่สนใจ transform ระหว่างลาก)
+   * หัวกลุ่มกับแถวรายการต้องเป็นพี่น้องกัน (`<tr>` ใน `<tbody>` เดียวกัน / การ์ดในลิสต์เดียวกัน)
+   * ห้ามให้ node ของกลุ่มครอบแถวรายการไว้ ไม่งั้นกรอบนี้นับซ้ำและแถวลูกจะเลื่อนสองชั้น
+   */
   const blockRect = useCallback((groupId: string, header: HTMLElement) => {
     let { top, bottom, left, right } = getClientRect(header, { ignoreTransform: true });
     for (const itemId of latest.current.items[groupId] ?? []) {
       const node = nodes.current.items.get(itemId);
-      // แถวที่อยู่ "ใน" node ของกลุ่มเอง (แอปแปะ ref กลุ่มที่ <tbody>) — กรอบของกลุ่มครอบอยู่แล้ว
-      // และกรอบของแถวลูกติด transform ของพ่อ (ignoreTransform ไม่ช่วย) → นับซ้ำแล้วก้อนใหญ่เกินจริง
-      if (!node?.isConnected || header.contains(node)) continue;
+      if (!node?.isConnected) continue;
       const r = getClientRect(node, { ignoreTransform: true });
       top = Math.min(top, r.top);
       bottom = Math.max(bottom, r.bottom);
@@ -937,11 +936,6 @@ export function SortableProvider({
   const groupIds = useMemo(() => order.groups.map((id) => dndId("group", id)), [order.groups]);
 
   const groupOf = useCallback((itemId: string) => groupOfItem(order, itemId), [order]);
-  const insideGroup = useCallback((itemId: string, groupId: string) => {
-    const group = nodes.current.groups.get(groupId);
-    const item = nodes.current.items.get(itemId);
-    return Boolean(group && item && group !== item && group.contains(item));
-  }, []);
   const rootDrag =
     activeDrag !== null &&
     (activeDrag.kind === "group" ||
@@ -968,7 +962,6 @@ export function SortableProvider({
       selected,
       select,
       groupOf,
-      insideGroup,
       register,
       shifts,
     }),
@@ -986,7 +979,6 @@ export function SortableProvider({
       selected,
       select,
       groupOf,
-      insideGroup,
       register,
       shifts,
     ],
@@ -1056,6 +1048,8 @@ export interface SortableRow {
   isDragging: boolean;
   /** รายการนี้ถูกเลือกอยู่ (`multiSelect`) */
   selected: boolean;
+  /** เลือก/ไม่เลือกแถวนี้ (สำหรับช่องติ๊กในแถว) — ไม่ได้เปิด `multiSelect` = ไม่ทำอะไร */
+  toggleSelected: () => void;
   /**
    * กระจายลงแถวเมื่อเปิด `multiSelect`: คลิกพร้อม ⌘/Ctrl/Shift เพื่อเลือก + `data-selected`
    * สำหรับทำสี (`data-[selected]:bg-primary/10`) — ปิด `multiSelect` หรือเป็นแถวกลุ่ม = object ว่าง
@@ -1136,12 +1130,7 @@ export function useSortableRow({
       ? // มี overlay ลอยตามเมาส์แล้ว แถวต้นทางเหลือเป็นช่องจาง ๆ บอกตำแหน่งที่จะวาง
         { ...style, opacity: 0.4 }
       : { ...style, position: "relative", zIndex: 1, opacity: 0.85 };
-  } else if (
-    type === "item" &&
-    state.rootDrag &&
-    shift &&
-    !(groupId && state.insideGroup(id, groupId))
-  ) {
+  } else if (type === "item" && state.rootDrag && shift) {
     const own = state.activeGroup !== null && state.activeGroup === groupId;
     style = {
       transform: shift.transform,
@@ -1201,6 +1190,9 @@ export function useSortableRow({
     handleProps,
     isDragging: sortable.isDragging,
     selected: isSelected,
+    toggleSelected: () => {
+      if (selectable) select(id, "toggle");
+    },
     selectProps,
   };
 }
@@ -1253,6 +1245,7 @@ export function DragHandle({
   className,
   disabled,
   hideWhenDisabled = false,
+  reveal = false,
   ...handleProps
 }: {
   label?: string;
@@ -1260,6 +1253,11 @@ export function DragHandle({
   disabled?: boolean;
   /** ปิดการลากแล้วไม่ต้องแสดงที่จับเลย (ค่าเริ่มต้นคือแสดงแบบจาง ๆ ให้รู้ว่ามีแต่ตอนนี้ลากไม่ได้) */
   hideWhenDisabled?: boolean;
+  /**
+   * "สงบจนกว่าจะแตะ": ซ่อนที่จับไว้ โผล่เมื่อชี้แถว / โฟกัสในแถว (คีย์บอร์ด) / แถวถูกเลือก · จอสัมผัส (ไม่มี hover) เห็นตลอด
+   * ต้องใส่ `group/row` ที่แถว (`<TableRow className="group/row">`) · ที่จับยังโฟกัสด้วย Tab ได้เสมอ
+   */
+  reveal?: boolean;
 } & Record<string, unknown>) {
   const state = useContext(SortableStateContext);
   const off = disabled ?? state.disabled;
@@ -1270,7 +1268,12 @@ export function DragHandle({
       size="icon-sm"
       aria-label={label ?? state.handleLabel}
       disabled={off}
-      className={cn("cursor-grab touch-none active:cursor-grabbing", className)}
+      className={cn(
+        "cursor-grab touch-none active:cursor-grabbing",
+        reveal &&
+          "opacity-0 transition-opacity focus-visible:opacity-100 group-focus-within/row:opacity-100 group-hover/row:opacity-100 group-data-[selected]/row:opacity-100 [@media(hover:none)]:opacity-100",
+        className,
+      )}
       data-sortable-handle=""
       {...handleProps}
     >

package/src/index.ts

@@ -730,6 +730,7 @@ export {
   statusColorThemes,
   TAILWIND_COLORS,
 } from "./lib/status-colors";
+export type { DistributiveOmit, DistributivePick } from "./lib/types";
 export {
   TYPOGRAPHY_ROLES,
   type TypographyRole,

package/src/lib/types.ts

@@ -0,0 +1,18 @@
+/**
+ * Type helper ที่แอปใช้ตอนห่อ component ของแพ็กเกจ — ไม่มีโค้ดตอนรัน
+ */
+
+/**
+ * `Omit` ที่ทำทีละสมาชิกของ union — props ของ component ที่มี `mode`/variant
+ * (เช่น `DatePickerProps` ที่เป็น `DatePickerSingleProps | DatePickerRangeProps`)
+ * ถ้าใช้ `Omit` ปกติจะถูกยุบเป็นก้อนเดียว แยกตาม discriminant ไม่ได้อีก (Pi Auth เจอตอนห่อ `DateField`)
+ *
+ *   type DateFieldProps = DistributiveOmit<DatePickerProps, "locale"> & { label: string };
+ *   // แยกตาม props.mode ได้ตามปกติ ไม่ต้อง cast
+ */
+export type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+
+/** `Pick` ที่ทำทีละสมาชิกของ union (คู่กับ `DistributiveOmit`) */
+export type DistributivePick<T, K extends PropertyKey> = T extends unknown
+  ? Pick<T, Extract<keyof T, K>>
+  : never;

package/src/pwa.ts

@@ -1,5 +1,5 @@
 /**
- * @suphark/ui/pwa — ชุด Progressive Web App: ลงทะเบียน/อัปเดต service worker, การ์ดชวนติดตั้ง, ดึงลงเพื่อรีเฟรช
+ * @suphark/ui/pwa — ชุด Progressive Web App: ลงทะเบียน/อัปเดต service worker, การ์ดชวนติดตั้ง, ดึงลงเพื่อรีเฟรช, สวิตช์แจ้งเตือน Web Push
  * `PullToRefresh` ใช้ next/navigation จึงแยกจาก barrel หลักเหมือน `@suphark/ui/next`
  */
 export {
@@ -22,3 +22,4 @@ export {
 } from "./components/pwa/pwa-install-card";
 export { PwaServiceWorkerRegistration } from "./components/pwa/pwa-service-worker-registration";
 export { canReloadNow, watchServiceWorkerUpdates } from "./components/pwa/service-worker-updates";
+export { WebPushRow, type WebPushRowProps } from "./components/pwa/web-push-row";