@suphark/ui 0.6.1 → 0.8.0

package/CHANGELOG.md

@@ -2,6 +2,45 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.8.0] — 2026-09-21
+
+รอบ feedback หลังทุกแอปย้ายมา 0.7.0 ครบ 6/6 — สเปกจาก Pi Done (ColorPicker, CommandPalette client-side), Pi Mail (ActionForm), Pi Files (file explorer 4 ตัว) ทำรวดเดียว; minor ทั้งหมด ไม่เปลี่ยน API เดิม
+
+### Added
+
+- **`ColorPicker<T>`** + **`ColorSwatch`** (barrel) — กริดเลือกสีจากชุดที่แอปส่ง `colors[{ value, label, swatchClassName? | swatch? (CSS) }]` (แพ็กเกจไม่ bundle palette): ปุ่ม `aria-pressed` + `aria-label`/`title`, ที่เลือก = `ring-2 ring-primary ring-offset-1` + ✓ ขาว, hover scale-105, roving tabindex + ลูกศร ↑↓←→/Home/End (จำนวนคอลัมน์อ่านจาก grid จริง), `columnsClassName` (grid-cols-5), `size` sm|md (size-7/size-8), `language`/`text`; `ColorSwatch` จุดสี size-3.5 สำหรับ trigger/badge (`color` CSS หรือ class) — ไม่มี popover ในตัว แอปครอบเองแบบ IconPicker (สเปกจาก Pi Done แทน metadata-color-picker 9 จุด)
+- **`CommandPalette` โหมด client-side / controlled** (ขอจาก Pi Done): `filter(query) => CommandPaletteSection[]` คำนวณฝั่งแอปทุกครั้งที่ query เปลี่ยน (เรียกแม้ query ว่าง — ใช้แสดง action/ล่าสุด, ไม่ debounce) แสดงก่อนผลจาก `search`; item ใน section รับ `onSelect()` (action ล้วน `href` ไม่บังคับแล้ว; มีทั้งคู่เรียก onSelect ก่อนแล้วไป href) + `shortcut` (ป้ายท้ายรายการ); `open`/`onOpenChange` คุมจากภายนอก, `showTrigger={false}` ซ่อนปุ่มของแพ็กเกจ, `shortcut={null}` ไม่ดักคีย์ลัด (แอปดักเอง); type `CommandPaletteSectionItem`
+- **`ActionForm`** (ข้อสังเกตจาก Pi Mail): `hideSuccessMessage` ซ่อนข้อความสำเร็จเมื่อแอปแจ้งผลเอง (ใน compact ข้อความดันปุ่มตกบรรทัด — ยังแสดง error), `submitDisabled` + `submitProps` (variant/size/className ของปุ่มส่ง); **`FormState<TData>`** — `ok: true` มี `data?: TData` และ `ActionForm<TData>`/`FormDialog<TData>`/`FormAction<TData>` generic → `onSuccess(s)` ได้ `s.data` ไม่ต้อง cast (`TData` ค่าเริ่มต้น `undefined` — โค้ดเดิมไม่ต้องแก้)
+- **`TreeView`** (barrel, สเปกจาก Pi Files) — ต้นไม้ทั่วไป `role=tree` ตาม WAI-ARIA (treeitem มี aria-level/expanded/selected, roving tabindex): `nodes[{ id, label, icon?, hasChildren?, children?, disabled?, badge? }]`, `selectedId`/`onSelect(id, node)`, `expandedIds`/`defaultExpandedIds`/`onExpandedChange` (controlled ได้), `loadChildren(id, node)` โหลดลูก lazy (Spinner ระหว่างโหลด, cache ในตัว, error = ลูกว่าง), `onDrop(targetId, e, node)`/`canDrop` HTML5 dnd ไฮไลต์ node (`data-drop-target`), `renderLabel(node, { expanded, selected, level })`, คีย์บอร์ด ↑↓ เลื่อน → ขยาย/เข้าไปลูกแรก ← ยุบ/กลับแม่ Home/End Enter/Space เลือก, `indent` (12px/ระดับ), `emptyState`, `label`; สีตาม token ของ Sidebar (เลือก = `bg-sidebar-accent`) — ลูกศรยุบ/ขยายไม่ใช่ button (ไม่ซ้อน focusable ใน treeitem)
+- **`Dropzone`** (barrel, สเปกจาก Pi Files) — พื้นที่ลากวางไฟล์: การ์ดเดี่ยว (เส้นประ + ไอคอน + ข้อความ + ปุ่มเลือกไฟล์; คลิกการ์ด/ปุ่ม/Enter เปิด picker) หรือ `overlay` ห่อ `children` แสดงชั้น "วางไฟล์ที่นี่" เฉพาะตอนลากไฟล์เข้าหน้า (ฟัง window + กัน browser เปิดไฟล์เมื่อวางนอกโซน); `onFiles(File[])`, `multiple` (true), `accept` (นามสกุล/กลุ่ม/mime — export `matchesAccept`), `maxBytes`, `onRejected(files, "size" | "type" | "multiple")`, `disabled`, `directory` (`webkitdirectory` + วางโฟลเดอร์ไล่อ่านไฟล์ข้างในผ่าน `webkitGetAsEntry`), `hint` (ค่าเริ่มต้นแสดง maxBytes), `icon`, `language`/`text`; data-attribute `data-active`/`data-disabled`
+- **`UploadList`** (barrel, สเปกจาก Pi Files) — รายการอัปโหลด `items[{ id, name, sizeBytes, progress 0–1, status queued|uploading|done|error|aborted, error?, mime? }]` พร้อม `ProgressBar` ต่อแถว (queued จาง), `FileTypeIcon`, สรุป "x/y เสร็จ"/"เสร็จทั้งหมด" (aria-live), `onCancel`/`onRetry`/`onClearDone`/`onClose`, ยุบ/ขยาย (`defaultCollapsed`), `floating` มุมล่างขวาแบบ Drive (w-80 ไม่เกินจอ), `title`, `language`/`text`; `items` ว่าง = ไม่ render
+- **`FileTypeIcon`** + **`getFileKind(mime, filename)`** (barrel) — ไอคอน lucide ตามชนิดไฟล์ (folder/image/video/audio/pdf/doc/sheet/slides/zip/code/text/default) จาก mime ก่อน นามสกุลสำรอง สีตาม token (pdf destructive, sheet success, folder/slides warning, สื่อ primary), `size` px, `data-kind`; **`formatBytes(bytes, locale)`** (lib/formatters) ฐาน 1024 "1.5 KB"/"12 MB"
+- showcase: หน้า `color-picker` (กริด + ครอบ Popover), `tree-view` (lazy + drop ไฟล์จริง), `dropzone` (การ์ด + overlay), `upload-list` (mock progress + ลอย), `file-type-icon`; `command-palette` เพิ่มแบบ client-side คุม open เอง; `action-form` เพิ่ม hideSuccessMessage/submitDisabled/data (SecretReveal) — 95 หน้า; tests 17 กรณีเพิ่ม (รวม 119)
+
+## [0.7.0] — 2026-09-20
+
+component ระดับแอปที่ Pi Auth และ Pi Done เขียนซ้ำกัน — สเปกจาก Pi Auth ออกแบบให้ทั้งสองแอปใช้ร่วม (ไม่พึ่ง i18n/auth ของแอป ทุกข้อความรับเป็น prop หรือ `UiText`)
+
+### Added
+
+- **`CommandPalette`** (`@suphark/ui/next`) — ค้นหาแบบ ⌘K/Ctrl+K ทั้งแอป: `pages` (หน้าในเมนูที่แอปกรองสิทธิ์แล้ว — กรองฝั่ง client ตาม label/group/href/keywords) + `search?(query) => Promise<CommandPaletteSection[]>` (server action ของแอป เรียกเมื่อ ≥ `minQuery` ตัว, debounce `debounceMs` 150, เก็บ query คู่ผล ผลล่าสุดเท่านั้นที่แสดง), `compact` (ปุ่มไอคอนใน header) หรือปุ่มเต็มกว้าง + `Kbd` (⌘K/CtrlK ตาม platform หลัง mount) สำหรับ `sidebarHeader`, `shortcut` (ค่าเริ่มต้น k), `text` (fallback `UiText.palette`), `onNavigate` (ค่าเริ่มต้น router.push + ปิด); `Command shouldFilter={false}`, `CommandEmpty` แสดง "กำลังค้นหา…" ขณะ pending; types `CommandPaletteItem`, `CommandPaletteSection`, `CommandPaletteText`
+- **`OrganizationSwitcher`** (`@suphark/ui/next`) — ตัวสลับองค์กร/tenant แบบ Clerk บน `HeaderCrumb` + `DropdownMenu`: `organizations[{ id, name, slug?, logoUrl? }]`, `activeId`, `onSwitch(id)` (server action — component ทำ useTransition + `router.refresh()` ปิดได้ด้วย `refresh={false}`), `placement="header"` (HeaderCrumb ใน layout top) / `"sidebar"` (ปุ่มเต็มกว้าง + SwitcherChevron ใน `sidebarHeader`), `fallbackLabel`/`heading` (ค่าเริ่มต้น `UiText.switcher`), `hint(org)` (ค่าเริ่มต้น `/slug`), `footer` (slot ท้ายเมนู เช่น สร้างองค์กร); องค์กรเดียว = ไม่มีเมนู, active มี ✓ และกดไม่ทำอะไร, pending ปิดปุ่ม, โลโก้ `<img size-5>` หรือ Building2; types `OrganizationOption`, `OrganizationSwitcherProps`
+- `UiText.palette` / `UiText.switcher` (optional, มีค่าเริ่มต้นไทย/อังกฤษ)
+- **`IconPicker`** (barrel, generic `T extends string`) — เลือกไอคอนจากชุดที่แอปส่ง `icons[{ name, icon: LucideIcon, labelTh, labelEn, keywords? }]` (แพ็กเกจไม่ bundle ชุดไอคอน): ค้นหา name/labelTh/labelEn/keywords ผ่าน `useDeferredValue`, preview ไอคอน+ชื่อด้านบน, กริด `SelectionButton` (aria-pressed, title/aria-label ตาม `language` th/en), `accentColor` (inline style สี dynamic ของผู้ใช้), `heightClassName`/`columnsClassName`, `text` ทับข้อความ — สเปกจาก DueBell ให้ Pi Done (metadata icon) ใช้ร่วม
+- **`SelectionButton`** (barrel) — ปุ่ม toggle `aria-pressed` + สีเน้นเมื่อเลือก (Button outline) — chip ประเภท/ตัวกรอง, ช่องใน IconPicker (ยกจาก DueBell)
+- **`CalendarMonthGrid<T>`** (barrel) — ตารางเดือนเลือกวันที่แอปคุมเนื้อหาต่อวัน: `month "YYYY-MM"`, `selectedDay`, `onSelectDay(day, date)`, `itemsByDay`, `renderDay(ctx)` (คืน null = ✓ ของแพ็กเกจเมื่อ complete), `dayState(items, ctx) → { complete?, hasItems? }` → data-attribute `data-selected/today/has-items/complete/weekend` ให้ CSS ของแอปแต่ง, (data-attribute เป็น boolean มี/ไม่มี — CSS ใช้ `[data-selected]`), `weekStartsOn 0|1`, `weekdayLabels` (export `WEEKDAYS_TH`/`WEEKDAYS_EN`), `today` (ไม่ส่ง = browser หลัง mount ผ่าน `useMounted` — SSR ได้ไม่ mismatch), `dayLabel` (aria-label "วันที่ N มี M รายการ"), `legend`, `dayClassName`; ช่องว่างก่อนวันที่ 1 aspect-square; ปุ่มวัน `aria-pressed` — สเปกจาก DueBell + Pi Done
+- **`ProgressBar`** (barrel) — แถบความคืบหน้าตั้ง `tone` (default/success/warning/destructive), `size` sm/md/lg, `label`, `showValue`/`format`, `trackClassName`/`indicatorClassName`/`indicatorStyle` (สี dynamic) จาก props — `Progress` ของ shadcn ต่อท้าย Track+Indicator ให้เสมอ ส่ง children เข้าไปจะได้ 2 แถบ (รายงานจาก DueBell) จึงประกอบจาก `ProgressPrimitive.Root` โดยตรง
+- showcase: หน้า `icon-picker`, `selection-button`, `calendar-month-grid`, `progress-bar`; tests 6 กรณีเพิ่ม (รวม 100)
+- **error รายช่องในฟอร์ม server action** (ขอจาก Pi Mail): `FormState` แบบ `ok: false` รับ `errors?: Record<string, string>`; `ActionForm` และ `FormDialog` รับ `children` เป็นฟังก์ชัน `({ state, pending, errors, fieldError }) => ReactNode` (type `FormRenderContext`) → `<LabeledField error={fieldError("email")}>` ไม่ต้องมี hook ของแอป; `FormMessage` ยังแสดง `error` รวมเหมือนเดิม
+- `UserMenu`: prop `menuLabel` + `UiText.userMenu`/`signOut` (ขอจาก Pi PDF — แอปอังกฤษได้ label ไทย); `ThemeMenuItems`: prop `onThemeChange(theme)` สำหรับบันทึกธีมเป็น preference ของบัญชี + ข้อความจาก `UiText.theme`
+- `LabeledField`: prop `htmlFor` — ส่งมาแล้ว label ไม่ครอบ control (ผูกด้วย id) ให้ tooling ที่ไม่คำนวณ nested label เห็น accessible name (ข้อสังเกตจาก Pi Files)
+- `DataTable`: `showToolbar` / `showPagination` (ค่าเริ่มต้น true) ปิดแถบค้นหา/ตัวกรอง/View และ pagination สำหรับตารางตั้งค่าเล็ก ๆ (ขอจาก Pi Files)
+
+### Fixed
+
+- **`AppShell` (layout sidebar) มี `<main>` ซ้อน 2 ชั้น** (รายงานจาก DueBell): `SidebarInset` ของ shadcn เป็น `<main>` อยู่แล้ว → ใส่ `id={APP_MAIN_ID}`/`tabIndex` ที่ SidebarInset และเลิกสร้าง `<main>` ชั้นใน (เป็น `<div>`); layout top ยังมี `<main>` ตัวเดียวเหมือนเดิม
+- showcase: หน้า `command-palette`, `organization-switcher`; `/shell` (sidebarHeader + ยุบเป็นไอคอน) และ `/shell-top` (crumb องค์กร) ใช้สองตัวนี้จริงแทน mock เดิม; tests 5 กรณี (คีย์ลัด toggle + กรอง keywords, search debounce/ผลล่าสุด/push+ปิด, org เดียวไม่มีเมนู, active ไม่เรียก onSwitch + refresh, fallback label)
+
 ## [0.6.1] — 2026-09-20
 
 ### Added

