@suphark/ui 0.30.0 → 0.33.0

package/CHANGELOG.md

@@ -2,6 +2,42 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.33.0] — 2026-10-06
+
+### Fixed
+
+- **คอนทราสต์ไม่ผ่าน WCAG AA 3 จุด** (DueBell วัดจากหน้าจริงทั้งสองธีม — ผมคำนวณจาก token ซ้ำได้ตัวเลขตรงกันทุกจุด):
+  - `--info` ธีมสว่าง: `text-info` บนพื้นขาว **4.02:1** → ลดความสว่าง L 0.588 → 0.53 = **5.05:1** (ตัวหนังสือขาวบน `bg-info` ก็ขึ้นเป็น 5.05:1 เท่ากัน) — สีฟ้าเข้มขึ้นเล็กน้อย
+  - `--muted-foreground` ธีมสว่าง: บนพื้น `--muted` **4.35:1** (กระทบ `CountBadge tone="muted"`, แท็บที่ไม่ได้เลือกบน `TabsList`, ป้ายนับใน `SegmentedControl` …) → L 0.554 → 0.52 = **5.02:1** (บนขาว 5.4:1) — ตัวหนังสือรองเข้มขึ้นเล็กน้อยทั้งระบบ
+  - ป้ายนับ `CountBadge tone="destructive"` (รวมปุ่มแจ้งเตือนใน `AppShell`/`MobileTabBar`) ธีมมืด: ตัวหนังสือขาวบน `--destructive` **2.89:1** → token ใหม่ **`--destructive-foreground`** (สว่าง = ขาว 4.76:1, มืด = สีพื้นเข้ม **6.97:1**) — ไม่ลดความสว่างของ `--destructive` ธีมมืดเพราะ `text-destructive` บนพื้นมืดจะไม่ผ่านแทน
+  - ใช้ `text-destructive-foreground` คู่ `bg-destructive` ได้ทุกที่ (ใหม่ใน `@theme`)
+
+## [0.32.0] — 2026-10-06
+
+> แก้บั๊กที่แอปรายงานหลัง 0.30.0 — เดิมเตรียมไว้ใน 0.31.0 แต่ 0.31.0 ถูก publish (12:53 น.) ก่อน commit ทั้งสามนี้ (12:56–13:09 น.) ตรวจ tarball แล้วไม่มี จึงออกเป็น 0.32.0
+
+### Fixed
+
+- **`@suphark/ui/sortable`: แถวกลุ่มไม่ได้อยู่ใน `SortableContext`** (รายงานจาก Pi Config ตอนย้าย `values-table`) — `SortableGroup` สร้าง context ให้เฉพาะรายการในกลุ่ม ส่วนแถวกลุ่มที่ลงทะเบียนด้วย `useSortableRow({ type: "group" })` ไม่มี context ไหนรับ ทำให้ลากกลุ่มแล้วไม่มีการเลื่อนแถวให้เห็นระหว่างลาก (ปล่อยแล้วลำดับยังถูก) — ตอนนี้ `SortableProvider` สร้าง `SortableContext` ชั้นนอกจาก `order.groups` ให้เอง **ไม่ต้องแก้ call site และลำดับใน context หลุดจากลำดับจริงไม่ได้**
+
+- **`ActivityFeed relative={false}` พังทุกแถว** (รายงานจาก Pi Auth): วันที่กลายเป็น `-` และ console เต็มไปด้วย `TypeError: Invalid option` เพราะส่ง `timeStyle` ปนกับ `day`/`month`/`year` ซึ่ง `Intl.DateTimeFormat` ไม่ยอม — ต้นเหตุจริงอยู่ที่ **`ClientDateFormatter` เอา default (`day`/`month`/`year`) ไปผสมกับ options ของผู้เรียกเสมอ** ทำให้ทุกแอปที่ส่ง `dateStyle`/`timeStyle` พังเหมือนกัน; ตอนนี้ถ้าผู้เรียกใช้ `dateStyle`/`timeStyle` จะไม่ผสม default ให้ และ `ActivityFeed` เปลี่ยนไปใช้ `{ dateStyle: "medium", timeStyle: "short" }` (เทสต์ใหม่ครอบทั้งสองชั้น)
+
+### Added
+
+- `prepublishOnly` เรียก `scripts/release-check.mjs` ก่อน publish: working tree ต้องสะอาด, HEAD ต้องตรงกับ `origin/main` หลัง fetch และ CHANGELOG ต้องมีหัวข้อของเวอร์ชันนั้น — กันปล่อยรุ่นที่ขาด commit (เกิดมาแล้ว 3 ครั้ง: 0.17.0, 0.30.0, 0.31.0; ข้อเสนอจาก Pi Auth/Pi Config)
+
+### Changed
+
+- `ActivityFeed`: รับ `locale` แล้วส่งต่อให้ตัวฟอร์แมตวันที่ (ไม่ส่ง = `th-TH` เหมือนเดิม) — เดิมวันที่เป็นไทยตายตัวสำหรับทุกคน แอปสองภาษาจึงแสดงผิดเมื่อผู้ใช้เลือกอังกฤษ (รายงานจาก Pi Auth ตอนทำหน้า audit log); `emptyLabel` ค่าเริ่มต้นย้ายไปอ่านจาก `UiText.activity.empty` (คีย์ใหม่)
+
+## [0.31.0] — 2026-10-06
+
+> 0.30.0 ถูก publish ก่อน commit ของ `NotificationCenter` (ตรวจ tarball แล้วไม่มีไฟล์ `shared/notification-center.tsx`) จึงเลื่อนมาออกเป็น 0.31.0 — ของอื่นใน 0.30.0 อยู่ครบตามรายการข้างล่าง
+
+### Added
+
+- **`NotificationCenter`** — ศูนย์การแจ้งเตือน (ยกจาก DueBell `notification-modal` + `urgent-bills-widget`): ชิปนับหลายกลุ่มที่กดกรองได้ + รายการที่ต้องจัดการ พร้อมปุ่มลัดต่อรายการและเมนู "…" · ออกแบบตามข้อกำหนดที่ DueBell ให้มา — ชิปเป็น array (`counts`) ไม่ใช่ prop ตายตัว, คำสั่งเป็น array (`actions` + `menuActions`), ของโดเมนส่งเป็น node ที่แอปเตรียมแล้ว (`status`/`meta`/`footer` — ยอดเงินที่ซ่อนได้, ความคืบหน้ารอบ), **แพ็กเกจไม่ฟอร์แมตวันที่เอง** และ **ไม่ตัดรายการเอง** (จะจำกัดจำนวนให้แอป slice ก่อนแล้วส่ง `viewAll` — ตัวเลขในชิปจึงตรงกับที่ผู้ใช้เห็นเสมอ); `busy` ปิดปุ่มทุกตัวระหว่างทำคำสั่งลัด · คีย์ `UiText.notifications`
+
 ## [0.30.0] — 2026-10-05
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.30.0",
+  "version": "0.33.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 เอง",
@@ -64,7 +64,7 @@
     "check:typography": "node scripts/audit-tailwind-typography.mjs",
     "verify": "pnpm typecheck && pnpm check:barrel && pnpm lint:base-ui && pnpm check:typography && pnpm test",
     "check:barrel": "node ../../scripts/barrel-exports.mjs",
