@suphark/ui 0.26.0 → 0.27.0

package/src/components/shared/button/button.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { Button as ButtonBase } from "@suphark/ui/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@suphark/ui/components/ui/tooltip";
+import {
+  Children,
+  type ComponentProps,
+  createContext,
+  Fragment,
+  isValidElement,
+  type ReactNode,
+  useContext,
+} from "react";
+
+export type ButtonTooltipSide = "top" | "bottom" | "left" | "right";
+
+export interface ButtonProps extends ComponentProps<typeof ButtonBase> {
+  /**
+   * ข้อความ tooltip — ไม่ใส่ = ใช้ `aria-label` (หรือ `<span className="sr-only">` แบบ shadcn)
+   * ให้เองเมื่อปุ่ม "มีแต่ไอคอน" (ไม่มี children ที่เป็นข้อความ)
+   * ใส่ข้อความ = ทับค่าอัตโนมัติ (ใช้กับปุ่มที่มีข้อความแล้วแต่ยังอยากอธิบายเพิ่ม) · `false` = ปิด
+   */
+  tooltip?: ReactNode | false;
+  tooltipSide?: ButtonTooltipSide;
+  /** หน่วงก่อนโชว์ (ms) — ไม่ใส่ = ตาม `TooltipProvider` ของแอป หรือ 600 ตามค่าของ Base UI */
+  tooltipDelay?: number;
+}
+
+const NoAutoTooltip = createContext(false);
+
+/**
+ * ปิด tooltip อัตโนมัติของ `Button` ทั้งซับทรี — `SimpleTooltip` ใส่ให้แล้ว
+ * (ปุ่มที่ถูกห่อ tooltip อยู่แล้วจะไม่ขึ้นสองชั้น) ใช้เองได้เมื่อแอปห่อ tooltip ด้วยกลไกอื่น
+ */
+export function ButtonTooltipSuppress({ children }: { children: ReactNode }) {
+  return <NoAutoTooltip.Provider value={true}>{children}</NoAutoTooltip.Provider>;
+}
+
+/** ข้อความใน `<span className="sr-only">` (รูปแบบของ shadcn ที่ใช้แทน aria-label) */
+function srOnlyText(children: ReactNode): string | null {
+  let found: string | null = null;
+  Children.forEach(children, (child) => {
+    if (found || !isValidElement(child)) return;
+    const props = child.props as { className?: unknown; children?: ReactNode };
+    if (child.type === Fragment) {
+      found = srOnlyText(props.children);
+      return;
+    }
+    if (typeof props.className !== "string" || !props.className.split(/\s+/).includes("sr-only"))
+      return;
+    if (typeof props.children === "string" && props.children.trim() !== "")
+      found = props.children.trim();
+  });
+  return found;
+}
+
+/** มี children ที่เป็นข้อความจริง ๆ ไหม (ไอคอน/`<span className="sr-only">` ไม่นับ) */
+function hasTextChild(children: ReactNode): boolean {
+  let found = false;
+  Children.forEach(children, (child) => {
+    if (found) return;
+    if (typeof child === "string") {
+      if (child.trim() !== "") found = true;
+      return;
+    }
+    if (typeof child === "number") {
+      found = true;
+      return;
+    }
+    // <>{icon} ข้อความ</> — Children.forEach ไม่ไล่เข้า fragment ให้
+    if (isValidElement(child) && child.type === Fragment) {
+      const inner = (child.props as { children?: ReactNode }).children;
+      if (hasTextChild(inner)) found = true;
+    }
+  });
+  return found;
+}
+
+/**
+ * ปุ่มของแพ็กเกจ = `Button` ของ shadcn + **tooltip อัตโนมัติสำหรับปุ่มไอคอน**
+ * มาตรฐานของทุกโครงการ: ไอคอนที่ไม่มีข้อความกำกับ ต้องบอกได้ว่าคืออะไรเมื่อวางเมาส์
+ * → ถ้ามี `aria-label` และ children ไม่มีข้อความ จะห่อ `Tooltip` ให้เอง (ทำที่นี่ที่เดียว
+ * call site ทุกที่จึงได้ทันที รวมถึงปุ่มที่เป็น trigger ของ dialog/menu เพราะปุ่มอยู่ชั้นในสุด)
+ * ปิดเป็นรายปุ่มด้วย `tooltip={false}`; ทับข้อความด้วย `tooltip="…"`
+ * ไฟล์ shadcn ดิบอยู่ที่ `components/ui/button.tsx` (ห้ามแก้มือ) — barrel export ตัวนี้
+ */
+export function Button({ tooltip, tooltipSide = "top", tooltipDelay, ...props }: ButtonProps) {
+  const suppressed = useContext(NoAutoTooltip);
+  const label =
+    typeof props["aria-label"] === "string" && props["aria-label"].trim() !== ""
+      ? props["aria-label"]
+      : srOnlyText(props.children);
+  const explicit = tooltip !== undefined && tooltip !== null && tooltip !== "";
+  const auto =
+    !suppressed &&
+    tooltip === undefined &&
+    typeof label === "string" &&
+    !hasTextChild(props.children);
+  const content = tooltip === false ? null : explicit ? tooltip : auto ? label : null;
+
+  if (content === null || content === undefined) return <ButtonBase {...props} />;
+  return (
+    <Tooltip>
+      <TooltipTrigger delay={tooltipDelay} render={<ButtonBase {...props} />} />
+      <TooltipContent side={tooltipSide} className="max-w-xs text-pretty">
+        {content}
+      </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/button/index.ts

@@ -4,6 +4,12 @@
  */
 export { AddNewButton } from "./add-new-button";
 export { ActionButton, type ActionButtonProps } from "./base/action-button";
+export {
+  Button,
+  type ButtonProps,
+  type ButtonTooltipSide,
+  ButtonTooltipSuppress,
+} from "./button";
 export { CancelButton } from "./cancel-button";
 export { ConfirmButton } from "./confirm-button";
 export { CopyButton, type CopyButtonProps } from "./copy-button";

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, Ref } from "react";
+import { type ReactNode, type Ref, useCallback, useEffect, useRef } from "react";
 import { useUiText } from "../ui-text";
 
 /**
@@ -14,9 +14,11 @@ 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" },
+  // มือถือ ≥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;
 
@@ -91,6 +93,16 @@ export function NumberInput({
   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",
@@ -113,25 +125,16 @@ 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}
@@ -146,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-body outline-none placeholder:text-muted-foreground"
-        />
       </div>
       {error && (
         <p id={errorId} role="alert" className="text-destructive text-xs">

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import {
   InputGroup,
   InputGroupAddon,
@@ -308,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

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import {
   compareMonth,
   currentMonthKey,
@@ -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/notice.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { Alert, AlertAction, AlertDescription, AlertTitle } from "@suphark/ui/components/ui/alert";
-import { Button } from "@suphark/ui/components/ui/button";
 import { cn } from "@suphark/ui/lib/utils";
 import { CircleAlertIcon, CircleCheckIcon, InfoIcon, TriangleAlertIcon, XIcon } from "lucide-react";
 import { type ComponentProps, type ReactNode, useState } from "react";

package/src/components/shared/resource-property-filter.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { Badge } from "@suphark/ui/components/ui/badge";
-import { Button } from "@suphark/ui/components/ui/button";
 import { Checkbox } from "@suphark/ui/components/ui/checkbox";
 import { Empty, EmptyHeader, EmptyTitle } from "@suphark/ui/components/ui/empty";
 import { Field, FieldGroup, FieldLabel } from "@suphark/ui/components/ui/field";

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -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

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import {
   NativeSelect,
   NativeSelectOptGroup,
@@ -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/secret-reveal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { copyText } from "@suphark/ui/lib/copy-text";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import { useState } from "react";

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;