@suphark/ui 0.3.1 → 0.3.2

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.3.2] — 2026-09-18
+
+### Fixed
+
+- `copyText`/`selectContents` export จาก barrel หลักด้วย (แอปใช้ทำปุ่มคัดลอกเองได้)
+- `EnvSnippet`: ค่ายาว (client secret) ล้นออกนอก dialog — ตัดบรรทัดในกรอบ (`whitespace-pre-wrap break-all` + `min-w-0`) แทน scroll แนวนอน (รายงานจากหน้า Register app ของ Pi Auth)
+- `EnvSnippet` / `SecretReveal`: ปุ่มคัดลอกเงียบเมื่อ `navigator.clipboard` ถูกบล็อก (webview/embedded browser เช่น browser ใน Claude desktop) — เพิ่ม `copyText()` (`@suphark/ui/lib/copy-text`) ที่ fallback ไป `execCommand("copy")`; ถ้ายังไม่ได้ EnvSnippet จะเลือกข้อความให้และบอกให้กด Ctrl+C (`UiText.copyFailed` optional)
+
 ## [0.3.1] — 2026-09-18
 
 ### Changed

package/README.md

@@ -4,6 +4,8 @@ Design system กลางของ Suphark apps (Pi Auth, DueBell, Pi PDF, supp
 
 แพ็กเกจส่ง **source (.ts/.tsx) ไม่ build** — แอป Next.js transpile เองผ่าน `transpilePackages`
 
+ดูตัวอย่างสด: **https://ui.suphark.com** (design system, `/shell` AppShell, `/brand`)
+
 ## ติดตั้ง
 
 ```bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "private": false,
   "type": "module",
   "description": "Design system กลางของ Suphark apps: shadcn/ui (base-nova, Base UI, Tailwind v4) + shared components + token/ฟอนต์ Noto Sans Thai Looped — ส่งเป็น source ให้แอป Next transpile เอง",

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/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

@@ -136,6 +136,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);
+}