package/README.md

@@ -60,6 +60,7 @@ import { ThemeProvider, Toaster } from "@suphark/ui";
 ```ts
 // ทุกอย่างที่ไม่พึ่ง Next — primitives, shared, theme, hooks, cn
 import { Button, Card, FormFieldInput, StatusBadge, ThemeToggle, ConfirmDialog, useConfirm, cn } from "@suphark/ui";
+// file explorer / picker: TreeView, Dropzone, UploadList, FileTypeIcon, ColorPicker, IconPicker, CalendarMonthGrid ก็อยู่ barrel
 
 // ของที่ใช้ next/navigation หรือ next/link + โครงแอป
 import { AppShell, UserMenu, filterNav, FormDialog, RowActions, LinkButton, RefreshButton, PageShell } from "@suphark/ui/next";
@@ -82,12 +83,12 @@ import { ChartContainer } from "@suphark/ui/components/ui/chart";
 | โฟลเดอร์ | คืออะไร | กติกา |
 |---|---|---|
 | `src/components/ui/*` | shadcn/ui ต้นฉบับ 59 ตัว (+ `__tests__`) | **ห้ามแก้มือ** — เพิ่ม/อัปเดตด้วย `pnpm dlx shadcn@latest add <name>` ใน `packages/ui` (`components.json` ตั้ง alias ไว้แล้ว) |
-| `src/components/shared/*` | ของที่เราประกอบเอง: ปุ่มมาตรฐาน (`button/`), form-field บน react-hook-form (`form/`), layout, theme, combobox, และชุดจาก Pi Auth (FormDialog, NameIdFields, StatusBadge, RowMenu, …) | แก้ได้ แต่คง props เดิมให้มากที่สุด (minor = เพิ่ม, major = เปลี่ยน) |
+| `src/components/shared/*` | ของที่เราประกอบเอง: ปุ่มมาตรฐาน (`button/`), form-field บน react-hook-form (`form/`), layout, theme, combobox, ชุดจาก Pi Auth (FormDialog, NameIdFields, StatusBadge, RowMenu, …), picker (IconPicker/ColorPicker/CalendarMonthGrid), file explorer (TreeView/Dropzone/UploadList/FileTypeIcon) | แก้ได้ แต่คง props เดิมให้มากที่สุด (minor = เพิ่ม, major = เปลี่ยน) |
 | `src/components/data-table/*` | DataTable บน tanstack (toolbar, faceted filter, pagination, view options, row actions, ลากเรียงแถว) | entry `@suphark/ui/data-table` |
 | `src/components/pwa/*` | PWA: ลงทะเบียน/อัปเดต service worker, การ์ดชวนติดตั้ง, ดึงลงเพื่อรีเฟรช | entry `@suphark/ui/pwa` |
 | `src/components/app-shell/*` | AppShell (sidebar + header + เนื้อหา), AppNav, AppBrand, UserMenu, HeaderBreadcrumbs, NavLink, filterNav/searchNav | export ผ่าน `@suphark/ui/next` (ใช้ next/link, next/navigation) |
 | `src/components/design-system/*` | หน้า showcase (render ใน `apps/showcase`) | ไม่อยู่ใน barrel |
-| `src/lib/*`, `src/hooks/*` | `cn`, formatter วันที่ไทย, สีสถานะ, permission context, `useIsMobile`, `useCopyToClipboard` | |
+| `src/lib/*`, `src/hooks/*` | `cn`, formatter วันที่ไทย + `formatBytes`, สีสถานะ, permission context, `useIsMobile`, `useCopyToClipboard`, `useMounted`, `useTicker` | |
 | `src/styles.css` | token (slate + success/warning/sidebar/chart), radius, ฟอนต์, scrollbar, dark variant | |
 | `scripts/*.mjs` | audit บังคับ: Base UI props (`default*`/`onSelect`), typography scale | แอปปลายทางรันได้จาก `node_modules/@suphark/ui/scripts` |
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "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

@@ -114,7 +114,7 @@ export function AppShell(props: AppShellProps) {
   return <SidebarShell {...props} />;
 }
 
-/** id ของ <main> ที่ AppShell สร้าง — ใช้อ้างจาก skip link / anchor */
+/** id ของ <main> ของ AppShell (sidebar: SidebarInset, top: main ในเนื้อหา) — ใช้อ้างจาก skip link / anchor */
 export const APP_MAIN_ID = "app-main";
 
 /** ลิงก์ "ข้ามไปเนื้อหา" สำหรับคีย์บอร์ด/screen reader — มองไม่เห็นจนกด Tab ตัวแรก */