-    "prepublishOnly": "node ../../scripts/barrel-exports.mjs && tsc --noEmit"
+    "prepublishOnly": "node ../../scripts/release-check.mjs && node ../../scripts/barrel-exports.mjs && tsc --noEmit"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",

package/src/components/design-system/sections/showcase-foundations.tsx

@@ -60,7 +60,7 @@ export function ShowcaseFoundations() {
     },
     {
       name: "Destructive",
-      class: "bg-destructive text-white",
+      class: "bg-destructive text-destructive-foreground",
       token: "var(--destructive)",
       tailwind: "bg-destructive / text-destructive",
       usage: "Irreversible actions, Delete confirmation, Error callouts",

package/src/components/shared/activity-feed.tsx

@@ -2,6 +2,7 @@
 
 import { Initials } from "@suphark/ui/components/shared/initials";
 import { ClientDateFormatter } from "@suphark/ui/components/shared/time/client-date-formatter";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import { cn } from "@suphark/ui/lib/utils";
 import type { ReactNode } from "react";
 
@@ -43,20 +44,27 @@ const DOT_TONE: Record<ActivityTone, string> = {
 export function ActivityFeed({
   items,
   relative = true,
+  locale,
   emptyLabel,
   className,
 }: {
   items: ReadonlyArray<ActivityItem>;
   /** true = "5 นาทีที่แล้ว" (ค่าเริ่มต้น) · false = วันที่/เวลาเต็ม */
   relative?: boolean;
-  /** ไม่มีรายการ (ค่าเริ่มต้น "ยังไม่มีรายการ") */
+  /**
+   * ภาษาของวันที่ เช่น `"en-US"` หรือ `"th-TH-u-ca-gregory"` — ไม่ส่ง = `th-TH` (พ.ศ.)
+   * แอปสองภาษาต้องส่งตาม locale ของผู้ใช้ ไม่งั้นวันที่จะเป็นไทยสำหรับทุกคน
+   */
+  locale?: string;
+  /** ไม่มีรายการ (ไม่ส่ง = `UiText.activity.empty`) */
   emptyLabel?: ReactNode;
   className?: string;
 }) {
+  const text = useUiText();
   if (items.length === 0) {
     return (
       <p className={cn("py-6 text-center text-muted-foreground text-sm", className)}>
-        {emptyLabel ?? "ยังไม่มีรายการ"}
+        {emptyLabel ?? text.activity?.empty ?? "ยังไม่มีรายการ"}
       </p>
     );
   }
@@ -95,12 +103,10 @@ export function ActivityFeed({
                 )}
                 <ClientDateFormatter
                   date={item.at}
+                  locale={locale}
                   formatType={relative ? "relative" : "standard"}
-                  options={
-                    relative
-                      ? undefined
-                      : { day: "numeric", month: "short", year: "numeric", timeStyle: "short" }
-                  }
+                  // Intl ห้ามใช้ dateStyle/timeStyle ปนกับ field รายตัว (day/month/year) — โยน TypeError
+                  options={relative ? undefined : { dateStyle: "medium", timeStyle: "short" }}
                   className="text-muted-foreground text-xs"
                 />
               </div>

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

@@ -29,7 +29,7 @@ export function CountBadge({
         tone === "primary"
           ? "bg-primary text-primary-foreground"
           : tone === "destructive"
-            ? "bg-destructive text-white"
+            ? "bg-destructive text-destructive-foreground"
             : "bg-muted text-muted-foreground",
         className,
       )}

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

@@ -0,0 +1,297 @@
+"use client";
+
+import { ActionMenu } from "@suphark/ui/components/shared/action-menu";
+import { Button } from "@suphark/ui/components/shared/button/button";
+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";
+
+export type NotificationTone = "default" | "info" | "success" | "warning" | "destructive";
+
+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",
+};
+
+const ACTION_TONE: Record<NotificationTone, string> = {
+  default: "",
+  info: "text-info-subtle-foreground",
+  success: "text-success-subtle-foreground",
+  warning: "text-warning-subtle-foreground",
+  destructive: "text-destructive",
+};
+
+export interface NotificationChip {
+  key: string;
+  label: ReactNode;
+  count: number;
+  tone?: NotificationTone;
+  /** กดเพื่อกรอง — ไม่ส่ง = ชิปนับอย่างเดียว */
+  onSelect?: () => void;
+  active?: boolean;
+}
+
+export interface NotificationAction {
+  key: string;
+  label: string;
+  onSelect: () => void;
+  icon?: ReactNode;
+  tone?: NotificationTone;
+  /** ปุ่มหลักของแถว (เด่นกว่าตัวอื่น) — ปกติมีตัวเดียว */
+  primary?: boolean;
+  disabled?: boolean;
+}
+
+export interface NotificationEntry {
+  id: string;
+  title: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  tone?: NotificationTone;
+  /**
+   * สถานะ/กำหนดเวลาที่ **แอปฟอร์แมตมาแล้ว** (เช่น `<DueDateBadge>` หรือ "23 ก.ย. · พรุ่งนี้")
+   * แพ็กเกจไม่ฟอร์แมตวันที่เอง เพราะปี พ.ศ./ภาษาเป็นของแอป
+   */
+  status?: ReactNode;
+  /** บรรทัดเล็กใต้ชื่อ เช่น กลุ่ม · หมวดหมู่ */
+  meta?: ReactNode;
+  /** ท้ายแถว — เรื่องเฉพาะโดเมน เช่นยอดเงิน (ซ่อนได้) หรือความคืบหน้ารอบ */
+  footer?: ReactNode;
+  /** ยังไม่ได้อ่าน — จุดหน้าชื่อ + พื้นจาง */
+  unread?: boolean;
+  /** ปุ่มในแถว (ปุ่มที่ `primary` จะเด่นสุด) */
+  actions?: ReadonlyArray<NotificationAction>;
+  /** คำสั่งรองใน "…" */
+  menuActions?: ReadonlyArray<NotificationAction>;
+  /** คลิกทั้งแถว (ปุ่มในแถว stopPropagation ให้แล้ว) */
+  onSelect?: () => void;
+}
+
+export interface NotificationCenterProps {
+  /**
+   * รายการที่จะแสดง — **แพ็กเกจไม่ตัดรายการเอง** ถ้าจะจำกัดจำนวนให้แอป slice มาก่อน
+   * แล้วส่ง `viewAll` เพื่อพาไปหน้ารวม (ตัวเลขใน `counts` จึงตรงกับสิ่งที่ผู้ใช้เห็นเสมอ)
+   */
+  items: ReadonlyArray<NotificationEntry>;
+  /** ชิปนับด้านบน — กี่กลุ่มก็ได้ (เกินกำหนด / รอตรวจสอบ / ใกล้ถึงกำหนด / เลื่อนเตือนอยู่ …) */
+  counts?: ReadonlyArray<NotificationChip>;
+  title?: ReactNode;
+  description?: ReactNode;
+  /** ไม่มีรายการ — ส่ง element เองได้ทั้งก้อน */
+  empty?: ReactNode;
+  /** ลิงก์/ปุ่ม "ดูทั้งหมด" มุมขวาบน */
+  viewAll?: { label?: ReactNode; onSelect: () => void };
+  /** กำลังทำคำสั่งลัดอยู่ — ปิดปุ่มทั้งหมดกันกดซ้ำ */
+  busy?: boolean;
+  className?: string;
+}
+
+/**
+ * ศูนย์การแจ้งเตือน: ชิปนับ + รายการที่ต้องจัดการ พร้อมปุ่มลัดต่อรายการ (ยกจาก 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 … />,
+ *       footer: <Amount value={b.amount} />, actions: [{ key: "pay", label: "จ่ายเลย", primary: true, onSelect: … }] }))}
+ *     viewAll={{ onSelect: () => router.push("/alerts") }} />
+ */
+export function NotificationCenter({
+  items,
+  counts,
+  title,
+  description,
+  empty,
+  viewAll,
+  busy = false,
+  className,
+}: NotificationCenterProps) {
+  const text = useUiText();
+  const heading = title ?? text.notifications?.title ?? "การแจ้งเตือน";
+
+  return (
+    <section
+      data-slot="notification-center"
+      aria-label={typeof heading === "string" ? heading : undefined}
+      className={cn("flex flex-col gap-3", className)}
+    >
+      <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>
+          {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>
+                );
+              })}
+            </div>
+          )}
+        </div>
+        {viewAll && (
+          <Button variant="ghost" size="sm" onClick={viewAll.onSelect} className="shrink-0">
+            {viewAll.label ?? text.notifications?.viewAll ?? "ดูทั้งหมด"}
+            <ChevronRightIcon />
+          </Button>
+        )}
+      </div>
+
+      {items.length === 0 ? (
+        (empty ?? (
+          <div className="flex flex-col items-center gap-1 py-8 text-center">
+            <BellIcon className="size-8 text-muted-foreground/60" aria-hidden="true" />
+            <p className="font-medium text-sm">
+              {text.notifications?.empty ?? "ไม่มีรายการที่ต้องจัดการ"}
+            </p>
+          </div>
+        ))
+      ) : (
+        <ul className="flex flex-col gap-2">
+          {items.map((item) => (
+            <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);
+  return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: แถวมีปุ่มของตัวเองอยู่แล้ว คลิกทั้งแถวเป็นทางลัดของเมาส์
+    <li
+      data-slot="notification-row"
+      data-unread={item.unread || undefined}
+      onClick={item.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",
+      )}
+    >
+      {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" />
+            )}
+            <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>
+            )}
+          </div>
+        )}
+      </div>
+    </li>
+  );
+}

