@suphark/ui 0.3.2 → 0.4.0

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

@@ -1,6 +1,5 @@
 "use client";
 
-import { Badge } from "@suphark/ui/components/ui/badge";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@suphark/ui/components/ui/tabs";
 import {
   Boxes,
@@ -22,54 +21,55 @@ import { ShowcaseOverlaysNavigation } from "./sections/showcase-overlays-navigat
 import { ShowcaseOverview } from "./sections/showcase-overview";
 import { ShowcasePrimitives } from "./sections/showcase-primitives";
 
-export function DesignSystemShowcase() {
+export function DesignSystemShowcase({
+  links,
+}: {
+  /** ลิงก์ไปหน้าตัวอย่างของแอป showcase (เช่น /shell) — ไม่ส่ง = ซ่อนปุ่ม */
+  links?: { shell?: string };
+} = {}) {
   const [activeTab, setActiveTab] = React.useState("overview");
   const [searchQuery, setSearchQuery] = React.useState("");
 
+  /** สลับแท็บแล้วเลื่อนไปหัวข้อ — เลื่อนใน effect หลังแท็บใหม่ render แล้ว (ตำแหน่งจึงถูก) ชดเชย header ที่ sticky */
+  const [pendingAnchor, setPendingAnchor] = React.useState<string | null>(null);
+  const jumpTo = React.useCallback((tab: string, anchor?: string) => {
+    setActiveTab(tab);
+    setPendingAnchor(anchor ?? "__top__");
+  }, []);
+  React.useEffect(() => {
+    if (!pendingAnchor) return;
+    // หน่วงเล็กน้อยให้ Tabs โฟกัส trigger ใหม่เสร็จก่อน (การโฟกัสเลื่อนหน้าไปที่แถบแท็บ) แล้วค่อยเลื่อนไปหัวข้อ
+    const timer = window.setTimeout(() => {
+      if (pendingAnchor === "__top__") {
+        window.scrollTo({ top: 0, behavior: "smooth" });
+        setPendingAnchor(null);
+        return;
+      }
+      const el = document.getElementById(pendingAnchor);
+      if (!el) {
+        setPendingAnchor(null);
+        return;
+      }
+      el.style.scrollMarginTop = "88px"; // ชดเชย header ที่ sticky
+      el.scrollIntoView({ behavior: "smooth", block: "start" });
+      setPendingAnchor(null);
+    }, 80);
+    return () => window.clearTimeout(timer);
+  }, [pendingAnchor]);
+
   const tabItems = [
-    { value: "overview", label: "ภาพรวม (Overview)", icon: LayoutGrid },
-    { value: "foundations", label: "Foundations & Tokens", icon: Palette },
-    { value: "primitives", label: "Core Primitives", icon: Boxes },
-    { value: "forms", label: "Forms & Inputs", icon: Layers },
-    { value: "data-display", label: "Data Display & States", icon: Zap },
-    { value: "overlays", label: "Overlays & Navigation", icon: Compass },
-    { value: "feedback", label: "Feedback & Alerts", icon: ShieldAlert },
-    { value: "guidelines-recipes", label: "Rules & Code Recipes", icon: FileCode2 },
+    { value: "overview", label: "ภาพรวม", icon: LayoutGrid },
+    { value: "foundations", label: "Tokens", icon: Palette },
+    { value: "primitives", label: "Primitives", icon: Boxes },
+    { value: "forms", label: "Forms", icon: Layers },
+    { value: "data-display", label: "Data", icon: Zap },
+    { value: "overlays", label: "Overlays", icon: Compass },
+    { value: "feedback", label: "Feedback", icon: ShieldAlert },
+    { value: "guidelines-recipes", label: "Rules", icon: FileCode2 },
   ];
 
   return (
-    <div className="flex flex-col gap-6 p-4 md:p-8 max-w-[1600px] mx-auto min-h-screen">
-      {/* Top Header */}
-      <header className="flex flex-col gap-2">
-        <div className="flex flex-wrap items-center justify-between gap-4">
-          <div className="flex items-center gap-2.5">
-            <div className="flex size-10 items-center justify-center rounded-xl bg-primary text-primary-foreground font-bold shadow-xs">
-              <Boxes className="size-5" />
-            </div>
-            <div>
-              <h1 className="text-xl md:text-2xl font-bold tracking-tight text-foreground">
-                @suphark/ui Design System & Showcase
-              </h1>
-              <p className="text-xs text-muted-foreground">
-                Living Component Showcase, Foundations, Patterns & Web Interface Guidelines
-              </p>
-            </div>
-          </div>
-
-          <div className="flex flex-wrap items-center gap-2">
-            <Badge variant="secondary" className="text-xs font-normal">
-              shadcn/ui base-nova
-            </Badge>
-            <Badge variant="outline" className="text-xs font-normal">
-              Tailwind v4
-            </Badge>
-            <Badge variant="outline" className="text-xs font-normal">
-              Base UI
-            </Badge>
-          </div>
-        </div>
-      </header>
-
+    <div className="mx-auto flex min-h-screen max-w-[1600px] flex-col gap-6 p-4 md:p-8">
       {/* Main Tab Navigation */}
       <Tabs
         value={activeTab}
@@ -78,17 +78,18 @@ export function DesignSystemShowcase() {
         }}
         className="flex flex-col gap-6"
       >
-        <div className="overflow-x-auto pb-1">
-          <TabsList className="h-auto w-full min-w-max justify-start gap-1 p-1 bg-muted/60">
+        {/* แถบแท็บ: จอแคบเลื่อนแนวนอน 1 แถว (ขอบไล่จางบอกว่าเลื่อนได้) · จอกว้าง wrap ได้ */}
+        <div className="-mx-4 overflow-x-auto px-4 no-scrollbar md:mx-0 md:overflow-visible md:px-0 max-md:[mask-image:linear-gradient(to_right,transparent,black_16px,black_calc(100%-16px),transparent)]">
+          <TabsList className="h-auto w-max flex-nowrap justify-start gap-1 bg-muted/60 p-1 group-data-horizontal/tabs:h-auto md:w-full md:flex-wrap">
             {tabItems.map((tab) => {
               const Icon = tab.icon;
               return (
                 <TabsTrigger
                   key={tab.value}
                   value={tab.value}
-                  className="gap-2 py-2 px-3 text-xs data-[state=active]:bg-card data-[state=active]:shadow-xs"
+                  className="gap-2 px-3 py-2 text-sm data-[state=active]:bg-card data-[state=active]:shadow-xs"
                 >
-                  <Icon className="size-3.5" />
+                  <Icon className="size-4" />
                   {tab.label}
                 </TabsTrigger>
               );
@@ -99,6 +100,8 @@ export function DesignSystemShowcase() {
         {/* Tab Contents */}
         <TabsContent value="overview" className="mt-0 outline-none">
           <ShowcaseOverview
+            links={links}
+            onJump={jumpTo}
             onSelectTab={setActiveTab}
             searchQuery={searchQuery}
             onSearchChange={setSearchQuery}

package/src/components/design-system/search-index.ts

@@ -0,0 +1,219 @@
+/** ดัชนีค้นหาของ showcase — หัวข้อ → แท็บ + anchor (id ของ section) + คำค้นเพิ่ม */
+export interface SearchEntry {
+  title: string;
+  tab: string;
+  anchor?: string;
+  keywords: string[];
+}
+
+export const SEARCH_INDEX: SearchEntry[] = [
+  {
+    title: "Semantic color tokens",
+    tab: "foundations",
+    anchor: "tokens-color",
+    keywords: ["สี", "token", "background", "primary", "destructive", "success", "warning", "muted"],
+  },
+  {
+    title: "Sidebar & chart tokens",
+    tab: "foundations",
+    anchor: "tokens-sidebar-chart",
+    keywords: ["sidebar", "chart", "กราฟ", "สี"],
+  },
+  {
+    title: "Typography scale",
+    tab: "foundations",
+    anchor: "tokens-typography",
+    keywords: ["ฟอนต์", "font", "text-xs", "text-sm", "ขนาดตัวอักษร", "noto sans thai"],
+  },
+  {
+    title: "Spacing, radius & keyboard",
+    tab: "foundations",
+    anchor: "tokens-spacing",
+    keywords: ["gap", "spacing", "radius", "ระยะห่าง", "layout", "keyboard", "focus"],
+  },
+  {
+    title: "Button variants & sizes",
+    tab: "primitives",
+    anchor: "primitives-button",
+    keywords: ["ปุ่ม", "button", "variant", "icon button", "loading", "spinner"],
+  },
+  {
+    title: "Standard action buttons (Save / Cancel / Delete)",
+    tab: "primitives",
+    anchor: "primitives-shared-buttons",
+    keywords: ["savebutton", "cancelbutton", "deletebutton", "addnewbutton", "บันทึก", "ยกเลิก", "ลบ"],
+  },
+  {
+    title: "Badge & StatusBadge",
+    tab: "primitives",
+    anchor: "primitives-badge",
+    keywords: ["badge", "status", "สถานะ", "ป้าย", "tone"],
+  },
+  {
+    title: "Card, Avatar & Initials",
+    tab: "primitives",
+    anchor: "primitives-card",
+    keywords: ["card", "avatar", "initials", "การ์ด", "รูปโปรไฟล์"],
+  },
+  {
+    title: "Accordion & Collapsible",
+    tab: "primitives",
+    anchor: "primitives-accordion",
+    keywords: ["accordion", "collapsible", "พับ", "กาง"],
+  },
+  {
+    title: "Form fields (FieldGroup, Field, InputGroup)",
+    tab: "forms",
+    anchor: "forms-fields",
+    keywords: [
+      "form",
+      "ฟอร์ม",
+      "input",
+      "field",
+      "label",
+      "validation",
+      "error",
+      "select",
+      "combobox",
+      "checkbox",
+      "radio",
+      "switch",
+      "date",
+      "otp",
+      "slider",
+      "textarea",
+      "react-hook-form",
+    ],
+  },
+  {
+    title: "Table with loading / empty states",
+    tab: "data-display",
+    anchor: "data-triple-state",
+    keywords: ["table", "ตาราง", "skeleton", "empty", "loading", "ว่าง"],
+  },
+  {
+    title: "DataTable (@suphark/ui/data-table)",
+    tab: "data-display",
+    anchor: "data-table",
+    keywords: ["datatable", "tanstack", "filter", "pagination", "sort", "ตาราง", "ค้นหา"],
+  },
+  {
+    title: "Item & Attachment",
+    tab: "data-display",
+    anchor: "data-item-attachment",
+    keywords: ["item", "attachment", "ไฟล์แนบ", "list"],
+  },
+  {
+    title: "Number & date formatters",
+    tab: "data-display",
+    anchor: "data-formatters",
+    keywords: ["formattednumber", "relativedate", "วันที่", "ตัวเลข", "บาท", "currency"],
+  },
+  {
+    title: "Dialog, AlertDialog, Sheet & Drawer",
+    tab: "overlays",
+    anchor: "overlays-dialog",
+    keywords: [
+      "dialog",
+      "modal",
+      "sheet",
+      "drawer",
+      "alertdialog",
+      "ยืนยัน",
+      "กล่องโต้ตอบ",
+      "formdialog",
+    ],
+  },
+  {
+    title: "Popover, Tooltip, HoverCard & menus",
+    tab: "overlays",
+    anchor: "overlays-popover",
+    keywords: ["popover", "tooltip", "hovercard", "menubar", "contextmenu", "dropdown", "เมนู"],
+  },
+  {
+    title: "Breadcrumb, Pagination, Tabs & Resizable",
+    tab: "overlays",
+    anchor: "overlays-navigation",
+    keywords: ["breadcrumb", "pagination", "tabs", "resizable", "navigation", "นำทาง"],
+  },
+  {
+    title: "Choosing a feedback channel",
+    tab: "feedback",
+    anchor: "feedback-matrix",
+    keywords: ["feedback", "แจ้งเตือน", "alert", "toast", "inline"],
+  },
+  {
+    title: "Inline Alert",
+    tab: "feedback",
+    anchor: "feedback-alert",
+    keywords: ["alert", "notice", "คำเตือน"],
+  },
+  {
+    title: "Toast (sonner)",
+    tab: "feedback",
+    anchor: "feedback-toast",
+    keywords: ["toast", "sonner", "undo", "แจ้งเตือน"],
+  },
+  {
+    title: "Progress & field errors",
+    tab: "feedback",
+    anchor: "feedback-progress",
+    keywords: ["progress", "spinner", "fielderror", "error", "กำลังทำงาน"],
+  },
+  {
+    title: "Web Interface Guidelines (a11y)",
+    tab: "guidelines-recipes",
+    anchor: "rules-a11y",
+    keywords: [
+      "a11y",
+      "accessibility",
+      "focus",
+      "aria",
+      "screen reader",
+      "keyboard",
+      "reduced motion",
+    ],
+  },
+  {
+    title: "UX writing",
+    tab: "guidelines-recipes",
+    anchor: "rules-ux-writing",
+    keywords: ["copy", "ux writing", "ข้อความ", "active voice", "empty state"],
+  },
+  {
+    title: "Redesign safety workflow",
+    tab: "guidelines-recipes",
+    anchor: "rules-redesign",
+    keywords: ["redesign", "workflow", "checklist", "ปรับปรุง"],
+  },
+  {
+    title: "Code recipes",
+    tab: "guidelines-recipes",
+    anchor: "rules-recipes",
+    keywords: ["recipe", "code", "pageshell", "datatable", "fieldgroup", "ตัวอย่างโค้ด"],
+  },
+  {
+    title: "AppShell (sidebar + header)",
+    tab: "guidelines-recipes",
+    anchor: "rules-recipes",
+    keywords: ["appshell", "sidebar", "shell", "layout", "เมนูข้าง", "usermenu"],
+  },
+];
+
+/** ค้นแบบ contains ไม่สนตัวพิมพ์ ทั้ง title และ keywords — คืนเรียงตามคะแนน (ตรง title มาก่อน) */
+export function searchIndex(query: string, limit = 8): SearchEntry[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return [];
+  return SEARCH_INDEX.map((e) => {
+    const t = e.title.toLowerCase();
+    let score = 0;
+    if (t.startsWith(q)) score = 3;
+    else if (t.includes(q)) score = 2;
+    else if (e.keywords.some((k) => k.toLowerCase().includes(q))) score = 1;
+    return { e, score };
+  })
+    .filter((x) => x.score > 0)
+    .sort((a, b) => b.score - a.score)
+    .slice(0, limit)
+    .map((x) => x.e);
+}

package/src/components/design-system/sections/hero-specimen.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { Initials } from "@suphark/ui/components/shared/initials";
+import { StatusBadge } from "@suphark/ui/components/shared/status-badge";
+import { Button } from "@suphark/ui/components/ui/button";
+import { Checkbox } from "@suphark/ui/components/ui/checkbox";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@suphark/ui/components/ui/input-group";
+import { Label } from "@suphark/ui/components/ui/label";
+import { Progress } from "@suphark/ui/components/ui/progress";
+import { Switch } from "@suphark/ui/components/ui/switch";
+import { cn } from "@suphark/ui/lib/utils";
+import { Search } from "lucide-react";
+import { type CSSProperties, useId, useState } from "react";
+
+/** แบรนด์ตัวอย่าง — ตัวแรกไม่ตั้ง --brand = slate ของแพ็กเกจ */
+const BRANDS = [
+  { id: "default", label: "ค่าเริ่มต้น", swatch: "oklch(0.208 0.042 265.755)" },
+  { id: "a", label: "Tenant A", brand: "oklch(0.55 0.2 25)", foreground: "oklch(0.98 0 0)" },
+  { id: "b", label: "Tenant B", brand: "oklch(0.5 0.09 200)", foreground: "oklch(0.985 0 0)" },
+] as const;
+
+/**
+ * แถบตัวอย่างสดใต้หัวเรื่อง — component จริงของแพ็กเกจในบรรทัดเดียว + สวิตช์สีแบรนด์
+ * วิทยานิพนธ์ของหน้านี้คือ "UI ชุดเดียวทุกแอป" จึงให้เห็นระบบทำงานก่อนอ่านคำอธิบาย
+ */
+export function HeroSpecimen() {
+  const [brandId, setBrandId] = useState<(typeof BRANDS)[number]["id"]>("default");
+  const [enabled, setEnabled] = useState(true);
+  const switchId = useId();
+  const checkboxId = useId();
+  const brand = BRANDS.find((b) => b.id === brandId) ?? BRANDS[0];
+  const style =
+    "brand" in brand
+      ? ({ "--brand": brand.brand, "--brand-foreground": brand.foreground } as CSSProperties)
+      : undefined;
+
+  return (
+    <div className="flex flex-col gap-3">
+      {/* สวิตช์แบรนด์ — radio group ที่ตั้ง --brand บนกล่องด้านล่างสด ๆ */}
+      <div
+        role="radiogroup"
+        aria-label="ดูตัวอย่างด้วยสีแบรนด์"
+        className="flex flex-wrap items-center gap-1.5"
+      >
+        <span className="mr-1 text-muted-foreground text-xs">ดูด้วยสี</span>
+        {BRANDS.map((b) => {
+          const active = b.id === brandId;
+          return (
+            <button
+              key={b.id}
+              type="button"
+              role="radio"
+              aria-checked={active}
+              onClick={() => setBrandId(b.id)}
+              className={cn(
+                "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs transition-colors",
+                active
+                  ? "border-foreground/30 bg-foreground/5 text-foreground"
+                  : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+              )}
+            >
+              <span
+                aria-hidden="true"
+                className="size-2.5 rounded-full border border-black/10"
+                style={{ backgroundColor: "brand" in b ? b.brand : b.swatch }}
+              />
+              {b.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* specimen: ทุกอย่างในกล่องนี้รับ --brand จาก style ด้านบน */}
+      <div
+        style={style}
+        className="flex flex-wrap items-center gap-x-5 gap-y-3 rounded-xl border bg-card/60 px-4 py-3"
+      >
+        <Button size="sm">บันทึก</Button>
+        <Button size="sm" variant="outline">
+          ยกเลิก
+        </Button>
+        <StatusBadge tone="success">อนุมัติแล้ว</StatusBadge>
+        <div className="flex items-center gap-2">
+          <Switch id={switchId} checked={enabled} onCheckedChange={setEnabled} />
+          <Label htmlFor={switchId} className="text-sm">
+            {enabled ? "แจ้งเตือนเปิด" : "แจ้งเตือนปิด"}
+          </Label>
+        </div>
+        <div className="flex items-center gap-2">
+          <Checkbox id={checkboxId} defaultChecked />
+          <Label htmlFor={checkboxId} className="text-sm">
+            รวม VAT
+          </Label>
+        </div>
+        <InputGroup className="h-8 w-44">
+          <InputGroupAddon>
+            <Search aria-hidden="true" />
+          </InputGroupAddon>
+          <InputGroupInput placeholder="focus ดู ring" aria-label="ตัวอย่าง input" />
+        </InputGroup>
+        <div className="flex w-28 flex-col gap-1">
+          <Progress value={enabled ? 72 : 30} aria-label="ความคืบหน้า" />
+        </div>
+        <Initials name="สมชาย ใจดี" size="sm" />
+      </div>
+    </div>
+  );
+}

package/src/components/design-system/sections/showcase-data-display.tsx

@@ -170,12 +170,12 @@ export function ShowcaseDataDisplay() {
       <div className="flex flex-col gap-1">
         <div className="flex items-center gap-2">
           <Badge variant="outline">Data Presentation</Badge>
-          <span className="text-xs text-muted-foreground">
+          <span className="text-muted-foreground text-sm">
             Tables, Triple States, Items, Attachments & Formatters
           </span>
         </div>
-        <h2 className="text-xl font-bold tracking-tight text-foreground">
-          การแสดงผลชุดข้อมูลและสถานะการทำงาน (Data Display & States)
+        <h2 className="font-bold text-2xl text-foreground tracking-tight">
+          การแสดงผลชุดข้อมูลและสถานะการทำงาน
         </h2>
         <p className="text-sm text-muted-foreground">
           ตารางข้อมูลที่มีความหนาแน่นสูง (Data-Dense Tables), การสลับ 3 สถานะ (Ready / Loading / Empty),
@@ -184,12 +184,12 @@ export function ShowcaseDataDisplay() {
       </div>
 
       {/* Triple State Demonstration */}
-      <Card>
+      <Card id="data-triple-state">
         <CardHeader>
           <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
             <div>
-              <CardTitle className="text-base">Data Table & Triple State Lifecycle</CardTitle>
-              <CardDescription className="text-xs">
+              <CardTitle className="text-lg">Data Table & Triple State Lifecycle</CardTitle>
+              <CardDescription>
                 ทดสอบสลับระหว่าง Ready State, Geometry-Accurate Skeleton, และ Actionable Empty State
               </CardDescription>
             </div>
@@ -350,10 +350,10 @@ export function ShowcaseDataDisplay() {
       </Card>
 
       {/* DataTable (@suphark/ui/data-table) */}
-      <Card>
+      <Card id="data-table">
         <CardHeader>
-          <CardTitle className="text-base">DataTable (tanstack) — @suphark/ui/data-table</CardTitle>
-          <CardDescription className="text-xs">
+          <CardTitle className="text-lg">DataTable (tanstack) — @suphark/ui/data-table</CardTitle>
+          <CardDescription>
             ตารางมาตรฐานพร้อม global search, faceted filter, เรียงคอลัมน์, ซ่อน/แสดงคอลัมน์ และ pagination
             — import แยกจาก <code>@suphark/ui/data-table</code> (ต้องมี peer{" "}
             <code>@tanstack/react-table</code>)
@@ -382,12 +382,12 @@ export function ShowcaseDataDisplay() {
       </Card>
 
       {/* Item & Attachment Primitives */}
-      <div className="grid gap-6 lg:grid-cols-2">
+      <div id="data-item-attachment" className="grid gap-6 lg:grid-cols-2">
         {/* Item Primitive */}
         <Card>
           <CardHeader className="pb-3">
-            <CardTitle className="text-base">Item & ItemGroup Primitive</CardTitle>
-            <CardDescription className="text-xs">
+            <CardTitle className="text-lg">Item & ItemGroup Primitive</CardTitle>
+            <CardDescription>
               คอมโพเนนต์สำหรับแสดงแถวรายการที่มี Media, Badge, และ Inline Actions
             </CardDescription>
           </CardHeader>
@@ -435,8 +435,8 @@ export function ShowcaseDataDisplay() {
         {/* Attachment Primitive */}
         <Card>
           <CardHeader className="pb-3">
-            <CardTitle className="text-base">Attachment Primitive</CardTitle>
-            <CardDescription className="text-xs">
+            <CardTitle className="text-lg">Attachment Primitive</CardTitle>
+            <CardDescription>
               การ์ดไฟล์แนบพร้อมสถานะการอัปโหลด (Done / Uploading / Error)
             </CardDescription>
           </CardHeader>
@@ -477,12 +477,12 @@ export function ShowcaseDataDisplay() {
       </div>
 
       {/* Shared Formatters & Benchmark Analysis */}
-      <div className="grid gap-6 lg:grid-cols-2">
+      <div id="data-formatters" className="grid gap-6 lg:grid-cols-2">
         {/* Value Formatters */}
         <Card>
           <CardHeader className="pb-3">
-            <CardTitle className="text-base">Shared Value Formatters</CardTitle>
-            <CardDescription className="text-xs">
+            <CardTitle className="text-lg">Shared Value Formatters</CardTitle>
+            <CardDescription>
               Formatters เพื่อป้องกัน SSR Hydration Mismatch และคุม Locale ภาษาไทย
             </CardDescription>
           </CardHeader>

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

@@ -55,12 +55,12 @@ export function ShowcaseFeedback() {
       <div className="flex flex-col gap-1">
         <div className="flex items-center gap-2">
           <Badge variant="outline">Feedback & Alerts</Badge>
-          <span className="text-xs text-muted-foreground">
+          <span className="text-muted-foreground text-sm">
             Alerts, Sonner Toasts, Field Validation & Progress States
           </span>
         </div>
-        <h2 className="text-xl font-bold tracking-tight text-foreground">
-          ระบบการแจ้งเตือนและการตอบสนองต่อผู้ใช้ (Feedback System)
+        <h2 className="font-bold text-2xl text-foreground tracking-tight">
+          ระบบการแจ้งเตือนและการตอบสนองต่อผู้ใช้
         </h2>
         <p className="text-sm text-muted-foreground">
           การเลือกช่องทางแจ้งเตือนที่เหมาะสมตามระดับความสำคัญ: Inline Alert, Transient Sonner Toast,
@@ -69,12 +69,10 @@ export function ShowcaseFeedback() {
       </div>
 
       {/* Feedback Channel Guidance Matrix */}
-      <Card>
+      <Card id="feedback-matrix">
         <CardHeader>
-          <CardTitle className="text-base">Feedback Channel Decision Matrix</CardTitle>
-          <CardDescription className="text-xs">
-            เกณฑ์การเลือกประเภท Feedback ตามบริบทของงานในแอป Suphark
-          </CardDescription>
+          <CardTitle className="text-lg">Feedback Channel Decision Matrix</CardTitle>
+          <CardDescription>เกณฑ์การเลือกประเภท Feedback ตามบริบทของงานในแอป Suphark</CardDescription>
         </CardHeader>
         <CardContent className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
           <div className="flex flex-col gap-1.5 rounded-lg border bg-card p-3">
@@ -120,7 +118,7 @@ export function ShowcaseFeedback() {
       </Card>
 
       {/* Inline Alerts */}
-      <section className="flex flex-col gap-4">
+      <section id="feedback-alert" className="flex flex-col gap-4">
         <h3 className="text-base font-semibold">1. Inline Alerts (Alert Primitive)</h3>
         <div className="grid gap-4 md:grid-cols-2">
           {/* Default Info Alert */}
@@ -145,14 +143,14 @@ export function ShowcaseFeedback() {
       </section>
 
       {/* Interactive Sonner Toasts */}
-      <Card>
+      <Card id="feedback-toast">
         <CardHeader>
           <div className="flex items-center justify-between">
             <div>
               <CardTitle className="text-base flex items-center gap-2">
                 <Bell className="size-4 text-primary" /> 2. Interactive Sonner Toasts
               </CardTitle>
-              <CardDescription className="text-xs">ทดสอบยิง Toast ในสถานการณ์ต่าง ๆ</CardDescription>
+              <CardDescription>ทดสอบยิง Toast ในสถานการณ์ต่าง ๆ</CardDescription>
             </div>
             <Badge variant="secondary">sonner</Badge>
           </div>
@@ -215,14 +213,12 @@ export function ShowcaseFeedback() {
       </Card>
 
       {/* Active Task Progress & Field Error */}
-      <div className="grid gap-6 lg:grid-cols-2">
+      <div id="feedback-progress" className="grid gap-6 lg:grid-cols-2">
         {/* Active Task Progress Simulation */}
         <Card>
           <CardHeader className="pb-3">
-            <CardTitle className="text-base">3. Active Task Progress</CardTitle>
-            <CardDescription className="text-xs">
-              การแสดงผลขณะระบบกำลังทำงานแบบ Asynchronous
-            </CardDescription>
+            <CardTitle className="text-lg">3. Active Task Progress</CardTitle>
+            <CardDescription>การแสดงผลขณะระบบกำลังทำงานแบบ Asynchronous</CardDescription>
           </CardHeader>
           <CardContent className="flex flex-col gap-4">
             {exportProgress !== null ? (
@@ -252,10 +248,8 @@ export function ShowcaseFeedback() {
         {/* Input Validation State */}
         <Card>
           <CardHeader className="pb-3">
-            <CardTitle className="text-base">4. FieldError & Direct Validation</CardTitle>
-            <CardDescription className="text-xs">
-              การระบุข้อความช่วยเหลือและข้อผิดพลาดที่ตำแหน่ง Input
-            </CardDescription>
+            <CardTitle className="text-lg">4. FieldError & Direct Validation</CardTitle>
+            <CardDescription>การระบุข้อความช่วยเหลือและข้อผิดพลาดที่ตำแหน่ง Input</CardDescription>
           </CardHeader>
           <CardContent>
             <FieldGroup>