@suphark/ui 0.31.0 → 0.34.0

package/CHANGELOG.md

@@ -2,6 +2,42 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.34.0] — 2026-10-06
+
+### Fixed
+
+- **`SortableProvider` ทำ hydration mismatch ทุกหน้าที่ SSR** (รายงานจาก Pi Config ตอนลากบนของจริง): ไม่ได้ส่ง `id` ให้ `DndContext` → dnd-kit สร้าง `aria-describedby="DndDescribedBy-N"` จากตัวนับที่เดินไม่ตรงกันระหว่าง server กับ client, React 19 ขึ้น error และ **ไม่ซ่อมให้** — attribute ค้างชี้ element ที่ไม่มีอยู่ ผู้ใช้ screen reader จึงไม่ได้ยินคำอธิบายวิธีลาก · ตอนนี้ค่าเริ่มต้นเป็น `useId()` (ตรงกันทั้งสองฝั่ง) และรับ prop **`id`** สำหรับ id ที่สื่อความหมาย — กระทบทุกแอปที่ใช้ `@suphark/ui/sortable` ใน Next.js
+- `@suphark/ui/sortable`: เสียงประกาศระหว่างลากในกลุ่มเดียวกันบอกตำแหน่ง **เดิม** ซ้ำ ("ย้ายไปตำแหน่งที่ 1 จาก 2" ทั้งที่เลื่อนลงแล้ว) เพราะลำดับจริงเปลี่ยนตอนปล่อย — ตอนนี้ระหว่างลากประกาศตำแหน่งของเป้าหมาย และตอนปล่อยประกาศตำแหน่งจริงหลังย้าย (เจอระหว่างทดสอบลากด้วยคีย์บอร์ดตามที่ Pi Config ถาม; ลากด้วยคีย์บอร์ดเองทำงานถูกอยู่แล้ว)
+- showcase: `/components/sortable-list` ย้ายแถว "ลากมาที่นี่เพื่อเอาออกจากกลุ่ม" ไปท้ายตาราง — เดิมโผล่เหนือกลุ่มตอนเริ่มลาก ดันแถวที่กำลังลากลง จนลากคีย์ในกลุ่มด้วยคีย์บอร์ดไม่ขยับ (README เพิ่มคำเตือนนี้ + เรื่อง `id`)
+
+## [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/README.md

