feat : better ui

app/[character]/[page]/page.tsx

@@ -11,7 +11,7 @@ export async function generateMetadata({ params }: { params: Params }): Promise<
   await connection();
   const { character, page } = await params;
   const guide = await getCachedPublicGuide(character);
-  return guide ? { title: `${page} — ${guide.name} Build Guide`, description: guide.overview } : { title: "ไม่พบ Guide" };
+  return guide ? { title: `${page} — ${guide.name} — คู่มือ`, description: guide.overview } : { title: "ไม่พบไกด์" };
 }
 
 export default async function GuideSectionPage({ params }: { params: Params }) {

app/[character]/page.tsx

@@ -15,8 +15,8 @@ export async function generateMetadata({
   await connection();
   const guide = await getCachedPublicGuide((await params).character);
   return guide
-    ? { title: `${guide.name} Build Guide`, description: guide.overview }
-    : { title: "ไม่พบ Guide" };
+    ? { title: `${guide.name} — คู่มือ`, description: guide.overview }
+    : { title: "ไม่พบไกด์" };
 }
 
 export default async function GuideOverviewPage({

app/api/guides/[guideId]/artifacts/image/route.tsx

@@ -36,11 +36,29 @@ function metric(value: string): string {
 }
 
 function statLabel(value: string): string {
-  return value === "EM"
-    ? "Elemental Mastery"
-    : value === "ER"
-      ? "Energy Recharge"
-      : value;
+  const labels: Record<string, string> = {
+    HP: "พลังชีวิต",
+    ATK: "พลังโจมตี",
+    DEF: "พลังป้องกัน",
+    EM: "ความชำนาญธาตุ",
+    ER: "ฟื้นฟูพลังงาน",
+    "CRIT RATE": "อัตราคริ",
+    "CRIT DAMAGE": "ความแรงคริ",
+    "ATK%": "พลังโจมตี%",
+    "HP%": "พลังชีวิต%",
+    "DEF%": "พลังป้องกัน%",
+    "CRIT Rate%/CRIT DMG%": "อัตราคริ/ความแรงคริ",
+    "Pyro DMG%": "ความเสียหายธาตุไฟ%",
+    "Hydro DMG%": "ความเสียหายธาตุน้ำ%",
+    "Cryo DMG%": "ความเสียหายธาตุน้ำแข็ง%",
+    "Electro DMG%": "ความเสียหายธาตุไฟฟ้า%",
+    "Anemo DMG%": "ความเสียหายธาตุลม%",
+    "Geo DMG%": "ความเสียหายธาตุดิน%",
+    "Dendro DMG%": "ความเสียหายธาตุไม้%",
+    "Physical DMG%": "ความเสียหายกายภาพ%",
+    "Healing Bonus%": "โบนัสการรักษา%",
+  };
+  return labels[value] ?? value;
 }
 
 async function pngDataUrl(url: string): Promise<string | null> {
@@ -72,7 +90,7 @@ export async function GET(
 ) {
   const { guideId } = await context.params;
   const guide = await getCachedPublicArtifactExport(guideId);
-  if (!guide) return new Response("Guide not found", { status: 404 });
+  if (!guide) return new Response("ไม่พบไกด์", { status: 404 });
   const talents = normalizeTalentPriorities(guide.profile?.talents ?? []);
 
   const [fonts, groupAssets, statIconAssets, talentAssets, targetStatAssets] = await Promise.all([
@@ -131,7 +149,7 @@ export async function GET(
           อาร์ติแฟกต์และสเตตัสที่แนะนำ
         </div>
         <div style={{ display: "flex", fontSize: 38, fontWeight: 700 }}>
-          Artifacts &amp; Stats
+          อาร์ติแฟกต์และค่าสถานะ
         </div>
       </div>
 
@@ -150,7 +168,7 @@ export async function GET(
               }}
             >
               <div style={{ display: "flex", padding: "16px 20px", fontSize: 22, fontWeight: 700 }}>
-                {group.name}
+                {group.name === "Late Game" ? "เลทเกม" : group.name}
               </div>
               <div style={{ display: "flex", flexDirection: "column", padding: "0 20px 14px" }}>
                 {group.rows.map((row, rowIndex) => (
@@ -188,15 +206,15 @@ export async function GET(
           <div style={{ display: "flex", flex: 1, flexDirection: "column", gap: 16 }}>
             <div style={{ display: "flex", flexDirection: "column", overflow: "hidden", border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25" }}>
               <div style={{ display: "flex", justifyContent: "center", background: "#ddb45a", color: "#211a0d", padding: "14px 20px", fontSize: 24, fontWeight: 700 }}>
-                Artifact Stats
+                ออฟหลัก
               </div>
               <div style={{ display: "flex" }}>
                 {[
-                  { label: "Sands", values: profile.sands, icon: statIconAssets[0] },
-                  { label: "Goblet", values: profile.goblet, icon: statIconAssets[1] },
-                  { label: "Circlet", values: profile.circlet, icon: statIconAssets[2] },
+                  { label: "นาฬิกา", values: profile.sands, icon: statIconAssets[0] },
+                  { label: "ถ้วย", values: profile.goblet, icon: statIconAssets[1] },
+                  { label: "หัว", values: profile.circlet, icon: statIconAssets[2] },
                 ].map((stat) => (
-                  <div key={stat.label} style={{ display: "flex", flex: 1, minHeight: 176, flexDirection: "column", alignItems: "center", gap: 10, borderRight: stat.label === "Circlet" ? "none" : "1px solid #34343d", padding: "16px 10px", textAlign: "center" }}>
+                  <div key={stat.label} style={{ display: "flex", flex: 1, minHeight: 176, flexDirection: "column", alignItems: "center", gap: 10, borderRight: stat.label === "มงกุฎ" ? "none" : "1px solid #34343d", padding: "16px 10px", textAlign: "center" }}>
                     <img src={stat.icon} alt="" width={48} height={48} style={{ objectFit: "contain" }} />
                     <div style={{ display: "flex", fontSize: 17, fontWeight: 700 }}>{stat.label}</div>
                     <div style={{ display: "flex", width: "100%", borderTop: "1px solid #34343d" }} />
@@ -210,7 +228,7 @@ export async function GET(
 
             {profile.substats.length ? (
                 <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4, border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25", padding: "16px", fontSize: 14, textAlign: "center" }}>
-                <strong>Stat Priority:</strong>
+                <strong>ลำดับค่าสถานะ:</strong>
                 <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 2 }}>
                   {profile.substats.map((stat, index) => <span key={`${stat}-${index}`} style={{ color: statPriorityColor(index) }}>{statLabel(stat)}</span>)}
                 </div>
@@ -222,7 +240,7 @@ export async function GET(
                 <div style={{ display: "flex", fontSize: 20, fontWeight: 700 }}>รายละเอียดเพิ่มเติม</div>
                 {profile.targets.length ? (
                   <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
-                    <div style={{ display: "flex", color: "#b9b9c2", fontSize: 14, fontWeight: 700 }}>Target Stats</div>
+                    <div style={{ display: "flex", color: "#b9b9c2", fontSize: 14, fontWeight: 700 }}>ค่าสถานะเป้าหมาย</div>
                     {profile.targets.map((target, index) => {
                       const iconIndex = targetStatOptions.findIndex((stat) => stat === normalizeTargetStat(target.stat));
                       return (
@@ -241,7 +259,7 @@ export async function GET(
                         <div key={talent.type} style={{ display: "flex", alignItems: "center", gap: 8 }}>
                           {talentAssets[index] ? <img src={talentAssets[index]!} alt="" width={42} height={42} style={{ objectFit: "contain" }} /> : null}
                           <span style={{ display: "flex", flexDirection: "column", gap: 2 }}>
-                            <span>{talent.type}{talent.level ? ` Lv.${talent.level}+` : ""}</span>
+                            <span>{talent.type}{talent.level ? ` เลเวล ${talent.level}+` : ""}</span>
                             <span style={{ color: "#b9b9c2", fontSize: 13, fontWeight: 400 }}>{talentTypeLabel(talent.type)}</span>
                           </span>
                           {index < talents.length - 1 ? <span>{talent.relationToNext === "gte" ? ">=" : ">"}</span> : null}
@@ -269,7 +287,7 @@ export async function GET(
       fonts: fonts.length ? fonts : undefined,
       headers: {
         "Cache-Control": "no-store",
-        "Content-Disposition": imageContentDisposition(`${guide.guideName} Artifacts`, "artifacts"),
+        "Content-Disposition": imageContentDisposition(`${guide.guideName} อาร์ติแฟกต์`, "artifacts"),
         "Content-Type": "image/png",
       },
     },

app/api/guides/[guideId]/weapons/image/route.tsx

@@ -50,7 +50,7 @@ export async function GET(
 ) {
   const { guideId } = await context.params;
   const guide = await getCachedPublicWeaponExport(guideId);
-  if (!guide) return new Response("Guide not found", { status: 404 });
+  if (!guide) return new Response("ไม่พบไกด์", { status: 404 });
 
   const [fonts, weaponImages] = await Promise.all([
     anuphanFonts,
@@ -77,7 +77,7 @@ export async function GET(
       <div style={{ position: "relative", zIndex: 1, display: "flex", flex: 1, flexDirection: "column", gap: 14 }}>
       <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8, marginBottom: 6 }}>
         <div style={{ display: "flex", color: "#f0b72f", fontSize: 16, fontWeight: 700 }}>อาวุธที่แนะนำ</div>
-        <div style={{ display: "flex", fontSize: 38, fontWeight: 700 }}>Weapons</div>
+        <div style={{ display: "flex", fontSize: 38, fontWeight: 700 }}>อาวุธ</div>
       </div>
       {guide.weapons.map((row, index) => (
         <div
@@ -140,7 +140,7 @@ export async function GET(
       fonts: fonts.length ? fonts : undefined,
       headers: {
         "Cache-Control": "no-store",
-        "Content-Disposition": imageContentDisposition(`${guide.guideName} Weapons`, "weapons"),
+        "Content-Disposition": imageContentDisposition(`${guide.guideName} อาวุธ`, "weapons"),
         "Content-Type": "image/png",
       },
     },

app/api/teams/[teamId]/image/route.tsx

@@ -51,7 +51,7 @@ export async function GET(
 ) {
   const { teamId } = await context.params;
   const team = await getCachedPublicTeamExport(teamId);
-  if (!team) return new Response("Team not found", { status: 404 });
+  if (!team) return new Response("ไม่พบทีม", { status: 404 });
 
   const total = team.members.reduce(
     (sum, member) => sum + Number(member.damage),
@@ -135,7 +135,7 @@ export async function GET(
               </div>
               <div style={{ display: "flex", flex: 1, flexDirection: "column", gap: 6 }}>
                 <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
-                  <div style={{ display: "flex", fontSize: 20, fontWeight: 600 }}>C{member.constellation} · {member.character.name}</div>
+                  <div style={{ display: "flex", fontSize: 20, fontWeight: 600 }}>C{member.constellation} {member.character.name}</div>
                   <div style={{ display: "flex", color: "#d9f6f2", fontSize: 18 }}>{amount(damage)}</div>
                 </div>
                 <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
@@ -161,11 +161,11 @@ export async function GET(
       </div>
 
       <div style={{ display: "flex", flex: 1, flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 6, padding: "16px 0", textAlign: "center", color: "#d1e9e6", fontSize: 18, lineHeight: 1.45 }}>
-        <div style={{ display: "flex", color: "#82d6ce", fontSize: 15, fontWeight: 700 }}>Team Rotation</div>
+        <div style={{ display: "flex", color: "#82d6ce", fontSize: 15, fontWeight: 700 }}>Rotation</div>
         <div style={{ display: "flex" }}>{team.combo}</div>
       </div>
       <div style={{ display: "flex", justifyContent: "center", gap: 16, borderTop: "1px solid #28555a", paddingTop: 20, fontSize: 26, fontWeight: 700 }}>
-        <span style={{ color: "#f0c95f" }}>DPS: {amount(dps)}</span>
+        <span style={{ color: "#f0c95f" }}>DPS): {amount(dps)}</span>
         <span style={{ color: "#688c90" }}>|</span>
         <span>DPR: {amount(total)}</span>
       </div>

app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Anuphan, Geist_Mono } from "next/font/google";
 
 import { DeploymentUpdateNotifier } from "@/components/deployment-update-notifier";
+import { PageProgress } from "@/components/page-progress";
 import { Toaster } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 
@@ -37,6 +38,7 @@ export default function RootLayout({ children }: LayoutProps<"/">) {
     >
       <body className="flex min-h-full flex-col">
         <TooltipProvider>
+          <PageProgress />
           {children}
           <DeploymentUpdateNotifier deploymentId={deploymentId} />
           <Toaster richColors closeButton position="bottom-right" />

app/page.tsx

@@ -15,13 +15,13 @@ export default async function HomePage() {
       <main className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-4 py-10 sm:px-6 sm:py-14">
         <header className="max-w-3xl">
           <p className="text-sm font-medium text-primary">
-            Genshin Impact Build Guides
+            คู่มือการจัดตัวละครเกนชินอิมแพกต์
           </p>
           <h1 className="mt-2 font-heading text-4xl font-semibold">
             เลือกตัวละครแล้วส่องดูได้เลย
           </h1>
           <p className="mt-3 text-lg leading-8 text-muted-foreground">
-            ไกด์ตัวละคร Weapons, Artifacts, Constellations และ Team Calc
+            ไกด์ตัวละคร อาวุธ อาร์ติแฟกต์ กลุ่มดาว และคำนวณทีม
           </p>
         </header>
         <StructuredDirectory guides={guides} />

components/admin/autosave-status.tsx

@@ -1,13 +1,28 @@
 import { AlertCircleIcon, CheckIcon, ClockIcon } from "lucide-react";
+import { useState } from "react";
 
+import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
 import type { AutosaveState } from "@/hooks/use-autosave";
 
-export function AutosaveStatus({ state }: { state: AutosaveState }) {
+export function AutosaveStatus({ state, issues = [] }: { state: AutosaveState; issues?: readonly string[] }) {
+  const [showIssues, setShowIssues] = useState(false);
+
   if (state === "saving") return <Badge variant="secondary"><Spinner data-icon="inline-start" />Saving…</Badge>;
   if (state === "unsaved") return <Badge variant="outline"><ClockIcon data-icon="inline-start" />Waiting to save…</Badge>;
-  if (state === "incomplete") return <Badge variant="outline"><AlertCircleIcon data-icon="inline-start" />Complete required fields</Badge>;
+  if (state === "incomplete") return <div className="flex flex-col items-end gap-2">
+    <Button type="button" variant="outline" size="sm" onClick={() => setShowIssues((current) => !current)} aria-expanded={showIssues}>
+      <AlertCircleIcon data-icon="inline-start" />{showIssues ? "Hide incomplete fields" : "Check incomplete fields"}
+    </Button>
+    {showIssues ? <Alert variant="destructive" className="max-w-md">
+      <AlertCircleIcon aria-hidden="true" />
+      <AlertDescription>
+        {issues.length ? <ul className="flex flex-col gap-1">{issues.map((issue, index) => <li key={`${issue}-${index}`}>{issue}</li>)}</ul> : "ข้อมูลที่จำเป็นยังกรอกไม่ครบ"}
+      </AlertDescription>
+    </Alert> : null}
+  </div>;
   if (state === "error") return <Badge variant="destructive"><AlertCircleIcon data-icon="inline-start" />Autosave failed</Badge>;
   return <Badge variant="secondary"><CheckIcon data-icon="inline-start" />Saved</Badge>;
 }

components/admin/create-guide-flow.tsx

@@ -15,6 +15,8 @@ import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui
 import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";
 import { Spinner } from "@/components/ui/spinner";
 import { Textarea } from "@/components/ui/textarea";
+import { rarityGradientClass } from "@/lib/catalog/rarity";
+import { cn } from "@/lib/utils";
 
 type Character = { key: string; name: string; element: string | null; rarity: number | null; imageUrl: string };
 
@@ -77,7 +79,7 @@ export function CreateGuideFlow({ characters, existingKeys }: { characters: Char
           const disabled = existing.has(character.key);
           return (
             <Card key={character.key} className="overflow-hidden py-0">
-              <div className="relative aspect-square bg-muted"><Image src={character.imageUrl} alt={character.name} fill className="object-cover" /></div>
+              <div className={cn("relative aspect-square", rarityGradientClass(character.rarity))}><Image src={character.imageUrl} alt={character.name} fill className="object-cover" /></div>
               <CardHeader className="pt-4">
                 <CardTitle>{character.name}</CardTitle>
                 <CardDescription>{character.element ?? "Unknown element"}</CardDescription>

components/admin/guide-overview-form.tsx

@@ -15,11 +15,15 @@ export function GuideOverviewForm({ guide }: { guide: { id: string; version: num
   const [overview, setOverview] = useState(guide.overview);
   const [cover, setCover] = useState({ id: guide.coverMediaId, url: guide.coverUrl });
   const value = { coverMediaId: cover.id, overview };
+  const incompleteIssues = [
+    !cover.id ? "Guide Image is required" : null,
+    !overview.trim() ? "Overview is required" : null,
+  ].filter((issue): issue is string => Boolean(issue));
   const autosave = useAutosave({
     value,
     valid: Boolean(cover.id && overview.trim()),
     initialVersion: guide.version,
     persist: (next, expectedVersion) => saveGuideOverview(guide.id, { ...next, expectedVersion }),
   });
-  return <Card><CardHeader><CardTitle>Overview</CardTitle><CardDescription>ภาพและข้อความนี้แสดงบนหน้าแรกและส่วนแนะนำของ Guide</CardDescription></CardHeader><CardContent><FieldGroup><Field><FieldLabel>Guide Image</FieldLabel><div className="relative aspect-square max-w-md overflow-hidden rounded-lg border"><Image src={cover.url} alt={`Guide ${guide.name}`} fill className="object-cover" /></div><MediaUploader onReady={(asset) => setCover(asset)} /></Field><Field><FieldLabel htmlFor="guide-overview">Overview</FieldLabel><Textarea id="guide-overview" value={overview} maxLength={500} onChange={(event) => setOverview(event.target.value)} /><FieldDescription>{overview.length}/500 ตัวอักษร</FieldDescription></Field></FieldGroup></CardContent><CardFooter className="justify-end"><AutosaveStatus state={autosave} /></CardFooter></Card>;
+  return <Card><CardHeader><CardTitle>Overview</CardTitle><CardDescription>ภาพและข้อความนี้แสดงบนหน้าแรกและส่วนแนะนำของ Guide</CardDescription></CardHeader><CardContent><FieldGroup><Field><FieldLabel>Guide Image</FieldLabel><div className="relative aspect-square max-w-md overflow-hidden rounded-lg border"><Image src={cover.url} alt={`Guide ${guide.name}`} fill className="object-cover" /></div><MediaUploader onReady={(asset) => setCover(asset)} /></Field><Field><FieldLabel htmlFor="guide-overview">Overview</FieldLabel><Textarea id="guide-overview" value={overview} maxLength={500} onChange={(event) => setOverview(event.target.value)} /><FieldDescription>{overview.length}/500 ตัวอักษร</FieldDescription></Field></FieldGroup></CardContent><CardFooter className="justify-end"><AutosaveStatus state={autosave} issues={incompleteIssues} /></CardFooter></Card>;
 }

components/admin/guide-section-editor.tsx

@@ -5,6 +5,7 @@ import {
   ChartNoAxesCombinedIcon,
   GemIcon,
   GripVerticalIcon,
+  HeartPulseIcon,
   ListOrderedIcon,
   PlusIcon,
   RefreshCcwIcon,
@@ -86,6 +87,7 @@ import {
 } from "@/lib/guides/schemas";
 import {
   normalizeTargetStat,
+  recommendedStatIconName,
   targetStatDefaults,
   targetStatIconName,
   targetStatOptions,
@@ -110,6 +112,15 @@ type CatalogConstellation = { level: number; name: string; description: string;
 type CatalogTalent = { type: "NA" | "E" | "Q"; name: string; iconUrl: string | null };
 type TeamValue = { id: string; title: string; rotationSeconds: string; combo: string; members: Array<{ characterKey: string; weaponKey: string | null; artifactKey: string | null; constellation: number; refinement: number; damage: string }> };
 
+let clientIdCounter = 0;
+
+function createClientId(prefix: string): string {
+  const browserCrypto = globalThis.crypto;
+  if (typeof browserCrypto?.randomUUID === "function") return `${prefix}-${browserCrypto.randomUUID()}`;
+  clientIdCounter += 1;
+  return `${prefix}-${Date.now()}-${clientIdCounter}`;
+}
+
 export interface GuideSectionEditorProps {
   section: "weapon" | "artifact" | "constellations" | "team" | "extra";
   guide: Guide;
@@ -138,10 +149,10 @@ function CatalogPicker({ items, value, onChange, placeholder, rarityBackground =
       <div className="min-w-0 flex-1">
         <Combobox items={items} value={selected} onValueChange={(next) => onChange(next?.key ?? "")} itemToStringLabel={(item) => item.name} itemToStringValue={(item) => item.key} autoHighlight>
           <ComboboxInput className="w-full" placeholder={placeholder} showClear />
-          <ComboboxContent>
+          <ComboboxContent className="min-w-[24rem]">
             <ComboboxEmpty>ไม่พบรายการ</ComboboxEmpty>
             <ComboboxList>
-              {(item) => <ComboboxItem key={item.key} value={item}><div className={cn("relative size-8 shrink-0 overflow-hidden rounded-md", rarityBackground && rarityGradientClass(item.rarity))}><Image src={item.imageUrl} alt="" fill className="object-contain" /></div>{item.name}</ComboboxItem>}
+              {(item) => <ComboboxItem key={item.key} value={item}><div className={cn("relative size-8 shrink-0 overflow-hidden rounded-md", rarityBackground && rarityGradientClass(item.rarity))}><Image src={item.imageUrl} alt="" fill className="object-contain" /></div><span className="whitespace-nowrap">{item.name}</span></ComboboxItem>}
             </ComboboxList>
           </ComboboxContent>
         </Combobox>
@@ -167,12 +178,20 @@ function StatIcons({ values }: { values: readonly string[] }) {
   const iconNames = values.flatMap((value) => {
     const targetIcon = targetStatIconName(value);
     if (targetIcon) return [targetIcon];
-    if (value === "CRIT Rate%/CRIT DMG%") return ["critrate", "critdmg"];
-    const base = value.replace(/%$/, "").toLowerCase();
-    return ["hp", "atk", "def", "em", "er"].includes(base) ? [base] : [];
+    const recommendedIcon = recommendedStatIconName(value);
+    return recommendedIcon ? [recommendedIcon] : [];
   });
   if (!iconNames.length) return null;
-  return <span className="flex shrink-0 items-center gap-0.5" aria-hidden="true">{iconNames.map((iconName) => <Image key={iconName} src={`/icon/stats/${iconName}.webp`} alt="" width={20} height={20} className="size-5 object-contain brightness-0 invert" />)}</span>;
+  return <span className="flex shrink-0 items-center gap-0.5" aria-hidden="true">{iconNames.map((iconName) => <StatIcon key={iconName} iconName={iconName} />)}</span>;
+}
+
+function StatIcon({ iconName }: { iconName: string }) {
+  const [hasError, setHasError] = useState(false);
+  if (hasError) {
+    const PlaceholderIcon = iconName === "healing-bonus" ? HeartPulseIcon : SparklesIcon;
+    return <PlaceholderIcon className="size-5 text-muted-foreground" aria-hidden="true" />;
+  }
+  return <Image src={`/icon/stats/${iconName}.webp`} alt="" width={20} height={20} className="size-5 object-contain brightness-0 invert" onError={() => setHasError(true)} />;
 }
 
 function TalentLevelPicker({ value, onChange }: { value?: string; onChange: (value?: string) => void }) {
@@ -206,12 +225,12 @@ function SortableTalentCard({
     <div
       ref={setNodeRef}
       style={{ transform: CSS.Transform.toString(transform), transition }}
-      className={cn(isDragging && "opacity-60")}
+      className={cn("w-56 shrink-0", isDragging && "opacity-60")}
     >
-      <Card size="sm">
-        <CardHeader>
-          {catalogTalent?.iconUrl ? <Image src={catalogTalent.iconUrl} alt="" width={48} height={48} className="rounded-lg bg-muted" /> : null}
-          <CardTitle>{index + 1}. {catalogTalent?.name ?? talent.type}</CardTitle>
+      <Card size="sm" className="h-full">
+        <CardHeader className="flex items-center gap-2">
+          {catalogTalent?.iconUrl ? <Image src={catalogTalent.iconUrl} alt="" width={40} height={40} className="size-10 shrink-0 rounded-lg bg-muted" /> : null}
+          <CardTitle className="min-w-0 flex-1 truncate">{index + 1}. {catalogTalent?.name ?? talent.type}</CardTitle>
           <CardAction>
             <Button type="button" variant="ghost" size="icon-sm" className="touch-none" {...attributes} {...listeners}>
               <GripVerticalIcon />
@@ -248,6 +267,24 @@ function SortableWeaponCard({ id, children }: { id: string; children: (dragHandl
   );
 }
 
+function SortableArtifactRow({ id, children }: { id: string; children: (dragHandle: ReactNode) => ReactNode }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Transform.toString(transform), transition }}
+      className={cn(isDragging && "opacity-60")}
+    >
+      {children(
+        <Button type="button" variant="ghost" size="icon-sm" className="touch-none" {...attributes} {...listeners}>
+          <GripVerticalIcon />
+          <span className="sr-only">ลากเพื่อจัดลำดับ Artifact</span>
+        </Button>,
+      )}
+    </div>
+  );
+}
+
 function SortableTeamItem({ id, children }: { id: string; children: (dragHandle: ReactNode) => ReactNode }) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
   return (
@@ -290,7 +327,8 @@ function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
   );
   const [rows, setRows] = useState(initial.weapons.map((row) => ({ clientId: row.id, weaponKey: row.weaponKey, refinement: row.refinement, overallPercent: row.overallPercent ?? "", personalPercent: row.personalPercent ?? "", note: row.note ?? "" })));
   const value = { rows: rows.map((row) => ({ weaponKey: row.weaponKey, refinement: row.refinement, overallPercent: row.overallPercent === "" ? null : Number(row.overallPercent), personalPercent: row.personalPercent === "" ? null : Number(row.personalPercent), note: row.note.trim() || null })) };
-  const autosave = useAutosave({ value, valid: weaponSectionSchema.safeParse({ ...value, expectedVersion: guide.version }).success, initialVersion: guide.version, persist: (next, expectedVersion) => saveWeaponSection(guide.id, { ...next, expectedVersion }) });
+  const validation = weaponSectionSchema.safeParse({ ...value, expectedVersion: guide.version });
+  const autosave = useAutosave({ value, valid: validation.success, initialVersion: guide.version, persist: (next, expectedVersion) => saveWeaponSection(guide.id, { ...next, expectedVersion }) });
   const handleWeaponDragEnd = ({ active, over }: DragEndEvent) => {
     if (!over || active.id === over.id) return;
     setRows((current) => {
@@ -306,25 +344,29 @@ function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
         <DndContext sensors={weaponSensors} collisionDetection={closestCenter} onDragEnd={handleWeaponDragEnd}>
           <SortableContext items={rows.map((row) => row.clientId)} strategy={verticalListSortingStrategy}>
             <div className="flex flex-col gap-4">
-              {rows.map((row, rowIndex) => { const selectedWeapon = compatibleWeapons.find((weapon) => weapon.key === row.weaponKey); return <SortableWeaponCard key={row.clientId} id={row.clientId}>{(dragHandle) => <Card size="sm"><CardHeader><CardTitle className="flex items-center gap-3">{selectedWeapon ? <div className={cn("relative size-10 shrink-0 overflow-hidden rounded-lg", rarityGradientClass(selectedWeapon.rarity))}><Image src={selectedWeapon.imageUrl} alt="" fill className="object-contain" /></div> : null}<span>อันดับ {rowIndex + 1}</span></CardTitle><CardAction><div className="flex gap-1">{dragHandle}<Button type="button" variant="ghost" size="icon-sm" onClick={() => setRows(rows.filter((item) => item.clientId !== row.clientId))}><Trash2Icon /><span className="sr-only">ลบอาวุธ</span></Button></div></CardAction></CardHeader><CardContent><FieldGroup><Field><FieldLabel>อาวุธ</FieldLabel><CatalogPicker items={compatibleWeapons} value={row.weaponKey} placeholder="ค้นหาชื่ออาวุธ…" rarityBackground onChange={(weaponKey) => setRows(rows.map((item) => item.clientId === row.clientId ? { ...item, weaponKey } : item))} /></Field><Field><FieldLabel>Refinement</FieldLabel><ToggleGroup variant="outline" value={[`R${row.refinement}`]} onValueChange={(selected) => { const next = selected[0]; if (next) setRows(rows.map((item) => item.clientId === row.clientId ? { ...item, refinement: Number(next.slice(1)) } : item)); }}>{[1, 2, 3, 4, 5].map((refinement) => <ToggleGroupItem className={SELECTED_TOGGLE_CLASS} key={refinement} value={`R${refinement}`}>R{refinement}</ToggleGroupItem>)}</ToggleGroup></Field><div className="grid gap-4 sm:grid-cols-2"><Field><FieldLabel>Overall %</FieldLabel><Input type="number" min="0" step="0.01" value={row.overallPercent} onChange={(event) => setRows(rows.map((item) => item.clientId === row.clientId ? { ...item, overallPercent: event.target.value } : item))} /></Field><Field><FieldLabel>Personal %</FieldLabel><Input type="number" min="0" step="0.01" value={row.personalPercent} onChange={(event) => setRows(rows.map((item) => item.clientId === row.clientId ? { ...item, personalPercent: event.target.value } : item))} /></Field></div><Field><FieldLabel htmlFor={`weapon-note-${row.clientId}`}>Note (optional)</FieldLabel><Textarea id={`weapon-note-${row.clientId}`} value={row.note} onChange={(event) => setRows(rows.map((item) => item.clientId === row.clientId ? { ...item, note: event.target.value } : item))} /></Field></FieldGroup></CardContent></Card>}</SortableWeaponCard>; })}
+              {rows.map((row, rowIndex) => { const selectedWeapon = compatibleWeapons.find((weapon) => weapon.key === row.weaponKey); return <SortableWeaponCard key={row.clientId} id={row.clientId}>{(dragHandle) => <Card size="sm"><CardHeader><CardTitle className="flex items-center gap-3">{selectedWeapon ? <div className={cn("relative size-10 shrink-0 overflow-hidden rounded-lg", rarityGradientClass(selectedWeapon.rarity))}><Image src={selectedWeapon.imageUrl} alt="" fill className="object-contain" /></div> : null}<span>อันดับ {rowIndex + 1}</span></CardTitle><CardAction><div className="flex gap-1">{dragHandle}<Button type="button" variant="ghost" size="icon-sm" onClick={() => setRows(rows.filter((item) => item.clientId !== row.clientId))}><Trash2Icon /><span className="sr-only">ลบอาวุธ</span></Button></div></CardAction></CardHeader><CardContent><FieldGroup><div className="grid grid-cols-[minmax(0,1fr)_auto] items-end gap-4"><Field className="min-w-0"><FieldLabel>อาวุธ</FieldLabel><CatalogPicker items={compatibleWeapons} value={row.weaponKey} placeholder="ค้นหาชื่ออาวุธ…" rarityBackground onChange={(weaponKey) => setRows(rows.map((item) => item.clientId === row.clientId ? { ...item, weaponKey } : item))} /></Field><Field className="shrink-0"><FieldLabel>Refinement</FieldLabel><ToggleGroup variant="outline" value={[`R${row.refinement}`]} onValueChange={(selected) => { const next = selected[0]; if (next) setRows(rows.map((item) => item.clientId === row.clientId ? { ...item, refinement: Number(next.slice(1)) } : item)); }}>{[1, 2, 3, 4, 5].map((refinement) => <ToggleGroupItem className={SELECTED_TOGGLE_CLASS} key={refinement} value={`R${refinement}`}>R{refinement}</ToggleGroupItem>)}</ToggleGroup></Field></div><div className="grid gap-4 sm:grid-cols-2"><Field><FieldLabel>Overall %</FieldLabel><Input type="number" min="0" step="0.01" value={row.overallPercent} onChange={(event) => setRows(rows.map((item) => item.clientId === row.clientId ? { ...item, overallPercent: event.target.value } : item))} /></Field><Field><FieldLabel>Personal %</FieldLabel><Input type="number" min="0" step="0.01" value={row.personalPercent} onChange={(event) => setRows(rows.map((item) => item.clientId === row.clientId ? { ...item, personalPercent: event.target.value } : item))} /></Field></div><Field><FieldLabel htmlFor={`weapon-note-${row.clientId}`}>Note (optional)</FieldLabel><Textarea id={`weapon-note-${row.clientId}`} value={row.note} onChange={(event) => setRows(rows.map((item) => item.clientId === row.clientId ? { ...item, note: event.target.value } : item))} /></Field></FieldGroup></CardContent></Card>}</SortableWeaponCard>; })}
             </div>
           </SortableContext>
         </DndContext>
       </CardContent>
-      <CardFooter className="flex-wrap justify-between gap-3"><Button type="button" variant="outline" onClick={() => setRows([...rows, { clientId: crypto.randomUUID(), weaponKey: "", refinement: 1, overallPercent: "", personalPercent: "", note: "" }])}><PlusIcon data-icon="inline-start" />เพิ่มอาวุธ</Button><AutosaveStatus state={autosave} /></CardFooter>
+      <CardFooter className="flex-wrap justify-between gap-3"><Button type="button" variant="outline" onClick={() => setRows([...rows, { clientId: createClientId("weapon"), weaponKey: "", refinement: 1, overallPercent: "", personalPercent: "", note: "" }])}><PlusIcon data-icon="inline-start" />เพิ่มอาวุธ</Button><AutosaveStatus state={autosave} issues={validation.success ? [] : validation.error.issues.map((issue) => issue.path.length ? `${issue.path.join(".")}: ${issue.message}` : issue.message)} /></CardFooter>
     </Card>
   );
 }
 
 function ArtifactEditor({ guide, artifacts, initial, catalogTalents }: EditorBase) {
   const profile = initial.artifactProfile;
+  const artifactSensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
   const talentSensors = useSensors(
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
   );
   const [groups, setGroups] = useState(() => (["Late Game", "Early Game"] as const).map((name, index) => ({
     name,
-    rows: initial.artifactGroups[index]?.rows.map((row) => ({ ...row })) ?? [],
+    rows: initial.artifactGroups[index]?.rows.map((row, rowIndex) => ({ ...row, clientId: `${name}-${rowIndex}` })) ?? [],
   })));
   const [sands, setSands] = useState(profile?.sands ?? []);
   const [goblet, setGoblet] = useState(profile?.goblet ?? []);
@@ -352,9 +394,22 @@ function ArtifactEditor({ guide, artifacts, initial, catalogTalents }: EditorBas
     })));
   });
   const [note, setNote] = useState(profile?.note ?? "");
-  const value = { groups: groups.map((group) => ({ ...group, rows: group.rows.map((row) => ({ ...row, percent: Number(row.percent), note: row.note?.trim() || null })) })), sands, goblet, circlet, substats, targets: targets.filter((target) => target.value.trim()).map((target) => ({ stat: target.stat, value: target.value.trim() })), talents, note: note || null };
-  const autosave = useAutosave({ value, valid: artifactSectionSchema.safeParse({ ...value, expectedVersion: guide.version }).success, initialVersion: guide.version, persist: (next, expectedVersion) => saveArtifactSection(guide.id, { ...next, expectedVersion }) });
+  const value = { groups: groups.map((group) => ({ name: group.name, rows: group.rows.map((row) => ({ firstArtifactKey: row.firstArtifactKey, secondArtifactKey: row.secondArtifactKey, percent: Number(row.percent), note: row.note?.trim() || null })) })), sands, goblet, circlet, substats, targets: targets.filter((target) => target.value.trim()).map((target) => ({ stat: target.stat, value: target.value.trim() })), talents, note: note || null };
+  const validation = artifactSectionSchema.safeParse({ ...value, expectedVersion: guide.version });
+  const autosave = useAutosave({ value, valid: validation.success, initialVersion: guide.version, persist: (next, expectedVersion) => saveArtifactSection(guide.id, { ...next, expectedVersion }) });
   const orderedTalents = normalizeTalentPriorities(talents);
+  const handleArtifactDragEnd = ({ active, over }: DragEndEvent) => {
+    if (!over || active.id === over.id) return;
+    const activeGroupIndex = groups.findIndex((group) => group.rows.some((row) => row.clientId === active.id));
+    const overGroupIndex = groups.findIndex((group) => group.rows.some((row) => row.clientId === over.id));
+    if (activeGroupIndex === -1 || activeGroupIndex !== overGroupIndex) return;
+    setGroups((current) => current.map((group, groupIndex) => {
+      if (groupIndex !== activeGroupIndex) return group;
+      const from = group.rows.findIndex((row) => row.clientId === active.id);
+      const to = group.rows.findIndex((row) => row.clientId === over.id);
+      return from === -1 || to === -1 ? group : { ...group, rows: arrayMove(group.rows, from, to) };
+    }));
+  };
   const handleTalentDragEnd = ({ active, over }: DragEndEvent) => {
     if (!over) return;
     setTalents(reorderTalentPriorities(orderedTalents, active.id as TalentPriority["type"], over.id as TalentPriority["type"]));
@@ -367,41 +422,78 @@ function ArtifactEditor({ guide, artifacts, initial, catalogTalents }: EditorBas
       <Card>
         <CardHeader><CardTitle>Artifact tier list</CardTitle><CardDescription>จัดชุด Artifact ในกลุ่ม Late Game และ Early Game ระบบจะบันทึกอัตโนมัติ</CardDescription></CardHeader>
         <CardContent className="grid gap-5 md:grid-cols-2">
-          {groups.map((group, groupIndex) => <Card key={group.name} size="sm"><CardHeader><CardTitle>{group.name}</CardTitle></CardHeader><CardContent className="flex flex-col gap-3">{group.rows.map((row, rowIndex) => <div key={rowIndex} className={cn("flex flex-col gap-3 rounded-lg border p-3", rowIndex % 2 === 0 ? "bg-muted/60" : "bg-muted/20")}><div className="grid gap-3 lg:grid-cols-[1fr_1fr_8rem_auto]"><CatalogPicker items={artifacts} value={row.firstArtifactKey} placeholder="ค้นหาชุด Artifact แรก…" rarityBackground showSelectedImage onChange={(firstArtifactKey) => setGroups(groups.map((item, index) => index === groupIndex ? { ...item, rows: item.rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, firstArtifactKey } : candidate) } : item))} /><CatalogPicker items={artifacts} value={row.secondArtifactKey ?? ""} placeholder="ค้นหาชุดที่สอง (ถ้ามี)…" rarityBackground showSelectedImage onChange={(secondArtifactKey) => setGroups(groups.map((item, index) => index === groupIndex ? { ...item, rows: item.rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, secondArtifactKey: secondArtifactKey || null } : candidate) } : item))} /><Input type="number" min="0" step="0.01" aria-label="Artifact percent" value={row.percent} onChange={(event) => setGroups(groups.map((item, index) => index === groupIndex ? { ...item, rows: item.rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, percent: event.target.value } : candidate) } : item))} /><Button variant="ghost" size="icon" onClick={() => setGroups(groups.map((item, index) => index === groupIndex ? { ...item, rows: item.rows.filter((_, inner) => inner !== rowIndex) } : item))}><Trash2Icon /><span className="sr-only">ลบ Artifact</span></Button></div><Field><FieldLabel htmlFor={`artifact-note-${groupIndex}-${rowIndex}`}>Note (optional)</FieldLabel><Textarea id={`artifact-note-${groupIndex}-${rowIndex}`} value={row.note ?? ""} onChange={(event) => setGroups(groups.map((item, index) => index === groupIndex ? { ...item, rows: item.rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, note: event.target.value } : candidate) } : item))} /></Field></div>)}<Button variant="outline" onClick={() => setGroups(groups.map((item, index) => index === groupIndex ? { ...item, rows: [...item.rows, { firstArtifactKey: "", secondArtifactKey: null, percent: "100", note: "" }] } : item))}><PlusIcon data-icon="inline-start" />เพิ่มชุด Artifact</Button></CardContent></Card>)}
+          {groups.map((group, groupIndex) => (
+            <Card key={group.name} size="sm">
+              <CardHeader><CardTitle>{group.name}</CardTitle></CardHeader>
+              <CardContent className="flex flex-col gap-3">
+                <DndContext sensors={artifactSensors} collisionDetection={closestCenter} onDragEnd={handleArtifactDragEnd}>
+                  <SortableContext items={group.rows.map((row) => row.clientId)} strategy={verticalListSortingStrategy}>
+                    <div className="flex flex-col gap-3">
+                      {group.rows.map((row, rowIndex) => (
+                        <SortableArtifactRow key={row.clientId} id={row.clientId}>
+                          {(dragHandle) => (
+                            <div className={cn("flex items-start gap-2 rounded-lg border p-3", rowIndex % 2 === 0 ? "bg-muted/60" : "bg-muted/20")}>
+                              {dragHandle}
+                              <div className="flex min-w-0 flex-1 flex-col gap-3">
+                                <div className="grid gap-3 lg:grid-cols-[1fr_1fr_8rem_auto]">
+                                  <CatalogPicker items={artifacts} value={row.firstArtifactKey} placeholder="ค้นหาชุด Artifact แรก…" rarityBackground showSelectedImage onChange={(firstArtifactKey) => setGroups(groups.map((item, index) => index === groupIndex ? { ...item, rows: item.rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, firstArtifactKey } : candidate) } : item))} />
+                                  <CatalogPicker items={artifacts} value={row.secondArtifactKey ?? ""} placeholder="ค้นหาชุดที่สอง (ถ้ามี)…" rarityBackground showSelectedImage onChange={(secondArtifactKey) => setGroups(groups.map((item, index) => index === groupIndex ? { ...item, rows: item.rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, secondArtifactKey: secondArtifactKey || null } : candidate) } : item))} />
+                                  <Input type="number" min="0" step="0.01" aria-label="Artifact percent" value={row.percent} onChange={(event) => setGroups(groups.map((item, index) => index === groupIndex ? { ...item, rows: item.rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, percent: event.target.value } : candidate) } : item))} />
+                                  <Button type="button" variant="ghost" size="icon" onClick={() => setGroups(groups.map((item, index) => index === groupIndex ? { ...item, rows: item.rows.filter((_, inner) => inner !== rowIndex) } : item))}><Trash2Icon /><span className="sr-only">ลบ Artifact</span></Button>
+                                </div>
+                                <Field><FieldLabel htmlFor={`artifact-note-${groupIndex}-${rowIndex}`}>Note (optional)</FieldLabel><Textarea id={`artifact-note-${groupIndex}-${rowIndex}`} value={row.note ?? ""} onChange={(event) => setGroups(groups.map((item, index) => index === groupIndex ? { ...item, rows: item.rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, note: event.target.value } : candidate) } : item))} /></Field>
+                              </div>
+                            </div>
+                          )}
+                        </SortableArtifactRow>
+                      ))}
+                    </div>
+                  </SortableContext>
+                </DndContext>
+                <Button type="button" variant="outline" onClick={() => setGroups(groups.map((item, index) => index === groupIndex ? { ...item, rows: [...item.rows, { clientId: createClientId("artifact"), firstArtifactKey: "", secondArtifactKey: null, percent: "100", note: "" }] } : item))}><PlusIcon data-icon="inline-start" />เพิ่มชุด Artifact</Button>
+              </CardContent>
+            </Card>
+          ))}
         </CardContent>
       </Card>
       <Card>
         <CardHeader><CardTitle>Recommended Stats</CardTitle><CardDescription>เลือกค่าจากรายการแทนปุ่ม และเลือก Main Stat ได้สูงสุด 2 ค่าต่อชิ้น</CardDescription></CardHeader>
         <CardContent>
           <FieldGroup>
+            <div className="grid gap-4 sm:grid-cols-3">
               <StatSelect label="Sands / นาฬิกา" options={mainStatOptions.sands} value={sands} max={2} onChange={setSands} />
               <StatSelect label="Goblet / ถ้วย" options={mainStatOptions.goblet} value={goblet} max={2} onChange={setGoblet} />
               <StatSelect label="Circlet / หมวก" options={mainStatOptions.circlet} value={circlet} max={2} onChange={setCirclet} />
+            </div>
             <StatSelect label="Substats" options={substatOptions} value={substats} max={substatOptions.length} onChange={setSubstats} />
             <FieldSet>
               <FieldLegend>Target Stats</FieldLegend>
-              <div className="flex flex-col gap-3">
-                {targets.map((target, index) => (
-                  <div key={`${target.stat}-${index}`} className="grid gap-3 sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
-                    <Select value={target.stat} onValueChange={(stat) => { if (stat) setTargets(targets.map((item, itemIndex) => itemIndex === index ? { ...item, stat } : item)); }}>
-                      <SelectTrigger className="w-full" aria-label={`Target stat ${index + 1}`}><StatIcons values={[target.stat]} /><SelectValue /></SelectTrigger>
-                      <SelectContent><SelectGroup>{targetStatOptions.map((option) => <SelectItem key={option} value={option} disabled={targets.some((item, itemIndex) => itemIndex !== index && item.stat === option)}><StatIcons values={[option]} />{option}</SelectItem>)}</SelectGroup></SelectContent>
-                    </Select>
-                    <Input value={target.value} placeholder="Value or text" aria-label={`${target.stat} value`} onChange={(event) => setTargets(targets.map((item, itemIndex) => itemIndex === index ? { ...item, value: event.target.value } : item))} />
+              <div className="grid gap-5 sm:grid-cols-2">
+                {[targetStatOptions.slice(0, 4), targetStatOptions.slice(4)].map((column) => (
+                  <div key={column[0]} className="flex flex-col gap-3">
+                    {column.map((stat) => {
+                      const target = targets.find((item) => item.stat === stat);
+                      return (
+                        <Field key={stat} orientation="horizontal" className="items-center">
+                          <FieldLabel className="flex w-32 shrink-0 items-center gap-2"><StatIcons values={[stat]} />{stat}</FieldLabel>
+                          <Input value={target?.value ?? ""} placeholder="Value or text" aria-label={`${stat} value`} onChange={(event) => setTargets(targets.map((item) => item.stat === stat ? { ...item, value: event.target.value } : item))} />
+                        </Field>
+                      );
+                    })}
                   </div>
                 ))}
               </div>
-              <FieldDescription>เลือกสเตตัสจากรายการ และกรอกค่าเป็นตัวเลข เปอร์เซ็นต์ หรือข้อความ เช่น -%</FieldDescription>
+              <FieldDescription>กรอกเฉพาะค่าเป็นตัวเลข เปอร์เซ็นต์ หรือข้อความ เช่น -%</FieldDescription>
             </FieldSet>
             <FieldSet>
               <FieldLegend>Talent Priority</FieldLegend>
               <DndContext sensors={talentSensors} collisionDetection={closestCenter} onDragEnd={handleTalentDragEnd}>
                 <SortableContext items={orderedTalents.map((talent) => talent.type)} strategy={verticalListSortingStrategy}>
-                  <div className="flex flex-col gap-3">
+                  <div className="flex items-start gap-3 overflow-x-auto pb-1">
                     {orderedTalents.map((talent, index) => {
                       const catalogTalent = catalogTalents.find((item) => item.type === talent.type);
                       return (
-                        <div key={talent.type} className="flex flex-col gap-2">
+                        <div key={talent.type} className="flex shrink-0 items-center gap-3">
                           <SortableTalentCard
                             talent={talent}
                             index={index}
@@ -418,7 +510,7 @@ function ArtifactEditor({ guide, artifacts, initial, catalogTalents }: EditorBas
                                 if (relation) setTalentRelation(talent.type, relation);
                               }}
                               aria-label={`ตัวเปรียบเทียบหลัง ${catalogTalent?.name ?? talent.type}`}
-                              className="self-center"
+                              className="shrink-0"
                             >
                               <ToggleGroupItem className={SELECTED_TOGGLE_CLASS} value="gt" aria-label="มากกว่า">&gt;</ToggleGroupItem>
                               <ToggleGroupItem className={SELECTED_TOGGLE_CLASS} value="gte" aria-label="มากกว่าหรือเท่ากับ">≥</ToggleGroupItem>
@@ -437,7 +529,7 @@ function ArtifactEditor({ guide, artifacts, initial, catalogTalents }: EditorBas
             </Field>
           </FieldGroup>
         </CardContent>
-        <CardFooter className="justify-end"><AutosaveStatus state={autosave} /></CardFooter>
+        <CardFooter className="justify-end"><AutosaveStatus state={autosave} issues={validation.success ? [] : validation.error.issues.map((issue) => issue.path.length ? `${issue.path.join(".")}: ${issue.message}` : issue.message)} /></CardFooter>
       </Card>
     </div>
   );
@@ -452,27 +544,29 @@ function ConstellationEditor({ guide, initial, catalogConstellations }: EditorBa
     });
   });
   const value = { rows: rows.filter((row) => row.description.trim() && row.cumulativePercent !== "").map((row) => ({ level: row.level, detail: row.description, cumulativePercent: Number(row.cumulativePercent), isGreat: row.isGreat })) };
-  const autosave = useAutosave({ value, valid: constellationSectionSchema.safeParse({ ...value, expectedVersion: guide.version }).success, initialVersion: guide.version, persist: (next, expectedVersion) => saveConstellationSection(guide.id, { ...next, expectedVersion }) });
+  const validation = constellationSectionSchema.safeParse({ ...value, expectedVersion: guide.version });
+  const autosave = useAutosave({ value, valid: validation.success, initialVersion: guide.version, persist: (next, expectedVersion) => saveConstellationSection(guide.id, { ...next, expectedVersion }) });
   return (
     <Card>
       <CardHeader><CardTitle>Constellations</CardTitle><CardDescription>ชื่อ รายละเอียด และไอคอนมาจาก Lunaris อัตโนมัติ กรอกเฉพาะเปอร์เซ็นต์เทียบกับ C0 = 100%</CardDescription></CardHeader>
       <CardContent className="grid gap-4 lg:grid-cols-2">
         {rows.map((row, index) => <Card key={row.level} size="sm"><CardHeader>{row.iconUrl ? <Image src={row.iconUrl} alt="" width={48} height={48} className="rounded-lg bg-muted" /> : null}<CardTitle>C{row.level} · {row.name}</CardTitle><CardDescription>{row.description}</CardDescription></CardHeader><CardContent className="flex items-end gap-3"><Field className="min-w-0 flex-1"><FieldLabel>Cumulative %</FieldLabel><Input type="number" min="0" step="0.01" value={row.cumulativePercent} onChange={(event) => setRows(rows.map((item, itemIndex) => itemIndex === index ? { ...item, cumulativePercent: event.target.value } : item))} /></Field><Toggle variant="outline" pressed={row.isGreat} onPressedChange={(isGreat) => setRows(rows.map((item, itemIndex) => itemIndex === index ? { ...item, isGreat } : item))} aria-label={`Mark C${row.level} percentage as great`} className={cn(SELECTED_TOGGLE_CLASS, "data-[state=on]:text-warning")}><SparklesIcon data-icon="inline-start" />Great %</Toggle></CardContent></Card>)}
       </CardContent>
-      <CardFooter className="justify-end"><AutosaveStatus state={autosave} /></CardFooter>
+      <CardFooter className="justify-end"><AutosaveStatus state={autosave} issues={validation.success ? [] : validation.error.issues.map((issue) => issue.path.length ? `${issue.path.join(".")}: ${issue.message}` : issue.message)} /></CardFooter>
     </Card>
   );
 }
 
 function TeamEditor({ guide, characters, weapons, artifacts, initial }: EditorBase) {
-  const fallbackMembers = characters.slice(0, 4).map((character) => ({ characterKey: character.key, weaponKey: null, artifactKey: null, constellation: 0, refinement: 1, damage: "0" }));
+  const fallbackMembers = Array.from({ length: 4 }, () => ({ characterKey: "", weaponKey: null, artifactKey: null, constellation: 0, refinement: 1, damage: "0" }));
   const teamSensors = useSensors(
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
   );
   const [teams, setTeams] = useState(initial.teams.map(({ id, ...team }) => ({ clientId: id, ...team })));
   const value = { teams: teams.map((team) => ({ title: team.title, rotationSeconds: Number(team.rotationSeconds), combo: team.combo, members: team.members.map((member) => ({ ...member, damage: Number(member.damage) })) })) };
-  const autosave = useAutosave({ value, valid: teamSectionSchema.safeParse({ ...value, expectedVersion: guide.version }).success, initialVersion: guide.version, persist: (next, expectedVersion) => saveTeamSection(guide.id, { ...next, expectedVersion }) });
+  const validation = teamSectionSchema.safeParse({ ...value, expectedVersion: guide.version });
+  const autosave = useAutosave({ value, valid: validation.success, initialVersion: guide.version, persist: (next, expectedVersion) => saveTeamSection(guide.id, { ...next, expectedVersion }) });
   const handleTeamDragEnd = ({ active, over }: DragEndEvent) => {
     if (!over || active.id === over.id) return;
     setTeams((current) => {
@@ -493,8 +587,8 @@ function TeamEditor({ guide, characters, weapons, artifacts, initial }: EditorBa
             const dps = total / (Number(team.rotationSeconds) || 1);
             return (
               <SortableTeamItem key={team.clientId} id={team.clientId}>{(dragHandle) => <>
-                <div className="flex items-center gap-2">
-                  <AccordionTrigger className="min-w-0 flex-1 py-4 hover:no-underline">
+                <div className="flex w-full items-center gap-2">
+                  <AccordionTrigger headerClassName="min-w-0 flex-1" className="min-w-0 flex-1 py-4 hover:no-underline">
                     <span className="flex min-w-0 flex-col gap-1">
                       <span className="font-semibold">{team.title || `Team ${teamIndex + 1}`}</span>
                       <span className="text-xs font-normal text-muted-foreground">Damage {total.toLocaleString()} • DPS {dps.toFixed(0)}</span>
@@ -537,8 +631,7 @@ function TeamEditor({ guide, characters, weapons, artifacts, initial }: EditorBa
                               <FieldGroup>
                                 <Field><FieldLabel className="flex items-center gap-2"><UserRoundIcon />ตัวละคร</FieldLabel><CatalogPicker items={characters} value={member.characterKey} placeholder="ค้นหาชื่อตัวละคร…" onChange={(characterKey) => setTeams(teams.map((item, index) => index === teamIndex ? { ...item, members: item.members.map((candidate, inner) => inner === memberIndex ? { ...candidate, characterKey, weaponKey: null, artifactKey: null, constellation: 0, refinement: 1 } : candidate) } : item))} /></Field>
                                 <Field><FieldLabel className="flex items-center gap-2"><ChartNoAxesCombinedIcon />Damage</FieldLabel><Input type="number" min="0" step="0.01" value={member.damage} onChange={(event) => setTeams(teams.map((item, index) => index === teamIndex ? { ...item, members: item.members.map((candidate, inner) => inner === memberIndex ? { ...candidate, damage: event.target.value } : candidate) } : item))} /></Field>
-                                <Field><FieldLabel className="flex items-center gap-2"><SwordIcon />Weapon</FieldLabel><CatalogPicker items={compatibleWeapons} value={member.weaponKey ?? ""} placeholder="ค้นหาอาวุธที่รองรับ…" rarityBackground onChange={(weaponKey) => setTeams(teams.map((item, index) => index === teamIndex ? { ...item, members: item.members.map((candidate, inner) => inner === memberIndex ? { ...candidate, weaponKey: weaponKey || null } : candidate) } : item))} /></Field>
-                                <Field><FieldLabel className="flex items-center gap-2"><RefreshCcwIcon />Refinement</FieldLabel><ToggleGroup className="flex-wrap justify-start" variant="outline" value={[`R${member.refinement}`]} onValueChange={(selected) => { const refinement = selected[0]; if (refinement) setTeams(teams.map((item, index) => index === teamIndex ? { ...item, members: item.members.map((candidate, inner) => inner === memberIndex ? { ...candidate, refinement: Number(refinement.slice(1)) } : candidate) } : item)); }}>{[1, 2, 3, 4, 5].map((refinement) => <ToggleGroupItem className={SELECTED_TOGGLE_CLASS} key={refinement} value={`R${refinement}`}>R{refinement}</ToggleGroupItem>)}</ToggleGroup></Field>
+                                <div className="grid grid-cols-[minmax(0,1fr)_auto] items-end gap-4"><Field className="min-w-0"><FieldLabel className="flex items-center gap-2"><SwordIcon />Weapon</FieldLabel><CatalogPicker items={compatibleWeapons} value={member.weaponKey ?? ""} placeholder="ค้นหาอาวุธที่รองรับ…" rarityBackground onChange={(weaponKey) => setTeams(teams.map((item, index) => index === teamIndex ? { ...item, members: item.members.map((candidate, inner) => inner === memberIndex ? { ...candidate, weaponKey: weaponKey || null } : candidate) } : item))} /></Field><Field className="shrink-0"><FieldLabel className="flex items-center gap-2"><RefreshCcwIcon />Refinement</FieldLabel><ToggleGroup className="flex-nowrap" variant="outline" value={[`R${member.refinement}`]} onValueChange={(selected) => { const refinement = selected[0]; if (refinement) setTeams(teams.map((item, index) => index === teamIndex ? { ...item, members: item.members.map((candidate, inner) => inner === memberIndex ? { ...candidate, refinement: Number(refinement.slice(1)) } : candidate) } : item)); }}>{[1, 2, 3, 4, 5].map((refinement) => <ToggleGroupItem className={SELECTED_TOGGLE_CLASS} key={refinement} value={`R${refinement}`}>R{refinement}</ToggleGroupItem>)}</ToggleGroup></Field></div>
                                 <Field><FieldLabel className="flex items-center gap-2"><GemIcon />Artifact set</FieldLabel><CatalogPicker items={artifacts} value={member.artifactKey ?? ""} placeholder="ค้นหาชุด Artifact…" rarityBackground onChange={(artifactKey) => setTeams(teams.map((item, index) => index === teamIndex ? { ...item, members: item.members.map((candidate, inner) => inner === memberIndex ? { ...candidate, artifactKey: artifactKey || null } : candidate) } : item))} /></Field>
                                 <Field><FieldLabel className="flex items-center gap-2"><SparklesIcon />Constellation</FieldLabel><ToggleGroup className="flex-wrap justify-start" variant="outline" value={[`C${member.constellation}`]} onValueChange={(selected) => { const constellation = selected[0]; if (constellation) setTeams(teams.map((item, index) => index === teamIndex ? { ...item, members: item.members.map((candidate, inner) => inner === memberIndex ? { ...candidate, constellation: Number(constellation.slice(1)) } : candidate) } : item)); }}>{[0, 1, 2, 3, 4, 5, 6].map((constellation) => <ToggleGroupItem className={SELECTED_TOGGLE_CLASS} key={constellation} value={`C${constellation}`}>C{constellation}</ToggleGroupItem>)}</ToggleGroup></Field>
                               </FieldGroup>
@@ -558,7 +651,7 @@ function TeamEditor({ guide, characters, weapons, artifacts, initial }: EditorBa
           </SortableContext>
         </DndContext>
       </CardContent>
-      <CardFooter className="flex-wrap justify-between gap-3"><Button variant="outline" disabled={characters.length < 4} onClick={() => setTeams([...teams, { clientId: crypto.randomUUID(), title: "", rotationSeconds: "20", combo: "", members: fallbackMembers }])}><PlusIcon data-icon="inline-start" />เพิ่ม Team</Button><AutosaveStatus state={autosave} /></CardFooter>
+      <CardFooter className="flex-wrap justify-between gap-3"><Button variant="outline" disabled={characters.length < 4} onClick={() => setTeams([...teams, { clientId: createClientId("team"), title: "", rotationSeconds: "20", combo: "", members: fallbackMembers }])}><PlusIcon data-icon="inline-start" />เพิ่ม Team</Button><AutosaveStatus state={autosave} issues={validation.success ? [] : validation.error.issues.map((issue) => issue.path.length ? `${issue.path.join(".")}: ${issue.message}` : issue.message)} /></CardFooter>
     </Card>
   );
 }
@@ -566,14 +659,15 @@ function TeamEditor({ guide, characters, weapons, artifacts, initial }: EditorBa
 function ExtraEditor({ guide, initial }: EditorBase) {
   const [sections, setSections] = useState(initial.extras);
   const value = { sections: sections.map((section) => ({ title: section.title, rows: section.rows.map((row) => ({ mediaId: row.mediaId, ratio: row.ratio, heading: row.heading, body: row.body, percent: row.percent === null ? null : Number(row.percent) })) })) };
-  const autosave = useAutosave({ value, valid: extraSectionSchema.safeParse({ ...value, expectedVersion: guide.version }).success, initialVersion: guide.version, persist: (next, expectedVersion) => saveExtraSectionList(guide.id, { ...next, expectedVersion }) });
+  const validation = extraSectionSchema.safeParse({ ...value, expectedVersion: guide.version });
+  const autosave = useAutosave({ value, valid: validation.success, initialVersion: guide.version, persist: (next, expectedVersion) => saveExtraSectionList(guide.id, { ...next, expectedVersion }) });
   return (
     <Card>
       <CardHeader><CardTitle>Extra sections</CardTitle><CardDescription>เพิ่มส่วนเสริมแบบภาพ หัวข้อ ข้อความสั้น และเปอร์เซ็นต์ ระบบจะบันทึกอัตโนมัติ</CardDescription></CardHeader>
       <CardContent className="flex flex-col gap-5">
         {sections.map((section, sectionIndex) => <Card key={sectionIndex} size="sm"><CardHeader><CardTitle><Input value={section.title} aria-label="ชื่อ Extra section" onChange={(event) => setSections(sections.map((item, index) => index === sectionIndex ? { ...item, title: event.target.value } : item))} /></CardTitle><CardAction><Button variant="ghost" size="icon-sm" onClick={() => setSections(sections.filter((_, index) => index !== sectionIndex))}><Trash2Icon /><span className="sr-only">ลบส่วน</span></Button></CardAction></CardHeader><CardContent className="flex flex-col gap-4">{section.rows.map((row, rowIndex) => <Card key={rowIndex} size="sm"><CardHeader><CardTitle>{row.heading || `แถว ${rowIndex + 1}`}</CardTitle><CardAction><Button variant="ghost" size="icon-sm" onClick={() => setSections(sections.map((item, index) => index === sectionIndex ? { ...item, rows: item.rows.filter((_, inner) => inner !== rowIndex) } : item))}><Trash2Icon /><span className="sr-only">ลบแถว</span></Button></CardAction></CardHeader><CardContent><FieldGroup>{row.imageUrl ? <div className={cn("relative overflow-hidden rounded-lg border", row.ratio === "1:1" ? "aspect-square" : "aspect-video")}><Image src={row.imageUrl} alt={row.heading} fill className="object-cover" /><Button type="button" variant="destructive" size="icon-sm" className="absolute top-2 right-2" onClick={() => setSections(sections.map((item, index) => index === sectionIndex ? { ...item, rows: item.rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, mediaId: null, imageUrl: null } : candidate) } : item))} aria-label="ลบภาพ"><XIcon /></Button></div> : null}<MediaUploader onReady={(asset) => setSections(sections.map((item, index) => index === sectionIndex ? { ...item, rows: item.rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, mediaId: asset.id, imageUrl: asset.url } : candidate) } : item))} /><Field><FieldLabel>อัตราส่วนภาพ</FieldLabel><ToggleGroup variant="outline" value={[row.ratio]} onValueChange={(selected) => { const ratio = selected[0]; if (ratio === "1:1" || ratio === "16:9") setSections(sections.map((item, index) => index === sectionIndex ? { ...item, rows: item.rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, ratio } : candidate) } : item)); }} className="flex-wrap justify-start"><ToggleGroupItem className={SELECTED_TOGGLE_CLASS} value="1:1">1:1</ToggleGroupItem><ToggleGroupItem className={SELECTED_TOGGLE_CLASS} value="16:9">16:9</ToggleGroupItem></ToggleGroup></Field><Field><FieldLabel>หัวข้อ</FieldLabel><Input value={row.heading} onChange={(event) => setSections(sections.map((item, index) => index === sectionIndex ? { ...item, rows: item.rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, heading: event.target.value } : candidate) } : item))} /></Field><Field><FieldLabel>ข้อความ</FieldLabel><Textarea value={row.body} onChange={(event) => setSections(sections.map((item, index) => index === sectionIndex ? { ...item, rows: item.rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, body: event.target.value } : candidate) } : item))} /></Field><Field><FieldLabel>Percent (optional)</FieldLabel><Input type="number" min="0" step="0.01" value={row.percent ?? ""} onChange={(event) => setSections(sections.map((item, index) => index === sectionIndex ? { ...item, rows: item.rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, percent: event.target.value || null } : candidate) } : item))} /></Field></FieldGroup></CardContent></Card>)}<Button variant="outline" onClick={() => setSections(sections.map((item, index) => index === sectionIndex ? { ...item, rows: [...item.rows, { mediaId: null, imageUrl: null, ratio: "16:9", heading: "", body: "", percent: null }] } : item))}><PlusIcon data-icon="inline-start" />เพิ่มแถว</Button></CardContent></Card>)}
       </CardContent>
-      <CardFooter className="flex-wrap justify-between gap-3"><Button variant="outline" onClick={() => setSections([...sections, { title: "Extra", rows: [] }])}><PlusIcon data-icon="inline-start" />เพิ่ม Extra section</Button><AutosaveStatus state={autosave} /></CardFooter>
+      <CardFooter className="flex-wrap justify-between gap-3"><Button variant="outline" onClick={() => setSections([...sections, { title: "Extra", rows: [] }])}><PlusIcon data-icon="inline-start" />เพิ่ม Extra section</Button><AutosaveStatus state={autosave} issues={validation.success ? [] : validation.error.issues.map((issue) => issue.path.length ? `${issue.path.join(".")}: ${issue.message}` : issue.message)} /></CardFooter>
     </Card>
   );
 }

components/page-progress.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import { Suspense, useEffect, useRef, useState } from "react"
+import { usePathname, useSearchParams } from "next/navigation"
+import { Progress } from "@/components/ui/progress"
+
+function PageProgressContent() {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const [progress, setProgress] = useState(0)
+  const [isVisible, setIsVisible] = useState(false)
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
+
+  // Start progress on click
+  useEffect(() => {
+    const handleClick = (e: MouseEvent) => {
+      const target = (e.target as HTMLElement).closest("a")
+      if (!target) return
+      
+      const href = target.getAttribute("href")
+      if (!href) return
+      
+      // Check if it's an internal link
+      const isInternal = href.startsWith("/") || href.startsWith(window.location.origin)
+      const isSamePage = href === window.location.pathname || href.startsWith(window.location.pathname + "#") || href === window.location.href
+      
+      // Only show progress for actual page transitions
+      if (isInternal && !isSamePage && target.getAttribute("target") !== "_blank") {
+        setIsVisible(true)
+        setProgress(15)
+        
+        // Simulate progress while waiting for route change
+        // Uses a decaying approach so it slows down as it gets closer to 95%
+        const interval = setInterval(() => {
+          setProgress((prev) => {
+            if (prev >= 95) {
+              clearInterval(interval)
+              return prev
+            }
+            return prev + (95 - prev) * 0.1
+          })
+        }, 100)
+        intervalRef.current = interval
+      }
+    }
+
+    document.addEventListener("click", handleClick)
+    return () => document.removeEventListener("click", handleClick)
+  }, [])
+
+  // Finish progress on route change
+  useEffect(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current)
+      intervalRef.current = null
+    }
+    
+    if (isVisible) {
+      const finishTimeout = setTimeout(() => setProgress(100), 0)
+      const timeout = setTimeout(() => {
+        setIsVisible(false)
+        setTimeout(() => setProgress(0), 300) // Reset after hiding
+      }, 400)
+      return () => {
+        clearTimeout(finishTimeout)
+        clearTimeout(timeout)
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname, searchParams])
+
+  if (!isVisible && progress === 0) return null
+
+  return (
+    <div
+      className="fixed top-0 left-0 w-full z-50 pointer-events-none transition-opacity duration-300"
+      style={{ opacity: isVisible ? 1 : 0 }}
+    >
+      <Progress value={progress} className="h-0.75 w-full rounded-none bg-transparent" />
+    </div>
+  )
+}
+
+export function PageProgress() {
+  return (
+    <Suspense fallback={null}>
+      <PageProgressContent />
+    </Suspense>
+  )
+}

components/public/structured-directory.tsx

@@ -49,8 +49,8 @@ export function StructuredDirectory({ guides }: { guides: GuideCard[] }) {
         <InputGroupInput
           value={query}
           onChange={(event) => setQuery(event.target.value)}
-          placeholder="ค้นหา Guide…"
-          aria-label="ค้นหา Guide"
+          placeholder="ค้นหาไกด์…"
+          aria-label="ค้นหาไกด์"
         />
       </InputGroup>
       {filtered.length ? (
@@ -65,7 +65,7 @@ export function StructuredDirectory({ guides }: { guides: GuideCard[] }) {
                 <div className="relative aspect-square bg-muted">
                   <Image
                     src={guide.coverUrl}
-                    alt={`Guide ${guide.name}`}
+                    alt={`ไกด์ ${guide.name}`}
                     fill
                     className="object-cover"
                   />
@@ -83,7 +83,7 @@ export function StructuredDirectory({ guides }: { guides: GuideCard[] }) {
       ) : (
         <Empty className="border">
           <EmptyHeader>
-            <EmptyTitle>ไม่พบ Guide</EmptyTitle>
+            <EmptyTitle>ไม่พบไกด์</EmptyTitle>
             <EmptyDescription>ลองค้นหาด้วยชื่อตัวละครอื่น</EmptyDescription>
           </EmptyHeader>
         </Empty>

components/public/structured-guide.tsx

@@ -48,6 +48,14 @@ export function publicSections(guide: PublicGuide) {
   return guide.sections.filter((section) => hasSection(guide, section.slug));
 }
 
+function publicSectionTitle(slug: string, fallback: string): string {
+  if (slug === "weapon") return "อาวุธ";
+  if (slug === "artifact") return "อาร์ติแฟกต์และค่าสถานะ";
+  if (slug === "constellations") return "กลุ่มดาว";
+  if (slug === "team") return "คำนวณทีม";
+  return fallback;
+}
+
 export function StructuredGuideShell({
   guide,
   section,
@@ -135,14 +143,14 @@ function GuideOverview({
       <div className="relative mx-auto aspect-square w-full max-w-3xl overflow-hidden rounded-xl border bg-muted">
         <Image
           src={guide.coverUrl}
-          alt={`Guide ${guide.name}`}
+          alt={`ไกด์ ${guide.name}`}
           fill
           priority
           className="object-cover"
         />
       </div>
       <div className="mx-auto flex max-w-3xl flex-col gap-3 text-center">
-        <p className="text-sm font-medium text-primary">Build Overview</p>
+        <p className="text-sm font-medium text-primary">ภาพรวมแนวทาง</p>
         <h1 className="font-heading text-4xl font-semibold">{guide.name}</h1>
         <p className="text-lg leading-8 text-muted-foreground">
           {guide.overview}
@@ -155,7 +163,7 @@ function GuideOverview({
               <Card className="h-full">
                 <CardHeader>
                   {navigationIconPath(item.slug) ? <Image src={navigationIconPath(item.slug)!} alt="" width={40} height={40} className="size-10 object-contain" /> : null}
-                  <CardTitle>{item.title}</CardTitle>
+                  <CardTitle>{publicSectionTitle(item.slug, item.title)}</CardTitle>
                   <CardDescription>เปิดดูคำแนะนำฉบับเต็ม</CardDescription>
                   <CardAction>
                     <ArrowUpRightIcon aria-hidden="true" className="size-5 text-primary" />
@@ -206,14 +214,14 @@ function WeaponSection({ guide }: { guide: PublicGuide }) {
     <section className="flex flex-col gap-6">
       <header className="flex flex-col items-center gap-3 text-center">
         <p className="text-sm font-medium text-primary">อาวุธที่แนะนำ</p>
-        <h1 className="whitespace-nowrap font-heading text-4xl font-semibold">Weapons</h1>
+        <h1 className="whitespace-nowrap font-heading text-4xl font-semibold">อาวุธ</h1>
         <a
           href={`/api/guides/${guide.id}/weapons/image`}
           download
           className={buttonVariants({ variant: "outline", size: "sm" })}
         >
           <DownloadIcon data-icon="inline-start" />
-          Export image
+          ส่งออกภาพ
         </a>
       </header>
       <div className="grid gap-3">
@@ -286,7 +294,7 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
           อาร์ติแฟกต์และสเตตัสที่แนะนำ
         </p>
         <h1 className="font-heading text-4xl font-semibold">
-          Artifacts & Stats
+          อาร์ติแฟกต์และค่าสถานะ
         </h1>
         <a
           href={`/api/guides/${guide.id}/artifacts/image`}
@@ -294,7 +302,7 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
           className={buttonVariants({ variant: "outline", size: "sm" })}
         >
           <DownloadIcon data-icon="inline-start" />
-          Export image
+          ส่งออกภาพ
         </a>
       </header>
       <div className="grid gap-5 lg:grid-cols-[1.2fr_1fr]">
@@ -303,7 +311,7 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
           {guide.artifactGroups.map((group) => (
             <Card key={group.id}>
               <CardHeader>
-                <CardTitle>{group.name}</CardTitle>
+                <CardTitle>{group.name === "Late Game" ? "เลทเกม" : group.name === "Early Game" ? "ช่วงต้นเกม" : group.name}</CardTitle>
               </CardHeader>
               <CardContent className="flex flex-col gap-3">
                 {group.rows.map((row, index) => (
@@ -359,18 +367,18 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
           <div className="flex flex-col gap-5">
             <Card className="overflow-hidden pt-0">
               <CardHeader className="bg-primary py-4 text-center text-primary-foreground">
-                <CardTitle className="text-2xl">Artifact Stats</CardTitle>
+                <CardTitle className="text-2xl">ออฟหลักที่แนะนำ</CardTitle>
               </CardHeader>
               <CardContent className="grid grid-cols-3 p-0">
-                <ArtifactStat iconSrc="/icon/Icon_Sands_of_Eon.webp" label="Sands" values={profile.sands} />
-                <ArtifactStat iconSrc="/icon/Icon_Goblet_of_Eonothem.webp" label="Goblet" values={profile.goblet} />
-                <ArtifactStat iconSrc="/icon/Icon_Circlet_of_Logos.webp" label="Circlet" values={profile.circlet} />
+                <ArtifactStat iconSrc="/icon/Icon_Sands_of_Eon.webp" label="นาฬิกา" values={profile.sands} />
+                <ArtifactStat iconSrc="/icon/Icon_Goblet_of_Eonothem.webp" label="ถ้วย" values={profile.goblet} />
+                <ArtifactStat iconSrc="/icon/Icon_Circlet_of_Logos.webp" label="หัว" values={profile.circlet} />
               </CardContent>
             </Card>
             {profile.substats.length ? (
               <Card>
                 <CardContent className="flex flex-col items-center gap-2 py-5 text-center text-sm">
-                  <strong>Stat Priority:</strong>
+                  <strong>ลำดับค่าสถานะ:</strong>
                   <div className="flex flex-col items-center gap-1">
                     {profile.substats.map((stat, index) => (
                       <span key={`${stat}-${index}`} className={statPriorityColorClass(index)}>
@@ -386,7 +394,7 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
               <CardContent className="flex flex-col gap-5">
               {profile.targets.length ? (
                 <div>
-                  <p className="mb-2 text-sm font-medium">Target Stats</p>
+                  <p className="mb-2 text-sm font-medium">ค่าสถานะเป้าหมาย</p>
                   <div className="flex flex-col gap-1">
                   {profile.targets.map((target, index) => (
                     <div
@@ -398,7 +406,7 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
                     >
                       <span className="flex min-w-0 items-center gap-2">
                         {targetStatIconName(target.stat) ? <Image src={`/icon/stats/${targetStatIconName(target.stat)}.webp`} alt="" width={28} height={28} className="size-7 shrink-0 object-contain brightness-0 invert" /> : null}
-                        <span>{normalizeTargetStat(target.stat) ?? target.stat}</span>
+                        <span>{statLabel(normalizeTargetStat(target.stat) ?? target.stat)}</span>
                       </span>
                       <strong className="shrink-0">{target.value}</strong>
                     </div>
@@ -420,7 +428,7 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
                               <div className="relative size-14 overflow-hidden rounded-xl border bg-muted sm:size-20">
                                 {catalogTalent?.iconUrl ? <Image src={catalogTalent.iconUrl} alt={talentName} fill className="object-contain" /> : <span className="grid size-full place-items-center font-semibold">{talent.type}</span>}
                               </div>
-                              <Badge variant="secondary">{talent.level ? `Lv.${talent.level}+` : "—"}</Badge>
+                              <Badge variant="secondary">{talent.level ? `เลเวล ${talent.level}+` : "—"}</Badge>
                               <p className="text-xs font-medium sm:text-sm">{talentName}</p>
                               <p className="text-[11px] text-muted-foreground sm:text-xs">{talentTypeLabel(talent.type)}</p>
                             </div>
@@ -453,7 +461,29 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
 }
 
 function statLabel(value: string): string {
-  return value === "EM" ? "Elemental Mastery" : value === "ER" ? "Energy Recharge" : value;
+  const labels: Record<string, string> = {
+    HP: "พลังชีวิต",
+    ATK: "พลังโจมตี",
+    DEF: "พลังป้องกัน",
+    EM: "ความชำนาญธาตุ",
+    ER: "ฟื้นฟูพลังงาน",
+    "CRIT RATE": "อัตราคริ",
+    "CRIT DAMAGE": "ความแรงคริ",
+    "ATK%": "พลังโจมตี%",
+    "HP%": "พลังชีวิต%",
+    "DEF%": "พลังป้องกัน%",
+    "CRIT Rate%/CRIT DMG%": "อัตราคริ/ความแรงคริ",
+    "Pyro DMG%": "ความเสียหายธาตุไฟ%",
+    "Hydro DMG%": "ความเสียหายธาตุน้ำ%",
+    "Cryo DMG%": "ความเสียหายธาตุน้ำแข็ง%",
+    "Electro DMG%": "ความเสียหายธาตุไฟฟ้า%",
+    "Anemo DMG%": "ความเสียหายธาตุลม%",
+    "Geo DMG%": "ความเสียหายธาตุดิน%",
+    "Dendro DMG%": "ความเสียหายธาตุไม้%",
+    "Physical DMG%": "ความเสียหายกายภาพ%",
+    "Healing Bonus%": "โบนัสการรักษา%",
+  };
+  return labels[value] ?? value;
 }
 
 function ArtifactStat({ iconSrc, label, values }: { iconSrc: string; label: string; values: string[] }) {
@@ -480,7 +510,7 @@ function ConstellationSection({ guide }: { guide: PublicGuide }) {
     <section className="flex flex-col gap-6">
       <header className="text-center">
         <p className="text-sm font-medium text-primary">กลุ่มดาว</p>
-        <h1 className="font-heading text-4xl font-semibold">Constellations</h1>
+        <h1 className="font-heading text-4xl font-semibold">กลุ่มดาว</h1>
       </header>
       <div className="grid gap-4 md:grid-cols-2">
         {guide.constellations.map((row) => (
@@ -519,7 +549,7 @@ function TeamSection({ guide }: { guide: PublicGuide }) {
     <section className="flex flex-col gap-6">
       <header className="text-center">
         <p className="text-sm font-medium text-primary">คำนวณความเสียหาย</p>
-        <h1 className="font-heading text-4xl font-semibold">Team Calc</h1>
+        <h1 className="font-heading text-4xl font-semibold">คำนวณทีม</h1>
       </header>
       <TeamSearch teams={guide.teams} />
     </section>
@@ -530,7 +560,7 @@ function ExtraSection({ extra }: { extra: PublicGuide["extras"][number] }) {
   return (
     <section className="flex flex-col gap-6">
       <header className="text-center">
-        <p className="text-sm font-medium text-primary">Extra Guide</p>
+        <p className="text-sm font-medium text-primary">คู่มือเสริม</p>
         <h1 className="font-heading text-4xl font-semibold">{extra.title}</h1>
       </header>
       <div className="grid gap-5 md:grid-cols-2">

components/public/team-search.tsx

@@ -38,9 +38,9 @@ export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) {
       <div className="relative">
         <SearchIcon aria-hidden="true" className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
         <Input
-          aria-label="Search teams, characters, weapons, or artifacts"
+          aria-label="ค้นหาทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์"
           className="pl-9"
-          placeholder="Search teams, characters, weapons, or artifacts"
+          placeholder="ค้นหาทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์"
           value={query}
           onValueChange={setQuery}
         />
@@ -57,7 +57,7 @@ export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) {
               <Card key={team.id}>
                 <CardHeader>
                   <CardTitle>{team.title}</CardTitle>
-                  <CardDescription>{seconds}s rotation</CardDescription>
+                  <CardDescription>ระยะเวลาโรเทชั่น {seconds} วิ</CardDescription>
                   <CardAction>
                     <a
                       href={`/api/teams/${team.id}/image`}
@@ -68,7 +68,7 @@ export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) {
                       })}
                     >
                       <DownloadIcon data-icon="inline-start" />
-                      Export image
+                      ส่งออกภาพ
                     </a>
                   </CardAction>
                 </CardHeader>
@@ -84,6 +84,9 @@ export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) {
                               fill
                               className="object-contain"
                             />
+                            <Kbd className="absolute top-0 left-0 bg-transparent text-white">
+                              C{member.constellation}
+                            </Kbd>
                           </div>
                           <div className="col-span-1 row-span-2 flex min-w-0 flex-col gap-2">
                             {member.weapon ? (
@@ -99,7 +102,7 @@ export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) {
                                   fill
                                   className="object-contain p-1"
                                 />
-                                <Kbd className="absolute top-0 left-0 bg-transparent text-black">
+                                <Kbd className="absolute top-0 left-0 bg-transparent text-white">
                                   R{member.refinement}
                                 </Kbd>
                               </div>
@@ -126,7 +129,7 @@ export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) {
                           </div>
                         </div>
                         <p className="mt-2 truncate text-sm font-medium">
-                          C{member.constellation} {member.character.name}
+                          {member.character.name}
                         </p>
                         <p className="text-sm font-semibold">
                           {Number(member.damage).toLocaleString(undefined, {
@@ -146,12 +149,12 @@ export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) {
                   <div className="flex items-end justify-between">
                     <div>
                       <p className="text-sm text-muted-foreground">
-                        Total damage
+                        ดาเมจรวม
                       </p>
                       <p className="font-semibold">{total.toLocaleString()}</p>
                     </div>
                     <div className="text-right">
-                      <p className="text-sm text-muted-foreground">Total DPS</p>
+                      <p className="text-sm text-muted-foreground">DPS</p>
                       <p className="text-3xl font-semibold text-primary">
                         {seconds > 0
                           ? (total / seconds).toLocaleString(undefined, {
@@ -172,7 +175,7 @@ export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) {
       ) : (
         <Card>
           <CardContent className="py-8 text-center text-sm text-muted-foreground">
-            No teams match your search.
+            ไม่พบทีมที่ตรงกับคำค้นหา
           </CardContent>
         </Card>
       )}

components/ui/accordion.tsx

@@ -25,11 +25,12 @@ function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
 
 function AccordionTrigger({
   className,
+  headerClassName,
   children,
   ...props
-}: AccordionPrimitive.Trigger.Props) {
+}: AccordionPrimitive.Trigger.Props & { headerClassName?: string }) {
   return (
-    <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Header className={cn("flex", headerClassName)}>
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(

components/ui/progress.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+  className,
+  children,
+  value,
+  ...props
+}: ProgressPrimitive.Root.Props) {
+  return (
+    <ProgressPrimitive.Root
+      value={value}
+      data-slot="progress"
+      className={cn("flex flex-wrap gap-3", className)}
+      {...props}
+    >
+      {children}
+      <ProgressTrack>
+        <ProgressIndicator />
+      </ProgressTrack>
+    </ProgressPrimitive.Root>
+  )
+}
+
+function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
+  return (
+    <ProgressPrimitive.Track
+      className={cn(
+        "relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted",
+        className
+      )}
+      data-slot="progress-track"
+      {...props}
+    />
+  )
+}
+
+function ProgressIndicator({
+  className,
+  ...props
+}: ProgressPrimitive.Indicator.Props) {
+  return (
+    <ProgressPrimitive.Indicator
+      data-slot="progress-indicator"
+      className={cn("h-full bg-primary transition-all", className)}
+      {...props}
+    />
+  )
+}
+
+function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
+  return (
+    <ProgressPrimitive.Label
+      className={cn("text-sm font-medium", className)}
+      data-slot="progress-label"
+      {...props}
+    />
+  )
+}
+
+function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
+  return (
+    <ProgressPrimitive.Value
+      className={cn(
+        "ml-auto text-sm text-muted-foreground tabular-nums",
+        className
+      )}
+      data-slot="progress-value"
+      {...props}
+    />
+  )
+}
+
+export {
+  Progress,
+  ProgressTrack,
+  ProgressIndicator,
+  ProgressLabel,
+  ProgressValue,
+}

lib/guides/schemas.ts

@@ -66,7 +66,7 @@ export const artifactSectionSchema = z.strictObject({
   targets: z.array(z.strictObject({
     stat: z.enum(targetStatOptions),
     value: z.string().trim().min(1).max(80),
-  })).max(20),
+  })).max(targetStatOptions.length),
   talents: z.array(z.strictObject({
     type: z.enum(["NA", "E", "Q"]),
     priority: z.number().int().min(1).max(3),

lib/guides/stats.ts

@@ -42,6 +42,15 @@ export function targetStatIconName(value: string): string | null {
       : stat.toLowerCase();
 }
 
+export function recommendedStatIconName(value: string): string | null {
+  if (value === "CRIT Rate%/CRIT DMG%") return "critrate";
+  if (value === "Healing Bonus%") return "healing-bonus";
+  if (value.endsWith(" DMG%")) return "elemental-bonus";
+
+  const base = value.replace(/%$/, "").toLowerCase();
+  return ["hp", "atk", "def", "em", "er"].includes(base) ? base : null;
+}
+
 export function statPriorityColorClass(index: number): string {
   return index === 0
     ? "text-tier-gold"