@suphark/ui 0.25.1 → 0.26.1

package/src/components/shared/button/base/action-button.tsx

@@ -1,12 +1,7 @@
 "use client";
 
 import { Button } from "@suphark/ui/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@suphark/ui/components/ui/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@suphark/ui/components/ui/tooltip";
 import {
   type CheckPermissionOptions,
   type CheckPermissionRequirement,
@@ -118,14 +113,12 @@ export function ActionButton({
   // 5. Wrap with Tooltip if provided or auto-generated
   if (finalTooltip) {
     return (
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger render={buttonContent as React.ReactElement} />
-          <TooltipContent side={tooltipSide}>
-            {typeof finalTooltip === "string" ? <p>{finalTooltip}</p> : finalTooltip}
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger delay={0} render={buttonContent as React.ReactElement} />
+        <TooltipContent side={tooltipSide}>
+          {typeof finalTooltip === "string" ? <p>{finalTooltip}</p> : finalTooltip}
+        </TooltipContent>
+      </Tooltip>
     );
   }
 

package/src/components/shared/button/base/link-button.tsx

@@ -2,12 +2,7 @@
 
 // [FIX 1.1] นำเข้าเฉพาะ Button
 import { Button } from "@suphark/ui/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@suphark/ui/components/ui/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@suphark/ui/components/ui/tooltip";
 import {
   type CheckPermissionOptions,
   type CheckPermissionRequirement,
@@ -114,14 +109,10 @@ export function LinkButton({
   // 3. Wrap with Tooltip if provided
   if (tooltip) {
     return (
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger render={buttonContent as React.ReactElement} />
-          <TooltipContent>
-            {typeof tooltip === "string" ? <p>{tooltip}</p> : tooltip}
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger delay={0} render={buttonContent as React.ReactElement} />
+        <TooltipContent>{typeof tooltip === "string" ? <p>{tooltip}</p> : tooltip}</TooltipContent>
+      </Tooltip>
     );
   }
 

package/src/components/shared/button/confirm-action-button.tsx

@@ -10,23 +10,13 @@ import {
   normalizeConfirm,
 } from "@suphark/ui/components/shared/confirm-dialog";
 import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import { errorMessage, failedResult, isNavigationError } from "@suphark/ui/lib/action-result";
 import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
 import { toast } from "sonner";
 
-/** ข้อความจาก error ที่แสดงให้ผู้ใช้ได้ (Error.message ที่ไม่ว่าง ไม่งั้นใช้ fallback) */
-export function errorMessage(err: unknown, fallback: string): string {
-  return err instanceof Error && err.message ? err.message : fallback;
-}
-
-/** action คืน `FormState` แบบ `{ ok: false, error }` (ไม่ได้ throw) = ล้มเหลว → ข้อความ error; อย่างอื่น = null */
-export function failedResult(result: unknown, fallback: string): string | null {
-  if (result && typeof result === "object" && "ok" in result && result.ok === false) {
-    const error = "error" in result ? result.error : undefined;
-    return typeof error === "string" && error ? error : fallback;
-  }
-  return null;
-}
+// ตัวช่วยตีความผล action ย้ายไป lib/action-result (ไม่พึ่ง next — ใช้ได้จาก barrel) — คง export เดิมไว้
+export { errorMessage, failedResult } from "@suphark/ui/lib/action-result";
 
 /**
  * ปุ่มเดี่ยวที่ถามยืนยัน (ConfirmDialog) ก่อนเรียก server action — ใช้แทน `<form action>` + window.confirm
@@ -92,6 +82,12 @@ export function ConfirmActionButton({
                 return;
               }
             } catch (err) {
+              // action redirect() = สำเร็จ (Next นำทางให้แล้ว) — ปิด dialog เงียบ ๆ ไม่แสดง "NEXT_REDIRECT"
+              if (isNavigationError(err)) {
+                onDone?.();
+                setOpen(false);
+                return;
+              }
               toast.error(errorMessage(err, fallback));
               return;
             }

package/src/components/shared/chat-thread.tsx

@@ -24,6 +24,7 @@ import {
   MessageScrollerViewport,
 } from "@suphark/ui/components/ui/message-scroller";
 import { Spinner } from "@suphark/ui/components/ui/spinner";
+import { errorMessage, failedResult, isNavigationError } from "@suphark/ui/lib/action-result";
 import { cn } from "@suphark/ui/lib/utils";
 import { ArrowDown, SendHorizontal } from "lucide-react";
 import { type ReactNode, useState } from "react";
@@ -156,15 +157,21 @@ function ChatComposer({
 
   const send = async () => {
     if (!canSend) return;
+    const sent = value;
     setPending(true);
+    // ล้างช่องเฉพาะเมื่อผู้ใช้ยังไม่ได้พิมพ์ต่อระหว่างรอส่ง (ไม่ทิ้งข้อความใหม่)
+    const clearSent = () => setValue((current) => (current === sent ? "" : current));
     try {
-      await onSend(value.trim());
-      setValue("");
+      const failed = failedResult(await onSend(sent.trim()), failedText ?? "ดำเนินการไม่สำเร็จ");
+      if (failed) toast.error(failed);
+      else clearSent();
     } catch (err) {
-      // ส่งไม่สำเร็จ: คงข้อความไว้ในช่องให้ลองใหม่ + แจ้งผู้ใช้ (เดิมเงียบ — unhandled rejection)
-      toast.error(
-        err instanceof Error && err.message ? err.message : (failedText ?? "ดำเนินการไม่สำเร็จ"),
-      );
+      if (isNavigationError(err)) {
+        clearSent();
+        return;
+      }
+      // ส่งไม่สำเร็จ: คงข้อความไว้ในช่องให้ลองใหม่ + แจ้งผู้ใช้
+      toast.error(errorMessage(err, failedText ?? "ดำเนินการไม่สำเร็จ"));
     } finally {
       setPending(false);
     }

package/src/components/shared/client-redirect.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { safeNavigableUrl } from "@suphark/ui/lib/safe-url";
 import { useEffect } from "react";
 
 /**
@@ -9,17 +10,12 @@ import { useEffect } from "react";
  */
 export function ClientRedirect({ to }: { to: string }) {
   useEffect(() => {
-    let url: URL;
-    try {
-      url = new URL(to, window.location.href);
-    } catch {
+    const url = safeNavigableUrl(to);
+    if (!url) {
+      console.error("ClientRedirect: ปฏิเสธปลายทางที่ไม่ใช่ http(s)");
       return;
     }
-    if (url.protocol !== "http:" && url.protocol !== "https:") {
-      console.error(`ClientRedirect: ปฏิเสธปลายทางที่ไม่ใช่ http(s): ${url.protocol}`);
-      return;
-    }
-    window.location.replace(url.href);
+    window.location.replace(url);
   }, [to]);
 
   return null;

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

@@ -12,11 +12,13 @@ import {
 } from "@suphark/ui/components/ui/alert-dialog";
 import { Checkbox } from "@suphark/ui/components/ui/checkbox";
 import { Input } from "@suphark/ui/components/ui/input";
+import { Label } from "@suphark/ui/components/ui/label";
 import {
   createContext,
   type ReactNode,
   useCallback,
   useContext,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -104,6 +106,7 @@ export function DialogsProvider({ children }: { children: ReactNode }) {
     setRequest(next);
   }, []);
 
+  const typeToConfirmId = useId();
   const settle = useCallback((value: Result) => {
     resolveRef.current?.(value);
     resolveRef.current = null;
@@ -120,6 +123,7 @@ export function DialogsProvider({ children }: { children: ReactNode }) {
         }),
       confirm: (spec) =>
         new Promise((resolve) => {
+          setPromptValue(""); // ช่องพิมพ์ยืนยัน (requireText) เริ่มว่างทุกครั้ง
           open({ ...normalizeConfirm(spec), mode: "confirm" }, (value) => resolve(value === true));
         }),
       prompt: (spec) =>
@@ -196,6 +200,28 @@ export function DialogsProvider({ children }: { children: ReactNode }) {
               />
             )}
 
+            {request.mode === "confirm" && request.requireText && (
+              // พิมพ์ข้อความยืนยันก่อนกด (เหมือน ConfirmDialog — เดิม useDialogs().confirm ข้าม requireText ไปเงียบ ๆ)
+              <div className="flex flex-col gap-1.5">
+                <Label htmlFor={typeToConfirmId} className="font-normal text-sm">
+                  {request.requireTextLabel ?? (
+                    <>
+                      {text.confirmTypeToConfirm ?? "พิมพ์"}{" "}
+                      <span className="font-medium">{request.requireText}</span>{" "}
+                      {text.confirmTypeToConfirmSuffix ?? "เพื่อยืนยัน"}
+                    </>
+                  )}
+                </Label>
+                <Input
+                  id={typeToConfirmId}
+                  value={promptValue}
+                  onChange={(event) => setPromptValue(event.target.value)}
+                  autoComplete="off"
+                  spellCheck={false}
+                />
+              </div>
+            )}
+
             {request.mode === "checklist" && (
               <div className="flex flex-col gap-2">
                 {request.options?.map((option) => {
@@ -247,6 +273,11 @@ export function DialogsProvider({ children }: { children: ReactNode }) {
               ) : (
                 <AlertDialogAction
                   variant={request.destructive ? "destructive" : "default"}
+                  disabled={
+                    request.mode === "confirm" &&
+                    Boolean(request.requireText) &&
+                    promptValue.trim() !== request.requireText
+                  }
                   onClick={() => settle(confirmResult())}
                 >
                   {request.confirmLabel ?? confirmLabelByMode[request.mode]}

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

@@ -3,7 +3,7 @@
 import { NumberField } from "@base-ui/react/number-field";
 import { cn } from "@suphark/ui/lib/utils";
 import { MinusIcon, PlusIcon } from "lucide-react";
-import type { ReactNode } from "react";
+import { type ReactNode, type Ref, useCallback, useEffect, useRef } from "react";
 import { useUiText } from "../ui-text";
 
 /**
@@ -14,10 +14,12 @@ import { useUiText } from "../ui-text";
 function relaxHiddenStep(el: HTMLInputElement | null) {
   if (el) el.step = "any";
 }
+// หมายเหตุ: เมื่อ prop step เปลี่ยน React เขียน attribute step ใหม่ → effect ใน NumberInput ตั้ง "any" ซ้ำ
 
 const SIZE = {
-  sm: { group: "h-7", button: "w-7 [&_svg]:size-3.5", text: "text-sm" },
-  default: { group: "h-8", button: "w-8 [&_svg]:size-4", text: "text-base md:text-sm" },
+  // มือถือ ≥16px (iOS ไม่ซูมตอนโฟกัส) — จอกว้างค่อยเล็กลง
+  sm: { group: "h-7", button: "w-7 [&_svg]:size-3.5", text: "text-base md:text-sm" },
+  default: { group: "h-8", button: "w-8 [&_svg]:size-4", text: "text-body" },
 } as const;
 
 /**
@@ -53,6 +55,8 @@ export function NumberInput({
   "aria-label": ariaLabel,
   "aria-describedby": ariaDescribedBy,
   "aria-invalid": ariaInvalid,
+  inputRef,
+  autoFocus,
 }: {
   value?: number | null;
   defaultValue?: number;
@@ -84,8 +88,21 @@ export function NumberInput({
   "aria-label"?: string;
   "aria-describedby"?: string;
   "aria-invalid"?: boolean | "true" | "false";
+  /** ref ของช่องที่ผู้ใช้พิมพ์ (เช่น focus() เอง) */
+  inputRef?: Ref<HTMLInputElement>;
+  autoFocus?: boolean;
 }) {
   const text = useUiText().number;
+  const hiddenEl = useRef<HTMLInputElement | null>(null);
+  const hiddenRef = useCallback((el: HTMLInputElement | null) => {
+    hiddenEl.current = el;
+    relaxHiddenStep(el);
+  }, []);
+  // step เปลี่ยนหลัง mount → React เขียน attribute step ใหม่ → ตั้ง "any" ซ้ำ
+  // biome-ignore lint/correctness/useExhaustiveDependencies: step เป็นตัวกระตุ้น — React เขียน attribute step ใหม่ทุกครั้งที่ prop เปลี่ยน
+  useEffect(() => {
+    relaxHiddenStep(hiddenEl.current);
+  }, [step]);
   const s = SIZE[size];
   const buttonClass = cn(
     "flex shrink-0 items-center justify-center text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:bg-muted disabled:pointer-events-none disabled:opacity-50",
@@ -108,26 +125,19 @@ export function NumberInput({
       required={required}
       disabled={disabled}
       readOnly={readOnly}
-      inputRef={relaxHiddenStep}
+      inputRef={hiddenRef}
       className={cn("w-full", className)}
     >
       <NumberField.Group
         data-slot="number-input"
         className={cn(
-          "flex w-full min-w-0 items-stretch overflow-hidden rounded-lg border border-input bg-transparent transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-disabled:opacity-50 dark:bg-input/30",
+          "flex w-full min-w-0 items-stretch overflow-hidden rounded-lg border border-input bg-transparent transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-[input:disabled]:opacity-50 dark:bg-input/30",
           s.group,
         )}
       >
-        {!hideButtons && (
-          <NumberField.Decrement
-            aria-label={text?.decrement ?? "ลด"}
-            className={cn(buttonClass, "border-r border-input")}
-          >
-            <MinusIcon />
-          </NumberField.Decrement>
-        )}
-        {prefix && <span className={cn(affix, !hideButtons && "pr-0")}>{prefix}</span>}
         <NumberField.Input
+          ref={inputRef}
+          autoFocus={autoFocus}
           placeholder={placeholder}
           aria-label={ariaLabel}
           aria-describedby={ariaDescribedBy}
@@ -139,6 +149,18 @@ export function NumberInput({
             inputClassName,
           )}
         />
+        {/* ปุ่มลด/prefix อยู่หลัง input ใน DOM (label ที่ครอบช่องนี้คลิกแล้วเลือก input ไม่ใช่ปุ่มลด) แต่แสดงด้านซ้ายด้วย order */}
+        {!hideButtons && (
+          <NumberField.Decrement
+            aria-label={text?.decrement ?? "ลด"}
+            className={cn(buttonClass, "order-first border-r border-input")}
+          >
+            <MinusIcon />
+          </NumberField.Decrement>
+        )}
+        {prefix && (
+          <span className={cn(affix, "order-first", !hideButtons && "pr-0")}>{prefix}</span>
+        )}
         {suffix && <span className={cn(affix, !hideButtons && "pl-0")}>{suffix}</span>}
         {!hideButtons && (
           <NumberField.Increment

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

@@ -2,7 +2,7 @@
 
 import { cn } from "@suphark/ui/lib/utils";
 import { XIcon } from "lucide-react";
-import { type ClipboardEvent, type KeyboardEvent, useId, useRef, useState } from "react";
+import { type ClipboardEvent, type KeyboardEvent, useEffect, useId, useRef, useState } from "react";
 import { useUiText } from "../ui-text";
 
 /**
@@ -59,6 +59,10 @@ export function TagsInput({
   const [error, setError] = useState<string | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const errorId = useId();
+  // ค่าที่ถูกปฏิเสธยังค้างในช่อง = ช่อง invalid จริง → ฟอร์มไม่ส่งรายการที่ขาดค่านี้ไปเงียบ ๆ
+  useEffect(() => {
+    inputRef.current?.setCustomValidity(error && draft.trim() ? error : "");
+  }, [error, draft]);
   const full = max != null && tags.length >= max;
 
   const commit = (next: string[]) => {
@@ -144,6 +148,27 @@ export function TagsInput({
           disabled && "pointer-events-none opacity-50",
         )}
       >
+        {/* ช่องพิมพ์อยู่ก่อนป้ายใน DOM (label ที่ครอบอยู่คลิกแล้วเลือกช่องพิมพ์ ไม่ใช่ปุ่มลบป้ายแรก) แต่แสดงท้ายด้วย order-last */}
+        <input
+          ref={inputRef}
+          id={id}
+          value={draft}
+          disabled={disabled || full}
+          placeholder={full ? undefined : (placeholder ?? text?.placeholder ?? "พิมพ์แล้วกด Enter")}
+          aria-label={ariaLabel}
+          aria-describedby={describedBy}
+          aria-invalid={error || ariaInvalid ? true : undefined}
+          onChange={(e) => {
+            setDraft(e.currentTarget.value);
+            if (error) setError(null);
+          }}
+          onKeyDown={onKeyDown}
+          onPaste={onPaste}
+          onBlur={() => {
+            if (draft.trim()) setDraft(add([draft]));
+          }}
+          className="order-last h-6 min-w-24 flex-1 bg-transparent px-1 text-body outline-none placeholder:text-muted-foreground"
+        />
         {tags.map((tag, i) => (
           <span
             // biome-ignore lint/suspicious/noArrayIndexKey: allowDuplicates ทำให้ค่าซ้ำได้ ใช้ตำแหน่งร่วม
@@ -166,26 +191,6 @@ export function TagsInput({
             {name && <input type="hidden" name={name} value={tag} />}
           </span>
         ))}
-        <input
-          ref={inputRef}
-          id={id}
-          value={draft}
-          disabled={disabled || full}
-          placeholder={full ? undefined : (placeholder ?? text?.placeholder ?? "พิมพ์แล้วกด Enter")}
-          aria-label={ariaLabel}
-          aria-describedby={describedBy}
-          aria-invalid={error || ariaInvalid ? true : undefined}
-          onChange={(e) => {
-            setDraft(e.currentTarget.value);
-            if (error) setError(null);
-          }}
-          onKeyDown={onKeyDown}
-          onPaste={onPaste}
-          onBlur={() => {
-            if (draft.trim()) setDraft(add([draft]));
-          }}
-          className="h-6 min-w-24 flex-1 bg-transparent px-1 text-base outline-none placeholder:text-muted-foreground md:text-sm"
-        />
       </div>
       {error && (
         <p id={errorId} role="alert" className="text-destructive text-xs">

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

@@ -45,6 +45,13 @@ export function parseTimeInput(input: string): TimeValue | null {
   return `${pad(h)}:${pad(m)}`;
 }
 
+/** ปัดนาทีลงให้ลงตัวกับ step (step 1 = ไม่เปลี่ยน) */
+function roundTime(value: TimeValue | null, step: number): TimeValue | null {
+  if (!value || step <= 1) return value;
+  const [h, m] = value.split(":").map(Number);
+  return `${pad(h ?? 0)}:${pad(Math.floor((m ?? 0) / step) * step)}`;
+}
+
 export function splitTime(value: TimeValue | null | undefined): [number, number] | null {
   const parsed = value ? parseTimeInput(value) : null;
   if (!parsed) return null;
@@ -192,6 +199,7 @@ export function TimePicker({
   defaultValue = null,
   onValueChange,
   minuteStep = 5,
+  roundToStep = false,
   name,
   id,
   required,
@@ -206,6 +214,8 @@ export function TimePicker({
   defaultValue?: TimeValue | null;
   onValueChange?: (value: TimeValue | null) => void;
   minuteStep?: number;
+  /** ปัดนาทีที่พิมพ์ลงตาม minuteStep (เช่น step 60 + พิมพ์ 14:30 → 14:00) — ค่าเริ่มต้นเก็บตามที่พิมพ์ */
+  roundToStep?: boolean;
   name?: string;
   id?: string;
   required?: boolean;
@@ -238,7 +248,7 @@ export function TimePicker({
       setDraft(null);
       return;
     }
-    const parsed = parseTimeInput(draft);
+    const parsed = roundTime(parseTimeInput(draft), roundToStep ? minuteStep : 1);
     if (parsed) {
       setTime(parsed);
       setDraft(null);
@@ -298,7 +308,7 @@ export function TimePicker({
                 size="xs"
                 variant="ghost"
                 onClick={() => {
-                  setTime(nowTime());
+                  setTime(roundTime(nowTime(), roundToStep ? minuteStep : 1));
                   setDraft(null);
                 }}
               >

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

@@ -31,6 +31,9 @@ export interface MonthStepperProps {
   className?: string;
 }
 
+/** "เดือนนี้" ของ MonthStepper/useMonthCursor คิดตามเวลาไทย — แอปของเราใช้ในไทย และต้องได้ค่าเดียวกันทั้ง server และ browser */
+const APP_TIME_ZONE = "Asia/Bangkok";
+
 /**
  * เลือกเดือนแบบ ‹ เดือน › — กดชื่อเดือนเพื่อกลับเดือนนี้ (ยกจาก DueBell `MonthSelector`)
  * ใช้คู่กับ `CalendarMonthGrid month` ได้เลย (รูปแบบ `"YYYY-MM"` เดียวกัน)
@@ -38,9 +41,6 @@ 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,

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

@@ -8,12 +8,12 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@suphark/ui/components/ui/dropdown-menu";
+import { errorMessage, failedResult, isNavigationError } from "@suphark/ui/lib/action-result";
 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, failedResult } from "./button/confirm-action-button";
 import { ConfirmDialog, type ConfirmSpec, normalizeConfirm } from "./confirm-dialog";
 import { useUiText } from "./ui-text";
 
@@ -44,12 +44,15 @@ export function RowActions({ items, label }: { items: RowAction[]; label?: strin
   const [open, setOpen] = useState(false);
   const [confirming, setConfirming] = useState<RowActionItem | null>(null);
 
-  function run(it: RowActionItem) {
+  /** `done` = เรียกเมื่อสำเร็จ (ใช้ปิด ConfirmDialog — ล้มเหลวคง dialog ไว้ให้ลองใหม่) */
+  function run(it: RowActionItem, done?: () => void) {
     if (it.href) {
+      done?.();
       router.push(it.href);
       return;
     }
     if (it.onSelect) {
+      done?.();
       it.onSelect();
       return;
     }
@@ -67,9 +70,15 @@ export function RowActions({ items, label }: { items: RowAction[]; label?: strin
             return;
           }
         } catch (err) {
+          // action redirect() = สำเร็จ (Next นำทางให้แล้ว) — ไม่แสดง "NEXT_REDIRECT"
+          if (isNavigationError(err)) {
+            done?.();
+            return;
+          }
           toast.error(errorMessage(err, fallback));
           return;
         }
+        done?.();
         router.refresh();
       });
     }
@@ -126,11 +135,8 @@ export function RowActions({ items, label }: { items: RowAction[]; label?: strin
           requireText={spec.requireText}
           requireTextLabel={spec.requireTextLabel}
           destructive={spec.destructive ?? confirming.destructive}
-          onConfirm={() => {
-            const it = confirming;
-            setConfirming(null);
-            run(it);
-          }}
+          pending={pending}
+          onConfirm={() => run(confirming, () => setConfirming(null))}
         />
       )}
     </>

package/src/components/shared/rule-builder.tsx

@@ -160,6 +160,12 @@ function keyOf(item: object): string {
   return k;
 }
 
+/** object ใหม่ที่มาแทนของเดิม (แก้ค่าในเงื่อนไข) ใช้ key เดิม — ไม่งั้นช่องที่กำลังพิมพ์ re-mount แล้วหลุดโฟกัสทุกตัวอักษร */
+function keepKey<T extends object>(prev: object, next: T): T {
+  if (prev !== next && !keys.has(next)) keys.set(next, keyOf(prev));
+  return next;
+}
+
 export interface RuleBuilderProps<F extends string = string> {
   value: RuleCondition<F>;
   /** ส่งต้นไม้ใหม่ทั้งก้อน (immutable) */
@@ -317,7 +323,10 @@ function ConditionNode<F extends string>({
               <ConditionNode
                 value={item}
                 onChange={(next) =>
-                  onChange({ ...value, items: value.items.map((x, j) => (j === i ? next : x)) })
+                  onChange({
+                    ...value,
+                    items: value.items.map((x, j) => (j === i ? keepKey(x, next) : x)),
+                  })
                 }
                 ctx={ctx}
                 depth={depth + 1}

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

@@ -82,9 +82,14 @@ export function SettingsLayout({
   /** มือถือ: กลับไปรายการ — ปุ่ม "กลับ" ถูกซ่อน จึงคืนโฟกัสให้หัวข้อที่เพิ่งเปิด (ไม่งั้นโฟกัสหลุดไป body) */
   const back = (id: string) => {
     setMobileDetail(false);
-    requestAnimationFrame(() =>
-      navRef.current?.querySelector<HTMLElement>(`[data-section-id="${CSS.escape(id)}"]`)?.focus(),
-    );
+    requestAnimationFrame(() => {
+      const nav = navRef.current;
+      // หัวข้อที่เปิดอยู่ถูกกรองออกจากรายการด้วยคำค้น → โฟกัสช่องค้นหา/หัวข้อแรกแทน (ไม่ปล่อยหลุดไป body)
+      const target =
+        nav?.querySelector<HTMLElement>(`[data-section-id="${CSS.escape(id)}"]`) ??
+        nav?.querySelector<HTMLElement>("input, [data-section-id]");
+      target?.focus();
+    });
   };
 
   if (!current) return null;