@suphark/ui 0.42.0 → 0.45.1

package/CHANGELOG.md

@@ -2,7 +2,67 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
-## [0.42.0] — 2026-10-07
+## [0.45.1] — 2026-10-08
+
+### Fixed
+
+- `AuthLayout`: โลโก้แนวนอนถูกบีบในกรอบ 44×44 จนอ่านไม่ออก (Pi Auth — wordmark ของลูกค้า 315×70 เหลือสูง ~10px) · ตอนนี้ `<img>` สูง 44px กว้างตามสัดส่วน (ไม่เกิน 220px) ส่วนไอคอน/ตัวอักษร (svg, span) ยังเป็นกรอบจัตุรัสมนเหมือนเดิม — เลือกเองตามชนิดลูก แอปไม่ต้องรู้สัดส่วนรูป
+- showcase: `/components/auth-layout` เพิ่มแท็บ "โลโก้แนวนอน"
+
+## [0.45.0] — 2026-10-08
+
+> ประกาศพร้อม publish แล้ว แต่ยังไม่ขึ้น npm — รวมอยู่ใน 0.45.1
+
+
+### Added
+
+- `RecordCard iconSize="sm" | "md"` (ขอจาก DueBell — การ์ดบิลโหมดกะทัดรัด): `sm` = กรอบ 36px (ไอคอน 16px) เยื้องรายละเอียด/แถบล่าง `ml-12` · `md` (ค่าเริ่มต้น) = 44px / `ml-14` เหมือนเดิม · ใช้คู่ `iconTile={false}` ได้เพื่อตั้งระยะเยื้องให้ตรงไอคอนของแอปเอง
+- showcase: `/components/record-card` เพิ่มการ์ดแบบ `iconSize="sm"`
+
+## [0.44.0] — 2026-10-08
+
+> ประกาศพร้อม publish แล้ว แต่ยังไม่ขึ้น npm — รวมอยู่ใน 0.45.0
+
+
+### Added
+
+- **`Button tone`** (สเปกจาก DueBell — `ToneButton`): ปุ่มขอบโครงเดียวกัน ต่างแค่สีตามความหมายของรายการ — `income` เงินเข้า/รับเงิน · `expense` เงินออก/จ่าย · `reminder` รายการเตือน (ม่วง) · `warning` ย้อนกลับได้ (พักรายการ, รอยืนยัน) · `revert` เลิกทำ/ย้อนสถานะ (สีเดียวกับ expense) — ลบถาวรยังเป็น `variant="destructive"` · type `ButtonTone`
+- token `--tone-{income,expense,reminder,warning}` / `-border` / `-hover` ทั้งสองธีม — **แอป override เป็นสีประเภทรายการของตัวเองได้** (ค่าเริ่มต้นผูกกับตระกูล success/destructive/warning + ม่วงใหม่) · วัดบนเบราว์เซอร์แล้ว: ตัวอักษร 7.1–8.4:1 (สว่าง) / 12.5–16:1 (มืด), ขอบ 3.2–3.8:1 / 3.4–4.0:1
+- showcase: `/components/button` เพิ่มแถวปุ่มโทน
+
+### Changed
+
+- `RecordCard` กรอบไอคอน: ขอบ `color-mix(accent 25%)` (เดิม 35%) ให้ตรงสูตร `CategoryIcon` ของ DueBell (พื้น 12% / ขอบ 25%) — แอปส่งไอคอนเปล่าได้เลย
+
+## [0.43.0] — 2026-10-08
+
+> ประกาศพร้อม publish แล้ว แต่ยังไม่ขึ้น npm — รวมอยู่ใน 0.44.0
+
+
+### Added
+
+- **`RecordCard` — การ์ดรายการมาตรฐาน** (ยกจาก `LedgerCard` ของ DueBell ที่ใช้ 3 ที่: รายการบิล, การ์ดแค็ตตาล็อก, ศูนย์แจ้งเตือน): หัว = ไอคอน + ชื่อ/สถานะ + meta → รายละเอียด → แถบล่าง (`footerSummary` ซ้าย, `actions` ขวา) โดยรายละเอียดและแถบล่างเยื้องตรงคอลัมน์ข้อความ · `accent` รับ tone (`neutral/info/success/warning/danger` + ชื่อเดิม `default/destructive`) **หรือสี CSS ตรง ๆ** (`var(--type-income)`) → ขอบซ้าย 3px + ขอบจาง 30% + พื้นไล่สี 11% + กรอบไอคอนตามสี · ชื่อยาวตัดที่ 2 บรรทัด ไม่ดันป้ายสถานะตก · `unread`, `onSelect` (ปุ่มในแถบล่างไม่ไปโดน), `as="li"`, `titleAs` · `recordAccentColor()` · `UiText.record.details`
+
+### Changed
+
+- **`NotificationCenter` ประกอบจาก `RecordCard` + `StatusBadge`** (DueBell: แถวเดิมเขียนเลย์เอาต์ซ้ำกับการ์ดของแอปและเป็น private) — เพิ่มอย่างเดียว ของเดิมใช้ต่อได้:
+  - แถวคือ `RecordCard` · `NotificationEntry.accent` (สี CSS สำหรับสีของประเภทรายการ เช่น รายรับ/รายจ่าย/เตือน) + `details`
+  - `renderItem(item, { busy })` เรนเดอร์แถวเองได้
+  - ชิปนับเป็น `StatusBadge` (ชิปทั้งระบบชุดเดียว) · tone รับ `danger`/`neutral` แบบ `StatusBadge` (`destructive`/`default` ยังได้)
+  - `NotificationAction.render` ใส่ปุ่มของแอปเองได้ (เช่น `ToneButton`) · `onSelect` ไม่บังคับเมื่อใช้ `render`
+  - `headingAs` / `headingClassName` (หัวข้อแบบ label ตัวเล็กของแอป)
+
+### Fixed
+
+- **`@suphark/ui/sortable` ลากกลุ่มแล้วกลุ่มอื่นไม่เลื่อนหลบ เมื่อแอปแปะ ref ของกลุ่มที่ `<tbody>` ทั้งก้อน** (Pi Config รายงานหลัง bump 0.42.1): ตัดสินก่อน/หลังจากกลางของสิ่งที่ลาก — ก้อน `<tbody>` สูงจนกลางไม่เคยเลยครึ่งของกลุ่มเป้าหมาย → ได้ "ที่เดิม" เสมอ · ตอนนี้ใช้ตำแหน่งเมาส์ · และแถวที่อยู่ใน node ของกลุ่มเองไม่ได้ transform ซ้ำอีกชั้น (เดิมเลื่อนสองเท่า) และไม่ถูกนับซ้ำตอนวัดขนาดก้อน
+- showcase: `/components/record-card` ใหม่ · `/components/notification-center` เพิ่มรายการเตือนสีม่วง (accent สี CSS) + รายละเอียด · `/components/sortable-list` เพิ่มตัวอย่างโครง `<tbody>` ต่อกลุ่ม (แบบ Pi Config)
+
+
+### Fixed
+
+- **วันที่สัมพัทธ์นับผิด 1 วัน** (เจอตอนตรวจ 0.42.0 บน production: พิมพ์ `t+3` ได้ 10 ต.ค. ถูก แต่วงเล็บบอก "(ใน 2 วัน)") — `formatRelativeThaiDate` ใช้ `formatDistanceToNow` ซึ่งนับเวลาจาก "ตอนนี้" ถึงเที่ยงคืนของวันนั้น (บ่าย/ค่ำเหลือ ~2.4 วัน → 2) และมีคำว่า "ประมาณ 1 เดือน" · ตอนนี้นับเป็นวันปฏิทินด้วย `Intl.RelativeTimeFormat`: "ในอีก 3 วัน", "10 วันที่ผ่านมา", "เดือนหน้า", "ปีที่แล้ว" (< 31 วัน = วัน, < 12 เดือน = เดือน, ที่เหลือ = ปี) — กระทบ `DatePicker` และ `RelativeDate` · `DatePicker locale` ใช้สูตรเดียวกัน (เดิมนับเป็นวันอย่างเดียว "in 45 days")
+- `formatRelativeCalendarDate(date, locale)` ใน `lib/formatters` (ใช้ร่วมกันข้างใน)
+
 
 ### Added
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.42.0",
+  "version": "0.45.1",
   "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/shared/auth-layout.tsx

