@suphark/ui 0.3.3 → 0.4.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.4.0] — 2026-09-19
+
+### Added
+
+- **`AppShell layout="top"`** — โครงแบบ Clerk dashboard (ขอจาก Pi Auth): header 56px มีโลโก้ + **crumb switchers** คั่น `/` (`crumbs` = array หรือ component ที่ render `<HeaderCrumbs>`) + `header.actions`/`banner`/`center`; **แถบแท็บหลัก** ใต้ header จาก `nav` ชั้นแรก (active underline ตาม prefix, badge, เลื่อนแนวนอนบนมือถือ); แท็บที่มี `items` → **sub-nav ซ้าย** 224px (รองรับหัวกลุ่ม 2 ชั้น, `searchable`, มือถือเป็น select); `contentMaxWidth`, `brandColor` ใช้ได้เหมือนเดิม; breadcrumb ของหน้าปิดเป็นค่าเริ่มต้นในโหมดนี้ — โหมด `sidebar` เดิมไม่เปลี่ยน
+- component ประกอบ (export จาก `@suphark/ui/next`): `HeaderCrumb` (ปุ่ม switcher: icon/label/badge/hint + ⌄ ใช้เป็น trigger ของ DropdownMenu ใดก็ได้), `HeaderCrumbs`, `TopTabs`, `SubNav`, helpers `topLevelTabs`/`isTabActive`
+- showcase: `/shell-top` ตัวอย่างเต็ม (องค์กร → แอป → Production [Invite-only], แท็บ 6 ตัว, "ตั้งค่า" มี sub-nav 2 กลุ่ม)
+
 ## [0.3.3] — 2026-09-19
 
 ### Fixed

package/README.md

@@ -113,6 +113,7 @@ export default async function Layout({ children }) {
 }
 ```
 
+- **`layout="top"`** = แบบ Clerk dashboard: `crumbs={[<HeaderCrumb …/>, …]}` (switcher องค์กร/แอป/สภาพแวดล้อม — ห่อ DropdownMenu เอง), `nav` ชั้นแรกเป็นแท็บบน ชั้นสองเป็น sub-nav ซ้าย, `header.actions` ขวา — ตัวอย่าง `apps/showcase/src/app/shell-top`
 - `header={false}` ไม่มี header · `collapsible="offcanvas"` ซ่อนทั้งแผง (supplychain) · `contentMaxWidth="max-w-5xl"` จำกัดความกว้าง (Pi Auth)
 - `pin={{ pinnedHrefs, onTogglePin }}` เปิดปุ่มปักหมุดเมนู (แอปเก็บ state เอง) · `header.center` วาง pinned menus
 - `sidebarHeader` ซ่อนอัตโนมัติเมื่อยุบเป็นไอคอน — ใส่ `sidebarHeaderCollapsed` ถ้าต้องการไอคอนแทน (เช่นปุ่ม ⌘K)

package/package.json

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

@@ -20,6 +20,8 @@ import {
 } from "@suphark/ui/components/ui/sidebar";
 import { cn } from "@suphark/ui/lib/utils";
 import { Search, X } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
 import {
   type ComponentProps,
   type CSSProperties,
@@ -31,10 +33,26 @@ import {
 import { AppBrand, type AppBrandProps } from "./app-brand";
 import { AppNav, type AppNavPinProps } from "./app-nav";
 import { HeaderBreadcrumbs, type HeaderBreadcrumbsProps } from "./header-breadcrumbs";
+import { HeaderCrumbs } from "./header-crumb";
+import { SubNav } from "./sub-nav";
+import { isTabActive, TopTabs, topLevelTabs } from "./top-tabs";
 import { type AppNavGroup, searchNav } from "./types";
 
 export interface AppShellProps {
-  /** โลโก้/ชื่อแอปมุมบน sidebar */
+  /**
+   * `sidebar` (ค่าเริ่มต้น) = sidebar ซ้าย (supplychain / console ทั่วไป)
+   * `top` = แบบ Clerk dashboard: header มี crumb switchers + actions, แถบแท็บหลักใต้ header,
+   *   แท็บที่มีลูก → sub-nav ซ้ายแคบ; `nav` ชั้นแรกกลายเป็นแท็บ, ชั้นสองเป็น sub-nav
+   */
+  layout?: "sidebar" | "top";
+  /**
+   * (layout top) ปุ่ม switcher ใน header เรียงจากซ้ายคั่นด้วย `/` — ใส่ `HeaderCrumb` ที่ห่อ DropdownMenu ของแอปเอง
+   * เช่น [องค์กร ⌄, แอป ⌄, ● Production ⌄]; ส่งเป็น array ให้คั่น `/` ให้ หรือส่ง component ที่ render `<HeaderCrumbs>` เอง; ไม่ส่ง = ชื่อแอปจาก `brand`
+   */
+  crumbs?: ReactNode[] | ReactNode;
+  /** (layout top) หัวของ sub-nav — ค่าเริ่มต้น = ชื่อแท็บที่ active */
+  subNavTitle?: ReactNode;
+  /** โลโก้/ชื่อแอปมุมบน sidebar (layout top: โลโก้เล็กหน้า crumbs ลิงก์ไป brand.href) */
   brand: AppBrandProps;
   /** เมนู (ตัดตามสิทธิ์ด้วย `filterNav` ก่อนส่งเข้ามา) */
   nav: AppNavGroup[];
@@ -91,7 +109,12 @@ export interface AppShellProps {
  * </AppShell>
  * ```
  */