package/src/components/shared/time/client-date-formatter.tsx

@@ -66,10 +66,14 @@ export function ClientDateFormatter({
       if (formatType === "relative") {
         return formatDistance(dateObj, now, { addSuffix: true, locale: getLocaleObject(locale) });
       }
+      const user: Intl.DateTimeFormatOptions = optionsKey ? JSON.parse(optionsKey) : {};
+      // Intl ห้าม dateStyle/timeStyle ปนกับ field รายตัว (day/month/year/hour…) — โยน TypeError
+      // ผู้เรียกที่ใช้สไตล์จึงต้องไม่ถูกยัด DEFAULT_OPTIONS (day/month/year) เข้าไปด้วย
+      const usesStyle = user.dateStyle !== undefined || user.timeStyle !== undefined;
       const opts: Intl.DateTimeFormatOptions = {
-        ...DEFAULT_OPTIONS,
+        ...(usesStyle ? {} : DEFAULT_OPTIONS),
         timeZone,
-        ...(optionsKey ? (JSON.parse(optionsKey) as Intl.DateTimeFormatOptions) : {}),
+        ...user,
       };
       return getDateTimeFormat(locale, opts).format(dateObj);
     } catch (error) {

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

@@ -65,6 +65,10 @@ export interface UiText {
   }>;
   /** ErrorState เซสชันหมดอายุ (optional) */
   sessionExpired?: Partial<{ title: string; description: string; signIn: string }>;
+  /** ActivityFeed (optional) */
+  activity?: Partial<{ empty: string }>;
+  /** NotificationCenter (optional) */
+  notifications?: Partial<{ title: string; empty: string; viewAll: string }>;
   /** SelectionBar (optional) — `selected` ใช้ `{count}` */
   selection?: Partial<{ selected: string; clear: string }>;
   /** DataTable (optional) — `rowsSelected` ใช้ `{selected}`/`{total}`, `pageOf` ใช้ `{page}`/`{pages}` */
@@ -237,6 +241,12 @@ export const UI_TEXT_TH: UiText = {
       "คุณถูกออกจากระบบระหว่างใช้งาน ข้อมูลที่ยังไม่ได้บันทึกจะหายไป กรุณาเข้าสู่ระบบอีกครั้ง แล้วระบบจะพากลับมาหน้านี้",
     signIn: "เข้าสู่ระบบ",
   },
+  activity: { empty: "ยังไม่มีรายการ" },
+  notifications: {
+    title: "การแจ้งเตือน",
+    empty: "ไม่มีรายการที่ต้องจัดการ",
+    viewAll: "ดูทั้งหมด",
+  },
   selection: { selected: "เลือก {count} รายการ", clear: "ล้างการเลือก" },
   sortable: {
     handle: "ลากเพื่อจัดลำดับ",
@@ -396,6 +406,12 @@ export const UI_TEXT_EN: UiText = {
       "You were signed out while working. Unsaved changes are lost — sign in again and we will bring you back to this page.",
     signIn: "Sign in",
   },
+  activity: { empty: "No activity yet" },
+  notifications: {
+    title: "Notifications",
+    empty: "Nothing needs your attention",
+    viewAll: "View all",
+  },
   selection: { selected: "{count} selected", clear: "Clear selection" },
   sortable: {
     handle: "Drag to reorder",

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

@@ -310,6 +310,8 @@ export function SortableProvider({
     };
   }, [announcements, describe, text.sortable]);
 
+  const groupIds = useMemo(() => order.groups.map((id) => dndId("group", id)), [order.groups]);
+
   const state = useMemo<SortableState>(
     () => ({
       dragging,
@@ -333,7 +335,11 @@ export function SortableProvider({
         onDragEnd={onDragEnd}
         onDragCancel={onDragCancel}
       >
-        {children}
+        {/* ชั้นนอก = ลำดับของกลุ่ม (provider รู้ `order.groups` อยู่แล้ว แอปจึงไม่ต้องสร้างเอง
+            และลำดับใน context หลุดจากลำดับจริงไม่ได้) · ชั้นใน = `SortableGroup` ของแต่ละกลุ่ม */}
+        <SortableContext items={groupIds} strategy={verticalListSortingStrategy}>
+          {children}
+        </SortableContext>
       </DndContext>
     </SortableStateContext.Provider>
   );

package/src/index.ts

@@ -175,6 +175,14 @@ export {
   toIdentifier,
 } from "./components/shared/name-id-fields";
 export { Notice, type NoticeTone } from "./components/shared/notice";
+export {
+  type NotificationAction,
+  NotificationCenter,
+  type NotificationCenterProps,
+  type NotificationChip,
+  type NotificationEntry,
+  type NotificationTone,
+} from "./components/shared/notification-center";
 export { type DecimalLike, FormattedNumber } from "./components/shared/number/formatted-number";
 export { PageHeader } from "./components/shared/page-header";
 export { PageSkeleton } from "./components/shared/page-skeleton";

package/src/styles.css

@@ -45,6 +45,7 @@
   --color-input: var(--input);
   --color-border: var(--border);
   --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
   --color-success: var(--success);
   --color-success-foreground: var(--success-foreground);
   --color-warning: var(--warning);
@@ -148,17 +149,21 @@
   --secondary: oklch(0.968 0.007 247.896);
   --secondary-foreground: oklch(0.208 0.042 265.755);
   --muted: oklch(0.968 0.007 247.896);
-  --muted-foreground: oklch(0.554 0.046 257.417);
+  /* 0.554 → 0.52: บนพื้น --muted (แท็บ, ป้ายนับ, ช่อง disabled) เดิมได้ 4.35:1 ไม่ผ่าน AA → 5.02:1 (บนขาว 5.4:1) */
+  --muted-foreground: oklch(0.52 0.046 257.417);
   --accent: oklch(0.968 0.007 247.896);
   --accent-foreground: oklch(0.208 0.042 265.755);
   --destructive: oklch(0.577 0.245 27.325);
+  /* ตัวหนังสือบนพื้น --destructive (ป้ายนับแจ้งเตือน) — ขาว 4.76:1 */
+  --destructive-foreground: oklch(1 0 0);
   --success: oklch(0.527 0.154 150.069);
   --success-foreground: oklch(0.985 0.002 247.839);
   --warning: oklch(0.852 0.199 91.936);
   --warning-foreground: oklch(0.286 0.066 53.813);
   --warning-muted-foreground: oklch(0.421 0.095 57.708);
   /* โทน: ค่าเท่า Tailwind sky/emerald/amber/red ที่ Notice/StatusBadge เคยใช้ตรง ๆ (50 พื้น · 200 ขอบ · 800 ตัวอักษร) */
-  --info: oklch(0.588 0.158 241.966);
+  /* 0.588 → 0.53: `text-info` บนขาวเดิม 4.02:1 ไม่ผ่าน AA → 5.05:1 (ตัวหนังสือขาวบน bg-info ก็ผ่านเท่ากัน) */
+  --info: oklch(0.53 0.158 241.966);
   --info-foreground: oklch(0.984 0.003 247.858);
   --info-subtle: oklch(0.977 0.013 236.62);
   --info-subtle-foreground: oklch(0.443 0.11 240.79);
@@ -208,6 +213,9 @@
   --accent: oklch(0.279 0.041 260.031);
   --accent-foreground: oklch(0.984 0.003 247.858);
   --destructive: oklch(0.704 0.191 22.216);
+  /* ขาวบน --destructive ธีมมืด = 2.89:1 ไม่ผ่าน — ใช้สีพื้นหลังมืดเป็นตัวหนังสือ = 6.97:1
+     (ไม่ลดความสว่างของ --destructive เพราะ text-destructive บนพื้นมืดจะไม่ผ่านแทน) */
+  --destructive-foreground: oklch(0.129 0.042 264.695);
   --success: oklch(0.627 0.194 149.214);
   --success-foreground: oklch(0.145 0.028 147.727);
   --warning: oklch(0.852 0.199 91.936);