@@ -217,7 +217,8 @@ const [order, setOrder] = useState(() =>
 </SortableProvider>
 ```
 
-- กลุ่มที่ไม่มีหัวกลุ่ม (เช่น "ยังไม่จัดกลุ่ม") ใช้ `useSortableDropZone(groupId)` แปะกับแถว placeholder ของตัวเอง และดูว่าควรแสดงเมื่อไหร่จาก `useSortableState().dragging`
+- กลุ่มที่ไม่มีหัวกลุ่ม (เช่น "ยังไม่จัดกลุ่ม") ใช้ `useSortableDropZone(groupId)` แปะกับแถว placeholder ของตัวเอง และดูว่าควรแสดงเมื่อไหร่จาก `useSortableState().dragging` — **วางแถวนี้ไว้ใต้แถวที่ลากได้ทั้งหมด (ท้ายตาราง)** ถ้ามันโผล่ขึ้นเหนือแถวที่กำลังลาก layout จะเลื่อนตอนเริ่มลาก แล้วการลากด้วยคีย์บอร์ดจะไม่ขยับ
+- ตั้ง `id` ของ `SortableProvider` ได้ (ไม่ตั้ง = `useId()`) — ต้องคงที่ระหว่าง SSR กับ client ไม่งั้น `aria-describedby` ของ dnd-kit จะ hydration mismatch
 - `onCommit` ล้มเหลว (throw หรือ `{ ok: false, error }`) = คืนลำดับเดิม + toast; ถ้าอยากจัดการ error เองใส่ `onCommitError`
 - `sortableOrderToPayload(order)` คืน `{ groups, items }` — `groups` คือลำดับของกลุ่ม, `items` คือรายการในแต่ละกลุ่มเรียงตามนั้น (ของที่ยังไม่มีกลุ่มมาก่อนด้วย `groupId: null`)
 - `SortableProvider disabled` (เช่นระหว่างกรอง ซึ่งลำดับที่เห็นไม่ใช่ลำดับจริง) ทำให้ `DragHandle` จางลงและกดไม่ได้ — ไม่อยากให้เห็นเลยใส่ `hideWhenDisabled`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.31.0",
+  "version": "0.34.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

@@ -41,6 +41,7 @@ import {
   type ReactNode,
   useCallback,
   useContext,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -131,6 +132,13 @@ export interface SortableProviderProps {
    * ไม่ส่ง = แม่แบบจาก `UiText.sortable` (`{index}` / `{total}`)
    */
   announcements?: SortableAnnouncements;
+  /**
+   * id ของ `DndContext` — ต้องคงที่ระหว่าง SSR กับ client ไม่งั้น `aria-describedby="DndDescribedBy-N"`
+   * ที่ dnd-kit สร้างจากตัวนับจะไม่ตรงกัน (hydration mismatch ที่ React ไม่ซ่อมให้ → screen reader
+   * ไม่ได้ยินคำอธิบายวิธีลาก) · ไม่ส่ง = `useId()` ซึ่งตรงกันทั้งสองฝั่งอยู่แล้ว · ส่ง id ที่สื่อความหมาย
+   * (เช่น `values-${environmentId}`) ช่วยตอนไล่ปัญหา
+   */
+  id?: string;
   children: ReactNode;
 }
 
@@ -152,8 +160,10 @@ export function SortableProvider({
   onCommitError,
   screenReaderInstructions,
   announcements,
+  id,
   children,
 }: SortableProviderProps) {
+  const fallbackId = useId();
   const text = useUiText();
   const [dragging, setDragging] = useState<SortableKind | null>(null);
   const beforeDrag = useRef<SortableOrder | null>(null);
@@ -271,6 +281,31 @@ export function SortableProvider({
     };
   }, []);
 
+  /**
+   * ตำแหน่งที่ "จะไปวาง" ระหว่างลาก — ในกลุ่มเดียวกันลำดับจริงยังไม่เปลี่ยนจนกว่าจะปล่อย
+   * (เดิมประกาศตำแหน่งเดิมซ้ำ เช่น "ตำแหน่งที่ 1" ทั้งที่เลื่อนลงมาแล้ว) จึงใช้ตำแหน่งของเป้าหมายแทน
+   * ข้ามกลุ่มไม่ต้องทำอะไร — onDragOver ย้ายเข้ากลุ่มใหม่ใน order ไปแล้ว
+   */
+  const describeTarget = useCallback(
+    (activeId: UniqueIdentifier, overId: UniqueIdentifier | null): SortableAnnouncementContext => {
+      const base = describe(activeId);
+      if (overId === null || overId === activeId) return base;
+      const current = latest.current;
+      if (base.kind === "group" && kindOf(overId) === "g") {
+        const at = current.groups.indexOf(rawOf(overId));
+        return at >= 0 ? { ...base, index: at + 1 } : base;
+      }
+      if (base.kind === "item" && kindOf(overId) === "i") {
+        const group = groupOfItem(current, rawOf(overId));
+        if (!group || group !== base.groupId) return base;
+        const at = (current.items[group] ?? []).indexOf(rawOf(overId));
+        return at >= 0 ? { ...base, index: at + 1 } : base;
+      }
+      return base;
+    },
+    [describe],
+  );
+
   const dndAnnouncements = useMemo(() => {
     const fill = (
       template: string | undefined,
@@ -285,9 +320,19 @@ export function SortableProvider({
         own: ((context: SortableAnnouncementContext) => string | undefined) | undefined,
         template: string | undefined,
         fallback: string,
+        // ระหว่างลาก = ตำแหน่งของเป้าหมาย; ตอนปล่อย order อัปเดตแล้ว จึงใช้ตำแหน่งจริงของตัวที่ลาก
+        useTarget = false,
       ) =>
-      ({ active }: { active: { id: UniqueIdentifier } }) => {
-        const context = describe(active.id);
+      ({
+        active,
+        over,
+      }: {
+        active: { id: UniqueIdentifier };
+        over?: { id: UniqueIdentifier } | null;
+      }) => {
+        const context = useTarget
+          ? describeTarget(active.id, over?.id ?? null)
+          : describe(active.id);
         return own?.(context) ?? fill(template, fallback, context);
       };
     return {
@@ -300,6 +345,7 @@ export function SortableProvider({
         announcements?.onDragOver,
         text.sortable?.moved,
         "ย้ายไปตำแหน่งที่ {index} จาก {total}",
+        true,
       ),
       onDragEnd: announce(
         announcements?.onDragEnd,
@@ -308,7 +354,9 @@ export function SortableProvider({
       ),
       onDragCancel: announce(announcements?.onDragCancel, text.sortable?.cancelled, "ยกเลิกการลาก"),
     };
-  }, [announcements, describe, text.sortable]);
+  }, [announcements, describeTarget, text.sortable]);
+
+  const groupIds = useMemo(() => order.groups.map((id) => dndId("group", id)), [order.groups]);
 
   const state = useMemo<SortableState>(
     () => ({
@@ -322,6 +370,7 @@ export function SortableProvider({
   return (
     <SortableStateContext.Provider value={state}>
       <DndContext
+        id={id ?? fallbackId}
         sensors={sensors}
         collisionDetection={collision}
         accessibility={{
@@ -333,7 +382,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);