@suphark/ui 0.31.0 → 0.33.0

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 รูปแบบตาม [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 อยู่ครบตามรายการข้างล่าง

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.31.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/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,8 @@ 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}` */
@@ -239,6 +241,7 @@ export const UI_TEXT_TH: UiText = {
       "คุณถูกออกจากระบบระหว่างใช้งาน ข้อมูลที่ยังไม่ได้บันทึกจะหายไป กรุณาเข้าสู่ระบบอีกครั้ง แล้วระบบจะพากลับมาหน้านี้",
     signIn: "เข้าสู่ระบบ",
   },
+  activity: { empty: "ยังไม่มีรายการ" },
   notifications: {
     title: "การแจ้งเตือน",
     empty: "ไม่มีรายการที่ต้องจัดการ",
@@ -403,6 +406,7 @@ 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",

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/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);