@suphark/ui 0.3.2 → 0.3.3

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>

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

@@ -80,12 +80,12 @@ export function ShowcaseForms() {
       <div className="flex flex-col gap-1">
         <div className="flex items-center gap-2">
           <Badge variant="outline">Form System</Badge>
-          <span className="text-xs text-muted-foreground">
+          <span className="text-muted-foreground text-sm">
             FieldGroup, Field, InputGroup, Combobox & Validation States
           </span>
         </div>
-        <h2 className="text-xl font-bold tracking-tight text-foreground">
-          ระบบฟอร์มและการจัดการข้อมูลนำเข้า (Forms & Inputs)
+        <h2 className="font-bold text-2xl text-foreground tracking-tight">
+          ระบบฟอร์มและการจัดการข้อมูลนำเข้า
         </h2>
         <p className="text-sm text-muted-foreground">
           มาตรฐานฟอร์มแบบ Unified <code>FieldGroup</code> + <code>Field</code>{" "}
@@ -94,14 +94,14 @@ export function ShowcaseForms() {
       </div>
 
       {/* Interactive Form Controls Showcase */}
-      <div className="grid gap-6 xl:grid-cols-[1.1fr_0.9fr]">
+      <div id="forms-fields" className="grid gap-6 xl:grid-cols-[1.1fr_0.9fr]">
         {/* Left Column: Standard Field-Based Form */}
         <Card>
           <CardHeader>
             <div className="flex items-center justify-between">
               <div>
-                <CardTitle className="text-base">Field-Based Form Structure</CardTitle>
-                <CardDescription className="text-xs">
+                <CardTitle className="text-lg">Field-Based Form Structure</CardTitle>
+                <CardDescription>
                   ใช้ <code>FieldGroup</code> และ <code>Field</code> เพื่อคุม Label, Description และ
                   Error
                 </CardDescription>
@@ -223,10 +223,8 @@ export function ShowcaseForms() {
           {/* Combobox & MultiSelect */}
           <Card>
             <CardHeader className="pb-3">
-              <CardTitle className="text-base">Combobox & Multi-Select</CardTitle>
-              <CardDescription className="text-xs">
-                การเลือกข้อมูลจากรายการขนาดใหญ่และการแท็กหลายรายการ
-              </CardDescription>
+              <CardTitle className="text-lg">Combobox & Multi-Select</CardTitle>
+              <CardDescription>การเลือกข้อมูลจากรายการขนาดใหญ่และการแท็กหลายรายการ</CardDescription>
             </CardHeader>
             <CardContent className="flex flex-col gap-4">
               <Field>
@@ -255,8 +253,8 @@ export function ShowcaseForms() {
           {/* Grouped FieldSet with Switches & Radios */}
           <Card>
             <CardHeader className="pb-3">
-              <CardTitle className="text-base">FieldSet & Grouped Controls</CardTitle>
-              <CardDescription className="text-xs">
+              <CardTitle className="text-lg">FieldSet & Grouped Controls</CardTitle>
+              <CardDescription>
                 ใช้ <code>FieldSet</code> และ <code>FieldLegend</code> รวมสวิตช์และเรดิโอที่เกี่ยวข้องกัน
               </CardDescription>
             </CardHeader>
@@ -304,10 +302,8 @@ export function ShowcaseForms() {
           {/* Specialized Controls (Date, OTP, Slider, ToggleGroup) */}
           <Card>
             <CardHeader className="pb-3">
-              <CardTitle className="text-base">Specialized Input Primitives</CardTitle>
-              <CardDescription className="text-xs">
-                Date Pickers, OTP, Sliders, และ ToggleGroup
-              </CardDescription>
+              <CardTitle className="text-lg">Specialized Input Primitives</CardTitle>
+              <CardDescription>Date Pickers, OTP, Sliders, และ ToggleGroup</CardDescription>
             </CardHeader>
             <CardContent className="flex flex-col gap-5">
               {/* DatePicker */}

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

@@ -180,9 +180,9 @@ export function ShowcaseFoundations() {
       <div className="flex flex-col gap-1">
         <div className="flex items-center gap-2">
           <Badge variant="outline">Foundations</Badge>
-          <span className="text-xs text-muted-foreground">Tokens, Typography & Spatial Layout</span>
+          <span className="text-muted-foreground text-sm">Tokens, Typography & Spatial Layout</span>
         </div>
-        <h2 className="text-xl font-bold tracking-tight text-foreground">
+        <h2 className="font-bold text-2xl text-foreground tracking-tight">
           ระบบโทเค็น ฟอนต์ และมิติพื้นฐาน
         </h2>
         <p className="text-sm text-muted-foreground">
@@ -191,7 +191,7 @@ export function ShowcaseFoundations() {
       </div>
 
       {/* Semantic Color Tokens */}
-      <section className="flex flex-col gap-4">
+      <section id="tokens-color" className="flex flex-col gap-4">
         <div className="flex items-center justify-between">
           <div>
             <h3 className="text-base font-semibold flex items-center gap-2">
@@ -230,14 +230,12 @@ export function ShowcaseFoundations() {
       </section>
 
       {/* Sidebar & Chart Tokens */}
-      <div className="grid gap-6 lg:grid-cols-2">
+      <div id="tokens-sidebar-chart" className="grid gap-6 lg:grid-cols-2">
         {/* Sidebar Tokens */}
         <Card>
           <CardHeader className="pb-3">
-            <CardTitle className="text-base">Sidebar Palette Tokens</CardTitle>
-            <CardDescription className="text-xs">
-              โทเค็นสำหรับ Navigation Sidebar ทั้งโหมดพับและขยาย
-            </CardDescription>
+            <CardTitle className="text-lg">Sidebar Palette Tokens</CardTitle>
+            <CardDescription>โทเค็นสำหรับ Navigation Sidebar ทั้งโหมดพับและขยาย</CardDescription>
           </CardHeader>
           <CardContent className="grid gap-2 sm:grid-cols-2">
             {sidebarTokens.map((item) => (
@@ -259,10 +257,8 @@ export function ShowcaseFoundations() {
         {/* Chart Tokens */}
         <Card>
           <CardHeader className="pb-3">
-            <CardTitle className="text-base">Chart Palette Tokens</CardTitle>
-            <CardDescription className="text-xs">
-              ชุดสี 5 ลำดับสำหรับกราฟ Recharts และ Data Visualizations
-            </CardDescription>
+            <CardTitle className="text-lg">Chart Palette Tokens</CardTitle>
+            <CardDescription>ชุดสี 5 ลำดับสำหรับกราฟ Recharts และ Data Visualizations</CardDescription>
           </CardHeader>
           <CardContent className="grid gap-2 grid-cols-5">
             {chartTokens.map((item) => (
@@ -282,7 +278,7 @@ export function ShowcaseFoundations() {
       </div>
 
       {/* Typography Scale */}
-      <section className="flex flex-col gap-4">
+      <section id="tokens-typography" className="flex flex-col gap-4">
         <div className="flex flex-col gap-1">
           <h3 className="text-base font-semibold flex items-center gap-2">
             <Type className="size-4 text-primary" /> Typography Hierarchy (Noto Sans Thai Looped)
@@ -321,14 +317,14 @@ export function ShowcaseFoundations() {
       </section>
 
       {/* Spatial, Keyboard & Layout Rules */}
-      <section className="grid gap-6 lg:grid-cols-2">
+      <section id="tokens-spacing" className="grid gap-6 lg:grid-cols-2">
         {/* Spatial Rules */}
         <Card>
           <CardHeader className="pb-3">
             <CardTitle className="text-base flex items-center gap-2">
               <AlignLeft className="size-4 text-primary" /> Spatial & Spacing Rules
             </CardTitle>
-            <CardDescription className="text-xs">กฎเกณฑ์การจัดช่องว่างและสัดส่วนเลย์เอาต์</CardDescription>
+            <CardDescription>กฎเกณฑ์การจัดช่องว่างและสัดส่วนเลย์เอาต์</CardDescription>
           </CardHeader>
           <CardContent className="flex flex-col gap-3">
             {spatialRules.map((rule) => (
@@ -349,9 +345,7 @@ export function ShowcaseFoundations() {
             <CardTitle className="text-base flex items-center gap-2">
               <Info className="size-4 text-primary" /> Keyboard Shortcuts (Kbd Primitive)
             </CardTitle>
-            <CardDescription className="text-xs">
-              แสดงปุ่มคีย์ลัดสำหรับผู้ใช้และ Accessibility Navigation
-            </CardDescription>
+            <CardDescription>แสดงปุ่มคีย์ลัดสำหรับผู้ใช้และ Accessibility Navigation</CardDescription>
           </CardHeader>
           <CardContent className="flex flex-col gap-3">
             <div className="flex items-center justify-between rounded-md border p-3 bg-card">

package/src/components/design-system/sections/showcase-guidelines-recipes.tsx

@@ -233,12 +233,12 @@ export function ApprovePackageButton({ id }: { id: string }) {
       <div className="flex flex-col gap-1">
         <div className="flex items-center gap-2">
           <Badge variant="outline">Rules & Recipes</Badge>
-          <span className="text-xs text-muted-foreground">
+          <span className="text-muted-foreground text-sm">
             Web Interface Guidelines, UX Copy Standards & Production Code Recipes
           </span>
         </div>
-        <h2 className="text-xl font-bold tracking-tight text-foreground">
-          แนวปฏิบัติและแม่แบบโค้ดมาตรฐาน (Guidelines & Code Recipes)
+        <h2 className="font-bold text-2xl text-foreground tracking-tight">
+          แนวปฏิบัติและแม่แบบโค้ดมาตรฐาน
         </h2>
         <p className="text-sm text-muted-foreground">
           สรุปเกณฑ์การตรวจสอบ Accessibility, กฎการเขียน UX Copy สำหรับผู้ใช้,
@@ -247,7 +247,7 @@ export function ApprovePackageButton({ id }: { id: string }) {
       </div>
 
       {/* Web Interface Guidelines Checklist */}
-      <Card>
+      <Card id="rules-a11y">
         <CardHeader>
           <div className="flex items-center justify-between">
             <div>
@@ -255,9 +255,7 @@ export function ApprovePackageButton({ id }: { id: string }) {
                 <Accessibility className="size-4 text-primary" /> Web Interface Guidelines
                 (Mandatory Baseline)
               </CardTitle>
-              <CardDescription className="text-xs">
-                เกณฑ์มาตรฐานสากลที่ทุกหน้าจอต้องผ่านการตรวจสอบ
-              </CardDescription>
+              <CardDescription>เกณฑ์มาตรฐานสากลที่ทุกหน้าจอต้องผ่านการตรวจสอบ</CardDescription>
             </div>
             <Badge variant="secondary">A11y Baseline</Badge>
           </div>
@@ -280,13 +278,13 @@ export function ApprovePackageButton({ id }: { id: string }) {
       </Card>
 
       {/* UX Writing & Copy Standards */}
-      <Card>
+      <Card id="rules-ux-writing">
         <CardHeader>
           <CardTitle className="text-base flex items-center gap-2">
             <MessageSquare className="size-4 text-primary" /> Frontend Design: UX Writing & Action
             Voice
           </CardTitle>
-          <CardDescription className="text-xs">
+          <CardDescription>
             การใช้ภาษาที่ชัดเจนและมุ่งเน้นสิ่งที่ผู้ใช้ควบคุมได้ (Active Voice & Cohesion)
           </CardDescription>
         </CardHeader>
@@ -312,15 +310,13 @@ export function ApprovePackageButton({ id }: { id: string }) {
       </Card>
 
       {/* Redesign Workflow Checklist */}
-      <Card>
+      <Card id="rules-redesign">
         <CardHeader>
           <CardTitle className="text-base flex items-center gap-2">
             <RefreshCw className="size-4 text-primary" /> Redesign Safety: Behavior Preservation
             Checklist
           </CardTitle>
-          <CardDescription className="text-xs">
-            เมื่อทำการ Redesign UI ต้องคงความสามารถของระบบเดิม 100%
-          </CardDescription>
+          <CardDescription>เมื่อทำการ Redesign UI ต้องคงความสามารถของระบบเดิม 100%</CardDescription>
         </CardHeader>
         <CardContent className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4 text-xs">
           <div className="flex flex-col gap-1 rounded-md border p-3 bg-card">
@@ -351,7 +347,7 @@ export function ApprovePackageButton({ id }: { id: string }) {
       </Card>
 
       {/* Code Recipes */}
-      <section className="flex flex-col gap-4">
+      <section id="rules-recipes" className="flex flex-col gap-4">
         <div className="flex items-center justify-between">
           <div>
             <h3 className="text-base font-semibold flex items-center gap-2">

package/src/components/design-system/sections/showcase-overlays-navigation.tsx

@@ -122,12 +122,12 @@ export function ShowcaseOverlaysNavigation() {
         <div className="flex flex-col gap-1">
           <div className="flex items-center gap-2">
             <Badge variant="outline">Overlays & Navigation</Badge>
-            <span className="text-xs text-muted-foreground">
+            <span className="text-muted-foreground text-sm">
               Dialogs, Sheets, Drawers, Menus, Breadcrumbs, Tabs & Resizable Panels
             </span>
           </div>
-          <h2 className="text-xl font-bold tracking-tight text-foreground">
-            หน้าต่างซ้อนและการนำทาง (Overlays & Navigation)
+          <h2 className="font-bold text-2xl text-foreground tracking-tight">
+            หน้าต่างซ้อนและการนำทาง
           </h2>
           <p className="text-sm text-muted-foreground">
             Modal Dialogs ที่รองรับ Screen Reader อย่างสมบูรณ์, การจัดการ Destructive Confirmation,
@@ -136,14 +136,14 @@ export function ShowcaseOverlaysNavigation() {
         </div>
 
         {/* Modal Overlays & Drawers */}
-        <div className="grid gap-6 lg:grid-cols-2">
+        <div id="overlays-dialog" className="grid gap-6 lg:grid-cols-2">
           {/* Dialog & AlertDialog */}
           <Card>
             <CardHeader>
               <CardTitle className="text-base flex items-center gap-2">
                 <ShieldAlert className="size-4 text-primary" /> Dialogs & Consequence Confirmations
               </CardTitle>
-              <CardDescription className="text-xs">
+              <CardDescription>
                 ใช้ <code>Dialog</code> สำหรับแบบฟอร์มแก้ไข และใช้ <code>AlertDialog</code>{" "}
                 สำหรับการยืนยันการลบ
               </CardDescription>
@@ -205,7 +205,7 @@ export function ShowcaseOverlaysNavigation() {
               <CardTitle className="text-base flex items-center gap-2">
                 <Layers className="size-4 text-primary" /> Side Sheets & Bottom Drawers
               </CardTitle>
-              <CardDescription className="text-xs">
+              <CardDescription>
                 ใช้ <code>Sheet</code> สำหรับแผงฟิลเตอร์ด้านข้าง และ <code>Drawer</code> สำหรับมุมมองมือถือ
               </CardDescription>
             </CardHeader>
@@ -270,12 +270,12 @@ export function ShowcaseOverlaysNavigation() {
         </div>
 
         {/* Popovers, Tooltips & Context Menus */}
-        <div className="grid gap-6 lg:grid-cols-2">
+        <div id="overlays-popover" className="grid gap-6 lg:grid-cols-2">
           {/* Popover & Tooltip */}
           <Card>
             <CardHeader className="pb-3">
-              <CardTitle className="text-base">Tooltips, HoverCard & Popovers</CardTitle>
-              <CardDescription className="text-xs">คำอธิบายเพิ่มเติมและเนื้อหาแบบบริบท</CardDescription>
+              <CardTitle className="text-lg">Tooltips, HoverCard & Popovers</CardTitle>
+              <CardDescription>คำอธิบายเพิ่มเติมและเนื้อหาแบบบริบท</CardDescription>
             </CardHeader>
             <CardContent className="flex flex-wrap items-center gap-4">
               {/* Tooltip */}
@@ -334,10 +334,8 @@ export function ShowcaseOverlaysNavigation() {
           {/* Menubar & ContextMenu */}
           <Card>
             <CardHeader className="pb-3">
-              <CardTitle className="text-base">Menubar & Context Menu</CardTitle>
-              <CardDescription className="text-xs">
-                เมนูบาร์สำหรับระบบบริหารจัดการ และคลิกขวาในพื้นที่ตาราง
-              </CardDescription>
+              <CardTitle className="text-lg">Menubar & Context Menu</CardTitle>
+              <CardDescription>เมนูบาร์สำหรับระบบบริหารจัดการ และคลิกขวาในพื้นที่ตาราง</CardDescription>
             </CardHeader>
             <CardContent className="flex flex-col gap-4">
               {/* Menubar */}
@@ -389,14 +387,12 @@ export function ShowcaseOverlaysNavigation() {
         </div>
 
         {/* Navigation & Resizable Layout */}
-        <div className="grid gap-6 lg:grid-cols-2">
+        <div id="overlays-navigation" className="grid gap-6 lg:grid-cols-2">
           {/* Breadcrumb & Pagination */}
           <Card>
             <CardHeader className="pb-3">
-              <CardTitle className="text-base">Breadcrumbs & Pagination</CardTitle>
-              <CardDescription className="text-xs">
-                ลำดับชั้นของหน้าและตัวแบ่งหน้าสำหรับตารางข้อมูล
-              </CardDescription>
+              <CardTitle className="text-lg">Breadcrumbs & Pagination</CardTitle>
+              <CardDescription>ลำดับชั้นของหน้าและตัวแบ่งหน้าสำหรับตารางข้อมูล</CardDescription>
             </CardHeader>
             <CardContent className="flex flex-col gap-6">
               {/* Breadcrumb */}
@@ -449,8 +445,8 @@ export function ShowcaseOverlaysNavigation() {
           {/* Resizable Panels */}
           <Card>
             <CardHeader className="pb-3">
-              <CardTitle className="text-base">Resizable Layout Panels</CardTitle>
-              <CardDescription className="text-xs">
+              <CardTitle className="text-lg">Resizable Layout Panels</CardTitle>
+              <CardDescription>
                 แบ่งพื้นที่หน้าจอระหว่างตารางรายการและรายละเอียดแบบลากปรับขนาดได้
               </CardDescription>
             </CardHeader>

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

@@ -16,6 +16,7 @@ import {
   InputGroupInput,
 } from "@suphark/ui/components/ui/input-group";
 import { Kbd } from "@suphark/ui/components/ui/kbd";
+import { cn } from "@suphark/ui/lib/utils";
 import {
   Accessibility,
   ArrowRight,
@@ -30,15 +31,21 @@ import {
   Sparkles,
   Zap,
 } from "lucide-react";
+import { searchIndex } from "../search-index";
+import { HeroSpecimen } from "./hero-specimen";
 
 interface ShowcaseOverviewProps {
   onSelectTab: (tab: string) => void;
+  links?: { shell?: string };
+  onJump: (tab: string, anchor?: string) => void;
   searchQuery: string;
   onSearchChange: (query: string) => void;
 }
 
 export function ShowcaseOverview({
   onSelectTab,
+  links,
+  onJump,
   searchQuery,
   onSearchChange,
 }: ShowcaseOverviewProps) {
@@ -115,47 +122,44 @@ export function ShowcaseOverview({
     { name: "Field-based Forms & InputGroup", tab: "forms", icon: Layers },
     { name: "Data Tables & States", tab: "data-display", icon: Boxes },
     { name: "Overlays (Dialog, Sheet, Drawer)", tab: "overlays", icon: Compass },
-    { name: "Domain Patterns & Code Recipes", tab: "domain-patterns", icon: FileCode2 },
+    { name: "Rules & Code Recipes", tab: "guidelines-recipes", icon: FileCode2 },
   ];
 
   return (
     <div className="flex flex-col gap-8">
-      {/* Hero Banner */}
-      <section className="relative overflow-hidden rounded-2xl border bg-gradient-to-br from-card via-card to-muted/40 p-6 md:p-8 shadow-xs">
-        <div className="flex flex-col gap-4 max-w-4xl">
-          <div className="flex flex-wrap items-center gap-2">
-            <Badge variant="default" className="gap-1">
-              <Sparkles className="size-3" /> @suphark/ui Design System
-            </Badge>
-            <Badge variant="secondary">Next.js App Router</Badge>
-            <Badge variant="outline">Tailwind v4</Badge>
-            <Badge variant="outline">shadcn/ui</Badge>
-            <Badge variant="outline">Web Interface Guidelines</Badge>
-          </div>
-
-          <h2 className="text-2xl md:text-3xl font-bold tracking-tight text-foreground">
-            ภาพรวมระบบการออกแบบและมาตรฐาน UI ของทุกแอป
+      {/* Hero — ไม่มีกรอบ: หน้าเต็มไปด้วยการ์ดอยู่แล้ว; specimen กว้างเต็มแถวใต้ข้อความ */}
+      <section className="flex flex-col gap-5 py-2 md:py-6">
+        <div className="flex max-w-3xl flex-col gap-5">
+          <h2 className="font-bold text-3xl text-foreground tracking-tight md:text-4xl">
+            UI ชุดเดียวสำหรับทุกแอปของ Suphark
           </h2>
 
-          <p className="text-sm md:text-base text-muted-foreground leading-relaxed">
+          <p className="text-base text-muted-foreground leading-relaxed md:text-lg">
             ศูนย์กลางมาตรฐานการออกแบบและการประกอบคอมโพเนนต์สำหรับทุกแอปของ Suphark (Pi Auth, DueBell, Pi
             PDF, supplychain) เน้นความกระชับ สแกนง่าย รองรับงานประจำวันที่มีข้อมูลหนาแน่น (Operational Density)
             ผสาน 4 เสาหลัก: <strong>Web Interface Guidelines</strong>,{" "}
             <strong>shadcn/ui Primitives</strong>,<strong>Frontend Design & UX Copy</strong>, และ{" "}
             <strong>Redesign Safety Workflow</strong>
           </p>
+        </div>
+
+        <HeroSpecimen />
 
-          <div className="flex flex-wrap items-center gap-3 pt-2">
+        <div>
+          <div className="flex flex-wrap items-center gap-3">
             <Button onClick={() => onSelectTab("primitives")} className="gap-2">
               <Boxes className="size-4" /> สำรวจคอมโพเนนต์ทั้งหมด
             </Button>
-            <Button
-              variant="outline"
-              onClick={() => onSelectTab("domain-patterns")}
-              className="gap-2"
-            >
-              <Compass className="size-4" /> ตัวอย่างหน้าจอ
-            </Button>
+            {links?.shell && (
+              <Button
+                variant="outline"
+                className="gap-2"
+                nativeButton={false}
+                render={<a href={links.shell} />}
+              >
+                <Compass className="size-4" /> ตัวอย่างหน้าจอ (AppShell)
+              </Button>
+            )}
             <Button
               variant="ghost"
               onClick={() => onSelectTab("guidelines-recipes")}
@@ -190,8 +194,15 @@ export function ShowcaseOverview({
           </div>
         </div>
 
+        {/* ผลลัพธ์ค้นหา (เมื่อพิมพ์) แทนชิป Jump to */}
+        {searchQuery.trim() ? (
+          <SearchResults query={searchQuery} onJump={onJump} onClear={() => onSearchChange("")} />
+        ) : null}
+
         {/* Quick jump tags */}
-        <div className="flex flex-wrap items-center gap-2 pt-1">
+        <div
+          className={cn("flex flex-wrap items-center gap-2 pt-1", searchQuery.trim() && "hidden")}
+        >
           <span className="text-xs text-muted-foreground flex items-center gap-1">
             <Kbd>Jump to</Kbd>
           </span>
@@ -238,7 +249,7 @@ export function ShowcaseOverview({
                     </Badge>
                   </div>
                   <CardTitle className="text-base font-semibold pt-2">{pillar.title}</CardTitle>
-                  <CardDescription className="text-xs">{pillar.subtitle}</CardDescription>
+                  <CardDescription>{pillar.subtitle}</CardDescription>
                 </CardHeader>
 
                 <CardContent className="flex flex-col gap-3 pb-3">
@@ -366,3 +377,60 @@ export function ShowcaseOverview({
     </div>
   );
 }
+
+/** ผลการค้นหาจากดัชนี — กดแล้วสลับแท็บและเลื่อนไปหัวข้อ; ไม่พบ = บอกและชวนดูแท็บ */
+function SearchResults({
+  query,
+  onJump,
+  onClear,
+}: {
+  query: string;
+  onJump: (tab: string, anchor?: string) => void;
+  onClear: () => void;
+}) {
+  const results = searchIndex(query);
+  if (results.length === 0) {
+    return (
+      <div className="flex flex-wrap items-center gap-2 rounded-lg border border-dashed px-3 py-2 text-muted-foreground text-sm">
+        <span>ไม่พบ "{query}" ในคู่มือ — ลองคำอื่น หรือดูแท็บ</span>
+        <button
+          type="button"
+          onClick={() => onJump("primitives")}
+          className="font-medium text-foreground underline underline-offset-4"
+        >
+          Primitives
+        </button>
+        <span>/</span>
+        <button
+          type="button"
+          onClick={() => onJump("forms")}
+          className="font-medium text-foreground underline underline-offset-4"
+        >
+          Forms
+        </button>
+        <button type="button" onClick={onClear} className="ml-auto underline underline-offset-4">
+          ล้างคำค้น
+        </button>
+      </div>
+    );
+  }
+  return (
+    <ul className="flex flex-col divide-y rounded-lg border bg-card" aria-label="ผลการค้นหา">
+      {results.map((r) => (
+        <li key={`${r.tab}-${r.anchor ?? r.title}`}>
+          <button
+            type="button"
+            onClick={() => onJump(r.tab, r.anchor)}
+            className="flex w-full items-center gap-3 px-3 py-2 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground"
+          >
+            <span className="flex-1">{r.title}</span>
+            <span className="rounded-md bg-muted px-1.5 py-0.5 text-muted-foreground text-xs">
+              {r.tab}
+            </span>
+            <ArrowRight className="size-4 text-muted-foreground" />
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}