@@ -80,7 +80,12 @@ export function AuthLayout({
         <div className="flex flex-col gap-6 px-6 py-8 sm:px-8">
           <header className="flex flex-col items-center gap-3 text-center">
             {logo && (
-              <div className="flex size-11 items-center justify-center overflow-hidden rounded-xl [&_img]:size-full [&_img]:object-contain [&_svg]:size-6">
+              // รูป (<img>) สูง 44px กว้างตามสัดส่วน (wordmark แนวนอนของลูกค้า เช่น 315×70 อ่านออก — เดิมถูกบีบใน 44×44 เหลือสูง ~10px)
+              // ไอคอน/ตัวอักษร (svg, span) ยังเป็นกรอบจัตุรัสมนเหมือนเดิม — เลือกเองตามชนิดลูก แอปไม่ต้องรู้สัดส่วนรูป
+              <div
+                data-slot="auth-logo"
+                className="flex h-11 items-center justify-center not-has-[img]:w-11 not-has-[img]:overflow-hidden not-has-[img]:rounded-xl [&_img]:h-full [&_img]:w-auto [&_img]:max-w-[220px] [&_img]:object-contain [&_svg]:size-6"
+              >
                 {logo}
               </div>
             )}

package/src/components/shared/button/button.tsx

@@ -17,6 +17,30 @@ import { useFormStatus } from "react-dom";
 
 export type ButtonTooltipSide = "top" | "bottom" | "left" | "right";
 
+/**
+ * โทนของปุ่มตามความหมายของรายการ (ปุ่มขอบโครงเดียวกัน ต่างแค่สี) — สีอ่านจาก CSS var `--tone-*`
+ * ที่แอป override เป็นสีประเภทรายการของตัวเองได้ (`--tone-income`, `--tone-income-border`, `--tone-income-hover`)
+ * - `income` เงินเข้า/รับเงิน · `expense` เงินออก/จ่าย · `reminder` รายการเตือน (ม่วง)
+ * - `warning` ย้อนกลับได้ (พักรายการ, รอยืนยัน) · `revert` เลิกทำ/ย้อนสถานะ (สีเดียวกับ expense)
+ * ลบถาวรยังใช้ `variant="destructive"` — คนละความหมายกับ `revert`
+ */
+export type ButtonTone = "income" | "expense" | "reminder" | "warning" | "revert";
+
+// variant outline มี dark:border-input / dark:hover:bg-input/50 — ต้องใส่ dark: ซ้ำไม่งั้นธีมมืดขอบ/พื้นถูกทับ
+// (เขียนเต็มทุกโทน: Tailwind ต้องเห็นชื่อคลาสครบในซอร์ส)
+const TONE_CLASS: Record<ButtonTone, string> = {
+  income:
+    "border-(color:--tone-income-border) text-(color:--tone-income) hover:border-(color:--tone-income) hover:bg-(--tone-income-hover) hover:text-(color:--tone-income) dark:border-(color:--tone-income-border) dark:hover:border-(color:--tone-income) dark:hover:bg-(--tone-income-hover)",
+  expense:
+    "border-(color:--tone-expense-border) text-(color:--tone-expense) hover:border-(color:--tone-expense) hover:bg-(--tone-expense-hover) hover:text-(color:--tone-expense) dark:border-(color:--tone-expense-border) dark:hover:border-(color:--tone-expense) dark:hover:bg-(--tone-expense-hover)",
+  revert:
+    "border-(color:--tone-expense-border) text-(color:--tone-expense) hover:border-(color:--tone-expense) hover:bg-(--tone-expense-hover) hover:text-(color:--tone-expense) dark:border-(color:--tone-expense-border) dark:hover:border-(color:--tone-expense) dark:hover:bg-(--tone-expense-hover)",
+  reminder:
+    "border-(color:--tone-reminder-border) text-(color:--tone-reminder) hover:border-(color:--tone-reminder) hover:bg-(--tone-reminder-hover) hover:text-(color:--tone-reminder) dark:border-(color:--tone-reminder-border) dark:hover:border-(color:--tone-reminder) dark:hover:bg-(--tone-reminder-hover)",
+  warning:
+    "border-(color:--tone-warning-border) text-(color:--tone-warning) hover:border-(color:--tone-warning) hover:bg-(--tone-warning-hover) hover:text-(color:--tone-warning) dark:border-(color:--tone-warning-border) dark:hover:border-(color:--tone-warning) dark:hover:bg-(--tone-warning-hover)",
+};
+
 export interface ButtonProps extends ComponentProps<typeof ButtonBase> {
   /**
    * ข้อความ tooltip — ไม่ใส่ = ใช้ `aria-label` (หรือ `<span className="sr-only">` แบบ shadcn)
@@ -33,6 +57,8 @@ export interface ButtonProps extends ComponentProps<typeof ButtonBase> {
    * (ทุกปุ่ม submit ในฟอร์มนั้นหมุนพร้อมกัน) · `false` = ปิดการตรวจอัตโนมัติ
    */
   loading?: boolean;
+  /** ปุ่มขอบตามความหมายของรายการ (`income`/`expense`/`reminder`/`warning`/`revert`) — ใส่แล้วไม่ต้องส่ง `variant` */
+  tone?: ButtonTone;
 }
 
 const NoAutoTooltip = createContext(false);
@@ -136,8 +162,16 @@ export function Button({
   tooltipSide = "top",
   tooltipDelay,
   loading,
-  ...rest
+  tone,
+  ...input
 }: ButtonProps) {
+  const rest: ComponentProps<typeof ButtonBase> = tone
+    ? {
+        ...input,
+        variant: "outline",
+        className: cn("bg-card shadow-none dark:bg-transparent", TONE_CLASS[tone], input.className),
+      }
+    : input;
   const suppressed = useContext(NoAutoTooltip);
   // นอก <form> หรือฟอร์มที่ไม่ได้ใช้ `action=` → pending เป็น false เสมอ
   const form = useFormStatus();

package/src/components/shared/button/index.ts

@@ -7,6 +7,7 @@ export { ActionButton, type ActionButtonProps } from "./base/action-button";
 export {
   Button,
   type ButtonProps,
+  type ButtonTone,
   type ButtonTooltipSide,
   ButtonTooltipSuppress,
 } from "./button";

package/src/components/shared/date/date-picker.tsx

@@ -11,7 +11,7 @@ import {
 } from "@suphark/ui/components/ui/input-group";
 import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
 import { useMounted } from "@suphark/ui/hooks/use-mounted";
-import { formatRelativeThaiDate, formatThaiFullDate } from "@suphark/ui/lib/formatters";
+import { formatRelativeCalendarDate, formatThaiFullDate } from "@suphark/ui/lib/formatters";
 import { cn } from "@suphark/ui/lib/utils";
 import { addDays, addMonths, addWeeks, addYears } from "date-fns";
 import { CalendarIcon, Check, InfoIcon, X } from "lucide-react";
@@ -158,12 +158,9 @@ function formatDate(date: Date, locale: string | undefined): string {
   }).format(date);
 }
 
-/** "พรุ่งนี้" / "in 3 days" — นับเป็นวันตามปฏิทิน */
+/** "พรุ่งนี้" / "in 3 days" — นับเป็นวันตามปฏิทิน (ไม่ส่ง locale = ไทย) */
 function formatRelative(date: Date, locale: string | undefined): string {
-  if (!locale) return formatRelativeThaiDate(date);
-  const startOf = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
-  const days = Math.round((startOf(date) - startOf(new Date())) / 86_400_000);
-  return new Intl.RelativeTimeFormat(locale, { numeric: "auto" }).format(days, "day");
+  return formatRelativeCalendarDate(date, locale ?? "th");
 }
 
 interface DatePickerBaseProps {

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

@@ -2,45 +2,44 @@
 
 import { ActionMenu } from "@suphark/ui/components/shared/action-menu";
 import { Button } from "@suphark/ui/components/shared/button/button";
+import {
+  type RecordAccent,
+  RecordCard,
+  type RecordTone,
+} from "@suphark/ui/components/shared/record-card";
+import { StatusBadge, type Tone } from "@suphark/ui/components/shared/status-badge";
 import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import { cn } from "@suphark/ui/lib/utils";
 import { BellIcon, ChevronRightIcon } from "lucide-react";
-import type { ReactNode } from "react";
+import { Fragment, type ReactNode } from "react";
 
-export type NotificationTone = "default" | "info" | "success" | "warning" | "destructive";
+/** ชื่อเดียวกับ `StatusBadge` (`neutral`/`danger`) ได้ และชื่อเดิม (`default`/`destructive`) ยังใช้ได้ */
+export type NotificationTone = RecordTone;
 
-const ACCENT: Record<NotificationTone, string> = {
-  default: "border-l-border",
-  info: "border-l-info",
-  success: "border-l-success",
-  warning: "border-l-warning",
-  destructive: "border-l-destructive",
-};
-
-const ICON_TONE: Record<NotificationTone, string> = {
-  default: "bg-muted text-muted-foreground",
-  info: "bg-info-subtle text-info-subtle-foreground",
-  success: "bg-success-subtle text-success-subtle-foreground",
-  warning: "bg-warning-subtle text-warning-subtle-foreground",
-  destructive: "bg-destructive-subtle text-destructive-subtle-foreground",
-};
-
-const CHIP_TONE: Record<NotificationTone, string> = {
-  default: "border-border bg-muted text-muted-foreground",
-  info: "border-info-border bg-info-subtle text-info-subtle-foreground",
-  success: "border-success-border bg-success-subtle text-success-subtle-foreground",
-  warning: "border-warning-border bg-warning-subtle text-warning-subtle-foreground",
-  destructive: "border-destructive-border bg-destructive-subtle text-destructive-subtle-foreground",
+/** tone ของการแจ้งเตือน → tone ของ `StatusBadge` (ชิปทั้งระบบเป็นชุดเดียว) */
+const BADGE_TONE: Record<NotificationTone, Tone> = {
+  neutral: "neutral",
+  default: "neutral",
+  info: "info",
+  success: "success",
+  warning: "warning",
+  danger: "danger",
+  destructive: "danger",
 };
 
 const ACTION_TONE: Record<NotificationTone, string> = {
+  neutral: "",
   default: "",
   info: "text-info-subtle-foreground",
   success: "text-success-subtle-foreground",
   warning: "text-warning-subtle-foreground",
+  danger: "text-destructive",
   destructive: "text-destructive",
 };
 
+const isDanger = (tone: NotificationTone | undefined) =>
+  tone === "danger" || tone === "destructive";
+
 export interface NotificationChip {
   key: string;
   label: ReactNode;
@@ -54,12 +53,18 @@ export interface NotificationChip {
 export interface NotificationAction {
   key: string;
   label: string;
-  onSelect: () => void;
+  /** ไม่บังคับเมื่อส่ง `render` */
+  onSelect?: () => void;
   icon?: ReactNode;
   tone?: NotificationTone;
   /** ปุ่มหลักของแถว (เด่นกว่าตัวอื่น) — ปกติมีตัวเดียว */
   primary?: boolean;
   disabled?: boolean;
+  /**
+   * ปุ่มของแอปเอง (เช่น `<ToneButton tone="income">`) แทนปุ่มมาตรฐาน — ใช้ได้เฉพาะ `actions`
+   * (เมนู "…" ใช้ `label`/`onSelect`) · แอปคุม disabled ตอน `busy` เอง
+   */
+  render?: ReactNode;
 }
 
 export interface NotificationEntry {
@@ -68,6 +73,11 @@ export interface NotificationEntry {
   description?: ReactNode;
   icon?: ReactNode;
   tone?: NotificationTone;
+  /**
+   * สีประจำแถวแบบสี CSS ตรง ๆ (`"var(--type-reminder)"`) — สำหรับสีที่สื่อ "ประเภทรายการ" ของแอป
+   * (รายรับ/รายจ่าย/เตือน) ไม่ใช่สถานะ · ไม่ส่ง = ตาม `tone`
+   */
+  accent?: RecordAccent;
   /**
    * สถานะ/กำหนดเวลาที่ **แอปฟอร์แมตมาแล้ว** (เช่น `<DueDateBadge>` หรือ "23 ก.ย. · พรุ่งนี้")
    * แพ็กเกจไม่ฟอร์แมตวันที่เอง เพราะปี พ.ศ./ภาษาเป็นของแอป
@@ -75,7 +85,9 @@ export interface NotificationEntry {
   status?: ReactNode;
   /** บรรทัดเล็กใต้ชื่อ เช่น กลุ่ม · หมวดหมู่ */
   meta?: ReactNode;
-  /** ท้ายแถว — เรื่องเฉพาะโดเมน เช่นยอดเงิน (ซ่อนได้) หรือความคืบหน้ารอบ */
+  /** ส่วนรายละเอียด (ฟิลด์ของโดเมน) — มีเส้นคั่น เยื้องตรงคอลัมน์ข้อความ */
+  details?: ReactNode;
+  /** ซ้ายของแถบล่าง — เรื่องเฉพาะโดเมน เช่นยอดเงิน (ซ่อนได้) หรือความคืบหน้ารอบ */
   footer?: ReactNode;
   /** ยังไม่ได้อ่าน — จุดหน้าชื่อ + พื้นจาง */
   unread?: boolean;
@@ -93,9 +105,14 @@ export interface NotificationCenterProps {
    * แล้วส่ง `viewAll` เพื่อพาไปหน้ารวม (ตัวเลขใน `counts` จึงตรงกับสิ่งที่ผู้ใช้เห็นเสมอ)
    */
   items: ReadonlyArray<NotificationEntry>;
-  /** ชิปนับด้านบน — กี่กลุ่มก็ได้ (เกินกำหนด / รอตรวจสอบ / ใกล้ถึงกำหนด / เลื่อนเตือนอยู่ …) */
+  /** ชิปนับด้านบน (`StatusBadge`) — กี่กลุ่มก็ได้ (เกินกำหนด / รอตรวจสอบ / ใกล้ถึงกำหนด …) */
   counts?: ReadonlyArray<NotificationChip>;
+  /** หัวข้อ — ส่ง node ได้ (เช่น label ตัวเล็กตัวพิมพ์ใหญ่ + ไอคอน แบบหัวกลุ่มของแอป) */
   title?: ReactNode;
+  /** แท็กของหัวข้อ (ค่าเริ่มต้น h2) */
+  headingAs?: "h2" | "h3" | "h4" | "p";
+  /** ทับสไตล์หัวข้อ (ค่าเริ่มต้น `font-semibold text-sm`) */
+  headingClassName?: string;
   description?: ReactNode;
   /** ไม่มีรายการ — ส่ง element เองได้ทั้งก้อน */
   empty?: ReactNode;
@@ -103,17 +120,22 @@ export interface NotificationCenterProps {
   viewAll?: { label?: ReactNode; onSelect: () => void };
   /** กำลังทำคำสั่งลัดอยู่ — ปิดปุ่มทั้งหมดกันกดซ้ำ */
   busy?: boolean;
+  /**
+   * เรนเดอร์แถวเอง (การ์ดของแอป) — ปกติไม่ต้องใช้: แถวมาตรฐานคือ `RecordCard` ตัวเดียวกับที่แอปใช้ทำรายการ
+   * อยู่แล้ว · คืน node ที่จะอยู่ใน `<li>`
+   */
+  renderItem?: (item: NotificationEntry, context: { busy: boolean }) => ReactNode;
   className?: string;
 }
 
 /**
- * ศูนย์การแจ้งเตือน: ชิปนับ + รายการที่ต้องจัดการ พร้อมปุ่มลัดต่อรายการ (ยกจาก DueBell)
+ * ศูนย์การแจ้งเตือน: หัวข้อ + ชิปนับ (`StatusBadge`) + รายการ (`RecordCard`) พร้อมปุ่มลัดต่อรายการ (ยกจาก DueBell)
  * ทุกอย่างที่เป็นของโดเมน — วันที่/สถานะ/ยอดเงิน/ความคืบหน้า — ส่งเข้ามาเป็น node ที่แอปเตรียมแล้ว
  * วางในหน้าได้ตรง ๆ หรือใส่ใน `SimpleDialog`/`SimpleSheet` เป็นกล่องแจ้งเตือนก็ได้
  *
  *   <NotificationCenter
- *     counts={[{ key: "overdue", label: "เกินกำหนด", count: 3, tone: "destructive" }]}
- *     items={bills.map((b) => ({ id: b.id, title: b.title, status: <DueDateBadge … />,
+ *     counts={[{ key: "overdue", label: "เกินกำหนด", count: 3, tone: "danger" }]}
+ *     items={bills.map((b) => ({ id: b.id, title: b.title, accent: typeAccent(b.type), status: <DueDateBadge … />,
  *       footer: <Amount value={b.amount} />, actions: [{ key: "pay", label: "จ่ายเลย", primary: true, onSelect: … }] }))}
  *     viewAll={{ onSelect: () => router.push("/alerts") }} />
  */
@@ -121,10 +143,13 @@ export function NotificationCenter({
   items,
   counts,
   title,
+  headingAs: Heading = "h2",
+  headingClassName,
   description,
   empty,
   viewAll,
   busy = false,
+  renderItem,
   className,
 }: NotificationCenterProps) {
   const text = useUiText();
@@ -138,39 +163,13 @@ export function NotificationCenter({
     >
       <div className="flex flex-wrap items-start justify-between gap-2">
         <div className="flex min-w-0 flex-col gap-1.5">
-          <h2 className="font-semibold text-sm">{heading}</h2>
+          <Heading className={cn("font-semibold text-sm", headingClassName)}>{heading}</Heading>
           {description && <p className="text-muted-foreground text-xs">{description}</p>}
           {counts && counts.length > 0 && (
             <div className="flex flex-wrap items-center gap-1.5">
-              {counts.map((chip) => {
-                const tone = chip.tone ?? "default";
-                const content = (
-                  <>
-                    {chip.label}
-                    <span className="font-semibold tabular-nums">{chip.count}</span>
-                  </>
-                );
-                const shared = cn(
-                  "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-label",
-                  CHIP_TONE[tone],
-                  chip.active && "ring-2 ring-ring/40",
-                );
-                return chip.onSelect ? (
-                  <button
-                    key={chip.key}
-                    type="button"
-                    aria-pressed={chip.active ?? false}
-                    onClick={chip.onSelect}
-                    className={cn(shared, "transition-colors hover:brightness-95")}
-                  >
-                    {content}
-                  </button>
-                ) : (
-                  <span key={chip.key} className={shared}>
-                    {content}
-                  </span>
-                );
-              })}
+              {counts.map((chip) => (
+                <CountChip key={chip.key} chip={chip} />
+              ))}
             </div>
           )}
         </div>
@@ -193,105 +192,97 @@ export function NotificationCenter({
         ))
       ) : (
         <ul className="flex flex-col gap-2">
-          {items.map((item) => (
-            <NotificationRow key={item.id} item={item} busy={busy} />
-          ))}
+          {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>
       )}
     </section>
   );
 }
 
-function NotificationRow({ item, busy }: { item: NotificationEntry; busy: boolean }) {
-  const text = useUiText();
-  const tone = item.tone ?? "default";
-  const clickable = Boolean(item.onSelect);
+function CountChip({ chip }: { chip: NotificationChip }) {
+  const content = (
+    <>
+      {chip.label}
+      <span className="font-semibold tabular-nums">{chip.count}</span>
+    </>
+  );
+  const tone = BADGE_TONE[chip.tone ?? "neutral"];
+  if (!chip.onSelect) return <StatusBadge tone={tone}>{content}</StatusBadge>;
   return (
-    // biome-ignore lint/a11y/useKeyWithClickEvents: แถวมีปุ่มของตัวเองอยู่แล้ว คลิกทั้งแถวเป็นทางลัดของเมาส์
-    <li
-      data-slot="notification-row"
-      data-unread={item.unread || undefined}
-      onClick={item.onSelect}
+    <StatusBadge
+      tone={tone}
+      render={<button type="button" aria-pressed={chip.active ?? false} onClick={chip.onSelect} />}
       className={cn(
-        "flex gap-3 rounded-xl border border-l-4 bg-card p-3",
-        ACCENT[tone],
-        item.unread && "bg-muted/40",
-        clickable && "cursor-pointer transition-colors hover:bg-muted/60",
+        "cursor-pointer transition-[filter] hover:brightness-95",
+        chip.active && "ring-2 ring-ring/40",
       )}
     >
-      {item.icon && (
-        <span
-          className={cn(
-            "flex size-9 shrink-0 items-center justify-center rounded-lg [&_svg]:size-4.5",
-            ICON_TONE[tone],
-          )}
-        >
-          {item.icon}
-        </span>
-      )}
-      <div className="flex min-w-0 flex-1 flex-col gap-1.5">
-        <div className="flex flex-wrap items-start justify-between gap-x-2 gap-y-1">
-          <p className="flex min-w-0 items-center gap-1.5 font-semibold text-sm leading-snug">
-            {item.unread && (
-              <span className="size-1.5 shrink-0 rounded-full bg-primary" aria-hidden="true" />
+      {content}
+    </StatusBadge>
+  );
+}
+
+function NotificationRow({ item, busy }: { item: NotificationEntry; busy: boolean }) {
+  const text = useUiText();
+  const hasActions = Boolean(item.actions?.length || item.menuActions?.length);
+  return (
+    <RecordCard
+      as="li"
+      accent={item.accent ?? item.tone}
+      icon={item.icon}
+      title={item.title}
+      status={item.status}
+      meta={item.meta}
+      description={item.description}
+      details={item.details}
+      footerSummary={item.footer}
+      unread={item.unread}
+      onSelect={item.onSelect}
+      actions={
+        hasActions ? (
+          <>
+            {item.actions?.map((action) =>
+              action.render != null ? (
+                <Fragment key={action.key}>{action.render}</Fragment>
+              ) : (
+                <Button
+                  key={action.key}
+                  size="sm"
+                  variant={
+                    action.primary ? (isDanger(action.tone) ? "destructive" : "default") : "outline"
+                  }
+                  disabled={busy || action.disabled}
+                  onClick={action.onSelect}
+                  className={cn(!action.primary && ACTION_TONE[action.tone ?? "neutral"])}
+                >
+                  {action.icon}
+                  {action.label}
+                </Button>
+              ),
             )}
-            <span className="min-w-0 break-words">{item.title}</span>
-          </p>
-          {item.status && <span className="shrink-0">{item.status}</span>}
-        </div>
-        {item.meta && (
-          <p className="flex flex-wrap items-center gap-1.5 text-muted-foreground text-xs">
-            {item.meta}
-          </p>
-        )}
-        {item.description && <p className="text-muted-foreground text-xs">{item.description}</p>}
-        {(item.footer || item.actions || item.menuActions) && (
-          <div className="flex flex-wrap items-end justify-between gap-2 pt-0.5">
-            <div className="min-w-0">{item.footer}</div>
-            {(item.actions?.length || item.menuActions?.length) && (
-              // คลิกปุ่มไม่ให้ไปโดน onSelect ของทั้งแถว
-              // biome-ignore lint/a11y/noStaticElementInteractions: ตัวกั้นคลิกเฉย ๆ ไม่ใช่ตัวควบคุม
-              // biome-ignore lint/a11y/useKeyWithClickEvents: คีย์บอร์ดกดปุ่มข้างในตรง ๆ อยู่แล้ว
-              <div
-                className="flex shrink-0 flex-wrap items-center gap-1.5"
-                onClick={(event) => event.stopPropagation()}
-              >
-                {item.actions?.map((action) => (
-                  <Button
-                    key={action.key}
-                    size="sm"
-                    variant={
-                      action.primary
-                        ? action.tone === "destructive"
-                          ? "destructive"
-                          : "default"
-                        : "outline"
-                    }
-                    disabled={busy || action.disabled}
-                    onClick={action.onSelect}
-                    className={cn(!action.primary && ACTION_TONE[action.tone ?? "default"])}
-                  >
-                    {action.icon}
-                    {action.label}
-                  </Button>
-                ))}
-                {item.menuActions && item.menuActions.length > 0 && (
-                  <ActionMenu
-                    label={text.actions}
-                    items={item.menuActions.map((action) => ({
-                      label: action.label,
-                      icon: action.icon,
-                      destructive: action.tone === "destructive",
-                      disabled: busy || action.disabled,
-                      onClick: action.onSelect,
-                    }))}
-                  />
-                )}
-              </div>
+            {item.menuActions && item.menuActions.length > 0 && (
+              <ActionMenu
+                label={text.actions}
+                items={item.menuActions.map((action) => ({
+                  label: action.label,
+                  icon: action.icon,
+                  destructive: isDanger(action.tone),
+                  disabled: busy || action.disabled,
+                  onClick: () => action.onSelect?.(),
+                }))}
+              />
             )}
-          </div>
-        )}
-      </div>
-    </li>
+          </>
+        ) : undefined
+      }
+    />
   );
 }

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

@@ -0,0 +1,205 @@
+"use client";
+
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import { cn } from "@suphark/ui/lib/utils";
+import type { CSSProperties, KeyboardEvent, MouseEvent, ReactNode } from "react";
+
+/** สีตามความหมาย — หรือส่งสี CSS ตรง ๆ (`"var(--type-income)"`, `"oklch(…)"`) สำหรับสีของประเภทรายการในแอป */
+export type RecordTone =
+  | "neutral"
+  | "default"
+  | "info"
+  | "success"
+  | "warning"
+  | "danger"
+  | "destructive";
+export type RecordAccent = RecordTone | (string & {});
+
+const TONE_VAR: Record<RecordTone, string> = {
+  neutral: "var(--border)",
+  default: "var(--border)",
+  info: "var(--info)",
+  success: "var(--success)",
+  warning: "var(--warning)",
+  danger: "var(--destructive)",
+  destructive: "var(--destructive)",
+};
+
+/** tone → สี CSS (ชื่อที่ไม่รู้จัก = ถือเป็นสี CSS อยู่แล้ว) */
+export function recordAccentColor(accent: RecordAccent | undefined): string | undefined {
+  if (!accent) return undefined;
+  return (TONE_VAR as Record<string, string>)[accent] ?? accent;
+}
+
+export interface RecordCardProps {
+  /** สีประจำการ์ด: ขอบซ้าย 3px + ขอบจาง ๆ + พื้นไล่สีจากซ้าย — tone หรือสี CSS (`var(--type-income)`) */
+  accent?: RecordAccent;
+  /** ไอคอน — ใส่ในกรอบสี่เหลี่ยมมนตามสี accent ให้เอง (`iconTile={false}` = วางตามที่ส่งมา) */
+  icon?: ReactNode;
+  iconTile?: boolean;
+  /**
+   * ขนาดคอลัมน์ไอคอน: `md` (ค่าเริ่มต้น) กรอบ 44px เยื้อง ml-14 · `sm` กรอบ 36px เยื้อง ml-12 สำหรับโหมดกะทัดรัด
+   * ใช้กับ `iconTile={false}` ได้ด้วย (กำหนดระยะเยื้องให้ตรงไอคอนของแอปเอง)
+   */
+  iconSize?: "sm" | "md";
+  title: ReactNode;
+  /** ชื่อยาวตัดที่ 2 บรรทัด — ทับคลาสได้ */
+  titleClassName?: string;
+  /** แท็กของชื่อ (ค่าเริ่มต้น h3) — ให้ตรงกับลำดับหัวข้อของหน้า */
+  titleAs?: "h2" | "h3" | "h4" | "p";
+  /** มุมขวาบน เช่น `StatusBadge` / วันครบกำหนดที่แอปฟอร์แมตแล้ว */
+  status?: ReactNode;
+  /** บรรทัดเล็กใต้ชื่อ (หมวดหมู่ · กลุ่ม · รอบ) */
+  meta?: ReactNode;
+  /** ข้อความอธิบายใต้ meta */
+  description?: ReactNode;
+  /** ส่วนรายละเอียด (ฟิลด์ของโดเมน) — มีเส้นคั่นบน เยื้องตรงคอลัมน์ข้อความ */
+  details?: ReactNode;
+  /** ชื่อของส่วนรายละเอียดสำหรับ screen reader (ไม่ส่ง = `UiText.record.details`) */
+  detailsLabel?: string;
+  /** ซ้ายของแถบล่าง เช่นยอดเงิน / ความคืบหน้ารอบ (สูงกว่า 1 บรรทัดได้) */
+  footerSummary?: ReactNode;
+  /** ขวาของแถบล่าง — ปุ่ม (คลิกปุ่มไม่ไปโดน `onSelect` ของทั้งการ์ด) */
+  actions?: ReactNode;
+  /** ยังไม่ได้อ่าน — จุดหน้าชื่อ + `data-unread` */
+  unread?: boolean;
+  /** คลิกทั้งการ์ด (ทางลัดของเมาส์ — การ์ดยังต้องมีปุ่ม/ลิงก์ของตัวเองสำหรับคีย์บอร์ด) */
+  onSelect?: () => void;
+  /** element ภายนอก — `li` เมื่ออยู่ในรายการ (ค่าเริ่มต้น `article`) */
+  as?: "article" | "li" | "div";
+  className?: string;
+}
+
+/**
+ * การ์ดรายการมาตรฐาน (ยกจาก `LedgerCard` ของ DueBell — ใช้ทั้งรายการบิล การ์ดแค็ตตาล็อก และศูนย์แจ้งเตือน):
+ * หัว = ไอคอน + ชื่อ/สถานะ + meta → รายละเอียด → แถบล่าง (สรุปซ้าย, ปุ่มขวา) — รายละเอียดและแถบล่างเยื้องตรงคอลัมน์ข้อความ
+ *
+ *   <RecordCard accent="var(--type-expense)" icon={<ReceiptIcon />} title="ค่าไฟ"
+ *     status={<StatusBadge tone="danger">เกินกำหนด</StatusBadge>} meta="บ้าน · รายเดือน"
+ *     footerSummary={<Amount value={1250} />} actions={<Button size="sm">จ่ายแล้ว</Button>} />
+ */
+export function RecordCard({
+  accent,
+  icon,
+  iconTile = true,
+  iconSize = "md",
+  title,
+  titleClassName,
+  titleAs: Title = "h3",
+  status,
+  meta,
+  description,
+  details,
+  detailsLabel,
+  footerSummary,
+  actions,
+  unread = false,
+  onSelect,
+  as: Root = "article",
+  className,
+}: RecordCardProps) {
+  const text = useUiText();
+  const color = recordAccentColor(accent);
+  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") : "";
+  const hasFooter = footerSummary != null || actions != null;
+  return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: คลิกทั้งการ์ดเป็นทางลัดของเมาส์ ปุ่มข้างในใช้คีย์บอร์ดได้อยู่แล้ว
+    <Root
+      data-slot="record-card"
+      data-unread={unread || undefined}
+      onClick={onSelect}
+      style={color ? ({ "--record-accent": color } as CSSProperties) : undefined}
+      className={cn(
+        "min-w-0 overflow-hidden rounded-xl border bg-card text-card-foreground",
+        color &&
+          "border-[color-mix(in_oklab,var(--record-accent)_30%,var(--border))] bg-[image:linear-gradient(90deg,color-mix(in_oklab,var(--record-accent)_11%,transparent)_0%,transparent_38%)] shadow-[inset_3px_0_0_var(--record-accent)]",
+        unread && "bg-muted/40",
+        onSelect && "cursor-pointer transition-colors hover:bg-muted/60",
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          "grid min-w-0 gap-3 p-3 pb-2.5",
+          icon ? "grid-cols-[auto_minmax(0,1fr)]" : "grid-cols-1",
+        )}
+      >
+        {icon &&
+          (iconTile ? (
+            <div
+              data-slot="record-card-icon"
+              className={cn(
+                "flex shrink-0 items-center justify-center rounded-xl border",
+                small ? "size-9 [&_svg]:size-4" : "size-11 [&_svg]:size-5",
+                color
+                  ? "border-[color-mix(in_oklab,var(--record-accent)_25%,transparent)] bg-[color-mix(in_oklab,var(--record-accent)_12%,transparent)] text-(--record-accent)"
+                  : "bg-muted text-muted-foreground",
+              )}
+            >
+              {icon}
+            </div>
+          ) : (
+            <div className="shrink-0">{icon}</div>
+          ))}
+        <div className="min-w-0">
+          <div className="flex min-w-0 items-start justify-between gap-2">
+            <Title
+              className={cn(
+                "line-clamp-2 min-w-0 break-words 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 && <div className="shrink-0">{status}</div>}
+          </div>
+          {meta != null && (
+            <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-muted-foreground text-xs">
+              {meta}
+            </div>
+          )}
+          {description != null && (
+            <p className="mt-1 text-muted-foreground text-xs">{description}</p>
+          )}
+        </div>
+      </div>
+      {details != null && (
+        <section
+          aria-label={detailsLabel ?? text.record?.details ?? "ข้อมูลเพิ่มเติม"}
+          className={cn("border-t px-3 py-2.5", indent)}
+        >
+          {details}
+        </section>
+      )}
+      {hasFooter && (
+        <div
+          className={cn(
+            "flex min-h-14 flex-wrap items-center justify-between gap-3 border-t px-3 py-2.5",
+            indent,
+          )}
+        >
+          <div className="min-w-0 flex-1">{footerSummary}</div>
+          {actions != null && (
+            // คลิกปุ่มไม่ให้ไปโดน onSelect ของทั้งการ์ด
+            // biome-ignore lint/a11y/noStaticElementInteractions: ตัวกั้นคลิกเฉย ๆ ไม่ใช่ตัวควบคุม
+            <div
+              className="flex shrink-0 flex-wrap items-center justify-end gap-2"
+              onClick={(event: MouseEvent) => event.stopPropagation()}
+              onKeyDown={(event: KeyboardEvent) => event.stopPropagation()}
+            >
+              {actions}
+            </div>
+          )}
+        </div>
+      )}
+    </Root>
+  );
+}

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

@@ -73,6 +73,8 @@ export interface UiText {
   notifications?: Partial<{ title: string; empty: string; viewAll: string }>;
   /** SelectionBar (optional) — `selected` ใช้ `{count}` */
   selection?: Partial<{ selected: string; clear: string }>;
+  /** RecordCard (optional) — ชื่อส่วนรายละเอียดสำหรับ screen reader */
+  record?: Partial<{ details: string }>;
   /** ตาข่ายฟอร์มที่ไม่ผ่าน validation (`useFormInvalidNotice`, FormDialog, ActionForm) — `fields` ใช้ `{fields}` */
   invalidForm?: Partial<{ fields: string; generic: string }>;
   /** DataTable (optional) — `rowsSelected` ใช้ `{selected}`/`{total}`, `pageOf` ใช้ `{page}`/`{pages}` */
@@ -286,6 +288,7 @@ export const UI_TEXT_TH: UiText = {
     viewAll: "ดูทั้งหมด",
   },
   selection: { selected: "เลือก {count} รายการ", clear: "ล้างการเลือก" },
+  record: { details: "ข้อมูลเพิ่มเติม" },
   invalidForm: { fields: "กรุณากรอกหรือแก้ไข: {fields}", generic: "กรุณากรอกข้อมูลให้ครบถ้วน" },
   sortable: {
     handle: "ลากเพื่อจัดลำดับ",
@@ -484,6 +487,7 @@ export const UI_TEXT_EN: UiText = {
     viewAll: "View all",
   },
   selection: { selected: "{count} selected", clear: "Clear selection" },
+  record: { details: "More details" },
   invalidForm: {
     fields: "Please fill in or fix: {fields}",
     generic: "Please complete the required fields",

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

@@ -74,6 +74,14 @@ const dndId = (kind: SortableKind | "zone", id: string) =>
 const kindOf = (id: UniqueIdentifier) => String(id).slice(0, 1);
 const rawOf = (id: UniqueIdentifier) => String(id).slice(2);
 
+/** ตำแหน่ง y ของเมาส์ตอนนี้ = จุดที่กดเริ่มลาก + ระยะที่ลากมา (คีย์บอร์ด = null) */
+function pointerYOf(activator: Event | null, delta: { y: number }): number | null {
+  if (activator && "clientY" in activator && typeof activator.clientY === "number") {
+    return activator.clientY + delta.y;
+  }
+  return null;
+}
+
 /** จังหวะเดียวกันทั้งแถวที่เลื่อนหลบและตอนปล่อย — ease-out สั้น ๆ แบบบอร์ดงาน (Trello/Todoist) */
 const EASING = "cubic-bezier(0.25, 1, 0.5, 1)";
 const SORT_TRANSITION = { duration: 200, easing: EASING };
@@ -145,6 +153,8 @@ 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;
 }
@@ -163,6 +173,7 @@ const SortableStateContext = createContext<SortableState>({
   selected: EMPTY,
   select: () => {},
   groupOf: () => undefined,
+  insideGroup: () => false,
   register: () => {},
   shifts: createShiftStore(),
 });
@@ -390,7 +401,9 @@ export function SortableProvider({
     let { top, bottom, left, right } = getClientRect(header, { ignoreTransform: true });
     for (const itemId of latest.current.items[groupId] ?? []) {
       const node = nodes.current.items.get(itemId);
-      if (!node?.isConnected) continue;
+      // แถวที่อยู่ "ใน" node ของกลุ่มเอง (แอปแปะ ref กลุ่มที่ <tbody>) — กรอบของกลุ่มครอบอยู่แล้ว
+      // และกรอบของแถวลูกติด transform ของพ่อ (ignoreTransform ไม่ช่วย) → นับซ้ำแล้วก้อนใหญ่เกินจริง
+      if (!node?.isConnected || header.contains(node)) continue;
       const r = getClientRect(node, { ignoreTransform: true });
       top = Math.min(top, r.top);
       bottom = Math.max(bottom, r.bottom);
@@ -496,6 +509,7 @@ export function SortableProvider({
     active: DragMoveEvent["active"],
     over: DragMoveEvent["over"],
     keyboard: boolean,
+    pointerY: number | null,
   ) {
     const activeKey = String(active.id);
     const keys = entryKeys(latest.current, activeKey);
@@ -519,12 +533,12 @@ export function SortableProvider({
       const a = keys.indexOf(activeKey);
       const o = keys.indexOf(overKey);
       const rect = measureKey(overKey);
+      // ตัดสินด้วยตำแหน่งเมาส์ ไม่ใช่กลางของสิ่งที่ลาก: แอปที่แปะ ref ของกลุ่มที่ <tbody> ทั้งก้อน
+      // กลางของก้อนสูง ๆ ไม่เคยเลยครึ่งของกลุ่มเป้าหมาย → ได้ "ที่เดิม" เสมอ กลุ่มอื่นไม่เลื่อนหลบ (Pi Config)
       const dragged = active.rect.current.translated;
+      const y = pointerY ?? (dragged ? dragged.top + dragged.height / 2 : null);
       // คีย์บอร์ดขยับทีละตำแหน่งไปทับกลางเป้าหมายพอดี → ใช้ทิศทางแทน
-      const after =
-        keyboard || !rect || !dragged
-          ? o > a
-          : dragged.top + dragged.height / 2 > (rect.top + rect.bottom) / 2;
+      const after = keyboard || !rect || y === null ? o > a : y > (rect.top + rect.bottom) / 2;
       setTarget({ before: after ? nextAfter(o) : overKey });
     } else {
       setTarget(null);
@@ -630,7 +644,12 @@ export function SortableProvider({
   }
 
   function onDragMove({ active, over, delta, activatorEvent }: DragMoveEvent) {
-    updateTarget(active, over, activatorEvent instanceof KeyboardEvent);
+    updateTarget(
+      active,
+      over,
+      activatorEvent instanceof KeyboardEvent,
+      pointerYOf(activatorEvent, delta),
+    );
     // ไม่มี overlay: ก้อนของกลุ่มที่ลากลอยตามเมาส์ทั้งก้อน (หัวกลุ่ม + แถวรายการ)
     if (overlayOn || kindOf(active.id) !== "g") return;
     shifts.set(String(active.id), {
@@ -649,10 +668,11 @@ export function SortableProvider({
     setActiveDrag(null);
   }
 
-  function onDragOver({ active, over, activatorEvent }: DragOverEvent) {
+  function onDragOver({ active, over, activatorEvent, delta }: DragOverEvent) {
     const keyboard = activatorEvent instanceof KeyboardEvent;
+    const pointerY = pointerYOf(activatorEvent, delta);
     if (!over || kindOf(active.id) !== "i") {
-      updateTarget(active, over, keyboard);
+      updateTarget(active, over, keyboard, pointerY);
       return;
     }
     const current = latest.current;
@@ -668,13 +688,13 @@ export function SortableProvider({
       if (groupOfItem(current, raw) !== UNGROUPED) {
         apply(moveItemToRoot(current, raw, { kind: "group", id: rawOf(over.id) }));
       }
-      updateTarget(active, over, keyboard);
+      updateTarget(active, over, keyboard, pointerY);
       return;
     }
     const from = containerOf(active.id, current);
     const to = containerOf(over.id, current);
     if (!from || !to || from === to) {
-      updateTarget(active, over, keyboard);
+      updateTarget(active, over, keyboard, pointerY);
       return;
     }
     if (to === UNGROUPED) {
@@ -905,6 +925,11 @@ 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" ||
@@ -931,6 +956,7 @@ export function SortableProvider({
       selected,
       select,
       groupOf,
+      insideGroup,
       register,
       shifts,
     }),
@@ -948,6 +974,7 @@ export function SortableProvider({
       selected,
       select,
       groupOf,
+      insideGroup,
       register,
       shifts,
     ],
@@ -1097,7 +1124,12 @@ export function useSortableRow({
       ? // มี overlay ลอยตามเมาส์แล้ว แถวต้นทางเหลือเป็นช่องจาง ๆ บอกตำแหน่งที่จะวาง
         { ...style, opacity: 0.4 }
       : { ...style, position: "relative", zIndex: 1, opacity: 0.85 };
-  } else if (type === "item" && state.rootDrag && shift) {
+  } else if (
+    type === "item" &&
+    state.rootDrag &&
+    shift &&
+    !(groupId && state.insideGroup(id, groupId))
+  ) {
     const own = state.activeGroup !== null && state.activeGroup === groupId;
     style = {
       transform: shift.transform,

package/src/index.ts

@@ -48,6 +48,7 @@ export {
 export {
   Button,
   type ButtonProps,
+  type ButtonTone,
   type ButtonTooltipSide,
   ButtonTooltipSuppress,
 } from "./components/shared/button/button";
@@ -203,6 +204,13 @@ export { PageHeader } from "./components/shared/page-header";
 export { PageSkeleton } from "./components/shared/page-skeleton";
 export { type Presence, PresenceDot } from "./components/shared/presence-dot";
 export { ProgressBar, type ProgressTone } from "./components/shared/progress-bar";
+export {
+  type RecordAccent,
+  RecordCard,
+  type RecordCardProps,
+  type RecordTone,
+  recordAccentColor,
+} from "./components/shared/record-card";
 export {
   describeCondition,
   emptyGroup,

package/src/lib/formatters.ts

@@ -1,24 +1,36 @@
-import { differenceInCalendarDays, formatDistanceToNow } from "date-fns";
-import { th } from "date-fns/locale/th";
+import {
+  differenceInCalendarDays,
+  differenceInCalendarMonths,
+  differenceInCalendarYears,
+} from "date-fns";
 
 /**
  * ฟอร์แมตวันที่แบบไทยที่ primitives ใช้ร่วมกัน (DatePicker, RelativeDate)
  * ยกมาจาก supplychain `lib/utils/formatters.ts` เฉพาะส่วนที่ไม่ผูก domain
  */
 
-/** วันที่แบบสัมพัทธ์ภาษาไทย เช่น "วันนี้", "เมื่อวาน", "พรุ่งนี้", "10 วันที่ผ่านมา", "ใน 2 เดือน" */
+/**
+ * วันที่สัมพัทธ์นับตาม "วันปฏิทิน" ไม่ใช่ระยะเวลาจากตอนนี้ — "ในอีก 3 วัน" ทั้งวันไม่ว่าตอนนี้กี่โมง
+ * (เดิมใช้ formatDistanceToNow: 3 วันข้างหน้าตอนบ่ายเหลือ ~2.4 วัน → "ใน 2 วัน", และมี "ประมาณ 1 เดือน")
+ * น้อยกว่า 31 วัน = วัน, น้อยกว่า 12 เดือน = เดือน, ที่เหลือ = ปี
+ */
+export function formatRelativeCalendarDate(date: Date, locale = "th"): string {
+  const now = new Date();
+  const fmt = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+  const days = differenceInCalendarDays(date, now);
+  if (Math.abs(days) < 31) return fmt.format(days, "day");
+  const months = differenceInCalendarMonths(date, now);
+  if (Math.abs(months) < 12) return fmt.format(months, "month");
+  return fmt.format(differenceInCalendarYears(date, now), "year");
+}
+
+/** วันที่แบบสัมพัทธ์ภาษาไทย เช่น "วันนี้", "เมื่อวาน", "พรุ่งนี้", "10 วันที่ผ่านมา", "ในอีก 2 เดือน" */
 export function formatRelativeThaiDate(date: Date | string | number | null | undefined): string {
   if (!date) return "ไม่ได้ระบุ";
   const d = new Date(date);
   if (Number.isNaN(d.getTime())) return "ไม่ได้ระบุ";
 
-  // เทียบเป็นวันปฏิทิน (ไม่ใช่ 24 ชม.) และคงเครื่องหมาย — อนาคต 1 วันคือ "พรุ่งนี้" ไม่ใช่ "เมื่อวาน"
-  const diffDays = differenceInCalendarDays(new Date(), d);
-  if (diffDays === 0) return "วันนี้";
-  if (diffDays === 1) return "เมื่อวาน";
-  if (diffDays === -1) return "พรุ่งนี้";
-
-  return formatDistanceToNow(d, { addSuffix: true, locale: th });
+  return formatRelativeCalendarDate(d, "th");
 }
 
 const THAI_MONTH_SHORT = [

package/src/styles.css

@@ -177,6 +177,20 @@
   --destructive-subtle: oklch(0.971 0.013 17.38);
   --destructive-subtle-foreground: oklch(0.444 0.177 26.899);
   --destructive-border: oklch(0.885 0.062 18.334);
+  /* ปุ่มโทน (`Button tone=`) — ตัวอักษร/ขอบ/พื้นตอน hover ของแต่ละโทน · แอป override เป็นสีประเภทรายการของตัวเองได้
+     ตัวอักษร = subtle-foreground ของตระกูลเดียวกัน (วัดแล้ว ≥ 7:1 ทั้งสองธีม) · ขอบ ≥ 3:1 กับพื้น (non-text contrast) */
+  --tone-income: var(--success-subtle-foreground);
+  --tone-income-border: oklch(0.64 0.1 165);
+  --tone-income-hover: var(--success-subtle);
+  --tone-expense: var(--destructive-subtle-foreground);
+  --tone-expense-border: oklch(0.64 0.13 18);
+  --tone-expense-hover: var(--destructive-subtle);
+  --tone-reminder: oklch(0.45 0.15 300);
+  --tone-reminder-border: oklch(0.62 0.12 300);
+  --tone-reminder-hover: oklch(0.97 0.02 300);
+  --tone-warning: var(--warning-subtle-foreground);
+  --tone-warning-border: oklch(0.66 0.13 70);
+  --tone-warning-hover: var(--warning-subtle);
   --border: oklch(0.929 0.013 255.508);
   --input: oklch(0.929 0.013 255.508);
   --ring: oklch(0.704 0.04 256.788);
@@ -236,6 +250,18 @@
   --destructive-subtle: oklch(0.258 0.092 26.042);
   --destructive-subtle-foreground: oklch(0.885 0.062 18.334);
   --destructive-border: oklch(0.396 0.141 25.723);
+  --tone-income: var(--success-subtle-foreground);
+  --tone-income-border: oklch(0.52 0.09 165);
+  --tone-income-hover: var(--success-subtle);
+  --tone-expense: var(--destructive-subtle-foreground);
+  --tone-expense-border: oklch(0.52 0.12 20);
+  --tone-expense-hover: var(--destructive-subtle);
+  --tone-reminder: oklch(0.85 0.07 300);
+  --tone-reminder-border: oklch(0.52 0.12 300);
+  --tone-reminder-hover: oklch(0.28 0.07 300);
+  --tone-warning: var(--warning-subtle-foreground);
+  --tone-warning-border: oklch(0.55 0.11 60);
+  --tone-warning-hover: var(--warning-subtle);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.551 0.027 264.364);