diff --git a/components/admin/delete-confirmation-dialog.tsx b/components/admin/delete-confirmation-dialog.tsx
index 7addc12..f1cb8df 100644
--- a/components/admin/delete-confirmation-dialog.tsx
+++ b/components/admin/delete-confirmation-dialog.tsx
@@ -37,7 +37,9 @@ export function DeleteConfirmationDialog({
 }: DeleteConfirmationDialogProps) {
   return (
     <AlertDialog open={open} onOpenChange={onOpenChange}>
-      {trigger ? <AlertDialogTrigger render={trigger}>{children}</AlertDialogTrigger> : null}
+      {trigger ? (
+        <AlertDialogTrigger render={trigger}>{children}</AlertDialogTrigger>
+      ) : null}
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>{title}</AlertDialogTitle>
@@ -45,7 +47,9 @@ export function DeleteConfirmationDialog({
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel>ยกเลิก</AlertDialogCancel>
-          <AlertDialogAction variant="destructive" onClick={onConfirm}>{confirmLabel}</AlertDialogAction>
+          <AlertDialogAction variant="destructive" onClick={onConfirm}>
+            {confirmLabel}
+          </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
diff --git a/components/admin/editor-inspector.tsx b/components/admin/editor-inspector.tsx
index 31752bf..72750eb 100644
--- a/components/admin/editor-inspector.tsx
+++ b/components/admin/editor-inspector.tsx
@@ -104,32 +104,48 @@ export function EditorInspector({
     <Tabs defaultValue="inspector" className="flex h-full min-h-0 flex-col">
       <div className="border-b p-3">
         <TabsList className="w-full">
-          <TabsTrigger value="inspector" className="flex-1">Inspector</TabsTrigger>
-          <TabsTrigger value="preview" className="flex-1">Live Preview</TabsTrigger>
+          <TabsTrigger value="inspector" className="flex-1">
+            Inspector
+          </TabsTrigger>
+          <TabsTrigger value="preview" className="flex-1">
+            Live Preview
+          </TabsTrigger>
         </TabsList>
       </div>
       <TabsContent value="inspector" className="min-h-0 overflow-y-auto p-4">
         {selected ? (
           <FieldGroup>
             <div>
-              <Badge variant="outline">{blockLabels[selected.type] ?? selected.type}</Badge>
-              <p className="mt-2 font-mono text-xs text-muted-foreground">{selected.id}</p>
+              <Badge variant="outline">
+                {blockLabels[selected.type] ?? selected.type}
+              </Badge>
+              <p className="mt-2 font-mono text-xs text-muted-foreground">
+                {selected.id}
+              </p>
             </div>
             <MediaUploader onReady={onMediaReady} />
             <Field>
               <FieldLabel htmlFor="block-width">ความกว้าง</FieldLabel>
               <Select
-                value={String((selected.responsiveLayout as Record<string, unknown> | undefined)?.width ?? "content")}
+                value={String(
+                  (
+                    selected.responsiveLayout as
+                      | Record<string, unknown>
+                      | undefined
+                  )?.width ?? "content",
+                )}
                 onValueChange={(width) =>
                   patchSelected({
                     responsiveLayout: {
-                      ...(selected.responsiveLayout as object ?? {}),
+                      ...((selected.responsiveLayout as object) ?? {}),
                       width,
                     },
                   })
                 }
               >
-                <SelectTrigger id="block-width" className="w-full"><SelectValue /></SelectTrigger>
+                <SelectTrigger id="block-width" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="content">คอลัมน์อ่านง่าย</SelectItem>
                   <SelectItem value="wide">พื้นที่กว้าง</SelectItem>
@@ -140,14 +156,22 @@ export function EditorInspector({
             <Field orientation="horizontal">
               <div className="flex-1">
                 <FieldTitle>ซ่อนบนมือถือ</FieldTitle>
-                <FieldDescription>เนื้อหานี้จะเริ่มแสดงตั้งแต่หน้าจอแท็บเล็ต</FieldDescription>
+                <FieldDescription>
+                  เนื้อหานี้จะเริ่มแสดงตั้งแต่หน้าจอแท็บเล็ต
+                </FieldDescription>
               </div>
               <Switch
-                checked={Boolean((selected.responsiveLayout as Record<string, unknown> | undefined)?.hideOnMobile)}
+                checked={Boolean(
+                  (
+                    selected.responsiveLayout as
+                      | Record<string, unknown>
+                      | undefined
+                  )?.hideOnMobile,
+                )}
                 onCheckedChange={(hideOnMobile) =>
                   patchSelected({
                     responsiveLayout: {
-                      ...(selected.responsiveLayout as object ?? {}),
+                      ...((selected.responsiveLayout as object) ?? {}),
                       hideOnMobile,
                     },
                   })
@@ -175,7 +199,10 @@ export function EditorInspector({
           </div>
         )}
       </TabsContent>
-      <TabsContent value="preview" className="min-h-0 overflow-y-auto bg-muted/30 p-4">
+      <TabsContent
+        value="preview"
+        className="min-h-0 overflow-y-auto bg-muted/30 p-4"
+      >
         <div className="origin-top scale-[0.92] rounded-xl bg-background p-4 shadow-sm ring-1 ring-border">
           <PublicBlockRenderer snapshot={preview} />
         </div>
@@ -200,12 +227,18 @@ function AdvancedBlockSettings({
       <FieldLabel htmlFor="data-source">แหล่งข้อมูล</FieldLabel>
       <Select
         value={String(config.dataSourceId)}
-        onValueChange={(dataSourceId) => onConfigChange({ ...config, dataSourceId })}
+        onValueChange={(dataSourceId) =>
+          onConfigChange({ ...config, dataSourceId })
+        }
       >
-        <SelectTrigger id="data-source" className="w-full"><SelectValue /></SelectTrigger>
+        <SelectTrigger id="data-source" className="w-full">
+          <SelectValue />
+        </SelectTrigger>
         <SelectContent>
           {Object.values(sources).map((source) => (
-            <SelectItem key={source.id} value={source.id}>{source.name} · v{source.version}</SelectItem>
+            <SelectItem key={source.id} value={source.id}>
+              {source.name} · v{source.version}
+            </SelectItem>
           ))}
         </SelectContent>
       </Select>
@@ -226,7 +259,11 @@ function DataSourceEditor({
 }) {
   const [rowId, setRowId] = useState<string | null>(null);
   const evaluated = useMemo(() => {
-    try { return evaluateDataSource(source); } catch { return null; }
+    try {
+      return evaluateDataSource(source);
+    } catch {
+      return null;
+    }
   }, [source]);
   const selectedRow = source.rows.find((row) => row.id === rowId);
   const formulaFields = source.fields.filter((field) => field.formula);
@@ -246,10 +283,13 @@ function DataSourceEditor({
       <div className="flex items-center justify-between gap-2">
         <div>
           <FieldTitle>{source.name}</FieldTitle>
-          <FieldDescription>แหล่งข้อมูลทั่วโลก · เวอร์ชัน {source.version}</FieldDescription>
+          <FieldDescription>
+            แหล่งข้อมูลทั่วโลก · เวอร์ชัน {source.version}
+          </FieldDescription>
         </div>
         <Button size="sm" variant="outline" onClick={onSave} disabled={saving}>
-          <SaveIcon />{saving ? "กำลังบันทึก" : "บันทึกข้อมูล"}
+          <SaveIcon />
+          {saving ? "กำลังบันทึก" : "บันทึกข้อมูล"}
         </Button>
       </div>
 
@@ -257,9 +297,15 @@ function DataSourceEditor({
         const cell = previewRow?.cells[field.key];
         return (
           <Field key={field.key} data-invalid={Boolean(cell?.error)}>
-            <FieldLabel htmlFor={`formula-${field.key}`}>{field.label}</FieldLabel>
+            <FieldLabel htmlFor={`formula-${field.key}`}>
+              {field.label}
+            </FieldLabel>
             <InputGroup>
-              <InputGroupAddon><InputGroupText className="font-mono text-primary">fx</InputGroupText></InputGroupAddon>
+              <InputGroupAddon>
+                <InputGroupText className="font-mono text-primary">
+                  fx
+                </InputGroupText>
+              </InputGroupAddon>
               <InputGroupInput
                 id={`formula-${field.key}`}
                 className="font-mono"
@@ -267,20 +313,67 @@ function DataSourceEditor({
                 list={`fields-${source.id}`}
                 onChange={(event) => updateField(field.key, event.target.value)}
               />
-              <InputGroupAddon align="inline-end"><FunctionSquareIcon aria-hidden="true" /></InputGroupAddon>
+              <InputGroupAddon align="inline-end">
+                <FunctionSquareIcon aria-hidden="true" />
+              </InputGroupAddon>
             </InputGroup>
             <datalist id={`fields-${source.id}`}>
-              {source.fields.filter((candidate) => candidate.key !== field.key).map((candidate) => <option key={candidate.key} value={candidate.key}>{candidate.label}</option>)}
+              {source.fields
+                .filter((candidate) => candidate.key !== field.key)
+                .map((candidate) => (
+                  <option key={candidate.key} value={candidate.key}>
+                    {candidate.label}
+                  </option>
+                ))}
             </datalist>
-            {cell?.error ? <FieldError>สูตรนี้ยังคำนวณไม่ได้: ตรวจสอบชื่อฟิลด์และตัวหาร</FieldError> : <FieldDescription>ตัวอย่างผลลัพธ์: <span className="font-mono text-foreground">{cell?.display ?? "-"}</span></FieldDescription>}
+            {cell?.error ? (
+              <FieldError>
+                สูตรนี้ยังคำนวณไม่ได้: ตรวจสอบชื่อฟิลด์และตัวหาร
+              </FieldError>
+            ) : (
+              <FieldDescription>
+                ตัวอย่างผลลัพธ์:{" "}
+                <span className="font-mono text-foreground">
+                  {cell?.display ?? "-"}
+                </span>
+              </FieldDescription>
+            )}
           </Field>
         );
       })}
 
       <div className="overflow-hidden rounded-lg border">
         <Table>
-          <TableHeader><TableRow>{source.fields.slice(0, 3).map((field) => <TableHead key={field.key}>{field.label}</TableHead>)}<TableHead className="w-12" /></TableRow></TableHeader>
-          <TableBody>{source.rows.slice(0, 10).map((row) => <TableRow key={row.id}>{source.fields.slice(0, 3).map((field) => <TableCell key={field.key} className="max-w-28 truncate">{row.values[field.key] ?? previewRow?.cells[field.key]?.display ?? "-"}</TableCell>)}<TableCell><Button size="xs" variant="ghost" onClick={() => setRowId(row.id)}>แก้ไข</Button></TableCell></TableRow>)}</TableBody>
+          <TableHeader>
+            <TableRow>
+              {source.fields.slice(0, 3).map((field) => (
+                <TableHead key={field.key}>{field.label}</TableHead>
+              ))}
+              <TableHead className="w-12" />
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {source.rows.slice(0, 10).map((row) => (
+              <TableRow key={row.id}>
+                {source.fields.slice(0, 3).map((field) => (
+                  <TableCell key={field.key} className="max-w-28 truncate">
+                    {row.values[field.key] ??
+                      previewRow?.cells[field.key]?.display ??
+                      "-"}
+                  </TableCell>
+                ))}
+                <TableCell>
+                  <Button
+                    size="xs"
+                    variant="ghost"
+                    onClick={() => setRowId(row.id)}
+                  >
+                    แก้ไข
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
         </Table>
       </div>
       <Button
@@ -289,37 +382,74 @@ function DataSourceEditor({
         className="w-full"
         onClick={() => {
           const id = crypto.randomUUID();
-          onChange({ ...source, rows: [...source.rows, { id, values: Object.fromEntries(source.fields.map((field) => [field.key, null])) }] });
+          onChange({
+            ...source,
+            rows: [
+              ...source.rows,
+              {
+                id,
+                values: Object.fromEntries(
+                  source.fields.map((field) => [field.key, null]),
+                ),
+              },
+            ],
+          });
           setRowId(id);
         }}
-      ><PlusIcon />เพิ่มแถว</Button>
+      >
+        <PlusIcon />
+        เพิ่มแถว
+      </Button>
 
-      <Dialog open={Boolean(selectedRow)} onOpenChange={(open) => { if (!open) setRowId(null); }}>
+      <Dialog
+        open={Boolean(selectedRow)}
+        onOpenChange={(open) => {
+          if (!open) setRowId(null);
+        }}
+      >
         <DialogContent>
           <DialogHeader>
             <DialogTitle>แก้ไขแถวข้อมูล</DialogTitle>
-            <DialogDescription>กรอกค่าต้นทาง ระบบจะคำนวณฟิลด์สูตรให้อัตโนมัติ</DialogDescription>
+            <DialogDescription>
+              กรอกค่าต้นทาง ระบบจะคำนวณฟิลด์สูตรให้อัตโนมัติ
+            </DialogDescription>
           </DialogHeader>
           {selectedRow ? (
             <FieldGroup className="max-h-[60vh] overflow-y-auto pr-1">
               {source.fields.map((field) => (
                 <Field key={field.key}>
-                  <FieldLabel htmlFor={`row-${selectedRow.id}-${field.key}`}>{field.label}</FieldLabel>
+                  <FieldLabel htmlFor={`row-${selectedRow.id}-${field.key}`}>
+                    {field.label}
+                  </FieldLabel>
                   <Input
                     id={`row-${selectedRow.id}-${field.key}`}
                     value={selectedRow.values[field.key] ?? ""}
                     disabled={Boolean(field.formula)}
                     inputMode={field.type === "number" ? "decimal" : undefined}
-                    onChange={(event) => onChange({
-                      ...source,
-                      rows: source.rows.map((row) => row.id === selectedRow.id ? { ...row, values: { ...row.values, [field.key]: event.target.value || null } } : row),
-                    })}
+                    onChange={(event) =>
+                      onChange({
+                        ...source,
+                        rows: source.rows.map((row) =>
+                          row.id === selectedRow.id
+                            ? {
+                                ...row,
+                                values: {
+                                  ...row.values,
+                                  [field.key]: event.target.value || null,
+                                },
+                              }
+                            : row,
+                        ),
+                      })
+                    }
                   />
                 </Field>
               ))}
             </FieldGroup>
           ) : null}
-          <DialogFooter><Button onClick={() => setRowId(null)}>เสร็จสิ้น</Button></DialogFooter>
+          <DialogFooter>
+            <Button onClick={() => setRowId(null)}>เสร็จสิ้น</Button>
+          </DialogFooter>
         </DialogContent>
       </Dialog>
     </div>
diff --git a/components/admin/guide-overview-form.tsx b/components/admin/guide-overview-form.tsx
index af11921..4dd142e 100644
--- a/components/admin/guide-overview-form.tsx
+++ b/components/admin/guide-overview-form.tsx
@@ -6,19 +6,49 @@ import { useState } from "react";
 import { saveGuideOverview } from "@/app/admin/actions";
 import { AutosaveStatus } from "@/components/admin/autosave-status";
 import { MediaUploader } from "@/components/admin/media-uploader";
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
-import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { useAutosave } from "@/hooks/use-autosave";
 import { adminDraftKey } from "@/lib/editor/local-draft";
 import { parseYouTubeUrl } from "@/lib/guides/youtube";
 
-export function GuideOverviewForm({ guide }: { guide: { id: string; version: number; overview: string; youtubeUrl: string | null; coverMediaId: string; coverUrl: string; name: string } }) {
+export function GuideOverviewForm({
+  guide,
+}: {
+  guide: {
+    id: string;
+    version: number;
+    overview: string;
+    youtubeUrl: string | null;
+    coverMediaId: string;
+    coverUrl: string;
+    name: string;
+  };
+}) {
   const [overview, setOverview] = useState(guide.overview);
   const [youtubeUrl, setYoutubeUrl] = useState(guide.youtubeUrl ?? "");
-  const [cover, setCover] = useState({ id: guide.coverMediaId, url: guide.coverUrl });
-  const invalidYoutubeUrl = Boolean(youtubeUrl.trim() && !parseYouTubeUrl(youtubeUrl.trim()));
+  const [cover, setCover] = useState({
+    id: guide.coverMediaId,
+    url: guide.coverUrl,
+  });
+  const invalidYoutubeUrl = Boolean(
+    youtubeUrl.trim() && !parseYouTubeUrl(youtubeUrl.trim()),
+  );
   const value = { coverMediaId: cover.id, overview, youtubeUrl };
   const incompleteIssues = [
     !cover.id ? "กรุณาอัปโหลด Guide Image" : null,
@@ -30,19 +60,34 @@ export function GuideOverviewForm({ guide }: { guide: { id: string; version: num
     value,
     valid: Boolean(cover.id && overview.trim() && !invalidYoutubeUrl),
     initialVersion: guide.version,
-    persist: (next, expectedVersion) => saveGuideOverview(guide.id, { ...next, expectedVersion }),
+    persist: (next, expectedVersion) =>
+      saveGuideOverview(guide.id, { ...next, expectedVersion }),
     storageKey: adminDraftKey(guide.id, "overview"),
     localDraft,
     parseLocalDraft: (candidate) => {
       if (!candidate || typeof candidate !== "object") return null;
       const draft = candidate as Record<string, unknown>;
-      if (typeof draft.overview !== "string" || !draft.cover || typeof draft.cover !== "object") return null;
+      if (
+        typeof draft.overview !== "string" ||
+        !draft.cover ||
+        typeof draft.cover !== "object"
+      )
+        return null;
       const draftCover = draft.cover as Record<string, unknown>;
-      if (typeof draftCover.id !== "string" || typeof draftCover.url !== "string") return null;
-      if (draft.youtubeUrl !== undefined && typeof draft.youtubeUrl !== "string") return null;
+      if (
+        typeof draftCover.id !== "string" ||
+        typeof draftCover.url !== "string"
+      )
+        return null;
+      if (
+        draft.youtubeUrl !== undefined &&
+        typeof draft.youtubeUrl !== "string"
+      )
+        return null;
       return {
         overview: draft.overview,
-        youtubeUrl: typeof draft.youtubeUrl === "string" ? draft.youtubeUrl : "",
+        youtubeUrl:
+          typeof draft.youtubeUrl === "string" ? draft.youtubeUrl : "",
         cover: { id: draftCover.id, url: draftCover.url },
       };
     },
@@ -52,5 +97,68 @@ export function GuideOverviewForm({ guide }: { guide: { id: string; version: num
       setCover(draft.cover);
     },
   });
-  return <Card><CardHeader><CardTitle>Overview</CardTitle><CardDescription>ภาพ ข้อความ และวิดีโอนี้แสดงบนหน้าแรกของ Guide</CardDescription></CardHeader><CardContent><FieldGroup><Field><FieldLabel>Guide Image</FieldLabel><div className="relative mx-auto aspect-square w-full 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><Field data-invalid={invalidYoutubeUrl}><FieldLabel htmlFor="guide-youtube-url">YouTube video link</FieldLabel><Input id="guide-youtube-url" type="url" inputMode="url" value={youtubeUrl} maxLength={2_048} placeholder="https://www.youtube.com/watch?v=..." aria-invalid={invalidYoutubeUrl} onChange={(event) => setYoutubeUrl(event.target.value)} /><FieldDescription>ไม่บังคับ รองรับลิงก์ YouTube, youtu.be, Shorts และ Live</FieldDescription>{invalidYoutubeUrl ? <FieldError>กรุณาใส่ลิงก์วิดีโอ YouTube ที่ถูกต้อง</FieldError> : null}</Field></FieldGroup></CardContent><CardFooter className="justify-end"><AutosaveStatus state={autosave.state} issues={incompleteIssues} onSave={autosave.saveNow} /></CardFooter></Card>;
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Overview</CardTitle>
+        <CardDescription>
+          ภาพ ข้อความ และวิดีโอนี้แสดงบนหน้าแรกของ Guide
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <FieldGroup>
+          <Field>
+            <FieldLabel>Guide Image</FieldLabel>
+            <div className="relative mx-auto aspect-square w-full 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>
+          <Field data-invalid={invalidYoutubeUrl}>
+            <FieldLabel htmlFor="guide-youtube-url">
+              YouTube video link
+            </FieldLabel>
+            <Input
+              id="guide-youtube-url"
+              type="url"
+              inputMode="url"
+              value={youtubeUrl}
+              maxLength={2_048}
+              placeholder="https://www.youtube.com/watch?v=..."
+              aria-invalid={invalidYoutubeUrl}
+              onChange={(event) => setYoutubeUrl(event.target.value)}
+            />
+            <FieldDescription>
+              ไม่บังคับ รองรับลิงก์ YouTube, youtu.be, Shorts และ Live
+            </FieldDescription>
+            {invalidYoutubeUrl ? (
+              <FieldError>กรุณาใส่ลิงก์วิดีโอ YouTube ที่ถูกต้อง</FieldError>
+            ) : null}
+          </Field>
+        </FieldGroup>
+      </CardContent>
+      <CardFooter className="justify-end">
+        <AutosaveStatus
+          state={autosave.state}
+          issues={incompleteIssues}
+          onSave={autosave.saveNow}
+        />
+      </CardFooter>
+    </Card>
+  );
 }
diff --git a/components/admin/guide-section-editor.tsx b/components/admin/guide-section-editor.tsx
index 103ce6a..0a853cb 100644
--- a/components/admin/guide-section-editor.tsx
+++ b/components/admin/guide-section-editor.tsx
@@ -47,21 +47,47 @@ import {
 import { AutosaveStatus } from "@/components/admin/autosave-status";
 import { DeleteConfirmationDialog } from "@/components/admin/delete-confirmation-dialog";
 import { MediaUploader } from "@/components/admin/media-uploader";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import {
-  Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
 } from "@/components/ui/card";
 import {
-  Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList,
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
 } from "@/components/ui/combobox";
 import {
-  Field, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSet,
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
 } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
 import {
-  Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 import { Toggle } from "@/components/ui/toggle";
@@ -93,31 +119,107 @@ import {
   type TalentPriority,
   type TalentRelation,
 } from "@/lib/guides/talents";
-import { finalizePercentInput, normalizePercentInput } from "@/lib/guides/percent-input";
+import {
+  finalizePercentInput,
+  normalizePercentInput,
+} from "@/lib/guides/percent-input";
 import { formatGuideValidationIssues } from "@/lib/guides/validation-messages";
 import { cn } from "@/lib/utils";
 
-type CatalogItem = { key: string; name: string; imageUrl: string; rarity?: number | null; weaponType?: string | null };
-type Guide = { id: string; characterKey: string; version: number; name: string };
-type WeaponValue = { id: string; weaponKey: string; refinement: number; overallPercent: string | null; personalPercent: string | null; note: string | null; weapon: CatalogItem };
-type ArtifactValue = { id: string; name: string; rows: Array<{ firstArtifactKey: string; secondArtifactKey: string | null; percent: string; note: string | null }> };
-type ArtifactProfile = { sands: string[]; goblet: string[]; circlet: string[]; substats: string[]; targets: Array<{ stat: string; value: string }>; talents: TalentPriority[]; note: string | null } | null;
-type ConstellationValue = { level: number; detail: string; cumulativePercent: string; isGreat: boolean };
-type ConstellationGroupValue = { id: string; note: string | null; rows: ConstellationValue[] };
-type CatalogConstellation = { level: number; name: string; description: string; iconUrl: string | null };
-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; secondArtifactKey: string | null; constellation: number; refinement: number; damage: string }> };
+type CatalogItem = {
+  key: string;
+  name: string;
+  imageUrl: string;
+  rarity?: number | null;
+  weaponType?: string | null;
+};
+type Guide = {
+  id: string;
+  characterKey: string;
+  version: number;
+  name: string;
+};
+type WeaponValue = {
+  id: string;
+  weaponKey: string;
+  refinement: number;
+  overallPercent: string | null;
+  personalPercent: string | null;
+  note: string | null;
+  weapon: CatalogItem;
+};
+type ArtifactValue = {
+  id: string;
+  name: string;
+  rows: Array<{
+    firstArtifactKey: string;
+    secondArtifactKey: string | null;
+    percent: string;
+    note: string | null;
+  }>;
+};
+type ArtifactProfile = {
+  sands: string[];
+  goblet: string[];
+  circlet: string[];
+  substats: string[];
+  targets: Array<{ stat: string; value: string }>;
+  talents: TalentPriority[];
+  note: string | null;
+} | null;
+type ConstellationValue = {
+  level: number;
+  detail: string;
+  cumulativePercent: string;
+  isGreat: boolean;
+};
+type ConstellationGroupValue = {
+  id: string;
+  note: string | null;
+  rows: ConstellationValue[];
+};
+type CatalogConstellation = {
+  level: number;
+  name: string;
+  description: string;
+  iconUrl: string | null;
+};
+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;
+    secondArtifactKey: 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()}`;
+  if (typeof browserCrypto?.randomUUID === "function")
+    return `${prefix}-${browserCrypto.randomUUID()}`;
   clientIdCounter += 1;
   return `${prefix}-${Date.now()}-${clientIdCounter}`;
 }
 
-function parseEditorDraft<Draft>(value: unknown, arrayKeys: string[], stringKeys: string[] = []): Draft | null {
+function parseEditorDraft<Draft>(
+  value: unknown,
+  arrayKeys: string[],
+  stringKeys: string[] = [],
+): Draft | null {
   if (!value || typeof value !== "object") return null;
   const record = value as Record<string, unknown>;
   if (arrayKeys.some((key) => !Array.isArray(record[key]))) return null;
@@ -140,24 +242,91 @@ export interface GuideSectionEditorProps {
     artifactProfile: ArtifactProfile;
     constellationGroups: ConstellationGroupValue[];
     teams: TeamValue[];
-    extras: Array<{ title: string; rows: Array<{ mediaId: string | null; ratio: "1:1" | "16:9"; heading: string; body: string; percent: string | null; imageUrl: string | null }> }>;
+    extras: Array<{
+      title: string;
+      rows: Array<{
+        mediaId: string | null;
+        ratio: "1:1" | "16:9";
+        heading: string;
+        body: string;
+        percent: string | null;
+        imageUrl: string | null;
+      }>;
+    }>;
   };
 }
 
-const SELECTED_TOGGLE_CLASS = "aria-pressed:border-primary aria-pressed:ring-2 aria-pressed:ring-primary/30";
+const SELECTED_TOGGLE_CLASS =
+  "aria-pressed:border-primary aria-pressed:ring-2 aria-pressed:ring-primary/30";
 
-function CatalogPicker({ items, value, onChange, placeholder, rarityBackground = false, showSelectedImage = false }: { items: CatalogItem[]; value: string; onChange: (value: string) => void; placeholder: string; rarityBackground?: boolean; showSelectedImage?: boolean }) {
+function CatalogPicker({
+  items,
+  value,
+  onChange,
+  placeholder,
+  rarityBackground = false,
+  showSelectedImage = false,
+}: {
+  items: CatalogItem[];
+  value: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+  rarityBackground?: boolean;
+  showSelectedImage?: boolean;
+}) {
   const selected = items.find((item) => item.key === value) ?? null;
   return (
     <div className="flex min-w-0 items-center gap-2">
-      {showSelectedImage && selected ? <div className={cn("relative size-10 shrink-0 overflow-hidden rounded-md", rarityBackground && rarityGradientClass(selected.rarity))}><Image src={selected.imageUrl} alt="" fill className="object-contain" /></div> : null}
+      {showSelectedImage && selected ? (
+        <div
+          className={cn(
+            "relative size-10 shrink-0 overflow-hidden rounded-md",
+            rarityBackground && rarityGradientClass(selected.rarity),
+          )}
+        >
+          <Image
+            src={selected.imageUrl}
+            alt=""
+            fill
+            className="object-contain"
+          />
+        </div>
+      ) : null}
       <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 />
+        <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 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><span className="whitespace-nowrap">{item.name}</span></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>
@@ -166,13 +335,47 @@ function CatalogPicker({ items, value, onChange, placeholder, rarityBackground =
   );
 }
 
-function StatSelect({ label, options, value, max, onChange }: { label: string; options: readonly string[]; value: string[]; max: number; onChange: (value: string[]) => void }) {
+function StatSelect({
+  label,
+  options,
+  value,
+  max,
+  onChange,
+}: {
+  label: string;
+  options: readonly string[];
+  value: string[];
+  max: number;
+  onChange: (value: string[]) => void;
+}) {
   return (
     <Field>
       <FieldLabel>{label}</FieldLabel>
-      <Select multiple value={value} onValueChange={(next) => { if (next.length <= max) onChange(next); }}>
-        <SelectTrigger className="w-full"><StatIcons values={value} /><SelectValue placeholder="Select recommended stats…" /></SelectTrigger>
-        <SelectContent><SelectGroup>{options.map((option) => <SelectItem key={option} value={option} disabled={value.length >= max && !value.includes(option)}><StatIcons values={[option]} />{option}</SelectItem>)}</SelectGroup></SelectContent>
+      <Select
+        multiple
+        value={value}
+        onValueChange={(next) => {
+          if (next.length <= max) onChange(next);
+        }}
+      >
+        <SelectTrigger className="w-full">
+          <StatIcons values={value} />
+          <SelectValue placeholder="Select recommended stats…" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            {options.map((option) => (
+              <SelectItem
+                key={option}
+                value={option}
+                disabled={value.length >= max && !value.includes(option)}
+              >
+                <StatIcons values={[option]} />
+                {option}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
       </Select>
       <FieldDescription>เลือกได้สูงสุด {max} ค่า</FieldDescription>
     </Field>
@@ -187,27 +390,66 @@ function StatIcons({ values }: { values: readonly string[] }) {
     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) => <StatIcon key={iconName} iconName={iconName} />)}</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" />;
+    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)} />;
+  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 }) {
+function TalentLevelPicker({
+  value,
+  onChange,
+}: {
+  value?: string;
+  onChange: (value?: string) => void;
+}) {
   const selected = talentLevelOptions.find((level) => level === value) ?? null;
   return (
-    <Combobox items={[...talentLevelOptions]} value={selected} onValueChange={(next) => onChange(next ?? undefined)}>
-      <ComboboxInput className="w-full" placeholder="เลือกระดับ 1–10" showClear />
+    <Combobox
+      items={[...talentLevelOptions]}
+      value={selected}
+      onValueChange={(next) => onChange(next ?? undefined)}
+    >
+      <ComboboxInput
+        className="w-full"
+        placeholder="เลือกระดับ 1–10"
+        showClear
+      />
       <ComboboxContent>
         <ComboboxEmpty>ไม่พบระดับ</ComboboxEmpty>
         <ComboboxList>
-          {(level) => <ComboboxItem key={level} value={level}>ระดับ {level}</ComboboxItem>}
+          {(level) => (
+            <ComboboxItem key={level} value={level}>
+              ระดับ {level}
+            </ComboboxItem>
+          )}
         </ComboboxList>
       </ComboboxContent>
     </Combobox>
@@ -223,7 +465,14 @@ function SortableTalentCard({
   catalogTalent?: CatalogTalent;
   onLevelChange: (level?: string) => void;
 }) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: talent.type });
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: talent.type });
   return (
     <div
       ref={setNodeRef}
@@ -232,12 +481,31 @@ function SortableTalentCard({
     >
       <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">{talent.type}. {catalogTalent?.name ?? talent.type}</CardTitle>
+          {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">
+            {talent.type}. {catalogTalent?.name ?? talent.type}
+          </CardTitle>
           <CardAction>
-            <Button type="button" variant="ghost" size="icon-sm" className="touch-none" {...attributes} {...listeners}>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              className="touch-none"
+              {...attributes}
+              {...listeners}
+            >
               <GripVerticalIcon />
-              <span className="sr-only">ลากเพื่อจัดลำดับ {catalogTalent?.name ?? talent.type}</span>
+              <span className="sr-only">
+                ลากเพื่อจัดลำดับ {catalogTalent?.name ?? talent.type}
+              </span>
             </Button>
           </CardAction>
         </CardHeader>
@@ -252,8 +520,21 @@ function SortableTalentCard({
   );
 }
 
-function SortableWeaponCard({ id, children }: { id: string; children: (dragHandle: ReactNode) => ReactNode }) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+function SortableWeaponCard({
+  id,
+  children,
+}: {
+  id: string;
+  children: (dragHandle: ReactNode) => ReactNode;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id });
   return (
     <div
       ref={setNodeRef}
@@ -261,7 +542,14 @@ function SortableWeaponCard({ id, children }: { id: string; children: (dragHandl
       className={cn(isDragging && "opacity-60")}
     >
       {children(
-        <Button type="button" variant="ghost" size="icon-sm" className="touch-none" {...attributes} {...listeners}>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          className="touch-none"
+          {...attributes}
+          {...listeners}
+        >
           <GripVerticalIcon />
           <span className="sr-only">ลากเพื่อจัดลำดับอาวุธ</span>
         </Button>,
@@ -270,8 +558,21 @@ 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 });
+function SortableArtifactRow({
+  id,
+  children,
+}: {
+  id: string;
+  children: (dragHandle: ReactNode) => ReactNode;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id });
   return (
     <div
       ref={setNodeRef}
@@ -279,7 +580,14 @@ function SortableArtifactRow({ id, children }: { id: string; children: (dragHand
       className={cn(isDragging && "opacity-60")}
     >
       {children(
-        <Button type="button" variant="ghost" size="icon-sm" className="touch-none" {...attributes} {...listeners}>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          className="touch-none"
+          {...attributes}
+          {...listeners}
+        >
           <GripVerticalIcon />
           <span className="sr-only">ลากเพื่อจัดลำดับ Artifact</span>
         </Button>,
@@ -288,8 +596,21 @@ function SortableArtifactRow({ id, children }: { id: string; children: (dragHand
   );
 }
 
-function SortableTeamItem({ id, children }: { id: string; children: (dragHandle: ReactNode) => ReactNode }) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+function SortableTeamItem({
+  id,
+  children,
+}: {
+  id: string;
+  children: (dragHandle: ReactNode) => ReactNode;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id });
   return (
     <AccordionItem
       ref={setNodeRef}
@@ -298,7 +619,14 @@ function SortableTeamItem({ id, children }: { id: string; children: (dragHandle:
       className={cn("rounded-xl border px-4", isDragging && "opacity-60")}
     >
       {children(
-        <Button type="button" variant="ghost" size="icon-sm" className="touch-none" {...attributes} {...listeners}>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          className="touch-none"
+          {...attributes}
+          {...listeners}
+        >
           <GripVerticalIcon />
           <span className="sr-only">ลากเพื่อจัดลำดับ Team</span>
         </Button>,
@@ -312,7 +640,9 @@ export function GuideSectionEditor(props: GuideSectionEditorProps) {
     <div className="flex flex-col gap-6">
       {props.section === "weapon" ? <WeaponEditor {...props} /> : null}
       {props.section === "artifact" ? <ArtifactEditor {...props} /> : null}
-      {props.section === "constellations" ? <ConstellationEditor {...props} /> : null}
+      {props.section === "constellations" ? (
+        <ConstellationEditor {...props} />
+      ) : null}
       {props.section === "team" ? <TeamEditor {...props} /> : null}
       {props.section === "extra" ? <ExtraEditor {...props} /> : null}
     </div>
@@ -322,26 +652,60 @@ export function GuideSectionEditor(props: GuideSectionEditorProps) {
 type EditorBase = GuideSectionEditorProps;
 
 function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
-  const characterWeaponType = characters.find((character) => character.key === guide.characterKey)?.weaponType;
-  const compatibleWeapons = weapons.filter((weapon) => supportsWeaponType(characterWeaponType, weapon.weaponType));
+  const characterWeaponType = characters.find(
+    (character) => character.key === guide.characterKey,
+  )?.weaponType;
+  const compatibleWeapons = weapons.filter((weapon) =>
+    supportsWeaponType(characterWeaponType, weapon.weaponType),
+  );
   const weaponSensors = useSensors(
     useSensor(PointerSensor),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
   );
   const [note, setNote] = useState(initial.sectionNote ?? "");
-  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 = { note: note.trim() || null, 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 validation = weaponSectionSchema.safeParse({ ...value, expectedVersion: guide.version });
+  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 = {
+    note: note.trim() || null,
+    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 validation = weaponSectionSchema.safeParse({
+    ...value,
+    expectedVersion: guide.version,
+  });
   const localDraft = { note, rows };
   const autosave = useAutosave({
     value,
     valid: validation.success,
     initialVersion: guide.version,
-    persist: (next, expectedVersion) => saveWeaponSection(guide.id, { ...next, expectedVersion }),
+    persist: (next, expectedVersion) =>
+      saveWeaponSection(guide.id, { ...next, expectedVersion }),
     storageKey: adminDraftKey(guide.id, "weapon"),
     localDraft,
-    parseLocalDraft: (candidate) => parseEditorDraft<typeof localDraft>(candidate, ["rows"], ["note"]),
-    restoreLocalDraft: (draft) => { setNote(draft.note); setRows(draft.rows); },
+    parseLocalDraft: (candidate) =>
+      parseEditorDraft<typeof localDraft>(candidate, ["rows"], ["note"]),
+    restoreLocalDraft: (draft) => {
+      setNote(draft.note);
+      setRows(draft.rows);
+    },
   });
   const handleWeaponDragEnd = ({ active, over }: DragEndEvent) => {
     if (!over || active.id === over.id) return;
@@ -353,36 +717,318 @@ function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
   };
   return (
     <Card>
-      <CardHeader><CardTitle>Weapon tier list</CardTitle><CardDescription>ลากเพื่อเรียงอาวุธจากดีที่สุดลงมา และกรอกเปอร์เซ็นต์อย่างน้อยหนึ่งช่อง ระบบจะบันทึกอัตโนมัติ</CardDescription></CardHeader>
+      <CardHeader>
+        <CardTitle>Weapon tier list</CardTitle>
+        <CardDescription>
+          ลากเพื่อเรียงอาวุธจากดีที่สุดลงมา และกรอกเปอร์เซ็นต์อย่างน้อยหนึ่งช่อง
+          ระบบจะบันทึกอัตโนมัติ
+        </CardDescription>
+      </CardHeader>
       <CardContent className="flex flex-col gap-4">
-        <Field><FieldLabel htmlFor="weapon-section-note">Header note (optional)</FieldLabel><Textarea id="weapon-section-note" value={note} onChange={(event) => setNote(event.target.value)} /></Field>
-        <DndContext sensors={weaponSensors} collisionDetection={closestCenter} onDragEnd={handleWeaponDragEnd}>
-          <SortableContext items={rows.map((row) => row.clientId)} strategy={verticalListSortingStrategy}>
+        <Field>
+          <FieldLabel htmlFor="weapon-section-note">
+            Header note (optional)
+          </FieldLabel>
+          <Textarea
+            id="weapon-section-note"
+            value={note}
+            onChange={(event) => setNote(event.target.value)}
+          />
+        </Field>
+        <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}<DeleteConfirmationDialog trigger={<Button type="button" variant="ghost" size="icon-sm" />} title={`ลบ ${selectedWeapon?.name ?? `อาวุธอันดับ ${rowIndex + 1}`}?`} description="รายการอาวุธและเปอร์เซ็นต์เปรียบเทียบจะถูกลบออกจาก Guide" onConfirm={() => setRows(rows.filter((item) => item.clientId !== row.clientId))}><Trash2Icon /><span className="sr-only">ลบอาวุธ</span></DeleteConfirmationDialog></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="text" inputMode="decimal" value={row.overallPercent} onChange={(event) => setRows(rows.map((item) => item.clientId === row.clientId ? { ...item, overallPercent: normalizePercentInput(event.target.value, item.overallPercent) } : item))} onBlur={() => setRows(rows.map((item) => item.clientId === row.clientId ? { ...item, overallPercent: finalizePercentInput(item.overallPercent) } : item))} /></Field><Field><FieldLabel>Personal %</FieldLabel><Input type="text" inputMode="decimal" value={row.personalPercent} onChange={(event) => setRows(rows.map((item) => item.clientId === row.clientId ? { ...item, personalPercent: normalizePercentInput(event.target.value, item.personalPercent) } : item))} onBlur={() => setRows(rows.map((item) => item.clientId === row.clientId ? { ...item, personalPercent: finalizePercentInput(item.personalPercent) } : 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}
+                              <DeleteConfirmationDialog
+                                trigger={
+                                  <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon-sm"
+                                  />
+                                }
+                                title={`ลบ ${selectedWeapon?.name ?? `อาวุธอันดับ ${rowIndex + 1}`}?`}
+                                description="รายการอาวุธและเปอร์เซ็นต์เปรียบเทียบจะถูกลบออกจาก Guide"
+                                onConfirm={() =>
+                                  setRows(
+                                    rows.filter(
+                                      (item) => item.clientId !== row.clientId,
+                                    ),
+                                  )
+                                }
+                              >
+                                <Trash2Icon />
+                                <span className="sr-only">ลบอาวุธ</span>
+                              </DeleteConfirmationDialog>
+                            </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="text"
+                                  inputMode="decimal"
+                                  value={row.overallPercent}
+                                  onChange={(event) =>
+                                    setRows(
+                                      rows.map((item) =>
+                                        item.clientId === row.clientId
+                                          ? {
+                                              ...item,
+                                              overallPercent:
+                                                normalizePercentInput(
+                                                  event.target.value,
+                                                  item.overallPercent,
+                                                ),
+                                            }
+                                          : item,
+                                      ),
+                                    )
+                                  }
+                                  onBlur={() =>
+                                    setRows(
+                                      rows.map((item) =>
+                                        item.clientId === row.clientId
+                                          ? {
+                                              ...item,
+                                              overallPercent:
+                                                finalizePercentInput(
+                                                  item.overallPercent,
+                                                ),
+                                            }
+                                          : item,
+                                      ),
+                                    )
+                                  }
+                                />
+                              </Field>
+                              <Field>
+                                <FieldLabel>Personal %</FieldLabel>
+                                <Input
+                                  type="text"
+                                  inputMode="decimal"
+                                  value={row.personalPercent}
+                                  onChange={(event) =>
+                                    setRows(
+                                      rows.map((item) =>
+                                        item.clientId === row.clientId
+                                          ? {
+                                              ...item,
+                                              personalPercent:
+                                                normalizePercentInput(
+                                                  event.target.value,
+                                                  item.personalPercent,
+                                                ),
+                                            }
+                                          : item,
+                                      ),
+                                    )
+                                  }
+                                  onBlur={() =>
+                                    setRows(
+                                      rows.map((item) =>
+                                        item.clientId === row.clientId
+                                          ? {
+                                              ...item,
+                                              personalPercent:
+                                                finalizePercentInput(
+                                                  item.personalPercent,
+                                                ),
+                                            }
+                                          : 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: createClientId("weapon"), weaponKey: "", refinement: 1, overallPercent: "", personalPercent: "", note: "" }])}><PlusIcon data-icon="inline-start" />เพิ่มอาวุธ</Button><AutosaveStatus state={autosave.state} issues={validation.success ? [] : formatGuideValidationIssues("weapon", validation.error.issues)} onSave={autosave.saveNow} /></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.state}
+          issues={
+            validation.success
+              ? []
+              : formatGuideValidationIssues("weapon", validation.error.issues)
+          }
+          onSave={autosave.saveNow}
+        />
+      </CardFooter>
     </Card>
   );
 }
 
-function ArtifactEditor({ guide, artifacts, initial, catalogTalents }: EditorBase) {
+function ArtifactEditor({
+  guide,
+  artifacts,
+  initial,
+  catalogTalents,
+}: EditorBase) {
   const profile = initial.artifactProfile;
   const artifactSensors = useSensors(
     useSensor(PointerSensor),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
   );
   const talentSensors = useSensors(
     useSensor(PointerSensor),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+    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, rowIndex) => ({
+          ...row,
+          clientId: `${name}-${rowIndex}`,
+        })) ?? [],
+    })),
   );
-  const [groups, setGroups] = useState(() => (["Late Game", "Early Game"] as const).map((name, index) => ({
-    name,
-    rows: initial.artifactGroups[index]?.rows.map((row, rowIndex) => ({ ...row, clientId: `${name}-${rowIndex}` })) ?? [],
-  })));
   const [sands, setSands] = useState(profile?.sands ?? []);
   const [goblet, setGoblet] = useState(profile?.goblet ?? []);
   const [circlet, setCirclet] = useState(profile?.circlet ?? []);
@@ -402,71 +1048,348 @@ function ArtifactEditor({ guide, artifacts, initial, catalogTalents }: EditorBas
   const [talents, setTalents] = useState<TalentPriority[]>(() => {
     const source: TalentPriority[] = profile?.talents.length
       ? profile.talents
-      : (["NA", "E", "Q"] as const).map((type, priority) => ({ type, priority: priority + 1 }));
-    return normalizeTalentPriorities(source.map((talent) => ({
-      ...talent,
-      level: talent.level && talentLevelOptions.includes(talent.level as (typeof talentLevelOptions)[number]) ? talent.level : undefined,
-    })));
+      : (["NA", "E", "Q"] as const).map((type, priority) => ({
+          type,
+          priority: priority + 1,
+        }));
+    return normalizeTalentPriorities(
+      source.map((talent) => ({
+        ...talent,
+        level:
+          talent.level &&
+          talentLevelOptions.includes(
+            talent.level as (typeof talentLevelOptions)[number],
+          )
+            ? talent.level
+            : undefined,
+      })),
+    );
   });
   const [note, setNote] = useState(profile?.note ?? "");
-  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 localDraft = { groups, sands, goblet, circlet, substats, targets, talents, note };
+  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 localDraft = {
+    groups,
+    sands,
+    goblet,
+    circlet,
+    substats,
+    targets,
+    talents,
+    note,
+  };
   const autosave = useAutosave({
     value,
     valid: validation.success,
     initialVersion: guide.version,
-    persist: (next, expectedVersion) => saveArtifactSection(guide.id, { ...next, expectedVersion }),
+    persist: (next, expectedVersion) =>
+      saveArtifactSection(guide.id, { ...next, expectedVersion }),
     storageKey: adminDraftKey(guide.id, "artifact"),
     localDraft,
-    parseLocalDraft: (candidate) => parseEditorDraft<typeof localDraft>(candidate, ["groups", "sands", "goblet", "circlet", "substats", "targets", "talents"], ["note"]),
-    restoreLocalDraft: (draft) => { setGroups(draft.groups); setSands(draft.sands); setGoblet(draft.goblet); setCirclet(draft.circlet); setSubstats(draft.substats); setTargets(draft.targets); setTalents(draft.talents); setNote(draft.note); },
+    parseLocalDraft: (candidate) =>
+      parseEditorDraft<typeof localDraft>(
+        candidate,
+        [
+          "groups",
+          "sands",
+          "goblet",
+          "circlet",
+          "substats",
+          "targets",
+          "talents",
+        ],
+        ["note"],
+      ),
+    restoreLocalDraft: (draft) => {
+      setGroups(draft.groups);
+      setSands(draft.sands);
+      setGoblet(draft.goblet);
+      setCirclet(draft.circlet);
+      setSubstats(draft.substats);
+      setTargets(draft.targets);
+      setTalents(draft.talents);
+      setNote(draft.note);
+    },
   });
   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));
+    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) };
-    }));
+    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"]));
+    setTalents(
+      reorderTalentPriorities(
+        orderedTalents,
+        active.id as TalentPriority["type"],
+        over.id as TalentPriority["type"],
+      ),
+    );
   };
-  const setTalentRelation = (type: TalentPriority["type"], relationToNext: TalentRelation) => {
-    setTalents(orderedTalents.map((talent) => talent.type === type ? { ...talent, relationToNext } : talent));
+  const setTalentRelation = (
+    type: TalentPriority["type"],
+    relationToNext: TalentRelation,
+  ) => {
+    setTalents(
+      orderedTalents.map((talent) =>
+        talent.type === type ? { ...talent, relationToNext } : talent,
+      ),
+    );
   };
   return (
     <div className="flex flex-col gap-6">
       <Card>
-        <CardHeader><CardTitle>Artifact tier list</CardTitle><CardDescription>จัดชุด Artifact ในกลุ่ม Late Game และ Early Game ระบบจะบันทึกอัตโนมัติ</CardDescription></CardHeader>
+        <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>
+              <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}>
+                <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}>
+                        <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")}>
+                            <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="text" inputMode="decimal" 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: normalizePercentInput(event.target.value, candidate.percent) } : candidate) } : item))} onBlur={() => setGroups(groups.map((item, index) => index === groupIndex ? { ...item, rows: item.rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, percent: finalizePercentInput(candidate.percent) } : candidate) } : item))} />
-                                  <DeleteConfirmationDialog trigger={<Button type="button" variant="ghost" size="icon" />} title={`ลบ Artifact อันดับ ${rowIndex + 1}?`} description={`รายการ Artifact ในกลุ่ม ${group.name} และเปอร์เซ็นต์เปรียบเทียบจะถูกลบออกจาก Guide`} onConfirm={() => setGroups(groups.map((item, index) => index === groupIndex ? { ...item, rows: item.rows.filter((_, inner) => inner !== rowIndex) } : item))}><Trash2Icon /><span className="sr-only">ลบ Artifact</span></DeleteConfirmationDialog>
+                                  <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="text"
+                                    inputMode="decimal"
+                                    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:
+                                                            normalizePercentInput(
+                                                              event.target
+                                                                .value,
+                                                              candidate.percent,
+                                                            ),
+                                                        }
+                                                      : candidate,
+                                                ),
+                                              }
+                                            : item,
+                                        ),
+                                      )
+                                    }
+                                    onBlur={() =>
+                                      setGroups(
+                                        groups.map((item, index) =>
+                                          index === groupIndex
+                                            ? {
+                                                ...item,
+                                                rows: item.rows.map(
+                                                  (candidate, inner) =>
+                                                    inner === rowIndex
+                                                      ? {
+                                                          ...candidate,
+                                                          percent:
+                                                            finalizePercentInput(
+                                                              candidate.percent,
+                                                            ),
+                                                        }
+                                                      : candidate,
+                                                ),
+                                              }
+                                            : item,
+                                        ),
+                                      )
+                                    }
+                                  />
+                                  <DeleteConfirmationDialog
+                                    trigger={
+                                      <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="icon"
+                                      />
+                                    }
+                                    title={`ลบ Artifact อันดับ ${rowIndex + 1}?`}
+                                    description={`รายการ Artifact ในกลุ่ม ${group.name} และเปอร์เซ็นต์เปรียบเทียบจะถูกลบออกจาก Guide`}
+                                    onConfirm={() =>
+                                      setGroups(
+                                        groups.map((item, index) =>
+                                          index === groupIndex
+                                            ? {
+                                                ...item,
+                                                rows: item.rows.filter(
+                                                  (_, inner) =>
+                                                    inner !== rowIndex,
+                                                ),
+                                              }
+                                            : item,
+                                        ),
+                                      )
+                                    }
+                                  >
+                                    <Trash2Icon />
+                                    <span className="sr-only">ลบ Artifact</span>
+                                  </DeleteConfirmationDialog>
                                 </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>
+                                <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>
                           )}
@@ -475,54 +1398,156 @@ function ArtifactEditor({ guide, artifacts, initial, catalogTalents }: EditorBas
                     </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>
+                <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 ได้สูงสุด 3 ค่าต่อชิ้น</CardDescription></CardHeader>
+        <CardHeader>
+          <CardTitle>Recommended Stats</CardTitle>
+          <CardDescription>
+            เลือกค่าจากรายการแทนปุ่ม และเลือก Main Stat ได้สูงสุด 3 ค่าต่อชิ้น
+          </CardDescription>
+        </CardHeader>
         <CardContent>
           <FieldGroup>
             <div className="grid gap-4 sm:grid-cols-3">
-              <StatSelect label="Sands / นาฬิกา" options={mainStatOptions.sands} value={sands} max={3} onChange={setSands} />
-              <StatSelect label="Goblet / ถ้วย" options={mainStatOptions.goblet} value={goblet} max={3} onChange={setGoblet} />
-              <StatSelect label="Circlet / หมวก" options={mainStatOptions.circlet} value={circlet} max={3} onChange={setCirclet} />
+              <StatSelect
+                label="Sands / นาฬิกา"
+                options={mainStatOptions.sands}
+                value={sands}
+                max={3}
+                onChange={setSands}
+              />
+              <StatSelect
+                label="Goblet / ถ้วย"
+                options={mainStatOptions.goblet}
+                value={goblet}
+                max={3}
+                onChange={setGoblet}
+              />
+              <StatSelect
+                label="Circlet / หมวก"
+                options={mainStatOptions.circlet}
+                value={circlet}
+                max={3}
+                onChange={setCirclet}
+              />
             </div>
-            <StatSelect label="Substats" options={substatOptions} value={substats} max={substatOptions.length} onChange={setSubstats} />
+            <StatSelect
+              label="Substats"
+              options={substatOptions}
+              value={substats}
+              max={substatOptions.length}
+              onChange={setSubstats}
+            />
             <FieldSet>
               <FieldLegend>Target Stats</FieldLegend>
               <div className="grid gap-5 sm:grid-cols-2">
-                {[targetStatOptions.slice(0, 4), targetStatOptions.slice(4)].map((column) => (
+                {[
+                  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
+                          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={horizontalListSortingStrategy}>
+              <DndContext
+                sensors={talentSensors}
+                collisionDetection={closestCenter}
+                onDragEnd={handleTalentDragEnd}
+              >
+                <SortableContext
+                  items={orderedTalents.map((talent) => talent.type)}
+                  strategy={horizontalListSortingStrategy}
+                >
                   <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);
+                      const catalogTalent = catalogTalents.find(
+                        (item) => item.type === talent.type,
+                      );
                       return (
-                        <div key={talent.type} className="flex shrink-0 items-center gap-3">
+                        <div
+                          key={talent.type}
+                          className="flex shrink-0 items-center gap-3"
+                        >
                           <SortableTalentCard
                             talent={talent}
                             catalogTalent={catalogTalent}
-                            onLevelChange={(level) => setTalents(orderedTalents.map((item) => item.type === talent.type ? { ...item, level } : item))}
+                            onLevelChange={(level) =>
+                              setTalents(
+                                orderedTalents.map((item) =>
+                                  item.type === talent.type
+                                    ? { ...item, level }
+                                    : item,
+                                ),
+                              )
+                            }
                           />
                           {index < orderedTalents.length - 1 ? (
                             <ToggleGroup
@@ -530,15 +1555,36 @@ function ArtifactEditor({ guide, artifacts, initial, catalogTalents }: EditorBas
                               spacing={0}
                               value={[talent.relationToNext ?? "gt"]}
                               onValueChange={(selected) => {
-                                const relation = selected[0] as TalentRelation | undefined;
-                                if (relation) setTalentRelation(talent.type, relation);
+                                const relation = selected[0] as
+                                  | TalentRelation
+                                  | undefined;
+                                if (relation)
+                                  setTalentRelation(talent.type, relation);
                               }}
                               aria-label={`ตัวเปรียบเทียบหลัง ${catalogTalent?.name ?? talent.type}`}
                               className="shrink-0"
                             >
-                              <ToggleGroupItem className={SELECTED_TOGGLE_CLASS} value="gt" aria-label="มากกว่า">&gt;</ToggleGroupItem>
-                              <ToggleGroupItem className={SELECTED_TOGGLE_CLASS} value="gte" aria-label="มากกว่าหรือเท่ากับ">≥</ToggleGroupItem>
-                              <ToggleGroupItem className={SELECTED_TOGGLE_CLASS} value="eq" aria-label="เท่ากับ">=</ToggleGroupItem>
+                              <ToggleGroupItem
+                                className={SELECTED_TOGGLE_CLASS}
+                                value="gt"
+                                aria-label="มากกว่า"
+                              >
+                                &gt;
+                              </ToggleGroupItem>
+                              <ToggleGroupItem
+                                className={SELECTED_TOGGLE_CLASS}
+                                value="gte"
+                                aria-label="มากกว่าหรือเท่ากับ"
+                              >
+                                ≥
+                              </ToggleGroupItem>
+                              <ToggleGroupItem
+                                className={SELECTED_TOGGLE_CLASS}
+                                value="eq"
+                                aria-label="เท่ากับ"
+                              >
+                                =
+                              </ToggleGroupItem>
                             </ToggleGroup>
                           ) : null}
                         </div>
@@ -550,80 +1596,369 @@ function ArtifactEditor({ guide, artifacts, initial, catalogTalents }: EditorBas
             </FieldSet>
             <Field>
               <FieldLabel htmlFor="artifact-note">Note (optional)</FieldLabel>
-              <Textarea id="artifact-note" value={note} onChange={(event) => setNote(event.target.value)} />
+              <Textarea
+                id="artifact-note"
+                value={note}
+                onChange={(event) => setNote(event.target.value)}
+              />
             </Field>
           </FieldGroup>
         </CardContent>
-        <CardFooter className="justify-end"><AutosaveStatus state={autosave.state} issues={validation.success ? [] : formatGuideValidationIssues("artifact", validation.error.issues)} onSave={autosave.saveNow} /></CardFooter>
+        <CardFooter className="justify-end">
+          <AutosaveStatus
+            state={autosave.state}
+            issues={
+              validation.success
+                ? []
+                : formatGuideValidationIssues(
+                    "artifact",
+                    validation.error.issues,
+                  )
+            }
+            onSave={autosave.saveNow}
+          />
+        </CardFooter>
       </Card>
     </div>
   );
 }
 
-function ConstellationEditor({ guide, initial, catalogConstellations }: EditorBase) {
+function ConstellationEditor({
+  guide,
+  initial,
+  catalogConstellations,
+}: EditorBase) {
   const [note, setNote] = useState(initial.sectionNote ?? "");
   const makeRows = (savedRows: ConstellationValue[] = []) => {
-    const source = catalogConstellations.length ? catalogConstellations : Array.from({ length: 6 }, (_, index) => ({ level: index + 1, name: `C${index + 1}`, description: savedRows.find((row) => row.level === index + 1)?.detail ?? "", iconUrl: null }));
+    const source = catalogConstellations.length
+      ? catalogConstellations
+      : Array.from({ length: 6 }, (_, index) => ({
+          level: index + 1,
+          name: `C${index + 1}`,
+          description:
+            savedRows.find((row) => row.level === index + 1)?.detail ?? "",
+          iconUrl: null,
+        }));
     return source.map((constellation) => {
       const saved = savedRows.find((row) => row.level === constellation.level);
-      return { ...constellation, cumulativePercent: saved?.cumulativePercent ?? "", isGreat: saved?.isGreat ?? false };
+      return {
+        ...constellation,
+        cumulativePercent: saved?.cumulativePercent ?? "",
+        isGreat: saved?.isGreat ?? false,
+      };
     });
   };
   const [groups, setGroups] = useState(() => {
-    const source = initial.constellationGroups.length ? initial.constellationGroups : [{ id: "constellation-condition-default", note: null, rows: [] }];
-    return source.map((group) => ({ clientId: group.id, note: group.note ?? "", rows: makeRows(group.rows) }));
+    const source = initial.constellationGroups.length
+      ? initial.constellationGroups
+      : [{ id: "constellation-condition-default", note: null, rows: [] }];
+    return source.map((group) => ({
+      clientId: group.id,
+      note: group.note ?? "",
+      rows: makeRows(group.rows),
+    }));
+  });
+  const value = {
+    note: note.trim() || null,
+    groups: groups.map((group) => ({
+      note: group.note.trim() || null,
+      rows: group.rows
+        .filter((row) => row.description.trim() && row.cumulativePercent !== "")
+        .map((row) => ({
+          level: row.level,
+          detail: row.description,
+          cumulativePercent: Number(row.cumulativePercent),
+          isGreat: row.isGreat,
+        })),
+    })),
+  };
+  const validation = constellationSectionSchema.safeParse({
+    ...value,
+    expectedVersion: guide.version,
   });
-  const value = { note: note.trim() || null, groups: groups.map((group) => ({ note: group.note.trim() || null, rows: group.rows.filter((row) => row.description.trim() && row.cumulativePercent !== "").map((row) => ({ level: row.level, detail: row.description, cumulativePercent: Number(row.cumulativePercent), isGreat: row.isGreat })) })) };
-  const validation = constellationSectionSchema.safeParse({ ...value, expectedVersion: guide.version });
   const localDraft = { note, groups };
   const autosave = useAutosave({
     value,
     valid: validation.success,
     initialVersion: guide.version,
-    persist: (next, expectedVersion) => saveConstellationSection(guide.id, { ...next, expectedVersion }),
+    persist: (next, expectedVersion) =>
+      saveConstellationSection(guide.id, { ...next, expectedVersion }),
     storageKey: adminDraftKey(guide.id, "constellations"),
     localDraft,
-    parseLocalDraft: (candidate) => parseEditorDraft<typeof localDraft>(candidate, ["groups"], ["note"]),
-    restoreLocalDraft: (draft) => { setNote(draft.note); setGroups(draft.groups); },
+    parseLocalDraft: (candidate) =>
+      parseEditorDraft<typeof localDraft>(candidate, ["groups"], ["note"]),
+    restoreLocalDraft: (draft) => {
+      setNote(draft.note);
+      setGroups(draft.groups);
+    },
   });
   return (
     <Card>
-      <CardHeader><CardTitle>Constellations</CardTitle><CardDescription>ชื่อ รายละเอียด และไอคอนมาจาก Lunaris อัตโนมัติ กรอกเฉพาะเปอร์เซ็นต์เทียบกับ C0 = 100%</CardDescription></CardHeader>
+      <CardHeader>
+        <CardTitle>Constellations</CardTitle>
+        <CardDescription>
+          ชื่อ รายละเอียด และไอคอนมาจาก Lunaris อัตโนมัติ
+          กรอกเฉพาะเปอร์เซ็นต์เทียบกับ C0 = 100%
+        </CardDescription>
+      </CardHeader>
       <CardContent className="flex flex-col gap-4">
-        <Field><FieldLabel htmlFor="constellation-section-note">Header note (optional)</FieldLabel><Textarea id="constellation-section-note" value={note} onChange={(event) => setNote(event.target.value)} /></Field>
-        {groups.map((group, groupIndex) => <Card key={group.clientId} size="sm">
-          <CardHeader><CardTitle>Condition {groupIndex + 1}</CardTitle><CardDescription>ใช้ note เพื่ออธิบายอาวุธ ทีม หรือเงื่อนไขที่ใช้เปรียบเทียบ</CardDescription>{groups.length > 1 ? <CardAction><DeleteConfirmationDialog trigger={<Button type="button" variant="ghost" size="icon-sm" />} title={`ลบ Condition ${groupIndex + 1}?`} description="เปอร์เซ็นต์กลุ่มดาวทั้งหมดในเงื่อนไขนี้จะถูกลบออก" onConfirm={() => setGroups(groups.filter((item) => item.clientId !== group.clientId))}><Trash2Icon /><span className="sr-only">ลบ Condition {groupIndex + 1}</span></DeleteConfirmationDialog></CardAction> : null}</CardHeader>
-          <CardContent className="flex flex-col gap-4">
-            <Field><FieldLabel htmlFor={`constellation-condition-note-${group.clientId}`}>Condition note (optional)</FieldLabel><Textarea id={`constellation-condition-note-${group.clientId}`} value={group.note} onChange={(event) => setGroups(groups.map((item) => item.clientId === group.clientId ? { ...item, note: event.target.value } : item))} /></Field>
-            <div className="grid gap-4 lg:grid-cols-2">
-              {group.rows.map((row, rowIndex) => <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="text" inputMode="decimal" value={row.cumulativePercent} onChange={(event) => setGroups(groups.map((item) => item.clientId === group.clientId ? { ...item, rows: item.rows.map((candidate, index) => index === rowIndex ? { ...candidate, cumulativePercent: normalizePercentInput(event.target.value, candidate.cumulativePercent) } : candidate) } : item))} onBlur={() => setGroups(groups.map((item) => item.clientId === group.clientId ? { ...item, rows: item.rows.map((candidate, index) => index === rowIndex ? { ...candidate, cumulativePercent: finalizePercentInput(candidate.cumulativePercent) } : candidate) } : item))} /></Field><Toggle variant="outline" pressed={row.isGreat} onPressedChange={(isGreat) => setGroups(groups.map((item) => item.clientId === group.clientId ? { ...item, rows: item.rows.map((candidate, index) => index === rowIndex ? { ...candidate, isGreat } : candidate) } : item))} aria-label={`Mark Condition ${groupIndex + 1} 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>)}
-            </div>
-          </CardContent>
-        </Card>)}
+        <Field>
+          <FieldLabel htmlFor="constellation-section-note">
+            Header note (optional)
+          </FieldLabel>
+          <Textarea
+            id="constellation-section-note"
+            value={note}
+            onChange={(event) => setNote(event.target.value)}
+          />
+        </Field>
+        {groups.map((group, groupIndex) => (
+          <Card key={group.clientId} size="sm">
+            <CardHeader>
+              <CardTitle>Condition {groupIndex + 1}</CardTitle>
+              <CardDescription>
+                ใช้ note เพื่ออธิบายอาวุธ ทีม หรือเงื่อนไขที่ใช้เปรียบเทียบ
+              </CardDescription>
+              {groups.length > 1 ? (
+                <CardAction>
+                  <DeleteConfirmationDialog
+                    trigger={
+                      <Button type="button" variant="ghost" size="icon-sm" />
+                    }
+                    title={`ลบ Condition ${groupIndex + 1}?`}
+                    description="เปอร์เซ็นต์กลุ่มดาวทั้งหมดในเงื่อนไขนี้จะถูกลบออก"
+                    onConfirm={() =>
+                      setGroups(
+                        groups.filter(
+                          (item) => item.clientId !== group.clientId,
+                        ),
+                      )
+                    }
+                  >
+                    <Trash2Icon />
+                    <span className="sr-only">
+                      ลบ Condition {groupIndex + 1}
+                    </span>
+                  </DeleteConfirmationDialog>
+                </CardAction>
+              ) : null}
+            </CardHeader>
+            <CardContent className="flex flex-col gap-4">
+              <Field>
+                <FieldLabel
+                  htmlFor={`constellation-condition-note-${group.clientId}`}
+                >
+                  Condition note (optional)
+                </FieldLabel>
+                <Textarea
+                  id={`constellation-condition-note-${group.clientId}`}
+                  value={group.note}
+                  onChange={(event) =>
+                    setGroups(
+                      groups.map((item) =>
+                        item.clientId === group.clientId
+                          ? { ...item, note: event.target.value }
+                          : item,
+                      ),
+                    )
+                  }
+                />
+              </Field>
+              <div className="grid gap-4 lg:grid-cols-2">
+                {group.rows.map((row, rowIndex) => (
+                  <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="text"
+                          inputMode="decimal"
+                          value={row.cumulativePercent}
+                          onChange={(event) =>
+                            setGroups(
+                              groups.map((item) =>
+                                item.clientId === group.clientId
+                                  ? {
+                                      ...item,
+                                      rows: item.rows.map((candidate, index) =>
+                                        index === rowIndex
+                                          ? {
+                                              ...candidate,
+                                              cumulativePercent:
+                                                normalizePercentInput(
+                                                  event.target.value,
+                                                  candidate.cumulativePercent,
+                                                ),
+                                            }
+                                          : candidate,
+                                      ),
+                                    }
+                                  : item,
+                              ),
+                            )
+                          }
+                          onBlur={() =>
+                            setGroups(
+                              groups.map((item) =>
+                                item.clientId === group.clientId
+                                  ? {
+                                      ...item,
+                                      rows: item.rows.map((candidate, index) =>
+                                        index === rowIndex
+                                          ? {
+                                              ...candidate,
+                                              cumulativePercent:
+                                                finalizePercentInput(
+                                                  candidate.cumulativePercent,
+                                                ),
+                                            }
+                                          : candidate,
+                                      ),
+                                    }
+                                  : item,
+                              ),
+                            )
+                          }
+                        />
+                      </Field>
+                      <Toggle
+                        variant="outline"
+                        pressed={row.isGreat}
+                        onPressedChange={(isGreat) =>
+                          setGroups(
+                            groups.map((item) =>
+                              item.clientId === group.clientId
+                                ? {
+                                    ...item,
+                                    rows: item.rows.map((candidate, index) =>
+                                      index === rowIndex
+                                        ? { ...candidate, isGreat }
+                                        : candidate,
+                                    ),
+                                  }
+                                : item,
+                            ),
+                          )
+                        }
+                        aria-label={`Mark Condition ${groupIndex + 1} 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>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        ))}
       </CardContent>
-      <CardFooter className="flex-wrap justify-between gap-3"><Button type="button" variant="outline" disabled={groups.length >= 20} onClick={() => setGroups([...groups, { clientId: createClientId("constellation-condition"), note: "", rows: makeRows() }])}><PlusIcon data-icon="inline-start" />เพิ่ม Condition</Button><AutosaveStatus state={autosave.state} issues={validation.success ? [] : formatGuideValidationIssues("constellations", validation.error.issues)} onSave={autosave.saveNow} /></CardFooter>
+      <CardFooter className="flex-wrap justify-between gap-3">
+        <Button
+          type="button"
+          variant="outline"
+          disabled={groups.length >= 20}
+          onClick={() =>
+            setGroups([
+              ...groups,
+              {
+                clientId: createClientId("constellation-condition"),
+                note: "",
+                rows: makeRows(),
+              },
+            ])
+          }
+        >
+          <PlusIcon data-icon="inline-start" />
+          เพิ่ม Condition
+        </Button>
+        <AutosaveStatus
+          state={autosave.state}
+          issues={
+            validation.success
+              ? []
+              : formatGuideValidationIssues(
+                  "constellations",
+                  validation.error.issues,
+                )
+          }
+          onSave={autosave.saveNow}
+        />
+      </CardFooter>
     </Card>
   );
 }
 
-function TeamEditor({ guide, characters, weapons, artifacts, initial }: EditorBase) {
-  const fallbackMembers = Array.from({ length: 4 }, () => ({ characterKey: "", weaponKey: null, artifactKey: null, secondArtifactKey: null, constellation: 0, refinement: 1, damage: "0" }));
+function TeamEditor({
+  guide,
+  characters,
+  weapons,
+  artifacts,
+  initial,
+}: EditorBase) {
+  const fallbackMembers = Array.from({ length: 4 }, () => ({
+    characterKey: "",
+    weaponKey: null,
+    artifactKey: null,
+    secondArtifactKey: null,
+    constellation: 0,
+    refinement: 1,
+    damage: "0",
+  }));
   const teamSensors = useSensors(
     useSensor(PointerSensor),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+    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 validation = teamSectionSchema.safeParse({ ...value, expectedVersion: guide.version });
+  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 validation = teamSectionSchema.safeParse({
+    ...value,
+    expectedVersion: guide.version,
+  });
   const localDraft = { teams };
   const autosave = useAutosave({
     value,
     valid: validation.success,
     initialVersion: guide.version,
-    persist: (next, expectedVersion) => saveTeamSection(guide.id, { ...next, expectedVersion }),
+    persist: (next, expectedVersion) =>
+      saveTeamSection(guide.id, { ...next, expectedVersion }),
     storageKey: adminDraftKey(guide.id, "team"),
     localDraft,
-    parseLocalDraft: (candidate) => parseEditorDraft<typeof localDraft>(candidate, ["teams"]),
+    parseLocalDraft: (candidate) =>
+      parseEditorDraft<typeof localDraft>(candidate, ["teams"]),
     restoreLocalDraft: (draft) => setTeams(draft.teams),
   });
   const handleTeamDragEnd = ({ active, over }: DragEndEvent) => {
@@ -636,136 +1971,669 @@ function TeamEditor({ guide, characters, weapons, artifacts, initial }: EditorBa
   };
   return (
     <Card>
-      <CardHeader><CardTitle>Team Calc</CardTitle><CardDescription>ลากเพื่อเรียง Team แล้วใส่ความเสียหายของตัวละคร 4 ตัว ระบบจะแสดงสัดส่วนและ Total DPS และบันทึกอัตโนมัติ</CardDescription></CardHeader>
+      <CardHeader>
+        <CardTitle>Team Calc</CardTitle>
+        <CardDescription>
+          ลากเพื่อเรียง Team แล้วใส่ความเสียหายของตัวละคร 4 ตัว
+          ระบบจะแสดงสัดส่วนและ Total DPS และบันทึกอัตโนมัติ
+        </CardDescription>
+      </CardHeader>
       <CardContent>
-        <DndContext sensors={teamSensors} collisionDetection={closestCenter} onDragEnd={handleTeamDragEnd}>
-          <SortableContext items={teams.map((team) => team.clientId)} strategy={verticalListSortingStrategy}>
-            <Accordion multiple defaultValue={teams.length ? [teams[0].clientId] : []} className="gap-3">
+        <DndContext
+          sensors={teamSensors}
+          collisionDetection={closestCenter}
+          onDragEnd={handleTeamDragEnd}
+        >
+          <SortableContext
+            items={teams.map((team) => team.clientId)}
+            strategy={verticalListSortingStrategy}
+          >
+            <Accordion
+              multiple
+              defaultValue={teams.length ? [teams[0].clientId] : []}
+              className="gap-3"
+            >
               {teams.map((team, teamIndex) => {
-            const total = team.members.reduce((sum, member) => sum + (Number(member.damage) || 0), 0);
-            const dps = total / (Number(team.rotationSeconds) || 1);
-            return (
-              <SortableTeamItem key={team.clientId} id={team.clientId}>{(dragHandle) => <>
-                <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>
-                    </span>
-                  </AccordionTrigger>
-                  <div className="ml-auto flex shrink-0 items-center gap-1">
-                    {dragHandle}
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon-sm"
-                      disabled={teams.length >= 30}
-                      onClick={() => setTeams((current) => {
-                        const sourceIndex = current.findIndex((item) => item.clientId === team.clientId);
-                        if (sourceIndex === -1 || current.length >= 30) return current;
-                        const source = current[sourceIndex];
-                        const title = source.title.trim()
-                          ? `${source.title.slice(0, 153)} (Copy)`
-                          : `Team ${sourceIndex + 1} (Copy)`;
-                        const copy = {
-                          ...source,
-                          clientId: createClientId("team"),
-                          title,
-                          members: source.members.map((member) => ({ ...member })),
-                        };
-                        return current.toSpliced(sourceIndex + 1, 0, copy);
-                      })}
-                    >
-                      <CopyIcon /><span className="sr-only">ทำสำเนา Team</span>
-                    </Button>
-                    <DeleteConfirmationDialog
-                      trigger={<Button type="button" variant="ghost" size="icon-sm" />}
-                      title={`ลบ ${team.title || `Team ${teamIndex + 1}`}?`}
-                      description="ข้อมูล Team และตัวละครทั้ง 4 คนจะถูกลบออกจาก Guide"
-                      confirmLabel="ยืนยันลบ Team"
-                      onConfirm={() => setTeams(teams.filter((item) => item.clientId !== team.clientId))}
-                    >
-                      <Trash2Icon /><span className="sr-only">ลบ Team</span>
-                    </DeleteConfirmationDialog>
-                  </div>
-                </div>
-                <AccordionContent className="pb-4">
-                  <FieldGroup>
-                    <Field><FieldLabel className="flex items-center gap-2"><UserRoundIcon />ชื่อ Team</FieldLabel><Input value={team.title} onChange={(event) => setTeams(teams.map((item, index) => index === teamIndex ? { ...item, title: event.target.value } : item))} /></Field>
-                    <div className="grid gap-4 md:grid-cols-2">
-                      {team.members.map((member, memberIndex) => {
-                        const character = characters.find((item) => item.key === member.characterKey);
-                        const compatibleWeapons = weapons.filter((weapon) => supportsWeaponType(character?.weaponType, weapon.weaponType));
-                        return (
-                          <Card key={memberIndex} size="sm">
-                            <CardHeader>
-                              <CardTitle>ตัวละคร {memberIndex + 1}</CardTitle>
-                              <CardDescription>{total ? `${((Number(member.damage) || 0) / total * 100).toFixed(2)}% ของ Team` : "0% ของ Team"}</CardDescription>
-                              {character ? <CardAction><Avatar><AvatarImage src={character.imageUrl} alt={character.name} /><AvatarFallback>{character.name.slice(0, 2).toUpperCase()}</AvatarFallback></Avatar></CardAction> : null}
-                            </CardHeader>
-                            <CardContent>
-                              <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, secondArtifactKey: 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>
-                                <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>
-                                <div className="grid grid-cols-2 gap-4">
-                                  <Field><FieldLabel className="flex items-center gap-2"><GemIcon />Artifact set 1</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"><GemIcon />Artifact set 2</FieldLabel><CatalogPicker items={artifacts} value={member.secondArtifactKey ?? ""} placeholder="ค้นหาชุด Artifact…" rarityBackground onChange={(secondArtifactKey) => setTeams(teams.map((item, index) => index === teamIndex ? { ...item, members: item.members.map((candidate, inner) => inner === memberIndex ? { ...candidate, secondArtifactKey: secondArtifactKey || null } : candidate) } : item))} /></Field>
-                                </div>
-                                <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>
-                            </CardContent>
-                          </Card>
-                        );
-                      })}
-                    </div>
-                    <Field><FieldLabel className="flex items-center gap-2"><TimerIcon />Rotation (seconds)</FieldLabel><Input type="number" min="0.01" step="0.01" value={team.rotationSeconds} onChange={(event) => setTeams(teams.map((item, index) => index === teamIndex ? { ...item, rotationSeconds: event.target.value } : item))} /></Field>
-                    <Field><FieldLabel className="flex items-center gap-2"><ListOrderedIcon />Combo</FieldLabel><Textarea value={team.combo} onChange={(event) => setTeams(teams.map((item, index) => index === teamIndex ? { ...item, combo: event.target.value } : item))} /></Field>
-                  </FieldGroup>
-                </AccordionContent>
-              </>}</SortableTeamItem>
-            );
+                const total = team.members.reduce(
+                  (sum, member) => sum + (Number(member.damage) || 0),
+                  0,
+                );
+                const dps = total / (Number(team.rotationSeconds) || 1);
+                return (
+                  <SortableTeamItem key={team.clientId} id={team.clientId}>
+                    {(dragHandle) => (
+                      <>
+                        <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>
+                            </span>
+                          </AccordionTrigger>
+                          <div className="ml-auto flex shrink-0 items-center gap-1">
+                            {dragHandle}
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="icon-sm"
+                              disabled={teams.length >= 30}
+                              onClick={() =>
+                                setTeams((current) => {
+                                  const sourceIndex = current.findIndex(
+                                    (item) => item.clientId === team.clientId,
+                                  );
+                                  if (
+                                    sourceIndex === -1 ||
+                                    current.length >= 30
+                                  )
+                                    return current;
+                                  const source = current[sourceIndex];
+                                  const title = source.title.trim()
+                                    ? `${source.title.slice(0, 153)} (Copy)`
+                                    : `Team ${sourceIndex + 1} (Copy)`;
+                                  const copy = {
+                                    ...source,
+                                    clientId: createClientId("team"),
+                                    title,
+                                    members: source.members.map((member) => ({
+                                      ...member,
+                                    })),
+                                  };
+                                  return current.toSpliced(
+                                    sourceIndex + 1,
+                                    0,
+                                    copy,
+                                  );
+                                })
+                              }
+                            >
+                              <CopyIcon />
+                              <span className="sr-only">ทำสำเนา Team</span>
+                            </Button>
+                            <DeleteConfirmationDialog
+                              trigger={
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon-sm"
+                                />
+                              }
+                              title={`ลบ ${team.title || `Team ${teamIndex + 1}`}?`}
+                              description="ข้อมูล Team และตัวละครทั้ง 4 คนจะถูกลบออกจาก Guide"
+                              confirmLabel="ยืนยันลบ Team"
+                              onConfirm={() =>
+                                setTeams(
+                                  teams.filter(
+                                    (item) => item.clientId !== team.clientId,
+                                  ),
+                                )
+                              }
+                            >
+                              <Trash2Icon />
+                              <span className="sr-only">ลบ Team</span>
+                            </DeleteConfirmationDialog>
+                          </div>
+                        </div>
+                        <AccordionContent className="pb-4">
+                          <FieldGroup>
+                            <Field>
+                              <FieldLabel className="flex items-center gap-2">
+                                <UserRoundIcon />
+                                ชื่อ Team
+                              </FieldLabel>
+                              <Input
+                                value={team.title}
+                                onChange={(event) =>
+                                  setTeams(
+                                    teams.map((item, index) =>
+                                      index === teamIndex
+                                        ? { ...item, title: event.target.value }
+                                        : item,
+                                    ),
+                                  )
+                                }
+                              />
+                            </Field>
+                            <div className="grid gap-4 md:grid-cols-2">
+                              {team.members.map((member, memberIndex) => {
+                                const character = characters.find(
+                                  (item) => item.key === member.characterKey,
+                                );
+                                const compatibleWeapons = weapons.filter(
+                                  (weapon) =>
+                                    supportsWeaponType(
+                                      character?.weaponType,
+                                      weapon.weaponType,
+                                    ),
+                                );
+                                return (
+                                  <Card key={memberIndex} size="sm">
+                                    <CardHeader>
+                                      <CardTitle>
+                                        ตัวละคร {memberIndex + 1}
+                                      </CardTitle>
+                                      <CardDescription>
+                                        {total
+                                          ? `${(((Number(member.damage) || 0) / total) * 100).toFixed(2)}% ของ Team`
+                                          : "0% ของ Team"}
+                                      </CardDescription>
+                                      {character ? (
+                                        <CardAction>
+                                          <Avatar>
+                                            <AvatarImage
+                                              src={character.imageUrl}
+                                              alt={character.name}
+                                            />
+                                            <AvatarFallback>
+                                              {character.name
+                                                .slice(0, 2)
+                                                .toUpperCase()}
+                                            </AvatarFallback>
+                                          </Avatar>
+                                        </CardAction>
+                                      ) : null}
+                                    </CardHeader>
+                                    <CardContent>
+                                      <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,
+                                                                    secondArtifactKey:
+                                                                      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">
+                                            <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>
+                                        <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>
+                                        <div className="grid grid-cols-2 gap-4">
+                                          <Field>
+                                            <FieldLabel className="flex items-center gap-2">
+                                              <GemIcon />
+                                              Artifact set 1
+                                            </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">
+                                              <GemIcon />
+                                              Artifact set 2
+                                            </FieldLabel>
+                                            <CatalogPicker
+                                              items={artifacts}
+                                              value={
+                                                member.secondArtifactKey ?? ""
+                                              }
+                                              placeholder="ค้นหาชุด Artifact…"
+                                              rarityBackground
+                                              onChange={(secondArtifactKey) =>
+                                                setTeams(
+                                                  teams.map((item, index) =>
+                                                    index === teamIndex
+                                                      ? {
+                                                          ...item,
+                                                          members:
+                                                            item.members.map(
+                                                              (
+                                                                candidate,
+                                                                inner,
+                                                              ) =>
+                                                                inner ===
+                                                                memberIndex
+                                                                  ? {
+                                                                      ...candidate,
+                                                                      secondArtifactKey:
+                                                                        secondArtifactKey ||
+                                                                        null,
+                                                                    }
+                                                                  : candidate,
+                                                            ),
+                                                        }
+                                                      : item,
+                                                  ),
+                                                )
+                                              }
+                                            />
+                                          </Field>
+                                        </div>
+                                      </FieldGroup>
+                                    </CardContent>
+                                  </Card>
+                                );
+                              })}
+                            </div>
+                            <Field>
+                              <FieldLabel className="flex items-center gap-2">
+                                <TimerIcon />
+                                Rotation (seconds)
+                              </FieldLabel>
+                              <Input
+                                type="number"
+                                min="0.01"
+                                step="0.01"
+                                value={team.rotationSeconds}
+                                onChange={(event) =>
+                                  setTeams(
+                                    teams.map((item, index) =>
+                                      index === teamIndex
+                                        ? {
+                                            ...item,
+                                            rotationSeconds: event.target.value,
+                                          }
+                                        : item,
+                                    ),
+                                  )
+                                }
+                              />
+                            </Field>
+                            <Field>
+                              <FieldLabel className="flex items-center gap-2">
+                                <ListOrderedIcon />
+                                Combo
+                              </FieldLabel>
+                              <Textarea
+                                value={team.combo}
+                                onChange={(event) =>
+                                  setTeams(
+                                    teams.map((item, index) =>
+                                      index === teamIndex
+                                        ? { ...item, combo: event.target.value }
+                                        : item,
+                                    ),
+                                  )
+                                }
+                              />
+                            </Field>
+                          </FieldGroup>
+                        </AccordionContent>
+                      </>
+                    )}
+                  </SortableTeamItem>
+                );
               })}
             </Accordion>
           </SortableContext>
         </DndContext>
       </CardContent>
-      <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.state} issues={validation.success ? [] : formatGuideValidationIssues("team", validation.error.issues)} onSave={autosave.saveNow} /></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.state}
+          issues={
+            validation.success
+              ? []
+              : formatGuideValidationIssues("team", validation.error.issues)
+          }
+          onSave={autosave.saveNow}
+        />
+      </CardFooter>
     </Card>
   );
 }
 
 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 || row.percent === "" ? null : Number(row.percent) })) })) };
-  const validation = extraSectionSchema.safeParse({ ...value, expectedVersion: guide.version });
+  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 || row.percent === ""
+            ? null
+            : Number(row.percent),
+      })),
+    })),
+  };
+  const validation = extraSectionSchema.safeParse({
+    ...value,
+    expectedVersion: guide.version,
+  });
   const localDraft = { sections };
   const autosave = useAutosave({
     value,
     valid: validation.success,
     initialVersion: guide.version,
-    persist: (next, expectedVersion) => saveExtraSectionList(guide.id, { ...next, expectedVersion }),
+    persist: (next, expectedVersion) =>
+      saveExtraSectionList(guide.id, { ...next, expectedVersion }),
     storageKey: adminDraftKey(guide.id, "extra"),
     localDraft,
-    parseLocalDraft: (candidate) => parseEditorDraft<typeof localDraft>(candidate, ["sections"]),
+    parseLocalDraft: (candidate) =>
+      parseEditorDraft<typeof localDraft>(candidate, ["sections"]),
     restoreLocalDraft: (draft) => setSections(draft.sections),
   });
   return (
     <Card>
-      <CardHeader><CardTitle>Extra sections</CardTitle><CardDescription>เพิ่มส่วนเสริมแบบภาพ หัวข้อ ข้อความสั้น และเปอร์เซ็นต์ ระบบจะบันทึกอัตโนมัติ</CardDescription></CardHeader>
+      <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>
+              <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>
                 <DeleteConfirmationDialog
-                  trigger={<Button type="button" variant="ghost" size="icon-sm" />}
+                  trigger={
+                    <Button type="button" variant="ghost" size="icon-sm" />
+                  }
                   title={`ลบ ${section.title || `Extra section ${sectionIndex + 1}`}?`}
                   description="แถว ข้อความ รูปภาพ และเปอร์เซ็นต์ทั้งหมดในส่วนนี้จะถูกลบออกจาก Guide"
-                  onConfirm={() => setSections(sections.filter((_, index) => index !== sectionIndex))}
+                  onConfirm={() =>
+                    setSections(
+                      sections.filter((_, index) => index !== sectionIndex),
+                    )
+                  }
                 >
-                  <Trash2Icon /><span className="sr-only">ลบส่วน</span>
+                  <Trash2Icon />
+                  <span className="sr-only">ลบส่วน</span>
                 </DeleteConfirmationDialog>
               </CardAction>
             </CardHeader>
@@ -773,55 +2641,318 @@ function ExtraEditor({ guide, initial }: EditorBase) {
               {section.rows.map((row, rowIndex) => (
                 <Card key={rowIndex} size="sm">
                   <CardHeader>
-                    <CardTitle>{row.heading || `แถว ${rowIndex + 1}`}</CardTitle>
+                    <CardTitle>
+                      {row.heading || `แถว ${rowIndex + 1}`}
+                    </CardTitle>
                     <CardAction>
                       <DeleteConfirmationDialog
-                        trigger={<Button type="button" variant="ghost" size="icon-sm" />}
+                        trigger={
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon-sm"
+                          />
+                        }
                         title={`ลบ ${row.heading || `แถว ${rowIndex + 1}`}?`}
                         description="ข้อความ รูปภาพ และเปอร์เซ็นต์ในแถวนี้จะถูกลบออกจาก Guide"
-                        onConfirm={() => setSections(sections.map((item, index) => index === sectionIndex ? { ...item, rows: item.rows.filter((_, inner) => inner !== rowIndex) } : item))}
+                        onConfirm={() =>
+                          setSections(
+                            sections.map((item, index) =>
+                              index === sectionIndex
+                                ? {
+                                    ...item,
+                                    rows: item.rows.filter(
+                                      (_, inner) => inner !== rowIndex,
+                                    ),
+                                  }
+                                : item,
+                            ),
+                          )
+                        }
                       >
-                        <Trash2Icon /><span className="sr-only">ลบแถว</span>
+                        <Trash2Icon />
+                        <span className="sr-only">ลบแถว</span>
                       </DeleteConfirmationDialog>
                     </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" />
+                        <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"
+                          />
                           <DeleteConfirmationDialog
-                            trigger={<Button type="button" variant="destructive" size="icon-sm" className="absolute top-2 right-2" aria-label="ลบภาพ" />}
+                            trigger={
+                              <Button
+                                type="button"
+                                variant="destructive"
+                                size="icon-sm"
+                                className="absolute top-2 right-2"
+                                aria-label="ลบภาพ"
+                              />
+                            }
                             title="ลบภาพนี้?"
                             description="ภาพจะถูกนำออกจากแถวนี้"
                             confirmLabel="ยืนยันลบภาพ"
-                            onConfirm={() => setSections(sections.map((item, index) => index === sectionIndex ? { ...item, rows: item.rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, mediaId: null, imageUrl: null } : candidate) } : item))}
+                            onConfirm={() =>
+                              setSections(
+                                sections.map((item, index) =>
+                                  index === sectionIndex
+                                    ? {
+                                        ...item,
+                                        rows: item.rows.map(
+                                          (candidate, inner) =>
+                                            inner === rowIndex
+                                              ? {
+                                                  ...candidate,
+                                                  mediaId: null,
+                                                  imageUrl: null,
+                                                }
+                                              : candidate,
+                                        ),
+                                      }
+                                    : item,
+                                ),
+                              )
+                            }
                           >
                             <XIcon />
                           </DeleteConfirmationDialog>
                         </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))} />
+                      <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
+                          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="text" inputMode="decimal" value={row.percent ?? ""} onChange={(event) => setSections(sections.map((item, index) => index === sectionIndex ? { ...item, rows: item.rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, percent: normalizePercentInput(event.target.value, candidate.percent ?? "") || null } : candidate) } : item))} onBlur={() => setSections(sections.map((item, index) => index === sectionIndex ? { ...item, rows: item.rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, percent: finalizePercentInput(candidate.percent ?? "") || null } : candidate) } : item))} /></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="text"
+                          inputMode="decimal"
+                          value={row.percent ?? ""}
+                          onChange={(event) =>
+                            setSections(
+                              sections.map((item, index) =>
+                                index === sectionIndex
+                                  ? {
+                                      ...item,
+                                      rows: item.rows.map((candidate, inner) =>
+                                        inner === rowIndex
+                                          ? {
+                                              ...candidate,
+                                              percent:
+                                                normalizePercentInput(
+                                                  event.target.value,
+                                                  candidate.percent ?? "",
+                                                ) || null,
+                                            }
+                                          : candidate,
+                                      ),
+                                    }
+                                  : item,
+                              ),
+                            )
+                          }
+                          onBlur={() =>
+                            setSections(
+                              sections.map((item, index) =>
+                                index === sectionIndex
+                                  ? {
+                                      ...item,
+                                      rows: item.rows.map((candidate, inner) =>
+                                        inner === rowIndex
+                                          ? {
+                                              ...candidate,
+                                              percent:
+                                                finalizePercentInput(
+                                                  candidate.percent ?? "",
+                                                ) || null,
+                                            }
+                                          : candidate,
+                                      ),
+                                    }
+                                  : item,
+                              ),
+                            )
+                          }
+                        />
+                      </Field>
                     </FieldGroup>
                   </CardContent>
                 </Card>
               ))}
-              <Button type="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>
+              <Button
+                type="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.state} issues={validation.success ? [] : formatGuideValidationIssues("extra", validation.error.issues)} onSave={autosave.saveNow} /></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.state}
+          issues={
+            validation.success
+              ? []
+              : formatGuideValidationIssues("extra", validation.error.issues)
+          }
+          onSave={autosave.saveNow}
+        />
+      </CardFooter>
     </Card>
   );
 }
diff --git a/lib/catalog/travelers.test.ts b/lib/catalog/travelers.test.ts
index 771fba2..521b661 100644
--- a/lib/catalog/travelers.test.ts
+++ b/lib/catalog/travelers.test.ts
@@ -30,4 +30,16 @@ describe("custom Traveler catalog", () => {
     expect(isCustomTravelerKey("traveler_hydro")).toBe(true);
     expect(isCustomTravelerKey("traveler_unknown")).toBe(false);
   });
+
+  it("uses element-first display names without changing stable keys", () => {
+    expect(customTravelers.map(({ key, name }) => ({ key, name }))).toEqual([
+      { key: "traveler_pyro", name: "Pyro Traveler" },
+      { key: "traveler_hydro", name: "Hydro Traveler" },
+      { key: "traveler_anemo", name: "Anemo Traveler" },
+      { key: "traveler_geo", name: "Geo Traveler" },
+      { key: "traveler_electro", name: "Electro Traveler" },
+      { key: "traveler_dendro", name: "Dendro Traveler" },
+      { key: "traveler_cryo", name: "Cryo Traveler" },
+    ]);
+  });
 });
diff --git a/lib/catalog/travelers.ts b/lib/catalog/travelers.ts
index 45a90ca..7abf47e 100644
--- a/lib/catalog/travelers.ts
+++ b/lib/catalog/travelers.ts
@@ -1,11 +1,11 @@
 export const customTravelers = [
-  { key: "traveler_pyro", name: "Traveler Pyro", element: "Pyro", rarity: 5, detailKey: "10000005_PYRO", asset: "traveler_pyro.webp" },
-  { key: "traveler_hydro", name: "Traveler Hydro", element: "Hydro", rarity: 5, detailKey: "10000005_HYDRO", asset: "traveler_hydro.webp" },
-  { key: "traveler_anemo", name: "Traveler Anemo", element: "Anemo", rarity: 5, detailKey: "10000005_ANEMO", asset: "traveler_anemo.webp" },
-  { key: "traveler_geo", name: "Traveler Geo", element: "Geo", rarity: 5, detailKey: "10000005_GEO", asset: "traveler_geo.webp" },
-  { key: "traveler_electro", name: "Traveler Electro", element: "Electro", rarity: 5, detailKey: "10000005_ELECTRO", asset: "traveler_electro.webp" },
-  { key: "traveler_dendro", name: "Traveler Dendro", element: "Dendro", rarity: 5, detailKey: "10000005_DENDRO", asset: "traveler_dendro.webp" },
-  { key: "traveler_cryo", name: "Traveler Cryo", element: "Cryo", rarity: 5, detailKey: "10000005_CRYO", asset: "traveler_cyro.webp" },
+  { key: "traveler_pyro", name: "Pyro Traveler", element: "Pyro", rarity: 5, detailKey: "10000005_PYRO", asset: "traveler_pyro.webp" },
+  { key: "traveler_hydro", name: "Hydro Traveler", element: "Hydro", rarity: 5, detailKey: "10000005_HYDRO", asset: "traveler_hydro.webp" },
+  { key: "traveler_anemo", name: "Anemo Traveler", element: "Anemo", rarity: 5, detailKey: "10000005_ANEMO", asset: "traveler_anemo.webp" },
+  { key: "traveler_geo", name: "Geo Traveler", element: "Geo", rarity: 5, detailKey: "10000005_GEO", asset: "traveler_geo.webp" },
+  { key: "traveler_electro", name: "Electro Traveler", element: "Electro", rarity: 5, detailKey: "10000005_ELECTRO", asset: "traveler_electro.webp" },
+  { key: "traveler_dendro", name: "Dendro Traveler", element: "Dendro", rarity: 5, detailKey: "10000005_DENDRO", asset: "traveler_dendro.webp" },
+  { key: "traveler_cryo", name: "Cryo Traveler", element: "Cryo", rarity: 5, detailKey: "10000005_CRYO", asset: "traveler_cyro.webp" },
 ] as const;
 
 export function isCustomTravelerKey(key: string): boolean {