-export function AppShell({
+export function AppShell(props: AppShellProps) {
+  if (props.layout === "top") return <TopShell {...props} />;
+  return <SidebarShell {...props} />;
+}
+
+function SidebarShell({
   brand,
   nav,
   searchable = false,
@@ -191,6 +214,102 @@ export function AppShell({
   );
 }
 
+/** layout "top" — header (โลโก้ + crumbs | actions) → แถบแท็บ → [sub-nav ซ้าย?] + เนื้อหา */
+function TopShell({
+  brand,
+  nav,
+  crumbs,
+  subNavTitle,
+  searchable = false,
+  searchPlaceholder = "ค้นหา…",
+  header = true,
+  brandColor,
+  brandForeground,
+  contentClassName,
+  contentMaxWidth,
+  children,
+}: AppShellProps) {
+  const pathname = usePathname();
+  const style = brandColor
+    ? ({
+        "--brand": brandColor,
+        ...(brandForeground ? { "--brand-foreground": brandForeground } : {}),
+      } as CSSProperties)
+    : undefined;
+  const headerOpts = typeof header === "object" ? header : {};
+  // breadcrumb ของหน้าใน layout top ปิดเป็นค่าเริ่มต้น (แท็บบอกตำแหน่งอยู่แล้ว) — เปิดด้วย header.breadcrumbs
+  const breadcrumbs =
+    headerOpts.breadcrumbs === undefined ||
+    headerOpts.breadcrumbs === false ? null : isBreadcrumbOptions(headerOpts.breadcrumbs) ? (
+      <HeaderBreadcrumbs {...headerOpts.breadcrumbs} />
+    ) : (
+      headerOpts.breadcrumbs
+    );
+
+  const activeTab = topLevelTabs(nav).find((t) => isTabActive(pathname, t));
+  const subItems = activeTab?.items ?? [];
+  const hasSubNav = subItems.length > 0;
+
+  const logo = (
+    <Link
+      href={brand.href ?? "/"}
+      aria-label={typeof brand.name === "string" ? brand.name : "หน้าแรก"}
+      className="flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-md bg-sidebar-primary font-bold text-sidebar-primary-foreground text-xs no-underline [&_img]:size-full [&_img]:object-contain [&_svg]:size-4"
+    >
+      {brand.logo ?? (typeof brand.name === "string" ? brand.name.charAt(0).toUpperCase() : "•")}
+    </Link>
+  );
+
+  return (
+    <div style={style} className="flex min-h-svh flex-col bg-background">
+      {header !== false && (
+        <div className="sticky top-0 z-40 bg-background print:static">
+          {headerOpts.banner}
+          <header className={cn("border-b px-4 md:px-6", headerOpts.className)}>
+            <div className="flex h-14 items-center gap-3">
+              {logo}
+              {Array.isArray(crumbs) ? (
+                <HeaderCrumbs className="min-w-0 flex-1">{crumbs}</HeaderCrumbs>
+              ) : crumbs ? (
+                <div className="flex min-w-0 flex-1 items-center">{crumbs}</div>
+              ) : (
+                <span className="min-w-0 flex-1 truncate font-semibold text-sm">{brand.name}</span>
+              )}
+              {headerOpts.center && <div className="hidden md:block">{headerOpts.center}</div>}
+              {headerOpts.actions && (
+                <div className="ml-auto flex shrink-0 items-center gap-1.5">
+                  {headerOpts.actions}
+                </div>
+              )}
+            </div>
+            <TopTabs nav={nav} />
+          </header>
+        </div>
+      )}
+
+      <div
+        className={cn(
+          "flex w-full flex-1 flex-col gap-4 p-4 md:flex-row md:gap-8 md:p-6",
+          contentMaxWidth && cn("mx-auto", contentMaxWidth),
+        )}
+      >
+        {hasSubNav && (
+          <SubNav
+            items={subItems}
+            title={subNavTitle ?? activeTab?.title}
+            searchable={searchable}
+            searchPlaceholder={searchPlaceholder}
+          />
+        )}
+        <div className={cn("flex min-w-0 flex-1 flex-col gap-4 md:gap-6", contentClassName)}>
+          {breadcrumbs}
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
 /** แผง sidebar — แยกเพื่อใช้ useSidebar (ล้างคำค้นเมื่อยุบ ไม่ให้เมนูถูกกรองทั้งที่มองไม่เห็นช่องค้นหา) */
 function ShellSidebar({
   brand,

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

@@ -0,0 +1,82 @@
+"use client";
+
+import { cn } from "@suphark/ui/lib/utils";
+import { ChevronsUpDown } from "lucide-react";
+import { type ComponentProps, Fragment, type ReactNode } from "react";
+
+/**
+ * ปุ่ม "switcher" ใน header แบบ Clerk dashboard (องค์กร ⌄ / แอป ⌄ / สภาพแวดล้อม ⌄)
+ * ใช้เป็น trigger ของ DropdownMenu/Popover ใดก็ได้: `<DropdownMenuTrigger render={<HeaderCrumb … />} />`
+ * หรือเป็นลิงก์: `<HeaderCrumb render={<Link href=… />} />` — เป็น <button> ธรรมดา
+ */
+export function HeaderCrumb({
+  icon,
+  label,
+  badge,
+  hint,
+  chevron = true,
+  className,
+  children,
+  ...props
+}: Omit<ComponentProps<"button">, "children"> & {
+  /** ไอคอน/โลโก้เล็กด้านซ้าย (lucide, <img>, Initials, จุดสี) */
+  icon?: ReactNode;
+  label: ReactNode;
+  /** ป้ายเล็กท้ายชื่อ เช่น "Invite-only", "Production" */
+  badge?: ReactNode;
+  /** ข้อความจางถัดจากชื่อ (จอกว้าง) */
+  hint?: ReactNode;
+  /** แสดงลูกศร ⌄ (ปิดเมื่อไม่ใช่ dropdown) */
+  chevron?: boolean;
+  children?: ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      className={cn(
+        "inline-flex h-8 max-w-56 items-center gap-1.5 rounded-md px-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring/50 data-[popup-open]:bg-accent data-[state=open]:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    >
+      {icon && (
+        <span className="flex shrink-0 items-center [&_img]:size-5 [&_img]:rounded">{icon}</span>
+      )}
+      <span className="truncate font-medium">{label}</span>
+      {hint && <span className="hidden truncate text-muted-foreground md:inline">{hint}</span>}
+      {badge && (
+        <span className="shrink-0 rounded-md border bg-muted px-1.5 py-px font-medium text-[0.7rem] text-muted-foreground leading-4">
+          {badge}
+        </span>
+      )}
+      {children}
+      {chevron && <ChevronsUpDown className="size-3.5! text-muted-foreground" aria-hidden="true" />}
+    </button>
+  );
+}
+
+/** แถว crumbs ใน header: คั่นด้วย `/` จาง ๆ (ซ่อนตัวกลางบนจอแคบให้เหลือตัวสุดท้ายถ้า `collapseOnMobile`) */
+export function HeaderCrumbs({
+  children,
+  className,
+}: {
+  children: ReactNode[] | ReactNode;
+  className?: string;
+}) {
+  const items = (Array.isArray(children) ? children : [children]).filter(Boolean);
+  return (
+    <div className={cn("flex min-w-0 items-center gap-0.5", className)}>
+      {items.map((item, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: ลำดับ crumb คงที่ (องค์กร → แอป → สภาพแวดล้อม)
+        <Fragment key={i}>
+          {i > 0 && (
+            <span aria-hidden="true" className="select-none px-0.5 text-muted-foreground/50">
+              /
+            </span>
+          )}
+          <div className={cn("min-w-0", i < items.length - 1 && "hidden sm:block")}>{item}</div>
+        </Fragment>
+      ))}
+    </div>
+  );
+}

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

@@ -2,7 +2,10 @@ export { AppBrand, type AppBrandProps } from "./app-brand";
 export { AppNav, AppNavGroupMenu, type AppNavPinProps } from "./app-nav";
 export { AppShell, type AppShellProps } from "./app-shell";
 export { HeaderBreadcrumbs, type HeaderBreadcrumbsProps } from "./header-breadcrumbs";
+export { HeaderCrumb, HeaderCrumbs } from "./header-crumb";
 export { NavLink } from "./nav-link";
+export { SubNav } from "./sub-nav";
+export { isTabActive, TopTabs, topLevelTabs } from "./top-tabs";
 export {
   type AppNavGroup,
   type AppNavItem,

package/src/components/app-shell/sub-nav.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@suphark/ui/components/ui/input-group";
+import { cn } from "@suphark/ui/lib/utils";
+import { Search } from "lucide-react";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { type ReactNode, useMemo, useState } from "react";
+import { type AppNavItem, isNavActive } from "./types";
+
+/**
+ * เมนูย่อยซ้ายของแท็บที่ active (แบบ Clerk Configure: User & authentication / SSO / …)
+ * รองรับ 2 ชั้น (item → items = หัวกลุ่มย่อย); จอแคบเป็น <select> ด้านบนเนื้อหา
+ */
+export function SubNav({
+  items,
+  title,
+  searchable = false,
+  searchPlaceholder = "ค้นหา…",
+  className,
+}: {
+  items: AppNavItem[];
+  /** หัวเมนู (เช่น ชื่อแท็บที่ active) */
+  title?: ReactNode;
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  className?: string;
+}) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const [query, setQuery] = useState("");
+  const q = query.trim().toLowerCase();
+
+  const sections = useMemo(() => {
+    // ชั้นเดียว = กลุ่มเดียวไม่มีหัว; ชั้นสอง = หัวกลุ่ม + ลูก
+    const flat = items.filter((i) => i.href);
+    const groups = items.filter((i) => !i.href && i.items?.length);
+    const out: Array<{ title?: string; items: Array<AppNavItem & { href: string }> }> = [];
+    if (flat.length) out.push({ items: flat as Array<AppNavItem & { href: string }> });
+    for (const g of groups) {
+      out.push({
+        title: g.title,
+        items: (g.items ?? []).filter((c): c is AppNavItem & { href: string } => Boolean(c.href)),
+      });
+    }
+    if (!q) return out;
+    return out
+      .map((s) => ({ ...s, items: s.items.filter((i) => i.title.toLowerCase().includes(q)) }))
+      .filter((s) => s.items.length > 0);
+  }, [items, q]);
+
+  const current = sections
+    .flatMap((s) => s.items)
+    .find((i) => isNavActive(pathname, i.href, i.exact));
+
+  return (
+    <>
+      {/* จอแคบ */}
+      <label className="flex flex-col gap-1 lg:hidden">
+        {title && <span className="text-muted-foreground text-xs">{title}</span>}
+        <select
+          className="h-9 rounded-md border bg-background px-2 text-sm"
+          value={current?.href ?? ""}
+          onChange={(e) => e.target.value && router.push(e.target.value)}
+          aria-label={typeof title === "string" ? title : "เมนูย่อย"}
+        >
+          {!current && <option value="">เลือกหน้า…</option>}
+          {sections.map((s, si) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: กลุ่มคงที่
+            <optgroup key={si} label={s.title ?? ""}>
+              {s.items.map((i) => (
+                <option key={i.href} value={i.href}>
+                  {i.title}
+                </option>
+              ))}
+            </optgroup>
+          ))}
+        </select>
+      </label>
+
+      {/* เดสก์ท็อป */}
+      <nav
+        aria-label={typeof title === "string" ? title : "เมนูย่อย"}
+        className={cn(
+          "sticky top-28 hidden w-56 shrink-0 flex-col gap-3 self-start lg:flex",
+          className,
+        )}
+      >
+        {title && <p className="px-2 font-semibold text-sm">{title}</p>}
+        {searchable && (
+          <InputGroup className="h-8">
+            <InputGroupAddon>
+              <Search aria-hidden="true" />
+            </InputGroupAddon>
+            <InputGroupInput
+              placeholder={searchPlaceholder}
+              aria-label={searchPlaceholder}
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+            />
+          </InputGroup>
+        )}
+        {sections.map((s, si) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: กลุ่มคงที่
+          <div key={si} className="flex flex-col gap-0.5">
+            {s.title && (
+              <p className="px-2 pt-1 pb-0.5 font-medium text-muted-foreground text-xs">
+                {s.title}
+              </p>
+            )}
+            {s.items.map((i) => {
+              const active = isNavActive(pathname, i.href, i.exact);
+              return (
+                <Link
+                  key={i.href}
+                  href={i.href}
+                  aria-current={active ? "page" : undefined}
+                  className={cn(
+                    "flex items-center gap-2 rounded-md px-2 py-1.5 text-sm no-underline transition-colors [&_svg:not([class*='size-'])]:size-4",
+                    active
+                      ? "bg-accent font-medium text-accent-foreground"
+                      : "text-muted-foreground hover:bg-accent/60 hover:text-foreground",
+                  )}
+                >
+                  {i.icon}
+                  <span className="truncate">{i.title}</span>
+                  {i.badge !== undefined && (
+                    <span className="ml-auto rounded-full bg-muted px-1.5 text-[0.7rem] text-muted-foreground">
+                      {i.badge}
+                    </span>
+                  )}
+                </Link>
+              );
+            })}
+          </div>
+        ))}
+        {sections.length === 0 && (
+          <p className="px-2 text-muted-foreground text-xs">ไม่พบ "{query}"</p>
+        )}
+      </nav>
+    </>
+  );
+}

package/src/components/app-shell/top-tabs.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { cn } from "@suphark/ui/lib/utils";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { type AppNavGroup, type AppNavItem, isNavActive } from "./types";
+
+/** ชั้นแรกของ nav ทุกกลุ่มรวมกันเป็นแท็บ — href ของแท็บที่ไม่มี href = ลูกตัวแรก */
+export function topLevelTabs(nav: AppNavGroup[]): Array<AppNavItem & { href: string }> {
+  const out: Array<AppNavItem & { href: string }> = [];
+  for (const group of nav) {
+    for (const item of group.items) {
+      const href = item.href ?? firstHref(item.items);
+      if (href) out.push({ ...item, href });
+    }
+  }
+  return out;
+}
+
+function firstHref(items?: AppNavItem[]): string | undefined {
+  for (const i of items ?? []) {
+    if (i.href) return i.href;
+    const deep = firstHref(i.items);
+    if (deep) return deep;
+  }
+  return undefined;
+}
+
+/** แท็บ active = href ตรง (prefix) หรือลูกตัวใดตัวหนึ่ง active */
+export function isTabActive(pathname: string, tab: AppNavItem): boolean {
+  if (isNavActive(pathname, tab.href, tab.exact)) return true;
+  return (tab.items ?? []).some((c) => isTabActive(pathname, c));
+}
+
+/** แท็บหลักแนวนอนใต้ header (แบบ Clerk: Overview · Users · …) — active มีเส้นใต้; จอแคบเลื่อนแนวนอน */
+export function TopTabs({ nav, className }: { nav: AppNavGroup[]; className?: string }) {
+  const pathname = usePathname();
+  const tabs = topLevelTabs(nav);
+  if (tabs.length === 0) return null;
+  return (
+    <nav aria-label="เมนูหลัก" className={cn("no-scrollbar -mb-px flex overflow-x-auto", className)}>
+      {tabs.map((tab) => {
+        const active = isTabActive(pathname, tab);
+        return (
+          <Link
+            key={tab.href}
+            href={tab.href}
+            aria-current={active ? "page" : undefined}
+            className={cn(
+              "flex shrink-0 items-center gap-1.5 border-b-2 px-3 py-2.5 text-sm no-underline transition-colors [&_svg:not([class*='size-'])]:size-4",
+              active
+                ? "border-foreground font-medium text-foreground"
+                : "border-transparent text-muted-foreground hover:border-border hover:text-foreground",
+            )}
+          >
+            {tab.icon}
+            <span className="truncate">{tab.title}</span>
+            {tab.badge !== undefined && (
+              <span className="rounded-full bg-muted px-1.5 py-px font-medium text-[0.7rem] text-muted-foreground leading-4">
+                {tab.badge}
+              </span>
+            )}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}