@suphark/ui 0.4.3 → 0.5.1

package/src/components/shared/dialogs-provider.tsx

@@ -0,0 +1,270 @@
+"use client";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@suphark/ui/components/ui/alert-dialog";
+import { Checkbox } from "@suphark/ui/components/ui/checkbox";
+import { Input } from "@suphark/ui/components/ui/input";
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { type ConfirmSpec, normalizeConfirm } from "./confirm-dialog";
+import { useUiText } from "./ui-text";
+
+type BaseSpec = Exclude<ConfirmSpec, string>;
+
+/** `alert()` — ปุ่มเดียว (ตกลง) */
+export type AlertSpec = ConfirmSpec;
+/** `prompt()` — ช่องกรอกข้อความ resolve string หรือ null เมื่อยกเลิก */
+export type PromptSpec =
+  | string
+  | (BaseSpec & {
+      defaultValue?: string;
+      placeholder?: string;
+    });
+export interface ChoiceOption {
+  label: ReactNode;
+  value: string;
+  variant?: "default" | "destructive" | "outline";
+}
+/** `choose()` — ปุ่มหลายทางเลือก resolve value ของปุ่มที่กด หรือ null เมื่อยกเลิก */
+export interface ChoiceSpec extends Omit<BaseSpec, "confirmLabel" | "destructive"> {
+  choices: ChoiceOption[];
+}
+export interface ChecklistOption {
+  label: ReactNode;
+  value: string;
+  description?: ReactNode;
+  defaultChecked?: boolean;
+}
+/** `checklist()` — ติ๊กเลือกหลายรายการ resolve value[] ที่เลือก หรือ null เมื่อยกเลิก */
+export interface ChecklistSpec extends BaseSpec {
+  options: ChecklistOption[];
+}
+
+export interface Dialogs {
+  alert: (spec: AlertSpec) => Promise<void>;
+  confirm: (spec: ConfirmSpec) => Promise<boolean>;
+  prompt: (spec: PromptSpec) => Promise<string | null>;
+  choose: (spec: ChoiceSpec) => Promise<string | null>;
+  checklist: (spec: ChecklistSpec) => Promise<string[] | null>;
+}
+
+type Mode = "alert" | "confirm" | "prompt" | "choice" | "checklist";
+type Request = BaseSpec & {
+  mode: Mode;
+  placeholder?: string;
+  choices?: ChoiceOption[];
+  options?: ChecklistOption[];
+};
+type Result = boolean | string | string[] | null;
+
+const DialogsContext = createContext<Dialogs | null>(null);
+
+/**
+ * กล่องโต้ตอบแบบ promise ทั้งแอป (แทน `window.alert/confirm/prompt`) — ครอบครั้งเดียวที่ root แล้วเรียก
+ * `useDialogs()` จากที่ไหนก็ได้ โดยไม่ต้อง render อะไรในต้นไม้ของผู้เรียก (ต่างจาก `useConfirm()`)
+ *
+ *   const dialogs = useDialogs();
+ *   if (!(await dialogs.confirm({ description: "ลบโครงการนี้?", destructive: true }))) return;
+ *   const name = await dialogs.prompt({ description: "ชื่อโครงการใหม่", defaultValue: project.name });
+ *   const action = await dialogs.choose({ description: "ทำอย่างไรกับงานข้างใน?", choices: [
+ *     { label: "ลบทั้งหมด", value: "delete", variant: "destructive" },
+ *     { label: "ย้ายไป Inbox", value: "inbox" },
+ *   ] });
+ *   const picked = await dialogs.checklist({ description: "เลือกคอลัมน์", options: [{ label: "ชื่อ", value: "name", defaultChecked: true }] });
+ *
+ * เปิดคำขอใหม่ขณะกล่องเปิดอยู่ → คำขอเดิม resolve เป็นค่ายกเลิก (false/null) แล้วแสดงคำขอใหม่แทน
+ * ข้อความค่าเริ่มต้น (หัว/ปุ่ม) มาจาก `UiText` — ส่ง `title`/`confirmLabel`/`cancelLabel` เพื่อปรับต่อครั้ง
+ */
+export function DialogsProvider({ children }: { children: ReactNode }) {
+  const text = useUiText();
+  const [request, setRequest] = useState<Request | null>(null);
+  const [promptValue, setPromptValue] = useState("");
+  const [checked, setChecked] = useState<string[]>([]);
+  const resolveRef = useRef<((value: Result) => void) | null>(null);
+
+  const open = useCallback((next: Request, resolve: (value: Result) => void) => {
+    // คำขอที่ค้างอยู่ถือว่ายกเลิก
+    resolveRef.current?.(next.mode === "confirm" || next.mode === "alert" ? false : null);
+    resolveRef.current = resolve;
+    setRequest(next);
+  }, []);
+
+  const settle = useCallback((value: Result) => {
+    resolveRef.current?.(value);
+    resolveRef.current = null;
+    setRequest(null);
+    setPromptValue("");
+    setChecked([]);
+  }, []);
+
+  const dialogs = useMemo<Dialogs>(
+    () => ({
+      alert: (spec) =>
+        new Promise((resolve) => {
+          open({ ...normalizeConfirm(spec), mode: "alert" }, () => resolve());
+        }),
+      confirm: (spec) =>
+        new Promise((resolve) => {
+          open({ ...normalizeConfirm(spec), mode: "confirm" }, (value) => resolve(value === true));
+        }),
+      prompt: (spec) =>
+        new Promise((resolve) => {
+          const options = typeof spec === "string" ? { description: spec } : spec;
+          setPromptValue(options.defaultValue ?? "");
+          open({ ...options, mode: "prompt" }, (value) =>
+            resolve(typeof value === "string" ? value : null),
+          );
+        }),
+      choose: (spec) =>
+        new Promise((resolve) => {
+          open({ ...spec, mode: "choice" }, (value) =>
+            resolve(typeof value === "string" ? value : null),
+          );
+        }),
+      checklist: (spec) =>
+        new Promise((resolve) => {
+          setChecked(spec.options.filter((o) => o.defaultChecked).map((o) => o.value));
+          open({ ...spec, mode: "checklist" }, (value) =>
+            resolve(Array.isArray(value) ? value : null),
+          );
+        }),
+    }),
+    [open],
+  );
+
+  const cancelValue: Result = request?.mode === "confirm" ? false : null;
+  const titleByMode: Record<Mode, string> = {
+    alert: text.alertTitle ?? "แจ้งให้ทราบ",
+    confirm: text.confirmTitle ?? "ยืนยันการทำรายการ",
+    prompt: text.promptTitle ?? "กรอกข้อมูล",
+    choice: text.chooseTitle ?? "เลือกการทำรายการ",
+    checklist: text.checklistTitle ?? "เลือกรายการ",
+  };
+  const confirmLabelByMode: Record<Mode, string> = {
+    alert: text.ok ?? "ตกลง",
+    confirm: text.confirm ?? "ยืนยัน",
+    prompt: text.save,
+    choice: "",
+    checklist: text.confirm ?? "ยืนยัน",
+  };
+
+  const confirmResult = (): Result => {
+    if (!request) return null;
+    if (request.mode === "prompt") return promptValue;
+    if (request.mode === "checklist") return checked;
+    return true;
+  };
+
+  return (
+    <DialogsContext.Provider value={dialogs}>
+      {children}
+      <AlertDialog open={request !== null} onOpenChange={(o) => !o && settle(cancelValue)}>
+        {request && (
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>{request.title ?? titleByMode[request.mode]}</AlertDialogTitle>
+              <AlertDialogDescription>{request.description}</AlertDialogDescription>
+            </AlertDialogHeader>
+
+            {request.mode === "prompt" && (
+              <Input
+                autoFocus
+                value={promptValue}
+                placeholder={request.placeholder}
+                onChange={(event) => setPromptValue(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") {
+                    event.preventDefault();
+                    settle(promptValue);
+                  }
+                }}
+              />
+            )}
+
+            {request.mode === "checklist" && (
+              <div className="flex flex-col gap-2">
+                {request.options?.map((option) => {
+                  const isChecked = checked.includes(option.value);
+                  return (
+                    <label
+                      key={option.value}
+                      className="flex cursor-pointer items-start gap-3 rounded-lg border px-3 py-2.5 transition-colors hover:bg-muted/50"
+                    >
+                      <Checkbox
+                        className="mt-0.5"
+                        checked={isChecked}
+                        onCheckedChange={(next) =>
+                          setChecked((current) =>
+                            next
+                              ? Array.from(new Set([...current, option.value]))
+                              : current.filter((v) => v !== option.value),
+                          )
+                        }
+                      />
+                      <span className="flex min-w-0 flex-1 flex-col gap-0.5 text-left">
+                        <span className="text-sm font-medium">{option.label}</span>
+                        {option.description && (
+                          <span className="text-xs text-muted-foreground">
+                            {option.description}
+                          </span>
+                        )}
+                      </span>
+                    </label>
+                  );
+                })}
+              </div>
+            )}
+
+            <AlertDialogFooter>
+              {request.mode !== "alert" && (
+                <AlertDialogCancel>{request.cancelLabel ?? text.cancel}</AlertDialogCancel>
+              )}
+              {request.mode === "choice" ? (
+                request.choices?.map((choice) => (
+                  <AlertDialogAction
+                    key={choice.value}
+                    variant={choice.variant ?? "default"}
+                    onClick={() => settle(choice.value)}
+                  >
+                    {choice.label}
+                  </AlertDialogAction>
+                ))
+              ) : (
+                <AlertDialogAction
+                  variant={request.destructive ? "destructive" : "default"}
+                  onClick={() => settle(confirmResult())}
+                >
+                  {request.confirmLabel ?? confirmLabelByMode[request.mode]}
+                </AlertDialogAction>
+              )}
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        )}
+      </AlertDialog>
+    </DialogsContext.Provider>
+  );
+}
+
+/** ใช้ได้ทุกที่ใต้ `DialogsProvider` */
+export function useDialogs(): Dialogs {
+  const dialogs = useContext(DialogsContext);
+  if (!dialogs) {
+    throw new Error("useDialogs() ต้องอยู่ใต้ <DialogsProvider> (ครอบที่ root layout)");
+  }
+  return dialogs;
+}