@@ -180,7 +180,8 @@ function SidebarShell({
         collapsible={collapsible}
       />
 
-      <SidebarInset>
+      {/* SidebarInset ของ shadcn เป็น <main> อยู่แล้ว → ใส่ id/tabIndex ให้ skip link ที่นี่ ไม่สร้าง <main> ซ้อน */}
+      <SidebarInset id={APP_MAIN_ID} tabIndex={-1} className="outline-none">
         {showHeader && (
           <div className="sticky top-0 z-40 shrink-0 bg-background print:static">
             {headerOpts.banner}
@@ -216,17 +217,15 @@ function SidebarShell({
             </header>
           </div>
         )}
-        <main
-          id={APP_MAIN_ID}
-          tabIndex={-1}
+        <div
           className={cn(
-            "flex flex-1 flex-col gap-4 p-4 outline-none md:gap-6 md:p-6 print:overflow-visible",
+            "flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6 print:overflow-visible",
             contentMaxWidth && cn("mx-auto w-full", contentMaxWidth),
             contentClassName,
           )}
         >
           {children}
-        </main>
+        </div>
       </SidebarInset>
     </SidebarProvider>
   );

package/src/components/app-shell/command-palette.tsx

@@ -0,0 +1,306 @@
+"use client";
+
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+} from "@suphark/ui/components/ui/command";
+import { Kbd } from "@suphark/ui/components/ui/kbd";
+import { useMounted } from "@suphark/ui/hooks/use-mounted";
+import { cn } from "@suphark/ui/lib/utils";
+import { Search } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { type ReactNode, useEffect, useMemo, useRef, useState, useTransition } from "react";
+
+export interface CommandPaletteItem {
+  href: string;
+  label: string;
+  /** ชื่อกลุ่ม (แสดงเป็น shortcut ท้ายรายการ และใช้ค้นหา) */
+  group?: string;
+  icon?: ReactNode;
+  /** คำค้นเพิ่มเติมนอกจาก label/group/href */
+  keywords?: string[];
+}
+
+export interface CommandPaletteSectionItem {
+  id: string;
+  /** ไปหน้า (router.push / `onNavigate`) — ไม่ส่งถ้าเป็น action ล้วน */
+  href?: string;
+  /** action ฝั่ง client (สร้างงาน, สลับ sidebar …) — เรียกหลังปิดกล่อง; ถ้ามีทั้งคู่ เรียก onSelect ก่อนแล้วไป href */
+  onSelect?: () => void;
+  label: string;
+  description?: string;
+  icon?: ReactNode;
+  /** ป้ายคีย์ลัดท้ายรายการ (แสดงอย่างเดียว เช่น "G H") */
+  shortcut?: string;
+}
+
+export interface CommandPaletteSection {
+  key: string;
+  heading: string;
+  items: CommandPaletteSectionItem[];
+}
+
+export interface CommandPaletteText {
+  placeholder: string;
+  title: string;
+  description: string;
+  empty: string;
+  searching: string;
+  /** หัวกลุ่ม "หน้า" */
+  pages: string;
+}
+
+const DEFAULT_TEXT: CommandPaletteText = {
+  placeholder: "ค้นหาหรือสั่งงาน…",
+  title: "ค้นหา",
+  description: "พิมพ์เพื่อค้นหาหน้าและข้อมูล",
+  empty: "ไม่พบผลลัพธ์",
+  searching: "กำลังค้นหา…",
+  pages: "หน้า",
+};
+
+/** ⌘ บน Mac, Ctrl ที่อื่น — อ่านฝั่ง client หลัง mount เท่านั้น (กัน hydration mismatch) */
+function useModKeyLabel(mounted: boolean): string {
+  return useMemo(() => {
+    if (!mounted) return "Ctrl";
+    const p = `${navigator.platform ?? ""} ${navigator.userAgent ?? ""}`;
+    return /mac|iphone|ipad/i.test(p) ? "⌘" : "Ctrl";
+  }, [mounted]);
+}
+
+/**
+ * ค้นหาแบบ ⌘K / Ctrl+K ทั้งแอป: หน้าในเมนู (แอปกรองสิทธิ์มาแล้ว) กรองฝั่ง client + ส่วนจาก server action
+ * (`search`) เมื่อพิมพ์ ≥ `minQuery` ตัว (debounce; ผลของ query ล่าสุดเท่านั้นที่แสดง) + ส่วนที่แอปคำนวณเองฝั่ง client
+ * (`filter(query)` — ข้อมูลใน memory/offline-first, รายการ action ที่มี `onSelect`) แสดงก่อนผลจาก server
+ * เปิด/ปิดคุมจากภายนอกได้ (`open`/`onOpenChange`) และซ่อนปุ่มเรียกของแพ็กเกจ (`showTrigger={false}`) เมื่อแอปมีปุ่ม/คีย์ลัดเอง
+ * ปุ่มเรียก: `compact` = ไอคอนใน header, ค่าเริ่มต้น = ปุ่มเต็มกว้าง + Kbd ใน `sidebarHeader` ของ AppShell
+ * ข้อความรับเป็น prop `text` (ค่าเริ่มต้นจาก `UiText.palette` หรือไทย) — ไม่พึ่ง i18n ของแอป
+ * ยกจาก Pi Auth (features/console/command-palette) ให้ Pi Done/DueBell ใช้ร่วม
+ */
+export function CommandPalette({
+  pages,
+  search,
+  filter,
+  compact = false,
+  showTrigger = true,
+  open: controlledOpen,
+  onOpenChange,
+  shortcut = "k",
+  minQuery = 2,
+  debounceMs = 150,
+  text: textProp,
+  onNavigate,
+  className,
+}: {
+  pages: CommandPaletteItem[];
+  /** server action ของแอป — คืน section ตามลำดับที่ต้องการแสดง */
+  search?: (query: string) => Promise<CommandPaletteSection[]>;
+  /**
+   * section ที่แอปคำนวณเองฝั่ง client ทุกครั้งที่ query เปลี่ยน (query ว่างก็เรียก — ใช้แสดงรายการ action/ล่าสุด);
+   * ไม่ debounce เพราะไม่มี IO — ให้ memo ฝั่งแอปถ้าชุดข้อมูลใหญ่
+   */
+  filter?: (query: string) => CommandPaletteSection[];
+  compact?: boolean;
+  /** ซ่อนปุ่มเรียกของแพ็กเกจ (แอปเปิดเองผ่าน `open` หรือคีย์ลัด) */
+  showTrigger?: boolean;
+  /** คุมการเปิดจากภายนอก (ใช้คู่ `onOpenChange`) — ไม่ส่ง = คุมเองในตัว */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** ตัวอักษรคีย์ลัดร่วมกับ ⌘/Ctrl (ค่าเริ่มต้น "k"); `null` = ไม่ดักคีย์ลัด (แอปดักเอง) */
+  shortcut?: string | null;
+  minQuery?: number;
+  debounceMs?: number;
+  text?: Partial<CommandPaletteText>;
+  /** ค่าเริ่มต้น router.push + ปิดกล่อง — ครอบเพื่อ prefetch/analytics แล้วเรียกต่อเองได้ */
+  onNavigate?: (href: string) => void;
+  className?: string;
+}) {
+  const ui = useUiText();
+  const text: CommandPaletteText = { ...DEFAULT_TEXT, ...ui.palette, ...textProp };
+  const router = useRouter();
+  const mounted = useMounted();
+  const mod = useModKeyLabel(mounted);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = (next: boolean) => {
+    if (controlledOpen === undefined) setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  };
+  const [query, setQuery] = useState("");
+  const [result, setResult] = useState<{ query: string; sections: CommandPaletteSection[] } | null>(
+    null,
+  );
+  const [pending, start] = useTransition();
+
+  // คีย์ลัดจากที่ไหนก็ได้ในแอป
+  const openRef = useRef(open);
+  openRef.current = open;
+  const setOpenRef = useRef(setOpen);
+  setOpenRef.current = setOpen;
+  useEffect(() => {
+    if (!shortcut) return;
+    const key = shortcut.toLowerCase();
+    const onKey = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === key) {
+        e.preventDefault();
+        setOpenRef.current(!openRef.current);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [shortcut]);
+
+  const q = query.trim();
+  const shouldSearch = Boolean(search) && q.length >= minQuery;
+
+  // ค้นหาฝั่ง server หลังหยุดพิมพ์ — เก็บ query คู่กับผล ผลที่ไม่ตรง query ปัจจุบันไม่แสดง
+  useEffect(() => {
+    if (!search || !shouldSearch) return;
+    const handle = setTimeout(() => {
+      start(async () => {
+        try {
+          const sections = await search(q);
+          setResult({ query: q, sections });
+        } catch {
+          setResult({ query: q, sections: [] });
+        }
+      });
+    }, debounceMs);
+    return () => clearTimeout(handle);
+  }, [q, search, shouldSearch, debounceMs]);
+
+  const localSections = filter ? filter(q) : [];
+  const remoteSections = shouldSearch && result?.query === q ? result.sections : [];
+  const sections = [...localSections, ...remoteSections];
+  const ql = q.toLowerCase();
+  const visiblePages = ql
+    ? pages.filter((p) =>
+        `${p.label} ${p.group ?? ""} ${p.href} ${(p.keywords ?? []).join(" ")}`
+          .toLowerCase()
+          .includes(ql),
+      )
+    : pages;
+  const nothing = visiblePages.length === 0 && sections.every((s) => s.items.length === 0);
+
+  function close() {
+    setOpen(false);
+    setQuery("");
+  }
+  function go(href: string) {
+    close();
+    if (onNavigate) onNavigate(href);
+    else router.push(href);
+  }
+  function pick(item: CommandPaletteSectionItem) {
+    close();
+    item.onSelect?.();
+    if (item.href) {
+      if (onNavigate) onNavigate(item.href);
+      else router.push(item.href);
+    }
+  }
+
+  const shortcutLabel = `${mod}${(shortcut ?? "k").toUpperCase()}`;
+
+  return (
+    <>
+      {!showTrigger ? null : compact ? (
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          aria-label={text.placeholder}
+          title={shortcut ? `${text.placeholder} (${shortcutLabel})` : text.placeholder}
+          className={cn("text-muted-foreground", className)}
+          onClick={() => setOpen(true)}
+        >
+          <Search />
+        </Button>
+      ) : (
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className={cn(
+            "h-8 w-full justify-start gap-2 bg-background px-2 font-normal text-muted-foreground",
+            className,
+          )}
+          onClick={() => setOpen(true)}
+        >
+          <Search />
+          <span className="flex-1 truncate text-left">{text.placeholder}</span>
+          {shortcut && <Kbd className="hidden sm:inline-flex">{shortcutLabel}</Kbd>}
+        </Button>
+      )}
+      <CommandDialog
+        open={open}
+        onOpenChange={(o) => (o ? setOpen(true) : close())}
+        title={text.title}
+        description={text.description}
+      >
+        <Command shouldFilter={false}>
+          <CommandInput
+            autoFocus
+            placeholder={text.placeholder}
+            value={query}
+            onValueChange={setQuery}
+          />
+          <CommandList>
+            {nothing && (
+              <CommandEmpty>{pending && shouldSearch ? text.searching : text.empty}</CommandEmpty>
+            )}
+            {visiblePages.length > 0 && (
+              <CommandGroup heading={text.pages}>
+                {visiblePages.map((p) => (
+                  <CommandItem key={p.href} value={p.href} onSelect={() => go(p.href)}>
+                    <span className="flex size-4 shrink-0 items-center justify-center text-muted-foreground [&_svg]:size-4">
+                      {p.icon}
+                    </span>
+                    <span className="flex-1 truncate">{p.label}</span>
+                    {p.group && <CommandShortcut>{p.group}</CommandShortcut>}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            )}
+            {sections.map(
+              (s) =>
+                s.items.length > 0 && (
+                  <CommandGroup key={s.key} heading={s.heading}>
+                    {s.items.map((it) => (
+                      <CommandItem
+                        key={it.id}
+                        value={`${s.key}:${it.id}`}
+                        onSelect={() => pick(it)}
+                      >
+                        <span className="flex size-4 shrink-0 items-center justify-center text-muted-foreground [&_svg]:size-4">
+                          {it.icon}
+                        </span>
+                        <span className="flex-1 truncate">
+                          {it.label}
+                          {it.description && (
+                            <span className="text-muted-foreground"> · {it.description}</span>
+                          )}
+                        </span>
+                        {it.shortcut && <CommandShortcut>{it.shortcut}</CommandShortcut>}
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                ),
+            )}
+            {pending && shouldSearch && !nothing && (
+              <div className="px-3 py-2 text-muted-foreground text-xs">{text.searching}</div>
+            )}
+          </CommandList>
+        </Command>
+      </CommandDialog>
+    </>
+  );
+}

package/src/components/app-shell/index.ts

@@ -1,9 +1,21 @@
 export { AppBrand, type AppBrandProps } from "./app-brand";
 export { AppNav, AppNavGroupMenu, type AppNavPinProps } from "./app-nav";
 export { APP_MAIN_ID, AppShell, type AppShellProps } from "./app-shell";
+export {
+  CommandPalette,
+  type CommandPaletteItem,
+  type CommandPaletteSection,
+  type CommandPaletteSectionItem,
+  type CommandPaletteText,
+} from "./command-palette";
 export { HeaderBreadcrumbs, type HeaderBreadcrumbsProps } from "./header-breadcrumbs";
 export { HeaderCrumb, HeaderCrumbs } from "./header-crumb";
 export { NavLink } from "./nav-link";
+export {
+  type OrganizationOption,
+  OrganizationSwitcher,
+  type OrganizationSwitcherProps,
+} from "./organization-switcher";
 export { SubNav } from "./sub-nav";
 export { isTabActive, TopTabs, topLevelTabs } from "./top-tabs";
 export {

package/src/components/app-shell/organization-switcher.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { SwitcherChevron } from "@suphark/ui/components/shared/switcher-chevron";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@suphark/ui/components/ui/dropdown-menu";
+import { cn } from "@suphark/ui/lib/utils";
+import { Building2, Check } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { type ReactNode, useTransition } from "react";
+import { HeaderCrumb } from "./header-crumb";
+
+export interface OrganizationOption {
+  id: string;
+  name: string;
+  slug?: string;
+  logoUrl?: string | null;
+}
+
+export interface OrganizationSwitcherProps {
+  organizations: OrganizationOption[];
+  activeId: string | null;
+  /** แอปเรียก server action สลับองค์กร — component ทำ useTransition + router.refresh() หลัง resolve */
+  onSwitch: (id: string) => Promise<void> | void;
+  /** refresh หน้าหลังสลับ (ค่าเริ่มต้น true) */
+  refresh?: boolean;
+  /** ไม่มี active — ค่าเริ่มต้น `UiText.switcher.choose` */
+  fallbackLabel?: string;
+  /** หัว dropdown — ค่าเริ่มต้น `UiText.switcher.organization` */
+  heading?: string;
+  /** ข้อความจางท้ายชื่อ (ค่าเริ่มต้น `/slug` ถ้ามี) */
+  hint?: (org: OrganizationOption) => ReactNode;
+  /** slot ท้ายเมนู เช่น "สร้างองค์กร…", "จัดการองค์กร" */
+  footer?: ReactNode;
+  /** `header` = HeaderCrumb ใน header (layout top); `sidebar` = ปุ่มเต็มกว้างใน `sidebarHeader` ของ AppShell */
+  placement?: "header" | "sidebar";
+  className?: string;
+}
+
+function OrgLogo({ org }: { org: OrganizationOption | undefined }) {
+  if (org?.logoUrl)
+    return <img src={org.logoUrl} alt="" className="size-5 rounded object-contain" />;
+  return <Building2 className="size-3.5 text-muted-foreground" aria-hidden="true" />;
+}
+
+/**
+ * ตัวสลับองค์กร/tenant มาตรฐาน (แบบ Clerk OrganizationSwitcher) — ยกจาก Pi Auth TenantSwitcher ให้ Pi Done/DueBell ใช้ร่วม
+ * องค์กรเดียว = แสดงชื่อ ไม่มี dropdown; รายการที่ active มี ✓ และกดแล้วไม่ทำอะไร; ระหว่าง pending ปุ่ม disabled
+ */
+export function OrganizationSwitcher({
+  organizations,
+  activeId,
+  onSwitch,
+  refresh = true,
+  fallbackLabel,
+  heading,
+  hint = (o) => (o.slug ? `/${o.slug}` : undefined),
+  footer,
+  placement = "header",
+  className,
+}: OrganizationSwitcherProps) {
+  const text = useUiText();
+  const router = useRouter();
+  const [pending, start] = useTransition();
+  const active = organizations.find((o) => o.id === activeId);
+  const label = active ? active.name : (fallbackLabel ?? text.switcher?.choose ?? "เลือกองค์กร");
+  const single = organizations.length <= 1 && !footer;
+
+  const trigger =
+    placement === "sidebar" ? (
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        disabled={pending}
+        aria-label={heading ?? text.switcher?.organization ?? "องค์กร"}
+        className={cn("h-8 w-full justify-start gap-2 bg-background px-2 font-normal", className)}
+      >
+        <OrgLogo org={active} />
+        <span className="truncate">{label}</span>
+        {!single && <SwitcherChevron className="ml-auto" />}
+      </Button>
+    ) : (
+      <HeaderCrumb
+        icon={<OrgLogo org={active} />}
+        label={label}
+        hint={active ? hint(active) : undefined}
+        chevron={!single}
+        disabled={pending}
+        className={className}
+      />
+    );
+
+  if (single) return trigger;
+
+  function pick(id: string) {
+    if (id === activeId) return;
+    start(async () => {
+      await onSwitch(id);
+      if (refresh) router.refresh();
+    });
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger render={trigger} />
+      <DropdownMenuContent align="start" className="w-56">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel className="text-muted-foreground">
+            {heading ?? text.switcher?.organization ?? "องค์กร"}
+          </DropdownMenuLabel>
+          {organizations.map((o) => {
+            const isActive = o.id === activeId;
+            return (
+              <DropdownMenuItem
+                key={o.id}
+                onClick={() => pick(o.id)}
+                aria-current={isActive ? "true" : undefined}
+                className="gap-2"
+              >
+                <OrgLogo org={o} />
+                <span className="flex min-w-0 flex-1 flex-col">
+                  <span className="truncate">{o.name}</span>
+                  {hint(o) && (
+                    <span className="truncate text-muted-foreground text-xs">{hint(o)}</span>
+                  )}
+                </span>
+                {isActive && <Check className="size-4 shrink-0" aria-hidden="true" />}
+              </DropdownMenuItem>
+            );
+          })}
+        </DropdownMenuGroup>
+        {footer && (
+          <>
+            <DropdownMenuSeparator />
+            {footer}
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}