@suphark/ui 0.3.0 → 0.3.2

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 รูปแบบตาม [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
+
+- `AppShell`: slot `sidebarHeader` ซ่อนอัตโนมัติเมื่อยุบเป็นไอคอน (เดิมล้นทับเนื้อหา — รายงานจาก Pi Auth) + prop ใหม่ `sidebarHeaderCollapsed` สำหรับไอคอนแทนตอนยุบ
+- `HeaderBreadcrumbs`: `labels` รับฟังก์ชัน `(segment, href) => ReactNode` ได้ (ใส่ `t()` ของ next-intl) และ map รับ ReactNode — ฟังก์ชันต้องมาจาก client component (ส่งจาก server layout จะได้ 500 "Functions cannot be passed directly to Client Components"; showcase สาธิตด้วย `breadcrumbs: <ShellBreadcrumbs />`)
+- README: อธิบายว่า `ThemeMenuItems` มี group + หัวในตัว ไม่ต้องห่อเอง
+
 ## [0.3.0] — 2026-09-18
 
 ### Added

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
@@ -113,6 +115,9 @@ export default async function Layout({ children }) {
 
 - `header={false}` ไม่มี header · `collapsible="offcanvas"` ซ่อนทั้งแผง (supplychain) · `contentMaxWidth="max-w-5xl"` จำกัดความกว้าง (Pi Auth)
 - `pin={{ pinnedHrefs, onTogglePin }}` เปิดปุ่มปักหมุดเมนู (แอปเก็บ state เอง) · `header.center` วาง pinned menus
+- `sidebarHeader` ซ่อนอัตโนมัติเมื่อยุบเป็นไอคอน — ใส่ `sidebarHeaderCollapsed` ถ้าต้องการไอคอนแทน (เช่นปุ่ม ⌘K)
+- `header.breadcrumbs.labels` รับฟังก์ชัน `(segment, href) => ReactNode` ได้ (ใส่ `t()` ของ next-intl) — **แต่ฟังก์ชันส่งจาก server layout ไม่ได้** (React error "Functions cannot be passed directly to Client Components") ให้ทำ client component ที่เรียก `<HeaderBreadcrumbs labels={…} />` แล้วส่งเป็น `breadcrumbs: <MyBreadcrumbs />` (ดู `apps/showcase/src/app/shell/breadcrumbs.tsx`)
+- `<UserMenu>` children คือรายการเมนู: `ThemeMenuItems` มี `DropdownMenuGroup` + หัว "ธีม" ในตัวแล้ว (ปรับข้อความด้วย `label`/`labels`) ไม่ต้องห่อเพิ่ม; รายการอื่นใส่ `DropdownMenuItem`/`DropdownMenuGroup` เอง
 - ตัวอย่างรันได้ที่ `apps/showcase/src/app/shell`
 
 ### สีแบรนด์ต่อ tenant/แอป (`--brand`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.3.0",
+  "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/app-shell/app-shell.tsx

@@ -43,8 +43,10 @@ export interface AppShellProps {
   searchPlaceholder?: string;
   /** ปุ่ม pin เมนูขึ้น header (แอปเก็บ state เอง) */
   pin?: AppNavPinProps;
-  /** ส่วนเพิ่มใน sidebar ใต้โลโก้ เช่น TenantSwitcher / CommandPalette */
+  /** ส่วนเพิ่มใน sidebar ใต้โลโก้ เช่น TenantSwitcher / CommandPalette — ซ่อนอัตโนมัติเมื่อยุบเป็นไอคอน */
   sidebarHeader?: ReactNode;
+  /** สิ่งที่แสดงแทน `sidebarHeader` ตอนยุบเป็นไอคอน (เช่นปุ่มไอคอน ⌘K) — ไม่ส่ง = ไม่แสดงอะไร */
+  sidebarHeaderCollapsed?: ReactNode;
   /** ท้าย sidebar — ปกติคือ `<UserMenu variant="sidebar" />` */
   sidebarFooter?: ReactNode;
   /**
@@ -96,6 +98,7 @@ export function AppShell({
   searchPlaceholder = "ค้นหาเมนู…",
   pin,
   sidebarHeader,
+  sidebarHeaderCollapsed,
   sidebarFooter,
   header = true,
   brandColor,
@@ -133,6 +136,7 @@ export function AppShell({
         searchPlaceholder={searchPlaceholder}
         pin={pin}
         sidebarHeader={sidebarHeader}
+        sidebarHeaderCollapsed={sidebarHeaderCollapsed}
         sidebarFooter={sidebarFooter}
         collapsible={collapsible}
       />
@@ -195,6 +199,7 @@ function ShellSidebar({
   searchPlaceholder,
   pin,
   sidebarHeader,
+  sidebarHeaderCollapsed,
   sidebarFooter,
   collapsible,
 }: Pick<
@@ -205,6 +210,7 @@ function ShellSidebar({
   | "searchPlaceholder"
   | "pin"
   | "sidebarHeader"
+  | "sidebarHeaderCollapsed"
   | "sidebarFooter"
   | "collapsible"
 >) {
@@ -249,7 +255,12 @@ function ShellSidebar({
             </InputGroup>
           </div>
         )}
-        {sidebarHeader}
+        {sidebarHeader && (
+          <div className="group-data-[collapsible=icon]:hidden">{sidebarHeader}</div>
+        )}
+        {sidebarHeaderCollapsed && (
+          <div className="hidden group-data-[collapsible=icon]:block">{sidebarHeaderCollapsed}</div>
+        )}
       </SidebarHeader>
       <SidebarContent>
         <AppNav nav={visibleNav} pin={pin} forceOpen={searching} />

package/src/components/app-shell/header-breadcrumbs.tsx

@@ -10,11 +10,18 @@ import {
 } from "@suphark/ui/components/ui/breadcrumb";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Fragment } from "react";
+import { Fragment, type ReactNode } from "react";
 
 export interface HeaderBreadcrumbsProps {
-  /** ชื่อแสดงของแต่ละ segment (`{ "po-tracking": "PO Tracking" }`) — ไม่พบ = ตัวแรกพิมพ์ใหญ่ แทน - ด้วยช่องว่าง */
-  labels?: Record<string, string>;
+  /**
+   * ชื่อแสดงของแต่ละ segment: map (`{ "po-tracking": "PO Tracking" }`) หรือฟังก์ชัน
+   * `(segment, href) => ReactNode | undefined` (เช่น t() ของ next-intl)
+   * คืน undefined/ไม่พบ = ตัวแรกพิมพ์ใหญ่ แทน - ด้วยช่องว่าง
+   *
+   * ระวัง: ฟังก์ชันส่งข้าม server→client boundary ไม่ได้ ("Functions cannot be passed directly to Client Components")
+   * ถ้า layout เป็น server component ให้ใช้ map หรือส่ง `breadcrumbs: <MyBreadcrumbs />` ที่เป็น client component เรียก HeaderBreadcrumbs เอง
+   */
+  labels?: Record<string, ReactNode> | ((segment: string, href: string) => ReactNode | undefined);
   homeHref?: string;
   homeLabel?: string;
   /** ตัด segment นำหน้าออก เช่น `["console"]` เมื่อทุกหน้าอยู่ใต้ /console */
@@ -25,9 +32,9 @@ export interface HeaderBreadcrumbsProps {
 
 const ID_LIKE = /^(\d+|[0-9a-f]{8}-[0-9a-f-]{27}|c[a-z0-9]{20,}|[0-9a-z]{16,})$/i;
 
-function labelOf(segment: string, labels?: Record<string, string>) {
-  const known = labels?.[segment];
-  if (known) return known;
+function labelOf(segment: string, href: string, labels?: HeaderBreadcrumbsProps["labels"]) {
+  const known = typeof labels === "function" ? labels(segment, href) : labels?.[segment];
+  if (known !== undefined && known !== null && known !== "") return known;
   const decoded = decodeURIComponent(segment);
   return decoded.charAt(0).toUpperCase() + decoded.slice(1).replace(/-/g, " ");
 }
@@ -56,7 +63,7 @@ export function HeaderBreadcrumbs({
         {shown.length > 0 && <BreadcrumbSeparator className="hidden md:block" />}
         {shown.map(({ segment, href }, index) => {
           const isLast = index === shown.length - 1;
-          const label = labelOf(segment, labels);
+          const label = labelOf(segment, href, labels);
           return (
             <Fragment key={href}>
               <BreadcrumbItem>

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);
+}