@suphark/ui 0.3.1 → 0.3.3

package/src/components/design-system/sections/showcase-primitives.tsx

@@ -101,11 +101,11 @@ export function ShowcasePrimitives() {
       <div className="flex flex-col gap-1">
         <div className="flex items-center gap-2">
           <Badge variant="outline">Core Primitives</Badge>
-          <span className="text-xs text-muted-foreground">
+          <span className="text-muted-foreground text-sm">
             Buttons, Badges, Cards, Avatars & Structure
           </span>
         </div>
-        <h2 className="text-xl font-bold tracking-tight text-foreground">
+        <h2 className="font-bold text-2xl text-foreground tracking-tight">
           คอมโพเนนต์พื้นฐานและการแสดงผลโครงสร้าง
         </h2>
         <p className="text-sm text-muted-foreground">
@@ -114,14 +114,12 @@ export function ShowcasePrimitives() {
       </div>
 
       {/* Button Matrix */}
-      <Card>
+      <Card id="primitives-button">
         <CardHeader>
           <div className="flex items-center justify-between">
             <div>
-              <CardTitle className="text-base">Button Hierarchy & Variants</CardTitle>
-              <CardDescription className="text-xs">
-                ลำดับความสำคัญของปุ่มและขนาดตามความเหมาะสมของหน้าจอ
-              </CardDescription>
+              <CardTitle className="text-lg">Button Hierarchy & Variants</CardTitle>
+              <CardDescription>ลำดับความสำคัญของปุ่มและขนาดตามความเหมาะสมของหน้าจอ</CardDescription>
             </div>
             <Badge variant="secondary">shadcn/ui Button</Badge>
           </div>
@@ -248,12 +246,12 @@ export function ShowcasePrimitives() {
       </Card>
 
       {/* Shared Button Wrappers */}
-      <Card>
+      <Card id="primitives-shared-buttons">
         <CardHeader>
           <div className="flex items-center justify-between">
             <div>
-              <CardTitle className="text-base">Shared Action Button Wrappers</CardTitle>
-              <CardDescription className="text-xs">
+              <CardTitle className="text-lg">Shared Action Button Wrappers</CardTitle>
+              <CardDescription>
                 คอมโพเนนต์ปุ่มมาตรฐานพร้อมสไตล์และไอคอนจาก <code>src/components/shared/button/*</code>
               </CardDescription>
             </div>
@@ -274,12 +272,10 @@ export function ShowcasePrimitives() {
       </Card>
 
       {/* Badges & Status Indicators */}
-      <Card>
+      <Card id="primitives-badge">
         <CardHeader>
-          <CardTitle className="text-base">Badge & Status Indicators</CardTitle>
-          <CardDescription className="text-xs">
-            ป้ายสถานะสำหรับ workflow การจัดซื้อและกระบวนการอนุมัติ
-          </CardDescription>
+          <CardTitle className="text-lg">Badge & Status Indicators</CardTitle>
+          <CardDescription>ป้ายสถานะสำหรับ workflow การจัดซื้อและกระบวนการอนุมัติ</CardDescription>
         </CardHeader>
         <CardContent className="flex flex-col gap-4">
           <div className="flex flex-wrap items-center gap-2">
@@ -310,7 +306,7 @@ export function ShowcasePrimitives() {
       </Card>
 
       {/* Full Card Composition & Avatar */}
-      <div className="grid gap-6 lg:grid-cols-2">
+      <div id="primitives-card" className="grid gap-6 lg:grid-cols-2">
         {/* Full Card Composition */}
         <Card>
           <CardHeader>
@@ -319,7 +315,7 @@ export function ShowcasePrimitives() {
               <span className="text-xs text-muted-foreground">Updated today</span>
             </div>
             <CardTitle className="text-lg">Package Evaluation Summary</CardTitle>
-            <CardDescription className="text-xs">
+            <CardDescription>
               โครงสร้าง Card แบบเต็มรูปแบบ (CardHeader / Title / Description / Content / Footer)
             </CardDescription>
           </CardHeader>
@@ -398,12 +394,12 @@ export function ShowcasePrimitives() {
       </div>
 
       {/* Accordion & Collapsible */}
-      <div className="grid gap-6 lg:grid-cols-2">
+      <div id="primitives-accordion" className="grid gap-6 lg:grid-cols-2">
         {/* Accordion */}
         <Card>
           <CardHeader className="pb-2">
-            <CardTitle className="text-base">Accordion Primitive</CardTitle>
-            <CardDescription className="text-xs">สำหรับคำถามที่พบบ่อยหรือเงื่อนไขสัญญา</CardDescription>
+            <CardTitle className="text-lg">Accordion Primitive</CardTitle>
+            <CardDescription>สำหรับคำถามที่พบบ่อยหรือเงื่อนไขสัญญา</CardDescription>
           </CardHeader>
           <CardContent>
             <Accordion className="w-full">
@@ -430,8 +426,8 @@ export function ShowcasePrimitives() {
         {/* Collapsible */}
         <Card>
           <CardHeader className="pb-2">
-            <CardTitle className="text-base">Collapsible Primitive</CardTitle>
-            <CardDescription className="text-xs">สำหรับกล่องฟิลเตอร์ขั้นสูงหรือข้อมูลทางเลือก</CardDescription>
+            <CardTitle className="text-lg">Collapsible Primitive</CardTitle>
+            <CardDescription>สำหรับกล่องฟิลเตอร์ขั้นสูงหรือข้อมูลทางเลือก</CardDescription>
           </CardHeader>
           <CardContent>
             <Collapsible

package/src/components/shared/env-snippet.tsx

@@ -1,13 +1,16 @@
 "use client";
 
 import { Button } from "@suphark/ui/components/ui/button";
+import { copyText, selectContents } from "@suphark/ui/lib/copy-text";
 import { CheckIcon, CopyIcon } from "lucide-react";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { useUiText } from "./ui-text";
 
 /**
  * บล็อก .env สำเร็จรูป: คัดลอกทั้งก้อนปุ่มเดียว (Clerk-style "quick copy")
  * ค่าที่เป็น secret แสดงจริง (หน้าที่เรียกต้องเป็นหน้า "แสดงครั้งเดียว" อยู่แล้ว)
+ * - ค่ายาว (secret) ตัดบรรทัดในกรอบ ไม่ล้น dialog
+ * - clipboard ถูกบล็อก (webview/embedded browser) → fallback execCommand; ถ้ายังไม่ได้ เลือกข้อความให้กด Ctrl+C
  */
 export function EnvSnippet({
   title = ".env.local",
@@ -20,34 +23,46 @@ export function EnvSnippet({
   copyLabel?: string;
 }) {
   const text = useUiText();
-  const [copied, setCopied] = useState(false);
+  const [state, setState] = useState<"idle" | "copied" | "failed">("idle");
+  const preRef = useRef<HTMLPreElement>(null);
   const content = lines.map(([k, v]) => `${k}=${v}`).join("\n");
+
   async function copy() {
-    try {
-      await navigator.clipboard.writeText(`${content}\n`);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    } catch {
-      // clipboard ไม่ได้ (http/permission) — ผู้ใช้ยังเลือกข้อความคัดลอกเองได้
+    const ok = await copyText(`${content}\n`);
+    if (ok) {
+      setState("copied");
+      setTimeout(() => setState((s) => (s === "copied" ? "idle" : s)), 1500);
+    } else {
+      selectContents(preRef.current);
+      setState("failed");
     }
   }
+
   return (
-    <div className="overflow-hidden rounded-lg border bg-card">
+    <div className="min-w-0 overflow-hidden rounded-lg border bg-card">
       <div className="flex items-center justify-between gap-2 border-b bg-muted px-3 py-1.5">
         <span className="font-mono text-xs text-muted-foreground">{title}</span>
         <Button type="button" variant="outline" size="xs" onClick={copy}>
-          {copied ? <CheckIcon /> : <CopyIcon />}
-          {copied ? text.copied : (copyLabel ?? text.copy)}
+          {state === "copied" ? <CheckIcon /> : <CopyIcon />}
+          {state === "copied" ? text.copied : (copyLabel ?? text.copy)}
         </Button>
       </div>
-      <pre className="overflow-x-auto px-3 py-2.5 font-mono text-xs leading-6">
+      <pre
+        ref={preRef}
+        className="whitespace-pre-wrap break-all px-3 py-2.5 font-mono text-xs leading-6"
+      >
         {lines.map(([k, v]) => (
           <div key={k}>
             <span className="text-muted-foreground">{k}=</span>
-            <span className="break-all">{v}</span>
+            <span>{v}</span>
           </div>
         ))}
       </pre>
+      {state === "failed" ? (
+        <p className="border-t bg-muted/50 px-3 py-1.5 text-muted-foreground text-xs">
+          {text.copyFailed ?? "คัดลอกอัตโนมัติไม่ได้ — เลือกข้อความให้แล้ว กด Ctrl+C / ⌘C"}
+        </p>
+      ) : null}
     </div>
   );
 }

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

@@ -10,6 +10,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@suphark/ui/components/ui/dialog";
+import { cn } from "@suphark/ui/lib/utils";
 import { useRouter } from "next/navigation";
 import {
   type ReactElement,
@@ -76,7 +77,10 @@ export function FormDialog({
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       {trigger && <DialogTrigger render={trigger} />}
-      <DialogContent className={contentClassName ?? "sm:max-w-md"}>
+      {/* จำกัดความสูงไว้ในจอ: header/footer ตรึง เฉพาะเนื้อฟอร์มเลื่อน (ฟอร์มยาวไม่ล้นในหน้าต่างเตี้ย) */}
+      <DialogContent
+        className={cn("flex max-h-[calc(100dvh-2rem)] flex-col", contentClassName ?? "sm:max-w-md")}
+      >
         <form
           // ไม่ใช้ `action=` — React 19 รีเซ็ตฟอร์ม uncontrolled หลัง action จบทุกครั้ง (แม้คืน error)
           // ทำให้ค่าที่พิมพ์หาย; เรียก action ใน transition เองแทน ฟอร์มจึงคงค่าไว้ให้แก้ต่อได้
@@ -86,13 +90,15 @@ export function FormDialog({
             setSubmitted((n) => n + 1);
             startTransition(() => formAction(fd));
           }}
-          className="flex flex-col gap-4"
+          className="flex min-h-0 flex-1 flex-col gap-4"
         >
           <DialogHeader>
             <DialogTitle>{title}</DialogTitle>
             {description && <DialogDescription>{description}</DialogDescription>}
           </DialogHeader>
-          <div className="flex flex-col gap-3">{children}</div>
+          <div className="-mx-1 flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-1">
+            {children}
+          </div>
           <FormMessage state={state} />
           <DialogFooter>
             <Button type="button" variant="ghost" onClick={() => setOpen(false)}>

package/src/components/shared/secret-reveal.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Button } from "@suphark/ui/components/ui/button";
+import { copyText } from "@suphark/ui/lib/copy-text";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import { useState } from "react";
 import { Notice } from "./notice";
@@ -17,13 +18,10 @@ export function SecretReveal({
   const text = useUiText();
   const [copied, setCopied] = useState<string | null>(null);
   async function copy(key: string, value: string) {
-    try {
-      await navigator.clipboard.writeText(value);
-      setCopied(key);
-      setTimeout(() => setCopied((c) => (c === key ? null : c)), 1500);
-    } catch {
-      // clipboard ไม่ได้ (http/permission) — ผู้ใช้ยังคัดลอกจากข้อความได้
-    }
+    // clipboard API ถูกบล็อก (webview/embedded browser) → copyText ลอง execCommand ให้; ไม่ได้จริง ๆ ผู้ใช้ยังเลือกจากข้อความได้
+    if (!(await copyText(value))) return;
+    setCopied(key);
+    setTimeout(() => setCopied((c) => (c === key ? null : c)), 1500);
   }
   return (
     <Notice tone="warning" title={title ?? text.showOnce}>

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

@@ -12,6 +12,8 @@ export interface UiText {
   copied: string;
   showOnce: string;
   success: string;
+  /** EnvSnippet: คัดลอกอัตโนมัติไม่ได้ (optional — มีค่าเริ่มต้นในตัว) */
+  copyFailed?: string;
 }
 
 export const UI_TEXT_TH: UiText = {
@@ -23,6 +25,7 @@ export const UI_TEXT_TH: UiText = {
   copied: "คัดลอกแล้ว",
   showOnce: "แสดงครั้งเดียว — คัดลอกเก็บไว้ทันที",
   success: "สำเร็จ",
+  copyFailed: "คัดลอกอัตโนมัติไม่ได้ — เลือกข้อความให้แล้ว กด Ctrl+C / ⌘C",
 };
 
 export const UI_TEXT_EN: UiText = {
@@ -34,6 +37,7 @@ export const UI_TEXT_EN: UiText = {
   copied: "Copied",
   showOnce: "Shown once — copy it now",
   success: "Done",
+  copyFailed: "Automatic copy is blocked — text selected, press Ctrl+C / ⌘C",
 };
 
 const UiTextContext = createContext<UiText>(UI_TEXT_TH);

package/src/index.ts

@@ -9,6 +9,8 @@
  * `chart` (recharts) ไม่อยู่ใน barrel: import ตรง `@suphark/ui/components/ui/chart` เมื่อแอปติดตั้ง recharts เอง
  */
 
+// ชนิดช่วงวันที่ของ react-day-picker — แอปไม่ต้องติดตั้ง react-day-picker เอง
+export type { DateRange } from "react-day-picker";
 // sonner: `toast()` คู่กับ <Toaster /> — แอปไม่ต้องติดตั้ง sonner เอง
 export { toast } from "sonner";
 export * from "./components/shared/button";
@@ -136,6 +138,7 @@ export * from "./components/ui/tooltip";
 // ---------- lib / hooks ----------
 export { useCopyToClipboard } from "./hooks/use-copy-to-clipboard";
 export { useIsMobile } from "./hooks/use-mobile";
+export { copyText, selectContents } from "./lib/copy-text";
 export { formatRelativeThaiDate, formatThaiFullDate } from "./lib/formatters";
 export {
   type AtomicPermissionRequirement,

package/src/lib/copy-text.ts

@@ -0,0 +1,48 @@
+/**
+ * คัดลอกข้อความลง clipboard ให้ได้มากที่สุด:
+ * 1. navigator.clipboard (ต้อง secure context + permission — บาง embedded browser/webview บล็อก)
+ * 2. fallback: textarea ชั่วคราว + document.execCommand("copy") (deprecated แต่ยังใช้ได้ทุก browser)
+ * คืน true เมื่อสำเร็จ — ผู้เรียกควรมีทางหนี (เลือกข้อความให้ผู้ใช้กด Ctrl+C เอง) เมื่อได้ false
+ */
+export async function copyText(text: string): Promise<boolean> {
+  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {
+      // ลอง fallback ต่อ
+    }
+  }
+  if (typeof document === "undefined") return false;
+  const ta = document.createElement("textarea");
+  ta.value = text;
+  ta.setAttribute("readonly", "");
+  ta.style.position = "fixed";
+  ta.style.top = "0";
+  ta.style.left = "0";
+  ta.style.opacity = "0";
+  document.body.appendChild(ta);
+  const active = document.activeElement as HTMLElement | null;
+  try {
+    ta.focus();
+    ta.select();
+    ta.setSelectionRange(0, text.length);
+    return document.execCommand("copy");
+  } catch {
+    return false;
+  } finally {
+    ta.remove();
+    active?.focus?.();
+  }
+}
+
+/** เลือกข้อความทั้งก้อนใน element (ให้ผู้ใช้กด Ctrl+C ได้ทันทีเมื่อ copy อัตโนมัติไม่ได้) */
+export function selectContents(el: Element | null): void {
+  if (!el || typeof window === "undefined") return;
+  const sel = window.getSelection();
+  if (!sel) return;
+  const range = document.createRange();
+  range.selectNodeContents(el);
+  sel.removeAllRanges();
+  sel.addRange(range);
+}

package/src/styles.css

@@ -9,6 +9,10 @@
  *
  * ฟอนต์: Noto Sans Thai Looped (@fontsource) โหลดที่นี่ — แอปที่ต้องการฟอนต์อื่น override --font-sans ใน @theme ของตัวเอง
  * ส่วน print/A4 และสไตล์เฉพาะ feature ของ supplychain ไม่ได้ยกมา (อยู่ที่แอปนั้น)
+ *
+ * Override contract (ดู docs/agent-rules.md):
+ *   แอปแก้ได้: --brand / --brand-foreground (บน wrapper), --font-sans / --font-mono, --radius
+ *   ห้ามแก้: semantic token (--primary --background --muted --destructive …), --sidebar-*, --chart-*, วิธีสลับธีม
  */
 @import "tw-animate-css";
 @import "@fontsource/noto-sans-thai-looped/400.css";