@suphark/ui 0.25.0 → 0.25.1

package/src/components/shared/form/time-picker.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { Button } from "@suphark/ui/components/ui/button";
-import { Calendar } from "@suphark/ui/components/ui/calendar";
 import {
   InputGroup,
   InputGroupAddon,
@@ -10,15 +9,14 @@ import {
 } from "@suphark/ui/components/ui/input-group";
 import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
 import { cn } from "@suphark/ui/lib/utils";
-import { CalendarClockIcon, ClockIcon } from "lucide-react";
+import { ClockIcon } from "lucide-react";
 import { type KeyboardEvent, useEffect, useId, useRef, useState } from "react";
-import { th } from "react-day-picker/locale";
 import { useUiText } from "../ui-text";
 
 /** "HH:mm" 24 ชั่วโมง */
 export type TimeValue = string;
 
-const pad = (n: number) => String(n).padStart(2, "0");
+export const pad = (n: number) => String(n).padStart(2, "0");
 
 /**
  * แปลงข้อความที่พิมพ์เป็น "HH:mm": "14:30" "14.30" "1430" "930" "9" "9:5" → null ถ้าไม่ใช่เวลาที่ถูกต้อง
@@ -47,7 +45,7 @@ export function parseTimeInput(input: string): TimeValue | null {
   return `${pad(h)}:${pad(m)}`;
 }
 
-function splitTime(value: TimeValue | null | undefined): [number, number] | null {
+export function splitTime(value: TimeValue | null | undefined): [number, number] | null {
   const parsed = value ? parseTimeInput(value) : null;
   if (!parsed) return null;
   const [h, m] = parsed.split(":").map(Number);
@@ -70,11 +68,12 @@ function TimeColumn({
   const listRef = useRef<HTMLDivElement>(null);
   const optionId = (v: number) => `${baseId}-${v}`;
 
-  // เลื่อนให้ค่าที่เลือกอยู่กลางคอลัมน์ทุกครั้งที่เปลี่ยน
+  // เลื่อนเฉพาะในคอลัมน์ให้ค่าที่เลือกอยู่กลาง — ไม่ใช้ scrollIntoView เพราะจะเลื่อนทั้งหน้าไปด้วย
   useEffect(() => {
-    if (selected == null) return;
-    const el = listRef.current?.querySelector<HTMLElement>(`[data-value="${selected}"]`);
-    el?.scrollIntoView?.({ block: "center" });
+    const list = listRef.current;
+    if (selected == null || !list) return;
+    const el = list.querySelector<HTMLElement>(`[data-value="${selected}"]`);
+    if (el) list.scrollTop = el.offsetTop - (list.clientHeight - el.offsetHeight) / 2;
   }, [selected]);
 
   const onKeyDown = (e: KeyboardEvent) => {
@@ -98,7 +97,7 @@ function TimeColumn({
       aria-label={label}
       aria-activedescendant={selected == null ? undefined : optionId(selected)}
       onKeyDown={onKeyDown}
-      className="no-scrollbar flex max-h-56 w-14 flex-col gap-0.5 overflow-y-auto rounded-md p-0.5 outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+      className="no-scrollbar relative flex max-h-56 w-14 flex-col gap-0.5 overflow-y-auto rounded-md p-0.5 outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
     >
       {options.map((v) => (
         <div
@@ -161,7 +160,12 @@ export function TimeColumns({
   );
 }
 
-function useControllable<T>(value: T | undefined, defaultValue: T, onChange?: (v: T) => void) {
+/** state แบบ controlled/uncontrolled (ใช้ร่วมกับ DateTimePicker) */
+export function useControllable<T>(
+  value: T | undefined,
+  defaultValue: T,
+  onChange?: (v: T) => void,
+) {
   const [inner, setInner] = useState(defaultValue);
   const controlled = value !== undefined;
   const current = controlled ? value : inner;
@@ -219,6 +223,13 @@ export function TimePicker({
   const [draft, setDraft] = useState<string | null>(null);
   const [open, setOpen] = useState(false);
   const draftInvalid = draft != null && draft.trim() !== "" && parseTimeInput(draft) == null;
+  const invalidMessage = text?.invalid ?? "รูปแบบเวลาไม่ถูกต้อง (เช่น 14:30)";
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // ข้อความที่พิมพ์ผิด = ช่องนี้ invalid จริง → ฟอร์มไม่ส่ง (ไม่งั้น input ซ่อนจะส่งค่าเดิมไปเงียบ ๆ)
+  useEffect(() => {
+    inputRef.current?.setCustomValidity(draftInvalid ? invalidMessage : "");
+  }, [draftInvalid, invalidMessage]);
 
   const commitDraft = () => {
     if (draft == null) return;
@@ -237,6 +248,7 @@ export function TimePicker({
   return (
     <InputGroup data-slot="time-picker" className={cn("w-32", className)}>
       <InputGroupInput
+        ref={inputRef}
         id={id}
         inputMode="numeric"
         autoComplete="off"
@@ -307,115 +319,3 @@ export function TimePicker({
 export function toLocalDateTimeString(date: Date): string {
   return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
 }
-
-/**
- * เลือกวัน + เวลาในกล่องเดียว (ปฏิทิน + คอลัมน์ชั่วโมง/นาที) — นัดหมาย, กำหนดส่ง, เวลาเตือน
- * ค่าเป็น `Date | null`; เลือกวันก่อนเวลา = ใช้ `defaultTime`; `name` ส่ง "YYYY-MM-DDTHH:mm" (เวลาท้องถิ่น) ใน FormData
- *
- *   <DateTimePicker value={dueAt} onValueChange={setDueAt} minuteStep={15} />
- */
-export function DateTimePicker({
-  value,
-  defaultValue = null,
-  onValueChange,
-  minuteStep = 5,
-  defaultTime = "09:00",
-  name,
-  id,
-  disabled,
-  placeholder,
-  className,
-  "aria-label": ariaLabel,
-  "aria-invalid": ariaInvalid,
-}: {
-  value?: Date | null;
-  defaultValue?: Date | null;
-  onValueChange?: (value: Date | null) => void;
-  minuteStep?: number;
-  /** เวลาที่ใช้เมื่อเลือกวันครั้งแรก */
-  defaultTime?: TimeValue;
-  name?: string;
-  id?: string;
-  disabled?: boolean;
-  placeholder?: string;
-  className?: string;
-  "aria-label"?: string;
-  "aria-invalid"?: boolean;
-}) {
-  const ui = useUiText();
-  const text = ui.time;
-  const [date, setDate] = useControllable<Date | null>(value, defaultValue, onValueChange);
-  const [open, setOpen] = useState(false);
-  const time = date ? `${pad(date.getHours())}:${pad(date.getMinutes())}` : null;
-
-  const withTime = (day: Date, t: TimeValue) => {
-    const [h, m] = splitTime(t) ?? [9, 0];
-    const d = new Date(day);
-    d.setHours(h, m, 0, 0);
-    return d;
-  };
-
-  const label = date
-    ? date.toLocaleString("th-TH", { dateStyle: "medium", timeStyle: "short" })
-    : (placeholder ?? text?.dateTimePlaceholder ?? "เลือกวันและเวลา");
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger
-        render={
-          <Button
-            id={id}
-            type="button"
-            variant="outline"
-            disabled={disabled}
-            aria-label={ariaLabel}
-            aria-invalid={ariaInvalid || undefined}
-            data-slot="date-time-picker"
-            className={cn(
-              "w-full justify-start gap-2 font-normal",
-              !date && "text-muted-foreground",
-              className,
-            )}
-          />
-        }
-      >
-        <CalendarClockIcon className="text-muted-foreground" />
-        <span className="truncate">{label}</span>
-      </PopoverTrigger>
-      {name && <input type="hidden" name={name} value={date ? toLocalDateTimeString(date) : ""} />}
-      <PopoverContent align="start" className="w-auto gap-0 p-0">
-        <div className="flex flex-col sm:flex-row">
-          <Calendar
-            mode="single"
-            locale={th}
-            selected={date ?? undefined}
-            defaultMonth={date ?? undefined}
-            onSelect={(day) => day && setDate(withTime(day, time ?? defaultTime))}
-            className="p-3"
-          />
-          <div className="flex justify-center border-t p-2 sm:border-t-0 sm:border-l">
-            <TimeColumns
-              value={time}
-              minuteStep={minuteStep}
-              onValueChange={(t) => setDate(withTime(date ?? new Date(), t))}
-            />
-          </div>
-        </div>
-        <div className="flex justify-between gap-2 border-t p-2">
-          <Button
-            type="button"
-            size="xs"
-            variant="ghost"
-            disabled={!date}
-            onClick={() => setDate(null)}
-          >
-            {text?.clear ?? "ล้าง"}
-          </Button>
-          <Button type="button" size="xs" onClick={() => setOpen(false)}>
-            {ui.done}
-          </Button>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}

package/src/components/shared/month-stepper.tsx

@@ -38,6 +38,9 @@ export interface MonthStepperProps {
  *   const { month, setMonth } = useMonthCursor();
  *   <MonthStepper value={month} onValueChange={setMonth} />
  */
+/** "เดือนนี้" ของ MonthStepper/useMonthCursor คิดตามเวลาไทย — แอปของเราใช้ในไทย และต้องได้ค่าเดียวกันทั้ง server และ browser */
+const APP_TIME_ZONE = "Asia/Bangkok";
+
 export function MonthStepper({
   value,
   onValueChange,
@@ -54,7 +57,8 @@ export function MonthStepper({
   const next = shiftMonth(value, 1);
   const canPrev = !min || compareMonth(prev, min) >= 0;
   const canNext = !max || compareMonth(next, max) <= 0;
-  const now = currentMonthKey();
+  // โซนเวลาคงที่: server (UTC) กับ browser ได้เดือนเดียวกัน — ไม่งั้นช่วง 00–07 น. วันที่ 1 จะ hydration mismatch
+  const now = currentMonthKey(undefined, APP_TIME_ZONE);
   const nowInRange = (!min || compareMonth(now, min) >= 0) && (!max || compareMonth(now, max) <= 0);
   const label = formatLabel ? formatLabel(value) : formatMonthKey(value, locale, format);
   const isCurrent = value === now;
@@ -112,13 +116,15 @@ export function MonthStepper({
 }
 
 /**
- * state เดือนปัจจุบัน + ตัวเลื่อน — `initial` ไม่ส่ง = เดือนนี้
+ * state เดือนปัจจุบัน + ตัวเลื่อน — `initial` ไม่ส่ง = เดือนนี้ (ตามเวลาไทย เพื่อให้ server/browser ตรงกัน)
  * ต้องการเก็บใน URL ให้ใช้ `useTableSearchParams`/searchParams ของแอปแทน แล้วส่ง value/onValueChange เอง
  */
 export function useMonthCursor(initial?: MonthKey) {
-  const [month, setMonth] = useState<MonthKey>(() => initial ?? currentMonthKey());
+  const [month, setMonth] = useState<MonthKey>(
+    () => initial ?? currentMonthKey(undefined, APP_TIME_ZONE),
+  );
   const previous = useCallback(() => setMonth((m) => shiftMonth(m, -1)), []);
   const next = useCallback(() => setMonth((m) => shiftMonth(m, 1)), []);
-  const reset = useCallback(() => setMonth(currentMonthKey()), []);
+  const reset = useCallback(() => setMonth(currentMonthKey(undefined, APP_TIME_ZONE)), []);
   return { month, setMonth, previous, next, reset };
 }

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

@@ -13,7 +13,7 @@ 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 { errorMessage, failedResult } from "./button/confirm-action-button";
 import { ConfirmDialog, type ConfirmSpec, normalizeConfirm } from "./confirm-dialog";
 import { useUiText } from "./ui-text";
 
@@ -58,10 +58,16 @@ 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 () => {
+        const fallback = text.actionFailed ?? "ดำเนินการไม่สำเร็จ";
         try {
-          await act(fd);
+          // คืน { ok: false, error } (FormState) ก็ถือว่าล้มเหลวเหมือน throw
+          const failed = failedResult(await act(fd), fallback);
+          if (failed) {
+            toast.error(failed);
+            return;
+          }
         } catch (err) {
-          toast.error(errorMessage(err, text.actionFailed ?? "ดำเนินการไม่สำเร็จ"));
+          toast.error(errorMessage(err, fallback));
           return;
         }
         router.refresh();

package/src/components/shared/settings-layout.tsx

@@ -2,7 +2,7 @@
 
 import { cn } from "@suphark/ui/lib/utils";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { type ReactNode, useEffect, useId, useMemo, useRef, useState } from "react";
+import { type ReactNode, useId, useMemo, useRef, useState } from "react";
 import { SearchInput } from "./form/search-input";
 import { useUiText } from "./ui-text";
 
@@ -53,6 +53,7 @@ export function SettingsLayout({
   const [mobileDetail, setMobileDetail] = useState(false);
   const [query, setQuery] = useState("");
   const headingRef = useRef<HTMLHeadingElement>(null);
+  const navRef = useRef<HTMLElement>(null);
 
   const visible = useMemo(() => {
     const q = query.trim().toLowerCase();
@@ -71,12 +72,20 @@ export function SettingsLayout({
     if (valueProp === undefined) setInner(id);
     onValueChange?.(id);
     setMobileDetail(true);
+    // มือถือ: รายการหัวข้อถูกซ่อน → ย้ายโฟกัสไปหัวข้อ ให้ screen reader รู้ว่าเนื้อหาเปลี่ยน
+    // (จอกว้างเห็นทั้งสองฝั่ง โฟกัสอยู่ที่รายการต่อได้ — ไม่ย้าย)
+    if (!window.matchMedia?.("(min-width: 48rem)").matches) {
+      requestAnimationFrame(() => headingRef.current?.focus({ preventScroll: true }));
+    }
   };
 
-  // เข้าหน้าหัวข้อบนมือถือ → ย้ายโฟกัสไปหัวข้อ ให้ screen reader รู้ว่าเนื้อหาเปลี่ยน
-  useEffect(() => {
-    if (mobileDetail) headingRef.current?.focus({ preventScroll: true });
-  }, [mobileDetail]);
+  /** มือถือ: กลับไปรายการ — ปุ่ม "กลับ" ถูกซ่อน จึงคืนโฟกัสให้หัวข้อที่เพิ่งเปิด (ไม่งั้นโฟกัสหลุดไป body) */
+  const back = (id: string) => {
+    setMobileDetail(false);
+    requestAnimationFrame(() =>
+      navRef.current?.querySelector<HTMLElement>(`[data-section-id="${CSS.escape(id)}"]`)?.focus(),
+    );
+  };
 
   if (!current) return null;
 
@@ -87,6 +96,7 @@ export function SettingsLayout({
       className={cn("grid gap-6 md:grid-cols-[14rem_minmax(0,1fr)] lg:gap-8", className)}
     >
       <nav
+        ref={navRef}
         aria-label={text.settings?.label ?? "หัวข้อการตั้งค่า"}
         className={cn(
           "flex flex-col gap-3 md:sticky md:top-20 md:self-start",
@@ -108,6 +118,7 @@ export function SettingsLayout({
                 <li key={s.id}>
                   <button
                     type="button"
+                    data-section-id={s.id}
                     onClick={() => select(s.id)}
                     aria-current={selected ? "page" : undefined}
                     className={cn(
@@ -144,7 +155,7 @@ export function SettingsLayout({
       >
         <button
           type="button"
-          onClick={() => setMobileDetail(false)}
+          onClick={() => back(current.id)}
           className="-ml-1 flex w-fit items-center gap-1 rounded-md px-1 py-1 text-muted-foreground text-sm outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring md:hidden"
         >
           <ChevronLeft className="size-4" aria-hidden />

package/src/components/shared/step-form.tsx

@@ -26,12 +26,17 @@ const CONTROLS = "input, select, textarea";
  */
 function reportSection(section: HTMLElement | null): true | false | string {
   if (!section) return true;
-  for (const el of section.querySelectorAll<HTMLInputElement>(CONTROLS)) {
+  const controls = [...section.querySelectorAll<HTMLInputElement>(CONTROLS)];
+  for (const [i, el] of controls.entries()) {
     if (el.type === "hidden" || el.disabled) continue;
     if (!el.checkValidity()) {
       if (el.getAttribute("aria-hidden") === "true") {
-        // โฟกัสช่องที่มองเห็นในกลุ่มเดียวกัน (ถ้ามี)
-        el.parentElement?.querySelector<HTMLElement>("input:not([aria-hidden=true])")?.focus();
+        // input ซ่อนของ Base UI อยู่ถัดจากช่องที่มองเห็นของมัน → โฟกัสช่องที่มองเห็นตัวก่อนหน้าที่ใกล้ที่สุด
+        controls
+          .slice(0, i)
+          .reverse()
+          .find((c) => c.getAttribute("aria-hidden") !== "true" && c.type !== "hidden")
+          ?.focus();
         return el.validationMessage || "ค่าไม่ถูกต้อง";
       }
       el.reportValidity();
@@ -83,6 +88,10 @@ export function StepForm({
   const sectionRefs = useRef<(HTMLElement | null)[]>([]);
   const headingRefs = useRef<(HTMLHeadingElement | null)[]>([]);
   const moved = useRef(false);
+  /** กันส่งซ้ำแบบ synchronous (state pending อัปเดตไม่ทันดับเบิลคลิก) */
+  const busy = useRef(false);
+  /** เวลาที่เปลี่ยนขั้นล่าสุด — คลิกที่สองของดับเบิลคลิก "ถัดไป" ตกที่ปุ่ม "ส่ง" ตำแหน่งเดิม */
+  const movedAt = useRef(0);
   const last = steps.length - 1;
   const step = steps[current];
 
@@ -94,6 +103,7 @@ export function StepForm({
 
   const go = (index: number) => {
     moved.current = true;
+    movedAt.current = Date.now();
     setError(null);
     setCurrent(index);
     setReached((r) => Math.max(r, index));
@@ -121,7 +131,18 @@ export function StepForm({
 
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    if (pending) return;
+    if (busy.current) return;
+    // ปุ่ม "ถัดไป" กลายเป็น "ส่ง" ที่ตำแหน่งเดิม — คลิกที่มาเร็วเกินหลังเปลี่ยนขั้นไม่นับเป็นการส่ง (ผู้ใช้ยังไม่ได้เห็นหน้าตรวจทาน)
+    if (current === last && Date.now() - movedAt.current < 500) return;
+    busy.current = true;
+    try {
+      await submitStep();
+    } finally {
+      busy.current = false;
+    }
+  };
+
+  const submitStep = async () => {
     setError(null);
     if (current < last) {
       if (await check(current)) go(current + 1);

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

@@ -4,7 +4,8 @@ import { useMounted } from "@suphark/ui/hooks/use-mounted";
 import { useTicker } from "@suphark/ui/hooks/use-ticker";
 import { getDateTimeFormat } from "@suphark/ui/lib/intl-cache";
 import { formatDistance, type Locale } from "date-fns";
-import { enUS, th } from "date-fns/locale";
+import { enUS } from "date-fns/locale/en-US";
+import { th } from "date-fns/locale/th";
 import { useMemo } from "react";
 
 interface ClientDateFormatterProps {

package/src/components/shared/tree-view.tsx

@@ -88,8 +88,12 @@ export function TreeView({
   className,
 }: TreeViewProps) {
   const [uncontrolledExpanded, setUncontrolledExpanded] = useState(() => toSet(defaultExpandedIds));
-  const expanded =
-    controlledExpanded !== undefined ? toSet(controlledExpanded) : uncontrolledExpanded;
+  // Set ใหม่ทุก render ทำให้ memo ของ rows คำนวณใหม่ทุกครั้ง — สร้างเมื่อ prop เปลี่ยนเท่านั้น
+  const controlledSet = useMemo(
+    () => (controlledExpanded !== undefined ? toSet(controlledExpanded) : null),
+    [controlledExpanded],
+  );
+  const expanded = controlledSet ?? uncontrolledExpanded;
   const [loaded, setLoaded] = useState<Map<string, TreeNode[]>>(() => new Map());
   const [loading, setLoading] = useState<Set<string>>(() => new Set());
   const [focusId, setFocusId] = useState<string | null>(null);

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

@@ -99,6 +99,7 @@ export interface UiText {
     now: string;
     clear: string;
     dateTimePlaceholder: string;
+    invalid: string;
   }>;
   /** TagsInput (optional) — remove ใช้ {tag}, duplicate ใช้ {tag}, max ใช้ {max} */
   tags?: Partial<{ placeholder: string; remove: string; duplicate: string; max: string }>;
@@ -185,6 +186,7 @@ export const UI_TEXT_TH: UiText = {
     now: "ตอนนี้",
     clear: "ล้าง",
     dateTimePlaceholder: "เลือกวันและเวลา",
+    invalid: "รูปแบบเวลาไม่ถูกต้อง (เช่น 14:30)",
   },
   tags: {
     placeholder: "พิมพ์แล้วกด Enter",
@@ -274,6 +276,7 @@ export const UI_TEXT_EN: UiText = {
     now: "Now",
     clear: "Clear",
     dateTimePlaceholder: "Pick date and time",
+    invalid: "Invalid time (e.g. 14:30)",
   },
   tags: {
     placeholder: "Type and press Enter",

package/src/hooks/use-table-search-params.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { useCallback, useMemo, useTransition } from "react";
+import { useCallback, useEffect, useMemo, useRef, useTransition } from "react";
 
 /**
  * เก็บ state ของตาราง (หน้า, ขนาดหน้า, การเรียง, คำค้น, ตัวกรอง) ไว้ใน URL
@@ -71,10 +71,18 @@ export function useTableSearchParams(defaults?: { pageSize?: number }) {
     };
   }, [searchParams, defaults?.pageSize]);
 
+  // setter หลายตัวในจังหวะเดียว (เช่น setFilter แล้ว setSort) ต้องต่อจากค่าที่เพิ่งตั้ง ไม่ใช่ searchParams ตอน render
+  // (router.replace ยังไม่ทันเปลี่ยน URL → ตัวหลังเขียนทับตัวแรก) — ล้างเมื่อ URL เปลี่ยนจริงแล้ว
+  const latest = useRef<string | null>(null);
+  useEffect(() => {
+    latest.current = null;
+  }, [searchParams]);
+
   const push = useCallback(
     (mutate: (params: URLSearchParams) => void) => {
-      const params = new URLSearchParams(searchParams.toString());
+      const params = new URLSearchParams(latest.current ?? searchParams.toString());
       mutate(params);
+      latest.current = params.toString();
       startTransition(() => {
         router.replace(`${pathname}?${params.toString()}`, { scroll: false });
       });

package/src/hooks/use-ticker.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useSyncExternalStore } from "react";
+import { useCallback, useSyncExternalStore } from "react";
 
 /**
  * นาฬิกากลางต่อ interval — ทุก component ที่ขอ interval เท่ากันแชร์ `setInterval` ตัวเดียว
@@ -45,9 +45,15 @@ const zero = () => 0;
  */
 export function useTicker(intervalMs: number | undefined): number {
   const active = typeof intervalMs === "number" && intervalMs > 0;
-  return useSyncExternalStore(
-    active ? (l) => subscribe(intervalMs, l) : subscribeNoop,
-    active ? () => getTicker(intervalMs).tick : zero,
-    zero,
+  // subscribe ต้องคงที่ข้าม render — ฟังก์ชันใหม่ทุก render ทำให้ unsubscribe/subscribe ใหม่
+  // (ผู้ใช้ตัวเดียว = clearInterval แล้วเริ่มนับใหม่ทุกครั้งที่ parent render → ถ้า render บ่อยกว่า interval จะไม่ tick เลย)
+  const subscribeActive = useCallback(
+    (listener: () => void) => (active ? subscribe(intervalMs, listener) : subscribeNoop()),
+    [active, intervalMs],
   );
+  const getSnapshot = useCallback(
+    () => (active ? getTicker(intervalMs).tick : 0),
+    [active, intervalMs],
+  );
+  return useSyncExternalStore(subscribeActive, getSnapshot, zero);
 }

package/src/index.ts

@@ -90,6 +90,7 @@ export { EmptyState } from "./components/shared/empty-state";
 export { EnvSnippet, randomSecret } from "./components/shared/env-snippet";
 export { type FileKind, FileTypeIcon, getFileKind } from "./components/shared/file-type-icon";
 export { FilterBar, type FilterBarFilter } from "./components/shared/filter-bar";
+export { DateTimePicker } from "./components/shared/form/date-time-picker";
 export { FormFieldBoolean } from "./components/shared/form/form-field-boolean";
 export { FormFieldColorSelect } from "./components/shared/form/form-field-color-select";
 export { FormFieldCombobox } from "./components/shared/form/form-field-combobox";
@@ -117,7 +118,6 @@ export { SliderField, type SliderFieldProps } from "./components/shared/form/sli
 export { TagsInput } from "./components/shared/form/tags-input";
 export { TextareaField } from "./components/shared/form/textarea-field";
 export {
-  DateTimePicker,
   parseTimeInput,
   TimeColumns,
   TimePicker,

package/src/lib/formatters.ts

@@ -1,5 +1,5 @@
 import { differenceInCalendarDays, formatDistanceToNow } from "date-fns";
-import { th } from "date-fns/locale";
+import { th } from "date-fns/locale/th";
 
 /**
  * ฟอร์แมตวันที่แบบไทยที่ primitives ใช้ร่วมกัน (DatePicker, RelativeDate)

package/src/lib/month.ts

@@ -29,8 +29,20 @@ export function toMonthKey(date: Date): MonthKey {
   return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
 }
 
-export function currentMonthKey(now: Date = new Date()): MonthKey {
-  return toMonthKey(now);
+/**
+ * เดือนปัจจุบัน — ไม่ส่ง `timeZone` = โซนเวลาของเครื่อง
+ * ส่ง `timeZone` (เช่น "Asia/Bangkok") เมื่อค่าถูกคำนวณทั้งบน server (UTC) และ browser แล้วต้องตรงกัน (กัน hydration mismatch ต้นเดือน)
+ */
+export function currentMonthKey(now: Date = new Date(), timeZone?: string): MonthKey {
+  if (!timeZone) return toMonthKey(now);
+  const parts = new Intl.DateTimeFormat("en-CA", {
+    timeZone,
+    year: "numeric",
+    month: "2-digit",
+  }).formatToParts(now);
+  const year = parts.find((p) => p.type === "year")?.value ?? String(now.getFullYear());
+  const month = parts.find((p) => p.type === "month")?.value ?? "01";
+  return `${year}-${month}`;
 }
 
 /** เลื่อนเดือน (ลบ = ย้อนหลัง) ข้ามปีให้เอง: shiftMonth("2026-01", -1) → "2025-12" */