package/src/components/shared/form/form-field-combobox.tsx

@@ -131,7 +131,7 @@ export function FormFieldCombobox<T extends FieldValues>({
                       {options.map((option) => (
                         <CommandItem
                           key={option.value}
-                          value={`${option.label} ${option.subLabel || ""}`}
+                          value={`${option.label} ${option.subLabel || ""} ${option.value}`}
                           onSelect={() => {
                             field.onChange(option.value === field.value ? "" : option.value);
                             onSelect?.(option);

package/src/components/shared/form/form-field-input.tsx

@@ -128,7 +128,7 @@ function AutocompleteInput<T extends FieldValues>({
               {data.map((option) => (
                 <CommandItem
                   key={option.value}
-                  value={option.label}
+                  value={`${option.label} ${option.value}`}
                   onSelect={() => {
                     field.onChange(option.value as PathValue<T, Path<T>>);
                     setOpen(false);
@@ -307,7 +307,13 @@ export function FormFieldInput<T extends FieldValues>({
 
                 const handleNumericChange = (e: React.ChangeEvent<HTMLInputElement>) => {
                   const rawValue = e.target.value.replace(/,/g, "");
-                  if (rawValue === "" || rawValue === "-" || rawValue.endsWith(".")) {
+                  // คงเป็น string ระหว่างพิมพ์ทศนิยมที่ยังไม่จบ ("1.", "1.0", "2.50") — แปลงเป็น number จะทำให้ 0 ท้ายหาย
+                  if (
+                    rawValue === "" ||
+                    rawValue === "-" ||
+                    rawValue.endsWith(".") ||
+                    /\.\d*0$/.test(rawValue)
+                  ) {
                     field.onChange(rawValue as PathValue<T, Path<T>>);
                     return;
                   }

package/src/components/shared/form/form-field-radio-cards.tsx

@@ -59,7 +59,7 @@ export function FormFieldRadioCards<T extends FieldValues = any>({
               <Label
                 htmlFor={id}
                 className={cn(
-                  "flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 transition-all hover:border-primary hover:bg-accent peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/5",
+                  "flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 transition-all hover:border-primary hover:bg-accent peer-data-checked:border-primary peer-data-checked:bg-primary/5",
                   size === "sm" && "min-h-[70px] gap-1 p-2",
                   size === "md" && "min-h-[100px] gap-2 p-4",
                   size === "lg" && "min-h-[120px] gap-4 p-6",

package/src/components/shared/form/form-field-select.tsx

@@ -76,6 +76,11 @@ type FormFieldSelectProps<T extends FieldValues> = BaseProps<T> &
       }
   );
 
+/** ค่าให้ cmdk ระบุ/ค้นหารายการ — ต่อ value ท้าย label กัน label ซ้ำแล้วรายการชนกัน */
+function commandValue(option: SelectOption): string {
+  return `${option.searchableValue || option.label} ${option.value}`;
+}
+
 // --- Combobox Internal Logic ---
 function ComboboxContent<T extends FieldValues>({
   field,
@@ -106,9 +111,7 @@ function ComboboxContent<T extends FieldValues>({
   const fieldVal = field.value ?? "";
   const selectedOption = options.find((option) => option.value === fieldVal);
   const selectedLabel = selectedOption?.label || placeholder;
-  const selectedCommandValue = selectedOption
-    ? selectedOption.searchableValue || selectedOption.label
-    : undefined;
+  const selectedCommandValue = selectedOption ? commandValue(selectedOption) : undefined;
 
   return (
     <Popover open={open} onOpenChange={setOpen} modal={modal}>
@@ -139,7 +142,7 @@ function ComboboxContent<T extends FieldValues>({
               {options.map((option) => (
                 <CommandItem
                   key={option.value}
-                  value={option.searchableValue || option.label}
+                  value={commandValue(option)}
                   onSelect={() => {
                     field.onChange(
                       (option.value === fieldVal ? "" : option.value) as PathValue<T, Path<T>>,
@@ -279,7 +282,8 @@ export function FormFieldSelect<T extends FieldValues>({
               onValueChange={(val) => {
                 if (val !== null) {
                   field.onChange(val);
-                  if (props.variant === "select" && props.onValueChange) {
+                  // variant ไม่ส่ง = select (ค่าเริ่มต้น) — ต้องเรียก callback ด้วย
+                  if ("onValueChange" in props && props.onValueChange) {
                     props.onValueChange(val as any);
                   }
                 }

package/src/components/shared/layout/error-state.tsx

@@ -20,6 +20,13 @@ interface ErrorStateProps {
   description?: string;
   /** ซ่อนปุ่มกลับหน้าหลัก เช่นในหน้า auth ที่ผู้ใช้ยังไม่ได้ล็อกอิน */
   hideHomeButton?: boolean;
+  /**
+   * endpoint ตรวจเซสชัน (คืน 401 หรือ JSON ที่มี `user`) — ส่งมาเมื่อต้องการให้แยก "เซสชันหมดอายุ"
+   * ออกจาก error ทั่วไป (supplychain: `/api/auth/get-session`); ไม่ส่ง = ไม่ตรวจ แสดง error ทั่วไปเสมอ
+   */
+  sessionCheckUrl?: string;
+  /** หน้าเข้าสู่ระบบเมื่อเซสชันหมดอายุ (ค่าเริ่มต้น `/sign-in`) — ต่อ `?redirect_url=` ให้ */
+  signInHref?: string;
   className?: string;
 }
 
@@ -43,6 +50,8 @@ export function ErrorState({
   title = "เกิดข้อผิดพลาด",
   description = "ระบบไม่สามารถแสดงหน้านี้ได้ในขณะนี้ กรุณาลองใหม่อีกครั้ง หากยังพบปัญหาโปรดแจ้งผู้ดูแลระบบ",
   hideHomeButton = false,
+  sessionCheckUrl,
+  signInHref = "/sign-in",
   className,
 }: ErrorStateProps) {
   const [sessionExpired, setSessionExpired] = useState(false);
@@ -53,12 +62,14 @@ export function ErrorState({
   }, [error]);
 
   useEffect(() => {
-    if (!looksLikeBrokenActionResponse(error)) return;
+    // ไม่มี endpoint ให้ตรวจ = ไม่เดา (แอปที่ไม่มี route นี้จะได้ 404 แล้วถูกตีความผิดว่าเซสชันหมดอายุ)
+    if (!sessionCheckUrl || !looksLikeBrokenActionResponse(error)) return;
     let cancelled = false;
-    fetch("/api/auth/get-session", { credentials: "include", cache: "no-store" })
+    fetch(sessionCheckUrl, { credentials: "include", cache: "no-store" })
       .then(async (response) => {
         if (cancelled) return;
         if (response.status === 401) return setSessionExpired(true);
+        if (!response.ok) return; // 404/500 = ตรวจไม่ได้ ไม่ใช่เซสชันหมดอายุ
         const body = await response.json().catch(() => null);
         if (!body || !(body as { user?: unknown }).user) setSessionExpired(true);
       })
@@ -68,10 +79,10 @@ export function ErrorState({
     return () => {
       cancelled = true;
     };
-  }, [error]);
+  }, [error, sessionCheckUrl]);
 
   if (sessionExpired) {
-    const signInHref = `/sign-in?redirect_url=${encodeURIComponent(
+    const signInUrl = `${signInHref}?redirect_url=${encodeURIComponent(
       typeof window === "undefined" ? "/" : window.location.href,
     )}`;
     return (
@@ -98,7 +109,7 @@ export function ErrorState({
             <div className="flex justify-center pt-2">
               {/* full page load เพื่อให้ proxy/เซสชันเริ่มใหม่สะอาด ๆ */}
               {/* eslint-disable-next-line @next/next/no-html-link-for-pages */}
-              <a href={signInHref} className={cn(buttonVariants())}>
+              <a href={signInUrl} className={cn(buttonVariants())}>
                 <LogIn className="mr-2 h-4 w-4" />
                 เข้าสู่ระบบ
               </a>

package/src/components/shared/link/transition-link.tsx

@@ -46,6 +46,8 @@ export function TransitionLink({
     }
 
     if (e.defaultPrevented) return;
+    // Ctrl/⌘/Shift+click หรือคลิกกลาง = ผู้ใช้ต้องการเปิดแท็บ/หน้าต่างใหม่ → ปล่อยให้ browser จัดการ
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
 
     e.preventDefault();
     startTransition(() => {

package/src/components/shared/row-actions.tsx

@@ -9,8 +9,11 @@ import {
   DropdownMenuTrigger,
 } from "@suphark/ui/components/ui/dropdown-menu";
 import { MoreHorizontalIcon } from "lucide-react";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
+import { toast } from "sonner";
+import { errorMessage } from "./button/confirm-action-button";
 import { ConfirmDialog, type ConfirmSpec, normalizeConfirm } from "./confirm-dialog";
 import { useUiText } from "./ui-text";
 
@@ -55,7 +58,12 @@ export function RowActions({ items, label }: { items: RowAction[]; label?: strin
       for (const [k, v] of Object.entries(it.data ?? {})) fd.set(k, v);
       const act = it.action;
       start(async () => {
-        await act(fd);
+        try {
+          await act(fd);
+        } catch (err) {
+          toast.error(errorMessage(err, text.actionFailed ?? "ดำเนินการไม่สำเร็จ"));
+          return;
+        }
         router.refresh();
       });
     }
@@ -87,10 +95,12 @@ export function RowActions({ items, label }: { items: RowAction[]; label?: strin
                 key={it.label}
                 variant={it.destructive ? "destructive" : "default"}
                 disabled={it.disabled}
+                // ลิงก์ที่ไม่ต้องยืนยัน render เป็น <a> จริง → Ctrl/⌘+click, คลิกกลาง, เปิดแท็บใหม่ได้
+                render={it.href && !it.confirm ? <Link href={it.href} /> : undefined}
                 onClick={() => {
                   setOpen(false);
                   if (it.confirm) setConfirming(it);
-                  else run(it);
+                  else if (!it.href) run(it);
                 }}
               >
                 {it.label}

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

@@ -18,6 +18,18 @@ export interface UiText {
   confirm?: string;
   /** ConfirmDialog: หัวกล่อง (optional — ค่าเริ่มต้น "ยืนยันการทำรายการ") */
   confirmTitle?: string;
+  /** RowActions/ConfirmActionButton: action โยน error (optional — ค่าเริ่มต้น "ดำเนินการไม่สำเร็จ") */
+  actionFailed?: string;
+  /** DialogsProvider: ปุ่มปิดของ alert (optional — ค่าเริ่มต้น "ตกลง") */
+  ok?: string;
+  /** DialogsProvider: หัวกล่อง alert (optional — ค่าเริ่มต้น "แจ้งให้ทราบ") */
+  alertTitle?: string;
+  /** DialogsProvider: หัวกล่อง prompt (optional — ค่าเริ่มต้น "กรอกข้อมูล") */
+  promptTitle?: string;
+  /** DialogsProvider: หัวกล่อง choose (optional — ค่าเริ่มต้น "เลือกการทำรายการ") */
+  chooseTitle?: string;
+  /** DialogsProvider: หัวกล่อง checklist (optional — ค่าเริ่มต้น "เลือกรายการ") */
+  checklistTitle?: string;
 }
 
 export const UI_TEXT_TH: UiText = {
@@ -32,6 +44,12 @@ export const UI_TEXT_TH: UiText = {
   copyFailed: "คัดลอกอัตโนมัติไม่ได้ — เลือกข้อความให้แล้ว กด Ctrl+C / ⌘C",
   confirm: "ยืนยัน",
   confirmTitle: "ยืนยันการทำรายการ",
+  actionFailed: "ดำเนินการไม่สำเร็จ",
+  ok: "ตกลง",
+  alertTitle: "แจ้งให้ทราบ",
+  promptTitle: "กรอกข้อมูล",
+  chooseTitle: "เลือกการทำรายการ",
+  checklistTitle: "เลือกรายการ",
 };
 
 export const UI_TEXT_EN: UiText = {
@@ -46,6 +64,12 @@ export const UI_TEXT_EN: UiText = {
   copyFailed: "Automatic copy is blocked — text selected, press Ctrl+C / ⌘C",
   confirm: "Confirm",
   confirmTitle: "Please confirm",
+  actionFailed: "Action failed",
+  ok: "OK",
+  alertTitle: "Notice",
+  promptTitle: "Input required",
+  chooseTitle: "Choose an action",
+  checklistTitle: "Choose options",
 };
 
 const UiTextContext = createContext<UiText>(UI_TEXT_TH);

package/src/components/ui/relative-date.tsx

@@ -2,39 +2,69 @@
 
 import { formatRelativeThaiDate, formatThaiFullDate } from "@suphark/ui/lib/formatters";
 import { Calendar } from "lucide-react";
+import { useSyncExternalStore } from "react";
 
 interface RelativeDateProps {
   date: Date | string | number | null | undefined;
   showIcon?: boolean;
   className?: string;
   iconClassName?: string;
+  /** ข้อความนำหน้าใน tooltip (ค่าเริ่มต้น "วันที่") เช่น "วันที่อ้างอิงราคา" */
+  titlePrefix?: string;
+  /** ข้อความเมื่อไม่มีวันที่ */
+  emptyText?: string;
 }
 
+// true เฉพาะฝั่ง client หลัง hydrate — server/ตอน hydrate ได้ false เสมอ
+const subscribeNoop = () => () => {};
+const useMounted = () =>
+  useSyncExternalStore(
+    subscribeNoop,
+    () => true,
+    () => false,
+  );
+
+/**
+ * วันที่แบบสัมพัทธ์ภาษาไทย ("วันนี้", "เมื่อวาน", "3 วันที่ผ่านมา") + วันที่เต็มใน tooltip
+ * คำนวณเฉพาะฝั่ง client หลัง mount: "ตอนนี้" ของ server (UTC, module โหลดไว้ก่อน) กับของ browser
+ * ต่างกันได้ทั้งโซนเวลาและข้ามวัน → ถ้า render บน server จะ hydration mismatch (เจอจริงบน Vercel)
+ */
 export function RelativeDate({
   date,
   showIcon = true,
-  className = "flex items-center gap-0.5 text-slate-600 font-medium",
-  iconClassName = "h-2.5 w-2.5 text-slate-400 shrink-0",
+  className = "flex items-center gap-0.5 font-medium text-muted-foreground",
+  iconClassName = "h-2.5 w-2.5 shrink-0 text-muted-foreground/60",
+  titlePrefix = "วันที่",
+  emptyText = "ไม่ได้ระบุ",
 }: RelativeDateProps) {
+  const mounted = useMounted();
+
   if (!date) {
     return (
       <span
-        className="flex items-center gap-0.5 font-normal text-slate-400 text-xs italic"
-        title="ยังไม่ได้ระบุวันที่อ้างอิงราคา (Price Reference Date)"
+        className="flex items-center gap-0.5 font-normal text-muted-foreground text-xs italic"
+        title={`${titlePrefix}: ${emptyText}`}
       >
         {showIcon && <Calendar className={iconClassName} />}
-        ไม่ได้ระบุ
+        {emptyText}
       </span>
     );
   }
 
-  const relativeText = formatRelativeThaiDate(date);
-  const fullText = formatThaiFullDate(date);
+  // ก่อน mount แสดงตัวยึดที่ไม่ขึ้นกับเวลา (กัน layout กระโดดน้อยที่สุด)
+  if (!mounted) {
+    return (
+      <span className={className} aria-hidden="true">
+        {showIcon && <Calendar className={iconClassName} />}
+        &nbsp;
+      </span>
+    );
+  }
 
   return (
-    <span className={className} title={`วันที่อ้างอิงราคาจริง: ${fullText}`}>
+    <span className={className} title={`${titlePrefix}: ${formatThaiFullDate(date)}`}>
       {showIcon && <Calendar className={iconClassName} />}
-      {relativeText}
+      {formatRelativeThaiDate(date)}
     </span>
   );
 }

package/src/hooks/use-tracked-state.ts

@@ -0,0 +1,35 @@
+"use client";
+
+import { type Dispatch, type SetStateAction, useCallback, useRef, useState } from "react";
+
+/**
+ * `useState` + getter ที่อัปเดตทันที (synchronous) — สำหรับ optimistic UI
+ *
+ * callback ที่คำนวณ "รายการถัดไป" จากรายการปัจจุบันห้ามอ่านค่าตอน render:
+ * mutation สองครั้งใน tick เดียว (drag-and-drop, automation, bulk action) จะเริ่มจาก
+ * รายการเก่าทั้งคู่ และครั้งที่สองทับครั้งแรกเงียบ ๆ — `getLatest()` คืนค่าจาก `set` ครั้งล่าสุดเสมอ
+ * แม้ React ยังไม่ commit
+ *
+ *   const [tasks, setTasks, getLatestTasks] = useTrackedState<Task[]>([]);
+ *   function move(id: string, to: string) {
+ *     const current = getLatestTasks(); // ไม่ใช่ `tasks`
+ *     setTasks(current.map((t) => (t.id === id ? { ...t, section: to } : t)));
+ *   }
+ */
+export function useTrackedState<T>(
+  initial: T | (() => T),
+): readonly [T, Dispatch<SetStateAction<T>>, () => T] {
+  const [state, setState] = useState(initial);
+  const latestRef = useRef(state);
+
+  const set = useCallback<Dispatch<SetStateAction<T>>>((update) => {
+    const next =
+      typeof update === "function" ? (update as (previous: T) => T)(latestRef.current) : update;
+    latestRef.current = next;
+    setState(next);
+  }, []);
+
+  const getLatest = useCallback(() => latestRef.current, []);
+
+  return [state, set, getLatest] as const;
+}

package/src/index.ts

@@ -24,6 +24,17 @@ export {
 export { DataList, DataRow } from "./components/shared/data-list";
 export { DateRangePicker } from "./components/shared/date/date-range-picker";
 export { DescriptionList } from "./components/shared/description-list";
+export {
+  type AlertSpec,
+  type ChecklistOption,
+  type ChecklistSpec,
+  type ChoiceOption,
+  type ChoiceSpec,
+  type Dialogs,
+  DialogsProvider,
+  type PromptSpec,
+  useDialogs,
+} from "./components/shared/dialogs-provider";
 export { EmptyRow } from "./components/shared/empty-row";
 export { EmptyState } from "./components/shared/empty-state";
 export { EnvSnippet, randomSecret } from "./components/shared/env-snippet";
@@ -145,6 +156,7 @@ export * from "./components/ui/tooltip";
 export { useConfirm } from "./hooks/use-confirm";
 export { useCopyToClipboard } from "./hooks/use-copy-to-clipboard";
 export { useIsMobile } from "./hooks/use-mobile";
+export { useTrackedState } from "./hooks/use-tracked-state";
 export { copyText, selectContents } from "./lib/copy-text";
 export { formatRelativeThaiDate, formatThaiFullDate } from "./lib/formatters";
 export {